@charset "utf-8";

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");

/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("inview.css");
@import url("mainimg.css");

/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {
  /*--primary-color: #4476b9;	*/ /*テンプレートのテーマカラー*/
  --primary-color: #4476a3;
  --primary-inverse-color: #fff; /*上のprimary-colorの対となる色*/

  --secondary-color: #30363d; /*テンプレートのサブカラー*/
  --secondary-inverse-color: #fff; /*secondary-colorの対となる色*/

  --accent-color: #4476b9; /*テンプレートのアクセントカラー*/
  --accent-inverse-color: #fff; /*accent-colorの対となる色*/

  /*余白の一括管理用。主に左右の余白に使っています。4rem＝4文字分。*/
  --content-space: 1rem;
}

/*animation11のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes animation1 {
  0% {
    left: -200px;
  }
  100% {
    left: 0px;
  }
}

/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*全体の設定
---------------------------------------------------------------------------*/
body * {
  box-sizing: border-box;
}
html,
body {
  font-size: 13px; /*基準となるフォントサイズ。*/
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width: 900px) {
  html,
  body {
    font-size: 15px; /*基準となるフォントサイズ。*/
  }
} /*追加指定ここまで*/

body {
  margin: 0;
  padding: 0;
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif; /*フォント種類（ゴシック）*/
  -webkit-text-size-adjust: none;
  background: #fff; /*背景色*/
  color: #555; /*文字色*/
  line-height: 2; /*行間*/
  overflow-x: hidden;
}

/*リセット*/
figure {
  margin: 0;
}
dd {
  margin: 0;
}
nav,
ul,
li,
ol {
  margin: 0;
  padding: 0;
}
nav ul {
  list-style: none;
}

/*table全般の設定*/
table {
  border-collapse: collapse;
}

/*画像全般の設定*/
img {
  border: none;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
.logo-footer {
  max-width: 40%;
}

/*videoタグ*/
video {
  max-width: 100%;
}

/*iframeタグ*/
iframe {
  width: 100%;
}

/*他*/
input {
  font-size: 1rem;
}

/*section*/
section {
  padding: var(--content-space); /*section内の余白。css冒頭のcontent-spaceを読み込みます。*/
}

/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
  color: inherit;
  transition: 0.3s; /*hoverまでにかける時間。0.3秒。*/
}

/*マウスオン時*/
a:hover {
  filter: brightness(1.1); /*少しだけ明るくする*/
}

/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
  position: relative;
  animation: opa1 0.2s 0.4s both; /*0.4秒待機後、0.2秒かけてフェードイン*/
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0 auto;
}

/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
  padding: 1rem var(--content-space); /*ヘッダー内の余白。上下に１文字分、左右についてはcss冒頭のcontent-spaceを読み込みます。*/
  color: #fff; /*文字色*/
  position: absolute;
  width: 100%;
}
header a {
  color: inherit;
}

/*ロゴ*/
#logo a {
  text-decoration: none;
}
#logo img {
  display: block;
  width: 220px; /*ロゴの幅*/
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width: 900px) {
  /*ヘッダーブロック*/
  header {
    display: flex; /*中のコンテンツを横並びにする*/
    justify-content: space-between;
    gap: 2rem; /*中のコンテンツ同士に空けるマージン的な余白。*/
    align-items: center;
  }
} /*追加指定ここまで*/

/*header-box（ヘッダー右側にあるボタン）
---------------------------------------------------------------------------*/
/*ボックス全体*/
#header-box * {
  margin: 0;
  padding: 0;
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width: 900px) {
  #header-box {
    margin-right: 30px; /*ハンバーガーアイコンと重ならないように適当な余白*/
  }
} /*追加指定ここまで*/

/*ボタンが入ったボックス*/
#header-box .btn {
  list-style: none;
  display: flex;
  gap: 1rem; /*ボタン同士の間に空けるスペース。１文字分。*/
}

/*メニュー１個あたり（ここにない設定は、下の方にある「btn共通設定」にあります。）*/
#header-box .btn a {
  display: block;
  text-decoration: none;
  padding: 0.5rem 2rem; /*上下、左右へのボタン内の余白*/
  border-radius: 3px; /*角を少し丸くする*/
}

/*ボタンに使用しているアイコン*/
#header-box .btn i {
  margin-right: 1rem; /*アイコンの右側に１文字分のスペースを空ける*/
  transform: scale(1.4); /*アイコンサイズを140%に。*/
}

/*画面幅500px以下の追加指定*/
@media screen and (max-width: 500px) {
  /*ボタンが入ったボックス*/
  #header-box .btn {
    display: inline-block;
  }

  /*ボタン１個あたり*/
  #header-box .btn li {
    margin-bottom: 0.5rem;
  }
} /*追加指定ここまで*/

/*開閉メニュー
---------------------------------------------------------------------------*/
/*メニューブロック共通*/
#menubar {
  display: none;
  animation: animation1 0.2s both;
  position: fixed;
  overflow: auto;
  z-index: 100;
  right: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  padding: 100px var(--content-space) 50px; /*ブロック内の余白。上に100px、左右についてはcss冒頭のcontent-spaceを読み込む、下に50px。*/
  background: var(--primary-color); /*背景色。css冒頭のprimary-colorを読み込みます。*/
  color: var(--primary-inverse-color); /*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
}

/*メニュー１個あたり*/
#menubar a {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid #fff; /*枠線の幅、線種、色*/
  margin-bottom: 1rem; /*下に１文字分のスペースを空ける。メニュー同士の間隔です。*/
  padding: 1rem 2rem; /*メニュー内の余白。上下に１文字分、左右に２文字分。*/
}

/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
#menubar_hdr {
  display: flex;
  animation: opa1 0s 0.2s both;
  position: fixed;
  z-index: 101;
  cursor: pointer;
  right: 0px; /*右からの配置場所*/
  top: 0px; /*上からの配置場所*/
  width: 70px; /*ボタンの幅*/
  height: 70px; /*ボタンの高さ*/
  /*background: #000;	/*ボタン色*/
  border-radius: 0px 0px 0px 20px; /*角を丸くする指定。左上、右上、右下、左下の順番。この場合は左下だけ角を丸くする。*/
  transform-origin: right top;
  transform: scale(1); /*大きさを調整したい場合はここの「1」を変更します。1.2や0.7など。*/
}

/*バツ印が出ている時のボタン色*/
#menubar_hdr.ham {
  background: #23364c;
}

/*ハンバーガーアイコンの線*/
#menubar_hdr span {
  display: block;
  position: absolute;
  left: 18px;
  width: 35px;
  height: 2px; /*線の高さ*/
  background: #fff; /*線の色*/
  transition: 0.3s;
}

#menubar_hdr span:nth-of-type(1) {
  top: 24px;
}
#menubar_hdr span:nth-of-type(2) {
  top: 34px;
}
#menubar_hdr span:nth-of-type(3) {
  top: 44px;
}

/* ハンバーガーメニュー展開時 */
#menubar_hdr.ham span:nth-of-type(1) {
  transform: translateY(10px) rotate(-45deg);
}
#menubar_hdr.ham span:nth-of-type(2) {
  opacity: 0;
}
#menubar_hdr.ham span:nth-of-type(3) {
  transform: translateY(-10px) rotate(45deg);
}

/*ヘッダーにある１行のお知らせ
---------------------------------------------------------------------------*/
.new-top * {
  margin: 0;
  padding: 0;
}

/*ブロック全体*/
.new-top {
  position: absolute;
  top: 80vh; /*上から80%の場所に配置*/
  z-index: 1;
  width: 80vw; /*幅は80%*/
  margin-left: 10vw; /*左に10%空ける*/
  display: flex;
  align-items: center;
  padding: 1rem; /*ボックス内の余白。1文字分。*/
  background: #fff; /*背景色。*/
  border-radius: 5px; /*角を丸くする*/
}

/*マウスオン時に透明度を80%に*/
.new-top a:hover {
  opacity: 0.8;
}

/*「お知らせ」の見出し*/
.new-top h2 {
  font-size: 1rem;
  font-weight: normal;
  background: #555; /*背景色*/
  color: #fff; /*文字色*/
  border-radius: 3px; /*角を少しだけ丸く*/
  margin-right: 1rem; /*右に空けるスペース。テキストブロックとの間に空けるスペースです。*/
  padding: 0 1rem; /*見出し内の余白。上は0で、左右に１文字分。*/
}

/*テキストのブロック*/
.new-top .text {
  flex: 1;

  /*以下4行は、末尾を...として１行にまとめる為のスタイル*/
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*ブロック右側にある「一覧」*/
.new-top .new-list {
  align-self: flex-end;
}

/*コンテンツ
---------------------------------------------------------------------------*/
/*コンテンツブロック*/
#contents {
  flex: 1;
}

/*トップページ以外のコンテンツ*/
body:not(.home) #contents {
  padding-top: 10rem; /*上に10文字分の余白を空ける*/
  padding-bottom: 10rem; /*下に10文字分の余白を空ける*/
}

/*コンテンツ内で使用するul,ol要素（リストタグ）*/
#contents ul,
#contents ol {
  margin-left: 2rem;
  margin-right: 2rem;
}

/*p要素（段落タグ）
---------------------------------------------------------------------------*/
p {
  margin-left: 1rem; /*左に１文字分のスペース*/
  margin-right: 1rem; /*右に１文字分のスペース*/
}

/*main（メインコンテンツ）
---------------------------------------------------------------------------*/
/*h2見出し*/
main h2 {
  margin: 0;
  padding: 0;
  font-size: 2.4rem; /*文字サイズ。240%。*/
  font-weight: normal; /*h要素のデフォルトの太字を標準に*/
  margin-bottom: 5vw; /*下にスペースを空ける*/
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
}

/*見出し内のspan（小さな装飾文字と上部のアクセントライン）*/
main h2 span.small {
  display: inline-block;
  border-top: 2px solid var(--primary-color); /*上の線の幅、線種、varは色のことで冒頭のprimary-colorを読み込みます。*/
  font-size: 0.9rem; /*文字サイズ90%*/
  opacity: 0.6; /*透明度。色が60%出た状態。*/
  letter-spacing: 0.1rem; /*文字間隔を少しだけ広く*/
  padding-top: 2rem; /*上に空ける余白。ラインとの間の余白調整です。お好みで。*/
}

/*見出しをセンタリングする場合*/
main h2.c {
  align-items: center;
}

/*2カラムブロック　※900px未満では１カラム（私たちのこだわりブロック）
---------------------------------------------------------------------------*/
.list-half * {
  margin: 0;
  padding: 0;
  margin-bottom: 1em;
}

@media screen and (min-width: 900px) {
  .list-half .image-r {
    margin-right: 2rem;
  }
}

/*背景画像*/
#kodawari {
  background: url("../images/bg-kodawari.png") no-repeat left top / 50vw; /*left(左)、top(上)に配置し、幅は画面幅の50%に。*/
}

/*２カラムを囲むブロック*/
.list-half .list {
  display: flex; /*flexボックスを使う指定*/
  flex-direction: column; /*子要素を縦並びにする*/
  margin-bottom: 2rem; /*ボックスの下に2文字分のスペースを空ける*/
}

/*ブロック内のh4見出し*/
.list-half .list h4 {
  font-size: 1.4rem; /*文字サイズを1.4倍*/
  margin-bottom: 1rem; /*下に１文字分のスペースを空ける*/
}

/*ブロック内のh4内のspan（小さな装飾文字）*/
.list-half .list h4 span {
  display: block;
  opacity: 0.5; /*透明度50%*/
  font-weight: normal;
  font-size: 0.5em; /*文字サイズを親要素の50%*/
  letter-spacing: 0.1em; /*文字間隔をほんの少し広く*/
}

/*画像ブロック共通*/
.list-half .image-l img,
.list-half .image-r img {
  border-radius: 10px; /*角を丸くする指定。*/
  box-shadow: 10px 10px rgba(0, 0, 0, 0.1); /*ボックスの影。右へ、下へ、0,0,0は黒の事で0.1は色が10%出た状態。*/
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width: 900px) {
  /*２カラムを囲むブロック*/
  .list-half .list {
    flex-direction: row; /*子要素を横並びにする*/
    justify-content: space-between; /*並びかたの種類の指定*/
    align-items: center; /*垂直揃えの指定。天地中央に配置されるように。*/
  }

  /*画像ブロック共通*/
  .list-half .image-l,
  .list-half .image-r {
    width: 50%; /*画像の幅*/
  }

  /*画像を右に配置する場合*/
  .list-half .image-r {
    margin-left: 2rem; /*画像の左側に空けるスペース*/
  }

  /*画像を左に配置する場合*/
  .list-half .image-l {
    order: -1;
    margin-right: 2rem; /*画像の右側に空けるスペース*/
  }

  /*テキストブロック*/
  .list-half .text {
    flex: 1;
  }
} /*追加指定ここまで*/

/*list-grid7（サービス紹介ブロック）
---------------------------------------------------------------------------*/
.list-grid7 .list * {
  margin: 0;
  padding: 0;
}

/*ボックス１個あたり*/
.list-grid7 .list {
  display: grid;
  position: relative;
  border-radius: 5px; /*角を少しだけ丸く*/
  background: #fafafa; /*背景色*/
  color: #555; /*文字色*/
  border: 1px solid #ccc; /*枠線の幅、線種、色*/
  padding: 2rem; /*ボックス内の余白。２文字分。*/
  margin-bottom: 2rem; /*ボックスの下に空けるスペース。2文字分。*/
}

/*ボックス内のh4見出し*/
.list-grid7 .list h4 {
  text-align: center; /*テキストをセンタリング*/
  font-size: 1.3rem; /*文字サイズ130%*/
  margin-bottom: 0.5rem; /*下に0.5文字分の余白を空ける*/
  color: var(--primary-color); /*文字色。css冒頭のprimary-colorを読み込みます。*/
}

/*h4内のspan（小さな装飾文字）*/
.list-grid7 .list h4 span {
  display: block;
  font-weight: normal; /*デフォルトだと太字なので標準に*/
  font-size: 0.7em; /*文字サイズを70%*/
}

/*ボックス内のp要素*/
.list-grid7 .list p {
  font-size: 0.85rem; /*文字サイズを85%に*/
  line-height: 1.5; /*行間を少し狭く*/
}

/*ボックス内のfigure画像*/
.list-grid7 .list figure {
  margin: 0 auto;
  margin-bottom: 1rem; /*画像の下に空けるスペース*/
}

/*画面幅800px以上の追加指定*/
@media screen and (min-width: 800px) {
  /*ブロック全体を囲むブロック*/
  .list-grid7 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
    gap: 2rem; /*ブロックの間に空けるマージン的な指定。２文字分。*/
  }
} /*追加指定ここまで*/

/*ご利用の流れ
---------------------------------------------------------------------------*/
.flow-box * {
  margin: 0;
  padding: 0;
}

/*背景画像*/
#flow {
  background: url("../images/bg-flow.png") no-repeat right top / 50vw; /*right(右)、top(上)に配置し、幅は画面幅の50%に。*/
}

/*ステップボックス１個あたりの設定*/
.flow-box {
  position: relative;
  margin-bottom: 4rem; /*下に空けるスペース、2文字分。ステップボックス同士のスペースです。*/
}

/*ボックス内のh3見出し（大きな端末で左側に配置される背景色つきの見出し）*/
.flow-box .title h3 {
  background: var(--primary-color); /*背景色。css冒頭のprimary-colorを読み込みます。*/
  color: var(--primary-inverse-color); /*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
  margin-left: calc(-1 * var(--content-space));
  margin-right: calc(-1 * var(--content-space));
  text-align: center; /*テキストをセンタリング*/
  padding: 2rem; /*見出し内の余白。２文字分。*/
  margin-bottom: 2rem; /*見出しの下に空けるスペース。２文字分。*/
}

/*h3内のspan（小さな装飾文字）*/
.flow-box .title h3 span {
  display: block;
  font-size: 0.7em; /*文字サイズ。親要素の70%。*/
}

/*「STEP01」〜「STEP04」のテキスト*/
.flow-box .step-num {
  display: inline-block;
  position: absolute;
  left: 0px;
  top: -50px; /*本来の場所から上に50pxずらす*/
  width: 100%;
  font-size: 3rem; /*文字サイズ300%*/
  color: var(--primary-color); /*文字色。css冒頭のprimary-colorを読み込みます。*/
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width: 900px) {
  .flow-box {
    display: flex;
    align-items: flex-start;
    gap: 5rem; /*左右のブロック同士の間に空けるスペース。５文字分。*/
  }

  /*「STEP01」〜「STEP04」のテキスト*/
  .flow-box .step-num {
    top: -100px; /*本来の場所から上に100pxずらす*/
    font-size: 5rem; /*文字サイズ500%*/
    opacity: 0.15; /*透明度。色が15%出た状態。*/
  }

  /*h3見出しが入ったブロック（大きな端末で左側に配置される背景色つきの見出しを囲むブロック）*/
  .flow-box .title {
    width: 30%; /*幅*/
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }

  /*ボックス内のh3見出し（大きな端末で左側に配置される背景色つきの見出し）*/
  .flow-box .title h3 {
    margin-right: auto;
    border-radius: 0 100px 100px 0; /*角を丸くする指定。左上、右上、右下、左下の順番。*/
  }

  /*大きな端末で右側に配置されるテキストブロックを囲むボックス*/
  .flow-box .text {
    flex: 1;
  }
} /*追加指定ここまで*/

/*ステップボックス
---------------------------------------------------------------------------*/
ul.step {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  margin-bottom: 6em !important;
}

/*ステップ１個あたり*/
ul.step li {
  border: 2px solid var(--primary-color); /*枠線の幅、線種、varは色の指定で、css冒頭のprimary-colorを読み込みます。*/
  padding: 1rem; /*ボックス内の余白。１文字分。*/
  margin-bottom: 2rem; /*ボックスの下に空けるスペース。２文字分。ボックス同士に空ける余白です。*/
  position: relative;
}

/*「▼」のマーク*/
ul.step li::after {
  content: "▼"; /*このテキストを出す*/
  transform: scaleX(2); /*２倍の大きさ*/
  position: absolute;
  left: 50%; /*左からの配置場所。厳密に中央ではありませんが、テキストが小さいので問題ないかと。*/
  bottom: -2rem; /*下からの配置場所。本来の場所より上に２文字分の場所。*/
  color: var(--primary-color); /*文字色。css冒頭のprimary-colorを読み込みます。*/
  opacity: 0.3; /*透明度。色が30%出た状態。*/
}

/*最後のステップボックスには「▼」を出さない*/
ul.step li:last-child::after {
  content: "";
}

/*list-yoko-scroll（お客様の声ブロック）
---------------------------------------------------------------------------*/
.list-yoko-scroll * {
  margin: 0;
  padding: 0;
}

/*横スクロールブロック全体*/
.list-yoko-scroll {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox用 */
  scroll-snap-type: x mandatory; /* スナップスクロールを有効にする */
  padding-top: 30px;
  padding-bottom: 30px;
  margin-right: calc(-1 * var(--content-space));
}
.list-yoko-scroll::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge用 */
}

/*ブロック内の１個あたり*/
/*
.list-yoko-scroll .list {
	width: 60%;
	flex-shrink: 0;
	scroll-snap-align: start;
	margin-right: 2rem;
	position: relative;
	color: var(--primary-inverse-color);
	background: var(--primary-color);
	border-radius: 1rem;
	padding: 2rem;
}
*/
.list-yoko-scroll .list {
  width: 60%;
  flex-shrink: 0;
  scroll-snap-align: start;
  margin-right: 2rem;
  position: relative;
  color: var(--primary-inverse-color);

  /* ▼ 直線グラデを撤去 */
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);

  /* ▼ 深度だけ残す */
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-radius: 1.2rem;
  padding: 2rem;
  overflow: hidden;
}

/*画面幅600px以上の追加指定*/
@media screen and (min-width: 600px) {
  /*ブロック内の１個あたり*/
  .list-yoko-scroll .list {
    width: 28%; /*ブロック１個の幅。お好みで変更して下さい。*/
  }
} /*追加指定ここまで*/

/*偶数版目のふきだしだけ、下に30pxずらす*/
.list-yoko-scroll .list:nth-of-type(even) {
  transform: translateY(30px);
}

/*ふきだしぐち（▲の形）*/
.list-yoko-scroll .list::before {
  content: "▲"; /*このテキストを出す*/
  color: var(--primary-color); /*文字色。css冒頭のprimary-colorを読み込みます。*/
  font-size: 30px; /*サイズ*/
  position: absolute;
  left: 30%; /*ふきだしの左からの配置場所。お好みで。*/
  top: -40px; /*ふきだしの上からの配置場所*/
}

/*ふきだし内の.text（テキスト）ブロック*/
.list-yoko-scroll .list .text {
  font-size: 0.85rem; /*文字サイズ85%*/
  line-height: 1.5; /*行間*/
}

/*よく頂く質問ブロック
---------------------------------------------------------------------------*/
/*ブロック全体*/
.faq {
  font-size: 1.3rem; /*文字サイズ130%*/
  border-bottom: 1px solid rgba(255, 255, 255, 0.3); /*下線の幅、線種、最後は色の指定で255,255,255は白の事で0.3は色を30%出す指定。*/
}

/*質問*/
.faq dt {
  display: flex;
  align-items: flex-start;
  border-top: 1px solid rgba(255, 255, 255, 0.3); /*上の幅、線種、最後は色の指定で255,255,255は白の事で0.3は色を30%出す指定。*/
  padding: 1rem; /*ブロック内の余白。１文字分。*/
  cursor: pointer; /*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}

/*「＋」アイコン（閉じている場合）*/
.faq dt::before {
  content: "＋"; /*アイコン画像の指定*/
  margin-right: 1rem; /*右側に空けるスペース*/
  flex-shrink: 0;
  background: var(--primary-color); /*背景色。css冒頭のprimary-colorを読み込みます。*/
  color: var(--primary-inverse-color); /*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
  width: 2rem; /*幅*/
  line-height: 2rem; /*高さ*/
  text-align: center;
  border-radius: 50%; /*円形にする*/
  transform: translateY(5px); /*アイコンの上下バランスの微調整*/
}

/*「ー」アイコン（開いている場合）*/
.faq dt.active::before {
  content: "ー"; /*アイコン画像の指定*/
}

/*回答*/
.faq dd {
  margin: 0 1rem 1rem 4rem; /*ボックスの外側にとる余白。上、右、下、左への順番。*/
  padding: 1rem 2rem; /*ボックスの内側の余白。上下に1文字、左右に２文字分。*/
  background: #fff; /*背景色*/
  color: #333; /*文字色*/
  border-radius: 5px; /*角を丸くする指示*/
}

/*btn共通設定（ヘッダーと、フッターの上のボックス内にあるボタンの共通設定）
---------------------------------------------------------------------------*/
.btn a {
  display: block;
  text-decoration: none;
  /*background: var(--accent-color);*/ /*背景色。css冒頭のaccent-colorを読み込みます。*/
  color: var(--accent-inverse-color); /*背景色。css冒頭のaccent-inverse-colorを読み込みます。*/
  text-align: center; /*テキストをセンタリング*/
  background-color: rgba(70, 130, 200, 0.85);
}

/*マウスオン時*/
.btn a:hover {
  background: var(--accent-inverse-color); /*背景色。css冒頭のaccent-inverse-colorを読み込みます。*/
  color: var(--accent-color); /*文字色。css冒頭のaccent-colorを読み込みます。*/
}

/*フッターの上のボックス内にあるボタン（ここにない設定は、すぐ上の「btn共通設定」にあります。）
---------------------------------------------------------------------------*/
/*ボタンに使用しているアイコン*/
.btn-box .btn i {
  margin-right: 2rem; /*アイコンの右側に２文字分のスペースを空ける*/
  transform: scale(1.4); /*アイコンサイズを140%に。*/
}

/*ボタンブロック*/
.btn-box .btn {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column; /*縦並びに*/
  justify-content: center;
  align-items: center;
  gap: 2rem; /*ボタン同士に空けるスペース。２文字分。*/
  height: 80vh; /*ブロックの高さ。画面の高さの80%。お好みで。*/
  font-size: 1.5rem; /*文字サイズを150%に*/
}

/*ボタン１個あたり*/
.btn-box .btn li {
  width: 80vw; /*幅。画面幅の80%*/
}
.btn-box .btn a {
  border-radius: 10px; /*角を丸くする指定*/
  padding: 1rem 2rem; /*ボタン内の余白。上下、左右へ。*/
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width: 900px) {
  /*ボタンブロック*/
  .btn-box .btn {
    flex-direction: row; /*横並びに変更*/
  }

  /*ボタン１個あたり*/
  .btn-box .btn li {
    width: 40vw; /*幅。画面幅の40%*/
  }
} /*追加指定ここまで*/

/*波のアニメーション
---------------------------------------------------------------------------*/
/*アニメーション*/
@keyframes move-wave {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/*波を囲む全体のブロック*/
.wave-section {
  position: relative;

  /*以下の３行の数字については、下のwaveのheight(波の高さ)から1を差し引いた形です。隙間が出る場合があるのでそれが出ないようにしています。*/
  padding-top: 79px;
  top: -79px;
  margin-bottom: -79px;
}

/*波の色（２つとも揃えておけばOK）*/
.wave-section .text {
  background: var(--primary-color); /*背景色。css冒頭のprimary-colorを読み込みます。*/
}
.wave-wrap use {
  fill: var(--primary-color); /*塗りつぶしの色。css冒頭のprimary-colorを読み込みます。*/
}

/*上下の波（共通）*/
.wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: 80px; /*波の高さ。ここを変更する場合は上の.wave-sectionの３箇所の数字も合わせて変更して下さい。*/
}
.wave svg {
  display: block;
  width: 100%;
  height: 100%;
}

.wave .wave-wrap {
  transform-box: fill-box;
  transform-origin: 0 0;
  animation: move-wave 10s linear infinite; /*ここの10sを変更すれば波のアニメーション速度が変わります*/
}

/*上の波*/
.wave-top {
  top: 0;
}

/*下の波*/
.wave-bottom {
  bottom: 0;
  transform: rotate(180deg);
}

/*フッター
---------------------------------------------------------------------------*/
#footer * {
  margin: 0;
  padding: 0;
}
#footer ul {
  list-style: none;
}

/*ブロック全体*/
#footer {
  background: var(--primary-color); /*背景色。css冒頭のprimary-colorを読み込みます。*/
  color: var(--primary-inverse-color); /*文字色。css冒頭のprimary-inverse-colorを読み込みます。*/
  padding: var(--content-space); /*フッター内の余白。css冒頭のcontent-spaceを読み込みます。*/
}

/*ロゴやSNSアイコンが入ったブロック*/
#footer div.footer1 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem; /*このブロック内のボックス同士の間に空ける余白。１文字分。*/
}

/*メニューブロック*/
#footer div.footer2 {
  flex: 1;
}

/*画面700px以上の追加指定*/
@media screen and (min-width: 700px) {
  #footer {
    display: flex;
    gap: 2rem; /*ロゴのブロックとメニューのブロックとの間の余白。2文字分。*/
  }

  /*ロゴやSNSアイコンが入ったブロック*/
  #footer div.footer1 {
    text-align: left;
    width: 40%; /*幅。40%。*/
  }
} /*追加指定ここまで*/

/*Copyright部分*/
#footer small {
  display: block;
  text-align: right;
  margin-top: 2rem;
}

/*SNSアイコン
---------------------------------------------------------------------------*/
#footer .sns {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /*アイコン同士のマージン的な要素。１文字分。*/
}

#footer .sns i {
  font-size: 30px; /*アイコンサイズ*/
}

/*Google Map用
---------------------------------------------------------------------------*/
#footer .iframe {
  width: 100%;
  height: 0;
  padding-top: 56.25% !important; /*マップの高さを増やしたい場合は、ここの数値を上げてみて下さい。*/
  position: relative;
  overflow: hidden;
}
#footer .iframe iframe {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}

/*フッター内の受付時間テーブル
---------------------------------------------------------------------------*/
.week {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 5px; /*角を丸くする指定*/
  border: 1px solid #ccc; /*テーブル外側の線の幅、線種、色*/
  table-layout: fixed; /*幅を均等に*/
  background: #fff; /*テーブル全体の背景色*/
  color: #555; /*テーブル全体の文字色*/
}

/*受付時間の幅*/
.week th:first-child,
.week td:first-child {
  width: 25%;
}

/*各曜日の幅*/
.week th:not(:first-child),
.week td:not(:first-child) {
  width: calc(75% / 7); /*受付時間で25%とっているので残りの75%を7で割る*/
}

/*th(曜日)とtd(時間)*/
.week th,
.week td {
  padding: 1rem 0; /*ボックス内の余白。上下に１文字分、左右は0。*/
  text-align: center; /*テキストをセンタリング*/
  border-bottom: 1px solid #ccc; /*下の線の幅、線種、色*/
  border-right: 1px solid #ccc; /*右の線の幅、線種、色*/
}

/*th(曜日)とtd(時間)のそれぞれ最後の右側の線を消す*/
.week th:last-child,
.week td:last-child {
  border-right: none;
}

/*最後の行の下線を消す*/
.week tr:last-child td {
  border-bottom: none;
}

/*th(曜日)の追加指定*/
.week th {
  background: #fafafa; /*背景色*/
}
.week td {
  border-bottom: 1px solid #ccc; /*下の線の幅、線種、色*/
}

/*著作部分（※意図的に見えなくしたりしないで下さい。規約違反になります。）
---------------------------------------------------------------------------*/
.pr a {
  text-decoration: none;
  display: block;
  background: #555;
  color: #ccc;
  text-align: right;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
}
.pr a::before {
  font-family: "Font Awesome 6 Free";
  content: "\e2ca";
  font-weight: bold;
  margin-right: 0.5em;
}

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {
  display: block;
}

/*ボタンの設定*/
.pagetop a {
  display: block;
  text-decoration: none;
  text-align: center;
  z-index: 99;
  animation: opa1 1s 0.4s both;
  position: fixed; /*スクロールに追従しない(固定で表示)為の設定*/
  right: 20px; /*右からの配置場所指定*/
  bottom: 20px; /*下からの配置場所指定*/
  color: #fff; /*文字色*/
  font-size: 1.5rem; /*文字サイズ*/
  background: rgba(0, 0, 0, 0.2); /*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
  width: 60px; /*幅*/
  line-height: 60px; /*高さ*/
  border-radius: 50%; /*円形にする*/
}

/*bg1
---------------------------------------------------------------------------*/
.bg1 {
  /*background: var(--secondary-color);*/ /*背景色。css冒頭のsecondary-colorを読み込みます。*/
  background: #40576f;
  color: var(--secondary-inverse-color); /*背景色。css冒頭のsecondary-inverse-colorを読み込みます。*/
}

/*背景画像が少しずつ上に移動する
---------------------------------------------------------------------------*/
/*共通設定*/
.bg-slideup {
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}

/*slideup1画像*/
.slideup1 {
  background-image: url("../images/bg-slideup1.png"); /*背景画像の読み込み*/
  color: #fff;
  border-radius: 3vw 3vw 0 0;
}

/*slideup2画像*/
.slideup2 {
  background-image: url("../images/bg-slideup2.jpg"); /*背景画像の読み込み*/
  position: relative;
}

/*slideup2の上部にグラデーションをかけて、「よく頂く質問」ブロックとの境界をなめらかにする*/
.slideup2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 20vh; /*高さ。画面の高さの20%。お好みで。*/
  background: linear-gradient(var(--secondary-color), transparent); /*背景グラデーション。css冒頭の--secondary-colorから透明(transparent)になるグラデ。*/
}

/*お知らせブロック
---------------------------------------------------------------------------*/
/*記事の下に空ける余白*/
.new dd {
  padding-bottom: 1rem;
}

/*ブロック内のspan。日付の横のアイコン的な部分の共通設定*/
.new dt span {
  display: inline-block;
  text-align: center;
  line-height: 1.8; /*行間（アイコンの高さ）*/
  border-radius: 2px; /*角を丸くする指定*/
  padding: 0 1rem; /*上下、左右へのブロック内の余白*/
  width: 8rem; /*幅。8文字分。*/
  transform: scale(0.85); /*85%のサイズに縮小*/
  border: 1px solid #777; /*枠線の幅、線種、色*/
}

/*icon-bg1。サンプルテンプレートでは「重要」と書いてあるマーク*/
.new .icon-bg1 {
  border-color: transparent; /*枠線を透明に*/
  background: #cd0000; /*背景色*/
  color: #fff; /*文字色*/
}

/*icon-bg2。サンプルテンプレートでは「サービス」と書いてあるマーク*/
.new .icon-bg2 {
  border-color: transparent; /*枠線を透明に*/
  background: var(--primary-color); /*背景色。冒頭のprimary-colorを読み込みます。*/
  color: var(--primary-inverse-color); /*文字色。冒頭のprimary-inverse-colorを読み込みます。*/
}

/*画面幅700px以上の追加指定*/
@media screen and (min-width: 700px) {
  /*ブロック全体*/
  .new {
    display: grid; /*gridを使う指定*/
    grid-template-columns: auto 1fr; /*横並びの指定。日付とアイコン部分の幅は自動で、内容が入るブロックは残り幅一杯とる。*/
  }
} /*追加指定ここまで*/

/*テキストのフェードイン設定
---------------------------------------------------------------------------*/
/*fadeInのキーフレーム設定*/
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(0.1) rotate(-30deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* 初期状態でテキストを非表示にする */
.fade-in-text {
  visibility: hidden;
}

/* アニメーションを適用するクラス。
animationの行の「0.2s」が文字の出現のなめらかさで、大きいほどなめらかに出てきます。
１文字ずつの出現する際の時差は、js/main.jsの「テキストのフェードイン効果」の中にある「0.1」で調整できます。*/
.char {
  display: inline-block;
  opacity: 0;
  animation: fadeIn 0.2s linear both;
}

/*マニュアルページ用
---------------------------------------------------------------------------*/
#manual {
  background-image: none;
}
.manual {
  padding: 5rem;
}
.manual h2,
.manual h3 {
  margin-top: 3rem;
}
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/*その他
---------------------------------------------------------------------------*/
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.color-check,
.color-check a {
  color: #ff0000 !important;
}
.l {
  text-align: left !important;
}
.c {
  text-align: center !important;
}
.r {
  text-align: right !important;
}
.ws {
  width: 95%;
  display: block;
}
.wl {
  width: 95%;
  display: block;
}
.mb0 {
  margin-bottom: 0px !important;
}
.mb30 {
  margin-bottom: 30px !important;
}
.mb5rem {
  margin-bottom: 5rem !important;
}
.look {
  display: inline-block;
  padding: 0px 10px;
  background: #eee;
  border: 1px solid #ccc;
  color: #888;
  border-radius: 3px;
  margin: 5px 0;
  word-break: break-all;
}
.small {
  font-size: 0.75em;
}
.large {
  font-size: 2em;
  letter-spacing: 0.1em;
}
.pc {
  display: none;
}
.dn {
  display: none !important;
}
.block {
  display: block !important;
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width: 900px) {
  .ws {
    width: 48%;
    display: inline;
  }
  .sh {
    display: none;
  }
  .pc {
    display: block;
  }
} /*追加指定ここまで*/

/*インデックス*/
.section-index {
  max-width: 900px;
  margin: 0 auto 60px;
  padding: 30px 40px;
  background: #fafafa;
  border-left: 4px solid #4476b9;
}

.section-index h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #1f4fb2;
  letter-spacing: 0.05em;
}

.section-index ol {
  padding-left: 20px;
}

.section-index li {
  margin-bottom: 12px;
  line-height: 1.6;
}

.section-index a {
  text-decoration: none;
  color: #333;
  border-bottom: 1px solid #ccc;
}

.section-index a:hover {
  color: #1f4fb2;
  border-bottom-color: #1f4fb2;
}

#site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;

  background-image: url("../images/header-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =========================
   Smart Link Row (light)
========================= */

/* float回り込み対策 + 位置ズレ防止 */
.smart-link-row {
  clear: both;
  width: 100%;
  margin: 18px 0 6px;
}

/* 1本でも複数でも破綻しない（複数並べたい時は下のgrid版に） */
.smart-link {
  display: flex;
  align-items: center;
  gap: 14px;

  text-decoration: none;
  color: #0b2a6f; /* 病院トーンの落ち着いた青 */
  max-width: 100%;

  /* “中央に漂う”の防止 */
  margin: 0;
}

/* 左テキスト */
.smart-link__label {
  font-size: 18px;
  letter-spacing: 0.1em;
  line-height: 1.2;

  /* 長い時に崩れない */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* テキストと矢印の間を「細い線」で埋める */
.smart-link__line {
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  flex: 1 1 auto;
  min-width: 24px;
}

/* 右の丸矢印 */
.smart-link__arrow {
  width: 56px;
  height: 56px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(11, 42, 111, 0.25);
  color: #0b2a6f;
  background: transparent;

  flex: 0 0 auto;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

/* Hover（軽く） */
.smart-link:hover .smart-link__arrow {
  transform: translateX(3px);
  border-color: rgba(11, 42, 111, 0.45);
  background: rgba(11, 42, 111, 0.04);
}
.smart-link:hover .smart-link__line {
  opacity: 0.55;
}

/* SP最適化 */
@media (max-width: 520px) {
  .smart-link__label {
    font-size: 16px;
    letter-spacing: 0.08em;

    /* SPは折り返し許可（見切れ回避） */
    white-space: normal;
  }
  .smart-link__arrow {
    width: 48px;
    height: 48px;
  }
}

/* フォーカス可視化 */
.smart-link:focus-visible {
  outline: 3px solid rgba(47, 95, 255, 0.25);
  outline-offset: 3px;
}

/* ===== 複数リンクを横並びにしたい場合（任意） =====
.smart-link-row{
  display: grid;
  gap: 14px;
}
@media (min-width: 900px){
  .smart-link-row{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
*/

/* =========================
   Readmore
========================= */

.readmore-block {
  position: relative;
}

/* チェックボックスは見せない */
.readmore-block input {
  display: none;
}

/* テキスト本体 */
.readmore-text {
  line-height: 1.9;
  color: #444;
  max-height: 7.6em; /* 約4行 */
  overflow: hidden;
  transition: max-height 0.5s ease;
  position: relative;
}

/* 下部にフェードをかける */
.readmore-text::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3em;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}

/* 開いたら制限解除 */
.readmore-block input:checked ~ .readmore-text {
  max-height: 2000px;
}
.readmore-block input:checked ~ .readmore-text::after {
  display: none;
}

/* 「続きを読む」リンク */
.readmore-toggle {
  display: inline-block;
  margin-top: 12px;
  cursor: pointer;
  color: #0b2a6f;
  font-size: 14px;
  letter-spacing: 0.12em;
}

/* 表示テキストの切り替え */
.readmore-toggle::before {
  content: "続きを読む →";
}
.readmore-block input:checked + .readmore-text + .readmore-toggle::before {
  content: "閉じる";
}
/* htmlがlang="en"の場合のみ、contentを上書きする */
:lang(en) .readmore-toggle::before {
  content: "Read More →";
}

/* 開いた後の「閉じる」も英語化する場合（必要な場合のみ） */
:lang(en) input:checked ~ .readmore-toggle::before {
  content: "Close";
}

/* =========================
   赤穂の歴史スライダー
========================= */
/* =========================
   History Slider (Simple)
========================= */
.history-slider {
  margin-top: 2em;
  margin-right: 0px;
  margin-bottom: 4em;
  margin-left: 0px;
}

.slider-history {
  width: 100%;
}

/* 余計なカード装飾を全部オフ */
.hiscap {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.hiscap img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0; /* 角丸を消す */
}

/* キャプションも“普通の文字”に */
.hiscap__cap {
  margin: 10px 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;

  font-size: 16px;
  line-height: 1.6;
  color: #111; /* 必要なら #0b2a6f にして病院ブルーでもOK */
}

/* Slickが勝手に入れる余白や影響を整理 */
.slider-history .slick-slide {
  padding: 0 10px;
}
.slider-history .slick-list {
  overflow: hidden;
}

/* dotsの色を“病院ブルー”に寄せる（任意） */
.slider-history .slick-dots li button:before {
  font-size: 10px;
  opacity: 0.25;
  color: #0b2a6f;
}
.slider-history .slick-dots li.slick-active button:before {
  opacity: 1;
  color: #0b2a6f;
}
/* スライダー周りの横スワイプを許可 */
.history-slider,
.slider-history,
.slider-history .slick-list,
.slider-history .slick-track,
.slider-history .slick-slide {
  touch-action: pan-y; /* 縦スクロールは許可、横ドラッグをSlickへ */
  -webkit-user-select: none;
  user-select: none;
}

/* 何かが上に被ってる可能性があるので、まず最前面に */
.history-slider {
  position: relative;
  z-index: 2;
}

/* 画像がドラッグを奪うケースを潰す */
.hiscap img {
  pointer-events: none; /* 画像自体にイベントを持たせない */
  -webkit-user-drag: none;
}

.smart-link__label_A {
  color: white;
}
.smart-link__arrow_A {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid white;
  color: white;
  background: transparent;
  flex: 0 0 auto;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}
.smart-link__line_A {
  height: 1px;
  background: white;
  opacity: 0.35;
  flex: 1 1 auto;
  min-width: 24px;
}

/* =========================
   バナー・カード
========================= */
:root {
  --ako-ink: #102d38;
  --ako-ruby: #87969b;
  --ako-rule: #d9dfe1;
  --ako-card-r: 18px;
  --ako-gap: 26px;
  --ako-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
  --ako-aspect: 980 / 440; /* 全カード統一 */
}

/* =========================
   最新トピックス（見出し）
========================= */
.ako-topics {
  padding: 46px 0 56px;
}
.ako-topics__wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 22px;
}

.ako-topics__head {
  margin-bottom: 18px;
}

.ako-topics__titleRow {
  display: flex;
  align-items: flex-end;
  gap: 18px;
}

.ako-topics__title {
  flex: 0 0 auto;
}

.ako-topics__h2 {
  margin: 0;
  color: var(--ako-ink);
  font-size: 32px;
  letter-spacing: 0.06em;
  font-weight: 400;
  line-height: 1.15;
}

.ako-topics__ruby {
  margin: 10px 0 0;
  color: var(--ako-ruby);
  font-weight: 300;
  letter-spacing: 0.18em;
  font-size: 14px;
}

/* ★ タイトル後に伸びる線 */
.ako-topics__rule {
  flex: 1;
  height: 1px;
  background: var(--ako-rule);
  margin-bottom: 12px; /* NEW TOPICS の位置と揃える */
  min-width: 24px;
}

/* PC/SP helper */
.pc-only {
  display: block;
}
.sp-only {
  display: none;
}

/* =========================
   カードグリッド（全て同サイズ）
========================= */
.ako-topics__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ako-gap);
}

.ako-card {
  border-radius: var(--ako-card-r);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--ako-shadow);
  aspect-ratio: var(--ako-aspect);
}

.ako-card__link {
  display: block;
  text-decoration: none;
}
.ako-card__media {
  display: block;
  width: 100%;
  height: 100%;
  background: #f6f7f8;
}

.ako-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* 縦長でも高さ揃う */
  object-position: center;
  transition: transform 0.25s ease;
}

.ako-card__link:hover img {
  transform: scale(1.01);
}

/* =========================
   レスポンシブ
========================= */
@media (max-width: 980px) {
  .ako-topics__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (max-width: 768px) {
  .ako-topics__h2 {
    font-size: 26px;
  }
  .ako-topics__rule {
    margin-bottom: 10px;
  }
}

@media (max-width: 640px) {
  .pc-only {
    display: none;
  }
  .sp-only {
    display: block;
  }

  .ako-topics {
    padding: 38px 0 44px;
  }
  .ako-topics__h2 {
    font-size: 22px;
  }
  .ako-topics__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* =========================
   doctor-card: 写真サイズを完全統一（トリミングで揃える）
========================= */
.doctor-card {
  display: flex;
  gap: 16px;
  align-items: center;
}

.doctor-photo {
  /* 箱を固定：ここで見た目のサイズが決まる */
  flex: 0 0 260px; /* PCでの横幅。好みで調整 */
  aspect-ratio: 4 / 3; /* 統一したい比率に（例: 4:3 / 1:1 / 3:4） */
  border-radius: 14px;
  overflow: hidden;
  margin: 0; /* figureのデフォ余白を殺す */
  background: #f3f6f7;
}

/* ここが肝：imgを箱いっぱいに貼り付けて、余りは切る */
.doctor-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* SPは横並びをやめて自然に（任意） */
@media (max-width: 640px) {
  .doctor-card {
    flex-direction: column;
    align-items: stretch;
  }
  .doctor-photo {
    flex-basis: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

/* =========================
   Service (minimal / high-end)
   ========================= */
:root {
  --svc-ink: #102d38;
  --svc-sub: #87969b;
  --svc-line: #d9dfe1;
  --svc-line2: #b8c1c4;
  --svc-bg: #ffffff;
  --svc-radius: 18px;

  /* ★ hoverで変える“指定の色”（必要ならここだけ差し替え） */
  --svc-hover: #455f68;

  /* subtle */
  --svc-soft: #eff2f3;
  --svc-soft2: #e7ecee;
}

/* wrap */
.svc {
  padding: 54px 0;
}
.svc__wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 22px;
}

/* panel = 白い大枠 */
.svc__panel {
  background: var(--svc-bg);
  border: 1px solid var(--svc-line);
  border-radius: var(--svc-radius);
  overflow: hidden;
}

/* ===== GRID ===== */
/* PC：4カラム固定（大阪中央病院感） */
.svc__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

/* 罫線：列境界 */
.svc__item {
  position: relative;
}
.svc__item + .svc__item {
  border-left: 1px solid var(--svc-line);
}

/* クリック領域を全部に */
.svc__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 42px 36px 34px; /* ★ 上の余白を増やして“余裕”を作る */
  text-decoration: none;
  color: var(--svc-ink);
  background: transparent;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

/* ===== ICON（ここが主戦場） ===== */
/* “アイコンが小さく見える”のは、アイコンの箱が小さいから */
.svc__icon {
  width: 112px;
  height: 112px;
  margin: 0 auto 26px;
  display: grid;
  place-items: center;
}

.svc__icon img {
  width: 112px; /* ★ 見た目の主サイズ */
  height: 112px;
  object-fit: contain;

  opacity: 0.82;
  filter: grayscale(1);
  transition:
    filter 0.25s ease,
    opacity 0.25s ease;
}

/* ===== TYPOGRAPHY ===== */
.svc__title {
  margin: 0;
  font-size: 24px;
  letter-spacing: 0.06em;
  font-weight: 500;
  line-height: 1.25;
}

.svc__en {
  margin: 10px 0 0;
  font-size: 12.5px;
  letter-spacing: 0.2em;
  color: var(--svc-sub);
}

.svc__desc {
  margin: 20px 0 0;
  color: var(--svc-sub);
  line-height: 1.95;
  font-size: 14.5px; /* ★ 少しだけ上げて“公式の読みやすさ” */
}

/* MORE：常に下に固定しつつ、ボタンの品位を上げる */
.svc__more {
  margin-top: auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  min-width: 132px;
  padding: 13px 22px;

  border-radius: 999px;
  background: var(--svc-soft);
  color: var(--svc-ink);

  letter-spacing: 0.16em;
  font-size: 13px;
  border: 1px solid rgba(0, 0, 0, 0.05);

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.svc__moreText {
  display: inline-block;
}
.svc__moreArrow {
  display: inline-block;
}

/* ===== HOVER（指定色へ反転） ===== */
/* “病院公式”なので、動きは少なく、変化は一貫させる */
.svc__link:hover {
  background-color: var(--svc-hover);
  color: #fff;
}

.svc__link:hover .svc__en,
.svc__link:hover .svc__desc {
  color: rgba(255, 255, 255, 0.78);
}

.svc__link:hover .svc__icon img {
  opacity: 1;
  filter: brightness(0) invert(1); /* 線アイコンを白へ */
}

/* MOREだけは白いピルで“締める” */
.svc__link:hover .svc__more {
  background: #fff;
  color: var(--svc-hover);
  border-color: rgba(255, 255, 255, 0.25);
}

/* ===== FOCUS（アクセシビリティもハイエンドの一部） ===== */
.svc__link:focus-visible {
  outline: 3px solid rgba(69, 95, 104, 0.35);
  outline-offset: -3px;
}

/* ===== TABLET（2列） ===== */
@media (max-width: 980px) {
  .svc__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* いったん全部消して、必要な線だけ再構築 */
  .svc__item {
    border-left: none;
    border-top: none;
  }
  .svc__item + .svc__item {
    border-left: none;
  }

  /* 行境界 */
  .svc__item:nth-child(n + 3) {
    border-top: 1px solid var(--svc-line);
  }
  /* 列境界（右列） */
  .svc__item:nth-child(2n) {
    border-left: 1px solid var(--svc-line);
  }

  .svc__link {
    padding: 38px 28px 30px;
  }

  .svc__icon {
    width: 112px;
    height: 112px;
    margin-bottom: 22px;
  }
  .svc__icon img {
    width: 68px;
    height: 68px;
  }
}

/* ===== MOBILE（1列） ===== */
@media (max-width: 640px) {
  .svc {
    padding: 44px 0;
  }

  .svc__grid {
    grid-template-columns: 1fr;
  }

  /* 行境界だけ */
  .svc__item {
    border-left: none;
  }
  .svc__item:nth-child(n + 2) {
    border-top: 1px solid var(--svc-line);
  }

  .svc__link {
    padding: 32px 22px 26px;
  }

  .svc__icon {
    width: 112px;
    height: 112px;
    margin-bottom: 18px;
  }
  .svc__icon img {
    width: 112px;
    height: 112px;
  }

  .svc__title {
    font-size: 22px;
  }
  .svc__desc {
    font-size: 14px;
    line-height: 1.9;
  }
  .svc__more {
    min-width: 124px;
    padding: 12px 20px;
    margin-top: 1em;
  }
}

/* =========================
	    各科ページのスタイル
	    ========================= */

/* ===== (1) 追加：ヘッダー高さをJSで入れるCSS変数 ===== */
:root {
  --header-h: 0px; /* JSで上書き */
}

/* ===== (2) 修正：被り対策は固定値ではなく var(--header-h) を使う ===== */
/*#contents{
	   padding-top: calc(var(--header-h) + env(safe-area-inset-top));
	 }*/

/* ページKV（横長ヘッダー画像） */
.page-kv {
  position: relative;
  width: 100%;
  height: 220px;
  background: url("../images/surgery.png") center/cover no-repeat;
}
@media (max-width: 768px) {
  .page-kv {
    height: 170px !important;
  }
}
.page-kv::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25); /* 文字を載せるなら少し暗幕 */
}
.page-kv .kv-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: 24px 20px;
  color: #fff;
  margin-top: var(--header-h) !important;
}
.page-kv .kv-title {
  margin: 0;
  font-size: 42px;
  letter-spacing: 0.04em;
  line-height: 1.1;
}
@media (max-width: 768px) {
  .page-kv .kv-title {
    font-size: 30px;
  }
}
.page-kv .kv-sub {
  margin: 8px 0 0;
  opacity: 0.9;
  letter-spacing: 0.08em;
}

/* パンくず */
.breadcrumb {
  font-size: 13px;
  color: #666;
  padding: 14px 20px;
}
.breadcrumb a {
  color: #666;
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}

/* 2カラムレイアウト */
.dept-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 34px;
  padding: 0 20px 40px;
}
@media (max-width: 900px) {
  .dept-layout {
    grid-template-columns: 1fr;
  }
}

/* 左サイドメニュー */
.dept-side {
  position: sticky;
  top: 120px; /* 固定ヘッダー分 */
  align-self: start;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 16px 14px;
}
@media (max-width: 900px) {
  .dept-side {
    position: static;
  }
}
.dept-side h3 {
  margin: 0 0 10px;
  font-size: 15px;
  letter-spacing: 0.06em;
}
.dept-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dept-nav li {
  border-top: 1px solid #f0f0f0;
}
.dept-nav li:first-child {
  border-top: none;
}
.dept-nav a {
  display: block;
  padding: 12px 10px;
  color: #111;
  text-decoration: none;
  font-size: 14px;
}
.dept-nav a:hover {
  background: #f7f7f7;
}

/* 右本文 */
.dept-main {
  background: #fff;
  border-radius: 10px;
}
.dept-main .dept-h1 {
  margin: 0 0 18px;
  font-size: 40px;
  letter-spacing: 0.04em;
}
@media (max-width: 768px) {
  .dept-main .dept-h1 {
    font-size: 30px;
  }
}
.dept-section {
  padding: 26px 18px;
  border-radius: 10px;
  margin-bottom: 18px;
}
.dept-section h2 {
  margin: 0 0 12px;
  font-size: 18px;
  letter-spacing: 0.04em;
  padding-bottom: 10px;
  /*border-bottom: 1px solid #eee;*/
}
.dept-section p {
  margin: 0 0 12px;
}

/* スタッフカード（任意） */
.staff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 768px) {
  .staff-grid {
    grid-template-columns: 1fr;
  }
}
.staff-card {
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.staff-card img {
  width: 72px;
  height: 72px;
  object-fit: cover;
}
.staff-meta .role {
  margin: 0;
  font-size: 12px;
  color: #666;
}
.staff-meta .name {
  margin: 2px 0 0;
  font-size: 16px;
}

/* 担当医表（任意） */
.dept-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.dept-table th,
.dept-table td {
  border: 1px solid #eee;
  padding: 10px;
  text-align: center;
}
.dept-table th {
  background: #fafafa;
}

/* =========================
	    Floating CTA (bottom)
	 ========================= */

/* フローティング分だけ本文の下に余白を確保（被り防止） */
#contents {
  padding-bottom: calc(92px + env(safe-area-inset-bottom));
}

/* ボタン本体 */
.floating-cta {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 9999;

  width: min(560px, calc(100% - 24px));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* 2ボタンを“太く”しすぎない */
.floating-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 14px 12px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.04em;

  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* 色は病院サイトのトーンに寄せる（派手すぎない青） */
.floating-cta__btn.is-ai {
  background: rgba(47, 95, 255, 0.92);
  color: #fff;
}
.floating-cta__btn.is-tel {
  background: rgba(30, 60, 150, 0.92);
  color: #fff;
}

.floating-cta__btn:active {
  transform: translateY(1px);
}

/* SPで横幅が狭いときは縦並び */
@media (max-width: 420px) {
  .floating-cta {
    grid-template-columns: 1fr;
  }
}

/* 印刷や極端な環境では出さない（任意） */
@media print {
  .floating-cta {
    display: none;
  }
}

/* ===== 右：カテゴリ＋カード ===== */
.dept-main {
  min-width: 0;
}
.dept-section {
  padding: 18px 0 26px;
  /*border-top: 1px solid #e9e9e9;*/
}
/*.dept-section:first-child{ border-top: none; padding-top: 0; }*/

.dept-section h2 {
  margin: 0 0 14px;
  font-size: 18px;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 14px;
}
.dept-section h2::after {
  content: "";
  height: 1px;
  background: #dcdcdc;
  flex: 1;
}

/* カードグリッド（添付っぽく3列） */
.dept-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px) {
  .dept-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .dept-cards {
    grid-template-columns: 1fr;
  }
}

/* カード（矢印つき） */
.dept-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 16px 16px;
  text-decoration: none;
  color: #111;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    border-color 0.12s ease;
}
.dept-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border-color: #d9d9d9;
}
.dept-card .meta {
  min-width: 0;
}
.dept-card .jp {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.04em;
}
.dept-card .en {
  margin: 6px 0 0;
  font-size: 12px;
  color: #777;
}
.dept-card .arrow {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f6ff;
  color: #2f5fff;
  flex: 0 0 auto;
  font-size: 18px;
}

/* =========================
	    波アニメーション　可変式
	 ========================= */
:root {
  --header-h: 172px; /* JSで上書きされる */
  --fix: 15px;
  --wave-h: 80px;
  --wave-offset: 0px;
}

.wave-section {
  padding-top: calc(var(--wave-h) - var(--fix));
  top: calc(-1 * var(--header-h) - var(--fix) + var(--wave-offset));
  margin-bottom: calc(-1 * var(--header-h) - var(--fix));
}

/* ===== Language switch (Medi Face-ish) ===== */
.lang-switch {
  position: absolute;
  right: 22px;
  top: 18px;
  z-index: 50;

  display: inline-flex;
  align-items: center;
  gap: 0;

  padding: 4px;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(16, 45, 56, 0.14);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lang-switch__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 30px;
  min-width: 44px;
  padding: 0 12px;

  font-size: 12px;
  letter-spacing: 0.12em;
  text-decoration: none;

  color: rgba(16, 45, 56, 0.7);
  border-radius: 999px;

  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.lang-switch__item:hover {
  background: rgba(16, 45, 56, 0.06);
  color: rgba(16, 45, 56, 0.92);
}

.lang-switch__item[aria-current="page"] {
  background: #102d38;
  color: #fff;
  box-shadow: 0 8px 18px rgba(16, 45, 56, 0.18);
}

@media (max-width: 640px) {
  .lang-switch {
    right: 14px;
    top: 12px;
    padding: 3px;
  }
  .lang-switch__item {
    height: 28px;
    min-width: 40px;
    padding: 0 10px;
    font-size: 11px;
  }
}

.lang-switch--floating {
  position: fixed;
  right: 0;
  top: 70px;
  z-index: 101;
  display: flex;
  gap: 6px;
  padding: 5px 10px;
  background: none !important;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0 0 0 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: top 0.25s ease;
}
.lang-switch--floating.top-init {
  top: 106px;
}
.lang-switch--floating .lang-switch__item {
  display: inline-block;
  padding: 2px 10px;
  font-size: 12px;
  text-decoration: none;
  color: #111;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
}

.lang-switch--floating .lang-switch__item[aria-current="page"] {
  background: #102d38;
  color: #fff;
  border-color: #102d38;
}

/* =========================
	    トップページ専用INDEX
	 ========================= */

/* ===== 横スクロール完全防止 ===== */
html,
body {
  overflow-x: hidden;
}

/* ===== ナビ全体 ===== */
.section-index-top {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ===== リストをグリッド化 ===== */
.section-index-top__list {
  list-style: none;
  margin: 0;
  padding: 0 24px;

  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;

  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}

/* ===== 各項目 ===== */
.section-index-top__list li {
  min-width: 0;
}

/* ===== リンク（診療科一覧風UI） ===== */
.section-index-top__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 18px 12px;
  width: 100%;
  box-sizing: border-box;

  font-size: 15px;
  color: var(--svc-hover) !important;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: #1a1a1a;
  text-decoration: none;

  /*border-left: 1px solid #e5e5e5;*/
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 一番左の区切り線を消す */
.section-index-top__list li:first-child a {
  border-left: none;
}

/* ===== 右の > ===== */
.section-index-top__list a::after {
  content: "›";
  font-size: 20px;
  color: #9aa0a6;
  margin-left: 12px;
  flex-shrink: 0;
}

/* ===== hover ===== */
.section-index-top__list a:hover {
  color: #1f4fa3;
}
.section-index-top__list a:hover::after {
  color: #1f4fa3;
}

/* ===== レスポンシブ ===== */
@media (max-width: 1200px) {
  .section-index-top__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .section-index-top__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .section-index-top__list a {
    font-size: 14px;
  }
}

@media (max-width: 600px) {
  .section-index-top__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 16px;
  }
}

@media (max-width: 420px) {
  .section-index-top__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================
	 産婦人科特設CSS
========================= */

/* カード（LP風） */
.obgyn-card {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.obgyn-card__head {
  padding: 14px 16px;
  border-left: 4px solid var(--primary-color);
  background: #fff;
}
.obgyn-card__title {
  margin: 0;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.obgyn-card__body {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 14px;
  padding: 16px;
  background: rgba(235, 171, 171, 0.1);
}
@media (max-width: 860px) {
  .obgyn-card__body {
    grid-template-columns: 1fr;
  }
}
.obgyn-card__text p {
  margin: 0 0 12px;
}
.obgyn-card__media img {
  width: 100%;
  height: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.obgyn-card__foot {
  display: flex;
  padding: 14px 16px;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  justify-content: center !important;
}
.obgyn-foot-split {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ボタン */
.obgyn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 220px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--primary-color);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 1px solid transparent;
}
.obgyn-btn:hover {
  filter: brightness(0.98);
}
.obgyn-btn--ghost {
  background: #fff;
  color: #4a3a3a;
  border-color: rgba(0, 0, 0, 0.14);
}

/* リスト */
.obgyn-list {
  margin: 0;
  padding-left: 1.2em;
  line-height: 1.9;
}
.obgyn-lead {
  margin: 0 0 14px;
  color: #4a3a3a;
  line-height: 1.9;
}

/* ノート枠 */
.obgyn-note {
  margin-top: 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 16px;
}
.obgyn-note h3 {
  margin: 0 0 10px;
  font-size: 16px;
  letter-spacing: 0.04em;
}
.obgyn-note p {
  margin: 0 0 10px;
}

/* ギャラリー：dept-main の幅に収まるレスポンシブ */
.obgyn-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 980px) {
  .obgyn-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .obgyn-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.obgyn-gallery__item {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #fff;
}
.obgyn-gallery__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* FAQ */
.obgyn-faq {
  display: grid;
  gap: 10px;
}
.obgyn-faq__item {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.obgyn-faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 800;
  letter-spacing: 0.03em;
  position: relative;
}
.obgyn-faq__item summary::-webkit-details-marker {
  display: none;
}
.obgyn-faq__item summary::after {
  content: "+";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(235, 171, 171, 0.18);
  color: #4a3a3a;
}
.obgyn-faq__item[open] summary::after {
  content: "–";
}
.obgyn-faq__body {
  padding: 0 16px 14px;
  color: #4a3a3a;
  line-height: 1.9;
}
.obgyn-faq__cta {
  margin-top: 14px;
  text-align: center;
}

.obgyn-hosp {
  width: 100%;
}
.obgyn-hosp__head {
  margin: 0 0 14px;
}
.obgyn-hosp__jp {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #4a3a3a;
}
.obgyn-hosp__en {
  margin: 6px 0 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: rgba(74, 58, 58, 0.55);
}

.obgyn-hosp__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
@media (max-width: 860px) {
  .obgyn-hosp__grid {
    grid-template-columns: 1fr;
  }
}

.obgyn-box {
  border-radius: 12px;
  overflow: hidden;
  background: #fbf6f6;
}
.obgyn-box__title {
  padding: 18px 16px;
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
}
.obgyn-box__title.is-pink {
  background: rgba(235, 171, 171, 0.9);
}
.obgyn-box__title.is-dark {
  background: rgba(74, 58, 58, 0.85);
}

.obgyn-box__body {
  padding: 18px 18px 20px;
  background: #fbf6f6;
}

/* 2列っぽい並び（左の例に寄せる） */
.obgyn-dot2 {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}
.obgyn-dot2 li {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0 0 10px;
}
.obgyn-dot2 span {
  position: relative;
  padding-left: 18px;
  color: #4a3a3a;
  line-height: 1.8;
  font-size: 14px;
}
.obgyn-dot2 span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(235, 171, 171, 0.9);
  transform: translateY(-50%);
}

/* 通常リスト */
.obgyn-dot {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.obgyn-dot li {
  position: relative;
  padding-left: 18px;
  margin: 0 0 10px;
  color: #4a3a3a;
  line-height: 1.9;
  font-size: 14px;
}
.obgyn-dot li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(235, 171, 171, 0.9);
  transform: translateY(-50%);
}

/* お願い */
.obgyn-request {
  margin-top: 18px;
  margin-bottom: 3em;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.obgyn-request__title {
  padding: 16px 16px 10px;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: #4a3a3a;
}
.obgyn-request__body {
  padding: 0 16px 16px;
}

.dept-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 40px;
}

@media (max-width: 900px) {
  .dept-layout {
    grid-template-columns: 1fr;
  }
}

.disease-banner {
  text-align: center; /* ついでに中央寄せ */
  margin: 1em;
}

.disease-banner img {
  width: 100%;
  max-width: 520px; /* ←PCでデカくならない上限（好みで調整） */
  height: auto;
  display: inline-block;
}

/* 本文カード内に “それっぽく” 溶け込ませる */
.insert-banners {
  margin: 22px 0;
  display: grid;
  gap: 14px;
}

/* 画像カード感（スクショの雰囲気に寄せる） */
.insert-banner {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.insert-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* PCで横並びにしたい場合（任意） */
@media (min-width: 900px) {
  .insert-banners {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===== 診療科ジャンプ：スクショと同じ系統デザイン ===== */
.dept-jump {
  width: min(1200px, 92vw);
  margin: 0 auto;
  padding: 10px 0 18px;
}

.dept-jump__title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  letter-spacing: 0.02em;
}

.dept-jump__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.dept-jump__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid #e5e7eb; /* 薄い枠 */
  border-radius: 6px; /* 角丸は控えめ */
  color: #111827;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.02em;
  box-sizing: border-box;
}

.dept-jump__icon {
  width: 18px;
  text-align: center;
  color: #6b7280; /* グレーの↓ */
  flex: 0 0 auto;
}

.dept-jump__btn:hover {
  border-color: #d1d5db;
}

.dept-jump__btn.is-active {
  border-color: #2563eb; /* 青い枠（選択中） */
  color: #2563eb;
}

.dept-jump__btn.is-active .dept-jump__icon {
  color: #2563eb;
}

/* スマホでも2列を維持したいならこのまま。
   1列に落としたいなら 768px で grid-template-columns:1fr に変更。 */
@media (max-width: 480px) {
  .dept-jump__grid {
    gap: 10px;
  }
  .dept-jump__btn {
    height: 44px;
    padding: 0 12px;
  }
}

/* ===== 診療科セクション（医師紹介用） ===== */
.dept-section {
  margin: 40px 0 24px;
}

/* 見出し行（日本語＋横ライン） */
.section-headline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
}

.section-headline .label {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #0f172a;
  white-space: nowrap;
}

/* 横に伸びる細ライン */
.section-headline .line {
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

/* 英語表記 */
.dept-en {
  margin: 0 0 18px;
  padding-left: 2px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #94a3b8;
}

/* ===== SP調整 ===== */
@media (max-width: 768px) {
  .dept-section {
    margin: 28px 0 18px;
  }

  .section-headline .label {
    font-size: 16px;
  }

  .dept-en {
    font-size: 11px;
  }
}

.doctor-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.doctor-link:focus-visible {
  outline: 2px solid #4e8ad6;
  outline-offset: 4px;
}

/* ===== 採用セクション ===== */

.recruit-section {
  background: #f5f8fb;
  padding: 80px 20px;
}

.recruit-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.recruit-cards {
  display: flex;
  gap: 30px;
  justify-content: center;
  margin-top: 40px;
  flex-wrap: wrap;
}

.recruit-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  width: 300px;
  text-align: center;
  text-decoration: none;
  color: #222;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}

.recruit-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.recruit-card img {
  width: 100%;
  height: auto;
  display: block;
}

.recruit-title {
  font-weight: 600;
  padding: 18px 0 10px;
}

.recruit-card .arrow {
  display: inline-block;
  margin-bottom: 18px;
  color: #3aa3e3;
  font-size: 18px;
}

.recruit-btn {
  margin-top: 40px;
  text-align: center;
}

.cc-icon {
  height: 32px; /* お好みで 24〜36px */
  width: auto;
  vertical-align: middle;
}

/* ===== Scoped styles: hk-note ===== */

/* グローバル line-height:2 の影響をこのセクションだけ遮断 */
.hk-note,
.hk-note * {
  line-height: 1.6;
}

.hk-note {
  padding: 42px 0;
  background: #fff;
}

.hk-note__inner {
  width: min(1100px, calc(100% - 36px));
  margin: 0 auto;
}

.hk-note__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  /*border-bottom: 1px solid #eee;*/
}

.hk-note__title {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0.04em;
}

.hk-note__sub {
  margin: 6px 0 0;
  color: #666;
  font-size: 13px;
  line-height: 1.6;
}

.hk-note__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: 13px;
  color: #1f2a44;
  padding: 10px 12px;
  /*border: 1px solid #dfe5ef;*/
  border-radius: 10px;
  transition:
    transform 0.12s ease,
    background 0.12s ease;
  white-space: nowrap;
  line-height: 1.2;
}
.hk-note__more:hover {
  background: #f6f8fc;
  transform: translateY(-1px);
}

/* grid */
.hk-note__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 980px) {
  .hk-note__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .hk-note__grid {
    grid-template-columns: 1fr;
  }
}

/* card */
.hk-note__card {
  position: relative;
  border: 1px solid #eee;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;

  /* 高さが暴れないように */
  display: flex;
  flex-direction: column;
}

.hk-note__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.hk-note__link {
  display: block;
  color: inherit;
  text-decoration: none;
  height: 100%;
}

.hk-note__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #f2f4f8;
  overflow: hidden;
}
.hk-note__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hk-note__body {
  /* 文字が沈まないよう余白を少し増やす */
  padding: 16px 16px 12px;
}

/* タイトル：2行で止めて読みやすく */
.hk-note__h3 {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  font-weight: 700;
  color: #111;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

  font-feature-settings: "palt";
}

/* 説明文：3行で止めて整える */
.hk-note__desc {
  margin: 0;
  color: #555;
  font-size: 13px;
  line-height: 1.75;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.hk-note__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 14px;
  color: #777;
  font-size: 12px;
  border-top: 1px solid #f0f0f0;

  /* 下に張り付ける */
  margin-top: auto;
  line-height: 1.2;
}

.hk-note__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}

.hk-note__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #2b3ea8;
}

/* skeleton (loading) */
.hk-note__skeleton {
  border-radius: 14px;
  border: 1px solid #eee;
  background: linear-gradient(90deg, #f2f4f8 0%, #f7f8fb 50%, #f2f4f8 100%);
  background-size: 200% 100%;
  animation: hkNoteShimmer 1.1s infinite;
  height: 260px;
}
@keyframes hkNoteShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* error notice */
.hk-note__notice {
  margin-top: 14px;
  color: #666;
  font-size: 13px;
  background: #fafbfe;
  border: 1px solid #e6ebf5;
  padding: 12px 14px;
  border-radius: 12px;
  line-height: 1.6;
}

/* ===== hk-note patch v2: “埋もれ”対策（clampの上下欠け防止） ===== */

/* タイトル：上下が切れないように“逃げ”を作る + clamp安定化 */
.hk-note__h3 {
  padding: 2px 0 3px; /* ←これが効く（上下の欠け防止） */
  line-height: 1.65; /* 少しだけゆとり */
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.01em;

  /* line-clamp（webkit-box）は欠けやすいので安全策を追加 */
  display: block;
  overflow: hidden;
  max-height: calc(1.65em * 2 + 6px); /* 2行ぶん + 逃げ */
}

/* Chrome/Safari対応：line-clampも併用（効く環境では綺麗に切れる） */
@supports (-webkit-line-clamp: 2) {
  .hk-note__h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    max-height: none; /* webkit側に任せる */
  }
}

/* 本文も同様に“沈み”防止（任意だが見栄えが揃う） */
.hk-note__desc {
  padding-top: 1px;
  line-height: 1.8;
  display: block;
  overflow: hidden;
  max-height: calc(1.8em * 3 + 4px);
}
@supports (-webkit-line-clamp: 3) {
  .hk-note__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    max-height: none;
  }
}

/* ===== hk-note final patch ===== */

/* 1) クリップはサムネだけにする（これが一番効く） */
.hk-note__card {
  overflow: visible; /* ← card全体のクリップを解除 */
  display: flex;
  flex-direction: column;
}

.hk-note__thumb {
  overflow: hidden; /* ← クリップはthumbへ移す */
  border-radius: 14px 14px 0 0; /* ← 上だけ角丸 */
}

/* 2) 本文側の余白と可読性 */
.hk-note__body {
  padding: 18px 16px 12px;
}

/* 3) タイトル：太字でも欠けにくい設定 + 2行クランプ */
.hk-note__h3 {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 800;
  color: #30363d;

  /* クランプ（欠け対策として少し余裕を持たせる） */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

  padding-top: 2px; /* ← 太字和文の“沈み”対策 */
  padding-bottom: 1px; /* ← 下欠け対策 */
  font-feature-settings: "palt";
}

/* 4) 説明文：3行クランプ */
.hk-note__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  color: #555;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* 5) フッターを下に固定（高さが暴れない） */
.hk-note__link {
  height: 100%;
}
.hk-note__meta {
  margin-top: auto;
}

/* ===== FIX: global header styles leaking into hk-note ===== */
section.hk-note > .hk-note__inner > header.hk-note__head {
  position: static !important; /* ← global header{position:absolute} を殺す */
  inset: auto !important;
  width: auto !important;

  padding: 0 !important; /* ← global header padding を殺す */
  margin: 0 0 18px !important;

  color: inherit !important; /* ← global header color:#fff を殺す */
  background: transparent !important;
  z-index: auto !important;
}

/* 見出し周りの文字色を明示 */
section.hk-note .hk-note__title {
  color: #455f68 !important;
}
section.hk-note .hk-note__sub {
  color: #666 !important;
}
section.hk-note .hk-note__more {
  color: #1f2a44 !important;
}

.message-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 32px;
  align-items: start;
}

.message-photo img {
  width: 100%;
  border-radius: 12px;
  background: #fff;
}

.message-role {
  font-size: 14px;
  color: #666;
  margin: 0 0 6px;
}

.message-name {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 6px;
}

.message-tagline {
  font-size: 15px;
  color: #3a6ea5;
  margin: 0 0 18px;
}

.message-text p {
  margin: 0 0 14px;
  line-height: 1.9;
}

@media (max-width: 768px) {
  .message-layout {
    grid-template-columns: 1fr;
  }
}

.ward-intro {
  margin: 40px 0 56px;
}

.ward-intro h2 {
  font-size: 26px;
  margin-bottom: 12px;
}

.ward-lead {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
}

/* ===== 病棟セクション画像デザイン改善 ===== */

.ward-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.ward-photo {
  flex: 0 0 42%; /* 画像を少し小さめに */
  max-width: 520px;
}

.ward-photo img {
  width: 100%;
  height: auto;
  border-radius: 10px; /* 角丸 */
  object-fit: cover;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); /* 軽い高級感 */
  transition: transform 0.3s ease;
}

.ward-photo img:hover {
  transform: scale(1.02); /* ほんの少しだけ浮かせる */
}

/* テキスト側 */
.ward-text {
  flex: 1;
  line-height: 1.9;
  font-size: 16px;
}

/* レスポンシブ */
@media (max-width: 1024px) {
  .ward-layout {
    gap: 30px;
  }
  .ward-photo {
    flex: 0 0 48%;
  }
}

@media (max-width: 768px) {
  .ward-layout {
    flex-direction: column;
  }

  .ward-photo {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

.certified-photo {
  border-radius: 10px;
  overflow: hidden;
}
.certified-photo img {
  width: 40%;
  border-radius: 10px !important;
}

/* スマホだけ */
@media (max-width: 767px) {
  .certified-photo img {
    width: 100%;
  }
}

/* =========================
   Logo cards (2 rows x 4 etc.)
   画像みたいな「白カード＋影＋中央寄せ」UI
   ========================= */

/* ===================== 関連施設（ロゴカード表示） ===================== */
.related-facilities-section {
  padding: 0;
  padding-bottom: 6em !important;
  background: #f7fafc; /* 採用セクション寄せ */
}

.related-facilities-section .inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px;
}

.related-facilities-section .section-title {
  text-align: center;
  font-size: 34px;
  letter-spacing: 0.06em;
  margin: 0 0 18px;
  color: #222;
}

.related-facilities-section .section-lead {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 34px;
  color: #555;
  line-height: 1.9;
}

.related-facilities-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.related-facilities-grid > li {
  margin: 0;
}

/* カード本体 */
.related-facilities-card {
  display: grid;
  place-items: center;
  width: 100%;
  height: 160px; /* ロゴカード感 */
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(0, 0, 0, 0.05);
  text-decoration: none;
  overflow: hidden; /* 角丸を画像に効かせる */
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

/* hover（PCのみ） */
@media (hover: hover) {
  .related-facilities-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.1);
  }
}

/* 画像（ロゴっぽく「収める」） */
.related-facilities-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* レスポンシブ */
@media (max-width: 1024px) {
  .related-facilities-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .related-facilities-section {
    padding: 0;
    padding-bottom: 6em !important;
  }
  .related-facilities-section .section-title {
    font-size: 28px;
  }
  .related-facilities-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .related-facilities-card {
    height: 96px;
    border-radius: 14px;
  }
  .related-facilities-card img {
    width: 100%;
    height: 100%;
  }
}
@media (max-width: 420px) {
  .related-facilities-grid {
    grid-template-columns: 1fr;
  }
  .related-facilities-card {
    height: 92px;
  }
}

.group-p {
  font-size: 0.8em !important;
  text-align: center;
}

/* ===================== お問い合わせ（TOP末尾） ===================== */
.contact-section {
  padding: 80px 0;
  background: #eef6fb; /* 淡いブルー系 */
}

.contact-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 34px;
  align-items: start;
}

.contact-copy .contact-eyebrow {
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #1c72b8;
  margin: 0 0 10px;
}

.contact-copy .contact-title {
  font-size: 40px;
  line-height: 1.25;
  letter-spacing: 0.02em;
  margin: 0 0 18px;
  color: #0f1b2d;
}

.contact-copy .contact-lead {
  margin: 0 0 18px;
  color: #3b4a5a;
  line-height: 2;
}

.contact-note {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.07);
  padding: 18px 18px 16px;
}

.contact-note-title {
  font-size: 16px;
  margin: 0 0 10px;
  color: #0f1b2d;
}

.contact-note-list {
  margin: 0;
  padding-left: 1.2em;
  color: #2c3a49;
  line-height: 1.9;
}

.contact-note-foot {
  margin: 10px 0 0;
  font-size: 12px;
  color: #6a7786;
  line-height: 1.7;
}

/* 右：フォームカード */
.contact-form-wrap {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 22px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.1);
  padding: 22px 22px 18px;
}

.contact-form-head {
  margin-bottom: 14px;
}

.contact-form-title {
  font-size: 22px;
  margin: 0 0 6px;
  color: #0f1b2d;
}

.contact-form-sub {
  margin: 0;
  color: #5b6a79;
  line-height: 1.8;
  font-size: 13px;
}

.contact-form .contact-field {
  margin-top: 14px;
}

.contact-form label {
  display: block;
  font-weight: 700;
  margin: 0 0 6px;
  color: #0f1b2d;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 1px solid rgba(20, 30, 40, 0.16);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 14px;
  background: #fff;
  color: #0f1b2d;
  outline: none;
  transition:
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.contact-form textarea {
  resize: vertical;
  min-height: 140px;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: rgba(28, 114, 184, 0.55);
  box-shadow: 0 0 0 4px rgba(28, 114, 184, 0.12);
}

.contact-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}

.contact-btn-primary {
  background: #0b5ea8;
  color: #fff;
  border-color: rgba(0, 0, 0, 0);
}

.contact-btn-ghost {
  background: #fff;
  color: #0b5ea8;
  border-color: rgba(11, 94, 168, 0.28);
}

@media (hover: hover) {
  .contact-btn-primary:hover {
    filter: brightness(1.03);
    transform: translateY(-1px);
  }
  .contact-btn-ghost:hover {
    background: rgba(11, 94, 168, 0.06);
  }
}

.contact-foot {
  margin: 14px 0 0;
  font-size: 12px;
  color: #6a7786;
  line-height: 1.7;
}

/* レスポンシブ */
@media (max-width: 980px) {
  .contact-inner {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .contact-copy .contact-title {
    font-size: 32px;
  }
}

@media (max-width: 560px) {
  .contact-section {
    padding: 56px 0;
  }
  .contact-form-wrap {
    padding: 18px 16px 16px;
    border-radius: 18px;
  }
  .contact-note {
    border-radius: 16px;
  }
  .contact-actions {
    gap: 10px;
  }
  .contact-btn {
    width: 100%;
  }
}

/* ================= CONTACT SECTION ================= */

.contact-section {
  padding: 120px 0; /* 上下余白をしっかり取る */
  background: linear-gradient(135deg, #c9d9e6, #dce6ee);
}

/* ← ここが重要 */
.contact-section .inner {
  max-width: 1200px; /* 横幅を制限 */
  margin: 0 auto; /* 中央寄せ */
  padding: 0 60px; /* ← 左右余白を広げる */
}

/* PC時はさらに余白を持たせる */
@media (min-width: 1400px) {
  .contact-section .inner {
    padding: 0 100px;
  }
}

/* SP */
@media (max-width: 768px) {
  .contact-section {
    padding: 80px 0;
  }

  .contact-section .inner {
    padding: 0 24px; /* モバイルでも左右余白確保 */
  }
}

.outpatient-banner {
  margin-bottom: 2em !important;
}

.no-photo-text {
  margin-top: -0.8em !important;
  font-size: 0.6em; /* 好きなサイズに調整 */
  opacity: 0.85; /* 少しトーンを落とすなら */
}

.stat-image {
  width: min(100%, 980px);
  margin: 0 auto;
}

.stat-image img {
  width: 100% !important;
  height: auto;
  display: block;
  border: 1px solid #eee;
  background: #fff;
}
#menubar_hdr {
  z-index: 10001 !important;
  position: fixed;
}

.lang-switch--floating {
  z-index: 9990 !important;
  pointer-events: none;
}

.lang-switch--floating .lang-switch__item {
  pointer-events: auto;
}

/*Medi Face*/
.medi-face-support__banner {
  display: grid;
  grid-template-columns: 420px 1fr 210px;
  align-items: center;
  gap: 22px;
  width: min(1160px, 100%);
  margin: 0 auto;
  padding: 18px 26px;
  border: 2px solid #9bb0d1;
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(33, 53, 85, 0.05);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.medi-face-support__brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  min-width: 0;
  width: 100%;
}

.medi-face-support__brand img {
  display: block;
  width: 14em;
  max-width: 360px;
  height: auto;
  object-fit: contain;
}

.medi-face-support__tag {
  margin-top: 0;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.medi-face-support__copy {
  padding-left: 26px;
  border-left: 1px solid #d7dfec;
  font-size: 14px;
  line-height: 1.95;
  color: #3f5f90;
  font-weight: 600;
}

@media (max-width: 1200px) {
  .medi-face-support__banner {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .medi-face-support__brand {
    align-items: center;
  }

  .medi-face-support__brand img {
    width: 100%;
    max-width: 300px;
  }

  .medi-face-support__tag {
    white-space: normal;
  }

  .medi-face-support__copy {
    padding-left: 0;
    padding-top: 18px;
    border-left: 0;
    border-top: 1px solid #d7dfec;
  }

  .medi-face-support__cta {
    max-width: 300px;
    justify-self: start;
  }
}

@media (max-width: 768px) {
  .medi-face-support__banner {
    padding: 16px;
    border-radius: 12px;
  }

  .medi-face-support__brand {
    gap: 10px;
  }

  .medi-face-support__brand img {
    width: 100%;
    max-width: 220px;
  }

  .medi-face-support__tag {
    font-size: 14px;
    white-space: normal;
  }
}