/* E案: C案をベースに、ブランドのコーラル・購入導線・コミュニティ導線・モバイルを改善 */
body.e-page{--brand:#D65B3E;--brand-dark:#B9472D;--brand-soft:#FBEDE8;--charcoal:#2B2B2B;--accent:#315a39;--soft:#e6efdf}

/* 1. ブランド: ロゴ画像とコーラルのアクセント */
.e-page .brand-logo{display:inline-flex;align-items:center}
.e-page .brand-logo img{height:34px;width:auto}
.e-page footer .brand-logo img{height:28px}
.e-page .hero .eyebrow,.e-page .catalog-overview .eyebrow{color:var(--brand)}
.e-page .button-cta{background:var(--brand);color:#fff;border-color:var(--brand)}
.e-page .button-cta:hover{background:var(--brand-dark);filter:none}
.e-page .side-nav>a.current{border-left-color:var(--brand)}
.e-page .spec-title>span{color:var(--brand)}
.e-page .crumb a{text-decoration:underline;text-underline-offset:3px}
.e-page .global-nav a:hover{color:var(--brand)}

/* 5. モバイル用メニュー（デスクトップでは非表示） */
.mobile-nav{display:none;position:relative}
.mobile-nav summary{list-style:none;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;cursor:pointer;background:#fff}
.mobile-nav summary::-webkit-details-marker{display:none}
.mobile-nav summary span{display:block;width:18px;height:2px;background:var(--charcoal);border-radius:2px}
.mobile-nav nav{position:absolute;right:0;top:54px;z-index:50;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px -18px rgba(0,0,0,.35);padding:8px;display:flex;flex-direction:column;min-width:220px}
.mobile-nav nav a{display:flex;align-items:center;padding:10px 14px;font-size:15px;line-height:1.4;border-radius:10px;min-height:46px;height:auto}
.e-page .main-header .mobile-nav nav{gap:2px}
.mobile-nav nav a:hover{background:var(--brand-soft);text-decoration:none}
.mobile-nav .nav-join{background:var(--brand);color:#fff;font-weight:700;text-align:center;margin-top:6px}
.mobile-nav .nav-join:hover{background:var(--brand-dark)}

/* 6. 概要は6項目（3列） */
.e-page .e-facts{grid-template-columns:repeat(3,1fr)}

/* 2・3・7. 概要直下の購入パネル */
.buy-panel{margin-top:30px;padding:26px 28px;border:1px solid #efd3c9;background:var(--brand-soft);border-radius:18px}
.ad-disclosure{font-size:13px;line-height:1.7;color:#4a4a4a;margin:0 0 18px}
.ad-disclosure b{display:inline-block;font-size:11px;letter-spacing:.08em;background:#fff;border:1px solid #cfcfcf;color:#333;padding:1px 8px;border-radius:4px;margin-right:8px;vertical-align:1px}
.buy-panel-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:center}
.buy-panel-title{font-size:15px;margin-bottom:12px}
.buy-panel-title small{font-weight:400;font-size:12px;color:var(--muted);margin-left:10px}
.price-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.price-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.price-item span{display:block;font-size:12px;color:var(--muted)}
.price-item strong{display:block;font:700 26px/1.3 Arial,sans-serif;letter-spacing:-.02em;margin:4px 0}
.price-item small{display:block;font-size:11.5px;color:var(--muted);line-height:1.6}
.price-item.is-main{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.price-item.is-main strong{color:var(--brand-dark)}
.buy-actions{display:flex;flex-direction:column;gap:10px}
.buy-actions .button{width:100%;min-height:52px}
.buy-actions .button.quiet{background:#fff}
.buy-panel-note{font-size:12px;color:var(--muted);margin-top:4px}
.buy-panel-note a{text-decoration:underline;color:var(--charcoal)}
.e-page .buy-block .ad-disclosure{margin:14px 0 0}

/* 6. よく確認される項目 */
.quick-jump{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:26px 0 60px}
.quick-jump p{font-size:13px;font-weight:700;color:var(--muted)}
.quick-jump div{display:flex;gap:8px;flex-wrap:wrap}
.quick-jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:14px}
.quick-jump a:hover{border-color:var(--brand);color:var(--brand-dark);text-decoration:none}

/* 8. 動画の出所と見どころ */
.e-video{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.e-video iframe{display:block}
.video-meta{padding:18px 20px 20px}
.video-kind{display:inline-block;font-size:11px;font-weight:700;padding:2px 10px;border-radius:999px;background:#eef1ec;color:var(--muted)}
.video-meta h3{font-size:16px;line-height:1.6;margin:10px 0 4px}
.video-channel{font-size:13px;color:var(--muted)}
.video-channel a{text-decoration:underline}
.video-point{font-size:13px;margin:10px 0 12px}
.video-point b{color:var(--brand-dark);margin-right:10px}

/* カード内リンク（タップ領域44px以上） */
.card-link{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:700;background:#fff}
.card-link:hover{border-color:var(--brand);color:var(--brand-dark);text-decoration:none}

/* 色・バージョン */
.e-page .color-image{position:relative}
.zoom-chip{position:absolute;right:10px;bottom:10px;font-size:11px;background:rgba(255,255,255,.92);border:1px solid var(--line);padding:3px 10px;border-radius:999px}
.color-status.is-soldout{color:var(--brand-dark);font-weight:700}
.e-page .color-card .card-link{width:100%;justify-content:center}

/* 6・9. 仕様の出典と目次へ戻る */
.spec-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px;flex-wrap:wrap}
.spec-source{font-size:12px;color:var(--muted)}
.spec-source a{text-decoration:underline}
.back-toc{font-size:12px;color:var(--muted);min-height:44px;display:inline-flex;align-items:center}
.mobile-menu-wrap{position:relative}
.scroll-hint{display:none}

/* 4. コミュニティ導線 */
.owner-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.e-life{background:#2F3A33}
.e-life .eyebrow{color:#F3B7A6}
.e-life h2{color:#fff}
.life-benefits{list-style:none;padding:0;margin:22px 0 26px;display:grid;gap:10px}
.life-benefits li{position:relative;padding-left:26px;font-size:15px}
.life-benefits li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:14px;border-radius:4px;background:var(--brand)}
.e-life .button-cta{background:var(--brand);color:#fff}
.e-life .button.on-dark{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.e-life .life-small{font-size:12px;opacity:.8;margin:14px 0 0}
.e-life .life-message span:last-child{color:#F3B7A6}

@media(max-width:1050px){.e-page .e-facts{grid-template-columns:repeat(2,1fr)}.buy-panel-grid{grid-template-columns:1fr}}

@media(max-width:720px){
  .e-page .main-header{padding:14px 0}
  .e-page .brand-logo img{height:28px}
  .mobile-nav{display:block}
  /* 5. 商品写真を最初の画面に */
  .e-page .hero{gap:14px}
  .e-page .hero figure{grid-row:1;max-height:260px;aspect-ratio:auto;height:260px;margin-top:-10px}
  .e-page .hero figure figcaption{display:none}
  .e-page .hero h1{font-size:72px}
  .e-page .hero-copy>p.hero-tagline{font-size:24px;margin-top:14px}
  .e-page .hero .actions{margin-top:18px}
  .e-page .hero .actions .button{flex:1 1 0;white-space:nowrap;padding:12px 14px}
  .e-page .pills{margin-top:16px}
  .buy-panel{padding:20px 16px}
  .price-pair{grid-template-columns:1fr}
  .price-item strong{font-size:23px}
  .quick-jump{margin:20px 0 44px}
  .quick-jump div{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;width:100%}
  .quick-jump a{white-space:nowrap}
  .mobile-menu-wrap::after{content:"";position:absolute;right:0;top:15px;bottom:32px;width:40px;background:linear-gradient(90deg,rgba(248,250,245,0),var(--bg));pointer-events:none}
  .e-page .mobile-menu{margin-bottom:0}
  .e-page .mobile-menu a{min-height:44px;display:inline-flex;align-items:center;gap:6px;border-radius:999px}
  .scroll-hint{display:block;font-size:11px;color:var(--muted);text-align:right;margin:2px 0 14px}
  .owner-actions .button{width:100%}
  .e-page .color-grid{gap:14px}
}

/* 2・3は不採用（2026-09-24）：概要下は価格行のみ、広告表記はC案と同じ位置 */
.e-price-line{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:22px;align-items:center}
.e-price-line .price-checked{font-size:12px;color:var(--muted)}
.e-life .affiliate-disclosure{font-size:12px;line-height:1.8;color:inherit;opacity:.9;margin:10px 0 22px;font-weight:400;letter-spacing:0}
@media(max-width:1050px){.e-price-line{grid-template-columns:1fr}}

/* 6. 概要9項目：本番 /robots/eilik/ と同じく、アイコン付きの角丸カード */
.e-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:32px 0 0}
.e-facts>div{background:#fff;border:1px solid #e3e8df;border-radius:18px;padding:26px 28px 28px}
.e-facts dt{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:700;color:#58685f}
.e-facts dt svg{width:22px;height:22px;flex:none;color:#4f6b58}
.e-facts dd{margin:18px 0 8px;font-size:clamp(20px,2vw,26px);font-weight:700;line-height:1.4;letter-spacing:.01em;color:#253d35}
.e-facts small{display:block;font-size:12.5px;color:var(--muted);line-height:1.7}
.e-facts>div:hover{border-color:#d3dccd}
/* 2. 購入パネル（Amazon USなし） */
.buy-panel .price-item{padding:18px 20px}
.buy-panel .price-item strong{font-size:32px}
@media(max-width:1050px){.e-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media(max-width:720px){.e-facts>div{padding:18px 16px 20px;border-radius:14px}.e-facts dd{margin:12px 0 6px;font-size:18px}.e-facts dt{font-size:12px;gap:8px}.e-facts dt svg{width:19px;height:19px}.e-facts small{display:block;font-size:11.5px}}
@media(max-width:1050px){.e-facts>div:last-child:nth-child(odd){grid-column:1/-1}}
/* 2026-09-29 購入先が1店のみの簡易表示 */
.buy-block-single .market-links{max-width:420px;margin-top:18px}
.buy-single-note{margin-top:14px;font-size:13px;color:var(--muted)}
/* 2026-09-29 ヒーロー調整：PCは文字と画像の間を詰める／スマホは画像と商品名の重なりを軽く */
@media(min-width:721px){.e-page .hero{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:0}.e-page .hero figure{margin-left:-40px;width:calc(100% + 40px)}.e-page .hero-copy{padding-left:48px}}
@media(max-width:720px){.e-page .hero figure{height:auto;max-height:none;margin:-4px auto 22px;width:min(100%,350px)}}
