@charset "UTF-8";

/* ============================================================
   AGA アクセス下層 — renewal.css  (AGA-85)

   /operation/aga/access/<院>/ の各ページを AGA TOP
   (/operation/aga/) のトンマナへ寄せるための上乗せスタイル。

   読み込み順（各ページの <head> 末尾）:
     import.css → common.css → top/css/style.css
       → <院>/css/style.css → access/css/style.css
       → common/202607/css/parts.css   ← ヘッダー/フッター/追従CTA
       → access/css/202609/renewal.css ← 本ファイル（最後）

   設計方針:
     * 旧 common.css 体系を残したまま「後乗せ」する。
       グローバルリセット（*, html, body, img, ul, a）は持たない。
       持つと旧セクション（基本情報テーブル・スライダー・料金表）が
       一斉に崩れるため。common/202607/css/parts.css と同じ考え方。
     * 新規セクション（.case_sp / .reason-cards）は配下に
       自前のリセットを持ち、旧 CSS の影響を受けないようにする。
     * 旧セクションのトンマナ調整は「見出し・ボタン・アクセント色」に
       絞る。レイアウト構造には手を入れない。

   収録:
     1. Design Tokens
     2. CASE     (.case_sp)        … AGA TOP「6. CASE」の移植
     3. REASON   (.reason-cards)   … AGA TOP「4. REASON」の移植
     4. 旧セクションのトンマナ調整（見出し / ボタン / アクセント色）

   参照元: /operation/aga/common/202607/css/style.css
     - 4. REASON   (L1025-1120 / PC L2591-2596)
     - 6. CASE     (L1516-1636 / PC L2466-2494, L2668-2712)

   【重要】参照元を変更したときは本ファイルも合わせて直すこと。
   片方だけ直すと AGA TOP とアクセス下層で表示がズレる。
   （parts.css が同じ理由で同じ注意書きを持っている）
   ============================================================ */


/* ------------------------------------------------------------
   1. Design Tokens

   style.css の :root と同値。parts.css も同名の5件
   (--gold / --gold-btn / --beige / --white / --blue) を持つが
   値が同じなので衝突しない。ここでは本ファイルが使う分を足す。
------------------------------------------------------------ */
:root {
  --gold:       #bba171;
  --gold-btn:   #a17114;
  --brown:      #3e3a39;
  --beige:      #e0d8ce;
  --cream:      #f8f6f3;
  --cream-deep: #fffbf4;
  --white:      #ffffff;
  --blue:       #0077e1;
  --section-px: 16px;
}


/* ============================================================
   2. CASE  (.case_sp)

   AGA TOP の症例セクションをそのまま持ってきたもの。
   マークアップは /operation/aga/index.php の
   <section class="case_sp" id="case"> と同一。
   ============================================================ */

/* 2-0. セクション配下のリセット
   旧 common.css は box-sizing をグローバルに持たない
   (html, body のみ)。padding が width に加算されて
   .case-info / .case-more-btn の横幅が溢れるため配下で補う。
   typho.css の「* { margin:0; padding:0 }」は効いているが、
   自前で持っておく方が読み込み順に依存しない。 */
.case_sp,
.case_sp *,
.case_sp *::before,
.case_sp *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.case_sp {
  background: var(--white);
  padding: 40px var(--section-px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: #333;
  font-family: "Noto Sans JP", "Noto Sans", system-ui, -apple-system, "Hiragino Sans", "Segoe UI", "Meiryo", sans-serif;
  line-height: 1.6;
}
.case_sp a {
  color: inherit;
  text-decoration: none;
}
.case_sp img {
  display: block;
  max-width: 100%;
  height: auto;
}
.case_sp dl,
.case_sp dt,
.case_sp dd {
  /* 旧 common.css の .detail_info 系（dt を float させる指定）が
     当たらないよう、レイアウトは配下の grid で明示する。 */
  float: none;
  width: auto;
}

.case-h2 { text-align: center; }
.case-heading {
  font-size: 24px;
  font-weight: 700;
  color: var(--brown);
  line-height: 32.4px;
  text-align: center;
  /* 旧 .shin_ttl（30px / #0077e1 / margin-bottom:31px）を
     TOP と同じ見え方に戻すため letter-spacing も明示する。 */
  letter-spacing: normal;
  margin: 0;
}

.case-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.case-item {
  border-radius: 8px;
  overflow: hidden;
}
.case-item--bordered {
  border-radius: 8px;
  overflow: visible;
  padding: 1px;
}

.case-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 180px;
}
.case-img-wrap {
  position: relative;
  overflow: hidden;
  height: 180px;
}
.case-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case-label {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  padding: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--white);
  text-align: center;
  letter-spacing: 0.88px;
}

.case-info {
  background: var(--cream);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.case-dl {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.case-dl-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
}
.case-dl-row dt {
  font-size: 12px;
  font-weight: 700;
  color: #333;
  line-height: 20.4px;
}
.case-dl-row dd {
  font-size: 12px;
  color: #333;
  line-height: 20.4px;
}
.case-risk {
  font-size: 11px;
  color: #333;
  line-height: 16px;
  border-top: 1px solid var(--beige);
  padding-top: 9px;
}

.case-more-wrap {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}
.case-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 54px;
  border: 1px solid var(--brown);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--brown);
  letter-spacing: 0.6px;
  line-height: 25.5px;
  white-space: nowrap;
}
.case-more-btn svg { flex-shrink: 0; }


/* --- スクロールバー用の余白を AGA TOP と同じ挙動にする ---
   AGA TOP は common/202607/css/style.css:2713（@media min-width:768px 内）で
   html に scrollbar-gutter: stable を指定しており、PC では常に 15px ぶんの
   余白が確保される（body 幅が 1280px のビューポートで 1265px になる）。
   アクセス下層は同ファイルを読まないため確保されず、PC のコンテンツ幅が
   TOP より 15px 広くなっていた。TOP と同じ条件・同じ指定で揃える。
   SP（767px 以下）は TOP 側も指定が無いため入れない。 */
@media (min-width: 768px) {
  html {
    scrollbar-gutter: stable;
  }
}

/* --- 全幅で表示されていた4ブロックをコンテンツ幅に収める ---
   ①基本情報下の写真スライダー(.shin_slider01) ②マップ(.shin_map)
   ③道のり下のスライダー(.shin_slider02) ④その他の治療(#sec_other の c_slider)
   の4つはビューポート幅いっぱいに広がっていた。特長カードと同じ
   「左右 40px(PC) / 16px(SP)・内容の上限 1280px・中央寄せ」に揃える。

   max-width に padding ぶんを足しているのは box-sizing: border-box のため。
   1280px + 80px(PC) / 1280px + 32px(SP) とすることで、内容の幅が
   .reason-cards と一致する（1280pxビューポートで 1185px、1440pxで 1280px）。

   ②は .g_map ではなく外側の .shin_map に指定する。マップは
   .g_map を基準にした position:absolute の iframe（レスポンシブ埋め込み）で、
   .g_map に padding を付けても絶対配置の iframe は padding box いっぱいに
   広がるため内側に入らない。 */
.shin_slider01,
.shin_map,
.shin_slider02,
#sec_other > .c_slider.slider_02.o_slide {
  box-sizing: border-box;
  width: auto;
  max-width: calc(1280px + 32px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 769px) {
  .shin_slider01,
  .shin_map,
  .shin_slider02,
  #sec_other > .c_slider.slider_02.o_slide {
    max-width: calc(1280px + 80px);
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* スライダーのドットは position:absolute + width:100% で、
   親に padding を付けると padding box 幅のまま content box の左端から
   描画されるため右へはみ出す（375px で 16px の横スクロールが出た）。
   left/right を 0 に倒して padding box いっぱいに収める。 */
#sec_other > .c_slider.slider_02.o_slide .slick-dots,
.shin_slider01 .slick-dots,
.shin_slider02 .slick-dots {
  width: auto;
  left: 0;
  right: 0;
}

/* --- 特長セクションのコンテンツ幅を AGA TOP に合わせる ---
   AGA TOP は #reason.reason_sp が「全幅 + 左右パディング 40px(PC) / 16px(SP)」で、
   .reason-cards の幅は 1185px(1280px時) / 343px(375px時) になる。
   アクセス下層は旧レイアウトの .inner.inner-fluid（1150px 枠 + 15px/17px）に
   入っているため 1120px / 341px と狭かった。TOP と同じ見え方にするため、
   このセクションだけ枠の制約を外して TOP と同じパディングにする。
   他セクションの .inner-fluid は触らない（旧レイアウトのまま）。 */
.tree-feature > .inner.inner-fluid.tree-fea {
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 769px) {
  .tree-feature > .inner.inner-fluid.tree-fea {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* ============================================================
   3. REASON  (.reason-cards)

   AGA TOP の <div class="reason-cards"> をそのまま持ってきたもの。
   アクセス下層では既存の
   <section class="tree-feature"> 内（見出し「ゴリラクリニックの
   3つの特長」の下）に置き換えて使う。
   見出し・下部CTAは既存のものを残すため、TOP の
   .reason-h2 / .reason-cta-btn は収録しない。
   ============================================================ */

.reason-cards,
.reason-cards *,
.reason-cards *::before,
.reason-cards *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.reason-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  /* AGA TOP の .reason-cards と同じ上限幅・中央寄せ。
     これが無いと 1360px 超のビューポートで TOP より広がる。 */
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  color: #333;
  font-family: "Noto Sans JP", "Noto Sans", system-ui, -apple-system, "Hiragino Sans", "Segoe UI", "Meiryo", sans-serif;
  line-height: 1.6;
}
.reason-cards img {
  display: block;
  max-width: 100%;
  height: auto;
}
.reason-card {
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: linear-gradient(118.43deg, var(--cream-deep) 0%, var(--white) 60%);
  overflow: hidden;
  width: 100%;
  /* 旧 .tree-fea-list li（float / width:50%）の名残を受けないよう
     リスト外の div 構造で使う前提。float は明示的に解除する。 */
  float: none;
}
.reason-card-img {
  width: 100%;
  height: 230px;
  overflow: hidden;
}
.reason-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reason-card-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reason-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  line-height: 25.2px;
  display: flex;
  flex-direction: column;
}
.reason-card-title-gold {
  color: var(--gold);
}
.reason-card-text {
  font-size: 12px;
  color: #333;
  line-height: 20.4px;
}


/* ============================================================
   4. 旧セクションのトンマナ調整

   アクセス下層の既存セクション（基本情報 / 道のり / 総院長紹介 /
   料金表 / よくある質問 / その他の治療）は構造を変えず、
   AGA TOP と揃える意味の大きい「見出し」と「ボタン」だけを
   上書きする。

     旧: 見出し 30px / #0077e1、CTA はゴールドのピル型（角丸50px）
     新: 見出し 24-28px / #3e3a39、CTA は TOP と同じ青・角丸5px

   AGA TOP のコンバージョンボタン（.flow-cta-btn / sticky-cta の
   primary / g_navi-cta）はいずれも青(--blue)・白文字・角丸4-5px。
   ゴールド(--gold)は罫線・見出しアクセント側の色なので、
   CTA はゴールドではなく青へ揃える。

   ※ レイアウト（グリッド・スライダー・テーブル・料金表）には
      触れない。旧 CSS は common.css 5,158行 + top/style.css 1,263行 +
      院別 style.css 1,528行が相互依存しており、構造へ手を入れると
      院別 css を持つ4院（shinjuku / dogenzaka / ginza_annex /
      higashiginza）と shinjuku の css を共用する19院とで
      崩れ方が変わるため。セクション単位の作り直しは別案件。

   ブレークポイントについて:
     旧 CSS は「max-width:768px = SP」、AGA TOP の style.css は
     「min-width:768px = PC」で、768px ちょうどの扱いが逆。
     本節（旧セクション向け）は旧側に合わせて max-width:768px を
     使い、上の 2./3.（TOP から移植した新セクション）は TOP 側に
     合わせて min-width:768px を使う。混ぜると 768px で
     新旧が別々のブレークポイントに落ちる。
------------------------------------------------------------ */

/* 4-1. セクション見出し（.shin_ttl）
   アクセス下層のほぼ全セクションがこのクラスを使う。
   旧: 30px / bold / #0077e1 / line-height:2 / letter-spacing:.6px
   (access/shinjuku/css/style.css L127)

   【margin は触らない】
   .shin_ttl の下余白は箇所ごとに個別指定されており、
     .pri-info .shin_ttl { margin-bottom: 0 }    (同 L817・料金表見出し)
     .shin_ttl.mbadd     { margin-bottom: 45px } (同 L140・道のり見出し)
     @media SP .shin_info .shin_ttl { margin-bottom: 10px } (同 L506)
   はいずれも詳細度 (0,2,0)。ここで `#wrapper .shin_ttl`(1,1,0)に
   margin-bottom を書くと、この3つをまとめて潰してしまう
   （料金表見出しの下に余白が生まれ、説明文の margin と二重に積む）。
   字送りと色だけを寄せ、余白は旧CSSの設計に委ねる。 */
#wrapper .shin_ttl {
  font-family: "Noto Sans JP", "Noto Sans", system-ui, -apple-system, "Hiragino Sans", "Segoe UI", "Meiryo", sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: normal;
  color: var(--brown);
}

/* 4-2. 小見出し（.title_sm）
   旧: 30px / #0077e1 (common.css L1122)。
   .txt_gold は旧 CSS でも #bba171 = TOP の --gold と同値のため、
   色指定は .txt_gold が付いていない側だけを上書きする。 */
#wrapper .title_sm {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--brown);
}
#wrapper .title_sm.txt_gold {
  color: var(--gold);
}

/* 4-3. コンバージョンボタン（.sub-btn a）
   「無料カウンセリング予約はこちら」。
   旧: 495x66px / 26px / background #bba171 / border-radius 50px
   (access/shinjuku/css/style.css L784-810)
   新: TOP の .flow-cta-btn（青 / 角丸5px / 600）に合わせる。
   旧側が color に !important を持つため、こちらも必要。 */
#wrapper .sub-btn a {
  width: 100%;
  max-width: 360px;
  height: 60px;
  border-radius: 5px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--white) !important;
  background-color: var(--blue);
}

/* 4-4. アウトラインボタン（.btn-outline.gray.renew a =「一覧へ戻る」/
   .g_box.faq .btn a =「さらに詳しく」）
   旧: 青塗り or グレー枠・角丸なし (common.css L1168-1300)
   新: TOP の .case-more-btn / .reason-cta-btn に合わせ、
       白地・ブラウン枠・角丸4px。 */
#wrapper .btn-outline.gray.renew a,
#wrapper .g_box.faq .btn a {
  border-radius: 4px;
  border: 1px solid var(--brown);
  color: var(--brown) !important;
  background-color: var(--white);
  font-weight: 700;
  letter-spacing: 0.6px;
}

/* 4-5. 3つの特長セクションの余白
   旧 .feature-01/02/03 が個別に持っていた余白が、reason-cards への
   差し替えで無くなるぶんをセクション側で確保する。 */
#wrapper .tree-feature .tree-fea {
  padding-top: 40px;
  padding-bottom: 40px;
}
#wrapper .tree-feature .consel_btn {
  margin-top: 32px;
}

/* 4-6. SP（旧 CSS のブレークポイントに合わせる） */
@media only screen and (max-width: 768px) {
  #wrapper .shin_ttl {
    font-size: 24px;
  }
  #wrapper .title_sm {
    font-size: 24px;
  }
  #wrapper .sub-btn a {
    max-width: 300px;
    height: 52px !important;
    font-size: 15px;
  }
  #wrapper .tree-feature .tree-fea {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}


/* ============================================================
   PC (min-width: 769px)

   参照元: style.css L2466-2494 / L2591-2596 / L2668-2672

   【AGA TOP との差】TOP の style.css は min-width:768px を PC 境界に
   しているが、本ファイルは 769px を使う。
   アクセス下層が読み込む旧 common.css は max-width:768px を SP 境界に
   しており（#wrapper{min-width:inherit} / .inner{max-width:100%} など
   768px ちょうどを SP 扱い）、ここを 768px にすると 768px の一点だけ
   「本文は SP・新セクションは PC」になる。
   実測では .case-grid が PC の 2カラム(560px×2 + gap24 = 1144px)へ
   切り替わり、768px で横スクロールが 352px 発生していた。
   ============================================================ */
@media (min-width: 769px) {

  /* CASE */
  .case_sp {
    margin-top: 60px;
    margin-bottom: 100px;
    padding-left: 40px;
    padding-right: 40px;
  }
  /* style.css L83-102 の `.case_sp > *{max-width:1280px; margin:0 auto}` 相当。
     .case-grid は自身で 1144px に収まって中央寄せされるため見た目は変わらないが、
     移植元と差を作らないために入れておく（本ファイルは「TOP を変えたら
     ここも直す」運用のため、差分があると次の改修で取り違える）。 */
  .case_sp > * {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }
  .case-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 560px));
    gap: 24px;
    justify-content: center;
  }

  /* REASON */
  .reason-cards {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
  }
  .reason-card { flex: 1 1 280px; }
}

/* ------------------------------------------------------------------
   基本情報下の写真スライダー(.shin_slider01)

   slick(共通 .slider_02 = 中央寄せ・両脇プレビュー・ドット付き)をやめ、
   Swiper 6.5.8 の手動送り(自動再生なし・ドラッグ可・画像の下に
   スクロールバー)に置き換える。JS は js/202609/shin-slider01.js。
   ------------------------------------------------------------------ */
.shin_slider01 .shin_slider01__swiper {
  width: 100%;
  margin-bottom: 42px;
  overflow: hidden;
}

.shin_slider01 .shin_slider01__swiper .swiper-wrapper {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* スクロールバー。Swiper 既定は画像の下端に重なる（position: absolute・
   bottom 3px）ため、画像の下に置き直す。目立たせないよう無彩色にする。
   つまみはブランドルールの --gray-lt（#cacaca）、溝はごく薄いグレー */
.shin_slider01 .shin_slider01__swiper > .swiper-scrollbar {
  position: relative;
  left: 0;
  bottom: auto;
  width: 100%;
  height: 4px;
  margin-top: 20px;
  background: #f0f0f0;
  border-radius: 2px;
}
/* 写真が枠に収まって送る必要がないとき（PC で3枚以下の院）はスクロールバーを出さない。
   is-fit は js/202609/shin-slider01.js が Swiper のロック状態に合わせて付け外しする */
.shin_slider01 .shin_slider01__swiper.is-fit > .swiper-scrollbar {
  display: none;
}
/* 送れないのに「つかむ手」のカーソルが出ないようにする（Swiper が要素に
   インラインで cursor: grab を付けるため !important で上書き） */
.shin_slider01 .shin_slider01__swiper.is-fit {
  cursor: auto !important;
}
.shin_slider01 .shin_slider01__swiper > .swiper-scrollbar .swiper-scrollbar-drag {
  background: #cacaca;
  border-radius: 2px;
  cursor: grab;
}

.shin_slider01 .shin_slider01__swiper .swiper-slide {
  width: 415px;
  max-width: 76vw;
  height: auto;
  list-style: none;
}

.shin_slider01 .shin_slider01__swiper .pic {
  margin: 0;
  padding: 0;
}

.shin_slider01 .shin_slider01__swiper picture {
  display: block;
}

/* 画像の実寸は院ごとに異なる(img/ は FTP 管理でリポジトリ外)。
   参考サイトと同じ 415 x 315 の枠に cover で揃える */
.shin_slider01 .shin_slider01__swiper img {
  display: block;
  width: 100%;
  aspect-ratio: 415 / 315;
  object-fit: cover;
}

@media screen and (max-width: 768px) {
  .shin_slider01 .shin_slider01__swiper {
    margin-bottom: 30px;
  }
}

/* ------------------------------------------------------------------
   「最寄駅から〇〇院までの道のり」のスライダー(.shin_slider02)

   写真スライダー(.shin_slider01)と同じ手動送り（自動再生なし・ドラッグ可・
   画像の下にスクロールバー）にする。旧実装は slick の中央寄せ＋自動再生で、
   説明文を読んでいる途中で次の写真へ送られ、左端には最後の手順が
   のぞいていたため、どちらから読むのか分かりにくかった。
   - 写真は切り抜かず元の比率のまま（道案内の看板・矢印が端に写るため）。
     実寸は 3:2（1500x1000 など）が大半で、銀座ANNEX・立川・名古屋栄の一部が
     約 1.75:1（2208x1264 など）。2026-09-29 に本番の画像153枚で計測
   - 左上に手順番号（ol の順番を CSS カウンターで表示）。形は AGA TOP の
     「来院の流れ」の番号（.flow-step-num）に揃え、色は濃いグレー
   JS は js/202609/shin-slider01.js（.shin_route__swiper も同じ処理で初期化）。
   ------------------------------------------------------------------ */
.shin_slider02 .shin_route__swiper {
  width: 100%;
  overflow: hidden;
}
.shin_slider02 .shin_route__swiper .swiper-wrapper {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: route-step;
}
.shin_slider02 .shin_route__swiper .swiper-slide {
  width: 415px;
  max-width: 76vw;
  height: auto;
  list-style: none;
  counter-increment: route-step;
}
.shin_slider02 .shin_route__swiper .swiper-slide::before {
  content: counter(route-step);
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  box-sizing: border-box;
  border-radius: 15px;
  /* 金（#bba171）に白文字 → 濃いグレーに白文字 → 白地・黒の縁・黒文字
     （2026-09-29 指定）。見出しと同じ #3e3a39 を黒として使う */
  border: 2px solid #3e3a39;
  background: #fff;
  color: #3e3a39;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}
.shin_slider02 .shin_route__swiper .pic {
  margin: 0;
  padding: 0;
}
.shin_slider02 .shin_route__swiper picture {
  display: block;
}
.shin_slider02 .shin_route__swiper img {
  display: block;
  width: 100%;
  height: auto;
}
.shin_slider02 .shin_route__swiper .pic p {
  margin: 12px 0 0;
  padding: 0;
  text-align: left;
  line-height: 1.7;
}
.shin_slider02 .shin_route__swiper > .swiper-scrollbar {
  position: relative;
  left: 0;
  bottom: auto;
  width: 100%;
  height: 4px;
  margin-top: 20px;
  background: #f0f0f0;
  border-radius: 2px;
}
.shin_slider02 .shin_route__swiper.is-fit > .swiper-scrollbar {
  display: none;
}
.shin_slider02 .shin_route__swiper.is-fit {
  cursor: auto !important;
}
.shin_slider02 .shin_route__swiper > .swiper-scrollbar .swiper-scrollbar-drag {
  background: #cacaca;
  border-radius: 2px;
  cursor: grab;
}
/* 旧 shinjuku/css/style.css の下余白（PC 44px / SP 57px）は slick のドットを
   置くためのもの。スクロールバーは枠の中にあるので 0 にし、セクション間の
   空き（PC 180px / SP 80px）を他のセクションと揃える */
#wrapper #tabinfo .shin_slider02 {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------
   PC の本文・表組みの文字サイズを 12px に統一

   SP 側は既に 9〜12px に落としてあるのに、PC だけ 14〜18px のまま残って
   いた（.shininfo_tb は SP 12px / PC 18px）。AGA TOP の本文スケール
   （.tb_blog 12px・dt/dd 12px・注釈 10〜11px）に対しても大きすぎるため、
   PC だけ 12px へ揃える。

   見出しとして使われている p は対象外（.desp-qaattl / .add-ttl /
   .accpage-inner-ttl / .pg_eng_title / .s_pos）。ここまで下げると見出しの
   階層が崩れるため。見出しの大きさはファイル末尾「見出しの大きさ・色を
   AGA TOP の階層に揃える」で別に揃えている。
   ------------------------------------------------------------------ */
@media screen and (min-width: 769px) {
  /* p の既定（common/css/typho.css の `p { font-size: 14px }`）を 12px へ。
     renewal.css はアクセス下層でしか読まないので、AGA TOP など他ページには
     影響しない。クラス付きの見出し（.desp-qaattl など）は詳細度で勝つため
     この指定では下がらない */
  p {
    font-size: 12px;
  }

  /* 院紹介の本文・YouTube 説明文 18px → 12px
     （.txt / .txt_lh は common/css/cmn_style.css の既定） */
  .txt,
  .txt_lh,
  .access_yt .txt,
  .yt_txt {
    font-size: 12px;
  }

  /* 基本情報テーブル（診療時間・住所・電話番号など） 18px → 12px */
  .shininfo_tb tr th,
  .shininfo_tb tr td {
    font-size: 12px;
  }

  /* 行の固定高 91px は 18px・line-height 2（2行=92px）に合わせた値で、
     12px にすると 24px 近い余白が残る。SP と同じく内容なりにする */
  .shininfo_tb tr td {
    height: auto;
  }

  /* 駐車場・バス路線の表 18px → 12px */
  .acc-time-tb tr th,
  .acc-time-tb tr td {
    font-size: 12px;
  }

  /* 道のりスライダーのキャプション 18px → 12px */
  .pic p {
    font-size: 12px;
  }

  /* 駐車場の注記 16px → 12px */
  .map-txt {
    font-size: 12px;
  }

  /* 総院長コメント本文 16px → 12px */
  .col3box .staff_txt {
    font-size: 12px;
  }

  /* 経歴の見出し・項目 14px → 12px */
  .col3_gp .ceo_his .his01 p,
  .col3_gp .ceo_his .his02 p,
  .col3_gp .ceo_his .his01 li,
  .col3_gp .ceo_his .his02 li {
    font-size: 12px;
  }
}

/* ------------------------------------------------------------------
   PC のマップ（.g_map）を正方形に

   元は width: 100%（コンテンツ幅＝最大1280px）× 高さ固定 360px
   （padding-bottom: 360px）の横長で、PC では大きすぎた。
   PC だけ 480px の正方形にして中央に置く。SP は元の指定のまま
   （shinjuku/css/style.css の @media で padding-bottom: 185px。
   375px 幅で 343 x 185 の横長）。
   iframe は .g_map を基準に position:absolute で全面に広がる作りなので、
   高さを aspect-ratio で決めれば中身も追従する。
   ------------------------------------------------------------------ */
@media screen and (min-width: 769px) {
  .shin_map .g_map {
    width: 100%;
    max-width: 480px;
    height: auto;
    padding-bottom: 0;
    aspect-ratio: 1 / 1;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ------------------------------------------------------------------
   PC の基本情報を「マップ（左）＋ 情報（右）」の2カラムにし、
   写真スライダー（.shin_slider01）をその下へ移す

   DOM の並び（23院共通。section.shin_content.basic_info の直下）:
     span.anchorH / h2.shin_ttl / .shin_slider01 / .shin_info / .shin_map
     / .shinjuku_slider（道玄坂・東銀座は無し）
   これを PC だけ grid で並べ替える。SP は DOM どおり（変更なし）。

   列は「左右の余白 / マップ / 間 / 情報 / 左右の余白」。
   全幅の子（見出し・スライダー）は 1 / -1 に置き、各自の既存の
   コンテンツ幅指定（左右 40px・最大 1280px）をそのまま効かせる。
   中央の3列の合計は最大 480 + 40 + 760 = 1280px で、AGA TOP の
   コンテンツ幅と一致する。

   注: section は shinjuku_slider.js が .hide() → .show() するが、
   jQuery 3 の show() はインラインの display を空にするだけなので、
   ここで指定した grid は残る（実測で確認）。
   ------------------------------------------------------------------ */
@media screen and (min-width: 769px) {
  .shin_content.basic_info {
    display: grid;
    grid-template-columns:
      minmax(40px, 1fr)
      minmax(0, 480px)
      40px
      minmax(0, 760px)
      minmax(40px, 1fr);
  }

  /* min-width: 0 が無いと、スライダー（Swiper は複製込みで数千px）の
     min-content がグリッドの列を押し広げ、1280px 幅でも横スクロールが出る */
  .shin_content.basic_info > * {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .shin_content.basic_info > .anchorH       { grid-row: 1; }
  .shin_content.basic_info > .shin_ttl      { grid-row: 2; }
  .shin_content.basic_info > .shin_map,
  .shin_content.basic_info > .shin_info     { grid-row: 3; }
  .shin_content.basic_info > .shin_slider01 { grid-row: 4; }

  /* .shin_slider01 は全幅ブロック用に margin: 0 auto で中央寄せしているが、
     grid の中では auto マージンが stretch を止め、中身（Swiper）の幅まで
     広がってしまう。幅を領域に合わせたうえで justify-self で中央に置く */
  .shin_content.basic_info > .shin_slider01 {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    justify-self: center;
  }
  .shin_content.basic_info > .shinjuku_slider { grid-row: 5; }

  /* 左: マップ（480px の正方形は既存の .shin_map .g_map の指定） */
  .shin_content.basic_info > .shin_map {
    grid-column: 2;
    max-width: none;
    margin: 0 0 60px;
    padding-left: 0;
    padding-right: 0;
  }
  .shin_content.basic_info > .shin_map .g_map {
    margin-left: 0;
    margin-right: 0;
  }

  /* 右: 情報。マップの縦中央にそろえる */
  .shin_content.basic_info > .shin_info {
    grid-column: 4;
    align-self: center;
    margin: 0 0 60px;
  }
  .shin_content.basic_info > .shin_info > .inner {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .shin_content.basic_info .shininfo_block {
    max-width: none;
    margin: 0;
  }
  /* 右カラムは最大 760px。表2つを横に並べると住所・アクセスが3〜8行に
     折り返すため、縦に積む */
  .shin_content.basic_info .shininfo_box {
    width: 100%;
  }

  /* 2カラムでは 480px の地図の隣に置くため、12px だと小さく浮いて見える。
     AGA TOP の本文で使われている上限の 14px にする（右カラムは最大760px
     あり、12〜15px で折り返し行数は変わらないことを実測済み）。
     セル内の注記（銀座ANNEX の p.notes など）は p の 12px のまま */
  .shin_content.basic_info .shininfo_tb tr th,
  .shin_content.basic_info .shininfo_tb tr td {
    font-size: 14px;
  }
}

/* ------------------------------------------------------------------
   セクションの余白と見出しを AGA TOP に揃える

   AGA TOP（common/202607/css/style.css）は全セクション共通で
     PC: padding 40px 0 / margin 60px 0 100px
     SP: padding 40px 0 / margin 0
   見出しは 24px・line-height 1.35（32.4px）。

   アクセス下層は旧デザインの指定がセクションごとに残っていて、
   外側余白が 0/0・0/40・0/60・30/75・30/60・98/-92 とバラバラだった。
   特に #sec_other の -92px（.acc-mt5）で、次の症例の見出しが前の内容に
   6px まで詰まっていた。

   旧指定（shinjuku/css/style.css ほかの .acc-mt1〜9）は多くが
   !important のため、ここでも上書きが必要な箇所に限って !important を
   付けている（ID を含むセレクタで詳細度も上回らせてある）。

   対象: #wrapper 直下の section と、院紹介（「〇〇院について」の青い箱。
   16院にあり、section ではなく div.inner.inner-fluid で置かれている）。
   症例 #case は AGA TOP の指定のまま、
   バナー .banner は見出しを持たないため対象外）と、#content-acc の中の
   特長セクション。基本情報の中の「道のり」（.shinjuku_slider）は
   同じ section の中にあるため、セクション間と同じ空きを margin で作る。
   ------------------------------------------------------------------ */
#wrapper > section:not(#case):not(.banner),
#wrapper > #content-acc > section,
#wrapper > div.inner.inner-fluid {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* 見出し。.acc-mt2 / .acc-mt4 / .acc-mt8 / .acc-mt9 が !important で
   margin を持つため !important で揃える */
#wrapper .shin_ttl,
#wrapper .accpage-section h2.title,
#wrapper #sec_other h2.title_sm {
  font-size: 24px;
  line-height: 1.35;
  margin: 0 0 24px !important;
}

/* セクション末尾の、背景を持たない要素に残っていた下余白。
   セクション間の空きは上の padding / margin で作るので 0 にする
   （アクセスの開閉ブロック 100px（SP 55px）・その他の治療のスライダー 54px） */
#wrapper > section .accord-block:last-child,
#wrapper #sec_other > .c_slider:last-child {
  margin-bottom: 0;
}

/* 総院長のカード（背景・枠なし）の上下 padding 15/25px（PC）が、
   見出しの下と次のセクションの上に余分な空きを足していた */
#wrapper #tabstaff .col3box {
  padding-top: 0;
  padding-bottom: 0;
}

/* 見出しの直下に来る写真スライダー（SP）の padding-top 5px を外し、
   見出し下の空きを他のセクションと同じ 24px にする */
#wrapper #tabinfo > .shin_slider01 {
  padding-top: 0;
}

/* 写真スライダーの下余白は、次の「道のり」側の margin で空きを作るので 0 に */
#wrapper #tabinfo .shin_slider01 .shin_slider01__swiper {
  margin-bottom: 0;
}

@media screen and (min-width: 769px) {
  /* .acc-mt5（#sec_other: 98px 0 -92px）が !important のため。
     バナーは見出しを持たないので padding は付けないが、外側余白は揃える */
  /* 左右は各ブロックのコンテンツ幅指定（margin auto）に任せるため、
     上下だけを指定する */
  #wrapper > section:not(#case),
  #wrapper > #content-acc > section,
  #wrapper > div.inner.inner-fluid {
    margin-top: 60px !important;
    margin-bottom: 100px !important;
  }

  /* セクション間の空き = 前の padding-bottom 40 + margin 100 + 次の padding-top 40 */
  #wrapper #tabinfo > .shinjuku_slider {
    margin-top: 180px;
  }
}

@media screen and (max-width: 768px) {
  #wrapper > section:not(#case),
  #wrapper > #content-acc > section,
  #wrapper > div.inner.inner-fluid {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* セクション間の空き = 前の padding-bottom 40 + 次の padding-top 40 */
  #wrapper #tabinfo > .shinjuku_slider {
    margin-top: 80px;
  }

  /* その他の治療のスライダーは、SP だけドットが箱の外へ 42px はみ出す
     （position: absolute）。はみ出し分を下余白で確保し、次の症例まで
     他と同じ 80px にする */
  #wrapper #sec_other > .c_slider:last-child {
    margin-bottom: 42px;
  }
}

/* ------------------------------------------------------------------
   基本情報テーブル: 見出し列（診療時間・住所など）の色（PC・SP 共通）

   旧デザインの #0077e1（青）→ ゴールド #bba171 → 見出しと同じ #3e3a39。
   ゴールドは白地で約 2.5:1 と淡く、読みにくいとの指摘（2026-09-29）で黒系へ。
   内容の列と区別するため太字は残す。
   ------------------------------------------------------------------ */
.shininfo_tb tr th {
  color: #3e3a39;
  font-weight: 700;
}

/* ------------------------------------------------------------------
   PC の2カラム右側: 上揃え

   情報は地図（480px）の縦中央に置いていたが、上下に 96px ずつ空いて
   浮いて見えたため、地図の上端に揃える。
   （罫線付きのリストも試したが、依頼元の判断で罫線なしとした）
   ------------------------------------------------------------------ */
@media screen and (min-width: 769px) {
  .shin_content.basic_info > .shin_info {
    align-self: start;
  }

  .shin_content.basic_info .shininfo_tb tr th,
  .shin_content.basic_info .shininfo_tb tr td {
    padding: 18px 8px;
    line-height: 1.7;
  }
}

/* ------------------------------------------------------------------
   アクセスの開閉ブロック（#wrapper > section.inner.inner-fluid）と
   院紹介（#wrapper > div.inner.inner-fluid）をコンテンツ幅に揃える

   旧 common.css の .inner { width: 1150px; padding: 0 15px } のまま
   左詰めで、PC では 15〜1135px（他は 40〜1225px / 1280px 幅）に
   なっていた。他のブロックと同じ指定（PC 左右 40px・最大 1280px、
   SP 左右 16px）にする。
   SP の院紹介の青い箱は margin: 0 -17px で画面端まで広げていたので、
   これも 16px の内側に収める。箱の内側の余白は 40px → 24px にして、
   文章の幅（295px 前後）は変えない。
   ------------------------------------------------------------------ */
#wrapper > section.inner.inner-fluid,
#wrapper > div.inner.inner-fluid {
  box-sizing: border-box;
  width: auto;
  max-width: calc(1280px + 32px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}
@media screen and (min-width: 769px) {
  #wrapper > section.inner.inner-fluid,
  #wrapper > div.inner.inner-fluid {
    max-width: calc(1280px + 80px);
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media screen and (max-width: 768px) {
  #wrapper > div.inner.inner-fluid > .shin_para {
    margin-left: 0;
    margin-right: 0;
  }
  #wrapper > div.inner.inner-fluid > .shin_para .inner_con.con_pad {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ------------------------------------------------------------------
   SP: 写真スライダーと基本情報の間を空ける

   旧 shinjuku/css/style.css の SP 指定で .shin_info に margin-top: -14px
   （旧 slick スライダーの下余白に食い込ませるためのもの）が残っていた。
   f3085fa88 でスライダーの下余白を 0 にしたため、情報ブロックがスライダーの
   下端（18b2035fa 以降はスクロールバー）に 14px 重なっていた。
   見出し下と同じ 24px を空ける。PC は grid 内の指定（margin: 0 0 60px）のまま。
   ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  #wrapper #tabinfo > .shin_info {
    margin-top: 24px;
  }
}

/* ------------------------------------------------------------------
   見出しの大きさ・色を AGA TOP の階層に揃える

   AGA TOP の見出しは h2 24px（#333 系）→ 小見出し（h3）16〜18px（同色）→
   補助ラベルは金（#bba171）。アクセス下層では小見出しが h2 より大きく、
   旧デザインの青（#0077e1 / #0b77e1）が残っていた。
   - 「車でお越しの方」等（.desp-qaattl）  PC 30px / SP 15px・黒 → 18px / 16px
   - 地域名（.accpage-inner-ttl）          PC 24px / SP 17.5px・青 → 18px / 16px
   - 「お近くのゴリラクリニック」（h2.title） 青 → .shin_ttl と同じ #3e3a39
   - MV の英字ラベル（.pg_eng_title）       青 → 金
   ------------------------------------------------------------------ */
#wrapper .accord-block .access_ac_mds .desp-qaattl {
  font-size: 18px;
  line-height: 1.4;
  color: #3e3a39;
}
#wrapper .accpage-section .accpage-inner-ttl {
  font-size: 18px;
  line-height: 1.4;
  color: #3e3a39;
}
#wrapper .accpage-section h2.title {
  color: #3e3a39;
}
#main_visual .pg_title .pg_eng_title {
  color: #bba171;
}
@media screen and (max-width: 768px) {
  #wrapper .accord-block .access_ac_mds .desp-qaattl,
  #wrapper .accpage-section .accpage-inner-ttl {
    font-size: 16px;
  }
}

/* ------------------------------------------------------------------
   見出しの末尾1〜2文字だけが次の行に落ちるのを防ぐ

   SP（320〜430px）で「最寄駅から新宿本院までの道の／り」
   「ゴリラクリニック総院長の紹／介」「AGA治療のよくある質問と回／答」などが
   23院で出ていた（2026-09-29 計測・28種類）。
   index.php の見出しに区切りの候補（<wbr>）を入れ、keep-all でそれ以外の
   位置では改行しないようにする（「最寄駅から｜〇〇院までの｜道のり」）。
   h1 は院名の前の空白で区切れる。区切りの間が入り切らないときに
   はみ出さないよう overflow-wrap: anywhere を併記。text-wrap: balance は
   対応ブラウザ（Chrome 114+ / Safari 17.5+）で行の長さを揃える追加の指定
   ------------------------------------------------------------------ */
#wrapper .shin_ttl,
#main_visual .pg_title_en {
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* ------------------------------------------------------------------
   「お近くのゴリラクリニック」の院ボタンと「さらに詳しく」

   旧デザインは院ボタンが灰色（#7f7f7f）に白文字で、コントラスト比 4:1 前後。
   SP は 10.5px・高さ 31px で押しにくかった。「さらに詳しく」は青（#0b77e1）の
   塗りだが、AGA TOP で青の塗りを使うのは予約などの申し込みボタンだけ。
   - 院ボタン: 白地・枠線 #cacaca・文字 #3e3a39 太字（PC 14px / SP 13px）・
     高さ 44px 以上。右の矢印は白い画像で白地では見えないため、
     AGA TOP の「もっと見る」と同じ金の矢印（SVG）に置き換える
   - 「さらに詳しく」: AGA TOP の .faq-more-btn / .knowledge-more-btn と同じ
     枠線ボタン（#3e3a39・12px 太字・角丸 4px・金の矢印）
   ------------------------------------------------------------------ */
#wrapper .accpage-section .accpage-btn-gp li a.accpage-link {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 8px 26px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: #3e3a39;
  background: #fff;
  border: 1px solid #cacaca;
  border-radius: 4px;
  text-decoration: none;
  transition: border-color .2s;
}
#wrapper .accpage-section .accpage-btn-gp li a.accpage-link::after {
  right: 12px;
  width: 12px;
  height: 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 7' fill='none'%3E%3Cpath d='M1 3.5h7M5 1l3 2.5L5 6' stroke='%23bba171' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
#wrapper .accpage-section .accpage-btn-gp li a.accpage-link:hover {
  border-color: #3e3a39;
  opacity: 1;
}
#wrapper .accpage-section .accpage-btn {
  margin-top: 40px;
  text-align: center;
}
#wrapper .accpage-section .accpage-btn a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: none;
  min-height: 48px;
  box-sizing: border-box;
  padding: 11px 54px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  line-height: 1.6;
  color: #3e3a39;
  background: #fff;
  border: 1px solid #3e3a39;
  border-radius: 4px;
  text-decoration: none;
}
#wrapper .accpage-section .accpage-btn a::after {
  content: "";
  display: block;
  width: 12px;
  height: 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 7' fill='none'%3E%3Cpath d='M1 3.5h7M5 1l3 2.5L5 6' stroke='%23bba171' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
@media screen and (max-width: 768px) {
  /* 320px 幅でも「渋谷道玄坂院」「大阪心斎橋院」などが1行に収まる余白 */
  #wrapper .accpage-section .accpage-btn-gp li a.accpage-link {
    font-size: 13px;
    padding: 8px 18px;
  }
  #wrapper .accpage-section .accpage-btn-gp li a.accpage-link::after {
    right: 8px;
    width: 10px;
  }
  #wrapper .accpage-section .accpage-btn {
    margin-top: 32px;
  }
}
/* 360px 未満（iPhone SE 第1世代など）は「銀座ANNEX院」が折り返すため 12px */
@media screen and (max-width: 359px) {
  #wrapper .accpage-section .accpage-btn-gp li a.accpage-link {
    font-size: 12px;
  }
}
/* PC: 院ボタンの縦の間隔（上下 padding 20px ずつ＝40px）を横の間隔 20px に揃える */
@media screen and (min-width: 769px) {
  #wrapper .accpage-section .accpage-btn-gp li {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* ------------------------------------------------------------------
   SP: 小さすぎる文字・押しにくいリンク

   2026-09-29 に 23院 × 375px で計測（12px 未満の文字 / 高さ 32px 未満のリンク）。
   - MV の説明文（p.copy）11px → 12px（PC は 12px）
   - 総院長の「経歴」「所属学会」: 見出し 10px・各行 9px を 12px へ。
     2列（184px / 112px）のまま大きくすると収まらないため、縦1列に並べ替える
   - 「一覧へ戻る」10px・高さ 34px → 13px・高さ 44px
   - よくある質問のリンク: 押せる範囲が文字の部分（185 x 22px）だけだった。
     行全体（左の「Q」を含む・高さ 44px 以上）を押せるようにする。
     「Q」は li::before の絶対配置で a より手前に描かれるため、
     pointer-events: none でクリックを a へ通す
   ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  /* 元の指定は #main_visual .copy.cjk（common/css/common.css）。詳細度で上回らせる */
  #main_visual .copy_wrap p.copy {
    font-size: 12px;
  }

  #wrapper .ceo_his {
    flex-direction: column;
    gap: 14px;
  }
  #wrapper .ceo_his .his01,
  #wrapper .ceo_his .his02 {
    width: auto;
    margin: 0 20px;
  }
  #wrapper .col3_gp .ceo_his .his01 p,
  #wrapper .col3_gp .ceo_his .his02 p,
  #wrapper .col3_gp .ceo_his .his01 li,
  #wrapper .col3_gp .ceo_his .his02 li {
    font-size: 12px;
    line-height: 1.7;
  }

  #wrapper p.btn-outline.bk_btn a {
    min-width: 200px;
    min-height: 44px;
    font-size: 13px;
  }

  #wrapper ul.col2_gp li.item::before {
    pointer-events: none;
  }
  #wrapper ul.col2_gp li.item > a {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 44px;
    width: calc(100% + 53px);
    margin-left: -53px;
    padding-left: 53px;
  }
  /* 旧 style.css の .item_mrg（margin-top: 8px）が 44px の行に足されて
     最後の行だけ間隔が広がるため 0 にする */
  #wrapper ul.col2_gp li.item > a.item_mrg {
    margin-top: 0;
  }
}

/* バナー（見出しなし・padding 0）の直後にあった「よくある質問と回答」
   (section.sec_qaa) を削除し、院一覧が直後に来るようになった。
   バナー → 院一覧の見出しが他のセクション間より 20px 狭かった
   （PC 160px / SP 60px）ため、下に 20px 足して 180px / 80px に揃える */
#wrapper > section.banner {
  padding-bottom: 20px;
}

/* 院一覧（お近くのゴリラクリニック）を出さない院（札幌・仙台・広島・福岡天神）では
   バナーの直後が症例になり、間隔が他のセクション間より 40px 狭かった
   （PC 140px / SP 40px）。院一覧があるときの上 padding 40px ぶんを足して
   180px / 80px に揃える。PC はバナーの margin-bottom 100px と相殺されるため
   margin ではなく padding で足す（#case の既定 padding-top 40px ＋ 40px） */
#wrapper > section.banner + #case {
  padding-top: 80px;
}

/* 院一覧（お近くのゴリラクリニック）の「さらに詳しく」ボタンを削除したため、
   SP で枠の下の余白（52px）が上（22px）より広かった。
   枠の padding-bottom を上と同じ 22px にする（PC は上下とも約 65px で揃っている） */
@media screen and (max-width: 768px) {
  #wrapper .accpage-section .accpage-inner {
    padding-bottom: 22px;
  }
  /* 最後のエリアの下余白（22px）が padding に足されるため 0 */
  #wrapper .accpage-section .accpage-inner > .accpage-sec:last-child {
    margin-bottom: 0;
  }
}

/* ------------------------------------------------------------------
   ページ内のあしらい（角丸・線の色）を AGA TOP に揃える（2026-09-29）

   他ページのパーツを持ち込んだ影響で、角丸が 0 / 4 / 8 / 10 / 20px、
   線の色が 金 / #cacaca / #e0d8ce / #3e3a39 / #000 と混在していた。
   AGA TOP（/operation/aga/）の実測に合わせて次のルールにする。
   - 写真・地図: 角丸 8px（特長カード・症例カードと同じ）
   - バナー・院一覧の灰色の枠: 角丸 12px（AGA TOP の .pickup-bnr・大きいカード）
   - 補助の枠・区切り線: #e0d8ce（AGA TOP の .flow-step・.relief-fee-item）
   - 枠線ボタン: #3e3a39・角丸 4px（変更なし）/ 特長カード: 金の枠・8px（変更なし）
   ------------------------------------------------------------------ */
/* 写真（基本情報・道のり・総院長） */
#wrapper .shin_slider01 .shin_slider01__swiper picture,
#wrapper .shin_slider02 .shin_route__swiper picture,
#wrapper #tabstaff .staff_img picture {
  display: block;
  overflow: hidden;
  border-radius: 8px;
}
#wrapper #tabstaff .staff_img img {
  border-radius: 8px;
}
/* 地図（iframe は角丸が効かないため外側の .g_map で切り抜く） */
#wrapper .shin_map .g_map {
  overflow: hidden;
  border-radius: 8px;
}
/* バナー */
#wrapper > section.banner a {
  display: block;
  overflow: hidden;
  border-radius: 12px;
}
#wrapper > section.banner img {
  display: block;
}
/* 院一覧の灰色の枠（旧 PC 20px / SP 10px） */
#wrapper .accpage-section .accpage-inner {
  border-radius: 12px;
}
/* 院のボタンの枠線（旧 #cacaca） */
#wrapper .accpage-section .accpage-btn-gp li a.accpage-link {
  border-color: #e0d8ce;
}
/* 総院長の経歴の区切り線（旧 #000。PC は下線、SP は上下線） */
#wrapper .ceo_his {
  border-color: #e0d8ce;
}

/* ------------------------------------------------------------------
   コンテンツ幅を AGA TOP と同じにする（2026-09-29）

   AGA TOP: 最大 1280px・左右 40px（PC）/ 左右 16px（SP）。
   アクセス下層は次の3点で幅がずれていた。
   1. common/css/common.css の #wrapper { min-width: 1150px } により、
      769〜1149px の画面でページ全体が 1150px 幅になり横スクロールが出ていた
      （AGA TOP は #wrapper を使わないため影響を受けない）
   2. 総院長・バナー・院一覧が旧 .inner.inner-fluid（1150px 枠 + 左右 15px /
      SP 17px）のままで、1280px 時に 73〜1193px と左右 33px ずつ狭かった
   3. SP の地図・基本情報が画面の端まで（左右の余白 0）だった
   ------------------------------------------------------------------ */
#wrapper {
  min-width: 0;
}
#wrapper > #tabstaff > .inner.inner-fluid,
#wrapper > section.banner > .inner.inner-fluid,
#wrapper .accpage-section > .inner.inner-fluid {
  box-sizing: border-box;
  width: auto;
  max-width: calc(1280px + 32px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}
@media screen and (min-width: 769px) {
  #wrapper > #tabstaff > .inner.inner-fluid,
  #wrapper > section.banner > .inner.inner-fluid,
  #wrapper .accpage-section > .inner.inner-fluid {
    max-width: calc(1280px + 80px);
    padding-left: 40px;
    padding-right: 40px;
  }
}
/* SP: 地図は左右 16px。基本情報は内側に 17px + 15px の余白が重なっていたため
   1段にまとめ、表の左端を他のブロックと同じ 16px に揃える（背景・枠なし） */
@media screen and (max-width: 768px) {
  #wrapper #tabinfo > .shin_map {
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 16px;
  }
  #wrapper #tabinfo > .shin_info > .inner.inner-fluid {
    padding-left: 16px;
    padding-right: 16px;
  }
  #wrapper #tabinfo > .shin_info .shininfo_block {
    padding-left: 0;
    padding-right: 0;
  }
}
/* 769〜1149px: 旧 .inner.inner-fluid の 1150px 固定が残っていた MV の文字部分と
   「道のり」の見出しの枠を、画面幅に合わせる */
@media screen and (min-width: 769px) and (max-width: 1149px) {
  #main_visual > .inner.inner-fluid,
  #wrapper #tabinfo > .shinjuku_slider > .inner.inner-fluid {
    width: auto;
  }
}

/* フッター上の athlete バナー（div.footer_bnr）を AGA TOP と同じく削除した
   （2026-09-29・main の d44453510 に合わせる）。院ページは症例が最後のセクション
   になり、「もっと見る」の下の余白 20px（AGA TOP では次のセクションへの余白）が
   残ってパンくずまでが AGA TOP より 20px 広かった（PC 160px / SP 60px）。
   0 にして AGA TOP の最後のセクション（PC 140px / SP 40px）に揃える */
#wrapper > #case .case-more-wrap {
  padding-bottom: 0;
}