/*--------- reset ----------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, input, select, button, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
margin:0;
padding:0;
border: 0;
}


body{
font-size:15px;
line-height:1.8em;
color: #505050;
font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
text-align:left;
letter-spacing:1px;
vertical-align: baseline;
background-color:#f8f6f3;
}
a { 
text-decoration: none;
}
a:link,a:active,a:hover,a:visited { 
text-decoration: none;
color: #777777;
}
a:hover { 
opacity: 0.5;
filter: alpha(opacity=50);
-ms-filter: "alpha(opacity=50)";
transition:all.2s;
-webkit-transition:all.2s;
}
a.ul  { 
text-decoration: underline;
}

/*------list style------*/

li {
list-style-type:none;
zoom:1;
margin:0;
padding:0;
}

.li_line{
}

.li_line li{
display:inline;
margin-right:20px;
}

.ul_bk {
padding-left:1em;
}

.ul_bk li {
display:block !important;
margin-bottom:1.5em;
zoom: normal;
}
.ul_bk li:last-child {
margin-bottom:0;
}

.ol_bk {
display:block !important;
list-style-type:decimal !important;
padding-left:2em !important;
}
.ol_bk li {
margin-bottom:1.5em;
list-style-type:decimal !important;
padding-left:1em !important;
zoom: normal;
}
.ol_bk li:last-child {
margin-bottom:0;
}
.ol_bk ol {
margin-top:1.5em;
}
.ol_bk ol li {
list-style-type:lower-roman !important;
}

img {
line-height:0;
vertical-align:bottom;
}

p {
margin-bottom:2em;
}

/*------- clear -------*/

.cf:after {  
content: "";
clear: both;
display: block;
}
.end {
margin-right:0 !important;
}
/*------- h -------*/

h1 {
font-size:26px;
line-height:1.5em;
font-weight:bold;
}
h2 {	
font-size:24px;
line-height:1.5em;
font-weight:bold;
}
h3 {
font-size:22px;
line-height:1.5em;
font-weight:bold;
}
h4 {	
font-size:18px;
line-height:1.5em;
font-weight:bold;
}
h5 {
font-size:16px;
line-height:1.5em;
font-weight:bold;
}
h6 {	
font-size:16px;
line-height:1.5em;
font-weight:bold;
}

/*------- h 個別指定  -------*/

.tbx {
padding:35px;
border:1px #DCDCDC solid;
margin-bottom:50px;
background-color:#ffffff;
}
.tul {
padding:30px 20px;
border-bottom:1px #DCDCDC solid;
margin-bottom:36px;
}

.title {
line-height:1em;
margin-bottom:15px;
}

h3.icon,
h5.icon {
padding:20px;
border-bottom:1px solid #DCDCDC;
margin-bottom:20px;
font-size:18px;
font-weight:bold;
}

.icon:before {
content:url("https://img12.shop-pro.jp/PA01062/575/etc/icon_item.gif") ;
padding-right:1em;
vertical-align:-2px;
}
/*-------height-------*/
.h300 {
height:300px;
}

.h200 {
height:200px;
}

.h100 {
height:100px;
}

.h80 {
height:80px;
}

/*-------margin-------*/
.mg10 {
margin:10px !important;
}
.mg20 {
margin:20px !important;
}
.mg20lr {
margin:0 20px !important;
}
.mg0a {
margin-left:auto !important;
margin-right:auto !important;
}
.mr10 {
margin-right:10px !important;
}
.mr20 {
margin-right:20px !important;
}
.mr2p {
margin-right:2% !important;
}
.ml20 {
margin-left:20px !important;
}
.ml40 {
margin-left:40px !important;
}
.mt10 {
margin-top:10px !important;
}
.mt20 {
margin-top:20px !important;
}
.mtmn40 {
margin-top:-40px !important;
}

.mt50 {
margin-top:20px !important;
}

.mb50 {
margin-bottom:50px !important;
}

.mb36 {
margin-bottom:36px !important;
}

.mb20 {
margin-bottom:20px !important;
}

.mb10 {
margin-bottom:10px !important;
}

.mbmn1 {
margin-bottom:-1% !important;
}
.mtmn1 {
margin-top:-1% !important;
}
.mbn {
margin-bottom:0 !important;
}

/*-------padding-------*/
.pdb1 {
padding-bottom:1em !important;
}
.pdt36 {
padding-top:36px !important;
}
.pdt10 {
padding-top:10px !important;
}
.pdt15 {
padding-top:15px !important;
}
.pdt20 {
padding-top:20px !important;
}
.pdb36 {
padding-bottom:36px !important;
}
.pdb50 {
padding-bottom:50px !important;
}
.pdb10 {
padding-bottom:10px !important;
}
.pdb20 {
padding-bottom:20px !important;
}
.pd36 {
padding:36px !important;
}
.pd20 {
padding:20px !important;
}
.pd5 {
padding:5px !important;
}
.pd10 {
padding:10px !important;
}
.pd15 {
padding:15px !important;
}
.pdlr20 {
padding:0 20px !important;
}
.pdn {
padding:0 !important;
}
.pdbn {
padding-bottom:0 !important;
}

/*-------float-------*/
.flr {
float:right;
}
.fll {
float:left;
}

/*-------mark-------*/

.arr {
display:block;
}

.arr:before {
content:url("https://img12.shop-pro.jp/PA01062/575/etc/arrow.png") ;
padding-right:1em;
}

.arrw {
display:block;
}

.arrw:before {
content:url("https://img12.shop-pro.jp/PA01062/575/etc/arrowf.png") ;
padding-right:1em;
}

/*-------font size-------*/
.f8 {
font-size:12px !important;
}
.f9 {
font-size:13px !important;
}
.f11 {
font-size:14px !important;
}

.f12 {
font-size:14.5px !important;
}

.f13 {
font-size:15px !important;
}

.f15 {
font-size:17px !important;
}

.f18 {
font-size:19px !important;
}

.f20 {
font-size:20px !important;
}

.f25 {
font-size:25px !important;
}

.f32 {
font-size:32px !important;
}


/*-------font align-------*/
.vm {
vertical-align:middle !important;
}

.vt {
vertical-align:top !important;
}

.tac {
text-align:center !important;
}

.tar {
text-align:right !important;
}

.tal {
text-align:left !important;
}

/*-------font weight-------*/

.fwb {
font-weight:bold !important;
}
.fwn {
font-weight:normal !important;
}
.fws {
font-weight:100 !important;
}


/*------- line-height-------*/

.lh05 {
line-height:0.5em;
}
.lh08 {
line-height:0.8em;
}
.lh09 {
line-height:0.9em;
}
.lh1 {
line-height:1em;
}


/*------- font color -------*/

.red {
color:#FF3300 !important;
}
.grn {
color:#009900 !important;
}
.blu {
color:#333399 !important;
}

.org {
color:#FF9900 !important;
}
/*------- freebox -------*/
.frbx {
padding:19px;
border:1px #DCDCDC solid;
font-size:15px;
}

.w90 {
width:900px;
}


/*------- block ------*/
.block {
width:100%;
margin-bottom:80px;
}
.block_w {
width:100%;
min-width:1080px;
}
.block_n {
width:1080px;
margin:0 auto;
padding:0 50px;
}

.bncon {
margin-right:20px;
background-color:#f5f5f5;
}

.bn {
float:left;
height:100%;
}

.bn60 {
float:left;
width:620px;
height:100%;
}

.bn50 {
float:left;
width: 49%;
height:100%;
}

.bn40 {
float:left;
width:300px;
height:100%;
}

.bn30 {
float:left;
width:300px;
height:100%;
}

.bn25 {
float:left;
width:220px;
height:100%;
}

.bn20 {
float:left;
width:172px;
height:100%;
}

.bw50 {
float:left;
width:50%;
height:100%;
}

.bw30 {
float:left;
width:34%;
height:100%;
}

.bw25 {
float:left;
width:25%;
height:100%;
}



/*------- border -------*/
.bd1sr {
border:1px solid #DCDCDC;
}

.bd1sb {
border-bottom:1px solid #DCDCDC;
}
.bd1sd {
border-bottom:1px dotted #DCDCDC;
}
.bd1st {
border-top:1px solid #DCDCDC;
}

.bd2sr {
border:2px solid #DCDCDC;
}

.bdr   { 
border-radius:10px 10px 10px 10px;
} 
.bdr5   { 
border-radius:5px 5px 5px 5px;
} 


/*------- img ------*/
.im100 {
width:100%;
}
.im90 {
width:90%;
}
.im80 {
width:80%;
}
.im60 {
width:60%;
}
.im50 {
width:50%;
}
.im40 {
width:40%;
}
.im25 {
width:25%;
}

/*-------content-------*/

#content{
position:absolute;
width:100%;
height:auto;
margin:0 auto;
top:0;
left:0;
}

/*--------header-----*/
#header {
height:160px;
}
#top {
position:relative;
width:940px;
padding:0px 42px;
margin:0 auto;
}
h1#logo{
position:relative;
top:25px;
font-size:32px;
}

#h_info{
position:absolute;
top:0;
right:42px;
}
#h_info ul{
font-size:12px;
}
#h_info ul li{
display:inline-block;
float:left;
padding:15px 20px 15px 0;
line-height:1em;
font-size:12px;
}
#h_info ul .h_text{	
font-weight:bold;
}



/*------- h_box -------*/

#h_info ul .h_box{
display:inline-block;
float:left;
font-size:14px;
font-weight:bold;
text-align:center;
line-height:1em;
color:#fff;
padding:14px 10px;
}


.h_box a,.h_box a:link,.h_box a:hover,.h_box a:active,.h_box a:visited{
color:#fff;
}
.h_log {
background: none repeat scroll 0 0 rgba(72, 63, 38, 0.5);
width:70px;
}
.h_log span {
font-size:11px;
}

.h_box.h_cart {
background: none repeat scroll 0 0 rgba(72, 63, 38, 0.8);
width:170px;
}
.h_cart .h_cn {
margin-right:5px;
}
.h_cart .noc,
.h_cart .inc {
padding:3px 5px;
border-radius: 3px;
margin-left:5px;
font-size:14px;
letter-spacing:0px;
line-height:0;
font-weight:bold;
}
.noc {
background-color:#DCDCDC;
}
.inc {
background-color:#f8b542;
}
/*------search-------*/
#search {
position:absolute;
right:42px;
top:60px;
width:276px;
line-height:1.6em;
background-color:#fcfcfc;
height:36px;
padding:2px;
}
#search form {
padding:0;
margin:0;
}
.s_word {
width:220px;
height:26px;
padding:5px;
margin:0;
background:none;
vertical-align: top;
font-size:15px;
}
.s_btn {
width:36px;
}

/*--------navigation-----*/

#dawgdrops {
position:absolute;
width:100%;
min-width:1024px;
margin:0;
color:#ffffff;
background: none repeat scroll 0 0 rgba(72, 63, 38, 0.8);
top:120px;
text-align: center;
}

@media print {
#dawgdrops.fixed	{
display:none;
}
}

.nav-menu {
display: block;
position: relative;
list-style: none;
margin: 0 auto;
padding:5px 42px;
z-index: 100;
width: 1080px;
height:30px;
background: none;
line-height:1em;
}

.nav-item {
list-style: none;
display: inline-block;
padding: 0;
margin: 0;
}

.nav-item > a {
position: relative;
float: left;
display: inline-block;
padding: 0px 20px;
margin:0;
line-height: 2em;
color: #FFFFFF;
}			

.nav-item > a.open {
border-bottom: none;
z-index: 1;
}
.sub-nav {
position: absolute;
display: none;
top: 40px;
left:42px;
padding: 0.5em 30px;
margin:0;
width:1020px;
background: none repeat scroll 0 0 rgba(46, 39, 24, 0.95);

}

.sub-nav.open {
display: flex;
display: -ms-flexbox;
flex-wrap: wrap;
}
.sub-nav-group {
display: block;
padding: 20px 0 0;
width: 21%;
margin: 0 2% 10px;
}
.sub-nav-group.group50 {
width: 46%;
padding: 20px 0 0;
}
.sub-nav-group.group50 .main_item{
display:-moz-box;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;
}
.sub-nav-group.group50 .main_item > a{
width: 46%;
display:block;
}
.sub-nav-group.group50 .main_item ul{
flex:1;
}
.sub-nav-group.group50 .main_item ul .sub_item{
margin-left: 8%;
text-align: left;
}
.sub-nav-group.group50 .main_item ul .sub_item a{
padding:6px 15px;
margin: 0;
}
.sub-nav a {
color: #ffffff;
display: block;
margin-bottom: 0;
padding: 10px 5px ;
line-height: 20px;
width: 100%;
font-size:13px;
}
.sub-nav li {
display: block;
list-style-type: none;
margin: 0;
padding: 0;
list-style: none outside none;
}     
li.nav-item > a:hover, 
li.nav-item > a:focus, 
li.nav-item > a.open  {  
color:#f8b542;
background: transparent;
} 
.sub-nav a:hover, 
.sub-nav a:focus { 
background-color: #f8b542;
color: #FFFFFF;   
}
.sub-nav img { 
width:100%;
}

#dawgdrops.fixed {
position: fixed;
left: 0;
top: 0;
z-index: 90;
}
@media screen and (max-width: 768px) {

#dawgdrops.fixed {
position: absolute;
z-index: 90;
}
}


/*------ bread ------*/
#bread,#bread_fr {
width:100%;
font-size:12px;
font-weight:bold;
height:10px;
padding:15px 0;
line-height:1em;
}		

#breadcrumbs-one li{
float: left;
margin-right:10px;
}


#breadcrumbs-one .current,
#breadcrumbs-one .current span,
#breadcrumbs-one .current:hover{
font-weight: bold;
color:#663300;
}

#breadcrumbs-one li a:after{
content:">";
padding-left:10px;
}

#breadcrumbs-one li:last-child a:after{
content:"" !important;
}


/* -------wrapper------- */
#wrapper {
position:relative;
width:100%;
height:100%;
top:0px;
}
#wrapper #file {
width:100%;
top:0;
left:0;
}



/*------mainback position------*/

.mrs{
margin-right:1em;
}

.pbm{
padding-bottom:2em;
}
.tpbnr {
position:relative;
width:100%;
height:auto;
min-height:444px;
min-width:1024px;
padding:0;
}

.tpbar {
position:relative;
width:100%;
height:auto;
min-height:222px;
min-width:1024px;
padding:0;
}

.tpimg {
position:relative;
width:100%;
height:auto;
min-height:444px;
min-width:1024px;
padding:0;
}

#tp {
background: url(https://img12.shop-pro.jp/PA01062/575/etc/img_top.jpg) no-repeat center center;
background-size: cover;
}


.tpbox {
background:rgba(255,255,255,0);
transition:all.4s;
-webkit-transition:all.4s;
}
.tpbox:hover {
background:rgba(255,255,255,0.2);
}
.tpinner {
position: absolute;
top: 0; left: 0; right:0; bottom:0;
margin:auto;
width: 100%;
height: 100%;
text-align:center !important;
}

.tptable {
display: table;
width: 100%;
height: 100%;
text-align: center !important;
}
.tptable > * {
display: table-cell;
vertical-align: middle;
margin:0 auto;
width:30%;
}

.hdl {
position: relative;
width:67.382813%;
top:0;  left:0;
height:auto;
min-width:690px;
}

.hdl:before {
padding-top: 64.347826%;
display: block;
content: "";
}
.tpbar .hdl:before {
padding-top: 32.173913%;
display: block;
content: "";
}

.hdr {
position:absolute;
width:32.617187%;
top:0; right:0;
}

.hd1,.hd2 {
position:relative;
width:100%;
height:auto;
}

.hd2{
/*margin-top:1.1%;*/
}

.hd1:before,.hd2:before {
padding-top:67.272727%;
display: block;
content: "";
}

@media screen and (max-width: 1024px) {
.hdr {
left:690px;
width:334px;
}
.hd1:before,.hd2:before {
padding-top:222px;
display: block;
content: "";
}
.hd2{
margin-top:6px;
}

}

.btn--header,.btn--header:link,.btn--header:visited{
color:rgba(255,255,255,.6);
border:2px solid rgba(255,255,255,.4);
}

.btn--header:hover,.btn--header:focus{
color:rgba(255,255,255,.8);
border:2px solid rgba(255,255,255,.6);
}

.btn--header:hover,.btn--header:focus.btn--github,.box:hover,.box:focus{
-webkit-transition:all.3s;opacity:.9;
}

.tptitle{
letter-spacing:.2em;
}
.gray{
background:rgba(0,0,0,0.4);
}
.gray:hover{
background:none;
}

.tpimg .hd2 ul li {
float:left;
overflow:hidden !important;
}


/*------ //mainback position------*/


/*------- bnr2 -------*/
.bnr2 {
width:45%;
margin-left:2.5%;
margin-right:2.5%;
}

.bnr2 img{
width:100%;
}
/*------- bnr3 -------*/
.bnr3 {
width:32%;
margin-right:2%;
}

.bnr3 img{
width:100%;
}


/*------- list3 -------*/

.list3 {
width:280px;
margin:0 20px 20px 0;
padding:10px;
}

.list3 img{
width:280px;
height:100%;
background-color:#fff;
}

.list3 p{
width:250px;
margin:24px 15px 0;
text-align:center;
}

.list3n {
height:35px;
line-height:1.5em;
}
.list3p {
}


/*------- list clearfix -------*/
ul.pd_list a.list3:nth-child(3n), ul.pd_list a.list5:nth-child(5n){
margin-right: 0;
}

/*------- list4 -------*/

.list4 {
width:220px;
margin-right:20px;
margin-bottom:20px;
}

.list4 img{
width:220px;
}

.list4 p{
}

.list4n {
}
.list4p {
}

/*------- list5 -------*/

.list5 {
width:160px;
margin:0 10px 10px 0;
padding:10px;
}

.list5 img{
width:160px;
height:160px;
}

.list5 p{
width:130px;
margin:14px 15px 0;
text-align:center;
}

.list5n {
height:35px;
}
.list5p {
}

/*------- table -------*/
table {
width:100%;
border-collapse:collapse;
}
.bn50 th {
padding:15px 10px 15px 15px;
}
.bn50 td {
padding:15px 15px 15px 10px;
}
th,td {
padding:36px 15px;
line-height:2em;
}
.bn50 .thp {
padding:2% 0 2% 1%;
line-height:1.5em;
}
.bn50 .tdp {
padding:2% 1%;
line-height:1.5em;
}
.th50 {
width:48%;
text-align:center;
}
.th30 {
width:28%;
}
.th20 {
width:18%;
}
.td50 {
width:48%;
}
.td70 {
width:68%;
}
.td80 {
width:78%;
}
/*--------footer only-----*/

#footer {
min-width:1024px;
position:relative;
background: none repeat scroll 0 0 rgba(72, 63, 38, 0.8);
}
#f_menu {
display: flex;
display: -ms-flexbox;
justify-content: center;
list-style: none;
margin: 0 auto;
padding:30px 0;
color:#fff;
border-bottom:1px solid #fff;
}
.f_menu_block{
width: 23%;
margin: 0 1%;
}
#f_menu p {
width:100%;
text-align:center;
padding-bottom:1em;
}
#f_menu ul {
margin: 0 20px;
}
#f_menu ul li {
display:block;
font-size:13px;
line-height:2.5em;
}
#f_menu ul li.f_sns{
display: flex;
display: -ms-flexbox;
justify-content: center;
}
.f_logo{
text-align: center;
}
.f_sns a {
display:block;
margin:0 10px;
padding:5px;
background:rgba(255,255,255,0.9);
border-radius: 20px;	
}
.f_sns a img {
width:25px !important;
}
.f_sns:after {
content:"";
clear:both;
}
#f_end {
padding:36px 0;
display: flex;
display: -ms-flexbox;
justify-content: flex-end;
align-items: center;
}
#f_end p {
color:#fff;
font-size:12px;
margin-right:25px;
vertical-align:middle;
}
#f_end p.felogo{
margin-right: auto;
}

#footer a,
#footer a:link,
#footer a:hover,
#footer a:active,
#footer a:visited {
color:#fff !important;
}
/*--------list-sort-------*/
#sort {
font-size:13px;
height:11px;
padding:60px 0 20px;
margin-top:-60px;
line-height:1em;
}		

.sorts{
float:left;
overflow: hidden;
}		

.sorts li{
float: left;
margin-right:10px;
}

.sorts li a:after{
content:"|";
padding-left:10px;
}

.sorts li:last-child a:after{
content:"" !important;
}
.sorts li span, .lots span{
font-weight:bold;
}

.lots{
float:left;
width:180px;
}


/*---pagenation---*/
.pagent{
height:11px;
float:right;
}
.pagent.pageb{
width:100%;
text-align:center;
}
.pagent a{
font-size:13px;
font-weight:bold;
color:#3b2a1c;
}

.pagents{
width:300px;
}

.pagents ul{
margin:0;
}

.pagents li{
float:left;
display:block;
margin:0 10px;
}
.pagents a {
color:#3b2a1c;
font-weight:bold;
text-align:center;
}

a.page_here,a.page_here:link,a.page_here:active{
color:#ccc;
text-decoration:underline;
}

.p-pre{
background:url(https://img12.shop-pro.jp/PA01062/575/etc/list-allow01.gif) no-repeat 0 0;
padding-left:10px;
line-height:1em;
}
.p-next{
background:url(https://img12.shop-pro.jp/PA01062/575/etc/list-allow02.gif) no-repeat right top;
padding-right:10px;
line-height:1em;
}

/*------slider----*/			
#slide {
height: 250px;
text-align: left;
position: relative;
overflow: hidden;
}

#slide ul {
height: 250px;
float: left;
display: inline;
overflow: hidden;
}
#slide ul li {
width: 250px;
height: 250px;
float: left;
display: inline;
overflow: hidden;
list-style:none;
margin-right:10px;
}

#slide #slidel {
top: 75px;
left: 0;
width: 20px;
height: 100px;
line-height: 100px;
color: #fff;
text-align: center;
font-weight: bold;
background: #555;
position: absolute;
overflow: hidden;
cursor: pointer;
z-index: 5;
}
#slide #slider {
top: 75px;
right: 0;
width: 20px;
height: 100px;
line-height: 100px;
color: #fff;
text-align: center;
font-weight: bold;
background: #555;
position: absolute;
overflow: hidden;
cursor: pointer;
z-index: 5;
}

/*-----cate-top------*/
.cateli {
}
.cateli ul {
float:left;
}
.cateli li, #tkrli li {
float:left;
margin:0 20px 20px 0;
position: relative;
text-align: center;
background:#fff;
overflow:hidden;
}
.cl1 {
width:220px;
}
.cr1 {
width:720px;
}
.cb {
width:940px;
}

.cateli a:hover,
#tkrli li  a:hover { 
opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "alpha(opacity=100)";
transition:all.3s;
-webkit-transition:all.3s;
}
.cateli li h3,
#reco .cateli li span,
.dbx2.cateli li span {
display: block;
position: absolute;
top:0;
left:0;
background: rgba(0,0,0,0.7);
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
opacity: 0;
}
.ko1 {
width:440px;
height:384px;
line-height: 384px;
}

.ko2 {
width:460px;
height:180px;
line-height: 180px;
}

.ko3 {
width:260px;
height:180px;
line-height: 180px;
}

.ko4 {
width:180px;
height:180px;
line-height: 180px;
}

.ko5 {
width:350px;
height:190px;
line-height: 190px;
}

.ko6 {
width:570px;
height:190px;
line-height: 190px;
}

.ko7 {
width:460px;
height:190px;
line-height: 190px;
}

.ko8 {
width:460px;
height:190px;
line-height: 190px;
}
.ka1 {
width:200px;
height:400px;
line-height: 400px;
}
.ka2 {
width:370px;
height:190px;
line-height: 190px;
}
.ka3 {
width:330px;
height:190px;
line-height: 190px;
}
.ka4 {
width:250px;
height:190px;
line-height: 190px;
}
.ka5 {
width:300px;
height:190px;
line-height: 190px;
}
.ka6 {
width:130px;
height:190px;
line-height: 190px;
}
.ka7 {
width:300px;
height:190px;
line-height: 190px;
}

.arv li{
width:220px;
}

.arv h3{
width:220px;
height:400px;
line-height: 400px;
}

.arml{
width:460px;
height:220px;
line-height: 220px;
}
.armr{
width:220px;
height:220px;
line-height: 220px;
}
.arg h3{
width:620px;
height:220px;
line-height: 220px;
}
.arf h3{
width:300px;
height:220px;
line-height: 220px;
}
.gf h3{
width:300px;
height:190px;
line-height: 190px;
}

#reco .cateli a span {
vertical-align:middle;
width:180px;
height:100px;
font-size:17px;
font-weight:bold;
padding:22px 20px;
text-align:left;
}

#tkrli li {
width:300px;
}
#tkrli li a div {
display: block;
position: absolute;
background: rgba(0,0,0,0.7);
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
top:180px; 
left:0;
opacity: 1;
width:300px;
height:220px;
overflow:hidden;
}

#tkrli li a div h3 {
width:280px;
position:relative; 
padding:10px;
line-height:1em;
text-align:center;
font-size:20px;
letter-spacing:2px;
opacity: 1;
color:#fff !important;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}

#tkrli li a:hover div h3 {
position:relative;
padding:30px 10px 20px;
line-height:1em;
text-align:center;
opacity: 1;
border-bottom:1px solid #fff;
}

#tkrli li a div p {
position:relative;
width:260px;
padding:20px 20px 0;
margin:0;
}

.cateli a:hover h3,
#reco .cateli a:hover span,
.dbx2.cateli a:hover span,
#tkrli li a:hover div  {
display: block;
top:0;
left:0;
opacity: 1;
color:#fff !important;
}


/*------qa-------*/
.qa dl{
margin-left:60px;
}
.qa dt{
padding:20px;
font-size:20px;
margin-left:-60px;
margin-top: -60px;
padding-top: 60px;
line-height:1.5em;
}
.qa>div{
margin-top: -80px;
padding-top: 80px;
}
.qa dt:before{
content:"Q.";
}
.qa dd{
padding:20px 20px 40px;
border-bottom:solid 1px #DCDCDC;
margin-bottom:20px;
margin-left:-60px;
}
.qa dd:before{
content:"A.";
font-size:20px;
}
.qa dd p{
margin-left:60px;
}
.qa dd p:first-child{
margin-top:-20px;
}


/*------おすすめ----*/

#reco {
min-width:1024px;
background: none repeat scroll 0 0 rgba(72, 63, 38, 0.2);
}
#reco ul {
padding: 40px 0 50px;
}
#reco ul li {
width:220px;
margin: 0 20px 20px 0;
float:left;
background-color:#fff;
padding:0;
}
#reco ul li a img {
width:214px;
border:3px #fff solid;
padding:0;
margin:0;
}
#reco ul li:nth-child(4n) {
margin-right: 0;
}


/*------アクセス ジャンルアイコン----*/
.btn_wz {
background:#CC9966;
color:#fff;
border:1px solid #f5f5f5;
text-align:center;
font-weight:bold;
padding:4px 4px 4px 5px;
}
.btn_fz {
background:#CC6699;
color:#fff;
border:1px solid #f5f5f5;
text-align:center;
font-weight:bold;
padding:4px 4px 4px 5px;
}
.btn_kz {
background:#66CC99;
color:#fff;
border:1px solid #f5f5f5;
text-align:center;
font-weight:bold;
padding:4px 4px 4px 5px;
}
.btn_int {
background:#330000;
color:#fff;
border:1px solid #f5f5f5;
text-align:center;
font-weight:bold;
padding:4px 4px 4px 5px;
}
.btn_mh {
background:#6699CC;
color:#fff;
border:1px solid #f5f5f5;
text-align:center;
font-weight:bold;
padding:4px 4px 4px 5px;
}

/*-----各トップニュース-----*/
.archives{
}
.archives p{
padding:5px 10px;
margin:5px 20px;
border-bottom:1px dotted #ccc;
line-height:1em;
}

.archives p:before {
content:url("https://img12.shop-pro.jp/PA01062/575/etc/arrow.gif") ;
padding-right:1em;
}

.shop_info dt{
margin: 0;
padding: 10px 0 10px 25px;
width:150px;
}
.shop_info dd{
margin: -40px 0 10px;
padding: 10px 0 20px 160px;
width:780px;
border-bottom: 1px solid #ccc;
}
/*------- ランキング -------*/

.rank {
position: relative;
}
.rank1 {
position: absolute;
top: 0;
left: 0;
}

/*------- トップスクロール -------*/
#topcontrol{
z-index:90;
}


/* 202006追加 */
.flex_row{
display: flex;
display: -ms-flexbox;
}
.flex_j_end{
justify-content: flex-end;
}
.flex_j_center{
justify-content: center;
}
.flex_j_bet{
justify-content: space-between;
}
.flex_wrap{
flex-wrap: wrap;
}
.flex_a_center{
align-items: center;
}

/* side navi */
#side_navi{
width: 100%;
height: 100%;
transition: all 0.3s;
transform: translateX(-100%) translateX(40px);
position: fixed;
top: 0;
right: 0;
z-index: 1000;
background-color: rgba(255,255,255,.85);
}
button {
display: block;
border: none;
padding: 0;
width: 40px !important;
height: 100%;
color: #FFF;
cursor: pointer;
position: fixed;
top: 0;
right: 0;
z-index: 1001;
text-align: center;
outline: none;
background: rgba(72, 63, 38, 0.7);
box-sizing: border-box;
}
/* ハンバーガーボタン3本線 */
button span.bar {
width: 20px;
display: block;
height: 3px;
border-radius: 2px;
background-color: #fff;
transition: all 0.3s;
position: absolute;
right: 10px;
}
.bar1{
top:10px;
}
.bar2{
top:16px;
}
.bar3{
top:22px;
}
button .btn_close {
writing-mode: tb-rl;
writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-o-writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
vertical-align: top;
font-size: 14px;
position: absolute;
right: 10px;
top: 40px;
letter-spacing: 2px;
display: none;
}
button .menu {
writing-mode: tb-rl;
writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-o-writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
vertical-align: top;
font-size: 14px;
position: absolute;
right: 10px;
top: 40px;
letter-spacing: 2px;
}
/* メニューアクティブ時 */
.active button span.bar {

}
.active button .bar1 {
transform: rotate(45deg);
top: 16px;
}
.active button .bar2 {
opacity: 0;
}
.active button .bar3 {
transform: rotate(-45deg);
top: 16px;
}
.active button .menu {
display: none;
}
.active button .btn_close {
display: block;
}
#side_navi.active{
transform: translateX(0);
}

#side_navi .navi_block{
display: flex;
display: -ms-flexbox;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.navi_cover{
width: 90%;
max-width: 820px;
}
.side_navi_menu{
width: 100%;
padding: 20px 0;
}
.side_navi_menu dt{
margin-bottom: 10px;
font-size: 16px;
}
.side_navi_menu dt a{
display: block;
}
.side_navi_menu dt a span{
display: inline-block;
}
.side_navi_menu dt a span::after{
content: '';
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 0 4px 6.9px;
border-color: transparent transparent transparent #3b2a1c;
margin-left: 5px;
}
.side_navi_menu dd{
display: inline-block;
margin-right: 30px;
line-height: 2.4;
font-size: 14px;
}
.side_navi_menu dd a{
display: inline-block;
}
.side_navi_menu dd a::before{
content: '';
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 0 3px 5.2px;
border-color: transparent transparent transparent #877d74;
margin-right: 4px;
}
.side_navi_menu a{
color: #3b2a1c;
}

.flex-row{display:-moz-box;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;flex-wrap:no-wrap;-webkit-flex-wrap:no-wrap;-ms-flex-wrap:none}
.flex-center{-webkit-justify-content:center;justify-content:center;-ms-flex-pack:center}
.flex-start{-webkit-justify-content:flex-start;justify-content:flex-start;-ms-flex-pack:start}
.flex-end{-webkit-justify-content:flex-end;justify-content:flex-end;-ms-flex-pack:end}
.flex-wrap{flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap}
.flex-re{-webkit-flex-direction:row-reverse;flex-direction:row-reverse}
.flex-a-center{-webkit-align-items:center;align-items:center}
.flex-a-stretch{-webkit-align-items:stretch;align-items:stretch;}
.flex-a-start{-webkit-align-items:start;align-items:start}
.flex-a-base{-webkit-align-items:baseline;align-items:baseline}
.flex-fill{flex: 1;}