@charset "UTF-8";


body{
	min-width: 1280px;
}


/* --------------------------------------------------------------------------------
	device
-------------------------------------------------------------------------------- */
.device-sp{
	display:none;
}
.device-sp-inline{
	display:none;
}
.device-pc{
	display:block;
}
.device-pc-inline{
	display:inline;
}


/* --------------------------------------------------------------------------------
	リセット
-------------------------------------------------------------------------------- */
.common * {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	
	font-family:"游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
	font-weight: 500;
}

/* glyphicon */
.common .glyphicon:before{
	font-family: 'Glyphicons Halflings';
}

.common h1,
.common h2,
.common h3,
.common h4,
.common h5,
.common h6 {
	font-size: 1em;
}
.common ol,
.common ul{
	list-style: none;
}

img{
	max-width: 100%;
	height: auto;
}

/********** お支払い方法／配送・送料について／返品・交換について **********/
.panel-group{
	padding: 20px 0 0;
}


#wrap {
  width: 100%;
  position: relative;
  height: auto !important;
  height: 100%;
  min-height: 100%;
}


/* --------------------------------------------------------------------------------
header
-------------------------------------------------------------------------------- */
#header{
	width: 100%;
	
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	right: 0;
	
	background: #fff;
}

/********** ヘッダー内側 **********/
#header .header-inner{
}

/********** ヘッダーコンテンツ **********/
#header .h-contents{
	display: flex;
	
	width: 1230px;
	margin: 0 auto;
}

/********** 左 **********/
#header .h-left{
	display: flex;
	flex-wrap: wrap;
	
	width: 957px;
}
#header .h-left .h-left-box{
	padding: 0 0 6px;
}

/********** テキスト **********/
#header .header-inner .h-txt{
	display: flex;
	align-items: center;
	
	width: 100%;
	height: 24px;
	padding: 0 0 0 7px;
	font-size:13px;
	line-height: 1.42;
}

/********** ロゴ・電話などのレイアウト **********/
#header .h-logo-tel{
	display: flex;
	width: 630px;
}

/********** ロゴ **********/
#header .h-logo-tel .h-logo{
	width: 258px;
}
#header .h-logo-tel .h-logo a {
	display: block;
}
#header .h-logo-tel .h-logo img {
	display: block;
}

/********** 電話番号 **********/
#header .h-logo-tel .h-tel{
	display: flex;
	align-items: center;
	
	width: 370px;
	margin: auto 0 0 0;
	padding: 0 0 2px;
	line-height:1.42;
}
#header .h-logo-tel .h-tel .h-tel-num{
	padding: 0 3px 0 0;
	font-size: 15px;
}
#header .h-logo-tel .h-tel .h-tel-hours{
	font-size: 12px;
}

/********** greeging-member-stage **********/
#header .greeging-member-stage{
	width: 327px;
	padding: 23px 22px 0 0;
	text-align: right;
}

/********** テキストあいさつ **********/
#header .txt-greeging-unit{
	display: flex;
	align-items: center;
	
	width: 327px;
	padding: 0 22px 10px 0;
	text-align: right;
}
#header .txt-greeging-unit .txt-greeting{
	margin: 0 0 0 auto;
}

/********** 会員ステージ **********/
#header .fs-p-memberInfo{
	display: flex;
	justify-content: flex-end;
	
	width: 100%;
}

/********** help **********/
#header .header-inner .h-help{
	display: flex;
}
#header .h-help ul{
	display: flex;

	width: 273px;
}
#header .h-help ul li{
	display: flex;
}
#header .h-help ul li a{
	text-decoration: none;
}
#header .h-help ul li a::before{
	position: absolute;
	top: 0;
	left: 50%;
	
	display: block;
	margin: 23px 0 0 -15px;
}
#header .h-help ul li.h-help-mypage{
	width: 90px;
	border-left: solid 1px #dcdcdc;
}
#header .h-help ul li.h-help-mypage a::before{
	content: url("../images/common/h-btn-mypage.png");
}
#header .h-help ul li.h-help-contact{
	width: 90px;
	border-left: solid 1px #dcdcdc;
}
#header .h-help ul li.h-help-contact a::before{
	content: url("../images/common/h-btn-contact.png");
}
#header .h-help ul li.h-help-cart{
	width: 90px;
	border-left: solid 1px #dcdcdc;
}
#header .h-help ul li.h-help-cart a::before{
	content: url("../images/common/h-btn-cart.png");
}
#header .h-help ul li.h-help-cart a .fs-client-cart-count {
	position: absolute;
	top: 20px;
	right: 20px;
	align-items: center;
	bottom: 3em;
	justify-content: center;
	display: flex;
	width: 20px;
	height: 20px;
	margin-left: 0;
	padding: 0;
	text-align: center;
	background-color: #de5d50;
	border-radius: 100%;
	color: #FFF;
}

#header .h-help ul li a{
	position: relative;
	
	display: flex;
	justify-content: center;

	width: 100%;
	padding: 55px 0 0;
	font-size: 11px;
	color: #404040;
}

/*
ナビゲーション
-------------------- */
#header .h-nav-search{
	background: #223a70;
}
#header .h-nav-search .h-nav-search-box{
	display: flex;
	
	width: 1230px;
	margin: 0 auto;
}

/********** h-nav **********/
#header .h-nav-search .h-nav{
	width: 900px;
}
#header .h-nav-search .h-nav > ul{
	display: flex;
	height: 50px;
	
	width: 100%;
	align-items: center;
}
#header .h-nav-search .h-nav > ul > li{
	position: relative;
	margin: 0 10px 0 0;
	font-size: 15px;
	font-weight: bold;
	color: #fff;
	line-height:1.42;
}
#header .h-nav-search .h-nav > ul > li > a,
#header .h-nav-search .h-nav ul li .open-close-btn a{
	padding: 15px 18px 16px;
	color: #fff;
}
#header .h-nav-search .h-nav > ul > li:first-child > a,
#header .h-nav-search .h-nav ul li:first-child .open-close-btn a{
	padding-left: 8px;
}
#header .h-nav-search .h-nav > ul > li > a .nav-label,
#header .h-nav-search .h-nav ul li .open-close-btn a .nav-label{
	transform: none;
	opacity: 1 !important;
}

/********** ご利用ガイド：オープン・クローズ **********/
#header .h-nav ul li.h-nav-guide{
	background: url("../images/common/h-icon-menu-down.png") no-repeat 100% 50%;
}
#header .h-nav ul li.h-nav-guide .open-close-contents{
	display: none;
	
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	
	width: 260px;
	margin: 35px 0 0 -130px;
	padding: 24px 23px;
	background: #f0f0f0;
}
#header .h-nav ul li.h-nav-guide .open-close-contents::before{
	position: absolute;
	top: -16px;
	left: 50%;
	
	display: block;
	margin: 0 0 0 -10px;
	content: url("../images/common/h-icon-arr-dropdown.png");
}
#header .h-nav ul li.h-nav-guide:hover .open-close-contents{
	display: block;
}
#header .h-nav ul li.h-nav-guide .open-close-contents ul li{
	padding: 0 0 15px;
}
#header .h-nav ul li.h-nav-guide .open-close-contents ul li:last-child{
	padding: 0 0 0;
}
#header .h-nav ul li.h-nav-guide .open-close-contents ul li a{
	display: block;
	transform: none;
	opacity: 1 !important;
	font-weight: normal;
	font-size: 14px;
	color: #333;
}

/********** 検索 **********/
#header .search{
	display: flex;
}

#header .search form{
	display: flex;
}

#header .search .search-box{
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	width: 330px;
}
#header .search .search-box .txt-search input{
	display: flex;
	
	width: 295px;
	padding: 6px 10px;
	border-radius: 3px !important;
	border:none;
	line-height:1.4;
	font-size:13px;
}
#header .search .search-box .img-search input{
	display: block;
	border-radius: 2px !important;
}




/* --------------------------------------------------------------------------------
sub1
-------------------------------------------------------------------------------- */
#sub1{
	width: 260px;
	
	/*
	親要素はflex & space-betweenとなっている。
	
	2カラムのレイアウトは右にマージンを取って、端まで配置、
	1カラムの「ショッピングカートログイン(PC)」等はsub1が無いため、
	メインの左右のマージンがautoとなりこちらは中央配置となる
	*/
	margin: 0 50px 0 0;
}

/********** バナー **********/
#sub1 .bnrs-1{
	padding: 0 0 18px;
}
#sub1 .bnrs-1 ul li{
	padding: 0 0 10px;
}
#sub1 .bnrs-1 ul li a{
	display: block;
}
#sub1 .bnrs-1 ul li a img{
	display: block;
}

/********** 定番ビール **********/
#sub1 .teiban{
	margin: 0 0 33px;
}

/* 見出し */
#sub1 .teiban .heading{
	border-bottom: solid 2px #333;
	font-size: 18px;
	font-weight: bold;
	color: #000;
}

/* リスト */
#sub1 .teiban ul{
}
#sub1 .teiban ul li{
	padding: 9px 0 10px;
	border-bottom: solid 1px #999;
}
#sub1 .teiban ul li a{
	display: flex;

	width: 100%;
	color: #333;
}
#sub1 .teiban ul li a .bnr{
	width: 70px;
	display: block;
}
#sub1 .teiban ul li a .bnr img{
	display: block;
}
#sub1 .teiban ul li a .txt{
	display: block;
	width: 190px;
}
#sub1 .teiban ul li a:hover,
#sub1 .teiban ul li a:active{
	text-decoration: none;
}
#sub1 .teiban ul li a .txt{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 5px 0;
}
#sub1 .teiban ul li a .txt .beer-label{
	display: block;
	width: 100%;
	line-height: 1.2;
	font-size: 16px;
}
#sub1 .teiban ul li a .txt .ruby{
	display: block;
	width: 100%;
	line-height: 1.2;
	font-size: 12px;
}


/********** その他の商品 **********/
#sub1 .other-item{
	margin: 0 0 30px;
}

/* 見出し */
#sub1 .other-item .heading{
	margin: 0 0 14px;
	border-bottom: solid 2px #333;
	font-size: 18px;
	font-weight: bold;
	color: #000;
}

#sub1 .other-item ul li{
	padding: 0 0 7px;
}
#sub1 .other-item ul li a{
	display: block;
	font-size: 16px;
	color: #333;
}


/********** 価格帯から探す **********/
#sub1 .price-list{
	margin: 0 0 20px;
}

/* 見出し */
#sub1 .price-list .heading{
	margin: 0 0 14px;
	border-bottom: solid 2px #333;
	font-size: 18px;
	font-weight: bold;
	color: #000;
}

#sub1 .price-list ul li{
	padding: 0 0 7px;
}
#sub1 .price-list ul li a{
	display: block;
	font-size: 16px;
	color: #333;
}

/********** バナー **********/
#sub1 .bnrs-2{
	padding: 0 0 18px;
}
#sub1 .bnrs-2 ul li{
	padding: 0 0 10px;
}
#sub1 .bnrs-2 ul li a{
	display: block;
}
#sub1 .bnrs-2 ul li a img{
	display: block;
}


/********** カレンダー **********/
#sub1 .calendar .heading{
	padding: 0 0 13px;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	color: #333;
}
#sub1 .calendar table{
	border: solid 1px #ddd;
	line-height: 2.05;
	font-size: 16px;
}
#sub1 .calendar .calendar-box{
	padding: 0 0 20px;
}
#sub1 .calendar .calendar-box:last-child{
	padding: 0 0 10px;
}
#sub1 .calendar table caption{
	padding: 0 0;
	line-height: 2.1;
	text-align: center;
	color: #fff;
	background: #333;
}
#sub1 .calendar table th{
	width: calc(100% / 7);
	padding: 0;
	border: solid 1px #ddd;
	text-align: center;
	background: #fff;
}
#sub1 .calendar table td{
	width: calc(100% / 7);
	padding: 0;
	border: solid 1px #ddd;
	text-align: center;
}
#sub1 .calendar table td.close-shop{
	background: #f2dede;
}
#sub1 .calendar .shop-close-txt{
	padding: 0 0 0 13px;
	position: relative;
	font-size: 15px;
}
#sub1 .calendar .shop-close-txt::before{
	position: absolute;
	left: 0;
	top: 4px;
	
	content: '';
	
	display: block;
	width: 11px;
	height: 11px;
	
	background: #f2dede;
}


/* --------------------------------------------------------------------------------
footer
-------------------------------------------------------------------------------- */
#footer{
	padding: 130px 0 0;
}

/********** フッター内側 **********/
#footer .footer-inner{
	background: #223a70;
}

/********** フッターコンテンツ **********/
#footer .f-contents{
	display: flex;
	
	width: 1230px;
	margin: 0 auto;
	padding: 50px 0;
}

/********** ロゴ・住所 **********/
#footer .logo-address{
	width: 530px;
}

/********** ロゴ **********/
#footer .f-contents .logo{
	padding: 0 0 15px;
}
#footer .f-contents .logo img{
	display: block;
}
#footer .f-contents .address{
	line-height: 1.9;
	color: #fff;
}
#footer .f-contents .address a{
	color: #fff;
}

/********** fix-right **********/
#footer .fix-right{
	position: fixed;
	right: 0;
	bottom: 30px;
	z-index: 100;
	
	display: flex;
	flex-wrap: wrap;
	
	width: 200px;
}

/********** 新規会員登録 **********/
#footer .fix-right .fix-btn-add-member{
	width: 200px;
	margin: 0 0 20px;
}
#footer .fix-right .fix-btn-add-member a{
	display: block;
	margin: 0 0 0 auto;
}
#footer .fix-right .fix-btn-add-member a img{
	display: block;
}

/********** pagetop **********/
#footer .fix-right .fix-btn-pagetop{
	width: 60px;
	margin: 0 20px 0 auto;
}
#footer .fix-right .fix-btn-pagetop a{
	display: block;
}
#footer .fix-right .fix-btn-pagetop a img{
	display: block;
}

/********** サイトマップ **********/
#footer .f-contents .sitemap .cols{
	display: flex;
	width: 100%;
	padding: 10px 0 0;
}
#footer .f-contents .sitemap .cols .col{
	width: 240px;
}
#footer .f-contents .sitemap .cols .col ul li{
	padding: 0 0 10px;
}
#footer .f-contents .sitemap .cols .col ul li a{
	display: block;
	color: #fff;
}

/********** コピーライト **********/
#footer .copyright{
	padding: 18px 0;
	text-align: center;
}















/* --------------------------------------------------------------------------------
共通
-------------------------------------------------------------------------------- */
.table.table-bordered.table-shop-calendar .text-center.title {
	background: #555 !important;
	color: #FFF;
}
.table.table-bordered.table-shop-calendar{
	font-size: 16px;
}










.fs-l-main #right-column {
  width: 100%;
  float: left;
  margin-left: -208px;
  padding-left: 228px;
}

.fs-l-main #one-column {
  width: 100%;
  margin: 0;
}

@media only screen and (max-width: 768px) {
  .fs-l-main #right-column {
    /* スマホのみ */
    margin: 0;
    padding: 0 15px;
  }
}
.fs-l-main #right-column .page-link {
  display: block;
  margin-top: -176px;
  padding-top: 176px;
}

/* 追加CSS　*/
/* 上書き　*/
.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
    display: block;
    width: 100%;
    height: auto;
}

input[type="radio"] {
	display:none;
}
input[type="checkbox"] {
    width:30px;
    height:30px;
}
select {
    height:30px;
}

.img-responsive-max100 {
    display: block;
    max-width: 100%;
    height: auto;
}

/* フォントカラー */
.text-red {
	color:#FF0000;
}


/*  見出し　*/
.m_h4 {
  font-size: 1.5rem;
  position: relative;
  padding: .75em 1em .75em 2em;
  border: 1px solid #ccc;
  border-top: 3px solid #a41801;
  background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
  background: linear-gradient(to bottom, #fff 0%, #f0e9d6 100%);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
}
.m_h4:after  {
	position: absolute;
	top: 1em;
	left: .6em;
	z-index: 2;
	content: '';
	width: 10px;
	height: 10px;
	border: 3px solid #a41801;
	border-radius: 100%
}

/* SNS */
.facebook {
	margin-top:20px;
}
/*2017/9/21追加*/

.img-responsive-max100 {
    display: block;
    max-width: 100%;
    height: auto;
}

.shopinfo-area {
	margin-top:20px;
}

/* アラート追加　*/
.alert-postage {
	margin-top:20px;
    color: #ff0000;
    background-color: #fff480;

	border:#ff0037 solid 2px;
}

/* 半角英数折り返し処理 */
.breakall {
    word-break: break-all;
}

/* カレンダー */
.table-shop-calendar>tbody>tr>td {
	padding:5px;
}

/*B2B新規登録*/
.b2b_register{
    margin:10px 0 15px;
}

/*クレジット支払*/
.one-column form button.komoju-button-el{
    font-size:25px !important;
    color:red !important;
}

/*返品・注意*/
.caution {
    margin-top:30px;

}
.caution h5{
    color:#ff4838;
}

/* クレジットカード決済時の注意 */
.modal-middle {
	/* モーダルウィンドウの縦表示位置を調整 */
	margin: 5% auto;
}

.modal-img_footer {
	/* 表示予定のテキストとボタンを中央揃え */
	padding: .5em;
	text-align: center;
}