@charset "UTF-8";
/* CSS Document */
/*===== 1: body and base setting ===========================*/
body{margin:0px; padding: 0px; -webkit-text-size-adjust: 100%;}
html{font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 14px; line-height:1.6em;color:#000000;}
/*===== 2: link setting ===========================*/
a:active{border: none}
a{outline:none; text-decoration: none; color:#000000;}
a:hover{ color:#08c;}
/*===== 3: img setting ===========================*/
img { -ms-interpolation-mode: bicubic; } 
a img{ border:none !important; text-decoration: none; transition: 0.2s ease-in-out; -webkit-transition: 0.2s ease-in-out; -moz-transition:0.2s ease-in-out; -o-transition:0.2s ease-in-out;}
a:hover img {opacity:0.6; filter:alpha(opacity=60); -ms-filter: "alpha( opacity=60 )";}
@media screen and (min-width:0px) and (max-width:768px) {
a:hover img {opacity:1; filter:alpha(opacity=100); -ms-filter: "alpha( opacity=100 )";}
}
/*===== 4: ul,ol setting ===========================*/
ul,ol li{padding: 0px; margin: 0px; list-style: none;}
ul.nomal{list-style:disc; padding-left: 1.6em; margin:5px;}
ul.nomal li{list-style: disc; list-style-position: outside;}
ol.nomal li{padding: auto; margin:auto; list-style: decimal;}
/*===== 5: table setting ===========================*/
table, table *{border-collapse: collapse !important;}
table th{font-weight:normal; text-align:left; vertical-align:top;}
/*===== 6: text setting ===========================*/
p{margin:0px 0px 20px 0px;}
.font-smaller{font-size: 10px; line-height:1.2em;}
.font-small{font-size: 12px; line-height:1.3em;}
.font-large{font-size: 16px;}
.font-larger{font-size:18px;}
.bold{font-weight: bold;}
.red{color:#d22d36;}
.blue{color:#08c;}
.text-right{text-align:right;}
/*===== 7: Partition-Line setting ===========================*/
hr {display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:0 0 20px 0; padding:0;}
hr.HeavyLine {display:block; height:4px; border:0; border-top:4px solid #172d57; margin:0 0 20px 0; padding:0;}
.Partition-Line{border-top: dotted 1px #cccccc; height:1px; margin-bottom:20px;}
/*===== 8: img-layout setting ===========================*/
/* !img-box*/
.img-box-xl{width:100%; margin:0 0 20px 0;}

.img-box-xl img{width:100%; height:auto;}

@media screen and (min-width:0px) and (max-width:480px) {
.img-box-xl {
    width: 80%;
    margin: 0 auto 20px;
}
}

.img-box-l{width:68%; margin:0px 1% 20px;}
.img-box-l img{width:100%; height:auto;}
.img-box-m{width:48%; margin:0px 1% 20px;}
.img-box-m img{width:100%; height:auto;}
.img-box-m-center{width:48%; margin:0px auto 20px;}
.img-box-m-center img{width:100%; height:auto;}
.img-box-s{width:28%; margin:0 1% 20px;}
.img-box-s img{width:100%; height:auto; }
.img-box-xs{width:23%; margin:0 1% 20px;}
.img-box-xs img{width:100%; height:auto; }

.apt01 img{width:100%; height:auto;}

@media screen and (min-width:0px) and (max-width:680px) {
.img-box-l{margin:0px 1% 20px;}
}
@media screen and (min-width:0px) and (max-width:480px) {
.img-box-m{width:98%;}
.img-box-m-center{width:98%; margin:0 1% 20px;}
.img-box-s{width:48%;}
.img-box-xs{width:28%;}
}
/* !div-box*/
.box-l-left{width:69%; margin:0 1% 20px 0;}
.box-l-right{width:69%; margin:0 0 20px 1%;}
.box-m-left{width:49%; margin:0 1% 20px 0;}
.box-m-right{width:49%; margin:0 0 20px 1%;}
.box-s-left{width:29%; margin:0 1% 20px 0;}
.box-s-right{width:29%; margin:0 0 20px 1%;}
@media screen and (min-width:0px) and (max-width:480px) {
.box-l-left{width:100%; margin:0 0 20px 0;}
.box-l-right{width:100%; margin:0 0 20px 0;}
.box-m-left{width:100%; margin:0 0 20px 0;}
.box-m-right{width:100%; margin:0 0 20px 0;}
.box-s-left{width:100%; margin:0 0 20px 0;}
.box-s-right{width:100%; margin:0 0 20px 0;}
}
/*===== 9: float-layout setting ===========================*/
.left{float: left}
.left-sp{float: left}
.right{float: right;}
.right-sp{float: right;}
@media screen and (min-width:0px) and (max-width:480px) {
.left-sp{float: none;}
.right-sp{float: none;}
}
/*===== 10: nav-item setting ===========================*/
.arrow{
background-image:url(/common/img/arrow.gif);
background-repeat:no-repeat;
background-size:14px 14px;
background-position:0 center;
color:#000000; padding:0 0 0 20px;
}
a.arrow{color:#08c;}
a.arrow:hover{text-decoration:underline;}
.arrow-down{
background-image:url(/common/img/arrow-down.gif);
background-repeat:no-repeat;
background-size:14px 14px;
background-position:0 center;
color:#000000; padding:0 0 0 20px;
}
a.arrow-down{color:#08c;}
a.arrow-down:hover{text-decoration:underline;}
.next{
background-image: url(/common/img/next.jpg);
background-size: 60px 20px;
background-position: center;
background-repeat: no-repeat;
width: 60px; height: 20px;
margin:0 auto 20px;
text-indent:-50000px;
}
/*===== 11: CLEARFIX ===========================*/
.section:before,
.section:after {content: ''; display: block;}
.section:after {clear: both;}
.section {*zoom: 1;}
/*===== 12: video ===========================*/
video{cursor:pointer;}
video:hover{opacity:0.9;}