/*
Theme Name: Gotanda Dental
Author: 自分の名前
Description: 五反田歯科医院のカスタムテーマ
Version: 1.0
*/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --pink:    #edb0bf;
    --teal:    #50d5e0;
    --teal-bg: #e9f9fa;
    --dark:    #272e2f;
    --gray:    #333;
    --text:    #111;
    --white:   #fff;
  }

  body {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--gray);
    background: var(--white);
  }

  img { display: block; max-width: 100%; }
  a  { text-decoration: none; color: inherit; }

  /* ─── HEADER ─── */
  header {
    position: fixed; top: 0; left: 0; width: 100%; height: 70px;
    background: rgba(255,255,255,.95); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 40px; z-index: 100;
    box-shadow: 0 1px 12px rgba(0,0,0,.06);
  }
  .logo { display: flex; align-items: center; gap: 12px; }
  .logo-icon {
    width: 44px; height: 44px;
    background: var(--teal-bg);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
  }
  .logo-text .name-ja {
    font-family: 'Noto Serif JP', serif; font-weight: 700;
    font-size: 20px; color: var(--text); line-height: 1.2;
  }
  .logo-text .name-en {
    font-family: 'Noto Serif JP', serif; font-weight: 400;
    font-size: 10px; color: var(--gray); letter-spacing: .04em;
  }
  nav { display: flex; align-items: center; gap: 36px; }
  nav a {
    font-weight: 700; font-size: 15px; color: var(--gray);
    transition: color .2s;
  }
  nav a:hover { color: var(--teal); }
  .btn-reserve {
    background: var(--pink); color: var(--white);
    font-weight: 700; font-size: 14px;
    padding: 10px 22px; border-radius: 4px;
    transition: opacity .2s;
  }
  .btn-reserve:hover { opacity: .85; }

  /* ─── HERO ─── */
  .hero {
    margin-top: 70px; position: relative;
    height: 650px; overflow: hidden;
  }
  .hero img {
    width: 100%; height: 100%; object-fit: cover;
    object-position: center 20%;
  }
  .hero-copy {
    position: absolute; left: 161px; top: 50%;
    transform: translateY(-50%);
  }
  .hero-copy p {
    font-family: 'Noto Serif JP', serif; font-weight: 300;
    font-size: 52px; line-height: 1.3;
    display: inline;
  }
  .hero-line {
    display: block; position: relative;
    margin-bottom: 6px;
  }
  .hero-line .bg-bar {
    position: absolute; left: -8px; right: -8px; top: 0; bottom: 0;
    background: var(--white); z-index: 0;
  }
  .hero-line span { position: relative; z-index: 1; }
  .c-teal  { color: var(--teal); }
  .c-pink  { color: var(--pink); }
  .c-dark  { color: var(--gray); }

  /* ─── SECTION BASE ─── */
  section { padding: 80px 0; }
  .section-title {
    text-align: center; margin-bottom: 56px;
    position: relative; display: inline-block;
    font-family: 'Noto Serif JP', serif; font-weight: 600;
    font-size: 29px; color: var(--text); letter-spacing: .05em;
  }
  .section-title::after {
    content: ''; display: block;
    width: 40px; height: 3px; background: var(--teal);
    margin: 8px auto 0;
  }
  .section-title-wrap { text-align: center; }

  .container { max-width: 1124px; margin: 0 auto; padding: 0 40px; }

  /* ─── FEATURES ─── */
  .features { padding: 80px 0; }
  .feature-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
    margin-top: 40px;
  }
  .feature-card { text-align: center; }
  .feature-card .thumb {
    width: 100%; height: 218px; overflow: hidden; border-radius: 2px;
    background: #e8e8e8;
  }
  .feature-card .thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s ease;
  }
  .feature-card:hover .thumb img { transform: scale(1.04); }
  .feature-card p {
    margin-top: 16px; font-size: 21px; color: var(--gray);
  }

  /* ─── POLICY ─── */
  .policy { background: var(--teal-bg); }
  .policy-inner {
    display: flex; align-items: center; gap: 60px;
    max-width: 1124px; margin: 0 auto; padding: 0 40px;
  }
  .policy-img {
    flex: 0 0 390px; height: 305px; overflow: hidden; border-radius: 2px;
  }
  .policy-img img { width: 100%; height: 100%; object-fit: cover; }
  .policy-body { flex: 1; }
  .policy-body h3 {
    font-family: 'Noto Sans JP', sans-serif; font-weight: 700;
    font-size: 27px; line-height: 1.67; color: var(--dark);
    letter-spacing: .02em; margin-bottom: 24px;
  }
  .policy-body p {
    font-size: 16px; line-height: 2; color: var(--dark);
  }

  /* ─── NEWS ─── */
  .news { padding: 80px 0; }
  .news-list { margin-top: 0; }
  .news-item {
    display: flex; align-items: baseline; gap: 20px;
    padding: 18px 0; border-bottom: 1px solid #ddd;
    transition: background .15s;
  }
  .news-item:first-child { border-top: 1px solid #ddd; }
  .news-date-badge {
    background: var(--teal); color: var(--white);
    font-size: 14px; padding: 4px 10px; border-radius: 2px;
    white-space: nowrap; flex-shrink: 0;
  }
  .news-title {
    font-weight: 600; font-size: 17px; flex-shrink: 0;
    min-width: 200px;
  }
  .news-excerpt { font-size: 15px; color: var(--dark); line-height: 1.75; }
  .news-more {
    display: flex; justify-content: flex-end; margin-top: 24px;
  }
  .news-more a {
    font-size: 15px; text-decoration: underline; color: var(--dark);
    display: flex; align-items: center; gap: 6px;
  }
  .news-more a::before { content: '>'; }

  /* ─── FOOTER ─── */
  footer {
    background: var(--white); padding: 60px 0 0;
    text-align: center; border-top: 1px solid #eee;
  }
  .footer-logo { margin-bottom: 24px; }
  .footer-logo .name-ja {
    font-family: 'Noto Serif JP', serif; font-weight: 700;
    font-size: 22px; color: var(--text);
  }
  .footer-logo .name-en {
    font-size: 11px; color: var(--gray); letter-spacing: .08em; margin-top: 4px;
  }
  .footer-nav {
    display: flex; justify-content: center; gap: 32px;
    margin-bottom: 32px;
  }
  .footer-nav a { font-weight: 600; font-size: 15px; color: var(--gray); }
  .footer-sns {
    display: flex; justify-content: center; gap: 24px;
    margin-bottom: 32px;
  }
  .footer-sns a {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--teal-bg); display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: var(--dark);
    transition: background .2s;
  }
  .footer-sns a:hover { background: var(--teal); color: var(--white); }
  .footer-copy {
    background: var(--teal-bg); padding: 18px;
    font-size: 13px; color: var(--dark); letter-spacing: .08em;
    margin-top: 8px;
  }

  /* ─── SCROLL FADE ─── */
  .fade-in { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
  .fade-in.visible { opacity: 1; transform: none; }
/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {

  /* ヘッダー */
  header {
    padding: 0 16px;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 16px;
    gap: 10px;
  }
  nav {
    gap: 12px;
    flex-wrap: wrap;
  }
  nav a { font-size: 13px; }
  .btn-reserve {
    font-size: 12px;
    padding: 8px 14px;
  }

  /* ヒーロー */
  .hero { height: 420px; margin-top: 100px; }
  .hero-copy { left: 20px; }
  .hero-copy p { font-size: 28px; }

  /* 当院の特徴 */
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* 治療のポリシー */
  .policy-inner {
    flex-direction: column;
    gap: 32px;
  }
  .policy-img {
    flex: none;
    width: 100%;
    height: 240px;
  }

  /* お知らせ */
  .news-item {
    flex-direction: column;
    gap: 8px;
  }

  /* フッター */
  .footer-nav {
    flex-wrap: wrap;
    gap: 16px;
    padding: 0 20px;
  }
}