@charset "UTF-8";
/* ************************************** _
タイトル：common.css
概要：共通css
作成：2026.02.12
更新：2026.02.12
_ ************************************** */
/* A (more) Modern CSS Reset
   https://piccalil.li/blog/a-more-modern-css-reset/
   Creative Commons Attribution License.
   https://creativecommons.org/licenses/by/3.0/
*/
/* Box sizing rules */
/* box-sizing: border-box;を設定 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
/* フォントサイズの拡大を防ぐ */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
/* デフォルトのマージンを削除、作成するCSSの制御を改善するため */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
/* リストのスタイルを削除、これはデフォルトのスタイルが削除されることを示唆します */
ul[role=list],
ol[role=list] {
  list-style: none;
}

/* Set core body defaults */
/* bodyのデフォルトを設定 */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
/* 見出しやインタラクティブ要素のline-heightを設定 */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
/* 見出しのテキスト折り返しをbalanceに設定 */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
/* classを持たないa要素はデフォルトのスタイルを継承 */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
/* 画像の扱いを簡単にする */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
/* inputやbuttonなどのfontは継承 */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
/* rows属性のないtextareasが小さくならないようにする */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
/* アンカーされている要素には余分なスクロールマージンが必要 */
:target {
  scroll-margin-block: 5ex;
}

/* base
_ ************************************** */
/* mixin
_ ************************************** */
/* mq
_ ************************************** */
/* =========================================
  Font Mixins
========================================= */
/* 英字装飾（Montserrat）
  - weight: medium(500) / semibold(600)
  - font-size は呼び出し側で指定
------------------------------------------ */
/* Base
---------------------------------- */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}
@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

body {
  margin: 0;
  overflow-x: hidden;
  background-color: var(--color-white);
  color: var(--color-text);
  font-family: "Zen Old Mincho", "Yu Mincho", "YuMincho", "游明朝", "游明朝体", "MS PMincho", "Hiragino Mincho ProN", "Montserrat", serif, Arial, Helvetica;
  font-weight: 500;
  letter-spacing: 0.025em;
  line-height: 1.8;
  font-size: 1rem;
}
@media (max-width: 768px) {
  body {
    padding-bottom: calc(35px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  body {
    scroll-behavior: auto;
  }
}
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: inherit;
}

/* リスト：本文ではマーカーを残す方針 */
ul, ol {
  margin: 0;
  padding-left: 1.2em;
}

/* address の斜体を抑制 */
address {
  font-style: normal;
}

/* リンク：コンポーネント内で個別に上書き可 */
a {
  color: inherit;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}
a:hover, a:focus-visible {
  text-decoration: underline;
}

img,
picture {
  vertical-align: bottom;
}

/* 段落：連続するpだけ余白をつける */
p + p {
  margin-top: 1em;
}

/* 日本語本文の読みやすさ（必要なら） */
:lang(ja) {
  font-family: "Zen Old Mincho", serif;
}

/* =========================================================================
   CSS変数の定義  _variables

   サイトの基本的な色指定は、CSS変数の値として設定する。
============================================================================ */
:root {
  --color-text: #2d344a; /* 黒 */
  --color-text-light: #35363b; /* 黒 薄め */
  --color-gray: #9699a4; /* 灰色 */
  --color-gray-light: #dadde2; /* 薄灰 */
  --color-grey-powder: #fbfbfb; /* 淡霞 */
  --color-white: #ffffff; /* 白 */
  --color-primary: #bc488f; /* メインカラー（メイン赤紫） */
  --color-secondary: #89a2dc; /* セカンドカラー（メイン藤色） */
  --color-primary-powder: #fdf9fb; /* メインカラー（メイン赤紫 淡） */
  --color-secondary-powder: #f3f6fb; /* セカンドカラー（メイン藤色 淡） */
  --color-red: #e64552; /* 紅赤 */
  --container: 1200px;
  --gutter: 0px; /* デフォルトは余白なし */
  --radius-sm: 5px;
  --radius-md: 10px; /* ← 共通の角丸 */
  --radius-lg: 20px;
  --radius-pill: 9999px;
}

/* container
_ ************************************** */
@media (max-width: 1240px) {
  :root {
    --gutter: 20px; /* 1240px以下は余白付ける */
  }
}
.l-container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* footer
_ ************************************** */
@media (max-width: 1440px) {
  :root {
    --gutter: 20px;
    /* 1240px以下は余白付ける */
  }
}
.p-site-footer {
  color: var(--color-text);
}

/* --------------------------------
  footer inner（1400px 共通）
-------------------------------- */
.p-site-footer__top-inner,
.p-site-footer__main-inner {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* -----------------------------
  top（白背景：CONTACT + NAV）
----------------------------- */
.p-site-footer__top {
  background: var(--color-white);
  padding-block: 100px 40px;
}
@media (max-width: 768px) {
  .p-site-footer__top {
    padding-block: 60px 30px;
  }
}

.p-footer-contact__grid {
  display: grid;
  gap: 34px;
  align-items: center;
  /* SP：縦3段 */
  grid-template-columns: 1fr;
  grid-template-areas: "tel" "web" "contact";
}
@media (max-width: 768px) {
  .p-footer-contact__grid {
    gap: 25px;
  }
}

/* area 割り当て */
.p-footer-contact__block--tel {
  grid-area: tel;
}

.p-footer-contact__block--web {
  grid-area: web;
}

.p-footer-contact__block--contact {
  grid-area: contact;
}

/* 中間（md〜1149px）：2段レイアウト */
@media (min-width: 1024px) {
  .p-footer-contact__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "tel     tel" "web     contact";
    gap: 20px;
  }
}
/* PC（1140px以上）：横1列 */
@media (min-width: 1200px) {
  .p-footer-contact__grid {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "tel web contact";
    gap: 36px;
  }
}
.p-footer-contact__block {
  text-align: center;
}

.p-footer-contact__block--tel {
  align-self: flex-start;
}

.p-footer-contact__lead {
  margin: 0 0 10px;
  font-size: 15px;
  letter-spacing: 0.04em;
}
@media (max-width: 768px) {
  .p-footer-contact__lead {
    font-size: 13px;
    margin: 0 0 7px;
  }
}

.p-footer-contact__tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 36px;
  letter-spacing: 0.06em;
  line-height: 1.25;
  color: var(--color-primary);
  text-decoration: none;
}
@media (max-width: 768px) {
  .p-footer-contact__tel {
    font-size: 28px;
    line-height: 1;
    gap: 7px;
  }
}
.p-footer-contact__tel:hover, .p-footer-contact__tel:focus-visible {
  text-decoration: none;
  opacity: 0.8;
}

.p-footer-contact__tel-icon {
  font-size: 22px;
  width: 32px;
  line-height: 1;
  position: relative;
  top: 2px;
}
@media (max-width: 768px) {
  .p-footer-contact__tel-icon {
    width: 24px;
  }
}

.p-footer-contact__fax {
  margin: 8px 0 0;
  letter-spacing: 0.08em;
}
@media (max-width: 768px) {
  .p-footer-contact__fax {
    margin-top: 5px;
  }
}

.p-footer-contact__fax-text {
  font-size: 11px;
}
@media (max-width: 768px) {
  .p-footer-contact__fax-text {
    font-size: 10px;
  }
}

/* NAV */
.p-footer-nav {
  margin-top: 100px;
  padding-top: 40px;
  border-top: 1px solid var(--color-gray);
}
@media (max-width: 768px) {
  .p-footer-nav {
    margin-top: 60px;
    padding-top: 30px;
  }
}

.p-footer-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  padding-inline: 20px;
  gap: 12px 28px;
  grid-template-columns: 1fr 1fr;
  /* SPは2列 */
  grid-auto-flow: column;
  grid-template-rows: repeat(8, auto);
}
@media (max-width: 414px) {
  .p-footer-nav__list {
    font-size: 12px;
    padding-inline: 5px;
    gap: 15px 20px;
  }
}
@media (min-width: 768px) {
  .p-footer-nav__list {
    grid-template-columns: 1fr 1fr 1fr;
    /* タブレットは3列 */
    grid-template-rows: repeat(6, auto);
  }
}
@media (min-width: 1024px) {
  .p-footer-nav__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-inline: 30px;
    gap: 12px 50px;
    /* flexに切り替えるので念のため無効化*/
    grid-auto-flow: unset;
    grid-template-rows: unset;
  }
}
@media (min-width: 1280px) {
  .p-footer-nav__list {
    padding-inline: 70px;
  }
}

.p-footer-nav__item {
  min-width: 0;
}

.p-footer-nav__link {
  display: inline-block;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s ease;
}
.p-footer-nav__link:hover, .p-footer-nav__link:focus-visible {
  color: var(--color-primary);
  text-decoration: none;
}
@media (max-width: 768px) {
  .p-footer-nav__link {
    white-space: normal;
  }
}

/* -----------------------------
  main（濃色背景）
----------------------------- */
.p-site-footer__main {
  background: var(--color-text);
  color: var(--color-white);
  padding-block: 60px 100px;
}
@media (max-width: 768px) {
  .p-site-footer__main {
    padding-block: 40px 60px;
  }
}

.p-footer-main {
  display: grid;
  gap: 30px;
  /* SP：縦積み（デフォルト） */
  grid-template-columns: 1fr;
  grid-template-areas: "clinic" "photo" "hours";
  margin-inline: auto;
  width: min(600px, 100%);
  /* Tablet */
}
@media (min-width: 768px) {
  .p-footer-main {
    grid-template-columns: 348px 1fr;
    grid-template-areas: "clinic photo" "hours  hours";
    align-items: start;
    gap: 26px;
    width: min(710px, 100%);
  }
}
.p-footer-main {
  /* PC */
}
@media (min-width: 1280px) {
  .p-footer-main {
    grid-template-columns: 320px 1fr 520px;
    grid-template-areas: "clinic photo hours";
    align-items: start;
    gap: 30px;
    width: auto;
  }
}
@media (min-width: 1440px) {
  .p-footer-main {
    grid-template-columns: 340px 1fr 600px;
    gap: 50px;
  }
}

/* grid-area 割り当て */
.p-footer-main__clinic {
  grid-area: clinic;
}

.p-footer-main__photo {
  grid-area: photo;
}

.p-footer-main__hours {
  grid-area: hours;
}

/* clinic */
.p-footer-main__logo picture {
  display: block;
  height: auto;
  max-width: 280px;
}
@media (max-width: 768px) {
  .p-footer-main__logo picture {
    margin-inline: auto;
    max-width: 185px;
  }
}

@media (max-width: 768px) {
  .p-footer-main__clinic {
    text-align: center;
  }
}

.p-footer-main__address {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.06em;
}
@media (max-width: 768px) {
  .p-footer-main__address {
    margin-top: 23px;
    font-size: 12px;
    line-height: 2;
  }
}

.p-footer-main__tel-fax {
  margin: 0 0 14px;
  font-size: 14px;
  letter-spacing: 0.06em;
}
@media (max-width: 768px) {
  .p-footer-main__tel-fax {
    font-size: 12px;
  }
}

.p-footer-main__tel {
  color: inherit;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}
.p-footer-main__tel:hover, .p-footer-main__tel:focus-visible {
  text-decoration: none;
  opacity: 0.8;
}

.p-footer-main__sep {
  margin-inline: 8px;
  opacity: 0.7;
}

.p-footer-main__sns {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .p-footer-main__sns {
    justify-content: center;
  }
}

.p-footer-main__sns-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}
.p-footer-main__sns-link:hover, .p-footer-main__sns-link:focus-visible {
  text-decoration: none;
  opacity: 0.8;
}
.p-footer-main__sns-link img {
  width: 14px;
  height: auto;
}

.p-footer-main__sns-icon {
  transition: all 0.2s ease-in-out;
}
.p-footer-main__sns-icon:hover, .p-footer-main__sns-icon:focus-visible {
  text-decoration: none;
  opacity: 0.8;
}
.p-footer-main__sns-icon img {
  display: block;
  width: 24px;
}
@media (max-width: 768px) {
  .p-footer-main__sns-icon img {
    width: 20px;
  }
}

.p-footer-main__sns-text {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding-right: 10px;
  text-decoration: underline;
}
@media (max-width: 768px) {
  .p-footer-main__sns-text {
    font-size: 14px;
  }
}

/* photo */
.p-footer-main__photo img {
  display: block;
  width: min(335px, 100%);
  height: auto;
}
@media (max-width: 768px) {
  .p-footer-main__photo img {
    width: min(600px, 100%);
  }
}

/* defs（休診日・診療科目） */
.p-footer-main__defs {
  margin: 16px 0 10px;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  column-gap: 28px;
  row-gap: 10px;
  justify-content: start;
}
@media (max-width: 768px) {
  .p-footer-main__defs {
    grid-template-columns: 1fr;
    /* SPは縦積みが安定 */
    row-gap: 10px;
    column-gap: 0;
  }
}

.p-footer-main__def {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
}

.p-footer-main__def-text {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.06em;
}
@media (max-width: 768px) {
  .p-footer-main__def-text {
    font-size: 14px;
  }
}

.p-footer-main__note {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.06em;
  opacity: 0.85;
}
@media (max-width: 768px) {
  .p-footer-main__note {
    font-size: 12px;
  }
}

/* -----------------------------
  bottom（copyright：白背景）
----------------------------- */
.p-site-footer__bottom {
  background: var(--color-white);
  border-top: 1px solid var(--color-gray);
}

.p-site-footer__bottom-inner {
  max-width: 1400px;
  margin-inline: auto;
  padding: 4px var(--gutter) 8px;
  text-align: center;
}
@media (max-width: 768px) {
  .p-site-footer__bottom-inner {
    padding: 1px var(--gutter) 5px;
  }
}

.p-site-footer__copyright {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  /* 英字装飾としての共通“質感” */
  font-feature-settings: "kern";
  letter-spacing: 0.12em;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--color-text);
}
@media (max-width: 768px) {
  .p-site-footer__copyright {
    font-size: 10px;
  }
}

/* header
_ ************************************** */
/* ヘッダーの高さ定義 */
:root {
  --header-height: 100px;
  --anchor-offset: 20px;
}

@media (max-width: 768px) {
  :root {
    --header-height: 62px;
  }
}
/* 固定ヘッダー対策 */
:target {
  scroll-margin-top: calc(var(--header-height) + var(--anchor-offset));
}

/* ヘッダー
========================================= */
.l-site-header {
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: background-color 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* home初期 */
.is-home .l-site-header {
  position: absolute;
  top: 0;
  background-color: rgba(255, 255, 255, 0);
  box-shadow: none;
}

/* スクロール後 */
.l-site-header.is-stuck {
  position: fixed;
  top: 0;
  background-color: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 18px rgba(20, 24, 33, 0.06);
}

/* home スクロール後は白背景 */
.is-home .l-site-header.is-stuck {
  position: fixed; /* absoluteより優先 */
}

/* 背景：トップはオーバーレイ、下層は白背景 */
.l-site-header--overlay {
  background: transparent;
}

.l-site-header--solid {
  background: var(--color-white);
}

.l-site-header__inner {
  max-width: 1900px;
  margin-inline: auto;
  /* 高さは「白帯」の印象に寄せる */
  min-height: var(--header-height);
}
@media (max-width: 768px) {
  .l-site-header__inner {
    column-gap: 12px;
  }
}

.l-site-header__content {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-inline: 80px;
}
@media (max-width: 1280px) {
  .l-site-header__content {
    padding-inline: 50px;
  }
}
@media (max-width: 1024px) {
  .l-site-header__content {
    padding-inline: 20px;
  }
}
.l-site-header__content {
  /* SPは安全余白 */
}
@media (max-width: 768px) {
  .l-site-header__content {
    gap: 10px;
    padding-inline: 16px;
  }
}

/* ロゴ */
.l-site-header__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.l-site-header__logo img {
  display: block;
  height: auto;
  width: 100%;
  max-width: 241px;
  /* 念のため */
  object-fit: contain;
}
@media (max-width: 1024px) {
  .l-site-header__logo img {
    max-width: 200px;
  }
}
@media (max-width: 768px) {
  .l-site-header__logo img {
    max-width: 160px;
  }
}
@media (max-width: 768px) {
  .l-site-header__logo .l-site-header__logo img {
    max-width: 200px; /* SPで少しだけ詰めたい場合（任意） */
  }
}

/* 右側（PC領域） */
.l-site-header__right {
  min-width: 0;
}
@media (max-width: 768px) {
  .l-site-header__right {
    display: none;
  }
}

.l-site-header__top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  margin-bottom: 5px;
}
@media (max-width: 1280px) {
  .l-site-header__top {
    gap: 24px;
  }
}
@media (max-width: 1024px) {
  .l-site-header__top {
    gap: 20px;
  }
}

.l-site-header__utility {
  display: flex;
  align-items: center;
  gap: 28px;
}
@media (max-width: 1280px) {
  .l-site-header__utility {
    gap: 24px;
  }
}
@media (max-width: 1024px) {
  .l-site-header__utility {
    gap: 20px;
  }
}

.l-site-header__utility-link {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.25s ease;
}
.l-site-header__utility-link:hover, .l-site-header__utility-link:focus-visible {
  color: var(--color-primary);
  text-decoration: none;
}
@media (max-width: 1024px) {
  .l-site-header__utility-link {
    font-size: 12px;
  }
}

.l-site-header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.l-site-header__tel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-primary);
  text-decoration: none;
  letter-spacing: 0.06em;
  transition: all 0.2s ease-in-out;
}
.l-site-header__tel:hover, .l-site-header__tel:focus-visible {
  text-decoration: none;
  opacity: 0.8;
}

.l-site-header__tel-icon {
  font-size: 16px;
  width: 17px;
  line-height: 1;
}

.l-site-header__tel-text {
  font-size: 19px;
}

/* グロナビ（PC）
========================================= */
.l-site-header__nav {
  display: block;
}

.l-site-header__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  gap: 48px;
  flex-wrap: nowrap;
}
@media (max-width: 1280px) {
  .l-site-header__nav-list {
    gap: 40px;
  }
}
@media (max-width: 1024px) {
  .l-site-header__nav-list {
    gap: 20px;
  }
}

.l-site-header__nav-link {
  display: inline-block;
  padding-block: 8px;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}
.l-site-header__nav-link:hover, .l-site-header__nav-link:focus-visible {
  color: var(--color-primary);
  text-decoration: none;
}
@media (max-width: 1024px) {
  .l-site-header__nav-link {
    font-size: 13px;
  }
}

/* SP操作
========================================= */
.l-site-header__sp {
  display: none;
}
@media (max-width: 768px) {
  .l-site-header__sp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
}

.l-site-header__sp-reserve {
  /* SPの予約ボタンは小さめのピルに */
  height: 36px;
  padding-inline: 16px;
  min-width: 0;
}
.l-site-header__sp-reserve .c-button__label {
  font-size: 12px;
  letter-spacing: 0.06em;
}

/* ハンバーガー（円形） */
.l-site-header__sp-menu-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-text);
  background: transparent;
  padding: 0;
  display: inline-grid;
  place-items: center;
}

.l-site-header__sp-menu-btn:focus {
  outline: none;
}

.l-site-header__sp-menu-btn:focus-visible {
  outline-offset: 2px;
}

.l-site-header__sp-menu-icon {
  width: 18px;
  position: relative;
  display: inline-block;
  /* 真ん中線 */
  height: 2px;
  border-radius: 2px;
  background: var(--color-text);
}
.l-site-header__sp-menu-icon::before, .l-site-header__sp-menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-text);
}
.l-site-header__sp-menu-icon::before {
  top: -5px;
}
.l-site-header__sp-menu-icon::after {
  top: 5px;
}

/* SP Drawer
========================================= */
.l-sp-drawer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none; /* 初期は非表示 */
}

.l-sp-drawer.is-open {
  display: block;
}

.l-sp-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(47, 56, 78, 0.35);
}

.l-sp-drawer__panel {
  position: absolute;
  inset: 0;
  background: var(--color-white);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(-8px);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.l-sp-drawer.is-open .l-sp-drawer__panel {
  transform: translateY(0);
  opacity: 1;
}

.l-sp-drawer__close {
  position: sticky;
  top: 11px;
  margin-left: auto;
  margin-right: 16px;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-text);
  background: var(--color-white);
  display: grid;
  place-items: center;
  z-index: 1;
}

.l-sp-drawer__close-icon {
  width: 18px;
  height: 18px;
  position: relative;
  display: inline-block;
}
.l-sp-drawer__close-icon::before, .l-sp-drawer__close-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: rgba(42, 47, 58, 0.7);
}
.l-sp-drawer__close-icon::before {
  transform: rotate(30deg);
}
.l-sp-drawer__close-icon::after {
  transform: rotate(-30deg);
}

.l-sp-drawer__content {
  padding: 16px 20px 28px;
}

/* SP Drawer -> Footer design reuse
  - 旧 .l-sp-drawer__contact / __nav / __clinic 系は
    使わないなら削除 or 無効化推奨（重複防止）
========================================= */
/* divider はそのまま利用 */
.l-sp-drawer__divider {
  border: 0;
  height: 1px;
  background: var(--color-gray);
  margin: 26px 0;
}

/* ドロワー内：フッターコンポーネントの余白調整 */
.l-sp-drawer .p-footer-contact {
  margin-top: 4px;
}

.l-sp-drawer .p-footer-nav {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ドロワー内のフッターナビは、ドロワー幅に合わせて調整 */
.l-sp-drawer .p-footer-nav__list {
  padding-inline: 0; /* ドロワーの padding で管理 */
}

/* クリニック情報：フッターの“濃色背景”を打ち消し */
.l-sp-drawer .p-footer-main--drawer {
  background: var(--color-white);
  color: var(--color-text);
  width: min(600px, 100%);
  margin-inline: auto;
}

/* ドロワー内のSNS文字 */
.l-sp-drawer .p-footer-main__sns-text {
  color: var(--color-text);
}

/* ドロワー内：アイコン類のhover */
.l-sp-drawer .p-footer-main__sns-link:hover,
.l-sp-drawer .p-footer-main__sns-link:focus-visible,
.l-sp-drawer .p-footer-main__tel:hover,
.l-sp-drawer .p-footer-main__tel:focus-visible {
  text-decoration: none;
  opacity: 0.8;
}

/* ドロワー内：必要なら写真幅をフルに寄せる */
.l-sp-drawer .p-footer-main__photo img {
  width: 100%;
}

/* PCではドロワー自体を出さない（念のため） */
@media (min-width: 1024px) {
  .l-sp-drawer {
    display: none !important;
  }
}
/* main
_ ************************************** */
.l-main {
  margin-top: 100px;
}
@media (max-width: 768px) {
  .l-main {
    margin-top: 48px;
  }
}
.l-main {
  /* セクション間余白 */
}
.l-main > .l-section + .l-section {
  margin-top: 120px;
}
@media (max-width: 768px) {
  .l-main > .l-section + .l-section {
    margin-top: 64px;
  }
}
.l-main {
  /* ===== 下部ディバイダー ===== */
}
.l-main__divider {
  margin-top: 120px; /* 本文 → 罫線の間（PC） */
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  border-top: 1px solid var(--color-gray);
}
@media (max-width: 768px) {
  .l-main__divider {
    margin-top: 64px;
  }
}

/* section
_ ************************************** */
/* Section（base）
  - デフォルトは余白を持たない（l-main が上余白を管理する前提）
----------------------------------------- */
.l-section {
  padding-block: 0;
}

/* Section padding（必要なセクションだけ付与） */
.l-section--pad {
  padding-block: 88px;
}
@media (max-width: 768px) {
  .l-section--pad {
    padding-block: 64px;
  }
}

/* breadcrumb
_ ************************************** */
/* breadcrumb */
.c-breadcrumb {
  margin-top: 14px;
  font-size: 12px;
  color: var(--color-gray);
}
.c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.c-breadcrumb__item {
  display: inline-flex;
  align-items: center;
}
.c-breadcrumb__item:not(:last-child)::after {
  content: ">";
  margin-left: 8px;
  color: var(--color-gray-light);
}
.c-breadcrumb__link {
  color: inherit;
  text-decoration: none;
}
.c-breadcrumb__link:hover {
  text-decoration: underline;
}

/* section-heading
_ ************************************** */
.c-section-heading {
  /* デフォルトは primary（ピンク） */
  --section-heading-accent: var(--color-primary);
  display: grid;
  gap: 10px;
  /* 見出しブロックの下余白 */
  margin-bottom: 40px;
}

/* 配置 */
.c-section-heading--left {
  text-align: left;
  justify-items: start;
}

.c-section-heading--center {
  text-align: center;
  justify-items: center;
}

/* 色バリエーション */
.c-section-heading--primary {
  --section-heading-accent: var(--color-primary);
}

.c-section-heading--secondary {
  --section-heading-accent: var(--color-secondary); /* #89a2dc */
}

/* eyebrow */
.c-section-heading__eyebrow {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--section-heading-accent);
  /* 英字装飾：Montserrat SemiBold */
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  /* 英字装飾としての共通“質感” */
  font-feature-settings: "kern";
  letter-spacing: 0.12em;
}

/* title */
.c-section-heading__title {
  margin: 0;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* =====================================
  Responsive font sizes
  PC: title 36px / eyebrow 14px
  Tablet: title 30px / eyebrow 13px
  SP: title 24px / eyebrow 12px
===================================== */
/* Tablet（中間） */
@media (max-width: 1024px) {
  .c-section-heading {
    gap: 6px;
    margin-bottom: 30px;
  }
  .c-section-heading__eyebrow {
    font-size: 13px;
  }
  .c-section-heading__title {
    font-size: 30px;
  }
}
/* SP */
@media (max-width: 768px) {
  .c-section-heading {
    gap: 0;
    margin-bottom: 20px;
  }
  .c-section-heading__eyebrow {
    font-size: 12px;
  }
  .c-section-heading__title {
    font-size: 24px;
    line-height: 1.5; /* 小さくなるので読みやすさ優先 */
  }
}
/* block-head
_ ************************************** */
.c-block-head {
  /* tokens */
  --block-head-accent-color: var(--page-accent-color, var(--color-primary));
  --head-line-color: var(--color-gray-light);
  --head-line-w: 1px;
  margin-bottom: 40px;
}

.c-block-head__en {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  /* 英字装飾としての共通“質感” */
  font-feature-settings: "kern";
  letter-spacing: 0.12em;
  font-size: 13px;
  color: var(--block-head-accent-color);
  margin: 0 0 26px;
}
.c-block-head__en::after {
  content: "";
  background: var(--head-line-color);
  display: block;
  height: var(--head-line-w);
  transform: translateY(6px);
  width: 100%;
}

.c-block-head__jp {
  margin: 0;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.06em;
}

@media (max-width: 768px) {
  .c-block-head {
    margin-bottom: 22px;
  }
  .c-block-head__en {
    margin-bottom: 12px;
    gap: 12px;
    font-size: 11px;
  }
  .c-block-head__en::after {
    transform: translateY(0); /* SPは詰まりやすいので補正弱め */
  }
  .c-block-head__jp {
    font-size: 24px;
  }
}
/* subhead
_ ************************************** */
.c-subhead {
  /* デフォルト（ページテーマがあればそれを使う） */
  --subhead-accent-color: var(--page-accent-color, var(--color-primary));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  column-gap: 20px;
  row-gap: 8px;
  margin-block: 45px 30px;
}

/* 詰めたいケース */
.c-subhead--tight {
  margin-block: 40px 24px;
}

/* JP */
.c-subhead__jp {
  margin: 0;
  color: var(--color-text);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.06em;
  position: relative;
  padding-left: 20px;
  display: block;
  align-items: center;
  gap: 12px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
  line-height: 1.45;
}
.c-subhead__jp::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.725em; /* 1行目の「半分」の位置に寄せる */
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--subhead-accent-color);
}

/* EN */
.c-subhead__en {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  /* 英字装飾としての共通“質感” */
  font-feature-settings: "kern";
  letter-spacing: 0.12em;
  margin-left: 0;
  color: var(--subhead-accent-color);
  font-size: 12px;
  letter-spacing: 0.12em;
  line-height: 1.2;
  flex: 0 0 auto;
  transform: translateY(1px);
}

/* SP調整 */
@media (max-width: 768px) {
  .c-subhead {
    column-gap: 10px;
    row-gap: 6px;
    margin-block: 35px 20px;
  }
  .c-subhead__jp {
    font-size: 18px;
  }
  .c-subhead__jp::before {
    width: 6px;
    height: 6px;
    top: 0.725em;
  }
  .c-subhead__en {
    font-size: 10px;
  }
}
/* note-title
_ ************************************** */
/* =====================================
  Note title (box title)
===================================== */
.c-note-title {
  /* accent token（ページアクセントを既定に） */
  --note-accent: var(--page-accent-color, var(--color-primary));
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 768px) {
  .c-note-title {
    font-size: 16px;
  }
}
.c-note-title::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--note-accent);
  flex: 0 0 10px;
}

/* 必要な時だけブルーにしたい場合 */
.c-note-title--secondary {
  --note-accent: var(--color-secondary);
}

/* button
_ ************************************** */
/* button element reset */
button.c-button {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
}

/* =====================================
  Button Component
===================================== */
.c-button {
  /* theme tokens */
  --btn-bg: var(--color-white);
  --btn-text: var(--color-text);
  --btn-border: var(--color-gray);
  --btn-accent: var(--color-primary);
  /* size tokens（default = md） */
  --btn-w: 250px;
  --btn-h: 56px;
  --btn-fz: 16px;
  --btn-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: var(--btn-w);
  height: var(--btn-h);
  padding-inline: 18px;
  border-radius: var(--btn-radius);
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 1px solid var(--btn-border);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  /* typography */
  font-weight: 700;
  font-size: var(--btn-fz);
  letter-spacing: 0.06em;
  line-height: 1;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}
.c-button:hover, .c-button:focus-visible {
  opacity: 0.9;
  text-decoration: none;
}
.c-button:active {
  transform: translateY(1px);
}

/* ---------------------------------
  Parts
--------------------------------- */
.c-button__label {
  display: inline-block;
}

.c-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.c-button__icon img,
.c-button__icon svg {
  display: block;
  width: 18px;
  height: auto;
}

/* ---------------------------------
  Sizes (fixed)
--------------------------------- */
/* 大：WEB予約・お問い合わせ */
.c-button--lg {
  --btn-w: 380px;
  --btn-h: 80px;
  --btn-fz: 24px;
}
@media (max-width: 768px) {
  .c-button--lg {
    --btn-w: 300px;
    --btn-h: 60px;
    --btn-fz: 20px;
  }
}
@media (max-width: 414px) {
  .c-button--lg {
    --btn-w: 260px;
    --btn-fz: 18px;
  }
}

/* 中：お知らせ一覧・GoogleMap・Instagram */
.c-button--md {
  --btn-w: 250px;
  --btn-h: 56px;
  --btn-fz: 16px;
}
@media (max-width: 768px) {
  .c-button--md {
    --btn-w: 230px;
    --btn-h: 50px;
    --btn-fz: 14px;
  }
}

/* 中：下層ページ ボタン .c-button--md と一緒に使う想定 */
.c-button--wide {
  --btn-w: 300px;
  /* mdのsm時の挙動*/
}
@media (max-width: 768px) {
  .c-button--wide {
    --btn-w: 260px; /* 例：md(230)より少し広めにしたい場合 */
  }
}
@media (max-width: 414px) {
  .c-button--wide {
    --btn-w: 240px;
  }
}

/* 小：グローバルナビ WEB予約 */
.c-button--sm {
  --btn-w: 130px;
  --btn-h: 29px;
  --btn-fz: 16px;
}
@media (max-width: 768px) {
  .c-button--sm {
    --btn-w: 87px;
    --btn-h: 27px;
    --btn-fz: 11px;
  }
}

/* ---------------------------------
  Shape
--------------------------------- */
.c-button--pill {
  --btn-radius: 999px;
}

.c-button--round {
  --btn-radius: 12px;
}

/* ---------------------------------
  Themes
--------------------------------- */
/* primary（ピンク） */
.c-button--primary {
  --btn-bg: var(--color-primary);
  --btn-text: var(--color-white);
  --btn-border: var(--color-primary);
  --btn-accent: var(--color-primary);
}
.c-button--primary:hover, .c-button--primary:focus-visible {
  background: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-primary);
  opacity: 1;
}

/* secondary（ブルー） */
.c-button--secondary {
  --btn-bg: var(--color-secondary);
  --btn-text: var(--color-white);
  --btn-border: var(--color-secondary);
  --btn-accent: var(--color-secondary);
}
.c-button--secondary:hover, .c-button--secondary:focus-visible {
  background: var(--color-white);
  color: var(--color-secondary);
  border-color: var(--color-secondary);
  opacity: 1;
}

/* outline（文字のみ／hoverでprimary） */
.c-button--outline {
  --btn-bg: var(--color-white);
  --btn-text: var(--color-text);
  --btn-border: var(--color-gray);
  --btn-accent: var(--color-primary);
}
.c-button--outline:hover, .c-button--outline:focus-visible {
  background: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-primary);
  opacity: 1;
}

/* ---------------------------------
  Arrow (SVG via mask)
  - lg/md
  - primary/secondary only
  - color follows button text color
--------------------------------- */
.c-button--lg.c-button--primary, .c-button--lg.c-button--secondary,
.c-button--md.c-button--primary,
.c-button--md.c-button--secondary {
  position: relative;
  justify-content: center;
  /* 矢印用の余白確保 */
  padding-left: 48px;
  padding-right: 48px;
}
.c-button--lg.c-button--primary::after, .c-button--lg.c-button--secondary::after,
.c-button--md.c-button--primary::after,
.c-button--md.c-button--secondary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  /* md default size */
  width: 25px;
  height: 10px;
  /* 必ず親の文字色を継承 */
  color: inherit;
  /* “塗り”は currentColor で行う */
  background-color: currentColor;
  /* 念のため、他ルールの背景画像を完全に無効化 */
  background-image: none;
  -webkit-mask-image: url("../images/cmn_img/cmn_arrow.svg");
  mask-image: url("../images/cmn_img/cmn_arrow.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.9;
  pointer-events: none;
}
@media (max-width: 768px) {
  .c-button--lg.c-button--primary, .c-button--lg.c-button--secondary,
  .c-button--md.c-button--primary,
  .c-button--md.c-button--secondary {
    padding-left: 42px;
    padding-right: 42px;
  }
  .c-button--lg.c-button--primary::after, .c-button--lg.c-button--secondary::after,
  .c-button--md.c-button--primary::after,
  .c-button--md.c-button--secondary::after {
    right: 16px;
    width: 21px;
  }
}

/* lg size：28x11 */
.c-button--lg.c-button--primary, .c-button--lg.c-button--secondary {
  padding-left: 56px;
  padding-right: 56px;
}
.c-button--lg.c-button--primary::after, .c-button--lg.c-button--secondary::after {
  width: 28px;
  height: 11px;
}
@media (max-width: 768px) {
  .c-button--lg.c-button--primary, .c-button--lg.c-button--secondary {
    padding-left: 48px;
    padding-right: 48px;
  }
}

/* ---------------------------------
  Outline + icon
  - text centered
  - icon fixed near right edge
--------------------------------- */
.c-button--outline.c-button--with-icon {
  position: relative;
  justify-content: center;
  padding-left: 48px;
  padding-right: 48px;
}
.c-button--outline.c-button--with-icon .c-button__label {
  pointer-events: none; /* 中央ズレ防止 */
}
.c-button--outline.c-button--with-icon .c-button__icon {
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.c-button--outline.c-button--with-icon .c-button__icon img,
.c-button--outline.c-button--with-icon .c-button__icon svg {
  display: block;
  width: 18px;
  height: auto;
}
@media (max-width: 768px) {
  .c-button--outline.c-button--with-icon {
    padding-left: 42px;
    padding-right: 42px;
  }
  .c-button--outline.c-button--with-icon .c-button__icon {
    right: 20px;
  }
}

/* sp-fixed-actions
_ ************************************** */
/* ============================
  SP 固定アクションバー
============================ */
.c-sp-fixed-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 35px;
  padding-bottom: env(safe-area-inset-bottom);
  background: transparent;
}
@media (min-width: 768px) {
  .c-sp-fixed-actions {
    display: none;
  }
}

.c-sp-fixed-actions__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 35px;
  text-decoration: none;
  color: var(--color-white);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: background-color 0.2s ease, filter 0.2s ease;
}
.c-sp-fixed-actions__item:hover, .c-sp-fixed-actions__item:focus-visible {
  text-decoration: none;
  filter: brightness(1.08);
}
@media (max-width: 376px) {
  .c-sp-fixed-actions__item {
    font-size: 11px;
  }
}

/* ----------------
  バリエーション
---------------- */
.c-sp-fixed-actions__item--reserve {
  background: var(--color-secondary);
}

.c-sp-fixed-actions__item--access {
  background: var(--color-gray);
}

.c-sp-fixed-actions__item--tel {
  background: var(--color-primary);
}

/* ----------------
  アイコン
---------------- */
.c-sp-fixed-actions__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.c-sp-fixed-actions__icon img {
  display: block;
  width: 14px;
  height: auto;
}

.c-sp-fixed-actions__text {
  line-height: 1;
}

/* page-intro
_ ************************************** */
.c-page-intro {
  /* デフォルト */
  --intro-catch-color: var(--page-accent-color, var(--color-primary));
}
.c-page-intro__grid {
  display: grid;
  grid-template-columns: 1fr clamp(460px, 44vw, 550px);
  gap: clamp(50px, 5vw, 60px);
  align-items: center;
  /* タブレット境界 */
}
@media (max-width: 1024px) {
  .c-page-intro__grid {
    /* ①②の差分を吸収：mdでは少しだけ幅を狭める */
    grid-template-columns: 1fr clamp(420px, 42vw, 460px);
    gap: clamp(30px, 4vw, 50px);
  }
}
.c-page-intro__grid {
  /* 900px以下で1カラム */
}
@media (max-width: 900px) {
  .c-page-intro__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
.c-page-intro__catch {
  margin: 0 0 20px;
  font-size: 30px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--intro-catch-color);
}
@media (max-width: 1024px) {
  .c-page-intro__catch {
    font-size: 26px;
  }
}
@media (max-width: 768px) {
  .c-page-intro__catch {
    font-size: 20px;
  }
}
.c-page-intro {
  /* c-page-intro：リード文（任意使用） */
}
.c-page-intro__lead {
  font-size: 18px;
  font-weight: 700;
  line-height: 2;
}
.c-page-intro__text {
  line-height: 2.2;
  color: var(--color-text);
}
.c-page-intro__text p {
  margin: 0;
}
.c-page-intro__text p + p {
  margin-top: 12px;
}
.c-page-intro__media {
  margin: 0;
}
@media (max-width: 900px) {
  .c-page-intro__media {
    margin-inline: auto;
    width: min(600px, 100%);
  }
}
.c-page-intro__img {
  width: 100%;
  height: auto;
  display: block;
}

/* hours-table
_ ************************************** */
.c-hours-table {
  width: 100%;
  border-collapse: collapse;
  /* テーブル下の罫線（1px 実線） */
  border-bottom: 1px solid var(--color-gray);
  font-size: 15px;
}
@media (max-width: 768px) {
  .c-hours-table {
    font-size: 12px;
  }
}
.c-hours-table th,
.c-hours-table td {
  /* 高さ指定したいので padding は固定しすぎない */
  padding: 0 12px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 0;
}
@media (max-width: 414px) {
  .c-hours-table th,
  .c-hours-table td {
    padding: 0 8px;
  }
}
.c-hours-table {
  /* -----------------------------
    ヘッダー（ピンク）高さ
    PC 35px / SP 25px
  ----------------------------- */
}
.c-hours-table thead th {
  height: 35px;
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 600;
}
@media (max-width: 768px) {
  .c-hours-table thead th {
    height: 25px;
  }
}
.c-hours-table {
  /* 左端の時間（tbody th）は左寄せ */
}
.c-hours-table tbody th {
  white-space: nowrap;
  font-weight: 500;
}
.c-hours-table tbody td {
  font-weight: 500;
}
.c-hours-table tbody th,
.c-hours-table tbody td {
  height: 45px;
}
@media (max-width: 768px) {
  .c-hours-table tbody th,
  .c-hours-table tbody td {
    height: 35px;
  }
}
.c-hours-table tbody tr:first-child th,
.c-hours-table tbody tr:first-child td {
  border-bottom: 1px dotted var(--color-gray);
}
.c-hours-table tbody tr:last-child th,
.c-hours-table tbody tr:last-child td {
  border-bottom: 0;
}

/* footer 用：最小差分（最終） */
.c-hours-table--footer {
  background: var(--color-white); /* 白背景は必要 */
  color: var(--color-text); /* 文字色は共通トークン */
  border-radius: 0; /* 角丸なし */
  border-bottom: 0; /* 下罫線は不要 */
}

/* faq
_ ************************************** */
/* =====================================
  FAQ Component (details/summary)
===================================== */
.c-faq {
  /* tokens（必要な時だけ上書きする） */
  --faq-border-color: #a0a0a0;
  --faq-q-color: var(--color-secondary); /* Q */
  --faq-a-color: var(--color-primary); /* A */
  --faq-icon-color: var(--color-gray); /* + / - */
  margin-top: 20px;
  border-top: 1px dotted var(--faq-border-color);
}
.c-faq__item {
  margin: 0;
  border-bottom: 1px dotted var(--faq-border-color);
}
.c-faq__summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 24px 1fr 44px;
  align-items: center;
  column-gap: 10px;
  padding: 22px 30px 22px 30px;
}
.c-faq__summary::-webkit-details-marker {
  display: none;
}
@media (max-width: 768px) {
  .c-faq__summary {
    grid-template-columns: 20px 1fr 36px;
    padding: 20px 20px 20px 20px;
  }
}
@media (max-width: 414px) {
  .c-faq__summary {
    padding: 15px 10px 15px 10px;
  }
}
.c-faq__q {
  color: var(--faq-q-color);
  letter-spacing: 0.04em;
  font-size: 18px;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  /* 英字装飾としての共通“質感” */
  font-feature-settings: "kern";
  letter-spacing: 0.12em;
}
@media (max-width: 768px) {
  .c-faq__q {
    font-size: 16px;
  }
}
.c-faq__question {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
@media (max-width: 768px) {
  .c-faq__question {
    font-size: 16px;
  }
}
.c-faq__icon {
  position: relative;
  width: 20px;
  height: 20px;
  margin-left: auto;
  color: var(--faq-icon-color);
}
@media (max-width: 414px) {
  .c-faq__icon {
    width: 16px;
    height: 16px;
  }
}
.c-faq__icon::before, .c-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  border-radius: 1px;
}
@media (max-width: 414px) {
  .c-faq__icon::before, .c-faq__icon::after {
    width: 16px;
  }
}
.c-faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.c-faq__item[open] .c-faq__icon::after {
  opacity: 0; /* 「−」に */
}
.c-faq__answer {
  display: grid;
  grid-template-columns: 24px 1fr;
  padding: 0 30px 22px 30px;
  column-gap: 10px;
}
@media (max-width: 768px) {
  .c-faq__answer {
    grid-template-columns: 20px 1fr;
    padding: 0 20px 20px 20px;
  }
}
@media (max-width: 414px) {
  .c-faq__answer {
    padding: 0 10px 15px 10px;
  }
}
.c-faq__a {
  color: var(--faq-a-color);
  letter-spacing: 0.04em;
  padding-top: 2px;
  font-size: 18px;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  /* 英字装飾としての共通“質感” */
  font-feature-settings: "kern";
  letter-spacing: 0.12em;
}
@media (max-width: 768px) {
  .c-faq__a {
    font-size: 16px;
  }
}
.c-faq__text p {
  margin: 0;
  color: var(--color-text);
}
.c-faq__text p + p {
  margin-top: 10px;
}

/* toc
_ ************************************** */
/* 目次（CONTENTS） ========================= */
.c-toc {
  /* デフォルト（ページテーマがあれば追従） */
  --toc-accent-color: var(--page-accent-color, var(--color-primary));
  margin-top: 28px;
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  column-gap: 28px;
}
@media (max-width: 768px) {
  .c-toc {
    grid-template-columns: 1fr;
    align-items: start;
    row-gap: 14px;
  }
}
.c-toc__label {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  /* 英字装飾としての共通“質感” */
  font-feature-settings: "kern";
  letter-spacing: 0.12em;
  font-size: 18px;
  letter-spacing: 0.12em;
  color: var(--toc-accent-color);
  white-space: nowrap;
}
.c-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: 30px;
  row-gap: 20px;
}
@media (max-width: 768px) {
  .c-toc__list {
    column-gap: 20px;
    row-gap: 10px;
  }
}
.c-toc__item {
  display: inline-flex;
  align-items: center;
  position: relative;
}
.c-toc {
  /* ドット（文字右） */
}
.c-toc__item::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--toc-accent-color);
  margin-left: 8px;
  flex: 0 0 7px;
}
.c-toc__link {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  line-height: 1.6;
  transition: color 0.25s ease;
}
.c-toc__link:hover, .c-toc__link:focus-visible {
  color: var(--toc-accent-color);
  text-decoration: none;
}

/* pill-label
_ ************************************** */
.c-pill-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--color-gray-light);
  color: var(--color-text);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .c-pill-label {
    font-size: 13px;
    padding: 5px 12px;
  }
}

/* footer など暗背景用 */
.c-pill-label--inverse {
  background: var(--color-grey-powder);
  color: var(--color-text);
}

/* note
_ ************************************** */
.c-note {
  margin: 0;
  font-size: 13px; /* PC */
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--color-text);
}
@media (max-width: 768px) {
  .c-note {
    font-size: 11px; /* SP */
  }
}

/* list
_ ************************************** */
/* =====================================
  List Component
===================================== */
.c-list {
  /* tokens（必要な時だけ上書き） */
  --list-gap: 10px;
  --list-font-size: 14px;
  --list-line-height: 2.0;
  --list-color: var(--color-text);
  --list-indent: 1.2em;
  margin: 0;
  padding-left: var(--list-indent);
  display: grid;
  gap: var(--list-gap);
}
.c-list li {
  font-size: var(--list-font-size);
  line-height: var(--list-line-height);
  color: var(--list-color);
}

/* 注釈用（※〜） */
.c-list--note {
  --list-gap: 6px;
  --list-font-size: 13px;
  --list-line-height: 2.0;
  --list-color: var(--color-text);
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--color-text);
}
@media (max-width: 768px) {
  .c-list--note {
    font-size: 11px; /* SP */
  }
}

/* ボックス内など、少し詰めたい */
.c-list--tight {
  --list-gap: 8px;
  --list-line-height: 1.9;
}

/* table
_ ************************************** */
/* =====================================
  table
===================================== */
.c-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  /* ===============================
     thead
  =============================== */
}
.c-table thead th {
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 5px 16px;
  text-align: center;
  /* 縦ドット（最後の列以外） */
}
.c-table thead th:not(:last-child) {
  border-right: 1px dotted rgba(255, 255, 255, 0.8);
}
.c-table {
  /* ===============================
     tbody 共通
  =============================== */
}
.c-table tbody th,
.c-table tbody td {
  padding: clamp(20px, 2.5vw, 30px);
  font-weight: 600;
  line-height: 2;
  color: var(--color-text);
  vertical-align: middle;
  background: var(--color-white);
  /* 縦ドット（最後の列以外） */
}
.c-table tbody th:not(:last-child),
.c-table tbody td:not(:last-child) {
  border-right: 1px dotted var(--color-gray);
}
.c-table {
  /* 横ドット（行間） */
}
.c-table tbody tr + tr th,
.c-table tbody tr + tr td {
  border-top: 1px dotted var(--color-gray);
}
.c-table {
  /* 左カラム */
}
.c-table tbody th {
  width: 22%;
  font-weight: 600;
  background: var(--color-white);
}
@media (max-width: 768px) {
  .c-table tbody th,
  .c-table tbody td {
    padding: clamp(10px, 1.5vw, 20px);
  }
}

/* =====================================
  SP cards (table alternative)
===================================== */
.c-table-cards {
  display: none; /* default: hide on PC */
}

.c-table-card {
  background: var(--color-white);
  border-radius: var(--radius-sm);
  padding: 20px 20px;
}

.c-table-card + .c-table-card {
  margin-top: 12px;
}

.c-table-card__title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-primary);
}
@media (max-width: 768px) {
  .c-table-card__title {
    margin: 0 0 5px;
  }
}

.c-table-card__dl {
  margin: 0;
}

.c-table-card__row {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 10px;
  padding: 10px 0;
}
@media (max-width: 768px) {
  .c-table-card__row {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 15px 0;
  }
}

.c-table-card__row + .c-table-card__row {
  border-top: 1px dotted rgba(45, 52, 74, 0.25);
}

.c-table-card__dt {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(42, 47, 58, 0.72);
  white-space: nowrap;
}

.c-table-card__dd {
  margin: 0;
  font-size: 14px;
  line-height: 2;
  color: var(--color-text);
}

/* SP: switch (table -> cards) */
@media (max-width: 768px) {
  .c-table {
    display: none;
  }
  .c-table-cards {
    display: block;
  }
  /* c-table-list はカード内でも詰める */
  .c-table-card .c-table-list {
    margin: 0;
    padding-left: 1.2em;
  }
  .c-table-card .c-table-list li {
    margin: 0.2em 0;
  }
}
/* form
_ ************************************** */
/* =====================================
  Form Component
===================================== */
/* wrapper */
.c-form {
  --form-border: var(--color-gray-light);
  --form-focus: rgba(188, 72, 143, 0.45);
  --form-focus-shadow: rgba(188, 72, 143, 0.12);
  --form-field-bg: var(--color-grey-powder);
  --form-field-bg-focus: var(--color-white);
  --form-label-w: 180px;
  --form-req-w: 56px;
  /* sections */
}
.c-form__consent {
  margin-top: 58px;
  display: grid;
  place-items: center;
}
.c-form__actions {
  margin-top: 18px;
  display: grid;
  place-items: center;
}

/* row */
.c-form-row {
  display: grid;
  grid-template-columns: var(--form-label-w) var(--form-req-w) 1fr;
  align-items: center;
  gap: 20px;
  padding: 23px 30px;
  border-bottom: 1px solid var(--form-border);
  /* 上寄せモード */
}
.c-form-row--top {
  align-items: start;
}
@media (max-width: 1024px) {
  .c-form-row {
    --form-label-w: 160px;
    grid-template-columns: var(--form-label-w) var(--form-req-w) 1fr;
    gap: 14px;
    padding: 23px 20px;
  }
}
@media (max-width: 768px) {
  .c-form-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 18px 0;
  }
}
.c-form-row--textarea {
  align-items: start;
}
.c-form-row__label {
  margin: 0;
  color: var(--color-text);
  letter-spacing: 0.06em;
  font-size: 18px;
}
@media (max-width: 768px) {
  .c-form-row__label {
    font-size: 16px;
  }
}
.c-form-row__req {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  background: var(--color-red);
  color: var(--color-white);
  font-size: 16px;
  letter-spacing: 0.08em;
  line-height: 1;
}
@media (max-width: 768px) {
  .c-form-row__req {
    font-size: 13px;
    height: 20px;
    width: fit-content;
  }
}
.c-form-row__opt {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  background: var(--color-gray);
  color: var(--color-white);
  font-size: 16px;
  letter-spacing: 0.08em;
  line-height: 1;
  opacity: 0;
}
@media (max-width: 768px) {
  .c-form-row__opt {
    font-size: 13px;
    height: 0;
    width: fit-content;
  }
}
.c-form-row__field {
  min-width: 0;
}
.c-form-row {
  /* 生年月日などのインラインフィールド用 */
}
.c-form-row__field--inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* SP対策 */
}
.c-form-row__field--inline > .c-note {
  display: block;
  margin-top: 5px;
  width: 100%;
}
.c-form-row__prefix {
  white-space: nowrap;
  font-size: 18px;
  margin-right: 5px;
}
@media (max-width: 768px) {
  .c-form-row__prefix {
    font-size: 16px;
  }
}
.c-form-row {
  /* suffix 共通 */
}
.c-form-row__suffix {
  white-space: nowrap;
  font-size: 18px;
}
@media (max-width: 768px) {
  .c-form-row__suffix {
    font-size: 16px;
  }
}
.c-form-row__suffix {
  /* 「年」「月」の後ろだけ 1.5em 空ける */
}
.c-form-field--select + .c-form-row__suffix {
  margin-left: 1.5em;
}
.c-form-row {
  /* field stack for email etc. */
}
.c-form-row__field--stack {
  display: grid;
  gap: 10px;
}
.c-form-row__field--stack .c-note {
  margin: 0;
}

/* field (input / textarea / select) */
.c-form-field {
  width: 100%;
  border: 1px solid var(--form-border);
  border-radius: 3px;
  padding: 12px 14px;
  font-size: 16px;
  color: var(--color-text);
  background: var(--form-field-bg);
}
@media (max-width: 768px) {
  .c-form-field {
    font-size: 14px;
  }
}
.c-form-field::placeholder {
  color: var(--color-gray);
}
.c-form-field:focus {
  outline: none;
  border-color: var(--form-focus);
  box-shadow: 0 0 0 3px var(--form-focus-shadow);
  background: var(--form-field-bg-focus);
}
.c-form-field--select {
  background: var(--form-field-bg-focus);
  margin-inline: 10px;
  padding: 10px 14px;
}
.c-form-field--cal {
  border: 1px solid var(--form-border);
  color: var(--color-text);
  margin-inline: 10px;
  padding: 10px 14px;
}
.c-form-field {
  /* textarea */
}
.c-form-field--textarea {
  height: 300px;
  width: 100% !important;
  resize: vertical;
}
@media (max-width: 768px) {
  .c-form-field--textarea {
    height: 150px;
    min-height: 150px;
  }
}
.c-form-field {
  /* PC widths（要求：名前70% / 電話35% / default 100%） */
}
@media (min-width: 901px) {
  .c-form-field--name {
    width: 70%;
  }
}
@media (min-width: 901px) {
  .c-form-field--tel {
    width: 35%;
  }
}
.c-form-field--zip {
  width: calc(100% - 1.55em);
}
@media (min-width: 901px) {
  .c-form-field--zip {
    width: 35%;
  }
}

/* consent checkbox */
.c-form-checks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5em; /* ← 約1文字分 */
}

.c-form-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  /* label が幅100%で block化している場合でも、中身は横並び維持 */
  width: fit-content;
}
.c-form-check__input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-gray-light);
  border-radius: 4px; /* checkbox */
  display: grid;
  place-items: center;
  background: #fff;
  flex: 0 0 20px;
}
.c-form-check__input[type=radio] {
  border-radius: 50%;
}
.c-form-check {
  /* checked */
}
.c-form-check__input:checked {
  border-color: var(--color-primary);
  background: var(--color-primary);
}
.c-form-check__text {
  display: inline-block;
  min-width: 0;
  line-height: 1.6;
  letter-spacing: 0.06em;
  font-size: 18px;
}
@media (max-width: 768px) {
  .c-form-check__text {
    font-size: 16px;
  }
}
.c-form-check__text a {
  color: var(--page-accent-color, var(--color-primary));
  text-decoration: underline;
}
.c-form-check__text a:hover, .c-form-check__text a:focus-visible {
  text-decoration: none;
}

/* mailformpro（スタイル打ち消し／上書き）
========================================= */
/* mailformpro specific (optional, only layout helpers) */
.c-form--mfp {
  /* 何か mailformpro 固有で上書きが必要ならここに追記 */
  /* 生年月日 AddOns birthday */
}
.c-form--mfp #mfp_BirthdayElement_entry-birth-year_year,
.c-form--mfp #mfp_BirthdayElement_entry-birth-year_month,
.c-form--mfp #mfp_BirthdayElement_entry-birth-year_day {
  background: var(--form-field-bg-focus);
  border-color: var(--form-border);
  margin-inline: 10px;
  padding: 10px 14px;
}

/* mailformpro 確認画面（#mfp_phase_confirm）
 =========================================== */
#mfp_phase_confirm {
  /* ボタン並び（中央寄せ） */
}
#mfp_phase_confirm .mfp_buttons {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap; /* SPで折り返し */
}
@media (max-width: 600px) {
  #mfp_phase_confirm .mfp_buttons {
    column-gap: 0;
    row-gap: 20px;
  }
}
#mfp_phase_confirm {
  /* 共通ボタン見た目（= c-button 相当） */
}
#mfp_phase_confirm .mfp_buttons > button.mfp_element_button {
  /* button reset */
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  /* c-button の基本形 */
  --btn-bg: var(--color-white);
  --btn-text: var(--color-text);
  --btn-border: var(--color-gray);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 250px;
  height: 56px;
  padding-inline: 18px;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 1px solid var(--btn-border);
  cursor: pointer;
  white-space: nowrap;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  line-height: 1;
  text-shadow: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}
#mfp_phase_confirm .mfp_buttons > button.mfp_element_button:hover, #mfp_phase_confirm .mfp_buttons > button.mfp_element_button:focus-visible {
  opacity: 0.9;
}
#mfp_phase_confirm .mfp_buttons > button.mfp_element_button:active {
  transform: translateY(1px);
}
@media (max-width: 600px) {
  #mfp_phase_confirm .mfp_buttons > button.mfp_element_button {
    width: min(300px, 92%);
    height: 60px;
    font-size: 20px;
  }
}
@media (max-width: 420px) {
  #mfp_phase_confirm .mfp_buttons > button.mfp_element_button {
    width: min(260px, 98%);
    font-size: 18px;
  }
}
#mfp_phase_confirm {
  /* 送信する（primary + 矢印） */
}
#mfp_phase_confirm #mfp_button_send.mfp_element_button {
  --btn-bg: var(--color-primary);
  --btn-text: var(--color-white);
  --btn-border: var(--color-primary);
  position: relative;
  padding-left: 56px;
  padding-right: 56px;
  box-shadow: none;
  order: 2;
}
#mfp_phase_confirm #mfp_button_send.mfp_element_button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  width: 28px;
  height: 11px;
  background-color: currentColor;
  -webkit-mask-image: url("../images/cmn_img/cmn_arrow.svg");
  mask-image: url("../images/cmn_img/cmn_arrow.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.9;
  pointer-events: none;
}
#mfp_phase_confirm #mfp_button_send.mfp_element_button:hover, #mfp_phase_confirm #mfp_button_send.mfp_element_button:focus-visible {
  background: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-primary);
  opacity: 1;
}
@media (max-width: 600px) {
  #mfp_phase_confirm #mfp_button_send.mfp_element_button {
    padding-left: 48px;
    padding-right: 48px;
  }
  #mfp_phase_confirm #mfp_button_send.mfp_element_button::after {
    right: 16px;
  }
}
#mfp_phase_confirm {
  /* キャンセル（outline 相当） */
}
#mfp_phase_confirm #mfp_button_cancel.mfp_element_button {
  --btn-bg: var(--color-white);
  --btn-text: var(--color-text);
  --btn-border: var(--color-gray);
  box-shadow: none;
  order: 1;
}
#mfp_phase_confirm #mfp_button_cancel.mfp_element_button:hover, #mfp_phase_confirm #mfp_button_cancel.mfp_element_button:focus-visible {
  background: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-primary);
  opacity: 1;
}

/* mailformpro confirm：見出し(h4) + table を共通トーンへ
  =========================================== */
#mfp_phase_confirm {
  /* ========== heading（c-subhead 風） ========== */
}
#mfp_phase_confirm h4 {
  /* c-subhead と同じ：横並び + wrap を想定した “見出しの器” っぽい余白 */
  margin: 40px 0 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 20px;
  row-gap: 8px;
  /* 日本語見出し相当 */
  color: var(--color-text);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.45;
  /* c-subhead のドットは「ここでは無し」前提 */
  padding-left: 0;
}
@media (max-width: 768px) {
  #mfp_phase_confirm h4 {
    margin: 35px 0 20px;
    column-gap: 10px;
    row-gap: 6px;
    font-size: 18px;
  }
}
#mfp_phase_confirm {
  /* ========== table（c-table 風） ========== */
}
#mfp_phase_confirm #mfp_confirm_table {
  width: 100%;
  border-collapse: collapse;
  /* “カードっぽく”見せたい場合（任意：不要なら外してOK） */
  background: var(--color-white);
  border-radius: var(--radius-sm, 12px);
  overflow: hidden;
  /* 外枠 */
  border: 1px solid var(--color-border, #d9dfe8);
}
#mfp_phase_confirm #mfp_confirm_table th,
#mfp_phase_confirm #mfp_confirm_table td {
  padding: 18px 18px;
  vertical-align: middle;
  border-bottom: 1px dotted var(--color-gray);
  color: var(--color-text);
  font-size: 16px;
}
@media (max-width: 768px) {
  #mfp_phase_confirm #mfp_confirm_table th,
  #mfp_phase_confirm #mfp_confirm_table td {
    padding: 10px 10px;
    font-size: 14px;
  }
}
#mfp_phase_confirm #mfp_confirm_table tr:last-child th,
#mfp_phase_confirm #mfp_confirm_table tr:last-child td {
  border-bottom: 0;
}
#mfp_phase_confirm #mfp_confirm_table th {
  width: 220px;
  text-align: left;
  font-weight: 600;
  letter-spacing: 0.06em;
  background: var(--color-grey-powder);
}
@media (max-width: 768px) {
  #mfp_phase_confirm #mfp_confirm_table th {
    width: auto;
  }
}
#mfp_phase_confirm #mfp_confirm_table td {
  line-height: 2;
  background: var(--color-white);
}
#mfp_phase_confirm #mfp_confirm_table {
  /* zebra（任意：c-table のニュアンスに寄せて薄く交互） */
}
#mfp_phase_confirm #mfp_confirm_table tbody tr:nth-child(odd) th {
  background: var(--color-grey-powder);
}
#mfp_phase_confirm #mfp_confirm_table tbody tr:nth-child(odd) td {
  background: var(--color-grey-powder);
}
@media (max-width: 768px) {
  #mfp_phase_confirm #mfp_confirm_table tbody tr:nth-child(odd) td {
    background: var(--color-white);
  }
}
#mfp_phase_confirm #mfp_confirm_table tbody tr:nth-child(even) th {
  background: var(--color-white);
}
@media (max-width: 768px) {
  #mfp_phase_confirm #mfp_confirm_table tbody tr:nth-child(even) th {
    background: var(--color-grey-powder);
  }
}
#mfp_phase_confirm #mfp_confirm_table tbody tr:nth-child(even) td {
  background: var(--color-white);
}

/* modal-announcement
_ ************************************** */
/* =====================================
  おしらせ用モーダル
===================================== */
.p-site-info-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms ease;
}
.p-site-info-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.p-site-info-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.p-site-info-modal__dialog {
  position: relative;
  width: min(1080px, 100% - 48px);
  background: var(--color-white);
  border-radius: 2px;
  padding: clamp(90px, 10vh, 140px) 64px clamp(70px, 10vh, 140px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.p-site-info-modal__close {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid var(--color-text);
  background: transparent;
  cursor: pointer;
  color: transparent;
}
.p-site-info-modal__close::before, .p-site-info-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 1px;
  transform-origin: center;
}
.p-site-info-modal__close::before {
  transform: translate(-50%, -50%) rotate(30deg);
}
.p-site-info-modal__close::after {
  transform: translate(-50%, -50%) rotate(-30deg);
}
.p-site-info-modal__close:hover {
  opacity: 0.85;
}
.p-site-info-modal__close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.p-site-info-modal__head {
  text-align: center;
  margin-bottom: clamp(30px, 4vw, 60px);
}
.p-site-info-modal__eyebrow {
  margin: 0 0 14px;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--color-primary);
}
.p-site-info-modal__eyebrow span {
  position: relative;
  display: inline-block;
  padding: 0 14px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  /* 英字装飾としての共通“質感” */
  font-feature-settings: "kern";
  letter-spacing: 0.12em;
}
.p-site-info-modal__eyebrow span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 4px;
  background-color: var(--color-primary);
  border-radius: 50%;
  transform: translateY(-50%);
}
.p-site-info-modal__eyebrow span::before {
  left: 0;
}
.p-site-info-modal__title {
  margin: 0;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text);
}
.p-site-info-modal__body {
  max-width: 840px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 2.1;
  color: var(--color-text);
}
.p-site-info-modal__body p {
  margin: 0 0 14px;
}
.p-site-info-modal__cta {
  margin-top: 2em !important;
  text-align: center;
  font-size: 16px;
}
.p-site-info-modal__link {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: #d04b86;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.p-site-info-modal__link:hover {
  opacity: 0.85;
}
@media (max-width: 768px) {
  .p-site-info-modal__dialog {
    width: calc(100% - 24px);
    padding: 32px 16px 28px;
    max-height: calc(100svh - 32px);
    overflow: hidden;
  }
  .p-site-info-modal__close {
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
  }
  .p-site-info-modal__close::before, .p-site-info-modal__close::after {
    width: 22px;
  }
  .p-site-info-modal__head {
    margin-bottom: 24px;
  }
  .p-site-info-modal__eyebrow {
    font-size: 11px;
    margin-bottom: 10px;
  }
  .p-site-info-modal__eyebrow span {
    padding-left: 10px;
  }
  .p-site-info-modal__eyebrow span::before {
    width: 4px;
    height: 4px;
  }
  .p-site-info-modal__title {
    font-size: 18px;
    line-height: 1.4;
  }
  .p-site-info-modal__body {
    max-width: none;
    font-size: 14px;
    line-height: 1.9;
    max-height: calc(100svh - 220px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .p-site-info-modal__body p {
    margin-bottom: 12px;
  }
  .p-site-info-modal__cta {
    margin-top: 1.5em !important;
    font-size: 14px;
  }
}

/* background
_ ************************************** */
.u-bg-white {
  background-color: var(--color-white);
}

.u-bg-grey-powder {
  background-color: var(--color-grey-powder);
}

.u-bg-grey-light {
  background-color: var(--color-gray-light);
}

.u-bg-primary-powder {
  background-color: var(--color-primary-powder);
}

.u-bg-secondary-powder {
  background-color: var(--color-secondary-powder);
}

/* radius
_ ************************************** */
.u-radius-sm {
  border-radius: var(--radius-sm);
}

.u-radius-md {
  border-radius: var(--radius-md);
}

.u-radius-lg {
  border-radius: var(--radius-lg);
}

.u-radius-pill {
  border-radius: var(--radius-pill);
}

/* path: html/_scss/object/utility/_text.scss */
/* text
_ ************************************** */
.u-text-red {
  color: var(--color-red) !important;
}

.u-text-primary {
  color: var(--color-primary) !important;
}

.u-text-secondary {
  color: var(--color-secondary) !important;
}

.u-text-bold {
  font-weight: 700 !important;
}/*# sourceMappingURL=common.css.map */