@charset "UTF-8";

/* --------------------------------------------
ULU ONLINE SHOP
--------------------------------------------- */
#shopLinks a{
	position : relative;
	display : grid;
	align-items : center;
	color : white;
	letter-spacing : .1em;
	background-color : var( --blue );
	transition : background var( --transitionBase ) , color var( --transitionBase );
}
#shopLinks a::before , #shopLinks a::after{
	position : absolute;
	font-size : 0;
	content : "";
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
	transition : filter var( --transitionBase );
}
#shopLinks a::before{
	filter : var( --filterWhite );
}
#shopLinks a::after{
	background-image : url( "../images/ui/arrow/right01.svg" );
}
#shopLinks .school::before{
	background-image : url( "../images/ui/icon/black/frisbee.svg" );
}
#shopLinks .salon::before{
	background-image : url( "../images/ui/icon/black/trimming.svg" );
}
#shopLinks .goods::before{
	background-image : url( "../images/ui/icon/black/cart.svg" );
}
@media screen and ( max-width : 750px ){
	#shopLinks{
		padding-bottom : calc( 124 var( --remBase ) );
	}
	#shopLinks li + li{
		margin-top : calc( 21 var( --remBase ) );
	}
	#shopLinks a{
		height : calc( 129 var( --remBase ) );
		padding-left : calc( 156 var( --percentBase ) );
		font-size : 3.6rem;
	}
	#shopLinks a::after{
		top : calc( 59 var( --remBase ) );
		right : calc( 26 var( --percentBase ) );
		width : calc( 53 var( --percentBase ) );
		height : calc( 13 var( --remBase ) );
	}
	#shopLinks .school::before{
		top : calc( 27 var( --remBase ) );
		left : calc( 46 var( --percentBase ) );
		width : calc( 71 var( --percentBase ) );
		height : calc( 73 var( --remBase ) );
	}
	#shopLinks .salon::before{
		top : calc( 31 var( --remBase ) );
		left : calc( 50 var( --percentBase ) );
		width : calc( 63 var( --percentBase ) );
		height : calc( 69 var( --remBase ) );
	}
	#shopLinks .goods::before{
		top : calc( 25 var( --remBase ) );
		left : calc( 44 var( --percentBase ) );
		width : calc( 78 var( --percentBase ) );
		height : calc( 70 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#shopLinks{
		display : grid;
		grid-template-rows : calc( 90 var( --remBase ) );
		grid-template-columns : repeat( 3 , calc( 311 var( --percentBase ) ) );
		column-gap : calc( 33.5 var( --percentBase ) );
		padding-bottom : calc( 68 var( --remBase ) );
	}
	#shopLinks a{
		width : 100%;
		height : 100%;
		padding-left : calc( 83 * 100% / 311 );
		font-size : 1.8rem;
	}
	#shopLinks a::after{
		top : calc( 42 var( --remBase ) );
		right : calc( 27 * 100% / 311 );
		width : calc( 23 * 100% / 311 );
		height : calc( 6 var( --remBase ) );
	}
	#shopLinks .school::before{
		top : calc( 25 var( --remBase ) );
		left : calc( 28 * 100% / 311 );
		width : calc( 36 * 100% / 311 );
		height : calc( 37 var( --remBase ) );
	}
	#shopLinks .salon::before{
		top : calc( 26 var( --remBase ) );
		left : calc( 32 * 100% / 311 );
		width : calc( 32 * 100% / 311 );
		height : calc( 35 var( --remBase ) );
	}
	#shopLinks .goods::before{
		top : calc( 26 var( --remBase ) );
		left : calc( 25 * 100% / 311 );
		width : calc( 39 * 100% / 311 );
		height : calc( 35 var( --remBase ) );
	}
}
@media ( hover : hover ){
	#shopLinks a:hover{
		color : #555;
		background-color : rgb( 67 186 199 / .5 );
	}
	#shopLinks a:hover::before , #shopLinks a:hover::after{
		filter : invert( 32% ) sepia( 0% ) saturate( 439% ) hue-rotate( 153deg ) brightness( 88% ) contrast( 77% );
	}
}
:where( #recommend , #items , #guide ) h2{
	font-weight : 400;
	color : var( --blue );
	letter-spacing : .1em;
}
:where( #recommend , #items , #guide ) h2::before{
	display : block;
	letter-spacing : .05em;
}
@media screen and ( max-width : 750px ){
	:where( #recommend , #items , #guide ) h2{
		font-size : 2.6rem;
	}
	:where( #recommend , #items , #guide ) h2::before{
		margin-bottom : calc( 34 var( --remBase ) );
		font-size : 4.6rem;
	}
}
@media print , screen and ( min-width : 750.02px ){
	:where( #recommend , #items , #guide ) h2{
		font-size : 1.6rem;
	}
	:where( #recommend , #items , #guide ) h2::before{
		margin-bottom : calc( 22 var( --remBase ) );
		font-size : 3rem;
	}
}
@media screen and ( max-width : 750px ){
	#recommend{
		padding-bottom : calc( 163 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#recommend{
		padding-bottom : calc( 97 var( --remBase ) );
	}
}
@media screen and ( max-width : 750px ){
	#items{
		padding-bottom : calc( 173 var( --remBase ) );
	}
	#items .link02{
		margin-top : calc( 68 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#items{
		padding-bottom : calc( 97 var( --remBase ) );
	}
	#items .link02{
		margin-top : calc( 73 var( --remBase ) );
	}
}
.list-shopitems{
	display : grid;
	font-family : "Noto Sans JP" , sans-serif;
}
.list-shopitems.is-filter > li:nth-child( n+9 ){
	display : none;
}
.list-shopitems:not( .is-filter ) > li:nth-child( n+9 ){
	animation : fadeIn .3s;
}
.list-shopitems:not( .is-filter ) + #more{
	animation : fadeOut .3s;
	animation-fill-mode : forwards;
}
.list-shopitems picture{
	width : 100%;
	outline-style : solid;
	outline-color : #eaeaea;
}
.list-shopitems picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}
.list-shopitems .category{
	color : var( --blue );
	letter-spacing : .1em;
}
.list-shopitems h3 , .list-shopitems .price{
	font-weight : 400;
	color : #666;
	letter-spacing : .1em;
}
.list-shopitems .price{
	display : grid;
	grid-template-columns : auto auto;
	align-items : baseline;
	justify-content : end;
	font-weight : 700;
}
.list-shopitems .price span{
	font-weight : 400;
	letter-spacing : .1em;
}
@media screen and ( max-width : 750px ){
	.list-shopitems{
		grid-template-columns : repeat( 2 , calc( 320 var( --percentBase ) ) );
		row-gap : calc( 30 var( --remBase ) );
		justify-content : space-between;
		margin-top : calc( 42 var( --remBase ) );
	}
	.list-shopitems picture{
		height : calc( 320 var( --remBase ) );
		outline-width : 1px;
		outline-offset : -1px;
	}
	.list-shopitems .category{
		margin-top : calc( 20 var( --remBase ) );
		font-size : 2rem;
	}
	.list-shopitems h3{
		margin-top : calc( ( 32 - 6 ) var( --remBase ) );
		font-size : 2.4rem;
		line-height : 1.5;
	}
	.list-shopitems .price{
		margin-top : calc( ( 34 - 6 ) var( --remBase ) );
		font-size : 3rem;
	}
	.list-shopitems .price span{
		font-size : 2rem;
	}
}
@media print , screen and ( min-width : 750.02px ){
	.list-shopitems{
		grid-template-columns : repeat( 4 , calc( 220 var( --percentBase ) ) );
		row-gap : calc( 52 var( --remBase ) );
		column-gap : calc( 40 var( --percentBase ) );
		margin-top : calc( 42 var( --remBase ) );
	}
	.list-shopitems picture{
		height : calc( 220 var( --remBase ) );
		outline-width : 1px;
		outline-offset : -1px;
	}
	.list-shopitems .category{
		margin-top : calc( 19 var( --remBase ) );
		font-size : 1.2rem;
	}
	.list-shopitems h3{
		margin-top : calc( ( 22 - 5 ) var( --remBase ) );
		font-size : 1.6rem;
		line-height : calc( 26 / 16 );
	}
	.list-shopitems .price{
		margin-top : calc( ( 23 - 5 ) var( --remBase ) );
		font-size : 2rem;
	}
	.list-shopitems .price span{
		font-size : 1.2rem;
	}
}
@keyframes fadeIn{
	0%{
		display : none;
		opacity : 0;
	}
	1%{
		display : block;
		opacity : 0;
	}
	100%{
		display : block;
		opacity : 1;
	}
}
@keyframes fadeOut{
	0%{
		opacity : 1;
	}
	1%{
		opacity : 1;
	}
	100%{
		display : none;
		opacity : 0;
	}
}
#guide section{
	outline : solid 1px #eaeaea;
	outline-offset : -1px;
}
#guide h3{
	font-weight : 400;
	color : var( --blue );
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
}
#guide h3:first-of-type::after{
	display : block;
	margin-inline : auto;
	font-size : 0;
	content : "";
	filter : var( --filterBlue );
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : contain;
}
#guide p , #guide h4 , #guide dt , #guide dd{
	font-family : "Noto Sans JP" , sans-serif;
	color : #666;
	letter-spacing : .1em;
}
#guide h4{
	font-weight : 400;
}
#guide ul{
	display : flex;
	flex-wrap : wrap;
	align-items : center;
}
#guide a{
	position : relative;
	display : grid;
	place-items : center;
	margin-inline : auto;
	color : var( --blue );
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
	outline : solid 1px var( --blue );
	outline-offset : -1px;
	transition : background var( --transitionBase ) , color var( --transitionBase );
}
#guide a::after{
	position : absolute;
	display : block;
	font-size : 0;
	content : "";
	background : url( "../images/ui/arrow/black/right01.svg" ) center / contain no-repeat;
	filter : var( --filterBlue );
	transition : filter var( --transitionBase );
}
#guide dl{
	display : grid;
	grid-template-columns : 1fr auto;
	align-items : start;
	justify-content : space-between;
	border-bottom : solid 1px #ebebeb;
}
#guide dt , #guide dd{
	border-top : solid 1px #ebebeb;
}
#guide dd{
	text-align : right;
}
#guide section:nth-of-type( 1 ) h3::after{
	background-image : url( "../images/ui/icon/black/wallet.svg" );
}
#guide section:nth-of-type( 2 ) h3::after{
	background-image : url( "../images/ui/icon/black/delivery.svg" );
}
#guide section:nth-of-type( 3 ) h3:first-of-type::after{
	background-image : url( "../images/ui/icon/black/return.svg" );
}
#guide section:nth-of-type( 4 ) h3::after{
	background-image : url( "../images/ui/icon/black/calendar.svg" );
}
@media screen and ( max-width : 750px ){
	#guide{
		padding-bottom : calc( 137 var( --remBase ) );
	}
	#guide > div{
		margin-top : calc( 55 var( --remBase ) );
	}
	#guide section{
		padding-inline : calc( 44 var( --percentBase ) );
		padding-top : calc( 55 var( --remBase ) );
		padding-bottom : calc( 50 var( --remBase ) );
	}
	#guide section + section{
		margin-top : calc( 40 var( --remBase ) );
	}
	#guide h3{
		font-size : 3rem;
	}
	#guide p , #guide h4{
		font-size : 2.4rem;
		line-height : calc( 40 / 24 );
	}
	#guide h3 + p{
		margin-top : calc( ( 23 - 6 ) var( --remBase ) );
	}
	#guide p + h4{
		margin-top : calc( 16 var( --remBase ) );
	}
	#guide ul{
		column-gap : calc( 16 * 100% /  582 );
		margin-top : calc( ( 28 - 8 ) var( --remBase ) );
	}
	#guide ul img{
		height : calc( 43 var( --remBase ) );
	}
	#guide ul .visa{
		height : calc( 28 var( --remBase ) );
	}
	#guide a{
		width : calc( 340 * 100% / 582 );
		height : calc( 70 var( --remBase ) );
		margin-top : calc( 49 var( --remBase ) );
		font-size : 2.6rem;
	}
	#guide a::after{
		top : calc( 30 var( --remBase ) );
		right : calc( 29 * 100% / 340 );
		width : calc( 32 * 100% / 340 );
		height : calc( 8 var( --remBase ) );
	}
	#guide ul , #guide dl{
		margin-bottom : calc( 27 var( --remBase ) );
	}
	#guide dl{
		margin-top : calc( 51 var( --remBase ) );
	}
	#guide dt , #guide dd{
		padding-left : calc( 4 var( --remBase ) );
		padding-right : calc( 11 var( --remBase ) );
		font-size : 2.4rem;
		line-height : calc( 56 / 24 );
	}
	#guide p + h3{
		margin-top : calc( ( 51 - 8 ) var( --remBase ) );
	}
	#guide p + h3 + p{
		margin-top : calc( ( 46 - 8 ) var( --remBase ) );
	}
	#guide section:nth-of-type( 1 ) h3::after{
		width : calc( 63 * 100% /  582 );
		height : calc( 60 var( --remBase ) );
		margin-top : calc( 32 var( --remBase ) );
	}
	#guide section:nth-of-type( 2 ) h3::after{
		width : calc( 86 * 100% /  582 );
		height : calc( 55 var( --remBase ) );
		margin-top : calc( 32 var( --remBase ) );
	}
	#guide section:nth-of-type( 3 ) h3:first-of-type::after{
		width : calc( 60 * 100% /  582 );
		height : calc( 72 var( --remBase ) );
		margin-top : calc( 27 var( --remBase ) );
	}
	#guide section:nth-of-type( 4 ) h3::after{
		width : calc( 67 * 100% /  582 );
		height : calc( 66 var( --remBase ) );
		margin-top : calc( 31 var( --remBase ) );
	}
	#guide section:nth-of-type( n+3 ) p:last-of-type{
		margin-bottom : calc( ( 41 - 6 ) var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#guide{
		padding-bottom : calc( 158 var( --remBase ) );
	}
	#guide > div{
		display : grid;
		grid-template-columns : repeat( 2 , calc( 480 var( --percentBase ) ) );
		row-gap : calc( 40 var( --remBase ) );
		justify-content : space-between;
		margin-top : calc( 48 var( --remBase ) );
	}
	#guide section{
		display : flex;
		flex-direction : column;
		padding-inline : calc( 32 * 100% /  480 );
		padding-top : calc( 34 var( --remBase ) );
		padding-bottom : calc( 31 var( --remBase ) );
	}
	#guide h3{
		font-size : 1.8rem;
	}
	#guide p , #guide h4{
		font-size : 1.4rem;
		line-height : calc( 26 / 14 );
	}
	#guide h3 + p{
		margin-top : calc( ( 23 - 6 ) var( --remBase ) );
	}
	#guide p + h4{
		margin-top : calc( 16 var( --remBase ) );
	}
	#guide ul{
		column-gap : calc( 16 * 100% /  416 );
		margin-top : calc( ( 19 - 6 ) var( --remBase ) );
	}
	#guide ul img{
		height : calc( 31 var( --remBase ) );
	}
	#guide ul .visa{
		height : calc( 18 var( --remBase ) );
	}
	#guide a{
		width : calc( 231 * 100% / 416 );
		height : calc( 50 var( --remBase ) );
		margin-top : auto;
		font-size : 1.3rem;
	}
	#guide a::after{
		top : calc( 23 var( --remBase ) );
		right : calc( 22 * 100% / 231 );
		width : calc( 23 * 100% / 231 );
		height : calc( 6 var( --remBase ) );
	}
	#guide ul , #guide dl{
		margin-bottom : calc( 27 var( --remBase ) );
	}
	#guide dl{
		margin-top : calc( 22 var( --remBase ) );
	}
	#guide dt , #guide dd{
		padding-left : calc( 3 var( --remBase ) );
		padding-right : calc( 8 var( --remBase ) );
		font-size : 1.4rem;
		line-height : calc( 40 / 14 );
	}
	#guide p + h3{
		margin-top : calc( ( 41 - 6 ) var( --remBase ) );
	}
	#guide p + h3 + p{
		margin-top : calc( ( 32 - 6 ) var( --remBase ) );
	}
	#guide section:nth-of-type( 1 ) h3::after{
		width : calc( 45 * 100% /  416 );
		height : calc( 44 var( --remBase ) );
		margin-top : calc( 15 var( --remBase ) );
	}
	#guide section:nth-of-type( 2 ) h3::after{
		width : calc( 62 * 100% /  416 );
		height : calc( 40 var( --remBase ) );
		margin-top : calc( 17 var( --remBase ) );
	}
	#guide section:nth-of-type( 3 ) h3:first-of-type::after{
		width : calc( 44 * 100% /  416 );
		height : calc( 52 var( --remBase ) );
		margin-top : calc( 12 var( --remBase ) );
	}
	#guide section:nth-of-type( 4 ) h3::after{
		width : calc( 48 * 100% /  416 );
		height : calc( 47 var( --remBase ) );
		margin-top : calc( 15 var( --remBase ) );
	}
	#guide section:nth-of-type( n+3 ) p:last-of-type{
		margin-bottom : calc( ( 41 - 6 ) var( --remBase ) );
	}
}
@media ( hover : hover ){
	#guide a:hover{
		color : white;
		background-color : var( --blue );
	}
	#guide a:hover::before , #guide a:hover::after{
		filter : var( --filterWhite );
	}
}

/* --------------------------------------------
NEWS
--------------------------------------------- */
#news h2{
	font-weight : 400;
	color : var( --blue );
	letter-spacing : .2em;
}
#news > ul{
	display : grid;
}
#news picture{
	width : 100%;
}
#news picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}
#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 h3{
	font-weight : 400;
	color : var( --blue );
	letter-spacing : .2em;
}
#news time{
	display : block;
	color : #666;
	letter-spacing : .1em;
}
@media screen and ( max-width : 750px ){
	#news h2{
		font-size : 3rem;
		line-height : calc( 40 / 30 );
	}
	#news > ul{
		grid-template-columns : repeat( 2 , calc( 310 var( --percentBase ) ) );
		row-gap : calc( 63 var( --remBase ) );
		justify-content : space-between;
		margin-top : calc( ( 64 - 5 ) var( --remBase ) );
	}
	#news picture{
		height : calc( 220 var( --remBase ) );
	}
	#news .category{
		padding-block : calc( 10 var( --remBase ) );
		padding-inline : calc( 24 var( --remBase ) );
		margin-top : calc( 25 var( --remBase ) );
		font-size : 1.6rem;
	}
	#news h3{
		margin-top : calc( ( 25 - 8.23 ) var( --remBase ) );
		font-size : 2.6rem;
		line-height : calc( 42.46 / 26 );
	}
	#news time{
		margin-top : calc( ( 20 - 8.23 ) var( --remBase ) );
		font-size : 2.2rem;
	}
	#news #pagination{
		margin-top : calc( 93 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#news h2{
		font-size : 2.6rem;
		line-height : calc( 40 / 26 );
	}
	#news > ul{
		grid-template-columns : repeat( 3 , calc( 220 * 100% / 730 ) );
		row-gap : calc( 51 var( --remBase ) );
		column-gap : calc( 35 * 100% / 730 );
		margin-top : calc( ( 44 - 7 ) var( --remBase ) );
	}
	#news picture{
		height : calc( 160 var( --remBase ) );
	}
	#news .category{
		padding-block : calc( 7 var( --remBase ) );
		padding-inline : calc( 14 var( --remBase ) );
		margin-top : calc( 20 var( --remBase ) );
		font-size : 1.1rem;
	}
	#news h3{
		margin-top : calc( ( 22 - 7 ) var( --remBase ) );
		font-size : 1.6rem;
		line-height : calc( 30 / 16 );
	}
	#news time{
		margin-top : calc( ( 25 - 7 ) var( --remBase ) );
		font-size : 1.4rem;
	}
	#news #pagination{
		margin-top : calc( 102 var( --remBase ) );
	}
}

/* --------------------------------------------
PAGINATION
--------------------------------------------- */
#pagination{
	position : relative;
	left : 50%;
	display : inline-grid;
	grid-auto-flow : column;
	translate : -50% 0;
}
#pagination .page-numbers , #pagination .current{
	position : relative;
	display : grid;
	place-items : center;
}
#pagination .prev{
	position : absolute;
	top : 50%;
	translate : 0 -50%;
}
#pagination .next{
	position : absolute;
	top : 50%;
	translate : 0 -50%;
}
#pagination a , #pagination .current{
	display : grid;
	place-items : center;
}
#pagination .dots{
	display : grid;
	place-items : center;
}
#pagination .prev , #pagination .next{
	background-color : white;
	border : solid 1px var( --blue );
	transition : background var( --transitionBase );
}
#pagination .prev img , #pagination .next img{
	filter : var( --filterBlue );
	transition : filter var( --transitionBase );
}
#pagination a:not( .prev, .next ){
	color : var( --blue );
	transition : background var( --transitionBase ) , color var( --transitionBase );
}
#pagination .current{
	color : white;
	background-color : var( --blue );
}
@media screen and ( max-width : 750px ){
	#pagination{
		grid-auto-rows : calc( 46 var( --remBase ) );
		grid-auto-columns : calc( 46 var( --remBase ) );
		column-gap : calc( 10 var( --remBase ) );
	}
	#pagination a:not( .prev, .next ), #pagination .current{
		font-size : 2rem;
	}
	#pagination .prev , #pagination .next{
		width : calc( 46 var( --remBase ) );
		height : calc( 46 var( --remBase ) );
	}
	#pagination .prev img , #pagination .next img{
		height : calc( 13 var( --remBase ) );
	}
	#pagination .prev{
		left : calc( -116 var( --remBase ) );
	}
	#pagination .next{
		right : calc( -116 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	#pagination{
		grid-auto-rows : calc( 38 var( --remBase ) );
		grid-auto-columns : calc( 38 var( --remBase ) );
		column-gap : calc( 10 var( --remBase ) );
	}
	#pagination a:not( .prev, .next ), #pagination .current{
		font-size : 1.6rem;
	}
	#pagination .prev , #pagination .next{
		width : calc( 38 var( --remBase ) );
		height : calc( 38 var( --remBase ) );
	}
	#pagination .prev img , #pagination .next img{
		height : calc( 11 var( --remBase ) );
	}
	#pagination .prev{
		left : calc( -96 var( --remBase ) );
	}
	#pagination .next{
		right : calc( -96 var( --remBase ) );
	}
}
@media ( hover : hover ){
	#pagination :where( .prev , .next ):hover{
		background-color : var( --blue );
	}
	#pagination :where( .prev , .next ):hover img{
		filter : var( --filterWhite );
	}
	#pagination a:not( .prev, .next ):hover{
		color : white;
		background-color : var( --blue );
	}
}