/* ==========================================================================
   tmpl_card_more: サービスカード内「詳しく見る」ボタン
   ---------------------------------------------------------------------------
   wp:buttons > wp:button で構成される「詳しく見る」リンクを、
   旧 .tmpl_more_tx（右寄せテキスト＋矢印アイコン）と同じ見た目に変換する。
   さらに ::before で絶対配置し、カード全体をクリック可能にする。
   ========================================================================== */

/* wp:buttons ラッパ（.wp-block-buttons）のリセット */
.wp-block-buttons.tmpl_card_more_wrap {
    display: block;
    gap: 0;
    margin-top: 2.5rem;
}

@media only screen and (max-width: 768px) {
    .wp-block-buttons.tmpl_card_more_wrap {
        margin-top: 1.5rem;
    }
}

/* 個別ボタン（.wp-block-button）のリセット + 装飾 */
.wp-block-button.tmpl_card_more {
    width: 100%;
    text-align: right;
}

.wp-block-button.tmpl_card_more > .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.8rem;
    padding: 0;
    margin: 0;
    background: transparent;
    color: var(--c-brand-800);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    border-radius: 0;
    border: none;
    box-shadow: none;
}

.wp-block-button.tmpl_card_more > .wp-block-button__link:hover {
    color: var(--c-brand-900);
    background: transparent;
    text-decoration: none;
    opacity: 0.8;
}

/* ::after で矢印を付与（CSS変数で画像パスを上書き可能） */
.wp-block-button.tmpl_card_more > .wp-block-button__link::after {
    content: "";
    display: inline-block;
    width: 1.8rem;
    height: 1.8rem;
    background-image: url("../img/common/arrow_right.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform var(--dur) var(--ease);
}

.wp-block-button.tmpl_card_more > .wp-block-button__link:hover::after {
    transform: translateX(4px);
}

/* ==========================================================================
   tmpl_style_card: カード全体をクリック可能にする
   ---------------------------------------------------------------------------
   .tmpl_style_card（wp:group）配下に .tmpl_card_more のリンクがある場合、
   ::before の絶対配置でカード全体を覆い、クリック可能な領域を拡張する。
   ========================================================================== */

.tmpl_style_card {
    position: relative;
}

.tmpl_style_card .wp-block-button.tmpl_card_more > .wp-block-button__link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ホバーでカード全体に視覚フィードバック */
.tmpl_style_card:has(.tmpl_card_more > .wp-block-button__link:hover) {
    opacity: 0.85;
    transition: opacity var(--dur) var(--ease);
}


/* ==========================================================================
   導入事例ページ用スタイル（case CPT詳細ページ）
   ---------------------------------------------------------------------------
   single-case.php（または single.php で post_type=case）の本文内で使用。
   ネイティブ Gutenberg ブロック（wp:group / wp:columns / wp:image /
   wp:heading / wp:paragraph / wp:list）に tmpl_case_* クラスを付与して
   装飾する。tokens.css の CSS 変数を参照。
   ========================================================================== */

/* --------------------------------------------------------------------------
   会社概要ブロック
   -------------------------------------------------------------------------- */
.tmpl_case_company {
    margin: 4rem 0 5.6rem;
    padding: 3.2rem;
    background: var(--c-brand-50);
    border-radius: 0.8rem;
}

.tmpl_case_company .wp-block-columns {
    align-items: center;
    gap: 3.2rem;
}

.tmpl_case_logo {
    margin: 0;
}

.tmpl_case_logo img {
    max-width: 24rem;
    height: auto;
    display: block;
    margin: 0 auto;
}

.tmpl_case_info {
    margin: 0;
}

.tmpl_case_info_row {
    margin: 0 0 1.6rem;
    padding: 0 0 1.6rem;
    border-bottom: 1px solid var(--c-line);
    line-height: var(--lh-body);
}

.tmpl_case_info_row:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.tmpl_case_info_label {
    font-size: var(--fs-caption);
    color: var(--c-text-muted);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.05em;
}

.tmpl_case_info_value {
    font-size: var(--fs-base);
    color: var(--c-text);
    display: block;
    margin-top: 0.4rem;
}

@media only screen and (max-width: 768px) {
    .tmpl_case_company {
        padding: 2.4rem 2rem;
    }

    .tmpl_case_company .wp-block-columns {
        flex-direction: column;
        gap: 2.4rem;
    }
}

/* --------------------------------------------------------------------------
   Q&A ブロック
   -------------------------------------------------------------------------- */
.tmpl_case_qa {
    margin: 2.4rem 0 3.2rem;
    padding: 2.4rem 2.8rem;
    background: var(--c-bg);
    border-left: 4px solid var(--c-brand-800);
    border-radius: 0 0.4rem 0.4rem 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.tmpl_case_q {
    margin: 0 0 1.6rem;
    font-weight: var(--fw-semibold);
    color: var(--c-text);
    font-size: var(--fs-lead);
    line-height: 1.6;
}

.tmpl_case_q strong {
    display: inline-block;
    margin-right: 0.8rem;
    color: var(--c-brand-800);
    font-size: 2rem;
    font-family: var(--ff-num);
}

.tmpl_case_a {
    margin: 0;
    color: var(--c-text);
    line-height: var(--lh-body);
}

.tmpl_case_a strong {
    display: inline-block;
    margin-right: 0.8rem;
    color: var(--c-brand-800);
    font-size: 2rem;
    font-weight: var(--fw-semibold);
    font-family: var(--ff-num);
}

.tmpl_case_a_list {
    margin: 0.8rem 0 0;
    padding-left: 2.4rem;
}

.tmpl_case_a_list li {
    margin-bottom: 0.8rem;
    line-height: 1.8;
    color: var(--c-text);
}

@media only screen and (max-width: 768px) {
    .tmpl_case_qa {
        padding: 2rem;
    }

    .tmpl_case_q {
        font-size: var(--fs-base);
    }
}

/* --------------------------------------------------------------------------
   担当者紹介ブロック
   -------------------------------------------------------------------------- */
.tmpl_case_members {
    margin: 3.2rem 0;
    padding: 2.4rem;
    background: var(--c-bg-alt);
    border-radius: 0.8rem;
}

.tmpl_case_members .wp-block-columns {
    gap: 3.2rem;
}

.tmpl_case_member_img {
    margin: 0 0 1.2rem;
}

.tmpl_case_member_img img {
    display: block;
    margin: 0 auto;
    max-width: 16rem;
    border-radius: 50%;
}

.tmpl_case_member_info {
    margin: 0;
    text-align: center;
    font-size: var(--fs-small);
    color: var(--c-text-muted);
    line-height: var(--lh-body);
}

.tmpl_case_member_info strong {
    display: block;
    margin-top: 0.4rem;
    font-size: var(--fs-base);
    color: var(--c-text);
}

@media only screen and (max-width: 768px) {
    .tmpl_case_members .wp-block-columns {
        flex-direction: column;
    }
}

/* --------------------------------------------------------------------------
   サブ見出し・注釈
   -------------------------------------------------------------------------- */
.tmpl_case_subheading {
    margin: 3.2rem 0 1.6rem;
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    color: var(--c-text);
    padding-left: 1.6rem;
    border-left: 3px solid var(--c-brand-800);
}

@media only screen and (max-width: 768px) {
    .tmpl_case_subheading {
        font-size: var(--fs-h4-sp);
    }
}

.tmpl_case_note {
    margin: 3.2rem 0 0;
    padding: 1.6rem;
    background: var(--c-bg-alt);
    font-size: var(--fs-caption);
    color: var(--c-text-muted);
    line-height: var(--lh-body);
    border-top: 1px solid var(--c-line);
}

/* --------------------------------------------------------------------------
   画像ペア（左右並べ）
   -------------------------------------------------------------------------- */
.tmpl_case_pair_img {
    margin: 0;
}

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


/* ==========================================================================
   メガメニュー（グローバルナビ サービス）
   ---------------------------------------------------------------------------
   header.php → ccdash_global_nav() で出力される
   <ul class="header_globalnavi"> > <li class="has_megamenu"> 配下の
   .megamenu ブロックに適用する。

   構造:
     <li class="has_megamenu">
       <a>サービス</a>
       <div class="megamenu">
         <ul class="megamenu_list">
           <li class="megamenu_item">
             <a>
               <span class="megamenu_number">01</span>
               <span class="megamenu_label">状況を把握する</span>
               <span class="megamenu_description">...</span>
             </a>
           </li>
           ...
         </ul>
       </div>
     </li>
   ========================================================================== */

.header_globalnavi > li.has_megamenu {
    position: relative;
}

.megamenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.12);
    padding: 2.4rem;
    width: 72rem;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-0.8rem);
    transition:
        opacity var(--dur) var(--ease),
        visibility var(--dur) var(--ease),
        transform var(--dur) var(--ease);
}

.header_globalnavi > li.has_megamenu:hover .megamenu,
.header_globalnavi > li.has_megamenu:focus-within .megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.megamenu_list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.megamenu_item {
    border: 1px solid var(--c-line);
    background: var(--c-bg);
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.megamenu_item:hover {
    background: var(--c-brand-50);
    border-color: var(--c-brand-300);
}

.megamenu_item a {
    display: block;
    padding: 1.6rem 1.8rem;
    text-decoration: none;
    color: var(--c-text);
}

.megamenu_item a:hover {
    text-decoration: none;
}

.megamenu_number {
    display: inline-block;
    font-family: var(--ff-num);
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
    color: var(--c-text-invert);
    background: var(--c-brand-800);
    padding: 0.2rem 0.8rem;
    margin-bottom: 0.8rem;
    border-radius: 0.2rem;
    letter-spacing: 0.05em;
}

.megamenu_label {
    display: block;
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    color: var(--c-text);
    margin-bottom: 0.4rem;
    line-height: var(--lh-heading);
}

.megamenu_description {
    display: block;
    font-size: var(--fs-small);
    color: var(--c-text-muted);
    line-height: 1.5;
}

/* SP 表示（メガメニュー不採用、通常のサブメニュー展開にフォールバック） */
@media only screen and (max-width: 768px) {
    .megamenu {
        position: static;
        transform: none;
        width: 100%;
        padding: 1.2rem 0;
        border: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transition: none;
    }

    .header_globalnavi > li.has_megamenu:hover .megamenu,
    .header_globalnavi > li.has_megamenu:focus-within .megamenu {
        transform: none;
    }

    .megamenu_list {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .megamenu_item a {
        padding: 1.2rem 1.6rem;
    }
}


/* ==========================================================================
   WordPress 6.x 対応: wp:group の inner-container を透過化
   ---------------------------------------------------------------------------
   WP 6.x は wp:group を下記のように二重構造でレンダーする:
     <div class="wp-block-group xxx">
       <div class="wp-block-group__inner-container is-layout-flow ...">
         <!-- 実際の子要素 -->
       </div>
     </div>
   これにより .sec_service_list > .sec_service_item 等の子セレクタや
   flex レイアウトが中間の inner-container に阻まれて機能しなくなる。

   display: contents でラッパーのボックス自体を消し、視覚上「存在しない」
   扱いにすることで、既存CSS（home.css 等）がそのまま動作する。

   ※ layout の種類に関わらず全 inner-container に適用（汎用的）。
   副作用: inner-container 自体に padding/background が指定されている場合は
   消えるが、WPコアは通常 wp-block-group 外側に適用するため実害なし。
   ========================================================================== */
.wp-block-group > .wp-block-group__inner-container {
    display: contents;
}


/* ==========================================================================
   修正1: メガメニューの specificity 強化
   ---------------------------------------------------------------------------
   header-footer.css 188行目の旧サブメニューCSS
   （.header .header_inner .header_navi .header_globalnavi>li ul）が
   specificity 0,4,2 でメガメニュー内の <ul class="megamenu_list"> に
   適用されてしまい、display:none / 薄緑背景 / nowrap 等が効いてしまう。

   同じ path を使うことで specificity を揃え、読み込み順で確実に勝つ。
   ========================================================================== */

/* .megamenu 本体：旧submenuの display:none 等を確実に打ち消す
   位置は「サービス」リンクの左端基準で右に展開（画面左切れ防止） */
.header .header_inner .header_navi .header_globalnavi > li .megamenu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 72rem;
    min-width: 72rem;
    padding: 2.4rem;
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: 0;
    box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.12);
    white-space: normal;
    font-size: inherit;
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.8rem);
    z-index: 1000;
    transition:
        opacity var(--dur) var(--ease),
        visibility var(--dur) var(--ease),
        transform var(--dur) var(--ease);
}

.header .header_inner .header_navi .header_globalnavi > li.has_megamenu:hover .megamenu,
.header .header_inner .header_navi .header_globalnavi > li.has_megamenu:focus-within .megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* .megamenu_list：2列グリッドを確実に */
.header .header_inner .header_navi .header_globalnavi .megamenu_list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
    list-style: none;
    padding: 0;
    margin: 0;
    background: transparent;
    position: static;
    transform: none;
    white-space: normal;
    min-width: 0;
    font-size: inherit;
}

/* .megamenu_item */
.header .header_inner .header_navi .header_globalnavi .megamenu_item {
    margin: 0;
    border: 1px solid var(--c-line);
    background: var(--c-bg);
    border-top: 1px solid var(--c-line);
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.header .header_inner .header_navi .header_globalnavi .megamenu_item:hover {
    background: var(--c-brand-50);
    border-color: var(--c-brand-300);
}

/* SP対応 */
@media only screen and (max-width: 768px) {
    .header .header_inner .header_navi .header_globalnavi > li .megamenu {
        position: static;
        width: 100%;
        min-width: 0;
        transform: none;
        box-shadow: none;
        padding: 1.2rem 0;
        border: none;
        opacity: 1;
        visibility: visible;
    }

    .header .header_inner .header_navi .header_globalnavi .megamenu_list {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }
}


/* ==========================================================================
   修正2: 事例3カラム（tmpl_columns--3）のカード間gap復活
   ---------------------------------------------------------------------------
   gutenberg.css で .wp-block-columns.tmpl_columns { gap: 0 } が設定され、
   さらに .wp-block-column に margin: 0 !important が当たって
   CASE STUDY の3カードがピッタリくっついている。
   gap で復活させる（後読み込みのgutenberg-additions.cssが勝つ）。

   row / column を明示：
   - column-gap: 2.5%（横のカード間隔）
   - row-gap:    30px（折り返した2行目以降の縦間隔）
   ※ gap: 2.5% だけだと row 方向の % が効かないブラウザがあり、
     2行目が1行目にくっつくため、row を px で明示する。

   SP時の追加対応：
   layout.css で SP時に .tmpl_columns--3 { display: block } が当たるため、
   gap が効かず（gap は flex/grid 専用）、さらに gutenberg.css の
   .wp-block-column { margin: 0 !important } で子要素マージンも打ち消される。
   gap を効かせる方式は環境差が出やすいので、子要素の margin-bottom を
   !important で強制復活させる方式に切り替え（確実）。
   ========================================================================== */
.wp-block-columns.tmpl_columns--3 {
    gap: 30px 2.5%;
}

@media only screen and (max-width: 768px) {
    .wp-block-columns.tmpl_columns--3 .wp-block-column {
        margin: 0 0 2rem !important;
    }
    .wp-block-columns.tmpl_columns--3 .wp-block-column:last-child {
        margin-bottom: 0 !important;
    }
}


/* ==========================================================================
   修正3: 選ばれる理由（tmpl_columns--3_wide）の3カラム崩れ
   ---------------------------------------------------------------------------
   home.html は .tmpl_columns--3_wide を wp:group で実装 → inner-container が
   挟まる。layout.css の .tmpl_columns--3_wide>* は直接子セレクタなので、
   透過化された inner-container にマッチしてしまい、本来 width:30% が
   当たるべき .tmpl_column に効かない。

   子孫セレクタで .tmpl_column に直接 width を当てて解決。
   ========================================================================== */
@media only screen and (min-width: 769px) {
    .wp-block-group.tmpl_columns--3_wide .tmpl_column {
        width: 30%;
        margin: 30px 5% 0 0;
    }

    .wp-block-group.tmpl_columns--3_wide .tmpl_column:nth-child(-n+3) {
        margin-top: 0;
    }

    .wp-block-group.tmpl_columns--3_wide .tmpl_column:nth-child(3n) {
        margin-right: 0;
    }
}

@media only screen and (max-width: 768px) {
    .wp-block-group.tmpl_columns--3_wide .tmpl_column {
        width: 100%;
        margin: 0 0 2rem;
    }

    .wp-block-group.tmpl_columns--3_wide .tmpl_column:last-child {
        margin-bottom: 0;
    }
}


/* ==========================================================================
   修正4: ニュース項目のカテゴリ・タイトル重なり解消（2行構成化）
   ---------------------------------------------------------------------------
   .tmpl_news_item は display:flex; flex-wrap:wrap で全要素が横並びになり、
   日付・カテゴリ・タイトルが1行に詰めこまれて重なって見える問題。
   タイトルに width:100% を指定して、必ず2行目に折り返すようにする。

   結果の2行構成:
     [日付]  [カテゴリ]              [→]
     [タイトル                       ]
   ========================================================================== */
.tmpl_news_list .tmpl_news_item .tmpl_news_item_heading {
    width: 100%;
    margin-top: 0.8rem;
    font-weight: 700;
}


/* ==========================================================================
   修正5: MV画像を暗くして視認性向上（オーバーレイ方式）
   ---------------------------------------------------------------------------
   下層ページMV（ccdash_page_mv() で出力）の画像に半透明黒オーバーレイ。
   CSSの brightness() ではなく、::after で黒を被せる方式（ロゴや装飾要素が
   暗くならない）。
   ========================================================================== */
.tmpl_page_mv {
    position: relative;
}

.tmpl_page_mv::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    z-index: 1;
    pointer-events: none;
}

.tmpl_page_mv .tmpl_page_mv_image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.tmpl_page_mv .tmpl_inner {
    position: relative;
    z-index: 2;
}

/* MV内のテキストを白に（黒オーバーレイの上なので視認性確保） */
.tmpl_page_mv .tmpl_page_mv_category,
.tmpl_page_mv .tmpl_page_mv_heading,
.tmpl_page_mv .tmpl_page_mv_tx {
    color: #fff;
}


/* ==========================================================================
   修正6: Gutenberg版 .tmpl_style_card に padding
   ---------------------------------------------------------------------------
   通常の .tmpl_style_card は内部に .tmpl_style_card_textbody ラッパーを
   持ち、そこに padding:3rem が当たる設計。Gutenberg版は wp:group で
   単体ラップしているためラッパーがなく、paddingが無い状態になる。

   .tmpl_style_card_textbody を持たない tmpl_style_card にのみ
   直接 padding を当てる（:not(:has()) で既存箇所の二重paddingを防止）。
   ========================================================================== */
.wp-block-group.tmpl_style_card:not(:has(.tmpl_style_card_textbody)) {
    padding: 3rem;
}

@media only screen and (max-width: 768px) {
    .wp-block-group.tmpl_style_card:not(:has(.tmpl_style_card_textbody)) {
        padding: 2rem;
    }
}

/* カード内の h3 と p の間に余白 */
.wp-block-group.tmpl_style_card:not(:has(.tmpl_style_card_textbody)) .tmpl_heading3 {
    margin-bottom: 1rem;
    color: var(--c-brand-800);
}

.wp-block-group.tmpl_style_card:not(:has(.tmpl_style_card_textbody)) p {
    margin: 0;
    color: var(--c-text);
}

/* 関連サービスカードの外部リンクアイコン調整 */
.tmpl_external_icon {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.85em;
}


/* ==========================================================================
   修正7: 下層ページのセクション余白（ビジュアル調整）
   ---------------------------------------------------------------------------
   サービスページは短めなので、セクション間に十分な余白を確保して
   ゆったり見せる。
   ========================================================================== */
.tmpl_inner > .wp-block-group.sec_tmpl_block:first-child {
    padding-top: 7.5rem;
}

.tmpl_inner > .wp-block-group.sec_tmpl_block + .wp-block-group.sec_tmpl_block {
    margin-top: 2rem;
}

/* section_catch と heading2 の間 */
.wp-block-group.sec_tmpl_block .tmpl_section_catch + .wp-block-heading.tmpl_heading2 {
    margin-top: 0.8rem;
}

/* heading2 と columns の間 */
.wp-block-group.sec_tmpl_block .wp-block-heading.tmpl_heading2 + .wp-block-columns {
    margin-top: 4rem;
}

@media only screen and (max-width: 768px) {
    .tmpl_inner > .wp-block-group.sec_tmpl_block:first-child {
        padding-top: 4rem;
    }
    .wp-block-group.sec_tmpl_block .wp-block-heading.tmpl_heading2 + .wp-block-columns {
        margin-top: 2.5rem;
    }
}


/* ==========================================================================
   修正8: サービス一覧ページ専用スタイル
   ---------------------------------------------------------------------------
   services.html 用のカード番号、サービスリンク、比較表のスタイル。
   ========================================================================== */

/* サービス番号 "SERVICE 01" などの小さなラベル */
.tmpl_service_number {
    display: inline-block;
    font-family: "Montserrat", sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--c-brand-800);
    background: var(--c-brand-50);
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    margin-bottom: 1.2rem;
}

/* カード内の「詳しく見る →」リンク */
.tmpl_service_link {
    margin: 1.2rem 0 0;
    font-size: 1.4rem;
    font-weight: 700;
}

.tmpl_service_link a {
    color: var(--c-brand-800);
    text-decoration: none;
    transition: opacity var(--dur) var(--ease);
}

.tmpl_service_link a:hover {
    opacity: 0.7;
}

/* サービス一覧ページのカードh3リンクは下線なし */
.wp-block-group.tmpl_style_card .tmpl_heading3 a {
    color: inherit;
    text-decoration: none;
}

.wp-block-group.tmpl_style_card .tmpl_heading3 a:hover {
    opacity: 0.7;
}

/* 比較表 */
.tmpl_comparison_table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 3rem;
    background: var(--c-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.tmpl_comparison_table th,
.tmpl_comparison_table td {
    padding: 1.6rem 2rem;
    border: 1px solid var(--c-line);
    vertical-align: middle;
    text-align: left;
    font-size: 1.5rem;
    line-height: 1.7;
}

.tmpl_comparison_table thead th {
    background: var(--c-brand-800);
    color: var(--c-text-invert);
    font-weight: 700;
    text-align: center;
}

.tmpl_comparison_table tbody td:nth-child(2) {
    font-weight: 700;
}

.tmpl_comparison_table tbody td:nth-child(2) a {
    color: var(--c-brand-800);
    text-decoration: underline;
}

.tmpl_comparison_table tbody td:nth-child(2) a:hover {
    text-decoration: none;
}

.tmpl_comparison_table tbody tr:nth-child(even) {
    background: var(--c-brand-50);
}

@media only screen and (max-width: 768px) {
    .tmpl_comparison_table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .tmpl_comparison_table th,
    .tmpl_comparison_table td {
        padding: 1.2rem 1.5rem;
        font-size: 1.3rem;
        white-space: normal;
        min-width: 200px;
    }
}


/* ==========================================================================
   修正9: 2列レイアウト（tmpl_columns--2）
   ---------------------------------------------------------------------------
   layout.css には .tmpl_columns--3 / --3_wide はあるが、
   .tmpl_columns--2 の定義がなかった。
   関連サービスが2件の場合（service-organize, service-visualize）用。
   ========================================================================== */

.wp-block-columns.tmpl_columns--2 {
    gap: 3%;
    flex-wrap: wrap;
    align-items: stretch;
}

.wp-block-columns.tmpl_columns--2 .wp-block-column.tmpl_column {
    flex-basis: 48.5% !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
}

/* 2列内のカードは flex で縦に揃えて高さ合わせる */
.wp-block-columns.tmpl_columns--2 .wp-block-column.tmpl_column > .wp-block-group {
    flex: 1;
}

@media only screen and (max-width: 768px) {
    .wp-block-columns.tmpl_columns--2 {
        gap: 2rem;
    }
    .wp-block-columns.tmpl_columns--2 .wp-block-column.tmpl_column {
        flex-basis: 100% !important;
    }
}

/* 3カラムも同様に高さ合わせ */
.wp-block-columns.tmpl_columns--3 .wp-block-column.tmpl_column {
    display: flex;
    flex-direction: column;
}

.wp-block-columns.tmpl_columns--3 .wp-block-column.tmpl_column > .wp-block-group {
    flex: 1;
}


/* ==========================================================================
   修正10: 導入事例一覧（archive-case.php）用スタイル
   ---------------------------------------------------------------------------
   提案v8 cases.html 準拠:
   - 業種フィルタ（横並びボタン）
   - 3列カードグリッド（企業ロゴ + タグ + タイトル + 説明）
   - CTA
   ========================================================================== */

/* 業種フィルタ */
.tmpl_case_filter {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: 4rem 0 5rem;
    padding: 3rem 0;
    background: var(--c-brand-50);
    border-radius: 8px;
}

.tmpl_case_filter_btn {
    display: inline-block;
    padding: 0.8rem 2rem;
    border: 1px solid var(--c-brand-800);
    background: var(--c-bg);
    color: var(--c-text);
    text-decoration: none;
    font-size: 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.tmpl_case_filter_btn:hover,
.tmpl_case_filter_btn.is-active {
    background: var(--c-brand-800);
    color: var(--c-text-invert);
}

/* 3列カードグリッド */
.tmpl_case_grid_section {
    margin: 4rem 0 6rem;
}

.tmpl_case_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin-top: 3rem;
}

.tmpl_case_card {
    display: flex;
    flex-direction: column;
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: var(--c-text);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.tmpl_case_card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.tmpl_case_card_image {
    position: relative;
    aspect-ratio: 20 / 9;
    overflow: hidden;
    background: var(--c-brand-50);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--c-line);
}

.tmpl_case_card_image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2rem;
}

.tmpl_case_card_placeholder {
    color: var(--c-text-subtle);
    font-size: 1.3rem;
    text-align: center;
}

.tmpl_case_card_content {
    padding: 2.5rem 2.5rem 3rem;
}

.tmpl_case_card_tag {
    display: inline-block;
    font-size: 1.3rem;
    border: 1px solid var(--c-line);
    padding: 0.2rem 1rem;
    margin-bottom: 1.2rem;
    color: var(--c-text-subtle);
    background: var(--c-bg);
}

.tmpl_case_card_heading {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 1.2rem;
    line-height: 1.5;
}

.tmpl_case_card_tx {
    font-size: 1.5rem;
    color: var(--c-text-subtle);
    line-height: 1.7;
    margin: 0;
}

/* 事例CTA */
.tmpl_case_cta {
    margin-top: 8rem;
}

@media only screen and (max-width: 768px) {
    .tmpl_case_filter {
        margin: 2rem 0 3rem;
        padding: 2rem 1rem;
        gap: 0.8rem;
    }
    .tmpl_case_filter_btn {
        padding: 0.6rem 1.5rem;
        font-size: 1.3rem;
    }
    .tmpl_case_grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .tmpl_case_card_content {
        padding: 1.8rem;
    }
}


/* ==========================================================================
   修正11: ブログ一覧（home.php）用スタイル
   ---------------------------------------------------------------------------
   提案v8 column.html 準拠:
   - メイン（3列カード）+ サイドバー（280px）
   - 人気タグクラウド
   - 人気記事セクション
   ========================================================================== */

/* アーカイブボックス（メイン + サイド）のレイアウト
   既存 components.css 側で .tmpl_archive_box { display: flex } と
   .tmpl_archive_box_main { width: 70% } / .tmpl_archive_box_side { width: 26.66% }
   が定義されているので、それを活かす。ここでは上書きしない。
   ※ 以前の grid 指定は既存CSSと競合してサイドバーが崩れる原因だったため削除。 */

/* 記事カードグリッド */
.tmpl_article_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-top: 3rem;
}

.tmpl_article_item {
    display: flex;
    flex-direction: column;
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    color: var(--c-text);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.tmpl_article_item:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tmpl_article_item_image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--c-brand-50);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tmpl_article_item_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tmpl_article_item_placeholder {
    color: var(--c-text-subtle);
    font-size: 1.2rem;
}

.tmpl_article_item_content {
    padding: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.tmpl_article_item_tag {
    display: inline-block;
    align-self: flex-start;
    font-size: 1.2rem;
    background: var(--c-brand-50);
    color: var(--c-brand-800);
    padding: 0.3rem 1rem;
    margin-bottom: 1rem;
    border-radius: 3px;
}

.tmpl_article_item_heading {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 1rem;
    min-height: 4.5rem;
}

.tmpl_article_item_tx {
    font-size: 1.3rem;
    color: var(--c-text-subtle);
    line-height: 1.7;
    margin: 0;
}

@media only screen and (max-width: 960px) {
    .tmpl_article_list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 640px) {
    .tmpl_article_list {
        grid-template-columns: 1fr;
    }
}

/* サイドバー */
.tmpl_sidebar_section {
    padding: 2.5rem 2rem;
    margin-bottom: 2.5rem;
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: 6px;
}

.tmpl_sidebar_heading {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--c-line);
}

.tmpl_sidebar_list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tmpl_sidebar_list li {
    padding: 0.8rem 0;
    border-bottom: 1px dashed var(--c-line);
}

.tmpl_sidebar_list li:last-child {
    border-bottom: none;
}

.tmpl_sidebar_list a {
    color: var(--c-text);
    text-decoration: none;
    font-size: 1.4rem;
    display: flex;
    justify-content: space-between;
    transition: color var(--dur) var(--ease);
}

.tmpl_sidebar_list a:hover {
    color: var(--c-brand-800);
}

.tmpl_sidebar_count {
    color: var(--c-text-subtle);
    font-size: 1.2rem;
}

/* タグクラウド */
.tmpl_tag_cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.tmpl_tag_cloud a {
    display: inline-block;
    padding: 0.4rem 1.2rem;
    background: var(--c-brand-50);
    color: var(--c-brand-800);
    border-radius: 999px;
    text-decoration: none;
    font-size: 1.2rem;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.tmpl_tag_cloud a:hover {
    background: var(--c-brand-800);
    color: var(--c-text-invert);
}

/* 人気記事セクション */
.tmpl_popular_section {
    margin: 6rem 0;
    padding-top: 5rem;
    border-top: 1px solid var(--c-line);
}

.tmpl_section_subtitle {
    font-size: 2.4rem;
    font-weight: 700;
    margin: 0 0 2rem;
    padding-left: 1.2rem;
    border-left: 4px solid var(--c-brand-800);
}

/* アーカイブ空の表示 */
.tmpl_archive_empty {
    padding: 4rem;
    text-align: center;
    color: var(--c-text-subtle);
    background: var(--c-brand-50);
    border-radius: 6px;
    margin-top: 3rem;
}


/* ==========================================================================
   修正12: カード全体を押せるようにする（stretched-link 方式）
   ---------------------------------------------------------------------------
   ※ 既存 gutenberg-additions.css には
   「.tmpl_style_card .wp-block-button.tmpl_card_more > .wp-block-button__link::before」
   で既に stretched-link 実装があり、::after は矢印アイコン表示に使われている。
   ここでは事例カード用 (.tmpl_heading3 a) と お役立ち情報カード用のみ追加。
   サービスカードの ::after を上書きしないよう注意。
   ========================================================================== */

/* お役立ち情報カード (.tmpl_style_info_card) 自体が<a>なので追加対応は不要 */

/* TOPのサービスカード・事例カードに hover 時の浮き上がりエフェクト */
.wp-block-group.tmpl_style_card {
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.wp-block-group.tmpl_style_card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}


/* ==========================================================================
   修正13: 事例カードのロゴ画像用スタイル
   ---------------------------------------------------------------------------
   TOPの事例3カードで、画像を「ロゴ」として適切に表示するためのスタイル。
   実写写真前提の .tmpl_thum と違い、
   - 白背景
   - object-fit: contain（ロゴ全体が見える）
   - padding（ロゴが端に寄り過ぎない）
   を設定。
   ========================================================================== */

.tmpl_thum_logo {
    background: var(--c-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-bottom: 1px solid var(--c-line);
}

.tmpl_thum_logo .wp-block-image,
.tmpl_thum_logo figure {
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
    box-sizing: border-box;
}

.tmpl_thum_logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media only screen and (max-width: 768px) {
    .tmpl_thum_logo .wp-block-image,
    .tmpl_thum_logo figure {
        padding: 2rem;
    }
}


/* ==========================================================================
   修正14: 事例カードのh3リンクを stretched-link 化
   ---------------------------------------------------------------------------
   TOPの事例3カードは「詳細」ボタンを持たないため、修正12とは別に
   h3 > a::after でカード全体クリック可能化する。
   ========================================================================== */

.wp-block-group.tmpl_style_card .tmpl_heading3 a {
    color: inherit;
    text-decoration: none;
}

.wp-block-group.tmpl_style_card .tmpl_heading3 a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}


/* ==========================================================================
   修正15: TOPの事例カード全体をリンクに
   ---------------------------------------------------------------------------
   ショートコード [ccdash_top_cases] が吐き出す <a class="tmpl_case_card_link">
   がカード全体を<a>でラップ。テキスト色・下線を無効化してナチュラルに見せる。
   ========================================================================== */

.tmpl_case_card_link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.tmpl_case_card_link:hover {
    text-decoration: none;
}

.tmpl_case_card_link .tmpl_heading3 {
    color: inherit;
}


/* ==========================================================================
   修正16: TOP お役立ち情報セクション コンテナ
   ---------------------------------------------------------------------------
   元HTML ccd/css/home.css 準拠。
   カード本体の flex/padding/サムネ比率などは components.css の
   .tmpl_style_info_card ブロックで定義済み。
   ========================================================================== */

.sec_info_list > * {
    margin-bottom: 1.5rem;
}

.sec_info_list > *:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   修正17: ニュース/お役立ち情報 共通の微調整
   ---------------------------------------------------------------------------
   - カテゴリナビゲーションを1行に収める
   - ページネーション周辺の余白を整える
   - お役立ち情報アーカイブのブログカード（.tmpl_article_item）のサムネ表示
   ========================================================================== */

/* カテゴリナビを1行に（はみ出す場合は横スクロール） */
.tmpl_archive_navi {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    margin-bottom: 3rem;
}

.tmpl_archive_navi a {
    flex-shrink: 0;
    padding: 0.8rem 2rem;
    background: var(--c-brand-50);
    color: var(--c-brand-800);
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 1.4rem;
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.tmpl_archive_navi a:hover,
.tmpl_archive_navi a.current {
    background: var(--c-brand-800);
    color: var(--c-text-invert);
}

/* ページネーション: 上の薄いラインを削除、下のマージン追加 */
.tmpl_pager {
    border: none !important;
    margin-top: 3rem;
    margin-bottom: 6rem;
}

.tmpl_pager + .tmpl_cta,
.tmpl_pager + section {
    margin-top: 0;
}

/* お役立ち情報アーカイブのブログカード - サムネ表示 */
.tmpl_article_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem 2.5rem;
    margin-bottom: 4rem;
}

@media only screen and (max-width: 768px) {
    .tmpl_article_list {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

.tmpl_article_item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--c-text);
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: 8px;
    overflow: hidden;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.tmpl_article_item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.tmpl_article_item_image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--c-brand-50);
    overflow: hidden;
}

.tmpl_article_item_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tmpl_article_item_content {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}

.tmpl_article_item_tag {
    display: inline-block;
    align-self: flex-start;
    padding: 0.3rem 1rem;
    background: var(--c-brand-50);
    color: var(--c-brand-800);
    font-size: 1.2rem;
    border-radius: 4px;
}

.tmpl_article_item_heading {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--c-brand-800);
    line-height: 1.4;
    margin: 0;
}

.tmpl_article_item_tx {
    font-size: 1.3rem;
    color: var(--c-text-subtle);
    line-height: 1.6;
    margin: 0;
}


/* ==========================================================================
   修正18: 人気記事セクション（お役立ち情報アーカイブのメインカラム末尾）
   ---------------------------------------------------------------------------
   提案v8 column.html の .popular-section 構造を踏襲。
   最新記事セクションの後に配置される「人気記事」区画。
   ========================================================================== */

.popular-section {
    margin-top: 8rem;
    padding-top: 5rem;
    border-top: 2px solid var(--c-line);
}

@media only screen and (max-width: 768px) {
    .popular-section {
        margin-top: 5rem;
        padding-top: 3rem;
    }
}

/* 人気記事の見出し: 左ボーダー + brand color */
.tmpl_popular_heading {
    font-size: 2.4rem;
    margin-bottom: 3.5rem;
    padding-left: 1.5rem;
    border-left: 4px solid var(--c-brand-800);
    font-weight: 700;
    line-height: 1.3;
}

@media only screen and (max-width: 768px) {
    .tmpl_popular_heading {
        font-size: 1.8rem;
        margin-bottom: 2rem;
    }
}


/* ==========================================================================
   修正20: メガメニュー内「サービス一覧を見る」導線
   ---------------------------------------------------------------------------
   6カテゴリの後に、サービス一覧(/services/)へのリンクを追加。
   ul 末尾の li として配置（SP時 jQuery slideDown 対応）、
   他の megamenu_item とは見た目を区別してアクションを促す。
   ========================================================================== */

.megamenu_view_all {
    grid-column: 1 / -1;   /* グリッドレイアウトの場合、全幅 */
    border-top: 1px solid var(--c-line);
    margin-top: 1rem;
    padding-top: 1rem;
    list-style: none;
}

.megamenu_view_all a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 1.2rem 2rem !important;
    background: var(--c-brand-50);
    color: var(--c-brand-800) !important;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.5rem;
    transition: background var(--dur) var(--ease);
}

.megamenu_view_all a:hover {
    background: var(--c-brand-800);
    color: var(--c-text-invert) !important;
}

.megamenu_view_all_label {
    display: inline-block;
}

.megamenu_view_all_arrow {
    display: inline-block;
    font-size: 1.4rem;
    transition: transform var(--dur) var(--ease);
}

.megamenu_view_all a:hover .megamenu_view_all_arrow {
    transform: translateX(4px);
}

@media only screen and (max-width: 768px) {
    .megamenu_view_all {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
    }
    .megamenu_view_all a {
        padding: 1rem 1.5rem !important;
        font-size: 1.4rem;
    }
}


/* ==========================================================================
   修正21: サービス一覧ページ（/services/）専用スタイル
   ---------------------------------------------------------------------------
   提案v8 services.html の構成に合わせる:
   - SECTION 01: 6サービスの横長カード（画像 + テキスト、偶数は画像右反転）
   - SECTION 02: 個別サービス3列グリッド（シンプル枠カード）
   - SECTION 03: 課題別の比較表
   ========================================================================== */

/* section見出し: 白ラベル + 黒背景（提案v8風） */
.tmpl_section_catch--dark {
    display: inline-block;
    padding: 4px 12px;
    background: var(--c-text);
    color: var(--c-text-invert);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--c-text);
    padding-bottom: 4px;
}

/* ----------------------------------------------------------------------------
   SECTION 01: サービス縦並び（各カードは横長 flex）
   ---------------------------------------------------------------------------- */
.tmpl_service_list {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-top: 4rem;
}

.tmpl_service_item {
    display: flex;
    align-items: center;
    gap: 4rem;
    padding: 3rem;
    background: var(--c-bg);
    border-radius: 8px;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.tmpl_service_item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* 偶数番目: 画像右 + 背景色違い */
.tmpl_service_item:nth-child(even) {
    flex-direction: row-reverse;
    background: var(--c-brand-50);
}

.tmpl_service_item_image {
    flex: 0 0 350px;
    width: 350px;
    aspect-ratio: 350 / 250;
    overflow: hidden;
    border-radius: 4px;
    background: var(--c-line);
}

.tmpl_service_item_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tmpl_service_item_content {
    flex: 1;
}

.tmpl_service_item_number {
    display: inline-block;
    padding: 4px 12px;
    background: var(--c-brand-800);
    color: var(--c-text-invert);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    border-radius: 3px;
}

.tmpl_service_item_heading {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--c-text);
    margin: 0 0 1.5rem;
    line-height: 1.3;
}

.tmpl_service_item_content p {
    font-size: 1.6rem;
    color: var(--c-text-subtle);
    line-height: 1.8;
    margin: 0 0 2rem;
}

.tmpl_service_item_link {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.2rem 3.2rem;
    border: 2px solid var(--c-brand-800);
    color: var(--c-brand-800);
    background: var(--c-bg);
    font-size: 1.6rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.tmpl_service_item_link:hover {
    background: var(--c-brand-800);
    color: var(--c-text-invert);
}

@media only screen and (max-width: 768px) {
    .tmpl_service_item,
    .tmpl_service_item:nth-child(even) {
        flex-direction: column !important;
        gap: 2rem;
        padding: 2rem;
    }
    .tmpl_service_item_image {
        flex: 0 0 auto;
        width: 100%;
    }
    .tmpl_service_item_heading {
        font-size: 2.2rem;
    }
    .tmpl_service_item_content p {
        font-size: 1.4rem;
    }
}

/* ----------------------------------------------------------------------------
   SECTION 02: 個別サービス 3列グリッド
   ---------------------------------------------------------------------------- */
.tmpl_individual_service_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 4rem;
}

@media only screen and (max-width: 768px) {
    .tmpl_individual_service_grid {
        grid-template-columns: 1fr;
    }
}

.tmpl_individual_service_card {
    display: block;
    padding: 2.5rem;
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.tmpl_individual_service_card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    border-color: var(--c-brand-800);
}

.tmpl_individual_service_card h3 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--c-text);
    margin: 0 0 1rem;
    line-height: 1.4;
}

.tmpl_individual_service_card p {
    font-size: 1.5rem;
    color: var(--c-text-subtle);
    line-height: 1.7;
    margin: 0;
}

/* ----------------------------------------------------------------------------
   SECTION 03: 比較表
   ---------------------------------------------------------------------------- */
.tmpl_comparison_table {
    margin-top: 4rem;
    border: 1px solid var(--c-line);
    background: var(--c-bg);
    border-radius: 4px;
    overflow: hidden;
}

.tmpl_comparison_row {
    display: flex;
    border-bottom: 1px solid var(--c-line);
}

.tmpl_comparison_row:last-child {
    border-bottom: none;
}

.tmpl_comparison_header {
    background: var(--c-brand-50);
    font-weight: 700;
}

.tmpl_comparison_cell {
    flex: 1;
    padding: 2rem;
    font-size: 1.5rem;
    line-height: 1.6;
    border-right: 1px solid var(--c-line);
}

.tmpl_comparison_cell:first-child {
    flex: 0 0 28%;
    background: color-mix(in srgb, var(--c-brand-50) 50%, white);
    font-weight: 500;
}

.tmpl_comparison_cell:last-child {
    border-right: none;
    flex: 1;
}

.tmpl_comparison_cell a {
    color: var(--c-brand-800);
    font-weight: 700;
    text-decoration: none;
}

.tmpl_comparison_cell a:hover {
    text-decoration: underline;
}

@media only screen and (max-width: 768px) {
    .tmpl_comparison_row {
        flex-direction: column;
    }
    .tmpl_comparison_cell {
        flex: 1 1 auto !important;
        border-right: none;
        border-bottom: 1px solid var(--c-line);
        padding: 1.5rem;
    }
    .tmpl_comparison_row:last-child .tmpl_comparison_cell:last-child {
        border-bottom: none;
    }
    .tmpl_comparison_header {
        display: none; /* SPでは見出し行を隠す（各セルでラベル兼任） */
    }
}

/* 薄緑背景セクション用（sec_tmpl_light） */
.sec_tmpl_light {
    background: var(--c-brand-50);
}


/* ==========================================================================
   修正22: サービス一覧ページ /services/ のセクション内幅制御
   ---------------------------------------------------------------------------
   各 .sec_services セクションに左右padding + 子要素を中央max-width制約
   で寄せる。セクション背景色は全幅のまま、中身だけが中央に。
   ========================================================================== */

.sec_services {
    padding: 10rem 2rem !important;
}

.sec_services > * {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* tmpl_service_list 等の内部要素も中央寄せで幅制限 */
.sec_services .tmpl_service_list,
.sec_services .tmpl_individual_service_grid,
.sec_services .tmpl_comparison_table {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width: 768px) {
    .sec_services {
        padding: 6rem 1.5rem !important;
    }
}

/* セクション見出しとリード文はテキスト中央寄せでリズムを作る */
.sec_services > .tmpl_heading2,
.sec_services > .tmpl_section_lead {
    text-align: center;
}

/* 見出しとリードの間に余白 */
.sec_services .tmpl_heading2 + .tmpl_section_lead,
.sec_services .wp-block-heading + .tmpl_section_lead {
    margin-top: 1rem;
    margin-bottom: 3rem;
}


/* ==========================================================================
   修正23: main_content とフッターの間に余白を確保
   ---------------------------------------------------------------------------
   base.css の .main_content { padding: 20px 0 0 } は下paddingが0で、
   コンテンツが短いページ（タグアーカイブで記事1件など）でフッターが
   すぐ上に来てしまい、サイドバーが食い込んで見える問題を解消。
   ========================================================================== */

main.main_content {
    padding-bottom: 8rem !important;
}

/* archive.php のサイドバーと記事リストの高さ差対策: 保険で下余白 */
.tmpl_archive_box {
    margin-bottom: 3rem;
}

@media only screen and (max-width: 768px) {
    main.main_content {
        padding-bottom: 5rem !important;
    }
    .tmpl_archive_box {
        margin-bottom: 2rem;
    }
}



/* ==========================================================================
   修正21: ニュース3タイプ対応（リンクなし／PDF／外部URL／通常）
   ---------------------------------------------------------------------------
   .tmpl_news_item--nolink : div要素、ホバーで透明度を落とさない
   .tmpl_news_item--pdf    : a要素、タイトル横に [PDF] バッジ
   .tmpl_news_item--external: a要素、タイトル横に [外部リンク] バッジ
   .tmpl_news_item--internal: 通常の記事詳細遷移
   ========================================================================== */

/* リンクなしアイテム: クリック不可っぽい見た目に */
.tmpl_news_item--nolink {
    cursor: default;
    background-image: none !important;
}

.tmpl_news_item--nolink:hover {
    background-color: transparent !important;
}

/* リンクなしアイテムの本文（一覧内で完結表示） */
.tmpl_news_item_body {
    flex: 0 0 100%;
    margin-top: 1rem;
    font-size: 1.5rem;
    line-height: 1.7;
    color: var(--c-text);
}

@media only screen and (max-width: 768px) {
    .tmpl_news_item_body {
        font-size: 1.3rem;
    }
}

/* PDF / 外部リンク バッジ */
.tmpl_news_badge {
    display: inline-block;
    margin-left: 0.8rem;
    padding: 0.2rem 0.8rem;
    font-size: 1.2rem;
    font-weight: 500;
    border-radius: 3px;
    vertical-align: middle;
    line-height: 1.4;
    letter-spacing: 0.05em;
}

.tmpl_news_badge--pdf {
    background: #d63056;
    color: #fff;
}

.tmpl_news_badge--external {
    background: var(--c-brand-50);
    color: var(--c-brand-800);
    border: 1px solid var(--c-brand-800);
}

@media only screen and (max-width: 768px) {
    .tmpl_news_badge {
        font-size: 1rem;
        padding: 0.1rem 0.6rem;
        margin-left: 0.5rem;
    }
}


/* ==========================================================================
   修正25: ブログ(post) / 導入事例(case) 記事本文の読みやすい幅制限
   ---------------------------------------------------------------------------
   single.php の article 要素に tmpl_single_article--narrow クラスを付与
   （post / case 限定）。親 .tmpl_inner (max-width:1240px) の85% ≒ 1054px
   に収めることで、1行の文字数を抑えて読みやすくする。
   ニュース(news) は短文が多いので対象外。SPでは 100%。
   ========================================================================== */

.tmpl_single_article--narrow {
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width: 768px) {
    .tmpl_single_article--narrow {
        max-width: 100%;
    }
}


/* ==========================================================================
   修正: 資料請求ページ専用 - フォーム上のイラスト＆余白調整
   ---------------------------------------------------------------------------
   components.css の .tmpl_form 系スタイルは home / contact / request の
   3ページで共通使用されている。資料請求ページでだけ、フォーム直前のテキスト
   とフォーム上部に配置されたイラスト（form_illust01/02.svg）が重なって
   読みづらいため、page-request スコープで該当装飾を打ち消す。

   - .tmpl_form::before / ::after の左右イラストを非表示
   - イラストを置くために確保していた margin-top / padding-top の余白も縮小
   ========================================================================== */
.page-request .tmpl_form::before,
.page-request .tmpl_form::after {
    display: none !important;
}

.page-request .tmpl_form {
    margin-top: 3rem !important;
    padding: 4rem 2rem 6rem !important;
}

@media only screen and (max-width: 768px) {
    .page-request .tmpl_form {
        margin-top: 3rem !important;
        padding: 2rem 2rem 3rem !important;
    }
}


/* ==========================================================================
   修正: .tmpl_form のbox-shadowを四方向に拡散
   ---------------------------------------------------------------------------
   元の `box-shadow: 3px 3px 0 rgba(55, 152, 96, .1)` は右下方向にだけオフセット
   する固定影（オフセット型シャドウ）で、左上に枠の輪郭が出ない。
   home/contact/request のフォーム3ページすべてで「枠が右と下にしかない」
   印象になっていたため、ぼかし付きの四方向シャドウに変更する。
   ========================================================================== */
.tmpl_form {
    box-shadow: 0 4px 24px rgba(55, 152, 96, .12) !important;
}


/* =========================================================
   ListFinder お問い合わせフォーム（#lf_form_div スコープ限定）
   ─ 提供CSSのデザインを踏襲しつつ、全セレクタを #lf_form_div 配下に限定。
     グローバルリセット / html / body 指定は使わない（テーマ崩れ防止）。
   ブランドグリーン #2E8B57 ／ 必須バッジ #ed8c1c
   ========================================================= */

/* フォント・色・行間はラッパーにのみ適用 */
#lf_form_div {
    font-family: 'Hiragino Kaku Gothic ProN', Meiryo, 'ＭＳ Ｐゴシック', Verdana, Roboto, 'Droid Sans', sans-serif;
    color: #333;
    line-height: 1.7;
    text-align: left;
}

/* ListFinder生成要素の最小リセット（スコープ内のみ） */
#lf_form_div table,
#lf_form_div tbody,
#lf_form_div tr,
#lf_form_div td,
#lf_form_div p,
#lf_form_div ul,
#lf_form_div li {
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-style: normal;
}
#lf_form_div li { list-style: none; }

/* フォーム全体エリア */
#lf_form_div .container {
    width: 760px;
    max-width: 100%;
    background: #fff;
    border: none;
    font-size: 16px;
    color: #333;
    margin: 0 auto;
    padding: 0 0 40px;
    text-align: left;
}
#lf_form_div .wrapper {
    width: 100%;
    margin: 0 auto;
    background: #fff;
}

/* 設問テーブルを縦積みレイアウトに */
#lf_form_div table.items {
    width: 100%;
    border: none;
    border-collapse: collapse;
}
#lf_form_div table.items tbody,
#lf_form_div table.items tr.item,
#lf_form_div table.items td {
    display: block;
    width: auto;
}
#lf_form_div tr.item { margin-bottom: 28px; }

#lf_form_div td.label {
    width: 100%;
    padding: 0 0 8px 0;
    color: #222;
    font-size: 17px;
    font-weight: bold;
    background: none;
    vertical-align: baseline;
}
#lf_form_div td.value {
    width: 100%;
    padding: 0;
    border-bottom: none;
    background: none;
}
#lf_form_div td.comment {
    width: 100%;
    font-size: 13px;
    padding: 6px 0 0 0;
    color: #888;
    border-bottom: none;
    background: none;
}
#lf_form_div span.label_name {
    padding-right: 6px;
    font-size: 90%;
    font-weight: bold;
    color: #555;
}
#lf_form_div p.value {
    font-size: 16px;
    padding: 4px 0;
}

/* 入力コントロール（スコープ内のみ） */
#lf_form_div input[type="text"],
#lf_form_div input[type="email"],
#lf_form_div input[type="tel"],
#lf_form_div textarea,
#lf_form_div select {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font-size: 16px;
    color: #333;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    background: #fff;
    outline: none;
}
#lf_form_div textarea { min-height: 180px; resize: vertical; }
#lf_form_div ::placeholder { color: #b5b5b5; }

#lf_form_div input[type="text"]:focus,
#lf_form_div input[type="email"]:focus,
#lf_form_div input[type="tel"]:focus,
#lf_form_div textarea:focus,
#lf_form_div select:focus {
    border-color: #2E8B57;
    box-shadow: 0 0 0 2px rgba(46, 139, 87, 0.15);
}

#lf_form_div input[type="checkbox"],
#lf_form_div input[type="radio"] {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    vertical-align: middle;
    accent-color: #2E8B57;
}

/* 必須バッジ（オレンジ） */
#lf_form_div span.required {
    float: none;
    display: inline-block;
    margin-left: 8px;
    padding: 3px 9px;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    background: #ed8c1c;
    border-radius: 4px;
    vertical-align: middle;
}
#lf_form_div span.required:after { content: "必須"; }
#lf_form_div p.required_msg {
    text-align: right;
    margin: 0 0 16px 0;
    font-size: 13px;
    font-weight: bold;
    color: #ed8c1c;
}
#lf_form_div p.label_mail {
    margin: 6px 0 2px 0;
    font-size: 13px;
    font-weight: bold;
    color: #888;
}

/* メッセージ */
#lf_form_div div.message {
    padding: 10px 14px;
    margin: 16px 0;
    font-size: 14px;
    font-weight: bold;
    color: #d9480f;
    background: #fff4e6;
    border-radius: 6px;
}
#lf_form_div div.finished-message {
    padding: 10px 14px;
    margin: 16px 0;
    font-size: 14px;
    font-weight: bold;
    color: #c92a2a;
    background: #fff0f0;
    border-radius: 6px;
}

/* 送信ボタン（グリーン） */
#lf_form_div div.button_area {
    width: 100%;
    margin: 30px auto 0 auto;
    background: none;
    padding: 10px 0;
    text-align: center;
}
#lf_form_div input[type="button"],
#lf_form_div input[type="submit"] {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background: #2E8B57;
    padding: 16px 60px;
    margin: 0 8px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}
#lf_form_div input[type="button"]:hover,
#lf_form_div input[type="submit"]:hover { background: #267349; }

/* スマートフォン */
@media screen and (max-width: 479px) {
    #lf_form_div .container { width: 100%; max-width: 100%; padding: 0 16px 32px; }
    #lf_form_div td.label { font-size: 16px; }
    #lf_form_div input[type="text"],
    #lf_form_div input[type="email"],
    #lf_form_div input[type="tel"],
    #lf_form_div textarea,
    #lf_form_div select { font-size: 16px; }
    #lf_form_div input[type="button"],
    #lf_form_div input[type="submit"] { width: 100%; padding: 16px 0; margin: 8px 0; }
}