@charset "utf-8";

/* ==========================================================================
   custom.css ― 自分で調整するための専用CSS

   ・このファイルは SCSS から作られていません。手で直接編集して大丈夫です。
   ・すべてのCSSの中で「いちばん最後」に読み込まれるので、
     ここに書いた内容が最優先で反映されます。
   ・SCSSを作り直しても、このファイルは上書きされません。

   今後デザインを調整したいときは、まずこのファイルに書き足してください。
   ========================================================================== */


/* ==========================================================================
   トップページ アクセスセクション
   対応するHTML : front-page.php の <section class="p-access" id="access">
   ========================================================================== */

/* セクション全体の上下余白
   （元は下側に215pxの余白があった。カードを地図に重ねるレイアウトを
     やめたので、上下そろえた余白に変更） */
.p-access {
  padding: 100px 0;
  /* 緑背景は前セクションの ::before が固定高さのため途中で切れていた */
  background: linear-gradient(to right bottom, #E9F6DA, #F4FBEC);
}

/* 3ブロックの配置。ここがレイアウトの心臓部
   grid-template-areas は「1行目：左にcard・右にparking」
                        「2行目：mapが横いっぱい」という意味 */
.p-access2 {
  --p-access-row: 440px;   /* ★パソコン表示の1段の高さ。ここだけ変えれば上下とも変わります */

  max-width: 954px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "card parking"
    "map  map";
  gap: 24px;
}

.p-access2__card    { grid-area: card; }
.p-access2__parking { grid-area: parking; }
.p-access2__map     { grid-area: map; }

/* 白いカードの共通の見た目 */
.p-access2__card,
.p-access2__parking {
  background-color: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(96, 103, 86, 0.12);
  padding: 40px;
}

/* --- 左上：アクセス情報 --- */
.p-access2__title-group {
  margin-bottom: 20px;
}

/* --- 右上：駐車場イラスト --- */
.p-access2__parking {
  display: flex;
  flex-direction: column;
}

.p-access2__parking-heading {
  font-size: 20px;
  font-weight: 700;
  color: #30871E;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 20px;
}

.p-access2__parking-figure {
  margin: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-access2__parking-figure img {
  width: 100%;
  height: auto;
}

/* --- 下：Googleマップ --- */
.p-access2__map {
  border-radius: 10px;
  overflow: hidden;
  background-color: #EAF0E6;
}

.p-access2__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  aspect-ratio: 16 / 7;   /* スマホ表示のときの地図の縦横比 */
}

/* --- パソコン表示（幅1025px以上）：上の段と地図を同じ高さに揃える --- */
@media screen and (min-width: 1025px) {
  .p-access2 {
    grid-template-rows: var(--p-access-row) var(--p-access-row);
  }

  /* カードの中身を上下中央に置く */
  .p-access2__card {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* 段の高さに従わせるため、縦横比の指定を解除する */
  .p-access2__map iframe {
    aspect-ratio: auto;
  }
}

/* --- スマホ・タブレット表示（幅1024px以下）：縦1列に積む --- */
@media screen and (max-width: 1024px) {
  .p-access {
    padding: 12.8205128205vw 0;
  }

  .p-access2 {
    max-width: none;
    grid-template-columns: 1fr;
    grid-template-areas:
      "card"
      "parking"
      "map";
    gap: 5.1282051282vw;
  }

  .p-access2__card,
  .p-access2__parking {
    padding: 7.6923076923vw;
  }

  .p-access2__title-group {
    margin-bottom: 5.1282051282vw;
  }

  .p-access2__parking-heading {
    font-size: 4.6153846154vw;
    margin-bottom: 5.1282051282vw;
  }
}


/* ==========================================================================
   医院紹介ページ アクセス：駐車場の配置図
   対応するHTML : page-about.php の .p-access__block--parking
   ========================================================================== */

.p-access::before {
  height: auto;
  bottom: 0;
}

.p-access__block--parking .p-access__image {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.p-access__parking-map {
  margin: 0;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 16px;
}

.p-access__parking-map img {
  width: 100%;
  height: auto;
  border-radius: 0;
}

@media screen and (max-width: 1024px) {
  .p-access__block--parking .p-access__image {
    gap: 4.1025641026vw;
  }

  .p-access__parking-map {
    border-radius: 2.5641025641vw;
    padding: 4.1025641026vw;
  }
}


/* ==========================================================================
   待合室のチームラボ紹介セクション
   対応するHTML : parts/parts-teamlab.php
   （トップページと医院紹介ページの2か所で使っています）
   ========================================================================== */

.p-teamlab {
  padding: 60px 20px 100px;
}

.p-teamlab__inner {
  max-width: 996px;   /* トップページ：「当院の特徴」と同じ幅 */
  margin: 0 auto;
}

/* 医院紹介ページ用：「当院の基本情報」と同じ幅にそろえる */
.p-teamlab__inner--narrow {
  max-width: 800px;
}

.p-teamlab__lead {
  text-align: center;
  line-height: 1.9;
  letter-spacing: .03em;
  margin-bottom: 40px;
}

/* バナー2枚を縦に並べる */
.p-teamlab__banners {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 40px;
}

/* バナーの上に付く「発熱のないお子様の待合室」などの見出し */
.p-teamlab__label {
  font-size: 18px;
  font-weight: 700;
  color: #30871E;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 12px;
}

.p-teamlab__link {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(96, 103, 86, 0.18);
  transition: opacity 0.3s;
}

.p-teamlab__link:hover,
.p-teamlab__link:focus-visible {
  opacity: 0.85;
}

.p-teamlab__link img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- スマホ・タブレット表示（幅1024px以下） --- */
@media screen and (max-width: 1024px) {
  .p-teamlab {
    padding: 10.2564102564vw 5.1282051282vw 15.3846153846vw;
  }

  .p-teamlab__inner,
  .p-teamlab__inner--narrow {
    max-width: none;
  }

  .p-teamlab__lead {
    font-size: 4.1025641026vw;
    margin-bottom: 7.6923076923vw;
  }

  .p-teamlab__banners {
    gap: 7.6923076923vw;
  }

  .p-teamlab__label {
    font-size: 4.358974359vw;
    margin-bottom: 3.0769230769vw;
  }
}