@charset "utf-8";
/* CSS Document */


/*================================
MV 
================================*/
#mv #mv_bg{
  position: relative;
  background-image: url("../img/top/mv.jpg");
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
#mv h1{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 1;
  margin-bottom: 0;
}
@media (min-width: 768px){
  #mv #mv_bg{
    aspect-ratio: 9 / 5;
  }
  #mv h1{
    padding-left: 40px;
  }
}
@media (max-width: 767px){
  #mv{
    padding-left: 50px;
  }
  #mv #mv_bg{
    aspect-ratio: 12 / 17;
  }
  #mv #mv h1{
    padding-left: 20px;
  }
}

/*================================
PICK UP
================================*/
#sect_pickup{
  position: relative;
}
#menu_slider a{
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
}
#menu_slider a img{
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}
#menu_slider .swiper-pagination-bullet{
  background-color: #e3e3e3;
  opacity: 1;
}
#menu_slider .swiper-pagination-bullet-active{
  background-color: #808080;
}
@media (max-width: 767px){
  #menu_slider .swiper-slide{
    width: 80%;
  }
}


/*================================
MOTTO
================================*/
#sect_motto{
  position: relative;
}

/*MOTTO background
================================*/
#sect_motto::before,
#sect_motto::after{
  content: '';
  display: inline-block;
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
}
#sect_motto::before{
  background-image: url("../img/top/motto_bg_2ring.png");
  aspect-ratio: 985 / 727;
}
#sect_motto::after{
  background-image: url("../img/top/motto_bg_3ring.png");
  aspect-ratio: 1175 / 970;
}
@media (min-width: 768px){
  #sect_motto::before{
    width: 985px;
    top: -530px;
    right: -300px;
  }
  #sect_motto::after{
    width: 1175px;
    bottom: -350px;
    left: -200px;
  }
}
@media (max-width: 767px){
  #sect_motto::before{
    width: 610px;
    top: -230px;
    right: -250px;
  }
  #sect_motto::after{
    width: 610px;
    bottom: -50px;
    left: -250px;
    transform:rotate(45deg);
  }
}


/*MOTTO content
================================*/
.motto_wrap{
  position: relative;
  z-index: 1;
}
.motto_txt{
  
}
.motto_txt h2::first-letter{
  color: #e8939a;
}
.motto_txt h2,
.motto_txt p{
  line-height: 1.8;
  margin-bottom: 2rem;
}
.motto_photo{
  position: relative;
  aspect-ratio: 620 / 640;
  margin-top: 2rem;
}
.motto_photo img:nth-of-type(1),
.motto_photo img:nth-of-type(2),
.motto_photo img:nth-of-type(3){
  position: absolute;
}
.motto_photo img:nth-of-type(1){
  width: 50%;
  top: 0;
  left: 0;
}
.motto_photo img:nth-of-type(2),
.motto_photo img:nth-of-type(3){
  width: 41.13%;
}
.motto_photo img:nth-of-type(2){
  top: 18%;
  right: 0;
}
.motto_photo img:nth-of-type(3){
  bottom: 0;
  right: 44%;
}
@media (min-width: 1200px){
  .motto_photo{
    width: 50%;
    max-width: 620px;
  }
}
@media (min-width: 992px){
  .motto_wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
@media (min-width: 768px) and (max-width: 1199px){
  .motto_photo{
    width: 45%;
  }
}
@media (min-width: 768px) and (max-width: 991px){
  .motto_photo{
    position: absolute;
    right: -50px;
    top: -70px;
    z-index: -1;
  }
}
@media (min-width: 768px){
}
@media (min-width: 768px) and (max-width: 991px){
  .motto_txt h2{
    font-size: 1.6rem;
  }
  .motto_txt p{
    font-size: .9rem;
  }
}
@media (max-width: 767px){
  .motto_txt h2{
    font-size: 1.15rem;
  }
  .motto_txt p{
    font-size: .85rem;
  }
  .motto_photo{
    width: 90%;
    max-width: 340px;
    margin: 0 auto;
  }
}

/*================================
MENU
================================*/
#sect_menu{
  position: relative;
  z-index: 0;
}
#sect_menu::before{
  content: '';
  display: inline-block;
  position: absolute;
  left: 0;
  right: 0;
  background-image: url("../img/top/menu_bg_grd.jpg");
  background-size: cover;
  background-position: top center;
  z-index: -1;
}
#sect_menu .menu_enttl{
  position: relative;
  z-index: 0;
  display: inline-block;
  margin-bottom: 2rem;
}
#sect_menu .menu_enttl::after{
  content: '';
  display: inline-block;
  position: absolute;
  bottom: 8px;
  background-image: url("../img/top/menu_enttl.png");
  background-size: contain;
  aspect-ratio: 420 / 130;
  z-index: -1;
}
#sect_menu .view_more{
  display: block;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 992px){
  #sect_menu::before{
    top: -120px;
  }
}
@media (min-width: 768px){
  #sect_menu::before{
    bottom: -460px;
  }
  #sect_menu .menu_enttl{
    font-size: 2.2rem;
  }
  #sect_menu .menu_enttl::after{
    width: 360px;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media (max-width: 991px){
  #sect_menu::before{
    top: 0;
  }
}
@media (max-width: 767px){
  #sect_menu::before{
    bottom: 0;
  }
  #sect_menu .menu_enttl{
    font-size: 1.4rem;
    padding-left: 10px;
  }
  #sect_menu .menu_enttl::after{
    width: 200px;
    left: -5px;
  }
}

/*メニューから探す
================================*/
.menubox .menu_link{
  margin-top: 2rem;
}
.menubox .btn{
  position: relative;
  background-color: #fff;
  display: block;
  text-align: left;
  border-radius: 0;
  border-color: #fff;
}
.menubox .btn::before{
  content: '';
  border: 0;
  border-top: #e8939a 1px solid;
  border-right: #e8939a 1px solid;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.menubox .btn img{
  margin-right: 1rem;
}
@media (hover: hover) {
  .menubox .btn:hover{
    border-color: #e8939a;
  }
}
@media (min-width: 768px){
  .menubox .btn{
    font-size: 1.1rem;
    padding: .75rem 1.5rem;
    margin-bottom: 1.5rem;
  }
  .menubox .btn::before{
    width: 10px;
    height: 10px;
    right: 1.5rem;
  }
}
@media (max-width: 767px){
  .menubox .menu_link a{
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }
  .menubox .btn{
    font-size: .9rem;
    padding: .5rem 1rem;
    margin-bottom: .5rem;
  }
  .menubox .btn::before{
    width: 8px;
    height: 8px;
    right: 1rem;
  }
  .menubox .btn img{
    width: 47px;
    height: auto;
  }
}

/*================================
NEWS
================================*/
#sect_news{
  position: relative;
}
#sect_news .container{
  position: relative;
  background-color: #fff;
  z-index: 0;
}
#sect_news .container::before{
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0 calc(50% - 50vw);
	width: 100vw;
  height: 100%;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, #fff 50%, #fff 100%);
  z-index: -1;
}
.news_wrap .newsbox .post{
  border-bottom: #c9c9c9 1px solid;
  padding: 15px 0;
}
.news_wrap .newsbox .post .category{
  width: 90px;
  display: inline;
  text-align: center;
  font-size: .85rem;
  background-color: #efefef;
  padding: 6px 3px;
  margin-left: 15px;
  line-height: 1;
}
.news_wrap .newsbox .post a{
  color: #e8939a;
  text-decoration: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news_wrap .newsbox .post a:hover{
  text-decoration: underline;
}
.news_wrap .newsbox .post .post_set{
  display: flex;
  align-items: center;
}
@media (min-width: 1200px){
  .news_wrap .en_ttl{
    min-width: 300px;
  }
  .news_wrap .newsbox .post a{
    -webkit-line-clamp: 1;
  }
}
@media (min-width: 992px){
  .news_wrap .newsbox .post{
    display: flex;
    align-items: center;
  }
  .news_wrap .newsbox .post .category{
    margin-right: 30px;
  }
}
@media (min-width: 768px) and (max-width: 1199px){
  .news_wrap .en_ttl{
    min-width: 280px;
  }
}
@media (min-width: 768px){
  #sect_news{
    z-index: 1;
  }
  .news_wrap{
    position: relative;
    display: flex;
    padding: 4%;
  }
  .news_wrap .newsbox{
    flex: 1;
  }
  .news_wrap .view_more{
    position: absolute;
    top: 120px;
    left: 4%;
    max-width: 220px;
  }
}
@media (max-width: 1199px){
  .news_wrap .newsbox .post a{
    -webkit-line-clamp: 2;
  }
}
@media (max-width: 991px){
  .news_wrap .newsbox .post .post_set{
    margin-bottom: .5rem;
  }
}
@media (max-width: 767px){
  .news_wrap .view_more{
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

/*================================
Instagramバナー
================================*/
.bnr_instagram{
  width: 100%;
  max-width: 300px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px){
  .bnr_instagram{
    margin-top: 30px;
  }
}
@media (max-width: 767px){
  .bnr_instagram{
    margin-top: 80px;
  }
}
@media (hover: hover) {
  .bnr_instagram img{
    transition: .3s;
  }
  .bnr_instagram:hover img{
    opacity: .85;
  }
}
/*================================
ACCESS
================================*/
#sect_access{
  position: relative;
  z-index: 0;
}

/*ACCESS background
================================*/
#sect_access::before{
  content: '';
  display: inline-block;
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/top/access_bg_2ring.png");
  aspect-ratio: 943 / 786;
  z-index: -1;
}
@media (min-width: 768px){
  #sect_access::before{
    width: 943px;
    top: -70px;
    left: -350px;
  }
}
@media (max-width: 767px){
  #sect_access::before{
    width: 525px;
    top: -20px;
    left: -220px;
  }
}

/*ACCESS content
================================*/
#sect_access .en_ttl{
  text-align: center;
}
#sect_access .view_more{
  margin-left: auto;
  margin-right: auto;
  display: block;
}
#gmap iframe{
  aspect-ratio: 53 / 27;
  width: 100%;
  height: auto;
}
#gmap p{
  margin-top: 1rem;
  margin-bottom: 0;
}
.medical_treatment ul{
  padding-left: 0;
  list-style: none;
  display: flex;
}
.medical_treatment ul li{
  margin-right: 2rem;
}
.medical_treatment ul li:last-child{
  margin-right: 0;
}
.medical_treatment .table{
  vertical-align: middle;
}
.medical_treatment .table tr th{
  font-weight: normal;
}
.medical_treatment .table tr th:first-child{
  padding-left: 0;
}
.medical_treatment .table tr td{
  text-align: center;
}
@media (min-width: 768px){
  .medical_treatment ul span{
    margin-right: 1rem;
  }
}
@media (max-width: 991px){
  .medical_treatment ul{
    margin-top: 2rem;
  }
}
@media (max-width: 767px){
  .medical_treatment ul,
  .medical_treatment .table{
    font-size: .95rem;
  }
  .medical_treatment ul span{
    display: block;
  }
  .medical_treatment .table>:not(caption)>*>*{
    padding: .5rem .25rem;
  }
  .medical_treatment .table tr th:first-child{
    width: 80px;
  }
}

/*================================
ONLINE
================================*/
.bnr_online{
  max-width: 400px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
@media (hover: hover) {
  .bnr_online img{
    transition: .3s;
  }
  .bnr_online:hover img{
    opacity: .85;
  }
}

/*================================
CONTACT
================================*/
#sect_contact{
  position: relative;
}

/*CONTACT background
================================*/
#sect_contact .contactbox{
  position: relative;
}
#sect_contact .contactbox::before{
  content: '';
  display: inline-block;
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/contact_bg_2ring.png");
  aspect-ratio: 985 / 727;
  z-index: -1;
}
@media (min-width: 768px){
  #sect_contact .contactbox::before{
    width: 985px;
    bottom: -60px;
    right: -580px;
  }
}
@media (max-width: 767px){
  #sect_contact .contactbox::before{
    width: 485px;
    bottom: -70px;
    right: -200px;
  }
}