@charset "utf-8";
@media screen and (max-width: 1230px) {
		/* ======================================================

Tablet

====================================================== */
		h1, h2, h3, h4, h5, h6 {
				font-size: 1.4rem;
				font-weight: bold;
		}
		p, li, dt, dd, th, td, figcaption {
				font-size: 1.4rem;
		}
		.pc {
				display: none;
		}
		.tablet {
				display: block !important;
		}
		/* ======================================================

（Tablet）共通　ココンテンツ間のスペース

====================================================== */
		#informaiton, #floorGuide, #firstFloor, #upstairs, #event, #instaArea, #lineUp, #access, #message {
				margin-top: 50px;
		}
		/* ======================================================

（Tablet）共通　見出し

====================================================== */
		/*（Tablet）筆記体の文字*/
		.eyeCatch {
				font-size: 2.7rem;
				margin-bottom: 15px;
		}
		/*（Tablet）タイトル（筆記体の文字の下）*/
		.eyeCatch + h2 {
				font-size: 2.8rem;
				margin-bottom: 45px;
		}
		/*（Tablet）タイトルの下の飾り線*/
		.eyeCatch + h2::before {
				width: 20px;
				bottom: -15px;
		}
		/* ======================================================

（Tablet）メインイメージ（歴史写真）

====================================================== */
		/*（Tablet）ロゴ*/
		h1 {
				width: 20%;
		}
		/*（Tablet）コピー*/
		header p {
				width: 68.75%;
				margin-top: 0px;
		}
		header li {
				margin-right: 20px;
		}
		/* ======================================================

（Tablet）ニュースページ

====================================================== */
		#news header {
				padding: 30px 0;
				margin-bottom: 50px;
		}
		/*（Tablet）ロゴ*/
		#news h1 {
				width: 17%;
		}
		/*（Tablet）一覧ページタイトル*/
		#news h2 {
				font-size: 2.1rem;
		}
		#news .newsWrap {
				margin-bottom: 50px;
		}
		.backBTN {
				margin-top: 30px;
		}
		.newsDetailArea {
				margin: 0 auto 50px;
		}
		.newsDetailArea h2 {
				font-size: 1.8rem;
		}
		.newsDetailArea #up_ymd {
				font-size: 1.4rem;
		}
		.newsDetailArea h3 {
				font-size: 1.6rem;
		}
		.newsDetailArea p {
				margin-bottom: 20px;
		}
		.newsDetailArea ul {
				margin-bottom: 20px;
		}
		.pager a {
				width: 36px;
				height: 36px;
				list-style: 36px;
				font-size: 1.4rem;
		}
		/* ======================================================

（Tablet）関町セラーについて

====================================================== */
		/*（Tablet）エリア背景*/
		#about {
				width: 93.6%;
				height: 35vw;
				margin: 25vw auto 12vw;
		}
		/*（PC）縦書きの文字*/
		#about h2 {
				top: -16vw;
		}
		/* ======================================================

（Tablet）外観

====================================================== */
		/*（Tablet）営業案内の画像文字*/
		#shop p {
				width: 31%;
				margin: 20px auto 0;
		}
		/* ======================================================

（Tablet）お知らせ/イベントインフォ

====================================================== */
		/* ======================================================

（Tablet）SNS

====================================================== */
		/*（Tablet）見出し*/
		.sns h3 {
				font-size: 2rem;
		}
		/*（Tablet）アイコンエリア　幅*/
		.sns li {
				width: 60px;
		}
		/*（Tablet）アイコンエリア　文字設定*/
		.sns li a {
				font-size: 1.2rem;
		}
		/*（Tablet）アイコンエリア　アイコン画像*/
		.sns li img {
				width: 40px !important;
		}
		/* ======================================================

（Tablet）フロアガイド

====================================================== */
		/*（Tablet）薄いグレーバック*/
		.floorWap {
				padding: 30px 0;
		}
		/*（Tablet）店内写真*/
		div.floorImage {
				margin-bottom: 30px;
		}
		/*（Tablet）店内写真　キャプション*/
		.floorImage div span {
				font-size: 1.2rem;
		}
		/* ======================================================

（Tablet）first Floor/upstairs

====================================================== */
		/*（Tablet）1段目　写真エリア*/
		.stage01 div:first-child {
				width: 50%;
		}
		/*（Tablet）1段目　文字エリア*/
		.stage01 div:last-child {
				width: 50%;
				padding: 0 2.6%;
		}
		/*（Tablet）2段目*/
		.stage02 {
				width: 100%;
				margin: 3.6vw auto 0;
		}
		/*（Tablet）2段目　左と右の幅*/
		.stage02 div {
				width: 26%;
		}
		/*（Tablet）2段目　中央の幅*/
		.stage02 div:nth-child(3) {
				width: 48%;
				padding: 0 2.6%;
		}
		/*（Tablet）2F関町テラス　2段目で写真2枚の間のスペース*/
		#upstairs .stage02 div:nth-child(2) img:first-child {
				margin-bottom: 20px;
		}
		/*（Tablet）1F角打ちカウンター　2段目画像調整*/
		#firstFloor .stage02 div img {
				height: 190px;
				object-fit: cover;
		}
		/*（Tablet）2F関町テラス　2段目画像調整（縦画像）*/
		#upstairs .stage02 div:first-child img {
				height: 400px;
				object-fit: cover;
		}
		/*（Tablet）2F関町テラス　2段目画像調整（横画像）*/
		#upstairs .stage02 div:nth-child(2) img {
				height: 190px;
				object-fit: cover;
		}
		/*（Tablet）タイトル*/
		#firstFloor h3, #upstairs h3 {
				font-size: 2.0rem;
		}
		/*（Tablet）タイトル（階数表示）*/
		#firstFloor h3 span, #upstairs h3 span {
				font-size: 2.0rem;
				width: 40px;
				height: 40px;
				line-height: 40px;
				margin-right: 50px;
		}
		/*（Tablet）タイトル（階数表示の横　斜め線）*/
		#firstFloor h3 span::after, #upstairs h3 span::after {
				right: -30px;
				height: 50px;
				margin-top: -5px;
		}
		/*（Tablet）タイトル下　キャッチコピー*/
		#firstFloor h4, #upstairs h4 {
				font-size: 1.6rem;
				letter-spacing: 0rem;
				margin: 10px 0 20px;
		}
		/*（Tablet）段落下のスペース*/
		#firstFloor div p, #upstairs div p {
				margin-bottom: 10px;
		}
		/*（Tablet）2F関町テラス　（　）内の文字*/
		#upstairs span {
				font-size: 1.2rem;
		}
		/*（Tablet）ご利用についてのボタン*/
		.attention_first, .attention_upstair {
				font-size: 1.3rem;
		}
		/*（Tablet）2Fテラス　ご利用案内の文章*/
		#upstairs ul {
				margin-bottom: 20px;
		}
		#upstairs li {
				font-size: 1.2rem;
				margin-bottom: 5px;
		}
		/* ======================================================

（Tablet）イベント

====================================================== */
		/*（Tablet）イベントキャッチコピー*/
		#event h2 + p {
				font-size: 1.8rem;
				margin-bottom: 20px;
		}
		/*（Tablet）イベントお知らせ タイトル*/
		.eventNews h3 {
				margin-top: 6.4vw;
				font-size: 2.8rem;
		}
		/*（Tablet）イベントスナップ　拡大画像　zoom*/
		#event figure a::before {
				bottom: 0px;
				right: -5px;
		}
		/*（Tablet）イベントお知らせ タイトル下のキャッチコピー*/
		.eventNews h3 + p {
				margin: 10px 0 20px;
		}
		/*（Tablet）イベントお知らせ*/
		#event .newsWrap {
				margin: 0 auto 20px;
		}
		/*（Tablet）過去のイベント　タイトル*/
		#event .pastEvents h3 {
				font-size: 1.8rem;
				margin-bottom: 45px;
				margin-top: 6.4vw;
		}
		/*（Tablet）過去のイベント　タイトル　下の飾り線*/
		#event .pastEvents h3::after {
				width: 20px;
				bottom: -15px;
		}
		/*（Tablet）過去のイベント　リスト見出し*/
		.eventList h4 {
				font-size: 1.4rem;
				max-width: 125px;
				margin-bottom: 10px;
		}
		/*（Tablet）過去のイベント　リスト下のマージン*/
		.eventList ul {
				margin-bottom: 20px;
		}
		/* ======================================================

（Tablet）インスタグラム読み込みエリア

====================================================== */
		/*（Tablet）インスタエリア*/
		.instagram {
				width: 93.6%;
		}
		/* ======================================================

（Tablet）ラインナップ（日本酒〜ワイン）

====================================================== */
		/*（Tablet）ラインナップ　拡大画像　zoom*/
		figure a::before {
				bottom: 8%;
				right: -2px;
				transform: scale(0.9);
		}
		/*（Tablet）ラインナップ　拡大画像　zoom（小さい画像）*/
		.imageList figure a::before {
				bottom: 0px;
			right: -4px;
		}
		/*（Tablet）ラインナップ　エリア*/
		.lineUpdetails {
				margin-top: 0px;
				border-top: none;
		}
		/*（Tablet）ラインナップ　1段目・2段目エリア*/
		.lineUp01, .lineUp02 {
				display: block;
		}
		/*（Tablet）ラインナップ　メイン画像*/
		.lineUp01 div:first-child {
				position: relative;
				overflow: hidden;
				padding-top: 56.25%;
		}
		/*（Tablet）ラインナップ　メイン画像*/
		.lineUp01 div:first-child figure {
				position: absolute;
				width: 100%;
				top: 50%;
				left: 50%;
				-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
		}
		/*（Tablet）ラインナップ　1段目・2段目　エリア*/
		.lineUp01 div:first-child, .lineUp02 div:last-child {
				width: 100%;
		}
		/*（Tablet）ラインナップ　1段目・2段目　エリア*/
		.lineUp01 div:last-child, .lineUp02 div:first-child {
				width: 100%;
		}
		/*（Tablet）ラインナップ　テキストエリア*/
		.lineUp01 div:last-child {
				padding: 3.2vw;
		}
		/*（Tablet）ラインナップ2段目*/
		.lineUp02 {
				margin-top: 0;
		}
		/*（Tablet）ラインナップ　お取り扱い*/
		.lineUp02 div:last-child {
				padding: 3.2vw;
		}
		/*（Tablet）ラインナップ　サブ画像*/
		.lineUp02 div:first-child {
				padding: 0 3.2vw;
		}
		/*（Tablet）ラインナップ　見出し*/
		#lineUp h3 {
				font-size: 2.8rem;
		}
		/*（Tablet）ラインナップ　見出し　下テキスト*/
		#lineUp h3 + p {
				font-size: 1.4rem;
				margin: 10px auto 3.2vw;
		}
		/*（Tablet）ラインナップ　見出し　下テキスト　個別設定*/
		#sake h3 + p {
				width: 92px;
		}
		#shochu h3 + p {
				width: 128px;
		}
		#beer h3 + p {
				width: 195px;
		}
		#wine h3 + p {
				width: 90px;
		}
		#food h3 + p {
				width: 132px;
		}
		/*（Tablet）ラインナップ　取り扱い*/
		#lineUp h4 {
				font-size: 1.4rem;
		}
		/*（Tablet）ラインナップ　取り扱いリスト項目*/
		#lineUp li {
				font-size: 1.3rem;
		}
		/*（Tablet）ラインナップ　取り扱いリスト項目　最後「and more」*/
		#lineUp ul + p {
				font-size: 1.3rem;
		}
		/*（Tablet）ラインナップ　テキスト　個別設定 beer　2段目左側最後*/
		#beer .lineUp02 p:last-child {
				font-size: 1.3rem;
				margin-top: 10px;
		}
		/* ======================================================

（Tablet）ラインナップ（ウィスキー〜ノンアル）

====================================================== */
		/*（Tablet）3列横並びを1列に*/
		.lineUp03 {
				width: 100%;
				margin: 0 auto 0;
				border-top: 1px solid #eee;
				padding: 3.2vw 0 0;
				display: block;
				border-bottom: none;
		}
		/*（Tablet）幅設定*/
		.lineUp03 section {
				width: 100%;
		}
		/*（Tablet）タイトル横　英語*/
		#lineUp .engName {
				margin-left: 3.2vw;
				width: auto;
				min-width: 100px;
		}
		/*（Tablet）テキスト*/
		.lineUp03 p {
				padding: 0 3.2vw;
		}
		/*（Tablet）画像エリア　囲み*/
		.lineUp03 div {
				position: relative;
				overflow: hidden;
				padding-top: 56.25%;
				margin-bottom: 3.2vw;
		}
		/*（Tablet）画像エリア*/
		.lineUp03 figure {
				position: absolute;
				width: 100%;
				top: 50%;
				left: 50%;
				-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
				z-index: 1;
		}
		/*（Tablet）各エリア設定*/
		#whiskey, #spirits {
				margin-bottom: 3.2vw;
				padding-bottom: 3.2vw;
				border-bottom: 1px solid #eee;
		}
		/*（Tablet）各エリア設定　一番最後*/
		#non-alcoholic {
				margin-bottom: 0;
				padding-bottom: 3.2vw;
		}
		/* ======================================================

（Tablet）ラインナップ（おつまみ）

====================================================== */
		/*（Tablet）ラインナップ（おつまみ）　拡大画像　zoom*/
		.lineUp04 figure a::before {
				bottom: 12.5%;
				right: 21.8%;
		}
		/*（Tablet）エリア設定　3番目のdivを下にカラム落ちさせる*/
		.lineUp04 {
				display: flex;
				width: 100%;
				margin: 3.2vw auto 0;
				align-items: center;
				flex-wrap: wrap;
				text-align: center;
		}
		/*（Tablet）エリア幅　1*/
		.lineUp04 div:nth-child(1) {
				width: 50%;
		}
		/*（Tablet）エリア幅　2*/
		.lineUp04 div:nth-child(2) {
				order: 2;
				width: 50%;
		}
		/*（Tablet）エリア幅　2*/
		.lineUp04 div:nth-child(3) {
				order: 3;
				width: 100%;
				padding: 3.2vw 0;
		}
		/*（Tablet）画像設定*/
		.lineUp04 div:first-child, .lineUp04 div:nth-child(2) {
				position: relative;
				overflow: hidden;
				padding-top: 45%;
		}
		/*（Tablet）画像設定*/
		.lineUp04 figure {
				position: absolute;
				width: 180%;
				top: 50%;
				left: 50%;
				-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
		}
		/*（Tablet）テキスト設定*/
		.lineUp04 p {
				padding: 0 3.2vw;
		}
		/* ======================================================

（Tablet）アクセス

====================================================== */
		/*（Tablet）タイトル下　住所*/
		#access h2 + p {
				font-size: 1.6rem;
				margin-bottom: 15px;
		}
		/*（PC）タイトル下　青梅街道沿い*/
		#access h2 + p span {
				font-size: 1.4rem;
		}
		/*（Tablet）手書きマップエリア*/
		.mapimage {
				padding: 3.2vw 0;
		}
		/*（Tablet）手書きマップ画像*/
		.mapimage img {
				max-width: 600px;
		}
		/*（Tablet）グーグルマップとアクセス案内*/
		.accessDetails {
				display: block;
				width: 93.6%;
				margin: 3.2vw auto 0;
		}
		/*（Tablet）グーグルマップ*/
		.accessDetails div:first-child {
				width: 100%;
		}
		/*（Tablet）アクセス案内*/
		.accessDetails div:last-child {
				width: 100%;
				padding-left: 0vw;
				margin-top: 3.2vw;
		}
		/*（Tablet）グーグルマップレスポンシブ*/
		.gmap {
				padding-bottom: 45%;
		}
		/*（Tablet）アクセス案内　電車などの見出し*/
		#access h3 {
				font-size: 1.4rem;
		}
		/*（Tablet）アクセス案内　バス乗り場*/
		#access h4 {
				font-size: 1.3rem;
		}
		/*（Tablet）バス吉祥寺　乗り場　左*/
		.innerList div:first-child {
				width: 35%;
		}
		/*（Tablet）バス吉祥寺　乗り場　右*/
		.innerList div:last-child {
				width: 65%;
				margin-top: 0;
		}
		/*（Tablet）バス乗り場　詳細リスト*/
		#access li {
				font-size: 1.3rem;
		}
		/* ======================================================

（Tablet）メッセージ

====================================================== */
		/*（Tablet）メッセージエリア*/
		#message {
				padding: 3.2vw 0;
		}
		/*（Tablet）メッセージ内部*/
		.messageInner {
				display: block;
		}
		/*（Tablet）メッセージ内部　右左幅設定*/
		.messageInner section {
				width: 93.6%;
				padding: 0 3.2vw;
				margin: 0 auto;
		}
		/*（Tablet）メッセージ内部　真ん中に線*/
		.messageInner section:first-child {
				border-right: none;
				padding-bottom: 3.2vw;
				border-bottom: 1px solid #eee;
				margin-bottom: 3.2vw;
		}
		/*（Tablet）見出し*/
		.messageInner h2 {
				font-size: 1.8rem;
		}
		/*（Tablet）右側のテキストは左寄せ*/
		.messageInner section:last-child p {
				text-align: center;
				padding: 0 3.2vw;
		}
		/*（Tablet）右側のテキスト　段落のスペースを開けたい部分*/
		.messageInner section:last-child p:nth-child(4) {
				margin-bottom: 20px;
		}
		/*（Tablet）見出し下の英字*/
		.messageInner h2 + p {
				font-size: 1.2rem;
				margin: 10px 0 20px;
		}
		/*（Tablet）見出し下の英字　下の線（左）*/
		.messageInner h2 + p::after {
				width: 20px;
		}
		/*（Tablet）文章*/
		.messageInner p {
				font-size: 1.3rem;
				line-height: 1.4;
		}
		/* ======================================================

（Tablet）footer

====================================================== */
		/*（Tablet）フッターエリア*/
		footer {
				padding: 50px 0;
		}
		/*（Tablet）フッター見出し*/
		footer h2 {
				font-size: 2.4rem;
		}
		/*（Tablet）フッターSNSエリア*/
		footer ul {
				margin: 20px 0 20px;
		}
		/*（Tablet）フッターSNSアイコン*/
		footer li {
				width: 25px;
		}
		/*（Tablet）コピーライト*/
		small {
				margin-top: 50px;
		}
		/* ======================================================

（Tablet）ハンバーガーメニュー

====================================================== */
		.drawer-nav li a {
				font-size: 1.3rem;
		}
		/* ======================================================

（Tablet）PageTop BTN 

====================================================== */
		#page-top {
				right: 20px;
				bottom: 20px;
				width: 42px;
				height: 42px;
		}
		/* -----------------------------------------------------
tablet END
-------------------------------------------------------*/
}