/* ===== 共通スタイル ===== */
*{box-sizing:border-box;}
body{margin:0;display:flex;flex-direction:column;min-height:100vh;font-family:'Noto Sans JP',sans-serif;color:#1c1e24;line-height:1.6;}
img{max-width:100%;}
html{scroll-behavior:smooth;}
.lp-pic{display:block;}
.lp-imglink{display:block;text-decoration:none;color:inherit;transition:opacity .2s;}
.lp-imglink:hover{opacity:.85;}
.lp-img{display:block;width:100%;height:auto;border-radius:6px;}
.lp-inner{margin:0 auto;}
.lp-h2{font-weight:700;margin:0 0 12px;}
.lp-text{line-height:1.9;margin:0;}
.lp-sec .ta-left{text-align:left;}
.lp-sec .ta-center{text-align:center;}
.lp-sec .ta-right{text-align:right;}
.lp-h2:last-child,.lp-hero-title:last-child,.lp-hero-sub:last-child{margin-bottom:0;}

/* ボタン */
.lp-btn{display:inline-block;padding:13px 30px;border-radius:6px;font-size:16px;font-weight:600;text-decoration:none;text-align:center;transition:background-color .15s,color .15s;}
.lp-btn-sm{padding:12px 26px;font-size:16px;}

/* ヒーロー */
.lp-hero-frame{margin:0 auto;}
.lp-hero-media{position:relative;border-radius:6px;overflow:hidden;}
.lp-hero-media .lp-img{border-radius:0;}
.lp-hero-media.no-image{border-radius:0;overflow:visible;}
.lp-hero-media.no-image .lp-hero-text{position:static;padding:0;}
.lp-hero-overlay{position:absolute;inset:0;background:rgba(10,12,20,.42);}
.lp-hero-text{position:absolute;inset:0;display:flex;flex-direction:column;padding:36px;}
.lp-hero-inner{max-width:480px;}
.lp-hero-title{font-weight:900;line-height:1.35;margin:0 0 12px;}
.lp-hero-sub{line-height:1.8;margin:0 0 18px;}
.lp-hero-text.pos-top-left{justify-content:flex-start;align-items:flex-start;text-align:left;}
.lp-hero-text.pos-top-center{justify-content:flex-start;align-items:center;text-align:center;}
.lp-hero-text.pos-top-right{justify-content:flex-start;align-items:flex-end;text-align:right;}
.lp-hero-text.pos-center-left{justify-content:center;align-items:flex-start;text-align:left;}
.lp-hero-text.pos-center{justify-content:center;align-items:center;text-align:center;}
.lp-hero-text.pos-center-right{justify-content:center;align-items:flex-end;text-align:right;}
.lp-hero-text.pos-bottom-left{justify-content:flex-end;align-items:flex-start;text-align:left;}
.lp-hero-text.pos-bottom-center{justify-content:flex-end;align-items:center;text-align:center;}
.lp-hero-text.pos-bottom-right{justify-content:flex-end;align-items:flex-end;text-align:right;}

/* CTA */
.lp-cta .lp-inner{text-align:center;}
.lp-cta-btnwrap{display:flex;justify-content:center;}

/* 画像のみ */
.lp-figure{margin:0 auto;}
.lp-caption{text-align:center;font-size:16px;margin-top:10px;}

/* 画像+テキスト（縦） */
.lp-stack{display:flex;flex-direction:column;}
.lp-stack .lp-media{margin-bottom:18px;}
.lp-stack.pos-bottom .lp-media{order:2;margin:18px 0 0;}
.lp-stack .lp-media:only-child{margin:0;}
.lp-imgtextv .lp-h2{margin-bottom:10px;}

/* 画像+テキスト（左右） */
.img50wrap{display:flex;gap:48px;align-items:center;}
.img50wrap.side-right{flex-direction:row-reverse;}
.img50wrap .img50col{flex:1;min-width:0;}

/* カラム */
.colswrap{display:flex;gap:24px;flex-wrap:wrap;}
.colswrap + .colswrap{margin-top:28px;}
.lp-col{flex:1;min-width:0;}
.lp-col .lp-text{line-height:1.8;}
.lp-col-caption{font-size:16px;text-align:center;margin-top:8px;}

/* FAQ */
.faq-list{display:flex;flex-direction:column;}
.faq-item{border-bottom:1px solid #e3e5ec;padding:16px 0;}
.faq-item:first-child{border-top:1px solid #e3e5ec;}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:700;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item .faq-q{flex:1;min-width:0;}
.faq-item summary::marker{content:'';}
.faq-item .faq-icon{flex:none;width:20px;height:20px;position:relative;}
.faq-item .faq-icon::before,.faq-item .faq-icon::after{content:'';position:absolute;background:currentColor;top:50%;left:50%;transform:translate(-50%,-50%);}
.faq-item .faq-icon::before{width:12px;height:2px;}
.faq-item .faq-icon::after{width:2px;height:12px;transition:transform .2s;}
.faq-item[open] .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg) scale(0);}
.faq-item .faq-a{margin:12px 0 0;line-height:1.9;}
.faq-item summary:only-child .faq-icon{visibility:hidden;}

/* ===== セクションごとのスタイル ===== */
/* セクション1：ヒーロー */
.sec-01{background:#ffffff;padding:24px max(48px, calc((100% - 1200px) / 2 + 48px)) 24px;}
.sec-01 .lp-hero-frame{width:80%;}
.sec-01 .lp-hero-title{font-size:32px;font-family:'Noto Sans JP', sans-serif;color:#fff;}
.sec-01 .lp-hero-sub{font-size:16px;color:#e6e7f0;}
.sec-01 .lp-btn{background:#3454d1;color:#ffffff;}
.sec-01 .lp-btn:hover{background:#2740a8;color:#ffffff;}

/* セクション2：文章のみ */
.sec-02{background:#ffffff;padding:20px max(48px, calc((100% - 1200px) / 2 + 48px)) 10px;text-align:center;}
.sec-02 .lp-inner{width:70%;margin:0 auto;}
.sec-02 .lp-h2{font-size:23px;font-family:'Noto Sans JP', sans-serif;color:#1c1e24;}
.sec-02 .lp-text{font-size:16px;color:#5b5f6b;}

/* セクション3：3カラム */
.sec-03{background:#ffffff;padding:10px max(48px, calc((100% - 1200px) / 2 + 48px)) 30px;}
.sec-03 .lp-inner{width:80%;}
.sec-03 .lp-text{font-size:17px;color:#5b5f6b;}
.sec-03 .lp-col-caption{color:#5b5f6b;}

/* セクション4：文章のみ（クーポンコードエリア） */
.sec-04{background:#fff4ea;padding:56px max(48px, calc((100% - 1200px) / 2 + 48px)) 56px;text-align:center;}
.sec-04 .lp-inner{width:70%;margin:0 auto;}
.sec-04 .lp-h2{font-size:28px;font-family:'Noto Sans JP', sans-serif;color:#1c1e24;}
.sec-04 .lp-text{margin-top:24px;}
/* クーポンコードを目立たせるチケット風デザイン */
.sec-04 .coupon-box {
  display: inline-block;
  background: #ffffff;
  color: #c29643;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 2px;
  padding: 16px 40px;
  border: 2px dashed #c29643;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* セクション5：画像のみ */
.sec-05{background:#ffffff;padding:56px max(48px, calc((100% - 1200px) / 2 + 48px)) 40px;}
.sec-05 .lp-inner{width:40%;}
.sec-05 .lp-caption{color:#5b5f6b;}

/* セクション6：文章のみ */
.sec-06{background:#ffffff;padding:56px max(48px, calc((100% - 1200px) / 2 + 48px)) 56px;text-align:left;}
.sec-06 .lp-inner{width:60%;margin:0 auto;}
.sec-06 .lp-h2{font-size:23px;font-family:'Noto Sans JP', sans-serif;color:#1c1e24;}
.sec-06 .lp-text{font-size:16px;color:#5b5f6b;}

/* セクション7：文章のみ */
.sec-07{background:#ffffff;padding:56px max(48px, calc((100% - 1200px) / 2 + 48px)) 65px;text-align:left;}
.sec-07 .lp-inner{width:60%;margin:0 auto;}
.sec-07 .lp-h2{font-size:23px;font-family:'Noto Sans JP', sans-serif;color:#1c1e24;}
.sec-07 .lp-text{font-size:16px;color:#5b5f6b;}

/* セクション8：フッター */
.sec-08{background:#15171c;color:#fff;padding:0 max(0px, calc((100% - 1200px) / 2));}

/* ===== 最下部CTA（対象商品並び）のスタイル ===== */
.sec-bottom-list {
  background: #f8f9fa;
  padding: 56px 24px;
}
.sec-bottom-list .lp-inner-wide {
  max-width: 1000px;
  margin: 0 auto;
}
.sec-bottom-list .cta-header {
  text-align: center;
  margin-bottom: 32px;
}
.sec-bottom-list .cta-header h3 {
  font-size: 22px;
  color: #333;
  margin-bottom: 8px;
  font-weight: bold;
}
.sec-bottom-list .cta-header p {
  font-size: 14px;
  color: #555;
}
.sec-bottom-list .coupon-code {
  font-size: 16px;
  color: #c29643;
  background: #ffffff;
  padding: 2px 8px;
  border: 1px dashed #c29643;
  border-radius: 2px;
}

/* PC用：3列の横並び設定 */
.sec-bottom-list .lp-list-container {
  display: flex;
  flex-direction: row;
  gap: 24px;
  justify-content: center;
}

/* 個別の商品カード */
.sec-bottom-list .lp-list-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #ffffff;
  padding: 32px 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  border: 1px solid #eeeeee;
  transition: transform 0.2s;
  flex: 1;
}
.sec-bottom-list .lp-list-item:hover {
  transform: translateY(-2px);
}

/* PC用：画像サイズ */
.sec-bottom-list .lp-list-pic {
  width: 100%;
  max-width: 180px;
  margin: 0 auto 20px;
}
.sec-bottom-list .lp-list-pic img {
  width: 100%;
  height: auto;
  display: block;
}

/* テキストエリア */
.sec-bottom-list .lp-list-text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
}
.sec-bottom-list .product-name {
  font-weight: bold;
  font-size: 18px;
  color: #333333;
  margin-bottom: 4px;
}
.sec-bottom-list .product-spec {
  font-size: 13px;
  color: #888888;
  margin-bottom: 8px;
}
.sec-bottom-list .product-desc {
  font-size: 14px;
  color: #444444;
  line-height: 1.5;
  margin-bottom: 24px;
}
.sec-bottom-list .highlight-text {
  color: #d9534f;
  font-weight: bold;
}

/* ボタンエリア */
.sec-bottom-list .lp-list-btnwrap {
  width: 100%;
  margin-top: auto;
}
.sec-bottom-list .lp-btn-gold {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: #d8aa55;
  color: #ffffff;
  padding: 14px 10px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  font-size: 15px;
  transition: 0.3s;
}
.sec-bottom-list .lp-btn-gold:hover {
  background: #c29643;
  color: #ffffff;
}


/* ===== スマホ表示（768px以下）での上書き設定 ===== */
@media (max-width:768px){
  .lp-sec .lp-inner{width:100%;}
  .lp-sec .lp-hero-frame{width:100%;}
  .colswrap{gap:16px;}
  .colswrap > .lp-col{flex:1 1 100%;}
  .img50wrap{flex-direction:column;align-items:stretch;gap:20px;}
  .img50wrap.side-right{flex-direction:column-reverse;}
  
  .sec-01{padding:5px 5px 5px;}
  .sec-01 .lp-hero-title{font-size:28px;}
  .sec-02{padding:20px 5px 10px;}
  .sec-02 .lp-h2{font-size:23px;}
  .sec-03{padding:10px 50px 30px;}
  
  /* クーポンコード（スマホ表示） */
  .sec-04{padding:27px 20px 27px;}
  .sec-04 .lp-h2{font-size:22px;}
  .sec-04 .coupon-box {
    font-size: 26px;
    padding: 12px 24px;
  }
  
  .sec-05{padding:30px 10px 10px;}
  .sec-06{padding:30px 20px 5px;}
  .sec-06 .lp-h2{font-size:23px;}
  .sec-07{padding:30px 20px 40px;}
  .sec-07 .lp-h2{font-size:20px;}

  /* 最下部CTA（スマホ表示：縦積みに変更） */
  .sec-bottom-list .lp-list-container {
    flex-direction: column;
    gap: 16px;
  }
  .sec-bottom-list .lp-list-item {
    padding: 24px 16px;
  }
  .sec-bottom-list .lp-list-pic {
    max-width: 140px;
    margin-bottom: 16px;
  }
  .sec-bottom-list .product-desc {
    font-size: 13px;
    margin-bottom: 16px;
  }
}