@charset "UTF-8";

/* ==================================================
   グローバル変数（全ページ共通の設定）
================================================== */
:root {
  /* Colors */
  --color-main: #abdf70; /* メインカラー */
  --color-accent: #8cd790; /* アクセントカラー */
  --color-text: #707375; /* 基本のテキストカラー */
  --color-bg-gray: #f2f2f2; /* 背景グレー */

  /* Typography */
  --font-base:
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3",
    sans-serif;

  /* Layout */
  --width-inner: 800px; /* PC版のコンテンツ最大幅（デザインに合わせて調整） */
}

/* ここにリセットCSSや、bodyの基本設定を続けて記述していきます */
body {
  font-family: var(--font-base);
  color: var(--color-text);
  line-height: 1.6;
}

.sp {
  display: none !important;
}
@media screen and (max-width: 768px) {
  .sp {
    display: block !important;
  }

  .pc {
    display: none !important;
  }
}

/* ==================================================
   ユーティリティクラス（余白調整など）
================================================== */
/* 下マージン80px */
.u-mgb80 {
  margin-bottom: 80px !important;
}

.u-mgb40 {
  margin-bottom: 40px !important;
}

.u-mgb30 {
  margin-bottom: 30px !important;
}

.u-mgb20 {
  margin-bottom: 20px !important;
}

/* SP版（スマホ）では余白を少し狭くする場合の調整 */
@media screen and (max-width: 768px) {
  .u-mgb80 {
    margin-bottom: 50px !important; /* スマホの画面サイズに合わせて調整 */
  }
}

.ta-center {
  text-align: center;
}

/* ==================================================
   固定ヘッダーに伴う余白・スクロール位置調整
================================================== */
html {
  /* スムーススクロール（お好みで） */
  scroll-behavior: smooth;

  /* ★ページ内リンクで飛んだ時の停止位置をヘッダーの高さ分ズラす（PC） */
  scroll-padding-top: 150px;
}

/* 768px以下のデバイス（スマホ）用 */
@media screen and (max-width: 768px) {
  html {
    /* ★ページ内リンクの停止位置を調整（SP） */
    scroll-padding-top: 120px;
  }
}

/* ==================================================
   Header (l-header)
================================================== */
.l-header {
  background-color: #fff;
  /* ヘッダーがスクロールに追従するように固定（必要に応じて） */
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* 軽い影で浮かせる */
}

.l-header__inner {
  max-width: var(--width-inner); /* 1000pxなどの設定値 */
  margin: 0 auto;
  padding: 15px 0;
}

@media screen and (max-width: 840px) {
  .l-header__inner {
    padding: 15px 20px;
  }
}

/* -------------------------
   上段：ロゴと連絡先
------------------------- */
.l-header__top {
  display: flex;
  justify-content: space-between; /* 両端に配置 */
  align-items: center; /* 縦の中央揃え */
  margin-bottom: 15px; /* 下段ナビとの隙間 */
}

/* キャッチコピー */
.l-header__desc {
  font-size: 10px;
  color: #666;
  margin-bottom: 5px;
}

/* 右側：PC用連絡先グループ */
.l-header__contact-pc {
  display: flex;
  align-items: center;
  padding-top: 20px;
  gap: 20px; /* 電話番号とボタンの隙間 */
}

/* 電話番号 */
.l-header__tel {
  display: flex;
  align-items: center;
  gap: 5px; /* アイコンと番号の隙間 */
}
.l-header__tel-number {
  font-size: 28px;
  font-weight: bold;
  color: var(--color-main); /* 水色 */
  text-decoration: none;
  white-space: nowrap;
}

/* 予約ボタン（PC） */
.c-btn--reserve-pc {
  background-color: var(--color-accent); /* 藤色 */
  color: #fff;
  padding: 10px 30px;
  border-radius: 4px;
  text-decoration: none;
  /* font-weight: bold; */
  font-size: 18px;
  transition: opacity 0.3s; /* ホバー時のフワッとした変化 */
  white-space: nowrap;
  display: inline-block;
}
.c-btn--reserve-pc:hover {
  opacity: 0.8;
}

/* 右側：SP用アクション（PC表示時は隠す） */
.l-header__action-sp {
  display: none;
}

/* -------------------------
   下段：PCナビゲーション
------------------------- */
.l-header__nav-list {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0;
}

.l-header__nav-list li {
  flex-grow: 1; /* 均等な幅に伸ばす */
  text-align: center;
  border-right: 1px solid #707375; /* 右側の区切り線 */
}

.l-header__nav-list li:first-child {
  border-left: 1px solid #707375;
}

.l-header__nav-list a {
  display: block;
  color: var(--color-text);
  text-decoration: none;
  font-size: 12px;
  transition: color 0.3s;
  color: #707375;
}
.l-header__nav-list a:hover {
  color: var(--color-main); /* ホバーで水色に */
}

/* ==================================================
   Fixed Header用の余白調整
================================================== */
main {
  /* PC版のヘッダーの高さに合わせて数値を調整してください（例：120px） */
  padding-top: 136px;
}

@media screen and (max-width: 768px) {
  main {
    /* SP版のヘッダーの高さに合わせて数値を調整してください（例：80px） */
    padding-top: 101px;
  }
}

/* ==================================================
   SP用スタイル（画面幅768px以下で適用）
================================================== */
@media screen and (max-width: 768px) {
  body.is-menu-open {
    overflow: hidden;
  }

  /* 1. 余白の調整 */
  .l-header__inner {
    padding: 0; /* スマホ用に余白を少し狭く */
  }

  .l-header__top {
    /* position: relative; */
    padding-top: 25px;
    margin-bottom: 0;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 100;
  }

  body.is-menu-open .l-header__top {
    background-color: transparent;
    pointer-events: none; /* 下の要素をクリックできるようにする */
  }

  body.is-menu-open .l-header__logo-area,
  body.is-menu-open .l-header__btn-reserve-sp {
    opacity: 0;
    visibility: hidden;
  }

  /* ロゴ周りにだけ余白を確保する */
  .l-header__logo-area {
    padding: 0 0 10px 15px;
    flex: 1; /* 余った横幅をすべて使う */
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden; /* 念のため横揺れ防止 */
  }

  /* ★文言を横幅いっぱいに（改行させない） */
  .l-header__desc {
    position: absolute;
    top: 5px;
    left: 15px;
    font-size: 9px; /* スマホで1行に収まるサイズに微調整 */
    white-space: nowrap;
    letter-spacing: -0.05em; /* 少し文字間を詰める */
  }

  /* 2. PC用の要素を隠す */
  .l-header__contact-pc,
  .l-header__nav-pc {
    display: none;
  }

  /* 3. スマホ用の要素を表示する */
  .l-header__action-sp {
    display: flex; /* これで「ご予約」と「メニュー」が横に並びます */
  }

  /* スマホ用ボタンの共通スタイル */
  .l-header__btn-reserve-sp,
  .l-header__btn-menu-sp {
    display: flex;
    flex-direction: column; /* 文字とアイコンを縦並びに */
    align-items: center;
    justify-content: center;
    width: 75px; /* 押しやすい幅を確保 */
    height: auto; /* 押しやすい高さを確保 */
    color: #fff;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: bold;
    border: none;
    cursor: pointer;
    padding: 8px 0 15px;
  }

  .l-header__btn-menu-sp {
    position: relative; /* z-indexを効かせるための魔法 */
    z-index: 9999; /* headerの中で一番手前（メニューや暗い背景よりも上）にする */
  }

  /* ご予約ボタン（藤色） */
  .l-header__btn-reserve-sp {
    background-color: var(--color-accent);
  }

  /* メニューボタン（水色） */
  .l-header__btn-menu-sp {
    background-color: var(--color-main);
  }

  /* ハンバーガーの3本線 */
  .l-header__hamburger-line {
    display: block;
    width: 24px;
    height: 2px;
    background-color: #fff;
    margin: 2px 0;
  }

  /* ★ご予約アイコンのサイズ（画像が入った時のための準備） */
  .l-header__btn-icon {
    width: 30px;
    height: 30px;
    margin-top: 4px;
    object-fit: contain;
  }

  /* ★ハンバーガーの3本線をデザインに合わせて大きく */
  .l-header__hamburger-line {
    display: block;
    width: 25px; /* 線を少し長く */
    height: 2px;
    background-color: #fff;
    margin: 3.5px 0; /* 線の隙間をデザインに寄せる */
  }

  .l-header__btn-menu-sp .l-header__btn-text {
    margin-bottom: 8%;
  }

  /* ロゴ周辺の微調整 */
  .l-header__desc {
    font-size: 0.58rem; /* スマホではキャッチコピーを極小に */
  }
  .l-header__logo {
    max-width: 180px; /* スマホ画面に合わせてロゴ領域を縮小 */
  }
  .l-header__logo a {
    font-size: 14px; /* 代替テキストの文字サイズ調整 */
  }

  /* =========================================
     ドロワーメニュー（SP）
  ========================================= */
  /* 背景の黒い膜（初期状態は透明でクリック不可） */
  .l-header__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.3s,
      visibility 0.3s;
    overscroll-behavior: none;
    touch-action: none;
  }

  /* ドロワーパネル本体（初期状態は右画面外に隠す） */
  .l-header__drawer {
    position: fixed;
    top: 0;
    right: -100%; /* これで画面外に待機 */
    width: 80%; /* パネルの幅 */
    max-width: 320px;
    height: 100vh;
    background: #fff;
    z-index: 95;
    overflow-y: auto;
    transition: right 0.3s ease;
  }

  /* メニューのリストデザイン */
  .l-header__drawer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .l-header__drawer-nav a {
    display: block;
    padding: 20px 20px 20px 35px;
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
  }

  .l-header__drawer-nav a img {
    width: 20px;
    margin-right: 15px;
  }

  /* スマホ用連絡先ボタン（縦並び） */
  .l-header__drawer-contact {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  .c-btn--tel-sp,
  .c-btn--reserve-sp {
    display: block;
    text-align: center;
    padding: 15px;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    font-size: 18px;
  }
  .c-btn--tel-sp {
    background-color: var(--color-main);
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .c-btn--tel-sp img {
    width: 15px;
    margin-right: 5px;
  }

  .c-btn--reserve-sp {
    background-color: var(--color-accent);
    font-size: 22px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .c-btn--reserve-sp img {
    width: 25px;
    margin-right: 10px;
  }

  /* =========================================
     開いた時の状態（JSでbodyに .is-menu-open を付与）
  ========================================= */
  /* パネルと膜を表示 */
  body.is-menu-open .l-header__overlay {
    opacity: 1;
    visibility: visible;
  }
  body.is-menu-open .l-header__drawer {
    right: 0; /* 右端にピタッとくっつける */
  }

  /* ハンバーガーボタンを一番上に出して「×」にする */
  .l-header__btn-menu-sp {
    z-index: 10000; /* メニューより上に配置 */
    position: relative;
  }
  body.is-menu-open .l-header__btn-menu-sp .l-header__btn-text {
    opacity: 0; /* 「メニュー」の文字を消す */
    display: none; /* ★追加：文字の分の空間を完全に消す */
  }

  /* 1本目の線（HTML上は2番目の子要素）を斜めに */
  body.is-menu-open .l-header__hamburger-line:nth-child(2) {
    transform: translateY(6px) rotate(45deg);
  }

  /* 2本目の線（HTML上は3番目の子要素）を透明にして消す */
  body.is-menu-open .l-header__hamburger-line:nth-child(3) {
    opacity: 0;
  }

  /* 3本目の線（HTML上は4番目の子要素）を逆斜めに */
  body.is-menu-open .l-header__hamburger-line:nth-child(4) {
    transform: translateY(-12px) rotate(-45deg);
  }

  body.is-menu-open .l-header__btn-menu-sp {
    pointer-events: auto;
    position: fixed; /* 画面に対して位置を固定 */
    top: 15px; /* 上からの位置（デザインに合わせて微調整してください） */
    left: 15px; /* 左側に移動 */
    background-color: transparent; /* 水色の背景を透明にして消す */
  }
}

/* ==================================================
   PC表示時のSP専用要素の非表示設定
================================================== */
@media screen and (min-width: 769px) {
  .l-header__drawer,
  .l-header__overlay {
    display: none;
  }
}

/* ==================================================
   共通モジュール（他のセクションでも使い回すパーツ）
================================================== */
/* 最大幅800pxのコンテナ */
.l-container--small {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 0;
}

@media screen and (max-width: 840px) {
  .l-container--small {
    padding: 0 20px;
  }
}

/* 共通セクションタイトル */
.c-sec-title {
  text-align: center;
  margin-bottom: 40px;
}
.c-sec-title__en {
  display: block;
  color: var(--color-main);
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.1em;
}
.c-sec-title__ja {
  font-size: 28px;
  font-weight: bold;
  margin-top: 5px;
}

/* SP用：タイトルの余白調整 */
@media screen and (max-width: 768px) {
  .c-sec-title {
    margin-bottom: 25px;
  }
  .c-sec-title__ja {
    font-size: 24px;
  }
}

/* ==================================================
   Footer (l-footer)
================================================== */
.l-footer {
  background-color: #707375; /* 指定のグレー背景 */
  color: #fff;
  padding: 40px 15px 20px;
}

.l-footer .l-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* PC：左右のレイアウト */
.l-footer__inner {
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
}

.l-footer__info {
  width: 50%; /* 左側の幅 */
}

.l-footer__logo {
  font-size: 28px;
  font-weight: normal;
  margin-bottom: 15px;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.l-footer__address {
  font-size: 14px;
  line-height: 1.8;
}

.l-footer__nav {
  width: 45%; /* 右側の幅 */
}

/* ★魔法：縦方向に要素を並べてから、列を折り返すグリッド */
.l-footer__nav-list {
  list-style: none;
  display: grid;
  grid-template-rows: repeat(
    4,
    auto
  ); /* PCは「4行」で折り返すことで、自然と4列になります */
  grid-auto-flow: column; /* 要素を「横」ではなく「縦」に流す設定 */
  gap: 15px 15px; /* 縦の隙間20px、横の隙間15px */
}

.l-footer__nav-list a {
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  display: flex;
  align-items: center; /* アイコンとテキストの縦位置を揃える */
  transition: opacity 0.3s;
}

.l-footer__nav-list a:hover {
  opacity: 0.7;
}

.l-footer__icon-home {
  width: 17px;
  height: auto;
  margin-right: 10px;
  margin-left: -28px;
}

.l-footer__copyright {
  text-align: center;
  font-size: 10px;
  color: #ccc;
}

/* ==================================================
   SP用スタイル（画面幅768px以下で適用）
================================================== */
@media screen and (max-width: 768px) {
  .l-footer {
    padding: 20px 10px 15px;
  }

  .l-footer__inner {
    flex-direction: column; /* 左右を縦積みに */
    gap: 40px;
    margin-bottom: 40px;
  }

  .l-footer__info,
  .l-footer__nav {
    width: 100%;
  }

  .l-footer__logo {
    font-size: 18px;
    margin-bottom: 0; /* 住所が消えるため余白をなくす */
  }

  /* カンプに合わせてSPでは住所を非表示に */
  .l-footer__address {
    display: none;
  }

  /* SP：リストを「8行」で折り返して2列にする */
  .l-footer__nav-list {
    grid-template-rows: repeat(8, auto);
    gap: 20px 10px;
  }

  /* ご指示通り、SPではホームアイコンを非表示 */
  .l-footer__icon-home {
    display: none;
  }

  .l-footer__copyright {
    font-size: 9px;
    line-height: 1.5;
  }
}

/* ==================================================
   Access (p-access)
================================================= */
.p-access__inner {
  background-color: #f4faec; /* 指定のグレー背景 */
  padding: 60px 0;
}

/* PC：左右のレイアウト（6.5 : 3.5 の比率） */
.p-access__info-wrap {
  display: flex;
  align-items: center; /* 縦の中央で揃える */
  justify-content: space-between;
}

.p-access__left {
  flex: 6.9;
  border-right: 1px solid #ccc; /* ★PCのみ：右側の区切り線 */
  padding-right: 30px; /* 線とコンテンツの隙間 */
}

.p-access__right {
  flex: 3.1;
  padding-left: 30px; /* 線とコンテンツの隙間 */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- 左側：医院情報 --- */
.p-access__head {
  display: flex;
  align-items: flex-end; /* 下揃えにして、名前と住所のベースラインを合わせる */
  gap: 20px;
  margin-bottom: 25px;
}

.p-access__name {
  font-size: 24px; /* 指定サイズ */
  color: #707375; /* 指定カラー */
  font-weight: bold;
  line-height: 1.4;
  font-feature-settings: "palt";
}

.p-access__address {
  font-size: 11px; /* 指定サイズ */
  color: #707375;
  line-height: 1.6;
  margin-bottom: 5px; /* 下揃えの微調整 */
}

/* --- 左側：診療時間テーブル --- */
.p-access__table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 11px; /* 指定サイズ */
  color: #707375; /* 指定カラー */
  background-color: #fff; /* カンプを見ると表の背景は白ですね */
  margin-bottom: 10px;
}

.p-access__table th,
.p-access__table td {
  border: 1px solid #c8c8c8; /* 少し薄めのグレー罫線 */
  padding: 10px 5px;
}

.p-access__note {
  font-size: 11px;
  color: #707375;
}

/* --- 右側：ボタン群 --- */
/* ① 電話番号（PC版はテキストとアイコンのみ） */
.p-access__tel {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 29px; /* PCでは大きく */
  color: var(--color-accent);
  font-weight: bold;
  text-decoration: none;
  font-feature-settings: "palt";
}
.p-access__icon-tel {
  width: 15px;
  margin-right: 5px;
}

/* 共通ボタンスタイル */
.c-btn--reserve-large,
.c-btn--contact-large {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 4px;
  transition: opacity 0.3s;
}
.c-btn--reserve-large:hover,
.c-btn--contact-large:hover,
.p-access__tel:hover {
  opacity: 0.8;
}

/* ② ネット予約ボタン（カンプに近い藤色） */
.c-btn--reserve-large {
  background-color: var(--color-accent);
  color: #fff;
}
.p-access__icon-cal {
  width: 18px;
  margin-right: 5px;
  filter: brightness(0) invert(1); /* 黒いアイコンをCSSで白に染める魔法 */
}

/* ③ お問い合わせボタン */
.c-btn--contact-large {
  background-color: #fff;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}

/* --- マップエリア --- */
.p-access__map {
  width: 100%;
  line-height: 0; /* iframeの下にできる謎の隙間を消す */
}

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

  .p-access__inner .l-container--small {
    width: 90%;
    padding: 0; /* 共通クラスで設定されている左右の余白を打ち消す */
    margin: 0 auto; /* 中央揃え */
  }

  .p-access__info-wrap {
    flex-direction: column; /* 縦積みに */
    gap: 30px;
  }

  .p-access__left {
    border-right: none; /* 区切り線を消す */
    padding-right: 0;
    width: 100%;
  }

  .p-access__right {
    padding-left: 0;
    width: 100%; /* 横幅いっぱいに */
  }

  .p-access__head {
    flex-direction: column; /* 名前と住所も縦積みに */
    align-items: flex-start;
    gap: 10px;
  }

  /* ★魔法：SP版で電話番号を「メインカラーのボタン」に変化させる */
  .p-access__tel {
    background-color: var(--color-main);
    color: #fff;
    font-size: 24px;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 0;
  }

  /* SP版では電話アイコンも白に染める */
  .p-access__tel .p-access__icon-tel {
    filter: brightness(0) invert(1);
  }

  .c-btn--reserve-large,
  .c-btn--contact-large {
    font-size: 16px;
  }

  .p-access__icon-cal {
    width: 20px;
    margin-right: 8px;
  }
}

/* ==================================================
   Service (p-service)
================================================= */
.p-service {
  padding: 80px 0;
  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: 11px;
  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;
}

/* ※注意：SP版（@media screen and (max-width: 768px) の中）で、
  .p-service__item にかけていた flex-direction: row; や justify-content: flex-start; は、
  この .p-service__link 側に移す必要があります！
*/

/* ==================================================
   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: #f1f9fa;
  }

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