@charset "UTF-8";




/*---------------------------------------------------------
 Lead
---------------------------------------------------------*/
.l-lead {
	text-align: center;
}
.l-lead__img {
	width: 36%;
	max-width: max-content;
	margin: 0 auto 1em;
}
.l-lead .c-path-draw {
	max-width: 367px;
	left: 0;
	right: 0;
	margin: auto;
	z-index: -1;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-lead__img {
	width: 40%;
}
}



/*---------------------------------------------------------
 Lost
---------------------------------------------------------*/
.lost {
	padding-top: 0;
	background: linear-gradient(to top, #f8f8f1, transparent) no-repeat left bottom;
	background-size: 100% 300px;
}
.lost .c-bg-color {
	height: calc(100% - 150px);
	background-color: #eeeadd;
	inset: auto 0 0 0;
}

/* Lost - l-box--bg
-----------------------------------------------*/
.lost .l-box--bg {
	border-radius: var(--radius-lg);
	box-shadow: 0 0 15px rgb(0 0 0 / 0.1);
}
.lost .l-box--bg .c-txt--bbl {
	position: absolute;
	width: 7.2em;
	background-color: var(--color-och);
	left: 32%;
	top: 0;
	translate: -50% -30%;
}
.lost .l-box--bg .c-txt--bbl::before {
	left: 15%;
}
.lost .l-box--bg .c-hdg--min {
	text-align: center;
}
/* PC,Tablet
------------------------------------------*/
@media only screen and (min-width: 768px) {

.lost .l-box--bg .l-flt {
	max-width: 1160px;
}
.lost .l-box--bg .l-flt__img {
	width: 50%;
}
.lost .l-box--bg .c-hdg--min {
	margin-bottom: 1.2em;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.lost .l-box--bg {
	padding-top: 15%;
}
}

/* Lost - cause
-----------------------------------------------*/
.cause {
	text-align: center;
}
.cause__ttl {
	max-width: max-content;
	padding-bottom: .5em;
	border-bottom: 1px solid currentColor;
	margin: 0 auto 1.8em;
}
.cause .c-hdg--min span {
	color: var(--accent-color);
}
.cause .c-hdg--min span span {
	display: inline-block;
	background-image: radial-gradient(circle at center,currentColor 20%, transparent 20%);
	background-position: top right;
	background-repeat: repeat-x;
	background-size: 1.2em 0.3em;
	padding-top: .3em;
}
.cause .c-bg-img {
	color: #eeeadd;
	-webkit-mask-image: linear-gradient(to bottom, transparent 5%, black 40%);
	mask-image: linear-gradient(to bottom, transparent 5%, black 40%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: auto;
    mask-size: auto;
}
/* PC,Tablet
------------------------------------------*/
@media only screen and (min-width: 768px) {

.cause .l-flt {
	max-width: 1100px;
}
.cause .l-flt__img {
	width: 50%;
	margin-top: -2%;
}
.cause .c-bg-img {
	width: 50vw;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.cause .l-flt__img {
	margin-left: 0;
}
.cause .c-bg-img {
	width: 90vw;
}
}



/*---------------------------------------------------------
 Importance
---------------------------------------------------------*/
.importance {
	text-align: center;
	color: #FFF;
}
.importance .c-hdg--min {
	margin-bottom: 1.4em;
}
.importance .c-bg-color {
	background-color: var(--color-sand);
}
.importance__img {
	display: flex;
	justify-content: space-between;
}
/* PC,Tablet
------------------------------------------*/
@media only screen and (min-width: 768px) {

.importance__img div {
	width: 30%;
}
.importance__img div:nth-of-type(1) {
	order: 2;
	width: 37%;
}
.importance__img div:nth-of-type(2) {
	order: 1;
}
.importance__img div:nth-of-type(3) {
	order: 3;
}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.importance__img {
	flex-wrap: wrap;
}
.importance__img div:nth-of-type(1) {
	width: 60%;
	margin: auto;
}
.importance__img div {
	width: 48%;
}
}



/*---------------------------------------------------------
 Summary
---------------------------------------------------------*/
.summary {
	text-align: center;
}
.summary .c-txt--bbl {
	position: absolute;
	background-color: #c4c48a;
	left: 50%;
	top: -1.5em;
	translate: -50% 0;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.summary {
	padding-top: 16%;
}
}



/*---------------------------------------------------------
 Promise
---------------------------------------------------------*/
.promise {
	padding-top: min(31vw,460px);
}
.promise .l-box--bg {
	border-radius: 10px;
	box-shadow: 0 0 15px rgb(0 0 0 / 0.1);
}
.promise__ttl .c-hdg--en {
	font-size: min(7vw,593%);
	margin-top: -1.2em;
	margin-bottom: .1em;
}
.promise .l-col-list {
	max-width: 1160px;
	margin-inline: auto;
}
.promise .l-col-list .l-col-list__txt {
	text-align: center;
}
.promise .l-col-list .l-col-list__txt .u-fw--bld {
	color: var(--accent-color);
}
.promise .l-col-list .l-col-list__txt .u-fw--bld span {
	display: block;
	color: var(--color-base);
	font: var(--font-min);
	font-size: 156%;
	letter-spacing: .1em;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.promise__ttl .c-hdg--en {
	font-size: 10vw;
	margin-top: -1.2em;
}

.promise .l-col-list .l-col-list__txt .u-fw--bld span {
	font-size: 125%;
	letter-spacing: .08em;
}
}



/*---------------------------------------------------------
 
---------------------------------------------------------*/

/* PC,Tablet
------------------------------------------*/
@media only screen and (min-width: 768px) {

}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

}



/*---------------------------------------------------------
 
---------------------------------------------------------*/

/* PC,Tablet
------------------------------------------*/
@media only screen and (min-width: 768px) {

}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

}



/*---------------------------------------------------------
 
---------------------------------------------------------*/

/* PC,Tablet
------------------------------------------*/
@media only screen and (min-width: 768px) {

}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

}



/*---------------------------------------------------------
 
---------------------------------------------------------*/

/* PC,Tablet
------------------------------------------*/
@media only screen and (min-width: 768px) {

}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

}