@charset "shift_jis";

/*-----------------------------------------------------
  ■共通
 -----------------------------------------------------*/
.inner {
	width:1000px;
	margin:0 auto;
}
.pcnone {
	display:none;
}

#logoutButton, #loginButton { display: none; }

li > ul, li > ol {
    margin-left: 0;
}
/* ---------- box-sizing ---------- */
.head_search_wrap input[name="sk"] ,
.head_search_wrap input[name="s"] ,
.drawer-menu li{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/*-----------------------------------------------------
  ■ヘッダ
 -----------------------------------------------------*/

/* ---------- ハンバーガーメニュー ---------- */
.drawer-hamburger{
	display:none;
}

/* ---------- 1行目 ---------- */
#headarea1{
	background: #842020;
	font-size:10px;
	padding:5px 0;
}
#headarea1 h1{
	display:block;
	float:left;
	color:#FFF;
}
#headarea1 .uenon{
	display:block;
	float:right;
	color:#FFF;
}
/* ---------- 送料案内 ---------- */
#headarea1 img{
	display:block;
	float:right;
}
/* ---------- ロゴ ---------- */
.head_logo{
	display:block;
	float:left;
	position:absolute;
	z-index:3;
}
/* ---------- カート ---------- */
.head_cart{
	display:block;
	position:absolute;
	z-index:3;
	right:0;
}

/* ---------- 2行目 ---------- */
#headarea2{
	padding:20px 0;
	height:50px;
}
#headarea2 .inner{
	position:relative;
}

/* ---------- サイドナビ ---------- */

#headarea3 {
	background: #EEE;
}

/* 高さ */
#headarea3,
.drawer-menu li a {
	height:70px;
}
.drawer-menu li a{
	line-height:70px;
}

/* 親のUL */
ul.drawer-menu{
	border-left:1px solid #FFF;
}
/* 親のLI */
.drawer-menu li{
	float:left;
	position:relative;
	width:160px;
	border-right:1px solid #FFF;
	text-align:center;
}
/* 親のanchor */
.drawer-menu li a{
	display: block;
	text-decoration: none;
	color:#333;
}
/* 子のUL */
.drawer-menu li ul{
	display:none;
	width:200px;
}
/* 子のLI */
.drawer-menu li ul li{
	width: 100%;
	border-bottom:1px solid #CCC;
	border-left:1px solid #CCC;
	border-right:1px solid #CCC;
	text-align:left;
	z-index: 12;
}
/* 子のanchor */
.drawer-menu li ul li a{
	padding:10px 5px;
	height:20px;
	line-height:20px;
	background: #FFF;
}
/* 親マウスオーバーの子のUL */
.drawer-menu li:hover ul{
  display: block;
}

.head_member_wrap .clearfix {
    overflow: visible;
}
/* hover */
.drawer-menu li:hover > a{
	background: #80BCA3;
	color:#FFF;
}
.drawer-menu li:hover li:first-child a{
	border-top:1px solid #CCC;
}
/* ---------- sns ---------- */
#headarea3 li.head_sns_wrap{
	float:right;
	height:70px;
	border-right:none;
}
#headarea3 .head_sns_wrap ul {
	display:block;
	margin-top:10px;
}
#headarea3 > nav > ul > li.head_sns_wrap > a{
	display:none;
}

#headarea3 .head_sns_wrap ul > li {
	width:20%;
	border:none;
	padding:0 0 2px;
	float:left;
}
#headarea3 li.head_sns_wrap a{
	background: none;
}
.head_sns_wrap img{
	width:100%;
}
/* hover */
#headarea3 .head_sns_wrap ul > li:hover > a{
	background: none;
	border-top:none;
}
#headarea3 .head_sns_wrap:hover li:first-child a{
	border-top:none;
}
/* ---------- 会員 ---------- */
#headarea3 .head_member_wrap ul {
	display:block;
}
#headarea3 > nav > ul > li.head_member_wrap > a{
	display:none;
}
.drawer-menu > li.head_member_wrap{
	position:absolute;
	top:40px;
	left:0;
	width:100%;
}
/* 商品ページ */
#FS2_body_Goods .drawer-menu > li.head_member_wrap{
	top:60px;
}
.head_member_wrap .inner{
	position:relative;
}
.head_member_box{
	margin-left:350px;
	background: url(https://www.wakibungu.com/cmnimg/head_100pt_pc.jpg) no-repeat;
}
#headarea3 .head_member_wrap li{
	float:left;
	margin-right:3px;
	margin-top: 35px;
	width:62px;
	border:none;
	height:19px;
}
.drawer-menu li.head_member_wrap ul li a{
	text-indent: 120%;
	white-space: nowrap;
	overflow: hidden;
	display:block;
	padding:0;
	background-color:transparent;
}
.head_member_wrap li.btshinki{
	background: url(https://www.wakibungu.com/cmnimg/head_btshinki_pc.jpg) no-repeat;
}
.head_member_wrap li.btmyp{
	background: url(https://www.wakibungu.com/cmnimg/head_btmyp_pc.jpg) no-repeat;
}
.head_member_wrap li a#loginButton{
	background: url(https://www.wakibungu.com/cmnimg/head_btlogin_pc.jpg) no-repeat;
}
.head_member_wrap li a#logoutButton{
	background: url(https://www.wakibungu.com/cmnimg/head_btlogout_pc.jpg) no-repeat;
}
/* カテゴリーページ */
#FS2_body_Goods[class*="FS2_body_Goods_GoodsGroupList"] .drawer-menu > li.head_member_wrap{
	top:40px;
}

/* ---------- 検索 ---------- */
.drawer-menu > .head_search_wrap{
	position:absolute;
	top:50px;
	left:0;
	width:100%;
	z-index:2;
}
/* 商品ページ */
#FS2_body_Goods .drawer-menu > .head_search_wrap{
	top:70px;
}
.head_search_wrap .inner{
	position:relative;
}
.head_search_box{
	margin-left:580px;
	position:relative;
	width:310px;
}
.head_search_wrap input[name="sk"],.head_search_wrap input[name="s"] {
	width:100%;
	height:30px;
	padding-left:5px;
	padding-right:15px;
}
.head_search_wrap input[type="image"] {
	width:18px;
	height:18px;
	position:absolute;
	top:8px;
	right:5px;
}
/* 検索切り替え */
#radio_dd,#radio_wct{
    vertical-align: middle;
}
#searchform_dd,#searchform_wct{
	float:right;
	position: relative;
}
.head_search_box label{
	display: inline-block;
	cursor: pointer;
	margin: 0 10px 0 3px;
	font-size: 12px;
	transition: .2s;
	line-height:1;
}

/* ---------- DDにCK ---------- */
input#radio_dd[type="radio"]:checked ~ div#searchform_dd{
	display:block;
}
div#searchform_wct{
	display:none;
}
/* ---------- WCTにCK ---------- */
input#radio_wct[type="radio"]:checked ~ div#searchform_wct{
	display:block;
}
input#radio_wct[type="radio"]:checked ~ div#searchform_dd{
	display:none;
}

/* ---------- 矢印 ---------- */
.drawer-menu > li > a{
 display:block;
 position: relative;
}
.drawer-menu > li > a::after{
 border-right: 2px solid #333;
 border-top: 2px solid #333;
 content: "";
 margin-left: -5px;
 position: absolute;
 transform: rotate(135deg);
 -webkit-transform: rotate(135deg);
 bottom: 10px;
 left: 50%;
 width: 10px;
 height: 10px;
}
/* hover */
.drawer-menu > li:hover > a::after{
	border-color:#FFF;
}

/* ---------- アイコン ---------- */
/* 手帳 */
.tcho:after{background: url(https://www.wakibungu.com/cmnimg/h3ic_tcho.png) no-repeat;}
/* ボールペン */
.bpen:after{background: url(https://www.wakibungu.com/cmnimg/h3ic_bpen.png) no-repeat;}
/* 万年筆 */
.fpen:after{background: url(https://www.wakibungu.com/cmnimg/h3ic_fpen.png) no-repeat;}
/* ペンケース */
.pncs:after{background: url(https://www.wakibungu.com/cmnimg/h3ic_pncs.png) no-repeat;}
/* ノート */
.note:after{background: url(https://www.wakibungu.com/cmnimg/h3ic_note.png) no-repeat;}
/* ファイル */
.file:after{background: url(https://www.wakibungu.com/cmnimg/h3ic_file.png) no-repeat;}
/* 文具製品 */
.bung:after{background: url(https://www.wakibungu.com/cmnimg/h3ic_bung.png) no-repeat;}
/* 全体設定 */
.h3ic:after{
	content:" ";
	width:30px;
	height:30px;
	background-size: contain;
	position: absolute;
	top: 5px;
	right: 5px;
}
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  ■スマホ
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

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


/*-----------------------------------------------------
  ■共通
 -----------------------------------------------------*/
#headarea3{
	display:none;
}

body.drawer{
	padding-top:42px;
}

.inner {
	width:100%;
	margin:0 auto;
}
.spnone {
	display:none;
}
.pcnone {
	display:block;
}

/* ---------- box-sizing ---------- */
.drawer-menu > li li {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/*-----------------------------------------------------
  ■STINGER 管理画面用
 -----------------------------------------------------*/
body.customize-support{
	padding-top:0;
}
body.customize-support #all-wrap{
	padding-top:42px;
}

/*-----------------------------------------------------
  ■ヘッダ
 -----------------------------------------------------*/
/* ---------- ハンバーガーメニュー ---------- */
.drawer--right .drawer-nav {
     right: -87vw;
	z-index: 103;
}
.drawer--right.drawer-open .drawer-hamburger {
    right: 87vw;
}
.drawer-nav {
    width: 87vw;
}
.drawer-hamburger{
	display:block;
	padding:10px;
	width:20px;
	z-index: 102;
}
.drawer-hamburger-icon:before {
    top: -8px;
}
.drawer-hamburger-icon:after {
    top: 8px;
}
.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
    background-color: #FFF;
}
.drawer-open .drawer-overlay {
    z-index: 101;
	background-color: rgba(0,0,0,.6);
}
.drawer-toggle.drawer-hamburger {
	box-shadow:none;
}

/* ---------- 2行目 ---------- */
#headarea2{
	background: #842020;
	padding:0;
	height:42px;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:100;
}
/* ---------- ロゴ ---------- */
#headarea2 .head_logo{
	width:83px;
	margin-top:10px;
	margin-left:10px;
}

/* ---------- カート ---------- */
#headarea2 .head_cart{
	margin-top:10px;
	margin-right:50px;
}
#headarea2 .head_cart img{
	width:23px;
}

/* ---------- 3行目 ---------- */
#headarea3 .drawer-menu > .head_member_wrap,
#headarea3 .drawer-menu > .head_search_wrap{
	position:static;
}

/* ---------- サイドナビ ---------- */
#headarea3 {
	background: #FFF;
	font-size:12px;
}
#headarea3 .drawer-menu .width100{
	width:100%;
}
/* 高さ */
.drawer-menu li a {
	height:20px;
	line-height:auto;
}
#headarea3,
#headarea3 .drawer-menu li a{
	height:auto;
	line-height:20px;
}
/* 親のUL */
ul.drawer-menu{
	border-left:none;
}
/* 親のLI */
.drawer-menu > li{
	width:100%;
	text-align:left;
	border-right:none;
}
/* 親のanchor */
.drawer-menu > li > a{
	background: #EEE;
	display:block;
	padding:5px 5px;
	text-decoration: none;
	color:#666;
}
/* 子のUL */
.drawer-menu li ul{
	display: block;
	width:100%;
}
/* 子のLI */
.drawer-menu li ul li{
	background: #FFF;
	border-bottom:1px solid #EEE;
	border-left:1px solid #EEE;
	border-right:none;
	border-left:1px solid #EEE;
	width:50%;
	height:auto;
	float:left;
}
/* 子のanchor */
.drawer-menu > li li a{
	display:block;
	padding:10px 5px;
}
/* hover */
.drawer-menu li:hover > a{
	background: #EEE;
	color:#333;
	border-bottom:none;
}
.drawer-menu li:hover li a{
	background:none;
}
.drawer-menu li:hover li:first-child a{
	border-top:none;
}
/* ---------- sns ---------- */
#headarea3 li.head_sns_wrap{
	height:auto;
}
#headarea3 li.head_sns_wrap > a{
	background: #EEE;
}
#headarea3 > nav > ul > li.head_sns_wrap > a{
	display:block;
}
#headarea3 .head_sns_wrap ul {
	margin-top:0;
}
#headarea3 .head_sns_wrap ul > li {
	width:20%;
	border:none;
	padding:0 10px;
}
.head_sns_wrap img{
	width:100%;
}

/* ---------- 会員 ---------- */
#headarea3 > nav > ul > li.head_member_wrap > a{
	display:block;
}
.head_member_box{
	background:none;
	margin-left:0;
}
#headarea3 .head_member_wrap li{
	margin-right:0;
	margin-top: 0;
	border-bottom:1px solid #EEE;
	border-left:1px solid #EEE;
	width:50%;
	height:auto;
}
#headarea3 .head_member_wrap li a{
	text-indent: 0;
	white-space: normal;
	overflow: visible;
	padding: 10px 5px;
}
.head_member_wrap li.btshinki,
.head_member_wrap li.btmyp,
.head_member_wrap li a#loginButton,
.head_member_wrap li a#logoutButton{
	background: none;
}
.head_member_wrap .clearfix {
    overflow: visible;
}
/* ---------- 検索 ---------- */
.head_search_box{
	margin:10px;
	width:auto;
	max-width:100%;
}
/* 検索切り替え */
#searchform_dd, #searchform_wct {
    float: none;
    margin-top:5px;
}

/* ---------- 矢印 ---------- */
.drawer-menu > li > a::after{
 border:none;
}

} /* /@media only screen */

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  ■スマホ 5s
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/

@media only screen and (max-width : 320px) {
#headarea3 li{
	width:100%;
}
} /* /@media only screen */