@charset "UTF-8";
/* components.css — ヘッダー／ナビ／ボタン／スマホ予約バー／ブロック見出し
   避ける型（DESIGN_LAWS 第18章）：中央寄せHero・丸いボタン・全大文字の小ラベル・01/02番号・3枚均等カード・数字の帯 */

/* ---------- ヘッダー ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:60;height:var(--hdr);display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:var(--gutter);
  color:var(--ink);transition:background .4s var(--ease),color .4s var(--ease)}
.hdr.is-solid{background:rgba(255,255,255,.94);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--rule)}
.hdr__logo{display:flex;align-items:center;min-height:44px;color:var(--logo)}
.hdr__logo svg{display:block;height:21px;width:auto}
.p-top .hdr:not(.is-solid) .hdr__logo{opacity:0;transition:opacity .4s}.p-top .hdr.is-solid .hdr__logo{opacity:1;transition:opacity .4s}
.hdr__nav{display:flex;gap:28px;font-family:var(--f-ui);font-size:13.5px;letter-spacing:.04em}
.hdr__nav a{position:relative;padding:6px 0}
.hdr__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.hdr__nav a:hover::after{transform:scaleX(1);transform-origin:left}
.hdr__end{display:flex;align-items:center;gap:10px}
.menu-btn{display:none;width:48px;height:48px;border:0;background:none;position:relative;cursor:pointer}
.menu-btn span{position:absolute;left:12px;right:12px;height:1.5px;background:currentColor;transition:transform .4s var(--ease),top .4s var(--ease)}
.menu-btn span:nth-child(1){top:19px}.menu-btn span:nth-child(2){top:28px}
.is-open .menu-btn span:nth-child(1){top:24px;transform:rotate(45deg)}
.is-open .menu-btn span:nth-child(2){top:24px;transform:rotate(-45deg)}
@media(max-width:960px){.hdr__nav{display:none}.menu-btn{display:block}.hdr .btn--hdr{display:none}}

/* ---------- 全画面ナビ（スマホ） ---------- */
.drawer{position:fixed;inset:0;z-index:55;background:var(--paper);padding:calc(var(--hdr) + 24px) var(--gutter) 120px;overflow:auto;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);visibility:hidden}
.is-open .drawer{clip-path:inset(0);visibility:visible}
.drawer a{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--rule);font-size:20px}
.drawer a .en{font-size:13px;color:var(--ink-3)}
.drawer .btn{margin-top:28px;width:100%}

/* ---------- ボタン（角は落とさない） ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 28px;border:1px solid var(--ink);background:var(--ink);color:var(--on-ink);
  font-family:var(--f-ui);font-size:14.5px;font-weight:500;letter-spacing:.06em;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.btn:hover{background:var(--accent);border-color:var(--accent)}
.btn--accent{background:var(--accent);border-color:var(--accent)}
.btn--accent:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn--line{background:transparent;color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.btn--hdr{min-height:44px;padding:0 20px;font-size:13.5px}
.btn .arw{width:18px;height:1px;background:currentColor;position:relative}
.btn .arw::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.tlink{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-ui);font-size:14px;border-bottom:1px solid currentColor;padding-bottom:4px}

/* ---------- スマホ下部の予約バー ---------- */
.sbar{display:none}
@media(max-width:960px){
  .sbar{display:grid;grid-template-columns:1fr 1.6fr;position:fixed;left:0;right:0;bottom:0;z-index:58;height:calc(var(--barh) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
    background:var(--paper);border-top:1px solid var(--ink);font-family:var(--f-ui);transform:translateY(110%);transition:transform .5s var(--ease)}
  .sbar.is-on{transform:none}
  .sbar a{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14.5px;font-weight:500;min-height:var(--barh)}
  .sbar a+a{background:var(--accent);color:#fff}
  body{padding-bottom:calc(var(--barh) + env(safe-area-inset-bottom))}
}

/* ---------- ブロック見出し（英字のタイトル＋和文の見出し。全大文字の小ラベルは使わない） ---------- */
.shead{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,4vw,72px);align-items:end;margin-bottom:clamp(36px,5vw,72px)}
.shead__en{font-family:var(--f-didone);font-size:var(--fs-display);line-height:.95;letter-spacing:-.01em;font-weight:400}
.shead__ja h2{font-size:var(--fs-h2)}
.shead__ja p{margin-top:16px;color:var(--ink-2);max-width:30em}
@media(max-width:860px){.shead{grid-template-columns:1fr;gap:14px}}

/* ---------- 出現（フェード＋わずかな上移動）。スクロールで .is-in が付く ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.mask{display:block;overflow:hidden}
.mask>span{display:block;transform:translateY(105%);transition:transform 1.2s var(--ease)}
.is-in .mask>span,.mask.is-in>span{transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.mask>span{transform:none}}