@charset "UTF-8";
/* CSS Document */

/*-------------------------- PC、SP共通--------------------------*/
:root{
  --yellow:#f7c500;
  --yellow-soft:#ffd84d;
  --black:#0b0b0b;
  --text:#111;
  --muted:#666;
  --white:#fff;
  --card:#f7f7f7;
  --line:#e8e8e8;
  --blue-bg:#dce9ee;
  --danger:#ea4b54;
  --shadow:0 12px 30px rgba(0,0,0,.12);
  --radius:24px;
  --container:1100px;
}

*{box-sizing:border-box}

/*html{
  scroll-behavior:smooth;
}*/

/*body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic","Meiryo",sans-serif;
  color:var(--text);
  line-height:1.7;
  background:#fff;
}*/

.lp-content img{
  max-width:100%;
  display:block;
}

.lp-content a{
  text-decoration:none;
  color:inherit;
}

.lp-content{
  overflow:hidden;
}

.lp-container{
  /*width:min(calc(100% - 32px), var(--container));*/
  margin-inline:auto;
	width: 920px;
}

.container--narrow{
  width:min(calc(100% - 32px), 860px);
}

.container--text{
  width:min(calc(100% - 32px), 980px);
}

/* Hero */
.hero{
  background:
    radial-gradient(circle at 50% 53%, rgba(255,255,255,.30), rgba(255,255,255,0) 28%),
    linear-gradient(180deg, #060606 0%, #111111 100%);
  color:var(--white);
  padding:40px 0 70px;
}

.hero__inner{
  max-width:920px;
}

.hero__brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}

.hero__brand-badge{
  background:var(--yellow);
  color:#222;
  font-weight:800;
  font-size:12px;
  padding:4px 8px;
  border-radius:4px;
}

.hero__brand-name{
  font-weight:800;
  letter-spacing:.02em;
}

.hero__title{
  margin:0 0 10px;
  font-size:clamp(2rem, 4vw, 3rem);
  line-height:1.2;
  font-weight:800;
	text-align: center;
	color: #fff;
}

.hero__lead{
  margin:0;
  font-size:clamp(1rem, 2.2vw, 1.5rem);
  color:rgba(255,255,255,.95);
	text-align: center;
	
}

.hero__lead strong{
  color:var(--yellow-soft);
	font-size: 2rem;
	background:linear-gradient(#ffe88e,#ffcc00);
	-webkit-background-clip:text;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
}

.hero__visual{
  width:min(100%, 320px);
  margin:50px auto;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.4));
}

.hero__cta-wrap{
  text-align:center;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:0 26px;
  border-radius:14px;
  font-weight:800;
  transition:.2s ease;
	font-size: 1.6rem
}

.btn--primary{
  background:var(--yellow);
  color:#111;
  box-shadow:0 8px 18px rgba(0,0,0,.2);
}

.btn--primary:hover{
  transform:translateY(-1px);
  filter:brightness(1.02);
	color: #fff;
}

/* Section common */
.section-title{
  text-align:center;
  margin:0 0 28px;
  font-size:clamp(2rem, 3.4vw, 2.8rem);
  line-height:1.25;
  font-weight:900;
}

.section-title--dark{
  color:#111;
}

.center{
  text-align:center;
}

/* Campaign */
.campaign{
  background:var(--yellow);
  padding:56px 0 72px;
}

.stack{
  display:grid;
  gap:28px;
}

.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.card__body{
  padding:28px;
}

/* Coupon */
.eyebrow{
  margin:0 0 10px;
  font-size:clamp(1.3rem, 2vw, 2.4rem);
  font-weight:800;
  line-height:1.4;
}

.eyebrow small{
  font-size:.55em;
  font-weight:700;
}
.discount {
	
}
.discount p{
  font-weight:900;
  line-height:1;
  letter-spacing:-.04em;
  color:var(--danger);
  font-size:clamp(3.8rem, 10vw, 6rem);
  margin-bottom:18px;
	background:linear-gradient(#f2595a,#dd3738);
	-webkit-background-clip:text;
	-webkit-text-fill-color: transparent;
}

.discount p span{
  font-size:.7em;
  letter-spacing:-.02em;
	font-weight: bold;
}

.coupon-code{
  display:inline-flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:6px;
  background:#111;
  color:#fff;
  padding:12px 16px;
  font-size:clamp(1rem, 2vw, 1.25rem);
  font-weight:800;
}
.coupon-code span {
	color: #fff;
	font-weight: bold;
}
.coupon-code strong{
  color:var(--yellow);
  font-size:1.6em;
  line-height:1;
	background:linear-gradient(#ffe88e,#ffcc00);
	-webkit-background-clip:text;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
}

/* Option */
.option-title{
  margin:0;
  font-size:clamp(1.8rem, 3vw, 2.4rem);
  line-height:1.3;
  font-weight:900;
}

.option-subtitle{
  margin:4px 0 0;
  font-size:clamp(1rem, 2vw, 1.35rem);
  font-weight:700;
}

.option-note{
  margin:4px 0 0;
  color:var(--muted);
  font-size:.95rem;
}

.option-grid{
  margin-top:26px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}

.option-item{
  text-align:center;
}

.option-item img{
  width:100%;
  aspect-ratio:1 / 0.72;
  object-fit:contain;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px;
}

.option-item p{
  margin:8px 0 0;
  font-size:.88rem;
  line-height:1.5;
}

/* Simulation */
.simulation{
  background:var(--blue-bg);
  padding:56px 0 72px;
}

.sim-lead{
  text-align:center;
  margin:-10px 0 22px;
  color:#333;
  font-size:.98rem;
}

.price-box{
  background:#fff;
  border-radius:18px;
  padding:18px 20px;
  box-shadow:var(--shadow);
}

.price-box + .price-box{
  margin-top:50px;
}

.price-box--regular{
  max-width:780px;
  margin-inline:auto;
  text-align:center;
}

.price-label{
  display:inline-block;
  background:#3a3a3a;
  color:#fff;
  font-weight:800;
  padding:6px 14px;
  border-radius:8px;
  margin-bottom:12px;
}

.price-formula{
  margin:0;
  font-size:clamp(1.2rem, 2.3vw, 2rem);
  line-height:1.5;
  font-weight:700;
}

.price-formula strong{
  font-size:1.15em;
  color:#111;
	font-weight: bold;
}

.price-box--campaign{
  max-width:780px;
  margin-inline:auto;
  border:5px solid #efc74c;
  text-align:center;
}
.campaign-badge {
	background: #000;
	display: inline-block;
	border-radius: 8px;
	padding: 5px 0;
	margin-bottom: 10px;
}
.campaign-badge p {
  display:inline-block;
  background:#2f2f2f;
  color:var(--yellow);
  font-weight:900;
  padding:8px 14px;
  border-radius:8px;
	font-size: 24px;
	background:linear-gradient(#ffe88e,#ffcc00);
	-webkit-background-clip:text;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
}

.campaign-copy{
  margin:0;
  font-size:clamp(1.15rem, 2.3vw, 1.7rem);
  font-weight:700;
  line-height:1.5;
}

.campaign-copy strong{
  color:var(--danger);
	    font-size: clamp(1.35rem, 2.8vw, 2rem);
    font-weight: 900;
}

.campaign-copy--red{
  color:var(--danger);
  font-size:clamp(1.35rem, 2.8vw, 2rem);
  font-weight:900;
}

.final-price{
  margin:10px 0 0;
  font-size:clamp(1.2rem, 2.2vw, 1.6rem);
  color:#222;
}

.final-price strong{
  display:block;
  color:var(--danger);
  font-size:clamp(3rem, 8vw, 4.4rem);
  line-height:1.05;
  letter-spacing:-.04em;
	font-weight: bold;
}

/* Merit */
.merit{
  background:#f8f8f8;
  padding:56px 0 84px;
}

.merit p{
  margin:0;
  color:#444;
  font-size:16px;
	line-height: 1.6;
}

.bottom-cta{
  text-align:center;
  margin-top:38px;
}

/* Responsive */
@media (max-width: 860px){
  .campaign{
    padding:48px 0 60px;
  }

  .card__body{
    padding:22px;
  }

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

@media (max-width: 560px){
  .lp-container{
    width:min(calc(100% - 24px), var(--container));
  }

  .hero{
    padding:16px 0 28px;
  }

  .btn{
    width:100%;
  }

  .option-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:14px;
  }

  .option-item p{
    font-size:.8rem;
  }

  .price-box{
    padding:16px 14px;
  }

  .price-formula{
    font-size:1rem;
    line-height:1.6;
  }

  .price-formula strong{
    display:block;
    font-size:2rem;
    margin-top:4px;
  }

  .merit{
    padding-bottom:64px;
  }
}



/*--------------------------SP用スタイル--------------------------*/
@media only screen and (max-width:639px){
  
    
    
}













/*--------------------------PC用スタイル--------------------------*/
@media print, screen and (min-width:640px) {
    
    
    
    
    
    
    
    
    
    
}