@charset "UTF-8";

/* ================================================================
   株式会社Logic - contact.css
   お問い合わせページ / 送信完了ページ 共通スタイル
   ※ thanks.php も同じCSSを読み込む
================================================================ */

/* ── page-hero（背景画像）のフォーカス位置 ──
   ※ 共通側（common.css の .page-hero__bg）は center（中央固定）。
     このページだけ top 75%（横中央・縦は上から75%）にしたいので上書きする。 */
.page-contact .page-hero__bg {
    background-position: center top 75%;
}

/* ================================================================
   電話・FAXでのお問い合わせ（Direct Contact）
   ※ TEL / FAX を2カラムに並べ、FAX 側だけ下に
     注意書きと記載事項のチェックを置く。
   ※ アイコン画像とチェックマークは共通CTA
     （includes/contact.php / common.css の .cta-box 群）と同じもの。
     アイコンの寸法・object-fit の扱いも .cta-box__icon に揃えてある。
   ※ このセクションは section--dark。共通CTA は暗い地に
     明るいカードを置く作りだったが、ここは面を置かず
     枠線だけで組む（指定されたレイアウトに合わせている）。
   ※ 見出しは英字ラベル＋タイトルの2段（ともに中央寄せ）。
     リード文は置かない。
================================================================ */

/* ── パンくず ──
   ※ ※重要※ 直下のセクションの「上端の色」に合わせる。
     ここでは Direct Contact（.contact-lead）の
     --color-bg-raise（#111111）。
   ※ 共通の .breadcrumb は --color-bg（#0D0D0D）なので、
     そのままだと 4階調暗い帯がヒーローと
     Direct Contact の間に入る。
   ※ Direct Contact の地を変えたときは
     ここもセットで直すこと。
   ※ 罫線も暗背景向けにする。 */
.page-contact .breadcrumb {
    background-color: var(--color-bg-raise);
    border-bottom-color: var(--color-border-dark);
}

/* ── セクションの地 ──
   ※ 値は --color-bg-raise（#111111）。下に続く
     メールフォーム（.contact-form-section）の
     上端と同値なので、境目が出ずに続く。
     向こうはそこから #0D0D0D へ沈んでいく。
   ※ HTML 側の .section--dark（--color-bg-dark ＝ #000000）を
     打ち消す。純黒のままだと、下のフォーム（#111111）との
     境で段差が出る。
   ※ ※重要※ .section--dark は背景色以外に
     見出し・ラベルの文字色を白系にする役割も持つので、
     HTML からは外さないこと。ここで背景色だけを上書きする。
   ※ 詳細度 0-2-0。.section--dark（0-1-0）より強いので
     読み込み順に依存せずに勝つ。 */
.page-contact .contact-lead {
    background-color: var(--color-bg-raise);
}

/* ※ タイトルの帯アニメ（common.css の .section-head.js-reveal）は
     width: fit-content で帯を文字幅に限定する。
     そのままだと左寄せになるので、margin-inline: auto で
     中央に戻す。text-align だけでは寄らない。
   ※ Direct Contact とフォームの両セクションで同じ扱いにする。 */
.contact-lead .section-head,
.contact-form-section .section-head {
    text-align: center;
}

.contact-lead .section-head__title,
.contact-form-section .section-head__title {
    margin-inline: auto;
}

/* ── 英字見出し（--swap）の大きさ ──
   ※ 他ページ（company / news / works）の --swap 見出しと揃える。
     向こうの定義は company.css の .page-company .section-head__title など。
     値を変えるときはセットで見直すこと。
       ベース      32〜42px
       1024px以上  42〜60px
   ※ 共通側の既定（.section-head__title）は 24〜30px → 768px以上 30〜40px。
     英字を見出しの主役にしている --swap では小さいのでここで引き上げる。
   ※ 詳細度 0-2-0。共通の .section-head__title（0-1-0）より強い。 */
.page-contact .section-head__title {
    font-size: clamp(2rem, 7vw, 2.625rem);
}

@media (min-width: 1024px) {
    .page-contact .section-head__title {
        font-size: clamp(2.625rem, 4.2vw, 3.75rem);
    }
}

/* ラベルを中央に寄せる。
   ※ 共通側の .section-head__label は flex なので、
     justify-content で寄せる。 */
.contact-lead .section-head__label,
.contact-form-section .section-head__label {
    justify-content: center;
}

/* ラベルの装飾を左右両サイドに出す。
   ※ 左側（::before）は共通側が描くので、ここでは
     右側（::after）を同じ形で足すだけ。
   ※ このページの Contact マークは共通の既定（塗りつぶし正方形）。
     形は --label-mark の正方形で、大きさは共通側の値をそのまま使う。
   ※ 暗背景なので白系で描く。common.css の
     .section--dark .section-head__label::before と同じ濃さに揃えてある。
   ※ 帯アニメの弾ける動き（scale）は ::before 側にしかかからないので、
     右側も同じ動きに揃える。 */
/* ラベルの装飾を左右両サイドに出す。
   ※ 形は「枠だけの正方形（中央が穴）」。
     Contact の目印として、共通CTA・ヘッダー・
     ドロワー・フッターの Contact と揃えてある。
     形の定義は common.css の .c-mark-frame と同じ。
     ※ 以前は共通の既定（塗りつぶし正方形）のままだった。
   ※ 外形は --mark-size（10px）に上げる。
     共通の既定は --mark-size-solid（8px）だが、
     枠線 2px を引くと中央の穴が 4px しか残らない。
     共通CTA（.sec-cta__head）も同じ理由で外形を上げている。
   ※ 左側（::before）は共通側が塗りつぶしで描くので、
     background-color を消して border で描き直す。
     これがないと中央の穴が埋まる。
   ※ 右側（::after）には共通側の content もサイズ指定も
     無いので、ここで一式与える。
   ※ 暗背景なので白系で描く。濃さは共通CTA と同じ 0.66。
   ※ 共通側はこの装飾を scale(0) → scale(1) で弾けさせる。
     ::before / ::after の両方が対象なので、ここで
     transform を上書きしないこと。 */
.contact-lead .section-head__label {
    --label-mark: var(--mark-size);
}

.contact-lead .section-head__label::before,
.contact-lead .section-head__label::after {
    content: '';
    width: var(--label-mark);
    height: var(--label-mark);
    flex-shrink: 0;
    line-height: 1;
    background-color: transparent;
    background-image: none;
    border: 2px solid rgba(245, 244, 242, 0.66);
}

/* ※ 弾ける動き（scale）は共通側に任せる。
     .section-head.js-reveal .section-head__label::before, ::after が
     両方を対象にしているので、ここで右側だけを
     個別に動かす必要はない。
   ※ 以前はここで
         .contact-lead .section-head.js-reveal .section-head__label::after
         .contact-lead .section-head.js-reveal.is-revealed 同::after
         prefers-reduced-motion 内の同::after
     の3本を持っていたが、共通側が両方を拾うように
     なったので削除した。共通CTA・施工実績・事業内容も同じ。 */

/* ── 2カラム ──
   ※ 未満 768px は1カラム。番号が大きいので横に2つ並ばない。
   ※ FAX 側の方が背が高い（チェックがある）ので、
     上揃えにして番号の箱の高さを合わせる。 */
.contact-lead__direct {
    display: grid;
    gap: var(--spacing-lg);
    max-width: var(--section-width-lg);
    margin-inline: auto;
}

@media (min-width: 768px) {
    .contact-lead__direct {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
        /* ※ 左右のカラムを同じ高さに揃える。
             FAX 側は下に記載事項のチェックがあるので
             中身の量が違うが、枠を付けたので
             上揃え（start）だと枠の下端が揃わない。
           ※ ※重要※ 以前は align-items: start だった。
             枠をやめて中身だけに戻すときは
             start に戻すこと（番号の箱の上端を揃えるため）。
           ※ stretch はグリッドの既定なので、
             この1行を削っても同じ結果になる。
             意図を明示するために書いてある。 */
        align-items: stretch;
    }
}

@media (min-width: 1024px) {
    .contact-lead__direct {
        gap: var(--spacing-lg);
    }
}

/* ── カラムの枠 ──
   ※ 共通CTA（common.css の .cta-group）と同じ形。
     面は塗らず、輪郭をこの枠線だけで示す。
     色も向こうと同じ --color-border。
     変えるときは両方を見ること。
   ※ 中の番号の箱（.contact-lead__box）は枠線を持たない。
     両方に枠があると二重になるため。
   ※ 内側の余白も共通CTA に揃えて、子要素側ではなく
     この箱が持つ。
   ※ ホバーで枠線の色を上げるのも共通CTA と同じ。
     ただし TEL 側は a、FAX 側は div なので、
     反応は下の a 側だけに付けてある。 */
.contact-lead__col {
    text-align: center;
    border: 1px solid var(--color-border);
    padding: var(--spacing-sm);
    transition: border-color var(--transition);
}

@media (min-width: 768px) {
    .contact-lead__col {
        padding: var(--spacing-md) var(--spacing-sm);
    }
}

/* 箱の上の小見出し。 */
.contact-lead__col-title {
    font-size: 0.9375rem;
    letter-spacing: 0.14em;
    color: rgba(245, 244, 242, 0.8);
    margin-bottom: var(--spacing-xs);
}

/* ── 番号の箱 ──
   ※ 角は落とさない。このサイトの方針。
   ※ TEL は a、FAX は div。同じクラスで見た目を揃え、
     ホバーの反応だけ a 側に付ける。 */
.contact-lead__box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    /* ※ 枠線と内側の余白は外側の .contact-lead__col が持つ。
         ここにも枠を付けると二重になる。
       ※ 以前はここが
             border: 1px solid var(--color-border-dark);
             padding: var(--spacing-sm) var(--spacing-xs);
         （768px以上で padding: var(--spacing-md) var(--spacing-sm)）
         を持っていた。外枠をやめてここだけの枠に戻すときは
         この2つを復活させる。 */
    color: var(--color-text-inverse);
}

@media (min-width: 768px) {
    .contact-lead__box {
        gap: 1rem;
    }
}

/* ※ ホバーで面をごく薄く満たし、枠線を白に上げる。
     値（0.14 / 枠線白）はトップの事業内容カードと
     .index-about__link に揃えてある。 */
.contact-lead__col:has(a.contact-lead__box:is(:hover, :active, :focus-visible)) {
    border-color: var(--color-text-inverse);
}

/* アイコン。寸法の扱いは共通CTA の .cta-box__icon と同じ。
   ※ 番号の文字サイズに揃えたいので rem でなく em で持つ。
     番号側を clamp で可変にしているため、固定値だと
     狭い画面でアイコンだけが大きく残る。 */
.contact-lead__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.05em;
    height: 1.05em;
    flex-shrink: 0;
    font-size: clamp(1.5rem, 6vw, 2rem);
}

@media (min-width: 768px) {
    .contact-lead__icon {
        font-size: clamp(1.5rem, 3vw, 2rem);
    }
}

.contact-lead__icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.contact-lead__num {
    font-family: var(--font-en);
    font-size: clamp(1.5rem, 6vw, 2rem);
    line-height: 1.2;
    letter-spacing: 0.04em;
}

@media (min-width: 768px) {
    .contact-lead__num {
        font-size: clamp(1.5rem, 3vw, 2rem);
    }
}

/* 箱の下の注記（受付時間 / FAXの注意書き）。 */
.contact-lead__note {
    margin-top: var(--spacing-xs);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    line-height: 1.8;
    color: rgba(245, 244, 242, 0.66);
}

/* ── FAX の記載事項 ──
   ※ マークは共通の .c-mark-check（common.css）。
     共通CTA の Notice と同じものを使い、色だけ反転する。
     あちらは明るいカードの上なので 枠=墨黒 / チェック=白だが、
     ここは暗背景なので 枠=白 / チェック=墨黒 にする。
   ※ --mark-size を 0.875rem に上げるのも共通CTA と同じ理由。
     既定の 10px だとチェックが枠に接してつぶれる。
   ※ 番号の箱と同じく中央寄せ。項目が短いので
     横に並べ、入り切らなければ折り返す。 */
.contact-lead__checklist {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    margin-top: var(--spacing-xs);
}

.contact-lead__check-item {
    --mark-size: 0.875rem;
    --mark-ink: var(--color-text-inverse);
    --mark-ink-sub: var(--color-primary);

    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1.6;
    color: var(--color-text-inverse);
}

/* ================================================================
   お問い合わせフォーム：ラベル装飾（封筒）
   共通CTAの Mail Contact（common.css の
   .cta-group:nth-child(2) .cta-group__title::before）と同じ形。

   ※ 共通側は疑似要素で描いていてクラスを付けられないので、
     形をここに転記してある。形を変えるときは
     共通CTA 側とセットで見直すこと。

   ── 封筒の描き方 ──
   下地は塗りつぶしの正方形（淡）。
   その上半分を左右に2分割し（background-size: 50% 50%）、
   それぞれのタイルを対角線で半分塗ると、
   2枚合わせて「上辺が底・中央が頂点」の三角形（フラップ）になる。

   ※ ※重要※ 必ず正方形にすること。
     to top right などの方向指定は、ボックスが正方形のときだけ
     分割線が角と角を正確に結ぶ。横長にすると形が潰れる。
   ※ 共通CTA は暗背景なので白系（0.85 / 0.35）で描いているが、
     このセクションは明るい背景（section--light）なので
     暗色で描く。濃淡の比は合わせてある。
   ※ 外形は共通CTA と同じ 0.75rem。
     共通の既定（--mark-size-solid = 8px）だとフラップが潰れるので、
     ここだけ大きく取る。
   ※ background-color を明示するのは、共通側の
     塗りつぶし指定（--color-text-light）を上書きするため。
   ※ 共通側はこの装飾を scale(0) → scale(1) で弾けさせる。
     transform をここで上書きしないこと。
================================================================ */

.contact-form-section .section-head__label {
    --label-mark: 0.75rem;
    --mark-ink: var(--color-title);
    /* ※ 暗転前は白地（section--light）だったので墨黒30%。
         黒地では下地が完全に消えて封筒の形が読めなくなるので、
         共通CTAの Mail Contact と同じ白系 35% に合わせる。 */
    --mark-ink-sub: rgba(245, 244, 242, 0.35);
}

/* ※ 左右両サイドに出す。
     左側（::before）は共通側がボックスを作っているので
     形を上書きするだけだが、右側（::after）は
     content から自前で用意する必要がある。
   ※ Direct Contact 側と同じ扱いに揃えてある。 */
.contact-form-section .section-head__label::before,
.contact-form-section .section-head__label::after {
    content: '';
    width: var(--label-mark);
    height: var(--label-mark);
    flex-shrink: 0;
    line-height: 1;
    background-color: var(--mark-ink-sub);
    background-image:
        linear-gradient(to top right, transparent 50%, var(--mark-ink) 50%),
        linear-gradient(to top left, transparent 50%, var(--mark-ink) 50%);
    background-size: 50% 50%;
    background-repeat: no-repeat;
    background-position:
        left top,
        right top;
}

/* ※ 帯アニメの弾ける動き（scale）は共通側で ::before にしか
     かからないので、右側も同じ動きに揃える。
     （揃えないと左だけ弾けて右は最初から出たままになる） */
.contact-form-section .section-head.js-reveal .section-head__label::after {
    transform: scale(0);
    transform-origin: center;
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.contact-form-section .section-head.js-reveal.is-revealed .section-head__label::after {
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .contact-form-section .section-head.js-reveal .section-head__label::after {
        transform: scale(1);
        transition: none;
    }
}

/* ── セクションの地（上から下への勾配）──
   上端 #111111 → 下端 #0D0D0D。
   ※ トップの強み（index.css の .index-strengths）、
     事業内容の対応地域（service.css）、
     施工実績（works.css）、会社概要の地図（company.css）と
     同じ持ち方。
   ※ 下端をページ背景（--color-bg ＝ #0D0D0D）と同値にして
     次の共通CTA へつなげる。
   ※ 色を変えるときは下の2つの変数だけを触る。
   ※ background-color も下端色で持つ。
     HTML 側の .section--light（--color-bg-light ＝ #1F1F1F）を
     確実に打ち消すため。
   ※ 詳細度 0-2-0。.section--light（0-1-0）より強いので
     読み込み順に依存せずに勝つ。 */
.page-contact .contact-form-section {
    --form-bg-top: var(--color-bg-raise);
    /* 上端：#111111 */
    --form-bg-bottom: var(--black-3);
    /* 下端：#0D0D0D */

    background-color: var(--form-bg-bottom);
    background-image: linear-gradient(to bottom,
        var(--form-bg-top) 0%,
        var(--form-bg-bottom) 100%);
}

/* ================================================================
   フォーム全体
================================================================ */

/* ※ エラー表示の色をここで持つ。
     枠線・下地・文字・印の4箇所で使い回すので、
     色を変えるときはこの2行だけを触ればよい。
     （以前は #C0392B / #FDF6F5 を各箇所に直書きしていた）

   ── 幅の段階 ──
   ※ 共通の .section__inner と同じ考え方。
     576px → 800px → 880px の3段階で、
     切り替わりも __inner と同じ 768px / 1024px に揃えている。
     （以前は --section-width-lg（1024px）の1段だけだったので、
       狭い画面ではセクション幅に押さえられ、
       広い画面では入力欄が横に伸びすぎていた）
   ※ 上限は __inner の 1320px より狭く取る。
     入力欄は横に長すぎると起点と終点が離れて使いにくいため。
   ※ 値は :root に定義済みのトークンを使う。
     880px は --section-width-narrow。 */
.contact-form {
    /* ※ 暗転前は #C0392B（濃い赤）と #FDF6F5（淡い赤の下地）。
         黒地では前者はコントラストが足りず、後者は
         真っ白な面が入力欄いっぱいに出てしまう。
         赤は明るい側へ、下地はその赤の半透明に置き換える。 */
    --form-error-ink: #E8695C;
    --form-error-bg: rgba(232, 105, 92, 0.14);

    max-width: var(--section-width-sm);
    margin-inline: auto;
    margin-top: var(--spacing-lg);
}

@media (min-width: 768px) {
    .contact-form {
        max-width: var(--section-width-content);
        margin-top: var(--spacing-xl);
    }
}

@media (min-width: 1024px) {
    .contact-form {
        max-width: var(--section-width-narrow);
    }
}

/* honeypot（ボット対策・非表示） */
.contact-form__honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ================================================================
   フォーム行
================================================================ */

.form-row {
    display: grid;
    gap: 0.5rem;
    padding-block: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
}

@media (min-width: 768px) {
    .form-row {
        grid-template-columns: 14rem 1fr;
        gap: var(--spacing-sm);
        align-items: start;
        padding-block: var(--spacing-md);
    }
}

.form-row:first-child {
    border-top: 1px solid var(--color-border);
}

/* ラベル。バッジ→テキストの順で横に並べる。
   ※ r-doboku の .form-label-wrapper と同じ考え方。
     必須バッジを左端に揃えると、行の頭で
     必須か任意かが一目で分かる。
     （以前はラベル名の後ろに付けていたので、
       ラベル名の長さでバッジの位置がそろっていた）
   ※ align-items: flex-start にするのは、ラベル名が
     折り返したときにバッジが1行目に揃うようにするため。 */
.form-row__label {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--color-title);
}

@media (min-width: 768px) {
    .form-row__label {
        padding-top: 0.875rem;
    }
}

/* ※ バッジとベースラインを揃えるため、
     テキスト側の行高をバッジの高さに合わせる。 */
.form-row__label-text {
    line-height: 1.5;
}

/* ── 必須 / 任意バッジ ──
   ※ r-doboku と同じく、必須だけでなく任意も明示する。
     バッジが無い行があると「付け忘れなのか任意なのか」が
     判別できないし、ラベルの左端も揃わない。
   ※ 角は落とさない。このサイトの方針。
   ※ flex-shrink: 0 は、ラベル名が長いときに
     バッジが縮むのを防ぐ。 */
.form-row__badge {
    display: inline-block;
    flex-shrink: 0;
    padding: 0.1875rem 0.5rem;
    font-family: var(--font-family);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.5;
    color: var(--color-text-inverse);
}

/* ※ 暗転前は墨黒の面に白文字だった。黒地では面が消えて
     白文字だけが浮き、バッジに見えない。白面に黒文字へ反転する。
     新着情報のカテゴリバッジと同じ考え方。 */
.form-row__badge--required {
    background-color: var(--color-text-inverse);
    color: var(--black-3);
}

/* ※ 任意は一段落とす。必須（白面）との強弱で
     どちらを優先するべきかが伝わる。
   ※ 暗転前は --color-text-light の面に白文字だったが、
     黒地では面と文字の差が足りない。面を黒側に置いて
     文字を本文色にし、「弱いバッジ」として見せる。 */
.form-row__badge--optional {
    background-color: var(--black-8);
    color: var(--color-text);
}

.form-row__field {
    min-width: 0;
}

/* ── エラーメッセージ ──
   ※ r-doboku の .form-error-msg と同じ考え方。
     文の頭に印を付けて、ただの赤い文字より
     「エラーである」ことが伝わるようにする。
   ※ あちらは Font Awesome のアイコン（丸＋！）を使っているが、
     logic はアイコンフォントを読み込んでいないので CSS で描く。
     形も丸でなく正方形にして、このサイトの直角の方針に合わせる。
   ※ 非表示の既定は display: none。
     表示するときは flex にして印と文を横に並べる。 */
.form-row__error {
    display: none;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    line-height: 1.6;
    color: var(--form-error-ink);
}

.form-row.is-error .form-row__error {
    display: flex;
}

/* エラーの印（正方形に「！」）。
   ※ flex-shrink: 0 は、メッセージが折り返すときに
     印が縮むのを防ぐ。 */
.form-row__error::before {
    content: '!';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    font-family: var(--font-en);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    /* ※ 赤を明るくしたので、印の文字は白ではなく黒側にする。 */
    color: var(--black-3);
    background-color: var(--form-error-ink);
}

/* ================================================================
   入力要素
================================================================ */

.form-input,
.form-textarea {
    display: block;
    width: 100%;
    padding: 0.875rem 1rem;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: var(--color-text);
    /* ※ 面は塗らない。入力領域は枠線だけで示す。
         サイト内の「面を塗らない箱」（共通CTA の .cta-group、
         Direct Contact の .contact-lead__col、
         トップの強みカード）と揃えてある。
       ※ 以前は --color-surface（#282828）を塗っていた。
         面で「書ける場所」を示す形に戻すときは
         この1行を復活させる。
       ※ 背景が透けるので、セクションの勾配
         （#111111 → #0D0D0D）がそのまま入力欄の地になる。 */
    background-color: transparent;
    border: 1px solid var(--color-border);
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color var(--transition), background-color var(--transition);
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    /* ※ 暗転前は墨黒で「濃くする」フォーカスだった。
         黒地では最も明るい色が同じ役割を担う。 */
    border-color: var(--color-text-inverse);
}

/* ※ 本文（--color-text）より一段暗くする。
     暗転前は #B5B2AD（白地に淡いグレー）だったが、
     黒地ではこれが本文より明るくなって逆転してしまう。 */
.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--color-text-light);
}

.form-textarea {
    resize: vertical;
    min-height: 11rem;
}

/* ※ 入力欄のエラー表示。枠線を赤くして下地を淡い赤にする。
     r-doboku の .form-input.is-error と同じ手法。 */
.form-row.is-error .form-input,
.form-row.is-error .form-textarea {
    border-color: var(--form-error-ink);
    background-color: var(--form-error-bg);
}

/* ※ ラジオの行（お問い合わせ種別）は input を隠していないが、
     選択しないまま送信したときに何も変わらないと
     どこがエラーなのか分からない。
     入力欄と揃えて枠線を赤くする。 */
.form-row.is-error .form-radio {
    border-color: var(--form-error-ink);
}

/* ================================================================
   ラジオボタン
================================================================ */

.form-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

@media (min-width: 576px) {
    .form-radio-group {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.75rem;
    }
}

.form-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1.125rem;
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
    border: 1px solid var(--color-border);
    /* ※ 入力欄（.form-input）と揃えて面は塗らない。
         以前は --color-surface。戻すときは
         .form-input 側とセットで復活させる。 */
    background-color: transparent;
    cursor: pointer;
    transition: border-color var(--transition), background-color var(--transition), color var(--transition);
}

.form-radio:hover {
    border-color: var(--color-text-inverse);
}

/* ※ 丸ではなく四角で描く。
     このサイトは装飾をすべて直角で組んでいるので、
     共通のマーク（.c-mark-* ）と同じ方針に揃えている。
   ※ 選択時の中身も正方形。形は共通の
     .c-mark-solid（塗りつぶし正方形）と同じ考え方。 */
.form-radio__input {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 1.0625rem;
    height: 1.0625rem;
    margin: 0;
    border: 1px solid var(--color-border);
    /* ※ iOS Safari 対策。appearance: none だけでは
         ネイティブの丸い枚線（border-radius）が残ることがあるので
         明示的に 0 にする。.form-input と同じ対応。 */
    border-radius: 0;
    /* ※ 親（.form-radio）の面を外したので、ここも透明にする。
         以前は --black-3 を塗って「親より暗い窓」に
         見せていたが、親が透けると地と同色になって
         塗る意味が無くなる。
       ※ 選択状態は下の ::after（中の正方形）で示す。 */
    background-color: transparent;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color var(--transition);
}

.form-radio__input:checked {
    border-color: var(--color-text-inverse);
}

/* 中身の正方形。
   ※ ※重要※ top/left の % と transform で中央寄せしない。
     appearance: none を当てた input の中では、疑似要素の
     % の基準が padding ボックスなのか border ボックスなのか
     ブラウザで揺れるため、transform と組み合わせると
     中心がずれる（実際にずれた）。
   ※ inset で四辺からの距離を直接指定する。
     % も transform も使わないので、どのエンジンでも
     同じ位置になり、半ピクセルの丸めも起きない。
   ※ 寸法：枠 17px（線1px）→ 内側 15px。
     inset: 3px なら中身は 9px で、上下左右に 3px ずつ均等に残る。
     ※ この inset の値を増やすほど中身が小さくなる。
       内側（幅 - 2px）から inset×2 を引いた値が
       整数pxになるように保つこと。 */
.form-radio__input:checked::after {
    content: '';
    position: absolute;
    inset: 3px;
    /* ※ 暗転前は墨黒。黒地では中身が完全に消えるので白にする。 */
    background-color: var(--color-text-inverse);
}

/* ※ 選択中の行は枠線を白に上げて示す。
     ※ 以前は background-color で面も一段上げていたが、
       面を塗らない方針に合わせて外した。
     ※ 選択が弱く感じる場合は、面を戻すより
       ラジオの中の正方形（::after）を大きくするか、
       文字色を白に上げる方が方針と揃う。 */
.form-radio:has(.form-radio__input:checked) {
    border-color: var(--color-text-inverse);
}

/* ================================================================
   個人情報保護方針（アコーディオン）の中身
   ※ ブロックの位置（送信ボタンの下）と margin-top は
     ファイル末尾寄りの .form-privacy が持つ。
================================================================ */

.form-privacy__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-align: left;
    border: 1px solid var(--color-border);
    background-color: transparent;
    transition: border-color var(--transition);
}

.form-privacy__toggle:hover {
    border-color: var(--color-text-inverse);
}

.form-privacy__toggle-icon {
    position: relative;
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}

.form-privacy__toggle-icon::before,
.form-privacy__toggle-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    /* ※ 暗転前は墨黒。黒地では＋−の線が消えるので白にする。 */
    background-color: var(--color-text-inverse);
    transition: transform 0.3s ease;
}

.form-privacy__toggle-icon::after {
    transform: rotate(90deg);
}

.form-privacy__toggle[aria-expanded="true"] .form-privacy__toggle-icon::after {
    transform: rotate(0deg);
}

/* ── 高さアニメーション（max-height 方式）──
   r-doboku の .privacy-policy-accordion__content と同じ方式。

   ※ ※重要※ 以前は grid-template-rows: 0fr → 320px としていたが、
     CSS の遷移は fr（flex）と px（length）の間を補間できない。
     0fr → 1fr なら動くが、高さを固定値にした時点で
     アニメが死んでパッと切り替わるだけになっていた。
     max-height なら 0 → 固定値 の両方が length なので確実に動く。

   ※ 高さは --privacy-h の1行で決まる（r-doboku と同じ 280px）。
     入り切らない分は縦スクロールで見せる。

   ※ box-sizing: border-box なので、閉じているときは
     下線の 1px だけが残る。そのため transparent にしておき、
     開いたときだけ色を付ける。 */
.form-privacy__body {
    --privacy-h: 280px;

    max-height: 0;
    overflow: hidden;
    border-inline: 1px solid var(--color-border);
    border-bottom: 1px solid transparent;
    transition: max-height 0.4s ease, border-color 0.4s ease;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.form-privacy__body::-webkit-scrollbar {
    width: 6px;
}

.form-privacy__body::-webkit-scrollbar-track {
    background-color: transparent;
}

.form-privacy__body::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
}

/* ※ -webkit-overflow-scrolling は iOS での慣性スクロール用。
     ドロワー（common.css）でも同じ指定を使っている。
   ※ スクロールを許すのは開いているときだけ。
     閉じている間に auto にしてしまうと、高さ0の状態でも
     スクロールの入れ物になり、キーボード操作で中身に
     フォーカスが入って先頭がずれることがある。 */
.form-privacy__body.is-open {
    max-height: var(--privacy-h);
    overflow-y: auto;
    border-bottom-color: var(--color-border);
    -webkit-overflow-scrolling: touch;
}

/* ※ パディングは常に持たせる。
     閉じている間は上の max-height: 0 と overflow: hidden で
     中身ごと切り落とされるので、開閉で切り替える必要がない。
     （以前は .is-open のときだけ付けていたが、それだと
       開く瞬間にパディングが増えて中身が跳ねる） */
.form-privacy__inner {
    padding: var(--spacing-sm) 1.25rem;
}

.form-privacy__text {
    font-size: 0.875rem;
    line-height: 1.9;
    color: var(--color-text-light);
    margin-bottom: 0.75rem;
}

.form-privacy__text:last-child {
    margin-bottom: 0;
}

/* ── 条項リスト（dl）──
   ※ 連番は CSS カウンタで自動付番する。
     decimal-leading-zero なので 1 → 01、2 → 02 と 0 埋めになる。
     HTML に番号を書かないので、項目を増減・入れ替えしてもずれない。
   ※ dt（見出し）と dd（本文）の対を縦に積む。
     dd の左インデントは番号の幅に揃えて、本文の左端と
     見出しの文字の左端を一直線にする。
     幅は --privacy-num-w の1行で決まる。 */
.form-privacy__list {
    --privacy-num-w: 2.25rem;

    counter-reset: privacy;
    margin-bottom: 0.75rem;
}

.form-privacy__term {
    counter-increment: privacy;
    display: flex;
    align-items: baseline;
    gap: calc(var(--privacy-num-w) - 1.75rem);
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.6;
    color: var(--color-title);
}

/* 項目間の隔たり。
   ※ 先頭の dt には付けない（リード文の直下なので）。 */
.form-privacy__term:not(:first-child) {
    margin-top: var(--spacing-sm);
}

/* 連番。
   ※ 英字書体で、本文より一段薄くして見出しの邪魔をしない。
   ※ 幅を固定して、dd のインデントと揃える。 */
.form-privacy__term::before {
    content: counter(privacy, decimal-leading-zero);
    flex-shrink: 0;
    width: 1.75rem;
    font-family: var(--font-en);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--color-text-light);
}

.form-privacy__desc {
    margin-top: 0.25rem;
    padding-left: var(--privacy-num-w);
    font-size: 0.875rem;
    line-height: 1.9;
    color: var(--color-text-light);
}

/* ※ 条項本文の中の箇条書き（第三者提供の例外など）。
     行頭記号は・を CSS で付ける（HTML に書かない）。
     list-style を使わないのは、common.css のリセットで
     ul の list-style と padding を消してあるため。
   ※ 本文と同じ文字サイズ・同じ色で揃え、
     インデントと行頭記号だけで従属を示す。 */
.form-privacy__sublist {
    margin-top: 0.375rem;
}

.form-privacy__subitem {
    position: relative;
    padding-left: 1rem;
}

.form-privacy__subitem::before {
    content: '・';
    position: absolute;
    left: 0;
}

/* ================================================================
   送信ボタン
   ※ フォームの直後に置く（r-doboku と同じ順）。
     以前は同意チェックを挿んでアコーディオンの後だった。
================================================================ */

/* ※ ボタンは右寄せ。
     トップの Philosophy（.index-about__link）や
     採用（.index-recruit__button）と同じ扱い。
   ※ ※重要※ .btn--frame はL字を --frame-offset（0.5rem）だけ
     外側に飛び出させるので、右端に寄せ切ると
     右のL字がセクションの余白に食い込む。
     padding-right で飛び出し分を逃がしてある。
   ※ 以前は text-align: center だった。
     中央に戻すときは下の2行を text-align: center に戻し、
     padding-right を外す。 */
.contact-form__submit {
    margin-top: var(--spacing-lg);
    /* ※ 768px未満は中央配置。768px以上で右寄せに切り替える。 */
    text-align: center;
}

@media (min-width: 768px) {
    .contact-form__submit {
        text-align: right;
        padding-right: 0.5rem;
    }
}

/* ※ 見た目は共通の .btn / .btn--frame に任せ、
     ここは幅の指定だけを持つ。
     トップの Philosophy（.index-about__link）と同じボタン。
   ※ 幅は内容に合わせる（.btn の padding: 0 2rem で決まる）。
     ※ 以前は width: calc(100% - 1rem) / max-width: 22rem で
       横長のボタンにしていたが、右寄せにしたので
       幅いっぱいだと寄っているのが見えない。
     ※ ボタンを再び横長に戻すときは、上の
       .contact-form__submit を中央寄せに戻すこと。
   ※ .btn は inline-flex なので、text-align: right（親側）で
     そのまま右に寄る。ここで margin-left: auto は不要。 */
.contact-form__button {
    min-width: 16rem;
}

/* ── 紙飛行機アイコン ──
   ※ 寸法の扱いは共通CTA の .cta-box__icon と同じ。
     文字サイズに揃えたいので rem でなく em で持つ。
   ※ flex-shrink: 0 は、文言が長いときに
     アイコンが縮むのを防ぐ。
   ※ ボタンは .btn が gap: 0.75rem を持つので、
     アイコンと文字の間隔はそちらで決まる。 */
.contact-form__button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
}

/* ※ ※重要※ ホバーで黒に反転させる。
     .btn--frame はホバーで面が白く塗られ、
     文字色も墓黒に切り替わる。
     白版の画像のままだと白地に白で消える。
   ※ 画像を 2枚重ねて切り替える方法（ヘッダーの
     .header__contact-icon-img がこの形）もあるが、
     ボタンは 1枚で済むので filter で反転させる。
     読み込みも 1枚分で済む。
   ※ 切り替えのタイミングは文字色と揃える。
     .btn--frame は塗りの真ん中（--frame-dur-line +
     --frame-dur-fill / 2）で文字色を切り替えるので、
     同じ式を使う。ズレるとアイコンだけが
     先に（あるいは遅れて）反転する。
   ※ 解除時は共通側の逆順（面が先に引く）に合わせて、
     基本状態側は遅延を短くする。 */
.contact-form__button-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: filter 0s linear calc(var(--frame-dur-fill) / 2);
}

.contact-form__button:is(:hover, :active) .contact-form__button-icon-img {
    filter: invert(1);
    transition: filter 0s linear calc(var(--frame-dur-line) + var(--frame-dur-fill) / 2);
}

@media (prefers-reduced-motion: reduce) {
    .contact-form__button-icon-img,
    .contact-form__button:is(:hover, :active) .contact-form__button-icon-img {
        transition: none;
    }
}

/* ================================================================
   個人情報保護方針（アコーディオン）
   ※ 送信ボタンの下に置く（r-doboku と同じ）。
     フォームのゴールは送信なので、入力の直後に
     ボタンを置き、内容を確かめたい人だけがここを開く。
   ※ 同意チェックボックスは置かないので、
     以前ここにあった .form-check 群の指定は削除済み。
   ※ r-doboku はブロック全体を枠線で囲んでいる。
     こちらもトグルに枠線があるので、同じ見え方になる。
================================================================ */

.form-privacy {
    margin-top: var(--spacing-lg);
}

/* ================================================================
   送信完了ポップアップ（thanks.php）
================================================================ */

.form-success-popup {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.form-success-popup.is-active {
    opacity: 1;
    visibility: visible;
}

.form-success-popup__overlay {
    position: absolute;
    inset: 0;
    /* ※ ページ自体が黒地になったので、旧値（0.7）だと
         背後を退けさせる効果が弱い。深く取る。 */
    background-color: rgba(0, 0, 0, 0.85);
}

.form-success-popup__content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 30rem;
    padding: var(--spacing-lg) var(--spacing-md);
    /* ※ 暗転前は --color-bg（白）。そのままだと
         背後のオーバーレイとほぼ同色になり、
         パネルの輪郭が見えなくなる。 */
    background-color: var(--color-surface);
    text-align: center;
    transform: translateY(1.25rem);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
    .form-success-popup__content {
        padding: var(--spacing-xl) var(--spacing-lg);
    }
}

.form-success-popup.is-active .form-success-popup__content {
    transform: translateY(0);
}

.form-success-popup__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-inline: auto;
    margin-bottom: var(--spacing-sm);
    font-size: 1.375rem;
    /* ※ 暗転前は墨黒の丸に白文字。パネルが暗くなった今は
         丸が沈んでしまう。送信完了の合図なので
         画面で一番明るい要素にする。 */
    color: var(--black-3);
    background-color: var(--color-text-inverse);
    border-radius: 50%;
}

.form-success-popup__title {
    font-size: 1.5rem;
    letter-spacing: 0.14em;
    margin-bottom: var(--spacing-xs);
}

.form-success-popup__message {
    font-size: 0.9375rem;
    line-height: 1.9;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
}

.form-success-popup__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    padding: 0 2.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    /* ※ 暗転前は墨黒の面に白文字で、ホバーで
         面を transparent にして墨黒の文字に戻していた。
         黒地ではホバーした瞬間に文字ごと消えるので、
         白面に黒文字 → ホバーで枠線だけの白文字、に反転させる。 */
    color: var(--black-3);
    background-color: var(--color-text-inverse);
    border: 1px solid var(--color-text-inverse);
    transition: background-color var(--transition), color var(--transition);
}

.form-success-popup__button:hover {
    background-color: transparent;
    color: var(--color-text-inverse);
}