/* ゆいどころ 特集ページ共通スタイル
   ── スマホ優先。丸み・手描き・大きな写真・横スライド。
   色はブランド基準（えんじ・生成り・セージ・やさしい桃・墨色）から出ない。 */

:root{
  --enji:#933E44;
  --kinari:#F9E8CE;
  --sage:#99A084;
  --momo:#EAAC97;
  --sumi:#37322D;
  --paper:#FFFBF3;
  --card:#FFFFFF;
  --line:#E7DCC8;
  --ink-soft:#6A6157;
  --r-lg:28px;
  --r-md:20px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;}
body{
  margin:0;overflow-x:hidden;background:var(--paper);color:var(--sumi);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans CJK JP","Noto Sans JP",sans-serif;
  font-size:16px;line-height:1.95;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  padding-bottom:84px; /* 下部の固定CTA分 */
}
img{max-width:100%;display:block;}
a{color:inherit;}

/* ---------- レイアウト ---------- */
.wrap{width:100%;max-width:760px;margin:0 auto;padding:0 22px;}
.sec{padding:52px 0;}
.sec.tight{padding:34px 0;}
.sec.cream{background:var(--kinari);}
.sec.white{background:#fff;}

/* ---------- ヘッダー ---------- */
.hd{position:sticky;top:0;z-index:50;background:rgba(255,251,243,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.hd-in{max-width:760px;margin:0 auto;padding:10px 18px;display:flex;align-items:center;gap:10px;}
.hd-mark{width:34px;height:34px;border-radius:50%;background:var(--enji);color:#fff;display:grid;place-items:center;font-size:15px;flex:none;}
.hd-name{font-size:15px;line-height:1.3;}
.hd-name small{display:block;font-size:11px;color:var(--ink-soft);letter-spacing:.1em;}
.hd-line{margin-left:auto;background:#06C755;color:#fff;text-decoration:none;font-size:13px;font-weight:700;padding:9px 15px;border-radius:999px;white-space:nowrap;}

/* ---------- 見出し ---------- */
.eyebrow{display:inline-block;font-size:13px;letter-spacing:.18em;color:var(--enji);background:#fff;border:1px solid var(--momo);border-radius:999px;padding:5px 16px;margin:0 0 14px;}
h1{font-size:clamp(25px,6.6vw,40px);line-height:1.45;margin:0 0 14px;font-weight:700;letter-spacing:.01em;}
h2{font-size:clamp(23px,5.6vw,30px);line-height:1.5;margin:0 0 12px;font-weight:700;}
h3{font-size:19px;line-height:1.55;margin:0 0 6px;font-weight:700;}
.lead{font-size:16px;color:var(--ink-soft);margin:0;}
.mark{background:linear-gradient(transparent 62%,rgba(234,172,151,.6) 62%);}

/* 手描きの波線 */
.squiggle{display:block;width:104px;height:11px;margin:14px 0 0;overflow:visible;}
.squiggle path{fill:none;stroke:var(--momo);stroke-width:3.4;stroke-linecap:round;}
.center{text-align:center;}
.center .squiggle{margin:14px auto 0;}

/* ---------- 手描きの飾り ---------- */
.blob{position:absolute;border-radius:46% 54% 58% 42%/52% 44% 56% 48%;opacity:.5;pointer-events:none;}
.dot-row{display:flex;gap:7px;justify-content:center;margin:0 0 12px;}
.dot-row i{width:7px;height:7px;border-radius:50%;background:var(--momo);display:block;}
.dot-row i:nth-child(2){background:var(--sage);}
.dot-row i:nth-child(3){background:var(--enji);opacity:.6;}

/* ---------- 写真 ---------- */
.photo-full{width:100vw;margin-left:calc(50% - 50vw);}
.photo-full img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0;}
.photo-round{border-radius:var(--r-lg);overflow:hidden;}
.photo-round img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.circle{width:clamp(150px,44vw,210px);aspect-ratio:1/1;border-radius:50%;object-fit:cover;margin:0 auto;}
.cap{font-size:13px;color:var(--ink-soft);text-align:center;margin:10px 0 0;}

/* ---------- カード ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 20px;}
.card + .card{margin-top:16px;}
.pill{display:inline-block;font-size:12px;letter-spacing:.1em;color:#fff;background:var(--sage);border-radius:999px;padding:4px 13px;}
.pill.enji{background:var(--enji);}
.price{font-size:30px;font-weight:700;color:var(--enji);line-height:1.2;}
.price small{font-size:14px;font-weight:400;color:var(--ink-soft);}

/* ---------- 横スライド ---------- */
.slider{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  width:100vw;margin-left:calc(50% - 50vw);padding:4px 22px 16px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;}
.slider::-webkit-scrollbar{display:none;}
.slider.auto{scroll-behavior:auto;}
.slide{flex:0 0 74%;max-width:280px;scroll-snap-align:center;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;}
.slide img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#F4EFE4;}
.slide .b{padding:13px 15px 16px;}
.slide .nm{font-size:15px;line-height:1.5;margin:0 0 3px;font-weight:700;}
.slide .nm small{display:block;font-weight:400;font-size:12px;color:var(--ink-soft);}
.slide .sz{font-size:12px;color:var(--ink-soft);margin:0 0 6px;}
.slide .pr{font-size:18px;font-weight:700;margin:0;}
.swipe-hint{font-size:12.5px;color:var(--ink-soft);text-align:right;margin:0 0 4px;}

/* ---------- ステップ ---------- */
.steps{margin:22px 0 0;padding:0;list-style:none;}
.steps li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px dashed var(--line);}
.steps li:last-child{border-bottom:none;}
.steps .n{flex:none;width:34px;height:34px;border-radius:50%;background:var(--kinari);color:var(--enji);
  display:grid;place-items:center;font-size:13px;font-weight:700;}
.steps .ph{flex:none;width:66px;height:66px;border-radius:50%;object-fit:cover;}
.steps h3{margin:0 0 2px;font-size:17px;}
.steps p{margin:0;font-size:14.5px;color:var(--ink-soft);line-height:1.85;}

/* ---------- 箇条書き ---------- */
.dots{margin:16px 0 0;padding:0;list-style:none;}
.dots li{position:relative;padding-left:20px;margin-bottom:9px;font-size:15px;line-height:1.9;}
.dots li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:8px;border-radius:50%;background:var(--momo);}

/* ---------- CTA ---------- */
.btn-line{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#06C755;color:#fff;text-decoration:none;font-weight:700;font-size:17px;
  padding:16px 30px;border-radius:999px;box-shadow:0 6px 18px rgba(6,199,85,.28);}
.cta-fix{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,251,243,.96);
  backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:11px 18px calc(11px + env(safe-area-inset-bottom));}
.cta-fix .btn-line{width:100%;max-width:520px;margin:0 auto;display:flex;}

/* ---------- フッター ---------- */
.ft{background:#33372F;color:#EFEAE0;padding:34px 0 30px;margin-top:10px;}
.ft .wrap{max-width:760px;}
.ft .nm{font-size:17px;font-weight:700;margin:0 0 4px;}
.ft p{font-size:13.5px;line-height:1.9;color:#C9C4B7;margin:0 0 14px;}
.ft dl{display:grid;grid-template-columns:4.2em 1fr;gap:4px 10px;font-size:13.5px;margin:0 0 16px;}
.ft dt{color:#9FA294;}
.ft dd{margin:0;}
.ft .nav{display:flex;flex-wrap:wrap;gap:10px 18px;font-size:13.5px;padding-top:14px;border-top:1px solid #4A4E45;}
.ft .nav a{text-decoration:none;}
.ft .cp{font-size:11.5px;color:#8E9184;margin:16px 0 0;}

@media(min-width:760px){
  body{font-size:17px;}
  .photo-full{width:100%;margin-left:0;border-radius:var(--r-lg);overflow:hidden;}
  .photo-full img{aspect-ratio:16/8;}
  .slider{width:100%;margin-left:0;padding-left:0;padding-right:0;}
  .slide{flex:0 0 240px;}
}