@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap');

/* 1536 , 1530 × 735 ,1366 *//* 上記画面幅でも崩れていないか確認 */

/* 修正した場合→各項目の一番下に日付をコメントアウトして追記 */



@charset "utf-8";
/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/*
#loading{
    display: none;
}
*/
.font_com,.font_shippori,
.contact_btn a,
#contents_wrap #tab_buttons li,
.more_bt a,
#copyright,
.tel_bt a{
    font-family: 'Comfortaa', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#logo2{
    width:200px;
}
footer .bg_box{
    display: none;
}


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
#main_img {
    height: 50vh !important;
    margin-top: 66px;
}
#header {
    background-color: transparent;
}
#logo{
    padding: 10px 0 0 10px;
}
#header.active #logo img {
    max-width: 80px;
}
.button_container, .shop_link{
    height: 80px;
    width: 100px;
}
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
.button_container, .shop_link {
    height: 68px;
    width: 70px;
}
#logo, #nav_menu {
    position: fixed;
}
#logo {
    padding: 5px 0 0 5px;
    }
#nav_menu{
    top:5px;
    right:5px;
}
#overlay .menu_box p:not(tel_bt){
    letter-spacing:0;
}
.overlay .sns_links li {
    max-width: 30px;
}
}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#main_img::before{
    position:absolute;
    content:"";
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:rgba(0,0,0,0.15);
    pointer-events:none;
    z-index:2;
}
.catch_copy{
    z-index:3;
}
.salon_name{
    color: #fff;
    font-size: 11rem;
    line-height: 1;
    margin-bottom: -220px;
}
.passing{
    font-size:2rem;
    /*font-weight:bold;*/
    line-height: 1.5;
}

.passing .passing-bar {
    position: relative;
    display: inline-block;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.passing .passing-bar:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background: #E6E6E6;
}
.passing.move .passing-bar:before {
    -webkit-animation: passing-bar 1s ease 0s 1 normal forwards;
    animation: passing-bar 1s ease 0s 1 normal forwards;
}
.passing .passing-txt {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.passing.move .passing-txt {
    -webkit-animation: passing-txt 0s ease .5s 1 normal forwards;
    animation: passing-txt 0s ease .5s 1 normal forwards;
    background-color: transparent;
    color: #fff;
}
@-webkit-keyframes passing-bar{
	0% {left: 0;right: auto;width: 0;}
	50% {left: 0;right: auto;width: 100%;}
	51% {left: auto;right: 0;width: 100%;}
	100% {left: auto;right: 0;width: 0;}
}
@keyframes passing-bar{
	0% {left: 0;width: 0;}
	50% {left: 0;width: 100%;}
	51% {left: 0;width: 100%;}
	100% {left: 100%;width: 0;}
}
@-webkit-keyframes passing-txt{
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes passing-txt{
	0% { opacity:0; }
	50% { opacity:0; }
	100% { opacity:1; }
}

/* 基本 */
.passing {
  overflow: hidden;
  margin-bottom: 10px;
}

/* 1行目 */
.passing.move .passing-bar:before {
  animation: passing-bar 1s ease forwards;
}
.passing.move .passing-txt {
  animation: passing-txt 0s ease .5s forwards;
}

/* 2行目（少し遅らせる） */
.passing.delay.move .passing-bar:before {
  animation-delay: 1.2s;
}
.passing.delay.move .passing-txt {
  animation-delay: 1.7s;
}

/* 3行目（さらに遅らせる） */
/*
.passing.delay2.move
*/
.sub_copy{
  animation: fadeIn 3s ease 4.2s forwards;
  opacity: 0;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/* ローディング後にじわっと出現 */
.load-blurTrigger{
    opacity: 0;
}
.load-blur{
  animation-name:load-blurAnime;
  animation-duration:2s;
  animation-fill-mode:forwards;
}

@keyframes load-blurAnime{
  from {
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0;
  }

  to {
  filter: blur(0);
  transform: scale(1);
  opacity: 0.2;
  }
}

#nav_menu,
#contents_links .box a,
#contents_wrap .con_img figure{
    box-shadow:
  0 4px 8px rgba(0, 0, 0, 0.08),
  0 16px 32px rgba(0, 0, 0, 0.12);
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
.salon_name{
    font-size:8rem;
}
.passing {
    font-size: 2rem;
    line-height: 1.3;
}

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
.catch_copy{
    width:100%;
    top: 67%;
}
.salon_name {
    font-size: 4.5rem;
    margin-bottom: -130px;
}
.passing {
    font-size: 1.5rem;
    font-weight:normal;
}

}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#intro .right{
    margin-bottom: -20%;
}
.intro2{
    margin-left: 7%;
    margin-right: auto;
    margin-top: 10%;
}
#contents_wrap .con_item{
    display:none;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
#logo img {
    max-width: 80px;
}
#main_img{
    margin-top:0;
}
#intro .right{
    margin-left: auto;
    margin-right: 5%;
}
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
#intro .right{
    margin-left: auto;
    margin-right: 0;
}
.intro2 {
    margin-left: -1%;
}
}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.insta .contact_btn a{
    color:#fff;
    background: #741AFA;
background: linear-gradient(139deg,rgba(116, 26, 250, 1) 0%, rgba(255, 48, 196, 1) 33%, rgba(255, 93, 33, 1) 73%, rgba(255, 215, 53, 1) 100%);
    font-size: 2rem;
} 

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){

}