@charset "utf-8";
/* ----------------------------------------
 mv
------------------------------------------- */
#mv{
height: 716px;
background: url("../images/mv.jpg") 50% 50% no-repeat;
background-size: cover;
}
#mv .catch{
width: 100%;
max-width: 687px;
padding-top: 50px;
}
/* ----------------------------------------
 lead
------------------------------------------- */
#lead p{
margin-bottom: 50px;
}
#lead .box{
width: 100%;
max-width: 718px;
margin: 0 auto;
}
/* ----------------------------------------
 measures
------------------------------------------- */
#measures .float-l{
width: 60%;
}
#measures .float-r{
width: 37%;
}
#measures ul li{
border-bottom: 1px dotted #000;
background: url("../images/list-icon.png") 0 0.2em no-repeat;
padding-left: 30px;
padding-bottom: 10px;
margin-bottom: 10px;
}
/* ----------------------------------------
 suggestion
------------------------------------------- */
#suggestion p{
margin-bottom: 30px;
}
#suggestion .box{
overflow: hidden;
margin-bottom: 50px;
}
#suggestion h4{
font-size: 1.8rem;
text-align: center;
border: 1px solid #000;
padding: 3px;
margin-top: 10px;
}
#suggestion .box .float-l{
width: 48%;
}
#suggestion .box .float-r{
width: 48%;
}
/* ----------------------------------------
 suggestion02
------------------------------------------- */
#suggestion02 p{
margin-bottom: 30px;
}
#suggestion02 .box{
overflow: hidden;
margin-bottom: 50px;
}
#suggestion02 .box .cmn-btn01{
text-align: right;
}
#suggestion02 .box .float-l{
width: 35%;
}
#suggestion02 .box .float-r{
width: 60%;
}
#suggestion02 ul{
overflow: hidden;
}
#suggestion02 ul li{
float: left;
width: 31%;
margin-right: 3.5%;
}
#suggestion02 ul li:nth-child(3n){
margin-right: 0;
}
/* ----------------------------------------
 contact-box
------------------------------------------- */
.contact-box{
margin-top: -41px;
margin-bottom: -41px;
position: relative;
z-index: 1000;
}
.contact-box .box01{
background: url("../images/contact-top.png") 50% 0 no-repeat;
padding-top: 41px;
}
.contact-box .box01 .inner{
background-color: #056ec8;
}
.contact-box .box01 .float-l{
width: 48%;
}
.contact-box .box01 .float-r{
width: 48%;
}
.contact-box .box01 h2{
color: #fff;
font-size: 4.8rem;
line-height: 1.2;
text-align: center;
border-bottom: 3px solid #fff;
padding-bottom: 10px;
margin-bottom: 15px;
}
.contact-box .box01 h3{
color: #fff;
font-size: 2.4rem;
line-height: 1.2;
text-align: center;
margin-bottom: 30px;
}
.contact-box .box01 h4{
width: 341px;
margin-bottom: 30px;
}
.contact-box .box01 p{
color: #fff;
}

.contact-box .box02{
background: url("../images/bg01.png") 0 0;
}
.contact-box .box02 .float-l{
width: 53%;
}
.contact-box .box02 .float-r{
width: 42%;
}
.contact-box .box02 h3{
color: #002084;
font-size: 3.0rem;
line-height: 1.2;
text-align: center;
background-color: #fff;
padding: 10px;
margin-bottom: 15px;
}
.contact-box .box02 h4{
color: #fff;
font-size: 3.0rem;
line-height: 1.2;
text-align: left;
margin-bottom: 10px;
}
/* ----------------------------------------
 flow
------------------------------------------- */
#flow dl{
display: table;
width: 100%;
margin-bottom: 30px;
}
#flow dl dt{
display: table-cell;
width: 20%;
font-size: 3rem;
line-height: 1.1;
color: #fff;
background-color: #056ec8;
padding: 15px;
}
#flow dl dd{
display: table-cell;
font-size: 3rem;
line-height: 1.1;
color: #056ec8;
background-color: #dae8f3;
padding: 15px;
}
#flow .box01{
width: 100%;
margin: 0 auto 50px auto;
}
#flow .box02{
width: 100%;
max-width: 726px;
margin: 0 auto 50px auto;
}
#flow .box03{
width: 100%;
max-width: 703px;
margin: 0 auto 0 auto;
}
/* ----------------------------------------
 company
------------------------------------------- */
#company table{
width: 100%;
font-size: 2.2rem;
line-height: 1.4;
}
#company table th{
width: 40%;
box-sizing: border-box;
color: #004094;
text-align: center;
background-color: #e2eeff;
border: 1px solid #004094;
padding: 15px;
}
#company table td{
box-sizing: border-box;
text-align: left;
border: 1px solid #004094;
padding: 15px;
}

/* =======================
  PC
======================== */
@media screen and (min-width: 650px) {
}
/* =======================
  SP
======================== */
@media screen and (max-width: 649px) {
/* ----------------------------------------
 mv
------------------------------------------- */
#mv{
height: 350px;
background: url("../images/mv.jpg") 50% 50% no-repeat;
background-size: cover;
}
#mv .catch{
padding-top: 30px;
}
/* ----------------------------------------
 measures
------------------------------------------- */
#measures .float-l{
float: none;
width: 100%;
}
#measures .float-r{
float: none;
width: 100%;
max-width: 300px;
margin: 0 auto;
}
/* ----------------------------------------
 suggestion
------------------------------------------- */
#suggestion p{
margin-bottom: 30px;
}
#suggestion .box{
margin-bottom: 50px;
}
#suggestion h4{
font-size: 1.8rem;
margin-top: 10px;
}
#suggestion .box .float-l{
float: none;
width: 100%;
max-width: 350px;
margin:0 auto 30px auto;
}
#suggestion .box .float-r{
float: none;
width: 100%;
max-width: 350px;
margin:0 auto;
}
/* ----------------------------------------
 suggestion02
------------------------------------------- */
#suggestion02 p{
margin-bottom: 30px;
}
#suggestion02 .box{
margin-bottom: 50px;
}
#suggestion02 .box .cmn-btn01{
text-align: center;
}
#suggestion02 .box .float-l{
float: none;
width: 100%;
max-width: 350px;
margin:0 auto 30px auto;
}
#suggestion02 .box .float-r{
float: none;
width: 100%;
}
/* ----------------------------------------
 contact-box
------------------------------------------- */
.contact-box{
margin-top: -20px;
margin-bottom: -20px;
}
.contact-box .box01{
background: url("../images/contact-top.png") 50% 0 no-repeat;
background-size: 85px auto;
padding-top: 20px;
}
.contact-box .box01 .float-l{
float: none;
width: 100%;
}
.contact-box .box01 .float-r{
float: none;
width: 100%;
max-width: 350px;
margin: 0 auto;
}
.contact-box .box01 h2{
font-size: 2.4rem;
border-bottom: 2px solid #fff;
padding-bottom: 10px;
margin-bottom: 15px;
}
.contact-box .box01 h3{
font-size: 2.0rem;
margin-bottom: 30px;
}
.contact-box .box01 h4{
width: 240px;
margin: 0 auto 15px auto;
}
.contact-box .box01 p{
color: #fff;
font-size: 1.5rem;
text-align: center;
}

.contact-box .box02{
background: url("../images/bg01.png") 0 0;
}
.contact-box .box02 .float-l{
float: none;
width: 100%;
max-width: 350px;
margin: 0 auto 30px auto;
}
.contact-box .box02 .float-r{
float: none;
width: 100%;
max-width: 400px;
margin: 0 auto;
}
.contact-box .box02 h3{
font-size: 2.0rem;
padding: 10px;
margin-bottom: 15px;
}
.contact-box .box02 h4{
color: #fff;
font-size: 2.0rem;
text-align: center;
margin-bottom: 10px;
}
/* ----------------------------------------
 flow
------------------------------------------- */
#flow dl{
margin-bottom: 20px;
}
#flow dl dt{
width: 30%;
font-size: 1.7rem;
padding: 10px;
}
#flow dl dd{
font-size: 1.7rem;
padding: 10px;
}
#flow .box01{
width: 100%;
margin: 0 auto 30px auto;
}
#flow .box02{
width: 66%;
max-width: 726px;
margin: 0 auto 30px auto;
}
#flow .box03{
width: 66%;
max-width: 703px;
margin: 0 auto 0 auto;
}
/* ----------------------------------------
 company
------------------------------------------- */
#company table{
font-size: 1.7rem;
border-bottom: 1px solid #004094;
}
#company table th{
display: block;
width: 100%;
border-bottom: none;
text-align: center;
padding: 15px;
}
#company table td{
display: block;
width: 100%;
border-bottom: none;
text-align: left;
padding: 15px;
}


}