@charset "utf-8";
/* ===========================================================
   RIDO ハブ専用のトーン
   body.p89-rido の内側にだけ効く。共通のヘッダー・フッター・
   主ナビの構造は変えず、面と書体でRIDOだと分かるようにする。

   色と書体は rido.one の実CSSで確認した値。
     #e0e0d9 背景 / #000 本文 / #d35b4b 主アクセント
     #b04a40 濃いアクセント / #db4a39 鮮やかなアクセント
     #2b2b2b #262626 #232323 暗面 / #E0E0D9 暗面の文字 / #B6B6B6 補助
     Zen Kaku Gothic New（和文） / Special Gothic Expanded One（欧文）
   =========================================================== */

body.p89-rido{
  --rido-paper:#e0e0d9;
  --rido-ink:#000;
  --rido-accent:#d35b4b;
  --rido-accent-deep:#b04a40;
  --rido-accent-vivid:#db4a39;
  --rido-dark:#2b2b2b;
  --rido-dark-2:#262626;
  --rido-card:#232323;
  --rido-on-dark:#e0e0d9;
  --rido-muted:#b6b6b6;

  --rido-en:'Special Gothic Expanded One','Space Grotesk',sans-serif;
  --rido-ja:'Zen Kaku Gothic New','Noto Sans JP','Hiragino Sans',sans-serif;

  background:var(--rido-paper);
  font-family:var(--rido-ja);
}

/* --- 1. レイアウトの器 --------------------------------------------------
   .rido-main は幅を持たず、各セクションの直下の子で幅を取る。
   こうすると暗い面を画面いっぱいに敷ける。 */

.p89-rido .rido-main{width:100%}

.p89-rido .rido-section{padding-block:clamp(52px,6vw,96px)}
.p89-rido .rido-section > *{
  max-width:1440px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.p89-rido .t-crumb,
.p89-rido .p89-subcategories{
  max-width:1440px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* --- 2. 見出しの共通形 -------------------------------------------------- */

.p89-rido .rido-kicker{
  font-family:var(--rido-en);
  font-size:13px;
  letter-spacing:.14em;
  color:var(--rido-accent);
  margin:0 0 10px;
}
.p89-rido .rido-section-head{margin-bottom:clamp(24px,3vw,40px)}
.p89-rido .rido-section-head h2{
  font-family:var(--rido-ja);
  font-weight:700;
  font-size:clamp(22px,2.4vw,34px);
  letter-spacing:.04em;
  line-height:1.5;
  color:var(--rido-ink);
  margin:0;
}

/* --- 3. ヒーロー --------------------------------------------------------
   公式のメインビジュアルに合わせ、明るい面に黒の本文、欧文を赤で置く。 */

.p89-rido .rido-hero{
  background:var(--rido-paper);
  padding-block:clamp(40px,5vw,84px) clamp(36px,4.4vw,72px);
  border-bottom:1px solid rgba(0,0,0,.12);
}
.p89-rido .rido-hero-inner{
  max-width:1440px;
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}

.p89-rido .rido-title{margin:0;line-height:1}
.p89-rido .rido-logo{display:block;height:auto}
.p89-rido .rido-logo.is-wordmark{
  font-family:var(--rido-en);
  font-size:clamp(46px,7vw,104px);
  letter-spacing:.02em;
  line-height:1;
  color:var(--rido-accent);
}

.p89-rido .rido-en{
  font-family:var(--rido-en);
  font-size:clamp(14px,1.5vw,20px);
  letter-spacing:.1em;
  color:var(--rido-accent-deep);
  margin:0;
}
.p89-rido .rido-lead{
  font-family:var(--rido-ja);
  font-weight:700;
  font-size:clamp(19px,2.2vw,31px);
  line-height:1.65;
  letter-spacing:.02em;
  color:var(--rido-ink);
  margin:4px 0 0;
  max-width:24em;
}
.p89-rido .rido-child-title{
  font-family:var(--rido-ja);
  font-weight:700;
  font-size:clamp(22px,2.6vw,36px);
  line-height:1.5;
  letter-spacing:.03em;
  margin:10px 0 0;
  padding-top:14px;
  border-top:2px solid var(--rido-accent);
  color:var(--rido-ink);
}
.p89-rido .rido-child-desc{
  font-size:17px;line-height:1.9;color:#3a3a36;margin:4px 0 0;max-width:36em;
}
.p89-rido .rido-note{
  font-size:15px;line-height:1.9;color:#4a4a45;margin:6px 0 0;max-width:34em;
}

/* --- 4. ボタン ---------------------------------------------------------- */

.p89-rido .rido-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.p89-rido .rido-button{
  display:inline-flex;align-items:center;gap:10px;
  min-height:48px;
  padding:12px 22px;
  border:1px solid var(--rido-ink);
  font-family:var(--rido-ja);
  font-weight:700;
  font-size:15px;
  letter-spacing:.03em;
  color:var(--rido-ink);
  background:transparent;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.p89-rido .rido-button:hover{background:var(--rido-ink);color:var(--rido-paper)}
.p89-rido .rido-button.is-primary{
  background:var(--rido-accent);
  border-color:var(--rido-accent);
  color:#fff;
}
.p89-rido .rido-button.is-primary:hover{background:var(--rido-accent-deep);border-color:var(--rido-accent-deep)}
.p89-rido .rido-section > .rido-button{display:inline-flex;margin-top:24px}

/* --- 5. 子カテゴリのナビ（masterのマークアップに合わせる） -------------- */

.p89-rido .p89-subcategories{
  display:flex;flex-wrap:wrap;gap:8px;
  padding-block:20px;
}
.p89-rido .p89-subcategories a{
  display:inline-flex;align-items:center;gap:8px;
  min-height:48px;
  padding:10px 18px;
  border:1px solid rgba(0,0,0,.24);
  font-size:15px;font-weight:700;letter-spacing:.02em;
  color:var(--rido-ink);
  transition:background .2s ease,border-color .2s ease;
}
.p89-rido .p89-subcategories a span{font-weight:400;font-size:13px;color:#5d5d57}
.p89-rido .p89-subcategories a:hover{border-color:var(--rido-ink);background:rgba(0,0,0,.05)}
.p89-rido .p89-subcategories a[aria-current="page"]{
  background:var(--rido-accent);border-color:var(--rido-accent);color:#fff;
}
.p89-rido .p89-subcategories a[aria-current="page"] span{color:rgba(255,255,255,.85)}

/* --- 6. 記事がないとき --------------------------------------------------
   偽の記事を置かない。静かに、事実だけを書く。 */

.p89-rido .rido-empty{
  border:1px dashed rgba(0,0,0,.3);
  padding:clamp(26px,3.4vw,44px);
  font-size:17px;
  line-height:1.9;
  color:#4a4a45;
  margin:0;
}

/* --- 7. 公式サイトへの導線（暗い面） ------------------------------------ */

.p89-rido .rido-pillars{background:var(--rido-dark);color:var(--rido-on-dark)}
.p89-rido .rido-pillars .rido-kicker{color:var(--rido-accent-vivid)}
.p89-rido .rido-pillars .rido-section-head h2{color:var(--rido-on-dark)}

.p89-rido .rido-pillar-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.6vw,20px);
}
.p89-rido .rido-pillar{
  display:flex;flex-direction:column;gap:6px;
  min-height:48px;
  padding:clamp(20px,2.4vw,32px);
  background:var(--rido-card);
  color:var(--rido-on-dark);
  position:relative;
  transition:background .2s ease;
}
.p89-rido .rido-pillar:hover{background:var(--rido-dark-2)}
.p89-rido .rido-pillar-en{
  font-family:var(--rido-en);
  font-size:clamp(20px,2.2vw,30px);
  letter-spacing:.04em;
  color:var(--rido-accent-vivid);
}
.p89-rido .rido-pillar-ja{font-size:16px;font-weight:700;letter-spacing:.03em}
.p89-rido .rido-pillar-go{
  position:absolute;top:clamp(18px,2.2vw,28px);right:clamp(18px,2.2vw,28px);
  color:var(--rido-muted);
}

.p89-rido .rido-link-list{
  list-style:none;
  margin-top:clamp(20px,2.4vw,32px);
  padding-inline:var(--gutter);
  border-top:1px solid rgba(224,224,217,.22);
}
.p89-rido .rido-link-list li{border-bottom:1px solid rgba(224,224,217,.22)}
.p89-rido .rido-link-list a{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:4px 16px;
  min-height:48px;
  padding:16px 0;
  color:var(--rido-on-dark);
}
.p89-rido .rido-link-list span{font-size:17px;font-weight:700;letter-spacing:.02em}
.p89-rido .rido-link-list small{grid-column:1;font-size:13px;color:var(--rido-muted);line-height:1.6}
.p89-rido .rido-link-list b{grid-column:2;grid-row:1 / span 2;font-weight:400;font-size:17px;color:var(--rido-muted)}
.p89-rido .rido-link-list a:hover span{box-shadow:0 1px currentColor}

/* --- 8. 記事カードをRIDOのトーンに寄せる -------------------------------- */

.p89-rido .t-card .t-meta{color:#5d5d57}
.p89-rido .t-card h2{font-family:var(--rido-ja);font-weight:700;letter-spacing:.02em}
.p89-rido .t-card .t-read{color:var(--rido-accent-deep);font-weight:700}
.p89-rido .p89-no-image{background:var(--rido-card);color:var(--rido-on-dark)}

/* --- 9. スマホ ----------------------------------------------------------
   本文17px、操作領域48px。 */

@media (max-width:650px){
  .p89-rido .rido-hero{padding-block:28px 30px}
  .p89-rido .rido-logo.is-wordmark{font-size:46px}
  .p89-rido .rido-lead{font-size:19px;line-height:1.75}
  .p89-rido .rido-child-title{font-size:22px}
  .p89-rido .rido-child-desc,
  .p89-rido .rido-empty{font-size:17px;line-height:1.9}
  .p89-rido .rido-note{font-size:15px}

  .p89-rido .rido-section{padding-block:40px}
  .p89-rido .rido-section-head h2{font-size:22px}

  .p89-rido .rido-actions{flex-direction:column;align-items:stretch}
  .p89-rido .rido-button{justify-content:space-between;min-height:52px}

  .p89-rido .p89-subcategories{gap:8px;padding-block:16px}
  .p89-rido .p89-subcategories a{min-height:48px;font-size:15px;padding:10px 16px}

  .p89-rido .rido-pillar-grid{grid-template-columns:1fr}
  .p89-rido .rido-pillar{padding:20px;min-height:76px}
  .p89-rido .rido-pillar-en{font-size:22px}
  .p89-rido .rido-link-list span{font-size:17px}
}

/* --- 10. 動きの抑制 ------------------------------------------------------ */

@media (prefers-reduced-motion:reduce){
  .p89-rido *,
  .p89-rido *::before,
  .p89-rido *::after{transition:none!important;animation:none!important}
}
/* 公式ロゴの縦横比を維持。本文・資料も同じ可読性で表示する。 */
.p89-rido img.rido-logo{width:min(100%,640px);height:auto;object-fit:contain}
.p89-rido .rido-page-copy{font-size:18px;line-height:1.95}
.p89-rido .p89-prose h2,.p89-rido .p89-prose h3{font-family:var(--rido-ja);font-weight:700}
.p89-rido .p89-prose .wp-block-file{border-color:#a3a39d;background:#ebebe6}
.p89-rido .p89-prose .wp-block-file__button{background:var(--rido-accent-deep);color:#fff}
@media(max-width:650px){.p89-rido .rido-page-copy{font-size:17px;line-height:1.95}}
.p89-rido .rido-title{width:min(100%,640px)}