@charset "utf-8";
/* CSS Document */
.l-container {
width: 80%;
margin: auto;
}
@media screen and (max-width: 1200px) {
	.l-container {
	width: 92%;
	}
}
@media screen and (max-width: 920px) {
	.l-container {
	width: 100%;
	}
}
.l-inner {
max-width: 920px;
margin: auto;
}
.l-box {
padding: 4%;
background: rgba(255,255,255,0.7);
}

.page_title {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 5em;
padding-top: 60px;
font-family: "Kiwi Maru", sans-serif;
font-size: 2.5em;
font-weight: 500;
line-height: 1.2;
text-align: center;
color: #FFF;
background: var(--green);
}
.page_title_head small {
font-size: 0.55em;
}
.page_title_en {
position: absolute;
right: 4%;
bottom: 20px;
width: 46%;
}
#news .page_title_en {
right: 4%;
top: 32%;
width: 40%;
}
@media screen and (max-width: 800px) {
	.page_title {
	padding-top: 50px;
	font-size: 2em;
	}
}


.mt10  { margin-top: 10px }
.mt20  { margin-top: 20px }
.mt30  { margin-top: 30px }
.mt40  { margin-top: 40px }
.mt60  { margin-top: 60px }
.mt80  { margin-top: 80px }
.mt100 { margin-top: 100px }
@media screen and (max-width: 800px) {
	.mt10  { margin-top: 1.5% }
	.mt20  { margin-top: 3% }
	.mt30  { margin-top: 4.5% }
	.mt40  { margin-top: 6% }
	.mt60  { margin-top: 9% }
	.mt80  { margin-top: 12% }
	.mt100 { margin-top: 15% }
}

.sp {
display: none;
}
@media screen and (max-width: 800px) {
	.pc {
	display: none;
	}
	.sp {
	display: block;
	}
}


.text-01 {
line-height: 2;
text-align: justify;
}
.text-02 {
font-family: "Kiwi Maru", sans-serif;
line-height: 2;
text-align: justify;
}
@media screen and (max-width: 800px) {
	.text-01 {
	line-height: 1.75;
	}
	.text-02 {
	line-height: 1.75;
	}
}

#home .head-01 {
font-family: "Kiwi Maru", sans-serif;
font-size: 1.75em;
font-weight: 500;
line-height: 1.25;
text-align: center;
}
#home .head-01 span {
position: relative;
padding: 0 1.5em;
}
#home .head-01 span::before,
#home .head-01 span::after {
content: "";
position: absolute;
top: 50%;
width: 1em;
height: 2px;
background: #000;
}
#home .head-01 span::before {
left: 0;
}
#home .head-01 span::after {
right: 0;
}
@media screen and (max-width: 800px) {
	#home .head-01 {
	font-size: 1.5em;
	}
}

#home .head-02 {
padding: 0.75em;
font-family: "Kiwi Maru", sans-serif;
font-size: 1.5em;
font-weight: 500;
line-height: 1.25;
text-align: center;
background: #5FB4BC;
border-radius: 10px;
cursor: pointer;
}
#home .head-02::after {
content: "＋";
position: absolute;
top: calc(50% - 0.65em);
right: 1em;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
}
#home .head-02.open {
border-radius: 10px 10px 0 0;
}
#home .head-02.open::after {
content: "－";
}
@media screen and (max-width: 800px) {
	#home .head-02 {
	font-size: 1.5em;
	}
}

#home .head-3 {
font-size: 1.75em;
font-weight: 400;
line-height: 2;
text-align: center;
}
@media screen and (max-width: 800px) {
	#home .head-3 {
	font-size: 1.5em;
	}
}

#home .head-4 {
padding: 0.75em;
font-family: "Kiwi Maru", sans-serif;
font-size: 1.75em;
font-weight: 400;
line-height: 1.5;
text-align: center;
color: #009C74;
}
@media screen and (max-width: 800px) {
	#home .head-4 {
	font-size: 1.5em;
	}
}

#home .head-5 {
font-family: "Noto Sans JP", sans-serif;
font-size: 3em;
font-weight: 700;
line-height: 1.5;
text-align: center;
color: #FFF;
}
#home .head-5 small {
display: block;
font-size: 0.5em;
line-height: 1.25;
}
@media screen and (max-width: 800px) {
	#home .head-5 {
	font-size: 2em;
	}
}

#home .head-6 {
padding-left: 0.5em;
font-family: "Noto Sans JP", sans-serif;
font-size: 1.5em;
font-weight: 700;
line-height: 1.5;
color: #FFF;
border-left: 5px solid #FFF;
}
@media screen and (max-width: 800px) {
	#home .head-6 {
	font-size: 1.25em;
	}
}

.act-marker {
display: inline;
background: linear-gradient(transparent 60%, #FF0 60%);
background-repeat: no-repeat;
background-size: 0 100%;
transition: 0.5s ease-in;
}
.act-marker.active {
background-size: 100% 100%;
}

.red {
color: #F00;
}
.center {
text-align: center;
}
.right {
text-align: right;
}

/*-----------------------------------------------
  accordion
-----------------------------------------------*/
.act-accordion {
position: relative;
cursor: pointer;
}
.act-accordion::before {
content: "";
position: absolute;
top: calc(50% - 1px);
right: 1em;
width: 16px;
height: 2px;
background: #FFF;
border-radius: 1px;
}
.act-accordion::after {
content: "";
position: absolute;
top: calc(50% - 8px);
right: calc(1em + 7px);
width: 2px;
height: 16px;
background: #FFF;
border-radius: 1px;
transition: 0.2s ease-in;
}
.act-accordion.open::after {
transform: rotate(90deg);
}

/*-----------------------------------------------
  button
-----------------------------------------------*/
.btn-1 a,
.btn-2 a,
.btn-3 a {
position: relative;
display: block;
max-width: 640px;
margin: auto;
padding: 1em 2em;
font-size: 1.2em;
font-weight: 500;
text-align: center;
text-decoration: none !important;
color: #FFF;
background: var(--green);
border-radius: 1.75em;
}
.btn-1 a::after,
.btn-2 a::after,
.btn-3 a::after {
content: "▶";
position: absolute;
top: calc(50% - 0.75em);
right: 1.5em;
font-size: 0.75em;
}
.btn-2 a {
color: #000;
background: #CCEBE3;
}
.btn-3 a {
color: #000;
background: #FFFF8B;
}
@media screen and (max-width: 800px) {
	.btn-1 a,
	.btn-2 a,
	.btn-3 a {
	font-size: 1em;
	}
}


/*-----------------------------------------------
  modaal
-----------------------------------------------*/
.modaal-container {
width: 100%;
max-width: 1000px;
height: 100%;
}
.modaal-content-container {
}