@charset "UTF-8";
/* ----------------------------------------------------------------------------
TOMOSU 固定ページ（本文を表示する型）
2026-10-05 TOMOSU 追加。制作会社のCSSは1つも書き換えていない。

模写元 ＝ 料金プランのページ（assets/css/plan.css）。
色・書体・寸法はそこから写した。
  深緑 #024023 / #01321b ・ 金 #b0974b ・ 金の文字 #dfa800
  カードの地 #fcf9f6 ・ 枠 1px #b0974b ・ 角丸 10px
  書体 ZenOldMincho（common.css が読み込みずみ）
飾りも、テーマが持っている実物を使う。
  帯の地   assets/img/common/title_bg_01.webp
  帯の印   assets/img/common/title_icon_02.svg
  節の印   assets/img/plan/vector.svg
  金の線   assets/img/plan/deco.webp
---------------------------------------------------------------------------- */

/* ===== 節ぜんたい（blog.css の #sec_blog と同じ地） ===== */
#sec_tomosu_page {
  background: #F8F6F3 url(../img/common/co_bg_02.webp) repeat left bottom;
  background-size: cover;
}
@media screen and (min-width: 1281px) { #sec_tomosu_page { padding: 0 0 120px; } }
@media screen and (min-width: 768px) and (max-width: 1280px) { #sec_tomosu_page { padding: 0 0 100px; } }
@media screen and (max-width: 767px) { #sec_tomosu_page { padding: 0 0 80px; } }

/* ===== 帯（料金ページの帯の、文字側だけを全幅にした形） ===== */
.tp_head {
  background: #024023;
  color: #fff;
  position: relative;
}
.tp_head .txt_wrap {
  background: url(../img/common/title_bg_01.webp) no-repeat center center;
  background-size: cover;
}
@media screen and (min-width: 1281px) {
  .tp_head .txt_wrap { padding: 72px calc((100vw - 1200px) / 2); }
  .tp_head .title_page_ja { font-size: 40px; }
  .tp_head .title_page_en { font-size: 20px; }
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  .tp_head .txt_wrap { padding: 56px 20px; }
  .tp_head .title_page_ja { font-size: 28px; }
  .tp_head .title_page_en { font-size: 16px; }
}
@media screen and (max-width: 767px) {
  .tp_head .txt_wrap { padding: 36px 20px; }
  .tp_head .title_page_ja { font-size: 20px; }
  .tp_head .title_page_en { font-size: 13px; }
}
.tp_head .title_page_ja {
  display: block;
  font-family: "ZenOldMincho-Medium", serif;
  line-height: 1.5;
  letter-spacing: 0.02em;
  margin: 0 0 6px;
}
.tp_head .title_page_en {
  display: block;
  color: #dfa800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.2;
  font-family: "LibreBaskerville-SemiBold", serif;
}
.tp_head .title_page_en::before {
  content: "";
  background: url(../img/common/title_icon_02.svg) no-repeat left center;
  background-size: contain;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -2px;
}

/* ===== 本文 ===== */
#sec_tomosu_page .article .content { color: #333; }
#sec_tomosu_page .article .content > * { margin-bottom: 24px; }
#sec_tomosu_page .article .content p { line-height: 2.1; }

/* 節の題（plan.css の vector_tit を写した） */
#sec_tomosu_page .article .content h2 {
  display: flex;
  align-items: flex-start;
  color: #024023;
  font-family: "ZenOldMincho-Medium", serif;
  line-height: 1.6;
  /* 🔴 common.css の .article .content h2 は
     border-left 3px / padding 7px 10px / background #fff を持っている。
     模写元（料金ページの節の題）に白い帯は無いので、3つとも打ち消す。 */
  border: none;
  background: none;
  padding: 0;
  margin: 56px 0 16px;
}
#sec_tomosu_page .article .content h2::before {
  content: "";
  display: inline-block;
  background-image: url(../img/plan/vector.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 14px;
  min-width: 14px;
  aspect-ratio: 1;
  margin: 0.55em 8px 0 0;
}
@media screen and (min-width: 1281px) { #sec_tomosu_page .article .content h2 { font-size: 26px; } }
@media screen and (min-width: 768px) and (max-width: 1280px) { #sec_tomosu_page .article .content h2 { font-size: 22px; } }
@media screen and (max-width: 767px) {
  #sec_tomosu_page .article .content h2 { font-size: 18px; margin: 40px 0 12px; }
  #sec_tomosu_page .article .content h2::before { width: 11px; min-width: 11px; }
}

#sec_tomosu_page .article .content h3 {
  color: #01321b;
  font-family: "ZenOldMincho-Medium", serif;
  line-height: 1.6;
  /* 🔴 common.css の h3 は border-bottom を持つ。左の線だけにする。 */
  border: none;
  border-left: 3px solid #b0974b;
  padding: 2px 0 2px 12px;
  margin: 36px 0 12px;
}
@media screen and (min-width: 1281px) { #sec_tomosu_page .article .content h3 { font-size: 20px; } }
@media screen and (max-width: 1280px) { #sec_tomosu_page .article .content h3 { font-size: 16px; margin: 28px 0 10px; } }

/* 箇条書き（🔴 頭は金の丸点 6px・2026-09-21 指示） */
#sec_tomosu_page .article .content ul { padding: 0; margin: 0 0 24px; }
#sec_tomosu_page .article .content ul li {
  list-style: none;
  position: relative;
  padding-left: 18px;
  line-height: 2;
}
#sec_tomosu_page .article .content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b0974b;
}

/* 駅の並び（横に流れる札） */
#sec_tomosu_page .tp_stations {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin: 0 0 24px;
}
#sec_tomosu_page .tp_stations li {
  list-style: none;
  background: #fcf9f6;
  border: 1px solid #b0974b;
  border-radius: 999px;
  color: #01321b;
  font-size: 15px;
  line-height: 1.6;
  padding: 7px 16px;
  position: relative;
}
#sec_tomosu_page .tp_stations li::before { content: none; }
/* 🔴 札と札の間に矢印は置かない。
   隙間と同じ大きさの印を負の位置に置くと札の縁に食い込み、
   折り返した行の先頭にも出て崩れる（2026-10-05 実物で指摘を受けた）。
   順番は本文の文で説明しているので、札は並べるだけにする。 */
#sec_tomosu_page .tp_stations li.is_here {
  background: #024023;
  border-color: #024023;
  color: #fff;
}
@media screen and (max-width: 767px) {
  #sec_tomosu_page .tp_stations li { font-size: 13px; padding: 5px 12px; }
}

/* カード（plan.css の .card を写した） */
#sec_tomosu_page .tp_cards {
  display: flex;
  gap: 24px;
  margin: 0 0 24px;
  padding: 0;
}
#sec_tomosu_page .tp_cards > li {
  list-style: none;
  background-color: #fcf9f6;
  border: solid 1px #b0974b;
  border-radius: 10px;
  padding: 24px 24px 26px;
  flex: 1 1 0;
  text-align: center;
  overflow: hidden;
}
#sec_tomosu_page .tp_cards > li::before { content: none; }
#sec_tomosu_page .tp_cards .card_tit {
  font-size: 20px;
  color: #01321b;
  font-family: "ZenOldMincho-Medium", serif;
  line-height: 1.5;
  margin: 0 0 4px;
}
#sec_tomosu_page .tp_cards .deco {
  display: block;
  background-image: url(../img/plan/deco.webp);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 100%;
  max-width: 288px;
  height: 20px;
  margin: 10px auto 12px;
}
#sec_tomosu_page .tp_cards .txt {
  font-size: 15px;
  line-height: 1.95;
  text-align: left;
  margin: 0;
}
#sec_tomosu_page .tp_cards .key {
  display: block;
  color: #024023;
  font-family: "ZenOldMincho-SemiBold", serif;
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 6px;
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
  #sec_tomosu_page .tp_cards { gap: 16px; }
  #sec_tomosu_page .tp_cards > li { padding: 20px 16px 22px; }
  #sec_tomosu_page .tp_cards .card_tit { font-size: 16px; }
  #sec_tomosu_page .tp_cards .txt { font-size: 14px; }
}
@media screen and (max-width: 767px) {
  #sec_tomosu_page .tp_cards { flex-direction: column; gap: 16px; }
  /* 🔴 縦並びにすると flex: 1 1 0 は「高さを等分」の意味になり、
     親に高さが無いのでカードが潰れて中身が見えなくなる（2026-10-05 実物で確認）。 */
  #sec_tomosu_page .tp_cards > li { flex: none; padding: 20px 20px 22px; }
  #sec_tomosu_page .tp_cards .card_tit { font-size: 16px; }
  #sec_tomosu_page .tp_cards .txt { font-size: 14px; }
}

/* 写真（料金ページの写真と同じく、角丸で影を落とす） */
#sec_tomosu_page .article .content .wp-block-image {
  margin: 28px auto;
  text-align: center;
}
#sec_tomosu_page .article .content .wp-block-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(1, 50, 27, 0.08);
}
/* 🔴 パソコンでは本文の幅いっぱいに出ると高さが750pxほどになり、
   写真だけで1画面を占めてしまう（2026-10-05 実物で見た）。
   帯の高さに抑えて、真ん中を残す。スマホは元の比率のままでちょうどよい。 */
@media screen and (min-width: 768px) {
  #sec_tomosu_page .article .content .wp-block-image img {
    max-height: 400px;
    object-fit: cover;
    object-position: center;
  }
}
#sec_tomosu_page .article .content .wp-block-image figcaption {
  font-size: 14px;
  color: #666;
  margin-top: 8px;
  line-height: 1.8;
}
@media screen and (max-width: 767px) {
  #sec_tomosu_page .article .content .wp-block-image { margin: 20px auto; }
  #sec_tomosu_page .article .content .wp-block-image figcaption { font-size: 12px; }
}

/* 表（料金ページの表と同じ形） */
#sec_tomosu_page .article .content figure.wp-block-table { margin: 0 0 24px; }
#sec_tomosu_page .article .content table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 15px;
  line-height: 1.9;
}
#sec_tomosu_page .article .content table th,
#sec_tomosu_page .article .content table td {
  border: 1px solid #ddd3b6;
  padding: 13px 18px;
  vertical-align: middle;
}
#sec_tomosu_page .article .content table thead th {
  background: #024023;
  color: #fff;
  font-weight: normal;
  text-align: center;
  font-family: "ZenOldMincho-Medium", serif;
}
#sec_tomosu_page .article .content table tbody th {
  background: #f5f0e4;
  color: #01321b;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  width: 1%;
}
#sec_tomosu_page .article .content table strong { color: #024023; }
@media screen and (max-width: 767px) {
  #sec_tomosu_page .article .content table { font-size: 13px; }
  #sec_tomosu_page .article .content table th,
  #sec_tomosu_page .article .content table td { padding: 10px 12px; }
  /* 🔴 width:1% のままだと「住所」が1文字ずつ縦に折れる（2026-10-05 実物で確認）。 */
  #sec_tomosu_page .article .content table tbody th { white-space: normal; width: 32%; }
}

/* 文中のリンク */
#sec_tomosu_page .article .content a {
  color: #024023;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: 0.3s;
}
#sec_tomosu_page .article .content a:hover { color: #b0974b; }

/* 締めのボタン（common.css の btn_main を写した）
   🔴 本文の中にあるので、上の「文中のリンク」の深緑に負ける。
   詳細度をそろえて白で上書きする（2026-10-05 に深緑地に深緑文字で出た）。 */
#sec_tomosu_page .tp_cta { text-align: center; margin: 40px 0 0; }
#sec_tomosu_page .article .content .tp_cta a,
#sec_tomosu_page .tp_cta a {
  display: inline-block;
  background: #024023;
  color: #fff;
  text-decoration: none;
  width: 300px;
  max-width: 100%;
  line-height: 62px;
  border-radius: 31px;
  font-size: 17px;
  letter-spacing: 0.04em;
  transition: 0.3s;
}
#sec_tomosu_page .article .content .tp_cta a:hover,
#sec_tomosu_page .tp_cta a:hover { background: #B0974B; color: #fff; opacity: 0.9; }
@media screen and (max-width: 767px) {
  #sec_tomosu_page .tp_cta a { width: 260px; line-height: 52px; font-size: 15px; }
}

/* ============================================================
   よくある質問（問いと答え）
   2026-10-05 追加。/faq/ のために足した。
   🔴 #sec_tomosu_page 配下に限定しているので、
      この型を選んでいないページ（制作会社の15枚）には1つも当たらない。
   🔴 common.css は dt { font-weight: normal } しか持っていないので、
      太さは font-family（ZenOldMincho-SemiBold）で出す。
   🔴 .content > * が margin-bottom:24px を持つので、
      dl の間隔は dl 自身の margin で上書きする。
   ============================================================ */
#sec_tomosu_page .tp_qa { margin: 0 0 8px; }

#sec_tomosu_page .article .content .tp_qa > dl {
  background-color: #fcf9f6;
  border: solid 1px #b0974b;
  border-radius: 10px;
  padding: 22px 26px 24px;
  margin: 0 0 16px;
}

#sec_tomosu_page .tp_qa dt,
#sec_tomosu_page .tp_qa dd {
  position: relative;
  padding-left: 44px;
  margin: 0;
}

#sec_tomosu_page .tp_qa dt {
  color: #01321b;
  font-family: "ZenOldMincho-SemiBold", serif;
  font-size: 18px;
  line-height: 1.7;
  min-height: 30px;
}

#sec_tomosu_page .tp_qa dd {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5dcc9;
  color: #333;
  font-size: 15px;
  line-height: 2.1875;
  min-height: 30px;
}

/* Q と A の丸い札 */
#sec_tomosu_page .tp_qa dt::before,
#sec_tomosu_page .tp_qa dd::before {
  position: absolute;
  left: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  font-family: "LibreBaskerville-SemiBold", serif;
  font-size: 15px;
  line-height: 30px;
  text-align: center;
}
#sec_tomosu_page .tp_qa dt::before { content: "Q"; background: #024023; top: 0; }
/* 🔴 dd は上に境界線と padding 16px があるので、その分だけ下げる。 */
#sec_tomosu_page .tp_qa dd::before { content: "A"; background: #b0974b; top: 17px; }

/* dd の中の箇条書き（金の丸点は本文の指定が当たる。左の寄りだけ整える） */
#sec_tomosu_page .article .content .tp_qa dd ul { margin: 10px 0 0; }

@media screen and (max-width: 767px) {
  #sec_tomosu_page .article .content .tp_qa > dl { padding: 18px 18px 20px; }
  #sec_tomosu_page .tp_qa dt,
  #sec_tomosu_page .tp_qa dd { padding-left: 36px; }
  #sec_tomosu_page .tp_qa dt { font-size: 16px; }
  #sec_tomosu_page .tp_qa dd { font-size: 14px; }
  #sec_tomosu_page .tp_qa dt::before,
  #sec_tomosu_page .tp_qa dd::before {
    width: 26px; height: 26px; line-height: 26px; font-size: 13px;
  }
  #sec_tomosu_page .tp_qa dd::before { top: 17px; }
}

/* 駅の札の中に「大曽根まで何分」を添える（2026-10-05 追加）
   🔴 数字は公式の時刻表から取ったもの。出どころはページの末尾に書く。 */
#sec_tomosu_page .tp_stations li .min {
  display: block;
  font-size: 11px;
  line-height: 1.5;
  color: #a3842f;
  margin-top: 1px;
  letter-spacing: 0;
}
/* 深緑の札（降りる駅）の中では、金のままだと読みにくいので薄い金にする */
#sec_tomosu_page .tp_stations li.is_here .min { color: #d8c489; }
@media screen and (max-width: 767px) {
  #sec_tomosu_page .tp_stations li .min { font-size: 10px; }
}

/* 出どころの注記（小さく・本文より薄い） */
#sec_tomosu_page .article .content p.tp_note {
  font-size: 13px;
  line-height: 1.9;
  color: #777;
}
@media screen and (max-width: 767px) {
  #sec_tomosu_page .article .content p.tp_note { font-size: 12px; }
}