@charset "UTF-8";

/* =========================================================
   オール（O-RU）
   ベースカラーは黄色。黒は使わず、文字はすべて温かみのある焦茶。
   地は白と、ごく薄い砂色。角はすべて丸め、装飾はドット・波線だけ。
   書体は丸ゴシック（見出し）＋UDゴシック（本文）＋Nunito Sans（欧文）。
   ========================================================= */

:root{
  /* --- color --- */
  --text:      #3A3426;  /* すべての文字の基本色。黒は使わない */
  --ink:       #2A2519;  /* 見出し・濃い面 */
  --muted:     #675E49;  /* 補足の文字（面を透けさせたぶん、少し濃くしてある） */
  --yellow:    #FFFF00;  /* ベースカラー */
  --yellow-dp: #F0F000;  /* ボタンのホバー */
  --yellow-lt: #FFFF99;  /* 淡い黄色 */
  --gold:      #7A6A00;  /* 文字に使える黄色（白と淡い地の上で5:1以上） */
  --sand:      #FBF8F1;  /* 淡い地 */
  --sand2:     #F5EEDD;  /* もう少し濃い淡い地 */
  --line:      #E7DFC9;  /* 罫 */
  --white:     #FFFFFF;
  --hair:      rgba(58,52,38,.13);   /* ガラスの上の細い罫 */

  /* 背景の映像をうっすら通すための、半透明の面。
     ベタ色（--sand / --white）をそのまま使うと映像が完全に隠れるので、
     セクションの帯とカードだけこちらに置き換えています。 */
  --band:      rgba(251,248,241,.42);  /* セクションの帯（--sand 相当） */
  --band-2:    rgba(251,248,241,.24);  /* 帯を持たない節に敷く、ごく薄い地 */
  --card:      rgba(255,255,255,.58);  /* 白いカード */
  --card-soft: rgba(251,248,241,.52);  /* 砂色のカード */

  /* ガラスの縁。上辺に細い光を入れると板に見えます */
  --glass-line: 1px solid rgba(255,255,255,.72);
  --glass-lift: inset 0 1px 0 rgba(255,255,255,.85), 0 10px 30px rgba(58,52,38,.10);
  --glass-lift-h: inset 0 1px 0 rgba(255,255,255,.95), 0 18px 44px rgba(58,52,38,.15);

  /* --- type --- */
  --f-display: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  --f-body: "Nunito Sans", "BIZ UDPGothic", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  --f-en: "Nunito Sans", sans-serif;

  /* --- space / shape --- */
  --wrap: 1120px;
  --pad: clamp(20px, 5vw, 56px);
  --sec-pad: clamp(72px, 10vw, 136px);
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* --- motion --- */
  --ease: cubic-bezier(.22,.75,.25,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

/* --------------------------------------------------------
   reset
   -------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body,h1,h2,h3,h4,p,ul,ol,dl,dd,figure{ margin:0; padding:0; }
ul,ol{ list-style:none; }
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }

/* 地の色は html に置きます。body を透明にしておかないと、
   position:fixed の背景映像（.bgv）が body の背景に隠れてしまいます。 */
html{ background:var(--sand); }

body{
  background:transparent;
  color:var(--text);
  font-family:var(--f-body);
  font-size:clamp(15px, 1.05rem, 17px);
  line-height:2;
  letter-spacing:.05em;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* --------------------------------------------------------
   背景の映像
   ページの一番奥に固定して、ずっと流しておきます。
   --veil（0〜1）が濃くなるほど、映像はうすくなります。
   ヒーロー = 0.12 / 本文 = 0.90 を script.js が行き来させます。
   -------------------------------------------------------- */
.bgv{
  position:fixed; inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.bgv__video{
  width:100%; height:100%;
  object-fit:cover;
  /* ヒーローでは素のまま、本文に入るとぼける。
     ガラスの向こう側になり、上に置いた半透明の面が磨りガラスに見えます。
     ぼかすと縁が透けるので、常に 1.10 以上に引き伸ばしてあります。 */
  filter:blur(var(--bblur, 0px));
  transform:scale(var(--bz, 1.14));
  transform-origin:50% 46%;
  transition:transform .9s var(--ease);
  will-change:filter, transform;
}
.bgv__veil{
  position:absolute; inset:0;
  background:var(--sand);
  opacity:var(--veil, .34);
}
/* 本文に入ったときだけ、ごく薄い格子を重ねて映像のざらつきを整える */
.bgv__grain{
  position:absolute; inset:0;
  opacity:calc((var(--veil, .12) - .12) * .18);
  background-image:radial-gradient(rgba(122,106,0,.18) 1px, transparent 1.1px);
  background-size:7px 7px;
}
/* 映像より上に本文を積む。html/body ではなくこの3つに z-index を持たせる */
.site-header, #main, .site-footer{ position:relative; z-index:1; }

/* 映像が読めない・止めている場合はポスター画像を敷く */
.bgv.is-static .bgv__video{ display:none; }
.bgv.is-static{
  background:url("assets/hero-poster.jpg") center / cover no-repeat;
}

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--yellow);
  padding:12px 18px; z-index:200; text-decoration:none;
  border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{ left:0; }

/* sticky ヘッダーの分だけ、アンカー先を下げる */
section[id]{ scroll-margin-top:84px; }

:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}
.main-plan :focus-visible,
.gear :focus-visible,
.site-footer :focus-visible{ outline-color:var(--yellow); }

/* 純黄（#FFFF00）は白の上だと輪郭が消えます。そこで
   ・面として置くもの（ボタン・段のバー・丸）＝ 黄色のまま＋焦茶の細い輪郭
   ・線や小さな点＝ 同じ黄系の濃い色（--gold）
   濃い面の上では輪郭も置き換えも要りません。 */
.on-light-ring{ box-shadow:0 0 0 1.5px var(--ink); }

/* ドットの装飾
   z-index を使わず、重ね順は「親の::before → 子の背景」の描画順で作ります。
   カードの外側に置きたいものは親要素に、内側に置きたいものはカード自身に。 */
.main-plan::before,
.gear::before{
  content:"";
  position:absolute;
  border-radius:50%;
  background-image:radial-gradient(var(--dot, rgba(122,106,0,.5)) 1.7px, transparent 1.8px);
  background-size:9px 9px;
  pointer-events:none;
}

/* 波線 */
.wave{
  width:64px; height:8px;
  color:var(--gold);
  margin-top:1.1em;
  overflow:visible;
}

/* --------------------------------------------------------
   共通の見出し
   -------------------------------------------------------- */
.section{ padding-block:var(--sec-pad); }

.sec-label{
  display:flex; align-items:baseline; gap:.9em;
  margin-bottom:.9em;
}
.sec-label .ja{
  font-family:var(--f-display);
  font-weight:700;
  font-size:.86rem;
  letter-spacing:.16em;
  color:var(--gold);
  position:relative;
  padding-left:1.5em;
}
.sec-label .ja::before{
  content:""; position:absolute; left:0; top:50%;
  width:9px; height:9px; margin-top:-4.5px;
  border-radius:50%;
  background:var(--yellow);
  box-shadow:0 0 0 1.5px var(--ink);
}
.sec-label .en{
  font-family:var(--f-en);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
}
.sec-title{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(1.6rem, 4.4vw, 2.5rem);
  line-height:1.62;
  letter-spacing:.06em;
  color:var(--ink);
  text-wrap:balance;
}
.sec-lead{
  margin-top:1.6em;
  max-width:44em;
  color:var(--muted);
}
.sub-title{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(1.1rem, 2.6vw, 1.3rem);
  letter-spacing:.1em;
  color:var(--ink);
  margin-top:clamp(52px, 8vw, 88px);
  padding-bottom:.8em;
  border-bottom:2px dotted var(--line);
}

/* --------------------------------------------------------
   header
   -------------------------------------------------------- */
/* いちばん上では映像が透けて見え、スクロールするとすりガラスになります */
.site-header{
  position:sticky; top:0; z-index:100;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease-soft), border-color .3s var(--ease-soft),
             box-shadow .3s var(--ease-soft), backdrop-filter .4s var(--ease-soft);
}
.site-header > *{ position:relative; }
/* 上端では映像の上に白抜きで乗せ、スクロールしたら焦茶に戻します。
   コントラストはヒーローのスクリム（.hero::before）が担保します。 */
/* 2枚のロゴは縦横比がわずかに違うので、グリッドの同じマスに重ねて中央で揃えます */
.site-header .wordmark{ display:grid; place-items:center; }
.wordmark__logo--dark,
.wordmark__logo--light{
  grid-area:1 / 1;
  transition:opacity .35s var(--ease-soft);
}
.wordmark__logo--light{ opacity:1; }
.wordmark__logo--dark{ opacity:0; }
.site-header.is-scrolled .wordmark__logo--light{ opacity:0; }
.site-header.is-scrolled .wordmark__logo--dark{ opacity:1; }

.site-header:not(.is-scrolled) .gnav a{ color:#fff; }
.site-header:not(.is-scrolled) .gnav .en{ color:rgba(255,255,255,.78); }
.site-header:not(.is-scrolled) .gnav a::after{ background:var(--yellow); }
.site-header:not(.is-scrolled) .gnav a:hover,
.site-header:not(.is-scrolled) .gnav a:hover .en{ color:var(--yellow); }
.site-header:not(.is-scrolled) .gnav{
  text-shadow:0 1px 10px rgba(42,37,25,.45);
}
.site-header.is-scrolled{
  background:rgba(251,248,241,.90);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  backdrop-filter:blur(16px) saturate(1.2);
  border-bottom-color:var(--line);
  box-shadow:0 4px 20px rgba(58,52,38,.05);
}
.site-header__inner{
  max-width:var(--wrap);
  margin-inline:auto;
  padding:12px var(--pad);
  display:flex; align-items:center; gap:16px;
  transition:padding .3s var(--ease-soft);
}
.site-header.is-scrolled .site-header__inner{ padding-block:7px; }

.wordmark{
  text-decoration:none;
  display:block;
  flex:0 0 auto;
}
/* ロゴは背景が透明な logo-alpha.png（logo.png から生成）。
   もとの logo.png は白地なので、半透明のヘッダーの上では
   mix-blend-mode が破綻して白い箱が出ます。 */
.wordmark__logo{
  width:clamp(100px, 11vw, 124px);
  height:auto;
  transition:transform .5s var(--ease);
}
.wordmark:hover .wordmark__logo{ transform:rotate(-2deg) scale(1.04); }

.gnav{ margin-left:auto; display:none; }
.gnav ul{ display:flex; gap:clamp(14px, 2.1vw, 30px); }
.gnav a{
  display:grid; justify-items:center; gap:.1em;
  text-decoration:none;
  padding:6px 2px;
  position:relative;
  transition:color .22s var(--ease-soft);
}
.gnav a::after{
  content:""; position:absolute;
  left:0; right:0; bottom:0; height:2px;
  background:var(--gold);
  border-radius:2px;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .35s var(--ease);
}
.gnav .ja{
  font-family:var(--f-display);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.08em;
}
.gnav .en{
  font-family:var(--f-en);
  font-size:.56rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.gnav a:hover{ color:var(--gold); }
.gnav a:hover .en{ color:var(--gold); }
.gnav a:hover::after,
.gnav a:focus-visible::after{ transform:scaleX(1); }

.header-cta{ margin-left:auto; flex:0 0 auto; }
@media (min-width:1000px){
  .gnav{ display:block; }
  .header-cta{ margin-left:clamp(16px, 2.6vw, 34px); }
}

/* --------------------------------------------------------
   button（黄色のピル＋左に丸アイコン）
   -------------------------------------------------------- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:.75em;
  text-decoration:none;
  font-family:var(--f-display);
  font-weight:700;
  font-size:.94rem;
  letter-spacing:.1em;
  line-height:1.5;
  white-space:nowrap;
  padding:.92em 1.9em .92em 1.05em;
  border:0;
  border-radius:var(--r-pill);
  background:var(--yellow);
  color:var(--ink);
  cursor:pointer;
  overflow:hidden;
  box-shadow:0 0 0 1.5px var(--ink);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* ホバーで濃い黄色が左から満ちる */
.btn::before{
  content:""; position:absolute; inset:0;
  background:var(--yellow-dp);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .45s var(--ease);
}
.btn:hover{
  transform:translateY(-3px);
  box-shadow:0 0 0 1.5px var(--ink), 0 10px 24px rgba(58,52,38,.16);
}
.btn:hover::before{ transform:scaleX(1); }
.btn > *{ position:relative; }
.btn{ isolation:isolate; }
.btn__ico{
  position:relative;
  width:26px; height:26px; flex:0 0 auto;
  border-radius:50%;
  background:var(--ink);
  color:var(--yellow);
  display:grid; place-items:center;
  transition:transform .35s var(--ease);
}
.btn__ico svg{ width:15px; height:15px; }
.btn:hover .btn__ico{ transform:translateX(4px); }

.btn--sm{
  font-size:.82rem;
  padding:.6em 1.35em .6em .75em;
  gap:.6em;
}
.btn--sm .btn__ico{ width:22px; height:22px; }
.btn--sm .btn__ico svg{ width:13px; height:13px; }

/* 濃い面の上のボタンは輪郭が要らない */
.btn--light{
  background:var(--white);
  color:var(--ink);
  box-shadow:none;
}
.btn--light:hover{ box-shadow:0 10px 24px rgba(0,0,0,.28); }
.btn--light::before{ background:var(--yellow); }
.btn--light .btn__ico{ background:var(--yellow); color:var(--ink); }

.btn--wide{ width:100%; justify-content:center; }

/* --------------------------------------------------------
   HERO — 画面いっぱいの映像に、白いロゴを1つ置くだけ
   -------------------------------------------------------- */
/* ヒーローはヘッダーの下から始まるので、そのぶん上へ引き上げて
   ちょうど1画面に収めます（--hh はヘッダーの高さ。script.js が入れます）。
   映像はヘッダーの裏まで届きます。 */
.hero{
  position:relative;
  min-height:100svh;
  margin-top:calc(var(--hh, 84px) * -1);
  display:flex;
  padding-top:calc(var(--hh, 84px) + clamp(18px, 5vh, 44px));
  padding-bottom:clamp(40px, 7vh, 80px);
}
/* 映像は明るいカットも暗いカットもあるので、ヒーローの範囲だけ
   スクリムを敷きます。上＝ヘッダーの文字、中央＝ロゴ、下＝SCROLL のため。
   ヒーローと一緒にスクロールで抜けるので、本文には影響しません。 */
.hero::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(closest-side at 50% 50%,
      rgba(42,37,25,.36) 0%, rgba(42,37,25,.20) 46%, rgba(42,37,25,0) 74%),
    linear-gradient(180deg,
      rgba(42,37,25,.42) 0%, rgba(42,37,25,.12) 26%,
      rgba(42,37,25,.12) 66%, rgba(42,37,25,.44) 100%);
}
.hero__wrap{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

/* ロゴ。白なので、明るいカットでも消えないよう
   後ろにやわらかい影を敷いて、ロゴ自体にも影を付けます（四角い箱は作らない）。 */
.hero__mark{
  position:relative;
  display:grid;
  place-items:center;
  width:100%;
}
.hero__logo{
  position:relative;
  width:clamp(230px, 33vw, 460px);
  height:auto;
  filter:drop-shadow(0 3px 22px rgba(42,37,25,.55));
}

/* 右端の縦組みの欧文（飾り） */
.hero__side{
  display:none;
  position:absolute;
  right:calc(var(--pad) * -1 + 8px);
  bottom:clamp(96px, 16vh, 190px);
  writing-mode:vertical-rl;
  font-family:var(--f-en);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.42em;
  color:#fff;
  opacity:.8;
  text-shadow:0 1px 10px rgba(42,37,25,.5);
}

/* スクロールの合図 */
.hero__scroll{
  position:absolute;
  left:50%; bottom:0;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-decoration:none;
  padding:8px 10px;
}
.hero__scroll-txt{
  font-family:var(--f-en);
  font-size:.62rem; font-weight:700;
  letter-spacing:.28em;
  color:#fff;
  writing-mode:vertical-rl;
  text-shadow:0 1px 10px rgba(42,37,25,.55);
}
.hero__scroll-line{
  width:2px; height:clamp(38px, 7vh, 62px);
  border-radius:2px;
  background:linear-gradient(rgba(255,255,255,.85) 40%, transparent 0) 0 0 / 2px 10px repeat-y;
  overflow:hidden;
  position:relative;
}
.hero__scroll-line::after{
  content:"";
  position:absolute; left:0; right:0; top:-40%;
  height:40%;
  background:var(--yellow);
  animation:scrollcue 1.9s var(--ease-soft) infinite;
}
@keyframes scrollcue{
  0%   { transform:translateY(0);    opacity:0; }
  25%  { opacity:1; }
  100% { transform:translateY(350%); opacity:0; }
}
.hero__scroll:hover .hero__scroll-txt{ color:var(--yellow); }

@media (min-width:900px){
  .hero__side{ display:block; }
}
@media (max-width:560px){
  .hero{ padding-top:calc(var(--hh, 84px) + 12px); }
}

/* --------------------------------------------------------
   INTRO — ヒーローの下で、はじめに言葉を置くところ
   -------------------------------------------------------- */
.intro{
  background:var(--band);
  text-align:center;
  padding-block:clamp(64px, 9vw, 120px);
}
.intro .wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.intro__copy{
  font-family:var(--f-display);
  font-weight:900;
  font-size:clamp(1.75rem, 5.4vw, 3.1rem);
  line-height:1.55;
  letter-spacing:.08em;
  color:var(--ink);
}
.intro__copy .line{ display:block; }
.intro__dot{ color:var(--gold); }
.intro__wave{ margin-top:1.3em; }

.intro__lead{
  margin-top:1.9em;
  font-size:clamp(1rem, 2.1vw, 1.14rem);
  line-height:2.05;
  max-width:34em;
}
.intro__place{
  margin-top:1.1em;
  font-size:.86rem;
  letter-spacing:.14em;
  color:var(--muted);
}
.intro__actions{
  margin-top:2.1em;
  display:flex; flex-wrap:wrap; gap:.8em 1em;
  justify-content:center;
}
/* 黄色いボタンの隣に置く、線だけのボタン */
.btn--ghost{
  background:transparent;
  color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--ink);
  padding-inline:1.6em;
}
.btn--ghost::before{ background:var(--yellow); }
.btn--ghost:hover{ box-shadow:inset 0 0 0 1.5px var(--ink), 0 10px 24px rgba(58,52,38,.16); }
@media (max-width:560px){
  .intro__lead{ font-size:.96rem; line-height:1.95; }
  .intro__lead br{ display:none; }
  .intro__actions .btn{ font-size:.88rem; padding:.82em 1.6em .82em .95em; }
}

/* --------------------------------------------------------
   ABOUT
   -------------------------------------------------------- */
.about{ background:var(--band); }
/* 帯のある節と無い節を交互にして、リズムを作ります */
.works, .plan, .skills, .faq{ background:var(--band-2); }
/* プロフィール。左にイラスト、右に本文。 */
.prof{
  margin-top:clamp(32px, 4.6vw, 54px);
  display:grid;
  gap:clamp(20px, 3.4vw, 44px);
  align-items:start;
}
@media (min-width:820px){
  .prof{ grid-template-columns:minmax(210px, 320px) 1fr; }
}

.prof__fig{
  position:relative;
  margin:0;
  max-width:320px;
  justify-self:center;
}
/* 後ろに淡い黄色のひかり。四角い枠は付けず、絵を浮かせる。
   顔に色がかぶらないよう、頭の後ろから少しずらして薄く敷きます。 */
.prof__fig::before{
  content:"";
  position:absolute;
  left:-4%; top:-6%; width:74%; aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(255,255,0,.30) 0%, rgba(255,255,0,.14) 56%, rgba(255,255,0,0) 100%);
}
.prof__img{
  position:relative;
  width:100%; height:auto;
}

.prof__name{
  display:flex; align-items:center; gap:.8em; flex-wrap:wrap;
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(1.2rem, 2.8vw, 1.5rem);
  letter-spacing:.14em;
  color:var(--ink);
  padding-bottom:.75em;
  margin-bottom:1.1em;
  border-bottom:2px dotted var(--line);
}
.prof__role{
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.2em;
  line-height:1;
  padding:.55em 1.1em;
  border-radius:var(--r-pill);
  background:var(--yellow);
  box-shadow:0 0 0 1.5px var(--ink);
}

.prof__body > p{ max-width:40em; }
.prof__body > p + p{ margin-top:1.2em; }

.prof__meta{
  margin-top:1.8em;
  padding-top:1.4em;
  border-top:1px solid var(--hair);
  display:grid;
  gap:.9em;
}
.prof__meta > div{ display:grid; gap:.1em .7em; }
@media (min-width:560px){
  .prof__meta > div{ grid-template-columns:4.9em 1fr; align-items:baseline; }
}
.prof__meta dt{
  position:relative;
  padding-left:1.35em;
  font-family:var(--f-display);
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.14em;
  color:var(--gold);
}
.prof__meta dt::before{
  content:"";
  position:absolute; left:0;
  /* 1行目の行ボックスの中心に合わせる。em で目分量に置くとズレます */
  top:50%;
  top:0.5lh;
  transform:translateY(-50%);
  width:8px; height:8px;
  border-radius:50%;
  background:var(--yellow);
  box-shadow:0 0 0 1.5px var(--ink);
}
.prof__meta dd{
  margin:0;
  font-size:.88rem;
  line-height:1.9;
  color:var(--muted);
}

/* --------------------------------------------------------
   PRICE — 個別のご依頼の価格表
   -------------------------------------------------------- */
.price{ background:var(--band); }

.price-list{
  margin-top:clamp(36px, 5vw, 56px);
  display:grid;
  border-top:2px dotted var(--line);
}
.price-item{
  display:flex;
  align-items:baseline;
  gap:.8em;
  padding-block:clamp(15px, 2.2vw, 20px);
  border-bottom:2px dotted var(--line);
}
.price-item__name{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(1.02rem, 2.6vw, 1.18rem);
  letter-spacing:.09em;
  color:var(--ink);
  white-space:nowrap;
}
/* 品目と金額のあいだの余白（行の下罫と二重にならないよう線は引かない） */
.price-item__lead{
  flex:1 1 auto;
  min-width:1.5em;
  height:0;
}
.price-item__price{
  font-family:var(--f-display);
  color:var(--ink);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.price-item__price .num{ font-weight:900; font-size:clamp(1.45rem, 3.6vw, 1.85rem); }
.price-item__price .yen{ font-size:.78rem; margin-left:.3em; letter-spacing:.08em; }

@media (min-width:760px){
  .price-list{
    grid-template-columns:repeat(2, 1fr);
    column-gap:clamp(36px, 5vw, 76px);
  }
}

.price-note{
  margin-top:clamp(24px, 3.4vw, 34px);
  display:flex;
  align-items:flex-start;
  gap:.85em;
  background:var(--card);
  border:var(--glass-line);
  box-shadow:var(--glass-lift);
  border-radius:var(--r-md);
  padding:clamp(18px, 2.6vw, 26px) clamp(20px, 3vw, 30px);
}
.price-note__mark{
  width:12px; height:12px; flex:0 0 auto;
  /* 隣の p と同じ文字サイズにしておくと、0.5lh がそのまま
     p の1行目の中心になります（丸自体に文字は入りません） */
  font-size:.92rem;
  margin-top:calc(0.5lh - 6px);
  border-radius:50%;
  background:var(--yellow);
  box-shadow:0 0 0 1.5px var(--ink);
}
.price-note p{
  font-size:.92rem;
  color:var(--muted);
  max-width:46em;
}
.price-cta{ margin-top:clamp(26px, 3.6vw, 36px); }

/* --------------------------------------------------------
   PLAN — signature「段」
   -------------------------------------------------------- */
.plan{ padding-bottom:clamp(84px, 11vw, 156px); }

.steps{
  margin-top:clamp(40px, 6vw, 70px);
  display:grid;
  gap:18px;
}
.step{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:
    "dan   price"
    "name  name"
    "riser riser";
  align-items:baseline;
  gap:.15em .9em;
}
.step__dan{
  grid-area:dan;
  font-family:var(--f-display);
  font-size:.7rem; font-weight:700;
  letter-spacing:.14em;
  color:var(--muted);
}
.step__name{
  grid-area:name;
  font-family:var(--f-display);
  font-weight:700;
  font-size:1rem;
  letter-spacing:.08em;
  color:var(--ink);
}
.step__price{
  grid-area:price;
  font-family:var(--f-display);
  white-space:nowrap;
  justify-self:end;
  color:var(--ink);
}
.step__price .num{ font-weight:900; font-size:1.3rem; letter-spacing:.02em; }
.step__price .yen{ font-size:.74rem; margin-left:.35em; letter-spacing:.08em; }
.step__riser{
  grid-area:riser;
  display:block;
  height:9px;
  margin-top:.55em;
  border-radius:var(--r-pill);
  background:var(--yellow);
  box-shadow:0 0 0 1.5px var(--ink);
  width:calc(var(--i) / 4 * 100%);
  transition:width .9s var(--ease) calc(var(--i) * 90ms);
}
.step--main .step__riser{ background:var(--ink); }
.step--main .step__dan{ color:var(--gold); }
.step--main .step__name{ font-size:1.06rem; }

/* デスクトップでは本物の階段になる */
@media (min-width:900px){
  .steps{
    grid-template-columns:.9fr 1fr 1.45fr 1.05fr;
    align-items:end;
    gap:0;
  }
  .step{
    grid-template-columns:1fr;
    grid-template-areas:"dan" "name" "price" "riser";
    align-items:start;
    gap:0;
    padding-right:clamp(10px, 1.6vw, 20px);
  }
  .step__dan{ margin-bottom:.9em; }
  .step__name{ font-size:1.04rem; margin-bottom:.3em; }
  .step__price{ margin-bottom:.9em; justify-self:start; }
  .step__price .num{ font-size:clamp(1.5rem, 2.3vw, 2rem); }
  .step__riser{
    width:100%;
    height:calc(var(--i) * 34px);
    margin-top:0;
    border-radius:var(--r-sm) var(--r-sm) 0 0;
    transition:height .9s var(--ease) calc(var(--i) * 90ms);
  }
  .js .steps:not(.is-in) .step__riser{ height:0; }
}
@media (max-width:899px){
  .js .steps:not(.is-in) .step__riser{ width:0; }
}

/* 主役 */
.main-plan{
  position:relative;
  margin-top:clamp(40px, 6vw, 64px);
  background:var(--ink);
  color:var(--sand);
  border-radius:var(--r-lg);
  padding:clamp(28px, 5vw, 62px);
  display:grid;
  gap:clamp(26px, 4vw, 42px);
  overflow:hidden;
}
.main-plan::before{
  --dot:rgba(255,255,0,.55);
  right:-30px; top:-30px;
  width:132px; height:132px;
}
.main-plan__tag{
  display:inline-block;
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(.66rem, 2.6vw, .72rem);
  letter-spacing:.14em;
  color:var(--ink);
  background:var(--yellow);
  padding:.42em 1.1em;
  border-radius:var(--r-pill);
  margin-bottom:1.2em;
}
.main-plan__title{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(1rem, 2.2vw, 1.14rem);
  letter-spacing:.18em;
  color:var(--yellow);
  margin-bottom:.7em;
}
.main-plan__catch{
  font-family:var(--f-display);
  font-weight:900;
  font-size:clamp(1.2rem, 5vw, 2.15rem);
  line-height:1.62;
  letter-spacing:.06em;
  color:var(--white);
}
.main-plan__catch .nw{ display:block; }
.main-plan__desc{ color:#DCD4C1; }
.main-plan__list{ margin-top:1.6em; display:grid; gap:.8em; }
.main-plan__list li{
  position:relative;
  padding-left:1.7em;
  font-size:.93rem;
  color:#DCD4C1;
}
.main-plan__list li::before{
  content:""; position:absolute; left:0;
  top:50%;
  top:0.5lh;                 /* 折り返しても1行目に合う */
  transform:translateY(-50%);
  width:11px; height:11px;
  border-radius:50%;
  background:var(--yellow);
}
.main-plan__price{
  border-top:2px dotted rgba(255,255,0,.4);
  padding-top:clamp(22px, 3vw, 30px);
  display:grid; justify-items:start; align-content:start; gap:.35em;
}
.main-plan__num{
  font-family:var(--f-display);
  font-weight:900;
  font-size:clamp(3rem, 6.2vw, 4.7rem);
  line-height:1.05;
  letter-spacing:.01em;
  color:var(--yellow);
  font-variant-numeric:tabular-nums;
}
.main-plan__unit{
  font-size:.84rem; letter-spacing:.12em; color:#BDB49D;
}
.main-plan__price .btn{ margin-top:1.5em; }

@media (min-width:1040px){
  .main-plan{
    grid-template-columns:1.2fr .8fr;
    grid-template-areas:
      "head price"
      "body price";
    column-gap:clamp(40px, 5vw, 72px);
    align-items:start;
  }
  .main-plan__head{ grid-area:head; }
  .main-plan__body{ grid-area:body; }
  .main-plan__price{
    grid-area:price;
    border-top:0;
    border-left:2px dotted rgba(255,255,0,.4);
    padding-top:0;
    padding-left:clamp(30px, 4vw, 54px);
    align-self:stretch;
  }
}

/* そのほか */
.plan-list{
  margin-top:clamp(28px, 4vw, 40px);
  display:grid;
  gap:clamp(16px, 2.2vw, 24px);
}
.plan-card{
  background:var(--card-soft);
  border:var(--glass-line);
  box-shadow:var(--glass-lift);
  border-radius:var(--r-md);
  padding:clamp(24px, 3.4vw, 34px);
  display:grid;
  gap:.45em;
  align-content:start;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.plan-card:hover{
  transform:translateY(-6px);
  box-shadow:0 14px 32px rgba(58,52,38,.09);
}
.plan-card__dan{
  font-family:var(--f-display);
  font-size:.7rem; font-weight:700;
  letter-spacing:.14em; color:var(--muted);
}
.plan-card__name{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(1.2rem, 3.2vw, 1.45rem);
  letter-spacing:.07em;
  color:var(--ink);
}
.plan-card__desc{ font-size:.92rem; color:var(--muted); }
.plan-card__price{
  font-family:var(--f-display);
  color:var(--ink);
  margin-top:.5em;
  padding-top:.7em;
  border-top:2px dotted var(--line);
  font-variant-numeric:tabular-nums;
}
.plan-card__price .num{ font-weight:900; font-size:clamp(1.55rem, 3.8vw, 1.95rem); }
.plan-card__price .yen{ font-size:.8rem; margin-left:.35em; letter-spacing:.08em; }

@media (min-width:820px){
  .plan-list{ grid-template-columns:repeat(3, 1fr); }
}

/* --------------------------------------------------------
   WORKS
   -------------------------------------------------------- */
/* 一覧で並べず、1点ずつ大きく見せます。
   ・4.6秒ごとに自動で切り替わり、触っているあいだは止まる
   ・下のサムネイル、左右の矢印、←→キーで選べる
   ・切り替えは黄色いバーが横切るワイプ（ヒーロー動画と同じ動き） */
.wk{
  margin-top:clamp(38px, 5.5vw, 62px);
}

.wk__stage{
  position:relative;
  border-radius:var(--r-lg);
  /* 実績の画像は白ベタなので、中を透かすと白い箱が浮いて見えます。
     地はほぼ白のままにして、ガラス感は縁・光沢・影で出します。 */
  background:rgba(255,255,255,.93);
  -webkit-backdrop-filter:blur(6px) saturate(1.25);
  backdrop-filter:blur(6px) saturate(1.25);
  border:var(--glass-line);
  box-shadow:var(--glass-lift);
  overflow:hidden;
  /* ポインタの位置でごくわずかに傾ける（script.js が --rx / --ry を入れます） */
  transform:perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition:transform .5s var(--ease), box-shadow .4s var(--ease);
  will-change:transform;
}
.wk__stage:hover{ box-shadow:var(--glass-lift-h); }

/* ガラスの光沢。斜めの帯が、ゆっくり横切ります */
.wk__stage::after{
  content:"";
  position:absolute; inset:-40% -60%;
  background:linear-gradient(104deg,
    transparent 38%,
    rgba(255,255,255,.62) 47%,
    rgba(255,255,255,.9)  50%,
    rgba(255,255,255,.62) 53%,
    transparent 62%);
  transform:translateX(-42%);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s var(--ease-soft);
}
.wk__stage:hover::after{
  opacity:.55;
  animation:wkgloss 1.5s var(--ease) forwards;
}
@keyframes wkgloss{
  from{ transform:translateX(-42%); }
  to  { transform:translateX(42%); }
}

.wk__frames{
  position:relative;
  aspect-ratio:16 / 10;
  margin:0;
}
@media (max-width:640px){ .wk__frames{ aspect-ratio:4 / 3; } }

.wk__frame{
  position:absolute; inset:0;
  display:grid; place-items:center;
  /* 下は作品名の分だけ広くあける */
  padding:clamp(28px, 4.4vw, 56px) clamp(20px, 5vw, 70px) clamp(100px, 11vw, 128px);
  opacity:0;
  visibility:hidden;
  clip-path:inset(0 0 0 100%);
}
.wk__frame img{
  max-width:100%;
  max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  transform:scale(1.05);
  transition:transform 1.1s var(--ease);
}
.wk__frame.is-in{
  opacity:1;
  visibility:visible;
  clip-path:inset(0 0 0 0%);
  transition:clip-path .62s var(--ease);
}
.wk__frame.is-in img{ transform:scale(1); }
/* 出ていく側は、下に敷いたまま静かに消す */
.wk__frame.is-out{
  opacity:1;
  visibility:visible;
  clip-path:inset(0 0 0 0%);
}

/* 切り替えのときだけ走る黄色いバー */
.wk__sweep{
  position:absolute; top:0; bottom:0;
  width:clamp(48px, 6vw, 84px);
  background:var(--yellow);
  border-left:2px solid var(--ink);
  transform:translateX(-120%);
  pointer-events:none;
  opacity:0;
}
.wk.is-moving .wk__sweep{
  animation:wksweep .62s var(--ease) forwards;
}
@keyframes wksweep{
  0%   { transform:translateX(var(--sw, 100vw)); opacity:1; }
  100% { transform:translateX(-140%); opacity:1; }
}

/* 上辺の黄色い印。角丸に食い込まないよう、文字の左端に合わせて置きます */
.wk__tab{
  position:absolute; top:0;
  left:clamp(18px, 3vw, 34px);
  width:clamp(56px, 8vw, 92px); height:7px;
  background:var(--yellow);
  box-shadow:0 0 0 1.5px var(--ink);
  border-radius:0 0 4px 4px;
}

/* 作品名 */
.wk__meta{
  position:absolute;
  left:clamp(18px, 3vw, 34px);
  bottom:clamp(20px, 3vw, 30px);
  display:grid;
  gap:.15em;
  pointer-events:none;
}
.wk__num{
  display:flex; align-items:baseline; gap:.5em;
  font-family:var(--f-en);
  font-size:.7rem; font-weight:700;
  letter-spacing:.2em;
  color:var(--gold);
}
.wk__num-all{ color:var(--muted); font-weight:600; opacity:.75; }
.wk__name{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(1.02rem, 2.6vw, 1.42rem);
  letter-spacing:.06em;
  line-height:1.4;
  color:var(--ink);
}
.wk__cat{
  font-size:.78rem;
  letter-spacing:.14em;
  color:var(--muted);
}
/* 名前は切り替わるたびに、下から小さく入り直す */
.wk.is-moving .wk__meta > *{ animation:wkmeta .5s var(--ease) backwards; }
.wk.is-moving .wk__name{ animation-delay:.06s; }
.wk.is-moving .wk__cat{ animation-delay:.12s; }
@keyframes wkmeta{
  from{ opacity:0; transform:translateY(9px); }
  to  { opacity:1; transform:none; }
}

/* 自動送りの進み具合 */
.wk__bar{
  position:absolute; left:0; right:0; bottom:0;
  height:3px;
  background:rgba(58,52,38,.10);
}
.wk__bar span{
  display:block; height:100%; width:100%;
  background:var(--gold);
  transform-origin:left center;
  transform:scaleX(0);
}
.wk.is-playing .wk__bar span{
  animation:wkbar var(--hold, 4600ms) linear forwards;
}
.wk.is-held .wk__bar span{ animation-play-state:paused; }
@keyframes wkbar{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* 左右の矢印 */
.wk__arw{
  position:absolute; top:calc(50% - 22px);
  width:44px; height:44px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.8);
  border-radius:50%;
  background:rgba(251,248,241,.55);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);
  backdrop-filter:blur(10px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 6px 18px rgba(58,52,38,.16);
  color:var(--ink);
  cursor:pointer;
  opacity:0;
  transition:opacity .3s var(--ease-soft), transform .3s var(--ease), background .3s var(--ease);
}
.wk__arw svg{ width:17px; height:17px; }
.wk__arw--prev{ left:clamp(10px, 1.6vw, 18px); transform:translateX(-6px); }
.wk__arw--next{ right:clamp(10px, 1.6vw, 18px); transform:translateX(6px); }
.wk__stage:hover .wk__arw,
.wk__arw:focus-visible{ opacity:1; transform:none; }
.wk__arw:hover{ background:var(--yellow); border-color:var(--ink); }
@media (hover:none){ .wk__arw{ opacity:1; transform:none; } }

/* サムネイル */
.wk__nav{
  margin-top:clamp(14px, 2vw, 20px);
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:clamp(8px, 1.2vw, 14px);
}
.wk__thumb{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:3 / 2;
  padding:8px 8px 15px;
  border:var(--glass-line);
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  cursor:pointer;
  opacity:.55;
  filter:saturate(.35);
  transition:opacity .35s var(--ease), filter .35s var(--ease),
             transform .35s var(--ease), box-shadow .35s var(--ease);
}
.wk__thumb img{
  width:100%; height:100%;
  object-fit:contain;
}
.wk__thumb:hover{
  opacity:1; filter:none;
  transform:translateY(-3px);
  background:rgba(255,255,255,.86);
}
.wk__thumb.is-on{
  opacity:1;
  filter:none;
  background:rgba(255,255,255,.96);
  border-color:var(--ink);
  box-shadow:0 0 0 1px var(--ink), 0 10px 22px rgba(58,52,38,.16);
}
/* 選ばれているものには、カードの内側に黄色い線を引く */
.wk__thumb.is-on::after{
  content:"";
  position:absolute; left:22%; right:22%; bottom:6px;
  height:3px; border-radius:3px;
  background:var(--yellow);
  box-shadow:0 0 0 1px var(--ink);
}
@media (max-width:640px){
  /* 作品の上に大きく乗らないよう、矢印は小さく控えめに */
  .wk__arw{
    width:36px; height:36px; top:calc(50% - 40px);
    background:rgba(251,248,241,.78);
  }
  .wk__arw svg{ width:15px; height:15px; }
  .wk__nav{ grid-template-columns:repeat(4, 1fr); }
  .wk__thumb{ padding:6px 6px 13px; }
}

@media (prefers-reduced-motion: reduce){
  .wk__stage{ transform:none; }
  .wk__stage::after{ display:none; }
  .wk__frame.is-in{ transition:none; }
  .wk__frame img{ transform:none; }
  .wk .wk__sweep{ display:none; }
  .wk__bar{ display:none; }
}

/* --------------------------------------------------------
   SKILLS
   -------------------------------------------------------- */
.skill-list{
  margin-top:clamp(38px, 5.5vw, 62px);
  display:grid;
  gap:clamp(16px, 2.2vw, 24px);
}
.skill{
  position:relative;
  overflow:hidden;
  background:var(--card-soft);
  border:var(--glass-line);
  box-shadow:var(--glass-lift);
  border-radius:var(--r-md);
  padding:clamp(24px, 3.4vw, 34px);
  display:grid;
  gap:.5em;
  align-content:start;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.skill:hover{
  transform:translateY(-6px);
  box-shadow:0 14px 32px rgba(58,52,38,.09);
}
.skill__ico{
  width:52px; height:52px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--white);
  color:var(--gold);
  margin-bottom:.4em;
  transition:background .35s var(--ease), transform .5s var(--ease);
}
.skill__ico{ box-shadow:0 0 0 1.5px var(--line); }
.skill:hover .skill__ico{
  background:var(--yellow);
  box-shadow:0 0 0 1.5px var(--ink);
  transform:rotate(-8deg) scale(1.08);
  color:var(--ink);
}
.skill__ico svg{ width:30px; height:30px; }
.skill__name{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(1.18rem, 3vw, 1.4rem);
  letter-spacing:.12em;
  color:var(--ink);
}
.skill p{ color:var(--muted); font-size:.93rem; }
@media (min-width:700px){ .skill-list{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1040px){ .skill-list{ grid-template-columns:repeat(4, 1fr); } }

.gear{
  position:relative;
  margin-top:clamp(40px, 5.5vw, 64px);
  background:var(--ink);
  color:var(--sand);
  border-radius:var(--r-lg);
  padding:clamp(28px, 4.6vw, 52px);
  overflow:hidden;
}
.gear::before{
  --dot:rgba(255,255,0,.55);
  right:-28px; bottom:-28px;
  width:126px; height:126px;
}
.gear__head{
  font-family:var(--f-display);
  font-weight:900;
  font-size:clamp(1.25rem, 3.6vw, 1.8rem);
  letter-spacing:.06em;
  line-height:1.6;
  margin-bottom:.85em;
  color:var(--yellow);
}
.gear__body{ color:#DCD4C1; max-width:46em; font-size:.95rem; }

/* --------------------------------------------------------
   FLOW
   -------------------------------------------------------- */
.flow{ background:var(--band); }
.flow-list{
  margin-top:clamp(38px, 5.5vw, 62px);
  display:grid;
  gap:clamp(14px, 2vw, 20px);
  counter-reset:flow;
}
.flow-item{
  counter-increment:flow;
  position:relative;
  background:var(--card);
  border:var(--glass-line);
  box-shadow:var(--glass-lift);
  border-radius:var(--r-md);
  padding:clamp(22px, 3.2vw, 32px) clamp(22px, 3.2vw, 32px) clamp(22px, 3.2vw, 32px) clamp(62px, 8vw, 86px);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.flow-item:hover{
  transform:translateX(6px);
  box-shadow:0 12px 28px rgba(58,52,38,.08);
}
.flow-item::before{
  content:counter(flow);
  position:absolute;
  left:clamp(20px, 3vw, 28px);
  /* カードの上パディング＋見出し1行目の半分（行送りが2なので font-size と同値） */
  top:calc(clamp(22px, 3.2vw, 32px) + clamp(1.06rem, 2.8vw, 1.26rem));
  transform:translateY(-50%);
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--yellow);
  box-shadow:0 0 0 1.5px var(--ink);
  color:var(--ink);
  font-family:var(--f-display);
  font-weight:700;
  font-size:.94rem;
  line-height:1;
}
.flow-item__title{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(1.06rem, 2.8vw, 1.26rem);
  letter-spacing:.08em;
  color:var(--ink);
  margin-bottom:.4em;
}
.flow-item p{ color:var(--muted); font-size:.93rem; max-width:42em; }

/* --------------------------------------------------------
   FAQ
   -------------------------------------------------------- */
.faq-list{
  margin-top:clamp(38px, 5.5vw, 62px);
  display:grid;
  gap:clamp(12px, 1.6vw, 16px);
}
.qa{
  background:var(--card-soft);
  border:var(--glass-line);
  box-shadow:var(--glass-lift);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:background .3s var(--ease-soft);
}
.qa[open]{ background:var(--sand2); }
.qa summary{
  list-style:none;
  cursor:pointer;
  padding:clamp(18px, 2.6vw, 24px) 60px clamp(18px, 2.6vw, 24px) clamp(20px, 3vw, 30px);
  position:relative;
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(.98rem, 2.5vw, 1.1rem);
  letter-spacing:.06em;
  line-height:1.75;
  color:var(--ink);
  transition:color .2s var(--ease-soft);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--gold); }
.qa summary::before{
  content:""; position:absolute;
  right:clamp(18px, 2.6vw, 24px); top:50%;
  width:28px; height:28px; margin-top:-14px;
  border-radius:50%;
  background:var(--yellow);
  box-shadow:0 0 0 1.5px var(--ink);
  transition:transform .35s var(--ease);
}
.qa summary:hover::before{ transform:scale(1.12); }
.qa summary::after{
  content:""; position:absolute;
  right:calc(clamp(18px, 2.6vw, 24px) + 7px); top:50%;
  width:14px; height:14px; margin-top:-7px;
  background:
    linear-gradient(var(--ink),var(--ink)) center/14px 2px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/2px 14px no-repeat;
  transition:background-size .3s var(--ease);
}
/* 開いたら縦棒だけ縮めて「−」にする */
.qa[open] summary::after{ background-size:14px 2px, 2px 0; }

/* 開閉のアニメーション（JSが height を計算します）
   JSが無いときは <details> の既定の開閉に任せます。 */
.qa__wrap{ overflow:hidden; }
.js .qa__wrap{
  height:0;
  transition:height .38s var(--ease);
}
.js .qa[open] .qa__wrap{ height:auto; }
.qa__body{
  padding:0 clamp(20px, 3vw, 30px) clamp(20px, 3vw, 28px);
}
.qa__body p{
  color:var(--muted);
  font-size:.93rem;
  padding-top:clamp(14px, 2vw, 18px);
  border-top:2px dotted var(--line);
  max-width:46em;
}

/* --------------------------------------------------------
   CONTACT
   -------------------------------------------------------- */
.contact__grid{
  margin-top:clamp(38px, 5.5vw, 60px);
  display:grid;
  gap:clamp(34px, 5vw, 64px);
}
@media (min-width:900px){
  .contact__grid{ grid-template-columns:1.25fr .75fr; }
}

.contact{ background:var(--band); }

.cform{
  display:grid; gap:clamp(16px, 2.2vw, 22px);
  background:var(--card-soft);
  border:var(--glass-line);
  box-shadow:var(--glass-lift);
  border-radius:var(--r-lg);
  padding:clamp(24px, 4vw, 44px);
}
.field{ display:grid; gap:.5em; }
.field label{
  font-family:var(--f-display);
  font-size:.82rem; letter-spacing:.1em; font-weight:700;
  color:var(--ink);
}
.field .opt{ font-weight:500; color:var(--muted); letter-spacing:.06em; }
.field input,
.field select,
.field textarea{
  width:100%;
  background:rgba(255,255,255,.94);   /* 入力欄はほぼ不透明。打った字を読ませる */
  border:1px solid var(--hair);
  border-radius:var(--r-sm);
  padding:.85em 1em;
  font-size:1rem;
  line-height:1.7;
  transition:border-color .25s var(--ease-soft), box-shadow .25s var(--ease-soft);
}
.field textarea{ resize:vertical; min-height:9em; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(255,255,0,.45);
  outline:none;
}
/* スパムよけの項目。display:none だと埋めない機械がいるので、
   画面外に飛ばして「見えないが存在する」状態にします。 */
.hp{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}

.cform__status{
  font-size:.88rem;
  color:var(--gold);
  min-height:1.6em;
  transition:color .2s var(--ease-soft);
}
.cform__status.is-error{ color:#A6382A; }
.cform__status.is-done{ color:#2F6B42; font-weight:700; }

/* 送信中はボタンを押せなくする */
.cform.is-sending .btn{ opacity:.55; pointer-events:none; }
.cform.is-sent .btn{ display:none; }

.contact__direct h3{
  font-family:var(--f-display);
  font-weight:700;
  font-size:1.04rem;
  letter-spacing:.1em;
  color:var(--ink);
  padding-bottom:.7em;
  border-bottom:2px dotted var(--line);
  margin-bottom:1em;
}
.contact__direct h3:not(:first-child){ margin-top:clamp(32px, 4.5vw, 46px); }
.contact__mail a{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(1.05rem, 3.2vw, 1.32rem);
  letter-spacing:.03em;
  text-decoration:none;
  border-bottom:2px solid var(--gold);
  word-break:break-all;
  transition:color .25s var(--ease-soft);
}
.contact__mail a:hover{ color:var(--gold); }
.contact__small{
  margin-top:.9em;
  font-size:.83rem; color:var(--muted); line-height:1.9;
}
.contact__ig a{
  display:inline-flex; align-items:center; gap:.6em;
  text-decoration:none;
  font-size:1rem; letter-spacing:.06em;
  transition:color .25s var(--ease-soft);
}
.contact__ig-ico{
  width:34px; height:34px; flex:0 0 auto;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--sand2);
  color:var(--ink);
  transition:background .3s var(--ease), transform .4s var(--ease);
}
.contact__ig-ico svg{ width:20px; height:20px; }
.contact__ig a:hover{ color:var(--gold); }
.contact__ig a:hover .contact__ig-ico{
  background:var(--yellow);
  box-shadow:0 0 0 1.5px var(--ink);
  color:var(--ink);
  transform:rotate(-8deg) scale(1.08);
}

/* --------------------------------------------------------
   footer
   -------------------------------------------------------- */
/* 締めは暗いガラス。ロゴは透過PNGなので、半透明でも箱は出ません。 */
.site-footer{
  background:rgba(42,37,25,.82);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  color:var(--sand);
  padding-block:clamp(40px, 6vw, 68px);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.site-footer__inner{
  display:grid; gap:1.2em;
}
.site-footer__brand{
  display:block;
  width:clamp(138px, 17vw, 180px);
}
.site-footer__brand img{
  width:100%;
  height:auto;
  filter:invert(1);   /* 透過PNGなので、色だけ反転して明るい線になります */
}
.site-footer__meta{
  font-size:.85rem; color:#CFC7B2; line-height:1.95;
}
.site-footer__meta a{ color:var(--yellow); }
.site-footer__copy{
  font-family:var(--f-en);
  font-size:.72rem; letter-spacing:.16em; color:#A79E88;
}
@media (min-width:760px){
  .site-footer__inner{
    grid-template-columns:auto 1fr auto;
    align-items:end;
    gap:clamp(24px, 4vw, 56px);
  }
  .site-footer__copy{ text-align:right; }
}

/* --------------------------------------------------------
   出現のアニメーション
   JSが有効なときだけ隠し、画面に入ったら .is-in を付けます。
   同じ親の中に複数あるときは、JSが --d（遅らせる時間）をずらします。
   -------------------------------------------------------- */
.js [data-anim]{
  opacity:0;
  transition:
    opacity .85s var(--ease) var(--d, 0ms),
    transform .85s var(--ease) var(--d, 0ms);
  will-change:opacity, transform;
}
.js [data-anim="up"]    { transform:translateY(18px); }
.js [data-anim="left"]  { transform:translateX(24px); }
.js [data-anim="zoom"]  { transform:scale(.965); }
.js [data-anim="fade"]  { transform:none; }
.js [data-anim].is-in{
  opacity:1;
  transform:none;
}
.js [data-anim].is-in{ will-change:auto; }

/* 波線は線が描かれる */
.js .wave path{
  stroke-dasharray:120;
  stroke-dashoffset:120;
}
.js .wave.is-in path{
  animation:draw 1.1s var(--ease) forwards;
  animation-delay:var(--d, 0ms);
}
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* --------------------------------------------------------
   動きを減らす設定を尊重する
   -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .js [data-anim]{ opacity:1; transform:none; }
  .js .wave path{ stroke-dashoffset:0; }
  .js .steps:not(.is-in) .step__riser{ width:calc(var(--i) / 4 * 100%); }
  @media (min-width:900px){
    .js .steps:not(.is-in) .step__riser{ width:100%; height:calc(var(--i) * 34px); }
  }
  .work:hover .work__media > *,
  .plan-card:hover, .skill:hover, .flow-item:hover, .btn:hover{ transform:none; }
  .hero__scroll-line::after{ display:none; }
  /* 背景の映像は止めてポスター画像に置き換わります（script.js） */
  .bgv__video{ transform:none; }
  .bgv__veil{ opacity:.62; }
}

/* --------------------------------------------------------
   印刷
   -------------------------------------------------------- */
@media print{
  .site-header, .cform, .bgv, .hero__scroll, .hero__side, .wave{ display:none; }
  html, body{ background:#fff; }
  /* ロゴだけのヒーローは、印刷では小さく置くだけにします */
  .hero{ min-height:0; margin-top:0; padding-block:0 20px; }
  .hero__mark::before{ display:none; }
  .hero__logo{ width:150px; filter:invert(1); }
  .intro{ background:#fff; padding-block:8px 24px; }
  .about, .price, .flow{ background:#fff; }
  .plan-card, .skill, .qa{ background:#fff; }
  .section{ padding-block:24px; }
  .js [data-anim]{ opacity:1 !important; transform:none !important; }
}