@charset "utf-8";


#about { }

#about h3 { font-size: 20px; margin-bottom: 60px; text-align: left;}
#about h3 span { display: block; font-size: 80px; margin-bottom: 18px;}

.a_inner { width: 750px; margin: 0 auto;}

/* about */

#about .about { padding: 100px 0; text-align: center;}
#about .about h2 { font-size: 24px; margin-bottom: 58px;}
#about .about h2 span { display: block; font-size: 120px; margin-bottom: 26px;}
#about .about img { margin-bottom: 46px;}
#about .about h3 { position: relative; width: 700px; font-size: 46px; line-height: 1.391; padding: 16px 0; margin: 0 auto 50px; text-align: center;}
#about .about h3:before,
#about .about h3:after { position: absolute; content: ""; width: 40px; height: 100%;}
#about .about h3:before { border: solid 1px #000; border-right: 0px; top: 0; left: 0;}
#about .about h3:after { border: solid 1px #000; border-left: 0px; top: 0; right: 0;}
#about .about p { font-size: 16px; line-height: 2;}


/* message */

#about #message { padding: 90px 0; background: url(../images/about/bg_01.jpg) no-repeat left center / cover; margin-left: 50px;}
#about #message .message { padding-left: 133px;}
#about #message h3 { margin-bottom: 46px;}
#about #message .flex { display: flex; }
#about #message .flex_l { width: 421px;}
#about #message h4 { font-size: 50px; line-height: 1.4; margin-bottom: 47px; font-feature-settings: "palt";}
#about #message p { font-size: 16px; line-height: 2; margin-bottom: 50px;}
#about #message h5 { font-size: 40px;}
#about #message h5 small { display: block; font-size: 13px; margin-bottom: 12px; letter-spacing: 0.04em;}
#about #message h5 span { display: block; font-size: 16px; margin-bottom: 10px; letter-spacing: 0.2em;}
#about #message .flex_r { width: 414px; background: url(../images/about/pic_03.png) no-repeat right 25px / 385px; margin-top: 14px; margin-left: 65px;} 
#about #message .flex_r img { width: 385px; height: auto; box-shadow: 12.856px 15.321px 30px 0px rgba(0, 0, 0, 0.1);}
 

/* outline */

#about #outline { padding: 100px 0;}
#about #outline table { width: 100%;}
#about #outline tr { text-align: left;}
#about #outline th { display: block; line-height: 1.438; padding-bottom: 30px; width: 173px;}
#about #outline td { font-family: 'NotoSansJP-Regular'; line-height: 1.438; padding-bottom: 30px;}
#about #outline td a { display: inline-block; margin: 22px 0 30px; border-bottom: 1px solid #000; padding-bottom: 5px;}
#about #outline td a img { margin-left: 8px;}
#about #outline iframe { width: 100%; height: 280px;}


/* members */

#about #members { padding: 100px 0; background: url(../images/common/bg_pattern_2.jpg) left top;}
#about #members h3 { margin-bottom: 30px;}
#about #members .circle { width: 100%; background-color: #fff; padding: 40px; border-radius: 20px;}
#about #members .circle h4 { font-size: 14px; margin-bottom: 30px;}
#about #members .circle h4 span { font-size: 24px; font-family: 'NotoSansJP-Medium'; color: #003597; margin-right: 15px;}
#about #members .circle h4:after { display: block; content: ""; width: 100%; height: 1px; background-color: #c9c9c9; margin-top: 20px;}
#about #members .menber { display: flex;}
#about #members .menber ul { width: 50%;}
#about #members .menber li { font-size: 12px; line-height: 2; margin-bottom: 7px;}
#about #members .menber li:last-child { margin-bottom: 0;}
#about #members .menber li span { display: inline-block; width: 7em; font-size: 16px;}



/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 768px) {
	
	#about h3 { font-size: 13px; margin-bottom: 30px;}
	#about h3 span { display: block; font-size: 50px; margin-bottom: 15px;}
	
	.a_inner { width: 86.67%; margin: 0 auto;}
	/* about */
	
	#about .about { padding: 90px 0 50px;}
	#about .about h2 { font-size: 14px; margin-bottom: 21px;}
	#about .about h2 span { font-size: 65px; margin-bottom: 15px;}
	#about .about img { margin-bottom: 25px;}
	#about .about h3 { position: relative; width: 80%; font-size: 23px; padding: 13px 0; margin: 0 auto 25px;}
	#about .about h3:before,
	#about .about h3:after { width: 20px;}
	#about .about p { font-size: 13px; line-height: 2.154;}
	
	
	/* message */

	#about #message { padding: 50px 0; background: url(../images/about/bg_01.jpg) no-repeat left center / cover; margin-left: 0;}
	#about #message .message { width: 95%; padding-left: 0; margin: 0 auto;}
	#about #message .flex { display: block; width: 100%; margin: 0 auto;}
	#about #message .flex_l { width: 100%; margin-bottom: 37px;}
	#about #message h4 { font-size: 30px; line-height: 1.5; margin-bottom: 30px;}
	#about #message p { font-size: 13px; line-height: 2.038; margin-bottom: 35px;}
	#about #message h5 { font-size: 25px;}
	#about #message h5 small { font-size: 11.5px; margin-bottom: 15px}
	#about #message h5 span { font-size: 13px; margin-bottom: 15px}
	#about #message .flex_r { width: 80%; background: url(../images/about/pic_03_sp.png) no-repeat 70% bottom / 90%; margin: 0 auto; padding-bottom: 19px;} 
	#about #message .flex_r img { width: 90%; height: auto; box-shadow: 12.856px 15.321px 30px 0px rgba(0, 0, 0, 0.1);}
	 
	
	/* outline */

	#about #outline { padding: 50px 0;}
	#about #outline table { width: 100%; margin: 0 auto 15px;}
	#about #outline tr { display: block; border-bottom: 1px solid #c9c9c9; margin-bottom: 10px;}
	#about #outline th { display: block; line-height: 1.438; font-size: 13px; padding-bottom: 10px; width: 100%;}
	#about #outline td { display: block; font-size: 12px; font-family: 'NotoSansJP-Regular'; line-height: 1.769; padding-bottom: 10px;}
	#about #outline tr:last-child { border-bottom: 0px;}
	#about #outline td a { display: inline-block; margin: 22px 0 0;}
	#about #outline td a img { margin-left: 8px;}
	#about #outline iframe { width: 100%; height: 181px;;}
	
	
	/* members */
	
	#about #members { padding: 50px 0;}
	#about #members .circle { padding: 25px; border-radius: 20px;}
	#about #members .circle h4 { font-size: 12px; margin-bottom: 21px;}
	#about #members .circle h4 span { font-size: 15px; margin-right: 11px;}
	#about #members .circle h4:after { margin-top: 9px;}
	#about #members .menber { display: block;}
	#about #members .menber ul { width: 100%;}
	#about #members .menber li { font-size: 10px; line-height: 2;}
	#about #members .menber li span { width: 8em; font-size: 13px;}
	
}