/*
Theme Name: 生駒Mky Dental Clinic
Theme URI: #
Author: Shota Jojima / Ai kobayashi
Author URI: #
Description: 生駒MkyデンタルクリニックのWordPressテーマ
Version: 1.0
*/


/* 共通設定 */
html {
	margin-top: 0 !important; 
}

#wpadminbar {
  position: fixed !important;
  top: 0 !important;
  z-index: 9999 !important;
}

html.admin-bar {
  margin-top: 32px !important;
}

body.admin-bar {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body {
    font-family: 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #333;
    background: #fff;
  }

  h1, h2 {
    margin-top: 0;
  }

  h2 {
    position: relative;
    padding-left: 1em;
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }
  
  /* 縦棒の装飾 */
  h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.1em;
    width: 5px;
    height: 1.2em;
    background-color:#333;
    border-radius: 2px;
  }

  h3 {
    font-size: 24px;
    color: #183E9F;
  }

  h4 {
    font-size: 24px;
  }

  p {
    font-weight: 450;
  }

  strong {
    color: #183E9F;
  }

  /* span {
    color:#828282 ;

  } */
  
  ul {
    list-style: none;
    padding: 0;
  }
  
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  .description {
    max-width: 960px;
    display: block;
    margin: 0 auto;
  }
  
  /* レイアウト */
  section {
    padding: 2rem 1rem;
    /* max-width: 960px; */
    margin: 0 auto;
    margin-bottom: 2rem;
  }

  .container {
    max-width: 960px;
    display: block;
    margin: 0 auto;
  }
  
  .center {
    text-align: center;
  }
  
  .sns-links img {
    width: 32px;
    height: 32px;
  }

  /* 背景色バリエーション */
.bg-light-blue {
    background-color: #DAEAFF;
  }

.bg-medium-blue {
  background-color: #9abafb;
}

.bg-blue {
  background-color: #5188cc;
}

.bg-deep-blue {
    background-color: #183E9F;
  }
  
  .bg-grey {
    background-color: #EEF0F3;
  }
  
  .bg-white {
    background-color: #ffffff;
  }

  /* スペーサー */
  .spacer-margin {
    margin-top: 4rem;
  }

  .spacer-padding {
    padding-top: 1.5rem;
  }
  
  /* フレックスセクション（説明+画像） */
  .flex-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
  }
  
  .flex-section img {
    flex: 1 1 35%;
    width: 100%;
    height: auto;
    max-width: 40%;
    border-radius: 10px;
    object-fit: cover;
  }

  .text-area {
    flex: 1 1 60%;
    max-width: 50%;
  }

/*ここからトップページ*/
  .top-section {
    padding: 2rem, 1rem;
    padding-bottom: 0;
  }
  
  .top-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .top-section img {
    max-width: 100%;
    height: auto;
    object-fit: cover;  
    display: inline;
  } 

  .top-book-link {
    display: block;
    width: 30%;
    margin-bottom: 4rem;
  }


  /*ここからヘッダー*/
  .clinic-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    flex-wrap: wrap;
    margin: 0 auto;
    box-sizing: border-box;
    border-bottom: 2px solid #ccc;
    padding: 1rem;
    gap: 1rem;
    /*header追従*/
    /* position: absolute; */
    top: 0;
    width: -webkit-fill-available;
    z-index: 999;
  }
  
  .header-left {
    flex: 1;
    min-width: 200px;
  }
  
  .header-left h1 {
    font-size: 1.8rem;
    font-weight: bold;
    color: #00378a;
    margin: 0;
    width: 100%;
  }

  .site-title-link {
    color: #00378a;
    text-decoration: none;
    display: inline-block;
  }

  .site-title-link:hover {
    text-decoration: underline;
  }
  
  .header-left .sub-title {
    font-size: 0.9rem;
    color: #00378a;
    margin: 0.3rem;
    text-align: center;
    max-width: 375px;
  }
  
  .header-right {
    flex: 0 0 auto;
    min-width: 300px;
    display: flex;
    justify-content: flex-end;
  }
  
  .info-group {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    
  }
  
  .contact-block {
    text-align: left;
  }
  
  .phone-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .phone-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
  
  .phone-number {
    font-size: 1.6rem;
    font-weight: bold;
    color: #000;
  }
  
  .business-hours,
  .closed-days {
    font-size: 0.9rem;
    margin: 0.2rem 0;
    text-align: center;
  }
  
  .header-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .button-row {
    display: flex;
    gap: 0.5rem;
  }
  
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
  }
  
  .web-btn {
    background-color: #00378a;
    color: #fff;
  }
  
  .outline-btn {
    border: 1px solid #00378a;
    color: #00378a;
  }
  
  .insta-btn img {
    width: 32px;
    height: 32px;
  }

  .responsive-btn {
    display: none;
  }
  /* ここまでヘッダー */

  /* 当院のホワイトニングセクション */

  .img-adjust-large {
    flex: 1 1 55%;
    min-width: 400px;
  }

  .waiting-room .text-area {
    flex: 1 1 40%;
  }
  
  /* メニュー用ボックス */
  .menu-box {
    background: #FBFEFF;
    border-radius: 12px;
    border: 1px solid #183E9F;
    padding: 1.5rem;
    margin-top: 1rem;
    box-shadow: 0 0 5px rgba(0,0,0,0.05);
    max-width: 960px;
    margin: 0 auto;
  }


  
  /* 診療時間テーブル */
  .label {
    display: inline-block;
    background-color: #3165b6;
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-weight: bold;
    margin-right: 8px;
  }
  .closed-days {
    color: #3165b6;
    font-weight: bold;
  }
  .table-responsive {
    overflow-x: auto;
  }
  .timetable {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
  }
  .timetable th,
  .timetable td {
    border: 1px solid #bbe1ff;
    padding: 8px;
    text-align: center;
  }
  .timetable th {
    background-color: #d4ebff;
  }
  .timetable td {
    background-color: #ffffff;
  }

  .note {
    text-align: center;
    padding-top: 2rem;
  }

  /* アクセス */
.map-container {
    max-width: 100%;
    margin: 0 auto;
    padding-top: 1rem;
}

  .map-container iframe {
    width: 100%;
    border-radius: 8px;
    display: block;
  }

  /* スタッフ一同 */
  .staff-message {
    text-align: center;
  }

  .staff-message h3 {
    font-weight: normal;
    font-size: 1.7rem;
    padding: 1rem;
    width: 60%;
    margin: 0 auto;
    color: #ffffff;
    border-radius: 0 0 25px 25px;
  }

  .staff-welcome {
    display: inline-block;
    border-radius: 60px;
    padding: 0.5rem 1.5rem;
  }

  .staff-message p {
    font-weight: normal;
    font-size: 1.4rem;
    margin: 0 auto;
    color: #ffffff;
    padding:
  }
  
  .staff-photo {
    align-items: center;
    min-width: 0;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }

    /*インスタバナー */
  .Instagram-banner {
    align-items: center;
    max-width: 80%;
    height: auto;
    margin: 0 auto;
  }

  /*フッター*/
  .site-footer {
    color: #fff;
    text-align: center;
    max-width: none;
    margin: 0 auto;
  }

  .footer-copywrite {
    margin: 0 auto;
    padding: 1rem;
  }

  .footer-privacy{
    color: #fff;
  }
  
  /* メディアクエリ：タブレット向け */
  @media screen and (max-width: 768px) {
    /* 共通設定 */
    header, section {
      padding: 1.5rem 1rem;
    }

    .text-area {
      max-width: 100%;
    }

    /* フレックスセクション（説明+画像） */
    .flex-section {
      gap: 3rem;
    }
    
    .flex-section.text-area {
      max-width: 100%;
    }
    
    .flex-section img {
      max-width: 50%;
      margin: 0 auto;
    }

    .reverse {
      flex-direction: column-reverse;
    }

    /* ヘッダー */
    .clinic-header {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 0;
    }
  
    .header-left,
    .header-right {
      width: 100%;
      justify-content: center;
    }

    .header-left .sub-title {
      max-width: none;
    }
  
    .header-right {
      padding-top: 0;
    }
  
    .info-group {
      justify-content: center;
      flex-direction: column;
      gap: 1rem;
    }
  
    .header-buttons {
      align-items: center;
    }

     /* タブレットからボタンを右下に固定表示 */
     .header-buttons {
      position: fixed;
      right: 1rem;
      bottom: 1rem;
      z-index: 1000;
      background-color: rgba(255, 255, 255, 0.95);
      padding: 0.5rem;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
  
    .header-buttons .outline-btn {
      display: none; /* スマホでは非表示 */
    }

    .responsive-btn {
      display: block;
    }
  
    .btn {
      font-size: 0.75rem;
      padding: 0.4rem 0.6rem;
    }
  
    .insta-btn img {
      width: 28px;
      height: 28px;
    }
    
    .staff-message h3 {
      font-size: 1.4rem;
    }
  }
  
  /* メディアクエリ：スマホ向け */
  @media screen and (max-width: 425px) {
    /* 共通 */

    h2 {
      font-size: 1.4rem;
    }
     /* フレックスセクション（説明+画像） */
    .flex-section {
      gap: 1rem;
    }
    
    .flex-section img {
      max-width: 80%;
      margin: 0 auto;
    }

    /* トップセクション */
    .top-book-link {
    display: block;
    width: 50%;
  }

    /* header */
    .clinic-header {
        flex-direction: column;
        padding: 0.5rem;
      }
    
      .header-left, .header-right {
        width: 100%;
      }

      .header-right .info-group .contact-block{
        display: none;
      }

      .header-left {
        text-align: center;
      }
    
      .header-left h1 {
        font-size: 1rem;
        margin-bottom: 0.3rem;
        margin: 0 auto;
      }
    
      .header-left .sub-title {
        font-size: 0.8rem;
        max-width: none;
      }
    
      .phone-number {
        font-size: 1.3rem;
      }
    
      .business-hours,
      .closed-days {
        font-size: 0.8rem;
      }
    
      .info-group {
        align-items: flex-start;
      }
     

    /* 当院のホワイトニングセクション */
    .img-adjust-large {
      flex: 1 1 35%;
      min-width: 300px;
    }

    .staff-message h3 {
      width: 90%;
      padding: 0.5rem;
      font-size: 0.8rem;
    }

    .staff-message p {
      font-size: 0.8rem;
    }

  }

/*ここまでトップページ*/


/* ここからコンタクトページ */
.h2-contact {
  margin: 0 auto;
  padding: 2rem;
  color: #ffffff;
  text-align: center;
}
h2.h2-contact::before {
  display: none;
}

.contact-form-section {
  background-color: #e6f0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 0;
}

.contact-form {
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem;
  border-radius: 10px;
}

.form-group {
  margin-bottom: 1.2rem;
  text-align: left;
}

.form-group-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.form-group-row .form-group {
  flex: 1;
  min-width: 45%;
}

label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: bold;
}

input, select, textarea {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  font-size: 1rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

.privacy-check{
  white-space: nowrap;
}

.privacy-check-box{
  width: auto;
}

/* メールアドレス欄の背景色を常に白に固定 */
input[type="email"] {
  background-color: #ffffff !important;
}

/* オートフィルによる黄色背景を打ち消す（Chrome対策） */
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
  box-shadow: 0 0 0px 1000px #ffffff inset !important;
  -webkit-text-fill-color: #000000 !important;
}

.submit-btn {
  background-color: #00378a;
  color: #fff;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  width: 100%;
  margin-top: 1.5rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

.submit-btn:hover {
  background-color: #002f75;
}
/* ここまでコンタクトページ */

/* ここからThanksページ */
.thanks-section {
  background-color: #e6f0ff;
  text-align: center;
  margin-bottom: 0;
  height: 80vh;
}

.h2-thanks {
  padding: 0;
  margin-bottom: 2rem;
}
.h2-thanks::before {
  display: none;
}

.contact-thanks-attention {
  
}

.thanks-card{
  max-width: 480px;
  background-color: #fff;
  padding: 4em 6em;
  border-radius: 3%;
}

@media screen and (max-width: 425px) {
  .thanks-card{
  padding: 2em 1em;
  }

}

/* ここからプライバシーポリシーページ */
.privacy-bg {
  margin: 0 auto;
}

.privacy-title {
  padding: 2rem;
  text-align: center;
  margin: 0 auto;
  color: #ffffff;
}

.privacy-title::before {
    display: none;
  }

.privacy-policy {
  margin: 0 auto;
}