@charset "utf-8";

/* ****************************************************
Title: index.css
---------------------------------------------------------------------------- */

#header {background:url(../img/top_bg.jpg) no-repeat top center;background-size:100%; height: 620px; position:relative; border-top: solid 4px #1586C6;}

.cont {margin-bottom:40px;padding-top:90px;}
.bar {width:300px;margin:0 auto 30px;}
.txt_c {text-align:center;}
.all_w img {width: 100%;}
.gray {color:#878787;}

/* =============================
 .section1
==============================*/
.sec1 .bar {}

/* =============================
 .section2
==============================*/
.sec2 h3 {font-size: 190%;color:#000;}
.sec2 h3 span {font-size:70%;padding-left:20px;}
.sec2 dl {margin-bottom:15px;}
.sec2 dl dt {width:100px; float:left;color:#878787;}
.sec2 dl dd {width: 650px;float:left;}
.sec2 .txt2 {width: 470px;}

/* =============================
 .section3
==============================*/

.sec3 .flex_wrap {display:-webkit-flex;display:flex;-webkit-justify-content: space-between; /* Safari */ justify-content:space-between;}
.sec3 .flex_wrap figure {width: 220px;}

.sec3 .flex_wrap a.btn_b {
    display: block;
    width: 100%;
    text-align: center;
    margin: 1em 0;
    padding: 0.5em 0;
    background: #1586C6;
    border-radius: 5px;
    color: #fff;
}
.sec3 .flex_wrap a.btn_b:hover {opacity: 0.7;}

/* =============================
 .section4
==============================*/
.company dl.b_des {padding: 20px 50px;border-top:solid 1px #DDD;}
.company dl.b_des:last-child {border-bottom: solid 1px #DDD;}
.company dl dt.th {font-weight: bold;float: left;width: 180px;font-size: 115%;}
.company dl dd.td {float:left; width:720px;}

/* =============================
 .section5
==============================*/







@media screen and (max-width: 767px) {
#header {background:url(../img/top_bg_sp.jpg) no-repeat bottom left; background-size:100%;height: 280px; position:relative; border-top: none;}
	
#header .catch img {width:100%; display:block;}
#header .catch {width: 100%;background: none;height: 84px;padding: 0px;position: absolute;bottom: 0;}
.cont {margin-top:20px;  margin-bottom:20px;padding-top:30px;}
.txt_c_sp {text-align:center;}

/* =============================
 .section2
==============================*/
.sec2 .ceo_img {margin-right:0;}
.sec2 .ceo_img img {width: 100%;}
.sec2 h3 {line-height:1;}
.sec2 h3 span {padding-left: 0px;}
.sec2 dl dt { font-weight:bold;}
.sec2 dl dd {width: 100%;}

.sec2 .logo_mark {margin-bottom:20px;}
.sec2 .logo_mark img {width:100%;}
.sec2 .txt2 {width: 100%; margin-bottom:30px}



/* =============================
 .section3
==============================*/
.sec3 .flex_wrap {display:-webkit-flex;display:flex;-webkit-justify-content: space-between; /* Safari */ justify-content:space-between;-webkit-flex-direction:column;flex-direction:column;}
.sec3 .flex_wrap figure {margin-bottom:30px;}

.sec3 .flex_wrap figure,
.sec3 .flex_wrap figure img  {width: 100%;}


/* =============================
 .section4
==============================*/
.company dl.b_des {padding: 1.2em 0.5em}
.company dl.b_des dt.th {width: auto;font-size: 115%; float:none; }
.company dl dd.td {width: auto; float:none;}

/* =============================
 .section5
==============================*/



/* =============================
 .section6
==============================*/

.sec6 {
    background: transparent url("../img/circle.png") no-repeat scroll center top;
	background-size:80%;
    width: 100%;
	margin-left: auto;
	margin-right: auto;
	height: inherit;
    padding: 60px 0px 100px;
}

.sec6 .bar {margin: 0 auto 1em;}

.sec6 .mail,
.sec6 .mail img {width: 100%;}

.sec6 .mail_btn a {padding:1em; border-radius:5px; background:#FF6; color:#000;}


}