/* SHIKAKERU トップ作り直し試作（ファーストビュー）
   色：黒 #000／白 #fff のみ。色を持つのは動画だけ。 */
:root{
  --black:#000;
  --white:#fff;
  --line:rgba(255,255,255,.2);
  --gx:2.05vw;                 /* 左右の余白（お手本の実測：左端から約2vw） */
  --nav-h:clamp(56px,4.4vw,88px);
  --font-en:"Roboto Condensed","Arial Narrow",sans-serif;
  --font-label:var(--font-en);
  --en-k:1;
  --jp-h1-w:500;
  --en-em:5.12;                /* 英字『FROM FUKUI』が占める幅(em)の実測値（書体ごと）。スマホで画面幅いっぱいにする計算に使う */
  --jp-em:19.28;               /* 日本語h1の1行目が占める幅(em)の実測値。書体ごとに差し替える */
  --btn-w:700;
  --font-jp:"Roboto Condensed","Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--black)}
body{
  background:var(--black);color:var(--white);
  font-family:var(--font-jp);font-weight:500;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* 日本語の折り返し規約（.claude/rules/code-quality.md） */
  word-break:keep-all;overflow-wrap:anywhere;line-break:strict;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,video{display:block;max-width:100%}
.sp-br{display:none}

/* ---------- ヘッダー（背景透明・動画に重なる） ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:30;height:var(--nav-h);
  display:flex;align-items:center;padding-left:var(--gx);
  border-bottom:1px solid var(--line);
}
.nav-logo{display:flex;align-items:center;gap:10px;flex:0 0 auto;width:max(12.2vw,184px)}
.nav-logo img{height:17px;width:auto;filter:brightness(0) invert(1)} /* 既存ロゴを白一色に */
.nav-logo span{font-family:var(--font-en);font-weight:700;font-size:clamp(17px,1.5vw,24px);letter-spacing:.08em;line-height:1}
.nav-list{display:flex;align-items:center;gap:clamp(18px,1.95vw,40px);margin-left:clamp(0px,.5vw,12px)}
.nav-list a{
  font-family:var(--font-label);font-weight:400;font-size:clamp(12px,.95vw,16px);
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;opacity:.95;
  position:relative;padding:6px 0;
}
.nav-list a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--white);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.nav-list a:hover::after,.nav-list a:focus-visible::after{transform:scaleX(1)}
.nav-list[lang="ja"] a{font-family:var(--font-jp);letter-spacing:.06em;text-transform:none}
.lang{margin-left:auto;display:flex;align-items:center;gap:6px;padding:0 clamp(12px,1.4vw,24px);font-family:var(--font-label);font-size:12px;letter-spacing:.12em;opacity:.7}
.lang a{padding:6px 2px}
.lang a[aria-current="true"]{opacity:1;border-bottom:1px solid var(--white)}
.lang a:not([aria-current="true"]){opacity:.6}
.burger{
  flex:0 0 auto;width:calc(var(--nav-h) * 1.07);height:100%;
  border-left:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.burger span{display:block;width:24px;height:2px;background:var(--white);transition:transform .3s ease,opacity .3s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.nav a:focus-visible,.burger:focus-visible,.hero-btn:focus-visible,.drawer a:focus-visible{outline:2px solid var(--white);outline-offset:4px}

/* ---------- ドロワー（全メニュー） ---------- */
.drawer{position:fixed;inset:0;z-index:20;background:#000;padding:calc(var(--nav-h) + 6vh) var(--gx) 8vh;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;overflow-y:auto}
.drawer>nav{margin-top:auto}
.drawer[hidden]{display:none}
.drawer nav{display:flex;flex-direction:column;gap:clamp(14px,3vh,28px);width:100%}
.drawer a{
  font-family:var(--font-en);font-weight:700;font-size:min(clamp(28px,4.4vw,56px),4vh);letter-spacing:.06em;text-transform:uppercase;
  line-height:1.15;border-bottom:1px solid var(--line);padding-bottom:clamp(10px,2vh,18px);
}
.drawer[lang="ja"] a{font-family:var(--font-jp);text-transform:none;letter-spacing:.04em}
/* メニューの中の「LINEで相談する」（旧メニューにあった導線を戻したもの。白い細線のボタン） */
.drawer .drawer-line{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;margin-top:clamp(24px,5vh,44px);margin-bottom:auto;min-height:52px;padding:0 28px;border:1px solid rgba(255,255,255,.6);font-family:var(--font-en);font-weight:700;font-size:16px;letter-spacing:.12em;text-transform:uppercase;line-height:1.4;color:#fff;transition:background .2s,color .2s}
.drawer[lang="ja"] .drawer-line{font-family:var(--font-jp);text-transform:none;letter-spacing:.06em}
.drawer .drawer-line:hover,.drawer .drawer-line:focus-visible{background:#fff;color:#000}

/* ---------- ヒーロー ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;background:var(--black)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;background:var(--black)}
.hero-shade{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(0,0,0,.58) 0,rgba(0,0,0,0) calc(var(--nav-h) + 90px)),
    linear-gradient(to top,rgba(0,0,0,.82) 0,rgba(0,0,0,0) 66%),
    linear-gradient(to right,rgba(0,0,0,.45) 0,rgba(0,0,0,0) 62%);
}
.hero-copy{position:absolute;left:var(--gx);bottom:clamp(40px,6.8vh,80px);z-index:5}
.hero-en{
  font-family:var(--font-en);font-weight:700;text-transform:uppercase;
  font-size:calc(min(9.1vw,17vh) * var(--en-k));line-height:1.05;letter-spacing:.005em;
  margin-bottom:clamp(12px,1.6vh,18px);text-shadow:0 1px 18px rgba(0,0,0,.35);
}
.en-line{display:block}
.hero-title{
  font-family:var(--font-jp);font-weight:var(--jp-h1-w);font-feature-settings:"palt";
  font-size:max(20px,var(--jp-vw,2.78vw));          /* 1440幅で約40px。幅に比例（英字『FROM FUKUI』の幅と同程度） */
  line-height:1.6;letter-spacing:.02em;
  margin-bottom:clamp(18px,3.4vh,34px);
  text-shadow:0 1px 14px rgba(0,0,0,.55);
}
.jp-line{display:block;white-space:nowrap}
.hero-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:18px;
  min-width:clamp(220px,12.5vw,250px);height:clamp(56px,3.6vw,72px);padding:0 28px;
  background:rgba(46,46,46,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-family:var(--font-jp);font-weight:var(--btn-w);font-size:clamp(14px,.95vw,16px);letter-spacing:.18em;
  transition:background .35s ease;
}
.hero-btn svg{transition:transform .35s ease}
.hero-btn:hover,.hero-btn:focus-visible{background:rgba(255,255,255,.92);color:var(--black)}
.hero-btn:hover svg,.hero-btn:focus-visible svg{transform:translateX(6px)}
.credit{font-family:var(--font-label),var(--font-jp);position:absolute;left:var(--gx);bottom:14px;z-index:5;max-width:min(760px,calc(100% - var(--gx) - 70px));font-size:10px;letter-spacing:.04em;line-height:1.5;opacity:.72}
.credit a{text-decoration:underline;text-underline-offset:2px}

.scroll{position:absolute;right:clamp(14px,1.6vw,36px);bottom:0;z-index:5;display:flex;flex-direction:column;align-items:center;gap:14px}
.scroll-text{writing-mode:vertical-rl;font-family:var(--font-label);font-size:10px;letter-spacing:.28em;opacity:.6}
.scroll-line{position:relative;display:block;width:1px;height:clamp(60px,14vh,150px);background:rgba(255,255,255,.2);overflow:hidden}
.scroll-line::after{content:"";position:absolute;left:0;top:0;width:100%;height:40%;background:var(--white);animation:scrolldrop 2.2s ease-in-out infinite}
@keyframes scrolldrop{0%{transform:translateY(-100%)}60%,100%{transform:translateY(250%)}}

/* ---------- 入場（CSSのみ・JS非依存。終わると通常表示に戻る） ---------- */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero-en{animation:rise .9s cubic-bezier(.2,.7,.2,1) .35s backwards}
.hero-title{animation:rise .9s cubic-bezier(.2,.7,.2,1) .55s backwards}
.hero-btn{animation:rise .9s cubic-bezier(.2,.7,.2,1) .85s backwards}
.nav{animation:fadein 1s ease .2s backwards}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ---------- 動きを減らす設定：静止画のみ ---------- */
.reduced .hero-video{display:none}
.reduced .hero{background:var(--black) url("/assets/home/hero-poster.jpg") 50% 50%/cover no-repeat}
@media (prefers-reduced-motion:reduce){
  .hero-en,.hero-title,.hero-btn,.nav{animation:none}
  .scroll-line::after{animation:none;transform:translateY(60%)}
}

/* ---------- スマホ・タブレット ---------- */
@media (max-width:899px){
  :root{--gx:20px;--nav-h:56px}
  .nav-list{display:none}
  .nav-logo{width:auto}
  .nav-logo span{font-size:18px}
  .lang{margin-left:auto}
  .burger{width:56px}
  .sp-br{display:inline}
  .hero-en{line-height:1.05;margin-bottom:14px}
  /* スマホ：1行目(20文字)が画面に収まる最大の大きさ。左20px・右16pxの余白、0.7%の安全幅 */
  .hero-title{line-height:1.6;margin-bottom:22px}
  .hero-btn{min-width:min(100%,240px);height:58px;font-size:15px}
  .hero-copy{bottom:calc(48px + env(safe-area-inset-bottom))}
  .hero-shade{background:
    linear-gradient(to bottom,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 150px),
    linear-gradient(to top,rgba(0,0,0,.86) 0,rgba(0,0,0,0) 76%)}
  .credit{bottom:calc(12px + env(safe-area-inset-bottom));font-size:8.5px;max-width:calc(100% - var(--gx) - 44px)}
  .scroll{right:10px}
  .scroll-line{height:64px}
}
/* スマホ（〜599px）：英字『FROM FUKUI』・日本語1行目がそれぞれ画面に収まる最大の大きさ。左20px・右16px、0.7%の安全幅 */
@media (max-width:599px){
  .hero-en{font-size:calc((100vw - 36px) / var(--en-em) * .993)}
  .hero-title{font-size:min(24px,calc((100vw - 36px) / var(--jp-em) * .993))}
}
@media (min-width:900px) and (max-width:1199px){
  .nav-list{gap:16px}
  .nav-list a{font-size:11px;letter-spacing:.05em}
  .lang{display:none}
}

h1,h2,h3{text-wrap:balance}

/* ===== ヘッダー右端の「無料相談」ボタン（2026-10-22） ===== */
.nav-cta{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 18px;margin-right:clamp(12px,1.4vw,24px);border:1px solid rgba(255,255,255,.6);color:#fff;font-family:var(--font-jp);font-weight:700;font-size:13px;letter-spacing:.1em;white-space:nowrap;transition:background .3s,color .3s}
.nav-cta:hover,.nav-cta:focus-visible{background:#fff;color:#000}
.lang{margin-left:auto}
.nav-cta + .burger{margin-left:0}
@media (max-width:899px){.nav-cta{padding:0 14px;height:34px;font-size:12px;margin-right:12px}.lang{margin-left:auto}}
@media (max-width:599px){.lang{display:none}.nav-cta{margin-left:auto}}
@media (min-width:900px) and (max-width:1199px){.nav-cta{margin-left:auto}}