@charset "utf-8";

body
{
  font-family: "serif";
  font-weight: 400;
  background-color: rgb(244, 244, 244);
  margin: auto;
}

/* ヘッダー */
.header
{
  background-color: rgb(214, 214, 214);
  width: 100%;
  height: 80px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.header__inner
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: inherit;
  position: relative;
}

.header__title
{
  width: 80px;
}

.ClinicLogo
{    
  margin-top: 5px;
  height: 80px;
}

.header__nav 
{
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  transform: translateX(100%);
  background-color: rgb(219, 231, 235);
  opacity: 0.9;
  transition: ease .4s;

  display: flex;
  justify-content: center;
  align-items: center;
}

.nav__items 
{
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.nav-items__item a 
{
  margin: 0;
  padding-bottom: 30px;
  color: white;
  text-decoration: none;
}

@media screen and (min-width:900px) 
{
  .nav-items__item a
  {
    font-size: 30px;
    padding-bottom: 0px;
  }

  #opAdditional
  {
    font-size: large;
  }
}

@media screen and (min-width: 821px) 
{
  body 
  {
    font-family: "serif";
    font-weight: 400;
    background-color: #ededed;
    max-width: 820px;
    margin: auto;
  }

  .header
  {
    height: 120px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
  }

  .header__title 
  {
    width: 120px;
  }  
    .ClinicLogo
  {
    height: 120px;
  }
  .TsukamotoClinic
  {
    margin-top: 120px;
  }

  .header__nav 
  {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: inherit;
    position: static;
    transform: initial;
    background-color: inherit;
    width: auto;
  }

  .nav__items 
  {
    color: white;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: center;
  }

  .nav-items__item a 
  {
    font-size: larger;
    padding-bottom: 0px;
  }
    
  .hamburger 
  {
    display: none;
  }
}

.nav__items
{
  list-style: none;
}

/* ナビのリンク */
.nav-items__item a
{
  color: rgb(90, 89, 87);
  text-decoration-line: none;
  width: 100%;
  margin-right: 20px;
  display: block;
  text-align: center;
  font-size: 20px;
}

.nav-items__item:last-child a
{
  margin-bottom: 0;
}

/* ハンバーガーメニュー */
.header__hamburger
{
  width: 48px;
  height: 100%;
}

.hamburger
{
  background-color: transparent;
  border-color: transparent;
  z-index: 9999;
}

.hamburger span
{
  width: 100%;
  height: 1px;
  background-color: #000;
  position: relative;
  transition: ease .4s;
  display: block;
}

.hamburger span:nth-child(2)
{
  margin: 8px 0;
}

.header__nav.active
{
  transform: translateX(0);
}

.hamburger.active span:nth-child(1)
{
  top: 5px;
  transform: rotate(45deg);
}

.hamburger.active span:nth-child(2)
{
  opacity: 0;
}

.hamburger.active span:nth-child(3)
{
  top: -13px;
  transform: rotate(-45deg);
}

/* トップ */
.TsukamotoClinic
{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 80px;
  height: auto;
  aspect-ratio: 16/9;
  background-image: url(img/shop\ front.jpg);
  background-size: cover;
}

.TsukamotoClinic h2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  line-height: 1.3;
}

.ThisClinic
{
  margin: auto;
  display: block;
}

.ThisClinic h1
{
  background-color: rgb(199, 199, 199);
  display: block;
  color: white;
  font-size: clamp(25px, 1vw, 25px);
  margin: auto;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 20px;
  text-align: Center;
}

.ThisClinicImg
{
  display: flex;
  justify-content: center;
}

.ThisClinicImg img
{
  width: 50%;
  height: auto;
}

.medical_menu
{
  display: block;
  padding-bottom: 10px;
}

.medical_menu_box
{
  background-color: rgba(237, 237, 237, 0.9);
  border-radius: 30px;
  padding-bottom: 6px;
  margin: 3%;
}

.medical_menu dt
{
  background-color: rgb(255, 242, 204);
  font-size: 18px;
  border-radius: 10px;
  padding: 5px 0 5px 7%;
}

#openingHours
{
  width: 95%;
}

#opAdditional
{
  margin: 0 0 0 5%;
  color: red;
}

.ThisClinic .notice-list {
  margin-left: 5%;
  padding-left: 0;
}

.notice-list li
{
  font-size: 20px;
  list-style: none;
}

/* アクセス */

#address
{
  font-size: 20px; 
}

iframe
{
  width: 95%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.instagram-link {
  position: fixed;
  bottom: 20px;   /* 少し余裕を持たせる */
  right: 20px;
  z-index: 1000;
  display: block;
  width: 100px;    /* px指定に変更 */
  height: 100px;   /* px指定に変更 */
}

/* タブレット向け (画面幅 768px以上) */
@media screen and (min-width: 768px) {
  .instagram-link {
    width: 150px;
    height: 150px;
  }
}

/* デスクトップ向け (画面幅 1200px以上) */
@media screen and (min-width: 1200px) {
  .instagram-link {
    width: 200px;
    height: 200px;
  }
}

.instagram-link img {
  width: 100%;
  height: auto;
  border-radius: 15%;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: transform 0.2s ease;
}

.instagram-link img:hover {
  transform: scale(1.1); /* マウスを重ねたら拡大 */
}

footer
{
  margin: 0;
  text-align: center;
  max-width: 390px;
  width: 100%;
}

.clear
{
  clear: both;
}