/************************************************************
 * tocotoco LP - Production Clean Version
 * 置き場所: /wp-content/themes/cocoon-child-master/assets/css/tocotoco-lp.css
 ************************************************************/

/* ---- 全体背景・ベース ---- */
body.page-template-page-tocotoco-lp {
  background:#f6f4ef !important;
}
#tocotoco.lp {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  background:#f6f4ef;
  color:#222;
  font-family:"Noto Sans JP",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}
#tocotoco :where(h1,h2,h3,h4,p,ul,ol,figure){margin:0!important;}
#tocotoco :where(.entry-title,.article-header,.article-footer,.ad-area){display:none!important;}
#tocotoco img{max-width:100%!important;height:auto!important;border:none!important;box-shadow:none!important;}
#tocotoco .wrap{max-width:1180px;margin:0 auto;padding:0 20px;}

/* ---- ボタン ---- */
#tocotoco .btn{display:inline-block;padding:.9em 1.8em;border-radius:999px;border:1px solid currentColor;transition:transform .2s ease;}
#tocotoco .btn--primary{background:#111;color:#fff;border-color:#111;}
#tocotoco .btn--ghost{background:transparent;color:#333;border-color:#aaa;}
#tocotoco .btn:hover{transform:translateY(-2px);}

/* ---- Heroセクション ---- */
#tocotoco .lp-hero{
  background:#f6f4ef;
  padding:clamp(56px,8vw,120px) 0 clamp(72px,10vw,160px);
  position:relative;overflow:hidden;
}
#tocotoco .lp-hero__inner{max-width:1240px;margin:0 auto;padding:0 5vw;position:relative;}
#tocotoco .lp-hero__media img{
  width:100%!important;display:block;
  border-radius:24px!important;
  object-fit:cover;
  box-shadow:0 20px 60px rgba(0,0,0,.08);
}
#tocotoco .lp-hero__copy{
  position:absolute;left:8%;bottom:12%;
  max-width:min(900px,80%);
  text-align:left;
}
#tocotoco .lp-hero__copy h1{
  font-size:clamp(34px,5.6vw,64px)!important;
  line-height:1.18;font-weight:800;letter-spacing:.02em;
}
#tocotoco .lp-hero__copy .subtitle{margin-top:.5em;font-size:clamp(16px,2.2vw,20px);opacity:.85;}

/* ---- Hero吹き出し ---- */
#tocotoco .doodle--bubble{position:absolute;right:5%;bottom:10%;display:flex;align-items:center;gap:8px;}
#tocotoco .doodle--bubble .hand{font-family:'Caveat','Permanent Marker',system-ui;font-size:clamp(18px,2.8vw,30px);color:#5e6ad1;transform:rotate(-6deg);}
#tocotoco .doodle--bubble path{
  fill:#fff!important;stroke:#6f7dd1!important;stroke-width:4!important;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.12));
}

/* Hero背景フォールバック（画像が壊れても出す） */
#tocotoco .lp-hero__media{
  background:url('/wp-content/themes/cocoon-child-master/assets/images/item16.jpg') center/cover no-repeat;
  min-height:40vw;
  border-radius:24px;
}
#tocotoco .lp-hero__media img{opacity:0;}

/* ---- Leadセクション ---- */
#tocotoco .lp-lead .wrap{
  display:grid;grid-template-columns:1.2fr .8fr;gap:32px;
  padding:clamp(36px,5vw,64px) 20px;
  min-height:320px;align-items:center;
}
#tocotoco .lead__media img{border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.06);}
#tocotoco .lead__text{align-self:center;line-height:1.9;font-size:clamp(15px,1.9vw,17px);}

/* ---- コーディネート ---- */
#tocotoco .lp-coords{
  max-width:1180px;margin:clamp(40px,8vw,96px) auto;
  padding:0 20px;display:grid;gap:84px;
}
#tocotoco .coord{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;}
#tocotoco .coord.is-right{grid-template-columns:.95fr 1.05fr;}
#tocotoco .coord__media img{width:100%;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.06);}
#tocotoco .coord__shop{font-size:clamp(20px,3vw,28px);font-weight:700;display:flex;align-items:flex-end;gap:.4rem;}
#tocotoco .hand{font-family:'Caveat','Permanent Marker',system-ui;color:#6f7dd1;font-size:clamp(18px,2.6vw,28px);margin-right:.6rem;display:inline-block;transform:rotate(-6deg);}
#tocotoco .coord__desc{margin:.5rem 0 .6rem;line-height:1.85;}
#tocotoco .coord__points{list-style:none;padding:0;margin:.2rem 0 1rem;}
#tocotoco .coord__points li{position:relative;padding-left:1.2em;line-height:1.8;}
#tocotoco .coord__points li:before{content:"?";position:absolute;left:0;color:#6f7dd1;}
#tocotoco .marker{
  position:absolute;left:6%;bottom:-4%;width:38%;height:28%;
  background:radial-gradient(ellipse at center,rgba(111,125,209,.18),transparent 60%);
  filter:blur(2px);border-radius:50%;
}

/* ---- 吹き出し（ショップ用） ---- */
#tocotoco .bubble{display:inline-flex;align-items:center;gap:8px;margin:.6rem 0;}
#tocotoco .bubble__text{font-family:'Caveat','Permanent Marker',system-ui;font-size:clamp(18px,2.4vw,26px);color:#2c2c2c;}
#tocotoco .bubble__shape path,
#tocotoco .bubble_shape path{
  fill:#fff!important;stroke:#6f7dd1!important;stroke-width:4!important;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.12));
}

/* ---- アイテム一覧 ---- */
#tocotoco .lp-items{max-width:1180px;margin:clamp(32px,6vw,72px) auto;padding:0 20px;}
#tocotoco .sec-ttl{font-size:clamp(22px,3.2vw,32px);margin:0 0 18px;}
#tocotoco .items-ttl{font-size:clamp(18px,2.6vw,24px);margin:28px 0 10px;opacity:.85;}
#tocotoco .items-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
#tocotoco .item-card{
  background:#fff;border-radius:18px;padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  display:flex;flex-direction:column;gap:10px;
}
#tocotoco .item-card img{
  width: 100%;
  height: 260px !important;  /* 好きな高さに調整してOK（240?280pxくらい） */
  object-fit: cover;         /* はみ出した分はトリミングして、枠いっぱいに */
  border-radius: 12px;
}
#tocotoco .item-card__meta .brand{font-size:.9rem;opacity:.7;}
#tocotoco .item-card__meta .name{font-size:1.05rem;margin:.2rem 0;}
#tocotoco .item-card .price{opacity:.9;}

/* ---- About / CTA ---- */
#tocotoco .lp-about,#tocotoco .lp-recruit{
  max-width:960px;margin:clamp(48px,8vw,96px) auto;padding:0 20px;
}
#tocotoco .lp-recruit{
  background:linear-gradient(180deg,#fff,#f3f2ee);
  padding:clamp(32px,5vw,56px) 20px;
  border-radius:20px;text-align:center;
}

/* ---- アニメーション（IntersectionObserverで付与予定） ---- */
#tocotoco [data-animate="zoom-fade"] img{transform:scale(1.04);opacity:0;transition:transform 1s ease,opacity 1s ease;}
#tocotoco [data-animate="zoom-fade"].is-in img{transform:scale(1);opacity:1;}
#tocotoco [data-animate="pop"]{transform:translateY(8px);opacity:0;transition:.6s ease;}
#tocotoco [data-animate="pop"].is-in{transform:translateY(0);opacity:1;}
#tocotoco [data-animate="slide-left"],#tocotoco [data-animate="slide-right"]{opacity:0;transform:translateX(40px);transition:.8s ease;}
#tocotoco [data-animate="slide-left"]{transform:translateX(-40px);}
#tocotoco .is-in[data-animate="slide-left"],#tocotoco .is-in[data-animate="slide-right"]{opacity:1;transform:translateX(0);}
#tocotoco [data-animate="fade"],#tocotoco [data-animate="fade-up"],#tocotoco [data-animate="stagger"] .item-card{opacity:0;transform:translateY(18px);transition:.6s ease;}
#tocotoco .is-in[data-animate="fade"],#tocotoco .is-in [data-animate="fade-up"]{opacity:1;transform:none;}

/* ---- Responsive ---- */
@media(max-width:980px){
  #tocotoco .lp-hero__copy{position:static;inset:auto;transform:none;margin-top:14px;}
  #tocotoco .lp-lead .wrap{grid-template-columns:1fr;gap:18px;}
  #tocotoco .coord{grid-template-columns:1fr;gap:18px;}
  #tocotoco .items-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  #tocotoco .items-grid{grid-template-columns:1fr;}
  #tocotoco .doodle--bubble{right:2vw;bottom:6vw;}
}
/* stagger の中身を表示に戻す */
#tocotoco .is-in[data-animate="stagger"] .item-card { opacity: 1; transform: none; }

#tocotoco [data-animate="fade-up"].is-in {
  opacity: 1;
  transform: none;
  transition: all .6s ease;
}
/* === 読みやすさUP（ヒーロー） ============================== */
/* 画像の上にうっすら暗いグラデを敷く */
#tocotoco .lp-hero__media{ position: relative; }
#tocotoco .lp-hero__media::after{
  content:""; position:absolute; inset:0; border-radius:24px;
  background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.20) 45%, rgba(0,0,0,.10) 70%, rgba(0,0,0,0));
  pointer-events:none;
}

/* 見出し・サブの可読性（薄い影＆ストローク） */
#tocotoco .lp-hero__copy h1{
  color:#111; 
  text-shadow:
    0 2px 12px rgba(255,255,255,.55),
    0 0 1px rgba(255,255,255,.9);
}
#tocotoco .lp-hero__copy .subtitle{
  color:#111;
  text-shadow:
    0 1px 10px rgba(255,255,255,.75),
    0 0 1px rgba(255,255,255,.85);
}

/* サブの後ろに半透明の“のり面”を敷く（読みやすさ最優先） */
#tocotoco .lp-hero__copy .subtitle{
  display:inline-block; padding:.35em .6em; border-radius:10px;
  background:rgba(255,255,255,.55);
  backdrop-filter:saturate(120%) blur(2px);
}

/* ボタンを浮かせる */
#tocotoco .lp-hero .btn--primary{
  box-shadow:0 8px 28px rgba(0,0,0,.18);
}

/* 吹き出し・英字のコントラスト強化 */
#tocotoco .doodle--bubble .hand{
  color:#5e6ad1;
  text-shadow: 0 2px 12px rgba(255,255,255,.85), 0 0 1px #fff;
  -webkit-text-stroke: .6px rgba(255,255,255,.9);
}
#tocotoco .doodle--bubble svg path{
  fill:#fff; stroke:#6f7dd1; stroke-width:5;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.18));
}

/* バブル全体の位置とサイズ微調整（被りにくく） */
#tocotoco .doodle--bubble{ right:4%; bottom:12%; gap:10px; }
@media (max-width: 980px){
  #tocotoco .lp-hero__media::after{ background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.15) 60%, rgba(0,0,0,0)); }
  #tocotoco .doodle--bubble{ right:3%; bottom:6%; transform:scale(.9); }
}

/* === コーディネート内のバブルも読みやすく ==================== */
#tocotoco .bubble__text{
  background:rgba(255,255,255,.7);
  padding:.15em .4em; border-radius:6px;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}
#tocotoco .bubble__shape path{
  stroke-width:5; /* 線を少し太く */
}

/* 画像の上の手書き英字が沈む場合の保険 */
#tocotoco .hand{
  text-shadow: 0 2px 10px rgba(255,255,255,.9), 0 0 1px #fff;
  -webkit-text-stroke:.4px rgba(255,255,255,.9);
}
/* ==== 吹き出しを「横長のふきだし」らしく整える ==== */
#tocotoco .bubble{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .35em .7em;               /* 背景のり面 */
  border-radius: 12px;
  margin: .4rem 0 .4rem 36px;        /* 左に“しゅっ”の装飾スペース */
  background: #fff;                   /* 文字の読みやすさ優先 */
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
}

#tocotoco .bubble__text{
  position: relative;
  z-index: 2;                         /* 文字を最前面に */
  font-family: 'Caveat','Permanent Marker', system-ui;
  font-size: clamp(18px,2.2vw,26px);
  color: #2c2c2c;
  white-space: nowrap;                /* ← 縦に折れない */
  line-height: 1.1;
}

/* もともとのSVGを“背景として”下に敷く（レイアウトに干渉させない） */
#tocotoco .bubble__shape{
  position: absolute;
  inset: -8px -10px;                  /* ほんの少し大きくして縁を出す */
  width: auto; height: auto;
  pointer-events: none;
  z-index: 1;
}
#tocotoco .bubble__shape path{
  fill:#fff;
  stroke:#6f7dd1;
  stroke-width:4;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.12));
}

/* 左に“しゅっ”のアクセント（SVGをCSSで描画） */
#tocotoco .bubble::before{
  content:"";
  position:absolute;
  left:-28px; top:50%; transform:translateY(-50%);
  width:28px; height:12px;
  background:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 20'>\
<path d='M2,12 C10,2 20,18 28,8 36,-2 44,14 48,8' fill='none' stroke='%236f7dd1' stroke-width='3'/>\
</svg>") center/contain no-repeat;
}

/* スマホでの微調整 */
@media (max-width: 560px){
  #tocotoco .bubble{ margin-left: 28px; padding: .3em .6em; }
  #tocotoco .bubble__text{ font-size: clamp(16px,4.6vw,22px); }
}

/* === overwrite: ショップ内バブルを非表示 === */
#tocotoco .lp-coords .bubble { 
  display: none !important;
}
/* Heroの手書きバブルも非表示 */
#tocotoco .doodle--bubble {
  display: none !important;
}
/* === overwrite: ポイントの“？”記号をやめて普通の箇条書きに === */
#tocotoco .coord__points {
  list-style: disc !important;
  padding-left: 1.2em !important;
  margin: .2rem 0 1rem;
}
#tocotoco .coord__points li {
  position: static !important;
  padding-left: 0 !important;
  line-height: 1.8;
}
#tocotoco .coord__points li::before {
  content: none !important;
}
/* === Lead Section Compact ver. === */
.lp-lead--compact {
  padding: 3rem 0;
  background-color: #fffaf9;
  text-align: center;
}
.lp-lead--compact .lead__media {
  display: none !important;
}
.lp-lead--compact .lead__text {
  max-width: 640px;
  margin: 0 auto;
}

.lp-lead--compact .campaign {
  margin-top: 1.5rem;
  padding: 1.5rem 1rem;
  background: #fff4f2;
  border: 1px solid #ffd8d4;
  border-radius: 12px;
}
.lp-lead--compact .campaign__emoji {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.lp-lead--compact .campaign__title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: #444;
}
.lp-lead--compact .campaign__desc {
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom:0.5rem;
  color: #555;
}
.lp-lead--compact .campaign__desc strong{
color: #e56f5d;
font-weight: 700;
}
.lp-lead--compact .campaign__benefits {
  list-style: none;
  margin: 1.5rem auto 0;
  padding: 0;
  text-align: left;
  max-width: 540px;
}
.lp-lead--compact .campaign__benefits li {
  background: #fff;
  border: 1px solid #ffe0dc;
  border-radius: 8px;
  padding: 0.8rem 1rem;
  margin-bottom: 0.8rem;
  font-size: 0.95rem;
  color: #333;
}
.lp-lead--compact .campaign__benefits .highlight {
  color: #e56f5d;
  font-weight: 600;
}
@media (max-width: 600px) {
  .lp-lead--compact {
    padding: 2rem 1rem;
  }
  .lp-lead--compact .campaign__benefits li {
    font-size: 0.9rem;
    padding: 0.7rem 0.8rem;
  }
}
/* === Lead Section Compact 改善 === */
.lp-lead--compact {
  padding: 2rem 0;               /* 上下の余白を少し詰める（元: 3rem） */
  background-color: #fffaf9;
  text-align: center;
}

.lp-lead--compact .lead__text {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;             /* 全体を中央寄せ */
}

.lp-lead--compact .campaign {
  margin-top: 1rem;               /* 少し詰める（元: 1.5rem） */
  padding: 1.2rem 1rem;
  background: #fff4f2;
  border: 1px solid #ffd8d4;
  border-radius: 12px;
  text-align: center;             /* タイトル・本文も中央寄せ */
}

.lp-lead--compact .campaign__benefits {
  list-style: none;
  margin: 1.2rem auto 0;
  padding: 0;
  text-align: center;             /* 各ショップ名も中央揃え */
  max-width: 540px;
}

.lp-lead--compact .campaign__benefits li {
  background: #fff;
  border: 1px solid #ffe0dc;
  border-radius: 8px;
  padding: 0.8rem 1rem;
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
  color: #333;
  display: inline-block;          /* カードのように中央に揃う */
  text-align: left;               /* 中のテキストだけ左揃え */
  min-width: 300px;               /* 幅をある程度揃える */
}

.lp-lead--compact .campaign__benefits .highlight {
  color: #e56f5d;
  font-weight: 600;
}
/* === Leadセクションの中央寄せ修正 === */
#tocotoco .lp-lead--compact .wrap {
  display: block !important;   /* グリッドを解除 */
  text-align: center !important;
  padding: 0 1rem !important;
}
/* === BenefitsSection (最後の特典＆紹介) === */
#tocotoco .lp-benefits {
  max-width: 1180px;
  margin: clamp(48px, 8vw, 96px) auto;
  padding: 0 20px;
  text-align: center;
  background: #fffaf9;
  border-radius: 16px;
  padding-top: 2.5rem;
  padding-bottom: 3rem;
}

#tocotoco .lp-benefits .sec-ttl {
  font-size: clamp(22px, 3vw, 30px);
  margin-bottom: 1.8rem;
}

#tocotoco .lp-benefits .benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

#tocotoco .benefit-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
  overflow: hidden;
  text-align: left;
  transition: transform .3s ease;
}
#tocotoco .benefit-card:hover {
  transform: translateY(-4px);
}
#tocotoco .benefit-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}
#tocotoco .benefit-card__body {
  padding: 1rem 1.2rem 1.4rem;
}
#tocotoco .benefit-card__body h3 {
  font-size: 1.2rem;
  margin-bottom: .4rem;
}
#tocotoco .benefit-card__body p {
  font-size: .95rem;
  line-height: 1.6;
  margin-bottom: .4rem;
}
#tocotoco .benefit-card__offer {
  color: #e56f5d;
  font-weight: 700;
}

@media (max-width: 700px){
  #tocotoco .lp-benefits .benefits-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  #tocotoco .benefit-card img {
    height: 180px;
  }
}
@media (max-width: 767px) {
  /* 見出しとサブタイトルの上下余白調整 */
  .lp-hero__copy h1 {
    margin-bottom: 0.6em; /* 見出しとサブタイトルの間を少し広げる */
  }

  .lp-hero__copy .subtitle {
    margin-top: 0;
    margin-bottom: 1.2em; /* 下の余白を少し詰める */
  }
}


/* ==== Hero spacing fix for mobile ==== */
@media (max-width: 767px){
  /* 見出しとサブの間：広げる */
  #tocotoco .lp-hero__copy h1{
    margin: 0 0 .7em !important;   /* ← ここで上下間隔OK */
    line-height: 1.22;             /* 文字が詰まる場合の保険 */
  }
  /* サブタイトル下：詰める */
  #tocotoco .lp-hero__copy .subtitle{
    margin: 0 0 .8em !important;   /* ← 下の空きすぎを抑える */
  }
  /* セクション自体の下余白も少し詰める（空きすぎ対策の本丸） */
  #tocotoco .lp-hero{
    padding: 48px 0 56px !important;  /* 上/下の値は好みで微調整OK */
  }
  /* 980px以下で付けている margin-top:14px を少しだけ詰める */
  #tocotoco .lp-hero__copy{
    margin-top: 10px !important;
  }
}
/* === Uniform item thumbnails (square) === */
#tocotoco .item-card__thumb{
  aspect-ratio: 1 / 1;            /* 正方形に統一（縦長にしたいなら 3/4 などに変更） */
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
}
#tocotoco .item-card__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;               /* はみ出しを自然にトリミング */
  display: block;
}

/* 画像の重複角丸を回避（既存指定の上書き） */
#tocotoco .item-card img{ border-radius: 0 !important; }

/* === 4 columns on desktop === */
@media (min-width: 1180px){
  #tocotoco .items-grid{
    grid-template-columns: repeat(4, 1fr) !important; /* 3→4列に */
  }
}

/* ===== コーデ説明まわりの余白調整（特にスマホでゆったり） ===== */
@media (max-width: 767px){
  
  /* 説明文（.coord__desc）と箇条書きの間 */
  #tocotoco .coord__desc {
    margin-bottom: 1.4em !important;
    line-height: 1.55; /* 行間も少し広げて読みやすく */
  }

  /* 箇条書き（.coord__points）とリンクの間 */
  #tocotoco .coord__points {
    margin-bottom: 1.6em !important;
  }

  /* “このコーデのアイテムを見る”リンクの上余白 */
  #tocotoco .coord__body .link-under {
    margin-top: 1.2em !important;
    display: inline-block;
  }
}
/* ===== スマホ時の余白調整まとめ ===== */
@media (max-width: 767px){

  /* 1) CTA「掲載についてのお問い合わせはこちら」ボタンの上に余白を足す */
  #tocotoco .lp-recruit .btn--primary{
    margin-top: 1.6rem;
  }

  /* 2) ヒーロー（2025年冬のおしゃれコーデのブロック）と
        その下のリード（tocotocoが選ぶ?）の間を詰める */
  #tocotoco .lp-hero{
    padding-bottom: 40px !important;  /* 今より少しだけ短くする（56px → 40pxイメージ） */
  }
  #tocotoco .lp-lead--compact{
    padding-top: 1.2rem !important;   /* 上の余白も控えめに */
  }

  /* 3) クーポンキャンペーンの赤枠（.campaign）と、その下の余白を詰める */
  #tocotoco .lp-lead--compact .campaign{
    margin-bottom: 0.6rem !important; /* 赤枠の下をキュッと詰める */
  }
  /* 赤枠の中の文章と、その下の要素（リストなど）の間も少しだけ詰める */
  #tocotoco .lp-lead--compact .campaign__desc{
    margin-bottom: 0.4rem;
  }
  #tocotoco .lp-lead--compact .campaign__benefits{
    margin-top: 0.8rem !important;    /* 必要ならここも少し詰める */
  }
}

/* 参加ショップ紹介内のクーポンコード強調 */
#tocotoco .lp-benefits .campaign__desc {
  margin: 0 0 1.4rem;!important;
  font-size: 0.95rem;
  line-height: 1.8;
}

#tocotoco .lp-benefits .campaign__desc strong {
  color: #e56f5d !important;        /* 文字色をアクセントに */
  font-weight: 700;
  background: #fff4f2;
  padding: 0.22em 0.35em 0.28em; 
  border-radius: 4px;
  line-height: 1.3;
}
.coupon-usage-wrap {
  margin-top: 12px;   /* テキストとの間隔を広げる */
  margin-bottom: 20px; /* 下に余白を追加 */
}

.coupon-usage-link {
  display: inline-block;
  text-decoration: underline;
}