/* パンフレット「写真追加版」の図形色から取得した3色。
   その他の面色・アクセントは既存Webの色を使用。TOPだけに適用。 */
/* 色変数は school-shared.css でTOP・学院概要へ共通適用。 */

/* 色だけを変更。各セクションの寸法・配置は検証版を維持。 */
.top-design-review #nr-news,
.top-design-review #nr-disclosure {
  background: var(--brand-white);
}
.top-design-review #nr-about {
  background: var(--brand-pale);
}
.top-design-review #nr-about::before {
  border-color: var(--brand-line);
}
.top-design-review #nr-about > h2,
.top-design-review .review-about-message,
.top-design-review .review-about-copy h3 {
  color: var(--brand-deep);
}
.top-design-review #nr-course {
  background: var(--brand-ivory);
}
.top-design-review #nr-course .nr-box:nth-child(2) {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
}
.top-design-review #nr-course .nr-box:nth-child(2) h3,
.top-design-review #nr-course .nr-box:nth-child(2) p,
.top-design-review #nr-course .nr-box:nth-child(2) .nr-tag {
  color: var(--brand-white);
}
.top-design-review #nr-course .review-course-year {
  color: var(--brand-pale);
}
.top-design-review #nr-contact {
  background: var(--brand-beige);
}
.top-design-review #nr-contact .contact-card {
  background: var(--brand-white);
}
.top-design-review main .nr-button {
  background: var(--brand-yellow);
}
.top-design-review main > section:not(.photo-hero) h2::after {
  background: var(--brand-yellow);
}
.top-design-review #nr-news .nr-row > .nr-button {
  background: transparent;
}
.top-design-review main .section-en {
  color: var(--brand-green);
}
.top-design-review .review-map-thumbnail > span {
  color: var(--brand-deep);
  background: var(--brand-white);
}

/* 全面写真の前に固定の真円2枚。写真・コピー・操作UIは別レイヤー。 */
.top-design-review main > section.photo-hero {
  --hero-height: clamp(460px, calc(100svh - var(--header-offset) - 110px), 720px);
  --fv-circle-size: max(1100px, calc(var(--hero-height) * 2.2));
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  grid-template-rows: auto;
  position: relative;
  overflow: visible;
  background: var(--brand-off-white);
}
.top-design-review .photo-hero .photo-carousel {
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
}
.top-design-review .photo-hero .photo-stage {
  width: 100%;
  margin-left: 0;
  height: var(--hero-height);
  max-height: none;
  border-radius: 0;
  background: var(--brand-off-white);
}
.top-design-review .photo-hero .photo-stage::after {
  content: none;
  display: none;
  background: none;
}
.top-design-review .photo-hero .photo-slide img {
  filter: none;
  opacity: 1;
  object-position: 52% center;
}
.top-design-review .photo-hero .hero-copy {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  inset: auto;
  z-index: 3;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: var(--hero-height);
  min-width: 0;
  padding: 32px clamp(12px, 1.2vw, 24px);
  border-radius: 0;
  color: var(--brand-deep);
  background: transparent;
}

.top-design-review .photo-hero .hero-copy h1 {
  margin: 0 0 24px;
  font-size: clamp(26px, 2.8vw, 46px);
  line-height: 1.48;
  letter-spacing: 0;
  text-shadow: none;
}
.top-design-review .photo-hero .hero-copy .catch-intro {
  color: var(--brand-deep);
  font-size: inherit;
  font-weight: 500;
}
.top-design-review .photo-hero .hero-copy .catch-emphasis {
  color: var(--brand-deep);
  font-size: clamp(28px, 2.95vw, 49px);
  font-weight: 600;
}
.top-design-review .photo-hero .hero-copy .hero-eyebrow {
  color: var(--brand-green);
  margin-bottom: 20px;
}
.top-design-review .photo-hero .hero-copy > p:not(.hero-eyebrow) {
  color: var(--ink);
  font-size: clamp(12px, 1.1vw, 16px);
}
.top-design-review .photo-hero .hero-copy .nr-button {
  max-width: 100%;
}
.top-design-review .photo-hero .photo-toolbar {
  position: relative;
  z-index: 4;
}

/* Tabletも、文字と写真が狭くなる幅では上下の構図へ切り替える。 */
@media (max-width: 900px) {
  .top-design-review main > section.photo-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .top-design-review .photo-hero .photo-carousel {
    grid-column: 1;
    grid-row: 1;
  }
  .top-design-review .photo-hero .photo-stage {
    width: 100%;
    margin-left: 0;
    height: clamp(280px, 40svh, 400px);
    border-radius: 0;
  }
  .top-design-review .photo-hero .hero-copy {
    grid-column: 1;
    grid-row: 2;
    height: auto;
    margin-top: 0;
    padding: 28px 6% 68px;
    border-radius: 0;
    background: var(--brand-off-white);
  }

  .top-design-review .photo-hero .hero-copy h1 {
    font-size: clamp(25px, 4.2vw, 36px);
    margin-bottom: 16px;
  }
  .top-design-review .photo-hero .hero-copy .catch-emphasis {
    font-size: clamp(27px, 4.4vw, 38px);
  }
  .top-design-review .photo-hero .photo-toolbar {
    position: absolute;
    inset: auto 0 6px;
    margin: 0;
  }
}
@media (max-width: 700px) {
  .top-design-review .photo-hero .photo-stage {
    height: clamp(240px, 38svh, 340px);
  }
  .top-design-review .photo-hero .hero-copy {
    padding: 24px 6% 60px;
  }
  .top-design-review .photo-hero .hero-copy h1 {
    font-size: clamp(20px, 5.7vw, 27px);
    margin-bottom: 14px;
    line-height: 1.42;
  }
  .top-design-review .photo-hero .hero-copy .catch-emphasis {
    font-size: clamp(22px, 6.1vw, 29px);
  }
  .top-design-review .photo-hero .hero-copy .hero-eyebrow {
    margin-bottom: 10px;
  }
  .top-design-review .photo-hero .hero-copy > p:not(.hero-eyebrow) {
    margin-bottom: 18px;
    font-size: 12px;
  }
}


.top-design-review .photo-hero .fv-circle {
  position: absolute;
  display: block;
  width: var(--fv-circle-size);
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 0;
  box-shadow: none;
  pointer-events: none;
  transform: translateY(-50%);
}
.top-design-review .photo-hero .fv-circle--green {
  z-index: 2;
  top: calc(50% + 48px);
  left: calc(43.5% - var(--fv-circle-size));
  background: var(--brand-pale);
}
.top-design-review .photo-hero .fv-circle--white {
  z-index: 3;
  top: 50%;
  left: calc(41% - var(--fv-circle-size));
  background: var(--brand-off-white);
}
/* PC完成見本の座標比率。
   写真枠1832×658、白円直径840・左端-104・上端-163、
   緑円直径580・左端296・上端100（ヘッダーを除いた写真枠基準）。
   元写真は4:3のためcontainで全体を保持。背景を生成して埋めない。 */
@media (min-width: 901px) {
  .top-design-review main > section.photo-hero {
    --hero-height: calc(95.4vw * 658 / 1832);
    width: 95.4%;
    margin: 0 auto 64px 0;
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  }
  .top-design-review .photo-hero .photo-stage {
    height: var(--hero-height);
    min-height: 0;
  }
  .top-design-review .photo-hero .photo-slide img {
    object-fit: contain;
    object-position: right center;
  }
  .top-design-review .photo-hero .fv-circle {
    top: auto;
    bottom: auto;
    transform: none;
  }
  .top-design-review .photo-hero .fv-circle--white {
    width: 45.85%;
    left: -5.68%;
    top: -24.77%;
  }
  .top-design-review .photo-hero .fv-circle--green {
    width: 31.66%;
    left: 16.16%;
    top: 15.2%;
  }
  .top-design-review .photo-hero .hero-copy {
    justify-content: flex-start;
    padding: calc(95.4vw * 154 / 1832) 0 0 calc(95.4vw * 134 / 1832);
  }
  .top-design-review .photo-hero .hero-copy .hero-eyebrow {
    font-size: clamp(12px, 1.25vw, 24px);
    line-height: 1.5;
    margin-bottom: clamp(16px, 1.4vw, 27px);
  }
  .top-design-review .photo-hero .hero-copy h1 {
    font-size: clamp(28px, 3.2vw, 61px);
    line-height: 1.48;
    margin-bottom: clamp(12px, 1.25vw, 24px);
  }
  .top-design-review .photo-hero .hero-copy .catch-emphasis {
    font-size: clamp(30px, 3.3vw, 63px);
  }
  .top-design-review .photo-hero .hero-copy > p:not(.hero-eyebrow) {
    font-size: clamp(12px, 1.25vw, 24px);
    line-height: 1.5;
    margin-bottom: clamp(14px, 1.4vw, 27px);
  }
  .top-design-review .photo-hero .hero-copy .nr-button {
    min-height: 44px;
    font-size: clamp(12px, 1.1vw, 21px);
    padding: clamp(8px, .83vw, 16px) clamp(16px, 1.25vw, 24px);
  }
  .top-design-review .photo-hero .photo-toolbar {
    min-height: 54px;
    padding-left: 4.9%;
    margin-top: 12px;
  }
  .top-design-review .photo-hero .scroll-cue {
    right: -4.5vw;
    bottom: 82px;
  }
}
@media (max-width: 900px) {
  .top-design-review .photo-hero .fv-circle--white {
    display: none;
  }
  .top-design-review .photo-hero .fv-circle--green {
    width: 280px;
    top: auto;
    left: auto;
    right: -80px;
    bottom: -230px;
    transform: none;
  }
}

/* PC / Tablet共通：全面写真 → 淡緑の真円 → 白の真円 → コピー。
   769〜1099pxの寸法は末尾のTablet専用指定で調整する。 */
@media (min-width: 769px) {
  .top-design-review main > section.photo-hero {
    --hero-height: calc(100vw * 755 / 1870);
    display: block;
    width: 100%;
    margin: 0 0 64px;
    background: transparent;
  }
  .top-design-review .photo-hero .photo-carousel {
    position: relative;
    width: 100%;
  }
  .top-design-review .photo-hero .photo-stage {
    width: 100%;
    height: var(--hero-height);
    margin: 0;
    background: transparent;
  }
  .top-design-review .photo-hero .photo-slide {
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .top-design-review .photo-hero .photo-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0%;
    filter: none;
    opacity: 1;
  }
  .top-design-review .photo-hero .photo-slide:nth-of-type(2) img {
    object-position: 50% 25%;
  }
  .top-design-review .photo-hero .photo-slide:nth-of-type(3) img {
    object-position: 50% 45%;
  }
  .top-design-review .photo-hero .fv-circle--white {
    /* 白円の中心を基準に2円セットを94%へ縮小し、右12px・下8pxへ。 */
    width: 36.66%;
    left: calc(.67% + 12px);
    top: calc(2% + 1.17vw + 8px);
    background: var(--brand-off-white);
  }
  .top-design-review .photo-hero .fv-circle--green {
    /* 中心間の距離も94%に揃え、2円の重なり比率を維持する。 */
    width: 31.96%;
    left: calc(10.822% + 12px);
    top: calc(13.75% + 1.17vw + 8px);
    background: var(--brand-pale);
  }
  .top-design-review .photo-hero .hero-copy {
    position: absolute;
    inset: 0 auto auto 0;
    width: 39%;
    height: var(--hero-height);
    padding: calc(100vw * 180 / 1870) 0 0 calc(100vw * 130 / 1870);
    /* コピーは拡縮せず、円と同じ移動量だけ追従する。 */
    transform: translate(12px, 8px);
    background: transparent;
    border-radius: 0;
    z-index: 4;
  }
  .top-design-review .photo-hero .hero-copy h1 {
    font-size: clamp(36px, 3.05vw, 57px);
    line-height: 1.5;
    margin-bottom: clamp(18px, 1.8vw, 34px);
  }
  .top-design-review .photo-hero .hero-copy .catch-emphasis {
    font-size: clamp(38px, 3.15vw, 59px);
  }
  .top-design-review .photo-hero .hero-copy .hero-eyebrow {
    margin-bottom: clamp(20px, 2.4vw, 45px);
  }
  .top-design-review .photo-hero .photo-toolbar {
    position: absolute;
    inset: auto 2.6% 3.5% 4%;
    width: auto;
    min-height: 44px;
    margin: 0;
    padding: 0;
    z-index: 5;
  }
  .top-design-review .photo-hero .photo-count {
    color: #fff;
  }
  .top-design-review .photo-hero .photo-toolbar button {
    color: #fff;
    border-color: #fff;
    background: transparent;
  }
  .top-design-review .photo-hero .photo-toolbar button:hover,
  .top-design-review .photo-hero .photo-toolbar button:focus-visible {
    color: var(--brand-deep);
    background: var(--brand-white);
  }
  .top-design-review .photo-hero .scroll-cue {
    right: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* SPは写真とコピーの縦構成とし、写真上の装飾円を表示しない。 */
@media (max-width: 768px) {
  .top-design-review .photo-hero .fv-circle {
    display: none;
  }
}

/* 円の色だけを調整。右下へ、ごく静かにグリーンが深まる。 */
.top-design-review .photo-hero .fv-circle--white {
  background: linear-gradient(135deg, #fafbf8 0%, #f7faf5 100%);
}

.top-design-review .photo-hero .fv-circle--green {
  background: linear-gradient(135deg, #eef6ed 0%, #d7e9d7 50%, #c4dfc6 100%);
}

/* Tablet：右カラムへ分離せず、写真は必ずFV全面に敷く。 */
@media (min-width: 769px) and (max-width: 1099px) {
  .top-design-review main > section.photo-hero {
    --hero-height: clamp(420px, 48vw, 500px);
    --tablet-circle-size: clamp(430px, 50vw, 510px);
  }
  .top-design-review .photo-hero .fv-circle {
    display: block;
    right: auto;
    bottom: auto;
    transform: none;
  }
  .top-design-review .photo-hero .fv-circle--white {
    width: var(--tablet-circle-size);
    left: -20px;
    top: 10px;
  }
  .top-design-review .photo-hero .fv-circle--green {
    width: calc(var(--tablet-circle-size) * .94);
    left: 28px;
    top: 42px;
  }
  .top-design-review .photo-hero .hero-copy {
    inset: 0 auto auto 0;
    justify-content: flex-start;
    width: 410px;
    height: var(--hero-height);
    margin: 0;
    padding: clamp(92px, 10vw, 110px) 0 0 28px;
    transform: none;
  }
  .top-design-review .photo-hero .hero-copy .hero-eyebrow {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 18px;
  }
  .top-design-review .photo-hero .hero-copy h1 {
    font-size: clamp(26px, 2.95vw, 32px);
    line-height: 1.48;
    margin-bottom: 20px;
  }
  .top-design-review .photo-hero .hero-copy .catch-emphasis {
    font-size: clamp(28px, 3.15vw, 34px);
  }
  .top-design-review .photo-hero .hero-copy > p:not(.hero-eyebrow) {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 22px;
  }
  .top-design-review .photo-hero .hero-copy .nr-button {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 14px;
  }
}