@charset "UTF-8";
/*--------------------------------------
基本設定
---------------------------------------*/

body {
font-family: "Arial","Helvetica Neue","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka, "メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
-webkit-text-size-adjust:100%;
font-size: 14px;
line-height: 1.6;
background: #fff;
}
body.iframeInner{
min-width:1px;
}
li, p, a, dl dt, dl dd {
color: #000;
}

a:hover{
color:#f60;
}

/*--------------------------------------
レイアウト
---------------------------------------*/

.wrapperAll {
position: relative;
}
.wrapper {
position: relative;
}
.l_sideArea {
float: left;
width: 200px;
margin-top: 104px;
}
.l_mainArea {
overflow: hidden;
z-index: 0;
}
@media only screen and (max-width: 979px) {

.l_sideArea {
width: 100%;
padding-bottom: 0;
margin-bottom: 0;
margin-top: 0;
}
.l_mainArea {
padding: 75px 0 0 0;
}
.pcMenu {
display: none;
}
.l_mainArea {
margin: 0;
}
}
@media only screen and (max-width: 979px) {
/* -----------------------------------
* Slidebars
* Version 0..10
* http://plugins.adchsm.me/slidebars/
*
* Written by Adam Smith
* http://www.adchsm.me/
*
* Released under MIT License
* http://plugins.adchsm.me/slidebars/license.txt
*/

html, body, .sb-site, .sb-site-container, .sb-slidebar {
/* Set box model to prevent any user added margins or paddings from altering the widths or heights. */
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
}
html, body {
width: 100%;
overflow-x: hidden; /* Stops horizontal scrolling. */
}
html {
height: 100%; /* Site is as tall as device. */
}
body {
min-height: 100%;
height: auto;
position: relative; /* Required for static Slidebars to function properly. */
}
html.sb-scroll-lock.sb-active:not(.sb-static) {
overflow: hidden; /* Prevent site from scrolling when a Slidebar is open, except when static Slidebars are only available. */
}
.sb-site, .sb-site-container {
/* You may now use class .sb-site-container instead of .sb-site and use your own id. However please make sure you don't set any of the following styles any differently on your id. */
width: 100%;
position: relative;
z-index: 1; /* Site sits above Slidebars */
background-color: #ffffff; /* Default background colour, overwrite this with your own css. I suggest moving your html or body background styling here. Making this transparent will allow the Slidebars beneath to be visible. */
}
.sb-slidebar {
height: 100%;
overflow-y: auto; /* Enable vertical scrolling on Slidebars when needed. */
position: fixed;
top: 0;
z-index: 0; /* Slidebars sit behind sb-site. */
display: none; /* Initially hide the Slidebars. Changed from visibility to display to allow -webkit-overflow-scrolling. */
background-color: #222222; /* Default Slidebars background colour, overwrite this with your own css. */
-webkit-transform: translate(0px); /* Fixes issues with translated and z-indexed elements on iOS 7. */
}
.sb-left {
left: 0; /* Set Slidebar to the left. */
}
.sb-right {
right: 0; /* Set Slidebar to the right. */
}
html.sb-static .sb-slidebar,
.sb-slidebar.sb-static {
position: absolute; /* Makes Slidebars scroll naturally with the site, and unfixes them for Android Browser < 3 and iOS < 5. */
}
.sb-slidebar.sb-active {
display: block; /* Makes Slidebars visibile when open. Changed from visibility to display to allow -webkit-overflow-scrolling. */
}
.sb-style-overlay {
z-index: 9999; /* Set z-index high to ensure it overlays any other site elements. */
}
.sb-momentum-scrolling {
-webkit-overflow-scrolling: touch; /* Adds native momentum scrolling for iOS & Android devices. */
}
.sb-slide, .sb-site, .sb-site-container, .sb-slidebar {
-webkit-transform:translate(0px);
   -moz-transform:translate(0px);
     -o-transform:translate(0px);
        transform:translate(0px);
-webkit-transition: -webkit-transform 300ms ease;
   -moz-transition: -moz-transform 300ms ease;
     -o-transition: -o-transform 300ms ease;
        transition: transform 300ms ease;
-webkit-transition-property: -webkit-transform, right, left ; /* Add left/right for Android < 4.4. */
-webkit-backface-visibility: hidden; /* Prevents flickering. This is non essential, and you may remove it if your having problems with fixed background images in Chrome. */
}
.sb-hide { 
display: none; /* Optionally applied to control classes when Slidebars is disabled over a certain width. */
}
.spMenu.sb-active {
display: block;
float:right;
}
.overlay {
z-index: 200;
position: fixed;
top: 0;
right: 0;
right: 264px\0;
right: 264px\9;
/*left: 0;
left: 264px\0;
left: 264px\9;*/
width: 100%;
height: 120%;
background-color: rgba(0,0,0,0.5);
}
}
/*--------------------------------------
ヘッダー
---------------------------------------*/

.headerMenu {
display: none;
}
.l_header {
position: absolute;
top: 0;
left: 0;
padding: 27px 0 0 25px;
z-index: 1102;
}
.logo a {
display: none;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
height: 49px;
}

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

.l_header {
width: 100%;
background: #fff;
position: fixed;
top: 0;
right: 0;
/*left: 0;*/
padding: 14px 0 13px;
border-bottom: solid 1px #eaeaea;
z-index: 1102;
background:rgba(255,255,255,0.9);/*20171107追加*/
}
.logo a {
display:block;
background: url(../img/logo_sp.png) no-repeat;
background-size: contain;
width: 146px;
margin: 0 auto;
}
.headerMenu {
display: block;
position: absolute;
top: 0;
right: 0;
/*left: 20px;*/
cursor: pointer;
padding: 17px 20px 15px 0;
}
}

/*--------------------------------------
サイドメニュー
---------------------------------------*/

.searchBalloon {
display: none;	
}
.spMenu {
background: url(../img/bg_sidearea.gif) repeat;
display: none;
width: 264px;
}
.sideSearchArea {
position: relative;
overflow: hidden;
background: #fff;
width: 137px;
margin: 0 auto 8px;
padding: 4px 5px;
border: solid 1px #e2e2e2;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
}
.sideSearchArea__txt {
float: left;
width: 110px;
border: none;
padding: 3px
}
.sideSearchArea__btn {
vertical-align: middle;
padding: 3px 0;
}
.sideLanguageArea {
text-align: center;
}
.sideSnsArea {
text-align: center;
letter-spacing: -.40em;
margin: 0 auto 5px;
}
.sideSnsArea li {
display: inline-block;
letter-spacing: normal;
*display: inline;
*zoom: 1;
margin: 0 4px 0 5px;
}
.sideSnsArea li img {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border: 2px solid #f8ecd5;
}
.sideSnsArea li a img:hover{
border: 2px solid #ffe100;
}
.sideBnrArea > li {
margin: 0 auto 10px;
width: 165px;
height: auto;
    padding: 0;
}
.sideBnrArea > li a {
    display: block;
border: 2px solid #f8ecd5;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
    overflow: hidden;
}
.sideBnrArea > li img {
width: 100%;
vertical-align: bottom;
}
.sideBnrArea > li a:hover {
border: 2px solid #ffe100;
}

#donkisan{
width: 165px;
margin: 0 auto 25px;
background: url(../../img/donkisan_over.png) no-repeat;
background-size: contain;
}
#donkisan img{
	width:100%;
}
#donkisan img:hover{
	opacity:0.0;
}
@media only screen and (max-width: 979px) {

.sideMyshopAera {
display: none;
}
.spMenu {
-webkit-overflow-scrolling: touch;
}
.spMenu .gNav {
margin: 20px auto 24px;
border-top: solid 1px #e2d8c1;
}
.spMenu .gNav > li {
border-bottom: solid 1px #e2d8c1;
}
.spMenu .gNav > li > a {
display: block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.spMenu .gNav__search {
background: url(../img/icon_gnav_search_sp.gif) no-repeat 62px center;
background-size: 44px 44px;
}
.spMenu .gNav__search a {
padding: 16px 0 16px 0;
background: url(../img/btn_gnav_search_sp.png) no-repeat 117px center;
background-size: 77px 25px;
height: 39px;
}
.spMenu .gNav__search > a:hover {
background: url(../img/btn_gnav_search_sp.png) no-repeat 117px center;
background-size: 77px 25px;
}
	
.spMenu .gNav__flier {
background: url(../img/icon_gnav_flier_sp.gif) no-repeat 64px center;
background-size: 40px 44px;
}
.spMenu .gNav__flier a {
padding: 16px 0 16px 0;
background: url(../img/btn_gnav_flier_sp.png) no-repeat 117px center;
background-size: 76px 23.5px;
height: 39px;
}
.spMenu .gNav__flier > a:hover {
background: url(../img/btn_gnav_flier_sp.png) no-repeat 117px center;
background-size: 76px 23.5px;
}
	
.spMenu .gNav__majica {
background: url(../img/icon_gnav_majica_sp.png) no-repeat 64px center;
background-size: 35px 35px;
}
.spMenu .gNav__majica a {
padding: 16px 0 16px 0;
background: url(../img/btn_gnav_majica_sp.png) no-repeat 115px center;
/*background-size: 77px 39px;*/
background-size: 76.5px 43.5px;
height: 39px;
}
.spMenu .gNav__majica > a:hover {
background: url(../img/btn_gnav_majica_sp.png) no-repeat 115px center;
background-size: 76.5px 43.5px;
}
	
.spMenu .gNav__jkakaku {
background: url(../img/icon_gnav_jkakaku_sp.gif) no-repeat 64px center;
background-size: 35px 35px;
}
.spMenu .gNav__jkakaku a {
padding: 16px 0 16px 0;
background: url(../img/btn_gnav_jkakaku_sp.png) no-repeat 115px center;
/*background-size: 77px 39px;*/
background-size: 77px 42px;
height: 39px;
}
.spMenu .gNav__jkakaku > a:hover {
background: url(../img/btn_gnav_jkakaku_sp.png) no-repeat 115px center;
background-size: 77px 42px;
}
	
.spMenu .gNav__products a {
background: url(../img/btn_gnav_products_sp.png) no-repeat 103px center;
background-size: 62px 39px;
height: 39px;
}
.spMenu .gNav__products a:hover {
background: url(../img/btn_gnav_products_sp.png) no-repeat 103px center;
background-size: 62px 39px;
}
.spMenu .gNav__service a {
background: url(../img/btn_gnav_service_sp.png) no-repeat 103px center;
background-size: 62px 39px;
height: 39px;
}
.spMenu .gNav__service a:hover {
background: url(../img/btn_gnav_service_sp.png) no-repeat 103px center;
background-size: 62px 39px;
}
.spMenu .gNav__news a {
background: url(../img/btn_gnav_news_sp.png) no-repeat 108px center;
background-size: 51px auto;
height: 39px;
}
.spMenu .gNav__news a:hover {
background: url(../img/btn_gnav_news_sp.png) no-repeat 108px center;
background-size: 51px auto;
}
.spMenu .gNav__company {
background: url(../img/icon_gnav_window_sp.png) no-repeat 178px center;
background-size: 10px 10px;
}
.spMenu .gNav__company a {
background: url(../img/btn_gnav_company_sp.png) no-repeat 90px center;
background-size: 84px 39px;
height: 39px;
}
.spMenu .gNav__company a:hover {
background: url(../img/btn_gnav_company_sp.png) no-repeat 90px center;
background-size: 84px 39px;
}
.spMenu .gNav__recruit {
background: url(../img/icon_gnav_window_sp.png) no-repeat 168px center;
background-size: 10px 10px;
}
.spMenu .gNav__recruit a {
background: url(../img/btn_gnav_recruit_sp.png) no-repeat 103px center;
background-size: 62px 39px;
height: 39px;
}
.spMenu .gNav__recruit a:hover {
background: url(../img/btn_gnav_recruit_sp.png) no-repeat 103px center;
background-size: 62px 39px;
}
.sideSearchArea {
width: 190px;
}
.sideSearchArea__txt {
width: 160px;
}
.sideBnrArea > li {
width: 200px;
}
.spMenu .l_sideMenu {
padding-bottom: 30px;
background: url(../img/bg_sidearea.gif) repeat;
}
.followMenu {
display: none !important;
}
.sideMyshopAera__shop__delete > img{
vertical-align:-15%;
}
}

/*--------------------------------------
共通クラス
---------------------------------------*/


/* SNSエリア
---------------------------------*/
.snsArea {
letter-spacing: -.40em;
}
.snsArea li {
display: inline-block;
letter-spacing: normal;
*display: inline;
*zoom: 1;
margin: 0 4px 0 5px;
}
.snsArea li:first-child {
margin-left:0;
}
.snsArea li:last-child {
margin-right:0;
}

.fb_iframe_widget > span {
vertical-align: baseline !important;
}
.fb_iframe_widget span {height: 20px; z-index: 0; overflow: hidden;}
.tablet .twitter-tweet-button{
/*	position:static !important;*/
max-height:30px;
}


/* 検索窓
---------------------------------*/
.searchForm{
 display:inline-block;
 *display:inline;
 *zoom:1;
 background:#fff;
 border:solid 1px #e2e2e2;
 border-radius:5px;
 padding-right:10px;
}
.searchForm__input{
display:inline-block;
 *display:inline;
 *zoom:1;
border:none;
background:none;
vertical-align:middle;
}
.searchForm__btn{
display:inline-block;
*display:inline;
*zoom:1;
vertical-align:middle;
}

/*言語選択*/

.choiceLanguage {
text-align: center;
margin-bottom: 20px;
}
.choiceLanguage .easy-select-box {
width: 147px;
}
.choiceLanguage .esb-displayer {
background: url(../img/bg_language.png) no-repeat left top;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
border: none;
padding: 0;
height: 30px;
}
.choiceLanguage .esb-displayer.on {
background: url(../img/bg_language_on.gif) no-repeat left top;
}
.choiceLanguage .esb-dropdown {
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px;
-ms-border-radius: 0 0 5px 5px;
}
.choiceLanguage .esb-item {
border: none;
font-size: 86%;
padding: 4px 0;
}
.choiceLanguage .esb-item:first-child {
background: #000;
display: none;
}

.choiceLanguage_sp , .choiceLanguage_sp2{
text-align: center;
margin-bottom: 10px;
}
.choiceLanguage_sp2{
margin-bottom: 0;
}
.choiceLanguage_sp .easy-select-box ,.choiceLanguage_sp2 .easy-select-box {
width: 200px;
}
.choiceLanguage_sp .esb-displayer ,.choiceLanguage_sp2 .esb-displayer {
background: url(../img/bg_language_sp.gif) no-repeat left top;
background-size: 200px auto;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
border: none;
padding: 0;
height: 30px;
}
.choiceLanguage_sp .esb-displayer.on ,.choiceLanguage_sp2 .esb-displayer.on {
background: url(../img/bg_language_sp_on.gif) no-repeat left top;
background-size: 200px auto;
}
.choiceLanguage_sp .esb-dropdown ,.choiceLanguage_sp2 .esb-dropdown {
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px;
-ms-border-radius: 0 0 5px 5px;
}
.choiceLanguage_sp .esb-item ,.choiceLanguage_sp2 .esb-item {
font-size: 86%;
padding: 8px 0;
}
.choiceLanguage_sp .esb-item:first-child ,.choiceLanguage_sp2 .esb-item:first-child {
background: #000;
display: none;
}
@media only screen and (max-width: 979px) {
.choiceLanguage_sp ,.choiceLanguage_sp2 {
margin: 0 auto 15px;
width: 200px;
position: relative;
}
.choiceLanguage_sp2 {
margin: 0;
width: 100px;
    display: block;
    position: absolute;
    top: -3px;
    left: 10px
}
.choiceLanguage_sp__ttl ,.choiceLanguage_sp2__ttl {
background: url(../img/bg_language_sp.gif) no-repeat left top;
background-size: 200px auto;
width: 200px;
height: 31px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
}
.choiceLanguage_sp2__ttl {
/*height: initial;*/
width: 60px;
height: 45px;
text-indent: 1000%;
background: url(../img/bg_language_sp2.png) no-repeat left top;
background-size:60px auto;
border-radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;

}
.choiceLanguage_sp__ttl.on ,.choiceLanguage_sp2__ttl.on {
background: url(../img/bg_language_sp_on.gif) no-repeat left top;
background-size: 200px auto;
}
.choiceLanguage_sp2__ttl.on {
background: url(../img/bg_language_sp2_on.png) no-repeat left top;
background-size: 60px auto;
}
.choiceLanguage_sp__list ,.choiceLanguage_sp2__list {
box-shadow:rgba(0, 0, 0, 0.1) 0px 3px 5px 1px;
-webkit-box-shadow:rgba(0, 0, 0, 0.1) 0px 3px 5px 1px;
-moz-box-shadow:rgba(0, 0, 0, 0.1) 0px 3px 5px 1px;
display: none;
width: 200px;
position: absolute;
top: 30px;
left: 0;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px;
-ms-border-radius: 0 0 5px 5px;
z-index: 1;
}
.choiceLanguage_sp2__list {
top: 56px;
}
.choiceLanguage_sp__itme a ,.choiceLanguage_sp2__itme a {
display: block;
padding: 8px 10px 10px;
background: url(../img/icon_cmnselect_arrow_sp.png) no-repeat 15px center;
background-size: 3px 5px;
background-color: #fff;
font-size: 86%;
border-bottom: solid 1px #ebebeb;
text-decoration: none;
}
.choiceLanguage_sp__itme:last-child a ,.choiceLanguage_sp2__itme:last-child a {
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px;
-ms-border-radius: 0 0 5px 5px;
border: none;
}
}

/*--------------------------------------
共通ヘッダ
---------------------------------------*/

.donkiHeader{
background:url(../img/cmn_header_bg.gif) repeat-x #f7ecd2;
min-width:980px;
height:auto;
text-align:center;
position:relative;
z-index:10;
}
.donkiHeader__inner{
width:980px;
text-align:left;
margin:auto;
*zoom:1;
border-left:solid 1px #e5dcc9;
}
.donkiHeader__inner:before, .donkiHeader__inner:after{
display:table;
}
.donkiHeader__inner:after{
content:" ";
clear:both;
}
h1.donkiHeader__logo{
float:left;
margin:8px 0 0;
padding:0;
width:137px;
height:auto;
line-height:1;
font-size:100%;
text-align:center;
}
.donkiHeader__logo img{
border:none;
vertical-align:bottom;
}
.donkiHeader__nav{
float:right;
width:840px;
height:53px;
display:table;
border-left:solid 1px #e5dcc9;
}
.donkiHeader__btn{
display:table-cell;
text-align:center;
vertical-align:middle;
width:12.5%;
text-decoration:none;
font-weight:bold;
line-height:1.4;
position:relative;
border-right:solid 1px #e5dcc9;
}
.donkiHeader__btn:hover{
background:url(../img/bg_gnav_on.gif);
color:#000;
}
.donkiHeader__btn--store:before{
content:url(../img/line_yellow.png);
position:absolute;
bottom:9px;
left:17px;
line-height:2px;
}
.donkiHeader__btn--chirashi:before{
content:url(../img/line_pink.png);
position:absolute;
bottom:9px;
left:17px;
line-height:2px;
}
.donkiHeader__btn--products:before{
content:url(../img/line_blue.png);
position:absolute;
bottom:9px;
left:17px;
line-height:2px;
}
.donkiHeader__btn--out:before{
content:url(../img/icon_win.png);
position:absolute;
top:8px;
right:5px;
line-height:2px;
}

@media screen and (max-width: 979px) {
.l_mainArea .donkiHeader{
	display:none;
}
}