/* =========================================================
   おしえてトレンド図解 — まとめサイト 共通スタイル
   LPと同一世界観：純白＋淡ピンク＋ベージュ/ブラウン
   Fonts: Zen Maru Gothic / Zen Kaku Gothic New / Italiana
   ========================================================= */
:root{
  --white:#ffffff;
  --ink:#3a3430;
  --ink-soft:#7d736e;
  /* ▼ インスタ表紙の実物パレット */
  --magenta:#e4226f;
  --magenta-deep:#c8195c;
  --magenta-pale:#fde7f0;
  --navy:#1b1f35;
  --navy-soft:#2c3047;
  --gold:#f4b933;
  /* ▼ 面・カード地に残す淡ピンク */
  --pink:#f6b8c4;
  --pink-deep:#ec8ba1;
  --pink-pale:#fdeef1;
  --pink-mist:#fbf5f6;
  --beige:#e9ddd4;
  --brown:#b89a86;
  --line:#f3d9e1;
  --radius:22px;
  --maxw:680px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  font-family:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.85;
  word-break:keep-all;
  line-break:strict;
  overflow-wrap:break-word;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  min-height:100vh;
  position:relative;
  background:var(--white);
  overflow:hidden;
}
/* 背景の上品なドット */
.wrap::before{
  content:"";
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(246,184,196,.30) 1.4px, transparent 1.6px);
  background-size:22px 22px;
  opacity:.45;
  pointer-events:none;
  z-index:0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 4%,#000 96%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 4%,#000 96%,transparent 100%);
}
.inner{position:relative;z-index:2;padding:0 22px 44px;}

/* ====== アフィリエイト開示（ページ最上部の1行・大手メディア標準形） ====== */
.aff-note{
  position:relative;z-index:3;
  text-align:center;
  font-size:10.5px;line-height:1.6;letter-spacing:.02em;
  color:#9a8f89;
  background:var(--pink-mist);
  border-bottom:1px solid var(--line);
  padding:7px 18px;
}

/* ====== 章を作る面（バンド）：.inner の左右パディングを食い破る ====== */
.band{position:relative;margin:0 -22px;}
.band--wash{
  background:linear-gradient(180deg, var(--pink-mist) 0%, var(--pink-pale) 55%, var(--pink-mist) 100%);
  padding:8px 0 36px;
  margin-top:40px;
}
.band--wash::before,
.band--wash::after{
  content:"";position:absolute;left:0;right:0;height:26px;
  background-repeat:no-repeat;background-size:100% 100%;pointer-events:none;
}
.band--wash::before{
  top:-25px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 680 26' preserveAspectRatio='none'%3E%3Cpath d='M0 26 C170 2 510 2 680 26 L680 26 L0 26 Z' fill='%23fbf5f6'/%3E%3C/svg%3E");
}
.band--wash::after{
  bottom:-25px;transform:scaleY(-1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 680 26' preserveAspectRatio='none'%3E%3Cpath d='M0 26 C170 2 510 2 680 26 L680 26 L0 26 Z' fill='%23fbf5f6'/%3E%3C/svg%3E");
}
.band > .band-inner{padding:0 22px;}
@media (max-width:359px){
  .band{margin:0 -16px;}
  .band > .band-inner{padding:0 16px;}
}

/* きらめき装飾 */
.deco-sparkle{position:absolute;z-index:1;pointer-events:none;color:var(--gold);opacity:.9;}

/* =========================================================
   ヘッダー（ブランドバー兼パンくず）— 全ページ共通
   ========================================================= */
.sitehead{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:18px 22px 14px;
  max-width:var(--maxw);margin:0 auto;
}
.sitehead .home{
  display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;color:inherit;
}
.sitehead .leaf{width:14px;color:var(--brown);opacity:.7;}
.sitehead .brand{
  font-family:"Zen Maru Gothic",sans-serif;
  font-weight:700;font-size:14px;letter-spacing:.10em;
  color:var(--ink);white-space:nowrap;
}
.sitehead .brand b{color:var(--magenta);font-weight:700;}
.sitehead .toLp{
  font-family:"Zen Maru Gothic",sans-serif;
  font-weight:700;font-size:11.5px;letter-spacing:.04em;
  color:var(--ink-soft);text-decoration:none;
  border:1px solid var(--line);border-radius:999px;
  padding:6px 13px;white-space:nowrap;
  background:#fff;
  transition:border-color .18s ease,color .18s ease;
}
.sitehead .toLp:hover{border-color:var(--magenta);color:var(--magenta);}
.sitehead .toLp .arw{display:inline-block;margin-left:3px;}

/* 区切りの小花罫線 */
.divider{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin:24px auto;color:var(--line);
}
.divider .ln{height:1px;width:54px;background:linear-gradient(90deg,transparent,var(--line));}
.divider .ln.r{background:linear-gradient(90deg,var(--line),transparent);}
.divider .fl{color:var(--magenta);width:15px;}

/* =========================================================
   トップページ：ヒーロー
   ========================================================= */
.tophero{text-align:center;padding:12px 0 4px;}
.tophero .eyebrow{
  font-family:"Italiana",serif;
  font-size:12px;letter-spacing:.40em;
  color:var(--brown);text-transform:uppercase;
  margin-bottom:16px;padding-left:.40em;
}
.tophero .eyebrow span{
  display:inline-block;border-bottom:1px solid var(--line);padding-bottom:7px;
}
.tophero h1{
  font-family:"Zen Maru Gothic",sans-serif;
  font-weight:700;
  font-size:clamp(22px,6.2vw,30px);
  line-height:1.55;letter-spacing:.01em;color:var(--navy);
}
.tophero h1 em{font-style:normal;color:var(--magenta);position:relative;}
.tophero h1 em::after{
  content:"";position:absolute;left:-2px;right:-2px;bottom:.06em;height:.3em;
  background:var(--gold);opacity:.55;z-index:-1;border-radius:3px;
}
.tophero .lead{
  font-size:13.5px;line-height:2.0;color:var(--ink-soft);
  margin:16px auto 0;max-width:360px;
}

/* =========================================================
   カテゴリ／ギャラリー
   ========================================================= */
.cat{margin-top:36px;}
.band--wash .cat--onband{margin-top:14px;}
/* 大胆な番号を左に置いた編集誌レイアウトの見出し（スケール対比） */
.cat-head{
  margin-bottom:18px;
  display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:start;
}
.cat-no{
  grid-row:1 / span 3;
  font-family:"Italiana",serif;font-weight:400;
  font-size:clamp(46px,15vw,68px);line-height:.82;letter-spacing:-.01em;
  /* アウトライン：マゼンタの輪郭＋極淡の塗り（表紙の数字のメリハリ） */
  -webkit-text-stroke:1.4px var(--magenta);color:var(--magenta-pale);
}
.cat-kicker{
  display:inline-flex;align-items:center;gap:7px;
  font-family:"Italiana",serif;font-size:11px;letter-spacing:.24em;
  color:var(--brown);text-transform:uppercase;margin-bottom:3px;
}
.cat-kicker .no{
  width:14px;height:1px;background:var(--pink);display:inline-block;
}
.cat-title{
  font-family:"Zen Maru Gothic",sans-serif;font-weight:700;
  font-size:clamp(18px,5.2vw,22px);letter-spacing:.02em;color:var(--navy);line-height:1.45;
}
.cat-lead{
  grid-column:2;
  font-size:12.5px;line-height:1.85;color:var(--ink-soft);margin-top:6px;
}

.gallery{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
}
.card{
  display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 8px 20px -16px rgba(74,67,64,.4);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 26px -16px rgba(228,34,111,.45);
  border-color:var(--magenta);
}
.card:active{transform:scale(.99);}
.card .thumb{
  position:relative;width:100%;aspect-ratio:1/1.34;overflow:hidden;
  background:var(--pink-mist);
}
.card .thumb img{
  width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
}
.card .body{padding:11px 13px 14px;flex:1 1 auto;display:flex;flex-direction:column;}
.card .ctitle{
  font-family:"Zen Maru Gothic",sans-serif;font-weight:700;
  font-size:13.5px;line-height:1.55;letter-spacing:.01em;color:var(--navy);
}
.card .cmeta{
  margin-top:auto;padding-top:9px;
  display:flex;align-items:center;gap:6px;
  font-size:11px;color:var(--magenta);
  font-family:"Zen Maru Gothic",sans-serif;font-weight:700;letter-spacing:.04em;
}
.card .cmeta .ig{width:14px;height:14px;flex:0 0 auto;}
.card .cmeta .arw{width:13px;margin-left:-2px;}

/* ====== フィーチャーカード（章の先頭を大きく：カードサイズの強弱） ====== */
.card--feature{
  grid-column:1 / -1;
  flex-direction:row;
  border-color:var(--magenta);
  box-shadow:0 14px 30px -18px rgba(228,34,111,.45);
}
/* 画像パネルは表紙そのままの 3:4。カード高はこの画像で決まる＝右側に余白が生まれない */
.card--feature .thumb{
  width:38%;flex:0 0 38%;
  aspect-ratio:3/4;height:auto;align-self:stretch;
  border-right:1.5px solid var(--line);
}
.card--feature .thumb img{height:100%;object-fit:cover;object-position:center top;}
.card--feature .body{
  padding:18px 22px 18px 24px;gap:0;
  justify-content:space-between;
}
.card--feature .feat-kicker{
  display:inline-flex;align-items:center;gap:6px;
  font-family:"Italiana",serif;font-size:11px;letter-spacing:.22em;
  color:var(--brown);text-transform:uppercase;margin-bottom:0;
}
.card--feature .feat-kicker .dot{width:5px;height:5px;border-radius:50%;background:var(--magenta);}
.card--feature .ctitle{
  font-size:clamp(17px,2.2vw,21px);line-height:1.46;margin-top:9px;
}
.card--feature .flead{
  display:block;margin-top:10px;
  font-family:"Zen Kaku Gothic New",sans-serif;font-weight:400;
  font-size:13px;line-height:1.85;color:var(--ink-soft);
}
.card--feature .fnote{
  display:flex;align-items:center;gap:8px;margin-top:13px;
  font-family:"Zen Maru Gothic",sans-serif;font-weight:500;
  font-size:11.5px;letter-spacing:.02em;color:var(--brown);
}
.card--feature .fnote::before{
  content:"";flex:0 0 16px;height:1.5px;background:var(--magenta);opacity:.5;
}
/* CTA は大きめのピル型に */
.card--feature .cmeta{
  margin-top:16px;padding-top:0;align-self:flex-start;
  padding:9px 16px;border-radius:999px;
  background:var(--magenta);color:#fff;font-size:12.5px;
  box-shadow:0 8px 18px -10px rgba(228,34,111,.7);
  transition:transform .2s ease,box-shadow .2s ease;
}
.card--feature .cmeta .ig{width:15px;height:15px;}
.card--feature .cmeta .arw{width:14px;margin-left:0;}
.card--feature:hover .cmeta{transform:translateX(3px);box-shadow:0 10px 20px -10px rgba(228,34,111,.8);}

/* =========================================================
   個別ページ
   ========================================================= */
.article{padding-top:4px;}
.article .eyebrow{
  font-family:"Italiana",serif;font-size:11px;letter-spacing:.30em;
  color:var(--brown);text-transform:uppercase;text-align:center;
  margin-bottom:12px;padding-left:.30em;
}
.article h1{
  font-family:"Zen Maru Gothic",sans-serif;font-weight:700;
  font-size:clamp(20px,5.6vw,26px);line-height:1.5;letter-spacing:.01em;
  color:var(--ink);text-align:center;margin-bottom:18px;
}
.article h1 em{font-style:normal;color:var(--pink-deep);}
.lede{
  font-size:13.5px;line-height:2.0;color:var(--ink-soft);
  max-width:420px;margin:0 auto;text-align:center;
}
.figwrap{
  margin:26px auto 8px;max-width:460px;
  border-radius:18px;overflow:hidden;
  border:1.5px solid var(--line);
  box-shadow:0 14px 32px -20px rgba(236,139,161,.5);
  background:#fff;
}
.figwrap img{width:100%;height:auto;display:block;}
.figcap{
  text-align:center;font-size:11px;color:var(--brown);
  margin-top:9px;letter-spacing:.04em;
}
.closing{
  font-size:13.5px;line-height:2.0;color:var(--ink);
  max-width:420px;margin:24px auto 0;text-align:center;
}
.closing b{color:var(--pink-deep);font-weight:700;}

/* =========================================================
   CTA（共通）
   ========================================================= */
.ctas{display:flex;flex-direction:column;gap:14px;margin-top:8px;}
.lk{
  display:flex;align-items:center;gap:14px;
  text-decoration:none;color:inherit;background:#fff;
  border:1.5px solid var(--line);border-radius:var(--radius);
  padding:15px 18px;position:relative;
  transition:transform .18s ease,box-shadow .18s ease;
  box-shadow:0 6px 18px -14px rgba(74,67,64,.35);
}
.lk:active{transform:scale(.985);}
.lk:hover{transform:translateY(-2px);border-color:var(--magenta);box-shadow:0 12px 24px -14px rgba(228,34,111,.4);}
.lk .ic{
  flex:0 0 auto;width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--magenta-pale);color:var(--magenta);
}
.lk .ic svg{width:23px;height:23px;}
.lk .tx{flex:1 1 auto;min-width:0;}
.lk .label{
  font-family:"Zen Maru Gothic",sans-serif;font-weight:700;
  font-size:15px;letter-spacing:.01em;line-height:1.5;color:var(--ink);
}
.lk .desc{font-size:11.5px;line-height:1.7;color:var(--ink-soft);margin-top:3px;}
.lk .arw{flex:0 0 auto;color:var(--brown);opacity:.55;width:18px;}

/* ① Instagram：主導線 */
.lk--primary{
  background:linear-gradient(180deg,#fff 0%, var(--pink-pale) 100%);
  border-color:var(--pink);
  box-shadow:0 12px 26px -14px rgba(236,139,161,.6);
}
.lk--primary .ic{background:var(--pink-deep);color:#fff;}
.lk--primary .label{font-size:16px;color:var(--ink);}
.lk--primary .arw{color:var(--pink-deep);opacity:.9;}
.lk--primary .pin{
  position:absolute;top:-9px;right:18px;
  background:var(--pink-deep);color:#fff;
  font-family:"Zen Maru Gothic",sans-serif;font-weight:700;
  font-size:10px;letter-spacing:.06em;padding:3px 12px;border-radius:999px;
  line-height:1.4;box-shadow:0 6px 14px -6px rgba(236,139,161,.7);
}
/* 回遊（前後＋トップ） */
.nav-around{
  margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:11px;
}
.nav-around a{
  display:flex;flex-direction:column;gap:3px;
  text-decoration:none;color:inherit;background:var(--pink-mist);
  border:1px solid var(--line);border-radius:16px;padding:13px 15px;
  transition:border-color .18s ease,background .18s ease;
}
.nav-around a:hover{border-color:var(--pink);background:#fff;}
.nav-around a.next{text-align:right;align-items:flex-end;}
.nav-around .dir{
  font-family:"Italiana",serif;font-size:10.5px;letter-spacing:.18em;
  color:var(--brown);text-transform:uppercase;
}
.nav-around .ttl{
  font-family:"Zen Maru Gothic",sans-serif;font-weight:700;
  font-size:12px;line-height:1.5;color:var(--ink);
}
.nav-around .empty{visibility:hidden;}
.back-top{
  display:block;text-align:center;margin:16px auto 0;
  font-family:"Zen Maru Gothic",sans-serif;font-weight:700;
  font-size:12.5px;letter-spacing:.04em;color:var(--ink-soft);
  text-decoration:none;border:1px solid var(--line);border-radius:999px;
  padding:11px 22px;background:#fff;max-width:260px;
  transition:border-color .18s ease,color .18s ease;
}
.back-top:hover{border-color:var(--pink);color:var(--pink-deep);}

.softnote{
  font-size:12.5px;line-height:1.95;color:var(--ink-soft);
  text-align:center;max-width:380px;margin:26px auto 0;
}

/* =========================================================
   フッター
   ========================================================= */
.foot{margin-top:36px;text-align:center;position:relative;z-index:2;}
.foot .fdiv{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-bottom:18px;color:var(--line);
}
.foot .fdiv .ln{height:1px;width:40px;background:var(--line);}
.foot .fl{color:var(--pink);width:13px;}
.owner{
  font-family:"Zen Maru Gothic",sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.06em;color:var(--ink);margin-bottom:4px;
}
.owner em{font-style:normal;font-family:"Italiana",serif;letter-spacing:.1em;}
.pr{font-size:12px;line-height:1.85;color:#7d736e;max-width:330px;margin:10px auto 0;}
.fnote{font-size:11px;line-height:1.8;color:#a89e98;max-width:330px;margin:8px auto 0;}
.copy{
  font-family:"Italiana",serif;font-size:11px;letter-spacing:.14em;
  color:var(--brown);margin-top:16px;padding-left:.14em;
}
.copy .jp{font-family:"Zen Maru Gothic",sans-serif;font-size:10.5px;letter-spacing:.08em;}

/* 「わたしのお気に入り」タグ（最下部CTAで使用。開示は上部1行＋フッターで二重担保） */
.favtag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:"Zen Maru Gothic",sans-serif;font-weight:700;
  font-size:11.5px;letter-spacing:.06em;color:var(--magenta);
  background:#fff;border:1.5px solid var(--magenta);
  padding:4px 13px;border-radius:999px;line-height:1.5;
  box-shadow:0 6px 14px -8px rgba(228,34,111,.4);
  /* ステッカー感：ほんの少し傾ける */
  transform:rotate(-2deg);
}
.favtag .ht{width:12px;height:12px;color:var(--magenta);}

/* =========================================================
   最下部の強めCTA（総合ROOM導線）
   ========================================================= */
/* 表紙の原則：白地＋マゼンタの太アウトライン＋文字。面はベタにしない。
   ボタン(.fc-go)だけソリッドで「押せる強さ」を担保。 */
.finalcta{
  position:relative;text-align:center;
  margin-top:8px;
  background:#fff;
  border:2.5px solid var(--magenta);
  border-radius:26px;
  padding:26px 22px 24px;
  box-shadow:0 18px 34px -20px rgba(228,34,111,.45);
  overflow:hidden;
}
/* 表紙の「きらめき」を隅に小物として */
.finalcta::before,
.finalcta::after{
  content:"";position:absolute;width:9px;height:9px;border-radius:50%;
  background:var(--gold);opacity:.7;
}
.finalcta::before{top:18px;left:20px;}
.finalcta::after{bottom:20px;right:22px;background:var(--magenta);opacity:.4;}
.finalcta .favtag{
  position:relative;font-size:12px;padding:5px 15px;margin-bottom:14px;
  transform:rotate(-1.6deg);
  background:#fff;border:1.5px solid var(--magenta);color:var(--magenta);
}
.finalcta .favtag .ht{color:var(--magenta);}
.finalcta .fc-title{
  font-family:"Zen Maru Gothic",sans-serif;font-weight:700;
  font-size:clamp(18px,5.3vw,23px);line-height:1.5;letter-spacing:.005em;
  color:var(--navy);
}
.finalcta .fc-title em{font-style:normal;color:var(--magenta);}
.finalcta .fc-title .ln1,
.finalcta .fc-title .ln2{display:block;}
.finalcta .fc-body{
  font-size:13px;line-height:1.95;color:var(--ink-soft);margin:12px auto 0;max-width:340px;
}
/* ここがソリッド：ボタンサイズだけマゼンタ地＋白文字 */
.finalcta .fc-go{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;margin-top:20px;
  max-width:100%;
  font-family:"Zen Maru Gothic",sans-serif;font-weight:700;
  font-size:clamp(13.5px,4.2vw,15px);letter-spacing:.02em;color:#fff;text-decoration:none;
  background:var(--magenta);
  padding:14px 24px;border-radius:999px;
  box-shadow:0 14px 28px -12px rgba(228,34,111,.6);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.finalcta .fc-go:hover{transform:translateY(-2px);background:var(--magenta-deep);box-shadow:0 20px 34px -12px rgba(228,34,111,.7);}
.finalcta .fc-go:active{transform:scale(.985);}
.finalcta .fc-go .ic{display:inline-flex;align-items:center;}
.finalcta .fc-go .ic svg{width:20px;height:20px;}
.finalcta .fc-go .arw{width:16px;transition:transform .18s ease;}
.finalcta .fc-go:hover .arw{transform:translateX(4px);}

/* サブCTA（Instagram・最下部CTAの下） */
.subcta{margin-top:18px;}

.credit{margin-top:13px;font-size:10px;letter-spacing:.04em;color:#bcb2ac;text-align:center;}
.credit a{color:#bcb2ac;text-decoration:none;border-bottom:1px solid #ece4e0;}
.credit a:hover{color:var(--brown);}
.credit .rb-i{color:#1E6FFF;}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (min-width:560px){
  .gallery{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:700px){
  .wrap{box-shadow:0 0 80px -30px rgba(236,139,161,.28);}
}
/* スマホ・小タブレット：フィーチャーカードを横長のまま情報密度を保つ */
@media (max-width:559px){
  .card--feature .thumb{width:42%;flex:0 0 42%;}
  .card--feature .body{padding:15px 16px;}
  .card--feature .ctitle{font-size:16px;line-height:1.42;margin-top:8px;}
  .card--feature .flead{font-size:12px;line-height:1.7;margin-top:8px;}
  .card--feature .fnote{font-size:11px;margin-top:10px;}
  .card--feature .cmeta{margin-top:13px;padding:8px 14px;font-size:11.5px;}
}
@media (max-width:359px){
  .gallery{grid-template-columns:repeat(2,1fr);gap:11px;}
  .card .ctitle{font-size:12.5px;}
  .card--feature .ctitle{font-size:15px;}
  .card--feature .body{padding:13px 13px;}
  .card--feature .flead{font-size:11.5px;}
  .card--feature .fnote{display:none;}
  .cat-head{column-gap:11px;}
  .cat-no{font-size:46px;}
  .sitehead .brand{font-size:13px;}
  .inner{padding:0 16px 40px;}
  .finalcta{padding:22px 14px 22px;}
  .finalcta .fc-title{font-size:17px;letter-spacing:0;}
  .finalcta .fc-go{padding:12px 14px;gap:7px;}
  .finalcta .fc-go .ic svg{width:18px;height:18px;}
}