.container {
  font-family: serif;
}

/*ヘッダー部分*/
.header {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.header-clinic-logo {
  width: 100px;
  padding: 15px 15px 0 15px;
}

.header-clinic-logo img {
  width: 60px;
  height: 50px;

}

.header-clinic-name {
  width: 100%;
  margin-top: 15px;
}

.header-clinic-name h1 {
  font-family: sans-serif;
  font-size: 30px;
  line-height: 50px;
  font-weight: bold;
  color: #707070;
  text-shadow: 1px 2px #CBCBCB;
}

.header-clinic-nav {
  width: 60px;
  margin: 30px 15px 0 30px;
  align-items: center;
  text-align: center;
}

.menu-btn {
  position: fixed;
  top: 10px;
  right: 10px;
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  z-index: 90;
  background-color: #FFFFFF;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background-color: #707070;
  position: absolute;
}
.menu-btn span:before {
  bottom: 8px;
}
.menu-btn span:after {
  top: 8px;
}

#menu-btn-check:checked ~ .menu-btn span {
  background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
  top: 0;
  transform: rotate(-45deg);
}

#menu-btn-check {
  display: none;
}

.menu-content {
  width: 250px;
  position: fixed;
  top: 70px;
  right: -300px;
  z-index: 80;
  background-color: rgba(255, 255, 255, 0.95);
  text-align: right;
  transition: all 0.5s;
}

.menu-content li {
  color: #3B3B3B;
  margin: 30px 10px 20px 0;
}

#menu-btn-check:checked ~ .menu-content {
  right: 0;/*メニューを画面内へ*/
}

.header-clinic-nav-desktop {
  display: none;
}


/*コンテンツ部分*/
.contents {
  max-width: 500px;
  margin: 0 auto 70px auto;
}

.main-title {
  font-size: 21px;
  font-weight: bold;
  color: #3B3B3B;
  text-align: center;
  margin-bottom: 20px;
}

.content {
  width: 340px;
  margin: 0 auto 50px auto;
}

.content h3 {
  font-size: 15px;
  font-weight: bold;
  color: #3B3B3B;
  text-align: center;
  margin-bottom: 10px;
}

.content-pic {
  display: block;
  width: 300px;
  height: 200px;
  box-shadow: 15px 15px #C8D6E2;
  margin: 0 auto 30px auto;
}

.content-description {
  font-size: 12px;
  line-height: 24px;
  color: #3B3B3B;
  margin-bottom: 15px;
}

.content-detail {
  display: flex;
  color: #3B3B3B;
}

.content-detail p {
  font-size: 12px;
  line-height: 20px;
}


/*予約部分*/
.reservation {
  margin-bottom: 60px;
}

.reservation h3 {
  font-size: 21px;
  font-weight: bold;
  color: #3B3B3B;
  text-align: center;
}

.reservation-contents {
  width: 375px;
  height: 356px;
  background-color: #F7F7F7;
  padding-top: 15px;
  margin: 0 auto;
}

.reservation-content-top h4, .reservation-content-bottom h4 {
  font-size: 21px;
  color: #3B3B3B;
  text-align: center;
  margin-bottom: 15px;
}

.reservation-form-top, .reservation-form-middle, .reservation-form-bottom {
  display: flex;
  font-size: 14px;
  color: #3B3B3B;
  line-height: 20px;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.reservation-form-top img, .reservation-form-middle img, .reservation-form-bottom img {
  width: 65px;
  height: 65px;
}

.line-icon {
  margin: 0 20px 0 20px;
}

.line-qr {
  margin: 0 20px 0 20px;
}

.icon-telephone {
  margin: 0 62px 0 22px;
}


/*アクセス部分*/
.information-about-clinic {
  margin-bottom: 60px;
  text-align: center;
}

.information-access {
  margin-bottom: 60px;
}

.information-access h3 {
  text-align: center;
  font-size: 21px;
  font-weight: bold;
  color: #3B3B3B;
}

.information-address-top {
  display: flex;
  justify-content: center;
}

.clinic-logo {
  height: 50px;
  margin: 15px 15px 10px 0;
}

.clinic-name {
  font-family: sans-serif;
  font-size: 30px;
  line-height: 50px;
  font-weight: bold;
  color: #707070;
  text-shadow: 1px 2px #CBCBCB;
  margin-top: 15px;
}

.information-address-middle {
  margin-bottom: 20px;
}

.information-address-middle p {
  font-size: 12px;
  color: #3B3B3B;
  line-height: 20px;
  text-align: center;
}

.map {
  width: 327px;
  height: 180px;
  display: block;
  margin: 0 auto;
}


/*フッター部分*/
.footer-contents {
  width: 100%;
  background-color: #F2F7F3;
  padding: 15px 20px 10px 25px;
  margin-bottom: 20px;
}

.footer-content-top ul {
  width: 300px;
  margin: 0 auto 20px auto;
  color: #3B3B3B;
}

.footer-content-top li {
  margin-bottom: 20px;
  font-size: 12px;
}

.footer-content-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-clinic-logo img {
  height: 50px;
  margin-right: 15px;
}

.footer-clinic-name {
  font-family: sans-serif;
  font-size: 30px;
  line-height: 50px;
  font-weight: bold;
  color: #707070;
  text-shadow: 1px 2px #CBCBCB;
  margin-right: 10px;
}

.copyright {
  text-align: center;
  font-size: 10px;
  color: #3B3B3B;
}