@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

/*container*/
@media (max-width:575.98px){
.container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{
max-width:500px;
}
}
@media (max-width:767.98px){
.container-xs{
max-width:500px;
}
}
@media (min-width:992px){
.container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{
max-width:924px;
}
}

/*BASE*/
body{
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
font-size:15px;
color:#333333;
letter-spacing:.03rem;
-webkit-font-smoothing: antialiased;
line-height:1.9;
}
h1,h2,h3,h4,h5{
margin:0;
padding:0;
}
h1{
bottom:75px;
font-size:11px;
line-height: 1.7;
}
h2,h3,h4,h5{
line-height:1.6;
}
p{
margin-bottom:0;
}
ul li{
list-style:none;
}
a{
color:#1872CC;
text-decoration:none;
}
.a-link{
padding-top: 70px;
margin-top:-70px;
}

.am-r:hover img {
transform: translatex(0.4rem);
}
.opacity:hover{
-webkit-transition: 0.5s;
transition: 0.5s;
opacity:0.8;
}
.font-weight-700{
font-weight:700;
}
.font-weight-600{
font-weight:600;
}
.font-weight-500{
font-weight:500;
}
.lh-xl{
line-height:2.2;
}
.lh-x{
line-height:2;
}
.title-hr{
width:60px;
margin-right:auto;
margin-left:auto;
border-color:#66CA97;
}
.title-xs{
font-size:15px;
}
.title-l{
font-size:21px;
}
.title-m{
font-size:20px;
}
.title-mm{
font-size:22px;
}
.size-xs{
font-size:14px;
}
.size-s{
font-size:16px;
}
.size-m{
font-size:16px;
}
.text-justify{
text-align:justify;
}

hr{
opacity:1;
border-top:1px solid #bbbbbb;
}
hr.border-black{
border-color:#333;
}
hr.border-dotted{
  border-color:#ccc;
  border-style:dotted;
  }
ul{
margin:0;
padding:0;
}
.justify{
text-align: justify;
}

@media (min-width: 576px){
h1{
bottom:50px;
}
.tel{
font-size:29px;
}
.lh-xl{
line-height:2.6;
}
.title-m{
font-size:22px;
}
.title-mm{
font-size:22px;
}
.a-link{
padding-top: 100px;
margin-top:-100px;
}
.size-m{
font-size:17px;
}
.title-l{
font-size:25px;
}
}

/*カラー*/
.bg-gray{
background:#f7f7f7;
}
.bg-grad{
background: linear-gradient(90deg, rgb(233, 244, 193, 0.3), rgb(129, 202, 192, 0.3));
}
.text-green{
color:#66CA97;
}
.text-gray{
    color:#999;
    }
.text-black,.text-black a{
color:#000000;
}
.text-red{
color:#FF5353;
}
.text-white,.text-white a{
color:#fff;
}
.border-white{
border:1px solid #fff;
}
@media (max-width:767.98px){
#top-about .border-white{
  border:0px solid #fff;
  }
  #top-about img{
    border:1px solid #fff;
    }
}

/*ボタン*/
.btn{
padding:0;
border-radius: 100vh;
font-weight:500;
}
a.btn-border{
border:1px solid #66CA97;
color:#5BB283;
width:100%;
transition:0.5s;
}
a.btn-border:hover{
  border:1px solid #21a55e;
  color:#6fdba1;
  }

a.btn-grad{
    display:block;
    position:relative;
    z-index:0;
    box-shadow: 0 1px 2px rgba(128,186,166,0.6);
    border-radius: 100vh;
    border:0;
  }
  a.btn-grad:before{
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    z-index:-1;
    left:0;
    transition:0.5s;
    border-radius: 100vh;
    background: linear-gradient(90deg, rgb(255, 128, 77), rgb(239, 156, 49));
  }
  a.btn-grad:after{
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    z-index:-2;
    left:0;
    background: linear-gradient(90deg, rgb(239, 156, 49), rgb(255, 128, 77));
    border-radius: 100vh;
  }
  a.btn-grad:hover:before{
    opacity:0;
  }

a.btn-grad:hover {
background: rgb(255, 128, 77);
box-shadow: 0 1px 0px rgba(128,186,166,1);
}

a.btn-green:before{
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    z-index:-1;
    left:0;
    transition:0.5s;
    border-radius: 100vh;
    background: linear-gradient(90deg, #2ed5a3,#76e1b4);
  }
  a.btn-green:after{
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    z-index:-2;
    left:0;
    background: linear-gradient(90deg, #76e1b4, #2ed5a3);
    border-radius: 100vh;
  }
  a.btn-green:hover {
    background: #2ed5a3;
    }

.main-sub{
height:42px;
line-height:40px;
max-width:250px;
font-size:14px;
}
.main-btn{
max-width:460px;
height:60px;
line-height:60px;
}


/*ナビバー*/
.navbar{
padding:0;
box-shadow: 0 2px 4px rgba(0,0,0,.3);
background:rgba(255,255,255,0.95);
line-height:1.5;
}
.logo img{
width:100px;
}
.navbar ul li{
text-align:center;
width:100%;
}
.navbar ul li a{
font-size:16px;
}
.navbar ul li a span{
font-size:11px;
letter-spacing:0;
}

.navbar ul li a:hover{
color:#666;
-webkit-transition: 0.5s;
transition: 0.5s;
}

.navbar small{
font-size:12px;
}
.navbar-contact{
width:100px;
height: 36px;
line-height: 36px;
font-size:14px
}
.navbar-contact.line{
width:40px;
height:40px;
line-height: 40px;
}


@media (min-width:576px){
.logo img{
width:142px;
}
.header-tel_sp{
width:auto;
}
.navbar ul li a{
font-size:15px;
}
.navbar-contact{
  width:140px;
  height: 42px;
line-height: 42px;
font-size:15px
  }
  .navbar-contact.line{
    width:42px;
  }
}
@media (min-width:768px){
.navbar ul li{
width:auto;
padding-right: 10px;
padding-left: 10px;
}
}
@media (min-width:992px){
.navbar-collapse{
border-top:0px solid #000;
}
}
@media (min-width:1200px){
.navbar ul li{
padding-right: 15px;
padding-left: 15px;
}
.navbar-contact{
width:160px;
}
.navbar-contact.line{
width:160px;
}
}
#input{
display: none;
}
.header-close-button{
margin: 0 auto;
width:60px;
display: flex;
align-items: center;
justify-content: center;
}
.header-close-button span, .header-close-button span:before, .header-close-button span:after {
position: relative;
height: 2px;
width: 28px;
background: #cccccc;
display: block;
content: '';
}
.header-close-button span:before{
top:-12px;
}
.header-close-button span:after{
bottom: -11px;
}
#input:checked ~ .header-close .header-close-button span:before{
top: 0;
transform: rotateZ(-90deg);
}
#input:checked ~ .header-close .header-close-button span{
top: 0;
transform: rotateZ(45deg);
}
#input:checked ~ .header-close .header-close-button span:after{
top: 0;
transform: rotateZ(-45deg) scale(0);
}
.header-close-button{
width:60px;
height: 60px;
}
@media (min-width:576px){
.header-close-button{
width:70px;
height: 75px;
}
}

/* page-title */
#page-title{
height:170px;
margin-top:60px;
background:rgba(109,209,164,0.5);
}

#page-title h2{
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2)
  }

.page-title_img {
width:80%;
margin-left:auto
}

.page-title_img:before {
content:"";
display: block;
padding-top: 170px;
}

.product_img:before {
background:url("img/product-top.jpg") center center;
background-size:130%
}

.o2_img:before {
background:url("img/o2-top.jpg") center center;
background-size:100%
}

.facegym_img:before {
background:url("img/fg-top.jpg") center center;
background-size:140%
}

.salon_img:before {
background:url("img/salon-top.jpg") center center;
background-size:170%
}

.self_img:before {
background:url("img/self-top.jpg") center center;
background-size:120%
}

.menu_img:before {
background:url("img/menu-top.jpg") center center;
background-size:125%
}

.page-title_img h2{
position:absolute;
z-index:1;
left:-25%;
top:30%;
}

#page-title h2{
padding-left:10%;
font-size:16px;
}
#page-title h2 span{
font-size:27px;
}
#salon{
padding:30px 0px 0px;
}
#products{
padding:40px 0px 80px;
}
#facegym{
padding:30px 0px 60px;
}
#oxbox{
padding:30px 0px 60px;
}
#self{
padding:30px 0px 60px;
}
#menu{
padding:30px 0px 60px;
}
@media (min-width:576px){


.salon_img:before {
background-size:100%
}
#salon{
padding:40px 0px 0px;
}
#facegym{
padding:60px 0px 80px;
}
#oxbox{
padding:60px 0px 60px;
}
#self{
padding:60px 0px 60px;
}
#menu{
    padding:60px 0px 80px;
}

#page-title{
  margin-top:76px;
  }
}

@media (min-width:768px){
  .page-title_img:before {
    padding-top: 250px;
    }
  #page-title{
    height:250px;
    }
    #page-title h2{
      font-size:18px;
      }
      #page-title h2 span{
      font-size:42px;
      }
      .product_img:before {
        background-size:100%
        }
        
        .salon_img:before {
        background-size:100%
        }
        .facegym_img:before {
          background-size:100%
          }
        
        .self_img:before {
        background-size:100%
        }
        
        .menu_img:before {
        background-size:100%
        }
.f-content1{
background:url(img/fg-back1.jpg) left center no-repeat;
background-size:45%;
}
.f-content2{
background:url(img/fg-back2.jpg) right center no-repeat;
background-size:45%;
margin-right:auto;
}
.f-content3{
background:url(img/fg-back3.jpg) left center no-repeat;
background-size:45%;
}
.f-content-height{
height:360px;
}
}

@media (min-width:992px){
#page-title{
height:280px;
}
.page-title_img h2{
  left:-20%;
  }
.page-title_img:before {
padding-top: 280px;
}
}

/* トップページ */
#top,#top .d-flex{
height:340px;
margin-top:60px;
}
#top img{
width:210px;
}
#top{
background:url(img/top-back.jpg) center center;
background-size:cover;
}
#top-about{
margin-top:-50px;
}
@media (max-width:767.98px){
.img_owner{
max-width:210px;
}
}
@media (min-width:576px){
#top,#top .d-flex{
height:500px;
margin-top:76px;
}
#top-about{
margin-top:-100px;
}
#top img{
width:280px;
}
}

@media (min-width:992px){
#top img{
width:340px;
}
#top,#top .d-flex{
height:600px;
}
#top-about{
margin-top:-120px;
}
}

/* oxbox */
.accordion-button{
padding:10px 15px;
border-bottom:1px solid #B6EFD0!important;
color:#000;
}

.accordion-button::after {
background-color:#98E5BB;
border-radius: 100vh;
background-size:12px;
background-position: center center;
}

.accordion-button:not(.collapsed) {
color:#000;
background:none;
box-shadow: none;
border-bottom:1px solid #7ee3ab!important;
}
.accordion-button:focus {
box-shadow: none;
background:none;
}

/* self */
.back-bg{
height:350px;
margin-top: -280px;
z-index:-1;
position: relative;
}
@media (min-width:576px){
.back-bg{
margin-top: -280px;
}
}
/* facegym */
.bi-logo{
width:190px;
}
.number-img{
  width:80px;
  }
.step-pd{
padding:26px 0px;
}
.facegym-logo{
width:160px;
}
table.menu-table td,table.menu-table th{
border-bottom:1px dotted #ccc;
padding:15px 10px;
line-height:2;
}
table.menu-table{
max-width: 780px;
margin:0 auto;
}
table.menu-table th{
font-size:16px;
font-weight:400;
color:#000;
}
table.menu-table td.price{
font-size:16px;
font-weight:500;
}
@media (max-width:767.98px) {
.number-img{
width:70px;
top:20px;
left:0;
}
table.menu-table{
border:1px solid #ccc;
}
table.menu-table th,table.menu-table td{
width:100%;
display:block;
}
table.menu-table th{
background:#e8f9f1;
border-bottom:0px dotted #ccc;
}

table.menu-table tr td:last-child{
border-bottom:1px solid #ccc;
}
table.menu-table tr:last-child td{
border-bottom:0px solid #ccc;
}
table.menu-table td.price{
padding:20px 10px;
}
table.menu-table td,table.menu-table th{
padding:10px 10px;
line-height:1.6;
}
}

@media (min-width:576px) {
.facegym-logo{
width:213px;
}
.bi-logo{
  width:250px;
  }
}

/* menu */
mark{
padding:2px 8px;
background:#FF5353;
color:#fff;
font-size:13px;
font-weight:500;
}
.fullmenu{
width:80px;
}

@media (min-width:576px) {
.fullmenu{
width:120px;
}
  }

/* salon */
.salon-logo{
width:160px;
}
@media (min-width:768px) {
  .salon-logo{
    width:220px;
    }
}
/* footer */
#footer-contact{
background:url(img/contact-back.jpg) center bottom;
background-size:cover;
}
#footer-contact .btn{
max-width:320px;
height:60px;
line-height:60px;
}
#salon-reserve .btn{
  max-width:320px;
  height:60px;
  line-height:60px;
  }
footer{
font-size:14px;
}
footer ul li{
font-size:14px;
letter-spacing:-0.5px;
}
footer p{
line-height:1.7;
}
footer ul li a{
color:#333333;
}
footer ul li a:hover{
color:#888;
}
.footer-logo{
width:130px;
}
footer hr{
border-top:1px solid #bbbbbb;
height:2px;
}
.copy{
font-size:11px;
margin-top:60px;
}
@media (min-width:576px) {
#footer-contact .btn{
max-width:350px;
}
#salon-reserve .btn{
  max-width:350px;
  }
}
@media (min-width:768px) {
.copy{
margin-top:45px;
}
}
@media (min-width:992px) {
footer ul li{
letter-spacing:0px;
}
}


#myCarousel .carousel-indicators {
position: static;
margin-top: 0px
}

#myCarousel .carousel-indicators>li {
width: auto;
}

#myCarousel .carousel-indicators li img {
display: block;
opacity: 0.5
}

#myCarousel .carousel-indicators li.active img {
opacity: 1
}

#myCarousel .carousel-indicators li:hover img {
opacity: 0.75
}

.carousel-indicators{
margin-right:0px;
margin-left:0px;
}
/* ローディング画面 アニメーション */
.scroll-top{
animation: topin 2s forwards;
}
@keyframes topin {
0% {transform: translatey(230px);}
100% {transform: translatey(0px);}
}
.scroll{
opacity: 0;
visibility: hidden;
transform: translatey(60px);
transition: all 1s;
}
@media (max-width:767.98px) {
.scroll-sp{
opacity: 0;
visibility: hidden;
transform: translatey(60px);
transition: all 1s;
}
}
.js-fade{
opacity: 1;
visibility: visible;
transform: translatex(0px);
}
.open-animation{
animation: fadein 1.5s forwards;
}

@keyframes fadein {
0% {opacity: 0.3}
100% {opacity: 1}
}
#logo_loader {
display: block;
position: fixed;
top: 0px;
left: 0;
width: 100%;
height: 100vh;
z-index: 1100;
background-color: #fff;
}
#logo_loader .f_logo {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 230px;
height: 249px;
text-align: center;
}
#logo_loader .f_logo img {
width: 100%;
height: auto;
animation: loadLogo 1s;
}
@keyframes loadLogo {
0% {opacity: 0}
50% {opacity: 1;z-index: 0;}
}
#logo_loader.open {
animation-name: slideOut;
animation-fill-mode: forwards;
animation-duration: 0.5s;
animation-delay: 1.3s;
}
@keyframes slideOut {
0% {opacity: 0.7}
100% {opacity: 0;z-index: 0;}
}
@media (max-width: 575.98px){
#logo_loader .f_logo {
width: 180px;
height: 195px;
}
#logo_loader .f_logo img {
margin-top: -30px;
  }
}