/* ============================================================
   アミカ・エコテック 工務店向けサイト — 追加コンポーネント
   （style.css のトークン/基盤を継承し、コーポレート/ポータル用に拡張）
   Design語彙: フルワイド写真主導 × 英日二段見出し × 余白 × 課題起点
   ============================================================ */

:root{
  --charcoal: #1B1C1A;     /* 近黒（チャコール＝ロゴ黒・主力塗料の世界観） */
  --charcoal-900:#111210;
  --forest:   #1F6B3B;     /* ロゴのグリーン寄り＝eco identity（見出しアクセント） */
  --forest-050:#EAF3EC;
}

/* ---------- グリーン系ボタン（eco identity） ---------- */
.btn-forest{ background:var(--forest); color:#fff; border-color:var(--forest); }
.btn-forest:hover{ background:#18572F; border-color:#18572F; transform:translateY(-2px); box-shadow:var(--shadow); }

/* ---------- 英字ラベル（装飾目的の英字ラベルは方針により全廃・非表示） ---------- */
.label-en, .brand-sub-en{ display:none !important; }

.section-head{ max-width:800px; }
.section-head.center{ margin:0 auto; text-align:center; }
.section-head .section-title .accent{ color:var(--forest); }

/* ---------- ヘッダー（2段構成） ----------
   1段目：ロゴ ＋ 電話番号（受付時間つき・大きく）＋ ログイン／お問い合わせ
   2段目：ナビを横幅いっぱいに配置
   ナビを2段目へ落としたことで、電話番号を大きく取っても項目が窮屈にならない。 */
.pre-header{ display:none !important; }
.site-header{ top:0; }
.site-header .container{ max-width:1400px; }

/* --- 1段目 --- */
.header-top-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:60px; }
.header-actions{ display:flex; align-items:center; gap:22px; flex:none; }

.header-tel{ display:flex; flex-direction:column; align-items:flex-end; color:var(--navy); transition:var(--tr); }
.header-tel:hover{ color:var(--red); }
.ht-hours{ font-size:.68rem; color:var(--gray-500); letter-spacing:.03em; line-height:1.4; }
.ht-num{ display:flex; align-items:center; gap:8px; font-size:1.45rem; font-weight:700;
  letter-spacing:.01em; line-height:1.15; font-variant-numeric:tabular-nums; }
.ht-num .ic{ width:22px; height:22px; flex:none; }

.header-btns{ display:flex; align-items:center; gap:14px; }
.header-sub{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-size:.78rem; font-weight:700; color:var(--gray-600); transition:var(--tr); }
.header-sub:hover{ color:var(--navy); }
.header-sub .ic{ width:14px; height:14px; }

/* --- 2段目（ナビ） --- */
.header-nav{ border-top:1px solid var(--line); }
.header-nav .site-nav{ display:flex; justify-content:space-between; align-items:center; gap:0; }
.site-nav a{ white-space:nowrap; padding:9px 6px; font-size:.9rem; }
.site-nav a.active::after{ left:6px; right:6px; bottom:8px; }
/* 「商品ラインナップ」だけ div(.has-mega) 包みなので、他の a と行が揃わない。
   中の a を同じ高さ・同じ行位置に揃える。 */
.header-nav .has-mega{ display:flex; align-items:center; }
.header-nav .has-mega > a{ display:flex; align-items:center; }

@media(max-width:1240px){
  .site-nav a{ font-size:.83rem; padding:9px 4px; }
  .ht-num{ font-size:1.3rem; }
}
/* ナビが1行に収まらなくなる手前でハンバーガーへ */
@media(max-width:1080px){
  .header-nav{ display:none; }
  .hamburger{ display:flex; }
  .header-top-inner{ height:68px; }
  .ht-num{ font-size:1.3rem; }
  .ht-num .ic{ width:20px; height:20px; }
  .header-sub{ display:none; }
}
@media(max-width:640px){
  .ht-hours{ display:none; }
  .ht-num{ font-size:1.1rem; }
  .header-actions{ gap:12px; }
}
.has-mega > a::after{ content:"▾"; font-size:.7em; margin-left:4px; color:var(--gray-500); }

/* nav の商品ドロップダウン */
.has-mega{ position:relative; }
/* 左端の項目なので、トリガーの中央に置くと画面外へはみ出す。左端合わせにする。 */
.mega{
  position:absolute; top:calc(100% + 10px); left:0; transform:translateY(6px);
  width:min(940px,94vw); background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow-lg); padding:22px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  opacity:0; visibility:hidden; transition:var(--tr); z-index:1200;
}
.has-mega:hover .mega{ opacity:1; visibility:visible; transform:translateY(0); }
/* 3カラムがボックス内に収まるよう縮小を許可（グリッド項目のはみ出し＝白背景外に文字が出る不具合を防止） */
.mega a{ min-width:0; }
.mega a > span:last-child{ min-width:0; display:flex; flex-direction:column; }
.mega .mi-t{ display:block; }
.mega .mi-d{ display:block; }
.mega .mi-d{ overflow-wrap:anywhere; }
/* 商品名は途中で折り返さない（列幅は上の width で名前が1行に収まるよう確保している） */
.mega .mi-t{ white-space:nowrap; }
.mega a{ display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:10px; white-space:normal; }
.mega a:hover{ background:var(--paper); }
.mega .mi-ic{ width:38px;height:38px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--forest-050);color:var(--forest); }
.mega .mi-ic .ic{ width:20px;height:20px; }
.mega .mi-t{ font-weight:700; color:var(--ink); font-size:.9rem; }
.mega .mi-d{ font-size:.74rem; color:var(--gray-500); line-height:1.6; margin-top:2px; }

.header-login{
  display:inline-flex; align-items:center; gap:7px; padding:11px 16px; border-radius:8px; white-space:nowrap;
  border:1.5px solid var(--line); color:var(--navy); font-size:.82rem; font-weight:700; transition:var(--tr);
}
@media(max-width:1180px){ .header-login{ display:none; } } /* 狭幅ではpre-header/ハンバーガーのログイン導線に集約 */
.header-login:hover{ border-color:var(--navy); background:var(--navy); color:#fff; }
.header-login .ic{ width:16px;height:16px; }

/* ---------- フォトヒーロー（フルワイド写真） ---------- */
.hero-photo{
  position:relative; min-height:90vh; display:flex; align-items:flex-end; overflow:hidden; color:#fff;
}
.hero-photo-bg{ position:absolute; inset:0; z-index:0; }
.hero-photo-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.hero-photo-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(17,20,17,.86) 0%, rgba(17,20,17,.6) 34%, rgba(17,20,17,.18) 66%, rgba(17,20,17,0) 100%),
    linear-gradient(0deg, rgba(17,20,17,.7) 0%, transparent 46%);
}
.hero-photo-inner{ position:relative; z-index:2; width:100%; padding:124px 0 64px; }
.hero-photo .label-en{ color:var(--gold-soft); }
.hero-photo h1{
  font-size:clamp(2.1rem,4.7vw,3.55rem); font-weight:700; line-height:1.36; letter-spacing:.01em;
  margin:0 0 24px; text-shadow:0 2px 34px rgba(0,0,0,.28); max-width:15em;
}
.hero-photo h1 .hl{ color:#93E1AC; }
.hero-photo .hero-lead{
  font-size:clamp(1rem,1.55vw,1.16rem); max-width:590px; color:rgba(255,255,255,.9); line-height:1.95;
}
.hero-photo .btn-group{ margin-top:36px; }
.hero-photo::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px; z-index:3;
  background:linear-gradient(90deg,var(--forest),var(--gold) 55%,transparent);
}

/* 信頼ストリップ（ヒーロー直下） */
.trust-strip{ background:var(--charcoal-900); color:#fff; }
.trust-strip .container{ display:grid; grid-template-columns:repeat(4,1fr); }
.trust-cell{ padding:26px 22px; text-align:center; border-left:1px solid rgba(255,255,255,.1); }
.trust-cell:first-child{ border-left:0; }
.trust-cell .n{ font-family:"Zen Old Mincho",serif; font-size:1.6rem; color:#fff; line-height:1.05; }
.trust-cell .n small{ font-size:.62em; color:var(--gold-soft); font-family:inherit; }
.trust-cell .c{ font-size:.76rem; color:rgba(255,255,255,.66); margin-top:8px; letter-spacing:.03em; line-height:1.5; }
@media(max-width:760px){ .trust-strip .container{ grid-template-columns:repeat(2,1fr); }
  .trust-cell:nth-child(3){border-left:0;} .trust-cell:nth-child(odd){border-left:0;} }

/* ---------- ポジショニング（導入文） ---------- */
.intro-lead{ font-size:clamp(1.25rem,2.3vw,1.7rem); font-weight:700; color:var(--ink); line-height:1.7; letter-spacing:.01em; }
.intro-lead .u{ background:linear-gradient(transparent 62%, rgba(31,107,59,.16) 0); }

/* ---------- 課題から探す ---------- */
.solution-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.solution-card{
  display:flex; flex-direction:column; gap:0; background:#fff; border:1px solid var(--line);
  border-radius:14px; overflow:hidden; transition:var(--tr); position:relative;
}
.solution-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--gold-soft); }
.solution-card .sc-body{ padding:26px 24px 22px; display:flex; flex-direction:column; gap:10px; height:100%; }
.solution-card .sc-ic{ width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--forest-050);color:var(--forest);margin-bottom:4px; }
.solution-card .sc-ic .ic{ width:27px;height:27px; }
.solution-card h3{ font-size:1.1rem; font-weight:700; color:var(--ink); }
.solution-card .sc-symptoms{ font-size:.86rem; color:var(--gray-600); line-height:1.8; }
.solution-card .sc-foot{ margin-top:auto; padding-top:14px; border-top:1px dashed var(--line); display:flex; align-items:center; justify-content:space-between; }
.solution-card .sc-prod{ font-size:.78rem; font-weight:700; color:var(--forest); }
.solution-card .sc-arrow{ width:30px;height:30px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;color:var(--navy);transition:var(--tr); }
.solution-card:hover .sc-arrow{ background:var(--navy); color:#fff; }
.solution-card .sc-arrow .ic{ width:16px;height:16px; }
@media(max-width:900px){ .solution-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .solution-grid{ grid-template-columns:1fr; } }

/* ---------- 商品ラインナップ ---------- */
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.product-card{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:var(--tr); display:flex; flex-direction:column; }
.product-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--gold-soft); }
.product-card .pc-media{ aspect-ratio:16/11; overflow:hidden; position:relative; background:var(--charcoal); }
.product-card .pc-media img{ width:100%;height:100%;object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1); }
.product-card:hover .pc-media img{ transform:scale(1.05); }
.product-card .pc-media.icon-tile{ display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 30% 20%, #2a2c28 0%, var(--charcoal-900) 70%); }
.product-card .pc-media.icon-tile .ic{ width:74px;height:74px;color:rgba(255,255,255,.9);stroke-width:1.3; }
.product-card .pc-cat{ position:absolute; top:12px; left:12px; background:rgba(17,20,17,.72); color:#fff; font-size:.68rem; font-weight:700; letter-spacing:.05em; padding:5px 11px; border-radius:100px; }
.product-card .pc-body{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:9px; flex:1; }
.product-card .pc-name{ font-size:1.2rem; font-weight:700; color:var(--ink); }
.product-card .pc-name .en{ display:block; font-size:.66rem; font-weight:700; letter-spacing:.16em; color:var(--gray-500); text-transform:uppercase; margin-top:3px; }
.product-card .pc-desc{ font-size:.88rem; color:var(--gray-600); line-height:1.8; }
.product-card .pc-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.product-card .pc-tags span{ font-size:.72rem; color:var(--forest); background:var(--forest-050); padding:4px 10px; border-radius:6px; font-weight:600; }
.product-card .pc-link{ margin-top:auto; padding-top:14px; display:inline-flex; align-items:center; gap:8px; font-size:.84rem; font-weight:700; color:var(--navy); }
.product-card .pc-link .ic{ width:16px;height:16px; transition:var(--tr); }
.product-card:hover .pc-link .ic{ transform:translateX(4px); }
@media(max-width:900px){ .product-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .product-grid{ grid-template-columns:1fr; } }

/* ---------- 大型フィーチャーブロック（画像＋テキスト左右交互） ---------- */
.feature-block{ display:grid; grid-template-columns:1.05fr 1fr; gap:0; align-items:stretch; border-radius:18px; overflow:hidden; border:1px solid var(--line); background:#fff; }
.feature-block.rev .fb-media{ order:2; }
.feature-block .fb-media{ position:relative; min-height:420px; overflow:hidden; background:var(--charcoal); }
.feature-block .fb-media img{ position:absolute; inset:0; width:100%;height:100%;object-fit:cover; }
.feature-block .fb-body{ padding:52px 48px; display:flex; flex-direction:column; justify-content:center; }
.feature-block .fb-body h3{ font-size:clamp(1.4rem,2.4vw,1.9rem); font-weight:700; color:var(--ink); line-height:1.4; margin:6px 0 16px; }
.feature-block .fb-body p{ color:var(--gray-600); line-height:1.95; font-size:.98rem; }
.feature-block .fb-list{ margin:20px 0 26px; display:flex; flex-direction:column; gap:11px; }
@media(max-width:860px){ .feature-block{ grid-template-columns:1fr; } .feature-block.rev .fb-media{ order:0; }
  .feature-block .fb-media{ min-height:280px; } .feature-block .fb-body{ padding:36px 28px; } }

/* ---------- 選ばれる理由 ---------- */
.reason-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.reason-item{ background:#fff; padding:40px 38px; display:flex; gap:22px; align-items:flex-start; transition:var(--tr); }
.reason-item:hover{ background:var(--paper); }
.reason-item .r-no{ font-family:"Zen Old Mincho",serif; font-size:1.3rem; color:var(--gold); flex:none; line-height:1; padding-top:4px; }
.reason-item .r-ic{ width:56px;height:56px;border-radius:14px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--navy);color:#fff; }
.reason-item .r-ic .ic{ width:28px;height:28px; }
.reason-item h3{ font-size:1.18rem; font-weight:700; color:var(--ink); margin-bottom:10px; }
.reason-item p{ font-size:.92rem; color:var(--gray-600); line-height:1.85; }
@media(max-width:760px){ .reason-grid{ grid-template-columns:1fr; } .reason-item{ padding:30px 26px; } }

/* ---------- 施工事例 ---------- */
.case-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.case-card{ position:relative; border-radius:14px; overflow:hidden; aspect-ratio:4/3; display:block; }
.case-card img{ width:100%;height:100%;object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1); }
.case-card:hover img{ transform:scale(1.06); }
.case-card .cc-scrim{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(17,20,17,.82) 0%, rgba(17,20,17,.1) 55%, transparent 100%); }
.case-card .cc-body{ position:absolute; left:0; right:0; bottom:0; padding:22px 20px; color:#fff; }
.case-card .cc-cat{ font-size:.68rem; font-weight:700; letter-spacing:.08em; color:var(--gold-soft); }
.case-card .cc-t{ font-size:1rem; font-weight:700; line-height:1.5; margin-top:5px; }
.case-card .cc-tags{ margin-top:8px; display:flex; gap:6px; flex-wrap:wrap; }
.case-card .cc-tags span{ font-size:.68rem; background:rgba(255,255,255,.16); backdrop-filter:blur(3px); padding:3px 9px; border-radius:5px; }
.case-card.tall{ aspect-ratio:auto; }
@media(max-width:900px){ .case-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .case-grid{ grid-template-columns:1fr; } }

/* ---------- エビデンス／信頼バンド ---------- */
.cert-row{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.cert-badge{
  display:flex; align-items:center; gap:12px; padding:16px 22px; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
}
.cert-badge .cb-ic{ width:40px;height:40px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;background:rgba(147,225,172,.14);color:#93E1AC; }
.cert-badge .cb-ic .ic{ width:22px;height:22px; }
.cert-badge .cb-t{ font-weight:700; color:#fff; font-size:.92rem; }
.cert-badge .cb-s{ font-size:.72rem; color:rgba(255,255,255,.6); margin-top:2px; }

/* 明るい背景（section / section-alt / section-sand）に置かれた cert-badge は濃色化して可読に
   ※ section-dark 上の白文字バッジには影響しない */
.section .cert-badge, .section-alt .cert-badge, .section-sand .cert-badge{
  background:#fff; border-color:var(--line); box-shadow:var(--shadow-sm);
}
.section .cert-badge .cb-t, .section-alt .cert-badge .cb-t, .section-sand .cert-badge .cb-t{ color:var(--ink); }
.section .cert-badge .cb-s, .section-alt .cert-badge .cb-s, .section-sand .cert-badge .cb-s{ color:var(--gray-500); }
.section .cert-badge .cb-ic, .section-alt .cert-badge .cb-ic, .section-sand .cert-badge .cb-ic{ background:var(--forest-050); color:var(--forest); }

.adopt-row{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:14px; }
.adopt-chip{ font-size:.82rem; color:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.2); padding:8px 16px; border-radius:100px; }
.adopt-chip strong{ color:#fff; }

/* ---------- 資料DL ＋ 取引先ログイン（デュアル） ---------- */
.dual-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.dual-card{ border-radius:18px; padding:44px 40px; border:1px solid var(--line); }
.dual-card.public{ background:var(--paper); }
.dual-card.partner{ background:linear-gradient(160deg,var(--navy) 0%,var(--navy-900) 100%); color:#fff; border-color:transparent; position:relative; overflow:hidden; }
.dual-card.partner::after{ content:""; position:absolute; right:-40px; top:-40px; width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(53,82,143,.5),transparent 70%); }
.dual-card .dc-ic{ width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:20px; }
.dual-card.public .dc-ic{ background:#fff;color:var(--forest);border:1px solid var(--line); }
.dual-card.partner .dc-ic{ background:rgba(255,255,255,.12);color:#93E1AC; }
.dual-card .dc-ic .ic{ width:28px;height:28px; }
.dual-card h3{ font-size:1.35rem; font-weight:700; margin-bottom:12px; }
.dual-card.public h3{ color:var(--ink); }
.dual-card .dc-desc{ font-size:.94rem; line-height:1.9; }
.dual-card.public .dc-desc{ color:var(--gray-600); }
.dual-card.partner .dc-desc{ color:rgba(255,255,255,.82); position:relative; z-index:1; }
.dual-card .dc-list{ margin:20px 0 28px; display:flex; flex-direction:column; gap:10px; position:relative; z-index:1; }
.dual-card .dc-list li{ display:flex; gap:10px; align-items:flex-start; font-size:.9rem; }
.dual-card.partner .dc-list li{ color:rgba(255,255,255,.9); }
.dual-card .dc-list .tick{ width:22px;height:22px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center; }
.dual-card.public .dc-list .tick{ background:var(--forest-050); color:var(--forest); }
.dual-card.partner .dc-list .tick{ background:rgba(147,225,172,.18); color:#93E1AC; }
.dual-card .dc-list .tick .ic{ width:14px;height:14px;stroke-width:2.5; }
.dual-card .btn-group{ position:relative; z-index:1; }
@media(max-width:820px){ .dual-grid{ grid-template-columns:1fr; } .dual-card{ padding:34px 28px; } }

/* ---------- 記事・事例 詳細（本文組版） ---------- */
.article-wrap{ max-width:768px; margin:0 auto; }
.article{ font-size:1.02rem; line-height:1.95; color:var(--text); }
.article > p{ margin:0 0 22px; }
.article > h2{ font-size:clamp(1.3rem,2.4vw,1.7rem); font-weight:700; color:var(--ink); line-height:1.5; margin:52px 0 18px; padding-left:16px; border-left:4px solid var(--forest); }
.article > h3{ font-size:1.15rem; font-weight:700; color:var(--ink); margin:36px 0 14px; }
.article > ul, .article > ol{ margin:0 0 24px; padding-left:2px; display:flex; flex-direction:column; gap:11px; }
.article > ul > li{ position:relative; padding-left:30px; list-style:none; }
.article > ul > li::before{ content:""; position:absolute; left:4px; top:.62em; width:9px; height:9px; border-radius:50%; background:var(--forest); }
.article > ol{ counter-reset:ol; }
.article > ol > li{ position:relative; padding-left:38px; list-style:none; counter-increment:ol; }
.article > ol > li::before{ content:counter(ol); position:absolute; left:0; top:0; width:26px; height:26px; border-radius:50%; background:var(--navy); color:#fff; font-size:.8rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.article figure{ margin:32px 0; }
.article figure img{ width:100%; border-radius:14px; box-shadow:var(--shadow-sm); }
.article figure figcaption{ font-size:.82rem; color:var(--gray-500); margin-top:10px; text-align:center; }
.article blockquote{ margin:32px 0; padding:26px 28px; background:var(--sand); border-radius:14px; border-left:4px solid var(--gold); }
.article blockquote p{ margin:0; font-size:1.05rem; color:var(--ink); font-weight:500; line-height:1.85; }
.article blockquote cite{ display:block; margin-top:12px; font-size:.84rem; color:var(--gray-500); font-style:normal; }
.article strong{ font-weight:700; color:var(--ink); }
/* 本文中のテキストリンクのみ装飾（ボタン .btn は除外。除外しないとボタン文字がnavy＝背景と同色で不可視になる） */
.article a:not(.btn){ color:var(--navy); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
/* 記事内のポイント囲み（ベネフィット強調） */
.point-box{ background:var(--forest-050); border-radius:14px; padding:24px 26px; margin:30px 0; }
.point-box .pb-t{ display:flex; align-items:center; gap:9px; font-weight:700; color:var(--forest); font-size:.94rem; margin-bottom:8px; }
.point-box .pb-t .ic{ width:20px; height:20px; }
.point-box p{ margin:0; font-size:.95rem; color:var(--text); line-height:1.85; }

/* 記事フット：関連商品CTA */
.article-cta{ margin-top:44px; border:1px solid var(--line); border-radius:16px; background:var(--paper); display:flex; gap:0; align-items:stretch; overflow:hidden; min-height:190px; }
.article-cta .ac-ic{ flex:none; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.article-cta .ac-ic:not(.photo){ width:112px; background:var(--navy); color:#fff; }
.article-cta .ac-ic:not(.photo) .ic{ width:44px; height:44px; }
.article-cta .ac-ic.photo{ width:250px; background:var(--charcoal); }
.article-cta .ac-ic.photo img{ width:100%; height:100%; object-fit:cover; }
.article-cta .ac-x{ flex:1; min-width:0; align-self:center; padding:30px 36px; }
.article-cta h4{ font-size:1.14rem; font-weight:700; color:var(--ink); margin-bottom:6px; }
.article-cta p{ font-size:.92rem; color:var(--gray-600); line-height:1.75; margin:0 0 16px; }
@media(max-width:640px){ .article-cta{ flex-direction:column; min-height:0; } .article-cta .ac-ic.photo{ width:100%; height:auto; aspect-ratio:16/9; } .article-cta .ac-ic:not(.photo){ width:100%; padding:26px; } .article-cta .ac-x{ padding:24px 26px 28px; } }

/* 事例詳細：概要テーブル */
.case-meta-table{ width:100%; border-collapse:collapse; font-size:.94rem; }
.case-meta-table th{ text-align:left; padding:14px 12px; color:var(--gray-600); font-weight:700; width:32%; border-bottom:1px solid var(--line); vertical-align:top; }
.case-meta-table td{ padding:14px 12px; border-bottom:1px solid var(--line); }
.case-badges{ display:flex; flex-wrap:wrap; gap:8px; }
.case-badges span{ font-size:.76rem; color:var(--forest); background:var(--forest-050); padding:5px 12px; border-radius:6px; font-weight:600; }

/* 記事一覧の「前後・関連」 */
.related-head{ font-size:1.15rem; font-weight:700; color:var(--ink); margin-bottom:22px; }

/* ---------- 取引先ログイン（認証） ---------- */
/* ヘッダーは position:fixed（2段＝約132px）。上余白はその高さ＋見た目の余白ぶんを確保する。 */
.auth-section{ padding:210px 0 104px; background:
  radial-gradient(120% 100% at 85% -10%, rgba(53,82,143,.12) 0%, transparent 55%),
  linear-gradient(180deg, var(--paper) 0%, var(--sand) 100%); min-height:100vh; display:flex; align-items:center; }
.auth-card{ max-width:460px; margin:0 auto; width:100%; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-lg); padding:44px 40px; }
.auth-card .auth-ic{ width:60px;height:60px;border-radius:16px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 20px; }
.auth-card .auth-ic .ic{ width:30px;height:30px; }
.auth-card h1{ font-size:1.5rem; font-weight:700; color:var(--ink); text-align:center; margin-bottom:8px; }
.auth-card .auth-sub{ font-size:.9rem; color:var(--gray-600); text-align:center; line-height:1.7; margin-bottom:28px; }
.auth-form .fg{ margin-bottom:18px; }
.auth-form .btn{ width:100%; }
.auth-error{ display:none; background:#FBE9E9; color:var(--red); border-radius:8px; padding:12px 14px; font-size:.86rem; font-weight:600; margin-bottom:18px; text-align:center; }
.auth-error.show{ display:block; }
.auth-demo{ margin-top:22px; padding:14px 16px; background:var(--blue-050); border-radius:10px; font-size:.82rem; color:var(--navy-700); line-height:1.7; }
.auth-demo b{ color:var(--navy); }
.auth-foot{ text-align:center; margin-top:22px; font-size:.85rem; color:var(--gray-600); }
.auth-foot a{ color:var(--navy); font-weight:700; }
.auth-note{ background:var(--blue-050); color:var(--ink); border-radius:8px; padding:12px 14px; font-size:.86rem; line-height:1.7; margin-bottom:18px; text-align:center; }
.auth-resend{ margin-bottom:22px; }
.auth-forgot{ text-align:right; margin-top:12px; font-size:.85rem; }
.auth-forgot a{ color:var(--navy); text-decoration:underline; }

/* 取引先マイページ */
.partner-hero{ background:linear-gradient(160deg,var(--navy) 0%,var(--navy-900) 100%); color:#fff; padding:150px 0 44px; position:relative; }
.partner-hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg,var(--forest),var(--gold),transparent); }
.partner-hero .p-welcome{ font-size:.8rem; letter-spacing:.16em; color:var(--gold-soft); text-transform:uppercase; }
.partner-hero h1{ font-size:clamp(1.6rem,3vw,2.2rem); font-weight:700; margin:10px 0 6px; }
.partner-hero p{ color:rgba(255,255,255,.8); }
.partner-bar{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
.btn-logout{ display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:8px; border:1.5px solid rgba(255,255,255,.4); color:#fff; font-size:.85rem; font-weight:700; cursor:pointer; background:transparent; font-family:inherit; transition:var(--tr); }
.btn-logout:hover{ background:#fff; color:var(--navy); border-color:#fff; }
.dl-list{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.dl-row{ display:flex; align-items:center; gap:16px; padding:20px 22px; background:#fff; border:1px solid var(--line); border-radius:12px; transition:var(--tr); }
.dl-row:hover{ border-color:var(--gold-soft); box-shadow:var(--shadow); transform:translateY(-2px); }
.dl-row .dl-ic{ width:46px;height:46px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--forest-050);color:var(--forest); }
.dl-row .dl-ic .ic{ width:24px;height:24px; }
.dl-row .dl-x{ flex:1; min-width:0; }
.dl-row .dl-n{ font-weight:700; color:var(--ink); font-size:.96rem; }
.dl-row .dl-m{ font-size:.76rem; color:var(--gray-500); margin-top:3px; }
.dl-row .dl-go{ width:40px;height:40px;border-radius:50%;flex:none;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;transition:var(--tr); }
.dl-row:hover .dl-go{ background:var(--red); }
.dl-row .dl-go .ic{ width:18px;height:18px; }
@media(max-width:720px){ .dl-list{ grid-template-columns:1fr; } }

/* ---------- 資料カード（PDF1枚目のプレビュー付き） ---------- */
.doc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.doc-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm); transition:var(--tr); }
.doc-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--gold-soft); }
.doc-cover{ aspect-ratio:4 / 3.1; background:var(--gray-100); overflow:hidden; border-bottom:1px solid var(--line); position:relative; }
.doc-cover img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.doc-cover .doc-badge{ position:absolute; top:10px; left:10px; background:rgba(17,20,17,.72); color:#fff; font-size:.66rem; font-weight:700; letter-spacing:.04em; padding:4px 9px; border-radius:5px; }
.doc-body{ padding:16px 18px 18px; display:flex; flex-direction:column; flex:1; }
.doc-name{ font-weight:700; color:var(--ink); font-size:.95rem; line-height:1.55; }
.doc-meta{ font-size:.74rem; color:var(--gray-500); margin-top:5px; }
.doc-dl{ margin-top:14px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 14px; border-radius:8px; background:var(--navy); color:#fff; font-size:.82rem; font-weight:700; transition:var(--tr); }
.doc-card:hover .doc-dl{ background:var(--red); }
.doc-dl .ic{ width:16px; height:16px; }
@media(max-width:900px){ .doc-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .doc-grid{ grid-template-columns:1fr; } }

/* ---------- 施工事例フィルタ ---------- */
.filter-bar{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.filter-chip{
  padding:10px 22px; border-radius:100px; border:1.5px solid var(--line); background:#fff;
  font-family:inherit; font-size:.86rem; font-weight:700; color:var(--gray-600); cursor:pointer; transition:var(--tr); white-space:nowrap;
}
.filter-chip:hover{ border-color:var(--forest); color:var(--forest); }
.filter-chip.is-active{ background:var(--forest); border-color:var(--forest); color:#fff; }
.case-item{ transition:opacity .35s ease; }
.case-item.is-hidden{ display:none; }

/* 事例カード（一覧・下部にメタ帯） */
.case-card.listing{ aspect-ratio:auto; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.case-card.listing .cc-photo{ aspect-ratio:4/3; overflow:hidden; }
.case-card.listing .cc-photo img{ width:100%;height:100%;object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1); }
.case-card.listing:hover .cc-photo img{ transform:scale(1.06); }
.case-card.listing .cc-meta{ padding:20px 20px 22px; display:flex; flex-direction:column; gap:9px; }
.case-card.listing .cc-cat{ color:var(--forest); font-size:.72rem; font-weight:700; letter-spacing:.06em; }
.case-card.listing .cc-t{ color:var(--ink); font-size:1.02rem; font-weight:700; line-height:1.55; }
.case-card.listing .cc-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; position:static; }
.case-card.listing .cc-tags span{ font-size:.72rem; color:var(--forest); background:var(--forest-050); padding:4px 10px; border-radius:6px; font-weight:600; backdrop-filter:none; }

/* ---------- コラム ---------- */
.column-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.column-card{ background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:var(--tr); display:flex; flex-direction:column; }
.column-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--gold-soft); }
.column-card .cl-media{ aspect-ratio:16/9; overflow:hidden; }
.column-card .cl-media img{ width:100%;height:100%;object-fit:cover; }
.column-card .cl-body{ padding:22px 22px 24px; }
.column-card .cl-cat{ font-size:.7rem; font-weight:700; color:var(--forest); letter-spacing:.06em; }
.column-card .cl-t{ font-size:1rem; font-weight:700; color:var(--ink); line-height:1.6; margin-top:8px; }
.column-card .cl-meta{ font-size:.76rem; color:var(--gray-500); margin-top:12px; }
@media(max-width:900px){ .column-grid{ grid-template-columns:1fr; } }

/* ---------- フッター拡張（取引先列） ---------- */
.footer-grid.f5{ grid-template-columns:1.8fr 1fr 1fr 1fr 1fr; }
@media(max-width:900px){ .footer-grid.f5{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .footer-grid.f5{ grid-template-columns:1fr; } }
/* ※ reveal（.reveal / .reveal.visible）は base style.css で定義済み・script.js が付与 */


/* ============================================================
   AIテンプレ感の除去（feedback-web-design-taste 準拠）
   方針: 寸法・レイアウトは変えず「装飾（パステル塗り・強い影・浮き・グロー・円形装飾）」だけ外す
   ============================================================ */

/* 影を極薄ニュートラルへ（全体） */
:root{
  --shadow-sm: 0 1px 2px rgba(20,38,79,.05);
  --shadow:    0 1px 4px rgba(20,38,79,.06);
  --shadow-lg: 0 3px 12px rgba(20,38,79,.08);
}

/* ホバーの浮き上がり・強い影・グロー・ブロブを廃止 */
.card, .value-card, .solution-card, .product-card, .doc-card, .column-card,
.case-card, .case-card.listing, .dl-row, .form-card, .dual-card{ box-shadow:none !important; }
.card:hover, .value-card:hover, .solution-card:hover, .product-card:hover,
.doc-card:hover, .column-card:hover, .case-card:hover, .dl-row:hover{
  transform:none !important; box-shadow:none !important; border-color:#c9d0dc !important;
}
.btn:hover, .btn-primary:hover, .btn-navy:hover, .btn-gold:hover,
.btn-forest:hover, .header-cta:hover{ transform:none !important; }
.dual-card.partner::after{ display:none !important; }

/* パステル角丸アイコン枠 → 塗りだけ外して線画に（寸法は保持＝崩れない） */
.icon-badge, .solution-card .sc-ic, .cert-badge .cb-ic, .dl-row .dl-ic, .mega .mi-ic,
.metric .icon-badge, .mini-value .icon-badge, .problem-card .icon-badge{
  background:transparent !important; box-shadow:none !important; border-color:transparent !important;
}
.icon-badge .ic, .solution-card .sc-ic .ic, .cert-badge .cb-ic .ic, .dl-row .dl-ic .ic,
.mega .mi-ic .ic, .metric .icon-badge .ic, .problem-card .icon-badge .ic{ color:var(--forest) !important; }

/* 円形の矢印装飾 → 塗り円を外す（寸法は保持） */
.solution-card .sc-arrow, .dl-row .dl-go{ background:transparent !important; box-shadow:none !important; }
.solution-card .sc-arrow .ic, .dl-row .dl-go .ic{ color:var(--forest) !important; }
.solution-card:hover .sc-arrow{ background:transparent !important; }

/* 数字カウンター帯：テック風ブルー → 落ち着いたゴールド */
.stat .num{ color:var(--gold-soft) !important; }

/* ============================================================
   AIテンプレ残存要素の除去 第2弾（デザイン監査で検出・寸法は変えず装飾のみ）
   ============================================================ */

/* 取りこぼしの塗りアイコン枠（濃紺/ミント/白タイル）→ 塗りを外し線画のみ */
.reason-item .r-ic, .dual-card .dc-ic, .auth-card .auth-ic{
  background:transparent !important; border:0 !important; box-shadow:none !important;
}
.reason-item .r-ic .ic, .dual-card .dc-ic .ic, .auth-card .auth-ic .ic{ color:var(--forest) !important; }
.dual-card.partner .dc-ic .ic{ color:#93E1AC !important; }

/* パステルのチェック丸 → 塗りを外し線チェックへ（寸法保持） */
.dual-card .dc-list .tick, .feature-item .tick, .p-feats .row .tick{ background:transparent !important; box-shadow:none !important; }
.dual-card .dc-list .tick .ic, .feature-item .tick .ic, .p-feats .row .tick .ic{ color:var(--forest) !important; }
.dual-card.partner .dc-list .tick .ic{ color:#93E1AC !important; }

/* パステル塗りタグ/バッジ → 無塗り＋細い罫・角ばりへ */
.product-card .pc-tags span, .case-badges span, .case-card.listing .cc-tags span, .case-card .cc-tags span{
  background:transparent !important; border:1px solid var(--line) !important; color:var(--forest) !important; border-radius:3px !important;
}
.doc-badge{ background:transparent !important; color:#fff !important; padding:0 !important; letter-spacing:.08em; }

/* 完全ピル(角丸100px)の過多 → 角ばったカタログ的プレート/タブへ */
.filter-chip, .product-card .pc-cat, .adopt-chip{ border-radius:4px !important; }
#colSearch{ border-radius:6px !important; }
.filter-bar{ justify-content:flex-start !important; }

/* 商品アイコンタイルの放射グラデ発光 → マット単色チャコール */
.product-card .pc-media.icon-tile{ background:var(--charcoal) !important; }

/* CTA帯・ページヒーローの放射グロー装飾 → フラットな黒基調へ */
.cta{ background:linear-gradient(160deg, var(--navy), var(--navy-900)) !important; }
.cta::after{ background:var(--gold) !important; opacity:.85 !important; height:2px !important; }
/* 上段の黒帯を廃した分（34px）だけ、固定ヘッダー用の余白を詰める */
.page-hero{ background:var(--navy) !important; padding-top:150px; }
.mobile-nav{ inset:68px 0 0 0; }
.page-hero::after{ background:rgba(255,255,255,.14) !important; height:1px !important; }

/* 記事のパステル塗りポイントボックス → 編集的プルクオート(金の左罫) */
.point-box{ background:transparent !important; border:1px solid var(--line) !important; border-left:3px solid var(--gold) !important; }
.point-box .pb-t .ic{ color:var(--gold) !important; }

/* ヘッダーの半透明＋ぼかし → 生成りのベタ地 */
.site-header{ background:#fff !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }

/* フッター等の光るゴールドのグラデ線 → 極細の実線 */
.site-footer::before{ background:var(--gold) !important; opacity:.5 !important; }

/* カード内の飾り英字(uppercase/字間) → 抑制 */
.product-card .pc-name .en{ text-transform:none !important; letter-spacing:.02em !important; font-size:.72rem !important; opacity:.7; }

/* ダウンロードのホバー赤変化 → navy／認証カードの影・角丸抑制 */
.doc-card:hover .doc-dl{ background:var(--navy) !important; }
.auth-card{ box-shadow:none !important; border-radius:10px !important; }

/* ============================================================
   ヘッダー刷新（フルワイド・ロゴ大・会社名テキスト削除）＋ 残存パステル箱の一掃 第3弾
   ============================================================ */
/* フルワイド・ロゴ大・会社名/英字テキストは非表示 */
.site-header .container, .pre-header .container{ max-width:100% !important; padding-left:clamp(20px,4vw,56px) !important; padding-right:clamp(20px,4vw,56px) !important; }
.header-inner{ height:92px !important; }
.brand-text, .brand-name, .brand-sub{ display:none !important; }
.brand img{ height:42px !important; width:auto !important; }

/* 残っていたパステル塗りの“箱” → 編集的な罫線/プルクオートへ */
.callout, .callout.gold{ background:transparent !important; border:1px solid var(--line) !important; border-left:3px solid var(--gold) !important; box-shadow:none !important; }
.note-box, .note-box.good, .note-box.warn{ background:transparent !important; border:1px solid var(--line) !important; box-shadow:none !important; }
.article blockquote, .quote{ background:transparent !important; border-left:3px solid var(--gold) !important; }
.auth-demo{ background:transparent !important; border:1px solid var(--line) !important; }
.article-cta{ background:transparent !important; border:1px solid var(--line) !important; box-shadow:none !important; }
.plan-price{ background:transparent !important; }

/* 認証バッジ：カード箱をフラット化＋左寄せ（敷き詰め感を緩和） */
.cert-badge{ box-shadow:none !important; }
.cert-row{ justify-content:flex-start !important; }

/* ============================================================
   ★角丸(round)を全廃 第4弾 — 「線で構成し角は丸めない」編集/カタログデザイン
   ============================================================ */
.solution-card,.product-card,.value-card,.problem-card,.reason-item,.case-card,.case-card.listing,.column-card,
.doc-card,.dl-row,.callout,.callout.gold,.note-box,.note-box.good,.note-box.warn,.point-box,.article-cta,
.auth-card,.auth-demo,.form-card,.dual-card,.mega,.cert-badge,.filter-chip,#colSearch,.col-search input,
.btn,.btn-primary,.btn-navy,.btn-gold,.btn-forest,.btn-outline,.btn-ghost,.btn-lg,.header-login,.header-cta,
.pc-media,.pc-media img,.pc-cat,.doc-cover,.doc-cover img,.cc-photo,.cc-photo img,.cl-media,.cl-media img,
.dl-thumb,.dl-thumb img,.adopt-chip,.product-card .pc-tags span,.case-badges span,.cc-tags span,.col-item .cl-cat,
.mega .mi-ic,.icon-badge,.solution-card .sc-ic,.cert-badge .cb-ic,.dl-row .dl-ic,.reason-item .r-ic,.dual-card .dc-ic,.auth-card .auth-ic,
.solution-card .sc-arrow,.dl-row .dl-go,.dual-card .dc-list .tick,.feature-item .tick,
.article figure img,.article img,input,textarea,select,.doc-badge,.hcirc,.form-card input,.form-card textarea,.form-card select{
  border-radius:0 !important;
}

/* ★フロント全要素の角丸を一括ゼロ（個別漏れ .stats/.card 等を確実に潰す。管理バー・チャットボット除く）
   チャットボット（SHIRITAI の #shiritai-widget）は自前の角丸・枠のまま見せる。
   除外は :not(A, B) にまとめ、詳細度を元の (2,0,1) のまま保つ（下の「機能枠だけ復活」の指定より強くしない）。 */
body *:not(#wpadminbar, #shiritai-widget):not(#wpadminbar *, #shiritai-widget *){ border-radius:0 !important; }

/* ============================================================
   装飾ライン全廃・機能枠のみ保持 ─ 最終版 (front)
   二段構え：(1) 全 border を無効化 → (2) 機能枠だけ復活
   角丸・塗り(背景)は別ルールで処理済のため、ここでは触れない。
   site.css の末尾に貼る（style.css より後に読み込まれる想定）。
   ============================================================ */

/* (1) 全要素の border を無効化（管理バー #wpadminbar は除外）。
   border-style を断つ＝上下左右すべての罫線が描画されなくなる。
   `body :not(#wpadminbar):not(#wpadminbar *)` は id を含み specificity が高いため、
   既存の !important 装飾 border（.note-box.warn 等）も確実に上書きできる。
   チャットボット（#shiritai-widget）は角丸と同じく除外（詳細度は (2,0,1) のまま）。 */
body :not(#wpadminbar, #shiritai-widget):not(#wpadminbar *, #shiritai-widget *){ border-style:none !important; }

/* (2) 機能上どうしても必要な枠だけ復活：
   ・全ボタン基底(.btn=1.5px透明。塗り/アウトライン両方の寸法土台)
   ・アウトライン/ゴースト系ボタン(.btn-outline/.btn-ghost/.btn-logout/.header-login)
   ・フォーム部品(input/textarea/select)と共有URLフィールド(.share-url)
   border-style/width のみ再有効化し、色は各要素の既存宣言に委ねる
   （＝塗りボタンは自色＝不可視、アウトラインは輪郭色、入力欄は :focus 色も保持）。
   復活側は catch-all より高い specificity になるよう同じ :not 接頭辞を付与。 */
body .btn:not(#wpadminbar):not(#wpadminbar *),
body .btn-outline:not(#wpadminbar):not(#wpadminbar *),
body .btn-ghost:not(#wpadminbar):not(#wpadminbar *),
body .btn-logout:not(#wpadminbar):not(#wpadminbar *),
body .header-login:not(#wpadminbar):not(#wpadminbar *),
body input:not(#wpadminbar):not(#wpadminbar *),
body textarea:not(#wpadminbar):not(#wpadminbar *),
body select:not(#wpadminbar):not(#wpadminbar *),
body .share-url:not(#wpadminbar):not(#wpadminbar *){
  border-style:solid !important;
  border-width:1.5px !important;
}
/* 素の入力欄に線色フォールバック（!important を付けず :focus の色変化を殺さない） */
input, textarea, select, .share-url{ border-color:var(--line-cool); }

/* 擬似要素(::before/::after)で描く装飾ライン・グラデ帯・下線アクセントを個別に非表示。
   これらは背景グラデ由来のものが多く border-style 無効化では消えないため明示する。 */
.eyebrow::before,
.eyebrow.centered::after,
.eyebrow.on-dark::before, .eyebrow.on-dark::after,
.site-nav a.active::after,
.hero::before, .hero::after,
.page-hero::after,
.hero-photo::after,
.decay-step:not(:last-child)::after,
.steps::before,
.cta::after,
.site-footer::before,
.trust-strip::before,
.section-head::before, .section-title::before,
.intro-lead::after,
.partner-hero::after{ display:none !important; }

/* 擬似要素ではないが「背景 or gap」で線に見える装飾を解消 */
.scroll-hint i{ display:none !important; }   /* 縦グラデ細線(1px×42px) */
.stats{ gap:0 !important; }                  /* 容器背景×gap:1px のセル間セパレータ */
.reason-grid{ gap:0 !important; }            /* gap:1px＋背景 var(--line) の内部区切り罫 */
.intro-lead .u{ background:none !important; }/* 強調語のハイライター下線（文字は保持） */

/* hr は非表示（.rule は width/height:0 で既に線なし・余白確保用のため触れない） */
hr{ display:none !important; }

/* 比較表(.compare)は罫線を消した分、セル余白で可読性を確保（線は足さない） */
.compare td, .compare th{ padding-top:12px !important; padding-bottom:12px !important; }

/* ============================================================
   ★可読性リカバリ 第6弾 — 削ぎ過ぎた「背景/アイコン」を、線・角丸・パステルを使わず回復
   （背景=温かみのある無彩の面／アイコン=拡大のみ・円塗り復活せず／ダーク上バッジ=面の濃さで可視化）
   ============================================================ */
/* 1) 白カード×白ページで消える箱を、無彩の面で可視化（フラット・角丸なし・線なし・影なし） */
.value-card{ background:var(--sand) !important; }
.reason-item{ background:var(--sand) !important; }
.reason-item:hover{ background:var(--paper) !important; }
.reason-grid{ gap:14px !important; }

/* 2) アイコンが小さい → コンテナ寸法は触らず(崩れ回避)、アイコン自体を拡大 */
.value-card .icon-badge .ic, .problem-card .icon-badge .ic,
.metric .icon-badge .ic, .mini-value .icon-badge .ic{ width:40px !important; height:40px !important; color:var(--forest) !important; }
.reason-item .r-ic .ic{ width:38px !important; height:38px !important; color:var(--forest) !important; }

/* 3) ダーク背景の証明バッジ（見づらい）→ 面の濃さで可視化＋文字コントラスト確保 */
.section-dark .cert-badge{ background:rgba(255,255,255,.09) !important; padding:18px 22px !important; }
.section-dark .cert-badge .cb-ic .ic{ width:26px !important; height:26px !important; }
.section-dark .cert-badge .cb-s{ color:rgba(255,255,255,.72) !important; }

/* 4) 数値バンド（1975年〜）は不要 → 非表示 */
.trust-strip{ display:none !important; }

/* ============================================================
   第8弾｜左バー全撤去・"背景と箱の色の対比"だけで見せる
   原則: 線は一切引かない（縦バーも不可）。白地→箱に色 / 色地→箱を白。
   catch-all(border-style:none) の後に読む前提。第7弾の左バーは本ブロックで上書き無効化。
   ============================================================ */

/* ---- 見出しは明朝（バーなし・余白で章を示す） ---- */
.section-title, .hero-photo h1, .page-hero h1, .article > h2, .article > h3,
.related-head, .point-box .pb-t, .article blockquote p, .article-cta h4, .auth-card h1{
  font-family:"Zen Old Mincho","Hiragino Mincho ProN",serif !important;
}
.section-title{ font-weight:600 !important; letter-spacing:.02em !important; }
.section-title .accent, .section-head .section-title .accent{ color:var(--forest) !important; }

/* ---- 記事：h2/h3 はバー無し・明朝＋余白で階層（左に線を引かない） ---- */
.article > h2{ background:none !important; padding-left:0 !important; font-weight:600 !important; letter-spacing:.02em !important; line-height:1.55 !important; margin:58px 0 20px !important; }
.article > h3{ background:none !important; padding-left:0 !important; font-weight:600 !important; color:var(--ink) !important; margin:38px 0 14px !important; }
.related-head{ background:none !important; padding-left:0 !important; font-weight:600 !important; font-size:1.3rem !important; margin-bottom:26px !important; }
.page-hero h1{ background:none !important; padding-left:0 !important; font-weight:600 !important; }
.hero-photo h1{ font-weight:600 !important; }
.footer-col h4{ background:none !important; padding-left:0 !important; }
.intro-lead{ background:none !important; padding-left:0 !important; }
.intro-lead .u{ color:var(--forest) !important; font-weight:700 !important; }
body.single-column .page-hero h1{ font-weight:600 !important; letter-spacing:.03em !important; line-height:1.42 !important; }
body.single-column .page-hero p{ font-size:.8rem !important; letter-spacing:.14em !important; color:var(--gold-soft) !important; margin-top:16px !important; }

/* ============================================================
   箱＝背景色との対比だけで見せる（バー・線・角丸・影・パステルなし）
   既定は「白地セクション→箱にサンド色」。色地セクション上では箱を白へ反転。
   ============================================================ */
.value-card, .solution-card, .problem-card,
.product-card, .column-card, .doc-card,
.callout, .callout.gold, .note-box, .note-box.good, .note-box.warn,
.point-box, .article blockquote, .article-cta, .auth-demo,
.dual-card.public, .card.card-pad{
  background:var(--sand) !important;
}
/* 色地セクション(section-sand / section-alt)の上は 箱を白 に反転して対比 */
.section-sand :is(.value-card,.solution-card,.problem-card,.product-card,.column-card,.doc-card,.reason-item,.callout,.note-box,.card.card-pad,.dual-card.public),
.section-alt  :is(.value-card,.solution-card,.problem-card,.product-card,.column-card,.doc-card,.reason-item,.callout,.note-box,.card.card-pad,.dual-card.public){
  background:#fff !important;
}
/* 選ばれる理由（section-sand上）＝白箱 */
.reason-item{ background:#fff !important; }
.reason-item:hover{ background:var(--paper) !important; }
.value-card:hover, .solution-card:hover{ background:var(--paper) !important; }

/* 内側パディング（余白で見せる） */
.point-box{ padding:26px 30px !important; margin:36px 0 !important; }
.point-box .pb-t{ color:var(--forest) !important; font-weight:600 !important; letter-spacing:.04em !important; margin-bottom:10px !important; }
.point-box .pb-t .ic{ color:var(--forest) !important; width:20px !important; height:20px !important; }
.point-box p{ color:var(--text) !important; line-height:1.9 !important; }
.article blockquote{ padding:26px 30px !important; margin:36px 0 !important; }
.article blockquote p{ font-weight:500 !important; color:var(--ink) !important; line-height:1.85 !important; }
.article blockquote cite{ color:var(--gray-600) !important; }
.callout, .callout.gold{ padding:26px 30px !important; }
.note-box, .note-box.good, .note-box.warn{ padding:22px 26px !important; }
.problem-card{ padding:26px !important; }
.solution-card .sc-body{ padding:30px 28px 26px !important; }
.column-card .cl-body{ padding:22px 24px !important; }
.column-card .cl-cat{ color:var(--forest) !important; letter-spacing:.08em !important; }
.doc-body{ padding:18px 20px 20px !important; }
.dual-card.public{ padding:44px 40px !important; }
.article-cta{ margin-top:54px !important; }
.article-cta .ac-x{ padding:32px 38px !important; }
.article-cta h4{ font-weight:600 !important; }
.auth-demo{ padding:14px 16px !important; }

/* 図版＝サンドの額装面（影なし・バーなし） */
.article figure{ background:var(--sand) !important; padding:12px !important; margin:38px 0 !important; }
.article figure img{ box-shadow:none !important; display:block !important; }
.article figure figcaption{ margin-top:12px !important; padding:0 2px !important; }

/* タグ／バッジ（プレート化・線なし） */
.product-card .pc-tags span{ background:var(--white) !important; color:var(--forest) !important; }
.doc-cover .doc-badge{ background:var(--charcoal) !important; color:#fff !important; padding:4px 10px !important; letter-spacing:.08em !important; }

/* フラッグシップ（塗る炭）＝濃色面で主役化 */
.feature-block{ background:var(--sand) !important; }
.feature-block .fb-body{ background:var(--charcoal) !important; }
.feature-block .fb-body h3{ color:#fff !important; }
.feature-block .fb-body p{ color:rgba(255,255,255,.82) !important; }
.feature-block .fb-body .feature-item{ color:rgba(255,255,255,.9) !important; }
.feature-block .fb-body .feature-item .tick .ic{ color:#93E1AC !important; }
.feature-block .fb-body .btn-navy{ background:var(--forest) !important; border-color:var(--forest) !important; color:#fff !important; }

/* ============================================================
   ダークセクション（数値・実績・認証）＝面の濃さだけで区別（バーなし）
   ============================================================ */
.section-dark{ background:linear-gradient(160deg,var(--navy) 0%,var(--navy-900) 100%) !important; }
.section-dark .stats{ background:transparent !important; gap:14px !important; }
.section-dark .stat{ background:rgba(255,255,255,.06) !important; padding:32px 24px !important; }
.section-dark .stat .cap{ margin-top:14px !important; }
.adopt-chip{ background:rgba(255,255,255,.08) !important; }
.section-dark .cert-badge{ background:rgba(255,255,255,.07) !important; padding:18px 22px !important; }
.section .cert-badge, .section-alt .cert-badge, .section-sand .cert-badge{ background:var(--sand) !important; padding:16px 20px !important; }
.cert-row{ justify-content:flex-start !important; }

/* ============================================================
   取引先ログイン（黒地×生成り紙面）＝箱は白系(paper)で対比
   ============================================================ */
.auth-section{ background:var(--charcoal) !important; }
.auth-card{ background:var(--paper) !important; padding:48px 44px !important; }
.auth-card h1, .auth-card .auth-sub, .auth-foot{ color:var(--ink) !important; }
.auth-card h1{ font-weight:600 !important; }
.auth-card .auth-ic{ background:transparent !important; }
.auth-card .auth-ic .ic{ width:38px !important; height:38px !important; color:var(--navy) !important; }

/* ============================================================
   テーブル：横罫を足さず"面のゼブラ"（線・バーなし）
   ============================================================ */
.card table tbody tr:nth-child(even) th, .card table tbody tr:nth-child(even) td{ background:var(--sand) !important; }
.card table th, .card table td{ padding:15px 16px !important; }
.card table th{ color:var(--gray-600) !important; }
.compare tbody tr:nth-child(even) td, .compare tbody tr:nth-child(even) td:first-child{ background:var(--sand) !important; }
.compare tbody tr:hover td, .compare tbody tr:hover td:first-child{ background:#EAE3D6 !important; }

/* 細部 */
body .mega:not(#wpadminbar):not(#wpadminbar *){ border-style:solid !important; border-width:1px !important; border-color:var(--line) !important; }
.cl-meta, .doc-meta, .breadcrumb, .article figure figcaption, .dl-row .dl-m, .case-fig figcaption{ color:var(--gray-600) !important; }

/* ============================================================
   第9弾｜微修正（フッター折返し／reason"十字"解消／和文の改行）
   線・バーは足さない。分離は面と余白のみ。
   ============================================================ */
/* フッター見出し「会社案内・お問い合わせ」が2行に折れる → 折返し防止 */
.footer-col h4{ white-space:nowrap !important; }

/* 選ばれる理由：白カード×隙間で出る"十字"を解消＝1枚の白面に統合（gap無し・線なし） */
.reason-grid{ background:#fff !important; gap:0 !important; }
.section-sand .reason-item, .reason-item{ background:transparent !important; }

/* 和文の改行を文節優先に＋端物(オーファン)抑制（未対応ブラウザは既定にフォールバック） */
.section-title, .article > h2, .article > h3, .cta h2, .hero-photo h1, .page-hero h1,
.lead, .hero-photo p, .page-hero p, .cta p,
.reason-item p, .value-card p, .solution-card p, .problem-card p, .article p{
  line-break:strict !important; word-break:auto-phrase !important; text-wrap:pretty !important;
}

/* ---- 取引先マイページ ヒーローのアクション（動画スタジオ導線・全ページ共通） ---- */
.partner-bar-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.btn-ghost-light{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:8px;
  border:1.5px solid rgba(255,255,255,.4); color:#fff; font-size:.85rem; font-weight:700; text-decoration:none; transition:var(--tr); }
.btn-ghost-light:hover{ background:#fff; color:var(--navy); border-color:#fff; }
.btn-ghost-light .ic{ width:17px; height:17px; }

/* 固定ヘッダー分の余白（狭幅はナビ段が消えて1段になる） */
@media(max-width:1080px){
  .page-hero{ padding-top:120px; }
  .auth-section{ min-height:100vh; padding:140px 0 84px; } /* 狭幅はヘッダーが1段(68px)になる */
}

/* ---------- 線画アイコンの撤去（2026-09） ---------- */
/* メガメニュー: アイコン → 商品写真 */
.mega .mi-ic{ width:56px; height:42px; overflow:hidden; background:var(--paper) !important; }
.mega .mi-ic img{ width:100%; height:100%; object-fit:cover; display:block; }
/* チェック丸の箇条書き → 小さな角マーク（商品ページの箇条書きと同じ） */
.feature-item{ position:relative; padding-left:18px; }
.feature-item::before{ content:""; position:absolute; left:2px; top:.72em; width:7px; height:7px; background:var(--forest); }
.feature-block .fb-body .feature-item::before{ background:#93E1AC; }
/* 記事内「提案ポイント」箱・ログイン／登録カードのアイコンは出さない */
.point-box .pb-t .ic{ display:none !important; }
.auth-card .auth-ic{ display:none !important; }
/* お問い合わせ右カラム: 見出しのみ */
.value-card h3{ margin-top:0; }
/* 記事末尾CTA箱: 説明文→ボタン 16px→22px */
.article-cta p{ margin-bottom:22px; }
/* コラムの先頭画像（.article の外にある figure）→ 本文 3px→34px */
.article-wrap > figure{ margin:0 0 34px; }


/* ============================================================
   モバイル調整（2026-09-08）
   狭い画面で「はみ出して切れる」「下端が押せない」を潰す。
   561px以上の描画は変更しない。
   ============================================================ */

/* .auth-section は display:flex。子の .container は min-width:auto のため中身より縮めず、
   /register/ ではページ全体が 390px に広がって右15pxが切れていた（body は overflow-x:clip のため
   横スクロールでも見えない）。 */
.auth-section > .container{ min-width:0; width:100%; }

/* iOS Safari は position:fixed + bottom:0 を「ツールバーを畳んだときの高さ」で解釈するため、
   ツールバー表示中はメニュー下端（お問い合わせボタン）がツールバーの裏に入る。
   dvh はツールバーの出入りに追従する単位。非対応ブラウザでは従来の inset:68px 0 0 0 のまま。 */
.mobile-nav{ overscroll-behavior:contain; padding-bottom:calc(28px + env(safe-area-inset-bottom)); }
@supports (height:100dvh){
  .mobile-nav{ inset:68px 0 auto 0; height:calc(100dvh - 68px); }
}

@media(max-width:560px){
  /* .btn は white-space:nowrap ＋ padding:15px 30px（.btn-lg は 18px 40px）で縮むことも
     折り返すこともできず、狭幅・文字拡大設定で確実にはみ出していた。 */
  .btn, .btn-lg{ white-space:normal; max-width:100%; }
  .btn{ padding:14px 20px; }
  .btn-lg{ padding:16px 22px; font-size:1rem; }
  /* 上の 754行目で padding:48px 44px !important が当たっているため !important で上書きする */
  .auth-card{ padding:30px 20px !important; }
}

/* ============================================================
   第10弾｜和文の改行位置（PC）
   word-break:auto-phrase は Chrome だけで、しかも文節が細かいため
   「施主さまの／困りごとから」「その場で／閲覧・ダウンロード」のように
   意味の切れ目でないところで折り返っていた。
   意味のかたまりを .kt（inline-block）で囲み、折り返しは必ずその境目で
   起きるようにする。Chrome / Safari で同じ位置に折り返ることを実測で確認。
   幅が足りないときは .kt の中でも折り返るので、スマホでもはみ出さない。
   ============================================================ */
.kt{ display:inline-block !important; }  /* 他の「〜 span{display:block}」に負けないように */
/* inc/jp-wrap.php が、かたまりの並びを .ktw（ふつうのインライン）1つにまとめて出す。
   見出しが flex / grid でも、かたまりが個別の flex アイテムにならない */

/* 2カラムの中に入る見出し（桁数に対して字が大きく、1行10〜12字しか入らなかった） */
.section-title--col{ font-size:clamp(1.45rem,2.4vw,1.9rem) !important; }
/* 同じく導入文。526px幅で19字しか入らず「ます。」だけが行に残っていた */
.intro-lead{ font-size:clamp(1.15rem,1.9vw,1.4rem); }

/* フッターの商品名「スーパーラジエントヒーター」が181px必要なのに列が161pxで「…ヒー／ター」と割れていた。
   商品の列だけ少し広げる（ロゴ・住所の列 289→257px）。1180px未満で入りきらないときは「スーパーラジエント／ヒーター」で折り返す */
.footer-grid.f5{ grid-template-columns:1.6fr 1.2fr 1fr 1fr 1fr; }
@media(max-width:900px){ .footer-grid.f5{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .footer-grid.f5{ grid-template-columns:1fr; } }

/* ============================================================
   【重要】Safari（WebKit 26系）で text-wrap:pretty / balance と inline-block のかたまり（.kt）が
   同じ段落に入ると、ページごと落ちる（「問題が繰り返し起きました」）。2026-09-23 実測。
   かたまりを含む要素は text-wrap を通常に戻す。改行位置と「1〜3字だけの最終行」はかたまり側で制御済みなので失うものはない。
   site.css の「和文の改行」ルール（text-wrap:pretty !important・詳細度0,1,1）に勝つよう詳細度を上げている。
   ============================================================ */
html body :is(h1,h2,h3,h4,p,div,span,li,a,b,small,td,th,dd,dt):has(> .kt, > .ktw){ text-wrap:wrap !important; }
html body .kt, html body .ktw{ text-wrap:wrap !important; }

/* ============================================================
   第11弾｜スマホのUI・導線（2026-09-24）
   iPhone 13（390px）／Pixel 7（412px）／iPhone SE（320px）の実機プロファイルで全ページを実測・目視して直したもの。
   product.css・gate.css など後から読まれるCSSに勝つよう、必要なところは html body を前置している。
   ============================================================ */

/* ---- 改行のかたまり：枠に入りきるかたまりは崩さない。枠より広いものだけ nav.js が .kt-open を付け、
   インラインに戻して中の小さなかたまりの切れ目で折らせる（「スーパーラジエン／ト」のような語の途中の折れを防ぐ）。
   JavaScript が動かないときだけ、スマホでは大きな単位（.ktc）を最初から解いておく。 ---- */
html body .kt.kt-open{ display:inline !important; }
@media (max-width:767px){
  html:not(.js) body .ktc{ display:inline !important; }
}

/* ---- ヘッダー：タップしやすい大きさ（44px四方以上） ---- */
@media (max-width:1080px){
  .hamburger{ width:48px; height:48px; padding:0; align-items:center; justify-content:center; margin-right:-10px; }
  .header-tel{ min-height:44px; justify-content:center; padding:0 6px; }
}

/* ---- スマホメニュー：商品への直接リンク／今いるページの表示／下端の相談ボタンを常に見せる ---- */
@media (max-width:1080px){
  .mobile-nav{ padding-bottom:0 !important; }
  .mobile-nav > a:not(.btn){ padding-top:15px !important; padding-bottom:15px !important; }
  .mobile-nav a[aria-current="page"]{ color:#fff; background:rgba(255,255,255,.08); box-shadow:inset 3px 0 0 var(--gold-soft,#d7b877); }
  .mnav-products{ display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:4px 0 12px; }
  .mobile-nav .mnav-products a{ display:flex; align-items:center; min-height:44px; padding:8px 12px !important; font-size:.84rem !important;
    line-height:1.35; color:rgba(255,255,255,.86); background:rgba(255,255,255,.06); border:0 !important; border-radius:0; }
  .mobile-nav .mnav-products a[aria-current="page"]{ background:rgba(255,255,255,.16); box-shadow:none; }
  .mnav-cta{ position:sticky; bottom:0; margin:auto -28px 0; padding:12px 28px calc(14px + env(safe-area-inset-bottom));
    background:var(--navy-900,#0f1a36); box-shadow:0 -8px 16px rgba(0,0,0,.22); display:grid; grid-template-columns:1fr; gap:8px; }
  .mnav-cta .btn{ border-bottom:0 !important; justify-content:center; }
  .mobile-nav .mnav-products a .kt{ display:inline-block; }
  .mnav-cta .btn{ margin:0 !important; }
}

/* ---- ページ先頭へ戻るボタン（長いページで、2画面ぶん下がったら出す） ---- */
.to-top{ position:fixed; right:14px; bottom:calc(16px + env(safe-area-inset-bottom) + var(--to-top-lift, 0px)); z-index:880;
  width:48px; height:48px; display:flex; align-items:center; justify-content:center; border:0; border-radius:50%;
  background:rgba(22,36,74,.88); color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.22); cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s, transform .25s, visibility .25s; }
.to-top.is-on{ opacity:1; visibility:visible; transform:none; }
.to-top svg{ width:20px; height:20px; transform:rotate(-90deg); }
.to-top:focus-visible{ outline:3px solid var(--gold-soft,#d7b877); outline-offset:2px; }
body.is-modal-open .to-top, body.mnav-open .to-top{ display:none; }
/* 画面下に固定バーがあるページ（ハイドロスカイ商品ページのスマホ下部バー）はその上に出す */
body:has(.pd--has-side) { --to-top-lift: 64px; }
@media (min-width:821px){ body:has(.pd--has-side) { --to-top-lift: 0px; } }

/* ---- ページ内リンクの着地位置：固定ヘッダーの下に隠れないように ---- */
html{ scroll-padding-top:calc(var(--hdr-h, 105px) + 12px); }

/* ---- 絞り込み・切り替えのボタン：スマホでは高さ44px ---- */
@media (max-width:767px){
  html body .filter-chip, html body .vid-filter button, html body .studio-chip{ min-height:44px; display:inline-flex; align-items:center; }
}

/* ---- 小さすぎる文字（10px台）の下限：スマホでは11.5px ---- */
@media (max-width:767px){
  html body .case-card .cc-cat, html body .case-card.listing .cc-cat, html body .column-card .cl-cat,
  html body .vid-product, html body .vid-badge, html body .vid-dur, html body .doc-badge, html body .doc-lock,
  html body .pd-doc__badge, html body .pd-doc__lock, html body .pd-card__tag, html body .cc-tags span,
  html body .sc-prod-tag, html body .sc-badge, html body .sc-dur{ font-size:11.5px !important; }
}

/* ---- 施工事例カード（写真の上の文字）：タグが暗い写真に沈んで読めなかった ---- */
.case-card:not(.listing) .cc-tags span{ color:#fff !important; background:rgba(255,255,255,.16) !important; }

/* ---- フッター：外部サイト（新しいタブで開く）の目印。文字の色に合わせ、最後の語とつなげて折り返さない ---- */
.footer-col a .ic-ext{ width:13px; height:13px; margin-left:5px; vertical-align:-1px; stroke-width:2; }

/* ---- フッター：スマホでは2列にして短く、リンクはタップしやすい高さに ---- */
@media (max-width:560px){
  html body .footer-grid.f5{ grid-template-columns:1fr 1fr; gap:22px 16px; }
  html body .footer-grid.f5 > .footer-brand{ grid-column:1 / -1; }
  .footer-col ul{ gap:0 !important; }
  .footer-col a{ display:flex; align-items:center; min-height:40px; font-size:.84rem; }
  .footer-col h4{ margin-bottom:6px !important; white-space:normal !important; }
}

/* ---- 課題から探す：症状×商品の早見表をスマホではカードに（列が縦書き状態になっていた） ---- */
@media (max-width:600px){
  html body .sol-matrix, html body .sol-matrix tbody, html body .sol-matrix tr, html body .sol-matrix td{ display:block; width:auto !important; }
  html body .sol-matrix thead{ display:none; }
  html body .sol-matrix tr{ background:#fff; margin:0 0 10px; padding:12px 14px; }
  html body .sol-matrix td{ border:0 !important; padding:3px 0 !important; text-align:left !important; }
  html body .sol-matrix td:first-child{ font-weight:700; color:var(--pd-ink,#171a1e); padding-bottom:6px !important; font-size:.92rem; }
  html body .sol-matrix td[data-label]:not(:first-child){ display:flex; justify-content:space-between; gap:10px; font-size:.86rem; }
  html body .sol-matrix td[data-label]:not(:first-child)::before{ content:attr(data-label); color:var(--pd-text,#2c3138); }
  html body .sol-matrix td:not(:first-child):empty{ display:none; }
  html body .pd-table__wrap:has(.sol-matrix){ overflow:visible; background:none; }
}

/* ---- 動画ライブラリ：スマホでも2列（縦長動画が1列で並び、ページが33画面分あった） ---- */
@media (max-width:460px){
  html body .vid-grid{ grid-template-columns:1fr 1fr !important; gap:12px !important; }
  html body .vid-card .vid-name{ font-size:.84rem; }
  html body .vid-card .vid-dl, html body .vid-card [data-gate="dl"]{ font-size:.74rem; }
}

/* ---- 横に流せるタブ（基礎ロングライフの追従タブ等）：右端をぼかして「続きがある」ことを見せる ---- */
@media (max-width:820px){
  .kiso-anchors ul, .kiso-subtabs ul{ -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent); mask-image:linear-gradient(90deg,#000 85%,transparent); }
}

/* ---- ハイドロスカイ技術資料（会員）：スマホでは章ナビを追従させない（ヘッダーと合わせて画面の3割を覆っていた） ---- */
@media (max-width:767px){
  html body .hs-nav{ position:static; }
}

/* ---- 商品ページの要点表：スマホでは見出しを上、内容を下に（内容の幅が246pxしかなかった） ---- */
@media (max-width:560px){
  html body .pd-facts table, html body .pd-facts tbody, html body .pd-facts tr, html body .pd-facts th, html body .pd-facts td{ display:block; width:auto; }
  html body .pd-facts th{ padding-bottom:2px !important; }
  html body .pd-facts td{ padding-top:2px !important; }
}

/* ---- ページ下部の「ほかの商材」「一覧へ戻る」（商品ページ） ---- */
.pd-next{ padding:56px 0 64px; background:#fff; }
.pd-next__h{ font-size:1.05rem; font-weight:700; margin:0 0 16px; color:var(--pd-ink,#171a1e); }
.pd-next__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.pd-next__item{ display:flex; flex-direction:column; background:var(--pd-band,#f2f3f5); color:inherit; text-decoration:none; }
.pd-next__item img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:#1b1e23; }
.pd-next__item > span{ display:block; padding:10px 12px 12px; font-size:.86rem; font-weight:700; line-height:1.45; color:var(--pd-ink,#171a1e); }
.pd-next__item small{ display:block; font-weight:500; font-size:.74rem; color:var(--pd-muted,#5f6670); margin-top:3px; }
.pd-next__item:hover > span{ color:var(--pd-accent,#1f2a3a); }
.pd-next__back{ margin-top:22px; display:flex; flex-wrap:wrap; gap:10px 18px; }
.pd-next__back a{ display:inline-flex; align-items:center; gap:6px; min-height:44px; font-weight:700; font-size:.92rem; color:var(--pd-accent,#1f2a3a); text-decoration:none; }
.pd-next__back a:hover{ text-decoration:underline; }
@media (max-width:1000px){ .pd-next__grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .pd-next__grid{ grid-template-columns:1fr 1fr; } .pd-next{ padding:40px 0 48px; } }

/* ---- 戻る導線（ログイン・404・会員ページ） ---- */
.back-link{ display:inline-flex; align-items:center; gap:6px; min-height:44px; font-weight:700; font-size:.9rem; color:var(--navy,#16244a); text-decoration:none; }
.back-link:hover{ text-decoration:underline; }
.back-link svg{ width:16px; height:16px; transform:rotate(180deg); }
.nf-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:26px auto 0; max-width:640px; }
.nf-links a{ display:inline-flex; align-items:center; min-height:44px; padding:0 16px; background:var(--gray-100,#f2f3f5); color:var(--navy,#16244a); font-weight:700; font-size:.88rem; text-decoration:none; }
.member-crumb{ background:#fff; border-bottom:1px solid var(--line,#e5e7eb); }
.member-crumb .container{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-height:44px; font-size:.8rem; color:var(--gray-600,#5f6670); }
.member-crumb a{ color:var(--navy,#16244a); text-decoration:none; font-weight:700; }

/* ログインして戻ってきたとき、押した資料に一時的に目印を付ける（gate.js） */
.is-back-target{ outline:3px solid var(--gold,#b8892c); outline-offset:4px; transition:outline-color .6s; }

/* 暗い背景（ログイン・会員ページ）のパンくず */
.breadcrumb.on-dark{ color:rgba(255,255,255,.55) !important; margin:0 0 18px; flex-wrap:wrap; }
.breadcrumb.on-dark a{ color:rgba(255,255,255,.78); }
.breadcrumb.on-dark a:hover{ color:#fff; }
.auth-section .breadcrumb.on-dark{ justify-content:center; }

/* 行頭禁則を全体に（長音「ー」・小さい「ゃゅょっ」・々 などを行頭に置かない）。
   これまで一部の見出し・リードにしか効いておらず、本文やカードで「ヒータ／ー」のように折り返していた */
html body{ line-break:strict; }

/* ---- 小さいリンクの押せる範囲を広げる（スマホ・タブレット）
   文字の位置は変えず、上下に余白を足して同じだけ負のマージンで打ち消す（高さ25px前後 → 44px前後） ---- */
@media (max-width:767px){
  html body .breadcrumb a, html body .sol-hero__crumb a, html body .pd-hero__crumb a, html body .member-crumb a{ padding:10px 2px; margin:-10px -2px; }
  html body .pd-related__head a{ display:inline-block; padding:10px 0; margin:-10px 0; }
  html body .pd-ser a{ padding:10px 0; margin-bottom:-10px; }
  html body .vid-dl{ min-height:44px; }
  html body .pd-stat .s{ font-size:12px; }
  html body .pd-flow__i small{ font-size:11.5px; }
}
@media (max-width:900px){
  /* 基礎ロングライフ「選べる3プラン」の章リンク：リンク自体を44pxにし、帯の上下余白はその分なくす */
  html body .kiso-subtabs ul{ padding-top:0; padding-bottom:0; }
  html body .kiso-subtabs a{ min-height:44px; }
}
@media (max-width:820px){
  /* 商品ページ下端の「基礎ロングライフシステム」帯：高さ38px → 48px */
  html body .pd .pd-side{ min-height:48px; padding-top:12px; padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
}

/* ---- 最小幅（iPhone SE 初代・320px）：動画カードの「ダウンロード（要ログイン）」が「ダウンロー／ド」と折れていた。
   鍵アイコンを外して文字の幅を確保し、ボタンはカード幅いっぱいに ---- */
@media (max-width:374px){
  html body .vid-card .vid-dl{ display:flex; width:100%; padding-left:8px; padding-right:8px; }
  html body .vid-card .vid-dl .ic{ display:none; }
}

/* ---- ページの最後の行（フッター下端の認証・登録番号）が「先頭へ戻る」ボタンの下に隠れないよう、下に余白を足す ---- */
@media (max-width:767px){
  html body .site-footer .footer-bottom{ padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
}

/* ---- チャットボット（SHIRITAI・inc/chatbot.php）との重なり ----
   起動ボタン（#shiritai-fab）は右下に固定。--chat-lift / --chat-right / --chat-bar は nav.js が起動ボタンと下部固定バーの実寸から決める。 */
/* 先頭へ戻るボタンは起動ボタンの真上に置く */
.to-top{ right:var(--chat-right, 14px); bottom:calc(16px + env(safe-area-inset-bottom) + var(--to-top-lift, 0px) + var(--chat-lift, 0px)); }
/* 右端に固定の導線があるページ（ハイドロスカイ商品ページ）：スマホの下部バーの上へ起動ボタン・声かけ・吹き出しを上げる（--chat-bar）。
   PC の右端の縦帯には声かけ・吹き出しが重なるので、その幅だけ左へ寄せる（--chat-side） */
#shiritai-fab{ translate:0 calc(-1 * var(--chat-bar, 0px)); }
#shiritai-nudge, #shiritai-bubble{ translate:calc(-1 * var(--chat-side, 0px)) calc(-1 * var(--chat-bar, 0px)); }
/* メニュー・動画や資料の窓を開いている間は、起動ボタンが窓の下の操作に重ならないよう隠す */
body.mnav-open #shiritai-fab, body.mnav-open #shiritai-nudge, body.mnav-open #shiritai-bubble,
body.is-modal-open #shiritai-fab, body.is-modal-open #shiritai-nudge, body.is-modal-open #shiritai-bubble{ visibility:hidden !important; pointer-events:none !important; }
@media print{ #shiritai-widget, .to-top{ display:none !important; } }

/* ============================================================
   数字の書体（Inter）・ロゴの大きさ（2026-10-03）
   ============================================================ */
/* 数字が主役の表示だけ Inter。文章の中の数字は和文の書体のまま。
   和文の文字は Inter に無いので、同じ指定の中でも和文の書体で出る（受付時間の「土・日」など）。
   電話番号・FAX・受付時間は inc/num-font.php が出力時に .f-num で囲む（本文・表・フッターも含む） */
:root{ --font-num:"Inter", "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; }
/* 商品ページ・基礎ロングライフの CSS は site.css より後に読まれるので、body を付けて同じ強さの指定に勝たせる */
body .f-num, body .ht-num, body .ht-hours, body a[href^="tel:"],
body .vid-dur, body .pd-step__n, body .pd-feat__n, body .sol-tile__no, body .rsn-body .n, body .reason-item .r-no,
body .pd-stat .v, body .pd-feat__stats .v, body .pd-bar__v, body .pd-card__tag,
body .kiso-problem__n, body .kiso-decay__n, body .kiso-perf__n, body .kiso-plan__h .n, body .kiso-subtabs a .n, body .kiso-ev__stats .v, body .kiso-bar__v,
body .trust-cell .n, body .stat .num, body .mini-value .no, body .problem-card .no{ font-family:var(--font-num); }
.ht-num{ font-weight:600; letter-spacing:0; }
/* 電話番号のハイフンを数字の高さの中央へ（case）。等幅数字だと桁の間が空くので、電話番号は通常の数字幅に戻す */
body .ht-num, body .f-num, body a[href^="tel:"]{ font-variant-numeric:normal; font-feature-settings:"case" 1; }
.f-num{ white-space:nowrap; }   /* 電話番号をハイフンの位置で折り返さない（フッターで「06-6569-／2720」になっていた） */
body .pd-feat__n, body .trust-cell .n, body .reason-item .r-no{ font-weight:500; }
body .sol-tile__no, body .rsn-body .n, body .mini-value .no{ font-weight:600; letter-spacing:.08em; }

/* ロゴ：PC は1段目を 60→72px にして 42→56px。狭幅（ハンバーガー）はヘッダーの高さ 68px のまま 42→50px（スマホ 46px） */
.header-top-inner{ height:72px; }
.brand img{ height:56px !important; }
@media(max-width:1080px){
  .header-top-inner{ height:68px; }
  .brand img{ height:50px !important; }
}
@media(max-width:640px){
  .brand img{ height:46px !important; }
}
/* ロゴは縮めない（狭い幅で電話番号に押されて縦横比が崩れていた）。足りない幅は電話番号のほうを小さくして作る */
.brand, .brand img{ flex:none; }
.brand img{ width:auto !important; }
@media(max-width:400px){
  .ht-num{ font-size:1rem; gap:6px; }
  .ht-num .ic{ width:17px; height:17px; }
}
@media(max-width:350px){
  .brand img{ height:42px !important; }
  .ht-num .ic{ display:none; }
}
/* PC はヘッダーが 12px 高くなるので、上余白を数値で持っているところに同じだけ足す
   （商品ページ・基礎ロングライフ・ページ内リンクの着地はヘッダーを実測しているので自動） */
@media(min-width:1081px){
  .page-hero{ padding-top:162px; }
  .partner-hero{ padding-top:162px; }
  .hero-photo-inner{ padding-top:136px; }
  body .fdn-hero{ padding-top:132px; }
}

/* ---- カードの分類ラベル：区切り（｜）の前後でだけ折り返す。長いラベル（ハイドロ・スカイ＋基礎ロングライフシステム）はPCで1行に収める。2026-11-04 ---- */
.lbl-p{ white-space:nowrap; }
.lbl-sep{ margin:0 .15em; opacity:.6; }
@media (min-width:768px){
  html body .case-card.listing .cc-cat.is-long, html body .pd-card__tag.is-long{ font-size:.66rem; letter-spacing:.02em; }
}

/* コラム一覧のカードも、長い分類ラベル（ハイドロ・スカイ ｜ 基礎ロングライフシステム）をPCで1行に。2026-11-04 */
@media (min-width:768px){ html body .column-card .cl-cat.is-long{ font-size:.66rem; letter-spacing:.02em; } }


/* トップ「私たちは、住まいの健康を高める…」の導入（2026-11-06）
   標語を小さな見出しに分ける（サイト全体で枠線を使わない決まりのため、縦線は引かない）。本文は2段落にして、1行ずつ途切れて見えないようにする */
#about-intro .intro-quote{ display:block; margin:0 0 12px; font-size:1rem; font-weight:700; color:var(--forest); letter-spacing:.14em; }
/* 11/06 追記：左の見出しと上端をそろえる（ページ側で align-items:start）。右の太字は左の見出しより一段弱く（緑の強調語はサイトの決まりのまま） */
#about-intro .intro-lead{ font-size:clamp(1.05rem,1.5vw,1.22rem); font-weight:600; line-height:1.85; }
#about-intro .section-title--col{ margin-top:.17em; }
#about-intro .about-copy__p{ margin-top:18px; line-height:1.95; }
#about-intro .about-copy__p + .about-copy__p{ margin-top:10px; }

/* 11/06 追記：左の見出し：右の本文＝4：6。見出しは「私たちは、／住まいの「健康」を高める／住環境商材の専門商社です。」の3行（1024px以下は縦に並ぶので対象外） */
@media(min-width:1025px){ #about-intro .grid-2{ grid-template-columns:4fr 6fr; } }

/* 動画ライブラリの商材の絞り込み（2026-11-06）。絞り込みはカードに hidden を付けて隠すが、.vid-card の display:flex が勝って全部見えたままだった */
.vid-card[hidden]{ display:none !important; }