@charset "UTF-8";

/* --------------------------------------------
BACKGROUND PATTERN
--------------------------------------------- */
.graph-paper{
	position : relative;
	overflow-x : clip;
}
.graph-paper::before , .graph-paper::after{
	position : absolute;
	inset : 0;
	z-index : -1;
	display : block;
	font-size : 0;
	content : "";
}
@media print , screen and ( width > 750px ){
	.graph-paper::before{
		background : linear-gradient( 180deg , color-mix( in sRGB , black 15% , transparent ) 1px , transparent 1px );
		background-size : 100% calc( 50 var( --remBase ) );
	}
	.graph-paper::after{
		background : linear-gradient( 90deg , color-mix( in sRGB , black 15% , transparent ) 1px , transparent 1px );
		background-size : calc( 50 var( --remBase ) ) 100%;
	}
}
.bg-yellow{
	background-color : var( --yellow );
}
.bg-glay{
	background-color : #f1efeb;
}

/* --------------------------------------------
HEADER GROUP
--------------------------------------------- */
.hgroup01 :where( p , h3 ){
	font-weight : 700;
	line-height : 1.3;
}
.hgroup01 p{
	display : grid;
	align-items : center;
	color : black;
	background-color : var( --yellow );
}
.hgroup01 h3{
	display : grid;
	justify-content : start;
	color : white;
	background-color : black;
}
@media screen and ( width <= 750px ){
	.hgroup01{
		display : grid;
		grid-template-rows : calc( 25 var( --remBase ) ) calc( 30 var( --remBase ) ) 1fr;
		grid-template-columns : calc( 117 var( --percentBase ) ) 1fr;
	}
	.hgroup01 :where( p , h3 ){
		font-size : 3rem;
	}
	.hgroup01 p{
		z-index : 1;
		grid-row : 1/3;
		grid-column : 1;
		border-image-source : linear-gradient( var( --yellow ) , var( --yellow ) );
		border-image-slice : 0 fill;
		border-image-outset : 0 0 0 100vw;
	}
	.hgroup01 h3{
		grid-row : 2/-1;
		grid-column : 1/-1;
		padding-top : calc( 32 var( --remBase ) );
		padding-bottom : calc( 20 var( --remBase ) );
		border-image-source : linear-gradient( black , black );
		border-image-slice : 0 fill;
		border-image-outset : 0 100vw 0 100vw;
	}
}
@media print , screen and ( width > 750px ){
	.hgroup01{
		display : grid;
		grid-template-columns : calc( 128 var( --percentBase ) ) 1fr;
	}
	.hgroup01 :where( p , h3 ){
		padding-block : calc( 8 var( --remBase ) );
		font-size : 3.2rem;
	}
	.hgroup01 p{
		justify-content : center;
	}
	.hgroup01 h3{
		padding-inline : calc( 16 * 100% / 1272 );
	}
}

/* --------------------------------------------
TITLE
--------------------------------------------- */
.title01{
	display : block;
	width : fit-content;
	font-family : Afacad , sans-serif;
	font-weight : 700;
	line-height : 1.2;
	color : var( --title );
}
@media screen and ( width <= 750px ){
	.title01{
		font-size : 5rem;
	}
}
@media print , screen and ( width > 750px ){
	.title01{
		font-size : 10rem;
	}
}

/* --------------------------------------------
TEXTS
--------------------------------------------- */
.catch01{
	font-weight : 900;
	line-height : 1.5;
	color : var( --title );
}
@media screen and ( width <= 750px ){
	.catch01{
		font-size : 3.6rem;
	}
	.catch01 span{
		font-size : 2rem;
	}
	.catch01 .sp-right{
		display : block;
		width : fit-content;
		margin-left : auto;
	}
	.catch01 mark{
		position : relative;
		background-color : transparent;
	}
	.catch01 mark::after{
		position : absolute;
		top : 100%;
		left : 0;
		display : block;
		width : 100%;
		height : calc( 19 var( --remBase ) );
		font-size : 0;
		content : "";
		background-color : var( --yellow );
	}
}
@media print , screen and ( width > 750px ){
	.catch01{
		font-size : 6rem;
		text-align : center;
	}
	.catch01 span{
		font-size : 3.4rem;
	}
	.catch01 mark{
		background : linear-gradient( to bottom , transparent calc( 9rem - ( ( 41 var( --remBase ) ) + 1.5rem) ) , var( --yellow ) calc( 9rem - ( ( 41 var( --remBase ) ) + 1.5rem) ) , var( --yellow ) calc( 9rem - 1.5rem ) , transparent calc( 9rem - 1.5rem ) , transparent 100% ) ;
	}
}
@media print , screen and ( width > 750px ){
	.ls-pc{
		font-size : 2.4rem;
		font-weight : 700;
		line-height : 1.3;
	}
}
@media print , screen and ( width > 750px ){
	.lm-pc{
		font-size : 2.4rem;
		line-height : 1.7;
	}
}
@media print , screen and ( width > 750px ){
	.ll-pc{
		font-size : 2.4rem;
		line-height : 1.7;
	}
}
@media print , screen and ( width > 750px ){
	.ms-pc{
		font-size : 1.6rem;
		line-height : 1.3;
	}
}
@media print , screen and ( width > 750px ){
	.mm-pc{
		font-size : 1.6rem;
		line-height : 1.7;
	}
}
@media print , screen and ( width > 750px ){
	.ml-pc{
		font-size : 1.6rem;
		line-height : 2;
	}
}
@media screen and ( width <= 750px ){
	.ls-sp{
		font-size : 2rem;
		line-height : 1.3;
	}
}
@media screen and ( width <= 750px ){
	.ml-sp{
		font-size : 1.6rem;
		line-height : 2;
	}
}
.text-center{
	text-align : center;
}
@media screen and ( width <= 750px ){
	.text-center-sp{
		text-align : center;
	}
}
@media print , screen and ( width > 750px ){
	.text-center-pc{
		text-align : center;
	}
}

/* --------------------------------------------
LINK
--------------------------------------------- */
.link01{
	display : block;
	width : fit-content;
	font-family : Afacad , sans-serif;
	font-size : 2.4rem;
	font-weight : 700;
	line-height : 1.4;
}
.link01.center{
	margin-inline : auto;
}
.link02{
	display : grid;
	place-items : center;
	margin-inline : auto;
	font-weight : 900;
	line-height : 1.5;
	color : black;
	background-color : var( --yellow );
	border-radius : 100vmax;
}
@media screen and ( width <= 750px ){
	.link02{
		width : max( calc( 336 var( --viewportBase ) ) , 100% );
		height : calc( 56 var( --remBase ) );
		font-size : 1.6rem;
	}
}
@media print , screen and ( width > 750px ){
	.link02{
		width : calc( 368 var( --percentBase ) );
		height : calc( 68 var( --remBase ) );
		font-size : 2.4rem;
	}
}
.link03{
	display : grid;
	place-items : center;
	margin-inline : auto;
	font-weight : 900;
	line-height : 1.5;
	color : var( --yellow );
	background-color : black;
	border-radius : 100vmax;
}
@media screen and ( width <= 750px ){
	.link03{
		width : max( calc( 336 var( --viewportBase ) ) , 100% );
		height : calc( 56 var( --remBase ) );
		font-size : 1.6rem;
	}
}
@media print , screen and ( width > 750px ){
	.link03{
		width : calc( 440 var( --percentBase ) );
		height : calc( 68 var( --remBase ) );
		font-size : 2.4rem;
	}
}

/* --------------------------------------------
LIST
--------------------------------------------- */
.list-splide01{
	display : grid;
	grid-auto-flow : column;
	justify-content : start;
}
.list-splide01 .splide__slide , .list-splide01 a{
	display : grid;
	grid-template-rows : subgrid;
	grid-row : span 3;
}
.list-splide01 picture{
	width : 100%;
	height : calc( 207 var( --remBase ) );
}
.list-splide01 picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
.list-splide01 h3{
	margin-top : calc( 13 var( --remBase ) );
	font-size : 1.6rem;
	font-weight : 700;
	line-height : 1.3;
}
.list-splide01 ul{
	display : flex;
	flex-wrap : wrap;
	row-gap : calc( 8 var( --remBase ) );
	column-gap : calc( 8 * 100% / 320 );
	margin-top : calc( 8 var( --remBase ) );
}
.list-splide01 ul li{
	display : grid;
	place-items : center;
	height : calc( 26 var( --remBase ) );
	padding-inline : calc( 8 var( --remBase ) );
	font-size : 1.4rem;
	line-height : 1.3;
	color : white;
}
@media screen and ( width <= 750px ){
	.list-splide01{
		grid-auto-columns : calc( 320 * 100% / 368 );
	}
}
@media print , screen and ( width > 750px ){
	.list-splide01{
		grid-auto-columns : min( 360px , calc( 360 * 100% / 820 ) );
	}
}
.list-articles01 > li > a > div{
	display : grid;
	grid-template-columns : auto 1fr;
	align-items : start;
}
.list-articles01 > li > a > div time{
	line-height : 1.5;
	color : #333;
}
.list-articles01 > li > a > div p{
	display : grid;
	place-items : center;
	width : fit-content;
	color : white;
}
.list-articles01 :where( h2 , h3 ){
	font-weight : 400;
}
@media screen and ( width <= 750px ){
	.list-articles01 > li{
		border-bottom : solid 1px #e5e5ea;
	}
	.list-articles01 > li > a{
		display : block;
		padding-bottom : calc( 16 var( --remBase ) );
	}
	.list-articles01 > li:not( :first-child ) a{
		padding-top : calc( 16 var( --remBase ) );
	}
	.list-articles01 > li > a > div{
		column-gap : calc( 9 var( --percentBase ) );
	}
	.list-articles01 > li > a > div time{
		margin-top : calc( 2.5 var( --remBase ) );
		font-size : 1.4rem;
	}
	.list-articles01 > li > a > div p{
		height : calc( 26 var( --remBase ) );
		padding-inline : calc( 8 var( --remBase ) );
		font-size : 1.4rem;
		line-height : 1.3;
	}
	.list-articles01 :where( h2 , h3 ){
		margin-top : calc( 9 var( --remBase ) );
		font-size : 1.4rem;
		line-height : 1.5;
	}
	.list-articles01:has( picture ) picture{
		margin-bottom : calc( 8 var( --remBase ) );
	}
	.list-articles01:has( picture ) picture img{
		width : 100%;
		height : auto;
	}
}
@media print , screen and ( width > 750px ){
	.list-articles01 > li + li{
		margin-top : calc( 40 var( --remBase ) );
	}
	.list-articles01 > li > a > div{
		column-gap : calc( 16 * 100% / 1040 );
	}
	.list-articles01 > li > a > div time{
		margin-top : calc( 7 var( --remBase ) );
		font-size : 1.8rem;
		line-height : 1.5;
	}
	.list-articles01 > li > a > div p{
		height : calc( 44 var( --remBase ) );
		padding-inline : calc( 16 var( --remBase ) );
		font-size : 1.8rem;
		line-height : 2;
	}
	.list-articles01 :where( h2 , h3 ){
		font-size : 2.6rem;
		line-height : 1.3;
		letter-spacing : .05em;
	}
	.list-articles01:has( picture ) > li > a{
		display : grid;
		grid-template-rows : 1fr auto calc( 16 var( --remBase ) ) auto 1fr;
		grid-template-columns : calc( 300 * 100% / 1040 ) calc( 716 * 100% / 1040 );
		align-items : center;
		justify-content : space-between;
	}
	.list-articles01:has( picture ) > li picture{
		grid-row : 1/-1;
		grid-column : 1;
		height : calc( 226 var( --remBase ) );
	}
	.list-articles01:has( picture ) > li picture img{
		width : 100%;
		height : 100%;
		object-fit : cover;
		object-position : center;
	}
	.list-articles01:has( picture ) > li > a > div{
		grid-row : 2;
		grid-column : 2;
	}
	.list-articles01:has( picture ) > li :where( h2 , h3 ){
		grid-row : 4;
		grid-column : 2;
	}
	.list-articles01:not( :has( picture ) ) > li > a{
		display : block;
	}
	.list-articles01:not( :has( picture ) ) :where( h2 , h3 ){
		margin-top : calc( 16 var( --remBase ) );
	}
}

/* --------------------------------------------
TAB・TABLIST
--------------------------------------------- */
ul[role="tablist"] button{
	display : grid;
	place-items : center;
	width : 100%;
	height : 100%;
}
ul[role="tablist"] button[aria-selected="true"]{
	font-weight : 700;
	background-color : var( --yellow );
}
ul[role="tablist"] button[aria-selected="false"]{
	background-color : #f1f2ed;
}
@media ( hover : hover ){
	ul[role="tablist"] button[aria-selected="false"]:hover{
		font-weight : 700;
		background-color : var( --yellow );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	ul[role="tablist"] button{
		transition : background var( --transitionBase ) , font-weight var( --transitionBase );
	}
}
[role="tabpanel"][hidden]{
	display : none;
	animation : fadeOut 1s var( --easeOutExpo ) forwards;
}
[role="tabpanel"]:not( [hidden] ){
	animation : fadeIn 1s var( --easeOutExpo ) forwards;
}
@keyframes fadeIn{
	0%{
		display : grid;
		opacity : 0;
	}
	100%{
		display : grid;
		opacity : 1;
	}
}
@keyframes fadeOut{
	0%{
		display : grid;
		opacity : 1;
	}
	100%{
		display : none;
		opacity : 0;
	}
}

/* --------------------------------------------
DETAILS
--------------------------------------------- */
details{
	padding-block : calc( 24 var( --remBase ) );
	border-bottom : solid 1px #d9d9d9;
}
details:first-of-type{
	border-top : solid 1px #d9d9d9;
}
details summary{
	display : grid;
	grid-template-columns : auto 1fr;
	align-self : start;
}
details summary::before{
	display : grid;
	grid-column : 1;
	place-items : center;
	width : auto;
	aspect-ratio : 1;
	font-family : Afacad , sans-serif;
	font-size : 3.2rem;
	font-weight : 700;
	line-height : 1;
	color : black;
	content : "Q";
	background-color : var( --yellow );
	border-radius : 50%;
}
details summary span{
	grid-row : 1;
	grid-column : 2;
	color : var( --title );
}
details .detailsContent{
	display : grid;
	grid-template-rows : 0fr;
	grid-template-columns : 1fr;
}
details .detailsContent > div{
	display : grid;
	grid-template-columns : auto 1fr;
	align-items : start;
	overflow : hidden;
}
details .detailsContent > div::before{
	display : grid;
	grid-column : 1;
	place-items : center;
	width : auto;
	aspect-ratio : 1;
	font-family : Afacad , sans-serif;
	font-size : 3.2rem;
	font-weight : 700;
	line-height : 1;
	color : white;
	content : "A";
	background-color : black;
	border-radius : 50%;
}
details .detailsContent p , details .detailsContent a{
	line-height : 2;
}
details.is-open .detailsContent{
	grid-template-rows : 1fr;
}
details .link{
	display : block;
	width : fit-content;
}
@media screen and ( width <= 750px ){
	details summary{
		column-gap : calc( 18 var( --percentBase ) );
	}
	details summary::before{
		height : calc( 60 var( --remBase ) );
	}
	details summary span{
		font-size : 1.4rem;
		line-height : 2;
	}
	details .detailsContent{
		margin-left : calc( 24 var( --percentBase ) );
	}
	details .detailsContent > div{
		column-gap : calc( 18 * 100% / 312 );
	}
	details .detailsContent > div::before{
		height : calc( 60 var( --remBase ) );
	}
	details .detailsContent p , details .detailsContent a{
		font-size : 1.4rem;
	}
	details.is-open .detailsContent > div{
		margin-top : calc( 8 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	details summary::before{
		height : calc( 80 var( --remBase ) );
	}
	details summary span{
		padding-top : calc( 24 var( --remBase ) );
		line-height : 2;
	}
	details .detailsContent > div::before{
		height : calc( 80 var( --remBase ) );
	}
	details .detailsContent div div{
		padding-top : calc( 24 var( --remBase ) );
	}
	details .detailsContent p , details .detailsContent a{
		font-size : 1.6rem;
	}
	details.is-open .detailsContent > div{
		margin-top : calc( 24 var( --remBase ) );
	}
}
@media ( hover : hover ){

}
@media ( prefers-reduced-motion : no-preference ){
	details .detailsContent{
		transition : grid-template-rows var( --transitionBase );
	}
	details .detailsContent > div{
		transition : margin-top var( --transitionBase );
	}
}