/* タブレット〜小さめのノート（768〜1199px）の調整。
   デザインは PC 1440 / SP 375 の 2 種類しかないため、その間の幅では
   1080px 前提の段組みが潰れる（6 列のアイコン、4 列のカードなど）。
   ここで列数だけを落として、文字やアイコンが痩せないようにする。

   あわせて FV の縦横比も、縦に長いモニターで画面を占有しすぎないよう頭打ちにする。 */

/* ===== FV は高さを頭打ちにする =====
   1440×808 の比率のままだと、24 インチ以上のモニターで FV だけで 1 画面を超え、
   お知らせまでスクロールしないと何も見えない。 */
/* aspect-ratio に max-height を足すと、高さに合わせて **幅まで縮む**。
   横幅は画面いっぱいのまま高さだけ頭打ちにしたいので、height で指定する。 */
@media (min-width: 768px) {
  .p-fv {
    aspect-ratio: auto;
    width: 100%;
    height: min(calc(100vw * 808 / 1440), 86vh, 880px);
  }
}
/* 幅だけでなく高さにも連動させる。ウィンドウの高さが低いと KV が縮むため、文字だけ元の大きさだとコピーが下段の顔にかかる。 */
.p-fv__title { font-size: clamp(30px, min(3.6vw, 6.8vh), 54px); }
.p-fv__lead { font-size: clamp(14px, min(1.4vw, 2.7vh), 20px); }
/* コピーの下余白は画面の高さではなく KV の高さを基準にする。
   縦長のタブレットだと 7vh が大きくなりすぎ、コピーの箱が
   下段の顔まで押し上がってしまうため。 */
.p-fv__copy { bottom: clamp(16px, 4%, 48px); }
/* リード文は PC では 1 行に流す。2 行だと箱が高くなり顔にかかる。
   スマホは縦書き 2 列のままにしたいので br は残す。 */
@media (min-width: 768px) {
  .p-fv__lead br { display: none; }
}

/* 下層の FV 帯も同じ考え方で、細長くなりすぎないようにする。 */
.p-lfv__bg img { max-height: 46vh; }

@media (min-width: 1440px) {
  /* 大画面ではヘッダーのパネルが本文より外に出ないようにそろえる */
  .l-gnav__panel--wide { width: min(1160px, calc(100vw - 80px)); }
}

@media (max-width: 1199px) {
  /* --- トップ --- */
  .p-service__list { grid-template-columns: repeat(3, 1fr); }
  .p-service__links { grid-template-columns: repeat(3, 1fr); }
  .p-disease__list { grid-template-columns: repeat(3, 1fr); }
  .p-popular__inner { grid-template-columns: 1fr; }
  .p-popular__list { grid-template-columns: repeat(4, 1fr); gap: 32px 0; }
  .p-hours__box { grid-template-columns: 1fr; }
  .p-hours__map { max-width: 640px; }
  .p-links__list { grid-template-columns: repeat(2, 1fr); }
  .p-support__list { grid-template-columns: repeat(2, 1fr); }
  .p-info__list { grid-template-columns: repeat(3, 1fr); }
  .p-banner__list { grid-template-columns: 1fr 1fr; }

  /* --- フッター --- */
  .l-footer__top { grid-template-columns: 1fr; }
  .l-footer__map { max-width: 560px; }
  .l-footer__nav { grid-template-columns: 1fr 1fr; gap: 32px; }
  .l-footer__col--last { border-left: 0; padding-left: 0; }

}

/* 下層の本文幅。スマホ（767px 以下）の 335px は lower.css の指定を活かすため、
   ここはタブレット幅だけに効かせる。 */
@media (min-width: 768px) and (max-width: 1199px) {
  .p-lower__inner { width: min(100% - 56px, 920px); }
}

@media (max-width: 1023px) {
  .p-service__cards { grid-template-columns: 1fr; }
  .p-feature__row { grid-template-columns: 1fr; }
  .p-recruit__inner { grid-template-columns: 1fr; }
  .p-popular__list { grid-template-columns: repeat(3, 1fr); }
  .p-disease__list { grid-template-columns: repeat(2, 1fr); }
  .p-service__list,
  .p-service__links { grid-template-columns: repeat(2, 1fr); }
  .p-info__list { grid-template-columns: repeat(2, 1fr); }
}