@charset "UTF-8";

/* --------------------------------------------
NEWS
--------------------------------------------- */
#news .category{
	display : grid;
	place-items : center;
	width : fit-content;
	font-family : "Noto Sans JP" , sans-serif;
	color : white;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
	background-color : var( --blue );
}
#news > h2{
	font-weight : 400;
	color : var( --blue );
	letter-spacing : .2em;
}
#news > time{
	display : block;
	color : #666;
	letter-spacing : .2em;
}
@media screen and ( max-width : 750px ){
	#news .category{
		padding-block : calc( 10.5 var( --remBase ) );
		padding-inline : calc( 24 var( --remBase ) );
		font-size : 1.4rem;
	}
	#news > h2{
		margin-top : calc( ( 48 - 10 ) var( --remBase ) );
		font-size : 3rem;
		line-height : calc( 50 / 30 );
	}
	#news > time{
		margin-top : calc( ( 40 - 10 ) var( --remBase ) );
		font-size : 2.2rem;
	}
	#news #content{
		margin-top : calc( 35 var( --remBase ) );
	}
	#news #pagination{
		margin-top : calc( ( 101 - 22 ) var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#news .category{
		padding-block : calc( 10.5 var( --remBase ) );
		padding-inline : calc( 27 var( --remBase ) );
		font-size : 1.4rem;
	}
	#news > h2{
		margin-top : calc( ( 48 - 7 ) var( --remBase ) );
		font-size : 2.6rem;
		line-height : calc( 40 / 26 );
	}
	#news > time{
		margin-top : calc( ( 33 - 7 ) var( --remBase ) );
		font-size : 1.4rem;
	}
	#news #content{
		margin-top : calc( 42 var( --remBase ) );
	}
	#news #pagination{
		margin-top : calc( ( 61 - 12 ) var( --remBase ) );
	}
}
#content .wp-block-image img{
	width : 100%;
	height : auto;
}
#content p{
	font-family : "Noto Sans JP" , sans-serif;
	color : #666;
	letter-spacing : .2em;
}
#content h2{
	font-weight : 400;
	color : var( --blue );
	letter-spacing : .2em;
	background-color : #ecf5f6;
}
#content h3{
	font-weight : 400;
	color : var( --blue );
	letter-spacing : .2em;
	border-bottom-color : currentColor;
	border-bottom-style : solid;
}
#content ul li{
	position : relative;
	font-family : "Noto Sans JP" , sans-serif;
	letter-spacing : .2em;
}
#content ul li::before{
	position : absolute;
	left : 0;
	display : block;
	font-size : 0;
	content : "";
	background-color : var( --blue );
}
@media screen and ( max-width : 750px ){
	#content p{
		font-size : 2.6rem;
		line-height : calc( 60 / 26 );
	}
	#content h2{
		padding-block : calc( 32 var( --remBase ) );
		padding-inline : calc( 25 var( --remBase ) );
		font-size : 3rem;
		line-height : calc( 40 / 30 );
	}
	#content h3{
		padding-bottom : calc( ( 44 - 6 ) var( --remBase ) );
		font-size : 2.8rem;
		line-height : calc( 40 / 28 );
		border-bottom-width : 1px;
	}
	#content ul li{
		padding-left : calc( 29 var( --remBase ) );
		font-size : 2.6rem;
		line-height : calc( 70 / 26 );
	}
	#content ul li::before{
		top : calc( 29 var( --remBase ) );
		width : calc( 12 var( --remBase ) );
		height : calc( 12 var( --remBase ) );
	}
	#content > * + p , #content .wp-block-image + p{
		margin-top : calc( ( 75 - 17 ) var( --remBase ) );
	}
	#content > * + h2 , #content p + h2{
		margin-top : calc( ( 102 - 17 ) var( --remBase ) );
	}
	#content h2 + p{
		margin-top : calc( ( 58 - 17 ) var( --remBase ) );
	}
	#content > * + h3 , #content p + h3{
		margin-top : calc( ( 187 - 17 - 6 ) var( --remBase ) );
	}
	#content > * + .wp-block-columns , #content h3 + .wp-block-columns{
		margin-top : calc( ( 39 - 17 ) var( --remBase ) );
	}
	#content .wp-block-columns + .wp-block-columns{
		margin-top : calc( ( 104 - 17 - 17 ) var( --remBase ) );
	}
	#content > * + ul , #content .wp-block-columns + ul{
		margin-top : calc( ( 126 - 17 - 22 ) var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#content p{
		font-size : 1.6rem;
		line-height : 2.5;
	}
	#content h2{
		padding-block : calc( 12 var( --remBase ) );
		padding-inline : calc( 20 * 100% / 730 );
		font-size : 2.4rem;
		line-height : calc( 40 / 24 );
	}
	#content h3{
		padding-bottom : calc( ( 20 - 10 ) var( --remBase ) );
		font-size : 2rem;
		line-height : 2;
		border-bottom-width : 1px;
	}
	#content ul li{
		padding-left : calc( 27 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 2.5;
	}
	#content ul li::before{
		top : calc( 16 var( --remBase ) );
		width : calc( 8 var( --remBase ) );
		height : calc( 8 var( --remBase ) );
	}
	#content .wp-block-columns:not( .is-not-stacked-on-mobile ) > .wp-block-column{
		flex-basis : 0 ! important;
		flex-grow : 1;
	}
	#content > * + p , #content .wp-block-image + p{
		margin-top : calc( ( 39 - 12 ) var( --remBase ) );
	}
	#content > * + h2 , #content p + h2{
		margin-top : calc( ( 46 - 12 ) var( --remBase ) );
	}
	#content h2 + p{
		margin-top : calc( ( 38 - 12 ) var( --remBase ) );
	}
	#content > * + h3 , #content p + h3{
		margin-top : calc( ( 65 - 12 - 10 ) var( --remBase ) );
	}
	#content > * + .wp-block-columns , #content h3 + .wp-block-columns{
		margin-top : calc( ( 39 - 12 ) var( --remBase ) );
	}
	#content .wp-block-columns + .wp-block-columns{
		margin-top : calc( ( 77 - 12 - 12 ) var( --remBase ) );
	}
	#content > * + ul , #content .wp-block-columns + ul{
		margin-top : calc( ( 60 - 12 - 12 ) var( --remBase ) );
	}
}
#pagination{
	display : grid;
	align-items : start;
	justify-content : space-between;
}
#pagination a{
	position : relative;
	display : grid;
	place-items : center;
	height : 100%;
	color : var( --blue );
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
	border-color : var( --blue );
	border-style : solid;
	transition : color var( --transitionBase ) , background var( --transitionBase );
}
#pagination .prev::before{
	position : absolute;
	display : block;
	content : "";
	background : url( "../images/ui/arrow/black/left01.svg" ) center / contain no-repeat;
	filter : var( --filterBlue );
	transition : filter var( --transitionBase );
}
#pagination .next::after{
	position : absolute;
	display : block;
	content : "";
	background : url( "../images/ui/arrow/black/right01.svg" ) center / contain no-repeat;
	filter : var( --filterBlue );
	transition : filter var( --transitionBase );
}
@media screen and ( max-width : 750px ){
	#pagination{
		grid-template-columns : repeat( 2 , calc( 310 var( --percentBase ) ) );
		grid-auto-rows : calc( 80 var( --remBase ) );
	}
	#pagination a{
		font-size : 2.6rem;
		border-width : 1px;
	}
	#pagination .prev::before{
		top : calc( 35 var( --remBase ) );
		left : calc( 19 * 100% / 310 );
		width : calc( 36 * 100% / 310 );
		height : calc( 9 var( --remBase ) );
	}
	#pagination .next::after{
		top : calc( 35 var( --remBase ) );
		right : calc( 19 * 100% / 310 );
		width : calc( 36 * 100% / 310 );
		height : calc( 9 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#pagination{
		grid-template-columns : repeat( 2 , calc( 231 * 100% / 730 ) );
		grid-auto-rows : calc( 50 var( --remBase ) );
	}
	#pagination a{
		font-size : 1.5rem;
		border-width : 1px;
	}
	#pagination .prev::before{
		top : calc( 22 var( --remBase ) );
		left : calc( 13 * 100% / 231 );
		width : calc( 23 * 100% / 231 );
		height : calc( 6 var( --remBase ) );
	}
	#pagination .next::after{
		top : calc( 22 var( --remBase ) );
		right : calc( 13 * 100% / 231 );
		width : calc( 23 * 100% / 231 );
		height : calc( 6 var( --remBase ) );
	}
}
@media ( hover : hover ){
	#pagination :where( .prev , .next ):hover{
		color : white;
		background-color : var( --blue );
	}
	#pagination .prev:hover::before{
		filter : var( --filterWhite );
	}
	#pagination .next:hover::after{
		filter : var( --filterWhite );
	}
}

/* --------------------------------------------
ULU ONLINE SHOP
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	#item{
		padding-top : calc( 6 var( --remBase ) );
		padding-bottom : calc( ( 120 - 8 ) var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#item{
		display : grid;
		grid-template-columns : repeat( 2 , calc( 480 var( --percentBase ) ) );
		align-items : start;
		justify-content : space-between;
		padding-top : calc( 22 var( --remBase ) );
		padding-bottom : calc( ( 113 - 6 ) var( --remBase ) );
	}
}
#splide{
	font-size : 0;
}
#splide .splide__slide{
	outline : solid 1px #eaeaea;
	outline-offset : -1px;
}
#splide img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}
#splide .splide__arrows button{
	position : absolute;
	display : block;
}
@media screen and ( max-width : 750px ){
	#splide .splide__slide{
		height : calc( 670 var( --remBase ) );
	}
	#splide .splide__arrows button{
		top : calc( 304 var( --remBase ) );
	}
	#splide .splide__arrows img{
		height : calc( 63 var( --remBase ) );
	}
	#splide .splide__arrow--prev{
		left : calc( 27 var( --percentBase ) );
	}
	#splide .splide__arrow--next{
		right : calc( 27 var( --percentBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#splide .splide__slide{
		height : calc( 480 var( --remBase ) );
	}
	#splide .splide__arrows button{
		top : calc( 201 var( --remBase ) );
	}
	#splide .splide__arrows img{
		height : calc( 45 var( --remBase ) );
	}
	#splide .splide__arrow--prev{
		left : calc( 20 * 100% / 480 );
	}
	#splide .splide__arrow--next{
		right : calc( 20 * 100% / 480 );
	}
}
#thumbnails{
	display : grid;
	font-size : 0;
}
#thumbnails button{
	display : block;
	width : 100%;
	outline : solid 1px #eaeaea;
	outline-offset : -1px;
}
#thumbnails button.is-active{
	outline-color : var( --blue );
}
#thumbnails img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}
@media screen and ( max-width : 750px ){
	#thumbnails{
		grid-template-columns : repeat( 4 , calc( 154 var( --percentBase ) ) );
		row-gap : calc( 15 var( --remBase ) );
		column-gap : calc( ( 56 / 3 ) var( --percentBase ) );
		margin-top : calc( 9 var( --remBase ) );
	}
	#thumbnails button{
		height : calc( 154 var( --remBase ) );
	}
	#thumbnails button.is-active{
		outline-width : calc( 3 var( --remBase ) );
		outline-offset : calc( -3 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#thumbnails{
		grid-template-columns : repeat( 4 , calc( 110 * 100% / 480 ) );
		row-gap : calc( 13 var( --remBase ) );
		column-gap : calc( ( 40 / 3 ) * 100% / 480 );
		margin-top : calc( 9 var( --remBase ) );
	}
	#thumbnails button{
		height : calc( 110 var( --remBase ) );
	}
	#thumbnails button.is-active{
		outline-width : calc( 3 var( --remBase ) );
		outline-offset : calc( -3 var( --remBase ) );
	}
}
#data h2{
	font-weight : 400;
	color : #666;
	letter-spacing : .1em;
	border-bottom : solid 1px #bbb;
}
#data .description{
	font-family : "Noto Sans JP" , sans-serif;
	letter-spacing : .1em;
}
#data .price{
	display : grid;
	grid-template-columns : auto auto;
	align-items : baseline;
	justify-content : start;
	font-family : "Noto Sans JP" , sans-serif;
	font-weight : 700;
	letter-spacing : .1em;
}
#data .price span{
	font-weight : 400;
	letter-spacing : .1em;
}
#data .data dt , #data .data dd{
	font-family : "Noto Sans JP" , sans-serif;
	color : #666;
	letter-spacing : .1em;
}
@media screen and ( max-width : 750px ){
	#data h2{
		padding-bottom : calc( ( 51 - 10 ) var( --remBase ) );
		margin-top : calc( ( 70 - 10 ) var( --remBase ) );
		font-size : 3rem;
		line-height : calc( 50 / 30 );
	}
	#data .description{
		margin-top : calc( ( 45 - 12 ) var( --remBase ) );
		font-size : 2.6rem;
		line-height : calc( 50 / 26 );
	}
	#data .price{
		margin-top : calc( ( 64 - 12 ) var( --remBase ) );
		font-size : 4.2rem;
	}
	#data .price span{
		font-size : 2.2rem;
	}
	#data .data{
		margin-top : calc( ( 59 - 8 ) var( --remBase ) );
	}
	#data .data dt , #data .data dd{
		font-size : 2.4rem;
		line-height : calc( 40 / 24 );
	}
	#data .data dd + dt{
		margin-top : calc( 40 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#data h2{
		padding-bottom : calc( ( 32 - 9 ) var( --remBase ) );
		margin-top : calc( -9 var( --remBase ) );
		font-size : 1.8rem;
		line-height : 2;
	}
	#data .description{
		margin-top : calc( ( 32 - 7 ) var( --remBase ) );
		font-size : 1.6rem;
		line-height : calc( 30 / 16 );
	}
	#data .price{
		margin-top : calc( ( 56 - 7 ) var( --remBase ) );
		font-size : 3rem;
	}
	#data .price span{
		font-size : 1.6rem;
	}
	#data .data{
		margin-top : calc( ( 43 - 6 ) var( --remBase ) );
	}
	#data .data dt , #data .data dd{
		font-size : 1.4rem;
		line-height : calc( 26 / 14 );
	}
	#data .data dd + dt{
		margin-top : calc( 10 var( --remBase ) );
	}
}

/* --------------------------------------------
COLOR ME
--------------------------------------------- */
.cartjs_box{
	all : reset ! important;
	box-sizing : border-box;
}
@media screen and ( max-width : 750px ){
	.cartjs_box{
		margin-top : calc( 37 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.cartjs_box{
		margin-top : calc( 26 var( --remBase ) );
	}
}
.cartjs_product_img{
	display : none ! important;
}
.cartjs_product_table table{
	width : 100% ! important;
	margin : 0 ! important;
}
.cartjs_product_table tbody{
	display : block;
}
.cartjs_product_table tr:first-of-type{
	display : none ! important;
}
.cartjs_product_table tr:nth-of-type( 2 ){
	display : grid;
	align-items : center;
	justify-content : start;
}
.cartjs_product_table tr:nth-of-type( 2 ) th , .cartjs_product_table tr:nth-of-type( 2 ) td{
	padding-bottom : 0 ! important;
}
.cartjs_product_table tr:nth-of-type( 2 ) th{
	grid-row : 1/3;
	grid-column : 1;
	font-family : "Noto Sans JP" , sans-serif;
	color : #666;
	letter-spacing : .1em;
}
.cartjs_product_table tr:nth-of-type( 2 ) td{
	grid-row : 1/3;
	grid-column : 2;
}
.cartjs_product_table tr:nth-of-type( 2 ) td input{
	width : 100% ! important;
	padding-block : 0 ! important;
	padding-left : 0 ! important;
	font-family : "Noto Sans JP" , sans-serif;
	color : #666;
	text-align : right;
	border : solid 1px #bbb;
}
.cartjs_product_table tr:nth-of-type( 2 ) #up , .cartjs_product_table tr:nth-of-type( 2 ) #down{
	grid-column : 4;
}
.cartjs_product_table tr:nth-of-type( 2 ) #up{
	grid-row : 1;
	align-self : end;
}
.cartjs_product_table tr:nth-of-type( 2 ) #down{
	grid-row : 2;
	align-self : start;
}
@media screen and ( max-width : 750px ){
	.cartjs_product_table tr:nth-of-type( 2 ){
		grid-template-columns : calc( 124 var( --percentBase ) ) calc( 224 var( --percentBase ) ) calc( 16 var( --percentBase ) ) auto;
		row-gap : calc( 11 var( --remBase ) );
	}
	.cartjs_product_table tr:nth-of-type( 2 ) th{
		font-size : 2.6rem;
	}
	.cartjs_product_table tr:nth-of-type( 2 ) input{
		height : calc( 64 var( --remBase ) );
		padding-right : calc( 38 var( --remBase ) ) ! important;
		font-size : 2.6rem;
		border-radius : calc( 6 var( --remBase ) );
	}
	.cartjs_product_table tr:nth-of-type( 2 ) #up img , .cartjs_product_table tr:nth-of-type( 2 ) #down img{
		height : calc( 15 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.cartjs_product_table tr:nth-of-type( 2 ){
		grid-template-columns : calc( 66 * 100% / 480 ) calc( 160 * 100% / 480 ) calc( 11 * 100% / 480 ) auto;
		row-gap : calc( 9 var( --remBase ) );
	}
	.cartjs_product_table tr:nth-of-type( 2 ) th{
		font-size : 1.6rem;
	}
	.cartjs_product_table tr:nth-of-type( 2 ) input{
		height : calc( 46 var( --remBase ) );
		padding-right : calc( 26 var( --remBase ) ) ! important;
		font-size : 1.6rem;
		border-radius : calc( 6 var( --remBase ) );
	}
	.cartjs_product_table tr:nth-of-type( 2 ) #up img , .cartjs_product_table tr:nth-of-type( 2 ) #down img{
		height : calc( 10 var( --remBase ) );
	}
}
.cartjs_cart_in input{
	width : 100% ! important;
	margin-bottom : 0 ! important;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
	background-color : var( --blue ) ! important;
	border-radius : 0 ! important;
	transition : color var( --transitionBase ) , background var( --transitionBase );
}
@media screen and ( max-width : 750px ){
	.cartjs_cart_in{
		margin-top : calc( 39 var( --remBase ) ) ! important;
	}
	.cartjs_cart_in input{
		height : calc( 100 var( --remBase ) ) ! important;
		font-size : 3rem ! important;
	}
}
@media print , screen and ( min-width : 750.02px ){
	.cartjs_cart_in{
		margin-top : calc( 28 var( --remBase ) ) ! important;
	}
	.cartjs_cart_in input{
		width : 100% ! important;
		height : calc( 70 var( --remBase ) ) ! important;
		font-size : 1.8rem ! important;
	}
}
@media ( hover : hover ){
	.cartjs_cart_in input:hover{
		color : #555 ! important;
		background-color : rgb( 67 186 199 / .5 ) ! important;
	}
}
.cartjs_sk_link_other{
	display : none ! important;
}