/* 上：サンプルAの「FV：ネコ」を実寸で再現した試作。下：所見と実装方法。紙の地は最後まで変えない（一つの見た目に固定） */
:root {
  --ground: #FBFAF7; --ink: #101113; --sub: #6b6a66; --rule: #1011132e; --faint: #10111312; --mark: #8a6a2e;
  --mincho: "Shippori Mincho B1", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--gothic); font-size: 14px; line-height: 1.8; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* 試作の操作帯 */
.tools { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; padding: 10px clamp(16px, 2.6vw, 40px); background: color-mix(in srgb, var(--ground) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule); font-size: 12px; }
.tools--top { display: none !important; } /* トップのFVは「写実」で確定。案の切り替えバーは出さない（2026-10-10） */
.tools b { font-weight: 500; letter-spacing: .12em; font-size: 11px; color: var(--sub); }
.seg { display: flex; gap: 4px; flex-wrap: wrap; }
.seg button { background: transparent; border: 1px solid var(--rule); border-radius: 3px; padding: 4px 11px; cursor: pointer; letter-spacing: .06em; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.tools .hint { color: var(--sub); margin-left: auto; }

/* FVの試作（サンプルAのFV：ネコと同じ構成） */
.scrolly { position: relative; height: calc((100svh - var(--th, 48px)) * 3.2); }
.fv { position: sticky; top: var(--th, 48px); height: calc(100svh - var(--th, 48px)); min-height: 520px; overflow: hidden; }
.fv::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 55%, #1011130a 100%); pointer-events: none; }
.stage { position: relative; height: min(58svh, 640px); aspect-ratio: 2 / 3; margin-top: -6svh; filter: blur(18px); opacity: 0; transition: filter 1.8s cubic-bezier(.2,.7,.2,1), opacity 1.6s ease; }
.ready .stage { filter: blur(0); opacity: 1; }
.stage canvas, .stage img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 猫の輪郭に、紙色の薄い光。事例の写真と重なっても形が分かるように */
.stage canvas, .stage img { filter: drop-shadow(0 0 1.5px rgba(251, 250, 247, .9)) drop-shadow(0 0 12px rgba(251, 250, 247, .7)); }
.stage img { display: none; }
.nogl .stage canvas { display: none; }
.nogl .stage img { display: block; }
/* Figmaの配置（1440×900）をそのまま縮尺して画面を覆う */
.art { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; transform-origin: 0 0; }
.art .stage { position: absolute; left: 165px; top: 67px; width: 1110px; height: 1665px; margin: 0; z-index: 10; transform-origin: 0 0; }
.card { position: absolute; left: 0; top: 0; margin: 0; overflow: hidden; transform-origin: 0 0; opacity: 0; will-change: transform, opacity; }
.card { filter: opacity(calc(1 - var(--out, 0))); }
.card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cards-off .card { visibility: hidden; }
.mist { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 90; pointer-events: none; visibility: hidden; }
.mist.on { visibility: visible; pointer-events: auto; }
.mist.flat { background: var(--ground); }
.mist-label { position: fixed; inset: 0; z-index: 91; display: grid; place-content: center; text-align: center; pointer-events: none; opacity: 0; filter: blur(8px); transition: opacity .7s ease, filter .9s ease; }
.mist-label.on { opacity: 1; filter: blur(0); }
.mist-label b { display: block; font-family: var(--mincho); font-weight: 500; font-size: clamp(24px, 3vw, 40px); letter-spacing: .14em; }
.mist-label small { display: block; margin-top: 14px; font-size: 11px; letter-spacing: .1em; color: var(--sub); }
.morph { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 11; pointer-events: none; display: none; }
.after-logo .morph { display: block; }
.after-logo .msg { display: none; }
.after-logo .scrolly { height: calc((100svh - var(--th, 48px)) * 3.4); }
.lg { display: none; position: absolute; z-index: 21; left: 0; right: 0; top: 17%; text-align: center; pointer-events: none; padding: 0 16px; }
.after-logo .lg { display: block; }
/* マークは線から変わってくる猫と入れ替わるので、不透明度だけをその場で合わせる */
.lg__mark { width: clamp(52px, 5vw, 76px); margin: 0 auto; opacity: 0; transform-origin: 50% 94%; }
.lg__mark svg, .lg__type svg { display: block; width: 100%; height: auto; fill: var(--ink); }
/* 文字：マークのあと、少し遅れて一文字ずつにじみ出る */
.lg__type { width: clamp(150px, 15vw, 224px); margin: clamp(18px, 2.2vw, 28px) auto 0; }
.lg__type path { opacity: 0; filter: blur(3px); transition: opacity .9s ease, filter 1.1s ease; transition-delay: calc(var(--i, 0) * 90ms); }
.lg.is-type .lg__type path { opacity: 1; filter: blur(0); }
/* ───── 動きの型：この章で決めて、下の章でも同じものを使う ─────
   親に .in が付くと始まる。始まる時刻は各要素の --d（秒）で、物語の順に間をあけて決める
   m-mist：もやから形になる（小見出し・説明文）／ m-pop：一文字ずつぷるんと出る（章の大見出し）
   m-draw：線画の線が描かれる（下線・句点・飾り線）／ m-rise：静かに浮かぶ（カード・写真）
   戻るときは、どれも0.5秒で静かに消える */
@property --r { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.m-mist { opacity: 0; filter: blur(10px); translate: 0 12px; --r: 0%;
  -webkit-mask-image: radial-gradient(ellipse 70% 140% at 50% 60%, #000 calc(var(--r) - 45%), transparent var(--r)); mask-image: radial-gradient(ellipse 70% 140% at 50% 60%, #000 calc(var(--r) - 45%), transparent var(--r));
  transition: opacity .5s, filter .5s, translate .5s, --r .5s; }
.in .m-mist, .m-mist.in { opacity: 1; filter: blur(0); translate: 0 0; --r: 170%;
  transition: opacity 1.4s ease, filter 1.6s cubic-bezier(.2,.7,.2,1), translate 1.8s cubic-bezier(.2,.7,.2,1), --r 2s cubic-bezier(.3,.6,.2,1); transition-delay: var(--d, 0s); }
.m-pop .ch { display: inline-block; opacity: 0; transform-origin: 50% 90%; transition: opacity .4s; }
.in .m-pop .ch { animation: chPop 1s cubic-bezier(.3,.7,.3,1) both; animation-delay: calc(var(--d, 0s) + var(--c) * 85ms); }
@keyframes chPop {
  0% { opacity: 0; transform: translateY(.45em) scale(.45); filter: blur(5px); }
  40% { opacity: 1; transform: translateY(-.08em) scale(1.14, .88); filter: blur(0); }
  60% { transform: translateY(0) scale(.93, 1.07); }
  78% { transform: scale(1.03, .98); }
  100% { opacity: 1; transform: none; }
}
.m-draw path { fill: none; stroke: currentColor; stroke-width: 1.7px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .4s; }
.in .m-draw path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur, 1.3s) cubic-bezier(.45,0,.2,1) var(--d, 0s); }
.m-rise { opacity: 0; translate: 0 24px; transition: opacity .5s, translate .5s; }
.in .m-rise, .m-rise.in { opacity: 1; translate: 0 0; transition: opacity 1s cubic-bezier(.2,.7,.2,1) var(--d, 0s), translate 1.1s cubic-bezier(.2,.7,.2,1) var(--d, 0s); }
@media (prefers-reduced-motion: reduce) {
  .m-mist, .m-rise { transition: none !important; filter: none; translate: none; -webkit-mask-image: none; mask-image: none; }
  .in .m-pop .ch { animation: none; opacity: 1; } .m-draw path { transition: none !important; }
  .lg.is-msg .lg__mark svg { animation: none; } .lg__type path { transition: none; filter: none; }
}
/* ロゴの章は2場面。①ロゴの紹介 → スクロールで ②価値を探して。同じ場所で入れ替わる */
.lgs-wrap { display: grid; margin-top: clamp(26px, 3vw, 44px); }
.lgs { grid-area: 1 / 1; }
.lcs { display: none; position: absolute; inset: 0; z-index: 21; pointer-events: none; }
.after-logo .lcs { display: block; }
.lcs__head { position: absolute; top: 13%; left: calc(50% + 21svh + clamp(40px, 4.5vw, 90px)); margin: 0; writing-mode: vertical-rl; font-family: var(--mincho); font-weight: 600; font-size: clamp(26px, 2.5vw, 38px); letter-spacing: .16em; line-height: 1.75; }
.lcs__head .nw { display: block; }
.lcs__story { position: absolute; top: 13%; right: calc(50% + 21svh + clamp(40px, 4.5vw, 90px)); writing-mode: vertical-rl; font-size: clamp(13px, .92vw, 15px); line-height: 1.95; letter-spacing: .14em; }
.lcs__story p { margin: 0 0 0 2.6em; } /* 行間より段落の間をはっきり広く */
.lcs__story p:last-child { margin: 0; }
.lcs__story .nw { display: block; } /* 縦書きの1行＝1つの文のまとまり。途中で折り返さない */
@media (min-width: 761px) { .nav-side .lg, .nav-side .lcs { left: 84px; } } /* 左のサイドバーを除いた画面の中央にそろえる */
.lcs__foot { position: absolute; right: clamp(16px, 4vw, 56px); bottom: 5%; margin: 0; font-size: 11px; color: var(--sub); letter-spacing: .1em; display: grid; justify-items: end; gap: 14px; }
.lcs__foot span { display: grid; justify-items: center; gap: 8px; letter-spacing: .24em; }
.lcs__foot svg { width: 10px; height: 30px; overflow: visible; }
@media (max-width: 1180px) {
  /* スマホとタブレット（1180px以下は横向きでも）は猫を上に小さく、言葉は下に横書きで（縦書きを猫の左右に置く幅がない） */
  .lcs { display: none; flex-direction: column; justify-content: flex-end; padding: 0 16px 14px; text-align: center; }
  .after-logo .lcs { display: flex; }
  .lcs__head, .lcs__story { position: static; writing-mode: horizontal-tb; height: auto; }
  .lcs__head { font-size: 20px; letter-spacing: .08em; line-height: 1.5; margin-bottom: 10px; }
  .lcs__head .nw { display: inline-block; }
  .lcs__story { font-size: 12px; line-height: 1.75; letter-spacing: .06em; display: grid; gap: 1.3em; }
  .lcs__story p { margin: 0; }
  .lcs__story .nw { display: inline; }
  .lcs__foot { display: none; }
}
@media (min-width: 761px) and (max-width: 1180px) {
  /* タブレット：横書きの言葉を猫の足もとに寄せ、文字はスマホより一回り大きく */
  .lcs { justify-content: flex-start; padding: calc(var(--th, 48px) + (100svh - var(--th, 48px)) * .5 + 40px) 48px 0; } /* 猫の足もと（画面の半分）の少し下から */
  .lcs__head { font-size: clamp(24px, 3.2vw, 32px); margin-bottom: 18px; }
  .lcs__story { font-size: 14px; line-height: 1.95; max-width: 36em; margin: 0 auto; }
}
.lgc__title.lgc__title--s { font-size: clamp(24px, 2.8vw, 42px); line-height: 1.55; max-width: 16em; margin-left: auto; margin-right: auto; }
@media (max-width: 760px) {
  /* スマホは一画面に収める：上に詰め、文章は行の途中でも折り返し、補足と「つづきは、下へ」は省く */
  .after-logo .lg { top: 72px; }
  .lg__mark { width: 44px; }
  .lgs-wrap { margin-top: 16px; }
  .lgc__eyebrow { margin-bottom: 12px; }
  .lgc__title.lgc__title--s { font-size: 21px; margin-bottom: 12px; }
  .lg .lgs__story { font-size: 12.5px; line-height: 1.8; gap: .5em; word-break: normal; }
  .lg .lgs__story .nw { display: inline; }
  #lgIntro .lgc__todo, #lgIntro .lgs__next { display: none; }
}
.lgs__story { display: grid; gap: .9em; font-size: clamp(13.5px, 1.05vw, 16px); line-height: 2; letter-spacing: .08em; word-break: keep-all; }
.lgs__story p { margin: 0; }
.lgc__title .paw { width: .34em; height: .34em; margin: 0 .04em 0 .12em; vertical-align: -.02em; }
.lgc__title .paw svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lgc__title .paw path { stroke-width: .9px; fill: currentColor; fill-opacity: 0; }
/* 句点：線で描かれたあと、黒く塗られて点になる */
.in .lgc__title .paw path { fill-opacity: 1; transition: stroke-dashoffset var(--dur, 1.3s) cubic-bezier(.45,0,.2,1) var(--d, 0s), fill-opacity .5s ease calc(var(--d, 0s) + var(--dur, 1.3s) - .2s); }
.in .m-pop .ch.paw { animation: none; opacity: 1; }
.hl { position: relative; white-space: nowrap; }
.hl svg { position: absolute; left: -.1em; right: -.1em; bottom: -.32em; width: calc(100% + .2em); height: .5em; overflow: visible; }
.hl path { stroke: var(--mark); stroke-width: 1.6px; }
.lgs__next { margin: clamp(28px, 3vw, 40px) 0 0; font-size: 11px; letter-spacing: .24em; color: var(--sub); display: grid; justify-items: center; gap: 10px; }
.lgs__next svg { width: 10px; height: 34px; overflow: visible; }
/* ロゴのマークは、着地したあとは動かさない */


.lgc__eyebrow { margin: 0 0 18px; font-size: clamp(12px, .95vw, 14px); letter-spacing: .2em; color: var(--sub); }
.lgc__title { margin: 0 0 clamp(16px, 1.8vw, 24px); font-family: var(--mincho); font-weight: 600; font-size: clamp(27px, 3.5vw, 52px); letter-spacing: .08em; line-height: 1.5; word-break: keep-all; }
.lgc__body { margin: 0; font-size: clamp(14px, 1.1vw, 17px); letter-spacing: .08em; line-height: 2; word-break: keep-all; }
.lgc__body--l { font-family: var(--mincho); font-weight: 600; font-size: clamp(20px, 2.1vw, 32px); letter-spacing: .1em; line-height: 1.7; padding-top: 2em; margin-top: -2em; }
/* 「ねこの手」：文字の場所に、まず黒猫の前足が上からにゅるんと伸びてきて、少し行き過ぎて戻る。前足がにじんで消えると同時に、文字が一字ずつ焦点を結んで現れる */
.kt { position: relative; display: inline-block; font-style: normal; }
.kt__c { display: inline-block; opacity: 0; filter: blur(6px); }
.in .kt__c { opacity: 1; filter: none; transition: opacity .6s ease, filter .7s ease; transition-delay: calc(3.3s + var(--i) * 80ms); }
.kt__paw { position: absolute; left: 50%; top: -2.1em; width: 5em; height: 3.5em; translate: -50% 0; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(transparent 10%, #000 62%); mask-image: linear-gradient(transparent 10%, #000 62%); } /* 上はにじませて、腕の切れ目を見せない */
.kt__paw img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; rotate: 180deg; translate: 0 -3.8em; opacity: 0; }
.in .kt__paw img { animation: ktPaw 1.1s cubic-bezier(.16,1,.3,1) 2.1s both, ktPawOut .7s ease 3.2s forwards; }
@keyframes ktPaw { 0% { translate: 0 -3.8em; opacity: 0; } 35% { opacity: 1; } 100% { translate: 0 .2em; opacity: 1; } }
@keyframes ktPawOut { to { opacity: 0; filter: blur(8px); } }
@media (prefers-reduced-motion: reduce) { .kt__paw { display: none; } .kt__c { opacity: 1; filter: none; } }
.lgc__todo { margin: 18px 0 0; font-size: 11px; color: var(--sub); letter-spacing: .06em; }
.ideas { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; z-index: 4; pointer-events: none; }
.cards-off .ideas, .blob-off .ideas { visibility: hidden; }
.blob-mode .card { display: none; }
/* もやもやの事例は文字の上に重ならないので、紙色の幕はコピーのまわりだけに */
.blob-mode .veil { background: radial-gradient(ellipse 34% 30% at 16% 41%, rgba(251,250,247,.86), rgba(251,250,247,.5) 55%, rgba(251,250,247,0)); }
.bar { position: absolute; z-index: 30; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 0 clamp(16px, 2.6vw, 40px) calc(clamp(18px, 3vw, 34px) + env(safe-area-inset-bottom, 0px)); opacity: 0; transition: opacity 1.4s 1.4s; pointer-events: none; }
.ready .bar { opacity: 1; }
.bar__logo { width: clamp(108px, 10vw, 150px); }
.bar__logo svg { width: 100%; height: auto; fill: var(--ink); display: block; }
.bar__line { margin: 0; font-family: var(--mincho); font-weight: 500; font-size: clamp(13px, 1.1vw, 16px); letter-spacing: .14em; text-align: right; }
.bar__left { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.6vw, 22px); }
.chrome-off .bar .burger { pointer-events: none; visibility: hidden; transition: visibility 0s .4s; }
/* ハンバーガー：2本線。押せる範囲は44px角 */
.burger { pointer-events: auto; position: relative; width: 44px; height: 44px; margin: -12px 0 -12px -10px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.burger i { position: absolute; left: 10px; width: 24px; height: 1.5px; background: currentColor; transition: transform .5s cubic-bezier(.2,.7,.2,1), width .5s cubic-bezier(.2,.7,.2,1); }
.burger i:first-child { top: 18px; } .burger i:last-child { top: 25px; width: 16px; }
.burger:hover i:last-child, .burger:focus-visible i:last-child { width: 24px; }
/* ロゴになったあとに出す、いつものナビ */
.gnav { position: fixed; z-index: 60; display: flex; align-items: center; background: color-mix(in srgb, var(--ground) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), visibility 0s .9s; }
html.nav-on .gnav.gnav { opacity: 1; visibility: visible; transform: none; transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), visibility 0s; }
.gnav a { color: var(--ink); text-decoration: none; }
.gnav__logo svg { display: block; width: 100%; height: auto; fill: var(--ink); }
.gnav__links { display: flex; gap: clamp(18px, 2.2vw, 34px); }
.gnav__links a { position: relative; font-family: var(--mincho); font-size: 16px; font-weight: 500; letter-spacing: .08em; padding: 4px 0; white-space: nowrap; }
.gnav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.gnav__links a:hover::after, .gnav__links a:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }
.gnav__cta { font-size: 14px; font-weight: 500; letter-spacing: .06em; white-space: nowrap; border: 1px solid var(--ink); border-radius: 999px; padding: 9px 18px; transition: background .3s, color .3s; }
.gnav__cta:hover, .gnav__cta:focus-visible { background: var(--ink); color: var(--ground) !important; }
.gnav .burger { margin: 0; }
/* 上：横一列。ロゴ／項目／無料相談 */
html:not(.nav-side) .gnav { top: var(--th, 48px); left: 0; right: 0; height: 64px; gap: clamp(20px, 3vw, 48px); padding: 0 clamp(16px, 2.6vw, 40px); border-bottom: 1px solid var(--faint); transform: translateY(-14px); }
html:not(.nav-side) .gnav__logo { width: clamp(108px, 9vw, 132px); margin-right: auto; }
html:not(.nav-side) .gnav .burger { display: none; }
html:not(.nav-side) .gnav__mark { display: none; }
/* 左：細いサイドバー。マーク／メニュー／無料相談（縦書き） */
.nav-side .gnav { top: var(--th, 48px); bottom: 0; left: 0; width: 84px; flex-direction: column; justify-content: space-between; padding: 26px 0 30px; border-right: 1px solid var(--faint); transform: translateX(-14px); }
.nav-side .gnav__logo, .nav-side .gnav__links { display: none; }
.nav-side .gnav__mark { width: 34px; }
.nav-side .gnav__mark svg { display: block; width: 100%; height: auto; fill: var(--ink); }
.nav-side .gnav__cta { writing-mode: vertical-rl; letter-spacing: .3em; padding: 18px 9px; }
@media (max-width: 760px) {
  /* スマホは左下のロゴが猫に重なるので、重なったところだけ白く反転させる */
  .bar { mix-blend-mode: difference; color: #fff; }
  .bar .bar__logo svg { fill: #fff; } .bar .burger { color: #fff; }
}
@media (max-width: 760px) {
  /* スマホはどちらの案でも上の帯：ロゴとメニューだけ */
  html:is(.nav-side, :not(.nav-side)) .gnav { top: var(--th, 48px); left: 0; right: 0; bottom: auto; width: auto; height: 56px; flex-direction: row; justify-content: space-between; padding: 0 16px; border-right: 0; border-bottom: 1px solid var(--faint); transform: translateY(-14px); }
  html:is(.nav-side, :not(.nav-side)) .gnav__logo { display: block; width: 108px; margin-right: auto; }
  html:is(.nav-side, :not(.nav-side)) .gnav__links, html:is(.nav-side, :not(.nav-side)) .gnav__cta, html:is(.nav-side, :not(.nav-side)) .gnav__mark { display: none; }
  html:is(.nav-side, :not(.nav-side)) .gnav .burger { display: block; margin-right: -10px; }
}
/* 複合：左のサイドバーに加えて、右上に主要ページの文字だけを置く（帯は敷かず、地の色で白黒が反転する） */
.tnav { position: fixed; z-index: 61; top: calc(var(--th, 48px) + 22px); right: clamp(20px, 3vw, 48px); display: none; gap: clamp(22px, 2.4vw, 38px); padding: 6px 16px; margin-right: -16px; background: color-mix(in srgb, #FBFAF7 72%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), visibility 0s .9s; }
.nav-mix .tnav { display: flex; }
html.nav-on .tnav { opacity: 1; visibility: visible; transform: none; transition: opacity .8s cubic-bezier(.2,.7,.2,1) .15s, transform .9s cubic-bezier(.2,.7,.2,1) .15s, visibility 0s; }
.tnav a { position: relative; color: #101113; text-decoration: none; font-family: var(--mincho); font-size: 16px; font-weight: 500; letter-spacing: .08em; padding: 4px 0; white-space: nowrap; }
.tnav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.tnav a:hover::after, .tnav a:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }
/* 右上のナビ（別案）：帯は敷かない。下の地に合わせて墨と白を切り替え、下へ読み進める間は引っ込め、少し戻すと現れる */
.tnav { padding: 0; margin-right: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.tnav a { transition: color .5s ease; }
html.tn-light .tnav a { color: #FBFAF7; }
html.nav-on.tn-hide .tnav { opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1), visibility 0s .6s; }
@media (max-width: 760px) { .nav-mix .tnav { display: none; } }
/* メニューを開いた画面 */
.drawer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--ground); color: var(--ink); }
.drawer::backdrop { background: transparent; }
.drawer[open] { animation: drawerIn .7s cubic-bezier(.2,.7,.2,1); }
@keyframes drawerIn { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: none; } }
.drawer__in { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px clamp(24px, 6vw, 96px); align-content: center; padding: 96px clamp(24px, 7vw, 120px) 64px; box-sizing: border-box; }
.drawer__close { position: absolute; top: 20px; right: clamp(12px, 2.4vw, 36px); width: 44px; height: 44px; border: 0; background: none; cursor: pointer; color: var(--ink); }
.drawer__close::before, .drawer__close::after { content: ""; position: absolute; left: 10px; top: 21px; width: 24px; height: 1.5px; background: currentColor; transform: rotate(45deg); }
.drawer__close::after { transform: rotate(-45deg); }
.drawer__close:focus { outline: none; } .drawer__close:focus-visible { outline: 1px solid var(--rule); outline-offset: -2px; border-radius: 50%; }
.drawer__brand svg { width: clamp(130px, 13vw, 190px); height: auto; fill: var(--ink); display: block; }
.drawer__brand p { margin: 22px 0 0; font-family: var(--mincho); font-size: clamp(15px, 1.4vw, 19px); letter-spacing: .14em; line-height: 1.9; }
.drawer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 4px clamp(24px, 4vw, 64px); justify-content: start; }
.drawer__nav a { display: block; color: var(--ink); text-decoration: none; font-family: var(--mincho); font-weight: 500; font-size: clamp(18px, 1.9vw, 26px); letter-spacing: .1em; padding: 10px 0; opacity: 0; translate: 0 10px; filter: blur(4px); transition: opacity .7s, translate .7s, filter .7s; transition-delay: calc(.12s + var(--k, 0) * 50ms); }
.drawer[open] .drawer__nav a { opacity: 1; translate: none; filter: none; }
.drawer__nav a:hover, .drawer__nav a:focus-visible { color: var(--mark); outline: none; }
.drawer__nav a:focus-visible small { color: var(--mark); }
.drawer__nav small { display: block; font: 500 10px/1 var(--gothic); letter-spacing: .2em; color: var(--sub); margin-top: 4px; }
@media (max-width: 760px) {
  .drawer__in { grid-template-columns: 1fr; align-content: start; padding-top: 80px; }
  .drawer__nav { grid-template-columns: 1fr 1fr; }
}
.caption { position: absolute; z-index: 2; left: clamp(16px, 2.6vw, 40px); top: clamp(16px, 2.4vw, 32px); font-size: 11px; color: var(--sub); letter-spacing: .08em; max-width: 46ch; line-height: 1.7; }
/* FVのコピー：何の会社かを最初に伝える（文言は今のトップページのまま） */
.copy { position: absolute; z-index: 22; left: clamp(24px, 7vw, 120px); top: 50%; translate: 0 -50%; max-width: min(40vw, 620px); opacity: 0; transition: opacity 1.4s 1s; pointer-events: none; }
.ready .copy { opacity: 1; }
.copy__title { margin: 0 0 clamp(16px, 2vw, 28px); font-family: var(--mincho); font-weight: 500; font-size: clamp(38px, 5.4vw, 86px); line-height: 1.32; letter-spacing: .06em; word-break: keep-all; }
.copy__lead { margin: 0; font-size: clamp(13px, 1.05vw, 16px); line-height: 2; letter-spacing: .06em; max-width: 26em; }
/* コピーの後ろだけ紙色を薄く敷いて、写真の上でも読めるようにする */
.veil { position: absolute; inset: 0; z-index: 8; pointer-events: none; background: linear-gradient(90deg, rgba(251,250,247,.9) 0, rgba(251,250,247,.82) 28%, rgba(251,250,247,0) 52%); filter: opacity(calc(1 - var(--out, 0))); }
.l-full .copy, .l-full .veil { display: none; }
.l-face .bar__line, .l-small .bar__line { visibility: hidden; }
@media (max-width: 760px) {
  .copy { left: 16px; right: 16px; top: calc(16px + 4svh); translate: none; max-width: none; }
  .copy__title { font-size: clamp(30px, 9vw, 40px); }
  .copy__lead { font-size: 13px; line-height: 1.9; }
  .veil, .blob-mode .veil { background: linear-gradient(180deg, rgba(251,250,247,.92) 0, rgba(251,250,247,.85) 30%, rgba(251,250,247,0) 46%); }
}
/* メッセージ：猫が左へ寄って右を向いたあと、右側に出る（文言は今のトップページのまま） */
.msg { position: absolute; z-index: 20; left: 50%; right: clamp(16px, 6vw, 96px); top: 50%; transform: translateY(-50%); max-width: 34em; pointer-events: none; }
.msg > * { opacity: 0; translate: 0 18px; }
.msg__eyebrow { margin: 0 0 18px; font-size: 12px; letter-spacing: .2em; color: var(--sub); }
/* 大きいまま：猫は顔の大きさのまま左へ寄って右を向き、文章は猫の輪郭に沿って回り込む */
.msg__shape { display: none; }
.after-big .msg { left: 0; top: 0; bottom: 0; transform: none; max-width: none; padding-top: calc((100svh - var(--th, 48px)) * .3); }
.after-big .msg__shape { display: block; float: left; }
.nw { display: inline-block; }
.msg__title { word-break: keep-all; margin: 0 0 22px; font-family: var(--mincho); font-weight: 500; font-size: clamp(22px, 2.3vw, 34px); line-height: 1.6; letter-spacing: .08em; text-wrap: balance; }
.msg__body { margin: 0; font-size: clamp(14px, 1.05vw, 16px); line-height: 2.1; letter-spacing: .04em; }
/* ここから先は猫なし */
.rest { padding: clamp(64px, 10vw, 140px) max(clamp(16px, 4vw, 40px), calc((100% - 1200px) / 2)) clamp(48px, 8vw, 96px); }
.rest__head { margin: 0 0 clamp(28px, 4vw, 48px); }
.rest__title { margin: 0; font-family: var(--mincho); font-weight: 600; font-size: clamp(26px, 3vw, 44px); letter-spacing: .1em; }
.rest__rule { display: block; width: clamp(80px, 9vw, 120px); height: 10px; margin: 14px 0 20px; color: var(--mark); overflow: visible; }
.rest__lead { margin: 0; max-width: 46em; line-height: 2; letter-spacing: .06em; }
.rest__note { margin: 0 0 28px; font-size: 12px; letter-spacing: .1em; color: var(--sub); }
.rest__blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); }
.rest__blocks div { aspect-ratio: 4 / 3; border-top: 1px solid var(--ink); background: var(--faint); display: flex; align-items: flex-end; padding: 14px; font-family: var(--mincho); letter-spacing: .14em; }
/* 締め：無料相談。紙の層の一番下。猫は紙の端に座り、紙ごと持ち上がってフッターが現れる */
.scrolly, .rest, .closing { position: relative; z-index: 1; background: var(--ground); }
.closing { --ph: clamp(230px, 20vw, 300px); padding: clamp(72px, 10vw, 140px) clamp(16px, 4vw, 40px) calc(var(--ph) * .46 + 40px); box-shadow: 0 24px 40px -24px rgba(0,0,0,.5); }
.closing__grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.over { margin: 0 0 22px; font: 500 12px/1 var(--gothic); letter-spacing: .24em; text-transform: uppercase; display: flex; gap: 14px; align-items: center; }
.over span { color: var(--sub); letter-spacing: .14em; text-transform: none; }
.closing__title { margin: 0 0 22px; font-family: var(--mincho); font-weight: 500; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.45; letter-spacing: .08em; word-break: keep-all; }
.closing__lead { margin: 0 0 40px; max-width: 30em; }
/* 主役のボタン：触れると矢印が伸び、黒が左から満ちる */
.cta { --h: clamp(64px, 6vw, 84px); position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 460px; height: var(--h); padding: 0 28px 0 32px; border: 1px solid var(--ink); color: var(--ink); text-decoration: none; overflow: hidden; isolation: isolate; font-family: var(--mincho); font-size: clamp(16px, 1.3vw, 19px); letter-spacing: .14em; transition: color .5s cubic-bezier(.2,.7,.2,1); }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.cta__arrow { position: relative; width: 36px; height: 1px; background: currentColor; transition: width .6s cubic-bezier(.2,.7,.2,1); }
.cta__arrow::after { content: ""; position: absolute; right: 0; top: -4px; width: 9px; height: 9px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); transform-origin: 100% 0; }
.cta:hover, .cta:focus-visible { color: var(--ground); }
.cta:hover::before, .cta:focus-visible::before { transform: scaleX(1); }
.cta:hover .cta__arrow, .cta:focus-visible .cta__arrow { width: 64px; }
.phones { margin: 36px 0 0; display: flex; flex-wrap: wrap; gap: 18px 40px; }
.phones dt { font-size: 11px; letter-spacing: .14em; color: var(--sub); }
.phones dd { margin: 2px 0 0; font-family: var(--mincho); font-size: clamp(20px, 1.8vw, 26px); letter-spacing: .08em; }
.phones a { color: inherit; text-decoration: none; }
.hours { margin: 12px 0 0; font-size: 12px; letter-spacing: .1em; color: var(--sub); }
.benefits { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.benefits li { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); gap: 12px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.benefits__no { font-family: var(--mincho); font-size: 13px; letter-spacing: .1em; color: var(--sub); padding-top: 3px; }
.benefits h3 { margin: 0 0 6px; font-family: var(--mincho); font-weight: 500; font-size: clamp(16px, 1.35vw, 19px); letter-spacing: .08em; }
.benefits p { margin: 0; font-size: 13px; line-height: 1.9; color: #3c3b38; }
/* 段落ごとに下から静かに現れる（流れを途切れさせない程度） */
.rv { opacity: 0; translate: 0 24px; transition: opacity 1s cubic-bezier(.2,.7,.2,1), translate 1s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 90ms); }
.rv.in { opacity: 1; translate: 0 0; }
.peek { position: absolute; right: clamp(20px, 9vw, 160px); bottom: 0; height: calc(var(--ph) * .46); aspect-ratio: 2 / 1.38; clip-path: inset(-60% -30% 0 -30%); z-index: 2; pointer-events: none; } /* 10/13 下の紙の縁だけで切る（跳ねたときに頭の上が切れないように） */
.perch { position: absolute; left: 0; top: 0; height: var(--ph); aspect-ratio: 2 / 3; translate: 0 100%; transform-origin: 50% 46%; }
.peek.in .perch { animation: peekUp 1.2s cubic-bezier(.3,.7,.3,1) .35s both; }
@keyframes peekUp {
  0% { translate: 0 100%; transform: none; }
  50% { translate: 0 -7%; transform: scale(.97, 1.05); }
  68% { translate: 0 2%; transform: scale(1.04, .96); }
  84% { translate: 0 -1%; transform: scale(.99, 1.01); }
  100% { translate: 0 0; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .peek .perch { translate: 0 0; } .peek.in .perch { animation: none; } }
/* 写実は横顔（真横）を左右反転して、左を向かせる */
.v-b1 .perch canvas, .v-b1 .perch img { transform: scaleX(-1); }
.perch canvas, .perch img { position: absolute; inset: 0; width: 100%; height: 100%; }
.perch img { display: none; }
.nogl .perch canvas { display: none; }
.nogl .perch img { display: block; }
/* フッター：紙の下に貼りついていて、紙が持ち上がると現れる */
.foot { position: sticky; bottom: 0; z-index: 0; background: var(--ink); color: var(--ground); padding: clamp(56px, 7vw, 96px) clamp(16px, 4vw, 40px) calc(28px + env(safe-area-inset-bottom, 0px)); }
.no-reveal .foot { position: relative; overflow: hidden; }
.foot__in { max-width: 1200px; margin: 0 auto; }
.foot__echo { margin: 0 0 clamp(40px, 5vw, 72px); font-family: var(--mincho); font-weight: 500; font-size: clamp(34px, 6.4vw, 104px); line-height: 1.2; letter-spacing: .06em; color: var(--ground); opacity: .92; word-break: keep-all; }
/* 10/13 Yujiさん：フッターのキャッチも動きを → フッターが見えてきたら、一文字ずつぼかしから浮かぶ（きっかけはフッター末尾のscript） */
.foot__echo .fc { display: inline-block; opacity: 0; filter: blur(12px); translate: 0 .22em; transition: opacity 1.1s ease, filter 1.4s ease, translate 1.4s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--c) * 75ms); }
.foot__echo.on .fc { opacity: 1; filter: blur(0); translate: 0 0; }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 40px clamp(40px, 6vw, 96px); padding-top: 32px; border-top: 1px solid #fbfaf72e; }
.foot__logo { display: block; width: 140px; margin-bottom: 22px; }
.foot__logo svg { width: 100%; height: auto; fill: var(--ground); display: block; }
.foot address { font-style: normal; font-size: 12px; line-height: 1.9; color: #fbfaf7b3; margin: 0 0 12px; letter-spacing: .04em; }
.foot__nav { display: grid; grid-template-columns: repeat(5, minmax(0, auto)); gap: 16px clamp(20px, 2.6vw, 40px); justify-content: end; }
@media (min-width: 761px) and (max-width: 1100px) { .foot__nav { grid-template-columns: repeat(3, minmax(0, auto)); } } /* タブレットは5列が入らない */
.foot__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-content: start; }
.foot__nav a { position: relative; color: var(--ground); text-decoration: none; font-size: 13px; letter-spacing: .1em; white-space: nowrap; padding-bottom: 3px; }
.foot__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.foot__nav a:hover::after, .foot__nav a:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }
.foot__bottom { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; align-items: end; }
.foot__seo { margin: 0; font-size: 11px; line-height: 1.9; color: #fbfaf780; max-width: 60em; }
.foot__top { color: var(--ground); text-decoration: none; font-size: 12px; letter-spacing: .16em; display: inline-flex; gap: 10px; align-items: center; justify-self: end; }
.foot__top span { display: inline-block; transition: translate .4s cubic-bezier(.2,.7,.2,1); }
.foot__top:hover span { translate: 0 -4px; }
.foot small { grid-column: 1 / -1; color: #fbfaf780; font-size: 11px; letter-spacing: .1em; }
/* 検討メモは別窓に */
.memo-open { background: transparent; border: 1px solid var(--rule); border-radius: 3px; padding: 4px 11px; cursor: pointer; font-size: 12px; letter-spacing: .06em; }
.memo-dlg { width: min(960px, calc(100vw - 32px)); max-height: 86vh; padding: 0; border: 1px solid var(--rule); background: var(--ground); color: var(--ink); }
.memo-dlg::backdrop { background: #10111366; }
.memo-close { position: sticky; top: 0; float: right; margin: 12px; background: var(--ground); border: 1px solid var(--rule); border-radius: 3px; padding: 4px 12px; cursor: pointer; z-index: 2; }
@media (max-width: 760px) {
  .msg { left: 16px; right: 16px; top: auto; bottom: 7%; transform: none; }
  .after-big .msg { left: 16px; right: 16px; top: 0; bottom: 0; padding-top: calc(12px + 3svh); }
  .msg__eyebrow { margin-bottom: 10px; } .msg__title { margin-bottom: 12px; font-size: 20px; } .msg__body { font-size: 13px; line-height: 1.95; }
  .rest__blocks { grid-template-columns: 1fr; } .rest__blocks div { aspect-ratio: 16 / 7; }
  .closing { --ph: 190px; }
  .closing__grid { grid-template-columns: 1fr; }
  .cta { max-width: none; }
  .peek { right: 16px; }
  .foot__grid { grid-template-columns: 1fr; gap: 28px; }
  .foot__echo { font-size: clamp(40px, 12vw, 52px); margin-bottom: 36px; }
  .foot__echo .nw { display: block; }
  /* スマホは案内を一続きに流して短くする */
  .foot__nav { order: -1; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px 22px; }
  .foot__nav ul { display: contents; }
  .foot__logo { width: 120px; margin-bottom: 14px; }
  .foot address { font-size: 11px; line-height: 1.8; }
  .foot__seo { font-size: 10px; }
  .foot__bottom { grid-template-columns: 1fr; } .foot__top { justify-self: start; }
}
@media (max-width: 760px) {
  .tools { flex-wrap: nowrap; overflow-x: auto; gap: 12px; scrollbar-width: none; }
  .seg { flex-wrap: nowrap; } .seg button { white-space: nowrap; } .tools b { white-space: nowrap; }
  .tools .hint, .caption { display: none; }
}

/* 検討メモ */
.memo { max-width: 920px; margin: 0 auto; padding: clamp(48px, 8vw, 96px) clamp(16px, 4vw, 40px) 96px; display: grid; gap: clamp(48px, 7vw, 80px); }
.memo h2 { font-family: var(--mincho); font-weight: 500; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: .1em; margin: 0 0 6px; text-wrap: balance; }
.memo .lead { color: var(--sub); margin: 0 0 22px; max-width: 62ch; }
.memo p { margin: 0; max-width: 64ch; }
.memo section { display: grid; gap: 14px; min-width: 0; }
.memo .mt { border-collapse: collapse; width: 100%; font-size: 13px; }
.memo .mt th, .memo .mt td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.memo .mt th { font-weight: 500; color: var(--sub); font-size: 11px; letter-spacing: .12em; }
.memo .mt td:first-child { font-family: var(--mincho); font-weight: 600; white-space: nowrap; }
.trio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(16px, 3vw, 32px); border-top: 1px solid var(--ink); }
.trio > div { padding: 16px 0 4px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.trio img { width: 100%; max-width: 160px; height: auto; aspect-ratio: 2/3; justify-self: start; }
.trio h3 { margin: 0; font-size: 14px; font-weight: 500; letter-spacing: .08em; }
.trio .code { font-size: 10px; letter-spacing: .18em; color: var(--sub); }
.trio p { font-size: 13px; color: var(--ink); }
.verdict { font-size: 12px; letter-spacing: .06em; color: var(--sub); border-top: 1px solid var(--rule); padding-top: 8px; }
.verdict b { color: var(--ink); font-weight: 500; }
.note { border-left: 2px solid var(--mark); padding: 2px 0 2px 14px; font-size: 13px; }
.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--ink); }
.steps li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 13px; }
.steps li span { color: var(--sub); font-size: 12px; letter-spacing: .08em; }
.tbl { overflow-x: auto; border-top: 1px solid var(--ink); }
table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 13px; }
th, td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule); }
th { font-weight: 500; font-size: 11px; letter-spacing: .14em; color: var(--sub); }
td:first-child { font-weight: 500; width: 11em; }
tr.pick td { background: #8a6a2e0d; }
.tag { display: inline-block; font-size: 10px; letter-spacing: .14em; border: 1px solid var(--mark); color: var(--mark); padding: 1px 6px; border-radius: 2px; margin-left: 6px; vertical-align: 2px; }
ul.plain { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; max-width: 64ch; }
.open { border-top: 1px solid var(--ink); padding-top: 14px; }
@media (max-width: 760px) {
  .trio { grid-template-columns: 1fr; }
  .trio > div { grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; border-bottom: 1px solid var(--rule); padding-bottom: 14px; }
  .trio > div > img { grid-row: span 4; }
  .steps li { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { .stage, .bar, .gnav, .drawer__nav a { transition: none; } .drawer[open] { animation: none; } .rv, .foot__echo .fc { opacity: 1; filter: none; translate: none; transition: none; } }
/* ───── 通しの枠（貝印の流れ）─────
   一つの枠を画面に貼りつけたまま、中央の主役と左右の縦の言葉だけを入れ替える。
   スクロールは「次の場面へ進む合図」だけで、動きはどれも時間で再生する（スクロールに張りつかない） */
.tour { position: relative; z-index: 1; background: var(--ground); height: calc((100svh - var(--th, 48px)) * (var(--steps, 18) * .8 + 1)); }
.tour__stage { --sb: 0px; --band: clamp(96px, 13svh, 128px); --cw: min(40vw, 600px); --gap: clamp(28px, 3.4vw, 56px);
  position: sticky; top: var(--th, 48px); height: calc(100svh - var(--th, 48px)); min-height: 520px; overflow: hidden; }
.nav-side .tour__stage { --sb: 84px; }
.it.gone { opacity: 0 !important; filter: blur(6px) !important; transition: opacity .55s ease, filter .55s ease, scale .9s cubic-bezier(.5,0,.7,.4) !important; }
.chap { position: absolute; left: var(--sb); right: 0; top: 0; bottom: var(--band); pointer-events: none; }
.chap.on { pointer-events: auto; }
.it:not(.in) { pointer-events: none; opacity: 0; }
.it { transition: opacity .6s ease; }
.tour .m-draw path { vector-effect: none; }
.thread path { visibility: hidden; }
/* 置き場所：中央の主役（zc）、右の縦書き（zr）、左の縦書き（zl）、上の小見出し（zt）、右下の案内（zb） */
.zc { position: absolute; left: 50%; top: 50%; width: var(--cw); height: min(66%, 520px); translate: -50% -50%; }
.zc--sq { width: auto; aspect-ratio: 1; }
.zr, .zl { position: absolute; top: 12%; max-height: 74%; writing-mode: vertical-rl; }
.zr { left: calc(50% + var(--cw) / 2 + var(--gap)); }
.zl { right: calc(50% + var(--cw) / 2 + var(--gap)); }
.zt { position: absolute; left: 0; right: 0; top: 3.5%; margin: 0; text-align: center; white-space: nowrap; }
.zb { position: absolute; right: clamp(20px, 3vw, 48px); bottom: 4%; }
.eyebrow { font-size: 12px; letter-spacing: .24em; color: var(--sub); }
.vh { margin: 0; font-family: var(--mincho); font-weight: 600; font-size: clamp(24px, 2.4vw, 36px); letter-spacing: .16em; line-height: 1.75; }
.vh .nw { display: block; }
.vh--m { font-size: clamp(22px, 2.1vw, 32px); }
.vh .en { display: block; font-family: var(--gothic); font-weight: 500; font-size: 11px; letter-spacing: .24em; color: var(--sub); margin-left: 1.6em; }
.vb { margin: 0; font-size: clamp(13px, .98vw, 15px); line-height: 2.25; letter-spacing: .14em; height: min(74%, 440px); }
.vb p { margin: 0 0 0 1.2em; }
.vb .note { font-size: 11px; color: var(--sub); letter-spacing: .1em; }
.vb a, .va a, .links a, .more { color: var(--ink); text-decoration: none; letter-spacing: .14em; }
.vb a, .va a { display: inline-block; margin-top: 1.4em; font-size: 12px; border-left: 1px solid currentColor; padding-left: 6px; }
.vb a i, .va a i, .links a i, .more i { font-style: normal; display: inline-block; margin-top: .5em; transition: translate .4s cubic-bezier(.2,.7,.2,1); }
.vb a:hover i, .va a:hover i, .links a:hover i, .more:hover i { translate: 3px -3px; }
.vb--head h2 { margin: 0 0 0 .9em; font-family: var(--mincho); font-weight: 600; font-size: clamp(26px, 2.6vw, 40px); letter-spacing: .2em; line-height: 1.2; }
.eyebrow-v { font-size: 11px !important; letter-spacing: .24em !important; color: var(--sub); margin-left: 1.4em !important; }
.more { font-size: 12px; display: inline-flex; gap: 10px; align-items: center; border-bottom: 1px solid currentColor; padding-bottom: 6px; }
.links { display: flex; flex-direction: column; gap: 1.6em; font-size: 12px; }
.links a { border-left: 1px solid currentColor; padding-left: 6px; }
/* ねこの線：前の章の線の終わりから、うねって次の章の線の始まりへ。通ったあとは消え、着いた先の線だけが残る */
.thread { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 6; }
.thread path { fill: none; stroke: var(--ink); stroke-width: 1.7px; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0 2; }
/* 動きの型を、ひとつずつの要素にも使えるように */
.m-pop.in .ch { animation: chPop 1s cubic-bezier(.3,.7,.3,1) both; animation-delay: calc(var(--d, 0s) + var(--c) * 85ms); }
.m-draw.in path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur, 1.3s) cubic-bezier(.45,0,.2,1) var(--d, 0s); }
/* 染まる：灰色の文字が、一文字ずつ墨色になる */
.dye .ch { color: #10111326; transition: color .4s; }
.dye.in .ch, .in .dye .ch { color: var(--ink); transition: color .8s ease calc(var(--d, 0s) + var(--c) * 55ms); }
/* 1 大切にしていること */
.enso, .glyph { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.enso path { stroke-width: 2.4px; }
.glyph path { stroke-width: 1.8px; }
.vnum { margin: 0; font-family: var(--mincho); font-size: 13px; letter-spacing: .3em; color: var(--sub); }
.vnum b { display: block; font-weight: 500; font-size: clamp(40px, 4vw, 64px); letter-spacing: .04em; line-height: 1; color: var(--ink); text-combine-upright: all; margin-left: .3em; }
/* 2 Why MYAJO */
.nums { display: grid; grid-template-columns: 1fr 1.6fr 1fr; align-items: end; gap: clamp(12px, 2vw, 32px); height: auto; }
.num { display: grid; justify-items: center; text-align: center; position: relative; }
.num b { font-family: var(--mincho); font-weight: 500; font-size: clamp(56px, 6vw, 96px); line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; filter: blur(14px); opacity: 0; transition: filter .5s, opacity .5s; }
.num--main b { font-size: clamp(120px, 14vw, 220px); }
.in .num b { filter: blur(0); opacity: 1; transition: filter 1.8s cubic-bezier(.2,.7,.2,1) var(--d), opacity 1.2s ease var(--d); }
.num__en { margin-top: 12px; font-size: 11px; letter-spacing: .24em; color: var(--sub); }
.num__ja { margin-top: 4px; font-size: 12px; letter-spacing: .12em; }
.num b { order: 1; } .num__rule { order: 2; width: 100%; height: 10px; margin-top: 12px; overflow: visible; } .num__en { order: 3; } .num__ja { order: 4; }
.quote { margin: 0; display: grid; place-items: center; height: min(80%, 600px); }
.quote p { margin: 0; writing-mode: vertical-rl; font-family: var(--mincho); font-weight: 500; font-size: clamp(22px, 2.1vw, 32px); line-height: 1.9; letter-spacing: .14em; height: 100%; }
.quote .nw { display: block; }
.vname { margin: 0; font-family: var(--mincho); font-size: clamp(16px, 1.4vw, 20px); letter-spacing: .14em; line-height: 2; }
.vname small { display: block; font-family: var(--gothic); font-size: 11px; letter-spacing: .2em; color: var(--sub); margin-left: .8em; }
.vname b { display: block; font-weight: 500; font-size: 13px; letter-spacing: .3em; color: var(--sub); margin-left: 1em; }
/* 3 お悩み */
.idx { display: flex; flex-direction: row-reverse; justify-content: center; gap: clamp(18px, 2.4vw, 36px); }
.idx ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row-reverse; gap: clamp(18px, 2.4vw, 36px); }
.idx li { writing-mode: vertical-rl; font-family: var(--mincho); font-size: clamp(15px, 1.3vw, 19px); letter-spacing: .16em; line-height: 1.8; color: #1011138c; max-height: 100%; }
.idx li b { display: block; font-weight: 500; font-size: 11px; letter-spacing: .2em; color: var(--sub); margin-left: .8em; text-combine-upright: all; }
.idx__rule { width: 10px; height: 100%; overflow: visible; flex: none; }
.shot { margin: 0; display: grid; align-content: center; }
.shot img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: blur(22px) saturate(.6); opacity: 0; scale: 1.05; transition: filter .8s ease, opacity .8s ease, scale .8s ease; }
.shot.in img { filter: blur(0) saturate(1); opacity: 1; scale: 1; transition: filter 1.9s cubic-bezier(.2,.7,.2,1) .9s, opacity 1.2s ease .9s, scale 2.4s cubic-bezier(.2,.7,.2,1) .9s; }
.shot figcaption { margin-top: 12px; font-size: 11px; letter-spacing: .14em; color: var(--sub); opacity: 0; transition: opacity .5s; }
.shot.in figcaption { opacity: 1; transition: opacity 1s ease 2.4s; }
.vq { margin: 0; font-family: var(--mincho); font-weight: 600; font-size: clamp(20px, 2vw, 30px); letter-spacing: .14em; line-height: 1.8; }
.vq b { display: block; font-weight: 500; font-size: 13px; letter-spacing: .3em; color: var(--sub); margin-left: 1em; }
.vq .nw { display: block; }
.va { margin: 0; font-size: clamp(14px, 1.1vw, 17px); letter-spacing: .16em; line-height: 2.1; }
.va .nw { display: block; }
.va a { margin-top: 2em; }
/* 4 サービス：光の映像。窓から画面いっぱいに広がる */
.svc-bg { position: absolute; inset: 0 0 calc(var(--band) * -1) calc(var(--sb) * -1); clip-path: inset(32% 34% 30% 34%); opacity: 0; transition: clip-path .9s cubic-bezier(.7,0,.3,1), opacity .6s ease .3s; }
.svc-bg.in { clip-path: inset(0 0 0 0); opacity: 1; transition: clip-path 1.6s cubic-bezier(.7,0,.2,1) .5s, opacity .5s ease .5s; }
.svc-bg video, .svc-pane video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #fbfaf7c4, #fbfaf733 40%, #fbfaf733 60%, #fbfaf7c4); }
.svc-win { aspect-ratio: 3 / 2; height: auto; }
.svc-frame { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); overflow: visible; }
.svc-pane { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 0 0 100%); transition: clip-path .8s cubic-bezier(.7,0,.3,1); }
.svc-pane.on { clip-path: inset(0 0 0 0); transition: clip-path 1.3s cubic-bezier(.7,0,.2,1) .9s; }
.svc-win:not(.in) .svc-pane { clip-path: inset(0 0 0 100%); }
/* 5 制作実績：奥から手前へ。次へ進むと、こちら側へ抜ける */
.case-win { aspect-ratio: 3 / 2; height: auto; }
.case { aspect-ratio: 3 / 2; height: auto; opacity: 0; scale: .72; filter: blur(8px); transition: opacity .6s ease, scale .8s cubic-bezier(.5,0,.7,.4), filter .6s; }
.case.in { opacity: 1; scale: 1; filter: blur(0); transition: opacity 1s ease var(--d), scale 1.6s cubic-bezier(.16,.84,.24,1) var(--d), filter 1.2s ease var(--d); }
.case.past { opacity: 0; scale: 1.42; filter: blur(10px); }
.case__frame { position: absolute; inset: -12px; width: calc(100% + 24px) !important; height: calc(100% + 24px) !important; width: 100%; height: 100%; overflow: visible; }
.case__in { position: absolute; inset: 1px; display: grid; align-content: center; justify-items: start; gap: 18px; padding: clamp(24px, 4vw, 56px); background: repeating-linear-gradient(135deg, #10111305 0 2px, transparent 2px 9px); }
.case__tag { font-size: 11px; letter-spacing: .2em; border: 1px solid var(--rule); padding: 3px 10px; }
.case__point { margin: 0; font-family: var(--mincho); font-weight: 500; font-size: clamp(18px, 1.9vw, 28px); line-height: 1.7; letter-spacing: .08em; }
.case__point small { display: block; font-family: var(--gothic); font-size: 11px; letter-spacing: .2em; color: var(--sub); margin-bottom: 8px; }
.case__in a { font-size: 12px; letter-spacing: .14em; color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.case__in a i { font-style: normal; margin-left: 8px; }
.case__todo { position: absolute; right: 14px; bottom: 10px; font-size: 10px; letter-spacing: .1em; color: var(--sub); }
/* 6 お客様の声 */
.voices { display: flex; flex-direction: row-reverse; justify-content: center; gap: clamp(28px, 4vw, 64px); width: calc(var(--cw) + 8vw); }
.voices__rule { width: 10px; height: 100%; overflow: visible; flex: none; }
.voice { margin: 0; display: flex; flex-direction: row-reverse; gap: 14px; }
.voice blockquote { margin: 0; }
.voice blockquote p { margin: 0; writing-mode: vertical-rl; font-family: var(--mincho); font-weight: 500; font-size: clamp(17px, 1.6vw, 23px); line-height: 1.9; letter-spacing: .16em; max-height: 100%; height: 100%; }
.voice figcaption { writing-mode: vertical-rl; font-size: 12px; letter-spacing: .14em; align-self: flex-end; }
.voice figcaption small { display: block; color: var(--sub); font-size: 11px; margin-right: .6em; }
/* 7 コラム */
.cols { list-style: none; margin: 0; padding: 0; display: grid; align-content: center; height: auto; width: calc(var(--cw) + 6vw); }
.cols li { position: relative; }
.cols li svg { position: absolute; left: 0; top: 0; width: 100%; height: 4px; overflow: visible; color: var(--ink); }
.cols li:last-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); }
.cols a { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 22px 4px; color: var(--ink); text-decoration: none; }
.cols a span { font-size: 11px; letter-spacing: .14em; color: var(--sub); display: grid; gap: 2px; }
.cols a b { font-family: var(--mincho); font-weight: 500; font-size: clamp(15px, 1.25vw, 18px); letter-spacing: .08em; }
.cols a i { font-style: normal; transition: translate .4s cubic-bezier(.2,.7,.2,1); }
.cols a:hover i { translate: 4px -4px; }
/* 章の目盛り */
.ticks { position: absolute; left: var(--sb); right: 0; bottom: 0; height: var(--band); display: flex; justify-content: space-around; align-items: flex-end; padding: 0 2vw 18px; z-index: 7; }
.tick { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; border: 0; background: none; padding: 0 6px; cursor: pointer; color: #10111352; transition: color .6s; }
.tick span { writing-mode: vertical-rl; font-size: 11px; letter-spacing: .2em; white-space: nowrap; }
.tick i { width: 1px; height: 12px; background: currentColor; transition: height .6s cubic-bezier(.2,.7,.2,1), background .6s; }
.tick:hover, .tick:focus-visible { color: var(--ink); }
.tick[aria-current="step"] { color: var(--ink); }
.tick[aria-current="step"] i { height: 26px; background: var(--mark); }
.ticks__now { display: none; }
.tour__stage:not(.live) .ticks { opacity: 0; }
.ticks { transition: opacity .8s ease; }
@media (max-width: 760px) {
  /* スマホ：主役を上に、言葉は下に横書き。同じ場所に重なる要素は同じ枠に置く */
  html:is(.nav-side, :not(.nav-side)) .tour__stage { --sb: 0px; --band: 54px; --cw: calc(100vw - 32px); }
  .chap { display: grid; grid-template-rows: 18px minmax(0, 38%) auto auto 1fr; padding: 64px 16px 0; row-gap: 14px; }
  .chap .vq { grid-row: 3; } .chap .va { grid-row: 4; }
  .zc, .zr, .zl, .zt, .zb { position: relative; inset: auto; left: auto; right: auto; top: auto; translate: none; writing-mode: horizontal-tb; max-height: none; height: auto; width: auto; }
  .zt { grid-row: 1; align-self: end; justify-self: center; }
  .zc { grid-row: 2; justify-self: center; align-self: center; width: 100%; height: 100%; }
  .zc--sq { width: auto; height: 100%; }
  .zr { grid-row: 3; }
  .zl { grid-row: 4; }
  .zb { grid-row: 5; justify-self: end; align-self: start; }
  .zc, .zr, .zl, .zt, .zb { grid-column: 1; }
  .vh { font-size: 21px; letter-spacing: .08em; line-height: 1.55; }
  .vh .nw { display: inline-block; }
  .vh .en { margin: 0 0 4px; }
  .vb { height: auto; font-size: 13px; line-height: 1.95; letter-spacing: .06em; }
  .vb p { margin: 0 0 .6em; }
  .vb--head h2 { margin: 0 0 8px; font-size: 24px; }
  .eyebrow-v { margin: 0 0 4px !important; }
  .vnum { display: flex; gap: 12px; align-items: baseline; }
  .vnum b { margin: 0; font-size: 36px; }
  .nums { grid-template-columns: 1fr 1.4fr 1fr; align-self: end; }
  .num b { font-size: 40px; } .num--main b { font-size: 84px; }
  .num__ja { font-size: 10px; letter-spacing: .04em; }
  .quote p { writing-mode: horizontal-tb; height: auto; font-size: 21px; line-height: 1.7; text-align: center; }
  .quote .nw { display: inline; }
  .vname small, .vname b { display: inline; margin: 0 10px 0 0; }
  .links { flex-direction: row; flex-wrap: wrap; gap: 10px 18px; }
  .links a, .vb a, .va a { border-left: 0; padding-left: 0; border-bottom: 1px solid currentColor; }
  .idx { flex-direction: column; justify-content: center; }
  .idx ol { flex-direction: column; gap: 6px; }
  .idx li { writing-mode: horizontal-tb; font-size: 14px; }
  .idx li b { display: inline; margin: 0 10px 0 0; }
  .idx__rule { display: none; }
  .vq { font-size: 19px; } .vq b { display: inline; margin: 0 10px 0 0; } .vq .nw { display: inline; }
  .va { font-size: 14px; } .va .nw { display: inline; } .va a { margin: 10px 0 0; }
  .svc-win { width: 100%; height: auto; }
  .case, .case-win { width: 100%; height: 100%; aspect-ratio: auto; align-self: stretch; }
  .shot { height: 100%; display: flex; flex-direction: column; }
  .shot img { flex: 1; min-height: 0; aspect-ratio: auto; }
  .shot figcaption { margin-top: 6px; }
  .chap[data-ch="制作実績"] { grid-template-rows: 18px minmax(0, 44%) auto auto 1fr; }
  .case__in { padding: 20px; gap: 12px; }
  .case__point { font-size: 17px; }
  .voices { width: 100%; height: 100%; gap: 14px; }
  .voice blockquote p { font-size: 15px; letter-spacing: .1em; }
  .voice figcaption { font-size: 11px; }
  .cols { width: 100%; }
  .cols a { grid-template-columns: minmax(0, 1fr) auto; padding: 11px 2px; gap: 2px 12px; }
  .cols a span { grid-column: 1 / -1; display: flex; gap: 12px; }
  .cols a b { font-size: 15px; }
  .chap[data-ch="お客様の声"] { grid-template-rows: 18px auto minmax(0, 1fr) auto 0; }
  .chap[data-ch="コラム"] { grid-template-rows: 18px auto auto auto 1fr; }
  .cols { align-content: start; }
  .cols a span { display: none; }
  .chap[data-ch="お客様の声"] .zr, .chap[data-ch="コラム"] .zr { grid-row: 2; }
  .chap[data-ch="お客様の声"] .zc, .chap[data-ch="コラム"] .zc { grid-row: 3; }
  .chap[data-ch="制作実績"] .zl { grid-row: 3; }
  .chap[data-ch="制作実績"] .zl p:not(.eyebrow-v), .chap[data-ch="制作実績"] .zl a { display: none; }
  .chap[data-ch="制作実績"] .zr { grid-row: 4; }
  .ticks { padding: 0 16px 14px; justify-content: flex-start; gap: 10px; align-items: flex-end; }
  .tick { padding: 0; }
  .tick span { display: none; }
  .tick i { height: 10px; }
  .tick[aria-current="step"] i { height: 20px; }
  .ticks__now { display: block; position: absolute; right: 16px; bottom: 12px; margin: 0; font-size: 11px; letter-spacing: .16em; z-index: 7; }
}
@media (prefers-reduced-motion: reduce) {
  .shot img, .case, .svc-bg, .svc-pane, .num b { transition: none !important; }
  .thread { display: none; }
}
/* ───── 普通に流れる章：一度に並べ、画面に入ったら短く動く ───── */
.flow { position: relative; z-index: 1; background: var(--ground); }

/* v155 案2（参考A「中央に実物を1つ」）：実績の帯は流れたまま、中央を通る1件が主役。両側は少し小さく薄く（ぼかしは使わない＝画像の並ぶ帯で重くなるため）。
   --f は中央に近いほど1（スクリプトが毎フレーム計算）。マウスを載せた実績は場所に関係なく主役 */
.loop--works .lw { --f: 1; scale: calc(.9 + .1 * var(--f)); opacity: calc(.55 + .45 * var(--f)); transform-origin: 50% 35%; transition: scale .25s linear, opacity .25s linear; }
.loop--works .lw:hover, .loop--works .lw:focus-within, .loop--works .lw:has(a.is-hov) { --f: 1 !important; }
@media (prefers-reduced-motion: reduce) { .loop--works .lw { scale: none; opacity: 1; } }
/* v156 中盤の境目をそろえる（案1を全体へ）：章の下端が画面の上2割を過ぎたら、その章の中身がぼけて紙に溶ける。戻ると元に戻る。
   実績と声の帯は画像が多くぼかしが重いので、薄くなるだけ */
.flow > .sec > :not(.svc2__bg) { transition: filter .9s cubic-bezier(.2,.7,.2,1), opacity .9s ease; }
.flow > .sec.is-melt > :not(.svc2__bg) { filter: blur(6px); opacity: .2; }
.flow > .sec--loop.is-melt > * { filter: none; opacity: .15; }
.flow > .sec--svc2.is-melt > .svc2__bg { opacity: .2; transition: opacity 1.2s ease; }
@media (prefers-reduced-motion: reduce) { .flow > .sec.is-melt > * { filter: none; opacity: 1; } }
/* v155 中盤の試作（案1・参考A「製品がぼけて地に溶ける」）：表紙の章から普通のスクロールへの境目。
   紙が下から硬い線で上がってくるのをやめ、境目をもやのように溶かす。紙が画面の下3割まで来たら、表紙の中身（大切にしていること）がぼけて紙に溶ける（一度だけ動き、戻ると元に戻る） */
.flow::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: clamp(120px, 24svh, 260px); background: linear-gradient(to bottom, rgb(251 250 247 / 0), rgb(251 250 247 / .55) 45%, var(--ground) 92%); pointer-events: none; }
.fv :is(.lgo, .lg) { transition: filter .9s cubic-bezier(.2,.7,.2,1), opacity .9s ease, scale 1.1s cubic-bezier(.2,.7,.2,1); }
.fv.is-melt :is(.lgo, .lg) { filter: blur(7px); opacity: .25; scale: 1.015; }
@media (prefers-reduced-motion: reduce) { .fv.is-melt :is(.lgo, .lg) { filter: none; opacity: 1; scale: none; } }
.nav-side .flow { padding-left: 84px; }
.sec { padding: clamp(88px, 11vw, 150px) max(clamp(20px, 4.4vw, 64px), calc((100% - 1200px) / 2)); }
.sec + .sec { border-top: 1px solid var(--faint); }
.sec__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.sh__eye { margin: 0 0 16px; font-size: 12px; letter-spacing: .24em; color: var(--sub); }
.sh__title { margin: 0; font-family: var(--mincho); font-weight: 600; font-size: clamp(28px, 3.1vw, 46px); line-height: 1.55; letter-spacing: .08em; word-break: keep-all; }
.sh__title .nw { display: inline-block; }
.sh__rule { display: block; width: 120px; height: 10px; margin: 18px 0 22px; color: var(--mark); overflow: visible; }
.sh__rule path { stroke-width: 1.6px; }
.sh__lead { margin: 0 0 26px; max-width: 34em; line-height: 2.05; letter-spacing: .06em; word-break: normal; }
.sh--row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(40px, 6vw, 96px); align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.sh--row .sh__lead { margin-bottom: 18px; }
.flow .more { font-size: 12px; }
/* 動きは短く：もやは0.9秒、文字は少しずつ詰めて出す */
.flow .in .m-mist { transition: opacity .9s ease, filter 1s cubic-bezier(.2,.7,.2,1), translate 1s cubic-bezier(.2,.7,.2,1), --r 1.2s cubic-bezier(.3,.6,.2,1); transition-delay: var(--d, 0s); }
.flow .in .m-pop .ch { animation-duration: .8s; animation-delay: calc(var(--d, 0s) + var(--c) * 34ms); }
.flow .in .dye .ch { transition: color .6s ease calc(var(--d, 0s) + var(--c) * 20ms); }
.flow .m-draw path { vector-effect: none; }
/* 大切にしていること：3つの段階。線が円と図を描く */
.steps3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 36px); }
.steps3 li { display: grid; gap: 10px; align-content: start; }
.steps3 svg { width: 100%; max-width: 220px; aspect-ratio: 1; overflow: visible; margin-bottom: 8px; }
.steps3 path { stroke-width: 2.2px; } .steps3 path.o { stroke-width: 2.6px; opacity: .9; }
.steps3 b { font-weight: 500; font-size: 11px; letter-spacing: .22em; color: var(--sub); }
.steps3 h3 { margin: 0; font-family: var(--mincho); font-weight: 600; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.7; letter-spacing: .08em; }
.steps3 b, .steps3 h3 { opacity: 0; translate: 0 10px; transition: opacity .5s, translate .5s; }
.steps3.in b, .steps3.in h3 { opacity: 1; translate: 0 0; transition: opacity .8s ease calc(.5s + var(--k) * .15s), translate .9s cubic-bezier(.2,.7,.2,1) calc(.5s + var(--k) * .15s); }
/* Why MYAJO */
.why .nums { display: grid; grid-template-columns: 1fr 1.6fr 1fr; align-items: end; gap: clamp(12px, 2vw, 32px); padding-bottom: 26px; border-bottom: 1px solid var(--rule); }
.why .num b { transition: filter .4s, opacity .4s; }
.why.in .num b { filter: blur(0); opacity: 1; transition: filter 1s cubic-bezier(.2,.7,.2,1) var(--d), opacity .7s ease var(--d); }
.why .num--main b { font-size: clamp(110px, 12vw, 190px); }
.why__note { margin: 14px 0 34px; font-size: 11px; line-height: 1.9; letter-spacing: .06em; color: var(--sub); }
.why__voice { margin: 0 0 26px; padding: 26px 0 0; border-top: 1px solid var(--ink); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 32px; align-items: end; }
.why__voice blockquote { margin: 0; font-family: var(--mincho); font-weight: 500; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.75; letter-spacing: .06em; }
.why__voice figcaption { font-size: 13px; letter-spacing: .1em; display: grid; gap: 6px; justify-items: end; text-align: right; }
.why__voice small { font-size: 11px; letter-spacing: .2em; color: var(--sub); }
.why__voice a { color: var(--ink); text-decoration: none; font-size: 12px; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.why__voice a i { font-style: normal; margin-left: 6px; }
.flow .links { flex-direction: row; flex-wrap: wrap; gap: 14px 28px; }
.flow .links a { border-left: 0; padding: 0 0 4px; border-bottom: 1px solid currentColor; }
/* お悩み：4つを一度に。事例の画面がピントを結ぶ */
.cons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.cons a { position: relative; display: grid; gap: 10px; align-content: start; color: var(--ink); text-decoration: none; height: 100%; padding-bottom: 26px; border-bottom: 1px solid var(--rule); }
.shot2 { display: block; overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: 8px; background: var(--faint); }
.shot2 img { display: block; width: 100%; height: 100%; object-fit: cover; filter: blur(16px) saturate(.6); opacity: 0; scale: 1.06; transition: filter .4s, opacity .4s, scale .4s; }
.cons.in .shot2 img { filter: blur(0) saturate(1); opacity: 1; scale: 1; transition: filter 1s cubic-bezier(.2,.7,.2,1) calc(var(--k) * .12s), opacity .7s ease calc(var(--k) * .12s), scale 1.4s cubic-bezier(.2,.7,.2,1) calc(var(--k) * .12s); }
.cons a:hover .shot2 img { scale: 1.04; transition: scale .8s cubic-bezier(.2,.7,.2,1); }
.cons b { font-family: var(--mincho); font-weight: 500; font-size: 13px; letter-spacing: .2em; color: var(--sub); }
.cons h3 { margin: 0; font-family: var(--mincho); font-weight: 600; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.65; letter-spacing: .06em; }
.cons p { margin: 0; font-size: 13px; line-height: 1.85; color: #3c3b38; padding-left: 14px; position: relative; }
.cons p::before { content: ""; position: absolute; left: 0; top: .95em; width: 8px; height: 1px; background: var(--mark); }
.cons i { position: absolute; right: 2px; bottom: 6px; font-style: normal; font-size: 12px; transition: translate .4s cubic-bezier(.2,.7,.2,1); }
.cons a:hover i { translate: 3px -3px; }
.cons b, .cons h3, .cons p { opacity: 0; translate: 0 10px; transition: opacity .4s, translate .4s; }
.cons.in b, .cons.in h3, .cons.in p { opacity: 1; translate: 0 0; transition: opacity .8s ease calc(.25s + var(--k) * .12s), translate .9s cubic-bezier(.2,.7,.2,1) calc(.25s + var(--k) * .12s); }
/* 制作実績：3件を一度に */
.works { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 36px); }
.works a { display: grid; gap: 12px; align-content: start; color: var(--ink); text-decoration: none; }
.works__img { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; background: repeating-linear-gradient(135deg, #10111306 0 2px, transparent 2px 9px); }
.works__img svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.works__img path { stroke-width: 1.4px; }
.works li:nth-child(1) .works__img path { --d: .1s; } .works li:nth-child(2) .works__img path { --d: .25s; } .works li:nth-child(3) .works__img path { --d: .4s; }
.works__img path { --dur: .9s; }
.works__img em { font-style: normal; font-size: 11px; letter-spacing: .1em; color: var(--sub); }
.works__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 11px; letter-spacing: .1em; color: var(--sub); margin-top: 6px; }
.works__meta b { font-family: var(--mincho); font-weight: 500; font-size: 13px; letter-spacing: .2em; color: var(--ink); }
.works .tag { border: 1px solid var(--rule); padding: 1px 8px; }
.works h3 { margin: 0; font-family: var(--mincho); font-weight: 600; font-size: clamp(17px, 1.45vw, 21px); letter-spacing: .08em; }
.works p { margin: 0; font-size: 13px; line-height: 1.9; }
.works p small { display: block; font-size: 11px; letter-spacing: .2em; color: var(--sub); margin-bottom: 2px; }
.works__img em, .works__meta, .works h3, .works p { opacity: 0; translate: 0 10px; transition: opacity .4s, translate .4s; }
.works.in .works__img em, .works.in .works__meta, .works.in h3, .works.in p { opacity: 1; translate: 0 0; transition: opacity .8s ease calc(.45s + var(--k) * .12s), translate .9s cubic-bezier(.2,.7,.2,1) calc(.45s + var(--k) * .12s); }
.works a:hover h3 { color: var(--mark); }
/* お客様の声：縦書き3列 */
.sec__grid--voice { grid-template-columns: minmax(0, .8fr) minmax(0, 1.35fr); }
.voices2 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: clamp(20px, 3vw, 48px); }
.voices2 li { border-right: 1px solid var(--rule); padding-right: clamp(14px, 1.6vw, 24px); }
.voices2 a { display: flex; flex-direction: row-reverse; gap: 16px; color: var(--ink); text-decoration: none; height: 100%; }
.voices2 blockquote { margin: 0; writing-mode: vertical-rl; font-family: var(--mincho); font-weight: 500; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.95; letter-spacing: .16em; height: 22em; max-height: 440px; }
.v2__who { writing-mode: vertical-rl; font-size: 12px; letter-spacing: .14em; align-self: flex-end; display: flex; gap: 8px; }
.v2__who small { color: var(--sub); font-size: 11px; }
.v2__who i { font-style: normal; font-size: 10px; letter-spacing: .2em; color: var(--sub); margin-top: 1.4em; }
.voices2 a:hover i { color: var(--ink); }
/* コラム */
.cols--flow { width: auto; }
.cols--flow a { grid-template-columns: 9em minmax(0, 1fr) auto; }
@media (max-width: 960px) {
  .cons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .nav-side .flow { padding-left: 0; }
  .sec { padding: 72px 16px; }
  .sec__grid, .sec__grid--voice, .sh--row { grid-template-columns: 1fr; gap: 32px; }
  .sh--row { gap: 0; margin-bottom: 28px; }
  .sh__title { font-size: 25px; }
  .sh__rule { margin: 14px 0 16px; width: 96px; }
  .sh__lead { font-size: 13.5px; line-height: 1.95; margin-bottom: 18px; }
  .steps3 { gap: 10px; }
  .steps3 h3 { font-size: 13px; line-height: 1.6; letter-spacing: .02em; }
  .steps3 h3 br { display: none; }
  .steps3 b { font-size: 9.5px; letter-spacing: .12em; }
  .why .num b { font-size: 44px; } .why .num--main b { font-size: 92px; }
  .why .num__ja { font-size: 10px; letter-spacing: .02em; }
  .why__voice { grid-template-columns: 1fr; }
  .why__voice figcaption { justify-items: start; text-align: left; }
  .cons { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
  .cons h3 { font-size: 14.5px; }
  .cons p { font-size: 12px; }
  .works { grid-template-columns: 1fr; gap: 36px; }
  .voices2 { flex-direction: column; gap: 22px; }
  .voices2 li { border-right: 0; border-top: 1px solid var(--rule); padding: 18px 0 0; }
  .voices2 a { flex-direction: column; gap: 10px; }
  .voices2 blockquote, .v2__who { writing-mode: horizontal-tb; height: auto; }
  .voices2 blockquote { font-size: 17px; line-height: 1.8; letter-spacing: .06em; }
  .v2__who { align-self: flex-start; flex-wrap: wrap; }
  .v2__who i { margin: 0 0 0 auto; }
  .cols--flow a { grid-template-columns: minmax(0, 1fr) auto; }
  .cols--flow a span { display: flex !important; grid-column: 1 / -1; gap: 12px; }
}
/* サービス欄だけは固定のまま（2つの柱が窓の中で入れ替わる） */
.tour--svc .ticks, .tour--svc .ticks__now { display: none; }
.tour--svc .tour__stage { --band: 0px; }
@media (max-width: 760px) { .tour--svc .chap { padding-bottom: 24px; } }
/* スマホ：サービス欄の枠線が見出しにかからないよう、窓を少し内側に収めて下に余白 */
@media (max-width: 760px) {
  .tour--svc .chap--svc { grid-template-rows: 18px auto auto auto 1fr; row-gap: 14px; }
  .tour--svc .svc-win { width: calc(100% - 24px); justify-self: center; margin: 14px 0 12px; }
}
/* ───── v33b ───── */
/* 大切にしていること：トップではリストで手短に */
.care3 { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); align-self: center; }
.care3 li { display: grid; grid-template-columns: 3.4em 7.5em minmax(0, 1fr); align-items: baseline; gap: 4px 16px; padding: clamp(22px, 2.4vw, 32px) 4px; border-top: 1px solid var(--rule); }
.care3 b { font-family: var(--mincho); font-weight: 500; font-size: 14px; letter-spacing: .2em; }
.care3__en { font-size: 11px; letter-spacing: .24em; color: var(--sub); }
.care3 h3 { margin: 0; font-family: var(--mincho); font-weight: 600; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.6; letter-spacing: .08em; }
.care3 li { opacity: 0; translate: 0 12px; transition: opacity .4s, translate .4s; }
.care3.in li { opacity: 1; translate: 0 0; transition: opacity .8s ease calc(.25s + var(--k) * .12s), translate .9s cubic-bezier(.2,.7,.2,1) calc(.25s + var(--k) * .12s); }
/* Why MYAJO：縦組みの一画面（固定しない） */
.sec--whyv { padding: 0; }
.whyv__stage { --cw: min(40vw, 600px); --gap: clamp(28px, 3.4vw, 56px); position: relative; height: calc(100svh - var(--th, 48px)); min-height: 600px; max-height: 960px; }
.whyv .zt { top: 7%; }
/* 制作実績とお客様の声：2本の帯が互い違いに流れる */
.sec--loop { padding: clamp(40px, 5vw, 72px) 0 clamp(72px, 8vw, 120px); display: grid; gap: clamp(16px, 1.8vw, 26px); overflow: hidden; }
.loop { --w: clamp(250px, 23vw, 350px); --g: clamp(14px, 1.5vw, 22px); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.loop__track { list-style: none; margin: 0; padding: 0 var(--g) 0 0; display: flex; align-items: flex-start; gap: var(--g); width: max-content; animation: loopL var(--sp, 80s) linear infinite; }
.loop--voices .loop__track { animation-name: loopR; }
@keyframes loopL { from { translate: 0 0; } to { translate: -50% 0; } }
@keyframes loopR { from { translate: -50% 0; } to { translate: 0 0; } }
.loop:hover .loop__track, .loop:focus-within .loop__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .loop__track { animation: none; } .loop { overflow-x: auto; } }
.loop { opacity: 0; translate: 0 18px; transition: opacity .5s, translate .5s; }
.loop.in { opacity: 1; translate: 0 0; transition: opacity 1s ease, translate 1.1s cubic-bezier(.2,.7,.2,1); }
.loop--voices.in { transition-delay: .15s; }
.loop a { color: var(--ink); text-decoration: none; }
.lw { width: var(--w); flex: none; }
.lw a { display: grid; gap: 10px; }
.lw img { display: block; width: 100%; height: auto; aspect-ratio: 640 / 332; object-fit: cover; outline: 1px solid var(--faint); transition: scale .8s cubic-bezier(.2,.7,.2,1), filter .6s; }
.lw span { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .24em; color: var(--sub); }
.lw i { font-style: normal; }
.lw a:hover img { scale: 1.03; }
.lc { width: calc(var(--w) * 1.12); flex: none; }
.lc a { box-sizing: border-box; height: calc(var(--w) * 332 / 640); display: flex; flex-direction: column; justify-content: space-between; padding: clamp(14px, 1.4vw, 20px) clamp(16px, 1.6vw, 22px); background: var(--ink); color: var(--ground); transition: background .4s; }
.lc__tag { font-size: 10px; letter-spacing: .2em; opacity: .7; }
.lc p { margin: 0; font-family: var(--mincho); font-weight: 500; font-size: clamp(13px, 1.02vw, 15px); line-height: 1.75; letter-spacing: .06em; }
.lc p small { display: block; font-family: var(--gothic); font-size: 10px; letter-spacing: .2em; opacity: .6; margin-bottom: 4px; }
.lc__who { font-size: 12px; letter-spacing: .1em; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.lc__who small { font-size: 10px; opacity: .6; }
.lc a:hover { background: #2a2b2e; }
.loop--voices { --w: clamp(300px, 30vw, 460px); }
.lv { width: var(--w); flex: none; }
.lv a { box-sizing: border-box; display: grid; gap: 16px; padding: clamp(20px, 2vw, 28px) clamp(20px, 2vw, 30px); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); min-height: 100%; }
.lv blockquote { margin: 0; font-family: var(--mincho); font-weight: 500; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.85; letter-spacing: .06em; }
.lv__who { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 12px; letter-spacing: .1em; }
.lv__who small { font-size: 11px; color: var(--sub); }
.lv__who i { margin-left: auto; font-style: normal; font-size: 10px; letter-spacing: .2em; color: var(--sub); }
.lv a:hover i { color: var(--ink); }
.loop__links { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: flex-end; padding: 8px max(clamp(20px, 4.4vw, 64px), calc((100% - 1200px) / 2)) 0; }
@media (max-width: 760px) {
  .care3 li { grid-template-columns: 2.6em minmax(0, 1fr); padding: 18px 2px; }
  .care3__en { grid-column: 2; grid-row: 1; }
  .care3 h3 { grid-column: 2; font-size: 17px; }
  .care3 b { grid-row: 1 / 3; }
  .whyv__stage { height: auto; min-height: 0; max-height: none; display: grid; row-gap: 18px; padding: 72px 16px 40px; }
  .whyv .zt { grid-row: 1; justify-self: start; text-align: left; }
  .whyv .zr { grid-row: 2; } .whyv .zl { grid-row: 3; } .whyv .zc { grid-row: 4; width: 100%; height: auto; margin-top: 18px; }
  .loop { --w: 220px; }
  .loop--voices { --w: 270px; }
  .lc { width: 260px; } .lc a { height: auto; min-height: calc(220px * 332 / 640); gap: 8px; }
  .lc p { font-size: 13px; line-height: 1.65; }
  .lv blockquote { font-size: 15px; }
  .loop__links { justify-content: flex-start; padding: 8px 16px 0; }
}
/* スマホの制作実績・お客様の声：自動で流さず、画面幅に近い大きなカードを指で横に送る（次のカードの端を見せて、送れることを伝える） */
@media (max-width: 760px) {
  .loop { -webkit-mask-image: none; mask-image: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .loop::-webkit-scrollbar { display: none; }
  .loop__track { animation: none !important; padding: 0 20px; gap: 14px; }
  .loop { scroll-snap-type: none; } /* v154 スマホもPCと同じく自動で流す（指で送ることもできる）。つなぎ目のため複製も出す */
  .lw, .lc { width: 80vw; }
  .lw a { gap: 12px; }
  .lw span { font-size: 11px; color: var(--ink); }
  .lc a { height: auto; min-height: calc(80vw * 332 / 640); padding: 20px 22px; gap: 12px; }
  .lc p { font-size: 15px; line-height: 1.75; }
  .lc__tag, .lc p small { font-size: 11px; }
  .lc__who { font-size: 13px; }
  .lv { width: 84vw; }
  .lv a { padding: 24px 22px; gap: 20px; }
  .lv blockquote { font-size: 17px; line-height: 1.85; }
  .lv__who { font-size: 13px; } .lv__who small { font-size: 12px; } .lv__who i { font-size: 11px; color: var(--ink); }
  .loop__links { gap: 14px; padding: 18px 20px 0; flex-direction: column; align-items: flex-start; }
  .loop__links .more { font-size: 14px; padding: 6px 0; }
}
/* Why MYAJOのすぐ下に帯を続ける */
.sec--whyv + .sec--loop { border-top: 0; padding-top: 0; }
@media (min-width: 761px) { .whyv__stage { height: calc(88svh - var(--th, 48px)); } }
.loop--voices .loop__track { align-items: stretch; }
.lv { display: flex; } .lv a { flex: 1; align-content: space-between; }
/* ───── v34 サービス欄：普通にスクロール ───── */
.sec--svc2 { position: relative; overflow: hidden; isolation: isolate; }
.svc2__bg { position: absolute; inset: 0; z-index: -1; opacity: .5; }
.svc2__bg video { width: 100%; height: 100%; object-fit: cover; }
.svc2__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ground) 0%, rgb(251 250 247 / .6) 14%, transparent 42%, transparent 62%, rgb(251 250 247 / .6) 86%, var(--ground) 100%); } /* v156 地の灰色は、上下ともじんわり紙から湧いて紙へ戻る */
.svc2 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.svc2 a { display: grid; gap: 12px; align-content: start; color: var(--ink); text-decoration: none; }
.svc2__win { position: relative; display: block; aspect-ratio: 3 / 2; margin-bottom: 10px; }
.svc2__win video { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: cover; clip-path: inset(0 0 0 100%); transition: clip-path .5s; }
.svc2.in .svc2__win video { clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(.7,0,.2,1) calc(.7s + var(--k) * .15s); }
.svc2__win svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.svc2__win path { stroke-width: 1.4px; }
.svc2__en { font-size: 11px; letter-spacing: .24em; color: var(--sub); }
.svc2 h3 { margin: 0; font-family: var(--mincho); font-weight: 600; font-size: clamp(22px, 2.1vw, 30px); letter-spacing: .1em; }
.svc2 p { margin: 0; font-size: 14px; line-height: 2; letter-spacing: .05em; max-width: 34em; }
.svc2__more { justify-self: start; margin-top: 6px; font-size: 12px; letter-spacing: .14em; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.svc2__more i { font-style: normal; margin-left: 6px; display: inline-block; transition: translate .4s cubic-bezier(.2,.7,.2,1); }
.svc2 a:hover .svc2__more i { translate: 3px -3px; }
.svc2__en, .svc2 h3, .svc2 p, .svc2__more { opacity: 0; translate: 0 10px; transition: opacity .4s, translate .4s; }
.svc2.in .svc2__en, .svc2.in h3, .svc2.in p, .svc2.in .svc2__more { opacity: 1; translate: 0 0; transition: opacity .8s ease calc(.9s + var(--k) * .15s), translate .9s cubic-bezier(.2,.7,.2,1) calc(.9s + var(--k) * .15s); }
@media (max-width: 760px) {
  .svc2 { grid-template-columns: 1fr; gap: 44px; }
  .svc2 p { font-size: 13.5px; line-height: 1.95; }
  .svc2__win video { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
}
/* v40 コラム：アイキャッチを切らずに見せる（WordPressのアイキャッチ 1024×538 の比率のまま） */
.cols--flow a { grid-template-columns: clamp(150px, 15vw, 220px) minmax(0, 1fr) auto; grid-template-areas: "eye meta arrow" "eye title arrow"; align-items: center; gap: 6px clamp(16px, 2vw, 28px); padding: 18px 4px; }
.cols--flow .cols__eye { grid-area: eye; position: relative; display: grid; place-items: center; aspect-ratio: 1024 / 538; background: repeating-linear-gradient(135deg, #10111308 0 2px, transparent 2px 9px); outline: 1px solid var(--faint); overflow: hidden; }
.cols--flow .cols__eye img { width: 100%; height: 100%; object-fit: contain; transition: scale .8s cubic-bezier(.2,.7,.2,1); }
.cols--flow .cols__eye em { font-style: normal; font-size: 10px; letter-spacing: .14em; color: var(--sub); }
.cols--flow a:hover .cols__eye img { scale: 1.03; }
.cols--flow a > span:not(.cols__eye) { grid-area: meta; align-self: end; display: flex; gap: 12px; }
.cols--flow a > b { grid-area: title; align-self: start; }
.cols--flow a > i { grid-area: arrow; }
@media (max-width: 760px) {
  .cols--flow a { grid-template-columns: 112px minmax(0, 1fr) auto; padding: 14px 2px; gap: 4px 12px; }
  .cols--flow a > span:not(.cols__eye) { display: flex; }
}
/* v41 創業年：4桁なので両脇の数字より小さめに */
.whyv .num--year b { font-size: clamp(40px, 4.3vw, 70px); }
@media (max-width: 760px) { .whyv .num--year b { font-size: 30px; } }

/* v34 ロゴの場面②：コピーの下に3項目のリスト → スクロールで罫線が上下に開き、図と説明が現れる */
.after-logo .scrolly { height: calc((100svh - var(--th, 48px)) * 5.7); }
.after-logo .scrolly + .flow { margin-top: calc((100svh - var(--th, 48px)) * -1); z-index: 2; box-shadow: 0 -30px 70px #1011130f, 0 -1px 0 #1011131a; }
.after-logo .fv { transform: translate3d(0, calc(var(--cov, 0) * -14%), 0) scale(calc(1 - var(--cov, 0) * .04)); transform-origin: 50% 0; }
.shot2 img { height: 114%; margin-top: -7%; }
.after-logo .fv::after { content: ""; position: absolute; inset: 0; z-index: 40; background: var(--ground); opacity: calc(var(--cov, 0) * .7); pointer-events: none; }
.after-logo .lg { top: 13%; }
.lgk { width: min(720px, 100%); margin: clamp(26px, 3.2vw, 44px) auto 0; text-align: left; }
.lgk__rule { display: block; height: 1px; background: var(--ink); opacity: .35; transform-origin: 50% 50%; scale: 0 1; transition: scale .4s, translate .5s, opacity .4s; }
.in .lgk__rule { scale: 1 1; transition: scale 1.1s cubic-bezier(.6,0,.2,1) var(--d); }
.lgk__row { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); align-items: baseline; padding: clamp(14px, 1.6vw, 20px) 6px; }
.lgk__row b { font-family: var(--mincho); font-weight: 500; font-size: 14px; letter-spacing: .16em; }
.lgk__row span { font-size: 11px; letter-spacing: .24em; color: var(--sub); }
.lgk__row h3 { margin: 0; font-family: var(--mincho); font-weight: 600; font-size: clamp(15px, 1.25vw, 19px); letter-spacing: .08em; line-height: 1.6; }
/* 開く：コピーとリストは退き、罫線は画面の外へ上下に飛ぶ */
.lg > *, .lgs > *, .lgk__row { transition-property: opacity, filter, translate, -webkit-mask-image; }
.lg.is-open .lg__mark { opacity: 0 !important; transition: opacity .4s ease; }
.lg.is-open .lgs > :not(.lgk), .lg.is-open .lgk__row { opacity: 0 !important; filter: blur(6px) !important; translate: 0 -14px !important; transition: opacity .45s ease, filter .45s ease, translate .6s ease !important; }
.lg.is-open .lgk__rule { opacity: .55; scale: 2.6 1; translate: 0 calc(var(--dir) * 72svh); transition: scale 1s cubic-bezier(.7,0,.2,1) calc(.08s + var(--o) * .07s), translate 1s cubic-bezier(.7,0,.2,1) calc(.08s + var(--o) * .07s), opacity 1s ease .3s; }
.lgk__rule[style*="--r:0"], .lgk__rule[style*="--r:1"] { --dir: -1; }
.lgk__rule[style*="--r:2"], .lgk__rule[style*="--r:3"] { --dir: 1; }
.lgk__rule[style*="--r:0"], .lgk__rule[style*="--r:3"] { --o: 0; }
.lgk__rule[style*="--r:1"], .lgk__rule[style*="--r:2"] { --o: 1; }
.lgo { display: none; position: absolute; z-index: 22; left: 0; right: 0; top: 0; bottom: 0; padding: clamp(84px, 11svh, 120px) clamp(24px, 6vw, 96px) clamp(28px, 4svh, 48px); flex-direction: column; justify-content: center; pointer-events: none; }
.after-logo .lgo { display: flex; }
.lgo.in { pointer-events: auto; }
.lgo__eye { margin: 0 0 clamp(26px, 4svh, 48px); text-align: center; font-size: clamp(12px, .95vw, 14px); letter-spacing: .24em; color: var(--sub); }
.lgo__list { list-style: none; margin: 0 auto; padding: 0; width: min(1180px, 100%); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lgo__list li { position: relative; display: grid; align-content: start; justify-items: center; gap: 12px; padding: 0 clamp(18px, 2.6vw, 40px); text-align: left; }
.lgo__list li + li::before { content: ""; position: absolute; left: 0; top: 8%; bottom: 0; width: 1px; background: var(--rule); transform-origin: 50% 0; scale: 1 0; transition: scale .4s; }
.lgo.in .lgo__list li + li::before { scale: 1 1; transition: scale 1.1s cubic-bezier(.6,0,.2,1) calc(.6s + var(--k) * .1s); }
.lgo__list .lgo__ic { width: clamp(110px, 10vw, 156px); height: auto; aspect-ratio: 1; overflow: visible; margin-bottom: 14%; }
.lgo__ic { position: relative; display: block; aspect-ratio: 1; margin: 14% 0; } /* 円はアイコンの外側へ広げて、絵との間に余白をとる */ /* 鉛筆画のアイコン（修正版04）を、細い正円と放射線で囲む */
.lgo__ic img { position: absolute; inset: 14%; width: 72%; height: 72%; object-fit: contain; }
.lgo__ic svg { position: absolute; inset: -17%; width: 134%; height: 134%; overflow: visible; color: var(--mark); }
.lgo__ic svg path { stroke-width: 1px; } .lgo__ic svg path.t { opacity: .7; } /* 細い正円と放射線（コンセプトの円盤と同じ線） */
.lgo__no { justify-self: stretch; font-size: 11px; letter-spacing: .24em; color: var(--sub); }
.lgo__no b { font-family: var(--mincho); font-weight: 500; font-size: 14px; letter-spacing: .16em; color: var(--ink); margin-right: 12px; }
.lgo__list h3 { justify-self: stretch; margin: 0; font-family: var(--mincho); font-weight: 600; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.65; letter-spacing: .06em; }
.lgo__list p { margin: 0; font-size: clamp(12.5px, .92vw, 14px); line-height: 2; letter-spacing: .04em; }
.lgo__foot { display: flex; justify-content: center; align-items: flex-end; gap: 32px; margin-top: clamp(24px, 4svh, 44px); position: relative; }
.lgo__more { font-size: 12px; letter-spacing: .14em; color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.lgo__more i { font-style: normal; margin-left: 6px; }
.lgo__next { position: absolute; right: 0; bottom: 0; display: grid; justify-items: center; gap: 8px; font-size: 11px; letter-spacing: .2em; color: var(--sub); }
.lgo__next svg { width: 10px; height: 30px; overflow: visible; }
@media (max-height: 820px) and (min-width: 761px) { .lgo__list p { line-height: 1.8; } .lgo__list .lgo__ic { width: 96px; } .after-logo .lg { top: 10%; } }
@media (max-width: 760px) {
  .lgk { margin-top: 16px; }
  .lgk__row { grid-template-columns: 2.4em minmax(0, 1fr); padding: 10px 2px; gap: 0 4px; }
  .lgk__row span { display: none; }
  .lgk__row h3 { font-size: 13.5px; letter-spacing: .04em; }
  .lgo { padding: 76px 16px 16px; justify-content: flex-start; }
  .lgo__eye { margin-bottom: 14px; }
  .lgo__list { grid-template-columns: 1fr; gap: 14px; }
  .lgo__list li { grid-template-columns: 56px minmax(0, 1fr); justify-items: stretch; gap: 2px 14px; padding: 14px 0 0; border-top: 1px solid var(--rule); }
  .lgo__list li + li::before { display: none; }
  .lgo__list li { transition: border-color .4s; } .lgo:not(.in) .lgo__list li { border-top-color: transparent; } .lgo.in .lgo__list li { transition: border-color 1s ease calc(.4s + var(--k) * .12s); }
  .lgo__list .lgo__ic { width: 56px; grid-row: 1 / 4; margin: 0; }
  .lgo__list { gap: 10px; }
  .lgo__list li { grid-template-columns: 44px minmax(0, 1fr); padding-top: 10px; }
  .lgo__list .lgo__ic { width: 44px; }
  .lgo__no { font-size: 10px; } .lgo__no b { font-size: 12px; }
  .lgo__list h3 { font-size: 13.5px; line-height: 1.45; letter-spacing: .03em; }
  .lgo__list p { font-size: 11px; line-height: 1.6; letter-spacing: 0; }
  .lgo__foot { justify-content: flex-start; margin-top: 16px; }
  .lgo__next { display: none; }
}
@media (min-width: 761px) and (max-width: 1100px) and (max-aspect-ratio: 4/5) {
  /* 縦長のタブレット：3列だと見出しが3〜4行に割れるので、絵を左に置いた1列に */
  .lgo__list { grid-template-columns: 1fr; width: min(600px, calc(100% - 190px)); translate: 42px 0; } /* 左の細いナビの分だけ右へ */
  .lgo__list li { grid-template-columns: 88px minmax(0, 1fr); justify-items: stretch; gap: 4px 26px; padding: 24px 0; border-top: 1px solid var(--rule); }
  .lgo__list li + li::before { display: none; }
  .lgo__list .lgo__ic { width: 88px; grid-row: 1 / 4; margin: 0; }
  .lgo__list h3 { font-size: 18px; }
  .lgo__list p { font-size: 13.5px; line-height: 1.9; }
}
@media (max-width: 760px) and (max-height: 780px) {
  .lgo__eye { display: none; }
  .lgo__list p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
}

/* v40 FVのボタン */
.copy__cta { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: clamp(22px, 2.6vw, 36px); pointer-events: auto; }
.cbtn { display: inline-flex; align-items: center; gap: 14px; padding: 15px 22px 15px 26px; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); background: #fbfaf7cc; text-decoration: none; font-size: 13px; letter-spacing: .14em; transition: background .4s, color .4s; }
.cbtn i { font-style: normal; display: inline-block; transition: translate .4s cubic-bezier(.2,.7,.2,1); }
.cbtn:hover i { translate: 3px -3px; }
.cbtn--fill { background: var(--ink); color: var(--ground); }
.cbtn:not(.cbtn--fill):hover { background: var(--ink); color: var(--ground); }
.cbtn--fill:hover { background: #2a2b2e; }
@media (max-width: 760px) { .copy__cta { gap: 8px; margin-top: 16px; } .cbtn { padding: 11px 16px 11px 18px; font-size: 12px; gap: 10px; } }

/* v42 赤のアクセント（首輪の赤）。面では使わず、線と操作の反応だけ */
:root { --red: #b3202a; --red-deep: #8f1820; }
::selection { background: #b3202a26; }
.hl path { stroke: var(--red); }
.cbtn--fill { transition: background .5s cubic-bezier(.2,.7,.2,1), color .4s; }
.cbtn--fill:hover, .cbtn--fill:focus-visible { background: var(--red); }
.cbtn:not(.cbtn--fill):hover, .cbtn:not(.cbtn--fill):focus-visible { background: var(--ink); color: var(--ground); }
.cbtn:hover i, .more:hover i, .more:focus-visible i { color: inherit; }
.more { transition: color .4s; }
.more:hover, .more:focus-visible { color: var(--red); }
.works a:hover h3 { color: var(--red); }
.drawer__nav a:hover, .drawer__nav a:focus-visible, .drawer__nav a:focus-visible small { color: var(--red); }
a:focus-visible { outline: 1px solid var(--red); outline-offset: 4px; }
/* ゴールド（プレートの影側の色）は静かな飾りだけ：罫線・注記・数字 */
.whyv .num b { color: var(--mark); }
/* スマホ：ロゴの場面の2か所だけ軽く止まる（JSで位置を決める） */
.snapA { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; display: none; }
@media (max-width: 760px) {
  html { scroll-snap-type: y proximity; scroll-padding-top: var(--th, 0px); }
  .snapA { scroll-snap-align: start; }
}
/* スマホの「大切にしていること」：画面を止めず、ロゴの場面のあとに縦に流れる章として置く（JSで複製）。
   各項目は画面に入ったら、大きなアイコンに正円と放射線が描かれ、番号・見出し・本文の順に現れる */
html .lgo.lgo--flow { display: none; }
@media (max-width: 760px) {
  .after-logo .scrolly { height: calc((100svh - var(--th, 48px)) * 4.7); } /* 3項目の分の止まりをなくした長さ */
  .lgo:not(.lgo--flow) { display: none !important; }
  html .lgo.lgo--flow { display: flex; position: relative; inset: auto; z-index: auto; padding: 96px 24px 80px; pointer-events: auto; }
  .lgo--flow .lgo__eye { display: block; margin-bottom: 8px; }
  .lgo--flow .lgo__list { grid-template-columns: minmax(0, 1fr); gap: 56px; max-width: 340px; margin: 0 auto; }
  .lgo--flow .lgo__list li { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 0; padding: 0; border-top: 0; }
  .lgo--flow .lgo__list .lgo__ic { width: min(34vw, 132px); grid-row: auto; margin: 18% 0 16%; }
  .lgo--flow .lgo__no { font-size: 11px; margin-bottom: 8px; } .lgo--flow .lgo__no b { font-size: 13px; }
  .lgo--flow .lgo__list h3 { font-size: 16.5px; line-height: 1.6; letter-spacing: .05em; margin-bottom: 12px; }
  .lgo--flow .lgo__list p { font-size: 13px; line-height: 1.95; letter-spacing: .03em; text-align: left; -webkit-line-clamp: unset; display: block; overflow: visible; }
  .lgo--flow li .m-draw path { --d: .25s !important; --dur: 1s !important; }
  .lgo--flow li .m-draw path.t { --d: 1.05s !important; --dur: .35s !important; }
  .lgo--flow li img.m-mist { --d: 0s !important; }
  .lgo--flow li :is(.lgo__no, h3) { --d: .35s !important; }
  .lgo--flow li p { --d: .55s !important; }
  .lgo--flow .lgo__foot { justify-content: center; margin-top: 56px; }
}
/* 日本語の折り返し：見出しや短い文は文節で改行し、最終行に1〜2文字だけ残さない（全幅共通） */
:is(h1, h2, h3, h4, blockquote, .sh__lead, .lgc__title, .lcs__head, .lcs__story p, .lgk__row p, .lgo__list p, .copy__lead, .msg__title) { word-break: auto-phrase; text-wrap: pretty; }

/* 10/10：トップの実績スライダーも一覧と同じカードに（会社名・制作内容・所在地を最初から見せ、触れると画像が少し寄って金の細線と「見る」） */
.lw a { gap: 8px; color: var(--ink); text-decoration: none; }
.lw span { display: block; font-size: inherit; letter-spacing: normal; color: inherit; }
.lw__img { position: relative; overflow: hidden; margin-bottom: 6px; }
.lw__img::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--mark); transform-origin: left; scale: 0 1; transition: scale .6s cubic-bezier(.6, 0, .2, 1); }
.lw a:hover .lw__img::after, .lw a:focus-visible .lw__img::after { scale: 1 1; }
.lw .lw__kind { font-size: 11px; letter-spacing: .14em; color: var(--mark); }
.lw .lw__name { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mincho); font-weight: 500; font-size: 15px; letter-spacing: .08em; line-height: 1.6; color: var(--ink); }
.lw .lw__name i { font-style: normal; font-size: 12px; letter-spacing: .14em; color: var(--sub); opacity: .55; white-space: nowrap; transition: opacity .4s, color .4s; }
.lw .lw__name i::before { content: "見る "; opacity: 0; transition: opacity .4s; }
.lw a:hover .lw__name i, .lw a:focus-visible .lw__name i { opacity: 1; color: var(--mark); }
.lw a:hover .lw__name i::before, .lw a:focus-visible .lw__name i::before { opacity: 1; }
.lw .lw__meta { font-size: 11px; letter-spacing: .12em; color: var(--sub); }
/* 実績とお客様の声の章：上に余白を取り、画面の中ほどで全体が見えるように */
.sec--loop { padding-top: clamp(96px, 12vh, 160px) !important; }
/* 「みやあじよについて見る」を3つの項目から離す */
.lgo:not(.lgo--flow) .lgo__foot { margin-top: clamp(44px, 8svh, 96px); }
@media (max-width: 760px) { .lw .lw__name { font-size: 16px; } .lgo--flow .lgo__foot { margin-top: 72px; } }

/* 10/10：見出しと右の一文は上下中央でそろえる。英語の飾り見出しは置かない */
@media (min-width: 761px) { .sh--row { align-items: center; } .sh--row .sh__lead { margin-bottom: 0; } }

/* 10/10：もやの遷移の中央は、読み込みと同じ金の猫（文字は出さない） */
.mist-label__cat { display: block; height: min(20vh, 160px); width: auto; margin: 0 auto; }
.mist-label small, .mist-label b { display: none; }

/* 10/10：数字の章は前の場面と重ならないよう上下に余白を取り、少しスクロールした時点で読める状態で出る */
@media (min-width: 761px) { .sec--whyv { padding: clamp(140px, 22vh, 240px) 0 clamp(60px, 8vh, 120px); } }
@media (max-width: 760px) { .sec--whyv { padding-top: 64px; } }

/* 実績と声を並べたとき、文字が入ったぶん上下が詰まって見えるので、段の間と上下を広げる（10/10 Yujiさん） */
.sec--loop { gap: clamp(56px, 6vw, 104px); padding-bottom: clamp(112px, 12vw, 180px) !important; }
.sec--loop { padding-top: clamp(140px, 16vh, 220px) !important; }
.loop__links { padding-top: 0; margin-top: clamp(-24px, -1.5vw, -8px); }
.lv a { gap: 20px; padding-block: clamp(28px, 2.6vw, 40px); }
@media (max-width: 760px) { .sec--loop { gap: 48px; padding-top: 88px !important; padding-bottom: 96px !important; } }

/* スマホ：場面で止まったときに、言葉が早めにそろうよう遅れを詰める（10/10 Yujiさん） */
@media (max-width: 760px) {
  #lgIntro .lcs__head { --d: .1s !important; }
  #lgIntro .lcs__story p:nth-child(1) { --d: .5s !important; }
  #lgIntro .lcs__story p:nth-child(2) { --d: .75s !important; }
  #lgIntro .lcs__story p:nth-child(3) { --d: 1s !important; }
  #lgValue .lgc__body { --d: .9s !important; }
  #lgValue .lgk__row { --d: 1.1s !important; }
}

/* FVのコピー：一文字ずつもやから出る */
.copy__title .ch { display: inline-block; opacity: 0; filter: blur(6px); translate: 0 .3em; transition: opacity .9s ease, filter .9s ease, translate 1s cubic-bezier(.2,.75,.1,1); transition-delay: calc(1s + var(--c) * 70ms); }
.ready .copy__title .ch { opacity: 1; filter: none; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .copy__title .ch { transition: none; opacity: 1; filter: none; translate: 0 0; } }

/* コラムの総数（現行サイトの公開数 2026-10-10時点） */
.cols__count { display: flex; align-items: baseline; gap: 8px; margin: clamp(20px, 2vw, 28px) 0 clamp(18px, 2vw, 26px); font-size: 12px; letter-spacing: .14em; color: var(--sub); }
.cols__count b { margin-left: 10px; font-family: var(--mincho); font-weight: 500; font-size: clamp(34px, 3.2vw, 48px); line-height: 1; letter-spacing: .02em; color: var(--mark); font-variant-numeric: tabular-nums; }
.cols__count small { font-family: var(--mincho); font-size: 14px; color: var(--ink); }

/* コラム：記事リスト側を広げ、区切り線4本を同じ細さ・同じ薄さにそろえる（10/10 Yujiさん） */
@media (min-width: 761px) { .sec--col .sec__grid { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: clamp(40px, 5vw, 80px); } }
.cols li svg { color: var(--rule); }
.cols li svg path { stroke-width: 1px; }
.cols li:last-child::after { height: 1px; background: var(--rule); }

/* 相談の3項目：一番上だけ濃い線をやめ、ほかの区切り線と同じ線にそろえる（10/10 Yujiさん） */
.benefits { border-top-color: var(--rule); }
/* 「無料相談はこちら」の矢印：矢じりの先を線の端にぴったり合わせる */
.cta__arrow::after { top: 50%; right: 1.5px; width: 8px; height: 8px; transform-origin: 50% 50%; transform: translateY(-50%) rotate(45deg); box-sizing: border-box; }

/* 数字の章（PC）：左の文・数字・右の見出しを、同じ間隔で横に並べ、下端を一本の線にそろえる。
   視差（スクロールで別々に動く）はやめ、3つがずれないようにする（10/10 Yujiさん） */
@media (min-width: 761px) {
  .whyv__stage { --G: clamp(48px, 5vw, 88px); display: flex; justify-content: center; align-items: flex-end; gap: var(--G); height: auto; min-height: 0; max-height: none; }
  .whyv__stage > .zl, .whyv__stage > .zc, .whyv__stage > .zr { position: static; inset: auto; translate: none; max-height: none; }
  .whyv .zl { order: 1; height: auto; }
  .whyv .zl p { margin: 0; }
  .whyv .zc { order: 2; width: auto; height: auto; }
  .whyv .zr { order: 3; }
  .whyv .nums { grid-template-columns: auto auto auto; gap: clamp(28px, 3vw, 52px); }
  .whyv .num__ja { white-space: nowrap; }
  .sec--whyv { padding: clamp(120px, 18vh, 200px) 0 0; }
}
/* タブレット（761〜1120px）：3つを横に並べると右の縦書きの見出しが画面の外に出るので、見出しと文を上に左右で、数字を下に */
@media (min-width: 761px) and (max-width: 1120px) {
  .whyv__stage { display: grid; grid-template-columns: auto auto; grid-template-areas: "l r" "c c"; justify-content: center; align-items: start; column-gap: clamp(96px, 16vw, 200px); row-gap: clamp(56px, 7vw, 88px); }
  .whyv__stage > .zl { grid-area: l; } .whyv__stage > .zr { grid-area: r; } .whyv__stage > .zc { grid-area: c; justify-self: center; }
}
/* 1181〜1300px：猫の左の縦書きの文が左のナビに重なるので、文字を一回り小さく、行間を詰める */
@media (min-width: 1181px) and (max-width: 1300px) {
  .lcs__story { font-size: 12px; line-height: 1.8; }
  .lcs__story p { margin-left: 1.8em; }
}
/* 数字の章から実績のスライダーまでの空白を詰める：数字が画面の中ほどにあるとき、下にスライダーの頭が見える距離 */
@media (min-width: 761px) { .sec--whyv + .sec--loop { padding-top: clamp(88px, 11vh, 132px) !important; } }
/* 「無料相談はこちら」：ほかのリンクと同じ「↗」にそろえ、ホバーで右上へ少し動かす（10/10 Yujiさん） */
.cta__arrow { width: auto; height: auto; background: none; font-size: 18px; line-height: 1; transition: translate .4s cubic-bezier(.2,.7,.2,1); }
.cta__arrow::after { content: none; }
.cta__arrow::before { content: "↗"; }
.cta:hover .cta__arrow, .cta:focus-visible .cta__arrow { width: auto; translate: 3px -3px; }
/* 見出しとリードの間（10/10）：縦に積む型は、下層の見出しと同じ20〜34px。横並びの型（PCのお悩み・サービス）は、見出し左・リード右で下端をそろえる */
.sh__title + .sh__lead { margin-top: clamp(20px, 2.4vw, 34px); }
.closing__title { margin-bottom: clamp(20px, 2.4vw, 34px); }
@media (max-width: 760px) {
  .sh--row > div + .sh__lead { margin-top: clamp(20px, 2.4vw, 34px); }
  .sh__title[data-par] { transform: none !important; } /* 縦に積むと、見出しだけ動く奥行きで間が詰まって見えるため */
}
/* ご相談ください（10/10）：事例の写真を、鉛筆画のアイコン4点（ルーペ・封筒・砂時計・双眼鏡）に。紙の上に置き、枠の地は敷かない */
.shot2--ic { position: relative; background: none; overflow: visible; }
/* 動き（10/10）：大切にしていること（円と目盛りが描かれる）とは別の形に。
   ①不安のもや：アイコンの後ろに灰色のもやがゆっくり漂う ②画面に入ると、鉛筆の線が左上から描かれ、陰影がのる
   ③描き終わるにつれて、もやが晴れていく（消し切らず、薄く漂い続ける） ④最後に一度だけ、題材らしい小さな仕草（ルーペは探す、封筒は届く、砂時計は傾く、双眼鏡は先を見る）。カードに乗ると同じ仕草 */
.shot2--ic::before, .shot2--ic::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgb(118 110 98 / .34), rgb(118 110 98 / .14) 55%, transparent); filter: blur(12px); transition: opacity 2.2s ease, scale 2.4s cubic-bezier(.2,.7,.2,1); }
.shot2--ic::before { left: 8%; top: 6%; width: 62%; height: 78%; animation: icFog 11s ease-in-out infinite alternate; }
/* 10/13 もやを煙にした版（WebGL）は Yujiさんの指示で一旦削除。もとの楕円のもやも出さない（下の display: none） */
/* 10/13 Yujiさん：煙は一旦削除（もやの楕円も汚れに見えるため出さない）。煙のスクリプトは bk111/src_pre130_smoke.html に残す */
.shot2--ic::before, .shot2--ic::after { display: none; }
.cons { position: relative; z-index: 1; }
.shot2--ic::after { right: 6%; bottom: 4%; width: 58%; height: 66%; animation: icFog 14s ease-in-out -5s infinite alternate-reverse; }
.cons.in .shot2--ic::before, .cons.in .shot2--ic::after { opacity: .38; scale: 1.18; transition-delay: calc(.9s + var(--k) * .15s); }
.cons a:hover .shot2--ic::before, .cons a:hover .shot2--ic::after { opacity: .16; scale: 1.3; transition-duration: 1s; transition-delay: 0s; }
@keyframes icFog { 0% { translate: -8% 3%; rotate: -10deg; } 50% { translate: 5% -5%; rotate: 4deg; } 100% { translate: 9% 4%; rotate: 12deg; } }
.shot2--ic .ic__g { position: absolute; inset: 4% 14%; z-index: 1; display: block; transform-origin: 50% 70%; transition: translate .7s cubic-bezier(.2,.7,.2,1), rotate .7s cubic-bezier(.2,.7,.2,1), scale .8s cubic-bezier(.2,.7,.2,1); }
.shot2--ic img, .cons.in .shot2--ic img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: contain; filter: none; scale: 1; opacity: 1; }
.shot2--ic .ic__ln { -webkit-mask-image: linear-gradient(125deg, #000 42%, transparent 58%); mask-image: linear-gradient(125deg, #000 42%, transparent 58%); -webkit-mask-size: 280% 280%; mask-size: 280% 280%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 100% 100%; mask-position: 100% 100%; transition: none; }
.cons.in .shot2--ic .ic__ln { -webkit-mask-position: 0 0; mask-position: 0 0; transition: -webkit-mask-position 1.5s cubic-bezier(.45,.05,.3,1) calc(.2s + var(--k) * .15s), mask-position 1.5s cubic-bezier(.45,.05,.3,1) calc(.2s + var(--k) * .15s); }
.shot2--ic .ic__sh { opacity: 0; transition: none; }
.cons.in .shot2--ic .ic__sh { opacity: 1; transition: opacity 1.1s ease calc(1.1s + var(--k) * .15s); }
.shot2--ic img { transform-origin: 50% 70%; }
.cons.in .shot2--ic img { animation: var(--ic-a), var(--ic-l) 14s ease-in-out calc(5s + var(--k) * 3.5s) infinite, icFloat 7s ease-in-out calc(var(--k) * -1.75s) infinite alternate; }
.ic--loupe { --ic-a: icLoupe 1.6s cubic-bezier(.45,.05,.3,1) calc(2s + var(--k) * .15s); --ic-l: icLoupeL; }
.ic--mail { --ic-a: icMail 1.4s cubic-bezier(.2,.7,.2,1) calc(2s + var(--k) * .15s); --ic-l: icMailL; }
.ic--glass { --ic-a: icGlass 1.8s cubic-bezier(.45,.05,.3,1) calc(2s + var(--k) * .15s); --ic-l: icGlassL; }
.ic--bino { --ic-a: icBino 1.5s cubic-bezier(.45,.05,.3,1) calc(2s + var(--k) * .15s); --ic-l: icBinoL; }
@keyframes icFloat { from { transform: translateY(1.5%); } to { transform: translateY(-2.5%); } }
@keyframes icLoupeL { 0%, 12%, 100% { translate: 0 0; rotate: 0deg; } 4% { translate: -5% -3%; rotate: -6deg; } 8.5% { translate: 4% 2%; rotate: 3deg; } }
@keyframes icMailL { 0%, 10%, 100% { translate: 0 0; rotate: 0deg; } 4.5% { translate: 3% -6%; rotate: 3deg; } }
@keyframes icGlassL { 0%, 13%, 100% { rotate: 0deg; } 5% { rotate: -12deg; } 10% { rotate: 4deg; } }
@keyframes icBinoL { 0%, 11%, 100% { translate: 0 0; rotate: 0deg; } 5% { translate: 0 -7%; rotate: -4deg; } }
@keyframes icLoupe { 0%, 100% { translate: 0 0; rotate: 0deg; } 35% { translate: -5% -3%; rotate: -6deg; } 70% { translate: 4% 2%; rotate: 3deg; } }
@keyframes icMail { 0%, 100% { translate: 0 0; rotate: 0deg; } 40% { translate: 3% -6%; rotate: 3deg; } }
@keyframes icGlass { 0%, 100% { rotate: 0deg; } 40% { rotate: -12deg; } 75% { rotate: 4deg; } }
@keyframes icBino { 0%, 100% { translate: 0 0; rotate: 0deg; } 45% { translate: 0 -7%; rotate: -4deg; } }
.cons a:hover .shot2--ic img { scale: 1; }
.cons a:hover .ic--loupe .ic__g { translate: -4% -3%; rotate: -6deg; scale: 1.04; }
.cons a:hover .ic--mail .ic__g { translate: 3% -5%; rotate: 3deg; scale: 1.04; }
.cons a:hover .ic--glass .ic__g { rotate: -10deg; scale: 1.04; }
.cons a:hover .ic--bino .ic__g { translate: 0 -6%; rotate: -4deg; scale: 1.04; }
@media (prefers-reduced-motion: reduce) { .shot2--ic::before, .shot2--ic::after, .cons.in .shot2--ic img { animation: none; } .shot2--ic .ic__ln { -webkit-mask-image: none; mask-image: none; } .shot2--ic .ic__sh { opacity: 1; } }
/* 左のサイドバーがあるPCでは、相談エリアとフッターの中身も、上の章と同じく「サイドバーを除いた幅」の中央にそろえる（10/10：コラムと相談エリアが42pxずれて見えていた） */
@media (min-width: 761px) {
  .nav-side .closing:not(.place > .closing) { padding-left: calc(84px + clamp(20px, 4.4vw, 64px)); padding-right: clamp(20px, 4.4vw, 64px); }
  .nav-side .foot { padding-left: calc(84px + clamp(20px, 4.4vw, 64px)); padding-right: clamp(20px, 4.4vw, 64px); }
}
/* 読みやすさ：文字の段階を4つにそろえる（PC：導入17〜18px／本文15〜16px／小見出し18〜21px／注記12.5px以上。スマホ：導入・本文15px前後／注記12px以上） */
.copy__lead { font-size: clamp(15px, 1.15vw, 17px); }
.lcs__story { font-size: clamp(14.5px, 1.05vw, 16px); }
.lgo__list h3 { font-size: clamp(18px, 1.45vw, 22px); }
.lgo__list p { font-size: clamp(14.5px, 1.05vw, 16px); }
.lgo__no { font-size: 12px; }
.msg__eyebrow { font-size: 13px; }
.msg__body { font-size: clamp(16px, 1.2vw, 18px); }
.vb { font-size: clamp(15px, 1.1vw, 16.5px); }
.vb .note { font-size: 12.5px; }
.vb a, .va a { font-size: 13px; }
.num__ja { font-size: 13px; }
.sh__lead, .closing__lead { font-size: clamp(16px, 1.25vw, 18px); line-height: 2; }
.cons h3, .benefits h3 { font-size: clamp(18px, 1.45vw, 21px); }
.cons p, .benefits p { font-size: 15px; }
.svc2__en { font-size: 12px; }
.svc2 p { font-size: 16px; }
.svc2__more, .lgo__more, .more, .sec a.more, .sh a.more { font-size: 13.5px; }
.foot small { font-size: 12px; }
.loop--works { --w: clamp(380px, 40vw, 640px); }
.lw .lw__name { font-size: 17px; }
.lw .lw__name i { font-size: 13px; }
.lw .lw__kind, .lw .lw__meta { font-size: 12.5px; }
.lv__who { font-size: 13px; } .lv__who small { font-size: 12.5px; } .lv__who i { font-size: 12px; }
.cols a span { font-size: 12.5px; }
.cols a b { font-size: clamp(16px, 1.35vw, 19px); }
.cols__count { font-size: 13px; }
.phones dt { font-size: 12.5px; }
.hours { font-size: 13px; }
.foot address { font-size: 13px; }
.foot__nav a { font-size: 14px; }
.foot__seo { font-size: 12px; }
@media (max-width: 760px) {
  .copy__lead { font-size: 14.5px; line-height: 1.9; }
  .lcs__story { font-size: 13.5px; }
  .lgo--flow .lgo__no { font-size: 12px; } .lgo--flow .lgo__no b { font-size: 14px; }
  .lgo--flow .lgo__list h3 { font-size: 18px; }
  .lgo--flow .lgo__list p { font-size: 15px; }
  .msg__body { font-size: 15px; line-height: 2; }
  .vb { font-size: 15px; }
  .num__ja, .why .num__ja { font-size: 12px; }
  .sh__lead, .closing__lead { font-size: 15px; line-height: 1.95; }
  .cons h3 { font-size: 16.5px; }
  .cons p { font-size: 14px; }
  .benefits p { font-size: 14.5px; }
  .svc2 p { font-size: 15px; }
  .lw span, .lw .lw__kind, .lw .lw__meta { font-size: 12px; }
  .lw .lw__name { font-size: 17px; }
  .lv__who { font-size: 13.5px; } .lv__who small { font-size: 12.5px; } .lv__who i { font-size: 12px; }
  .cols a span { font-size: 12px; }
  .cols a b { font-size: 16px; }
  .foot address { font-size: 12.5px; }
  .foot__seo { font-size: 11.5px; }
}