@charset "utf-8";
/* CSS Document */


/*!!!!! 20240808 クーポンボタン調整 */
input.reset_coupon_button {
    margin-left: 1rem;
}

/* ----- アセット定義 ----- */
:root{
--key-color: #655F47;
--reverse=text-color: #fffff;
}



#header {
  position: sticky; 
  top: 0;
  height: 100px;
  background-color:var(--key-color);
  align-content: center;
  z-index:99999;
}

.tabmenu{
position: relative;
width: 100dvw;
top:20px;
font-size: 0;
}

.tabmenu input[type="radio"]{
display: none;
}

.tabmenu input[type="radio"] + em{
position: relative;
z-index: 100;
display: inline-block;
margin: 0 4px 0 0;
padding: 4px 0 0;
min-width:100px;
background-color:var(--key-color);
color: #FFFFFF;
text-align: center;
font-size: 0.8rem;
font-style: normal;
line-height: 30px;
cursor: pointer;
}

.tabmenu input[type="radio"]:checked + em{
background: #0ae;
color: #fff;
}
.tabmenu input[type="radio"] + em ~ span{
display: none;
}
.tabmenu input[type="radio"]:checked + em ~ span{
display: block;
}


a{ color:#069; text-decoration:none}
a:visit{ color:#069; text-decoration:none}
a:hover{ color:#06F; opacity:0.8; filter:alpha(opacity=80);}
a:hover img{ opacity:0.8; filter:alpha(opacity=80); -ms-filter:"alpha( opacity=80 )"; background:none !important; }

.wide img, .wide img, .wide img{ display:block; max-width: 100%; height: auto}
.ie6 .wide img, .ie6 .wide img, .ie6 .wide img{ width: 100%}

ol{ padding-left:20px}
ol li{ list-style:decimal}

input{ text-align:left;}
input[type="text"],input[type="email"],input[type="tel"],input[type="password"],select{ padding:4px; max-width:100%; height:26px; line-height:17px; border:1px solid #CCCCCC;}
textarea{ padding:4px; max-width:100%; min-width:100%; min-height:300px; max-height:560px;}
input[type="button"],input[type="submit"]{ text-align: center;}

/*//////////////////////////FRAME WORK//////////////////////////*/
body{ 
	min-width:320px;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}
#wrap{ height:100%;}
/*
#conRap{ padding-top:60px;}
*/

/*//////////////////////////base//////////////////////////*/
body{ text-align:left;}

/*//////////////////////////header//////////////////////////*/

.hdinner{ padding:0 120px 0 60px; width:100%; height:60px; line-height:60px; position:fixed; top:0; text-align:center; z-index:12; background:#FFF;}
#logo a{ display:block;}
#logo img{ 
	max-width:30dvw;
	vertical-align:middle;
}

.searchopen{ width:42px; height:30px; position:fixed; top:15px; right:57px; z-index:13;}
.searchopen span{ display:block; cursor:pointer;}
.searchopen img{ width:30px; height:30px;}

#searchArea{ display:none; width:100%; position:fixed; top:60px; z-index:11; background:#CCC;}
#searchArea .search_header{ padding:10px 0; position:relative;}
#searchArea .search_header div{ position:absolute; top:10px; right:5px; display:block; width:14px; height:14px; cursor:pointer;}
#searchArea .search_header div img{ vertical-align:top;}

.cart_btn{ width:42px; height:30px; position:fixed; top:15px; right:5px; z-index:13;}
.cart_btn .num{ padding:2px; background:#FF0047;}
.cart_btn a{ color:#FFFFFF;}
.cart_btn img{ width:30px; height:30px;}


rawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
    z-index:14;
    width: 27%;
    height: 2px;
    -webkit-transition: all .6s cubic-bezier(.19,1,.22,1);
    transition: all .6s cubic-bezier(.19,1,.22,1);
    background-color: #222;
}
.drawer-hamburger-icon {
    position: relative;
    display: block;
    margin-top: 10px;
}
.drawer-nav{ background-color:#333 !important;}
#gNav li{ text-align:left; border-bottom:1px solid #666;}
#gNav li.name{ padding:10px; font-weight:bold; color:#FFF; border-bottom:none; background:#222;}
#gNav li.noneb{ border-bottom:none;}
#gNav li a{ padding:10px; display:block; color:#FFFFFF;}
#gNav li a:hover{ opacity:0.8; filter:alpha(opacity=80);}
#gNav li .img{ padding-right:10px;}
#gNav li .img img{ width:20px; height:20px;}

/*//////////////////////////contents//////////////////////////*/

#searchBox{ margin-bottom:30px; padding:10px 0; text-align:center;}
#searchform .search{
    position:relative;
    background-color:#fff;
    border:1px solid #aaa;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    -o-border-radius:6px;
    -ms-border-radius:6px;
    border-radius:6px;
}
#searchform .search dt{
    margin-right:40px;
    padding:8px 0 8px 8px;
}
#searchform .search dt input{
    width:100%;
    height:24px;
    line-height:24px;
    background:none;
    border:none;
}
#searchform .search dd{
    position:absolute;
    top:0;
    right:0;
}
#searchform .search dd button{
    display:block;
    padding:10px;
    background:none;
    border:none;
}
#searchform .search dd button span{
    display:block;
    width:20px;
    height:20px;
    background:url('/images/searchbtn_s.png') no-repeat scroll 0 0;
}

.breadcrumbs{ padding:0 10px;}

#nocon{ margin:60px auto; max-width:640px;}

.recenthistory li{ padding:5px; width:20%; float:left;}

/*//////////////////////////footer//////////////////////////*/

/*#footer{ margin:0; padding:20px; z-index:10; background:#000000; color:#FFFFFF;}*/
#footer{ 
	margin:0; 
	padding:20px; 
	z-index:10; 
	background:var(--key-color); 
	color:var(--reverse=text-color);
}
#footer a{ color:#FFF;}
#footer a:hover{ text-decoration:underline;}

#footer .shopinfo{ padding:20px 0; width:100%; float:none;}
#footer .shopinfo .shopad{ margin-bottom:30px;}

#footer .shopinfo h5{ font-size:120%; margin-bottom:20px;}
#footer .si_box{ padding:10px 0; border-top:1px solid #CCC;}
#footer .si_box img{width:115px; height:55px;}
.ft_pay dd{ margin-left:10px; margin-bottom:10px;}
.ft_pay table{ margin:0 4px; border:1px solid #CCC;}
.ft_pay th,.ft_pay td{ padding:2px;}
.ft_pay img{ max-width:300px;}

#ftNav{ padding:0; width:100%; float:none;}
#footer .ft_calender{ margin-bottom:20px;}
#footer .ft_calender h5{ margin-bottom:10px;}

#ftNav ul{ border-top:1px solid #CCCCCC;}
#ftNav li{ margin:0; display:block; border-bottom:1px solid #CCCCCC;}
#ftNav li a{ padding:20px; display:block; color:#666666; background: url(../images/arrow2.png) no-repeat right center #EEEEEE;}
#ftNav li a:hover{ background-color:#DDDDDD; text-decoration:none;}

#footer .copyright{ padding:20px 0; text-align:center;}

#btnArea{ padding:10px; width:60px; height:52px; z-index:200; position:fixed; bottom:10px; right:10px; background:#333333; opacity:0.8; filter:alpha(opacity=80); -ms-filter: "alpha( opacity=80 )"}
.pageTop{ width:40px; height:32px;}
.pageTop a{ width:40px; height:32px; display:block; color:#FFFFFF; background:url(../images/pagetop.png) no-repeat center center;}

/*//////////////////////////linkbox用//////////////////////////*/

.box_hover{ cursor:pointer; opacity:0.8; filter:alpha(opacity=80); -ms-filter: "alpha( opacity=80 )"}
.box_hover a{ color:#069}
.none{ text-indent:-9999px; height:0px; overflow:hidden}

/*//////////////////////////CLASS//////////////////////////*/
.mt20{ margin-top:20px}
.mb10{ margin-bottom:10px}
.mb20{ margin-bottom:20px}
.mb30{ margin-bottom:30px}
.mb40{ margin-bottom:40px}
.txtCt{ text-align:center}
.txtLt{ text-align:left}
.txtRt{ text-align:right}
.floatLt{ float:left}
.floatRt{ float:right}
.line01{ border:1px solid #CCC}
.lineBottomWh{ border-bottom:1px solid #FFFFFF;}
.lineDot{ background:url(../images/dotLine.gif) repeat-x bottom}

.f80{ font-size:80%}
.f150{ font-size:150%;
	   line-height:1.5}

.red{ color:#F00}
.blue{ color:#039}
.green{ color:#0C0}

.redbox{ background:#F00; color:#FFF;}

.none{ display:none}
.hidden{ display:none;}

.img_clear{width: initial;}

#member-favorite-page{
	margin:30px 30px;
}

.paidy-send input[type="button"]{
background: linear-gradient(135deg, #E5258C 0%, #823CD7 100%);
    border-radius: 32px;
    color: #fff;
    font: 600 18px "Noto Sans JP",Helvetica,sans-serif;
    line-height: normal;
    line-height: 21px;
    padding: 6px; 
    text-align: center;
    transition: all .2s ease-in-out;
    width: 240px;
    height: 60px;
    align-items: center;
    justify-content: center;
}

[id^="datasign_cmp"]::part(root) {
  --widget-basic-font-color: #fff !important;
  --widget-background-color: #000 !important;
  --widget-primary-font-color: #fff !important;
  --dialog-basic-font-color:#fff !important;
  --dialog-background-color: #666666 !important;
}