@charset "UTF-8";

/* --------------------------------------------
WRAP02
--------------------------------------------- */
@media screen and ( width <= 750px ){
	.wrap02{
		padding-inline : calc( 40 var( --viewportBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	.wrap02{
		padding-inline : calc( 125 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	.wrap02{
		padding-inline : calc( ( 100% - 1190px ) / 2 );
	}
}
@media screen and ( width <= 750px ){
	.wrap02-sp{
		padding-inline : calc( 40 var( --viewportBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	.wrap02-pc{
		padding-inline : calc( 125 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1440px ){
	.wrap02-pc{
		padding-inline : calc( ( 100% - 1190px ) / 2 );
	}
}

/* --------------------------------------------
BREADCRUMBS
--------------------------------------------- */
@media print , screen and ( width > 750px ){
	#breadcrumbs{
		display : flex;
		flex-wrap : wrap;
		padding-top : calc( 30 var( --remBase ) );
		padding-bottom : calc( 50 var( --remBase ) );
	}
	#breadcrumbs li{
		font-size : calc( 16 var( --remBase ) );
		line-height : calc( 22 / 16 );
	}
	#breadcrumbs li + li{
		display : flex;
		align-items : start;
	}
	#breadcrumbs li + li::before{
		width : calc( 6 var( --remBase ) );
		height : calc( 8 var( --remBase ) );
		margin-top : calc( 7 var( --remBase ) );
		margin-left : calc( 14 var( --remBase ) );
		margin-right : calc( 16 var( --remBase ) );
		font-size : 0;
		content : "";
		background : url( "../../images/ui/arrow/right02.svg" ) center / contain no-repeat;
	}
	#breadcrumbs a{
		display : block;
		color : var( --body );
	}
}

/* --------------------------------------------
COLUMN MAIN VISUAL
--------------------------------------------- */
#columnMv{
	position : relative;
	overflow : clip;
}
#columnMv .box{
	position : absolute;
	z-index : 1;
}
#columnMv .box h1{
	width : fit-content;
	font-weight : 700;
	color : white;
	background-color : var( --primary );
}
#columnMv .box p{
	display : flex;
	flex-wrap : wrap;
	align-items : start;
	justify-content : start;
	width : fit-content;
	background-color : #f7dfdb;
}
#columnMv .box p :where( span , time ){
	display : block;
	font-weight : 700;
}
#columnMv picture{
	width : 100%;
}
#columnMv picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}
@media screen and ( width <= 750px ){
	#columnMv{
		padding-top : calc( 48 var( --remBase ) );
		margin-bottom : calc( 40 var( --remBase ) );
		background-color : #e9f5f7;
	}
	#columnMv .box{
		bottom : calc( 156 var( --remBase ) );
		left : calc( 40 var( --viewportBase ) );
	}
	#columnMv h1{
		padding-block : calc( ( 26 - 5 ) var( --remBase ) );
		padding-left : calc( 14 var( --remBase ) );
		padding-right : calc( 12 var( --remBase ) );
		font-size : calc( 28 var( --remBase ) );
		line-height : calc( 38 / 28 );
	}
	#columnMv p{
		column-gap : calc( 16 var( --remBase ) );
		padding-inline : calc( 16 var( --remBase ) );
		margin-top : calc( 20 var( --remBase ) );
	}
	#columnMv p :where( span , time ){
		padding-block : calc( ( 18 - 4 ) var( --remBase ) );
		font-size : calc( 24 var( --remBase ) );
		line-height : calc( 32 / 24 );
	}
	#columnMv picture{
		height : calc( 800 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#columnMv{
		margin-bottom : calc( 40 var( --remBase ) );
	}
	#columnMv .box{
		bottom : calc( 56 var( --remBase ) );
		left : calc( 50% - ( 595 var( --percentBase ) ) );
	}
	#columnMv h1{
		padding-block : calc( ( 16 - 4 ) var( --remBase ) );
		padding-left : calc( 20 var( --remBase ) );
		padding-right : calc( 27 var( --remBase ) );
		font-size : calc( 23 var( --remBase ) );
		line-height : calc( 31 / 23 );
	}
	#columnMv p{
		column-gap : calc( 15 var( --remBase ) );
		padding-left : calc( 24 var( --remBase ) );
		padding-right : calc( 35 var( --remBase ) );
		margin-top : calc( 8 var( --remBase ) );
	}
	#columnMv p :where( span , time ){
		padding-block : calc( ( 7 - 3 ) var( --remBase ) );
		font-size : calc( 16 var( --remBase ) );
		line-height : calc( 22 / 16 );
	}
	#columnMv picture{
		height : calc( 400 var( --remBase ) );
	}
	#columnMv .splide__arrow{
		top : 50%;
		display : block;
		width : auto;
		height : auto;
		background-color : transparent;
		border-radius : 0;
		opacity : 1;
		transform : none;
	}
	#columnMv .splide__arrow img{
		height : calc( 40 var( --remBase ) );
		aspect-ratio : 1;
	}
	#columnMv .splide__arrow--prev{
		translate : 0 -50%;
		left : calc( -14 * 100% / 1190 );
	}
	#columnMv .splide__arrow--next{
		translate : 0 -50%;
		right : calc( -14 * 100% / 1190 );
	}
}

/* --------------------------------------------
COLUMN LAYOUT
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#columnPosts{
		padding-bottom : calc( 100 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#columnPosts{
		display : grid;
		grid-template-columns : calc( 784 * 100% / 1190 ) calc( 370 * 100% / 1190 );
		align-items : start;
		justify-content : space-between;
		padding-bottom : calc( 145 var( --remBase ) );
	}
}
:where( #pickup , #recommend ) .tags{
	display : flex;
	flex-wrap : wrap;
}
:where( #pickup , #recommend ) .tags li{
	display : grid;
	place-items : center;
	font-weight : 700;
	color : #9b584c;
	background-color : #f7dfdb;
}
:where( #pickup , #recommend ) li picture{
	width : 100%;
}
:where( #pickup , #recommend ) li picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}
:where( #pickup , #recommend ) h3{
	color : var( --body );
}
@media screen and ( width <= 750px ){
	:where( #pickup , #recommend ) h2 img{
		height : calc( 56 var( --remBase ) );
	}
	:where( #pickup , #recommend ) > ul{
		margin-top : calc( 20 var( --remBase ) );
	}
	:where( #pickup , #recommend ) > ul > li + li{
		margin-top : calc( 40 var( --remBase ) );
	}
	:where( #pickup , #recommend ) li picture{
		height : calc( 470 var( --remBase ) );
	}
	:where( #pickup , #recommend ) .tags{
		row-gap : calc( 20 var( --remBase ) );
		column-gap : calc( 20 var( --percentBase ) );
		margin-top : calc( 32 var( --remBase ) );
	}
	:where( #pickup , #recommend ) .tags li{
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 16 var( --remBase ) );
		font-size : 2.4rem;
		border-radius : calc( 6 var( --remBase ) );
	}
	:where( #pickup , #recommend ) h3{
		margin-top : calc( 30 var( --remBase ) );
		font-size : calc( 32 var( --remBase ) );
		line-height : calc( 52 / 32 );
	}
}
@media print , screen and ( width > 750px ){
	:where( #pickup , #recommend ) h2 img{
		height : calc( 33 var( --remBase ) );
	}
	:where( #pickup , #recommend ) > ul{
		display : grid;
		grid-template-columns : repeat( 2 , calc( 380 * 100% / 784 ) );
		row-gap : calc( 15 var( --remBase ) );
		justify-content : space-between;
		margin-top : calc( 20 var( --remBase ) );
	}
	:where( #pickup , #recommend ) li picture{
		height : calc( 230 var( --remBase ) );
	}
	:where( #pickup , #recommend ) .tags{
		row-gap : calc( 10 var( --remBase ) );
		column-gap : calc( 10 * 100% / 380 );
		margin-top : calc( 16 var( --remBase ) );
	}
	:where( #pickup , #recommend ) .tags li{
		padding-block : calc( 8 var( --remBase ) );
		padding-inline : calc( 8 var( --remBase ) );
		font-size : 1.2rem;
		border-radius : calc( 3 var( --remBase ) );
	}
	:where( #pickup , #recommend ) h3{
		margin-top : calc( 11 var( --remBase ) );
		font-size : calc( 16 var( --remBase ) );
		line-height : calc( 26 / 16 );
	}
}
@media screen and ( width <= 750px ){
	#pickup{
		padding-bottom : calc( 60 var( --remBase ) );
		background-color : #e9f5f7;
	}
}
@media print , screen and ( width > 750px ){
	#pickup{
		padding-bottom : calc( 50 var( --remBase ) );
	}
	#pickup .more{
		margin-top : calc( 60 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	#recommend{
		padding-top : calc( 60 var( --remBase ) );
	}
	#recommend .more{
		margin-top : calc( 60 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#recommend .more{
		margin-top : calc( 30 var( --remBase ) );
	}
}
.more{
	position : relative;
	display : block;
	width : 100%;
}
.more::before{
	position : absolute;
	bottom : 0;
	left : 0;
	display : block;
	width : 100%;
	overflow : hidden;
	content : "";
	background-color : #284b66;
}
.more span{
	position : relative;
	z-index : 1;
	display : grid;
	align-items : center;
	justify-content : start;
	font-weight : 700;
	color : var( --primary );
	background-color : #e9f5f7;
	border-color : var( --primary );
	border-style : solid;
}
.more span::after{
	aspect-ratio : 1;
	font-size : 0;
	content : "";
	background : url( "../../images/ui/arrow/circle/right01.svg" ) center / contain no-repeat;
}
@media screen and ( width <= 750px ){
	.more{
		padding-bottom : calc( 8 var( --remBase ) );
	}
	.more::before{
		height : calc( 90 var( --remBase ) );
		border-radius : calc( 12 var( --remBase ) );
	}
	.more span{
		grid-template-columns : auto calc( 32 * 100% / 500 );
		column-gap : calc( 22 * 100% / 500 );
		width : 100%;
		height : calc( 90 var( --remBase ) );
		padding-left : calc( 166 * 100% / 666 );
		font-size : 4rem;
		border-width : calc( 2 var( --remBase ) );
		border-radius : calc( 12 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	.more{
		padding-bottom : calc( 6 var( --remBase ) );
	}
	.more::before{
		height : calc( 65 var( --remBase ) );
		border-radius : calc( 6 var( --remBase ) );
	}
	.more span{
		grid-template-columns : auto calc( 16 * 100% / 488 );
		column-gap : calc( 10 * 100% / 488 );
		width : 100%;
		height : calc( 65 var( --remBase ) );
		padding-left : calc( 294 * 100% / 782 );
		font-size : 2rem;
		border-width : 1px;
		border-radius : calc( 6 var( --remBase ) );
	}
}
@media ( hover : hover ){
	.more span{
		transition : translate var( --transitionBase );
	}
	@media screen and ( width <= 750px ){
		.more:hover span{
			translate : 0 calc( 8 var( --remBase ) );
		}
	}
	@media print , screen and ( width > 750px ){
		.more:hover span{
			translate : 0 calc( 6 var( --remBase ) );
		}
	}
}

/* --------------------------------------------
SIDEBAE
--------------------------------------------- */
#sidebarPosts h4{
	display : grid;
	place-items : center;
	font-weight : 700;
	color : #284b66;
	background-color : #c1e4ea;
}
#sidebarPosts .new a{
	display : grid;
}
#sidebarPosts .new picture{
	grid-row : 1/6;
	align-items : start;
	width : 100%;
	aspect-ratio : 1;
}
#sidebarPosts .new picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}
#sidebarPosts .new .tags{
	display : flex;
	flex-wrap : wrap;
	grid-row : 1;
	grid-column : 2;
}
#sidebarPosts .new .tags li{
	display : grid;
	place-items : center;
	font-weight : 700;
	color : #9b584c;
	background-color : #f7dfdb;
}
#sidebarPosts .new :where( time , h5 ){
	color : var( --body );
}
#sidebarPosts .new time{
	grid-row : 3;
	grid-column : 2;
}
#sidebarPosts .new h5{
	grid-row : 4/6;
	grid-column : 2;
}
#sidebarPosts .categories li{
	border-bottom-color : #eceff0;
	border-bottom-style : solid;
}
#sidebarPosts .categories a{
	display : grid;
	font-weight : 700;
	color : var( --body );
}
#sidebarPosts .categories a::after{
	display : block;
	aspect-ratio : 1;
	content : "";
	background : url( "../../images/ui/arrow/circle/right01.svg" ) center / contain no-repeat;
}
@media screen and ( width <= 750px ){
	#sidebarPosts{
		margin-top : calc( 100 var( --remBase ) );
	}
	#sidebarPosts h4{
		height : calc( 80 var( --remBase ) );
		font-size : 4rem;
		text-indent : calc( 2.4 var( --remBase ) );
		letter-spacing : calc( 2.4 var( --remBase ) );
		border-radius : calc( 10 var( --remBase ) );
	}
	#sidebarPosts ul + h4{
		margin-top : calc( 100 var( --remBase ) );
	}
	#sidebarPosts .new{
		margin-top : calc( 48 var( --remBase ) );
	}
	#sidebarPosts .new > li + li{
		margin-top : calc( 40 var( --remBase ) );
	}
	#sidebarPosts .new a{
		grid-template-rows : auto calc( 10 var( --remBase ) ) auto auto 1fr;
		grid-template-columns : calc( 224 var( --percentBase ) ) 1fr;
		column-gap : calc( 14 var( --percentBase ) );
	}
	#sidebarPosts .new .tags{
		row-gap : calc( 20 var( --remBase ) );
		column-gap : calc( 20 * 100% / 432 );
	}
	#sidebarPosts .new .tags li{
		height : calc( 44 var( --remBase ) );
		padding-inline : calc( 6 var( --remBase ) );
		font-size : 2.4rem;
		border-radius : calc( 6 var( --remBase ) );
	}
	#sidebarPosts .new time{
		font-size : calc( 24 var( --remBase ) );
		line-height : calc( 32 / 24 );
	}
	#sidebarPosts .new h5{
		padding-top : calc( 20 var( --remBase ) );
		font-size : 2.8rem;
		line-height : 1.5;
	}
	#sidebarPosts .categories{
		margin-top : calc( 20 var( --remBase ) );
	}
	#sidebarPosts .categories li{
		border-bottom-width : calc( 2 var( --remBase ) );
	}
	#sidebarPosts .categories a{
		grid-template-columns : 1fr calc( 48 var( --percentBase ) );
		padding-block : calc( 32 var( --remBase ) );
		font-size : calc( 32 var( --remBase ) );
		line-height : calc( 44 / 32 );
	}
}
@media print , screen and ( width > 750px ){
	#sidebarPosts h4{
		height : calc( 40 var( --remBase ) );
		font-size : 2rem;
		text-indent : calc( 1.2 var( --remBase ) );
		letter-spacing : calc( 1.2 var( --remBase ) );
		border-radius : calc( 5 var( --remBase ) );
	}
	#sidebarPosts ul + h4{
		margin-top : calc( 50 var( --remBase ) );
	}
	#sidebarPosts .new{
		margin-top : calc( 24 var( --remBase ) );
	}
	#sidebarPosts .new > li + li{
		margin-top : calc( 20 var( --remBase ) );
	}
	#sidebarPosts .new a{
		grid-template-rows : auto calc( 10 var( --remBase ) ) auto auto 1fr;
		grid-template-columns : calc( 112 * 100% / 370 ) 1fr;
		column-gap : calc( 8 * 100% / 370 );
	}
	#sidebarPosts .new .tags{
		row-gap : calc( 10 var( --remBase ) );
		column-gap : calc( 10 * 100% / 250 );
	}
	#sidebarPosts .new .tags li{
		height : calc( 22 var( --remBase ) );
		padding-inline : calc( 5 var( --remBase ) );
		font-size : 1.2rem;
		border-radius : calc( 6 var( --remBase ) );
	}
	#sidebarPosts .new time{
		font-size : calc( 12 var( --remBase ) );
		line-height : calc( 16 / 12 );
	}
	#sidebarPosts .new h5{
		font-size : 1.4rem;
		line-height : 1.5;
	}
	#sidebarPosts .categories{
		margin-top : calc( 10 var( --remBase ) );
	}
	#sidebarPosts .categories li{
		border-bottom-width : 1px;
	}
	#sidebarPosts .categories a{
		grid-template-columns : 1fr calc( 24 * 100% / 370 );
		padding-block : calc( 16 var( --remBase ) );
		font-size : calc( 16 var( --remBase ) );
		line-height : calc( 22 / 16 );
	}
}