@charset "UTF-8";
/* CSS Document */



/****************************************************************************************************
header
****************************************************************************************************/
#header {
	position: static;
	/*border-bottom: 1px solid #FFFFFF;*/
	/*-webkit-transition: all 300ms;*/
	/*-moz-transition: all 300ms;*/
	/*transition: all 300ms;*/
}
#header.active {
	position: fixed;
	/*border-bottom: 1px solid #EEEEEE;*/
}



/****************************************************************************************************
main
****************************************************************************************************/
#main-wrap {
	position: fixed;
	width: 100vw;
	height: 100vh;
	left: 0;
	right: 0;
	top: 0;
	background: #FFF;
	overflow: hidden;
}
#main {
	position: relative;
	line-height: 1.0;
}
#main-wrap.active {
	height: 130px;
	z-index: 1400;
}
#main-wrap.active #main-logo {
	display: none;
}
#sitename {
	position: fixed;
	z-index: 1001;
	left: 60px;
	top: 65px;
	-ms-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
	color: #FFF;
	font-size: 1.066rem;
	font-weight: bold;
}
#sitename a {
	color: #FFF;
}
#contact {
	position: fixed;
	z-index: 1001;
	right: 60px;
	top: 66px;
	-ms-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
	color: #FFF;
	font-weight: bold;
}
#contact span {
	font-size: 0.866rem;
}
#contact a,
#contact strong {
	color: #FFFF99;
}
#main-instagram,
#main-logo,
#main-scroll {
	position: absolute;
	left: 0;
	right: 0;
}
#main-instagram {
	position: fixed;
	width: 100%;
	top: 48px;
	font-size: 10px;
	line-height: 1.0;
	-webkit-transition: background 300ms;
	-moz-transition: background 300ms;
	transition: background 300ms;
	z-index: 1100;
}
#main-logo {
	top: 50%;
	-ms-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
	z-index: 1100;
}
#main-logo figcaption {
	margin-top: 1.333rem;
	color: rgba(255,255,255,.8);
	font-size: 1.333rem;
}
#main-logo span {
	display: block;
	margin-top: 0.866rem;
	font-size: 0.866rem;
}
#main-scroll {
	position: fixed;
	bottom: 60px;
	z-index: 1100;
}
#main-scroll a {
	display: inline-block;
	padding-bottom: 60px;
	background: URL(../img/common/arrow-down.png) no-repeat center bottom;
	color: #00B2B2;
	font-size: 0.8rem;
	line-height: 1.0;
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}
.slide-wrap {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}
.slide img {
	object-fit: cover;
	width: 100vw;
	height: 96vh;
	-webkit-transition: transform 10000ms linear;
	-moz-transition: transform 10000ms linear;
	transition: transform 10000ms linear;
	-webkit-transform: scale(1.00);
	transform: scale(1.00);
}
.slide.zoom-in img {
	-webkit-transform: scale(1.15);
	transform: scale(1.15);
}



/****************************************************************************************************
contents
****************************************************************************************************/
#wrap {
	position: relative;
	margin-top: 96vh;
	z-index: 1300;
}
#contents-wrap {
}
#contents-bg {
	padding-bottom: 70px;
	background: #FFF;
}
#contents {
	width: 1300px;
	padding-top: 50px;
	margin: auto;
}
.sec-ttl {
}
.sec-ttl h2 {
	color: #00D8D8;
	font-size: 2.266rem;
	font-weight: bolder;
	line-height: 1.4;
}
.sec-ttl h3 {
	margin-top: 0.5em;
	font-size: 1.866rem;
	font-weight: normal;
	letter-spacing: 1px;
	line-height: 1.6;
}
.sec-ttl div {
	font-size: 0.8rem;
	letter-spacing: 2px;
	line-height: 1.8;
}
.sec-ttl + .sec-body {
	margin-top: 28px;
}



/****************************************************************************************************
introduction
****************************************************************************************************/
#introduction {
}
#introduction .sec-ttl h2 {
	letter-spacing: 1px;
}
#introduction .sec-ttl + .sec-body {
	margin-top: 32px;
}



/****************************************************************************************************
instagram
****************************************************************************************************/
#instagram {
	margin-top: 100px;
}
.tile-block ul {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	/*-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;*/
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.tile-block ul li + li {
	margin-left: 33px;
}
.tile-block ul li:nth-of-type(4n+1) {
	margin-left: 0;
}
.tile-block ul li:nth-of-type(n+5) {
	margin-top: 33px;
}
.tile-block ul li a {
	display: block;
}
.tile-block ul li a figure {
	width: 300px;
	height: 300px;
	overflow: hidden;
}
.tile-block ul li a figure img {
	object-fit: cover;
	width: 300px;
	height: 300px;
	-webkit-transition: all 300ms;
	-moz-transition: all 300ms;
	transition: all 300ms;
}
.tile-block ul li a:hover figure img {
	transform: scale(1.1, 1.1);
}
.tile-block + .btn-block {
	margin-top: 40px;
}
.btn-block .btn-more a {
	display: inline-block;
	padding-right: 60px;
	background: URL(../img/common/arrow-next.png) no-repeat right center;
	font-weight: normal;
	line-height: 1.8;
}
.btn-block .btn-more a span {
	display: inline-block;
	/*margin-right: -15%;
	-ms-transform: scale(.85, 1);
	-moz-transform: scale(.85, 1);
	-webkit-transform: scale(.85, 1);
	transform: scale(.85, 1);
	letter-spacing: 3px;*/
}



/****************************************************************************************************
news
****************************************************************************************************/
/* #news {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	margin-top: 100px;
	border-right: 1px solid #00E1E1;
}
#news .sec-ttl {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	width: 299px;
	padding: 2em 1em;
	background: #00E1E1;
}
#news .sec-ttl h2 {
	color: #FFF;
	font-weight: bolder;
}
#news .sec-ttl h2 span {
	color: #FFFFBF;
}
#news .sec-body {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	width: 1001px;
	margin-top: 0;
}
#news .sec-body .list-block {
	width: 741px;
	padding: 0 0 0 40px;
}
#news .sec-body .list-block dl {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	text-align: left;
	line-height: 2.0;
}
#news .sec-body .list-block dl + dl {
	margin-top: 0.4rem;
}
#news .sec-body .list-block dl dt {
	padding-right: 2rem;
	color: #00D8D8;
	font-weight: bold;
}
#news .sec-body .list-block dl dd .new {
	display: inline-block;
	margin-right: 0.4rem;
	padding: 2px 3px 3px 3px;
	vertical-align: 2px;
	background: #FFFF73;
	color: #00B2B2;
	font-size: 0.733rem;
	font-weight: bold;
	line-height: 1.0;
}
#news .sec-body .btn-block {
	width: 260px;
} */


#banner {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	margin-top: 100px;
	justify-content: center;
}
#banner .sec-body {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	width: 1001px;
	margin-top: 0;
}

#banner .sec-body .list-block ul{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	text-align: left;
	line-height: 2.0;
	margin: 30px 0;
}
#banner .sec-body .list-block ul li a img {
	width:450px;
}








@media screen and (max-width: 767px),
screen and (max-width: 960px) and (orientation: landscape) {
	/****************************************************************************************************
	main
	****************************************************************************************************/
	#sitename {
		left: 4vw;
		top: 6vw;
		font-size: 0.666rem;
	}
	#sitename a {
		color: #FFF;
	}
	#contact {
		right: 4vw;
		top: 6vw;
		font-size: 0.666rem;
		line-height: 1.2;
		text-align: right;
	}
	#contact span {
		display: block;
		font-size: 0.533rem;
	}
	#main-instagram {
		width: 100%;
		top: 2vw;
		padding: 1.5vw 0;
		font-size: 0.4rem;
	}
	#main-instagram img {
		width: 5vw;
		margin: auto;
	}
	#main-logo {
		width: 42vw;
		margin: auto;
	}
	#main-logo figcaption {
		line-height: 1.4;
	}
	#main-logo span {
		margin-top: 0.6rem;
	}
	#main-scroll {
		bottom: 3vw;
	}
	#main-scroll a {
		padding-bottom: 8vw;
		background-size: auto 6.5vw;
		font-size: 0.8rem;
	}
	.slide-wrap {
		flex-direction: column;
	}
	

	.slide img {
		object-fit: cover;
		width: 100vw;
		height: 60vh;
	}
	#wrap {
		position: relative;
		margin-top: 60vh;
	}
	
	
	
	/****************************************************************************************************
	contents
	****************************************************************************************************/
	#contents-bg {
		padding-bottom: 8vw;
		background: #FFF;
	}
	#contents {
		width: 92vw;
		padding-top: 10vw;
	}
	.sec-ttl + .sec-body {
		margin-top: 6vw;
	}
	
	
	
	/****************************************************************************************************
	introduction
	****************************************************************************************************/
	#introduction .sec-ttl h3 {
		margin-top: 0.8rem;
	}
	#introduction .sec-ttl + .sec-body {
		margin-top: 8vw;
	}
	
	
	
	/****************************************************************************************************
	instagram
	****************************************************************************************************/
	#instagram {
		margin-top: 15vw;
	}
	#instagram .sec-ttl {
		width: 40vw;
		margin: auto;
	}
	#instagram .sec-ttl h2 {
		line-height:1.0;
	}
	.tile-block ul li {
		width: 45vw;
	}
	.tile-block ul li + li {
		margin-left: 2vw;
	}
	.tile-block ul li:nth-of-type(2n+1) {
		margin-left: 0;
	}
	.tile-block ul li:nth-of-type(n+3) {
		margin-top: 2vw;
	}
	.tile-block + .btn-block {
		margin-top: 5vw;
	}
	.tile-block ul li a figure {
		width: 45vw;
		height: 45vw;
	}
	.tile-block ul li a figure img {
		width: 45vw;
		height: 45vw;
	}
	.btn-block .btn-more a {
		padding-right: 7.5vw;
		background-size: 6vw auto;
		line-height:1.0;
	}
	.btn-block .btn-more img {
		width: 15vw;
	}
	
	
	
	/****************************************************************************************************
	news
	****************************************************************************************************/
	#news {
		-webkit-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		margin-top: 14vw;
		border: none;
	}
	#news .sec-ttl {
		width: 100%;
		padding: 0.8rem 0 0.7rem 0;
		line-height: 1.0;
	}
	#news .sec-body {
		-webkit-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		width: auto;
		margin-top: 4vw;
		border: none;
	}
	#news .sec-body .list-block {
		width: 92vw;
		padding: 0;
	}
	#news .sec-body .list-block dl {
		display: block;
	}
	#news .sec-body .list-block dl + dl {
		margin-top: 1rem;
	}
	#news .sec-body .list-block dl dt {
		padding-right: 0;
	}
	#news .sec-body .list-block dl dd .new {
		padding: 1vw 1vw 0.666vw 1vw;
		vertical-align: 0.555vw;
	}
	#news .sec-body .btn-block {
		width: 92vw;
		margin-top: 4vw;
		padding: 0.8rem 0 0.7rem 0;
		border-top: 1px solid #00E1E1;
		border-bottom: 1px solid #00E1E1;
	}

	#banner {
		display: block;
		margin-top: 100px;
	}
	#banner .sec-body {
		display: block;
		width: 94vw;
		margin-top: 0;
	}
	
	#banner .sec-body .list-block ul{
		display: block;
		text-align: left;
		line-height: 2.0;
		margin: 0 0;
	}
	#banner .sec-body .list-block ul li a img {
		width:90vw;
		margin:10px 0;
	}


}

@media screen and (max-width: 960px) and (orientation: landscape) {
}