@charset "utf-8";

/* --- 1. 基本設定 --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; 
  line-height: 1.8; color: #444; background: #fff; -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; height: auto; display: block; }
.red-text { color: #d63031 !important; font-weight: bold; }
.margin-bottom-L { margin-bottom: 40px !important; display: block; }

/* --- 2. ヘッダー --- */
#main-visual { position: relative; width: 100%; }
#header {
  position: absolute; 
  top: 30px; 
  right: 30px; 
  left: auto;  
  z-index: 100; 
  width: 320px;
  background: rgba(255, 255, 255, 0.95); 
  padding: 30px 25px 60px 25px; 
  border-radius: 15px; 
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
#mainnav ul { list-style: none; margin-top: 30px; }
#mainnav li { border-bottom: 1px solid #f1f8e9; }
#mainnav li a {
  display: block; padding: 15px 5px; color: #555; text-decoration: none;
  font-weight: bold; transition: 0.3s;
}
#mainnav li a:hover { color: #33691e; background-color: #f1f8e9; padding-left: 10px; }

/* --- 3. ハンバーガーメニュー --- */
#menuWrap { display: none; cursor: pointer; } 
#menuBtn {
  position: relative; display: inline-block;
  width: 30px; height: 2px; background: #558b2f; transition: all 0.4s ease;
}
#menuBtn::before, #menuBtn::after {
  content: ""; position: absolute; left: 0; width: 30px; height: 2px; background: #558b2f; transition: all 0.4s ease;
}
#menuBtn::before { top: -8px; }
#menuBtn::after { top: 8px; }
#menuBtn.close { background: transparent; }
#menuBtn.close::before { top: 0; transform: rotate(45deg); }
#menuBtn.close::after { top: 0; opacity: 0; transform: rotate(45deg); }
#mainImg img { width: 100%; }

/* --- 4. セクション設定 --- */
section { display: block; width: 100%; padding: 100px 0; clear: both; }
#sec01, #sec04 { background-color: #fffde7; } 
#sec02, #sec05 { background-color: #f5f5f5; } 
.inner-wrap, .innerS { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

.section-title { text-align: center; margin-bottom: 60px; font-size: 2rem; color: #558b2f; }
.section-title span { position: relative; display: inline-block; padding-bottom: 10px; }
.section-title span::after {
  content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 60px; height: 4px; background: #8bc34a;
}

/* --- 5. 画像の角丸枠 --- */
section img { border: 6px solid #fff; border-radius: 25px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); }

/* --- 6. 医院長紹介 --- */
.profile-container { display: flex; gap: 40px; align-items: flex-start; margin-top: 60px; padding-top: 40px; border-top: 1px dashed #ccc; }
.profile-image { flex: 1; max-width: 350px; }
.profile-text-box { flex: 2; }
.name-title, .profile-sub-title { 
  color: #558b2f; margin-bottom: 8px; display: inline-block; border-bottom: 3px solid #8bc34a; padding-bottom: 5px;
}
.name-title { font-size: 1.6rem; }
.profile-sub-title { font-size: 1.25rem; margin-top: 25px; min-width: 100px; }
.history-list { list-style: none; margin-top: 10px; }
.history-list li { margin-bottom: 10px; padding-left: 1em; position: relative; }
.history-list li::before { content: "・"; position: absolute; left: 0; }

/* --- 設備紹介カードの並び設定 --- */
.equipment-container {
  display: flex;
  flex-direction: column; 
  gap: 50px;              
  margin-bottom: 50px;    
}

.eq-card {
  width: 100%;            
  box-sizing: border-box; 
}


/* --- 7. ホバー設定（設備・ホワイトニング・入れ歯） --- */
.eq-card, 
.whitening-section, 
.denture-left-card {
  display: flex; align-items: center; gap: 50px; background: #fff; padding: 40px; 
  border-radius: 30px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); 
  transition: all 0.3s ease !important;
  cursor: pointer;
  clear: both;
}

.eq-card:hover, 
.whitening-section:hover, 
.denture-left-card:hover { 
  transform: translateY(-10px) !important; 
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important; 
  border-color: #558b2f !important;
}

.eq-card:nth-child(even) { flex-direction: row-reverse; }
.eq-img, .eq-text { flex: 1; }
.eq-text h4, .text-part h4 { font-size: 1.5rem; margin-bottom: 20px; color: #558b2f; border-bottom: 3px solid #e0f2f1; display: inline-block; }

/* --- 8. 補綴（3列グリッド） --- */
.product-grid { display: flex; justify-content: space-between; list-style: none; gap: 20px; margin-bottom: 50px; }
.product-grid li {
  flex: 1; background: #fff; padding: 25px; border-radius: 20px; text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); border: 1px solid #dcedc8; transition: 0.3s ease;
}
.product-grid li:hover { transform: translateY(-8px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); }
.label-out { display: inline-block; background: #8bc34a; color: #fff; padding: 2px 12px; border-radius: 5px; font-size: 0.85rem; margin-bottom: 10px; font-weight: bold; }

/* --- 9. ホワイトニング・Q&Aボックス --- */
.whitening-images { display: flex; gap: 20px; margin: 30px auto; max-width: 600px; } 
.whitening-images div { flex: 1; text-align: center; }
.whitening-images img { max-width: 250px; margin: 0 auto; background: #fff; border: 4px solid #fff !important; }
.whitening-images span { display: block; font-size: 13px; font-weight: bold; margin-bottom: 10px; color: #666; }

.news-box { background: #fff; padding: 30px; border-radius: 15px; margin-bottom: 50px; border: 2px solid #8bc34a; }
.news-box h3 { margin-bottom: 15px; border-left: 5px solid #8bc34a; padding-left: 15px; color: #558b2f; }
.denture-details-box, 
.whitening-qa-box { 
  background: #f9fdf4 !important; padding: 25px; border: 1px solid #dcedc8; border-radius: 12px; margin-top: 20px; font-size: 0.95em; line-height: 1.8;
}

/* --- 10. アクセス・診療時間表 --- */
.map-wrapper { width: 100%; margin-top: 30px; border: 2px solid #dcedc8; border-radius: 15px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.map-wrapper iframe { width: 100%; height: 400px; display: block; }
.table-container { margin-top: 40px; border-radius: 15px; overflow-x: auto; border: 2px solid #8bc34a; -webkit-overflow-scrolling: touch; }
.schedule-table { width: 100%; min-width: 600px; border-collapse: collapse; background: #fff; }
.schedule-table th { background: #8bc34a; color: #fff; padding: 15px 10px; border: 1px solid rgba(255,255,255,0.2); }
.schedule-table tbody th { background: #f9fdf4 !important; color: #558b2f !important; font-weight: bold; padding: 15px 10px; font-size: 1.25rem; }
.schedule-table td { padding: 12px 10px; border: 1px solid #f1f8e9; color: #558b2f; font-weight: bold; font-size: 1.8rem; text-align: center; }

/* --- 11. フッター・ページトップ --- */
#footer { text-align: center; padding: 40px 0; background: #558b2f; color: #fff; }
#fixed-pagetop {
  position: fixed; bottom: 25px; right: 25px; background: #fff; color: #7cb342; border: 2px solid #7cb342;
  padding: 14px 45px; border-radius: 50px; text-decoration: none; font-size: 14px; font-weight: bold;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); z-index: 1000; transition: all 0.3s ease; letter-spacing: 0.1em;
}
#fixed-pagetop:hover { background: #f1f8e9; color: #33691e; border-color: #33691e; transform: translateY(-3px); }

/* --- 12. スマホ対応 --- */
@media screen and (max-width: 850px) {
  /* 1. ヘッダー・メニュー基盤 */
  #header { position: static !important; width: 100% !important; padding: 15px 20px !important; background: #fff !important; box-shadow: none !important; }
  #menuWrap { display: block !important; position: absolute !important; top: 25px !important; right: 20px !important; z-index: 9999 !important; width: 30px !important; height: 30px !important; cursor: pointer !important; }
  #header h1 img { width: 280px !important; height: auto !important; }

  /* 2. メニューパネル */
  .panel { display: none; width: 100% !important; background: #fff !important; padding: 10px 0 !important; border-top: 1px solid #eee !important; position: relative !important; z-index: 9998 !important; }

  /* 3. ハンバーガーボタン  */
  #menuBtn { position: absolute !important; top: 50% !important; left: 0 !important; transform: translateY(-50%) !important; width: 30px !important; height: 2px !important; background: #558b2f !important; transition: all 0.3s !important; }
  #menuBtn::before, #menuBtn::after { content: "" !important; position: absolute !important; width: 30px !important; height: 2px !important; background: #558b2f !important; transition: all 0.3s !important; left: 0 !important; }
  #menuBtn::before { top: -8px !important; }
  #menuBtn::after { top: 8px !important; }

  /* 閉じた時のデザイン */
  #menuBtn.close { background: transparent !important; } 
  #menuBtn.close::before { top: 0 !important; transform: rotate(-45deg) !important; } 
  #menuBtn.close::after { display: none !important; } 

  /* 4. 隙間と並び */
  section { padding: 50px 0 !important; display: block !important; clear: both !important; }
  .equipment-container, .profile-container, .product-grid { 
    display: flex !important; flex-direction: column !important; gap: 40px !important; padding: 0 20px !important; 
  }
  .eq-card { display: flex !important; flex-direction: column !important; gap: 20px !important; width: 100% !important; padding: 25px !important; }
  .eq-card:nth-child(even) { flex-direction: column !important; } 

  /*  */
  .eq-img, .eq-text, .profile-image, .profile-text-box { width: 100% !important; max-width: 100% !important; flex: none !important; }
  .profile-image img, .eq-img img { width: 100% !important; margin: 0 auto !important; }

  /*  */
  .name-title, .profile-sub-title { 
    display: table !important; margin: 30px auto 15px !important; text-align: center !important; 
    border-bottom: 3px solid #8bc34a !important; padding-bottom: 5px !important; 
  }
  
  /*  */
  .history-list, .specialty-main, .special-treatment { text-align: left !important; width: 100% !important; }

  /*  */
  .schedule-table td { font-size: 1.4rem !important; }
  #fixed-pagetop { padding: 12px 25px !important; bottom: 15px !important; right: 15px !important; }
}