@charset "UTF-8";

/* --------------------------------------------
CAMPAIGN
--------------------------------------------- */
#campaign{
	position : relative;
	overflow-x : clip;
}
#campaign h2{
	position : absolute;
	z-index : 1;
}
#campaign .splide__slide > a{
	display : block;
}
#campaign .splide__slide > a > picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
@media screen and ( width <= 750px ){
	#campaign{
		padding-bottom : calc( 80 var( --remBase ) );
		padding-left : calc( 16 var( --viewportBase ) );
		margin-top : calc( 46 var( --remBase ) );
	}
	#campaign h2{
		top : calc( -52 var( --remBase ) );
		left : calc( -21 var( --viewportBase ) );
	}
	#campaign h2 img{
		height : calc( 144.34 var( --remBase ) );
	}
	#campaign .splide__slide{
		width : calc( 220 * 100% / 384 );
		height : calc( 320 var( --remBase ) );
		margin-right : calc( 16 * 100% / 384 );
	}
}
@media screen and ( width > 750px ) , print{
	#campaign{
		z-index : 1;
		margin-top : calc( -192 var( --remBase ) );
		margin-bottom : calc( 80 var( --remBase ) );
		pointer-events : none;
	}
	#campaign::before{
		position : absolute;
		bottom : 0;
		left : 0;
		display : block;
		width : 100%;
		height : calc( 256 var( --remBase ) );
		font-size : 0;
		content : "";
		background-color : color-mix( in sRGB , var( --wp--custom--primary ) 20% , transparent );
	}
	#campaign h2{
		top : calc( -30 var( --remBase ) );
	}
	#campaign h2 img{
		height : calc( 144.34 var( --remBase ) );
	}
	#campaign .splide__list{
		align-items : end;
	}
	#campaign .splide__slide{
		width : calc( 196 var( --percentBase ) );
		height : calc( 256 var( --remBase ) );
		pointer-events : auto;
		background-color : white;
		border-left : solid white calc( 8 var( --remBase ) );
		border-right : solid white calc( 8 var( --remBase ) );
	}
	#campaign .splide__slide > a{
		position : relative;
		width : 100%;
		height : 100%;
	}
	#campaign .splide__slide > a > picture{
		position : absolute;
		bottom : 0;
		left : 0;
		width : 100%;
		height : calc( 256 var( --remBase ) );
	}
	#campaign:not( .is-overflow ) .splide__list > li:first-child{
		width : calc( 344 var( --percentBase ) );
		height : calc( 464 var( --remBase ) );
	}
	#campaign:not( .is-overflow ) .splide__list > li:first-child > a > picture{
		height : calc( 464 var( --remBase ) );
	}
	#campaign.is-overflow .splide__slide.is-active{
		width : calc( 344 var( --percentBase ) );
		height : calc( 464 var( --remBase ) );
	}
	#campaign.is-overflow .splide__slide.is-active > a > picture{
		height : calc( 464 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1440px ){
	#campaign h2{
		left : calc( -17 var( --viewportBase ) );
	}
}
@media screen and ( width >= 1440px ) , print{
	#campaign h2{
		left : calc( 50% - 737px );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#campaign .splide__slide > a > picture{
		transition : height var( --transitionBase );
	}
}
dialog{
	inset : 0;
	margin : auto;
	overflow-x : clip;
}
dialog::backdrop{
	background-color : color-mix( in sRGB , black 40% , transparent );
}
dialog .dialogContent{
	display : grid;
	align-items : center;
	justify-content : center;
	overflow : visible;
}
dialog .dialogContent > picture img{
	width : 100%;
	max-width : 100%;
	height : 100%;
	max-height : 100%;
	object-fit : contain;
}

@media screen and ( width <= 750px ){
}
@media screen and ( width > 750px ) , print{
	dialog .dialogContent{
		max-width: 800px;
	}
}
dialog .controller{
	display : grid;
	justify-content : center;
}
dialog .controller button{
	display : grid;
	grid-row : 1;
	place-items : center;
	width : 100%;
	height : 100%;
}
dialog .controller .prev , dialog .controller .next{
	background-color : #c4c4c4;
}
dialog .controller .prev img , dialog .controller .next img{
	height : calc( 14 var( --remBase ) );
	filter : var( --filterWhite );
}
dialog .controller .prev{
	grid-column : 1;
}
dialog .controller .close{
	grid-template-columns : auto auto;
	grid-column : 2;
	column-gap : .25em;
	justify-content : center;
	font-size : 1.4rem;
	background-color : white;
	border : solid 1px #c4c4c4;
}
dialog .controller .next{
	grid-column : 3;
}
@media screen and ( width > 750px ) , print{
	dialog .controller{
		grid-template-columns : calc( 40 var( --remBase ) ) calc( 136 var( --remBase ) ) calc( 40 var( --remBase ) );
		column-gap : calc( 8 var( --remBase ) );
		height : calc( 40 var( --remBase ) );
		margin-top : calc( 23 var( --remBase ) );
	}
}
dialog.is-open{
	animation : fadeIn .3s ease-out forwards;
}
dialog:not( .is-open ){
	animation : fadeOut .3s ease-out forwards;
}
@keyframes fadeIn{
	from{
		opacity : 0;
	}
	to{
		opacity : 1;
	}
}
@keyframes fadeOut{
	from{
		opacity : 1;
	}
	to{
		opacity : 0;
	}
}

/* --------------------------------------------
COMMON
--------------------------------------------- */
.title-home{
	display : grid;
	grid-template-columns : auto auto auto;
	align-items : end;
	justify-content : start;
}
.title-home::before , .title-home::after{
	grid-row : 1;
	font-family : var( --wp--preset--font-family--lato );
	font-weight : 700;
	letter-spacing : .1em;
}
.title-home::before{
	grid-column : 1;
	color : var( --wp--custom--primary );
}
.title-home::after{
	grid-column : 2;
}
.title-home span{
	font-size : 2rem;
	font-weight : 500;
	line-height : 1.3;
	letter-spacing : .1em;
	border-bottom-color : var( --wp--custom--primary );
	border-bottom-style : solid;
	border-bottom-width : calc( 4 var( --remBase ) );
}
@media screen and ( width <= 750px ){
	.title-home{
		grid-template-columns : auto 1fr;
		row-gap : calc( 8 var( --remBase ) );
	}
	.title-home::before , .title-home::after{
		font-size : 4rem;
	}
	.title-home span{
		grid-row : 2;
		grid-column : 1/3;
		padding-bottom : calc( 8 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	.title-home::before , .title-home::after{
		font-size : 5rem;
	}
	.title-home span{
		grid-row : 1;
		grid-column : 3;
		padding-bottom : calc( 3 var( --remBase ) );
		margin-bottom : calc( 6 var( --remBase ) );
		margin-left : calc( 9 var( --remBase ) );
	}
}

/* --------------------------------------------
PLANS
--------------------------------------------- */
#plans > ul > li > a{
	display : grid;
	grid-template-rows : auto calc( 8 var( --remBase ) ) calc( 48 var( --remBase ) ) calc( 16 var( --remBase ) ) auto calc( 16 var( --remBase ) ) 1fr;
	align-items : start;
}
#plans h3{
	display : grid;
	grid-template-columns : auto auto;
	grid-row : 1;
	grid-column : 1/-1;
	align-items : center;
	justify-content : start;
	padding-bottom : calc( 4 var( --remBase ) );
	border-bottom : solid 1px #d9d9d9;
}
#plans h3 .icon{
	width : auto;
	height : calc( 40 var( --remBase ) );
	aspect-ratio : 1;
}
#plans h3 > span{
	display : grid;
	grid-template-columns : auto auto;
	align-items : baseline;
	justify-content : start;
	font-size : 2.8rem;
	font-weight : 700;
}
#plans h3 > span span{
	font-size : 2rem;
}
#plans .maker{
	grid-row : 3;
	grid-column : 1;
	width : 100%;
	height : 100%;
}
#plans .maker img{
	width : 100%;
	height : 100%;
	object-fit : contain;
	object-position : left center;
}
#plans .price{
	display : flex;
	flex-wrap : wrap;
	grid-template-columns : auto auto;
	grid-row : 5;
	grid-column : 1;
	align-items : baseline;
	justify-content : start;
	font-size : 6rem;
	font-weight : 700;
	color : var( --wp--custom--red );
}
#plans .price span{
	font-size : 2rem;
}
#plans ul ul{
	display : flex;
	flex-wrap : wrap;
	grid-row : 7;
	grid-column : 1;
	row-gap : calc( 4 var( --remBase ) );
}
#plans ul ul li{
	display : grid;
	place-items : center;
	height : calc( 22 var( --remBase ) );
	padding-inline : calc( 4 var( --remBase ) );
	font-size : 1.2rem;
	color : white;
}
#plans picture{
	grid-row : 3 / -1;
	grid-column : 2;
	align-self : start;
	width : 100%;
}
#plans picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
@media screen and ( width <= 750px ){
	#plans{
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#plans > ul{
		margin-top : calc( 24 var( --remBase ) );
	}
	#plans > ul > li + li{
		margin-top : calc( 30 var( --remBase ) );
	}
	#plans > ul > li > a{
		grid-template-columns : 1fr calc( 160 var( --percentBase ) );
	}
	#plans ul ul{
		column-gap : calc( 4 * 100% / 208 );
	}
	#plans picture{
		height : calc( 160 var( --remBase ) );
	}
	#plans .more01{
		margin-top : calc( 36 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#plans{
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#plans > ul{
		display : grid;
		grid-template-columns : repeat( 3 , calc( 440 var( --percentBase ) ) );
		justify-content : space-between;
		margin-top : calc( 32 var( --remBase ) );
	}
	#plans > ul > li > a{
		grid-template-columns : 1fr calc( 200 * 100% / 440 );
	}
	#plans ul ul{
		column-gap : calc( 4 * 100% / 240 );
	}
	#plans picture{
		height : calc( 200 var( --remBase ) );
	}
	#plans .more01{
		margin-top : calc( 64 var( --remBase ) );
	}
}

/* --------------------------------------------
CASE
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#cases{
		padding-bottom : calc( 84 var( --remBase ) );
		padding-left : calc( 16 var( --viewportBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#cases{
		position : relative;
		display : grid;
		grid-template-columns : calc( 440 var( --percentBase ) ) calc( 920 var( --percentBase ) );
		row-gap : calc( 54 var( --remBase ) );
		align-items : start;
		justify-content : space-between;
		padding-top : calc( 80 var( --remBase ) );
		padding-bottom : calc( 98 var( --remBase ) );
		border-bottom : solid 1px #d1d1d6;
	}
	#cases::before{
		position : absolute;
		top : 0;
		left : 0;
		display : block;
		width : 100%;
		height : calc( 310 var( --remBase ) );
		font-size : 0;
		content : "";
		background-color : color-mix( in sRGB , var( --wp--custom--primary ) 20% , transparent );
	}
	#cases > h2{
		grid-row : 1;
		grid-column : 1/-1;
	}
}
#searchCaseCategory h4{
	font-size : 2.4rem;
	font-weight : 500;
	line-height : 1.3;
	border-left-color : var( --wp--custom--primary );
	border-left-style : solid;
}
#searchCaseCategory a{
	position : relative;
	display : grid;
	align-items : start;
	justify-content : center;
	width : 100%;
	height : 100%;
	font-weight : 700;
	text-align : center;
	background : linear-gradient( 135deg , #f1f2ed 0% , #f1f2ed 50% , white 50% , white 100% );
	outline : solid calc( 3 var( --remBase ) ) #f2f2f2;
	outline-offset : calc( -3 var( --remBase ) );
}
#searchCaseCategory a img{
	grid-row : 1;
	grid-column : 1;
	height : 100%;
	font-size : 0;
}
@media screen and ( width <= 750px ){
	#searchCaseCategory{
		padding-bottom : calc( 24 var( --remBase ) );
		margin-top : calc( 30 var( --remBase ) );
	}
	#searchCaseCategory h4{
		padding-left : calc( 6 * 100% / 384 );
		border-left-width : calc( 8 var( --remBase ) );
	}
	#searchCaseCategory .splide__track{
		margin-top : calc( 16 var( --remBase ) );
	}
	#searchCaseCategory a{
		grid-template-rows : calc( 60 var( --remBase ) );
		padding-top : calc( 10 var( --remBase ) );
		font-size : 1.2rem;
		line-height : calc( 16 / 12 );
	}
}
@media screen and ( width > 750px ) , print{
	#searchCaseCategory{
		grid-row : 2;
		grid-column : 1;
	}
	#searchCaseCategory h4{
		padding-left : calc( 8 * 100% / 440 );
		border-left-width : calc( 10 var( --remBase ) );
	}
	#searchCaseCategory .splide__track{
		margin-top : calc( 22 var( --remBase ) );
	}
	#searchCaseCategory .splide__list{
		display : grid;
		grid-template-columns : repeat( 4 , calc( 108 * 100% / 440 ) );
		grid-auto-rows : calc( 108 var( --remBase ) );
		row-gap : calc( 3 var( --remBase ) );
		justify-content : space-between;
	}
	#searchCaseCategory a{
		grid-template-rows : calc( 60 var( --remBase ) );
		row-gap : calc( 1 var( --remBase ) );
		padding-top : calc( 17 var( --remBase ) );
		font-size : 1.4rem;
		line-height : calc( 19 / 14 );
	}
}
#case h3{
	font-size : 2.4rem;
	font-weight : 500;
	line-height : 1.3;
	border-left-color : var( --wp--custom--primary );
	border-left-style : solid;
}
#case picture{
	width : 100%;
}
#case picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
}
#case h4{
	font-size : 1.6rem;
	line-height : 1.5;
}
#case ul ul{
	display : flex;
	flex-wrap : wrap;
	row-gap : calc( 4 var( --remBase ) );
}
#case ul ul li{
	display : grid;
	place-items : center;
	height : calc( 22 var( --remBase ) );
	padding-inline : calc( 4 var( --remBase ) );
	font-size : 1.2rem;
	line-height : 1.2;
	color : white;
}
@media screen and ( width <= 750px ){
	#case h3{
		padding-left : calc( 6 * 100% / 384 );
		border-left-width : calc( 8 var( --remBase ) );
	}
	#case .splide__track{
		margin-top : calc( 16 var( --remBase ) );
	}
	#case .splide__slide a{
		display : grid;
		grid-template-rows : calc( 166 var( --remBase ) ) calc( 8 var( --remBase ) ) auto calc( 8 var( --remBase ) ) auto;
		grid-template-columns : 1fr;
	}
	#case picture{
		grid-row : 1;
		grid-column : 1;
		height : 100%;
	}
	#case p{
		grid-row : 1;
		grid-column : 1;
		align-self : end;
		justify-self : start;
		width : fit-content;
		padding-block : calc( 4 var( --remBase ) );
		padding-inline : calc( 8 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.5;
		background-color : white;
	}
	#case h4{
		grid-row : 3;
		grid-column : 1;
	}
	#case ul ul{
		grid-row : 5;
		grid-column : 1;
		column-gap : calc( 4 * 100% / 240 );
	}
	#case .more01{
		margin-top : calc( 40 var( --remBase ) );
		margin-right : auto;
	}
}
@media screen and ( width > 750px ) , print{
	#case h3{
		padding-left : calc( 8 * 100% / 920 );
		border-left-width : calc( 10 var( --remBase ) );
	}
	#case .splide__track{
		margin-top : calc( 22 var( --remBase ) );
	}
	#case .splide__list{
		display : grid;
		grid-template-columns : repeat( 4 , calc( 200 * 100% / 920 ) );
		row-gap : calc( 22 var( --remBase ) );
		justify-content : space-between;
	}
	#case .splide__slide , #case .splide__slide a{
		display : grid;
		grid-template-rows : subgrid;
		grid-row : span 3;
		row-gap : calc( 4 var( --remBase ) );
	}
	#case picture{
		height : calc( 120 var( --remBase ) );
	}
	#case ul ul{
		column-gap : calc( 4 * 100% / 200 );
	}
	#case .more01{
		width : calc( 140 * 100% / 920 );
		margin-top : calc( 24 var( --remBase ) );
	}
}

/* --------------------------------------------
VOICE
--------------------------------------------- */
#voice .splide__slide a{
	display : grid;
	grid-template-columns : 1fr;
}
#voice picture{
	grid-row : 1/3;
	grid-column : 1;
	width : 100%;
	height : 100%;
}
#voice picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#voice p{
	display : grid;
	grid-row : 2/4;
	grid-column : 1;
	width : fit-content;
	padding-block : calc( 4 var( --remBase ) );
	padding-inline : calc( 8 var( --remBase ) );
	font-size : 1.6rem;
	line-height : 1.5;
	color : white;
	background-color : var( --wp--custom--primary );
}
#voice h3{
	grid-row : 5;
	grid-column : 1;
	font-size : 1.6rem;
	font-weight : 400;
	line-height : 1.7;
}
@media screen and ( width <= 750px ){
	#voice{
		padding-bottom : calc( 80 var( --remBase ) );
		padding-left : calc( 16 var( --viewportBase ) );
	}
	#voice .splide__track{
		margin-top : calc( 30 var( --remBase ) );
	}
	#voice .splide__slide a{
		grid-template-rows : calc( 190 var( --remBase ) ) calc( 16 var( --remBase ) ) calc( 16 var( --remBase ) ) calc( 4 var( --remBase ) ) auto;
	}
	#voice .more01{
		margin-top : calc( 32 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#voice{
		padding-bottom : calc( 8 var( --remBase ) );
		margin-top : calc( 96 var( --remBase ) );
	}
	#voice .splide__track{
		margin-top : calc( 28 var( --remBase ) );
	}
	#voice .splide__list{
		display : grid;
		grid-template-columns : repeat( 6 , calc( 200 var( --percentBase ) ) );
		justify-content : space-between;
	}
	#voice .splide__slide a{
		grid-template-rows : calc( 140 var( --remBase ) ) calc( 16 var( --remBase ) ) calc( 16 var( --remBase ) ) calc( 4 var( --remBase ) ) auto;
	}
	#voice .more01{
		margin-top : calc( 44 var( --remBase ) );
	}
}

/* --------------------------------------------
ABOUT
--------------------------------------------- */
.homeAbout01{
	position : relative;
	overflow-x : clip;
}
.homeAbout01::before{
	position : absolute;
	top : 0;
	left : 0;
	z-index : -1;
	display : block;
	width : 100%;
	font-size : 0;
	content : "";
	background-color : color-mix( in sRGB , var( --wp--custom--primary ) 20% , transparent );
}
.homeAbout01 section h3{
	font-weight : 500;
	line-height : 1.3;
}
.homeAbout01 section h3 span{
	color : var( --wp--custom--primary );
}
.homeAbout01 section p{
	line-height : 2;
}
.homeAbout01 section figure img{
	width : 100%;
	height : auto;
}
.homeAbout01 .splide__slide > a{
	grid-template-columns : 1fr;
}
.homeAbout01 .splide__slide img{
	grid-row : 1;
	grid-column : 1;
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
.homeAbout01 .splide__slide h4{
	grid-row : 1;
	grid-column : 1;
	align-self : center;
	justify-self : center;
	font-size : 1.8rem;
	font-weight : 700;
	line-height : 1.5;
	color : white;
	text-align : center;
	border-color : var( --wp--custom--primary );
	border-bottom-width : calc( 2 var( --remBase ) );
}
.homeAbout01 .splide__slide p{
	grid-row : 2;
	grid-column : 1;
	font-size : 1.6rem;
	line-height : 1.7;
}
.homeAbout01 .splide__slide span{
	grid-row : 3;
	grid-column : 1;
	justify-self : end;
	width : fit-content;
	font-size : 1.6rem;
	line-height : 1.5;
	-webkit-text-decoration : underline;
	text-decoration : underline;
	text-underline-offset : calc( ( 1lh - 1em ) / 2 );
}
@media screen and ( width <= 750px ){
	.homeAbout01{
		padding-bottom : calc( 40 var( --remBase ) );
	}
	.homeAbout01::before{
		height : calc( 724 var( --remBase ) );
		clip-path : polygon( 0 calc( 80 * 100% / 724 ) , 100% 0 , 100% calc( 624 * 100% / 724 ) , 0 100% );
	}
	.homeAbout01 > h2{
		align-items : start;
		width : calc( 368 var( --viewportBase ) );
		margin-inline : auto;
	}
	.homeAbout01 > h2::after{
		margin-left : -1.5ch;
		text-indent : 1.5ch;
		content : "bout\AMOTOHASHI";
	}
	.homeAbout01 section{
		margin-top : calc( 30 var( --remBase ) );
	}
	.homeAbout01 section h3{
		font-size : 2.4rem;
	}
	.homeAbout01 section p{
		margin-top : calc( 16 var( --remBase ) );
		font-size : 1.4rem;
	}
	.homeAbout01 section figure{
		margin-top : calc( 16 var( --remBase ) );
	}
	.homeAbout01 #aboutLinks{
		padding-left : calc( 16 var( --viewportBase ) );
		margin-top : calc( 16 var( --remBase ) );
	}
	.homeAbout01 .splide__slide > a{
		display : grid;
		grid-template-rows : calc( 150 var( --remBase ) ) auto auto;
	}
	.homeAbout01 h4{
		width : calc( 150 * 100% / 242 );
		padding-bottom : calc( 8 var( --remBase ) );
	}
	.homeAbout01 .splide__slide p{
		margin-top : calc( 8 var( --remBase ) );
	}
	.homeAbout01 .splide__slide span{
		margin-top : calc( 8 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	.homeAbout01{
		padding-block : calc( 120 var( --remBase ) );
	}
	.homeAbout01::before{
		height : calc( 782 var( --remBase ) );
		clip-path : polygon( 0 calc( 240 * 100% / 782 ) , 100% 0 , 100% calc( 542 * 100% / 782 ) , 0 100% );
	}
	.homeAbout01 section{
		display : grid;
		grid-template-columns : calc( 800 var( --percentBase ) ) calc( 560 var( --percentBase ) );
		row-gap : calc( 24 var( --remBase ) );
		align-items : center;
		justify-content : space-between;
		margin-top : calc( 64 var( --remBase ) );
	}
	.homeAbout01 section figure{
		grid-row : 1/3;
		grid-column : 2;
	}
	.homeAbout01 section h3{
		grid-row : 1;
		grid-column : 1;
		align-self : end;
		font-size : 3rem;
	}
	.homeAbout01 section p{
		grid-row : 2;
		grid-column : 1;
		align-self : start;
		font-size : 1.6rem;
	}
	.homeAbout01 .splide__track{
		margin-top : calc( 32 var( --remBase ) );
	}
	.homeAbout01 .splide__list{
		display : grid ! important;
		grid-template-columns : repeat( 4 , calc( 320 var( --percentBase ) ) );
		justify-content : space-between;
	}
	.homeAbout01 .splide__slide , .homeAbout01 .splide__slide > a{
		display : grid;
		grid-template-rows : subgrid;
		grid-row : span 3;
		row-gap : calc( 8 var( --remBase ) );
	}
	.homeAbout01 .splide__slide > a{
		grid-template-rows : calc( 200 var( --remBase ) ) auto auto;
	}
	.homeAbout01 h4{
		width : calc( 180 * 100% / 320 );
		padding-bottom : calc( 8 var( --remBase ) );
	}
}

/* --------------------------------------------
SHOPS
--------------------------------------------- */
.homeShops01 h3{
	position : relative;
	display : grid;
	place-items : center;
	margin-inline : auto;
	font-weight : 700;
	color : white;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
	background-color : var( --wp--custom--primary );
}
.homeShops01 h3::before{
	position : absolute;
	top : 50%;
	left : 50%;
	z-index : -1;
	display : block;
	font-size : 0;
	content : "";
	background-color : #cd6900;
	translate : -50% -50%;
}
.homeShops01 img{
	width : 100%;
	height : auto;
}
@media screen and ( width <= 750px ){
	.homeShops01{
		padding-bottom : calc( 80 var( --remBase ) );
	}
	.homeShops01 h3{
		width : calc( 290 var( --percentBase ) );
		height : calc( 94 var( --remBase ) );
		font-size : 2.4rem;
		line-height : 1.3;
	}
	.homeShops01 h3::before{
		width : calc( 368 * 100% / 290 );
		height : calc( 80 var( --remBase ) );
		clip-path : polygon( 0 0 , 100% 0 , calc( 342 * 100% / 368 ) 50% , 100% 100% , 0 99% , calc( 26 * 100% / 368 ) 50% );
	}
	.homeShops01 .wp-block-list{
		margin-top : calc( 20 var( --remBase ) );
	}
	.homeShops01 .wp-block-list li + li{
		margin-top : calc( 20 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	.homeShops01{
		padding-bottom : calc( 120 var( --remBase ) );
	}
	.homeShops01 h3{
		width : calc( 922 var( --percentBase ) );
		height : calc( 80 var( --remBase ) );
		font-size : 3.4rem;
	}
	.homeShops01 h3::before{
		width : calc( 1384 * 100% / 922 );
		height : calc( 56 var( --remBase ) );
		clip-path : polygon( 0 0 , 100% 0 , calc( 1366 * 100% / 1384 ) 50% , 100% 100% , 0 99% , calc( 18 * 100% / 1384 ) 50% );
	}
	.homeShops01 .wp-block-list{
		display : grid;
		grid-template-columns : repeat( 4 , calc( 320 var( --percentBase ) ) );
		align-items : start;
		justify-content : space-between;
		margin-top : calc( 32 var( --remBase ) );
	}
}

/* --------------------------------------------
ARTICLES
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#articles{
		padding-bottom : calc( 68 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#articles{
		display : grid;
		grid-template-columns : repeat( 2 , calc( 680 var( --percentBase ) ) );
		justify-content : space-between;
		padding-bottom : calc( 120 var( --remBase ) );
	}
	#articles h2{
		margin-bottom : calc( 28 var( --remBase ) );
	}
	#articles .more{
		display : block;
		width : calc( 140 * 100% / 680 );
		padding-bottom : calc( 3 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
		margin-left : auto;
		font-size : 2rem;
		font-weight : 500;
		line-height : 1.3;
		text-align : center;
		text-indent : .1em;
		letter-spacing : .1em;
		border-bottom : solid calc( 4 var( --remBase ) ) var( --wp--custom--primary );
	}
}
#information li a div{
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
	justify-content : start;
}
#information li a p{
	display : grid;
	place-items : center;
	width : fit-content;
	color : white;
}
#information li a h3{
	font-weight : 400;
}
#information li{
	border-bottom : solid 1px #d9d9d9;
}
@media screen and ( width <= 750px ){
	#information li a{
		display : block;
		padding-block : calc( 18 var( --remBase ) );
	}
	#information li a div{
		column-gap : calc( 8 var( --percentBase ) );
	}
	#information li a time{
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#information li a p{
		height : calc( 26 var( --remBase ) );
		padding-inline : calc( 8 var( --remBase ) );
		font-size : 1.4rem;
		line-height : 1.3;
	}
	#information li a h3{
		margin-top : calc( 8 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#information .more{
		display : block;
		width : calc( 160 var( --percentBase ) );
		padding-block : calc( 3 var( --remBase ) );
		margin-inline : auto;
		font-size : 2rem;
		font-weight : 500;
		line-height : 1.3;
		text-align : center;
		text-indent : .1em;
		letter-spacing : .1em;
		border-bottom : solid 1px #bdbdbd;
	}
}
@media screen and ( width > 750px ) , print{
	#information li a{
		display : grid;
		grid-template-rows : auto auto;
		grid-template-columns : calc( 200 * 100% / 680 ) 1fr;
		row-gap : calc( 16 var( --remBase ) );
		column-gap : calc( 20 * 100% / 680 );
		padding-block : calc( 16 var( --remBase ) );
	}
	#information li a picture{
		grid-row : 1/-1;
		grid-column : 1;
		width : 100%;
	}
	#information li a picture img{
		width : 100%;
		height : 100%;
		object-fit : cover;
		object-position : center;
	}
	#information li a div{
		grid-row : 1;
		grid-column : 2;
		column-gap : calc( 16 * 100% / 460 );
		align-self : end;
	}
	#information li a time{
		font-size : 1.6rem;
		line-height : 1.3;
	}
	#information li a p{
		height : calc( 29 var( --remBase ) );
		padding-inline : calc( 8 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.3;
	}
	#information li a h3{
		grid-row : 2;
		grid-column : 2;
		align-self : start;
		font-size : 1.6rem;
		line-height : 1.7;
	}
}
#blog .splide__slide a picture{
	width : 100%;
}
#blog .splide__slide a picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#blog .splide__slide a div{
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
	justify-content : start;
}
#blog .splide__slide a time{
	grid-row : 1;
}
#blog .splide__slide a p{
	display : grid;
	grid-row : 1;
	place-items : center;
	width : fit-content;
	color : white;
}
#blog .splide__slide a h3{
	font-weight : 400;
}
@media screen and ( width <= 750px ){
	#blog{
		padding-left : calc( 16 var( --viewportBase ) );
		margin-top : calc( 114 var( --remBase ) );
	}
	#blog > h2{
		width : calc( 368 * 100% / 384 );
	}
	#blog .splide__track{
		margin-top : calc( 20 var( --remBase ) );
	}
	#blog .splide__slide a{
		display : block;
	}
	#blog .splide__slide picture{
		height : calc( 228 var( --remBase ) );
	}
	#blog .splide__slide h3{
		margin-top : calc( 8 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#blog .splide__slide a div{
		column-gap : calc( 8 var( --percentBase ) );
		margin-top : calc( 8 var( --remBase ) );
	}
	#blog .splide__slide p{
		height : calc( 24 var( --remBase ) );
		padding-inline : calc( 8 var( --remBase ) );
		font-size : 1.2rem;
		line-height : 1.3;
	}
	#blog .splide__slide time{
		font-size : 1.2rem;
		line-height : 1.5;
	}
	#blog .splide__slide ul{
		display : flex;
		flex-wrap : wrap;
		row-gap : calc( 4 var( --remBase ) );
		column-gap : calc( 4 * 100% / 304 );
		padding-top : calc( 8 var( --remBase ) );
		margin-top : calc( 8 var( --remBase ) );
		border-top : solid 1px #cfd2d9;
	}
	#blog .splide__slide li{
		display : grid;
		place-items : center;
		height : calc( 21 var( --remBase ) );
		padding-inline : calc( 8 var( --remBase ) );
		font-size : 1rem;
		line-height : 1.3;
		background-color : #f1f2ed;
		border-radius : calc( 6 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	#blog .splide__slide{
		border-bottom : solid 1px #d9d9d9;
	}
	#blog .splide__slide > a{
		display : grid;
		grid-template-rows : auto auto;
		grid-template-columns : calc( 200 * 100% / 680 ) 1fr;
		column-gap : calc( 20 * 100% / 680 );
		padding-block : calc( 16 var( --remBase ) );
	}
	#blog .splide__slide > a picture{
		grid-row : 1/-1;
		grid-column : 1;
	}
	#blog .splide__slide > a div{
		grid-row : 1;
		column-gap : calc( 16 * 100% / 460 );
		align-self : end;
	}
	#blog .splide__slide > a time{
		grid-column : 1;
		font-size : 1.6rem;
		line-height : 1.3;
	}
	#blog .splide__slide > a p{
		grid-column : 2;
		height : calc( 29 var( --remBase ) );
		padding-inline : calc( 8 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.3;
	}
	#blog .splide__slide > a h3{
		grid-row : 2;
		grid-column : 2;
		align-self : start;
		font-size : 1.6rem;
		line-height : 1.7;
	}
}

/* --------------------------------------------
GROUP
--------------------------------------------- */
@media screen and ( width > 750px ) , print{
	.homeGroup01{
		padding-bottom : calc( 68 var( --remBase ) );
	}
	.homeGroup01 .wp-block-list{
		display : grid;
		grid-template-columns : repeat( 2 , calc( 680 var( --percentBase ) ) );
		justify-content : space-between;
		margin-top : calc( 40 var( --remBase ) );
	}
	.homeGroup01 a{
		display : block;
	}
	.homeGroup01 img{
		width : 100%;
		height : auto;
	}
}