/* CSS初期設定 */

/* # =================================================================
   # 基本設定
   # ================================================================= */

html {
  box-sizing: border-box;
  overflow-y: scroll; /* All browsers without overlaying scrollbars */
  -webkit-text-size-adjust: 100%; /* iOS 8+ */
}
*,
::before,
::after {
  background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
  box-sizing: inherit;
}

::before,
::after {
  text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
  vertical-align: inherit;
}

* {
  padding: 0; /* Reset `padding` and `margin` of all elements */
  margin: 0;
}

/* standard helper classes */

.clr
{
   clear: both;
   overflow: hidden;
   width: 1px;
   height: 1px;
   margin: 0 -1px -1px 0;
   border: 0;
   padding: 0;
   font-size: 0;
   line-height: 0;
}


.clearfix:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

.pcnon{
	display: none;
}
.spnon{
	display: block;
}

.hamburger-menu{
	display: none;
}
* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

.hamburger-menu{
	display: none;
}
.grecaptcha-badge {
    bottom: 70px !important;
	z-index: 100000;
}
.pagetop{
  position: fixed;
  right: 5px;
  bottom: 10px;
  font-size: 50px;
  color: #fff;
  padding: 10px;
  cursor: pointer;
  transition: .3s;
  z-index: 10000;
  /*デフォルトで非表示にする*/
  opacity: 0;
  visibility: hidden;
}

/*このクラスが付与されると表示する*/
.active{
  opacity: 1;
  visibility: visible;
}



.bot50{
margin-bottom: 50px;
}

.plan_add{
    width: 800px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 2.2;
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 40%, #ffeded 100%);
    border: 3px solid #e7a0a0;
    border-radius: 20px;
    padding: 30px;
}


.partner-desc {
  list-style: none;
  padding: 0;
  margin: 30px 0;
}

.partner-desc li {
  background: linear-gradient(to bottom, #ffffff 0%, #e3f6fb 100%);
  border: 1px solid #b2dce8;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 12px;
  color: #065a73;
  font-weight: 500;
  transition: background 0.3s ease;
  font-weight: bold;
}

.partner-desc li:hover {
  background: linear-gradient(to bottom, #f0fbff 0%, #d4f1fa 100%);
}

.p-postList.-type-card .p-postList__item {
    margin-bottom: 60px !important;
}



.faq-count-box.small-blue {
    display: inline-block;
    background: #2f80ed; /* SEO対策ラボのメインカラーに合わせた青 */
    color: #fff;
    font-size: 0.95em;
    font-weight: bold;
    padding: 6px 14px;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
}
.faq-count-box.small-blue::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 8px 0 8px;
    border-style: solid;
    border-color: #2f80ed transparent transparent transparent;
}
/* 共通設定（ベース） */
.faq-count-box .faq-number {
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: bold;
  margin: 0 4px;
  display: inline-block;
  font-size: 20px;
}

/* MEO（オレンジ）用 */
.faq-count-box.small-orange .faq-number {
  background: #fff;
  color: #ff6f61;
}


/* SEO（ブルー）用 */
.faq-count-box.small-blue .faq-number {
  background: #fff;
  color: #2f80ed;
}

.faq-count-box .small-black .faq-number {
  background: #fff;
  color: #313131 !important;
}

.paid-box {
    text-align: center;
    margin: 40px auto 60px auto;
    max-width: 800px;
}

.paid-img {
  max-width: 100%;
  height: auto;
  margin-bottom: 16px;
}

.paid-text {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  margin: 20px 0;
}

.paid-text small {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: #666;
}

.web-production-page {
  /* このページ内だけで有効な変数を定義 */
  --main-color: #1a2b48;
  --accent-color: #55709f;
  --bg-light-gray: #faf9f8;
  --font-base: 'Noto Sans JP', sans-serif;
  --font-en: 'Poppins', sans-serif;

  /* このページ独自のフォントなどを指定する場合ここに記述 */
  font-family: var(--font-base);
  color: #495057;
  background-color: #fff;
}
.web-production-page .page-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 40px;
}

.web_bottom{
	margin-top: 30px;
}
.dt-section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    text-align: left; /* 左揃え */
    padding-left: 20px;
    padding-bottom: 15px;
    border-bottom: 3px solid #007bff; /* テーマカラーに合わせて変更してください */
    margin-bottom: 40px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* スマートフォン向けの調整 */
@media (max-width: 768px) {
    .dt-section-title {
        font-size: 1.6rem;
        padding-left: 0;
        margin-bottom: 30px;
    }
}
/* --- セクション共通スタイル --- */
.web-production-page .section-title {
    text-align: center;
    margin-bottom: 60px;
}
.web-production-page .section-title .en-title {
    display: block;
    font-family: var(--font-en);
    font-size: 16px;
    font-weight: 600;
    color: var(--accent-color);
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}
.web-production-page .section-title .ja-title {
    display: block;
    font-size: 34px;
    font-weight: 700;
    color: var(--main-color);
    letter-spacing: 0.05em;
}
.web-production-page .section-lead {
    text-align: center;
    line-height: 2;
    font-size: 16px;
    max-width: 900px;
    margin: 0 auto 60px auto;
}

        .main-visual {
            position: relative;
    height: 600px;
    margin-top: 90px;
            width: 100%;  /* 画面の幅に合わせる */
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden; /* はみ出しを隠す */
            color: white;
            text-align: center;
        }

        /* 背景動画のコンテナ */
        .video-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 600px;
            z-index: 1;
        }

        /* 背景動画のスタイル */
        .video-container video {
            width: 100%;
            height: 600px;
            object-fit: cover; /* アスペクト比を保ちつつ全体をカバー */
        }

        /* 黒フィルター（オーバーレイ） */
        .video-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 600px;
            background-color: rgba(0, 0, 0, 0.4); /* 40%の黒。この数値を調整して濃さを変更 */
            z-index: 2;
        }

        /* テキストコンテンツのコンテナ */
        .text-container {
            position: relative;
            z-index: 3;
            padding: 20px;
font-family: 'Poppins', 'Noto Sans JP', sans-serif;
        }

        /* 日本語キャッチコピーのスタイル */
        .main-copy {
            font-size: 2.8rem; /* PCでのフォントサイズ */
            font-weight: bold;
            line-height: 1.5;
            margin: 0;
            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); /* 文字の影で読みやすく */
    font-family: 'Poppins', 'Noto Sans JP', sans-serif;
        }

        /* 英語サブコピーのスタイル */
        .sub-copy {
            font-size: 1.1rem; /* PCでのフォントサイズ */
            font-weight: 300;
            letter-spacing: 1px;
            margin-top: 2rem;
            text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
        }

        /* アニメーションの定義 */
        @keyframes fadeIn-slideUp {
            0% {
                opacity: 0;
                transform: translateY(30px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* アニメーションを適用する要素の初期状態 */
        .main-copy span, .sub-copy span {
            display: block; /* <span>タグをブロック要素にして改行 */
            opacity: 0; /* 最初は非表示 */
            animation: fadeIn-slideUp 1s ease-out forwards;
        }

        /* アニメーションの遅延設定で順番に表示 */
        .main-copy .line-1 { animation-delay: 0.5s; }
        .main-copy .line-2 { animation-delay: 0.8s; }
        .sub-copy  .line-3 { animation-delay: 1.3s; }
        .sub-copy  .line-4 { animation-delay: 1.5s; }


        /* スマートフォン向けのレスポンシブ設定 */
        @media (max-width: 768px) {
            .main-copy {
                font-size: 1.5rem; /* スマホでのフォントサイズ */
            }
            .sub-copy {
                font-size: 0.8rem;
                margin-top: 1.5rem;
            }
        .main-visual {
            position: relative;
    height: 400px;
    margin-top: 85px;
            width: 100%;  /* 画面の幅に合わせる */
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden; /* はみ出しを隠す */
            color: white;
            text-align: center;
        }

        /* 背景動画のコンテナ */
        .video-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 400px;
            z-index: 1;
        }

        /* 背景動画のスタイル */
        .video-container video {
            width: 100%;
            height: 400px;
            object-fit: cover; /* アスペクト比を保ちつつ全体をカバー */
        }

        /* 黒フィルター（オーバーレイ） */
        .video-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 400px;
            background-color: rgba(0, 0, 0, 0.4); /* 40%の黒。この数値を調整して濃さを変更 */
            z-index: 2;
        }
        }


.price-label span{
    display: inline-block;
    padding: 15px 30px;
    font-weight: bold;
    font-size: 1em;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    padding: 5px 30px;
    font-weight: bold;
    font-size: 1em;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: #ff6f61;
    color: #fff;
    border: 2px solid #ff6f61;
}

/* --- 1. イントロダクション --- */
.web-production-page .page-lead {
    padding: 100px 20px;
    text-align: center;
}
.web-production-page .page-lead h1 {
    font-size: 42px;
    font-weight: 700;
    color: var(--main-color);
    margin-bottom: 30px;
    line-height: 1.5;
    letter-spacing: 0.05em;
}
.web-production-page .page-lead p {
    font-size: 17px;
    line-height: 2.2;
}
.web-production-page .page-lead strong {
    font-weight: 700;
    color: var(--main-color);
}

/* --- 2. 選ばれる3つの理由 --- */
.web-production-page .section-reasons {
    padding: 100px 0;
    background-color: var(--bg-light-gray);
    margin: 0 -2000px; /* 画面幅いっぱいに広げる */
    padding-left: 2000px;
    padding-right: 2000px;
}
.web-production-page .reasons-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1120px;
    margin: 0 auto;
}
.web-production-page .reason-item {
    padding: 40px;
    text-align: center;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #e9ecef;
    transition: transform 0.3s, box-shadow 0.3s;
}
.web-production-page .reason-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(26, 43, 72, 0.1);
}
.web-production-page .reason-icon {
    font-size: 36px;
    color: var(--accent-color);
    margin-bottom: 25px;
    line-height: 1;
}
.web-production-page .reason-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--main-color);
    line-height: 1.6;
    margin-bottom: 20px;
}
.web-production-page .reason-text {
    font-size: 15px;
    line-height: 1.9;
    text-align: left;
}

/* --- 3. 制作実績 --- */
.web-production-page .section-works {
    padding: 100px 0;
}
.web-production-page .works-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.web-production-page .work-item img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid #eee;
}

/* --- 4. 料金 --- */
.web-production-page .section-price {
    padding: 100px 0;
    background-color: var(--bg-light-gray);
    margin: 0 -2000px;
    padding-left: 2000px;
    padding-right: 2000px;
}
.web-production-page .price-main {
    text-align: center;
    margin-bottom: 30px;
}
.web-production-page .price-label {
    font-size: 16px;
}
.web-production-page .price-value {
    font-family: var(--font-en);
    font-size: 64px;
    font-weight: 700;
    color: var(--main-color);
    letter-spacing: -2px;
}
.web-production-page .price-value .unit {
    font-family: var(--font-base);
    font-size: 20px;
    font-weight: 700;
    color: #495057;
    margin-left: 10px;
}
.web-production-page .price-table-wrapper {
    overflow-x: auto;
    max-width: 900px;
    margin: 0 auto;
}
.web-production-page .price-table {
    width: 100%;
    border: 1px solid #dee2e6;
    border-collapse: collapse;
    background-color: #fff;
    min-width: 800px;
}
.web-production-page .price-table th, 
.web-production-page .price-table td {
    border: 1px solid #dee2e6;
    padding: 20px;
    text-align: left;
    vertical-align: middle;
}
.web-production-page .price-table thead th {
    background-color: #1a2b48;
    font-weight: 700;
    text-align: center;
    color: #fff;

}
.web-production-page .price-table tbody th {
    font-weight: 700;
    width: 30%;
}
.web-production-page .price-table td:nth-of-type(1) {
    width: 25%;
    font-weight: 700;
}
.web-production-page .price-note {
    text-align: center;
    font-size: 14px;
    margin-top: 30px;
    color: #6c757d;
}

.hp_p{
	color: #ff6f61;
}


/* --- レスポンシブ対応 --- */
@media (max-width: 1024px) {
    .web-production-page .reasons-container {
        grid-template-columns: 1fr;
        gap: 30px;
        max-width: 650px;
    }
}
@media (max-width: 768px) {
    .web-production-page .page-container {
        padding: 0 20px;
    }
    .web-production-page .section-title .ja-title {
        font-size: 26px;
    }
    .web-production-page .page-lead h1 {
        font-size: 26px;
    }
    .web-production-page .works-gallery {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    .web-production-page .price-value {
        font-size: 48px;
    }
    .web-production-page .price-value .unit {
        font-size: 16px;
    }
.web-production-page .price-table td {
    border: 1px solid #dee2e6;
    padding: 20px;
    text-align: left;
    vertical-align: middle;
    font-size: 13px;
}
.price-label span {
    padding: 5px 20px;
}
.web-production-page .work-item img {
    width: 200px;
    height: auto;
    border-radius: 4px;
    border: 1px solid #eee;
    display: block;
    margin: 0 auto;
}
.web-production-page .section-works {
    padding: 50px;
}
.web-production-page .section-works {
    padding: 50px 20px;
}
.web-production-page .section-lead {
    text-align: left;
    line-height: 2;
    letter-spacing: 2px;
    font-size: 16px;
    max-width: unset;
    margin: 0 auto 60px auto;
}
.web-production-page .section-title {
    text-align: center;
    margin-bottom: 30px;
}
.web-production-page .page-lead {
    padding: 50px 20px;
    text-align: center;
}
.web-production-page .page-lead p {
    font-size: 17px;
    line-height: 2.2;
    text-align: left;
}
.web-production-page .section-reasons {
    padding: 50px 0;
    padding-left: 2000px;
    padding-right: 2000px;
}
.web-production-page .section-price {
    padding: 50px 0;
    padding-left: 2000px;
    padding-right: 2000px;
}
.web-production-page .price-table {
    width: 100%;
    border: 1px solid #dee2e6;
    border-collapse: collapse;
    background-color: #fff;
    min-width: unset;
}
.p_caution{
font-size: 12px !important;
}
}
.archive-lead {
  max-width: 1200px;
  margin: 0 auto 40px auto;
  padding: 20px 30px;
  font-size: 1rem;
  line-height: 2.2;
  background-color: #f9f9f9;
  border-left: 5px solid #2b5ca9;
  border-radius: 8px;
  color: #333;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.archive-lead p{
	margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
  .archive-lead {
        padding: 15px 20px;
        font-size: 14px;
        margin: 0 0 32px 0;
        border-left-width: 4px;
        line-height: 1.7;
  }
}

.column-category-dropdown {
  max-width: 1200px;
  margin: 0 auto 2em auto;
  padding: 1em;
  background-color: #f5f5f5;
  border-radius: 8px;
  text-align: center;
}

.column-category-dropdown label {
  font-weight: bold;
  margin-right: 0.5em;
}

.column-category-dropdown select {
  padding: 0.5em;
  font-size: 16px;
  width: 280px;
  max-width: 90%;
}

div#ez-toc-container nav ul ul li {
    font-size: 90%;
    box-shadow: unset !important;
    border: unset !important;
    line-height: 2 !important;
}


.faq-article section ul{
   margin: 30px 0 !important;
}
.faq-article section li {
    background-color: #fff;
    border-radius: 12px;
    list-style-type: none !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    padding: 15px 20px;
    border: 1px solid #ddd;
    margin-bottom: 20px !important;
}


.lowp_center{
	text-align: center;
}

.side_btn01 {
    position: fixed;
    top: 210px;
    z-index: 10001;
    right: 0;
}

.side_btn02 {
    position: fixed;
    top: 410px;
    z-index: 10001;
    right: 0;
}

.p-authorBox {
    background-color: #f2f2f2 !important;
}

.service-page-container {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    color: #333;
    line-height: 1.8;
}

/* 導入セクション */
.service-intro {
    background: linear-gradient(135deg, #003366, #005A9C);
    color: #fff;
    padding: 80px 30px;
    text-align: center;
    border-radius: 12px;
}

.service-intro h1 {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.service-intro p {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto;
    opacity: 0.9;
}

.web-production-page .section-flow {
    padding: 100px 0;
}
.web-production-page .flow-list {
    max-width: 800px;
    margin: 0 auto;
    border-left: 2px solid #e9ecef; /* 左側にタイムラインのような縦線を追加 */
}
.web-production-page .flow-item {
    display: flex;
    align-items: flex-start; /* 上揃え */
    position: relative;
    padding-left: 80px; /* 左の余白 */
    margin-bottom: 50px;
}
.web-production-page .flow-item:last-child {
    margin-bottom: 0;
}
.web-production-page .flow-step {
    position: absolute;
    left: -26px; /* 縦線に重なるように配置 */
    top: 80px;
    display: flex;
    align-items: center;
    transform: rotate(-90deg); /* 全体を-90度回転 */
    transform-origin: top left;
    color: #adb5bd;
    font-family: var(--font-en);
    font-weight: 600;
}
.web-production-page .flow-step .step-en {
    font-size: 14px;
    margin-right: 5px;
}
.web-production-page .flow-step .step-num {
    font-size: 24px;
}
.web-production-page .flow-content h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--main-color);
    margin: 0 0 15px 0;
}

.web-production-page .flow-content p {
    font-size: 15px;
    line-height: 1.8;
    margin: 0;
}

.price-plan-section,
.flow-section {
    background-color: #f9f9f9; /* 背景色を少し変える */
    padding: 40px 20px;
    text-align: center;
}
.price-plan-section .subt,
.flow-section .subt {
    font-size: 28px;
    margin-bottom: 20px;
    color: #333;
    font-weight: bold;
    background: unset !important;
    position:relative;
}

.price-plan-section .subt::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background-color: #000;
    margin: 8px auto 0;
}

.flow-section .subt::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background-color: #000;
    margin: 8px auto 0;
}



.section-description {
    max-width: 800px;
    margin: 0 auto 40px;
    line-height: 1.8;
    color: #555;
}

/* 料金テーブル */
.price-table-container {
    max-width: 1000px;
    margin: 0 auto;
    overflow-x: auto; /* スマホ表示で横スクロール可能に */
}
.price-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-radius: 8px;
    overflow: hidden;
}
.price-table th,
.price-table td {
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid #eee;
}
.price-table th {
    background-color: #005A9C;
    color: #fff;
    font-weight: bold;
}
.price-table td {
    color: #333;
    vertical-align: middle;
}
.price-table tbody tr:last-child td {
    border-bottom: none;
}
.price-table tbody tr:hover {
    background-color: #f5faff;
}
.price-table .price-tag.free {
    background-color: #ff6f61;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    display: inline-block;
}
.price-table td:nth-child(2) {
    font-weight: bold;
    color: #005A9C;
    white-space: nowrap; /* 料金が改行されないように */
}

.diagnosis-info-section {
    padding: 60px 20px;
}

.diagnosis-info-section h2{
    font-size: 28px;
    margin-bottom: 20px;
    color: #333;
    font-weight: bold;
    background: unset !important;
    position: relative;
    text-align: center;
}

.diagnosis-info-section h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background-color: #000;
    margin: 8px auto 0;
}

.diagnosis-info-box {
    margin: 30px auto 0 auto;
    background-color: #fff5f5; /* 薄いピンクの背景 */
    border: 1px solid #fdd; /* 赤系の薄い枠線 */
    border-radius: 20px;
    padding: 40px;
}

.diagnosis-info-wrapper {
    display: flex;
    align-items: center;
    gap: 40px;
}

/* 左カラム */
.diagnosis-info-left {
    flex: 1;
}

.reassurance-message-container {
    text-align: center;
    padding: 40px 20px;
    background-color: #f9f9f9; /* ページ全体の背景色に合わせて調整してください */
}

.reassurance-text {
    font-size: 18px;
    line-height: 2;
    color: #333;
    font-weight: 500;
    margin: 0;
}

.highlight-marker {
    /* 黄色系のマーカー */
    background: linear-gradient(transparent 60%, #fff799 60%);
    padding: 0 2px;
    font-weight: bold;
    color: #222;
}

.sp-only {
    display: none;
}


/* レスポンシブ対応 */
@media (max-width: 768px) {
    .reassurance-text {
        font-size: 16px;
        line-height: 1.8;
    }
    /* スマホ表示のときだけ改行を有効にする */
    .sp-only {
        display: block;
    }
}

.info-fee {
    display: flex;
    align-items: center;
    gap: 15px;
}

.info-fee-label {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

.info-fee-tag {
    background-color: #d9534f;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    padding: 8px 20px;
    border-radius: 8px;
}

.info-separator {
    border: 0;
    border-top: 1px dashed #ddd;
    margin: 20px 0;
}

.info-description p {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin: 0 0 1em 0;
}
.info-description p:last-child {
    margin-bottom: 0;
}
.info-description strong {
    font-weight: 800; /* 太字をより強調 */
}


/* 右カラム */
.diagnosis-info-right {
    flex-basis: 300px; /* 右カラムの幅を固定 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.info-pdf-button {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #d9534f;
    color: #fff;
    padding: 20px 30px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: bold;
    text-align: left;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.info-pdf-button:hover {
    background-color: #c9302c;
    transform: translateY(-2px);
}

.info-pdf-button .fa-file-pdf {
    font-size: 32px;
}
.info-pdf-button div {
    font-size: 18px;
    line-height: 1.3;
}
.info-pdf-button span {
    font-size: 14px;
    font-weight: normal;
}

.info-pdf-note {
    margin-top: 15px;
    font-size: 14px;
    color: #666;
    text-align: center;
    line-height: 1.6;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .diagnosis-info-box {
        padding: 25px;
    }
    .diagnosis-info-wrapper {
        flex-direction: column; /* 縦並びにする */
        gap: 30px;
    }
    .diagnosis-info-right {
        flex-basis: auto; /* 幅を自動に */
        width: 100%;
    }
    .info-pdf-button {
        width: 100%;
        justify-content: center; /* ボタン内の要素を中央寄せ */
        text-align: center;
    }
}
/* 対策の流れ */
.flow-steps {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 800px;
    position: relative;
}
/* ステップ間の縦線 */
.flow-steps::before {
    content: '';
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 25px; /* アイコンの真ん中に来るように調整 */
    width: 2px;
    background-color: #007BFF;
    opacity: 0.2;
}

.flow-step {
    display: flex;
    align-items: flex-start;
    position: relative;
    padding-left: 90px; /* 番号分のスペース */
    margin-bottom: 40px;
}
.flow-step:last-child {
    margin-bottom: 0;
}
.flow-step-number {
    position: absolute;
    left: 0;
    top: 0;
    width: 70px;
    height: 70px;
    background-color: #005A9C;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0,123,255,0.3);
}
.flow-step-content {
    text-align: left;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    width: 100%;
}
.flow-step-content h3 {
    margin: 0 0 10px 0;
    font-size: 20px;
    color: #005A9C;
}
.flow-step-content p {
    margin: 0;
    line-height: 1.7;
    color: #555;
}

@media (max-width: 768px) {
    .price-plan-section, .flow-section {
        padding: 40px 15px;
    }
    .price-plan-section .subt, .flow-section .subt {
        font-size: 24px;
    }

    /* --- ここからがテーブルの修正箇所 --- */
    .price-table-container {
        /* ① 横スクロールをなくします */
        overflow-x: hidden;
    }
    .price-table {
        /* テーブルの幅を固定せず、自動調整させます */
        table-layout: fixed;
        width: 100%;
    }
    .price-table th, 
    .price-table td {
        padding: 12px 8px; /* パディングを少し詰めます */
        font-size: 14px;
        word-break: break-word; /* 長い単語でも改行させます */
    }

    /* ② 料金列の改行を許可します */
    .price-table td:nth-child(2) {
        white-space: normal; /* nowrapを解除して改行を許可 */
        font-size: 15px; /* 料金の文字サイズを少し調整 */
    }

    /* ③ 各列の幅をパーセントで大まかに指定してバランスを取ります */
    .price-table th:nth-child(1),
    .price-table td:nth-child(1) {
        width: 30%; /* サービス内容 */
    }
    .price-table th:nth-child(2),
    .price-table td:nth-child(2) {
        width: 30%; /* 料金目安 */
    }
    .price-table th:nth-child(3),
    .price-table td:nth-child(3) {
        width: 40%; /* 備考 */
        line-height: 1.6;
        font-size: 14px;
    }
    /* --- テーブルの修正ここまで --- */

    .flow-steps::before {
        left: 20px;
    }
    .flow-step {
        padding-left: 55px;
    }
    .flow-step-number {
        width: 40px;
        height: 40px;
        font-size: 11px;
        line-height: 1;
    }
    .flow-step-content h3 {
        font-size: 18px;
    }
    .flow-step-content p {
        font-size: 14px;
    }
}

/* --- 6. よくあるご質問 (FAQ) --- */
.web-production-page .section-faq {
    padding: 100px 0;
    background-color: var(--bg-light-gray);
    margin: 0 -2000px;
    padding-left: 2000px;
    padding-right: 2000px;
}
.web-production-page .faq-list {
    max-width: 850px;
    margin: 0 auto;
}
.web-production-page .faq-list dt {
    position: relative;
    padding: 20px 60px 20px 60px; /* 矢印のスペースを確保 */
    font-weight: 700;
    color: var(--main-color);
    cursor: pointer;
    background-color: #fff;
    border: 1px solid var(--wp-border-color);
    transition: background-color 0.3s;
}
.web-production-page .faq-list dt:hover {
    background-color: #f8f9fa;
}
.web-production-page .faq-list dt:not(:first-of-type) {
    border-top: none;
}
.web-production-page .faq-list dt::before {
    content: 'Q';
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-en);
    font-size: 20px;
    font-weight: 700;
    color: var(--accent-color);
}
/* ★★★ 矢印の向きを修正 ★★★ */
.web-production-page .faq-list dt::after {
    content: '\f078'; /* Font Awesome の「下向き」矢印 */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease-in-out;
}
/* ★★★ is-openクラスがついたら矢印を「上向き」に回転 ★★★ */
.web-production-page .faq-list dt.is-open::after {
    transform: translateY(-50%) rotate(180deg);
}
.web-production-page .faq-list dd {
    position: relative;
    padding: 30px 20px 30px 60px;
    margin: 0;
    border: 1px solid var(--wp-border-color);
    border-top: none;
    background: #fff;
    line-height: 1.9;
    display: none; /* ★★★ 初期状態は非表示にする ★★★ */
}
.web-production-page .faq-list dd::before {
    content: 'A';
    position: absolute;
    left: 20px;
    top: 30px;
    font-family: var(--font-en);
    font-size: 20px;
    font-weight: 700;
    color: #6c757d;
}

/* --- レスポンシブ調整 --- */
@media (max-width: 768px) {
    .web-production-page .flow-item {
        padding: 20px;
        padding-left: 65px; /* スマホ用に調整 */
    }
    .web-production-page .flow-item::before {
        left: 15px;
    }
    .web-production-page .faq-list dt,
    .web-production-page .faq-list dd {
        padding-left: 50px;
    }
    .web-production-page .faq-list dt::before,
    .web-production-page .faq-list dd::before {
        left: 15px;
    }
.web-production-page .section-flow {
    padding: 50px 0;
}
}

.web-production-page .cta-section {
    padding: 40px 20px;
    text-align: center;
    margin-top: 50px;
}
.web-production-page .cta-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
}
.web-production-page .cta-lead {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 40px;
    color: #555;
}
.web-production-page .cta-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap; /* スマホで折り返す */
}
.web-production-page .cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 35px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    min-width: 280px;
}
.web-production-page .cta-button i {
    margin-right: 10px;
    font-size: 1.2em;
}

/* LINEボタン */
.web-production-page .cta-button.line {
    background-color: #06C755;
    color: #fff;
}
.web-production-page .cta-button.line:hover {
    background-color: #05b04a;
    transform: translateY(-3px);
}

/* メールボタン */
.web-production-page .cta-button.mail {
    background-color: #1a2b48; /* メインカラー */
    color: #fff;
}
.web-production-page .cta-button.mail:hover {
    background-color: #29426b;
    transform: translateY(-3px);
}

/* スマホでの調整 */
@media (max-width: 768px) {
.web-production-page .cta-buttons {
        flex-direction: column; /* 縦並びにする */
    }
}
/* 課題提起セクション */
.service-problems {
    padding: 60px 20px;
    text-align: center;
}

.service-problems h2 {
    font-size: 2rem;
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

.service-problems h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: #005A9C;
}

.problem-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    list-style: none;
    padding: 0;
}

.problem-list li {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    padding: 15px 25px;
    border-radius: 50px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.problem-list .fa-check {
    color: #007BFF;
}

/* サービス一覧セクション */
.service-menu {
    background-color: #f8f9fa;
    padding: 40px 20px;
}

.service-menu h2 {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 50px;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.service-card {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
}
.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0, 90, 156, 0.1);
}

.service-card .icon {
    font-size: 3.5rem;
    color: #007BFF;
    margin-bottom: 20px;
}

.service-card h3 {
    font-size: 1.4rem;
    color: #005A9C;
    margin-bottom: 15px;
}

.service-card p {
    font-size: 0.95rem;
    text-align: left;
}

/* スマートフォン向けスタイル */
@media (max-width: 768px) {
    .service-intro h1 {
        font-size: 2rem;
    }
    .service-intro p, .service-problems li {
        font-size: 1rem;
    }
    .service-problems h2, .service-menu h2 {
        font-size: 1.6rem;
    }
    .problem-list {
        flex-direction: column;
        align-items: center;
    }
}
pre {
    background-color: #f2f2f2 !important;
    margin-bottom: 30px !important;
}

.p-entry__content table{
  margin-bottom:40px;
}


.p-entry__content td {
    background: #fff !important;
}

/* 固定ヘッダー */
.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  background: #fff;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ロゴ */
.site-logo a {
  font-size: 1.4rem;
  font-weight: bold;
  color: #333;
  text-decoration: none;
}

.site-logo img:hover{
opacity: 0.7;
}

.logo-img {
  height: 60px;
  width: auto;
  display: block;
}
.wpcf7-spinner {
  display: none !important;
}

.global-nav{
    margin: 0 150px 0 0;
}

.partner-style-container {
    max-width: 800px; /* コンテナの最大幅 */
    margin: 0 auto;
}

.partner-style-list {
    list-style: none;
    padding: 0;
    counter-reset: partnership-counter; /* ★カウンターを初期化 */
}

.partner-style-list li {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 40px;
    margin-bottom: 30px;
    position: relative; /* 疑似要素の基準位置 */
    overflow: hidden;   /* はみ出した要素を隠す */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* マウスホバー時のエフェクト */
.partner-style-list li:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
}

/* ★「01, 02, 03」を疑似要素で生成 */
.partner-style-list li::before {
    counter-increment: partnership-counter; /* ★カウンターを1増やす */
    content: "0" counter(partnership-counter); /* ★カウンターの値を表示 */

    position: absolute;
    top: 15px;
    right: 30px;
    font-size: 5rem;
    font-weight: 700;
    color: #f0f4f8; /* 背景に溶け込むような薄い色 */
    z-index: 1; /* テキストの背面に配置 */
    line-height: 1;
}

/* カード内の見出し */
.partner-style-list li strong {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: #005A9C; /* テーマカラー */
    margin-bottom: 1rem;
    position: relative;
    z-index: 2; /* 番号の上に表示 */
}

/* カード内の説明文 */
.partner-style-list li p {
    font-size: 1rem;
    line-height: 1.9;
    color: #555;
    margin: 0;
    position: relative;
    z-index: 2; /* 番号の上に表示 */
}


.seo-intro-wrap {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  margin: 40px 0;
  flex-wrap: wrap;
}

.seo-intro-img {
  flex: 0 0 35%;
  max-width: 35%;
}

.seo-intro-img img {
  width: 100%;
  height: auto;
  display: block;
}

.seo-intro-text {
  flex: 1;
  max-width: 60%;
  font-size: 16px;
  line-height: 2.4;
  color: #333;
}

.seo-intro-text .bd {
  font-weight: bold;
  color: #000;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .seo-intro-wrap {
    flex-direction: column;
  }

  .seo-intro-img,
  .seo-intro-text {
    max-width: 100%;
    flex: 100%;
  }
}

.aio-era-section {
    margin-bottom: 60px;
}
.aio-era-content {
    margin: 40px auto;
    text-align: center;
    line-height: 2.4;
}
.aio-era-content p {
    margin-bottom: 1.5em;
}

/* メリットセクションのアイコン変更（例） */
.merit-icon .fa-brain { color: #9b59b6; } /* AIの知性を紫で */
.merit-icon .fa-users-gear { color: #3498db; } /* チームを青で */
.merit-icon .fa-arrow-trend-up { color: #2ecc71; } /* 成長を緑で */

/* アイコンの基本色を少し落ち着かせる */
.merit-icon {
    color: #3498db; /* デフォルトカラー */
}

.partner-merit-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 60px;
    padding: 0 20px;
}

.merit-item {
    border: 1px solid #e0e0e0;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.merit-icon {
    font-size: 2.5rem;
    color: #007bff; /* テーマカラーに合わせて変更してください */
    margin-bottom: 20px;
}

.merit-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.merit-desc {
    font-size: 0.95rem;
    line-height: 1.8;
    text-align: left;
}

/* 提携形態のリスト */
.partner-style-section {
    max-width: 800px;
    margin: 0 auto 60px;
    padding: 0 20px;
}

.partner-desc-re {
    list-style: none;
    padding: 0;
}

.partner-desc-re li {
    background-color: #f9f9f9;
    border-left: 5px solid #007bff; /* テーマカラーに合わせて変更 */
    padding: 20px;
    margin-bottom: 15px;
}

.partner-desc-re li strong {
    font-size: 1.1rem;
    display: block;
    margin-bottom: 8px;
}

        .section-header {
            margin-bottom: 100px;
            text-align: center;
        }



        .section-header h1 {
            font-size: 2.5rem;
            font-weight: 300;
            letter-spacing: 0.2em;
            color: #2d3748;
            margin-bottom: 10px;
        }

        .section-header h2 {
            font-size: 1.8rem;
            font-weight: 700;
            color: #1a202c;
            margin-bottom: 30px;
        }

        .section-lead {
            font-size: 1.1rem;
            color: #718096;
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.8;
        }

        .strengths-wrapper {
            display: flex;
            flex-direction: column;
            gap: 60px;
        }

        .strength-item {
            display: grid;
            grid-template-columns: 200px 1fr;
            gap: 60px;
            padding: 50px 0;
            border-bottom: 1px solid #e2e8f0;
            position: relative;
        }

        .strength-item:last-child {
            border-bottom: none;
        }

        .strength-header {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .strength-number {
            font-size: 4rem;
            font-weight: 900;
            color: #e2e8f0;
            margin-bottom: 25px;
            font-family: 'Arial', sans-serif;
        }

        .strength-category {
            font-size: 1.1rem;
            font-weight: 700;
            letter-spacing: 0.2em;
            color: #ffffff;
            padding: 12px 24px;
            background: linear-gradient(135deg, #3182ce, #2c5aa0);
            display: inline-block;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(49, 130, 206, 0.3);
            position: relative;
            overflow: hidden;
        }

        .strength-category::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s;
        }

        .strength-category:hover::before {
            left: 100%;
        }

        .strength-content h3 {
            font-size: 1.6rem;
            font-weight: 700;
            color: #1a202c;
            margin-bottom: 30px;
            line-height: 1.4;
        }

        .strength-description p {
            color: #4a5568;
            font-size: 1rem;
            line-height: 1.9;
            margin-bottom: 20px;
        }

        .strength-description p:last-child {
            margin-bottom: 0;
        }

        /* ヒーロー画像 */
        .hero-image-section {
            margin-bottom: 80px;
            text-align: center;
        }

        .hero-image {
            width: 100%;
            max-width: 800px;
            height: 300px;
            object-fit: cover;
            border-radius: 12px;
            box-shadow: 0 12px 24px rgba(0,0,0,0.15);
        }

        @media (max-width: 768px) {

            .section-header {
                margin-bottom: 80px;
            }

            .section-number {
                font-size: 6rem;
                top: -30px;
            }
.strengths-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
        line-height: 1;
}
            .section-header h1 {
                font-size: 2rem;
            }

            .section-header h2 {
                font-size: 1.5rem;
            }

            .strength-item {
                grid-template-columns: 1fr;
                gap: 30px;
                padding: 40px 0;
            }

            .strength-item::before {
                display: none;
            }

    .strength-number {
        font-size: 5rem;
        margin-bottom: 15px;
    }

            .strength-content h3 {
                font-size: 1.3rem;
                margin-bottom: 20px;
            }

    .strength-category {
        font-size: 2rem;
        padding: 6px 12px;
    }
        }

/* グローバルナビ全体 */
.global-nav ul {
  list-style: none;
  display: flex;
  gap: 40px;
  margin: 0;
  padding: 0;
}

.global-nav li {
  position: relative;
}

/* 通常リンク */
.global-nav a {
  display: block;
  padding: 10px 0;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  transition: color 0.3s ease;
}

.global-nav a:hover {
  color: #007acc;
}

/* ▼ サブメニュー：初期非表示・配置設定 */
.global-nav .menu__second-level {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  background: #fff;
  border: 1px solid #ccc;
  min-width: 200px;
  padding: 0;
  margin: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* サブメニュー内のリスト */
.global-nav .menu__second-level li {
  width: 100%;
}

.global-nav .menu__second-level li a {
  display: block;
  padding: 10px 16px;
  color: #333;
  white-space: nowrap;
  font-weight: normal;
}

.global-nav .menu__second-level li a:hover {
  background: #f0f8ff;
  color: #007acc;
}

/* サブメニューを hover 時に表示 */
.global-nav li.menu__single:hover > .menu__second-level {
  display: block;
}

/* hover切れ防止の透明ブリッジ（必須） */
.global-nav li.menu__single::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 14px; /* hover維持の余白ゾーン */
  background: transparent;
  pointer-events: none;
}

/* span英語ラベル */
.global-nav li span {
  color: silver;
  font-size: 11px;
  display: block;
  margin: 5px auto 0 auto;
  text-align: center;
}


/* ハンバーガーメニュー */
.hamburger-menu {
  display: none;
}

@media screen and (max-width: 1499px) {
  .global-nav {
    display: none;
  }
  .hamburger-menu {
    display: block;
  }
html.is-fixed,
  html.is-fixed body {
  height: 100%;
  overflow: hidden;
  }

.side_btn01,.side_btn02{
    display: none;
}

  .menu-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 10001;
    background-color: #000;
  }

  .menu-btn span,
  .menu-btn span:before,
  .menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #fff;
    position: absolute;
  }

  .menu-btn span:before {
    bottom: 8px;
  }

  .menu-btn span:after {
    top: 8px;
  }

  #menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);
  }

  #menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
  }

  #menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
  }

  #menu-btn-check {
    display: none;
  }

  .menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;
    z-index: 10000;
    background-color: #313131;
    transition: all 0.5s;
  }

  #menu-btn-check:checked ~ .menu-content {
    left: 0;
  }

  .menu-content ul {
    padding: 70px 30px 0 30px;
  }

  .menu-content ul li {
    border-bottom: solid 1px #ffffff;
    list-style: none;
  }

  .menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 15px;
    box-sizing: border-box;
    color: #ffffff;
    text-decoration: none;
    padding: 20px 15px 20px 0;
    position: relative;
  }

  .menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 24px;
  }

.has-submenu {
  position: relative;
}

.submenu-toggle {
  width: 100%;
  text-align: left;
  background: none !important;
  border: none;
  color: #fff;
  font-size: 15px;
  padding: 20px 0;
  position: relative;
}

.submenu-toggle::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 10px;
  font-size: 24px;
}

.submenu {
  display: none;
        background: #444;
        padding: 0 0 0 20px !important;
}

.submenu li {
  border-bottom: 1px solid #666;
}

.menu-content ul li .submenu li:last-child {
  border-bottom: unset;
}

.submenu li a {
  padding: 15px 15px;
  display: block;
  color: #fff;
  font-size: 14px;
}


}
.pagetop_block{
	display: none;
}

    .talk-box {
      display: flex;
      align-items: flex-start;
      gap: 20px;
      margin: 2em 0;
    }
    .talk-box.left { flex-direction: row; }
    .talk-box.right { flex-direction: row-reverse; }

    .talk-box .icon {
      width: 64px;
      height: 64px;
      flex-shrink: 0;
    }
    .talk-box .icon img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
    }

    .talk-box .talk-content {
      max-width: 75%;
    }

    .talk-box .name {
      font-weight: bold;
      margin-bottom: 0.3em;
      font-size: 14px;
    }

    .talk-box .bubble {
      background: #ebebeb;
      padding: 1.5em 1em;
      border-radius: 10px;
      position: relative;
      font-size: 14px;
      line-height: 1.6;
    }

    .talk-box.left .bubble::before {
      content: "";
      position: absolute;
      left: -8px;
      top: 20px;
      width: 0;
      height: 0;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-right: 8px solid #ebebeb;
    }

    .talk-box.right .bubble::before {
      content: "";
      position: absolute;
      right: -8px;
      top: 20px;
      width: 0;
      height: 0;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-left: 8px solid #ebebeb;
    }


.contact-btn-wrapper {
  text-align: center;
  margin: 3em 0;
}

.contact-btn {
  display: inline-block;
  background: linear-gradient(45deg, #f97316, #f59e0b); /* オレンジグラデーション */
  color: white;
  font-size: 1.2em;
  font-weight: bold;
  padding: 0.9em 2.2em;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.contact-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}


.top_campaign{
	text-align: center;
	margin: 40px 0 0 0;
}

.top_campaign img:hover{
	opacity: 0.7;
}

.greet-section {
  background-color: #f9f9f9;
  padding: 50px 5%;
}

.greet-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 40px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.greet-image {
  flex: 1;
  min-width: 300px;
  text-align: center;
}

.greet-image img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.greet-text {
  flex: 2;
  min-width: 300px;
}

.greet-desc {
  font-size: 1rem;
  line-height: 2;
  color: #333;
  margin-bottom: 1.5em;
}

@media screen and (max-width: 768px) {
  .greet-inner {
    flex-direction: column;
    align-items: center;
  }

  .greet-text {
    text-align: left;
  }
}

.name01{
	font-family: serif;
	margin: 30px 0 15px 0;
}
.name02{
	font-family: serif;
	font-size: 36px;
	letter-spacing: 2px;
}
.name03{
	font-family: serif;
	font-size: 16px;
}


.seo-site-banner {
    display: block;
    width: 100%;
    color: #fff;
    text-decoration: none;
    padding: 40px 20px;
    transition: background 0.3s ease;
    background-image: url(./images/aboutbg.jpg);
    background-size: cover;
    background-position: right;
}

.seo-site-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 50px;
  flex-wrap: wrap;
}

.seo-site-img {
  flex: 0 0 280px;
}

.seo-site-img img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.seo-site-img img:hover{
	opacity: 0.7;
}

.price-section {
  text-align: center;
  font-family: "Helvetica Neue", sans-serif;
  margin: 3em 0;
}

.original-price {
  font-size: 1.2em;
  color: #696969;
  text-decoration: line-through;
  margin-bottom: 0.5em;
}

.original-price span {
  font-weight: 500;
  color: #696969;
}

.tax {
  font-size: 0.75em;
  margin-left: 0.3em;
}

.limited-badge {
  margin: 0.5em 0;
}

.own_box{
margin: 0 auto 30px auto !important;
    padding: 20px;
    background: #313131;
    width: 600px;
	color: #fff;
}

.own_box a{
	color: #ded5bd !important;
}

.own_box a:hover{
	opacity: 0.7;
}

.own_t01{
    text-align: center;
    font-weight: bold;
    margin: 0 0 10px 0!important;
}
.own_t02{
    text-align: center;
    font-weight: bold;
    margin: 0 !important;
}
.price-section .badge {
    display: inline-block;
    background-color: #f04949;
    color: white;
    font-size: 1.3em;
    font-weight: bold;
    padding: 0.3em 1em;
    border-radius: 999px;
}

.price-section .discount-price {
  font-size: 1.8em;
  font-weight: bold;
  color: #f04949;
  margin: 20px 0 0.5em !important;
}

.price-section .highlight {
  font-size: 1.8em;
  color: #f04949;
}

.tax-large {
  font-size: 0.6em;
  margin-left: 0.3em;
  color: #888;
}

.note {
  font-size: 0.85em;
  color: #777;
  margin-top: 0.5em;
}


.own_catch{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

.seo-site-text {
  flex: 1;
  color: #000;
}

.seo-site-text h3 {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: #08a2c4;
}

.seo-site-sub {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.seo-site-desc {
  font-size: 0.95rem;
  line-height: 1.8;
}

.post_photo600{
	max-width: 600px;
	text-align: center;
	margin: 0 auto 30px auto;
}


.post_photo600 img{
	width: 100%;
	height: auto;
}

@media screen and (max-width: 768px) {
  .seo-site-inner {
    flex-direction: column;
    text-align: center;
  }

  .seo-site-img {
    flex: 0 0 auto;
    width: 60%;
  }

  .seo-site-text h3 {
    font-size: 1.5rem;
  }

  .seo-site-sub {
    font-size: 1rem;
  }

  .seo-site-desc {
    font-size: 0.9rem;
  }
}

.l-wrapper {
    background: #faf9f8;
}

.mv-title {
}

.mv-title span {
  display: inline-block;
  transform: translateY(20px);
  animation: letterFadeIn 0.6s ease forwards;
}

@keyframes letterFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mv-subtitle {
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}
.mv-subtitle.fade-in {
  opacity: 1;
  transform: translateY(0);
}



.cta-head {
  text-align: center;
  color: #fff;
  padding: 0 20px 40px 20px;
}

.cta-head-txt01 {
  font-size: 42px;
  font-weight: bold;
  color: #fff;
  position: relative;
  display: inline-block;
  margin-bottom: 15px;
}

.cta-head-txt01::after {
  content: '';
  display: block;
  height: 2px;
  width: 60px;
  background-color: #fff;
  margin: 8px auto 0;
}

.cta-head h2 {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}


.bd{
	font-weight: bold;
	color: #007acc;
}

#_freecheck {
  display: block;
  position: relative;
  top: -100px;
  visibility: hidden;
}


.faq-count-wrapper {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}

.faq-count-box.small-orange {
  display: inline-block;
  background: #f57c00;
  color: #fff;
  font-size: 0.95em;
  font-weight: bold;
  padding: 6px 14px;
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: relative;
}

faq-count-box.small-black .faq-number {
    background: #fff;
    color: #313131;
}

.faq-count-box .faq-number {
  background: #fff;
  color: #313131;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: bold;
  margin: 0 4px;
  display: inline-block;
  font-size: 20px;
}



.faq-count-box.small-orange::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 8px 0 8px;
    border-style: solid;
    border-color: #f57c00 transparent transparent transparent;
}


/* お支払い方法セクション全体 */
.payment-section {
  max-width: 1000px;
  margin: 50px auto;
  padding: 0 20px;
}

/* 各支払いブロック */
.payment-block {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 40px;
  padding: 20px;
  background: #f9fcfe;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

/* アイコン部分 */
.payment-icon {
  flex: 0 0 60px;
}
.payment-icon img {
  width: 60px;
  height: auto;
  display: block;
}

/* テキスト側 */
.payment-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #007acc;
  margin-bottom: 10px;
}

.payment-desc {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #333;
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
  .payment-block {
    flex-direction: column;
    align-items: flex-start;
  }

  .payment-icon {
    margin-bottom: 10px;
  }
}



/* フッター */
.site-footer {
  background-color: #f4f4f4;
  padding: 2rem 1rem;
  font-size: 0.9rem;
  color: #555;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.footer-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.footer-logo img {
  width: 36px;
  height: auto;
  margin-right: 0.5rem;
}

.footer-sitename {
  font-weight: 600;
  font-size: 1rem;
}

.footer-right .footer-links {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-right .footer-links a {
  color: #000;
  text-decoration: none;
  font-weight: 500;
}

.footer-right .footer-links a:hover {
  text-decoration: underline;
}

.footer-copy {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.8rem;
  color: #999;
}

@media (max-width: 640px) {
  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
  }

  .footer-right .footer-links {
    flex-direction: column;
    gap: 0.5rem;
  }
}


.cta-section {
    padding: 60px 20px;
    text-align: center;
    background-color: #fff;
}
.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}
.cta-button {
    display: inline-block;
    padding: 18px 40px;
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s;
    min-width: 280px;
}
.cta-button.primary {
    background-color: #ff6f61; /* 目立つオレンジ系の色 */
    color: #fff;
    border: 2px solid #ff6f61;
}
.cta-button.primary:hover {
    background-color: #e65a4e;
}
.cta-button.secondary {
    background-color: #fff;
    color: #005A9C;
    border: 2px solid #005A9C;
}
.cta-button.secondary:hover {
    background-color: #f0f8ff;
}
.cta-note {
    font-size: 0.9rem;
    color: #666;
    margin-top: 15px;
}

/* --- ★追加：アンケート調査 詳細セクション --- */
.survey-details-section {
    padding: 80px 20px 40px 20px;
}
.survey-details-section h2 {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 50px;
}
.survey-details-container {
    display: flex;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: center;
}
.survey-details-text {
    flex: 2;
}
.survey-details-text p {
    margin-bottom: 1.5em;
}
.survey-details-text strong {
    color: #005A9C;
}
.survey-details-image {
    flex: 1;
    text-align: center;
}
.survey-details-image img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    .cta-button {
        width: 100%;
        max-width: 320px;
    }
    .survey-details-container {
flex-direction: column-reverse;
    }
}
.rich-footer {
    background-color: #313131;
    color: #f0f0f0;
    padding: 60px 0 20px 0;
    font-size: 0.9rem;
}

.footer-container {
    max-width: unset;
    margin: 0 7%;
    padding: 0 20px;
}

/* --- 上段：ナビゲーションとCTA --- */
.footer-main {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #555;
    margin-bottom: 30px;
}

.footer-nav-area {
    display: flex;
    gap: 50px;
    flex-grow: 1;
}

.footer-nav-group h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
    border-bottom: 1px solid #fff;
    padding-bottom: 10px;
}

.footer-nav-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav-group li {
    margin-bottom: 12px;
}

.footer-nav-group a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-nav-group a:hover {
    color: #fff;
    text-decoration: underline;
}

.footer-cta-area {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 280px;
}

.footer-cta-button {
    display: block;
    padding: 15px 20px;
    text-align: center;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s;
    background-color: #007BFF;
    color: #fff;
    border: 1px solid #007BFF;
}

.footer-cta-button:hover {
    background-color: #0056b3;
}

.footer-cta-button.secondary {
    background-color: transparent;
    border: 1px solid #fff;
    background-color: #fff;
    color: #313131;
}

.footer-cta-button.secondary:hover {
    background-color: #d7d3eb;
    color: #313131;
}
.footer-cta-button .fas {
    margin-right: 8px;
}

/* --- 下段：会社情報とコピーライト --- */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer-logo img {
    max-width: 180px;
    height: auto;
}

.company-address {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #f8f8f8;
}

.footer-copyright {
    font-size: 0.8rem;
    color: #f8f8f8;
}
.footer-cta-button.line {
    background-color: #00B900; /* LINEのブランドカラー */
    color: #fff;
    border: 1px solid #00B900;
}

.footer-cta-button.line:hover {
    background-color: #009d00; /* ホバー時の少し濃い緑 */
}

/* アイコンとテキストの間の余白を調整 */
.footer-cta-button .fab.fa-line {
    margin-right: 8px;
}

/* --- レスポンシブ対応 --- */
@media (max-width: 960px) {
    .footer-main {
        flex-direction: column;
    }
    .footer-nav-area {
        gap: 30px;
        justify-content: space-between;
    }
    .footer-cta-area {
        margin-top: 30px;
        flex-direction: row;
    }
    .footer-cta-button {
        flex-grow: 1;
    }
}

@media (max-width: 768px) {
    .footer-nav-area {
        flex-direction: column;
    }
    .footer-cta-area {
        flex-direction: column;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 20px;
    }
.rich-footer {
    padding: 60px 0 80px;
    font-size: 0.9rem;
}
}

.seo-site-heading {
    font-size: 2rem;
    text-align: center;
    margin: 40px 0;
    font-weight: 700;
    color: #333;
    background: unset;
    position: relative;
}

.seo-site-heading::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background-color: #000;
    margin: 8px auto 0;
}

.site-link-wrap {
    display: flex;
    justify-content: center;
    gap: 30px; /* カード間の隙間 */
    flex-wrap: wrap;
    margin-bottom: 60px;
}

/* --- サイトカード全体のスタイル --- */
.site-card {
    display: block;
    width: 31%; /* 3列表示（合計約93% + 隙間） */
    max-width: 360px; /* PCでの最大幅 */
    text-decoration: none;
    color: #333;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative; /* 矢印アイコンの基準位置 */
}

.site-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

/* 各サイトのボーダー色 */
.site-card.llmo-site { border: 2px solid #313131; } /* 黒 */
.site-card.seo-site { border: 2px solid #007BFF; }  /* 青 */
.site-card.meo-site { border: 2px solid #ff6f61; }  /* オレンジ */

.site-card-inner {
    padding: 25px 25px 50px 25px;
    background-color: #fff;
    /* カードの高さを揃えるための設定 */
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* --- FAQカウントの吹き出し --- */
.faq-count-wrapper {
    text-align: center;
    margin-bottom: 15px;
}
.faq-count-box {
    display: inline-block;
    padding: 6px 16px;
    font-size: 0.9rem;
    color: #fff;
    border-radius: 20px;
    position: relative;
}
/* 各吹き出しの背景色 */
.faq-count-box.small-green { background-color: #313131; }
.faq-count-box.small-blue { background-color: #007BFF; }
.faq-count-box.small-orange { background-color: #ff6f61; }

.faq-count-box::after { /* 吹き出しの三角部分 */
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-style: solid;
    border-width: 8px 8px 0 8px;
}
/* 各吹き出しの三角の色 */
.faq-count-box.small-green::after { border-color: #313131 transparent transparent transparent; }
.faq-count-box.small-blue::after { border-color: #007BFF transparent transparent transparent; }
.faq-count-box.small-orange::after { border-color: #ff6f61 transparent transparent transparent; }

.faq-number {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 5px;
}

/* --- カード内の画像とテキスト --- */
.site-card-img {
    text-align: center;
    padding: 15px 0;
}
.site-card-img img {
    max-width: 100px;
    height: auto;
}
.site-card-text {
    flex-grow: 1; /* テキスト部分が残りの高さを埋めるようにする */
    display: flex;
    flex-direction: column;
}
.site-card-text h3 {
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px;
}
/* マーカー（マーカーの色は既存のスタイルを活かす想定） */
.site-card-text h3 .marker { 
    padding: 0 2px;
}

.site-card-text .site-sub {
    font-size: 1rem; /* 少し調整 */
    font-weight: 600;
    text-align: center;
    color: #005A9C;
    margin-bottom: 15px;
}
.site-card-text .site-desc {
    font-size: 0.9rem;
    line-height: 1.7;
    flex-grow: 1; /* 説明文が残りのスペースを埋める */
}

/* --- 矢印アイコン --- */
.site-card::after {
    font-family: "Font Awesome 5 Free";
    content: "\f061"; /* Font Awesomeの右矢印アイコン */
    font-weight: 900;
    position: absolute;
    bottom: 20px;
    right: 25px;
    font-size: 1.5rem;
    color: #ccc;
    transition: color 0.3s, right 0.3s;
}
.site-card:hover::after {
    color: #333;
    right: 20px; /* ホバー時に少し動かす */
}

/* --- レスポンシブ対応 --- */

/* タブレット向けスタイル（2列表示） */
@media (max-width: 1100px) {
    .site-card {
        width: 48%; /* 2列表示 */
        max-width: 400px;
    }
}

/* スマートフォン向けスタイル（1列表示） */
@media (max-width: 768px) {
    .site-link-wrap {
        flex-direction: column;
        align-items: center;
    }
    .site-card {
        width: 100%; /* 1列表示 */
        max-width: 400px;
    }
    .site-card-text h3 {
        font-size: 1.5rem;
    }
}

.problem-section-container {
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 80px 20px;
}
.problem-image-area {
    flex: 1;
    text-align: center;
}
.problem-image-area img {
    max-width: 100%;
    height: auto;
}
.problem-text-area {
    flex: 1.2; /* テキストエリアを少し広めに */
}
.problem-text-area h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 30px;
    line-height: 1.5;
}
.problem-text-area ul {
    list-style: none;
    padding: 0;
}
.problem-text-area li {
    font-size: 1.1rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
.problem-text-area .fa-check-circle {
    color: #007BFF;
    margin-right: 12px;
    font-size: 1.3em;
}

@media (max-width: 768px) {
    .problem-section-container {
        flex-direction: column;
        gap: 30px;
    }
    .problem-text-area h2 {
        font-size: 1.8rem;
        text-align: center;
    }
}

.global-nav li span{
	color: silver;
	font-size: 11px;
	display: block;
    margin: 5px auto 0 auto;
    text-align: center;
}
.grecaptcha-badge { visibility: hidden; }

#comments{
display: none;
}


.messageBtn {
  text-align: center; /* ← ボタンを中央寄せ */
  margin-top: 2rem;
}

.messageBtn input[type="submit"] {
  padding: 0.6rem 1.5rem;
  background-color: #007acc !important;
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
  width: 300px;
}

.messageBtn input[type="submit"]:hover {
  background-color: #005f99 !important;
}
.back-home {
  text-align: center;
  margin-top: 2rem;
}
.back-home__btn {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  background-color: #007acc;
  color: #fff;
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.back-home__btn:hover {
  background-color: #005f99;
}

.red{
	color: #ff0000;
}

button, input, select, textarea {
    border: 1px solid var(--ark-color--border);
    border-radius: 0;
    color: #333;
    padding: .25em .5em;
    background: #fff !important;
}
button, input, select, textarea {
    border: 1px solid var(--ark-color--border);
    border-radius: 0;
    color: #333;
    padding: .25em .5em;
    width: 100%;
}
/* 会社概要テーブル */
.com_tab {
  width: 100%;
  max-width: 1200px;
  border-collapse: collapse;
  margin: 40px auto;
  font-size: 16px;
  color: #333;
  background-color: #f9f9f9;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.com_tab th,
.com_tab td {
  padding: 16px 20px !important;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #ddd;
   background: #fff;
}

.com_tab th {
  width: 30%;
  background-color: #d8f0ff;
  font-weight: 600;
  color: #444;
  font-weight: normal;
}

/* 最終行のボーダー消す（オプション） */
.com_tab tr:last-child td,
.com_tab tr:last-child th {
  border-bottom: none;
}

/* Googleマップ */
.googlemap {
  max-width: 1200px;
  margin: 40px auto;
  border: 1px solid #ccc;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  border-radius: 6px;
}

.googlemap iframe {
  width: 100%;
  height: 400px;
  display: block;
  border: none;
}


.about-section {
  padding: 40px 5%;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.about-inner {
    max-width: unset;
    margin: 40px 5%;
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

/* 左右逆（画像右・テキスト左） */
.about-inner.reverse {
  flex-direction: row-reverse;
}

.faq-article strong {
    font-weight: 600;
    color: #000;
    padding: 0 0.3em;
background:#fffdc8;
}

.about-image {
  flex: 1;
  min-width: 300px;
}

.about-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

body.page.about-image img {
  width: 90%;
  display: block;
  margin: 0 auto;
  height: auto;
  border-radius: 10px;
}
.about-text {
  flex: 1;
  min-width: 300px;
}

.about-title {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: #005A9C;
  font-weight: 600;
}

.about-desc {
  font-size: 1rem;
  line-height: 2.2;
  color: #333;
}

/* スマホでは縦並びにして画像→テキストの順番に戻す */
@media screen and (max-width: 768px) {
  .about-inner.reverse {
    flex-direction: column;
  }
}
.seo-lead {
    border-left: 6px solid #08a2c4;
    padding: 1.8em 1.5em;
    margin: 2em 0;
    font-size: 18px;
    line-height: 2.2;
    color: #333;
}

.seo-lead .marker {
  background:linear-gradient(transparent 60%, #ff6 60%);
  font-weight: bold;
}

.seo-lead .bd {
  font-weight: bold;
  color: #08a2c4;
}

.seo-lead .highlight {
  display: inline-block;
  margin-top: 0.5em;
  font-weight: bold;
  color: #08a2c4;
}


.price-text {
  text-align: right;
  font-weight: bold;
  margin-top: 0.5em;
  font-size: 36px;
  color: #e65100;
}

.price-text .tax {
    font-size: 15px;
    margin-left: 4px;
    color: #e65100;
}

.tax{
    font-size: 32px;
}
.original-design-bubble {
    background: #fce4ec;
    color: #d81b60;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    padding: 14px 20px;
    border-radius: 10px;
    position: relative;
    margin: 30px auto 10px auto;
    line-height: 1.6;
}

/* センター寄せ用ラッパーが不要な場合は以下でもOK */
.original-design-bubble {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

/* ▼ 三角 */
.original-design-bubble::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #fce4ec transparent transparent transparent;
}

.plan-page-item.plan-sub {
  font-size: 12px;
  font-weight: normal;
  color: #666;
  background: transparent;
    border: silver 2px solid;
  box-shadow: none;
  padding: 4px;
  height: auto;
}

.feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

.feature-item {
  flex: 1 1 calc(33.333% - 20px);
  background-color: #f7fafd;
  padding: 20px;
  border-radius: 4px;
  border: none;
  box-shadow: none;
  transition: background-color 0.3s;
}

.feature-item:hover {
  background-color: #eef6fa;
}

.feature-icon {
  text-align: center;
  margin-bottom: 12px;
}

.feature-icon img {
  max-width: 52px;
  height: auto;
  display: inline-block;
}

.feature-title {
  font-size: 1.05em;
  color: #007acc;
  margin-bottom: 0.4em;
  font-weight: bold;
  text-align: center;
}

.feature-desc {
  line-height: 1.7;
  font-size: 13.5px;
  color: #444;
  text-align: center;
}
.faq-list {
  margin: 40px 0;
  padding: 0;
  border-top: 1px solid #ddd;
}

.faq-item {
  padding: 20px 0;
  border-bottom: 1px solid #ddd;
}

.faq-list dt {
  font-weight: bold;
  color: #007acc;
  margin-bottom: 8px;
  font-size: 18px;
}

.faq-list dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: #333;
}/* サービスメニュー一覧 */
.feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
  margin-bottom: 50px;
}
.feature-item {
  flex: 1 1 calc(33.333% - 20px);
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.feature-icon {
  text-align: center;
  margin-bottom: 15px;
}
.feature-icon img {
  max-width: 60px;
  height: auto;
}
.feature-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: #007acc;
  margin-bottom: 10px;
  text-align: center;
}
.feature-desc {
  font-size: 0.95rem;
  color: #333;
  line-height: 1.6;
  margin-bottom: 10px;
}
.feature-price {
  font-size: 0.9rem;
  color: #666;
  text-align: center;
    padding-top: 10px;
    border-top: 1px dashed #000;
}


/* 課題と解決セクション */
.problem-solution-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 50px;
}


.ps-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #f9fcfe;
  padding: 20px;
  border: 1px solid #ddd;
  margin-bottom: 30px;
}
.ps-icon {
  width: 80px;
  height: 80px;
  background: url(../images/icon_hint.png) no-repeat center center;
  background-size: contain;
  flex-shrink: 0;
}
.ps-text {
  flex: 1;
}
.ps-problem {
    font-size: 18px;
    font-weight: bold;
    color: #007acc;
    margin-bottom: 10px;
    border-bottom: 1px dashed;
}
.ps-solution {
  font-size: 0.95rem;
  color: #333;
  line-height: 1.7;
}


/* おすすめチェックリスト */
.checklist {
  list-style: none;
  padding-left: 0;
  margin-bottom: 50px;
}
.checklist li {
  position: relative;
  padding-left: 1.8em;
  margin-bottom: 10px;
  font-size: 0.95rem;
  color: #333;
}
.checklist li::before {
  content: \"\\2713\";
  position: absolute;
  left: 0;
  color: #007acc;
  font-weight: bold;
}



.plan-block {
  position: relative;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 30px 20px;
  margin-bottom: 70px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  transition: transform 0.3s;
  text-align: center;
  background: #fff;
}
.plan-block:hover {
  transform: translateY(-4px);
}

.plan-label {
    position: absolute;
    top: 25px;
    right: 0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 50px;
    font-weight: 700;
    color: #bcd9e1;
    letter-spacing: 2px;
    user-select: none;
    pointer-events: none;
}

.plan-title {
  font-size: 2rem;
  font-weight: 700;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
  padding: 0 20px;
}

.plan-title::before,
.plan-title::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9999px;
  height: 1px;
  background: #ccc;
}

.plan-title::before {
  right: 100%;
  margin-right: 20px;
}

.plan-title::after {
  left: 100%;
  margin-left: 20px;
}


h4.plan-title2{
    font-size: 18px;
    border-left: 5px solid #007acc;
    padding: 5px 10px 5px 12px;
    text-align: left;
    margin: 0 0 30px 10px;
    background: #ddeffb;
}


.plan-price {
  font-size: 55px;
  font-weight: 600;
  color: #007acc;
  text-align: center;
  margin-bottom: 10px;
}

.plan-catch {
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
  background: linear-gradient(transparent 60%, #fffacd 60%);
  display: inline-block;
  padding: 0 6px;
  margin: 0 auto 20px;
  text-align: center;
}

.plan-desc {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #444;
  text-align: left;
  margin: 0 5% 40px 5%;
}


.plan-features {
  list-style: disc;
  padding-left: 20px;
  margin-bottom: 50px;
  color: #333;
  font-size: 0.95rem;
}
.plan-features li {
  margin-bottom: 8px;
  text-align: left;
  padding: 10px 20px 10px 50px;
  margin: 0 20px 15px 0;
  list-style-type: none;
  border: #eee 2px solid;
  background: linear-gradient(to right, #f9f9f9, #ffffff); /* 薄いグラデーション */
  background-image: url(./images/check_icon.png), linear-gradient(to right, #f9f9f9, #ffffff);
  background-repeat: no-repeat;
  background-size: 24px, auto;
  background-position: left 10px center, left top;
  font-weight: bold;
}



.seo_t {
  text-align: center;
  margin: 3rem 0;
}

.seo_t span {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 3.5rem;
  color: #007acc;
  position: relative;
  padding-bottom: 0.5rem;
}

.seo_t span::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 4px;
  width: 60px;
  background-color: #007acc;
  border-radius: 2px;
}


.plan-note {
  font-size: 0.9rem;
  color: #888;
  border-top: 1px dashed #ccc;
  padding-top: 15px;
}
.plan-note strong {
  color: #000;
}

.plan-image {
  text-align: center;
  margin-bottom: 20px;
}

.plan-image img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  border-radius: 8px;
}


.plan-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
    max-width: 1200px;
  margin: 0 auto 30px auto;
}

.plan-page-item {
  width: 100px;
  height: 100px;
  background: #ffffff;
  border: 2px solid #000;
  border-radius: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #333;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  word-break: break-word;
  line-height: 1.4;
  position: relative;
}

/* 左上の黒いラベル風三角 */
.plan-page-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 24px solid #000;
  border-right: 24px solid transparent;
  z-index: 1;
}

/* ラベル文字（入れたい場合） */
.plan-page-item::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 10px;
  color: #fff;
  z-index: 2;
  /* content: "固定"; ← ラベル文字を入れるならここで */
}


.c-postThumb__img {
    display: block;
    height: 100%;
    left: 0;
    object-fit: cover;
    object-position: top;
    position: absolute;
    top: 0;
    transition: transform .25s;
    width: 100%;
}

.works-detail {
  max-width: 800px;
  margin: 40px auto;
  padding: 30px 20px;
  background-color: #f9fcfe;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.p-entry__content {
    margin-top: 4rem;
    line-height: 2.4 !important;
}

.p-entry__content h2{
	margin: 50px 0 30px 0 !important;
}

.p-entry__content h3{
	margin: 50px 0 30px 0 !important;
}

.works-photo{
    width: 600px;
    height: auto;
    margin: 0 auto 40px auto;
}

.works-photo img:hover{
	opacity: 0.7;
}

.works-detail dl {
  display: grid;
  grid-template-columns: 160px 1fr;
  row-gap: 1em;
  column-gap: 1.5em;
  font-size: 16px;
}

.works-detail dt {
    font-weight: bold;
    color: #333;
    text-align: left;
    padding: 0 0 0 10px;
    border-left: 4px solid #007acc;
}

.works-detail dd {
  margin: 0;
  color: #555;
  line-height: 1.7;
}

.works-detail a {
  color: #007acc;
  text-decoration: underline;
}
.works-detail a:hover {
  text-decoration: none;
}

/* コメント部分 */
.works-comment {
  margin-top: 2em;
  padding: 20px 30px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.works-comment h3 {
  margin-bottom: 10px;
  font-size: 1.1em;
  color: #007acc;
}

.works-comment p {
  font-size: 0.96em;
  line-height: 1.8;
  color: #444;
}

@media screen and (max-width: 768px) {
  .works-detail dl {
    grid-template-columns: 100%;
  }

  .works-detail dt {
    margin-top: 1.2em;
  }
}
.btn-orange-wrap {
  text-align: center;
  margin: 40px 0;
}

.btn-orange {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(45deg, #fb8c00, #ef6c00);
  color: #fff;
  padding: 1em 2.2em;
  font-size: 20px;
  font-weight: bold;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transition: background 0.3s, transform 0.2s;
  gap: 0.6em;
  position: relative;
}

.btn-orange:hover {
  background: linear-gradient(45deg, #ef6c00, #e65100);
  transform: translateY(-2px);
}

.btn-orange.with-icon::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  background-image: url('/images/icon_seocheku.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}


/* SEO紹介セクションのスタイル */
.seo_wrap {
    max-width: 1100px;
    margin: 60px auto;
    padding: 40px 30px;
    background: #d8f0ff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
    background-image: url(./images/faq_url.png);
    background-repeat: no-repeat;
    background-position: bottom 10px right 20px;
    background-size: 400px;
}

.seo_wrap .seo-image {
  flex: 1;
  min-width: 300px;
  text-align: center;
}

.seo_wrap .seo-image img {
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 10px;
}

.low_txt2{
	margin: 0 2.5% 50px 2.5%;
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
  .seo_wrap {
    flex-direction: column;
    padding: 30px 20px;
  }

  .seo_wrap .seo-image,
  .seo_wrap .low_txt {
    flex: 1 1 100%;
  }
}

.content-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
  max-width: 1200px;
    margin: 40px auto 50px 0 !important;
  padding: 0 20px;
}

.content-item {
  flex: 1 1 calc(33.333% - 20px);
  border: 1px solid #ddd;
  background-color: #f9fcfe;
  padding: 1.5em;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s;
}
.content-item:hover {
  transform: translateY(-5px);
}

.content-icon {
  text-align: center;
  margin-bottom: 12px;
}

.content-icon img {
  max-width: 60px;
  height: auto;
  display: inline-block;
}

.content-title {
  font-size: 1.2em;
  color: #007acc;
  margin-bottom: 0.5em;
  font-weight: bold;
  text-align: center;
}

.content-desc {
    line-height: 1.8;
    font-size: 14px;
    color: #333;
    text-align: left;
}
.seo_wrap .low_txt {
  flex: 1;
  min-width: 300px;
  font-size: 1rem;
  color: #333;
  line-height: 2;
}
/* スマホ対応：1カラムに */
@media screen and (max-width: 768px) {
  .content-list {
    flex-direction: column;
  }

  .content-item {
    flex: 1 1 100%;
  }
}


/* SEO詳細ボタン（オレンジ系・大きめ） */
.seo-btn {
  display: inline-block;
  background: #ff7e00;
  color: #fff;
  font-weight: bold;
  font-size: 1.1rem;
  padding: 15px 30px;
  border-radius: 30px;
  text-align: center;
  text-decoration: none;
  transition: background 0.3s ease;
}

.seo-btn:hover {
  background: #e66f00;
  color: #fff;
}

.btn_center {
  text-align: center;
  margin-top: 40px;
}



.feature-section {
  background: #fff;
  padding: 20px 20px 60px 20px;
}

.feature-heading {
  font-size: 2rem;
  font-weight: bold;
  color: #000;
  text-align: center;
  position: relative;
  display: inline-block;
  margin: 0 auto 10px auto;
}
.feature-heading::after {
  content: '';
  display: block;
  height: 3px;
  width: 60px;
  background: #000;
  margin: 8px auto 0 auto;
}

.feature-subtitle {
  font-size: 1rem;
  text-align: center;
  margin-bottom: 40px;
  color: #000;
}

.feature-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.feature-box {
  flex: 1 1 calc(33.333% - 20px);
  background: #f9fcfe;
  padding: 24px;
  border: 1px solid #ddd;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  transition: all 0.3s ease;
}
.feature-box:hover {
  transform: translateY(-3px);
}

.feature-img {
  max-width: 200px;
  height: auto;
  margin-bottom: 20px;
}



.feature-desc {
  font-size: 0.95rem;
  color: #333;
  line-height: 1.8;
  text-align: left;
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
  .feature-columns {
    flex-direction: column;
  }
  .feature-box {
    flex: 1 1 100%;
  }
}

.feature-section {
  background: #fff;
  padding: 20px 20px 60px 20px;
}

.feature-heading {
  font-size: 2.8rem;
  font-weight: bold;
  color: #000;
  text-align: center;
  position: relative;
  display: block;
  margin: 0 auto 10px auto;
}
.feature-heading::after {
  content: '';
  display: block;
  height: 3px;
  width: 60px;
  background: #000;
  margin: 8px auto 0 auto;
}

.feature-subtitle {
  font-size: 1rem;
  text-align: center;
  margin-bottom: 40px;
  color: #000;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 100px 0 1em 1em;
  font-size: 0.9rem;
}

.breadcrumb li {
  display: flex;
  align-items: center;
}

.breadcrumb li + li::before {
  content: ">";
  margin: 0 0.5em;
  color: #999;
}

.breadcrumb a {
  color: #0073aa;
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumb a:hover {
  color: #005077;
  text-decoration: underline;
}
/* コンテナを最大1200pxに */
.l-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.feature-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
}

.feature-box {
  flex: 1 1 calc(33.333% - 20px);
  background: #fff;
  padding: 24px;
  border: 1px solid #ddd;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  transition: all 0.3s ease;
}
.feature-box:hover {
  transform: translateY(-3px);
}

.marker{
background:linear-gradient(transparent 60%, #ff6 60%);
}

a.btn01 {
    display: block;
    margin: 0 auto;
    padding: 15px 20px;
    color: #fff;
    font-size: 16px;
    text-align: center;
    background: #000;
    width: 220px;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    margin-top: 50px;
}
a:hover.btn01{
    color: #fff;
    background: #000;
	opacity: 0.7;
}


.webdesign-section {
  background-image: url('./images/bg01.jpg'); /* ←背景画像のURLを指定 */
  background-size: cover;
  background-position: center;
  color: white;
  padding: 100px 20px;
  text-align: center;
  position: relative;
}

.web-head {
  max-width: 800px;
  margin: 0 auto;
}

.web-head-txt01 {
  font-size: 45px;
  font-weight: bold;
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
}

.web-head-txt01::after {
  content: '';
  display: block;
  width: 60%;
  height: 2px;
  background-color: white;
  margin: 8px auto 0;
}
  
.web-head h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.webdesign-content {
  padding: 80px 20px;
  background-color: #f5f5f5;
}

.webdesign-inner {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  gap: 40px;
  align-items: center;
}

.webdesign-img {
  flex: 0 0 40%;
}

.webdesign-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.webdesign-text {
    flex: 0 0 60%;
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    padding: 0 5%;
    line-height: 2.4;
    margin-bottom: 20px;
}

.webdesign-text p{
    margin-bottom: 25px;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .webdesign-inner {
    flex-direction: column;
  }

  .webdesign-img,
  .webdesign-text {
    flex: 0 0 100%;
  }
}



.llmo-section {
  background-image: url('./images/bg03.jpg'); /* ←背景画像のURLを指定 */
  background-size: cover;
  background-position: center;
  color: white;
  padding: 100px 20px;
  text-align: center;
  position: relative;
}

.llmo-head {
  max-width: 800px;
  margin: 0 auto;
}

.llmo-head-txt01 {
  font-size: 45px;
  font-weight: bold;
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
}

.llmo-head-txt01::after {
  content: '';
  display: block;
  width: 60%;
  height: 2px;
  background-color: white;
  margin: 8px auto 0;
}
  
.llmo-head h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}


.llmo-content {
  padding: 80px 20px;
  background-color: #f5f5f5;
}

.llmo-inner {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  gap: 40px;
  align-items: center;
}

.llmo-img {
  flex: 0 0 40%;
}

.llmo-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.llmo-text {
    flex: 0 0 60%;
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    padding: 0 5%;
    line-height: 2.4;
    margin-bottom: 20px;
}

.llmo-text p{
    margin-bottom: 25px;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .llmo-inner {
    flex-direction: column;
  }

  .llmo-img,
  .llmo-text {
    flex: 0 0 100%;
  }
}


.seo-section {
  background-image: url('./images/bg02.jpg'); /* ←背景画像を別のものに */
  background-size: cover;
  background-position: center;
  color: white;
  padding: 100px 20px;
  text-align: center;
  position: relative;
}

.seo-head {
  max-width: 800px;
  margin: 0 auto;
}

.seo-head-txt01 {
  font-size: 45px;
  font-weight: bold;
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
}

.seo-head-txt01::after {
  content: '';
  display: block;
  width: 60%;
  height: 2px;
  background-color: white;
  margin: 8px auto 0;
}

.seo-head h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}
.works-section {
  padding: 80px 20px;
  background-color: #fff;
  color: #000;
  text-align: center;
}

.works-head {
  max-width: 800px;
  margin: 0 auto 40px;
}

.works-head-txt01 {
  font-size: 45px;
  font-weight: bold;
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
}

.works-head-txt01::after {
  content: '';
  display: block;
  width: 60%;
  height: 2px;
  background-color: #000;
  margin: 8px auto 0;
}

.works-head h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.works-slider img {
  width: 100%;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
  max-width: 95%;
}

.works-slider .slick-slide {
  padding: 0 15px; /* ←ここを調整すれば画像の左右余白が広がる */
}

.works-slider img {
  width: 100%;
  border-radius: 8px;
  display: block;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.column-section {
  padding: 80px 20px;
  background-color: #fafafa;
  text-align: center;
}

.column-head-txt01 {
  font-size: 45px;
  font-weight: bold;
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
}

.column-head-txt01::after {
  content: '';
  display: block;
  width: 60%;
  height: 2px;
  background-color: #000;
  margin: 8px auto 0;
}

.column-head h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 40px;
}

.column-list {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.column-item {
  width: 350px;
  text-align: center;
  transition: transform 0.3s ease;
}

.column-item:hover {
  transform: translateY(-5px);
}

.column-item a{
	text-decoration: none;
}

.polaroid {
  background: white;
  padding: 10px 10px 30px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  border: 1px solid #ddd;
  border-radius: 6px;
  position: relative;
}

.polaroid-img img {
    display: block;
    height: 200px;
    object-fit: cover;
    width: 100%;
    object-position: 50% 0;
}

.polaroid-caption {
  padding-top: 15px;
  text-align: left;
}

.polaroid-caption h3 {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 8px;
  color: #333;
}

.polaroid-caption .date {
  font-size: 13px;
  color: #999;
}
.cta-contact.has-bg {
  background: url("./images/contactbg.jpg") center center / cover no-repeat;
  color: #fff;
  padding: 60px 20px;
  text-align: center;
  position: relative;
}

.cta-contact.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4); /* 黒の透過で可読性UP */
  z-index: 1;
}

.cta-contact .l-inner {
  position: relative;
  z-index: 2;
}

.cta-contact .cta-title {s
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.cta-contact .cta-lead {
  font-size: 1em;
  margin-bottom: 30px;
  line-height: 1.8;
}

.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.cta-buttons a {
  display: inline-block;
  padding: 15px 30px;
  font-weight: bold;
  font-size: 1em;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-contact {
  background: #fff;
  color: #007acc;
  border: 2px solid #fff;
}

.btn-contact:hover {
  background: #e6f3ff;
  color: #005fa3;
}

.btn-line {
  background: #00c300;
  color: #fff;
  border: 2px solid #00c300;
}

.btn-line:hover {
  background: #00a800;
  border-color: #00a800;
}

@media (max-width: 768px) {
  .cta-buttons {
    flex-direction: column;
    gap: 15px;
  }

	.pagetop_block {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
		position: fixed;
		  opacity: 0;
        bottom: 0;
        right: 0;
        left: 0;
  visibility: hidden;
  transform: translateY(100px);
  transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.5s ease;
        z-index: 100;
    }

.pagetop_block.active {
  opacity: 1;
  visibility: visible;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
        z-index: 100;
}
    .pagetop_block #pagetop {
        width: 16%;
        height: 60px;
    }
    .pagetop_block #pagetop a::before {
        font-family: "fontello";
        content: "▲";
        font-size: 11px;
        line-height: 2;
    }
.pagetop_block .contact_sp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 28%;
}
.pagetop_block .contact_sp a {
    background: #151515;
    padding: 8px;
    height: 60px;
    width: 100%;
    text-decoration: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 12px;
    color: #ffffff;
    border-right: 1px solid #ffffff;
}

.pagetop_block .contact_sp a::before {
    content: "";
    position: absolute;
    top: 8px;
    background-image: url(./images/check.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.pagetop_block .contact_sp a span {
    margin-top: 24px;
}
.pagetop_block .contact_sp2 a span {
    margin-top: 24px;
}
.pagetop_block .contact_sp3 a span {
    margin-top: 24px;
}
.text-white {
    color: #fff !important;
}

.pagetop_block .contact_sp2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 28%;
}

    .pagetop_block .contact_sp2 a {
        opacity: 1 !important;
    }
	
.pagetop_block .contact_sp2 a {
    background: #151515;
    padding: 8px;
    height: 60px;
    width: 100%;
    text-decoration: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 12px;
    color: #ffffff;
    border-right: 1px solid #ffffff;
}

.pagetop_block .contact_sp2 a::before {
    content: "";
    position: absolute;
    top: 8px;
    background-image: url(./images/email.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.pagetop_block .contact_sp3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 28%;
}

    .pagetop_block .contact_sp3 a {
        opacity: 1 !important;
    }
.pagetop_block .contact_sp3 a {
    background: #151515;
    padding: 8px;
    height: 60px;
    width: 100%;
    text-decoration: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 12px;
    color: #ffffff;
}

.pagetop_block .contact_sp3 a::before {
    content: "";
    position: absolute;
    top: 8px;

    background-image: url(./images/line.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
    .pagetop_block #pagetop a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 100%;
        height: 100%;
        text-decoration: none;
        color: #151515;
        font-weight: 600;
        background: #f7f7f5;
        border: 1px solid #151515;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }
.free_top img{
	width: 100%;
	height: auto;
}
.free_top {
    width: auto;
}
    .pagetop_block #pagetop a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 100%;
        height: 100%;
        text-decoration: none;
        color: #151515;
        font-weight: 600;
        background: #f7f7f5;
        border: 1px solid #151515;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }
.footer-copy{
	padding-bottom: 80px;
}
}


.p-entry__head {
  padding: 40px 20px 0 20px;
}

.c-pageTitle__main {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.5;
    position: relative;
    background: #2b5ca9;
    color: #fff !important;
    font-size: 24px !important;
    padding: 10px;
}

.c-postMetas {
  font-size: 14px;
  color: #666;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.c-postTimes,
.c-postTerms {
  display: flex;
  align-items: center;
  gap: 6px;
}

.c-postMetas__icon {
  fill: #999;
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

.c-postTerms__link {
  color: #007acc;
  text-decoration: none;
}

.c-postTerms__link:hover {
  text-decoration: underline;
}

.faq-article {
  padding: 0 20px;
  max-width: unset;
  margin: 0 auto;
  line-height: 1.8;
  font-size: 16px;
  color: #333;
}

.faq-article h1,
.faq-article h2,
.faq-article h3 {
  font-weight: bold;
  margin: 3em 0 1em;
  line-height: 1.5;
  color: #222;
}

.faq-article h1 {
  font-size: 24px;
  border-left: 5px solid #007acc;
  padding-left: 12px;
}

.faq-article h2 {
font-size: 24px;
    margin-top: 70px;
    margin-bottom: 30px;
    border-bottom: 2px solid #007acc;
    padding-bottom: 10px;
}

.faq-article h3 {
  font-size: 18px;
  margin: 50px 0 30px 0 !important;
  color: #007acc;
  padding: 10px 20px;
  border-radius: 20px;
  background: #e3eef5;
}

.faq-article p {
    margin-bottom: 1.5rem;
    font-size: 18px;
    line-height: 2.4;
}

.faq-article a {
  color: #007acc;
  text-decoration: underline;
}

.faq-article a:hover {
  text-decoration: none;
}

.faq-article ul {
    margin-bottom: 1.5rem;
    padding: 0 !important;
}
.faq-article ul li {
    position: relative;
    padding-left: 1em;
    margin-bottom: 25px;
    padding: 10px 20px;
    border-bottom: 1px dashed #eee;
    background-color: #fff;
    font-size: 18px;
    list-style-type: none;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07);
}

.faq-article ol {
    margin-bottom: 1.5rem;
    padding: 0 !important;
}

.faq-article ol li {
    position: relative;
    padding-left: 1em;
    margin-bottom: 25px;
    padding: 10px 20px;
    font-size: 18px;
    list-style-type: inherit;
    margin: 0 0 20px 30px;
}


#main_content{
    max-width: 1200px;
    margin: 0 auto 60px auto;
}

.page-header {
  background: url('./images/headbg.jpg') center/cover no-repeat;
  background-color: #000; /* 画像がなければ色背景 */
  padding: 8rem 1rem 6rem;
  text-align: center;
  color: #fff;
  margin-bottom: 60px;
}

.page-header__inner {
  max-width: 960px;
  margin: 0 auto;
}

.page-header__title {
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
  margin: 0;
}

@media (max-width: 768px) {
  .page-header__title {
    font-size: 1.5rem;
  }
}


.lowt01 {
  font-size: 45px;
  font-weight: bold;
  color: #000;
  text-align: center;
  position: relative;
  margin-bottom: 15px !important;
}

.lowt01::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background-color: #000;
  margin: 8px auto 0;
}

.lowt02 {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  text-align: center;
    margin: 0 0 30px 0 !important;
}

h2.subt{
    background: #000;
    color: #fff;
    padding: 10px 20px;
    font-size: 20px;
}
h3.subt{
    color: #000;
	border-left: 4px solid #000;
    padding: 5px 0 5px 15px;
    font-size: 20px;
}

.seo-feature-block {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  border: 1px solid #ddd;
  background-color: #fff;
  padding: 1.5em;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  margin-bottom: 30px;
  transition: transform 0.3s;
}

.seo-feature-block:hover {
  transform: translateY(-4px);
}

.seo-feature-img {
  flex: 0 0 120px;
  max-width: 120px;
}

.seo-feature-img img {
  width: 100%;
  height: auto;
  display: block;
}

.seo-feature-text {
  flex: 1;
  font-size: 15px;
  line-height: 2;
  color: #333;
}

.seo-feature-text .feature-title {
    font-size: 1.3rem !important;
    font-weight: bold !important;
    color: #007acc;
    margin-bottom: 10px !important;
    text-align: left;
    padding: 4px 0 4px 15px;
    border-left: 4px solid;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .seo-feature-block {
    flex-direction: column;
    align-items: flex-start;
  }

  .seo-feature-img {
    max-width: 100%;
    flex: 100%;
    margin-bottom: 15px;
  }
}

.report-visual-section {
  margin: 40px 0;
  text-align: center;
}

.report-images {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.report-images picture {
  max-width: 45%;
  flex: 1 1 200px;
}

.report-images img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.report-caption {
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
    font-size: 16px;
    line-height: 2.4;
    color: #333;
}

.report-caption .bd {
  font-weight: bold;
}


@media screen and (max-width: 1300px) {
#main_content {
    max-width: unset;
    margin: 0 10% 60px 10%;
    width: auto !important;
}
}


@media screen and (max-width: 900px) {
.plan_add {
    width: auto;
        margin: 0 5%;
        padding: 30px 20px;
}
}

@media screen and (max-width: 768px) {
#main_content {
    max-width: unset;
    margin: 0 5% 60px 5%;
    width: auto !important;
}

.about-section {
    padding: 40px 5% 20px 5%;
}

.page-header {
    padding: 4rem 1rem 3rem;
}

.com_tab th, .com_tab td {
    padding: 16px 20px !important;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    width: auto;
    display: block;
}
.com_tab td{
	margin-bottom: 50px;
}
.com_tab {
    background-color: unset;
    box-shadow: unset;
	border: unset;
}
.works-detail {
    margin: 40px 5%;
}

.plan-catch {
    font-size: 1rem;
    font-weight: bold;
    color: #333;
    background: #fffacd;
    display: inline-block;
    padding: 10px;
    margin: 0 auto 20px;
    text-align: center;
}
  .plan-label {
    position: static;
    writing-mode: horizontal-tb;
    text-orientation: initial;
    font-size: 36px;
    color: #bcd9e1;
    display: block;
    margin-bottom: 10px;
    font-weight: 700;
    text-align: center;
  }
.plan-note {
    text-align: left;
}
  .plan-block {
    text-align: center;
  }
.breadcrumb {
    font-size: 0.8rem;
}
.p-entry__content.c-postContent {
    margin-bottom: 4rem;
}
.seo_wrap {
    padding: 20px 20px 70px 20px !important;
    background-size: 200px;
}

h2.subt {
    font-size: 18px;
}

.seo-feature-img img {
    width: 50%;
    height: auto;
    margin: 0 auto;
    display: block;
}

.greet-image img {
    max-width: 60%;
}

.mv-photo img {
    max-width: 100%;
    height: auto;
    max-height: 180px;
    object-fit: contain;
}

.webdesign-section {
    padding: 50px 20px;
}

.web-head-txt01 {
    font-size: 36px;
    margin-bottom: 10px;
}
.web-head h2 {
    font-size: 14px;
}

.seo-section {
    padding: 50px 20px;
}

.seo-head-txt01 {
    font-size: 36px;
    margin-bottom: 10px;
}
.seo-head h2 {
    font-size: 14px;
}

.webdesign-img img {
    width: 70%;
    height: auto;
    display: block;
    border-radius: 8px;
    margin: 0 auto;
}

.webdesign-content {
    padding: 40px 20px;
    background-color: #f5f5f5;
}
.plan-page-item {
  width: 70px;
  font-size: 12px;
   padding: 10px 5px;
}
.plan-desc {
    text-align: left;
}
.plan-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: unset;
}

h4.plan-title2 {
    margin: 0 0 30px 0;
}

.feature-list {
    display: block;
}
.feature-item{
	margin-bottom: 40px;
}

.ps-icon {
  width: 50px;
  height: 50px;
}
.faq-article h2 {
  font-size: 20px;
}
.faq-article p {
    font-size: 16px;
}

.faq-article ul li {
    font-size: 16px;
}
.p-authorBox__avatar {
    flex: 1 0 auto;
    margin: 0 auto;
    text-align: center;
}
.c-pageTitle__main {
    font-size: 26px !important;
}
.faq-article h1 {
    font-size: 20px;
}
.site-link-wrap {
        flex-direction: column;
        align-items: center;
        margin: 40px 10%;
    }
.lowt01 {
    font-size: 36px;
    font-weight: bold;
    color: #000;
    text-align: center;
    position: relative;
    margin-bottom: 15px !important;
    line-height: 1.2;
}
.plan-price {
    font-size: 35px;
}
.tax {
    font-size: 18px;
}
.report-images {
    display: block;
}

.report-images picture {
    max-width: 100%;
    margin-bottom: 40px;
    display: block;
}

.p-entry__content td, th{
font-size: 12px !important;
padding: 10px 7px !important;
}
.faq-article ul {
    padding-left: 0;
}
.works-photo {
    width: auto;
    height: auto;
    margin: 0 auto 40px auto;
}

.own_box {
    margin: 0 auto 30px auto !important;
    padding: 20px;
    background: #313131;
    width: auto;
    color: #fff;
}
.price-section .discount-price {
    font-size: 1.2em;
    font-weight: bold;
    color: #f04949;
    margin: 20px 0 0.5em;
    line-height: 1.5;
}
.price-section .highlight {
    font-size: 55px;
    color: #f04949;
    display: block;
}

.pcnon{
	display: block;
}
.spnon{
	display: none;
}
.own_catch {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

.top_campaign{
	margin: 40px 5% 0 5%;
}

.top_campaign img{
	width: 100%;
	height: auto;
}
.service-intro {
    background: linear-gradient(135deg, #003366, #005A9C);
    color: #fff;
    padding: 80px 30px;
    text-align: left;
}
.problem-section-container {
    padding: 80px 20px 0 20px;
}
}