@charset "utf-8";

h2{font-size:0; line-height:0; width:100%; height:380px; position:absolute; top:0; left:0; z-index:1; background:url(./img/visual.jpg) top center no-repeat; background-size:cover;}
h2 span{position:absolute; width:291px; top:150px; left:50%; margin-left:-145px;}
@media screen and (max-width: 640px) {
h2{height:auto; position:relative; top:auto; left:auto; clear:both; padding:25px 20%;}
h2 span{position:relative; width:auto; top:auto; left:auto; margin:0;}
}

ul.csr{list-style:none; background:#d9eaf5; padding:65px 0 1px;}
ul.csr>li{padding-bottom:85px; width:1000px; margin:0 auto;}
ul.csr>li>dl>dt{font-size:24px; color:#0076bc; text-align:center; line-height:1.2em; margin:0 0 .5em;}
ul.csr>li>dl>dt span{display:inline-block; padding:0 .75em; border:solid #0076bc; border-width:0 1px;}
ul.csr>li>dl>dd{background:#fff; padding:40px;}
ul.csr>li>dl>dd>ul{list-style:none; background:#e3f0f8; padding:25px 0; margin-left:25px; width:460px; float:right;}
ul.csr>li.first>dl>dd>ul,
ul.csr>li.last>dl>dd>ul{width:260px;}
ul.csr>li>dl>dd>ul>li{width:230px; float:left;}
ul.csr>li.first>dl>dd>ul>li,
ul.csr>li.last>dl>dd>ul>li{width:260px;}
ul.csr>li>dl>dd>ul>li dt{font-size:0; line-height:0; margin-bottom:10px; text-align:center;}
ul.csr>li>dl>dd>ul>li dd{font-size:18px; line-height:1.2em; font-weight:bold; color:#1e315c; text-align:center;}
ul.csr>li>dl>dd>ul>li dd span{display:block; font-size:15px; text-align:center;}
ul.csr>li>dl>dd>p{font-size:20px; line-height:1.8em;}
@media screen and (max-width: 640px) {
ul.csr{padding:2em 3% 1px;}
ul.csr>li{padding-bottom:40px; width:auto;}
ul.csr>li>dl>dt{font-size:17px; font-weight:bold;}
ul.csr>li>dl>dd{padding:1em 1.5em;}
ul.csr>li>dl>dd>ul{padding:1em 0; margin-left:0; width:auto; float:none;}
ul.csr>li.first>dl>dd>ul,
ul.csr>li.last>dl>dd>ul{width:auto;}
ul.csr>li>dl>dd>ul>li{width:50%;}
ul.csr>li.first>dl>dd>ul>li,
ul.csr>li.last>dl>dd>ul>li{width:auto; float:none; margin:0 auto;}
ul.csr>li>dl>dd>ul>li dt{margin:0 5% 10px;}
ul.csr>li.first>dl>dd>ul>li dt,
ul.csr>li.last>dl>dd>ul>li dt{width:50%; margin:0 auto 10px;}
ul.csr>li>dl>dd>ul>li dd{font-size:14px;}
ul.csr>li>dl>dd>ul>li dd span{font-size:13px;}
ul.csr>li>dl>dd>p{font-size:16px; line-height:1.6em; padding-top:1em;}
}

dl.product{background:#e5f1f8; padding:45px 0;}
dl.product>dt{font-size:24px; color:#0076bc; text-align:center; line-height:1.2em; margin:0 0 1em;}
dl.product>dt span{display:inline-block; padding:0 .75em; border:solid #0076bc; border-width:0 1px;}
dl.product>dd ul{list-style:none; text-align:center;}
dl.product>dd ul li{display:inline-block; margin:0 12px; vertical-align:top;}
dl.product>dd ul li a{text-decoration:none !important; color:#0076bc !important;}
dl.product>dd ul li dt{font-size:0; line-height:0; padding-bottom:7px; -moz-transition:all 0.4s ease; -webkit-transition:all 0.4s ease; -o-transition:all 0.4s ease; -ms-transition:all 0.4s ease; transition:all 0.4s ease;}
dl.product>dd ul li dd{font-size:18px; font-weight:bold; text-align:center;}
dl.product>dd ul li.last dd{line-height:1.2em;}
dl.product>dd ul li dd span{display:block; text-align:center; font-size:13px;}
dl.product>dd ul li a:hover dt{margin:-5px 0 5px; -moz-transition:all 0.4s ease; -webkit-transition:all 0.4s ease; -o-transition:all 0.4s ease; -ms-transition:all 0.4s ease; transition:all 0.4s ease;}
@media screen and (max-width: 640px) {
dl.product{padding:30px 0;}
dl.product>dt{font-size:17px; font-weight:bold;}
dl.product>dd ul li{width:40%; margin:0 10px 15px;}
dl.product>dd ul li dt{padding-bottom:5px;}
dl.product>dd ul li dd{font-size:15px;}
dl.product>dd ul li dd span{font-size:12px;}
}