@charset "UTF-8";

/* --------------------------------------------
BACKCROUND COLOR
--------------------------------------------- */
.bg-green{
	color : var( --TextColor03 );
	background-color : var( --AccentColor01 );
}
@media screen and ( max-width : 750px ){
	.bg-green-sp{
		color : var( --TextColor03 );
		background-color : var( --AccentColor01 );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.bg-green-pc{
		color : var( --TextColor03 );
		background-color : var( --AccentColor01 );
	}
}
.bg01{
	background-color : var( --BackColor01 );
}
@media screen and ( max-width : 750px ){
	.bg01-sp{
		background-color : var( --BackColor01 );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.bg01-pc{
		background-color : var( --BackColor01 );
	}
}
.ac01{
	color : var( --AccentColor01 );
}
.ac01-2{
	color : var( --AccentColor01-2 );
}
.ac01-3{
	color : var( --AccentColor01-3 );
}
.ac02{
	color : var( --AccentColor02 );
}
.ac02-2{
	color : var( --AccentColor02-2 );
}
.ac02-3{
	color : var( --AccentColor02-3 );
}
.ac03{
	color : var( --AccentColor03 );
}
.ac03-2{
	color : var( --AccentColor03-2 );
}
.ac03-3{
	color : var( --AccentColor03-3 );
}
.ac03-4{
	color : var( --AccentColor03-4 );
}
.c01{
	color : var( --TextColor01 );
}
.c02{
	color : var( --TextColor02 );
}
.c03{
	color : var( --TextColor03 );
}
.c04{
	color : var( --TextColor04 );
}
.c05{
	color : var( --TextColor05 );
}
.bg01{
	background-color : var( --BackColor01 );
}
.bg02{
	background-color : var( --BackColor02 );
}
.bg-cate01{
	background-color : var( --CateColor01 );
}
.bg-cate02{
	background-color : var( --CateColor02 );
}
.bg-cate03{
	background-color : var( --CateColor03 );
}
.bg-cate04{
	background-color : var( --CateColor04 );
}
.bg-cate05{
	background-color : var( --CateColor05 );
}
.bg-cate06{
	background-color : var( --CateColor06 );
}
.rowGap08 > * + *{
	margin-top : calc( 8 var( --remBase ) );
}
.rowGap16 > * + *{
	margin-top : calc( 16 var( --remBase ) );
}
@media screen and ( max-width : 750px ){
	.rowGap16 > .caption01 + *{
		margin-top : calc( 32 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.rowGap16 > .caption01 + *{
		margin-top : calc( 24 var( --remBase ) );
	}
	.contents :where( .layout01 , .layout02 ) .rowGap16 * + *{
		margin-top : calc( 8 var( --remBase ) );
	}
}
@media screen and ( max-width : 750px ){
	.rowGap24-16 > * + *{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.rowGap24-16 > * + *{
		margin-top : calc( 24 var( --remBase ) );
	}
}

/* --------------------------------------------
MARGIN
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	.mt-s{
		margin-top : calc( 80 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.mt-s{
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media screen and ( max-width : 750px ){
	.mb-s{
		margin-bottom : calc( 80 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.mb-s{
		margin-bottom : calc( 40 var( --remBase ) );
	}
}
@media screen and ( max-width : 750px ){
	.mt-m{
		margin-top : calc( 140 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.mt-m{
		margin-top : calc( 80 var( --remBase ) );
	}
}
@media screen and ( max-width : 750px ){
	.mb-m{
		margin-bottom : calc( 140 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.mb-m{
		margin-bottom : calc( 80 var( --remBase ) );
	}
}
@media screen and ( max-width : 750px ){
	.mt-l{
		margin-top : calc( 140 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.mt-l{
		margin-top : calc( 120 var( --remBase ) );
	}
}
@media screen and ( max-width : 750px ){
	.mb-l{
		margin-bottom : calc( 140 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.mb-l{
		margin-bottom : calc( 120 var( --remBase ) );
	}
}
@media screen and ( max-width : 750px ){
	.pt-s{
		padding-top : calc( 80 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.pt-s{
		padding-top : calc( 40 var( --remBase ) );
	}
}
@media screen and ( max-width : 750px ){
	.pb-s{
		padding-bottom : calc( 80 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.pb-s{
		padding-bottom : calc( 40 var( --remBase ) );
	}
}
@media screen and ( max-width : 750px ){
	.pt-m{
		padding-top : calc( 140 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.pt-m{
		padding-top : calc( 80 var( --remBase ) );
	}
}
@media screen and ( max-width : 750px ){
	.pb-m{
		padding-bottom : calc( 140 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.pb-m{
		padding-bottom : calc( 80 var( --remBase ) );
	}
}
@media screen and ( max-width : 750px ){
	.pt-l{
		padding-top : calc( 140 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.pt-l{
		padding-top : calc( 120 var( --remBase ) );
	}
}
@media screen and ( max-width : 750px ){
	.pb-l{
		padding-bottom : calc( 140 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.pb-l{
		padding-bottom : calc( 120 var( --remBase ) );
	}
}

/* --------------------------------------------
HEAD GROUP
--------------------------------------------- */
.hgroup01{
	display : grid;
}
.hgroup01 :where( h1 , h2 , h3 , h4 , h5 , h6 ){
	display : grid;
	place-items : center;
	width : fit-content;
	padding-block : calc( 4 var( --remBase ) );
	font-size : calc( 16 var( --fontCoef ) );
	font-weight : 700;
	line-height : calc( 26 / 16 );
	color : var( --TextColor03 );
	background-color : var( --AccentColor01 );
}
@media screen and ( max-width : 750px ){
	.hgroup01 :where( h1 , h2 , h3 , h4 , h5 , h6 ){
		padding-left : calc( 16 var( --remBase ) );
		padding-right : calc( 11 var( --remBase ) );
	}
	.hgroup01 > * + *{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.hgroup01 :where( h1 , h2 , h3 , h4 , h5 , h6 ){
		padding-left : calc( 16 var( --remBase ) );
		padding-right : calc( 72 var( --remBase ) );
	}
	.hgroup01 > * + *{
		margin-top : calc( 10 var( --remBase ) );
	}
}
.hgroup02{
	background-color : var( --BackColor01 );
}
.hgroup02 :where( h1 , h2 , h3 , h4 , h5 , .title ){
	font-weight : 700;
	line-height : 1.3;
	color : var( --AccentColor01 );
	letter-spacing : .05em;
}
.hgroup02 p{
	line-height : 1.7;
	border-top : solid 1px #d9d9d9;
}
@media screen and ( max-width : 750px ){
	.hgroup02{
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 16 var( --viewportBase ) );
	}
	.hgroup02 :where( h1 , h2 , h3 , h4 , h5 , .title ){
		font-size : calc( 28 var( --fontCoef ) );
	}
	.hgroup02 p{
		padding-top : calc( 8 var( --remBase ) );
		margin-top : calc( 8 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.hgroup02{
		padding-block : calc( 24 var( --remBase ) );
	}
	.contents .hgroup02{
		padding-inline : calc( 16 * 100% / 1040 );
	}
	.hgroup02 :where( h1 , h2 , h3 , h4 , h5 , .title ){
		font-size : calc( 32 var( --fontCoef ) );
	}
	.hgroup02 p{
		padding-top : calc( 4 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
	}
}

/* --------------------------------------------
CAPTION
--------------------------------------------- */
.caption01{
	font-weight : 700;
	line-height : 1.3;
	letter-spacing : .1em;
}
.caption01::after{
	display : block;
	font-size : 0;
	content : "";
	background-color : var( --AccentColor01 );
}
.caption01.center{
	text-align : center;
	text-indent : .1em;
}
.caption01.center::after{
	margin-inline : auto;
}
@media screen and ( max-width : 750px ){
	.caption01{
		font-size : 2.8rem;
	}
	.caption01::after{
		width : calc( 200 var( --percentBase ) );
		height : calc( 4 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.caption01{
		font-size : calc( 34 var( --fontCoef ) );
	}
	.caption01::after{
		width : calc( 400 var( --percentBase ) );
		height : calc( 4 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
}
.caption02{
	font-size : calc( 24 var( --fontCoef ) );
	font-weight : 600;
	line-height : 1.3;
}
.caption02.center{
	text-align : center;
}
.caption03{
	font-size : calc( 24 var( --fontCoef ) );
	font-weight : 600;
	line-height : 1.3;
}
.caption03::after{
	display : block;
	height : calc( 4 var( --remBase ) );
	margin-top : calc( 16 var( --remBase ) );
	font-size : 0;
	content : "";
	background-color : var( --AccentColor01 );
}
@media screen and ( max-width : 750px ){
	.caption03::after{
		width : calc( 100 var( --percentBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.caption03::after{
		width : calc( 200 var( --percentBase ) );
	}
}
.caption04{
	font-size : calc( 24 var( --fontCoef ) );
	font-weight : 600;
	line-height : 1.3;
	border-left-color : var( --AccentColor01 );
	border-left-style : solid;
	border-left-width : calc( 4 var( --remBase ) );
}
@media screen and ( max-width : 750px ){
	.caption04{
		padding-block : calc( 2 var( --remBase ) );
		padding-left : calc( 8 var( --remBase ) );
		letter-spacing : .1em;
	}
}
@media print , screen and ( min-width : 750.02px ){
	.caption04{
		padding-block : calc( 4 var( --remBase ) );
		padding-left : calc( 12 var( --remBase ) );
	}
}
.caption05{
	position : relative;
	display : block;
	width : fit-content;
	padding-block : calc( 14 var( --remBase ) );
	padding-inline : calc( 16 var( --remBase ) );
	font-size : calc( 24 var( --fontCoef ) );
	font-weight : 600;
	line-height : 1.3;
	background-color : var( --BackColor01 );
}
.caption05::before{
	position : absolute;
	left : 0;
	display : block;
	width : calc( 12 var( --remBase ) );
	height : calc( 100% - ( 28 var( --remBase ) ) );
	content : "";
	background-color : var( --AccentColor01 );
}
.caption06{
	padding-bottom : calc( 8 var( --remBase ) );
	font-weight : 600;
	line-height : 1.3;
	border-bottom : solid 1px #d9d9d9;
}
@media screen and ( max-width : 750px ){
	.caption06{
		font-size : calc( 20 var( --fontCoef ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.caption06{
		font-size : calc( 22 var( --fontCoef ) );
	}
}

/* --------------------------------------------
LINK
--------------------------------------------- */
.link01{
	display : grid;
	align-items : center;
	justify-content : center;
	width : fit-content;
	font-weight : 500;
	border-radius : 100vmax;
}
.link01:not( .green , .yellow , .gray ){
	background-color : #eee;
}
.link01.green{
	color : white;
	background-color : var( --AccentColor01 );
}
.link01.yellow{
	color : white;
	background-color : var( --AccentColor02 );
}
.link01.gray{
	color : white;
	background-color : var( --AccentColor03-4 );
}
.link01:not( .no-arrow )::before{
	display : block;
	font-size : 0;
	content : "";
	background : url( "../images/ui/arrow/circle01.svg" ) left center / contain no-repeat;
}
.link01:not(.no-arrow, .green, .yellow, .gray)::before{
	filter : var( --filterAccentColor01 );
}
.link01:not( .no-arrow ).green::before{
	filter : var( --filterWhite );
}
.link01:not( .no-arrow ).yellow::before{
	filter : var( --filterWhite );
}
.link01:not( .no-arrow ).gray::before{
	filter : var( --filterWhite );
}
@media screen and ( max-width : 750px ){
	.link01{
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 24 var( --remBase ) );
		margin-inline : auto;
		font-size : 2rem;
		line-height : 1.3;
	}
	.link01:not( .no-arrow ){
		grid-template-columns : calc( 20 var( --remBase ) ) auto;
		column-gap : calc( 4 var( --remBase ) );
	}
	.link01:not( .no-arrow )::before{
		height : calc( 20 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.link01{
		padding-block : calc( 16 var( --remBase ) );
		font-size : calc( 20 var( --fontCoef ) );
		line-height : normal;
		letter-spacing : .05em;
	}
	.link01::before{
		height : calc( 18 var( --remBase ) );
	}
	.link01:not( .narrow ){
		padding-inline : calc( 62 var( --remBase ) );
	}
	.link01.narrow{
		padding-inline : calc( 32 var( --remBase ) );
	}
	.link01:not( .no-arrow ){
		grid-template-columns : calc( 18 var( --remBase ) ) auto;
		column-gap : calc( 4 var( --remBase ) );
	}
}
.link02{
	display : grid;
	align-items : center;
	justify-content : center;
	width : fit-content;
	padding-block : calc( 8 var( --remBase ) );
	padding-left : calc( 32 var( --remBase ) );
	font-family : "Roboto Slab" , "Noto Sans JP" , serif;
	font-size : calc( 18 var( --fontCoef ) );
	font-weight : 400;
	line-height : 1.3;
	border-radius : 100vmax;
}
.link02:not( .no-arrow ){
	grid-template-columns : auto calc( 24 var( --remBase ) );
	padding-right : calc( 16 var( --remBase ) );
}
.link02:not( .no-arrow )::after{
	display : block;
	height : calc( 24 var( --remBase ) );
	font-size : 0;
	content : "";
	background : url( "../images/ui/arrow/base01.svg" ) left center / contain no-repeat;
}
.link02.no-arrow{
	padding-right : calc( 32 var( --remBase ) );
}
.link02.green{
	color : var( --TextColor03 );
	background-color : var( --AccentColor01 );
}
.link02.green::after{
	filter : var( --filterWhite );
}
.link02.gray{
	color : var( --TextColor03 );
	background-color : var( --AccentColor03-4 );
}
.link02.gray::after{
	filter : var( --filterWhite );
}
.link02.lgray{
	background-color : var( --BackColor01 );
}
.link02.white{
	color : var( --TextColor01 );
	background-color : var( --BackColor02 );
}
.link02.white::after{
	filter : var( --filterTextColor01 );
}
@media screen and ( max-width : 750px ){
	.link02:not( .no-arrow ){
		column-gap : calc( 8 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.link02:not( .no-arrow ){
		column-gap : calc( 4 var( --remBase ) );
	}
}
hr{
	border-top : solid 1px currentColor;
}

/* --------------------------------------------
RATING
--------------------------------------------- */
:is( .rating01 , .rating02 ){
	background-color : color-mix( in sRGB , var( --AccentColor02 ) , transparent 85% );
}
:is( .rating01 , .rating02 ) dt{
	display : grid;
	align-items : center;
	justify-content : start;
	padding-block : calc( 6 var( --remBase ) );
	clip-path : polygon( 0 0 , 100% 0 , calc( 96 * 100% / 105 ) 58% , 100% 100% , 0 100% );
	font-size : calc( 18 var( --fontCoef ) );
	font-weight : 700;
	color : var( --TextColor03 );
	background-color : var( --AccentColor02 );
}
:is( .rating01 , .rating02 ) dd{
	display : grid;
	justify-content : start;
}
:is( .rating01 , .rating02 ) dd .mask{
	position : absolute;
	width : 0;
	height : 0;
}
:is( .rating01 , .rating02 ) dd svg{
	width : 100%;
	height : auto;
	font-size : 0;
	fill : var( --CateColor02 );
	fill : #ffbe46;
	stroke-width : 0;
}
:is( .rating01 , .rating02 ) dd span{
	display : grid;
	grid-template-columns : auto auto;
	align-items : baseline;
	font-weight : 700;
}
:is( .rating01 , .rating02 ) dd span::after{
	font-weight : 400;
	white-space : pre;
	content : " / 5.0";
}
@media screen and ( max-width : 750px ){
	:is( .rating01 , .rating02 ){
		display : grid;
		grid-template-columns : calc( 105 var( --percentBase ) ) 1fr;
		column-gap : calc( 8 var( --percentBase ) );
		align-items : center;
		padding-block : calc( 16 var( --remBase ) );
	}
	:is( .rating01 , .rating02 ) dt{
		height : calc( 30 var( --remBase ) );
		padding-left : calc( 6 * 100% / 105 );
	}
	:is( .rating01 , .rating02 ) dd{
		grid-template-columns : repeat( 5 , calc( 22 * 100% / 263 ) ) auto;
		column-gap : calc( 4 * 100% / 263 );
		align-items : baseline;
	}
	:is( .rating01 , .rating02 ) dd span{
		padding-left : calc( 16 var( --remBase ) );
		font-size : 2.4rem;
	}
	:is( .rating01 , .rating02 ) dd span::after{
		font-size : 1.6rem;
	}
}
@media print , screen and ( min-width : 750.02px ){
	:is( .rating01 , .rating02 ) dd span{
		font-size : calc( 24 var( --fontCoef ) );
	}
	:is( .rating01 , .rating02 ) dd span::after{
		font-size : calc( 16 var( --fontCoef ) );
	}
}
.rating01 dt{
	padding-block : calc( 6 var( --remBase ) );
}
@media print , screen and ( min-width : 750.02px ){
	.rating01{
		position : relative;
		padding-top : calc( 28 var( --remBase ) );
		padding-bottom : calc( 8 var( --remBase ) );
	}
	.rating01 dt{
		position : absolute;
		top : calc( -4 var( --remBase ) );
		left : 0;
		width : calc( 105 * 100% / 224 );
		padding-left : calc( 6 * 100% / 224 );
	}
	.rating01 dd{
		grid-template-columns : repeat( 5 , calc( 19 * 100% / 216 ) ) auto;
		column-gap : calc( 6 * 100% / 216 );
		align-items : baseline;
		padding-left : calc( 8 * 100% / 224 );
	}
	.rating01 dd span{
		padding-left : calc( 2 var( --remBase ) );
		line-height : 1.7;
	}
	.rating01 dd span::after{
		line-height : 1.7;
	}
}
@media print , screen and ( min-width : 750.02px ){
	.rating02{
		display : grid;
		grid-template-columns : calc( 105 * 100% / 320 ) 1fr;
		column-gap : calc( 6 * 100% / 320 );
		align-items : center;
	}
	.rating02 dt{
		height : calc( 30 var( --remBase ) );
		padding-left : calc( 6 * 100% / 105 );
	}
	.rating02 dd{
		grid-template-columns : repeat( 5 , calc( 19 * 100% / 209 ) ) auto;
		column-gap : calc( 4 * 100% / 209 );
		align-items : center;
	}
	.rating02 dd span{
		align-self : baseline;
		padding-left : calc( 6 var( --remBase ) );
	}
}
@media screen and ( max-width : 750px ){
	.rating02{
		padding-block : calc( 16 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.rating02{
		padding-block : calc( 8 var( --remBase ) );
	}
}

/* --------------------------------------------
Number of affiliated managers
--------------------------------------------- */
.noam{
	display : grid;
	align-items : center;
	justify-content : start;
}
.noam dt{
	display : grid;
	grid-template-columns : calc( 39 * 100% / 157 ) auto;
	column-gap : calc( 8 * 100% / 157 );
	align-items : center;
	justify-content : start;
	padding-block : calc( 4 var( --remBase ) );
	padding-left : calc( 8 * 100% / 165 );
	font-size : calc( 16 var( --fontCoef ) );
	font-weight : 700;
	line-height : 1.3;
	color : var( --TextColor03 );
	background-color : var( --AccentColor03-4 );
}
.noam dt::before{
	display : block;
	height : calc( 37 var( --remBase ) );
	font-size : 0;
	content : "";
	background : url( "../images/ui/icon/member.svg" ) left center / contain no-repeat;
}
.noam dd{
	display : grid;
	grid-template-columns : auto auto;
	align-items : baseline;
	justify-content : start;
	font-size : calc( 16 var( --fontCoef ) );
	line-height : 1.5;
}
.noam dd span{
	font-size : calc( 24 var( --fontCoef ) );
	font-weight : 700;
	line-height : 1;
}
@media screen and ( max-width : 750px ){
	.noam{
		column-gap : calc( 16 var( --percentBase ) );
	}
}
.noam02 dt{
	display : grid;
	align-items : center;
	justify-content : start;
	font-size : calc( 16 var( --fontCoef ) );
	font-weight : 700;
	line-height : 1.3;
	color : var( --TextColor03 );
	background-color : var( --AccentColor03-4 );
}
.noam02 dt::before{
	display : block;
	font-size : 0;
	content : "";
	background : url( "../images/ui/icon/member.svg" ) left center / contain no-repeat;
}
.noam02 ul{
	font-size : 0;
}
.noam02 li{
	display : inline;
	font-size : calc( 16 var( --remBase ) );
	line-height : 1.5;
}
.noam02 li:not( :last-child )::after{
	white-space : pre;
	content : "、";
}
@media screen and ( max-width : 750px ){
	.noam02 dt{
		grid-template-columns : calc( 39 * 100% / 360 ) auto;
		column-gap : calc( 8 * 100% / 360 );
		padding-block : calc( 8 var( --remBase ) );
		padding-left : calc( 8 var( --viewportBase ) );
	}
	.noam02 dt::before{
		height : calc( 30 var( --remBase ) );
	}
	.noam02 ul{
		margin-top : calc( 8 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.noam02{
		display : grid;
		grid-template-columns : calc( 225 * 100% / 458 ) 1fr;
		column-gap : calc( 8 * 100% / 458 );
		align-items : start;
		justify-content : start;
	}
	.noam02 dt{
		grid-template-columns : calc( 39 * 100% / 217 ) auto;
		column-gap : calc( 8 * 100% / 217 );
		padding-block : calc( 8 var( --remBase ) );
		padding-left : calc( 8 * 100% / 225 );
	}
	.noam02 dt::before{
		height : calc( 30 var( --remBase ) );
	}
	.noam02 ul{
		padding-top : calc( 11 var( --remBase ) );
	}
	.noam02 li{
		font-size : calc( 16 var( --remBase ) );
	}
}

/* --------------------------------------------
DATALIST
--------------------------------------------- */
:where( .datalist01 , .datalist02 ) > div{
	display : grid;
	align-items : start;
}
:where( .datalist01 , .datalist02 ) dt{
	display : grid;
	place-items : center;
	padding-block : calc( 4 var( --remBase ) );
	font-size : calc( 16 var( --fontCoef ) );
	line-height : 1.7;
	color : var( --TextColor03 );
	background-color : var( --AccentColor01 );
	border-radius : calc( 6 var( --remBase ) );
}
:where( .datalist01 , .datalist02 ) dd{
	padding-top : calc( 5.5 var( --remBase ) );
	font-size : calc( 16 var( --fontCoef ) );
	line-height : 1.5;
}
@media screen and ( max-width : 750px ){
	:where( .datalist01 , .datalist02 ){
		grid-template-columns : calc( 112 var( --percentBase ) ) 1fr;
	}
	:where( .datalist01 , .datalist02 ) > div{
		grid-template-columns : calc( 112 var( --percentBase ) ) 1fr;
		column-gap : calc( 16 var( --percentBase ) );
		padding-block : calc( 8 var( --remBase ) );
		border-bottom : solid 1px #ccc;
	}
}
@media print , screen and ( min-width : 750.02px ){
	:where( .datalist01 , .datalist02 ){
		display : grid;
		row-gap : calc( 16 var( --remBase ) );
		align-items : start;
	}
}
@media print , screen and ( min-width : 750.02px ){
	.datalist01{
		grid-template-columns : repeat( 3 , calc( 440 var( --percentBase ) ) );
		column-gap : calc( 40 var( --percentBase ) );
	}
	.datalist01 > div{
		grid-template-columns : calc( 200 * 100% / 440 ) 1fr;
		column-gap : calc( 8 * 100% / 440 );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.datalist02{
		grid-template-columns : repeat( 2 , calc( 440 * 100% / 920 ) );
		column-gap : calc( 40 * 100% / 920 );
	}
	.datalist02 > div{
		grid-template-columns : calc( 120 * 100% / 440 ) 1fr;
		column-gap : calc( 8 * 100% / 440 );
	}
}
.datalist03{
	border-top : solid 1px var( --BackColor01 );
}
.datalist03 dt{
	background-color : var( --BackColor01 );
}
@media screen and ( max-width : 750px ){
	.datalist03 dt , .datalist03 dd{
		font-size : calc( 18 var( --fontCoef ) );
		font-weight : 500;
		line-height : 1.3;
	}
	.datalist03 dt{
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 16 var( --percentBase ) );
	}
	.datalist03 dd{
		padding-top : calc( 16 var( --remBase ) );
	}
	.datalist03 > div:not( :last-of-type ) dd{
		padding-bottom : calc( 24 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.datalist03 > div{
		display : grid;
		padding-block : calc( 16 var( --remBase ) );
		border-bottom : solid 1px var( --BackColor01 );
	}
	.datalist03 dt , .datalist03 dd{
		padding-block : calc( 20 var( --remBase ) );
		font-size : calc( 16 var( --fontCoef ) );
		line-height : 1.5;
	}
	.contents .datalist03 > div{
		grid-template-columns : calc( 200 * 100% / 1040 ) 1fr;
		column-gap : calc( 40 * 100% / 1040 );
	}
	.contents .datalist03 dt{
		padding-inline : calc( 16 * 100% / 200 );
	}
}

/* --------------------------------------------
TAGS
--------------------------------------------- */
:where( .tags01 , .tags02 , .tags03 ) dt{
	font-size : calc( 20 var( --fontCoef ) );
	font-weight : 600;
	line-height : 1.3;
	border-left-color : var( --AccentColor01 );
	border-left-style : solid;
}
:where( .tags01 , .tags02 , .tags03 ) ul{
	display : flex;
	flex-wrap : wrap;
}
:where( .tags01 , .tags02 , .tags03 ) li{
	font-size : calc( 16 var( --fontCoef ) );
	line-height : 1.3;
}
@media screen and ( max-width : 750px ){
	:where( .tags01 , .tags02 , .tags03 ) dt{
		padding-left : calc( 4 var( --percentBase ) );
		border-left-width : calc( 3 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	:where( .tags01 , .tags02 , .tags03 ) dt{
		border-left-width : calc( 5 var( --remBase ) );
	}
}
:where( .tags01 , .tags02 ) li{
	display : grid;
	place-items : center;
	padding-block : calc( 4 var( --remBase ) );
	padding-inline : calc( 8 var( --remBase ) );
	background-color : var( --BackColor01 );
	border-radius : calc( 6 var( --remBase ) );
}
@media screen and ( max-width : 750px ){
	:where( .tags01 , .tags02 ) > div + div{
		padding-top : calc( 16 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
		border-top : dashed 1px var( --AccentColor01-3 );
	}
	:where( .tags01 , .tags02 ) dd{
		margin-top : calc( 16 var( --remBase ) );
	}
	:where( .tags01 , .tags02 ) ul{
		row-gap : calc( 8 var( --remBase ) );
		column-gap : calc( 8 var( --percentBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	:where( .tags01 , .tags02 ) > div{
		display : grid;
		align-items : start;
		justify-content : start;
	}
	:where( .tags01 , .tags02 ) dt{
		padding-left : calc( 4 * 100% / 152 );
	}
	:where( .tags01 , .tags02 ) ul{
		row-gap : calc( 12 var( --remBase ) );
		column-gap : calc( 8 * 100% / 648 );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.tags01 > div{
		grid-template-columns : calc( 152 * 100% / 800 ) calc( 648 * 100% / 800 );
	}
	.tags01 > div + div{
		padding-top : calc( 16 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
		border-top : dashed 1px var( --AccentColor01-3 );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.tags02{
		display : grid;
		grid-template-columns : repeat( 2 , calc( 680 var( --percentBase ) ) );
		align-items : start;
		justify-content : space-between;
	}
	.tags02 > div{
		display : grid;
		grid-template-columns : calc( 120 * 100% / 680 ) 1fr    ;
		align-items : start;
	}
}
@media screen and ( max-width : 750px ){
	.tags03 dd{
		margin-top : calc( 20 var( --remBase ) );
	}
	.tags03 ul{
		row-gap : calc( 16 var( --remBase ) );
		column-gap : calc( 24 var( --percentBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.tags03{
		display : grid;
		grid-template-columns : calc( 120 * 100% / 920 ) 1fr;
		column-gap : calc( 8 * 100% / 920 );
		align-items : start;
		padding-top : calc( 16 var( --remBase ) );
		border-top : dashed 1px var( --AccentColor01-3 );
	}
	.tags03 dt{
		padding-left : calc( 6 * 100% / 120 );
	}
	.tags03 ul{
		row-gap : calc( 16 var( --remBase ) );
		column-gap : calc( 24 * 100% / 792 );
		padding-top : calc( 2.6 var( --remBase ) );
	}
}

/* --------------------------------------------
DIALOG
--------------------------------------------- */
body:has( dialog[open] ){
	overflow : hidden;
}
@media print , screen and ( min-width : 750.02px ){
	body:has( dialog[open] ){
		padding-right : var( --scrollbarWidth );
	}
}
dialog{
	position : fixed;
	top : 0;
	left : 0;
	z-index : 12;
	display : grid;
	justify-content : center;
	width : 100dvw;
	height : 100dvh;
	background-color : rgb( 0 0 0 / .6 );
}
dialog:not( [open] ){
	display : none;
}
dialog .dialogContent{
	overflow-y : auto;
	background-color : var( --BackColor02 );
}
dialog picture img{
	width : 100%;
	height : auto;
}
@media screen and ( max-width : 750px ){
	dialog{
		align-items : start;
		padding-block : calc( 32 var( --remBase ) );
		padding-inline : calc( 32 var( --viewportBase ) );
	}
	dialog .dialogContent{
		max-height : calc( 100dvh - ( 64 var( --remBase ) ) );
		padding-bottom : calc( 32  var( --remBase ) );
	}
	dialog .dialogContent > *:not( picture ){
		padding-inline : calc( 16 * 100% / 336 );
	}
	dialog .dialogContent > picture + *{
		margin-top : calc( 16 var( --remBase ) );
	}
	dialog .dialogContent > *:not( picture ) + *{
		margin-top : calc( 8 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	dialog{
		align-items : center;
	}
	dialog .dialogContent{
		max-height : calc( 100dvh );
		padding-bottom : calc( 16  var( --remBase ) );
	}
	dialog .dialogContent > *:not( picture ){
		padding-inline : calc( 16 * 100% / 680 );
	}
	dialog .dialogContent > * + *{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media screen and ( min-width : 750.02px ) and ( max-width : 1479.98px ){
	dialog{
		padding-inline : calc( 360 var( --viewportBase ) );
	}
}
@media print , screen and ( min-width : 1480px ){
	dialog{
		padding-inline : calc( ( 100% - 680px ) / 2 );
	}
}

/* --------------------------------------------
BUTTON
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	body:has( #narrowing.is-open ){
		overflow : hidden;
	}
}
@media screen and ( max-width : 750px ){
	#narrowing{
		position : absolute;
		top : 0;
		left : 0;
		z-index : 1;
		display : grid;
		grid-template-columns : calc( 25 * 100% / 132 ) auto;
		column-gap : calc( 8 * 100% / 132 );
		align-items : center;
		justify-content : center;
		width : calc( 132 var( --viewportBase ) );
		height : calc( 52 var( --remBase ) );
		font-size : 1.6rem;
		line-height : normal;
		letter-spacing : .05em;
		background-color : #eee;
		border-radius : calc( 6  var( --remBase ) );
		translate : 0 0;
	}
	#narrowing::before{
		display : block;
		height : calc( 26 var( --remBase ) );
		font-size : 0;
		content : "";
		background : url( "../images/ui/icon/filter.svg" ) left center / contain no-repeat;
	}
	#narrowing.is-viewport{
		position : fixed;
		top : inherit;
		bottom : calc( 8 var( --remBase ) );
		left : calc( -116 var( --viewportBase ) );
		transition : translate var( --transitionBase );
		translate : 100% 0;
	}
}