@charset "UTF-8";
/* ==========================================================================
   additional.css — 本文（.additional）のデザイン
   フロントと編集画面の両方で読み込む（functions.php の add_editor_style）

   - 本文は「.additional を付けたグループ」の中だけに当てる
     ページ本文：グループ「additional mh-page」の中に、セクションごとのフルワイドブロックを並べる
     ブログパーツ：中身を「additional ○○」のグループで包む
   - 部品のクラスはページ固有にしない（下層ページでも同じクラスで使い回す）。使い方は block-content/README.md
   - ヘッダー・メインビジュアル・フッターなど本文の外側は style.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   色・文字の値（style.css からも使う。編集画面でも効くようにここに置く）
   -------------------------------------------------------------------------- */
:root {
  /* サイトのメインカラー：管理画面（外観 > カスタマイズ > サイト全体設定 > 基本カラー > メインカラー）の値を使う。
     メインカラーを変えると、ここを使っている部分（番号・線・ホバーの色・メインビジュアルの下地など）が一緒に変わる */
  --mh-teal: var(--color_main, #0E5E6F);
  --mh-label: #1F7F8C;
  --mh-head: #1C2A30;
  --mh-text: #3D4A50;
  --mh-sub: #5F6B7D;
  --mh-ink: #0F1B2D;
  --mh-rule: #D6E2F7;
  --mh-pale: #F5F8FF;
  --mh-pale2: #EAF1FF;
  --mh-sky: #7DD3FC;
  --mh-shade: 6, 34, 46;
  --mh-jp: 'Noto Sans JP', sans-serif;
  --mh-en: 'Jost', 'Noto Sans JP', sans-serif;
  --mh-inter: 'Inter', 'Noto Sans JP', sans-serif;
  --mh-wrap: 1080px;
  --mh-gutter: 24px;
  --mh-head-gap: 72px;
  /* お知らせの囲みの盾のアイコン（mask で色を塗る） */
  --mh-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
  /* ボタンの右矢印（mask で文字色に塗る） */
  --mh-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4'/%3E%3C/svg%3E");
}

@media (max-width: 1024px) {
  :root {
    --mh-head-gap: 56px;
  }
}

@media (max-width: 767px) {
  :root {
    --mh-gutter: 20px;
    --mh-head-gap: 40px;
  }
}

/* --------------------------------------------------------------------------
   土台：文字・見出しの飾りを外す
   -------------------------------------------------------------------------- */
.additional {
  font-family: var(--mh-jp);
  color: var(--mh-text);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

.additional p {
  margin: 0;
  font: 400 clamp(15px, .9rem + .2vw, 16px)/1.9 var(--mh-jp);
  letter-spacing: .04em;
  text-wrap: pretty;
}

.additional h2,
.additional h3 {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mh-ink);
}

.additional h2::before,
.additional h2::after,
.additional h3::before,
.additional h3::after {
  content: none;
}

.additional h3 {
  font: 700 22px/1.5 var(--mh-jp);
  letter-spacing: .08em;
}

.additional figure {
  margin: 0;
}

/* グループブロックは、フロントでは中身を .wp-block-group__inner-container で包んで出力される（SWELL はブロックのレイアウト機能を使わないため）。
   包みを無いものとして扱い、グループに付けた flex・grid の並べ方を中身に直接効かせる。余白は gap で付ける */
.additional .wp-block-group__inner-container {
  display: contents;
}

.additional .wp-block-group__inner-container > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* 編集画面：フルワイドを包むグループ（mh-page・お問い合わせ帯など）は、本文の幅（900px・左寄せ）に縮められるので全幅に戻す */
.editor-styles-wrapper .wp-block-group.additional:has([data-type="loos/full-wide"]) {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ページ本文の枠：セクション（フルワイド）を隙間なく積む */
.additional.mh-page,
.additional.mh-page .swell-block-fullWide {
  margin-top: 0;
  margin-bottom: 0;
}

.additional .swell-block-fullWide__inner > * {
  margin-bottom: 0;
}

/* セクション内側の左右の余白：SWELL の 4vw ではなく、デザインの余白（PC 24px・スマホ 20px） */
.additional .swell-block-fullWide__inner.l-container,
.additional .swell-block-fullWide__inner.l-article {
  --swl-fw_inner_pad: var(--mh-gutter);
}

/* --------------------------------------------------------------------------
   セクションの中身
   mh-wrap：見出し → 中身 を縦に並べる 1080px の枠
   mh-head：英字ラベル（mh-label）＋ h2
   -------------------------------------------------------------------------- */
.additional .mh-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--mh-head-gap);
  max-width: var(--mh-wrap) !important;
  margin: 0 auto;
}

.additional .mh-wrap > *,
.additional .mh-head > * {
  margin: 0;
}

.additional .mh-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.additional p.mh-label {
  display: flex;
  align-items: center;
  gap: 16px;
  font: 500 13px/1 var(--mh-en);
  letter-spacing: .22em;
  color: var(--mh-label);
}

.additional p.mh-label::before {
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  background: currentColor;
}

.additional h2.mh-h2 {
  font: 700 clamp(22px, 1.6rem + .6vw, 28px)/1.6 var(--mh-jp);
  letter-spacing: .04em;
  color: var(--mh-head);
}

/* 編集画面：ブロックは「幅 900px・左右は自動の余白」で並ぶので、縦並び（flex）のグループの中では中央に寄ってしまう。
   フロントと同じく、左右いっぱいに広げる */
.editor-styles-wrapper .additional :is(.mh-wrap, .mh-head, .mh-prose, .mh-split__main, .mh-split__side, .mh-about__body, .mh-about__photo, .mh-card, .mh-service__body, .mh-price, .mh-price__row, .mh-notice, .mh-contact__inner) > .wp-block,
.editor-styles-wrapper .additional :is(.mh-wrap, .mh-head, .mh-prose, .mh-split__main, .mh-split__side, .mh-about__body, .mh-about__photo, .mh-card, .mh-service__body, .mh-price, .mh-price__row, .mh-notice, .mh-contact__inner) > .wp-block-group__inner-container > .wp-block {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* --------------------------------------------------------------------------
   ボタン（ボタンブロックのスタイル「線」「白」。丸み＋右矢印）
   -------------------------------------------------------------------------- */
.additional .mh-buttons {
  margin: 0;
}

.additional .wp-block-button[class*="is-style-mh-"] > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  min-height: 46px;
  box-sizing: border-box;
  padding: 16px 20px 16px 30px;
  font: 700 14px/1 var(--mh-jp);
  letter-spacing: .08em;
  text-decoration: none;
  border-radius: 9999px;
  box-shadow: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.additional .wp-block-button[class*="is-style-mh-"] > .wp-block-button__link::after {
  content: "";
  flex: none;
  width: 18px;
  height: 10px;
  background: currentColor;
  -webkit-mask: var(--mh-arrow) center / contain no-repeat;
  mask: var(--mh-arrow) center / contain no-repeat;
}

.additional .wp-block-button.is-style-mh-line > .wp-block-button__link {
  background: #fff;
  color: var(--mh-ink);
  border: 1px solid var(--mh-ink);
}

.additional .wp-block-button.is-style-mh-line > .wp-block-button__link:hover {
  background: var(--mh-ink);
  color: #fff;
}

.additional .wp-block-button.is-style-mh-white > .wp-block-button__link {
  background: #fff;
  color: var(--mh-ink);
  border: 0;
}

.additional .wp-block-button.is-style-mh-white > .wp-block-button__link:hover {
  background: var(--mh-pale2);
  color: var(--mh-ink);
}

/* 大きいボタン（追加CSSクラス mh-btn--large） */
.additional .wp-block-button.mh-btn--large > .wp-block-button__link {
  padding: 20px 24px 20px 34px;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   写真のフレーム（画像ブロックに mh-frame-photo）：右下にずらした線の枠。縦 4:5 に切り抜く
   -------------------------------------------------------------------------- */
.additional .mh-frame-photo {
  position: relative;
  padding: 0 16px 16px 0;
}

.additional .mh-frame-photo::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 16px;
  right: 0;
  bottom: 0;
  border: 1px solid var(--mh-ink);
  transition: transform .4s ease;
}

.additional .mh-frame-photo > a,
.additional .mh-frame-photo > img {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--mh-pale);
}

.additional .mh-frame-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .4s ease;
}

/* SWELL は画像のリンクをホバーで 80% の不透明度にする（.wp-block-image a:hover）。写真が白っぽくなり、後ろの枠線が透けるので、ここでは使わない */
.additional .mh-frame-photo > a,
.additional .mh-frame-photo > a:hover {
  opacity: 1;
  transition: none;
}

.additional .mh-frame-photo:has(a:hover)::before {
  transform: translate(-6px, -6px);
}

.additional .mh-frame-photo a:hover img {
  transform: scale(1.03);
}

/* --------------------------------------------------------------------------
   ABOUT（文 7：写真 5）
   -------------------------------------------------------------------------- */
.additional .mh-about {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 88px;
  align-items: center;
  max-width: var(--mh-wrap) !important;
  margin: 0 auto;
}

.additional .mh-about > * {
  margin: 0;
}

.additional .mh-about__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.additional .mh-about__body > * {
  margin: 0;
}

.additional .mh-about__body .mh-buttons {
  padding-top: 8px;
}

.additional .mh-about__photo {
  order: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.additional .mh-about__photo > * {
  margin: 0;
}

.additional p.mh-about__sign {
  font: 500 10px/1 var(--mh-inter);
  letter-spacing: .24em;
  color: var(--mh-sub);
}

.additional p.mh-about__sign strong {
  margin-left: 6px;
  font: 500 14px/1 var(--mh-jp);
  letter-spacing: .1em;
  color: var(--mh-ink);
}

/* --------------------------------------------------------------------------
   カード（カラムブロックに mh-cards mh-cards--3、各カラムに mh-card）
   上に色の線・番号（mh-card__no）・h3・本文
   -------------------------------------------------------------------------- */
.additional .wp-block-columns.mh-cards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
}

.additional .wp-block-columns.mh-cards--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.additional .mh-cards > .mh-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 44px 36px 48px;
  background: #fff;
  border-top: 4px solid var(--mh-teal);
}

.additional .mh-card > * {
  margin: 0;
}

.additional p.mh-card__no {
  font: 400 40px/1 var(--mh-en);
  letter-spacing: .02em;
  color: var(--mh-teal);
}

.additional .mh-card h3::after {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  margin-top: 20px;
  background: var(--mh-rule);
}

.additional .mh-card p:not(.mh-card__no) {
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   線つきの箇条書き（リストブロックに mh-dash-list）
   -------------------------------------------------------------------------- */
.additional ul.mh-dash-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--mh-rule);
}

.additional ul.mh-dash-list > li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid var(--mh-rule);
  font: 500 14px/1.7 var(--mh-jp);
  letter-spacing: .06em;
  color: var(--mh-ink);
}

.additional ul.mh-dash-list > li::before {
  content: "";
  position: static;
  width: 12px;
  height: 2px;
  background: var(--mh-head);
  border: 0;
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   SERVICE（2列のカード。カード全体が見出しのリンク先へ）
   -------------------------------------------------------------------------- */
.additional .wp-block-columns.mh-service {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  margin: 0;
}

.additional .mh-service > .mh-service__card {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: #fff;
  box-shadow: 0 24px 48px -32px rgba(var(--mh-shade), .35);
  transition: transform .3s ease, box-shadow .3s ease;
}

.additional .mh-service__card > * {
  margin: 0;
}

.additional .mh-service__card:has(.mh-service__title a:hover) {
  transform: translateY(-4px);
  box-shadow: 0 32px 56px -32px rgba(var(--mh-shade), .45);
}

.additional .mh-service__thumb {
  position: relative;
  aspect-ratio: 2.9 / 1;
  background: var(--mh-pale);
}

.additional .mh-service__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.additional .mh-service__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px 40px 48px;
}

.additional .mh-service__body > * {
  margin: 0;
}

.additional .mh-service__title,
.additional .mh-service__title a {
  position: static;
}

.additional .mh-service__title a {
  color: var(--mh-ink);
  text-decoration: none;
}

/* 見出しのリンクをカード全体に広げる（見出しの position が基準になるとカードに広がらないので、上で static にしている） */
.additional .mh-service__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* 編集画面では、カードを覆うリンクがブロックの選択を邪魔するので外す */
.editor-styles-wrapper .additional .mh-service__title a::after {
  content: none;
}

.additional .mh-service__body p {
  font-size: 15px;
}

/* 料金の目安（グループ mh-price の中に、ラベル・行 mh-price__row・注記） */
.additional .mh-price {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 24px;
  background: var(--mh-pale);
}

.additional .mh-price > * {
  margin: 0;
}

.additional p.mh-price__label {
  font: 500 11px/1 var(--mh-en);
  letter-spacing: .22em;
  color: var(--mh-label);
}

.additional .mh-price__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0;
  border-top: 1px solid var(--mh-rule);
}

.additional .mh-price__row > * {
  margin: 0;
}

.additional .mh-price__label + .mh-price__row {
  border-top-color: transparent;
}

/* 2行目の高さをそろえ、左右のカードで注記の位置を合わせる */
.additional .mh-price__row:nth-child(3) {
  min-height: 104px;
}

.additional p.mh-price__name {
  font: 500 13px/1.6 var(--mh-jp);
  color: var(--mh-text);
}

.additional p.mh-price__value {
  font: 400 12px/1.6 var(--mh-jp);
  color: var(--mh-text);
  white-space: nowrap;
}

.additional p.mh-price__value strong {
  margin-right: 4px;
  font: 700 20px/1.4 var(--mh-jp);
  letter-spacing: .04em;
  color: var(--mh-head);
}

.additional .mh-price__plans {
  margin: 4px 0 0;
  overflow: visible;
}

.additional .mh-price__plans table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  background: none;
}

.additional .mh-price__plans td {
  padding: 2px 0;
  border: 0;
  background: none;
  font: 400 12px/1.6 var(--mh-jp);
  letter-spacing: .04em;
  color: var(--mh-text);
  vertical-align: baseline;
}

.additional .mh-price__plans td:first-child {
  padding-right: 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mh-head);
}

.additional .mh-price__plans td:last-child {
  text-align: right;
  white-space: nowrap;
}

.additional .mh-price__plans strong {
  margin-right: 2px;
  font: 700 16px/1.5 var(--mh-jp);
  color: var(--mh-head);
}

.additional p.mh-price__foot {
  padding-top: 12px;
  border-top: 1px solid var(--mh-rule);
  font: 400 12px/1.8 var(--mh-jp);
}

/* --------------------------------------------------------------------------
   記事の一覧（SWELL の投稿リストブロックを、グループ mh-postlist で包む）
   -------------------------------------------------------------------------- */
.additional .mh-postlist .p-postList {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
}

.additional .mh-postlist .p-postList > .p-postList__item.p-postList__item {
  width: auto;
  margin: 0;
  padding: 0;
}

.additional .mh-postlist .p-postList__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  color: var(--mh-ink);
  text-decoration: none;
  box-shadow: 0 24px 48px -32px rgba(var(--mh-shade), .35);
  transition: transform .3s ease;
}

.additional .mh-postlist .p-postList__link:hover {
  transform: translateY(-4px);
  color: var(--mh-ink);
}

.additional .mh-postlist .p-postList__thumb::before,
.additional .mh-postlist .c-postThumb__figure::before,
.additional .mh-postlist .p-postList__body::after,
.additional .mh-postlist .c-postTimes__posted::before {
  content: none;
}

.additional .mh-postlist .c-postThumb__figure {
  aspect-ratio: 16 / 10;
  background: var(--mh-pale2);
}

.additional .mh-postlist .c-postThumb__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.additional .mh-postlist .p-postList__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 28px 32px;
}

.additional .mh-postlist .p-postList__title {
  margin: 0;
  font: 700 16px/1.8 var(--mh-jp);
  letter-spacing: .06em;
  color: var(--mh-ink);
}

.additional .mh-postlist .p-postList__meta {
  order: -1;
  margin: 0;
}

.additional .mh-postlist .p-postList__times {
  margin: 0;
  padding: 0;
  opacity: 1;
}

.additional .mh-postlist .c-postTimes__posted {
  font: 400 14px/1 var(--mh-en);
  letter-spacing: .08em;
  color: var(--mh-teal);
}

/* --------------------------------------------------------------------------
   2カラム（グループ mh-split の中に、mh-split__main と mh-split__side）
   PC：文 7 ： 写真・情報 5。タブレット・スマホ：1列で、side（写真）を先に
   -------------------------------------------------------------------------- */
.additional .mh-split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 88px;
  align-items: start;
  max-width: var(--mh-wrap) !important;
  margin: 0 auto;
}

.additional .mh-split > * {
  margin: 0;
}

.additional .mh-split__main {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.additional .mh-split__side {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.additional .mh-split__main > *,
.additional .mh-split__side > * {
  margin: 0;
}

/* 続けて読む文章（段落の間を 20px あける） */
.additional .mh-prose {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.additional .mh-prose > * {
  margin: 0;
}

/* 縦長の写真（画像ブロックに mh-photo）：4:5 に切り抜く */
.additional .wp-block-image.mh-photo {
  position: relative;
  overflow: hidden;
  background: var(--mh-pale);
}

.additional .mh-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   基本情報の表（定義リストブロックに mh-basics）：項目名 96px ＋ 内容
   -------------------------------------------------------------------------- */
.additional .swell-block-dl.mh-basics {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  margin: 0;
  border-bottom: 1px solid var(--mh-rule);
}

/* 編集画面だけに入る、ブロックを選ぶための補助の要素は、表の並びに入れない */
.additional .mh-basics > .swl-parentSelector {
  position: absolute;
}

.additional .mh-basics > .swell-block-dl__dt,
.additional .mh-basics > .swell-block-dl__dd {
  width: auto;
  margin: 0;
  padding: 14px 0;
  border: 0;
  border-top: 1px solid var(--mh-rule);
  background: none;
}

.additional .mh-basics > .swell-block-dl__dt {
  padding-right: 16px;
  font: 500 13px/1.8 var(--mh-jp);
  letter-spacing: .04em;
  color: var(--mh-sub);
}

.additional .mh-basics > .swell-block-dl__dd {
  font: 500 15px/1.8 var(--mh-jp);
  letter-spacing: .06em;
  color: var(--mh-head);
}

.additional .mh-basics .swell-block-dl__dd p {
  font: inherit;
  letter-spacing: inherit;
}

/* --------------------------------------------------------------------------
   年表（ステップブロックの「小」スタイルに mh-timeline）
   左に縦線、各項目の先頭に四角い点。見出し ＋ 箇条書き（リストブロックに mh-points）
   -------------------------------------------------------------------------- */
.additional .mh-timeline {
  margin: 0;
}

.additional .mh-timeline > .swell-block-step__item {
  padding: 0 0 48px 48px;
}

.additional .mh-timeline > .swell-block-step__item:last-child {
  padding-bottom: 0;
}

/* 縦線：最初の点から、最後の項目の手前まで */
.additional .mh-timeline > .swell-block-step__item::before {
  top: 16px;
  left: 0;
  height: calc(100% - 16px);
  border-left: 1px solid var(--mh-teal);
}

/* 点 */
.additional .mh-timeline > .swell-block-step__item > .swell-block-step__number {
  position: absolute;
  top: 12px;
  left: -4px;
  display: block;
  width: 9px;
  height: 9px;
  margin: 0;
}

.additional .mh-timeline .swell-block-step__number .__shape {
  display: block;
  width: 9px;
  height: 9px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--mh-teal);
}

.additional .mh-timeline > .swell-block-step__item > .swell-block-step__title {
  margin: 0;
  font: 700 20px/1.6 var(--mh-jp) !important;
  letter-spacing: .04em;
  color: var(--mh-head);
}

.additional .mh-timeline > .swell-block-step__item > .swell-block-step__body {
  margin-top: 14px;
}

.additional .mh-timeline .swell-block-step__body > * {
  margin: 0;
}

/* --------------------------------------------------------------------------
   短い線つきの箇条書き（リストブロックに mh-points）
   -------------------------------------------------------------------------- */
.additional ul.mh-points {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.additional ul.mh-points > li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  font: 400 15px/1.9 var(--mh-jp);
  letter-spacing: .04em;
  color: var(--mh-text);
  text-wrap: pretty;
}

.additional ul.mh-points > li::before {
  content: "";
  position: static;
  width: 12px;
  height: 2px;
  margin-top: 14px;
  background: var(--mh-head);
  border: 0;
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   タグの並び（リストブロックに mh-tags）：枠線つきの小さな札
   -------------------------------------------------------------------------- */
.additional ul.mh-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.additional ul.mh-tags > li {
  margin: 0;
  padding: 12px 20px;
  border: 1px solid var(--mh-ink);
  font: 500 14px/1 var(--mh-en);
  letter-spacing: .06em;
  color: var(--mh-head);
}

.additional ul.mh-tags > li::before {
  content: none;
}

/* --------------------------------------------------------------------------
   お知らせの囲み（グループに mh-notice）：薄い背景に、見出し（盾のアイコンつき）＋ 本文
   -------------------------------------------------------------------------- */
.additional .mh-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 48px;
  padding: 32px;
  background: var(--mh-pale);
}

.additional .mh-notice > * {
  margin: 0;
}

.additional h3.mh-notice__title {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font: 700 18px/1.6 var(--mh-jp);
  letter-spacing: .04em;
  color: var(--mh-head);
}

.additional h3.mh-notice__title::before {
  content: "";
  position: static;
  flex: none;
  margin: 0;
  transform: none;
  width: 18px;
  height: 20px;
  background: var(--mh-teal);
  -webkit-mask: var(--mh-shield) center / contain no-repeat;
  mask: var(--mh-shield) center / contain no-repeat;
}

.additional .mh-notice p {
  flex: 1 1 360px;
  min-width: 0;
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   お問い合わせ帯（ブログパーツ「汎用CTA」。フルワイドの背景色・背景画像は管理画面で変えられる）
   -------------------------------------------------------------------------- */
.additional.mh-contact {
  margin: 0;
}

.additional.mh-contact .swell-block-fullWide {
  margin: 0;
  color: #fff;
}

/* 中央が少し濃い影（背景色・背景画像の上、文字の下） */
.additional.mh-contact .swell-block-fullWide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%,
      rgba(var(--mh-shade), .62) 0%,
      rgba(var(--mh-shade), .42) 70%,
      rgba(var(--mh-shade), .3) 100%);
}

.additional.mh-contact .swell-block-fullWide__inner {
  z-index: 2;
}

.additional .mh-contact__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 880px !important;
  margin: 0 auto;
  text-align: center;
}

.additional .mh-contact__inner > * {
  margin: 0;
}

.additional h2.mh-contact__title {
  font: 700 clamp(22px, 1.6rem + .6vw, 28px)/1.6 var(--mh-jp);
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(var(--mh-shade), .55);
}

.additional .mh-contact__inner p {
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 1px 16px rgba(var(--mh-shade), .5);
}

/* --------------------------------------------------------------------------
   メインビジュアルの小見出し（ブログパーツ。メインビジュアルの設定で指定）
   -------------------------------------------------------------------------- */
.additional.mh-mv-lead {
  margin: 0;
}

.additional.mh-mv-lead p {
  font: 500 12px/1.6 var(--mh-inter);
  letter-spacing: .28em;
  color: #fff;
}

/* 編集画面では白い文字が見えないので、背景を敷く */
.editor-styles-wrapper .additional.mh-mv-lead {
  padding: 24px;
  background: var(--mh-teal);
}

/* ==========================================================================
   768〜1024px：3列→2列、2カラム→1列（写真を先に）
   ========================================================================== */
@media (max-width: 1024px) {
  .additional .mh-about {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
  }

  .additional .mh-about__photo {
    order: -1;
    width: 100%;
    max-width: 440px;
  }

  .additional .wp-block-columns.mh-cards,
  .additional .mh-postlist .p-postList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .additional .wp-block-columns.mh-service {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .additional .mh-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
  }

  .additional .mh-split__side {
    order: -1;
    width: 100%;
    max-width: 440px;
  }

  .additional .mh-price__row:nth-child(3) {
    min-height: 0;
  }
}

/* ==========================================================================
   767px以下：すべて1列
   ========================================================================== */
@media (max-width: 767px) {
  .additional .wp-block-columns.mh-cards,
  .additional .mh-postlist .p-postList {
    grid-template-columns: minmax(0, 1fr);
  }

  .additional .mh-cards > .mh-card {
    padding: 36px 24px 40px;
  }

  .additional p.mh-card__no {
    font-size: 34px;
  }

  .additional h3 {
    font-size: 20px;
  }

  .additional .mh-service__body {
    padding: 28px 20px 32px;
  }

  .additional .swell-block-dl.mh-basics {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .additional .mh-timeline > .swell-block-step__item {
    padding: 0 0 40px 32px;
  }

  .additional .mh-timeline > .swell-block-step__item > .swell-block-step__title {
    font-size: 18px !important;
  }

  .additional h3.mh-notice__title {
    white-space: normal;
  }

  .additional .mh-notice {
    padding: 24px 20px;
  }

  .additional .mh-notice p {
    flex-basis: 100%;
  }

  .additional .mh-price {
    padding: 16px;
  }

  .additional p.mh-price__value {
    white-space: normal;
  }

  .additional .mh-price__plans td {
    display: block;
    padding: 0;
  }

  .additional .mh-price__plans td:last-child {
    padding-bottom: 6px;
    text-align: left;
    white-space: normal;
  }

  .additional.mh-mv-lead p {
    letter-spacing: .16em;
  }
}

/* --------------------------------------------------------------------------
   動きを減らす設定
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .additional * {
    transition: none !important;
  }

  .additional .mh-frame-photo:has(a:hover)::before,
  .additional .mh-frame-photo a:hover img,
  .additional .mh-service__card:has(.mh-service__title a:hover),
  .additional .mh-postlist .p-postList__link:hover {
    transform: none;
  }
}