@charset "UTF-8";
@import url("../common/common.css");
@import url("../common/base.css");

@import url('https://fonts.googleapis.com/css2?family=Reem+Kufi&display=swap');


/*----- 会社案内 設定 ----------------------------------------------------*/


/*----- ページヘッダー 設定 ----------------------------------------------------*/

div#pageTit{ position:relative; width:100%; padding:12% 0 0; border-bottom:3px solid #125aaf; background:url("../../img/about/p_tit_bg.jpg") no-repeat; background-size:cover; float:left; }

div.pageTit_svg{ position: absolute; top: 5vw; left: 15vw; width: 9vw; overflow: hidden; text-indent: -9999em; }
div.pageTit_svg h2{ width:100%; padding-top:4vw; background: url('../../img/about/p_tit.svg') no-repeat; background-size:auto; background-size:contain; float:left; }

/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){

	div#pageTit{ padding:14% 0 0; }
	
	div.pageTit_svg{ width:20vw; }
	
}

/*----- 共通 sectionWrap 設定 ----------------------------------------------------*/

section.sectionWrap{ width:100%; padding:15px 0 30px; background-size:cover; float:left; }

/* セクション毎のバックグラウンド設定 */
.sectionWrap1{ background-color:#fff; }
.sectionWrap2{ background:url('../../img/about/sectionwrap2.jpg') no-repeat; }
.sectionWrap3{ background-color:#d5e6fb; }
.sectionWrap4{ background:url('../../img/about/sectionwrap4.jpg') no-repeat; }
.sectionWrap5{ background:#ececec; }

div.sectionBox{ width:1200px; margin:0 auto; }
div.sectionBox h3{ position:relative; width:100%; font-size:1.2em; letter-spacing:0.2em; font-weight:bold; float:left; }
div.sectionBox h3::before{ position:absolute; bottom:0; content:""; width:2em; border-top:1px solid #0e396d; }

/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){

	
	div.sectionBox{ width:96%; }
	
}



/*----- 代表挨拶 設定 ----------------------------------------------------*/


div.greetingBox{ width:100%; padding:20px 0 0; float:left; }

div.greeting_textArea{ width:46%; padding:0 0 0 4%; float:left; }
div.greeting_textArea h4{ width:100%; font-weight:bold; font-size:1.1em; float:left; }
div.greeting_text{ width:98%; padding:15px 0 0 2%; float:left; }
div.greeting_text h5{ width:100%; padding:20px 0 0; font-size:1em; font-weight:normal; text-align:right; float:left; }

div.greeting_imgArea{ width:38%; padding:35px 0 0; float:right; }

/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){

	div.greeting_textArea{ width:100%; padding:0; }
	
	div.greeting_imgArea{ width:78%; padding:35px 11% 0; float:left; }
	
}

/*-----　会社概要 設定 ----------------------------------------------------*/


div.overviewBox_Area{ display:flex; flex-wrap:wrap; width:100%; padding:20px 0 0; float:left; }

div.overviewBox{ width:30%; margin:0 1.5% 15px; float:left; }
 
div.overviewBox table{ width:100%; float:left; }
div.overviewBox table tr{ width:100%; border-bottom:1px solid #125aaf; float:left; }
div.overviewBox table tr th{ width:20%; padding:7px 10% 7px 0; text-align:right; font-weight:normal; float:left; }
div.overviewBox table tr td{ width:70%; padding:7px 0; line-height:1.7em; float:left; }

div.overviewBox img{ overflow:hidden; border-radius:15px; }

div.overviewBox h4{ width:90%; padding:7px 5%; font-size:1.2em; font-weight:bold; float:left; }

div.overviewBox dl{ width:90%; padding:15px 5%; float:left; }
div.overviewBox dl dt{ width:80%; padding:0 0 30px; float:left; }
div.overviewBox dl dd{ width:20%; padding:0 0 30px; text-align:right; float:left; }

/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){

	div.overviewBox{ width:100%; margin:0 0 15px; float:left; }
	div.overviewBox_img{ text-align:center; width:48%; margin:0 1% 15px; float:left; }
	
	
}


/*-----　Google Map 設定 ----------------------------------------------------*/


div.gmapBox{ width:100%; float:left; }

/* Google Mapを囲う要素 */
.map {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 75%; /* 比率を4:3に固定 */
}

/* Google Mapのiframe */
.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


div.gmap_btn{ width:100%; padding:15px 0; float:left; }
div.gmap_btn a{ position:relative; display:block; width:100%; padding:30px 0; font-size:1.1em; font-weight:bold; color:#0e396d; text-decoration:none; transition: 0.2s; float:left; }
div.gmap_btn a{ opacity:0.8; }
div.gmap_btn a span{ position: absolute; top: 25px; left: 6rem; display: inline-block; text-decoration: none; background: #fff; color: #125aaf; border: 1px solid #125aaf; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; text-align: center; overflow: hidden; }



/*-----　経営方針 設定 ----------------------------------------------------*/

div.policyBox{ width:62%; padding:200px 16%; font-size:2.6em; letter-spacing:0.2em;  color:#fff; font-weight:bold; line-height:2em; float:left; }

/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){

	div.policyBox{ width:100%; padding:100px 0; font-size:1.1em;　text-align:center; }
	
}



/*-----　沿革・歴史 設定 ----------------------------------------------------*/

div.historyBox{ width:96%; margin:20px 2%; background-color:#e5f1ff; float:left; }
div.historyBox h4{ width:100%; padding:30px 0 ; font-size:1.2em; font-weight:bold; text-align:center; float:left; }
div.historyBox dl{ width:50%; padding:0 25% 90px; float:left; }
div.historyBox dl dt{ width:30%; padding:10px 10% 10px 0; text-align:right; border-bottom:1px solid #125aaf; float:left; }
div.historyBox dl dd{ width:60%; padding:10px 0; border-bottom:1px solid #125aaf; float:left; }

/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
	

	div.historyBox dl{ width:96%; padding:0 2% 90px; float:left; }
	
	div.historyBox dl dt{ width:90%; padding:10px 5% 3px; border-bottom:none; text-align:left; float:left; }
	div.historyBox dl dd{ width:80%; padding:0 10% 10px; border-bottom:1px solid #125aaf; float:left; }

	
}



/*-----　事業案内 設定 ----------------------------------------------------*/

div.business_introductionBox{ width:88%; padding:20px 4% 0 8%; float:left;  }
div.business_introductionBox ul{ display:flex; flex-wrap:wrap; width:100%; float:left; }
div.business_introductionBox ul li{ width:22%; margin:0 1.5% 20px; }

.business_imgArea{ position:relative; width:100%; margin:0 0 15px; border-radius:10px; overflow:hidden; float:left; }
.business_imgArea:hover.business_imgArea h4{ opacity:1; }
	
.business_imgArea h4{ position:absolute; bottom:1.5vw; width:100%; text-align:center; font-size:1.1em; color:#fff; font-weight:bold; letter-spacing:0.2em; transition: opacity 0.3s ease; opacity:0; float:left; }





/*◆ レスポンシブ設定 -----------------*/
@media screen and (max-width:1200px){
	
	div.business_introductionBox ul li{ width:90%; margin:0 5% 20px; }
	
	.business_imgArea h4{ opacity:1!important; }
	
}