@charset "UTF-8";

/* --------------------------------------------
color
--------------------------------------------- */
.color01{
	color : var( --color01 );
}
.color0102{
	color : var( --color0102 );
}
.color0103{
	color : var( --color0103 );
}
.color02{
	color : var( --color02 );
}
.color0202{
	color : var( --color0202 );
}
.color0203{
	color : var( --color0203 );
}
.color03{
	color : var( --color03 );
}
.color0302{
	color : var( --color0302 );
}
.color0303{
	color : var( --color0303 );
}
.color0304{
	color : var( --color0304 );
}
.bg01{
	background-color : var( --bg01 );
}
.bg-color01{
	background-color : var( --color01 );
}
.bg-color0102{
	background-color : var( --color0102 );
}
.bg-color0103{
	background-color : var( --color0103 );
}
.bg-color02{
	background-color : var( --color02 );
}
.bg-color0202{
	background-color : var( --color0202 );
}
.bg-color0203{
	background-color : var( --color0203 );
}
.bg-color03{
	background-color : var( --color03 );
}
.bg-color0302{
	background-color : var( --color0302 );
}
.bg-color0303{
	background-color : var( --color0303 );
}
.bg-color0304{
	background-color : var( --color0304 );
}
.category01{
	background-color : var( --category01 );
}
.category02{
	background-color : var( --category02 );
}
.category03{
	background-color : var( --category03 );
}
.category04{
	background-color : var( --category04 );
}
.category05{
	background-color : var( --category05 );
}
.category06{
	background-color : var( --category06 );
}

/* --------------------------------------------
PARAGRAH
--------------------------------------------- */
.text.center{
	text-align : center;
}
@media screen and ( width <= 750px ){
	.text{
		font-size : 1.4rem;
	}
	.text.center-sp{
		text-align : center;
	}
}
@media print , screen and ( width > 750px ){
	.text{
		font-size : 1.6rem;
	}
	.text.center-pc{
		text-align : center;
	}
}
@media screen and ( width <= 750px ){
	.text-sp{
		font-size : 1.4rem;
	}
}
@media print , screen and ( width > 750px ){
	.text-pc{
		font-size : 1.6rem;
	}
}
@media print , screen and ( width >= 1440px ){
	.text-l-pc{
		font-size : 1.8rem;
	}
}
.lh{
	line-height : 1.7;
}
@media screen and ( width <= 750px ){
	.lh-sp{
		line-height : 1.7;
	}
}
@media print , screen and ( width > 750px ){
	.lh-pc{
		line-height : 1.7;
	}
}
.lh-l{
	line-height : 2;
}
@media screen and ( width <= 750px ){
	.lh-l-sp{
		line-height : 2;
	}
}
@media print , screen and ( width > 750px ){
	.lh-l-pc{
		line-height : 2;
	}
}
.lh-s{
	line-height : 1.5;
}
@media screen and ( width <= 750px ){
	.lh-s-sp{
		line-height : 1.5;
	}
}
@media print , screen and ( width > 750px ){
	.lh-s-pc{
		line-height : 1.5;
	}
}

/* --------------------------------------------
title
--------------------------------------------- */
.center{
	text-align : center;
}
@media screen and ( width <= 750px ){
	.center-sp{
		text-align : center;
	}
}
@media print , screen and ( width > 750px ){
	.center-pc{
		text-align : center;
	}
}
.title01{
	font-family : "M PLUS 2" , sans-serif;
	font-weight : 600;
	line-height : 1.3;
}
.title01.style::after{
	display : block;
	height : calc( 2 var( --remBase ) );
	font-size : 0;
	content : "";
	background-color : var( --color01 );
}
.title01.center{
	text-indent : .1em;
}
@media screen and ( width <= 750px ){
	.title01{
		font-size : 2.8rem;
	}
	.title01.style::after{
		width : calc( 368 var( --remBase ) );
		margin-top : calc( 8 var( --remBase ) );
	}
	.title01.center-sp{
		text-indent : .1em;
	}
}
@media print , screen and ( width > 750px ){
	.title01{
		font-size : 4.4rem;
		letter-spacing : .1em;
	}
	.title01.style::after{
		width : calc( 400 var( --remBase ) );
		margin-top : calc( 18 var( --remBase ) );
	}
	.title01.center-pc{
		text-indent : .1em;
	}
}
@media screen and ( width <= 750px ){
	.title01-sp{
		font-family : "M PLUS 2" , sans-serif;
		font-size : 2.8rem;
		font-weight : 600;
		line-height : 1.3;
		letter-spacing : .1em;
	}
	.title01-sp.style::after{
		width : calc( 368 var( --remBase ) );
		height : calc( 2 var( --remBase ) );
		margin-top : calc( 8 var( --remBase ) );
		font-size : 0;
		content : "";
		background-color : var( --color01 );
	}
}
@media print , screen and ( width > 750px ){
	.title01-pc{
		font-family : "M PLUS 2" , sans-serif;
		font-size : 4.4rem;
		font-weight : 600;
		line-height : 1.3;
		letter-spacing : .1em;
	}
	.title01-pc.style::after{
		width : calc( 400 var( --remBase ) );
		height : calc( 2 var( --remBase ) );
		margin-top : calc( 18 var( --remBase ) );
		font-size : 0;
		content : "";
		background-color : var( --color01 );
	}
	.title01-pc.center{
		text-indent : .1em;
	}
}
.title02{
	font-weight : 600;
	line-height : 1.3;
}
@media screen and ( width <= 750px ){
	.title02{
		font-size : 2.4rem;
	}
}
@media print , screen and ( width > 750px ){
	.title02{
		font-size : 3.2rem;
	}
}
@media screen and ( width <= 750px ){
	.title02-sp{
		font-size : 2.4rem;
		line-height : 1.3;
	}
}
@media print , screen and ( width > 750px ){
	.title02-pc{
		font-size : 3.2rem;
		line-height : 1.3;
	}
	.title02-pc.style-pc::after{
		display : block;
		width : calc( 200 var( --remBase ) );
		height : calc( 4 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
		font-size : 0;
		content : "";
		background-color : var( --color01 );
	}
}
.lede01{
	font-weight : 700;
	line-height : 1.5;
}
@media screen and ( width <= 750px ){
	.lede01{
		font-size : 2rem;
	}
}
@media print , screen and ( width > 750px ){
	.lede01{
		font-size : 2.4rem;
	}
}
@media screen and ( width <= 750px ){
	.lede01-sp{
		font-size : 2rem;
		font-weight : 700;
		line-height : 1.5;
	}
}
@media print , screen and ( width > 750px ){
	.lede01-pc{
		font-size : 2.4rem;
		font-weight : 700;
		line-height : 1.5;
	}
}
.title03{
	font-size : 2rem;
}
@media screen and ( width <= 750px ){
	.title03{
		font-weight : 600;
		line-height : 1.3;
	}
}
@media print , screen and ( width > 750px ){
	.title03{
		font-weight : 500;
		line-height : 1.5;
	}
}
@media screen and ( width <= 750px ){
	.title03-sp{
		font-size : 2rem;
		font-weight : 600;
		line-height : 1.3;
	}
}
@media screen and ( width <= 750px ){
	.title03-pc{
		font-size : 2rem;
		font-weight : 500;
		line-height : 1.5;
	}
}

/* --------------------------------------------
BUTTON
--------------------------------------------- */
.link01{
	display : grid;
	grid-template-columns : auto calc( 30 var( --remBase ) );
	column-gap : calc( 9 var( --remBase ) );
	align-items : center;
	justify-content : center;
	width : fit-content;
	padding-block : calc( 12 var( --remBase ) );
	padding-inline : calc( 16 var( --remBase ) - 1px );
	font-size : 1.8rem;
	font-weight : 700;
	line-height : 1.3;
	color : white;
	background-color : var( --color01 );
	border : solid 1px var( --color01 );
	border-radius : calc( 12 var( --remBase ) );
}
.link01::before , .link01::after{
	display : block;
	grid-row : 1;
	grid-column : 2;
	height : calc( 30 var( --remBase ) );
	font-size : 0;
	content : "";
}
.link01::before{
	background-color : white;
	border-radius : 50%;
}
.link01::after{
	display : grid;
	place-items : center;
	background-image : url( "../images/ui/arrow/right01.svg" );
	filter : var( --filterColor01 );
	background-repeat : no-repeat;
	background-position : center;
	background-size : auto calc( 12 var( --remBase ) );
}
@media ( hover : hover ){
	.link01:hover{
		color : var( --color01 );
		background-color : white;
	}
	.link01:hover::before{
		background-color : var( --color01 );
	}
	.link01:hover::after{
		filter : var( --filterWhite );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.link01{
		transition : color var( --transitionBase ) , background var( --transitionBase );
	}
	.link01::before{
		transition : background var( --transitionBase );
	}
	.link01::after{
		transition : filter var( --transitionBase );
	}
}
:where( .link01 ).right{
	margin-left : auto;
}
@media screen and ( width <= 750px ){
	:where( .link01 ).right-sp{
		margin-left : auto;
	}
}
@media print , screen and ( width > 750px ){
	:where( .link01 ).right-pc{
		margin-left : auto;
	}
}
:where( .link01 ).center{
	margin-inline : auto;
}
@media screen and ( width <= 750px ){
	:where( .link01 ).center-sp{
		margin-inline : auto;
	}
}
@media print , screen and ( width > 750px ){
	:where( .link01 ).center-pc{
		margin-inline : auto;
	}
}
.link02{
	display : grid;
	grid-template-columns : auto calc( 14 var( --remBase ) );
	column-gap : calc( 3 var( --remBase ) );
	place-items : center;
	width : fit-content;
	height : calc( 40 var( --remBase ) );
	padding-left : calc( 32 var( --remBase ) );
	padding-right : calc( 16 var( --remBase ) );
	font-size : 1.8rem;
	line-height : 1.3;
	color : white;
	background-color : var( --color01 );
	border : solid 1px var( --color01 );
	border-radius : 100vmax;
}
.link02::after{
	display : block;
	width : 100%;
	height : calc( 14 var( --remBase ) );
	font-size : 0;
	content : "";
	background : url( "../images/ui/arrow/next01.svg" ) center / contain no-repeat;
	filter : var( --filterWhite );
}
.link02.right{
	margin-left : auto;
}
@media screen and ( width <= 750px ){
	.link02.right-sp{
		margin-left : auto;
	}
}
@media print , screen and ( width > 750px ){
	.link02.right-pc{
		margin-left : auto;
	}
}
@media ( hover : hover ){
	.link02:hover{
		color : var( --color01 );
		background-color : white;
	}
	.link02:hover::after{
		translate : 25% 0;
		filter : var( --filterColor01 );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.link02{
		transition : background var( --transitionBase ) , color var( --transitionBase );
	}
	.link02::after{
		transition : translate var( --transitionBase ) , filter var( --transitionBase );
	}
}
.link03{
	display : grid;
	grid-template-columns : calc( 18 * 100% / 318 ) auto;
	column-gap : calc( 5.5 * 100% / 320 );
	align-items : center;
	justify-content : center;
	height : calc( 61 var( --remBase ) );
	margin-inline : auto;
	font-size : 2rem;
	font-weight : 500;
	color : white;
	letter-spacing : .05em;
	background-color : var( --color01 );
	border : solid 1px var( --color01 );
	border-radius : 100vmax;
}
.link03::before{
	height : calc( 18 var( --remBase ) );
}
.link03::before{
	display : block;
	font-size : 0;
	content : "";
	background : url( "../images/ui/arrow/circle01_base.svg" ) center / contain no-repeat;
	filter : var( --filterWhite );
}
@media screen and ( width <= 750px ){
	.link03{
		width : calc( 318 var( --percentBase ) );
	}
}
@media print , screen and ( width > 750px ){
	.link03{
		width : calc( 318 var( --remBase ) );
	}
}
@media ( hover : hover ){
	.link03:hover{
		color : var( --color01 );
		background-color : white;
	}
	.link03:hover::before{
		filter : var( --filterColor01 );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.link03{
		transition : background var( --transitionBase ) , color var( --transitionBase );
	}
	.link03::before{
		transition : filter var( --transitionBase );
	}
}
.youtube{
	position : relative;
}
.youtube::before{
	position : absolute;
	top : 50%;
	left : 50%;
	display : block;
	font-size : 0;
	content : "";
	background : url( "../images/ui/icon/youtube.svg" ) center / contain no-repeat;
	translate : -50% -50%;
}