@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,500&display=swap");

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

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

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

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

@media print,screen and (min-width: 769px){
	.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: 768px){
	[data-sp-after]:after{
		content : attr( data-sp-after );
		white-space : pre;
	}
}

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

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

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

/*--------------------------------------------
IMAGE
---------------------------------------------*/

.full{
	width : 100%;
	height : auto;
}

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

/*--------------------------------------------
FONT
---------------------------------------------*/

.roboto{
	font-family : "Roboto", sans-serif;
}

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

.title01{
	font-weight : 900;
	letter-spacing : .1em;
}

@media screen and (max-width: 768px){
	.title01{
		font-size : 6rem;
		text-indent : .1em;
		text-align : center;
	}
}

@media print,screen and (min-width: 769px){
	.title01{
		font-size : 6rem;
	}
}

.title02{
	font-weight : 900;
	letter-spacing : .1em;
}

@media screen and (max-width: 768px){
	.title02{
		font-size : 3.6rem;
		line-height : 1.27;
	}
}

@media print,screen and (min-width: 769px){
	.title02{
		font-size : 3rem;
		line-height : 1.33;
	}
}

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

.text01{
	letter-spacing : .1em;
}

@media screen and (max-width: 768px){
	.text01{
		font-size : 2.6rem;
		line-height : 2;
	}
}

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

/*--------------------------------------------
LINK
---------------------------------------------*/

.more01{
	display : block;
	font-weight : 500;
	text-align : center;
	letter-spacing : .1em;
	text-indent : .1em;
	border-bottom-style : solid;
	border-bottom-color : currentColor;
}

@media screen and (max-width: 768px){
	.more01{
		width : calc( 300 * 100% / 720 );
		font-size : 2.8rem;
		padding-bottom : calc( ( 20 - 3 ) * 100vw / 768 );
		margin-left : auto;
		margin-right : auto;
		border-bottom-width : calc( 3 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 769px){
	.more01{
		border-bottom-width : 2px;
		font-size : 1.6rem;
		width : 150px;
		padding-bottom : calc( 10px - 1.5px );
	}
}