@charset "UTF-8";


/* =======================================================================
CSSの名前：style.css 
最終更新日時：2012/2/15
--------------------------------------------------------------------------

/* =================================================================
3.コンテナ・サイドバー・メインコンテンツ
使用ファイル：すべてのファイル
=================================================================*/
/* container - サイドバー・メインコンテンツを格納するコンテナ
-------------------------------------------------------------*/
#container{ width: 100%;}
#container:after {content: ""; clear: both; display: block;}/* clearfix */
@media screen and (max-width: 413px) {
}
/* sidebar - コンテナ内サイドバー
-------------------------------------------------------------*/
#sidebar{display: none!important;}

/* hbmenu - スマホ用ハンバーガーメニュー
-------------------------------------------------------------*/
#hbmenu{display:inherit!important;}

#floating-menu.sp{display:block;}
header.pc{display:none;}
/* bager menu */
 
#hbmenu #navi {
  transition: all .6s;
  overflow-y: auto;
  padding-top: 40px;
  width: 300px;
  height: 100vh;
  z-index: 200;
  top: 0;
  right: -320px;
  background-color: #fff;
  position: fixed;
}
 
#hbmenu .nav_btn {
  width: 44px;
  height: 44px;
  z-index: 300;
  top: 7px;
  right: 7px;
  cursor: pointer;
  position: absolute;
}
 
.hamburger_line {
  transition: all .6s;
  width: 34px;
  height: 2px;
  left: 5px;
  background-color: #000;
  position: absolute;
}
 
.hamburger_line1 { top: 10px; }
.hamburger_line2 { top: 21px; }
.hamburger_line3 { top: 32px; }
 
.nav_bg {
  opacity: 0;
  transition: all .6s;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  top: 0;
  left: 0;
  visibility: hidden;
  background-color: #000;
  cursor: pointer;
  position: fixed;
}
 
/* 表示された時用のCSS */
.nav_open #hbmenu #navi { right: 0; }
 
.nav_open .nav_bg {
  opacity: .8;
  visibility: visible;
}
 
.nav_open .hamburger_line1 {
  transform: rotate(45deg);
  top: 20px;
}
 
.nav_open .hamburger_line2 {
  width: 0;
  left: 50%;
}
 
.nav_open .hamburger_line3 {
  transform: rotate(-45deg);
  top: 20px;
}


/* main - コンテナ内メインコンテンツ
-------------------------------------------------------------*/
#main{float: none; width: 100%; padding-bottom: 20px;}
#main #ext {
    padding: 20px 4vw;
    font-size: 0.9rem;
}


/* #main.no-sidebar - サイドバーの無いメインコンテンツ
-------------------------------------------------------------*/
#main.no-sidebar{float: none !important; width: 100% !important;margin: auto !important;}


/* #main.cart - カートフロー中のメインコンテンツ
-------------------------------------------------------------*/
#main.cart{float: none; width: 100%; min-height: 500px;padding: 30px 4vw;}

/* =================================================================
4.ヘッダ
使用ファイル：common/header.xhtml
=================================================================*/

/* preview - プレビュー時に表示するエリア
-------------------------------------------------------------*/
#preview{padding: 5px; border-bottom: 1px solid #CCC; background: #1C8600; color: #FFF; font-size: 80%; text-align: center;}
#preview table{width: 800px; margin: auto;}
#preview .ico{width: 20%; padding-right: 10px; text-align: right;}
#preview .content{text-align: left;}

/* header - ヘッダ
-------------------------------------------------------------*/
#header .inner{ width: 100%;  margin: auto;}
#header .inner:after {content: ""; clear: both; display: block;}/* clearfix */

/* search - 商品検索窓
-------------------------------------------------------------*/
#search{float: right; width: 209px;}


/* menu - メニュー
-------------------------------------------------------------*/
#menu{height: 40px; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC;}
#menu .inner{display: block; width: 100%; margin: auto;}

/* =================================================================
5.サイドバー
使用ファイル：common/sidebar.xhtml
=================================================================*/
/* login - ログイン枠
-------------------------------------------------------------*/
#login{width: 100%; margin-bottom: 60px;}


/* cart - 買い物かごの中身確認・買い物かごへ
-------------------------------------------------------------*/
#cart{width: 100%; margin-bottom: 60px;}


/* category - 商品カテゴリ
-------------------------------------------------------------*/
#category{width: 100%; margin-bottom: 60px;}



/* magazine - メールマガジン枠
-------------------------------------------------------------*/
#magazine{width: 100%; margin-bottom: 60px;}


/* coupon - クーポン
-------------------------------------------------------------*/
#coupon{width: 100%; margin-bottom: 60px;}


/* calendar - カレンダー
-------------------------------------------------------------*/
#calendar{
	width: 100%;
    margin-bottom: 10px;
    background: #fff;
    padding-bottom: 5px;
}



/* =================================================================
7.トップページ
使用ファイル：top.xhtml
=================================================================*/
/* mainvisual - メインビジュアル
-------------------------------------------------------------*/
#mainvisual img{display: block;}

/* topics - トピックス
-------------------------------------------------------------*/
#topics{margin-bottom: 20px; width: 100%;}


/* new - 新着商品
-------------------------------------------------------------*/
#new{margin-bottom: 20px; width: 100%;}


/* recommend - おすすめ商品
-------------------------------------------------------------*/
#recommend{margin-bottom: 20px; width: 100%;}


/* ranking - 人気商品ランキング
-------------------------------------------------------------*/
#ranking{margin-bottom: 20px; width: 100%;}


/* itemAccessLog - 閲覧履歴
-------------------------------------------------------------*/
#itemAccessLog{margin-bottom: 20px; clear: both;}



/* =================================================================
10.フッタ
使用ファイル：common/footer.xhtml
=================================================================*/
/* backtotop */
#topBtn{position:fixed; bottom:10px;right: 10px; /*display:block;*/display:none;z-index: 22;}
#topBtn a{width:45px; height:45px; display:block;}


/*-----------------------------------------------------*/
#cartFlow {width:100%;}
.buttonarea a.button {margin:0 auto; width:100%;}