/* ============================================================
   futon.infobypass.com  /  朝起きたら腰が痛い人の寝具えらび
   テーマ: 夜(深いインディゴ) → 朝(あたたかいアンバー)
   方針: Webフォント不使用・軽量CSS / 読みやすい大きめ文字
   ============================================================ */

:root{
  --ink:#1c2433;
  --ink-soft:#55607a;
  --night:#1a2238;
  --night-2:#2b3a67;
  --dawn:#f4a261;
  --dawn-deep:#e76f51;
  --paper:#faf7f2;
  --card:#ffffff;
  --line:#e7e1d6;
  --pr:#d80000;
  --shadow:0 1px 2px rgba(26,34,56,.06),0 8px 24px rgba(26,34,56,.07);
  --radius:14px;
  --maxw:1000px;
  --sans:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",
          "Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
}

*{box-sizing:border-box}
/* hidden 属性を最優先で効かせる（フィルタの絞り込みを確実に動かす） */
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);color:var(--ink);
  background:var(--paper);line-height:1.85;
  font-size:18px;letter-spacing:.01em;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--dawn-deep);text-underline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ---------- PR表示バー（ステマ規制対応・固定・赤文字） ---------- */
.pr-bar{
  position:sticky;top:0;z-index:60;
  background:#fff;color:var(--pr);
  text-align:center;font-weight:800;
  font-size:1rem;letter-spacing:.04em;
  padding:9px 12px;border-bottom:2px solid var(--pr);
}

/* ---------- ヘッダー ---------- */
.site-head{
  background:linear-gradient(180deg,var(--night) 0%,var(--night-2) 100%);
  color:#fff;
}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;
  padding-top:15px;padding-bottom:15px}
.brand{font-weight:800;font-size:1.15rem;letter-spacing:.02em;color:#fff;text-decoration:none;
  display:flex;align-items:center;gap:.5em}
.brand .moon{font-size:1.2em;filter:drop-shadow(0 0 6px rgba(244,162,97,.6))}
.site-head nav a{color:#cfd6ea;text-decoration:none;font-size:.95rem;margin-left:18px}
.site-head nav a:hover{color:#fff}

/* ---------- ヒーロー ---------- */
.hero{
  background:
    radial-gradient(120% 80% at 80% -10%,rgba(244,162,97,.35),transparent 55%),
    linear-gradient(180deg,var(--night-2) 0%,var(--night) 70%);
  color:#fff;padding:54px 0 60px;position:relative;overflow:hidden;
}
.hero h1{font-size:clamp(1.8rem,5vw,2.7rem);line-height:1.4;margin:0 0 .5em;
  font-weight:900;letter-spacing:.01em}
.hero h1 .hl{color:var(--dawn);border-bottom:4px solid rgba(244,162,97,.45)}
.hero p{max-width:42em;color:#dde2f0;margin:.4em 0 0;font-size:1.12rem;line-height:1.9}
.hero .sun{position:absolute;top:24px;right:6%;width:84px;height:84px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#ffd9a0,var(--dawn) 65%,transparent 72%);
  filter:blur(.3px);opacity:.9}

/* ---------- 固定ページの簡易ヒーロー ---------- */
.page-hero{
  background:linear-gradient(180deg,var(--night-2) 0%,var(--night) 100%);
  color:#fff;padding:34px 0 36px;
}
.page-hero h1{margin:0;font-size:clamp(1.5rem,4.4vw,2.1rem);font-weight:900}
.page-hero p{margin:.5em 0 0;color:#cfd6ea;font-size:1.02rem}

/* ---------- 固定ページ本文 ---------- */
.page-body{padding:30px 0 10px}
.page-body h2{font-size:1.35rem;margin:30px 0 8px;
  border-left:6px solid var(--dawn);padding-left:.5em}
.page-body h2:first-child{margin-top:6px}
.page-body p,.page-body li{font-size:1.05rem;line-height:1.95}
.page-body ul,.page-body ol{padding-left:1.4em}
.page-body li{margin:.4em 0}
.page-body .updated{color:var(--ink-soft);font-size:.92rem;margin-top:28px}
.page-body .contact-box{background:#fff;border:1px solid var(--line);
  border-left:6px solid var(--dawn-deep);border-radius:12px;
  padding:20px 22px;box-shadow:var(--shadow);margin:14px 0}
.page-body .contact-box .mail{font-size:1.2rem;font-weight:800;color:var(--night-2);
  word-break:break-all}
.page-body .sitemap-list a{font-weight:700}

/* ---------- 開示 ---------- */
.disclosure{background:#fff7ec;border:1px solid #f0d9b8;color:#7a5a2a;
  border-radius:10px;padding:14px 18px;margin:26px 0;font-size:.98rem;line-height:1.8}

/* ---------- セクション共通 ---------- */
section{padding:14px 0}
.section-title{font-size:1.55rem;font-weight:800;margin:36px 0 6px;
  display:flex;align-items:center;gap:.45em}
.section-title .bar{width:7px;height:1.1em;background:var(--dawn);border-radius:3px;display:inline-block}
.lead{color:var(--ink-soft);margin:.2em 0 1.2em;font-size:1.05rem}

/* ---------- 管理人の体験談 ---------- */
.owner{
  background:linear-gradient(180deg,#fff 0%,#fffdf8 100%);
  border:1px solid var(--line);border-left:6px solid var(--dawn-deep);
  border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);margin:10px 0 8px;
}
.owner h2{margin:.2em 0 .5em;font-size:1.5rem;line-height:1.45}
.owner p{font-size:1.08rem;line-height:1.95;margin:0 0 1em}
.owner .badge{display:inline-block;background:var(--dawn-deep);color:#fff;
  font-size:.82rem;font-weight:700;padding:4px 12px;border-radius:999px;letter-spacing:.04em}
.owner .point{background:#fff;border:1px dashed #e2c79c;border-radius:10px;
  padding:16px 18px;margin:8px 0 4px;font-size:1.05rem;line-height:1.9}
.owner .point b{color:var(--dawn-deep)}

/* 証拠画像：大きく見せる */
.owner figure.proof{margin:24px auto 6px;text-align:center}
.owner figure.proof a{display:inline-block;line-height:0}
.owner figure.proof img{
  width:100%;max-width:820px;margin:0 auto;
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
}
.owner figure.proof figcaption{font-size:.98rem;color:var(--ink-soft);margin-top:12px}

/* 体験談の大きなCTA（ご要望：もっと大きく） */
.owner-cta{margin-top:24px;text-align:center}
.owner-cta .cta{
  display:inline-block;font-size:1.35rem;font-weight:900;
  padding:20px 44px;border-radius:16px;letter-spacing:.02em;
  box-shadow:0 6px 18px rgba(191,0,0,.28);
  max-width:560px;width:100%;
}
.owner-cta .cta .arrow{margin-left:.5em}

/* ---------- フィルタ ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 22px}
.filters button{
  font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;
  border:1.5px solid var(--line);background:#fff;color:var(--ink);
  padding:11px 17px;border-radius:999px;transition:.15s;
}
.filters button .ic{margin-right:.35em}
.filters button:hover{border-color:var(--dawn)}
.filters button[aria-pressed="true"]{
  background:var(--night);color:#fff;border-color:var(--night);
}
.filter-desc{min-height:1.4em;color:var(--ink-soft);font-size:1.02rem;margin:-12px 0 18px}

/* ---------- 商品カード ---------- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column;
  transition:transform .15s,box-shadow .15s;position:relative;
}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(26,34,56,.12)}
.card.pick{border:2px solid var(--dawn-deep)}
.card .pin{position:absolute;top:-12px;left:18px;background:var(--dawn-deep);color:#fff;
  font-size:.82rem;font-weight:800;padding:5px 13px;border-radius:999px;letter-spacing:.03em}
.card .type{font-size:.82rem;font-weight:700;color:var(--night-2);background:#eef1f8;
  display:inline-block;padding:4px 10px;border-radius:6px}
.card h3{font-size:1.15rem;line-height:1.5;margin:11px 0 4px}
.card .maker{font-size:.9rem;color:var(--ink-soft);margin:0 0 8px}
.card .price{font-size:1.3rem;font-weight:800;color:var(--dawn-deep);margin:2px 0 6px}
.card .price.ask{font-size:1rem;color:var(--ink-soft);font-weight:600}
.card .hl{font-size:1.02rem;color:var(--ink);margin:0 0 10px;line-height:1.8}
.card .spec{font-size:.9rem;color:var(--ink-soft);border-top:1px dashed var(--line);
  padding-top:9px;margin:4px 0 10px}
.card ul.feat{list-style:none;padding:0;margin:0 0 14px;font-size:.96rem}
.card ul.feat li{padding:3px 0 3px 18px;position:relative;color:var(--ink-soft);line-height:1.7}
.card ul.feat li::before{content:"›";position:absolute;left:2px;color:var(--dawn);font-weight:800}
.card .needs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.card .needs span{font-size:.82rem;background:#fff4e6;color:#9a6418;
  border:1px solid #f0dcc0;padding:3px 9px;border-radius:999px}
.cta{
  margin-top:auto;display:inline-block;text-align:center;text-decoration:none;
  background:var(--dawn-deep);color:#fff;font-weight:800;font-size:1.08rem;
  padding:14px 18px;border-radius:10px;transition:.15s;
}
.cta:hover{background:#d65b3d}
.cta.rakuten{background:#bf0000}
.cta.rakuten:hover{background:#a30000}
.cta .arrow{margin-left:.4em}
.empty{grid-column:1/-1;text-align:center;color:var(--ink-soft);padding:40px 0;font-size:1.05rem}

/* ---------- 選び方ガイド / FAQ ---------- */
.guide{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow);margin-top:10px}
.guide ol{margin:0;padding-left:1.3em}
.guide ol li{margin:.6em 0;font-size:1.05rem;line-height:1.9}
.guide ol li b{color:var(--night-2)}
details.faq{background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:4px 20px;margin:11px 0}
details.faq summary{cursor:pointer;font-weight:700;padding:14px 0;list-style:none;font-size:1.08rem}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{content:"Q ";color:var(--dawn-deep);font-weight:900}
details.faq[open] summary{border-bottom:1px dashed var(--line)}
details.faq .ans{padding:13px 0 15px;color:var(--ink-soft);font-size:1.02rem;line-height:1.9}
details.faq .ans::before{content:"A ";color:var(--night-2);font-weight:900}

/* ---------- フッター ---------- */
.site-foot{background:var(--night);color:#aeb6cc;margin-top:48px;
  padding:32px 0;font-size:.95rem;line-height:1.9}
.site-foot a{color:#cfd6ea}
.site-foot .small{color:#8089a4;font-size:.86rem;margin-top:12px;line-height:1.8}
.foot-nav{display:flex;flex-wrap:wrap;gap:12px 24px;margin:0 0 18px;padding-bottom:16px;
  border-bottom:1px solid #2c365a}
.foot-nav a{color:#dfe4f2;text-decoration:none;font-size:.98rem;font-weight:600}
.foot-nav a:hover{color:#fff;text-decoration:underline}

/* ---------- レスポンシブ ---------- */
@media(max-width:720px){
  body{font-size:17px}
  .cards{grid-template-columns:1fr}
  .site-head nav a{margin-left:12px}
  .owner{padding:22px}
  .owner figure.proof img{max-width:100%}
  .owner-cta .cta{font-size:1.18rem;padding:18px 24px}
}