/******************************************
common / parts
******************************************/

h1.LGreen{
	font-size:1.3em;
}
h2.LGreen{
	font-size:2.3rem;
}
h2.LGreen span.fontsizeM{
	font-size: 1.5rem !important;
}
h2 span{
	display: block;
	margin:0 auto 0.8em auto;
}
h2 span.icon{
	max-width:320px;
	margin-bottom:0.8em;	
}
h2 span.icon img{
	max-width:320px;
	object-fit: contain;
}
h3.LGreen{
	color:#0099AB;
}
p.LGreen{
	margin:0;
	font-size:1.2em;
	font-weight: bold;
	text-align: center;
	line-height: 1.5;
	color:#1AA8B7;
}
.LGreen mark,
.darkGreen mark {
	background: linear-gradient(transparent 50%, #fff799 50%);
	font-weight: bold;
	color:#1AA8B7;
	border-radius: 6px;

	background-image:-webkit-linear-gradient(left,transparent 50%,#fff799 50%);
	background-repeat:repeat-x;
	background-position:0 1em;
	background-size:200% .8em;
	transition:background-position 1s ease;
	font-weight:bold;
  }
 .LGreen mark.marker-animation,
 .darkGreen mark.marker-animation{
	background-position:-100% .8em;
  }

.darkGreen{
	color:#3B6780 !important;
}
.darkGreen mark{
	color:#3B6780;
}
.width90{
	width:90% !important;
}
.paddingLeft_s {
	padding-left: 1.3em !important;
}
.marginBottom_ms{
	margin-bottom: 2.5em !important;
}
.marginBottom_ss {
	margin-bottom: 0.2em !important;
}
.fontsizeMS{
	font-size: 1.2rem;
}
.fontsizeL{
	font-size: 1.5rem !important;
}
.fontbold{
	font-weight: bold;
}
.fontWeightNormal{
	font-weight: normal !important;
}

@media screen and (min-width: 1025px) {
	h1.LGreen{
		font-size:2.5rem;
	}
}

/******************************************
main visual
******************************************/
#main{
	padding-bottom:0;
}
.copy .text{
	color:#008FA2;
}
.textCp1{
	margin-top:1.7em;
	margin-bottom:0.4em;
	width:100%;
	font-size:1.35rem;
	font-weight: normal;
	line-height: 1.6;
}
.textCp3{
	width:100%;
	font-size:4.5rem;
	font-weight: bold;
	line-height: 1.4;
}
.textCp2{
	width:100%;
	font-size:2.9rem;
	font-weight: bold;
	line-height: 1.2;
}
.textCp2 span{
	font-size:1.8rem;
	vertical-align: 0.1em;
}

@media screen and (max-width: 768px) {
	.textCp1{
		font-size: 1.2rem;
	}
	.textCp2{
		font-size:2.5em;
	}
	.textCp2 span{
		font-size:0.6em;
	}
}
@media screen and (max-width: 1025px) {
	.textCp1{
		margin-top:0;
	}
	.textCp3{
		font-size:4em;
	}
}
/******************************************
description
******************************************/
#description{
	margin-top:0;
	padding:4em 0 7em 0;
	text-align: center;
	background-color: #3A5B5F;
	color:#ffffff;
}
#description .wrapper{
	width:100%;
}
#description h2.LGreen{
	color:#ffffff;
	letter-spacing: 0.07em;
}
#description h2 span.icon{
	max-width:240px;
	margin-bottom:0.2em;	
}
#description h2 span.icon img{
	max-width:240px;
}
.speechBubbles{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding:0;
	margin:0;
	list-style: none;
}
.speechBubbles li{
	position: relative;
	display: inline-block;
	display: flex;
	align-items: center;
	margin: 1em 1%;
	padding: 1em;
	width:23%;
	max-width: 100%;
	color: #3A5B5F;
	font-size: 16px;
	font-weight: 400;
	border: solid 2px #ffffff;
	border-radius: 10px;
	background-color: #D6D6D6;
	box-sizing: border-box;
}

.speechBubbles li::before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  margin-left: -15px;
  border: 10px solid transparent;
  border-top: 10px solid #D6D6D6;
  z-index: 2;
}

.speechBubbles li::after {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 50%;
  margin-left: -17px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 1;
}
.speechBubbles li p{
	width: 100%;
	line-height: 1.45;
}
.speechBubbles li strong {
	font-size:1.15em;
	font-weight: 600;
}

@media screen and (max-width: 768px) {
	#description .wrapper > p{
		width:92vw;
		margin-left:auto;
		margin-right:auto;
		text-align: left;
	}
	#description{
		padding:4em 0 2em 0;
	}
	.speechBubbles{
		display: block;
	}
	.speechBubbles li{
		width:94%;
		margin:1em auto 2em auto;
	}
	.speechBubbles li br{
		display: none;
	}
	.mbbr{
		display: block;
	}
}

@media screen and (min-width: 1025px) {
	#description .wrapper{
		width:1024px;
	}

	.mbbr{
		display: none;
	}
}

/******************************************
contents
******************************************/
#contents{
	text-align: center;
}
#contents .bg-gray{
	background-color: #EFF5F5;
	padding-bottom:4em;
}
#contents .bg-white{
	background-color: #ffffff;
}
.waysList{
	display: flex;
	justify-content: center;
	list-style: none;
	padding:3em 0 0 0;
	margin: 0;
}
.waysList li{
	padding:0.2em 1em;
	margin:0 0.2em 1em 0.2em;
	color:#FFFFFF;
	background-color: #008FA2;
	border-radius: 20px;
}
.waysList.icon{
	padding-top:2em;
	margin-bottom: 1.5em;
}
.waysList.icon li{
	background-color: transparent;
}

#contents ul.img{
	display: flex;
	justify-content: center;
	padding:5rem 0 0 0;
	margin:0;
	list-style: none;
}
#contents ul.img li{
	margin:0 0.3rem 2rem 0.3rem;
}
#contents ul.img p{
	text-align: center;
}

.roundframe{
	position: relative;
	margin:0 auto 3em auto;
	padding:1.2em 0;
	width:90%;
	background-color: #FFFFFF;
	border:1px solid #B4B4B4;
	border-radius: 15px;
	box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);
}

.roundframe h3{
	margin-bottom:1em;
}
.roundframe h3 img{
	max-width:90%;
	max-height: 78px;
	
}

.roundframe .text{
	text-align: left;
	margin-bottom: 2rem;
}

.roundframe .point{
	margin-bottom: 2rem;
	text-align: left;
	font-weight: bold;
	color: #3B6780;
}

.flowtitle{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.flowtitle .flowtext{
	padding:0.3em 0.5em;
	margin: 0 1em;
	width: max-content;
	font-size:1.3rem;
	font-weight: 500;
	line-height: 1;
	color:#376260;
	border:1px solid #1A8070;
}

.paddingBottom_m{
	padding-bottom:5rem !important;
}

.paddingBottom_l{
	padding-bottom:10rem !important;
}

.paddingBottom_xl{
	padding-bottom:15rem !important;
}

.textAlignCenter{
	text-align: center !important;
}
@media screen and (max-width: 768px) {
	#contents section .wrapper.paddingBottom_m{
		padding-bottom:4rem !important;
	}
	#contents h2{
		margin-top:0rem;
	}
	#contents h2 span.icon{
		width:70vw;
	}
	#contents h2 span.icon img{
		width:100%;
	}
	.waysList.icon{
		flex-wrap: wrap;
	}
	.roundframe {
		width:100%;
	}
	.roundframe .text,
	.roundframe .point{
		width:100% !important;
	}

	.flowtitle{
		display: block;
		width:100%;
		margin-bottom: 2em;
		text-align: left;
	}
	.flowtitle .flowimg img{
		width: 70%;
		margin-bottom:1em;
	}

	.flowtitle .flowtext{
		margin:0 auto;
		width: 96%;
		text-align: center;
		font-size: 1rem;
	}

	.paddingBottom_xl{
		padding-bottom:7rem !important;
	}
	.marginBottom_l{
		margin-bottom:1em !important; 
	}
}

@media screen and (min-width: 768px) {
	.lbr{
		display: block;
	}
}

/* support List */

.supportList{
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	padding:1em 0;
	margin:0 auto;
	width:80%;
	list-style: none;
}
.supportList li{
	padding:0 1em;
	margin:0 0 2em 0;
	width:33%;
	color:#312C28;
	text-align: center;
	line-height: 1.4;
	border-right:2px solid #408287;
}
.supportList li:nth-child(3n),
.supportList li:last-child{
	border-right:none;
}
.supportList li.border{
	border-right:2px solid #408287;
}
.supportList li img{
	margin-bottom:0.5em;
	max-width:80%;
	height: 110px;
	object-fit:scale-down;
}
.supportList li p{
	width:95%;
	margin:0 auto;
}

@media screen and (max-width: 768px) {
	.supportList{
		display: block;
		width: 85%;
	}
	.supportList li{
		width: 100%;
		padding-bottom:1em;
		border-bottom:2px dotted #408287;
		border-right:none;
	}
	.supportList li.border{
		border-right:none;
	}
}

/* greenframe */
.greenframe {
	position: relative;
	width: 95%;
	max-width: 894px;
	border: 1px solid #1AA8B7;
	padding: 0.5em 2em;
	margin: 0 auto 1.5em auto;
	text-align: left;
}

.greenframe h3 {
	display: block;
	font-size: 1.15em;
	color: #1AA8B7;
	line-height: 1;
}

.greenframe ul li {
	width: 100%;
}


@media screen and (min-width: 1025px) {

}

/* btnGreen */
.formBtns .btn_green {
	display: inline-block;
	width: max-content;
	min-width: 280px;
	padding: 0.6em 2em;
	text-align: center;
	text-decoration: none;
	color: #FFF;
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: 0.1rem;
	background: #23ABAD;
	border-radius: 40px;
	transition: .3s;
}

.formBtns .btn_green:hover {
	cursor: pointer;
	text-decoration: none;
	background: #4BC0C3;
	border-bottom: none;
}