@charset "UTF-8";
/* ============================================================
   servicemenu.html 専用スタイル
   20260731：ページ内 <STYLE> から分離
   main.css の後に読み込むこと（:root の共通変数を参照するため）
   ============================================================ */

/* このページだけで使う色。配色を変えるときはここを書き換える */
:root {
  /* 商材ごとのテーマカラー */
  --menu_pers_main: #a7a7a7;    /* パース：見出し帯／外観列 */
  --menu_pers_sub: #b7b6b6;     /* パース：内観列 */
  --menu_vr_head: #a7a7a7;      /* Web VR：見出し帯 */
  --menu_vr_main: #9b9a9a;      /* Web VR：外観列 */
  --menu_vr_sub: #b3b3b3;       /* Web VR：内観列 */
  --menu_movie_main: #b2b91d;   /* ウォークスルームービー：外観列 */
  --menu_movie_sub: #b7bb52;    /* ウォークスルームービー：内観列 */

  /* 価格表 */
  --menu_cell_back: #ebebeb;    /* セル背景（淡）・表下線 */
  --menu_cell_accent: #f5f5f5;  /* セル背景（濃） */
  --menu_thead_back: #f5f5f5;

  /* その他 */
  --menu_text: #333;
  --menu_hr_line: #929292;      /* info-box 内の区切り線 */
  --menu_infobox_line: #e9e9e9;
  --menu_link_back: #7a2337;
}

/* 20260730：レイアウトtable→divへ置き換え（価格表・比較表はtable維持）
   20260731：main.css から移動 */
.p-menu {
  font-family: "Meiryo UI";
}

/* 旧：width97%の入れ子table＋div align="center"
   （three-column-table の td は text-align を持たず、この中央そろえを継承している） */
.p-menu .menu-inner {
  box-sizing: border-box;
  margin-inline: auto;
  text-align: center;
  width: 97%;
}

.font_16{
  font-size : 16px;
}

HR{
  border-width : 1px 1px 1px 1px;
  border-style : dotted dotted dotted dotted;
  border-color : var(--border_color) var(--border_color) var(--border_color) var(--border_color);
}

.detail-box {
  display: flex;
  flex-direction: column;
}

.detail-box .detail-box__head {
  align-items: center;
  border-radius: 20px;
  box-sizing: border-box;
  color: var(--base_white);
  display: flex;
  padding: 5px 10px;
  position: relative;
  width: 100%;
}

.detail-box .detail-box__head .title {
  display: block;
  margin: 0 auto;
  text-align: center;
}

.detail-box .detail-box__head .caption {
  color: var(--base_white);
  font-size: 11.5px;
  position: absolute;
  right: 12px;
  text-align: right;
}

.detail-box .detail-box__head .caption.link {
  background-color: var(--menu_link_back);
  box-sizing: border-box;
  border-radius: 10px;
  padding: 4px 10px;
  text-decoration: none;
}

.detail-box .detail-box__head .caption.link:hover {
  opacity: .7;
}

.flex-box {
  display: flex;
  flex-direction: column;
  gap: 64px 0;
  margin-top: 30px;
}

.otherButton {
  text-align: center;
  background: var(--base_back);
  border-radius: 5px;
  box-sizing: border-box;
  color: var(--base_back_font);
  display: block;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 15px;
  width: 100%;
}

.otherButton:hover {
  opacity: .7;
}

.table-wrap {
  width: 100%;
}

.three-column-table {
  border-spacing:0;
  width: 100%;
  table-layout: fixed;
}

.three-column-table:last-child {
  border-bottom: 2px solid var(--menu_cell_back);
}

.three-column-table th,
.three-column-table td {
  padding: 16px;
  vertical-align: unset;
}

.three-column-table thead th {
  background: var(--menu_thead_back);
  color: var(--base_white);
  font-weight: 700;
  font-size: 22px;
  text-align: left;
  vertical-align: inherit;
}

.three-column-table td {
  font-size: 21px;
  line-height: 1.5;
}

.three-column-table thead th:first-child,
.three-column-table tbody th {
  width: 176px;
}

.info-box {
  width: 100%;
  border: 2px solid var(--menu_infobox_line);
  padding: 18px 20px;
  box-sizing: border-box;
}

.info-box .border {
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.info-box .border:before,
.info-box .border:after {
  background: var(--menu_text);
  height: 1px;
  position: absolute;
  content: "";
  width: 35%;
}

.info-box .border:before {
  left: 0;
}

.info-box .border:after {
  right: 0;
}

.info-box__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 36px;
}

.info-box__left {
  flex: 1 1 auto;
  min-width: 0;
}

.info-box__right {
  flex: 0 0 210px;
  text-align: left;
}

.info-box__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 16px;
  border-radius: 30px;
  background: var(--accent_yellow);
  color: var(--base_white);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.info-box__list {
  margin: 0;
  padding-left: 18px;
}

.info-box__item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.info-box__item + .info-box__item {
  margin-top: 12px;
}

.info-box__text,
.info-box__subtext {
  display: block;
  color: var(--menu_text);
  text-align: left;
  line-height: 1.6;
}

.info-box__text {
  font-size: 14px;
}

.info-box__subtext {
  box-sizing: border-box;
  font-size: 14px;
  margin-top: 4px;
  padding-left: 20px;
}

.info-box__block + .info-box__block {
  margin-top: 14px;
}

.info-box__right-text {
  margin: 0;
  color: var(--menu_text);
  font-size: 14px;
  line-height: 1.6;
}

/* ============================================================
   20260731：HTML の style="" 204箇所から移設
   ※ .flex-box / .info-box__* / テーブル系の既定値を上書きするため、
     このブロックはファイル末尾に置くこと（同詳細度は後勝ち）
   ============================================================ */

/* 凡例アイコン（複数棟／4階建て以上／夜景） */
.icon-home {
  display: block;
  height: 12px;
  margin-right: 4px;
  width: auto;
}

/* 「基本価格一覧」の見出し帯：.flex-box の縦積みを横並びに戻す */
.menu-head {
  background-color: var(--base_back);
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
}

.menu-head__title {
  color: var(--base_back_font);
  font-size: 16px;
  font-weight: bold;
}

.menu-head__note {
  color: var(--base_back_font);
  font-size: 11px;
  text-align: right;
}

/* 凡例・注記の行：同じく .flex-box を横並びに戻す */
.note-row {
  align-items: center;
  flex-direction: row;
  font-size: 12px;
  gap: normal;
  margin-top: 0;
}

/* main.css の .contents-frame .flex-box { justify-content: space-between } を
   上書きするため詳細度を合わせる（--end を付けない行は space-between のまま） */
.contents-frame .note-row--end {
  justify-content: end;
  width: auto;
}

.note-row--gap {
  gap: 0 10px;
}

.note-row--baseline {
  align-items: baseline;
}

/* 商材ごとの見出し帯 */
.detail-box__head--pers {
  background-color: var(--menu_pers_main);
}

.detail-box__head--vr {
  background-color: var(--menu_vr_head);
}

.detail-box__head--movie {
  background-color: var(--accent_yellow);
}

.detail-box__head--pack {
  background-color: var(--accent_pink);
}

/* 価格表：列見出し（.three-column-table thead th を上書きするため th を付ける） */
.three-column-table thead th.th-blank {
  background-color: var(--base_white);
}

.three-column-table thead th.th-pers-out {
  background-color: var(--menu_pers_main);
}

.three-column-table thead th.th-pers-in {
  background-color: var(--menu_pers_sub);
}

.three-column-table thead th.th-vr-out {
  background-color: var(--menu_vr_main);
}

.three-column-table thead th.th-vr-in {
  background-color: var(--menu_vr_sub);
}

.three-column-table thead th.th-movie-out {
  background-color: var(--menu_movie_main);
}

.three-column-table thead th.th-movie-in {
  background-color: var(--menu_movie_sub);
}

/* 価格表：行見出し */
.three-column-table th.price-th {
  font-size: 22px;
  text-align: left;
  vertical-align: inherit;
}

.three-column-table th.price-th--line {
  border-top: 2px solid var(--menu_cell_back);
}

/* 価格表：金額セル */
.three-column-table td.price-cell {
  background-color: var(--menu_cell_accent);
}

.three-column-table td.price-cell--sub {
  background-color: var(--menu_cell_back);
}

.three-column-table td.price-cell--line {
  border-top: 2px solid var(--base_white);
}

.three-column-table td.price-cell--lg {
  font-size: 16px;
}

/* 比較表：文字量の多いセル */
/* 単位・注記 */
.font_13 {
  font-size: 13px;
}

/* 円～/枚 */
.unit {
  font-size: 14px;
  margin-left: 4px;
}

/* 円/枚 */
.unit--sm {
  font-size: 12px;
  margin-left: 2px;
}

/* 【1棟】【1室】 */
.th-note {
  font-size: 14px;
  margin-left: 12px;
}

.note-text {
  font-size: 12px;
  font-weight: 400;
}

/* info-box */
.info-box__inner--column {
  flex-direction: column;
  margin-top: 20px;
}

.info-box__right--wide {
  flex: 0 0 312px;
}

.info-box__text--lg {
  font-size: 16px;
  font-weight: 700;
}

.info-box__row {
  align-items: center;
  display: flex;
  gap: 0 12px;
}

.info-box__left--line {
  border-top: 1px solid var(--menu_hr_line);
  padding-top: 10px;
  width: 100%;
}

/* .info-box__item + .info-box__item の 12px を上書きするため詳細度を合わせる */
.info-box__item.mt-20 {
  margin-top: 20px;
}

/* 汎用 */
.fw-bold {
  font-weight: 700;
}

.m-0 {
  margin: 0;
}

.mt-10 {
  margin-top: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.mb-56 {
  margin-block: 56px;
}

.w-full {
  width: 100%;
}

/* main.css の .contents-frame .contents-detail ul { margin: 0 } に負けるため詳細度を合わせる */
.contents-frame .contents-detail ul.mt-10 {
  margin-top: 10px;
}