@charset "utf-8";

/* ===== ベース：パレット / リセット / タイポグラフィ =====
   色とサイズは Figma の PC_TOP から実測した値。
   tokens.css（Figma variables 由来）には今回のデザインの色が
   登録されていないため、実測値をここで定義している。
   ・SVG 書き出しから取得した確定値：cyan / green / orange / cream / yellow
   ・MV ラスター書き出しから取得した確定値：navy(#030946)
   ・(推定) と書いた値は書き出し素材に含まれず画面から目視で拾った値。 */

:root {
  /* --- カラー --- */
  --c-navy: #030946;              /* 見出し・本文 */
  --c-cyan: #00a4cd;              /* メイン */
  --c-green: #00a95f;             /* アクセント（NO.2） */
  --c-orange: #f08300;            /* アクセント（NO.3・WEB予約・ロゴ） */
  --c-cream: #faf7ec;             /* カード背景 */
  --c-yellow: #ffec16;            /* MVバッジの強調 */
  --c-white: #ffffff;
  --c-footer-bg: #e5f4fb;         /* (推定) フッター背景 */
  --c-rule: #d5d5d5;              /* 診療時間表の罫線 */
  --c-border: rgba(3, 9, 70, 0.14); /* (推定) ボタン枠線 */
  --c-date: #8894ae;              /* (推定) お知らせ日付 */
  --c-map: #d9d9d9;               /* 地図プレースホルダ */

  /* --- レイアウト --- */
  --w-design: 1440px;
  --w-container: 1080px;
  --h-header: 88px;
  --mv-offset: 54px;              /* ヘッダー下端からMV／メガメニュー上端まで */

  /* --- タイポグラフィ --- */
  --fs-h2: 34px;                  /* セクション見出し */
  --fs-en: 16px;                  /* セクション英字サブ */
  --fs-28: 28px;
  --fs-24: 24px;
  --fs-20: 20px;
  --fs-18: 18px;
  --fs-16: 16px;
  --fs-14: 14px;
  --ls: 0.05em;

  /* --- 角丸 --- */
  --r-card: 24px;
  --r-sm: 16px;
  --r-chip: 12px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--h-header);
}

body {
  margin: 0;
  color: var(--c-navy);
  background: var(--c-white);
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 2;
  letter-spacing: var(--ls);
  text-align: left;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, table, th, td {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: 700;
  line-height: 1.7;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img, svg, video {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.25s ease;
}

a:hover {
  opacity: 0.65;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

table {
  border-collapse: collapse;
}

/* ===== 共通レイアウト部品 ===== */

.l-container {
  width: var(--w-container);
  max-width: calc(100% - 48px);
  margin-inline: auto;
}

.l-main {
  overflow-x: clip;
}

/* セクション見出し（日本語＋英字） */
.c-heading {
  text-align: center;
}

.c-heading__ja {
  display: block;
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--ls);
}

.c-heading__en {
  display: block;
  margin-top: 6px;
  color: var(--c-cyan);
  font-size: var(--fs-en);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
}

/* 「準備中」などの状態バッジ */
.c-badge {
  display: inline-block;
  padding: 5px 16px;
  border-radius: 999px;
  background: rgba(240, 131, 0, 0.12);
  color: #a85c00;
  font-size: var(--fs-14);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.08em;
}

.c-badge--lg {
  padding: 7px 22px;
  font-size: var(--fs-16);
}

/* 矢印つきテキストリンク */
.c-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-16);
  font-weight: 500;
  letter-spacing: var(--ls);
  line-height: 1.6;
}

.c-more__icon {
  flex: none;
  width: 20px;
  height: 20px;
}

.c-more--center {
  display: flex;
  justify-content: center;
}

/* 円形アイコンの中の矢印 */
.c-arrow {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c-cyan);
  position: relative;
}

/* 円の中の矢印（軸＋矢先） */
.c-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 10px;
  height: 1.6px;
  background: #fff;
  transform: translateY(-50%);
}

.c-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 8px;
  width: 5px;
  height: 5px;
  border-top: 1.6px solid #fff;
  border-right: 1.6px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}

/* 日本語の折り返し制御（fh_phrase() が出力する塊）
   塊の中では改行せず、塊の境界だけで折り返す。 */
.c-nb {
  display: inline-block;
}

/* 対応ブラウザでは、指定していない文章も文節単位で折り返す */
body {
  word-break: auto-phrase;
}

/* 読み上げ用に文字は残して見た目だけ隠す */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* PC / SP 出し分け */
.u-sp-only { display: none; }

/* ===== SP（Figma: SP_TOP / 375px 基準） ===== */
@media (max-width: 767px) {
  :root {
    --w-container: 335px;   /* 375 - 左右20 */
    --h-header: 52px;
    --mv-offset: 0px;
    --fs-h2: 26px;
    --fs-28: 20px;
    --fs-20: 18px;
    --fs-16: 14px;
    --r-card: 16px;
  }

  .l-container {
    width: min(var(--w-container), calc(100% - 40px));
    max-width: none;
  }

  .u-sp-only { display: revert; }
  .u-pc-only { display: none; }

  .c-heading__en { margin-top: 4px; }

  .c-more { font-size: var(--fs-14); }
}