/* ============================================================
   ツムギフィルムズ — 固定ページ共通CSS（sample36）
   トークンは index.html の設計システムと同一。
   ============================================================ */
:root{
  --noir:#10131A; --noir2:#161B26; --noir3:#0B0D12;
  --paper:#F0EBE0; --paper2:#E9E2D2; --card:#FAF7EF;
  --ivory:#EAE3D2; --amber:#C9913F; --amber2:#E0B05C;
  --teal:#3E7480; --teal-deep:#24434E;
  --ink:#20242E; --body:#474B55; --muted:#848072;
  --line:rgba(32,36,46,.15); --line-soft:rgba(32,36,46,.07); --line-w:rgba(234,227,210,.16);
  --hdh:64px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; color:var(--body); font-family:"Zen Kaku Gothic New",sans-serif; line-height:1.95; font-size:16px;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; background:var(--paper);}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
p{margin:0 0 1em;}
.mono{font-family:"Space Grotesk",monospace; letter-spacing:.06em;}
h1,h2,h3{margin:0; color:var(--ink); font-family:"Shippori Mincho",serif; font-weight:700; line-height:1.55;}
h1,h2,h3,.lead,.btn,summary{word-break:auto-phrase; text-wrap:balance;}
.wrap{width:min(1020px,calc(100% - 56px)); margin:0 auto;}
.eyebrow{font-family:"Space Grotesk",monospace; font-size:11.5px; letter-spacing:.3em; color:var(--teal); text-transform:uppercase; display:inline-flex; align-items:center; gap:12px;}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--teal);}
.divider-film{height:14px; background-image:radial-gradient(rgba(32,36,46,.28) 2.4px,transparent 2.6px); background-size:26px 14px; background-position:center; opacity:.5; width:min(1020px,calc(100% - 56px)); margin:0 auto;}
@media(max-width:768px){ .wrap{width:calc(100% - 40px);} :root{--hdh:58px;} }

/* ===== header（index と同一の設計） ===== */
.c-hd{position:sticky; top:0; z-index:80; background:rgba(16,19,26,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-w);}
.c-hd__in{max-width:1280px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 22px; height:var(--hdh);}
.c-hd__logo{display:flex; align-items:center; flex:none;}
.c-hd__logo img{height:38px; width:auto;}
.c-hd__nav{display:flex; gap:2px;}
.c-hd__nav a{color:rgba(234,227,210,.62); font-size:13px; font-weight:700; white-space:nowrap; padding:7px 13px; border-radius:999px; display:inline-flex; align-items:baseline; gap:7px; transition:color .25s,background .25s;}
.c-hd__nav a .no{font-family:"Space Grotesk",monospace; font-size:9.5px; letter-spacing:.14em; color:var(--amber);}
.c-hd__nav a[aria-current="page"]{color:var(--noir); background:var(--amber2);}
.c-hd__nav a[aria-current="page"] .no{color:var(--noir);}
.c-hd__nav a:not([aria-current="page"]):hover{color:var(--ivory); background:rgba(234,227,210,.1);}
.c-hd__cta{flex:none; font-size:12.5px; font-weight:700; color:var(--noir); background:var(--ivory); padding:9px 18px; border-radius:999px; transition:background .25s;}
.c-hd__cta:hover{background:var(--amber2);}
.c-hd__prog{position:relative; height:3px; background:rgba(234,227,210,.12);}
.c-hd__bar{position:absolute; left:0; top:0; height:100%; width:0; background:linear-gradient(90deg,var(--amber),var(--teal));}
.c-hd__burger{display:flex; flex-direction:column; justify-content:center; gap:6px; background:none; border:0; cursor:pointer; padding:10px 6px; flex:none;}
.c-hd__burger i{display:block; width:28px; height:2px; background:var(--ivory); transition:.32s; border-radius:2px;}
.is-menu-open .c-hd__burger i:nth-child(1){transform:translateY(8px) rotate(45deg);}
.is-menu-open .c-hd__burger i:nth-child(2){opacity:0;}
.is-menu-open .c-hd__burger i:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
@media(max-width:1080px){ .c-hd__nav a span.tx{display:none;} .c-hd__nav a{padding:7px 9px;} }
@media(max-width:760px){ .c-hd__nav{display:none;} .c-hd__cta{display:none;} .c-hd__logo img{height:32px;} }

/* ===== overlay menu（hb-01） ===== */
body.is-locked{overflow:hidden;}
.c-menu{position:fixed; inset:0; z-index:70; pointer-events:none; visibility:hidden;}
.c-menu.is-open{pointer-events:auto; visibility:visible;}
.c-menu__slab{position:absolute; top:0; bottom:0; left:-20%; width:140%; transform:translateX(112%) skewX(-10deg); transition:transform .6s cubic-bezier(.7,0,.2,1);}
.c-menu__slab.s1{background:var(--teal-deep);} .c-menu__slab.s2{background:var(--noir2);} .c-menu__slab.s3{background:var(--noir3);}
.c-menu.is-open .s1{transform:translateX(0) skewX(-10deg); transition-delay:0s;}
.c-menu.is-open .s2{transform:translateX(0) skewX(-10deg); transition-delay:.08s;}
.c-menu.is-open .s3{transform:translateX(0) skewX(-10deg); transition-delay:.16s;}
.c-menu__bar{position:absolute; top:0; bottom:0; left:63%; width:7px; background:var(--amber); transform:skewX(-10deg); opacity:0; transition:opacity .4s .42s;}
.c-menu.is-open .c-menu__bar{opacity:1;}
.c-menu__content{position:absolute; inset:0; display:grid; grid-template-columns:1.25fr .75fr; color:var(--ivory); opacity:0; transition:opacity .3s .38s;}
.c-menu.is-open .c-menu__content{opacity:1;}
.c-menu__nav{padding:14vh 8vw; display:flex; flex-direction:column; justify-content:center; gap:2px;}
.c-menu__lbl{font-family:"Space Grotesk",monospace; font-size:11px; letter-spacing:.32em; color:var(--amber2); margin-bottom:22px;}
.c-menu__nav a{font-family:"Shippori Mincho",serif; font-weight:700; font-size:clamp(26px,4.8vw,52px); color:var(--ivory); line-height:1.5; display:flex; align-items:baseline; gap:18px; transition:color .2s,padding .25s;}
.c-menu__nav a .no{font-family:"Space Grotesk",monospace; font-size:12px; color:var(--amber2);}
.c-menu__nav a:hover{color:var(--amber2); padding-left:12px;}
.c-menu__side{border-left:1px solid var(--line-w); padding:14vh 4vw; display:flex; flex-direction:column; justify-content:center; gap:22px;}
.c-menu__it .l{font-family:"Space Grotesk",monospace; font-size:10px; letter-spacing:.18em; color:var(--amber2);}
.c-menu__it .v{font-size:14.5px; margin-top:4px; line-height:1.8;}
.c-menu__tel{font-family:"Space Grotesk",monospace; font-weight:700; font-size:21px; color:var(--ivory);}
@media(max-width:820px){ .c-menu__content{grid-template-columns:1fr;} .c-menu__side{display:none;} }
@media(prefers-reduced-motion:reduce){ .c-menu__slab{transition:none;} .c-menu__content{transition:none;} }

/* ===== page hero（タイトル帯・レターボックス風） ===== */
.page-hero{background:
  linear-gradient(90deg,rgba(11,13,18,.92) 0%,rgba(16,19,26,.76) 48%,rgba(16,19,26,.34) 100%),
  linear-gradient(180deg,rgba(11,13,18,.1),rgba(11,13,18,.72)),
  var(--hero-img, url('../../src/still-wide.jpg')) center/cover no-repeat,
  var(--noir3); color:var(--ivory); position:relative; padding:84px 0 70px; overflow:hidden;}
.page-hero::before,.page-hero::after{content:""; position:absolute; left:0; width:100%; height:12px; background:#000;}
.page-hero::before{top:0;} .page-hero::after{bottom:0;}
.page-hero .wrap{position:relative; z-index:1;}
.page-hero .en{font-family:"Space Grotesk",monospace; font-size:11px; letter-spacing:.5em; color:var(--amber2); text-transform:uppercase; display:block; margin-bottom:16px;}
.page-hero h1{color:var(--ivory); font-size:clamp(28px,4.6vw,46px); font-weight:600; letter-spacing:.1em;}
.page-hero .lead{color:rgba(234,227,210,.78); font-size:14.5px; margin:14px 0 0; text-shadow:0 1px 18px rgba(0,0,0,.32);}
@media(max-width:768px){ .page-hero{padding:58px 0 48px;} }

/* ===== page sections ===== */
.page-section{padding:84px 0;}
.page-section.alt{background:var(--paper2);}
.page-section.dark{background:var(--noir2); color:rgba(234,227,210,.82);}
.page-section.dark h2,.page-section.dark h3{color:var(--ivory);}
.page-section h2{font-size:clamp(23px,3.2vw,34px); margin-bottom:26px;}
.page-section h3{font-size:clamp(18px,2.2vw,22px); margin:34px 0 12px;}
.page-section .eyebrow{margin-bottom:6px;}
@media(max-width:768px){ .page-section{padding:56px 0;} }

/* ===== parts ===== */
.btn{display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:#fff; font-size:14.5px; font-weight:700; padding:14px 30px; border-radius:99px; transition:background .25s;}
.btn:hover{background:var(--teal);}
.btn.ghost{background:transparent; border:1px solid var(--ink); color:var(--ink);}
.btn.ghost:hover{background:var(--ink); color:#fff;}
.note-sm{font-size:12.5px; color:var(--muted);}
.ph-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:26px 0;}
.ph-grid img{width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:8px;}
@media(max-width:680px){ .ph-grid{grid-template-columns:1fr;} }
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;}
.two-col img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px;}
@media(max-width:760px){ .two-col{grid-template-columns:1fr;} }

/* blog */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.post-card{display:flex; flex-direction:column; min-height:100%; padding:24px; border:1px solid var(--line); border-radius:10px; background:var(--card); transition:transform .25s,box-shadow .25s,border-color .25s;}
.post-card:hover{transform:translateY(-4px); border-color:rgba(62,116,128,.45); box-shadow:0 24px 44px -32px rgba(16,19,26,.55);}
.post-card .meta,.post-meta{display:flex; flex-wrap:wrap; gap:12px; align-items:center; font-family:"Space Grotesk",monospace; font-size:10.5px; letter-spacing:.16em; color:var(--muted); text-transform:uppercase;}
.post-card h2{font-size:clamp(18px,2.3vw,24px); line-height:1.65; margin:14px 0 10px;}
.post-card p{font-size:14px; color:var(--body);}
.post-card .read{margin-top:auto; padding-top:18px; font-family:"Space Grotesk",monospace; font-size:11px; letter-spacing:.22em; color:var(--teal); font-weight:700;}
.post-tag{display:inline-flex; align-items:center; gap:7px; color:var(--teal); font-weight:700;}
.post-tag::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--amber);}
.post-article{padding:78px 0; background:var(--paper);}
.post-article__in{width:min(760px,calc(100% - 56px)); margin:0 auto;}
.post-lead{font-family:"Shippori Mincho",serif; font-size:clamp(18px,2.5vw,23px); line-height:1.9; color:var(--ink); margin:18px 0 34px;}
.post-article h2{font-size:clamp(22px,3vw,30px); margin:46px 0 16px;}
.post-article p{font-size:15.5px;}
.post-article ol,.post-article ul{padding-left:1.4em;}
.post-nav{display:flex; justify-content:space-between; gap:20px; margin-top:54px; padding-top:24px; border-top:1px solid var(--line);}
.post-nav a{font-weight:700; color:var(--teal);}
.post-nav a:hover{color:var(--amber);}
@media(max-width:880px){ .blog-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:620px){ .blog-grid{grid-template-columns:1fr;} .post-nav{flex-direction:column;} }

/* 罫線インデックス（料金表・概要表） */
.idx-table{width:100%; border-collapse:collapse; border-top:2px solid var(--ink); margin:10px 0 6px;}
.idx-table th,.idx-table td{padding:16px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; font-size:14.5px;}
.idx-table th{font-family:"Shippori Mincho",serif; color:var(--ink); white-space:nowrap; width:34%; font-weight:700;}
.idx-table td .pr{font-family:"Space Grotesk",monospace; font-weight:700; color:var(--ink); font-size:17px;}
.idx-table td small{color:var(--muted); display:block;}

/* FAQ（details/summary） */
.faq-list{border-top:1px solid var(--line);}
.faq-list details{border-bottom:1px solid var(--line);}
.faq-list summary{cursor:pointer; list-style:none; display:grid; grid-template-columns:46px 1fr 24px; gap:14px; align-items:center; padding:22px 4px; font-weight:700; color:var(--ink); font-size:15.5px;}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary .no{font-family:"Space Grotesk",monospace; font-size:13px; color:var(--teal); font-weight:700;}
.faq-list summary .ic{position:relative; width:16px; height:16px; justify-self:end;}
.faq-list summary .ic::before,.faq-list summary .ic::after{content:""; position:absolute; background:var(--teal); transition:.3s;}
.faq-list summary .ic::before{top:7px; left:0; width:16px; height:2px;}
.faq-list summary .ic::after{top:0; left:7px; width:2px; height:16px;}
.faq-list details[open] summary .ic::after{transform:rotate(90deg); opacity:0;}
.faq-list .a{padding:0 4px 24px 60px; color:var(--body); font-size:14.5px;}
@media(max-width:680px){ .faq-list .a{padding-left:4px;} }

/* form */
.form-grid{display:grid; gap:18px; max-width:640px;}
.form-grid label{display:block; font-weight:700; color:var(--ink); font-size:14px; margin-bottom:6px;}
.form-grid label small{font-weight:500; color:var(--muted); margin-left:8px; font-size:11.5px;}
.form-grid input,.form-grid select,.form-grid textarea{width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:8px; background:#fff; font:inherit; font-size:15px; color:var(--ink);}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{outline:2px solid var(--teal); border-color:var(--teal);}
.zoroya-form-slot{border:1.5px dashed var(--teal); border-radius:10px; padding:22px 24px; background:rgba(62,116,128,.05); font-size:13.5px; color:var(--body);}

/* footer（index と同一の設計） */
.c-ft{background:var(--noir3); color:var(--ivory); overflow:hidden; border-top:1px solid var(--line-w);}
.c-ft__mq{display:block; color:var(--ivory); padding:62px 0 56px; position:relative; border-bottom:1px solid var(--line-w);}
.c-ft__hint{position:absolute; top:26px; left:50%; transform:translateX(-50%); font-family:"Space Grotesk",monospace; font-size:10px; letter-spacing:.34em; color:var(--amber2); white-space:nowrap;}
.c-ft__track{display:flex; width:max-content; animation:c-ft-run 17s linear infinite;}
.c-ft__mq:hover .c-ft__track{animation-play-state:paused;}
.c-ft__track>span{display:flex; align-items:center; gap:34px; padding-right:34px; white-space:nowrap;
  font-family:"Space Grotesk",monospace; font-weight:700; font-size:clamp(64px,10.5vw,124px); letter-spacing:.01em; line-height:1;}
.c-ft__dot{width:22px; height:22px; border-radius:50%; background:var(--amber); flex:none;}
.c-ft__ol{color:transparent; -webkit-text-stroke:1.5px var(--ivory);}
.c-ft__mq:hover .c-ft__ol{color:var(--amber2); -webkit-text-stroke:1.5px var(--amber2);}
.c-ft__sub{display:block; text-align:center; margin-top:32px; font-size:13.5px; color:rgba(234,227,210,.55);}
.c-ft__sub b{color:var(--ivory); border-bottom:1.5px solid var(--amber); padding-bottom:2px; margin:0 6px; font-weight:700;}
@keyframes c-ft-run{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.c-ft__low{max-width:1240px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 28px 30px; flex-wrap:wrap;}
.c-ft__lg img{height:34px; width:auto;}
.c-ft__nav{display:flex; gap:22px; flex-wrap:wrap;}
.c-ft__nav a{color:rgba(234,227,210,.55); font-size:12px; transition:color .25s;}
.c-ft__nav a:hover{color:var(--ivory);}
.c-ft__cp{font-family:"Space Grotesk",monospace; font-size:10px; letter-spacing:.14em; color:rgba(234,227,210,.45);}
@media(prefers-reduced-motion:reduce){ .c-ft__track{animation:none;} }