.heading {
    background-image: url("../images/common/introduction-detail-back.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    padding: 70px 0 70px;
    width: 100%;
}
.c-introduction__heading--text p{
    font-size: 18px;
    text-align: center;
}
.c-introduction__heading--text p:not(:last-child) {
    margin-bottom: 35px;
}
.page-introduction #c-sec__title--faq{
    align-items: flex-start;
}
@media screen and (max-width: 768px) {
    /* FV：about と同一コンポーネント（カンプ実測 375×170px） */
    .l-fv--page {
        height: auto;
        aspect-ratio: 375 / 170;
    }
    .l-fv--page .l-fv__text {
        transform: translate(-50%, 0);
    }
    .heading {
        padding: 30px 0 48px; /* カンプ実測 */
    }
    .c-introduction__heading--text p {
        font-size: 14px;
        line-height: 24px;   /* カンプ実測 */
        letter-spacing: 2px; /* カンプ実測：1行21文字 */
        text-align: left;
    }
    .c-introduction__heading--text p:not(:last-child) {
        margin-bottom: 24px; /* カンプ実測（PCの35pxを上書き） */
    }
}
 
 
/* ============================================================
    flow（無料体験の流れ）
    ※ Group_94_(1).png を実測。背景色 #8C4521 / カード色 #A5613E /
      ボックス色 #E2C5B6 は既存コンポーネントと実測で完全一致（確定値）。
      角丸半径・フォントサイズ・内側余白・グリッド左マージンは実測に基づく
      ※仮値。SPは「初めての方へ.pdf」から実測（末尾ブロック参照）。
   ============================================================ */
.flow {
    position: relative;      /* .c-sec__title（absolute）の基準 */
    background: #8C4521;     /* 実測一致：.reason / .gallery と同値 */
    padding-top: 100px;      /* ※仮値：実測は約76px。他セクション（100px）に統一 */
    padding-bottom: 100px;   /* ※仮値：実測は約104px、ほぼ一致 */
}
.flow .c-sec__title {
    left: 11%;
    align-items: flex-start;
}
.flow .c-sec__title--ja {
    position: relative;
    transform: translateY(45%);
}
.l-flow__wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 51px; /* 実測：行間40px／列間51px */
    padding-left: 5%;
}
 
.c-flow__card {
    position: relative;
    padding: clamp(10px, 1vw, 30px);      /* ※仮値：カード内側余白 実測から近似 */
    border: 1px solid #fff;               /* ※仮値：reasonカードと同様と仮定 */
    border-radius: 34px 34px 0 34px;      /* 実測（bottom-rightのみ角丸なし） */
    background: #A5613E;                  /* 実測一致：.c-reason__card と同値 */
    display: flex;
    flex-direction: column;
}
.c-flow__heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;           /* ※仮値 */
    color: #fff;
    margin-bottom: 16px; /* ※仮値 */
}
.c-flow__num {
    font-size: clamp(25px, 2.6vw, 50px);; /* ※仮値：実測グリフ高37px相当 */
}
.c-flow__title {
    font-size: clamp(16px, 1vw, 30px); /* ※仮値：実測グリフ高24px相当 */
}
.c-flow__text {
    text-align: center;
    color: #fff;
    font-size: clamp(8px, 0.9vw, 16px);
    line-height: 1.6;  /* ※仮値：グローバルp{line-height:2}だと詰まって見えるため調整 */
    letter-spacing: 1px; /* ※仮値 */
    min-height: 52px;
    margin-bottom: 30px; /* ※仮値 */
}
.c-flow__img {
    aspect-ratio: 400 / 240; /* ※仮値：実測399×239相当 */
    overflow: hidden;
    margin-bottom: auto;
}
.c-flow__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.c-flow__link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px; /* ※仮値 */
    margin-top: 20px; /* ※仮値 */
    color: #fff;
    font-size: 16px; /* ※仮値 */
}
.c-flow__link:hover .ph-arrow-circle-down-right {
    transform: translate(5px, 5px); /* 既存 .c-reason__card a:hover と同じ挙動 */
}
 
.c-flow__notice {
    grid-column: 1 / -1; /* 3カラム分をまたいで全幅表示 */
    display: flex;
    align-items: center;
    gap: 60px; /* ※仮値 */
    border: 2px solid #fff;
    border-radius: 20px 20px 0 20px; /* 実測（bottom-rightのみ角丸なし） */
    background: #E2C5B6; /* 実測一致：.program / .faq と同値 */
    padding: 30px 60px;  /* ※仮値 */
}
.c-flow__notice--title {
    flex: none;
    font-size: 26px; /* ※仮値 */
    color: #8C4521;  /* ※仮値：.faq__answer 等の慣例を踏襲 */
    letter-spacing: 3px;
}
.c-flow__notice--text {
    font-size: 16px; /* ※仮値 */
    line-height: 1.8; /* ※仮値 */
    color: #8C4521;   /* ※仮値 */
}

@media screen and (max-width: 1700px) {
    .l-flow__wrapper {
        padding-left: 10%; /* ※仮値：news/faqと同じ「縦見出し逃げ」パターンを流用。実測では約21pxだったが要再確認 */
    }
}
@media screen and (max-width: 960px) {
    /* ============================================================
        flow（SP）※「初めての方へ_SP.pdf」から実測
        ============================================================ */
    .flow {
        padding-top: 40px;
        padding-bottom: 50px;
    }
    /* 縦見出し：about.css の commitment/access/instructor と同一パターン
        （left:6% / top:-15px / gap:5px / EN13px / JA7px）を踏襲。
        JAのmargin-topのみセクション固有の実測値。 */
    .flow .c-sec__title {
        left: 6%;
        top: -15px;
        gap: 5px;
    }
    .flow .c-sec__title--en {
        font-size: 13px;
    }
    .flow .c-sec__title--ja {
        font-size: 7px;      /* ※極小のため要確認（aboutページと同様の指摘） */
        letter-spacing: 1px;
        margin-top: 21px;    /* カンプ実測 */
        transform: none;
    }
    
    .l-flow__wrapper {
        grid-template-columns: 1fr;
        gap: 31px;      /* カンプ実測（28〜32pxのばらつきの平均） */
        padding-left: 0; /* カード自体がジグザグ配置になるため縦見出し逃げの左パディングは不要 */
    }
    
    /* カード：reasonカードと同じジグザグ配置（奇数=右寄せ／偶数=左寄せ）。
        カンプ実測：カード幅は l-inner の約90%、写真は左右0パディングでフルブリード。 */
    .c-flow__card {
        width: 90%;
        padding: 20px 0;
        border-radius: 20px 20px 0 20px;
        overflow: hidden; /* 画像がフルブリードのため、カード角丸からのはみ出しを防止 */
    }
    .c-flow__card:nth-of-type(odd) {
        margin-left: auto;
        margin-right: 0;
    }
    .c-flow__card:nth-of-type(even) {
        margin-left: 0;
        margin-right: auto;
    }
    
    .c-flow__heading {
        gap: 20px;          /* カンプ実測 */
        margin-bottom: 14px; /* カンプ実測 */
        padding: 0 20px;    /* 画像のみフルブリードのため、テキスト側にのみ左右余白を戻す */
    }
    .c-flow__num { font-size: 36px; }
    .c-flow__title { font-size: 20px; }
    
    .c-flow__text {
        font-size: 14px;
        line-height: 24px;   /* カンプ実測 */
        letter-spacing: 2px; /* カンプ実測 */
        min-height: 0;       /* PCの min-height:52px を解除（カード06の空文字が余白を持たないよう） */
        margin-bottom: 12px; /* カンプ実測 */
        padding: 0 20px;
    }
    .c-flow__text:empty {
        display: none; /* カード06（テキストなし）はそのまま画像へ詰める */
    }
    
    .c-flow__img {
        aspect-ratio: 305 / 173; /* カンプ実測（PCの400/240とは異なる） */
        margin-bottom: 0;
    }
    .c-flow__img img {
        width: 90% !important;
        margin: 0 auto;
    }
    .c-flow__link {
        margin-top: 16px; /* カンプ実測 */
        padding: 0 20px;
        font-size: 12px;  /* カンプ実測 */
    }
    .c-flow__link .ph-arrow-circle-down-right {
        font-size: 22px; /* カンプ実測（共通の35pxをこのリンクのみ上書き） */
    }
    
    /* 持ち物・服装ブロック：SPカンプに同要素が見当たらないため非表示。
        ※要確認：カンプ側の意図的な省略か、単なる支給漏れか未確認。
            PC表示（.c-flow__notice）には影響しない。 */
    .c-flow__notice {
        display: none;
    }
}