@charset "utf-8";


/* top
-------------------------------------------------*/

/*	hd
------------------------------------------*/

#page{
	background:none;
}


.movie{
	position:relative;
	width:100%;
	height:auto;
	padding-top:45%;
	overflow: hidden;
	margin:0 auto calc(8vw + 8vh);
}
	.movie video{
		position:absolute;
		left:50%;
		top:0;
		width:100%;
		height:auto;
		transform:translateX(-50%);
	}
	.m_mvcatch{
		position:absolute;
		left:4%;
		top:6%;
		height:50%;
		width:auto;
		z-index: 1;
	}
	.m_mvcatch img{
		height:100%;
		width:auto;
	}
	
/*@media(max-width: 865px) {*/
@media(orientation: portrait) {
	.movie{
		padding-top:90%;
	}
	.movie video{
		left:0;
		top:0;
		transform:none;
	}
}

.movie #i_play,
.movie #i_sound{
	position:absolute;
	display:block;
	right:60px;
	bottom:0;
	width:50px;
	height:50px;
	background-image:url(/img/i_videocontrols.png);
	background-position:0 0;
	z-index:200;
	cursor:pointer;
}
	.movie #i_play:hover,
	.movie #i_sound:hover{
		animation-duration: .4s;
		animation-name: jello;
		transform-origin: center;
	}
	.movie #i_play.i_pause{
		background-position:200px 0;
	}
	.movie #i_sound{
		right:5px;
		background-position:150px 0;
	}
	.movie #i_sound.i_sound-sml{
		background-position:100px 0;
	}
	.movie #i_sound.i_sound-max{
		background-position:50px 0;
	}
@media(max-width: 559px) {
	.movie #i_play,
	.movie #i_sound{
		transform:scale(.8);
	}
}




.top-content{
	width:min(94%,1370px);
	padding-bottom:20vh;
	margin:0 auto;
}

.hope{
	width:min(90%,720px);
	text-align: center;
	margin:0 auto calc(10vw + 10vh);
}
	.hope .img_leafs{
		margin:0 auto 8vh;
	}
	.hope .m_dokoniitemo{
		margin:0 auto 5vh;
	}
	.p_concept{
		display:none;
		font-size:1.1rem;
		margin:3rem auto 0;
	}
@media(max-width: 500px) {
}




.ft_item{
	position:relative;
	display:flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	justify-content: space-between;
	
	margin:0 auto 20vh;
}
	.ft_item:not(:last-child)::after{
		position:absolute;
		display:block;
		content:'';
		left:0;
		bottom: -11vh;
		width:100%;
		height:2.2vh;
		background-image:url("/img/2/bd_leaf.svg");
		background-repeat: no-repeat;
		background-position: right top;
		background-size: auto 100%;
	}
	
	.ft_item > div{
		position:relative;
		width:25%;
	}
	.ft_item > div.img{
		width:min(70%,965px);
	}
	.ft_item > div.img .slidewrap{
		width:100%;
		overflow:hidden;
	}

	.slidewrap{
		position:relative;
		width:100%;
	}
		.slidewrap:after{
			content: "";
			display: table;
			clear: both;
		}
		.slidewrap > li{
			display:block;
			float:left;
		}
		.slidewrap .slick-dots{
			bottom: 1rem;
			z-index:1;
		}
@media(max-width: 1024px) {
	.slidewrap{
		width:95%;
	}
}

	
	.ft_item > div.img h2{
		position:absolute;
		left:6%;
		top:-1vw;
		padding:.8rem .8rem;
		writing-mode: vertical-rl;
		font-size:clamp(18px,2.5vw,32px);
		font-weight:bold;
		line-height: 1;
		letter-spacing: 0.3vh;
		background:#fff;
		z-index: 1;
	}
	
	.ft_item p{
		font-size:1rem;
		line-height:1.6;
		margin:0 auto calc(.7vw + .7vh);
	}
	.ft_item p.caption{
		padding-top:calc(6vw + 3vh);
		color:var(--color-green);
		font-size:clamp(22px,4vw,36px);
		line-height:1.3;
		white-space: pre;
		margin:0 auto calc(1.7vw + 1.7vh);
	}
	.ft_item .i_chara{
		position:absolute;
		right:12vw;
		top:-5vw;
		width:auto;
		height:clamp(50px,12vw,170px);
	}
	

.ft_item:nth-of-type(even){
	flex-flow:row-reverse nowrap;
}
	.ft_item:nth-of-type(even)::after{
		background-position: left top;
	}
	.ft_item:nth-of-type(even) > div.img h2{
		left:87%;

	}
	.ft_item:nth-of-type(even) .i_chara{
		left:2vw;
		top:-5vw;
	}
	

@media(max-width: 560px) {
	.ft_item{
		display:block;
	}
	.ft_item > div{
		width:100%;
		margin:0 auto calc(1.5vw + 1.5vh);
	}
	.ft_item > div.img{
		width:100%;
	}
	
	
	.ft_item p.caption{
		padding-top:0 !important;
		padding-left:27%;
		font-size:clamp(22px,5vw,36px);
	}

	
	.ft_item .i_chara,
	.ft_item:nth-of-type(even) .i_chara{
		right:inherit;
		left:5%;
		top:0;
		height:clamp(50px,16vw,170px);
	}
	
	.m_itsumo br:nth-of-type(1){
		display:none;
	}
}




.bn_insta{
	display:flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-between;
	padding:.7rem;
	background:var(--color-lightgrn);
	border-radius: 4rem 0;
}
	.bn_insta .bn_txt{
		width:33%;
		text-align: center;
	}
	.bn_insta .bn_img{
		width:67%;
		border-radius: 0 0 3.3rem;
		overflow: hidden;
	}
	.bn_insta .bn_txt p{
		width:min(70%,224px);
		margin:0 auto 1rem;
	}
@media(max-width: 560px) {
	.bn_insta{
		display:block;
		width:min(90%,480px);
		margin:auto;
	}
	.bn_insta .bn_txt{
		width:100%;
		padding:1rem 0 1.5rem;
	}
	.bn_insta .bn_img{
		width:100%;
	}
	.bn_insta .bn_txt p{
		width:min(40%,224px);
	}
}




.d_blog{
	position:relative;
	margin:0 auto 5rem;
}
	.m_blog{
		position:relative;
		margin-bottom:.7rem;
	}
	.m_blog span{
		display: inline-block;
		color:var(--color-green) !important;
		font-size:2.2rem;
		font-weight:700;
		line-height: 1;
		transform:translateY(-50%);
	}
	.m_blog img{
		display:inline-block;
		height:min(16vw,75px);
		width:auto;
		margin:0 14px 0 .5vw;
	}
	
@media(max-width: 560px) {
	.m_blog{
		text-align: center;
	}
	.m_blog img{
		margin:0 14px 0 0;
	}
}

	.d_blog .slider{
		width:100%;
		margin:0 auto;
	}
	.d_blog .slider:after{
		content: "";
		display: table;
		clear: both;
	}
	.d_blog .slider .sd_item{
		float:left;
		width:25%;
		height:16rem;
		min-height:260px;
		margin:0 .2%;
		background:var(--color-yellow);
		border-radius:2rem 0;
		overflow: hidden;
	}
	.d_blog .slider .sd_item a{
		display:block;
		width:100%;
		color:#000;
		font-weight:bold;
		line-height:1.5
	}
	.d_blog .slider .sd_item a .img{
		position:relative;
		width:100%;
		min-height:18vh;
		overflow:hidden;
		background-repeat:no-repeat;
		background-position:center center;
		background-size:cover;
		margin:0 0 .5rem;
	}
	.m_blog:hover,
	.d_blog .slider .sd_item:hover{
		animation-duration: .8s;
		animation-name: headShake;
		transform-origin: center;
	}
	.d_blog .slider .sd_item a time,
	.d_blog .slider .sd_item a p{
		padding:0 .8rem .6rem;
	}
	.d_blog .slider .sd_item a time{
		font-size:.8rem;
	}

@media(max-width: 720px) {
	.d_blog .slider .slick-prev{
		left: -5px;
	}
	.d_blog .slider .slick-next{
		right: -5px;
	}
}




.d_rm{
	display:flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}
	.rm_item{
		position: relative;
		width:31%;
		background:var(--color-lightgrn);
		overflow: hidden;
		border-radius: 3rem 0;
	}
	.rm_item a > div{
		position:relative;
		padding:3vh 2.3vw 1vh;
		height:21vh;
		background-image:url(/img/2/i_arrow_s.svg);
		background-size:11%;
		background-position: 96% 89%;
		background-repeat: no-repeat;
	}
	.rm_item p.ttl{
		width:100%;
		color:#fff;
		font-size:clamp(18px,3vw,30px);
		line-height: 1.2;
		margin:0 0 1.5vh;
	}
	.rm_item .lead{
		display:block;
		color:#fff;
		font-size:1.7vh;
		font-weight: bold;
		line-height: 1.5;
		margin:0 0 1.5vh;
	}
	.rm_item .em_yellow{
		display: inline-block;
		padding:1px 1rem 2px;
		text-align: center;
		color:#000;
		font-size:1.8vh;
		font-weight:bold;
		background: var(--color-yellow);
		border-radius: 2rem;
	}
	.rm_item img.i_camera{
		position:absolute;
		display:block;
		right:1.8vw;
		top:2vh;
		width:min(26%,80px);
	}
	.rm_item img{
		display:block;
		width:100%;
		height:auto;
	}

@media(max-width: 550px) {
	.d_rm{
		display:block;
	}
	.rm_item{
		width:min(90%,480px);
		margin:0 auto 3vh;
	}
	.rm_item a{
		display:flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-between;
	}
	.rm_item a > div{
		width:100%;
		padding:3vh 2.3vw 1vh;
		height:19vh;
		background-size:9%;
		margin:auto;
	}
	.rm_item a > div br{
		display:none;
	}
	.rm_item p.ttl{
		font-size:clamp(28px,5vw,38px);
	}
	.rm_item img.i_camera{
		width:min(26%,80px);
	}
	.rm_item img.i_camera{
		width:min(13%,80px);
		right:inherit;
		top:inherit;
		left:3.8vw;
		bottom:2vh;
	}
	.rm_item a > img{
		width:50%;
	}
}



.d_salon{
	width:min(100%,810px);
	background:var(--color-yellow);
	border-radius: 4rem 0;
	overflow: hidden;
	margin:0 auto;
}
	.d_salon a{
		display:flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-around;
		padding:2rem 0;
	}
	.sl_hd{
		width:35%;
		text-align: center;
	}
	.sl_sched{
		width:50%;
	}
	.sl_hd .i_kosodatesalon{
		width:min(80%,250px);
		margin:0 auto 2vh;
	}
	.sl_hd p{
		color:var(--color-green);
		font-size:1rem;
		line-height: 1.3;
		font-weight: bold;
	}
	.sl_sched div{
		display:block;
		padding:2vh 0;
		/*border-bottom: 4px dotted var(--color-green);*/
	}
	.sl_sched a:first-child{
		padding:0 0 2vh;
	}
	.sl_sched p{
		color:#000;
		line-height: 1.5;
	}
	.sl_sched p.ttl{
		font-size:1.1rem;
		font-weight: bold;
	}

@media(max-width: 560px) {
	.d_salon a{
		display:block;
	}
	.sl_hd{
		width:100%;
		margin-bottom:2rem;
	}
	.sl_sched{
		width:100%;
		padding:0 2rem;
	}
	.sl_hd .i_kosodatesalon{
		width:min(80%,210px);
	}
}




.d_rm2{
	display:flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	width:min(80%,800px);
	text-align: center;
	margin:0 auto;
}
	.d_rm2 > div{
		width:30%;
		height:8vh;
		background:var(--color-lightgrn);
		border:2px solid var(--color-lightgrn);
		border-radius: 1.4rem 0;
		overflow: hidden;
	}
	.d_rm2 > div.bn_nozomi{
		background:#fff;
	}
	.d_rm2 > div.bn_nozomi .i_nozomi{
		width:min(60%,125px);
		height:auto;
	}
	.d_rm2 > div > a{
		display:flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: center;
		width:100%;
		height:100%;
		padding:1rem .1rem;
		color:#fff;
		font-size:clamp(17px,1.7vw,24px);
		line-height:1.1;
		font-weight: bold;
	}

@media(max-width: 767px) {
	.d_rm2{
		width:min(100%,800px);
	}
	.d_rm2 > div{
		width:31%;
		height:8vh;
	}
}
@media(max-width: 560px) {
	.d_rm2 > div{
		width:31%;
		height:6vh;
	}
	.d_rm2 > div > a{
		padding:.6rem .1rem;
	}
}
@media(max-width: 500px) {
	.d_rm2{
		display:block;
		width:min(80%,500px);
	}
	.d_rm2 > div{
		width:min(100%,450px);
		height:8vh;
		margin:0 auto 2vh;
	}
	.d_rm2 > div.bn_nozomi .i_nozomi{
		width:min(60%,100px);
	}
}








.fx_ul::after{
    display:block;
    position:absolute;
    content:'';
    left:50%;
    bottom:-.8rem;
    width:0;
    height:3px;
    background:rgba(255 240 0);
    transform:translateX(-50%);
    transition:.3s;
}
    .fx_ul.hover::after{
        width:100%;
	}


.btn_leaf-line{
	text-align: center;
}
	.btn_leaf-line span{
		display:inline-block;
		padding:0.7rem 1rem;
		color:var(--color-green);
		font-size:1rem;
		letter-spacing: .05rem;
		background-color:#fff;
		border:1px solid var(--color-green);
		border-radius: 1.3rem 0;
		transform-origin: center;
		transition:.3s;
		animation-timing-function: ease-in;
	}
	.btn_leaf-line.hover span{
		padding:0.7rem 2rem;
		background-color:var(--color-yellow);
	}



.btn_morelink{
	text-align: center;
}
	.btn_morelink a{
		position:relative;
		display:flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: flex-start;
	}
	.btn_morelink span{
		display:inline-block;
		padding:0 .3rem 1.2vh;
		color:var(--color-green);
		font-size:1rem;
		line-height: 1;
		letter-spacing: .05rem;
		white-space: nowrap;
		background-color:#fff;
		border:1px solid var(--color-green);
		border-width:0 0 1px 0;
		transform-origin: center;
		transition:.3s;
	}
	.btn_morelink a img{
		display: inline-block;
		width:clamp(50px,6vw,80px);
		height:80px;
		margin-left:1vw;
		transform-origin: center;
		transition:.3s;
	}
	.btn_morelink a.hover span{
		padding:0 .8rem 1.2vh;
	}
	.btn_morelink a.hover img{
		animation: circle .4s ease-in 0s 1 normal forwards;
	}
	@-webkit-keyframes circle{
		0%		{transform:scale(1)}
		100%	{transform:scale(1.08)}
	}

.btn_morelink_s{
	text-align: center;
}
	.btn_morelink_s a{
		position:relative;
		display:flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: center;
	}
	.btn_morelink_s span{
		display:inline-block;
		padding:0 .3rem 1.2vh;
		color:#fff;
		font-size:.8rem;
		line-height: 1;
		letter-spacing: .05rem;
		white-space: nowrap;
		border:1px solid #fff;
		border-width:0 0 1px 0;
		transform-origin: center;
		transition:.3s;
	}
	.btn_morelink_s a img{
		display: inline-block;
		width:clamp(23px,4vw,36px);
		height:auto;
		margin-left:1vw;
		transform-origin: center;
		transition:.3s;
	}
	.btn_morelink_s a.hover span{
		padding:0 .8rem 1.2vh;
	}