@charset "utf-8";

:root{
  --paper:#FFFFFF;
  --paper-2:#F3F4F7;      
  --paper-3:#FBF5F0;      
  --text:#14181E;
  --text-2:#4C535D;
  --text-3:#818892;
  --orange:#F2622A;
  --orange-dark:#D0491A;
  --orange-soft:#FDEDE3;
  --line:#E3E6EB;
  --line-2:#EDEFF3;
  --head-ink:#0B0C10;     
  --gold:#D4AF37;         
  --gold-deep:#B8912F;    
  --gold-ink:#221A05;     
  --font:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --slant:3vw;            
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;font-family:var(--font);font-weight:400;font-size:16px;line-height:1.95;
  color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
b,strong{font-weight:700}
button{font:inherit;color:inherit}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--text);color:#fff;padding:12px 20px}
.skip-link:focus{left:0}
:where(a,button,summary,details):focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}

.sec{position:relative;padding:clamp(64px,8.6vw,112px) 0}

.band{
  position:relative;
  padding:calc(clamp(64px,8.6vw,112px) + var(--slant)) 0 calc(clamp(64px,8.6vw,112px) + var(--slant));
  clip-path:polygon(0 var(--slant),100% 0,100% calc(100% - var(--slant)),0 100%);
  margin-block:calc(var(--slant) * -0.5);
}

.band + .band{
  margin-top:calc(var(--slant) * -1);
}
.band-gray{background:var(--paper-2)}
.band-warm{background:var(--paper-3)}
.band-accent{background:var(--orange);color:#fff}
.band > *{position:relative}

.mark{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.mark i{display:block;width:10px;height:36px;margin-left:6px;background:var(--orange);transform:skewX(-16deg);flex:none}
.mark span{font-size:clamp(25px,3.4vw,42px);font-weight:900;line-height:1;letter-spacing:.14em}
.band-accent .mark i{background:#fff}

.h2{font-size:clamp(25px,3.5vw,38px);font-weight:900;line-height:1.5;margin-bottom:14px}
.h2 em{font-style:normal;color:var(--orange)}
.band-accent .h2 em{color:#fff;text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:6px}
.lead{font-size:clamp(14.5px,1.5vw,16.5px);color:var(--text-2);max-width:60ch;line-height:1.95}

.lead-note{font-size:clamp(13px,1.35vw,14.5px);color:var(--text-3);line-height:1.9;margin-top:6px}
.band-accent .lead{color:rgba(255,255,255,.92)}

.hero{
  position:relative;overflow:hidden;background:var(--paper);
  padding:clamp(48px,6vw,84px) 0 calc(clamp(60px,7.4vw,96px) + var(--slant));
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--slant)),0 100%);
}

.hero-panels{
  position:absolute;top:-10%;right:-5%;height:120%;width:64%;
  display:flex;gap:clamp(10px,1.1vw,16px);
  transform:skewX(-9deg);pointer-events:none;
}
.hero-panels figure{flex:1;overflow:hidden;box-shadow:0 30px 70px -34px rgba(20,24,30,.6)}

.hero-panels .pn1{flex:1.75}
@media (min-width:901px){
  
  
  .hero-panels .pn1{flex:1.40 1 0}
  .hero-panels .pn2{flex:1.10 1 0}
  .hero-panels .pn3{flex:1.10 1 0}
}
.hero-panels .pn1 img{transform:skewX(9deg) scale(1.05) translateX(4%)}
.hero-panels img{width:100%;height:100%;object-fit:cover;transform:skewX(9deg) scale(1.16)}
.hero-panels .pn2{margin-top:10%}
.hero-panels .pn2 img{object-position:50% 0;transform-origin:50% 0;transform:skewX(9deg) scale(1.18) translateX(-17%)}
.hero-panels .pn3{margin-top:17%}
.hero-panels .pn3 img{object-position:30% 50%}

.hero-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,#fff 0%,#fff 34%,rgba(255,255,255,.82) 41%,rgba(255,255,255,0) 50%);
}
.hero-in{position:relative;z-index:2;max-width:min(42%,440px)}

.pill{
  display:inline-flex;align-items:center;background:var(--orange);color:#fff;
  font-size:clamp(14px,1.5vw,16px);font-weight:900;letter-spacing:.02em;
  padding:9px 22px;border-radius:999px;margin-bottom:20px;
}
.hero h1{font-size:clamp(29px,3.5vw,44px);font-weight:900;line-height:1.3;margin-bottom:16px}
.hero h1 em{font-style:normal;color:var(--orange)}

.hero h1 .nb{white-space:nowrap}
.hero-sub{font-size:clamp(14px,1.5vw,16.5px);color:var(--text-2);margin-bottom:22px;max-width:32ch}

.price-hero{display:flex;align-items:baseline;gap:0 12px;margin-bottom:12px}

.price-hero .unit-pre{font-size:clamp(15px,1.8vw,22px);font-weight:900;color:var(--text-2);white-space:nowrap}
.price-main{display:inline-flex;align-items:baseline;gap:0 8px;white-space:nowrap}
.price-hero .num{font-size:clamp(66px,8.6vw,112px);font-weight:900;color:var(--orange);line-height:1;letter-spacing:-.025em}
.price-hero .unit{font-size:clamp(26px,3.2vw,38px);font-weight:900}
.price-hero .tax{font-size:13px;font-weight:700;color:var(--text-3)}

.price-sub{
  display:flex;align-items:baseline;gap:0 8px;margin-bottom:14px;
  white-space:nowrap;
}
.price-sub .pre{font-size:clamp(15px,1.8vw,22px);font-weight:900;color:var(--text-2)}
.price-sub em{
  font-style:normal;font-weight:900;line-height:1;letter-spacing:-.02em;
  color:var(--orange);font-size:clamp(26px,4.6vw,44px);
}
.price-sub .post{font-size:clamp(15px,1.8vw,22px);font-weight:900}

.note-line{
  display:inline-flex;align-items:center;margin-bottom:26px;
  border-left:3px solid var(--orange);padding-left:14px;
  font-size:clamp(14px,1.5vw,16px);font-weight:700;
}
.note-line b{color:var(--orange);font-weight:900;font-size:1.12em}

.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,4.6vw,64px)}

.factbar{background:var(--paper);position:relative;z-index:3}
.factbar ul{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,44px);padding:clamp(28px,3.6vw,44px) 0}
.factbar li{border-left:3px solid var(--orange);padding-left:18px}
.factbar b{display:block;font-size:clamp(19px,2.3vw,23px);font-weight:900;margin-bottom:4px}
.factbar p{font-size:13.5px;color:var(--text-2);line-height:1.8}

.featurebar{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);background:var(--paper-2)}
.featurebar ul{display:grid;grid-template-columns:repeat(4,1fr);padding:20px 0}
.featurebar li{display:flex;align-items:center;justify-content:center;gap:11px;font-size:clamp(13.5px,1.5vw,15.5px);font-weight:900}
.featurebar li + li{border-left:1px solid var(--line)}
.featurebar svg{width:24px;height:24px;color:var(--orange);flex:none}
.featurebar li small{font-size:12px;font-weight:700;color:var(--text-2)}

.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2px,.4vw,4px);margin-top:32px;border-top:2px solid var(--text)}
.case{padding:clamp(22px,2.8vw,30px) clamp(18px,2vw,26px);border-bottom:1px solid var(--line);position:relative}
.case::before{content:"";position:absolute;left:0;top:0;width:100%;height:0;background:var(--orange-soft);transition:height .3s}
.case:hover::before{height:100%}
.case > *{position:relative}
.case b{display:block;font-size:clamp(30px,3.6vw,40px);font-weight:900;color:var(--orange);line-height:1;margin-bottom:12px;letter-spacing:-.02em}
.case p{font-size:clamp(15.5px,1.8vw,17.5px);font-weight:700;line-height:1.75}

.promise-head{font-size:clamp(21px,3vw,31px);font-weight:900;line-height:1.3;margin-bottom:26px}
.promise-head em{font-style:normal;color:var(--orange)}
.promise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,32px)}
.promise-grid > div{border-top:3px solid var(--orange);padding-top:18px}
.promise-grid strong{display:block;font-size:clamp(28px,3.8vw,38px);font-weight:900;line-height:1.2;margin-bottom:10px}
.promise-grid strong i{font-style:normal;font-size:.5em;margin-left:3px}
.promise-grid p{font-size:14px;line-height:1.9;color:var(--text-2)}

.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,26px);margin-top:36px}
.work{display:block;text-decoration:none;color:inherit;transition:transform .25s}
.work:nth-child(2){margin-top:clamp(0px,3vw,42px)}
.work:nth-child(3){margin-top:clamp(0px,6vw,84px)}
.work:nth-child(5){margin-top:clamp(0px,3vw,42px)}
.work:nth-child(6){margin-top:clamp(0px,6vw,84px)}
.work:hover{transform:translateY(-6px)}
.work figure{overflow:hidden;position:relative;box-shadow:0 26px 54px -34px rgba(20,24,30,.75)}
.work img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s}
.work:hover img{transform:scale(1.05)}
.work figcaption{padding:15px 2px 0}
.work .cat{display:inline-flex;background:var(--orange);color:#fff;padding:2px 11px;font-size:11.5px;font-weight:900;letter-spacing:.06em;margin-bottom:8px}
.work h3{font-size:15.5px;font-weight:900;letter-spacing:.04em;margin-bottom:3px}
.work p{font-size:12.5px;color:var(--text-2);line-height:1.7}

.works-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:clamp(34px,4.4vw,52px);padding-top:26px;border-top:2px solid var(--text)}
.works-more p{display:flex;align-items:center;gap:14px;font-size:15px;font-weight:900;line-height:1.6}
.works-more p b{font-size:clamp(40px,5.2vw,56px);font-weight:900;color:var(--orange);line-height:1}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);margin-top:34px;align-items:start}
.plan{background:#fff;border:1px solid var(--line);overflow:hidden}
.plan-head{background:var(--paper-2);text-align:center;padding:11px;font-size:13px;font-weight:900;color:var(--text-2)}
.plan-body{padding:clamp(22px,2.6vw,28px);text-align:center;border-bottom:1px solid var(--line-2)}
.plan-body h3{font-size:clamp(19px,2.4vw,23px);font-weight:900;line-height:1.3;margin-bottom:8px}
.plan-body .for{font-size:13px;color:var(--text-2);line-height:1.8;margin-bottom:16px;min-height:3.6em}

.plan-zero{display:flex;align-items:baseline;justify-content:center;gap:0 8px;background:var(--orange-soft);color:var(--orange-dark);padding:12px 14px;margin-bottom:16px}
.plan-zero span{font-size:13px;font-weight:900}
.plan-zero b{font-size:clamp(30px,3.8vw,38px);font-weight:900;line-height:1;letter-spacing:-.02em}
.plan-zero i{font-style:normal;font-size:17px;font-weight:900}

.plan-price{display:flex;align-items:baseline;justify-content:center;gap:4px;margin-bottom:6px}
.plan-price .pre{font-size:13.5px;font-weight:900;color:var(--text-2)}
.plan-price b{font-size:clamp(31px,4.2vw,40px);font-weight:900;line-height:1;letter-spacing:-.02em}
.plan-price i{font-style:normal;font-size:17px;font-weight:900}
.plan-body .tax{font-size:12px;color:var(--text-3);margin-bottom:0}

.plan-year{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;
  border-top:1px dashed var(--line);margin-top:14px;padding-top:14px;
  font-size:13px;font-weight:700;color:var(--text-2)}
.plan-year b{font-size:15px;font-weight:900;color:var(--text)}
.plan-year span{background:var(--orange);color:#fff;font-size:12px;font-weight:900;padding:3px 10px}

.plan ul{padding:clamp(16px,2.2vw,22px)}
.plan li{display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:700;line-height:1.75;padding:10px 0;border-bottom:1px dashed var(--line)}
.plan li:last-child{border-bottom:0}
/* 項目と、その下に付く小さな注記。li は flex なので、文言と注記を span で
   束ねてから小さい行を下へ落とす。
   ★注記の文字は 12px 以上にすること。これより小さいと文字サイズの下限に触れる。 */
.plan li > span{flex:1;min-width:0}
.plan li small{display:block;font-size:12px;font-weight:400;color:var(--text-3);line-height:1.7;margin-top:5px}
.plan li svg{width:19px;height:19px;flex:none;margin-top:3px}
.plan li.yes svg{color:var(--orange)}
.plan li.no{color:#A8ADB5;font-weight:400}
.plan li.no svg{color:#CDD2D9}
.plan.is-best{border:2px solid var(--orange);box-shadow:0 30px 60px -34px rgba(242,98,42,.7)}
.plan.is-best .plan-head{background:var(--orange);color:#fff;font-size:14px}
.plan.is-best .plan-zero{background:var(--orange);color:#fff}
.plan.is-best .plan-price b{color:var(--orange)}

.plan.is-premium{border-color:var(--gold-deep);box-shadow:0 30px 60px -34px rgba(212,175,55,.62)}

.plan.is-premium .plan-head{
  background:linear-gradient(100deg,#B8912F 0%,#E8CE72 26%,#F7EBB8 44%,#D9B441 64%,#BB942F 100%);
  color:var(--gold-ink);font-size:14px;letter-spacing:.04em;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}

.plan.is-premium .plan-zero{background:var(--head-ink);color:#fff}
.plan.is-premium .plan-body{border-bottom-color:var(--line)}
.plans-note{font-size:12px;color:var(--text-3);line-height:1.85;margin-top:14px}

.common{background:#fff;border:1px solid var(--line);border-left:4px solid var(--orange);
  padding:clamp(22px,3vw,32px);margin-top:clamp(24px,3.2vw,36px)}
.common h3{font-size:clamp(16px,2vw,19px);font-weight:900;line-height:1.3;margin-bottom:16px}
.common ul{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 22px}
.common li{position:relative;padding-left:27px;font-size:14px;font-weight:700;line-height:1.8}
.common li::before{content:"";position:absolute;left:3px;top:.5em;width:13px;height:7px;
  border-left:3px solid var(--orange);border-bottom:3px solid var(--orange);transform:rotate(-45deg)}
.common .fine{font-size:12px;color:var(--text-3);line-height:1.85;margin-top:16px}

.ticket{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(22px,3.2vw,44px);
  background:#fff;border:1px solid var(--line);padding:clamp(24px,3.4vw,38px);
  margin-top:clamp(24px,3.2vw,36px);align-items:start}
.ticket-label{display:inline-flex;background:var(--orange);color:#fff;font-size:13px;font-weight:900;
  letter-spacing:.04em;padding:6px 16px;margin-bottom:14px}
.ticket-side h3{font-size:clamp(18px,2.3vw,22px);font-weight:900;line-height:1.3;margin-bottom:10px}
.ticket-side p{font-size:13.5px;line-height:1.9;color:var(--text-2)}
.ticket-lead{font-size:14px;font-weight:700;margin-bottom:14px}
.ticket-lead b{color:var(--orange-dark);font-weight:900}
.ticket-list{display:grid;gap:8px}
.ticket-list li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:4px 14px;background:var(--paper-2);padding:13px 16px;border-left:3px solid var(--orange)}
.ticket-list b{font-size:14.5px;font-weight:900}
.ticket-list span{font-size:13px;font-weight:900;color:var(--orange-dark)}
.ticket-rule{display:grid;gap:6px;margin-top:16px}
.ticket-rule li{position:relative;padding-left:18px;font-size:13px;font-weight:700;color:var(--text-2);line-height:1.8}
.ticket-rule li::before{content:"";position:absolute;left:2px;top:.72em;width:7px;height:7px;background:var(--orange)}
.ticket .fine{font-size:12px;color:var(--text-3);line-height:1.85;margin-top:16px}

.sub-head{font-size:clamp(17px,2.2vw,21px);font-weight:900;line-height:1.3;
  margin-top:clamp(30px,3.8vw,46px);padding-left:14px;border-left:5px solid var(--orange)}

.options{margin-top:clamp(18px,2.4vw,26px);border-top:2px solid var(--text)}
.option-row{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr) auto;gap:8px 20px;align-items:center;padding:17px 4px;border-bottom:1px solid var(--line-2)}
.option-row b{font-size:14.5px;font-weight:900;line-height:1.7}
.option-row p{font-size:13px;color:var(--text-2);line-height:1.8}
.option-row span{font-size:15.5px;font-weight:900;color:var(--orange);white-space:nowrap;text-align:right}

.terms{background:#fff;border:1px solid var(--line);padding:clamp(24px,3.4vw,38px);margin-top:clamp(24px,3.2vw,36px)}
.terms h3{font-size:clamp(17px,2.2vw,21px);font-weight:900;line-height:1.3;margin-bottom:20px}
.terms-lead{font-size:13.5px;line-height:1.95;color:var(--text-2);margin-bottom:20px;max-width:70ch}
.terms-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(20px,3vw,40px);border-top:2px solid var(--text)}
.terms-list > div{display:grid;grid-template-columns:minmax(0,132px) minmax(0,1fr);gap:6px 12px;
  align-items:baseline;padding:13px 2px;border-bottom:1px solid var(--line-2)}
.terms-list dt{font-size:13.5px;font-weight:900;color:var(--orange-dark);line-height:1.8}
.terms-list dd{font-size:13.5px;font-weight:700;line-height:1.85}
.terms .fine{font-size:12px;color:var(--text-3);line-height:1.85;margin-top:16px}
.terms .fine + .fine{margin-top:6px}

.include-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:32px;background:var(--line)}
.include{background:#fff;padding:clamp(20px,2.4vw,26px)}
.include .ico{width:44px;height:44px;background:var(--orange-soft);display:grid;place-items:center;color:var(--orange);margin-bottom:14px}
.include .ico svg{width:23px;height:23px}
.include h3{font-size:15.5px;font-weight:900;line-height:1.3;margin-bottom:8px}
.include p{font-size:13px;color:var(--text-2);line-height:1.85}

.reason-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:34px}
.reason-grid > article{border-top:2px solid var(--orange);padding-top:18px}
.reason-grid b{display:block;font-size:clamp(34px,4.6vw,50px);font-weight:900;color:var(--orange);line-height:1;margin-bottom:12px;letter-spacing:-.02em}
.reason-grid h3{font-size:16.5px;font-weight:900;line-height:1.3;margin-bottom:10px}
.reason-grid p{font-size:13.5px;color:var(--text-2);line-height:1.9}

.team{margin-top:clamp(36px,4.6vw,60px);border-top:1px solid var(--line);padding-top:clamp(28px,3.6vw,44px)}
.team h3{font-size:clamp(20px,2.8vw,28px);font-weight:900;line-height:1.3;margin-bottom:14px}
.team > p{font-size:14px;line-height:1.95;color:var(--text-2);max-width:72ch}
.team-flow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(16px,2.6vw,30px);align-items:center;margin-top:clamp(22px,3vw,32px)}
.team-owner{width:104px;height:104px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-content:center;text-align:center;flex:none}
.team-owner b{display:block;font-size:18px;font-weight:900}
.team-owner span{font-size:11.5px;font-weight:700;color:rgba(255,255,255,.92)}
.team-list{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.team-list li{background:#fff;border:1px solid var(--line);padding:9px 6px;text-align:center;font-size:12.5px;font-weight:700}
.team-out{background:var(--text);color:#fff;padding:15px 20px;text-align:center;flex:none}
.team-out b{display:block;font-size:14.5px;font-weight:900;margin-bottom:3px}
.team-out span{font-size:13.5px;font-weight:900;color:var(--orange)}

.flow{margin-top:36px;position:relative}
.flow::before{content:"";position:absolute;left:30px;top:22px;bottom:66px;width:3px;background:linear-gradient(180deg,var(--orange),rgba(242,98,42,.2))}
.flow-item{display:grid;grid-template-columns:64px minmax(0,1fr);gap:clamp(18px,2.6vw,30px);padding-bottom:clamp(28px,3.8vw,42px)}
.flow-item:last-child{padding-bottom:0}
.flow-no{position:relative;z-index:1;width:64px;height:64px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-content:center;text-align:center}
.flow-no b{display:block;font-size:22px;font-weight:900;line-height:1.1}
.flow-no span{font-size:11.5px;font-weight:900;line-height:1.2}
.flow-item:last-child .flow-no{background:var(--text)}
.flow-item:last-child .flow-no b{font-size:19px}
.flow-body h3{font-size:clamp(17.5px,2.3vw,21px);font-weight:900;line-height:1.3;margin:10px 0 10px}
.flow-body p{font-size:14px;color:var(--text-2);line-height:1.95;margin-bottom:13px}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags li{background:#fff;border:1px solid var(--line);padding:5px 14px;font-size:12.5px;font-weight:700}
.tags li.hot{background:var(--orange-soft);border-color:var(--orange-soft);color:var(--orange-dark)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{margin-top:32px;border-top:2px solid var(--text)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:flex-start;gap:14px;padding:21px 44px 21px 0;position:relative;cursor:pointer;list-style:none;font-size:clamp(15px,1.8vw,16.5px);font-weight:900;line-height:1.7}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{width:28px;height:28px;flex:none;background:var(--text);color:#fff;display:grid;place-items:center;font-size:13.5px;font-weight:900;margin-top:2px}
.faq summary::after{content:"";position:absolute;right:6px;top:30px;width:11px;height:11px;border-right:3px solid var(--orange);border-bottom:3px solid var(--orange);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);top:34px}
.faq .a{padding:0 0 24px 42px;font-size:14px;line-height:1.95;color:var(--text-2)}
.faq .a b{color:var(--orange-dark)}

.contact-lead{font-size:15px;line-height:1.95;color:rgba(255,255,255,.94);max-width:64ch;margin-top:8px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);margin-top:clamp(24px,3vw,34px)}
.steps div{border-top:2px solid rgba(255,255,255,.7);padding-top:16px}
.steps span{display:block;font-size:12.5px;font-weight:900;letter-spacing:.08em;margin-bottom:7px;color:rgba(255,255,255,.85)}
.steps p{font-size:14px;font-weight:700;line-height:1.8}

.book{background:#fff;color:var(--text);padding:clamp(22px,3vw,32px);margin-top:clamp(26px,3.4vw,40px)}
.book h3{font-size:clamp(18px,2.3vw,22px);font-weight:900;line-height:1.3;margin-bottom:8px}
.book > p{font-size:14px;color:var(--text-2);margin-bottom:18px}
.book .btn{margin-bottom:8px}
.book .btn-main{background:var(--orange);color:#fff}
.cal-embed{margin-top:12px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.book .fine{font-size:12px;color:var(--text-3);margin-top:10px}
.cal-note{display:none}

.company{margin-top:0}
.company h3{font-size:18px;font-weight:900;margin-bottom:18px;padding-left:14px;border-left:5px solid var(--orange)}
.company dl{display:grid;grid-template-columns:minmax(120px,180px) minmax(0,1fr)}
.company dt,.company dd{padding:15px 4px;border-bottom:1px solid var(--line-2);font-size:14px;line-height:1.85}
.company dt{font-weight:700;color:var(--text-2)}
.company dd{font-weight:700}
.company dd small{display:block;font-size:12px;font-weight:400;color:var(--text-3)}
.company dd a{color:var(--orange-dark)}

@media (max-width:1080px){
  .hero-panels{width:62%;right:-8%}
  .hero-in{max-width:min(48%,420px)}
}

@media (max-width:900px){
  :root{--slant:5vw}
  .hero{padding-bottom:0;clip-path:none}
  .hero-veil{display:none}
  
  .hero-in{max-width:none;margin-top:calc(3.4963vw + clamp(28px,5vw,44px))}
  
  
  .hero{padding-top:0}
  .hero-panels{
    position:relative;top:auto;right:auto;width:100vw;height:clamp(250px,46vw,360px);
    margin:3.4963vw 0 0 50%;transform:translateX(-50%) skewY(-4deg);
  }
  
  .hero-panels img,
  .hero-panels .pn1 img,
  .hero-panels .pn2 img,
  .hero-panels .pn3 img{transform:skewY(4deg) scale(1.3)}
  .hero-panels .pn2,.hero-panels .pn3{margin-top:0}
  .promise-grid,.reason-grid,.plans,.steps{grid-template-columns:1fr}
  
  .include-grid,.work-grid{grid-template-columns:repeat(2,1fr)}
  .work:nth-child(n){margin-top:0}
  .work:nth-child(even){margin-top:clamp(0px,4vw,40px)}
  .team-flow{grid-template-columns:1fr;justify-items:center;text-align:center}
  .team-list{width:100%}
  .common ul{grid-template-columns:repeat(2,1fr)}
  .ticket{grid-template-columns:1fr}
  .terms-list{grid-template-columns:1fr}
}

@media (min-width:544px) and (max-width:900px){
  .hero-panels{height:clamp(250px,58vw,520px)}
}

@media (max-width:820px){
  .featurebar ul{grid-template-columns:repeat(2,1fr);gap:2px 0}
  .featurebar li{padding:12px 6px;justify-content:flex-start}
  .featurebar li + li{border-left:0}
  .featurebar li:nth-child(even){border-left:1px solid var(--line)}
  .option-row{grid-template-columns:1fr auto;align-items:start}
  .option-row p{grid-column:1/-1;order:3}
  .company dl{grid-template-columns:1fr}
  .company dt{padding-bottom:0;border-bottom:0}
  .company dd{padding-top:4px}
  .factbar ul{grid-template-columns:1fr;gap:16px}
}

@media (max-width:640px){
  body{font-size:15.5px}
  .hero{padding-top:0}
  .case-grid,.include-grid,.work-grid{grid-template-columns:1fr}
  .work:nth-child(even){margin-top:0}
  .team-list{grid-template-columns:repeat(2,1fr)}
  .flow::before{left:22px}
  .flow-item{grid-template-columns:48px minmax(0,1fr);gap:16px}
  .flow-no{width:48px;height:48px}
  .flow-no b{font-size:17px}
  .flow-no span{font-size:11px}
  .flow-item:last-child .flow-no b{font-size:15px}
  .faq summary{padding-right:34px}
  .faq .a{padding-left:0}
  .works-more,.hero-cta{flex-direction:column;align-items:stretch}
  .works-more .btn,.hero-cta .btn{width:100%}
  .cal-embed{display:none}
  .cal-note{display:block;font-size:13px;color:var(--text-2);line-height:1.9;margin-top:4px}
  .common ul{grid-template-columns:1fr}
  .terms-list > div{grid-template-columns:1fr}
}

@media (max-width:430px){
  .price-hero{display:block;margin-bottom:14px}
  .price-hero .unit-pre{display:block;margin-bottom:-2px}
}

h1,h2,h3,.h2,.promise-head,.lead,.hero-sub,.movie-lead,.contact-lead{word-break:auto-phrase}

.h2 em,.promise-head em{white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}

.work .cat{font-size:12px}
.team-owner span{font-size:12px}
.flow-no span{font-size:12px}

.factbar li>b{margin-bottom:8px}
.work figcaption>h3{margin-bottom:8px}

.company dd a{display:inline-flex;align-items:center;min-height:24px}

.book .fine a{display:inline-flex;align-items:center;min-height:24px}

@media(max-width:768px){
  
  .company dd a{min-height:44px}
  .book .fine a{min-height:44px}
}

@media(max-width:430px){
  
  h1,h2,h3,h2.h2,h3.h3,.promise-head{line-height:1.3}
  
  h1,h2,h3,h2.h2,.promise-head{text-wrap:balance}
}

@media(min-width:901px){
  .work:nth-child(3n+2){margin-top:clamp(0px,3vw,42px)}
  .work:nth-child(3n){margin-top:clamp(0px,6vw,84px)}
}

.hero-panels figure{opacity:0;animation:fadeSeq .6s ease forwards}
.hero-panels .pn1{animation-delay:.02s}
.hero-panels .pn2{animation-delay:.10s}
.hero-panels .pn3{animation-delay:.18s}

.hero-in>*{opacity:0;animation:fadeSeq .3s ease forwards}
.hero-in .pill{animation-delay:.04s}
.hero-in h1{animation-delay:.10s}
.hero-in .hero-sub{animation-delay:.16s}
.hero-in .price-hero{animation-delay:.22s}
.hero-in .note-line{animation-delay:.28s}
.hero-in .hero-cta{animation-delay:.34s}
@keyframes fadeSeq{to{opacity:1}}

.hero-panels::after{
  content:"";position:absolute;inset:-10% -30%;pointer-events:none;z-index:3;
  background:linear-gradient(100deg,transparent 34%,rgba(255,255,255,.14) 44%,rgba(255,255,255,.50) 50%,rgba(255,255,255,.14) 56%,transparent 66%);
  transform:translate3d(-60%,0,0);opacity:0;
  animation:sheenLoop 7s cubic-bezier(.35,.55,.2,1) .5s infinite;
}
@keyframes sheenLoop{
  0%{transform:translate3d(-60%,0,0);opacity:0}
  3%{opacity:1}
  17%{transform:translate3d(70%,0,0);opacity:1}
  20%{transform:translate3d(70%,0,0);opacity:0}
  100%{transform:translate3d(-60%,0,0);opacity:0}
}

@media(max-width:900px){
  
  .hero-panels::after{
    background:linear-gradient(80deg,transparent 32%,rgba(255,255,255,.10) 44%,rgba(255,255,255,.30) 50%,rgba(255,255,255,.10) 56%,transparent 68%);
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-panels figure,.hero-panels::after,.hero-in>*{animation:none !important;opacity:1 !important}
  .hero-panels::after{display:none}
}

.movie-lead{font-size:clamp(15px,1.5vw,17px);line-height:2;color:var(--text-2);
  margin-bottom:clamp(28px,3.4vw,44px)}

.movie-plate{position:relative}
.movie-plate::before{content:"";position:absolute;left:18px;top:18px;right:-18px;bottom:-18px;
  background:var(--orange);border-radius:10px;z-index:0}
.movie-stage{position:relative;z-index:1;aspect-ratio:16/9;background:var(--head-ink);
  border-radius:10px;overflow:hidden;box-shadow:0 30px 70px -34px rgba(20,24,30,.6)}
.movie-stage video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover;background:var(--head-ink)}
@media (max-width:720px){
  .movie-plate::before{left:10px;top:10px;right:-10px;bottom:-10px}
}

@media(max-width:430px){
  .price-hero .num{font-size:clamp(60px,17vw,84px)}
  .price-hero .unit{font-size:clamp(24px,6vw,30px)}
}
@media(max-width:900px){
  .ticket-side h3{font-size:clamp(18px,3.4vw,21px)}
}

.inquiry-box{background:#fff;border:1px solid var(--line);border-left:4px solid var(--orange);
  padding:clamp(24px,3.4vw,40px);margin-top:clamp(26px,3.4vw,40px);max-width:760px}
.inq-field{margin-bottom:clamp(16px,2vw,22px)}
.inq-field label{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:900;margin-bottom:8px}
.inq-field .req{background:var(--orange);color:#fff;font-size:12px;font-weight:900;padding:2px 9px}
.inq-field input,.inq-field textarea{
  width:100%;font:inherit;font-size:16px;color:var(--text);background:var(--paper-2);
  border:1px solid var(--line);padding:14px 16px;min-height:52px;
}
.inq-field textarea{min-height:150px;line-height:1.9;resize:vertical}
.inq-field input:focus,.inq-field textarea:focus{outline:3px solid var(--orange);outline-offset:2px;background:#fff}
.inq-consent{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.8;margin-top:6px}

.inq-consent input{width:26px;height:26px;margin-top:0;flex:none;accent-color:var(--orange)}
.inq-consent a{color:var(--orange-dark);text-decoration:underline;display:inline-flex;align-items:center;min-height:24px}
.inq-submit{margin-top:clamp(20px,2.6vw,28px)}
.inq-submit .btn{width:100%;max-width:360px}

.inq-confirm h3{font-size:clamp(17px,2.2vw,21px);font-weight:900;line-height:1.3;margin-bottom:8px}
.inq-lead{font-size:14px;color:var(--text-2);margin-bottom:18px}
.inq-row{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:8px 16px;
  padding:14px 2px;border-bottom:1px solid var(--line-2)}
.inq-label{font-size:13.5px;font-weight:900;color:var(--orange-dark)}
.inq-value{font-size:14.5px;font-weight:700;line-height:1.9;white-space:pre-wrap}
.inq-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,2.6vw,28px)}
.inq-error{font-size:13.5px;line-height:1.9;color:var(--orange-dark);margin-top:16px;
  background:var(--orange-soft);padding:14px 16px}
.inq-error a{color:var(--orange-dark);text-decoration:underline;display:inline-flex;align-items:center;min-height:24px}
.inq-thanks{margin-top:16px;background:var(--paper-2);border-left:4px solid var(--orange);padding:20px 22px}
.inq-thanks p{font-size:15px;font-weight:700;line-height:1.9}

@media(max-width:768px){
  
  .inq-consent input{width:44px;height:44px}
  .inq-consent a{min-height:44px}
  .inq-error a{min-height:44px}
}
@media(max-width:640px){
  .inq-row{grid-template-columns:1fr;gap:4px}
  .inq-actions .btn{width:100%}
}

.movie-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px);
  max-width:1080px;margin:clamp(30px,3.4vw,44px) auto 0}
.movie-card{margin:0}
.movie-card figcaption{margin-top:clamp(16px,1.8vw,22px);text-align:left}
.movie-card figcaption b{display:block;font-size:clamp(15px,1.5vw,17px);
  font-weight:800;color:var(--text);letter-spacing:.01em}
.movie-card figcaption span{display:block;margin-top:6px;
  font-size:clamp(13px,1.3vw,14px);line-height:1.9;color:var(--text-2)}
@media(max-width:640px){
  .movie-duo{grid-template-columns:1fr;gap:34px}
}

/* ===== NETWORK section ===== */
.net-fig{margin-top:clamp(26px,3.4vw,40px);background:var(--paper);border:1px solid var(--line);
  padding:clamp(20px,2.8vw,38px)}
.net-row{display:grid;grid-template-columns:1fr auto 1fr;
  gap:clamp(14px,2.4vw,32px);align-items:stretch}
.net-side{display:flex;flex-direction:column}
.net-side ul{flex:1;align-content:center}
.net-core{position:relative;align-self:center;
  width:clamp(202px,19vw,224px);aspect-ratio:1;border-radius:50%;background:var(--orange);
  color:#fff;display:grid;place-content:center;text-align:center;padding:12px;
  box-shadow:0 14px 30px rgba(242,98,42,.28)}
.net-core b{display:block;font-size:clamp(12.5px,1.45vw,15.5px);font-weight:900;line-height:1.45}
.net-core-name{display:block;white-space:nowrap;letter-spacing:-.01em}
.net-core span{display:block;margin-top:8px;font-size:12px;font-weight:700;
  line-height:1.6;color:rgba(255,255,255,.94)}
.net-core::before,.net-core::after{content:"";position:absolute;top:50%;
  width:clamp(14px,2.4vw,32px);border-top:2px dashed var(--orange);opacity:.6}
.net-core::before{right:100%}
.net-core::after{left:100%}
.net-cap{display:block;font-size:12px;font-weight:900;letter-spacing:.08em;color:var(--orange);
  margin-bottom:10px}
.net-side ul{display:grid;gap:7px;list-style:none;margin:0;padding:0}
.net-side li{background:var(--paper-2);border:1px solid var(--line);padding:9px 10px;
  font-size:12.5px;font-weight:700;text-align:center;line-height:1.4}
.net-db{position:relative;margin-top:clamp(18px,2.4vw,28px);border-top:3px solid var(--orange);
  background:var(--paper-2);
  padding:15px clamp(14px,2vw,22px);display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 16px}
.net-db::before{content:"";position:absolute;left:50%;bottom:100%;
  height:clamp(18px,2.4vw,28px);border-left:2px dashed var(--orange);opacity:.6}
.net-db b{font-size:14.5px;font-weight:900;flex:none}
.net-db span{font-size:12.5px;color:var(--text-2);line-height:1.8}
.net-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,34px);
  margin-top:clamp(28px,3.4vw,44px)}
.net-cards > article{background:var(--paper);border:1px solid var(--line);
  padding:clamp(18px,2.2vw,26px)}
.net-cards b{display:block;font-size:clamp(28px,3.6vw,40px);font-weight:900;color:var(--orange);
  line-height:1;margin-bottom:12px;letter-spacing:-.02em}
.net-cards h3{font-size:16px;font-weight:900;line-height:1.45;margin-bottom:10px;text-wrap:balance}
.net-cards p{font-size:13.5px;color:var(--text-2);line-height:1.9}

@media(max-width:900px){
  .net-cards{grid-template-columns:1fr}
  .net-row{grid-template-columns:1fr;justify-items:center;gap:18px}
  .net-core::before,.net-core::after{display:none}
  .net-core{order:-1}
  .net-side{width:100%;max-width:420px;text-align:center}
  .net-side ul{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:430px){
  .net-fig{padding:16px}
  .net-side li{padding:9px 6px;font-size:12px}
}


/* ═══ 動きのある部品 ── 見出しの合図・流れるスマホ画面・無料ホームページ案 ═══
   ★持ち上がりは transform だけで作る。opacity を 0 にすると、その要素は
     「見えていない」ものとして扱われ、表示の検査から外れる。
   ═══════════════════════════════════════════════════════════════════ */

.has-rv .rv{transform:translateY(26px);transition:transform .85s cubic-bezier(.16,1,.3,1)}
.has-rv .rv.in{transform:none}

/* ── ヒーロー左下の SCROLL ────────────────────────────────── */
.scroll-wrap{position:absolute;left:0;right:0;bottom:calc(var(--slant) + 12px);z-index:3;pointer-events:none}
.scroll-ind{display:inline-flex;align-items:center;gap:12px;
  font-size:11px;font-weight:900;letter-spacing:.3em;color:var(--text-3)}
.scroll-ind .ln{position:relative;overflow:hidden;width:1px;height:44px;
  background:linear-gradient(var(--line),rgba(227,230,235,0))}
.scroll-ind .ln::after{content:"";position:absolute;top:0;left:0;width:100%;height:55%;
  background:var(--orange);animation:scrolldn 2.3s ease-in-out infinite}
@keyframes scrolldn{0%{transform:translateY(-100%)}100%{transform:translateY(190%)}}

/* ── REASON 節の回る図(カンパニーサイトの AI CORE 相当)──────── */
.reason-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);
  gap:clamp(20px,3.6vw,52px);align-items:center}
.ai-orbit{position:relative;display:grid;place-items:center;min-height:300px}
.ai-orbit__core{position:relative;z-index:2;width:130px;height:130px;border-radius:32px;
  display:grid;place-content:center;justify-items:center;text-align:center;line-height:1;
  background:linear-gradient(145deg,#FF9457,var(--orange) 56%,var(--orange-dark));
  color:#fff;box-shadow:0 26px 58px -22px rgba(242,98,42,.9);
  animation:coreFloat 5s ease-in-out infinite}
.ai-orbit__core b{display:block;font-size:31px;font-weight:900;letter-spacing:.04em}
.ai-orbit__core span{display:block;margin-top:7px;font-size:10.5px;font-weight:900;letter-spacing:.24em}
.ai-orbit__ring{position:absolute;border-radius:50%;border:1px solid rgba(242,98,42,.32)}
.ai-orbit__ring.r1{width:232px;height:232px}
.ai-orbit__ring.r2{width:300px;height:186px;border-color:rgba(20,24,30,.13)}
/* ★2026-08-22 是正: 回る枠を「大きさ 0 の点」に変えた。
   以前は 232x232 / 300x186 の枠ごと回していたので、45 度付近で枠の外接矩形が
   328〜344px まで太り、幅 320px の画面で文書そのものが 0〜19px 横へ伸びた
   (15s / 21s で回るため、はみ出しが出たり消えたりする = 横スクロールがちらつく)。
   枠には背景も線も無く、目に見えているのは中の点だけ。点の中心が通る半径
   (s1 = 232/2 - 0.5 = 115.5px / s2 = 186/2 - 0.5 = 92.5px)を保ったまま
   枠を 0x0 にすれば、点の位置・大きさ・速さ・向きは 1px も変わらない。
   ★枠に width / height を戻すと、その瞬間に 320px の横スクロールが再発する。 */
.ai-orbit__spin{position:absolute;width:0;height:0;
  animation:orbitSpin 15s linear infinite}
.ai-orbit__spin.s2{animation-duration:21s;animation-direction:reverse}
.ai-orbit__spin i{position:absolute;left:-5.5px;display:block;width:11px;height:11px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 0 6px rgba(242,98,42,.14)}
/* 点は「回る点の中心から半径ぶん上」に置く。-121px = -(115.5 + 11/2)、-98px = -(92.5 + 11/2)。
   ★点そのものに transform を付けないこと。付けると位置は同じでも輪郭の描かれ方が変わり、
     縁の 245 画素が別の色で塗られた(実測)。位置は left / top だけで決める。 */
.ai-orbit__spin.s1 i{top:-121px}
.ai-orbit__spin.s2 i{top:-98px;background:var(--text);box-shadow:0 0 0 6px rgba(20,24,30,.08)}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
@keyframes coreFloat{50%{transform:translateY(-10px)}}

/* REASON 節: 二頭身の AI ロボット 5 体が、それぞれ別の作業をしている図。
   ・素の状態(動きを切った状態)が出来上がった姿。隠しているのは @keyframes の中だけ。
   ・SVG 内に <text> は無し。動かすのは transform と opacity だけ。
   ・動き 1 本ごとに 0% と 100% を同値にしてある(継ぎ目で飛ばない)。
     主周期は 16s。細かい生気は独立した短い周期なので、
     図**全体**が 16s ごとに同じ絵へ戻るわけではない。
   ・自動生成物。座標と時間割は生成器が出している。 */
.ai-build{margin-top:clamp(30px,4vw,52px)}
.ai-build .rb-svg{display:block;width:100%;height:auto;aspect-ratio:1400 / 360}
@media(max-width:900px){
  /* 狭い画面では右の 2 体(確かめる / 仕上げる)を切り落として、
     手前の 3 体と画面を大きく見せる。切るのは器の縦横比だけ。 */
  .ai-build .rb-svg{aspect-ratio:938 / 360}
}

/* ── 舞台 ───────────────────────────────────────────────────────────── */
.ai-build .rb-bg{fill:#fff;stroke:var(--line);stroke-width:1.5}
.ai-build .rb-dot{fill:#F2E8DF}
.ai-build .rb-halo{fill:rgba(242,98,42,.05)}
.ai-build .rb-floor{fill:#FAF1EA}
.ai-build .rb-horizon{fill:#EFE2D8}
.ai-build .rb-shadow{fill:rgba(20,24,30,.07)}
.ai-build .rb-fl-h{fill:rgba(242,98,42,.13)}

/* ── ロボットの体 ───────────────────────────────────────────────────── */
.ai-build .rb-lk,.ai-build .rb-torso,.ai-build .rb-hip,.ai-build .rb-skull,
.ai-build .rb-hand,.ai-build .rb-foot{
  fill:#fff;stroke:#D3DAE3;stroke-width:2.2;stroke-linejoin:round}
.ai-build .rb-cap{fill:#EAEFF5;stroke:#D3DAE3;stroke-width:1.8}
.ai-build .rb-ring{fill:#C6CFDA}
.ai-build .rb-ear{fill:#E7EDF4;stroke:#D3DAE3;stroke-width:1.8}
.ai-build .rb-face{fill:#2A3140}
.ai-build .rb-eye{fill:#FFB185}
.ai-build .rb-glow{fill:rgba(242,98,42,.22)}
.ai-build .rb-smile{fill:none;stroke:#FF9457;stroke-width:3;stroke-linecap:round}
.ai-build .rb-ant{fill:#D3DAE3}
.ai-build .rb-bulb{fill:var(--orange)}
.ai-build .rb-chest{fill:var(--orange-soft);stroke:#F2CBB4;stroke-width:1.5}
.ai-build .rb-bar{fill:var(--orange);opacity:.85;transform-box:fill-box;
  transform-origin:center bottom}
.ai-build .rb-orb{fill:var(--orange)}
.ai-build .rb-pen{fill:#3A4353}

/* ── 道具 ───────────────────────────────────────────────────────────── */
.ai-build .rb-desk-top,.ai-build .rb-desk-leg,.ai-build .rb-hop-b,
.ai-build .rb-hop-leg,.ai-build .rb-mon-stand,.ai-build .rb-mon-foot,
.ai-build .rb-crate-b,.ai-build .rb-mini-st,.ai-build .rb-tab-b{
  fill:#E7EDF4;stroke:#D3DAE3;stroke-width:1.8;stroke-linejoin:round}
.ai-build .rb-crate-f{fill:#D5DDE7;stroke:#D3DAE3;stroke-width:1.8}
.ai-build .rb-keyb{fill:#B4BFCD}
.ai-build .rb-mini-b,.ai-build .rb-tab-s{fill:#2A3140}
.ai-build .rb-code{fill:#FF9457;transform-box:fill-box;transform-origin:left center}
.ai-build .rb-mon-sh{fill:rgba(20,24,30,.06)}
.ai-build .rb-mon-b{fill:#fff;stroke:#D3DAE3;stroke-width:2.4}
.ai-build .rb-scr{fill:#fff}
.ai-build .rb-chrome{fill:#EDF0F4}
.ai-build .rb-chrome-d{fill:#C6CFDA}
.ai-build .rb-chrome-u{fill:#F5F7FA;stroke:#DFE4EB;stroke-width:1.2}
.ai-build .rb-board-b{fill:#fff;stroke:#D3DAE3;stroke-width:2}
.ai-build .rb-board-c{fill:#CFD7E1}
.ai-build .rb-board-l{fill:#DFE4EB}
.ai-build .rb-tick{fill:none;stroke:var(--orange);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;transform-box:fill-box;
  transform-origin:center center}

/* ── 出来上がっていく頁 ─────────────────────────────────────────────── */
.ai-build .rb-pg-bar{fill:#EDF0F4}
.ai-build .rb-pg-dot{fill:#CBD2DC}
.ai-build .rb-pg-nav{fill:#CBD2DC}
.ai-build .rb-pg-cta{fill:var(--orange)}
.ai-build .rb-pg-hero{fill:url(#rbHero)}
.ai-build .rb-pg-h1{fill:var(--text)}
.ai-build .rb-pg-h2{fill:var(--orange)}
.ai-build .rb-pg-card{fill:#fff;stroke:#DFE4EB;stroke-width:1.4}
.ai-build .rb-pg-cl{fill:#DFE4EB}
.ai-build .rb-pg-line{fill:#DDE2E9}
.ai-build .rb-blk{transform-box:fill-box;transform-origin:left center}

/* ── 関節(原点を各要素のローカル 0,0 に固定する)──────────────────── */
.ai-build .rb-j,.ai-build .rb-body,.ai-build .rb-head,.ai-build .rb-pos,
.ai-build .rb-face-g,.ai-build .rb-fl,.ai-build .rb-palm{
  transform-box:view-box;transform-origin:0 0}

.ai-build .rbAlF1{transform:translate(0px,0px) rotate(182deg)}.ai-build .rbAlF2{transform:translate(0px,-14px) rotate(-2deg)}.ai-build .rbAlN1{transform:translate(0px,0px) rotate(178deg)}.ai-build .rbAlN2{transform:translate(0px,-14px) rotate(2deg)}
.ai-build .rbClF1{transform:translate(0px,0px) rotate(182deg)}.ai-build .rbClF2{transform:translate(0px,-14px) rotate(-2deg)}.ai-build .rbClN1{transform:translate(0px,0px) rotate(178deg)}.ai-build .rbClN2{transform:translate(0px,-14px) rotate(2deg)}
.ai-build .rbDlF1{transform:translate(0px,0px) rotate(182deg)}.ai-build .rbDlF2{transform:translate(0px,-14px) rotate(-2deg)}.ai-build .rbDlN1{transform:translate(0px,0px) rotate(178deg)}.ai-build .rbDlN2{transform:translate(0px,-14px) rotate(2deg)}
.ai-build .rbElF1{transform:translate(0px,0px) rotate(182deg)}.ai-build .rbElF2{transform:translate(0px,-14px) rotate(-2deg)}.ai-build .rbElN1{transform:translate(0px,0px) rotate(178deg)}.ai-build .rbElN2{transform:translate(0px,-14px) rotate(2deg)}

.ai-build .rbAaF1{transform:translate(0px,0px) rotate(135.87deg);animation:rbTypeF1 .34s steps(2,end) infinite}
.ai-build .rbAaF2{transform:translate(0px,-22px) rotate(-60.29deg);animation:rbTypeF2 .34s steps(2,end) infinite}
.ai-build .rbAaN1{transform:translate(0px,0px) rotate(222.58deg);animation:rbTypeN1 .29s steps(2,end) infinite}
.ai-build .rbAaN2{transform:translate(0px,-22px) rotate(-148.21deg);animation:rbTypeN2 .29s steps(2,end) infinite}
.ai-build .rbAB{transform:translate(0,0);animation:rbBob 2.6s ease-in-out infinite}
.ai-build .rbAH{transform:translate(0,-46px) rotate(8deg) translate(0,46px);animation:rbNodA 3.4s ease-in-out infinite}
@keyframes rbTypeF1{0%{transform:translate(0px,0px) rotate(135.87deg)}50%{transform:translate(0px,0px) rotate(131.28deg)}100%{transform:translate(0px,0px) rotate(135.87deg)}}
@keyframes rbTypeF2{0%{transform:translate(0px,-22px) rotate(-60.29deg)}50%{transform:translate(0px,-22px) rotate(-66.08deg)}100%{transform:translate(0px,-22px) rotate(-60.29deg)}}
@keyframes rbTypeN1{0%{transform:translate(0px,0px) rotate(222.58deg)}50%{transform:translate(0px,0px) rotate(209.33deg)}100%{transform:translate(0px,0px) rotate(222.58deg)}}
@keyframes rbTypeN2{0%{transform:translate(0px,-22px) rotate(-148.21deg)}50%{transform:translate(0px,-22px) rotate(-160.08deg)}100%{transform:translate(0px,-22px) rotate(-148.21deg)}}
@keyframes rbBob{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-2.2px)}}
@keyframes rbNodA{0%,100%{transform:translate(0,-46px) rotate(8deg) translate(0,46px)}42%{transform:translate(0,-46px) rotate(13deg) translate(0,46px)}70%{transform:translate(0,-46px) rotate(3deg) translate(0,46px)}}

.ai-build .rb-pos{transform:translate(352px,284.24px);animation:rbPos 5.4s linear infinite}
.ai-build .rb-face-g{transform:scale(1.28,1.28);animation:rbFace 5.4s steps(1) infinite}
.ai-build .rbBB{transform:translate(0,0) rotate(0deg);
  animation:rbCarryBody 5.4s ease-in-out infinite}
.ai-build .rbBaF1{transform:translate(0px,0px) rotate(164.13deg)}
.ai-build .rbBaF2{transform:translate(0px,-22px) rotate(-71.72deg)}
.ai-build .rbBaN1{transform:translate(0px,0px) rotate(174.78deg)}
.ai-build .rbBaN2{transform:translate(0px,-22px) rotate(-84.52deg)}
.ai-build .rbBlF1,.ai-build .rbBlF2,.ai-build .rbBlN1,.ai-build .rbBlN2{
  animation-duration:5.4s;animation-timing-function:ease-in-out;
  animation-iteration-count:infinite}
.ai-build .rbBlF1{transform:translate(0px,0px) rotate(168deg);animation-name:rbGaitF1}
.ai-build .rbBlF2{transform:translate(0px,-14px) rotate(6deg);animation-name:rbGaitF2}
.ai-build .rbBlN1{transform:translate(0px,0px) rotate(194deg);animation-name:rbGaitN1}
.ai-build .rbBlN2{transform:translate(0px,-14px) rotate(26deg);animation-name:rbGaitN2}
.ai-build .rbBH{transform:translate(0,-46px) rotate(0deg) translate(0,46px);animation:rbNodB 2.9s ease-in-out infinite}
.ai-build .rb-crate-o{animation:rbCrate 5.4s steps(1) infinite}
.ai-build .rb-hop-orb{animation:rbHopOrb 5.4s steps(1) infinite}
@keyframes rbPos{0%{transform:translate(352px,284.24px)}34%{transform:translate(480.72px,284.24px)}52%{transform:translate(480.72px,284.24px)}86%{transform:translate(352px,284.24px)}100%{transform:translate(352px,284.24px)}}
@keyframes rbFace{0%{transform:scale(1.28,1.28)}52%{transform:scale(-1.28,1.28)}97%{transform:scale(1.28,1.28)}100%{transform:scale(1.28,1.28)}}
@keyframes rbGaitF1{0%{transform:translate(0px,0px) rotate(168deg)}2.83%{transform:translate(0px,0px) rotate(180deg)}5.67%{transform:translate(0px,0px) rotate(194deg)}8.5%{transform:translate(0px,0px) rotate(176deg)}11.33%{transform:translate(0px,0px) rotate(168deg)}14.17%{transform:translate(0px,0px) rotate(180deg)}17%{transform:translate(0px,0px) rotate(194deg)}19.83%{transform:translate(0px,0px) rotate(176deg)}22.67%{transform:translate(0px,0px) rotate(168deg)}25.5%{transform:translate(0px,0px) rotate(180deg)}28.33%{transform:translate(0px,0px) rotate(194deg)}31.17%{transform:translate(0px,0px) rotate(176deg)}34%{transform:translate(0px,0px) rotate(168deg)}52%{transform:translate(0px,0px) rotate(168deg)}54.83%{transform:translate(0px,0px) rotate(180deg)}57.67%{transform:translate(0px,0px) rotate(194deg)}60.5%{transform:translate(0px,0px) rotate(176deg)}63.33%{transform:translate(0px,0px) rotate(168deg)}66.17%{transform:translate(0px,0px) rotate(180deg)}69%{transform:translate(0px,0px) rotate(194deg)}71.83%{transform:translate(0px,0px) rotate(176deg)}74.67%{transform:translate(0px,0px) rotate(168deg)}77.5%{transform:translate(0px,0px) rotate(180deg)}80.33%{transform:translate(0px,0px) rotate(194deg)}83.17%{transform:translate(0px,0px) rotate(176deg)}86%{transform:translate(0px,0px) rotate(168deg)}100%{transform:translate(0px,0px) rotate(168deg)}}
@keyframes rbGaitF2{0%{transform:translate(0px,-14px) rotate(6deg)}2.83%{transform:translate(0px,-14px) rotate(3deg)}5.67%{transform:translate(0px,-14px) rotate(26deg)}8.5%{transform:translate(0px,-14px) rotate(44deg)}11.33%{transform:translate(0px,-14px) rotate(6deg)}14.17%{transform:translate(0px,-14px) rotate(3deg)}17%{transform:translate(0px,-14px) rotate(26deg)}19.83%{transform:translate(0px,-14px) rotate(44deg)}22.67%{transform:translate(0px,-14px) rotate(6deg)}25.5%{transform:translate(0px,-14px) rotate(3deg)}28.33%{transform:translate(0px,-14px) rotate(26deg)}31.17%{transform:translate(0px,-14px) rotate(44deg)}34%{transform:translate(0px,-14px) rotate(6deg)}52%{transform:translate(0px,-14px) rotate(6deg)}54.83%{transform:translate(0px,-14px) rotate(3deg)}57.67%{transform:translate(0px,-14px) rotate(26deg)}60.5%{transform:translate(0px,-14px) rotate(44deg)}63.33%{transform:translate(0px,-14px) rotate(6deg)}66.17%{transform:translate(0px,-14px) rotate(3deg)}69%{transform:translate(0px,-14px) rotate(26deg)}71.83%{transform:translate(0px,-14px) rotate(44deg)}74.67%{transform:translate(0px,-14px) rotate(6deg)}77.5%{transform:translate(0px,-14px) rotate(3deg)}80.33%{transform:translate(0px,-14px) rotate(26deg)}83.17%{transform:translate(0px,-14px) rotate(44deg)}86%{transform:translate(0px,-14px) rotate(6deg)}100%{transform:translate(0px,-14px) rotate(6deg)}}
@keyframes rbGaitN1{0%{transform:translate(0px,0px) rotate(194deg)}2.83%{transform:translate(0px,0px) rotate(176deg)}5.67%{transform:translate(0px,0px) rotate(168deg)}8.5%{transform:translate(0px,0px) rotate(180deg)}11.33%{transform:translate(0px,0px) rotate(194deg)}14.17%{transform:translate(0px,0px) rotate(176deg)}17%{transform:translate(0px,0px) rotate(168deg)}19.83%{transform:translate(0px,0px) rotate(180deg)}22.67%{transform:translate(0px,0px) rotate(194deg)}25.5%{transform:translate(0px,0px) rotate(176deg)}28.33%{transform:translate(0px,0px) rotate(168deg)}31.17%{transform:translate(0px,0px) rotate(180deg)}34%{transform:translate(0px,0px) rotate(194deg)}52%{transform:translate(0px,0px) rotate(194deg)}54.83%{transform:translate(0px,0px) rotate(176deg)}57.67%{transform:translate(0px,0px) rotate(168deg)}60.5%{transform:translate(0px,0px) rotate(180deg)}63.33%{transform:translate(0px,0px) rotate(194deg)}66.17%{transform:translate(0px,0px) rotate(176deg)}69%{transform:translate(0px,0px) rotate(168deg)}71.83%{transform:translate(0px,0px) rotate(180deg)}74.67%{transform:translate(0px,0px) rotate(194deg)}77.5%{transform:translate(0px,0px) rotate(176deg)}80.33%{transform:translate(0px,0px) rotate(168deg)}83.17%{transform:translate(0px,0px) rotate(180deg)}86%{transform:translate(0px,0px) rotate(194deg)}100%{transform:translate(0px,0px) rotate(194deg)}}
@keyframes rbGaitN2{0%{transform:translate(0px,-14px) rotate(26deg)}2.83%{transform:translate(0px,-14px) rotate(44deg)}5.67%{transform:translate(0px,-14px) rotate(6deg)}8.5%{transform:translate(0px,-14px) rotate(3deg)}11.33%{transform:translate(0px,-14px) rotate(26deg)}14.17%{transform:translate(0px,-14px) rotate(44deg)}17%{transform:translate(0px,-14px) rotate(6deg)}19.83%{transform:translate(0px,-14px) rotate(3deg)}22.67%{transform:translate(0px,-14px) rotate(26deg)}25.5%{transform:translate(0px,-14px) rotate(44deg)}28.33%{transform:translate(0px,-14px) rotate(6deg)}31.17%{transform:translate(0px,-14px) rotate(3deg)}34%{transform:translate(0px,-14px) rotate(26deg)}52%{transform:translate(0px,-14px) rotate(26deg)}54.83%{transform:translate(0px,-14px) rotate(44deg)}57.67%{transform:translate(0px,-14px) rotate(6deg)}60.5%{transform:translate(0px,-14px) rotate(3deg)}63.33%{transform:translate(0px,-14px) rotate(26deg)}66.17%{transform:translate(0px,-14px) rotate(44deg)}69%{transform:translate(0px,-14px) rotate(6deg)}71.83%{transform:translate(0px,-14px) rotate(3deg)}74.67%{transform:translate(0px,-14px) rotate(26deg)}77.5%{transform:translate(0px,-14px) rotate(44deg)}80.33%{transform:translate(0px,-14px) rotate(6deg)}83.17%{transform:translate(0px,-14px) rotate(3deg)}86%{transform:translate(0px,-14px) rotate(26deg)}100%{transform:translate(0px,-14px) rotate(26deg)}}
@keyframes rbCarryBody{
  0%{transform:translate(0,0) rotate(0deg)}
  4.25%{transform:translate(0,-2.4px) rotate(0deg)}
  12.75%{transform:translate(0,-2.4px) rotate(0deg)}
  17%{transform:translate(0,0) rotate(0deg)}
  25.5%{transform:translate(0,-2.4px) rotate(0deg)}
  34%{transform:translate(0,0) rotate(0deg)}
  38%{transform:translate(0,2px) rotate(8deg)}
  42%{transform:translate(0,2px) rotate(8deg)}
  52%{transform:translate(0,0) rotate(0deg)}
  60.5%{transform:translate(0,-2.4px) rotate(0deg)}
  69%{transform:translate(0,0) rotate(0deg)}
  77.5%{transform:translate(0,-2.4px) rotate(0deg)}
  86%{transform:translate(0,0) rotate(0deg)}
  89%{transform:translate(0,2px) rotate(7deg)}
  92%{transform:translate(0,2px) rotate(7deg)}
  100%{transform:translate(0,0) rotate(0deg)}}
@keyframes rbNodB{0%,100%{transform:translate(0,-46px) rotate(0deg) translate(0,46px)}50%{transform:translate(0,-46px) rotate(-5deg) translate(0,46px)}}
@keyframes rbCrate{0%{opacity:1}37%{opacity:0}94%{opacity:1}100%{opacity:1}}
@keyframes rbHopOrb{0%{opacity:0}37%{opacity:1}86%{opacity:0}100%{opacity:0}}

.ai-build .rbCaF1,.ai-build .rbCaF2,.ai-build .rbCaN1,.ai-build .rbCaN2,
.ai-build .rb-orbF,.ai-build .rb-orbN,.ai-build .rb-blk,.ai-build .rb-tick{
  animation-duration:16.0s;animation-iteration-count:infinite}
.ai-build .rbCaF1,.ai-build .rbCaF2,.ai-build .rbCaN1,.ai-build .rbCaN2{
  animation-timing-function:cubic-bezier(.32,.06,.24,1)}
.ai-build .rb-blk,.ai-build .rb-tick{animation-timing-function:cubic-bezier(.22,.72,.24,1)}
.ai-build .rb-orbF,.ai-build .rb-orbN{animation-timing-function:steps(1)}
.ai-build .rbCaF1{transform:translate(0px,0px) rotate(-127.5deg);animation-name:rbCaF1}
.ai-build .rbCaF2{transform:translate(0px,-22px) rotate(-67.76deg);animation-name:rbCaF2}
.ai-build .rbCaN1{transform:translate(0px,0px) rotate(205.1deg);animation-name:rbCaN1}
.ai-build .rbCaN2{transform:translate(0px,-22px) rotate(-118.82deg);animation-name:rbCaN2}
.ai-build .rb-orbF{animation-name:rbOrbF}
.ai-build .rb-orbN{animation-name:rbOrbN}
.ai-build .rbCB{transform:translate(0,0);animation:rbBob 2.2s ease-in-out infinite}
.ai-build .rbCH{transform:translate(0,-46px) rotate(4deg) translate(0,46px);animation:rbNodC 16.0s ease-in-out infinite}
@keyframes rbCaF1{0%{transform:translate(0px,0px) rotate(-127.5deg)}2%{transform:translate(0px,0px) rotate(-127.5deg)}3%{transform:translate(0px,0px) rotate(-127.5deg)}5.4%{transform:translate(0px,0px) rotate(145.64deg)}6.4%{transform:translate(0px,0px) rotate(145.64deg)}13.5%{transform:translate(0px,0px) rotate(227.45deg)}14%{transform:translate(0px,0px) rotate(-127.5deg)}15%{transform:translate(0px,0px) rotate(-127.5deg)}17.4%{transform:translate(0px,0px) rotate(145.64deg)}18.4%{transform:translate(0px,0px) rotate(145.64deg)}25.5%{transform:translate(0px,0px) rotate(227.45deg)}26%{transform:translate(0px,0px) rotate(-127.5deg)}27%{transform:translate(0px,0px) rotate(-127.5deg)}29.4%{transform:translate(0px,0px) rotate(145.64deg)}30.4%{transform:translate(0px,0px) rotate(145.64deg)}37.5%{transform:translate(0px,0px) rotate(227.45deg)}38%{transform:translate(0px,0px) rotate(-127.5deg)}39%{transform:translate(0px,0px) rotate(-127.5deg)}41.4%{transform:translate(0px,0px) rotate(145.64deg)}42.4%{transform:translate(0px,0px) rotate(145.64deg)}49.5%{transform:translate(0px,0px) rotate(227.45deg)}50%{transform:translate(0px,0px) rotate(-127.5deg)}51%{transform:translate(0px,0px) rotate(-127.5deg)}53.4%{transform:translate(0px,0px) rotate(145.64deg)}54.4%{transform:translate(0px,0px) rotate(145.64deg)}61.5%{transform:translate(0px,0px) rotate(227.45deg)}62%{transform:translate(0px,0px) rotate(-127.5deg)}71.5%{transform:translate(0px,0px) rotate(227.45deg)}92%{transform:translate(0px,0px) rotate(-127.5deg)}100%{transform:translate(0px,0px) rotate(-127.5deg)}}
@keyframes rbCaF2{0%{transform:translate(0px,-22px) rotate(-67.76deg)}2%{transform:translate(0px,-22px) rotate(-67.76deg)}3%{transform:translate(0px,-22px) rotate(-67.76deg)}5.4%{transform:translate(0px,-22px) rotate(-72.45deg)}6.4%{transform:translate(0px,-22px) rotate(-72.45deg)}13.5%{transform:translate(0px,-22px) rotate(-126.65deg)}14%{transform:translate(0px,-22px) rotate(-67.76deg)}15%{transform:translate(0px,-22px) rotate(-67.76deg)}17.4%{transform:translate(0px,-22px) rotate(-72.45deg)}18.4%{transform:translate(0px,-22px) rotate(-72.45deg)}25.5%{transform:translate(0px,-22px) rotate(-126.65deg)}26%{transform:translate(0px,-22px) rotate(-67.76deg)}27%{transform:translate(0px,-22px) rotate(-67.76deg)}29.4%{transform:translate(0px,-22px) rotate(-72.45deg)}30.4%{transform:translate(0px,-22px) rotate(-72.45deg)}37.5%{transform:translate(0px,-22px) rotate(-126.65deg)}38%{transform:translate(0px,-22px) rotate(-67.76deg)}39%{transform:translate(0px,-22px) rotate(-67.76deg)}41.4%{transform:translate(0px,-22px) rotate(-72.45deg)}42.4%{transform:translate(0px,-22px) rotate(-72.45deg)}49.5%{transform:translate(0px,-22px) rotate(-126.65deg)}50%{transform:translate(0px,-22px) rotate(-67.76deg)}51%{transform:translate(0px,-22px) rotate(-67.76deg)}53.4%{transform:translate(0px,-22px) rotate(-72.45deg)}54.4%{transform:translate(0px,-22px) rotate(-72.45deg)}61.5%{transform:translate(0px,-22px) rotate(-126.65deg)}62%{transform:translate(0px,-22px) rotate(-67.76deg)}71.5%{transform:translate(0px,-22px) rotate(-126.65deg)}92%{transform:translate(0px,-22px) rotate(-67.76deg)}100%{transform:translate(0px,-22px) rotate(-67.76deg)}}
@keyframes rbCaN1{0%{transform:translate(0px,0px) rotate(205.1deg)}3%{transform:translate(0px,0px) rotate(205.1deg)}5.4%{transform:translate(0px,0px) rotate(-73.55deg)}6.4%{transform:translate(0px,0px) rotate(-73.55deg)}7.6%{transform:translate(0px,0px) rotate(231.08deg)}9%{transform:translate(0px,0px) rotate(131.37deg)}10.2%{transform:translate(0px,0px) rotate(131.37deg)}13.5%{transform:translate(0px,0px) rotate(205.1deg)}15%{transform:translate(0px,0px) rotate(205.1deg)}17.4%{transform:translate(0px,0px) rotate(-73.55deg)}18.4%{transform:translate(0px,0px) rotate(-73.55deg)}19.6%{transform:translate(0px,0px) rotate(231.08deg)}21%{transform:translate(0px,0px) rotate(131.37deg)}22.2%{transform:translate(0px,0px) rotate(131.37deg)}25.5%{transform:translate(0px,0px) rotate(205.1deg)}27%{transform:translate(0px,0px) rotate(205.1deg)}29.4%{transform:translate(0px,0px) rotate(-73.55deg)}30.4%{transform:translate(0px,0px) rotate(-73.55deg)}31.6%{transform:translate(0px,0px) rotate(231.08deg)}33%{transform:translate(0px,0px) rotate(131.37deg)}34.2%{transform:translate(0px,0px) rotate(131.37deg)}37.5%{transform:translate(0px,0px) rotate(205.1deg)}39%{transform:translate(0px,0px) rotate(205.1deg)}41.4%{transform:translate(0px,0px) rotate(-73.55deg)}42.4%{transform:translate(0px,0px) rotate(-73.55deg)}43.6%{transform:translate(0px,0px) rotate(231.08deg)}45%{transform:translate(0px,0px) rotate(131.37deg)}46.2%{transform:translate(0px,0px) rotate(131.37deg)}49.5%{transform:translate(0px,0px) rotate(205.1deg)}51%{transform:translate(0px,0px) rotate(205.1deg)}53.4%{transform:translate(0px,0px) rotate(-73.55deg)}54.4%{transform:translate(0px,0px) rotate(-73.55deg)}55.6%{transform:translate(0px,0px) rotate(231.08deg)}57%{transform:translate(0px,0px) rotate(131.37deg)}58.2%{transform:translate(0px,0px) rotate(131.37deg)}61.5%{transform:translate(0px,0px) rotate(205.1deg)}63.5%{transform:translate(0px,0px) rotate(105.31deg)}69.5%{transform:translate(0px,0px) rotate(173.22deg)}73.5%{transform:translate(0px,0px) rotate(205.1deg)}100%{transform:translate(0px,0px) rotate(205.1deg)}}
@keyframes rbCaN2{0%{transform:translate(0px,-22px) rotate(-118.82deg)}3%{transform:translate(0px,-22px) rotate(-118.82deg)}5.4%{transform:translate(0px,-22px) rotate(-84.93deg)}6.4%{transform:translate(0px,-22px) rotate(-84.93deg)}7.6%{transform:translate(0px,-22px) rotate(-136.27deg)}9%{transform:translate(0px,-22px) rotate(-116.74deg)}10.2%{transform:translate(0px,-22px) rotate(-116.74deg)}13.5%{transform:translate(0px,-22px) rotate(-118.82deg)}15%{transform:translate(0px,-22px) rotate(-118.82deg)}17.4%{transform:translate(0px,-22px) rotate(-84.93deg)}18.4%{transform:translate(0px,-22px) rotate(-84.93deg)}19.6%{transform:translate(0px,-22px) rotate(-136.27deg)}21%{transform:translate(0px,-22px) rotate(-116.74deg)}22.2%{transform:translate(0px,-22px) rotate(-116.74deg)}25.5%{transform:translate(0px,-22px) rotate(-118.82deg)}27%{transform:translate(0px,-22px) rotate(-118.82deg)}29.4%{transform:translate(0px,-22px) rotate(-84.93deg)}30.4%{transform:translate(0px,-22px) rotate(-84.93deg)}31.6%{transform:translate(0px,-22px) rotate(-136.27deg)}33%{transform:translate(0px,-22px) rotate(-116.74deg)}34.2%{transform:translate(0px,-22px) rotate(-116.74deg)}37.5%{transform:translate(0px,-22px) rotate(-118.82deg)}39%{transform:translate(0px,-22px) rotate(-118.82deg)}41.4%{transform:translate(0px,-22px) rotate(-84.93deg)}42.4%{transform:translate(0px,-22px) rotate(-84.93deg)}43.6%{transform:translate(0px,-22px) rotate(-136.27deg)}45%{transform:translate(0px,-22px) rotate(-116.74deg)}46.2%{transform:translate(0px,-22px) rotate(-116.74deg)}49.5%{transform:translate(0px,-22px) rotate(-118.82deg)}51%{transform:translate(0px,-22px) rotate(-118.82deg)}53.4%{transform:translate(0px,-22px) rotate(-84.93deg)}54.4%{transform:translate(0px,-22px) rotate(-84.93deg)}55.6%{transform:translate(0px,-22px) rotate(-136.27deg)}57%{transform:translate(0px,-22px) rotate(-116.74deg)}58.2%{transform:translate(0px,-22px) rotate(-116.74deg)}61.5%{transform:translate(0px,-22px) rotate(-118.82deg)}63.5%{transform:translate(0px,-22px) rotate(-104.33deg)}69.5%{transform:translate(0px,-22px) rotate(-101.72deg)}73.5%{transform:translate(0px,-22px) rotate(-118.82deg)}100%{transform:translate(0px,-22px) rotate(-118.82deg)}}
@keyframes rbOrbF{0%{opacity:0}3%{opacity:1}6.4%{opacity:0}15%{opacity:1}18.4%{opacity:0}27%{opacity:1}30.4%{opacity:0}39%{opacity:1}42.4%{opacity:0}51%{opacity:1}54.4%{opacity:0}100%{opacity:0}}
@keyframes rbOrbN{0%{opacity:0}6.4%{opacity:1}9%{opacity:0}18.4%{opacity:1}21%{opacity:0}30.4%{opacity:1}33%{opacity:0}42.4%{opacity:1}45%{opacity:0}54.4%{opacity:1}57%{opacity:0}100%{opacity:0}}
.ai-build .rb-fly{transform:translate(0,0);animation:rbFly 16.0s
  cubic-bezier(.18,.62,.36,1) infinite}
@keyframes rbFly{0%{transform:translate(0,0);opacity:0}8.99%{transform:translate(14px,-30px);opacity:0}9%{transform:translate(14px,-30px);opacity:1}10.2%{transform:translate(34px,-87.25px);opacity:1}11.4%{transform:translate(26px,-108.5px);opacity:1}12%{transform:translate(26px,-108.5px);opacity:0}12.01%{transform:translate(0,0);opacity:0}20.99%{transform:translate(14px,-30px);opacity:0}21%{transform:translate(14px,-30px);opacity:1}22.2%{transform:translate(34px,-70px);opacity:1}23.4%{transform:translate(26px,-74px);opacity:1}24%{transform:translate(26px,-74px);opacity:0}24.01%{transform:translate(0,0);opacity:0}32.99%{transform:translate(14px,-30px);opacity:0}33%{transform:translate(14px,-30px);opacity:1}34.2%{transform:translate(34px,-50.25px);opacity:1}35.4%{transform:translate(26px,-34.5px);opacity:1}36%{transform:translate(26px,-34.5px);opacity:0}36.01%{transform:translate(0,0);opacity:0}44.99%{transform:translate(14px,-30px);opacity:0}45%{transform:translate(14px,-30px);opacity:1}46.2%{transform:translate(34px,-36.5px);opacity:1}47.4%{transform:translate(26px,-7px);opacity:1}48%{transform:translate(26px,-7px);opacity:0}48.01%{transform:translate(0,0);opacity:0}56.99%{transform:translate(14px,-30px);opacity:0}57%{transform:translate(14px,-30px);opacity:1}58.2%{transform:translate(34px,-23.5px);opacity:1}59.4%{transform:translate(26px,19px);opacity:1}60%{transform:translate(26px,19px);opacity:0}60.01%{transform:translate(0,0);opacity:0}100%{transform:translate(0,0);opacity:0}}
@keyframes rbNodC{0%,100%{transform:translate(0,-46px) rotate(4deg) translate(0,46px)}
  3%{transform:translate(0,-46px) rotate(13deg) translate(0,46px)}
  9%{transform:translate(0,-46px) rotate(-3deg) translate(0,46px)}
  61.5%{transform:translate(0,-46px) rotate(4deg) translate(0,46px)}
  69.5%{transform:translate(0,-46px) rotate(-4deg) translate(0,46px)}}
.ai-build .rb-blk0{animation-name:rbBlk0}
@keyframes rbBlk0{0%{transform:scaleX(0);opacity:0}11.39%{transform:scaleX(0);opacity:0}11.4%{transform:scaleX(0);opacity:1}13.2%{transform:scaleX(1);opacity:1}86%{transform:scaleX(1);opacity:1}90%{transform:scaleX(1);opacity:0}90.01%{transform:scaleX(0);opacity:0}100%{transform:scaleX(0);opacity:0}}
.ai-build .rb-blk1{animation-name:rbBlk1}
@keyframes rbBlk1{0%{transform:scaleX(0);opacity:0}23.39%{transform:scaleX(0);opacity:0}23.4%{transform:scaleX(0);opacity:1}25.2%{transform:scaleX(1);opacity:1}86%{transform:scaleX(1);opacity:1}90%{transform:scaleX(1);opacity:0}90.01%{transform:scaleX(0);opacity:0}100%{transform:scaleX(0);opacity:0}}
.ai-build .rb-blk2{animation-name:rbBlk2}
@keyframes rbBlk2{0%{transform:scaleX(0);opacity:0}35.39%{transform:scaleX(0);opacity:0}35.4%{transform:scaleX(0);opacity:1}37.2%{transform:scaleX(1);opacity:1}86%{transform:scaleX(1);opacity:1}90%{transform:scaleX(1);opacity:0}90.01%{transform:scaleX(0);opacity:0}100%{transform:scaleX(0);opacity:0}}
.ai-build .rb-blk3{animation-name:rbBlk3}
@keyframes rbBlk3{0%{transform:scaleX(0);opacity:0}47.39%{transform:scaleX(0);opacity:0}47.4%{transform:scaleX(0);opacity:1}49.2%{transform:scaleX(1);opacity:1}86%{transform:scaleX(1);opacity:1}90%{transform:scaleX(1);opacity:0}90.01%{transform:scaleX(0);opacity:0}100%{transform:scaleX(0);opacity:0}}
.ai-build .rb-blk4{animation-name:rbBlk4}
@keyframes rbBlk4{0%{transform:scaleX(0);opacity:0}59.39%{transform:scaleX(0);opacity:0}59.4%{transform:scaleX(0);opacity:1}61.2%{transform:scaleX(1);opacity:1}86%{transform:scaleX(1);opacity:1}90%{transform:scaleX(1);opacity:0}90.01%{transform:scaleX(0);opacity:0}100%{transform:scaleX(0);opacity:0}}

.ai-build .rbDaF1{transform:translate(0px,0px) rotate(152.78deg)}
.ai-build .rbDaF2{transform:translate(0px,-22px) rotate(-67.27deg)}
.ai-build .rbDaN1,.ai-build .rbDaN2{animation-duration:16.0s;
  animation-timing-function:cubic-bezier(.4,0,.3,1);animation-iteration-count:infinite}
.ai-build .rbDaN1{transform:translate(0px,0px) rotate(-58.37deg);animation-name:rbDaN1}
.ai-build .rbDaN2{transform:translate(0px,-22px) rotate(-109.31deg);animation-name:rbDaN2}
.ai-build .rbDB{transform:translate(0,0);animation:rbBob 3.1s ease-in-out infinite}
.ai-build .rbDH{transform:translate(0,-46px) rotate(8deg) translate(0,46px);animation:rbNodD 16.0s ease-in-out infinite}
@keyframes rbDaN1{0%{transform:translate(0px,0px) rotate(-58.37deg)}61.4%{transform:translate(0px,0px) rotate(-58.37deg)}64%{transform:translate(0px,0px) rotate(-58.37deg)}64.9%{transform:translate(0px,0px) rotate(-79.65deg)}65%{transform:translate(0px,0px) rotate(-58.37deg)}67.5%{transform:translate(0px,0px) rotate(-79.65deg)}68.4%{transform:translate(0px,0px) rotate(-100.6deg)}68.5%{transform:translate(0px,0px) rotate(-79.65deg)}71%{transform:translate(0px,0px) rotate(-100.6deg)}72%{transform:translate(0px,0px) rotate(-100.6deg)}77%{transform:translate(0px,0px) rotate(-58.37deg)}100%{transform:translate(0px,0px) rotate(-58.37deg)}}
@keyframes rbDaN2{0%{transform:translate(0px,-22px) rotate(-109.31deg)}61.4%{transform:translate(0px,-22px) rotate(-109.31deg)}64%{transform:translate(0px,-22px) rotate(-109.31deg)}64.9%{transform:translate(0px,-22px) rotate(-96.46deg)}65%{transform:translate(0px,-22px) rotate(-109.31deg)}67.5%{transform:translate(0px,-22px) rotate(-96.46deg)}68.4%{transform:translate(0px,-22px) rotate(-75.46deg)}68.5%{transform:translate(0px,-22px) rotate(-96.46deg)}71%{transform:translate(0px,-22px) rotate(-75.46deg)}72%{transform:translate(0px,-22px) rotate(-75.46deg)}77%{transform:translate(0px,-22px) rotate(-109.31deg)}100%{transform:translate(0px,-22px) rotate(-109.31deg)}}
@keyframes rbNodD{0%,100%{transform:translate(0,-46px) rotate(8deg) translate(0,46px)}
  30%{transform:translate(0,-46px) rotate(-8deg) translate(0,46px)}52%{transform:translate(0,-46px) rotate(9deg) translate(0,46px)}
  64%{transform:translate(0,-46px) rotate(10deg) translate(0,46px)}
  76%{transform:translate(0,-46px) rotate(-9deg) translate(0,46px)}}
.ai-build .rb-tick0{animation-name:rbTick0}
@keyframes rbTick0{0%{transform:scale(.4);opacity:0}63.99%{transform:scale(.4);opacity:0}65%{transform:scale(1);opacity:1}86%{transform:scale(1);opacity:1}90%{transform:scale(1);opacity:0}90.01%{transform:scale(.4);opacity:0}100%{transform:scale(.4);opacity:0}}
.ai-build .rb-tick1{animation-name:rbTick1}
@keyframes rbTick1{0%{transform:scale(.4);opacity:0}67.49%{transform:scale(.4);opacity:0}68.5%{transform:scale(1);opacity:1}86%{transform:scale(1);opacity:1}90%{transform:scale(1);opacity:0}90.01%{transform:scale(.4);opacity:0}100%{transform:scale(.4);opacity:0}}
.ai-build .rb-tick2{animation-name:rbTick2}
@keyframes rbTick2{0%{transform:scale(.4);opacity:0}70.99%{transform:scale(.4);opacity:0}72%{transform:scale(1);opacity:1}86%{transform:scale(1);opacity:1}90%{transform:scale(1);opacity:0}90.01%{transform:scale(.4);opacity:0}100%{transform:scale(.4);opacity:0}}

.ai-build .rbEaF1{transform:translate(0px,0px) rotate(-111.76deg)}
.ai-build .rbEaF2{transform:translate(0px,-22px) rotate(-114.43deg)}
.ai-build .rbEaN1,.ai-build .rbEaN2{animation-duration:3.6s;
  animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.ai-build .rbEaN1{transform:translate(0px,0px) rotate(107.3deg);animation-name:rbEaN1}
.ai-build .rbEaN2{transform:translate(0px,-22px) rotate(-49.11deg);animation-name:rbEaN2}
.ai-build .rbEB{transform:translate(0,0);animation:rbBob 2.9s ease-in-out infinite}
.ai-build .rbEH{transform:translate(0,-46px) rotate(-4deg) translate(0,46px);animation:rbNodE 5.2s ease-in-out infinite}
.ai-build .rb-palm{transform:translate(0,0);animation:rbPalm 1.8s ease-in-out infinite}
@keyframes rbEaN1{0%{transform:translate(0px,0px) rotate(107.3deg)}50%{transform:translate(0px,0px) rotate(95.94deg)}100%{transform:translate(0px,0px) rotate(107.3deg)}}
@keyframes rbEaN2{0%{transform:translate(0px,-22px) rotate(-49.11deg)}50%{transform:translate(0px,-22px) rotate(-72deg)}100%{transform:translate(0px,-22px) rotate(-49.11deg)}}
@keyframes rbNodE{0%,100%{transform:translate(0,-46px) rotate(-4deg) translate(0,46px)}48%{transform:translate(0,-46px) rotate(4deg) translate(0,46px)}}
@keyframes rbPalm{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-3.5px)}}

.ai-build .rb-eye{transform-box:fill-box;transform-origin:center center;
  animation:rbBlink 4.6s steps(1) infinite}
.ai-build .rbA .rb-eye{animation-delay:-.4s}
.ai-build .rbB .rb-eye{animation-delay:-2.1s}
.ai-build .rbC .rb-eye{animation-delay:-3.3s}
.ai-build .rbD .rb-eye{animation-delay:-1.2s}
.ai-build .rbE .rb-eye{animation-delay:-2.9s}
.ai-build .rb-bulb{animation:rbPulse 1.5s steps(1) infinite}
.ai-build .rbB .rb-bulb{animation-delay:-.35s}
.ai-build .rbC .rb-bulb{animation-delay:-.8s}
.ai-build .rbD .rb-bulb{animation-delay:-1.1s}
.ai-build .rbE .rb-bulb{animation-delay:-.6s}
.ai-build .rb-bar{animation:rbMeter 1.05s ease-in-out infinite alternate}
.ai-build .rb-bar2{animation-delay:-.3s}
.ai-build .rb-bar3{animation-delay:-.62s}
.ai-build .rbC .rb-bar1{animation-delay:-.18s}
.ai-build .rbD .rb-bar2{animation-delay:-.45s}
.ai-build .rb-code{animation:rbCode 16.0s steps(1) infinite}
.ai-build .rb-code1{animation-delay:-3.52s}
.ai-build .rb-code2{animation-delay:-7.04s}
.ai-build .rb-code3{animation-delay:-10.56s}
.ai-build .rb-fl{transform:translate(0,0);animation:rbFloat 6.4s ease-in-out infinite}
.ai-build .rb-fl1{animation-duration:7.8s;animation-delay:-2.2s}
.ai-build .rb-fl2{animation-duration:5.6s;animation-delay:-3.6s}
.ai-build .rb-fl3{animation-duration:8.6s;animation-delay:-1.1s}
.ai-build .rb-fl4{animation-duration:6.9s;animation-delay:-4.4s}
@keyframes rbBlink{0%,95.5%{transform:scaleY(1)}96%,97.6%{transform:scaleY(.14)}
  98%,100%{transform:scaleY(1)}}
@keyframes rbPulse{0%,54%{opacity:1}55%,100%{opacity:.28}}
@keyframes rbMeter{from{transform:scaleY(.34)}to{transform:scaleY(1)}}
@keyframes rbCode{0%,74%{transform:scaleX(1)}75%,100%{transform:scaleX(.18)}}
@keyframes rbFloat{0%,100%{transform:translate(0,0)}
  50%{transform:translate(5px,-11px)}}

@media(prefers-reduced-motion:reduce){
  /* 到達後の姿で止める。素の CSS が働いている姿勢 + 出来上がった頁なので、
     animation を切るだけで完成した絵のまま静止する。 */
  .ai-build *{animation:none !important}
}

/* ── 制作例 24 件のスマホ画面が流れる帯 ───────────────────── */
.phone-strip{position:relative;overflow:hidden;margin-top:clamp(26px,3.4vw,44px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
/* ★この帯を :hover で止める指定を足さないこと。
   指で触る機械では触れた場所に :hover が残り続けるため、タップしただけで
   流れが止まったまま戻らなくなる。マウスとタップで別々の不具合には見えるが、
   原因は同じ 1 行になる。
   reduced-motion の停止(下の @media)は別物なので残す(こちらは利用者が自分で選んだ設定)。 */
.phone-track{display:flex;width:max-content;animation:phoneSlide 110s linear infinite}
.phone{flex:none;width:clamp(140px,15vw,200px);margin-right:clamp(12px,1.5vw,20px);
  padding:clamp(5px,.55vw,8px);border-radius:clamp(20px,2.2vw,30px);
  background:linear-gradient(158deg,#3b414a,#171b21 38%,#0b0d11);
  box-shadow:0 0 0 1px rgba(255,255,255,.10) inset,0 26px 48px -24px rgba(20,24,30,.72)}
.phone-screen{position:relative;overflow:hidden;background:#fff;border-radius:clamp(15px,1.7vw,23px)}
.phone-screen::after{content:"";position:absolute;z-index:2;top:clamp(4px,.45vw,6px);left:50%;
  transform:translateX(-50%);width:32%;height:clamp(6px,.62vw,9px);border-radius:999px;background:#0b0d11}
.phone img{width:100%;height:auto;aspect-ratio:420/883;object-fit:cover;display:block}
@keyframes phoneSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.strip-note{margin-top:clamp(18px,2.2vw,26px);font-size:12.5px;color:var(--text-3);line-height:1.85}

/* ── 無料ホームページ案 ──────────────────────────────────── */
.freebar{background:var(--orange-soft);border-block:1px solid rgba(242,98,42,.26)}
.freebar .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(12px,2vw,26px);padding-block:clamp(15px,1.9vw,21px);flex-wrap:wrap}
.freebar p{font-size:clamp(14px,1.5vw,17px);font-weight:900;line-height:1.7}
.freebar p em{font-style:normal;color:var(--orange-dark)}
.freebar .btn{flex:none}

.freeplan{margin-top:clamp(24px,3.2vw,40px);background:var(--paper);
  border:2px solid var(--orange);padding:clamp(24px,3.8vw,50px);
  box-shadow:0 34px 74px -44px rgba(20,24,30,.55)}
.freeplan-tag{display:inline-flex;align-items:center;background:var(--orange);color:#fff;
  font-size:clamp(12.5px,1.3vw,14px);font-weight:900;letter-spacing:.04em;
  padding:7px 18px;border-radius:999px;margin-bottom:16px}
.freeplan h3{font-size:clamp(20px,2.7vw,30px);font-weight:900;line-height:1.3;margin-bottom:14px}
.freeplan h3 em{font-style:normal;color:var(--orange)}
.freeplan-lead{font-size:clamp(14px,1.45vw,16px);color:var(--text-2);line-height:1.95;max-width:62ch}
.free-points{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px);
  margin-top:clamp(22px,2.8vw,34px)}
.free-points > li{background:var(--paper-2);padding:clamp(16px,2vw,24px)}
.free-points b{display:block;font-size:clamp(14.5px,1.5vw,16.5px);font-weight:900;
  line-height:1.5;margin-bottom:9px}
.free-points p{font-size:13px;color:var(--text-2);line-height:1.9}
.freeplan-cta{margin-top:clamp(22px,2.8vw,34px)}
.freeplan-fine{margin-top:12px;font-size:12px;color:var(--text-3);line-height:1.85}

@media(max-width:900px){
  .reason-head{grid-template-columns:1fr}
  .ai-orbit{min-height:262px;order:-1}
  .free-points{grid-template-columns:1fr}
  .freebar .wrap{flex-direction:column;align-items:flex-start}
  .freebar .btn{width:100%}
}
@media(max-width:640px){
  .scroll-wrap{display:none}
}
@media(prefers-reduced-motion:reduce){
  .has-rv .rv{transform:none !important;transition:none !important}
  .scroll-ind .ln::after,.ai-orbit__core,.ai-orbit__spin{animation:none !important}
  .phone-track{animation:none !important}
  .phone-strip{overflow-x:auto}
}

.freebar p,.freeplan-lead,.free-points b,.free-points p,.strip-note,.freeplan-fine{word-break:auto-phrase}


/* ══ AI チャットボット節 ═══════════════════════════════════════════
   絵は 1 枚も使わない。チャット画面は CSS だけで組む(画像生成を回さずに済み、API 代も 0 円)。
   ★行間は家の値 1.3、隣り合う文字ブロックの隙間は 8px 以上(検査の下限 6px の境界に置かない)。
   ══════════════════════════════════════════════════════════════════ */
.mark-ja{font-size:clamp(15px,1.9vw,21px);font-weight:900;line-height:1.6;
  color:var(--text-2);letter-spacing:.04em;margin-bottom:10px}
.bot-duo{display:grid;grid-template-columns:minmax(0,0.86fr) minmax(0,1fr);
  gap:clamp(24px,3.6vw,56px);align-items:start;margin-top:clamp(26px,3.4vw,44px)}

.bot-demo{background:var(--head-ink);border-radius:18px;overflow:hidden;
  box-shadow:0 34px 70px -38px rgba(20,24,30,.85);position:sticky;top:96px}
.bot-bar{display:flex;align-items:center;gap:10px;padding:14px 18px;
  background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.10)}
.bot-bar b{font-size:13px;font-weight:900;color:#fff;letter-spacing:.02em}
.bot-dot{width:9px;height:9px;border-radius:50%;background:#4ADE80;flex:none;
  box-shadow:0 0 0 4px rgba(74,222,128,.18)}
.bot-log{padding:clamp(16px,2vw,22px);display:grid;gap:10px}
.bot-msg{max-width:86%;padding:11px 15px;border-radius:16px;font-size:13.5px;line-height:1.85;
  word-break:auto-phrase}
.bot-msg.is-them{justify-self:start;background:rgba(255,255,255,.10);color:#fff;border-bottom-left-radius:5px}
.bot-msg.is-you{justify-self:end;background:var(--orange);color:#fff;border-bottom-right-radius:5px}
.bot-input{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 clamp(16px,2vw,22px) clamp(16px,2vw,22px);padding:12px 16px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.bot-input span{font-size:12.5px;color:rgba(255,255,255,.45)}
.bot-input i{width:28px;height:28px;border-radius:50%;background:var(--orange);flex:none;
  position:relative}
.bot-input i::after{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;
  border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent;
  transform:translateX(1px)}

.bot-copy h3{font-size:clamp(19px,2.5vw,27px);font-weight:900;line-height:1.3;margin-bottom:12px}
.bot-copy > p{font-size:clamp(14px,1.45vw,16px);color:var(--text-2);line-height:1.95;
  word-break:auto-phrase}
.bot-points{display:grid;gap:12px;margin-top:clamp(20px,2.6vw,30px)}
.bot-points > li{background:var(--paper-2);padding:clamp(16px,2vw,22px)}
.bot-points b{display:block;font-size:clamp(14.5px,1.5vw,16.5px);font-weight:900;
  line-height:1.5;margin-bottom:9px}
.bot-points p{font-size:13px;color:var(--text-2);line-height:1.9;word-break:auto-phrase}

.bot-types-head{font-size:clamp(15px,1.7vw,18px);font-weight:900;line-height:1.4;
  margin-top:clamp(22px,2.8vw,32px);margin-bottom:12px}
.bot-types{display:grid;gap:10px}
.bot-type{background:var(--paper-2);padding:clamp(14px,1.8vw,20px);border:2px solid transparent}
.bot-type.is-ours{background:var(--orange-soft);border-color:var(--orange)}
.bot-type b{display:block;font-size:clamp(14px,1.5vw,16px);font-weight:900;line-height:1.5;margin-bottom:8px}
.bot-type b i{display:inline-block;margin-left:10px;padding:3px 10px;border-radius:3px;
  background:var(--orange);color:#fff;font-style:normal;font-size:12px;font-weight:900;vertical-align:2px}
.bot-type p{font-size:13px;color:var(--text-2);line-height:1.9;margin-bottom:9px;word-break:auto-phrase}
.bot-type-price{display:block;font-size:12.5px;font-weight:700;color:var(--text-3);line-height:1.8}
.bot-type-price s{color:var(--text-3)}
.bot-type-price strong{font-size:clamp(14px,1.6vw,17px);font-weight:900;color:var(--orange-dark);display:inline-block;white-space:nowrap}

/* どのプランの価格かを同じ行で示す。文字は 12px 以上にすること
   (これより小さいと文字サイズの下限に触れる)。 */
.bot-type-price strong small{font-size:12px;font-weight:800;color:var(--text-3);margin-left:2px;white-space:nowrap}

/* 数値と単位が行をまたいで割れるのを止める。 */
.nw{white-space:nowrap}
.bot-types-note{margin-top:12px;font-size:12px;color:var(--text-3);line-height:1.85}
.bot-price{margin-top:clamp(20px,2.6vw,30px);border:2px solid var(--orange);
  padding:clamp(18px,2.4vw,26px)}
.bot-price-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px}
.bot-price-row + .bot-price-row{margin-top:10px}
.bot-price-row span{font-size:13px;font-weight:900;color:var(--text-2)}
.bot-price-row b{font-size:clamp(28px,3.4vw,40px);font-weight:900;line-height:1;letter-spacing:-.02em}
.bot-price-row i{font-style:normal;font-size:15px;font-weight:900}
.bot-price-row em{font-style:normal;font-size:12px;font-weight:700;color:var(--text-3)}
.bot-compare{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  font-size:13px;color:var(--text-2);line-height:1.9;word-break:auto-phrase}
.bot-compare b{font-weight:900;color:var(--text)}
.bot-price .fine{margin-top:12px;font-size:12px;color:var(--text-3);line-height:1.85}

/* 24 時間稼働の注記。直上の .bot-compare(13px / --text-2 / 1.9)と
   同じ大きさ・濃さに揃える。 */
.bot-price .fine.bot-always{font-size:13px;color:var(--text-2);line-height:1.9}

/* AI チャットボットの 3 プラン */
.bot-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,16px);
  margin-top:clamp(16px,2vw,22px);align-items:start}

.bot-plan{background:#fff;border:1px solid var(--line);overflow:hidden;text-align:center}

.bot-plan.is-best{border:2px solid var(--orange);box-shadow:0 24px 48px -30px rgba(242,98,42,.7)}

.bot-plan-head{background:var(--paper-2);padding:10px 8px;font-size:13px;font-weight:900;
  color:var(--text-2);line-height:1.3}

.bot-plan.is-best .bot-plan-head{background:var(--orange);color:#fff}
/* フルは料金プランの『自分で更新までしたい』と同じゴールドで見せる
   (色の作りは .plan.is-premium と同一。片方だけ直すと 2 つの表で金の色が食い違う)。
   ★枠は 1px のまま色だけ金にする。2px はスタンダードだけの印で、
     こちらを太くすると主役が 2 つになる。料金プランの表と同じ関係。 */
.bot-plan.is-premium{border-color:var(--gold-deep);
  box-shadow:0 24px 48px -30px rgba(212,175,55,.62)}
.bot-plan.is-premium .bot-plan-head{
  background:linear-gradient(100deg,#B8912F 0%,#E8CE72 26%,#F7EBB8 44%,#D9B441 64%,#BB942F 100%);
  color:var(--gold-ink);letter-spacing:.04em;text-shadow:0 1px 0 rgba(255,255,255,.35)}

.bot-plan-name{margin-top:14px;font-size:15px;font-weight:900;color:var(--text)}

.bot-plan-price{display:flex;align-items:baseline;justify-content:center;gap:0 6px;margin-top:6px;padding:0 8px;white-space:nowrap}

.bot-plan-price span{font-size:12px;font-weight:900;color:var(--text-3);white-space:nowrap}

.bot-plan-price b{font-size:clamp(22px,2.6vw,30px);font-weight:900;line-height:1;letter-spacing:-.02em;color:var(--text)}

.bot-plan-price i{font-style:normal;font-size:14px;font-weight:900;color:var(--text)}

.bot-plan-q{margin-top:9px;padding:0 10px 16px;font-size:14px;font-weight:700;color:var(--text-2);line-height:1.65}

.bot-plan-q b{font-size:15px;font-weight:900;color:var(--text)}

.bot-plan-q small{display:block;margin-top:4px;font-size:12px;font-weight:700;color:var(--text-3)}

@media (max-width:600px){
  .bot-plans{grid-template-columns:1fr}
}

/* 901〜1220px は .bot-duo が 2 カラムになり、この 3 枚が半分の幅に押し込まれる。
   1 列あたり 150px を割るとどれかの項目が必ず 2 行に折れるので、この帯だけ縦積みにする。
   ★上限を 1220px にしてあるのは、150px を超えるのが約 1206px からで、
     境界にちょうど同じ値を置かないため。 */
@media (min-width:901px) and (max-width:1220px){
  .bot-plans{grid-template-columns:1fr}
}
.bot-cta{margin-top:clamp(20px,2.6vw,28px)}
.bot-cta .fine{margin-top:12px;font-size:12px;color:var(--text-3);line-height:1.85}

@media(max-width:900px){
  .bot-duo{grid-template-columns:1fr}
  .bot-demo{position:static;max-width:460px;margin-inline:auto}
  .bot-cta .btn{width:100%;justify-content:center}
}
@media(max-width:430px){
  .bot-copy h3{line-height:1.3}
  /* 長いラベルが「受け取／る」と割れるのを防ぐ。文言は縮めない。 */
  .bot-cta .btn,.freeplan-cta .btn{padding:0 14px;gap:8px;font-size:14px}
  .bot-cta .btn .arw,.freeplan-cta .btn .arw{width:18px}
}