/*
もう一度つくる：専用CSSの編集ガイド

Ctrl+Fで「01 メイン画像」「02 こんなお悩み」などを検索してください。
見出しの左にある矢印で、項目ごとに折りたためます。

01 メイン画像・タイトル    02 お悩み    03 復元の工程
04 サービス               05 用途例    06 私たちの強み
07 CONTACT                08 共通の横幅・余白調整

PCの基本設定 → タブレット・スマートフォン設定 → CONTACT → 共通調整
の順です。スマホの見た目は「スマートフォン用」も確認してください。
同じ指定が複数あるときは、条件に合う後ろの設定が優先される場合があります。

よく使う項目：
padding＝内側の余白 / margin＝外側の余白 / font-size＝文字サイズ
min-height＝最低の高さ / gap＝項目の間隔

ヘッダー・フッターの基本設定は css/common.css にあります。
今回はコメントのみを追加し、数値・順番・見た目の設定は変えていません。
*/



/* #region 00 共通設定
======================================== */
/* ページ全体の色 */
.reverse-page  {
    --navy: #061522;
    --ink: #111820;
    --muted: #49677a;
    --cyan:#00bfc4;
    color:var(--ink);
}

/* 本文へ移動する補助リンク */
.reverse-page .skip-link  {
    position:absolute;
    top:-80px;
    left:16px;
    z-index:200;
    background:#fff;
    padding:12px 20px;
}

/* 補助リンクを選択したとき */
.reverse-page .skip-link:focus  {
    top:8px;
}

/* キーボード操作時の選択枠 */
.reverse-page :focus-visible  {
    outline:3px solid #00a6a6;
    outline-offset:5px;
}

/* 大見出し・中見出しの共通書体 */
.reverse-page h1,.reverse-page h2  {
    font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
    font-weight:500;
    line-height: 1.4;
    font-size: clamp(28px, 2.5vw, 40px);
}

/* 中見出しの共通サイズ */
.reverse-page h2  {
    font-size:clamp(26px,2.8vw,40px);
    letter-spacing:.03em;
}

/* 英語の小見出し */
.reverse-page .eyebrow  {
    font-family: inherit;
    font-size: 12px;
    font-weight:700;
    letter-spacing: 0.18em;
    color:var(--muted);
}

/* 各セクションの共通の上下余白 */
.reverse-page .section-space  {
    padding: 75px 0 85px;
}

/* 見出しの下にある説明文 */
.reverse-page .section-description  {
    margin:14px 0 30px;
    font-size:14px;
    line-height:1.9;
    letter-spacing:.04em;
    color: #44515c;
}

/* 見出しと右側の英語の配置 */
.reverse-page .section-heading  {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    margin-bottom:22px;
}

/* 見出しの右側の英語 */
.reverse-page .section-heading > .eyebrow  {
    flex-shrink:0;
    font-size:10px;
}

/* 未設定リンクの表示 */
.reverse-page .pending-link  {
    cursor:default;
}


/* #endregion */

/* #region 01 メイン画像・もう一度つくる
======================================== */
/* メイン画像エリア全体：最低の高さ・背景色 */
.reverse-page .reverse-hero  {
    position:relative;
    overflow:hidden;
    min-height: 560px;
    background: #061522;
    color:#fff;
}

/* 背景画像：大きさ・切り抜き方 */
.reverse-page .hero-image,.reverse-page .contact-image  {
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* メイン画像に重ねる暗いグラデーション */
.reverse-page .reverse-hero::after  {
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(90deg, rgba(3, 16, 28, 0.92) 0%, rgba(3, 16, 28, 0.70) 32%, rgba(3, 16, 28, 0.10) 75%);
}

/* メイン文字エリア：padding-top＝上余白、padding-bottom＝下余白 */
.reverse-page .hero-content  {
    position:relative;
    z-index:1;
    padding-top:50px;
    padding-bottom:60px;
    width: min(1500px, calc(100% - 80px));
    min-height: 560px;
}

/* HOMEから始まるパンくず：文字・下の余白 */
.reverse-page .breadcrumbs  {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    font-size:11px;
    letter-spacing: 0.08em;
    margin-bottom: 55px;
    color: rgba(255, 255, 255, 0.75);
}

/* 「もう一度つくる」：文字サイズ・行間 */
.reverse-page h1  {
    font-size: clamp(44px, 5vw, 72px);
    letter-spacing: normal;
    font-family: "Yu Mincho", "YuMincho", serif;
    line-height: 1.25;
    margin: 0 0 10px;
}

/* 「リバースエンジニアリング／基板復元」 */
.reverse-page .hero-subtitle  {
    font-family: inherit;
    font-size: 22px;
    letter-spacing: normal;
    font-weight: 600;
}

/* タイトル下の青〜緑の線：幅・太さ・上下余白 */
.reverse-page .accent-line  {
    width: 150px;
    height:3px;
    margin:24px 0;
    background: linear-gradient(90deg, #0086d7 0%, #00a6a6 55%, #63b76c 100%);
}

/* 「図面がない基板も…」の説明文 */
.reverse-page .hero-description  {
    font-size: 16px;
    line-height: 1.9;
    letter-spacing: 0.03em;
}

/* メイン左下の英語メッセージ */
.reverse-page .hero-tagline  {
    color: rgba(255, 255, 255, 0.75);
    margin-top:18px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.15em;
}

/* メイン右下の英語メッセージ */
.reverse-page .hero-keywords  {
    position:absolute;
    bottom: 45px;
    right:5%;
    z-index:1;
    letter-spacing:.15em;
    font-family: inherit;
    font-size: 11px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
}


/* #endregion */

/* #region 02 こんなお悩み、ありませんか？
======================================== */
/* お悩みエリア全体：上下余白・背景 */
.reverse-page .challenges  {
    padding:36px 0;
    /* 背景写真：右側に人物、左側に明るい余白 */
    background-image:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.90) 0%,
            rgba(255, 255, 255, 0.80) 60%,
            rgba(255, 255, 255, 0.55) 100%
        ),
        url("../images/reverse-engineering/未来型エンジニアリング空間.png.webp");
    background-position: center, right center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #f0f6fa;
    border-bottom:1px solid #e5edf2;
}

/* お悩みの見出しとリストの配置 */
.reverse-page .challenges-inner  {
    display:grid;
    grid-template-columns:280px 1fr;
    align-items:center;
    gap:35px;
}

/* 「こんなお悩み、ありませんか？」 */
.reverse-page .challenges h2  {
    font-size:32px;
    line-height:1.4;
    margin-bottom:14px;
}

/* お悩みリスト：列数・項目間隔・文字 */
.reverse-page .challenge-list  {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px 28px;
    list-style:none;
    font-size:14px;
    font-weight:600;
}

/* お悩み1項目の配置 */
.reverse-page .challenge-list li  {
    display:flex;
    align-items:flex-start;
    gap:12px;
}

/* お悩みのチェックマーク */
.reverse-page .challenge-list li::before  {
    content:"✓";
    flex:0 0 24px;
    height:24px;
    border-radius:50%;
    color:#00d0ce;
    background:var(--navy);
    text-align:center;
    line-height:24px;
}


/* #endregion */

/* #region 03 現物基板から、再びつくれる状態へ・5つの工程
======================================== */
/* 復元の工程エリア：背景 */
.reverse-page .approach  {
    background:linear-gradient(145deg,#fff 65%,#eff5f8);
}

/* 5つの工程：列数・間隔 */
.reverse-page .process-list  {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:28px;
    list-style:none;
}

/* 工程1つの枠・配置 */
.reverse-page .process-list li  {
    position:relative;
    min-width:0;
}

/* 工程間の矢印 */
.reverse-page .process-list li:not(:last-child)::after  {
    content:"›";
    position:absolute;
    top:100px;
    right:-21px;
    font-size:28px;
    color:#637d91;
}

/* 工程名の濃紺の帯：背景・内側余白 */
.reverse-page .process-title  {
    text-align:center;
    color:#fff;
    background:linear-gradient(110deg,#031522 75%,#065367);
    padding:13px 8px;
    border-top:3px solid #6a9bb2;
}

/* 工程番号01〜05 */
.reverse-page .process-title span  {
    font-family:Georgia,serif;
    font-size:20px;
}

/* 工程名の文字 */
.reverse-page .process-title h3  {
    font-size:16px;
}

/* 工程の画像：サイズ・切り抜き方 */
.reverse-page .process-list img  {
    width:100%;
    aspect-ratio:1.55;
    object-fit:cover;
}

/* 各工程の説明文 */
.reverse-page .process-list p  {
    font-size:12px;
    padding:14px 4px 0;
}


/* #endregion */

/* #region 04 6つのサービス
======================================== */
/* 6つのサービス：列数・カード間隔 */
.reverse-page .service-grid  {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap: 24px;
}

/* サービスカード全体：画像と本文の比率・最低の高さ */
.reverse-page .service-card  {
    display:grid;
    grid-template-columns:35% 1fr;
    min-height:246px;
    background:#fff;
    box-shadow:0 2px 13px #0d345014;
    border:1px solid #edf2f5;
}

/* サービスカードの画像 */
.reverse-page .service-card > img  {
    width:100%;
    height:100%;
    object-fit:cover;
}

/* サービスカード本文：内側余白 */
.reverse-page .service-card > div  {
    padding: 28px 30px 32px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

/* サービス番号01〜06 */
.reverse-page .service-number  {
    font: 700 13px/1.8 sans-serif;
    color: #0086d7;
    letter-spacing: 0.12em;
    margin-bottom: 12px;
}

/* 「回路解析」などのサービス名 */
.reverse-page .service-card h3  {
    font-size: 24px;
    line-height:1.5;
    margin: 0 0 5px;
}

/* サービス名の下の英語 */
.reverse-page .service-card .eyebrow  {
    font-size: 11px;
    letter-spacing: 0.14em;
    margin-bottom: 22px;
    overflow-wrap:anywhere;
    color: #758493;
}

/* サービスの説明文 */
.reverse-page .service-card div > p:not(.eyebrow)  {
    font-size: 14px;
    line-height: 2;
    margin-bottom:15px;
    color: #44515c;
}

/* 「詳しく見る」の表示 */
.reverse-page .detail-pending  {
    font-size:12px;
    font-weight:700;
    margin-top:auto;
}

/* 「詳しく見る」の矢印 */
.reverse-page .detail-pending > span  {
    margin-left:12px;
}

/* 「リンク準備中」の文字 */
.reverse-page .detail-pending small  {
    display:block;
    font-size:9px;
    font-weight:400;
    color:#617589;
}


/* #endregion */

/* #region 05 対応可能な基板・用途例
======================================== */
/* 用途例エリア全体：下の余白 */
.reverse-page .applications  {
    padding-bottom:42px;
}

/* 「対応可能な基板・用途例」 */
.reverse-page .applications h2  {
    margin-bottom:22px;
}

/* 用途例一覧：列数・間隔 */
.reverse-page .application-grid  {
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:22px;
}

/* 用途例の画像 */
.reverse-page .application-grid img  {
    width:100%;
    aspect-ratio:1.55;
    object-fit:cover;
    margin-bottom:10px;
}

/* 「産業機械・工作機械」などの用途名 */
.reverse-page .application-grid h3  {
    font-size:14px;
    margin-bottom:5px;
}

/* 用途例の説明文 */
.reverse-page .application-grid p  {
    font-size:12px;
    line-height:1.8;
}


/* #endregion */

/* #region 06 私たちの強み
======================================== */
/* 強みエリア全体：上下余白・背景 */
.reverse-page .strengths  {
    padding: 75px 0 85px;
    background: #fff;
}

/* 「私たちの強み」見出し下の余白 */
.reverse-page .strengths .section-heading  {
    margin-bottom:22px;
}

/* 強み一覧：列数・間隔 */
.reverse-page .strength-grid  {
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    list-style:none;
}

/* 強み1項目：内側余白・区切り線・最低の高さ */
.reverse-page .strength-grid li  {
    text-align:center;
    padding: 10px 12px;
    border-right:1px solid #d2deea;
    min-height: 150px;
}

/* 強みの最後の項目の区切り線 */
.reverse-page .strength-grid li:last-child  {
    border:0;
}

/* 強みのアイコン：サイズ・下の余白 */
.reverse-page .strength-grid img  {
    width: 56px;
    height: 56px;
    object-fit:contain;
    margin: 0 auto 22px;
}

/* 強みの説明文 */
.reverse-page .strength-grid p  {
    font-size: 14px;
    font-weight: 700;
    color: #263849;
}


/* #endregion */

/* #region 画面幅による設定
   この中の設定は、指定した画面幅でのみ適用されます。
======================================== */
@media(min-width:1101px) and (max-width:1450px)  {
}


/* #endregion */

/* #region タブレット用（幅1100px以下）
   この中の設定は、指定した画面幅でのみ適用されます。
======================================== */
@media(max-width:1100px)  {
    /* お悩みの見出しとリストの配置 */
    .reverse-page .challenges-inner  {
        grid-template-columns:220px 1fr;
        gap:20px;
    }

    /* お悩みリスト：列数・項目間隔・文字 */
    .reverse-page .challenge-list  {
        font-size:12px;
        gap:15px;
    }

    /* 6つのサービス：列数・カード間隔 */
    .reverse-page .service-grid  {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    /* 用途例一覧：列数・間隔 */
    .reverse-page .application-grid  {
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    /* 見出しと右側の英語の配置 */
    .reverse-page .section-heading  {
        align-items:flex-start;
    }

}


/* #endregion */

/* #region スマートフォン用（幅768px以下）
   この中の設定は、指定した画面幅でのみ適用されます。
======================================== */
@media(max-width:768px)  {
    /* 各セクションの共通の上下余白 */
    .reverse-page .section-space  {
        padding-top:34px;
    }

    /* メイン画像エリア全体：最低の高さ・背景色 */
    .reverse-page .reverse-hero  {
        min-height:420px;
    }

    /* メイン画像の表示位置 */
    .reverse-page .hero-image  {
        object-position:65% center;
    }

    /* メイン画像に重ねる暗いグラデーション */
    .reverse-page .reverse-hero::after  {
        background:linear-gradient(90deg,#00101aeb,#00101a99);
    }

    /* メイン文字エリア：padding-top＝上余白、padding-bottom＝下余白 */
    .reverse-page .hero-content  {
        padding-top:18px;
    }

    /* HOMEから始まるパンくず：文字・下の余白 */
    .reverse-page .breadcrumbs  {
        font-size:9px;
        margin-bottom:26px;
    }

    /* 「もう一度つくる」：文字サイズ・行間 */
    .reverse-page h1  {
        font-size:40px;
    }

    /* 「リバースエンジニアリング／基板復元」 */
    .reverse-page .hero-subtitle  {
        font-size:15px;
    }

    /* 「図面がない基板も…」の説明文 */
    .reverse-page .hero-description  {
        font-size:16px;
    }

    /* メイン右下の英語メッセージ */
    .reverse-page .hero-keywords  {
        display:none;
    }

    /* メイン左下の英語メッセージ */
    .reverse-page .hero-tagline  {
        font-size:8px;
    }

    /* お悩みの見出しとリストの配置 */
    .reverse-page .challenges-inner  {
        grid-template-columns:1fr;
        gap:24px;
    }

    /* 「こんなお悩み、ありませんか？」 */
    .reverse-page .challenges h2  {
        font-size:28px;
    }

    /* お悩みリスト：列数・項目間隔・文字 */
    .reverse-page .challenge-list  {
        gap:15px;
        grid-template-columns:1fr;
        font-size:14px;
    }

    /* 見出しの下にある説明文 */
    .reverse-page .section-description  {
        font-size:13px;
    }

    /* PC用の改行の表示・非表示 */
    .reverse-page .desktop-break  {
        display:none;
    }

    /* 5つの工程：列数・間隔 */
    .reverse-page .process-list  {
        grid-template-columns:1fr;
        gap:28px;
    }

    /* 工程1つの枠・配置 */
    .reverse-page .process-list li  {
        display:grid;
        grid-template-columns:120px 1fr;
        background:#f2f6f9;
    }

    /* 工程名の濃紺の帯：背景・内側余白 */
    .reverse-page .process-title  {
        grid-column:1;
        display:flex;
        flex-direction:column;
        justify-content:center;
    }

    /* 工程名の文字 */
    .reverse-page .process-title h3  {
        font-size:14px;
    }

    /* 工程の画像：サイズ・切り抜き方 */
    .reverse-page .process-list img  {
        grid-column:2;
        height:120px;
        aspect-ratio:auto;
    }

    /* 各工程の説明文 */
    .reverse-page .process-list p  {
        grid-column:1/-1;
        padding:12px 16px;
        font-size:13px;
    }

    /* 工程説明文の改行 */
    .reverse-page .process-list p br  {
        display:none;
    }

    /* 工程間の矢印 */
    .reverse-page .process-list li:not(:last-child)::after  {
        top:auto;
        bottom:-29px;
        right:50%;
        transform:translateX(50%) rotate(90deg);
    }

    /* 見出しと右側の英語の配置 */
    .reverse-page .section-heading  {
        display:block;
    }

    /* 見出しの右側の英語 */
    .reverse-page .section-heading > .eyebrow  {
        margin-top:10px;
    }

    /* 6つのサービス：列数・カード間隔 */
    .reverse-page .service-grid  {
        grid-template-columns:1fr;
        gap:18px;
    }

    /* サービスカード全体：画像と本文の比率・最低の高さ */
    .reverse-page .service-card  {
        min-height:230px;
    }

    /* サービスカード本文：内側余白 */
    .reverse-page .service-card > div  {
        padding:18px;
    }

    /* サービスの説明文 */
    .reverse-page .service-card div > p:not(.eyebrow)  {
        font-size:13px;
    }

    /* 用途例一覧：列数・間隔 */
    .reverse-page .application-grid  {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:24px 16px;
    }

    /* 「産業機械・工作機械」などの用途名 */
    .reverse-page .application-grid h3  {
        font-size:13px;
    }

    /* 強み一覧：列数・間隔 */
    .reverse-page .strength-grid  {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:26px 0;
    }

    /* 強みの偶数項目の区切り線 */
    .reverse-page .strength-grid li:nth-child(even)  {
        border-right:0;
    }

    /* 強みの説明文 */
    .reverse-page .strength-grid p  {
        font-size:13px;
    }

}


/* #endregion */

/* #region 小さいスマートフォン用（幅390px以下）
   この中の設定は、指定した画面幅でのみ適用されます。
======================================== */
@media(max-width:390px)  {
    /* 「もう一度つくる」：文字サイズ・行間 */
    .reverse-page h1  {
        font-size:34px;
    }

}


/* #endregion */

/* #region 動きを減らす設定
   この中の設定は、指定した画面幅でのみ適用されます。
======================================== */
@media(prefers-reduced-motion:reduce)  {
    /* 動きに配慮する設定：スクロール */
    html  {
        scroll-behavior:auto;
    }

    /* 動きに配慮する設定：アニメーション */
    .reverse-page *  {
        transition:none;
    }

}


/* #endregion */

/* #region 07 CONTACT・お問い合わせ
======================================== */
/* お問い合わせエリア全体：高さ・上下余白・背景画像 */
.reverse-contact  {
    position: relative;
    width: 100%;
    min-height: 400px;
    padding: 65px 0;
    box-sizing: border-box;
    background: linear-gradient( 90deg, rgba(0, 17, 34, 0.72) 0%, rgba(0, 25, 46, 0.30) 55%, rgba(0, 17, 34, 0.18) 100% ), url("../images/about/philosophy.png.webp") center center / cover no-repeat;
    color: #ffffff;
}


/* お問い合わせの本文横幅・左右の配置 */
.reverse-contact .contact-cta-inner  {
    position: relative;
    z-index: 1;
    width: calc(100% - 80px);
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}


/* お問い合わせ左側の本文幅 */
.reverse-contact .contact-cta-content  {
    max-width: 780px;
    flex: 1;
}

/* CONTACTの小見出し */
.reverse-contact-label  {
    margin: 0 0 18px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
}

/* 「お気軽にご相談ください」の見出し */
.reverse-contact .contact-cta-title  {
    margin: 0 0 22px;
    font-family: "Yu Mincho", "YuMincho", serif;
    font-size: clamp(26px, 2.6vw, 38px);
    font-weight: 500;
    line-height: 1.55;
    color: #ffffff;
}

/* お問い合わせの説明文 */
.reverse-contact .contact-cta-text  {
    margin: 0 0 32px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.9;
    color: #ffffff;
}


/* 2つのボタンの配置・間隔 */
.reverse-contact-buttons  {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* お問い合わせボタン共通：高さ・余白・文字 */
.reverse-contact-btn  {
    min-height: 60px;
    padding: 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.8);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* 白いお問い合わせボタン */
.reverse-contact-btn-white  {
    background: #ffffff;
    color: #102235;
}

/* 白いボタンにマウスを重ねたとき */
.reverse-contact-btn-white:hover  {
    background: #e7f0f6;
    color: #102235;
}

/* 濃紺の相談ボタン */
.reverse-contact-btn-dark  {
    background: rgba(0, 13, 27, 0.78);
    color: #ffffff;
}

/* 濃紺のボタンにマウスを重ねたとき */
.reverse-contact-btn-dark:hover  {
    background: rgba(0, 45, 75, 0.85);
    color: #ffffff;
}


/* お問い合わせ右側の英語 */
.reverse-contact-message  {
    flex-shrink: 0;
    margin: 0;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 0.16em;
}


/* #endregion */

/* #region CONTACTのスマートフォン用（幅767px以下）
   この中の設定は、指定した画面幅でのみ適用されます。
======================================== */
@media (max-width: 767px)  {
    /* お問い合わせエリア全体：高さ・上下余白・背景画像 */
    .reverse-contact  {
        min-height: auto;
        padding: 65px 0;
        background-position: 62% center;
    }

    /* お問い合わせの本文横幅・左右の配置 */
    .reverse-contact .contact-cta-inner  {
        width: calc(100% - 40px);
        display: block;
    }

    /* 「お気軽にご相談ください」の見出し */
    .reverse-contact .contact-cta-title  {
        font-size: 27px;
    }

    /* お問い合わせの説明文 */
    .reverse-contact .contact-cta-text  {
        font-size: 14px;
    }

    /* 2つのボタンの配置・間隔 */
    .reverse-contact-buttons  {
        flex-direction: column;
    }

    /* お問い合わせボタン共通：高さ・余白・文字 */
    .reverse-contact-btn  {
        width: 100%;
        min-height: 56px;
    }

    /* お問い合わせ右側の英語 */
    .reverse-contact-message  {
        margin-top: 35px;
        font-size: 10px;
    }

}


/* #endregion */

/* #region 08 全体の横幅・サービスと強みの共通調整
======================================== */
/* ページ共通の本文横幅・左右余白 */
.reverse-page .container  {
    width: min(1500px, calc(100% - 80px));
}

/* サービスエリア全体：上下余白・背景 */
.reverse-page .services  {
    padding: 90px 0 110px;
    background: #f5f7f9;
}

/* サービス見出し下の余白 */
.reverse-page .services .section-heading  {
    margin-bottom: 50px;
}

/* サービス・強みの見出しサイズ */
.reverse-page .services h2, .reverse-page .strengths h2  {
    font-size: clamp(28px, 2.8vw, 42px);
}

/* 強みエリアの本文横幅 */
.reverse-page .strengths .container  {
    width: min(1440px, calc(100% - 80px));
}

/* 「私たちの強み」見出し下の余白 */
.reverse-page .strengths .section-heading  {
    margin-bottom: 45px;
}


/* #endregion */

/* #region スマートフォン用：共通デザインの最終調整（幅768px以下）
   この中の設定は、指定した画面幅でのみ適用されます。
======================================== */
@media (max-width: 768px)  {
    /* ページ共通の本文横幅・左右余白 */
    .reverse-page .container  {
        width: calc(100% - 40px);
    }

    /* メイン画像エリア全体：最低の高さ・背景色 */
    .reverse-page .reverse-hero  {
        min-height: 560px;
    }

    /* メイン文字エリア：padding-top＝上余白、padding-bottom＝下余白 */
    .reverse-page .hero-content  {
        min-height: 560px;
        padding: 25px 0 45px;
    }

    /* HOMEから始まるパンくず：文字・下の余白 */
    .reverse-page .breadcrumbs  {
        margin-bottom: 60px;
        font-size: 10px;
    }

    /* 「もう一度つくる」：文字サイズ・行間 */
    .reverse-page h1  {
        font-size: 44px;
    }

    /* 「リバースエンジニアリング／基板復元」 */
    .reverse-page .hero-subtitle  {
        font-size: 17px;
    }

    /* 「図面がない基板も…」の説明文 */
    .reverse-page .hero-description  {
        font-size: 14px;
    }

    /* メイン左下の英語メッセージ */
    .reverse-page .hero-tagline  {
        font-size: 11px;
    }

    /* 各セクションの見出しサイズ */
    .reverse-page h2, .reverse-page .services h2, .reverse-page .strengths h2  {
        font-size: 28px;
    }

    /* 各セクションの共通の上下余白 */
    .reverse-page .section-space  {
        padding: 55px 0 65px;
    }

    /* サービスエリア全体：上下余白・背景 */
    .reverse-page .services  {
        padding: 60px 0 75px;
    }

    /* サービス見出し下の余白 */
    .reverse-page .services .section-heading  {
        margin-bottom: 30px;
    }

    /* サービスカード本文：内側余白 */
    .reverse-page .service-card > div  {
        padding: 24px;
    }

    /* 「回路解析」などのサービス名 */
    .reverse-page .service-card h3  {
        font-size: 21px;
    }

    /* 強みエリア全体：上下余白・背景 */
    .reverse-page .strengths  {
        padding: 60px 0 70px;
    }

    /* 強みエリアの本文横幅 */
    .reverse-page .strengths .container  {
        width: calc(100% - 40px);
    }

    /* 「私たちの強み」見出し下の余白 */
    .reverse-page .strengths .section-heading  {
        margin-bottom: 30px;
    }

    /* 強み1項目：内側余白・区切り線・最低の高さ */
    .reverse-page .strength-grid li  {
        min-height: 145px;
    }

    /* 強みのアイコン：サイズ・下の余白 */
    .reverse-page .strength-grid img  {
        width: 48px;
        height: 48px;
        margin-bottom: 15px;
    }

    /* 強みの説明文 */
    .reverse-page .strength-grid p  {
        font-size: 12px;
    }

}


/* #endregion */