@charset "utf-8";

/* =======================================

	campaign2027

======================================= */
  :root{
    /*--base:#FDF8EE;*/
    --base:#f5eddc;
    --white:#Ffffff;
    --primary:#8A3358;
    --primary-light:#CC8294;
    --primary-dark:#6B2745;
    --gold:#DBAF5E;
    --gold-light:#F2DBA0;
    --lavender:#F5EBF6;
    --coral:#DD6152;
    --ink:#453535;
    --muted:#261F1F;
    --font-display:"Shippori Mincho", serif;
    --font-body:"Zen Kaku Gothic New","Yu Gothic",sans-serif;
    --max:768px;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{font-size:16px;}
  body{
    font-family:var(--font-body);
    color:var(--ink);
    background:#FAEED9;
	  background-image: url('/assets/images/campaign2027/cp27_lp_bodybg.png');
    -webkit-font-smoothing:antialiased;
    font-size:16px;
    line-height:1.7;
  }
  .page{
    max-width:var(--max);
    min-width:320px;
    margin:0 auto;
    background:var(--base);
    position:relative;
    box-shadow:0 0 40px rgba(0,0,0,.15);
    padding-bottom:84px; /* スティッキーCTA分の余白 */
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}

  /* ---------- 罫線シグネチャー ---------- */
  .divider{
    display:flex;align-items:center;gap:10px;
    padding:0px 28px 10px;
  }
  .divider::before,.divider::after{
    content:"";flex:1;height:1px;background:var(--gold);
  }
  .divider svg{flex-shrink:0;}
  .divider--tight{padding:0;margin:14px 0;}

  /* ---------- スティッキーCTA ---------- */
  .sticky-cta{
    position:fixed;left:0;right:0;bottom:0;
    max-width:var(--max);min-width:320px;margin:0 auto;
    background:linear-gradient(180deg,var(--primary) 0%, var(--primary-dark) 100%);
    z-index:50;
    box-shadow:0 -4px 16px rgba(0,0,0,.25);
    display:flex;align-items:center;justify-content:center;
    flex-wrap:wrap;
    gap:6px 14px;
    padding:10px 14px;
    box-sizing:border-box;
  }
  .sticky-cta .cta-buy-img{
    display:block;
    width:56%;
    max-width:220px;
    flex-shrink:0;
  }
  .sticky-cta .cta-buy-img img{
    width:100%;height:auto;display:block;
  }
  .sticky-cta .cta-secondary{
    display:flex;align-items:center;gap:3px;
    color:var(--gold-light);
    font-family:var(--font-display);
    font-weight:700;
    letter-spacing:.03em;
    white-space:nowrap;
  }
  .sticky-cta .cta-secondary::after{content:"›";}

  /* ---------- ヒーロー ---------- */
  .hero{
    position:relative;
    color:#fff;
    padding:26px 28px 50px;  /* 20261022 30px → 50px */
    /*min-height:calc(26px + min(100vw, 560px) * 0.4062 + 30px);*/
	min-height:calc(min(100vw, 560px) * 0.44);   /* 20261021 画像と同じ係数に */
    text-align:center;
  }
  .hero .stars{
    position:absolute;inset:0;
    background-image:
      radial-gradient(1.5px 1.5px at 20% 20%, rgba(230,196,140,.5) 50%, transparent 100%),
      radial-gradient(1.5px 1.5px at 70% 15%, rgba(230,196,140,.4) 50%, transparent 100%),
      radial-gradient(2px 2px at 85% 60%, rgba(230,196,140,.35) 50%, transparent 100%),
      radial-gradient(1.5px 1.5px at 30% 75%, rgba(230,196,140,.4) 50%, transparent 100%),
      radial-gradient(2px 2px at 55% 45%, rgba(230,196,140,.3) 50%, transparent 100%);
    pointer-events:none;
  }
  .hero-inner{position:relative;z-index:1;max-width:520px;margin:0 auto;}
  .hero-title-img{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:0;  /* ← 20261021 bottom:30px; → top:0;　に変更 */
    width:100%;
    max-width:560px;
    z-index:0;
    pointer-events:none;
  }
  .hero-title-img img{
    width:100%;
    display:block;
  height:calc(min(100vw, 560px) * 0.44);   /* ← 20261021 追加：表示エリアの縦幅 */
  object-fit:cover;                        /* ← 20261021 追加 */
  object-position:center top;              /* ← 20261021 追加 */
  }
  .hero-title-hidden{
    opacity:0;
  }
  .hero-logo{
    width:130px;margin:0 auto 20px;
    filter:brightness(0) invert(1);
    opacity:.9;
  }
  .hero .eyebrow{
    font-size:15px;letter-spacing:.18em;color:var(--gold-light);
    margin-bottom:12px;
  }
  .hero h1{
    font-family:var(--font-display);
    font-size:clamp(28px, 5vw, 36px);line-height:1.5;font-weight:700;
    margin-bottom:16px;
  }
  .hero p.sub{
    font-size:16.5px;color:#EADFE2;line-height:1;
    max-width:420px;margin:0 auto 2px;
  }
  .hero-nav{
    display:flex;justify-content:center;gap:6px;flex-wrap:wrap;
    padding-top:10px; /* ← 20261021 30px → 10px */
  }
  .hero-nav a{
    border:2px solid var(--gold-light);
    background:linear-gradient(180deg,#Ffffff 0%, var(--gold-light) 55%, #F0CC37 100%); 
    color:var(--primary-dark);
    font-weight:700;
    font-size:14.5px;
    padding:8px 12px;
    border-radius:999px;
    white-space:nowrap;
  }

  /* スマホ表示：タイトル画像を上詰め */
  @media (max-width:560px){
  .sticky-cta{flex-wrap:nowrap;}  /* 20261022 追加 */
  .sticky-cta .cta-secondary{white-space:normal;width:6.1em;line-height:1.35;flex-shrink:0;gap:6px;}  /* 20261022 追加 */
    .hero{
      padding:0px 0 30px;  /* ← 20261021 先頭の10px→0px */
      min-height:0;
    }
    .hero-title-img{
      position:static;
      transform:none;
      width:100%;
      max-width:none;
    }
    .hero-title-img img{
    height:max(40.62vw, calc(28.4vw + 61px));   /* 20261022 49px → 61px（+12px） */
      object-fit:cover;
      object-position:center top;
    }
    .hero .hero-title-hidden{
      position:absolute;
      width:1px;height:1px;
      margin:0;
      overflow:hidden;
      clip:rect(0,0,0,0);
      white-space:nowrap;
    }
    .hero-inner{
      margin-top:-49px;
      padding:0 12px 11px
    }
    .hero-nav{padding-top:0;}
    .hero-nav a{padding:6px 12px;line-height:1.5;}  /* ボタン高さ */
  }
  @media (max-width:350px){
    .hero-title-img img{height:max(40.62vw, calc(28.4vw + 59px));} /* ← 20261021 最後の47px→59px */
    .hero-inner{margin-top:-47px;}
    .hero-nav a{font-size:13.5px;padding:6px 10px;}  /* ボタン高さ */
  }

/* ---------- 画像ボタン（cp27_btn_frame.png／cp25_set_buy.png） ---------- */
  .btn-img{
    display:block;
    width:76%;
    margin:0 auto 20px; /* ボタン下の余白を確保 */
    line-height:0;
  }
  .btn-img img{
    display:block;
    width:100%;
    height:auto;
  }
  button.btn-img{
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
  }
  .btn-img-sm{
    display:inline-block;
    width:100%;
    max-width:260px;
    line-height:0;
  }
  .btn-img-sm img{
    display:block;
    width:100%;
    height:auto;
  }
  /* set1のタイトル画像：枠内（パディング内）で最大サイズに表示 */
  .sd-title-img{
    display:block;
    position:relative;z-index:2;
    width:100%;
    margin-top:16px;
    margin-bottom:4px;
    line-height:0;
  }
  .sd-title-img img{
    display:block;
    width:100%;
    height:auto;
  }

  /* ---------- 無料フォーム ---------- */
  .form-section{
    max-width:560px;
    margin:-30px auto 0;
    position:relative;z-index:2;
    background:#fff;
    border:1.5px solid var(--gold);
    border-radius:14px;
    padding:24px 24px;
    box-shadow:0 10px 24px rgba(90,30,48,.15);
  }
  .form-section h2{
    font-family:var(--font-display);
    font-size:24px;text-align:center;
	  font-weight: bold;/* ← 20261021 追加 */
    color:var(--primary);
    margin-bottom:6px;
  }
  .form-section .lead{
    text-align:center;font-size:14.5px;color:var(--muted);
    margin-bottom:20px;
  }
  .field{margin-bottom:16px;}
  .field label{
    display:block;font-size:14.5px;font-weight:700;
    color:var(--ink);margin-bottom:7px;
  }
  .field input{
    width:100%;
    border:1px solid #D8CFC2;
    background:var(--base);
    border-radius:6px;
    padding:14px 14px;
    font-size:17px;
    font-family:var(--font-body);
  }
  .field input:focus{
    outline:2px solid var(--gold);
    outline-offset:1px;
  }
  .field select{
    width:100%;
    height:auto;
    line-height:1.4;
    border:1px solid #D8CFC2;
    background:var(--base) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%235A1E30" d="M7 10l5 5 5-5z"/></svg>') no-repeat right 14px center;
    background-size:18px;
    border-radius:6px;
    padding:14px 40px 14px 14px;
    font-size:17px;
    font-family:var(--font-body);
    color:var(--ink);
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
  }
  .field select:focus{
    outline:2px solid var(--gold);
    outline-offset:1px;
  }
  .affinity-area{
    display:none;
    background:var(--base);
    border:1px dashed var(--gold);
    border-radius:8px;
    padding:14px;
    margin-bottom:16px;
  }
  .affinity-note{
    font-size:12.5px;color:var(--coral);font-weight:700;line-height:1.6;
    margin-bottom:12px;
  }
  .affinity-note span{font-weight:400;color:var(--muted);}
  .trust-note{
    text-align:center;font-size:13.5px;color:var(--muted);
    margin-top:14px;
  }

  /* ---------- セクション共通 ---------- */
  .section{padding:20px 20px;max-width:720px;margin:0 auto;}

  /* ---------- 指定3セクションの背景色 ---------- */
  #fortune{background:#F4F0F1;max-width:none;width:100%;margin:0;padding-top:36px;}
  #benefit{background:#FAF1DA;max-width:none;width:100%;margin:0;padding-top:36px;}
  #sets{background:#FBEEEF;max-width:none;width:100%;margin:0;padding-top:36px;}

  .section-eyebrow{
    display:flex;align-items:center;justify-content:center;gap:10px;
    font-size:12px;letter-spacing:.18em;color:vasection-eyebrowr(--gold);
    font-weight:700;margin-bottom:10px;
  }
  .section-eyebrow svg{flex-shrink:0;}
  .section-title{
    font-family:var(--font-display);
    font-size:25px;text-align:center;color:var(--primary);/* ← 20261021　25pxに*/
	  font-weight: bold;/* ← 20261021 追加 */
    margin-bottom:14px;
  }
  .title-stars{
    display:flex;align-items:center;justify-content:center;gap:12px;
    margin-bottom:10px;margin-top:10px;
  }
  .title-stars svg{flex-shrink:0;color:var(--primary);}
  .section-lead{
    text-align:center;font-size:17px;color:var(--muted);margin-bottom:20px;
  }

  /* ---------- 比較エリア（画像ベース：上段1枚＋下段3枚） ---------- */
  .compare-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
  }
  .compare-item{
    display:block;
    grid-column:span 1;
    border-radius:10px;
    overflow:hidden;
    transition:opacity .15s ease;
  }
  .compare-item:active{opacity:.85;}
  .compare-item img{
    width:100%;
    display:block;
  }
  .compare-item--top{
    grid-column:1 / -1;
  }

  /* ---------- 詳しく比較する（折りたたみ表） ---------- */
  .compare-toggle{
    text-align:center;margin:16px 0 4px;
	 border: 1px solid #red;
  }
/* ---------- 「各セット内容と特典は？一覧を見る」 ---------- */
.compare-toggle summary{
  display:flex;align-items:center;justify-content:center;position:relative;
  width:100%;max-width:440px;margin:0 auto;min-height:60px;box-sizing:border-box;
  padding:12px 50px 12px 14px;
  border:2px solid var(--primary);border-radius:12px;
  background:linear-gradient(180deg,#fff 0%,#fbeef3 100%);
  box-shadow:0 4px 0 rgba(107,39,69,.28);
  font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--primary-dark);
  line-height:1.35;letter-spacing:.02em;
  transition:transform .12s ease, box-shadow .12s ease;
}
.compare-toggle summary:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(107,39,69,.28);}
.compare-toggle summary::after{
  content:"▼";position:absolute;right:12px;top:50%;
  width:30px;height:30px;margin-top:-15px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--primary);color:#fff;font-size:14px;line-height:1;
  transition:transform .2s;
}
.compare-toggle[open] summary::after{transform:rotate(180deg);}
@media (max-width:767px){
  .compare-toggle summary{font-size:min(20px,5.3vw);letter-spacing:0;line-height:1.4;padding:12px 44px;text-align:center;min-height:76px;}
  .compare-toggle summary::after{right:10px;}
}
@media (max-width:340px){ .compare-toggle summary{font-size:16px;} }
.lp27-scroll-note{margin:14px 2px -8px;font-size:13px;line-height:1.4;color:#7a6a6a;}
@media (min-width:768px){
  .lp27-br-sp{display:none;}
  .lp27-scroll-note{display:none;}
  .compare-toggle summary{font-size:22px;min-height:66px;max-width:540px;margin-top:8px;}
  .compare-toggle summary::after{width:34px;height:34px;margin-top:-17px;font-size:16px;}
}
  .compare-table-wrap{
    margin-top:16px;
    overflow-x:auto;
    border:1px solid var(--lavender);
    /*border-radius:10px;*/ /* --- 0916変更箇所 --- */
    -webkit-overflow-scrolling:touch;
  }
  table.compare-table{
    width:100%;
    min-width:560px;
    border-collapse:collapse;
    font-size:14px;
    background:#fff;
  }
  table.compare-table th,
  table.compare-table td{
    padding:8px 5px;
    text-align:center;
    border:1px solid #D0C4AF;/* --- 0916変更箇所 --- */
    white-space:nowrap;
  }
  table.compare-table thead th{
    background:var(--lavender);
    color:var(--primary);
    font-family:var(--font-display);
    font-weight:700;
    position:sticky;top:0;
  }
  table.compare-table thead th:first-child,
  table.compare-table tbody td:first-child{
    text-align:center;/* --- 0916変更箇所 --- */
    white-space:normal;
    font-weight:700;
    color:var(--ink);
    min-width:140px;
  }
  table.compare-table thead th.rec{
    background:var(--gold-light);
  }
  table.compare-table tbody th{
    text-align:left;
    background:var(--base);
    font-weight:700;
    color:var(--primary);
    font-size:13.5px;
  }
  table.compare-table .yes{color:var(--gold);font-weight:700;}
  table.compare-table .no{color:#C9BEBE;}
  .compare-table-price{
    font-family:var(--font-display);
    font-weight:700;
    color:var(--primary);
    font-size:16px;
  }
  .compare-table-cta{
    display:inline-block;
    margin-top:5px;
    font-size:13px;
    color:#fff;
    background:var(--primary);
    padding:6px 12px;
    border-radius:6px;
  }

  /* ---------- 運気プレビュー（アコーディオン） ---------- */
  .fortune-grid{
    display:grid;grid-template-columns:1fr;gap:12px;
  }
  details.fortune-card{
    background:#fff;
    border:1px solid var(--lavender);
    border-radius:10px;
    overflow:hidden;
  }
  details.fortune-card summary{
    list-style:none;
    display:flex;align-items:center;gap:12px;
    padding:16px 18px;
    font-weight:700;font-size:22.5px;
    color:var(--primary);
    cursor:pointer;
  }
  details.fortune-card summary::-webkit-details-marker{display:none;}
  details.fortune-card summary::after{
    content:"＋";margin-left:auto;color:var(--gold);font-size:19px;
  }
  details.fortune-card[open] summary::after{content:"－";}
  .fortune-icon{
    width:36px;height:36px;border-radius:50%;
    background:var(--lavender);
    display:flex;align-items:center;justify-content:center;
    font-size:17px;flex-shrink:0;
  }
  .fortune-body{
    padding:0 18px 18px;
  }
  .fortune-body p{
    font-size:16px;line-height:1.9;color:var(--ink);
    margin-bottom:14px;
  }
  .fortune-cta{
    background:var(--lavender);
    border-radius:8px;
    padding:18px;text-align:center;
  }
  .fortune-cta p{
    font-size:15.5px;color:var(--muted);margin-bottom:12px;
  }

  .fortune-lead-img{
    max-width:600px;margin:0 auto 20px;
    border-radius:10px;overflow:hidden;
  }
  .fortune-lead-img img{width:100%;display:block;}

  .fortune-grid{max-width:600px;margin:0 auto;}

  /* ---------- 特典リスト ---------- */
  .benefit-list{list-style:none;max-width:600px;margin:0 auto;}
  .benefit-item{
    display:flex;gap:14px;
    align-items:flex-start;
    padding:16px 0 30px;
    border-bottom:1px dashed #D8CFC2;
  }
  .benefit-item img{
    width:52px;height:52px;object-fit:contain;flex-shrink:0;
  }
  .benefit-item h4{
    font-size:22.5px;color:var(--primary);margin-bottom:4px;
    line-height:1.5;font-weight: bold;
  }
  .benefit-item p{
    font-size:16px;color:var(--muted);line-height:1.7;margin-top:16px;
  }
  /* 情報量の多い画像（Xデーシート／WEBカレンダーなど）は縮小せず縦積みで大きく見せる */
  .benefit-item.is-visual{
    flex-direction:column;
    gap:12px;
  }
  .benefit-item.is-visual .visual-head{
    display:flex;gap:14px;align-items:flex-start;
  }
  .benefit-item.is-visual .visual-head img{
    width:52px;height:52px;object-fit:contain;
  }
  .benefit-item.is-visual .visual-shot{
    width:100%;
    max-width:560px;
    margin:0 auto;
    border:1px solid var(--lavender);
    border-radius:10px;
    overflow:hidden;
  }
  .benefit-item.is-visual .visual-shot img{
    width:100%;height:auto;object-fit:cover;
    border-radius:0;
  }
  .benefit-item.is-visual .visual-subcopy{
    font-size:16px;color:var(--coral);font-weight:700;
    margin:0 0 3px;line-height:1.4;
  }
  .benefit-item.is-visual .visual-head h4{
    margin-bottom:0;
  }

  /* 本文<p>：PCはアイコン分インデントして頭を揃え、スマホは頭出し（インデント解除） */
  .benefit-item.is-visual .visual-body{
    margin-left:66px;
  }
  @media (max-width:480px){
    .benefit-item.is-visual .visual-body{
      margin-left:0;
    }
  }
  /* 特典占い５種：白角丸の枠＋中はアコーディオン（デフォルト閉） */
  .tokuten-picks{
    background:#fff;
    border:1px solid var(--lavender);
    border-radius:10px;
    overflow:hidden;
    margin:14px 0 4px 66px;
  }
  @media (max-width:480px){
    .tokuten-picks{
      margin-left:0;
    }
  }
  .tokuten-picks details{
    border-bottom:1px solid #F1EBE0;
  }
  .tokuten-picks details:last-child{
    border-bottom:none;
  }
  .tokuten-picks summary{
    list-style:none;
    display:flex;align-items:center;gap:8px;
    padding:13px 14px;
    font-size:16px;font-weight:700;color:var(--primary);
    line-height:1.6;
    cursor:pointer;
  }
  .tokuten-picks summary::-webkit-details-marker{display:none;}
  .tokuten-picks summary::after{
    content:"＋";flex-shrink:0;margin-left:auto;padding-left:8px;
    color:var(--gold);font-size:16px;
  }
  .tokuten-picks details[open] summary::after{content:"－";}
  .tokuten-picks ul{
    list-style:none;
    padding:0 14px 14px 14px;
  }
  .tokuten-picks ul li{
    font-size:16px;color:var(--muted);line-height:1.2;
    padding:6px 0 6px 20px;position:relative;
  }
  .tokuten-picks ul li::before{
    content:"・";position:absolute;left:0;color:var(--gold);font-weight:700;
  }

  /* 対象セットのタグ */
  .benefit-sets{
    display:flex;gap:7px;flex-wrap:wrap;margin-top:10px;
  }
  .benefit-sets span,
  .benefit-sets a{
    font-size:12px;font-weight:700;
    color:var(--lavender);
    background:var(--primary-light);
    padding:4px 11px;
    border-radius:999px;
  }
  .benefit-sets a{
    text-decoration:none;
    cursor:pointer;
  }
  .benefit-sets span.gold,
  .benefit-sets a.gold{
    background:var(--gold);color:var(--primary-dark);
  }


  /* ---------- 特典5：お年玉特典（画像を使った特別レイアウト） ---------- */
  .benefit-item.tokuten5{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding: 0;
    margin: 2rem 0;
    background-image: url('/assets/images/campaign2027/tokuten5_divider.png');
    background-repeat:repeat;background-position:center;
    background-size:100% auto;
  }
  .tokuten5-title{
    padding: 4rem 2rem 0;width: 100%;

  background-image: url('/assets/images/campaign2027/tokuten5_titlebk.png');
  background-repeat:no-repeat;background-position:top center;background-size:100% auto;
  }
  .tokuten5-title-head{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .tokuten5-content{
    position:relative;
    z-index:1;
    display:flex;
    align-items:flex-start;
    gap:12px;
  }
  .tokuten5-text{
    flex:1;
    margin:1rem 0;
    font-size:12.5px;
    line-height:1.7;
    color:var(--primary-dark);
  }
  .benefit-item.tokuten5 img.tokuten5-kaori{
    width:40%;
    max-width:180px;
    height:auto;
    flex-shrink:0;
	  margin-bottom:-14px
  }
  .tokuten5-outer{
    padding: 0rem 0 0;width: 100%;
  background-image: url('/assets/images/campaign2027/tokuten5_bottom.png');
  background-repeat:no-repeat;background-position:bottom center;background-size:100% auto;
  }
  .benefit-item.tokuten5 img.tokuten5-divider{
    position:relative;
    z-index:1;
    width:82%;
    height:auto;
    display:block;
    margin:16px auto 0;
  }
  .tokuten5-note{
    position:relative;
    z-index:1;
    font-size:13px;
    color:var(--muted);
    line-height:1.7;
    text-align:center;
    margin:12px 0 0;
  }
  .tokuten5-regist{
    position:relative;
    z-index:1;
    display:block;
    width:100%;
    max-width:400px;
    margin:14px auto 0;
  }
  .tokuten5-regist img{
    width:100%;height:auto;display:block;
  }

  /* ---------- セット詳細 ---------- */
  .set-detail{
    background:#fff;
    border:1.5px solid var(--lavender);
    border-radius:14px;
    padding:26px 22px;
    margin:0 auto 20px;
    max-width:600px;
    scroll-margin-top:16px;
  }
  .set-detail .badge-row{
    display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px;
  }
  .set-detail .sd-catch{
    font-size:12.5px;color:var(--coral);font-weight:700;margin:0;
  }

  /* ---------- 額縁カード ---------- */
  .sd-frame{
    position:relative;
    background:linear-gradient(155deg, var(--primary-dark) 0%, var(--primary) 55%, var(--primary-light) 100%);
    border:none;
    border-radius:4px;
    padding:32px 28px 26px;
    text-align:center;
    margin-bottom:16px;
    overflow:visible;
  }
  .sd-frame::before,
  .sd-frame::after{
    content:"";
    position:absolute;
    pointer-events:none;
    border:1px solid var(--gold);
  }
  .sd-frame::before{inset:9px;}
  .sd-frame::after{inset:13px;border-color:rgba(219,175,94,.55);}
  .sd-corner{
    position:absolute;
    width:30px;height:30px;
    color:var(--gold);
    z-index:2;
    pointer-events:none;
  }
  .sd-corner svg{display:block;width:100%;height:100%;}
  .sd-corner.tl{top:5px;left:5px;}
  .sd-corner.tr{top:5px;right:5px;transform:scaleX(-1);}
  .sd-corner.bl{bottom:5px;left:5px;transform:scaleY(-1);}
  .sd-corner.br{bottom:5px;right:5px;transform:scale(-1,-1);}
  .sd-frame .sd-rank{
    position:absolute;
    top:-14px;left:50%;
    transform:translateX(-50%);
    z-index:3;
    background:var(--base);
    color:var(--primary);
    font-family:var(--font-display);
    font-weight:700;
    font-size:13px;
    letter-spacing:.15em;
    padding:6px 24px;
    border-radius:3px;
    border:1px solid var(--gold);
    box-shadow:0 2px 6px rgba(0,0,0,.2);
    white-space:nowrap;
  }
  /* リボン風デザイン */
  .sd-frame .sd-rank.sd-rank--ribbon{
    top:-12px;
    width:64%;
    max-width:240px;
    background:linear-gradient(180deg,#FFB25C 0%, #E8720E 100%);
    color:#fff;
    font-family:var(--font-body);
    font-weight:800;
    font-size:17px;
    letter-spacing:.1em;
    padding:3px 10px;
    border:none;
    border-radius:0;
    box-shadow:none;
    filter:drop-shadow(0 3px 5px rgba(0,0,0,.14));
    clip-path:polygon(0% 0%, 100% 0%, 95% 50%, 100% 100%, 0% 100%, 5% 50%);
  }
  .sd-frame .sd-rank.sd-rank--ribbon.rank-cyan{background:#00B7EE;}
  .sd-frame .sd-rank.sd-rank--ribbon.rank-green{background:#77A90D;}
  .sd-frame .sd-rank.sd-rank--ribbon.rank-pink{background:#FD0071;}
  .sd-frame h3{
    position:relative;z-index:2;
    margin:16px 0 4px;
    line-height:1.4;
  }
  .sd-frame h3 .sd-title-bar{
    font-family:var(--font-display);
    font-weight:700;
    font-size:24px;
    color:#ffffff;
    display:inline-block;
  }
  /* 「数量限定」バッジ */
  .sd-title-badge{
    position:absolute;
    top:-13px;
    left:-24px;
    display:block;
    width:90px;
    height:90px;
    z-index:4;
  }
  @media (min-width:600px){
    .sd-title-badge{
      top:-22px;
      left:-32px;
      width:120px;
      height:120px;
    }
    .section-title{font-size:36px;}/* ← 20261021 追加 */
  }
  .sd-frame .price{
    position:relative;z-index:2;
    font-size:19px;
    font-family:var(--font-display);
    color:#fff;
    margin:0;
  }
  .sd-frame .price small{color:var(--gold-light);font-size:12px;}
  .sd-price-outside{
    text-align:center;
    font-size:19px;
    font-family:var(--font-display);
    color:var(--primary);
    margin:2px 0 16px;
  }
  .sd-price-outside small{color:var(--muted);font-size:12px;}

  .set-detail .sd-copy{
    font-size:18px;color:var(--ink);line-height:1.7;margin-bottom:16px;font-weight: bold;text-align: center;
  }
  .set-detail .sd-layout{
    display:flex;flex-direction:column;gap:16px;
  }
  .set-detail .sd-image{
    width:100%;border-radius:10px;overflow:hidden;background:var(--lavender);
  }
  .set-detail .sd-image img{width:100%;display:block;}
  @media (min-width:480px){
    .set-detail .sd-layout{flex-direction:row-reverse;align-items:flex-start;}
    .set-detail .sd-image{width:38%;flex-shrink:0;}
    .set-detail .sd-body{flex:1;}
  }
  .icon-row{
    display:flex;justify-content:space-between;flex-wrap:nowrap;
    gap:4px;
    margin-bottom:18px;
    padding:14px 4px;
    background:var(--base);
    border-radius:10px;
  }
  .icon-row .fi{
    display:flex;flex-direction:column;align-items:center;gap:3px;
    font-size:10px;color:var(--primary);font-weight:700;
    flex:1 1 0;min-width:0;
  }
  .icon-row .fi .check{
    width:12px;height:12px;border-radius:50%;
    border:1.5px solid var(--gold);
  }
  .icon-row .fi span.dot{
    width:auto;height:auto;border-radius:0;
    background:none;
    display:flex;align-items:center;justify-content:center;
    color:var(--primary);
  }
  .icon-row .fi span.dot svg{width:26px;height:26px;}
  .icon-row .fi span.dot img{width:30px;height:30px;object-fit:contain;}
  .icon-row .fi.off span.dot img{filter:grayscale(1) opacity(.5);}
  /* 相性のみ赤系で強調（元サイトの配色を踏襲） */
  .icon-row .fi.affinity span.dot{color:var(--coral);}
  .icon-row .fi.affinity{color:var(--coral);}
  /* このセットに含まれない項目はグレーアウト */
  .icon-row .fi.off{color:#C7BDBD;}
  .icon-row .fi.off .check{border-color:#DCD3D3;}
  .icon-row .fi.off span.dot{color:#C7BDBD;}
  .sd-box-label{
    display:inline-block;
    background:#fff;
    border:1.5px solid var(--primary);
    color:var(--primary);
    font-family:var(--font-display);
    font-weight:700;
    font-size:14px;
    letter-spacing:.15em;
    padding:5px 22px;
  }
  .sd-label-row{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    margin-bottom:10px;
  }
  .sd-scope-text{
    font-size:16px;color:var(--muted);
  }
  .tokuten-list{list-style:none;margin-bottom:18px;}
  .tokuten-list li{
    font-size:16px;padding:9px 0 9px 24px;position:relative;
    border-bottom:1px solid #F1EBE0;
    line-height:1.6;
  }
  .tokuten-list li::before{
    content:"✓";position:absolute;left:0;color:var(--gold);font-weight:700;
  }

/*================================================================*/
/* 2023 detail */
.cp23-detail {
	margin: 0;
}
.cp23-detail__title {
	font-size: 0;
	margin: 0;
}
.cp23-detail__contents {
	margin: 0;
}
.cp23-detail__contents--userinfo {
	margin: 0 1rem;
}
.cp23-detail__contents--userinfo > p {
	font-size: 1.4rem;
	text-align: center;
	margin: 0;
}
.cp23-index__anchor--ul, .cp23-index__anchor--ul > li {
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
}

.cp23-index__anchor--ul {
	display: flex;
	text-align: center;
}

  /* ---------- フッター ---------- */
  footer{
    background:var(--primary-dark);
    color:#C9B9BE;
    text-align:center;
    padding:34px 24px;
    font-size:13px;
    line-height:2.1;
  }
  footer a{color:var(--gold-light);}

/* ==========================================================================

   [detail] 2027年 無料鑑定結果ページ 追加CSS

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

  /* ---------- [detail3] ページ上部（ヘッダー〜3.こんな年カード）の白背景ラップ ---------- */
  .rslt-top-white{background:#fff;}

  /* ---------- [detail] FVヘッダー／8ボタンナビ ---------- */
  .rslt-fv{padding:0;}
  .rslt-fv-bnr img{width:100%;display:block;}
  .rslt-nav-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:5px;
    padding:8px 8px 0px;
    max-width:560px;
    margin:0 auto;
  }
  .rslt-nav-item{
    display:block;
    line-height:0;
    border-radius:6px;
    overflow:hidden;
  }
  .rslt-nav-item img{width:100%;height:auto;display:block;}
  .rslt-nav-item:active{opacity:.8;}

  /* ---------- [detail] 無料鑑定結果：ユーザー情報 ---------- */
  .rslt-userinfo-section{padding-top:22px;padding-bottom:0;text-align:center;}
  .rslt-userinfo{text-align:center;}
  .rslt-username{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:0px;}
  .rslt-seijin-label{font-size:14px;color:var(--muted);margin-bottom:4px;}
  .rslt-seijin{
    font-family:var(--font-display);
    font-weight:700;
    font-size:26px;
    color:var(--primary-dark);
    letter-spacing:.02em;
  }

  /* ---------- [detail] 本文＋後半ぼかし共通パーツ ---------- */
  .rslt-subheading{
    font-family:var(--font-display);
    font-weight:700;
    font-size:18.5px;
    color:var(--primary);
    margin:22px 0 10px;
    text-align:center;
  }
  .rslt-blur-wrap{max-width:600px;margin:30px auto;}
  /* ぼかし部分だけを独立したブロック要素として括り、その中だけを基準に
     ボタンをセンタリングする（ブラウザ幅が変わって手前の非ぼかしテキストの
     行数・高さが変化しても、ボタンが常にぼかし部分の中央に来るようにするため） */
  .rslt-blur-region{
    display:block;
    position:relative;
    margin-top:8px;
  }
  .rslt-continue-btn{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:2;
    display:block;
    width:74%;
    max-width:280px;
    text-align:center;
    white-space:nowrap;
    background:linear-gradient(180deg,var(--gold) 0%, #a9793c 100%);
    color:#fff;
    font-family:var(--font-display);
    font-weight:700;
    font-size:15.5px;
    letter-spacing:.03em;
    padding:12px 10px;
    border:1px solid #c9a45c;
    border-radius:8px;
    box-shadow:0 6px 14px rgba(150,110,55,.35);
  }
  .rslt-continue-btn:active{opacity:.9;}
  .rslt-copy{font-size:16px;line-height:1.9;color:var(--ink);}
  .rslt-blur-fade{
    filter:blur(3.5px);
    opacity:.55;
    user-select:none;
    -webkit-user-select:none;
  }
  .rslt-continue-note{
    text-align:center;
    font-size:13.5px;
    font-weight:700;
    color:var(--coral);
    margin:10px 0 0;
  }

  /* ---------- [detail] この先ではこんなことがわかります（ゴールド枠） ---------- */
  .rslt-next-box{
    max-width:600px;
    margin:18px auto 4px;
    background:var(--lavender);
    border:1.5px solid var(--gold);
    border-radius:12px;
    padding:18px 20px 20px;
  }
  .rslt-next-box h4{
    font-family:var(--font-display);
    font-weight:700;
    font-size:16.5px;
    color:var(--primary);
    text-align:center;
    margin-bottom:2px;
  }
  .rslt-next-box .tokuten-list li{border-bottom-color:rgba(219,175,94,.35);}
  .rslt-next-box .tokuten-list li:last-child{border-bottom:none;}
  .rslt-next-box-btn{
    display:block;
    width:80%;
    max-width:280px;
    margin:14px auto 0;
  }
  .rslt-next-box-btn img{width:100%;height:auto;display:block;}

  /* ---------- [detail] CV導線（完全版ボタン／マイページモーダル用） ---------- */
  .rslt-cta-btn{
    display:block;
    width:90%;
    max-width:420px;
    margin:0 auto;
    background:linear-gradient(180deg,var(--primary) 0%, var(--primary-dark) 100%);
    color:#fff;
    font-family:var(--font-display);
    font-weight:700;
    font-size:17.5px;
    letter-spacing:.03em;
    padding:16px 10px;
    border:1px solid var(--gold);
    border-radius:8px;
    box-shadow:0 6px 14px rgba(90,30,48,.3);
  }
  .rslt-cta-btn:active{opacity:.9;}

  /* ---------- [detail] 2027年の相性 ---------- */
  .rslt-affinity-match{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    max-width:420px;
    margin:0 auto 14px;
  }
  .rslt-affinity-role{font-size:16px;margin-bottom:4px;}
  .rslt-affinity-seijin{
    font-family:var(--font-display);
    font-weight:700;
    font-size:18px;
    line-height:1.4;
  }
  /* ---------- [detail] 先生からひと言 ---------- */
  .rslt-teacher-section{padding-top:0;padding-left:0;padding-right:0;max-width:none;width:100%;margin:0;}

  /* ---------- [detail] 占い項目ポップアップ ---------- */
  .rslt-modal-overlay{
    display:none;
    position:fixed;inset:0;
    background:rgba(38,20,20,.55);
    z-index:100;
    align-items:center;justify-content:center;
    padding:20px;
  }
  .rslt-modal-overlay.is-open{display:flex;}
  .rslt-modal-box{
    position:relative;
    width:100%;max-width:340px;
    background:#fff;
    border:1.5px solid var(--gold);
    border-radius:14px;
    padding:28px 22px 22px;
    text-align:center;
  }
  .rslt-modal-close{
    position:absolute;top:8px;right:10px;
    background:none;border:none;
    font-size:22px;line-height:1;
    color:var(--muted);
    cursor:pointer;
    padding:4px;
  }
  .rslt-modal-title{
    font-family:var(--font-display);
    font-weight:700;
    font-size:19px;
    color:var(--primary);
    margin-bottom:12px;
  }
  .rslt-modal-text{
    font-size:14.5px;
    line-height:1.8;
    color:var(--ink);
    margin-bottom:14px;
    text-align:left;
  }

/* ==========================================================================
   [detail2] 2026.html（<section class="cp23-detail"> 
   ========================================================================== */

  /* ユーザー情報行（cp25_result_left/right.pngで氏名・星人名を挟む） */
  .rslt-userinfo-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    padding:0 20px;
  }
  .rslt-userinfo-orn{height:90px;width:auto;flex-shrink:0;}

  /* あなたの◯◯年はこんな年カード */
  .rslt-unki-card{margin:14px auto 0;max-width:560px;}
  .rslt-preview-heading{font-size:1.5rem;font-weight:700;color:#613B09;margin:0 0 10px;}
  .rslt-unki-frame-top,
  .rslt-unki-frame-bottom{width:100%;display:block;}
  .rslt-unki-card-body{
    background-image:url(/assets/images/campaign2027/cp24_fortune_top_middle.png);
    background-size:100%;
    padding:0px 20px 2px;
    text-align:center;
  }
  /* キャラクターアイコン */
  .rslt-preview-chara{width:50%;margin:0 auto;}
  .rslt-preview-chara img{width:100%;display:block;}
  /* 運気バッジ */
  .rslt-unki-badge{
    display:block;
    background:#fff;
    border:3px solid #286ed9;
    border-radius:.2rem;
    color:#286ed9;
    font-weight:700;
    margin:10px auto;
    padding:.2rem 1rem;
    width:60%;
    max-width:12rem;
  }
  .rslt-unki-badge.unki-color1{border-color:#8f6552;color:#8f6552;}
  .rslt-unki-badge.unki-color2{border-color:#ee7800;color:#ee7800;}
  .rslt-unki-badge.unki-color3{border-color:#286ed9;color:#286ed9;}
  .rslt-unki-badge.unki-color4{border-color:#613b09;color:#613b09;}
  .rslt-unki-badge.unki-color5{border-color:#286ed9;color:#286ed9;}
  .rslt-share-img{width:75%;max-width: 320px;height:auto;display:inline-block;}

  /* 2027年の総合運 */
  #kantei-sougou{background-color:#FAF1DA;max-width:none;width:100%;margin:0;padding-top:46px;
    background-image:url('/assets/images/campaign2027/blockbg_750.png');
    background-repeat:no-repeat;background-position:top center;background-size:100% auto;}
  .rslt-advice-block{margin-top:22px;margin-bottom:40px;max-width:560px;margin-left:auto;margin-right:auto;}
  .rslt-advice-top,
  .rslt-advice-bottom{width:100%;display:block;}
  .rslt-advice-body{
    background-image:url(/assets/images/campaign2027/cp23_detail_advice_middle.png);
    background-position:top;
    background-repeat:repeat-y;
    background-size:contain;
    margin-top:-5%;
    padding:14px 20px 4px;
  }


  #kantei-aisho{background-color:#F4F0F1;max-width:none;width:100%;margin:0;padding-top:46px;
    background-image:url('/assets/images/campaign2027/blockbg_750.png');
    background-repeat:no-repeat;background-position:top center;background-size:100% auto;}
  .rslt-affinity-user{
    flex:1;
    background:none;
    border:none;
    padding:1rem 6px;
    text-align:center;
    color:#a17d36;
  }
  .rslt-affinity-seijin{color:#a17d36;}
  .rslt-affinity-unki-tag{
    display:inline-block;
    background:#a17d36;
    border-radius:.6rem;
    color:#fff;
    font-weight:700;
    font-size:16px;
    padding:.2rem .8rem;
    margin-top:6px;
  }
  .rslt-affinity-mark-img{width:100%;max-width:6rem;height:auto;object-fit:contain;flex-shrink:0;}
  .rslt-affinity-line-img{width:100%;display:block;margin:2px 0 16px;}
  .rslt-affinity-body{
    padding-top:4px;
  }

  /* 先生からひと言（cp23-index__set相当） */
  .rslt-teacher-wrap{position:relative;}
  .rslt-teacher-banner{width:100%;display:block;}
  .rslt-teacher{
    display:flex;
    align-items:flex-start;
    gap:14px;
    max-width:600px;
    margin:-42% auto 0;
    position:relative;
    z-index:1;
    padding:0 20px 0px;
  }
  .rslt-teacher-text{flex:1.5;margin: auto;}
  .rslt-teacher-text p{font-size:13.5px;line-height:1.7;color:#f5ebe0;margin:0;}
  .rslt-teacher-text .rslt-teacher-name,
  .rslt-teacher-text .rslt-teacher-hl{color:#ffe600;font-weight:700;}
  .rslt-teacher-img{width:36%;max-width:230px;flex-shrink:0;}
  .rslt-teacher-img img{width:100%;display:block;border-radius:8px;}
  .rslt-teacher-arrow2{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:2;}
  .rslt-teacher-arrow2 img{width:36px;display:block;}

  /* ---------- [detail] セット詳細：クレジットカード決済 ---------- */
  .sd-credit-block{
    margin-top:10px;
    text-align:center;
  }
  .sd-credit-note{
    font-size:13px;
    color:var(--muted);
    margin:0 0 0px;
  }
  .sd-credit-links{
    font-size:13px;
    margin:0 0 4px;
  }
  .sd-credit-links a{
    color:var(--primary);
    text-decoration:underline;
  }
  .sd-credit-caution{
    font-size:13px;
    color:var(--coral);
    line-height:1.6;
    margin:0;
  }