@import url(http://fonts.googleapis.com/css?family=Oswald:400,700,300);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/*
@import url(cmnsmallpc.css) screen and (max-width: 1200px);
@import url(cmntab.css) screen and (max-width: 850px);
@import url(cmnsmart.css) screen and (max-width: 450px);
*/

/*RESET-HTML----------*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
h1, h2, h3, h4, h5, h6 {
font-size: 12px !important;
font-weight: normal  }
img  {
text-decoration: none;
margin:           0;
padding:          0;
border-style:     none }
input:focus, texarea:focus, select:focus {
background-color: #fffaf0 }
address {
font-size:  11px;
font-style:  normal;
padding-top: 10px }
fieldset, img, hr, abbr, acronym {
border: 0 }
input  {
font-weight: bold !important; }
strong {
font-style: normal;
font-weight: bold }
/*BASIC----------*/
body     {
font-size:11px;
font-family: Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
-webkit-text-size-adjust:100%;
line-height: 125%;
background-repeat: no-repeat;
background-position: center -35px;
text-align: center;
letter-spacing: 0.1em;
margin:           0;
padding:          0           }

a:link     {
color:          #4682b4;
text-decoration: none }
a:visited    {
color: #000080 }
a:hover   {
color:          #f00; }
a:active  {
color: #c71585 }
/*HEADER----------*/
#HD01 {
background-color: #343831;
text-align: center;
}

#HD01sub {
text-align: right;
width: 100% !important;
max-width: 1200px !important;
margin-right: auto;
margin-left: auto;
}

/*NAVIGATION----------*/
#HD02B {
background-color: #000;
}

#HD02 {
background-color: #000;
text-align: left;
overflow: auto;
max-width: 1200px !important;
margin-right: auto;
margin-left: auto;
padding-top: 5px;
}



#HD02 h1 {
margin: 0 !important;
padding: 0 !important; }

#HD02 img{
max-width: 100%;
height: auto;
width /***/:auto;
min-width: 200px;　
width: expression(document.body.clientWidth < 152? "150px" : "auto");
}

#HD02R {
display: table;
}

#HD02R li {
font-size: 15px;
font-family: Oswald, sans-serif;
text-align: center;
width: 33%;
list-style-type: none;
display: table-cell;
}
#HD02R li a {
color: #fff;
padding-top: 30px;
padding-bottom: 30px;
display: block;
}
#HD02R li a:visited {
color: #fff;
}

/*HEADER-DETAIL----------*/
#HD03 h2 {
font-family: YuGothic, "Yu Gothic", 游ゴシック, 游ゴシック体, "Noto Sans Japanese", sans-serif;
font-size: 25px !important;
text-align: center;
letter-spacing: 0;
margin-top: 0;
margin-bottom: 25px;
padding-top: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #a9a9a9;
}





/*---------*/

#HD03sub02 ul {
text-align: center;
overflow: hidden;
max-width: 100%;
margin: 0 auto;
padding: 15px;
display: none;
}

#HD03sub02 li {
margin-right: 10px;
display: inline;
}
#HD03sub02 a {
color: #fff;
}








/*SLIDE----------*/
#slide {
background-color: #000;
text-align: center;
float: none;
clear: both;
margin: 0 0 20px;
padding: 0;
}

#slide img {
 }
/*CONTENTS----------*/
#con01 {
max-width: 1200px;
margin-right: auto;
margin-bottom: 30px;
margin-left: auto; }

/*WHATHOT----------*/
#topHot01 {
margin: 0;
padding: 0; }

.topHot02 {
/*margin: 0;
padding: 0;*/
width: 48.33%;
float: left;
margin: 0.5em 0.83%;
display: block;
}

.topHot02 h2 {
font-size: 15px !important;
font-family: Oswald, sans-serif;
text-align: left;
position: relative;
margin: 0 0 5px;
padding-bottom: 5px;
padding-left: 3px;
border-bottom: 2px solid #a9a9a9;
}
.topHot02 h2 a {
position: absolute;
right: 0;

}

.topHot02 ul {
overflow: hidden;
min-height: 70px;
margin: 0;
padding: 0;
}

.topHot02 li {
line-height: 1.2em;
text-align:          left;
padding-bottom: 0;
padding-left: 3px;
list-style-type: disc;
list-style-position: inside;
}

/*TOP-PANEL----------*/
#topPanelB {
overflow: auto;
clear: both;
margin: 0;
padding: 0;
}

.topPanel {
width: 23.33%;
float: left;
margin: 0.5em 0.73%;
padding-top: 10px;
padding-bottom: 10px;
display: block;
}

.topPanel h3 {
font-size: 10px !important;
font-weight: normal;
text-align: left;
margin: 0;
padding: 0; }

.topPanel img {
width: 100%; }

/*DETAIL-PANEL----------*/
#DPanelB {
clear: both;
margin: 0;
padding: 0; }

.DPanel {
min-height: 210px;
padding: 10px 10px 1px;
border: solid 1px #c0c0c0;
width: 23.33%;
float: left;
margin: 0.5em 0.83%;
display: block; }

.DPanel h3 {
font-family: Oswald, sans-serif;
font-size: 15px !important;
font-weight: normal;
text-align: left;
margin: 0;
padding: 10px 0; }
.DPanel img {
width: 100%; }


/*GEAR-PANEL----------*/
#GPanelB {
overflow: hidden;
clear: both;
margin: 0 0 50px;
padding: 0;
}

.GPanel {
color: #fff;
background-color: #696969;
padding: 10px 10px 1px;
border: solid 1px #696969;
width: 31.73%;
float: left;
margin: 0.5em 0.73%;
display: block;
}

.GPanel h3 {
font-family: Oswald, sans-serif;
font-size: 15px !important;
font-weight: normal;
text-align: center;
margin: 0;
padding: 10px 0; }
.GPanel img {
max-width: 100%;
}



/*FACEBOOK----------*/
.facebook {
text-align: center;
clear: both;
margin: 0;
padding: 25px 0 0; }

div.fb-like-box,
div.fb-like-box iframe[style],
div.fb-like-box span {
width: 100% !important;
overflow: hidden;
max-width: 1180px !important;
border-color: #f00; }

div.fb-like,
div.fb-like iframe[style],
div.fb-like span {
margin-top: 5px; }


/*FOOTER----------*/
#footerB {
width: 100%;
clear: both;
}
#footerB strong {
color: #fff;
}
#footerB .topCaution {
text-align: left;
width: 98%;
max-width: 1160px;
margin-right: auto;
margin-left: auto;
padding-bottom: 15px;
}

#footer {
background-color: #000;
text-align: left;
width: 100%;
}
#footer .privacy {
color: #fff;
text-align: left;
width: 98%;
max-width: 1160px;
margin-right: auto;
margin-left: auto;
padding-top: 20px;
padding-bottom: 20px;
}
.privacy a {
color: #fff;
text-decoration: underline;
}
#footer .copyright {
width: 98%;
clear: both;
max-width: 1160px;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
padding-top: 20px;
padding-bottom: 20px;
border-top: 1px solid #c0c0c0;
}

#footer address {
color:       #a9a9a9;
font-size:   10px;
margin: 0;
padding: 0; }

/*----------*/

/*@media screen and (max-width:1200px){*/
@media screen and (max-width:1200px){

/*RESET-HTML----------*/
/*BASIC----------*/
/*HEADER----------*/
#HD01sub {
width: 100% !important;
}

/*NAVIGATION----------*/
#HD02 img{
width: auto !important;
height: auto !important;
height: 150px;
min-width: 150px !important;
}

#HD02R li { }
/*HEADER-DETAIL----------*/
#HD03sub {
width: 100% !important; }
/*SLIDE----------*/
/*CONTENTS----------*/
#con01 {
width: 100% !important; }
/*WHATHOT----------*/
/*TOP-PANEL----------*/
/*FACEBOOK----------*/
/*FOOTER----------*/

}






/*@media screen and (max-width:850px){*/
@media screen and (max-width:850px){

/*RESET-HTML----------*/
/*BASIC----------*/
html,body {
width: 100% !important;
 }

/*HEADER----------*/
#HD02 {
overflow: hidden;
white-space: nowrap;
}

#HD02 .col_7 {
text-align: center;
width: 100%;
}

#HD02 .col_5 {
width: 100%;
overflow: hidden;
clear: both;
}



/*NAVIGATION----------*/


/*SLIDE----------*/
#slide {
clear: both; }


/*CONTENTS----------*/
#con01 {
width: 100%;
max-width: 100%;
margin-right: auto;
margin-left: auto; }

/*WHATHOT----------*/
.topHot02 {
width: 98.33% !important; }
/*TOP-PANEL----------*/
.topPanel {
width: 31.67% !important;
overflow: hidden !important;
padding: 5px 5px 2px !important; }

/*DETAIL-PANEL----------*/
.DPanel {
width: 31.67% !important;
overflow: hidden !important;
min-height: 200px !important;
padding: 5px 5px 2px !important; }
.GPanel {
width: 48.33% !important;
}

/*FACEBOOK----------*/
/*FOOTER----------*/

}






/*@media screen and (max-width:450px){*/
@media screen and (max-width:450px){

/*RESET-HTML----------*/
/*BASIC----------*/
/*HEADER----------*/

/*NAVIGATION----------*/
#HD02 img {
min-width: 150px !important;
} 

/*SLIDE----------*/
/*CONTENTS----------*/
/*WHATHOT----------*/

/*TOP-PANEL----------*/
.topPanel {
width: 48.33% !important; }

/*DETAIL-PANEL----------*/
.DPanel {
width: 48.33% !important;
min-height: 160px !important; }
/*FACEBOOK----------*/
div.fb-like,
div.fb-like iframe[style],
div.fb-like span {
vertical-align: middle;
margin-top: 0 !important;
margin-bottom: 5px; }


/*FOOTER----------*/
}