/* site.css — ハッピースペース (歯の専門性+コラム対応) */

/* ===== 基本 ===== */
body { overflow-x: hidden; }
html { scroll-behavior: smooth; }
.display { font-family: var(--font-display); font-weight: 500; line-height: 1.3; }
.display--bold { font-weight: 700; }
.eyebrow {
  font-size: var(--fs-sm);
  color: var(--color-primary);
  letter-spacing: 0.2em;
  font-weight: 600;
  text-transform: uppercase;
}

/* ===== ブランド ===== */
.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  line-height: 1.1;
}
.brand__mark {
  font-family: var(--font-display);
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: 0.04em;
}
.brand__sub {
  display: none;
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}
@media (min-width: 768px) {
  .brand__sub { display: inline; }
}

/* ===== ヒーロー ===== */
.hero {
  background: linear-gradient(180deg, var(--color-surface) 0%, #ffffff 100%);
  padding-block: var(--sp-12);
}
.hero__inner {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: 1fr;
  align-items: center;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-primary-dark);
  font-size: var(--fs-3xl);
  line-height: 1.2;
  margin-bottom: var(--sp-4);
}
.hero__title em { font-style: normal; color: var(--color-accent); }
.hero__lead {
  color: var(--color-text-muted);
  font-size: var(--fs-base);
  margin-bottom: var(--sp-6);
  line-height: 1.9;
}
.hero__img {
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
}
@media (min-width: 768px) {
  .hero { padding-block: var(--sp-24); }
  .hero__inner { grid-template-columns: 1fr 1fr; gap: var(--sp-12); }
  .hero__title { font-size: var(--fs-5xl); }
  .hero__lead { font-size: var(--fs-lg); }
}

/* ===== セクション見出し ===== */
.section-head {
  text-align: center;
  margin-bottom: var(--sp-12);
}
.section-head__eyebrow {
  display: inline-block;
  color: var(--color-primary);
  font-size: var(--fs-sm);
  letter-spacing: 0.2em;
  font-weight: 600;
  margin-bottom: var(--sp-2);
  text-transform: uppercase;
}
.section-head__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  color: var(--color-primary-dark);
  margin-bottom: var(--sp-3);
}
@media (min-width: 768px) {
  .section-head__title { font-size: var(--fs-3xl); }
}

/* ===== フィーチャーカード ===== */
.feature-card {
  text-align: center;
  padding: var(--sp-8) var(--sp-6);
}
.feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-primary-dark);
  margin-bottom: var(--sp-4);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.feature-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--color-primary-dark);
  margin-bottom: var(--sp-2);
}
.feature-card__text {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: 1.8;
}

/* ===== 商品ショーケース ===== */
.product-showcase {
  background: var(--color-surface);
  padding-block: var(--sp-16);
}
.product-showcase__inner {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: 1fr;
  align-items: center;
}
.product-showcase__img { max-width: 420px; margin-inline: auto; }
.product-showcase__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  color: var(--color-primary-dark);
  margin-bottom: var(--sp-4);
}
.product-showcase__body p + p { margin-top: var(--sp-3); }
.product-showcase__meta {
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}
@media (min-width: 768px) {
  .product-showcase__inner { grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
}

/* ===== CTAブロック ===== */
.cta-block {
  text-align: center;
  padding: var(--sp-12) var(--sp-6);
  background: var(--color-primary-dark);
  color: #fff;
  border-radius: var(--radius-lg);
}
.cta-block h2 { font-family: var(--font-display); color: #fff; margin-bottom: var(--sp-3); }
.cta-block p { color: rgba(255,255,255,0.85); margin-bottom: var(--sp-6); }
.cta-block .btn-primary { background: #fff; color: var(--color-primary-dark); }
.cta-block .btn-primary:hover { background: var(--color-surface); color: var(--color-primary-dark); }

/* ===== ページヘッダー (下層) ===== */
.page-header {
  background: var(--color-bg-dark);
  padding: var(--sp-16) 0 var(--sp-12);
  text-align: center;
  color: var(--color-text-inverse);
}
.page-header__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-4xl);
  color: var(--color-text-inverse);
}
.page-header__lead {
  color: var(--color-text-muted-inverse);
  margin-top: var(--sp-3);
}

/* ===== 定義リスト (会社情報・特商法) ===== */
.dl-info {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-6) var(--sp-8);
}
.dl-info dt {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-primary-dark);
  font-size: var(--fs-sm);
  margin-top: var(--sp-4);
}
.dl-info dt:first-child { margin-top: 0; }
.dl-info dd {
  font-size: var(--fs-base);
  padding-top: var(--sp-1);
  line-height: 1.8;
}
.dl-info dd + dt { margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--color-border); }

/* ===== フッター ===== */
.site-footer {
  background: var(--color-bg-dark);
  color: rgba(255,255,255,0.8);
  padding-block: var(--sp-12);
  margin-top: 0;
}
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--color-accent); }
.site-footer__inner {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr 1fr; }
}
.footer-brand {
  font-family: var(--font-display);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-2);
}
.footer-section h3 {
  color: var(--color-accent);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: var(--sp-3);
}
.footer-section ul li { padding-block: var(--sp-1); font-size: var(--fs-sm); }
.site-footer__copyright {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: var(--sp-6);
  margin-top: var(--sp-8);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.5);
  text-align: center;
}

/* 電話番号 */
.tel-large {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  color: var(--color-primary-dark);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-block: var(--sp-2);
}

/* ===== コラム一覧 ===== */
.column-grid {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .column-grid { grid-template-columns: 1fr 1fr; }
}
.column-card {
  display: block;
  padding: var(--sp-8);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: box-shadow .2s var(--ease-out), transform .2s var(--ease-out);
}
.column-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  color: var(--color-text);
}
.column-card__num {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--color-primary);
  letter-spacing: 0.2em;
  margin-bottom: var(--sp-3);
}
.column-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: var(--sp-3);
  line-height: 1.4;
}
.column-card__excerpt {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.8;
}

/* ===== コラム記事本文 ===== */
.article-body {
  max-width: 760px;
  margin-inline: auto;
}
.article-body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  color: var(--color-primary-dark);
  margin-top: var(--sp-12);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--color-accent);
}
.article-body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--color-primary-dark);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
}
.article-body p {
  line-height: 2;
  margin-bottom: var(--sp-4);
}
.article-body ul, .article-body ol {
  list-style: disc;
  padding-left: var(--sp-6);
  margin-block: var(--sp-4);
}
.article-body li { line-height: 2; margin-bottom: var(--sp-2); }
.article-meta {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--color-border);
}
.article-disclaimer {
  margin-top: var(--sp-12);
  padding: var(--sp-6);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.8;
}
.article-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-sm);
}

/* ===== ダークセクション ===== */
.section--dark {
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
}
.section--dark h2, .section--dark h3 { color: var(--color-text-inverse); }
.section--dark .muted { color: var(--color-text-muted-inverse); }

/* ===== ユーティリティ ===== */
.muted { color: var(--color-text-muted); }

/* モーション軽減 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .column-card { transition: none; }
}