@charset "UTF-8";

/* ==================================================
   Main Visual (p-top-mv)
================================================== */
.p-top-mv {
  width: 100%;
  height: 500px; /* PC版の高さ（デザインに合わせて微調整してください） */
  max-width: 1400px;
  margin: 0 auto;

  /* ↓ 後で画像を書き出したら、ここのコメントを外してパスを合わせます */
  background-image: url("../img/top/mv_pc.png");
  background-size: cover; /* 画像を要素いっぱいに広げる */
  background-position: center; /* 画像の中央を表示 */
  background-repeat: no-repeat;

  /* 帯を上下中央に配置するためのFlexbox */
  display: flex;
  align-items: center;
}

/* 黒い半透明の帯 */
.p-top-mv__inner {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* 0.4は透明度。デザインに合わせて調整 */
  padding: 40px 20px;
  text-align: center;
}

/* キャッチコピー */
.p-top-mv__copy {
  color: #fff;
  font-size: 55px; /* PC版の文字サイズ */
  font-weight: normal; /* デザインが細字なら normal、太字なら bold */
  line-height: 1.4;
  letter-spacing: 0.1em;
  margin: 0;
}

.p-top-mv__copy1 {
  font-size: 26px;
  line-height: 2;
}

/* ==================================================
   SP用スタイル（画面幅768px以下で適用）
================================================== */
@media screen and (max-width: 768px) {
  .p-top-mv {
    height: 600px; /* スマホ版は少し高さを低くする */
    /* ↓ スマホ専用の縦長画像があればここで上書き指定します */
    background-image: url("../img/top/mv_sp.png");
  }

  .p-top-mv__inner {
    padding: 20px 15px; /* 帯の上下の余白を少し狭める */
  }

  .p-top-mv__copy {
    font-size: 6vw;
  }

  .p-top-mv__copy1 {
    font-size: 4vw;
    line-height: 1.8;
    margin-bottom: 1%;
  }
}

/* ==================================================
   Banners (p-top-banners)
================================================== */
.p-top-banners {
  padding: 60px 0;
  background-color: #fff;
}

.p-top-banners__list {
  display: flex;
  flex-direction: column; /* ★変更：横並びから縦並びに */
  align-items: center; /* ★追加：バナーを中央揃えにする */
  gap: 30px; /* ★変更：上下の隙間を少し広めに */
}

.p-top-banners__item {
  width: 100%;
  max-width: 800px; /* ★追加：バナーが広がりすぎないよう最大幅を設定（デザインに合わせて調整） */
  transition:
    transform 0.3s,
    opacity 0.3s;
}

.p-top-banners__item:hover {
  transform: translateY(-5px);
  opacity: 0.9;
}

.p-top-banners__item img {
  width: 100%;
  height: auto;
  /* 画像自体に薄い影をつけて、少し浮いているような高級感を出す（お好みで） */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* SP用：余白の調整のみ */
@media screen and (max-width: 768px) {
  .p-top-banners {
    padding: 30px 0;
  }
  .p-top-banners__list {
    gap: 15px; /* スマホでは上下の隙間を少し狭める */
  }
}

/* ==================================================
   About (p-about)
================================================= */
.p-about {
  padding: 30px 0 40px;
  /* ★修正：背景色をメインカラーに、テキストを全て白に */
  background-color: var(--color-accent);
  color: #fff;
}

/* ★追加：「医院紹介」タイトルのスタイル */
.p-about__title {
  text-align: center;
  font-size: 25px;
  font-weight: normal;
  margin-bottom: 30px;
  letter-spacing: 0.1em;
}

.p-about__content {
  display: flex;
  align-items: stretch;
  gap: 50px;
}

.p-about__img,
.p-about__text-area {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.p-about__img img {
  width: 100%;
}

.p-about__director {
  font-size: 18px;
  font-weight: normal;
  margin-top: 15px;
  margin-bottom: 0;
  text-align: center;
}

.p-about__text {
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 30px;
}

/* ★修正：ボタンをテキストに対して真ん中揃え */
.p-about__btn-area {
  text-align: center;
  margin-top: auto;
}

.c-btn--more {
  display: inline-block;
  /* ★修正：背景が水色なので、ボタンは白（文字は水色）にして目立たせる */
  background-color: #fff;
  color: #6ab36d;
  padding: 12px 40px 12px 30px;
  border-radius: 2px;
  text-decoration: none;
  font-weight: normal;
  font-size: 14px;
  transition: opacity 0.3s;
  position: relative;
  letter-spacing: 0.1em;
}
.c-btn--more:hover {
  opacity: 0.8;
}

.c-btn--more::after {
  content: "";
  position: absolute;
  top: 50%; /* 上下の中央に配置 */
  right: 25px; /* 右端からの距離 */
  width: 8px; /* 矢印の横幅 */
  height: 8px; /* 矢印の縦幅 */
  border-top: 2px solid var(--color-main); /* 上の線（水色） */
  border-right: 2px solid var(--color-main); /* 右の線（水色） */

  /* 位置を微調整して、45度回転させる */
  transform: translateY(-50%) rotate(45deg);
}

/* SP用：768pxで縦積みに切り替え */
@media screen and (max-width: 768px) {
  .p-about {
    padding: 50px 0;
  }
  .p-about__title {
    font-size: 24px;
    margin-bottom: 25px;
  }
  .p-about__content {
    flex-direction: column;
    gap: 25px;
  }
  .p-about__director {
    text-align: center;
  }
}

/* ==================================================
   News (p-news)
================================================= */
.p-news {
  padding: 70px 0;
  background-color: #e5e5e5; /* カンプに近い薄いグレー */
}

/* PC：タイトルとリストを左右に分ける */
.p-news__inner {
  display: flex;
  gap: 20px; /* 左右の隙間 */
}

/* 左側：タイトルエリア */
.p-news__header {
  width: 30%; /* タイトルエリアの幅を固定 */
  flex-shrink: 0; /* 幅が縮まらないようにする */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-news__title-en {
  font-size: 30px;
  font-weight: normal;
  color: #707375;
  letter-spacing: 0.1em;
}

.p-news__title-ja {
  font-size: 13px;
  color: #666;
  margin-bottom: 30px;
}

/* 一覧ボタン（水色背景、白文字、右矢印） */
.c-btn--news {
  display: inline-block;
  background-color: var(--color-accent); /* 少し彩度を落とした水色に見えます */
  color: #fff;
  padding: 15px 50px 15px 40px;
  text-decoration: none;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.1em;
  position: relative;
  transition: opacity 0.3s;
}
.c-btn--news:hover {
  opacity: 0.8;
}
.c-btn--news::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}

/* 右側：リストエリア */
.p-news__list-wrapper {
  flex: 1;
}

.p-news__list {
  list-style: none;
  border-top: 1px solid #707375; /* リストの一番上の線 */
}

.p-news__item {
  border-bottom: 1px solid #707375; /* 各アイテムの下線 */
}

/* リンクエリア全体をクリック可能にし、横並びにする */
.p-news__item a {
  display: flex;
  align-items: center;
  padding: 15px 5px;
  text-decoration: none;
  color: #333;
  transition: background-color 0.3s;
}
.p-news__item a:hover {
  background-color: rgba(255, 255, 255, 0.5); /* ホバー時に少し明るく */
}

/* 日付とカテゴリのグループ */
.p-news__meta {
  display: flex;
  align-items: center;
  width: 190px; /* 固定幅を持たせて、タイトルの開始位置を揃える */
  flex-shrink: 0;
}

.p-news__date {
  font-size: 14px;
  color: #888;
  margin-right: 20px;
  letter-spacing: 0.1em;
}

/* カテゴリラベルの共通スタイル */
.p-news__cat {
  display: inline-block;
  padding: 5px 0;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  border-radius: 4px;
  min-width: 70px;
  text-align: center;
}
/* カテゴリごとの色分け */
.p-news__cat--info {
  background-color: var(--color-accent);
} /* お知らせ */
.p-news__cat--column {
  background-color: var(--color-accent);
}

/* 記事タイトル */
.p-news__text {
  font-size: 14px;
  font-weight: 500;
  color: #707375;
}

/* SP用：768pxで縦積みに切り替え */
@media screen and (max-width: 768px) {
  .p-news {
    padding: 50px 0;
  }
  .p-news__inner {
    flex-direction: column; /* 縦積みに */
    gap: 30px;
  }
  .p-news__header {
    width: 100%;
    text-align: center; /* タイトル周りを中央揃えに */
  }
  .p-news__item a {
    flex-direction: column; /* リスト内も縦積みに */
    align-items: flex-start;
    padding: 20px 0;
  }
  .p-news__meta {
    margin-bottom: 10px; /* タイトルとの間に隙間 */
  }
}

/* ==================================================
   Service (p-service)
================================================= */
.p-service {
  padding: 40px 0 80px;
  background-color: #fff;
  color: #707375; /* 指定いただいたテキストカラー */
}

.p-service__title {
  text-align: center;
  font-size: 25px;
  font-weight: normal;
  letter-spacing: 0.1em;
  margin-bottom: 40px;
}

/* PC：3列のグリッドレイアウト */
.p-service__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 均等に3列 */
  gap: 20px; /* 丸と丸の隙間 */
}

/* PC：丸いエリアのデザイン */
.p-service__item {
  aspect-ratio: 1 / 1; /* 正方形にする */
  border-radius: 50%; /* 角丸100%で完全な丸にする魔法 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3% 13% 14%;
  min-width: 0;
}

/* PCの背景色（奇数は青、偶数はグレー） */
.p-service__item:nth-child(odd) {
  background-color: #f4faec;
}
.p-service__item:nth-child(even) {
  background-color: #f2f2f2;
}

/* アイコン・テキストの装飾 */
.p-service__icon {
  width: 60px; /* アイコンサイズ（適宜調整してください） */
  height: auto;
}

.p-service__name-ja {
  font-size: 14px;
  font-weight: bold;
  /* margin-top: 15px; */
}

.p-service__name-en {
  font-size: 8px;
  color: #a0a0a0;
  margin-top: 3px;
  margin-bottom: 7px;
  letter-spacing: 0.05em;
}

.p-service__desc {
  font-size: 12px;
  line-height: 1.6;
}

/* ==================================================
   ★追加：診療案内のリンク領域
================================================== */
.p-service__link {
  /* 親の <li> の高さ・幅を100%継承して、箱全体をクリックできるようにする */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;

  /* リンクの青色や下線を無効化し、元のテキストカラーを守る */
  color: inherit;
  text-decoration: none;

  /* ホバーした時にフワッと少し透明になるアニメーション（お好みで） */
  transition: opacity 0.3s;
}

.p-service__link:hover {
  opacity: 0.7;
}

.price_btn {
  text-align: center;
  padding: 40px 0 0;
}

.c-btn--price {
  display: inline-block;
  background-color: var(--color-accent);
  color: #fff;
  padding: 15px 50px 15px 40px;
  text-decoration: none;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.1em;
  position: relative;
  transition: opacity 0.3s;
}
.c-btn--price:hover {
  opacity: 0.8;
}

.c-btn--price::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}

/* ==================================================
   SP用スタイル（画面幅768px以下で適用）
================================================== */
@media screen and (max-width: 768px) {
  .p-service {
    padding: 50px 0;
  }

  /* SP：2列で隙間なし（gap: 0） */
  .p-service__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }

  /* SP：四角形にして、横並びにする */
  .p-service__item {
    aspect-ratio: auto; /* 丸の比率を解除 */
    border-radius: 0; /* 丸みを消して四角に */
    padding: 20px 15px;
  }

  .p-service__link {
    flex-direction: row; /* 縦積みから横並びに */
    justify-content: flex-start;
  }

  /* SP用のアイコンとタイトルの調整 */
  .p-service__icon {
    width: 50px;
    margin-right: 15px;
  }
  .p-service__name-ja {
    font-size: 11px;
    margin-top: 0; /* 上の隙間を消す */
  }

  /* 英語タイトルと説明文は非表示に */
  .p-service__name-en,
  .p-service__desc {
    display: none;
  }

  /* ★魔法：SP用の市松模様（チェッカーボード）配色 */
  /* 一旦PCの色設定をリセット */
  .p-service__item:nth-child(n) {
    background-color: transparent;
  }

  /* 1番目, 4番目, 5番目, 8番目... を青に */
  .p-service__item:nth-child(4n + 1),
  .p-service__item:nth-child(4n + 4) {
    background-color: #f4faec;
  }

  /* 2番目, 3番目, 6番目, 7番目... をグレーに */
  .p-service__item:nth-child(4n + 2),
  .p-service__item:nth-child(4n + 3) {
    background-color: #f2f2f2;
  }
}

/* ==================================================
   Symptoms (p-symptoms)
================================================= */
.p-symptoms {
  padding: 50px 0 80px;
  background-color: #e5e5e5; /* 指定のグレー背景 */
}

.p-symptoms__title {
  text-align: center;
  font-size: 25px;
  font-weight: normal;
  letter-spacing: 0.1em;
  margin-bottom: 40px;
  color: #333;
}

/* PC：3列のグリッドレイアウト */
.p-symptoms__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; /* ボックス同士の隙間 */
}

/* メニューの白いボックス */
.p-symptoms__item {
  background-color: #fff;
  border: 2px solid var(--color-main); /* 指定のメインカラー2px縁取り */
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}

/* ホバー時に少し浮き上がる演出（お好みで） */
.p-symptoms__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* リンク領域全体をクリック可能に */
.p-symptoms__link {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%; /* グリッドの高さに合わせてボタンも伸びる */
  padding: 30px 20px;
  text-decoration: none;
  color: #333;
}

/* アイコン画像 */
.p-symptoms__icon {
  width: 42px; /* 指定のアイコンサイズ */
  height: auto;
  margin-right: 10px;
  flex-shrink: 0; /* ★重要：テキストが長くなってもアイコンが潰れないようにする */
}

/* 説明文 */
.p-symptoms__text {
  font-size: 13px; /* 指定のPC文字サイズ */
  line-height: 1.6;
  font-weight: 500;
}

/* ==================================================
   SP用スタイル（画面幅768px以下で適用）
================================================== */
@media screen and (max-width: 768px) {
  .p-symptoms {
    padding: 50px 0;
  }

  .p-symptoms__title {
    font-size: 24px;
    margin-bottom: 30px;
  }

  /* SP：1列の縦積みに */
  .p-symptoms__list {
    grid-template-columns: 1fr;
    gap: 15px; /* スマホでは隙間を少し狭く */
  }

  /* スマホでの微調整 */
  .p-symptoms__link {
    padding: 15px;
  }

  .p-symptoms__icon {
    width: 36px; /* スマホでは少しアイコンを小さくしても良いかもしれません */
    margin-right: 15px;
  }
}

/* ==================================================
   Commitment (p-commitment)
================================================= */
.p-commitment {
  padding: 80px 0;
  background-color: #fff;
}

.p-commitment__title {
  text-align: center;
  font-size: 25px; /* 指定サイズ */
  font-weight: normal;
  letter-spacing: 0.1em;
  margin-bottom: 30px;
  color: #333;
}

/* PC：2列のグリッドレイアウト */
.p-commitment__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px 50px; /* 縦の隙間60px、横の隙間50px */
}

/* 画像 */
.p-commitment__img {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

/* 数字と見出しを横並びに */
.p-commitment__head {
  display: flex;
  align-items: center;
  gap: 15px; /* 数字と見出しの隙間 */
  margin-bottom: 15px;
}

/* 01〜04の数字（Futura優先、Jost代替） */
.p-commitment__num {
  font-family: "Futura", "Jost", sans-serif;
  font-size: 3rem; /* デザインに合わせた大きめのサイズ */
  line-height: 1;
  color: var(--color-main); /* メインカラー */
  font-weight: 300;
}

/* ポイントの見出し */
.p-commitment__subtitle {
  font-size: 18.5px; /* 指定サイズ */
  line-height: 1.5;
  color: var(--color-main); /* メインカラー */
  font-weight: normal;
}

/* 本文 */
.p-commitment__desc {
  font-size: 13.4px; /* 指定サイズ */
  line-height: 1.8;
  color: #555;
}

/* ==================================================
   SP用スタイル（画面幅768px以下で適用）
================================================== */
@media screen and (max-width: 768px) {
  .p-commitment {
    padding: 50px 0;
  }

  .p-commitment__head {
    flex-direction: column;
    gap: 3px;
  }

  .p-commitment__subtitle {
    text-align: center;
  }

  /* SP：1列の縦積みに */
  .p-commitment__list {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* スマホでは画像を少し角丸にすると今っぽくなります（お好みで） */
  .p-commitment__img {
    border-radius: 4px;
  }
}

/* ==================================================
   Reasons (p-reasons)
================================================= */
.p-reasons {
  padding: 80px 0 100px;
  /* ★前セクション（Symptoms）と同じグレー背景 */
  background-color: #e5e5e5;
}

.p-reasons__title {
  text-align: center;
  font-size: 25px; /* ★指定サイズ */
  font-weight: normal;
  letter-spacing: 0.1em;
  margin-bottom: 60px;
  color: #333;
}

.p-reasons__list {
  display: flex;
  flex-direction: column;
  gap: 50px; /* 項目同士の縦の隙間 */
}

/* PC：画像とテキストを横並びに */
.p-reasons__item {
  display: flex;
  align-items: center; /* 縦の中央で揃える */
  gap: 30px; /* 画像とテキストの隙間 */
}

/* ★魔法：偶数番目(2, 4番目)だけ、並び順を「右から左」に反転させる */
.p-reasons__item:nth-child(even) {
  flex-direction: row-reverse;
}

.p-reasons__img,
.p-reasons__text-area {
  flex: 1; /* 50%ずつ均等に分ける */
}

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

/* 見出しのスタイル */
.p-reasons__subtitle {
  font-size: 18.5px; /* ★指定サイズ */
  color: var(--color-main);
  font-weight: normal;
  line-height: 1.5;
  margin-bottom: 15px;
  padding-bottom: 10px;
  /* ★指定の高さ1px・メインカラーの線（デザインカンプを拡大し、点線にしています） */
  border-bottom: 1px dotted var(--color-main);
}

.p-reasons__desc {
  font-size: 13.4px; /* 前セクションと同じサイズ感 */
  line-height: 1.8;
  color: #555;
}

/* ==================================================
   SP用スタイル（画面幅768px以下で適用）
================================================== */
@media screen and (max-width: 768px) {
  .p-reasons {
    padding: 50px 0;
  }

  .p-reasons__title {
    margin-bottom: 40px;
  }

  .p-reasons__subtitle {
    text-align: center;
  }

  .p-reasons__list {
    gap: 40px;
  }

  /* SP：すべて縦積みに戻す */
  .p-reasons__item,
  .p-reasons__item:nth-child(even) {
    /* 反転の魔法を解除 */
    flex-direction: column;
    gap: 20px;
  }
}

/* ==================================================
   Information (p-info) - 料金表・採用情報
================================================= */
/* PC：ブロックを横並びに（50%ずつ） */
.p-info {
  display: flex;
  width: 100%;
}

.p-info__block {
  flex: 1; /* 画面を半分ずつ（50%）に分ける */
  display: flex;
}

/* テキストエリアのスタイル */
.p-info__text-area {
  flex: 1; /* ブロックの半分の幅 */
  background-color: var(--color-main);
  color: #fff;
  padding: 40px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.p-info__icon {
  width: 40px;
  height: auto;
  margin-bottom: 15px;
}

.p-info__icon2 {
  width: 60px;
}

.p-info__title-ja {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 0.1em;
  margin-bottom: 5px;
}

.p-info__title-en {
  font-size: 12px;
  font-family: "Futura", "Jost", sans-serif;
  letter-spacing: 0.1em;
  margin-bottom: 30px;
}

.p-info__desc {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 40px;
  text-align: left;
}

/* ボタン（以前作った c-btn--more を応用） */
.c-btn--info {
  display: inline-block;
  background-color: #fff;
  color: var(--color-main);
  padding: 15px 50px 15px 40px;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  position: relative;
  transition: opacity 0.3s;
}
.c-btn--info:hover {
  opacity: 0.8;
}
.c-btn--info::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--color-main);
  border-right: 2px solid var(--color-main);
  transform: translateY(-50%) rotate(45deg);
}

/* 画像エリアのスタイル */
.p-info__img {
  flex: 1; /* ブロックの半分の幅 */
  background-position: center;
  background-size: cover; /* 画像をはみ出さずに領域いっぱいに敷き詰める */
  background-repeat: no-repeat;
}

/* それぞれの画像を背景として指定（パスは適宜合わせてください） */
.p-info__img--price {
  background-image: url("../img/top/sec6_img01.png");
}
.p-info__img--recruit {
  background-image: url("../img/top/sec6_img02.png");
}

/* ==================================================
   SP用スタイル（画面幅768px以下で適用）
================================================== */
@media screen and (max-width: 768px) {
  /* SP：全体の横並びを解除して縦積みに */
  .p-info {
    flex-direction: column;
  }

  /* SP：各ブロック内の横並びも解除して縦積みに */
  .p-info__block,
  .p-info__block--recruit {
    /* 採用情報の反転も解除 */
    flex-direction: column;
  }

  /* SP：画像を上に持ってくるための順番変更 */
  .p-info__img {
    order: 1; /* 画像を1番目（上）に */
    width: 100%;
    aspect-ratio: 16 / 9; /* スマホでの画像の縦横比を固定（お好みで調整） */
  }

  .p-info__text-area {
    order: 2; /* テキストを2番目（下）に */
    padding: 60px 20px;
  }

  .p-info__img--price {
    background-image: url("../img/top/sp_sec6_img01.png");
  }
  .p-info__img--recruit {
    background-image: url("../img/top/sp_sec6_img02.png");
  }
}