body {
background: var(--color-back);
}
.first-container {
    position: relative;
    overflow: hidden;
  }
  .first-container::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 100%;
    height: 100%;
    /* border-radius: 0 0 50% 50%; */
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(to bottom, rgb(255 255 255 / 84%), rgb(255 255 255 / 84%)), url(../img/common/first-bg.jpg);
    background-position: center top, center top;
    }
  .first-container h1 {
    text-align: center;
    padding: 40px 0 60px;
    font-size: 32px;
    font-weight: 700;
    }
  .first-container h1 span {
color: var(--color-surface);
    }
    h2 {
      font-size: clamp(1.25rem, 1.031rem + 0.9vw, 1.75rem);
      margin: 20px 0 20px;
      font-weight: 700;
    }
    .area-accordion .area-accordion__summary {
      cursor: pointer;
      list-style-type: none;
      font-size: 20px;
      font-weight: 700;
      color: var(--color-surface);
      display: flex;
      justify-content: center;
          align-items: center;
          gap: 8px;
          --arrow-nudge: 0px;
          margin-top: 32px;
    justify-content: center;
    }
    .area-accordion .area-accordion__summary span {
      text-align: center;
      width: 24px;
      height: 24px;
      border: 2px solid var(--color-surface);
      border-radius: 50%;
      box-sizing: border-box;
      position: relative;
    }
    .area-accordion .area-accordion__summary span::after {
      content: "";
      position: absolute;
      top: calc(50% + var(--arrow-nudge));
      width: 6px;
      height: 6px;
      border-right: 2px solid var(--color-surface);
      border-bottom: 2px solid var(--color-surface);
      transform: translate(-50%, -50%) rotate(45deg);
      transform-origin: 50% 50%;
      transition: transform .25s ease, top .25s ease;
      will-change: transform, top;
  }
  .area-accordion[open]  .area-accordion__summary span::after {
      transform: translate(-50%, -50%) rotate(225deg);
  }
    .area-children {
      display: flex;
      flex-wrap: wrap;
      row-gap: 8px;
      column-gap: 12px;
      background: var(--color-white);
      border-radius: 5px;
      margin-top: 12px;
      padding: 12px;
      overflow: hidden;
      transition: 0.5s ease;
    } 
    .area-child {
      font-weight: 600;
    }
    .area-child .label-text {
      color: var(--color-surface);
      text-decoration: underline;
    }
    .area-child.is-disabled .label-text {
      color: #333;
      text-decoration: none
    }
.clinic-list {
    display: grid;
        gap: 40px;
        margin-top: 60px;
}
.clinic-card {
    background: var(--color-white);
    border-radius: 5px;
}
.clinic-card dl {
padding: 40px;
}
.clinic-card dl dt {
    font-weight: 700;
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 8px;
}
.clinic-card dl dt::before {
content: url(../img/clinic/clinichead.png);
display: block;
width: 86px;
height: 32px;
margin: auto;
}
.clinic-card dl dt span:first-child {
    font-size: clamp(1.375rem, 1.101rem + 1.12vw, 2rem);
}
.clinic-card dl dt span:nth-child(2) {
    font-size: 14px;
    letter-spacing: 0.84px;
    color: var(--color-surface);
}
.clinic-card dl dd {
    display: grid;
    grid-template-columns: 1fr 1fr; /* ← ここで2カラム指定 */
    gap: 20px;
    align-items: start;
    margin-top: 40px;
  }
  
  .clinic-card dl dd .clinic-card-left {
    grid-column: 1 / 2;
    width: 100%; /* ← ここは100%でOK */
  }

  .clinic-card-right table tr:first tr {
    border-top: 1px solid #F3F0EC;
  }
  .clinic-card-right table tr {
    border-bottom: 1px solid #F3F0EC;
  }
  .clinic-card-right table tr th {
    padding: 16px 8px;
    font-weight: 700;
  }
  
  .clinic-card-right table tr.sns th {
    vertical-align: middle;
  }
  
  .clinic-card-right table tr td {
    padding: 16px 8px 16px 0;
    
  }
  .clinic-card-right table tr td a {
color: var(--color-surface);
  }
  .clinic-card-right .clinic-sns {
    display: flex;
        gap: 12px;
  }
  .clinic-card-right .clinic-sns li a img {
width: clamp(2rem, 1.89rem + 0.45vw, 2.25rem);
  }
  .clinic-card dl dd .clinic-card-right {
    grid-column: 2 / 3; /* ← 終了カラムは3にする */
    width: 100%;
  }
  .clinic-card dl dd .clinic-card-bottom {
    grid-column: 1 / 3; /* ← 横幅いっぱいにする */
    grid-row: 2;
  }
  .cta-sec {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 2%;
}
.cta-sec li {
  width: 48%;
  max-width: 400px;
}
.cta-sec li a {
    text-align: center;
    padding: clamp(0.75rem, 0.531rem + 0.9vw, 1.25rem) 0;
    font-size: clamp(1rem, 0.89rem + 0.45vw, 1.25rem);
    border-radius: 40px;
    display: block;
}
.cta-sec .official-link a {
  background: var(--color-surface);
  color: var(--color-white);
  }
  .cta-sec .clinic-link a {
      background: var(--color-silver);
      color: var(--color-white);
  }
  .cta-sec li a:hover {
  opacity: .8;
  }
.vertical-flow ul,.payment-list ul {
    display: flex;
    flex-wrap: wrap;
}
.vertical-flow ul li,.payment-list ul li {
    margin: 0;
    margin-left: 0;
    list-style-type: none;
}
.vertical-flow ul li:not(:last-child)::after {
content: "・";
}
.recommend-list {
  display: flex;
      margin-top: 80px;
      width: auto;
      flex-wrap: wrap;
      row-gap: 32px;
column-gap: 16px;
}
.recommend-list li {
  flex: 1 1 calc((100% - 16px * 3) / 4);
  max-width: calc((100% - 16px * 3) / 4);
}
.recommend-genre {
  padding: 0 8px;
  margin: 8px 0 4px;
  background: #000;
  color: #fff;
  width: fit-content;
}
.recommend-area {
  text-align: right;
  font-size: 14px;
}
/* サムネ比率固定（任意） */
.recommend-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.recommend-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 左端見切れ防止：外側ガターを容器に持たせる */
.js-recommend-swiper {
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
  overflow: visible;
}

/* ul 初期化：これが無いと左が切れる */
.js-recommend-swiper .swiper-wrapper {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ul のデフォルト余白が“左ズレ/はみ出し”の原因になり得る */
.recommend-slider .swiper-wrapper {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* SPはスライド幅を明示して“右だけ見切れ”を作る */
.recommend-slider .swiper-slide {
  width: 78vw;             /* ← 見切れ具合を強くしたいなら 72〜82vw で微調整 */
  box-sizing: border-box;
}

/* サムネ画像のオーバーフロー抑止 */
.recommend-card, .recommend-thumb, .recommend-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

/* 念のため */
.js-recommend-swiper .swiper-slide { height: auto; }
.recommend-thumb img { display: block; width: 100%; height: auto; }

.recommend-slider .swiper-pagination {
  display: flex;
      width: 100%;
      justify-content: center;
      gap: 20px;
}
.recommend-slider .swiper-pagination .swiper-pagination-bullet {
  border-radius: inherit;
  width: 40px;
  height: 2px;
}
.recommend-slider .swiper-pagination .swiper-pagination-bullet-active {
  background: var(--color-brand);
}

.recommend-more {
    text-align: right;
    margin-top: 20px;
}
.recommend-more a {
  color: var(--color-surface);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.empty {
  margin-top:20px;
}
.clinic-freeword-search .result-meta {
  text-align: center;
    margin: 40px 0 -40px;
}
@media screen and  (max-width: 1024px){
  .recommend-list > li{
    flex-basis: calc((100% - 16px * 2) / 3);
    max-width: calc((100% - 16px * 2) / 3);
  }
}
@media screen and (max-width: 768px) {
    .clinic-card dl {
        padding: 20px 0px;
        }
    .clinic-card dl dt {
        padding: 0 8px;
        }
        .clinic-card dl dd {
            grid-template-columns: 1fr;
            margin-top: 20px;
        }
        .clinic-card-right table tr th {
            padding: 8px;
    white-space: nowrap;
        }
        .clinic-card dl dd > .clinic-card-left,.clinic-card dl dd > .clinic-card-right,.clinic-card dl dd > .clinic-card-bottom {
            grid-column: 1 / 1; 
        }
        .clinic-card dl dd > .clinic-card-bottom {
            grid-row: 3;
        }
        .clinic-card-right table tr td {
            padding: 8px;
        }
        .cta-sec {
            margin-top: 0;
        }
        .recommend-list > li{
          flex-basis: calc((100% - 16px * 1) / 2);
          max-width: calc((100% - 16px * 1) / 2);
        }
}
@media (min-width: 640px) {
  .recommend-slider .swiper-slide { width: auto; } /* JS側の slidesPerView に委譲 */
}
@media screen and  (max-width: 480px){
  .recommend-list > li{
    flex-basis: 100%;
    max-width: 100%;
  }
}