/* 警備のMT 採用LP v3 — bright.css
   参照画像（明るい元気系）準拠：白背景 × 赤い筆文字 × 笑顔チーム写真 × 王冠バッジ。
   フォント：Zen Kaku Gothic New（900）主体＋数字も同系で可読性重視。 */

:root{
  --red:#e02b1d; --red-d:#bd2014; --red-ink:#8f1810;
  --yellow:#f7c41c; --yellow-d:#e3a906; --sun:#ffe08a;
  --green:#1faa4c; --line:#06C755; --line-d:#04913f;
  --ink:#211a16; --ink-2:#3a322b; --slate:#27313a;  /* komainu panel (brand-safe dark, not navy-blue) */
  --paper:#ffffff; --gray:#f2efe9; --gray-2:#e9e4da; --cream:#fbf4e4;
  --line-c:#e4ddd0; --muted:#7c7163; --bone:#f6efe2;

  --font-disp:'Zen Kaku Gothic New', sans-serif;
  --font-pop:'Zen Maru Gothic', sans-serif;
  --font-body:'Zen Kaku Gothic New', sans-serif;

  --wrap:1160px; --pad:clamp(18px,5vw,64px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--gray); color:var(--ink); font-family:var(--font-body); font-weight:500; line-height:1.75;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4,p{margin:0; text-wrap:pretty;}
.svg-defs{position:absolute; width:0; height:0;}

/* layout */
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--pad); position:relative;}
.section{position:relative; padding-block:clamp(52px,7vw,96px);}
.bg-white{background:var(--paper);}
.bg-gray{background:var(--gray);}
.bg-cream{background:var(--cream);}

/* giant ghost section number (top-left motif) */
.secno{display:none;}
.secno-x{position:absolute; left:clamp(-4px,1vw,8px); top:clamp(-18px,-1vw,-6px); font-family:var(--font-disp); font-weight:900;
  font-size:clamp(56px,9vw,128px); line-height:.8; color:rgba(33,26,22,.07); letter-spacing:-.03em; z-index:0; pointer-events:none;}
.bg-cream .secno{color:rgba(140,90,20,.1);}
.sec-head{position:relative; z-index:2;}
.sec-head.center{text-align:center;}

/* type */
.h-sec{font-family:var(--font-disp); font-weight:900; line-height:1.28; font-size:clamp(24px,4vw,44px); letter-spacing:.01em; text-wrap:balance;}
.h-sec .red{color:var(--red);}
.h-sec .mk{position:relative; display:inline-block;}
.h-sec .mk::after{content:""; position:absolute; left:-2%; right:-2%; bottom:.02em; height:.26em; background:var(--yellow); z-index:-1; transform:rotate(-1deg);}
.lead{font-size:clamp(14px,1.7vw,17px); line-height:1.95; color:var(--ink-2);}
.strong{font-weight:900;}
.tag{display:inline-block; font-family:var(--font-pop); font-weight:700; color:var(--red); font-size:clamp(13px,1.5vw,15px);}
/* PCのみ改行（スマホでは詰めて自然な均等折り返しにする） */
.br-pc{display:inline;}
@media (max-width:560px){ .br-pc{display:none;} }
/* スマホのみ改行 */
.br-sp{display:none;}
@media (max-width:560px){ .br-sp{display:inline;} }

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:11px; cursor:pointer; border:none; white-space:nowrap;
  font-family:var(--font-disp); font-weight:900; font-size:clamp(15px,1.8vw,19px); padding:16px 28px; border-radius:12px; line-height:1.25;
  transition:transform .12s, box-shadow .12s, filter .12s;}
.btn small{display:block; font-size:.62em; font-weight:700; opacity:.92; margin-bottom:2px;}
.btn .ic{display:inline-grid; place-items:center; width:1.6em; height:1.6em; border-radius:99px; background:rgba(255,255,255,.25); font-size:.82em; flex:none;}
.btn--red{background:var(--red); color:#fff; box-shadow:0 5px 0 var(--red-d), 0 12px 22px rgba(224,43,29,.28);}
.btn--red:hover{filter:brightness(1.05);} .btn--red:active{transform:translateY(3px); box-shadow:0 2px 0 var(--red-d);}
.btn--line{background:var(--line); color:#fff; box-shadow:0 5px 0 var(--line-d), 0 12px 22px rgba(6,199,85,.26);}
.btn--ink{background:var(--ink); color:#fff; box-shadow:0 5px 0 #000, 0 12px 22px rgba(0,0,0,.3);}
.btn--ink:active{transform:translateY(3px); box-shadow:0 2px 0 #000;}
.btn--line:active{transform:translateY(3px); box-shadow:0 2px 0 var(--line-d);}
.btn--lg{padding:19px 36px; font-size:clamp(16px,2.1vw,22px); border-radius:14px;}
.btn-row{display:flex; flex-wrap:wrap; gap:14px;}

/* crown / sunburst badge */
.crown{position:relative; display:grid; place-items:center; text-align:center; color:var(--ink); font-family:var(--font-disp); font-weight:900;
  line-height:1.12; filter:drop-shadow(0 6px 12px rgba(0,0,0,.2));}
.crown svg{position:absolute; inset:0; width:100%; height:100%;}
.crown .cr{position:absolute; top:-16%; left:50%; transform:translateX(-50%); width:42%; color:var(--yellow);}
.crown span{position:relative; z-index:2;}

/* checks list */
.checks{display:flex; flex-direction:column; gap:9px;}
.checks .c{display:flex; align-items:flex-start; gap:9px; font-weight:700; font-size:clamp(13px,1.5vw,15.5px);}
.checks .c i{flex:none; width:20px; height:20px; border-radius:6px; background:var(--red); color:#fff; display:grid; place-items:center; font-style:normal; font-size:12px; font-weight:900; margin-top:2px;}
.checks.green .c i{background:var(--green);}

/* photo slot */
.photo{position:relative; --rot:0deg; transform:rotate(var(--rot)); border-radius:14px; overflow:hidden;}
.photo image-slot{width:100%; height:100%; background:#d8cdbb;}
.photo > img{width:100%; height:100%; object-fit:cover; display:block;}
.hero__ph img{width:100%; height:100%; object-fit:cover; display:block;}
.photo.shadow{box-shadow:0 14px 30px rgba(33,26,22,.2);}
.photo.ring{border:4px solid #fff; box-shadow:0 14px 30px rgba(33,26,22,.22);}

/* speech bubble */
.sb{position:relative; display:inline-block; background:#fff; color:var(--ink); font-family:var(--font-pop); font-weight:700; line-height:1.4;
  padding:9px 15px; border-radius:14px; box-shadow:0 5px 14px rgba(33,26,22,.16); font-size:clamp(12px,1.4vw,14px); border:2px solid var(--ink);}
.sb::after{content:""; position:absolute; bottom:-10px; left:20px; width:14px; height:14px; background:#fff; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:rotate(45deg);}
.sb.tr::after{left:auto; right:20px;}

/* header */
.site-header{position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; gap:16px; padding:10px clamp(14px,4vw,32px);
  background:rgba(255,255,255,.96); box-shadow:0 2px 14px rgba(33,26,22,.08); transition:padding .2s;}
.brand-logo{height:42px; width:auto;}
.nav{margin-left:auto; display:flex; align-items:center; gap:22px;}
.nav a{font-weight:700; font-size:14px; color:var(--ink); white-space:nowrap;}
.nav a:hover{color:var(--red);}
.nav .htcta{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:8px;}
.nav .htcta .btn{font-size:13px; padding:9px 16px; border-radius:9px; box-shadow:0 3px 0 var(--red-d); color:#fff; flex-direction:column; align-items:center; gap:1px; justify-content:center; text-align:center; white-space:nowrap;}
.nav .htcta .btn small{font-size:.6em; margin-bottom:1px;}
.nav .htcta .btn--line{box-shadow:0 3px 0 var(--line-d);}
.menu-toggle{display:none; margin-left:auto; background:var(--red); color:#fff; border:none; width:44px; height:44px; border-radius:10px; font-size:20px; cursor:pointer;}
.sticky-cta{position:fixed; left:0; right:0; bottom:0; z-index:90; display:none; gap:9px; padding:9px clamp(10px,4vw,16px);
  background:rgba(255,255,255,.98); box-shadow:0 -4px 18px rgba(33,26,22,.14);}
.sticky-cta .btn{flex:1; padding:13px 6px; font-size:14px; box-shadow:0 3px 0 rgba(0,0,0,.18);}

/* ───── HERO ───── */
.hero{position:relative; overflow:hidden; padding-top:64px; padding-bottom:clamp(28px,4vw,48px);
  background:radial-gradient(120% 90% at 50% 18%, var(--sun) 0%, #fff5d8 32%, #ffffff 70%);}
.hero__art{display:block; position:relative; z-index:2;}
.hero__art img{width:100%; height:auto; display:block;}
.hero__cta{position:relative; z-index:3; text-align:center; margin-top:clamp(18px,3vw,30px);}
.hero__cta .ok{font-family:var(--font-pop); font-weight:700; font-size:clamp(15px,2vw,20px); margin-bottom:12px;}
.hero__cta .btn-row{justify-content:center;}
.hero__rays{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background:repeating-conic-gradient(from 0deg at 50% 30%, rgba(247,196,28,.5) 0deg 6deg, transparent 6deg 12deg);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%, #000, transparent 72%); mask-image:radial-gradient(70% 60% at 50% 30%, #000, transparent 72%);}
.hero .wrap{z-index:2;}
.hero__stage{position:relative; min-height:clamp(420px,52vw,560px);}
/* central banner */
.hero__banner{position:relative; z-index:5; max-width:720px; margin:0 auto; text-align:center; padding-top:clamp(90px,15vw,180px);}
.hero__pre{display:inline-block; background:var(--ink); color:#fff; font-family:var(--font-disp); font-weight:900; font-size:clamp(16px,2.4vw,26px);
  padding:6px 16px; border-radius:6px; transform:rotate(-2deg);}
.hero__shout{position:relative; margin:8px 0; transform:rotate(-2deg);}
.hero__shout .brush{position:relative; display:inline-block; padding:10px 30px 14px; background:var(--red);
  border-radius:46% 54% 52% 48% / 58% 56% 44% 42%; box-shadow:0 10px 26px rgba(224,43,29,.32), inset 0 -6px 16px rgba(143,24,16,.45);}
.hero__shout b{position:relative; z-index:2; font-family:var(--font-disp); font-weight:900; color:#fff; font-size:clamp(38px,7.2vw,82px); line-height:1; white-space:nowrap;
  text-shadow:0 3px 0 var(--red-ink); -webkit-text-stroke:2px #fff; paint-order:stroke fill;}
.hero__sub{display:inline-block; background:var(--ink); color:#fff; font-family:var(--font-disp); font-weight:900; font-size:clamp(14px,2vw,23px);
  padding:6px 18px; border-radius:6px; transform:rotate(-1.5deg); white-space:nowrap;}
.hero__sub em{font-style:normal; color:var(--yellow);}
/* hero team photos — large, borderless, blended into the background */
.hero__ph{position:absolute; z-index:1; overflow:hidden; border-radius:24px;}
.hero__ph image-slot{width:100%; height:100%; background:#cfc3b0;}
.hero__ph.hL{width:46%; left:-6%; top:4%; aspect-ratio:4/5; transform:rotate(-3deg); opacity:.92;
  -webkit-mask-image:radial-gradient(115% 100% at 64% 46%, #000 42%, transparent 80%); mask-image:radial-gradient(115% 100% at 64% 46%, #000 42%, transparent 80%);}
.hero__ph.hR{width:46%; right:-6%; bottom:-4%; aspect-ratio:4/5; transform:rotate(3deg); opacity:.92;
  -webkit-mask-image:radial-gradient(115% 100% at 36% 54%, #000 42%, transparent 80%); mask-image:radial-gradient(115% 100% at 36% 54%, #000 42%, transparent 80%);}
.hero__crown{position:absolute; right:6%; top:6%; z-index:6; width:clamp(92px,12vw,140px); aspect-ratio:1; font-size:clamp(14px,1.7vw,21px); transform:rotate(8deg);}
/* hero cta block */
.hero__cta{position:relative; z-index:6; text-align:center; margin-top:clamp(18px,3vw,30px);}
.hero__cta .ok{font-family:var(--font-pop); font-weight:700; font-size:clamp(15px,2vw,20px); margin-bottom:12px;}
.hero__cta .btn-row{justify-content:center;}

/* ───── 02 BEFORE/AFTER ───── */
.flip{display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,2vw,20px); margin-top:clamp(24px,3vw,38px); align-items:stretch; position:relative;}
.flipcard{border-radius:16px; overflow:hidden; position:relative; box-shadow:0 12px 26px rgba(33,26,22,.18);}
.flipcard .photo{border-radius:0; aspect-ratio:16/11;}
.flipcard.before .photo image-slot{filter:grayscale(.85) brightness(.7);}
.flipcard .ttl{position:absolute; left:14px; top:14px; z-index:3; font-family:var(--font-disp); font-weight:900; color:#fff; font-size:clamp(18px,2.4vw,26px);
  background:rgba(33,26,22,.62); padding:4px 14px; border-radius:7px; letter-spacing:.06em;}
.flipcard.after .ttl{background:var(--red);}
.flipcard .list{position:absolute; left:0; right:0; bottom:0; z-index:3; padding:16px; display:flex; flex-direction:column; gap:7px;
  background:linear-gradient(transparent, rgba(20,15,12,.82) 38%);}
.flipcard .list .c{display:flex; align-items:center; gap:8px; color:#fff; font-weight:700; font-size:clamp(12px,1.5vw,15px);}
.flipcard .list .c i{flex:none; width:19px; height:19px; border-radius:5px; display:grid; place-items:center; font-style:normal; font-size:12px; font-weight:900;}
.flipcard.before .list .c i{background:#8a8178; color:#fff;} .flipcard.before .list .c{color:#d8d2c8;}
.flipcard.after .list .c i{background:var(--yellow); color:var(--ink);}
.flip__arrow{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:5; width:clamp(40px,5vw,62px); height:clamp(40px,5vw,62px);
  background:var(--red); color:#fff; border-radius:99px; display:grid; place-items:center; font-size:clamp(18px,2.4vw,28px); box-shadow:0 6px 16px rgba(224,43,29,.4); border:3px solid #fff;}
.flip__arrow .fa-i{display:inline-block; line-height:1;}

/* ───── 03 PAY ───── */
.pay__band{display:grid; grid-template-columns:1fr auto; gap:clamp(20px,3vw,40px); align-items:center; margin-top:clamp(24px,3vw,36px);}
.pay__nums{display:flex; flex-wrap:wrap; align-items:stretch; gap:14px;}
.paychip{position:relative; background:#fff; border:2px solid var(--line-c); border-radius:16px; padding:16px 18px; box-shadow:0 10px 24px rgba(33,26,22,.1); flex:1; min-width:240px;}
.paychip .h{display:inline-block; font-family:var(--font-disp); font-weight:900; color:#fff; font-size:clamp(14px,1.7vw,18px); padding:4px 14px; border-radius:7px; margin-bottom:8px;}
.paychip.a .h{background:var(--red);} .paychip.b .h{background:var(--ink);}
.paychip .v{display:flex; align-items:baseline; color:var(--ink); font-family:var(--font-disp); font-weight:900; line-height:.9; white-space:nowrap;}
.paychip .v .yen{font-size:clamp(16px,2vw,22px); margin-right:5px; align-self:center;}
.paychip .v b{font-size:clamp(46px,6.8vw,74px); color:var(--red); letter-spacing:-.03em;}
.paychip .v i{font-style:normal; font-size:clamp(19px,2.5vw,30px); margin-left:3px;}
.pay__why{flex:none; width:clamp(220px,26vw,290px); background:var(--cream); border:2px dashed var(--yellow-d); border-radius:18px; padding:20px 22px; position:relative;}
.pay__why .wt{font-family:var(--font-disp); font-weight:900; color:var(--red); font-size:clamp(16px,2vw,21px); margin-bottom:8px;}
.pay__why p{font-size:clamp(12.5px,1.5vw,14.5px); line-height:1.75; color:var(--ink-2);}
.pay__note{margin-top:14px; font-size:12px; color:var(--muted); text-align:right;}
.pay__compare{margin-top:16px; padding:13px 18px 13px 46px; position:relative; background:var(--cream); border:2px dashed var(--yellow-d); border-radius:14px;
  font-family:var(--font-disp); font-weight:700; font-size:clamp(13px,1.6vw,15.5px); line-height:1.7; color:var(--ink);}
.pay__compare .ic{position:absolute; left:16px; top:13px; font-size:1.3em;}
.pay__compare b{font-weight:900; color:var(--red);}
.pay__pre{display:inline-flex; align-items:center; gap:10px; margin-bottom:6px;}
.pay__pre .ribbon{background:var(--yellow); color:var(--ink); font-family:var(--font-pop); font-weight:700; font-size:clamp(12px,1.4vw,14px); padding:5px 13px; border-radius:99px; transform:rotate(-3deg);}

/* ───── 04 VOICES ───── */
.voices{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,22px); margin-top:clamp(26px,4vw,42px);}
.voice{background:#fff; border-radius:18px; padding:clamp(16px,2vw,22px); box-shadow:0 10px 24px rgba(33,26,22,.1); position:relative;}
.voice .meta{font-family:var(--font-pop); font-weight:700; font-size:12.5px; color:var(--muted); margin-bottom:10px;}
.voice .photo{position:relative; aspect-ratio:5/4; margin-bottom:14px; overflow:visible;}
.voice .photo img{border-radius:14px;}
.voice .q{font-family:var(--font-disp); font-weight:900; font-size:clamp(16px,1.9vw,20px); line-height:1.55;}
.voice .q em{font-style:normal; color:var(--red);}
.voice .sb{position:absolute; right:30px; top:-38px; transform:rotate(-3deg); z-index:5;}

/* ───── 05 BOSS ───── */
.boss{display:grid; grid-template-columns:1fr 1.04fr; grid-template-areas:"photos head" "photos note"; gap:clamp(10px,1.5vw,16px) clamp(22px,3.5vw,48px); align-items:center; margin-top:clamp(8px,1vw,16px);}
.boss__head{grid-area:head; align-self:end;}
.boss__photos{grid-area:photos;}
.boss__copy{grid-area:note; align-self:start;}
.boss__note{background:var(--cream); border-radius:18px; padding:clamp(20px,2.6vw,30px); position:relative; box-shadow:0 10px 24px rgba(33,26,22,.08);}
.boss__note h3{font-family:var(--font-disp); font-weight:900; font-size:clamp(20px,2.6vw,30px); line-height:1.4;}
.boss__note h3 .red{color:var(--red);}
.boss__note .checks{margin-top:16px;}
.boss__photos{position:relative; min-height:clamp(280px,36vw,420px); margin-bottom:52px;}
.boss__photos .photo{position:absolute; border:4px solid #fff;}
.boss__photos .b1{width:60%; aspect-ratio:1/1; left:0; top:4%; z-index:2;}
.boss__photos .b2{width:46%; aspect-ratio:4/3; right:0; top:0; z-index:3;}
.boss__photos .b3{width:52%; aspect-ratio:4/3; right:4%; bottom:0; z-index:4;}
.boss__photos .sb{position:absolute; left:28%; top:-6px; z-index:6; transform:rotate(-3deg);}
.boss__photos .cap{position:absolute; right:2%; bottom:-46px; z-index:6; font-family:var(--font-pop); font-weight:700; color:var(--muted); font-size:12.5px; text-align:right; line-height:1.5;}

/* ───── 06 EASE ───── */
.ease{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(20px,3vw,40px); align-items:center; margin-top:clamp(24px,3vw,38px);}
.ease__cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,18px);}
.easecard{background:#fff; border-radius:16px; padding:clamp(16px,2vw,22px); text-align:center; box-shadow:0 8px 20px rgba(33,26,22,.09);}
.easecard .ic{width:56px; height:56px; border-radius:14px; background:var(--red); display:grid; place-items:center; margin:0 auto 12px;}
.easecard .ic svg{width:30px; height:30px;}
.easecard b{font-family:var(--font-disp); font-weight:900; font-size:clamp(15px,1.8vw,18px); display:block;}
.easecard p{margin-top:7px; font-size:12px; line-height:1.7; color:var(--ink-2);}
.ease__koma{background:var(--slate); border-radius:20px; padding:clamp(20px,2.6vw,28px); position:relative; overflow:hidden; color:#fff; display:flex; gap:18px; align-items:center;}
.ease__koma .kphone{flex:none; width:clamp(118px,15vw,150px);}
.ease__koma .ktext .kh{font-family:var(--font-disp); font-weight:900; font-size:clamp(16px,2vw,21px); line-height:1.4;}
.ease__koma .ktext .kh .y{color:var(--yellow);}
.ease__koma .ktext .checks{margin-top:12px;}
.ease__koma .ktext .checks .c{color:#fff; font-size:12.5px;}
.ease__koma .ktext .checks .c i{background:var(--yellow); color:var(--ink);}
.ease__koma .kmascot{position:absolute; right:10px; bottom:8px; font-family:var(--font-pop); font-weight:700; font-size:11px; color:rgba(255,255,255,.5);}

/* compact phone */
.phone{width:100%; padding:7px; background:#000; border-radius:26px; box-shadow:0 18px 36px rgba(0,0,0,.4);}
.phone__screen{background:var(--paper); border-radius:20px; overflow:hidden; color:var(--ink);}
.kapp-head{background:var(--ink); padding:9px 12px;}
.kapp-logo{font-family:var(--font-disp); font-weight:900; color:#fff; font-size:14px;} .kapp-logo i{color:var(--yellow); font-style:normal;}
.kapp-sub{color:var(--bone); opacity:.6; font-size:8px;}
.kapp-list{padding:8px; display:flex; flex-direction:column; gap:6px;}
.kitem{display:flex; align-items:center; gap:7px; background:var(--gray); border-radius:9px; padding:7px 9px;}
.kitem .ki{flex:none; width:22px; height:22px; border-radius:6px; background:rgba(224,43,29,.12); color:var(--red); display:grid; place-items:center; font-size:11px;}
.kitem b{font-size:11px; font-weight:900; white-space:nowrap;}
.kitem .kr{margin-left:auto; color:#bcae9b; font-size:12px;}
.kitem .kb{margin-left:auto; flex:none; width:15px; height:15px; border-radius:99px; background:var(--red); color:#fff; font-size:9px; font-weight:900; display:grid; place-items:center;}
.kapp-tab{display:flex; background:var(--ink); padding:6px 2px 9px;}
.kapp-tab span{flex:1; text-align:center; font-size:8px; color:rgba(246,239,226,.55); font-weight:700;}
.kapp-tab .on{color:var(--yellow);}

/* ───── 07 YOUTUBE ───── */
.yt{display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(18px,2.6vw,32px); margin-top:clamp(24px,3vw,38px); align-items:start;}
.yt__main{position:relative; border-radius:16px; overflow:hidden; aspect-ratio:16/9; box-shadow:0 14px 30px rgba(33,26,22,.2);}
.yt__main image-slot{width:100%; height:100%; background:#2a2420;}
.yt__play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; width:clamp(56px,7vw,84px); height:clamp(40px,5vw,60px);
  background:rgba(224,43,29,.94); border-radius:16px; display:grid; place-items:center; box-shadow:0 8px 22px rgba(0,0,0,.4);}
.yt__play::after{content:""; border-style:solid; border-width:11px 0 11px 19px; border-color:transparent transparent transparent #fff;}
.yt__side{display:flex; flex-direction:column; gap:12px;}
.ytclip{display:flex; gap:12px; align-items:center; background:#fff; border-radius:12px; padding:9px; box-shadow:0 6px 16px rgba(33,26,22,.08);}
.ytclip .th{flex:none; width:104px; aspect-ratio:16/10; border-radius:8px; overflow:hidden; position:relative;}
.ytclip .th image-slot{width:100%; height:100%; background:#2a2420;}
.ytclip .th::after{content:"▶"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:#fff; font-size:13px; text-shadow:0 1px 4px rgba(0,0,0,.6);}
.ytclip b{font-family:var(--font-disp); font-weight:900; font-size:clamp(13px,1.5vw,15px); line-height:1.4;}

/* ───── 08 FAQ ───── */
.faq{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,20px); margin-top:clamp(24px,3vw,38px);}
.faqcard{display:flex; gap:13px; align-items:flex-start; background:#fff; border-radius:14px; padding:clamp(15px,1.9vw,20px); box-shadow:0 8px 18px rgba(33,26,22,.07);}
.faqcard .q{flex:none; width:32px; height:32px; border-radius:8px; background:var(--red); color:#fff; font-family:var(--font-disp); font-weight:900; font-size:16px; display:grid; place-items:center;}
.faqcard .body{min-width:0; flex:1;}
.faqcard .qt{font-family:var(--font-disp); font-weight:900; font-size:clamp(15px,1.8vw,18px);}
.faqcard .at{margin-top:6px; font-size:clamp(12.5px,1.5vw,14px); line-height:1.7; color:var(--ink-2);}
.faqcard .at b{color:var(--red);}
.faqcard .ph{flex:none; width:62px;} .faqcard .ph .photo{aspect-ratio:1; border-radius:9px;}

/* ───── 09 REQ + 10 CTA ───── */
.reqwrap{display:grid; grid-template-columns:1fr; gap:clamp(20px,3vw,34px);}
.req table{width:100%; border-collapse:collapse; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 10px 24px rgba(33,26,22,.1);}
.req th,.req td{text-align:left; padding:14px 18px; border-bottom:1px solid var(--line-c); font-size:clamp(13px,1.6vw,15.5px); vertical-align:top;}
.req th{width:120px; background:var(--gray); font-family:var(--font-disp); font-weight:900; color:var(--ink); white-space:nowrap;}
.req td b{color:var(--red); font-weight:900;}
.req tr:last-child th,.req tr:last-child td{border-bottom:none;}
.req__safe{display:inline-flex; align-items:center; gap:9px; margin-top:16px; font-family:var(--font-pop); font-weight:700; color:var(--red); font-size:14px;}

/* WEB form (Contact Form 7) */
.formcard{max-width:680px; margin:clamp(24px,4vw,40px) auto 0; background:#fff; border:2px solid var(--line-c); border-radius:20px; padding:clamp(20px,3vw,38px); box-shadow:0 14px 34px rgba(33,26,22,.1);}
.entryform .frow{margin-bottom:16px;}
.entryform .frow.half{display:grid; grid-template-columns:1fr 1.4fr; gap:14px;}
.entryform label{display:block; font-family:var(--font-disp); font-weight:900; font-size:14px; margin-bottom:6px;}
.entryform .req-mark{display:inline-block; background:var(--red); color:#fff; font-size:10px; font-weight:900; padding:2px 8px; border-radius:99px; margin-left:6px; vertical-align:middle;}
.entryform input,.entryform textarea,.wpcf7 input[type=text],.wpcf7 input[type=tel],.wpcf7 input[type=email],.wpcf7 textarea{
  width:100%; font-family:var(--font-body); font-size:16px; color:var(--ink); background:var(--gray);
  border:2px solid var(--line-c); border-radius:12px; padding:13px 15px; box-sizing:border-box; transition:border-color .15s, background .15s;}
.entryform input:focus,.entryform textarea:focus,.wpcf7 input:focus,.wpcf7 textarea:focus{outline:none; border-color:var(--red); background:#fff;}
.entryform textarea{resize:vertical; min-height:104px;}
.entryform .formbtn,.wpcf7 input[type=submit],.wpcf7 .formbtn{width:100%; margin-top:8px; justify-content:center; border-radius:14px; cursor:pointer;}
.wpcf7 input[type=submit]{background:var(--red); color:#fff; border:none; font-family:var(--font-disp); font-weight:900; font-size:clamp(15px,2.1vw,22px); padding:18px 20px; line-height:1.35; white-space:normal; box-sizing:border-box; max-width:100%; box-shadow:0 5px 0 var(--red-d), 0 12px 22px rgba(224,43,29,.28);}
.entryform .formnote,.wpcf7 .formnote{margin-top:14px; font-size:12px; color:var(--muted); text-align:center; line-height:1.7;}
/* ===== Contact Form 7 カスタム（必須/任意バッジ・項目余白） ===== */
.wpcf7 .cf-field{display:block; font-family:var(--font-disp); font-weight:900; font-size:14px; margin-bottom:42px;}
.wpcf7 .cf-field:last-of-type{margin-bottom:0;}
.wpcf7 .cf-field .wpcf7-form-control-wrap{display:block; margin-top:9px;}
.wpcf7 .cf-req,.wpcf7 .cf-opt{display:inline-block; color:#fff; font-family:var(--font-disp); font-size:11px; font-weight:900; line-height:1; padding:4px 10px; border-radius:99px; margin-left:8px; vertical-align:middle; letter-spacing:.04em;}
.wpcf7 .cf-req{background:var(--red);}            /* 必須：赤背景・白文字 */
.wpcf7 .cf-opt{background:#9a958d;}               /* 任意：灰色背景・白文字 */
.wpcf7 .wpcf7-radio .wpcf7-list-item{display:inline-block; margin:6px 22px 0 0;}
.wpcf7 .wpcf7-radio .wpcf7-list-item label{display:inline-flex; align-items:center; gap:6px; font-weight:700; cursor:pointer;}
.wpcf7 .wpcf7-radio input[type=radio]{width:auto; margin:0;}
.wpcf7 form > p{margin:0;}
/* 個人情報の取扱い */
.wpcf7 .cf-privacy{margin:4px 0 18px; padding:16px 18px; background:var(--gray); border:1px solid var(--line-c); border-radius:12px; font-family:var(--font-body); font-weight:400; font-size:12.5px; line-height:1.85; color:var(--ink); max-height:180px; overflow-y:auto;}
.wpcf7 .cf-privacy .cf-privacy__ttl{display:block; font-family:var(--font-disp); font-weight:900; font-size:13px; margin-bottom:8px;}
.wpcf7 .cf-agree{display:block; text-align:center; margin:0 0 22px; font-family:var(--font-disp); font-weight:900; font-size:14px;}
.wpcf7 .cf-agree .wpcf7-acceptance{display:inline-block;}
.wpcf7 .cf-agree .wpcf7-list-item{margin:0;}
.wpcf7 .cf-agree .wpcf7-list-item label{display:inline-flex; align-items:center; gap:8px; cursor:pointer;}
.wpcf7 .cf-agree input[type=checkbox]{width:auto; margin:0; transform:scale(1.25);}
@media (max-width:560px){ .entryform .frow.half{grid-template-columns:1fr;} }

/* ===== Thanks page（送信完了） ===== */
.thanks-page{min-height:72vh; display:flex; align-items:center; justify-content:center; padding:130px 20px 90px; background:var(--gray);}
.thanks-wrap{width:100%;}
.thanks-card{max-width:620px; margin:0 auto; background:#fff; border:2px solid var(--line-c); border-radius:24px; padding:clamp(32px,6vw,60px) clamp(24px,5vw,52px); text-align:center; box-shadow:0 16px 40px rgba(33,26,22,.1);}
.thanks-icon{width:84px; height:84px; margin:0 auto 22px; border-radius:50%; background:var(--red); color:#fff; font-size:44px; line-height:84px; box-shadow:0 8px 20px rgba(224,43,29,.3);}
.thanks-ttl{font-family:var(--font-disp); font-weight:900; font-size:clamp(24px,4.5vw,34px); color:var(--ink); margin:0 0 18px;}
.thanks-lead{font-family:var(--font-disp); font-weight:700; font-size:clamp(16px,2.6vw,19px); color:var(--ink); line-height:1.85; margin:0 0 16px;}
.thanks-text{font-size:15px; color:var(--ink); line-height:2; margin:0 0 24px;}
.thanks-note{font-size:12.5px; color:var(--muted); line-height:1.9; margin:0 0 30px;}
.thanks-note a{color:var(--red); font-weight:700;}
.thanks-card .btn{display:inline-flex;}

.final{background:var(--red); color:#fff; position:relative; overflow:hidden;}
.final::before{content:""; position:absolute; inset:0; opacity:.5; mix-blend-mode:soft-light; pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 84% 50%, rgba(255,255,255,.16) 0deg 5deg, transparent 5deg 10deg);}
.final__grid{display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(20px,3vw,40px); align-items:center; position:relative; z-index:2;}
.final h2{font-family:var(--font-disp); font-weight:900; font-size:clamp(24px,4vw,46px); line-height:1.35; text-wrap:balance;}
.final p{margin-top:12px; font-size:clamp(14px,1.7vw,17px); color:rgba(255,255,255,.92);}
.final__hours{margin-top:16px; font-size:clamp(12px,1.5vw,13.5px); line-height:1.85; color:rgba(255,255,255,.9);}
.final__hours b{color:var(--yellow); font-weight:900;}
.final .btn-row{margin-top:24px; display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:14px;}
.final .btn-row .btn{justify-content:center;}
.final .btn--red{background:#fff; color:var(--red); box-shadow:0 5px 0 rgba(0,0,0,.18);}
.final .btn--line{box-shadow:0 5px 0 var(--line-d);}
.final__photo{position:relative; align-self:end;}
.final__photo .gorilla-pc{display:block; width:min(86%,360px); margin:0 auto; transform:translateX(-11%); filter:drop-shadow(0 16px 30px rgba(0,0,0,.35));}
.final__photo .sb{position:absolute; top:-16px; right:6%; z-index:5; transform:rotate(6deg);}
.final__badge{position:absolute; left:6%; bottom:24px; z-index:5; background:var(--yellow); color:var(--ink); font-family:var(--font-pop); font-weight:700; white-space:nowrap;
  font-size:12px; padding:7px 13px; border-radius:99px; transform:rotate(-5deg); box-shadow:0 5px 12px rgba(0,0,0,.2);}
/* mobile-only gorilla above the CTA buttons (points down at the buttons) */
.gorilla-wrap{display:none;}
@media (max-width:900px){
  .gorilla-wrap{display:block; position:relative; width:min(320px,80%); margin:90px auto -14px; z-index:3;}
  .final__photo{display:none;}
  /* final CTA buttons: centered, equal width (matches the longest) */
  .final .btn-row{display:grid; grid-auto-flow:row; grid-auto-columns:unset; width:-moz-fit-content; width:fit-content; margin-left:auto; margin-right:auto; justify-items:stretch;}
  /* hero CTA buttons: same treatment on mobile */
  .hero__cta .btn-row{flex-direction:column; align-items:stretch; width:-moz-fit-content; width:fit-content; margin-left:auto; margin-right:auto;}
  .hero__cta .btn-row .btn{justify-content:center;}
  .gorilla-mobile{display:block; width:100%; filter:drop-shadow(0 10px 20px rgba(0,0,0,.3));}
  .gorilla-sb{position:absolute; top:-64px; right:-8px; transform:rotate(3deg); z-index:4; text-align:left;
    font-size:15px; padding:12px 18px; border-radius:16px; line-height:1.5;}
  .gorilla-sb::after{left:24px;}
}

/* ───── SUPPORT（がんばる人を応援） ───── */
.support__lead{max-width:680px; margin:14px auto 0;}
.support__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,3vw,28px); max-width:720px; margin:clamp(24px,4vw,38px) auto 0;}
/* 派手なグラデ枠＋グローのカード */
.support__card{position:relative; margin:0; border-radius:20px; overflow:hidden; padding:4px;
  background:linear-gradient(135deg, var(--red) 0%, #ff7a1a 50%, var(--yellow) 100%);
  box-shadow:0 12px 28px rgba(224,43,29,.30); transition:transform .15s ease, box-shadow .15s ease;}
.support__card::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5; mix-blend-mode:soft-light;
  background:repeating-conic-gradient(from 0deg at 50% 0%, rgba(255,255,255,.5) 0deg 6deg, transparent 6deg 12deg);}
.support__card:hover{transform:translateY(-5px); box-shadow:0 20px 40px rgba(224,43,29,.40);}
.support__card .photo{position:relative; z-index:2; aspect-ratio:1/1; border-radius:16px 16px 0 0; background:var(--gray-2);}
/* コーナーの応援バッジ */
.support__badge{position:absolute; left:10px; bottom:10px; z-index:4; display:inline-flex; align-items:center; gap:5px;
  background:var(--ink); color:#fff; font-family:var(--font-pop); font-weight:700; font-size:12px;
  padding:5px 12px; border-radius:99px; transform:rotate(-4deg); box-shadow:0 4px 10px rgba(0,0,0,.28);}
.support__badge i{font-style:normal; color:var(--yellow);}
.support__body{position:relative; z-index:2; background:#fff; border-radius:0 0 16px 16px; padding:13px 14px 16px; text-align:center;}
.support__name{font-family:var(--font-disp); font-weight:900; font-size:clamp(15px,2vw,21px); color:var(--ink); line-height:1.25; white-space:nowrap;
  display:inline-block; padding:0 3px 3px; background:linear-gradient(transparent 70%, var(--sun) 70%);}
.support__name span{font-size:.6em; color:var(--red); margin-left:5px; white-space:nowrap;}
@media (max-width:560px){ .support__grid{grid-template-columns:1fr 1fr; gap:12px; max-width:none;} .support__badge{font-size:10.5px; padding:4px 9px;} }

/* footer */
.site-footer{background:var(--ink); color:rgba(246,239,226,.7); padding:clamp(34px,5vw,56px) 0 86px;}
.site-footer .wrap{display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; align-items:flex-start;}
.site-footer .brand-logo{height:46px; filter:brightness(0) invert(1) sepia(1) saturate(0) brightness(1.6);}
.site-footer dl{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:13px; margin:14px 0 0;}
.site-footer dt{color:var(--yellow); font-weight:700;}
.site-footer .fnav{display:flex; flex-direction:column; gap:9px;}
.site-footer .fnav a{font-weight:700; font-size:13px; color:rgba(246,239,226,.8);}
.site-footer .copy{width:100%; border-top:1px solid rgba(246,239,226,.14); margin-top:18px; padding-top:16px; font-size:12px; opacity:.7;}

/* reveal */
.reveal-on .reveal{opacity:0; transform:translateY(24px); transition:opacity .65s ease, transform .65s cubic-bezier(.2,.8,.3,1.05);}
.reveal-on .reveal.in{opacity:1; transform:none;}
.reveal-on .reveal-pop{opacity:0; transform:translateY(14px) scale(.97); transition:opacity .55s ease, transform .55s cubic-bezier(.2,.9,.3,1.2);}
.reveal-on .reveal-pop.in{opacity:1; transform:none;}
[data-delay="1"]{transition-delay:.08s;}[data-delay="2"]{transition-delay:.16s;}[data-delay="3"]{transition-delay:.26s;}
[data-delay="4"]{transition-delay:.36s;}[data-delay="5"]{transition-delay:.48s;}
@media (prefers-reduced-motion:reduce){.reveal-on .reveal,.reveal-on .reveal-pop{opacity:1!important; transform:none!important; transition:none!important;}}
@media print{.reveal-on .reveal,.reveal-on .reveal-pop{opacity:1!important; transform:none!important;}}

/* responsive */
@media (max-width:900px){
  .nav{display:none;} .menu-toggle{display:grid; place-items:center;} .sticky-cta{display:flex;} body{padding-bottom:64px;}
  .pay__band,.boss,.ease,.yt,.final__grid{grid-template-columns:1fr;}
  .pay__why{width:100%;}
  .voices,.ease__cards,.faq{grid-template-columns:1fr;}
  .ease__koma{flex-direction:column; text-align:center;} .ease__koma .kphone{width:min(240px,70vw);}
  .hero__ph.hL,.hero__ph.hR{width:62%;}
  .boss{grid-template-areas:"head" "photos" "note";} /* スマホ：見出し→画像→本文の順 */
  .boss__photos{min-height:74vw; margin-bottom:58px;}
}
@media (max-width:560px){
  .flip{grid-template-columns:1fr;} .flip__arrow{left:50%; top:auto; bottom:calc(50% - 8px);}
  .flip__arrow .fa-i{transform:rotate(90deg);} /* スマホ時：矢印を下向き ↓ に */
  .flipcard .ttl{left:auto; right:14px;} /* スマホ時：BEFORE/AFTERラベルを右上に */
  #pay .h-sec{font-size:clamp(30px,9vw,42px);} /* スマホ時：見出しを大きく（3行表示） */
  #intro .h-sec{font-size:clamp(21px,6vw,30px); white-space:nowrap;} /* スマホ時：必ず2行に収める */
  #support .h-sec{font-size:clamp(20px,5.6vw,30px); white-space:nowrap;} /* スマホ時：必ず2行に収める */
  #form .h-sec{font-size:clamp(21px,5.6vw,30px); white-space:nowrap;} /* スマホ時：必ず2行に収める */
  .paychip .v .yen{font-size:clamp(17px,4.8vw,20px);}
  .paychip .v b{font-size:clamp(50px,15.5vw,66px);}
  .paychip .v i{font-size:clamp(22px,6vw,27px);}
  .voices{gap:18px;} .ease__cards{grid-template-columns:1fr 1fr;}
  /* スマホ時：3枚目「最新システム」は全幅・見出しを上に（縦並び） */
  .ease__cards .easecard:nth-child(3){grid-column:1 / -1;}
}