@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=block");
@charset "UTF-8";
/*--------------------------------------------
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;
}
/*--------------------------------------------
FONTS
---------------------------------------------*/
.noto{
	font-family : "Noto Sans", sans-serif;
}
/*--------------------------------------------
BACKGROUND COLOR
---------------------------------------------*/
.bg-gray{
	background-color : #e6e6e6;
}
.bg-blue{
	background-color : rgba(213,223,226.85);
}
.bg-red{
	background-color : #edd1d1;
}
/*--------------------------------------------
TITLE
---------------------------------------------*/
.title01{
	text-align : center;
	font-family : "Noto Sans", sans-serif;
	letter-spacing : .1em;
}
.title01:after{
	content : "";
	display : block;
	margin-left : auto;
	margin-right : auto;
}
.title01.title01-cube-gray:after{
	background-color : rgba(201,209,211,.85);
}
.title01.title01-cube-orange:after{
	background-color : #f9cf92;
}
.title01.title01-cube-blue:after{
	background-color : #8ebbbf;
}
.title01.title01-cube-purple:after{
	background-color : #a57292;
}
.title01.title01-cube-red:after{
	background-color : #edd1d1;
}
.title01.title01-cube-white:after{
	background-color : #fff;
}
@media screen and (max-width: 750px){
	.title01{
		font-size : calc( 3.4rem + .4rem );
	}
	.title01:after{
		margin-top : calc( 16 * 100vw / 750 );
		width : calc( 32 * 100vw / 750 );
		height : calc( 32 * 100vw / 750 );
	}
}
@media print,screen and (min-width: 751px){
	.title01{
		font-size : calc( 2rem + .2rem );
	}
	.title01:after{
		margin-top : 10px;
		width : 20px;
		height : 20px;
	}
}
.title02{
	font-family : "Noto Sans", sans-serif;
	letter-spacing : .1em;
	text-align : center;
}
.title02.title02-border-top{
	width : 100%;
	border-top-style : solid;
}
.title02:after{
	content : "";
	display : block;
	margin-left : auto;
	margin-right : auto;
}
@media screen and (max-width: 750px){
	.title02{
		font-size : calc( 3.2rem + .4rem );
	}
	.title02.title02-border-top{
		border-top-width : calc( 3 * 100vw / 750 );
	}
	.title02:after{
		width : calc( 89 * 100vw / 750 );
		height : calc( 5 * 100vw / 750 );
		margin-top : calc( 20 * 100vw / 750 );
	}
}
@media print,screen and (min-width: 751px){
	.title02{
		font-size : calc( 2rem + .2rem );
	}
	.title02.title02-border-top{
		border-top-width : 3px;
		padding-top : 42px;
	}
	.title02:after{
		width : 56px;
		height : 3px;
		margin-top : 12px;
	}
}
.title03{
	font-weight : 700;
	letter-spacing : .1em;
}
@media screen and (max-width: 750px){
	.title03{
		font-size : 3.6rem;
		line-height : 1.28;
	}
}
@media print,screen and (min-width: 751px){
	.title03{
		font-size : 1.8rem;
		line-height : 1.44;
	}
}
.title04{
	font-weight : 700;
	letter-spacing : .08em;
}
@media screen and (max-width: 750px){
	.title04{
		font-size : 2.8rem;
		line-height : 1.43;
	}
}
@media print,screen and (min-width: 751px){
	.title04{
		font-size : 1.4rem;
		line-height : 1.71;
	}
}
/*--------------------------------------------
LINK
---------------------------------------------*/
a{
	backface-visibility : hidden;
	will-change : opacity;
	transition : opacity .5s ease-in;
}
a:hover{
	opacity : .6;
}
.link01{
	position : relative;
}
.link01:after{
	content : "";
	display : block;
	background-repeat : no-repeat;
	position : absolute;
	backface-visibility : hidden;
	will-change : tranform;
	transition : transform .5s ease-in;
	background-size : contain;
}
.link01:hover:after{
	transform : translateX(25%);
}
@media screen and (max-width: 750px){
	.link01:after{
		background-image : url("../images/ui/icon/arrow01_sp.svg");
		width : calc( 83 * 100vw / 750 );
		height : calc( 15 * 100vw / 750 );
	}
	.link01.link01-arrow-center:after{
		left : calc( 50% - ( 41.5 * 100vw / 750 ) );
	}
	.link01.link01-arrow-white:after{
		background-image : url("../images/ui/icon/arrow01_white_sp.svg");
	}
}
@media print,screen and (min-width: 751px){
	.link01:after{
		background-image : url("../images/ui/icon/arrow01_pc.svg");
		width : 52px;
		height : 9px;
	}
	.link01.link01-arrow-center:after{
		left : calc( 50% - 26px );
	}
	.link01.link01-arrow-white:after{
		background-image : url("../images/ui/icon/arrow01_white_pc.svg");
	}
}
.link02{
	display : flex;
	align-items : center;
	margin-left : auto;
	margin-right : auto;
	color : #fff;
	letter-spacing : .1em;
	position : relative;
}
.link02:after{
	content : "";
	display : block;
	background-repeat : no-repeat;
	position : absolute;
	backface-visibility : hidden;
	will-change : tranform;
	transition : transform .5s ease-in;
	background-size : contain;
}
.link02:hover:after{
	transform : translateX(25%);
}
@media screen and (max-width: 750px){
	.link02{
		width : 100%;
		height : calc( 98 * 100vw / 750 );
		font-size : 3rem;
		padding-left : calc( 58 * 100vw / 750 );
	}
	.link02:after{
		background-image : url("../images/ui/icon/arrow02_white_sp.svg");
		width : calc( 24 * 100vw / 750 );
		height : calc( 28 * 100vw / 750 );
		top : calc( 35 * 100vw / 750 );
		right : calc( 40 * 100vw / 750 );
	}
}
@media print,screen and (min-width: 751px){
	.link02{
		width : 390px;
		height : 54px;
		font-size : 1.5rem;
		padding-left : 50px;
	}
	.link02:after{
		background-image : url("../images/ui/icon/arrow02_white_pc.svg");
		width : 14px;
		height : 16px;
		top : 19px;
		right : 28px;
	}
}
/*--------------------------------------------
TEXTS
---------------------------------------------*/
.lede01{
	text-align : center;
}
.text01{
	letter-spacing : .08em;
}
@media screen and (max-width: 750px){
	.text01{
		font-size : calc( 2.4rem + .4rem );
		line-height : 1.33;
	}
}
@media print,screen and (min-width: 751px){
	.text01{
		font-size : calc( 1.3rem + .2rem );
		letter-spacing : .08em;
		line-height : 1.54;
	}
}
.text02{
	letter-spacing : .08em;
}
@media screen and (max-width: 750px){
	.text02{
		font-size : calc( 2.08rem + .4rem );
		line-height : 1.67;
	}
}
@media print,screen and (min-width: 751px){
	.text02{
		font-size : calc( 1.3rem + .2rem );
		letter-spacing : .08em;
		line-height : 1.62;
	}
}