/* ============================================================
   futon.infobypass.com  /  朝起きたら腰が痛い人の寝具えらび
   完全版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]{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バー＋ナビ統合スティッキーヘッダー */
.sticky-head{position:sticky;top:0;z-index:60;background:#fff;
  border-bottom:1px solid var(--line);box-shadow:0 1px 4px rgba(0,0,0,.06)}
.sticky-inner{display:flex;align-items:center;justify-content:space-between;padding-top:10px;padding-bottom:10px;gap:12px;flex-wrap:wrap}
.pr-label{color:var(--pr);font-weight:800;font-size:.92rem;white-space:nowrap;letter-spacing:.02em}
.sticky-nav{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.sticky-nav a{color:#1565C0;text-decoration:none;font-size:.95rem;font-weight:600}
.sticky-nav a:hover{text-decoration:underline}

/* ヘッダー（ヒーロー上のブランドバー）*/
.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))}

/* スクロール先のズレ防止（スティッキーヘッダー高さ分） */
#owner,#compare,#guide,.filters{scroll-margin-top:58px}
.pr-section{scroll-margin-top:58px}

/* ヒーロー */
.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}
.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%);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:#c1121f;color:#fff;font-size:1.1rem;font-weight:800;
  padding:8px 20px;border-radius:999px;letter-spacing:.05em;box-shadow:0 3px 10px rgba(193,18,31,.32)}
.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)}

/* 証拠画像2枚横並び */
.proof-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;align-items:start;margin:24px 0 6px}
.proof-item{margin:0;text-align:center}
.proof-item a{display:inline-block;line-height:0}
.proof-item img{width:100%;border-radius:10px;border:1px solid var(--line);box-shadow:var(--shadow)}
.proof-item figcaption{font-size:.9rem;color:var(--ink-soft);margin-top:8px;line-height:1.7}

/* 体験談の大きな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%}

/* フィルタ */
.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 8px}

/* フィルター状態表示 */
.filter-status{padding:10px 16px;border-radius:10px;font-size:1rem;line-height:1.6;margin:0 0 16px}
.filter-status.fs-ok{background:#f0f7ff;border:1px solid #b3d4fc;color:#1565C0}
.filter-status.fs-ng{background:#fff5f5;border:1px solid #f5c2c2;color:#c62828}
.fs-active strong{font-size:1.15rem}

/* 0件時の代替提案 */
.empty-help{grid-column:1/-1;text-align:center;padding:30px 20px;background:#fff;border:2px dashed var(--dawn);border-radius:var(--radius)}
.empty-msg{color:#c62828;font-size:1.1rem;font-weight:700;margin:0 0 16px}
.suggest-head{color:var(--ink);font-size:1rem;font-weight:600;margin:0 0 12px}
.suggest-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.suggest-btn{font-family:inherit;font-size:.92rem;font-weight:600;cursor:pointer;
  border:1.5px solid var(--dawn-deep);background:#fff;color:var(--dawn-deep);
  padding:10px 16px;border-radius:999px;transition:.15s}
.suggest-btn:hover{background:var(--dawn-deep);color:#fff}

/* 価格帯リンクボタン（フィルタ並び内） */
.price-range-link{font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;
  border:1.5px solid var(--dawn-deep);background:var(--dawn-deep);color:#fff;
  padding:11px 17px;border-radius:999px;transition:.15s;text-decoration:none;display:inline-block}
.price-range-link:hover{background:#d65b3d;border-color:#d65b3d;color:#fff}
.price-range-link .ic{margin-right:.35em}

/* タイプ別フィルター（2段目） */
.type-filters{margin:-12px 0 8px}
.type-filters button[aria-pressed="true"]{background:var(--dawn-deep);color:#fff;border-color:var(--dawn-deep)}

/* 商品カード */
.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}
.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}

/* ボタン2段重ね */
.card .btn-group{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.cta-detail{display:block;text-align:center;text-decoration:none;background:#fff;color:var(--night-2);
  font-weight:800;font-size:1rem;padding:11px 18px;border-radius:10px;border:2px solid var(--night-2);transition:.15s}
.cta-detail:hover{background:var(--night-2);color:#fff}
.cta-detail .arrow{margin-left:.4em}
.cta{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}

/* 選び方ガイド / 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}

/* 詳細ページ */
.breadcrumb-nav{font-size:.88rem;color:var(--ink-soft);margin:18px 0 24px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.breadcrumb-nav a{color:var(--dawn-deep);text-decoration:none}
.breadcrumb-nav a:hover{text-decoration:underline}
.detail-maker{font-size:.92rem;color:var(--ink-soft);margin:-10px 0 20px}
.detail-sec{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin:16px 0;box-shadow:var(--shadow)}
.detail-sec h2{font-size:1.3rem;font-weight:800;margin:0 0 12px;border-left:5px solid var(--dawn);padding-left:.5em}
.detail-sec p{margin:0;font-size:1.05rem;line-height:1.95}
.merit-grid,.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
.merit-box,.fit-box{border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow)}
.merit-box h2,.fit-box h2{font-size:1.15rem;margin:0 0 12px;font-weight:800}
.merit-box.plus{background:#f0fff4;border:1px solid #b7e4c7}
.merit-box.plus h2{color:#1b6b35}
.merit-box.minus{background:#fff5f5;border:1px solid #f5c2c2}
.merit-box.minus h2{color:#9b2c2c}
.fit-box.for{background:#fffbf0;border:1px solid #f0dcc0}
.fit-box.for h2{color:#7a5a2a}
.fit-box.not-for{background:#f5f8ff;border:1px solid #c2d0f0}
.fit-box.not-for h2{color:#2c3a7a}
.merit-box ul,.fit-box ul{list-style:none;padding:0;margin:0;font-size:1rem}
.merit-box ul li,.fit-box ul li{padding:5px 0 5px 24px;position:relative;line-height:1.75}
.merit-box.plus ul li::before{content:"◎";position:absolute;left:0;color:#1b6b35;font-weight:800}
.merit-box.minus ul li::before{content:"△";position:absolute;left:0;color:#9b2c2c;font-weight:800}
.fit-box.for ul li{padding-left:28px}
.fit-box.for ul li::before{content:"👍";position:absolute;left:0}
.fit-box.not-for ul li{padding-left:28px}
.fit-box.not-for ul li::before{content:"🤔";position:absolute;left:0}
.checks-table{width:100%;border-collapse:collapse;margin:10px 0;font-size:1rem}
.checks-table th,.checks-table td{padding:11px 14px;text-align:left;border:1px solid var(--line)}
.checks-table th{background:var(--night-2);color:#fff;font-weight:700;font-size:.95rem}
.checks-table tr:nth-child(even){background:#faf7f2}
.checks-table .ok{color:#1b6b35;font-weight:800}
.checks-table .ng{color:#9b2c2c;font-weight:800}
.checks-table .uk{color:var(--ink-soft)}
.detail-cta{text-align:center;margin:28px 0 16px}
.detail-cta .cta{font-size:1.2rem;padding:18px 44px;display:inline-block}
.detail-back{text-align:center;margin:8px 0 28px}
.detail-back a{color:var(--ink-soft);font-size:.95rem;text-decoration:none}
.detail-back a:hover{text-decoration:underline;color:var(--ink)}
.coming-soon-box{text-align:center;padding:60px 24px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);margin:24px 0}
.coming-soon-box h2{font-size:1.4rem;margin:0 0 14px}
.coming-soon-box p{color:var(--ink-soft);margin:0 0 22px;font-size:1.05rem}

/* レスポンシブ */
@media(max-width:720px){
  body{font-size:17px}
  .cards{grid-template-columns:1fr}
  .owner{padding:22px}
  .proof-grid{grid-template-columns:1fr}
  .owner-cta .cta{font-size:1.18rem;padding:18px 24px}
  .merit-grid,.fit-grid{grid-template-columns:1fr}
  .detail-cta .cta{font-size:1.1rem;padding:16px 28px}
  /* スティッキーヘッダー */
  .sticky-inner{gap:6px;padding-top:8px;padding-bottom:8px}
  .pr-label{font-size:.82rem}
  .sticky-nav{gap:4px 12px}
  .sticky-nav a{font-size:.85rem}
  /* タイプフィルター */
  .type-filters{gap:6px}
  .type-filters button{font-size:.88rem;padding:8px 12px}
  /* compare表 */
  .compare-table{font-size:.88rem}
  .compare-table th,.compare-table td{padding:8px 10px}
  .brand-nav a{font-size:.88rem;padding:8px 12px}
  /* 提案ボタン */
  .suggest-btn{font-size:.84rem;padding:8px 12px}
  .empty-help{padding:20px 14px}
}

/* トップに戻るボタン */
.back-to-top{position:fixed;bottom:24px;right:24px;z-index:50;width:52px;height:52px;
  border-radius:50%;border:none;background:var(--night-2);color:#fff;font-size:1.4rem;
  font-weight:900;cursor:pointer;box-shadow:0 4px 14px rgba(26,34,56,.3);
  opacity:0;transform:translateY(20px);pointer-events:none;
  transition:opacity .3s,transform .3s,background .15s}
.back-to-top.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.back-to-top:hover{background:var(--dawn-deep)}