@charset "UTF-8";
/* ==========================================================================
   Front Page — TOPページ各セクション
   Figma: takara / PC TOP（01_index_pc / node 36784-2）基準幅 1440px
   セクション順序は Figma と一致させている。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   写真: photos/hero.jpg（PC 2880x1800 = 枠1440x900の2倍）
        photos/hero-sp.jpg（SP 780x952 = 枠390x476の2倍）
        原版 01写真素材/DSC02211.JPG（6000x4000）
   月桂冠バッジ: 文字込みSVG（sp-top/group-1171275628 / 631 / 632）
   -------------------------------------------------------------------------- */
/* ヘッダーのロゴ（152px）はヘッダー高さ120pxから32pxはみ出してヒーローに重なる。
   ロゴは .l-header（z-index:10）の子なのでヒーローより上に描画される。 */
.p-hero {
  position: relative;
  height: 900px;
}
.p-hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-bottom-left-radius: 240px;
  background: var(--color-t-base01); /* 画像読み込み前の下地 */
}
.p-hero__media img,
.p-hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 画像は枠と同じ 1440:900 で書き出しているため、cover でも
     上下左右いずれも切られない。object-position は保険。 */
  object-position: center center;
}
.p-hero__inner {
  position: relative;
  z-index: 2;
  width: var(--x-canvas);
  height: 100%;
  margin-inline: auto;
  padding-top: 300px;
  padding-left: var(--x-gutter);
}

/* 月桂冠バッジ（文字込みSVG） */
.p-hero__badges {
  position: absolute;
  left: var(--x-gutter);
  bottom: 80px;
  z-index: 2;
  display: flex;
  gap: 28px;
}
.p-hero__badge { width: 200px; }
.p-hero__badge img { display: block; width: 100%; }

/* 蛍光ペン風の背景つき見出し。1行ごとに背景を付けるため span で分割する */
.p-hero__catch {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font-family: var(--typography-t-28sb-family);
  font-weight: var(--typography-t-28sb-weight);
  font-size: 34px;
  line-height: 1.5;
  letter-spacing: .1em;
  color: var(--color-wh);
}
.p-hero__catch span {
  display: inline-block;
  padding: 4px 14px;
  background: var(--x-hero-marker);
}
.p-hero__catch span:nth-child(n+2) { background: var(--x-hero-marker-2); }

/* --------------------------------------------------------------------------
   2. INFORMATION
   受付写真: photos/info.jpg（1440x1572）
   -------------------------------------------------------------------------- */
.p-info { background: var(--x-info-bg); }

.p-info__head {
  padding: 40px 0 34px var(--x-gutter);
  background: var(--color-t-base01);
}
.p-info__head-en {
  font-family: var(--typography-t-28sb-family);
  font-size: 88px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--color-t-main01);
  opacity: .55;
}

.p-info__body {
  position: relative;
  min-height: 700px;
  padding: 110px 0;
}
.p-info__list {
  width: 700px;
  margin-left: var(--x-gutter);
}
.p-info__item {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 96px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-t-bdr01);
}
.p-info__check {
  flex: none;
  width: 34px;
  height: 34px;
  color: var(--color-t-ac02);
}
.p-info__check svg { width: 34px; height: 34px; }
.p-info__text {
  font-family: var(--typography-t-28sb-family);
  font-size: var(--typography-t-28sb-size);
  font-weight: var(--typography-t-28sb-weight);
  line-height: 1.6;
  letter-spacing: .06em;
  color: var(--color-t-main01);
}
/* lead（上段の小さい補足）と main（強調）は縦に積む */
.p-info__lead,
.p-info__main { display: block; }
.p-info__lead { margin-bottom: 4px; }

/* 「〜も診療」「〜可能」などの補助語は小さく */
.p-info__text small {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .04em;
}
.p-info__text em {
  font-style: normal;
  color: var(--color-t-txt01);
}

.p-info__visual {
  position: absolute;
  top: 0;
  right: 0;
  width: 720px;
  height: 100%;
  overflow: hidden;
  background: var(--color-t-base01);
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}
.p-info__visual img { width: 100%; height: 100%; object-fit: cover; }

/* 縦書きコピー */
.p-info__vertical {
  position: absolute;
  top: 40px;
  right: 176px;
  display: flex;
  gap: 12px;
  z-index: 2;
}
.p-info__vertical span {
  writing-mode: vertical-rl;
  padding: 22px 10px;
  background: var(--color-wh);
  font-family: var(--typography-t-28sb-family);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: .12em;
  line-height: 1.4;
}
.p-info__vertical span:first-child { color: var(--color-t-txt01); }
.p-info__vertical span:last-child { color: var(--color-t-ac02); }

/* --------------------------------------------------------------------------
   3. TROUBLE
   カード写真: sp-top/image-7〜16.png（171x94）
   -------------------------------------------------------------------------- */
.p-trouble {
  padding: 92px 0 96px;
  background: var(--x-trouble-bg);
}
.p-trouble__head { text-align: center; }
.p-trouble__label {
  font-family: var(--typography-t-20sb-family);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .3em;
  color: var(--color-t-main01);
}
.p-trouble__title {
  margin-top: 18px;
  font-family: var(--typography-t-28sb-family);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .1em;
}
.p-trouble__title span {
  border-bottom: 1px solid var(--color-t-txt01);
}
.p-trouble__title em {
  font-style: normal;
  color: var(--color-t-ac02);
}

.p-trouble__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px 16px;
  margin-top: 56px;
}
.p-trouble__card {
  display: flex;
  flex-direction: column;
  background: var(--color-wh);
}
.p-trouble__card-img {
  aspect-ratio: 219 / 120;
  background: var(--color-t-base01);
}
.p-trouble__card-img img { width: 100%; height: 100%; object-fit: cover; }
.p-trouble__card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 12px 26px;
  text-align: center;
}
.p-trouble__card-check { width: 20px; height: 20px; color: var(--color-t-ac02); }
.p-trouble__card-text {
  font-family: var(--typography-t-14sb-family);
  font-size: var(--typography-t-14sb-size);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .06em;
}

/* --------------------------------------------------------------------------
   4. Message（丁寧な説明と治療を通じて）
   -------------------------------------------------------------------------- */
.p-message {
  position: relative;
  padding: 92px 0 0;
  background: var(--color-t-base01);
}
.p-message__inner {
  position: relative;
  display: flex;
  align-items: flex-end;
}
.p-message__box {
  width: 822px;
  min-height: 202px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 68px;
  background: var(--color-t-main01);
  color: var(--color-wh);
  text-align: center;
  font-family: var(--typography-t-28sb-family);
  font-size: var(--typography-t-28sb-size);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .12em;
}
.p-message__figure {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 296px;
}
.p-message__figure img { display: block; width: 100%; }

/* --------------------------------------------------------------------------
   5. CLINIC INFO（医院情報）
   TOPページ内で2回出現する（診療案内前 / フッター前）
   -------------------------------------------------------------------------- */
.p-clinic {
  position: relative;
  padding: 106px 0 100px;
  background: var(--color-t-base01);
}
/* 背景写真はPC(1440x2033)とSP(390x2421)で縦横比が違うため
   background-image でブレークポイントごとに差し替える（切替は sp.css）。 */
.p-clinic__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-image: url("../img/pc-top/adobestock-295128273-1.jpg");
  background-size: cover;
  background-position: center top;
}
.p-clinic__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(180, 224, 190, .82) 0%, rgba(232, 245, 232, .72) 100%);
}
.p-clinic__card {
  position: relative;
  z-index: 2;
  padding: 72px 0 80px;
  background: var(--color-wh);
}
.p-clinic__head { text-align: center; }
.p-clinic__head-en {
  font-family: var(--typography-t-28sb-family);
  font-size: 44px;
  font-weight: 400;
  letter-spacing: .06em;
  line-height: 1.2;
}
.p-clinic__head-ja {
  margin-top: 10px;
  font-family: var(--typography-t-14r-family);
  font-size: var(--typography-t-14r-size);
  letter-spacing: .1em;
}

.p-clinic__cols {
  display: flex;
  gap: 32px;
  justify-content: center;
  margin-top: 48px;
}
.p-clinic__main { width: 420px; }
.p-clinic__logo {
  width: 168px;
  margin: 0 auto;
}
.p-clinic__logo img { display: block; width: 100%; }

.p-clinic__table { width: 100%; margin-top: 28px; }
.p-clinic__table th,
.p-clinic__table td {
  padding: 14px 0;
  border-bottom: 1px solid var(--color-t-bdr01);
  vertical-align: middle;
  text-align: left;
}
.p-clinic__table th {
  width: 92px;
  font-family: var(--typography-t-14r-family);
  font-size: var(--typography-t-14r-size);
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--color-t-txt01);
}
.p-clinic__table td {
  font-family: var(--typography-t-14r-family);
  font-size: var(--typography-t-14r-size);
  line-height: 1.8;
  letter-spacing: .04em;
}
.p-clinic__tel {
  font-family: var(--typography-t-28sb-family);
  font-size: 32px;
  font-weight: var(--typography-t-28sb-weight);
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--color-t-main01);
}

/* 診療時間 */
.p-clinic__hours {
  width: 100%;
  margin-top: 24px;
  font-family: var(--typography-t-14r-family);
  font-size: 13px;
}
.p-clinic__hours th,
.p-clinic__hours td {
  padding: 12px 4px;
  text-align: center;
  border-bottom: 1px solid var(--color-t-bdr01);
  font-weight: 400;
  letter-spacing: .04em;
}
.p-clinic__hours thead th { background: var(--color-t-base01); border-bottom: 0; }
.p-clinic__hours tbody th { width: 108px; }
.p-clinic__note {
  margin-top: 12px;
  font-family: var(--typography-t-14r-family);
  font-size: 12px;
  letter-spacing: .04em;
}
.p-clinic__note em { font-style: normal; color: var(--color-t-ac02); }

.p-clinic__map { width: 512px; }
.p-clinic__map iframe {
  display: block;
  width: 100%;
  height: 560px;
  border: 0;
}
.p-clinic__map-link {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 10px;
  font-family: var(--typography-t-14r-family);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--color-t-main01);
  text-decoration: underline;
}
.p-clinic__map-link::after {
  content: "";
  width: 5px; height: 5px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   6. FEATURES（当院の8つの特徴）
   ⚠ 背景グラデーション画像が未受領のため CSS で近似。
   -------------------------------------------------------------------------- */
.p-features {
  padding: 96px 0 104px;
  background: linear-gradient(180deg, var(--x-features-from) 0%, var(--x-features-to) 55%, #a9dcbb 100%);
}
.p-features__head { text-align: center; }
.p-features__title {
  font-family: var(--typography-t-28sb-family);
  font-size: 44px;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1.4;
}
.p-features__title em {
  font-style: normal;
  font-size: 64px;
  color: var(--color-t-ac02);
}
.p-features__divider {
  width: 490px;
  height: 1px;
  margin: 22px auto 14px;
  background: var(--color-t-txt01);
  opacity: .4;
}
.p-features__en {
  font-family: var(--typography-t-28sb-family);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: .2em;
}

.p-features__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px var(--x-col-gap);
  margin-top: 54px;
}
.p-features__card {
  position: relative;
  background: var(--color-t-base01);
}
/* カード全体を1つのリンクにする。画像・番号・テキストをまとめて包む */
.p-features__card-link {
  display: block;
  height: 100%;
  color: inherit;
}
.p-features__card-link:hover { opacity: 1; }
.p-features__card-img { display: block; }
.p-features__card-img img { display: block; width: 100%; }
/* 左上の斜め三角＋番号。番号入りSVG（group-1171275633*.svg）をそのまま置く */
.p-features__num {
  position: absolute;
  top: 0;
  left: 0;
  width: 88px;
  pointer-events: none;
}
.p-features__num img { display: block; width: 100%; }
.p-features__card-text {
  padding: 22px 16px 28px;
  text-align: center;
  font-family: var(--typography-t-16sb-family);
  font-size: var(--typography-t-16sb-size);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .06em;
}

/* --------------------------------------------------------------------------
   7. MENU（診療案内）
   ⚠ 24点のメニューアイコン（白線アイコン）は素材未受領。
   -------------------------------------------------------------------------- */
.p-menu {
  padding: 96px 0 104px;
  background: var(--color-t-base01);
}
.p-menu__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 52px var(--x-col-gap);
  margin-top: 56px;
}
.p-menu__item {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 84px;
  padding: 0 20px;
  background: var(--color-t-main01);
  color: var(--color-wh);
}
.p-menu__item:hover { opacity: 1; background: #0a6b62; }
.p-menu__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-wh);
  color: var(--color-t-main01);
  overflow: hidden;
}
.p-menu__icon img { width: 40px; height: 40px; object-fit: contain; }
.p-menu__label {
  font-family: var(--typography-t-16sb-family);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .06em;
}
.p-menu__foot {
  display: flex;
  justify-content: center;
  margin-top: 64px;
}
.p-menu__foot .c-btn { min-width: 360px; height: 72px; }

/* --------------------------------------------------------------------------
   8. PRICE（料金案内）
   -------------------------------------------------------------------------- */
.p-price { padding: 96px 0; }
.p-price__card {
  display: flex;
  align-items: center;
  gap: 34px;
  padding: 64px;
  background: var(--color-t-base01);
}
.p-price__figure { flex: none; width: 496px; }
.p-price__figure img { display: block; width: 100%; }
.p-price__body { flex: 1; }
.p-price__head {
  display: flex;
  align-items: baseline;
  gap: 18px;
}
.p-price__en {
  font-family: var(--typography-t-28sb-family);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--color-t-main01);
}
.p-price__ja {
  font-family: var(--typography-t-16sb-family);
  font-size: var(--typography-t-16sb-size);
  font-weight: var(--typography-t-16sb-weight);
  letter-spacing: .1em;
}
.p-price__text {
  margin-top: 30px;
  font-family: var(--typography-t-16r-family);
  font-size: var(--typography-t-16r-size);
  line-height: 1.9;
  letter-spacing: .06em;
}
.p-price__brands { width: 424px; margin-top: 22px; }
.p-price__brands img { display: block; width: 100%; }
.p-price__action { margin-top: 34px; }
.p-price__action .c-btn { min-width: 294px; height: 66px; }

/* --------------------------------------------------------------------------
   9. DOCTOR（ドクター紹介）
   ⚠ 背景のモザイクパターン・院長の大判写真は素材未受領。
   -------------------------------------------------------------------------- */
.p-doctor {
  position: relative;
  padding: 84px 0 96px;
  overflow: hidden;
}
/* モザイク調の背景（sp-top/adobestock-519037374-1.jpg / 390x1101）
   SP用サイズしか無いため、PCでは横方向にタイル状に繰り返して敷いている。 */
.p-doctor::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 964px;
  height: 100%;
  background-image: url("../img/sp-top/adobestock-519037374-1.jpg");
  background-size: 390px auto;
  background-repeat: repeat;
  opacity: .9;
  pointer-events: none;
}
.p-doctor__inner { position: relative; z-index: 2; }
.p-doctor__body { width: 600px; margin-top: 56px; }

.p-doctor__name {
  display: flex;
  align-items: center;
  gap: 14px;
}
.p-doctor__role {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 26px;
  background: var(--color-t-ac02);
  color: var(--color-wh);
  font-family: var(--typography-t-14sb-family);
  font-size: 13px;
  letter-spacing: .1em;
}
.p-doctor__name-ja {
  font-family: var(--typography-t-24sb-family);
  font-size: var(--typography-t-24sb-size);
  font-weight: var(--typography-t-24sb-weight);
  letter-spacing: .1em;
}
.p-doctor__name-en {
  font-family: var(--typography-t-16sb-family);
  font-size: 15px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: .04em;
  color: var(--x-txt-mute);
}
.p-doctor__quote {
  margin-top: 26px;
  font-family: var(--typography-t-28sb-family);
  font-size: var(--typography-t-28sb-size);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .08em;
}
.p-doctor__text { margin-top: 28px; }
.p-doctor__text p {
  font-family: var(--typography-t-14r-family);
  font-size: var(--typography-t-14r-size);
  line-height: 1.9;
  letter-spacing: .04em;
}
.p-doctor__text p + p { margin-top: 16px; }

.p-doctor__license {
  margin-top: 34px;
  padding: 24px 28px;
  background: var(--color-wh);
}
.p-doctor__license-head {
  font-family: var(--typography-t-16sb-family);
  font-size: var(--typography-t-16sb-size);
  font-weight: var(--typography-t-16sb-weight);
  letter-spacing: .08em;
  color: var(--color-t-main01);
}
.p-doctor__license ul { margin-top: 14px; }
.p-doctor__license li {
  font-family: var(--typography-t-14r-family);
  font-size: var(--typography-t-14r-size);
  line-height: 1.9;
  letter-spacing: .04em;
}
.p-doctor__action { margin-top: 28px; }
.p-doctor__action .c-btn { min-width: 294px; }

/* コンテナの右端に揃える。--x-gutter を入れるとテキストに重なる（1160 - 560 = 600 が
   本文幅なので、右端合わせで初めて隣り合う） */
.p-doctor__figure {
  position: absolute;
  right: 0;
  bottom: 96px;
  z-index: 2;
  width: 560px;
  aspect-ratio: 560 / 660;
  background: var(--color-t-base01);
}
.p-doctor__figure img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   10. PICK UP MENU（ピックアップメニュー）
   -------------------------------------------------------------------------- */
.p-pickup {
  padding: 96px 0 120px;
  background: linear-gradient(180deg, #b7e3c4 0%, #eaf7ee 26%, var(--color-wh) 46%);
}
.p-pickup__card {
  padding: 72px 0 80px;
  background: var(--color-wh);
}
.p-pickup__list { margin-top: 56px; }
.p-pickup__item {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  width: 848px;
  margin-inline: auto;
  padding: 44px 0;
}
.p-pickup__item + .p-pickup__item { border-top: 1px solid var(--color-t-bdr01); }
.p-pickup__figure { flex: none; width: 288px; }
.p-pickup__figure img { display: block; width: 100%; }
.p-pickup__body { flex: 1; }
.p-pickup__label {
  display: flex;
  align-items: center;
  gap: 16px;
}
.p-pickup__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 42px;
  background: var(--color-t-ac02);
  color: var(--color-wh);
  font-family: var(--typography-t-24sb-family);
  font-size: 21px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: .04em;
}
.p-pickup__en {
  font-family: var(--typography-t-28sb-family);
  font-size: 32px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: .02em;
  color: var(--color-t-ac02);
}
.p-pickup__title {
  margin-top: 22px;
  font-family: var(--typography-t-24sb-family);
  font-size: var(--typography-t-24sb-size);
  font-weight: var(--typography-t-24sb-weight);
  letter-spacing: .08em;
  color: var(--color-t-main01);
}
.p-pickup__text {
  margin-top: 14px;
  font-family: var(--typography-t-14r-family);
  font-size: var(--typography-t-14r-size);
  line-height: 1.9;
  letter-spacing: .04em;
}
.p-pickup__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.p-pickup__action { margin-top: 24px; }
.p-pickup__action .c-btn { min-width: 294px; height: 60px; }

/* --------------------------------------------------------------------------
   11. 設備（精密な診断と安心を支える設備）
   -------------------------------------------------------------------------- */
.p-equip { padding: 20px 0 96px; }
.p-equip__title {
  text-align: center;
  font-family: var(--typography-t-28sb-family);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: .12em;
  line-height: 1.5;
}
.p-equip__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}
.p-equip__card { background: var(--color-t-base01); }
.p-equip__figure { position: relative; }
.p-equip__figure img { display: block; width: 100%; }
.p-equip__num {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 46px;
  background: var(--color-t-main01);
  color: var(--color-wh);
  font-family: var(--typography-t-20sb-family);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: .04em;
}
.p-equip__body { padding: 26px 24px 32px; }
.p-equip__name {
  text-align: center;
  font-family: var(--typography-t-20sb-family);
  font-size: var(--typography-t-20sb-size);
  font-weight: var(--typography-t-20sb-weight);
  letter-spacing: .12em;
  color: var(--color-t-ac02);
}
.p-equip__text {
  margin-top: 16px;
  font-family: var(--typography-t-14r-family);
  font-size: var(--typography-t-14r-size);
  line-height: 1.9;
  letter-spacing: .04em;
}

/* --------------------------------------------------------------------------
   12. CASE（症例）
   ⚠ 症例本文はデザイン上ダミーテキスト（「テキストが入ります。」）のまま。
      原稿受領後に差し替えが必要。
   -------------------------------------------------------------------------- */
.p-case {
  padding: 92px 0 104px;
  background: var(--color-t-main01);
}
.p-case__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 56px;
}
.p-case__card { background: var(--color-t-base01); }
.p-case__compare {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.p-case__compare img { display: block; width: 100%; }
.p-case__toggle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  background: var(--color-t-main01);
  color: var(--color-wh);
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-case__toggle::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg) translate(-1px, 1px);
}
/* main.js のトグル：after のみを全幅表示に切り替える
   ※ Figmaに挙動指定がないため暫定仕様（docs/design-pc-top.md 参照） */
.p-case__compare.is-flipped { grid-template-columns: 0 1fr; }
.p-case__compare.is-flipped img:first-child { visibility: hidden; }
.p-case__toggle { cursor: pointer; }
.p-case__body { padding: 24px 24px 34px; }
/* カード下部を記事へのリンクにする */
.p-case__link { display: block; color: inherit; }
.p-case__link:hover { opacity: 1; }
.p-case__link:hover .p-case__name { text-decoration: underline; }
.p-case__name {
  text-align: center;
  font-family: var(--typography-t-20sb-family);
  font-size: var(--typography-t-20sb-size);
  font-weight: var(--typography-t-20sb-weight);
  letter-spacing: .1em;
  color: var(--color-t-ac02);
}
.p-case__text {
  margin-top: 14px;
  font-family: var(--typography-t-14r-family);
  font-size: var(--typography-t-14r-size);
  line-height: 1.9;
  letter-spacing: .04em;
}
.p-case__foot {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}
.p-case__foot .c-btn { min-width: 360px; }

/* --------------------------------------------------------------------------
   13. NEWS / BLOG
   -------------------------------------------------------------------------- */
.p-posts { background: var(--color-t-base01); }
.p-posts__block {
  display: flex;
  gap: 52px;
  padding: 76px 0;
}
.p-posts__block + .p-posts__block { border-top: 1px solid var(--color-t-bdr01); }
.p-posts__aside { flex: none; width: 220px; }
.p-posts__label {
  font-family: var(--typography-t-14r-family);
  font-size: var(--typography-t-14r-size);
  letter-spacing: .1em;
}
.p-posts__en {
  margin-top: 4px;
  font-family: var(--typography-t-28sb-family);
  font-size: 46px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .04em;
  color: var(--color-t-main01);
}
.p-posts__action { margin-top: 28px; }
.p-posts__action .c-btn { min-width: 220px; height: 55px; padding: 0 32px; }

.p-posts__list { flex: 1; }
.p-posts__item {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-t-bdr01);
}
.p-posts__thumb {
  flex: none;
  width: 128px;
  aspect-ratio: 128 / 68;
  overflow: hidden;
  background: var(--color-t-bdr01);
}
.p-posts__thumb img { width: 100%; height: 100%; object-fit: cover; }
.p-posts__content { flex: 1; }
.p-posts__meta {
  display: flex;
  align-items: center;
  gap: 14px;
}
.p-posts__date {
  font-family: var(--typography-t-14r-family);
  font-size: 13px;
  letter-spacing: .06em;
}
.p-posts__cat {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 12px;
  background: var(--color-t-main01);
  color: var(--color-wh);
  font-family: var(--typography-t-14r-family);
  font-size: 12px;
  letter-spacing: .06em;
}
.p-posts__excerpt {
  margin-top: 6px;
  font-family: var(--typography-t-14r-family);
  font-size: var(--typography-t-14r-size);
  line-height: 1.8;
  letter-spacing: .04em;
}
.p-posts__empty {
  padding: 24px 0;
  font-family: var(--typography-t-14r-family);
  font-size: var(--typography-t-14r-size);
}

/* --------------------------------------------------------------------------
   14. INSTAGRAM
   -------------------------------------------------------------------------- */
.p-insta { padding: 40px 0 96px; }
.p-insta__wrap { position: relative; }
.p-insta__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.p-insta__grid img { display: block; width: 100%; }
.p-insta__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(30, 39, 39, .28);
  color: var(--color-wh);
  text-align: center;
}
.p-insta__ja {
  font-family: var(--typography-t-16sb-family);
  font-size: var(--typography-t-16sb-size);
  font-weight: 400;
  letter-spacing: .3em;
}
.p-insta__en {
  font-family: var(--typography-t-28sb-family);
  font-size: 62px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .06em;
}

/* --------------------------------------------------------------------------
   15. メディア掲載
   -------------------------------------------------------------------------- */
.p-media { padding: 0 0 104px; }
.p-media__hero {
  width: 940px;
  margin-inline: auto;
}
.p-media__hero img { display: block; width: 100%; }
.p-media__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 32px;
}
.p-media__grid img { display: block; width: 100%; }