/* クリニック詳細 新デザイン (Figma: 202509_個ページ) */
/* tokens: primary #FF8601 / text #585858 */

.p-cdn {
  max-width: 698px;
  margin: 0 auto;
  font-family: "Noto Sans JP", sans-serif;
  color: #000;
  word-break: break-word;
}

/* タイトル h1 (9458:9599): header-jikotiryo.php の .contents3-pre が既に
   オレンジ左ボーダー(border-left:5px #faa268 / padding-left:16px)を持ち Figma と一致するため、
   新デザイン側でタイトルCSSは追加しない（二重ボーダー回避）。 */

/* タグ行 (9458:9601) */
.p-cdn__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  background: #fff;
  padding: 8px 20px;
}
.p-cdn__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  color: #1f1f1f;
  white-space: nowrap;
}
.p-cdn__tag-ico {
  width: 17px;
  height: 11px;
  flex: none;
}

/* エリア「全て見る」ボタンは既存 .p-detail-around-clinic (tmp/detail-around-clinic.php) を流用。CSSも既存(style.css)を使用。 */

/* アンカーナビ (9482:25092) — 記事内スクロールで上部に追従(sticky) */
.p-cdn__anchornav {
  display: flex;
  gap: 4px;
  padding: 4px 12px 0;
  border-bottom: 1px solid #ff7a00;
  position: sticky;
  top: 64px; /* 固定ヘッダ(64px)の下に追従 */
  z-index: 10;
  background: #fff;
}
.p-cdn__anchornav a {
  padding: 8px 18px;
  border: 1px solid #ff7a00;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  background: #fffbf9;
  color: #000;
  font-size: 16px;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}
.p-cdn__anchornav a.is-current {
  background: #fff3e9;
}

/* メイン情報 (9458:9614) */
.p-cdn__info {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: flex-start;
  background: #fff;
  padding: 16px 0;
}
.p-cdn__info-left {
  width: 385px;
  flex: none;
}
.p-cdn__info-right {
  width: 273px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.p-cdn__photos {
  position: relative;
  width: 100%;
  height: 265px;
  border-radius: 10px;
  overflow: hidden;
}
.p-cdn__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.p-cdn__photo.is-active {
  opacity: 1;
}
.p-cdn__card {
  background: #fff7f0;
  border-radius: 10px;
  padding: 18px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.p-cdn__card-title {
  margin: 0;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.5;
  color: #ff7a00;
  text-decoration: underline;
}
.p-cdn__card-body {
  margin: 0;
  font-size: 16px;
  line-height: 25px;
  color: #000;
}

/* 共通 見出し h2 */
.p-cdn__h2 {
  margin: 0;
  width: 100%;
  font-weight: 700;
  font-size: 24px;
  line-height: normal;
  color: #ff7a00;
  text-align: center;
}

/* 特徴1 (9458:9659) */
.p-cdn__feature1 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  background: #fff;
  padding: 48px 0;
}
.p-cdn__feature1-body {
  width: 100%;
  font-size: 18px;
  line-height: 1.5;
  color: #000;
}
.p-cdn__feature1-body p {
  margin: 0 0 1em;
}
.p-cdn__feature1-body p:last-child {
  margin-bottom: 0;
}

/* CTAバナー (9458:9632 / 9458:10227) */
.p-cdn__cta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  padding: 12px 0;
}
.p-cdn__cta-lead {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin: 0;
}
.p-cdn__cta-deco {
  color: red;
  font-weight: 700;
  font-size: 29px;
  line-height: 1;
}
.p-cdn__cta-lead-main {
  text-align: center;
}
.p-cdn__cta-lead-sub {
  display: block;
  color: #3c3c3c;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
}
.p-cdn__cta-lead-em {
  display: block;
  color: red;
  font-weight: 700;
  font-size: 23px;
  line-height: 1.3;
}
.p-cdn__cta-lead-em small {
  font-size: 18px;
}
.p-cdn__cta-btns {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: stretch;
  width: 100%;
}
.p-cdn__cta-btn {
  flex: 1 0 0;
  min-width: 0;
  display: block;
  text-decoration: none;
}
.p-cdn__cta-img {
  display: block;
  width: 100%;
  height: auto;
}
.p-cdn__cta-img.is-sp {
  display: none;
}
@media (max-width: 768px) {
  /* CTAボタンはSPでも横並び（base の row を維持・各ボタン等幅） */
  .p-cdn__cta-btns {
    padding: 0 12px;
  }
  .p-cdn__cta-btn {
    flex: 1 1 0;
    min-width: 0;
  }
  .p-cdn__cta-img.is-pc {
    display: none;
  }
  .p-cdn__cta-img.is-sp {
    display: block;
  }
}
.p-cdn__cta-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
  color: #000;
  text-align: center;
  padding: 8px 0;
}

/* 基本情報 (9458:9664) */
.p-cdn__basic {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.08);
  padding: 48px 12px;
}
.p-cdn__basic-cols {
  display: flex;
  gap: 12px;
  align-items: stretch;
  width: 100%;
}
.p-cdn__basic-left {
  width: 317px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.p-cdn__basic-ext {
  width: 100%;
  aspect-ratio: 1860 / 1212;
  object-fit: cover;
  border-radius: 6px;
}
.p-cdn__basic-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.p-cdn__basic-card {
  background: #fff;
  border-radius: 5px;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 16px;
}
.p-cdn__basic-card-title {
  margin: 0;
  font-weight: 700;
  color: #ff7a00;
}
.p-cdn__basic-card-body {
  margin: 0;
  color: #000;
  word-break: break-word;
}
.p-cdn__basic-official {
  margin: 0;
  text-align: center;
}
.p-cdn__basic-official a {
  font-weight: 700;
  font-size: 18px;
  color: #ff7a00;
  text-decoration: underline;
}

/* 院長紹介 (9458:10156) */
.p-cdn__doctor {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  margin: 20px 0;
  padding: 32px 18px;
  border: 1px dashed #faa268;
  border-radius: 10px;
}
.p-cdn__doctor-head {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding-bottom: 5px;
  border-bottom: 1px solid #fce1c6;
}
.p-cdn__doctor-photo img {
  width: 96px;
  height: 82px;
  object-fit: cover;
  border-radius: 10px;
}
.p-cdn__doctor-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  color: #000;
  font-size: 16px;
  line-height: 1.5;
}
.p-cdn__doctor-row p {
  margin: 0;
  word-break: break-word;
}
.p-cdn__doctor-label {
  font-weight: 700;
  font-size: 18px;
}

/* 院内の雰囲気 (9458:9797) */
.p-cdn__atmosphere {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px 18px;
  border: 1px dashed #faa268;
  border-radius: 10px;
}
.p-cdn__atmosphere-title {
  margin: 0;
  padding: 5px;
  border-bottom: 1px solid #fce1c6;
  font-weight: 700;
  font-size: 18px;
  color: #000;
}
.p-cdn__atmosphere-body {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: #000;
  word-break: break-word;
}

/* よくある質問(院別) (9458:10175) */
.p-cdn__faq {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 0;
}
.p-cdn__faq-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.p-cdn__faq-q {
  display: flex;
  gap: 4px;
  align-items: center;
  margin: 0;
  padding: 8px;
  background: #faa268;
  color: #fff;
  font-weight: 500;
  font-size: 18px;
}
.p-cdn__faq-mark {
  font-size: 15px;
}
.p-cdn__faq-a {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: #000;
  word-break: break-word;
}

/* 口コミ要約 + 口コミ (9458:9764) */
.p-cdn__reviews {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  padding: 48px 0;
}
.p-cdn__review-ai {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  padding: 12px 10px;
  background: #fff;
  border: 1px dashed #bbb;
  border-radius: 10px;
}
.p-cdn__review-ai-title {
  margin: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 2px;
  font-weight: 700;
  font-size: 16px;
  color: #3c3c3c;
}
.p-cdn__review-ai-ico {
  flex: none;
  width: 24px;
  height: 24px;
}
.p-cdn__review-ai-body {
  margin: 0;
  width: 100%;
  font-size: 16px;
  line-height: 1.5;
  color: #000;
}
.p-cdn__review-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
.p-cdn__review-card {
  flex: 0 0 auto;
  width: 280px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  padding: 12px 24px;
  background: #fff7f0;
  border-radius: 10px;
}
.p-cdn__review-meta {
  margin: 0;
  display: flex;
  gap: 4px;
  font-size: 14px;
  text-align: center;
}
.p-cdn__review-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #000;
  word-break: break-word;
}
.p-cdn__review-note {
  width: 100%;
  padding: 8px;
  background: #f5f5f5;
  font-size: 14px;
  color: #000;
}
.p-cdn__review-note p {
  margin: 0;
}

/* 一般FAQ (9458:10412) */
.p-cdn__gfaq {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
}
.p-cdn__gfaq-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
}
.p-cdn__gfaq-card {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 18px 8px;
  background: #fff7f0;
  border: 1px solid #ffd6c3;
  border-radius: 10px;
  box-shadow: 4px 4px 0 #e56700;
  text-decoration: none;
}
.p-cdn__gfaq-title {
  flex: 1;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: #3c3c3c;
  text-decoration: underline;
}
.p-cdn__gfaq-arrow {
  width: 10px;
  height: 10px;
  flex: none;
  border-right: 2px solid #3c3c3c;
  border-bottom: 2px solid #3c3c3c;
  transform: rotate(-45deg);
}

/* 競合差し込み: こちらの整骨院もおすすめ (9458:9825) */
.p-cdn__nearby {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border-radius: 5px 5px 0 0;
  padding-top: 12px;
}
.p-cdn__nearby-head {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 18px;
  color: #f60;
  text-align: center;
}

/* 診療時間カレンダー (9458:10018) */
.p-cdn__cal {
  width: 100%;
  border: 1px solid #fce1c6;
  border-collapse: collapse;
  font-size: 12px;
}
.p-cdn__cal th,
.p-cdn__cal td {
  padding: 5px 3px;
  text-align: center;
  color: #3c3c3c;
}
.p-cdn__cal thead th {
  background: #fce1c6;
  font-weight: 500;
}
.p-cdn__cal-time {
  white-space: nowrap;
}
.p-cdn__cal-remark {
  text-align: left;
  color: #7e7e7e;
  letter-spacing: 1px;
}

/* 口コミカードの性別アイコン */
.p-cdn__review-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.p-cdn__review-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

/* 評価(星) (9458:9614 内) */
.p-cdn__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.p-cdn__rating-stars {
  --cdn-rate: 0;
  position: relative;
  display: inline-block;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 2px;
  font-family: sans-serif;
}
.p-cdn__rating-stars::before {
  content: "★★★★★";
  color: #ddd;
}
.p-cdn__rating-stars::after {
  content: "★★★★★";
  color: #fbbf24;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  white-space: nowrap;
  width: calc(var(--cdn-rate) / 5 * 100%);
}
.p-cdn__rating-num {
  color: #dc2a2a;
  font-weight: 700;
  font-size: 20px;
}

/* アンカーナビのスクロール先オフセット */
#cdn-photo,
#cdn-feature,
#cdn-info,
#cdn-doctor,
#cdn-faq,
#cdn-review {
  scroll-margin-top: 20px;
}

/* /clinics/{slug} 新デザイン時のみのレイアウト調整（このCSSは新デザイン時のみ読込→他ページ無影響）。
   既存の広域ルールを上書き:
   - styles.css の .main.single{width:calc(100vw-430px)} がコンテンツを970px超に広げていた → 716pxに固定
   - .main / .main>div の overflow-x:hidden が子のアンカーナビ sticky を壊していた → visible に戻す
   - body{overflow-x:hidden} も sticky を壊すため clip に */
.pc-main-content {
  width: 716px;
  max-width: 100%;
}
.main.single {
  width: 100% !important;
  max-width: 716px !important;
  overflow: visible !important;
}
.main > div {
  overflow-x: visible;
}
body {
  overflow-x: clip;
}

/* ===== モバイル(SP) Figma: 202509_個ページ_sp ===== */
@media (max-width: 768px) {
  .p-cdn {
    max-width: 100%;
  }
  /* メイン情報: 縦積み・全幅 */
  .p-cdn__info {
    flex-direction: column;
    align-items: stretch;
    padding: 16px 12px;
  }
  .p-cdn__basic {
    padding: 32px 12px;
  }
  .p-cdn__info-left,
  .p-cdn__info-right {
    width: 100%;
  }
  /* こんな人におすすめ / 強み・特徴 は横並び (Figma SP 9450:8942) */
  .p-cdn__info-right {
    flex-direction: row;
  }
  .p-cdn__info-right .p-cdn__card {
    flex: 1;
    min-width: 0;
  }
  /* 基本情報 SP: 写真→カード2列→対応症状(全幅)→治療設備(全幅)→カレンダー(全幅) (Figma SP) */
  .p-cdn__basic-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: start;
  }
  .p-cdn__basic-left,
  .p-cdn__basic-right {
    display: contents;
  }
  .p-cdn__basic-ext {
    grid-column: 1 / -1;
    order: 1;
  }
  .p-cdn__basic-right .p-cdn__basic-card {
    order: 2;
  }
  .p-cdn__basic-right .p-cdn__basic-card:last-child {
    grid-column: 1 / -1;
    order: 3;
  }
  .p-cdn__basic-left .p-cdn__basic-card {
    grid-column: 1 / -1;
    order: 4;
  }
  .p-cdn__cal {
    grid-column: 1 / -1;
    order: 5;
  }
  /* CTAリード「を完全無料サポート」を改行 */
  .p-cdn__cta-lead-em small {
    display: block;
  }
  /* アンカーナビ: 横スクロール化 */
  .p-cdn__anchornav {
    top: 70px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .p-cdn__anchornav a {
    flex: 0 0 auto;
    font-size: 14px;
    padding: 8px 14px;
  }
  /* 主要セクションの左右余白 */
  .p-cdn__feature1,
  .p-cdn__reviews,
  .p-cdn__faq {
    padding-left: 12px;
    padding-right: 12px;
  }
  .p-cdn__doctor,
  .p-cdn__atmosphere {
    margin-left: 12px;
    margin-right: 12px;
  }
  .p-cdn__tags {
    padding: 8px 12px;
  }
  .p-cdn__h2 {
    font-size: 20px;
  }
  .p-cdn__feature1-body {
    font-size: 16px;
  }
}