@charset "utf-8";

/* TOP page design system: Nicolino Dental & Orthodontics */
:root {
  --top-base: #FDFCF8;
  --top-accent: #A18B1E;
  --top-sub: #FF8686;
  --top-heading-deco: url("data:image/png;base64,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");
  --top-section-title-size: 56px;
  --top-section-subtitle-size: 14px;
  --top-section-lead-size: 20px;
  --top-text: #404040;
  --top-box-1: #FEF2F1;
  --top-box-2: #FBF7EB;
  --top-grad: linear-gradient(115deg, #F2E6EA 0%, #F8F3E7 52%, #E5EAF9 100%);
  --top-serif: "Playfair Display", "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --top-sans: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
}

body {
  font-family: var(--top-sans);
  line-height: 1.8;
  letter-spacing: .04em;
}
a { transition: color .25s ease, opacity .25s ease; }
a:hover { color: var(--top-accent); }

/* Shared headings and section rhythm */
h1, h2, h3, .section-title, [class*="ttl"], [class*="title"] {
  color: var(--top-accent);
}
h1, h2, .section-title, [class*="section-title"] {
  font-family: var(--top-serif);
  font-weight: 500;
  letter-spacing: .06em;
}
main section, .main section, [class*="top-section"] {
  position: relative;
}

/* Hero / main visual */
.mv, .mainvisual, .main-visual, .top-mv, .p-mv, [class*="mainvisual"] {
  position: relative;
  overflow: hidden;
  background: var(--top-grad);
}
.mv img, .mainvisual img, .main-visual img, .top-mv img, .p-mv img {
  display: block;
  width: 100%;
  object-fit: cover;
}

/* News and content cards */
.news, .top-news, .news-list, .news__list {
  background: var(--top-base);
}
.news a, .news-list a, .news__list a, .top-card, .feature-card,
[class*="feature-card"], .medical-card {
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.top-card, .feature-card, [class*="feature-card"], .medical-card {
  background: #fff;
  border: 1px solid rgba(161, 139, 30, .34);
  border-radius: 4px;
}
.top-card:hover, .feature-card:hover, [class*="feature-card"]:hover,
.medical-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(64, 64, 64, .08); }

/* Greeting / medical sections */
.greeting, .top-greeting, .greeting-section {
  background: var(--top-grad);
}
.medical, .top-medical, .medical-section, [class*="medical-section"] {
  background: var(--top-grad);
}

/* Gold outline buttons: fill the circle and extend the underline on hover */
.btn, .button, .more-btn, .btn-more, a[class*="btn"], button[class*="btn"] {
  color: var(--top-accent);
  border: 1px solid var(--top-accent);
  border-radius: 999px;
  background: #fff;
  transition: color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.btn:hover, .button:hover, .more-btn:hover, .btn-more:hover,
a[class*="btn"]:hover, button[class*="btn"]:hover {
  color: #fff;
  background: var(--top-accent);
  box-shadow: 0 5px 16px rgba(161, 139, 30, .2);
}

/* Gentle pink and cream accent boxes */
.box1, .box-1, .top-box--pink, [class*="box-pink"] { background-color: var(--top-box-1); }
.box2, .box-2, .top-box--cream, [class*="box-cream"] { background-color: var(--top-box-2); }

/* Responsive spacing */
@media (max-width: 768px) {
  body { letter-spacing: .025em; }
  h1, h2, .section-title, [class*="section-title"] { letter-spacing: .04em; }
  .mv, .mainvisual, .main-visual, .top-mv, .p-mv { min-height: 0; }
  .top-card, .feature-card, [class*="feature-card"], .medical-card { border-radius: 3px; }
}

/* =========================================================
   TOP 共通レイアウト
   ========================================================= */
.top-home { overflow: hidden; background: var(--top-base); }
.top-home .container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
//.top-home section { padding: clamp(64px, 8vw, 120px) 0; }
.top-home .top-eyebrow { margin: 0 0 8px; color: var(--top-accent); font: 500 14px/1.4 var(--top-serif); letter-spacing: .16em; }
.top-home .top-heading { margin: 0 0 28px; color: var(--top-accent); font: 500 clamp(38px, 4.7vw, var(--top-section-title-size))/1.15 var(--top-serif); letter-spacing: .08em; }
.top-home .top-copy { max-width: 680px; margin: 0; line-height: 2; }
@media (max-width: 768px) {
  .top-home .container { width: min(100% - 32px, 580px); }
}

/* =========================================================
   FV：背景・SEO見出し・サイドメニュー
   ========================================================= */
.top-fv {
  --fv-gold: #A18B1E;
  position: relative;
  isolation: isolate;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100vw;
  max-width: none;
  min-height: clamp(520px, 56vw, 800px);
  margin-left: calc(50% - 50vw);
  padding: 0 !important;
  overflow: visible;
  background: linear-gradient(180deg, #F2E6EA 0%, #F8F3E7 50%, #FDFCF8 100%);
}
body .top-fv > h1.top-fv__seo-title {
  position: absolute !important;
  top: 2rem !important;
  right: 2% !important;
  z-index: 12 !important;
  display: block !important;
  width: calc(75% - 24px) !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #404040 !important;
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  letter-spacing: .02em !important;
  text-align: right !important;
  overflow-wrap: anywhere;
  pointer-events: auto !important;
}
.top-fv__side {
  box-sizing: border-box;
  position: relative;
  z-index: 4;
  flex: 0 0 25%;
  align-self: stretch;
  width: 25%;
  padding: clamp(28px, 4vw, 64px) clamp(18px, 3vw, 48px);
}
.top-fv__logo { display: block; width: min(100%, 250px); margin: 0 0 16px; }
.top-fv__logo img { display: block; width: 100%; height: auto; }
.top-fv__nav { margin-top: 2rem; display: flex; flex-direction: column; gap: 8px; }
.top-fv__nav a { position: relative; display: block; padding-left: 1rem; color: #404040; font-size: 14px; text-decoration: none; }
.top-fv__nav a::before { content: "•"; position: absolute; top: 0; left: 0; color: #A18B1E; font-size: 14px; }
.top-fv__contact { margin: 0 0 22px; }
.top-fv__contact-row { display: flex; align-items: center; gap: 8px; margin: 0 0 7px; color: #404040; font-size: 12px; line-height: 1.6; }
.top-fv__contact-row img { display: block; flex: 0 0 auto; width: 16px; height: auto; }
.top-fv__contact-row--tel { font-family: var(--top-serif); }
.top-fv__contact-row--tel a[href^="tel:"] { font-family: inherit; font-size: 18px; line-height: 1.2; }
.top-fv__contact-row--tel img { width: 21px; }
.top-fv__moon, .top-fv__deco { position: absolute; z-index: 2; height: auto; pointer-events: none; }
.top-fv__moon { top: 0; left: 2%; width: clamp(130px, 24vw, 350px); opacity: .7; }
.top-fv__deco { left: -1%; bottom: -4%; width: clamp(120px, 18vw, 280px); }
@media (max-width: 767px) {
  .top-fv { width: 100%; min-height: 690px; margin-left: 0; align-items: flex-start; }
  body .top-fv > h1.top-fv__seo-title { right: 12px !important; width: calc(100% - 24px) !important; }
  .top-fv__side { display: none; }
  .top-fv__contact-row--tel { font-size: 18px; }
  .top-fv__moon { top: -2%; left: -2%; width: 35%; }
  .top-fv__deco { bottom: -4%; width: 27%; }
}

/* =========================================================
   FV：画像だけをフェード切り替え（画像内の曲線を使用）
   ========================================================= */
body .top-fv .top-fv__slider {
  position: absolute;
  z-index: 1;
  top: 10%;
  right: 0 !important;
  bottom: auto;
  width: 75vw !important;
  height: auto !important;
  aspect-ratio: 2880 / 1320 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}
body .top-fv .top-fv__slider > .top-fv__slide {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease, visibility 1.2s ease;
}
body .top-fv .top-fv__slider > .top-fv__slide.is-active { opacity: 1; visibility: visible; }
body .top-fv .top-fv__slider > .top-fv__slide > .top-fv__visual {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: clamp(280px, 42vw, 560px);
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border-radius: 0 !important;
  clip-path: none !important;
  box-shadow: 0 18px 55px rgba(64, 64, 64, .08);
}
.top-fv__visual { background: linear-gradient(145deg, #f7e8ed 0%, #fffaf1 52%, #e7eef8 100%); }
.top-fv__slide--two .top-fv__visual { background: linear-gradient(135deg, #fbf1eb, #f4dce5 52%, #e4eff8); }
.top-fv__slide--three .top-fv__visual { background: linear-gradient(145deg, #fff5dd, #f9e6ea 55%, #dff0f6); }
body .top-fv .top-fv__slider > .top-fv__slide > .top-fv__visual > img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: fill !important;
  object-position: right center;
  border-radius: 0 !important;
}
body .top-fv .top-fv__slider .top-fv__visual::before { content: none !important; display: none !important; }
@media (max-width: 767px) {
  body .top-fv .top-fv__slider { top: 20%; width: 100% !important; }
  body .top-fv .top-fv__slider > .top-fv__slide > .top-fv__visual { min-height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  body .top-fv .top-fv__slider > .top-fv__slide { transition-duration: .01ms; }
}

/* =========================================================
   FV：固定キャッチコピー（CMSで直接選択可能）
   ========================================================= */
body .top-fv .top-fv__copy {
  position: absolute;
  z-index: 10 !important;
  left: 45%;
  bottom: 6%;
  width: min(50%, 900px);
  color: var(--fv-gold);
  text-align: left;
  pointer-events: auto !important;
}
body .top-fv .top-fv__copy > * { pointer-events: auto !important; }
body .top-fv .top-fv__eyebrow,
body .top-fv .top-fv__brand,
body .top-fv .top-fv__tagline { color: #A18B1E !important; }
body .top-fv .top-fv__eyebrow,
body .top-fv .top-fv__brand { text-align: left !important; }
body .top-fv .top-fv__eyebrow {
  margin: 0 0 .2em;
  font-family: "Shippori Mincho", serif !important;
  font-size: clamp(13px, 1.2vw, 20px);
}
body .top-fv .top-fv__brand {
  margin: 0 0 8px;
  font: 500 clamp(40px, 7vw, 84px)/1 var(--top-serif);
  letter-spacing: .04em;
}
body .top-fv .top-fv__tagline {
  margin: .15em 0 0;
  font: 500 clamp(16px, 1.7vw, 28px)/1.25 "Playfair Display", serif !important;
  letter-spacing: .04em !important;
  text-align: right !important;
}
@media (min-width: 768px) {
  body .top-fv .top-fv__copy { left: 30% !important; bottom: 20% !important; width: max-content !important; max-width: 68% !important; }
  body .top-fv .top-fv__eyebrow { font-size: clamp(13px, 1.45vw, 24px) !important; line-height: 1.5 !important; margin-bottom: clamp(10px, 1vw, 18px) !important; }
  body .top-fv .top-fv__brand { font-size: clamp(72px, 8.8vw, 180px) !important; line-height: 1 !important; margin: 0 0 .04em !important; white-space: nowrap; }
  body .top-fv .top-fv__tagline { font-size: clamp(18px, 2vw, 32px) !important; margin: 0 !important; }
}
@media (max-width: 767px) {
  body .top-fv .top-fv__copy { left: 7%; bottom: 18%; width: 88%; text-align: center; }
  body .top-fv .top-fv__eyebrow { font-size: 13px; }
  body .top-fv .top-fv__tagline { font-size: 16px; }
}

/* =========================================================
   FV：予約ボタン（円が広がり、文字下に線が伸びる）
   ========================================================= */
.top-fv__reserve { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
body .top-fv .top-fv__reserve a {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  width: min(100%, 165px);
  height: 44px;
  min-height: 0;
  padding: 0 36px 0 14px;
  overflow: hidden;
  border: 1px solid #A18B1E;
  border-radius: 999px;
  background-color: transparent;
  background-image: none;
  color: #A18B1E;
  font-size: 13px;
  text-align: center;
  text-decoration: none;
  transition: color .3s ease;
}
body .top-fv .top-fv__reserve a p { position: relative; display: inline-block; width: max-content; margin: 0; color: inherit; font-size: 13px; line-height: 1.5; white-space: nowrap; }
body .top-fv .top-fv__reserve a p::after { content: ""; position: absolute; right: 0; bottom: -2px; left: 0; height: 1px; background: #A18B1E; transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
body .top-fv .top-fv__reserve a::before { content: ""; position: absolute; top: 50%; right: 10px; width: 16px; height: 16px; border-radius: 50%; background: #A18B1E; transform: translateY(-50%); transition: width .35s ease, height .35s ease, right .35s ease; }
body .top-fv .top-fv__reserve a::after { content: "›"; position: absolute; top: 50%; right: 15px; color: #fff; font-family: Arial, sans-serif; font-size: 15px; line-height: 1; transform: translateY(-55%); transition: right .35s ease; }
body .top-fv .top-fv__reserve a:hover { color: #A18B1E; background-color: transparent; background-image: none; }
body .top-fv .top-fv__reserve a:hover p::after { transform: scaleX(1); }
body .top-fv .top-fv__reserve a:hover::before { right: 6px; width: 26px; height: 26px; }
body .top-fv .top-fv__reserve a:hover::after { right: 15px; }
@media (prefers-reduced-motion: reduce) {
  body .top-fv .top-fv__reserve a,
  body .top-fv .top-fv__reserve a p::after,
  body .top-fv .top-fv__reserve a::before,
  body .top-fv .top-fv__reserve a::after { transition: none; }
}

/* =========================================================
   NEWS
   ========================================================= */
.top-news { padding: 0 0 48px !important; background: var(--top-base); }
.top-news > .container { width: 80%; display: grid; grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); gap: clamp(48px, 6vw, 100px); align-items: start; }
.top-news__intro { min-width: 0; }
.top-news .top-news__heading { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--top-accent); font: 400 clamp(38px, 4.7vw, var(--top-section-title-size))/1.15 "Playfair Display", serif; letter-spacing: .01em; }
/* news-deco.png is embedded so this decoration does not depend on another CMS file. */
.top-news .top-news__heading::before { content: ""; flex: 0 0 40px; width: 40px; height: 40px; background: var(--top-heading-deco) center / contain no-repeat; }
.top-news__subtitle { margin: 0 0 28px 48px; color: var(--top-accent); font: 400 var(--top-section-subtitle-size)/1.4 "Shippori Mincho", serif; letter-spacing: .08em; }
.top-news .top-news__more { box-sizing: border-box; position: relative; display: flex; align-items: center; width: min(100%, 192px); min-height: 42px; padding: 8px 46px 8px 18px; overflow: hidden; border: 1px solid var(--top-accent); border-radius: 999px; background: transparent; color: var(--top-accent); font-size: 13px; line-height: 1.4; text-decoration: none; transition: color .3s ease; }
.top-news .top-news__more p { position: relative; width: max-content; margin: 0; color: inherit; }
.top-news .top-news__more p::after { content: ""; position: absolute; right: 0; bottom: -2px; left: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.top-news .top-news__more::before { content: ""; position: absolute; top: 50%; right: 20px; width: 14px; height: 14px; border-radius: 50%; background: var(--top-accent); transform: translateY(-50%); transition: width .35s ease, height .35s ease, right .35s ease; }
.top-news .top-news__more::after { content: "›"; position: absolute; top: 50%; right: 24px; color: #fff; font: 14px/1 Arial, sans-serif; transform: translateY(-55%); transition: right .35s ease; }
.top-news .top-news__more:hover { color: var(--top-accent); background: transparent; }
.top-news .top-news__more:hover p::after { transform: scaleX(1); }
.top-news .top-news__more:hover::before { right: 15px; width: 24px; height: 24px; }
.top-news .top-news__more:hover::after { right: 23px; }
.top-news .webgene-blog { min-width: 0; }
.top-news .newsItem { margin: 0; border-bottom: 1px solid rgba(161, 139, 30, .75); }
.top-news .newsItem .newsLink { position: relative; display: flex; align-items: center; min-height: 62px; padding: 12px 28px 12px 0; color: var(--top-text); text-decoration: none; }
.top-news .newsItem .newsLink::after { content: ""; position: absolute; right: 2px; top: 50%; width: 6px; height: 6px; border-top: 1px solid var(--top-accent); border-right: 1px solid var(--top-accent); transform: translateY(-50%) rotate(45deg); transition: right .25s ease; }
.top-news .newsItem .newsLink:hover::after { right: 0; }
.top-news .newsTextWrap { display: flex; align-items: center; gap: 20px; min-width: 0; width: 100%; }
.top-news .top-news__meta { display: flex; flex: 0 0 auto; align-items: center; gap: 20px; }
.top-news .newsItemTime { margin: 0; color: var(--top-text); font: 400 13px/1.5 "Playfair Display", serif; white-space: nowrap; }
.top-news .newsItemCate { box-sizing: border-box; min-width: 74px; margin: 0; padding: 4px 9px; border-radius: 2px; background: var(--top-sub); color: #fff; font-size: 12px; line-height: 1.35; text-align: center; white-space: nowrap; }
.top-news .newsItemTit { min-width: 0; margin: 0; color: var(--top-text); font: 400 13px/1.6 var(--top-sans); }
.top-news .newsItemTit.txt-limit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-news .newsLink:hover .newsItemTit { color: var(--top-accent); }
@media (max-width: 767px) {
  .top-news { padding: 0 0 60px !important; }
  .top-news > .container { grid-template-columns: 1fr; gap: 28px; }
  .top-news__subtitle { margin-bottom: 20px; }
  .top-news .newsTextWrap { flex-wrap: wrap; gap: 6px 0; }
  .top-news .top-news__meta { width: 100%; gap: 12px; }
  .top-news .newsItem .newsLink { min-height: 72px; }
  .top-news .newsItemTit { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .top-news .top-news__more, .top-news .top-news__more p::after, .top-news .top-news__more::before, .top-news .top-news__more::after, .top-news .newsItem .newsLink::after { transition: none; }
}

/* =========================================================
   GREETING：ご挨拶
   ========================================================= */
.top-greeting {
  position: relative;
  isolation: isolate;
  width: 100vw;
  max-width: none;
  min-height: 710px;
  margin-left: calc(50% - 50vw);
  padding: 78px 0 170px;
  overflow: hidden;
  background: linear-gradient(180deg, #F2E6EA 0%, #F8F3E7 50%, #E5EAF9 100%);
}
.top-greeting__deco,
.top-greeting__cloud { position: absolute; display: block; max-width: none; height: auto; pointer-events: none; }
.top-greeting__deco { top: 0; z-index: 1; width: clamp(88px, 10vw, 140px); }
.top-greeting__deco--left { left: 0; }
.top-greeting__deco--right { right: 0; }
.top-greeting__cloud { right: 0; bottom: -1px; left: 0; z-index: 3; width: 100%; height: clamp(110px, 11vw, 150px); object-fit: fill; }
.top-greeting__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 310px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(70px, 9vw, 120px);
  width: min(1000px, calc(83% - 40px));
  margin-left: 17%;
}
.top-greeting__media { min-width: 0; margin: 0; }
.top-greeting__image {
  position: relative;
  width: 100%;
  height: auto;
}
.top-greeting__image > img { display: block; width: 100%; height: auto; object-fit: cover; object-position: center top; }
.top-greeting__caption { margin-top: 11px; color: var(--top-accent); }
.top-greeting__caption p { margin: 0; color: inherit; font: 400 12px/1.7 "Shippori Mincho", serif; }
.top-greeting__caption .top-greeting__name { margin-top: 2px; font-size: 14px; }
.top-greeting__caption .top-greeting__name span{ margin-top: 2px; font-size: 24px; }
.top-greeting__content { min-width: 0; padding-top: 3px; }
.top-greeting__heading { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--top-accent); font: 400 clamp(38px, 4.7vw, var(--top-section-title-size))/1.15 "Playfair Display", serif; letter-spacing: .01em; }
.top-greeting__heading::before { content: ""; flex: 0 0 40px; width: 40px; height: 40px; background: var(--top-heading-deco) center / contain no-repeat; }
.top-greeting__subtitle { margin: 0 0 42px 48px; color: var(--top-accent); font: 400 var(--top-section-subtitle-size)/1.4 "Shippori Mincho", serif; }
.top-greeting__lead { max-width: 28em; margin: 0 0 24px; color: var(--top-accent); font: 500 var(--top-section-lead-size)/1.6 "Shippori Mincho", serif; white-space: normal; overflow-wrap: break-word; text-wrap: balance; }
.top-greeting__text, .top-greeting__text p { margin: 0 0 16px; color: var(--top-text); font-size: 14px; line-height: 1.9; letter-spacing: .02em; overflow-wrap: anywhere; }
.top-greeting__links { display: grid; gap: 20px; margin-top: 29px; }
.top-greeting__link {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 400px;
  min-height: 65px;
  padding: 12px 55px 12px 20px;
  overflow: hidden;
  border: 1px solid var(--top-accent);
  border-radius: 4px;
  background:transparent;
  color: var(--top-accent);
  font-size: 14px;
  transition: background-color .3s ease;
}
.top-greeting__link p { position: relative; width: max-content; margin: 0; color: inherit; font-size: inherit; }
.top-greeting__link p::after { content: ""; position: absolute; right: 0; bottom: -3px; left: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.top-greeting__link::before { content: ""; position: absolute; top: 50%; right: 15px; width: 17px; height: 17px; border-radius: 50%; background: var(--top-accent); transform: translateY(-50%); transition: width .35s ease, height .35s ease, right .35s ease; }
.top-greeting__link::after { content: "›"; position: absolute; top: 50%; right: 20px; color: #fff; font: 15px/1 Arial, sans-serif; transform: translateY(-55%); transition: right .35s ease; }
.top-greeting__link:hover { color: var(--top-accent); background: rgba(253, 252, 248, .8); }
.top-greeting__link:hover p::after { transform: scaleX(1); }
.top-greeting__link:hover::before { right: 10px; width: 27px; height: 27px; }
.top-greeting__link:hover::after { right: 19px; }
@media (max-width: 1000px) {
  .top-greeting__grid { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: clamp(35px, 6vw, 70px); width: min(860px, calc(100% - 80px)); margin-inline: auto; }
  .top-greeting__lead { font-size: clamp(20px, 2.4vw, 24px); }
}
@media (max-width: 767px) {
  .top-greeting { min-height: 0; padding: 96px 0 150px; }
  .top-greeting__deco { width: clamp(76px, 21vw, 115px); }
  .top-greeting__grid { grid-template-columns: 1fr; gap: 48px; width: min(440px, calc(100% - 40px)); margin-inline: auto; }
  .top-greeting__media { width: min(310px, 100%); margin-inline: auto; }
  .top-greeting__content { padding: 0; }
  .top-greeting__subtitle { margin-bottom: 28px; }
  .top-greeting__lead { font-size: clamp(20px, 5vw, 24px); }
  .top-greeting__cloud { height: clamp(90px, 18vw, 130px); }
}
@media (prefers-reduced-motion: reduce) {
  .top-greeting__link, .top-greeting__link p::after, .top-greeting__link::before, .top-greeting__link::after { transition: none; }
}

/* Existing shared buttons used elsewhere on TOP */
.top-button, .top-link-block { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-width: 220px; margin-top: 28px; padding: 13px 20px 13px 26px; color: var(--top-accent) !important; border: 1px solid var(--top-accent); border-radius: 999px; background: #fff; transition: color .3s ease, background .3s ease; }
.top-button::after, .top-link-block::after { content: "›"; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: var(--top-accent); font-size: 20px; line-height: 1; }
.top-button:hover, .top-link-block:hover { color: #fff !important; background: var(--top-accent); }
/* =========================================================
   FEATURES：ニコリノ歯科の特徴
   ========================================================= */
.top-features {
  position: relative;
  padding: 1rem 0 clamp(100px, 10vw, 160px);
  background: var(--top-base);
}
.top-features__inner,
.top-medical__inner { width: min(1200px, 84%); margin-inline: auto; }
.top-features__heading,
.top-medical__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--top-accent);
  font: 400 clamp(38px, 4.7vw, var(--top-section-title-size))/1.15 "Playfair Display", serif;
  letter-spacing: .01em;
}
.top-features__heading::before,
.top-medical__heading::before {
  content: "";
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  background: var(--top-heading-deco) center / contain no-repeat;
}
.top-features__subtitle,
.top-medical__subtitle {
  margin: 0 0 56px 48px;
  color: var(--top-accent);
  font: 400 var(--top-section-subtitle-size)/1.4 "Shippori Mincho", serif;
  letter-spacing: .08em;
}
.top-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(56px, 7vw, 105px) clamp(28px, 3.4vw, 52px);
}
.top-feature { min-width: 0; text-align: center; }
.top-feature__image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 50% 50% 0 0 / 45% 45% 0 0;
  background: #f2e6ea;
}
.top-feature__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.top-feature__title {
  min-height: 3.2em;
  margin: 24px 0 16px;
  color: var(--top-accent);
  font: 500 clamp(18px, 1.9vw, 18px)/1.6 "Shippori Mincho", serif;
  text-wrap: balance;
}
.top-feature__text {
  margin: 0;
  color: var(--top-text);
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: .02em;
  text-align: left;
}
.top-feature__link {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  width: min(100%, 240px);
  min-height: 44px;
  margin: 24px auto 0;
  padding: 8px 46px 8px 18px;
  overflow: hidden;
  border: 1px solid var(--top-accent);
  border-radius: 999px;
  background: transparent;
  color: var(--top-accent);
  font-size: 13px;
  text-decoration: none;
}
.top-feature__link p { position: relative; width: max-content; margin: 0; color: inherit; }
.top-feature__link p::after { content: ""; position: absolute; right: 0; bottom: -2px; left: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.top-feature__link::before { content: ""; position: absolute; top: 50%; right: 17px; width: 16px; height: 16px; border-radius: 50%; background: var(--top-accent); transform: translateY(-50%); transition: width .35s ease, height .35s ease, right .35s ease; }
.top-feature__link::after { content: "›"; position: absolute; top: 50%; right: 21px; color: #fff; font: 15px/1 Arial, sans-serif; transform: translateY(-55%); transition: right .35s ease; }
.top-feature__link:hover { color: var(--top-accent); background: transparent; }
.top-feature__link:hover p::after { transform: scaleX(1); }
.top-feature__link:hover::before { right: 12px; width: 26px; height: 26px; }
.top-feature__link:hover::after { right: 20px; }
@media (max-width: 900px) {
  .top-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .top-features { padding-block: 72px 96px; }
  .top-features__inner,
  .top-medical__inner { width: calc(100% - 40px); }
  .top-features__subtitle,
  .top-medical__subtitle { margin-bottom: 40px; }
  .top-feature-grid { grid-template-columns: 1fr; gap: 72px; max-width: 440px; margin-inline: auto; }
  .top-feature__title { min-height: 0; font-size: 22px; }
}

/* =========================================================
   MEDICAL：診療案内
   ========================================================= */
.top-medical {
  position: relative;
  isolation: isolate;
  padding: clamp(88px, 9vw, 140px) 0 clamp(110px, 11vw, 180px);
  overflow: hidden;
  background: linear-gradient(180deg, #F2E6EA 0%, #F8F3E7 50%, #E5EAF9 100%);
}
.top-medical__inner { position: relative; z-index: 1; }
.top-medical__deco { position: absolute; z-index: 0; display: block; width: clamp(130px, 18vw, 280px); height: auto; pointer-events: none; }
.top-medical__deco--top { top: 0; right: -35px;}
.top-medical__deco--bottom { bottom: 0; left: -35px; }
.top-medical__group + .top-medical__group { margin-top: clamp(64px, 7vw, 100px); }
.top-medical__group-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--top-accent);
  color: var(--top-accent);
  font: 500 24px/1.5 "Shippori Mincho", serif;
}
.top-medical__group-icon { display: block; flex: 0 0 44px; width: 44px; height: 44px; object-fit: contain; }
.top-medical__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.top-medical-card {
  box-sizing: border-box;
  position: relative;
  display: block;
  min-width: 0;
  min-height: 205px;
  padding: 28px 52px 28px 28px;
  border: 1px solid rgba(161, 139, 30, .8);
  border-radius: 5px;
  background: #fff;
  color: var(--top-text);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.top-medical-card__en { margin: 0 0 4px; color: var(--top-accent); font: 400 12px/1.4 "Playfair Display", serif; }
.top-medical-card__title { margin: 0 0 22px; color: var(--top-accent); font: 500 clamp(18px, 1.8vw, 23px)/1.4 "Shippori Mincho", serif; text-wrap: balance; }
.top-medical-card__points { display: grid; gap: 5px; }
.top-medical-card__point { position: relative; margin: 0; padding-left: 1em; color: var(--top-text); font-size: 13px; line-height: 1.65; }
.top-medical-card__point::before { content: ""; position: absolute; top: .72em; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--top-accent); }
.top-medical-card::before { content: ""; position: absolute; top: 46px; right: 24px; width: 18px; height: 18px; border-radius: 50%; background: var(--top-accent); transition: width .3s ease, height .3s ease, right .3s ease, top .3s ease; }
.top-medical-card::after { content: "›"; position: absolute; top: 45px; right: 29px; color: #fff; font: 16px/1 Arial, sans-serif; transition: right .3s ease; }
.top-medical-card:hover { color: var(--top-text); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(64, 64, 64, .08); }
.top-medical-card:hover::before { top: 41px; right: 19px; width: 28px; height: 28px; }
.top-medical-card:hover::after { right: 28px; }
@media (max-width: 900px) {
  .top-medical__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .top-medical { padding-block: 80px 110px; }
  .top-medical__deco { width: 130px; }
  .top-medical__group-title { font-size: 20px; }
  .top-medical__grid { grid-template-columns: 1fr; }
  .top-medical-card { min-height: 0; padding: 25px 50px 25px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .top-button, .top-link-block, .top-feature__link p::after,
  .top-feature__link::before,
  .top-feature__link::after,
  .top-medical-card,
  .top-medical-card::before,
  .top-medical-card::after { transition: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   COLUMN：医療コラム
   ========================================================= */
.top-column {
  padding: clamp(1.5rem, 9vw, 3rem) 0;
  background: var(--top-base);
}
.top-column > .container {
  display: grid;
  grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(48px, 7vw, 110px);
  width: min(1200px, 80%);
  margin-inline: auto;
}
.top-column__intro, .top-column .webgene-blog { min-width: 0; }
.top-column__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--top-accent);
  font: 400 clamp(38px, 4.7vw, var(--top-section-title-size))/1.15 "Playfair Display", serif;
  letter-spacing: .01em;
}
.top-column__heading::before {
  content: "";
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  background: var(--top-heading-deco) center / contain no-repeat;
}
.top-column__subtitle {
  margin: 0 0 34px 48px;
  color: var(--top-accent);
  font: 400 var(--top-section-subtitle-size)/1.4 "Shippori Mincho", serif;
  letter-spacing: .08em;
}
.top-column__categories { display: grid; gap: 15px; margin: 0 0 48px; }
.top-column__categories > .webgene-blog { display: grid; row-gap: 12px; }
.top-column__category {
  position: relative;
  display: block;
  width: fit-content;
  padding: 0 34px 3px 0;
  color: var(--top-accent);
  font: 500 16px/1.6 "Shippori Mincho", serif;
  text-decoration: none;
}
.top-column__category::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--top-accent);
  transform: translateY(-50%);
  transition: width .3s ease, height .3s ease, right .3s ease;
}
.top-column__category::after {
  content: "›";
  position: absolute;
  top: 50%;
  right: 5px;
  color: #fff;
  font: 15px/1 Arial, sans-serif;
  transform: translateY(-55%);
  transition: right .3s ease;
}
.top-column__category:hover { color: var(--top-accent); text-decoration: underline; text-underline-offset: 4px; }
.top-column__category:hover::before { right: -5px; width: 28px; height: 28px; }
.top-column__category:hover::after { right: 4px; }
.top-column__more {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  width: min(100%, 192px);
  min-height: 42px;
  padding: 8px 46px 8px 18px;
  overflow: hidden;
  border: 1px solid var(--top-accent);
  border-radius: 999px;
  background: transparent;
  color: var(--top-accent);
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
}
.top-column__more p { position: relative; width: max-content; margin: 0; color: inherit; }
.top-column__more p::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.top-column__more::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--top-accent);
  transform: translateY(-50%);
  transition: width .35s ease, height .35s ease, right .35s ease;
}
.top-column__more::after {
  content: "›";
  position: absolute;
  top: 50%;
  right: 24px;
  color: #fff;
  font: 14px/1 Arial, sans-serif;
  transform: translateY(-55%);
  transition: right .35s ease;
}
.top-column__more:hover { color: var(--top-accent); background: transparent; }
.top-column__more:hover p::after { transform: scaleX(1); }
.top-column__more:hover::before { right: 15px; width: 24px; height: 24px; }
.top-column__more:hover::after { right: 23px; }
.top-column .columnItem { margin: 0; border-bottom: 1px solid rgba(161, 139, 30, .75); }
.top-column .columnItem + .columnItem { margin-top: 26px; }
.top-column .columnLink {
  display: grid;
  grid-template-columns: minmax(180px, 32%) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  padding: 0 0 26px;
  color: var(--top-text);
  text-decoration: none;
}
.top-column .columnItemImage { display: block; overflow: hidden; aspect-ratio: 1.55 / 1; background: #f2e6ea; }
.top-column .columnItemImage img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.top-column .columnLink:hover .columnItemImage img { transform: scale(1.04); }
.top-column .columnItemBody { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.top-column .columnItemCate {
  box-sizing: border-box;
  width: fit-content;
  margin: 0 0 14px;
  padding: 4px 12px;
  border: 1px solid var(--top-accent);
  border-radius: 3px;
  color: var(--top-accent);
  font-size: 12px;
  line-height: 1.4;
}
.top-column .columnItemTit {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 16px;
  color: var(--top-text);
  font: 400 clamp(15px, 1.3vw, 18px)/1.7 var(--top-sans);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.top-column .columnLink:hover .columnItemTit { color: var(--top-accent); }
.top-column .columnItemFoot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; width: 100%; margin-top: auto; }
.top-column .columnItemTime { margin: 0; color: var(--top-text); font: 400 13px/1.5 "Playfair Display", serif; white-space: nowrap; }
.top-column .columnItemRead { margin: 0; color: var(--top-accent); font: 500 13px/1.5 "Shippori Mincho", serif; white-space: nowrap; }
.top-column .columnItemRead::after { content: " ›"; }
@media (max-width: 900px) {
  .top-column > .container { width: 84%; grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); gap: 36px; }
  .top-column .columnLink { grid-template-columns: minmax(145px, 38%) minmax(0, 1fr); gap: 20px; }
  .top-column .columnItemFoot { flex-wrap: wrap; }
}
@media (max-width: 767px) {
  .top-column { padding-block: 72px 96px; }
  .top-column > .container { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 38px; }
  .top-column__categories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin-bottom: 28px; }
  .top-column__category { font-size: 14px; }
  .top-column .columnLink { grid-template-columns: minmax(110px, 36%) minmax(0, 1fr); gap: 16px; }
  .top-column .columnItemCate { margin-bottom: 8px; font-size: 12px; }
  .top-column .columnItemTit { font-size: 14px; line-height: 1.5; }
  .top-column .columnItemTime, .top-column .columnItemRead { font-size: 12px; }
}
@media (max-width: 430px) {
  .top-column .columnLink { grid-template-columns: 1fr; }
  .top-column .columnItemImage { max-height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .top-column__category::before, .top-column__category::after,
  .top-column__more p::after, .top-column__more::before, .top-column__more::after,
  .top-column .columnItemImage img { transition: none; }
}

/* =========================================================
   TOP下部：院内写真の自動ループスライダー
   ========================================================= */
.top-gallery {
  --top-gallery-gap: 8px;
  --top-gallery-width: clamp(260px, 28vw, 420px);
  box-sizing: border-box;
  position: relative;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  padding: clamp(56px, 7vw, 100px) 0 0;
  overflow: hidden;
  background: var(--top-base);
}
.top-gallery__viewport { width: 100%; overflow: hidden; }
.top-gallery__track {
  display: flex;
  width: max-content;
  animation: top-gallery-loop 42s linear infinite;
  animation-delay: -4s;
  will-change: transform;
}
.top-gallery__set {
  display: flex;
  flex: 0 0 auto;
  gap: var(--top-gallery-gap);
  padding-right: var(--top-gallery-gap);
}
.top-gallery__set img {
  display: block;
  flex: 0 0 auto;
  width: var(--top-gallery-width);
  max-width: none;
  aspect-ratio: 1.55 / 1;
  object-fit: cover;
}
@keyframes top-gallery-loop {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 767px) {
  .top-gallery {
    --top-gallery-width: min(72vw, 340px);
    --top-gallery-gap: 6px;
    padding-top: 64px;
  }
  .top-gallery__track { animation-duration: 36s; }
}
@media (prefers-reduced-motion: reduce) {
  .top-gallery__viewport { overflow-x: auto; }
  .top-gallery__track { animation: none; transform: none; will-change: auto; }
  .top-gallery__set[aria-hidden="true"] { display: none; }
}

/* =========================================================
   TOP下部：画像一枚絵のCTA
   ========================================================= */
.top-cta {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: min(560px, calc(100% - 40px));
  margin-inline: auto;
  padding: clamp(40px, 5vw, 68px) 0 clamp(80px, 9vw, 120px);
  background: var(--top-base);
}
.top-cta__link { display: block; min-width: 0; text-decoration: none; transition: transform .3s ease, opacity .3s ease; }
.top-cta__link img { display: block; width: 100%; height: auto; }
.top-cta__link:hover { transform: translateY(-3px); opacity: .88; }
@media (max-width: 600px) {
  .top-cta { grid-template-columns: 1fr; max-width: 440px; gap: 18px; padding-block: 32px 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .top-cta__link { transition: none; }
}


/* Match the vertical rhythm in the TOP mobile menu design. */
.top-fv__nav { gap: 7px !important; }


/* TOP「ニコリノ歯科の特徴」: 同じ行の詳細ボタンを下端で揃える */
.top-feature {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}
.top-feature__link {
  flex: 0 0 auto;
  margin-top: auto;
}

/* 文章と詳細ボタンの間に余白を確保 */
.top-feature__link { padding-top: 16px; }

/* 文章とボタンの間に余白を取り、ボタン内の文字位置は維持 */
.top-feature__text { margin-bottom: 16px; }
.top-feature__link { padding-top: 8px; }


/* SP FV: enlarge the slider to about half the viewport and use the hero area fully */
@media (max-width: 767px) {
  .top-fv { min-height: 100vh; min-height: 100svh; }
  body .top-fv .top-fv__slider {
    top: 20%;
    right: 0 !important;
    bottom: auto;
    width: 100% !important;
    height: 50vh !important;
    height: 50svh !important;
    aspect-ratio: auto !important;
  }
  body .top-fv .top-fv__slider > .top-fv__slide > .top-fv__visual {
    min-height: 0 !important;
    box-shadow: none;
  }
  body .top-fv .top-fv__slider > .top-fv__slide > .top-fv__visual > img {
    object-fit: cover !important;
    object-position: center center;
  }
  body .top-fv .top-fv__copy { bottom: 12%; }
}


/* Keep the hero copy visually tied to the slider across wide and mobile layouts. */
@media (min-width: 768px) {
  body .top-fv .top-fv__copy {
    left: clamp(24px, 32vw, 480px) !important;
    bottom: calc(20% - 18px) !important;
  }
}

@media (max-width: 767px) {
  body .top-fv .top-fv__copy {
    bottom: calc(9% - 10px) !important;
  }
}


/* FVの色面はFV全体に集約し、スライダー側の背景は使わない */
body .top-fv .top-fv__slider,
body .top-fv .top-fv__slide,
body .top-fv .top-fv__visual {
  background: transparent !important;
}