@import url("../fonts/fonts.css");

:root{
  --acc:#23463c;
  --acc-dark:#1a352d;
  --ink:#171a19;
  --body:#3d4341;
  --muted:#5d6461;
  --ghost:#a9afad;
  --ghost-acc:#a7c0b6;
  --line:#c3d2cb;
  --grey:#f2f3f1;
  --chip:#eceeec;
  --arrow:#b97c3a;
  --pad:60px;
  --head:'Zen Kaku Gothic New','Oswald','Arial Narrow',sans-serif;
  --text:'Noto Sans JP','Barlow',-apple-system,system-ui,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:#fff; color:var(--body);
  font-family:var(--text); font-size:15px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  word-break:auto-phrase; line-break:strict;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit}

.wrap{width:100%; max-width:1440px; margin:0 auto; padding:0 var(--pad)}
.sect{padding:88px 0}
.sect--tight{padding:88px 0}
.sect--progintro{padding:88px 0 65px}
.sect--membintro{padding:88px 0 104px}

h1,h2,h3,h4{font-family:var(--head); font-weight:900; color:var(--ink); margin:0;
  letter-spacing:.005em; line-height:1.0; word-break:auto-phrase; line-break:strict}
.h-xxl{font-size:64px; line-height:1.32; letter-spacing:.004em}
.h-xl{font-size:52px; line-height:1.3; letter-spacing:0}
.h-l{font-size:40px; line-height:1.3; letter-spacing:0}
.h-m{font-size:34px; line-height:1.3; letter-spacing:0}
.h-s{font-size:22px; line-height:1.4; letter-spacing:0}
.eyebrow{font-family:var(--text); font-size:15px; font-weight:500; color:var(--acc);
  letter-spacing:.06em; margin:0 0 10px; line-height:1.4}
.lead{font-size:15px; color:var(--body); margin:10px 0 0; max-width:1280px}
.btnrow{margin:43px 0 0; line-height:0}
.small{font-size:15px; color:var(--muted)}
.lat{font-family:'Oswald',var(--head),sans-serif; text-transform:uppercase}

.btn{
  display:inline-block; background:var(--acc); color:#fff;
  font-family:var(--text); font-weight:700; font-size:16px; line-height:1.2; letter-spacing:.03em;
  padding:11px 25px; border:1px solid var(--acc); vertical-align:top;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover{background:#fff; color:var(--acc); border-color:var(--ink)}
.btn--ghost{background:#fff; color:var(--acc); border-color:var(--ink)}
.btn--ghost:hover{background:var(--acc); color:#fff; border-color:var(--acc)}

.roll{display:inline-block; overflow:hidden; vertical-align:top; position:relative}
.roll span{display:block; transition:transform .38s cubic-bezier(.22,1,.36,1)}
.roll span + span{position:absolute; left:0; top:100%; width:100%}
.roll:hover span,a:hover .roll span{transform:translateY(-100%)}

.strip{background:var(--acc); color:#fff}
.strip .wrap{display:flex; justify-content:flex-end; align-items:center; gap:40px; height:30px}
.strip span{display:flex; align-items:center; gap:14px; font-size:12px; letter-spacing:.06em; line-height:1}
.strip .ofc{font-size:12px; letter-spacing:.04em}

.nav{background:#fff; position:relative; z-index:50}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:81px; padding-left:24px}
.nav__logo{display:block; line-height:1}
.nav__logo b{display:block; font-family:var(--head); font-weight:900; font-size:30px; color:var(--ink); letter-spacing:.08em; line-height:1}
.nav__logo i{display:block; font-style:normal; font-size:11px; color:var(--muted); letter-spacing:.24em; margin-top:5px}
.nav__links{display:flex; align-items:center; gap:22px}
.nav__links a{font-size:15px; color:var(--ink); letter-spacing:.02em; line-height:1.4}
.nav__links a.is-here{font-weight:700}
.nav__cta{margin-left:12px; padding-left:14px; padding-right:14px}
.lang{font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:.14em; color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:2px}
.lang:hover{color:var(--acc); border-color:var(--acc)}
.burger{display:none; width:40px; height:28px; border:0; background:none; padding:0; cursor:pointer}
.burger i{display:block; height:2px; background:var(--ink); margin:7px 0; transition:transform .3s ease, opacity .25s ease}
.drawer{display:none}

.hero{padding:50px 0 0}
.hero__grid{display:grid; grid-template-columns:630px 1fr; gap:62px; align-items:start}
.hero h1{margin-bottom:18px}
.hero__sub{font-size:15px; color:var(--body); max-width:620px; margin:0}
.hero__media{width:100%; aspect-ratio:628/622; overflow:hidden; background:#111}
.hero__media video,.hero__media img{width:100%; height:100%; object-fit:cover}

.form{background:var(--acc); color:#fff; padding:25px 30px 32px; margin-top:24px}
.form h3{color:#fff; font-size:24px; margin-bottom:22px; line-height:1.3}
.form__grid{display:grid; grid-template-columns:1fr 1fr; gap:22px 44px}
.form input:not(.submit){
  width:100%; background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.65);
  color:#fff; font-family:var(--text); font-size:15px; padding:8px 0 10px; outline:none;
  transition:border-color .25s ease;
}
.form input::placeholder{color:rgba(255,255,255,.92); letter-spacing:.02em}
.form input:focus{border-bottom-color:#fff}
.form input.submit{
  background:#fff; color:var(--acc); border:1px solid #fff; font-family:var(--text); font-weight:700;
  font-size:16px; letter-spacing:.03em; padding:12px 18px; cursor:pointer;
  transition:background .25s ease, color .25s ease;
}
.form input.submit:hover{background:var(--acc-dark); color:#fff}

.split{display:grid; grid-template-columns:628px 1fr; gap:64px; align-items:start}
.split__media img{width:100%; aspect-ratio:628/441; object-fit:cover}
.split__body p{margin:0 0 14px}

.statement{display:grid; grid-template-columns:1fr 322px; gap:78px; align-items:start}
.statement h2{font-size:38px; line-height:1.46; letter-spacing:0}
.statement__art img{width:100%; aspect-ratio:322/241; object-fit:cover}

.whyus{display:grid; grid-template-columns:628px 1fr; gap:64px; align-items:start}
.whyus > div:first-child img{width:100%; aspect-ratio:628/570; object-fit:cover}
.whyus__stats{display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-top:58px}
.whyus__stats b{display:block; font-family:var(--head); font-size:34px; color:var(--ink); font-weight:900; line-height:1.2}
.whyus__stats p{margin:6px 0 0; font-size:15px; color:var(--body)}

.prow{border-top:2px solid var(--acc); transform-origin:50% 100%; will-change:transform, opacity}
.prow:last-child{border-bottom:2px solid var(--acc)}
.prow__in{display:grid; grid-template-columns:1fr 636px; gap:48px; align-items:center; padding:20px 0 24px; position:relative}
.prow__txt h3{font-size:34px; letter-spacing:0; margin-bottom:14px; line-height:1.3}
.prow__txt p{margin:0 0 30px; max-width:625px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.prow__more{font-size:15px; color:var(--ink); letter-spacing:.02em}
.prow__media{position:relative; overflow:hidden; aspect-ratio:1/.805}
.prow__media img{width:100%; height:100%; object-fit:cover}
.pill{
  position:absolute; left:0; top:0; pointer-events:none; opacity:0;
  transform:translate(-50%,-50%) scale(.6); background:var(--acc); color:#fff;
  font-size:13px; letter-spacing:.04em; padding:7px 13px; white-space:nowrap;
  transition:opacity .22s ease, transform .22s ease;
}
.prow:hover .pill{opacity:1; transform:translate(-50%,-50%) scale(1)}

.band-grey{background:var(--grey)}
.dropin{display:grid; grid-template-columns:628px 1fr; gap:64px; align-items:center}
.dropin img{width:100%; aspect-ratio:628/436; object-fit:cover}

.marquee{background:var(--acc); overflow:hidden; display:flex}
.marquee__track{display:flex; flex:0 0 auto; align-items:center; animation:march 30s linear infinite}
.marquee span{
  font-family:var(--head); color:#fff; font-size:104px; line-height:1.875;
  white-space:nowrap; padding-right:56px; font-weight:900;
  display:inline-block; letter-spacing:.06em;
}
@keyframes march{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:42px; margin-top:96px}
.qstep{margin:0}
.qstep b{display:block; font-family:var(--head); font-weight:900; font-size:19px; color:var(--acc);
  letter-spacing:.14em; margin-bottom:16px; line-height:1}
.qstep h3{font-size:22px; line-height:1.4; margin-bottom:14px}
.qstep p{margin:0; font-size:15px; color:var(--body)}

.stick{display:grid; grid-template-columns:1fr 628px; gap:64px; align-items:start}
.stick__side{position:sticky; top:56px}
.crow{display:grid; grid-template-columns:239px 1fr; gap:52px; align-items:center;
  border-bottom:1px solid var(--acc); padding:0 0 22px; margin-bottom:25px}
.crow:first-child{padding-top:0}
.crow img{width:100%; height:auto; aspect-ratio:239/165; object-fit:cover}
.crow h3{font-size:24px; margin-bottom:12px; line-height:1.3}
.crow .role{margin:0; font-size:15px; color:var(--muted); letter-spacing:.02em}
.crow .role span{display:inline-block}

.mrow{position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:30px; border-bottom:1px solid var(--line); padding:21px 0 25px; overflow:hidden}
.mrow:first-child{border-top:1px solid var(--line)}
.mrow__bg{position:absolute; left:-2%; right:-2%; top:0; height:150%; background:var(--acc);
  border-radius:52% 52% 0 0 / 22% 22% 0 0; transform:translateY(102%) rotate(-1.1deg);
  transition:transform .5s cubic-bezier(.4,0,.2,1)}
.mrow:hover .mrow__bg{transform:translateY(-14%) rotate(0deg)}
.mrow__txt{position:relative; transition:transform .45s cubic-bezier(.22,1,.36,1), color .35s ease}
.mrow:hover .mrow__txt{transform:translateX(26px)}
.mrow h3{font-size:40px; letter-spacing:0; margin-bottom:8px; line-height:1.25; transition:color .3s ease}
.mrow p{margin:0; font-size:16px; letter-spacing:.02em; color:var(--ink); line-height:1.6; transition:color .3s ease}
.mrow:hover h3,.mrow:hover p{color:#fff}
.mrow__arrow{position:relative; flex:0 0 auto; width:70px; height:70px; border-radius:50%;
  background:var(--chip); display:grid; place-items:center; transition:background .3s ease}
.mrow:hover .mrow__arrow{background:#fff}
.mrow__arrow svg{width:28px; height:28px; stroke:var(--arrow); stroke-width:2.2; fill:none}

.faq__list{border-top:1px solid var(--acc)}
.faq__item{border-bottom:2px solid var(--acc); padding:22px 0 20px}
.faq__item h3{font-family:var(--text); font-weight:700; font-size:17px; color:var(--ink);
  letter-spacing:.01em; line-height:1.6; margin:0 0 12px}
.faq__item p{margin:0; font-size:15px}
.faq__item a{color:var(--acc); text-decoration:underline; text-underline-offset:3px}

.foot{background:var(--acc); color:#fff; padding:88px 0 0}
.foot__grid{display:grid; grid-template-columns:34% 34% minmax(0,1fr); gap:40px}
.foot__logo b{display:block; font-family:var(--head); font-weight:900; font-size:56px; color:#fff; letter-spacing:.1em; line-height:1}
.foot__logo i{display:block; font-style:normal; font-family:'Oswald',sans-serif; font-size:13px;
  letter-spacing:.3em; margin-top:10px; color:rgba(255,255,255,.82)}
.foot__nav{display:flex; flex-direction:column; gap:14px}
.foot__nav a{font-size:16px; letter-spacing:.02em}
.foot h4{font-family:var(--text); font-weight:700; font-size:14px; color:#fff;
  letter-spacing:.06em; margin:0 0 6px}
.foot__col p{margin:0 0 26px; font-size:16px; letter-spacing:.02em; line-height:1.7}
.foot__bar{display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.45); margin-top:72px; padding:22px 0 26px; font-size:14px}
.foot__bar .soc{display:flex; gap:14px; align-items:center}
.foot__bar .soc svg{width:22px; height:22px; fill:#fff}
.foot__bar .meta{display:flex; gap:32px; letter-spacing:.02em}
.foot__notice{border-top:1px solid rgba(255,255,255,.28); padding:20px 0 0; margin-top:44px;
  font-size:13px; line-height:1.8; color:rgba(255,255,255,.88)}

.rv{opacity:0; transform:translateY(26px)}
.rv.is-in{opacity:1; transform:none; transition:opacity .85s ease, transform .85s ease}
.pw{color:var(--ghost); transition:color .2s ease}
.pw.is-on{color:var(--ink)}
.eyebrow .pw{color:var(--ghost-acc)}
.eyebrow .pw.is-on{color:var(--acc)}

@media (prefers-reduced-motion: reduce){
  .rv{opacity:1; transform:none}
  .marquee__track{animation:none}
  .prow{transform:none !important; opacity:1 !important}
}

@media (max-width:1280px){
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .split,.whyus,.dropin{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .stick{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .prow__in{grid-template-columns:minmax(0,1fr) 48%}
  .statement{grid-template-columns:minmax(0,1fr) 25%}
  .crow{grid-template-columns:239px minmax(0,1fr); gap:38px}
}

@media (max-width:991px){
  :root{--pad:32px}
  .h-xxl{font-size:48px; line-height:1.36}
  .h-xl{font-size:38px}
  .h-l{font-size:31px}
  .statement h2{font-size:30px}
  .nav__links{display:none}
  .nav .wrap{padding-left:0}
  .burger{display:block}
  .drawer{display:grid; position:absolute; left:0; right:0; z-index:60; background:#fff;
    grid-template-rows:0fr; text-align:center;
    transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1)}
  .drawer.is-open{grid-template-rows:1fr}
  .drawer__in{overflow:hidden; min-height:0; padding:0 20px}
  .drawer a:first-child{margin-top:38px}
  .drawer a{display:block; font-family:var(--text); font-size:16px; color:var(--ink);
    letter-spacing:.02em; padding:0 0 21px}
  .drawer a.is-here{font-weight:700}
  .drawer a.btn{display:inline-block; color:#fff; margin:5px 0 12px; padding:11px 25px}
  .drawer a.btn:hover{color:var(--acc)}
  .drawer a.lang{display:inline-block; margin:0 0 30px; padding:0 0 2px}
  .burger{position:relative; z-index:70}
  .burger.is-open i:nth-child(1){transform:translateY(9px) rotate(45deg)}
  .burger.is-open i:nth-child(2){opacity:0}
  .burger.is-open i:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

  .hero__grid{grid-template-columns:minmax(0,1fr); gap:26px}
  .hero__media{aspect-ratio:2.93/1}
  .statement,.stick{grid-template-columns:minmax(0,1fr); gap:30px}
  .statement__art img{aspect-ratio:835/430}
  .whyus > div:first-child img{aspect-ratio:403/443}
  .split,.whyus,.dropin{gap:32px}
  .stick__side{position:static; top:auto}
  .prow__in{grid-template-columns:minmax(0,1fr) minmax(0,360px); gap:32px}
  .prow__txt h3{font-size:26px}
  .quotes{grid-template-columns:1fr; gap:46px}
  .marquee span{font-size:66px; line-height:1.9}
  .foot__grid{grid-template-columns:1fr 1fr; gap:34px}
  .foot__logo b{font-size:44px}
}

@media (max-width:767px){
  :root{--pad:16px}
  .sect{padding:72px 0}
  .sect--tight,.sect--progintro,.sect--membintro{padding:72px 0}
  .h-xxl{font-size:38px; line-height:1.38}
  .h-xl{font-size:31px}
  .h-l{font-size:27px}
  .h-m{font-size:26px}
  .statement h2{font-size:25px; line-height:1.5}
  .nav .wrap{height:72px}
  .nav__logo b{font-size:24px}
  .nav__logo i{font-size:10px; letter-spacing:.2em}
  .hero__media{aspect-ratio:2.88/1}
  .prow__in{grid-template-columns:minmax(0,1fr); gap:22px; padding:34px 0}
  .prow__txt h3{font-size:27px}
  .prow__txt p{margin-bottom:18px}
  .prow__media{aspect-ratio:1/1}
  .crow{grid-template-columns:minmax(0,1fr); gap:18px}
  .crow img{max-width:210px}
  .whyus__stats{grid-template-columns:1fr; gap:26px; margin-top:34px}
  .marquee span{font-size:46px; padding-right:34px; line-height:1.95}
  .quotes{margin-top:52px}
  .foot__grid{grid-template-columns:1fr; gap:34px}
  .foot{padding:64px 0 0}
  .foot__bar{flex-direction:column; align-items:flex-start; gap:18px; margin-top:52px}
  .foot__bar .meta{flex-direction:column; gap:8px}
  .mrow{flex-wrap:wrap; gap:16px}
  .mrow h3{font-size:26px}
  .mrow__arrow{width:54px; height:54px}
  .strip .wrap{gap:18px; height:28px}
  .strip .ofc{font-size:10px}
}

@media (max-width:479px){
  .split,.whyus,.dropin{grid-template-columns:minmax(0,1fr); gap:24px}
  .whyus > div:first-child img{aspect-ratio:628/441}
  .h-xxl{font-size:31px; line-height:1.42}
  .h-xl{font-size:26px}
  .h-l{font-size:24px}
  .statement h2{font-size:22px}
  .hero{padding:26px 0 0}
  .hero__media{aspect-ratio:1.24/1}
  .form{margin-top:20px; padding:26px 20px 30px}
  .form h3{font-size:21px}
  .form__grid{grid-template-columns:1fr; gap:26px}
  .marquee span{font-size:36px; padding-right:26px; line-height:2}
  .mrow h3{font-size:23px}
  .strip .wrap{gap:12px}
  .strip span{font-size:10px; letter-spacing:.02em}
}