@charset "UTF-8";

/* --------------------------------------------
OVERFLOW
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	.overflow-sp{
		overflow : hidden;
	}
}
@media print , screen and ( min-width : 751px ){
	.overflow-pc{
		overflow : hidden;
	}
}

/* --------------------------------------------
BACKGROUND COLOR
--------------------------------------------- */
.bgc01{
	background-color : #f3f4ec;
}
.bgc02{
	background-color : #edfde3;
}

/* --------------------------------------------
TITLE
--------------------------------------------- */
.title01{
	font-family : "Noto Serif JP" , serif;
	font-weight : 300;
}
.title01::after{
	display : block;
	font-size : 0;
	content : "";
	background-color : var( --green );
}
@media screen and ( max-width : 750px ){
	.title01{
		font-size : 4.2rem;
		line-height : 1.2;
	}
	.title01::after{
		width : calc( 220 * 100% / 710 );
		height : calc( 6 * 100vw / 750 );
		margin-top : calc( ( 20 - var( --sp-title01-lh ) ) * 100vw / 750 );
	}
}
@media print , screen and ( min-width : 751px ){
	.title01{
		font-size : 3.6rem;
		line-height : 1.22;
	}
	.title01::after{
		width : 250px;
		height : 3px;
		margin-top : calc( 38px - var( --pc-title01-lh ) );
	}
}
.title02{
	font-family : "Noto Serif JP" , serif;
	font-weight : 300;
}
.title02::after{
	display : block;
	font-size : 0;
	content : "";
	background-color : var( --green );
}
@media screen and ( max-width : 750px ){
	.title02{
		font-size : 4.2rem;
		line-height : 1.2;
	}
	.title02::after{
		width : calc( 220 * 100% / 710 );
		height : calc( 6 * 100vw / 750 );
		margin-top : calc( ( 20 - var( --sp-title02-lh ) ) * 100vw / 750 );
	}
}
@media print , screen and ( min-width : 751px ){
	.title02{
		font-size : 4.4rem;
	}
	.title02::after{
		width : 250px;
		height : 3px;
		margin-top : 19px;
	}
}
.title03{
	font-family : "Noto Serif JP" , serif;
	font-weight : 300;
	text-align : center;
}
.title03::after{
	display : block;
	margin-left : auto;
	margin-right : auto;
	font-size : 0;
	content : "";
	background-color : var( --green );
}
@media screen and ( max-width : 750px ){
	.title03{
		font-size : 4.2rem;
		line-height : 1.42;
	}
	.title03::after{
		width : calc( 220 * 100% / 710 );
		height : calc( 6 * 100vw / 750 );
		margin-top : calc( ( 23 - var( --sp-title03-lh ) ) * 100vw / 750 );
	}
}
@media print , screen and ( min-width : 751px ){
	.title03{
		font-size : 3.4rem;
		line-height : 1.05;
	}
	.title03::after{
		width : 250px;
		height : 3px;
		margin-top : calc( 24px - var( --pc-title03-lh ) );
	}
}
.title04{
	font-family : "Noto Serif JP" , serif;
	font-weight : 300;
}
.title04::after{
	display : block;
	font-size : 0;
	content : "";
	background-color : var( --green );
}
@media screen and ( max-width : 750px ){
	.title04{
		text-align : center;
	}
	.title04{
		font-size : 4.2rem;
		line-height : 1.42;
	}
	.title04::after{
		width : calc( 220 * 100% / 710 );
		height : calc( 6 * 100vw / 750 );
		margin-top : calc( ( 24 - var( --sp-title04-lh ) ) * 100vw / 750 );
		margin-left : auto;
		margin-right : auto;
	}
}
@media print , screen and ( min-width : 751px ){
	.title04{
		font-size : 3.4rem;
		line-height : 1.05;
	}
	.title04::after{
		width : 250px;
		height : 3px;
		margin-top : calc( 25px - var( --pc-title04-lh ) );
	}
}
.title05::after{
	display : block;
	font-size : 0;
	content : "";
	background-color : var( --green );
}
.title05.align-center{
	text-align : center;
}
.title05.align-center::after{
	margin-left : auto;
	margin-right : auto;
}
.title05.serif{
	font-family : "Noto Serif JP" , serif;
	font-weight : 300;
}
.title05 span{
	margin-left : 2em;
}
@media screen and ( max-width : 750px ){
	.title05{
		font-size : 4.2rem;
		line-height : 1.2;
	}
	.title05::after{
		width : calc( 220 * 100% / 710 );
		height : calc( 6 * 100vw / 750 );
		margin-top : calc( ( 24 - var( --sp-title05-lh ) ) * 100vw / 750 );
	}
	.title05.sp-align-center{
		text-align : center;
	}
	.title05.sp-align-center::after{
		margin-left : auto;
		margin-right : auto;
	}
	.title05.sp-weight-500{
		font-weight : 500;
	}
	.title05 span{
		font-size : 1.6rem;
	}
}
@media print , screen and ( min-width : 751px ){
	.title05{
		font-size : 3.4rem;
		line-height : 1.2;
	}
	.title05::after{
		width : 150px;
		height : 3px;
		margin-top : calc( 15px - var( --pc-title05-lh ) );
	}
	.title05.pc-align-center{
		text-align : center;
	}
	.title05.pc-align-center::after{
		margin-left : auto;
		margin-right : auto;
	}
	.title05 span{
		font-size : 1.6rem;
	}
}
.title06{
	font-weight : 500;
}
.title06.weight-400{
	font-weight : 400;
}
.title06::after{
	display : block;
	font-size : 0;
	content : "";
	background-color : var( --green );
}
.title06.white{
	color : #fff;
}
.title06.white::after{
	background-color : #fff;
}
@media screen and ( max-width : 750px ){
	.title06{
		font-size : 3.2rem;
		line-height : 1.2;
	}
	.title06.sp-weight-400{
		font-weight : 400;
	}
	.title06::after{
		width : calc( 80 * 100% / 710 );
		height : calc( 6 * 100vw / 750 );
		margin-top : calc( ( 16 - var( --sp-title06-lh ) ) * 100vw / 750 );
	}
}
@media print , screen and ( min-width : 751px ){
	.title06{
		font-size : 2.2rem;
		line-height : 1.27;
	}
	.title06::after{
		width : 80px;
		height : 3px;
		margin-top : calc( 16px - var( --pc-title06-lh ) );
	}
}
.title07{
	font-family : "Noto Serif JP" , serif;
}
@media screen and ( max-width : 750px ){
	.title07{
		font-size : 3.8rem;
		text-align : center;
	}
	.title07::after{
		display : block;
		width : calc( 200 * 100% / 710 );
		height : calc( 6 * 100vw / 750 );
		margin-top : calc( 22 * 100vw / 750 );
		margin-left : auto;
		margin-right : auto;
		font-size : 0;
		content : "";
		background-color : var( --green );
	}
}
@media print , screen and ( min-width : 751px ){
	.title07{
		font-size : 3.4rem;
		line-height : 1.2;
	}
	.title07{
		position : relative;
		display : flex;
		align-items : baseline;
		padding-bottom : calc( 21px - var( --pc-title07-lh ) );
	}
	.title07::after{
		font-size : 2.4rem;
	}
	.title07::after{
		flex-shrink : 0;
		margin-left : .25em;
		content : "-"attr( data-after ) "-";
	}
	.title07::before{
		position : absolute;
		bottom : 0;
		left : 0;
		display : block;
		width : 150px;
		height : 3px;
		font-size : 0;
		content : "";
		background-color : var( --green );
	}
}
.title08{
	font-family : "Noto Serif JP" , serif;
	text-align : center;
}
.title08::after{
	display : block;
	margin-left : auto;
	margin-right : auto;
	font-size : 0;
	content : "";
	background-color : var( --green );
}
.title08.white{
	color : #fff;
}
.title08.white::after{
	background-color : #fff;
}
@media screen and ( max-width : 750px ){
	.title08{
		font-size : 4.2rem;
		line-height : 1.42;
	}
	.title08{
		font-weight : 300;
	}
	.title08::after{
		width : calc( 220 * 100% / 710 );
		height : calc( 6 * 100vw / 750 );
		margin-top : calc( ( 42 - var( --sp-title08-lh ) ) * 100vw / 750 );
	}
}
@media print , screen and ( min-width : 751px ){
	.title08{
		font-size : 3.4rem;
		line-height : 1.2;
	}
	.title08::after{
		width : 150px;
		height : 3px;
		margin-top : calc( 18px - var( --pc-title08-lh ) );
	}
}

/* --------------------------------------------
PAEAGRAPH
--------------------------------------------- */
.text01.white{
	color : #fff;
}
.text01.align-center{
	text-align : center;
}
@media screen and ( max-width : 750px ){
	.text01{
		font-size : 2.6rem;
		line-height : 2;
	}
}
@media print , screen and ( min-width : 751px ){
	.text01{
		font-size : 1.6rem;
		line-height : 2;
	}
	.text01.pc-align-center{
		text-align : center;
	}
}
@media screen and ( max-width : 750px ){
	.text02{
		font-size : 2.6rem;
		line-height : 2;
	}
}
@media print , screen and ( min-width : 751px ){
	.text02{
		font-size : 1.6rem;
		line-height : 1.5;
	}
}
@media screen and ( max-width : 750px ){
	.text03{
		font-size : 2.4rem;
		line-height : 1.5;
	}
}
@media print , screen and ( min-width : 751px ){
	.text03{
		font-size : 1.6rem;
		line-height : 1.5;
	}
}

/* --------------------------------------------
LINK
--------------------------------------------- */
.link01{
	position : relative;
	display : flex;
	align-items : center;
	justify-content : space-between;
	margin-left : auto;
	border-bottom-color : #ccc;
	border-bottom-style : solid;
}
a:hover .link01{
	font-weight : 600;
}
.link01::before{
	position : absolute;
	display : block;
	font-size : 0;
	content : "";
	background-color : var( --yellow );
	transition : all .3s;
}
.link01::after{
	flex-shrink : 0;
	content : ">";
}
@media screen and ( max-width : 750px ){
	.link01{
		width : calc( 240 * 100% / 710 );
		padding-bottom : calc( 10 * 100vw / 750 );
		padding-left : calc( 9 * 100% / 710 );
		padding-right : calc( 16 * 100% / 710 );
		font-size : 2.6rem;
		border-width : calc( 2 * 100vw / 750 );
	}
	.link01::before{
		bottom : calc( -3.5 * 100vw / 750 );
		right : 0;
		width : calc( 80 * 100% / 240 );
		height : calc( 6 * 100vw / 750 );
	}
}
@media print , screen and ( min-width : 751px ){
	.link01{
		width : 180px;
		padding-bottom : 10px;
		padding-left : 10px;
		padding-right : 10px;
		font-size : 1.6rem;
		border-width : 1px;
	}
	.link01::before{
		bottom : -1.5px;
		right : 10px;
		width : 60px;
		height : 3px;
	}
	a:hover .link01::before{
		right : 2px;
		width : 90px;
	}
}

/* --------------------------------------------
SCROLL HINT
--------------------------------------------- */
@media screen and ( max-width : 750px ){
	.scrollHintBox{
		position : relative;
	}
}
@media screen and ( max-width : 750px ){
	.hint{
		position : absolute;
		inset : 0;
		display : block;
		width : fit-content;
		height : fit-content;
		margin : auto;
	}
	.hint.hidden{
		opacity : 0;
	}
	.hint img{
		height : calc( 240 var( --remBase ) );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.hint{
		transition : opacity .3s ease-in;
	}
}