﻿/*#fakeloader{background-color: #c2efd4;}*//*薄い緑バージョン*/
/*#fakeloader{background-color: #ede2dd;}*//*ベージュバージョン*/
/*バナー*/
.btn_container a {
    background-color: #04b954;
    box-shadow: 0px 2px 6px #3a8159;
    color: #fff;
    /*max-width: 300px;*/
    text-align: center;
    padding: 10px;
    font-size: 20px;
    border-radius: 5px;
    display: block;
    width: 98%;
    line-height: 1.5;
}
/* スマホ */
@media screen and (max-width: 667px){
    .btn_container a {width: 90%;}
}
/* 完全予約制・着替えあり ---------------------------*/
#annai > div{
    position: relative;
    z-index: 2;
    padding: 30px 0;
    margin-bottom: 80px;
    background-color: #fefaf4;
}
.dec{
    width: 45%;
    max-width: 300px;
    margin: 0 2%;
}

/* スマホ */
@media screen and (max-width: 667px){.dec{width: 90%;}}

/* CMS・下層ページ ----------------------------------*/
.cms_2-b .cate_box{width: 48%!important;}
#cms_2-b .cate_box{
    background-color: #e8fff2;
}

#cms_2-b #cate1 .box_img1, #cms_2-b #cate1 .box_img2{
    display: none;
}
/* タブレット */
@media screen and (max-width: 768px){
    .cms_2-b .cate_box{width: 90%!important;}
}
/* スマホ */
@media screen and (max-width: 667px){
    #page9 .box_wrap h3{letter-spacing: -0.05em;}
    #page9 .box_wrap p{letter-spacing: 0em;padding-left: 10px;}
}

/* メインイメージ -----------------------------------*/
.top header{z-index: 5;opacity: 1;}
.top header #pc_nav{display: block;}
.top header #pc_nav li a{text-shadow: 0px 0px 5px rgba(0,0,0,0.7);}

.catch {
    z-index: 3;
    position: absolute;
    bottom: 30px;
    left: 3%;
    /*transform: translate(-50%, -50%);*/
    width: 30%;
    max-width: 300px;
    animation-name:updownAnime;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;/* アニメーションを反転して繰り返す */
    animation-duration:1s; /* アニメーション時間 */
}

@keyframes updownAnime{
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(5px);
  }
}


/* 動画位置調整 */

#video{height: 100vh!important; height: auto;}
#video video{
    /*width: 100%!important;*/
	width: auto!important;
	height: 100%;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
    vertical-align: bottom;
}
@media screen and (min-width: 1630px){
    #video video{width: 100%!important; height: auto!important;}
}
@media screen and (max-width: 1280px){
    .top header #pc_nav{display: none;}
}
/* タブレット */
@media screen and (max-width: 768px){
    #main_img{    padding-top: 150px;}
    .catch{bottom: 9px;left: auto;right: 3px;}
    /* 動画位置調整 */
	#video {
		height: auto!important;
		width: 100%;
	}
	#video video {
		width: 100%!important;
		height: auto;
		position: relative;
		top: 0%;
		left: 0%;
		-ms-transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		transform: translate(0%,0%);
	}
}
/* スマホ */
@media screen and (max-width: 667px){
    #main_img{padding-top: 110px;}
    
}

/* トップページ -------------------------------------*/
.line:before{background-color: rgba(4, 185, 84, 0.3)!important;}
#contents1 .num{left: 50%;}
#contents1 .con_box{margin-top: 110px;}

#contents2 .num{left: 10%; transform: translate(0%,0);top: 55px;}
#contents2 .con_box{margin-top: 160px;}

#contents3_wrap:after{background-color: rgba(4, 185, 84, 0.5)!important;}

.more_btn{
    background-color: #81dca9;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
    box-shadow: 0px 3px 10px #cfe7da;
    border: 2px solid #fff;
}
.more_btn.txt_color3{
    color: #fff;
}
.more_btn:hover:after{background-color: rgba(43, 153, 91, 0.3)!important;}

/* タブレット */
@media screen and (max-width: 768px){
    .top header{background-color: #81dba7;}
    /* ▼タブレット時からスマホレイアウト-----------▼ */
    #contents1 .num, #contents2 .num{left: 50%; top: 0px; transform: translate(-50%,0);}
    #contents1 .con_img,#contents2 .con_img{
        margin: 80px auto 0;
        width: 60%!important;
    }
    #contents1 .con_box,#contents2 .con_box{
        width: 90%!important;
        margin: 30px auto 0px;
    }
    #contents1 .con_box .con_title, #contents2 .con_box .con_title{text-align: center;}
}
/* スマホ */
@media screen and (max-width: 667px){
    #intro{margin-bottom: 0px;}
    #contents1{padding-bottom: 30px;}
    #contents2{padding: 0px 0 60px;}
    #contents1 .con_img, #contents2 .con_img{width: 90%!important;}
}

/* 全体 ---------------------------------------------*/
#header{padding: 0 1.5%;}
#logo{max-width: 130px;}
header.scr_header #logo{max-width: 130px;}
.button_container span:nth-of-type(1){font-size: 12px;letter-spacing: 0em;}
.nav_menu_more:first-of-type a .icon:before{content: "\f086";}

.overlay.open .nav_menu_more a{background-color: #e3c5c5;}
.overlay.open .nav_menu_more a:hover{
    color: #fff;
    opacity: 0.7;
}
.overlay{background:rgba(4,185,84,0.9)!important;}
.back1:before{background-color: rgba(254,249,243,0.9)!important;}

.page_title_box h2{
    letter-spacing: -0.02em;
}
#page_right{height: 0;width: 0!important;}
#page_left{width: 100%!important;}
#page_title .page_title_box{background-color: #3a9964;}
#page_title:before{background-color: rgba(255, 255, 255, 0.5)!important;}

.linkStyle{
	color: #2b995b;
	text-decoration: underline;
	transition: all 0.5s;
}
.linkStyle:hover{
	color: #2b995b;
	opacity: 0.7;
	text-decoration: none;
}

.cate_wrap{
    margin-bottom: 0px;
}

footer.bg_color2{background-color: #fef9f3;}
#footer #logo2 a{max-width: 220px;}

/* タブレット */
@media screen and (max-width: 768px){
    .page_title_box{width: 380px;}
    #footer #logo2 a{    max-width: 190px;}
    .return a{left: -60px;}
}
/* スマホ */
@media screen and (max-width: 667px){
    #fakeloader .fl{width: 45%!important;}
    #logo{max-width: 90px;}
    header.scr_header #logo{max-width: 90px;}
    #page_title .page_title_box{background-color: rgba(58, 153, 100, 0.8);}
    
    #footer_txt span{letter-spacing: -0.03em;}
    #h1txt{letter-spacing: -0.02em;}
    .return a{left: -46px;}
}

/* 配色 ----------------------------------------------*/

.txt_color1,.hvr_txt_color1:hover{color: #04b954;} 
.txt_color2,.hvr_txt_color2:hover{color: #fdefe1;} 
.txt_color3,.hvr_txt_color3:hover{color: #2b995b;} 
/*.txt_color4,.hvr_txt_color4:hover{color: #eae4df;} */
/*.txt_color5,.hvr_txt_color5:hover{color: #f2ede7;}*/ 

.bg_color1,.hvr_bg_color1:hover{background-color: #04b954;}
.bg_color2,.hvr_bg_color2:hover{background-color: #fdefe1;}
.bg_color3,.hvr_bg_color3:hover{background-color: #2b995b;} 
/*.bg_color4,.hvr_bg_color4:hover{background-color: #eae4df;} */
/*.bg_color5,.hvr_bg_color5:hover{background-color: #f2ede7;}*/ 

.border_color1,.hvr_border_color1:hover{border-color: #04b954;}
.border_color2,.hvr_border_color2:hover{border-color: #fdefe1;}
.border_color3,.hvr_border_color3:hover{border-color: #2b995b;}
/*.border_color4,.hvr_border_color4:hover{border-color: #eae4df;}*/
/*.border_color5,.hvr_border_color5:hover{border-color: #f2ede7;}*/

/*テンプレート  -------------------------------------*/
.top_cms_box{
    position: relative;
    z-index: 2;
}
#page10 span.en{text-transform:none;}
body,.font_14,.font_12,.font_100per,.font_2dw,.font_2dw_tb,.font_2dw_sp,.font_14_sp{
    font-size: 18px;
    letter-spacing: 0.07em;
}
.font_2up{
    font-size: 20px;
    letter-spacing: 0.07em;
}
.font_4up{
    font-size: 22px;
    letter-spacing: 0.07em;
}
/* タブレット */
@media screen and (max-width: 768px){
    .page_title_box{width: 380px;}
    #contents1 .line:before, #contents2 .line:before{
        left: 50%;
        transform: translate(-50%, 0);
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    body,.font_14,.font_12,.font_100per,.font_2dw,.font_2dw_tb,.font_2dw_sp,.font_14_sp{letter-spacing: 0.02em;}
    .page_title_box{width: 300px;}
}

/*お客様の声---------------------------------------*/
#cms_2-b .box_item, #cms_2-b .box_img1, #cms_2-b .box_img2 ,.cms_2-b .box_item, .cms_2-b .box_img1, .cms_2-b .box_img2{position: relative;}
#cms_2-b .box_img1{margin-right: 40px;}
.cms_2-b .box_img1{margin-right: 4%;}
#cms_2-b .box_img2{margin-left: 40px;}
.cms_2-b .box_img2{margin-left: 4%;}
#cms_2-b .box_img1::after, #cms_2-b .box_img2::after, .cms_2-b .box_img1::after, .cms_2-b .box_img2::after{
    position: absolute;
    height: 33px;
    width: 87px;
    background-color: #fff;
    color: #434343;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}
#cms_2-b .box_img1::after, .cms_2-b .box_img1::after{content: "before";}
#cms_2-b .box_img2::after, .cms_2-b .box_img2::after{content: "after";}
@media screen and (max-width: 768px){
    #cms_2-b .box_img1, #cms_2-b .box_img2, .cms_2-b .box_img1, .cms_2-b .box_img2{
        width: 45%!important;
        margin: 0 0 20px;
    }
    #cms_2-b .box_img1, .cms_2-b .box_img1{margin-right: 2%;}
    #cms_2-b .box_img2, .cms_2-b .box_img2{margin-left: 2%;}
}
/* タブレット */
@media screen and (max-width: 768px){
    .cms_2-b .cate_box{margin-bottom: 10px;padding: 30px 30px 0px;}
    }
@media screen and (max-width: 667px){
    #cms_2-b .box_wrap, .cms_2-b .box_wrap{padding: 0px;}

    #cms_2-b .cate_box, .cms_2-b .cate_box{
        border-top: 5px solid #04b954;
        border-left: none;
        padding: 10px;
    }
    #cms_2-b .box_img1, #cms_2-b .box_img2, .cms_2-b .box_img1, .cms_2-b .box_img2{
        width: 100%!important;
        margin: 0 0 20px;
    }
    #cms_2-b .box_img1::after, #cms_2-b .box_img2::after, .cms_2-b .box_img1::after, .cms_2-b .box_img2::after {height: 30px;font-size: 15px;}
}

/* 閉じるボタン付き追従バナー */
.fix_banner{
	max-width: 230px;
	position: fixed;
	bottom: 10px;
	right: 60px;
	z-index: 4;
	transition: 0.5s;
}
.fix_banner .close_bt{
	position: absolute;
	bottom: 105px;
    right: 0px;
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	transition: 0.5s;
	background-color: #fff;
	border: solid 2px #54a374;
	z-index: 11;
	cursor: pointer;
}
.fix_banner .close_bt:hover{opacity: 0.7;}
.fix_banner .close_bt span{
	position: relative;
	display: block;
	width: 30px;
	height: 30px;
}
.fix_banner .close_bt span:before,.fix_banner .close_bt span:after{
	content: "";
	display: block;
	background-color: #54a374;
	height: 2px;
	width: 20px;
	position: absolute;
	top:50%;
	left: 50%;
}
.fix_banner .close_bt span:before{
	-ms-transform: translate(-50%,-50%) rotate(-45deg);
	-webkit-transform: translate(-50%,-50%) rotate(-45deg);
	transform: translate(-50%,-50%) rotate(-45deg);
}
.fix_banner .close_bt span:after{
	-ms-transform: translate(-50%,-50%) rotate(45deg);
	-webkit-transform: translate(-50%,-50%) rotate(45deg);
	transform: translate(-50%,-50%) rotate(45deg);
}
.fix_banner.close {opacity: 0;z-index: -1;
}
.fix_banner.close2{opacity: 0;z-index: -1;}

@media  screen and (max-width: 768px){
.fix_banner{max-width: 200px;right: 45px;}
.fix_banner .close_bt{bottom: 90px;right: 0px;}
}

@media  screen and (max-width: 667px){
.fix_banner{max-width: 170px;right: 35px;}
.fix_banner .close_bt{
	width: 25px;
	height: 25px;
	bottom: 75px;
	right: 0px;
}
.fix_banner .close_bt span{
	width: 25px;
	height: 25px;
}
}
/* 閉じるボタン付き追従バナー end */
/* アプリの閉じるボタン付き追従バナー */
.fix_banner_ap{
	max-width: 140px;
	position: fixed;
	bottom: 10px;
	right: 305px;
	z-index: 4;
	transition: 0.5s;
}
.fix_banner_ap .close_bt{
	position: absolute;
	bottom: 105px;
    right: 0px;
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	transition: 0.5s;
	background-color: #fff;
	border: solid 2px #54a374;
	z-index: 11;
	cursor: pointer;
}
.fix_banner_ap .close_bt:hover{opacity: 0.7;}
.fix_banner_ap .close_bt span{
	position: relative;
	display: block;
	width: 30px;
	height: 30px;
}
.fix_banner_ap .close_bt span:before,.fix_banner_ap .close_bt span:after{
	content: "";
	display: block;
	background-color: #54a374;
	height: 2px;
	width: 20px;
	position: absolute;
	top:50%;
	left: 50%;
}
.fix_banner_ap .close_bt span:before{
	-ms-transform: translate(-50%,-50%) rotate(-45deg);
	-webkit-transform: translate(-50%,-50%) rotate(-45deg);
	transform: translate(-50%,-50%) rotate(-45deg);
}
.fix_banner_ap .close_bt span:after{
	-ms-transform: translate(-50%,-50%) rotate(45deg);
	-webkit-transform: translate(-50%,-50%) rotate(45deg);
	transform: translate(-50%,-50%) rotate(45deg);
}
.fix_banner_ap.close {opacity: 0;z-index: -1;
}
.fix_banner_ap.close2{opacity: 0;z-index: -1;}

@media  screen and (max-width: 768px){
.fix_banner_ap{max-width: 120px;right: 255px;}
.fix_banner_ap .close_bt{bottom: 90px;right: 0px;}
}

@media  screen and (max-width: 667px){
.fix_banner_ap{max-width: 100px;right: 210px;}
.fix_banner_ap .close_bt{
	width: 25px;
	height: 25px;
	bottom: 75px;
	right: 0px;
}
.fix_banner_ap .close_bt span{
	width: 25px;
	height: 25px;
}
}
/* アプリの閉じるボタン付き追従バナー end */