.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;
}

/*hero_image*/
.hero-image-mobile {
  width: 370px;
  height: 420px;
  margin: 0 auto 30px auto;
  
}

.wrap-image {
  width: 350px;
  height: 420px;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}

.img-adjustable {
  z-index: 10;
  width: 350px;
  height: 420px;
  position: absolute;
  left: 10px;
  opacity: 0;
  transition: all 3s ease-in-out;
  -webkit-animation: anime 24s 0s infinite;
  animation: anime 24s 0s infinite;
}

/*hero_imageスライド用*/
.img-adjustable:nth-of-type(2) {
  -webkit-animation-delay: 6s;
  animation-delay: 6s; }

.img-adjustable:nth-of-type(3) {
  -webkit-animation-delay: 12s;
  animation-delay: 12s; }

.img-adjustable:nth-of-type(4) {
  -webkit-animation-delay: 18s;
  animation-delay: 18s; }

@keyframes anime {
  0% {
      opacity: 0;
  }
  8% {
      opacity: 1;
    }
  17% {
      opacity: 1;
  }
  25% {
      opacity: 0;
      transform: scale(1.2) ;
      z-index:9;
    }
  100% { opacity: 0 }
}

@-webkit-keyframes anime {
  0% {
      opacity: 0;
  }
  8% {
      opacity: 1;
  }
  17% {
      opacity: 1;
  }
  25% {
      opacity: 0;
       -webkit-transform: scale(1.2);
          z-index:9;
  }
  100% { opacity: 0 }
}


.hero-image-desktop {
  display: none;
}

.hero-sentence {
  font-size: 16px;
  font-weight: normal;
  color: #3B3B3B;
  text-align: center;
  line-height: 21px;
  letter-spacing: 1px;
  margin-bottom: 45px;
}

.information {
  display: flex;
  justify-content: center;
  padding: 0 15px 0 15px;
  margin-bottom: 25px;
}

.information p {
  font-size: 11px;
  font-weight: normal;
  color: #3B3B3B;
}

.information-title {
  width: 100px;
  height: 104px;
  border-left: 1px solid #CCCCCC;
  border-right: 1px solid #CCCCCC;
  padding-top: 22px;
  margin-right: 15px;
  text-align: center;
}

.information-text {
  width: 250px;
  height: 104px;
}

.information-text p {
  line-height: 16px;
  margin-bottom: 15px;
}

.information-text span {
  color: cornflowerblue;
}

.banner {
  margin-bottom: 25px;
  font-size: 11px;
  color: #3B3B3B;
}

.banner p {
  margin-bottom: 5px;
}

.banner h3 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.banner-top {
  width: 300px;
  height: 100px;
  margin: 0 auto 25px auto;
  padding: 10px 0 5px 15px;
  border: 1px solid #CCCCCC;
  background-image: url(./assets/images/top/banner_traffic-accident_mobile.jpg);
}

.banner-bottom {
  width: 300px;
  height: 100px;
  margin: 0 auto;
  padding: 10px 0 5px 15px;
  border: 1px solid #CCCCCC;
  background-image: url(./assets/images/top/banner_labor-accident_mobile.jpg);
}

.description-about-trouble {
  width: 375px;
  height: 250px;
  background-color: #F7F7F7;
  padding: 10px 17px 4px 17px;
  margin: 0 auto 20px auto;
}

.description-about-trouble h3 {
  font-size: 15px;
  font-weight: bold;
  color: #3B3B3B;
  text-align: center;
  display: block;
  margin-bottom: 10px;
}
.trouble-icons {
  display: flex;
  justify-content: space-around
}

.icon-neck, .icon-lumbus, .icon-sports, .icon-knee, .icon-accident, .icon-others {
  display: flex;
  font-size: 10px;
  color: #3B3B3B;
  align-items: center;
}

.description-about-trouble img {
  width: 65px;
  height: 65px;
}

.information-about-attempt {
  width: 375px;
  margin: 0 auto 60px auto; 
}

.information-about-attempt h3 {
  text-align: center;
  color: #3B3B3B;
}

.attempt-contents {
  border: 3px solid #EFFAF1;
  padding: 21px 22px 6px 35px;
}

.attempt-content {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  font-size: 11px;
  color: #3B3B3B;
  line-height: 24px;
}

.attempt-content img {
  width: 65px;
  height: 65px;
  margin-right: 30px;
}

.request-customers {
  font-size: 11px;
  color: #3B3B3B;
  line-height: 24px;
  text-align: center;
}

.menu-details {
  margin-bottom: 70px;
}


.menu-detail {
  width: 340px;
  font-size: 12px;
  margin: 0 auto 70px auto;
}

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


.menu-detail-pic {
  width: 300px;
  height: 200px;
  margin-bottom: 40px;
}

.background-green {
  box-shadow: 25px 25px #F2F7F3;
}

.background-blue {
  box-shadow: 25px 25px #C8D6E2;
}

.background-yellow {
  box-shadow: 25px 25px #F5F0D9;
}

.menu-detail-description {
  padding: 0 37px 0 38px;
  color: #3B3B3B;
  line-height: 24px;
  margin-bottom: 15px;
}

.menu-detail-icon {
  display: flex;
  padding-left: 37px;
  color: #3B3B3B;
}

.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;
}