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


@media print, screen and (min-width: 769px) {

#topImage {
background-image: url("images/topImage.jpg");
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 200px;
padding-top: 150px;
}
#reason .box {
padding-top: 20px;
padding-left: 70px;
margin-bottom: 50px;
position: relative;
}
#reason .box .icon {
display: block;
position: absolute;
top: 0;
left: 0;
background-color: #fff;
width: 60px;
height: 60px;
}
#reason .box dl {
overflow: hidden;
margin: 0;
}
#reason .box dt {
font-size: 24px;
color: #1050A7;
padding-bottom: 5px;
margin-bottom: 10px;
padding-left: 10px;
border-bottom: solid 1px #4075A4;
text-align: left;
}
#reason .box dt span {
font-size: 16px;
}
#reason .box dd {
padding-top: 20px;
overflow: hidden;
}
#reason .box dd p {
width: 60%;
text-align: left;
float: right;
display: block;
position: relative;
margin-bottom: 60px;
}
#reason .box dd .link_btn {
width: 40%;
background-image: url("images/arrow.png");
background-position: right 10px center;
clear: both;
float: right;
}
#reason .box dd img {
float: left;
width: 35%;
}

}


/*
==========================================================
タブレット設定
==========================================================
*/
@media screen and (min-width: 521px) and (max-width: 768px) {

#topImage {
background-image: url("images/topImage.jpg");
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 120px;
padding-top: 100px;
padding-left: 16px;
padding-right: 16px;
}
#reason .box {
padding-top: 20px;
padding-left: 70px;
margin-bottom: 50px;
position: relative;
}
#reason .box .icon {
display: block;
position: absolute;
top: 0;
left: 0;
background-color: #fff;
width: 60px;
height: 60px;
}
#reason .box dl {
overflow: hidden;
margin: 0;
}
#reason .box dt {
font-size: 24px;
color: #1050A7;
padding-bottom: 5px;
margin-bottom: 10px;
padding-left: 10px;
border-bottom: solid 1px #4075A4;
text-align: left;
}
#reason .box dt span {
font-size: 16px;
}
#reason .box dd {
padding-top: 20px;
overflow: hidden;
}
#reason .box dd p {
width: 60%;
text-align: left;
float: right;
display: block;
position: relative;
margin-bottom: 20px;
}
#reason .box dd .link_btn {
width: 50%;
background-image: url("images/arrow.png");
background-position: right 10px center;
}
#reason .box dd img {
float: left;
width: 35%;
}

}


/*
==========================================================
スマホ設定
==========================================================
*/
@media screen and (max-width: 520px) {

#topImage {
background-image: url("images/topImage_sp.jpg");
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100px;
padding-top: 70px;
}
#reason .box {
padding-top: 20px;
margin-bottom: 50px;
position: relative;
}
#reason .box .icon {
display: block;
position: absolute;
top: 0;
left: 0;
background-color: #fff;
width: 60px;
height: 60px;
}
#reason .box dl {
overflow: hidden;
margin: 0;
}
#reason .box dt {
font-size: 20px;
color: #1050A7;
padding-bottom: 5px;
margin-bottom: 10px;
padding-left: 80px;
border-bottom: solid 1px #4075A4;
text-align: left;
}
#reason .box dt span {
font-size: 16px;
}
#reason .box dd {
padding-top: 20px;
overflow: hidden;
}
#reason .box dd p {
text-align: left;
display: block;
position: relative;
}
#reason .box dd .link_btn {
width: 80%;
background-image: url("images/arrow.png");
background-position: right 10px center;
}
#reason .box dd img {
width: 100%;
margin-bottom: 10px;
}


}