/* joden.css: 除電商品ページ専用の調整。基本デザインは style.css + category.css を使用。 */
/* 共通ヘッダー・共通フッターの基本スタイルは上書きしない。 */
.joden-page{--joden-sky:#7dd4f0;--joden-line:rgba(125,212,240,.2)}
/* 共通ヒーロー：背景写真はオリジナルのまま。左側の暗さはCSSで調整。 */
.joden-page .ct-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:360px;
  padding:88px 32px 38px;
  background-color:#132333;
  background-image:url("../img/keyvisual/keyvisual-joden.jpg");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  border-bottom:1px solid rgba(125,212,240,.2);
}
.joden-page .ct-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(7,18,30,.92) 0%,
    rgba(7,18,30,.83) 30%,
    rgba(7,18,30,.56) 48%,
    rgba(7,18,30,.14) 75%,
    rgba(7,18,30,.02) 100%);
}
.joden-page .ct-hero-inner{position:relative;z-index:1;max-width:1200px;margin:0 auto;display:block}
.joden-page .ct-hero-copy{position:relative;z-index:2;max-width:630px}
.joden-page .ct-breadcrumb{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 22px;font-size:11px;color:rgba(232,244,250,.72)}
.joden-page .ct-breadcrumb a{color:inherit;text-decoration:none;padding:0}
.joden-page .ct-breadcrumb a:hover{color:#7dd4f0}
.joden-page .ct-eyebrow{font-size:11px;font-weight:600;letter-spacing:.18em;color:#7dd4f0;margin-bottom:12px}
.joden-page .ct-hero h1{font-weight:700;font-size:clamp(30px,3.5vw,46px);line-height:1.25;letter-spacing:.015em;margin:0 0 14px;color:#f4fbff}
.joden-page .ct-hero h1 .accent{color:#7dd4f0}
.joden-page .ct-hero-sub{font-size:clamp(13px,1.3vw,15px);line-height:1.8;max-width:590px;color:rgba(232,244,250,.9);margin:0 0 18px}
.joden-page .ct-hero-tags{display:flex;flex-wrap:wrap;gap:7px}
.joden-page .ct-hero-tags span{font-size:11px;line-height:1.45;border:1px solid rgba(125,212,240,.36);background:rgba(7,25,38,.42);color:rgba(232,244,250,.95);padding:5px 11px;border-radius:30px}
/* スクロールアニメーションの初期状態で文字が隠れることを防止 */
.joden-page .ct-hero .fade-in{opacity:1;transform:none}
/*
 * 商品カードの見た目は共通 category.css を優先する。
 * 除電ページで必要な追加指定はレイアウトと製品仕様のみ。
 * 白背景・濃紺文字・水色ボタン・ホバー動作は共通クラス .ct-card に委譲。
 */

/* 商品ページ共通の白い特長カードを使用。余白のみコンパクトにする */
.joden-page .ct-features{padding:36px 32px 12px}
.joden-page .ct-features-inner{max-width:1200px;margin:0 auto}
.joden-page .ct-features-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:0}

/* 商品セクションの余白と列数のみ調整 */
.joden-page .ct-main{max-width:1200px;width:100%;margin:0 auto;padding:36px 32px 56px;background:transparent}
.joden-page .ct-section{padding:0;margin:0 0 40px;scroll-margin-top:96px}
.joden-page .ct-section:last-child{margin-bottom:0}
.joden-page .ct-section-header{margin-bottom:18px;padding-bottom:14px}
.joden-page .ct-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
/* 共通CSSのカードスタイルを上書きしない。長い材質・サイズ表記のみ行調整 */
.joden-page .ct-card{min-width:0}
.joden-page .ct-card-size{font-size:11px;line-height:1.7;color:var(--pd-sub,#587080);margin-bottom:9px;overflow-wrap:anywhere}
.joden-page .ct-card-name{overflow-wrap:anywhere}
.joden-page .ct-card-open{font-size:14px;font-weight:700;line-height:1.7;color:var(--pd-sub,#587080);margin-bottom:12px}
.joden-page .ct-card-btn-none{cursor:default;pointer-events:none}

/* 共通フッターのHTML構成維持：現行共通CSSにない補助表示だけ */
.joden-page .joden-footer-kicker{color:#7dd4f0;letter-spacing:.14em;font-size:10px;margin-bottom:10px}
.joden-page .joden-footer-intro{font-size:12px;line-height:1.9;color:rgba(232,244,250,.66);max-width:320px;margin:12px 0}
.joden-page .joden-footer-address{font-size:12px;line-height:1.9;color:rgba(232,244,250,.66);font-style:normal}
.joden-page .joden-footer-address a:hover{color:#7dd4f0}
.joden-page .footer-nav h4{color:#7dd4f0;letter-spacing:.11em}
.joden-page .joden-footer-pending{opacity:.55;cursor:default}
.joden-page .joden-sns-disabled{opacity:.5;cursor:default}
.joden-page .joden-footer-credit{color:rgba(232,244,250,.55);font-size:11px}
.joden-page .footer-bottom{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
/* スマホもカード2列。featureカードは狭い画面では1列に戻す */
@media(max-width:1050px){
  .joden-page .ct-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .joden-page .ct-features-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:740px){
  .joden-page .ct-hero{min-height:0;padding:45px 18px 30px;background-position:70% center}
  .joden-page .ct-hero::before{background:linear-gradient(90deg,rgba(7,18,30,.94) 0%,rgba(7,18,30,.83) 63%,rgba(7,18,30,.48) 100%)}
  .joden-page .ct-hero-inner{display:block}
  .joden-page .ct-breadcrumb{margin-bottom:18px;gap:6px;font-size:10px}
  .joden-page .ct-hero h1{font-size:clamp(28px,7vw,36px);margin-bottom:12px}
  .joden-page .ct-hero-sub{font-size:13px;margin-bottom:14px}
  .joden-page .ct-features{padding:24px 20px 8px}
  .joden-page .ct-features-grid{gap:10px}
  .joden-page .ct-main{padding:26px 20px 46px}
  .joden-page .ct-section{margin-bottom:34px}
  .joden-page .ct-section-header{margin-bottom:16px}
  .joden-page .ct-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .joden-page .ct-card-size{font-size:10px;line-height:1.6}
  .joden-page .footer-bottom{justify-content:center;text-align:center}
}
@media(max-width:480px){
  .joden-page .ct-main{padding-inline:16px}
  .joden-page .ct-features{padding-inline:16px}
  .joden-page .ct-features-grid{grid-template-columns:1fr}
  .joden-page .ct-grid{gap:10px}
}
@media(prefers-reduced-motion:reduce){
  .joden-page .ct-card{transition:none}
}