/* HAKE PRODUCTION サイト共通のスタイル(全ページがこのファイルを読む) */
/* =====================================================================
   デザインシステム「HAKE PRODUCTION」のトークン(tokens.json から書き写し)
   レイアウト:ヒーロー=角丸の大きなリールにキャッチを重ねる/基本は左1/3見出し・右2/3中身
   ライトテーマのみ(ダークモードは用意しない)
   ===================================================================== */
:root{
  /* 面 */
  --surface:#f6f5f1; --surface-raised:#ffffff; --surface-sunken:#edece7; --surface-tint:#edf3ea; --surface-deep:#23362b;
  /* 文字 */
  --ink:#26292c; --ink-muted:#5c615f; --on-deep:#f3f1ea; --on-deep-muted:#b9c4bb;
  /* 緑 */
  --hake-900:#23362b; --hake-700:#3b5a45; --hake-500:#6a8f68; --hake-300:#a9c1a3; --hake-100:#e3ece0;
  /* アクセント・線 */
  --accent:#d9a23f; --accent-ink:#8c6214; --line:#dad8d1; --line-strong:#8a8e86; --focus:#3b5a45;
  --surface-glass:rgba(255,255,255,.78);   /* スクロール時のヘッダー:ガラスのぼかし */
  --veil:rgba(35,54,43,.6);              /* 写真・映像の上に文字を載せるときの覆い(hake-900 60%) */
  --on-deep-line:rgba(243,241,234,.16);  /* 濃い緑の上の区切り線 */
  --shadow-float:0 8px 24px rgba(38,41,44,.06);
  /* 書体 */
  --font-jp:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  --font-en:Montserrat,"Zen Kaku Gothic New",sans-serif;
  /* 余白(8px基準) */
  --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px; --space-5:32px; --space-6:48px; --space-7:64px; --space-8:96px; --space-9:128px; --space-10:160px;
  /* 角丸 */
  --radius-sm:4px; --radius-md:12px; --radius-lg:24px; --radius-xl:48px; --radius-pill:999px;
  /* 幅 */
  --container:1680px; --measure:640px;   /* 文章の幅は固定しない(2026-11-05)。残しているのは参考値 */
  --header-height:96px;
  --gutter:clamp(24px,4.2vw,80px);   /* 左右の余白:画面幅に合わせて24〜80px */
  color-scheme:light;
}
@media (max-width:720px){:root{--header-height:64px}}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--surface);color:var(--ink);font-family:var(--font-jp);font-size:15px;line-height:2;letter-spacing:.06em;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.en{font-family:var(--font-en)}
/* 左右の余白は各帯の内側でとる(スマホの端のバーも避ける) */
/* 左右の余白はリール(ヒーロー)と同じ:画面幅の約6.3%(36〜120px)。どの画面でも中身がリールの左右の端より外に出ない */
.wrap{max-width:calc(var(--container) + 3 * var(--gutter));margin:0 auto;
  padding-left:max(calc(var(--gutter) * 1.5),env(safe-area-inset-left,0px));padding-right:max(calc(var(--gutter) * 1.5),env(safe-area-inset-right,0px))}

/* ---------- 等高線:お問い合わせの下にコンパクトに置き、ゆっくり流す ---------- */
.contour{display:block;width:100%;max-width:100%;height:96px;pointer-events:none;fill:none;stroke:var(--hake-300)}
/* 線ごとの太さと透明度(上から1〜5本目) */
.contour .l1 path{stroke-width:1.4px;stroke-opacity:.5}
.contour .l2 path{stroke-width:.8px;stroke-opacity:.35}
.contour .l3 path{stroke-width:.8px;stroke-opacity:.32}
.contour .l4 path{stroke-width:.8px;stroke-opacity:.29}
.contour .l5 path{stroke-width:.8px;stroke-opacity:.26}
main,.site-foot{position:relative;z-index:1}

/* ---------- 文字組み ---------- */
.eyebrow{font-family:var(--font-en);font-size:15px;line-height:1.4;font-weight:400;letter-spacing:.08em;color:var(--ink-muted);margin:0 0 var(--space-4)}
.h1{font-size:32px;line-height:1.7;font-weight:500;letter-spacing:.06em;margin:0;text-wrap:balance}
.h2{font-size:24px;line-height:1.7;font-weight:500;letter-spacing:.06em;margin:0}
.h3{font-size:18px;line-height:1.8;font-weight:700;letter-spacing:.04em;margin:0}
.body-lg{font-size:17px;line-height:2.1;letter-spacing:.06em;margin:0}
.small{font-size:13px;line-height:1.8;letter-spacing:.04em;color:var(--ink-muted)}
.en-sub{font-family:var(--font-en);font-size:14px;line-height:1.6;letter-spacing:.08em;color:var(--ink-muted)}
.rule{display:block;width:32px;height:2px;background:var(--accent);border:0;margin:var(--space-3) 0 0}
@media (max-width:720px){.h1{font-size:24px}.h2{font-size:20px}}

/* ---------- ボタン:アウトラインのピル+丸い矢印 ---------- */
.hk-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-width:216px;
  padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4);border-radius:var(--radius-pill);border:1px solid var(--ink);
  background:transparent;color:var(--ink);font:500 13px/1.4 var(--font-jp);letter-spacing:.08em;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.hk-arrow{flex:none;width:28px;height:28px;border-radius:var(--radius-pill);border:1px solid currentColor;display:grid;place-items:center;transition:transform .2s}
.hk-arrow svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hk-btn:hover{background:var(--ink);color:var(--surface)}
.hk-btn--primary{background:var(--hake-700);border-color:var(--hake-700);color:#fff}
.hk-btn--primary:hover{background:var(--hake-900);border-color:var(--hake-900);color:#fff}
.hk-btn--on-deep{border-color:var(--on-deep);color:var(--on-deep)}
.hk-btn--on-deep:hover{background:var(--on-deep);color:var(--hake-900)}
.hk-btn--sm{min-width:0;padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4)}

/* ---------- タグ ---------- */
.hk-tag{display:inline-block;padding:2px var(--space-3);border-radius:var(--radius-pill);background:var(--hake-100);color:var(--hake-700);font:500 12px/1.8 var(--font-jp);letter-spacing:.06em}

/* ---------- ヘッダー ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
/* ヘッダー:画面の上に固定。ページ最上部ではロゴと「相談する」をリールの左右の端にそろえ、
   スクロールしたら画面の左右と上にぴったり付いた帯になる(ガラスのぼかし) */
.site-head{position:fixed;top:0;left:0;right:0;z-index:20;padding-top:calc(env(safe-area-inset-top,0px) + var(--space-4));
  transition:padding-top .35s ease,background-color .35s ease,box-shadow .35s ease}
@media (max-width:720px){.site-head{padding-top:calc(env(safe-area-inset-top,0px) + var(--space-3))}}
main{padding-top:calc(var(--header-height) + var(--space-4))}
@media (max-width:720px){main{padding-top:calc(var(--header-height) + var(--space-3))}}
.head-in{padding-left:max(calc(var(--gutter) * 1.5),env(safe-area-inset-left,0px));padding-right:max(calc(var(--gutter) * 1.5),env(safe-area-inset-right,0px));transition:padding .35s ease}
.hd{height:var(--header-height);display:flex;align-items:center;gap:var(--space-5);transition:height .35s ease}
.nav .hk-btn{font-size:15px;white-space:nowrap;padding-block:var(--space-2)}
.site-head.is-scrolled{padding-top:env(safe-area-inset-top,0px);background:var(--surface-raised);box-shadow:var(--shadow-float)}
.is-scrolled .head-in{padding-left:max(var(--space-4),env(safe-area-inset-left,0px));padding-right:max(var(--space-4),env(safe-area-inset-right,0px))}
.is-scrolled .hd{height:72px}
.is-scrolled .logo b{font-size:24px}
@media (max-width:720px){.is-scrolled .hd{height:56px}.is-scrolled .head-in{padding-left:max(var(--space-3),env(safe-area-inset-left,0px));padding-right:max(var(--space-2),env(safe-area-inset-right,0px))}}
/* ガラスのぼかし:白を8割ほど残して後ろをぼかす(対応していないブラウザは白のまま) */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .site-head.is-scrolled{background:var(--surface-glass);-webkit-backdrop-filter:saturate(160%) blur(18px);backdrop-filter:saturate(160%) blur(18px);box-shadow:var(--shadow-float),inset 0 -1px 0 rgba(255,255,255,.6)}
}
.logo{display:flex;align-items:baseline;gap:var(--space-2) var(--space-4);flex-wrap:wrap;margin-right:auto;text-decoration:none;min-width:0}
.logo b{font-family:var(--font-en);font-weight:400;font-size:28.8px;line-height:1;letter-spacing:.28em;white-space:nowrap;transition:font-size .35s ease}
.logo small{font-size:15.6px;letter-spacing:.06em;color:var(--ink-muted);white-space:nowrap}
.nav{display:flex;align-items:center;gap:var(--space-5)}
.nav a:not(.hk-btn){font-size:19.2px;font-weight:500;letter-spacing:.08em;text-decoration:none;padding:var(--space-1) 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:not(.hk-btn):hover{color:var(--hake-700)}
.nav a[aria-current="page"]{border-bottom-color:var(--accent)}
.nav-sp{display:none}
.menu-btn{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;border-radius:var(--radius-pill);position:relative}
.menu-btn span{position:absolute;left:12px;right:12px;height:1.5px;background:var(--ink);transition:transform .25s}
.menu-btn span:nth-child(1){top:18px}.menu-btn span:nth-child(2){top:25px}
.menu-open .menu-btn span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.menu-open .menu-btn span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
@media (max-width:1440px){.logo small{display:none}}
@media (max-width:1320px){.nav{gap:var(--space-4)}.nav a:not(.hk-btn){font-size:18px}}
@media (max-width:1280px){
  .menu-btn{display:block}
  .nav .nav-sp{display:block}
  .nav{display:none;position:absolute;left:max(calc(var(--gutter) * 1.5),env(safe-area-inset-left,0px));right:max(calc(var(--gutter) * 1.5),env(safe-area-inset-right,0px));top:calc(100% + var(--space-2));
    flex-direction:column;align-items:stretch;gap:0;padding:var(--space-3) var(--space-4) var(--space-4);background:var(--surface-raised);border-radius:var(--radius-lg);box-shadow:var(--shadow-float)}
  .menu-open .nav{display:flex}
  .nav a:not(.hk-btn){padding:var(--space-3) 0;border-bottom:1px solid var(--line)}
  .nav a[aria-current="page"]{border-bottom:1px solid var(--line);color:var(--hake-700)}
  .nav .hk-btn{margin-top:var(--space-4);justify-content:space-between}
}
@media (max-width:880px){.logo b,.is-scrolled .logo b{font-size:24px}}
@media (max-width:720px){.is-scrolled .logo b{font-size:20px}}
@media (max-width:420px){.logo b{font-size:19.2px;letter-spacing:.22em}}


/* ---------- ヒーロー:画面の左右いっぱいに広げ、左上を地色で切り欠いてキャッチコピーを置く ---------- */
.hero{position:relative;margin-top:var(--space-7);--r:var(--radius-lg);margin-left:max(calc(var(--gutter) * 1.5),env(safe-area-inset-left,0px));margin-right:max(calc(var(--gutter) * 1.5),env(safe-area-inset-right,0px))}
@media (max-width:720px){.hero{margin-top:var(--space-5)}}
.hero-reel{position:relative;width:100%;height:clamp(440px,50vw,820px);overflow:hidden;border-radius:var(--r);background:var(--hake-900);color:var(--on-deep)}
.hero-reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.hero-reel:hover img{transform:scale(1.02)}
/* 映像の下側だけ薄く覆い、再生ボタンの文字を読めるようにする */
.hero-reel::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--veil),transparent 45%);pointer-events:none}
/* キャッチ:行ごとに地色のタブ。右下は丸く、映像との境目は内側に丸く(逆R)つなぐ */
.catch{position:absolute;left:0;top:0;z-index:3;margin:0;font-size:clamp(32px,4.6vw,76px);line-height:1.45;font-weight:500;letter-spacing:.08em;color:var(--ink);pointer-events:none}
.catch span{position:relative;display:block;width:fit-content;background:var(--surface);
  padding:0 clamp(20px,2.2vw,40px) .2em 0;border-bottom-right-radius:var(--r)}
.catch span:first-child{padding-top:.1em}
.catch span:last-child{padding-bottom:.45em}
.catch span::after,.catch span:last-child::before{content:"";position:absolute;width:var(--r);height:var(--r);
  background:radial-gradient(circle at 100% 100%,transparent calc(var(--r) - .5px),var(--surface) var(--r))}
.catch span::after{left:100%;top:0}
.catch span:last-child::before{left:0;top:100%}
/* 再生ボタンは映像全体を覆う(どこを押しても再生) */
.reel{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;padding:var(--space-6) clamp(24px,3.4vw,56px);border:0;margin:0;background:transparent;border-radius:var(--r);color:var(--on-deep);font:inherit;text-align:left;cursor:pointer}
.reel:focus-visible{outline-offset:-6px;outline-color:var(--on-deep)}
.reel-meta{display:flex;align-items:center;gap:var(--space-4)}
.playc{width:64px;height:64px;border-radius:var(--radius-pill);border:1px solid var(--on-deep);display:grid;place-items:center;transition:background .2s,color .2s}
.playc svg{width:18px;height:18px;fill:currentColor;margin-left:3px}
.reel:hover .playc{background:var(--on-deep);color:var(--hake-900)}
.reel-meta .en-sub{color:var(--on-deep)}
.reel-meta .len{color:var(--on-deep-muted);font-size:13px}
/* 右端の英字(縦組み) */
.hero-side{position:absolute;right:clamp(20px,2.4vw,40px);bottom:var(--space-6);z-index:1;writing-mode:vertical-rl;font-family:var(--font-en);font-size:14px;letter-spacing:.28em;color:var(--on-deep);pointer-events:none}
@media (max-width:560px){.catch{font-size:28px}.hero{--r:16px}.hero-reel{height:480px}.reel{padding:var(--space-4)}.playc{width:52px;height:52px}.hero-side{display:none}}

/* ---------- 左1/3見出し・右2/3中身 ---------- */
.sec{padding-block:var(--space-9)}
.sec + .sec{padding-top:0}   /* 続けて並ぶ章の間が二重に空かないように */
.split{display:grid;grid-template-columns:1fr 2fr;gap:var(--space-7)}
.split > *{min-width:0}
.split .head .hk-btn{margin-top:var(--space-6)}
@media (max-width:880px){.sec{padding-block:var(--space-8)}.split{grid-template-columns:1fr;gap:var(--space-5)}}

/* 紹介文 */
.intro + .sec{padding-top:0}   /* 紹介文とできることの間が二重に空かないように */
.intro .body-lg{line-height:2.5;letter-spacing:.08em}
.intro .hk-btn{margin-top:var(--space-6)}
.intro .hk-btn b{font-weight:700}
@media (max-width:560px){.intro .body-lg br{display:none}}


/* ---------- 制作実績:濃い緑の章 ---------- */
.works{background:var(--surface-deep);color:var(--on-deep);border-radius:var(--radius-lg);padding:var(--space-8) var(--space-7)}
.works .eyebrow{color:var(--on-deep-muted)}
.works-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-6)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.card{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);min-width:0;background:none;border:0;padding:0;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:var(--radius-md)}
.thumb{position:relative;display:block;width:100%;max-width:100%;aspect-ratio:4/3;border-radius:var(--radius-md);overflow:hidden;background:var(--hake-700);margin-bottom:var(--space-2)}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.card:hover .thumb img{transform:scale(1.03)}
.thumb .fb{position:absolute;inset:0;display:grid;place-items:center;padding:var(--space-4);text-align:center;font-size:15px;font-weight:500;color:var(--on-deep)}
.play{position:absolute;left:var(--space-3);bottom:var(--space-3);width:40px;height:40px;border-radius:var(--radius-pill);background:var(--veil);border:1px solid var(--on-deep);display:grid;place-items:center;transition:background .2s}
.play::after{content:"";border-left:11px solid var(--on-deep);border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.card:hover .play{background:var(--hake-900)}
.card-t{font-size:15px;font-weight:500;line-height:1.8;color:var(--on-deep)}
.card-c{font-size:13px;line-height:1.6;color:var(--on-deep-muted);margin-top:calc(-1 * var(--space-1))}
.tags{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-1)}
.works .hk-tag{background:rgba(243,241,234,.14);color:var(--on-deep)}
@media (max-width:880px){.works{padding:var(--space-7) var(--space-5)}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}}
@media (max-width:560px){.works{padding:var(--space-6) var(--space-4)}.grid{grid-template-columns:1fr}}

/* ---------- できること:画像・見出し・説明・丸矢印を1行に並べ、罫線で区切る ---------- */
.svc{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc li{border-bottom:1px solid var(--line)}
.svc a{display:grid;grid-template-columns:clamp(180px,17vw,280px) minmax(0,1fr) auto;gap:var(--space-3) clamp(24px,2.4vw,40px);align-items:center;
  padding:var(--space-4) var(--space-3);text-decoration:none;border-radius:var(--radius-md);transition:background .2s}
.svc a:hover{background:var(--surface-raised)}
/* 画像:4:3。用意できたら .svc-img の中を <img src="..." alt=""> に差し替える */
.svc-img{position:relative;display:block;width:100%;max-width:100%;aspect-ratio:4/3;border-radius:var(--radius-md);overflow:hidden;background:var(--hake-100)}
.svc-img img,.svc-img svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.svc a:hover .svc-img img,.svc a:hover .svc-img svg{transform:scale(1.03)}
.svc-img .ph{position:absolute;left:var(--space-2);top:var(--space-2);padding:0 var(--space-2);border-radius:var(--radius-pill);background:var(--surface-raised);font-size:11px;line-height:1.8;color:var(--ink-muted)}
.svc .en-sub{display:block;margin-bottom:var(--space-1)}
.svc .h2{margin-bottom:var(--space-2)}
.svc p{margin:0;font-size:14px;line-height:2;color:var(--ink-muted)}
.svc .go{display:flex;align-items:center;gap:var(--space-3);font-size:13px;font-weight:500;letter-spacing:.08em;white-space:nowrap}
.svc a:hover .hk-arrow{transform:translateX(3px)}
@media (max-width:1100px){.svc a{grid-template-columns:clamp(160px,22vw,220px) minmax(0,1fr)}.svc .go{grid-column:2}}
@media (max-width:560px){.svc a{grid-template-columns:1fr;padding:var(--space-4) 0}.svc .go{grid-column:1}}

/* ---------- 料金への導線:できることと同じ罫線の帯。制作実績とパートナー様への帯の間 ---------- */
.price{margin-top:var(--space-7)}
.price-link{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-3) var(--space-5);
  padding:clamp(28px,3vw,40px) clamp(24px,4vw,64px);background:var(--surface-sunken);border-radius:var(--radius-lg);text-decoration:none;transition:background .2s}
.price-link:hover{background:var(--hake-100)}
.price-ic{width:40px;height:40px;fill:none;stroke:var(--hake-700);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.price-tx{display:flex;flex-direction:column;min-width:0}
.price .eyebrow{margin-bottom:var(--space-1)}
.price-desc{margin-top:var(--space-2);font-size:14px;color:var(--ink-muted)}
.price-go{display:flex;align-items:center;gap:var(--space-3);font-size:13px;font-weight:500;letter-spacing:.08em;white-space:nowrap}
.price-link:hover .hk-arrow{transform:translateX(3px)}
@media (max-width:720px){.price-link{grid-template-columns:auto minmax(0,1fr)}.price-go{grid-column:1/-1;justify-content:space-between;padding-top:var(--space-3);border-top:1px solid var(--line)}}

/* ---------- パートナー様への帯:コンテンツ幅いっぱい。淡い緑の地 ---------- */
.partner{position:relative;overflow:hidden;margin-top:var(--space-4);display:flex;justify-content:space-between;align-items:center;gap:var(--space-5) var(--space-7);flex-wrap:wrap;
  padding:clamp(40px,5vw,80px) clamp(24px,5vw,80px);background:var(--surface-tint);border-radius:var(--radius-lg)}
.partner > div{position:relative;min-width:0;flex:1 1 420px}
.partner .eyebrow{margin-bottom:var(--space-3)}
.partner .lead-s{display:block;font-size:15px;letter-spacing:.06em;color:var(--hake-700);font-weight:500;margin-bottom:var(--space-2)}
.partner p{margin:var(--space-3) 0 0;color:var(--ink-muted)}
.partner .hk-btn{position:relative}
@media (max-width:560px){.partner{padding:var(--space-6) var(--space-4)}}

/* ---------- お問い合わせ帯 ---------- */
.contact{position:relative;text-align:center;padding-block:var(--space-10) var(--space-7);overflow:hidden}
.contact .contour{margin-top:var(--space-8)}
.contact-big{margin:0;font-family:var(--font-en);font-size:72px;line-height:1.1;font-weight:400;letter-spacing:.06em}
.contact hr{width:240px;max-width:60%;height:1px;border:0;background:var(--accent);margin:var(--space-3) auto 0}
.contact .body-lg{margin-top:var(--space-5)}
.contact .hk-btn{margin-top:var(--space-6)}
@media (max-width:720px){.contact{padding-block:var(--space-8) var(--space-6)}.contact-big{font-size:44px}.contact .contour{margin-top:var(--space-6)}}

/* ---------- フッター:濃い緑・上端を大きく丸める ---------- */
.site-foot{background:var(--surface-deep);color:var(--on-deep);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding-block:var(--space-7) calc(var(--space-5) + env(safe-area-inset-bottom,0px))}
.foot-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:var(--space-6)}
.foot-grid > *{min-width:0}
.foot-logo{font-family:var(--font-en);font-size:20px;line-height:1;letter-spacing:.28em}
.foot-addr{margin:var(--space-4) 0 0;font-size:13px;line-height:1.8;color:var(--on-deep-muted)}
.foot-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3) var(--space-4);font-size:13px;font-weight:500;letter-spacing:.08em}
.foot-nav a{text-decoration:none}
.foot-nav a:hover{text-decoration:underline;text-underline-offset:4px}
.copy{grid-column:1/-1;margin:0;padding-top:var(--space-4);border-top:1px solid var(--on-deep-line);font-family:var(--font-en);font-size:12px;letter-spacing:.08em;color:var(--on-deep-muted)}
@media (max-width:720px){.site-foot{border-radius:var(--radius-lg) var(--radius-lg) 0 0}.foot-grid{grid-template-columns:1fr}.foot-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 動画のライトボックス ---------- */
dialog.lb{border:0;padding:0;background:transparent;width:min(1100px,calc(100vw - 32px));max-width:none;overflow:visible;color:var(--on-deep)}
dialog.lb::backdrop{background:rgba(35,54,43,.92)}
dialog.lb[open]{animation:lbIn .25s ease-out}
@keyframes lbIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.lb-frame{aspect-ratio:16/9;width:100%;max-width:100%;background:var(--hake-900);border-radius:var(--radius-md);overflow:hidden}
.lb-frame iframe{width:100%;height:100%;border:0;display:block}
.lb-bar{display:flex;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-3);font-size:13px;flex-wrap:wrap}
.lb-bar a{color:var(--on-deep-muted);font-size:12px}
.lb-close{position:absolute;top:-52px;right:0;width:40px;height:40px;border-radius:var(--radius-pill);border:1px solid var(--on-deep);background:transparent;color:var(--on-deep);font-size:16px;cursor:pointer}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* =====================================================================
   下層ページ共通(パンくず・ページの見出し・仮の画像)
   ===================================================================== */
.crumb{margin-top:var(--space-6)}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-1) 0;font-size:13px;line-height:1.6;letter-spacing:.06em;color:var(--ink-muted)}
.crumb li + li::before{content:"";display:inline-block;width:6px;height:6px;margin:0 var(--space-3) 2px var(--space-3);border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.crumb a{text-decoration:none;color:var(--ink)}
.crumb a:hover{color:var(--hake-700);text-decoration:underline;text-underline-offset:3px}
.display{font-size:40px;line-height:1.6;font-weight:500;letter-spacing:.08em;margin:0}
@media (max-width:720px){.display{font-size:26px}}
.pg-head{padding-block:var(--space-8) var(--space-7);align-items:end}
.pg-lead{line-height:2.3}
@media (max-width:880px){.pg-head{padding-block:var(--space-7) var(--space-6)}}
/* 仮の画像(本人が用意したら <img> に差し替える) */
.ph-img,.pg-img,.sv-img{position:relative;display:block;width:100%;max-width:100%;overflow:hidden;background:var(--hake-100)}
.ph-img svg,.pg-img svg,.sv-img svg,.pg-img img,.sv-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph{position:absolute;left:var(--space-2);top:var(--space-2);padding:0 var(--space-2);border-radius:var(--radius-pill);background:var(--surface-raised);font-size:11px;line-height:1.8;color:var(--ink-muted);z-index:1}
.pg-img{aspect-ratio:21/8;border-radius:var(--radius-lg)}
@media (max-width:720px){.pg-img{aspect-ratio:4/3}}
.sec-lead{margin:0 0 var(--space-5);color:var(--ink-muted)}

/* =====================================================================
   できることのページ
   ===================================================================== */

/* 01〜03:左に画像、右に番号・見出し・説明・こんな映像に・実績ボタン */
.sv-list{border-top:1px solid var(--line)}
.sv{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-6) var(--space-7);align-items:start;padding-block:var(--space-8);border-bottom:1px solid var(--line);scroll-margin-top:96px}
.sv-img{aspect-ratio:4/3;border-radius:var(--radius-md)}
.sv-body{min-width:0}
.sv-body .en-sub{display:block;margin-bottom:var(--space-2)}
.sv-sub{margin:var(--space-1) 0 0;font-size:14px;letter-spacing:.06em;color:var(--hake-700)}
.sv-text{margin:var(--space-5) 0 0}
.sv-uses{margin-top:var(--space-5);padding:var(--space-4);background:var(--surface-sunken);border-radius:var(--radius-md)}
.sv-uses-h{margin:0 0 var(--space-2);font-size:13px;font-weight:500;letter-spacing:.08em}
.sv-uses ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-1) var(--space-5);font-size:14px;color:var(--ink-muted)}
.sv-uses li{position:relative;padding-left:var(--space-3)}
.sv-uses li::before{content:"";position:absolute;left:0;top:.95em;width:6px;height:1px;background:var(--hake-500)}
.sv-body .hk-btn{margin-top:var(--space-6)}
.cnt{margin-left:auto;margin-right:var(--space-1);font-family:var(--font-en);font-size:12px;color:var(--ink-muted)}
.hk-btn:hover .cnt{color:inherit}
@media (max-width:880px){.sv{grid-template-columns:1fr;padding-block:var(--space-7)}}
@media (max-width:560px){.sv-uses ul{grid-template-columns:1fr}}

/* 制作実績への導線(料金の導線パネルと同じ形) */
.works-panel{margin-top:var(--space-8)}

/* 費用の目安:5つの価格帯を罫線で区切った行で並べる(金額/内容)。制作実績へはつなげない */
.plans{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.plans li{display:grid;grid-template-columns:9em minmax(0,1fr);align-items:center;gap:var(--space-2) var(--space-5);padding:var(--space-4) 0;border-bottom:1px solid var(--line)}
.plans .h3{white-space:nowrap}
.plans p{margin:0;font-size:14px;line-height:1.9;color:var(--ink-muted)}
.plans a{display:flex;align-items:center;gap:var(--space-3);font-size:13px;font-weight:500;letter-spacing:.06em;text-decoration:none;white-space:nowrap}
.plans a .hk-arrow{width:24px;height:24px}
.plans a:hover .hk-arrow{transform:translateX(3px)}
.note{margin:var(--space-4) 0 0}
@media (max-width:720px){.plans li{grid-template-columns:1fr;row-gap:var(--space-2)}}

/* 制作の流れ:番号の丸を細い線でつなぐ */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-4)}
.flow li{position:relative;min-width:0;padding-top:var(--space-6)}
.fl-dot{position:absolute;left:0;top:0;width:14px;height:14px;border-radius:var(--radius-pill);border:1.5px solid var(--hake-700);background:var(--surface)}
.flow li:not(:last-child)::before{content:"";position:absolute;left:20px;right:calc(-1 * var(--space-4) + 6px);top:7px;height:1px;background:var(--line-strong)}
.flow .en-sub{display:block}
.flow .h3{margin:var(--space-1) 0 var(--space-2)}
.flow p{margin:0;font-size:14px;line-height:1.9;color:var(--ink-muted)}
@media (max-width:1100px){.flow{grid-template-columns:1fr;gap:0}
  .flow li{padding:0 0 var(--space-5) var(--space-6)}
  .fl-dot{top:6px}
  .flow li:not(:last-child)::before{left:6px;right:auto;top:24px;bottom:4px;width:1px;height:auto}}

/* よくある質問:罫線で区切った開閉リスト */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-3);align-items:center;padding:var(--space-4) 0;cursor:pointer;list-style:none;font-size:16px;font-weight:500;letter-spacing:.06em}
.faq summary::-webkit-details-marker{display:none}
.fq-q{font-family:var(--font-en);color:var(--hake-700);font-size:18px}
.fq-ic{position:relative;width:28px;height:28px;border-radius:var(--radius-pill);border:1px solid var(--ink)}
.fq-ic::before,.fq-ic::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1px;background:var(--ink);transform:translate(-50%,-50%)}
.fq-ic::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .2s}
.faq details[open] .fq-ic::after{transform:translate(-50%,-50%)}
.faq details p{margin:0;padding:0 var(--space-7) var(--space-5) calc(18px + var(--space-3));color:var(--ink-muted)}
@media (max-width:560px){.faq details p{padding-right:0}}

/* =====================================================================
   制作実績のページ
   ===================================================================== */
/* 絞り込み:罫線で区切った2行(見出し|ピル型のボタン) */
.wk-filter{border-top:1px solid var(--line)}
.frow{display:grid;grid-template-columns:9em minmax(0,1fr);gap:var(--space-2) var(--space-5);align-items:center;padding:var(--space-4) 0;border-bottom:1px solid var(--line)}
.fl{font-size:14px;font-weight:500;letter-spacing:.08em}
.chips{display:flex;gap:var(--space-2);flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface-raised);color:var(--ink);font:500 13px/1.8 var(--font-jp);letter-spacing:.06em;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.chip:hover{border-color:var(--hake-700)}
.chip .n{font-family:var(--font-en);font-size:11px;color:var(--ink-muted)}
.chip[aria-pressed="true"]{background:var(--hake-700);border-color:var(--hake-700);color:#fff}
.chip[aria-pressed="true"] .n{color:var(--hake-100)}
.chip:disabled{opacity:.4;cursor:default;border-color:var(--line)}
.wk-result{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);flex-wrap:wrap;margin:var(--space-5) 0 var(--space-6);font-size:13px;color:var(--ink-muted)}
.wk-result b{font-family:var(--font-en);font-weight:400;font-size:20px;color:var(--ink);margin-right:var(--space-1)}
.wk-clear{background:none;border:0;padding:0;font:inherit;color:var(--hake-700);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.wk-empty{margin:0;padding:var(--space-7) var(--space-4);text-align:center;color:var(--ink-muted);border:1px dashed var(--line-strong);border-radius:var(--radius-lg)}
@media (max-width:720px){.frow{grid-template-columns:1fr}}
/* 明るい地の上のカード(トップの濃い緑の章以外) */
.grid--light .card-t{color:var(--ink)}
.grid--light .card-c{color:var(--ink-muted)}
.grid--light .thumb .fb{color:var(--on-deep)}

/* =====================================================================
   私についてのページ
   ===================================================================== */
/* 大切にしている3つのこと:罫線で区切った行(番号|見出し・説明) */
.values{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.values li{display:grid;grid-template-columns:4em minmax(0,1fr);gap:var(--space-2) var(--space-5);padding:var(--space-5) 0;border-bottom:1px solid var(--line)}
.values .en-sub{padding-top:.2em}
.values p{margin:var(--space-2) 0 0;color:var(--ink-muted)}
@media (max-width:560px){.values li{grid-template-columns:1fr}}
/* プロフィール:写真(4:5)|名前・紹介文・項目 */
.profile{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-6) var(--space-7);align-items:start}
.portrait{aspect-ratio:4/5;border-radius:var(--radius-lg)}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.name{margin:0;display:flex;flex-direction:column;gap:var(--space-1)}
.name > span:first-child{font-size:24px;font-weight:500;letter-spacing:.12em;line-height:1.6}
.name .role{font-size:13px;letter-spacing:.06em;color:var(--hake-700)}
.bio{min-width:0}
.bio > p:not(.name){margin:var(--space-4) 0 0}
.spec{display:grid;grid-template-columns:7em minmax(0,1fr);margin:var(--space-6) 0 0;border-top:1px solid var(--line)}
.spec dt,.spec dd{margin:0;padding:var(--space-3) 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.9}
.spec dt{font-weight:500}
.spec dd{color:var(--ink-muted)}
.spec dd.tbd{color:var(--line-strong)}
@media (max-width:1100px){.profile{grid-template-columns:1fr}.portrait{max-width:360px}}
@media (max-width:560px){.spec{grid-template-columns:1fr}.spec dt{border-bottom:0;padding-bottom:0}.spec dd{padding-top:0}}
/* ほかのページへ:3つの導線パネル(料金の導線と同じ地) */
.links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-3)}
.links a{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-5) var(--space-5);background:var(--surface-sunken);border-radius:var(--radius-lg);text-decoration:none;transition:background .2s}
.links a:hover{background:var(--hake-100)}
.links a > span:first-child{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.lk-d{font-size:13px;line-height:1.7;color:var(--ink-muted)}
.links a:hover .hk-arrow{transform:translateX(3px)}
@media (max-width:880px){.links{grid-template-columns:1fr}}

/* =====================================================================
   パートナー様へのページ
   ===================================================================== */
.scope{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.scope > div{padding:var(--space-5);background:var(--surface-sunken);border-radius:var(--radius-md);min-width:0}
.scope ul{margin:var(--space-3) 0 0;padding:0;list-style:none;font-size:14px;line-height:1.9;color:var(--ink-muted)}
.scope li{position:relative;padding-left:var(--space-3)}
.scope li::before{content:"";position:absolute;left:0;top:.95em;width:6px;height:1px;background:var(--hake-500)}
@media (max-width:720px){.scope{grid-template-columns:1fr}}
.tbd-box{margin:0;padding:var(--space-6) var(--space-5);color:var(--ink-muted);border:1px dashed var(--line-strong);border-radius:var(--radius-lg)}
/* 事前にご相談いただきたいこと:罫線で区切った行(項目|内容) */
.ask{margin:0;border-top:1px solid var(--line)}
.ask > div{display:grid;grid-template-columns:12em minmax(0,1fr);gap:var(--space-1) var(--space-5);padding:var(--space-4) 0;border-bottom:1px solid var(--line)}
.ask dt{font-weight:500}
.ask dd{margin:0;font-size:14px;line-height:1.9;color:var(--ink-muted)}
@media (max-width:720px){.ask > div{grid-template-columns:1fr}}

/* =====================================================================
   お問い合わせのページ(お問い合わせ帯は置かない)
   ===================================================================== */
main.no-band{padding-bottom:var(--space-9)}
.ct{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--space-7);align-items:start}
.ct-form{display:grid;gap:var(--space-5)}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.field{display:grid;gap:var(--space-2);min-width:0}
.field > label,.flabel{display:flex;align-items:baseline;gap:var(--space-2);font-size:14px;font-weight:500;letter-spacing:.06em}
.req{font-size:11px;font-weight:500;line-height:1.6;padding:0 var(--space-2);border-radius:var(--radius-pill);background:var(--hake-100);color:var(--hake-700)}
.req.opt{background:transparent;color:var(--ink-muted);padding:0}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:15px;line-height:1.7;letter-spacing:.04em;padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-raised);color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--hake-700);box-shadow:0 0 0 1px var(--hake-700)}
.field [aria-invalid="true"]{border-color:var(--accent-ink)}
.field textarea{min-height:200px;resize:vertical}
.field ::placeholder{color:var(--line-strong)}
.chip-c{cursor:pointer}
.chip-c input{position:absolute;opacity:0;width:1px;height:1px}
.chip-c span{display:inline-block;padding:var(--space-1) var(--space-3);border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface-raised);font-size:13px;font-weight:500;line-height:1.8;letter-spacing:.06em;transition:background .2s,color .2s,border-color .2s}
.chip-c:hover span{border-color:var(--hake-700)}
.chip-c input:checked + span{background:var(--hake-700);border-color:var(--hake-700);color:#fff}
.chip-c input:focus-visible + span{outline:2px solid var(--focus);outline-offset:2px}
.ct-err{margin:0;font-size:13px;color:var(--accent-ink)}
.ct-done{margin:0;padding:var(--space-4);background:var(--surface-tint);border-radius:var(--radius-md);font-size:14px}
.ct-side{display:grid;gap:var(--space-5);padding:var(--space-5);background:var(--surface-sunken);border-radius:var(--radius-lg)}
.ct-side p,.ct-side ul{margin:var(--space-2) 0 0;font-size:14px;line-height:1.9;color:var(--ink-muted)}
.ct-side ul{padding:0;list-style:none}
.ct-side li{position:relative;padding-left:var(--space-3)}
.ct-side li::before{content:"";position:absolute;left:0;top:.95em;width:6px;height:1px;background:var(--hake-500)}
.ct-side a{color:var(--hake-700);margin-left:var(--space-1);text-underline-offset:3px}
@media (max-width:1100px){.ct{grid-template-columns:1fr;gap:var(--space-6)}}
@media (max-width:560px){.row2{grid-template-columns:1fr}}

/* 下層ページ:ページの見出しのすぐ後の章は、上の余白を詰める(見出しの下の余白と二重にしない) */
.pg-head + .sec{padding-top:var(--space-6)}
/* 長いページ名(パートナー様へなど)は、行の長さをそろえて折り返す */
.display{text-wrap:balance;line-break:strict}

/* 映像の種類(できること):「〜を伝えたい」→ 映像の種類 を罫線で区切った行で並べる。実績のある行は制作実績へ */
.types{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.types li{border-bottom:1px solid var(--line)}
.ty{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr) 9em;align-items:center;gap:var(--space-2) var(--space-4);padding:var(--space-4) var(--space-3);text-decoration:none;border-radius:var(--radius-md);transition:background .2s}
a.ty[href]:hover{background:var(--surface-raised)}
.ty-wish{font-size:14px;line-height:1.9;color:var(--ink-muted)}
.ty-to{position:relative;height:1px;background:var(--line-strong)}
.ty-to::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid var(--line-strong);border-right:1px solid var(--line-strong);transform:rotate(45deg)}
.ty-name{font-size:17px;font-weight:500;letter-spacing:.06em;line-height:1.7}
.ty-go{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);font-family:var(--font-en);font-size:12px;letter-spacing:.06em;color:var(--ink-muted);white-space:nowrap}
.ty-go .hk-arrow{width:24px;height:24px}
a.ty[href]:hover .hk-arrow{transform:translateX(3px)}
.ty--none{cursor:default}
@media (max-width:1100px){.ty{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--space-1)}.ty-to{display:none}.ty-wish{grid-column:1/-1}.ty-name{grid-column:1}.ty-go{grid-column:2;grid-row:2}}
@media (max-width:560px){.ty{padding:var(--space-4) 0}}

/* つくり方(強み):01〜03の前の章見出し。見出しの下は 01〜03 の罫線まで詰める */
.how-head{padding-bottom:var(--space-6);align-items:end}
.how-lead{margin:0}
/* 01〜03 のひとこと:手法の役割を言い切る */
.sv-catch{margin:var(--space-2) 0 0;font-size:20px;font-weight:500;line-height:1.7;letter-spacing:.06em;color:var(--hake-700)}
.sv-catch + .sv-sub{margin-top:var(--space-2);color:var(--ink-muted)}
@media (max-width:720px){.sv-catch{font-size:17px}}
/* 見出しが長いので、左の列の幅に合わせて文字を少し小さくし、言葉の途中で折り返さない */
.how-head .h1{font-size:clamp(22px,2.1vw,32px);word-break:auto-phrase}
@media (max-width:880px){.how-head .h1{font-size:24px}}

/* 映像の種類の下:そのほかのご相談(実績を公開できない種類・これから手がける種類をまとめる) */
.ty-more{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4) var(--space-6);flex-wrap:wrap;margin-top:var(--space-5);padding:var(--space-5);background:var(--surface-sunken);border-radius:var(--radius-lg)}
.ty-more > div{flex:1 1 420px;min-width:0}
.ty-more-h{margin:0;font-size:17px;font-weight:500;letter-spacing:.06em}
.ty-more-x{margin:var(--space-1) 0 0;font-size:14px;line-height:1.9;color:var(--ink-muted)}
.ty-more-l{list-style:none;margin:var(--space-3) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.ty-more-l li{padding:2px var(--space-3);border-radius:var(--radius-pill);background:var(--surface-raised);font-size:13px;font-weight:500;letter-spacing:.06em;line-height:1.8}
.ty-name,.ty-wish{word-break:auto-phrase}
.frow[hidden]{display:none}

/* お問い合わせページ:お問い合わせ帯の代わりに、等高線だけをフッターの上に置く */
main.no-band{padding-bottom:0}
.ct-contour{padding:var(--space-9) 0 var(--space-7)}
@media (max-width:720px){.ct-contour{padding:var(--space-8) 0 var(--space-6)}}

/* フッター:リンクを1行に(2026-11-06 本人の指示)。ロゴの右に6つを横一列。狭い画面では折り返す */
.foot-grid{grid-template-columns:auto minmax(0,1fr);align-items:start}
.foot-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2) var(--space-5);padding-top:var(--space-1)}
.foot-nav a{white-space:nowrap}
@media (max-width:1100px){.foot-grid{grid-template-columns:1fr}.foot-nav{justify-content:flex-start}}
@media (max-width:720px){.foot-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 等高線をフッターに近づける(帯の下の余白 64px → 16px) */
.contact{padding-bottom:var(--space-3)}
.ct-contour{padding-bottom:var(--space-3)}
@media (max-width:720px){.contact{padding-bottom:var(--space-2)}.ct-contour{padding-bottom:var(--space-2)}}

/* =====================================================================
   費用の目安(2026-11-06 試作 → 2026-11-09 本採用):価格帯ごとに、使い方の例を並べる。左の金額の列は 12em
   ===================================================================== */
.ptiers{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.pt{display:grid;grid-template-columns:minmax(0,12em) minmax(0,1fr);gap:var(--space-3) var(--space-5);padding:var(--space-6) 0;border-bottom:1px solid var(--line)}
.pt-price{margin:0;font-family:var(--font-en);font-size:28px;font-weight:400;letter-spacing:.04em;line-height:1.4;color:var(--hake-700)}
.pt-desc{margin:var(--space-2) 0 0;font-size:14px;line-height:1.9;color:var(--ink-muted)}
.pt-ex{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.pt-ex li{padding:var(--space-4);background:var(--surface-raised);border-radius:var(--radius-md)}
.pe-name{margin:0;font-size:16px;font-weight:500;letter-spacing:.06em}
.pe-meta{margin:var(--space-1) 0 0;font-size:12px;letter-spacing:.06em;color:var(--hake-700)}
.pe-text{margin:var(--space-2) 0 0;font-size:14px;line-height:1.9;color:var(--ink-muted)}
.pinfo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-6)}
.pbox{padding:var(--space-5);background:var(--surface-sunken);border-radius:var(--radius-lg);min-width:0}
.pbox-h{margin:0 0 var(--space-3);font-size:16px;font-weight:500;letter-spacing:.06em}
.pbox ul{list-style:none;margin:0;padding:0;font-size:14px;line-height:1.9}
.pchk li{position:relative;padding-left:var(--space-5)}
.pchk li::before{content:"";position:absolute;left:2px;top:.55em;width:10px;height:6px;border-left:1.5px solid var(--hake-700);border-bottom:1.5px solid var(--hake-700);transform:rotate(-45deg)}
.pvar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.pvar-h{margin:0 0 var(--space-2);font-size:13px;font-weight:500;letter-spacing:.08em}
.pvar-h::before{display:inline-block;margin-right:var(--space-1)}
.pvar-h.up::before{content:"↑";color:var(--accent-ink)}
.pvar-h.down::before{content:"↓";color:var(--hake-700)}
.pvar li{color:var(--ink-muted);padding:var(--space-1) 0;border-bottom:1px solid var(--line)}
@media (max-width:1100px){.pt{grid-template-columns:1fr}.pinfo{grid-template-columns:1fr}}
@media (max-width:560px){.pvar{grid-template-columns:1fr}.pt-price{font-size:24px}}

/* 費用の目安(本採用 2026-11-09):空の補足・説明は表示しない */
.pe-meta:empty,.pe-text:empty{display:none}

/* 費用の目安:金額の前に置く「目安です」の囲み。注記より目立たせる(左に金色の線・淡い緑の地) */
.pcall{display:flex;gap:var(--space-3);align-items:flex-start;margin:0 0 var(--space-6);padding:var(--space-4) var(--space-5);background:var(--surface-tint);border-left:3px solid var(--accent);border-radius:0 var(--radius-md) var(--radius-md) 0}
.pcall-ic{flex:none;width:22px;height:22px;margin-top:3px;fill:none;stroke:var(--accent-ink);stroke-width:1.6;stroke-linecap:round}
.pcall-h{margin:0;font-size:16px;font-weight:500;letter-spacing:.06em}
.pcall-x{margin:var(--space-1) 0 0;font-size:14px;line-height:1.9;color:var(--ink-muted)}
/* 「目安です」の囲みは、すべてに含まれるもの・費用が変わるポイントの下(2026-11-09) */
.pinfo + .pcall{margin:var(--space-5) 0 0}

/* 費用の目安:映像の例の箱にアイコンを付けられる(左に淡い緑の丸+線のアイコン) */
.pt-ex li[data-icon]{position:relative;padding-left:calc(var(--space-4) + 44px + var(--space-3))}
.pe-ic{position:absolute;left:var(--space-4);top:var(--space-4);width:44px;height:44px;border-radius:var(--radius-pill);background:var(--surface-tint);display:grid;place-items:center}
.pe-ic svg{width:22px;height:22px;fill:none;stroke:var(--hake-700);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* 左の金額と右の例の間をさらに詰める(12em・32px → 10.5em・24px) */
.pt{grid-template-columns:minmax(0,10.5em) minmax(0,1fr);gap:var(--space-3) var(--space-4)}
@media (max-width:1100px){.pt{grid-template-columns:1fr}}
@media (max-width:560px){.pt-ex li[data-icon]{padding-left:var(--space-4);padding-top:calc(var(--space-4) + 44px + var(--space-2))}}
/* 2026-11-09:費用の目安の左右の間は 32px に戻す。見出しの列(左)と中身(右)の間を全ページで詰める:1:2・64px → 3:7・48px */
.pt{gap:var(--space-3) var(--space-5)}
.split{grid-template-columns:minmax(0,3fr) minmax(0,7fr);gap:var(--space-6)}
.how-head .h1{font-size:clamp(20px,1.85vw,30px)}
@media (max-width:880px){.split{grid-template-columns:1fr;gap:var(--space-5)}.how-head .h1{font-size:24px}}

/* 映像の種類の行にもアイコン(費用の目安の例と同じ形):願い → 矢印 → アイコン+種類 → 件数 */
.ty{grid-template-columns:minmax(0,1fr) 40px 44px minmax(0,1fr) 9em}
.ty-ic{width:44px;height:44px;border-radius:var(--radius-pill);background:var(--surface-tint);display:grid;place-items:center}
.ty-ic svg{width:22px;height:22px;fill:none;stroke:var(--hake-700);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1100px){.ty{grid-template-columns:44px minmax(0,1fr) auto}.ty-wish{grid-column:1/-1}.ty-ic{grid-column:1;grid-row:2}.ty-name{grid-column:2;grid-row:2}.ty-go{grid-column:3;grid-row:2}}
/* 種類の名前は言葉の途中で折り返さない(「・」のところで折り返す)。名前の列を広く、件数の列は中身の幅に */
.ty{grid-template-columns:minmax(0,1fr) 40px 44px minmax(0,1.25fr) auto}
.ty-name{word-break:keep-all;overflow-wrap:anywhere}
@media (max-width:1100px){.ty{grid-template-columns:44px minmax(0,1fr) auto;column-gap:var(--space-3)}}
@media (max-width:560px){.ty-name{font-size:16px}.ty-go{gap:var(--space-2)}}