/* =========================================================
   Tropica｜ぎのわん市旅先納税 LP
   Design tokens
========================================================= */
:root{
  --navy:      #2E6BB5;   /* logo primary blue — main brand color, brightened */
  --navy-deep: #1F4C82;   /* logo line shade — used for headline text, not large fills */
  --teal:      #14B4DA;   /* rainbow outer arc, brightened */
  --orange:    #EF8A4C;   /* rainbow middle arc, brightened */
  --green:     #A9D65C;   /* rainbow inner arc, brightened */
  --sand:      #FDFBF5;   /* warm background, lightened */
  --foam:      #EFFAFC;   /* cool alt background */
  --sky:       #E8F4FC;   /* light blue tint for bright section fills */
  --ink:       #1D3A5F;   /* body text */
  --white:     #FFFFFF;

  --font-display: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  --font-body:    "Noto Sans JP", "Hiragino Sans", sans-serif;
  --font-accent:  "Fredoka", "Zen Maru Gothic", sans-serif;

  --container: 1160px;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;
  --shadow-soft: 0 18px 40px -18px rgba(22,57,99,0.35);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:92px; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--sand);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:700; }
p{ margin:0; }
button{ font-family:inherit; border:none; background:none; cursor:pointer; }
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.container-narrow{ max-width:820px; }
.center{ text-align:center; }
.sp-only{ display:none; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; }

/* =========================================================
   Buttons
========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:16px 34px;
  border-radius:100px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  letter-spacing:.02em;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(120deg,var(--orange),#f0965d);
  color:var(--white);
  box-shadow:0 14px 28px -10px rgba(234,124,62,.55);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 32px -10px rgba(234,124,62,.65); }
.btn-ghost{
  background:rgba(255,255,255,.14);
  border:1.5px solid rgba(255,255,255,.7);
  color:var(--white);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{ background:rgba(255,255,255,.28); }
.btn-outline{
  background:transparent;
  border:1.5px solid var(--navy);
  color:var(--navy);
}
.btn-outline:hover{ background:var(--navy); color:var(--white); }
.btn-lg{ padding:19px 44px; font-size:16px; }

/* =========================================================
   Eyebrow / titles
========================================================= */
.eyebrow{
  font-family:var(--font-accent);
  font-weight:600;
  letter-spacing:.18em;
  font-size:13px;
  color:var(--teal);
  margin:0 0 10px;
}
.eyebrow.center{ text-align:center; }
.eyebrow.on-dark{ color:#9FE3F0; }
.section-title{
  font-size:clamp(26px,4vw,38px);
  line-height:1.45;
  color:var(--navy-deep);
  margin-bottom:18px;
}
.section-title.center{ text-align:center; }
.section-title.on-dark{ color:var(--white); }
.lead{
  font-size:15.5px;
  color:#3c5878;
  max-width:640px;
}
.lead.center{ margin:0 auto 40px; text-align:center; }
.lead.on-dark{ color:#dcecf5; max-width:520px; }
.section{ padding:96px 0; position:relative; }

/* =========================================================
   Header
========================================================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:14px 0;
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.site-header.is-scrolled{
  background:rgba(251,247,238,.92);
  backdrop-filter:blur(10px);
  box-shadow:0 8px 24px -16px rgba(20,49,79,.35);
  padding:8px 0;
}
.header-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.header-logo img{ height:46px; width:auto; transition:height .3s ease; }
.site-header.is-scrolled .header-logo img{ height:38px; }
.header-nav{ display:flex; align-items:center; gap:32px; }
.header-nav ul{ display:flex; gap:26px; }
.header-nav a:not(.btn){
  font-size:14px; font-weight:600; color:var(--navy-deep);
  position:relative; padding:4px 0;
}
.header-nav a:not(.btn)::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--orange); transition:right .25s ease;
}
.header-nav a:not(.btn):hover::after{ right:0; }
.header-cta{ padding:12px 26px; font-size:13.5px; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; width:40px; height:34px; justify-content:center; align-items:center; }
.nav-toggle span{ width:24px; height:2px; background:var(--navy-deep); border-radius:2px; transition:transform .3s ease, opacity .3s ease; }

/* =========================================================
   Hero
========================================================= */
.hero{
  position:relative;
  height:100vh;
  min-height:620px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--navy);
}
.hero-slides{ position:absolute; inset:0; }
.hero-slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0;
  transform:scale(1.08);
  transition:opacity 1.6s ease;
  animation:heroKen 14s ease-in-out infinite;
}
.hero-slide.is-active{ opacity:1; }
@keyframes heroKen{
  0%{ transform:scale(1.02); }
  50%{ transform:scale(1.12); }
  100%{ transform:scale(1.02); }
}
.hero-scrim{
  position:absolute; inset:0;
  background:none;
}
.hero-content{
  position:relative; z-index:2;
  text-align:center;
  color:var(--white);
  padding:0 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero-eyebrow{
  font-family:var(--font-accent);
  letter-spacing:.28em;
  font-size:12.5px;
  color:#EAF8FC;
  margin-bottom:22px;
  text-shadow:0 2px 12px rgba(20,60,100,.45);
}
.hero-logo{
  width:min(72vw,420px);
  filter:drop-shadow(0 18px 40px rgba(0, 0, 0, 0));
  margin-bottom:26px;
  animation:floatLogo 6s ease-in-out infinite;
}
@keyframes floatLogo{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}
.hero-copy{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(18px,2.6vw,26px);
  line-height:1.7;
  margin-bottom:34px;
  text-shadow:0 4px 20px rgba(15,45,80,.5), 0 2px 8px rgba(15,45,80,.4);
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }

.hero-dots{
  position:absolute; z-index:3; bottom:96px; left:50%; transform:translateX(-50%);
  display:flex; gap:10px;
}
.hero-dots button{
  width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,.45);
  transition:background .3s ease, transform .3s ease;
}
.hero-dots button.is-active{ background:var(--white); transform:scale(1.3); }

.scroll-cue{
  position:absolute; z-index:3; bottom:150px; left:50%; transform:translateX(-50%);
  width:26px; height:42px; border:2px solid rgba(255,255,255,.7); border-radius:20px;
}
.scroll-cue span{
  position:absolute; top:7px; left:50%; width:4px; height:8px; margin-left:-2px;
  background:var(--white); border-radius:3px;
  animation:scrollCue 1.8s ease infinite;
}
@keyframes scrollCue{
  0%{ opacity:1; transform:translateY(0); }
  70%{ opacity:0; transform:translateY(14px); }
  100%{ opacity:0; transform:translateY(0); }
}

.wave-divider{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:auto; z-index:2; }
.wave-divider.hero-wave{ height:9vw; min-height:60px; max-height:130px; }

/* generic section wave dividers (between sections) */
svg.wave-divider:not(.hero-wave){
  position:relative; display:block; height:70px; margin:-1px 0;
}

/* =========================================================
   News strip
========================================================= */
.news-strip{
  background:var(--navy);
  color:var(--white);
  padding:16px 0;
}
.news-strip__inner{
  max-width:var(--container); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; gap:24px;
}
.news-strip__label{
  font-family:var(--font-accent); font-weight:600; font-size:12.5px;
  letter-spacing:.12em;
  background:var(--orange);
  padding:6px 16px; border-radius:100px;
  flex-shrink:0;
}
.news-strip__list{ display:flex; flex-direction:column; gap:4px; flex:1; }
.news-strip__list li{ font-size:13.5px; display:flex; gap:14px; opacity:.92; }
.news-strip__list time{ color:#9FE3F0; flex-shrink:0; }
.news-strip__more{ font-size:13px; font-weight:600; flex-shrink:0; border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:2px; }

/* =========================================================
   About
========================================================= */
.about-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:72px;
  align-items:center;
}
.about-points{ margin-top:36px; display:flex; flex-direction:column; gap:22px; }
.about-points li{ display:flex; gap:16px; align-items:flex-start; }
.about-points__icon{
  flex-shrink:0; width:48px; height:48px; border-radius:50%;
  background:var(--foam);
  display:flex; align-items:center; justify-content:center;
}
.about-points__icon svg{
  width:24px; height:24px; fill:none; stroke:var(--teal); stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
}
.about-points strong{ display:block; font-size:15.5px; color:var(--navy-deep); margin-bottom:4px; }
.about-points p{ font-size:13.5px; color:#5a7290; }

.about-visual{ position:relative; }
.about-visual__frame{
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  aspect-ratio:4/5;
}
.about-visual__frame img{ width:100%; height:100%; object-fit:cover; object-position:center 78%; }
.badge-ratio{
  position:absolute; left:-30px; bottom:-30px;
  width:132px; height:132px; border-radius:50%;
  background:var(--orange);
  color:var(--white);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  box-shadow:0 16px 30px -10px rgba(234,124,62,.6);
  border:4px solid var(--sand);
}
.badge-ratio__num{ font-family:var(--font-display); font-size:34px; font-weight:900; line-height:1; }
.badge-ratio__num small{ font-size:13px; font-weight:700; display:block; margin-top:2px; }
.badge-ratio__label{ font-size:10.5px; font-weight:600; line-height:1.4; margin-top:4px; }

/* =========================================================
   Donate table
========================================================= */
.donate{ background:var(--foam); }
.table-wrap{ overflow-x:auto; margin-bottom:28px; }
.donate-table{
  width:100%; max-width:640px; margin:0 auto;
  border-collapse:separate; border-spacing:0 10px;
  font-family:var(--font-display);
}
.donate-table thead th{
  font-size:13px; letter-spacing:.06em; color:var(--navy);
  padding:0 20px 6px; text-align:left; font-weight:700;
}
.donate-table thead th:last-child{ text-align:right; }
.donate-table tbody tr{ background:var(--white); box-shadow:0 6px 16px -10px rgba(22,57,99,.25); }
.donate-table tbody td{ padding:16px 20px; font-size:15.5px; color:var(--ink); }
.donate-table tbody td:first-child{ border-radius:12px 0 0 12px; font-weight:700; color:var(--navy-deep); }
.donate-table tbody td:last-child{ border-radius:0 12px 12px 0; text-align:right; font-weight:700; color:var(--orange); }

.table-note{ text-align:center; font-size:13.5px; color:#4c6987; display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:34px; flex-wrap:wrap; }
.table-note__logo{ height:22px; width:auto; display:inline-block; }

/* =========================================================
   Guide / steps
========================================================= */
.steps{
  max-width:760px; margin:0 auto 40px;
  display:flex; flex-direction:column; gap:0;
  position:relative;
}
.step{
  display:flex; gap:26px; align-items:flex-start;
  padding:26px 0;
  position:relative;
}
.step:not(:last-child)::after{
  content:"";
  position:absolute;
  left:29px; top:70px; bottom:-6px;
  width:2px;
  background-image:linear-gradient(var(--teal) 55%, transparent 0%);
  background-size:2px 12px;
  background-repeat:repeat-y;
}
.step__num{
  flex-shrink:0;
  width:60px; height:60px; border-radius:50%;
  background:var(--navy);
  color:var(--white);
  font-family:var(--font-display); font-weight:900; font-size:17px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 20px -8px rgba(31,76,130,.55);
  z-index:1;
}
.step__body h3{ font-size:17px; color:var(--navy-deep); margin-bottom:6px; }
.step__body p{ font-size:14px; color:#4c6987; max-width:520px; }

/* =========================================================
   Category
========================================================= */
.category{ background:var(--sand); }
.category-grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:18px;
}
.category-card{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  background:var(--white);
  padding:28px 12px;
  border-radius:var(--radius-md);
  box-shadow:0 10px 24px -16px rgba(22,57,99,.3);
  font-size:13.5px; font-weight:700; color:var(--navy-deep);
  transition:transform .25s ease, box-shadow .25s ease;
  text-align:center;
}
.category-card:hover{ transform:translateY(-6px); box-shadow:0 18px 30px -16px rgba(22,57,99,.4); }
.category-card__icon{
  width:56px; height:56px; border-radius:50%;
  background:var(--foam);
  display:flex; align-items:center; justify-content:center;
}
.category-card__icon svg{ width:28px; height:28px; fill:none; stroke:var(--teal); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.category-card:nth-child(2) .category-card__icon svg{ stroke:var(--orange); }
.category-card:nth-child(3) .category-card__icon svg{ stroke:var(--navy); }
.category-card:nth-child(4) .category-card__icon svg{ stroke:var(--green); }
.category-card:nth-child(5) .category-card__icon svg{ stroke:var(--orange); }
.category-card:nth-child(6) .category-card__icon svg{ stroke:var(--teal); }

/* =========================================================
   Scene
========================================================= */
.scene{ background:var(--sky); }
.scene-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.scene-card{
  position:relative;
  aspect-ratio:3/4;
  border-radius:var(--radius-md);
  overflow:hidden;
  background-size:cover;
  background-position:center;
  display:flex; align-items:flex-end; padding:22px;
  transition:transform .3s ease, box-shadow .3s ease;
  box-shadow:0 10px 24px -16px rgba(22,57,99,.35);
}
.scene-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:6px;
  background:var(--teal);
  z-index:2;
}
.scene-card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(8,28,50,.82) 0%, rgba(8,28,50,.28) 55%, rgba(8,28,50,.02) 78%);
}
.scene-card:hover{ transform:translateY(-6px); box-shadow:0 18px 30px -16px rgba(22,57,99,.45); }
.scene-card__label{
  position:relative; z-index:1;
  color:var(--white); font-family:var(--font-display); font-weight:700; font-size:14.5px; line-height:1.6;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.scene-card:nth-child(2)::before{ background:var(--orange); }
.scene-card:nth-child(3)::before{ background:var(--green); }
.scene-card:nth-child(4)::before{ background:var(--navy); }

/* =========================================================
   Map
========================================================= */
.map-embed{ margin-bottom:32px; }
.map-embed__placeholder{
  aspect-ratio:16/6;
  border-radius:var(--radius-lg);
  background:repeating-linear-gradient(135deg, var(--foam), var(--foam) 14px, #e4f3f6 14px, #e4f3f6 28px);
  border:2px dashed #9fd4e0;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  color:#3c7186; font-size:13.5px; font-weight:600;
}

/* =========================================================
   FAQ / Accordion
========================================================= */
.accordion__item{
  border-bottom:1px solid #ddd7c7;
}
.accordion__q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:24px 4px;
  text-align:left;
  font-family:var(--font-display); font-weight:700; font-size:15.5px; color:var(--navy-deep);
}
.accordion__icon{
  position:relative; flex-shrink:0; width:22px; height:22px;
}
.accordion__icon::before,.accordion__icon::after{
  content:""; position:absolute; top:50%; left:50%; background:var(--orange);
  transform:translate(-50%,-50%);
}
.accordion__icon::before{ width:16px; height:2px; }
.accordion__icon::after{ width:2px; height:16px; transition:transform .3s ease; }
.accordion__item.is-open .accordion__icon::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.accordion__a{
  max-height:0; overflow:hidden; transition:max-height .4s ease;
}
.accordion__a p{ padding:0 4px 24px; font-size:14px; color:#4c6987; }
.accordion__item.is-open .accordion__a{ max-height:400px; }

/* =========================================================
   Recruit
========================================================= */
.recruit{ background:linear-gradient(120deg, var(--navy) 0%, var(--teal) 140%); }
.recruit-box{
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.recruit .section-title{ margin-bottom:10px; }

/* =========================================================
   Footer
========================================================= */
.site-footer{ background:var(--navy); color:#eaf4fb; padding:72px 0 0; }
.footer-grid{
  display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:48px;
  padding-bottom:56px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-logo{ height:44px; margin-bottom:14px; filter:brightness(0) invert(1); opacity:.92; }
.footer-brand p{ font-size:13px; opacity:.8; }
.footer-nav ul{ display:flex; flex-direction:column; gap:12px; }
.footer-nav a{ font-size:13.5px; opacity:.85; }
.footer-nav a:hover{ opacity:1; }
.footer-contact__title{ font-weight:700; margin-bottom:10px; color:var(--white); font-size:13.5px; }
.footer-contact p{ font-size:12.5px; opacity:.8; margin-bottom:4px; }
.footer-contact a{ text-decoration:underline; }
.footer-bottom{ text-align:center; padding:22px 0; font-size:11.5px; opacity:.6; }

/* =========================================================
   Floating CTA
========================================================= */
.fab-donate{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:76px; height:76px; border-radius:50%;
  background:linear-gradient(135deg,var(--orange),#f0965d);
  color:var(--white);
  display:flex; align-items:center; justify-content:center;
  text-align:center; font-family:var(--font-display); font-weight:700; font-size:11.5px; line-height:1.35;
  box-shadow:0 14px 26px -8px rgba(234,124,62,.6);
  transition:transform .25s ease;
}
.fab-donate:hover{ transform:scale(1.07); }

/* =========================================================
   Responsive
========================================================= */
@media (max-width:1024px){
  .about-grid{ grid-template-columns:1fr; gap:48px; }
  .about-visual{ order:-1; max-width:420px; margin:0 auto; }
  .category-grid{ grid-template-columns:repeat(3,1fr); }
  .scene-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-contact{ grid-column:1 / -1; }
}

@media (max-width:760px){
  .sp-only{ display:inline; }
  .section{ padding:64px 0; }
  .header-nav{ position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px);
    background:var(--sand); flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding:100px 32px 32px; gap:32px; transform:translateX(100%); transition:transform .35s ease;
    box-shadow:-10px 0 30px rgba(0,0,0,.15);
  }
  .header-nav.is-open{ transform:translateX(0); }
  .header-nav ul{ flex-direction:column; gap:22px; }
  .header-nav a:not(.btn){ font-size:16px; }
  .nav-toggle{ display:flex; z-index:110; }
  .nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2){ opacity:0; }
  .nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .hero-logo{ width:min(78vw,300px); }
  .hero-actions{ flex-direction:column; width:100%; max-width:280px; }
  .hero-actions .btn{ width:100%; }
  .hero-dots{ bottom:80px; }
  .scroll-cue{ display:none; }

  .news-strip__inner{ flex-wrap:wrap; }
  .news-strip__list{ order:3; width:100%; }

  .badge-ratio{ width:104px; height:104px; left:-14px; bottom:-14px; }
  .badge-ratio__num{ font-size:26px; }

  .category-grid{ grid-template-columns:repeat(2,1fr); }
  .scene-grid{ grid-template-columns:1fr 1fr; }

  .recruit-box{ flex-direction:column; align-items:flex-start; }

  .footer-grid{ grid-template-columns:1fr; }
  .fab-donate{ width:64px; height:64px; font-size:10px; right:14px; bottom:14px; }
}

/* WWW!!26 電子チケット取扱い */
.www26-ticket-banner-section{
  padding:20px 0 72px;
  background:#fff;
}
.www26-ticket-container{
  width:min(1120px,calc(100% - 48px));
  margin:0 auto;
}
.www26-ticket-banner{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(300px,.82fr);
  min-height:250px;
  overflow:hidden;
  border-radius:24px;
  color:#fff;
  text-decoration:none;
  background:
    radial-gradient(circle at 88% 8%,rgba(121,207,239,.24) 0 14%,transparent 14.5%),
    linear-gradient(125deg,#0c2e67 0%,#174f88 58%,#178fc1 100%);
  box-shadow:0 18px 42px rgba(16,48,92,.18);
  transition:transform .25s ease,box-shadow .25s ease;
}
.www26-ticket-banner:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 48px rgba(16,48,92,.25);
}
.www26-ticket-art{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 34px;
  background:#fff;
}
.www26-ticket-art img{
  display:block;
  width:100%;
  max-width:620px;
  height:auto;
  object-fit:contain;
  object-position:center;
}
.www26-ticket-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:34px 40px 34px 36px;
}
.www26-ticket-label{
  display:inline-block;
  margin-bottom:12px;
  padding:5px 13px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:999px;
  background:rgba(255,255,255,.1);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
}
.www26-ticket-copy h2{
  margin:0 0 10px;
  color:#fff;
  font-size:clamp(26px,3vw,37px);
  line-height:1.3;
}
.www26-ticket-copy p{
  margin:0 0 20px;
  color:rgba(255,255,255,.88);
  font-size:13px;
  line-height:1.8;
}
.www26-ticket-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  min-width:190px;
  padding:12px 20px;
  border-radius:10px;
  background:#fff;
  color:#123c74;
  font-size:13px;
  font-weight:800;
  box-shadow:0 8px 20px rgba(0,0,0,.10);
}
.www26-ticket-button b{
  font-size:18px;
  line-height:1;
}
@media(max-width:760px){
  .www26-ticket-banner-section{padding:8px 0 52px}
  .www26-ticket-container{width:min(100% - 32px,1120px)}
  .www26-ticket-banner{
    grid-template-columns:1fr;
    min-height:0;
    border-radius:18px;
  }
  .www26-ticket-art{padding:22px 18px}
  .www26-ticket-art img{
    width:100%;
    max-width:100%;
    height:auto;
  }
  .www26-ticket-copy{padding:24px 22px 26px}
  .www26-ticket-copy h2{font-size:25px}
  .www26-ticket-copy p{font-size:12.5px}
  .www26-ticket-button{width:100%}
}