
:root{--orange:#FF7E41;--orange-d:#D9541C;--orange-s:#FFEDE2;--yellow:#FFE991;--yellow-s:#FFF8DF;
--teal:#1BB3AF;--teal-s:#DFF4F3;--green:#86C265;--green-s:#E9F4E1;
--ground:#FFFCF7;--surface:#fff;--ink:#2B2A28;--ink-2:#6E6860;--line:#E8E2D8;--black:#0B0A0C;
--round:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",sans-serif;
--disp:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;
--lat:"Lato",Arial,sans-serif;--body:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;
--head:url(../img/img-8bebfcef0f.jpg)}
*{box-sizing:border-box}
html,body{margin:0;overflow-x:clip}
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.95}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:1140px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.note{background:var(--yellow);font-size:12px;font-weight:700;text-align:center;padding:6px 16px}
header.site{position:sticky;top:0;z-index:40;background:rgba(255,252,247,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hbar{display:flex;align-items:center;justify-content:space-between;gap:18px;height:72px}
.logo{flex:none}
.logo img{height:30px;width:auto;max-width:none;flex:none}
nav.g ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;font-size:13.5px;font-weight:500}
nav.g a{text-decoration:none;display:block;padding:8px 13px;border-radius:999px;white-space:nowrap}
nav.g a.on{background:var(--orange-s);color:var(--orange-d);font-weight:700}
.cta{display:inline-flex;align-items:center;gap:9px;background:var(--orange);color:#fff;font-family:var(--round);font-weight:700;
 font-size:13.5px;text-decoration:none;padding:11px 20px;border-radius:999px;box-shadow:0 3px 0 var(--orange-d)}
.brandbar{display:flex;height:4px}.brandbar i{flex:1}
.brandbar i:nth-child(1){background:var(--orange)}.brandbar i:nth-child(2){background:var(--yellow)}
.brandbar i:nth-child(3){background:var(--teal)}.brandbar i:nth-child(4){background:var(--green)}

.phead{color:#fff;padding-block:clamp(56px,8vw,104px);position:relative;overflow:hidden;
 background-image:linear-gradient(90deg,rgba(11,10,12,.94) 8%,rgba(11,10,12,.62) 55%,rgba(11,10,12,.38)),var(--head);
 background-size:cover;background-position:center}
.phead::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,10,12,.35),transparent 30%,rgba(11,10,12,.5))}
.phead .wrap{position:relative;z-index:2}
.crumb{font-size:12px;color:rgba(255,255,255,.62)}
.phead .en{font:900 12px var(--lat);letter-spacing:.22em;color:var(--orange);margin:18px 0 0;display:block}
.phead h1{font-family:var(--disp);font-weight:900;font-size:clamp(27px,3.8vw,44px);margin:8px 0 0;text-shadow:0 4px 24px rgba(0,0,0,.4)}
.phead p{margin:14px 0 0;color:rgba(255,255,255,.8);font-size:14.5px;max-width:40em}

section{padding-block:clamp(50px,7vw,92px)}
.sechead{margin-bottom:clamp(22px,3vw,38px)}
.sechead .en{font:900 12px var(--lat);letter-spacing:.2em;color:var(--orange)}
.sechead h2{font-family:var(--disp);font-weight:900;font-size:clamp(25px,3.4vw,38px);margin:6px 0 0}
.sechead p{margin:12px 0 0;color:var(--ink-2);max-width:44em}

/* vision / mission */
.vm{background:var(--surface);border-block:1px solid var(--line)}
.vmbox{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,30px)}
.vcard{border-radius:clamp(22px,3vw,34px);padding:clamp(24px,3.4vw,44px);border:1px solid var(--line);background:var(--ground)}
.vcard.hero{background:var(--black);color:#fff;border-color:var(--black);grid-column:1/-1}
.vcard .lab{font:900 11px var(--lat);letter-spacing:.2em;color:var(--orange)}
.vcard.hero h2{font-family:var(--disp);font-weight:900;font-size:clamp(28px,4.6vw,56px);margin:14px 0 0;line-height:1.35}
.vcard.hero h2 .o{color:var(--orange)}
.vcard h3{font-family:var(--disp);font-weight:900;font-size:clamp(19px,2.3vw,25px);margin:12px 0 10px;line-height:1.6}
.vcard p{margin:0;color:var(--ink-2);font-size:14.5px}
.vcard.hero p{color:rgba(255,255,255,.75);margin-top:16px}

/* message */
.msg{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(22px,3.4vw,52px);align-items:start}
.msgph{border-radius:clamp(20px,2.6vw,30px);overflow:hidden}
.msgph img{width:100%;aspect-ratio:4/5;object-fit:cover}
.msgtx h2{font-family:var(--disp);font-weight:900;font-size:clamp(22px,2.9vw,32px);margin:10px 0 18px;line-height:1.6}
.msgtx p{margin:0 0 16px;color:var(--ink-2);font-size:14.5px}
.sign{display:flex;align-items:baseline;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.sign span{font-size:12.5px;color:var(--ink-2)}
.sign b{font-family:var(--disp);font-weight:900;font-size:20px}

/* story */
.story{background:var(--black);color:#fff}
.story .sechead h2{color:#fff}
.storyrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3.4vw,48px);align-items:center}
.storyph{border-radius:clamp(20px,2.6vw,30px);overflow:hidden}
.storyph img{width:100%;aspect-ratio:16/9;object-fit:cover}
.story p{color:rgba(255,255,255,.76);font-size:14.5px;margin:0 0 14px}
.story p b{color:#fff}

/* numbers */
.nums{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.8vw,22px)}
.nums div{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:20px 18px}
.nums b{display:block;font:900 clamp(24px,3vw,36px) var(--lat);color:var(--orange);line-height:1.1}
.nums em{font-style:normal;font-family:var(--round);font-weight:800;font-size:14px;margin-left:3px;color:var(--ink)}
.nums span{font-size:12px;color:var(--ink-2)}

/* values */
.vals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,28px)}
.val{display:flex;flex-direction:column;gap:12px}
.val .ph{border-radius:24px;overflow:hidden}
.val .ph img{width:100%;aspect-ratio:4/3;object-fit:cover}
.val .no{font:900 11px var(--lat);letter-spacing:.16em;color:var(--orange)}
.val h3{font-family:var(--disp);font-weight:900;font-size:20px;margin:0}
.val p{margin:0;color:var(--ink-2);font-size:13.5px}

/* history */
.hist{background:var(--surface);border-top:1px solid var(--line)}
.tl{position:relative;padding-left:clamp(18px,3vw,34px)}
.tl::before{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:2px;background:var(--line)}
.ti{position:relative;padding:0 0 clamp(22px,2.8vw,34px) clamp(14px,2vw,26px)}
.ti::before{content:"";position:absolute;left:-7px;top:9px;width:14px;height:14px;border-radius:50%;background:var(--orange);border:3px solid var(--surface)}
.ti time{font:900 15px var(--lat);color:var(--orange-d)}
.ti h3{font-family:var(--disp);font-weight:900;font-size:18px;margin:4px 0 6px}
.ti p{margin:0;color:var(--ink-2);font-size:13.5px}

/* CTA X3 */
.cend{background:var(--black);color:#fff}
.ctwo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,3vw,46px);align-items:center}
.cend .lab{font:900 11px var(--lat);letter-spacing:.22em;color:var(--orange)}
.cend h2{font-family:var(--disp);font-weight:900;font-size:clamp(23px,3vw,34px);margin:12px 0 10px;line-height:1.5}
.cend p{margin:0;color:rgba(255,255,255,.72);font-size:14px}
.huge{display:inline-flex;align-items:center;gap:13px;background:var(--orange);color:#fff;font-family:var(--disp);font-weight:900;
 font-size:clamp(19px,2.4vw,27px);padding:clamp(18px,2.4vw,27px) clamp(30px,4.4vw,52px);border-radius:999px;text-decoration:none;
 box-shadow:0 14px 32px rgba(255,126,65,.3)}
.huge i{font-style:normal;font:900 21px var(--lat)}
.tel{margin-top:16px}
.tel span{display:block;font-size:11.5px;color:rgba(255,255,255,.6)}
.tel b{font:900 22px var(--lat)}
.tel i{display:block;font-style:normal;font-size:11.5px;color:rgba(255,255,255,.6)}
footer{background:#17161A;color:rgba(255,255,255,.6);font-size:12px;padding:26px 0}

.draft{border:2px dashed var(--line);border-radius:20px;padding:clamp(18px,2.4vw,28px);background:var(--surface)}
.draft b{display:block;font-family:var(--disp);font-weight:900;font-size:16px;margin-bottom:8px;color:var(--ink-2)}
.draft p{margin:0;color:var(--ink-2);font-size:13.5px}
.ti.wait::before{background:var(--line)}
.ti.wait time{color:var(--ink-2)}

/* Vision/Mission 切替（レビュー用） */
.vmpick{position:sticky;top:72px;z-index:35;background:#201F24;color:#fff;padding:9px 0}
.vmpick .wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vmpick .pl{font:900 10px var(--lat);letter-spacing:.18em;color:rgba(255,255,255,.5)}
.pb{border:1px solid rgba(255,255,255,.2);background:transparent;color:rgba(255,255,255,.8);font:700 12px var(--round);
 padding:7px 14px;border-radius:999px;cursor:pointer}
.pb.on{background:var(--orange);border-color:var(--orange);color:#fff}
.lab{font:900 11px var(--lat);letter-spacing:.24em;color:var(--orange)}
.lab.tl{color:var(--teal)}
.vbig{font-family:var(--disp);font-weight:900;font-size:clamp(30px,5.2vw,62px);line-height:1.3;letter-spacing:-.02em;margin:16px 0 0}
.vbig .o{color:var(--orange)}
.center{text-align:center}
/* V3 */
.v3{background-size:cover;background-position:center;color:#fff;padding-block:clamp(64px,9vw,120px)}
.v3 .vbig{text-shadow:0 6px 34px rgba(0,0,0,.5)}
.m3{background:var(--surface);border-block:1px solid var(--line)}
.mhead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:baseline}
.mhead h3{font-family:var(--disp);font-weight:900;font-size:clamp(18px,2.3vw,26px);line-height:1.7;margin:0}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px);margin-top:clamp(22px,3vw,36px)}
.steps .st{background:var(--ground);border:1px solid var(--line);border-top:4px solid var(--orange);border-radius:0 0 20px 20px;padding:18px}
.steps .st.t{border-top-color:var(--teal)}.steps .st.g{border-top-color:var(--green)}
.sno{font:900 12px var(--lat);color:var(--ink-2)}
.sen{display:block;font:900 10.5px var(--lat);letter-spacing:.18em;color:var(--orange);margin-top:4px}
.st.t .sen{color:var(--teal)}.st.g .sen{color:var(--green)}
.st h4{font-family:var(--disp);font-weight:900;font-size:19px;margin:8px 0 8px}
.st p{margin:0;color:var(--ink-2);font-size:13.5px}
.namebox{margin-top:clamp(24px,3vw,38px);padding-top:clamp(20px,2.6vw,30px);border-top:1px solid var(--line);max-width:46em}
.namebox h3{font-family:var(--disp);font-weight:900;font-size:19px;margin:8px 0 8px}
.namebox p{margin:0;color:var(--ink-2);font-size:14px}
/* V4 */
.v4{background:var(--black);color:#fff;padding-block:clamp(54px,7.5vw,100px)}
.grid4{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(22px,4vw,56px)}
.vcell .vbig{font-size:clamp(28px,4.2vw,52px)}
.vname{margin:20px 0 0;color:rgba(255,255,255,.6);font-size:13.5px;max-width:28em}
.mcell h3{color:#fff;font-size:clamp(16px,1.9vw,21px);font-family:var(--disp);font-weight:900;margin:12px 0 0;line-height:1.7}
.stepsmini{display:grid;gap:14px;margin-top:22px}
.sm{padding-left:16px;border-left:4px solid var(--orange)}
.sm.t{border-color:var(--teal)}.sm.g{border-color:var(--green)}
.sm b{display:block;font-family:var(--disp);font-weight:900;font-size:16px}
.sm span{display:block;font-size:12.5px;color:rgba(255,255,255,.66);line-height:1.8}
.formula{margin-top:24px;font:900 13px var(--lat);letter-spacing:.14em;color:rgba(255,255,255,.75)}
.formula em{font-style:normal;color:var(--orange);margin:0 8px}
@media(max-width:880px){.steps,.grid4,.mhead{grid-template-columns:minmax(0,1fr)}.vmpick{top:0}}

.ptitle{margin-bottom:clamp(26px,4vw,52px)}
.ptitle .crumb{display:block;font-size:12px;color:rgba(255,255,255,.55)}
.ptitle h1{font-family:var(--disp);font-weight:900;font-size:clamp(17px,1.9vw,21px);margin:10px 0 0;
 display:flex;align-items:baseline;gap:14px;color:#fff}
.ptitle h1 em{font-style:normal;font:900 10.5px var(--lat);letter-spacing:.22em;color:var(--orange)}
.v3,.v4{padding-top:clamp(34px,4.6vw,56px)}
.dflag{display:inline-block;background:var(--yellow-s);border:1px solid var(--yellow);border-radius:999px;padding:5px 14px;font-size:11.5px;color:#8A6B12;margin:0 0 16px}
@media(max-width:980px){.nums{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:880px){.vmbox,.msg,.storyrow,.vals,.ctwo{grid-template-columns:minmax(0,1fr)}nav.g{display:none}}
