@charset "UTF-8";

/* --------------------------------------------
BLOCK EDITOR RESET CSS
--------------------------------------------- */
:root :where( p.has-background:not( .wrap ) ){
	padding : 0;
}
a:where( :not( .wp-element-button ) ){
	-webkit-text-decoration : none;
	text-decoration : none;
}

/* --------------------------------------------
BLOCK EDITOR DEFAULT
--------------------------------------------- */
#main .content p{
	font-size : 1.6rem;
}
.caption02 + .text-ml{
	margin-top : calc( 16 var( --remBase ) );
}
@media screen and ( width <= 750px ){
	.text-ml + .caption02{
		margin-top : calc( 30 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	.text-ml + .caption02{
		margin-top : calc( 40 var( --remBase ) );
	}
}

/* --------------------------------------------
LAYOUT
--------------------------------------------- */
@media screen and ( width <= 750px ){
	.is-layout-flex.flex-pc{
		display : block;
	}
}
@media screen and ( width > 750px ) , print{
	.column03{
		display : grid ! important;
		grid-template-columns : repeat( 3 , calc( 440 var( --percentBase ) ) );
		column-gap : calc( 40 var( --percentBase ) );
	}
}
.column04 > li > a:has( img:only-child ){
	display : block;
}
.column04 > li > a:has( img:only-child ) img{
	width : 100%;
	height : auto;
}
.column04 > li > img:only-child{
	width : 100%;
	height : auto;
}
@media screen and ( width > 750px ) , print{
	.column04{
		display : grid ! important;
		grid-template-columns : repeat( 4 , calc( 320 var( --percentBase ) ) );
		column-gap : calc( 40 var( --percentBase ) );
		align-items : center;
	}
}

/* --------------------------------------------
HGROUP
--------------------------------------------- */
.hgroup01{
	display : grid;
	grid-template-rows : calc( 62 var( --remBase ) );
	grid-template-columns : auto auto;
	justify-content : start;
	margin-inline : 0;
}
.hgroup01 p{
	display : grid;
	grid-template-columns : auto auto;
	grid-row : 1;
	grid-column : 1;
	align-items : center;
	justify-content : center;
	font-size : 2rem;
	font-weight : 500;
	color : white;
	background : linear-gradient( to bottom left , #e85400 0% , #e85400 50% , color-mix( in srgb , #e85400 , black 10% ) 50% , color-mix( in srgb , #e85400 , black 10% ) 100% );
}
.hgroup01 p span{
	display : block;
	width : 1em;
	font-size : 2.8rem;
	font-weight : 700;
	text-align : center;
}
.hgroup01 :where( h1 , h2 , h3 , h4 , h5 , h6 ){
	display : grid;
	grid-row : 1;
	grid-column : 2;
	align-items : center;
	justify-content : start;
	font-size : 2.8rem;
	font-weight : 700;
	color : white;
	background-color : var( --wp--custom--primary );
}
@media screen and ( width <= 750px ){
	.hgroup01{
		grid-template-columns : calc( 101 var( --percentBase ) ) 1fr;
	}
	.hgroup01 :where( h1 , h2 , h3 , h4 , h5 , h6 ){
		padding-left : calc( 16 * 100% / 267 );
		clip-path : polygon( 0 0 , 100% 0 , calc( 258 * 100% / 267 ) 50% , 100% 100% , 0 100% );
	}
}
@media screen and ( width > 750px ) , print{
	.hgroup01{
		grid-template-columns : calc( 101 var( --remBase ) ) calc( 219 var( --remBase ) ) 1fr;
	}
	.hgroup01 :where( h1 , h2 , h3 , h4 , h5 , h6 ){
		padding-left : calc( 16 * 100% / 219 );
		clip-path : polygon( 0 0 , 100% 0 , calc( 210 * 100% / 219 ) 50% , 100% 100% , 0 100% );
	}
}

/* --------------------------------------------
TITLE
--------------------------------------------- */
.caption01{
	font-weight : 700;
	text-align : center;
}
.caption01::first-letter{
	color : var( --wp--custom--primary );
}
.caption01::after{
	display : block;
	height : calc( 4 var( --remBase ) );
	margin-inline : auto;
	font-size : 0;
	content : "";
	background-color : var( --wp--custom--primary );
}
@media screen and ( width <= 750px ){
	.caption01{
		font-size : 2.8rem;
		line-height : 1.3;
	}
	.caption01::after{
		width : calc( 220 var( --percentBase ) );
		margin-top : calc( 8 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	.caption01{
		font-size : 5.4rem;
	}
	.caption01::after{
		width : calc( 100 var( --percentBase ) );
		margin-top : calc( 32 var( --remBase ) );
	}
}
.caption02{
	font-weight : 700;
}
.caption02::first-letter{
	color : var( --wp--custom--primary );
}
.caption02::after{
	display : block;
	width : 100%;
	height : calc( 4 var( --remBase ) );
	font-size : 0;
	content : "";
}
@media screen and ( width <= 750px ){
	.caption02{
		font-size : 2.4rem;
		line-height : 1.3;
	}
	.caption02::after{
		margin-top : calc( 16 var( --remBase ) );
		background-image : linear-gradient( to right , var( --wp--custom--primary ) calc( 30 var( --remBase ) ) , #f2f2f2 calc( 30 var( --remBase ) ) );
	}
}
@media screen and ( width > 750px ) , print{
	.caption02{
		font-size : 3.2rem;
		line-height : 1.5;
	}
	.caption02::after{
		margin-top : calc( 8 var( --remBase ) );
		background-image : linear-gradient( to right , var( --wp--custom--primary ) calc( 36 var( --remBase ) ) , #f2f2f2 calc( 36 var( --remBase ) ) );
	}
}
.caption03{
	font-weight : 700;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
}
.caption03::first-letter{
	color : var( --wp--custom--primary );
}
.caption03::after{
	display : block;
	height : calc( 4 var( --remBase ) );
	margin-inline : auto;
	font-size : 0;
	content : "";
	background-color : var( --wp--custom--primary );
}
@media screen and ( width <= 750px ){
	.caption03{
		font-size : 2.8rem;
		line-height : 1.3;
	}
	.caption03::after{
		width : calc( 220 var( --percentBase ) );
		margin-top : calc( 9 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	.caption03{
		font-size : 5.4rem;
		line-height : 1;
	}
	.caption03::after{
		width : calc( 100 var( --percentBase ) );
		margin-top : calc( 32 var( --remBase ) );
	}
}
.title02{
	font-size : 3rem;
	font-weight : 500;
	line-height : 1.3;
}
.title02 strong{
	color : var( --wp--custom--primary );
}

/* --------------------------------------------
TEXT
--------------------------------------------- */
@media screen and ( width <= 750px ){
	:where( .text-ss , .text-sm , .text-sl ){
		font-size : 1.2rem;
	}
}
@media screen and ( width > 750px ) , print{
	:where( .text-ss , .text-sm , .text-sl ){
		font-size : 1.6rem;
	}
}
@media screen and ( width <= 750px ){
	:where( .text , .text-ms , .text-mm , .text-ml ){
		font-size : 1.4rem;
	}
}
@media screen and ( width > 750px ) , print{
	:where( .text , .text-ms , .text-mm , .text-ml ){
		font-size : 1.6rem;
	}
}
@media screen and ( width <= 750px ){
	:where( .text-ls , .text-lm , .text-ll ){
		font-size : 1.6rem;
	}
}
@media screen and ( width > 750px ) , print{
	:where( .text-ls , .text-lm , .text-ll ){
		font-size : 2.2rem;
	}
}
@media screen and ( width <= 750px ){
	:where( .text-ss-sp , .text-sm-sp , .text-sl-sp ){
		font-size : 1.2rem;
	}
	:where( .text-sp , .text-ms-sp , .text-mm-sp , .text-ml-sp ){
		font-size : 1.4rem;
	}
	:where( .text-ls-sp , .text-lm-sp , .text-ll-sp ){
		font-size : 1.6rem;
	}
}
@media screen and ( width > 750px ) , print{
	:where( .text-ss-pc , .text-sm-pc , .text-sl-pc ){
		font-size : 1.6rem;
	}
	:where( .text-pc , .text-ms-pc , .text-mm-pc , .text-ml-pc ){
		font-size : 2rem;
	}
	:where( .text-ls-pc , .text-lm-pc , .text-ll-pc ){
		font-size : 2.2rem;
	}
}

/* line-height */
@media screen and ( width <= 750px ){
	:where( .text-ss , .text-ms , .text-ls ){
		line-height : 1.4;
	}
}
@media screen and ( width > 750px ) , print{
	:where( .text-ss , .text-ms , .text-ls ){
		line-height : 1.5;
	}
}
:where( .text , .text-sm , .text-mm , .text-lm ){
	line-height : 1.7;
}
:where( .text-sl , .text-ml , .text-ll ){
	line-height : 2;
}
@media screen and ( width <= 750px ){
	:where( .text-ss-sp , .text-ms-sp , .text-ls-sp ){
		line-height : 1.4;
	}
	:where( .text-sp , .text-sm-sp , .text-mm-sp , .text-lm-sp ){
		line-height : 1.7;
	}
	:where( .text-sl-sp , .text-ml-sp , .text-ll-sp ){
		line-height : 2;
	}
}
@media screen and ( width > 750px ) , print{
	:where( .text-ss-pc , .text-ms-pc , .text-ls-pc ){
		line-height : 1.5;
	}
	:where( .text-pc , .text-sm-pc , .text-mm-pc , .text-lm-pc ){
		line-height : 1.7;
	}
	:where( .text-sl-pc , .text-ml-pc , .text-ll-pc ){
		line-height : 2;
	}
}

/* --------------------------------------------
LINK
--------------------------------------------- */
.link01 a{
	display : grid;
	align-items : center;
	justify-content : center;
	width : fit-content;
	height : calc( 47 var( --remBase ) );
	padding-block : 0;
	padding-inline : calc( 12 var( --remBase ) );
	font-size : 1.8rem;
	line-height : 1.3;
	color : white;
	background-color : var( --wp--custom--primary );
	border-radius : 0;
}
.more01{
	display : block;
	width : fit-content;
	width : calc( 140 var( --percentBase ) );
	padding-block : calc( 3 var( --remBase ) );
	font-size : 2rem;
	font-weight : 500;
	line-height : 1.3;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
	border-bottom : solid 1px #bdbdbd;
}
.more01:not( .right ){
	margin-inline : auto;
}
.more01.right{
	margin-left : auto;
}

/* --------------------------------------------
PATTERN
--------------------------------------------- */
.before_after01 > .wp-block-group{
	position : relative;
}
.before_after01 > .wp-block-group:first-of-type h3::before{
	content : "Before";
}
.before_after01 > .wp-block-group:nth-of-type( 2 ) h3::before{
	content : "After";
}
.before_after01 h3{
	position : absolute;
	top : calc( 16 var( --remBase ) );
	z-index : 1;
	width : fit-content;
	font-size : 3.6rem;
	font-weight : 700;
	line-height : 1.5;
}
.before_after01 h3::before{
	-webkit-text-stroke : calc( 4 var( --remBase ) ) white;
	position : absolute;
	z-index : -1;
}
.before_after01 h3::first-letter{
	color : var( --wp--custom--primary );
}
.before_after01 figure{
	width : 100%;
}
.before_after01 figure img{
	object-fit : cover;
}
.before_after01 figure figcaption{
	margin-top : calc( 8 var( --remBase ) );
	font-size : 1.6rem;
	line-height : 1.5;
}
@media screen and ( width <= 750px ){
	.before_after01 > .wp-block-group{
		width : 100%;
	}
	.before_after01 h3{
		left : calc( 16 var( --percentBase ) );
	}
	.before_after01 figure img{
		height : calc( 325 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	.before_after01{
		justify-content : space-between;
	}
	.before_after01 > .wp-block-group{
		width : calc( 500 * 100% / 1040 );
	}
	.before_after01 h3{
		left : calc( 16 * 100% / 500 );
	}
	.before_after01 figure img{
		height : calc( 325 var( --remBase ) );
	}
}
@media screen and ( width <= 750px ){
	.caption02 + .before_after01{
		margin-top : calc( 30 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	.caption02 + .before_after01{
		margin-top : calc( 16 var( --remBase ) );
	}
}