@charset "UTF-8";

:root {
  --main: #174162;     /* #1b4365 → 正式メインに更新 */
  --accent: #b92527;   /* #c43333 → 正式アクセント赤に更新 */
  /* --corp-main, --corp-red は新設不要 */
  /* 本文中のリンク色。2026-10-02 に #4f96f6（明るすぎて浮いていた）から変更。
     ⚠️ 紺（--main）にはしない。本文の黒文字と近く、下線だけでは押せると気づきにくいため、
        「文中のリンクは青＋下線」で判別させる。矢印つきの導線（詳しく見る→等）とは役割が違う。 */
  --link: #2f6ea8;
  --bg: #f6f6f1;
  --card-cat: #1b4365;
  --content-width: 1180px;
  --radius: 8px;
  --dfont: "Quicksand", "Helvetica", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --body-font: "Helvetica", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  /* 「見せる」ための太ゴシック。FV・3つの動詞・記事タイトルのポップ版で共用する。
     ⚠️ --dfont は先頭が Quicksand（細い）なので、強く見せたい箇所には使わない。 */
  --pop-font: "Hiragino Sans W8", "Hiragino Kaku Gothic StdN W8", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  
}

* { box-sizing: border-box; }

/* 画面には出さず、検索エンジンとスクリーンリーダーにだけ伝える見出し用。
   ⚠️ display:none は読み上げられないので使わない。 */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

body {
  margin: 0;
  background: var(--bg);
  color: #333;
  font-family: var(--body-font);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
/* 文章の中のリンクだけは、最初から下線を出す（色だけだと押せると分からないため）。
   ⚠️ ナビ・カード・ボタンには下線を出さない。ここは本文エリア限定。 */
.page-content a { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.page-content a:hover { opacity: .78; }
ul { list-style: none; margin: 0; padding: 0; }

.wrap {
  width: 92%;
  max-width: var(--content-width);
  margin: 0 auto;
}

/* ===== ヘッダー ===== */
.site-header {
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
}
.header-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 8px;
}
.logo { margin: 0; }
.logo img { display: block; }
.global-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}
.global-nav a {
  color: var(--main);
  font-size: .9rem;
  font-weight: 600;
}

/* ===== ハンバーガーメニュー（スマホ・768px以下・2026-10-15）=====
   ヘッダーは「ロゴ左・ボタン右」。ボタンで右からメニューが出て、背面を暗くする（開閉は js/nav.js）。
   ⚠️ html.js のときだけ隠す。JS が動かない環境ではメニューを通常どおり並べて出す（リンクが消えないように） */
.nav-toggle, .nav-overlay { display: none; }
@media (max-width: 768px) {
  html.js .header-inner { flex-direction: row; justify-content: space-between; padding: 10px 0; }
  html.js .logo img { width: 130px; height: auto; }
  html.js .nav-toggle {
    position: relative; z-index: 1002; display: flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 44px; height: 44px; padding: 0 10px; border: 0; background: transparent; cursor: pointer;
  }
  .nav-toggle__bar { display: block; height: 2px; background: var(--main); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
  html.nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  html.nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
  html.nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  html.js .global-nav {
    position: fixed; top: 0; right: 0; z-index: 1001;
    width: min(80vw, 300px); height: 100vh; height: 100dvh; overflow-y: auto;
    padding: 72px 22px 28px; background: #fff; box-shadow: -6px 0 24px rgba(0,0,0,.18);
    transform: translateX(100%); visibility: hidden;
  }
  /* ⚠️ アニメーションは ☰ を押したあと（html.nav-anim）だけ。画面幅が PC→スマホに変わったときに
     「閉じる動き」が走って途中で止まり、メニューが半分見えたままになるのを防ぐ（2026-10-19） */
  html.nav-anim .global-nav { transition: transform .3s ease, visibility 0s linear .3s; }
  html.nav-open .global-nav { transform: none; visibility: visible; }
  html.nav-anim.nav-open .global-nav { transition: transform .3s ease; }
  html.js .global-nav ul { flex-direction: column; gap: 0; }
  html.js .global-nav li a { display: block; padding: 15px 4px; border-bottom: 1px solid #ececec; font-size: 1rem; }
  html.js .nav-overlay {
    display: block; position: fixed; inset: 0; z-index: 1000;
    background: rgba(8, 18, 28, .45); opacity: 0; pointer-events: none;
  }
  html.nav-anim .nav-overlay { transition: opacity .3s ease; }
  html.nav-open .nav-overlay { opacity: 1; pointer-events: auto; }
  html.nav-open, html.nav-open body { overflow: hidden; }   /* 開いている間は後ろのページをスクロールさせない */
}
@media (prefers-reduced-motion: reduce) {
  html.js .global-nav, html.js .nav-overlay, .nav-toggle__bar { transition: none !important; }
}

/* ===== メインビジュアル ===== */
.hero { background: #fff; padding: 24px 0; }
.hero-inner {
  display: flex;
  gap: 28px;
  align-items: center;
}
.hero-img { flex: 0 0 46%; }
.hero-text { flex: 1; }
.hero-title {
  margin: 0 0 .6em;
  font-size: 1.5rem;
  color: #111;
  line-height: 1.4;
}
.hero-desc { margin: 0 0 1em; font-size: .9rem; }
.hero-btn a {
  display: inline-block;
  background: #2fb4ce;
  color: #fff;
  padding: .6em 1.4em;
  border-radius: var(--radius);
  font-weight: 600;
}
.hero-btn a:hover { text-decoration: none; opacity: .9; }

/* ===== 2カラムレイアウト ===== */
.content-layout {
  display: flex;
  align-items: flex-start;
  gap: 36px;
  margin: 40px auto;
}
.main { flex: 1; min-width: 0; }
.sidebar { flex: 0 0 300px; }

/* ===== 見出し ===== */
.block-title {
  margin: 0 0 1em;
  padding: .5em 1em;
  background: var(--main);
  color: #fff;
  font-family: var(--dfont);
  font-size: 1.1rem;
  border-radius: var(--radius);
}
.sub-title {
  margin: 2.2em 0 .6em;
  padding-bottom: .4em;
  border-bottom: 2px solid var(--main);
  color: var(--main);
  font-size: 1.15rem;
}
.intro { font-size: .92rem; }
.accent { color: var(--accent); font-weight: 600; }
.intro-img { margin-top: 1.4em; }

/* ===== 新着カード ===== */
.news-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 1.2em;
}
.card {
  position: relative;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: box-shadow .25s, transform .25s;
}
.card:hover { box-shadow: 0 8px 20px rgba(0,0,0,.12); transform: translateY(-2px); }
.card-link { display: block; color: inherit; }
.card-link:hover { text-decoration: none; }
.card-thumb { display: block; aspect-ratio: 520 / 300; overflow: hidden; }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 12px 14px 40px; }
.card-date {
  display: block;
  font-family: var(--dfont);
  font-size: .78rem;
  color: #999;
  margin-bottom: .3em;
}
.card-title { margin: 0; font-size: .98rem; line-height: 1.45; color: #333; }
.card-cat {
  position: absolute;
  left: 14px;
  bottom: 12px;
  background: var(--card-cat);
  color: #fff;
  font-family: var(--dfont);
  font-size: .72rem;
  padding: .25em .9em;
  border-radius: 20px;
}
.card-cat:hover { text-decoration: none; opacity: .9; }

/* ===== ページネーション ===== */
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 2em 0 0;
  font-family: var(--dfont);
}
.pagination a,
.pagination .current {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: .9rem;
}
.pagination a { background: #fff; color: var(--main); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.pagination a:hover { background: #b4e0fa; text-decoration: none; }
.pagination .current { background: var(--main); color: #fff; }

/* ===== サイドバー ===== */
.side-contact { display: block; margin-bottom: 24px; }
.widget { margin-bottom: 28px; font-size: .85rem; }
.widget-title {
  margin: 0 0 .9em;
  padding: .5em .9em;
  background: var(--main);
  color: #fff;
  font-size: .85rem;
  line-height: 1.4;
  border-radius: var(--radius);
}
.widget-menu li,
.menu-list li,
.cat-list li { border-bottom: 1px dashed #ddd; }
/* サイドバーのリンク一覧も「地の上に紙が1枚」。本文・一覧と同じ扱いにして、
   地の背景色の上に文字が直接乗る箇所をなくす。
   ⚠️ 見出し（.widget-title の紺帯）は紙の外＝地の上のまま。「見出しは地、中身は紙」の原則どおり。 */
.widget-menu,
.menu-list,
.cat-list {
  background: #fff;
  border-radius: var(--radius);
  padding: .3em 1.1em;
  box-shadow: 0 2px 10px rgba(23, 65, 98, .07);
}
/* 紙の下端のすぐ上に罫線が来ると「消し忘れの線」に見えるので、最後だけ消す */
.widget-menu li:last-child,
.menu-list li:last-child,
.cat-list li:last-child { border-bottom: 0; }
.widget-menu a,
.menu-list a,
.cat-list a {
  display: block;
  padding: .6em .2em;
  color: #555;
}
/* ⚠️ 旧 #92ceff は白い紙の上だとほぼ見えなかった（コントラスト約1.8:1）。
   リストを紙に乗せたのに合わせて、白地で判別できる青に変更。 */
.widget-menu i { color: #5e8fb5; margin-right: .6em; width: 1.2em; text-align: center; }
.cat-list ul { padding-left: 1em; }
.count {
  float: right;
  background: #eee;
  color: #888;
  font-size: .72rem;
  padding: 0 .6em;
  border-radius: 10px;
}

/* お知らせ サムネ付きリスト */
.news-list li { border-bottom: 1px solid #eee; }
.news-list a { display: flex; gap: 10px; align-items: center; padding: .7em .2em; color: #555; }
.news-list-thumb { flex: 0 0 60px; }
.news-list-thumb img { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; }
.news-list-text { font-size: .82rem; line-height: 1.5; }
.news-list-date { display: block; font-family: var(--dfont); color: #aaa; font-size: .75rem; margin-top: .2em; }

/* プロフィール */
.profile { background: #fff; border-radius: var(--radius); overflow: hidden; padding-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.profile-bg { height: 90px; overflow: hidden; }
.profile-bg img { width: 100%; height: 100%; object-fit: cover; }
.profile-icon { text-align: center; margin-top: -40px; }
.profile-icon img { width: 80px; height: 80px; border-radius: 50%; border: 3px solid #fff; background: #fff; }
.profile-name { text-align: center; font-family: var(--dfont); font-weight: 700; margin: .4em 0; }
.profile-desc { padding: 0 18px; font-size: .82rem; }
.profile-btn { text-align: center; margin: 1em 0 0; }
.profile-btn a {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: .5em 1.4em;
  border-radius: var(--radius);
  font-weight: 600;
}
.profile-btn a:hover { text-decoration: none; opacity: .9; }

/* ===== フッター ===== */
/* ===== フッター一帯は「白」でまとめる =====
   ヘッダーも白なので、ページの上下を白で挟む形になり、地の色（クリーム）が中身の範囲を示す。
   ⚠️ CTAとフッター3カラムは地続きの白にする（間に margin を入れない）。 */
/* ⚠️ 上下の余白は同じにする。下だけ狭いと圧迫感が出る */
.footer-cta { background: #fff; margin-top: 56px; padding: 48px 0; }
/* ⚠️ トップページだけ、直前が全幅の帯（定期更新）なので地色の隙間を作らない。
   帯のすぐ下から白が始まる形にする。`main#top` はトップページにしかない。 */
#top ~ .footer-cta { margin-top: 0; padding: 64px 0; }
.footer-cta h2 { margin: 0 0 .45em; font-size: 1.25rem; line-height: 1.4; color: var(--main); }
/* 白の中に白いカードだと輪郭が出ないので、ここだけ薄ネイビーにする */
.footer-cta .cta-card--contact { background: #eef2f6; border-color: #dce4ec; }
.site-footer { background: #fff; margin-top: 0; padding-top: 0; }   /* 余白は .footer-cta 側で持つ */
.footer-cols {
  display: flex;
  gap: 30px;
  padding: 40px 0;
}
.footer-col { flex: 1; font-size: .82rem; color: #555; }
.footer-col p { margin: .6em 0 0; }

.footer-menu { background: var(--main); color: #fff; }
/* ===== フッターの階層メニュー（全ページを載せる「探す場所」） ===== */
/* ⚠️ セレクタを .footer-menu から書き起こしているのは、既存の
   `.footer-menu nav ul { display:flex }` / `.footer-menu nav a { ... }` に
   詳細度で勝つため。`.fnav ul` だけだと横並びのままになる。 */
.footer-menu .fnav { display: grid; grid-template-columns: .85fr 1fr 1fr 1fr; gap: 28px 36px; padding: 30px 0 24px; }
/* 1カラム目はロゴ（＝ホームへの導線）。カラム幅はそのままに、ロゴを列いっぱいまで大きくする */
.footer-menu .fnav__col--logo { display: flex; align-items: flex-start; justify-content: flex-start; }
.footer-menu .fnav__logo { display: block; width: 100%; max-width: 220px; }
.footer-menu .fnav__logo img { display: block; width: 100%; height: auto; }
.footer-menu .fnav__logo:hover { opacity: .8; }
/* 見出しは3つとも素のラベル。⚠️ リンクにすると .fnav a の指定が効いて文字サイズが変わり、
   見出しの濃さ・大きさがバラバラに見える。導線はリスト側に項目として持たせる。 */
.footer-menu .fnav__head { margin: 0 0 .6em; font-size: .9rem; font-weight: 700; color: #fff; }
.footer-menu .fnav ul { display: block; list-style: none; margin: 0; padding: 0; }
/* ⚠️ 行間は li に効かせる。a（inline-block）だけに付けても、親 li の行の高さ（16px×1.8＝28.8px）が残って詰まらない。
   li の文字サイズを a と同じにそろえたうえで行間を指定する。 */
.footer-menu .fnav li { margin: 0 0 .2em; font-size: .82rem; line-height: 1.5; }
/* 行間は本文（1.8）より詰める（1.5）。フッターは読ませる場所ではなく探す場所なので、縦に間延びさせない（2026-10-08） */
.footer-menu .fnav a { display: inline-block; color: rgba(255,255,255,.82); font-size: .82rem; line-height: 1.5; }
.footer-menu .fnav a:hover { color: #fff; }
/* 2階層目は左に寄せ、縦線で親との関係を示す */
.footer-menu .fnav li ul { margin: .3em 0 .5em .2em; padding-left: .9em; border-left: 1px solid rgba(255,255,255,.22); }
.footer-menu .fnav li ul a { font-size: .78rem; color: rgba(255,255,255,.64); }
/* 下部はコピーライトのみ・中央揃え。ホームへの導線は上のリストに含めた */
.footer-menu .copyright {
  margin: 0; padding: 16px 0 20px; text-align: center;
  border-top: 1px solid rgba(255,255,255,.18);
}
@media (max-width: 980px) { .footer-menu .fnav { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .footer-menu .fnav { grid-template-columns: 1fr; gap: 18px; }
  /* スマホでは1カラムになるので、ロゴだけ最後に回して中央に置く。
     ⚠️ order だけで並べ替えている（HTMLの順番は変えない）。縦積みの終わりがロゴで締まる。 */
  .footer-menu .fnav__col--logo { order: 1; justify-content: center; margin-top: 10px; }
}

/* ⚠️ 旧版は横1列のメニューだったので flex だった。階層メニューに変えたので縦積みにする。
   flex のままだと、3カラムの塊とコピーライトが横に並んで幅が潰れる。 */
.footer-menu-inner {
  display: block;
  padding: 0;
}
.footer-home { color: #fff; font-family: var(--dfont); font-weight: 600; }
.footer-menu nav ul { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-menu nav a { color: #fff; font-size: .85rem; }
.copyright { width: 100%; margin: 0; font-family: var(--dfont); font-size: .78rem; opacity: .85; }

/* ===== レスポンシブ ===== */
@media (max-width: 880px) {
  .content-layout { flex-direction: column; }
  .sidebar { flex: none; width: 100%; }
  .hero-inner { flex-direction: column; }
  .hero-img { flex: none; width: 100%; }
  .footer-cols { flex-direction: column; }
}
@media (max-width: 560px) {
  .news-cards { grid-template-columns: 1fr; }
  .global-nav ul { gap: 14px; }
}



/* ========================================
   note RSS フィード
   ======================================== */
.note-feed {
  margin-bottom: 40px;
}

.note-feed-heading {
  font-size: 1rem;
  font-weight: 700;
  color: #194265;
  margin-bottom: 16px;
  padding-left: 12px;
  border-left: 4px solid #c42227;
}

.note-feed-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.note-feed-loading,
.note-feed-empty,
.note-feed-error {
  font-size: 0.85rem;
  color: #888;
  padding: 20px 0;
}

.note-feed-error {
  color: #c42227;
}

/* ---- カード ---- */
.note-card {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: #fff;
  border: 1px solid #e4e8ed;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  align-items: start;   /* 上揃え（flexでもgridでも有効） */
}

/* 公開前の確認用の（仮）カード（js/note-rss.js の placeholderCard）。押せないので hover で動かさない */
.note-card--placeholder { cursor: default; }
.note-card--placeholder:hover { transform: none; }
.note-card-thumb-ph {
  display: grid; place-items: center; width: 100%; height: 100%; min-height: 120px;
  background: repeating-linear-gradient(45deg, #eef1f5 0 10px, #e6eaf0 10px 20px); color: #8a96a3; font-size: .8rem;
}
.note-card:hover {
  box-shadow: 0 4px 12px rgba(25, 66, 101, 0.1);
  transform: translateY(-2px);
}

/* サムネイル */
.note-card-thumb {
  flex-shrink: 0;
  width: 140px;
  height: 90px;
  border-radius: 6px;
  overflow: hidden;
}

.note-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 本文エリア */
.note-card-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* center → flex-start に変更 */
  min-width: 0;
}

.note-card-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: #333;
  line-height: 1.5;
  margin-bottom: 4px;
  /* 以下3行を変更：省略をやめて全文折り返し表示 */
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}


.note-card-date {
  display: block;
  font-size: 0.75rem;
  color: #888;
  margin-bottom: 6px;
}

/* 2カラム
.note-card-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.8rem;
  color: #999;
  line-height: 1.5;
}*/


.note-card-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;   /* 2 → 3 に変更 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.8rem;
  color: #999;
  line-height: 1.5;
}


/* note カード hover：タイトルのみアクセント赤に変化（下線は全廃） */
.note-card:hover,
.note-card:hover .note-card-date,
.note-card:hover .note-card-excerpt {
  text-decoration: none;
}
.note-card:hover .note-card-title {
  text-decoration: none;
  color: var(--accent);
  transition: color 0.2s ease;
}




/* ---- レスポンシブ ---- */
@media (max-width: 768px) {
  .note-card {
    flex-direction: column;
    gap: 10px;
  }

  .note-card-thumb {
    width: 100%;
    height: 180px;
  }

  .note-card-title {
    white-space: normal;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* 新着一覧（テキスト表示） */
/* お知らせ一覧も「地の上に紙が1枚」。見出しは紙の外＝地の上に置く（他の一覧と同じ扱い）。 */
.news-text-list {
  list-style: none;
  margin: 0 0 24px;
  padding: .6em 2.8em;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(23, 65, 98, .07);
}
@media (max-width: 600px) { .news-text-list { padding: .4em 1.4em; } }
.news-text-list li {
  border-bottom: 1px solid #e5e0d8;
}
/* ⚠️ お知らせは「1枚の紙に行が並ぶ」形。件数が少なくても紙がフッター手前まで伸びるよう高さを確保する。
   最後の行にも下罫線を残して「ここに行が足されていく」と分かるようにする。 */
.news-text-list { min-height: 46vh; }
/* お知らせ一覧ページ：本文側をサイドバーと同じ高さまで伸ばし、紙でその高さを埋める。
   ⚠️ .content-layout は align-items:flex-start なので、そのままでは子が伸びない。stretch に上書きする。 */
.content-layout--stretch { align-items: stretch; }
.main--fill { display: flex; flex-direction: column; }
.main--fill .news-text-list { flex: 1; }
/* トップの #news は件数ぶんの高さでよい。最後の行の罫線も紙の下端と重なるので消す */
#news .news-text-list { min-height: 0; }
#news .news-text-list li:last-child { border-bottom: 0; }
/* ★(1) :first-child の border-top ブロックは削除しました */

.news-text-list a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 4px;
  text-decoration: none;
  color: inherit;
}
.news-text-list a:hover .news-text-title {
  text-decoration: underline;
}
.news-text-date {
  flex-shrink: 0;
  width: 8.5em;        /* ★(2) 日付幅を固定 */
  font-size: 0.85rem;
  color: #555;
}
.news-text-title {
  font-size: 0.95rem;
  line-height: 1.5;
}

@media only screen and (max-width: 480px) {
  .news-text-list a {
    gap: 8px;
  }
  .news-text-date {
    width: 7.5em;      /* スマホは少し詰める */
    font-size: 0.8rem;
  }
}


/* 2列グリッド（PC：2列／スマホ：1列） */
.grid-2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch
}

/* グリッド内の各アイテムがはみ出さないようにする */
.grid-2col > * {
  min-width: 0;
}

/* 画像が枠を超えないように */
.grid-2col img {
  max-width: 100%;
  height: auto;
}

/* スマホは縦1列 */
@media only screen and (max-width: 480px) {
  .grid-2col {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}


/* note新着の日付 */
.note-card-date {
  font-weight: 700;
}


/* ===== 固定ページ 本文 ===== */
.page-title {
  margin: 0 0 1.2em;
  padding: .6em 1em;
  background: var(--main);
  color: #fff;
  font-family: var(--dfont);
  font-size: 1.35rem;
  border-radius: var(--radius);
}
/* 本文は「地の背景色の上に紙が1枚乗っている」見せ方にする。
   ⚠️ タイトル（.page-title / .pv-eyebrow）は紙の外に置く。
      見出しは地の上、本文は紙の上、という役割分担にしたいため。
   ⚠️ 内側に余白を取る分、本文の横幅は少し狭くなる（意図どおり）。 */
.page-content {
  font-size: .95rem;
  background: #fff;
  padding: 2.6em 2.8em;
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(23, 65, 98, .07);
}
/* ⚠️ 紙の内側余白と、最初/最後の要素の margin が足し算になって隙間が倍になる。
   （例：.page-content h2 の margin-top 2em ＝ 約30px が padding に上乗せされる）
   先頭の上マージンと末尾の下マージンを打ち消して、紙の余白だけで決まるようにする。 */
.page-content > :first-child { margin-top: 0; }
.page-content > :last-child { margin-bottom: 0; }

/* ===== コールアウト（Obsidian の > [!NOTE] などを HTML にしたもの・2026-10-13）=====
   Obsidian のコールアウトの見え方に寄せる：淡い色の地＋左上に「アイコン＋ラベル」の1行。左の線は付けない。
   ⚠️ 紺にしない：h2 見出し（紺の線）と同じ見た目になり、見出しと区別がつかなくなるため。
   ⚠️ 黄色（#fffdf3）は白い紙の上で淡すぎて輪郭が見えなかったので、薄い緑にした。
   色は --callout-c（ラベル・アイコン）と --callout-bg（地）の2つだけで決まる。種類を足すときはこの2つを変える。 */
.page-content .callout {
  --callout-c: #2b7a4b; --callout-bg: #eef6f0;
  margin: 2em 0; padding: 1em 1.3em 1.15em;
  background: var(--callout-bg); border-radius: 6px;
}
.page-content .callout p { margin: 0 0 .6em; font-size: .95em; line-height: 1.85; }
.page-content .callout > :last-child { margin-bottom: 0; }
/* ラベル行（鉛筆アイコン＋「ひとことメモ」）。アイコンは Lucide の pencil を mask で描くので、色は --callout-c に追従する */
.page-content .callout .callout__title {
  display: flex; align-items: center; gap: .45em;
  margin: 0 0 .35em; font-family: var(--dfont); font-size: .9em; font-weight: 700; letter-spacing: .04em; color: var(--callout-c);
}
.page-content .callout .callout__title::before {
  content: ""; flex: 0 0 auto; width: 1.1em; height: 1.1em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 注意（赤＋三角のアイコン）。原稿で > [!WARNING] 等を使うか、見出しに「注意」を含めるとこちらになる（_tools/sync_article.py が判定） */
.page-content .callout--caution {
  --callout-c: var(--accent); --callout-bg: #fbf1f1;
}
.page-content .callout--caution .callout__title::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
@media (max-width: 600px) {
  .page-content { padding: 1.7em 1.4em; }
}

/* ===== 記事タイトルの「ポップ版」（試験導入：視点1本だけに適用中） =====
   使い方：記事の <article> に class="is-pop" を付けたページだけに効く。付けなければ従来の紺帯見出しのまま。
   肝は line-height を 1.0 近くまで詰めること。行間が消えて、文字が1つの「塊」として目に飛び込む。
   ⚠️ 長いタイトル前提の表現。短いタイトルだと間延びするので、全ページには広げない。 */
.is-pop { text-align: center; overflow: hidden; }   /* 回転したタイトルが横にはみ出しても横スクロールさせない */
.is-pop .pv-eyebrow {
  /* 下の余白はタイトル〜日付の間隔（タイトル側の .55em ≒ 35px）に合わせる。
     このラベルは .78rem なので em 換算が効かない。px で指定する。 */
  margin: 0 0 35px; padding: .45em 1.2em;
  background: var(--accent); color: #fff; border-radius: 999px;
}
.is-pop .page-title,
.is-pop .pv-hero__title {
  margin: 0 0 .55em; padding: 0; background: none; border-radius: 0;
  color: var(--main);
  /* ★太いゴシックを明示指定。Quicksand（細い）を使う --dfont はここでは使わない。
     W8 を直接名指しするのは、weight:800 だけだと OS が細い face を選ぶことがあるため。 */
  font-family: var(--pop-font);
  font-size: clamp(1.9rem, 5.6vw, 4rem);   /* 最大64px */
  font-weight: 900;                         /* Noto Sans JP は900のみ読み込んでいる */
  line-height: 1.0;                         /* ★肝その1：行間を1.0に。行が詰まって塊になる */
  /* ★肝その3：ひらがなの間延びを詰める。
     palt = 文字ごとの最適幅を使う日本語用の詰め機能。ひらがな・約物だけが詰まり、漢字は潰れない。
     letter-spacing だけで詰めると漢字まで窮屈になるので、palt と併用して少なめに効かせる。 */
  font-feature-settings: "palt" 1;
  letter-spacing: -.03em;
  transform: rotate(-3deg);                 /* ★肝その2：わずかに傾ける。マイナスで右肩上がり（参考サイトは+3度＝右下がりだが、こちらは上がりを採用） */
}
.is-pop .pv-date { margin: 0 0 2.4em; }
/* タイトル下のキャプション。一覧ページの .pv-hero__lead と同じ見せ方にそろえる。
   ⚠️ 本文（白い紙）の中ではなく、地の上に置く。「見出しは地、中身は紙」の原則どおり。 */
/* ===== キャプション（タイトル直下の説明文）=====
   記事ページ（.page-lead）と一覧ページ（.pv-hero__lead）で同じ見せ方にする。
   ⚠️ どちらも「キャプション」なので揃える。片方だけ変えない。 */
.is-pop .page-lead,
.is-pop .pv-hero__lead {
  margin: 0 auto 1.6em;
  max-width: 45em;              /* 本文より少し広め。⚠️ 広げすぎると改行の無い文章が追いにくくなる */
  font-size: 1rem; color: #555;
  font-feature-settings: "palt" 1;
  /* ノートの罫線のような破線。行を目で追いやすくし、キャプションであることを示す。
     ⚠️ 行間を広げてから引く。1.6のままだと破線が次の行に近すぎて潰れる。 */
  line-height: 2.15;
  text-decoration: underline dashed;
  text-decoration-color: #c6ccd2;
  text-decoration-thickness: 1px;
  text-underline-offset: .62em;
}
/* テーマ一覧・視点一覧のヘッダーをポップ版にする場合（<section class="pv-hero is-pop">） */
.is-pop .pv-hero__eyebrow {
  margin: 0 0 35px; padding: .45em 1.2em;
  background: var(--accent); color: #fff; border-radius: 999px;
}

/* 本文・戻るリンクは左揃えに戻す（中央揃えが本文まで効くと読みにくいため） */
.is-pop .page-content,
.is-pop .pv-back { text-align: left; }
.page-content h2 {
  margin: 2em 0 .8em;
  padding: .5em .8em;
  border-left: 5px solid var(--main);
  background: #eef1f5;
  color: var(--main);
  font-size: 1.2rem;
}
.page-content h3 {
  margin: 1.8em 0 .5em;
  padding-bottom: .3em;
  border-bottom: 2px solid #dfe3e8;
  color: var(--main);
  font-size: 1.08rem;
}
.page-content h4 { margin: 1.5em 0 .4em; color: var(--main); font-size: 1rem; }
.page-content p  { margin: 0 0 1.2em; }
/* ===== 本文の箇条書き・番号付きリスト（2026-10-13）=====
   シンプルに少しだけ見た目を持たせる：箇条書きは紺の小さな丸、番号付きは紺の丸に白い数字。
   ⚠️ class の付いたリスト（ナビ・カード等の部品）には効かせない（:not([class])）。 */
.page-content ul:not([class]),
.page-content ol:not([class]) { margin: 0 0 1.2em; padding-left: 0; list-style: none; }
.page-content ul:not([class]) > li,
.page-content ol:not([class]) > li { position: relative; margin: .5em 0; }
.page-content ul:not([class]) > li { padding-left: 1.3em; }
.page-content ul:not([class]) > li::before {
  content: ""; position: absolute; left: .35em; top: calc(.9em - 3px);   /* .9em＝行の高さ（1.8）の半分 */
  width: 6px; height: 6px; border-radius: 50%; background: var(--main);
}
.page-content ol:not([class]) { counter-reset: hw-ol; }
.page-content ol:not([class]) > li { counter-increment: hw-ol; padding-left: 2em; }
.page-content ol:not([class]) > li::before {
  content: counter(hw-ol); position: absolute; left: 0; top: .4em;   /* 1行目の中央に丸の中心を合わせる（文字サイズ .82em 基準） */
  width: 1.4em; height: 1.4em; display: grid; place-items: center;
  border-radius: 50%; background: var(--main); color: #fff;
  font-family: var(--dfont); font-size: .82em; font-weight: 700; line-height: 1;
}
/* 引用（原稿の「> 」。AIへの依頼文などをそのまま見せる）。
   ⚠️ コールアウト（緑・赤の箱）や h2（紺の線）と見分けがつくよう、グレーの細い線＋ごく淡いグレーの地にする */
/* ⚠️ 左右にも外側の余白を取る（本文や見出しと同じ幅だと「中に格納されている」感じが出ないため・2026-10-13） */
.page-content blockquote {
  margin: 1.4em 2em 1.6em; padding: 1em 1.4em;
  background: #f7f7f5; border-left: 3px solid #cfd2d6; border-radius: 0 6px 6px 0;
  color: #444; font-size: .95em;
}
.page-content blockquote > :last-child { margin-bottom: 0; }
.page-content blockquote p { margin: 0 0 .9em; }
@media (max-width: 768px) { .page-content blockquote { margin-left: .8em; margin-right: .8em; } }
.page-content .txtred, .page-content .red { color: var(--accent); font-weight: 600; }
.page-content .keiko_green { background: linear-gradient(transparent 60%, #cdeccd 60%); }
.page-content .keiko_red { color: var(--accent); font-weight: 600; }   /* 旧 WordPress の強調（赤字）。規約ページで使用 */
.page-content table { border-collapse: collapse; width: 100%; margin: 1em 0; }
.page-content th, .page-content td { border: 1px solid #ddd; padding: .6em .8em; text-align: left; vertical-align: top; }
.page-content iframe { max-width: 100%; }
.page-content pre {
  white-space: pre-wrap;
  background: #f3f3ef;
  padding: 1em;
  border-radius: var(--radius);
  font-family: inherit;
}

/* ===== サービス一覧カード ===== */
.service-list { display: grid; gap: 20px; }
.service-card {
  display: block;
  padding: 1.4em 1.6em;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  transition: box-shadow .25s, transform .25s;
  color: inherit;
}
.service-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.1); transform: translateY(-2px); text-decoration: none; }
.service-card h2 { margin: 0 0 .5em; padding: 0; background: none; border: none; color: var(--main); font-size: 1.2rem; }
.service-card p { margin: 0 0 .6em; font-size: .9rem; color: #555; }
.service-more { color: var(--accent); font-weight: 600; font-size: .9rem; }

/* ===== お知らせ個別記事 ===== */
.news-article-date { margin: 0 0 .8em; color: #888; font-size: .85rem; }
.news-back { margin-top: 2.5em; padding-top: 1.2em; border-top: 1px solid #e6e6e6; }
.news-back a { font-weight: 600; }

/* ===== メインビジュアル（FV：現行サイト踏襲） ===== */
.header-image {
  overflow: hidden;            /* 傾けた見出しで横スクロールが出ないように */
  background-size: cover;
  background-position: center;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
}
.header-image__text { max-width: 780px; text-align: center; color: #fff; }
.header-image__headline {
  /* 大小のメリハリの主役。descr との比が約4倍になるようにしている */
  margin: 0 0 .42em;
  font-family: var(--pop-font);
  font-weight: 900;
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  line-height: 1.0;            /* 行間を詰めて塊にする */
  letter-spacing: -.01em;      /* 大きい文字は開いて見えるので詰める */
  transform: rotate(-3deg);    /* 右肩上がり。記事タイトルのポップ版と同じ角度で揃える */
}
.header-image__descr {
  margin: 0 0 1.9em;
  font-size: 1rem;
  line-height: 1.55;                 /* 行間を詰めて、見出しと同じく塊として見せる */
  font-feature-settings: "palt" 1;   /* ひらがなの間延びを詰める */
}
/* descr の中の1行だけ強くして、メリハリを文章内にも作る */
.header-image__descr .em {
  display: inline-block;
  line-height: 1.35;                 /* 大きい行だけ行送りが開くのを抑える */
  font-family: var(--pop-font);
  font-weight: 900;
  font-size: 1.45rem;
  letter-spacing: -.01em;
}
.header-image__btn a {
  display: inline-block;
  padding: .85em 2.4em;
  background: var(--accent);
  color: #fff;
  border-radius: 4px;
  font-size: 1rem;
  box-shadow: 0 3px 10px rgba(0,0,0,.2);
  transition: opacity .2s;
}
.header-image__btn a:hover { opacity: .88; text-decoration: none; }

/* ===== 講座紹介ブロック（現行サイト踏襲） ===== */
.divheader {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 48px 20px;
}
.divheader__img { flex: 1 1 55%; min-width: 0; }
.divheader__img img { display: block; width: 100%; height: auto; }
.divheader__text { flex: 1 1 45%; }
.divheader__headline { margin: 0 0 .6em; font-size: 1.4rem; font-weight: 700; color: #1a1a1a; }
.divheader__descr { margin: 0 0 1.4em; font-size: .95rem; line-height: 1.9; }
.divheader__btn a {
  display: inline-block;
  padding: .8em 1.8em;
  background: #2fb4ce;
  color: #fff;
  border-radius: 4px;
  font-size: .95rem;
  transition: opacity .2s;
}
.divheader__btn a:hover { opacity: .9; text-decoration: none; }

@media (max-width: 768px) {
  .header-image { min-height: 360px; }
  /* 見出しのサイズは clamp に任せる（ここで固定するとclampが効かなくなる） */
  .divheader { flex-direction: column; gap: 20px; }
}

/* ===== 講座ランディングページ ===== */
.lp-hero { background: #eef2f6; padding: 44px 0 50px; text-align: center; }
.lp-hero__img { display:block; width:100%; max-width:920px; margin:0 auto 28px; border-radius: var(--radius); }
.lp-hero__lead { font-size: 1.5rem; font-weight:700; color: var(--main); margin:0 0 .7em; line-height:1.6; }
.lp-hero__desc { max-width:780px; margin:0 auto; font-size:.98rem; line-height:1.95; text-align:left; }

.lp-body { padding: 40px 0 64px; }
.lp-section { margin:0 0 3.4em; }
.lp-h2 { margin:0 0 1.1em; padding-bottom:.5em; text-align:center; font-size:1.6rem; color:var(--main); }
.lp-h2::after { content:""; display:block; width:60px; height:3px; background:var(--accent); margin:.55em auto 0; }
.lp-section p { line-height:1.95; margin:0 0 1.2em; }
.lp-hl { background: linear-gradient(transparent 60%, #cde7ef 60%); font-weight:600; }

/* クイズ風ボックス */
.lp-quizbox { background:#fff; border:2px solid var(--main); border-radius:var(--radius); padding:1.6em 1.8em; margin:1.6em 0; }
.lp-quizbox__title { margin:0 0 .9em; font-weight:700; color:var(--main); font-size:1.1rem; text-align:center; }
.lp-quizlist { margin:0; padding-left:1.4em; list-style:decimal; }
.lp-quizlist li { margin:.8em 0; line-height:1.7; }
.lp-quizlist .big { display:block; margin-top:.15em; font-weight:700; color:var(--accent); }

/* チェックリスト */
.lp-checklist { display:grid; gap:.7em; margin:0; padding:0; list-style:none; }
.lp-checklist li { position:relative; padding-left:1.9em; line-height:1.6; }
.lp-checklist li::before { content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; color:var(--accent); position:absolute; left:0; top:.15em; }

/* 講師 */
.lp-instructor { display:flex; gap:26px; align-items:flex-start; background:#f6f8fa; border-radius:var(--radius); padding:1.8em; }
.lp-instructor__logo { flex:0 0 auto; width:300px; max-width:38%; }
.lp-instructor__logo img { width:100%; height:auto; background:#fff; padding:10px; border-radius:6px; }
.lp-instructor__text p:last-child { margin-bottom:0; }

/* ステップ */
.lp-steps { display:grid; gap:16px; }
.lp-step { display:flex; gap:18px; align-items:center; background:#fff; border:1px solid #e3e8ee; border-left:5px solid var(--main); border-radius:var(--radius); padding:1.15em 1.5em; }
.lp-step__num { flex:0 0 auto; font-family:var(--dfont); font-weight:700; color:#fff; background:var(--main); border-radius:4px; padding:.4em .8em; font-size:.95rem; white-space:nowrap; }
.lp-step p { margin:0; font-weight:600; }

/* 受講者の声 */
.lp-voices { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.lp-voice { display:flex; gap:16px; align-items:flex-start; margin:0; background:#fff; border:1px solid #e6e6e6; border-radius:var(--radius); padding:1.3em 1.5em; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.lp-voice__body { flex:1 1 auto; min-width:0; }
.lp-voice__body p { margin:0 0 .9em; font-size:.92rem; line-height:1.85; }
.lp-voice cite { font-style:normal; font-weight:700; color:var(--main); font-size:.85rem; }
.lp-voice__img { flex:0 0 auto; width:104px; height:104px; border-radius:6px; overflow:hidden; background:#f0f0f0; border:1px solid #e6e6e6; }
.lp-voice__img img { width:100%; height:100%; object-fit:cover; display:block; }

/* 必要なもの */
.lp-needs { counter-reset:n; display:grid; gap:.7em; margin:1.2em 0; padding:0; list-style:none; }
.lp-needs li { position:relative; padding-left:2.4em; line-height:1.7; }
.lp-needs li::before { counter-increment:n; content:counter(n); position:absolute; left:0; top:.05em; width:1.6em; height:1.6em; line-height:1.6em; text-align:center; background:var(--main); color:#fff; border-radius:50%; font-size:.85rem; font-weight:700; }

/* CTA */
.lp-cta { text-align:center; margin:2.4em 0; }
.lp-cta a { display:inline-block; padding:1em 3em; background:#2fb4ce; color:#fff; border-radius:6px; font-size:1.1rem; font-weight:700; box-shadow:0 4px 14px rgba(47,180,206,.4); transition:transform .2s, opacity .2s; }
.lp-cta a:hover { transform:translateY(-2px); opacity:.95; text-decoration:none; }

@media (max-width:768px){
  .lp-hero__lead { font-size:1.25rem; }
  .lp-voices { grid-template-columns:1fr; }
  .lp-instructor { flex-direction:column; }
  .lp-instructor__logo { width:auto; max-width:100%; }
}

/* ===== お知らせ「一覧を見る」導線 ===== */
.news-more { margin: 2px 0 8px; text-align: right; }
.news-more a { font-size: .85rem; font-weight: 600; color: var(--main); }

/* ===== スクロールフェードイン（JS動作時のみ隠す＝no-JS/クローラーは通常表示） ===== */
html.js .intro,
html.js .news-text-list,
html.js .standfm-section,
html.js #note-feed,
html.js .divheader,
html.js .page-content,
html.js .lp-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease-out, transform 1s ease-out;
  will-change: opacity, transform;
}
html.js .intro.is-visible,
html.js .news-text-list.is-visible,
html.js .standfm-section.is-visible,
html.js #note-feed.is-visible,
html.js .divheader.is-visible,
html.js .page-content.is-visible,
html.js .lp-section.is-visible {
  opacity: 1;
  transform: none;
}
/* OSの「モーションを減らす」設定時は即表示（隠さない） */
@media (prefers-reduced-motion: reduce) {
  html.js .intro,
  html.js .news-text-list,
  html.js .standfm-section,
  html.js #note-feed,
  html.js .divheader,
  html.js .page-content,
  html.js .lp-section {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ===== トップに戻るボタン ===== */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--accent);   /* コーポレートカラーの赤 */
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
  z-index: 60;
}
.to-top.is-shown { opacity: .92; visibility: visible; transform: none; }
.to-top:hover { opacity: 1; text-decoration: none; }
@media (max-width: 768px) {
  .to-top { right: 14px; bottom: 14px; width: 42px; height: 42px; }
}

/* ===== ヒロモウェブの視点（note連載とは別枠のストック記事） ===== */
.pv-hero { padding: 8px 0 6px; }
.pv-hero__eyebrow {
  display: inline-block;
  margin: 0 0 .7em;
  color: var(--accent);
  font-family: var(--dfont);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .14em;
}
.pv-hero__title { margin: 0 0 .6em; font-size: 1.6rem; color: var(--main); line-height: 1.5; }
/* 幅は下の記事一覧（.pv-item__lead）と揃える。max-width を付けるとリード文だけ短くなって不揃いに見える */
.pv-hero__lead { font-size: .92rem; line-height: 1.95; color: #555; }

/* 一覧は「1枚の紙に複数件」ではなく、1件＝1枚のカードを縦に積む。
   ⚠️ .pv-item は li そのもの（li の中の子ではない）。セレクタを間違えやすい。 */
/* テーマのトピック一覧ページで、一覧の上に置く見出し（赤バッジ＋見出し）。ヒーローとの間を少し空ける */
.pv-list-head { margin: 2.6em 0 0; }
.pv-list-head + .pv-list { margin-top: 1.2em; }
.pv-list { margin: 1.8em 0 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.pv-item {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.7em 1.9em;
  box-shadow: 0 2px 10px rgba(23, 65, 98, .07);
  transition: box-shadow .25s, transform .25s;
}
.pv-item:hover { box-shadow: 0 8px 20px rgba(23, 65, 98, .13); transform: translateY(-2px); }
@media (max-width: 600px) { .pv-item { padding: 1.4em 1.3em; } }
.pv-item a { display: block; color: inherit; }
/* ===== テーマ一覧の固定記事（.pv-feature・2026-10-19 本人確定）=====
   テーマ全体で言いたい1本を、一覧から外して「テーマコラム一覧」の上に一回り大きく置く。
   紺の地（「地・紙・白」の例外：固定記事だけ）＋上辺の中央にマスキングテープ風の帯（-3度）。日付は出さない。
   ⚠️ ラベルは紺の上で読める黄色寄りの薄いオレンジ #ffc46b（赤い文字は紺の上でコントラスト1.7で読めなかった） */
.pv-feature { margin: 2.8em 0 0; }
.pv-feature a {
  position: relative; display: block; color: inherit; background: var(--main); border-radius: var(--radius);
  padding: 2.3em 2.4em 1.9em; box-shadow: 0 6px 20px rgba(23, 65, 98, .22); transition: box-shadow .2s ease, transform .2s ease;
}
.pv-feature a:hover { text-decoration: none; box-shadow: 0 12px 28px rgba(23, 65, 98, .32); transform: translateY(-2px); }
/* マスキングテープ風の帯（上辺の中央・-3度） */
.pv-feature a::before {
  content: ""; position: absolute; top: -13px; left: 50%; width: 140px; height: 26px;
  transform: translateX(-50%) rotate(-3deg);
  /* 紺の上で沈まないよう、ほぼ透けない赤（濃い赤と明るい赤の斜線）。透け感はごくわずかに残す */
  background: repeating-linear-gradient(45deg, rgba(185,37,39,.94) 0 6px, rgba(219,104,106,.94) 6px 12px);
  box-shadow: 0 1px 2px rgba(0,0,0,.10);
}
/* ラベルは紺の上で読める、黄色寄りの薄いオレンジ */
.pv-feature__label { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .06em; color: #ffc46b; }
.pv-feature__title { margin: .35em 0 .6em; font-size: 1.55rem; line-height: 1.4; color: #fff; }
.pv-feature a:hover .pv-feature__title { text-decoration: underline; }
.pv-feature__lead { margin: 0 0 1em; font-size: .95rem; line-height: 1.95; color: rgba(255,255,255,.82); }
.pv-feature__foot { display: block; }
.pv-feature__more { font-size: .88rem; font-weight: 700; color: #fff; }
.pv-feature + .pv-list-head { margin-top: 3.2em; }
@media (max-width: 600px) { .pv-feature a { padding: 1.8em 1.4em 1.5em; } .pv-feature__title { font-size: 1.3rem; } }

/* ===== テーマのコラム一覧を2列＋キャッチ画像にする（.pv-list--grid・2026-10-19 → 10-20 横長に変更）=====
   note のタイムラインのように、カードの左にキャッチ画像・右に文字。上下をスリムにするため書き出しは2行まで。
   今は画像のアタリ（.pv-item__thumb--ph）。奇数のときは最後の段が1枚だけ（空白でよい） */
.pv-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.pv-list--grid .pv-item { padding: 0; overflow: hidden; }
.pv-list--grid .pv-item a { display: flex; flex-direction: row; align-items: stretch; height: 100%; }
.pv-item__thumb { display: block; flex: 0 0 38%; width: 38%; min-height: 100%; object-fit: cover; background: #eef1f5; }
.pv-item__thumb--ph {
  display: grid; place-items: center; padding: .5em; text-align: center; color: #8a96a3; font-size: .72rem; letter-spacing: .04em;
  background: repeating-linear-gradient(45deg, #eef1f5 0 10px, #e6eaf0 10px 20px);
}
.pv-item__body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; padding: 1em 1.1em .9em; }
.pv-list--grid .pv-item__title { margin: 0 0 .35em; font-size: .98rem; line-height: 1.5; }
/* 書き出しは2行まで（上下をスリムにして、カードの高さもそろえる） */
.pv-list--grid .pv-item__lead {
  margin: 0 0 .5em; font-size: .82rem; line-height: 1.7;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.pv-list--grid .pv-item__foot { margin-top: auto; }
@media (max-width: 600px) {
  .pv-list--grid { grid-template-columns: 1fr; }
  .pv-item__thumb { flex-basis: 34%; width: 34%; }
}
.pv-item a:hover { text-decoration: none; }
.pv-item__title {
  margin: 0 0 .5em;
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--main);
}
.pv-item a:hover .pv-item__title { text-decoration: underline; }
.pv-item__lead { margin: 0 0 .6em; font-size: .88rem; line-height: 1.85; color: #666; }
.pv-item__more { font-size: .8rem; font-weight: 600; color: var(--accent); }
/* 日付は「続きを読む」と同じ行の右端にそっと置く。主役はあくまでタイトル。 */
.pv-item__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; }
.pv-item__date { font-size: .75rem; color: #9b9b9b; white-space: nowrap; }
/* PCのときだけ改行する（<br class="pc-only">）。スマホでは改行せず続けて流す */
@media (max-width: 768px) { br.pc-only { display: none; } }
/* 語のまとまりの途中で改行させない（タイトル内の「1工程1ツール化」など）。文言は変えずに折り返し位置だけ整える */
.nobr { display: inline-block; white-space: nowrap; }

/* 記事側：視点であることを示すアイキャッチラベル */
.pv-eyebrow {
  display: inline-block;
  margin: 0 0 .8em;
  color: var(--accent);
  font-family: var(--dfont);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .14em;
}
.pv-back { margin-top: 2.6em; padding-top: 1.2em; border-top: 1px solid #e6e6e6; }
/* 戻るリンクの色は、トップの「一覧を見る →」（.news-more a）と同じコーポレートカラーの紺に揃える。
   ⚠️ 指定しないと既定のリンク色 --link（薄い水色 #4f96f6）になり、1箇所だけ浮く。 */
.pv-back a,
.news-back a { color: var(--main); font-weight: 600; }

/* ===== 学びメモ（ヘッダー下・ランダム1件表示／トップページのみ） ===== */
.lesson {
  background: #fff;
  border: 1px solid #ece4cc;
  border-radius: var(--radius);
  padding: 9px 14px;
  margin: 22px 0 0;
  font-size: 13px;
  color: #6b5518;
  line-height: 1.6;
}
.lesson-tag { font-weight: 700; margin-right: 6px; white-space: nowrap; }

/* ===== Formzu フォーム埋め込み ===== */
/* 高さはフォームごとに異なるため、iframe 側で --h（PC）/ --h-sp（スマホ）を指定する。
   フォームの項目を増減したら実測して値を更新すること。 */
.formzu-frame {
  display: block;
  width: 100%;
  border: 0;
  height: var(--h, 1200px);
}
@media (max-width: 768px) {
  .formzu-frame { height: var(--h-sp, var(--h, 1200px)); }
}

/* ===== トップページ 1カラム構成 ===== */
.wrap--narrow { max-width: 960px; }
.top-section { margin: 56px auto 0; }
.top-section:last-child { margin-bottom: 56px; }
.top-h2 { margin: 0 0 .35em; text-align: center; font-size: 1.5rem; color: var(--main); }
.top-h2 .en { display: block; font-family: var(--dfont); font-size: .75rem; letter-spacing: .16em; color: var(--accent); margin-bottom: .5em; }
.top-lead { margin: 0 auto 2em; max-width: 720px; text-align: center; color: #666; font-size: .92rem; line-height: 1.9; }

/* 3本柱 */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pillar {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e6e6e6; border-radius: var(--radius);
  padding: 1.7em 1.6em; color: inherit;
  box-shadow: 0 2px 8px rgba(0,0,0,.05); transition: box-shadow .25s, transform .25s;
}
.pillar:hover { box-shadow: 0 8px 20px rgba(0,0,0,.1); transform: translateY(-2px); text-decoration: none; }
.pillar { overflow: hidden; }   /* 傾けた動詞がカードから出ないように */
.pillar__num { font-family: var(--dfont); font-weight: 700; font-size: .78rem; letter-spacing: .14em; color: var(--accent); }
.pillar h3 { margin: .35em 0 .55em; font-size: 1.15rem; color: var(--main); line-height: 1.4; }
.pillar p { flex: 1; margin: 0 0 1.1em; font-size: .9rem; line-height: 1.85; color: #555; }
.pillar__more { font-size: .88rem; font-weight: 600; color: var(--accent); }
/* ===== 「何をしているか」の3カード：動詞（抽象）を主役にする3段構成 ===== */
/* 1段目：大きな動詞。会社が何を提供したいかの核。ここが一番大きい。 */
.pillar__verb {
  /* inline-block ＋ transform-origin:left で、文字の左端を固定したまま右端が持ち上がる。
     block のままだとカード幅の中央が軸になり、左寄せの文字が沈んで見える。 */
  display: inline-block; color: var(--main);
  transform: rotate(-3deg);
  transform-origin: left center;
  font-family: var(--pop-font);
  font-weight: 900;
  font-size: clamp(1.9rem, 2.6vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: .02em;
  font-feature-settings: "palt" 1;
}
.pillar__verb::after {
  content: ""; display: block; width: 80px; height: 3px; border-radius: 2px;
  margin: .2em 0 .5em; background: var(--accent);   /* 32px→80px（2.5倍）、動詞との間隔は .55em→.2em */
}
/* 2段目：動詞に紐づくサービス名。本文より一段強く、動詞より一段弱く。 */
.pillar h3.pillar__service {
  margin: 0 0 .8em; font-size: 1rem; font-weight: 700; line-height: 1.5;
  color: var(--accent); letter-spacing: .05em;
}
@media (max-width: 880px) {
  /* 動詞のサイズは clamp に任せる */
}

/* プロフィール帯 */
.about-band {
  display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: center;
  background: #fff; border-radius: var(--radius); padding: 2.2em; box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.about-band__photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius);
  object-position: 64% center;   /* 横長の写真（1330×526）のうち、スクリーンの左端〜右側で話している本人までを正方形に収める（2026-10-21 本人のサンプルに合わせた） */
}
.about-band__name { margin: 0 0 .15em; font-size: 1.25rem; font-weight: 700; color: var(--main); }
.about-band__title { margin: 0 0 1em; font-size: .85rem; color: #777; }
.about-band p { margin: 0 0 1em; font-size: .92rem; line-height: 1.9; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 1.2em 0; }
.stat { text-align: center; background: #f6f8fa; border-radius: 6px; padding: .9em .4em; }
.stat__num { display: block; font-family: var(--dfont); font-weight: 700; font-size: 1.35rem; color: var(--main); line-height: 1.2; }
.stat__label { font-size: .74rem; color: #666; }
.stats--2 { grid-template-columns: repeat(2, 1fr); max-width: 520px; }

/* 登壇写真：1枚を主役にして、下に2枚を同じ大きさで並べる（ただ縦に貼るのをやめる） */
.talk-photos { margin: 1.4em 0 1.8em; }
.talk-photos__main { display: block; width: 100%; height: auto; }
/* プリント写真風の質感。白フチ＋わずかな角丸＋影を2枚重ねる。
   ⚠️ 影は必ず2枚重ねる：近い影が縁の接地感、遠い影が浮遊感を担う。1枚だとのっぺりする。 */
.talk-photos__main,
.talk-photos__sub img {
  /* ⚠️ 本文が白い紙になったので、白フチ＋影だと「白の上に白」でくどくなる。
     フチは薄グレーの線1本に、影はなしにしてある。 */
  border: 1px solid #e0e0e0;
  border-radius: 3px;
  box-shadow: none;
}
/* border 分がはみ出さないように */
.talk-photos__main, .talk-photos__sub img { box-sizing: border-box; }

/* 事例カード：2カラム。トップの .pillar と同じ質感に揃える（白・細い枠・弱い影）。
   ⚠️ リンクではないので hover で動かさない。押せそうに見せない。 */
.case-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 1.2em 0 2em; }
.case-card {
  background: #fff; border: 1px solid #e6e6e6; border-radius: var(--radius);
  padding: 1.5em 1.4em; box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
/* ⚠️ セレクタを2段にしてあるのは、.page-content h3 / p の余白（上31px・下17px）を打ち消すため。
   1段だと .page-content h3 のほうが詳細度で勝ち、カード上端との隙間が倍になる。 */
.case-card .case-card__title {
  margin: 0 0 .6em; font-size: .97rem; font-weight: 700;
  color: var(--main); line-height: 1.55;
}
.case-card .case-card__body { margin: 0; font-size: .86rem; line-height: 1.9; color: #555; }
@media (max-width: 600px) { .case-cards { grid-template-columns: 1fr; } }
.talk-photos__sub { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
/* ⚠️ 元画像の縦横比がバラバラ（2.53:1 と 1.1:1）なので、箱の比を固定して切り抜きで揃える */
.talk-photos__sub img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* 3枚目は広報紙の見出しが上にあるため、切り抜きの基準を上寄せにする */
.talk-photos__sub img:last-child { object-position: center top; }
@media (max-width: 600px) {
  .talk-photos__sub { grid-template-columns: 1fr; }
}
.about-band__more { font-size: .88rem; font-weight: 600; color: var(--accent); }

/* CTA（メルマガ／お問い合わせ） */
/* カード枚数に追従：1枚なら全幅、2枚なら2カラム（メルマガ復活時にCSSを触らなくて済む） */
.cta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.cta-card { border-radius: var(--radius); padding: 2.2em 2em; }
.cta-card--news { background: var(--main); color: #fff; }
.cta-card--contact { background: #fff; border: 1px solid #e6e6e6; }
.cta-card h3 { margin: 0 0 .45em; font-size: 1.25rem; line-height: 1.4; }
.cta-card--news h3 { color: #fff; }
.cta-card--contact h3 { color: var(--main); }
.cta-card p { margin: 0 0 1.2em; font-size: .92rem; line-height: 1.8; }
.cta-card--news p { opacity: .92; }
.cta-form { display: flex; gap: 8px; }
.cta-form input { flex: 1; min-width: 0; padding: .8em 1em; border: 1px solid #cdd6e0; border-radius: 6px; font-size: .95rem; }
.cta-form button, .cta-btn {
  display: inline-block; padding: .85em 1.6em; border: 0; border-radius: 6px;
  background: var(--accent); color: #fff; font-weight: 700; font-size: .95rem; cursor: pointer; white-space: nowrap;
}
.cta-form button:hover, .cta-btn:hover { opacity: .9; text-decoration: none; }
.cta-note { margin: .7em 0 0; font-size: .75rem; opacity: .75; }

/* 記事の公開日（視点・テーマ）。並び順はテーマ順のまま、鮮度だけ分かるようにする控えめな表示 */
.pv-date { margin: -.2em 0 1.8em; font-size: .8rem; color: #8c8c8c; letter-spacing: .02em; }
.pv-date__upd { margin-left: .8em; padding-left: .8em; border-left: 1px solid #ddd; }

/* カードが1枚（＝全幅）のときだけ横並びにして、空いた右側を使う。
   メルマガを復活させて2枚になると :only-child が外れ、自動で元の縦積みに戻る。 */
.cta-card--contact:only-child { display: flex; align-items: center; flex-wrap: wrap; gap: 1.6em 2.5em; }
.cta-card--contact:only-child .cta-card__body { flex: 1 1 420px; }
.cta-card--contact:only-child .cta-card__body p { margin-bottom: 0; }
.cta-card--contact:only-child .cta-btn { flex: 0 0 auto; margin-left: auto; }

/* 見出しを揃えるための既存ブロック調整（トップのみ） */
.top-section .sub-title { margin-top: 0; }

@media (max-width: 880px) {
  .pillars { grid-template-columns: 1fr; }
  .about-band { grid-template-columns: 1fr; }
  .about-band__photo { max-width: 200px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .cta-grid { grid-template-columns: 1fr; }
  .cta-form { flex-direction: column; }
  /* 折り返したときにボタンが右端へ飛ぶのを防ぐ */
  .cta-card--contact:only-child .cta-btn { margin-left: 0; }
}

/* ===== トップ：全幅の帯セクション（幅の違いを「意図」として見せる） ===== */
.top-band { margin: 56px 0 0; padding: 56px 0; }
.top-band--tint  { background: #eef2f6; }   /* 薄ネイビー：白カードを載せる帯 */
.top-band--white { background: #fff; }      /* 白：読み物・埋め込みを載せる帯 */
.top-band .top-h2 { margin-top: 0; }
html.js .top-band { opacity: 0; transform: translateY(40px); transition: opacity 1s ease-out, transform 1s ease-out; will-change: opacity, transform; }
html.js .top-band.is-visible { opacity: 1; transform: none; }
/* ⚠️ 視点＋定期更新は「箱ごと1回」で出す。中の帯を個別にフェードさせない
   （別々に出ると、斜めの境目や半透明の背景が一瞬おかしく見えるため） */
html.js .depth-block { opacity: 0; transform: translateY(40px); transition: opacity 1s ease-out, transform 1s ease-out; will-change: opacity, transform; }
html.js .depth-block.is-visible { opacity: 1; transform: none; }
html.js .depth-block > .top-band { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  html.js .top-band { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.js .depth-block { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ===== トップ：音声配信グリッド（note新着と同じ2カラム。埋め込みが増えたら .voice-item を追加） ===== */
.voice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }  /* note新着(.grid-2col)と同値 */
.voice-item { min-width: 0; }
@media only screen and (max-width: 480px) { .voice-grid { grid-template-columns: 1fr; gap: 16px; } }

/* 取り組みテーマ：2カラム版（.pillars の派生。スマホは既存ルールで1列） */
.pillars--2 { grid-template-columns: repeat(2, 1fr); }
/* ⚠️ スマホで1列にする指定は、ここ（.pillars--2 の後）に書く必要がある。
   上の @media で .pillars を1列にしていても、詳細度が同じ .pillars--2 が後に来ると勝ってしまい、
   テーマだけ2列のまま残る。他のセクションは全部1列なので、ここだけ横並びだと浮く。 */
@media (max-width: 880px) { .pillars--2 { grid-template-columns: 1fr; } }
/* カードが1枚だけのときは、すぐ下の ABOUT（.wrap--narrow）と同じ 960px 幅で中央に置く。
   2枚以上に戻れば :only-child が外れて自動で2カラムに戻る。 */
.pillars--2 > .pillar:only-child { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 960px; }
@media (max-width: 880px) { .pillars--2 > .pillar:only-child { width: auto; justify-self: stretch; } }

/* ===== トップ：視点＝ネイビー帯（CTAメルマガと同色）＋note新着と同じ2カラムカード ===== */
.top-band--navy { background: var(--main); }
.top-band--navy .top-h2 { color: #fff; }
.top-band--navy .top-h2 .en { color: #fff; }   /* バッジなので地色は赤のまま、文字は白 */
.top-band--navy .top-lead { color: rgba(255,255,255,.85); }
.top-band--navy .news-more a { color: #fff; }
.pv-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }  /* .grid-2col と同値 */
.pv-card {
  display: flex; flex-direction: column; min-width: 0;
  background: #fff; border-radius: var(--radius); padding: 1.5em 1.6em; color: inherit;
  box-shadow: 0 2px 8px rgba(0,0,0,.12); transition: box-shadow .25s, transform .25s;
}
.pv-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,.22); transform: translateY(-2px); text-decoration: none; }
.pv-card__title { margin: 0 0 .55em; font-size: 1.06rem; line-height: 1.55; color: var(--main); }
.pv-card__lead  { flex: 1; margin: 0 0 .9em; font-size: .88rem; line-height: 1.85; color: #666; }
.pv-card__more  { font-size: .85rem; font-weight: 600; color: var(--accent); }
@media only screen and (max-width: 480px) { .pv-cards { grid-template-columns: 1fr; gap: 16px; } }

/* ===== トップ：視点＝写真背景の帯（暗い写真＋暗幕で白文字を載せる） ===== */
.top-band--photo {
  position: relative;
  overflow: hidden;                                  /* 動く背景がはみ出さないように */
  background-color: #0b1620;                         /* 画像が出ないときの保険 */
  isolation: isolate;
}
/* 背景そのもの。ゆっくり拡大＋移動して「止まっていない」印象をつくる（動画ファイル不要） */
.top-band--photo .top-band__bg {
  position: absolute;
  inset: -6%;                                        /* 動いても端が見えないよう大きめに敷く */
  /* ⚠️ 帯が高くなったので、横長の細帯画像（2400x628）だと1.69倍に引き伸ばされて粗くなっていた。
     元画像 319054056.jpeg（7600x1991）から帯の比率（約2:1）で切り出し直したものを使う。 */
  background-image: url(/img/319054056-bg-wide.jpg);
  /* ⚠️ タイル（repeat）は使わない。繰り返しが見えるため。
     cover は必ず高さを埋めるので、アイコンの大きさは「帯の高さ ÷ 元画像の高さ」で頭打ちになる。
     画像のアスペクトを帯より横長（2.3:1）にして、その下限（約0.60）に張り付かせている。 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: 50% 50%;
  animation: band-drift 21s ease-in-out infinite alternate;   /* 38s → 21s（約1.8倍速） */
  will-change: transform;
  z-index: 0;
}
/* 暗幕。背景の上・文字の下に重ねる */
.top-band--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 18, 28, .70);
  z-index: 1;
}
.top-band--photo > .wrap { position: relative; z-index: 2; }

@keyframes band-drift {
  from { transform: scale(1.00) translate3d(0, 0, 0); }
  to   { transform: scale(1.10) translate3d(-2.6%, -1.4%, 0); }   /* 動きの量も増やした */
}
/* 「視差効果を減らす」設定時と、スマホでは動かさない（負荷・酔い対策） */
@media (prefers-reduced-motion: reduce) {
  .top-band--photo .top-band__bg { animation: none; }
}
@media (max-width: 768px) {
  .top-band--photo .top-band__bg { animation: none; }
}
.top-band--photo .top-h2 { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.top-band--photo .top-h2 .en { color: #fff; text-shadow: none; }   /* バッジなので影は不要 */
.top-band--photo .top-lead { color: rgba(255,255,255,.9); text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.top-band--photo .news-more a { color: #fff; }
.top-band--photo .pv-card { box-shadow: 0 6px 20px rgba(0,0,0,.35); }   /* 写真の上で浮かせる */
.top-band--photo .pv-card:hover { box-shadow: 0 12px 28px rgba(0,0,0,.45); }

/* 写真帯のカードは少しだけ透過させ、背景がうっすら透ける質感にする */
.top-band--photo .pv-card { background: rgba(255, 255, 255, .90); }
.top-band--photo .pv-card:hover { background: rgba(255, 255, 255, .96); }

/* ===== 帯の中の小ブロック（定期更新コンテンツの「ポッドキャスト」「コラム」） =====
   赤バッジは帯の見出し（.top-h2 .en）だけが持つ。ここには付けない（バッジが増えると合図が弱まる）。 */
.band-block { margin-top: 2.4em; }
/* 左の赤い縦線は border ではなく ::before で描き、高さを文字の大きさ（1.15em）に固定して上下中央に置く。
   ⚠️ border だと見出しの高さ＝縦線の長さになり、noteロゴ（画像）を入れたときに線が下に長く伸びた（2026-10-14） */
.band-subhead {
  position: relative; display: flex; align-items: center;   /* 中身（文字・ロゴ）の高さぴったりにして、縦線の中心とそろえる */
  margin: 0 0 1em; padding-left: 12px;
  font-size: 1.02rem; font-weight: 700; line-height: 1.5;
}
.band-subhead::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(calc(-50% + 1.5px));
  /* 目で見て合わせた値（2026-10-14 本人確認）：中央だと上に、3px 下げると下にはみ出して見えたため、
     下端は「3px 下げた位置」のまま、上に 3px 伸ばして上下が少しずつはみ出す形にした */
  width: 4px; height: calc(1.15em + 3px); background: var(--accent);
}
/* 写真帯の上では白文字にして、影で下地から浮かせる */
.top-band--photo .band-subhead { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
/* 写真の上でカードを浮かせる（.pv-card と同じ扱い） */
.top-band--photo .note-card { box-shadow: 0 6px 20px rgba(0,0,0,.35); }
/* テーマのトピック一覧ページの「note のコラム」（AI Column Pickup）。
   トップの写真帯（.top-band--photo）と同じ見た目を、本文カラムの幅で使う。自社サイトのコラム（上の一覧）と区別するため */
.theme-note { margin: 64px 0 0; padding: 48px 0 52px; border-radius: var(--radius); }
.theme-note__inner { position: relative; z-index: 2; padding: 0 2em; }
@media (max-width: 768px) {
  .theme-note { margin-top: 48px; padding: 36px 0 40px; }
  .theme-note__inner { padding: 0 1em; }
}
/* 見出しの「note」を公式ロゴにする（note のブランドガイドライン準拠：黒か白のみ・影や装飾を付けない・最小幅30px） */
.note-brand-title { display: inline-flex; align-items: center; gap: 0; }
/* 赤バッジの下に noteロゴの見出しが来るとき、バッジとの間を「見出し → サブキャッチ」と同じ見た目の間隔にそろえる（+7px） */
.top-h2 .en + .note-brand-title { margin-top: 7px; }
.note-logo { display: block; height: 2.6em; width: auto; margin: -.55em -.35em -.55em -.55em; filter: none; }   /* SVG の周囲の余白を少しだけ詰める（余白は残す） */
/* ===== note アカウントの丸い吹き出し（inc/note-bubble.php・2026-10-14）=====
   「noteのコラム」の左に置く。企画っぽさと柔らかさを出すため、丸＋白フチ＋小さなしっぽ、少し傾ける（サイト共通の -3度）。
   画像（780×376）の中の「アイコン・名前・紹介文の一部」が丸に入るよう、直径 --d を基準に拡大・位置合わせしている。
   ⚠️ 画像を差し替えたら .note-bubble__img の background-size / position を合わせ直す。 */
.note-bubble {
  --d: 150px;
  position: relative; display: block; flex: 0 0 auto;
  width: var(--d); height: var(--d);
  transform: rotate(-3deg); transition: transform .2s ease;
}
.note-bubble:hover { transform: rotate(-3deg) scale(1.04); }
.note-bubble__img {
  display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background: #fff url(/img/brand/note-kobami.png) no-repeat;
  background-size: calc(var(--d) * 1.95) auto;                      /* 画像の 400px 分が直径に入る倍率 */
  background-position: calc(var(--d) * -0.0375) calc(var(--d) * 0.06);
  border: 4px solid #fff; box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
/* しっぽ（右下から見出しのほうへ） */
.note-bubble::after {
  content: ""; position: absolute; right: -4px; bottom: 14%;
  width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent #fff; transform: rotate(18deg);
}
/* 中央ぞろえの見出し（赤バッジ＋見出し）の左上に重ねて置く。トップの「noteコラム」と AIテーマのページで共通 */
/* AIテーマのページ（PC）：トップと同じく「noteのコラム」の文字のすぐ左に添え、しっぽ（3〜4時）で文字を指す（2026-10-14 本人のイメージ図） */
.theme-note .note-brand-title { position: relative; }
.theme-note .note-bubble {
  position: absolute; right: calc(100% + 18px); top: 50%; --d: 112px; z-index: 3;
  transform: translateY(calc(-50% - 32px)) rotate(-3deg);   /* 下のサブキャッチにかからない高さ */
}
.theme-note .note-bubble:hover { transform: translateY(calc(-50% - 32px)) rotate(-3deg) scale(1.04); }
.theme-note .note-bubble::after { right: -13px; bottom: 30%; border-width: 11px 0 11px 20px; transform: rotate(6deg); }
#note-feed { position: relative; }
/* トップの「noteのコラム」：吹き出しを見出しのすぐ左に添える（見出しは中央のまま）。大きさは AIテーマのページと同じ */
/* 位置の基準は見出し（h3）の中央。赤い横線（13em）の左端から 17px 離す＝ right: 50% + 6.5em + 17px（em は見出しの文字サイズ） */
#note-feed .band-head { position: relative; }
#note-feed .note-bubble {
  position: absolute; right: calc(50% + 6.5em + 6px); top: 50%; --d: 170px; z-index: 3;
  /* 本人のイメージ図（2026-10-14）に合わせる：直径170px、赤い横線の左端のすぐ左。
     しっぽは右の中央よりやや下（時計の3〜4時）から「noteのコラム」の文字を指す。そのため吹き出しを少し上げている */
  transform: translateY(calc(-50% - 28px)) rotate(-3deg);
}
#note-feed .note-bubble:hover { transform: translateY(calc(-50% - 28px)) rotate(-3deg) scale(1.04); }
#note-feed .note-bubble::after {
  right: -14px; bottom: 30%;
  border-width: 12px 0 12px 22px; transform: rotate(6deg);
}
/* トップの「noteコラム」は見出しが短く、吹き出しがカードに重なるため、見出しの高さを吹き出しの直径に合わせて上下中央に置く */
#note-feed .band-head { min-height: 130px; justify-content: center; }
@media (max-width: 900px) {
  /* AIテーマのページ：狭い画面では左上に置き、赤バッジに少しかかる形にする。しっぽは右下（時計の4時≒20分の位置）のまま。
     見出しにかぶらないよう、バッジの上に吹き出しの分の余白を取る（2026-10-14 本人指定） */
  .theme-note__inner { padding-top: 54px; }
  /* 吹き出しの位置の基準を、見出しの文字ではなく外側の箱にする */
  .theme-note .note-brand-title { position: static; }
  .theme-note .note-bubble { position: absolute; right: auto; left: -2px; top: 2px; --d: 92px; transform: rotate(-3deg); }   /* 本人のイメージ図に合わせ、バッジの左にわずかにかかる程度 */
  .theme-note .note-bubble:hover { transform: rotate(-3deg) scale(1.04); }
  /* トップ（スマホ）：見出しの左上に置き、しっぽは右下（時計の4時）。本人のイメージ図（2026-10-14） */
  #note-feed .band-head { padding-top: 86px; }   /* 見出しの左上に吹き出しの分の余白。狭い画面では見出しの「n」にかぶらないよう、吹き出しの下端を見出しの上端にそろえる */
  #note-feed .note-bubble { right: auto; left: 2px; top: 0; bottom: auto; --d: 84px; transform: rotate(-3deg); }
  #note-feed .note-bubble:hover { transform: rotate(-3deg) scale(1.04); }
  .theme-note .note-bubble::after, #note-feed .note-bubble::after { right: -4px; bottom: 14%; border-width: 10px 0 10px 18px; transform: rotate(18deg); }
}

/* 帯の中のまとまりの見出し（ポッドキャスト／noteのコラム）。帯の見出し（定期更新コンテンツ）より一段小さく、中央ぞろえ。
   ⚠️ 赤バッジは付けない：バッジは帯の見出しだけが持つ（情報の階層が違うのに同じ合図を使わない）。
   代わりに下に赤い短い横線を引いて、まとまりの見出しであることを示す（2026-10-14） */
.top-h2.band-head { font-size: 1.25rem; margin: 0 0 1.1em; }
.top-h2.band-head::after {
  content: ""; display: block; width: 13em; max-width: 100%; height: 3px; margin-top: .275em;   /* 13em＝「ポッドキャスト（音声配信）」の文字幅。2つの見出しで同じ長さにそろえる */
  background: var(--accent); border-radius: 2px;
}
.band-block + .band-block { margin-top: 3.2em; }
/* 中央ぞろえの見出しの下なので、埋め込みが1つだけのときは中央に置く（2つ以上なら2カラムのまま） */
.voice-grid > .voice-item:only-child { grid-column: 1 / -1; justify-self: center; width: min(100%, calc(50% - 10px)); }
@media (max-width: 768px) { #note-feed .band-head { min-height: 0; } .voice-grid > .voice-item:only-child { width: 100%; } }
/* 紺帯の上での小見出し */
.top-band--navy .band-subhead { color: #fff; }

/* ===== 「視点」〜「定期更新」を一段“浮き上がった”区画として見せる =====
   ・入口（視点の上）は水平の直線をやめ、右上がりの斜めにする
   ・光は下から当たっている想定。入口の影は「上向き」、出口の影は「下向き」に出す
   ⚠️ 影を区画の内側に落とすと「へこみ」、外側に出すと「浮き上がり」になる。 */
#perspective {
  position: relative;
  background: transparent;    /* 紺の面は ::before が持つ（斜めにするため） */
  padding-top: 104px;
}
/* 紺の面。skewY で傾けた板。
   ⚠️ clip-path は使わない。clip-path と filter を同じ要素に付けると影が切り落とされるため。
      skewY なら box-shadow も一緒に傾くので、斜めに沿った影が出せる。
   ⚠️ skewY は縦にしかズレないので、横幅は変わらない（横スクロールの心配がない）。 */
#perspective::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -60px;
  background: var(--main);
  transform: skewY(-1.8deg);      /* マイナス＝右上がり */
  transform-origin: 50% 0;
  /* 下から光が当たっている想定なので、影は上に出す。
     ⚠️ 距離を短く保ったままグラデーションにしている（到達は5〜10px程度）。
     ぼかしを広げると「なだらか」になって段差が消えるので、ぼかし量は距離と同程度までに留める。 */
  box-shadow: 0 -2px 3px rgba(51, 51, 51, .50),
              0 -5px 6px rgba(51, 51, 51, .26);
  z-index: 0; pointer-events: none;
}
#perspective > .wrap { position: relative; z-index: 2; }
/* 出口。区画の下端から地の背景色へ“下向き”に影を落とす */
/* 写真帯の上辺も、視点の上辺と同じ角度で斜めにする。
   背景＋暗幕を「傾いた箱」に入れることで、斜めの部分まで写真が入る。
   ⚠️ transform-origin は右上。右端を固定して左端だけ下げるので、
      上にはみ出して overflow:hidden に切られる部分が出ない（＝写真が欠けない）。 */
#updates { background-color: transparent; }
#updates .top-band__slant {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  overflow: hidden;
  background-color: #0b1620;        /* 画像が出ないときの保険 */
  transform: skewY(-1.8deg);        /* 視点の傾きと同じ角度 */
  transform-origin: 100% 0;
  z-index: 0;
}
/* 暗幕。傾いた箱の中に入れる（箱ごと傾くので斜めに追従する） */
#updates .top-band__slant::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(8, 18, 28, .70);
  z-index: 1;
}
#updates::before { content: none; }   /* 元の四角い暗幕は使わない */
@media (max-width: 600px) { #updates .top-band__slant { transform: skewY(-2.4deg); } }

#updates {
  position: relative; z-index: 1;   /* 視点の板のはみ出しより手前に置く */
  box-shadow: 0 2px 3px rgba(51, 51, 51, .50),
              0 5px 6px rgba(51, 51, 51, .26);
}
/* ⚠️ スマホでは傾きを浅くする（幅が狭いと角度がきつく見えるため） */
@media (max-width: 600px) {
  #perspective { padding-top: 76px; }
  #perspective::before { transform: skewY(-2.4deg); }
}
}

/* お知らせが0件のときの表示 */
.news-empty { color: #888; font-size: .9rem; }

/* ===== トップ：事業の枠（何をしているか＋最近取り組んでいるテーマ） =====
   薄い紙のスケッチ画像を敷き、白いベールで抑えてテクスチャとして使う。文字はネイビーのまま。 */
.top-frame { margin: 56px 0 0; }
.top-frame--paper {
  background-color: #fbfbf8;                        /* 画像が出ないときの保険 */
  background-image:
    linear-gradient(rgba(255, 255, 255, .74), rgba(255, 255, 255, .74)),
    url(/img/paper-bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-top: 1px solid rgba(23, 65, 98, .10);
  border-bottom: 1px solid rgba(23, 65, 98, .10);
  padding: 60px 0;
}
/* 枠の中のセクション。2つ目は区切り線で分ける */
.frame-section { margin: 0 auto; }
.frame-section + .frame-section { margin-top: 54px; padding-top: 54px; border-top: 1px solid rgba(23, 65, 98, .12); }

/* 英字ラベルは全セクション共通で「赤地に白文字の角丸バッジ」。
   記事ページの .is-pop .pv-eyebrow と同じ見せ方にして、サイト内の合図を統一する。
   （旧：罫線で挟む「— LABEL —」形式は 2026-10-02 に廃止） */
.top-h2 { display: flex; flex-direction: column; align-items: center; gap: .1em; }
.top-h2 .en {
  display: inline-block;
  margin-bottom: .7em; padding: .45em 1.2em;
  background: var(--accent); color: #fff;
  border-radius: 999px;
}

/* テクスチャの上でカードの輪郭を保つ */
.top-frame--paper .pillar { border-color: rgba(23, 65, 98, .14); box-shadow: 0 3px 12px rgba(23, 65, 98, .08); }
.top-frame--paper .pillar:hover { box-shadow: 0 10px 24px rgba(23, 65, 98, .16); }

/* 背景を持つブロック（枠・帯）が連続するときは、間の地色の隙間をなくして地続きに見せる */
.top-frame + .top-band,
.top-band + .top-band,
.top-band + .top-frame,
.top-frame + .top-frame,
.top-band + .depth-block,
.top-frame + .depth-block { margin-top: 0; }
/* 1ブロック扱いの箱の中では、帯どうしの隙間も作らない */
.depth-block > .top-band { margin-top: 0; }
/* 隣り合う境目は罫線が二重になるので片方を消す */
.top-frame + .top-band { border-top: 0; }
.top-frame--paper + .top-band { margin-top: 0; }