/* ============================================================================
   PALE HOUR — common.css
   全ページ共通：トークン / リセット / タイポグラフィ / ヘッダー / フッター /
   ボタン / カード / フォーム / 出現アニメーション
   ========================================================================== */

:root{
  /* 配色（確定ブランドカラー） */
  --deep-indigo:#263A57;
  --indigo:#3E5575;
  --pale-blue:#DCEAF3;
  --mist-blue:#EDF3F7;
  --ivory:#F8F7F3;
  --white:#FFFFFF;
  --charcoal:#2F3540;

  --ink:var(--charcoal);
  --ink-soft:#5A6472;
  --ink-light:#EAF1F8;
  --ink-light-soft:#C4D1DE;
  --hair:rgba(62,85,117,.18);          /* 細い罫線 */
  --hair-light:rgba(255,255,255,.22);
  --dawn:#EED9BC;                       /* 夜明けの微光（アクセント・多用しない） */

  /* 書体 */
  --serif-en:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --serif-jp:"Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans:"Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;

  --gutter:clamp(22px, 6vw, 72px);
  --maxw:1160px;
  --radius:6px;                         /* 角丸は小さめ */
  --header-h:72px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--ivory); color:var(--ink);
  font-family:var(--sans); font-weight:300;
  font-size:clamp(15px, .5vw + 13px, 16.5px);
  line-height:2.0; letter-spacing:.04em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  word-break:auto-phrase; text-wrap:pretty;
  overflow-x:hidden;
}
/* 見出し：text-wrap:balance は日本語で単語の途中改行を起こすため使わない */
h1,h2,h3,h4{margin:0; font-weight:500; line-height:1.5; letter-spacing:.03em; text-wrap:pretty; word-break:auto-phrase}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
a{color:inherit; text-decoration:none}
img,svg{display:block; max-width:100%}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0}
:focus-visible{outline:2px solid var(--indigo); outline-offset:3px; border-radius:2px}
::selection{background:rgba(220,234,243,.75)}

/* ---------------- タイポグラフィ ---------------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.en{font-family:var(--serif-en); letter-spacing:.1em}
.jp-serif{font-family:var(--serif-jp)}
.eyebrow{
  font-family:var(--serif-en); font-size:.78rem; letter-spacing:.42em;
  text-transform:uppercase; color:var(--indigo);
}
.sec-head{margin-bottom:clamp(34px, 5vw, 56px)}
.sec-head .eyebrow{display:block; margin-bottom:1.1em}
.sec-title{font-family:var(--serif-jp); font-size:clamp(1.45rem, 3.4vw, 2.1rem); line-height:1.7; color:var(--charcoal)}
.sec-lead{margin-top:1.4em; max-width:38em; color:var(--ink-soft); line-height:2.15}
.soft{color:var(--ink-soft)}

.section{padding-block:clamp(84px, 12vw, 150px)}
.hairline{border:0; border-top:1px solid var(--hair); margin:0}

/* ---------------- ボタン ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  min-height:48px; padding:.9em 2.4em; border-radius:100px;
  font-family:var(--sans); font-weight:400; font-size:.88rem;
  letter-spacing:.18em; line-height:1.4; text-align:center;
  white-space:nowrap;   /* ボタン文言を途中で折り返さない */
  transition:transform .45s ease, box-shadow .45s ease, letter-spacing .45s ease,
             background-color .45s ease, border-color .45s ease, color .45s ease;
}
.btn:hover{transform:translateY(-2px); letter-spacing:.22em}
.btn-solid{background:var(--deep-indigo); color:var(--white); border:1px solid var(--deep-indigo)}
.btn-solid:hover{box-shadow:0 14px 34px -18px rgba(38,58,87,.55); background:var(--indigo); border-color:var(--indigo)}
.btn-outline{background:rgba(255,255,255,.06); color:inherit; border:1px solid currentColor; backdrop-filter:blur(6px)}
.btn-outline:hover{box-shadow:0 12px 30px -18px rgba(120,150,190,.5)}
.btn-note{display:block; margin-top:1em; font-size:.74rem; letter-spacing:.24em; color:var(--ink-soft)}
/* 320〜380pxの端末：nowrapのボタンがはみ出さないよう余白と文字を少し詰める */
@media (max-width: 380px){
  .btn{padding-inline:1.5em; font-size:.82rem; letter-spacing:.12em}
}

/* テキストリンク（罫線が静かに伸びる） */
.tlink{
  position:relative; display:inline-flex; align-items:center; gap:.8em;
  font-size:.86rem; letter-spacing:.2em; padding-bottom:.45em; color:var(--indigo);
}
.tlink::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; opacity:.45; transform:scaleX(.35); transform-origin:left;
  transition:transform .6s cubic-bezier(.22,.61,.36,1), opacity .6s ease;
}
.tlink:hover::after{transform:scaleX(1); opacity:.8}

/* ---------------- ヘッダー ---------------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  min-height:var(--header-h); padding:14px var(--gutter);
  color:var(--charcoal);
  border-bottom:1px solid transparent;
  transition:background-color .6s ease, color .6s ease, border-color .6s ease;
}
/* スクロール後：半透明の白＋ごく弱いぼかし */
.site-header.is-solid{
  background:rgba(248,247,243,.78);
  backdrop-filter:blur(10px) saturate(1.15);
  -webkit-backdrop-filter:blur(10px) saturate(1.15);
  border-color:var(--hair);
}
/* 暗い背景（Home夜間帯）用 */
.site-header.on-dark{color:var(--ink-light)}
.site-header.on-dark.is-solid{
  background:rgba(14,21,36,.55); border-color:rgba(255,255,255,.1);
}

.brand{display:inline-flex; align-items:center; gap:.7em}
/* ロゴエンブレム（背景透明ロゴ_白のエンブレム部分をマスクに使用）
   currentColorで塗るので、暗いヘッダー=白／明るいヘッダー=チャコールに自動追従 */
.brand__mark{
  width:30px; height:40px; flex:none;
  background:currentColor;
  -webkit-mask:url(../images/common/logo-mark.png) center/contain no-repeat;
  mask:url(../images/common/logo-mark.png) center/contain no-repeat;
}
.brand__name{font-family:var(--serif-en); font-size:1.12rem; font-weight:500; letter-spacing:.32em; white-space:nowrap}

.gnav__list{display:flex; align-items:center; gap:clamp(16px, 2.6vw, 30px)}
.gnav__list a{
  position:relative; display:inline-block; padding:.6em 0;
  font-family:var(--serif-en); font-size:.8rem; letter-spacing:.24em; opacity:.78;
  transition:opacity .3s ease;
}
.gnav__list a:hover{opacity:1}
/* 現在地：控えめな下線＋濃度差 */
.gnav__list a[aria-current="page"]{opacity:1}
.gnav__list a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:.2em; height:1px;
  background:currentColor; opacity:.55;
}
/* 診断CTA：デスクトップのヘッダーには置かない（押し売り感を避ける）。
   モバイルのハンバーガーメニュー内でのみ表示する */
.gnav__cta{display:none}
.header-right{display:flex; align-items:center; gap:clamp(16px,2.4vw,34px)}

/* ハンバーガー */
.menu-toggle{
  display:none; position:relative; z-index:120;
  width:48px; height:48px; margin-right:-8px;
  align-items:center; justify-content:center;
}
.menu-toggle__bars{position:relative; width:24px; height:12px; display:block}
.menu-toggle__bars::before,
.menu-toggle__bars::after{
  content:""; position:absolute; left:0; width:100%; height:1.5px;
  background:currentColor; transition:transform .45s ease, top .45s ease, bottom .45s ease;
}
.menu-toggle__bars::before{top:0}
.menu-toggle__bars::after{bottom:0}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before{top:5px; transform:rotate(24deg)}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after{bottom:5.5px; transform:rotate(-24deg)}

@media (max-width: 960px){
  .menu-toggle{display:inline-flex}

  /* スマホのヘッダーはぼかし(backdrop-filter)を使わない：
     ①ぼかし付きの親の中では position:fixed のメニューが壊れる（CSS仕様）
     ②スマホGPUに重く、開閉時のフリーズの原因になる */
  .site-header.is-solid{
    background:rgba(248,247,243,.94);
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .site-header.on-dark.is-solid{
    background:rgba(14,21,36,.9);
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  /* メニュー展開中はヘッダー背景を消し、全画面メニューと一体化させる */
  .site-header.menu-open-header,
  .site-header.menu-open-header.is-solid{
    background:transparent; border-color:transparent;
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }

  .gnav{
    position:fixed; inset:0; z-index:110;
    display:flex; flex-direction:column; justify-content:center;
    padding:calc(var(--header-h) + 20px) var(--gutter) 40px;
    background:rgba(30,46,72,.98);   /* ほぼ不透明＝ぼかし不要で軽い */
    color:var(--ink-light);
    opacity:0; visibility:hidden; transition:opacity .45s ease, visibility .45s ease;
  }
  .gnav.is-open{opacity:1; visibility:visible}

  /* メニュー表示中は背後の重い演出を止める（フリーズ対策） */
  body.menu-open .sky *{animation-play-state:paused}
  body.menu-open .grain{display:none}
  body.menu-open .hero__photo img{animation-play-state:paused}
  .gnav__list{flex-direction:column; align-items:flex-start; gap:4px}
  .gnav__list a{font-size:1.05rem; padding:.7em 0; opacity:.88}
  .gnav__cta{display:block; margin-top:34px}
  .gnav__cta .btn{background:var(--white); color:var(--deep-indigo); border-color:var(--white)}
  body.menu-open{overflow:hidden}
  .site-header.menu-open-header{color:var(--ink-light)}
}

/* ---------------- カード基礎 ---------------- */
.card{
  background:var(--white); border:1px solid var(--hair); border-radius:var(--radius);
  padding:clamp(26px, 3.4vw, 40px);
}

/* ---------------- フォーム ---------------- */
.field{margin-bottom:26px}
.field label{display:block; margin-bottom:.55em; font-size:.86rem; letter-spacing:.14em}
.field .req{margin-left:.6em; font-size:.7rem; color:#9A6A55; letter-spacing:.2em}
.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea{
  width:100%; min-height:48px; padding:.7em 1em;
  font:inherit; color:var(--ink); letter-spacing:.05em;
  background:var(--white); border:1px solid var(--hair); border-radius:var(--radius);
  transition:border-color .3s ease;
}
.field textarea{min-height:180px; resize:vertical; line-height:1.9}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--indigo)}
.field .error-msg{display:none; margin-top:.5em; font-size:.78rem; color:#9A4A3A; letter-spacing:.08em}
.field.has-error input, .field.has-error select, .field.has-error textarea{border-color:#B07A6A}
.field.has-error .error-msg{display:block}
.consent{display:flex; align-items:flex-start; gap:.8em; font-size:.88rem}
.consent input{width:18px; height:18px; margin-top:.45em; accent-color:var(--indigo)}

/* ---------------- 出現アニメーション（ゆっくりしたフェードのみ） ---------------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity 1.1s ease, transform 1.1s ease}
.reveal.is-visible{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .btn, .tlink::after{transition:none}
}

/* ---------------- フッター ---------------- */
.site-footer{
  position:relative; z-index:2;
  background:var(--deep-indigo); color:var(--ink-light);
  padding:clamp(64px, 9vw, 110px) 0 42px;
}
.footer-grid{
  display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:clamp(34px, 5vw, 70px);
  padding-bottom:clamp(44px, 6vw, 70px);
}
.footer-brand .brand__name{letter-spacing:.34em}
.footer-brand p{margin-top:1.4em; font-size:.84rem; letter-spacing:.2em; color:var(--ink-light-soft)}
.footer-col h4{
  font-family:var(--serif-en); font-size:.74rem; letter-spacing:.4em;
  text-transform:uppercase; color:var(--ink-light-soft); margin-bottom:1.6em; font-weight:400;
}
.footer-col li{margin-bottom:.35em}
.footer-col a{
  display:inline-block; padding:.32em 0; font-size:.85rem; letter-spacing:.14em;
  opacity:.75; transition:opacity .3s ease;
}
.footer-col a:hover{opacity:1}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  padding-top:30px; border-top:1px solid rgba(255,255,255,.12);
}
.footer-bottom small{font-family:var(--serif-en); font-size:.76rem; letter-spacing:.3em; color:var(--ink-light-soft)}
@media (max-width: 780px){
  .footer-grid{grid-template-columns:1fr; gap:40px}
}

/* ---------------- iPhoneセーフエリア ---------------- */
.site-header{padding-left:max(var(--gutter), env(safe-area-inset-left)); padding-right:max(var(--gutter), env(safe-area-inset-right))}
.site-footer{padding-bottom:max(42px, env(safe-area-inset-bottom))}