@charset "UTF-8";
/* =========================================================
D案 FIELD LOG ／ 全ページ共通の基底
   ---------------------------------------------------------
   トップ（plan_d.scss）と下層（lower_d.scss）が @use する土台。
   トークン・リセット・ヘッダー／フッター・台帳の表・セクション見出し・
   検索モーダル／ドロワーなど、どのページにも出るものだけを置く。

   - 紙・インク・朱の3色。朱は「押す場所」にだけ使う
   - 紙は paper／kraft の2階調。節目は地色で刻む
   - 写真は必ず 3:2 ＋ 撮影地・日付・実測値のキャプション付き。
     全カットに同じ階調補正をかけて、1人の撮影者の仕事に見せる
   - 宿とギアは「カードの並び」ではなく「表」。比較して決めるための形
   - 数字とキャプションはモノスペース（tabular-nums）
   ========================================================= */
/* 2階調目の紙。セクションの節目に敷く */
/* kraft 地でも AA（5.2:1）を満たす濃さ */
/* 朱。紙地 5.3:1・kraft 4.9:1・白文字 6.1:1 */
/* インク地の上の朱（珊瑚）。ink 上 6.4:1 */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 16px;
  line-height: 1.95;
  color: #1c1a16;
  background: #f2efe9;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
/* hidden は「いまは出さない」という状態であって、見た目の指定ではない。
   display を持つクラス（.citygame_auth_form の display:flex など）が
   当たっていると打ち消されて、隠したはずのものが出てしまう。
   実際、ゲームのログイン枠で「新規登録」タブを選んでいないのに
   登録フォームがログインフォームの真下に出たままになっていた
   （ニックネーム／メールアドレス／パスワードが、ログインボタンの
   すぐ下に境目なく続いて見えた）。
   状態は見た目に勝たせる。 */
[hidden] {
  display: none !important;
}
/* 下線は引かない。見出しやカードの中まで下線が出ると、紙面が線だらけになって
   どれが押す場所なのか逆に分からなくなる。
   押せることは「朱」で示し、指を乗せたときだけ下線を出す。
   読みものの本文だけは、文中のリンクに下線を残す（.ld_body / .article_body 側で指定）。 */
a {
  color: inherit;
  text-decoration: none;
}
h1, h2, h3, h4, p, figure, dl, dd {
  margin: 0;
}
/* リストは一度まっさらにする。
   ブラウザ既定の padding-left（40px）が残ると、一覧やカードを並べた ul だけが
   見出し・本文より内側にずれて、左右の余白が食い違って見える。
   実際そうなっているページが複数あった。箇条書きが要る本文側
   （.ld_body / .article_body など）で、そこだけ戻す。 */
ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
table {
  border-collapse: collapse;
}
/* 全カットに同じ階調。iPhoneの記録写真を1人の仕事に揃える */
.pd_grade {
  filter: saturate(0.88) contrast(1.06) brightness(1.01);
}
.pd_wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 36px;
}
@media (max-width: 900px) {
.pd_wrap {
    padding: 0 24px;
  }
}
@media (max-width: 640px) {
.pd_wrap {
    padding: 0 16px;
  }
}
/* ---------- 台帳のヘッダー行 ---------- */
.pd_ticker {
  background: #1c1a16;
  color: #f2efe9;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.pd_ticker_inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 7px 36px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
.pd_ticker_inner {
    padding: 6px 16px;
    gap: 12px;
    font-size: 10px;
  }
}
.pd_ticker_inner span {
  color: #a9a49a;
}
.pd_ticker_inner b {
  font-weight: 500;
}
.pd_ticker_inner a {
  margin-left: auto;
  color: #fff;
  background: #b5331a;
  text-decoration: none;
  padding: 3px 12px;
  letter-spacing: 0.08em;
}
.pd_ticker_inner a:hover {
  background: #f47a55;
  color: #1c1a16;
}
@media (max-width: 640px) {
.pd_ticker_inner a {
    margin-left: 0;
  }
}
/* ---------- header ---------- */
.pd_header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #f2efe9;
  border-bottom: 1px solid #1c1a16;
}
.pd_header_inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 36px;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 30px;
}
@media (max-width: 900px) {
.pd_header_inner {
    padding: 0 24px;
  }
}
@media (max-width: 640px) {
.pd_header_inner {
    height: 58px;
    padding: 0 8px 0 16px;
    gap: 10px;
  }
}
.pd_logo {
  text-decoration: none;
  line-height: 1.1;
  white-space: nowrap;
}
.pd_logo strong {
  display: block;
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(18px, 2.2vw, 23px);
  letter-spacing: 0.04em;
}
.pd_logo span {
  display: block;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: #615c51;
  margin-top: 1px;
}
.pd_nav {
  display: flex;
  gap: 24px;
  margin-left: auto;
}
@media (max-width: 900px) {
.pd_nav {
    display: none;
  }
}
.pd_nav a {
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.pd_nav a:hover {
  border-bottom-color: #b5331a;
  color: #b5331a;
}
.pd_tools {
  display: flex;
  align-items: center;
  gap: 2px;
}
@media (max-width: 900px) {
.pd_tools {
    margin-left: auto;
  }
}
.pd_icon {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
  font: inherit;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd_icon svg {
  width: 19px;
  height: 19px;
}
.pd_icon:hover svg path, .pd_icon:hover svg circle {
  stroke: #b5331a;
}
/* ---------- 大きい1本＋罫線リスト ----------
   トップの更新履歴と、連載アーカイブの両方で使う組み。 */
.pd_update_grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(24px, 3.4vw, 56px);
}
@media (max-width: 900px) {
.pd_update_grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
.pd_feature {
  display: block;
  text-decoration: none;
}
.pd_feature:hover .pd_feature_ttl {
  color: #b5331a;
}
.pd_feature_img {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #1c1a16;
}
@media (max-width: 640px) {
.pd_feature_img {
    aspect-ratio: 4/3;
  }
}
.pd_feature_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pd_feature_meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 16px 0 8px;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: #615c51;
}
.pd_feature_meta em {
  font-style: normal;
  color: #b5331a;
  letter-spacing: 0.1em;
}
.pd_feature_ttl {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-size: clamp(21px, 3.1vw, 34px);
  line-height: 1.55;
}
.pd_feature_text {
  font-size: 13.5px;
  line-height: 2.05;
  color: #57544c;
  margin-top: 10px;
}
/* 施設の設備一覧（なっぷ由来・1施設あたり20項目前後）。
   ラベルを並べる形にする。文章で書くと読み飛ばされるし、
   20項目を縦に積むと DATA 欄だけが異様に長くなる。 */
.ld_amen {
  padding: 14px 16px 16px;
  border-top: 1px solid #d9d4c8;
}
.ld_amen_ttl {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #615c51;
  font-weight: 500;
  margin-bottom: 9px;
}
.ld_amen_list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ld_amen_list li {
  font-size: 11.5px;
  line-height: 1.5;
  color: #57544c;
  border: 1px solid #d9d4c8;
  background: #f2efe9;
  padding: 3px 8px;
}
/* 予約の仕組みが無い施設（道の駅・SA/PA）の「取扱」欄。
   ボタンを置かない代わりに、なぜ無いのかを一言で置く。
   隣の行にボタンがあるので、空欄のままだと抜け落ちに見える。 */
.pd_btn_none {
  display: inline-block;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: #615c51;
}
.pd_side_list {
  border-top: 1px solid #1c1a16;
}
.pd_side_item {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #d9d4c8;
  text-decoration: none;
}
.pd_side_item:hover h3 {
  color: #b5331a;
}
@media (max-width: 640px) {
.pd_side_item {
    grid-template-columns: 84px 1fr;
  }
}
.pd_side_item {
  /* 写真の無い記事も並ぶ（更新履歴は全連載から新しい順に拾うので、
     サムネ未設定の回が混ざる）。2 列のまま出すと見出しが 104px の列に
     落ちて数文字ずつ縦に折れるので、そのときは列を作らない。 */
}
.pd_side_item:not(:has(.pd_side_shot)) {
  grid-template-columns: 1fr;
}
.pd_side_item div.pd_side_shot {
  aspect-ratio: 3/2;
  overflow: hidden;
  background: #d9d4c8;
}
.pd_side_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pd_side_item small {
  display: flex;
  gap: 10px;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  color: #615c51;
  letter-spacing: 0.04em;
}
.pd_side_item small em {
  font-style: normal;
  color: #b5331a;
}
.pd_side_item {
  /* 見出しは 2 行で打ち切る。更新履歴は「何が増えたか」を拾い読みする場所で、
     ここで全文を読ませる必要はない。行数がそろわないと、右の列だけ
     ガタガタに伸びて特集との視線の往復がしにくくなる。 */
}
.pd_side_item h3 {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.7;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
/* 5・6 件目は、特集と横に並んでいるとき（901px 以上）だけ出す。
   1 カラムに畳んだあとは、特集の下に 6 件が続いて更新履歴だけで
   1 画面を使い切ってしまうので 4 件に戻す。
   DOM には 6 件とも残るので、内部リンクとしては画面幅に関係なく不変。 */
@media (max-width: 900px) {
.pd_side_item:nth-child(n+5) {
    display: none;
  }
}
.pd_cap {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  line-height: 1.7;
  color: #615c51;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  padding-top: 7px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.pd_cap b {
  font-weight: 500;
  color: #57544c;
}
.pd_cap em {
  font-style: normal;
  color: #b5331a;
}
.pd_intro {
  padding: clamp(26px, 3.4vw, 46px) 0 clamp(6px, 1vw, 12px);
  font-size: 14.5px;
  line-height: 2.15;
  color: #57544c;
}
/* ---------- 検索（1行） ---------- */
.pd_search_head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: clamp(18px, 2.4vw, 28px) 0 10px;
}
.pd_search_head strong {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: #b5331a;
}
.pd_search_head h2 {
  font-size: 13px;
  font-weight: 500;
}
.pd_search_head span {
  margin-left: auto;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
  letter-spacing: 0.04em;
}
.pd_search {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr auto;
  border-bottom: 1px solid #1c1a16;
  border-top: 1px solid #1c1a16;
  background: #fbfaf7;
}
@media (max-width: 900px) {
.pd_search {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
.pd_search {
    grid-template-columns: 1fr;
  }
}
.pd_field {
  padding: 13px 18px;
  border-right: 1px solid #d9d4c8;
}
@media (max-width: 640px) {
.pd_field {
    border-right: 0;
    border-bottom: 1px solid #d9d4c8;
  }
}
.pd_field label {
  display: block;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #615c51;
  margin-bottom: 2px;
}
.pd_field select, .pd_field input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: #1c1a16;
}
.pd_field select::placeholder, .pd_field input::placeholder {
  color: #b3ada1;
  font-weight: 400;
}
.pd_field select:focus, .pd_field input:focus {
  outline: 0;
}
.pd_go {
  border: 0;
  background: #b5331a;
  color: #fff;
  cursor: pointer;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  padding: 0 34px;
}
.pd_go:hover {
  background: #1c1a16;
}
@media (max-width: 900px) {
.pd_go {
    grid-column: 1/-1;
    padding: 15px;
  }
}
/* ---------- セクション見出し（左寄せ・番号つき） ---------- */
.pd_sec {
  padding: clamp(46px, 6.5vw, 92px) 0 0;
}
.pd_sec_head {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 2px solid #1c1a16;
  margin-bottom: 4px;
}
@media (max-width: 640px) {
.pd_sec_head {
    grid-template-columns: auto 1fr;
  }
}
.pd_sec_head {
  /* 罫線の左端だけ朱。台帳のインデックスタブの見立て */
}
.pd_sec_head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 72px;
  height: 2px;
  background: #b5331a;
}
.pd_no {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: clamp(15px, 1.8vw, 19px);
  font-weight: 500;
  color: #b5331a;
  letter-spacing: 0.08em;
}
.pd_sec_title {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: 0.02em;
}
/* ---------- 地色の段（kraft）：セクションの節目を紙の階調で刻む ---------- */
.pd_tone {
  background: #ebe6db;
  margin-top: clamp(46px, 6.5vw, 92px);
  padding: clamp(46px, 6.5vw, 92px) 0;
}
.pd_tone .pd_sec {
  padding-top: 0;
}
.pd_tone .pd_sec + .pd_sec {
  padding-top: clamp(46px, 6.5vw, 92px);
}
.pd_tone .pd_area_block, .pd_tone .pd_spots a {
  background: #fbfaf7;
}
.pd_tone .pd_area, .pd_tone .pd_spots {
  background: #d9d4c8;
}
.pd_tone .pd_ledger tbody tr:hover, .pd_tone .pd_spots a:hover {
  background: #fff;
}
.pd_tone .pd_maruko {
  background: #f2efe9;
}
.pd_sec_note {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
@media (max-width: 640px) {
.pd_sec_note {
    grid-column: 2;
    white-space: normal;
  }
}
.pd_sec_lead {
  font-size: 13.5px;
  line-height: 2;
  color: #57544c;
  max-width: 640px;
  padding: 14px 0 22px;
}
/* ---------- 台帳（宿・ギア共通の行） ----------
   列幅は固定で配分する。auto に任せると、行動の列（ボタン）が幅を取って
   施設名の列が痩せ、名前が何行にも折り返してしまう。 */
/* 台帳（この案の背骨）。トップでも一覧でも同じ組みで並べる。
   以前はトップ側に colgroup が無く、列が均等割り（188px ずつ）になっていて、
   同じ「泊まった場所の台帳」なのに一覧ページとまったく別の見た目になっていた。
   列の幅はここで決め、colgroup が無い表にも同じ幅が当たるようにする。 */
.pd_ledger {
  width: 100%;
  font-size: 14px;
  table-layout: fixed;
}
@media (max-width: 900px) {
.pd_ledger {
    table-layout: auto;
  }
}
.pd_ledger col.pd_col_shot {
  width: 150px;
}
.pd_ledger col.pd_col_meta {
  width: 144px;
}
.pd_ledger col.pd_col_price {
  width: 90px;
}
.pd_ledger col.pd_col_act {
  width: 184px;
}
.pd_ledger col.pd_col_tag {
  width: 96px;
}
.pd_ledger col.pd_col_stat {
  width: 150px;
}
.pd_ledger {
  /* colgroup を持たない表（トップの2つ）への保険。
     先頭＝写真、末尾＝行動、という並びはどの台帳でも変わらない。 */
}
.pd_ledger:not(:has(colgroup)) th:first-child, .pd_ledger:not(:has(colgroup)) td:first-child {
  width: 150px;
}
.pd_ledger:not(:has(colgroup)) th:last-child, .pd_ledger:not(:has(colgroup)) td:last-child {
  width: 184px;
}
/* 数字を添える列（ゲームの規模など）。数字だけモノスペースで立たせる */
.pd_c_stat {
  line-height: 2;
  white-space: normal;
}
.pd_c_stat b {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 15px;
  font-weight: 500;
  color: #1c1a16;
  font-variant-numeric: tabular-nums;
}
.pd_ledger thead th {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #615c51;
  text-align: left;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid #d9d4c8;
  white-space: nowrap;
}
@media (max-width: 900px) {
.pd_ledger thead th {
    display: none;
  }
}
.pd_ledger tbody tr {
  border-bottom: 1px solid #d9d4c8;
}
.pd_ledger tbody tr:hover {
  background: #fbfaf7;
}
@media (max-width: 900px) {
.pd_ledger tbody tr {
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 0 16px;
    padding: 16px 0;
    align-items: start;
  }
}
@media (max-width: 640px) {
.pd_ledger tbody tr {
    grid-template-columns: 84px 1fr;
  }
}
/* 行の高さは写真で決まるようにして、上端でそろえる。
   中央ぞろえのままだと、説明の長い行だけが背伸びして、隣の行と
   写真の位置がずれていた（実測で最大 86px の差）。 */
.pd_ledger td {
  padding: 16px 12px 16px 0;
  vertical-align: top;
}
@media (max-width: 900px) {
.pd_ledger td {
    padding: 0;
  }
}
.pd_c_shot {
  width: 150px;
}
@media (max-width: 900px) {
.pd_c_shot {
    grid-row: 1/span 5;
    width: auto;
  }
}
.pd_c_shot div {
  aspect-ratio: 3/2;
  overflow: hidden;
  background: #d9d4c8;
}
.pd_c_shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pd_c_name {
  /* 施設名は長いものが多い。折り返すときは文節で切る（auto-phrase 非対応でも
     anywhere にはせず、単語の途中では切らない） */
}
.pd_c_name h2, .pd_c_name h3 {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(15px, 1.75vw, 18px);
  line-height: 1.5;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
  /* 名前は削らない（何の場所か分からなくなる）。ただし 3 行で頭打ちにして、
     長い名前の行だけが突出して伸びるのを抑える。 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.pd_c_name {
  /* 説明は 2 行まで。写真 150x100 に対して文字が多すぎると、
     行ごとに高さが変わって台帳の目が揃わない。 */
}
.pd_c_name p {
  font-size: 12.5px;
  line-height: 1.8;
  color: #57544c;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.pd_ledger tr:hover .pd_c_name h2, .pd_ledger tr:hover .pd_c_name h3 {
  color: #b5331a;
}
.pd_c_name {
  /* 表の中の見出しリンクは下線を出さない（罫線と競合して密に見える） */
}
.pd_c_name h2 a, .pd_c_name h3 a {
  text-decoration: none;
}
.pd_c_name h2 a:hover, .pd_c_name h3 a:hover {
  color: #b5331a;
}
.pd_c_meta {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  color: #615c51;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
@media (max-width: 900px) {
.pd_c_meta {
    white-space: normal;
    margin-top: 6px;
  }
}
.pd_c_price {
  white-space: nowrap;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.pd_c_price b {
  font-size: clamp(17px, 2.2vw, 21px);
  font-weight: 500;
}
.pd_c_price span {
  font-size: 10.5px;
  color: #615c51;
  margin-left: 3px;
}
.pd_c_price {
  /* 文言で入っている料金（「1泊3,000円／1台」など）は数字より長い。
     金額と同じ大きさで出すと列からはみ出すので、そこだけ本文寄りの大きさに。 */
}
.pd_c_price b.pd_fee_text {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.6;
  white-space: normal;
  display: block;
}
@media (max-width: 900px) {
.pd_c_price {
    margin-top: 8px;
  }
}
.pd_yes {
  color: #b5331a;
  font-weight: 500;
}
.pd_no_mark {
  color: #615c51;
}
/* 出典。「行って確かめたものだけ断定する」という約束を守りながら空欄を減らすため、
   外から調べた値には必ず出どころを添える（実体験には付けない＝それが既定だから）。
   読むのは値のほうなので、出典は添え字くらいの重さにとどめる。 */
.pd_src {
  display: block;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
  letter-spacing: 0.02em;
  color: #615c51;
  opacity: 0.75;
  margin: 1px 0 0;
  white-space: nowrap;
}
.pd_c_price .pd_src {
  margin-left: 0;
}
/* 行動の列。ボタンを横に並べると名前の列が痩せて施設名が折り返すので、
   主ボタン（予約）を上に、補助リンクはその下に小さく積む。 */
/* 行動列。押してほしい先（朱）は幅いっぱいで 1 本、
   補助の行き先は小さく横に並べる。
   以前は補助まで縦に積んでいたため、リンクが 4 本ある行だけ高さが 196px に
   なり、1 本の行（125px）と並ぶと写真の位置がばらばらに見えていた。 */
.pd_c_act {
  text-align: right;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: flex-start;
  gap: 6px;
  /* 押してほしい先は幅いっぱいで 1 本 */
}
.pd_c_act .pd_btn {
  display: block;
  text-align: center;
  white-space: nowrap;
  flex: 1 0 100%;
}
.pd_c_act {
  /* 「PR」は行を独り占めして右端に置きたいが、枠まで横いっぱいに伸びると
     空の入力欄のように見える。枠は文字に沿わせ、箱だけを行幅にする。 */
}
.pd_c_act .pd_pr {
  flex: 1 0 100%;
  margin: 0;
  text-align: right;
  border: 0;
  padding: 0;
  background: transparent;
}
.pd_c_act .pd_pr span, .pd_c_act .pd_pr {
  line-height: 1.2;
}
.pd_c_act {
  /* 補助の行き先は小さく、横に並べる（入りきらなければ折り返す） */
}
.pd_c_act .pd_btn.is_ghost {
  flex: 0 1 auto;
  border-color: #d9d4c8;
  color: #57544c;
  font-weight: 500;
  font-size: 10.5px;
  padding: 6px 10px;
}
.pd_c_act .pd_btn.is_ghost:hover {
  background: transparent;
  border-color: #1c1a16;
  color: #1c1a16;
}
@media (max-width: 900px) {
.pd_c_act {
    text-align: left;
    margin-top: 10px;
  }
.pd_c_act .pd_btn {
    display: inline-block;
    margin-top: 6px;
    margin-right: 6px;
  }
}
.pd_btn {
  display: inline-block;
  text-decoration: none;
  background: #b5331a;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 10px 20px;
}
.pd_btn:hover {
  background: #1c1a16;
}
.pd_btn.is_ghost {
  background: transparent;
  color: #1c1a16;
  border: 1px solid #1c1a16;
}
.pd_btn.is_ghost:hover {
  background: #1c1a16;
  color: #f2efe9;
}
.pd_pr {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: #615c51;
  border: 1px solid #d9d4c8;
  padding: 1px 5px;
  vertical-align: 2px;
  margin-left: 6px;
}
.pd_note_small {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  line-height: 1.9;
  color: #615c51;
  padding-top: 16px;
}
.pd_more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-top: 20px;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  border-bottom: 1px solid #1c1a16;
  padding-bottom: 3px;
}
.pd_more:hover {
  color: #b5331a;
  border-bottom-color: #b5331a;
}
/* ---------- ギアの台帳 ---------- */
.pd_gear_stores {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 900px) {
.pd_gear_stores {
    justify-content: flex-start;
  }
}
.pd_store {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid #d9d4c8;
  padding: 5px 9px;
  color: #57544c;
}
.pd_store:hover {
  border-color: #1c1a16;
  color: #1c1a16;
}
.pd_store.is_main {
  background: #b5331a;
  border-color: #b5331a;
  color: #fff;
  font-weight: 500;
}
.pd_store.is_main:hover {
  background: #1c1a16;
  border-color: #1c1a16;
}
/* ---------- 連載（罫線リスト） ---------- */
.pd_series {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(24px, 4vw, 56px);
}
@media (max-width: 640px) {
.pd_series {
    grid-template-columns: 1fr;
  }
}
.pd_series_item {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #d9d4c8;
  text-decoration: none;
}
.pd_series_item:hover h3 {
  color: #b5331a;
}
@media (max-width: 640px) {
.pd_series_item {
    grid-template-columns: 76px 1fr;
  }
}
.pd_series_item div.pd_series_shot {
  aspect-ratio: 3/2;
  overflow: hidden;
  background: #d9d4c8;
}
.pd_series_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pd_series_item h3 {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
}
.pd_series_item p {
  font-size: 11.5px;
  color: #57544c;
  line-height: 1.7;
  margin-top: 2px;
}
.pd_series_item em {
  font-style: normal;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
  white-space: nowrap;
}
@media (max-width: 640px) {
.pd_series_item em {
    display: none;
  }
}
/* ---------- 記録（最新記事） ---------- */
.pd_records {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(24px, 4vw, 56px);
}
@media (max-width: 900px) {
.pd_records {
    grid-template-columns: 1fr;
  }
}
.pd_record_main {
  text-decoration: none;
  display: block;
}
.pd_record_main:hover h3 {
  color: #b5331a;
}
.pd_record_img {
  aspect-ratio: 3/2;
  overflow: hidden;
  background: #d9d4c8;
}
.pd_record_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pd_record_main h3 {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(19px, 2.6vw, 27px);
  line-height: 1.6;
  margin: 14px 0 8px;
}
.pd_record_main p {
  font-size: 13px;
  line-height: 2;
  color: #57544c;
}
.pd_record_row {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 8px 14px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid #d9d4c8;
  text-decoration: none;
}
.pd_record_row:first-child {
  border-top: 1px solid #d9d4c8;
}
.pd_record_row:hover h3 {
  color: #b5331a;
}
.pd_record_row time {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
}
.pd_record_row span {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  color: #b5331a;
  letter-spacing: 0.08em;
}
.pd_record_row h3 {
  grid-column: 1/-1;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.75;
}
@media (max-width: 640px) {
.pd_record_row {
    grid-template-columns: auto 1fr;
  }
}
/* ---------- スポット・スタンプの数字 ---------- */
.pd_spots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #d9d4c8;
  border: 1px solid #d9d4c8;
}
@media (max-width: 640px) {
.pd_spots {
    grid-template-columns: 1fr;
  }
}
.pd_spots a {
  background: #f2efe9;
  padding: 22px 22px 24px;
  text-decoration: none;
}
.pd_spots a:hover {
  background: #fbfaf7;
}
.pd_spots a:hover h3 {
  color: #b5331a;
}
.pd_spots a b {
  display: block;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 3.6vw, 38px);
  font-weight: 500;
  line-height: 1;
}
.pd_spots a h3 {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: 16px;
  margin: 10px 0 5px;
}
.pd_spots a p {
  font-size: 12.5px;
  line-height: 1.85;
  color: #57544c;
}
/* ---------- エリアからさがす（都道府県ハブへの導線） ----------
   サイトマップに990本ある /stay/?pref= 系のハブへ、トップから直接つなぐ。
   現行トップはここへ1本もリンクしていないので、クロールと評価が届いていない。 */
.pd_area {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #d9d4c8;
  border: 1px solid #d9d4c8;
}
@media (max-width: 1024px) {
.pd_area {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
.pd_area {
    grid-template-columns: 1fr;
  }
}
.pd_area_block {
  background: #f2efe9;
  padding: 16px 18px 18px;
}
.pd_area_block h3 {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: #b5331a;
  padding-bottom: 7px;
  border-bottom: 1px solid #d9d4c8;
  margin-bottom: 9px;
}
.pd_area_block h3 em {
  font-style: normal;
  float: right;
  color: #615c51;
}
.pd_area_block ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
}
.pd_area_block a {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  text-decoration: none;
  font-size: 13.5px;
}
.pd_area_block a:hover {
  color: #b5331a;
}
.pd_area_block a em {
  font-style: normal;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  color: #615c51;
  font-variant-numeric: tabular-nums;
}
.pd_area_types {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.pd_area_types a {
  text-decoration: none;
  border: 1px solid #1c1a16;
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 500;
}
.pd_area_types a:hover {
  background: #1c1a16;
  color: #f2efe9;
}
.pd_area_types a em {
  font-style: normal;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
  margin-left: 6px;
}
.pd_area_types a:hover em {
  color: #a9a49a;
}
/* ---------- よくある質問（AI・検索の引用を狙う） ---------- */
.pd_faq {
  max-width: 880px;
}
.pd_faq_item {
  padding: 18px 0;
  border-bottom: 1px solid #d9d4c8;
}
.pd_faq_item:first-child {
  border-top: 1px solid #1c1a16;
}
.pd_faq_item h3 {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.7;
}
.pd_faq_item h3::before {
  content: "Q";
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-weight: 500;
  font-size: 11px;
  color: #fff;
  background: #b5331a;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  margin-top: 2px;
}
.pd_faq_item p {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  margin-top: 9px;
  font-size: 13.5px;
  line-height: 2.05;
  color: #57544c;
}
.pd_faq_item p::before {
  content: "A";
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  color: #1c1a16;
  border: 1px solid #1c1a16;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  margin-top: 3px;
}
/* ---------- このサイトについて（書き手を明示） ---------- */
.pd_about {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(22px, 3vw, 50px);
  align-items: start;
}
@media (max-width: 640px) {
.pd_about {
    grid-template-columns: 1fr;
  }
}
.pd_about div.pd_about_shot {
  aspect-ratio: 3/2;
  overflow: hidden;
  background: #d9d4c8;
}
.pd_about img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pd_about h3 {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(17px, 2.2vw, 21px);
  margin-bottom: 10px;
}
.pd_about p {
  font-size: 13.5px;
  line-height: 2.1;
  color: #57544c;
  margin-bottom: 12px;
}
.pd_about_facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 14px;
}
.pd_about_facts span {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #57544c;
  border: 1px solid #d9d4c8;
  padding: 4px 9px;
}
/* ---------- ゲーム（1行に格下げ） ---------- */
.pd_games {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
  align-items: center;
}
.pd_games .pd_games_label {
  flex-basis: 100%;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #615c51;
  margin: 14px 0 2px;
}
.pd_games a {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11.5px;
  text-decoration: none;
  border: 1px solid #d9d4c8;
  padding: 6px 12px;
  color: #57544c;
}
.pd_games a:hover {
  border-color: #1c1a16;
  color: #1c1a16;
}
/* ---------- お知らせ ---------- */
.pd_news_row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid #d9d4c8;
  text-decoration: none;
}
.pd_news_row:first-child {
  border-top: 1px solid #d9d4c8;
}
.pd_news_row:hover p {
  color: #b5331a;
}
.pd_news_row time {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
}
.pd_news_row p {
  font-size: 13px;
  line-height: 1.8;
}
@media (max-width: 640px) {
.pd_news_row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}
/* ---------- まる子（小さく1枚） ---------- */
.pd_maruko {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  margin-top: clamp(40px, 5vw, 70px);
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
}
@media (max-width: 640px) {
.pd_maruko {
    grid-template-columns: 1fr;
  }
}
.pd_maruko div.pd_maruko_shot {
  aspect-ratio: 3/2;
  overflow: hidden;
}
.pd_maruko img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pd_maruko h3 {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(17px, 2.2vw, 21px);
  margin-bottom: 8px;
}
.pd_maruko p {
  font-size: 13px;
  line-height: 2;
  color: #57544c;
}
/* ---------- footer ---------- */
.pd_footer {
  border-top: 3px solid #1c1a16;
  margin-top: clamp(50px, 7vw, 90px);
  padding: clamp(34px, 4.6vw, 56px) 0 30px;
}
.pd_footer_top {
  display: grid;
  grid-template-columns: 0.8fr 3fr;
  gap: clamp(24px, 4vw, 48px);
}
@media (max-width: 900px) {
.pd_footer_top {
    grid-template-columns: 1fr;
  }
}
.pd_footer_logo {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: 21px;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.pd_footer_text {
  font-size: 12.5px;
  line-height: 2;
  color: #57544c;
}
.pd_footer_map {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
.pd_footer_map {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
.pd_footer_map {
    grid-template-columns: 1fr 1fr;
  }
}
.pd_footer_map h4 {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #615c51;
  margin-bottom: 8px;
}
.pd_footer_map a {
  display: block;
  font-size: 12.5px;
  text-decoration: none;
  padding: 2px 0;
}
.pd_footer_map a:hover {
  color: #b5331a;
}
.pd_footer_bottom {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: clamp(24px, 3vw, 40px);
  padding-top: 18px;
  border-top: 1px solid #d9d4c8;
}
.pd_social {
  display: flex;
  gap: 14px;
}
.pd_social svg {
  width: 17px;
  height: 17px;
}
.pd_disclosure {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  line-height: 1.9;
  color: #615c51;
  max-width: 780px;
}
.pd_copy {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #615c51;
  margin-left: auto;
}
/* =========================================================
   検索モーダル／ドロワー
   ========================================================= */
.pd_overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.pd_overlay.is_open {
  visibility: visible;
  opacity: 1;
}
.pd_overlay_bg {
  position: absolute;
  inset: 0;
  background: rgba(28, 26, 22, 0.55);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.pd_close {
  position: absolute;
  right: clamp(12px, 2vw, 28px);
  top: clamp(12px, 2vw, 24px);
  z-index: 3;
  width: 44px;
  height: 44px;
  border: 1px solid #1c1a16;
  background: #f2efe9;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd_close:hover {
  background: #1c1a16;
}
.pd_close:hover svg path {
  stroke: #f2efe9;
}
.pd_close svg {
  width: 17px;
  height: 17px;
}
.pd_search_modal .pd_overlay_panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  background: #f2efe9;
  padding: clamp(58px, 8vw, 100px) clamp(16px, 4vw, 40px) clamp(40px, 6vw, 70px);
  transform: translateY(-12px);
  transition: transform 0.3s ease;
}
.pd_search_modal.is_open .pd_overlay_panel {
  transform: none;
}
.pd_modal_body {
  max-width: 760px;
  margin: 0 auto;
}
.pd_modal_ttl {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(25px, 4vw, 40px);
  line-height: 1.4;
  margin-bottom: 6px;
}
.pd_modal_lead {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  color: #615c51;
  letter-spacing: 0.02em;
  margin-bottom: clamp(22px, 3vw, 34px);
}
.pd_modal_form {
  display: flex;
  border-bottom: 2px solid #1c1a16;
  margin-bottom: clamp(24px, 3.4vw, 38px);
}
.pd_modal_form input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 10px 2px;
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(16px, 2.6vw, 25px);
  color: #1c1a16;
}
.pd_modal_form input::placeholder {
  color: #b3ada1;
}
.pd_modal_form input:focus {
  outline: 0;
}
.pd_modal_form button {
  border: 0;
  background: #1c1a16;
  color: #f2efe9;
  cursor: pointer;
  white-space: nowrap;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  padding: 0 clamp(18px, 3vw, 32px);
}
.pd_modal_form button:hover {
  background: #b5331a;
}
.pd_modal_label {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #615c51;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pd_modal_label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #d9d4c8;
}
.pd_modal_tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(22px, 3vw, 34px);
}
.pd_modal_tags a {
  text-decoration: none;
  border: 1px solid #1c1a16;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
}
.pd_modal_tags a:hover {
  background: #1c1a16;
  color: #f2efe9;
}
.pd_modal_kinds {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #d9d4c8;
  border: 1px solid #d9d4c8;
}
@media (max-width: 640px) {
.pd_modal_kinds {
    grid-template-columns: 1fr 1fr;
  }
}
.pd_modal_kinds a {
  background: #f2efe9;
  text-decoration: none;
  padding: 14px 10px;
  text-align: center;
}
.pd_modal_kinds a:hover {
  background: #fbfaf7;
}
.pd_modal_kinds a span {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
}
.pd_modal_kinds a small {
  display: block;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  color: #615c51;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.pd_drawer .pd_overlay_panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(420px, 100%);
  overflow-y: auto;
  background: #f2efe9;
  border-left: 1px solid #1c1a16;
  padding: clamp(58px, 8vw, 80px) clamp(20px, 4vw, 32px) 40px;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.pd_drawer.is_open .pd_overlay_panel {
  transform: none;
}
.pd_drawer_ttl {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: 25px;
  margin-bottom: 4px;
}
.pd_drawer_lead {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
  margin-bottom: 24px;
}
.pd_drawer_group {
  margin-bottom: 20px;
}
.pd_drawer_group h3 {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #615c51;
  padding-bottom: 6px;
  border-bottom: 1px solid #1c1a16;
  margin-bottom: 4px;
}
.pd_drawer_group a {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  padding: 8px 0;
  font-size: 14.5px;
  border-bottom: 1px solid #d9d4c8;
}
.pd_drawer_group a:hover {
  color: #b5331a;
}
.pd_drawer_group a em {
  font-style: normal;
  margin-left: auto;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  color: #615c51;
  font-variant-numeric: tabular-nums;
}
.pd_drawer_note {
  display: block;
  background: #1c1a16;
  color: #f2efe9;
  text-decoration: none;
  padding: 16px 18px;
  margin: 22px 0 0;
}
.pd_drawer_note strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
}
.pd_drawer_note span {
  display: block;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  color: #f47a55;
  margin-top: 4px;
  letter-spacing: 0.06em;
}
.pd_drawer_note:hover {
  background: #b5331a;
}
/* =========================================================
   ページ遷移
   ---------------------------------------------------------
   台帳に新しい紙を送り込む見立て。二段構えにしてある。

   1) 入場（CSS だけ）
      ページが表示されるたびに必ず走る。ブラウザが View Transitions に
      対応していなくても、OS で「視覚効果を減らす」が入っていても、
      ここだけは動く。前に入れた View Transitions 一本槍の作りでは、
      減らす設定の環境で遷移がまったく見えなかった。
      紙が下から送られ、見出しの罫線が左から引かれ、台帳の行が
      上から順に埋まっていく。
   2) 重なり（Chromium 系の View Transitions）
      前のページと次のページが重なる区間を作り、1) につなげる。
      白い一瞬を挟まないので、めくって差し替えたように見える。

   「減らす」設定のときは動きを消さず、距離と時間を詰める。
   ========================================================= */
/* 次の面が、すっと入れ替わる。それだけ。

   はじめは紙をめくる 3D の動きを入れていたが、押してから実際に移るまで
   0.5 秒近く待たせることになり、動き自体も何が起きたか読み取りにくかった。
   遷移の演出は、速い人の邪魔をしないのが第一。退場は作らず（押したら即移動）、
   入ってきた面が短く立ち上がるだけにしてある。 */
@keyframes pd_paper_in {
0% {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes pd_rule_draw {
from {
    transform: scaleX(0);
  }
to {
    transform: scaleX(1);
  }
}
@keyframes pd_row_in {
from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
to {
    opacity: 1;
    transform: none;
  }
}
/* fill-mode は backwards。forwards で transform を残すと、終わったあとも
main が containing block のままになり、中の position: sticky（.ld_side）が
   効かなくなる。ヘッダー自身も sticky なので、こちらは動かさない。 */
main {
  animation: pd_paper_in 0.3s cubic-bezier(0.16, 0.84, 0.31, 1) backwards;
}
.pd_footer {
  animation: pd_paper_in 0.3s cubic-bezier(0.16, 0.84, 0.31, 1) 0.06s backwards;
}
/* 横スクロールが生えないよう抑える
   （clip は overflow: hidden と違い、position: sticky を殺さない）。 */
body {
  overflow-x: clip;
}
/* 見出しの朱の線は、紙が止まってから左へ引く。
   すでにある線を使うので、罫線が増えることはない。 */
.pd_sec_title::after, .section_title_light::after, .about_section_title::after {
  transform-origin: left center;
  animation: pd_rule_draw 0.46s cubic-bezier(0.16, 0.84, 0.31, 1) 0.26s backwards;
}
/* 台帳は上から順に記入されていく。全行やると重いので頭の数行だけ */
.pd_ledger tbody tr:nth-child(-n+8) {
  animation: pd_row_in 0.42s cubic-bezier(0.16, 0.84, 0.31, 1) backwards;
}
.pd_ledger tbody tr:nth-child(1) {
  animation-delay: 0.205s;
}
.pd_ledger tbody tr:nth-child(2) {
  animation-delay: 0.25s;
}
.pd_ledger tbody tr:nth-child(3) {
  animation-delay: 0.295s;
}
.pd_ledger tbody tr:nth-child(4) {
  animation-delay: 0.34s;
}
.pd_ledger tbody tr:nth-child(5) {
  animation-delay: 0.385s;
}
.pd_ledger tbody tr:nth-child(6) {
  animation-delay: 0.43s;
}
.pd_ledger tbody tr:nth-child(7) {
  animation-delay: 0.475s;
}
.pd_ledger tbody tr:nth-child(8) {
  animation-delay: 0.52s;
}
/* 「視覚効果を減らす」が入っている環境。動きを消すのではなく、
   移動をやめて明るさの変化だけにする。行が順に出るのと罫線を引くのは止める。 */
@media (prefers-reduced-motion: reduce) {
main, .pd_footer {
    animation-duration: 0.24s;
    animation-delay: 0s;
  }
.pd_sec_title::after, .section_title_light::after, .about_section_title::after {
    animation: none;
  }
.pd_ledger tbody tr:nth-child(-n+8) {
    animation: none;
  }
@keyframes pd_paper_in {
0% {
      opacity: 0;
    }
100% {
      opacity: 1;
    }
  }
}
.is_locked {
  overflow: hidden;
}
.pd_visually_hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* 縦長の写真を横長の小さな枠に入れると、上下が半分切れて何の写真か分からなくなる。
   人や道具は画面の上寄りに写っていることが多いので、切る位置を上に寄せる。
   （トップの更新履歴と連載のサムネイルで、900x1200 の写真が 50% 切れていた） */
.pd_side_shot img, .pd_series_shot img, .pd_record_img img, .archive_thumb img, .ld_near_shot img {
  object-position: center 32%;
}
/* ---------------------------------------------------------
   台帳の料金列と、セクションの間合いの調整（実測して直したもの）
   --------------------------------------------------------- */
/* 料金は 90px の列。「4, 500円〜／泊」を一行で書こうとして
   単位の部分が隣の行動列へ 18px はみ出し、ボタンの文字と重なっていた。
   単位は数字の下へ回す。 */
.pd_c_price {
  white-space: normal;
}
.pd_c_price b {
  display: block;
  line-height: 1.25;
}
.pd_c_price span {
  display: block;
  margin-left: 0;
  margin-top: 1px;
  line-height: 1.5;
}
/* セクションの間合いが 0〜180px までばらついていて、
   どこで話が変わったのかが読み取りにくかった。一定の間合いにそろえる。
   （インク地の帯だけは、地の色そのものが区切りになるので詰める） */
.pd_sec {
  padding-top: clamp(50px, 6.4vw, 88px);
}
.pd_sec + .pd_sec {
  padding-top: clamp(50px, 6.4vw, 88px);
}
.pd_note_block + .pd_sec, .pd_band + .pd_sec {
  padding-top: clamp(40px, 5vw, 64px);
}
/* ---- 現行テーマから受け継ぐ組み方（legacy_layout.scss・自動生成） ----
       D案 の前に置く。D案 が自分で組んでいるところは D案 が勝ち、
       組み忘れているところだけ現行の組み方が効く。
       動画一覧の 3 列やカードの縦積みなど、実績のあるレイアウトを
       取りこぼして崩していた箇所が、これでまとめて埋まる。 */
/* ============================================================
   現行テーマから受け継ぐ「組み方」だけの層
   （build_legacy_layout.py が lower.css から生成。手で直さない）

   幅・高さ・並べ方・余白・重なりだけを持ち込み、
   色・背景・境界線・角丸・影・書体は持ち込まない。
   見た目は D案 が決め、組み方はここが決める、という住み分け。
   ============================================================ */
.page_head_inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 40px;
}
.breadcrumb_list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
}
.breadcrumb_item[aria-current=page] {
  overflow: hidden;
  white-space: nowrap;
  max-width: 32em;
}
.breadcrumb_item + .breadcrumb_item::before {
  margin: 0 10px;
}
.page_head_eyebrow {
  margin-top: 34px;
}
.page_head_eyebrow::before {
  display: inline-block;
  width: 28px;
  height: 1px;
  margin-right: 12px;
  vertical-align: 4px;
}
.page_head_title {
  margin-top: 14px;
  line-height: 1.5;
}
.page_head_lead {
  margin-top: 16px;
  line-height: 2.1;
}
.archive {
  padding: 72px 0 110px;
}
.archive_inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 40px;
}
.archive_intro {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 48px;
  padding: 28px;
}
.archive_intro_photo {
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  object-fit: cover;
}
.archive_intro_name {
  display: flex;
  align-items: center;
  gap: 8px;
}
.archive_intro_text {
  margin-top: 8px;
  line-height: 2;
}
.archive_link {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding: 26px 8px;
}
.archive_thumb {
  flex-shrink: 0;
  width: 168px;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.archive_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.archive_thumb_none {
  display: flex;
  align-items: center;
  justify-content: center;
}
.archive_body {
  flex-grow: 1;
  min-width: 0;
}
.archive_meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.archive_cat {
  padding: 1px 12px;
}
.archive_title {
  margin-top: 10px;
  line-height: 1.8;
}
.archive_excerpt {
  margin-top: 8px;
  line-height: 1.9;
  overflow: hidden;
}
.archive_empty {
  padding: 64px 24px;
  text-align: center;
}
.archive_empty_text {
  line-height: 2;
}
.archive_empty_link {
  margin-top: 20px;
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 52px;
}
.pagination_link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
}
.article {
  padding: 64px 0 110px;
}
.article_inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 40px;
}
.article_meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.article_cat {
  padding: 1px 14px;
}
.article_title {
  margin-top: 18px;
  line-height: 1.7;
}
.article_body .profile_relate figure, .article_body .profile_feed figure, .article_body .profile_cast figure, .article_body .profile_links figure {
  margin: 0;
}
.article_body .profile_relate p, .article_body .profile_feed p, .article_body .profile_cast p, .article_body .profile_links p {
  margin-top: 0;
}
.article_body .profile_relate ul, .article_body .profile_relate ol, .article_body .profile_feed ul, .article_body .profile_feed ol, .article_body .profile_cast ul, .article_body .profile_cast ol, .article_body .profile_links ul, .article_body .profile_links ol {
  margin-top: 0;
  padding-left: 0;
}
.mv-mod-h2 {
  margin-top: 2.6em;
  padding-bottom: 12px;
  line-height: 1.6;
}
.mv-mod-table {
  margin-top: 1.8em;
  overflow-x: auto;
}
.mv-mod-table table {
  width: 100%;
  border-collapse: collapse;
  line-height: 1.9;
}
.mv-mod-table th, .mv-mod-table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
}
.mv-mod-table th {
  width: 30%;
  min-width: 7em;
}
.mv-mod-table p {
  margin-top: 0;
  line-height: inherit;
}
.maker_related {
  margin-top: 60px;
}
.maker_related .section_title {
  padding-bottom: 12px;
}
.maker_related .maker_grid {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 24px;
}
.article_lead {
  margin-top: 22px;
  padding: 20px 24px;
  line-height: 2.1;
}
.article_body {
  margin-top: 40px;
}
.article_body p {
  margin-top: 1.8em;
  line-height: 2.1;
}
.article_body h2 {
  margin-top: 2.6em;
  padding-bottom: 12px;
  line-height: 1.6;
}
.article_body figure {
  margin: 2.4em 0 0;
}
.article_body figure img {
  width: 100%;
}
.article_body figcaption {
  margin-top: 12px;
  text-align: right;
}
.article_body ul, .article_body ol {
  margin-top: 1.4em;
  padding-left: 1.4em;
  line-height: 2;
}
.article_body li + li {
  margin-top: 0.5em;
}
.article_body pre {
  margin-top: 2em;
  padding: 20px 22px;
  overflow-x: auto;
}
.article_body pre code {
  display: inline-block;
  min-width: 100%;
  padding: 0;
  line-height: 1.95;
  white-space: pre;
}
.article_body code {
  padding: 0.15em 0.45em;
}
.article_maruko .article_title {
  line-height: 1.9;
}
.article_maruko .article_body p {
  line-height: 2.3;
}
.article_gear {
  margin-top: 56px;
  padding: 30px 32px 28px;
}
.article_gear_title .pr_chip {
  margin-right: 0;
  margin-left: 12px;
  vertical-align: 2px;
}
.article_gear_list {
  margin-top: 6px;
}
.article_gear_item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding: 16px 0;
}
.article_gear_stores {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.article_gear_note {
  margin-top: 14px;
  line-height: 1.9;
}
.article_relate {
  margin-top: 28px;
  padding: 20px 24px;
  line-height: 2;
}
.article_share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 48px;
  padding-top: 28px;
}
.article_share_btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
}
.article_share_btn svg {
  flex-shrink: 0;
}
.article_nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
}
.article_nav_link {
  display: block;
  padding: 18px 22px;
}
.article_nav_next {
  text-align: right;
  grid-column: 2;
}
.article_nav_dir {
  display: block;
}
.article_nav_title {
  display: block;
  margin-top: 6px;
  line-height: 1.8;
}
.article_back {
  margin-top: 44px;
  text-align: center;
}
.stay_guide_page {
  padding: 64px 0 110px;
}
.stay_types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 44px;
}
.stay_type {
  padding: 24px 26px 22px;
}
.stay_type_name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.stay_type_tag {
  padding: 2px 10px;
}
.stay_type_text {
  margin-top: 12px;
  line-height: 2;
}
.stay_type_note {
  margin-top: 10px;
  line-height: 1.8;
}
.page_head_tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.facility {
  padding: 64px 0 110px;
}
.facility_inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 40px;
}
.facility_summary {
  padding: 30px 32px 26px;
}
.facility_data {
  margin: 14px 0 0;
}
.facility_data_row {
  display: flex;
  gap: 18px;
  padding: 13px 0;
  line-height: 1.9;
}
.facility_data_row dt {
  flex-shrink: 0;
  width: 7.5em;
}
.facility_data_row dd {
  margin: 0;
}
.facility_note {
  margin-top: 14px;
  line-height: 1.9;
}
.reserve_cta {
  margin-top: 56px;
  padding: 30px 32px 28px;
}
.reserve_cta_title .pr_chip {
  margin-right: 0;
  margin-left: 12px;
  vertical-align: 2px;
}
.reserve_cta_text {
  margin-top: 12px;
  line-height: 2;
}
.reserve_btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
.reserve_btn {
  display: inline-block;
  padding: 13px 30px;
}
.reserve_note {
  margin-top: 14px;
  line-height: 1.9;
}
.gear_archive {
  padding: 64px 0 110px;
}
.gear_pickup {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 40px;
  align-items: center;
  padding: 36px 40px;
}
.gear_pickup_photo {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
}
.gear_pickup_photo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.gear_pickup_photo a {
  display: contents;
}
.gear_pickup_title {
  margin-top: 10px;
  line-height: 1.6;
}
.gear_pickup_text {
  margin-top: 14px;
  line-height: 2;
}
.gear_pickup_foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}
.gear_pickup_stores {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gear_group {
  margin-top: 64px;
}
.gear_group_title {
  padding-bottom: 12px;
  line-height: 1.6;
}
.gear_group_lead {
  margin-top: 14px;
  line-height: 2;
}
.gear_group .gear_gallery {
  margin-top: 26px;
}
.gear_item_photo_none {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4/3;
}
.gear_item_more {
  display: block;
  margin-top: 12px;
  text-align: center;
}
.channel_archive {
  padding: 64px 0 110px;
}
.channel_archive_inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 40px;
}
.channel_types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
.channel_type {
  padding: 22px 24px 20px;
}
.channel_type_name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.channel_type_text {
  margin-top: 10px;
  line-height: 2;
}
.channel_gear_note {
  margin-bottom: 40px;
  padding: 20px 24px;
  text-align: center;
  line-height: 1.9;
}
.channel_gear_note .btn {
  display: inline-block;
  margin-top: 12px;
}
.channel_filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}
.channel_filter_btn {
  padding: 8px 20px;
  line-height: 1.6;
}
.channel_filter_num {
  margin-left: 6px;
}
.channel_group {
  margin-top: 56px;
}
.channel_group.is_empty {
  display: none;
}
.channel_group_title {
  padding-bottom: 12px;
  line-height: 1.6;
}
.channel_group_lead {
  margin-top: 14px;
  line-height: 2;
}
.channel_pickup {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  margin-top: 26px;
}
.channel_card {
  overflow: hidden;
}
.channel_card.is_hidden {
  display: none;
}
.channel_card_link {
  display: block;
}
.channel_card_banner img {
  width: 100%;
}
.channel_card_body {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 22px 18px;
}
.channel_card_icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  object-fit: cover;
}
.channel_card_name {
  line-height: 1.7;
}
.channel_card_note {
  margin-top: 4px;
  line-height: 1.9;
}
.channel_cat {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 10px;
  line-height: 1.8;
}
.channel_index {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 40px;
  margin-top: 26px;
}
.channel_index_item.is_hidden {
  display: none;
}
.channel_index_link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 6px;
}
.channel_index_link .channel_cat {
  flex-shrink: 0;
  margin-right: 0;
}
.channel_index_initial {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}
.channel_index_name {
  flex-grow: 1;
  min-width: 0;
  line-height: 1.7;
}
.channel_archive_note {
  margin-top: 48px;
  line-height: 1.9;
}
.channel_profile {
  padding: 64px 0 110px;
}
.channel_profile_inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 40px;
}
.profile_banner {
  overflow: hidden;
}
.profile_banner img {
  width: 100%;
}
.profile_head {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 28px;
}
.profile_icon {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  object-fit: cover;
}
.profile_title {
  line-height: 1.6;
}
.profile_meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.profile_meta .channel_cat {
  margin-right: 0;
}
.profile_desc {
  margin-top: 26px;
  padding: 20px 24px;
  line-height: 2.1;
}
.profile_text {
  margin-top: 26px;
}
.profile_text p {
  margin-top: 1.6em;
  line-height: 2.1;
}
.profile_text p:first-child {
  margin-top: 0;
}
.profile_cta {
  margin-top: 30px;
}
.page_head_channel, .page_head_maker {
  padding-bottom: 44px;
}
.page_head_channel .profile_banner, .page_head_maker .profile_banner {
  margin-top: 28px;
}
.page_head_channel .profile_head, .page_head_maker .profile_head {
  margin-top: 22px;
}
.page_head_maker .profile_head {
  margin-top: 28px;
}
.page_head_maker .profile_icon {
  object-fit: contain;
  padding: 6px;
}
.profile_links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
}
.profile_link_btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  line-height: 1.4;
}
.profile_link_btn .profile_sns_icon {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}
.profile_sns_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
}
.profile_section {
  margin-top: 60px;
}
.profile_section_title {
  padding-bottom: 12px;
  line-height: 1.6;
}
.profile_section_lead {
  margin-top: 14px;
  line-height: 2;
}
.profile_members {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}
.profile_member {
  padding: 26px 20px 24px;
  text-align: center;
}
.profile_member_icon {
  display: flex;
  justify-content: center;
}
.profile_member_name {
  margin-top: 10px;
}
.profile_member_data {
  margin-top: 6px;
  line-height: 1.9;
}
.profile_note {
  margin-top: 14px;
  line-height: 1.9;
}
.profile_videos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.profile_video {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16/9;
}
.profile_video_card {
  overflow: hidden;
}
.profile_video_link {
  display: block;
}
.profile_video_thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.profile_video_title {
  overflow: hidden;
  margin: 10px 12px 12px;
  line-height: 1.7;
}
.profile_cast {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 24px;
}
.profile_cast_item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px;
}
.profile_cast_head {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.profile_cast_photo {
  flex-shrink: 0;
  width: 96px;
  margin: 0;
}
.profile_cast_photo img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
}
.profile_cast_dl {
  margin: 0;
  min-width: 0;
}
.profile_cast_dl_head {
  flex: 1;
}
.profile_cast_dl_rest {
  margin-top: 10px;
}
.profile_cast_row {
  display: flex;
  gap: 10px;
  padding: 3px 0;
  line-height: 1.8;
}
.profile_cast_row dt {
  flex-shrink: 0;
  width: 5.5em;
}
.profile_cast_row dd {
  margin: 0;
  min-width: 0;
}
.profile_cast_row_bio {
  display: block;
}
.profile_cast_row_bio dt {
  width: auto;
  margin-bottom: 2px;
}
.profile_cast_bio summary {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.profile_cast_bio summary::-webkit-details-marker {
  display: none;
}
.profile_cast_bio summary::before {
  flex-shrink: 0;
  margin-top: 1px;
  line-height: 1.9;
}
.profile_cast_bio[open] .profile_cast_bio_peek {
  display: none;
}
.profile_cast_bio_peek {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.profile_cast_bio_text {
  margin-top: 6px;
  padding-left: 15px;
}
.profile_cast_bio_text p {
  margin-top: 0.6em;
}
.profile_cast_bio_text p:first-child {
  margin-top: 0;
}
.profile_cast_bio_text iframe, .profile_cast_bio_text img {
  max-width: 100%;
}
.profile_cast_sns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 0;
  padding: 0;
}
.profile_cast_sns_link {
  display: inline-block;
  padding: 1px 8px;
}
.profile_feed {
  margin-top: 24px;
}
.profile_feed_link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 4px;
}
.profile_feed_date {
  flex-shrink: 0;
}
.profile_feed_title {
  line-height: 1.8;
}
.profile_relate {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}
.profile_relate .channel_card_body {
  padding: 12px 16px 14px;
  gap: 12px;
}
.profile_relate .channel_card_icon {
  width: 44px;
  height: 44px;
}
.about_page {
  padding: 72px 0 110px;
}
.about_inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 40px;
}
.about_section {
  margin-top: 72px;
}
.about_section:first-child {
  margin-top: 0;
}
.about_section_title {
  padding-bottom: 12px;
  line-height: 1.6;
}
.about_text {
  margin-top: 1.8em;
  line-height: 2.1;
}
.about_pull {
  margin-top: 40px;
  padding: 30px 34px;
  line-height: 2;
}
.about_maruko {
  display: flex;
  gap: 28px;
  align-items: center;
  margin-top: 40px;
  padding: 32px 34px;
}
.about_maruko_photo {
  flex-shrink: 0;
  width: 132px;
  height: 132px;
  object-fit: cover;
}
.about_maruko_name {
  display: flex;
  align-items: center;
  gap: 8px;
}
.about_maruko_text {
  margin-top: 10px;
  line-height: 2;
}
.about_map {
  display: grid;
  gap: 14px;
  margin-top: 32px;
}
.about_map_item {
  display: block;
  padding: 22px 26px 20px;
}
.about_map_name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}
.about_map_text {
  margin-top: 6px;
  line-height: 2;
}
.about_tech_bridge {
  margin-top: 40px;
  padding: 36px 38px 34px;
}
.about_tech_bridge_title {
  margin-top: 12px;
  line-height: 1.7;
}
.about_tech_bridge_text {
  margin-top: 14px;
  line-height: 2.1;
}
.about_tech_bridge_foot {
  margin-top: 24px;
}
.about_career {
  display: grid;
  gap: 14px;
  margin-top: 32px;
}
.about_career_item {
  padding: 22px 26px 20px;
}
.about_career_name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}
.about_career_text {
  margin-top: 8px;
  line-height: 2;
}
.about_career_link {
  display: inline-block;
  margin-top: 10px;
}
.about_cms_bridge {
  margin-top: 28px;
  padding: 26px 30px 24px;
}
.about_cms_bridge_text {
  margin-top: 10px;
  line-height: 2;
}
.about_cms_bridge_foot {
  margin-top: 18px;
}
.about_cms_bridge_note {
  margin-top: 14px;
  line-height: 1.9;
}
.about_info {
  margin-top: 32px;
  padding: 30px 32px 26px;
}
.about_info_data {
  margin: 0;
}
.about_info_row {
  display: flex;
  gap: 18px;
  padding: 13px 0;
  line-height: 1.9;
}
.about_info_row dt {
  flex-shrink: 0;
  width: 7.5em;
}
.about_info_row dd {
  margin: 0;
}
.about_contact_note {
  margin-top: 14px;
  line-height: 1.9;
}
.tech_archive_page {
  padding: 64px 0 110px;
}
.tech_archive_inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 40px;
}
.tech_filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 34px;
}
.tech_filter_btn {
  padding: 8px 20px;
  line-height: 1.6;
}
.tech_filter_num {
  margin-left: 6px;
}
.tech_card.is_hidden {
  display: none;
}
.tech_archive_note {
  margin-top: 44px;
  line-height: 2;
}
.article_code {
  margin-top: 2.4em;
  overflow: hidden;
}
.article_code_label {
  padding: 9px 18px;
}
.article_code pre {
  margin: 0;
  padding: 20px 22px;
  overflow-x: auto;
}
.article_code code {
  line-height: 1.95;
}
.log_table_wrap {
  margin-top: 2.4em;
  overflow-x: auto;
}
.log_table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  line-height: 1.8;
}
.log_table th, .log_table td {
  padding: 10px 14px;
  text-align: left;
}
.log_table tbody th {
  white-space: nowrap;
}
.log_table_note {
  margin-top: 10px;
  line-height: 1.9;
}
.news_archive {
  padding: 64px 0 110px;
}
.news_archive_inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 40px;
}
.news_year {
  margin-top: 56px;
  padding-bottom: 12px;
  line-height: 1.6;
}
.news_year:first-child {
  margin-top: 0;
}
.news_page_item {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 22px 8px;
}
.news_page_date {
  flex-shrink: 0;
  width: 7em;
  padding-top: 3px;
}
.news_page_body {
  flex-grow: 1;
  min-width: 0;
}
.news_page_text {
  line-height: 2;
}
.news_page_note {
  margin-top: 6px;
  line-height: 1.9;
}
.maker_archive {
  padding: 64px 0 110px;
}
.maker_archive_inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 40px;
}
.maker_archive_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.maker_panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 26px 28px;
}
.maker_panel img {
  width: 100%;
  max-width: 220px;
  height: auto;
  object-fit: contain;
}
.maker_panel_name {
  text-align: center;
}
.maker_panel_note {
  line-height: 1.9;
  text-align: center;
}
.maker_panel_badge {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 2px 10px;
}
.maker_panel_badge_outbound {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.maker_archive_note {
  margin-top: 44px;
  line-height: 1.9;
}
.maker_profile {
  padding: 64px 0 110px;
}
.maker_profile_inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 40px;
}
.maker_hero {
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 38px 40px;
}
.maker_hero img {
  flex-shrink: 0;
  width: 200px;
  height: auto;
  object-fit: contain;
}
.maker_hero_lead {
  line-height: 2.1;
}
.maker_section {
  margin-top: 60px;
}
.maker_section_title {
  padding-bottom: 12px;
  line-height: 1.6;
}
.maker_section_text {
  margin-top: 1.6em;
  line-height: 2.1;
}
.maker_gear_list {
  display: grid;
  gap: 16px;
  margin-top: 26px;
}
.maker_gear_item {
  padding: 24px 28px 22px;
}
.maker_gear_name {
  margin-top: 6px;
  line-height: 1.7;
}
.maker_gear_text {
  margin-top: 8px;
  line-height: 2;
}
.maker_official_note {
  margin-top: 26px;
  line-height: 2;
}
.contact_lead {
  line-height: 2.1;
}
.contact_purpose {
  margin-top: 32px;
  padding: 26px 30px 24px;
}
.contact_purpose_list {
  margin-top: 12px;
  padding-left: 1.3em;
  line-height: 2;
}
.contact_purpose_list li + li {
  margin-top: 4px;
}
.contact_form {
  margin-top: 48px;
  padding: 34px 36px 32px;
}
.form_group {
  margin-top: 26px;
}
.form_group:first-child {
  margin-top: 0;
}
.form_label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.form_required, .form_optional {
  padding: 1px 8px;
}
.form_hint {
  margin-top: 6px;
  line-height: 1.8;
}
.form_input, .form_textarea {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 13px 16px;
}
.form_textarea {
  min-height: 180px;
  line-height: 1.8;
}
.form_error {
  margin-top: 8px;
}
.form_error:empty {
  display: none;
}
.form_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 36px;
  padding-top: 28px;
}
.form_checkbox_row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}
.form_checkbox_box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px;
}
.form_checkbox {
  width: 22px;
  height: 22px;
  margin: 0;
}
.form_checkbox_policy_link {
  padding: 11px 2px;
}
.form_checkbox_label {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 11px 4px;
}
.article_body .gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 2.4em 0 0;
}
.article_body .gallery.img1 {
  grid-template-columns: 1fr;
}
.article_body .gallery.img2 {
  grid-template-columns: repeat(2, 1fr);
}
.article_body .gallery.img3 {
  grid-template-columns: repeat(3, 1fr);
}
.article_body .gallery.img4 {
  grid-template-columns: repeat(4, 1fr);
}
.article_body .gallery.img5 {
  grid-template-columns: repeat(5, 1fr);
}
.article_body .gallery .gallery_set {
  margin: 0;
}
.article_body .gallery .img_wrap {
  margin: 0;
  overflow: hidden;
}
.article_body .gallery .img_wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article_body .gallery .caption {
  margin: 8px 0 0;
  line-height: 1.7;
}
.article_body .mod_movie {
  margin: 2.4em 0 0;
}
.article_body .mod_movie .mp4_wrap {
  max-width: 100%;
}
.article_body .mod_movie video {
  display: block;
  max-width: 100%;
  height: auto;
}
.spot_db_title {
  margin-top: 88px;
}
.spot_search_panel {
  margin: 18px 0 20px;
  padding: 18px 20px 16px;
}
.spot_search_panel_row + .spot_search_panel_row {
  margin-top: 14px;
}
.spot_search_panel_types .guide_filter {
  margin: 0;
  gap: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.spot_search_panel_types .guide_filter_btn {
  white-space: nowrap;
}
.guide_filter_checkbox {
  margin: 0;
  padding: 0;
}
.guide_filter_checkbox_item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  white-space: nowrap;
}
.spot_db_form {
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.spot_db_select, .spot_db_input {
  padding: 12px 16px;
  line-height: 1.4;
}
.spot_db_select {
  flex: 0 0 150px;
}
.spot_db_input {
  flex: 1 1 auto;
  min-width: 120px;
}
.spot_db_submit {
  flex: 0 0 auto;
  padding: 12px 30px;
}
.spot_search_panel_clear {
  display: inline-block;
  margin-top: 10px;
}
.spot_search_panel_aux {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.spot_db_meta {
  margin: 14px 0 20px;
}
.stay_guide_page .pagination {
  margin-top: 44px;
}
.form_page_wrap .material-symbols-outlined {
  display: none;
}
.form_steps {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 34px 0 26px;
  padding: 0;
}
.form_step {
  display: flex;
  align-items: center;
  gap: 8px;
}
.form_step + .form_step::before {
  display: inline-block;
  width: 22px;
  height: 1px;
  margin-right: 6px;
}
.form_step_num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
}
.form_page_title {
  margin-top: 6px;
}
.form_page_text {
  margin-top: 10px;
  line-height: 2;
}
.form_error_box {
  margin: 24px 0 4px;
  padding: 16px 20px;
}
.form_error_box ul {
  margin: 8px 0 0;
  padding-left: 1.3em;
  line-height: 1.9;
}
.form_field {
  margin-top: 26px;
}
.form_field_label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.required_mark {
  padding: 1px 8px;
}
.form_field_input input, .form_field_input textarea {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 13px 16px;
}
.form_field_input textarea {
  min-height: 200px;
}
.form_field_help {
  margin-top: 6px;
  line-height: 1.8;
}
.form_agree {
  margin-top: 36px;
  padding: 24px 26px;
}
.form_agree_box {
  margin-top: 10px;
  line-height: 2;
}
.form_agree_check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.form_agree_check input {
  width: 22px;
  height: 22px;
  margin: 0;
}
.form_confirm_list {
  margin: 20px 0 0;
}
.form_confirm_row {
  display: flex;
  gap: 20px;
  padding: 16px 4px;
}
.form_confirm_row dt {
  flex: 0 0 160px;
}
.form_confirm_row dd {
  margin: 0;
  line-height: 1.9;
}
.form_confirm_agree {
  margin-top: 22px;
}
.form_confirm_agree_text {
  margin-top: 4px;
}
.form_complete_card {
  margin-top: 30px;
  padding: 44px 30px;
  text-align: center;
}
.form_complete_label {
  display: inline-block;
}
.form_complete_title {
  margin-top: 10px;
}
.form_complete_text {
  margin-top: 16px;
  line-height: 2.1;
}
.form_complete_actions {
  margin-top: 26px;
}
.guide_card_photo {
  position: relative;
}
.guide_card_credit {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  line-height: 1;
}
.spot_db_credit {
  margin: 28px 0 0;
  line-height: 1.9;
}
.spot_db_tabs {
  display: flex;
  overflow: hidden;
}
.spot_db_tab {
  padding: 7px 18px;
}
.spot_map {
  position: relative;
  height: 620px;
  margin-top: 8px;
  overflow: hidden;
  z-index: 1;
}
.spot_map_loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.spot_map_note {
  margin: 14px 0 0;
  line-height: 2;
}
.spot_map_key {
  display: inline-block;
  margin: 0 6px 0 2px;
  padding: 1px 10px;
}
.spot_pop {
  width: 240px;
}
.spot_pop_img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  margin-bottom: 8px;
}
.spot_pop_meta {
  margin: 0 0 4px;
}
.spot_pop_type {
  display: inline-block;
  padding: 1px 8px;
  margin-right: 6px;
}
.spot_pop_note {
  margin: 0 0 8px;
}
.spot_pop_name {
  margin: 0 0 8px;
  line-height: 1.5;
}
.spot_pop_btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.spot_pop_btn {
  display: inline-block;
  padding: 5px 12px;
}
.spot_pop_stamp {
  margin-top: 8px;
}
.spot_pop_stamp_msg {
  display: block;
  margin-top: 4px;
}
.spot_map_locate a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}
.spot_visited_toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
}
.spot_visited_box {
  display: inline-block;
  width: 18px;
  height: 18px;
  position: relative;
}
.spot_visited_toggle.is_on .spot_visited_box::after {
  position: absolute;
  left: 4px;
  top: 0px;
  width: 5px;
  height: 9px;
}
.guide_card.spot_stamp_hide {
  display: none !important;
}
.stamp_rally {
  margin-top: 26px;
}
.stamp_checkin {
  padding: 26px 20px;
  text-align: center;
}
.stamp_checkin_btn {
  display: inline-block;
  padding: 14px 38px;
}
.stamp_checkin_note {
  margin: 12px 0 0;
  line-height: 1.9;
}
.stamp_result {
  display: inline-block;
  margin: 12px 0 0;
  padding: 8px 18px;
  line-height: 1.7;
}
.stamp_summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 26px;
}
.stamp_summary_label {
  margin: 0;
}
.stamp_summary_count {
  margin: 0;
}
.stamp_summary_have {
  line-height: 1;
}
.stamp_sub_title {
  margin: 30px 0 12px;
}
.stamp_pref_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
}
.stamp_pref {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
}
.stamp_badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.stamp_badge {
  padding: 5px 16px;
}
.stamp_list {
  margin: 0;
  padding: 0;
}
.stamp_item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
}
.stamp_item_mark {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
}
.stamp_item_name {
  margin: 0;
}
.stamp_item_meta {
  margin: 2px 0 0;
}
.stamp_empty {
  padding: 4px 0;
}
.stamp_note {
  margin: 26px 0 0;
  line-height: 2;
}
.stamp_cta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0 0;
  padding: 16px 20px;
}
.stamp_cta:last-of-type {
  margin-bottom: 26px;
}
.stamp_cta_icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
}
.stamp_cta_body {
  display: block;
  flex: 1;
  min-width: 0;
}
.stamp_cta_title {
  display: block;
}
.stamp_cta_text {
  display: block;
  margin-top: 2px;
  line-height: 1.8;
}
.stamp_cta_arrow {
  flex-shrink: 0;
}
.stamp_list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 18px 14px;
  padding: 22px 18px;
}
.stamp_list .stamp_empty {
  grid-column: 1/-1;
}
.stamp_tile {
  margin: 0;
  padding: 0;
  text-align: center;
}
.stamp_seal {
  display: block;
  width: 100%;
  max-width: 128px;
  height: auto;
  margin: 0 auto;
}
.stamp_tile_name {
  margin: 6px 0 0;
  line-height: 1.5;
  overflow: hidden;
}
.stamp_pref {
  padding: 0;
}
.stamp_pref_link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 6px 10px;
}
.stamp_sub_note {
  margin-left: 8px;
}
.stamp_pref_clear {
  margin: -4px 0 10px;
}
.stamp_auth {
  padding: 26px 20px;
}
.stamp_auth_lead {
  margin: 0 0 18px;
  line-height: 2;
  text-align: center;
}
.stamp_auth_forms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  max-width: 720px;
  margin: 0 auto;
}
.stamp_auth_form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px;
}
.stamp_auth_title {
  margin: 0 0 4px;
}
.stamp_auth_input {
  width: 100%;
  padding: 10px 12px;
}
.stamp_auth_btn {
  margin-top: 4px;
  padding: 11px 20px;
}
.stamp_auth_msg {
  text-align: center;
}
.stamp_member {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.stamp_member_name {
  margin: 0;
}
.stamp_member_logout {
  padding: 5px 14px;
}
.stamp_sns {
  max-width: 420px;
  margin: 0 auto 18px;
}
.stamp_sns_lead {
  margin: 0 0 10px;
  text-align: center;
}
.stamp_sns_btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stamp_sns_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
}
.stamp_sns_or {
  position: relative;
  margin: 18px 0 0;
  text-align: center;
}
.stamp_sns_or::before {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
}
.stamp_sns_or span {
  position: relative;
  display: inline-block;
  padding: 0 12px;
}
.stamp_rally [hidden] {
  display: none !important;
}
.stamp_auth_forgot {
  align-self: center;
  margin-top: 2px;
  padding: 2px 4px;
}
.stamp_reset_req {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
  margin: 0 auto;
  padding: 18px 16px;
}
.stamp_reset_actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stamp_reset_confirm {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 360px;
  margin: 0 auto;
  padding: 26px 20px;
}
.stamp_candidates {
  margin-top: 14px;
  padding: 18px 16px;
  text-align: left;
}
.stamp_candidates_lead {
  margin: 0 0 12px;
  line-height: 1.8;
}
.stamp_candidates_list {
  margin: 0 0 16px;
  padding: 0;
}
.stamp_candidates_item label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 4px;
}
.stamp_candidates_item input[type=checkbox] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}
.stamp_candidates_desc {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.stamp_candidates_confirm {
  display: block;
  width: 100%;
  padding: 12px 20px;
}
.stamp_auth_or {
  position: relative;
  margin: 14px 0;
  text-align: center;
}
.stamp_auth_or::before {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
}
.stamp_auth_or span {
  position: relative;
  display: inline-block;
  padding: 0 12px;
}
.stamp_member_transfer {
  margin-top: 6px;
  padding: 5px 14px;
}
.stamp_transfer_code {
  margin-top: 8px;
  padding: 10px 14px;
  text-align: center;
}
.stamp_transfer_code_num {
  margin: 0 0 4px;
}
.stamp_share {
  margin-top: 18px;
  padding: 16px;
}
.stamp_share_title {
  margin: 0 0 10px;
}
.stamp_share_btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.stamp_share_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
}
.guide_card_closed {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-block;
  padding: 4px 10px;
  line-height: 1;
}
.spot_pop_closed {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  line-height: 1.4;
}
.stamp_member {
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 22px;
  padding: 14px 18px;
}
.stamp_member_name {
  order: 1;
  flex: 1 1 auto;
}
.stamp_member_transfer {
  order: 2;
  flex: 0 0 auto;
  margin-top: 0;
  padding: 7px 16px;
  text-align: center;
}
.stamp_member_logout {
  order: 3;
  flex: 0 0 auto;
}
.stamp_transfer_code {
  order: 4;
  flex-basis: 100%;
  margin-top: 2px;
}
.spot_pop_facilities {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 8px;
}
.spot_pop_facility {
  display: inline-block;
  padding: 2px 8px;
}
.stamp_link {
  margin: 14px 0 0;
  padding: 12px 14px;
}
.stamp_link_summary::-webkit-details-marker {
  display: none;
}
.stamp_link_summary::before {
  display: inline-block;
  margin-right: 6px;
}
.stamp_link_list {
  margin: 10px 0;
  padding: 0;
}
.stamp_link_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
}
.stamp_link_empty {
  padding: 6px 0;
}
.stamp_link_unlink_btn {
  flex: 0 0 auto;
  padding: 5px 12px;
}
.stamp_link_add {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 0;
}
.stamp_link_add_btn {
  display: block;
  width: 100%;
  padding: 9px 14px;
}
.stamp_link_pass {
  margin: 14px 0 0;
  padding-top: 12px;
}
.stamp_link_msg {
  margin-top: 8px;
}
.guide_shot {
  margin: 32px auto 0;
  max-width: 420px;
}
.guide_shot img {
  width: 100%;
  height: auto;
}
.guide_shot_cap {
  margin-top: 10px;
  line-height: 1.7;
  text-align: center;
}
.manga_hero {
  position: relative;
  padding: 48px 20px 40px;
  text-align: center;
  overflow: hidden;
}
.manga_hero_inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.manga_hero_img {
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto 12px;
  display: block;
}
.manga_hero_title {
  line-height: 1.5;
  margin: 0 0 10px;
}
.manga_hero_lead {
  line-height: 1.9;
  margin: 0;
}
.manga_section {
  padding: 48px 20px;
  max-width: 900px;
  margin: 0 auto;
}
.manga_section_label {
  display: inline-block;
  padding: 6px 16px;
  margin: 0 auto 14px;
}
.manga_section_head {
  text-align: center;
  margin: 0 0 32px;
}
.manga_section_title {
  margin: 0 0 8px;
}
.manga_section_text {
  line-height: 1.8;
  margin: 0;
}
.manga_strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.manga_panel {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1/1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.manga_panel_bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.manga_panel_no {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.manga_panel_footer {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 6px;
  height: 40%;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.manga_panel_footer.is_left {
  flex-direction: row-reverse;
}
.manga_panel_char {
  flex: 0 0 auto;
  height: 100%;
  width: auto;
  max-width: 44%;
  object-fit: contain;
  object-position: bottom;
}
.manga_panel_bubble {
  flex: 1 1 auto;
  align-self: center;
  min-width: 0;
  max-height: 82%;
  overflow: hidden;
  padding: 6px 8px;
  margin: 0;
  line-height: 1.3;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.manga_cta {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 560px;
  margin: 40px auto 0;
  padding: 18px 22px;
}
.manga_cta_icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.manga_cta_body {
  flex: 1;
  min-width: 0;
}
.manga_cta_title {
  display: block;
  margin: 0 0 4px;
}
.manga_cta_text {
  display: block;
}
.manga_cta_arrow {
  flex-shrink: 0;
}
.manga_divider {
  max-width: 900px;
  margin: 0 auto;
  height: 1px;
}
.manga_interlude {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 620px;
  margin: 0 auto;
  padding: 22px 24px;
}
.manga_interlude_img {
  flex: 0 0 auto;
  width: 116px;
  height: auto;
}
.manga_interlude_text {
  margin: 0;
  line-height: 1.8;
}
.manga_outro {
  max-width: 620px;
  margin: 8px auto 0;
  padding: 40px 24px 56px;
  text-align: center;
}
.manga_outro_img {
  width: 100%;
  max-width: 240px;
  height: auto;
  margin: 0 auto 14px;
  display: block;
}
.manga_outro_title {
  margin: 0 0 10px;
}
.manga_outro_text {
  line-height: 1.9;
  margin: 0 0 22px;
}
.manga_outro_link {
  display: inline-block;
  padding: 12px 26px;
}
.gear_group_note {
  margin-top: 20px;
  line-height: 1.9;
}
.gallery .img_wrap img[src*=stamp_manga] {
  max-width: 220px;
  height: auto;
  margin-right: auto;
  margin-left: auto;
}
.ctn-search .ctn-search-form {
  margin: 0 0 32px;
}
.ctn-search .ctn-search-form__label {
  display: block;
  margin: 0 0 10px;
}
.ctn-search .ctn-search-form__row {
  display: flex;
  gap: 10px;
}
.ctn-search .ctn-search-form__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  padding: 0 18px;
}
.ctn-search .ctn-search-form__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 28px;
}
.ctn-search__summary {
  margin: 0 0 24px;
  padding-bottom: 16px;
}
.ctn-search__list {
  margin: 0;
  padding: 0;
}
.ctn-search__link {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "badge title" "badge excerpt";
  align-items: start;
  gap: 6px 20px;
  padding: 24px 8px;
}
.ctn-search__badge {
  grid-area: badge;
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 3px 10px;
  white-space: nowrap;
}
.ctn-search__title {
  grid-area: title;
  line-height: 1.7;
}
.ctn-search__excerpt {
  grid-area: excerpt;
  margin: 8px 0 0;
  line-height: 1.9;
  overflow: hidden;
}
.ctn-search mark {
  padding: 0 2px;
}
.ctn-search__empty, .ctn-search__hint {
  padding: 40px;
  text-align: center;
}
.ctn-search__pager {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
}
.ctn-search__pager a, .ctn-search__pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
}
.ctn-search__pager .is-prev, .ctn-search__pager .is-next {
  padding: 0 18px;
}
.spot_search_panel_types .guide_filter_checkbox {
  display: block;
  overflow-x: visible;
  padding: 4px 14px;
}
.guide_filter_group {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  padding: 4px 0;
}
.guide_filter_group_label {
  flex: 0 0 auto;
  width: 92px;
  padding: 6px 0;
}
.guide_filter_group_items {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
}
.guide_filter_group .guide_filter_checkbox_item {
  padding: 6px 10px;
}
.stamp_book_nav {
  margin: 0 0 18px;
}
.stamp_book_group {
  display: block;
  margin: 0 0 8px;
}
.stamp_book_group_label {
  display: block;
  margin: 0 0 2px;
}
.stamp_book_group .guide_filter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.course_pick_types {
  margin: 8px 0 12px;
  padding: 0;
}
.course_pick_types_legend {
  padding: 0;
}
.course_pick_types label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 4px 12px 0 0;
}
.stay_guide_page .pagination {
  margin-bottom: 44px;
}
.spot_pref_index_title {
  margin: 0 0 10px;
}
.spot_pref_index {
  margin-bottom: 40px;
}
.spot_detail_back {
  margin: 0 0 12px;
}
.spot_detail {
  max-width: 760px;
  margin: 0 auto;
}
.spot_detail_meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
}
.spot_detail_meta .guide_card_type {
  position: static;
}
.spot_detail_title {
  margin: 0 0 16px;
  text-align: left;
}
.spot_detail_photo {
  position: relative;
  margin: 0 0 18px;
  overflow: hidden;
}
.spot_detail_photo img {
  display: block;
  width: 100%;
  height: auto;
}
.spot_detail_note {
  margin: 0 0 8px;
  line-height: 2;
}
.spot_detail_add {
  margin: 0 0 18px;
}
.spot_detail_links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
}
.spot_detail_sub {
  margin: 0 0 8px;
}
.spot_detail_stamp, .spot_detail_courses, .spot_detail_near {
  margin: 0 0 26px;
  padding: 16px 18px;
}
.spot_detail_stamp_note {
  margin: 0 0 10px;
  line-height: 1.9;
}
.spot_detail_list {
  margin: 0;
  padding: 0;
}
.spot_detail_list li {
  padding: 7px 0;
}
.spot_detail_list_sub {
  margin-left: 8px;
}
.spot_detail_map {
  height: 380px;
  margin-bottom: 18px;
}
@media screen and (max-width: 640px) {
.mv-mod-table th, .mv-mod-table td {
    display: block;
    width: auto;
  }
.page_head_channel, .page_head_maker {
    padding-bottom: 32px;
  }
.page_head_channel .profile_banner, .page_head_maker .profile_banner {
    margin-top: 20px;
  }
.profile_sns_btn {
    width: 44px;
    height: 44px;
  }
.profile_link_btn {
    padding: 10px 14px;
  }
.article_body .gallery, .article_body .gallery.img2, .article_body .gallery.img3, .article_body .gallery.img4, .article_body .gallery.img5 {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
.article_body .gallery.img1 {
    grid-template-columns: 1fr;
  }
.spot_db_title {
    margin-top: 64px;
  }
.spot_search_panel {
    padding: 16px 14px 14px;
  }
.spot_db_form {
    flex-direction: column;
  }
.spot_db_select {
    flex: 1 1 100%;
    min-width: 0;
  }
.spot_db_input {
    flex: 1 1 100%;
    min-width: 0;
  }
.spot_db_submit {
    flex: 1 1 100%;
    text-align: center;
  }
.form_confirm_row {
    display: block;
  }
.form_confirm_row dd {
    margin-top: 4px;
  }
.form_actions .btn {
    width: 100%;
    text-align: center;
  }
.spot_map {
    height: 460px;
  }
.spot_search_panel_aux {
    justify-content: flex-start;
  }
.stamp_pref_grid {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  }
.stamp_checkin_btn {
    width: 100%;
  }
.stamp_cta {
    padding: 14px 16px;
    gap: 10px;
  }
.stamp_cta_icon {
    width: 32px;
    height: 32px;
  }
.stamp_list {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 14px 10px;
    padding: 16px 12px;
  }
.stamp_member {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px;
    text-align: center;
  }
.stamp_member_transfer {
    width: 100%;
    padding: 12px 14px;
  }
.stamp_member_logout {
    align-self: center;
    padding: 6px 24px;
  }
.stamp_transfer_code {
    margin-top: 0;
  }
.spot_search_panel_types .guide_filter {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 8px;
  }
.guide_shot {
    max-width: 340px;
  }
.manga_strip {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
.manga_panel_footer {
    height: 44%;
  }
.manga_panel_bubble {
    padding: 5px 6px;
  }
.manga_interlude {
    gap: 10px;
    padding: 18px 16px;
  }
.manga_interlude_img {
    width: 92px;
  }
.manga_cta {
    flex-wrap: wrap;
    padding: 16px 18px;
  }
.spot_detail_stamp, .spot_detail_courses, .spot_detail_near {
    padding: 14px;
  }
.spot_detail_map {
    height: 300px;
  }
.spot_search_panel_types .guide_filter_checkbox {
    padding: 4px 10px;
  }
.guide_filter_group {
    display: block;
  }
.guide_filter_group_label {
    display: block;
    width: auto;
    padding: 4px 0 0;
  }
.stamp_book_group_label {
    margin-top: 6px;
  }
}
@media (max-width: 900px) {
.maker_related .maker_grid {
    grid-template-columns: repeat(3, 1fr);
  }
.profile_cast {
    grid-template-columns: 1fr;
  }
.page_head {
    padding: 128px 0 46px;
  }
.stay_types {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 0 auto 40px;
  }
.gear_pickup {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 30px 28px;
  }
.gear_pickup_photo {
    max-width: 320px;
    margin: 0 auto;
  }
.channel_types {
    grid-template-columns: repeat(2, 1fr);
  }
.channel_pickup {
    grid-template-columns: 1fr;
    max-width: 640px;
    margin: 26px auto 0;
  }
.channel_index {
    grid-template-columns: 1fr;
  }
.profile_members {
    gap: 14px;
  }
.profile_relate {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 24px auto 0;
  }
.about_maruko {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 24px;
  }
.about_maruko_name {
    justify-content: center;
  }
.maker_archive_grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
.maker_hero {
    flex-direction: column;
    gap: 22px;
    padding: 30px 28px;
    text-align: center;
  }
}
@media (max-width: 640px) {
.maker_related .maker_grid {
    grid-template-columns: repeat(2, 1fr);
  }
.profile_cast_item {
    padding: 12px;
  }
.profile_cast_head {
    gap: 12px;
  }
.profile_cast_photo {
    width: 64px;
  }
.profile_cast_photo img {
    width: 64px;
    height: 64px;
  }
.profile_cast_dl_rest .profile_cast_row {
    display: block;
  }
.profile_cast_dl_rest .profile_cast_row dt {
    width: auto;
    margin-bottom: 2px;
  }
.profile_cast_dl_head .profile_cast_row dt {
    width: 4.5em;
  }
.profile_feed_link {
    flex-direction: column;
    gap: 4px;
  }
.page_head {
    padding: 108px 0 38px;
  }
.page_head_inner, .archive_inner, .article_inner {
    padding: 0 20px;
  }
.page_head_eyebrow {
    margin-top: 26px;
  }
.breadcrumb_item[aria-current=page] {
    max-width: 14em;
  }
.archive {
    padding: 52px 0 72px;
  }
.archive_intro {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 20px;
  }
.archive_intro_name {
    justify-content: center;
  }
.archive_link {
    gap: 16px;
    padding: 20px 4px;
  }
.archive_thumb {
    width: 104px;
  }
.archive_title {
    margin-top: 8px;
  }
.archive_excerpt {
    display: none;
  }
.pagination {
    margin-top: 40px;
  }
.article {
    padding: 44px 0 72px;
  }
.article_body {
    margin-top: 32px;
  }
.article_lead {
    padding: 16px 18px;
  }
.article_gear {
    padding: 22px 18px 20px;
  }
.article_gear_item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
.article_share {
    margin-top: 40px;
  }
.article_nav {
    grid-template-columns: 1fr;
    gap: 12px;
  }
.article_nav_next {
    grid-column: auto;
  }
.stay_guide_page {
    padding: 44px 0 72px;
  }
.stay_type {
    padding: 20px 18px 18px;
  }
.facility {
    padding: 44px 0 72px;
  }
.facility_inner {
    padding: 0 20px;
  }
.facility_summary {
    padding: 22px 18px 20px;
  }
.facility_data_row {
    flex-direction: column;
    gap: 2px;
  }
.facility_data_row dt {
    width: auto;
  }
.reserve_cta {
    margin-top: 44px;
    padding: 22px 18px 20px;
  }
.reserve_btns {
    flex-direction: column;
    gap: 10px;
  }
.reserve_btn {
    display: block;
    text-align: center;
  }
.gear_archive {
    padding: 44px 0 72px;
  }
.gear_pickup {
    padding: 22px 18px 20px;
  }
.gear_pickup_photo {
    max-width: 240px;
  }
.gear_group {
    margin-top: 48px;
  }
.channel_archive {
    padding: 44px 0 72px;
  }
.channel_archive_inner, .channel_profile_inner {
    padding: 0 20px;
  }
.channel_types {
    grid-template-columns: 1fr;
    gap: 14px;
  }
.channel_type {
    padding: 18px 18px 16px;
  }
.channel_gear_note {
    padding: 16px 18px;
  }
.channel_group {
    margin-top: 44px;
  }
.channel_card_body {
    padding: 13px 16px 15px;
    gap: 12px;
  }
.channel_card_icon {
    width: 44px;
    height: 44px;
  }
.channel_index_link {
    gap: 10px;
    padding: 12px 2px;
  }
.channel_index_initial {
    width: 34px;
    height: 34px;
  }
.channel_profile {
    padding: 44px 0 72px;
  }
.profile_head {
    gap: 14px;
  }
.profile_icon {
    width: 68px;
    height: 68px;
  }
.profile_desc {
    padding: 16px 18px;
  }
.profile_section {
    margin-top: 48px;
  }
.profile_members {
    grid-template-columns: 1fr;
    gap: 12px;
  }
.profile_member {
    padding: 20px 18px 18px;
  }
.profile_videos {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
.about_inner, .tech_archive_inner, .news_archive_inner, .maker_archive_inner, .maker_profile_inner {
    padding: 0 20px;
  }
.about_page {
    padding: 44px 0 72px;
  }
.about_section {
    margin-top: 52px;
  }
.about_pull {
    padding: 22px 22px;
  }
.about_maruko {
    margin-top: 32px;
  }
.about_map_item {
    padding: 18px 18px 16px;
  }
.about_career_item {
    padding: 18px 18px 16px;
  }
.about_cms_bridge {
    padding: 20px 18px 18px;
  }
.about_tech_bridge {
    padding: 26px 22px 24px;
  }
.about_info {
    padding: 22px 18px 18px;
  }
.about_info_row {
    flex-direction: column;
    gap: 2px;
  }
.about_info_row dt {
    width: auto;
  }
.tech_archive_page {
    padding: 44px 0 72px;
  }
.tech_filter {
    margin-bottom: 26px;
  }
.tech_filter_btn {
    padding: 7px 14px;
  }
.tech_archive_note {
    margin-top: 36px;
  }
.article_code pre {
    padding: 16px 16px;
  }
.article_body pre {
    padding: 16px 16px;
  }
.log_table {
    min-width: 520px;
  }
.news_archive {
    padding: 44px 0 72px;
  }
.news_year {
    margin-top: 44px;
  }
.news_page_item {
    flex-direction: column;
    gap: 4px;
    padding: 18px 4px;
  }
.news_page_date {
    width: auto;
    padding-top: 0;
  }
.maker_archive {
    padding: 44px 0 72px;
  }
.maker_archive_grid {
    gap: 12px;
  }
.maker_panel {
    padding: 26px 16px 20px;
    gap: 10px;
  }
.maker_panel img {
    max-width: 150px;
  }
.maker_profile {
    padding: 44px 0 72px;
  }
.maker_hero {
    padding: 24px 20px;
  }
.maker_hero img {
    width: 160px;
  }
.maker_gear_item {
    padding: 20px 18px 18px;
  }
.ctn-search .ctn-search-form__row {
    flex-direction: column;
  }
.ctn-search .ctn-search-form__btn {
    width: 100%;
  }
.ctn-search__link {
    grid-template-columns: 1fr;
    grid-template-areas: "badge" "title" "excerpt";
  }
}
@media (max-width: 1024px) {
.page_head_inner, .archive_inner, .article_inner, .facility_inner, .channel_archive_inner, .channel_profile_inner {
    padding: 0 28px;
  }
.about_inner, .tech_archive_inner, .news_archive_inner, .maker_archive_inner, .maker_profile_inner {
    padding: 0 28px;
  }
}
/* ---- トップ固有（plan_d.scss） ---- */
/* =========================================================
D案 FIELD LOG ／ トップページ固有
   ---------------------------------------------------------
   更新履歴のグリッド、インク地の帯（h1＋実測数字）、note の反転ブロック。
   共通部分は _d_base.scss。
   ========================================================= */
/* ---------- UPDATE：更新履歴そのものをキービジュアルにする ----------
   固定のヒーロー写真は置かず、最新の記録を大小で組む。
   グリッド本体（.pd_update_grid／.pd_feature*）は連載一覧でも使うので _d_base.scss にある。 */
.pd_update {
  padding-top: clamp(22px, 3vw, 40px);
}
.pd_update_head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid #1c1a16;
  margin-bottom: clamp(18px, 2.4vw, 28px);
}
.pd_update_head strong {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: #b5331a;
}
.pd_update_head h2 {
  font-size: 13px;
  font-weight: 500;
}
.pd_update_head time {
  margin-left: auto;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
  letter-spacing: 0.04em;
}
/* ---------- ステートメント＋実測値：インク地の帯 ---------- */
/* ヘッダー直下＝ファーストビューの主役。h1 は現行の縦書きコピーと同じ格の大きさにする */
.pd_band {
  background: #1c1a16;
  color: #f2efe9;
}
.pd_band_inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(36px, 4.8vw, 64px) 36px;
  display: grid;
  grid-template-columns: minmax(0, 560px) 1fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
@media (max-width: 900px) {
.pd_band_inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-inline: 24px;
  }
}
@media (max-width: 640px) {
.pd_band_inner {
    padding-inline: 16px;
    padding-block: 30px;
  }
}
.pd_band_ttl {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.45;
  color: #fff;
  text-wrap: balance;
  padding-left: clamp(16px, 2vw, 24px);
  border-left: 4px solid #f47a55;
}
.pd_band_ttl em {
  display: block;
  font-style: normal;
  color: #f47a55;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 500;
  line-height: 1.8;
  margin-top: 14px;
  letter-spacing: 0.12em;
}
.pd_figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 640px) {
.pd_figures {
    grid-template-columns: 1fr 1fr;
  }
}
.pd_figure {
  padding: 0 20px;
  border-right: 1px solid rgba(242, 239, 233, 0.22);
}
.pd_figure:first-child {
  padding-left: 0;
}
.pd_figure:last-child {
  border-right: 0;
  padding-right: 0;
}
@media (max-width: 640px) {
.pd_figure {
    padding: 12px 12px;
  }
.pd_figure:nth-child(2n) {
    border-right: 0;
    padding-right: 0;
  }
.pd_figure:nth-child(odd) {
    padding-left: 0;
  }
.pd_figure:nth-child(-n+2) {
    border-bottom: 1px solid rgba(242, 239, 233, 0.22);
  }
}
.pd_figure b {
  display: block;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: clamp(28px, 3.8vw, 46px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}
.pd_figure span {
  display: block;
  font-size: 11px;
  color: #a9a49a;
  margin-top: 10px;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.pd_figure:first-child b {
  color: #f47a55;
}
/* ---------- note：インク地に反転 ---------- */
.pd_note_block {
  background: #1c1a16;
  color: #f2efe9;
  margin-top: clamp(50px, 7vw, 96px);
  padding: clamp(40px, 6vw, 84px) 0;
}
.pd_note_grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(28px, 4vw, 70px);
}
@media (max-width: 900px) {
.pd_note_grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
.pd_note_label {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: #f47a55;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pd_note_label::after {
  content: "";
  width: 44px;
  height: 1px;
  background: rgba(244, 122, 85, 0.55);
}
.pd_note_title {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(23px, 3.4vw, 36px);
  line-height: 1.6;
  color: #fff;
}
.pd_note_title em {
  font-style: normal;
  color: #f47a55;
}
.pd_note_lead {
  font-size: 13.5px;
  line-height: 2.1;
  color: #b7b2a7;
  margin-top: 16px;
}
.pd_note_figs {
  display: flex;
  gap: 30px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.pd_note_figs div {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.pd_note_figs b {
  display: block;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 500;
  color: #fff;
  line-height: 1;
}
.pd_note_figs span {
  display: block;
  font-size: 10.5px;
  color: #8e897e;
  margin-top: 6px;
}
/* note の最新記事。中身は note プラグインの [note_feed]（ul/li/a）が出す。
   手書きだった頃は5本とも note のトップへ飛んでいて、しかも1本は
   実在しない記事名だった。記事ごとの URL は RSS が持っているので、
   写す工程を挟まずそのまま出す。ここでは ul/li/a を D案の組みに寄せるだけ。 */
.pd_note_list, .note_feed {
  border-top: 1px solid rgba(242, 239, 233, 0.22);
}
.note_feed_item {
  list-style: none;
}
.pd_note_item, .note_feed_link {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(242, 239, 233, 0.22);
  text-decoration: none;
}
.pd_note_item:hover h3, .pd_note_item:hover .note_feed_title, .note_feed_link:hover h3, .note_feed_link:hover .note_feed_title {
  color: #f47a55;
}
@media (max-width: 640px) {
.pd_note_item, .note_feed_link {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}
.pd_note_item time, .note_feed_link time {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #8e897e;
  letter-spacing: 0.02em;
}
.pd_note_item h3, .pd_note_item .note_feed_title, .note_feed_link h3, .note_feed_link .note_feed_title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  color: #f2efe9;
}
.pd_note_btn {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 26px;
  background: #b5331a;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 15px 30px;
  border: 1px solid #b5331a;
}
.pd_note_btn:hover {
  background: #f2efe9;
  border-color: #f2efe9;
  color: #1c1a16;
}
.pd_note_btn {
  /* 朱の上の 11px。0.75 の白だと 4.1:1 で、基準に届いていなかった */
}
.pd_note_btn span {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.88);
}
.pd_note_btn:hover span {
  color: #615c51;
}
/* 道具の台帳（01 持っていったもの）。
   ここには現場で撮った実写と、背景を抜いた商品写真が混ざって並ぶ。
   施設の台帳と同じように枠へ合わせて切ると、縦長の切り抜き
   （ファイアープレイスケトルは 180x300）は注ぎ口も取っ手も落ちてしまい、
   何の道具なのか分からなくなる。この台帳に限って全体を見せ、
   写真の列も少し広げる。地は白で、商品写真の地と継ぎ目が出ない。 */
#pd_gear .pd_col_shot {
  width: 152px;
}
#pd_gear .pd_c_shot {
  width: 152px;
}
#pd_gear .pd_c_shot div {
  background: #fff;
}
#pd_gear .pd_c_shot img {
  object-fit: contain;
  padding: 5px;
  box-sizing: border-box;
}
/* ---- 下層共通（lower_d.scss） ---- */
/* =========================================================
   D案 FIELD LOG ／ 下層ページ共通
   ---------------------------------------------------------
   トップと同じ「計測する人の台帳」を、下層の役割ごとに組み替える。

   一覧   … 絞り込み（URLパラメータ）＋台帳の表＋ページャ＋地域の網
   詳細   … 左に実測、右に追従の予約カード（朱は予約だけ）
   記事   … 1カラムを狭く保ち、本文の途中に実測ボックスと道具を差す
   固定   … 目次つきの長文

   朱（$c_accent）を置いてよいのは「押す場所」＝予約・ストア・送信・note、
   それと現在地（ページャ・タブ）と実測値の強調だけ。
   ========================================================= */
/* ---------- パンくず ---------- */
.ld_crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  padding: 14px 0 0;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: #615c51;
}
.ld_crumb a {
  text-decoration: none;
}
.ld_crumb a:hover {
  color: #b5331a;
}
.ld_crumb span[aria-current] {
  color: #1c1a16;
}
.ld_crumb li {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ld_crumb li::after {
  content: "/";
  color: #d9d4c8;
}
.ld_crumb li:last-child::after {
  content: none;
}
.ld_crumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  margin: 0;
  padding: 0;
}
/* ---------- ページ見出し ----------
   一覧は「何が何件あるか」を最初に言い切る。数字は必ずモノスペース。 */
.ld_head {
  padding: clamp(20px, 2.6vw, 34px) 0 0;
  border-bottom: 2px solid #1c1a16;
}
.ld_head_row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: end;
  padding-bottom: 14px;
}
@media (max-width: 640px) {
.ld_head_row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
.ld_h1 {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.45;
  text-wrap: balance;
}
.ld_h1 em {
  font-style: normal;
  color: #b5331a;
}
.ld_count {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
  line-height: 1;
}
@media (max-width: 640px) {
.ld_count {
    text-align: left;
  }
}
.ld_count b {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 500;
}
.ld_count span {
  font-size: 11px;
  color: #615c51;
  margin-left: 6px;
  letter-spacing: 0.04em;
}
.ld_lead {
  max-width: 760px;
  padding: clamp(18px, 2.4vw, 28px) 0 0;
  font-size: 14.5px;
  line-height: 2.15;
  color: #57544c;
}
.ld_updated {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
  letter-spacing: 0.04em;
  padding-top: 12px;
}
/* ---------- 絞り込み ----------
   show/hide ではなく、すべて URL パラメータを持つリンクとフォーム。
   選択中は朱の下線で「いまここ」を示す。 */
.ld_filter {
  padding: clamp(18px, 2.4vw, 26px) 0 0;
}
.ld_filter_row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 12px 0;
  border-bottom: 1px solid #d9d4c8;
}
.ld_filter_row:last-of-type {
  border-bottom: 1px solid #1c1a16;
}
.ld_filter_label {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #615c51;
  width: 76px;
  flex-shrink: 0;
}
@media (max-width: 640px) {
.ld_filter_label {
    width: 100%;
  }
}
.ld_tab {
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  padding: 7px 14px;
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
}
.ld_tab em {
  font-style: normal;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}
.ld_tab:hover {
  border-color: #1c1a16;
}
.ld_tab.is_on {
  background: #1c1a16;
  border-color: #1c1a16;
  color: #f2efe9;
}
.ld_tab.is_on em {
  color: #a9a49a;
}
.ld_chk {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  white-space: nowrap;
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
  padding: 6px 13px;
  cursor: pointer;
}
.ld_chk input {
  width: 15px;
  height: 15px;
  accent-color: #b5331a;
  margin: 0;
}
.ld_chk:hover {
  border-color: #1c1a16;
}
.ld_chk.is_on {
  border-color: #b5331a;
  color: #b5331a;
}
.ld_sort {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 640px) {
.ld_sort {
    margin-left: 0;
  }
}
.ld_sort label {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #615c51;
}
.ld_sort select {
  font-family: inherit;
  font-size: 16px;
  border: 0;
  border-bottom: 1px solid #1c1a16;
  background: transparent;
  padding: 3px 0;
  color: #1c1a16;
}
.ld_sort select:focus {
  outline: 0;
  border-bottom-color: #b5331a;
}
.ld_apply {
  border: 0;
  background: #b5331a;
  color: #fff;
  cursor: pointer;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  padding: 9px 22px;
}
.ld_apply:hover {
  background: #1c1a16;
}
.ld_result_note {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
  letter-spacing: 0.04em;
  padding: 14px 0 18px;
  font-variant-numeric: tabular-nums;
}
.ld_result_note b {
  color: #1c1a16;
  font-weight: 500;
}
/* ---------- ページャ ---------- */
.ld_pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: clamp(28px, 3.4vw, 42px);
  padding-top: 18px;
  border-top: 1px solid #1c1a16;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.ld_pager a, .ld_pager span {
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  text-decoration: none;
  border: 1px solid #d9d4c8;
  padding: 0 12px;
}
.ld_pager a:hover {
  border-color: #1c1a16;
}
.ld_pager .is_now {
  background: #b5331a;
  border-color: #b5331a;
  color: #fff;
}
.ld_pager .is_gap {
  border: 0;
  min-width: 20px;
  color: #615c51;
}
.ld_pager .ld_pager_edge {
  letter-spacing: 0.08em;
}
/* ---------- 2カラム（詳細ページ） ----------
   右カラムは追従。スマホでは予約カードを本文の先頭に上げる。 */
.ld_layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  padding-top: clamp(26px, 3.4vw, 40px);
}
@media (max-width: 1024px) {
.ld_layout {
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 28px;
  }
}
@media (max-width: 900px) {
.ld_layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
.ld_main {
  min-width: 0;
}
.ld_side {
  position: sticky;
  top: 88px;
}
@media (max-width: 900px) {
.ld_side {
    position: static;
    order: -1;
    margin-bottom: 30px;
  }
}
.ld_side + .ld_side {
  margin-top: 20px;
}
/* ---------- 予約カード（収益動線の中心） ---------- */
.ld_book {
  border: 2px solid #1c1a16;
  background: #fbfaf7;
}
.ld_book h2 {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #f2efe9;
  background: #1c1a16;
  padding: 9px 16px;
  font-weight: 500;
}
.ld_book_body {
  padding: 18px 16px 16px;
}
.ld_book_price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.ld_book_price b {
  font-size: clamp(28px, 3.4vw, 36px);
  font-weight: 500;
  line-height: 1;
}
.ld_book_price span {
  font-size: 11px;
  color: #615c51;
}
.ld_book_note {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  color: #615c51;
  margin-top: 7px;
  letter-spacing: 0.02em;
}
.ld_book_note:first-child {
  margin-top: 0;
}
.ld_book_list {
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid #d9d4c8;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 12px;
  font-size: 12.5px;
}
.ld_book_list dt {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
  letter-spacing: 0.04em;
}
.ld_book_list dd {
  margin: 0;
}
.ld_book_act {
  margin-top: 16px;
  display: grid;
  gap: 7px;
}
.ld_book_act .pd_btn {
  text-align: center;
  padding: 14px 18px;
  font-size: 14px;
}
.ld_book_pr {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  line-height: 1.8;
  color: #615c51;
  margin-top: 10px;
}
/* ---------- 写真（詳細の頭） ---------- */
.ld_gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.ld_gallery_main {
  aspect-ratio: 3/2;
  overflow: hidden;
  background: #d9d4c8;
}
.ld_gallery_main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ld_gallery_thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.ld_gallery_thumbs div {
  aspect-ratio: 3/2;
  overflow: hidden;
  background: #d9d4c8;
}
.ld_gallery_thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ---------- 実測データ（詳細の主役） ----------
   「行って測ったもの」と「施設が公表しているもの」を分けて出す。 */
.ld_spec {
  width: 100%;
  font-size: 13.5px;
  margin-top: 4px;
}
.ld_spec th, .ld_spec td {
  text-align: left;
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid #d9d4c8;
  vertical-align: top;
}
.ld_spec th {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #615c51;
  width: 150px;
  white-space: nowrap;
}
@media (max-width: 640px) {
.ld_spec th {
    width: 104px;
    white-space: normal;
  }
}
.ld_spec td b {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}
.ld_spec td em {
  font-style: normal;
  color: #b5331a;
  font-weight: 500;
}
.ld_spec tr:first-child th, .ld_spec tr:first-child td {
  border-top: 1px solid #1c1a16;
}
.ld_spec_src {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  color: #615c51;
  padding-top: 10px;
  line-height: 1.8;
}
/* ---------- 近く（距離つきの罫線リスト） ---------- */
.ld_near {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(20px, 3vw, 40px);
}
@media (max-width: 640px) {
.ld_near {
    grid-template-columns: 1fr;
  }
}
.ld_near_item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #d9d4c8;
  text-decoration: none;
  /* 写真を持たない使い方もある（記事下の「ほかにも書いています」）。
     写真の列を作ったままだと、見出しが 64px の列に押し込まれて
     1 文字ずつ縦に折れていた。写真が無いときは、その列を作らない。 */
}
.ld_near_item:not(:has(.ld_near_shot)) {
  grid-template-columns: minmax(0, 1fr) auto;
}
.ld_near_item:hover h3 {
  color: #b5331a;
}
.ld_near_item div.ld_near_shot {
  aspect-ratio: 3/2;
  overflow: hidden;
  background: #d9d4c8;
}
.ld_near_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ld_near_item {
  /* 名前の列は minmax(0,1fr)。1fr だけだと中身の最小幅に引っぱられて
     列が広がり、長い施設名のときに数文字ずつ縦に折れることがある。 */
}
.ld_near_item > div {
  min-width: 0;
}
.ld_near_item h3 {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.6;
  word-break: auto-phrase;
}
.ld_near_item small {
  display: block;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  color: #615c51;
  margin-top: 2px;
}
.ld_near_item em {
  font-style: normal;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  color: #615c51;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* ---------- 種別バッジ ---------- */
.ld_badge {
  display: inline-block;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  border: 1px solid #1c1a16;
  padding: 3px 9px;
  vertical-align: 3px;
}
.ld_badge.is_open {
  border-color: #b5331a;
  color: #b5331a;
}
.ld_badge.is_closed {
  border-color: #d9d4c8;
  color: #615c51;
}
/* =========================================================
   記事ページ
   ========================================================= */
.ld_article {
  max-width: 760px;
  margin: 0 auto;
}
.ld_kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: #615c51;
  padding-top: clamp(22px, 3vw, 34px);
}
.ld_kicker em {
  font-style: normal;
  color: #b5331a;
  letter-spacing: 0.1em;
}
.ld_article_ttl {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-size: clamp(25px, 3.6vw, 40px);
  line-height: 1.5;
  margin: 12px 0 0;
  text-wrap: balance;
}
.ld_article_lead {
  font-size: 15px;
  line-height: 2.15;
  color: #57544c;
  margin-top: 18px;
}
/* 目次：本文の見出しと同じ番号体系で並べる */
.ld_toc {
  margin: clamp(26px, 3.4vw, 40px) 0;
  padding: 18px 20px;
  background: #ebe6db;
  border-left: 3px solid #b5331a;
}
.ld_toc h2 {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #615c51;
  font-weight: 500;
  margin-bottom: 10px;
}
.ld_toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}
.ld_toc li {
  counter-increment: toc;
  padding: 4px 0;
}
.ld_toc a {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 8px;
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.7;
}
.ld_toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #b5331a;
}
.ld_toc a:hover {
  color: #b5331a;
}
.ld_toc li li {
  padding-left: 26px;
}
.ld_toc li li a::before {
  content: "—";
  color: #615c51;
}
/* 本文のタイポグラフィ */
.ld_body {
  font-size: 15.5px;
  line-height: 2.15;
}
.ld_body h2 {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 27px);
  line-height: 1.55;
  margin: clamp(38px, 5vw, 60px) 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #1c1a16;
  position: relative;
}
.ld_body h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 56px;
  height: 2px;
  background: #b5331a;
}
.ld_body h3 {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(17px, 2.1vw, 21px);
  line-height: 1.6;
  margin: clamp(28px, 3.4vw, 40px) 0 12px;
}
.ld_body p {
  margin: 0 0 22px;
}
.ld_body {
  /* 本文中の素のリンクだけを朱に。ボタン（.pd_btn／.pd_store）まで
     染めてしまうと、朱地に朱文字で読めなくなるので class 付きは除く */
  /* 読みものの本文だけは、文中のリンクに下線を残す。
     地の文にまぎれるので、色だけでは見落とされる。 */
}
.ld_body a:not([class]) {
  color: #b5331a;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ld_body a:not([class]):hover {
  text-decoration: none;
}
.ld_body strong {
  font-weight: 700;
  background: linear-gradient(transparent 62%, rgba(181, 51, 26, 0.16) 62%);
}
.ld_body {
  /* 本文の箇条書きは、読みものとして点や番号を出す（リセットで落としたぶんを戻す）。
     ただし戻すのは「素の ul／ol」だけ。本文の中に置かれた一覧やカードの並び
     （ul.gear_gallery など、クラスを付けてレイアウトに使っているもの）まで
     字下げすると、そこだけ見出しより内側に入って左端が合わなくなる。 */
}
.ld_body ul:not([class]), .ld_body ul.is_bullet {
  margin: 0 0 24px;
  padding-left: 22px;
  list-style: disc;
}
.ld_body ol:not([class]), .ld_body ol.is_bullet {
  margin: 0 0 24px;
  padding-left: 22px;
  list-style: decimal;
}
.ld_body li {
  margin-bottom: 8px;
}
.ld_body figure {
  margin: clamp(26px, 3.4vw, 36px) 0;
}
.ld_body figure img {
  width: 100%;
}
.ld_body blockquote {
  margin: 26px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid #d9d4c8;
  font-size: 14.5px;
  color: #57544c;
}
.ld_body table {
  width: 100%;
  font-size: 13.5px;
  margin: 0 0 26px;
}
.ld_body th, .ld_body td {
  text-align: left;
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid #d9d4c8;
}
.ld_body th {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #615c51;
  white-space: nowrap;
}
.ld_body thead th {
  border-bottom: 1px solid #1c1a16;
}
.ld_body td b {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* 本文に差す実測ボックス。数字だけを別の紙に写した見立て */
.ld_meas {
  margin: clamp(26px, 3.4vw, 36px) 0;
  border: 1px solid #1c1a16;
  background: #fbfaf7;
}
.ld_meas h3 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  background: #1c1a16;
  color: #f2efe9;
  margin: 0;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  padding: 9px 16px;
}
.ld_meas h3 span {
  margin-left: auto;
  color: #a9a49a;
  font-size: 9.5px;
}
.ld_meas dl {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0;
}
@media (max-width: 640px) {
.ld_meas dl {
    grid-template-columns: 1fr 1fr;
  }
}
.ld_meas div {
  padding: 15px 16px;
  border-right: 1px solid #d9d4c8;
}
.ld_meas div:last-child {
  border-right: 0;
}
@media (max-width: 640px) {
.ld_meas div:nth-child(2n) {
    border-right: 0;
  }
.ld_meas div:nth-child(-n+2) {
    border-bottom: 1px solid #d9d4c8;
  }
}
.ld_meas dt {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  color: #615c51;
  letter-spacing: 0.04em;
}
.ld_meas dd {
  margin: 6px 0 0;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 500;
  line-height: 1;
}
.ld_meas dd em {
  font-style: normal;
  font-size: 11px;
  color: #615c51;
  margin-left: 3px;
}
.ld_meas p {
  font-size: 12px;
  line-height: 1.9;
  color: #57544c;
  margin: 0;
  padding: 0 16px 14px;
}
/* 本文に差す道具（物販）と泊まった場所（予約） */
.ld_inline {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  align-items: center;
  margin: clamp(26px, 3.4vw, 36px) 0;
  padding: 18px;
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
}
@media (max-width: 640px) {
.ld_inline {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
.ld_inline div.ld_inline_shot {
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #d9d4c8;
}
@media (max-width: 640px) {
.ld_inline div.ld_inline_shot {
    aspect-ratio: 3/2;
  }
}
.ld_inline img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ld_inline small {
  display: block;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #b5331a;
}
.ld_inline h3 {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.5;
  margin: 9px 0 8px;
}
.ld_inline p {
  font-size: 12.5px;
  line-height: 1.95;
  color: #57544c;
  margin: 0 0 15px;
}
/* 行動ボタンは高さを揃える。大小が混ざると押す場所が読み取りにくい */
.ld_inline_act {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.ld_inline_act .pd_btn, .ld_inline_act .pd_store {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding-block: 0;
  line-height: 1.4;
}
.ld_inline_act .pd_btn {
  padding-inline: 22px;
}
.ld_inline_act .pd_store {
  padding-inline: 15px;
  font-size: 11.5px;
}
.ld_inline_act .pd_pr {
  vertical-align: baseline;
  margin-left: 2px;
}
/* 著者（E-E-A-T） */
.ld_author {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 20px;
  align-items: start;
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
}
@media (max-width: 640px) {
.ld_author {
    grid-template-columns: 72px 1fr;
    gap: 14px;
  }
}
.ld_author div.ld_author_shot {
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #d9d4c8;
  border-radius: 50%;
}
.ld_author img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ld_author h2 {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 8px;
}
.ld_author p {
  font-size: 13px;
  line-height: 2;
  color: #57544c;
}
/* 前後の記録 */
.ld_prevnext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #d9d4c8;
  border: 1px solid #d9d4c8;
  margin-top: clamp(30px, 4vw, 46px);
}
@media (max-width: 640px) {
.ld_prevnext {
    grid-template-columns: 1fr;
  }
}
.ld_prevnext a {
  background: #f2efe9;
  padding: 16px 18px;
  text-decoration: none;
}
.ld_prevnext a:hover {
  background: #fbfaf7;
}
.ld_prevnext a:hover h3 {
  color: #b5331a;
}
.ld_prevnext a:last-child {
  text-align: right;
}
@media (max-width: 640px) {
.ld_prevnext a:last-child {
    text-align: left;
  }
}
.ld_prevnext a small {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #615c51;
}
.ld_prevnext a h3 {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.7;
  margin-top: 6px;
}
/* =========================================================
   連載アーカイブ
   ========================================================= */
.ld_arc_head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  padding: clamp(22px, 3vw, 34px) 0;
  border-bottom: 1px solid #1c1a16;
}
@media (max-width: 900px) {
.ld_arc_head {
    grid-template-columns: 1fr;
  }
}
.ld_arc_head p {
  font-size: 14px;
  line-height: 2.1;
  color: #57544c;
  margin-top: 12px;
  max-width: 640px;
}
.ld_arc_figs {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}
.ld_arc_figs div {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.ld_arc_figs b {
  display: block;
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 500;
  line-height: 1;
}
.ld_arc_figs span {
  display: block;
  font-size: 10px;
  color: #615c51;
  margin-top: 6px;
  letter-spacing: 0.04em;
}
.ld_years {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 1px solid #d9d4c8;
}
.ld_years a {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11.5px;
  text-decoration: none;
  border: 1px solid #d9d4c8;
  padding: 6px 12px;
  color: #57544c;
}
.ld_years a:hover {
  border-color: #1c1a16;
  color: #1c1a16;
}
.ld_years a.is_on {
  background: #1c1a16;
  border-color: #1c1a16;
  color: #f2efe9;
}
/* =========================================================
   ギア詳細：スペックと実測を並べる
   ========================================================= */
.ld_compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #d9d4c8;
  border: 1px solid #d9d4c8;
  margin-top: 4px;
}
@media (max-width: 640px) {
.ld_compare {
    grid-template-columns: 1fr;
  }
}
.ld_compare section {
  background: #f2efe9;
  padding: 18px 20px 20px;
}
.ld_compare section:last-child {
  background: #fbfaf7;
}
.ld_compare h3 {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #615c51;
  font-weight: 500;
  padding-bottom: 9px;
  border-bottom: 1px solid #d9d4c8;
}
.ld_compare section:last-child h3 {
  color: #b5331a;
}
.ld_compare dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px 14px;
  margin: 12px 0 0;
  font-size: 13.5px;
}
.ld_compare dt {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
  letter-spacing: 0.04em;
}
.ld_compare dd {
  margin: 0;
}
.ld_compare dd b {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* =========================================================
   スタンプ・コース
   ========================================================= */
.ld_stamps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: #d9d4c8;
  border: 1px solid #d9d4c8;
}
@media (max-width: 1024px) {
.ld_stamps {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 900px) {
.ld_stamps {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
.ld_stamps {
    grid-template-columns: 1fr 1fr;
  }
}
.ld_stamps a {
  background: #f2efe9;
  padding: 16px 14px;
  text-decoration: none;
  text-align: center;
}
.ld_stamps a:hover {
  background: #fbfaf7;
}
.ld_stamps a:hover strong {
  color: #b5331a;
}
.ld_stamps a b {
  display: block;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}
.ld_stamps a strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-top: 8px;
}
.ld_stamps a span {
  display: block;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  color: #615c51;
  margin-top: 4px;
}
.ld_steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  margin-top: 4px;
}
@media (max-width: 900px) {
.ld_steps {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
.ld_steps {
    grid-template-columns: 1fr;
  }
}
.ld_steps div {
  border-top: 2px solid #1c1a16;
  padding-top: 14px;
}
.ld_steps b {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #b5331a;
}
.ld_steps h3 {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: 17px;
  margin: 8px 0 6px;
}
.ld_steps p {
  font-size: 12.5px;
  line-height: 1.95;
  color: #57544c;
}
/* =========================================================
   会員まわり（スタンプラリー）
   ---------------------------------------------------------
   実装済みの機能に合わせた受け皿。未ログインと会員バーは
   JS（_jsStampAuth／_jsStampMember）で出し分けるので、
   カンプでは両方を並べて置いている。
   SNSボタンだけはブランド色を使う。装飾ではなく識別のための色。
   ========================================================= */
.ld_auth {
  border: 2px solid #1c1a16;
  background: #fbfaf7;
  margin-top: 4px;
}
.ld_auth_head {
  background: #1c1a16;
  color: #f2efe9;
  padding: 11px 18px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.ld_auth_head h3 {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
}
.ld_auth_head span {
  font-size: 11.5px;
  color: #a9a49a;
}
.ld_auth_body {
  padding: clamp(18px, 2.4vw, 26px);
}
.ld_auth_lead {
  font-size: 13.5px;
  line-height: 2;
  color: #57544c;
  margin-bottom: 18px;
}
.ld_auth_lead strong {
  font-weight: 700;
  color: #1c1a16;
}
/* SNSの色は「白抜き文字のブランド地」にしない。
   LINEの緑に白文字は 2.3:1、Facebookの青も 4.2:1 で AA に届かないため、
   紙地＋インクの文字にして、ブランド色は左の帯と枠線だけで identity を出す。 */
.ld_sns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 640px) {
.ld_sns {
    grid-template-columns: 1fr;
  }
}
.ld_sns a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  background: #fff;
  color: #1c1a16;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  border: 1px solid #d9d4c8;
  padding-left: 10px;
}
.ld_sns a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
}
.ld_sns a:hover {
  border-color: #1c1a16;
}
.ld_sns .is_google::before {
  background: #4285f4;
}
.ld_sns .is_line::before {
  background: #06c755;
}
.ld_sns .is_facebook::before {
  background: #1877f2;
}
.ld_auth_or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0 16px;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #615c51;
}
.ld_auth_or::before, .ld_auth_or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #d9d4c8;
}
.ld_auth_forms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.4vw, 28px);
}
@media (max-width: 640px) {
.ld_auth_forms {
    grid-template-columns: 1fr;
  }
}
.ld_auth_form h4 {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 12px;
}
.ld_auth_form input {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  color: #1c1a16;
  margin-bottom: 9px;
  border: 1px solid #d9d4c8;
  background: #f2efe9;
  padding: 11px 13px;
}
.ld_auth_form input:focus {
  outline: 0;
  border-color: #b5331a;
  background: #fff;
}
.ld_auth_form input::placeholder {
  color: #b3ada1;
}
.ld_auth_form button[type=submit] {
  width: 100%;
  border: 0;
  background: #b5331a;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 13px;
}
.ld_auth_form button[type=submit]:hover {
  background: #1c1a16;
}
.ld_auth_form .is_sub {
  background: transparent;
  color: #1c1a16;
  border: 1px solid #1c1a16;
}
.ld_auth_form .is_sub:hover {
  background: #1c1a16;
  color: #f2efe9;
}
.ld_auth_form p {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  line-height: 1.9;
  color: #615c51;
  margin-bottom: 9px;
}
.ld_auth_forgot {
  display: block;
  margin: 10px auto 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  color: #615c51;
  text-decoration: none;
}
.ld_auth_forgot:hover {
  color: #b5331a;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* ログイン後の会員バー */
.ld_member {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  border: 1px solid #1c1a16;
  background: #fbfaf7;
  padding: 13px 18px;
  margin-top: 4px;
}
.ld_member b {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: 16px;
}
.ld_member .ld_member_meta {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
}
.ld_member .ld_member_act {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
@media (max-width: 900px) {
.ld_member .ld_member_act {
    margin-left: 0;
    width: 100%;
  }
}
.ld_member button, .ld_member a {
  border: 1px solid #d9d4c8;
  background: #f2efe9;
  cursor: pointer;
  text-decoration: none;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #57544c;
  padding: 7px 12px;
}
.ld_member button:hover, .ld_member a:hover {
  border-color: #1c1a16;
  color: #1c1a16;
}
/* チェックイン */
.ld_checkin {
  border: 2px solid #b5331a;
  background: #fbfaf7;
  padding: clamp(18px, 2.4vw, 26px);
  margin-top: 18px;
  text-align: center;
}
.ld_checkin button {
  border: 0;
  background: #b5331a;
  color: #fff;
  cursor: pointer;
  width: 100%;
  max-width: 420px;
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 18px 24px;
}
.ld_checkin button:hover {
  background: #1c1a16;
}
.ld_checkin p {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  line-height: 1.9;
  color: #615c51;
  margin-top: 12px;
  text-align: left;
}
/* 集めた数 */
.ld_progress {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 20px;
  align-items: baseline;
  padding: 18px 0 0;
}
.ld_progress .ld_progress_label {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: #615c51;
}
.ld_progress .ld_progress_num {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ld_progress .ld_progress_num b {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 500;
  color: #b5331a;
}
.ld_progress .ld_progress_num span {
  font-size: 15px;
  color: #615c51;
}
.ld_progress {
  /* 実装では i の width を集めた割合で出力する。カンプは固定値 */
}
.ld_progress .ld_progress_bar {
  grid-column: 1/-1;
  height: 6px;
  background: #d9d4c8;
  margin-top: 10px;
}
.ld_progress .ld_progress_bar i {
  display: block;
  height: 100%;
  background: #b5331a;
}
.ld_progress .ld_progress_bar .is_p1 {
  width: 1%;
}
/* 集めたスタンプそのもの。押した1個ずつを台帳のマスに並べる。
   取れていないものも同じマスで薄く出して、残りが見えるようにする。 */
.ld_stamp_list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: #d9d4c8;
  border: 1px solid #d9d4c8;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
@media (max-width: 1024px) {
.ld_stamp_list {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 900px) {
.ld_stamp_list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
.ld_stamp_list {
    grid-template-columns: 1fr 1fr;
  }
}
.ld_stamp_cell {
  background: #f2efe9;
  padding: 16px 10px 14px;
  text-align: center;
}
.ld_stamp_cell a {
  text-decoration: none;
  display: block;
}
.ld_stamp_cell .ld_stamp_mark {
  width: 66px;
  height: 66px;
  margin: 0 auto 10px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px dashed #d9d4c8;
  color: #d9d4c8;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
}
.ld_stamp_cell .ld_stamp_mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ld_stamp_cell b {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.6;
  color: #615c51;
}
.ld_stamp_cell time {
  display: block;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  color: #d9d4c8;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.ld_stamp_cell.is_got {
  background: #fbfaf7;
}
.ld_stamp_cell.is_got .ld_stamp_mark {
  border: 2px solid #b5331a;
  color: #b5331a;
  box-shadow: inset 0 0 0 2px #f2efe9;
}
.ld_stamp_cell.is_got b {
  color: #1c1a16;
}
.ld_stamp_cell.is_got time {
  color: #b5331a;
}
.ld_stamp_cell.is_got a:hover b {
  color: #b5331a;
}
/* 都道府県別の取得状況 */
.ld_prefgrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: #d9d4c8;
  border: 1px solid #d9d4c8;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
@media (max-width: 1024px) {
.ld_prefgrid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 900px) {
.ld_prefgrid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
.ld_prefgrid {
    grid-template-columns: 1fr 1fr;
  }
}
.ld_prefgrid a {
  background: #f2efe9;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 13px;
  text-decoration: none;
  font-size: 13px;
}
.ld_prefgrid a:hover {
  background: #fbfaf7;
  color: #b5331a;
}
.ld_prefgrid .ld_pref_count {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  color: #615c51;
  font-variant-numeric: tabular-nums;
}
.ld_prefgrid .ld_pref_count b {
  color: #b5331a;
  font-weight: 500;
}
.ld_prefgrid .ld_pref_more {
  background: #fbfaf7;
  font-weight: 500;
}
/* 称号 */
.ld_badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
.ld_badges li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border: 1px solid #1c1a16;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
}
.ld_badges li em {
  font-style: normal;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  color: #615c51;
}
.ld_badges .is_locked {
  border-color: #d9d4c8;
  color: #615c51;
  font-weight: 400;
}
.ld_badges .is_empty {
  border: 1px dashed #d9d4c8;
  color: #615c51;
  font-weight: 400;
  font-size: 12.5px;
}
.ld_share {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.ld_share a, .ld_share button {
  border: 1px solid #1c1a16;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
  padding: 9px 16px;
  color: #1c1a16;
}
.ld_share a:hover, .ld_share button:hover {
  background: #1c1a16;
  color: #f2efe9;
}
/* =========================================================
   遊び方ガイド
   ========================================================= */
.ld_lesson_group {
  margin-top: clamp(26px, 3.4vw, 40px);
}
.ld_lesson_group > h3 {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: #b5331a;
  padding-bottom: 8px;
  border-bottom: 1px solid #1c1a16;
  margin-bottom: 4px;
}
.ld_lesson {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 18px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid #d9d4c8;
}
@media (max-width: 640px) {
.ld_lesson {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}
.ld_lesson h4 {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.5;
}
.ld_lesson p {
  font-size: 13.5px;
  line-height: 2;
  color: #57544c;
}
.ld_lesson .ld_lesson_point {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #b5331a;
  margin-top: 5px;
  letter-spacing: 0.04em;
}
/* =========================================================
   ゲーム詳細
   ========================================================= */
.ld_gamehead {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: clamp(24px, 3.4vw, 48px);
  align-items: center;
  padding: clamp(24px, 3vw, 38px) 0;
}
@media (max-width: 900px) {
.ld_gamehead {
    grid-template-columns: 1fr;
  }
}
.ld_gamehead p {
  font-size: 14.5px;
  line-height: 2.15;
  color: #57544c;
  margin-top: 14px;
}
.ld_play {
  border: 2px solid #1c1a16;
  background: #fbfaf7;
  padding: 20px;
}
.ld_play a {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #b5331a;
  color: #fff;
  text-decoration: none;
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 18px 20px;
}
.ld_play a:hover {
  background: #1c1a16;
}
.ld_play dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 14px;
  margin: 16px 0 0;
  font-size: 12.5px;
}
.ld_play dt {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
  letter-spacing: 0.04em;
}
.ld_play dd {
  margin: 0;
}
.ld_meter {
  display: flex;
  gap: 2px;
  margin-top: 14px;
}
.ld_meter i {
  flex: 1;
  height: 8px;
  background: #d9d4c8;
}
.ld_meter i.is_on {
  background: #b5331a;
}
/* =========================================================
   ゲーム一覧（本業から離れた区画なので、表で淡々と）
   ========================================================= */
.ld_games_table {
  width: 100%;
  font-size: 14px;
  margin-top: 4px;
}
.ld_games_table thead th {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #615c51;
  text-align: left;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid #1c1a16;
  white-space: nowrap;
}
@media (max-width: 900px) {
.ld_games_table thead th {
    display: none;
  }
}
.ld_games_table tbody tr {
  border-bottom: 1px solid #d9d4c8;
}
.ld_games_table tbody tr:hover {
  background: #fbfaf7;
}
@media (max-width: 900px) {
.ld_games_table tbody tr {
    display: block;
    padding: 14px 0;
  }
}
.ld_games_table td {
  padding: 14px 12px 14px 0;
  vertical-align: middle;
}
@media (max-width: 900px) {
.ld_games_table td {
    display: block;
    padding: 0;
  }
}
.ld_games_table h2, .ld_games_table h3 {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: 17px;
}
.ld_games_table h2 a, .ld_games_table h3 a {
  text-decoration: none;
}
.ld_games_table h2 a:hover, .ld_games_table h3 a:hover {
  color: #b5331a;
}
.ld_games_table p {
  font-size: 12.5px;
  line-height: 1.85;
  color: #57544c;
  margin-top: 3px;
}
.ld_games_table .ld_games_meta {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  color: #615c51;
  white-space: nowrap;
}
@media (max-width: 900px) {
.ld_games_table .ld_games_meta {
    margin-top: 6px;
    white-space: normal;
  }
}
.ld_games_table .ld_games_act {
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 900px) {
.ld_games_table .ld_games_act {
    text-align: left;
    margin-top: 10px;
  }
}
/* =========================================================
   フォーム（スマホでも 16px を割らない）
   ========================================================= */
.ld_form {
  max-width: 720px;
  margin-top: 4px;
}
.ld_form_row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid #d9d4c8;
}
.ld_form_row:first-child {
  border-top: 1px solid #1c1a16;
}
@media (max-width: 640px) {
.ld_form_row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
.ld_form_label {
  font-size: 14px;
  font-weight: 500;
  padding-top: 10px;
}
@media (max-width: 640px) {
.ld_form_label {
    padding-top: 0;
  }
}
.ld_form_label em {
  font-style: normal;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: #fff;
  background: #b5331a;
  padding: 2px 6px;
  margin-left: 8px;
  vertical-align: 2px;
}
.ld_form_label span {
  font-style: normal;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: #615c51;
  border: 1px solid #d9d4c8;
  padding: 2px 6px;
  margin-left: 8px;
  vertical-align: 2px;
}
.ld_form_field input, .ld_form_field textarea, .ld_form_field select {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  color: #1c1a16;
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
  padding: 11px 13px;
}
.ld_form_field input:focus, .ld_form_field textarea:focus, .ld_form_field select:focus {
  outline: 0;
  border-color: #b5331a;
  background: #fff;
}
.ld_form_field input::placeholder, .ld_form_field textarea::placeholder, .ld_form_field select::placeholder {
  color: #b3ada1;
}
.ld_form_field textarea {
  line-height: 1.9;
  resize: vertical;
  min-height: 170px;
}
.ld_form_field p {
  font-size: 11.5px;
  line-height: 1.9;
  color: #615c51;
  margin-top: 7px;
}
.ld_form_submit {
  margin-top: clamp(24px, 3vw, 34px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}
.ld_form_submit button {
  border: 0;
  background: #b5331a;
  color: #fff;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 16px 44px;
}
.ld_form_submit button:hover {
  background: #1c1a16;
}
.ld_form_submit p {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  line-height: 1.9;
  color: #615c51;
}
/* =========================================================
   コース詳細（立ち寄り順に並べる）
   ---------------------------------------------------------
   地図ではなく順路の表。何番目にどこへ寄って、次まで何kmか。
   ========================================================= */
.ld_route {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  counter-reset: route;
}
.ld_route_item {
  counter-increment: route;
  position: relative;
  display: grid;
  grid-template-columns: 46px 120px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #d9d4c8;
}
.ld_route_item:first-child {
  border-top: 1px solid #1c1a16;
}
@media (max-width: 640px) {
.ld_route_item {
    grid-template-columns: 34px 1fr;
    gap: 12px;
  }
}
.ld_route_item::before {
  content: counter(route, decimal-leading-zero);
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  color: #fff;
  background: #1c1a16;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  letter-spacing: 0.02em;
}
.ld_route_item div.ld_route_shot {
  aspect-ratio: 3/2;
  overflow: hidden;
  background: #d9d4c8;
}
@media (max-width: 640px) {
.ld_route_item div.ld_route_shot {
    display: none;
  }
}
.ld_route_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ld_route_item h3 {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.5;
}
.ld_route_item h3 a {
  text-decoration: none;
}
.ld_route_item h3 a:hover {
  color: #b5331a;
}
.ld_route_item p {
  font-size: 12.5px;
  line-height: 1.85;
  color: #57544c;
  margin-top: 3px;
}
.ld_route_item .ld_route_meta {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  color: #615c51;
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
.ld_route_item .ld_route_meta {
    grid-column: 2;
    text-align: left;
    margin-top: 6px;
  }
}
.ld_route_item.is_stay::before {
  background: #b5331a;
}
.ld_route_gap {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 18px;
  align-items: center;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
  padding: 8px 0;
}
@media (max-width: 640px) {
.ld_route_gap {
    grid-template-columns: 34px 1fr;
    gap: 12px;
  }
}
.ld_route_gap span:first-child {
  text-align: center;
  color: #d9d4c8;
}
/* =========================================================
   チャンネル／メーカー
   ========================================================= */
.ld_profile_head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  padding: clamp(22px, 3vw, 34px) 0;
}
@media (max-width: 640px) {
.ld_profile_head {
    grid-template-columns: 1fr;
  }
}
.ld_profile_head div.ld_profile_shot {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #d9d4c8;
  border: 1px solid #d9d4c8;
}
.ld_profile_head img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ld_profile_head p {
  font-size: 14px;
  line-height: 2.1;
  color: #57544c;
  margin-top: 12px;
}
.ld_profile_meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 14px;
}
.ld_profile_meta span, .ld_profile_meta a {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #57544c;
  border: 1px solid #d9d4c8;
  padding: 4px 9px;
  text-decoration: none;
}
.ld_profile_meta a:hover {
  border-color: #1c1a16;
  color: #1c1a16;
}
.ld_channels {
  border-top: 1px solid #1c1a16;
}
.ld_channel_item {
  display: grid;
  grid-template-columns: 132px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid #d9d4c8;
  text-decoration: none;
}
.ld_channel_item:hover h3 {
  color: #b5331a;
}
@media (max-width: 640px) {
.ld_channel_item {
    grid-template-columns: 92px 1fr;
  }
}
.ld_channel_item div.ld_channel_shot {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #d9d4c8;
}
.ld_channel_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ld_channel_item h3 {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.6;
}
.ld_channel_item p {
  font-size: 12px;
  line-height: 1.8;
  color: #57544c;
  margin-top: 2px;
}
.ld_channel_item em {
  font-style: normal;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
  white-space: nowrap;
}
@media (max-width: 640px) {
.ld_channel_item em {
    display: none;
  }
}
.ld_videos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 24px);
}
@media (max-width: 900px) {
.ld_videos {
    grid-template-columns: 1fr 1fr;
  }
}
.ld_videos a {
  text-decoration: none;
}
.ld_videos a:hover h3 {
  color: #b5331a;
}
.ld_videos a div {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #d9d4c8;
}
.ld_videos a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ld_videos a h3 {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.7;
  margin-top: 9px;
}
.ld_videos a time {
  display: block;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  color: #615c51;
  margin-top: 4px;
}
/* =========================================================
   掲示板
   ========================================================= */
.ld_bbs {
  border-top: 1px solid #1c1a16;
}
.ld_bbs_row {
  display: grid;
  grid-template-columns: 1fr 88px 120px;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #d9d4c8;
  text-decoration: none;
}
.ld_bbs_row:hover h3 {
  color: #b5331a;
}
@media (max-width: 640px) {
.ld_bbs_row {
    grid-template-columns: 1fr auto;
  }
}
.ld_bbs_row h3 {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.6;
}
.ld_bbs_row small {
  display: block;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  color: #615c51;
  margin-top: 3px;
}
.ld_bbs_row .ld_bbs_count {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  color: #615c51;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ld_bbs_row .ld_bbs_count b {
  font-size: 15px;
  color: #1c1a16;
  font-weight: 500;
}
.ld_bbs_row .ld_bbs_time {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
  text-align: right;
}
@media (max-width: 640px) {
.ld_bbs_row .ld_bbs_time {
    display: none;
  }
}
.ld_posts {
  margin-top: 18px;
}
.ld_post {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #d9d4c8;
}
.ld_post:first-child {
  border-top: 1px solid #1c1a16;
}
.ld_post .ld_post_no {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  color: #615c51;
  font-variant-numeric: tabular-nums;
}
.ld_post .ld_post_head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
}
.ld_post .ld_post_head b {
  font-size: 12.5px;
  color: #1c1a16;
  font-weight: 500;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}
.ld_post p {
  font-size: 13.5px;
  line-height: 2;
  margin-top: 7px;
}
/* =========================================================
   CMS 側の既存クラスへの橋渡し
   ---------------------------------------------------------
   プラグイン（spot／post_list ほか）が出す絞り込み・件数・ページャは
   クラス名が旧いまま。HTML を書き換えるより、ここで D案の見た目を
   当てたほうが壊れにくいので、対応するものだけ寄せる。
   ========================================================= */
.spot_search_panel, .guide_filter, .spot_db_tabs {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}
.spot_db_title, .section_title {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: 0.02em;
  padding-bottom: 12px;
  border-bottom: 2px solid #1c1a16;
  margin: clamp(30px, 4vw, 48px) 0 4px;
  position: relative;
}
.spot_db_title::after, .section_title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 72px;
  height: 2px;
  background: #b5331a;
}
.spot_search_panel_row, .spot_search_panel_aux {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 12px 0;
  border-bottom: 1px solid #d9d4c8;
}
.spot_db_form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.spot_db_select, .spot_db_input {
  font-family: inherit;
  font-size: 16px;
  color: #1c1a16;
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
  padding: 10px 12px;
}
.spot_db_select:focus, .spot_db_input:focus {
  outline: 0;
  border-color: #b5331a;
  background: #fff;
}
.spot_db_input {
  flex: 1;
  min-width: 200px;
}
/* 旧テーマから残っている汎用のボタン。D案の pd_btn と同じ大きさ・同じ見た目に
   そろえる。指定が無いままだと各ページの CSS 任せになり、高さ 24px の
   押しにくいボタンが出ていた（/course/ で実測）。 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 20px;
  box-sizing: border-box;
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid #b5331a;
  background: #b5331a;
  color: #fff;
  text-decoration: none;
  border-radius: 0;
  cursor: pointer;
}
.btn:hover {
  background: #1c1a16;
  border-color: #1c1a16;
  color: #fff;
}
.btn_sub, .btn.btn_sub {
  background: transparent;
  border-color: #d9d4c8;
  color: #57544c;
  font-weight: 500;
}
.btn_sub:hover, .btn.btn_sub:hover {
  background: transparent;
  border-color: #1c1a16;
  color: #1c1a16;
}
.spot_db_submit, .btn.spot_db_submit {
  border: 0;
  background: #b5331a;
  color: #fff;
  cursor: pointer;
  border-radius: 0;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  padding: 11px 24px;
}
.spot_db_submit:hover, .btn.spot_db_submit:hover {
  background: #1c1a16;
}
.guide_filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.guide_filter_btn, .spot_db_tab, .spot_visited_toggle {
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  padding: 7px 14px;
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
  color: #1c1a16;
  border-radius: 0;
}
.guide_filter_btn:hover, .spot_db_tab:hover, .spot_visited_toggle:hover {
  border-color: #1c1a16;
}
.guide_filter_btn.is_active, .spot_db_tab.is_active, .spot_visited_toggle.is_active {
  background: #1c1a16;
  border-color: #1c1a16;
  color: #f2efe9;
}
.guide_filter_checkbox_item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  white-space: nowrap;
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
  padding: 6px 13px;
  cursor: pointer;
}
.guide_filter_checkbox_item input {
  width: 15px;
  height: 15px;
  accent-color: #b5331a;
  margin: 0;
}
/* 「泊まったところだけ」のトグル（role="switch"）。
   本体は <a class="spot_visited_toggle"><span class="spot_visited_box">…テキスト</a> で、
   .spot_visited_box が四角いチェックボックスの見た目を担う。未定義だと文字だけが浮く。 */
.spot_visited_toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
  color: #1c1a16;
  text-decoration: none;
  padding: 6px 13px 6px 10px;
  cursor: pointer;
}
.spot_visited_toggle:hover {
  border-color: #1c1a16;
}
.spot_visited_toggle[aria-checked=true], .spot_visited_toggle.is_on {
  border-color: #b5331a;
  color: #b5331a;
}
.spot_visited_box {
  position: relative;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #615c51;
  background: #fff;
}
[aria-checked=true] .spot_visited_box, .is_on .spot_visited_box {
  background: #b5331a;
  border-color: #b5331a;
}
[aria-checked=true] .spot_visited_box::after, .is_on .spot_visited_box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.spot_db_meta {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
  letter-spacing: 0.04em;
  padding: 14px 0 18px;
  font-variant-numeric: tabular-nums;
}
.spot_db_credit, .about_text {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  line-height: 1.9;
  color: #615c51;
  padding-top: 14px;
}
.guide_card_credit {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 2;
  background: rgba(28, 26, 22, 0.6);
  color: #fff;
  text-decoration: none;
  font-size: 10px;
  line-height: 1;
  padding: 3px 5px;
}
.pd_c_shot div {
  position: relative;
}
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin-top: clamp(28px, 3.4vw, 42px);
  padding: 18px 0 0;
  border-top: 1px solid #1c1a16;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.pagination li {
  list-style: none;
}
.pagination a, .pagination span {
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  text-decoration: none;
  border: 1px solid #d9d4c8;
  padding: 0 12px;
  border-radius: 0;
}
.pagination a:hover {
  border-color: #1c1a16;
}
.pagination .is_active, .pagination .current {
  background: #b5331a;
  border-color: #b5331a;
  color: #fff;
}
/* ---------- スタンプラリー（stamprally プラグインの出力） ----------
   会員登録・ログイン・チェックイン・称号・県別の進捗。
   D案カンプの .ld_auth / .ld_checkin / .ld_badges と同じ見た目に寄せる。 */
.stamp_auth {
  border: 2px solid #1c1a16;
  background: #fbfaf7;
  margin-top: 18px;
  padding: clamp(18px, 2.4vw, 26px);
}
.stamp_auth_lead {
  font-size: 13.5px;
  line-height: 2;
  color: #57544c;
  margin-bottom: 18px;
}
.stamp_auth_lead strong {
  font-weight: 700;
  color: #1c1a16;
}
.stamp_sns {
  margin-bottom: 4px;
}
.stamp_sns_lead {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: #615c51;
  margin-bottom: 10px;
}
/* SNS の入口。4 つあるのに 3 列で組んでいたため、4 つ目だけが次の行に
   取り残され、しかも 135px の幅に「Yahoo! JAPAN で続ける」が入りきらず
   2 行に折れていた。2 列 2 行にして、どのボタンも 1 行で収まる幅にする。
   下の「または メールアドレスで」の区切りも、同じ幅にそろえる。 */
.stamp_sns_btns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 460px;
  margin-inline: auto;
}
@media (max-width: 640px) {
.stamp_sns_btns {
    grid-template-columns: 1fr;
    max-width: none;
  }
}
/* SNS はブランド色の地に白文字だと AA を割る（LINE 2.3:1）。
   紙地＋インク文字にして、ブランド色は左の帯だけで見分けさせる。 */
.stamp_sns_btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  padding-left: 10px;
  background: #fff !important;
  color: #1c1a16 !important;
  border: 1px solid #d9d4c8 !important;
}
.stamp_sns_btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
}
.stamp_sns_btn:hover {
  border-color: #1c1a16 !important;
}
.stamp_sns_btn_google::before {
  background: #4285f4;
}
.stamp_sns_btn_line::before {
  background: #06c755;
}
.stamp_sns_btn_facebook::before {
  background: #1877f2;
}
.stamp_sns_or, .stamp_auth_or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px auto 16px;
  /* ボタン群と同じ幅に収める。本文いっぱい（1072px）に伸びていて、
     420px のボタン群とまったく揃っていなかった。 */
  max-width: 460px;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #615c51;
  /* 旧テーマは「全幅に 1 本線を絶対配置し、文字に地色を敷いて線を隠す」組みだった。
     その position: absolute が旧テーマ由来の層から残っていて、
     ::before が文字を貫く 1 本線のまま、::after だけが flex の線として右に伸び、
     「または」に線が突き刺さっていた。地色で隠す方式は地が変わるたびに破綻するので、
     文字の左右に線を置く組みへ寄せきる。 */
}
.stamp_sns_or::before, .stamp_sns_or::after, .stamp_auth_or::before, .stamp_auth_or::after {
  content: "";
  position: static;
  flex: 1 1 0;
  height: 1px;
  background: #d9d4c8;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
}
.stamp_sns_or span, .stamp_auth_or span {
  flex: 0 0 auto;
  position: static;
  padding: 0;
  background: none;
  white-space: nowrap;
}
@media (max-width: 640px) {
.stamp_sns_or, .stamp_auth_or {
    max-width: none;
  }
}
/* ログインまわりの入れ物も同じ幅にそろえる（ボタン・区切り・入力欄が一列に見えるように） */
.stamp_auth_lead, .stamp_sns_note {
  max-width: 460px;
  margin-inline: auto;
  text-align: center;
}
.stamp_auth_forms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.4vw, 28px);
}
@media (max-width: 640px) {
.stamp_auth_forms {
    grid-template-columns: 1fr;
  }
}
.stamp_auth_title {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 12px;
}
.stamp_auth_input {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  color: #1c1a16;
  margin-bottom: 9px;
  border: 1px solid #d9d4c8;
  background: #f2efe9;
  padding: 11px 13px;
}
.stamp_auth_input:focus {
  outline: 0;
  border-color: #b5331a;
  background: #fff;
}
.stamp_auth_input::placeholder {
  color: #b3ada1;
}
.stamp_auth_btn {
  width: 100%;
  border: 0;
  background: #b5331a;
  color: #fff;
  cursor: pointer;
  border-radius: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 13px;
}
.stamp_auth_btn:hover {
  background: #1c1a16;
}
.stamp_auth_btn.stamp_auth_btn_sub {
  background: transparent;
  color: #1c1a16;
  border: 1px solid #1c1a16;
}
.stamp_auth_btn.stamp_auth_btn_sub:hover {
  background: #1c1a16;
  color: #f2efe9;
}
.stamp_auth_forgot {
  display: block;
  margin: 10px auto 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  color: #615c51;
  text-decoration: none;
}
.stamp_auth_forgot:hover {
  color: #b5331a;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.stamp_member {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  border: 1px solid #1c1a16;
  background: #fbfaf7;
  padding: 13px 18px;
  margin-top: 18px;
}
.stamp_member b, .stamp_member strong {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: 16px;
}
.stamp_member_logout, .stamp_link_add, .stamp_transfer_btn {
  border: 1px solid #d9d4c8;
  background: #f2efe9;
  cursor: pointer;
  border-radius: 0;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #57544c;
  padding: 7px 12px;
  text-decoration: none;
}
.stamp_member_logout:hover, .stamp_link_add:hover, .stamp_transfer_btn:hover {
  border-color: #1c1a16;
  color: #1c1a16;
}
.stamp_checkin {
  border: 2px solid #b5331a;
  background: #fbfaf7;
  padding: clamp(18px, 2.4vw, 26px);
  margin-top: 18px;
  text-align: center;
}
.stamp_checkin_btn {
  border: 0;
  background: #b5331a;
  color: #fff;
  cursor: pointer;
  width: 100%;
  max-width: 420px;
  border-radius: 0;
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 18px 24px;
}
.stamp_checkin_btn:hover {
  background: #1c1a16;
}
.stamp_checkin_note {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  line-height: 1.9;
  color: #615c51;
  margin-top: 12px;
  text-align: left;
}
.stamp_checkin_result {
  font-size: 13.5px;
  line-height: 1.9;
  margin-top: 12px;
}
.stamp_summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  padding: 18px 0 0;
}
.stamp_summary_label {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: #615c51;
}
.stamp_summary_count {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 500;
}
.stamp_summary_count .stamp_summary_have {
  color: #b5331a;
}
.stamp_sub_title {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(17px, 2.2vw, 21px);
  padding-bottom: 10px;
  border-bottom: 1px solid #1c1a16;
  margin: clamp(26px, 3.4vw, 38px) 0 4px;
}
.stamp_book_nav {
  padding-top: 4px;
}
.stamp_book_group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 12px 0;
  border-bottom: 1px solid #d9d4c8;
}
.stamp_book_group_label {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #615c51;
  width: 76px;
  flex-shrink: 0;
}
@media (max-width: 640px) {
.stamp_book_group_label {
    width: 100%;
  }
}
.stamp_pref_grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: #d9d4c8;
  border: 1px solid #d9d4c8;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
@media (max-width: 1024px) {
.stamp_pref_grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 900px) {
.stamp_pref_grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
.stamp_pref_grid {
    grid-template-columns: 1fr 1fr;
  }
}
.stamp_pref {
  list-style: none;
}
.stamp_pref_link {
  background: #f2efe9;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 13px;
  text-decoration: none;
  font-size: 13px;
}
.stamp_pref_link:hover {
  background: #fbfaf7;
  color: #b5331a;
}
.stamp_pref_count {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  color: #615c51;
  font-variant-numeric: tabular-nums;
}
.stamp_pref_count .stamp_pref_have {
  color: #b5331a;
  font-weight: 500;
}
.stamp_badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
.stamp_badges li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border: 1px solid #1c1a16;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  list-style: none;
}
.stamp_badges .stamp_empty {
  border: 1px dashed #d9d4c8;
  color: #615c51;
  font-weight: 400;
  font-size: 12.5px;
}
.stamp_list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: #d9d4c8;
  border: 1px solid #d9d4c8;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
@media (max-width: 1024px) {
.stamp_list {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 900px) {
.stamp_list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
.stamp_list {
    grid-template-columns: 1fr 1fr;
  }
}
.stamp_list li {
  background: #f2efe9;
  padding: 14px 10px;
  text-align: center;
  list-style: none;
  font-size: 12.5px;
}
.stamp_share {
  padding-top: 4px;
}
.stamp_share_btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.stamp_share_btn {
  border: 1px solid #1c1a16;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  border-radius: 0;
  font-size: 12.5px;
  font-weight: 500;
  padding: 9px 16px;
  color: #1c1a16;
}
.stamp_share_btn:hover {
  background: #1c1a16;
  color: #f2efe9;
}
.stamp_link, .stamp_reset_req, .stamp_intro_link_wrap {
  margin-top: 14px;
}
.stamp_intro_link {
  display: inline-block;
  text-decoration: none;
  border: 1px solid #b5331a !important;
  color: #b5331a !important;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 0 !important;
  background: transparent !important;
}
.stamp_intro_link:hover {
  background: #b5331a !important;
  color: #fff !important;
}
.stamp_link_msg, .stamp_auth_msg {
  font-size: 12.5px;
  line-height: 1.9;
  color: #57544c;
  margin-top: 8px;
}
/* 技術ブログ一覧（PostList の layout="tech"）。
   .tech_filter のピルと .tech_grid > .tech_card を D案 の罫線カードに寄せる。 */
.tech_filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px 0;
  border-top: 1px solid #1c1a16;
  border-bottom: 1px solid #d9d4c8;
  margin-top: 18px;
}
.tech_filter_btn {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
  color: #1c1a16;
  border-radius: 0;
}
.tech_filter_btn:hover {
  border-color: #1c1a16;
}
.tech_filter_btn.is_active {
  background: #1c1a16;
  border-color: #1c1a16;
  color: #f2efe9;
}
.tech_filter_btn .tech_filter_num {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
  font-variant-numeric: tabular-nums;
}
.tech_filter_btn.is_active .tech_filter_num {
  color: #a9a49a;
}
.tech_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(24px, 4vw, 56px);
}
@media (max-width: 640px) {
.tech_grid {
    grid-template-columns: 1fr;
  }
}
.tech_card {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 4px 16px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid #d9d4c8;
  text-decoration: none;
}
.tech_card:hover .tech_card_title {
  color: #b5331a;
}
.tech_card .tech_card_index {
  grid-row: 1/span 3;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  color: #b5331a;
  letter-spacing: 0.06em;
  padding-top: 3px;
}
.tech_card .tech_card_meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
  letter-spacing: 0.04em;
}
.tech_card .tech_card_cat {
  color: #b5331a;
  letter-spacing: 0.08em;
}
.tech_card .tech_card_title {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.55;
  margin: 6px 0 0;
  word-break: auto-phrase;
}
.tech_card .tech_card_text {
  font-size: 12.5px;
  line-height: 1.95;
  color: #57544c;
  margin-top: 6px;
}
.tech_card {
  /* URL の行は台帳の「整理番号」の見立て。小さく、朱ではなく灰で */
}
.tech_card .tech_card_path {
  grid-column: 2;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  color: #615c51;
  margin-top: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ---------- 全ページ共通の骨格 ----------
   [page_head] とパンくずは全36ページに出る。ここが当たっていないと
   どのページも頭から崩れて見えるので、最優先で寄せる。 */
.page_head {
  padding: 0;
}
.page_head_inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 36px;
}
@media (max-width: 900px) {
.page_head_inner {
    padding: 0 24px;
  }
}
@media (max-width: 640px) {
.page_head_inner {
    padding: 0 16px;
  }
}
.page_head_eyebrow {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: #b5331a;
  margin: clamp(18px, 2.4vw, 26px) 0 0;
}
.page_head_title {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.45;
  text-wrap: balance;
  margin: 10px 0 0;
  padding-bottom: 14px;
  border-bottom: 2px solid #1c1a16;
  position: relative;
}
.page_head_title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 72px;
  height: 2px;
  background: #b5331a;
}
.page_head_lead {
  max-width: 760px;
  font-size: 14.5px;
  line-height: 2.15;
  color: #57544c;
  padding: clamp(18px, 2.4vw, 26px) 0 0;
}
.breadcrumb, .breadcrumb_list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: #615c51;
}
.breadcrumb a, .breadcrumb_list a {
  text-decoration: none;
}
.breadcrumb a:hover, .breadcrumb_list a:hover {
  color: #b5331a;
}
.breadcrumb {
  padding-top: 14px;
}
.breadcrumb_item {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}
.breadcrumb_item::after {
  content: "/";
  color: #d9d4c8;
}
.breadcrumb_item:last-child::after {
  content: none;
}
.breadcrumb_link {
  text-decoration: none;
}
.breadcrumb_link:hover {
  color: #b5331a;
}
/* セクションのラッパ（旧テーマの .section_inner / .guide / .stay_guide_page） */
.section_inner, .about_inner, .archive_inner, .news_archive_inner, .channel_archive_inner, .maker_archive_inner, .gear_archive, .bbs_inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 36px;
}
@media (max-width: 900px) {
.section_inner, .about_inner, .archive_inner, .news_archive_inner, .channel_archive_inner, .maker_archive_inner, .gear_archive, .bbs_inner {
    padding: 0 24px;
  }
}
@media (max-width: 640px) {
.section_inner, .about_inner, .archive_inner, .news_archive_inner, .channel_archive_inner, .maker_archive_inner, .gear_archive, .bbs_inner {
    padding: 0 16px;
  }
}
.guide, .stay_guide_page, .about_page, .archive_page, .news_page, .channel_archive, body .bbs {
  display: block;
  padding-bottom: clamp(30px, 4vw, 50px);
}
.section_title_light, .about_section_title {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(20px, 2.7vw, 28px);
  letter-spacing: 0.02em;
  padding-bottom: 12px;
  border-bottom: 2px solid #1c1a16;
  margin: clamp(34px, 4.4vw, 52px) 0 4px;
  position: relative;
}
.section_title_light::after, .about_section_title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 64px;
  height: 2px;
  background: #b5331a;
}
.section_lead, .section_lead_light, .guide_lead, .about_pull {
  font-size: 14px;
  line-height: 2.1;
  color: #57544c;
  max-width: 760px;
  padding: 16px 0 10px;
}
.pagination_link {
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 12.5px;
  text-decoration: none;
  border: 1px solid #d9d4c8;
  padding: 0 12px;
}
.pagination_link:hover {
  border-color: #1c1a16;
}
.pagination_link.is_active, .pagination_link.is_current {
  background: #b5331a;
  border-color: #b5331a;
  color: #fff;
}
/* バナー型の回遊導線（.stamp_cta）。絵文字アイコンは既存データなのでそのまま活かす */
.stamp_cta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
  text-decoration: none;
  padding: 16px 20px;
  margin: 14px 0 0;
}
.stamp_cta:hover {
  border-color: #b5331a;
}
.stamp_cta:hover .stamp_cta_title {
  color: #b5331a;
}
.stamp_cta_icon {
  font-size: 22px;
  line-height: 1;
}
.stamp_cta_title {
  display: block;
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
}
.stamp_cta_text {
  display: block;
  font-size: 12.5px;
  line-height: 1.9;
  color: #57544c;
  margin-top: 3px;
}
.stamp_cta_arrow {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  color: #b5331a;
}
/* 記事一覧（blog／maruko／labo／meshi／carcamp の .archive_*） */
.archive_list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(24px, 4vw, 56px);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 640px) {
.archive_list {
    grid-template-columns: 1fr;
  }
}
.archive_item {
  list-style: none;
}
.archive_link {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #d9d4c8;
  text-decoration: none;
}
.archive_link:hover .archive_title {
  color: #b5331a;
}
@media (max-width: 640px) {
.archive_link {
    grid-template-columns: 88px 1fr;
  }
}
.archive_thumb, .archive_thumb_none {
  /* 幅は升にまかせる。旧テーマから引き継いだ組みが width: 168px を
     持ち込んでいて、116px の升から 52px はみ出し、本文の上に重なっていた。 */
  width: 100%;
  aspect-ratio: 3/2;
  overflow: hidden;
  background: #d9d4c8;
}
.archive_thumb img, .archive_thumb_none img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.archive_meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  color: #615c51;
  letter-spacing: 0.04em;
}
.archive_cat {
  color: #b5331a;
  letter-spacing: 0.08em;
}
.archive_title {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.55;
  margin-top: 5px;
  word-break: auto-phrase;
}
.archive_excerpt {
  font-size: 12px;
  line-height: 1.9;
  color: #57544c;
  margin-top: 4px;
}
.skip_link {
  position: absolute;
  left: -9999px;
}
.skip_link:focus {
  left: 8px;
  top: 8px;
  z-index: 200;
  background: #1c1a16;
  color: #f2efe9;
  padding: 8px 14px;
}
/* =========================================================
   技術ブログ専用パーツ
   ---------------------------------------------------------
   技術ブログを「見せどころ」にするための追加パーツ。記事テンプレート
   （.ld_body）の中で、実測ボックス（.ld_meas）とコードブロックを
   同格で使い分ける。色は紙・インク・朱の3色から出ない：
   コードのハイライトは JS ライブラリを増やさず、インク地＋朱の
   強調だけで見せる（構文の色分けはしない＝サイトのトーンを優先）。
   ========================================================= */
/* スタック・カテゴリのタグ（kicker に添える） */
.ld_stack {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ld_stack span {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #1c1a16;
  border: 1px solid #1c1a16;
  padding: 2px 8px;
}
/* コードブロック：ファイル名・言語のヘッダー行＋行番号つき本体。
   インク地に生成りの文字＝台帳の「測定機の画面」の見立て。 */
.ld_code {
  margin: clamp(24px, 3.2vw, 34px) 0;
  background: #1c1a16;
  color: #f2efe9;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.9;
  border-left: 3px solid #f47a55;
}
.ld_code_head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px solid rgba(242, 239, 233, 0.16);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: #a9a49a;
}
.ld_code_head .ld_code_file {
  color: #f2efe9;
  font-weight: 500;
}
.ld_code_head .ld_code_lang {
  margin-left: auto;
  color: #f47a55;
}
.ld_code_body {
  display: block;
  overflow-x: auto;
  margin: 0;
  padding: 14px 18px;
  counter-reset: line;
}
.ld_code_line {
  display: block;
  white-space: pre;
}
.ld_code_line::before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  width: 2em;
  margin-right: 14px;
  text-align: right;
  color: #6b6659;
  user-select: none;
}
.ld_code_line.is_mark {
  background: rgba(244, 122, 85, 0.14);
  box-shadow: inset 3px 0 0 #f47a55;
}
/* diff：追加＝朱のかすかな背景、削除＝取り消し線＋淡色。緑赤は使わない（3色維持） */
.ld_code_line.is_add {
  background: rgba(244, 122, 85, 0.14);
}
.ld_code_line.is_add::before {
  content: "+";
  color: #f47a55;
}
.ld_code_line.is_del {
  color: #8e897e;
  text-decoration: line-through;
  text-decoration-color: rgba(142, 137, 126, 0.6);
}
.ld_code_line.is_del::before {
  content: "−";
  color: #8e897e;
}
/* ターミナル：コマンドと実行結果。プロンプト記号だけで会話を作る */
.ld_terminal {
  margin: clamp(24px, 3.2vw, 34px) 0;
  background: #1c1a16;
  color: #f2efe9;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 12.5px;
  line-height: 2;
  border-left: 3px solid #615c51;
  padding: 14px 18px;
}
.ld_terminal_cmd {
  color: #f2efe9;
}
.ld_terminal_cmd::before {
  content: "$ ";
  color: #f47a55;
}
.ld_terminal_out {
  color: #a9a49a;
  white-space: pre-wrap;
}
/* before/after の左右比較（コードでなく、挙動や数値を並べる時） */
.ld_ba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #d9d4c8;
  border: 1px solid #d9d4c8;
  margin: clamp(24px, 3.2vw, 34px) 0;
}
@media (max-width: 640px) {
.ld_ba {
    grid-template-columns: 1fr;
  }
}
.ld_ba section {
  background: #f2efe9;
  padding: 16px 18px;
}
.ld_ba section:last-child {
  background: #fbfaf7;
}
.ld_ba h4 {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #615c51;
  font-weight: 500;
  margin-bottom: 10px;
}
.ld_ba section:last-child h4 {
  color: #b5331a;
}
.ld_ba pre, .ld_ba code {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}
/* =========================================================
   旧テーマのクラスへの橋渡し（残り）
   ---------------------------------------------------------
   記事詳細・ギア・YouTube・メーカー・掲示板・検索・まんが・
   ゲーム詳細／遊び方など、プラグインと旧 site_module が出すクラス。
   ひとつずつ作り直すより、役割ごとにまとめて D案 の見た目へ寄せる。
   ========================================================= */
/* --- 記事・固定ページの共通枠 --- */
.article, .contact, .privacy_policy, .editor, .mod_cont {
  display: block;
}
.article_inner, .contact_inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 36px;
}
@media (max-width: 900px) {
.article_inner, .contact_inner {
    padding: 0 24px;
  }
}
@media (max-width: 640px) {
.article_inner, .contact_inner {
    padding: 0 16px;
  }
}
.article_head {
  padding-top: clamp(20px, 2.6vw, 30px);
}
.article_cat {
  display: inline-block;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: #b5331a;
}
.article_title, .contact_title {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.5;
  margin: 10px 0 0;
  text-wrap: balance;
}
.article_date, .article_meta {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
  letter-spacing: 0.04em;
  margin-top: 10px;
}
.article_lead, .contact_lead {
  font-size: 15px;
  line-height: 2.15;
  color: #57544c;
  margin-top: 16px;
}
.article_thumb {
  margin: clamp(20px, 2.6vw, 30px) 0;
}
.article_thumb img {
  width: 100%;
  height: auto;
}
/* 本文は記事テンプレートと同じ組みにする（見出し・段落・表・引用） */
.article_body, .editor, .mod_cont {
  font-size: 15.5px;
  line-height: 2.15;
}
.article_body h2, .editor h2, .mod_cont h2 {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 27px);
  line-height: 1.55;
  margin: clamp(38px, 5vw, 60px) 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #1c1a16;
  position: relative;
}
.article_body h2::after, .editor h2::after, .mod_cont h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 56px;
  height: 2px;
  background: #b5331a;
}
.article_body h3, .editor h3, .mod_cont h3 {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(17px, 2.1vw, 21px);
  line-height: 1.6;
  margin: clamp(28px, 3.4vw, 40px) 0 12px;
}
.article_body p, .editor p, .mod_cont p {
  margin: 0 0 22px;
}
.article_body, .editor, .mod_cont {
  /* 読みものの本文だけは、文中のリンクに下線を残す。
     地の文にまぎれるので、色だけでは見落とされる。 */
}
.article_body a:not([class]), .editor a:not([class]), .mod_cont a:not([class]) {
  color: #b5331a;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article_body a:not([class]):hover, .editor a:not([class]):hover, .mod_cont a:not([class]):hover {
  text-decoration: none;
}
.article_body strong, .editor strong, .mod_cont strong {
  font-weight: 700;
}
.article_body, .editor, .mod_cont {
  /* 文中に差しこむ短いコード。紙の上の小さな箱。
     行の途中で切れると読めなくなるので、途中では折らない。 */
}
.article_body code, .editor code, .mod_cont code {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.92em;
  background: #ebe6db;
  padding: 2px 6px;
  border: 1px solid #d9d4c8;
  /* 短い識別子は 1 行に収まり、収まらないものだけ折る。
     nowrap にすると、長いものが行からはみ出して横に流れてしまう。 */
  overflow-wrap: anywhere;
}
.article_body, .editor, .mod_cont {
  /* コードのかたまり。
     pre の中の code にも、上の「文中の小さな箱」がそのまま当たっていた。
     code は inline なので、折り返した行がそれぞれ別の箱になり、
     行間 30px と相まって、離れた箱が縦にバラバラと並ぶ状態だった。
     D案のコードブロック（.ld_code）と同じ、インク地に生成りの文字で組み直す。 */
}
.article_body pre, .editor pre, .mod_cont pre {
  margin: clamp(24px, 3.2vw, 34px) 0;
  padding: 16px 18px;
  background: #1c1a16;
  color: #f2efe9;
  border-left: 3px solid #f47a55;
  overflow-x: auto;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.9;
}
.article_body pre code, .editor pre code, .mod_cont pre code {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
  white-space: pre;
}
.article_body, .editor, .mod_cont {
  /* 本文の箇条書きは、読みものとして点や番号を出す（リセットで落としたぶんを戻す）。
     ただし戻すのは「素の ul／ol」だけ。本文の中に置かれた一覧やカードの並び
     （ul.gear_gallery など、クラスを付けてレイアウトに使っているもの）まで
     字下げすると、そこだけ見出しより内側に入って左端が合わなくなる。 */
}
.article_body ul:not([class]), .article_body ul.is_bullet, .editor ul:not([class]), .editor ul.is_bullet, .mod_cont ul:not([class]), .mod_cont ul.is_bullet {
  margin: 0 0 24px;
  padding-left: 22px;
  list-style: disc;
}
.article_body ol:not([class]), .article_body ol.is_bullet, .editor ol:not([class]), .editor ol.is_bullet, .mod_cont ol:not([class]), .mod_cont ol.is_bullet {
  margin: 0 0 24px;
  padding-left: 22px;
  list-style: decimal;
}
.article_body li, .editor li, .mod_cont li {
  margin-bottom: 8px;
}
.article_body img, .editor img, .mod_cont img {
  max-width: 100%;
  height: auto;
}
.article_body blockquote, .editor blockquote, .mod_cont blockquote {
  margin: 26px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid #d9d4c8;
  font-size: 14.5px;
  color: #57544c;
}
.article_body table, .editor table, .mod_cont table {
  width: 100%;
  font-size: 13.5px;
  margin: 0 0 26px;
  border-collapse: collapse;
}
.article_body th, .article_body td, .editor th, .editor td, .mod_cont th, .mod_cont td {
  text-align: left;
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid #d9d4c8;
}
.article_body th, .editor th, .mod_cont th {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #615c51;
}
.article_back, .spot_detail_back, .btn_back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-top: 24px;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  border-bottom: 1px solid #1c1a16;
  padding-bottom: 3px;
}
.article_back:hover, .spot_detail_back:hover, .btn_back:hover {
  color: #b5331a;
  border-bottom-color: #b5331a;
}
.article_share, .article_relate {
  margin-top: clamp(28px, 3.4vw, 40px);
}
.article_share_label, .article_relate_title {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #615c51;
  margin-bottom: 10px;
}
.article_share_btn, .btn_outline, .btn_ghost, .btn_sub, .btn_tech {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #1c1a16;
  background: transparent;
  color: #1c1a16;
  text-decoration: none;
  border-radius: 0;
  font-size: 12.5px;
  font-weight: 500;
  padding: 9px 16px;
  cursor: pointer;
}
.article_share_btn:hover, .btn_outline:hover, .btn_ghost:hover, .btn_sub:hover, .btn_tech:hover {
  background: #1c1a16;
  color: #f2efe9;
}
.btn_primary, .btn_submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: #b5331a;
  color: #fff;
  cursor: pointer;
  border-radius: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 15px 40px;
}
.btn_primary:hover, .btn_submit:hover {
  background: #1c1a16;
}
.article_relate_link {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid #d9d4c8;
  text-decoration: none;
  font-size: 13.5px;
}
.article_relate_link:hover {
  color: #b5331a;
}
/* 記事内のギア枠（.article_gear） */
.article_gear {
  margin: clamp(26px, 3.4vw, 36px) 0;
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
  padding: 18px;
}
.article_gear_title {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #b5331a;
  margin-bottom: 12px;
}
.article_gear_list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.article_gear_item {
  list-style: none;
  padding: 12px 0;
  border-bottom: 1px solid #d9d4c8;
}
.article_gear_item:last-child {
  border-bottom: 0;
}
.article_gear_name {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: 16px;
}
.article_gear_note {
  font-size: 12.5px;
  line-height: 1.9;
  color: #57544c;
  margin-top: 4px;
}
.article_gear_stores {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
/* --- ギア一覧 --- */
.gear_pickup {
  border: 1px solid #1c1a16;
  background: #fbfaf7;
  padding: clamp(18px, 2.4vw, 26px);
  margin-top: 18px;
}
.gear_pickup_label {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #b5331a;
}
.gear_pickup_title {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(18px, 2.4vw, 23px);
  margin: 8px 0 8px;
}
.gear_pickup_body {
  font-size: 13.5px;
  line-height: 2;
  color: #57544c;
}
.gear_pickup_foot {
  margin-top: 12px;
}
.gear_group {
  margin-top: clamp(30px, 4vw, 46px);
}
/* 一覧を連れている見出し（商品の並び・ほかのメーカー）は、読みものの章見出しと
   役目が違う。同じ太さの線を続けると、どこで話が変わったのか読み取れず
   ただ線が並んでいるだけに見えるので、線を細くして文字も一段落とす。 */
.gear_group_title, .gear_group > h2, .section_head > h2, .maker_related h2 {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(16px, 2.1vw, 20px);
  line-height: 1.5;
  margin: clamp(26px, 3.4vw, 40px) 0 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid #d9d4c8;
  position: relative;
}
.gear_group_title::after, .gear_group > h2::after, .section_head > h2::after, .maker_related h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 34px;
  height: 1px;
  background: #b5331a;
}
.gear_group_lead, .gear_group_note {
  font-size: 13px;
  line-height: 2;
  color: #57544c;
  margin-top: 10px;
}
/* 商品カード。
   前は「写真 104px ＋ 本文」の 2 列組みだったせいで、店のボタンが
   104px の狭い列に落ちて 1 個ずつ縦に積み上がり、いちばん押してほしい
   Amazon が楽天・Yahoo! と同じ大きさで埋もれていた。写真も 104px では
   何の道具か判別できない。
   視線が「写真 → 名前 → 押すところ」と縦に一本で流れる形に組み直す。 */
/* 列数は器に合わせて折り返す。
   前は repeat(4, 1fr) の固定 4 列で、器の幅を見ていなかった。
   ギアレビュー一覧（1056px）では 1 枚 245px でちょうど良くても、
   同じ並びを記事本文（748px）に差しこむと 1 枚 162px まで痩せ、
   商品名が 5 行に折れてカードが 573px の細長い短冊になっていた。
   最小 212px で折り返せば、記事本文＝3 列 236px／一覧＝4 列 249px と、
   どこに置いても「ギアレビューで見たのと同じ大きさのカード」になる。
   auto-fit ではなく auto-fill：商品が 2 つしかない段でも
   カードが器いっぱいに伸びて 1 枚だけ巨大にならないようにする。 */
.gear_gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  /* ul の既定の padding-left（40px）が残ると、カードの左端だけが
     見出し・リード文より内側にずれる。両端を本文の幅にそろえる。 */
  margin: 0;
  padding: 4px 0 0;
  list-style: none;
  /* 電話では 212px だと 1 列になってカード 1 枚が画面を占領する。
     並べて見比べられる 2 列を保つ。 */
}
@media (max-width: 640px) {
.gear_gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}
.gear_item {
  display: flex;
  flex-direction: column;
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
  /* 主ボタンをカードの下端までいっぱいに使うので、器側の下余白は持たない */
  padding-bottom: 0;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.gear_item:hover {
  border-color: #1c1a16;
  box-shadow: 0 2px 0 0 #d9d4c8;
}
/* アフィリエイトの商品写真は背景を抜いた切り抜きで、縦横の比もばらばら。
   cover で枠に合わせると端が切り落とされ、何の道具なのか分からなくなる
   （ケトルの注ぎ口やタンクの取っ手が消えていた）。全体が入る contain にして、
   地は白に。商品写真の地と同じ白なので継ぎ目が出ない。 */
/* 正方形 ＋ 内側 12px の額装をやめる。商品写真そのものが白地に
   余白を持っているので、額装ぶんがそのまま二重の余白になり、
   カードの上半分が白で埋まって Amazon ボタンが下へ押し出されていた。
   4:3 にして写真を器いっぱいに置くと、同じカード幅でも縦が 60px 縮み、
   押すところが 1 画面目に入る。 */
.gear_item_photo {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid #d9d4c8;
  margin: 0;
}
.gear_item_photo a {
  display: block;
  width: 100%;
  height: 100%;
}
.gear_item_photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
  box-sizing: border-box;
}
/* 詳細度を .gear_item ぶん上げてある。旧テーマの .article_body p
   （line-height:2.1／margin-top:1.8em）が 0, 2, 0 で、記事本文の中に
   差しこんだときだけ商品名とボタン行（どちらも p）を乗っ取っていた。
   同じ 0, 2, 0 にして、あとに読まれる側で勝つ。 */
.gear_item .gear_item_name {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.55;
  padding: 11px 11px 0;
  margin: 0;
  flex: 0 0 auto;
  word-break: auto-phrase;
}
/* 先頭が、その道具でいちばん押してほしい先（たいてい Amazon）。
   そこだけ幅いっぱいの大きなボタンにして、残りの店は小さく 1 行に収める。 */
/* 名前の行数はまちまち（1行のものも4行のものもある）。押すところを
   カードの底にそろえると、横に並んだときボタンの高さが一直線になる。
   レビューへの導線は名前のすぐ下へ回す。 */
.gear_item .gear_item_stores {
  order: 4;
  margin-top: auto;
  margin-bottom: 0;
  /* 左右の内側余白を持たない。主ボタンをカードの罫から罫まで使わせるため。
     補助の店だけは文字が罫に張りつかないよう、自分で左右を持つ。 */
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 11px 0 0;
  /* 補助の店を先に置き、主たる導線をいちばん下に回す。
     補助が 1 行のカードも 2 行のカードもあるので、主ボタンを底に置かないと
     横に並べたとき高さが不ぞろいになる。 */
}
.gear_item .gear_item_stores .store_btn {
  order: 1;
  flex: 1 1 auto;
  font-size: 10px;
  padding: 6px 7px;
  margin: 0 0 0 11px;
}
.gear_item .gear_item_stores .store_btn:last-of-type {
  margin-right: 11px;
}
.gear_item .gear_item_stores {
  /* 主ボタンはカード幅いっぱい・下端フラッシュ。
     前は左右 13px の内側余白ぶん押せる面積が削られていた（236px → 210px）。
     指も視線も、いちばん大きい面に行く。 */
}
.gear_item .gear_item_stores .store_btn:first-child {
  order: 2;
  margin: 9px 0 0;
  flex: 1 0 100%;
  font-size: 13px;
  font-weight: 600;
  padding: 13px 10px;
  letter-spacing: 0.04em;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  /* Amazon を扱わない道具（メーカー直販だけ、など）でも、先頭は同じ見た目に。
     カードごとに「押すところはここ」が一目で決まる。 */
  background: #b5331a;
  border-color: #b5331a;
  color: #fff;
}
.gear_item .gear_item_stores .store_btn:first-child:hover {
  background: #1c1a16;
  border-color: #1c1a16;
  color: #fff;
}
.gear_item .gear_item_more {
  order: 3;
  display: block;
  margin: 0;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
  padding: 8px 11px 0;
  /* 旧テーマが text-align:center を当てていた。名前は左揃えなので、
     導線だけ中央にあると縦のラインが 2 本に割れて視線が戻る。 */
  text-align: left;
  /* 下線の代わりに、行き先があることを小さな山括弧で示す */
  text-decoration: none;
}
.gear_item .gear_item_more::after {
  content: " ƒA";
}
.gear_item .gear_item_more:hover {
  color: #b5331a;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* --- YouTube チャンネル・メーカー --- */
.channel_archive_wrap {
  padding-top: 4px;
}
.channel_cat {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 1px solid #d9d4c8;
}
.channel_cat_btn, .channel_cat_camp, .channel_cat_animal, .channel_cat_official, .channel_cat_horror, .channel_cat_other {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
  color: #1c1a16;
  border-radius: 0;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  text-decoration: none;
  cursor: pointer;
}
.channel_cat_btn:hover, .channel_cat_camp:hover, .channel_cat_animal:hover, .channel_cat_official:hover, .channel_cat_horror:hover, .channel_cat_other:hover {
  border-color: #1c1a16;
}
.channel_cat_btn.is_active, .channel_cat_camp.is_active, .channel_cat_animal.is_active, .channel_cat_official.is_active, .channel_cat_horror.is_active, .channel_cat_other.is_active {
  background: #1c1a16;
  border-color: #1c1a16;
  color: #f2efe9;
}
.channel_grid, .maker_archive_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(24px, 4vw, 56px);
}
@media (max-width: 640px) {
.channel_grid, .maker_archive_grid {
    grid-template-columns: 1fr;
  }
}
.channel_card, .maker_archive_item {
  display: block;
  border-bottom: 1px solid #d9d4c8;
}
/* チャンネルのカード。
   もとの組みは「上にバナー（幅いっぱい）、下にアイコンと名前を横並び」。
   ここを 132px + 1fr の 2 列に読み替えてしまい、さらにバナーとアイコンへ
   同じ寸法指定を当てたため、バナーが 132x74 に潰れて左にはみ出し、
   丸いアイコンだけが大きく残る、という壊れ方をしていた。
   組み方はもとのまま（縦積み）にして、色と線だけ D案 にそろえる。 */
.channel_card {
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  transition: border-color 0.18s ease;
}
.channel_card:hover {
  border-color: #1c1a16;
}
.channel_card_link {
  display: block;
  padding: 0;
  text-decoration: none;
}
.channel_card_link:hover .channel_card_name {
  color: #b5331a;
}
/* 上段：チャンネルのバナー。
   YouTube のバナーは 6:1 前後の細長い帯（64枚を実測して 6.01〜6.06）。
   16:9 の枠に押し込むと左右が 7 割も切れて、何の絵なのか分からなくなる。
   枠を実際の比率にそろえて、切らずに全体を見せる。 */
.channel_card_banner {
  display: block;
  margin: 0;
  width: 100%;
  aspect-ratio: 6/1;
  overflow: hidden;
  background: #ebe6db;
}
.channel_card_banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* 下段：丸いアイコンと名前を横に並べる */
.channel_card_body {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
}
.channel_card_icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  border: 1px solid #d9d4c8;
}
.channel_card_text {
  min-width: 0;
}
.maker_panel {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 16px;
  align-items: center;
  padding: 13px 0;
  text-decoration: none;
}
.maker_panel:hover .maker_panel_name {
  color: #b5331a;
}
@media (max-width: 640px) {
.maker_panel {
    grid-template-columns: 92px 1fr;
  }
}
.channel_card_name, .maker_panel_name {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.6;
}
.channel_card_text, .channel_card_note, .maker_panel_note {
  font-size: 12px;
  line-height: 1.8;
  color: #57544c;
  margin-top: 2px;
}
.channel_profile {
  padding: clamp(20px, 3vw, 32px) 0;
}
/* メーカー／チャンネルの詳細ページの外枠。
   ここに 200px + 1fr の grid を当てていたため、本文（.article_body）が
   200px の列へ押し込まれて縦長に潰れ、関連一覧が右へ飛び出していた。
   中身は本文と関連一覧を縦に積むだけなので block にして、
   幅はページ見出しと同じ 1200px の枠にそろえる。 */
.channel_profile_inner {
  display: block;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 36px;
}
@media (max-width: 900px) {
.channel_profile_inner {
    padding: 0 24px;
  }
}
@media (max-width: 640px) {
.channel_profile_inner {
    padding: 0 16px;
  }
}
.profile_video_card {
  display: block;
  text-decoration: none;
}
.profile_video_card div, .profile_video_card figure {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #d9d4c8;
  margin: 0;
}
.profile_video_card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile_video_card:hover {
  color: #b5331a;
}
.profile_section {
  margin-top: clamp(28px, 3.4vw, 40px);
}
/* --- 掲示板 --- */
.bbs_head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 16px 0;
}
body .bbs_head_note {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
}
body .bbs_boards, body .bbs_cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid #d9d4c8;
}
body .bbs_board_tab, body .bbs_cat_tab {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  text-decoration: none;
  border-radius: 0;
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
  color: #1c1a16;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
}
body .bbs_board_tab:hover, body .bbs_cat_tab:hover {
  border-color: #1c1a16;
}
.bbs_board_tab.is_active, .bbs_cat_tab.is_active {
  background: #1c1a16;
  border-color: #1c1a16;
  color: #f2efe9;
}
body .bbs_board_badge {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  color: #615c51;
}
body .bbs_btn {
  border: 0;
  background: #b5331a;
  color: #fff;
  cursor: pointer;
  border-radius: 0;
  font-size: 13.5px;
  font-weight: 700;
  padding: 11px 24px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body .bbs_btn:hover {
  background: #1c1a16;
}
body .bbs_input, body .bbs_textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  color: #1c1a16;
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
  padding: 11px 13px;
  margin-bottom: 9px;
}
body .bbs_input:focus, body .bbs_textarea:focus {
  outline: 0;
  border-color: #b5331a;
  background: #fff;
}
body .bbs_inbox {
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
  padding: 16px 18px;
  margin-top: 18px;
}
body .bbs_inbox_title {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #615c51;
  margin-bottom: 10px;
}
body .bbs_inbox_list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bbs_inbox_list li {
  list-style: none;
  padding: 8px 0;
  border-bottom: 1px solid #d9d4c8;
}
body .bbs_me {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #b5331a;
}
/* --- 検索結果（ctn-search はハイフン命名。CMS標準のまま） --- */
.ctn-search {
  display: block;
}
.ctn-search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 16px 0;
}
.ctn-search-form__label {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #615c51;
}
.ctn-search-form__input {
  flex: 1;
  min-width: 220px;
  font-family: inherit;
  font-size: 16px;
  color: #1c1a16;
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
  padding: 11px 13px;
}
.ctn-search-form__input:focus {
  outline: 0;
  border-color: #b5331a;
  background: #fff;
}
.ctn-search-form__btn {
  border: 0;
  background: #b5331a;
  color: #fff;
  cursor: pointer;
  border-radius: 0;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  padding: 12px 26px;
}
.ctn-search-form__btn:hover {
  background: #1c1a16;
}
.ctn-search__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #1c1a16;
}
.ctn-search__item {
  list-style: none;
  padding: 14px 0;
  border-bottom: 1px solid #d9d4c8;
}
.ctn-search__item a {
  text-decoration: none;
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.6;
}
.ctn-search__item a:hover {
  color: #b5331a;
}
.ctn-search__badge {
  display: inline-block;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  border: 1px solid #d9d4c8;
  color: #615c51;
  padding: 2px 8px;
  margin-right: 8px;
}
.ctn-search__excerpt {
  font-size: 12.5px;
  line-height: 1.9;
  color: #57544c;
  margin-top: 5px;
}
.ctn-search__empty, .ctn-search__count {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  color: #615c51;
  padding: 12px 0;
}
/* --- ゲーム詳細・遊び方ガイド --- */
.game_faq, body .guide_faq {
  margin-top: clamp(30px, 4vw, 46px);
}
.game_faq_inner {
  max-width: 880px;
}
.game_faq_eyebrow {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #b5331a;
}
.game_faq_lead, .game_faq_note {
  font-size: 13px;
  line-height: 2;
  color: #57544c;
  margin-top: 10px;
}
.game_faq_item, body .guide_faq_item {
  padding: 18px 0;
  border-bottom: 1px solid #d9d4c8;
}
.game_faq_item:first-child, body .guide_faq_item:first-child {
  border-top: 1px solid #1c1a16;
}
/* Q と本文を 2 列に組む。
   ページ側の CSS が ::before を position: absolute に戻していたため、
   Q がグリッドの升から外れ、本文が 26px しかない 1 列目へ押し込まれて
   1 文字ずつ縦に並んでいた。位置指定と字下げを打ち消して組み直す。 */
.guide_faq_q {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.7;
  position: relative;
  padding-left: 0;
}
body .guide_faq_q::before {
  content: "Q";
  position: static;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-weight: 500;
  font-size: 11px;
  color: #fff;
  background: #b5331a;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  margin-top: 2px;
}
body .guide_faq_a {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  margin-top: 9px;
  font-size: 13.5px;
  line-height: 2.05;
  color: #57544c;
  position: relative;
  padding-left: 0;
}
body .guide_faq_a::before {
  content: "A";
  position: static;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  color: #1c1a16;
  border: 1px solid #1c1a16;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  margin-top: 3px;
}
.game_next {
  margin-top: clamp(30px, 4vw, 46px);
}
/* 各ゲームの「遊んでみる」ボタン。
   もとは暗い地の上に置く前提で、明るいアクセント色の地に暗い文字を載せていた。
   D案では地が紙になり、アクセントが朱に変わったため、朱地に濃紺の文字という
   読めない組み合わせになっていた（実測 3.0:1）。
   押す場所は、置かれる地に関係なく同じ見た目にそろえる。 */
.citygame_cta, body .election_cta, body .takehome_cta, body .keizai_cta, body .nenkin_cta, body .mayor_cta, body .iryohi_cta, body .shogaku_cta, body .inflation_cta, body .camp_cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(30px, 4vw, 46px);
  min-height: 48px;
  padding: 13px 34px;
  border-radius: 0;
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: #b5331a;
  border: 1px solid #b5331a;
  color: #fff;
  text-decoration: none;
  box-shadow: none;
}
body .citygame_cta:hover, body .election_cta:hover, body .takehome_cta:hover, body .keizai_cta:hover, body .nenkin_cta:hover, body .mayor_cta:hover, body .iryohi_cta:hover, body .shogaku_cta:hover, body .inflation_cta:hover, body .camp_cta:hover {
  background: #1c1a16;
  border-color: #1c1a16;
  color: #fff;
}
.game_next_btn, .takehome_cta_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #b5331a;
  color: #fff;
  text-decoration: none;
  border-radius: 0;
  font-size: clamp(15px, 1.9vw, 18px);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 16px 36px;
}
.game_next_btn:hover, .takehome_cta_btn:hover {
  background: #1c1a16;
}
.game_next_pr, body .takehome_cta_note {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
  margin-top: 10px;
}
body .bbs_latest {
  margin-top: clamp(28px, 3.4vw, 40px);
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
  padding: 16px 18px;
}
body .bbs_latest_title {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #615c51;
  margin-bottom: 10px;
}
body .bbs_latest_list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bbs_latest_list li {
  list-style: none;
  padding: 8px 0;
  border-bottom: 1px solid #d9d4c8;
  font-size: 13px;
}
.bbs_latest_list a {
  text-decoration: none;
}
.bbs_latest_list a:hover {
  color: #b5331a;
}
body .bbs_latest_more {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  margin-top: 10px;
  display: inline-block;
}
body .guide_lessons, body .guide_lesson_list {
  display: block;
}
body .guide_lesson_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(24px, 4vw, 48px);
}
@media (max-width: 640px) {
body .guide_lesson_grid {
    grid-template-columns: 1fr;
  }
}
body .guide_lesson_category {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: #b5331a;
  padding-bottom: 8px;
  border-bottom: 1px solid #1c1a16;
  margin: clamp(26px, 3.4vw, 38px) 0 4px;
}
body .guide_lesson_name {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
}
body .guide_lesson_point {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #b5331a;
  margin-top: 5px;
}
.guide_shot {
  margin: clamp(20px, 2.6vw, 30px) 0;
}
.guide_shot img {
  width: 100%;
  height: auto;
  border: 1px solid #d9d4c8;
}
.guide_shot_cap {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
  margin-top: 7px;
}
/* --- スポット詳細（spot_detail_*） --- */
.spot_detail {
  display: block;
  padding-top: clamp(18px, 2.4vw, 26px);
}
.spot_detail_photo {
  aspect-ratio: 3/2;
  overflow: hidden;
  background: #d9d4c8;
}
.spot_detail_photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.spot_detail_meta {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
  letter-spacing: 0.04em;
  padding-top: 12px;
}
.spot_detail_list, .spot_detail_list_sub {
  width: 100%;
  font-size: 13.5px;
  border-collapse: collapse;
  margin-top: 4px;
}
.spot_detail_list th, .spot_detail_list td, .spot_detail_list_sub th, .spot_detail_list_sub td {
  text-align: left;
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid #d9d4c8;
  vertical-align: top;
}
.spot_detail_list th, .spot_detail_list_sub th {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #615c51;
  width: 150px;
}
.spot_detail_list tr:first-child th, .spot_detail_list tr:first-child td, .spot_detail_list_sub tr:first-child th, .spot_detail_list_sub tr:first-child td {
  border-top: 1px solid #1c1a16;
}
.spot_detail_links, .spot_detail_add {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.spot_detail_near {
  margin-top: clamp(28px, 3.4vw, 40px);
}
.spot_detail_note {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  line-height: 1.9;
  color: #615c51;
  padding-top: 12px;
}
.spot_detail_map {
  margin-top: 18px;
  border: 1px solid #d9d4c8;
}
.guide_card_type {
  display: inline-block;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  border: 1px solid #1c1a16;
  padding: 3px 9px;
  background: #f2efe9;
  color: #1c1a16;
}
.guide_card_closed {
  display: inline-block;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  border: 1px solid #d9d4c8;
  padding: 3px 9px;
  color: #615c51;
}
.pr_chip, .pr_chip_light {
  display: inline-block;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: #615c51;
  border: 1px solid #d9d4c8;
  padding: 1px 6px;
}
.pr_note, .pr_note_light {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  line-height: 1.9;
  color: #615c51;
  padding-top: 12px;
}
/* --- 運営情報・経歴（about） --- */
.about_info {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  margin-top: 4px;
}
.about_info_row {
  border-bottom: 1px solid #d9d4c8;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  padding: 12px 0;
}
@media (max-width: 640px) {
.about_info_row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}
.about_info_label {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
  letter-spacing: 0.04em;
}
.about_info_data {
  font-size: 13.5px;
}
.about_career {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
.about_career_item {
  list-style: none;
  padding: 14px 0;
  border-bottom: 1px solid #d9d4c8;
}
.about_career_role {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #b5331a;
  letter-spacing: 0.06em;
}
.about_career_name {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: 16px;
  margin-top: 4px;
}
.about_career_text {
  font-size: 13px;
  line-height: 2;
  color: #57544c;
  margin-top: 4px;
}
.about_map {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(24px, 4vw, 48px);
}
@media (max-width: 640px) {
.about_map {
    grid-template-columns: 1fr;
  }
}
.about_map_item {
  padding: 14px 0;
  border-bottom: 1px solid #d9d4c8;
}
.about_map_name {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: 16px;
}
.about_map_path {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  color: #615c51;
  margin-top: 4px;
}
.about_map_text {
  font-size: 12.5px;
  line-height: 1.9;
  color: #57544c;
  margin-top: 4px;
}
.about_cms_bridge, .about_tech_bridge {
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
  padding: clamp(18px, 2.4vw, 26px);
  margin-top: clamp(28px, 3.4vw, 40px);
}
.about_cms_bridge_name, .about_tech_bridge_title {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(17px, 2.2vw, 21px);
  margin-bottom: 8px;
}
.about_tech_bridge_eyebrow {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #b5331a;
}
.about_cms_bridge_text, .about_tech_bridge_text {
  font-size: 13.5px;
  line-height: 2;
  color: #57544c;
}
.about_cms_bridge_foot, .about_tech_bridge_foot {
  margin-top: 14px;
}
.about_cms_bridge_note, .about_contact_note {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  line-height: 1.9;
  color: #615c51;
  padding-top: 10px;
}
.about_section {
  margin-top: clamp(30px, 4vw, 46px);
}
/* --- お知らせ一覧 --- */
.news_index, .news_page_list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.news_year {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #b5331a;
  padding-bottom: 8px;
  border-bottom: 1px solid #1c1a16;
  margin: clamp(26px, 3.4vw, 38px) 0 0;
}
/* お知らせ 1 件。「いつ・何が」を縦に読むものなので、
   日付の列を固定幅にして右端をそろえる。文字幅まかせだと、
   桁の違う日付でずれて目が滑る。 */
.news_page_item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 4px 20px;
  align-items: baseline;
  list-style: none;
  padding: 16px 0;
  border-bottom: 1px solid #d9d4c8;
}
@media (max-width: 640px) {
.news_page_item {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}
/* 本文の中に置く「→ ◯◯を見る」のリンク。
   一覧の行と同じクラス名だが別物で、行の組み（日付｜本文の 2 列）を
   ここへ当てていたため、ブロックになって直前の「→」から改行され、
   矢印だけが 1 行を占めていた。地の文にまぎれるので下線は残す。 */
.news_page_link {
  color: #b5331a;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.news_page_link:hover {
  text-decoration: none;
}
.news_page_date {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
}
.news_page_text {
  font-size: 13px;
  line-height: 1.8;
}
.news_page_body {
  font-size: 15.5px;
  line-height: 2.15;
}
.news_page_note {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  color: #615c51;
  padding-top: 12px;
}
/* --- お問い合わせ --- */
.contact_purpose {
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
  padding: 18px 20px;
  margin-top: 18px;
}
.contact_purpose_title {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #615c51;
  margin-bottom: 10px;
}
.contact_purpose_list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.contact_purpose_list li {
  list-style: none;
  font-size: 13px;
  line-height: 2;
  padding-left: 16px;
  position: relative;
}
.contact_purpose_list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 6px;
  height: 1px;
  background: #b5331a;
}
/* --- まんがのページ（絵ありきなので枠だけ整える） --- */
.manga_hero {
  padding: clamp(20px, 3vw, 34px) 0;
  text-align: center;
}
.manga_hero_inner {
  max-width: 820px;
  margin: 0 auto;
}
.manga_hero_title {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.5;
}
.manga_hero_lead {
  font-size: 14px;
  line-height: 2.1;
  color: #57544c;
  margin-top: 14px;
}
.manga_hero_img, .manga_interlude_img {
  max-width: 100%;
  height: auto;
}
.manga_divider {
  height: 1px;
  background: #d9d4c8;
  border: 0;
  margin: clamp(26px, 3.4vw, 40px) 0;
}
.manga_interlude {
  text-align: center;
  margin: clamp(26px, 3.4vw, 40px) 0;
}
.manga_cta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
  text-decoration: none;
  padding: 16px 20px;
  margin-top: 16px;
}
.manga_cta:hover {
  border-color: #b5331a;
}
.manga_cta:hover .manga_cta_title {
  color: #b5331a;
}
.manga_cta_icon {
  font-size: 22px;
  line-height: 1;
}
.manga_cta_title {
  display: block;
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: 16px;
}
.manga_cta_text {
  display: block;
  font-size: 12.5px;
  line-height: 1.9;
  color: #57544c;
  margin-top: 3px;
}
.manga_cta_arrow {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  color: #b5331a;
}
/* --- ゲーム個別ページ（takehome_* は他のゲームでも同じ命名で使われる） --- */
.takehome_page, .takehome_sec, .keizai_page, .nenkin_page {
  display: block;
}
body .takehome_eyebrow, .takehome_sec_eyebrow {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #b5331a;
}
body .takehome_catch {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.5;
  margin: 10px 0 0;
  text-wrap: balance;
}
.takehome_catch .takehome_catch_strike {
  text-decoration: line-through;
  text-decoration-color: #d9d4c8;
  color: #615c51;
}
.takehome_catch .takehome_catch_net {
  color: #b5331a;
}
.takehome_sec_title, body .takehome_title {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(20px, 2.7vw, 28px);
  letter-spacing: 0.02em;
  padding-bottom: 12px;
  border-bottom: 2px solid #1c1a16;
  margin: clamp(34px, 4.4vw, 52px) 0 4px;
  position: relative;
}
.takehome_sec_title::after, body .takehome_title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 64px;
  height: 2px;
  background: #b5331a;
}
body .takehome_title_rule {
  display: none;
}
body .takehome_figures, body .takehome_figure_row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #d9d4c8;
  border: 1px solid #d9d4c8;
  margin-top: 4px;
}
@media (max-width: 640px) {
body .takehome_figures, body .takehome_figure_row {
    grid-template-columns: 1fr 1fr;
  }
}
body .takehome_figure {
  background: #f2efe9;
  padding: 16px 18px;
}
body .takehome_figure_num {
  display: block;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1;
  color: #1c1a16;
}
body .takehome_figure_label {
  display: block;
  font-size: 11px;
  color: #615c51;
  margin-top: 8px;
  line-height: 1.6;
}
body .takehome_figures_lead, body .takehome_outro_copy {
  font-size: 13.5px;
  line-height: 2;
  color: #57544c;
  margin-top: 12px;
}
body .takehome_steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  margin-top: 4px;
}
@media (max-width: 900px) {
body .takehome_steps {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
body .takehome_steps {
    grid-template-columns: 1fr;
  }
}
body .takehome_step {
  border-top: 2px solid #1c1a16;
  padding-top: 14px;
}
body .takehome_step_no {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #b5331a;
}
body .takehome_step_name {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: 17px;
  margin: 8px 0 6px;
}
body .takehome_step_text {
  font-size: 12.5px;
  line-height: 1.95;
  color: #57544c;
}
body .takehome_target {
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
  padding: 16px 18px;
  margin-top: 14px;
}
body .takehome_target_name {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: 16px;
}
body .takehome_target_text {
  font-size: 12.5px;
  line-height: 1.9;
  color: #57544c;
  margin-top: 4px;
}
body .takehome_meter {
  display: flex;
  gap: 2px;
  margin-top: 12px;
}
body .takehome_meter_seg {
  flex: 1;
  height: 8px;
  background: #d9d4c8;
}
.takehome_meter_seg.is_on {
  background: #b5331a;
}
body .takehome_cta_wrap, body .takehome_cta_row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
body .takehome_cta_sub, body .takehome_guide_link {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11.5px;
  text-decoration: none;
  border-bottom: 1px solid #1c1a16;
  padding-bottom: 3px;
}
body .takehome_cta_sub:hover, body .takehome_guide_link:hover {
  color: #b5331a;
  border-bottom-color: #b5331a;
}
body .takehome_outro {
  margin-top: clamp(30px, 4vw, 46px);
}
.takehome_outro_title {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(18px, 2.4vw, 23px);
}
body .game_hub_stat, body .game_hub_item_stats {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}
/* --- YouTube／メーカーの詳細（profile_*） --- */
.channel_page, .maker {
  display: block;
}
.page_head_channel, .page_head_maker {
  padding-bottom: 4px;
}
/* ロゴと名前を横に並べるのは .profile_head 自身の仕事。
   中身（.profile_head_body）にまで同じ grid を当てていたので、
   名前・説明・リンクがさらに 160px の列へ入って崩れていた。 */
.profile_head, .profile_head_inner {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
  padding: clamp(20px, 3vw, 32px) 0;
}
@media (max-width: 640px) {
.profile_head, .profile_head_inner {
    grid-template-columns: 88px 1fr;
    gap: 16px;
  }
}
.profile_head_body {
  display: block;
  min-width: 0;
}
.profile_banner, .profile_icon {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #d9d4c8;
  border: 1px solid #d9d4c8;
}
.profile_banner img, .profile_icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* メーカーのロゴは切り抜き。円の枠に合わせて切ると字が欠けるので全体を入れる */
.profile_icon {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  border: 1px solid #d9d4c8;
  padding: 10px;
  box-sizing: border-box;
}
.profile_name {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(20px, 2.8vw, 28px);
  line-height: 1.4;
}
.profile_desc {
  font-size: 13.5px;
  line-height: 2.05;
  color: #57544c;
  margin-top: 10px;
}
.profile_meta, .profile_links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 14px;
}
.profile_meta span, .profile_meta a, .profile_links span, .profile_links a {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #57544c;
  border: 1px solid #d9d4c8;
  padding: 4px 9px;
  text-decoration: none;
}
.profile_meta a:hover, .profile_links a:hover {
  border-color: #1c1a16;
  color: #1c1a16;
}
.profile_cta {
  margin-top: 16px;
}
.profile_feed, .profile_videos {
  margin-top: clamp(28px, 3.4vw, 40px);
}
.profile_feed_item {
  border-bottom: 1px solid #d9d4c8;
}
.profile_feed_link {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 12px 0;
  text-decoration: none;
}
.profile_feed_link:hover .profile_feed_title {
  color: #b5331a;
}
@media (max-width: 640px) {
.profile_feed_link {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}
.profile_feed_date {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
}
.profile_feed_title {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.7;
}
.profile_videos_grid, .profile_video_list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 24px);
}
@media (max-width: 900px) {
.profile_videos_grid, .profile_video_list {
    grid-template-columns: 1fr 1fr;
  }
}
/* 並べるのは一覧（.maker_grid）だけ。入れ物（.maker_related）にまで
   同じ 4 列の grid を当てていたので、見出しと一覧が横に並んでしまっていた。 */
.maker_related {
  display: block;
  margin-top: clamp(28px, 3.6vw, 44px);
}
.maker_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #d9d4c8;
  border: 1px solid #d9d4c8;
  margin-top: 4px;
}
@media (max-width: 900px) {
.maker_grid {
    grid-template-columns: 1fr 1fr;
  }
}
.maker_item {
  background: #f2efe9;
  list-style: none;
}
.maker_link {
  display: block;
  padding: 14px 16px;
  text-decoration: none;
}
.maker_link:hover {
  background: #fbfaf7;
}
.maker_link:hover .maker_name {
  color: #b5331a;
}
.maker_name {
  font-size: 13.5px;
  font-weight: 500;
}
.gear_storefront_link, .store_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 0;
  border: 1px solid #d9d4c8;
  padding: 7px 12px;
  color: #57544c;
  background: transparent;
}
.gear_storefront_link:hover, .store_btn:hover {
  border-color: #1c1a16;
  color: #1c1a16;
}
.store_btn_amazon {
  background: #b5331a;
  border-color: #b5331a;
  color: #fff;
  font-weight: 500;
}
.store_btn_amazon:hover {
  background: #1c1a16;
  border-color: #1c1a16;
  color: #fff;
}
.mv-mod-h2 {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(19px, 2.5vw, 25px);
  padding-bottom: 10px;
  border-bottom: 1px solid #1c1a16;
  margin: clamp(30px, 4vw, 44px) 0 4px;
}
.mv-mod-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.mv-mod-table th, .mv-mod-table td {
  text-align: left;
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid #d9d4c8;
}
.mv-mod-table th {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
  letter-spacing: 0.06em;
}
/* --- フォーム（CMS標準の form_*） --- */
.form_main, .form_page {
  display: block;
}
.form_page_head {
  padding-top: 14px;
}
.form_page_label {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #b5331a;
}
.form_page_text {
  font-size: 14px;
  line-height: 2.1;
  color: #57544c;
  margin-top: 10px;
}
.form_field_list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
.form_field {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  align-items: start;
  list-style: none;
  padding: 18px 0;
  border-bottom: 1px solid #d9d4c8;
}
.form_field:first-child {
  border-top: 1px solid #1c1a16;
}
@media (max-width: 640px) {
.form_field {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
.form_field_label {
  font-size: 14px;
  font-weight: 500;
  padding-top: 10px;
}
@media (max-width: 640px) {
.form_field_label {
    padding-top: 0;
  }
}
.form_field_input input, .form_field_input textarea, .form_field_input select {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  color: #1c1a16;
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
  padding: 11px 13px;
}
.form_field_input input:focus, .form_field_input textarea:focus, .form_field_input select:focus {
  outline: 0;
  border-color: #b5331a;
  background: #fff;
}
.form_field_input input::placeholder, .form_field_input textarea::placeholder, .form_field_input select::placeholder {
  color: #b3ada1;
}
.form_field_input textarea {
  line-height: 1.9;
  resize: vertical;
  min-height: 170px;
}
.form_field_help {
  font-size: 11.5px;
  line-height: 1.9;
  color: #615c51;
  margin-top: 7px;
}
.form_required, .form_optional {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  margin-left: 8px;
  vertical-align: 2px;
}
.form_required {
  color: #fff;
  background: #b5331a;
}
.form_optional {
  color: #615c51;
  border: 1px solid #d9d4c8;
}
.form_agree, .form_agree_box {
  margin-top: clamp(20px, 2.6vw, 28px);
  text-align: center;
}
.form_agree_label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  white-space: nowrap;
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
  padding: 10px 16px;
  cursor: pointer;
}
/* 同意のチェック。ここは input ではなく、チェックと文言を包む入れ物。
   15px 四方を指定していたため、「プライバシーポリシーに同意する」の 15 文字が
   15px の幅に押し込まれて 1 文字ずつ縦に並んでいた。 */
.form_agree_check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  height: auto;
  margin: 0;
  accent-color: #b5331a;
}
.form_agree_check input[type=checkbox] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #b5331a;
}
input.form_agree_check {
  display: inline-block;
  width: 16px;
  height: 16px;
}
.form_actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: clamp(24px, 3vw, 34px);
}
.form_note {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  line-height: 1.9;
  color: #615c51;
  text-align: center;
  margin-top: 14px;
}
/* --- 掲示板のスレッド --- */
.bbs_threads {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  border-top: 1px solid #1c1a16;
}
body .bbs_thread {
  list-style: none;
  border-bottom: 1px solid #d9d4c8;
}
body .bbs_thread_link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  text-decoration: none;
}
.bbs_thread_link:hover .bbs_thread_title {
  color: #b5331a;
}
body .bbs_thread_title {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.6;
}
body .bbs_thread_meta {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
  white-space: nowrap;
}
body .bbs_me_form, body .bbs_me_line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
body .bbs_me_name {
  font-weight: 500;
}
body .bbs_me_note, body .bbs_me_msg {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
}
body .bbs_me_edit, body .bbs_me_cancel {
  border: 1px solid #d9d4c8;
  background: #f2efe9;
  cursor: pointer;
  border-radius: 0;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #57544c;
  padding: 6px 12px;
}
body .bbs_me_edit:hover, body .bbs_me_cancel:hover {
  border-color: #1c1a16;
  color: #1c1a16;
}
body .bbs_head_action {
  margin-left: auto;
}
/* --- スポット一覧の補助・詳細の見出し --- */
.spot_pref_index {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 0;
}
.spot_pref_index_title {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #615c51;
  width: 100%;
}
.spot_search_panel_bar, .spot_search_panel_types {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  width: 100%;
}
.guide_filter_group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 10px 0;
}
.guide_filter_group_label {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #615c51;
  width: 76px;
  flex-shrink: 0;
}
@media (max-width: 640px) {
.guide_filter_group_label {
    width: 100%;
  }
}
.guide_filter_group_items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.guide_filter_checkbox {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.spot_detail_title {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.45;
}
.spot_detail_sub, .spot_detail_pref {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
  letter-spacing: 0.04em;
  margin-top: 8px;
}
.spot_detail_stamp {
  border: 1px solid #b5331a;
  background: #fbfaf7;
  padding: 16px 18px;
  margin-top: 18px;
}
.spot_detail_stamp_note {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  line-height: 1.9;
  color: #615c51;
  margin-top: 8px;
}
.spot_map {
  border: 1px solid #d9d4c8;
  margin-top: 16px;
  min-height: 200px;
}
.spot_map_loading {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  color: #615c51;
  padding: 20px;
  text-align: center;
}
/* 地図の上に重なる「現在地」ボタン。leaflet の操作系より前に出す */
.spot_map_locate {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 500;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  background: #f2efe9;
  border: 1px solid #1c1a16;
  color: #1c1a16;
  padding: 8px 13px;
  cursor: pointer;
}
.spot_map_locate:hover {
  background: #1c1a16;
  color: #f2efe9;
}
.spot_map {
  position: relative;
}
.guide_card_type_campsite, .guide_card_type_rvpark, .guide_card_type_spot, .guide_card_type_sa_pa {
  border-color: #1c1a16;
}
/* --- 記事の前後ナビ --- */
.article_page {
  display: block;
}
.article_nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #d9d4c8;
  border: 1px solid #d9d4c8;
  margin-top: clamp(30px, 4vw, 46px);
}
@media (max-width: 640px) {
.article_nav {
    grid-template-columns: 1fr;
  }
}
.article_nav {
  /* 前後のどちらか片方しか無い記事もある。2 列のままだと、
     片側が空のまま、リンクだけが右半分に寄った箱になっていた。 */
}
.article_nav:not(:has(> :nth-child(2))) {
  grid-template-columns: minmax(0, 1fr);
  /* 「次の記事」は 2 列目に置く決まりになっている。片方しか無いときに
     それを残すと、1 列目が空のまま升だけ増えて、右へずれた箱になる。 */
}
.article_nav:not(:has(> :nth-child(2))) .article_nav_link {
  text-align: left;
  grid-column: auto;
}
.article_nav_link {
  background: #f2efe9;
  padding: 16px 18px;
  text-decoration: none;
}
.article_nav_link:hover {
  background: #fbfaf7;
}
.article_nav_link:hover .article_nav_title {
  color: #b5331a;
}
.article_nav_link.article_nav_prev {
  text-align: left;
}
.article_nav_dir {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #615c51;
}
.article_nav_title {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.7;
  margin-top: 6px;
}
.free_code {
  display: block;
}
/* --- まんが（コマは画像。枠だけ整える） --- */
.manga_page {
  display: block;
}
.manga_panel {
  position: relative;
  margin: 0 auto clamp(16px, 2.4vw, 26px);
  max-width: 560px;
}
.manga_panel_bg {
  width: 100%;
  height: auto;
  display: block;
}
.manga_panel_no {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  color: #fff;
  background: #1c1a16;
  padding: 3px 8px;
}
.manga_panel_char {
  position: absolute;
  z-index: 2;
  max-width: 46%;
  height: auto;
}
.manga_panel_bubble {
  position: absolute;
  z-index: 3;
  background: #fff;
  border: 2px solid #1c1a16;
  border-radius: 18px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.7;
  max-width: 62%;
}
.manga_panel_footer {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
  text-align: center;
  margin-top: 6px;
}
.manga_interlude_text {
  font-size: 13.5px;
  line-height: 2;
  color: #57544c;
  margin-top: 10px;
}
.manga_outro {
  text-align: center;
  margin-top: clamp(28px, 3.4vw, 40px);
}
.manga_outro_img {
  max-width: 240px;
  height: auto;
}
.manga_outro_title {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(18px, 2.4vw, 23px);
  margin-top: 14px;
}
.manga_outro_text {
  font-size: 13.5px;
  line-height: 2;
  color: #57544c;
  margin-top: 10px;
}
.manga_outro_link {
  display: inline-block;
  margin-top: 14px;
}
/* --- こまごま --- */
.u_sr_only, .sr_only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.channel_filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 1px solid #d9d4c8;
}
.channel_filter_btn {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  text-decoration: none;
  border-radius: 0;
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
  color: #1c1a16;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
}
.channel_filter_btn:hover {
  border-color: #1c1a16;
}
.channel_filter_btn.is_active {
  background: #1c1a16;
  border-color: #1c1a16;
  color: #f2efe9;
}
.channel_filter_num {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
  font-variant-numeric: tabular-nums;
}
/* 選択中のタブはインク地なので、件数の灰色が沈む。紙色を薄く敷いて読める側へ。
   （実際のクラスは .channel_filter_btn。.channel_filter_tab と書き間違えていて
     指定が当たらず、2.6:1 のまま残っていた） */
.channel_filter_btn.is_active .channel_filter_num, .channel_filter_tab.is_active .channel_filter_num, .bbs_board_tab.is_active .bbs_board_num, .bbs_cat_tab.is_active .bbs_cat_num {
  color: rgba(242, 239, 233, 0.82);
}
.channel_group {
  margin-top: clamp(28px, 3.4vw, 40px);
}
.channel_group_title {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(18px, 2.4vw, 23px);
  padding-bottom: 10px;
  border-bottom: 1px solid #1c1a16;
}
.channel_group_lead, .channel_gear_note {
  font-size: 13px;
  line-height: 2;
  color: #57544c;
  margin-top: 10px;
}
.channel_index {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0;
}
.channel_index_item {
  list-style: none;
}
.channel_index_link {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11.5px;
  text-decoration: none;
  border: 1px solid #d9d4c8;
  padding: 6px 12px;
  color: #57544c;
}
.channel_index_link:hover {
  border-color: #1c1a16;
  color: #1c1a16;
}
.channel_index_initial {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  color: #b5331a;
}
.channel_index_name {
  font-size: 13px;
}
.channel_pickup {
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
  padding: 16px 18px;
  margin-top: 16px;
}
.stamp_rally, .stamp_board {
  display: block;
}
.stamp_note {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  line-height: 1.9;
  color: #615c51;
  padding-top: 10px;
}
.stamp_member_name {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: 16px;
}
.stamp_member_transfer, .stamp_link_summary {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #57544c;
  cursor: pointer;
  border: 1px solid #d9d4c8;
  background: #f2efe9;
  padding: 7px 12px;
  display: inline-block;
}
.stamp_member_transfer:hover, .stamp_link_summary:hover {
  border-color: #1c1a16;
  color: #1c1a16;
}
.stamp_link_list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  font-size: 12.5px;
}
.stamp_link_list li {
  list-style: none;
  padding: 6px 0;
  border-bottom: 1px solid #d9d4c8;
}
.stamp_link_pass {
  margin-top: 12px;
}
.stamp_reset_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.stamp_reset_confirm {
  font-size: 12.5px;
  line-height: 1.9;
  color: #57544c;
}
.stamp_share_btn_ig, .stamp_share_btn_x, .stamp_share_btn_line { /* .stamp_share_btn を継承 */ }
.stamp_pref_name {
  font-size: 13px;
}
.stamp_auth_form {
  margin-bottom: 4px;
}
.stamp_cta_body {
  display: block;
}
.section_lead_light, .pr_note_light, .section_title_light { /* ダーク背景用の派生。D案では同じ扱い */ }
body .cg_guide_sec {
  margin-top: clamp(28px, 3.4vw, 40px);
}
body .cg_guide_note {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  line-height: 1.9;
  color: #615c51;
}
.home {
  display: block;
}
/* --- 残りの細かいクラス（最終掃討） --- */
.l_container, .youtube, .search, .maker_archive {
  display: block;
}
.section_head {
  margin-top: clamp(28px, 3.4vw, 40px);
}
body .takehome_lead {
  font-size: 14px;
  line-height: 2.1;
  color: #57544c;
  margin-top: 12px;
}
/* 手取りゲームの内訳メーター。額面を1本の帯に積んで、手取りだけ朱で見せる */
.takehome_meter_head, body .takehome_meter_foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
  padding: 8px 0;
}
body .takehome_meter_stack {
  display: flex;
  height: 26px;
  border: 1px solid #1c1a16;
  overflow: hidden;
}
body .takehome_meter_take {
  background: #b5331a;
}
body .takehome_meter_social {
  background: #615c51;
}
body .takehome_meter_itax {
  background: #57544c;
}
body .takehome_meter_rtax {
  background: #d9d4c8;
}
body .takehome_meter_gross {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 500;
}
body .takehome_meter_note {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  line-height: 1.9;
  color: #615c51;
  padding-top: 8px;
}
body .takehome_mode {
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
  padding: 16px 18px;
  margin-top: 14px;
}
body .takehome_mode_head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
body .takehome_mode_copy {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: 16px;
}
.takehome_mode_body {
  font-size: 12.5px;
  line-height: 1.95;
  color: #57544c;
  margin-top: 6px;
}
.takehome_step_body {
  display: block;
}
/* プロフィール（チャンネル・メーカー）の残り */
.profile_title {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(20px, 2.8vw, 28px);
  line-height: 1.4;
}
.profile_text, .profile_meta_note {
  font-size: 13.5px;
  line-height: 2.05;
  color: #57544c;
  margin-top: 10px;
}
.profile_section_title {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(18px, 2.4vw, 23px);
  padding-bottom: 10px;
  border-bottom: 1px solid #1c1a16;
  margin: clamp(28px, 3.4vw, 40px) 0 4px;
}
.profile_link_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #1c1a16;
  background: transparent;
  color: #1c1a16;
  text-decoration: none;
  border-radius: 0;
  font-size: 12.5px;
  font-weight: 500;
  padding: 9px 16px;
}
.profile_link_btn:hover {
  background: #1c1a16;
  color: #f2efe9;
}
.profile_relate {
  margin-top: clamp(28px, 3.4vw, 40px);
}
.profile_video_link {
  display: block;
  text-decoration: none;
}
.profile_video_link:hover {
  color: #b5331a;
}
.profile_video_thumb {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #d9d4c8;
}
.profile_video_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* SNS の丸ボタン。ブランド色は縁だけにして、地は紙のまま（文字は常にインク） */
.profile_sns, .stamp_sns_list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.profile_sns_btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  border-radius: 0;
  border: 1px solid #d9d4c8;
  background: #fff;
  color: #1c1a16;
  font-size: 12.5px;
  padding: 8px 14px;
}
.profile_sns_btn:hover {
  border-color: #1c1a16;
}
.profile_sns_icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.profile_sns_x {
  border-left: 4px solid #1c1a16;
}
.profile_sns_instagram {
  border-left: 4px solid #c13584;
}
.profile_sns_facebook {
  border-left: 4px solid #1877f2;
}
.profile_sns_line {
  border-left: 4px solid #06c755;
}
.channel_types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #d9d4c8;
  border: 1px solid #d9d4c8;
  margin-top: 4px;
}
@media (max-width: 640px) {
.channel_types {
    grid-template-columns: 1fr;
  }
}
.channel_type {
  background: #f2efe9;
  padding: 14px 16px;
}
.channel_type_name {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: 15px;
}
.channel_type_text {
  font-size: 12.5px;
  line-height: 1.9;
  color: #57544c;
  margin-top: 4px;
}
.channel_card_body {
  display: block;
}
.store_btn_rakuten, .store_btn_yahoo { /* .store_btn を継承。色は付けない */ }
/* フォームのステップ表示 */
.form_page_wrap {
  display: block;
}
.form_page_title {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(24px, 3.2vw, 36px);
  line-height: 1.5;
  margin-top: 10px;
}
.form_steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 0;
}
.form_step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
  padding: 8px 14px;
  font-size: 12.5px;
  color: #615c51;
}
.form_step.is_current {
  border-color: #b5331a;
  color: #b5331a;
  font-weight: 500;
}
.form_step_num {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
}
.form_step_label {
  font-size: 12.5px;
}
.required_mark {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: #fff;
  background: #b5331a;
  padding: 2px 6px;
  margin-left: 8px;
  vertical-align: 2px;
}
.material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
  vertical-align: -3px;
}
/* about のまる子ブロック */
.about_maruko {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  margin-top: clamp(28px, 3.4vw, 40px);
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
}
@media (max-width: 640px) {
.about_maruko {
    grid-template-columns: 1fr;
  }
}
.about_maruko {
  /* 枠に直に置かれた写真。object-fit が無いと既定の fill で、
     正方形（1440x1440）の写真が 3:2 の枠に合わせて横に潰れていた。 */
}
.about_maruko > img {
  width: 100%;
  aspect-ratio: 3/2;
  height: auto;
  object-fit: cover;
  object-position: center 40%;
}
.about_maruko_photo {
  aspect-ratio: 3/2;
  overflow: hidden;
}
.about_maruko_photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about_maruko_name {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(17px, 2.2vw, 21px);
  margin-bottom: 8px;
}
.about_maruko_text {
  font-size: 13px;
  line-height: 2;
  color: #57544c;
}
.about_maruko_body {
  display: block;
}
.about_career_link {
  text-decoration: none;
}
.about_career_link:hover {
  color: #b5331a;
}
.icon_paw {
  width: 15px;
  height: 15px;
  vertical-align: -2px;
}
/* 検索結果の残り */
.ctn-search-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.ctn-search__title, .ctn-search__link {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.6;
  text-decoration: none;
}
.ctn-search__title:hover, .ctn-search__link:hover {
  color: #b5331a;
}
.ctn-search__summary {
  font-size: 12.5px;
  line-height: 1.9;
  color: #57544c;
  margin-top: 5px;
}
.ctn-search__item--page .ctn-search__badge {
  border-color: #1c1a16;
  color: #1c1a16;
}
.ctn-search__item--post { /* .ctn-search__item を継承 */ }
/* まんがのセクション */
.manga_section {
  margin-top: clamp(28px, 3.4vw, 40px);
}
.manga_section_head {
  text-align: center;
  margin-bottom: 16px;
}
.manga_section_label {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: #b5331a;
}
.manga_section_title {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(19px, 2.5vw, 25px);
  margin-top: 8px;
}
.manga_section_text {
  font-size: 13.5px;
  line-height: 2;
  color: #57544c;
  margin-top: 10px;
}
.manga_strip {
  display: block;
}
.manga_cta_body {
  display: block;
}
/* ギア・スタンプの残り */
/* ピックアップに載るのは商品の切り抜きではなく、現場で撮った実写。
   こちらは写真として見せたいので cover のまま。ただし本文幅いっぱいだと
   高さが 750px を超えて主役が大きすぎたので、高さに上限を置く。 */
.gear_pickup_photo {
  height: clamp(220px, 30vw, 380px);
  overflow: hidden;
  background: #d9d4c8;
  margin-bottom: 12px;
}
.gear_pickup_photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gear_pickup_text {
  font-size: 13.5px;
  line-height: 2;
  color: #57544c;
}
.gear_pickup_stores {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.stamp_share_title {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(17px, 2.2vw, 21px);
}
.stamp_sub_note {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  line-height: 1.9;
  color: #615c51;
  padding-top: 8px;
}
.stamp_summary_total {
  color: #615c51;
}
.stamp_transfer_code {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 500;
  letter-spacing: 0.3em;
  color: #b5331a;
  background: #f2efe9;
  border: 1px dashed #b5331a;
  padding: 12px 16px;
  display: inline-block;
  margin-top: 10px;
}
.stamp_sns_btn_yahoo::before {
  background: #ff0033;
}
.spot_search_panel_clear {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
  text-decoration: none;
}
.spot_search_panel_clear:hover {
  color: #b5331a;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* course.css があとから読まれて下線を引き直すので、要素まで含めて指定して勝たせる */
a.course_guide_link {
  text-decoration: none;
}
a.course_guide_link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* 最後の残り */
.archive, .archive_body, body .takehome_stage, body .takehome_modes, body .takehome_targets, .news_archive {
  display: block;
}
.profile_video_title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.7;
  margin-top: 9px;
}
.archive_body {
  font-size: inherit;
}
.tech_card_date {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  color: #615c51;
}
.guide_lesson_group {
  margin-top: clamp(26px, 3.4vw, 40px);
}
body .guide_lesson {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 18px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid #d9d4c8;
}
@media (max-width: 640px) {
body .guide_lesson {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}
body .takehome_stage_bg {
  display: none;
}
body .takehome_stage_inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(24px, 3vw, 38px) 36px;
}
@media (max-width: 900px) {
body .takehome_stage_inner {
    padding-inline: 24px;
  }
}
@media (max-width: 640px) {
body .takehome_stage_inner {
    padding-inline: 16px;
  }
}
body .takehome_title_text {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.45;
}
body .takehome_note {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  line-height: 1.9;
  color: #615c51;
  padding-top: 10px;
}
body .takehome_mode_no {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #b5331a;
}
body .takehome_mode_name {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: 16px;
  margin-top: 6px;
}
body .takehome_mode_text {
  font-size: 12.5px;
  line-height: 1.95;
  color: #57544c;
  margin-top: 4px;
}
body .takehome_target_list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
.takehome_target_list li {
  list-style: none;
  padding: 10px 0;
  border-bottom: 1px solid #d9d4c8;
  font-size: 13px;
}
/* =========================================================
   404
   ========================================================= */
.ld_404 {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(50px, 8vw, 110px) 0 clamp(30px, 4vw, 50px);
  text-align: center;
}
.ld_404 b {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: clamp(50px, 9vw, 96px);
  font-weight: 500;
  line-height: 1;
  color: #b5331a;
  letter-spacing: 0.04em;
}
.ld_404 h1 {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(21px, 2.8vw, 28px);
  margin: 22px 0 14px;
}
.ld_404 p {
  font-size: 14px;
  line-height: 2.1;
  color: #57544c;
}
.ld_404_links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(26px, 3.4vw, 38px);
}
.ld_404_links a {
  text-decoration: none;
  border: 1px solid #1c1a16;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 500;
}
.ld_404_links a:hover {
  background: #1c1a16;
  color: #f2efe9;
}
/* ============================================================
   ページ個別CSSに残る「暗い地の上に置く前提の色」の後始末
   ------------------------------------------------------------
   course / bbs / series / citygame は、もともとサイト全体が濃紺だった頃の
   CSS で、淡い青灰や金を文字色に使っている。D案の地は紙なので、
   そのままでは 1.5:1 まで落ちて読めない。
   実際に全ページを測って出てきたものを、D案のトークンで上書きする。
   （読み込み順では後ろに読まれる側が勝つので、ビルド時に body を前置して
     こちらを確実に効かせている。）
   ============================================================ */
/* --- コース --- */
.course_move_label {
  color: #57544c;
}
body .course_move_btn {
  color: #57544c;
  border: 1px solid #d9d4c8;
  border-radius: 0;
  background: transparent;
}
body .course_move_btn:hover, body .course_move_btn:focus-visible {
  border-color: #1c1a16;
  color: #1c1a16;
}
.course_move_btn.is_active {
  background: #b5331a;
  border-color: #b5331a;
  color: #fff;
}
body .course_create_btn {
  background: #b5331a;
  color: #fff;
  border: 1px solid #b5331a;
  border-radius: 0;
}
body .course_create_btn:hover {
  background: #1c1a16;
  border-color: #1c1a16;
  color: #fff;
}
/* 写真の上に重ねる件数バッジ。地を濃く、文字を白に */
.course_card_count {
  background: rgba(28, 26, 22, 0.86);
  color: #fff;
  border-radius: 0;
}
body .course_card_title {
  color: #1c1a16;
}
body .course_memo_item {
  color: #57544c;
}
body .course_memo_item::before {
  background: #b5331a;
  color: #fff;
}
body .course_memo_name {
  color: #1c1a16;
}
body .course_private_badge {
  background: #ebe6db;
  color: #1c1a16;
  border-radius: 0;
}
body .course_detail_stat {
  color: #57544c;
}
.course_detail_stat strong {
  color: #b5331a;
}
body .course_progress {
  background: #fbfaf7;
  border: 1px solid #d9d4c8;
  border-radius: 0;
}
/* --- 掲示板 --- */
.bbs_board_badge {
  background: #ebe6db;
  color: #57544c;
  border-radius: 0;
}
body .bbs_board_tab, body .bbs_cat_tab {
  background: transparent;
  color: #57544c;
  border: 1px solid #d9d4c8;
  border-radius: 0;
}
body .bbs_board_tab:hover, body .bbs_cat_tab:hover {
  border-color: #1c1a16;
  color: #1c1a16;
}
.bbs_board_tab.is_active, .bbs_cat_tab.is_active {
  background: #1c1a16;
  border-color: #1c1a16;
  color: #f2efe9;
}
/* --- 連載（開発記） --- */
.series_no, .series_index_count {
  color: #b5331a;
}
.series_title {
  color: #1c1a16;
}
.series_date {
  color: #615c51;
}
/* --- ゲームの解説文（紙地に載る段落） --- */
.cg_guide_note, .cg_guide_sec p, .cg_devlog p {
  color: #57544c;
}
/* ============================================================
   YouTube チャンネルのページ
   ------------------------------------------------------------
   もとの組みは「動画も関連チャンネルも 3 列のグリッド」。
   D案側でその指定を落としていたため、1 列になってサムネイルが
   本文幅いっぱいに引き伸ばされていた。組み方はもとに戻し、
   角丸と影だけ D案（角は立てる・影は使わない）にそろえる。
   ============================================================ */
.profile_videos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 20px);
  margin-top: 18px;
}
@media (max-width: 900px) {
.profile_videos {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
.profile_videos {
    grid-template-columns: 1fr;
  }
}
.profile_video_card {
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  transition: border-color 0.18s ease;
}
.profile_video_card:hover {
  border-color: #1c1a16;
  transform: none;
  box-shadow: none;
}
.profile_video_thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: #d9d4c8;
}
.profile_video_title {
  display: block;
  padding: 11px 13px 13px;
  font-size: 13px;
  line-height: 1.7;
  color: #1c1a16;
}
/* 「このチャンネルが好きなら」も 3 列 */
.profile_relate {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 20px);
  margin-top: 18px;
  padding: 0;
}
@media (max-width: 900px) {
.profile_relate {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
.profile_relate {
    grid-template-columns: 1fr;
  }
}
/* ページ上部の大きな画像は、本文の幅から出して画面の端まで見せる。
   16:9 のままだと縦に長すぎて最初の画面が写真だけで埋まるので、帯の比率にする。 */
.page_head_channel .profile_banner {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: clamp(18px, 2.4vw, 28px);
  aspect-ratio: 16/5;
  overflow: hidden;
  background: #d9d4c8;
  border-radius: 0;
  box-shadow: none;
}
.page_head_channel .profile_banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 640px) {
.page_head_channel .profile_banner {
    aspect-ratio: 16/7;
  }
}
/* ロゴと名前は横並び（もとの組み） */
.page_head_channel .profile_head {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 22px);
  padding: 0 0 clamp(14px, 2vw, 20px);
}
.page_head_channel .profile_icon {
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  border: 1px solid #d9d4c8;
  padding: 6px;
}
@media (max-width: 640px) {
.page_head_channel .profile_icon {
    width: 64px;
    height: 64px;
  }
}
/* ============================================================
   作品のヒーロー（*_stage）を、紙面から切り離す
   ------------------------------------------------------------
   暗い帯は紙面に開いた窓で、ページの導入（[page_head] の
   アイキャッチ・見出し・リード文）とは別の面。
   その窓枠に導入のリード文が接していると、帯が「次の面」ではなく
   「本文の続き」に見えて、どこまでが説明でどこからがゲームなのかが
   読み取れない。実測では 10 作品すべてで上端の余白が 0px、
   9 作品で下端も 0px だった（.page_head は padding:0 で閉じ、
   *_stage 側も外側に余白を持っていないため、ちょうど突き合わせになる）。

   窓の上下に紙の余白を置いて、面として切り離す。
   値は D案 のセクション間隔と同じ刻みにそろえる。
   クラスを 1 つずつ並べるのは *_outro で並べ忘れの指摘を受けたため、
   属性セレクタの網も併せて張る。
   ============================================================ */
.citygame_stage, body .election_stage, body .takehome_stage, body .keizai_stage, body .nenkin_stage, body .mayor_stage, body .iryohi_stage, body .shogaku_stage, body .inflation_stage, body .camp_stage, main > section[class$=_stage] {
  margin-top: clamp(26px, 3.4vw, 40px);
  margin-bottom: clamp(30px, 4vw, 46px);
}
/* ============================================================
   ページ下部の誘導ブロック（*_outro）
   ------------------------------------------------------------
   旧テーマの濃紺の地に、明るい文字を載せる前提で組まれている。
   D案 の地は紙なので、暗い地のまま残ると文字が沈んで読めない。
   これまでクラス名を並べて一つずつ紙に倒していたため、
   並べ忘れたもの（mayor_outro など）が残って指摘を受けた。
   ここで全作品ぶんをまとめて紙の側に置き直す。
   暗い面は各作品のヒーロー（*_stage）だけに絞る、という方針にそろえる。
   ============================================================ */
.citygame_outro, body .election_outro, body .takehome_outro, body .keizai_outro, body .nenkin_outro, body .mayor_outro, body .iryohi_outro, body .shogaku_outro, body .inflation_outro, body .camp_outro, .game_outro, .cg_outro {
  background: #fbfaf7;
  background-image: none;
  border: 1px solid #d9d4c8;
  border-radius: 0;
  box-shadow: none;
  color: #1c1a16;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 40px);
  /* 誘導の枠がページの最後の部品に接して終わっていた（実測 0px）。
     枠は「ここで話が終わって、次はこちら」という区切りなので、
     前後に間合いが無いとただの続きに見える。 */
  margin: clamp(30px, 4vw, 46px) 0;
  /* 中の文字も紙の上の色にそろえる */
}
.citygame_outro h2, .citygame_outro h3, .citygame_outro p, .citygame_outro strong, .citygame_outro b, .citygame_outro em, .citygame_outro span, .election_outro h2, .election_outro h3, .election_outro p, .election_outro strong, .election_outro b, .election_outro em, .election_outro span, .takehome_outro h2, .takehome_outro h3, .takehome_outro p, .takehome_outro strong, .takehome_outro b, .takehome_outro em, .takehome_outro span, .keizai_outro h2, .keizai_outro h3, .keizai_outro p, .keizai_outro strong, .keizai_outro b, .keizai_outro em, .keizai_outro span, .nenkin_outro h2, .nenkin_outro h3, .nenkin_outro p, .nenkin_outro strong, .nenkin_outro b, .nenkin_outro em, .nenkin_outro span, .mayor_outro h2, .mayor_outro h3, .mayor_outro p, .mayor_outro strong, .mayor_outro b, .mayor_outro em, .mayor_outro span, .iryohi_outro h2, .iryohi_outro h3, .iryohi_outro p, .iryohi_outro strong, .iryohi_outro b, .iryohi_outro em, .iryohi_outro span, .shogaku_outro h2, .shogaku_outro h3, .shogaku_outro p, .shogaku_outro strong, .shogaku_outro b, .shogaku_outro em, .shogaku_outro span, .inflation_outro h2, .inflation_outro h3, .inflation_outro p, .inflation_outro strong, .inflation_outro b, .inflation_outro em, .inflation_outro span, .camp_outro h2, .camp_outro h3, .camp_outro p, .camp_outro strong, .camp_outro b, .camp_outro em, .camp_outro span, .game_outro h2, .game_outro h3, .game_outro p, .game_outro strong, .game_outro b, .game_outro em, .game_outro span, .cg_outro h2, .cg_outro h3, .cg_outro p, .cg_outro strong, .cg_outro b, .cg_outro em, .cg_outro span {
  color: inherit;
}
.citygame_outro a:not([class]), .election_outro a:not([class]), .takehome_outro a:not([class]), .keizai_outro a:not([class]), .nenkin_outro a:not([class]), .mayor_outro a:not([class]), .iryohi_outro a:not([class]), .shogaku_outro a:not([class]), .inflation_outro a:not([class]), .camp_outro a:not([class]), .game_outro a:not([class]), .cg_outro a:not([class]) {
  color: #b5331a;
}
.citygame_outro .citygame_cta_note, .citygame_outro .election_cta_note, .citygame_outro .takehome_cta_note, .citygame_outro .keizai_cta_note, .citygame_outro .nenkin_cta_note, .citygame_outro .mayor_cta_note, .citygame_outro .iryohi_cta_note, .citygame_outro .shogaku_cta_note, .citygame_outro .inflation_cta_note, .citygame_outro .camp_cta_note, .election_outro .citygame_cta_note, .election_outro .election_cta_note, .election_outro .takehome_cta_note, .election_outro .keizai_cta_note, .election_outro .nenkin_cta_note, .election_outro .mayor_cta_note, .election_outro .iryohi_cta_note, .election_outro .shogaku_cta_note, .election_outro .inflation_cta_note, .election_outro .camp_cta_note, .takehome_outro .citygame_cta_note, .takehome_outro .election_cta_note, .takehome_outro .takehome_cta_note, .takehome_outro .keizai_cta_note, .takehome_outro .nenkin_cta_note, .takehome_outro .mayor_cta_note, .takehome_outro .iryohi_cta_note, .takehome_outro .shogaku_cta_note, .takehome_outro .inflation_cta_note, .takehome_outro .camp_cta_note, .keizai_outro .citygame_cta_note, .keizai_outro .election_cta_note, .keizai_outro .takehome_cta_note, .keizai_outro .keizai_cta_note, .keizai_outro .nenkin_cta_note, .keizai_outro .mayor_cta_note, .keizai_outro .iryohi_cta_note, .keizai_outro .shogaku_cta_note, .keizai_outro .inflation_cta_note, .keizai_outro .camp_cta_note, .nenkin_outro .citygame_cta_note, .nenkin_outro .election_cta_note, .nenkin_outro .takehome_cta_note, .nenkin_outro .keizai_cta_note, .nenkin_outro .nenkin_cta_note, .nenkin_outro .mayor_cta_note, .nenkin_outro .iryohi_cta_note, .nenkin_outro .shogaku_cta_note, .nenkin_outro .inflation_cta_note, .nenkin_outro .camp_cta_note, .mayor_outro .citygame_cta_note, .mayor_outro .election_cta_note, .mayor_outro .takehome_cta_note, .mayor_outro .keizai_cta_note, .mayor_outro .nenkin_cta_note, .mayor_outro .mayor_cta_note, .mayor_outro .iryohi_cta_note, .mayor_outro .shogaku_cta_note, .mayor_outro .inflation_cta_note, .mayor_outro .camp_cta_note, .iryohi_outro .citygame_cta_note, .iryohi_outro .election_cta_note, .iryohi_outro .takehome_cta_note, .iryohi_outro .keizai_cta_note, .iryohi_outro .nenkin_cta_note, .iryohi_outro .mayor_cta_note, .iryohi_outro .iryohi_cta_note, .iryohi_outro .shogaku_cta_note, .iryohi_outro .inflation_cta_note, .iryohi_outro .camp_cta_note, .shogaku_outro .citygame_cta_note, .shogaku_outro .election_cta_note, .shogaku_outro .takehome_cta_note, .shogaku_outro .keizai_cta_note, .shogaku_outro .nenkin_cta_note, .shogaku_outro .mayor_cta_note, .shogaku_outro .iryohi_cta_note, .shogaku_outro .shogaku_cta_note, .shogaku_outro .inflation_cta_note, .shogaku_outro .camp_cta_note, .inflation_outro .citygame_cta_note, .inflation_outro .election_cta_note, .inflation_outro .takehome_cta_note, .inflation_outro .keizai_cta_note, .inflation_outro .nenkin_cta_note, .inflation_outro .mayor_cta_note, .inflation_outro .iryohi_cta_note, .inflation_outro .shogaku_cta_note, .inflation_outro .inflation_cta_note, .inflation_outro .camp_cta_note, .camp_outro .citygame_cta_note, .camp_outro .election_cta_note, .camp_outro .takehome_cta_note, .camp_outro .keizai_cta_note, .camp_outro .nenkin_cta_note, .camp_outro .mayor_cta_note, .camp_outro .iryohi_cta_note, .camp_outro .shogaku_cta_note, .camp_outro .inflation_cta_note, .camp_outro .camp_cta_note, .game_outro .citygame_cta_note, .game_outro .election_cta_note, .game_outro .takehome_cta_note, .game_outro .keizai_cta_note, .game_outro .nenkin_cta_note, .game_outro .mayor_cta_note, .game_outro .iryohi_cta_note, .game_outro .shogaku_cta_note, .game_outro .inflation_cta_note, .game_outro .camp_cta_note, .cg_outro .citygame_cta_note, .cg_outro .election_cta_note, .cg_outro .takehome_cta_note, .cg_outro .keizai_cta_note, .cg_outro .nenkin_cta_note, .cg_outro .mayor_cta_note, .cg_outro .iryohi_cta_note, .cg_outro .shogaku_cta_note, .cg_outro .inflation_cta_note, .cg_outro .camp_cta_note {
  color: #57544c;
}
.citygame_outro .citygame_outro_links, .citygame_outro .game_outro_links, .citygame_outro [class$=_outro_links] a, .citygame_outro [class$=_outro_copy], .election_outro .citygame_outro_links, .election_outro .game_outro_links, .election_outro [class$=_outro_links] a, .election_outro [class$=_outro_copy], .takehome_outro .citygame_outro_links, .takehome_outro .game_outro_links, .takehome_outro [class$=_outro_links] a, .takehome_outro [class$=_outro_copy], .keizai_outro .citygame_outro_links, .keizai_outro .game_outro_links, .keizai_outro [class$=_outro_links] a, .keizai_outro [class$=_outro_copy], .nenkin_outro .citygame_outro_links, .nenkin_outro .game_outro_links, .nenkin_outro [class$=_outro_links] a, .nenkin_outro [class$=_outro_copy], .mayor_outro .citygame_outro_links, .mayor_outro .game_outro_links, .mayor_outro [class$=_outro_links] a, .mayor_outro [class$=_outro_copy], .iryohi_outro .citygame_outro_links, .iryohi_outro .game_outro_links, .iryohi_outro [class$=_outro_links] a, .iryohi_outro [class$=_outro_copy], .shogaku_outro .citygame_outro_links, .shogaku_outro .game_outro_links, .shogaku_outro [class$=_outro_links] a, .shogaku_outro [class$=_outro_copy], .inflation_outro .citygame_outro_links, .inflation_outro .game_outro_links, .inflation_outro [class$=_outro_links] a, .inflation_outro [class$=_outro_copy], .camp_outro .citygame_outro_links, .camp_outro .game_outro_links, .camp_outro [class$=_outro_links] a, .camp_outro [class$=_outro_copy], .game_outro .citygame_outro_links, .game_outro .game_outro_links, .game_outro [class$=_outro_links] a, .game_outro [class$=_outro_copy], .cg_outro .citygame_outro_links, .cg_outro .game_outro_links, .cg_outro [class$=_outro_links] a, .cg_outro [class$=_outro_copy] {
  color: #57544c;
}
.citygame_outro [class$=_outro_links] a:hover, .election_outro [class$=_outro_links] a:hover, .takehome_outro [class$=_outro_links] a:hover, .keizai_outro [class$=_outro_links] a:hover, .nenkin_outro [class$=_outro_links] a:hover, .mayor_outro [class$=_outro_links] a:hover, .iryohi_outro [class$=_outro_links] a:hover, .shogaku_outro [class$=_outro_links] a:hover, .inflation_outro [class$=_outro_links] a:hover, .camp_outro [class$=_outro_links] a:hover, .game_outro [class$=_outro_links] a:hover, .cg_outro [class$=_outro_links] a:hover {
  color: #b5331a;
}
/* --- コースのカード。角丸と影が残っていて、ほかの一覧と別物に見えていた --- */
.course_card {
  background: #fbfaf7;
  border: 1px solid #d9d4c8;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  transition: border-color 0.18s ease;
}
body .course_card:hover {
  border-color: #1c1a16;
  box-shadow: none;
  transform: none;
}
body .course_card_link {
  color: #1c1a16;
}
body .course_card_photo {
  aspect-ratio: 3/2;
  background: #d9d4c8;
}
body .course_card_title {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  color: #1c1a16;
}
body .course_card_area, body .course_card_author, body .course_card_progress {
  color: #615c51;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
}
body .course_card_desc {
  color: #57544c;
}
/* 移動手段のバッジ。彩度の高い色が並ぶと紙面が散らかるので、
   D案の紙・罫・インクで組み、種類は文字で見分ける */
.course_move_tag {
  border-radius: 0;
  background: #ebe6db;
  color: #1c1a16;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border: 1px solid #d9d4c8;
}
body .course_move_tag_car, body .course_move_tag_train, body .course_move_tag_ferry, body .course_move_tag_air {
  background: #ebe6db;
  color: #1c1a16;
}
body .course_card_private, body .course_card_complete {
  border-radius: 0;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
}
body .course_card_complete {
  background: #b5331a;
  color: #fff;
}
body .course_card_private {
  background: #ebe6db;
  color: #57544c;
}
/* 説明ページに貼る画面キャプチャ。縦長のものが 420px 幅で左に寄ったまま
   縦に積まれていて、本文幅 1128px の右 700px が空いて間延びしていた。
   中央に置き、キャプションを添えて、写真として成立させる。 */
.guide_shot {
  max-width: 420px;
  margin-inline: auto;
  margin-block: clamp(20px, 3vw, 32px);
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
  padding: 10px;
}
.guide_shot img {
  display: block;
  width: 100%;
  height: auto;
}
.guide_shot_cap {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  line-height: 1.8;
  color: #615c51;
  text-align: center;
  padding-top: 8px;
}
/* Q と A の頭をそろえる。
   ページ側の CSS が .guide_faq_q に padding-left: 26px を残していて、
   Q の印だけが 26px 右に寄り、A の印と縦のラインが合っていなかった。
   自動の底上げが効かない場所があるので、ここは自分で詳細度を上げて確実に勝たせる。 */
body .guide_faq_q, body .guide_faq_a {
  padding-left: 0;
  margin-left: 0;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
body .guide_faq_q::before, body .guide_faq_a::before {
  position: static;
  left: auto;
  top: auto;
}
/* ==================================================================
   作品のヒーロー（*_stage）の内側は、この下層スタイルを持ち込まない。

   ヒーローだけは暗い地のまま見せる決まりなのに、ここで書いた紙前提の
   文字色と組みがそのまま流れ込み、手取りゲームでは
   ・打ち消し線の「額面 500万円」が地に沈んで読めない
   ・リード文が 2.4:1 まで落ちて読めない
   ・内訳の帯が幅 2px につぶれて、そもそも帯が見えない
   という状態になっていた。作品側の CSS は地に応じて色を切り替える変数を
   持っているので、ヒーローの中ではそこへ返す。
   ================================================================== */
.takehome_stage .takehome_eyebrow {
  color: var(--th_take);
}
.takehome_stage .takehome_catch {
  color: var(--th_muted);
}
.takehome_stage .takehome_catch_strike {
  color: var(--cg_fg);
  text-decoration-color: var(--cg_fg);
}
.takehome_stage .takehome_catch_net {
  color: var(--th_take);
}
body .takehome_stage {
  /* ヒーローの見出しは帯でなく、左右に細い罫を引く組み */
}
.takehome_stage .takehome_title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.4vw, 22px);
  margin: 0 0 20px;
  padding-bottom: 0;
  border-bottom: 0;
}
.takehome_stage .takehome_title::after {
  content: none;
}
.takehome_stage .takehome_title_rule {
  display: block;
  flex: 1;
  max-width: 110px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--th_line), transparent);
}
@media (max-width: 640px) {
.takehome_stage .takehome_title_rule {
    max-width: 40px;
  }
}
.takehome_stage .takehome_title_text {
  color: var(--cg_fg);
}
.takehome_stage .takehome_lead {
  color: var(--th_muted);
}
body .takehome_stage {
  /* 内訳メーター。外枠は帯を並べる器で、帯そのものではない */
}
.takehome_stage .takehome_meter {
  display: block;
  max-width: 560px;
  margin: 0 auto 34px;
  gap: 0;
  text-align: left;
}
.takehome_stage .takehome_meter_head, .takehome_stage .takehome_meter_foot {
  color: var(--th_muted);
}
.takehome_stage .takehome_meter_gross {
  color: var(--cg_fg);
}
.takehome_stage .takehome_meter_stack {
  border: 0;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.1);
}
.takehome_stage .takehome_meter_seg {
  flex: 0 0 auto;
  height: 100%;
}
.takehome_stage .takehome_meter_take {
  background: linear-gradient(90deg, #1f9a72, #5ee0b2);
}
.takehome_stage .takehome_meter_social {
  background: linear-gradient(90deg, #b96d1c, #e59b46);
}
.takehome_stage .takehome_meter_itax {
  background: #c25450;
}
.takehome_stage .takehome_meter_rtax {
  background: #5b8bc9;
}
.takehome_stage .takehome_meter_note {
  color: var(--cg_muted);
}
.takehome_stage .takehome_cta_note {
  color: var(--th_muted);
}
body .takehome_stage {
  /* 副の導線。主ボタンと同じ朱の箱で並んでいて、どちらを押せばいいのか
     分からないうえ、朱地に暗いインクが乗って文字がほとんど読めなかった。
     主は朱の箱、副は線だけの箱にして、押す順番が見た目で分かるようにする。 */
}
.takehome_stage .takehome_cta_sub {
  background: transparent;
  color: #e8f1ee;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 3px;
  box-shadow: none;
}
.takehome_stage .takehome_cta_sub:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}
body .takehome_stage {
  /* ヒーローは中央ぞろえの組みなのに、ボタンの行だけ左に寄って、
     注記がボタンの右隣に回り込んでいた。中央に戻し、注記は下の行に置く。 */
}
.takehome_stage .takehome_cta_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.takehome_stage .takehome_cta_note {
  flex: 1 0 100%;
  text-align: center;
  margin-top: 4px;
}
body .takehome_stage {
  /* 主と副で高さが 9px ずれていたので、同じ高さにそろえる */
}
.takehome_stage .takehome_cta, .takehome_stage .takehome_cta_sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  min-width: 280px;
  padding: 0 32px;
  font-size: 15px;
  line-height: 1.4;
}
/* ==================================================================
   ゲームページの「よくある質問」と、その下のアフィリエイト枠。

   この2ブロックだけ、モジュールの中に <style> が直に書いてあり、
   緑がかった別の配色（地 #f4f6f3／文字 #1b222c／緑のボタン #3f6b4a／角丸）で
   組まれていた。ページの中でここだけ色も形も違う島になっていて、
   注記は 4.4:1 まで落ちていた。その <style> は外したので、ここで組み直す。
   ================================================================== */
.game_faq {
  background: #ebe6db;
  padding-block: clamp(34px, 5vw, 56px);
  /* 地を敷くので、左右は画面いっぱいに伸ばす */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.game_faq_inner {
  max-width: 880px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 24px);
}
.game_faq h2 {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: clamp(19px, 2.6vw, 26px);
  line-height: 1.5;
  margin: 6px 0 0;
  color: #1c1a16;
}
.game_faq_item h3 {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 8px;
  color: #1c1a16;
}
.game_faq_item p {
  font-size: 13.5px;
  line-height: 2.05;
  margin: 0;
  color: #57544c;
}
/* 記事下のアフィリエイト枠。主ボタンはサイト共通の朱にそろえる */
.game_next {
  border: 1px solid #d9d4c8;
  background: #fbfaf7;
  /* 下が 8px しか空いておらず、直後の注記（「このページの数字は…試算です」）が
     枠に貼りついていた。枠の中の話と枠の外の断り書きが地続きに見えるので、
     上下は同じ間合いにして、枠をひとつの面として閉じる。 */
  padding: 18px 20px;
  margin: clamp(26px, 3.4vw, 40px) 0;
}
.game_next h3 {
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 8px;
  color: #1c1a16;
}
.game_next p {
  font-size: 13.5px;
  line-height: 2;
  margin: 0 0 12px;
  color: #57544c;
}
/* ==================================================================
   升目の罫は、下に敷いた地ではなく、升そのものに持たせる。

   この組み方は「罫線色の地を敷き、1px の隙間を空け、升は紙で塗る」という
   やり方で升目の線を描いていた。中身が列数ぴったりなら何も起きないが、
   足りないと、空いた升がそのまま灰色のベタとして残る。
   実測でこうなっていた箇所：
     スタンプ一覧      6列に3枚   → 右半分が 560x200px の灰色
     手取りの対象一覧  4列に6個   → 562x140px
     公式チャンネル種別 3列に5個  → 375x143px
     記事の前後リンク  2列に1個   → 379x103px
     都道府県の升目    6列に47個  → 187x45px
   升に影で 1px の線を描けば、隙間だけが線になり、空いた升は地のまま残る。
   中身の数が変わっても崩れない。
   ================================================================== */
.pd_spots, .pd_area, .pd_modal_kinds, .ld_prevnext, .ld_compare, .ld_stamps, .ld_stamp_list, .ld_prefgrid, .ld_ba, .stamp_pref_grid, .stamp_list, .maker_grid, .article_nav, .channel_types, body .takehome_figures, body .takehome_figure_row, body .takehome_target_list {
  background: transparent;
  border: 0;
}
.pd_spots > *, .pd_area > *, .pd_modal_kinds > *, .ld_prevnext > *, .ld_compare > *, .ld_stamps > *, .ld_stamp_list > *, .ld_prefgrid > *, .ld_ba > *, .stamp_pref_grid > *, .stamp_list > *, .maker_grid > *, .article_nav > *, .channel_types > *, .takehome_figures > *, .takehome_figure_row > *, .takehome_target_list > * {
  box-shadow: 0 0 0 1px #d9d4c8;
}
/* ==================================================================
   絞り込みの折りたたみ（サイト共通の部品）

   一覧ページの絞り込みが画面の上半分を占領していて、
   記事が 1 本も見えないまま 1 画面目が終わっていた。
   （よりみちコラムは分類 58 個で高さ 299px、記事の始まりが y=600 より下。
     車中泊の一覧は最初の記事が y=1740px）
   スマホではさらに縦に伸びる。いま何で絞っているかを 1 行で見せ、
   選び直したいときだけ開く。中身は DOM に残るのでリンクとしては変わらない。
   ================================================================== */
.pd_fold {
  margin: 4px 0 clamp(18px, 2.4vw, 26px);
  border-top: 1px solid #1c1a16;
  border-bottom: 1px solid #d9d4c8;
}
.pd_fold_sum {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 18px;
  padding: 11px 2px;
  cursor: pointer;
  list-style: none;
}
.pd_fold_sum::-webkit-details-marker {
  display: none;
}
.pd_fold_sum:hover .pd_fold_more {
  color: #b5331a;
}
.pd_fold_now {
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: #615c51;
}
.pd_fold_now b {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: #1c1a16;
  margin-left: 10px;
}
.pd_fold_more {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #57544c;
}
.pd_fold_more i {
  font-style: normal;
  font-size: 10px;
  color: #615c51;
}
.pd_fold_more {
  /* 開くと向きが変わる三角。文字で描くので画像を足さない */
}
.pd_fold_more::after {
  content: "▾";
  font-size: 10px;
  transition: transform 0.2s;
}
.pd_fold[open] .pd_fold_more::after {
  transform: rotate(180deg);
}
.pd_fold[open] .pd_fold_sum {
  border-bottom: 1px solid #d9d4c8;
}
.pd_fold > .tech_filter, .pd_fold > .guide_filter, .pd_fold > .stay_filter {
  padding: 14px 0 16px;
}
@media (max-width: 640px) {
.pd_fold_sum {
    padding: 12px 2px;
  }
.pd_fold_now b {
    font-size: 13.5px;
  }
}
/* 検索パネルの中で折りたたむとき。パネル自身が枠を持っているので、
折りたたみ側の上下の罫は下だけにする */
.pd_fold_inset {
  margin: 0;
  border-top: 0;
}
.pd_fold_inset .pd_fold_sum {
  padding-inline: 0;
}
.pd_fold_inset > .spot_search_panel_row {
  padding-top: 12px;
}
/* ==================================================================
   スポット検索パネル：狭い画面での組み

   スマホでは、都道府県・キーワード・検索ボタンが縦に3段、
   「泊まったところだけ」と表示切替も2行になって、パネルだけで 467px あった。
   泊まる場所の一覧は 1, 196px スクロールしないと 1 件目が出ない状態。
   入力は 16px のまま（拡大されると画面がずれる）、行数だけ詰める。
   ================================================================== */
@media (max-width: 640px) {
.spot_db_form {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr) 58px;
    gap: 6px;
    align-items: stretch;
  }
.spot_db_select, .spot_db_input {
    min-width: 0;
    width: 100%;
    height: 42px;
    font-size: 16px; /* スマホで拡大されないための固定。規約どおり */
  }
.spot_db_select {
    font-size: 15px;
    padding-inline: 6px;
  }
.spot_db_submit {
    min-width: 0;
    width: 100%;
    height: 42px;
    padding: 0;
    font-size: 13px;
  }
.spot_search_panel_aux {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
  }
.spot_visited_toggle {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 12px;
    padding: 8px 10px;
  }
.spot_db_tabs {
    flex: 0 0 auto;
    margin-left: auto;
  }
.spot_db_tab {
    font-size: 12px;
    padding: 8px 10px;
  }
}
/* ==================================================================
狭い画面での上詰め

   スマホでは、パンくず・アイブロウ・見出し・リードで 326px、
   そのあとに節の見出しと絞り込みが続き、一覧の 1 件目が 1, 000px より下にあった。
   1 画面が 650px 程度なので、2 回スクロールしないと中身が出ない。
   文章は削らず、行間と余白だけを詰める。
   ================================================================== */
@media (max-width: 640px) {
.page_head_lead {
    font-size: 13.5px;
    line-height: 1.95;
    padding-top: 14px;
  }
.page_head_title {
    margin-top: 6px;
    padding-bottom: 10px;
  }
.page_head_eyebrow {
    margin-top: 14px;
  }
.breadcrumb {
    padding-top: 10px;
  }
.ld_lead {
    font-size: 13.5px;
    line-height: 1.95;
  }
.section_lead, .section_lead_light {
    font-size: 13.5px;
    line-height: 1.95;
  }
/* 節の見出しの前の空きも、画面の高さに対して大きすぎた */
  .section_title {
    margin-top: clamp(20px, 4vw, 28px);
  }
}
/* 一押しレビューの写真。cover で切っていたので、縦長の商品は
上下が落ちて何の道具か分からなくなっていた（台帳と同じ扱いにする）。
   地は白で、背景を抜いた商品写真と継ぎ目が出ない。 */
.gear_pickup_photo {
  background: #fff;
}
.gear_pickup_photo img {
  object-fit: contain;
}
@media (max-width: 640px) {
/* スマホでは、この枠だけで 723px あり、ギアが 1 件も見えないまま
     1 画面目が終わっていた。写真の高さと本文の行数を詰める。 */
  .gear_pickup {
    padding: 16px;
  }
.gear_pickup_photo {
    height: 150px;
  }
.gear_pickup_text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
/* 検索パネルは、種別・検索バー・表示切替の3段だった。
広い画面では検索バーの右がずっと空いているので、表示切替をそこへ入れて2段にする。
   一覧の1件目が 67px ぶん上がる。 */
@media (min-width: 900px) {
.spot_search_panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
.spot_search_panel_types {
    grid-column: 1/-1;
  }
.spot_search_panel_bar {
    grid-column: 1;
  }
.spot_search_panel_aux {
    grid-column: 2;
    justify-content: flex-end;
    align-items: center;
    padding-left: 18px;
  }
}
/* ==================================================================
並ぶボタンの高さと、部品の中の箇条書き

   ■ ボタンの高さ
   ボタンの高さを「文字サイズ＋上下の padding」で決めていたため、
   文字サイズの違う主ボタン（15px）と副ボタン（12.5px）が隣に並ぶと
   51px と 47px になり、下端が 10px ずれていた。
   同じ行の選択肢が違う高さだと、同じ種類の操作に見えない。
   高さは「押しやすさ」で決めるものなので、min-height で固定し、
   padding は横方向だけにする。48px はスマホのタップ領域の目安 44px を
   上回り、入力欄（42〜44px）と並べても釣り合う。
   主従は高さではなく地の色で示す（朱＝主／枠だけ＝副）。

   ■ 部品の中の箇条書き
   ステップナビ（01 入力／02 確認／03 完了）は ol/li で組んであるが、
   読みものの箇条書きではない。それなのに本文用の
   「li に margin-bottom 8px」「li + li に margin-top .5em」が当たり、
   2 つめ以降だけ 6.25px 下がって、現在地の枠と段差ができていた。
   クラスを付けた ul/ol は組みのための部品なので、読みものの行間を渡さない。
   ================================================================== */
.btn, .btn_primary, .btn_submit {
  min-height: 48px;
  padding-block: 0;
  box-sizing: border-box;
}
.btn {
  padding-inline: 24px;
}
.btn_primary, .btn_submit {
  padding-inline: 40px;
}
/* 「戻る」は、記事下の「一覧へ戻る」と同じクラス名で、
   下線だけのテキストリンクの組みを受け取っていた。
   フォームでは枠付きのボタンとして置いているので、
   .btn が付いているときはボタンの組みを優先する。 */
.btn_back.btn {
  border-bottom-width: 1px;
  padding-bottom: 0;
  margin-top: 0;
  font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 13.5px;
  letter-spacing: 0.04em;
}
.article_body, .editor, .mod_cont {
  /* 読みものの行間を渡すのは、素の ul／ol と is_bullet だけ */
}
.article_body ul[class]:not(.is_bullet) > li, .article_body ol[class]:not(.is_bullet) > li, .editor ul[class]:not(.is_bullet) > li, .editor ol[class]:not(.is_bullet) > li, .mod_cont ul[class]:not(.is_bullet) > li, .mod_cont ol[class]:not(.is_bullet) > li {
  margin: 0;
}
.article_body ul[class]:not(.is_bullet) > li + li, .article_body ol[class]:not(.is_bullet) > li + li, .editor ul[class]:not(.is_bullet) > li + li, .editor ol[class]:not(.is_bullet) > li + li, .mod_cont ul[class]:not(.is_bullet) > li + li, .mod_cont ol[class]:not(.is_bullet) > li + li {
  margin-top: 0;
}
.article_body, .editor, .mod_cont {
  /* 字下げも同じ。旧テーマの .article_body ul / ol（padding-left:1.4em）が
     クラスを付けた一覧まで字下げしていて、本文に差しこんだ商品カードの並び
     （ul.gear_gallery）だけ左端が本文より 21.7px 内側にずれていた。
     並びの左端は、その上の見出し・リード文とそろっていないと
     「本文の一部」ではなく「どこかから貼られたもの」に見える。 */
}
.article_body ul[class]:not(.is_bullet), .article_body ol[class]:not(.is_bullet), .editor ul[class]:not(.is_bullet), .editor ol[class]:not(.is_bullet), .mod_cont ul[class]:not(.is_bullet), .mod_cont ol[class]:not(.is_bullet) {
  /* 上の余白（1.4em）は、前の段落との間合いとしてそのまま使える。
     直すのは字下げだけ。 */
  padding-left: 0;
}