*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#222;
  --ink2:#666;
  --red:#222;
  --panel:#faf9f8;
  --line:#dcdcdc;
}
html{scroll-behavior:smooth}
body{
  font-family:'Poppins','Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;
  color:var(--ink);background:#fff;line-height:1.9;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ══ 背景キャンバス（全面固定・最背面） ══ */
#bg{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1;pointer-events:none;display:block;will-change:opacity}

/* ══ ヘッダー ══ */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 40px;background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
}
.logo{font-family:'Poppins','Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-weight:300;font-size:25px;letter-spacing:0}
.logo b{font-weight:300;color:var(--red)}
.nav{display:flex;align-items:center;gap:36px}
.nav a{font-size:14px;letter-spacing:.06em;transition:color .2s}
.nav a:hover{color:var(--red)}
.nav .btn-cta{background:var(--red);color:#fff;font-weight:700;padding:12px 28px;border-radius:8px;transition:opacity .2s}
.nav .btn-cta:hover{opacity:.85;color:#fff}
.burger{display:none;width:40px;height:40px;background:none;border:none;cursor:pointer;flex-direction:column;justify-content:center;gap:6px;align-items:center}
.burger span{display:block;width:24px;height:1.5px;background:var(--ink);transition:transform .25s,opacity .2s}
.burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mob{position:fixed;inset:0;z-index:90;background:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:28px;opacity:0;pointer-events:none;transition:opacity .3s}
.mob.open{opacity:1;pointer-events:all}
.mob a{font-size:20px;letter-spacing:.08em}
.mob .btn-cta{background:var(--red);color:#fff;padding:14px 40px;border-radius:8px;font-weight:700;font-size:16px}

/* ══ ヒーロー：コピーは固定、後ろで円が動く ══ */
.mv{position:relative;height:100vh;min-height:640px}
.copywrap{
  position:fixed;z-index:2;left:50%;top:50svh;transform:translate(-50%,-50%);
  width:min(92vw,1000px);text-align:center;pointer-events:none;
}
.copywrap::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:130%;height:200%;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.78) 0%,rgba(255,255,255,.55) 42%,rgba(255,255,255,0) 72%);
}
.copywrap.is-hidden{visibility:hidden;opacity:0}
.copy-main{font-size:clamp(28px,5.2vw,60px);font-weight:700;letter-spacing:.08em;line-height:1.5}
.copy-main span{display:block;opacity:0;transform:translateY(18px);animation:up 1.2s cubic-bezier(.22,1,.36,1) forwards}
.copy-main span:nth-child(2){animation-delay:.25s}
.copy-main i{font-style:normal;display:inline-block}
@media(max-width:520px){.copy-main{font-size:clamp(24px,7.4vw,34px);letter-spacing:.05em}}
.copy-sub{font-family:'Poppins','Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-weight:200;font-size:clamp(15px,1.7vw,20px);letter-spacing:.22em;color:var(--ink2);margin-top:26px;opacity:0;animation:up 1.2s .7s cubic-bezier(.22,1,.36,1) forwards}
.copy-txt{font-size:14px;color:var(--ink2);margin-top:22px;line-height:2.1;opacity:0;animation:up 1.2s 1s cubic-bezier(.22,1,.36,1) forwards}
@keyframes up{to{opacity:1;transform:none}}
.scroll-ind{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
  font-family:'Poppins','Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:11px;letter-spacing:.3em;color:var(--ink2);
  display:flex;flex-direction:column;align-items:center;gap:10px;transition:opacity .4s;
}
.scroll-ind.is-hidden{opacity:0}
.scroll-ind i{display:block;width:1px;height:44px;background:var(--line);position:relative;overflow:hidden}
.scroll-ind i::after{content:'';position:absolute;left:0;top:-50%;width:1px;height:50%;background:var(--red);animation:sc 2s ease-in-out infinite}
@keyframes sc{to{top:100%}}

/* ══ コンテンツ：ヒーローの上に覆いかぶさる（z3・透明地） ══ */
.contents{position:relative;z-index:3}
section,.panel{position:relative}
.wrap{position:relative;max-width:1120px;margin:0 auto;padding:0 40px}
.sec-title{margin-bottom:52px}
.sec-title .en-t{font-family:'Poppins','Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-weight:500;font-size:clamp(36px,5.4vw,64px);letter-spacing:.06em;line-height:1.2}
.sec-title .jp-t{display:block;color:var(--red);font-size:15px;font-weight:700;letter-spacing:.1em;margin-top:8px}
.sec-title::after{content:'';display:block;width:0;height:1px;background:var(--red);margin-top:28px;transition:width 1.2s .3s cubic-bezier(.22,1,.36,1)}
.sec-title.in::after{width:104px}

/* 左→右にワイプして現れるグレーの面 */
.wipe{position:relative;isolation:isolate;padding:110px 0}
.wipe::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--panel);
  clip-path:inset(0 100% 0 0);transition:clip-path 1.4s cubic-bezier(.77,0,.18,1);
}
.wipe.in::before{clip-path:inset(0 0 0 0)}
.plain{padding:110px 0}

/* featured（最初に覆いかぶさる不透明パネル） */
.featured{background:var(--panel);padding:100px 0;box-shadow:0 -24px 60px rgba(0,0,0,.04)}
.feat-in{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:center}
.feat-label{font-family:'Poppins','Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:13px;letter-spacing:.2em;color:var(--red);margin-bottom:14px}
.feat-h{font-size:clamp(22px,2.8vw,32px);font-weight:700;line-height:1.5;letter-spacing:.04em;margin-bottom:18px}
.feat-p{font-size:14px;color:var(--ink2);line-height:2.1;margin-bottom:28px}
.btn-line{display:inline-block;border:1px solid var(--ink);padding:13px 34px;border-radius:8px;font-size:14px;font-weight:700;letter-spacing:.06em;transition:background .2s,color .2s,border-color .2s}
.btn-line:hover{background:var(--red);border-color:var(--red);color:#fff}
.feat-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);background:#fff}
.feat-stat{padding:36px 18px;text-align:center;border-right:1px solid var(--line)}
.feat-stat:last-child{border-right:none}
.feat-stat b{display:block;font-family:'Poppins','Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-weight:300;font-size:clamp(28px,3.4vw,42px);color:var(--red);line-height:1.2}
.feat-stat span{font-size:12px;color:var(--ink2);letter-spacing:.08em}

/* about */
.about-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:72px;align-items:start}
.about-h{font-size:clamp(22px,3vw,34px);font-weight:700;line-height:1.6;letter-spacing:.04em;margin-bottom:28px}
.about-p{font-size:14.5px;color:var(--ink2);line-height:2.2}
.about-p+.about-p{margin-top:18px}
.about-photo{position:relative}
.about-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px}
.about-tag{position:absolute;left:-22px;bottom:28px;background:#fff;border:1px solid var(--line);padding:16px 22px;font-size:13px;font-weight:700;line-height:1.7}
.about-tag em{display:block;font-style:normal;font-family:'Poppins','Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:11px;letter-spacing:.2em;color:var(--red);font-weight:400}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);background:rgba(255,255,255,.86)}
.card{padding:48px 36px 44px;border-right:1px solid var(--line);transition:background .25s}
.card:last-child{border-right:none}
.card:hover{background:#fff}
a.card{display:block}
.card-n{font-family:'Poppins','Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-weight:200;font-size:46px;color:#d0d0d0;line-height:1;margin-bottom:24px}
.card-k{color:var(--red);font-size:13px;font-weight:700;letter-spacing:.06em;margin-bottom:8px}
.card-h{font-size:21px;font-weight:700;letter-spacing:.05em;margin-bottom:16px;line-height:1.5}
.card-p{font-size:13.5px;color:var(--ink2);line-height:2}
.card-m{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);display:flex;align-items:baseline;gap:10px}
.card-m b{font-family:'Poppins','Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-weight:300;font-size:28px;color:var(--ink)}
.card-m span{font-size:12px;color:var(--ink2)}
.card-more{display:inline-block;margin-top:22px;font-family:'Poppins','Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:13px;letter-spacing:.14em;color:var(--red)}
.card-more::after{content:' →'}

/* works */
.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.work{display:block}
.work-img{aspect-ratio:16/10;background:#fff;overflow:hidden;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.work-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
a.work:hover .work-img img{transform:scale(1.04)}
.work-img.soon span{font-family:'Poppins','Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:12px;letter-spacing:.3em;color:#aaa}
.work-meta{margin-top:16px;font-size:12px;color:var(--red);font-weight:700;letter-spacing:.06em}
.work-t{font-size:16px;font-weight:700;margin-top:4px;letter-spacing:.03em}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 4px;cursor:pointer}
.faq-q span{font-weight:700;font-size:15px;letter-spacing:.03em}
.faq-ic{position:relative;width:18px;height:18px;flex-shrink:0}
.faq-ic::before,.faq-ic::after{content:'';position:absolute;left:0;top:50%;width:100%;height:1px;background:var(--red);transition:transform .3s}
.faq-ic::after{transform:rotate(90deg)}
.faq-item.open .faq-ic::after{transform:rotate(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-item.open .faq-a{max-height:420px}
.faq-a p{padding:0 4px 28px;font-size:14px;color:var(--ink2);line-height:2.1}

/* company */
.cp{width:100%;border-collapse:collapse;border-top:1px solid var(--line)}
.cp tr{border-bottom:1px solid var(--line)}
.cp th{width:200px;text-align:left;padding:24px 8px;font-size:13px;color:var(--red);font-weight:700;letter-spacing:.06em;vertical-align:top}
.cp td{padding:24px 8px;font-size:14.5px}

/* contact / footer */
.cta-band{text-align:center;padding:120px 24px}
.cta-band .en-t{font-family:'Poppins','Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-weight:500;font-size:clamp(32px,5vw,56px);letter-spacing:.06em}
.cta-band p{font-size:14px;color:var(--ink2);margin:16px 0 36px}
.btn-red{display:inline-block;background:var(--red);color:#fff;font-weight:700;padding:17px 56px;border-radius:8px;letter-spacing:.08em;transition:opacity .2s}
.btn-red:hover{opacity:.85}
footer{background:#fff;border-top:1px solid var(--line);padding:56px 40px 36px}
.ft-in{max-width:1120px;margin:0 auto;display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.ft-tag{font-size:12.5px;color:var(--ink2);margin-top:12px;line-height:1.9}
.ft-nav{display:flex;gap:28px;flex-wrap:wrap;font-size:13px}
.ft-nav a:hover{color:var(--red)}
.ft-copy{max-width:1120px;margin:40px auto 0;font-family:'Poppins','Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:11px;letter-spacing:.14em;color:#999}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}

@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .copy-main span,.copy-sub,.copy-txt{opacity:1;transform:none;animation:none}
  .wipe::before{clip-path:none;transition:none}
  .scroll-ind i::after{animation:none}
}
@media(max-width:520px){.about-h{font-size:19px;letter-spacing:.02em}.feat-h{font-size:21px}}
@media(max-width:900px){
  header{padding:10px 20px}
  .nav{display:none}
  .burger{display:flex}
  .wrap{padding:0 22px}
  .wipe,.plain{padding:72px 0}
  .featured{padding:64px 0}
  .feat-in,.about-grid{grid-template-columns:1fr;gap:40px}
  .cards{grid-template-columns:1fr}
  .card{border-right:none;border-bottom:1px solid var(--line)}
  .card:last-child{border-bottom:none}
  .works-grid{grid-template-columns:1fr}
  .about-tag{left:12px}
  .cp th{width:110px}
  .cta-band{padding:80px 22px}
  footer{padding:44px 22px 30px}
}

/* ═══════ v4 追加：共通パーツ ═══════ */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nav-drop{position:relative}
.drop{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:16px;opacity:0;pointer-events:none;transition:opacity .2s}
.drop-in{background:#fff;border:1px solid var(--line);min-width:250px;box-shadow:0 12px 40px rgba(0,0,0,.06)}
.drop a{display:block;padding:14px 22px;font-size:13.5px;border-bottom:1px solid var(--line)}
.drop a:last-child{border-bottom:none}
.drop a:hover{background:var(--panel)}
.nav-drop:hover .drop,.nav-drop:focus-within .drop{opacity:1;pointer-events:all}

/* キャッチコピー：線で描いてから塗りが入る */
.copysvg{display:block;height:auto;overflow:visible;margin-left:auto;margin-right:auto}
.copysvg.l1{width:min(100%,780px)}
.copysvg.l2{width:min(66%,515px);margin-top:10px}
.copysvg text{font-family:'Poppins','Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-weight:700;font-size:56px}
.copysvg tspan{fill:#222;stroke:none}
.js-draw .copysvg tspan{animation:draw 2.8s cubic-bezier(.4,0,.2,1) both;animation-delay:calc(var(--i) * .07s + .35s)}
@keyframes draw{
  0%{fill-opacity:0;stroke:#222;stroke-width:1.1;stroke-dasharray:600;stroke-dashoffset:600}
  62%{fill-opacity:0;stroke:#222;stroke-width:1.1;stroke-dasharray:600;stroke-dashoffset:0}
  100%{fill-opacity:1;stroke:#222;stroke-opacity:0;stroke-width:1.1;stroke-dasharray:600;stroke-dashoffset:0}
}
@media(prefers-reduced-motion:reduce){.js-draw .copysvg tspan{animation:none}}

/* サブページ共通 */
.page-hero{padding:170px 0 70px}
.page-hero .eyebrow{font-family:'Poppins','Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-weight:500;font-size:clamp(40px,6vw,72px);letter-spacing:.05em;line-height:1.15}
.page-hero .jp{display:block;color:var(--red);font-size:15px;font-weight:700;letter-spacing:.1em;margin-top:10px}
.page-hero h1{font-size:clamp(22px,3.2vw,36px);font-weight:700;line-height:1.6;letter-spacing:.04em;margin-top:40px;max-width:820px}
.page-hero .lead{font-size:14.5px;color:var(--ink2);line-height:2.2;max-width:760px;margin-top:22px}
.page-hero .btn-line{margin-top:30px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.chip{font-size:12px;border:1px solid var(--line);padding:6px 14px;border-radius:99px;background:rgba(255,255,255,.7)}
.band{padding:96px 0}
.band.wipe{padding:96px 0}
.lead-h{font-size:clamp(22px,3vw,34px);font-weight:700;line-height:1.7;letter-spacing:.04em;margin-bottom:24px;max-width:860px}
.prose p{font-size:14.5px;color:var(--ink2);line-height:2.2;max-width:820px}
.prose p+p{margin-top:18px}
.ticks{list-style:none;margin-top:18px}
.ticks li{position:relative;padding-left:24px;font-size:13.5px;line-height:1.9;margin-top:8px}
.ticks li::before{content:'';position:absolute;left:2px;top:.62em;width:9px;height:5px;border-left:1.5px solid var(--red);border-bottom:1.5px solid var(--red);transform:rotate(-45deg)}
.ticks li.x::before{border:none;width:9px;height:1.5px;background:#aaa;transform:none;top:.9em}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);background:rgba(255,255,255,.55)}
.grid3.g2x{grid-template-columns:repeat(3,1fr)}
.cell{padding:42px 34px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.cell:nth-child(3n){border-right:none}
.cell h3{font-size:18px;font-weight:700;letter-spacing:.04em;line-height:1.5;margin-bottom:12px}
.cell p{font-size:13.5px;color:var(--ink2);line-height:2}
.cell .k{font-family:'Poppins','Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-weight:200;font-size:38px;color:#cfcfcf;line-height:1;margin-bottom:18px}
.cell .tag{color:var(--red);font-size:12px;font-weight:700;letter-spacing:.08em;margin-bottom:6px}

.flow{border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:110px 1fr auto;gap:20px;align-items:center;padding:28px 6px;border-bottom:1px solid var(--line)}
.step .n{font-family:'Poppins','Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:13px;letter-spacing:.14em;color:var(--red)}
.step h4{font-size:17px;font-weight:700;letter-spacing:.03em}
.step p{font-size:13.5px;color:var(--ink2)}
.step .d{font-family:'Poppins','Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:12px;letter-spacing:.08em;color:var(--ink2);border:1px solid var(--line);padding:4px 14px;border-radius:99px;white-space:nowrap}

.plans{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line);background:rgba(255,255,255,.55)}
.plan{padding:48px 40px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative}
.plan:nth-child(2n){border-right:none}
.plan .en{font-family:'Poppins','Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:12px;letter-spacing:.2em;color:var(--red);margin-bottom:8px}
.plan h3{font-size:22px;font-weight:700;letter-spacing:.04em;margin-bottom:12px}
.plan .desc{font-size:13.5px;color:var(--ink2);line-height:2}
.plan .price{margin:22px 0 4px;font-size:26px;font-weight:700;letter-spacing:.04em}
.plan .price-n{font-size:12px;color:var(--ink2)}
.plan .btn-line{margin-top:26px}
.badge{position:absolute;top:22px;right:22px;background:var(--red);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;padding:5px 12px;border-radius:99px}
.vs{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.vs>div{border:1px solid var(--line);padding:40px 36px;background:rgba(255,255,255,.7)}
.vs .en{font-family:'Poppins','Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:12px;letter-spacing:.2em;color:var(--red)}
.vs h3{font-size:21px;font-weight:700;margin:6px 0 4px}

.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.filters button{font-family:inherit;font-size:13px;border:1px solid var(--line);background:#fff;padding:9px 20px;border-radius:99px;cursor:pointer;transition:all .2s}
.filters button.on,.filters button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.count{font-size:12px;color:var(--ink2);margin:-10px 0 22px}
.work.hide{display:none}
.work-img.soon.sm{aspect-ratio:16/10}
.badge-new{display:inline-block;background:var(--red);color:#fff;font-size:10px;letter-spacing:.1em;padding:2px 9px;border-radius:99px;margin-right:6px;font-weight:700}

.art{max-width:780px;margin:0 auto;padding:0 28px}
.art .meta{font-family:'Poppins','Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:13px;letter-spacing:.14em;color:var(--red);margin-bottom:14px}
.art h1{font-size:clamp(24px,3.4vw,38px);line-height:1.5;letter-spacing:.03em;margin-bottom:34px}
.art .hero-img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line);margin-bottom:40px}
.art h2{font-size:21px;margin:46px 0 14px;padding-top:30px;border-top:1px solid var(--line);letter-spacing:.03em}
.art p{font-size:15px;color:#444;line-height:2.2;margin-top:16px}
.art ul{list-style:none;margin-top:14px}
.art li{padding:18px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:#444;line-height:2}
.art li strong{display:block;color:var(--ink);font-size:15.5px;margin-bottom:2px}
.art .foot{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;margin-top:56px;padding-top:30px;border-top:1px solid var(--line)}

.form{max-width:720px}
.form .row{margin-bottom:26px}
.form label{display:block;font-size:13px;font-weight:700;margin-bottom:8px;letter-spacing:.04em}
.form .req,.form .opt{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:99px;margin-left:8px;letter-spacing:.06em}
.form .req{background:var(--red);color:#fff}
.form .opt{background:#eee;color:#777}
.form input[type=text],.form input[type=email],.form input[type=tel],.form select,.form textarea{width:100%;font-family:inherit;font-size:15px;padding:15px 16px;border:1px solid var(--line);background:rgba(255,255,255,.9);border-radius:6px;transition:border-color .2s,box-shadow .2s;color:var(--ink)}
.form textarea{min-height:170px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(0,0,0,.10)}
.form .agree{font-size:13px;display:flex;gap:10px;align-items:flex-start}
.form .agree a{color:var(--red);text-decoration:underline}
.form button[type=submit]{font-family:inherit;border:none;cursor:pointer;margin-top:10px;font-size:15px}
.form button[disabled]{opacity:.6;cursor:default}

.thanks{text-align:center;padding:200px 24px 140px}
.thanks .tick{width:68px;height:68px;border-radius:50%;border:1px solid var(--red);margin:0 auto 30px;position:relative}
.thanks .tick::after{content:'';position:absolute;left:23px;top:22px;width:20px;height:10px;border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)}
.thanks h1{font-size:clamp(24px,3.4vw,36px);letter-spacing:.04em;line-height:1.6}
.thanks p{color:var(--ink2);margin:20px 0 34px;font-size:14.5px;line-height:2.1}

.legal h3{font-size:17px;margin:40px 0 10px;letter-spacing:.03em}
.legal p,.legal li{font-size:14px;color:#444;line-height:2.1}
.legal ul{margin:6px 0 0 1.3em}

.founder{display:grid;grid-template-columns:1fr 1.3fr;gap:64px;align-items:start}
.founder img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px}
.sign{margin-top:26px;font-size:14px;font-weight:700}

@media(max-width:900px){
  .page-hero{padding:120px 0 50px}
  .band,.band.wipe{padding:64px 0}
  .grid3{grid-template-columns:1fr}
  .cell{border-right:none}
  .plans{grid-template-columns:1fr}
  .plan{border-right:none;padding:38px 26px}
  .vs{grid-template-columns:1fr}
  .step{grid-template-columns:70px 1fr;gap:14px}
  .step .d{display:none}
  .founder{grid-template-columns:1fr;gap:34px}
}

/* トップ：最初に覆いかぶさるのは About。Featured はその後ろで背景を透かす */
.first-panel{background:var(--panel);box-shadow:0 -24px 60px rgba(0,0,0,.04)}
.featured.featured-after{background:#fff;box-shadow:none}

.about-photo img{border:1px solid var(--line);background:#fff}

/* ロゴ画像（黒のロゴをそのまま使用） */
.logo img{height:38px;width:auto;display:block}
.ft .logo img{height:30px}

.about-photo img{height:auto;max-height:none}

.featured[hidden]{display:none!important}

/* Why：4つの理由（2×2）。アイコンは自作の線画 */
.wgrid{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line);background:rgba(255,255,255,.7)}
.wcell{padding:44px 44px 40px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .25s}
.wcell:nth-child(2n){border-right:none}
.wcell:nth-last-child(-n+2){border-bottom:none}
.wcell:hover{background:#fff}
.wtop{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:28px}
.wicon{width:54px;height:54px;color:var(--ink)}
.wnum{font-family:'Poppins','Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-weight:200;font-size:44px;line-height:1;color:#cfcfcf}
.wtag{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--ink2);margin-bottom:8px}
.wh{font-size:24px;font-weight:700;letter-spacing:.03em;line-height:1.5;margin-bottom:14px}
.wp{font-size:14px;color:var(--ink2);line-height:2.05;max-width:34em}
.wmeta{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);display:flex;align-items:baseline;gap:10px}
.wmeta b{font-family:'Poppins','Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-weight:500;font-size:28px}
.wmeta span{font-size:12px;color:var(--ink2)}
@media(max-width:900px){
  .wgrid{grid-template-columns:1fr}
  .wcell{border-right:none;padding:34px 26px}
  .wcell:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .wcell:last-child{border-bottom:none}
}

/* 事業内容：4つの事業（2×2）。見出し=一言＋太字タイトル、アイコンは右上に自作の線画 */
.svc-head2{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-bottom:56px}
.svc-head2 .sec-title::after{margin-top:26px}
.svc-lead{max-width:440px;font-size:14px;color:var(--ink2);line-height:2.05;font-weight:500}
.sgrid{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line);background:rgba(255,255,255,.7)}
.scell{position:relative;display:block;padding:46px 48px 42px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .25s}
.scell:nth-child(2n){border-right:none}
.scell:nth-last-child(-n+2){border-bottom:none}
.scell:hover{background:#fff}
.sicon{position:absolute;top:42px;right:48px;width:56px;height:56px;color:var(--ink)}
.skick{font-size:14px;font-weight:500;letter-spacing:.06em;color:var(--ink2);margin-top:70px;margin-bottom:8px}
.stitle{font-size:26px;font-weight:700;letter-spacing:.05em;line-height:1.45;margin-bottom:18px}
.sdesc{font-size:14px;color:var(--ink2);line-height:2.05;max-width:34em}
.smore{display:inline-block;margin-top:22px;font-size:13px;font-weight:700;letter-spacing:.08em;border-bottom:1px solid var(--ink);padding-bottom:2px}
.scell:hover .smore{opacity:.7}
@media(max-width:900px){
  .svc-head2{flex-direction:column;align-items:flex-start;gap:22px;margin-bottom:36px}
  .sgrid{grid-template-columns:1fr}
  .scell{border-right:none;padding:34px 26px 32px}
  .scell:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .scell:last-child{border-bottom:none}
  .sicon{top:30px;right:26px;width:46px;height:46px}
  .skick{margin-top:58px}
  .stitle{font-size:19px;letter-spacing:.03em}
}

.stitle,.wh{text-wrap:balance}

/* お知らせ（タブ切り替え） */
.news-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:40px;flex-wrap:wrap}
.news-head .sec-title::after{margin-top:26px}
.ntabs{display:flex;gap:8px;flex-wrap:wrap}
.ntabs button{font-family:inherit;font-size:13px;font-weight:500;border:1px solid var(--line);background:#fff;padding:9px 20px;border-radius:99px;cursor:pointer;transition:all .2s}
.ntabs button.on,.ntabs button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.nlist{list-style:none;border-top:1px solid var(--ink)}
.nitem{border-bottom:1px solid var(--line)}
.nitem a{display:grid;grid-template-columns:110px 96px 1fr 24px;gap:20px;align-items:center;padding:26px 6px;transition:background .2s}
.nitem a:hover{background:rgba(255,255,255,.8)}
.nitem time{font-family:'Poppins','Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:14px;letter-spacing:.04em;color:var(--ink2)}
.ncat{font-size:11.5px;font-weight:700;letter-spacing:.06em;border:1px solid var(--ink);padding:3px 12px;border-radius:99px;text-align:center;justify-self:start}
.ntitle{font-size:15px;font-weight:500;line-height:1.7}
.narr{font-family:'Poppins','Inter',sans-serif;text-align:right;transition:transform .2s}
.nitem a:hover .narr{transform:translateX(4px)}
.nitem.hide{display:none}
.nempty{padding:34px 6px;color:var(--ink2);font-size:14px;border-bottom:1px solid var(--line)}
@media(max-width:700px){
  .nitem a{grid-template-columns:auto 1fr;gap:6px 14px;padding:22px 4px}
  .ntitle{grid-column:1 / -1}
  .narr{display:none}
}

/* ═══════ 出現時のモーション ═══════ */
/* 見出しの英字：1文字ずつ、下から押し上げられる */
.mo .sec-title .en-t,.mo .page-hero .eyebrow,.mo .cta-band .en-t{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.mo .ch{display:inline-block;transform:translateY(112%);transition:transform .9s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i) * 38ms + .05s)}
.mo .in .ch,.mo .rv.in .ch{transform:none}
/* カード・行：順番にずれて現れる */
.mo .rvi{opacity:0;transform:translateY(36px) scale(.985);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .95s cubic-bezier(.22,1,.36,1),background .25s;transition-delay:calc(var(--i,0) * 110ms),calc(var(--i,0) * 110ms),0s}
.mo .rvi.in{opacity:1;transform:none}
.mo .rvi.done{transition-delay:0s}
.mo .nitem.rvi,.mo .faq-item.rvi,.mo .step.rvi{transform:translateX(-30px)}
.mo .nitem.rvi.in,.mo .faq-item.rvi.in,.mo .step.rvi.in{transform:none}
/* アイコン：線が描かれる */
.mo .draw path,.mo .draw circle,.mo .draw rect,.mo .draw line{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1);transition-delay:calc(var(--i,0) * 110ms + .35s)}
.mo .in .draw path,.mo .in .draw circle,.mo .in .draw rect,.mo .in .draw line{stroke-dashoffset:0}
/* 写真：カーテンが開くように現れ、少し縮む */
.mo .about-photo.rv img{clip-path:inset(0 0 100% 0);transform:scale(1.14);transition:clip-path 1.4s cubic-bezier(.77,0,.18,1) .15s,transform 1.8s cubic-bezier(.22,1,.36,1) .15s}
.mo .about-photo.in img{clip-path:inset(0 0 0 0);transform:none}

/* ═══════ ヘッダー（英語表示・ホバー） ═══════ */
.nav a{font-weight:500;letter-spacing:.04em}
.roll{display:inline-grid;overflow:hidden;line-height:1.5;vertical-align:bottom}
.roll .r1,.roll .r2{grid-area:1/1;text-align:center;white-space:nowrap;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.roll .r2{transform:translateY(105%)}
.nav a:hover .r1,.nav a:focus-visible .r1{transform:translateY(-105%)}
.nav a:hover .r2,.nav a:focus-visible .r2{transform:translateY(0)}
.nav .roll .r2{font-size:.92em}
/* Contact ボタン：白い面が下から上がって反転し、文字が日本語へ切り替わり、矢印が進む */
.nav .btn-cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:#fff;padding:11.5px 24.5px;border:1.5px solid var(--ink);border-radius:8px;font-weight:700;letter-spacing:.06em;transition:color .45s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1)}
.nav .btn-cta::before{content:'';position:absolute;left:-10%;right:-10%;top:0;bottom:0;background:#fff;border-radius:50% 50% 0 0 / 80% 80% 0 0;transform:translateY(105%);transition:transform .55s cubic-bezier(.22,1,.36,1),border-radius .55s}
.nav .btn-cta .roll,.nav .btn-cta .arr{position:relative;z-index:1}
.nav .btn-cta .arr{display:inline-block;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.nav .btn-cta:hover{opacity:1;color:var(--ink);transform:translateY(-1px)}
.nav .btn-cta:hover::before{transform:translateY(0);border-radius:0}
.nav .btn-cta:hover .arr{transform:translateX(6px)}
.nav .btn-cta:active{transform:translateY(0) scale(.98)}
/* ドロップダウン（英語＋日本語の補足） */
.drop a{display:flex;flex-direction:column;gap:2px;padding:14px 22px}
.drop a small{font-size:11.5px;color:var(--ink2);font-weight:400;letter-spacing:.04em}
@media(prefers-reduced-motion:reduce){.nav .btn-cta::before,.roll .r1,.roll .r2{transition:none}}

.nav-drop{display:flex;align-items:center}
.nav-drop>a{display:block}

/* ═══════ 下部の問い合わせ帯：入った場所から白い円が広がって反転する ═══════ */
.cband{position:relative;display:block;isolation:isolate;overflow:hidden;background:var(--ink);color:#fff;text-decoration:none;--x:50%;--y:50%}
.cband::before{content:'';position:absolute;inset:0;z-index:-1;background:#363636;clip-path:circle(0 at var(--x) var(--y));transition:clip-path .7s cubic-bezier(.19,1,.22,1)}
.cband:hover::before,.cband:focus-visible::before{clip-path:circle(120% at var(--x) var(--y))}
.cband-in{max-width:1200px;margin:0 auto;padding:0 40px;min-height:190px;display:grid;grid-template-columns:1fr auto;grid-template-areas:"title arrow" "text arrow";align-items:center;column-gap:40px;row-gap:14px;transition:color .5s cubic-bezier(.19,1,.22,1) .12s}
.cband-title{grid-area:title;align-self:end;font-family:'Poppins','Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-weight:600;font-size:clamp(30px,4.2vw,52px);line-height:1.1;letter-spacing:-.005em;transition:transform .6s cubic-bezier(.19,1,.22,1)}
.cband-text{grid-area:text;align-self:start;font-size:14px;font-weight:500;letter-spacing:.06em;opacity:.8;max-width:34em;line-height:1.9}
.cband-arrow{grid-area:arrow;position:relative;width:68px;height:68px;border:1.5px solid currentColor;border-radius:50%;overflow:hidden;transition:none}
.cband-arrow .ca1,.cband-arrow .ca2{position:absolute;inset:0;display:grid;place-items:center;transition:transform .7s cubic-bezier(.19,1,.22,1)}
.cband-arrow svg{width:46%;height:46%}
.cband-arrow .ca2{transform:translate(-110%,110%)}
.cband:hover .cband-arrow .ca1{transform:translate(110%,-110%)}
.cband:hover .cband-arrow .ca2{transform:translate(0,0)}
.cband:hover .cband-title{transform:translateX(6px)}
@media(max-width:800px){
  .cband-in{padding:40px 22px;min-height:0;grid-template-columns:1fr auto;grid-template-areas:"title arrow" "text text";row-gap:14px}
  .cband-arrow{width:52px;height:52px}
}
@media(prefers-reduced-motion:reduce){.cband::before,.cband-arrow .ca1,.cband-arrow .ca2{transition:none}}
.mo .cband-title{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}

/* ═══════ フッター：住所の欄を追加。リンクは中央から線が広がる ═══════ */
footer{padding:84px 40px 34px}
.ft-in2{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1.2fr 1fr;gap:48px 56px;align-items:start}
.ft-brand .ft-tag{margin-top:16px}
.ft-lab{font-family:'Poppins','Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#8a8a8a}
.ft-addr{font-size:14px;line-height:1.9;margin-top:6px;color:var(--ink)}
.ft-links2{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px}
.ft-links2 a,.ft-links3 a{position:relative;display:inline-block;width:fit-content;font-size:14px;padding:6px 0}
.ft-links2 a span,.ft-links3 a span{position:relative}
.ft-links2 a::after,.ft-links3 a::after{content:'';position:absolute;left:0;right:0;bottom:3px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:center;transition:transform .45s cubic-bezier(.19,1,.22,1)}
.ft-links2 a:hover::after,.ft-links3 a:hover::after,.ft-links2 a:focus-visible::after,.ft-links3 a:focus-visible::after{transform:scaleX(1)}
.ft-bar{max-width:1200px;margin:56px auto 0;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.ft-links3{display:flex;gap:28px}
.ft-links3 a{font-size:13px}
.ft-copy2{font-family:'Poppins','Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:11px;letter-spacing:.14em;color:#999}
@media(max-width:900px){
  footer{padding:56px 22px 28px}
  .ft-in2{grid-template-columns:1fr;gap:34px}
}

@media(max-width:560px){.ft-links2{grid-template-columns:1fr}.ft-links2 a{white-space:nowrap}}

/* 会社情報：左に見出し、右に情報。項目名と内容は同じ線にそろえる */
.company-grid{display:grid;grid-template-columns:minmax(240px,1fr) 2.1fr;gap:56px 72px;align-items:start}
.company-grid .sec-title{margin-bottom:0;position:sticky;top:120px}
.cinfo{border-top:1px solid var(--ink)}
.crow{display:grid;grid-template-columns:150px 1fr;gap:12px 28px;align-items:baseline;padding:26px 4px;border-bottom:1px solid var(--line)}
.crow dt{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--ink2)}
.crow dd{font-size:16px;font-weight:500;line-height:1.85;letter-spacing:.02em}
.cmap{display:inline-block;margin-left:14px;font-size:12.5px;font-weight:700;letter-spacing:.06em;border-bottom:1px solid var(--ink);padding-bottom:1px;white-space:nowrap}
.cmap:hover{opacity:.65}
@media(max-width:900px){
  .company-grid{grid-template-columns:1fr;gap:34px}
  .company-grid .sec-title{position:static}
  .crow{grid-template-columns:1fr;gap:4px;padding:20px 2px}
  .cmap{margin-left:0;margin-top:6px}
  .crow dd .cmap{display:block;width:fit-content}
}

.company-grid .sec-title::after{display:none}

.svc-all{display:flex;justify-content:center;margin-top:48px}
.btn-all{display:inline-flex;align-items:center;gap:14px;padding:16px 30px 16px 36px;border:1px solid var(--ink);border-radius:999px;font-size:14px;font-weight:700;letter-spacing:.08em;transition:background .25s,color .25s}
.btn-all svg{width:18px;height:18px;transition:transform .25s}
.btn-all:hover{background:var(--ink);color:#fff}
.btn-all:hover svg{transform:translateX(4px)}
.company-grid .sec-title .en-t{font-size:clamp(32px,3.8vw,52px);letter-spacing:.03em;white-space:nowrap}

.aph{margin:0;overflow:hidden;border-radius:4px;background:#eee}
.aph img{display:block;width:100%;height:100%;object-fit:cover;}
.aph-wide{aspect-ratio:21/9;margin-top:56px}
.page-hero .aph-wide{margin-top:64px}
.aph-cine{margin-top:56px}
.aph-tall{aspect-ratio:4/5;margin-top:0}
.aboutsplit{display:grid;grid-template-columns:1.5fr 1fr;gap:72px;align-items:start}
.aboutsplit .aph{position:sticky;top:120px}
.cell .cphoto{display:block;width:calc(100% + 68px);margin:-42px -34px 28px;aspect-ratio:16/10;object-fit:cover;}
@media (max-width:820px){
  .aph-wide{aspect-ratio:16/10;margin-top:36px}
  .aboutsplit{grid-template-columns:1fr;gap:36px}
  .aboutsplit .aph{position:static;aspect-ratio:4/3}
}

.aph-color img{filter:none}
.aph-tall{aspect-ratio:4/5}

.aboutsplit.rev{grid-template-columns:1fr 1.5fr}
.aboutsplit.rev .aph{aspect-ratio:4/5}
@media (max-width:820px){.aboutsplit.rev{grid-template-columns:1fr}}

.cell .cphoto{max-width:none;width:calc(100% + 68px);height:auto;margin:-42px -34px 28px;box-sizing:border-box}
.cell{overflow:hidden}


/* why: gap付きのカード配置 */
.wgrid{grid-template-columns:repeat(3,1fr);gap:22px;border:none;background:none}
.wcell,.wcell:nth-child(2n),.wcell:nth-last-child(-n+2){border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.85);padding:38px 34px 34px}
.wcell:hover{background:#fff}
.wcell-main{grid-column:1/-1;display:grid;grid-template-columns:1.45fr 1fr;column-gap:72px;background:#fff;border:1px solid var(--ink)!important;padding:46px 48px 44px!important}
.wcell-main .wtop,.wcell-main .wtag,.wcell-main .wh,.wcell-main .wp{grid-column:1}
.wcell-main .wmeta{grid-column:2;grid-row:1/6;margin:0;padding:0 0 0 56px;border-top:none;border-left:1px solid var(--line);flex-direction:column;justify-content:center;align-items:flex-start;gap:8px}
.wcell-main .wmeta b{font-size:clamp(56px,6.4vw,92px);line-height:1;font-weight:500;letter-spacing:-.01em}
.wcell-main .wmeta span{font-size:13px;letter-spacing:.06em}
.wcell-main .wh{font-size:clamp(24px,2.6vw,32px)}
@media (max-width:980px){
  .wgrid{grid-template-columns:1fr;gap:16px}
  .wcell-main{grid-template-columns:1fr;padding:34px 26px!important}
  .wcell-main .wmeta{grid-column:1;grid-row:auto;border-left:none;border-top:1px solid var(--line);padding:22px 0 0;margin-top:26px;flex-direction:row;align-items:baseline}
  .wcell-main .wmeta b{font-size:44px}
}

.lead-h{font-weight:800;line-height:1.5;letter-spacing:.03em}

.wcell:not(.wcell-main){display:flex;flex-direction:column}
.wcell:not(.wcell-main) .wh{font-size:clamp(18px,1.55vw,22px);line-height:1.5;min-height:1.5em;white-space:nowrap}
.wcell:not(.wcell-main) .wp{flex:1}
.wcell:not(.wcell-main) .wmeta{margin-top:26px}
@media (max-width:980px){.wcell:not(.wcell-main) .wh{white-space:normal}}

/* 見出しの行間を詰める */
.lead-h,.about-h,.feat-h,.card-h,.page-hero h1,.art h1,.thanks h1{line-height:1.38}
.wh,.stitle,.cell h3{line-height:1.35}
.page-hero .eyebrow,.sec-title .en-t{line-height:1.08}
.sec-title .jp-t{line-height:1.4}

/* 代表の写真：歩いてきて、腕を組んで立ち止まる */
.founder .fphoto{margin:0;position:relative;overflow:hidden;border-radius:6px;background:#efeeec;aspect-ratio:4/5;display:flex;align-items:flex-end;justify-content:center}
.fphoto .fwalk{position:relative;display:block;height:92%;aspect-ratio:830/1100;margin-bottom:2%;transform:translateX(-190%)}
.fphoto .fwalk img{position:absolute;left:0;right:0;bottom:0;margin:auto;height:100%;width:auto;max-width:none;aspect-ratio:auto;border-radius:0;opacity:0}
.fphoto .fwalk .fa{opacity:1}
.fphoto::after{content:"";position:absolute;left:22%;right:22%;bottom:3%;height:14px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.14),transparent);opacity:0;transition:opacity .6s 2s}
.fphoto.in::after{opacity:1}
.fphoto.in .fwalk{animation:fwalk 2.1s cubic-bezier(.3,.6,.4,1) .2s forwards}
.fphoto.in .fwalk .fa{animation:fa 2.1s steps(1,end) .2s forwards}
.fphoto.in .fwalk .fb{animation:fb 2.1s steps(1,end) .2s forwards}
.fphoto.in .fwalk .fc{animation:fc .01s linear 2.3s forwards,fsettle .55s ease-out 2.3s both}
@keyframes fwalk{from{transform:translateX(-190%)}to{transform:translateX(0)}}
@keyframes fa{0%{opacity:1}14.28%{opacity:0}28.57%{opacity:1}42.85%{opacity:0}57.14%{opacity:1}71.42%{opacity:0}85.71%{opacity:1}100%{opacity:0}}
@keyframes fb{0%{opacity:0}14.28%{opacity:1}28.57%{opacity:0}42.85%{opacity:1}57.14%{opacity:0}71.42%{opacity:1}85.71%{opacity:0}100%{opacity:0}}
@keyframes fc{to{opacity:1}}
@keyframes fsettle{0%{transform:translateY(-1.2%)}60%{transform:translateY(.4%)}100%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.fphoto .fwalk{transform:none;animation:none!important}.fphoto .fwalk img{animation:none!important;opacity:0}.fphoto .fwalk .fc{opacity:1}}

/* 奥から歩いてくる */
.founder .fphoto{background:linear-gradient(#f0efed 0,#f0efed 64%,#e7e6e3 64%,#ebeae7 100%)}
.fphoto .fwalk{transform-origin:50% 100%;transform:translateY(-52%) scale(.22);opacity:0}
.fphoto.in .fwalk{animation:fdeep 3s cubic-bezier(.5,.08,.45,1) .2s forwards}
.fphoto.in .fwalk .fa{animation:fa 3s steps(1,end) .2s forwards}
.fphoto.in .fwalk .fb{animation:fb 3s steps(1,end) .2s forwards}
.fphoto.in .fwalk .fc{animation:fc .01s linear 3.2s forwards,fsettle .55s ease-out 3.2s both}
.fphoto::after{transform:scaleX(.3);transition:opacity .6s 2.6s,transform 1.2s 2.2s}
.fphoto.in::after{transform:scaleX(1)}
@keyframes fdeep{0%{transform:translateY(-52%) scale(.22);opacity:0}12%{opacity:1}100%{transform:translateY(0) scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.fphoto .fwalk{transform:none;opacity:1;animation:none!important}}

.founder .fphoto{background:none;border-radius:0}

/* 事業内容一覧：見出し（カードの外）＋横長で低めの白カード */
.svwide .wrap{max-width:none;padding-left:0;padding-right:0}
.svlist{width:min(83.5vw,1700px);margin:0 auto}
.svsec{padding:72px 0 8px}
.svsec:first-child{padding-top:24px}
.svhead{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:34px}
.svic{width:76px;height:76px;color:var(--ink);stroke-width:1.4}
.svic *{stroke-dasharray:1;stroke-dashoffset:1}
.svhead.in .svic *{animation:svdraw 1.4s cubic-bezier(.4,0,.2,1) .15s forwards}
@keyframes svdraw{to{stroke-dashoffset:0}}
.svt{font-size:clamp(26px,2.5vw,38px);font-weight:800;line-height:1.3;letter-spacing:.04em;margin-top:26px}
.sve{font-family:'Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:13px;letter-spacing:.06em;color:var(--ink2);margin-top:8px}
.svrow{background:#f3f2f0;padding:40px;margin:0 5.55vw}
.svrow .scard{background:#fff;display:grid;grid-template-columns:52fr 48fr;gap:clamp(28px,3.4vw,64px);align-items:center;padding:40px}
.svrow .simg{position:relative;overflow:hidden;aspect-ratio:4/3;background:#e8e7e5}
.svrow .simg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 100% 0 0);transform:scale(1.12);transition:clip-path 1.1s cubic-bezier(.77,0,.18,1) .1s,transform 1.6s cubic-bezier(.22,1,.36,1) .1s}
.svrow.in .simg img{clip-path:inset(0 0 0 0);transform:scale(1)}
.svrow .stext{display:flex;flex-direction:column;align-items:flex-start;padding-right:8px}
.svrow .stext>*{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .9s cubic-bezier(.22,1,.36,1)}
.svrow.in .stext>*{opacity:1;transform:none}
.svrow.in .stext>*:nth-child(1){transition-delay:.5s}
.svrow.in .stext>*:nth-child(2){transition-delay:.65s}
.svrow.in .stext>*:nth-child(3){transition-delay:.8s}
.svrow.in .stext>*:nth-child(4){transition-delay:.95s}
.svrow .sbig{font-family:'Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-weight:500;font-size:clamp(28px,2.9vw,46px);line-height:1.1;letter-spacing:-.01em}
.svrow .skk{font-size:15px;font-weight:700;letter-spacing:.08em;margin-top:24px}
.svrow .sds{font-size:13.5px;color:var(--ink);line-height:2;letter-spacing:.05em;margin-top:12px}
.svrow .sbtn{display:flex;align-items:center;justify-content:space-between;width:min(100%,320px);margin-top:26px;padding:16px 22px 16px 26px;background:#f5f5f5;border-radius:8px;font-size:15px;font-weight:700;letter-spacing:.1em;transition:background .25s,color .25s}
.svrow .sbtn svg{width:19px;height:19px;transition:transform .25s}
.svrow .sbtn:hover{background:var(--ink);color:#fff}
.svrow .sbtn:hover svg{transform:translate(2px,-2px)}
@media (max-width:900px){
  .svlist{width:auto;margin:0 16px}
  .svrow{margin:0;padding:16px}
  .svrow .scard{grid-template-columns:1fr;gap:26px;padding:20px 18px 26px}
  .svrow .sbtn{width:100%}
}
@media (prefers-reduced-motion:reduce){.svrow .simg img{clip-path:none;transform:none}.svrow .stext>*{opacity:1;transform:none}.svic *{stroke-dashoffset:0}}

/* 見出しをグレーの箱の中へ入れて一体感を出す */
.svsec{padding:40px 0 0}
.svsec:first-child{padding-top:8px}
.svrow{margin:0;padding:28px 40px 40px}
.svrow .svhead{display:flex;flex-direction:row;align-items:center;gap:18px;margin:0 0 24px;padding:0 4px}
.svrow .svic{width:44px;height:44px;flex:none}
.svrow .svt{margin:0;font-size:clamp(20px,1.7vw,24px);font-weight:800;letter-spacing:.05em;line-height:1.3}
.svrow .sve{margin:0 0 0 auto;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.svrow.in .svic *{animation:svdraw 1.4s cubic-bezier(.4,0,.2,1) .15s forwards}
.svrow .svhead .svt,.svrow .svhead .sve{opacity:0;transform:translateY(10px);transition:opacity .7s ease .15s,transform .8s cubic-bezier(.22,1,.36,1) .15s}
.svrow.in .svhead .svt,.svrow.in .svhead .sve{opacity:1;transform:none}
@media (max-width:900px){.svrow{padding:18px 16px 16px}.svrow .sve{display:none}}

.svrow{margin:0 5.55vw}
@media (max-width:900px){.svrow{margin:0}}

/* もっと横長に */
.svlist{width:min(90vw,1800px)}
.svrow,.svrow{margin:0}
.svrow .simg{aspect-ratio:16/9}
.svrow .scard{padding:36px 48px;gap:clamp(28px,4vw,80px)}
@media (max-width:900px){.svlist{width:auto;margin:0 16px}.svrow .simg{aspect-ratio:16/10}.svrow .scard{padding:20px 18px 26px}}

/* 「詳しく見る」ボタン：黒が左から広がり、文字が英語に切り替わり、矢印が斜めに入れ替わる */
.svrow .sbtn{position:relative;overflow:hidden;isolation:isolate;background:#f5f5f5;transition:color .35s ease .08s,box-shadow .35s}
.svrow .sbtn::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left center;transition:transform .55s cubic-bezier(.77,0,.18,1);z-index:-1}
.svrow .sbtn:hover,.svrow .sbtn:focus-visible{background:#f5f5f5;color:#fff}
.svrow .sbtn:hover::before,.svrow .sbtn:focus-visible::before{transform:scaleX(1)}
.sbtn .slbl{position:relative;display:block;height:1.6em;line-height:1.6em;overflow:hidden}
.sbtn .slbl>span{display:block;transition:transform .5s cubic-bezier(.77,0,.18,1)}
.sbtn .l2{position:absolute;left:0;top:100%;letter-spacing:.14em;font-family:'Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-weight:600;font-size:.92em}
.sbtn:hover .slbl>span,.sbtn:focus-visible .slbl>span{transform:translateY(-100%)}
.sbtn .sarr{position:relative;width:20px;height:20px;overflow:hidden;flex:none}
.sbtn .sarr>span{position:absolute;inset:0;display:block;transition:transform .5s cubic-bezier(.77,0,.18,1)}
.sbtn .sarr svg{width:20px;height:20px;display:block;transition:none}
.sbtn .a2{transform:translate(-120%,120%)}
.sbtn:hover .a1,.sbtn:focus-visible .a1{transform:translate(120%,-120%)}
.sbtn:hover .a2,.sbtn:focus-visible .a2{transform:translate(0,0)}
@media (hover:none){.svrow .sbtn::before{display:none}.sbtn .l2,.sbtn .a2{display:none}}
@media (prefers-reduced-motion:reduce){.svrow .sbtn::before,.sbtn .slbl>span,.sbtn .sarr>span{transition:none}}

.sbtn .slbl{min-width:104px;white-space:nowrap}
.sbtn .l2{white-space:nowrap}

/* パソコン枠（自作）に、実際に制作したサイトを映す */
.svrow .simg.dev{background:linear-gradient(180deg,#f1f0ee 0%,#e7e6e3 100%);display:flex;align-items:center;justify-content:center}
.svrow .simg.dev .lap{width:80%;opacity:0;transform:translateY(26px);transition:opacity 1s ease .15s,transform 1.3s cubic-bezier(.22,1,.36,1) .15s;filter:drop-shadow(0 18px 22px rgba(0,0,0,.22))}
.svrow.in .simg.dev .lap{opacity:1;transform:none}
.lap .lscr{background:#0d0d0f;border-radius:9px 9px 2px 2px;padding:2.4% 2.4% 2.8%;aspect-ratio:16/10.2;position:relative}
.lap .lscr::before{content:"";position:absolute;top:.9%;left:50%;width:.9%;aspect-ratio:1;background:#2a2a30;border-radius:50%;transform:translateX(-50%)}
.svrow .simg.dev .lscr img{position:static;display:block;width:100%;height:100%;object-fit:cover;object-position:top;filter:none;clip-path:none;transform:none;transition:none;border-radius:1px}
.lap .lbase{position:relative;height:clamp(7px,.9vw,13px);margin:0 -5%;background:linear-gradient(180deg,#d9d9dc 0%,#b4b4b9 100%);border-radius:0 0 18px 18px}
.lap .lbase::after{content:"";position:absolute;left:50%;top:0;width:16%;height:55%;background:#9d9da2;border-radius:0 0 8px 8px;transform:translateX(-50%)}
@media (max-width:900px){.svrow .simg.dev .lap{width:84%}}
@media (prefers-reduced-motion:reduce){.svrow .simg.dev .lap{opacity:1;transform:none;transition:none}}

/* 作り込んだビジュアル画像はカラーのまま表示 */
.svrow .simg.vis img{filter:none}

/* 「詳しく見る」ホバーを速く */
.svrow .sbtn{transition:color .2s ease,box-shadow .2s}
.svrow .sbtn::before{transition:transform .28s cubic-bezier(.65,0,.2,1)}
.sbtn .slbl>span{transition:transform .28s cubic-bezier(.65,0,.2,1)}
.sbtn .sarr>span{transition:transform .28s cubic-bezier(.65,0,.2,1)}

/* ホームページ作成ページ：冒頭の2カラム */
.svhero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,4.5vw,72px);align-items:center}
.svhero-vis{margin:0}
.svhero-vis img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 18px 40px rgba(0,0,0,.08)}
@media (max-width:900px){.svhero-grid{grid-template-columns:1fr}}

/* ===== ホームページ作成ページ専用のレイアウト ===== */
/* Why：大きな数字3つ */
.swhy{padding:96px 0 40px}
.swhy-en{font-family:'Inter','Poppins',sans-serif;font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--ink2);margin-bottom:18px;text-transform:uppercase}
.swhy-h{font-size:clamp(26px,3.6vw,46px);font-weight:800;line-height:1.38;letter-spacing:.03em;max-width:900px}
.swhy-body{margin-top:26px;max-width:760px}
.swhy-body p{font-size:15px;line-height:2.1;color:var(--ink2)}
.sstats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:56px;border-top:1px solid var(--ink)}
.sstats>div{padding:30px 28px 8px 0;border-right:1px solid var(--line);padding-left:28px}
.sstats>div:first-child{padding-left:0}
.sstats>div:last-child{border-right:none}
.sstats dt{font-family:'Poppins','Inter',sans-serif;font-weight:500;font-size:clamp(54px,7vw,104px);line-height:1;letter-spacing:-.02em}
.sstats dt small{font-family:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-weight:700;font-size:.22em;letter-spacing:.06em;margin-left:6px}
.sstats dd{margin-top:14px;font-size:13.5px;line-height:1.8;color:var(--ink2)}
@media (max-width:820px){.sstats{grid-template-columns:1fr}.sstats>div{padding:22px 0;border-right:none;border-bottom:1px solid var(--line)}}
/* Features：写真と文章を左右交互に */
.sfeats{padding:80px 0 40px}
.sfeat-list{display:flex;flex-direction:column;gap:84px;margin-top:20px}
.sfeat{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,6vw,96px);align-items:center}
.sfeat.rev .sfeat-img{order:2}
.sfeat-img{margin:0;overflow:hidden;border-radius:6px;aspect-ratio:4/3;background:#e8e7e5}
.sfeat-img img{display:block;width:100%;height:100%;object-fit:cover;}
.sfeat-body{position:relative}
.sfeat-n{display:block;font-family:'Poppins','Inter',sans-serif;font-weight:200;font-size:clamp(64px,8vw,120px);line-height:.9;color:#d9d8d6}
.sfeat-tag{font-family:'Inter',sans-serif;font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--ink2);margin-top:12px}
.sfeat-body h3{font-size:clamp(21px,2.3vw,30px);font-weight:800;line-height:1.4;letter-spacing:.03em;margin-top:10px}
.sfeat-p{font-size:14.5px;line-height:2;color:var(--ink2);margin-top:16px}
.sfeat-body .ticks{margin-top:18px}
@media (max-width:820px){.sfeat{grid-template-columns:1fr;gap:26px}.sfeat.rev .sfeat-img{order:0}.sfeat-list{gap:56px}}
/* What's Included：左に見出しと写真（固定）、右に番号リスト */
.sinc{padding:90px 0 40px}
.sinc-grid{display:grid;grid-template-columns:minmax(260px,.8fr) 1.4fr;gap:clamp(40px,7vw,110px);align-items:start}
.sinc-side{position:sticky;top:120px}
.sinc-side .sec-title{margin-bottom:18px}
.sinc-lead{font-size:14.5px;color:var(--ink2);line-height:1.9;margin-bottom:28px}
.sinc-side .aph{aspect-ratio:4/3;margin:0}
.sinc-list{list-style:none;border-top:1px solid var(--ink)}
.sinc-list li{display:grid;grid-template-columns:64px 1fr;gap:12px 22px;padding:30px 0;border-bottom:1px solid var(--line)}
.sinc-list .in{font-family:'Poppins','Inter',sans-serif;font-weight:300;font-size:28px;color:#b9b8b5;line-height:1.2}
.sinc-list h3{font-size:18px;font-weight:800;letter-spacing:.04em;line-height:1.5}
.sinc-list p{font-size:13.5px;line-height:2;color:var(--ink2);margin-top:8px}
@media (max-width:900px){.sinc-grid{grid-template-columns:1fr}.sinc-side{position:static}.sinc-list li{grid-template-columns:44px 1fr}}
/* Process：横並びのタイムライン */
.sproc{padding:90px 0 60px}
.sproc-lead{font-size:14.5px;color:var(--ink2);margin:-8px 0 54px}
.stl{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);position:relative;counter-reset:s}
.stl::before{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:var(--ink)}
.stl li{position:relative;padding:36px 22px 0 0}
.stl li::before{content:"";position:absolute;left:0;top:0;width:13px;height:13px;border-radius:50%;background:#fff;border:2px solid var(--ink)}
.stl .tn{display:block;font-family:'Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--ink2)}
.stl .td{display:block;font-family:'Poppins','Inter',sans-serif;font-size:clamp(26px,2.6vw,38px);font-weight:500;line-height:1.1;margin-top:8px}
.stl h4{font-size:16px;font-weight:800;letter-spacing:.04em;margin-top:16px;line-height:1.5}
.stl p{font-size:13px;line-height:1.9;color:var(--ink2);margin-top:8px}
@media (max-width:900px){
  .stl{grid-template-columns:1fr;padding-left:26px}
  .stl::before{left:6px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .stl li{padding:0 0 38px 24px}
  .stl li::before{left:-26px;top:3px}
}

/* ホームページ作成：冒頭のバランス調整 */
.svhero-grid{grid-template-columns:.95fr 1.05fr;gap:clamp(36px,5vw,88px);align-items:center}
.svhero-text .eyebrow{white-space:nowrap;font-size:clamp(34px,4.4vw,64px)}
.svhero-text h1{font-size:clamp(22px,2.5vw,34px);margin-top:26px;line-height:1.4}
.svhero-text .lead{margin-top:18px;font-size:14px;line-height:2}
.svhero-text .btn-line{margin-top:26px}
.svhero-vis img{aspect-ratio:4/3;object-fit:cover;box-shadow:none;border-radius:6px}
@media (max-width:900px){.svhero-vis img{aspect-ratio:16/10}}

/* ホームページ作成：冒頭を「帯＋白カード」の見せ方に */
.svfeat-hero .svrow{margin:44px 0 0;padding:40px}
.svfeat-hero .svrow .skk{font-size:clamp(17px,1.5vw,21px);font-weight:800;line-height:1.6;margin-top:22px;max-width:none}
.svfeat-hero .svrow .sds{max-width:none}
.svfeat-hero .svrow .sbig{font-size:clamp(34px,4vw,56px)}
.svfeat-hero .svrow .sbtn .slbl{min-width:150px}
@media (max-width:900px){.svfeat-hero .svrow{padding:16px;margin-top:28px}}

/* スマホで白カードがはみ出さないよう修正 */
.svrow .scard>*{min-width:0}
@media (max-width:900px){
  .svrow .scard{grid-template-columns:minmax(0,1fr)}
  .svrow .sbtn .slbl,.svfeat-hero .svrow .sbtn .slbl{min-width:0;flex:1}
  .svrow .sbtn{gap:12px}
}

/* ===== ホームページ作成：冒頭（スクロール連動のパソコン） ===== */
.sdev{position:relative;height:300vh}
.sdev-stick{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-top:96px;box-sizing:border-box}
.sdev-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,4vw,72px);align-items:center;width:100%}
.sdev-text .eyebrow{white-space:nowrap;font-size:clamp(34px,4.4vw,64px)}
.sdev-text h1{font-size:clamp(22px,2.5vw,34px);font-weight:800;line-height:1.4;letter-spacing:.03em;margin-top:26px}
.sdev-text .lead{font-size:14px;color:var(--ink2);line-height:2;margin-top:18px}
.sdev-text .btn-line{margin-top:26px}
.sdev-lap .lap{width:100%;filter:drop-shadow(0 22px 28px rgba(0,0,0,.2))}
.sdev-lap .lscr{aspect-ratio:16/10.2;padding:2.2% 2.2% 2.6%}
.sdev-view{position:relative;width:100%;height:100%;overflow:hidden;background:#fff;border-radius:1px}
.sdev-frame{position:absolute;left:0;top:0;width:1440px;height:900px;border:0;transform-origin:0 0;pointer-events:none;background:#fff}
.sdev-static{display:none;width:100%;height:100%;object-fit:cover}
.sdev-note{text-align:center;font-size:12px;letter-spacing:.12em;color:var(--ink2);margin-top:18px}
@media (max-width:900px){
  .sdev{height:auto}
  .sdev-stick{position:static;height:auto;display:block;padding:120px 0 40px}
  .sdev-grid{grid-template-columns:1fr}
  .sdev-lap{margin-top:28px}
  .sdev-view{display:none}
  .sdev-static{display:block}
  .sdev-note{display:none}
}
@media (prefers-reduced-motion:reduce){.sdev{height:auto}.sdev-stick{position:static;height:auto;padding:120px 0 40px}}
/* ===== 制作実績（大きなブラウザ枠） ===== */
.sworks{padding:40px 0 70px}
.sbrowser{display:block;position:relative;border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 24px 50px rgba(0,0,0,.08);margin-top:10px}
.sb-bar{display:flex;align-items:center;gap:8px;height:42px;padding:0 16px;background:#f1f0ee;border-bottom:1px solid var(--line)}
.sb-bar i{width:11px;height:11px;border-radius:50%;background:#d3d2cf}
.sb-url{margin-left:18px;font-family:'Inter',sans-serif;font-size:12px;letter-spacing:.04em;color:var(--ink2);background:#fff;border-radius:999px;padding:5px 16px}
.sb-shot{position:relative;overflow:hidden;aspect-ratio:16/9}
.sb-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
.sbrowser:hover .sb-shot img{transform:scale(1.035)}
.sb-cursor{position:absolute;right:28px;bottom:26px;background:var(--ink);color:#fff;font-size:13px;font-weight:700;letter-spacing:.12em;padding:12px 22px;border-radius:999px;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s}
.sbrowser:hover .sb-cursor{opacity:1;transform:none}
.sb-cap{margin-top:20px}
.sb-meta{font-size:12px;letter-spacing:.12em;color:var(--ink2)}
.sb-t{font-size:18px;font-weight:800;letter-spacing:.04em;margin-top:4px}
@media (hover:none){.sb-cursor{opacity:1;transform:none;right:14px;bottom:14px}}

/* ===== ホームページ作成：冒頭の見出しを太く・凝った表現に ===== */
.chero .chero-en{font-family:'Inter','Poppins','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:clamp(46px,9vw,132px);line-height:1;font-weight:800;letter-spacing:-.025em;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .22em}
.chero-en b{font-weight:800;color:var(--ink)}
.chero-en .o{color:transparent;-webkit-text-stroke:clamp(1.5px,.18vw,3px) var(--ink);position:relative}
.chero-en .dot{display:inline-block;width:.16em;height:.16em;border-radius:50%;background:#4f6bff;margin-left:-.12em;align-self:flex-end;transform:translateY(-.1em) scale(0);transition:transform .7s cubic-bezier(.34,1.56,.64,1) .9s}
.chero .rv.in .dot{transform:translateY(-.1em) scale(1)}
.chero-jp{margin-top:20px}
.chero-jp span{display:inline-block;font-size:15px;font-weight:800;letter-spacing:.34em;padding:8px 18px 8px 22px;border:1.5px solid var(--ink);border-radius:999px}
.chero-line{display:block;height:3px;width:min(220px,40vw);margin-top:30px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.77,0,.18,1) .5s}
.chero .rv.in .chero-line{transform:scaleX(1)}
.chero h1{margin-top:34px}
@media (prefers-reduced-motion:reduce){.chero-line{transform:none}.chero-en .dot{transform:translateY(-.1em) scale(1)}}

/* ===== Why：グレーの帯＋左に見出し、右に数字カード3枚 ===== */
.swhy{background:#f3f2f0;padding:96px 0}
.swhy-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,6vw,100px);align-items:center}
.swhy-h{font-size:clamp(28px,3.3vw,46px);line-height:1.38;max-width:none}
.swhy-body{margin-top:24px;max-width:none}
.swhy-body p{font-size:14.5px;line-height:2.1}
.swlist{display:flex;flex-direction:column;gap:16px}
.sw{display:grid;grid-template-columns:minmax(150px,.9fr) 1.1fr;align-items:center;gap:20px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px 34px;transition:border-color .25s,transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.sw:hover{border-color:var(--ink);transform:translateX(-6px);box-shadow:6px 10px 0 rgba(0,0,0,.05)}
.sw .sn{display:flex;align-items:baseline;gap:6px;line-height:1}
.sw .sn b{font-family:'Poppins','Inter',sans-serif;font-weight:500;font-size:clamp(54px,6vw,88px);letter-spacing:-.02em;line-height:1}
.sw .sn i{font-style:normal;font-weight:800;font-size:clamp(16px,1.5vw,22px);color:#4f6bff;letter-spacing:.06em}
.sw-k{display:block;font-family:'Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--ink2)}
.sw-d{font-size:14px;line-height:1.8;margin-top:6px;font-weight:500}
@media (max-width:900px){.swhy{padding:64px 0}.swhy-grid{grid-template-columns:1fr}.sw{grid-template-columns:auto 1fr;padding:20px 22px}}

.swhy-h{font-size:clamp(24px,2.5vw,44px);line-height:1.45}
.swhy-body p+p{margin-top:14px}
.sw-d{font-size:13.5px}

/* ===== Why：来訪者の動き（探す→見る→連絡する）を図にしたレイアウト ===== */
.swhy{background:none;padding:100px 0 70px}
.swhy-head{text-align:center}
.swhy-head .swhy-h{margin:0 auto;font-size:clamp(26px,3.2vw,46px);line-height:1.45;max-width:none}
.sjourney{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);position:relative;margin:64px auto 0;max-width:980px;text-align:center}
.sjourney::before{content:"";position:absolute;left:16.6%;right:16.6%;top:44px;border-top:2px dashed #cfcdc9}
.sjourney::after{content:"";position:absolute;left:16.6%;right:16.6%;top:44px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.77,0,.18,1) .5s}
.sjourney.in::after{transform:scaleX(1)}
.sjourney li{position:relative;z-index:1;padding:0 18px}
.jn{display:inline-flex;align-items:center;justify-content:center;width:88px;height:88px;border-radius:50%;background:#fff;border:2px solid var(--ink);color:var(--ink);position:relative;transform:scale(.6);opacity:0;transition:transform .7s cubic-bezier(.34,1.56,.64,1),opacity .5s}
.jn svg{width:38px;height:38px}
.sjourney.in .jn{transform:none;opacity:1}
.sjourney.in li:nth-child(1) .jn{transition-delay:.2s}
.sjourney.in li:nth-child(2) .jn{transition-delay:.9s}
.sjourney.in li:nth-child(3) .jn{transition-delay:1.6s}
.sjourney .hot .jn{background:var(--ink);color:#fff}
.sjourney .hot .jn::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid #4f6bff;opacity:0;animation:jpulse 2.4s ease-out 2s infinite}
@keyframes jpulse{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.25);opacity:0}}
.jt{font-family:'Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:13px;font-weight:700;letter-spacing:.16em;margin-top:22px;color:var(--ink2)}
.sjourney .hot .jt{color:#4f6bff}
.jd{font-size:15px;font-weight:700;line-height:1.7;margin-top:8px}
.jmark{max-width:980px;margin:34px auto 0;text-align:center;position:relative}
.jmark::before{content:"";display:block;width:34%;margin:0 auto;height:14px;border:2px solid #4f6bff;border-top:none;border-radius:0 0 10px 10px}
.jmark span{display:inline-block;margin-top:14px;font-size:13px;font-weight:800;letter-spacing:.12em;color:#4f6bff}
.swhy-cols{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(36px,6vw,90px);align-items:center;margin-top:76px;padding-top:50px;border-top:1px solid var(--line)}
.swhy-cols .swhy-body{margin:0}
.sstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.ss{padding:4px 18px;border-left:1px solid var(--line)}
.ss:first-child{border-left:none;padding-left:0}
.ss .sn{display:flex;align-items:baseline;gap:4px;line-height:1}
.ss .sn b{font-family:'Poppins','Inter',sans-serif;font-weight:500;font-size:clamp(40px,4.4vw,64px);letter-spacing:-.02em}
.ss .sn i{font-style:normal;font-weight:800;font-size:15px;color:#4f6bff}
.ss dd{margin-top:10px;font-size:12.5px;line-height:1.7;color:var(--ink2)}
@media (max-width:820px){
  .swhy{padding:64px 0 40px}
  .sjourney{grid-template-columns:1fr;gap:34px}
  .sjourney::before,.sjourney::after{left:44px;right:auto;top:44px;bottom:44px;height:auto;width:0;border-top:none;border-left:2px dashed #cfcdc9;background:none;transform:none}
  .sjourney li{display:grid;grid-template-columns:88px 1fr;column-gap:20px;text-align:left;padding:0;align-items:center}
  .sjourney .jt{margin-top:0;grid-column:2}.sjourney .jd{grid-column:2;margin-top:4px}.sjourney .jn{grid-row:1/3}
  .jmark::before{width:60%}
  .swhy-cols{grid-template-columns:1fr}
  .sstrip{grid-template-columns:1fr;gap:14px}.ss{border-left:none;padding:0}
}
@media (prefers-reduced-motion:reduce){.jn{transform:none;opacity:1}.sjourney::after{transform:none}.sjourney .hot .jn::after{animation:none}}

/* ===== A：巨大な見出しの一画面（Why） ===== */
.swhy2{background:none;padding:150px 0 120px;min-height:92vh;display:flex;align-items:center}
.swhy2 .wrap{width:100%}
.swhy2 .swhy-en{margin-bottom:26px}
.swhy2 .swhy-h{display:block;text-align:left;margin:0;max-width:none;font-size:clamp(36px,6.6vw,108px);font-weight:800;line-height:1.22;letter-spacing:.01em}
.mo .swhy2 .swhy-h{overflow:hidden;padding-bottom:.12em}
.s2-body{margin-top:44px;max-width:620px}
.s2-body p{font-size:15px;line-height:2.1;color:var(--ink2)}
.s2-body p+p{margin-top:14px}
.s2-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:70px;border-top:3px solid var(--ink)}
.s2s{padding:30px 24px 0 0}
.s2s+.s2s{padding-left:28px;border-left:1px solid var(--line)}
.s2s .sn{display:flex;align-items:baseline;gap:6px;line-height:1}
.s2s .sn b{font-family:'Poppins','Inter',sans-serif;font-weight:500;font-size:clamp(64px,10vw,164px);letter-spacing:-.04em}
.s2s .sn i{font-style:normal;font-weight:800;font-size:clamp(16px,1.8vw,28px);color:#4f6bff}
.s2s dd{margin-top:14px;font-size:14px;color:var(--ink2);line-height:1.8}
@media (max-width:820px){.swhy2{padding:96px 0 70px;min-height:0}.s2-stats{grid-template-columns:1fr}.s2s+.s2s{border-left:none;padding-left:0;border-top:1px solid var(--line);margin-top:20px}}
/* ===== C：スクロールで重なっていくカード（Features） ===== */
.sstack{position:relative;margin-top:36px;padding-bottom:40px}
.sfs{position:sticky;top:calc(118px + var(--k) * 22px);display:grid;grid-template-columns:1fr 1fr;height:min(540px,70vh);margin-bottom:56px;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 22px 60px rgba(0,0,0,.09);transform-origin:50% 0;will-change:transform}
.sfs-img{margin:0;position:relative;overflow:hidden;background:#e8e7e5}
.sfs-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.sfs-body{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.sfs-n{font-family:'Poppins','Inter',sans-serif;font-weight:200;font-size:clamp(70px,9vw,140px);line-height:.85;color:transparent;-webkit-text-stroke:1.5px #bdbcb8}
.sfs-tag{font-family:'Inter',sans-serif;font-size:12px;font-weight:700;letter-spacing:.18em;color:#4f6bff;margin-top:14px}
.sfs-body h3{font-size:clamp(20px,2.1vw,30px);font-weight:800;line-height:1.42;letter-spacing:.03em;margin-top:8px}
.sfs-p{font-size:13.5px;line-height:1.95;color:var(--ink2);margin-top:12px}
.sfs-body .ticks{margin-top:14px}
@media (max-width:900px){
  .sfs{position:static;grid-template-columns:1fr;height:auto;margin-bottom:28px}
  .sfs-img{aspect-ratio:16/10}
  .sfs-body{padding:26px 22px 30px}
}
/* What's Included / Process を大きく */
.sinc-list h3{font-size:clamp(18px,1.7vw,24px)}
.sinc-list .in{font-size:clamp(34px,3.4vw,52px);font-weight:200;color:transparent;-webkit-text-stroke:1.2px #b9b8b5;transition:color .3s,-webkit-text-stroke-color .3s}
.sinc-list li{grid-template-columns:90px 1fr;transition:padding-left .35s cubic-bezier(.22,1,.36,1)}
.sinc-list li:hover{padding-left:12px}
.sinc-list li:hover .in{color:#4f6bff;-webkit-text-stroke-color:#4f6bff}
.stl .td{font-size:clamp(32px,3.6vw,56px)}
.stl h4{font-size:17px}

/* Why：図（探す→見る→連絡する）＋比較表。青い輪の動きは外す */
.swhy{background:none;padding:100px 0 70px;min-height:0;display:block}
.sjourney .hot .jn::after{display:none;animation:none}
.cmp{max-width:980px;margin:80px auto 0;border-top:3px solid var(--ink)}
.cmp-head,.cmp-row{display:grid;grid-template-columns:130px 1fr 1fr;gap:0;align-items:stretch}
.cmp-head{border-bottom:1px solid var(--line)}
.cmp-t{font-size:13px;font-weight:800;letter-spacing:.1em;padding:18px 22px}
.cmp-head .cmp-b{color:#4f6bff}
.cmp-row{border-bottom:1px solid var(--line)}
.cmp-k{font-family:'Inter','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--ink2);padding:26px 0;align-self:center}
.cmp-a,.cmp-b{display:flex;align-items:center;gap:12px;padding:26px 22px;font-size:15px;line-height:1.7}
.cmp-a{color:#8c8b88}
.cmp-a svg{width:18px;height:18px;flex:none;color:#b5b4b0}
.cmp-b{background:#fff;font-weight:700;position:relative}
.cmp-row .cmp-b::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#4f6bff}
.cmp-b svg{width:20px;height:20px;flex:none;color:#4f6bff}
.cmp-head .cmp-b{background:#fff}
@media (max-width:820px){.cmp-head{display:none}.cmp-row{grid-template-columns:1fr}.cmp-k{padding:18px 0 4px}.cmp-a,.cmp-b{padding:14px 16px}}

/* 補足（注記） */
.note-mark{font-size:.7em;color:#4f6bff;margin-left:2px;font-weight:700;vertical-align:super;line-height:0}
.cmp-note{max-width:980px;margin:18px auto 0;font-size:12.5px;line-height:1.9;color:var(--ink2)}
.cmp-note b{color:var(--ink)}
.cmp-note a,.s-note a{color:#4f6bff;border-bottom:1px solid currentColor}
.s-note{font-size:12px;line-height:1.8;color:var(--ink2);margin:-14px 0 22px}

.sfs-img img{filter:none}

.sinc-side .aph-cms{aspect-ratio:16/9}
.sinc-side .aph-cms img{filter:none}

.sfs:first-child .sfs-img img{object-position:32% 50%}

.stl .td{font-size:clamp(40px,4.4vw,68px);font-weight:300;letter-spacing:-.02em;margin-top:6px}

/* ヘッダーの文字を大きく */
.nav a{font-size:16.5px}
.nav .btn-cta{font-size:16px}
.nav{gap:38px}
@media (max-width:1180px){.nav a{font-size:15px}.nav .btn-cta{font-size:14.5px}.nav{gap:26px}}

/* Featuresのカードを低く */
.sfs{height:min(470px,66vh);grid-template-columns:.85fr 1.15fr;margin-bottom:44px}
.sfs-body{padding:clamp(24px,3vw,40px) clamp(28px,3.4vw,52px)}
.sfs-n{font-size:clamp(54px,6.2vw,92px)}
.sfs-tag{margin-top:10px}
.sfs-body h3{font-size:clamp(19px,1.9vw,27px);margin-top:6px}
.sfs-p{margin-top:10px;font-size:13px;line-height:1.85}
.sfs-body .ticks{margin-top:10px}
.sfs-body .ticks li{padding-left:24px;margin-top:5px;font-size:13px;line-height:1.8}
@media (max-width:900px){.sfs{height:auto;grid-template-columns:1fr}}

/* What's Included：写真なし。見出しは単語の途中で折れない */
.sinc-side .sec-title .en-t{white-space:nowrap;font-size:clamp(30px,8.4vw,64px)}
@media (min-width:900px){.sinc-side .sec-title .en-t{font-size:clamp(34px,4vw,60px)}}
.sinc-lead{margin-bottom:0}

.chero .chero-en.is-long{font-size:clamp(38px,7.1vw,104px)}

/* ===== 料金：月額／買い切りの切り替え ===== */
.ptabs{position:relative;display:grid;grid-template-columns:1fr 1fr;max-width:640px;margin:0 auto 40px;padding:6px;background:#f1f0ee;border-radius:999px}
.ptab{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:16px 10px;border:0;background:none;cursor:pointer;color:var(--ink2);font-family:inherit;transition:color .3s}
.ptab b{font-size:clamp(15px,1.6vw,19px);font-weight:800;letter-spacing:.06em}
.ptab small{font-size:11.5px;letter-spacing:.06em;opacity:.8}
.ptab.on{color:#fff}
.pthumb{position:absolute;top:6px;bottom:6px;left:6px;width:calc(50% - 6px);background:var(--ink);border-radius:999px;transition:transform .45s cubic-bezier(.77,0,.18,1)}
.ptabs[data-mode="onetime"] .pthumb{transform:translateX(100%)}
.psum{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,5vw,80px);align-items:center;max-width:1040px;margin:0 auto 36px;padding:34px 40px;background:#fff;border:1px solid var(--line);border-radius:12px}
.psum[hidden],.pmode[hidden]{display:none}
.psum-en{font-family:'Inter',sans-serif;font-size:12px;font-weight:700;letter-spacing:.18em;color:#4f6bff;text-transform:uppercase}
.psum h3{font-size:clamp(22px,2.4vw,32px);font-weight:800;margin-top:6px}
.psum-l{font-size:13.5px;line-height:1.9;color:var(--ink2);margin-top:10px}
.psum ul{list-style:none}
.psum li{position:relative;padding:10px 0 10px 28px;border-bottom:1px solid var(--line);font-size:14px;font-weight:600}
.psum li:last-child{border-bottom:none}
.psum li::before{content:"";position:absolute;left:4px;top:1.1em;width:10px;height:6px;border-left:2px solid #4f6bff;border-bottom:2px solid #4f6bff;transform:rotate(-45deg)}
.pmode{animation:pfade .5s ease}
@keyframes pfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pnote{max-width:1040px;margin:22px auto 0;font-size:12.5px;color:var(--ink2);line-height:1.8}
@media (max-width:820px){.psum{grid-template-columns:1fr;padding:24px 22px}.ptab small{display:none}.ptab{padding:14px 6px}}
@media (prefers-reduced-motion:reduce){.pthumb{transition:none}.pmode{animation:none}}

.pmode .plan:last-child:nth-child(odd){grid-column:1/-1}
.price-var{font-size:11.5px;color:#8a8f98;margin:4px 0 0;line-height:1.5;font-weight:500}
.page-hero h1.ph1{font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;margin:0;max-width:none}