/* =========================================================
   TERASU 見本05（Natee風） — structure & motion study
   ========================================================= */
:root{
  --navy:#0f1e3d;
  --navy-deep:#07122a;
  --blue:#123a8c;
  --blue-l:#2a5fc8;
  --gold:#c9a24b;
  --gold-l:#e6c779;
  --ink:#111827;
  --gray:#6b7280;
  --smoke:#f3f5f9;
  --line:rgba(15,30,61,.12);
  --en:"Poppins",system-ui,sans-serif;
  --ja:"Noto Sans JP","Hiragino Sans",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --fg:var(--ink);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;font-family:var(--ja);color:var(--fg);background:#fff;line-height:1.9;letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;transition:background-color .8s var(--ease),color .6s var(--ease)}
body[data-tone="dark"]{--fg:#fff;color:#fff}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3{margin:0;font-weight:700;text-wrap:balance}
p,li,dd{text-wrap:pretty}
p{margin:0 0 1em}
main{overflow-x:clip}
.nb{display:inline-block}
.sp-only{display:none}
.wrap{width:min(1180px,100% - 80px);margin-inline:auto;position:relative;z-index:2}

/* ---------- Loader ---------- */
.loader{position:fixed;inset:0;z-index:300;background:var(--navy);display:grid;place-items:center;pointer-events:none;animation:loaderSafety .4s 6s forwards}
@keyframes loaderSafety{to{opacity:0;visibility:hidden}}
html:not(.js) .loader,html.no-anim .loader{display:none}
.loader__logo{display:flex;gap:.08em;font-family:var(--en);font-weight:600;font-size:clamp(40px,7vw,84px);letter-spacing:.12em;color:#fff;overflow:hidden}
.loader__logo span{display:inline-block;transform:translateY(110%)}
.loader__bar{width:180px;height:2px;margin:22px auto 0;background:rgba(255,255,255,.15);overflow:hidden}
.loader__bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--gold),var(--gold-l));transform:scaleX(0);transform-origin:left}

/* ---------- Header ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:100;height:88px;padding:0 40px;display:flex;align-items:center;justify-content:space-between;
  transition:transform .5s var(--ease),background-color .4s,height .4s,box-shadow .4s}
.header.is-scrolled{height:68px;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.header.is-hidden{transform:translateY(-100%)}
body[data-tone="dark"] .header.is-scrolled{background:rgba(7,18,42,.72);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--en);font-weight:600;font-size:22px;letter-spacing:.18em;color:var(--navy)}
body[data-tone="dark"] .header .logo,.logo--w{color:#fff}
.logo__mark{width:22px;height:22px;border-radius:50%;background:conic-gradient(from 200deg,var(--gold),var(--gold-l),var(--blue-l),var(--gold));position:relative}
.logo__mark::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff}
.gnav{display:flex;align-items:center;gap:20px}
.gnav ul{display:flex;gap:32px;padding:10px 28px;border-radius:999px;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background-color .4s}
.header.is-scrolled .gnav ul{background:transparent}
body[data-tone="dark"] .gnav ul{background:rgba(255,255,255,.08)}
.gnav ul a{font-family:var(--en);font-size:14px;font-weight:500;letter-spacing:.08em;position:relative}
.gnav ul a::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.gnav ul a:hover::after{transform:scaleX(1);transform-origin:left}
.btn-pill{display:inline-flex;align-items:center;height:44px;padding:0 26px;border-radius:999px;font-family:var(--en);font-size:14px;font-weight:600;letter-spacing:.08em;color:#fff;
  background:linear-gradient(90deg,var(--navy),var(--blue-l),var(--gold),var(--navy));background-size:300% 100%;animation:gradFlow 8s linear infinite;transition:transform .3s}
.btn-pill:hover{transform:translateY(-2px)}
.burger{display:none}

/* ---------- common parts ---------- */
.mask{display:block;overflow:hidden;padding-bottom:.08em}
.mask>span{display:inline-block}
.arrow{display:inline-block;width:16px;height:16px;position:relative;flex:none}
.arrow::before{content:"";position:absolute;top:50%;left:0;width:100%;height:1.5px;background:currentColor;transform:translateY(-50%)}
.arrow::after{content:"";position:absolute;top:50%;right:0;width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:translateY(-50%) rotate(45deg)}
.btn-grad{display:inline-flex;align-items:center;gap:14px;min-height:60px;padding:14px 30px;border-radius:999px;color:#fff;font-weight:700;font-size:15px;
  background:linear-gradient(100deg,var(--navy) 0%,var(--blue-l) 35%,var(--gold) 65%,var(--navy) 100%);background-size:260% 100%;animation:gradFlow 10s linear infinite;
  box-shadow:0 14px 30px -14px rgba(18,58,140,.6);transition:transform .4s var(--ease),box-shadow .4s}
.btn-grad:hover{transform:translateY(-3px);box-shadow:0 20px 40px -14px rgba(18,58,140,.7)}
.btn-grad:hover .arrow{animation:arrowGo .6s var(--ease)}
.btn-grad--sm{min-height:52px;font-size:14px}
.btn-line{display:inline-flex;align-items:center;gap:14px;min-height:60px;padding:14px 30px;border-radius:999px;border:1px solid var(--navy);font-weight:700;font-size:15px;color:var(--navy);
  position:relative;overflow:hidden;isolation:isolate;transition:color .4s}
.btn-line::before{content:"";position:absolute;inset:0;background:var(--navy);transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1}
.btn-line:hover{color:#fff}
.btn-line:hover::before{transform:none}
@keyframes gradFlow{to{background-position:-260% 0}}
@keyframes arrowGo{0%{transform:none}49%{transform:translateX(12px);opacity:0}50%{transform:translateX(-12px);opacity:0}100%{transform:none;opacity:1}}

.link-more{display:inline-flex;align-items:center;gap:16px;font-family:var(--en);font-weight:500;font-size:15px;letter-spacing:.06em;margin-top:12px}
.circle-arrow{width:52px;height:52px;border-radius:50%;border:1px solid currentColor;position:relative;flex:none;overflow:hidden;transition:background-color .4s,border-color .4s,color .4s}
.circle-arrow::before{content:"";position:absolute;inset:0;margin:auto;width:16px;height:1.5px;background:currentColor}
.circle-arrow::after{content:"";position:absolute;top:50%;left:50%;width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:translate(1px,-50%) rotate(45deg)}
.link-more:hover .circle-arrow,a:hover>.circle-arrow{background:var(--navy);border-color:var(--navy);color:#fff}
.link-more--w:hover .circle-arrow{background:#fff;border-color:#fff;color:var(--navy)}

.sec-head{margin-bottom:56px}
.sec-head__en{font-family:var(--en);font-weight:500;font-size:clamp(44px,7.4vw,96px);line-height:1.05;letter-spacing:-.01em;color:var(--navy)}
body[data-tone="dark"] .sec-head__en,.sec-head--w .sec-head__en,.works .sec-head__en{color:#fff}
.sec-head__en .ch{display:inline-block}
.sec-head__ja{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700;margin:14px 0 0;color:var(--gold)}
.sec-head__ja::before{content:"";width:28px;height:1px;background:currentColor}
.sec-head--c{text-align:center}
.sec-head--c .sec-head__ja{justify-content:center}

/* ---------- reveal states (only when JS is on) ---------- */
html.js:not(.no-anim) .fade,
html.js:not(.no-anim) .fade-up{opacity:0;transform:translateY(36px);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
html.js:not(.no-anim) .from-left{opacity:0;transform:translateX(-60px);transition:opacity 1.1s var(--ease),transform 1.3s var(--ease)}
html.js:not(.no-anim) .reveal-clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--ease)}
html.js:not(.no-anim) .split .ch{transform:translateY(105%);transition:transform 1s var(--ease)}
html.js:not(.no-anim) .split{overflow:hidden;padding-bottom:.06em}
html.js:not(.no-anim) .is-in.fade,html.js:not(.no-anim) .is-in.fade-up,html.js:not(.no-anim) .is-in.from-left{opacity:1;transform:none}
html.js:not(.no-anim) .is-in.reveal-clip{clip-path:inset(0 0 0 0)}
html.js:not(.no-anim) .split.is-in .ch{transform:none}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:min(100svh,960px);padding:120px 0 80px;display:grid;align-items:center;overflow:hidden;background:#fff}
.hero__visual{position:absolute;top:0;right:0;width:54%;height:100%;z-index:0}
.hero__clip{position:absolute;inset:0;clip-path:polygon(28% 0,100% 0,100% 100%,0 100%);overflow:hidden}
.hero__img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);filter:saturate(.9)}
.hero__clip::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(15,30,61,.55),rgba(15,30,61,.05) 55%,rgba(201,162,75,.25))}
.hero__shape{position:absolute;pointer-events:none}
.hero__shape--a{left:-6%;bottom:-8%;width:46%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(42,95,200,.35),rgba(42,95,200,0) 65%);filter:blur(10px)}
.hero__shape--b{right:6%;top:16%;width:120px;height:120px;border:1px solid rgba(255,255,255,.6);border-radius:50%}
.hero__copy{position:relative;z-index:2;width:min(1180px,100% - 80px);margin-inline:auto}
.hero__en{font-family:var(--en);font-size:14px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.hero__catch{font-size:clamp(34px,4.3vw,64px);line-height:1.35;letter-spacing:.02em;color:var(--navy);font-weight:900}
.hero__catch em{font-style:normal;font-family:var(--en);font-weight:700;background:linear-gradient(90deg,var(--blue-l),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}
.hero__sub{max-width:520px;margin:32px 0 0;font-size:15px;color:#2b3550}
.hero__btns{display:flex;flex-wrap:wrap;gap:16px;margin-top:36px}
.hero__note{font-size:13px;color:var(--gray);margin-top:18px}
.hero__scroll{position:absolute;right:40px;bottom:32px;z-index:3;display:flex;align-items:center;gap:12px;font-family:var(--en);font-size:12px;letter-spacing:.2em;color:#fff;writing-mode:vertical-rl}
.hero__scroll i{width:1px;height:70px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:#fff;animation:scrollLine 2.2s var(--ease) infinite}
@keyframes scrollLine{to{top:100%}}
html.js:not(.no-anim) .hero__clip{clip-path:polygon(100% 0%,100% 0%,100% 100%,100% 100%)}
html.js:not(.no-anim) .hero .mask>span{transform:translateY(110%)}
html.js:not(.no-anim) .hero .fade{opacity:0;transform:translateY(24px)}

/* ---------- ABOUT ---------- */
.about{padding:140px 0 120px;background:#fff}
.about__body{display:grid;grid-template-columns:1.15fr 1fr;gap:80px;align-items:end}
.about__lead{font-size:clamp(28px,3.6vw,48px);font-weight:900;line-height:1.55;color:var(--navy);margin:0}
.about__text p{font-size:16px}

/* ---------- marquee band ---------- */
.band{position:relative;z-index:3;height:64px;display:flex;align-items:center;overflow:hidden;color:#fff;
  background:linear-gradient(90deg,var(--navy),var(--blue-l),var(--gold),var(--navy));background-size:300% 100%;animation:gradFlow 14s linear infinite}
.band__track{display:flex;align-items:center;gap:40px;white-space:nowrap;padding-right:40px;font-family:var(--en);font-weight:600;font-size:20px;letter-spacing:.14em;will-change:transform;animation:loop 26s linear infinite}
.band__track b{font-weight:400;color:var(--gold-l)}
@keyframes loop{to{transform:translateX(-50%)}}

/* ---------- SERVICE ---------- */
.service{position:relative;padding:140px 0 0;background:var(--smoke);overflow:hidden}
.texture{position:absolute;top:40px;right:-2vw;font-family:var(--en);font-weight:700;font-size:20vw;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(15,30,61,.07);pointer-events:none;white-space:nowrap;z-index:0}
.biz--main{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center;margin-bottom:72px}
.biz__img{border-radius:20px;overflow:hidden;aspect-ratio:3/2;box-shadow:0 30px 60px -30px rgba(15,30,61,.4)}
.biz__img img{width:100%;height:118%;object-fit:cover;margin-top:-9%}
.biz__no,.card__no{font-family:var(--en);font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--blue-l);margin-bottom:10px}
.biz__ttl{font-size:clamp(26px,3vw,40px);color:var(--navy);margin-bottom:22px;line-height:1.4}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 10px}
.tags li{font-size:13px;font-weight:700;padding:6px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--navy)}
.biz-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.card{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 10px 30px -18px rgba(15,30,61,.35);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.card:hover{transform:translateY(-8px);box-shadow:0 30px 50px -24px rgba(15,30,61,.45)}
.card__img{aspect-ratio:16/9;overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.card:hover .card__img img{transform:scale(1.07)}
.card__body{padding:32px 34px 36px}
.card__ttl{font-size:22px;color:var(--navy);margin-bottom:14px;line-height:1.5}
.card__body p{font-size:15px}
.card__acc{font-family:var(--en);font-weight:600;color:var(--blue-l)}
.flow{display:flex;flex-direction:column;gap:8px;counter-reset:f;margin-top:6px}
.flow li{counter-increment:f;display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700;padding:10px 14px;border-radius:10px;background:var(--smoke);color:var(--navy)}
.flow li::before{content:counter(f,decimal-leading-zero);font-family:var(--en);font-size:12px;color:var(--gold)}
.others{margin-top:32px;padding:28px 34px;border-radius:20px;background:var(--navy);color:#fff;display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.others__ttl{margin:0;font-weight:700;color:var(--gold-l)}
.others ul{display:flex;flex-wrap:wrap;gap:10px 28px}
.others li{font-size:15px;position:relative;padding-left:16px}
.others li::before{content:"";position:absolute;left:0;top:.8em;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.photo-loop{margin-top:120px;overflow:hidden;padding-bottom:140px}
.photo-loop__track{display:flex;gap:20px;width:max-content;animation:loop 40s linear infinite}
.photo-loop__track img{width:300px;height:200px;object-fit:cover;border-radius:14px;flex:none}
.photo-loop__track img:nth-child(even){margin-top:40px}

/* ---------- WORKS (dark, diagonal) ---------- */
.works{position:relative;padding:220px 0 140px;clip-path:polygon(0 140px,100% 0,100% 100%,0 100%);margin-top:-1px;background:linear-gradient(180deg,#000 0%,var(--navy-deep) 40%,var(--blue) 100%);color:#fff}
html.js:not(.no-anim) .message,html.js:not(.no-anim) .contact,html.js:not(.no-anim) .service,html.js:not(.no-anim) .about,html.js:not(.no-anim) .news{background:transparent}
.works__list{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.work{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:18px 18px 28px;backdrop-filter:blur(6px);transition:transform .6s var(--ease),background-color .4s}
.work:hover{transform:translateY(-8px);background:rgba(255,255,255,.09)}
.work__img{border-radius:12px;overflow:hidden;aspect-ratio:7/5;margin-bottom:22px}
.work__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.work:hover .work__img img{transform:scale(1.07)}
.work__cat{font-size:13px;color:var(--gold-l);margin:0 6px 6px;font-weight:700}
.work__ttl{font-size:18px;line-height:1.6;margin:0 6px 18px}
.work__ttl small{display:block;font-size:12px;font-weight:400;opacity:.7}
.work__nums{margin:0 6px;display:grid;gap:14px}
.work__nums div{border-top:1px solid rgba(255,255,255,.14);padding-top:12px}
.work__nums dt{font-size:12px;opacity:.75}
.work__nums dd{margin:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.work__nums b{font-family:var(--en);font-weight:600;font-size:30px;line-height:1.3;background:linear-gradient(90deg,#fff,var(--gold-l));-webkit-background-clip:text;background-clip:text;color:transparent}
.work__nums .from{font-family:var(--en);font-size:15px;opacity:.7}
.work__nums i{font-style:normal;opacity:.6}
.works__note{margin:32px 0 10px;font-size:13px;opacity:.75}

/* ---------- MESSAGE ---------- */
.message{padding:140px 0;background:var(--blue);color:#fff}
.message__grid{display:grid;grid-template-columns:.85fr 1fr;gap:80px;align-items:center}
.message__img{border-radius:24px;overflow:hidden;aspect-ratio:3/4}
.message__img img{width:100%;height:118%;object-fit:cover;margin-top:-9%}
.message__lead{font-size:clamp(24px,2.8vw,36px);font-weight:900;line-height:1.6;margin-bottom:30px}
.message__body p{font-size:15px}
.message__sign{margin-top:28px;font-size:20px;font-weight:700;display:flex;align-items:baseline;gap:14px}
.message__sign span{font-size:13px;font-weight:400;opacity:.8}

/* ---------- NEWS ---------- */
.news{padding:140px 0;background:#fff}
.news__grid{display:grid;grid-template-columns:320px 1fr;gap:60px;align-items:start}
.news__list li{border-bottom:1px solid var(--line)}
.news__list li:first-child{border-top:1px solid var(--line)}
.news__list a{display:grid;grid-template-columns:110px 96px 1fr 52px;gap:20px;align-items:center;padding:30px 0;transition:padding .5s var(--ease)}
.news__list a:hover{padding-left:12px}
.news__list time{font-family:var(--en);font-size:14px;color:var(--gray)}
.news__tag{font-family:var(--en);font-size:12px;text-align:center;padding:3px 0;border-radius:999px;border:1px solid var(--line);color:var(--blue-l)}
.news__list p{margin:0;font-size:15px;font-weight:500}

/* ---------- CONTACT ---------- */
.contact{position:relative;padding:140px 0 150px;background:var(--navy);color:#fff;overflow:hidden}
.contact__glow{position:absolute;inset:-20%;background:radial-gradient(40% 40% at 20% 30%,rgba(42,95,200,.45),transparent 70%),radial-gradient(35% 35% at 80% 70%,rgba(201,162,75,.35),transparent 70%);animation:glow 14s ease-in-out infinite alternate;pointer-events:none}
@keyframes glow{to{transform:translate(4%,-4%) rotate(8deg)}}
.contact__lead{text-align:center;max-width:640px;margin:-20px auto 56px;font-size:15px;opacity:.9}
.contact__cols{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:40px;max-width:980px;margin:0 auto}
.contact__line{width:1px;height:166px;background:rgba(255,255,255,.2)}
.contact__box{display:flex;flex-direction:column;align-items:center;gap:12px;padding:30px 10px;border-radius:20px;transition:background-color .4s}
.contact__box:hover{background:rgba(255,255,255,.05)}
.contact__en{font-family:var(--en);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-l)}
.contact__ttl{font-size:clamp(20px,2.2vw,28px);font-weight:700;margin-bottom:12px}

/* ---------- Footer ---------- */
.footer{position:relative;z-index:2;background:#020b1c;color:#fff;padding:90px 0 40px}
.footer__grid{display:grid;grid-template-columns:1fr 2fr;gap:60px}
.footer__brand p{font-size:13px;opacity:.7;margin-top:20px;line-height:2}
.footer__nav{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.footer__nav li{margin-bottom:12px}
.footer__nav a{font-size:13px;opacity:.8;transition:opacity .3s,color .3s}
.footer__nav a:hover{opacity:1;color:var(--gold-l)}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;margin-top:60px;padding-top:28px;border-top:1px solid rgba(255,255,255,.1);font-family:var(--en);font-size:12px;opacity:.7}
.footer .logo__mark::after{background:#020b1c}

/* ---------- sample badge ---------- */
.sample-badge{position:fixed;left:12px;bottom:12px;z-index:400;padding:6px 12px;border-radius:6px;background:rgba(17,24,39,.86);color:#fff;font-size:11px;letter-spacing:.04em;line-height:1.5;pointer-events:none}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .wrap,.hero__copy{width:calc(100% - 40px)}
  .header{height:64px;padding:0 20px}
  .header.is-scrolled{height:60px}
  .burger{display:block;position:relative;z-index:120;width:44px;height:44px;border:0;border-radius:50%;background:var(--navy);cursor:pointer}
  .burger span{position:absolute;left:13px;width:18px;height:1.5px;background:#fff;transition:transform .4s var(--ease),top .4s}
  .burger span:first-child{top:18px}.burger span:last-child{top:25px}
  .nav-open .burger span:first-child{top:21px;transform:rotate(45deg)}
  .nav-open .burger span:last-child{top:21px;transform:rotate(-45deg)}
  .gnav{position:fixed;inset:0;z-index:110;flex-direction:column;justify-content:center;gap:40px;background:var(--navy);color:#fff;
    clip-path:circle(0 at calc(100% - 42px) 32px);transition:clip-path .8s var(--ease);visibility:hidden}
  .nav-open .gnav{clip-path:circle(150% at calc(100% - 42px) 32px);visibility:visible}
  .gnav ul{flex-direction:column;align-items:center;gap:22px;background:none!important;padding:0}
  .gnav ul a{font-size:28px}
  .nav-open .logo{color:#fff;position:relative;z-index:120}
  .hero{padding:96px 0 70px;align-items:end;min-height:auto}
  .hero__visual{position:relative;width:100%;height:auto;aspect-ratio:5/4;max-height:56svh;margin-bottom:12px}
  .hero__clip{clip-path:polygon(0 0,100% 0,100% 100%,0 86%)}
  .hero{display:block}
  .hero__shape--b{display:none}
  .hero__catch{font-size:clamp(28px,8.4vw,44px)}
  .hero__sub{font-size:14px;background:none}
  .hero__btns{flex-direction:column;align-items:stretch}
  .btn-grad,.btn-line{justify-content:space-between;font-size:14px;padding:14px 24px}
  .hero__scroll{display:none}
  .about,.news,.message{padding:96px 0}
  .about__body,.biz--main,.biz-grid,.message__grid,.news__grid,.footer__grid{grid-template-columns:1fr;gap:36px}
  .service{padding-top:96px}
  .card__body{padding:26px 22px 30px}
  .works{padding:140px 0 96px}
  .works{clip-path:polygon(0 70px,100% 0,100% 100%,0 100%)}
  .works__list{grid-template-columns:1fr}
  .message__img{aspect-ratio:4/3}
  .news__list a{grid-template-columns:auto 1fr;gap:6px 14px;padding:22px 0}
  .news__list p{grid-column:1/-1}
  .news__tag{justify-self:start;padding:3px 14px}
  .news__list .circle-arrow{display:none}
  .contact{padding:96px 0 110px}
  .contact__cols{grid-template-columns:1fr;gap:12px}
  .contact__line{width:100%;height:1px}
  .footer__nav{grid-template-columns:1fr 1fr}
  .footer__bottom{flex-direction:column;gap:10px;align-items:flex-start}
  .photo-loop{margin-top:80px;padding-bottom:110px}
  .photo-loop__track img{width:200px;height:140px}
  .sp-only{display:inline}
  .sec-head{margin-bottom:40px}
  .others{padding:24px 22px;gap:14px}
}
@media (max-width:420px){
  .footer__nav{grid-template-columns:1fr}
  .band__track{font-size:16px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .band__track,.photo-loop__track{animation:none!important}
}