@charset "UTF-8";

/* すべての要素を border-box に統一 */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ===== TOKEN MAP（どのセクションで使うトークンか・ざっくり） =====
   GLOBAL（全体共通）
     - --text, --muted, --bg-body
     - --font-jp, --font-en-heading, --font-menu
     - --gap-inline, --right-guard-*

   レイアウト系（全セクション共通の幅・高さ）
     - --content-max-*
     - --gap-between-sections-*
     - --underline-*

   MAIN VISUAL / AFTER-MV HEADER 関連
     - --aftermv-top-*
     - --title-gap-*
     - --ham-line-bottom-offset-*

   CONTACTフォーム関連
     - --form-row-gap-*
     - --ymd-input-*
     - --ymd-input-h-*

   ABOUT US
     - 専用トークンなし
     - 共通トークン（文字サイズ / underline / section gap）を使用

   LINE CONTACT オーバーレイ関連
     - --line-qr-*
     - --line-note-gap-*
     - --line-btn-to-note-*
     - --line-lead-mt-*
     - --line-list-gap, --line-list-mt-*

   PORTFOLIO（スライダー関連）
     - --arrow-size-*（矢印サイズ）
     - --dot-size-*（ドットサイズ）
     - --dot-gap-*（ドット間隔）
     - --dur-slide（スライドの時間）

   FOOTER
     - --insta-main-* , --insta-ovl-*（Instagramアイコンのサイズ）
     - --line-to-footer-* / --line-to-footer-gap（PORTFOLIO→FOOTERの距離）
     
======================================================= */

/* カラー・フォント・寸法（デザイン基準） */
:root{
  --text: #6C6C6C;        /* デザイン指定の本文色に統一 */
  --muted: #717071;
  --bg-body: #fcfaf7;       /* サイト全体のベース背景色（本文エリア） */

  /* ボタンカラー */
  --accent-outline-hover: #c7c7c7; /* ホバー時の塗り */
  --accent-fill: var(--accent-outline-hover); /* 送信ボタンの塗り色を流用 */

  /* 本文（日本語）用フォント */
  --font-jp: "游ゴシック体", "Yu Gothic", "游ゴシック", "YuGothic", "メイリオ", sans-serif;

  /* 英字見出し・ハンバーガーメニュー用フォント */
  --font-en-heading: "Lato", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ハンバーガーメニューは英字フォントを使用 */
  --font-menu: var(--font-en-heading);

  /* 縦ロゴの左から本文までの隙間（必ず空ける幅）*/
  --logo-left-gap-pc: 80px;  /* PC */
  --logo-left-gap-tab: 50px; /* Tablet */
  --logo-left-gap-sp: 26px;  /* SP */

    /* 縦ロゴ画像の幅（PC/TB） */
  --vlogo-w-pc: 28px; /* .brand-side img width:34px; */
  --vlogo-w-tab: 24px; /* @media 768–1199px width:28px; */
  --vlogo-w-sp: 14px; /* @media max767px width:16px; */

    /* 右ガード帯 = ロゴ幅 + 左の隙間 */
   /* 右ガード帯（ロゴ幅＋左余白）を自動計算 */
  --right-guard-pc:  calc(var(--vlogo-w-pc)  + var(--logo-left-gap-pc));
  --right-guard-tab: calc(var(--vlogo-w-tab) + var(--logo-left-gap-tab));
  --right-guard-sp:  calc(var(--vlogo-w-sp)  + var(--logo-left-gap-sp));

  /* ▼ ハンバーガー寸法（閉じ時）※入れ子にしない ▼ */
  --ham-w-pc: 34px;  --ham-h-pc: 18px;  
  --ham-w-tab:27px;  --ham-h-tab:14px;
  --ham-w-sp: 20px;  --ham-h-sp: 10px;

  /* === Sections: セクション間の共通距離 === */
  --gap-between-sections-pc: 200px;
  --gap-between-sections-tab: 150px;
  --gap-between-sections-sp: 100px;

  /* 下線幅など */
  --underline-pc: 716px;
  --underline-sp: 460px;

  /* 行入力（下線） */
  --u-line-pc: 600px; 
  --u-line-tab: 400px;
  --u-line-sp: 400px;

  /* テキストエリア（四角） */
  --u-box-pc: 600px;
  --u-box-tab: 400px;
  --u-box-sp: 400px;

  /* 本文フォントサイズ（.section で使用） */
  --fz-body-pc: 14px;
  --fz-body-tab: 13px;
  --fz-body-sp: 10px;

/* --- セクション見出し用フォントサイズ --- */
  --fz-title-pc: 22px;
  --fz-title-tab: 20px;
  --fz-title-sp: 12px;

  /* ハンバーガーフォントサイズ */
  --fz-over-pc: 20px;
  --fz-over-tab: 16px;
  --fz-over-sp: 12px;
  --fz-copy: 10px;

  /* ===== Underline tokens ===== 
    A=見出し系（COMPANY / CONTACT / ABOUT US / PORTFOLIO / ハンバーガー内メニュー）
    B=本文系（MAPリンク / 「ご用意頂きたい書類」など）
    ※ 現状の見た目を変えないため、既定=from-font/auto を採用 */
  --uA-color: #b7b7b7;
  --uA-thickness: 0.75px; /* 既定と同等 */
  --uA-offset: 0.3em;         /* 既定と同等 */

  --uB-color: #b7b7b7;
  --uB-thickness: 0.75px; /* 既定と同等 */
  --uB-offset: 0.3em;         /* 既定と同等 */
  

  /* オーバーレイ */
  /* overlayは --dur-ovl を参照する運用に統一 */

/* ===== PORTFOLIO：ドット用トークン ===== */
  /* ドットサイズ */
  --dot-size-pc: 4px;
  --dot-size-tab: 3px;
  --dot-size-sp: 2px;

  /* ドットの間隔 */
  --dot-gap-pc: 4px;
  --dot-gap-tab: 26px;
  --dot-gap-sp: 16px;

/* ===== PORTFOLIO：矢印用トークン ===== */ 
 /* 矢印のサイズ（片腕の長さ） */
  --arrow-size-pc: 10px;
  --arrow-size-tab: 8px;
  --arrow-size-sp: 6px;
  --arrow-thickness: 1px; /* 線の太さ */
  --arrow-hit: 28px;        /* クリック範囲（見た目より広め） */

  /* === Typography: 行送り（pt換算）=== */
  --lh-pc: 1.6;
  --lh-tab: 1.6;
  --lh-sp: 1.6;

  /* Medium/Regular のウエイト（游ゴシック想定） */
  --fw-regular: 400;
  --fw-medium: 700;

  --ls-heading: 0.22em;
}

:root{
  /* …既存トークン… */

  /* フォーム行間（下線 → 次ラベルまで） */
  --form-row-gap-pc: 32px;
  --form-row-gap-tab: 26px;
  --form-row-gap-sp: 16px;

  /* legend 下（カテゴリー名 → ラジオまで） */
  --legend-gap-pc: 8px;
  --legend-gap-tab: 7px;
  --legend-gap-sp: 6px;

/* ===== CONTACT（セクション2：CONTACT） ===== */
/* CONTACT：LINE CONTACTボタン → 「お名前＊」までの距離 */
  --contact-line-gap-pc: 110px;
  --contact-line-gap-tab: 82px;
  --contact-line-gap-sp: 60px;
}

/* === Tokens: Motion / Timing === */
:root{
  --dur-ovl: .60s;
  --dur-mv: 1.20s;
  --dur-ham: .45s;
  --ease-out-soft: cubic-bezier(.22, .61, .36, 1);
  --dur-slide: .60s;     /* PORTFOLIOなどスライド用 */
  --dur-ham-fade: .20s;  /* ハンバーガーのopacity用（好みで .45s にして同期も可） */
}
/* SPだけ overlay 速度を少し短く */
@media (max-width:767.98px){
  :root{ --dur-ovl: .52s; }
}

/* === Tokens: Hamburger geometry (line bottom offset) === */
:root{
  /* ハンバーガー“下線の下端”が top:0 から下がる量 */
  --ham-line-bottom-offset-pc: 13px;  /* = 12px（中心間隔） + 1px（線の半分） */
  --ham-line-bottom-offset-tab: 13px; /* PCと同じ配置ロジック */
  --ham-line-bottom-offset-sp: 9px;   /* = 8px + 1px （SPは±4px） */
}

/* ===== after-MV header（ハンバーガー＆縦ロゴ配置） ===== */
:root{
  /* メインビジュアル下からの上位置（上合わせ） */
  --aftermv-top-pc: 120px;
  --aftermv-top-tab: 90px;
  --aftermv-top-sp: 60px;

  /* ★ デザイン確定値：ハンバーガー下端 → セクション上端の最終距離 */
  --title-gap-pc: 130px;
  --title-gap-tab: 88px;
  --title-gap-sp: 46px;
}
/* ===== CONTACT TOKENS ここまで ===== */

/* ===== LINE CONTACTトークン（メインとは完全に独立） ===== */
:root{
  --line-top-pc:  calc(var(--title-gap-pc)  + var(--ham-line-bottom-offset-pc));
  --line-top-tab: calc(var(--title-gap-tab) + var(--ham-line-bottom-offset-tab));
  --line-top-sp:  calc(var(--title-gap-sp)  + var(--ham-line-bottom-offset-sp));
}

/* === Tokens: CONTACT 引渡予定日（Y/M/D） === */
/* 単位・間隔（既存） */
:root{
  --ymd-unit-gap: .35em;
  --ymd-field-gap: .8em;
}

/* 単位（年/月/日）の“底”をデバイス別に管理 → ブリッジで1本化 */
:root{
  --ymd-unit-bottom-pc: 0.26em;
}
@media (min-width:768px) and (max-width:1199.98px){
  :root{ --ymd-unit-bottom-tab: 0.25em; }
}
@media (max-width:767.98px){
  :root{ --ymd-unit-bottom-sp: 0.24em; }
}
/* 実体で使う1本に橋渡し */
:root{ --ymd-unit-bottom: var(--ymd-unit-bottom-pc); }
@media (min-width:768px) and (max-width:1199.98px){
  :root{ --ymd-unit-bottom: var(--ymd-unit-bottom-tab); }
}
@media (max-width:767.98px){
  :root{ --ymd-unit-bottom: var(--ymd-unit-bottom-sp); }
}

:root{
  /* 引渡予定日：ラベル（「引渡予定日」）→ 入力欄 の間隔 */
  --handover-label-gap-pc: 6px;   /* 例：PCだけ少し広げる */
  --handover-label-gap-tab: 4px;  /* 例：TB */
  --handover-label-gap-sp: 3px;   /* 例：SP（現状維持） */
}

/* ブリッジ（端末ごとに1本へ集約） */
:root{ --handover-label-gap: var(--handover-label-gap-pc); }
@media (min-width:768px) and (max-width:1199.98px){
  :root{ --handover-label-gap: var(--handover-label-gap-tab); }
}
@media (max-width:767.98px){
  :root{ --handover-label-gap: var(--handover-label-gap-sp); }
}

/* 年月日の入力数字位置調整 */
:root{
  --ymd-input-finetune-pc: 6px;
  --ymd-input-finetune-tab: 5px;
  --ymd-input-finetune-sp: 4px;
}
:root{ --ymd-input-finetune: var(--ymd-input-finetune-pc); }
@media (min-width:768px) and (max-width:1199.98px){
  :root{ --ymd-input-finetune: var(--ymd-input-finetune-tab); }
}
@media (max-width:767.98px){
  :root{ --ymd-input-finetune: var(--ymd-input-finetune-sp); }
}

/* ▼ 端末別トークンを実体用に橋渡し（必ずこの順で定義） */
:root{
  --ham-w: var(--ham-w-pc);
  --ham-h: var(--ham-h-pc);
}
@media (min-width:768px) and (max-width:1199.98px){
  :root{
    --ham-w: var(--ham-w-tab);
    --ham-h: var(--ham-h-tab);
  }
}
@media (max-width:767.98px){
  :root{
    --ham-w: var(--ham-w-sp);
    --ham-h: var(--ham-h-sp);
  }
}

:root{
  /* 引渡予定日入力のボックス高（端末別） */
  --ymd-input-h-pc: 26px;
  --ymd-input-h-tab: 22px;
  --ymd-input-h-sp: 18px;
}

/* ブリッジ（端末に応じて1本に集約） */
:root{ --ymd-input-h: var(--ymd-input-h-pc); }
@media (min-width:768px) and (max-width:1199.98px){
  :root{ --ymd-input-h: var(--ymd-input-h-tab); }
}
@media (max-width:767.98px){
  :root{ --ymd-input-h: var(--ymd-input-h-sp); }
}


/* ベース */
html, body{ margin:0; padding:0; }
body{
  color: var(--text);
  font-family: var(--font-jp);
  background: var(--bg-body);
  -webkit-text-size-adjust: 100%;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration: none; }
button{ background: transparent; border:0; padding:0; cursor: pointer; }
.visually-hidden{
  position:absolute!important; clip:rect(1px,1px,1px,1px);
  width:1px!important; height:1px!important; overflow:hidden!important; white-space:nowrap!important;
}

/* === Main Visual のアスペクト === */
:root{
  --mv-ar-w: 16;  /* 既定=PC: 16:9 */
  --mv-ar-h: 9;
}

/* SPは9:16に切替 */
@media (max-width: 767.98px){
  :root{ --mv-ar-w: 9; --mv-ar-h: 16; }
}

/* Tabletは16:10に切替 以前の幅のコードは残ったまま*/
@media (min-width: 768px) and (max-width: 1199.98px){
  :root{ --mv-ar-w: 16; --mv-ar-h: 10; }
}

/* 端末ごとの左右ガターを1本化 */
:root{ --gap-inline: 160px; } 

@media (min-width:768px) and (max-width:1199.98px){
  :root{ --gap-inline: 100px; } /* TB=現状の固定120px */
}
@media (max-width:767.98px){
  :root{ --gap-inline: 24px; }  /* SP=現状の38px */
}

/* 利用可能コンテンツ幅（左右ガター＋右ガードを差し引いた最大幅） */
:root{
  --content-max-pc: calc(100vw - var(--gap-inline) - (var(--gap-inline) + var(--right-guard-pc)));
}
@media (min-width:768px) and (max-width:1199.98px){
  :root{
    --content-max-tab: calc(100vw - var(--gap-inline) - (var(--gap-inline) + var(--right-guard-tab)));
  }
}
@media (max-width:767.98px){
  :root{
    --content-max-sp: calc(100vw - var(--gap-inline) - (var(--gap-inline) + var(--right-guard-sp)));
  }
}

/* 端末ブリッジ（現在値） */
:root{ --content-max: var(--content-max-pc); }
@media (min-width:768px) and (max-width:1199.98px){ :root{ --content-max: var(--content-max-tab); } }
@media (max-width:767.98px){ :root{ --content-max: var(--content-max-sp); } }

/* ===== LINE 下層セクション専用トークン（将来変更用） ===== */
:root{
  /* 上下リズム */
  --line-lead-mt-pc: 78px; 
  --line-lead-mt-tab: 62px; 
  --line-lead-mt-sp: 46px;
  
  --line-qr-mt-pc: 30px;
  --line-qr-mt-tab: 24px;
  --line-qr-mt-sp: 16px;
  
  --line-list-mt-pc: 40px;
  --line-list-mt-tab: 30px;
  --line-list-mt-sp: 20px;

  /* （＊→リスト）の間隔（端末別トークン） */
  --line-note-gap-pc: 40px;
  --line-note-gap-tab: 30px;
  --line-note-gap-sp: 20px;

  /* QRサイズ */
  --line-qr-icon-size-pc: 60px; 
  --line-qr-icon-size-tab: 46px; 
  --line-qr-icon-size-sp: 34px;

  /* 下層は縦ロゴガードなし */
  --line-right-guard: 0px;

  /* li同士の間隔（単一トークン） */
  /* バランス重視：1.7em。SP厳密なら1.6em、PC重視なら1.8emでも可 */
  --line-list-gap: 1.7em;

  /* QRの下マージン（端末別） */
  --line-qr-mb-pc: 24px;
  --line-qr-mb-tab: 20px;
  --line-qr-mb-sp: 16px;

  /* LINEを開くボタン → 説明文 の間隔（端末別） */
  --line-btn-to-note-pc: 62px;
  --line-btn-to-note-tab: 42px;
  --line-btn-to-note-sp: 32px;

}

/* ===== FOOTER TOKENS / Instagram icon（FOOTER・COMPANY・OVERLAY 共通） ===== */
/* ===== Instagram icon サイズ tokens ===== */
:root{
  /* Main & Footer（メインと全フッター共通） */
  --insta-main-pc: 22px;   /* ← 初期値：今より少し小さめ（調整はここだけ） */
  --insta-main-tab: 20px;
  --insta-main-sp: 16px;

  /* Hamburger overlay（ハンバーガー内） */
  --insta-ovl-pc: 30px;    /* ← 初期値：メイン/フッターより一段小さく */
  --insta-ovl-tab: 26px;
  --insta-ovl-sp: 18px;
}

/* ===== FOOTER TOKENS / セクション間余白 ===== */
:root{
  --line-to-footer-pc: 70px;  /* = #portfolio .portfolio-controls の PC margin-bottom */
  --line-to-footer-tab: 60px; /* = 同 TB */
  --line-to-footer-sp: 36px;  /* = 同 SP */
}

/* 端末ブリッジ（実体で使う1本に集約） */
:root{ --line-to-footer-gap: var(--line-to-footer-pc); }
@media (min-width:768px) and (max-width:1199.98px){
  :root{ --line-to-footer-gap: var(--line-to-footer-tab); }
}
@media (max-width:767.98px){
  :root{ --line-to-footer-gap: var(--line-to-footer-sp); }
}

/* QR下マージン用ブリッジ（端末別トークン → 実体） */
:root{ --line-qr-mb: var(--line-qr-mb-pc); }
@media (min-width:768px) and (max-width:1199.98px){
  :root{ --line-qr-mb: var(--line-qr-mb-tab); }
}
@media (max-width:767.98px){
  :root{ --line-qr-mb: var(--line-qr-mb-sp); }
}

:root{ --line-btn-to-note: var(--line-btn-to-note-pc); }
@media (min-width:768px) and (max-width:1199.98px){
  :root{ --line-btn-to-note: var(--line-btn-to-note-tab); }
}
@media (max-width:767.98px){
  :root{ --line-btn-to-note: var(--line-btn-to-note-sp); }
}

/* （＊→リスト）の間隔：端末別トークンを1本に集約 */
:root{ --line-note-gap: var(--line-note-gap-pc); }
@media (min-width:768px) and (max-width:1199.98px){
  :root{ --line-note-gap: var(--line-note-gap-tab); }
}
@media (max-width:767.98px){
  :root{ --line-note-gap: var(--line-note-gap-sp); }
}

/* ラジオ（○）サイズ：端末別トークン */
:root{
  --radio-size-pc: 16px;
  --radio-size-tab: 14px;
  --radio-size-sp: 12px;
  --radio-label-gap: 0.8em; /* ○と文字の最小距離：既存24pxの内訳 ≒ 16px + 8px */
}

/* 実体ブリッジ（端末に応じて“1本”に集約） */
:root{
  --radio-size: var(--radio-size-pc);
  --radio-pad-left: calc(var(--radio-size) + var(--radio-label-gap));
}
@media (min-width:768px) and (max-width:1199.98px){
  :root{
    --radio-size: var(--radio-size-tab);
    --radio-pad-left: calc(var(--radio-size) + var(--radio-label-gap));
  }
}
@media (max-width:767.98px){
  :root{
    --radio-size: var(--radio-size-sp);
    --radio-pad-left: calc(var(--radio-size) + var(--radio-label-gap));
  }
}

/* Utility: no wrap for explicit nowrap spans */
.nowrap{ white-space: nowrap; }