@charset "UTF-8";

:root{
	--body : #000;
	--link : #000;
	--primary : #000;
}

/*--------------------------------------------
MVS
---------------------------------------------*/

#mvs{
	position : relative;
	z-index : 1;
}

/*--------------------------------------------
MAIN VISUAL
---------------------------------------------*/

@media screen and (max-width: 750px){
	#mv{
		height : calc( 590 * 100vw / 375 );
	}
}

@media print,screen and (min-width: 751px){
	#mv{
		height : 690px;
	}
}

#animation{
	position : absolute;
	top : 0;
	left : 0;
	z-index : 1;
	width : 100%;
	height : 100%;
	background-color : #9adde5;
}

#animation h1 , #animation p{
	position : relative;
	margin-left : auto;
	margin-right : auto;
	text-align : center;
	overflow : hidden;
	z-index : 1;
}

#animation h1 img , #animation p img{
	opacity : 0;
}

#animation h1:before , #animation p:before{
	content : "";
	display : block;
	top : 0;
	left : 0;
	position : absolute;
	width : 100%;
	height : 100%;
	width : 0;
	z-index : 2;
}

#animation h1{
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
}

#animation h1:before{
	background-color : #fff;
}

#animation p{
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
}

@media screen and (max-width: 750px){
	#animation{
		padding-top : calc( 104 * 100vw / 375 );
	}
	#animation:before{
		content : "";
		display : block;
		position : absolute;
		right : 0;
		height : 100%;
		top : 0;
		width : calc( 22.5 * 100% / 375 );
		background-color : #9edee6;
		z-index : 5;
	}
	#animation h1 , #animation p{
		width : 100%;
	}
	#animation h1:before , #animation p:before{
		left : calc( 22.5 * 100% / 375 );
	}
	#animation h1{
		height : calc( ( 85 * 17 / 40 ) * 100vw / 375 );
	}
	#animation h1 img{
		height : calc( 17 * 100vw / 375 );
	}
	#animation p{
		margin-top : calc( ( 11 * 147 / 375 ) * 100vw / 375 );
		height : calc( 159 * 100vw / 375 );
	}
	#animation p:before{
		background-image : url("../images/home/animation/bg_sp.svg");
		background-position : 0 0;
		background-repeat : no-repeat;
		background-size : auto 100%;
		height : calc( 159 * 100vw / 375 );
	}
	#animation p img{
		height : calc( 147 * 100vw / 375 );
	}
}

@media print,screen and (min-width: 751px){
	#animation{
		padding-top : 104px;
	}
	#animation h1 , #animation p{
		width : 715px;
	}
	#animation h1{
		height : 85px;
	}
	#animation h1 img{
		height : 40px;
	}
	#animation p{
		margin-top : 11px;
		height : 373px;
	}
	#animation p:before{
		background-image : repeating-linear-gradient(0deg, transparent, transparent 85px, rgba(154, 221, 229, 1) 85px, rgba(154, 221, 229, 1) 96px );
		background-color : rgba(255, 255, 255, 1);
		background-size : auto auto;
	}
	#animation p img{
		height : 323px;
	}
}

#animation.is-loading h1:before , #animation.is-loading p:before{
	animation : anim01 1s ease 1s 1 alternate forwards;
}

#animation.is-loading h1 img , #animation.is-loading p img{
	animation : anim02 .1s ease 1.5s 1 alternate forwards;
}

#animation.is-loading{
	animation : anim03 1.5s ease 1.5s 1 alternate forwards;
}

@media screen and (max-width: 750px){
	@keyframes anim01{
		0%{
			width : 0;
			transform : translateX(0);
		}
		50%{
			width : calc( 330 * 100% / 375 );
			transform : translateX(0);
		}
		100%{
			width : 100%;
			transform : translateX(100%);
		}
	}
}

@media print,screen and (min-width: 751px){
	@keyframes anim01{
		0%{
			width : 0;
			transform : translateX(0);
		}
		50%{
			width : 100%;
			transform : translateX(0);
		}
		100%{
			width : 100%;
			transform : translateX(100%);
		}
	}
}

@keyframes anim02{
	0%{
		opacity : 0;
	}
	100%{
		width : 100%;
		opacity : 1;
	}
}

@keyframes anim03{
	0%{
		transform : translateX(0);
	}
	50%{
		transform : translateX(0);
	}
	100%{
		transform : translateX(100%);
	}
}

#slider{
	height : 100%;
	font-size : 0;
}

#slider .slick-list{
	height : 100%;
}

#slider a{
	display : block;
}

#slider picture{
	overflow : hidden;
}

#slider picture > img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	font-family : "object-fit: cover;";
}

#slider picture{
	width : 100vw;
}

#slider .slider-html{
	width : 100vw;
	background-color : #fff;
}

#slider .slider-html p:nth-of-type(1) strong{
	display : block;
	font-weight : 500;
	text-align : center;
	letter-spacing : .15em;
	text-indent : .15em;
}

#slider .slider-html p:nth-of-type(2){
	text-align : center;
	letter-spacing : .15em;
	text-indent : .15em;
}

#slider .slider-html .more01{
	justify-content : center;
}

#slider .slick-dots{
	position : absolute;
	display : flex;
	align-items : flex-start;
	z-index : 5;
	font-size : 0;
}

#slider .slick-dots li{
	display : block;
	font-size : 0;
}

#slider .slick-dots button{
	color : transparent;
	font-size : 0;
	vertical-align : top;
	cursor : pointer;
	width : 100%;
	height : 100%;
	overflow : hidden;
	border-radius : 50%;
	background-color : #9e937d;
}

#slider .slick-dots .slick-active button{
	background-color : #36bbcc;
}

@media screen and (max-width: 750px){
	#slider picture{
		height : calc( 650 * 100vw / 375 );
	}
	#slider .slider-html{
		height : calc( 650 * 100vw / 375 );
	}
	#slider .slider-html{
		padding-top : calc( ( 163 + 5 ) * 100vw / 375 );
	}
	#slider .slider-html p:nth-of-type(1) strong{
		font-size : 2.1rem;
	}
	#slider .slider-html p:nth-of-type(2){
		font-size : 1.3rem;
		line-height : 2.3077;
		margin-top : calc( ( 32 + 5 ) * 100vw / 375 );
	}
	#slider .slider-html .more01{
		margin-top : calc( 25 * 100vw / 375 );
	}
	#slider .slick-dots{
		justify-content : center;
		width : 100%;
		bottom : calc( 25 * 100vw / 375 );
		left : 0;
	}
	#slider .slick-dots li{
		margin-left : calc( 14 * 100% / 375 );
		margin-right : calc( 14 * 100% / 375 );
		width : calc( 7 * 100% / 375 );
		height : calc( 7 * 100vw / 375 );
	}
}

@media print,screen and (min-width: 751px){
	#slider picture{
		height : 690px;
	}
	#slider .slider-html{
		height : 690px;
	}
	#slider .slider-html{
		padding-top : calc( 214px + 9.5px );
	}
	#slider .slider-html p:nth-of-type(1) strong{
		font-size : 4rem;
	}
	#slider .slider-html p:nth-of-type(2){
		font-size : 1.5rem;
		line-height : 2;
		margin-top : calc( 39px + 9.5px );
	}
	#slider .slider-html .more01{
		margin-top : 26px;
	}
	#slider .slick-dots{
		bottom : 25px;
		left : 35px;
	}
	#slider .slick-dots li{
		margin-left : 14px;
		margin-right : 14px;
		width : 7px;
		height : 7px;
	}
}

/*--------------------------------------------
NEWS
---------------------------------------------*/

#news{
	border : solid #36bbcc 1px;
	background-color : #fff;
	position : absolute;
	z-index : 6;
}

#news h2{
	display : inline-block;
	border-bottom : 1px solid #36bbcc;
	color : #36bbcc;
	letter-spacing : .15em;
}

#news li + li{
	max-height : 0;
	overflow : hidden;
	transition : max-height .3s ease-in , margin .3s ease-in;
	-webkit-backface-visibility : hidden;
	        backface-visibility : hidden;
	will-change : max-height, margin;
	margin-top : 0;
}

#news a , #news li > div{
	color : #36bbcc;
}

#news time{
	letter-spacing : .1em;
}

#news h3{
	letter-spacing : .12em;
}

#news.items:after{
	position : absolute;
	content : "";
	display : block;
	background : url("../images/ui/parts/down01.svg") 0 0 / contain no-repeat;
	left : 50%;
	transform : translateX(-50%);
}

#news.items.is-open li + li{
	max-height : 3em;
}

#news.items.is-open:after{
	display : none;
}

@media screen and (max-width: 750px){
	#news{
		top : calc( 430 * 100vw / 375 );
		width : calc( 312 * 100% / 375 );
		left : calc( 31.5 * 100% / 375 );
		padding-top : calc( ( 10 - 3 ) * 100vw / 375 );
		padding-bottom : calc( 10 * 100vw / 375 );
		padding-left : calc( 18 * 100% / 375 );
		padding-right : calc( 18 * 100% / 375 );
	}
	#news h2{
		font-size : 1.3rem;
		line-height : 1.4615;
	}
	#news ul{
		margin-top : calc( 8 * 100vw / 375 );
	}
	#news li + li{
	}
	#news a , #news li > div{
		display : block;
	}
	#news time{
		font-size : 1.2rem;
	}
	#news h3{
		margin-top : calc( ( 6 - 3.5 ) * 100vw / 375 );
		font-size : 1.3rem;
		line-height : 1.5385;
	}
	#news.items{
		padding-bottom : calc( 23 * 100vw / 375 );
	}
	#news.items:after{
		width : calc( 11 * 100% / 276 );
		height : calc( 7 * 100vw / 375 );
		bottom : calc( 10 * 100% / 276 );;
	}
	#news.items.is-open{
		padding-bottom : calc( 12 * 100vw / 375 );
	}
	#news.items.is-open li + li{
		margin-top : calc( ( 9 - 3.5 - 3.5 ) * 100vw / 375 );
	}
}

@media print,screen and (min-width: 751px){
	#news{
		border-width : 1px;
		width : 480px;
		padding-top : calc( 10px - 3px );
		padding-bottom : calc( 13px + 3px );
		padding-left : 18px;
		padding-right : 18px;
		right : 100px;
		top : 648px;
	}
	#news a , #news li > div{
		display : flex;
		align-items : flex-start;
	}
	#news h2{
		font-size : 1.3rem;
		line-height : 1.4615;
	}
	#news ul{
		margin-top : calc( 6px + 3px );
	}
	#news time{
		font-size : 1.2rem;
		margin-top : .5px;
		flex-shrink : 0;
		width : 86px;
	}
	#news h3{
		font-size : 1.3rem;
	}
}

#news.items{
	padding-bottom : calc( 26px + 3px );
}

#news.items.is-open{
	padding-bottom : calc( 13px + 3px );
}

#news.items.is-open li + li{
	margin-top : calc( 6px + 3px + 3px );
}

#news.items:after{
	width : 11px;
	height : 7px;
	bottom : 11px;
}

/*--------------------------------------------
WORKS
---------------------------------------------*/

@media print,screen and (min-width: 751px){
	#works01{
		padding-top : 128px;
	}
}

@media screen and (max-width: 750px){
	#otherWorks .posts{
		margin-top : calc( ( 36 - ( 18.5 - 1 ) ) * 100vw / 375 );
	}
	#otherWorks .posts > li:nth-child(9){
		display : none !important;
	}
}

@media print,screen and (min-width: 751px){
	#otherWorks{
		padding-bottom : calc( 120px + 4px );
	}
	#otherWorks .posts{
		margin-top : calc( 58px - ( 69px - 6.125px ) );
	}
	#otherWorks .more01{
		margin-top : calc( 41px + 4px );
	}
}