@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&display=swap");

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

/*--------------------------------------------
STATE
---------------------------------------------*/

@media screen and (max-width: 750px){
	.is-pc{
		display : none;
	}
}

@media print,screen and (min-width: 751px){
	.is-sp{
		display : none;
	}
}

/*--------------------------------------------
DATA TEXT
---------------------------------------------*/

[data-before]:before{
	content : attr( data-before );
	white-space : pre;
}

[data-after]:after{
	content : attr( data-after );
	white-space : pre;
}

[data-both]:before{
	content : attr( data-both );
	white-space : pre;
}

[data-both]:after{
	content : attr( data-both );
	white-space : pre;
}

@media screen and (max-width: 750px){
	[data-sp-after]:after{
		content : attr( data-sp-after );
		white-space : pre;
	}
}

@media screen and (max-width: 750px){
	[data-sp-befpre]:befpre{
		content : attr( data-sp-before );
		white-space : pre;
	}
}

@media print,screen and (min-width: 751px){
	[data-pc-after]:after{
		content : attr( data-pc-after );
		white-pcace : pre;
	}
}

@media print,screen and (min-width: 751px){
	[data-pc-befpre]:befpre{
		content : attr( data-pc-before );
		white-space : pre;
	}
}

/*--------------------------------------------
SCROLL IN VIEW
---------------------------------------------*/

main > *:not(.no-effect){
	opacity : 0;
}

main > *:not(.no-effect).is-effect{
	animation : fadeIn 1s ease forwards;
}

@keyframes fadeIn{
	0%{
		opacity : 0;
		transform : translateY( 20px );
	}
	100%{
		opacity : 1;
		transform : translateY( 0 );
	}
}

/*--------------------------------------------
JOST
---------------------------------------------*/

.jost{
	font-family : "Jost", sans-serif;
}

/*--------------------------------------------
IMG
---------------------------------------------*/

img.w100{
	width : 100%;
	height : auto;
}

picture.w100 img{
	width : 100%;
	height : auto;
}

/*--------------------------------------------
BACKGROUND COLOR
---------------------------------------------*/

.bg01{
	background-color : #f2f1ee;
}

.bg-white{
	background-color : #fff;
}

/*--------------------------------------------
TITLE
---------------------------------------------*/

.title01{
	text-align : center;
	letter-spacing : .04em;
	text-indent : .04em;
	font-weight : 700;
}

.title01:after{
	font-family : "Jost", sans-serif;
	font-weight : 500;
	text-align : center;
	letter-spacing : .06em;
	text-indent : .06em;
	display : block;
	color : #9e937d;
}

@media screen and (max-width: 750px){
	.title01{
		font-size : 1.8rem;
	}
	.title01:after{
		margin-top : calc( ( 4.5 +  3 ) * 100vw / 375 );
		font-size : 1.3rem;
	}
}

@media print,screen and (min-width: 751px){
	.title01{
		font-size : 2rem;
	}
	.title01:after{
		margin-top : calc( 4.5px +  3.5px );
		font-size : 1.6rem;
	}
}

.title02{
	text-align : center;
	letter-spacing : .04em;
	text-indent : .04em;
	font-weight : 700;
}

.title02:after{
	font-family : "Jost", sans-serif;
	font-weight : 500;
	text-align : center;
	letter-spacing : .06em;
	text-indent : .06em;
	display : block;
	color : #9e937d;
}

@media screen and (max-width: 750px){
	.title02{
		font-size : 1.8rem;
	}
	.title02:after{
		margin-top : calc( ( 4.5 +  3 ) * 100vw / 375 );
		font-size : 1.3rem;
	}
}

@media print,screen and (min-width: 751px){
	.title02{
		font-size : 2.2rem;
	}
	.title02:after{
		margin-top : calc( .5px + 5.5px +  3.5px );
		font-size : 1.6rem;
	}
	.title02.pc-left{
		text-indent : 0;
		text-align : left;
	}
	.title02.pc-left:after{
		text-indent : 0;
		text-align : left;
	}
}

.title03{
	text-align : center;
	letter-spacing : .1em;
	text-indent : .1em;
	font-weight : 700;
}

.title03:after{
	font-family : "Jost", sans-serif;
	font-weight : 500;
	text-align : center;
	letter-spacing : .06em;
	text-indent : .06em;
	display : block;
	color : #9e937d;
}

@media screen and (max-width: 750px){
	.title03{
		font-size : 1.8rem;
	}
	.title03:after{
		margin-top : calc( ( 4.5 +  3 ) * 100vw / 375 );
		font-size : 1.3rem;
	}
}

@media print,screen and (min-width: 751px){
	.title03{
		font-size : 2.2rem;
	}
	.title03:after{
		margin-top : calc( -1px + 5.5px + 4px );
		font-size : 1.8rem;
	}
	.title03.pc-left{
		text-indent : 0;
		text-align : left;
	}
	.title03.pc-left:after{
		text-indent : 0;
		text-align : left;
	}
}

/*--------------------------------------------
TEXT
---------------------------------------------*/

@media screen and (max-width: 750px){
	.text01{
		font-size : 1.35rem;
		letter-spacing : .05em;
		line-height : 1.9259;
	}
}

@media print,screen and (min-width: 751px){
	.text01{
		font-size : 1.4rem;
		line-height : 2;
	}
}

/*--------------------------------------------
LINKS
---------------------------------------------*/

.more01{
	display : flex;
	align-items : flex-start;
	justify-content : flex-end;
	font-weight : 500;
	letter-spacing : .06em;
	color : #36bbcc;
	width : 100%;
	font-family : "Jost", sans-serif;
}

.more01:after{
	content : "";
	display : block;
	background : url("../images/ui/parts/arrow01.svg") 0 0 / contain no-repeat;
	flex-shrink : 0;
	font-size : 0;
}

@media screen and (max-width: 750px){
	.more01{
		font-size : 1.8rem;
	}
	.more01:after{
		margin-left : calc( 10 * 100vw / 375 );
		width : calc( 67 * 100vw / 375 );
		height : calc( 9 * 100vw / 375 );
		margin-top : calc( 4.75 * 100vw / 375 );
	}
}

@media print,screen and (min-width: 751px){
	.more01{
		font-size : 1.8rem;
		margin-right : 14px;
	}
	.more01.is-sp{
		display : none;
	}
	.more01:after{
		margin-left : 10px;
		width : 67px;
		height : 9px;
		margin-top : 4.5px;
	}
}

.link01{
	display : flex;
	justify-content : flex-end;
	align-items : flex-start;
	color : #36bbcc;
	font-weight : 700;
}

.link01:after{
	content : "";
	display : block;
	background : url("../images/ui/parts/arrow03.svg") 0 0 / contain no-repeat;
	font-size : 0;
	flex-shrink : 0;
}

@media screen and (max-width: 750px){
	.link01{
		font-size : 1.6rem;
	}
	.link01:after{
		margin-left : calc( 14 * 100vw / 375 );
		width : calc( 36 * 100vw / 375 );
		height : calc( 9 * 100vw / 375 );
		margin-top : calc( 1 * 100vw / 375 );
	}
}

@media print,screen and (min-width: 751px){
	.link01{
		font-size : 1.6rem;
	}
	.link01:after{
		margin-left : 14px;
		width : 36px;
		height : 9px;
		margin-top : 1px;
	}
}

/*--------------------------------------------
FRANE
---------------------------------------------*/

.frame01{
	background-color : #fff;
	display : block;
}

@media screen and (max-width: 750px){
	.frame01{
		box-shadow : calc( 2 * 100vw / 375 ) calc( 2 * 100vw / 375 ) 0 rgba(158,147,125,.33);
		padding-left : calc( 25 * 100% / 335 );
		padding-right : calc( 25 * 100% / 335 );
	}
	.frame01 picture{
		width : 100%;
	}
}

@media print,screen and (min-width: 751px){
	.frame01{
		box-shadow : 3px 3px 0 rgba(158,147,125,.33);
	}
}