:root{--maxw:1200px;--stage-w:clamp(320px,100vw,900px);--title-x:1%;--title-y:22%;--title-w:50%;--horse-x:-5%;--horse-y:55%;--horse-w:60%;--phone-x:76%;--phone-y:15%;--phone-w:46%;--screen-left:6.6%;--screen-top:12%;--screen-w:87%;--screen-h:62%;--race-top:15%;--race-w:94%;--btn-bottom:3%;--btn-w:82%;--btn-max:360px}
@media (max-width:640px) {
:root{--title-x:2.5%;--title-y:23%;--title-w:47%;--horse-x:-5%;--horse-y:55%;--horse-w:60%;--phone-x:76%;--phone-y:18%;--phone-w:46%;--screen-left:7%;--screen-top:13.5%;--screen-w:86%;--screen-h:62%;--race-top:10%;--race-w:90%;--btn-bottom:6%;--btn-w:78%}
}
*{box-sizing:border-box}
html,body{margin:0;font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Meiryo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-weight:500;color:#222;line-height:1.7}
img{display:block;max-width:100%;height:auto}
button{font:inherit;cursor:pointer}
h1,h2,h3{font-family:"Noto Sans JP",system-ui,sans-serif;font-weight:800;line-height:1.25}
@supports (font-variation-settings: wght 800){h1h2h3font-variation-settings:wght 820;font-optical-sizing:auto}
}
@media (max-width:680px) {
h1,h2,h3{font-weight:800}
}
.hero{position:relative;color:#fff;background:#3bb191;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__bg::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(100%,var(--maxw));height:100%;background:url(../image/hero_bg.jpg) center/cover no-repeat}
.hero__header{position:absolute;z-index:2;left:50%;transform:translateX(-50%);top:16px;width:100%;max-width:var(--maxw);padding:0 24px;display:flex;justify-content:space-between;align-items:center}
.brand__img{height:40px;width:auto}
.menu-btn{background:#fff;color:#1b7f66;border:none;border-radius:999px;padding:8px 16px;box-shadow:0 6px 14px rgba(0,0,0,.12)}
@media (max-width:640px) {
.brand__img{height:32px}
}
.menu{position:fixed;inset:0;display:grid;grid-template-rows:1fr;pointer-events:none;z-index:999}
.menu__panel{transform:translateY(-100%);transition:transform .28s ease;background:#eaf6c9;height:100dvh;overflow:auto;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.menu__backdrop{opacity:0;transition:opacity .28s ease;background:rgba(0,0,0,.45)}
.menu__head{background:#0e9b8f;color:#fff;padding:16px 18px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:1}
.menu__logo{height:36px;width:auto;display:block}
.menu__close{margin-left:auto;cursor:pointer;border:0;background:#1c6e66;color:#fff;padding:8px 14px;border-radius:999px;font-weight:700}
.menu__list{list-style:none;margin:0;padding:12px 0 32px}
.menu__list > li{border-bottom:1px solid #1b2a27}
.menu__list a{display:block;padding:18px;text-decoration:none;color:#0d1312;font-weight:700;letter-spacing:.02em}
.menu.is-open{pointer-events:auto}
.menu.is-open .menu__panel{transform:translateY(0)}
.menu.is-open .menu__backdrop{opacity:1}
body.no-scroll{overflow:hidden;touch-action:none}
.menu__panel{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.menu__backdrop{backdrop-filter:blur(2px)}
.menu__list a:focus-visible,.menu__close:focus-visible{outline:2px solid #0e9b8f;outline-offset:3px;border-radius:6px}
.menu__list a{min-height:44px;line-height:1.2}

.page-header{position:fixed;top:0;left:0;width:100%;background:#0f8c6a;color:#fff;z-index:1000;box-shadow:0 4px 16px rgba(0,0,0,.15)}
.page-header__inner{max-width:var(--maxw);margin:0 auto;padding:12px 20px;display:flex;justify-content:space-between;align-items:center}
.page-header img{height:40px;width:auto}
@media (max-width:640px) {
.page-header img{height:32px}
}
.hero__stage{width:var(--stage-w);aspect-ratio:900 / 755;margin:0 auto;position:relative;z-index:1}
@media (min-width:1200px) {
.hero{height:755px}
.hero__stage{width:900px;height:755px}
}
.stage__title,.stage__horse,.stage__phone{position:absolute}
.stage__title{left:var(--title-x);top:var(--title-y);width:var(--title-w);z-index:4;transform-origin:center}
.stage__title.jitter{--jit-amp:2.5px;--jit-rot:1.2deg;transform-origin:50% 50%}
.reveal.in.jitter{animation:vcardIn .6s both,jitter-burst 2s .8s infinite;will-change:transform}
@keyframes jitter-burst {
0%,84%,100%{transform:translate3d(0,0,0) rotate(0)}
86%{transform:translate(calc(var(--jit-amp) * -0.9),calc(var(--jit-amp) * 0.9)) rotate(calc(var(--jit-rot) * -1))}
88%{transform:translate(calc(var(--jit-amp) * 1.0),calc(var(--jit-amp) * -0.7)) rotate(calc(var(--jit-rot) * 0.8))}
90%{transform:translate(calc(var(--jit-amp) * -1.1),calc(var(--jit-amp) * 0.8)) rotate(calc(var(--jit-rot) * -0.9))}
92%{transform:translate(calc(var(--jit-amp) * 0.9),calc(var(--jit-amp) * -0.9)) rotate(calc(var(--jit-rot) * 0.8))}
94%{transform:translate(calc(var(--jit-amp) * -0.9),calc(var(--jit-amp) * 0.9)) rotate(calc(var(--jit-rot) * -0.8))}
96%{transform:translate(calc(var(--jit-amp) * 0.8),calc(var(--jit-amp) * -0.8)) rotate(calc(var(--jit-rot) * 0.6))}
}
@media (prefers-reduced-motion: reduce) {
.stage__title.jitter{animation:none}
}
.stage__horse{position:absolute;left:var(--horse-x);top:var(--horse-y);width:var(--horse-w);z-index:3;transform:translate3d(0,0,0);backface-visibility:hidden;will-change:transform}
.stage__horse.run{
  --ampY: 12px;    
  --cycle: 1.18s;  
  transform-origin: 50% 85%;
  animation: horse-bounce-smooth var(--cycle) cubic-bezier(.25,.6,.25,1) infinite;
}
@keyframes horse-bounce-smooth{
  0%   { transform: translate3d(0, 0, 0); }
  12%  { transform: translate3d(0, calc(var(--ampY) * -0.55), 0); }
  24%  { transform: translate3d(0, calc(var(--ampY) * -0.95), 0); }
  30%  { transform: translate3d(0, calc(var(--ampY) * -1.00), 0); }
  42%  { transform: translate3d(0, calc(var(--ampY) * -0.55), 0); }
  50%  { transform: translate3d(0, 0, 0); }
  62%  { transform: translate3d(0, calc(var(--ampY) * -0.20), 0); }
  74%  { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce){
  .stage__horse.run{ animation: none; }
}
.stage__phone{left:var(--phone-x);top:var(--phone-y);width:var(--phone-w);transform:translateX(-50%);z-index:2}
.phone__bg{width:100%;height:auto}
.phone__screen-rect{position:absolute;left:var(--screen-left);top:var(--screen-top);width:var(--screen-w);height:var(--screen-h)}
.race-card{position:absolute;left:50%;transform:translateX(-50%);top:var(--race-top);width:var(--race-w)}
.race-card__inner{background:#eaf8f4;border:2px solid #cdeae1;border-radius:8px;padding:12px 14px;text-align:center;color:#0a4e43;font-weight:800;line-height:1.35;box-shadow:0 6px 12px rgba(0,0,0,.08)}
@media (max-width:640px) {
.race-card__inner{padding:2% 3%}
}
.race-card__date{font-size:16px;letter-spacing:.04em;line-height:1.5}
.race-card__track{font-size:22px;font-weight:800;line-height:1.5}
.race-card__name{font-size:18px;line-height:1.5}
@media (max-width: 640px) {
.race-card__date{font-size:clamp(12px,2.8vw,16px)}
.race-card__track{font-size:clamp(16px,4.2vw,22px)}
.race-card__name{font-size:clamp(8px,2.5vw,12px)}
}
.btn-wrap{position:absolute;left:0;right:0;bottom:var(--btn-bottom);display:flex;justify-content:center;z-index:5}
.btn-wrap .btn-link{display:inline-block;width:min(var(--btn-w),var(--btn-max));line-height:0;text-decoration:none}
.btn-wrap .phone__btn{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.25))}
@keyframes floatY {
0%{transform:translateY(0)}
50%{transform:translateY(-8px)}
100%{transform:translateY(0)}
}
.float-y{animation:floatY 3.2s ease-in-out infinite}
.reveal{opacity:0;transition:opacity .5s ease}
.reveal.in{opacity:1}
:root{--bounce-amplitude:14px;--bounce-duration:1.7s;--bounce-squash:.06}
.bounce-y{animation:bounceY var(--bounce-duration) cubic-bezier(.22,1,.36,1) infinite;transform-origin:center bottom;will-change:transform}
@keyframes bounceY {
0%{transform:translateY(0) scaleY(1)}
15%{transform:translateY(calc(-1 * var(--bounce-amplitude))) scaleY(1.02)}
28%{transform:translateY(0) scaleY(calc(1 - var(--bounce-squash)))}
40%{transform:translateY(calc(-1 * var(--bounce-amplitude) * .55)) scaleY(1.015)}
52%{transform:translateY(0) scaleY(calc(1 - var(--bounce-squash) * .7))}
62%{transform:translateY(calc(-1 * var(--bounce-amplitude) * .32)) scaleY(1.01)}
72%{transform:translateY(0) scaleY(calc(1 - var(--bounce-squash) * .5))}
100%{transform:translateY(0) scaleY(1)}
}
:root{--iso-amp:14px;--iso-dur:1.25s;--iso-squash:1;--iso-stretch:1}
.bounce-iso{animation:bounceIso var(--iso-dur) cubic-bezier(.45,0,.55,1) infinite both;animation-direction:alternate;transform-origin:center bottom;will-change:transform}
@keyframes bounceIso {
0%{transform:translateY(0) scaleY(var(--iso-squash))}
50%{transform:translateY(calc(-1 * var(--iso-amp))) scaleY(var(--iso-stretch))}
100%{transform:translateY(0) scaleY(var(--iso-squash))}
}
@media (prefers-reduced-motion: reduce) {
.bounce-iso{animation:none}
}
@media (prefers-reduced-motion: reduce) {
.bounce-y{animation:none}
}
@media (max-width: 420px) {
.hero__header{top:10px;padding:0 12px}
.brand__img{height:24px}
.menu-btn{padding:4px 10px;font-size:12px;border-radius:999px}
}
@media (max-width: 360px) {
.brand__img{height:20px}
.menu-btn{padding:3px 8px;font-size:11px}
}

/* ==== TICKER：外部・フル幅（縦積み版） ==== */
:root{--ticker-speed:24s}
.ticker{width:100%;background:#fdc608;color:#fff;overflow:hidden}
.ticker__wrap{overflow:hidden}
.ticker__track{display:flex;width:max-content;animation:marquee var(--ticker-speed) linear infinite;will-change:transform}
.ticker__lane{display:flex;align-items:center;gap:40px;padding:14px 28px;white-space:nowrap}
.ticker__badge{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:#fff;color:#ff6a00;font-weight:900;line-height:1.05;font-size:22px}
.ticker__stack{display:inline-flex;flex-direction:column;line-height:1.1}
.ticker__label{font-weight:800;font-size:22px;letter-spacing:.02em}
.ticker__race{font-weight:900;font-size:44px;letter-spacing:.06em}
@media (max-width: 900px) {
.ticker__lane{gap:32px;padding:12px 22px}
.ticker__badge{width:68px;height:68px;font-size:20px}
.ticker__label{font-size:20px}
.ticker__race{font-size:38px}
}
@media (max-width: 640px) {
.ticker__lane{gap:24px;padding:10px 18px}
.ticker__badge{width:58px;height:58px;font-size:18px}
.ticker__label{font-size:18px}
.ticker__race{font-size:30px;letter-spacing:.04em}
}
@keyframes marquee {
0%{transform:translateX(0)}
100%{transform:translateX(-50%)}
}
@media (max-width: 420px) {
.ticker__lane{gap:16px;padding:6px 10px}
.ticker__badge{width:48px;height:48px;font-size:14px}
.ticker__stack{line-height:1.05}
.ticker__label{font-size:14px;letter-spacing:.01em}
.ticker__race{font-size:22px;letter-spacing:.03em}
}
:root{--cta-bg:#e9f7ec;--cta-maxw:1200px;--tile-w:clamp(320px,50vw,1200px);--tile-ratio:116/1200;--horses-h:calc(var(--tile-w) * var(--tile-ratio))}
.signup-cta{position:relative;background:var(--cta-bg);padding:48px 16px calc(32px + var(--horses-h));overflow:hidden}
.signup-cta__inner{max-width:var(--cta-maxw);margin:0 auto;text-align:center;position:relative;z-index:1}
.signup-cta__title{margin:0 0 5%;font-weight:900;color:#2a3a35;line-height:1.35;font-size:clamp(30px,4.2vw,44px)}
.signup-cta__title span{font-size:.9em}
.signup-cta__line{display:inline-block}
.signup-cta__line img{display:block;height:auto;width:min(92vw,480px)}
.signup-cta__horses{position:absolute;left:0;right:0;bottom:0;height:var(--horses-h);background-image:url(../image/horses_tile.png);background-repeat:repeat-x;background-position:left bottom;background-size:var(--tile-w) 100%;filter:drop-shadow(0 2px 0 rgba(0,0,0,.05))}
@media (min-width:1200px) {
:root{--tile-w:1200px}
}
@media (max-width:640px) {
:root{--tile-w:clamp(260px,55vw,1200px)}
}
@media (max-width:420px) {
:root{--tile-w:clamp(220px,60vw,1200px)}
}
@keyframes lineFloat {
0%{transform:translateY(0)}
50%{transform:translateY(-6px)}
100%{transform:translateY(0)}
}
.signup-cta__line img{animation:lineFloat 1.2s ease-in-out infinite;filter:drop-shadow(0 8px 16px rgba(0,0,0,.18));will-change:transform}
.signup-cta__line:hover img{transform:translateY(-2px)}
@media (prefers-reduced-motion: reduce) {
.signup-cta__line img{animation:none;transform:none}
}
@media (max-width: 420px) {
.signup-cta{padding:20px 12px calc(20px + var(--horses-h))}
.signup-cta__title{line-height:1.4;margin:0 0 14px}
.signup-cta__title span{font-size:.85em}
.signup-cta__line img{width:min(86vw,340px)}
:root{--tile-w:clamp(220px,62vw,1200px)}
}
:root{--gap:20px;--cards-per-view:3;--card-w:clamp(260px,22vw,340px)}
.results{background-image:url(../image/result_bg.jpg);background-repeat:repeat;background-position:0 0;background-size:auto;padding-top:clamp(36px,5vw,64px);padding-bottom:clamp(48px,5vw,64px)}
.results__inner{width:100%;padding:0 3vw;margin:0}
.results__title{margin:0 0 8px;font-weight:900;font-size:clamp(30px,4.2vw,44px);text-align:center;color:#2a2a2a}
.results__note{margin:0 0 20px;text-align:center;color:#8a8a8a;font-size:clamp(12px,1.8vw,20px)}
#resultsViewport{overflow:hidden;padding:0;touch-action:pan-y;overscroll-behavior-x:contain;cursor:grab}
#resultsViewport.dragging{cursor:grabbing}
#resultsTrack{display:flex;gap:var(--gap);will-change:transform;backface-visibility:hidden;transform:translateZ(0);transition:transform .32s ease}
.result-card{flex:0 0 var(--card-w);background:#fff;border-radius:14px;box-shadow:0 8px 22px rgba(0,0,0,.12);overflow:hidden;display:flex;flex-direction:column;border:2px solid #1b3e34;contain:content}
.result-card__banner{width:100%;display:block;aspect-ratio:300/180;object-fit:cover;background:#083c2f}
.result-card__plan{background:#121212;color:#fff;text-align:center;padding:12px 10px;font-weight:900;font-size:clamp(14px,1.8vw,22px);letter-spacing:.04em}
.result-card__pricewrap{position:relative;background:#fff}
.result-card__price{text-align:center;font-weight:900;color:#ff5a2a;font-size:clamp(28px,4.2vw,40px);text-shadow:0 4px 10px rgba(0,0,0,.18);padding:14px 10px 8px}
.result-card__horses{height:44px;background-image:url(../image/horses_tile_s.png);background-repeat:repeat-x;background-position:left center;background-size:auto 100%}
.result-card__detail{padding:12px 14px 16px;color:#1f1f1f;font-size:clamp(14px,1.6vw,16px);line-height:1.6;border-top:1px solid rgba(0,0,0,.06);background:#f3fcf2}
.results__nav{display:flex;gap:12px;justify-content:center;margin-top:16px}
.results__btn{width:44px;height:44px;border-radius:50%;border:none;background:#1b3e34;color:#fff;font-size:22px;box-shadow:0 8px 16px rgba(0,0,0,.18);cursor:pointer}
.results__btn:disabled{opacity:.4;cursor:not-allowed}
.result-card img{user-select:none;pointer-events:none}
.benefits{background:#e9f7ec;padding:clamp(28px,5vw,64px) 16px}
.benefits__inner{max-width:900px;margin:0 auto}
.benefits__title{margin:0 0 clamp(16px,3vw,28px);text-align:center;color:#2a3a35;font-weight:900;line-height:1.25;font-size:clamp(30px,4.2vw,44px)}
.sp-br{display:none}
@media (max-width:640px) {
.sp-br{display:inline}
}
.benefits__cards{display:grid;grid-template-columns:repeat(2,minmax(0,436px));justify-content:center;gap:clamp(12px,3vw,28px);margin-bottom:clamp(14px,3vw,24px)}
@media (max-width:640px) {
.benefits__cards{grid-template-columns:1fr}
}
.benefit{width:100%;max-width:436px;margin:0 auto}
.benefit img{display:block;width:100%;height:auto;image-rendering:auto}
.benefits__arrow{display:block;width:min(42vw,360px);margin:10px auto 16px;height:auto}
.benefits__cta{display:block;width:min(92vw,560px);margin:8px auto 0}
.benefits__cta img{width:100%;height:auto;display:block}
.spin-in{opacity:0;transform:scale(.92) rotate(-200deg);will-change:transform,opacity}
.spin-in.in{animation:benefitSpin .8s cubic-bezier(.22,.8,.24,1) both;animation-delay:var(--delay,0ms)}
@keyframes benefitSpin {
0%{opacity:0;transform:scale(.92) rotate(-200deg)}
60%{opacity:1;transform:scale(1.02) rotate(10deg)}
100%{opacity:1;transform:scale(1) rotate(0deg)}
}
@media (prefers-reduced-motion: reduce) {
.spin-in{opacity:1;transform:none;animation:none}
}
.benefits{--tile-h:116px;background-image:url(../image/horses_tile.png),url(../image/step_bg.png);background-repeat:repeat-x,repeat;background-position:left bottom,0 0;background-size:auto var(--tile-h),auto;padding:clamp(28px,5vw,64px) 16px calc(clamp(28px,5vw,64px) + var(--tile-h))}
.benefits__inner{position:relative;z-index:1}
@media (max-width: 640px) {
.benefits{--tile-h:44px}
}
.concept{position:relative;isolation:isolate;background-color:#3cb294;padding:clamp(36px,4vw,52px) 16px clamp(60px,7vw,96px);overflow:hidden}
.concept__bg{position:absolute;inset:0;background:url(../image/concept_bg.jpg) center top / cover no-repeat;background-attachment:fixed;z-index:0;pointer-events:none}
@media (max-width:640px) {
.concept__bg{background:url(../image/concept_bg_s.jpg) center top / cover no-repeat;background-attachment:fixed}
}
.concept__inner{position:relative;z-index:2;max-width:900px;margin:0 auto}
.concept__lead{font-weight:700;font-size:clamp(22px,4.4vw,32px);color:#fefef0;text-shadow:0 2px 8px rgba(0,0,0,.9);margin-bottom:6px}
.concept__lead span{color:#fffe9b}
.concept__title{font-weight:900;font-size:clamp(25px,4.8vw,40px);color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.9);margin:0 0 10px}
.concept__sub{color:#fff;font-size:clamp(16px,1.5vw,22px);line-height:1.6;text-shadow:0 1px 14px rgba(0,0,0,.9);margin-bottom:clamp(26px,4vw,38px)}
.sp-br{display:none}
@media (max-width:660px) {
.sp-br{display:inline}
}
.concept-card{background:#fff;border-radius:16px;padding:18px 20px 16px;text-align:left;box-shadow:0 12px 16px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.4);display:grid;grid-template-columns:1fr minmax(240px,240px);gap:16px 22px;align-items:center;margin-bottom:3%}
.concept-card__img{width:100%;aspect-ratio:4 / 3;object-fit:cover;border-radius:0;display:block;box-shadow:0 6px 14px rgba(0,0,0,.08)}
.concept-card__text{min-width:0}
@media (max-width:640px) {
.concept-card{grid-template-columns:1fr}
.concept-card__img{order:2;margin-top:8px}
}
.concept-card__head{display:flex;align-items:center;gap:8px;font-weight:700;color:#296f60;font-size:clamp(18px,1.7vw,22px);line-height:1.25;margin:0 0 8px}
.concept-card__dot{display:block;width:25px;height:25px;flex:0 0 25px;border-radius:50%;background:#ffd200}
.concept-card__body{margin:0;color:#494949;line-height:1.7;font-size:clamp(14px,1.45vw,15.5px)}
@media (min-width:1080px) {
.concept__cards{max-width:880px;margin:0 auto}
}
.reveal-card{opacity:0;transform:translateY(28px);will-change:opacity,transform}
.reveal-card.in{animation:conceptIn .55s cubic-bezier(.23,.92,.33,1) both;animation-delay:var(--delay,0ms)}
@keyframes conceptIn {
from{opacity:0;transform:translateY(28px)}
to{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce) {
.reveal-card{opacity:1;transform:none;animation:none}
}
.voices{--tile-h:116px;background-image:url(../image/horses_tile.png),url(../image/step_bg.png);background-repeat:repeat-x,repeat;background-position:left bottom,0 0;background-size:auto var(--tile-h),auto;padding:clamp(28px,5vw,64px) 16px calc(clamp(28px,5vw,64px) + var(--tile-h))}
.voices__inner{max-width:900px;margin:0 auto;position:relative;z-index:1}
.voices__title{margin:0 0 clamp(8px,1.6vw,12px);text-align:center;color:#20352f;font-weight:900;line-height:1.25;font-size:clamp(30px,4.4vw,40px)}
.voices__lead{margin:0 auto clamp(16px,3vw,28px);text-align:center;color:#4a5a54;font-size:clamp(13px,1.7vw,16px);max-width:60ch}
.voices__cards{display:grid;gap:clamp(14px,2.4vw,22px);grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:clamp(14px,3vw,24px)}
@media (max-width:1024px) {
.voices__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px) {
.voices__cards{grid-template-columns:1fr}
}
.vcard{background:#fff;border-radius:14px;border:2px solid #1b3e34;box-shadow:0 10px 24px rgba(0,0,0,.10);padding:clamp(16px,2.4vw,22px);display:flex;flex-direction:column;align-items:center;text-align:center}
.vcard__media{display:grid;place-items:center;width:152px;height:152px;background:#0db39e22;border-radius:9999px;margin-bottom:12px}
.vcard__avatar{width:152px;height:152px;border-radius:50%;object-fit:cover;display:block;background:#dfeee6}
.vcard__name{font-weight:800;font-size:clamp(18px,2.6vw,24px);letter-spacing:.02em;color:#1b3e34;margin-bottom:6px}
.vcard__stars{font-size:22px;letter-spacing:2px;color:#ffb400;line-height:1;margin-bottom:10px}
.vcard__body{margin:0;color:#2a2a2a;font-size:clamp(14px,1.7vw,16px);line-height:1.8;text-align:left}
.voices__ctaWrap{text-align:center}
.voices__arrow{display:block;width:min(42vw,360px);height:auto;margin:clamp(8px,1.8vw,16px) auto;filter:drop-shadow(0 4px 6px rgba(0,0,0,.12))}
.voices__cta{display:inline-block}
.voices__cta img{width:min(92vw,560px);height:auto;display:block;filter:drop-shadow(0 10px 18px rgba(0,0,0,.18))}
@media (max-width:640px) {
.voices{--tile-h:44px}
}
.flow{background:#3bb091;padding:clamp(28px,5vw,56px) 16px}
.flow__inner{max-width:900px;margin:0 auto}
.flow__title{margin:0;color:#fff;text-align:center;font-weight:900;letter-spacing:.02em;font-size:clamp(30px,4.2vw,44px);text-shadow:0 2px 12px rgba(0,0,0,.35)}
.flow__subtitle{margin:8px 0 18px;color:rgba(255,255,255,.9);text-align:center;font-size:clamp(18px,2.6vw,20px)}
.flow{background-image:url(../image/fllow_bg.png);background-repeat:repeat;background-position:0 0;background-size:auto;padding:clamp(28px,5vw,56px) 16px}
.flow__inner{max-width:900px;margin:0 auto}
.flow__row{position:relative;display:grid;grid-template-columns:148px 1fr;grid-template-areas:"badge head" "icon text";gap:12px 16px;margin:18px 0 26px;background:#fff7eb;border:2px solid #c9c3b5;border-radius:12px;box-shadow:0 10px 22px rgba(0,0,0,.14);padding:16px}
.flow__row::after{content:"";position:absolute;left:50%;transform:translateX(-50%) rotate(45deg);bottom:-16px;width:22px;height:22px;background:#2f5663;border-radius:4px;box-shadow:0 3px 0 rgba(0,0,0,.15)}
.flow__row:last-child::after{display:none}
.flow__badge{grid-area:badge;align-self:start;justify-self:start;background:#2f5663;color:#fff;font-weight:900;font-size:18px;line-height:1;padding:14px 18px;border-radius:12px;border:3px solid #fff;box-shadow:0 6px 14px rgba(0,0,0,.18)}
.flow__icon{grid-area:icon}
.flow__icon img{display:block;width:132px;height:auto;border-radius:8px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.08) inset}
.flow__head{grid-area:head;margin:2px 0 8px;font-weight:900;font-size:clamp(20px,2.8vw,20px);color:#1e1e1e}
.flow__text{grid-area:text;margin:0;color:#2a2a2a;font-size:clamp(14px,2.4vw,16px);line-height:1.75}
@media (max-width:680px) {
.flow__row{grid-template-columns:128px 1fr;gap:10px 12px;padding:14px 12px;margin:14px 0 22px}
.flow__badge{font-size:16px;padding:12px 14px}
.flow__icon img{width:112px}
.flow__row::after{bottom:-12px;width:18px;height:18px}
}
.reveal{opacity:1;transform:none;will-change:opacity,transform;transition:none!important}
.uys-anim-ready .reveal{opacity:0;transform:translateY(14px) scale(.985)}
.uys-anim-ready .reveal.in{animation:flowIn .55s cubic-bezier(.22,.8,.24,1) both;animation-delay:var(--delay,0ms)}
@keyframes flowIn {
0%{opacity:0;transform:translateY(14px) scale(.985)}
100%{opacity:1;transform:translateY(0) scale(1)}
}
@media (prefers-reduced-motion:reduce) {
.reveal,.uys-anim-ready .reveal,.uys-anim-ready .reveal.in{opacity:1!important;transform:none!important;animation:none!important}
}
.steps{--tile-h:116px;background-image:url(../image/horses_tile.png),url(../image/step_bg.png);background-repeat:repeat-x,repeat;background-position:left bottom,0 0;background-size:auto var(--tile-h),auto;padding:clamp(28px,5vw,64px) 16px calc(clamp(28px,5vw,64px) + var(--tile-h))}
.steps__inner{max-width:900px;margin:0 auto;position:relative;z-index:1}
.steps__title{text-align:center;color:#222;font-weight:900;font-size:clamp(30px,4.6vw,48px);line-height:1.2;margin:0 0 clamp(18px,3vw,28px)}
.steps__grid{display:grid;gap:clamp(14px,2.4vw,24px);grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;margin:8% auto 3%}
@media (max-width: 768px) {
.steps__grid{grid-template-columns:1fr;max-width:340px;margin:10% auto 2%}
}
.step{--badge-left:-18px;--badge-top:-16px;background:#fff;border-radius:12px;border:2px solid #1b3e34;box-shadow:0 10px 22px rgba(0,0,0,.10);overflow:visible;display:flex;flex-direction:column;padding:clamp(14px,2vw,14px);position:relative}
.step__badge{position:absolute;top:var(--badge-top);left:var(--badge-left);z-index:5;line-height:0;filter:drop-shadow(0 4px 8px rgba(0,0,0,.18));pointer-events:none}
.step__badge img{display:block;width:clamp(54px,7vw,72px);height:auto}
.step__thumb img{display:block;width:100%;height:auto;border-radius:8px;aspect-ratio:1/1;object-fit:cover}
.step__head{margin:2px 0 0;color:#222;font-weight:600;font-size:clamp(16px,1.9vw,18px);line-height:1.6;text-align:center}
.step__head span{color:#ff9600}
.steps__arrow{display:block;width:min(42vw,360px);height:auto;margin:clamp(10px,2vw,16px) auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.15))}
.steps__cta{display:block;width:min(92vw,560px);margin:8px auto 0}
.steps__cta img{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 18px rgba(0,0,0,.18))}
.step--sp-alt .step__thumb--pc,.step--sp-alt .step__body--pc{display:block}
.step--sp-alt .step__thumb--sp,.step--sp-alt .step__body--sp{display:none}
@media (max-width: 680px) {
.step--sp-alt .step__thumb--pc,.step--sp-alt .step__body--pc{display:none}
.step--sp-alt .step__thumb--sp,.step--sp-alt .step__body--sp{display:block}
}
@media (max-width: 640px) {
.steps{--tile-h:44px}
}
.js-reveal{opacity:0;transform:translateY(18px) scale(.98)}
.js-reveal.in{animation:stepPop .55s cubic-bezier(.22,.8,.24,1) both;animation-delay:var(--delay,0ms)}
@keyframes stepPop {
0%{opacity:0;transform:translateY(18px) scale(.98)}
100%{opacity:1;transform:translateY(0) scale(1)}
}
@media (prefers-reduced-motion: reduce) {
.js-reveal,.js-reveal.in{opacity:1;transform:none;animation:none}
}
.site-footer{--footer-bg:#2aa48e;--white:#fff;background:var(--footer-bg);color:var(--white);padding:28px 16px 36px}
.footer__inner{max-width:1200px;margin:0 auto}
.footer__nav{display:flex;flex-wrap:wrap;gap:clamp(14px,2.4vw,28px);justify-content:center;font-weight:700}
.footer__nav a{color:#fff;text-decoration:none;position:relative}
.footer__nav a:hover{text-decoration:underline}
.footer__rule{border:0;height:1px;margin:16px 0;background:rgba(255,255,255,.45)}
.footer__notes{margin:0;padding:0;list-style:none;line-height:1.9;font-size:15px}
.footer__notes li{position:relative;padding-left:1.2em}
.footer__notes li::before{content:"・";position:absolute;left:0;top:0;color:#fff;opacity:.95;font-weight:700}
.footer__brand{text-align:center;margin-top:18px}
.footer__logo{width:min(60vw,360px);height:auto;display:block;margin:0 auto 8px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.12))}
.footer__copy{display:block;font-size:13px;opacity:.95}
@media (max-width: 768px) {
.footer__nav{justify-content:center}
.footer__notes{font-size:14px}
}
@media (max-width: 480px) {
.site-footer{padding:24px 14px 32px}
.footer__nav{gap:14px}
.footer__notes{font-size:13px}
}
.reveal.in.jitter{animation:vcardIn .6s both,jitter-burst 2s .8s infinite;will-change:transform}