@charset "utf-8";
/* CSS Document */


/**about**/
.philosophy{position: relative; margin: 0 auto; padding-bottom:2rem; line-height: 1.1; font-size:1.8rem; font-weight:900; color: #0b4979;}

/**message**/
#message .leftBox,.ceo{ position: relative; border-radius: 14px;overflow-y:hidden;}

.photo{ position: relative; border-radius: 14px;overflow-y:hidden;}
.photo{ padding-bottom: 55%; width: 100%;  background: url("../img/photo3.jpg") top center no-repeat;  background-size: 100% auto;}

/**outline**/
.framebox{ border-radius: 30px; border: 4px solid #ffe75f; background: #fff; text-align: center;}
.framebox h3{ margin-top: -0.9rem;}
.framebox h3 span{ background:#fff; padding: 0 0.5rem;}

/**support**/
#email .box{ }
#email {  }
#email a{ color:#1b64b0; text-decoration: underline;}
#email a:hover{ color:#0fa1d9}

#email .rightBox p{ overflow: hidden; text-overflow: ellipsis; }
#email .rightBox p a{ white-space: nowrap;}

dt{ font-weight:bold;}
dd{ margin-bottom:1rem;}
dd a{ color:#1b64b0; text-decoration: underline;}
dd a:hover{ color:#0fa1d9}
.mapbox iframe{position: relative; border-radius: 14px; width: 100%; height: 100%; min-height: 400px; line-height: 0;}
.photo{  padding-bottom: 50%; width: 90%; margin:0 auto 0.8rem auto; }

@media (min-width: 800px) {
	#about{ display: flex;flex-direction: row-reverse;justify-content:center; align-items:center; }
	.box{display: flex; flex-direction: row; justify-content:center; align-items:center; }
	#message .box{ display: block; padding: 20px 20px 0 20px;}
	/*#message .box{flex-direction: row-reverse; }*/
	#about .leftBox { width: calc(50% - 20px); text-align: left; padding: 20px 0 20px 20px;}
	#about .rightBox {width:calc(50% - 20px);   padding: 10px 20px 10px 0px;}
	#about h3{ text-align:left;}
	.box .leftBox { position: relative;width:calc(50% - 50px); text-align: left; padding: 30px 20px 30px 30px;}
	.box .rightBox {position: relative;width: calc(50% - 30px); text-align: left; padding: 30px 30px 30px 0px; }
	
	.mapbox{ height: 100%; min-height: 400px; line-height: 0;}
	#outline .box{ background: url('../img/img03.jpg') 50px bottom no-repeat #f1efec;}
}/*@media*/

@media (min-width:0px) and (max-width: 799px) {
	.box{ padding:0px;  width:100%; }
	.rightBox, .leftBox{ width:100%;}
	#about .rightBox img{ display:none;}
	#about .leftBox { text-shadow:0 0 2px #fff;  margin: 0 auto;}
	#about .rightBox {position: absolute; left: -10%;  top: 0; width: 120%; height: 100%;  background: url('../img/img01.png') center 20px no-repeat; background-size: 80% auto;
		filter:alpha(Opacity=20 , Style=0);/*for ie*/ -moz-opacity:0.2;/* Moz + FF */ opacity:0.15; }
}/*@media*/


@media (min-width:0px) and (max-width: 499px) {
	#about .rightBox {position: absolute; left: -10%;  top: 0; width: 120%; height: 100%;  background: url('../img/img01.png') center center no-repeat; background-size:  auto 80%;filter:alpha(Opacity=20 , Style=0);/*for ie*/ -moz-opacity:0.2;/* Moz + FF */ opacity:0.15; }
}/*@media*/


#about-us .box { background:none;}
@media (min-width: 800px) {
#about-us .outline{ background: url('../img/img03.jpg') 50px bottom no-repeat #f1efec;}
}