@charset "UTF-8";

/* --------------------------------------------
CAROUSEL
--------------------------------------------- */
.titles01 + :where( #carousel01 , #carousel02 ){
	margin-top : calc( 20 var( --remBase ) );
}
:where( #carousel01 , #carousel02 ) .splide__slide{
	width : calc( 250 * 100% / 1100 );
	margin-right : calc( ( 100 / 3 ) * 100% / 1100 );
}
:where( #carousel01 , #carousel02 ) a{
	display : block;
	display : grid;
	grid-template-rows : calc( 140 var( --remBase ) ) calc( ( 20 - 4 ) var( --remBase ) ) auto calc( ( 10 - 4 - .5 ) var( --remBase ) ) auto calc( ( 20 - .5 ) var( --remBase ) ) 1fr calc( 32 var( --remBase ) );
	height : 100%;
	padding-bottom : calc( 20 var( --remBase ) );
	overflow : hidden;
	background-color : white;
	border-radius : calc( 5 var( --remBase ) );
	box-shadow : 0 0 calc( 10 var( --remBase ) ) 0 rgb( 0 0 0 / .1 );
}
:where( #carousel01 , #carousel02 ) picture{
	grid-row : 1;
	grid-column : 1;
	width : 100%;
}
:where( #carousel01 , #carousel02 ) picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}
:where( #carousel01 , #carousel02 ) :is( h3 , dl ){
	padding-inline : calc( 20 * 100% / 250 );
}
:where( #carousel01 , #carousel02 ) h3{
	grid-row : 3;
	grid-column : 1;
	font-size : calc( 18 var( --remBase ) );
	font-weight : 700;
	line-height : calc( 26 / 18 );
}
:where( #carousel01 , #carousel02 ) dl{
	display : grid;
	grid-template-columns : calc( 25 * 100% / 210 ) auto;
	grid-row : 5;
	grid-column : 1;
	row-gap : calc( ( 8 - .5 - .5 ) var( --remBase ) );
	column-gap : calc( 8 * 100% / 210 );
	align-items : center;
	justify-content : start;
}
:where( #carousel01 , #carousel02 ) dt{
	aspect-ratio : 1;
}
:where( #carousel01 , #carousel02 ) dt img{
	height : 100%;
}
:where( #carousel01 , #carousel02 ) dd{
	font-size : calc( 16 var( --remBase ) );
	line-height : calc( 26 / 16 );
}
:where( #carousel01 , #carousel02 ) span{
	display : grid;
	grid-template-columns : auto auto;
	grid-row : 8;
	grid-column : 1;
	column-gap : calc( 8 * 100% / 208 );
	align-items : center;
	align-self : end;
	justify-content : center;
	width : calc( 210 * 100% / 250 );
	height : calc( 32 var( --remBase ) );
	margin-inline : auto;
	font-size : 1.6rem;
	font-weight : 700;
	color : var( --primary );
	background-color : #e9f5f7;
	border-color : currentColor;
	border-style : solid;
	border-width : 1px;
	border-radius : calc( 3 var( --remBase ) );
}
:where( #carousel01 , #carousel02 ) span::after{
	display : block;
	height : calc( 16 var( --remBase ) );
	aspect-ratio : 1;
	content : "";
	background : url( "../images/ui/arrow/circle/right01.svg" ) center / contain no-repeat;
}
:where( #carousel01 , #carousel02 ) .splide__arrow{
	display : block;
	width : auto;
	height : auto;
	background-color : transparent;
	border-radius : 0;
	opacity : 1;
	transform : none;
}
:where( #carousel01 , #carousel02 ) .splide__arrow img{
	height : calc( 40 var( --remBase ) );
	aspect-ratio : 1;
}
:where( #carousel01 , #carousel02 ) .splide__arrow--prev{
	translate : -50% -50%;
	left : 0;
}
:where( #carousel01 , #carousel02 ) .splide__arrow--next{
	translate : 50% -50%;
	right : 0;
}

/* --------------------------------------------
RECOMMAND
--------------------------------------------- */
#recommend .splide__track{
	padding-bottom : calc( 60 var( --remBase ) );
}
#recommend .splide__arrow{
	top : calc( ( 100% - ( 60 var( --remBase ) ) ) / 2 );
}

/* --------------------------------------------
NEW
--------------------------------------------- */
#new .splide__track{
	padding-bottom : calc( 29 var( --remBase ) );
}
#new .splide__arrow{
	top : calc( ( 100% - ( 29 var( --remBase ) ) ) / 2 );
}

/* --------------------------------------------
ATTENTION
--------------------------------------------- */
#attention{
	display : grid;
}
#attention h2{
	z-index : 1;
	grid-row : 1/3;
	grid-column : 1;
}
#attention h2 picture{
	height : 100%;
}
#attention h2 img{
	height : 100%;
}
#attention ul{
	grid-row : 2/4;
	grid-column : 1;
	background-color : #feffe3;
}
#attention a{
	display : block;
}
#attention{
	grid-template-rows : calc( 31 var( --remBase ) ) calc( 70 var( --remBase ) ) auto;
	padding-bottom : calc( 60 var( --remBase ) );
}
#attention h2{
	padding-left : calc( 276 * 100% / 1100 );
}
#attention ul{
	display : grid;
	grid-template-columns : repeat( 4 , calc( 211 * 100% / 890 ) );
	column-gap : calc( ( 46 / 3 ) * 100% / 890 );
	padding-inline : calc( 105 * 100% / 1100 );
	padding-top : calc( 100 var( --remBase ) );
	padding-bottom : calc( 40 var( --remBase ) );
}
#attention a{
	width : 100%;
	height : calc( 200 var( --remBase ) );
}
#attention a img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}

/* --------------------------------------------
USEFUL
--------------------------------------------- */
#useful{
	padding-bottom : calc( 16 var( --remBase ) );
}
#useful > ul{
	display : grid;
	grid-template-columns : repeat( 2 , calc( 530 * 100% / 1100 ) );
	row-gap : calc( 16 var( --remBase ) );
	justify-content : space-between;
	margin-top : calc( 20 var( --remBase ) );
}
#useful > ul > li > a{
	display : grid;
	grid-template-rows : auto calc( 11 var( --remBase ) ) 1fr;
	grid-template-columns : calc( 180 * 100% / 530 ) calc( 342 * 100% / 530 );
	column-gap : calc( 8 * 100% / 530 );
}
#useful > ul picture{
	grid-row : 1/4;
	grid-column : 1;
	align-items : start;
	width : 100%;
	height : calc( 90 var( --remBase ) );
}
#useful > ul picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}
#useful > ul .tags{
	display : flex;
	flex-wrap : wrap;
	grid-row : 1;
	grid-column : 2;
	row-gap : calc( 10 var( --remBase ) );
	column-gap : calc( 10 * 100% / 530 );
}
#useful > ul .tags li{
	display : grid;
	place-items : center;
	height : calc( 28 var( --remBase ) );
	padding-inline : calc( 8 var( --remBase ) );
	font-size : 1.2rem;
	font-weight : 700;
	color : #9b584c;
	background-color : #f7dfdb;
	border-radius : calc( 3 var( --remBase ) );
}
#useful > ul h3{
	grid-row : 3/4;
	grid-column : 2;
	font-size : calc( 16 var( --remBase ) );
	line-height : calc( 26 / 16 );
	color : #373737;
}