:root{
  --white:#FFFFFF;
  --red:#E60013;
  --navy:#172A88;
  --cream:#FCE6DA;
  --sand:#F7F1EA;
  --pink:#FCEDF4;
  --yellow:#FFF100;
  --orange:#F39800;
  --ink:#231916;
  --gray-dark:#757475;
  --gray-light:#EFEFEF;
  --gray-lighter:#E8E8E8;

  --r-pill:999px;
  --r-photo:20px;
  --r-card:18px;
  --r-frame:24px;

  --sp-1:8px;
  --sp-2:12px;
  --sp-3:16px;
  --sp-4:20px;
  --sp-5:24px;
  --sp-6:32px;

  --border-thin:2px;
  --border-frame:20px;

  --content-w:900px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:"Noto Sans JP",sans-serif;
  font-weight:500;
  line-height:1.7;
  font-size:16px;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;}

.wrap{max-width:var(--content-w);margin:0 auto;padding:0 var(--sp-4);}

section{padding:var(--sp-6) 0;}

h1,h2,h3{margin:0;font-weight:900;}

#keyvisual{max-width:900px;margin:0 auto;padding-top:0;}
.hero-media{position:relative;max-width:900px;margin:0 auto;}
.hero-bg{width:100%;display:block;}
.hero-screen{
  position:absolute;
  left:0;top:45%;
  width:46%;
  z-index:1;
  animation:hero-slide-in .7s cubic-bezier(.16,1,.3,1) both;
}
@keyframes hero-slide-in{
  from{transform:translateX(-100%);opacity:0;}
  to{transform:translateX(0);opacity:1;}
}

.hero-badge{
  position:absolute;
  left:28.6%;top:75.5%;
  width:17%;
  z-index:2;
  animation:hero-bounce-in 1s cubic-bezier(.28,.84,.42,1) .7s both;
}
@keyframes hero-bounce-in{
  0%{transform:translate(-50%,-50%) translateY(-70px);opacity:0;}
  45%{transform:translate(-50%,-50%) translateY(0);opacity:1;}
  60%{transform:translate(-50%,-50%) translateY(-22px);}
  75%{transform:translate(-50%,-50%) translateY(0);}
  87%{transform:translate(-50%,-50%) translateY(-9px);}
  100%{transform:translate(-50%,-50%) translateY(0);}
}

.hero-date{
  position:absolute;
  left:68.6%;top:75.5%;
  width:49%;
  z-index:2;
  animation:hero-pop-in .6s cubic-bezier(.34,1.56,.64,1) 1.7s both;
}
@keyframes hero-pop-in{
  0%{transform:translate(-50%,-50%) scale(.3);opacity:0;}
  70%{transform:translate(-50%,-50%) scale(1.12);opacity:1;}
  100%{transform:translate(-50%,-50%) scale(1);}
}
.hero-caption{
  text-align:center;
  padding:0 var(--sp-4) var(--sp-2);
  margin-top:calc(-13.5% + 20px);
}
.hero-caption h1{
  color:var(--red);
  font-size:clamp(32px,9vw,52px);
  line-height:1.3;
  -webkit-text-stroke:5px var(--white);
  paint-order:stroke fill;
  text-shadow:3px 4px 6px rgba(0,0,0,.35);
  opacity:0;
  transform:translateY(24px);
}
.hero-caption h1.in-view{
  animation:hero-fade-in-up .9s ease-out forwards;
}
@keyframes hero-fade-in-up{
  0%{opacity:0;transform:translateY(24px);}
  100%{opacity:1;transform:translateY(0);}
}

.slash-heading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-3);
  margin-bottom:var(--sp-5);
}
.slash-heading .bar{
  width:36px;height:0;border-top:6px solid var(--red);
  transform:rotate(-60deg);
  flex:none;
}
.slash-heading .bar:first-child{
  transform:rotate(60deg);
}
.slash-heading h2{
  font-size:clamp(20px,5vw,28px);
  text-align:center;
  color:var(--ink);
}
.slash-heading h2 em{
  font-style:normal;
  color:var(--red);
}

.points-strip{
  background:var(--gray-light);
  border:1px solid var(--ink);
  border-radius:var(--r-card);
  padding:var(--sp-5) var(--sp-3);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}
.points-strip a{
  text-decoration:none;
  color:inherit;
  padding:0 var(--sp-2);
  border-left:1px dashed var(--gray-dark);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:var(--sp-2);
}
.points-strip a:first-child{border-left:none;}
.point-badge{
  width:56px;height:56px;border-radius:var(--r-pill);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--white);flex:none;
}
.point-badge.black{background:var(--ink);}
.point-badge.red{background:var(--red);}
.point-badge .label{font-size:9px;font-weight:700;letter-spacing:.05em;}
.point-badge .num{font-size:18px;font-weight:900;line-height:1;}
.points-strip p{margin:0;font-size:12px;font-weight:700;}
.points-strip p.note{font-size:10px;font-weight:500;margin-top:4px;}

@media (max-width:600px){
  .points-strip{grid-template-columns:repeat(2,1fr);gap:var(--sp-4) 0;}
  .points-strip a{border-left:none;}
  .points-strip a:nth-child(odd){border-right:1px dashed var(--gray-dark);}
}

.point-section-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:var(--sp-2);
  margin-bottom:var(--sp-2);
}
.point-section-head h2{
  font-size:clamp(22px,5.5vw,30px);
}
.point-section-head h2 .hl{
  position:relative;
  color:var(--red);
  white-space:nowrap;
}
.point-section-head h2 .hl::before{
  content:"";
  position:absolute;
  left:-4px;right:-4px;bottom:2px;
  height:38%;
  background:var(--yellow);
  z-index:-1;
  transform:scaleX(0);
  transform-origin:left;
}
.point-section-head h2 .hl.marker-in::before{
  animation:hl-marker-draw 1.2s ease-out forwards;
}
@keyframes hl-marker-draw{
  to{transform:scaleX(1);}
}
.point-section-head h2 .sub-label{
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  margin-left:var(--sp-1);
}

.lead-blue{
  color:var(--navy);
  font-weight:700;
  font-size:15px;
  text-align:center;
  margin:0 0 var(--sp-3);
}

.body-box{
  background:var(--gray-light);
  border:1px solid var(--ink);
  border-radius:var(--r-card);
  padding:var(--sp-4);
  font-size:14px;
  margin-bottom:var(--sp-4);
}
.body-box p{margin:0;}

.icon-line{
  display:flex;
  gap:var(--sp-3);
  align-items:flex-start;
  font-size:14px;
  margin-bottom:var(--sp-3);
}
.icon-line svg{flex:none;width:40px;height:40px;color:var(--ink);}
.note{font-size:12px;color:var(--gray-dark);margin:var(--sp-2) 0 0;}
.pay-group .note{font-size:10px;margin-top:4px;}

.photo-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-3);
}
.photo-card{display:flex;flex-direction:column;gap:var(--sp-2);}
.photo{
  border-radius:var(--r-photo);
  aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;letter-spacing:.1em;color:var(--gray-dark);
}
.photo.tone-cream{background:var(--cream);}
.photo.tone-pink{background:var(--pink);}
.photo.tone-gray{background:var(--gray-light);}
.photo-img{
  width:100%;
  display:block;
  border-radius:var(--r-photo);
}
.speech{
  position:relative;
  background:var(--white);
  border:var(--border-thin) solid var(--ink);
  border-radius:var(--r-pill);
  padding:var(--sp-1) var(--sp-3);
  font-size:12px;
  font-weight:700;
  text-align:center;
}

.pay-table{
  width:100%;
  background:var(--white);
  border-collapse:collapse;
  font-size:13px;
  margin-top:var(--sp-3);
}
.pay-table th,.pay-table td{
  border:1px solid var(--gray-lighter);
  padding:var(--sp-2);
  text-align:left;
}
.pay-table th{background:var(--gray-light);font-weight:700;}
.chip{
  display:inline-block;
  background:var(--gray-light);
  border-radius:var(--r-pill);
  padding:4px 12px;
  font-size:12px;
  font-weight:700;
  margin:2px 4px 2px 0;
}
.pay-group{margin-bottom:var(--sp-2);}
.pay-group:last-child{margin-bottom:0;}
.pay-logos{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-top:4px;
}
.pay-logos img{
  height:20px;
  width:auto;
  display:block;
}

.pill-banner{
  display:inline-block;
  background:var(--red);
  color:var(--white);
  border-radius:var(--r-pill);
  padding:var(--sp-1) var(--sp-4);
  font-weight:900;
  font-size:14px;
  margin-bottom:var(--sp-2);
}
.fee-note{font-weight:700;font-size:13px;margin:0 0 var(--sp-4);}
.fee-block{text-align:center;}

.benefit-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-3);
}
.benefit-card{
  background:var(--pink);
  border:var(--border-thin) solid var(--ink);
  border-radius:var(--r-card);
  padding:var(--sp-4);
}
.benefit-card.wide{grid-column:1 / -1;}
.benefit-head{
  display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2);
}
.num-badge{
  width:32px;height:32px;border-radius:var(--r-pill);
  background:var(--red);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:15px;flex:none;
}
.benefit-head h3{font-size:15px;}
.mark-note{font-size:11px;font-weight:500;margin-left:2px;}
.benefit-card p{margin:0;font-size:13px;}
.benefit-card p.note{font-size:11px;margin-top:var(--sp-2);}
.benefit-body{display:flex;gap:var(--sp-2);align-items:flex-start;}
.benefit-icon{width:60px;flex:none;}

#campaign,.campaign-box{
  background:var(--red);
  color:var(--white);
  border-radius:var(--r-frame);
  max-width:var(--content-w);
  margin:0 auto var(--sp-6);
  text-align:center;
}
#campaign .wrap,.campaign-box .wrap{padding:var(--sp-6) var(--sp-4);}
.campaign-badge{
  position:relative;
  display:inline-block;
  font-weight:700;
  font-size:clamp(16px,4.5vw,20px);
  margin-bottom:var(--sp-2);
}
.campaign-badge::after{
  content:"";
  position:absolute;
  left:-4px;right:-4px;bottom:2px;
  height:35%;
  background:var(--yellow);
  z-index:-1;
  transform:scaleX(0);
  transform-origin:left;
}
.campaign-badge.marker-in::after{
  animation:campaign-marker-flick .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes campaign-marker-flick{
  to{transform:scaleX(1);}
}
.campaign-title{
  display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
  margin-bottom:var(--sp-2);
}
.campaign-title .slash{width:22px;height:0;border-top:5px solid var(--white);transform:rotate(-60deg);}
.campaign-title .slash:first-child{transform:rotate(60deg);}
.campaign-title h2{font-size:clamp(26px,7vw,34px);color:var(--white);}
.campaign-big{
  font-size:clamp(30px,9vw,46px);
  font-weight:900;
  color:var(--yellow);
  margin:var(--sp-2) 0;
  line-height:1.2;
  animation:campaign-pulse 2.2s ease-in-out infinite;
}
@keyframes campaign-pulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.1);}
}
.campaign-sub{font-size:clamp(15px,4vw,18px);margin:0 0 var(--sp-4);}
.btn{
  display:inline-block;
  background:var(--white);
  color:var(--ink);
  border:var(--border-thin) solid var(--ink);
  border-radius:var(--r-card);
  padding:var(--sp-2) var(--sp-5);
  font-weight:900;
  font-size:15px;
  text-decoration:none;
  transition:transform .2s ease-out;
}
.btn:hover{
  transform:scale(1.08);
}

.info-box{
  background:var(--white);
  border-radius:var(--r-frame);
  padding:var(--sp-4);
  margin-top:var(--sp-4);
  text-align:left;
}
.info-headline{
  color:var(--orange);
  font-weight:900;
  margin:0;
  line-height:1.4;
}
.info-headline.small{font-size:15px;text-align:center;}
.info-headline.big{font-size:clamp(20px,5.5vw,26px);margin-top:2px;text-align:center;}
.info-body{
  color:var(--ink);
  font-size:13px;
  margin:var(--sp-2) 0 0;
}
.info-body .em-red{color:var(--red);font-weight:900;}
.info-body a{color:var(--red);font-weight:700;text-decoration:underline;}

.howto-card{
  border:var(--border-thin) solid var(--ink);
  border-radius:var(--r-frame);
  overflow:hidden;
}
.howto-head{
  background:var(--ink);
  color:var(--white);
  padding:var(--sp-3) var(--sp-4);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--sp-2);
  text-align:center;
}
.howto-head h3{font-size:16px;}
.howto-head p{margin:0;font-size:12px;font-weight:500;}
.howto-body{padding:var(--sp-4);background:var(--white);}
.howto-body p{font-size:13px;margin:0 0 var(--sp-3);}
.howto-info-row{
  display:flex;
  gap:var(--sp-4);
  align-items:flex-start;
  margin-bottom:var(--sp-4);
}
.howto-info-row p{flex:1;min-width:0;}
.howto-pay-col{
  display:flex;
  gap:var(--sp-3);
  flex:1;
  min-width:0;
}
.howto-pay-col .pay-group{flex:1;min-width:0;}

@media (max-width:600px){
  .howto-info-row{flex-direction:column;}
  .howto-pay-col{flex-direction:column;}
}
.howto-body .btn{
  display:block;
  width:fit-content;
  margin:0 auto var(--sp-3);
}
.howto-body .note{margin-top:var(--sp-2);}

.frame{
  background:var(--red);
  border-radius:var(--r-frame);
  padding:var(--border-frame);
}
.frame-inner{
  background:var(--white);
  border-radius:calc(var(--r-frame) - 8px);
  padding:var(--sp-5) var(--sp-4);
}

.table-tag{
  display:inline-block;
  background:var(--red);
  color:var(--white);
  font-weight:700;
  font-size:13px;
  padding:2px 14px;
  margin-bottom:var(--sp-3);
}

.price-table{width:100%;border-collapse:collapse;font-size:14px;}
.price-table th,.price-table td{
  border:1px solid var(--gray-lighter);
  padding:var(--sp-2) var(--sp-2);
}
.price-table th{font-weight:700;}
.price-table thead th:first-child{background:var(--gray-light);}
.price-table thead th:nth-child(2){background:var(--gray-light);}
.price-table thead th:nth-child(3){background:var(--gray-light);}
.price-table thead th:last-child{background:var(--gray-dark);color:var(--white);}
.price-table td.old{color:var(--gray-dark);text-align:center;}
.price-table td.arrow{color:var(--red);text-align:center;width:24px;}
.price-table td.new{color:var(--navy);font-weight:900;text-align:center;}
.table-scroll{overflow-x:auto;}
.price-table-caption{font-size:11px;color:var(--gray-dark);margin-top:var(--sp-2);text-align:right;}

.member-price-box{
  background:var(--cream);
  border:var(--border-thin) solid var(--ink);
  border-radius:var(--r-card);
  padding:var(--sp-4);
  margin:var(--sp-4) 0;
  text-align:center;
}
.member-price-row{
  margin-bottom:var(--sp-2);
}
.member-price-box .label-main{font-weight:900;font-size:20px;margin:0;}
.member-price-box .label-line{
  font-weight:700;font-size:14px;margin:4px 0 0;
  white-space:nowrap;
}
.member-price-box .price{color:var(--red);font-weight:900;font-size:24px;}
.member-price-box .price-label{color:var(--red);font-weight:900;font-size:15px;}
.member-price-box .cond{font-size:12px;margin:0;}

.discount-table{width:100%;border-collapse:collapse;font-size:13px;}
.discount-table th,.discount-table td{
  border:1px solid var(--gray-lighter);
  padding:var(--sp-2);
}
.discount-table thead th{background:var(--red);color:var(--white);}
.discount-table td.old{color:var(--gray-dark);text-align:center;}
.discount-table td.arrow{color:var(--red);text-align:center;width:20px;}
.discount-table td.new{color:var(--red);font-weight:900;text-align:center;}
.discount-table td.gain{color:var(--red);font-weight:900;text-align:center;}
.discount-table th:nth-child(2),.discount-table td:nth-child(2){border-right:none;}
.discount-table th:nth-child(3),.discount-table td:nth-child(3){border-left:none;border-right:none;}
.discount-table th:nth-child(4),.discount-table td:nth-child(4){border-left:none;}
.always-pill{
  display:inline-block;background:var(--red);color:var(--white);
  border-radius:var(--r-pill);font-size:11px;font-weight:700;
  padding:1px 10px;margin-left:4px;
}

#footer{
  background:var(--white);
  padding-top:0;
}
.footer-top{
  display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:center;padding:var(--sp-5) 0;
}
.footer-info{flex:1;min-width:220px;}
.footer-info .tag{color:var(--red);font-weight:700;font-size:13px;}
.footer-info .logo{color:var(--red);font-weight:900;font-size:clamp(22px,6vw,30px);margin:var(--sp-1) 0;}
.footer-info address{font-style:normal;font-size:13px;margin-bottom:var(--sp-2);}
.footer-phone{display:flex;align-items:center;gap:var(--sp-2);}
.footer-phone svg{width:22px;height:22px;color:var(--ink);}
.footer-phone .num{font-weight:900;font-size:22px;}
.footer-phone-note{font-size:11px;color:var(--gray-dark);margin-left:30px;}
.footer-photo{width:160px;flex:none;}
.footer-band{height:var(--border-frame);background:var(--red);}

.section-title-block{text-align:center;margin-bottom:var(--sp-5);}
.section-title-block h2{font-size:clamp(20px,5vw,26px);}
.section-title-block .en{display:block;font-size:11px;letter-spacing:.15em;color:var(--gray-dark);font-weight:700;margin-bottom:var(--sp-1);}