/* =========================================================
   24'Seven 生成Tool — Announcement LP (Resort Tech)
   R.Support / Ocean · Sky · Turquoise · White · Gold
   ========================================================= */
:root{
  --ocean:#0a2a43;--ocean-2:#0e3a5c;--blue:#1573b8;--sky:#4aa8e0;--turquoise:#38c6c9;
  --sand:#f3ede2;--gold:#d9b25f;--gold-2:#f0d288;--white:#fff;--ink:#14232e;--ink-soft:#4a5c68;
  --line:rgba(10,42,67,.10);--radius:22px;--radius-lg:30px;
  --shadow-sm:0 6px 22px rgba(10,42,67,.08);--shadow:0 20px 60px rgba(10,42,67,.14);
  --shadow-glow:0 18px 50px rgba(21,115,184,.35);--maxw:1140px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --font-jp:"Noto Sans JP",system-ui,sans-serif;--font-en:"Inter",var(--font-jp);--font-head:"Poppins","Noto Sans JP",sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-jp);color:var(--ink);background:var(--white);line-height:1.8;letter-spacing:.01em;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
strong{font-weight:700}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:22px}
section{position:relative}
.center{text-align:center}
.sp-only{display:inline}
@media(min-width:720px){.sp-only{display:none}}
.dot{width:8px;height:8px;border-radius:50%;background:var(--gold-2);box-shadow:0 0 0 0 rgba(240,210,136,.7);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(240,210,136,.6)}70%{box-shadow:0 0 0 10px rgba(240,210,136,0)}100%{box-shadow:0 0 0 0 rgba(240,210,136,0)}}

/* ---------- Buttons ---------- */
.btn{--bg:var(--blue);--fg:#fff;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.4em;font-family:var(--font-en);font-weight:700;line-height:1;padding:1.05em 1.9em;border-radius:999px;color:var(--fg);background:var(--bg);box-shadow:var(--shadow-glow);cursor:pointer;border:0;transition:transform .3s var(--ease),box-shadow .3s var(--ease),filter .3s var(--ease);will-change:transform;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.35),transparent 80%);transform:translateX(-120%);transition:transform .6s var(--ease)}
.btn:hover{transform:translateY(-3px) scale(1.02);filter:saturate(1.05)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(-1px) scale(.99)}
.btn--primary{--bg:linear-gradient(120deg,var(--blue),var(--turquoise));--fg:#fff}
.btn--gold{--bg:linear-gradient(120deg,var(--gold),var(--gold-2));--fg:#3a2c07;box-shadow:0 18px 50px rgba(217,178,95,.45)}
.btn--ghost{--bg:transparent;--fg:var(--ocean);border:1.5px solid rgba(10,42,67,.22);box-shadow:none;backdrop-filter:blur(6px)}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn--sm{padding:.72em 1.25em;font-size:.86rem}
.btn--lg{padding:1.15em 2.3em;font-size:1.05rem}
.btn--xl{padding:1.35em 3em;font-size:1.2rem}

/* ---------- Header ---------- */
.header{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .4s,box-shadow .4s}
.header__inner{display:flex;align-items:center;gap:20px;padding-block:16px}
.header.is-scrolled{background:rgba(255,255,255,.82);backdrop-filter:saturate(1.4) blur(16px);box-shadow:0 6px 24px rgba(10,42,67,.08)}
.brand{display:flex;flex-direction:column;line-height:1.05;margin-right:auto}
.brand__mark{font-family:var(--font-head);font-weight:800;font-size:1.35rem;color:#fff;letter-spacing:.02em}
.brand__mark em{font-style:normal;color:var(--gold-2)}
.brand__by{font-family:var(--font-en);font-size:.62rem;letter-spacing:.18em;color:rgba(255,255,255,.7)}
.header.is-scrolled .brand__mark{color:var(--ocean)}
.header.is-scrolled .brand__mark em{color:var(--blue)}
.header.is-scrolled .brand__by{color:var(--ink-soft)}
.header__nav{display:none;gap:26px;font-size:.9rem;font-weight:500;color:#fff}
.header.is-scrolled .header__nav{color:var(--ink)}
.header__nav a{position:relative;opacity:.9}
.header__nav a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--blue);transition:width .3s var(--ease)}
.header__nav a:hover{opacity:1}.header__nav a:hover::after{width:100%}
.header__cta{display:none}
@media(min-width:900px){.header__nav{display:flex}.header__cta{display:inline-flex}}

/* ---------- Section shared ---------- */
.section__eyebrow{font-family:var(--font-en);font-weight:600;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);text-align:center;margin-bottom:14px}
.section__eyebrow.light{color:var(--gold-2)}
.section__title{font-family:var(--font-head);font-weight:800;text-align:center;line-height:1.35;font-size:clamp(1.7rem,5.4vw,2.9rem);color:var(--ocean)}
.section__title.light{color:#fff}
.hl{background:linear-gradient(120deg,var(--blue),var(--turquoise));-webkit-background-clip:text;background-clip:text;color:transparent}
.section__title.light .hl{background:linear-gradient(120deg,var(--gold),var(--gold-2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Hero ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#fff;padding:120px 0 90px;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__sky{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% -10%,#bfe6ff 0%,#5aa9df 26%,#1573b8 55%,#0a2a43 100%)}
.hero__sun{position:absolute;left:50%;top:22%;width:min(64vw,520px);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,246,224,.95) 0%,rgba(255,224,160,.5) 34%,rgba(255,214,150,0) 66%);filter:blur(2px);border-radius:50%}
.hero__grid{position:absolute;inset:0;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px);background-size:56px 56px;-webkit-mask:radial-gradient(120% 80% at 50% 40%,#000,transparent 78%);mask:radial-gradient(120% 80% at 50% 40%,#000,transparent 78%)}
.hero__glow{position:absolute;inset:0;background:radial-gradient(30vw 30vw at var(--mx,50%) var(--my,30%),rgba(120,220,225,.22),transparent 60%);transition:background .3s}
.hero__waves{position:absolute;left:-5%;right:-5%;bottom:-2px;height:34%;background:radial-gradient(120% 100% at 50% 100%,rgba(56,198,201,.35),transparent 60%),linear-gradient(to top,rgba(10,42,67,.55),transparent);-webkit-mask:linear-gradient(to top,#000 40%,transparent);mask:linear-gradient(to top,#000 40%,transparent)}
.hero__inner{position:relative}
.hero__badge{display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-en);font-weight:600;font-size:.82rem;letter-spacing:.12em;padding:.6em 1.2em;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(8px);margin-bottom:26px}
.hero__title{font-family:var(--font-head);font-weight:800;font-size:clamp(2.4rem,9vw,5rem);line-height:1.12;text-shadow:0 12px 40px rgba(5,25,45,.4)}
.hero__title .grad{background:linear-gradient(120deg,var(--gold-2),#fff 60%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__lead{margin:26px auto 0;max-width:660px;font-size:clamp(1rem,3.4vw,1.2rem);line-height:1.9;color:rgba(255,255,255,.94)}
.hero__lead strong{color:var(--gold-2)}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:34px}
.hero__trust{list-style:none;display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:center;margin-top:34px;font-size:.9rem}
.hero__trust li{display:flex;align-items:center;gap:.4em;padding:.5em 1em;border-radius:999px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2)}
.hero__trust strong{color:var(--gold-2)}
.hero__scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-family:var(--font-en);font-size:.62rem;letter-spacing:.25em;color:rgba(255,255,255,.75);display:flex;flex-direction:column;align-items:center;gap:8px}
.hero__scroll span{width:1px;height:40px;background:linear-gradient(rgba(255,255,255,.8),transparent);animation:scrolldot 2s var(--ease) infinite}
@keyframes scrolldot{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:719px){.hero__sun{top:12%;left:74%;width:min(58vw,320px)}}

/* ---------- Intro ---------- */
.intro{padding:96px 0}
.intro__inner{max-width:820px;margin-inline:auto;text-align:center}
.intro__lead{margin-top:22px;color:var(--ink-soft);font-size:1.05rem;line-height:2}
.intro__lead strong{color:var(--blue)}
.intro__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
.istat{padding:22px 10px;border-radius:var(--radius);background:linear-gradient(135deg,rgba(21,115,184,.06),rgba(56,198,201,.09));border:1px solid var(--line)}
.istat__num{display:block;font-family:var(--font-head);font-weight:800;font-size:clamp(1.7rem,6vw,2.4rem);line-height:1;background:linear-gradient(120deg,var(--blue),var(--turquoise));-webkit-background-clip:text;background-clip:text;color:transparent}
.istat span:last-child{display:block;margin-top:8px;font-size:.8rem;color:var(--ink-soft)}

/* ---------- Featured (24'Seven official) ---------- */
.feature{padding:20px 0 6px}
.feature__card{display:flex;align-items:center;gap:20px;padding:30px 32px;border-radius:var(--radius-lg);color:#fff;
  background:linear-gradient(120deg,var(--ocean),var(--blue) 70%,var(--turquoise));box-shadow:var(--shadow);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);position:relative;overflow:hidden}
.feature__card::after{content:"";position:absolute;right:-40px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,246,224,.35),transparent 65%)}
.feature__card:hover{transform:translateY(-4px);box-shadow:0 26px 70px rgba(10,42,67,.28)}
.feature__tag{display:inline-block;font-family:var(--font-en);font-weight:700;font-size:.72rem;letter-spacing:.1em;padding:.4em 1em;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);margin-bottom:12px}
.feature__body h2{font-family:var(--font-head);font-weight:800;font-size:clamp(1.3rem,4vw,1.9rem);line-height:1.35;margin-bottom:8px}
.feature__body p{color:rgba(255,255,255,.85);font-size:.98rem}
.feature__arrow{margin-left:auto;font-size:1.6rem;flex:0 0 auto;transition:transform .3s var(--ease)}
.feature__card:hover .feature__arrow{transform:translateX(6px)}
@media(max-width:600px){.feature__card{flex-direction:column;align-items:flex-start;gap:14px}.feature__arrow{margin-left:0}}

/* ---------- Tools ---------- */
.tools{padding:80px 0 96px;background:linear-gradient(180deg,#f6fbff,#eaf5fd)}
.tool{display:flex;flex-direction:column}
.tool h3,.tool p{position:relative;z-index:1}
.tool__try{margin-top:14px;font-family:var(--font-en);font-weight:700;font-size:.82rem;color:var(--blue);opacity:0;transform:translateY(4px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.tool:hover .tool__try{opacity:1;transform:none}
.tool--accent .tool__try{color:var(--gold-2)}
@media(hover:none){.tool__try{opacity:1;transform:none}}
.tools__sub{text-align:center;color:var(--ink-soft);margin-top:14px}
.tools__grid{display:grid;grid-template-columns:1fr;gap:16px;margin:46px 0 40px}
.tool{position:relative;padding:28px 24px;border-radius:var(--radius);background:rgba(255,255,255,.78);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease);overflow:hidden}
.tool:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.tool__no{position:absolute;top:16px;right:20px;font-family:var(--font-head);font-weight:800;font-size:1.5rem;color:rgba(21,115,184,.16)}
.tool__ico{width:56px;height:56px;display:grid;place-items:center;font-size:1.6rem;border-radius:16px;background:linear-gradient(135deg,rgba(21,115,184,.14),rgba(56,198,201,.14));margin-bottom:16px}
.tool h3{font-size:1.14rem;color:var(--ocean);margin-bottom:8px;font-weight:700}
.tool p{font-size:.94rem;color:var(--ink-soft)}
.tool--accent{background:linear-gradient(135deg,var(--ocean),var(--blue));color:#fff;border:0}
.tool--accent h3{color:#fff}.tool--accent p{color:rgba(255,255,255,.85)}
.tool--accent .tool__ico{background:rgba(255,255,255,.16)}
.tool--accent .tool__no{color:rgba(255,255,255,.25)}
@media(min-width:600px){.tools__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:920px){.tools__grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1080px){.tools__grid{grid-template-columns:repeat(5,1fr)}}

/* ---------- How ---------- */
.how{padding:96px 0}
.how__grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:46px;counter-reset:step}
.how__step{position:relative;padding:34px 28px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);text-align:center;transition:transform .4s var(--ease),box-shadow .4s}
.how__step:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.how__n{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;font-family:var(--font-head);font-weight:800;font-size:1.4rem;color:#fff;background:linear-gradient(135deg,var(--blue),var(--turquoise));margin-bottom:16px;box-shadow:var(--shadow-glow)}
.how__step h3{font-size:1.2rem;color:var(--ocean);margin-bottom:8px}
.how__step p{color:var(--ink-soft);font-size:.96rem}
@media(min-width:760px){.how__grid{grid-template-columns:repeat(3,1fr)}
  .how__step:not(:last-child)::after{content:"→";position:absolute;right:-18px;top:50%;transform:translateY(-50%);color:var(--blue);font-size:1.4rem;z-index:2}}

/* ---------- Why (dark) ---------- */
.why{padding:110px 0;color:#fff;overflow:hidden;background:linear-gradient(180deg,#0a2a43,#08243a 60%,#0a2a43)}
.why__bg{position:absolute;inset:0;z-index:0;background:radial-gradient(120% 80% at 80% 10%,rgba(56,198,201,.18),transparent 55%)}
.why__moon{position:absolute;right:8%;top:12%;width:min(30vw,180px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 38%,#fdf6e6,#e7e2cf 55%,#b9b39c 100%);box-shadow:0 0 60px rgba(240,232,200,.5),inset -14px -12px 30px rgba(0,0,0,.25)}
.why .container{position:relative;z-index:1}
.why__grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:48px}
.why__item{padding:30px 26px;border-radius:var(--radius);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);transition:transform .4s var(--ease),background .4s}
.why__item:hover{transform:translateY(-6px);background:rgba(255,255,255,.1)}
.why__item span{font-size:2rem;display:block;margin-bottom:12px}
.why__item h3{font-size:1.16rem;margin-bottom:8px;color:var(--gold-2)}
.why__item p{color:rgba(255,255,255,.8);font-size:.95rem}
@media(min-width:720px){.why__grid{grid-template-columns:repeat(4,1fr)}}

/* ---------- Target ---------- */
.target{padding:90px 0}
.target__list{list-style:none;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:40px;max-width:760px;margin-inline:auto}
.target__list li{padding:.7em 1.4em;border-radius:999px;background:linear-gradient(135deg,rgba(21,115,184,.08),rgba(56,198,201,.1));border:1px solid var(--line);font-weight:500;color:var(--ocean);font-size:.95rem;transition:transform .3s var(--ease)}
.target__list li:hover{transform:translateY(-3px)}

/* ---------- Final ---------- */
.final{padding:120px 0;text-align:center;color:#fff;overflow:hidden}
.final__bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 110% at 50% 120%,#1573b8,#0a2a43 70%)}
.final__sun{position:absolute;left:50%;bottom:-20%;width:min(80vw,640px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,240,205,.6),rgba(255,214,150,0) 62%)}
.final__inner{position:relative}
.final__badge{display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-en);font-weight:600;font-size:.8rem;letter-spacing:.12em;padding:.55em 1.2em;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);margin-bottom:22px}
.final__title{font-family:var(--font-head);font-weight:800;font-size:clamp(2rem,7vw,3.4rem);line-height:1.2;margin-bottom:22px;text-shadow:0 12px 40px rgba(0,0,0,.35)}
.final__lead{max-width:560px;margin:0 auto 38px;color:rgba(255,255,255,.9);font-size:1.05rem}
.final__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.final .btn--ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.final .btn--ghost:hover{border-color:#fff;color:#fff}
.final__micro{margin-top:22px;font-size:.85rem;letter-spacing:.06em;color:rgba(255,255,255,.75)}

/* ---------- Footer ---------- */
.footer{background:#061a2b;color:rgba(255,255,255,.7);padding:56px 0 110px}
.footer__inner{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.brand--footer .brand__mark{font-size:1.5rem}
.footer__tag{font-size:.92rem;color:rgba(255,255,255,.55)}
.footer__nav{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;font-size:.88rem}
.footer__nav a{opacity:.8;transition:opacity .3s}.footer__nav a:hover{opacity:1;color:var(--gold-2)}
.footer__copy{font-size:.78rem;color:rgba(255,255,255,.4);font-family:var(--font-en)}

/* ---------- Mobile fixed CTA ---------- */
.mobilecta{position:fixed;left:14px;right:14px;bottom:14px;z-index:90;display:flex;align-items:center;justify-content:center;padding:1.1em;border-radius:16px;font-family:var(--font-en);font-weight:700;color:#3a2c07;background:linear-gradient(120deg,var(--gold),var(--gold-2));box-shadow:0 14px 34px rgba(217,178,95,.5);transform:translateY(160%);transition:transform .5s var(--ease)}
.mobilecta.is-show{transform:translateY(0)}
@media(min-width:900px){.mobilecta{display:none}}

/* ---------- Reveal (progressive enhancement) ---------- */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal:nth-child(2){transition-delay:.06s}
.js .reveal:nth-child(3){transition-delay:.12s}
.js .reveal:nth-child(4){transition-delay:.18s}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
  .hero__scroll span,.dot{display:none}
}