@charset "utf-8";

* { margin: 0; padding: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, time, div, p, h1, h2, h3, h4, h5, h6{ display: block;}
ul, ol{ list-style: none; list-style-image: none;}
img { border: 0; vertical-align: top; -ms-interpolation-mode: bicubic;}
a:link,a:visited{ color: #000; text-decoration: none;}
a:active,a:hover{ color: #999; text-decoration: none;}

html{ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
body{ padding: 0 3%; background: #FFF; color: #000; text-align: center; font-size: 100%; /*font-family: 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', sans-serif;*/ font-family: system-ui;}

.Boxlink{ cursor: pointer}
.cb{ clear: both;}
.en{ font-family: Helvetica, Arial, sans-serif;}
p.bg_over{ position: relative; z-index: 100; overflow: hidden; background: url('/cmn/img/cmn/bg_over.png'); cursor: pointer;}
img.coming{ opacity: 0.2; -ms-filter: "alpha( opacity=20 )"; filter: alpha(opacity=20);}

header{ position: relative;}

/* LOGO */
header#top_header{ margin: 0 auto; padding: 0 0 4%; text-align: left;}
header#top_header h1{ display: inline-block; padding-top: 10px; font-size: 70%;}
header#top_header h1 img{ height: 100%; vertical-align: bottom;}
header#top_header h1 a{ display: block; height: 20px;}

.attention{ display: none; margin: 15px 0 0; font-size: 70%;}
.attention a{ display: none; padding: 8px; border: 1px solid; color: #f00; text-align: center;}

/* sns */
.sns{ position: absolute; top: 8px; right: 70px;}
.sns ul{ margin: 0 -5px; text-align: right;}
.sns li{ display: inline-block; padding: 0 5px; vertical-align: top; font-size: 120%;}
.sns a{ display: block; color: #999;}
.sns a:hover{ opacity: .65;}

/* lang */
.lang{ position: absolute; top: 15px; right: 0;}
.lang ul{ margin: 0 -8px;}
.lang li{ display: inline-block; padding: 0 8px; border-left: 1px solid #cbcbcb; color: #ccc; vertical-align: top; font-weight: bold; font-size: 70%;}
.lang li:first-child{ border: none;}
.lang a{ display: block; color: #999; opacity: 1;}
.lang a:hover{ color: #666;}

/* external */
.ext{ margin: 4% 0 0;}
.ext ul{ margin: 0 -5px; text-align: center;}
.ext li{ display: inline-block; box-sizing: border-box; padding: 0 5px; width: 50%; vertical-align: top;}
.ext a{ display: block; padding: 5px; background: #999; color: #fff; font-size: 70%;}
.ext a:hover{ opacity: .65;}

/* gnav */
.gnav{ margin: 4% 0 0;}
.gnav:after{ display: block; clear: both; content: "";}
.gnav ul{ float: left; box-sizing: border-box; width: 100%;}
.gnav li{ float: left; box-sizing: border-box; width: 33.3333%; text-align: center;}
.gnav a{ display: block; box-sizing: border-box; padding: 10px 0; width: 100%; border-right: 1px dotted #cbcbcb; border-bottom: 1px dotted #cbcbcb; text-align: center; font-size: 70%; line-height:1;}
.gnav li:nth-child(3n) a{ border-right: none;}
.gnav li:nth-child(7) a{ border-bottom: none;}
.gnav a span{ display: block; margin:0 0 5px; color: #ababab; font-size: 70%;}
.gnav a.hit{ background: url('/cmn/img/cmn/bg_menu.gif') repeat left top;}
.gnav a.hit span{ color: #222;}

nav#mainmenu p{ display: none;}
li.mark{ display: none;}
nav#medal{ display:none;}
div#contents_wrap{ clear: both; margin: 0 auto; min-height: 200px; border: 3px solid #CBCBCB;}
div#contents_wrap2{ clear: both; margin: 0 auto; min-height: 200px; border: 0px solid #CBCBCB;}
div#main_bn_nofla{ border: 3px solid #CBCBCB;}
nav#pagenavi{ overflow: hidden; margin: -4px auto 0; width: 100%; height: 29px; background: #CBCBCB; text-align: right;}

p#pankuzu{
position: relative;
z-index: 100;
overflow: hidden;
padding-right: 1%;
padding-left: 3%;
width: 97%;
height: 29px;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
letter-spacing: 0.1em;
font-size: 10px;
font-family: Helvetica, Arial, sans-serif;
line-height: 100%;

-webkit-text-overflow: ellipsis;
}
p#pankuzu a:link, p#pankuzu a:visited{color: #000;}
p#pankuzu a:active, p#pankuzu a:hover{color: #FFF;}
p#pankuzu img{ margin-right: 6px; margin-left: 2px; width: 15px; height: 29px; vertical-align: middle;}

p#pagetop_btn{ position: fixed; right: 0; bottom: 0; z-index: 1000; margin-left: -22px; height: 51px;}
p#pagetop_btn a{ display: block; margin-top: -5px; width: 22px; height: 51px;}
p#pagetop_btn img{ width: 22px; height: 51px;}

footer#footer_menu{ margin: 17px auto 0; padding-bottom: 25px; width: 100%; text-align: left;}
footer#footer_menu nav{ padding: 0 0 0 15px; border-left: 3px solid #CBCBCB;}
footer#footer_menu nav ul{ padding: 4px 0; font-size: 60%;}
footer#footer_menu nav li{ display: inline; padding-right: 10px;}
footer#footer_menu nav li img{ margin-top: 2px; margin-bottom: 2px; height: 15px;}

p#copyright {
clear: both;
margin-top: 18px;
color: #999;
font-size: 10px;
font-family: Helvetica,  Arial, sans-serif;
}

p#copyright a:link,
p#copyright a:visited,
p#copyright a:active,
p#copyright a:hover {color: #999;}

div#mark201309{ padding: 20px 0 10px 5px;}
div#mark201309 p{ display: inline; padding-right: 7px; font-size: 12px;}
div#mark201309 p img{ width: auto; height: 65px;}

/* --------------------------------------------------
 media queries 520px 〜
--------------------------------------------------- */
@media only screen and (min-width: 520px){

    /*LOGO*/
    header#top_header h1{ padding-top: 10px;}
    
    /* sns */
    .sns{ right: 80px;}
    .sns ul{ margin: 0 -8px;}
    .sns li{ padding: 0 8px;}

    /* lang */
    .lang ul{ margin: 0 -10px;}
    .lang li{ padding: 0 10px;}
    
    /* external */
    .ext a{ padding: 10px;}

    footer#footer_menu{ margin: 20px auto 0; padding-bottom: 30px;}
    footer#footer_menu nav{ padding: 2px 0 2px 15px;}
    footer#footer_menu nav ul{ padding: 5px 0;}
    footer#footer_menu nav li{ padding-right: 20px;}
    footer#footer_menu nav li img{ margin-top: 0; margin-bottom: 0; height: 16px;}

    p#pankuzu{ padding-right: 1%; padding-left: 2%; width: 97%;}

}


/* --------------------------------------------------
 media queries 760px 〜
--------------------------------------------------- */
@media only screen and (min-width: 760px){

    body{ padding: 0 3%;}
    
    header#top_header{ padding: 0 0 3%;}
    header#top_header h1 a{ height: 30px;}
    
    /* sns */
    .sns{ top: 18px; right: 80px;}
    .sns li{ font-size: 130%;}

    /* lang */
    .lang{ top: 24px;}
    .lang li{ font-size: 80%;}

    /* external */
    .ext{ margin: 3% 0 0;}
    .ext a{ font-size: 80%;}

    /* gnav */
    .gnav{ margin: 3% 0 0;}
    .gnav li{ margin: 0; width: 14.2857%;}
    .gnav a{ padding: 10px 0; border-right: 2px solid #cbcbcb; border-bottom: none; border-left: none; font-size: 70%;}
    .gnav li:first-child a{ border-left: 2px solid #cbcbcb;}
    .gnav li:nth-child(3n) a{ border-right: 2px solid #cbcbcb;}
    .gnav li:nth-child(7) a{ border-right: 2px solid #cbcbcb;}
    .gnav li a span{ margin: 0 0 5px; font-size: 65%;}

    
    /* ONLINE */
    nav#mainmenu p{ display: block; float: right; font-size: 70%;}
    nav#mainmenu p img{ margin: 5px auto 0; height: 26px;}

    /* 2013賞 */
    li.mark{ display: block; padding-left: 5px !important; width: 30px !important; border-right: 0px solid #CBCBCB !important;}
    li.mark img{ margin: 0px auto 0 !important; width: 30px !important; height: 38px !important;}
    li.mark a{ width: 30px !important; height: 38px !important;}
    li.s1{ padding-left: 15px !important;}

    div#contents_wrap{ min-height: 400px; border: 4px solid #CBCBCB;}
    div#contents_wrap2{ min-height: 400px; border: 0px solid #CBCBCB;}
    div#main_bn_nofla{ border: 4px solid #CBCBCB;}

    p#pagetop_btn{ margin-left: -24px; height: 56px;}
    p#pagetop_btn a{ margin-top: -70px; width: 24px; height: 56px;}
    p#pagetop_btn img{ width: 24px; height: 56px;}

    p#pankuzu{ padding-right: 1%; padding-left: 2%; width: 97%;}

    footer#footer_menu{ margin: 32px auto 0; padding-bottom: 50px;}
    footer#footer_menu nav{ border-left: 4px solid #CBCBCB;}
    footer#footer_menu nav li{ padding-right: 20px;}

    div#mark201309{ display: none;}

}

/* --------------------------------------------------
 media queries 900px 〜
--------------------------------------------------- */
@media only screen and (min-width: 900px) {
    
    header#top_header{ padding: 0 0 20px;}
    
    /* sns */
    .sns{ top: 13px;}

    /* lang */
    .lang{ top: 20px;}
    
    /* ext */
    .ext{ position: absolute; top: 10px; right: 190px; margin: 0;}
    .ext li{ width: auto;}
    .ext a{ display: block; padding: 5px 10px;}

    /* gnav */
    .gnav{ margin: 20px 0 0;}
    .gnav a{ font-size: 80%;}
    .gnav a span{ margin: 0 0 5px; font-size: 65%;}

}

/* --------------------------------------------------
 media queries 1040px 〜
--------------------------------------------------- */
@media only screen and (min-width: 1040px){

    body{ padding: 0; min-width: 1038px;}

    /* LOGO */
    header#top_header{ width: 1008px;}
    header#top_header h1 a{ height: 40px;}
    
    .attention{ display: inline-block; margin: 15px 0 0 15px; vertical-align: top;}
    
    nav#mainmenu ul{ width: 720px;}
    nav#mainmenu li{ width: 139px;}
    nav#mainmenu li a{ width: 139px;}
    li.s1{ padding-left: 25px !important;}
    
    /* sns */
    .sns{ top: auto; right: 0; bottom: 20px;}
    .sns ul{ margin: 0 -8px;}
    .sns li{ padding: 0 8px;}
    .sns a{ font-size: 130%;}

    /* lang */
    .lang{ top: 26px;}
    .lang ul{ margin: 0 -8px;}
    .lang li{ padding: 0 8px; font-size: 85%;}
    
    /* ext */
    .ext{ top: 20px; right: 100px;}
    .ext a{ padding: 5px 20px;}

    /* gnav */
    .gnav{ width: 870px; /*width: 760px;*/}
    .gnav li a{ border-right: 4px solid #cbcbcb;}
    .gnav li:first-child a{ border-left: 4px solid #cbcbcb;}
    .gnav li:nth-child(3n) a{ border-right: 4px solid #cbcbcb;}
    .gnav li:nth-child(7) a{ border-right: 4px solid #cbcbcb;}
    .gnav li a span{ font-size: 70%;}

    div#contents_wrap{ width: 1000px;}
    div#contents_wrap2{ width: 1008px;}

    nav#pagenavi{ width: 1008px;}

    footer#footer_menu{ width: 1008px;}

}