#tokuteigino,
#gino{
	padding: var(--main-padding-bottom); 
}

#gino .pageheader{
	margin-bottom: 0
}

#purpose{
	padding: clamp(40px, 5vw, 80px) 5%;
	position: relative;
	margin: 0 auto 8%;
	max-width: 1200px;
}


#gino #purpose{
	background: #ffdee9
}


#tokuteigino #purpose{
	background: #c4e9e9
}



#purpose h2{
	font-size: clamp(1.125rem, 0.807rem + 1.59vw, 2rem);
	position: relative;
    text-align: center;
    margin-bottom: 1em
}


.purpose_wrap{
	margin: 0 auto;
	position: relative;

}


.purpose_wrap dl{
	display: flex;
	align-items: center;
	margin-top: 2em;
	background: #fff;
	border-radius: 10px;
	border: solid .5em #fff;
	align-items: stretch;
}

.purpose_wrap ul li{
	background: #fff;
	border-radius: 10px;
	margin-top: 1em;
	padding: 1em;
	font-size: 1.3em;
	text-align: left;
}


.purpose_wrap dl dt{
	font-weight: 500;
	position: relative;
	display: flex;
	align-items: center;
	font-size: 1.3em;
	flex: 1;
	padding: 1em;
}



.purpose_wrap dl dd{
	font-size: 1.2em;
	line-height: 1.4em;
	font-weight: 500;
	flex: 3.5;
	padding: 1em;
}

@media screen and (max-width: 767px) {
	.purpose_wrap dl{
		flex-direction: column
	}
	.purpose_wrap dl dt{
		border-bottom: solid 1px #ccc
	}
	
	.purpose_wrap dl dd br,
	.purpose p br{display: none}
}	

@media print, screen and (min-width: 768px) {
	#purpose{
	border-radius: 2em;
	}
	.purpose_wrap dl dt{border-right: solid 1px #ccc}
	.purpose dl dd{padding: 0 0 0 1em;}
}	

@media print, screen and (min-width: 1024px) {}	




/* ------------------------------
 #mission
------------------------------ */
#mission{}

#mission h2{
	text-align: center;
	font-size: clamp(1.125rem, 0.807rem + 1.59vw, 2rem);
	margin-bottom: 1.5em
}


.wecan_wrap{
	display: flex;
	padding: var(--main-padding-bottom);
	gap:2em;
}


.wecan{
	text-align: center;
	flex: 1;
	box-shadow: 0px 0px 10px #ccc;
	background: #fff;
	padding: 1.5em;
	border-radius: 2em;
	position: relative;
	
}

.wecan h3{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem);
}

.wecan h3 span{
	display: block;
	color: var(--color-point2);
	font-size: 1.5em;
	padding: 10px;
}


.wecan h3::after {
	display: block;
    content: "";    
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 40px 0 40px; /* 上・右・下・左 の順（サイズはお好みで） */
    border-color: var(--color-point2) transparent transparent transparent; 
    margin: 20px auto;
    opacity: .6
}


.wecan h4{
	font-size: clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem);
	margin-bottom: 1.5em
}

.wecan ul,
.wecan p{
	text-align: left
}

.wecan ul li{
	border-top: dashed 1px #ccc;
	padding: .8em .4em;
}

.wecan ul li:not(:last-child){
	
}

.wecan ul li::before{
	font-family: icomoon;
	content: "\ea52";
	padding: 0 5px 0 0
}

figure.plan{
	text-align: center;
	padding: clamp(40px, 5vw, 80px) 0 0 ;
	
}


@media screen and (max-width: 767px) {
	.wecan_wrap{
		flex-direction: column
	}
}	

@media print, screen and (min-width: 768px) {}	

@media print, screen and (min-width: 1024px) {}	



/* ------------------------------
 INDEX
------------------------------ */

#support {
	background-color: var(--bg-color-sub);
	padding:  0 0 clamp(40px, 5vw, 80px);
}

#support h2{
	padding: 3em 0 1.5em;
	text-align: center;
}

#support h2 span{
	color: var(--color-point1);
}


ul.support li h3{
	margin-bottom: .5em;
	text-align: center
}

ul.support li p{
	margin: 0 auto;
	padding: 0 1em;
	max-width: 400px;
}


@media screen and (max-width: 767px) {
	ul.support{
		width: 90%;
		margin: 0 auto;
	}
}	

@media print, screen and (min-width: 768px) {}	

@media print, screen and (min-width: 1024px) {	
	ul.support {
	    display: grid;
	    grid-template-columns: 1.6fr 1fr; 
	    grid-template-rows: 1fr 1fr;
	    gap: 50px;
	    max-width: 1000px;
	    margin: 0 auto;
	}
	
	ul.support li:first-child {
	    grid-row: 1 / 3;
	    grid-column: 1 / 2;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	}
	
	ul.support li:nth-child(2),
	ul.support li:nth-child(3) {
	    grid-column: 2 / 3;
	}
}




ul.merritt{
	display: flex;
	gap:2em;
	max-width: 1000px;
	margin: 0 auto
}

ul.merritt li{
	flex: 1;
}


ul.merritt li h3{
	margin-bottom: .5em;
	text-align: center
}

ul.merritt li p{
	padding: 0 1em;
}

@media screen and (max-width: 767px) {
	ul.merritt{
		flex-direction: column;
		width: 90%;
	}
}	

@media print, screen and (min-width: 768px) {}	

@media print, screen and (min-width: 1024px) {}	



/* ------------------------------
 #sche
------------------------------ */


#sche{padding:0 0 clamp(40px, 5vw, 80px);}
#sche h2{
	padding: 3em 0 1.5em;
	text-align: center;
}

.sch_wrap{
	max-width: 800px;
	margin: 0 auto;
	background: #f9f9f9
}

.sch_wrap > div:nth-child(even){
	background: #eee
}

.sch_list{
	display: flex;
	align-items: center;
}

.sch_list figure{
	max-width: 70px;
	height: auto;
	padding: 10px;}

.month{
	font-size: 1.2em;
	padding: 10px;
}

.naiyo{padding: 10px;}


@media screen and (max-width: 767px) {
	.month{

}

}	

@media print, screen and (min-width: 768px) {
	.sch_list figure{max-width: 100px;}
	.month{font-size: 2em;padding: 1em 1.5em;}
}	

@media print, screen and (min-width: 1024px) {}	



/* ------------------------------
 #tokuteigino
------------------------------ */


.shikaku{
	margin-bottom: 10%
}


.shikaku h2{
	text-align: center;
	margin-bottom: .5em;
}

.shikaku > p{
	text-align: center;
	margin-bottom: 2em
}

.type dl{
	background: #eee;
	padding: 1.5em;
	border-radius: .5em;
	position: relative;
	margin: 2em 0;
}

.type dt{margin-bottom: .8em;
	padding: .8em 0;
	font-weight: 700;
	text-align: center;
	font-size: clamp(1.063rem, 0.994rem + 0.34vw, 1.25rem);
	border-top: dashed 2px #666;
	border-bottom: dashed 2px #666
}

.shikaku_tb{
	border: 1px solid #8b8b8b;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
 margin-bottom: 3em
 }

.shikaku_tb th,
.shikaku_tb td{padding: .6em .8em;
  border-bottom: 1px solid #8b8b8b;}

.shikaku_tb th{
	background:#eaeade;
	text-align:center;
	vertical-align: middle
	}

.shikaku_tb thead th{
	font-size: 1.125em
}

.shikaku_tb td{background-color:#ffffff;
text-align:left;}


.shikaku_tb thead th + th,
.shikaku_tb td {
  border-left: 1px solid #8b8b8b;
}
.shikaku_tb tbody tr:last-child th,
.shikaku_tb tbody tr:last-child td {
  border-bottom: none;
}

.shikaku_tb thead th {
	border-bottom: solid 2px #8b8b8b
}

.shikaku_tb tbody th{width: 24%;}
.shikaku_tb tbody td{width: 38%}


@media screen and (max-width: 767px) {
	.type dl{}
	
	.shikaku_tb th,
	.shikaku_tb td{
		font-size: 0.813em;
		line-height: 1.4em
	}
}	

@media print, screen and (min-width: 768px) {
	.type{
		display: flex;
		justify-content: space-between;
		flex-wrap:wrap;
	}
	
	.type dl{
		width: 48%;
		padding: 2em;
	}
	
	.shikaku_tb th,
	.shikaku_tb td{padding: .8em .8em;
	  border-bottom: 1px solid #8b8b8b;}
	  
	  .shikaku_tb tbody th{width: 20%;}
	  .shikaku_tb tbody td{width: 40%} 
}	

@media print, screen and (min-width: 1024px) {}	




/* ------------------------------
 #gino
------------------------------ */

.flowbox{
	display: flex;
	flex-wrap:wrap;
	justify-content: space-between
}


.flowbox h2{
	-ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  width: 30px;
  display: flex;
  align-items: center;
  font-size: clamp(1.125rem, 0.807rem + 1.59vw, 2rem);
}

.flowbox h2 span{padding: 1em 0 0;
	color: #fff
}

.flowbox div{
	width: calc(100% - 30px);
	padding: 0 0 0 20px
}

h2.im{
	background: -webkit-linear-gradient(#f6f077 0%, #ffffff 100%)
}

h2.ij{
	background: -webkit-linear-gradient(#CEE5EE 0%, #ffffff 100%)
}

h2.im::before{
	content: "";
	background: url(../img/icon_myanmar.svg) no-repeat center top;
	width: 100%;
	height: 15%;
	background-size: contain
}


h2.ij::before{
	content: "";
	background: url(../img/icon_japan.svg) no-repeat center top;
	width: 100%;
	height: 15%;
	background-size: contain
}


.morelink{
	max-width: 400px;
	margin: 5% auto 10%
}

.morelink a{
	display: block;
	position: relative;
	background: var(--color-point2);
	color: #fff;
	text-align: center;
	border-radius: 50px;
	padding: .8em 1em
}



.morelink a::before{
	font-family: icomoon;
	content: "\e977";
	position: absolute;
	right: 15px;
	-webkit-transition: all .3s;
	transition: all .3s;
}

.morelink a:hover{
	background: #000;
	color: #fff;
}

.morelink a:hover::before{
	right: 10px
}



@media screen and (max-width: 767px) {
	.flowbox h2 span{display: none}
}	

@media print, screen and (min-width: 768px) {
	.flowbox h2{width: 100px;}
	.flowbox div{width: calc(100% - 100px);}
}	

@media print, screen and (min-width: 1024px) {}