/* 資料ダウンロード（/download）・お問い合わせ（/contact）・送信完了（/thanks /thanks-1 /thanks-dl）・特定商取引に基づく表記（/tokutei）・404 専用。
   色・書体の変数と余白のリセット（.t-page / .t-main）は top.css を共用し、ここではこれらのページだけの値を指定する。
   値は現行 STUDIO 版を 1440/1280/1024/768/390/375px で測って合わせた。ブレークポイントは現行と同じ 1280 / 840 / 540 / 320px。
   現行から意図して変えた点には「現行は…」とコメントを付けている。
   右下の「ページ先頭へ」は、現行どおり /download・/contact・/tokutei だけに出す（body の .page-form / .page-legal で shared.css が出し分け）。 */

/* 語間・行末は STUDIO と同じ指定（text-wrap:wrap / word-spacing:1px）。折り返しの位置は shared.css（文節の切れ目の <wbr> と keep-all。
   HubSpot のフォームの中は通常の折り返し） */
.f-page.t-main :is(h1,h2,h3,p,li,dt,dd,span){text-wrap:wrap;word-spacing:1px}

/* ---------- 本文の枠（現行はヘッダーの下に薄い枠線が回る。上の線は固定ヘッダーの裏に隠れているので付けない） ----------
   現行の上余白 180px は固定ヘッダー（70px）込みの値。新はヘッダーが場所を取るので 180 - 70 + 1（隠れている上の線） = 111px */
.f-body{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:60px;padding:111px 100px 100px;border:1px solid rgba(36,37,40,.1);border-top:0;background:#fff;color:#242528}

/* ---------- ページ見出し（＼ … ／ と大見出し） ---------- */
.f-head{width:1280px;max-width:100%;padding:0 40px;display:flex;flex-direction:column;align-items:center}
.f-head__in{display:flex;flex-direction:column;align-items:center;gap:5px}
.f-page .f-eyebrow{color:#085f2a;font-size:18px;font-weight:700;line-height:1.75;font-feature-settings:'palt' 1;text-align:left}
.f-page .f-title{color:#242528;font-size:40px;font-weight:700;line-height:1.35;font-feature-settings:'palt' 1;text-align:left}

/* リード文（資料ダウンロード・お問い合わせ） */
.f-page .f-lead{position:relative;z-index:2;color:#242528;font-size:20px;font-weight:400;line-height:1.6;text-align:left}

/* ---------- 資料ダウンロード: 左に説明・右にフォーム ---------- */
.f-dl{width:60%;display:flex;flex-direction:row;align-items:flex-start;justify-content:center;gap:60px}
.f-dl__intro{width:calc(50% - 30px);display:flex;flex-direction:column;align-items:flex-start}
.f-page .f-dl__img{display:block;width:100%;height:auto;margin:30px 0}
.f-dl__check{width:100%;padding:40px 30px;background:#f0f8f3;display:flex;flex-direction:column;align-items:center}
.f-page .f-dl__check-title{margin:0 0 20px;color:#286b4a;font-size:24px;font-weight:700;line-height:1.4;font-feature-settings:normal}
.f-dl__list{width:100%;display:flex;flex-direction:column;gap:15px}
.f-dl__item{display:flex;align-items:center;justify-content:center;padding:10px 15px;background:#fff}
.f-page .f-dl__item svg{flex:none;width:18px;height:18px;margin-right:15px;fill:#286b4a}
.f-dl__item span{flex:1;padding-left:15px;border-left:1px solid #286b4a;color:#333;font-size:16px;font-weight:500;line-height:1.4}
.f-dl__form{width:calc(50% - 30px);padding-bottom:50px;background:#fff}

/* ---------- お問い合わせ: フォーム ---------- */
.f-contact__form{width:700px;max-width:100%}

/* ---------- 電話でのご相談 ---------- */
.f-tel{width:100%;display:flex;flex-direction:column;align-items:center}
.f-tel__box{width:50%;padding:30px 0;border-radius:12px;background:#edf3ef;display:flex;flex-direction:column;align-items:center}
.f-page .f-tel__title{margin:0 0 15px;color:#085f2a;font-size:20px;font-weight:700;line-height:1.4;font-feature-settings:normal}
/* 現行は番号が文字だけ。新はスマホで押すと電話をかけられるよう tel: リンクにしている（見た目は同じ） */
.f-tel__num{display:flex;align-items:center;gap:10px;padding-bottom:15px;color:#085f2a}
.f-page .f-tel__num svg{flex:none;width:36px;height:36px;fill:currentColor}
.f-tel__num span{font-family:Lato,sans-serif;font-size:40px;font-weight:800;line-height:1.4}
.f-page .f-tel__hours{color:#085f2a;font-size:18px;font-weight:400;line-height:1.4}

/* ---------- 送信完了（/thanks /thanks-1 /thanks-dl） ----------
   現行は見出しが入力ページのまま（「ご相談・お問い合わせ」「資料ダウンロード」）で、完了したことが目立たなかった。
   見出しを「送信が完了しました」などにして上にチェックの印を付け、完了の文は左ぞろえ（枠は文字の幅に合わせて中央）にした。
   その下に次に進むボタン（.f-btns）。/thanks-dl は「お電話にてご連絡を」に合わせて /contact と同じ電話の枠（.f-tel）も置く */
.f-page .f-done__icon{display:block;flex:none;width:56px;height:56px;margin-bottom:10px;fill:#085f2a}
.f-thanks{width:fit-content;max-width:800px;display:flex;flex-direction:column;align-items:flex-start;gap:1.2em}
.f-page .f-thanks__text{color:#333;font-size:20px;font-weight:400;line-height:1.8;text-align:left}

/* ---------- ボタン（送信完了・404 で共用）。塗りは1つだけ（主な行き先）、ほかは枠線 ---------- */
.f-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.f-btn{display:flex;align-items:center;justify-content:center;gap:6px;min-width:240px;height:56px;padding:0 20px 0 28px;border:2px solid #085f2a;border-radius:28px;background:#fff;color:#242528;transition:background-color .3s cubic-bezier(.4,.4,0,1),color .3s cubic-bezier(.4,.4,0,1)}
.f-btn span{font-size:16px;font-weight:700;line-height:1.4;font-feature-settings:'palt' 1;white-space:nowrap}
.f-page .f-btn svg{flex:none;width:22px;height:22px;fill:currentColor}
.f-btn:hover{background:#edf3ef}
.f-btn--primary{background:#085f2a;color:#fff}
.f-btn--primary:hover{background:#0b4d24}

/* ---------- 特定商取引に基づく表記 ---------- */
.f-body--legal{gap:80px;padding-bottom:120px}
.f-legal{width:1000px;max-width:100%;margin:0;display:flex;flex-direction:column;align-items:center}
.f-legal__row{width:100%;display:flex;flex-wrap:wrap;align-items:center;padding:30px 0}
.f-legal__row+.f-legal__row{border-top:1px solid #e6e6e6}
.f-page .f-legal dt{width:30%;color:#286b4a;font-size:18px;font-weight:700;line-height:1.7}
.f-page .f-legal dd{width:70%;margin:0;color:#333;font-size:18px;font-weight:400;line-height:1.7}

/* 右下の「ページ先頭へ」: 現行のこれらのページはホバーしても薄くならない（shared.css の opacity:.8 を打ち消す） */
:is(.page-form,.page-legal) .global-footer-bottom .global-footer-legal .global-footer-pagetop:hover{opacity:1}

/* ---------- 404 ----------
   現行はヘッダー・フッターが無く（画面の高さいっぱいの中で縦中央）、「ホームに戻る」の枠線がほぼ見えなかった。
   新はサイト共通のヘッダー・フッターを付け（layout: site）、ボタンは塗りの「ホームに戻る」と、枠線の「お問い合わせ」「サポートセンター」にした */
.f-404{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:560px;background:#fff;color:#242528}
/* 左端はヘッダーのロゴとそろえる（ヘッダーと同じ 1280px 幅・左右 30px） */
.f-404__in{width:100%;padding:100px 30px;display:flex;flex-direction:column;align-items:center}
.f-404__wrap{width:1280px;max-width:100%;display:flex;flex-direction:column;align-items:flex-start}
/* 現行は幅 450px で「見つかりませんでし／た」「お探しくださ／い。」と1文字だけ次の行に落ちるため、新は広げて行末で切れないようにしている（3つのボタンも1行に並ぶ 640px） */
.f-404__box{width:640px;max-width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.f-404__box .f-btns{justify-content:flex-start;margin-top:12px}
.f-404__text{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:40px}
.f-page .f-404__code,.f-page .f-404__title{width:100%;color:#242528;font-family:Lato,'Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;font-size:48px;font-weight:700;letter-spacing:.05em;line-height:1.35;font-feature-settings:'palt' 1;text-align:left}
/* 説明文は本文と同じ黒（現行は 70% の薄い灰色） */
.f-page .f-404__desc{color:#242528;font-size:16px;font-weight:500;letter-spacing:.05em;line-height:1.75}
/* 3つのボタンが1行に並ぶよう、404 では最小幅を外す */
.f-404 .f-btn{min-width:0}

@media (max-width:1280px){
  .f-body{padding:81px 60px 100px}
  .f-body--legal{padding-bottom:100px}
  .f-404__in{padding:100px 15px}
}
@media (max-width:840px){
  .f-body{padding:81px 40px 100px}
  .f-body--legal{gap:60px}
  .f-head{padding:0 20px}
  .f-page .f-title{font-size:28px}
  .f-dl{width:100%;flex-direction:column}
  .f-dl__intro,.f-dl__form{width:100%}
  .f-tel__box{width:100%}
  .f-page .f-legal dt{width:100%;margin-bottom:10px}
  .f-page .f-legal dd{width:100%}
  .f-404__in{padding:100px 30px}
  .f-page .f-404__code,.f-page .f-404__title{font-size:32px}
}
@media (max-width:540px){
  /* 現行の上余白 120px も固定ヘッダー（60px）込み → 120 - 60 + 1 = 61px */
  .f-body{gap:30px;padding:61px 20px 60px}
  .f-body--legal{gap:30px}
  .f-head{padding:0 10px}
  .f-page .f-eyebrow{font-size:14px}
  .f-page .f-title{font-size:20px}
  .f-page .f-lead{font-size:16px}
  .f-dl{gap:30px}
  .f-page .f-dl__img{margin:20px 0 30px}
  .f-dl__check{padding:40px 15px}
  .f-page .f-dl__check-title{font-size:20px}
  .f-page .f-tel__title{font-size:16px}
  .f-tel__num{margin-bottom:15px;padding:0}
  .f-page .f-tel__num svg{width:28px;height:28px}
  .f-tel__num span{font-size:28px}
  .f-page .f-tel__hours{font-size:14px}
  .f-page .f-done__icon{width:44px;height:44px;margin-bottom:6px}
  .f-page .f-thanks__text{font-size:16px}
  /* スマホのボタンは縦に並べて幅いっぱい */
  .f-btns{flex-direction:column;align-items:stretch;width:100%;max-width:400px}
  .f-btn{min-width:0;height:52px}
  .f-404__box .f-btns{margin-top:4px}
  .f-404{min-height:0}
  .f-404__in{padding:60px 30px}
  .f-legal__row{padding:20px 0}
  .f-page .f-legal dt,.f-page .f-legal dd{font-size:16px}
  .f-page .f-404__desc{font-size:14px}
}
@media (max-width:320px){
  .f-404__in{padding:60px 15px}
  .f-dl__item span{font-size:15px}
  .f-page .f-tel__num svg{width:24px;height:24px}
  .f-tel__num span{font-size:24px}
}