@charset "utf-8";

/* cover
---------------------------------------------- */

#cover {

}
#meter {
	width:200px;
	height:1px;
	position:relative;
	background-color:#999;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}
#progress {
	width:0px;
	height:1px;
	background-color:#000;
}



/* kv
---------------------------------------------- */

#kv {
	position:relative;
	margin-bottom:150px;
}
	@media(max-width:767px) {
		#kv {
			margin-bottom:100px;
		}
	}

#kvText {
	position:absolute;
	background:rgba(255,255,255,0.7);
	display:inline-block;
	padding:20px 25px;
	bottom:50px;
	left:50px;
}
	@media(max-width:767px) {
		#kvText {
			padding:10px 15px;
		}
	}
	@media(max-width:479px) {
		#kvText {
			left:20px;
			bottom:20px;
		}
	}

#kvText > p {
	font-size:68px;
	line-height:1.3;
	font-weight:500;
}
	@media(max-width:1279px) {
		#kvText > p {
			font-size:56px;
		}
	}
	@media(max-width:979px) {
		#kvText > p {
			font-size:48px;
		}
	}
	@media(max-width:767px) {
		#kvText > p {
			font-size:36px;
		}
	}
	@media(max-width:479px) {
		#kvText > p {
			font-size:24px;
		}
	}

/* テキスト1文字表示用 */
.typ span {
  opacity: 0;
}



/* greeting
---------------------------------------------- */
#greeting {
	width:calc(100% - 30px);
	max-width:640px;
	margin:0 auto;
	margin-bottom:150px;
	padding:0 15px;
}
	@media(max-width:767px) {
		#greeting {
			margin-bottom:100px;
		}
	}

#greeting > figure {
	width:250px;
	margin:0 auto;
	margin-bottom:30px;
}
	@media(max-width:767px) {
		#greeting > figure {
			width:200px;
			margin-bottom:20px;
		}
	}

#greeting > figure > img {
	width:100%;
}
#greeting > p {
	line-height:1.8;
	margin-bottom:1em;
}
#greeting > span {
	display:block;
	text-align:right;
}



/* text
---------------------------------------------- */
.text {
	position:relative;
	margin-bottom:150px;
}
	@media(max-width:767px) {
		.text {
			margin-bottom:100px;
		}
	}

.text > figure {
	opacity:0;
	z-index:1;
	position:relative;
}
.text > figure > img {
	width:100%;
}

.text > h2 {
	opacity:0;
	z-index:2;
	position:absolute;
	writing-mode: vertical-rl;
	top:-1.5em;
	font-size:40px;
	font-feature-settings:initial;
	text-shadow:0 0 5px #FFF,0 0 5px #FFF,0 0 5px #FFF,0 0 5px #FFF,0 0 5px #FFF;
}
	@media(max-width:639px) {
		.text > h2 {
			font-size:30px;
		}
	}
	@media(max-width:479px) {
		.text > h2 {
			font-size:24px;
		}
	}

.text > h2:first-letter {
	color:#FE4854;
	font-size:60px;
}
	@media(max-width:639px) {
		.text > h2:first-letter {
			font-size:45px;
		}
	}
	@media(max-width:479px) {
		.text > h2:first-letter {
			font-size:36px;
		}
	}

.text > div {
	opacity:0;
	position:relative;
	z-index:2;
	background-color:#FFF;
	margin-top:-150px;
	padding:3% 4%;
}
	@media(max-width:639px) {
		.text > div {
			margin-top:-50px;
		}
	}
	@media(max-width:479px) {
		.text > div {
			margin-top:-25px;
		}
	}

.text > div > h3 {
	font-size:24px;
	margin-bottom:10px;
	line-height:1.3;
}
	@media(max-width:639px) {
		.text > div > h3 {
			font-size:20px;
		}
	}

.text > div > p {
	line-height:1.8;
	margin-bottom:1em;
}

/* left */
.text_left > figure {
	margin-right:15%;
	z-index:1;
}
	@media(max-width:639px) {
		.text_left > figure {
			margin-right:10%;
		}
	}
	@media(max-width:479px) {
		.text_left > figure {
			margin-right:0%;
		}
	}

.text_left > div {
	margin-left:25%;
}
	@media(max-width:639px) {
		.text_left > div {
			margin-left:10%;
		}
	}
	@media(max-width:479px) {
		.text_left > div {
			margin-left:0;
		}
	}

.text_left > h2 {
	left:3%;
}

/* right */
.text_right > figure {
	margin-left:15%;
	z-index:1;
}
	@media(max-width:639px) {
		.text_right > figure {
			margin-left:10%;
		}
	}
	@media(max-width:479px) {
		.text_right > figure {
			margin-left:0;
		}
	}

.text_right > div {
	margin-right:25%;
}
	@media(max-width:639px) {
		.text_right > div {
			margin-right:10%;
		}
	}
	@media(max-width:479px) {
		.text_right > div {
			margin-right:0;
		}
	}

.text_right > h2 {
	right:3%;
}



/* facilities
---------------------------------------------- */
#facilities {
	position:relative;
	background-color:#F6F6F6;
	margin-bottom:150px;
	padding:0 15px 70px 15px;
}
	@media(max-width:767px) {
		#facilities {
			margin-bottom:100px;
		}
	}

#facilities > h2 {
	position:absolute;
	writing-mode: vertical-rl;
	top:-1em;
	right:3%;
	font-size:40px;
	font-feature-settings:initial;
}
	@media(max-width:639px) {
		#facilities > h2 {
			font-size:30px;
		}
	}

#facilities > div {
	width:100%;
	max-width:780px;
	margin:0 auto;
	padding-top:70px;
}
	@media(max-width:639px) {
		#facilities > div {
			padding-top:120px;
		}
	}

#facilities > div > h3 {
	font-size:32px;
	margin-bottom:15px;
}
	@media(max-width:639px) {
		#facilities > div > h3 {
			font-size:24px;
		}
	}

#facilities > div > h3 > img {
	width:200px;
	margin-right:30px;
}
	@media(max-width:639px) {
		#facilities > div > h3 > img {
			width:150px;
			margin-right:15px;
		}
	}

#facilities > div > figure {
	width:54%;
	float:left;
}
	@media(max-width:639px) {
		#facilities > div > figure {
			width:100%;
			float:none;
			margin-bottom:8px;
		}
	}

#facilities > div > figure > img {
	width:100%;
}
#facilities > div > div {
	width:42%;
	float:right;
}
	@media(max-width:639px) {
		#facilities > div > div {
			width:100%;
			float:none;
		}
	}

#facilities > div > div > p {
	line-height:2;
	margin-bottom:1em;
}
#facilities > div > div > a {
	margin:0 auto;
}



/* blog
---------------------------------------------- */
#blog {
	margin-bottom:150px;
}
	@media(max-width:767px) {
		#blog {
			margin-bottom:100px;
		}
	}

#blog > h2 {
	text-align:center;
	font-size:36px;
	font-feature-settings:initial;
	margin-bottom:20px;
}
	@media(max-width:639px) {
		#blog > h2 {
			font-size:24px;
			margin-bottom:10px;
		}
	}

#blog > h2:first-letter {
	color:#FE4854;
	font-size:48px;
}
	@media(max-width:639px) {
		#blog > h2:first-letter {
			font-size:32px;
		}
	}

#blog > ul {
	display:flex;
}
	@media(max-width:1279px) {
		#blog > ul {
			max-width:960px;
			margin:0 auto;
		}
	}

#blog > ul > li {
	width:calc(33.333% - 20px);
	background-color:#F6F6F6;
	margin:0 10px;
}
	@media(max-width:639px) {
		#blog > ul > li {
			width:calc(50% - 20px);
		}
	}

	@media(max-width:639px) {
		#blog > ul > li:last-child {
			display:none;
		}
	}

#blog > ul > li > a > figure {
	position:relative;
	width:50%;
	float:left;
}
	@media(max-width:1279px) {
		#blog > ul > li > a > figure {
			width:100%;
			float:none;
		}
	}

#blog > ul > li > a > figure > img {
	width:100%;
	height:auto;
}
#blog > ul > li > a > figure > span {
	position:absolute;
	top:0;
	left:0;
	display:inline-block;
	background-color:#FE4854;
	color:#FFF;
	padding:5px;
}
#blog > ul > li > a > div {
	width:calc(50% - 20px);
	float:right;
	padding:10px;
}
	@media(max-width:1279px) {
		#blog > ul > li > a > div {
			width:calc(100% - 20px);
			float:none;
		}
	}

#blog > ul > li > a > div > span {
	display:block;
	color:#999999;
	margin-bottom:5px;
}
#blog > ul > li > a > div > p {
	line-height:1.3;
	margin-bottom:5px;
}
#blog > ul > li > a > div > strong {
	display:inline-block;
	border:1px solid #999;
	background-color:#FFF;
	padding:3px 5px;
}