@charset "UTF-8";

/* --------------------------------------------
HEAD GROUP
--------------------------------------------- */
.hgroup01 :where( h2 , h3 , h4 , h5 , h6 ){
	padding-bottom : calc( 16 var( --remBase ) );
	margin-bottom : calc( 16 var( --remBase ) );
	font-family : "Cormorant Garamond" , serif;
	font-weight : 400;
	line-height : 1.3;
	letter-spacing : .1em;
	border-bottom-style : solid;
	border-bottom-width : 1px;
	border-image-source : linear-gradient( 90deg , var( --green ) calc( 250 var( --remBase ) ) , transparent calc( 250 var( --remBase ) ) , transparent 100% );
	border-image-slice : 1;
}
.hgroup01 p{
	font-weight : 500;
	line-height : 1.3;
}
@media screen and ( width <= 750px ){
	.hgroup01 :where( h2 , h3 , h4 , h5 , h6 ){
		font-size : 4.8rem;
	}
}
@media screen and ( width > 750px ) , print{
	.hgroup01 :where( h2 , h3 , h4 , h5 , h6 ){
		font-size : 5.2rem;
	}
	.hgroup01 p{
		margin-top : calc( 24 var( --remBase ) );
		font-size : 2.4rem;
	}
}

/* --------------------------------------------
TITLES
--------------------------------------------- */
.titles01 h2{
	font-weight : 500;
	line-height : 1.3;
}
.titles01 h2::after{
	display : block;
	height : calc( 3 var( --remBase ) );
	font-size : 0;
	content : "";
	background-color : var( --green );
}
@media screen and ( width <= 750px ){
	.titles01 h2{
		font-size : 3.2rem;
	}
	.titles01 h2::after{
		width : calc( 240 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
	}
	.titles01 p{
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	.titles01 h2{
		font-size : 4rem;
	}
	.titles01 h2 span{
		display : block;
	}
	.titles01 h2 span:nth-of-type( 2 ){
		padding-left : 2em;
	}
	.titles01 h2::after{
		width : calc( 280 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	.titles01 p{
		margin-top : calc( 24 var( --remBase ) );
	}
}
.titles02 h3{
	font-weight : 500;
	color : var( --green );
}
@media screen and ( width <= 750px ){
	.titles02 h3{
		font-size : 3.2rem;
	}
	.titles02 p{
		margin-top : calc( 8 var( --remBase ) );
		font-size : 1.4rem;
		line-height : 1.7;
	}
}
@media screen and ( width > 750px ) , print{
	.titles02{
		display : grid;
		grid-template-columns : auto auto;
		column-gap : calc( 24 var( --percentBase ) );
		align-items : baseline;
		justify-content : start;
	}
	.titles02 h3{
		font-size : 4rem;
	}
	.titles02 p{
		font-size : 1.6rem;
		line-height : 2;
	}
}

/* --------------------------------------------
TITLE
--------------------------------------------- */
.title01{
	font-weight : 500;
	line-height : 1.3;
}
.title01::before{
	display : block;
	padding-bottom : calc( 16 var( --remBase ) );
	margin-bottom : calc( 16 var( --remBase ) );
	font-family : "Cormorant Garamond" , serif;
	font-weight : 400;
	line-height : 1.3;
	letter-spacing : .1em;
	border-bottom-style : solid;
	border-bottom-width : 1px;
	border-image-source : linear-gradient( 90deg , var( --green ) calc( 250 var( --remBase ) ) , transparent calc( 250 var( --remBase ) ) , transparent 100% );
	border-image-slice : 1;
}
@media screen and ( width <= 750px ){
	.title01{
		font-size : 3.2rem;
	}
	.title01::before{
		font-size : 4.8rem;
	}
}
@media screen and ( width > 750px ) , print{
	.title01{
		font-size : 4rem;
	}
	.title01::before{
		font-size : 5.2rem;
	}
}
.title02{
	font-weight : 500;
	line-height : 1.3;
}
.title02::before{
	display : block;
	padding-bottom : calc( 16 var( --remBase ) );
	margin-bottom : calc( 16 var( --remBase ) );
	font-family : "Cormorant Garamond" , serif;
	font-size : 5.2rem;
	font-weight : 400;
	line-height : 1.3;
	letter-spacing : .1em;
	border-bottom-style : solid;
	border-bottom-width : 1px;
	border-image-source : linear-gradient( 90deg , var( --green ) calc( 250 var( --remBase ) ) , transparent calc( 250 var( --remBase ) ) , transparent 100% );
	border-image-slice : 1;
}
@media screen and ( width <= 750px ){
	.title02{
		font-size : 2.6rem;
	}
}
@media screen and ( width > 750px ) , print{
	.title02{
		font-size : 3.4rem;
		letter-spacing : .1em;
	}
}
.title03{
	padding-bottom : calc( 16 var( --remBase ) );
	font-family : "Cormorant Garamond" , serif;
	font-weight : 400;
	line-height : 1.3;
	letter-spacing : .1em;
	border-bottom-style : solid;
	border-bottom-width : 1px;
	border-image-source : linear-gradient( 90deg , var( --green ) calc( 250 var( --remBase ) ) , transparent calc( 250 var( --remBase ) ) , transparent 100% );
	border-image-slice : 1;
}
@media screen and ( width <= 750px ){
	.title03{
		font-size : 4.8rem;
	}
}
@media screen and ( width > 750px ) , print{
	.title03{
		font-size : 5.2rem;
	}
}
.title04{
	font-weight : 500;
	line-height : 1.3;
	text-align : center;
}
.title04::after{
	display : block;
	height : calc( 3 var( --remBase ) );
	margin-inline : auto;
	font-size : 0;
	content : "";
	background-color : var( --green );
}
@media screen and ( width <= 750px ){
	.title04{
		font-size : 3.2rem;
	}
	.title04::after{
		width : calc( 240 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	.title04{
		font-size : 4rem;
	}
	.title04::after{
		width : calc( 314 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
}
.title05{
	font-weight : 500;
	line-height : 1.3;
}
.title05::after{
	display : block;
	height : calc( 3 var( --remBase ) );
	font-size : 0;
	content : "";
	background-color : var( --green );
}
@media screen and ( width <= 750px ){
	.title05{
		font-size : 3.2rem;
	}
	.title05::after{
		width : calc( 240 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
	}
}
@media screen and ( width > 750px ) , print{
	.title05{
		font-size : 4rem;
	}
	.title05::after{
		width : calc( 280 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
}
.title06{
	font-weight : 500;
	line-height : 1.3;
	color : var( --green );
}
@media screen and ( width <= 750px ){
	.title06{
		font-size : 3.2rem;
	}
}
@media screen and ( width > 750px ) , print{
	.title06{
		font-size : 4rem;
	}
}
.title07{
	display : grid;
	grid-auto-flow : row;
	font-weight : 500;
	line-height : 1.3;
}
.title07::before{
	display : block;
	grid-row : 2;
	height : calc( 3 var( --remBase ) );
	font-size : 0;
	content : "";
	background-color : var( --green );
}
.title07::after{
	grid-row : 3;
	font-family : "Cormorant Garamond";
	font-weight : 500;
}
@media screen and ( width <= 750px ){
	.title07{
		row-gap : calc( 16 var( --remBase ) );
		font-size : 3.2rem;
	}
	.title07::before{
		width : calc( 240 var( --remBase ) );
	}
	.title07::after{
		font-size : 4rem;
		font-size : 3rem;
		line-height : 2;
	}
}
@media screen and ( width > 750px ) , print{
	.title07{
		row-gap : calc( 24 var( --remBase ) );
		font-size : 4rem;
	}
	.title07::before{
		width : calc( 268 var( --remBase ) );
	}
	.title07::after{
		font-size : 4rem;
		line-height : 1.3;
	}
}

/* --------------------------------------------
PARAGRAPH
--------------------------------------------- */
.lh-l{
	line-height : 2;
}
@media screen and ( width <= 750px ){
	.lh-l{
		font-size : 1.4rem;
	}
}
@media screen and ( width > 750px ) , print{
	.lh-l{
		font-size : 2rem;
	}
}
.text{
	line-height : 1.7;
}
@media screen and ( width <= 750px ){
	.text{
		font-size : 1.4rem;
	}
}
@media screen and ( width > 750px ) , print{
	.text{
		font-size : 2rem;
	}
}

/* --------------------------------------------
LINK
--------------------------------------------- */
.link01{
	display : grid;
	grid-template-columns : auto auto;
	column-gap : calc( 4 var( --remBase ) );
	align-items : baseline;
	justify-content : start;
	width : fit-content;
	font-size : 2rem;
	line-height : 1;
}
.link01::before{
	display : block;
	width : 100%;
	aspect-ratio : 52/11.5;
	font-size : 0;
	content : "";
	background-image : url( "../images/ui/arrow/right01.svg" );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
.link01::before{
	height : calc( 11.5 var( --remBase ) );
}
.link02{
	display : grid;
	grid-template-columns : auto auto;
	column-gap : calc( 4 var( --remBase ) );
	align-items : baseline;
	justify-content : start;
	width : fit-content;
	font-size : 1.8rem;
	line-height : 1;
}
.link02::before{
	display : block;
	width : 100%;
	aspect-ratio : 52/11.5;
	font-size : 0;
	content : "";
	background-image : url( "../images/ui/arrow/right01.svg" );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
.link02::before{
	height : calc( 11.5 var( --remBase ) );
}
.link03{
	display : grid;
	grid-template-columns : auto auto;
	column-gap : calc( 4 var( --remBase ) );
	align-items : baseline;
	justify-content : start;
	width : fit-content;
	font-size : 1.8rem;
	line-height : 1;
}
.link03::before{
	display : block;
	width : 100%;
	aspect-ratio : 52/11.5;
	font-size : 0;
	content : "";
	background-image : url( "../images/ui/arrow/right01.svg" );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
.link03::before{
	height : calc( 11.5 var( --remBase ) );
}
.link04{
	display : grid;
	place-items : center;
	margin-inline : auto;
	line-height : 1.5;
	color : white;
	background-color : var( --green );
}
@media screen and ( width <= 750px ){
	.link04{
		width : calc( 368 var( --remBase ) );
		height : calc( 60 var( --remBase ) );
		font-size : 1.4rem;
	}
}
@media screen and ( width > 750px ) , print{
	.link04{
		width : calc( 392 var( --remBase ) );
		height : calc( 70 var( --remBase ) );
		font-size : 2rem;
	}
}
.more01{
	display : grid;
	grid-template-columns : auto auto;
	column-gap : calc( 4 var( --remBase ) );
	align-items : baseline;
	justify-content : start;
	width : fit-content;
	font-family : Alata;
	line-height : 1;
}
.more01::before{
	display : block;
	width : 100%;
	aspect-ratio : 52/11.5;
	font-size : 0;
	content : "";
	background-image : url( "../images/ui/arrow/right01.svg" );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
.more01::before{
	height : calc( 11.5 var( --remBase ) );
}
@media screen and ( width <= 750px ){
	.more01{
		font-size : 1.6rem;
	}
}
@media screen and ( width > 750px ) , print{
	.more01{
		font-size : 2rem;
	}
}
.more02{
	display : grid;
	grid-template-columns : auto auto;
	column-gap : calc( 4 var( --remBase ) );
	align-items : baseline;
	justify-content : start;
	width : fit-content;
	line-height : 1;
}
.more02::before{
	display : block;
	width : 100%;
	font-size : 0;
	content : "";
	background-image : url( "../images/ui/arrow/right01.svg" );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
}
@media screen and ( width <= 750px ){
	.more02{
		font-family : Alata;
		font-size : 1.6rem;
	}
	.more02::before{
		height : calc( 11.5 var( --remBase ) );
		aspect-ratio : 52/11.5;
	}
}
@media screen and ( width > 750px ) , print{
	.more02{
		font-size : 2rem;
	}
	.more02::before{
		height : calc( 12 var( --remBase ) );
		aspect-ratio : 52/12;
	}
}