@charset "UTF-8";

/* --------------------------------------------
EXAMPLE
--------------------------------------------- */
@media print , screen and ( width > 750px ){
	#column01:has( #example ){
		margin-top : calc( 32 var( --remBase ) );
		margin-bottom : calc( 40 var( --remBase ) );
	}
}
#example > h1{
	padding-bottom : calc( 16 var( --remBase ) );
	border-bottom : solid calc( 4 var( --remBase ) ) var( --color01 );
}
@media screen and ( width <= 750px ){
	#example{
		margin-bottom : calc( 192 var( --remBase ) );
	}
	#example .paginatinArchive{
		margin-top : calc( 66 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#example .paginatinArchive{
		margin-top : calc( 66 var( --remBase ) );
	}
}
#example .profile{
	padding-top : calc( 24 var( --remBase ) );
	background-color : var( --color0103 );
}
@media screen and ( width <= 750px ){
	#example .profile{
		padding-bottom : calc( 39 var( --remBase ) );
		margin-top : calc( 38 var( --remBase ) );
		border-image-source : linear-gradient( var( --color0103 ) , var( --color0103 ) );
		border-image-slice : 0 fill;
		border-image-outset : 0 100vw 0 100vw;
	}
	#example .profile .box{
		margin-top : calc( 21 var( --remBase ) );
	}
	#example .profile h3{
		margin-top : calc( 24 var( --remBase ) );
	}
	#example .profile p{
		margin-top : calc( 8 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#example .profile{
		padding-inline : calc( 24 * 100% / 1040 );
		padding-bottom : calc( 34 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#example .profile .box{
		display : grid;
		grid-template-columns : calc( 280 * 100% / 992 );
		row-gap : calc( 8 var( --remBase ) );
		column-gap : calc( 16 * 100% / 992 );
		align-items : start;
		margin-top : calc( 22 var( --remBase ) );
	}
	#example .profile picture{
		grid-row : 1/4;
		grid-column : 1;
	}
	#example .profile h3{
		grid-row : 1;
		grid-column : 2;
	}
	#example .profile .box > div{
		grid-row : 2;
		grid-column : 2;
	}
	#example .profile .box > div p + p{
		margin-top : calc( 8 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#sidebar02 li{
		border-bottom : solid 1px #d9d9d9;
	}
	#sidebar02 li + li{
		margin-top : calc( 16 var( --remBase ) );
	}
	#sidebar02 a{
		display : grid;
		grid-template-columns : calc( 108 * 100% / 320 );
		column-gap : calc( 8 * 100% / 320 );
		align-items : start;
		padding-bottom : calc( 16 var( --remBase ) );
	}
	#sidebar02 picture{
		grid-row : 1;
		grid-column : 1;
	}
	#sidebar02 picture img{
		width : 100%;
		height : auto;
	}
	#sidebar02 hgroup{
		grid-row : 1;
		grid-column : 2;
	}
	#sidebar02 h4{
		margin-top : calc( 8 var( --remBase ) );
		font-weight : 400;
	}
}

/* --------------------------------------------
FAQ
--------------------------------------------- */
#faq .category{
	display : grid;
	place-items : center;
	width : fit-content;
	height : calc( 40 var( --remBase ) );
	padding-inline : calc( 20 var( --remBase ) );
	background-color : var( --bg01 );
	border-radius : 100vmax;
}
#faq h2{
	display : grid;
	align-items : start;
	justify-content : start;
	font-weight : 400;
}
#faq h2::before{
	display : grid;
	place-items : center;
	font-family : Alata , sans-serif;
	line-height : 1;
	color : white;
	content : "Q";
	background-color : var( --color01 );
}
#faq .answer{
	display : grid;
	align-items : start;
	justify-content : start;
}
#faq .answer::before{
	display : grid;
	place-items : center;
	font-family : Alata , sans-serif;
	font-weight : 400;
	line-height : 1;
	color : var( --color02 );
	content : "A";
	background-color : var( --color0203 );
}
@media screen and ( width <= 750px ){
	#faq{
		margin-top : calc( 40 var( --remBase ) );
	}
	#faq .category{
		height : calc( 40 var( --remBase ) );
		padding-inline : calc( 20 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#faq h2{
		grid-template-columns : calc( 48 var( --percentBase ) ) auto;
		column-gap : calc( 8 var( --percentBase ) );
		margin-top : calc( 48 var( --remBase ) );
	}
	#faq h2::before{
		height : calc( 48 var( --remBase ) );
		font-size : 2.6rem;
	}
	#faq h2 span{
		padding-block : calc( 9.6 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.8;
	}
	#faq .answer{
		grid-template-columns : calc( 48 var( --percentBase ) ) auto;
		column-gap : calc( 8 var( --percentBase ) );
		margin-top : calc( 8 var( --remBase ) );
	}
	#faq .answer::before{
		height : calc( 48 var( --remBase ) );
		font-size : 2.6rem;
	}
	#faq .answer > div{
		padding-top : calc( 9.6 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.8;
	}
	#faq .paginatinArchive{
		margin-top : calc( 73 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#faq{
		padding-bottom : calc( 98 var( --remBase ) );
		margin-top : calc( 117 var( --remBase ) );
	}
	#faq .category{
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#faq h2{
		grid-template-columns : calc( 80 var( --percentBase ) ) auto;
		column-gap : calc( 18 var( --percentBase ) );
		margin-top : calc( 16 var( --remBase ) );
	}
	#faq h2::before{
		height : calc( 80 var( --remBase ) );
		font-size : 3.2rem;
	}
	#faq h2 span{
		padding-block : calc( 20 var( --remBase ) );
	}
	#faq .answer{
		grid-template-columns : calc( 80 * 100% / 1320 ) auto;
		column-gap : calc( 18 * 100% / 1320 );
		padding-top : calc( 16 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
		border-top : solid 1px #d9d9d9;
	}
	#faq .answer::before{
		height : calc( 80 var( --remBase ) );
		font-size : 3.2rem;
	}
	#faq .answer > div{
		padding-top : calc( 24 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 2;
	}
	#faq .paginatinArchive{
		margin-top : calc( 80 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	#relationFaq{
		margin-top : calc( 72 var( --remBase ) );
		margin-bottom : calc( 80 var( --remBase ) );
	}
	#relationFaq h3{
		margin-bottom : calc( 43 var( --remBase ) );
		color : var( --color01 );
	}
}
@media print , screen and ( width > 750px ){
	#relationFaq{
		margin-top : calc( 80 var( --remBase ) );
	}
	#relationFaq h3{
		margin-bottom : calc( 40 var( --remBase ) );
		font-size : 3.2rem;
		font-weight : 500;
		line-height : 1.3;
	}
}

/* --------------------------------------------
NEWS and COLUMN
--------------------------------------------- */
@media print , screen and ( width > 750px ){
	#column01:has( :where( #news , #column ) ){
		margin-top : calc( 76 var( --remBase ) );
		margin-bottom : calc( 120 var( --remBase ) );
	}
}
:where( #news , #column ) .info{
	display : grid;
	align-items : start;
}
:where( #news , #column ) .info .categories{
	display : flex;
	flex-wrap : wrap;
	align-items : center;
	justify-content : start;
}
:where( #news , #column ) .info .categories a{
	display : grid;
	place-items : center;
	padding-inline : calc( 8 var( --remBase ) );
	font-size : 1.4rem;
	line-height : 1.3;
	color : white;
	border-style : solid;
	border-width : 1px;
}
@media screen and ( width <= 750px ){
	:where( #news , #column ){
		margin-top : calc( 28 var( --remBase ) );
		font-family : "Noto Sans JP";
	}
	:where( #news , #column ) > h1{
		font-size : 2.8rem;
		font-weight : 700;
		line-height : 1.3;
	}
	:where( #news , #column ) > h1::after{
		display : block;
		width : calc( 200 var( --percentBase ) );
		height : calc( 2 var( --remBase ) );
		margin-top : calc( 8 var( --remBase ) );
		font-size : 0;
		content : "";
		background-color : var( --color01 );
	}
	:where( #news , #column ) .info{
		grid-template-columns : calc( 97 var( --percentBase ) ) 1fr;
		margin-top : calc( 9 var( --remBase ) );
	}
	:where( #news , #column ) .info dt{
		display : none;
	}
	:where( #news , #column ) .info dd:not( :has( .display-sp ) ){
		display : none;
	}
	:where( #news , #column ) .info dl{
		grid-row : 1;
		grid-column : 1;
	}
	:where( #news , #column ) .info .display-sp{
		font-size : 0;
		color : transparent;
	}
	:where( #news , #column ) .info .display-sp::before{
		padding-top : calc( 1 var( --remBase ) );
		font-family : Lato , system-ui;
		font-size : 1.6rem;
		line-height : 1.5;
		color : var( --base );
		content : attr( datetime );
	}
	:where( #news , #column ) .info .categories{
		grid-row : 1;
		grid-column : 2;
		row-gap : calc( 4 var( --remBase ) );
		column-gap : calc( 4 var( --remBase ) );
	}
	:where( #news , #column ) .info .categories a{
		height : calc( 26 var( --remBase ) );
	}
	:where( #news , #column ) #content{
		margin-top : calc( 28 var( --remBase ) );
	}
	:where( #news , #column ) .paginatinArchive{
		margin-top : calc( 58 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	:where( #news , #column ) > h1{
		padding-bottom : calc( 16 var( --remBase ) );
		border-bottom : solid var( --color01 ) calc( 4 var( --remBase ) );
	}
	:where( #news , #column ) .info{
		grid-template-columns : auto auto 1fr;
		column-gap : calc( 8 * 100% / 1040 );
		margin-top : calc( 16 var( --remBase ) );
	}
	:where( #news , #column ) .info .categories{
		grid-row : 1;
		grid-column : 1;
		row-gap : calc( 8 var( --remBase ) );
		column-gap : calc( 8 var( --remBase ) );
	}
	:where( #news , #column ) .info .categories a{
		height : calc( 26 var( --remBase ) );
	}
	:where( #news , #column ) .info dl{
		display : grid;
		grid-row : 1;
		grid-column : 2;
		grid-auto-flow : column;
		align-items : start;
		padding-top : calc( 1 var( --remBase ) );
	}
	:where( #news , #column ) .info dd + dt::before{
		margin-inline : calc( 8 var( --remBase ) );
		white-space : pre;
		content : "｜";
	}
	:where( #news , #column ) .info .tags{
		display : flex;
		flex-wrap : wrap;
		grid-row : 1;
		grid-column : 3;
		row-gap : calc( 4 var( --remBase ) );
		column-gap : calc( 4 var( --remBase ) );
	}
	:where( #news , #column ) .info .tags::before{
		padding-right : calc( 4 var( --remBase ) );
		margin-left : calc( 8 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.5;
		white-space : pre;
		content : "｜";
	}
	:where( #news , #column ) .info .tags a{
		display : grid;
		place-items : center;
		height : calc( 24 var( --remBase ) );
		padding-inline : calc( 8 var( --remBase ) );
		font-size : 1.2rem;
		line-height : 1.3;
		background-color : var( --color0102 );
		border-radius : calc( 6 var( --remBase ) );
	}
	:where( #news , #column ) #content{
		margin-top : calc( 24 var( --remBase ) );
	}
	:where( #news , #column ) .paginatinArchive{
		margin-top : calc( 40 var( --remBase ) );
	}
}
:where( #example , #news , #column ) #content p + p{
	margin-top : 1em;
}
:where( #example , #news , #column ) #content picture img{
	max-width : 100%;
	height : auto;
}
@media screen and ( width <= 750px ){
	:where( #example , #news , #column ) #content p{
		font-size : 1.4rem;
		line-height : 2;
	}
	:where( #example , #news , #column ) #content h2{
		padding-block : calc( 1.8 var( --remBase ) );
		padding-left : calc( 8 var( --percentBase ) );
		margin-top : calc( 28 var( --remBase ) );
		font-size : 2.4rem;
		font-weight : 700;
		line-height : 1.3;
		border-left : calc( 4 var( --remBase ) ) solid var( --color01 );
	}
	:where( #example , #news , #column ) #content h2 + p{
		margin-top : calc( 28 var( --remBase ) );
	}
	:where( #example , #news , #column ) #content h3{
		padding-bottom : calc( 8 var( --remBase ) );
		margin-top : calc( 32 var( --remBase ) );
		font-size : 2.2rem;
		font-weight : 600;
		line-height : 1.3;
		border-bottom : solid 1px #d9d9d9;
	}
	:where( #example , #news , #column ) #content h3 + p{
		margin-top : calc( 28 var( --remBase ) );
	}
	:where( #example , #news , #column ) #content picture{
		margin-top : calc( 28 var( --remBase ) );
	}
	:where( #example , #news , #column ) #content p:has( picture ) picture{
		margin-bottom : calc( 16 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	:where( #example , #news , #column ) #content h2{
		margin-top : calc( 48 var( --remBase ) );
	}
	:where( #example , #news , #column ) #content h2 + p{
		margin-top : calc( 16 var( --remBase ) );
	}
	:where( #example , #news , #column ) #content h3{
		margin-top : calc( 16 var( --remBase ) );
	}
	:where( #example , #news , #column ) #content h3 + p{
		margin-top : calc( 16 var( --remBase ) );
	}
	:where( #example , #news , #column ) #content picture{
		margin-top : calc( 28 var( --remBase ) );
	}
	:where( #example , #news , #column ) #content p:has( picture ){
		overflow : hidden;
	}
	:where( #example , #news , #column ) #content p:has( picture ) picture{
		float : right;
		width : calc( 320 * 100% / 1040 );
		margin-top : 0;
		margin-bottom : calc( 16 var( --remBase ) );
		margin-left : calc( 16 * 100% / 1040 );
	}
}
@media ( hover : hover ){
	#column01:has( :where( #news , #column ) ) .info a:hover{
		opacity : .5;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#column01:has( :where( #news , #column ) ) .info a{
		transition : opacity var( --transitionBase );
	}
}