@charset "UTF-8";

/* ================================================================
   北斎場ページ（/saijo/osaka-kita-saijo/）専用
   ・本文はエディタの「テキスト」タブに生HTMLで書く（見本：_dev-notes/saijo-hub-page-2026-09-10/北斎場ページ本文-v2-2026-09-28.html）
   ・このファイルは functions.php でフロントに、mce_css でエディタ画面にも読み込まれる
   ・クラスは .ks- で始める（ks = kita saijo）。全体を .ks で囲む
   ・色はサイトの既存値：赤 #f96f70 ／ ピンク #f88a8a・#ff8080 ／ うすピンク #fff2f3・#ffe4e6・#ffcdd2
     ／ 文字 #212121 ／ 補足 #555 ／ 罫線 #e0e0e0 ／ うすグレー #f7f7f7
   ・緑（#147582）はスリースターの章（.ks-partner）と .partnerbox だけに使う
   ================================================================ */

.ks {
  color: #212121;
}

.ks img {
  display: block;
  max-width: 100%;
  height: auto;
}

.ks h2.heading-section {
  margin-top: 56px;
  scroll-margin-top: 20px;
}

.ks h3 {
  margin-top: 36px;
  scroll-margin-top: 20px;
}

.ks .ks-note,
.ks .ks-source {
  font-size: 14px;
  color: #555;
}

.ks .ks-source {
  margin-top: -4px;
}

.ks .ks-source::before {
  content: "※";
}

/* リスト：.editor の既定（黒丸）を打ち消して自前で */
.ks ul.ks-list,
.ks ul.ks-check,
.ks ul.ks-tags,
.ks ul.ks-case_meta,
.ks ol.ks-steps,
.ks ol.ks-timeline,
.ks ol.ks-caution_list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ks .ks-list li,
.ks .ks-check li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 1.2em;
  line-height: 1.75;
}

.ks .ks-list li::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0.2em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f88a8a;
}

.ks ul.ks-check {
  margin: 16px 0 24px;
  padding: 18px 20px;
  border-radius: 8px;
  background: #f7f7f7;
}

.ks .ks-check li {
  padding-left: 1.6em;
}

.ks .ks-check li:last-child {
  margin-bottom: 0;
}

.ks .ks-check li::before {
  content: "";
  position: absolute;
  top: 0.45em;
  left: 0.1em;
  width: 0.55em;
  height: 0.9em;
  border-right: 3px solid #f96f70;
  border-bottom: 3px solid #f96f70;
  transform: rotate(40deg);
}

/* 写真（キャプション付き） */
.ks .ks-photo {
  margin: 0;
}

.ks .ks-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
}

.ks .ks-photo figcaption {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: #555;
}

.ks .ks-photo--none {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  background: #f7f7f7;
  font-size: 14px;
  color: #999;
}

.ks .ks-gallery {
  display: grid;
  gap: 16px 14px;
  margin: 20px 0 24px;
}

.ks .ks-gallery--2 {
  grid-template-columns: repeat(2, 1fr);
}

.ks .ks-gallery--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* ---------------- 冒頭 ---------------- */
.ks .ks-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
  border-radius: 10px;
}

.ks .ks-hero_img {
  margin: 0;
}

.ks .ks-hero_img img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.ks .ks-hero_body {
  padding: 20px 22px 22px;
  background: #fff2f3;
}

.ks .ks-hero_catch {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: bold;
  line-height: 1.6;
  color: #e04646;
}

.ks .ks-hero_lead {
  margin: 0;
  line-height: 1.8;
}

/* お急ぎの方へ（LPへ） */
.ks .ks-urgent {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 28px;
  padding: 16px 18px;
  border: 2px solid #f96f70;
  border-radius: 10px;
  background: #fff;
  color: #212121;
  text-decoration: none;
  transition: background-color 0.25s;
}

.ks .ks-urgent:hover,
.ks .ks-urgent:active {
  background: #fff2f3;
  color: #212121;
  text-decoration: none;
}

.ks .ks-urgent_label {
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 4px;
  background: #f96f70;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

.ks .ks-urgent_text {
  flex: 1;
  min-width: 0;
}

.ks .ks-urgent_ttl {
  display: block;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
}

.ks .ks-urgent_sub {
  display: block;
  font-size: 14px;
  color: #555;
}

.ks .ks-urgent_arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f96f70;
  color: #fff;
  font-weight: bold;
  transition: transform 0.25s;
}

.ks .ks-urgent:hover .ks-urgent_arrow {
  transform: translateX(4px);
}

/* 目的別の入口（写真つきカード） */
.ks .ks-navLead {
  margin: 0 0 12px;
  font-weight: bold;
  text-align: center;
}

.ks .ks-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}

.ks .ks-nav_item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #ffcdd2;
  border-radius: 10px;
  background: #fff;
  color: #212121;
  text-decoration: none;
}

/* ホバーで枠を太く：写真の上にも出るよう、枠線はカードの上に重ねた ::before で描く */
.ks .ks-nav_item {
  position: relative;
}

.ks .ks-nav_item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 3px solid transparent;
  border-radius: 9px;
  pointer-events: none;
  transition: border-color 0.25s;
}

.ks .ks-nav_item:hover,
.ks .ks-nav_item:active {
  color: #212121;
  text-decoration: none;
}

.ks .ks-nav_item:hover::before,
.ks .ks-nav_item:active::before {
  border-color: #ff8080;
}

.ks .ks-nav_item img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.ks .ks-nav_who {
  position: relative;
  padding: 12px 34px 2px 14px;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
}

.ks .ks-nav_who::after {
  content: "↓";
  position: absolute;
  top: 12px;
  right: 14px;
  color: #e04646;
}

.ks .ks-nav_what {
  padding: 0 14px 14px;
  font-size: 13px;
  color: #555;
}

/* ---------------- 1. ひと目で ---------------- */
.ks .ks-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 20px 0;
}

.ks .ks-facts_item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid #ffcdd2;
  border-radius: 8px;
  background: #fff2f3;
  color: #212121;
  text-decoration: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.ks .ks-facts_item {
  position: relative;
  padding-right: 40px;
}

/* 右上の丸い下向き矢印（押すとその章へ移動する目印） */
.ks .ks-facts_item::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23f96f70' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform 0.25s;
}

.ks .ks-facts_item:hover::after {
  transform: translateY(2px);
}

.ks .ks-facts_item:hover,
.ks .ks-facts_item:active {
  box-shadow: 0 2px 8px rgba(227, 61, 92, 0.18);
  border-color: #f88a8a;
  color: #212121;
  text-decoration: none;
}

.ks .ks-facts_label {
  font-size: 13px;
  font-weight: bold;
  color: #555;
}

.ks .ks-facts_value {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.35;
}

.ks .ks-facts_value small {
  margin-left: 2px;
  font-size: 14px;
}

.ks .ks-facts_note {
  font-size: 12px;
  line-height: 1.5;
  color: #555;
}

.ks .ks-point {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #f7f7f7;
  line-height: 1.7;
}

.ks .ks-point_label {
  display: inline-block;
  margin-right: 10px;
  padding: 1px 8px;
  border-radius: 4px;
  background: #f88a8a;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
}

/* 基本情報の表 */
.ks table.ks-spec {
  width: 100%;
  margin: 12px 0 20px;
  border: 1px solid #e0e0e0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  overflow: hidden;
}

.ks .ks-spec tr:last-child th,
.ks .ks-spec tr:last-child td {
  border-bottom: none;
}

.ks .ks-spec th,
.ks .ks-spec td {
  padding: 12px 14px;
  border-bottom: 1px solid #e0e0e0;
  line-height: 1.7;
  text-align: left;
  vertical-align: top;
}

.ks .ks-spec th {
  width: 9em;
  background: #fff2f3;
  font-weight: bold;
  white-space: nowrap;
}

.ks .ks-map {
  overflow: hidden;
  border-radius: 8px;
}

.ks .ks-map iframe {
  display: block;
}

/* ---------------- 2. アクセス ---------------- */
.ks .ks-access {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 20px 0;
}

.ks .ks-access_ttl {
  margin: 14px 0 8px;
  font-size: 18px;
  font-weight: bold;
}

/* 注意ボックス（番号つき） */
.ks .ks-caution {
  margin: 20px 0 24px;
  padding: 18px 20px;
  border: 2px solid #ffcdd2;
  border-radius: 10px;
  background: #fff;
}

.ks .ks-caution_ttl {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: bold;
  color: #e04646;
}

.ks .ks-caution_ttl::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border-radius: 50%;
  background: #f96f70;
  color: #fff;
  font-size: 14px;
  vertical-align: 1px;
}

.ks .ks-caution_list {
  counter-reset: kscaution;
}

.ks .ks-caution_list li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 2em;
  line-height: 1.75;
  counter-increment: kscaution;
}

.ks .ks-caution_list li:last-child {
  margin-bottom: 0;
}

.ks .ks-caution_list li::before {
  content: counter(kscaution);
  position: absolute;
  top: 0.2em;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  background: #ffe4e6;
  color: #e04646;
  font-size: 14px;
  font-weight: bold;
}

.ks .ks-caution p:last-child {
  margin-bottom: 0;
}

/* ---------------- 3. 料金 ---------------- */
.ks .ks-tableWrap {
  overflow-x: auto;
  margin: 12px 0 16px;
}

.ks table.ks-price {
  width: 100%;
  border: 1px solid #e0e0e0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  overflow: hidden;
}

.ks .ks-price th,
.ks .ks-price td {
  padding: 12px 14px;
  border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  line-height: 1.6;
}

.ks .ks-price tr > :last-child {
  border-right: none;
}

.ks .ks-price tbody tr:last-child > * {
  border-bottom: none;
}

.ks .ks-price thead th {
  background: #f88a8a;
  color: #fff;
  font-weight: bold;
  text-align: center;
}

.ks .ks-price tbody th {
  background: #fff2f3;
  font-weight: bold;
  text-align: left;
  white-space: nowrap;
}

.ks .ks-price tbody td {
  text-align: right;
  white-space: nowrap;
}

.ks .ks-price--halls tbody td {
  text-align: left;
  white-space: normal;
}

.ks .ks-price--halls tbody th small {
  display: block;
  font-size: 13px;
  font-weight: normal;
  color: #555;
}

.ks .ks-price--halls tbody td:nth-child(2) {
  text-align: right;
  white-space: nowrap;
}

/* 市民料金の2ケース */
.ks .ks-cases {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 16px 0 20px;
}

.ks .ks-cases_item {
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  background: #fff;
}

.ks .ks-cases_mark {
  display: inline-block;
  margin: 0 0 8px;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: bold;
}

.ks .ks-cases_item--ok .ks-cases_mark {
  background: #f96f70;
  color: #fff;
}

.ks .ks-cases_item--ng .ks-cases_mark {
  background: #e0e0e0;
  color: #212121;
}

.ks .ks-cases_ttl {
  margin: 0 0 6px;
  font-weight: bold;
  line-height: 1.6;
}

.ks .ks-cases_txt {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: #444;
}

/* ---------------- 4. 予約 ---------------- */
.ks ol.ks-steps {
  margin: 20px 0 24px;
}

.ks .ks-steps li {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 0 0 18px;
  position: relative;
}

.ks .ks-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 36px;
  bottom: 0;
  left: 17px;
  width: 2px;
  background: #ffcdd2;
}

.ks .ks-steps_num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f96f70;
  color: #fff;
  font-weight: bold;
}

.ks .ks-steps_body {
  padding-top: 4px;
}

.ks .ks-steps_ttl {
  display: block;
  font-size: 17px;
  font-weight: bold;
  line-height: 1.6;
}

.ks .ks-steps_txt {
  display: block;
  font-size: 15px;
  line-height: 1.7;
  color: #444;
}

/* 時期ごとの日数 */
.ks .ks-season {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 16px 0 8px;
}

.ks .ks-season_item {
  padding: 16px;
  border-radius: 10px;
  background: #f7f7f7;
  text-align: center;
}

.ks .ks-season_item--busy {
  background: #fff2f3;
}

.ks .ks-season_item p {
  margin: 0;
}

.ks .ks-season_label {
  font-weight: bold;
}

.ks .ks-season_value {
  font-size: 30px;
  font-weight: bold;
  line-height: 1.4;
}

.ks .ks-season_item--busy .ks-season_value {
  color: #e04646;
}

.ks .ks-season_value small {
  margin-left: 2px;
  font-size: 15px;
}

.ks .ks-season_note {
  font-size: 13px;
  color: #555;
}

/* 空いていないときの3択 */
.ks .ks-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 12px 0 16px;
}

.ks .ks-options_item {
  padding: 14px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.ks .ks-options_item p {
  margin: 0;
}

.ks .ks-options_num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 8px !important;
  border-radius: 50%;
  background: #ffe4e6;
  color: #e04646;
  font-weight: bold;
}

.ks .ks-options_txt {
  font-size: 15px;
  line-height: 1.65;
}

/* ---------------- 5. 式場 ---------------- */
.ks .ks-halls {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 16px 0;
}

.ks .ks-halls_item {
  padding: 12px 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
}

.ks .ks-halls_name {
  margin: 12px 0 0;
  font-size: 19px;
  font-weight: bold;
}

.ks .ks-halls_size {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: bold;
  color: #e04646;
}

.ks .ks-halls_item .ks-list li {
  font-size: 15px;
}

.ks .ks-qa {
  margin: 16px 0 24px;
  border-top: 1px solid #e0e0e0;
}

.ks .ks-qa_item {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #e0e0e0;
}

.ks .ks-qa_item p {
  margin: 0;
}

.ks .ks-qa_q {
  flex-shrink: 0;
  width: 5.5em;
  font-weight: bold;
  color: #e04646;
}

.ks .ks-qa_a {
  line-height: 1.75;
}

.ks .ks-subTtl {
  margin: 24px 0 0;
  font-size: 17px;
  font-weight: bold;
}

/* ---------------- 6. 当日 ---------------- */
.ks ol.ks-timeline {
  margin: 16px 0 24px;
  counter-reset: kstl;
}

.ks .ks-timeline li {
  position: relative;
  margin: 0;
  padding: 0 0 18px 52px;
  counter-increment: kstl;
}

.ks .ks-timeline li::before {
  content: counter(kstl);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 2px solid #f88a8a;
  border-radius: 50%;
  background: #fff;
  color: #e04646;
  font-weight: bold;
}

.ks .ks-timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 38px;
  bottom: 0;
  left: 18px;
  width: 2px;
  background: #ffcdd2;
}

.ks .ks-timeline_ttl {
  display: block;
  padding-top: 5px;
  font-size: 17px;
  font-weight: bold;
  line-height: 1.6;
}

.ks .ks-timeline_txt {
  display: block;
  font-size: 15px;
  line-height: 1.7;
  color: #444;
}

.ks ul.ks-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 14px;
}

.ks .ks-tags li {
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: #ffe4e6;
  font-size: 14px;
  line-height: 1.6;
}

/* ---------------- 7. 火葬後の相談 ---------------- */
.ks .ks-cta {
  margin: 28px 0 0;
  padding: 22px 22px 18px;
  border: 5px solid #ffcdd2;
  border-radius: 10px;
  text-align: center;
}

.ks .ks-cta p {
  margin: 0;
}

.ks .ks-cta_ttl {
  font-size: 20px;
  font-weight: bold;
  color: #e04646;
}

.ks .ks-cta_lead {
  margin-top: 10px !important;
  line-height: 1.75;
  text-align: left;
}

.ks .ks-cta_tel {
  margin-top: 14px !important;
}

.ks .ks-cta_tel img {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.ks .ks-cta_note {
  margin-top: 6px !important;
  font-size: 13px;
  color: #555;
}

/* ---------------- 7. スリースター（提携葬儀社）----------------
   この章だけ、見出しや飾りのピンク・赤をスリースターの緑に置き換える（背景はほかの章と同じ白）。
   緑はスリースターのパーツ（.partnerbox）と同じ値：#147582 ／ グラデ #4aa6ad→#147582 ／ うす緑 #eef7f8
   連絡先の枠（.partnerbox）は common.css の既存パーツをそのまま使う */
.ks .ks-partner {
  margin-top: 0;
}

.ks .ks-partner h2.heading-section {
  background: #147582;
}

.ks .ks-partner h3 {
  border-left-color: #147582;
  background: #eef7f8;
}

.ks .ks-case {
  margin: 16px 0;
  padding: 20px 22px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background: #fff;
}

.ks .ks-case p {
  margin-bottom: 0.7em;
  line-height: 1.8;
}

.ks .ks-case .ks-case_head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 8px;
}

.ks .ks-case_tag {
  padding: 2px 10px;
  border-radius: 4px;
  background: #147582;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
}

.ks .ks-case_ttl {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
}

.ks .ks-case_meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #e0e0e0;
}

.ks .ks-case_meta li {
  margin: 0;
  padding: 1px 10px;
  border: 1px solid #e0e0e0;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.7;
  color: #555;
}

.ks .ks-case .ks-case_voice {
  margin: 14px 0 0;
  padding: 14px 16px;
  border-left: 4px solid #147582;
  background: #eef7f8;
  font-weight: bold;
}

.ks .ks-case_voiceLabel {
  display: block;
  font-size: 13px;
  color: #147582;
}

@media screen and (min-width: 768px) {
  .ks .ks-partner h2.heading-section {
    background: linear-gradient(#4aa6ad, #147582);
  }
}

/* 執筆者（既存の著者プロフィール .department__expert__item をそのまま使う。上との間隔だけ） */
.ks .ks-author {
  margin-top: 56px;
}

/* ================= スマホ ================= */
@media screen and (max-width: 750px) {
  .ks h2.heading-section {
    margin-top: 44px;
  }

  .ks .ks-hero {
    margin-left: -5vw;
    margin-right: -5vw;
    border-radius: 0;
  }

  .ks .ks-hero_body {
    padding: 16px 5vw 18px;
  }

  .ks .ks-hero_catch {
    font-size: 19px;
  }

  .ks .ks-hero_catch br {
    display: none;
  }

  .ks .ks-urgent {
    padding: 14px;
    gap: 10px;
  }

  .ks .ks-urgent_label {
    display: none;
  }

  .ks .ks-urgent_ttl {
    font-size: 16px;
  }

  .ks .ks-urgent_sub {
    font-size: 13px;
  }

  /* 入口：横長カード（写真左・文字右） */
  .ks .ks-nav {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ks .ks-nav_item {
    display: grid;
    grid-template-columns: 96px 1fr;
    grid-template-rows: auto auto;
    align-items: center;
  }

  .ks .ks-nav_item img {
    grid-row: 1 / 3;
    height: 100%;
    aspect-ratio: auto;
  }

  .ks .ks-nav_who {
    align-self: end;
    padding: 10px 34px 0 12px;
    font-size: 15px;
  }

  .ks .ks-nav_who::after {
    top: 50%;
  }

  .ks .ks-nav_what {
    align-self: start;
    padding: 0 34px 10px 12px;
  }

  .ks .ks-facts {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .ks .ks-facts_item {
    padding: 12px 34px 12px 12px;
  }

  .ks .ks-facts_value {
    font-size: 20px;
  }

  .ks .ks-price th,
  .ks .ks-price td {
    padding: 10px 8px;
    font-size: 15px;
  }

  .ks .ks-price tbody th {
    white-space: normal;
  }

  .ks .ks-spec th {
    width: 6.5em;
    white-space: normal;
  }

  .ks .ks-spec th,
  .ks .ks-spec td {
    padding: 10px;
    font-size: 15px;
  }

  .ks .ks-access,
  .ks .ks-cases,
  .ks .ks-halls {
    grid-template-columns: 1fr;
  }

  .ks .ks-gallery {
    gap: 12px 10px;
  }

  .ks .ks-gallery--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .ks .ks-gallery--3 .ks-photo:first-child {
    grid-column: 1 / -1;
  }

  .ks .ks-photo figcaption {
    font-size: 13px;
  }

  .ks .ks-options {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ks .ks-options_item {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .ks .ks-options_num {
    flex-shrink: 0;
    margin-bottom: 0 !important;
  }

  .ks .ks-season_value {
    font-size: 26px;
  }

  .ks .ks-qa_item {
    flex-direction: column;
    gap: 4px;
  }

  .ks .ks-cta {
    padding: 18px 14px 14px;
  }

  .ks .ks-case {
    padding: 16px;
  }

  .ks .ks-case_ttl {
    font-size: 16px;
  }
}

/* 要点カードの上の案内（押すと詳しい説明へ移動することを伝える） */
.ks .ks-factsLead {
  margin: 20px 0 -8px;
  font-size: 14px;
  color: #555;
}