@charset "UTF-8";

/* --------------------------------------------
SIDEBAR
--------------------------------------------- */
#sidebar h4{
	font-size : 2.8rem;
	font-weight : 500;
	line-height : 1.3;
}
#sidebar h4::after{
	display : block;
	width : 100%;
	height : calc( 4 var( --remBase ) );
	margin-top : calc( 16 var( --remBase ) );
	content : "";
}
#sidebar ul{
	margin-top : calc( 8 var( --remBase ) );
}
#sidebar ul + h4{
	margin-top : calc( 40 var( --remBase ) );
}
#sidebar li{
	border-bottom : solid 1px #f1f2ed;
}
#sidebar ul:not( .column02 ) li + li{
	margin-top : calc( 8 var( --remBase ) );
}
#sidebar .column02{
	display : grid;
	row-gap : calc( 8 var( --remBase ) );
	justify-content : space-between;
}
#sidebar .column02 a{
	line-height : 1.2;
}
#sidebar a{
	display : block;
	padding-block : calc( 16 var( --remBase ) );
}
@media screen and ( width <= 750px ){
	#sidebar{
		margin-top : calc( 40 var( --remBase ) );
	}
	#sidebar h4::after{
		background-image : linear-gradient( to right , var( --wp--custom--primary ) calc( 30 var( --percentBase ) ) , #f2f2f2 calc( 30 var( --percentBase ) ) );
	}
	#sidebar ul:not( .column02 ) a{
		padding-block : calc( 13 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.5;
		line-height : calc( 22 / 16 );
	}
	#sidebar .column02{
		grid-template-columns : repeat( 2 , calc( 154 var( --percentBase ) ) );
	}
	#sidebar .column02 a{
		font-size : 1.4rem;
	}
}
@media screen and ( width > 750px ) , print{
	#sidebar h4::after{
		background-image : linear-gradient( to right , var( --wp--custom--primary ) calc( 30 * 100% / 320 ) , #f2f2f2 calc( 30 * 100% / 320 ) );
	}
	#sidebar ul:not( .column02 ) a{
		padding-block : calc( 8 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#sidebar .column02{
		grid-template-columns : repeat( 2 , calc( 154 * 100% / 320 ) );
	}
	#sidebar .column02 a{
		font-size : 1.2rem;
	}
}

/* --------------------------------------------
FOOTER
--------------------------------------------- */
#footer{
	border-image-source : linear-gradient( #f1f2ed , #f1f2ed );
	border-image-slice : 0 fill;
	border-image-outset : 0 100vw 0 100vw;
}

/* --------------------------------------------
FOOTER ABOUT
--------------------------------------------- */
#footerSupports > p{
	font-size : 1.6rem;
	line-height : 2;
}
@media screen and ( width <= 750px ){
	#footerSupports{
		padding-top : calc( 20 var( --remBase ) );
	}
	#footerSupports h5 img{
		height : calc( 80 var( --remBase ) );
	}
	#footerSupports > p{
		margin-top : calc( 8 var( --remBase ) );
	}
	#footerSupports ul{
		margin-top : calc( 60 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#footerSupports{
		padding-top : calc( 80 var( --remBase ) );
		padding-bottom : calc( 32 var( --remBase ) );
	}
	#footerSupports h5 img{
		height : calc( 50 var( --remBase ) );
	}
	#footerSupports > p{
		margin-top : calc( 9 var( --remBase ) );
	}
	#footerSupports ul{
		display : grid;
		grid-template-columns : calc( 460 var( --percentBase ) ) calc( 20 var( --percentBase ) ) calc( 480 var( --percentBase ) ) calc( 440 var( --percentBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#footerSupports ul a{
		height : 100%;
	}
}
#footer .tel h6{
	font-size : 2.4rem;
	font-weight : 400;
	line-height : 1.5;
}
#footer .tel span{
	display : block;
	font-size : 1.6rem;
	line-height : 2;
}
@media screen and ( width <= 750px ){
	#footer .tel img{
		height : calc( 40 var( --remBase ) );
		margin-top : calc( 6 var( --remBase ) );
	}
	#footer .tel span{
		display : block;
		margin-top : calc( 8 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#footer .tel{
		grid-row : 1;
		grid-column : 1;
	}
	#footer .tel img{
		height : calc( 50 var( --remBase ) );
		margin-top : calc( 14 var( --remBase ) );
	}
	#footer .tel span{
		margin-top : calc( 2 var( --remBase ) );
	}
}
#footer .line a{
	display : grid;
	color : white;
	background-color : var( --wp--custom--green );
}
#footer .line h6{
	grid-row : 1;
	grid-column : 1;
}
#footer .line h6 img{
	height : 100%;
}
#footer .line span{
	grid-row : 2;
	grid-column : 1;
	font-size : 1.6rem;
	line-height : 1.7;
}
#footer .line figure{
	grid-row : 1/3;
	grid-column : 2;
	align-self : start;
}
#footer .line figure img{
	width : 100%;
	height : auto;
}
#footer .line figcaption{
	line-height : 1.1;
}
@media screen and ( width <= 750px ){
	#footer .line a{
		grid-template-rows : calc( 18 var( --remBase ) ) auto;
		grid-template-columns : calc( 198 * 100% / 336 ) 1fr;
		row-gap : calc( 8 var( --remBase ) );
		column-gap : calc( 18 * 100% / 336 );
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 16 var( --percentBase ) );
	}
	#footer .line figure{
		padding-top : calc( 16 var( --remBase ) );
	}
	#footer .line figure figcaption{
		margin-top : calc( 8 var( --remBase ) );
		font-size : 1.1rem;
		text-align : center;
	}
}
@media screen and ( width > 750px ) , print{
	#footer .line{
		grid-row : 1;
		grid-column : 3;
	}
	#footer .line a{
		grid-template-rows : calc( 18 var( --remBase ) ) auto;
		grid-template-columns : calc( 355 * 100% / 452 ) 1fr;
		row-gap : calc( 10 var( --remBase ) );
		column-gap : calc( 17 * 100% / 452 );
		padding-top : calc( 22 var( --remBase ) );
		padding-bottom : calc( 14 var( --remBase ) );
		padding-left : calc( 16 * 100% / 480 );
		padding-right : calc( 12 * 100% / 480 );
	}
	#footer .line span{
		align-self : start;
	}
	#footer .line figure{
		padding-top : calc( 2 var( --remBase ) );
	}
	#footer .line figure figcaption{
		margin-top : calc( 6 var( --remBase ) );
		font-size : 1.2rem;
		line-height : 1.1;
	}
}
#footer .email a{
	display : block;
	color : white;
	background-color : var( --wp--custom--primary );
}
#footer .email h6{
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
	justify-content : start;
	font-weight : 700;
}
#footer .email h6::before{
	display : block;
	width : 100%;
	height : calc( 20.69 var( --remBase ) );
	aspect-ratio : 30/26.69;
	font-size : 0;
	content : "";
	background-image : url( "../images/ui/icon/emai_white.svg" );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
#footer .email span{
	display : block;
	font-size : 1.6rem;
	line-height : 1.7;
}
#footer .email span:nth-of-type( 2 ){
	width : fit-content;
	margin-left : auto;
}
@media screen and ( width <= 750px ){
	#footer .email a{
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 16 var( --percentBase ) );
	}
	#footer .email h6{
		column-gap : calc( 8 * 100% / 336 );
		font-size : 2.4rem;
	}
	#footer .email span{
		margin-top : calc( 8 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#footer .email{
		grid-row : 1;
		grid-column : 4;
	}
	#footer .email a{
		padding-top : calc( 22 var( --remBase ) );
		padding-bottom : calc( 18 var( --remBase ) );
		padding-left : calc( 22 * 100% / 440 );
		padding-right : calc( 18 * 100% / 440 );
	}
	#footer .email h6{
		column-gap : calc( 4 * 100% / 400 );
		font-size : 2rem;
	}
	#footer .email span:nth-of-type( 1 ){
		margin-top : calc( 8 var( --remBase ) );
	}
	#footer .email span:nth-of-type( 2 ){
		margin-top : calc( 2 var( --remBase ) );
	}
}

/* --------------------------------------------
FOOTER SHOPS
--------------------------------------------- */
#footerShops h5 a{
	display : block;
}
#footerShops h6{
	font-weight : 500;
}
#footerShops p a{
	margin-left : .25em;
}
#footerShops > ul > li{
	display : grid;
	grid-template-rows : auto auto;
	align-items : start;
}
#footerShops > ul > li::before{
	display : block;
	grid-row : 1/-1;
	grid-column : 2;
	width : 100%;
	height : 100%;
	content : "";
	background-color : var( --wp--custom--primary );
}
#footerShops h6{
	grid-row : 1/-1;
	grid-column : 1;
	align-self : start;
	font-size : 1.8rem;
	line-height : 1.5;
}
#footerShops p , #footerShops li li{
	font-size : 1.6rem;
	line-height : 1.5;
}
#footerShops p{
	grid-row : 1;
	grid-column : 3;
}
#footerShops ul ul{
	grid-row : 2;
	grid-column : 3;
}
@media screen and ( width <= 750px ){
	#footerShops{
		padding-bottom : calc( 82 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#footerShops h5 a{
		width : fit-content;
		margin-inline : auto;
	}
	#footerShops h5 img{
		height : calc( 118 var( --remBase ) );
	}
	#footerShops > ul{
		padding-left : calc( 8 var( --percentBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	#footerShops > ul > li{
		grid-template-columns : calc( 72 * 100% / 360 ) calc( 2 * 100% / 360 ) 1fr;
		column-gap : calc( 8 * 100% / 360 );
	}
	#footerShops > ul > li + li{
		margin-top : calc( 24 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#footerShops{
		display : grid;
		grid-template-columns : calc( 583 var( --percentBase ) ) 1fr;
		column-gap : calc( 17 var( --percentBase ) );
		align-items : center;
		padding-top : calc( 34 var( --remBase ) );
		padding-bottom : calc( 24 var( --remBase ) );
		border-top : solid calc( 2 var( --remBase ) ) #e0e0e0;
	}
	#footerShops h5{
		grid-row : 1;
		grid-column : 1;
	}
	#footerShops h5 img{
		width : 100%;
		height : auto;
	}
	#footerShops > ul{
		display : grid;
		grid-template-columns : auto auto;
		align-items : start;
		justify-content : space-between;
	}
	#footerShops > ul > li{
		grid-template-columns : auto calc( 2 var( --remBase ) ) 1fr;
		column-gap : calc( 8 var( --remBase ) );
	}
	#footerShops ul ul{
		display : grid;
		grid-template-columns : auto auto;
		column-gap : calc( 16 var( --remBase ) );
		align-items : start;
		justify-content : start;
	}
}

/* --------------------------------------------
FOOTER NAV
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#footer nav{
		display : none;
	}
}
@media screen and ( width > 750px ) , print{
	#footer nav{
		padding-block : calc( 34 var( --remBase ) );
		border-image-source : linear-gradient( #828282 , #828282 );
		border-image-slice : 0 fill;
		border-image-outset : 0 100vw 0 100vw;
	}
	#footer nav ul{
		column-gap : calc( 16 var( --percentBase ) );
	}
	#footer nav li{
		display : contents;
	}
	#footer nav a > span , #footer nav li + li::before{
		font-size : 1.8rem;
		font-weight : 500;
		line-height : 1.5;
		color : white;
	}
	#footer nav li + li::before{
		white-space : pre;
		content : "｜";
	}
}

/* --------------------------------------------
COPYRIGHTS
--------------------------------------------- */
#copyrights{
	font-family : var( --wp--preset--font-family--alata );
	font-size : 1.6rem;
	line-height : 1.7;
	background-color : var( --wp--custom--gray );
	border-image-source : linear-gradient( var( --wp--custom--gray ) , var( --wp--custom--gray ) );
	border-image-slice : 0 fill;
	border-image-outset : 0 100vw 0 100vw;
}
@media screen and ( width <= 750px ){
	#copyrights{
		position : relative;
		padding-block : calc( 70 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#copyrights{
		position : relative;
		padding-top : calc( 25 var( --remBase ) );
		padding-bottom : calc( 174 var( --remBase ) );
	}
	#copyrights::before{
		position : absolute;
		top : 0;
		left : calc( 920 var( --viewportBase ) );
		display : block;
		width : calc( 500 var( --viewportBase ) );
		height : calc( 5 var( --remBase ) );
		font-size : 0;
		content : "";
		background-color : var( --wp--custom--primary );
		translate : 0 -50%;
	}
}

/* --------------------------------------------
TO TOP
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#toTop{
		position : absolute;
		top : calc( -38 var( --remBase ) );
		right : 0;
		display : grid;
		place-items : center;
		width : auto;
		height : calc( 40 var( --remBase ) );
		aspect-ratio : 1;
		background-color : var( --wp--custom--gray );
	}
	#toTop a{
		display : block;
		display : grid;
		place-items : center;
		width : 100%;
		height : 100%;
	}
	#toTop img{
		height : calc( 14 var( --remBase ) );
	}
}

/* --------------------------------------------
COPYRIGHT
--------------------------------------------- */
#copyright{
	color : white;
}
@media screen and ( width <= 750px ){
	#copyright{
		text-align : center;
	}
}
@media screen and ( width > 750px ) , print{
	#copyright{
		text-align : right;
	}
}