/* 株式会社Atto 共通スタイル（全ページ） */
:root{
--ink:#191b20; --ink-2:#101115; --text:#3b4048; --sub:#4f545d; --mute:#73787f; --red:#d8010e; --red-h:#ef1220;
--line:rgba(25,27,32,.08); --line-2:rgba(25,27,32,.12); --line-3:rgba(25,27,32,.18);
--paper:#f5f5f3; --paper-2:#ededea;
--sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
--mincho:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
--serif-en:"Cormorant Garamond",Georgia,serif;
--pad:clamp(20px,4vw,48px);
--max:1180px;
--hd-h:clamp(64px,8vw,84px);
--ease:cubic-bezier(.16,.84,.24,1);
--ease-io:cubic-bezier(.7,0,.3,1);
/* ロゴのAの中にある赤いパーツと同じ形（横203:縦71の三角形） */
--wedge:polygon(0 100%,41% 0,100% 0);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hd-h) + 8px);-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--red)}
input,textarea,select,button{font-family:inherit}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:12px;top:12px;z-index:200;background:#fff;padding:8px 14px}
.nb{display:inline-block}
/* どのセクションも同じ左右の基準線にそろえる */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
/* ① 赤い斜線（ロゴのパーツ）のモチーフ */
.wedge{display:inline-block;width:42px;height:15px;background:var(--red);clip-path:var(--wedge);flex:none}
.wedge.sm{width:26px;height:9px}
/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:transform .45s var(--ease),background .3s;view-transition-name:hd}
.hd .wrap{min-height:var(--hd-h);display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);transition:min-height .35s var(--ease)}
/* ⑥ スクロールしたら細く、下に進むと隠れて、戻ると出る */
.hd.is-scrolled .wrap{min-height:58px}
.hd.is-scrolled .logo{height:28px}
.hd.is-hidden{transform:translateY(-100%)}
.logo{display:flex;align-items:center;height:clamp(28px,4vw,38px);flex-shrink:0;margin-right:auto;transition:height .35s var(--ease)}
.logo img{height:100%;width:auto}
.gnav{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px)}
.gnav a{position:relative;font-size:13.5px;font-weight:500;letter-spacing:.08em;color:var(--text);padding:6px 0}
.gnav a:not(.cta)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.gnav a:not(.cta):hover::after,.gnav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.gnav a:hover,.gnav a[aria-current="page"]{color:var(--ink)}
.gnav a.cta{padding:11px 20px;color:#fff;border-radius:2px}
/* ④ メニューボタン（PCでも表示。スマホではこれだけ） */
.menu-btn{display:flex;align-items:center;gap:12px;height:44px;margin-right:-6px;padding:0 6px;border:0;background:none;cursor:pointer;color:var(--ink)}
.menu-btn .mb-txt{font-family:var(--serif-en);font-size:13px;font-weight:600;letter-spacing:.26em;width:3.6em;text-align:left}
.menu-btn .mb-lines{position:relative;width:26px;height:12px}
.menu-btn .mb-lines i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .45s var(--ease),width .3s}
.menu-btn .mb-lines i:nth-child(1){top:2px}
.menu-btn .mb-lines i:nth-child(2){top:9px;width:16px;left:auto}
.menu-btn:hover .mb-lines i:nth-child(2){width:26px}
.menu-btn[aria-expanded="true"] .mb-lines i:nth-child(1){transform:translateY(3.5px) rotate(20deg)}
.menu-btn[aria-expanded="true"] .mb-lines i:nth-child(2){width:26px;transform:translateY(-3.5px) rotate(-20deg)}
@media (max-width:760px){.gnav{display:none}}
/* ④ フルスクリーンメニュー */
.fs-menu{position:fixed;inset:0;z-index:55;background:var(--ink-2);color:#fff;visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease-io),visibility 0s .7s;overflow-y:auto}
.fs-menu.open{visibility:visible;clip-path:inset(0);transition:clip-path .7s var(--ease-io)}
.menu-open{overflow:hidden}
.menu-open .hd{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.menu-open .hd .logo img{filter:brightness(0) invert(1)}
.menu-open .hd .gnav{visibility:hidden}
.menu-open .menu-btn{color:#fff}
.fs-inner{min-height:100%;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center;padding-block:calc(var(--hd-h) + 40px) 56px}
.fs-nav{display:grid;gap:clamp(4px,1vw,10px)}
.fs-nav a{display:grid;grid-template-columns:9.5em auto 40px;align-items:center;gap:clamp(10px,1.6vw,22px);justify-content:start;color:#fff;padding:6px 0;opacity:0;transform:translateY(28px);transition:opacity .6s var(--ease),transform .6s var(--ease),color .3s}
.fs-menu.open .fs-nav a{opacity:1;transform:none;transition-delay:calc(.25s + var(--i) * .06s)}
.fs-nav .en{font-family:var(--serif-en);font-size:13px;letter-spacing:.24em;color:rgba(255,255,255,.5);white-space:nowrap;text-transform:uppercase}
.fs-nav .ja{font-family:var(--mincho);font-size:clamp(26px,4.4vw,52px);line-height:1.35;white-space:nowrap}
.fs-nav a:hover{color:#fff}
.fs-nav a:hover .ja{color:#ff4a54}
.fs-nav a .wedge{width:0;height:12px;transition:width .4s var(--ease);align-self:center}
.fs-nav a:hover .wedge{width:34px}
.fs-side{display:grid;gap:28px;font-size:14px;line-height:1.9;color:rgba(255,255,255,.72);opacity:0;transition:opacity .6s .45s}
.fs-menu.open .fs-side{opacity:1}
.fs-side .label{color:#ff4a54}
.fs-side a{color:#fff}
.fs-side .btn{justify-self:start}
@media (max-width:860px){.fs-inner{grid-template-columns:1fr;align-items:start}.fs-nav a{grid-template-columns:8em auto}.fs-nav a .wedge{display:none}.fs-nav .en{font-size:10.5px;letter-spacing:.16em}.fs-nav .ja{font-size:clamp(22px,6.4vw,30px)}}
/* ---------- 共通パーツ ---------- */
.sec{position:relative;padding-block:clamp(76px,11vw,148px)}
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:clamp(26px,4vw,42px)}
.eyebrow span{font-family:var(--serif-en);font-size:clamp(13px,1.5vw,15px);font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--sub)}
.label{display:flex;align-items:center;gap:12px;font-family:var(--serif-en);font-size:clamp(13px,1.4vw,14.5px);font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--red);margin-bottom:16px}
.label::before{content:"";width:26px;height:9px;background:currentColor;clip-path:var(--wedge)}
.center .label{justify-content:center}
.h2{margin:0;font-family:var(--mincho);font-weight:500;font-size:clamp(26px,4.4vw,46px);line-height:1.44;text-wrap:balance}
.h2.sm{font-size:clamp(24px,3.8vw,40px);line-height:1.5}
/* ⑫ ボタン：左から塗られる＋矢印が先に動く（PCではカーソルに吸い寄せられる） */
.btn,.gnav a.cta{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:14px;background:var(--red);color:#fff;font-weight:500;letter-spacing:.1em;border:0;border-radius:2px;cursor:pointer;transition:color .3s}
.btn{padding:17px 34px;font-size:14px}
.gnav a.cta{background:var(--ink)}
.btn::before,.gnav a.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .55s var(--ease)}
.gnav a.cta::before{background:var(--red)}
.btn:hover::before,.gnav a.cta:hover::before{transform:scaleX(1);transform-origin:left}
.btn:hover,.gnav a.cta:hover{color:#fff}
.btn .arr{display:inline-block;transition:transform .45s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.btn[disabled]{opacity:.55;cursor:default}
.btn[disabled]::before{display:none}
.btn.light{background:#fff;color:var(--ink)}
.btn.light::before{background:var(--red)}
.btn.light:hover{color:#fff}
.text-link{position:relative;display:inline-flex;align-items:center;gap:12px;padding-bottom:6px;font-size:14px;font-weight:500;letter-spacing:.08em;color:var(--ink);transition:color .3s,gap .3s}
.text-link::before,.text-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px}
.text-link::before{background:var(--line-3)}
.text-link::after{background:var(--red);transform-origin:left;transition:transform .55s var(--ease)}
.text-link:hover{color:var(--red);gap:16px}
.text-link:hover::after{transform:scaleX(0);transform-origin:right}
/* ---------- ⑮ ページ冒頭（ヒーロー・下層の見出し） ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(165deg,#f7f7f5 0%,#efefec 58%,#e8e8e4 100%)}
.hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-bg i{position:absolute;border-radius:50%;will-change:transform}
.hero-bg i:nth-child(1){top:-22%;right:-10%;width:min(64vw,820px);aspect-ratio:1;background:radial-gradient(circle at 35% 35%,rgba(216,1,14,.09),rgba(216,1,14,0) 68%);animation:drift1 22s ease-in-out infinite alternate}
.hero-bg i:nth-child(2){bottom:-34%;left:-12%;width:min(54vw,660px);aspect-ratio:1;background:radial-gradient(circle,rgba(25,27,32,.06),rgba(25,27,32,0) 66%);animation:drift2 26s ease-in-out infinite alternate}
.hero-bg i:nth-child(3){top:28%;right:18%;width:min(28vw,360px);aspect-ratio:1;background:radial-gradient(circle,rgba(216,1,14,.05),rgba(216,1,14,0) 70%);animation:drift3 18s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(-8vw,6vw) scale(1.08)}}
@keyframes drift2{to{transform:translate(10vw,-5vw) scale(1.12)}}
@keyframes drift3{to{transform:translate(-12vw,-4vw) scale(.9)}}
/* 紙のような細かい質感 */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.32;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,")}
.hero .wrap{position:relative;z-index:1;padding-block:clamp(84px,13vw,168px) clamp(76px,11vw,150px)}
.hero h1{margin:0;font-family:var(--mincho);font-weight:500;font-size:clamp(32px,6.4vw,76px);line-height:1.34;letter-spacing:.01em}
.hero h1 em{font-style:normal;color:var(--red)}
.hero.sub .wrap{padding-block:clamp(72px,10vw,132px) clamp(60px,8vw,104px)}
.hero.sub h1{font-size:clamp(30px,5.4vw,64px)}
.lead{margin:clamp(28px,4vw,44px) 0 0;max-width:660px;display:grid;gap:clamp(16px,2.2vw,24px);font-size:clamp(15px,1.7vw,16.5px);line-height:2.1;color:var(--text)}
.lead p{margin:0;text-wrap:pretty}
.hero-cta{margin-top:clamp(40px,5vw,60px)}
.crumb{margin-top:clamp(28px,4vw,44px);font-size:12.5px;letter-spacing:.06em;color:var(--mute)}
.crumb a{color:var(--mute)}
.crumb a:hover{color:var(--red)}
.scroll-cue{position:absolute;z-index:1;right:var(--pad);bottom:clamp(28px,4vw,48px);display:flex;flex-direction:column;align-items:center;gap:14px;font-family:var(--serif-en);font-size:11px;letter-spacing:.3em;color:var(--sub);writing-mode:vertical-rl}
.scroll-cue::after{content:"";width:1px;height:64px;background:linear-gradient(var(--red),var(--red)) 0 0/1px 40% no-repeat,var(--line-3);animation:cue 2.2s var(--ease-io) infinite}
@keyframes cue{0%{background-position:0 -40%}100%{background-position:0 140%}}
@media (max-width:760px){.scroll-cue{display:none}}
/* ③ キャッチを文節ごとに立ち上げる */
.catch .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em}
.catch .w>span{display:inline-block}
.js .catch .w>span{animation:rise 1s var(--ease) both;animation-delay:calc(var(--base,.15s) + var(--i) * .11s)}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
/* ② 初回だけのオープニング（トップのみ） */
.opening{display:none}
.op .opening{display:grid;place-items:center;position:fixed;inset:0;z-index:150;background:#fff;animation:op-out .75s var(--ease-io) 1.05s both}
.op .opening .op-mark{position:relative;width:min(46vw,260px)}
.op .opening img{width:100%;opacity:0;animation:op-logo .7s var(--ease) .35s both}
.op .opening .op-slash{position:absolute;left:-30vw;right:-30vw;top:58%;height:22px;background:var(--red);clip-path:var(--wedge);transform-origin:left;animation:op-slash .7s var(--ease-io) both}
@keyframes op-slash{0%{transform:translateX(-100%) scaleX(.3)}60%{transform:none}100%{transform:translateX(100%) scaleX(.2)}}
@keyframes op-logo{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes op-out{to{clip-path:inset(0 0 100% 0);visibility:hidden}}
.op .catch{--base:1.35s}
/* ---------- ⑨ 透かしの巨大な英字 ---------- */
.ghost{position:absolute;top:clamp(20px,4vw,56px);left:0;white-space:nowrap;font-family:var(--serif-en);font-weight:400;font-size:clamp(110px,19vw,280px);line-height:1;letter-spacing:.02em;color:rgba(25,27,32,.035);pointer-events:none;user-select:none;will-change:transform}
.dark .ghost{color:rgba(255,255,255,.04)}
.sec>.wrap{position:relative}
/* ---------- サービス ---------- */
.svc-head{max-width:720px}
.svc-grid{margin-top:clamp(48px,7vw,84px);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,36px)}
@media (min-width:640px) and (max-width:959px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.svc-grid .svc:last-child{grid-column:1/-1;flex-direction:row}.svc-grid .svc:last-child .svc-img{flex:0 0 50%;aspect-ratio:auto}}
@media (min-width:960px){.svc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.svc-grid .svc-body{padding:clamp(26px,2.6vw,38px)}.svc-grid .svc h3{font-size:clamp(16px,1.3vw,18.5px);letter-spacing:0}}
.svc{display:flex;flex-direction:column;background:linear-gradient(170deg,var(--paper) 0%,var(--paper-2) 100%);border-radius:3px;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.svc:hover{transform:translateY(-4px);box-shadow:0 24px 60px -30px rgba(25,27,32,.35)}
/* ⑧ 写真は下から開き、スクロールで少し遅れて動く */
.svc-img{position:relative;aspect-ratio:3/2;background:#e7e7e3;overflow:hidden}
.svc-img img{width:100%;height:118%;margin-top:-9%;object-fit:cover;transform:translateY(var(--py,0px)) scale(1.02);transition:scale .9s var(--ease)}
.svc:hover .svc-img img{scale:1.04}
.js .svc .svc-img{clip-path:inset(100% 0 0 0);transition:clip-path 1.1s var(--ease-io) .1s}
.js .svc.in .svc-img{clip-path:inset(0)}
.svc-body{padding:clamp(28px,3.6vw,48px);display:flex;flex-direction:column;flex:1}
.num{font-family:var(--serif-en);font-size:clamp(30px,4vw,44px);line-height:1;color:rgba(25,27,32,.2);margin-bottom:18px}
.svc h3{margin:0 0 20px;word-break:keep-all;overflow-wrap:anywhere;font-size:clamp(19px,2.3vw,23px);font-weight:700;letter-spacing:.02em;line-height:1.5}
.bar{display:block;width:42px;height:15px;background:var(--red);clip-path:var(--wedge);margin-bottom:24px;transform-origin:left;transition:transform .8s var(--ease) .5s}
.js .svc:not(.in) .bar{transform:scaleX(0)}
.tags-label{font-size:12px;font-weight:500;letter-spacing:.2em;color:var(--mute);margin-bottom:12px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;padding:0;list-style:none}
.tags li{font-size:12.5px;letter-spacing:.04em;color:var(--text);padding:6px 14px;background:rgba(255,255,255,.75);border:1px solid var(--line-2);border-radius:999px;white-space:nowrap;line-height:1.6}
.svc p{margin:0;font-size:15px;line-height:2.05;color:var(--text);text-wrap:pretty}
.svc .text-link{margin-top:28px;align-self:flex-start}
/* ---------- ⑰ 黒いセクション（お問い合わせ・CTA帯） ---------- */
.dark{background:var(--ink-2);color:#fff;overflow:hidden}
.dark .h2{color:#fff}
.dark .label{color:#ff4a54}
.contact .wrap{max-width:calc(840px + var(--pad)*2)}
.contact-head{text-align:center}
.contact-head p{margin:22px auto 0;max-width:560px;font-size:15px;line-height:2.1;color:rgba(255,255,255,.72);text-wrap:pretty}
.contact::before{content:"";position:absolute;top:-30%;left:50%;width:80vw;height:80vw;max-width:980px;max-height:980px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 50% 40%,rgba(216,1,14,.16),rgba(216,1,14,0) 66%);pointer-events:none}
/* ⑭ フォーム：黒い帯の中に白いパネルを置き、記入欄をはっきりさせる */
.form{position:relative;margin-top:clamp(40px,6vw,60px);display:grid;gap:clamp(20px,2.6vw,26px);background:#fff;color:var(--ink);border-radius:4px;padding:clamp(28px,5vw,56px);box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.fl{position:relative;display:block}
.fl .fl-t{display:block;margin-bottom:8px;font-size:13.5px;font-weight:500;letter-spacing:.06em;color:var(--ink)}
.fl input,.fl textarea,.fl select{width:100%;padding:13px 14px;background:#f6f6f4;border:1px solid var(--line-3);border-radius:3px;color:var(--ink);font-size:16px;outline:none;transition:border-color .3s,background .3s,box-shadow .3s}
.fl input::placeholder,.fl textarea::placeholder{color:#a0a4aa}
.fl input:hover,.fl textarea:hover,.fl select:hover{border-color:rgba(25,27,32,.32)}
.fl input:focus,.fl textarea:focus,.fl select:focus{background:#fff;border-color:var(--red);box-shadow:0 0 0 3px rgba(216,1,14,.12)}
.fl textarea{resize:vertical;min-height:150px;line-height:1.8}
.fl select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px;background:#f6f6f4 url("data:image/svg+xml;utf8,") no-repeat right 14px center/12px 8px}
.fl .req{display:inline-block;margin-left:8px;padding:1px 7px;font-size:10.5px;font-style:normal;font-weight:500;letter-spacing:.06em;color:#fff;background:var(--red);border-radius:2px;vertical-align:1px}
.fl-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(20px,2.6vw,26px)}
.consent{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.8;color:var(--text);cursor:pointer}
.consent input{flex:none;width:18px;height:18px;margin:4px 0 0;accent-color:var(--red);cursor:pointer}
.consent a{color:var(--ink);border-bottom:1px solid var(--red)}
.consent a:hover{color:var(--red)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:4px}
.form-note{font-size:13.5px;line-height:1.7;color:var(--mute)}
.form-note.err{color:var(--red)}
.form-note.ok{color:#1c7d4d}
/* 送信完了の表示 */
.sent-mark{display:none;align-items:center;gap:16px;padding:20px 22px;background:#f6f6f4;border:1px solid var(--line-2);border-radius:3px;font-size:15px;color:var(--ink)}
.sent-mark svg{width:34px;height:34px;flex:none}
.sent-mark circle{stroke:var(--red);stroke-dasharray:101;stroke-dashoffset:101;animation:draw .7s var(--ease) forwards}
.sent-mark path{stroke:var(--ink);stroke-dasharray:24;stroke-dashoffset:24;animation:draw .45s var(--ease) .55s forwards}
.form.sent .sent-mark{display:flex}
@keyframes draw{to{stroke-dashoffset:0}}
.cta-band{position:relative;padding-block:clamp(80px,11vw,140px)}
.cta-band .wrap{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:36px}
.cta-band p{margin:18px 0 0;max-width:520px;font-size:15px;line-height:2.1;color:rgba(255,255,255,.72)}
.cta-band::before{content:"";position:absolute;right:-10%;top:-40%;width:60vw;height:60vw;max-width:720px;max-height:720px;border-radius:50%;background:radial-gradient(circle,rgba(216,1,14,.18),rgba(216,1,14,0) 66%);pointer-events:none}
/* ---------- ビジョン ---------- */
.vision-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(32px,5vw,80px);align-items:start}
.vision-grid .body{display:grid;gap:clamp(18px,2.4vw,26px);font-size:16px;line-height:2.15;color:var(--text)}
.vision-grid .body p{margin:0;text-wrap:pretty}
/* ⑪ 行の赤い線がスクロールで伸びる */
.values{margin:clamp(36px,5vw,56px) 0 0;padding:0;list-style:none;border-top:1px solid var(--line-3)}
.values li{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(12px,4vw,64px);align-items:baseline;padding:clamp(26px,3.4vw,40px) 0;border-bottom:1px solid var(--line-2)}
.values li::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease) .2s}
.values li.in::after{transform:scaleX(1)}
.values .v-head{display:flex;align-items:baseline;gap:clamp(16px,2.4vw,28px)}
.values .v-num{font-family:var(--serif-en);font-size:clamp(30px,3.6vw,44px);line-height:1;color:rgba(25,27,32,.2);min-width:1.6em;transition:color .4s}
.values li:hover .v-num{color:var(--red)}
.values h3{margin:0;font-family:var(--mincho);font-size:clamp(20px,2.4vw,25px);font-weight:500;letter-spacing:.02em}
.values p{margin:0;font-size:15px;line-height:2.05;color:var(--text);text-wrap:pretty}
@media (max-width:760px){.values li{grid-template-columns:1fr}}
/* ---------- 会社概要・表 ---------- */
.dl{margin:0;display:grid;grid-template-columns:minmax(96px,200px) 1fr;border-top:1px solid var(--line-2)}
.dl dt,.dl dd{padding:clamp(18px,2.2vw,26px) 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.9}
.dl dt{font-weight:500;letter-spacing:.06em;color:var(--ink)}
.dl dd{margin:0;padding-left:clamp(12px,2vw,24px);color:var(--text)}
@media (max-width:560px){.dl{grid-template-columns:1fr}.dl dt{padding-bottom:4px;border-bottom:0;font-size:13px;color:var(--sub)}.dl dd{padding-top:0;padding-left:0}}
/* ---------- 規約系の本文 ---------- */
.doc{max-width:820px}
.doc h2{margin:clamp(44px,6vw,64px) 0 16px;font-size:clamp(18px,2.2vw,21px);font-weight:700;letter-spacing:.02em;line-height:1.6}
.doc h2:first-child{margin-top:0}
.doc p,.doc li{font-size:15px;line-height:2.05;color:var(--text)}
.doc p{margin:0 0 14px}
.doc ul,.doc ol{margin:0 0 14px;padding-left:1.4em}
.doc .meta{margin-top:clamp(44px,6vw,64px);padding-top:24px;border-top:1px solid var(--line-2);font-size:14px;color:var(--sub)}
/* ---------- ⑯ 大きなフッター ---------- */
.ft{position:relative;background:var(--paper);color:var(--sub);border-top:1px solid var(--line);overflow:hidden}
.ft-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);padding-block:clamp(64px,8vw,112px) clamp(40px,5vw,64px)}
.ft-cta{display:block;color:var(--ink)}
.ft-cta .label{margin-bottom:18px}
.ft-cta-t{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);font-family:var(--mincho);font-size:clamp(30px,4.8vw,64px);line-height:1.2;font-weight:500;white-space:nowrap}
.ft-cta-t .arr{display:grid;place-items:center;flex:none;width:clamp(52px,6vw,84px);aspect-ratio:1;border-radius:50%;border:1px solid var(--line-3);font-family:var(--sans);font-size:clamp(18px,2vw,24px);transition:background .4s,color .4s,border-color .4s,transform .5s var(--ease)}
.ft-cta:hover{color:var(--ink)}
.ft-cta:hover .arr{background:var(--red);border-color:var(--red);color:#fff}
.ft-cta p{margin:18px 0 0;font-size:14px;color:var(--sub)}
/* すぐ上に黒いお問い合わせ帯があるページでは、フッターのお問い合わせは出さない */
.is-home .ft-cta-wrap,body:has(.cta-band) .ft-cta-wrap,body:has(.contact.dark) .ft-cta-wrap{display:none}
.is-home .ft-top,body:has(.cta-band) .ft-top,body:has(.contact.dark) .ft-top{grid-template-columns:1fr}
.ft-info{display:grid;gap:26px;align-content:start}
.ft-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px}
.ft-nav a{font-size:14px;color:var(--text)}
.ft-nav a:hover,.ft-nav a[aria-current="page"]{color:var(--red)}
.ft address{font-style:normal;font-size:13.5px;line-height:1.9;color:var(--sub)}
.ft-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:24px 34px;border-top:1px solid var(--line-2)}
.ft small{font-size:12px;letter-spacing:.04em;color:var(--mute)}
.to-top{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif-en);font-size:12px;letter-spacing:.26em;color:var(--sub)}
.to-top::before{content:"↑";font-family:var(--sans)}
.is-home .ft-info,body:has(.cta-band) .ft-info,body:has(.contact.dark) .ft-info{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
@media (max-width:760px){.ft-top{grid-template-columns:1fr}}
/* ---------- ⑬ カスタムカーソル（マウス操作のPCだけ） ---------- */
.cursor,.cursor-ring{position:fixed;left:0;top:0;z-index:300;pointer-events:none;border-radius:50%;display:none}
.has-cursor .cursor,.has-cursor .cursor-ring{display:block}
.cursor{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--red)}
.cursor-ring{width:40px;height:40px;margin:-20px 0 0 -20px;border:1px solid rgba(216,1,14,.45);transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s,border-color .3s,opacity .3s}
.cursor-ring.hover{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(216,1,14,.08);border-color:rgba(216,1,14,.2)}
.cursor-ring.hide,.cursor.hide{opacity:0}
.has-cursor,.has-cursor a,.has-cursor button,.has-cursor label{cursor:none}
.has-cursor input,.has-cursor textarea,.has-cursor select{cursor:auto}
/* ---------- 出現アニメーション（JSが動かないときは最初から表示） ---------- */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}
.js [data-intro]{animation:intro 1s var(--ease) both;animation-delay:var(--d,0s)}
[data-intro="2"]{--d:.12s}[data-intro="3"]{--d:.3s}[data-intro="4"]{--d:.45s}
.op [data-intro]{animation-delay:calc(1.25s + var(--d,0s))!important}
@keyframes intro{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* ---------- ⑤ ページ遷移：赤い帯が横切って切り替わる ---------- */
@view-transition{navigation:auto}
::view-transition{background:var(--red)}
::view-transition-old(root){animation:vt-out .5s var(--ease-io) both}
::view-transition-new(root){animation:vt-in .55s var(--ease-io) .14s both}
::view-transition-group(hd){animation-duration:.4s}
@keyframes vt-out{to{clip-path:inset(0 0 0 100%)}}
@keyframes vt-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
/* ---------- 動きを減らす設定の人には動きを止める ---------- */
@media (prefers-reduced-motion:reduce){
@view-transition{navigation:none}
html{scroll-behavior:auto}
.js [data-reveal]{opacity:1;transform:none;transition:none}
.js [data-intro],.js .catch .w>span{animation:none}
.js .svc .svc-img{clip-path:none}
.js .svc:not(.in) .bar{transform:none}
.op .opening{display:none}
.hero-bg i,.scroll-cue::after{animation:none}
.values li::after{display:none}
*{transition:none!important}
}