@charset "Shift-JIS";

* html body{behavior:url("/gate/p/css/csshover.htc");}

div:after,
ul:after {
content:"";
display:block;
clear:both;
visibility:hidden;
height:0;}
* html div,* html ul{display:inline-block;}
* html div,* html ul{height:1%;}
div,ul{display:block; zoom:1;}

div{word-break:break-all; word-wrap:break-word;}
form,input{margin:0; padding:0;}
a,img{border:none;}
.clear{clear:both; margin:0; padding:0; height:0;}
.textindent{text-indent:-9999px; overflow:hidden;}
li{list-style:none;}

a{color:#940042;cursor: pointer;}
body{
min-width:320px !important;
background-color:#fff;
font-family:"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
overflow-x:hidden;}

*,*:after,*:before{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
padding:0;
margin:0;
border:0;}

html{width:100%; min-width:320px !important; height:100%;}
header,footer{z-index:10;}
/*h1,h2,h3,h4,h5,h6{display:none;}*/
a{outline:none;}
a:link,a:visited,a:hover,a:active{text-decoration:none;}
img{padding:0; margin:0; border:0; vertical-align:bottom;}
li{list-style:none;}
strong{font-weight:bold;}
table{width:100%; color:#000; border-collapse:collapse; border-spacing:0; margin:0 auto;}

/*
============================================================
MAIN
============================================================
*/
#main{
width:100%;
min-width:320px;
color:#000;
background-position:center top;
background-repeat:no-repeat;
background-attachment:fixed;
margin:0 auto;
padding-bottom:10px;}

@media screen and (min-width:801px){#main{background-image:url(../img/common/bg/main_pc.jpg); background-size:cover;}}
@media screen and (max-width:800px){#main{background-image:url(../img/common/bg/main_sp.jpg); background-size:100%;}}

@media screen and (min-width:901px){#main-inner{margin:0 auto;}}
@media screen and (max-width:980px){#main-inner{width:98%; margin:0 auto;}}


/*
============================================================
COMMON STYLE
============================================================
*/

.cat_box{
position:relative;
width:100%;
max-width:1080px;
margin:30px auto 40px;
}
.cat_box img{width:100%; height:auto;}

.cat_box .head{
position:relative;
z-index:1;
width:100%;
padding-top:10.5%;
margin-bottom:-5%;
background-image:url(../img/common/box/box_head.png);
background-position:center bottom;
background-size:100% auto;
background-repeat:no-repeat;
}

.cat_box .head .title{
position:absolute;
width:50%;
max-width:540px;
top: 0;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}

.cat_box .inner{
position:relative;
width:calc(100% - 50px);
max-width:1000px;
padding:5% 0 50px;
margin:0 auto;
background:url(../img/common/box/box_bg.png);
background-position:center;
background-repeat:repeat-y;
background-size:100% auto;
}

.cat_box .foot{
position:absolute;
z-index:1;
left: 50%;
transform: translateX(-50%);
bottom:-20px;
width:100%;
padding-top:10%;
background-image:url(../img/common/box/box_foot.png);
background-position:center bottom;
background-repeat:no-repeat;
background-size:100% auto;

}


@media screen and (max-width:980px){
.cat_box{margin:30px auto 60px;}
.cat_box .head .title{width:65%;top: -15px;}
}

@media screen and (max-width:639px){
.cat_box .head .title{top: -10px;}
.cat_box .inner {width: calc(100% - 20px);padding:5% 0 30px;}
}



.cat1{
position:relative;
width:100%;
max-width:980px;
border-radius:10px;
margin:50px auto;}
.cat1 img{width:100%; height:auto;}

.cat1 .cat-title{
position:absolute;
top:-15px;
width:100%;
text-align:center;
z-index:3;}
.cat1 .cat-title img{width:100%; max-width:280px;}

.cat1 .top,
.cat1 .btm{
position:absolute;
width:100%;
height:50px;
background-image:url(../img/common/box/bar_topbottom.png);
background-position:left;
background-size:auto 100%;
background-repeat:repeat-x;
border-left:2px #004994 solid;
border-right:2px #004994 solid;
z-index:2;}
.cat1 .top{top:-10px;}
.cat1 .btm{bottom:-10px;}

.cat1 .inner{
width:100%;
max-width:960px;
background-image:url(../img/common/box/bgline_left.png),url(../img/common/box/bgline_right.png),url(../img/common/box/bg.png);
background-position:top left,top right,center;
background-repeat:repeat-y,repeat-y,repeat;
border:2px solid #013c50;
padding:40px 0;
margin:0 auto;}

.cat1 .inner .sub-title{
display:block;
width:90%;
max-width:840px;
text-align:center;
margin:0 auto 20px;}
.cat1 .inner .sub-title img{width:100%; max-width:600px;}

.cat1 .inner .red{
background:#fe4475;
background:-moz-linear-gradient(top, #fe4475 0%, #c3064c 100%);
background:-webkit-linear-gradient(top, #fe4475 0%,#c3064c 100%);
background:linear-gradient(to bottom, #fe4475 0%,#c3064c 100%);
padding:5px 0;}
.cat1 .inner .green{
background-color:#00cea0;
background-image:url(../img/common/bg/title01.png);
background-repeat:repeat-x;
background-position:bottom;
border-radius:10px;}

@media screen and (max-width:980px){
.cat1 .inner{width:98%;}}

@media screen and (max-width:639px){
.cat1 .cat-title img{max-width:200px;}
.cat1 .top,
.cat1 .btm{height:30px;}
.cat1 .inner{width:100%;}
}


/*
============================================================
POPUP
============================================================
*/
.pop_box .bnr_area{display: inline-block;width:100%;text-align:center;margin-top:20px;}
.pop_box .inbnr{display: inline-block;position:relative;width:100%;max-width:400px;}
.pop_box .inbnr img{width:100%;height:auto;}
.pop_box .inbnr_cover{position:absolute;top:0;bottom:0;left:0;right:0;opacity:0;z-index:1;}
.pop_box .inbnr_cover:hover{opacity:1;}


@media screen and (min-width:801px){
.pc_only{display:block;}
.sp_only{display:none;}
img.pc_only{display:inline-block;}
img.sp_only{display:none;}}

@media screen and (max-width:800px){
.pop_box img{width:100%; max-width:800px;}
.pc_only{display:none;}
.sp_only{display:block;}
img.pc_only{display:none;}
img.sp_only{display:inline-block;}}

/*
============================================================
ページbottom背景
============================================================
*/
#pegebottom{width:100%;height:65px;position:relative;
background-image:url(../img/common/bg/footer_line.jpg); 
background-size:auto 100%;
background-repeat:repeat-x;
}

@media screen and (max-width:639px){
#pegebottom{height:40px;}

}

/*
================================================================================================================
トップへ戻る
================================================================================================================
*/
#page-top {
position: fixed;
bottom: 50px;
right: 10px;
font-size: 10px;
z-index:9999;
}
#page-top span {
font-size: 22px;
}
#page-top a {
background-color: rgba(255,180,40,0.8);
text-decoration: none;
color: #fff;
width: 50px;
padding: 10px 5px 6px 5px;
text-align: center;
line-height: 10px;
display: block;
border-radius: 26px;
-webkit-border-radius: 26px;
-moz-border-radius: 26px;
}
#page-top a:hover {
text-decoration: none;
background-color: rgba(255,240,140,1.0);
color: #fa0;
}

@media screen and (max-width:799px) {
#page-top {
bottom: 10px;
right: 10px;
font-size: 10px;
}
#page-top a {
width: 50px;
padding: 10px 2px 6px 2px;
text-align: center;
line-height: 10px;
display: block;
border-radius: 26px;
-webkit-border-radius: 26px;
-moz-border-radius: 26px;
}
}

/*
============================================================
ボタン
============================================================
*/

.btn{
display:block;
position:relative;
margin:0 auto;
padding:0 10px;
cursor:pointer;
min-height:60px;
}

.btn.type01{
background-image:url(../img/common/btn_type01/btn_left.png),url(../img/common/btn_type01/btn_right.png); 
background-position:center left,center right;
background-size:10px 100%,10px 100%;
background-repeat:no-repeat;}
.btn.type01:hover{background-image:url(../img/common/btn_type01/btn_left_on.png),url(../img/common/btn_type01/btn_right_on.png); }

.btn span{
position:absolute;
top:0;bottom:0;left:5px;right:5px;}

@media screen and (max-width:639px){
.btn{min-height:50px;}

}