/* ========= 0. Design Tokens ========= */
:root{
  --font-base:"Noto Sans JP",system-ui,sans-serif;
  --color-primary:#1d4ed8;
  --color-primary-light:#3b82f6;
  --color-bg:#fff;
  --color-text:#1f2937;
  --color-muted:#6b7280;
  --radius:0.75rem;
  --shadow:0 4px 12px rgba(0,0,0,0.06);
  --transition:0.3s ease;
}



/* ========= 1. Reset / Base ========= */
*,
*::before,
*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-base);color:var(--color-text);background:var(--color-bg);line-height:1.8;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:700}
img{max-width:100%;display:block;height:auto}
a{text-decoration:none;color:inherit;transition:color var(--transition)}
a:hover{color:var(--color-primary-light)}

/* Utility */
.container{width:min(92%,72rem);margin-inline:auto}
.section-title{text-align:center;margin-bottom:2.5rem;font-size:clamp(1.75rem,3vw,2.25rem)}
.make-center{text-align:center}
.container-center{
  display:flex;
  justify-content: center
}

/* ========= 2. Header ========= */
.header{position:sticky;top:0;background:rgba(255,255,255,0.95);backdrop-filter:saturate(180%) blur(12px);box-shadow:var(--shadow);z-index:999}
.header__inner{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 0}
.logo {
  margin-left: -200px;        /* ← 左端に寄せる */
  padding-left: 2vw;     /* 必要に応じて微調整 */
}
.nav ul{display:flex;gap:1.75rem;list-style:none;margin:0;padding:0}
.btn--primary{background:var(--color-primary);color:#fff;padding:0.5rem 1.5rem;border-radius:var(--radius);transition:background var(--transition)}
.btn--primary:hover{background:var(--color-primary-light)}
.btn--secondary{background:transparent;color:var(--color-primary);border:2px solid var(--color-primary);padding:0.5rem 1.5rem;border-radius:var(--radius);transition:background var(--transition)}
.btn--secondary:hover{background:var(--color-primary);color:#fff}

.nav-toggle,.hamburger{display:none}

/* ========= 3. Hero ========= */
.hero {
  width: 100%;
  /*margin-left: calc(50% - 50vw);*/
  padding: 0;
  background: none;
  clip-path: none;
}

.hero-inner, .hero__inner, .hero-inner.container {
  width: 100% ;
  max-width: 100% ;
  margin: 0 ;
  
  box-sizing: border-box;
}

.hero-img img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 0;
  box-shadow: none;
}

/* ========= 4. Features ========= */
.features{padding:5rem 0}
.grid{display:grid;gap:1.75rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.card{background:#f9fafb;border-radius:var(--radius);padding:2rem;text-align:center;box-shadow:var(--shadow);transition:transform var(--transition)}
.card:hover{transform:translateY(-4px)}
.card .icon{width:4rem;height:4rem;margin-inline:auto;margin-bottom:1rem;object-fit:cover;border-radius:50%}

/* ========= 5. Services ========= */
.services{background:#f8fafc;padding:5rem 0}
.service-list{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;padding:0;margin:0;list-style:none}
.service-list li{background:#fff;padding:0.65rem 1.25rem;border-radius:var(--radius);box-shadow:var(--shadow);font-size:0.95rem;transition:transform var(--transition)}
.service-list li:hover{transform:translateY(-3px)}

/* ========= 6. Testimonials ========= */
.testimonials{padding:5rem 0}
.slider{position:relative;overflow:hidden}
.slide{min-height:180px;animation:slide 18s infinite}
.slide blockquote{background:#fff;border-left:4px solid var(--color-primary);padding:1.5rem;border-radius:var(--radius);box-shadow:var(--shadow);max-width:42rem;margin-inline:auto}
@keyframes slide {
  0%,20%   {transform:translateX(0)}
  25%,45%  {transform:translateX(-100%)}
  50%,70%  {transform:translateX(-200%)}
  75%,95%  {transform:translateX(-300%)}
  100%     {transform:translateX(-400%)}
}

/* ========= 7. Gallery ========= */
.tour{background:#f1f5f9;padding:5rem 0}
.gallery{display:grid;gap:0.5rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.gallery img{border-radius:var(--radius);object-fit:cover;height:200px}

/* ========= 8. Page Hero ========= */
.page-hero{padding:4rem 1rem;color:#fff;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center}

/* ========= 9. About ========= */
.about{padding:5rem 0}
.about__inner{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:center}
.about__photo img{border-radius:var(--radius);box-shadow:var(--shadow)}

/* ========= 10. Service Detail ========= */
.service-detail{padding:4rem 0}
.service-detail:nth-of-type(odd){background:#f9fafb}

/* ========= 11. Blog ========= */
.blog{padding:5rem 0}
.post-card{background:#fff;border-radius:var(--radius);padding:1.5rem;margin-bottom:1.5rem;box-shadow:var(--shadow);transition:transform var(--transition)}
.post-card:hover{transform:translateY(-4px)}
.post-card time{font-size:0.85rem;color:var(--color-muted)}

/* ========= 12. Access & Form ========= */
.contact-form{padding:4rem 0;background:#f9fafb}
.form{max-width:40rem;margin-inline:auto}
.form__group{display:flex;flex-direction:column;margin-bottom:1rem}
.form__group label{margin-bottom:0.25rem;font-weight:600}
.form__group input,.form__group textarea{padding:0.5rem 0.75rem;border:1px solid #d1d5db;border-radius:var(--radius);font-size:1rem}
.form__group input:focus,.form__group textarea:focus{outline:none;border-color:var(--color-primary-light);box-shadow:0 0 0 3px rgba(59,130,246,0.3)}

/* ========= 13. Footer ========= */
/* フッター全体を画面幅いっぱいに */
.site-footer, .footer, .site-footer .container, .footer-inner {
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
  padding: 0;
  box-sizing: border-box;
}

/* フッターナビのリストを中央寄せする */
.footer-nav ul,
.site-footer .footer-nav ul,
.footer-nav .flex,
.site-footer .footer-nav .flex {
  
  justify-content: center !important;
  width: 100vw !important;
  margin: 0 auto !important;
  padding: 0;
  gap: 2rem;
  display: flex !important;
}

/* SNSアイコン行も中央寄せ */
.sns.flex.center {
  justify-content: center !important;
  width: 100vw !important;
  margin: 0 auto !important;
}

/* フッターのテキストも中央寄せ */
.site-footer .copy,
.footer small,
.site-footer small {
  display: block;
  text-align: center !important;
  width: 100vw !important;
  margin: 0 auto;
}

.access-list{
  list-style: none;        /* ← 既定の黒丸を消す */
  margin:0 auto;
  padding: 0;
  font-weight: 600;        /* 見本のように少し太字 */
  font-size: 1em;
  color: ##1c094b;          /* テキスト色 */
  display:inline-block;
  text-align:left;
}

/* 各 li に対して擬似要素で丸を追加 */
.access-list li{
  position: relative;      /* ::before を位置決めするため */
  padding-left: 1.4em;     /* テキスト頭を丸の右側にずらす */
}

.access-list li::before{
  content: "";
  position: absolute;
  left: 0;                 /* li 左端に配置 */
  top: 0.55em;             /* テキストの縦位置に合わせて調整 */
  width: 0.5em;            /* 丸の直径 */
  height: 0.5em;
  border-radius: 50%;      /* 円形にする */
  background: #1c094b;     /* 好きな色（例：黄） */
}

.map-wrap {
  position: relative;
  width: 100%;
  /* 16:9 なら 56.25%，4:3 なら 75%，好きな比率に */
  padding-top: 56.25%;
  overflow: hidden;   /* 念のためはみ出し防止 */
}

.map-wrap iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===== Footer base ===== */
.site-footer{
  position:relative;
  overflow:hidden;                 /* 歯シルエットはみ出し防止 */
  font-family:"Noto Sans JP", sans-serif;
  color:#0b2547;                   /* 濃いめネイビー */
  line-height:1.7;
}
.footer-layout {
  padding:20px 0 20px;
}
/* ---- 背景（ライトブルー＋左右の歯シルエット） ---- */
.footer-bg{
  background:#1e2a44;              /* ライトブルー下地 */
  padding:20px 0 20px;             /* 上下ゆったり */
}
.footer-bg::before,
.footer-bg::after{
  content:"";
  position:absolute;
  top:0;
  width:480px;                     /* 歯のサイズ */
  height:480px;
  background-size:contain;
  background-repeat:no-repeat;
  opacity:0.8;
}
.footer-bg::before{
  left:-140px;
  background-image:url("../img/footer-tooth-left.svg");
}
.footer-bg::after{
  right:-140px;
  background-image:url("../img/footer-tooth-right.svg");
}

/* ---- 1. 上段：ロゴ＋住所＋診療時間 ---- */
.footer-head{


  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
　  padding-block:0 40px;

}
.footer-logo img{
  width:180px;
  height:auto;
}
.footer-address{
  font-style:normal;
  font-weight:600;
}
.footer-info {
  background:#aad4ff;
  
}

/* 右カラム：診療時間 */
.footer-hours{
  text-align:left;
  font-weight:600;
}

/* 768px 以下は縦並びに */
@media(max-width:768px){
  .footer-head{
    flex-direction:column;
    text-align:center;
  }
  .footer-hours{text-align:center;}
}
.hours-label{
  display:inline-block;
  background:#113b67;              /* 濃紺 */
  color:#fff;
  padding:6px 22px;
  font-size:1rem;
  border-radius:6px;
  margin-bottom:6px;
}

/* ---- 2. ナビゲーション ---- */
.footer-nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:1.8rem;
  list-style:none;
  padding:40px 0 35px;
  margin:0;
  justify-content:center;
  font-weight:700;
  color: #aad4ff
}
.footer-nav a{
  transition:color .25s;
}
.footer-nav a:hover{color:#1d4ed8;}

/* ---- 3. SNS アイコン ---- */
.footer-sns{
  display:flex;
  justify-content:center;
  gap:1.8rem;
  font-size:1.7rem;
  margin-bottom:30px;
}
.footer-sns a:hover{color:#1d4ed8;}

.site-footer .inner {
  width: min(92%, 1200px);  /* 好きな最大幅 */
  margin-inline: auto;      /* ← 真ん中に寄せる */
}

/* ---- 4. コピーライト ---- */
.copy{
  display:block;
  text-align:center;
  font-size:0.9rem;
  letter-spacing:0.02em;
}

/* ---- Responsive ---- */
@media(max-width:768px){
  .footer-head{
    flex-direction:column;
    text-align:center;
  }
.footer-hours{text-align:center;}
}

.footer-left {
      flex: 1 1 300px;
      display: flex;
      flex-direction: row;
      gap: 40px;
      margin-left: 50px;
    }
    .footer-column {
      flex: 1;
    }
    .footer-column h4 {
      font-size: 16px;
      margin-bottom: 10px;
      color: #aad4ff;
    }
    .footer-column a {
      color: #ffffffcc;
      text-decoration: none;
      display: block;
      margin: 4px 0;
    }
    .footer-column a:hover {
      text-decoration: underline;
    }
    .footer-column p {
          color: #ffffffcc;
          text-decoration: none;
          display: block;
          margin: 4px 0;
    }
    .footer-right {
      flex: 1 1 500px;
      margin-right: 50px;
    }
    .footer-right h4 {
      color: #aad4ff;
    }
    .footer-color-bottom {
      color: #aad4ff;
    }
    .footer-bottom {
      text-align: center;
      margin-top: 30px;
      font-size: 12px;
      opacity: 0.6;
    }
    .schedule-table {
      border-collapse: collapse;
      width: 100%;
      font-size: 13px;
    }
    .schedule-table th,
    .schedule-table td {
      border: 1px solid #fff;
      text-align: center;
      padding: 8px;
    }
    .schedule-table th {
      background-color: #ffffff;
      color: #1e2a44;
      font-weight: bold;
    }
    .schedule-table td {
      background-color: #1e2a44;
      color: #fff;
    }
    .schedule-table .highlight {
      color: #ffd700;
      font-weight: bold;
    }

    .quick-links {
      display: flex;
      justify-content: center;
      gap: 20px;
      padding: 40px 20px;
      background: url('https://www.transparenttextures.com/patterns/paper-fibers.png'), #dff3ff;
      background-size: cover;
      margin-top: 60px;
      margin-bottom: 60px
      
    }
    .quick-link {
      width: 300px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      
      text-align: center;
    }
    .quick-link a {
      text-decoration: none;
      color: inherit;
      display: block;
    }
    .quick-link-header {
      background-color: #102d4e;
      color: white;
      padding: 12px;
      font-weight: bold;
      font-size: 16px;
    }
    .quick-link-header::after {
      content: '→';
      margin-left: 8px;
      color: #ffd700;
    }
    .quick-link img {
      width: 100%;
      height: auto;
      display: block;
    }
    .extra-space {
      padding:20px 0 20px;

    }

.goaisatsu {
  font-weight: bold;
  font-size: 16px;

}

.director-message {
      
      padding: 60px 20px;
      text-align: center;
    }
    .message-wrapper {
      max-width: 1200px;
      margin: 0 auto;
    }
    .message-wrapper h2 {
      font-size: 24px;
      color: #102d4e;
      margin-bottom: 20px;
    }
    .message-body {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 30px;
      flex-wrap: wrap;
    }
    .message-body img {
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      width: 150px;
      height: auto;
    }
    .message-body p {
      font-size: 16px;
      line-height: 1.8;
      color: #333;
      max-width: 800px;
      text-align: left;
    }

.fixed-footer {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      z-index: 1000;
    }
    .fixed-footer a {
      flex: 1;
      text-align: center;
      padding: 15px 10px;
      color: white;
      font-weight: bold;
      text-decoration: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .fixed-footer .reserve { background-color: #3498db; }
    .fixed-footer .interview { background-color: #35578c; }
    .fixed-footer .phone { background-color: #132b47; }
    .fixed-footer i {
      font-size: 20px;
      margin-bottom: 5px;
    }

/*上部のついてくるヘッダー */
.follow-header {
  background: lightblue;
  padding: 10px;
  position: relative;
  z-index: 1;
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: lightblue;
  padding: 10px;
  display: none;
  z-index: 1000;
}


.reservation {
  
  
}
  
      /* ========= 14. Responsive ========= */
@media (max-width:48rem){
  .nav{display:none}
  .nav-toggle{display:block;background:none;border:none;cursor:pointer}
  .hamburger,.hamburger::before,.hamburger::after{display:block;width:1.75rem;height:2px;background:var(--color-text);position:relative;transition:transform var(--transition)}
  .hamburger::before,.hamburger::after{content:"";position:absolute;left:0}
  .hamburger::before{top:-7px}
  .hamburger::after{top:7px}
  .nav.open{display:block;position:absolute;top:100%;right:0;background:var(--color-bg);width:70vw;padding:1.25rem;box-shadow:var(--shadow)}
  .nav.open ul{flex-direction:column;gap:1.25rem}
  .hamburger.open{transform:rotate(45deg)}
  .hamburger.open::before{transform:rotate(90deg) translateX(-7px)}
  .hamburger.open::after{opacity:0}
  .hero__inner,.about__inner,.access__wrap{grid-template-columns:1fr}
}

html, body {
  overflow-x: hidden;   /* 横方向のはみ出し部分を非表示にする */
  background-image:url("/img/teeth-back.jpg");
}