/* Home Sp */

/*====== 共通 =====*/

.btnDown{
	display: block; width: 30px; height: 30px; border-radius: 50%; background-color: #248471; position: absolute;
	left: 0; right: 0; bottom: -4vh; margin: auto; z-index: 5;
	animation: downOpa-move 1s forwards 3s; opacity: 0; -webkit-opacity: 0;
}

.btnDown i{
	font-size: 16px; height: 16px; position: absolute;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	top: 0; left: 0; right: 0; bottom: 0; margin: auto; color: #fff;
}


@keyframes downOpa-move {
	from {
		opacity: 0;
		-webkit-opacity: 0;
	}

	to {
		opacity: 1;
		-webkit-opacity: 1;
	}
}


/*====== h1 h2 h3 =====*/

h1 {
	font-size: 30px; line-height: 40px; text-align: center;
	margin: -50px auto 40px;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
	position: relative; overflow: visible;
}
h1 span {
	font-family: fot-tsukuardgothic-std, sans-serif !important; font-weight: 700!important; 
}


/*====== キービジュアル =====*/

#keyvisual{
	width: 100%; height: 100vh; height: -webkit-fill-available; position: relative; margin-bottom: 0vh;
	animation: height-move 1s forwards 1s;
}

#keyvisual #kv1{
	width: 100%; height: 100vh; height: -webkit-fill-available; background-image: url("/_common/img/kv/kv_bg3_sp.jpg");
	background-position: center; background-repeat: no-repeat; background-size: cover;
	animation: height-move 1s forwards 2s;
}

@keyframes height-move {
	from {
		height: 100vh;
		margin-bottom: 0vh;
	}

	to {
		height: calc(90vh - 50px);
		margin-bottom: 10vh;
	}
}

#keyvisual #kv1 .catchcopy{
	width: 96%; height: auto; position:absolute; top: 35%; left: 0; right: 0; bottom: unset !important; margin: auto;
	transform: scale(0); animation: scale-move 3s forwards 1s;
}

@keyframes scale-move {
	from {
		transform: scale(0);
	}

	to {
		transform: scale(1);
	}
}

#keyvisual .bg_mountain{
	width: 100%; height: auto; position:absolute; top: unset; left: 0; right: 0; bottom: 0; margin: auto;
	transform: translateY(150px); animation: mountain-move 1s forwards 2s;
}

@keyframes mountain-move {
	from {
		transform: translateY(150px);
	}

	to {
		transform: translateY(0);
	}
}

/*====== SEC1 =====*/

#sec01{padding: 60px 0; margin-bottom: 40px;}
#sec01 .top_catchcopy{
	font-family: fot-tsukuardgothic-std, sans-serif !important; font-weight: 700; font-size: 24px; line-height: 40px; text-align: center;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
	margin: 0 auto;
}
#sec01 .top_catchcopy img{
	display: block;
    width: 41px;
    height: 41px;
    position: absolute;
    top: 20px;
    right: 30px;
    left: unset;
    bottom: unset;
}

#sec01 .top_catchcopy_eng{
	font-family: 'Poppins', sans-serif !important; font-weight: 600; font-size: 16px; color: #16695f; margin: 20px auto 30px;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}

#sec01 .bg_snowmountain {
	display: block;
    position: absolute;
    right: 2%;
    left: unset;
    top: 25%;
    bottom: unset;
}
.sec00Box {width: 96%; margin: 20px auto 20px; height: 250px;}
.sec00Box img {width: 100%; border-radius: 10px;}
.sec00Box h2 {font-weight: bold!important;}

h2.sec00 {font-weight: bold!important; line-height: 1.4; font-size: 1.4rem;}

.sec01Box{width: 100%;}

path.sec01BoxBg{
	display: block; position: absolute; left: 0; bottom: 80px;
	width: 96%; height: 52%; border-radius: 0 20px 20px 0; background-color: #f7f8f5;
}

.sec01Box img{
	display: block; width: 90% !important; position: relative !important; 
	border-radius: 10px; border: 5px #fff solid; margin: 10px auto;
}

.sec01Box p{
	display: block;
    width: 90%;
    margin: 10px auto 60px;
    font-weight: 400;
    font-size: 14px;
    line-height: 34px;
    text-align: left;
}


.bg_sec01_02{
	display: block; position: absolute;
	width:164px; height: 124px; bottom: 20px; right: 2%;
}

.bg_sec01_02{
	display: block;
    position: absolute;
    width: 34%;
    height: auto;
    bottom: 4%;
    right: 10%;
    top: unset;
    left: unset;
}


/*====== SEC2 =====*/

#sec02 .bg_snowmountain {
	display: block;
    position: absolute;
    left: 2%;
    right: unset;
    top: 0px;
    bottom: unset;
}

.sec02_subtit {
	display: block; max-width: 90%; text-align: left;
	font-size: 16px; line-height: 1.5; margin: -10px auto 20px;
}
#sec02 h2 { margin: 0 auto!important; text-align: center;}
#sec02 h2 span {font-family: fot-tsukuardgothic-std, sans-serif !important; color: #000!important; font-weight: 700; font-size: 24px; margin: 10px auto!important; line-height: 1.5;}

#sec02 h4{
	margin: 50px auto 0px; overflow: visible; position: relative;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}
#sec02 h5 span,
#sec02 h4 span{
	display: block;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}
#sec02 h4 span {color: #16695f; font-family: 'Poppins', sans-serif !important; font-weight: 600; font-size: 40px; margin: 0 auto 30px;}
#sec02 h5 {margin: 0 auto 50px!important; text-align: center;}
#sec02 h5 span {font-family: fot-tsukuardgothic-std, sans-serif !important; font-weight: 700; font-size: 24px; margin: 0 auto; line-height: 1.5;}

#sec02 h4.white span{color: #fff !important;}



.sec02Box{
	width: 100%; background-position: center; background-repeat: no-repeat;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
	background-size: cover; overflow: hidden; padding-bottom: 40px;
}


.sec02Box h3{margin: 30px auto 15px;}
.sec02Box h3:before{left: -50px; width: calc(25px * .7); height: calc(27px * .7);}
.sec02Box h3:after{right: -50px; width: calc(25px * .7); height: calc(27px * .7);}
.sec02Box h3 span:nth-of-type(1){font-size: 16px; margin: 0 auto 10px;}
.sec02Box h3 span:nth-of-type(2){font-size: 20px; margin: 0 auto;}
.sec02Box h4{font-size: 22px; margin: 15px auto 20px;}


.sec02Box p{
	display: block; max-width: 90%; text-align: center;
	font-size: 14px; line-height: 28px; margin: 0 auto; color: #fff;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}

.sec02Style01{background-image: url("/_common/img/home/img02_bg_style01.jpg");}
.sec02Style02{background-image: url("/_common/img/home/img02_bg_style02.jpg");}
.sec02Style03{background-image: url("/_common/img/home/img02_bg_style03.jpg");}
.sec02Style04{background-image: url("/_common/img/home/img02_bg_style04.jpg");}
.sec02Style05{background-image: url("/_common/img/home/img02_bg_style05_2sp.jpg");}
.sec02Style06{background-image: url("/_common/img/home/img02_bg_style06.jpg");}



.sec02Box h3.sec02h3 { color: #fff; margin: 0px auto 10px!important;}
.sec02Box h3 span {font-size: 20px; margin: 0px auto 6px!important;}
.sec02BoxTit1{
	margin: 0px auto 6px!important; display: block; position: relative; overflow: visible;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}

.sec02BoxTit1{color: #fff!important; font-size: 26px;}
.sec02BoxTit1 span {display: block; font-family: 'Poppins', sans-serif !important; font-weight: 600;  color: #fff!important; text-align: center; font-size: 26px; margin: 25px auto 0px!important;}
.sec02BoxTit1 span:nth-of-type(1){margin: 25px auto 0px!important; font-size: 16px;}
.sec02BoxTit1 span:nth-of-type(2){margin: 5px auto 25px!important; font-size: 20px;}

.sec02BoxTit1:before{left:  -50px; width: calc(25px * .7); height: calc(27px * .7);}
.sec02BoxTit1:after{right:  -50px; width: calc(25px * .7); height: calc(27px * .7);}
.sec02BoxTit1:before{
	display: block; position: absolute; top: 5px; content: ""; background-image: url("/_common/img/common/imgStyles01.png"); 
	background-position: center; background-repeat: no-repeat; background-size: cover;
}
.sec02BoxTit1:after{
	display: block; position: absolute; top: 5px; content: ""; background-image: url("/_common/img/common/imgStyles02.png"); 
	background-position: center; background-repeat: no-repeat; background-size: cover;
}

.sec02BoxTit2 { 
		display: block; position: relative; overflow: visible;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
	font-size: 26px; font-weight: 700; color: #fff; text-align: center; margin: 0px auto 30px;}


.sec02Box .image_circles{
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 60%;
    margin: 10px auto 0;
}
.sec02Box .image_circles .img_styles{
	display: block; margin-top: 10px;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}
.sec02Box .image_circles .img_styles img{
	display: block; position: relative !important; border: 3px #fff solid; border-radius: 50%; width: 100px; height: 100px;
	box-shadow: 3.716px 3.346px 5px 0px rgba(0, 0, 0, 0.3);
}

.sec02Box .image_circles .img_styles span{display: block; font-size: 12px; color: #fff; margin-top: 10px;
　line-height: 1.5; margin-bottom: 10px; text-align: center;}


.sec02Box .image_circles.fiveCircles{
	width: 80%;
    justify-content: space-evenly;
}

.br1100, .br1005{display: none;}

/*====== SEC3 =====*/

#sec03{
	padding: 30px 0 65px; background-image: url("/_common/img/home/img03_bg.jpg"); background-repeat: no-repeat;
	background-position: center; background-size: cover;
}

.sec03imgBox{
	width: 100%;
    height: 280px;
    border-radius: 10px;
    margin: 0 auto;
    background-image: url(/_common/img/home/bg_pattern01.jpg);
    background-repeat: repeat;
    background-size: 128px 128px;
    position: relative;
}

.sec03imgBoxInner{
	display: flex;
    float: left;
    align-content: space-between;
    flex-wrap: wrap;
    margin: 10px;
    height: 260px;
    width: fit-content;
    width: -ms-fit-content;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: -o-fit-content;
}
.sec03imgBoxInner .sec03hours{
	display: flex;
    align-items: center;
    justify-content: space-between;
    height: fit-content;
    height: -ms-fit-content;
    height: -moz-fit-content;
    height: -webkit-fit-content;
    height: -o-fit-content;
    width: 190px;
}

.sec03imgBoxInner .sec03hours div:nth-of-type(1){
	position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #333;
}
.sec03imgBoxInner .sec03hours div:nth-of-type(1) span{
	display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; 
	font-size: 12px; font-weight: 600; color: #fff; 
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}

.sec03imgBoxInner .sec03hours div:nth-of-type(2){
	width: 82px;
    height: 46px;
    background-image: url(/_common/img/home/img_arrow.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.sec03imgBoxInner .sec03hours div:nth-of-type(2) span{
	display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; 
	font-size: 12px; font-weight: 600; color: #fff; 
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}

.sec03imgBox img{
	position: absolute;
    width: 35%;
    height: auto;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 10px;
    left: unset;
}

.sec03info{
    width: 100%;
    padding: 25px 10px 0;
}

.sec03info h5.accessTitle i, .sec03info h5.accessTitle span{color: #fff;}

.accessBody p{color: #fff;}


/*====== SEC4 =====*/

#sec04{
	padding: 30px 0 65px;
}



/*====== SEC5 =====*/

#sec05{
	padding: 40px 0; background-color: #f7f8f5;
}

.snsTitle{
	position: relative;
    overflow: visible;
    width: calc(100% - 60px);
    height: 30px;
    padding-bottom: 10px;
    margin: 0 40px 0 10px;
    background-image: url(/_common/img/home/img05_sns_title_bg.png);
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: 25px 25px;
    margin-bottom: 25px;
}

.snsTitle:before{
	display: block;
    position: absolute;
    content: "";
    width: 10px;
    height: 25px;
    bottom: 0;
    left: -10px;
    background-image: url(/_common/img/home/img05_sns_title_bg_head.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.snsInsta:after{
	display: block;
    position: absolute;
    content: "";
    width: 40px;
    height: 25px;
    bottom: 0;
    right: -40px;
    background-image: url(/_common/img/home/img05_sns_title_bg_instagram.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.snsTwitter:after{
	display: block;
    position: absolute;
    content: "";
    width: 40px;
    height: 25px;
    bottom: 0;
    right: -40px;
    background-image: url(/_common/img/home/img05_sns_title_bg_twitter.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.snsFacebook:after{
	display: block;
    position: absolute;
    content: "";
    width: 40px;
    height: 25px;
    bottom: 0;
    right: -40px;
    background-image: url("/_common/img/home/img05_sns_title_bg_facebook.png");
    background-repeat: no-repeat;
    background-size: cover;
}


.snsTitle span{font-family: 'Poppins', sans-serif !important; font-weight: 600; font-size: 16px;}

.snsLeft, .snsRight{width: 100%;}

.gallery{
	width: 100%; overflow: hidden; margin-bottom: 60px;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}
.gallery img{
	position: relative;
    float: left;
    display: block;
    width: calc((100% - 2px) / 2);
    border-left: 2px #fff solid;
	border-top: 2px #fff solid;
}
.gallery img:nth-of-type(odd){border-left: none !important; clear: both;}


.snsBody{
	width: 90%; background-color: #fff; border-radius: 20px; height: 350px; overflow-x: hidden; overflow-y: auto;
	margin: 0 auto 40px; 
}
.snsBody img{position: relative;}

.top_catchcopy:before {
    display: block;
    position: absolute;
    content: "";
    background-image: url(/_common/img/home/stars.png);
    width: 41px;
    height: 41px;
    background-repeat: no-repeat;
    background-size: cover;
    right: 0;
    top: -20px;
}



/************************/
/*
/*     youtube用        */
/*                      */
/************************/

.youtube{
    position:relative;
    width:100%;
    height:0;
    padding-top:75%;
	
}
.youtube iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
	padding-top:40px
	}
	
	
	
	
button.focus_play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	height: 100%;
	background: none;
	border: none;
	cursor : pointer;
}

.blockarea2,
.blockarea3,
.blockarea4,
.blockarea5,
.blockarea6,
.blockarea7,
.blockarea8,
.blockarea1 {
	display: none;
}

.blockarea_2,
.blockarea_3,
.blockarea_4,
.blockarea_5,
.blockarea_6,
.blockarea_7,
.blockarea_8,
.blockarea {
	position:fixed;
	z-index: 9999;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background: rgba(255,255,255,0.25);
}

.blockarea_8 iframe,
.blockarea_7 iframe,
.blockarea_6 iframe,
.blockarea_5 iframe,
.blockarea_4 iframe,
.blockarea_3 iframe,
.blockarea_2 iframe,
.blockarea iframe {
	position: absolute;
    width: 652px;
    height: 366px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.relative {
	position: relative;
    top:0;
    left:0;
	right: 0;
	margin: 20px auto;
    width:100%;
    height:100%;
	padding-top:50px
	
}


.relativeYt {
	position: relative;
    top:0;
    left:0;
    width:100%;
    height:100%;
	padding-top:50px;
	
}



@media screen and (max-width:540px){
	
	.blockarea_8 iframe,
	.blockarea_7 iframe,
	.blockarea_6 iframe,
	.blockarea_5 iframe,
	.blockarea_4 iframe,
	.blockarea_3 iframe,
	.blockarea_2 iframe,
	.blockarea iframe {
	position: absolute;
    width: 100%;
	max-width: 360px;
    height:auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
	
	}


