* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: #ffffff;
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    overflow-x: hidden;
    background: transparent;
}

/* SP専用改行ユーティリティ */
.sp-only {
    display: none;
}

@media (max-width: 767px) {
    .sp-only {
        display: block;
    }
}

/* =====================
   FV Section (採用支援)
   ===================== */
.recruit-fv {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

/* 背景画像 */
.recruit-fv__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.recruit-fv__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 20% center;
    display: block;
}

@media (min-width: 768px) {
    .recruit-fv__bg-img {
        object-position: center center;
    }
}

/* 暗めのオーバーレイ */
.recruit-fv__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
}

/* コンテンツ */
.recruit-fv__content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    padding-top: 20px;
    padding-bottom: 60px;
}

@media (min-width: 768px) {
    .recruit-fv__content {
        padding: 0 48px;
        padding-top: 24px;
        padding-bottom: 80px;
    }
}

/* サブタイトル帯 + キャッチ全体を下へオフセット */
.recruit-fv__catch-group {
    margin-top: 200px;
}

@media (max-width: 767px) {
    .recruit-fv__catch-group {
        margin-top: 120px;
    }
}

/* サブタイトル帯：見出しと同幅、左端揃え・右端揃え */
.recruit-fv__subtitle-band {
    position: relative;
    margin-bottom: 20px;
    /* 帯の幅 = コンテンツ幅いっぱい（見出しと同じ） */
    width: 100%;
    overflow: hidden;
}

@media (min-width: 768px) {
    .recruit-fv__subtitle-band {
        margin-bottom: 24px;
        width: calc(100% * 2 / 3);
    }

    .recruit-fv {
        max-height: 930px;
    }
}

.recruit-fv__subtitle {
    display: block;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0.06em;
    padding: 6px 0 6px 8px;
    white-space: nowrap;
    /* 背景：左端白→右端（見出し右端）で透明に */
    background: linear-gradient(
        to right,
        #ffffff  0%,
        #ffffff  50%,
        rgba(255,255,255,0.85) 62%,
        rgba(255,255,255,0.65) 72%,
        rgba(255,255,255,0.4)  82%,
        rgba(255,255,255,0.15) 92%,
        rgba(255,255,255,0.0)  100%
    );
}

@media (min-width: 768px) {
    .recruit-fv__subtitle {
        font-size: 20px;
        padding: 8px 0 8px 8px;
    }
}

/* メインキャッチコピー */
.recruit-fv__heading {
    font-family: 'Noto Serif JP', serif;
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    line-height: 1.5;
    letter-spacing: 0.04em;
    margin-bottom: 24px;
}

.recruit-fv__heading-em {
    font-style: normal;
    display: inline-block;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .recruit-fv__heading {
        font-size: 45px;
        margin-bottom: 28px;
    }
}

/* サブコピー */
.recruit-fv__desc {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #fff;
    line-height: 1.9;
    letter-spacing: 0.04em;
}

@media (min-width: 768px) {
    .recruit-fv__desc {
        font-size: 22px;
    }
}

/* CTAエリア */
.recruit-fv__cta {
    margin-top: clamp(60px, 12vh, 120px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.recruit-fv__cta-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.06em;
    margin-bottom: 20px;
    text-align: center;
}

@media (min-width: 768px) {
    .recruit-fv__cta-text {
        font-size: 18px;
        font-weight: 400;
        margin-bottom: 24px;
    }
}

.recruit-fv__cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 240px;
    padding: 16px 40px;
    background-color: #1e2a4a;
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-decoration: none;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 60px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
}

.recruit-fv__cta-btn:hover {
    background-color: #2c3d6b;
    border-color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 768px) {
    .recruit-fv__cta-btn {
        min-width: 280px;
        padding: 18px 48px;
        font-size: 18px;
    }
}

/* SP 微調整 */
@media (max-width: 767px) {

    /* --- FV：背景画像をブラウザ幅に合わせて伸縮 --- */
    .recruit-fv {
        min-height: 0;          /* 100vh を解除 */
        display: grid;          /* grid 重ね合わせで高さを自動決定 */
        grid-template: 1fr / 1fr;
    }

    /* bg と content を同じセルに重ねる */
    .recruit-fv__bg,
    .recruit-fv__content {
        grid-area: 1 / 1;
    }

    /* 背景をフロー要素に戻し、画像の比率で高さを決める */
    .recruit-fv__bg {
        position: relative;
    }

    .recruit-fv__bg-img {
        width: 100%;
        height: auto;           /* 幅に比例して伸縮 */
        min-height: 100%;       /* コンテンツが長い場合は引き伸ばし */
        object-fit: cover;      /* 引き伸ばし時も破綻しない */
    }

    /* オーバーレイは bg 内で絶対配置のまま */
    .recruit-fv__overlay {
        position: absolute;
        inset: 0;
    }

    /* コンテンツ：左右 20px で収める */
    .recruit-fv__content {
        padding: 16px 20px 48px;
        min-width: 0;           /* grid 内の溢れ防止 */
        overflow: hidden;
    }

    .recruit-fv__heading-em {
        white-space: normal;    /* 長い見出しの折り返しを許可 */
    }

    .recruit-fv__heading {
        font-size: 22px;
    }

    .recruit-fv__desc br {
        display: none;
    }

    .recruit-fv__cta {
        margin-top: 40px;
    }
}

/* =====================
   Problem セクション
   ===================== */
.problem {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: 100px;
}

/* 背景画像（左右2枚、上端から50px下げて配置）
   左半分に bg_problem_left.jpg、右半分に bg_problem_right.jpg を配置し、
   それぞれブラウザの左端・右端側に接するようにする。 */
.problem__bg {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    display: flex;
    justify-content: space-between;
}

.problem__bg-left,
.problem__bg-right {
    width: 46%;
    height: 100%;
    overflow: hidden;
}

.problem__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    display: block;
}

/* コンテンツ */
.problem__inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding: 0px 20px 20px;
}

@media (min-width: 768px) {
    .problem__inner {
        padding: 80px 48px 100px;
    }
}

/* Problem ラベル */
.problem__label {
    font-family: Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #0071bc;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}

@media (min-width: 768px) {
    .problem__label {
        font-size: 36px;
        margin-bottom: 16px;
    }
}

/* メイン見出し */
.problem__heading {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: 0.04em;
    line-height: 1.5;
    margin-bottom: 12px;
}

@media (min-width: 768px) {
    .problem__heading {
        font-size: 42px;
        margin-bottom: 40px;
    }
}

/* 吹き出しグリッド */
.problem__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: 540px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .problem__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        max-width: 860px;
    }
}

@media (min-width: 1024px) {
    .problem__grid {
        gap: 10px;
        /* 列幅を吹き出し画像の最大幅(240px)×3列+gapぶんに合わせ、
           センタリングによる余分な余白が生まれないようにする */
        max-width: 740px;
    }
}

.problem__bubble {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.problem__bubble.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.problem__bubble img {
    width: 100%;
    /* width:768px時のサイズを従来(280px)の2/3に縮小 */
    max-width: 187px;
    height: auto;
    display: block;
}

/* PC時のみ吹き出し画像の最大サイズを少し小さくする */
@media (min-width: 1024px) {
    .problem__bubble img {
        max-width: 240px;
    }
}

/* =====================
   Problem セクション（SP専用レイアウト）
   人物写真1枚＋吹き出し3個を1ブロックとし、男性→女性の縦2ブロック構成にする。
   PC/タブレットでは非表示、代わりに上記の .problem__bg / .problem__grid を表示する。
   ===================== */
.problem__mobile {
    display: none;
}

@media (max-width: 767px) {
    .problem__bg,
    .problem__grid {
        display: none;
    }

    .problem__mobile {
        display: block;
    }
}

.problem__mobile-block {
    position: relative;
    overflow: hidden;
}

.problem__mobile-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
}

/* 男性ブロック：写真をさらに左へ100pxずらす */
.problem__mobile-block--man .problem__mobile-bg {
    left: -100px;
}

/* 女性ブロック：写真をさらに右へ100px＋50pxずらす */
.problem__mobile-block--woman .problem__mobile-bg {
    right: -150px;
}

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

/* 男性ブロック：写真は左寄せで表示し、右側の余白に吹き出しを配置 */
.problem__mobile-block--man .problem__mobile-bg-img {
    object-position: left bottom;
}

/* 女性ブロック：写真は右寄せで表示し、左側の余白に吹き出しを配置 */
.problem__mobile-block--woman .problem__mobile-bg-img {
    object-position: right bottom;
}

.problem__mobile-bubbles {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px 20px;
}

.problem__mobile-block--man .problem__mobile-bubbles {
    align-items: flex-end;
}

.problem__mobile-block--woman .problem__mobile-bubbles {
    align-items: flex-start;
}

.problem__mobile-bubbles .problem__bubble img {
    max-width: 190px;
}

/* hukidashi04 のみ、ほんの少しだけ大きく表示 */
.problem__mobile-bubbles .problem__bubble img[src*="hukidashi04.png"] {
    max-width: 205px;
}

/* hukidashi05 のみ、ほんの少しだけ大きく表示（さらに一段階拡大）＋上へ累計20px移動 */
.problem__mobile-bubbles .problem__bubble img[src*="hukidashi05.png"] {
    max-width: 215px;
    transform: translateY(-20px);
}

/* hukidashi01 のみ、左へ40px→右へ50px（差し引き右へ10px）移動 */
.problem__mobile-bubbles .problem__bubble img[src*="hukidashi01.png"] {
    transform: translateX(10px);
}

/* hukidashi02 のみ、さらに左へ10px移動＋ほんの少しだけ大きく表示 */
.problem__mobile-bubbles .problem__bubble img[src*="hukidashi02.png"] {
    max-width: 205px;
    transform: translateX(20px);
}

/* hukidashi06 のみ、右へ16px移動＋ほんの少しだけ小さく表示 */
.problem__mobile-bubbles .problem__bubble img[src*="hukidashi06.png"] {
    max-width: 175px;
    transform: translateX(16px);
}

/* hukidashi03 のみ、さらに上へ10px移動 */
.problem__mobile-bubbles .problem__bubble img[src*="hukidashi03.png"] {
    transform: translateY(-10px);
}

/* =====================
   Strong セクション
   ===================== */
.strong {
    background: #f0f0f0;
    padding: 60px 20px 64px;
}

@media (min-width: 768px) {
    .strong {
        padding: 80px 48px 88px;
    }
}

.strong__inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

/* Strong ラベル */
.strong__label {
    font-family: Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #0071bc;
    letter-spacing: 0.06em;
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .strong__label {
        font-size: 36px;
        margin-bottom: 20px;
    }
}

/* 社名 */
.strong__company {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

@media (min-width: 768px) {
    .strong__company {
        font-size: 28px;
        margin-bottom: 5px;
    }
}

/* メイン見出し */
.strong__heading {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0.04em;
    line-height: 1.5;
    margin-bottom: 16px;
}

.strong__heading-num {
    font-size: 1.4em;
    font-weight: 700;
    color: #ff0000;
}

@media (min-width: 768px) {
    .strong__heading {
        font-size: 32px;
        margin-bottom: 20px;
    }
}

/* サブテキスト */
.strong__sub {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #1a1a1a;
    letter-spacing: 0.04em;
    margin-bottom: 36px;
}

@media (min-width: 768px) {
    .strong__sub {
        font-size: 22px;
        margin-bottom: 48px;
    }
}

/* カードグリッド */
.strong__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    justify-items: center;
}

@media (min-width: 768px) {
    .strong__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        justify-items: stretch;
    }
}

/* 個別カード */
.strong__card {
    position: relative;
    background: #fff;
    border: 2px solid #1e3a6d;
    border-radius: 12px;
    padding: 32px 14px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 200px;
    aspect-ratio: 1 / 1;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.08);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.strong__card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (min-width: 768px) {
    .strong__card {
        width: auto;
        height: auto;
        /* SP用の aspect-ratio:1/1 が width/height:auto 化で有効になり、
           正方形に収めようとするcontentの最小サイズがグリッドトラックを押し広げていたため解除 */
        aspect-ratio: auto;
        min-width: 0;
        padding: 36px 16px 24px;
        border-radius: 14px;
    }
}

/* ナンバーバッジ */
.strong__card-num {
    position: absolute;
    top: -16px;
    left: -10px;
    width: 36px;
    height: 36px;
    background: #e85465;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

@media (min-width: 768px) {
    .strong__card-num {
        width: 42px;
        height: 42px;
        font-size: 24px;
        top: -18px;
        left: -12px;
    }
}

/* アイコン */
.strong__card-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 16px;
}

.strong__card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@media (min-width: 768px) {
    .strong__card-icon {
        width: 68px;
        height: 68px;
        margin-bottom: 16px;
    }
}

/* カードテキスト */
.strong__card-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1.8;
    letter-spacing: 0.02em;
    text-align: center;
}

@media (min-width: 768px) {
    .strong__card-text {
        font-size: 15px;
    }
}

/* カード内brは非表示（自然折り返しに任せる） */
.strong__card-text br {
    display: none;
}

/* =====================
   Solution セクション
   ===================== */
.solution {
    background: #fff;
    padding: 60px 16px 64px;
    width: 100%;
}

@media (min-width: 768px) {
    .solution {
        padding: 80px 24px 88px;
    }
}

.solution__inner {
    max-width: 1000px;
    margin: 0 auto;
}

/* 見出し */
.solution__label {
    font-family: Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #0071bc;
    letter-spacing: 0.06em;
    margin-bottom: 16px;
    text-align: center;
}

@media (min-width: 768px) {
    .solution__label {
        font-size: 36px;
        margin-bottom: 20px;
    }
}

.solution__heading {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0.04em;
    line-height: 1.5;
    margin-bottom: 20px;
    text-align: center;
}

@media (min-width: 768px) {
    .solution__heading {
        font-size: 36px;
        margin-bottom: 28px;
    }
}

.solution__desc {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 2;
    letter-spacing: 0.04em;
    text-align: center;
    margin-bottom: 40px;
}

@media (min-width: 768px) {
    .solution__desc {
        font-size: 16px;
        margin-bottom: 48px;
    }
}

@media (max-width: 767px) {
    .solution__desc br {
        display: none;
    }
}

/* フロー図（SVG画像） */
.solution__flow-img-wrap {
    max-width: 960px;
    margin: 0 auto 36px;
}

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

@media (min-width: 768px) {
    .solution__flow-img-wrap {
        margin-bottom: 48px;
    }
}

/* 強化実行バナー */
.solution__banner {
    max-width: 960px;
    margin: 0 auto;
}

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

/* =====================
   Plan セクション
   ===================== */
.plan {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* 背景画像 + オーバーレイ */
.plan__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

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

.plan__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

/* コンテンツ */
.plan__inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px 64px;
}

@media (min-width: 768px) {
    .plan__inner {
        padding: 80px 48px 88px;
    }
}

/* Plan ラベル */
.plan__label {
    font-family: Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #2ec4b6;
    letter-spacing: 0.06em;
    margin-bottom: 16px;
    text-align: center;
}

@media (min-width: 768px) {
    .plan__label {
        font-size: 36px;
        margin-bottom: 20px;
    }
}

/* メイン見出し */
.plan__heading {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.04em;
    line-height: 1.5;
    margin-bottom: 20px;
    text-align: center;
}

@media (min-width: 768px) {
    .plan__heading {
        font-size: 38px;
        margin-bottom: 28px;
    }
}

/* 説明文 */
.plan__desc {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #fff;
    line-height: 2;
    letter-spacing: 0.04em;
    margin-bottom: 36px;
    text-align: center;
}

@media (min-width: 768px) {
    .plan__desc {
        font-size: 16px;
        margin-bottom: 48px;
    }
}

/* カードグリッド */
.plan__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 768px) {
    .plan__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
    }
}

/* 個別カード */
.plan__card {
    display: flex;
    flex-direction: column;
}

/* カード画像 */
.plan__card-img-wrap {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0;
    background: #fff;
}

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

/* カードバッジ（色付きラベル） */
.plan__card-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 30px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.06em;
    margin-top: 30px;
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .plan__card-badge {
        font-size: 18px;
        padding: 12px 20px;
        margin-bottom: 20px;
    }
}

.plan__card-badge--orange {
    background: #e8a735;
}

.plan__card-badge--teal {
    background: #2ec4b6;
}

.plan__card-badge--pink {
    background: #e8556d;
}

/* カード説明文 */
.plan__card-text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #fff;
    line-height: 1.9;
    letter-spacing: 0.02em;
}

@media (min-width: 768px) {
    .plan__card-text {
        font-size: 16px;
    }
}

/* =====================
   Comparison セクション
   ===================== */
.comparison {
    background: #fff;
    padding: 60px 16px 64px;
}

@media (min-width: 768px) {
    .comparison {
        padding: 80px 48px 88px;
    }
}

.comparison__inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

/* Comparison ラベル */
.comparison__label {
    font-family: Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #0071bc;
    letter-spacing: 0.06em;
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .comparison__label {
        font-size: 36px;
        margin-bottom: 20px;
    }
}

/* メイン見出し */
.comparison__heading {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0.04em;
    line-height: 1.5;
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    .comparison__heading {
        font-size: 38px;
        margin-bottom: 28px;
    }
}

/* 説明文 */
.comparison__desc {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 2;
    letter-spacing: 0.04em;
    margin-bottom: 36px;
}

@media (min-width: 768px) {
    .comparison__desc {
        font-size: 16px;
        margin-bottom: 48px;
    }
}

/* 比較表ラップ（SP時は横スクロール） */
.comparison__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.comparison__table-img {
    display: block;
    width: 100%;
    height: auto;
    min-width: 1000px;
}

@media (min-width: 768px) {
    .comparison__table-img {
        min-width: 0;
    }
}

/* =====================
   Flow セクション
   ===================== */
.flow {
    background: #dce8f0;
    padding: 60px 16px 64px;
}

@media (min-width: 768px) {
    .flow {
        padding: 80px 48px 88px;
    }
}

.flow__inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

/* Flow ラベル */
.flow__label {
    font-family: Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #0071bc;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}

@media (min-width: 768px) {
    .flow__label {
        font-size: 36px;
        margin-bottom: 16px;
    }
}

/* メイン見出し */
.flow__heading {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0.04em;
    line-height: 1.5;
    margin-bottom: 36px;
}

@media (min-width: 768px) {
    .flow__heading {
        font-size: 38px;
        margin-bottom: 48px;
    }
}

/* ステップ群 */
.flow__steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: 36px;
}

@media (min-width: 768px) {
    .flow__steps {
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        gap: 0;
        margin-bottom: 48px;
    }
}

/* 個別アイテム：SP横並び（アイコン左＋テキスト右） */
.flow__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    text-align: left;
    max-width: 400px;
    width: 100%;
}

@media (min-width: 768px) {
    .flow__item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        flex: 1;
        max-width: none;
        gap: 0;
    }
}

/* アイコン */
.flow__icon-wrap {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
}

.flow__icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@media (min-width: 768px) {
    .flow__icon-wrap {
        width: 110px;
        height: 110px;
        margin-bottom: 16px;
    }
}

/* テキストエリア */
.flow__body {
    flex: 1;
    min-width: 0;
}

.flow__title {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

@media (min-width: 768px) {
    .flow__title {
        font-size: 18px;
        margin-bottom: 10px;
    }
}

.flow__text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #333;
    line-height: 1.8;
    letter-spacing: 0.02em;
}

@media (min-width: 768px) {
    .flow__text {
        font-size: 15px;
    }
}

/* 矢印 */
.flow__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
}

/* SP：下矢印を表示、右矢印を非表示 */
.flow__arrow-right {
    display: none;
}

.flow__arrow-down {
    display: block;
    width: 20px;
    height: auto;
}

/* PC：右矢印を表示、下矢印を非表示 */
@media (min-width: 768px) {
    .flow__arrow {
        padding: 0 8px;
        align-self: center;
        margin-top: -40px;
    }

    .flow__arrow-right {
        display: block;
        width: 20px;
        height: auto;
    }

    .flow__arrow-down {
        display: none;
    }
}

/* 注釈 */
.flow__note {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
    letter-spacing: 0.04em;
    line-height: 1.8;
}

@media (min-width: 768px) {
    .flow__note {
        font-size: 20px;
    }
}

/* =====================
   Price セクション
   ===================== */
.price {
    background: #fff;
    padding: 60px 16px 64px;
}

@media (min-width: 768px) {
    .price {
        padding: 80px 48px 88px;
    }
}

.price__inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

/* Price ラベル */
.price__label {
    font-family: Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #0071bc;
    letter-spacing: 0.06em;
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .price__label {
        font-size: 36px;
        margin-bottom: 20px;
    }
}

/* メイン見出し */
.price__heading {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0.16em;
    line-height: 1.4;
    margin-bottom: 28px;
}

@media (min-width: 768px) {
    .price__heading {
        font-size: 40px;
        margin-bottom: 40px;
    }
}

/* 説明文 */
.price__desc {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 2;
    letter-spacing: 0.04em;
    margin-bottom: 48px;
    text-align: left;
}

@media (min-width: 768px) {
    .price__desc {
        font-size: 16px;
        text-align: center;
        margin-bottom: 64px;
    }
}

/* 価格図表ラップ（SP時は横スクロール） */
.price__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.price__table-img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 764px;
    margin: 0 auto;
}

/* =====================
   Message2 セクション
   ===================== */
.message2 {
    position: relative;
    width: 100%;
    height: 100vw;
    max-height: 640px;
    overflow: hidden;
}

@media (min-width: 768px) {
    .message2 {
        height: 400px;
        max-height: none;
    }
}

/* 背景画像 */
.message2__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

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

.message2__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.40);
}

/* コンテンツ */
.message2__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 48px 20px;
    text-align: center;
}

/* メインコピー */
.message2__heading {
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(13px, 3.9vw, 24px);
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.02em;
    line-height: 1.7;
    margin-bottom: 28px;
}

@media (min-width: 768px) {
    .message2__heading {
        font-size: 32px;
        line-height: 1.5;
        margin-bottom: 32px;
    }
}

/* サブテキスト */
.message2__text {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #fff;
    letter-spacing: 0.04em;
    line-height: 2;
    margin-bottom: 40px;
}

@media (min-width: 768px) {
    .message2__text {
        font-size: 18px;
        margin-bottom: 44px;
    }
}

/* CTAボタン */
.message2__cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 260px;
    padding: 18px 48px;
    background-color: #3a5ba0;
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-decoration: none;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 60px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
}

.message2__cta-btn:hover {
    background-color: #4c6db5;
    border-color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 768px) {
    .message2__cta-btn {
        min-width: 280px;
        padding: 18px 56px;
        font-size: 18px;
    }
}