/* おみせワークス — site.css（2026-09-17 作り直し版）
設計: 紙色の地 × 墨 × 朱橙1色。和文は Zen Kaku Gothic New、数字と英字の見出しは Instrument Serif。
組版: 1文1行・文節折り返し・禁則は web-typesetting-ja の印（
/ / .nb）で担保する。 */
:root{
--paper:#F5F2EC;
--paper-2:#ECE8DF;
--paper-3:#E2DDD1;
--ink:#17171A;
--ink-2:#45454B;
--mute:#66666C;
--line:#D8D3C8;
--line-2:#B4AEA1;
--accent:#E4501F;
--accent-deep:#C2401A;
--accent-soft:#FBE6DD;
--dark:#17171A;
--dark-2:#222226;
--on-dark:#F5F2EC;
--on-dark-2:#B7B4AC;
--line-dark:#34343B;
--font-ja:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","BIZ UDPGothic","Yu Gothic",Meiryo,sans-serif;
--font-serif:"Instrument Serif","Times New Roman",Georgia,serif;
--ease:cubic-bezier(.22,1,.36,1);
--gutter:20px;
--max:1120px;
--hh:64px;
--r:6px;
--r-lg:12px;
}
@media (min-width:768px){
:root{ --gutter:40px; --hh:76px; }
}
/* ---------- 土台 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:var(--font-ja);
font-size:16px;
line-height:1.85;
letter-spacing:.02em;
font-feature-settings:"palt" 0;
-webkit-font-smoothing:antialiased;
}
:lang(ja){ word-break:keep-all; overflow-wrap:normal; line-break:strict; }
.nb{ white-space:nowrap; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; height:auto; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-weight:700; line-height:1.4; letter-spacing:.015em; font-feature-settings:"palt" 1; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--accent); color:#fff; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:2px; }
.dark :focus-visible{ outline-color:var(--on-dark); }
.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
[lang="en"]{ font-feature-settings:"palt" 0; }
/* ---------- 文字の段 ---------- */
.serif{ font-family:var(--font-serif); font-weight:400; letter-spacing:0; }
.kicker{
display:flex; align-items:baseline; gap:12px;
font-family:var(--font-serif); font-style:italic; font-size:20px; line-height:1; color:var(--accent);
margin-bottom:18px;
}
.kicker__n{ font-style:normal; font-size:15px; letter-spacing:.06em; color:var(--mute); }
.kicker::after{ content:""; flex:0 0 40px; height:1px; background:var(--line-2); transform:translateY(-5px); }
.h1{ font-size:34px; line-height:1.35; }
.h2{ font-size:28px; line-height:1.35; }
.h3{ font-size:19px; line-height:1.5; }
.lead{ font-size:17px; line-height:1.9; color:var(--ink-2); }
.small{ font-size:14px; line-height:1.75; color:var(--ink-2); }
.note{ font-size:13px; line-height:1.7; color:var(--mute); }
@media (min-width:768px){
.h1{ font-size:50px; line-height:1.3; }
.h2{ font-size:38px; line-height:1.3; }
.h3{ font-size:21px; }
.lead{ font-size:18px; }
}
/* ---------- 確認中の差し込み ---------- */
mark.tbd{
background:#FFF2B3; color:var(--ink); padding:0 .3em; border-radius:3px;
box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
mark.tbd--note{ font-size:12px; padding:.05em .45em; margin-left:.35em; background:var(--accent-soft); color:var(--accent-deep); vertical-align:.1em; }
/* ---------- ボタン ---------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
min-height:52px; padding:0 22px; border-radius:999px;
font-weight:700; font-size:15px; letter-spacing:.03em; line-height:1.3; white-space:nowrap;
transition:transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn--primary{ background:var(--accent); color:#fff; box-shadow:0 8px 20px -10px rgba(228,80,31,.7); }
.btn--primary:hover{ background:var(--accent-deep); transform:translateY(-2px); }
.btn--ink{ background:var(--ink); color:var(--on-dark); }
.btn--ink:hover{ background:#000; transform:translateY(-2px); }
.btn--ghost{ border:1px solid var(--line-2); color:var(--ink); background:transparent; }
.btn--ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.dark .btn--ghost{ border-color:var(--line-dark); color:var(--on-dark); }
.dark .btn--ghost:hover{ border-color:var(--on-dark); }
.btn__arw{ font-family:var(--font-serif); font-size:20px; line-height:1; transform:translateY(-1px); transition:transform .3s var(--ease); }
.btn:hover .btn__arw{ transform:translate(4px,-1px); }
.btn--block{ width:100%; }
.textlink{
display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px;
border-bottom:1px solid var(--ink); padding-bottom:2px;
}
.textlink .btn__arw{ font-size:18px; }
.textlink:hover .btn__arw{ transform:translate(4px,-1px); }
/* ---------- ヘッダー ---------- */
.hd{
position:fixed; inset:0 0 auto 0; z-index:50; height:var(--hh);
display:flex; align-items:center;
transition:background-color .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s var(--ease);
}
.hd.is-scrolled{ background:rgba(245,242,236,.86); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); box-shadow:0 1px 0 var(--line); }
.hd__in{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.logo{ display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:18px; letter-spacing:.04em; line-height:1; font-feature-settings:"palt" 1; }
.logo__mark{
display:grid; place-items:center; width:30px; height:30px; border-radius:7px;
background:var(--accent); color:#fff; font-size:16px; font-weight:700; line-height:1;
transform:rotate(-6deg); transition:transform .4s var(--ease);
}
.logo:hover .logo__mark{ transform:rotate(0deg) scale(1.06); }
.logo__en{ display:none; }
@media (min-width:768px){
.logo{ font-size:19px; }
.logo__mark{ width:34px; height:34px; font-size:18px; border-radius:8px; }
}
.nav{ display:none; }
.hd__cta{ display:none; }
.menu-btn{
display:inline-flex; align-items:center; gap:10px; height:40px; padding:0 4px 0 14px;
font-size:13px; font-weight:700; letter-spacing:.08em;
}
.menu-btn__ic{ position:relative; width:40px; height:40px; display:grid; place-items:center; }
.menu-btn__ic i{ position:absolute; left:11px; width:18px; height:2px; background:currentColor; border-radius:2px; transition:transform .4s var(--ease), opacity .3s var(--ease), top .4s var(--ease); }
.menu-btn__ic i:nth-child(1){ top:15px; }
.menu-btn__ic i:nth-child(2){ top:20px; }
.menu-btn__ic i:nth-child(3){ top:25px; }
.is-menu-open .menu-btn__ic i:nth-child(1){ top:20px; transform:rotate(45deg); }
.is-menu-open .menu-btn__ic i:nth-child(2){ opacity:0; }
.is-menu-open .menu-btn__ic i:nth-child(3){ top:20px; transform:rotate(-45deg); }
.is-menu-open .hd{ background:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; color:var(--on-dark); }
.is-menu-open .logo__mark{ background:var(--on-dark); color:var(--dark); }
@media (min-width:900px){
.menu-btn{ display:none; }
.nav{ display:flex; align-items:center; gap:26px; }
.nav a{ font-size:14px; font-weight:500; letter-spacing:.04em; position:relative; padding:6px 0; }
.nav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after{ transform:scaleX(1); }
.hd__cta{ display:inline-flex; min-height:44px; padding:0 18px; font-size:14px; }
}
/* 全画面メニュー（スマホ） */
.menu{
position:fixed; inset:0; z-index:40; background:var(--dark); color:var(--on-dark);
display:flex; flex-direction:column; justify-content:flex-end;
padding:calc(var(--hh) + 16px) var(--gutter) 28px;
opacity:0; visibility:hidden; transform:translateY(-8px);
transition:opacity .45s var(--ease), transform .55s var(--ease), visibility 0s .45s;
}
.is-menu-open .menu{ opacity:1; visibility:visible; transform:none; transition:opacity .45s var(--ease), transform .55s var(--ease), visibility 0s; }
.is-menu-open{ overflow:hidden; }
.menu__list{ display:grid; gap:2px; }
.menu__list a{
display:flex; align-items:baseline; gap:14px; padding:11px 0; border-bottom:1px solid var(--line-dark);
font-size:22px; font-weight:700; letter-spacing:.02em; font-feature-settings:"palt" 1;
opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .6s var(--ease);
}
.menu__list a .serif{ font-size:15px; font-style:italic; color:var(--on-dark-2); min-width:26px; }
.is-menu-open .menu__list a{ opacity:1; transform:none; }
.is-menu-open .menu__list a:nth-child(1){ transition-delay:.06s } .is-menu-open .menu__list a:nth-child(2){ transition-delay:.1s }
.is-menu-open .menu__list a:nth-child(3){ transition-delay:.14s } .is-menu-open .menu__list a:nth-child(4){ transition-delay:.18s }
.is-menu-open .menu__list a:nth-child(5){ transition-delay:.22s } .is-menu-open .menu__list a:nth-child(6){ transition-delay:.26s }
.is-menu-open .menu__list a:nth-child(7){ transition-delay:.3s } .is-menu-open .menu__list a:nth-child(8){ transition-delay:.34s }
.menu__foot{ margin-top:22px; display:flex; flex-wrap:wrap; gap:8px 18px; font-size:13px; color:var(--on-dark-2); }
.menu__cta{ margin-top:22px; }
@media (min-width:900px){ .menu{ display:none; } }
/* ---------- ヒーロー ---------- */
.hero{ position:relative; padding:calc(var(--hh) + 36px) 0 0; overflow:hidden; }
.hero__grid{ display:grid; gap:28px; }
.hero__kicker{
font-family:var(--font-serif); font-style:italic; font-size:22px; line-height:1; color:var(--accent);
display:flex; align-items:center; gap:14px;
}
.hero__kicker::before{ content:""; width:28px; height:1px; background:var(--accent); }
.hero__h1{ font-size:clamp(40px, 10.6vw, 64px); line-height:1.22; letter-spacing:.005em; margin-top:18px; }
.hero__h1 .ln{ display:block; }
.hero__h1 .em{ color:var(--accent); }
.hero__sub{ margin-top:18px; font-size:15px; font-weight:700; letter-spacing:.03em; display:inline-block; padding:8px 12px; border:1px solid var(--line-2); border-radius:4px; }
.hero__lead{ margin-top:22px; max-width:34em; }
.hero__cta{ margin-top:28px; display:flex; flex-wrap:wrap; gap:12px; }
.hero__meta{ margin-top:26px; display:flex; flex-wrap:wrap; gap:10px 24px; font-size:13px; color:var(--mute); }
.hero__meta b{ font-family:var(--font-serif); font-weight:400; font-size:22px; color:var(--ink); margin-right:4px; line-height:1; }
@media (min-width:900px){
.hero{ padding-top:calc(var(--hh) + 64px); }
.hero__grid{ grid-template-columns:minmax(0,1fr) minmax(0,.9fr); align-items:end; gap:48px; }
.hero__h1{ font-size:clamp(56px, 6vw, 84px); line-height:1.16; }
.hero__right{ padding-bottom:6px; }
}
/* 見本の帯（横スクロール） */
.strip{ margin-top:44px; }
.strip__track{
display:flex; gap:14px; padding:0 var(--gutter) 6px; scroll-padding-left:var(--gutter);
overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.strip__track::-webkit-scrollbar{ display:none; }
.strip__item{ flex:0 0 78%; scroll-snap-align:start; }
.strip__item:last-child{ margin-right:var(--gutter); }
.shot{
position:relative; display:block; border-radius:var(--r-lg); overflow:hidden;
border:1px solid var(--line); background:var(--paper-2);
box-shadow:0 20px 40px -28px rgba(23,23,26,.45);
transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.shot img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .8s var(--ease); }
.shot:hover{ transform:translateY(-4px); box-shadow:0 28px 48px -28px rgba(23,23,26,.55); }
.shot:hover img{ transform:scale(1.025); }
.shot__tag{
position:absolute; left:12px; top:12px; padding:5px 10px; border-radius:999px;
background:rgba(23,23,26,.82); color:var(--on-dark); font-size:11px; letter-spacing:.08em; font-weight:700;
}
.strip__cap{ margin-top:10px; display:flex; justify-content:space-between; gap:12px; font-size:13px; color:var(--ink-2); }
.strip__cap b{ font-weight:700; color:var(--ink); }
.strip__cap .serif{ color:var(--mute); }
@media (min-width:768px){
.strip__item{ flex-basis:46%; }
}
@media (min-width:1100px){
.strip__track{ padding-left:max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); scroll-padding-left:max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
.strip__item{ flex-basis:31%; }
}
/* 業種の流れ（マーキー） */
.marquee{ margin-top:34px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 0; overflow:hidden; }
.marquee__lbl{ display:none; }
.marquee__track{ display:flex; width:max-content; gap:0; animation:marquee 38s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__set{ display:flex; align-items:center; gap:26px; padding-right:26px; white-space:nowrap; font-size:14px; letter-spacing:.06em; color:var(--ink-2); }
.marquee__set i{ font-style:normal; color:var(--accent); font-family:var(--font-serif); font-size:18px; line-height:1; }
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
/* ---------- 節の共通 ---------- */
.sec{ padding:72px 0; }
.sec--tight{ padding:56px 0; }
.sec__head{ margin-bottom:34px; }
.sec__head .lead{ margin-top:16px; max-width:38em; }
.sec__foot{ margin-top:34px; }
.sec + .sec{ border-top:1px solid var(--line); }
@media (min-width:768px){
.sec{ padding:112px 0; }
.sec--tight{ padding:80px 0; }
.sec__head{ margin-bottom:48px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px 48px; align-items:end; }
.sec__head .lead{ margin-top:0; }
.sec__head--single{ display:block; }
.sec__foot{ margin-top:48px; }
}
/* ---------- 料金カード ---------- */
.price-grid{ display:grid; gap:16px; }
.price-card{
position:relative; padding:28px 22px 26px; border:1px solid var(--line); border-radius:var(--r-lg);
background:#fff; overflow:hidden;
transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.price-card:hover{ transform:translateY(-4px); box-shadow:0 30px 50px -34px rgba(23,23,26,.4); border-color:var(--line-2); }
.price-card__idx{ position:absolute; right:18px; top:14px; font-family:var(--font-serif); font-style:italic; font-size:44px; line-height:1; color:var(--paper-3); }
.price-card__name{ font-size:20px; font-weight:700; }
.price-card__desc{ margin-top:8px; font-size:14px; color:var(--ink-2); }
.price{ margin-top:18px; display:flex; align-items:baseline; gap:6px; }
.price__num{ font-family:var(--font-serif); font-size:52px; line-height:1; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.price__unit{ font-size:15px; font-weight:700; }
.price__tax{ font-size:13px; color:var(--mute); margin-left:4px; }
.price-card__list{ margin-top:18px; padding-top:18px; border-top:1px dashed var(--line-2); display:grid; gap:8px; font-size:14px; }
.price-card__list li{ display:flex; gap:10px; align-items:flex-start; }
.price-card__list li::before{ content:"—"; color:var(--accent); flex:0 0 auto; font-family:var(--font-serif); }
.price-card__add{ margin-top:16px; font-size:13px; color:var(--mute); }
.price-note{ margin-top:18px; display:grid; gap:6px; }
@media (min-width:768px){
.price-grid{ grid-template-columns:1fr 1fr; gap:24px; }
.price-card{ padding:36px 32px 32px; }
.price-card__name{ font-size:22px; }
.price__num{ font-size:64px; }
}
/* ---------- 制作見本 ---------- */
.works-grid{ display:grid; gap:26px; }
.work{ display:block; }
.work__cap{ margin-top:12px; display:grid; gap:4px; }
.work__name{ font-weight:700; font-size:16px; display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.work__name .serif{ font-style:italic; font-size:15px; color:var(--mute); font-weight:400; }
.work__aim{ font-size:14px; color:var(--ink-2); }
.work__note{ font-size:12px; color:var(--mute); }
@media (min-width:768px){
.works-grid{ grid-template-columns:repeat(2,1fr); gap:32px 28px; }
}
@media (min-width:1000px){
.works-grid{ grid-template-columns:repeat(3,1fr); }
.works-grid--2{ grid-template-columns:repeat(2,1fr); }
}
.works-night{ margin-top:56px; padding:26px 22px; border-radius:var(--r-lg); background:var(--dark); color:var(--on-dark); }
.works-night .h3{ color:var(--on-dark); }
.works-night .note{ color:var(--on-dark-2); }
.works-night .works-grid{ margin-top:22px; }
.works-night .work__name{ color:var(--on-dark); }
.works-night .work__note{ color:var(--on-dark-2); }
.works-night .shot{ border-color:var(--line-dark); }
@media (min-width:768px){ .works-night{ padding:40px; } }
.case{ display:grid; gap:18px; padding:24px 0; border-top:1px solid var(--line); }
.case:last-child{ border-bottom:1px solid var(--line); }
.case__body .h3{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 12px; }
.case__body .h3 .serif{ font-style:italic; font-size:16px; color:var(--mute); font-weight:400; }
.case__meta{ margin-top:8px; font-size:13px; color:var(--mute); display:flex; flex-wrap:wrap; gap:4px 16px; }
.case__list{ margin-top:14px; display:grid; gap:6px; font-size:14px; }
.case__list li{ display:grid; grid-template-columns:auto 1fr; gap:10px; }
.case__list b{ font-weight:700; color:var(--ink); white-space:nowrap; }
.case__act{ margin-top:16px; }
@media (min-width:768px){
.case{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; padding:36px 0; align-items:start; }
}
/* ---------- 制作の流れ ---------- */
.steps{ display:grid; gap:0; position:relative; }
.step{ position:relative; display:grid; grid-template-columns:52px 1fr; gap:14px; padding:22px 0; border-top:1px solid var(--line); }
.step:last-child{ border-bottom:1px solid var(--line); }
.step__n{ font-family:var(--font-serif); font-style:italic; font-size:34px; line-height:1; color:var(--accent); padding-top:2px; }
.step__t{ font-size:18px; font-weight:700; }
.step__d{ margin-top:6px; font-size:14px; color:var(--ink-2); }
.step__ul{ margin-top:10px; display:grid; gap:4px; font-size:14px; color:var(--ink-2); }
.step__ul li::before{ content:"・"; }
@media (min-width:768px){
.steps--4{ grid-template-columns:repeat(4,1fr); gap:24px; }
.steps--4 .step{ display:block; padding:28px 0 0; border-top:2px solid var(--ink); border-bottom:0 !important; }
.steps--4 .step__n{ font-size:40px; }
.steps--4 .step__t{ margin-top:14px; font-size:19px; }
.step{ grid-template-columns:96px 1fr; gap:24px; padding:32px 0; }
.step__n{ font-size:44px; }
.step__t{ font-size:21px; }
.step__d, .step__ul{ font-size:15px; }
}
/* ---------- 特長・こだわり ---------- */
.feat-grid{ display:grid; gap:14px; }
.feat{ padding:22px 20px; border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; }
.feat__i{ font-family:var(--font-serif); font-style:italic; font-size:22px; color:var(--accent); line-height:1; }
.feat__t{ margin-top:10px; font-size:17px; font-weight:700; }
.feat__d{ margin-top:8px; font-size:14px; color:var(--ink-2); }
@media (min-width:768px){
.feat-grid{ grid-template-columns:repeat(3,1fr); gap:20px; }
.feat{ padding:28px 26px; }
}
/* ---------- 定義リスト・箇条書き ---------- */
.prose{ max-width:44em; }
.prose h2{ font-size:22px; margin:44px 0 14px; padding-top:20px; border-top:1px solid var(--line); }
.prose h2:first-child{ margin-top:0; border-top:0; padding-top:0; }
.prose h3{ font-size:17px; margin:26px 0 8px; }
.prose p{ margin:0 0 14px; }
.prose ul{ margin:0 0 16px; display:grid; gap:6px; }
.prose li{ display:grid; grid-template-columns:auto 1fr; gap:8px; }
.prose li::before{ content:"—"; color:var(--accent); font-family:var(--font-serif); }
.prose a{ text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-2); }
.prose a:hover{ text-decoration-color:var(--ink); }
.prose a.url{ overflow-wrap:anywhere; font-size:14px; color:var(--ink-2); }
.prose .lead{ margin-bottom:24px; }
@media (min-width:768px){
.prose h2{ font-size:26px; margin-top:56px; }
.prose h3{ font-size:19px; }
}
.list-2col{ display:grid; gap:12px; }
.list-2col li{ display:grid; grid-template-columns:auto 1fr; gap:10px; font-size:15px; padding:10px 0; border-bottom:1px solid var(--line); }
.list-2col li::before{ content:"—"; color:var(--accent); font-family:var(--font-serif); }
@media (min-width:768px){ .list-2col{ grid-template-columns:1fr 1fr; gap:0 32px; } }
.dl{ display:grid; gap:0; border-top:1px solid var(--line); }
.dl > div{ display:grid; gap:2px; padding:14px 0; border-bottom:1px solid var(--line); }
.dl dt{ font-size:13px; color:var(--mute); font-weight:700; letter-spacing:.04em; }
.dl dd{ margin:0; }
@media (min-width:768px){
.dl > div{ grid-template-columns:200px 1fr; gap:20px; padding:18px 0; }
.dl dt{ font-size:14px; padding-top:2px; }
}
/* ---------- 二段組みの節 ---------- */
.split{ display:grid; gap:24px; }
.split__aside{ font-size:14px; color:var(--ink-2); }
@media (min-width:900px){
.split{ grid-template-columns:minmax(0,.55fr) minmax(0,1fr); gap:48px; align-items:start; }
.split__aside{ position:sticky; top:calc(var(--hh) + 24px); }
}
.tag-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.tag{ display:inline-block; padding:6px 12px; border:1px solid var(--line-2); border-radius:999px; font-size:13px; font-weight:500; }
.tag--on{ background:var(--ink); color:var(--on-dark); border-color:var(--ink); }
.tag--off{ color:var(--mute); border-style:dashed; }
/* ---------- 運営者 ---------- */
.op{ display:grid; gap:24px; padding:28px 22px; border-radius:var(--r-lg); background:#fff; border:1px solid var(--line); }
.op__mark{ display:grid; place-items:center; width:64px; height:64px; border-radius:16px; background:var(--accent); color:#fff; font-size:30px; font-weight:700; transform:rotate(-6deg); }
.op__name{ font-size:22px; font-weight:700; }
.op__desc{ margin-top:8px; font-size:14px; color:var(--ink-2); }
@media (min-width:768px){
.op{ grid-template-columns:auto 1fr auto; align-items:center; gap:32px; padding:36px 40px; }
}
/* ---------- よくある質問 ---------- */
.faq{ border-top:1px solid var(--line); }
.faq:last-child{ border-bottom:1px solid var(--line); }
.faq summary{
list-style:none; cursor:pointer; display:grid; grid-template-columns:1fr 32px; gap:16px; align-items:center;
padding:20px 0; font-size:16px; font-weight:700; line-height:1.6;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
content:"+"; font-family:var(--font-serif); font-size:28px; line-height:1; color:var(--accent); text-align:center;
transition:transform .4s var(--ease);
}
.faq[open] summary::after{ transform:rotate(45deg); }
.faq__a{ padding:0 0 22px; font-size:15px; color:var(--ink-2); max-width:44em; }
.faq__a p + p{ margin-top:8px; }
.faq__a a{ text-decoration:underline; text-underline-offset:3px; }
@media (min-width:768px){ .faq summary{ font-size:18px; padding:24px 0; } }
/* ---------- 問い合わせ帯 ---------- */
.dark{ background:var(--dark); color:var(--on-dark); position:relative; }
.dark .h2{ color:var(--on-dark); }
.dark .lead{ color:var(--on-dark-2); }
.dark .kicker__n{ color:var(--on-dark-2); }
.dark .kicker::after{ background:var(--line-dark); }
.dark::before{
content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 1.5px);
background-size:22px 22px;
mask-image:linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
-webkit-mask-image:linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}
.cta{ padding:72px 0; }
.cta .wrap{ position:relative; }
.cta__h{ font-size:30px; line-height:1.3; }
.cta__h .serif{ font-style:italic; color:var(--accent); font-size:1.15em; }
.cta__p{ margin-top:16px; color:var(--on-dark-2); }
.cta__act{ margin-top:28px; display:flex; flex-wrap:wrap; gap:12px; }
.cta__mail{ margin-top:22px; font-size:14px; color:var(--on-dark-2); }
.cta__mail a{ color:var(--on-dark); border-bottom:1px solid var(--line-dark); }
@media (min-width:768px){
.cta{ padding:112px 0; }
.cta__h{ font-size:44px; }
.cta__grid{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:48px; align-items:center; }
}
/* ---------- フッター ---------- */
.ft{ background:var(--dark); color:var(--on-dark-2); border-top:1px solid var(--line-dark); padding:36px 0 calc(28px + env(safe-area-inset-bottom)); font-size:13px; }
.ft__in{ display:grid; gap:22px; }
.ft__brand{ color:var(--on-dark); }
.ft__brand .logo__mark{ background:var(--on-dark); color:var(--dark); }
.ft__nav{ display:flex; flex-wrap:wrap; gap:8px 18px; }
.ft__nav a:hover{ color:var(--on-dark); }
.ft__legal{ display:flex; flex-wrap:wrap; gap:8px 18px; }
.ft__copy{ font-family:var(--font-serif); font-size:14px; letter-spacing:.02em; }
@media (min-width:768px){
.ft__in{ grid-template-columns:auto 1fr auto; align-items:start; gap:40px; }
.ft__nav{ justify-content:center; }
.ft__legal{ justify-content:flex-end; }
}
/* ---------- ページ見出し（下層） ---------- */
.ph{ padding:calc(var(--hh) + 36px) 0 40px; border-bottom:1px solid var(--line); }
.ph__crumb{ font-size:12px; color:var(--mute); letter-spacing:.06em; display:flex; gap:8px; margin-bottom:18px; }
.ph__crumb a:hover{ color:var(--ink); }
.ph .h1{ margin-top:14px; }
.ph .lead{ margin-top:18px; max-width:38em; }
@media (min-width:768px){ .ph{ padding:calc(var(--hh) + 64px) 0 64px; } }
/* ---------- フォーム ---------- */
.form{ display:grid; gap:22px; max-width:640px; }
.fld{ display:grid; gap:8px; }
.fld__l{ font-size:14px; font-weight:700; display:flex; align-items:center; gap:8px; }
.req{ font-size:11px; padding:2px 7px; border-radius:3px; background:var(--accent); color:#fff; letter-spacing:.06em; }
.opt{ font-size:11px; padding:2px 7px; border-radius:3px; background:var(--paper-3); color:var(--ink-2); letter-spacing:.06em; }
.in, .ta, .sel{
width:100%; font:inherit; font-size:16px; color:var(--ink); background:#fff;
border:1px solid var(--line-2); border-radius:var(--r); padding:13px 14px; line-height:1.5;
transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.in:focus, .ta:focus, .sel:focus{ outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(23,23,26,.08); }
.ta{ min-height:160px; resize:vertical; }
.choices{ display:grid; gap:8px; }
.choice{ display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--line-2); border-radius:var(--r); background:#fff; cursor:pointer; font-size:15px; }
.choice input{ accent-color:var(--accent); width:18px; height:18px; margin:0; }
.choice:has(input:checked){ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.fld__help{ font-size:13px; color:var(--mute); }
.fld__err{ display:none; font-size:13px; color:#B42318; }
.fld.is-error .fld__err{ display:block; }
.fld.is-error .in, .fld.is-error .ta{ border-color:#B42318; }
.consent{ padding:16px; border:1px solid var(--line); border-radius:var(--r); background:#fff; font-size:14px; display:grid; gap:10px; }
.consent label{ display:flex; gap:10px; align-items:flex-start; cursor:pointer; }
.consent input{ accent-color:var(--accent); width:18px; height:18px; margin-top:3px; flex:0 0 auto; }
.consent a{ text-decoration:underline; text-underline-offset:3px; }
.form__act{ display:grid; gap:10px; }
.confirm{ display:none; }
.confirm.is-on{ display:grid; gap:22px; max-width:640px; }
.form.is-hidden{ display:none; }
.confirm__lbl{ font-size:13px; color:var(--mute); font-weight:700; }
.confirm__v{ white-space:pre-wrap; }
.notice{ padding:18px 20px; border-radius:var(--r); background:var(--accent-soft); color:var(--accent-deep); font-size:14px; }
.notice--ok{ background:#E7F3EA; color:#1E5A34; }
@media (min-width:768px){
.choices--2{ grid-template-columns:1fr 1fr; }
.form__act{ grid-template-columns:auto auto; justify-content:start; }
}
/* ---------- 動き（2026-09-17 Sho「一番凄そうなやつ」＝見出しのめくれ＋見本の画面が寄る＋罫線の伸び） ---------- */
.rv{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .9s var(--ease); }
.rv.is-in{ opacity:1; transform:none; }
/* 見出し: 下から「めくれる」（外側で隠し、内側だけ動かす） */
.rv .h2, .rv .cta__h, .rv .h3{ overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.rv .h2 > .pl, .rv .cta__h > .pl, .rv .h3 > .pl{ display:block; transform:translateY(112%); transition:transform 1s var(--ease) .12s; }
.rv.is-in .h2 > .pl, .rv.is-in .cta__h > .pl, .rv.is-in .h3 > .pl{ transform:none; }
/* kicker: 罫線が左から伸びてから文字 */
.rv .kicker{ opacity:0; transition:opacity .5s var(--ease) .35s; }
.rv .kicker::after{ transform:translateY(-5px) scaleX(0); transform-origin:left; transition:transform .9s var(--ease); }
.rv.is-in .kicker{ opacity:1; }
.rv.is-in .kicker::after{ transform:translateY(-5px) scaleX(1); }
/* 見本の画面: 少し傾いて寄ってくる */
.rv .shot{ opacity:0; transform:scale(1.06) rotate(-1.5deg) translateY(12px); transition:opacity .9s var(--ease), transform 1.2s var(--ease), box-shadow .5s var(--ease); }
.rv.is-in .shot{ opacity:1; transform:none; }
.rv.is-in .shot:hover{ transform:translateY(-4px); }
/* 料金の数字: 遅れて浮き上がる */
.rv .price__num{ display:inline-block; opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease) .25s, transform .9s var(--ease) .25s; }
.rv.is-in .price__num{ opacity:1; transform:none; }
/* 流れの番号: 大きく現れる */
.rv .step__n{ display:inline-block; opacity:0; transform:scale(.7) translateY(6px); transition:opacity .6s var(--ease) .1s, transform .9s var(--ease) .1s; }
.rv.is-in .step__n{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.08s } .rv-d2{ transition-delay:.16s } .rv-d3{ transition-delay:.24s } .rv-d4{ transition-delay:.32s }
.hero .hero__kicker, .hero .hero__sub, .hero .hero__lead, .hero .hero__cta, .hero .hero__meta, .hero .marquee{
opacity:0; transform:translateY(20px);
animation:rise .9s var(--ease) forwards;
}
.hero__h1{ overflow:hidden; padding-bottom:.06em; }
.hero .hero__h1 .ln{ transform:translateY(112%); animation:peel 1.05s var(--ease) forwards; }
.hero .hero__h1 .ln:nth-child(1){ animation-delay:.08s } .hero .hero__h1 .ln:nth-child(2){ animation-delay:.2s }
@keyframes peel{ to{ transform:none } }
.hero .strip__item{ opacity:0; transform:scale(1.05) rotate(-1.2deg) translateY(16px); animation:settle 1.2s var(--ease) forwards; animation-delay:.55s; }
.hero .strip__item:nth-child(2){ animation-delay:.68s } .hero .strip__item:nth-child(3){ animation-delay:.81s } .hero .strip__item:nth-child(4){ animation-delay:.94s } .hero .strip__item:nth-child(5){ animation-delay:1.07s }
@keyframes settle{ to{ opacity:1; transform:none } }
.hero .hero__sub{ animation-delay:.3s } .hero .hero__lead{ animation-delay:.38s } .hero .hero__cta{ animation-delay:.46s }
.hero .hero__meta{ animation-delay:.54s } .hero .marquee{ animation-delay:.9s }
@keyframes rise{ to{ opacity:1; transform:none } }
.line-grow{ transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease); }
.is-in .line-grow{ transform:none; }
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{ animation:none !important; transition:none !important; }
.rv, .rv .h2 > .pl, .rv .cta__h > .pl, .rv .h3 > .pl, .rv .kicker, .rv .shot, .rv .price__num, .rv .step__n{ opacity:1; transform:none; }
.rv .kicker::after{ transform:translateY(-5px); }
.hero .hero__kicker, .hero .hero__h1 .ln, .hero .hero__sub, .hero .hero__lead, .hero .hero__cta, .hero .hero__meta, .hero .strip__item, .hero .marquee{ opacity:1; transform:none; }
.marquee__track{ animation:none; }
}
/* ---------- 浮きボタン（スマホ） ---------- */
.fab{
position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:30;
display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 18px; border-radius:999px;
background:var(--ink); color:var(--on-dark); font-size:14px; font-weight:700; letter-spacing:.03em;
box-shadow:0 12px 28px -12px rgba(23,23,26,.6);
opacity:0; transform:translateY(12px); transition:opacity .4s var(--ease), transform .5s var(--ease);
pointer-events:none;
}
.fab.is-on{ opacity:1; transform:none; pointer-events:auto; }
.fab .btn__arw{ font-size:18px; }
@media (min-width:900px){ .fab{ display:none; } }
.is-menu-open .fab{ opacity:0; pointer-events:none; }
/* ---------- 組版検査用（?static=1）: 横スクロールと流れる帯を止めて測る ---------- */
.is-static .strip__track{ flex-wrap:wrap; overflow:visible; }
.is-static .strip__item{ flex-basis:100%; }
.is-static .marquee__track{ animation:none; width:auto; flex-wrap:wrap; }
.is-static .marquee__set{ white-space:normal; flex-wrap:wrap; }
.is-static .hero .hero__kicker, .is-static .hero .hero__h1 .ln, .is-static .hero .hero__sub, .is-static .hero .hero__lead, .is-static .hero .hero__cta, .is-static .hero .hero__meta, .is-static .hero .strip__item, .is-static .hero .marquee{ animation:none; opacity:1; transform:none; }
.is-static .rv, .is-static .rv .h2 > .pl, .is-static .rv .cta__h > .pl, .is-static .rv .h3 > .pl, .is-static .rv .kicker, .is-static .rv .shot, .is-static .rv .price__num, .is-static .rv .step__n{ opacity:1; transform:none; transition:none; }
.is-static .rv .kicker::after{ transform:translateY(-5px); }