:root {
  --accent: #d2622c;
  --ink: #1e2022;
  --error: #c0392b;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:#fbfaf7;font-family:'Noto Sans JP',sans-serif;color:#3a3d40;}
::selection{background:rgba(210,98,44,.18);}
input,textarea,select,button{font-family:inherit;}
input::placeholder,textarea::placeholder{color:#b1aca2;}

/* ── アクセシビリティ: focus-visible ─────────────────────────────────────── */
:focus{outline:none;}
:focus-visible{outline:2px solid var(--accent,#d2622c);outline-offset:3px;border-radius:2px;}
a:focus-visible,button:focus-visible{outline-offset:4px;}

/* ── prefers-reduced-motion ─────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html{scroll-behavior:auto;}
  [data-fade]{opacity:1 !important;transform:none !important;transition:none !important;}
}

/* ── Process grid ────────────────────────────────────────────────────────── */
.process-grid{grid-template-columns:repeat(4,1fr);}
@media(max-width:760px){.process-grid{grid-template-columns:1fr;}}

/* ── Header nav: desktop/mobile visibility ───────────────────────────────── */
@media(max-width:879px){.nav-desktop{display:none !important;}}
@media(min-width:880px){.nav-mobile-btn{display:none !important;}}

/* ── Mobile menu ─────────────────────────────────────────────────────────── */
#mobile-menu{display:none;border-top:1px solid rgba(20,22,24,.06);background:#fbfaf7;padding:10px clamp(18px,4vw,48px) 22px;flex-direction:column;gap:2px;}
#mobile-menu.open{display:flex;}

/* ── CTA button hover ────────────────────────────────────────────────────── */
.btn-cta{transition:transform .25s ease;}
.btn-cta:hover{transform:translateY(-2px);}
.btn-nav-cta{transition:background .25s ease,transform .25s ease;}
.btn-nav-cta:hover{transform:translateY(-1px);}

/* ── Image hover zoom ────────────────────────────────────────────────────── */
.img-zoom img{transition:transform .8s cubic-bezier(.16,.7,.2,1);}
.img-zoom:hover img{transform:scale(1.05);}
.img-zoom-fast img{transition:transform .85s cubic-bezier(.16,.7,.2,1);}
.img-zoom-fast:hover img{transform:scale(1.05);}

/* ── Form: states ────────────────────────────────────────────────────────── */
#contactForm{display:block;}
#form-success{display:none;}
#contactForm.hidden{display:none;}
#form-success.visible{display:block;}

/* ── Form: input focus ────────────────────────────────────────────────────── */
#contactForm input:focus-visible,
#contactForm textarea:focus-visible,
#contactForm select:focus-visible{
  outline:2px solid var(--accent,#d2622c);
  outline-offset:0;
  border-color:var(--accent,#d2622c);
}

/* ── Form: error state ────────────────────────────────────────────────────── */
.field-error input,
.field-error textarea,
.field-error select{
  border-color:var(--error,#c0392b) !important;
  background:#fff8f7 !important;
}
.field-error-msg{
  display:none;
  font-size:12px;
  color:var(--error,#c0392b);
  margin-top:5px;
  line-height:1.5;
}
.field-error .field-error-msg{display:block;}

/* ── Select custom arrow ──────────────────────────────────────────────────── */
select.custom-select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" stroke="%239a958b" stroke-width="1.6" fill="none"/></svg>');
  background-repeat:no-repeat;
  background-position:right 14px center;
}

/* ── Form submit button loading state ────────────────────────────────────── */
#form-submit-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none !important;
}

/* ── Form global error banner ────────────────────────────────────────────── */
#form-global-error{
  display:none;
  background:#fff3f2;
  border:1px solid var(--error,#c0392b);
  border-radius:3px;
  padding:12px 16px;
  font-size:13px;
  color:var(--error,#c0392b);
  margin-top:16px;
  line-height:1.7;
}
#form-global-error.visible{display:block;}

/* ================================================================
   モバイル表示修正（390px / 414px / 430px / 768px 対応）
   2026-06 追加
   ================================================================ */

/* ── 1. 横スクロール防止（全体） ────────────────────────────────── */
html, body {
  overflow-x: hidden;
}

/* 画像がコンテナを超えないようにする
   絶対配置画像は style="width:100%;height:100%" が優先されるため影響なし */
img {
  max-width: 100%;
}

/* ── フォーム入力要素: 常にコンテナ幅内に収める ──────────────── */
/* input の "size 属性由来のデフォルト幅" がコンテナを超えないよう、
   クエリなしでグローバルに適用する                            */
#contactForm input:not([type="hidden"]),
#contactForm select,
#contactForm textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

/* フォームカード自体も親コンテナを超えないよう明示 */
#contactForm {
  max-width: 100%;
  box-sizing: border-box;
}

/* ── 2. ヒーロー: 固定ヘッダーの被り修正 ─────────────────────── */
/* 64px固定ヘッダー分をsection自体のpaddingで確保し、
   align-items:centerがヘッダー下の領域でセンタリングされるようにする */
@media (max-width: 879px) {
  #top {
    padding-top: 64px !important;
    min-height: calc(86vh + 64px) !important;
    box-sizing: border-box;
  }

  /* contact セクション: flex アイテム（ガイドパネル・フォームラッパー）の
     min-width:auto（= min-content）を解除して正しく縮小できるようにする。
     flex:1 1 460px のアイテムは 390px 端末では 354px まで縮む必要がある */
  #contact [style*="flex:1 1 460px"],
  #contact [style*="flex:1 1 300px"] {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ── 3. ヒーロー: テキスト・CTA のスマホ最適化 ─────────────────── */
@media (max-width: 768px) {
  /* h1 内のnowrapスパンを解除
     375px端末: 14文字×24px≈339pxがコンテナ幅339pxと一致してオーバーフロー */
  #top h1 span {
    white-space: normal !important;
  }

  #top h1 {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* ヒーロー p 内の <br> を非表示（モバイルでは自然改行を使う） */
  #top p br {
    display: none;
  }

  /* CTA ボタン: スマホ幅いっぱいに拡張 */
  #top .btn-cta {
    width: 100%;
    box-sizing: border-box;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* ── フォームカード: スマホ用 padding に縮小 */
  #contactForm {
    padding: 24px 20px !important;
  }

  /* フォームフィールド: 768px以下で全項目を1カラムに */
  #contactForm [data-field] {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* フォームグリッドコンテナ: min-width を解除してはみ出し防止 */
  #contactForm > div[style*="flex-wrap"] {
    min-width: 0;
    max-width: 100%;
  }
}

/* ── 4. 480px以下: 小型端末の細かい調整 ────────────────────────── */
@media (max-width: 480px) {
  /* ヒーロー h1 の下限フォントサイズを小型端末向けに調整
     clamp(24px,...) の最小値を20pxまで引き下げる */
  #top h1 {
    font-size: clamp(20px, 5.5vw, 28px) !important;
    line-height: 1.48 !important;
  }

  /* ヒーローバッジ: nowrapを解除してバッジが端末幅に収まるよう折り返し許可 */
  #top [style*="white-space:nowrap"] {
    white-space: normal !important;
  }

  /* ヒーロー p: 文字サイズをわずかに縮小して読みやすさを維持 */
  #top p {
    font-size: 14.5px !important;
    line-height: 1.85 !important;
  }

  /* サイト内すべてのCTAボタン: 横にはみ出さないよう最大幅を設定 */
  .btn-cta {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* フォームカード: 小型端末でさらに padding を縮小 */
  #contactForm {
    padding: 22px 16px !important;
  }
}

/* ── 6. セクション共通: コンテナのはみ出しガード ─────────────── */
@media (max-width: 479px) {
  /* 左右余白がゼロにならないよう最小値を確保 */
  section > div {
    min-width: 0;
  }

  /* process-grid: 1カラム時の余計な右ボーダーを除去 */
  .process-grid > div {
    border-right: none !important;
  }
}

/* ── ロゴ ───────────────────────────────────────────────────── */
.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-logo-img {
  height: auto;
  max-height: 64px;
  max-width: 310px;
  width: auto;
  display: block;
}

.footer-logo-img {
  height: auto;
  max-height: 72px;
  max-width: 380px;
  width: auto;
  display: block;
}

@media (max-width: 768px) {
  .site-logo-img {
    max-height: 52px;
    max-width: 250px;
  }

  .footer-logo-img {
    max-height: 60px;
    max-width: 280px;
  }
}