/* =============================================================
   style-v2-lower.css — 下層ページ（一覧 .archive / 詳細 .single / 著者）を
   v2 デザインに載せ替える後勝ちレイヤー。既存 style.css の後に読み込む。
   既存 BEM クラス（.header__ / .footer__ / .page__ / .archive__ / .single__ /
   .cta__ / .breadcrumb__ / .pagination__）を角丸0・ネイビー/オレンジ・
   IBM Plex Sans に上書きする。マークアップは変更しない。
   ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --rp-navy:#1B2430; --rp-navy-deep:#111821; --rp-orange:#F5820D; --rp-orange-d:#D96D00;
  --rp-ink:#3A4552; --rp-gray:#5E6975; --rp-gray-l:#6B7683; --rp-line:#D8DCE0; --rp-bg:#F5F6F6;
  --rp-en:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --rp-header-h:76px;
}

/* ---- base ---- */
body{ color:var(--rp-ink); background:#fff; }
a{ transition:color .2s ease; }
img{ border-radius:0 !important; }

/* ---- Header（既存 .header__*） ---- */
.header{ border-top:3px solid var(--rp-orange); border-bottom:1px solid var(--rp-line); background:rgba(255,255,255,.96); backdrop-filter:blur(8px); }
.header__nav-item-link, .header__nav-sp-item-link{ color:var(--rp-navy); font-weight:500; }
.header__nav-item-link:hover{ color:var(--rp-orange-d); }
.header__nav-btn-link{ background:var(--rp-orange); color:var(--rp-navy); border:1px solid var(--rp-orange); border-radius:0; font-weight:700; }
.header__nav-btn-link:hover{ background:var(--rp-navy); border-color:var(--rp-navy); color:#fff; }
.header__nav-sp-section-title, .header__nav-sp-item-sub-title{ font-family:var(--rp-en); letter-spacing:.1em; color:var(--rp-orange-d); }
/* PC: トップ（コーポレート .header）と寸法を統一 — 高さ76 / 内側1400px / ナビ .88rem gap26 / 箱型ボタン */
@media(min-width:1025px){
  .header{ height:76px !important; }
  /* 内側/ナビの不透明白を外す：本体の半透明白と差が出て左右20pxに継ぎ目ができていた */
  .header__inner{ max-width:1400px; margin:0 auto; height:100% !important; padding:0 clamp(20px,3vw,40px) !important; display:flex; align-items:center; justify-content:space-between; background:transparent !important; box-shadow:none !important; }
  .header__nav, .header__nav-pc, .header__logo{ background:transparent !important; }
  .header__nav{ height:auto !important; display:flex; align-items:center; justify-content:flex-end; }
  .header__nav-pc{ height:auto !important; width:auto !important; margin-left:auto; display:flex; align-items:center; justify-content:flex-end; gap:28px; }
  .header__nav-list{ display:flex; align-items:center; gap:26px !important; height:auto !important; }
  .header__nav-item{ height:auto !important; }
  .header__nav-item-link{ display:inline-block; height:auto !important; padding:6px 0 !important; font-size:.88rem !important; font-weight:500; letter-spacing:normal !important; line-height:1.4; position:relative; color:var(--rp-navy); }
  .header__nav-item-link::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--rp-orange); transition:width .3s ease; }
  .header__nav-item-link:hover{ color:var(--rp-navy); }
  .header__nav-item-link:hover::after{ width:100%; }
  .header__nav-btn{ height:auto !important; margin:0; }
  .header__nav-btn-link{ display:inline-flex !important; align-items:center; justify-content:center; width:auto !important; height:auto !important; padding:11px 22px !important; font-size:.86rem !important; line-height:1.9; }
  .header__nav-btn-icon{ display:none !important; }
  .header__logo-link .rp-logo-mark{ width:25px; height:25px; }
  .header__logo-link .rp-logo-text{ font-size:1.45rem; }
}

/* ---- Footer（既存 .footer__*） ---- */
.footer{ background:var(--rp-navy-deep); color:#fff; border-top:0; }
.footer__nav-title{ font-family:var(--rp-en); font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--rp-orange); }
.footer__nav-link{ color:#D5DAE0; }
.footer__nav-link:hover{ color:var(--rp-orange); }
.footer__info-title, .footer__info-data{ color:#9AA5B1; }
.footer__copyright{ color:#8F99A3; font-size:.72rem; }

/* ---- Page header band（ネイビー帯：固定ヘッダー直下にフラット。帯は最上部から始め、
   固定ヘッダー（不透明・白）の背後に潜らせて上部の白余白を無くす） ---- */
.page__bg{ display:none; }
.main{ margin-top:0 !important; }
.page{ background:#fff; padding-top:0 !important; }
.page__title{
  position:relative; background:var(--rp-navy); color:#fff; overflow:hidden;
  margin-top:0; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding:calc(var(--rp-header-h) + clamp(32px,4vh,52px)) max(20px, calc(50vw - 600px)) clamp(44px,6vh,72px);
  margin-bottom:clamp(40px,6vh,64px);
}
.page__title-sub-title{
  order:-1; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--rp-en); font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--rp-orange); margin-bottom:14px;
}
.page__title-sub-title::before{ content:""; width:18px; height:2px; background:var(--rp-orange); display:inline-block; }
.page__title-title{ color:#fff; font-size:clamp(1.9rem,4.6vw,3.4rem); line-height:1.2; font-weight:700; word-break:keep-all; overflow-wrap:anywhere; }
/* 英字ウォーターマーク（data-en があれば表示。控えめに） */
.page__title[data-en]::after{ content:attr(data-en); position:absolute; right:max(20px, calc(50vw - 50%)); bottom:-.12em; z-index:0; font-family:var(--rp-en); font-weight:600; font-size:clamp(2.6rem,6vw,5rem); line-height:1; color:rgba(255,255,255,.045); pointer-events:none; white-space:nowrap; letter-spacing:.02em; }
@media(max-width:768px){ .page__title[data-en]::after{ display:none; } }
.page__title-title, .page__title-sub-title{ position:relative; z-index:1; }
/* 帯の文字の左端を本文カラム（.container）にそろえる（詳細ページと共通） */
.page__title{ padding-left:max(20px, calc(50vw - 50%)); padding-right:max(20px, calc(50vw - 50%)); }

/* ---- Archive（一覧カード：.archive__*） ---- */
.archive__list{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.archive__item{ margin:0; }
.archive__link{ display:flex; flex-direction:column; height:100%; border:1px solid var(--rp-line); background:#fff; border-radius:0; overflow:hidden; transition:box-shadow .25s ease, border-color .25s ease; }
.archive__link:hover{ box-shadow:0 12px 32px rgba(27,36,48,.08); border-color:var(--rp-navy); }
.archive__thumbnail{ position:relative; width:100%; height:0; padding-top:56.25%; overflow:hidden; background:var(--rp-bg); border-radius:0; }
.archive__thumbnail-image{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.archive__text-wrapper{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:8px; flex:1; }
.archive__date{ font-family:var(--rp-en); font-size:.78rem; color:var(--rp-gray-l); }
.archive__title{ font-size:.98rem; font-weight:700; line-height:1.55; color:var(--rp-navy); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.archive__viewmore{ margin-top:auto; padding-top:8px; display:inline-flex; align-items:center; gap:8px; }
.archive__viewmore-text{ font-family:var(--rp-en); font-size:.8rem; font-weight:600; letter-spacing:.06em; color:var(--rp-orange-d); text-transform:uppercase; }
@media(max-width:1000px){ .archive__list{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .archive__list{ grid-template-columns:1fr; } }

/* ---- Pagination（.pagination__*） ---- */
.pagination__list{ display:flex; justify-content:center; gap:8px; margin-top:clamp(40px,6vh,64px); }
.pagination__link{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 12px; border:1px solid var(--rp-line); border-radius:0; font-family:var(--rp-en); font-weight:600; color:var(--rp-navy); background:#fff; transition:all .2s ease; }
.pagination__link:hover{ border-color:var(--rp-navy); }
.pagination__link.is-active{ background:var(--rp-navy); border-color:var(--rp-navy); color:#fff; }

/* ---- Single（詳細） 記事ヘッダー：白地・カテゴリ/日付・見出し・細罫（コーポレートのブログ記事と同じ見せ方。
   紺の帯は一覧/著者の .page__title に残す） ---- */
.single__title-wrapper{
  position:relative; background:#fff; color:var(--rp-navy);
  margin:0 0 clamp(28px,4vh,40px); padding:calc(var(--rp-header-h) + clamp(36px,5vh,56px)) 0 clamp(22px,3vh,28px);
  border-bottom:1px solid var(--rp-line);
}
.single__date-wrapper{ display:flex; flex-direction:row-reverse; justify-content:flex-end; align-items:center; gap:14px; margin-bottom:18px; }
.single__date{ font-family:var(--rp-en); font-size:.9rem; letter-spacing:.02em; color:var(--rp-gray-l); }
.single__category{ display:inline-flex; align-items:center; font-size:.78rem !important; line-height:1.4 !important; font-weight:700; letter-spacing:.04em; color:var(--rp-navy) !important; background:var(--rp-orange) !important; padding:5px 12px !important; border-radius:0 !important; }
.single__title{ color:var(--rp-navy); font-size:clamp(1.5rem,2.9vw,2.15rem); line-height:1.45; font-weight:700; word-break:keep-all; overflow-wrap:anywhere; max-width:30em; }
/* アイキャッチは本文カラムの先頭（テンプレート側で .single__contents-inner 内に配置）。サイドバーと同じ高さから始まる */
.single__kv{ margin:0 0 clamp(28px,4vh,36px); }
.single__kv-image{ display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; background:var(--rp-bg); }
@media(max-width:600px){ .single__title-wrapper{ padding-top:calc(var(--rp-header-h) + 28px); } }

/* ---- Single 本文レイアウト：2カラムは実際の親 .single__contents-wrapper に当てる
   （子は [.single__contents-inner(=本文+SNS+著者), .single__sidebar]） ---- */
.single__contents-wrapper{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(28px,4vw,60px); align-items:start; max-width:1160px; margin:clamp(28px,4vh,48px) auto 0; }
.single__contents-inner{ width:auto !important; max-width:none !important; min-width:0; }
.single__contents{ width:auto !important; max-width:none; }
.single__sidebar{ position:sticky; top:calc(var(--rp-header-h) + 16px); display:grid; gap:28px; align-content:start; }
@media(max-width:900px){ .single__contents-wrapper{ grid-template-columns:1fr; } .single__sidebar{ position:static; } }

/* ---- Single 目次（.single-index__*） ---- */
/* 旧 CSS の max-width:440px を解除して本文幅いっぱいに。本文用の ul インデント/li マージンが
   目次に波及して二重字下げ・行間膨張を起こしていたのでリセットして余白を詰める */
.single-index{ border:1px solid var(--rp-line); background:#fff; border-radius:0; padding:0 0 6px; margin-bottom:36px; max-width:none !important; width:100%; }
.single-index__header{ background:var(--rp-navy) !important; border-radius:0; height:auto !important; padding:13px 20px !important; margin-bottom:2px; display:flex !important; align-items:center; gap:10px; }
/* 本文用の p マージン/行高が波及して箱が膨らみアイコンがずれるため打ち消す */
.single-index__header-title{ font-weight:700; color:#fff; font-size:1rem; line-height:1 !important; margin:0 !important; padding:0 !important; }
.single-index__header-icon{ display:flex; align-items:center; flex-shrink:0; line-height:0; }
.single-index__header-icon svg{ display:block; width:19px; height:15px; }
.single-index__sub, .single-index ol{ padding-left:0 !important; margin:0 !important; }
.single-index ul.single-index__list{ padding:16px 22px 16px !important; margin:0 !important; display:grid; gap:10px; }
.single-index li{ list-style:none !important; margin:0 !important; }
.single-index__sub{ margin-top:6px !important; display:grid; gap:3px; }
.single-index__item--h2{ color:var(--rp-navy) !important; font-weight:700; text-decoration:none; line-height:1.6; padding-left:22px; }
.single-index__item--h3{ color:var(--rp-ink) !important; line-height:1.6; padding-left:16px; }
.single-index__item--h2::before{ background:var(--rp-orange) !important; }
.single-index__item--h3::before{ color:var(--rp-orange) !important; }
.single-index a{ color:var(--rp-navy) !important; text-decoration:none !important; }
.single-index__item--h3 a{ color:var(--rp-ink) !important; font-weight:400; }
.single-index a:hover{ color:var(--rp-orange-d) !important; text-decoration:underline !important; }
.single-index a{ color:var(--rp-ink); }
.single-index a:hover{ color:var(--rp-orange-d); }

/* ---- Single 本文タイポ（.single__contents-*） ---- */
.single__contents{ font-size:1rem; line-height:1.95; color:var(--rp-ink); }
/* 見出しのバーは絶対配置だと文字の行箱とずれるため、flex の擬似要素として行箱いっぱいに伸ばす */
.single__contents-title-h2{ position:relative; display:flex; align-items:stretch; gap:14px; font-size:clamp(1.35rem,2.6vw,1.7rem); font-weight:700; color:var(--rp-navy); line-height:1.5; margin:2.2em 0 .9em; padding:0 !important; }
/* Noto Sans JP は行箱内で字面が下寄りなので、バーは行中央ではなく字面(約1em)に合わせ少し下げる */
.single__contents-title-h2::before{ content:"" !important; position:static !important; top:auto !important; left:auto !important; width:5px !important; height:1.02em !important; min-height:0; align-self:center; flex-shrink:0; margin:0 !important; transform:translateY(.09em); background:var(--rp-orange) !important; background-image:none !important; border-radius:0; }
.single__contents-title-h4{ display:flex; align-items:center; gap:10px; padding:0 !important; }
.single__contents-title-h4::before{ content:"" !important; position:static !important; width:10px !important; height:10px !important; flex-shrink:0; background:var(--rp-orange) !important; background-image:none !important; margin:0; }
.single__contents-title-h3{ background:none !important; color:var(--rp-navy); border-radius:0; font-size:clamp(1.15rem,2vw,1.4rem); font-weight:700; margin:1.8em 0 .7em; padding:0 0 .4em; border-bottom:2px solid var(--rp-orange); }
.single__contents-title-h4{ font-size:1.1rem; font-weight:700; color:var(--rp-navy); margin:1.6em 0 .6em; }
.single__contents-title-h5, .single__contents-title-h6{ font-size:1rem; font-weight:700; color:var(--rp-navy); margin:1.4em 0 .5em; }
.single__contents-text, .single__contents p{ margin:0 0 1.4em; }
.single__contents a{ color:var(--rp-orange-d); text-decoration:underline; text-underline-offset:2px; }
.single__contents ul, .single__contents ol{ margin:0 0 1.4em; padding-left:1.4em; }
.single__contents ul li{ list-style:disc; margin:.4em 0; }
.single__contents ol li{ list-style:decimal; margin:.4em 0; }
.single__contents strong{ font-weight:700; color:var(--rp-navy); }
.single__contents-image{ display:block; margin:1.8em 0; }
.single__contents-image-image{ width:100%; }
.single__contents-youtube{ position:relative; width:100%; padding-top:56.25%; margin:1.8em 0; }
.single__contents-youtube iframe{ position:absolute; inset:0; width:100%; height:100%; }
.single__contents blockquote{ margin:1.6em 0; padding:16px 20px; background:var(--rp-bg); border-left:4px solid var(--rp-orange); color:var(--rp-gray); }
.single__contents table{ width:100%; border-collapse:collapse; margin:1.6em 0; font-size:.94rem; }
.single__contents th, .single__contents td{ border:1px solid var(--rp-line); padding:10px 14px; text-align:left; }
.single__contents th{ background:var(--rp-bg); font-weight:700; color:var(--rp-navy); }

/* ---- Single SNS シェア（.single__sns-*） ---- */
.single__sns-wrapper{ margin-top:clamp(40px,6vh,64px); padding-top:32px; border-top:1px solid var(--rp-line); }
.single__sns-title{ text-align:center; font-weight:700; color:var(--rp-navy); margin-bottom:16px; }
.single__sns-list{ display:flex; justify-content:center; gap:12px; }
.single__sns-link{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--rp-line); border-radius:0; background:#fff; cursor:pointer; transition:all .2s ease; }
.single__sns-link:hover{ border-color:var(--rp-navy); background:var(--rp-bg); }
.single__sns-link--x .single__sns-icon{ filter:brightness(0); } /* 元アイコンは白（旧デザインは黒タイル）。v2 の白タイルでは黒に */

/* ---- Single 著者（既存の 80px|1fr グリッドを活かして配色だけ v2 に） ---- */
.single__author-wrapper{ margin-top:clamp(40px,6vh,64px); }
.single__author-title{ font-family:var(--rp-en); font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--rp-orange-d); margin-bottom:0; }
.single__author{ border:1px solid var(--rp-line) !important; background:var(--rp-bg); border-radius:0; }
.single__author-image{ border-radius:50% !important; object-fit:cover; }
.single__author-name{ color:var(--rp-navy) !important; text-decoration:none; }
.single__author-name:hover{ color:var(--rp-orange-d) !important; text-decoration:underline; }
.single__author-text{ color:var(--rp-ink) !important; border-left-color:var(--rp-line) !important; }

/* ---- Single サイドバー（.single__sidebar-*） ---- */
.single__sidebar-contents{ border:1px solid var(--rp-line); background:#fff; }
.single__sidebar-title{ font-size:1rem; font-weight:700; color:var(--rp-navy); padding:16px 20px; border-bottom:2px solid var(--rp-orange); }
.single__related-list{ padding:8px 20px 16px; }
.single__related-item{ border-bottom:1px solid var(--rp-line); }
.single__related-item:last-child{ border-bottom:0; }
.single__related-link{ display:flex; gap:12px; align-items:center; padding:14px 0; }
.single__related-image{ width:72px; height:48px; object-fit:cover; flex-shrink:0; }
.single__related-contents-title{ font-size:.84rem; font-weight:600; line-height:1.5; color:var(--rp-navy); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
/* 旧 CSS の赤い丸型ピル（#EF351C / radius 1000px）を無効化し、v2 の角丸なしチップに */
.single__category-list{ margin-top:0 !important; padding:14px 20px 18px; display:flex; flex-wrap:wrap; gap:8px; }
.single__category-item{ border:0; }
.single__category-link{ display:inline-flex !important; align-items:center; padding:7px 14px !important; font-size:.86rem !important; line-height:1.4 !important; font-weight:600; letter-spacing:.02em; color:var(--rp-navy) !important; background:#fff !important; border:1px solid var(--rp-line) !important; border-radius:0 !important; transition:background-color .2s ease,color .2s ease,border-color .2s ease; }
.single__category-link:hover{ background:var(--rp-navy) !important; color:#fff !important; border-color:var(--rp-navy) !important; opacity:1 !important; }

/* ---- Breadcrumb（.breadcrumb__* : CTA とフッターの間の白帯を解消。
   フッターと同じ濃ネイビーにして下部を連続した暗色ゾーンに） ---- */
.breadcrumb{ background:var(--rp-navy-deep); padding:clamp(16px,2.4vh,26px) 0; }
.breadcrumb__list{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px !important; font-family:var(--rp-en); color:#8F99A3; }
/* 旧 CSS の矢印アイコン（::before 絶対配置）と 1 行クランプを無効化して基準線を揃える */
.breadcrumb__item{ position:static; display:inline-flex; align-items:center; }
.breadcrumb__item:not(:first-of-type)::before{ content:none !important; display:none !important; }
.breadcrumb__link{ display:inline-flex; align-items:center; }
.breadcrumb__link-text{ display:inline !important; -webkit-line-clamp:unset !important; overflow:visible !important; font-size:.78rem !important; line-height:1.5 !important; letter-spacing:.02em; color:#9AA5B1; }
.breadcrumb__item:not(:last-child)::after{ content:"/"; margin-left:10px; color:#3A4552; font-size:.78rem; line-height:1.5; }
.breadcrumb__item:last-child .breadcrumb__link-text{ color:#C9D0D8; }
a.breadcrumb__link:hover .breadcrumb__link-text{ color:var(--rp-orange); opacity:1 !important; }

/* ---- CTA（.cta__* : シンプルなネイビー帯に。バッジ/イラスト/白カードは撤去） ---- */
.cta{ background:var(--rp-navy); padding:clamp(56px,8vh,96px) 20px !important; }
.cta__bg, .cta__bg-image, .cta__point-wrapper, .cta__decoration-wrapper{ display:none !important; }
/* 旧 CSS の巨大な内側余白（.cta__inner 232px/143px, .cta__box 120px/60px）を無効化 */
.cta__inner{ position:relative; padding:0 !important; }
.cta__box{ background:transparent !important; box-shadow:none !important; border:0 !important; border-radius:0; max-width:760px; margin:0 auto; padding:0 !important; text-align:center; }
.cta__message-wrapper{ text-align:center; }
.cta__message{ color:#C9D0D8; font-size:.95rem; font-weight:600; margin-bottom:10px; }
.cta__main-message{ color:#fff; font-size:clamp(1.5rem,3vw,2.1rem); font-weight:700; line-height:1.55; }
.cta__main-message--highlight{ color:var(--rp-orange); }
.cta__button-wrapper{ margin-top:clamp(24px,4vh,36px); display:flex; flex-direction:column; align-items:center; gap:12px; }
.cta__button-text{ color:#9AA5B1; font-size:.82rem; font-weight:600; }
.cta__button-text img{ display:none; }
.cta__button{ display:inline-flex !important; align-items:center; justify-content:center; width:auto !important; height:auto !important; background:var(--rp-orange) !important; color:var(--rp-navy) !important; border:1px solid var(--rp-orange) !important; border-radius:0 !important; filter:none !important; font-size:1rem !important; font-weight:700; padding:16px 44px; min-width:280px; margin:0 auto !important; }
.cta__button:hover{ background:#fff; color:var(--rp-navy); border-color:#fff; }

/* ---- 下層ヘッダーのロゴを v2 ロックアップに（JS が中身を差し替え、ここで配色/レイアウト） ---- */
.header__logo-link .rp-logo{ display:inline-flex; align-items:center; gap:9px; color:var(--rp-navy); }
.header__logo-link .rp-logo-mark{ width:26px; height:26px; flex-shrink:0; }
.header__logo-link .rp-logo-text{ font-family:var(--rp-en); font-weight:600; font-size:1.4rem; line-height:1; letter-spacing:.005em; color:currentColor; }