@charset "UTF-8";

/* ================================================================================
main, content
================================================================================ */
@media print, screen
{

}
@media screen and (max-width: 767px)
{

}

/* ================================================================================
mainvisual
================================================================================ */
@media print, screen
{

#mainvisual
{
	padding: 0;
	background: url("../image/common/background.webp") no-repeat bottom center / cover;
}

}
@media screen and (max-width: 767px)
{

}

/* ================================================================================
pickup
================================================================================ */
@media print, screen
{

#pickup > .inner{	container-type: inline-size;	}
#pickup .items
{
	display: flex;	flex-wrap: wrap;	justify-content: space-between;
	gap: 2cqw;
}
#pickup .item a{	display: block;	box-shadow: var(--shadow0);	}
#pickup .item a picture{	width: 32cqw;	}
#pickup .item a[disabled]{	filter: var(--filterDisabled);	}

}
@media screen and (min-width: 768px)
{

#pickup .item a picture{	transition: var(--T02);	transition-property: transform;	}
#pickup .item a:hover picture{	transform: scale(1.02);	}

}
@media screen and (max-width: 767px)
{

#pickup .item a picture{	width: 48cqw;	}

#pickup .item:nth-child(1){	order:1;	}
#pickup .item:nth-child(2){	order:2;	}
#pickup .item:nth-child(3){	order:5;	}
#pickup .item:nth-child(4){	order:3;	}
#pickup .item:nth-child(5){	order:4;	}
#pickup .item:nth-child(6){	order:6;	}

}

/* ================================================================================
sns
================================================================================ */
@media print, screen
{

#sns .items
{
	display: flex;	justify-content: center;	align-items: center;
	gap: calc(25 * var(--v));
}
#sns .item a
{
	position: relative;
	display: block;

	border-radius: 50%;
	box-shadow: var(--shadow0);
}
#sns .item a[disabled]{	filter: var(--filterDisabled);	}
#sns .item picture{	width: calc(65 * var(--v));	}

}
@media screen and (min-width: 768px)
{

#sns .item a picture{	transition: var(--T02);	transition-property: transform;	}
#sns .item a:hover picture{	transform: scale(1.05);	}

}
@media screen and (max-width: 767px)
{

}

/* ================================================================================
news
================================================================================ */
@media print, screen
{

#news > .inner{	filter: drop-shadow( var(--shadow0) );	}

#news .frameOuter
{
	position: relative;
	aspect-ratio: 1200/200;
	padding: calc(24 * var(--u)) calc(40 * var(--u)) calc(38 * var(--u)) calc(250 * var(--u));

	background: url("../image/index/news_background.webp") no-repeat bottom center / contain;
}
#news h2
{
	position: absolute;
	top: calc(20 * var(--u));	left: calc(40 * var(--u));
	width: calc(162 * var(--u));	aspect-ratio: 162/152;

	pointer-events: none;
}

#news .frameInner
{
	height: 100%;
	padding-right: calc(20 * var(--u));
	overflow-y: scroll;
}
#news .frameInner::-webkit-scrollbar
{
	width: calc(10 * var(--v));	aspect-ratio: 2/10;
	background: var(--Ctheme2);
}
#news .frameInner::-webkit-scrollbar-thumb{	background: black;	}
#news ul
{
	display: flex;	flex-direction: column;
	gap: calc(30 * var(--u));
}
#news li
{
	display: flex;	align-items: start;
	gap: calc(10 * var(--v)) calc(30 * var(--u));
}
#news li .date
{
	flex-shrink: 0;
	width: calc(90 * var(--v));
}
#news li .date p
{
	color: var(--Ctheme3);
	font-size: var(--fzv16);
	font-weight: 700;
	line-height: 1.5;
}
#news li .content p
{
	font-size: var(--fzv16);
	line-height: 1.5;
}
#news li .content p a
{
	color: var(--Ctheme3);
	font-weight: 500;
	text-decoration: underline;
}

}
@media screen and (min-width: 768px)
{

#news li .content p a:hover{	text-decoration: unset;	}

}
@media screen and (max-width: 767px)
{

#news .frameOuter
{
	height:40vw;	aspect-ratio: 650/280;
	padding: calc(30 * var(--u)) calc(40 * var(--u)) calc(44 * var(--u));

	background: url("../image/index/news_background_sp.webp") no-repeat bottom center / contain;
}
#news h2
{
	width: calc(134 * var(--v));
	top: calc(-60 * var(--v));	left: calc(30 * var(--v));
}

#news li{	flex-direction: column;	}
#news li .date{	width: 100%;	}
#news li .date p{	font-size: var(--fzv20);	text-align: center;	}
#news li .content{	width: 100%;	}
#news li .content p{	font-size: var(--fzv20);	text-align: center;	}

}


/* ======================================== end ======================================== */