@charset "UTF-8";

#wrapper {
clear:both;
width:100%;}
.contents {
padding:66px 0;}
.container {
position:relative;
clear:both;
width:94%;
max-width:1140px;
margin:0 auto;}
.container #main {
float:left;
width:69%;
max-width:720px;
text-align:left;}
.container #main-chinoma {
float:left;
width:65.8%;
max-width:750px;
text-align:left;}
.container #sidebar {
float:right;
width:250px;
text-align:left;}
.container #sidebar-chinoma {
float:right;
width:300px;
text-align:left;}

@media only screen and (max-width:1023px) {

#wrapper {
padding-top:85px;}
.contents {
padding:6% 0;}
.container #main {
float:none;
width:100%;
margin:0 auto;
padding:0;}
.container #main-chinoma {
float:none;
width:100%;
margin:0 auto;
padding:0;}
.container #sidebar {
float:none;
width:100%;
max-width:750px;
margin:0 auto;
padding:7% 0 0 0;}
.container #sidebar-chinoma {
float:none;
width:100%;
max-width:750px;
margin:0 auto;
padding:7% 0 0 0;}

}

@media only screen and (max-width:800px) {

.contents {
padding:9% 0;}

}



/* HEADER ================== */

#header {
position:relative;
width:100%;
background:#fff;}
#header-contents {
position:relative;
width:98%;
max-width:1140px;
margin:0 auto;
text-align:left;}
#header-contents #copy {
position:absolute;
right:90px;
top:47px;
font-weight:normal;
line-height:1.2;
color:#222;
white-space:nowrap;}
#header-contents #logo {}
#header-contents #mailmagazine {
position:absolute;
right:0;
top:13px;
width:85px;}

@media only screen and (max-width:1023px) {

#header {
position:fixed;
top:0;
left:0;
z-index:100;
margin:0;
height:85px;}
#header-contents {
width:100%;}
#header-contents #copy {
position:static;
padding:0 5px;
background:#444;
color:#fff;
font-size:9px;
line-height:25px;
overflow:hidden;}
#header-contents #logo {
position:relative;
z-index:200;
width:180px;
padding:3px 2px 2px;}
#header-contents #mailmagazine {
display:none;}

}



/* MENU ================== */

#gmenu {
position:relative;
border-top:1px solid #aaa;
box-shadow:1px 1px 2px rgba(0,0,0,0.3);}

@media only screen and (max-width:1023px) {

#gmenu {
border-top:none;
box-shadow:none;}
}

#gmenu ul {
width:100%;
max-width:1140px;
margin:0 auto;
border-right:1px solid #aaa;}
#gmenu ul li {
position:relative;
float:left;
width:16.66666%;
border-left:1px solid #aaa;}
#gmenu ul i {
font-size:16px;
margin-left:4px;}
#gmenu ul li.mm {
display:none;}
#gmenu ul li a {
display:block;
transition:all 0.3s;
padding:15px 0 14px 0;
font-size:13px;
line-height:13px;
border:1px solid #fff;
color:#222;}
#gmenu ul li a:hover {
border:1px solid #ff9900;}
#gmenu ul li.store a {
background:#000;
color:#fff;
border:1px solid #000;}
#gmenu ul li.store a:hover {
border:1px solid #ff9900;}
#gmenu ul li ul.sub-menu {
visibility:hidden;
opacity:0;
position:absolute;
z-index:300;
top:80%;
left:0;
width:190px;
background:#333;
border:none;
overflow:hidden;
border-radius:5px; 
transition:all 0.3s ease;}
#gmenu ul li:hover ul.sub-menu {
top:100%;
visibility:visible;
opacity:1;}
#gmenu ul li ul.sub-menu li {
float:none;
width:100%;
border:none;}
#gmenu ul li ul.sub-menu li a {
font-size:12px;
line-height:12px;
padding:13px 0;
color:#eee;
background:#333;
border:none;
border-top:1px solid #666;
transition:all 0.3s;}
#gmenu ul li ul.sub-menu li a:hover {
color:#eee;
background:#555;
border:none;
border-top:1px solid #666;}

a.meanmenu-reveal {
display:none;}
.mean-container .mean-bar {
width:100%;
position:fixed;
top:25px;
left:0;
z-index:150;}
.mean-container a.meanmenu-reveal {
width:60px;
height:60px;
padding:20px 15px;
position:absolute;
right:0;
top:0;
cursor:pointer;
display:block;}
.mean-container a.meanmenu-reveal span {
display:block;
background:#000;
height:2px;
margin-top:4px;}
.mean-container .mean-nav {
text-align:left;
width:100%;
margin-top:60px;
max-height:calc( 100vh - 85px );
overflow-y:auto;}

.mean-container .mean-nav ul {
width:100%;
-webkit-overflow-scrolling:touch;
position:relative;
z-index:200;
padding-bottom:35px;}
.mean-container .mean-nav ul li {
position:relative;
width:100%;}
.mean-container .mean-nav ul li i {
display:none;}
.mean-container .mean-nav ul li a {
display:block;
padding:0 4%;
color:#222;
background:#f5f5ef;
border-bottom:1px solid #c5c5bf;
font-size:15px;
line-height:50px;
transition:0.3s;}
.mean-container .mean-nav ul li.mm a {
background:#980818;
color:#fff;}
.mean-container .mean-nav ul li.store a {
background:#000;
color:#fff;}
.mean-container .mean-nav ul li a:hover {
background:#fff;}
.mean-container .mean-nav ul li.mm a:hover {
background:#ee8800;
color:#fff;}
.mean-container .mean-nav ul li.store a:hover {
background:#ee8800;
color:#fff;}
.mean-container .mean-nav ul li ul {
padding-bottom:0;}
.mean-container .mean-nav ul li ul li {
}
.mean-container .mean-nav ul li ul li a {
padding:0 5%;
color:#f5f5f3;
background:#333;
font-size:14px;
line-height:45px;
border-bottom:1px solid #666;}
.mean-container .mean-nav ul li ul li a:hover {
color:#eee;
background:#555;}
.mean-container .mean-nav ul li a.mean-expand {
width:50px;
text-align:center;
padding:0;
position:absolute;
right:0;
top:0;
z-index:2;
font-size:25px;
line-height:50px;
color:#222;
background:rgba(255,255,255,0.5);
border-left:1px solid #fff;}
.mean-container .mean-nav ul li a.mean-expand:hover {
background:#d0c6a1;}
.mean-container .mean-push {
float:left;
width:100%;
padding:0;
margin:0;
clear:both;}
.mean-nav .wrapper {
width:100%;}
.mean-remove {
display:none !important;}



#b-menu {
padding:5px 0;
background:#e9e8e7;}
#b-menu ul {
width:96%;
max-width:1160px;
margin:0 auto;}
#b-menu ul li {
width:25%;
padding:10px;}
#b-menu ul li a img {
width:100%;
box-shadow:1px 1px 2px 0 rgba(0,0,0,0.3);}

@media only screen and (max-width:640px) {

#b-menu ul li {
width:50%;
padding:5px;}

}



/* mainimg  ===================*/

.mainimg {
background-color:#fff;
background-size:cover;
background-position:center center;
box-shadow:0 2px 3px 0 rgba(0,0,0,0.3);}
.mainimg-contents {
position:relative;
text-align:center;
max-width:1200px;
width:100%;
padding:0 3%;
margin:0 auto;}



/* bread ========================== */

.bread {
background:#e9e8e7;
font-size:11px;
line-height:1.3;
padding:16px 0;
text-align:left;}



/* RECO ========================== */

#reco-intro {
clear:both;
margin:30px 0 10px 0;
font-family:'Cormorant Garamond', serif;
font-size:180%;
line-height:1.1;
letter-spacing:1px;}
#reco {
background:#e9e8e7;
padding:15px 0;}
.col-reco {
font-size:12px;
line-height:1.4;
float:left;
width:33.3333%;
padding:15px;}
.col-reco a {
color:#444333;}
.col-reco a .img {
float:left;
width:30%;}
.col-reco a .img img {
width:100%;}
.col-reco a .txt {
text-align:left;
margin:0 0 0 36%;}
.col-reco a .txt .ttl01 {
font-size:15px;
line-height:1.3;
color:#660000;
padding:0 0 8px 0;
font-weight:bold;
border-bottom:1px dotted #bbb;}
.col-reco a .txt .ttl02 {
color:#666;
margin:8px 0;
font-weight:bold;}
.col-reco a .txt .link-btn-reco {
text-align:center;
line-height:1.2;
margin:12px 0 0 0;
padding:7px 0;
border:1px solid #333;
transition:all .3s;}
.col-reco a .txt .link-btn-reco:hover {
background:#333;
color:#fff;}

@media only screen and (max-width:1023px) {

.col-reco a .img {
float:none;
width:100%;}
.col-reco a .img img {
width:auto;}
.col-reco a .txt {
float:none;
margin:15px 0 0 0;}
.col-reco a .txt .ttl01 {
text-align:center;}
.col-reco a .txt .ttl02 {
text-align:center;}

}

@media only screen and (max-width: 800px) {

.col-reco {
letter-spacing:-0.1em;
float:none;
width:100%;}

.col-reco a .img {
float:left;
width:86px;}
.col-reco a .txt {
margin:0 0 0 100px;}
.col-reco a .txt .ttl01 {
text-align:left;}
.col-reco a .txt .ttl02 {
text-align:left;}

}



/* FOOTER ========================== */

#page-top {
position:fixed;
bottom:40px;
right:10px;
width:36px;
height:36px;
line-height:0;}
#page-top a {
padding:10px;
display:block;
background:#888786;
transition:all 0.3s;
border-radius:2px;}
#page-top a:hover {
background:#f78d1d;}

#footer {}
#footer-container {
font-size:12px;
line-height:1.7;
width:95%;
max-width:1140px;
margin:0 auto;
padding:25px 0;}
#footer-contents {
width:500px;
float:left;
text-align:left;}
#footer-company {
font-weight:bold;
padding:6px 0 6px 0;}
ul#footer-menu li {
padding:6px 0 0 0;}
#footer-banner {
padding:6px 0 0 0;
width:360px;
float:right;}
#footer-banner li {
width:50%;
float:left;}
#footer-banner li a {
display:block;
margin:5px;}
#footer-banner li a img {
box-shadow:1px 1px 2px rgba(0,0,0,0.2);} 

#footer-copy {
clear:both;
width:100%;
padding:11px 0;
background:#333;
color:#fff;
line-height:1.2;
font-size:80%;
font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HGS明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;}

@media only screen and (max-width:1023px) {

#footer-container {
padding:3% 0;}
#footer-contents {
width:100%;
float:none;
text-align:center;}
#footer-banner {
margin:33px auto 0;
width:100%;
max-width:540px;
float:none;}
#footer-banner li {
width:33.3333333%;}

}

@media only screen and (max-width: 480px) {

#footer-banner li {
width:50%;}

}