@charset "UTF-8";

/* =====================================================================
   会計業界キャリアタイプ診断 - 共通スタイル
   =====================================================================
   Figma（設問 7740:6889 / 7751:11311、連絡先 7752:11417、結果 7731:4780 ほか）を踏襲。
   SP専用デザインのため、PCでも SP幅のまま中央寄せする（lp06 / lp09 と同じ型）。

   フォントについて:
   Figma の指定は 'Gen Interface JP' / 'FOT-UDKakugoC60 Pro' / 'Ruika'（いずれも要ライセンス）。
   Web で配れないため Noto Sans JP で代替する。

   FOT-UDKakugoC60 の「C60」は長体60%を意味する（実測: 40px の和文12文字が 285px
   ＝ 1文字あたり 0.594em）。そのままの級数で置くと約1.7倍の幅になり枠を割るため、
   該当箇所は Noto Sans JP に transform: scaleX(0.6) をかけて字幅を合わせている。
   scaleX はレイアウト幅を変えないので、折り返し位置が Figma とずれないよう
   1行で組まれている見出しには white-space: nowrap を併用する。
   ===================================================================== */

:root {
    /* Figma の実カラー。進捗バー・見出しのネイビーは #1a3261 */
    --color-navy: #1a3261;
    --color-badge: #c4cee1;
    --color-cta: #ff4000;
    --color-cta-line: #ff7942;
    --color-text: #333333;
    --color-heading: #353535;
    --color-label: #4d4d4d;
    --color-text-sub: #707070;
    --color-border: #dddddd;
    --color-track: #f1f1f1;
    --color-error: #e60000;
    /* SP実寸（375px）で切られたデザインなので、内側の基準幅もそれに揃える */
    --width-inner: 375px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
p,
ul,
ol,
li,
figure {
    margin: 0;
    padding: 0;
}

ul,
ol {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* JSでのステップ切替に hidden 属性を使うため、display 指定を持つ要素でも確実に隠す */
[hidden] {
    display: none !important;
}

.l-body {
    /* SP幅のLP列の外側。既存LP（lp06）と同じグレーにして列の境界が分かるようにする */
    background: #cccccc;
    color: var(--color-text);
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
    font-size: 16px;
    /* body 直下は列だけだが、閉じタグと script の間の改行・インデントもテキストノードとして
       行ボックスを作る。1.7 のままだと列の下に 16px × 1.7 = 約27px の隙間が残るため、
       body 自身には行を持たせず、行の高さは列（.l-body-inner）側で指定する */
    line-height: 0;
}

/* SP専用デザイン。PCではSP幅のまま中央に置く */
.l-body-inner {
    position: relative;
    width: 100%;
    max-width: var(--width-inner);
    min-height: 100vh;
    margin: 0 auto;
    line-height: 1.7;
    /* Figma: 白 → #eef3fb の縦グラデーション */
    background: linear-gradient(to bottom, #ffffff, #eef3fb);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ---------------------------------------------------------------
   背景装飾
   設問ステップは下部の幾何学模様、連絡先ステップは上部の写真と、
   Figma で背景が切り替わるため2枚を用意し JS で出し分ける
   --------------------------------------------------------------- */
.l-bg {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
}

.l-bg-question {
    bottom: 0;
    height: 250px;
}

.l-bg-question__back,
.l-bg-question__front {
    position: absolute;
    left: 0;
    width: 100%;
    opacity: 0.6;
}

/* 奥の1枚は上下反転して配置されている */
.l-bg-question__back {
    bottom: 0;
    height: 250px;
    object-fit: cover;
    transform: scaleY(-1);
}

.l-bg-question__front {
    bottom: 0;
    height: 249px;
    overflow: hidden;
}

.l-bg-question__front img {
    position: absolute;
    left: 0;
    top: -23.06%;
    width: 81.64%;
    height: 123.06%;
    max-width: none;
}

.l-bg-contact {
    top: 0;
    bottom: 0;
    overflow: hidden;
}

/* 位置・高さを列の高さ比（%）ではなく px で置くのは、写真の中の地平線を
   画面の高さに左右されないようにするため。%だと画面が高い端末ほど地平線が
   下がり、列の上端からの積み上げで置かれる見出しやイラストとの関係が崩れる。
   px は Figma のアートボード（770px）で各%を実寸に直した値 */
.l-bg-contact img {
    position: absolute;
    left: 0;
    top: -23px;
    width: 100%;
    height: 469px;
    max-width: none;
    object-fit: cover;
}

/* 写真の下半分を白へ溶かし、フォームの可読性を確保する。
   写真の下端（446px）より手前で白へ溶かし切ることで、写真の切れ目も同時に消える */
.l-bg-contact::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 352px, #ffffff 424px);
}

/* 背景より前面に出す */
.l-header,
.l-main,
.l-footer {
    position: relative;
    z-index: 1;
}

.l-header {
    padding: 12px 16px;
}

.l-header__logo {
    display: block;
    width: 82px;
    height: 40px;
    object-fit: contain;
}

.l-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* Figma の Main Content は最低 640px を確保し、注意文を下端に置く */
    min-height: 640px;
    padding: 24px 16px 48px;
}

/* 内容が 640px に満たないときだけ注意文を最下部へ寄せる */
.l-caution {
    margin-top: auto;
    color: var(--color-text-sub);
    font-size: 12px;
    line-height: 1.2;
}

.l-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
}

.l-footer__nav {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.l-footer__nav a {
    color: var(--color-text-sub);
    font-size: 12px;
    line-height: 1.2;
    text-decoration: none;
}

.l-footer__copy {
    color: rgba(112, 112, 112, 0.4);
    font-size: 10px;
    line-height: 1.2;
}

/* ---------------------------------------------------------------
   進捗表示（バーのみ。「n/10」の数値は出さない）
   --------------------------------------------------------------- */
.p-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.p-progress__bar {
    height: 6px;
    border-radius: 8px;
    background: var(--color-track);
    overflow: hidden;
}

.p-progress__fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 8px;
    background: var(--color-navy);
    transition: width 0.25s ease-out;
}

/* ---------------------------------------------------------------
   設問ステップ
   --------------------------------------------------------------- */
.p-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

/* 設問と選択肢のかたまり。Figma の Form（gap 40px） */
.p-step__form {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
}

.p-step__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.p-step__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 24px;
    border-radius: 12px;
    background: var(--color-badge);
    color: var(--color-heading);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.p-step__question {
    width: 100%;
    color: var(--color-heading);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

.p-step__note {
    color: var(--color-text-sub);
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
}

.p-step__error {
    color: var(--color-error);
    font-size: 13px;
}

.p-option {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ラジオ／チェックボックス本体は隠し、ラベル全体をタップ領域にする */
.p-option__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.p-option__label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 8px 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.13);
    color: var(--color-text);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

/* 単一選択は選んだ直後に次へ進むが、複数選択（Q10）は選択状態が見えないと操作できない */
.p-option__input:checked + .p-option__label {
    border-color: var(--color-navy);
    background: #eef2fb;
    font-weight: 700;
}

.p-option__input:focus-visible + .p-option__label {
    outline: 2px solid var(--color-navy);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------
   プルダウン（Q8 生まれ年 / Q12 都道府県）
   --------------------------------------------------------------- */
.p-select {
    display: flex;
    justify-content: center;
}

.p-select__input {
    /* 選択肢ボタン（.p-option__label）と幅・高さ・角丸を揃え、
       設問の途中で1問だけ見た目が変わらないようにする */
    width: 100%;
    max-width: 320px;
    /* 右端は下向き矢印のぶんだけ余白を広げる */
    padding: 16px 40px 16px 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #ffffff;
    font-size: 16px;
    /* iOS Safari は 16px 未満だとフォーカス時に画面を勝手に拡大する */
    color: inherit;
    /* OS 標準の矢印は環境ごとに大きさが違うため、自前の矢印に統一する。
       下向き矢印は img/ に無く、この1箇所でしか使わないので data URI で持つ */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231a3261' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
}

/* ---------------------------------------------------------------
   連絡先入力（最終ステップ）
   --------------------------------------------------------------- */
.p-contact {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* .p-step の align-items: center を打ち消し、入力欄やボタンを全幅で置く */
.p-contact > * {
    width: 100%;
}

.p-contact__hero {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.p-contact__message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 166px;
    /* イラストと重ねる（Figma の mr -40px） */
    margin-right: -40px;
}

/* 右下だけ角を落として吹き出しにする */
.p-contact__balloon {
    padding: 8px 16px;
    border: 1px solid var(--color-cta-line);
    border-radius: 16px 16px 2px 16px;
    background: #ffffff;
    color: var(--color-cta-line);
    /* Figma は 28px だが長体フォント前提。代替フォントでは枠を割るため 20px に落とす */
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.p-contact__lead {
    color: var(--color-heading);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.p-contact__lead + .p-contact__lead {
    margin-top: 8px;
}

.p-contact__illust {
    flex-shrink: 0;
    width: 184px;
    height: 279px;
    object-fit: contain;
}

.p-contact__fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.p-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.p-field__label {
    color: var(--color-label);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.p-field__input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: #ffffff;
    /* iOS で入力時に自動ズームされない下限 */
    font-size: 16px;
    font-family: inherit;
}

.p-field__input::placeholder {
    color: rgba(51, 51, 51, 0.6);
}

.p-field__input:focus {
    border-color: var(--color-navy);
    outline: none;
}

/* 求人紹介の希望（決定29・Figma 7946:161）。設問ステップの .p-option が
   カード状の選択肢ボタンなのに対し、こちらは連絡先フォームの中に置く丸ポチのラジオ。
   見た目が別物なので .p-option は流用せず、色だけ同じトークンを使う */
.p-radio {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.p-radio__item {
    display: flex;
}

/* ラジオ本体は隠し、ラベルの ::before を丸ポチとして描く。
   .p-option__input と同じ隠し方（display:none にすると Tab で辿れなくなる） */
.p-radio__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.p-radio__label {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 4px 0;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.4;
    cursor: pointer;
}

.p-radio__label::before {
    content: "";
    flex-shrink: 0;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    /* 文字が2行に折り返しても丸ポチが1行目の中央に来るようにする
       （line-height 1.4 の 19.6px と 16px の差の半分） */
    margin-top: 2px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: #ffffff;
}

/* 選択時は塗りつぶしたネイビーの中に白丸（Figma は半径3px＝直径6px）。
   inset の box-shadow は外周からのリングしか描けず中心の丸にならないため、
   SVG と同じ「中心に白丸」を radial-gradient で作る */
.p-radio__input:checked + .p-radio__label::before {
    border-color: var(--color-navy);
    background: radial-gradient(circle at center, #ffffff 3px, var(--color-navy) 3px);
}

.p-radio__input:focus-visible + .p-radio__label::before {
    outline: 2px solid var(--color-navy);
    outline-offset: 2px;
}

/* Figma には無いが、個人情報の取得には同意の明示が必要なため既存LPと同じ文言を置く */
.p-agreement {
    color: var(--color-text-sub);
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
}

.p-agreement a {
    color: var(--color-navy);
}

/* ---------------------------------------------------------------
   ボタン・リンク
   --------------------------------------------------------------- */
.c-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    /* タップしやすさのため 44px 以上を確保する */
    min-height: 52px;
    padding: 12px 8px 12px 16px;
    border: none;
    border-radius: 8px;
    background: var(--color-cta);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
    color: #ffffff;
    font-family: inherit;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform 0.1s, opacity 0.15s;
}

/* ラベルを伸ばしてアイコンを右端に寄せるため、文字の中央寄せは自前で行う */
.c-button__label {
    flex: 1;
    text-align: center;
}

/* Figma のCTAは「無料|で|キャリア相談|する」で助詞だけ級数が落ちる */
.c-button__sub {
    font-size: 18px;
}

.c-button__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.c-button:active:not(:disabled) {
    transform: translateY(2px);
}

.c-button:disabled {
    background: #cccccc;
    cursor: not-allowed;
}

/* 求人カード内のボタン。CTAの主導線（塗り）と競合しないよう Figma では白地＋オレンジ枠 */
.c-button--outline {
    min-height: 44px;
    padding: 4px 9px 4px 17px;
    border: 1px solid var(--color-cta);
    border-radius: 4px;
    background: #ffffff;
    box-shadow: none;
    color: var(--color-cta);
    font-size: 13px;
    font-weight: 700;
    text-shadow: none;
}

/* .c-button:disabled のグレー塗りは白地のこのボタンには合わないので打ち消す */
.c-button--outline:disabled {
    border-color: var(--color-border);
    background: #ffffff;
    color: var(--color-text-sub);
}

.c-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    border: none;
    background: none;
    color: var(--color-text-sub);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
}

.c-back__icon {
    width: 16px;
    height: 16px;
}

/* jQuery Validation が出力するエラー文 */
.c-error {
    display: block;
    margin-top: 4px;
    color: var(--color-error);
    font-size: 13px;
}

/* =====================================================================
   結果ページ（result.php）
   =====================================================================
   タイプごとに変わる色・寸法は result.php から
   --accent / --tagline-color / --badge-color / --illust-* で渡ってくる。
   ===================================================================== */

/* 設問ページのグラデーションではなく白地。
   横のはみ出しは基底の overflow: hidden がそのまま切る */
.l-body-inner--result {
    background: #ffffff;
}

/* 結果ページは各セクションが自前で余白を持つ（Figma のセクション区切り） */
.l-main--result {
    min-height: 0;
    padding: 0;
    gap: 0;
}

/* ---------------------------------------------------------------
   ヒーロー
   以降のセクションと一体で流れる。position: relative は中の
   バッジ・ロゴ・イラストを絶対配置で置くための基準
   --------------------------------------------------------------- */
.p-hero {
    position: relative;
    flex-shrink: 0;
    height: 583px;
    /* 写真の読み込み前でも下地の色が見えるように */
    background: #f5f8f3;
    overflow: hidden;
}

.p-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* B・D は Figma で背景を 145% に拡大して左へ寄せている */
.p-hero__bg--zoom {
    transform: scale(1.45);
    transform-origin: 30% center;
}

/* 背景に敷く英字。Figma のフォントは Noto Sans JP より字面が高い（ink 0.846em に対し
   Noto の cap height は 0.714em）ため級数を 1.185 倍し、その分だけ上へずれるので
   top を 0.339 × 級数 だけ下げて字面の位置を合わせる。
   横は級数を上げた分も相殺して 0.6 / 1.185 ≒ 0.506 に圧縮する */
.p-hero__wordmark {
    position: absolute;
    left: calc(var(--wm-left) * 1px);
    top: calc((var(--wm-top) + var(--wm-size) * 0.339) * 1px);
    color: var(--accent);
    opacity: 0.5;
    font-size: calc(var(--wm-size) * 1.185px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    transform: scaleX(0.506);
    transform-origin: left top;
    pointer-events: none;
}

.p-hero__badge {
    position: absolute;
    top: 79px;
    left: 0;
    right: 0;
    width: fit-content;
    margin: 0 auto;
    padding: 5px 16px;
    border: 1px solid var(--badge-color);
    border-radius: 4px;
    color: var(--badge-color);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
}

.p-hero__logo {
    position: absolute;
    left: 16px;
    top: 12px;
    width: 82px;
    height: 40px;
    object-fit: contain;
}

.p-hero__tagline {
    position: absolute;
    top: 120px;
    left: 0;
    right: 0;
    color: var(--tagline-color);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
}

/* Figma は Gen Interface JP SemiBold（32px）。Noto Sans JP は字面が低く字幅が広いので、
   そのまま組むと「小さくて横に間延びした別物」になる。Figma の描画を実測して合わせる:
   字面の高さ 30px に対し Noto 32px は 26px しかないため級数を 30/26 ≒ 1.154 倍（36.9px）に上げ、
   広がった分も含めて横を 0.77 に圧縮し、字送りを Figma と同じ 310px（左右余白 約30px）にする。
   級数を上げると字面が下がるので top を 3px 詰めて上端を Figma に揃える。
   ウェイトは Noto では SemiBold より Bold のほうが Figma の見た目に近い。
   白文字がヒーロー写真に埋もれないよう、Figma では 1px のネイビー縁取りが掛かる */
.p-hero__name {
    position: absolute;
    top: 150px;
    left: 0;
    right: 0;
    color: #ffffff;
    font-size: 36.9px;
    font-weight: 700;
    /* Figma は leading-none。ワークライフバランスだけ2行に割れる */
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    transform: scaleX(0.77);
    /* text-stroke は線の中心が字形の輪郭に乗るため、外側1pxぶんとして2pxを指定し、
       paint-order で塗りを線より後に描いて字形が痩せないようにする */
    paint-order: stroke fill;
    -webkit-text-stroke: 2px #0b2249;
}

.p-hero__name-suffix {
    /* Figma は 32px に対して 24px。級数を変えても比率が崩れないよう em で持つ */
    font-size: 0.75em;
}

/* ヒーロー下端の白い切り欠き。イラストはこの上に重なる（Figma の重ね順） */
.p-hero__shape {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 120px;
}

.p-hero__illust {
    position: absolute;
    top: calc(var(--illust-top) * 1px);
    left: 0;
    right: 0;
    width: calc(var(--illust-width) * 1px);
    height: calc(var(--illust-height) * 1px);
    margin: 0 auto;
    object-fit: contain;
}

/* ---------------------------------------------------------------
   ヒーロー以降のセクション
   position: relative は各セクション内の絶対配置（p-consult の背景英字）の
   基準。z-index はヒーロー下端の切り欠き・イラストより手前に置くため
   --------------------------------------------------------------- */
.p-type,
.p-points,
.p-consult {
    position: relative;
    z-index: 1;
    padding: 24px 16px;
}

.p-type,
.p-points {
    background: #ffffff;
}

.p-type {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* 文字幅を長体に合わせても枠に収まるので、囲みごと縮める */
.p-type__title {
    padding: 4px 16px;
    border: 1px solid var(--accent);
    border-radius: 2px;
    color: var(--accent);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    transform: scaleX(0.6);
}

.p-type__body {
    color: var(--color-navy);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

.p-points {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* 長体でないと375px幅に収まらない級数のため、nowrap で折り返しを止めてから縮める。
   align-self は中央寄せのため。nowrap の行が箱をはみ出すと text-align: center は
   効かず（行が箱の左端から始まる）、そこへ箱の中心を軸にした scaleX が掛かるので
   右にずれる。箱自体を文字幅まで縮めて中央に置けば、軸と文字の中心が一致する */
.p-points__title {
    align-self: center;
    color: var(--accent);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    transform: scaleX(0.6);
}

.p-points__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.p-points__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.p-points__subtitle {
    color: #0b2249;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    transform: scaleX(0.6);
    /* 左端を基準に縮めて、本文のインデントと頭を揃える */
    transform-origin: left center;
}

.p-points__body {
    padding-left: 20px;
    color: #000000;
    font-size: 16px;
    line-height: 1.5;
}

.p-points__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* 背景の写真に負けないよう Figma でも白いグローが掛かっている */
.p-points__note {
    color: var(--color-cta);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-shadow: 0 0 20px #ffffff;
}

/* ---------------------------------------------------------------
   イチオシ事務所求人
   --------------------------------------------------------------- */
/* z-index を帯（1）より上げるのは、カード下端が CTA帯の斜辺に重なるため（Figma の重ね順）。
   重なり自体は .p-jobs__list の負のマージンで作る */
.p-jobs {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* 下は 0。カードが帯へはみ出す分を余白として持たせない */
    padding: 24px 16px 0;
    background: #ffffff;
}

.p-jobs__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* nowrap + scaleX で長体にする理由は .p-points__title と同じ */
.p-jobs__title {
    color: var(--accent);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    transform: scaleX(0.6);
}

.p-jobs__lead {
    color: #586174;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
}

/* Figma ではカード下端が CTA帯の斜辺に 96px 食い込む。セクションの箱だけを
   縮めて、カードは帯の上へはみ出させる（重なりの向きは .p-jobs の z-index）。
   食い込ませたいのは最後のカードだけなので、負のマージンはリスト側に置く。

   1件のタイプ（A・B・D）はこの縦積みのまま。複数件は下の --carousel が上書きする */
.p-jobs__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: -96px;
}

/* 複数件（C・E・F の3件）は横スクロールで並べる（決定25）。
   375px 実寸のデザインに3枚を横並べすると1枚 104px にしかならず事務所名すら
   入らないため、3列グリッドではなくスワイプで送る形にしている。

   寸法は Figma の複数件レイアウト（node 7732:5497）実測に合わせている。
     カードリスト x=16 幅343 / カード幅320 / 2枚目 x=344（＝gap 24）
     → 2枚目の覗きは 375 −(16+344) ＝ 15px
   「ほんのちょっと見えるくらい」というユーザ指示とも一致する。

   覗き量 ＝ LP幅375 −(左inset16 + カード幅 + gap) という関係なので、
   幅・gap・左右 padding は必ずセットで直すこと。 */
.p-jobs__list--carousel {
    flex-direction: row;
    /* Figma の 2枚目 x=344 −カード幅320 ＝ 24px。.p-jobs__list の縦積み用 16px を上書き */
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* iOS で慣性スクロール後の位置が中途半端になるのを防ぐ */
    overscroll-behavior-x: contain;

    /* 左右: セクションの padding（16px）を margin で打ち消して全幅で流し、
       内側の padding-left を Figma と同じ 16px にする。カードは左スナップなので
       1枚目はこの位置で止まり、右側に次のカードが 15px 覗く。

       padding-right の 39px は「375 − カード幅320 − scroll-padding-left16」。
       最後の1枚も他と同じ左16pxまで送れるだけのスクロール量を確保するための値で、
       足りないと mandatory スナップが最後の1枚を吸着先と認めず手前に戻してしまう。
       カード枚数には依存しない（LP幅・カード幅・左insetだけで決まる）。

       上: カードの影（0 8px 28px）がスクロールコンテナに切られるので、
       影の広がりぶんを padding で確保して同じ量を margin で戻す。

       下の padding が 8px しかないのは、ここを広げるとスクロールコンテナの箱が
       真下の操作行（矢印）に被り、タッチだとタップがスクロール領域側に
       持っていかれて矢印が反応しなくなるため（2026-08-13 SPで発生）。
       影は下 36px ぶん切れるが、カード下端はネイビー帯の上に来るので
       影はほぼ見えず実害がない。

       CTA帯への食い込み（Figma 96px）はここでは作らない。負のマージンは
       「次の兄弟を引き上げる」ものなので、リストに付けると下の操作行が
       カードに重なってしまう。食い込みは最後の子である .p-jobs__nav に持たせる */
    padding: 20px 39px 8px 16px;
    scroll-padding-left: 16px;
    margin: -20px -16px -8px;

    /* スクロールバーは覗いているカードと二重の手がかりになるので隠す。
       PC で送る手段は「カードを掴んで引っ張る」（result.php の pointerdown） */
    scrollbar-width: none;

    /* PC では掴めることをカーソルで示す。タッチでは cursor 自体が出ないので無害 */
    cursor: grab;
}

/* 引っ張っている間はカード内の文字が選択されてしまうので止める */
.p-jobs__list--carousel.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.p-jobs__list--carousel::-webkit-scrollbar {
    display: none;
}

.p-jobs__list--carousel .p-job {
    /* Figma の JobCard 実寸 */
    flex: 0 0 320px;
    /* Figma は左揃え（カードリスト x=16 に1枚目が接する）。
       scroll-padding-left: 16px と対で、送った先も同じ左16pxで止まる */
    scroll-snap-align: start;
}

/* カード内の余白だけは Figma（head 16px / ✓・ボタン 18px）から意図的に外している。
   Figma のカードは「事務所種別｜所在地」「職種」「タグ」まで載る前提の縦組みだが、
   実装は提供された情報だけを出す方針（lib/jobs.php）で行数が少なく、
   同じ余白だと上下がスカスカに、左右のラインは 2px ずれて見えるため
   ユーザ指示（2026-08-13「余白がないのは気になる」）で組み直した。
   外周の寸法（幅320・gap24・左16）は Figma 実測どおりなので、ここだけの逸脱。

   1件のタイプ（A・B・D）は Figma 踏襲のまま触らない（決定19）ので、
   セレクタは必ず .p-jobs__list--carousel 配下に閉じること。 */
.p-jobs__list--carousel .p-job__head {
    /* 左右を 20px に統一する。元は head 16px / ✓・ボタン 18px で
       2px ずれており、幅が狭いほど縦のラインの不揃いが目立つ */
    padding: 20px 20px 0;
    gap: 6px;
}

/* 事務所名は1行のカードと2行のカードが混在する。横に並ぶと年収・✓の
   開始位置がカードごとにずれて見えるので、2行ぶんの高さを確保して揃える
   （3行になる長い名前は min-height なのでそのまま伸びる） */
.p-jobs__list--carousel .p-job__name {
    min-height: 48px;
}

.p-jobs__list--carousel .p-job__points {
    padding: 14px 20px 0;
    /* 行高20pxに対して gap 4px では3項目が塊に見えるため広げる */
    gap: 10px;
}

.p-jobs__list--carousel .p-job__point {
    line-height: 1.5;
}

.p-jobs__list--carousel .p-job__action {
    /* 上は最後の✓から離す（元は 8px でボタンが貼り付いていた）。
       margin-top: auto と併用するので、高さが余るカードでは下端に寄る */
    padding: 18px 20px 20px;
}

/* カルーセルの操作行（矢印＋現在地ドット）。
   PC ではスワイプが効かずスクロールバーも隠しているため、マウスだけだと
   右のカードへ送る手段が無くなる（覗いているカードは「まだ続く」ことは
   伝えるが、送り方は伝えない）。掴んで引っ張る操作も別途効くが、
   それだけでは気付けないので明示的なボタンを置く（2026-08-13 ユーザ指示）。 */
.p-jobs__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    /* カルーセルは影を切らないよう padding-bottom を 40px 持っており、
       その箱が矢印の上側 32px に被る。位置指定なしのままだと重なりの
       解決がブラウザ任せになり、タッチではスクロール領域側にタップを
       持っていかれることがあるので、明示的に手前へ出す */
    position: relative;
    z-index: 1;

    /* 帯の上に乗るので、カードから離しすぎると透かし文字（.p-consult__wordmark、
       帯の上端＋161px）に噛む。8px まで詰めて、行の下端を 帯＋148px に収める。
       .p-jobs の gap 24px を打ち消す形で持たせている */
    margin-top: -16px;

    /* カードを Figma どおり CTA帯へ 96px 食い込ませるための負のマージン。
       .p-jobs の最後の子なので、ここに付けると .p-consult 全体が引き上がり、
       .p-jobs の白背景も同じだけ手前で終わる（1件時の .p-jobs__list と同じ手）。

       内訳: 96（カードの食い込み）＋ 44（この行の高さ）＋ 8（カードとの間隔）。
       操作行自体も帯の上に乗るので、下の色指定で暗背景向けに切り替える。
       行の上端（帯＋104px）は、この行が載る範囲では斜辺より下になる
       （斜辺は左端で120px、行の左端 x≒99px の位置で88px）ので、
       白場とネイビーをまたいで配色が破綻することはない */
    margin-bottom: -148px;
}

/* 帯の上に乗るぶん、白場向けの配色のままだと沈む。オレンジは残しつつ、
   線と非アクティブの点だけ白系に置き換える */
.p-jobs__nav .p-jobs__arrow {
    color: #ffffff;
}

.p-jobs__nav .p-jobs__arrow:disabled {
    color: rgba(255, 255, 255, 0.35);
}

.p-jobs__nav .p-jobs__dot {
    background-color: rgba(255, 255, 255, 0.35);
}

.p-jobs__nav .p-jobs__dot.is-active {
    background-color: #ffffff;
}

/* 操作行が帯の上に乗るぶん、CTAの見出しが操作行と重ならないよう下げる。
   120px は帯の斜辺の落差で、そこから操作行の下端（＝斜辺から 28px）
   ＋ 見出しとの間隔 24px を足している。1件時の 120px + 24px と同じ間隔感 */
.p-jobs--carousel + .p-consult {
    padding-top: calc(120px + 28px + 24px);
}

/* 見た目は 32px の丸だが、タップ判定は 44px 確保する。
   touch-action: manipulation はダブルタップ判定の待ちを省き、
   タップが即座に click になるようにする（SPでの取りこぼし対策） */
.p-jobs__arrow,
.p-jobs__dot {
    touch-action: manipulation;
}

.p-jobs__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-cta);
    cursor: pointer;
    transition: opacity 0.2s;
}

.p-jobs__arrow-icon {
    width: 32px;
    height: 32px;
    padding: 5px;
    border: 1px solid currentColor;
    border-radius: 50%;
}

/* 端では押しても動かないので、押せないことを見せる */
.p-jobs__arrow:disabled {
    color: #c6cede;
    cursor: default;
}

.p-jobs__dots {
    display: flex;
    justify-content: center;
    /* 点そのものが padding ぶん離れるので、ここでの間隔は 0 でよい */
    gap: 0;
}

/* 見た目は 8px の点のまま、padding でタップ判定だけ 28px に広げる。
   background-clip: content-box により、padding には背景が乗らない */
.p-jobs__dot {
    box-sizing: content-box;
    width: 8px;
    height: 8px;
    padding: 10px;
    border: none;
    border-radius: 50%;
    background: #dde3eb;
    background-clip: content-box;
    cursor: pointer;
    transition: background-color 0.2s;
}

/* background ショートハンドだと background-clip が border-box に戻り、
   padding ぶんまで塗られて点だけ大きくなる。色だけを上書きする */
.p-jobs__dot.is-active {
    background-color: var(--color-cta);
}

/* 3枚は横flexで同じ高さに揃うため、✓の行数が違ってもボタンの位置を下端で合わせる */
.p-job__action {
    margin-top: auto;
}

.p-job {
    display: flex;
    flex-direction: column;
    border: 1px solid #dde3eb;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(20, 40, 70, 0.1);
}

.p-job__head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 16px 8px;
}

.p-job__name {
    color: #172033;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.p-job__salary {
    color: var(--color-cta);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

/* Figma では金額の数字だけ級数が上がる */
.p-job__salary-number {
    font-size: 20px;
}

.p-job__points {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 18px;
}

.p-job__point {
    display: flex;
    gap: 6px;
    color: #172033;
    font-size: 14px;
    line-height: 1.4;
}

/* チェックは意味を持たない装飾なので、読み上げに乗らない擬似要素で出す */
.p-job__point::before {
    content: '✓';
    flex-shrink: 0;
    color: #5479b8;
    font-size: 12px;
}

.p-job__action {
    padding: 0 18px 16px;
}

/* ---------------------------------------------------------------
   CTA帯（下部）
   --------------------------------------------------------------- */
/* Figma では帯の上辺が斜めになっている。実体は求人セクションの下端に重ねた
   375×120 のネイビー三角形（7732:6463）だが、三角形の塗りは帯と同じ色なので
   帯そのものを 120px 上へ伸ばして左上を切り落とし、同じ斜辺を作っている。
   斜辺は左端が帯の上端＋120px、右端が帯の上端に接する（Figma 実測どおり） */
.p-consult {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: calc(120px + 24px);
    background: var(--color-navy);
    clip-path: polygon(0 120px, 100% 0, 100% 100%, 0 100%);
    /* 帯からはみ出す英字を切る */
    overflow: hidden;
}

.p-consult__wordmark {
    position: absolute;
    left: 0;
    /* Figma の 41px は斜め導入部を除いた帯の上端からの距離 */
    top: calc(120px + 41px);
    color: #ffffff;
    opacity: 0.2;
    font-size: 48.837px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    transform: scaleX(0.6);
    transform-origin: left top;
    pointer-events: none;
}

/* 英字より前面に出す */
.p-consult > *:not(.p-consult__wordmark) {
    position: relative;
}

/* 中央寄せに align-self が要る理由は .p-points__title と同じ */
.p-consult__title {
    align-self: center;
    color: #ffffff;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    transform: scaleX(0.6);
}

.p-consult__lead {
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
}

/* ---------------------------------------------------------------
   サンクス（Figma thanks-2 7826:158）
   決定9のCTA押下後に、結果ページの main と差し替えて表示する1画面。
   ロゴ・ボタン・フッタは他画面と同じ部品なので、ここでは固有部分だけ定義する
   --------------------------------------------------------------- */
.l-thanks {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
}

/* 背景写真は連絡先ステップと同じだが、Figma では上端合わせで左右にはみ出す。

   連絡先ステップと同じ理由で px 固定にする。猫は列の上端からの積み上げで
   位置が決まるので、写真の雪原も上端起点の固定値にしないと、画面が高い端末で
   雪原だけが下がって猫が宙に浮く */
.l-bg-contact--thanks img {
    left: -24%;
    top: 0;
    width: 148%;
    height: 634px;
}

/* 白へのフェードも同じ理由で px 固定にする。写真の下端（634px）の手前
   631px で白へ溶かし切るので、写真の切れ目は見えず、そのまま下のボタンまで
   白がつながる */
.l-bg-contact--thanks::after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 461px, #ffffff 631px);
}

/* Figma の Main Content は 640px。上の文言＋イラストと下のボタンを両端に置く */
.l-main--thanks {
    justify-content: space-between;
    align-items: center;
    gap: 0;
    padding: 64px 16px 24px;
}

.p-thanks__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.p-thanks__message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    /* 長体で詰めた見出しが折り返さないようにする */
    white-space: nowrap;
}

.p-thanks__title {
    color: var(--color-cta-line);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    transform: scaleX(0.6);
}

.p-thanks__lead {
    color: var(--color-heading);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.p-thanks__illust {
    width: 227px;
    height: 340px;
}

/* =====================================================================
   LP（index.php）
   =====================================================================
   Figma（LP 7732:6417）を踏襲。セクションは Figma のフレーム順に並ぶ。

   本文の級数を Figma より落としている箇所がある（共感リスト・特典カード本文）。
   Figma の Gen Interface JP は和文1文字が約 0.864em なのに対し Noto Sans JP は
   全角1em で、同じ級数だと375px幅に収まらないため。長体の見出しと違い本文は
   scaleX を掛けると読みづらくなるので、級数を落として合わせている。
   ===================================================================== */

/* LPは背景写真ではなくセクションごとの背景で組まれているので白地にする */
.l-body-inner--lp {
    background: #ffffff;
}

/* LPは各セクションが自前で余白を持つ（結果ページと同じ考え方） */
.l-main--lp {
    min-height: 0;
    padding: 0;
    gap: 0;
}

/* ---------------------------------------------------------------
   ヒーロー（Figma 7732:6453 / 375×640）
   --------------------------------------------------------------- */
/* CTAが下端をまたいで置かれているため overflow は切らない */
.p-lp-hero {
    position: relative;
    height: 640px;
    background: #f6f9fd;
}

.p-lp-hero__deco {
    position: absolute;
    left: 0;
    width: 375px;
    height: 250px;
    opacity: 0.6;
}

.p-lp-hero__deco--top {
    top: 0;
}

/* Figma（7732:5133）は2枚目を1枚目と同じ top:0 に重ね、上下反転して敷いている。
   下にずらすと図版（top:236px）に隠れて上部のポリゴン柄が半分の濃さになる */
.p-lp-hero__deco--flip {
    top: 0;
    transform: scaleY(-1);
}

.p-lp-hero__wordmark {
    position: absolute;
    left: 0;
    top: 27px;
    fill: var(--color-navy);
    opacity: 0.25;
}

.p-lp-hero__catch {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.p-lp-hero__logo {
    position: absolute;
    left: 16px;
    top: 62px;
    width: 345px;
    height: 169px;
}

.p-lp-hero__grid {
    position: absolute;
    left: 0;
    top: 236px;
    width: 375px;
    height: 404px;
}

/* CTA上のひとことだけ書体を変える。Figma の指定は丸ゴシック系のポップな書体
   （Ruika）だが有料でWebに配信できないため、無料で最も字面の近い
   M PLUS Rounded 1c で代替する。本文の Noto Sans JP は他の箇所でそのまま
   使うので、ここだけ上書きしている。
   太さ・色・影の指定は下の .p-lp-cta__note 側にまとまっている（同じセレクタを
   2か所に分けているのは、並行作業中の箇所に触れないため） */
.p-lp-cta__note {
    font-family: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
}

/* ---------------------------------------------------------------
   CTA（LP内で3か所。ヒーローのものだけ絶対配置）
   --------------------------------------------------------------- */
.p-lp-cta {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* 次セクションの背景に隠れないよう前面に出す */
.p-lp-hero__cta {
    top: 602px;
    z-index: 2;
}

/* 背景の写真・図版に負けないよう Figma でも白いグローが掛かっている。
   Figma の指定は blur 20px 一枚だが、あちらの書体（Ruika）は字面が太く
   影が重なって濃く出る。代替の M PLUS Rounded 1c では同じ指定だと
   グローが拡散して写真に埋もれるため、字面に密着した短い影を重ねて
   Figma の見え方（白フチ＋外側の淡い光）に合わせている */
.p-lp-cta__note {
    color: var(--color-cta);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.143;
    text-shadow:
        0 0 2px #ffffff, 0 0 2px #ffffff, 0 0 2px #ffffff, 0 0 2px #ffffff,
        0 0 20px #ffffff, 0 0 20px #ffffff;
}

/* LPのCTAは結果ページより小ぶりで、白フチと落ち影が付く */
.c-button--lp {
    width: 269px;
    min-height: 56px;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset 0 -2px 0 rgba(0, 0, 0, 0.15);
    /* 幅269pxからアイコン・余白を引くとラベル枠は165px。
       既定の21pxだと「無料で診断スタート」が186pxになり折り返すため一段落とす */
    font-size: 18px;
}

.c-button--lp .c-button__label {
    white-space: nowrap;
}

.c-button--lp .c-button__sub {
    font-size: 15px;
}

/* セクション内に置くCTAだけは左右の余白に合わせて全幅 */
.c-button--lp-wide {
    width: 100%;
}

.c-button__icon--lead {
    width: 32px;
    height: 32px;
}

/* ---------------------------------------------------------------
   診断の概要（Figma 7732:6380 / 375×606）
   --------------------------------------------------------------- */
.p-lp-intro {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* イラストが入る余白。Figma の見出し〜CTA間の空き */
    gap: 216px;
    padding: 64px 24px 40px;
    background: linear-gradient(to bottom, #ffffff, #f6f9fd);
    overflow: hidden;
}

/* 背景の図版はセクションより大きく、Figma と同じ位置で断ち切る */
.p-lp-intro__bg {
    position: absolute;
    left: -29.6%;
    top: -19.94%;
    width: 159.2%;
    height: 119.94%;
    max-width: none;
    object-fit: cover;
}

.p-lp-intro__illust {
    position: absolute;
    left: -38px;
    top: 271px;
    width: 451px;
    height: 319.5px;
    max-width: none;
}

/* 背景・イラストより前面に出す */
.p-lp-intro__head,
.p-lp-intro .c-button {
    position: relative;
}

.p-lp-intro__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.p-lp-intro__badge {
    padding: 4px 20px;
    border-radius: 999px;
    background: rgba(25, 59, 103, 0.07);
    color: #586174;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 0.36px;
    white-space: nowrap;
}

.p-lp-intro__title {
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
    color: var(--color-navy);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.p-lp-intro__lead {
    /* head の gap 8px と合わせて Figma の 16px にする */
    margin-top: 8px;
    color: #586174;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
}

/* ---------------------------------------------------------------
   共感（Figma 7734:6489 / 375×220）
   --------------------------------------------------------------- */
.p-lp-worry {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 16px;
    background: linear-gradient(to bottom, #bdc9d1, #ffffff);
}

.p-lp-worry__title {
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
    color: #001f54;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.p-lp-worry__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Figma は 14px だが、最長の項目（24文字）が Noto Sans JP では 336px となり
   アイコンと余白を含めて 375px に収まらないため 13px に落としている */
.p-lp-worry__item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-navy);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.p-lp-worry__icon {
    flex-shrink: 0;
}

/* ---------------------------------------------------------------
   診断でわかること（Figma 7736:6533 / 375×509）
   --------------------------------------------------------------- */
.p-lp-benefit {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 16px;
    overflow: hidden;
}

.p-lp-benefit__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 写真の上を白へ溶かす膜。背景色では写真の後ろに回るため要素として置く */
.p-lp-benefit__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #ffffff, rgba(245, 248, 253, 0));
}

/* 背景・膜より前面に出す */
.p-lp-benefit__title,
.p-lp-benefit__card {
    position: relative;
}

.p-lp-benefit__title {
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
    color: #001f54;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.p-lp-benefit__title-accent {
    color: var(--color-cta);
}

.p-lp-benefit__card {
    width: 100%;
    padding: 12px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
}

.p-lp-benefit__card-title {
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
    color: #0b2249;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

/* Figma は 16px だが、最長行（20文字）が Noto Sans JP では 320px となり
   カード内側の 299px に収まらないため 14px に落としている */
.p-lp-benefit__card-body {
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
    padding-left: 20px;
    color: #000000;
    font-size: 14px;
    line-height: 1.5;
}

/* ---------------------------------------------------------------
   6タイプ紹介（Figma 7736:6714 / 375×577）
   --------------------------------------------------------------- */
.p-lp-types {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0;
    background: #ffffff;
}

.p-lp-types__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.p-lp-types__title {
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
    color: var(--color-cta);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.p-lp-types__subtitle {
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
    color: #001f54;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.p-lp-types__grid {
    position: relative;
    margin-top: 12px;
    width: 375px;
}

/* 図版の上下を白へ溶かし、セクションの白地と地続きに見せる（Figma のマスク） */
.p-lp-types__grid::before,
.p-lp-types__grid::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 100px;
}

.p-lp-types__grid::before {
    top: 0;
    background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0));
}

.p-lp-types__grid::after {
    bottom: 0;
    background: linear-gradient(to top, #ffffff, rgba(255, 255, 255, 0));
}

/* 図版の中央に重ねる（Figma の座標そのまま） */
.p-lp-types__cta {
    position: absolute;
    left: 53px;
    top: 174px;
}

/* ---------------------------------------------------------------
   フッタ（結果ページはCTA帯から続く濃紺）
   --------------------------------------------------------------- */
.l-footer--dark {
    background: #102a4d;
}

.l-footer--dark .l-footer__nav a {
    color: rgba(255, 255, 255, 0.65);
}

.l-footer--dark .l-footer__copy {
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
}

/* ---------------------------------------------------------------
   実機SPでの横幅合わせ
   ---------------------------------------------------------------
   このデザインは Figma の 375px 実寸で切られており、座標も 375 基準の
   絶対値で置いている。一方 .l-body の #cccccc は「PCで列の外側だと分かる
   ように」置いた色で、PCでは広いグレー地として意図どおり読める。

   ところが実機のSPは 390/393/412/430 と 375 より広いものばかりで、
   同じグレーが列の左右 7〜28px の細い帯になる。図版（6タイプのコラージュ）は
   列幅いっぱいで左右に暈しが無いため、この帯が「画像のフチに残る線」に見える。
   逆に 360px 級の端末では 375px の列がはみ出して横スクロールが出る。

   そこで実機幅では列を 375 基準のまま viewport/375 倍して、ぴったり合わせる。
   calc は長さ同士の除算ができないため、無単位の比は tan(atan2()) で作る。
   zoom 非対応のブラウザでは従来どおり 375px 中央寄せにフォールバックする。 */
@media (max-width: 480px) {
    .l-body-inner {
        max-width: none;
        width: var(--width-inner);
        zoom: tan(atan2(100vw, 375px));
    }

    /* 実機では列が画面幅いっぱいに広がるため、#cccccc の地色は「列の外側だと分かる」
       という PC 向けの役目を終える。一方 iOS Safari はアドレスバーを縮めるために
       常に少しスクロールでき、そのとき列の外が帯として見えてしまう。
       列と同じ色に揃えて、画面全体が一枚に見えるようにする */
    .l-body {
        background: #ffffff;
    }

    /* 設問ページの列は白 → #eef3fb の縦グラデーションで、外が見えるのは下端側 */
    .l-body--question {
        background: #eef3fb;
    }

    /* 列の高さは step.php の fitColumnToViewport() が実測して画面ぴったりに合わせる。
       vh 単位を使わないのは、zoom と vh の相互作用がブラウザで割れるため
       （Chrome は zoom 前、Safari は zoom 後の座標系で 100vh を解決する）。

       640px の下限を残すと画面の低い端末でその下限が勝ち、収まりきらず
       スクロールが出る。注意文は margin-top:auto で下端に寄るため、
       下限を外しても配置は変わらない */
    .l-main {
        min-height: 0;
    }
}