@charset "UTF-8";

/* --------------------------------------------
COLUMN
--------------------------------------------- */
@media print , screen and ( width > 750px ){
	#column01{
		display : grid;
		grid-template-columns : calc( 1040 var( --percentBase ) ) calc( 320 var( --percentBase ) );
		align-items : start;
		justify-content : space-between;
	}
}

/* --------------------------------------------
FAQ
--------------------------------------------- */
.faqList summary{
	display : grid;
	align-items : start;
	justify-content : start;
}
.faqList summary::-webkit-details-marker{
	display : none;
}
.faqList summary::before{
	display : grid;
	place-items : center;
	font-family : Alata , sans-serif;
	line-height : 1;
	color : white;
	content : "Q";
	background-color : var( --color01 );
}
.faqList .answer{
	display : grid;
	grid-template-rows : 0fr;
	grid-template-columns : 1fr;
}
.faqList .answer > div{
	display : grid;
	align-items : start;
	justify-content : start;
	overflow : hidden;
}
.faqList .answer > div::before{
	display : grid;
	place-items : center;
	font-family : Alata , sans-serif;
	line-height : 1;
	color : var( --color02 );
	content : "A";
	background-color : var( --color0203 );
}
.faqList .answer a{
	-webkit-text-decoration : underline;
	text-decoration : underline;
}
.faqList details.is-open .answer{
	grid-template-rows : 1fr;
}
@media screen and ( width <= 750px ){
	.faqList details{
		padding-top : calc( 16 var( --remBase ) );
	}
	.faqList details:not( :last-of-type ){
		padding-bottom : calc( 16 var( --remBase ) );
		border-bottom : solid 1px #d9d9d9;
	}
	.faqList summary{
		grid-template-columns : calc( 48 var( --percentBase ) ) auto;
		column-gap : calc( 8 var( --percentBase ) );
	}
	.faqList summary::before{
		height : calc( 48 var( --remBase ) );
		font-size : 2.6rem;
	}
	.faqList summary span{
		padding-block : calc( 9.6 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.8;
	}
	.faqList .answer > div{
		grid-template-columns : calc( 48 var( --percentBase ) ) auto;
		column-gap : calc( 8 var( --percentBase ) );
	}
	.faqList .answer > div::before{
		height : calc( 48 var( --remBase ) );
		font-size : 2.6rem;
	}
	.faqList .answer > div > div{
		padding-top : calc( 9.6 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.8;
	}
	.faqList details.is-open .answer > div{
		padding-top : calc( 8 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	.faqList details{
		padding-block : calc( 16 var( --remBase ) );
		border-bottom : solid 1px #d9d9d9;
	}
	.faqList summary{
		grid-template-columns : calc( 80 var( --percentBase ) ) auto;
		column-gap : calc( 8 var( --percentBase ) );
	}
	.faqList summary::before{
		height : calc( 80 var( --remBase ) );
		font-size : 3.2rem;
	}
	.faqList summary span{
		padding-block : calc( 20 var( --remBase ) );
	}
	.faqList .answer{
		margin-left : calc( 80 var( --percentBase ) );
	}
	.faqList .answer > div{
		grid-template-columns : calc( 80 * 100% / 1320 ) auto;
		column-gap : calc( 18 * 100% / 1320 );
	}
	.faqList .answer > div::before{
		height : calc( 80 var( --remBase ) );
		font-size : 3.2rem;
	}
	.faqList .answer > div > div{
		padding-top : calc( 24 var( --remBase ) );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.faqList .answer{
		transition : grid-template-rows var( --transitionBase );
	}
	.faqList .answer > div{
		transition : padding var( --transitionBase );
	}
}

/* --------------------------------------------
PAGINATION
--------------------------------------------- */
.pagination{
	position : relative;
	left : 50%;
	display : inline-grid;
	grid-auto-flow : column;
	translate : -50% 0;
}
.pagination a , .pagination span{
	display : grid;
	place-items : center;
}
.pagination .prev{
	position : absolute;
	left : 0;
}
.pagination .next{
	position : absolute;
	right : 0;
}
.pagination{
	grid-auto-columns : calc( 40 var( --remBase ) );
	column-gap : calc( 8 var( --remBase ) );
}
.pagination :is( a , span ){
	height : calc( 40 var( --remBase ) );
}
.pagination :is( .prev , .next , .current ){
	background-color : var( --color01 );
}
.pagination :is( .prev , .next ){
	width : calc( 40 var( --remBase ) );
	border : solid 1px var( --color01 );
}
.pagination :is( .prev , .next ) img{
	height : calc( 14 var( --remBase ) );
	filter : var( --filterWhite );
}
.pagination a:not( .prev,.next ) , .pagination span{
	font-size : 1.6rem;
}
.pagination a:not( .prev,.next ){
	background-color : var( --color0103 );
}
.pagination .current{
	color : white;
}
.pagination .prev{
	left : calc( -48 var( --remBase ) );
	border-radius : calc( 6 var( --remBase ) ) 0 0 calc( 6 var( --remBase ) );
}
.pagination .next{
	right : calc( -48 var( --remBase ) );
	border-radius : 0 calc( 6 var( --remBase ) ) calc( 6 var( --remBase ) ) 0;
}
@media ( hover : hover ){
	.pagination a:not( .prev,.next ):hover{
		color : white;
		background-color : var( --color01 );
	}
	.pagination a:is( .prev , .next ):hover{
		background-color : white;
	}
	.pagination a:is( .prev , .next ):hover img{
		filter : var( --filterColor01 );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.pagination a:not( .prev,.next ){
		transition : background-color var( --transitionBase ) , color var( --transitionBase );
	}
	.pagination a:is( .prev , .next ){
		transition : background-color var( --transitionBase );
	}
	.pagination a:is( .prev , .next )::after{
		transition : filter var( --transitionBase );
	}
}
.paginatinArchive{
	display : grid;
	grid-template-rows : calc( 40 var( --remBase ) );
	grid-template-columns : calc( 40 var( --remBase ) ) calc( 136 var( --remBase ) ) calc( 40 var( --remBase ) );
	column-gap : calc( 8 var( --remBase ) );
	align-items : center;
	justify-content : center;
}
.paginatinArchive a{
	display : grid;
	place-items : center;
	height : 100%;
}
.paginatinArchive :where( .prev , .next ){
	display : grid;
	grid-row : 1;
	place-items : center;
	background-color : var( --color01 );
	border : solid 1px var( --color01 );
}
.paginatinArchive :where( .prev , .next ) img{
	height : calc( 14 var( --remBase ) );
	filter : var( --filterWhite );
}
.paginatinArchive .prev{
	grid-column : 1;
	border-radius : calc( 6 var( --remBase ) ) 0 0 calc( 6 var( --remBase ) );
}
.paginatinArchive .archive{
	grid-row : 1;
	grid-column : 2;
	font-size : 1.6rem;
	background-color : var( --color0103 );
}
.paginatinArchive .next{
	grid-column : 3;
	border-radius : 0 calc( 6 var( --remBase ) ) calc( 6 var( --remBase ) ) 0;
}
@media ( hover : hover ){
	.paginatinArchive .archive:hover{
		color : var( --color01 );
	}
	.paginatinArchive :where( .prev , .next ):hover{
		background-color : white;
	}
	.paginatinArchive :where( .prev , .next ):hover img{
		filter : var( --filterColor01 );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.paginatinArchive .archive{
		transition : color var( --transitionBase );
	}
	.paginatinArchive :where( .prev , .next ){
		transition : background-color var( --transitionBase );
	}
	.paginatinArchive :where( .prev , .next ) img{
		transition : filter var( --transitionBase );
	}
}

/* --------------------------------------------
APPS
--------------------------------------------- */
#apps , #appsCopy{
	position : relative;
	overflow-x : clip;
	background-color : var( --color0103 );
}
#apps ul , #appsCopy ul{
	display : grid;
	align-items : center;
	justify-content : space-between;
}
#apps > picture , #appsCopy > picture{
	position : absolute;
}
@media screen and ( width <= 750px ){
	#apps , #appsCopy{
		position : relative;
		padding-block : calc( 26 var( --remBase ) );
		overflow-x : clip;
	}
	#apps::before , #appsCopy::before{
		position : absolute;
		top : calc( -36 var( --remBase ) );
		left : calc( -13 var( --viewportBase ) );
		display : block;
		width : calc( 105.75 var( --viewportBase ) );
		height : calc( 71.29 var( --remBase ) );
		content : "";
		background : image-set( url( "../images/apps/icon.avif" ) type( "image/avif" ) , url( "../images/apps/icon.avif" ) type( "image/webp" ) ) 0 0 / contain no-repeat;
	}
	#apps p , #appsCopy p{
		width : calc( 299 var( --percentBase ) );
		margin-top : calc( 8 var( --remBase ) );
	}
	#apps ul , #appsCopy ul{
		grid-template-columns : repeat( 2 , auto );
		column-gap : calc( 11.4 var( --percentBase ) );
		justify-content : center;
		margin-top : calc( 18 var( --remBase ) );
	}
	#apps ul img , #appsCopy ul img{
		height : calc( 52.87 var( --remBase ) );
	}
	#apps > picture , #appsCopy > picture{
		top : calc( -24 var( --remBase ) );
		left : calc( 233 var( --viewportBase ) );
	}
	#apps > picture img , #appsCopy > picture img{
		height : calc( 183.06 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#apps , #appsCopy{
		display : grid;
		grid-template-rows : auto 1fr;
		grid-template-columns : calc( 118 var( --percentBase ) ) calc( 582 var( --percentBase ) ) calc( 60 var( --percentBase ) ) calc( 416 var( --percentBase ) );
		row-gap : calc( 16 var( --remBase ) );
		align-content : start;
		align-items : start;
		padding-block : calc( 54 var( --remBase ) );
	}
	#apps h3 , #appsCopy h3{
		grid-row : 1;
		grid-column : 2;
		padding-top : calc( 37 var( --remBase ) );
	}
	#apps p , #appsCopy p{
		grid-row : 2;
		grid-column : 2;
		width : calc( 559 * 100% / 582 );
		font-size : 2rem;
		line-height : 2;
	}
	#apps ul , #appsCopy ul{
		grid-template-columns : repeat( 2 , calc( 200 * 100% / 416 ) );
		grid-row : 1/3;
		grid-column : 4;
	}
	#apps li , #appsCopy li{
		background-color : white;
	}
	#apps a > picture:first-of-type img , #appsCopy a > picture:first-of-type img{
		width : 100%;
		height : auto;
	}
	#apps a > picture:nth-of-type( 2 ) , #appsCopy a > picture:nth-of-type( 2 ){
		text-align : center;
	}
	#apps a > picture:nth-of-type( 2 ) img , #appsCopy a > picture:nth-of-type( 2 ) img{
		height : calc( 166 var( --remBase ) );
	}
	#apps > picture , #appsCopy > picture{
		top : calc( -49 var( --remBase ) );
	}
	#apps > picture img , #appsCopy > picture img{
		height : calc( 393 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	#apps > picture , #appsCopy > picture{
		left : calc( 1057 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	#apps > picture , #appsCopy > picture{
		left : calc( 50% + 357px );
	}
}

/* --------------------------------------------
FOOTER
--------------------------------------------- */
#toTop{
	background-color : var( --color01 );
}
#toTop.is-fixed{
	position : fixed;
	bottom : 0;
}
#toTop:not( .is-fixed ){
	position : absolute;
	translate : 0 -100%;
	top : 0;
}
#toTop{
	display : grid;
	place-items : center;
}
@media screen and ( width <= 750px ){
	#toTop{
		right : calc( 16 var( --viewportBase ) );
		width : calc( 40 var( --viewportBase ) );
		height : calc( 40 var( --remBase ) );
	}
	#toTop img{
		height : calc( 24 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#toTop{
		height : calc( 70 var( --remBase ) );
	}
	#toTop img{
		height : calc( 21 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	#toTop{
		right : 0;
		width : calc( 70 var( --percentBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	#toTop{
		right : calc( 50% - 700px );
		width : 70px;
	}
}
#footer .copyrights{
	position : relative;
}
@media screen and ( width <= 750px ){
	#footer{
		margin-top : calc( 48 var( --remBase ) );
		background-color : var( --color01 );
	}
}
@media print , screen and ( width > 750px ){
	#footer{
		display : grid;
		grid-template-rows : auto calc( 46 var( --remBase ) ) auto calc( 24 var( --remBase ) ) calc( 50 var( --remBase ) );
		grid-template-columns : auto 1fr auto calc( 70 var( --percentBase ) );
		align-items : start;
		justify-content : space-between;
	}
	#footer .nav{
		display : grid;
		grid-row : 1;
		grid-column : 1/5;
		grid-auto-flow : column;
		align-items : center;
		justify-content : center;
		border-bottom : solid calc( 2 var( --remBase ) ) #d9d9d9;
	}
	#footer .nav::after , #footer .nav li::before{
		font-size : 1.2rem;
		font-weight : 400;
		line-height : 1.5;
		color : var( --color01 );
		content : "＊";
	}
	#footer .nav li{
		display : grid;
		grid-template-columns : auto auto;
		align-items : center;
		justify-content : start;
	}
	#footer .nav a{
		padding-block : calc( ( ( 89 var( --remBase ) ) - 1lh ) / 2 );
		padding-inline : calc( 24 var( --remBase ) );
		font-size : 1.8rem;
		font-weight : 500;
		line-height : 1.5;
	}
	#footer .logo{
		display : block;
		grid-row : 3;
		grid-column : 1;
		width : fit-content;
	}
	#footer .logo img{
		height : calc( 61.37 var( --remBase ) );
	}
	#footer .links{
		display : grid;
		grid-row : 3;
		grid-column : 3;
		grid-auto-flow : column;
		justify-content : end;
		padding-top : calc( 34 var( --remBase ) );
	}
	#footer .links li + li::before{
		font-size : 1.2rem;
		font-weight : 400;
		line-height : 1.5;
		color : var( --color01 );
		content : "＊";
	}
	#footer .links a{
		padding-inline : calc( 24 var( --remBase ) );
		font-size : 1.8rem;
		font-weight : 500;
		line-height : 1.5;
	}
	#footer .copyrights{
		grid-row : 5;
		grid-column : 1/5;
		height : 100%;
	}
}
#copyright{
	display : grid;
	place-items : center;
	color : white;
	text-align : center;
}
@media screen and ( width <= 750px ){
	#copyright{
		height : calc( 124 var( --remBase ) );
		font-size : 1.6rem;
		font-weight : 500;
		line-height : 1.7;
	}
}
@media print , screen and ( width > 750px ){
	#copyright{
		height : 100%;
		font-size : 1.8rem;
		line-height : calc( 28 / 18 );
		border-image-source : linear-gradient( var( --color01 ) , var( --color01 ) );
		border-image-slice : 0 fill;
		border-image-outset : 0 100vw 0 100vw;
	}
}