/* ==========================================================
   2026-07 リニューアル: グローバルヘッダー（header-top / header-bottom）
   konno-eye-com の構成を移植・調整
   ========================================================== */

/* スクロールに連動して#headerの高さが変わる（.scrolledで212px→60px）ため、
   ブラウザのスクロールアンカリング（画面内の見た目がズレないよう自動でスクロール位置を
   補正する機能）が誤反応し、scrollYが100px前後を行ったり来たりして.scrolledの付け外しが
   連鎖的に発生する不具合があった（ヘッダー・#footer-bnrが上下にガタつく）。
   overflow-anchor:noneでこの自動補正自体を無効化して解消する。 */
/* scroll-padding-top: ヘッダーが画面上部に重なる（PC=.scrolled時fixedで60px、SP=常時fixedで60px）ため、
   ページ内アンカーへ飛んだ際に見出しがヘッダーの下に隠れる。
   主対応は main.js の scrollToHash（konno移植）で、これはJS無効時・native jump用のフォールバック。 */
html {
  overflow-anchor: none;
  scroll-padding-top: 80px;
}

/* ---- header-top / header-bottom 共通レイアウト ---- */
#header {
  display: block;
  height: auto;
}
.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .header-top {
    height: 160px;
  }
}
@media screen and (max-width: 767px) {
  .header-top {
    height: 60px;
  }
  /* #top-logo は position:absolute で top値未指定（static position依存）だったため、
     .header-top入れ子の追加でブラウザの自動計算結果がずれていた。konnoに合わせ明示指定 */
  #top-logo {
    top: 9px;
  }
}
.header-bottom {
  text-align: center;
}
.header-bottom ul.menu-items {
  margin: 0;
  padding: 0;
}
.header-bottom ul.menu-items > li {
  display: inline-block;
  margin-left: 32px;
}
.header-bottom ul.menu-items > li:first-child {
  margin-left: 0;
}
.header-bottom li a.menu-parent {
  font-size: 1.6rem;
  color: #333;
  letter-spacing: 0.05em;
  font-weight: 500;
}

/* ---- PC: 親メニュー + サブメニュー（.header-bottom） ---- */
.menu-items > li.has-submenu {
  position: relative;
}
.menu-parent {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  padding: 0.5em 0;
  display: inline-block;
  cursor: pointer;
  position: relative;
}
.menu-parent::after {
  content: "▼";
  font-size: 0.6em;
  margin-left: 5px;
  transition: transform 0.3s ease;
}
.submenu {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  top: 90%;
  left: 0;
  background: #fff;
  border: 1px solid #ccc;
  list-style: none;
  padding: 0.825rem 0;
  margin: 0;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  width: max-content;
  min-width: 100%;
  transition: max-height 0.4s ease-out, opacity 0.1s ease-out, visibility 0.1s ease-out;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
}
.header-bottom ul.menu-items > li:last-child .submenu {
  left: auto;
  right: 0;
}
.submenu li {
  margin: 0;
  text-align: left;
}
.submenu a {
  display: block;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  color: #333;
  font-size: 1.4rem;
  white-space: nowrap;
}
.submenu a:hover {
  color: #2db170;
}
.has-submenu.is-open > .submenu {
  opacity: 1;
  visibility: visible;
  max-height: 500px;
}

/* ---- SP: プルダウン式アコーディオン（.sp-top-nav 内） ---- */
.pulldown-parent {
  position: relative;
}
.pulldown-parent > a.menu-toggle {
  position: relative;
  display: block;
  padding-right: 35px;
  cursor: pointer;
}
.pulldown-parent > a.menu-toggle::after {
  content: '↓';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.3s ease;
}
.pulldown-parent.open > a.menu-toggle::after {
  transform: translateY(-50%) rotate(180deg);
}
.pulldown-child {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: max-height 0.35s ease, opacity 0.3s ease, visibility 0.3s ease;
}
.pulldown-parent.open > .pulldown-child {
  visibility: visible;
  opacity: 1;
  max-height: 1500px;
}
/* font-size/color/paddingは`#top-menu li a`・`.open #top-menu li a`（style.css）が
   詳細度で勝つため、あえて指定していない（konno-eye-com本番も同じ挙動） */
.pulldown-child a {
  display: block;
  width: 100%;
  background: #e8f5e9;
  box-sizing: border-box;
  border-bottom: 1px solid #d6d6d6;
  text-align: left;
}
.pulldown-child li:last-child a {
  border-bottom: none;
}
/* 階層のインデント（konno-eye-com本番と同じセレクタ・値。第1階層のみ、marginは付けない） */
.open #top-menu .sp-top-nav li.pulldown-parent ul.pulldown-child li a {
  padding-left: 20px;
}

/* ---- SPメニュー本体（.sp-top-nav 内 ul.menu-items）: 旧 ul#menu 相当 ---- */
@media screen and (max-width: 767px) {
  /* `#top-menu ul{margin:0;padding:0}`（style.css）に詳細度で負けないよう、
     #top-menuを含めたセレクタにしている（単なる`ul.menu-items`では負けて反映されない） */
  #top-menu ul.menu-items {
    margin: 65px 0 30px;
    padding: 15px 0;
    width: 100%;
    z-index: 101;
    overflow: hidden;
    height: auto;
    border-top: 1px solid #d6d6d6;
    font-weight: bold;
  }
  ul.menu-items > li {
    display: block;
    margin: 0;
    font-size: 1.1em;
    z-index: 500;
    position: relative;
    width: 100%;
  }
  .header-bottom {
    display: none;
  }
}

/* ---- PC: ハンバーガー・SPドロワーは非表示（header-bottomのみ表示） ---- */
@media screen and (min-width: 768px) {
  .header-top #toggle,
  .header-top .sp-top-nav > ul.menu-items,
  .header-top .sp-top-nav .sp-top-contact {
    display: none;
  }
  .header-bottom {
    padding-bottom: 14px;
  }

  /* position:staticとfixedを切り替える旧実装（style.css #header.scrolled）だと、
     2段ヘッダー化で高さの差（約212px→60px）が大きくなり、スクロールを戻した際に
     ページ内容が急にずれる「ジャンプ」が発生していた。position:stickyに統一し、
     常にドキュメントフロー内で高さを確保することでジャンプを解消する。
     sticky指定は#header自体ではなく外側の#masthead-wrap（header.php側でidを付与）に置く。
     #headerの親<header>タグは中身が#header 1つだけで高さが#headerと同じになるため、
     sticky対象を#headerのままにすると「くっつける余地」が無く、少しスクロールしただけで
     すぐ効かなくなり下層ページ等スクロール量が多いページで追従しなくなっていた。
     #masthead-wrapの親は#page（ページ全体の高さ）なので、そちらにstickyを付けることで
     ページ全体を通して追従するようにする。 */
  #masthead-wrap {
    position: sticky;
    top: 0;
    z-index: 3;
  }
}

/* ==========================================================
   2026-07 リニューアル: トップページ「当院の手術実績」（#results）
   konnoのstyle-new.css（#results関連）を移植・調整
   ========================================================== */
#results .container-base {
  padding: 80px 0 100px;
}
#results .d-flex {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.results-inner {
  text-align: center;
  margin-bottom: 30px;
}
.results-inner img {
  max-width: 130px;
  margin-bottom: 10px;
}
.results-inner p {
  position: relative;
  font-size: 2.3rem;
  text-align: center;
}
.results-inner p small {
  font-size: 1.4rem;
  margin-left: 0.4rem;
}
.results-inner p::before,
.results-inner p::after {
  display: inline-block;
  /* 2026-09 改修: konnoの青(#1284cb)が残っていたので、アイコンの文字色と同じひかるの濃緑に統一 */
  color: #16874f;
}
.results-inner p::before {
  content: '「';
  margin-right: 8px;
}
.results-inner p::after {
  content: '」';
  margin-left: 8px;
}
@media screen and (min-width: 768px) {
  .results-inner {
    width: 20%;
  }
}

/* ---- スクロール時の圧縮（header-top / header-bottom を横並びに） ---- */
@media screen and (min-width: 768px) {
  #header.scrolled {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #header.scrolled .header-top {
    height: 60px;
  }
  #header.scrolled .header-bottom {
    padding-bottom: 0;
  }
  #header.scrolled .header-bottom ul.menu-items > li {
    margin-left: 16px;
  }
  #header.scrolled .header-bottom li a.menu-parent {
    font-size: 1.3rem;
  }
}

/* ==========================================================
   2026-07 リニューアル: 診療案内ページ「日次別混雑状況」（#crowd-info）
   konnoのstyle-new.css（混雑表関連）を移植
   ========================================================== */
.crowd {
  padding: 60px 0 100px;
}
.crowd__inner {
  padding: 3.5rem;
  background: #f0f8fe;
  border-radius: 10px;
  max-width: 940px;
  margin: 0 auto;
}
.crowd__title {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: #333;
}
/* 2026-07-22 修正: タブレット幅（〜1024px前後）でページ全体に横スクロールが出ていた対策。
   #crowd-info の .const-wrap は縦書き見出し(.ttl-vertical)と横並びのflexアイテムだが、
   共通CSSの `.const-wrap{width:100%}`（style.css 1298行）でコンテナ全幅を取るうえ、
   flexアイテム既定の min-width:auto が効いて縮まず、見出しの幅ぶん右にはみ出していた。
   min-width:0 で縮められるようにすると、はみ出しが解消し、
   広いテーブルは本来の想定どおり .table-scroll の中で横スクロールする。
   ※診療時間(#medical-wrap)側の .const-wrap は元から正しく縮んでいるため触らない。 */
#crowd-info .const-wrap {
  min-width: 0;
}

.table-scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
}
.crowd-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 30px;
}
.crowd-table thead th {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  border-bottom: 1px solid #fff;
}
.crowd-table__th,
.crowd-table__time,
.crowd-table td {
  padding: 10px 0;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #fff;
}
.crowd-table__time {
  padding-left: 10px;
}
.crowd-table td:not(:first-child) {
  padding-left: 6px;
}
.crowd-table tbody tr:last-child th,
.crowd-table tbody tr:last-child td {
  border-bottom: 0;
}
.crowd-table__th--time,
.crowd-table__time {
  text-align: left;
  white-space: nowrap;
  width: 130px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.05em;
}
.crowd-table__th.crowd-table__th--clock {
  color: #4b98d2;
  display: flex;
  align-items: center;
  gap: 5px;
  padding-left: 10px;
}
.clock {
  background-image: url(../img/clock-icon.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 16px;
  height: 16px;
  display: inline-flex;
}
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  padding: 8px 20px;
  border-radius: 20px;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
  box-sizing: border-box;
  color: #fff;
}
.badge--heavy {
  background: #cd2828;
}
.badge--busy {
  background: #ffa143;
}
.badge--normal {
  background: #ffeb68;
  color: #333;
}
.badge--empty {
  background: #4b98d2;
}
.badge--off {
  background: #e5e5e5;
  color: #333;
}
.crowd__notes {
  margin-top: 20px;
  padding-left: 1em;
}
.crowd__notes li {
  position: relative;
  padding-left: 1.4em;
  color: #333;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.2;
}
.crowd__notes li:not(:first-child) {
  margin-top: 6px;
}
.crowd__notes li::before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
  color: #4b98d2;
}
@media (max-width: 767px) {
  .crowd {
    padding: 3rem 0.5rem;
  }
  .crowd__inner {
    padding: 3rem 1.5rem;
  }
  .crowd__title {
    font-size: 2rem;
  }
  .crowd-table thead th {
    font-size: 1.4rem;
  }
  .badge {
    font-size: 1.3rem;
  }
  .crowd-table__th--time,
  .crowd-table__time {
    width: 110px;
    font-size: 1.4rem;
  }
  .crowd__notes {
    padding-left: 0;
  }
  .crowd__notes li {
    font-size: 1.4rem;
  }
}

/* ==========================================================
   2026-07 リニューアル: トップページ「当院が選ばれる4つの理由」（#reason）
   削除済み#index-messageで使っていた.bg-blueの斜め背景（style.css）を#reasonに復活。
   konnoの.bg-blue.bg-blue-top-reasonを踏襲（色はhikaru-eye既存.bg-blueの緑のまま流用）
   ========================================================== */
.bg-blue.bg-blue-top-reason {
  margin-top: -20px;
}

/* ----------------------------------------------------------
   2026-09 改修（項番1）: 4つの理由をカードグリッドに変更
   konno現行の style-new.css（.reason-cards 系）を移植。
   旧レイアウト（画像＋テキストの左右交互）用の指定は style-new.css 側で無効化済み。
   ※番号(span)と見出し(h3)の色は konno の青(#1284CB)ではなく、
     ひかる既存の緑(#20ac67, style-new.css)をそのまま使う。
   ---------------------------------------------------------- */
.reason-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4.0rem;
  max-width: 1040px;
  width: 100%;
  margin-inline: auto;
  padding: 0 2.0rem;
}
.reason-text {
  margin-top: -2.0rem;
}
/* 2026-09 改修: 同じ行のカードで白ボックスの高さを揃える（ユーザー指示）。
   グリッドアイテムは行の高さまで伸びるので、その高さを .reason-text-inner まで通す。 */
.reason-cards > div {
  height: 100%;
}
.reason-text {
  flex: 1 1 auto;
  display: flex;
}
.reason-text-inner {
  flex: 1 1 auto;
  padding: 2.4rem 3rem;
  min-height: 286px;
}
.reason-text-inner span {
  top: -5.15rem;
}
.reason-text-inner h3 {
  margin-bottom: 1.2rem;
  letter-spacing: 0;
}
.reason-text-inner p {
  line-height: 1.6;
}
@media screen and (max-width: 767px) {
  .reason-cards {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .reason-text-inner {
    padding: 2.2rem 2rem;
    min-height: unset;
  }
}

/* ==========================================================
   2026-09 改修（項番4）: 診療方針（medical-policy/）の写真カラム
   konno style.css の .clinic-read / .clinic-read-img-wrap を移植。
   旧レイアウト（.clinic-read の背景画像＋白グラデーション）は style.css 側で無効化済み。
   ※konnoは `img:not(last-child)`（コロン抜けで全imgに適用される誤記）だが、
     ここは意図どおり2枚目以降にだけ余白を付ける。
   ========================================================== */
.clinic-read {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
}
.clinic-read-img-wrap {
  width: 40%;
  flex-shrink: 0;
  z-index: 2;
}
.clinic-read-img-wrap img {
  display: block;
  width: 100%;
  height: auto;
}
.clinic-read-img-wrap img:not(:first-child) {
  margin-top: 20px;
}
@media screen and (max-width: 767px) {
  .clinic-read {
    flex-direction: column;
    padding-bottom: 60px;
  }
  .clinic-read-img-wrap {
    width: 100%;
  }
}

/* 2026-09 改修（項番5）: 理事長メッセージのバッジ。
   既存の img/icn-message.svg は「はじめまして。院長の芳田奈津代です。」（ひかるの院長）の画像で、
   理事長（今野泰宏）のメッセージに付くと表記が食い違う。ユーザー指示により
   画像ではなく HTML＋CSS（.message-badge）で作り、文言を直接編集できるようにした。 */
#index-message .message-main:after {
  content: none;
}
/* konno本番と同値に（ひかるのstyle.cssは 0.6 で、白パネルが濃く出ていた） */
#index-message .message-box {
  background: rgba(255, 255, 255, 0.4);
}
.message-badge {
  position: absolute;
  left: -80px;
  top: -32px;
  width: 176px;
  height: 176px;
  box-sizing: border-box;
  border: 2px solid #20ac67;
  border-radius: 50%;
  background: #fff;
  color: #20ac67;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: 0.08em;
  z-index: 2;
}
@media screen and (max-width: 1504px) {
  /* 既存の .message-main:after と同じ位置調整に合わせる */
  .message-badge {
    left: -30px;
  }
}
@media screen and (max-width: 767px) {
  .message-badge {
    left: 0;
    top: -20px;
    width: 140px;
    height: 140px;
    font-size: 1.2rem;
    line-height: 1.9;
  }
}

/* ==========================================================
   2026-07 リニューアル: お客様の声（#user-voice）
   konno style-new.css の .user-voice 系を移植（白内障・ICLページ末尾のスライダー）。
   konno側は slick を上書きするため !important を多用していたが、
   本テーマの方針（!important禁止）に従い、すべて「.user-voice 」プレフィックスの
   詳細度(0,2,x)で slick.css/slick-theme.css(0,1,x)に勝たせて !important 無しで実装。
   ※.slick-track のみ .slick-slider .slick-track と同値(0,2,0)だが、
     style2026.css は slick.css より後に読み込まれるため読込順で勝つ。
   スライダー初期化は js/main.js（.js-user-voice-cards-slider）側。
   ========================================================== */
.user-voice {
  padding: 10rem 0;
  overflow: hidden;
}

.user-voice__container {
  max-width: 1320px;
  width: 100%;
  margin-inline: auto;
  padding: 0 2.0rem;
}

.user-voice .slick-track {
  display: block;
}
.user-voice .slick-slide {
  height: auto;
}

.user-voice__cards {
  margin-top: 9.0rem;
  -webkit-user-select: text;
  user-select: text;
}

.user-voice__card {
  position: relative;
  margin-top: 9.0rem;
  padding: 4.0rem 3.0rem 3.0rem;
  background-color: #fff;
  border-radius: 1.0rem;
  z-index: 1;
}

.user-voice__card.user-voice__card--skyblue {
  background-color: #E5F3FC;
}

.user-voice__card-img {
  position: absolute;
  width: 115px;
  height: 115px;
  top: -9.0rem;
  left: 0;
}

.user-voice__card-title {
  position: absolute;
  content: '';
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0;
  color: #4B98D2;
  top: -2.0rem;
  left: 9.0rem;
}

.user-voice__card-text {
  font-size: 1.8rem;
  font-weight: 400;
  color: #333333;
  line-height: 1.9;
  letter-spacing: 0;
}

@media (max-width: 767px) {
  .user-voice__container {
    padding: 0;
  }
  .user-voice__cards {
    display: block;
    transform: translateZ(0);
    will-change: transform;
    margin-top: 3.0rem;
  }
  .user-voice__card {
    padding: 3.5rem 2.0rem 2.5rem;
  }
  /* slickのクリップを解除 */
  .user-voice .slick-list {
    overflow: visible;
  }
  .user-voice__card-img {
    width: 8.0rem;
    height: 8.0rem;
    top: -5.5rem;
  }
  .user-voice__card-title {
    font-size: 1.6rem;
    top: -0.5rem;
    left: 7.0rem;
  }
  .user-voice__card-text {
    font-size: 1.5rem;
  }
}

/* dots 全体 */
.user-voice .slick-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  bottom: -50px;
}

/* li の余白を消す */
.user-voice .slick-dots li {
  margin: 0;
  width: auto;
  height: auto;
}

/* ボタン共通 */
.user-voice .slick-dots li button {
  padding: 0;
}

/* ● の本体 */
.user-voice .slick-dots li button:before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #D9D9D9;
  opacity: 1;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}

/* アクティブ */
.user-voice .slick-dots li.slick-active button:before {
  background-color: #55A3D4;
  width: 10px;
  height: 10px;
}

/* ==========================================================
   2026-07 リニューアル: 診療案内「受診について」（#first）
   konno style-new.css(316-790行)の visit-about / specialist-clinic /
   reception-hours / medical-flow / pay-method / prescription 系を移植。
   構造はkonnoのまま、**色だけひかるの配色に置換**（クライアント指示）:
     konno #1284CB(見出し・強調) → #16874f（ひかる濃緑）
     konno #4B98D2(見出し下線)   → #20ac67（ひかるメイン緑）
     konno #55a3d4/#429ad2(ボタン) → #16874f（既存 .notebox.one-flex .btn-blue a と同色）
     konno #F0F8FE/#DCEFFF(淡色ボックス) → #dff7ed（ひかる既存の淡緑）
     konno #9CCEF9(処方箋ラベル) → #82c7a5（ひかる既存の緑）
   ※konnoの `margin-bottom:0!important` は使わず、詳細度を上げて対応（!important禁止方針）。
   ========================================================== */

.visit-about__content + .visit-about__content {
  margin-top: 8.0rem;
}

.visit-about__content-box-flex {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 3.0rem;
}

.visit-about__content-box {
  background-color: #dff7ed;
  padding: 3.0rem;
  margin-top: 3.0rem;
  border-radius: 1.0rem;
}

.visit-about__content-box-flex.col2 .visit-about__content-box {
  width: 50%;
  margin-top: 0;
}

.visit-about__content-box.visit-about__content-box--border {
  background-color: #fff;
  border: 1px solid #CCCCCC;
}

.visit-about__content-box-title {
  font-family: "Noto Sans Japanese", sans-serif;
  font-size: 2.0rem;
  font-weight: 500;
  line-height: 1.4;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid #CCCCCC;
}

/* konnoは margin-bottom:0!important だったが、詳細度を上げて!important無しで同等にする */
.visit-about__content .visit-about__content-box .visit-about__content-box-subtitle {
  font-family: "Noto Sans Japanese", sans-serif;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.9;
  margin-top: 1.5rem;
  margin-bottom: 0;
  color: #16874f;
}

.visit-about__content-box-subtitle + ul {
  margin-top: 0.6rem;
}

.visit-about__content-box.visit-about__content-box--border .visit-about__content-box-title {
  color: #16874f;
}

.visit-about__content-box-list {
  margin-top: 0.6rem;
}

.visit-about__content-box.visit-about__content-box--border .visit-about__content-box-list {
  margin-top: 2.0rem;
}

.visit-about__content-box-text {
  margin-top: 1.5rem;
}

.visit-about__text {
  margin-top: 3.0rem;
}

.visit-about__content-box-note {
  background-color: #dff7ed;
  padding: 1.5rem;
  line-height: 1.9;
  margin-top: 1.5rem;
}

@media screen and (max-width: 767px) {
  .visit-about__content-box-flex {
    flex-direction: column;
  }
  .visit-about__content-box-flex.col2 .visit-about__content-box {
    width: 100%;
  }
  .visit-about__content-box {
    padding: 2.5rem 1.5rem;
  }
}

/* 専門外来のボタン */
.specialist-clinic .btn-blue {
  margin-top: 3.0rem;
}

.specialist-clinic .btn-blue a {
  background: #16874f;
  max-width: 308px;
  width: 100%;
  padding: 1.2rem 1.0rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 3.0rem;
}

/* 優先診療チケット（konnoの reception-hours 系を流用） */
.reception-hours__box {
  background-color: #dff7ed;
  padding: 2.0rem 6.0rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4.5rem;
  margin-top: 3.0rem;
}

.reception-hours__box-label {
  padding: 0.6rem 0;
  color: #16874f;
  font-size: 2.0rem;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0;
}

.reception-hours__box-value {
  font-weight: 500;
}

.reception-hours__detail {
  margin-top: 3.0rem;
}

.reception-hours__detail a.btn-blue {
  max-width: 320px;
  width: 100%;
  padding: 1.2rem 1.0rem;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: #16874f;
}

.reception-hours__detail a.btn-blue img {
  margin-right: 10px;
}

.reception-hours__detail-subtitle {
  display: inline-block;
  font-family: "Noto Sans Japanese", sans-serif;
  font-size: 2.0rem;
  font-weight: 500;
  line-height: 1.4;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid #CCCCCC;
  color: #16874f;
  margin-top: 3.0rem;
}

@media screen and (max-width: 767px) {
  .reception-hours__box {
    flex-direction: column;
    display: block;
    padding: 1.5rem 3.0rem;
  }
  .reception-hours__box-label,
  .reception-hours__box-value {
    text-align: center;
  }
  .reception-hours__detail a.btn-blue {
    margin-top: 1.5rem;
  }
}

/* 診察の流れ */
.medical-flow {
  padding: 8.0rem 0;
}

.medical-flow__inner {
  padding: 0 2.0rem;
}

.medical-flow__title {
  position: relative;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  padding-bottom: 1.0rem;
}

.medical-flow__title::after {
  position: absolute;
  content: '';
  width: 45px;
  height: 3px;
  border-radius: 2px;
  background-color: #20ac67;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}

.medical-flow__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4.0rem;
  max-width: 1040px;
  width: 100%;
  margin-inline: auto;
  padding: 0 2.0rem;
  margin-top: 6.0rem;
}

.medical-flow__card-body {
  margin-top: -2.0rem;
}

.medical-flow__card-body-inner {
  position: relative;
  background-color: white;
  border-radius: 3rem;
  padding: 2.4rem 3rem;
  min-height: 286px;
}

.medical-flow__card-number {
  position: absolute;
  top: -5.15rem;
  left: 3rem;
  font-size: 4.8rem;
  color: #16874f;
  font-weight: 500;
}

.medical-flow__card-title {
  font-size: 2.3rem;
  color: #16874f;
  margin-bottom: 1.2rem;
  letter-spacing: 0;
}

/* 2026-07-22: クライアントから実写真（step01〜04.png / 960x480）が支給されたため、
   暫定でアイコンを流用していた際の高さ揃え指定は撤去。4枚とも同寸なのでkonnoと同じ挙動になる。
   画像がカード幅を超えないよう max-width だけ担保する。 */
.medical-flow__card-img img {
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 767px) {
  .medical-flow__cards {
    grid-template-columns: 1fr;
    padding: 0;
    gap: 4.0rem;
    margin-top: 6.0rem;
  }
  .medical-flow__card {
    position: relative;
  }
  /* konnoはSP用に別画像（step0X-sp.png / 200x200の正方形アイコン）を<picture>で出し分け、
     カード右上に100pxで浮かせる作りになっている。
     ひかるは横長写真（960x480）1種しか無いため同じ指定だと100x50pxまで潰れてしまうので、
     SPではPCと同じ「カード幅いっぱいの写真を上に置く」積み上げレイアウトにする。
     ※将来SP用の正方形アイコンを用意するならkonnoの元指定に戻してよい。 */
  .medical-flow__card-img {
    position: static;
    right: auto;
    top: auto;
  }
  .medical-flow__card-img img {
    width: 100%;
  }
  /* min-height:286px はPCの2カラムでカード高さを揃えるための指定。
     SPは1カラムで揃える必要がなく、そのままだと本文下に94〜122pxの余白が出るため解除する。 */
  .medical-flow__card-body-inner {
    padding: 2.2rem 2rem;
    min-height: 0;
  }
  .medical-flow__card-number {
    left: 1.5rem;
    font-size: 3.2rem;
    top: -3.15rem;
  }
  .medical-flow__card-title {
    font-size: 1.8rem;
  }
}

/* 支払い方法について（ひかるはクレジットカードのみのため1カラム運用） */
.pay-method__container {
  margin-top: 1.0rem;
  padding: 5.0rem 8.0rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.0rem;
}

.pay-method__container.pay-method__container--single {
  grid-template-columns: 1fr;
  justify-items: center;
}

.pay-method__container.pay-method__container--single .pay-method__box {
  max-width: 520px;
  width: 100%;
}

.pay-method__box {
  background-color: #fff;
  border: 1px solid #CCCCCC;
  box-sizing: border-box;
  padding: 2.5rem 2.0rem;
  text-align: center;
}

.pay-method__box + .pay-method__box {
  margin-top: 2.0rem;
}

.pay-method__left {
  justify-content: space-between;
}

.pay-method__left,
.pay-method__right {
  display: flex;
  flex-direction: column;
}

.pay-method__right .pay-method__box {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.pay-method__box-title {
  font-family: "Noto Sans Japanese", sans-serif;
  font-size: 2.0rem;
  font-weight: bold;
  line-height: 1.4;
  background-color: #dff7ed;
  text-align: center;
  padding: 0.3rem 1.0rem;
  margin: 0 auto;
  width: 100%;
}

.pay-method__box-title br {
  display: none;
}

.pay-method__box-img {
  margin-top: 1.5rem;
}

.pay-method__box-img.pay-method__box-img--credit {
  width: 88%;
}

@media screen and (max-width: 1024px) {
  .pay-method__container {
    padding: 4.0rem clamp(2.5rem, -3.125rem + 11.72vw, 4.375rem);
  }
  .pay-method__box-title br {
    display: block;
  }
}
@media screen and (max-width: 767px) {
  .pay-method__container {
    padding: 4.0rem 3.0rem;
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 430px) {
  .pay-method__container {
    padding: 3.0rem 2.0rem;
  }
}

/* 処方箋について */
.prescription__container {
  background-color: #F2F4F5;
  padding: 3.0rem 6.0rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3.0rem;
  margin-top: 1.0rem;
}

/* 「発行日から4日間」（本文・枠内の2箇所）。
   支給シートは赤字だったが、konnoが赤ではなくブランド色（青 #1284CB）で強調しているため、
   ひかるも同じ考え方でブランド色の緑にする（ユーザー確定 2026-07-22）。 */
.prescription__text span {
  color: #16874f;
  font-weight: bold;
}

.prescription__left {
  border-radius: 10px;
  border: 1px dashed #16874f;
  padding: 3.0rem;
}

.prescription__left-text span {
  color: #16874f;
  font-weight: bold;
}

.prescription__day-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.0rem;
}

.prescription__day-item {
  display: flex;
  flex-direction: column;
  min-width: 150px;
}

.prescription__day-item-label,
.prescription__day-item-value {
  padding: 1.0rem;
  text-align: center;
}

.prescription__day-item-label {
  background-color: #82c7a5;
  border-top-left-radius: 1.0rem;
  border-top-right-radius: 1.0rem;
}

.prescription__day-item-value {
  background-color: #fff;
  border-bottom-left-radius: 1.0rem;
  border-bottom-right-radius: 1.0rem;
}

.prescription__day-item-value .red {
  color: #CB1212;
  font-weight: 500;
}

/* 土曜=青／日祝=赤 はカレンダーの慣例表記なのでブランド色に置換せずkonnoのまま維持する */
.prescription__day-item-value .blue {
  color: #1284CB;
  font-weight: 500;
}

/* 期限切れ枠（konnoの .prescription__right 相当）。ラベルは有効期限内より淡くする */
.prescription__right .prescription__day-item-label {
  background-color: #dff7ed;
}

.prescription__right-text {
  text-align: center;
  color: #CB1212;
  font-weight: 500;
}

@media screen and (max-width: 767px) {
  .prescription__container {
    flex-direction: column;
    padding: 2.75rem 2.0rem;
    gap: 2.0rem;
  }
  .prescription__left {
    width: 80%;
  }
  .prescription__left-text {
    text-align: center;
  }
  .prescription__day-items {
    flex-direction: column;
    margin-top: 2.5rem;
  }
}

/* 「・」始まりのリスト（konno style.css 4441-4458行 相当）。
   ひかるには .list-dot が無く、そのままでは箇条書きの「・」が出ないため移植。 */
ul.list-dot li {
  position: relative;
  margin-left: 0.5rem;
  line-height: 1.9;
  text-indent: -0.8em;
  padding-left: 1.0rem;
}

ul.list-dot li:before {
  content: "・";
  color: #333333;
}

ul.list-dot li:not(:first-child) {
  margin-top: 1.0rem;
}

/* 「※」始まりの注記リスト（konno style.css 4460-4473行 相当） */
ul.list-reference-mark li {
  position: relative;
  margin-left: 1.5rem;
  line-height: 1.9;
  text-indent: -1.4em;
  padding-left: 1.0rem;
}

ul.list-reference-mark li:before {
  content: "※";
  color: #333333;
  margin-right: 0.3rem;
}

/* SP専用改行（konno style.css 4-11行 相当）。
   ひかるに .md-only が無く、`<br class="md-only">` がPC幅でも改行してしまい
   「処方箋の有効期限は/発行日から4日間です。/（土日祝含む）」が3行に割れていたため移植。 */
.md-only {
  display: none;
}

@media screen and (max-width: 767px) {
  .md-only {
    display: block;
  }
}

/* 受診について内の強調（シートで赤字指定されている箇所用） */
#first .red {
  color: #CB1212;
}

/* 「お持ちいただく物」内の外部リンク（マイナ保険証について_厚生労働省）。
   既定では本文と同じ #333 でリンクと分からないため、ひかるのメイン緑 #20ac67 を当てる。
   ボタンの #16874f より一段明るい緑（ひかる既存の配色）。 */
#first .notebox dd a {
  color: #20ac67;
}

#first .green {
  color: #16874f;
  font-weight: bold;
}

/* 院内紹介（clinic/）のサムネイルスライダー矢印のはみ出し対策。
   style.css の .slick-prev/.slick-next{left/right:-32px}（幅28px）で矢印がスライダーの外に出るため、
   画面の左右余白が32pxに満たない幅（SP〜タブレット〜1024px前後）で右に1〜14pxはみ出し横スクロールが出ていた。
   サムネイル列を矢印1つ分（34px）内側に寄せ、矢印を親（.container-base）の内側に収める。 */
@media screen and (max-width: 1199px) {
  #thumbnail_slider {
    margin-left: 34px;
    margin-right: 34px;
  }
}