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

SP

====================================================== */
		h1, h2, h3, h4, h5, h6 {
				font-size: 1.3rem;
				font-weight: bold;
		}
		p, li, dt, dd, th, td, figcaption {
				font-size: 1.3rem;
		}
		.sp {
				display: block !important;
		}
		.pc {
				display: none !important;
		}
		a:hover, a img:hover, a div:hover {
				opacity: 1;
		}
		/* ======================================================

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

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

（SP）共通　見出し

====================================================== */
		/*（SP）筆記体の文字*/
		.eyeCatch {
				font-size: 2.3rem;
				margin-bottom: 10px;
		}
		/*（SP）タイトル（筆記体の文字の下）*/
		.eyeCatch + h2 {
				font-size: 2.4rem;
				margin-bottom: 40px;
		}
		/*（SP）タイトルの下の飾り線*/
		.eyeCatch + h2::before {
				width: 15px;
		}
		/* ======================================================

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

====================================================== */
		/*（SP）背景歴史イメージ*/
		header {
				background: url("/img/heading/history.jpg") no-repeat 52% top / cover;
		}
		/*（SP）ロゴ*/
		h1 {
				width: 25%;
				max-width: 110px;
		}
		/*（SP）コピー*/
		header p {
				width: 93.6%;
				margin-top: 0px;
		}
		/*（SP）ナビゲーション*/
		header ul {
				bottom: 20px;
				width: 93.6%;
				left: 50%;
				transform: translateX(-50%);
		}
		/*（SP）ナビゲーション 詳細エリア*/
		header li {
				margin-right: 0;
				width: 20%;
				text-align: center;
				border-left: 1px solid #ccc;
		}
		/*（SP）ナビゲーション 詳細エリア　6番目は2倍の幅*/
		header li:nth-child(6) {
				width: 40%;
		}
		/*（SP）ナビゲーション 詳細エリア　5番目と9番目は右に線*/
		header li:nth-child(5), header li:nth-child(9) {
				border-right: 1px solid #ccc;
		}
		/*（SP）ナビゲーション 詳細エリア　最初から5番目まで下にスペース*/
		header li:nth-child(-n+5) {
				margin-bottom: 10px;
		}
		header li a {
				display: block;
				/*color: #fff;*/
				font-size: 1.1rem;
				padding: 2px 0;
		}
		/* ======================================================

（SP）ニュースページ

====================================================== */
		#news header {
				padding: 20px 0;
				margin-bottom: 30px;
		}
		/*（SP）ロゴ*/
		#news h1 {
				width: 17%;
		}
		/*（SP）一覧ページタイトル*/
		#news h2 {
				font-size: 1.8rem;
		}
		#news .newsWrap {
				margin-bottom: 30px;
		}
		.backBTN {
				margin-top: 20px;
		}
		.newsDetailArea {
				margin: 0 auto 30px;
		}
		.newsDetailArea h2 {
				font-size: 1.8rem;
		}
		.newsDetailArea #up_ymd {
				font-size: 1.2rem;
		}
		.newsDetailArea h3 {
				font-size: 1.5rem;
		}
		/* ======================================================

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

====================================================== */
		/*（SP）エリア背景*/
		#about {
				width: 93.6%;
				height: 40vw;
				margin: 55vw 0 15vw;
		}
		/*（PC）縦書きの文字*/
		#about h2 {
				top: -40vw;
				width: 80%;
				max-width: 400px;
		}
		/* ======================================================

（SP）外観

====================================================== */
		/*（SP）外観エリア背景*/
		#shop div {
				padding-top: 55%;
		}
		/*（SP）営業案内の画像文字*/
		#shop p {
				width: 50%;
				margin: 10px auto 0;
		}
		/* ======================================================

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

====================================================== */
		/*（SP）記事リスト　日付*/
		.up_ymd {
				display: block;
				margin-bottom: 10px;
		}
		/* ======================================================

（SP）SNS

====================================================== */
		/*（SP）見出し*/
		.sns h3 {
				font-size: 1.6rem;
		}
		/*（SP）アイコンエリア　幅*/
		.sns li {
				width: 50px;
		}
		/*（SP）アイコンエリア　文字設定*/
		.sns li a {
				font-size: 1.0rem;
		}
		/*（SP）アイコンエリア　アイコン画像*/
		.sns li img {
				width: 36px !important;
		}
		/* ======================================================

（SP）フロアガイド

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

（SP）first Floor/upstairs

====================================================== */
		/*（SP）1段目、2段目*/
		.stage01, .stage02 {
				display: block;
		}
		/*（SP）1段目　写真エリア*/
		.stage01 div:first-child {
				width: 100%;
		}
		/*（SP）1段目　文字エリア*/
		.stage01 div:last-child {
				width: 100%;
				padding: 0 3.2%;
				margin-top: 30px;
		}
		/*（SP）2段目*/
		.stage02 {
				display: flex;
				width: 93.6%;
				margin: 3.2vw auto 0;
				flex-wrap: wrap;
		}
		/*（SP）2段目　画像エリアの幅*/
		.stage02 div {
				width: 49.9%;
		}
		/*（SP）2段目　テキストエリアの幅*/
		.stage02 div:last-child {
				order: 3;
				width: 100%;
				padding: 0;
				margin: 3.2vw 0 0;
		}
		/*（SP）2F関町テラス　2段目で写真2枚の間のスペース*/
		#upstairs .stage02 div:nth-child(2) img:first-child {
				margin-bottom: 1px;
		}
		/*（SP）2F関町テラス　2段目画像調整（縦画像）*/
		#upstairs .stage02 div:first-child img {
				height: 381px;
		}
		/* ======================================================

（SP）イベント

====================================================== */
		/*（SP）イベントキャッチコピー*/
		#event h2 + p {
				font-size: 1.6rem;
				letter-spacing: 0.2rem;
				margin-bottom: 10px;
		}
		/*（SP）イベントスナップ上マージン*/
		.eventSnap {
				margin-top: 6.4vw;
		}
		/*（SP）イベントスナップ写真幅*/
		.eventSnap div {
				width: 23.5%;
				margin-bottom: 2%;
		}
		/*（SP）イベントお知らせ タイトル*/
		.eventNews h3 {
				font-size: 2.4rem;
		}
		/*（SP）イベントお知らせ タイトル下のキャッチコピー*/
		.eventNews h3 + p {
				margin: 8px 0 20px;
		}
		/*（SP）過去のイベント　タイトル*/
		#event .pastEvents h3 {
				margin-bottom: 45px;
				margin-top: 30px;
		}
		/*（SP）過去のイベント　タイトル　下の飾り線*/
		#event .pastEvents h3::after {
				width: 15px;
		}
		/*（SP）過去のイベント　リストエリア*/
		.eventList {
				display: block;
		}
		/*（SP）過去のイベント　リストエリア幅*/
		.eventList div {
				width: 100%;
		}
		.eventList div:first-child {
				margin-bottom: 20px;
		}
		/*（SP）過去のイベント　リスト見出し*/
		.eventList h4 {
				font-size: 1.2rem;
				margin-bottom: 0;
		}
		/*（SP）過去のイベント　リスト*/
		.eventList ul {
				border-top: 1px solid #ccc;
				padding-top: 3.2vw;
		}
		/* ======================================================

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

====================================================== */
		/*（SP）インスタエリア*/
		.instagram {
				width: 93.6%;
		}
		/*（SP）インスタエリア　9個目の画像を表示（SP用）*/
		.instagram div:nth-child(9) {
				display: block;
		}
		/*（SP）インスタエリア　各画像エリア*/
		.instagram div {
				width: 33%;
		}
		/*		.instagram div:nth-child(n + 7) {
				display: none;
		}*/
		/*（SP）インスタエリア　各画像エリア　4番目以降はマージンなし*/
		.instagram div:nth-child(n + 7) {
				margin-bottom: 0;
		}
		/* ======================================================

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

====================================================== */
		/*（SP）ラインナップ　拡大画像　zoom*/
		figure a::before {
				font-size: 1.0rem;
				padding: 5px 10px;
				transform: scale(0.8);
		}
		/*（SP）ラインナップ　お取り扱い*/
		.lineUp02 div:last-child {
				padding: 4.6vw 3.2vw;
		}
		/*（SP）ラインナップ　見出し*/
		#lineUp h3 {
				font-size: 2.3rem;
		}
		#food h3 {
				letter-spacing: 0;
				font-size: 2.1rem;
		}
		/*（SP）ラインナップ　見出し　下テキスト*/
		#lineUp h3 + p {
				font-size: 1.3rem;
		}
		/*（SP）ラインナップ　見出し　下テキスト　個別設定*/
		#sake h3 + p {
				width: 86px;
		}
		#shochu h3 + p {
				width: 115px;
		}
		#beer h3 + p {
				width: 165px;
		}
		#wine h3 + p {
				width: 86px;
		}
		#food h3 + p {
				width: 100px;
				margin-bottom: 0;
		}
		/*（SP）ラインナップ　取り扱いリスト項目　最後「and more」*/
		#lineUp ul + p {
				font-size: 1.3rem;
		}
		/* ======================================================

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

====================================================== */
		.lineUp03 h3 {
				font-size: 1.6rem !important;
		}
		/* ======================================================

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

====================================================== */
		.lineUp04 {
				text-align: left;
		}
		/* ======================================================

（SP）アクセス

====================================================== */
		/*（SP）タイトル下　住所*/
		#access h2 + p {
				font-size: 1.4rem;
				margin-bottom: 10px;
		}
		/*（PC）タイトル下　青梅街道沿い*/
		#access h2 + p span {
				font-size: 1.3rem;
				margin-top: 8px;
		}
		/*（SP）手書きマップ画像*/
		.mapimage img {
				width: 93.6% !important;
		}
		/*（SP）グーグルマップレスポンシブ*/
		.gmap {
				padding-bottom: 80%;
		}
		/*（SP）バス吉祥寺　乗り場　左*/
		.innerList div:first-child {
				width: 60%;
		}
		/*（SP）バス吉祥寺　乗り場　右*/
		.innerList div:last-child {
				width: 40%;
				margin-top: 0;
		}
		/*（SP）バス乗り場　見出し*/
		.innerList h4 {
				padding-left: 10px;
		}
		/*（SP）バス乗り場　詳細リストエリア*/
		#access ul {
				padding-left: 10px;
		}
		/*（SP）バス乗り場　詳細リスト*/
		#access li {
				font-size: 1.3rem;
		}
		/*（SP）【バス】荻窪の場合　0番のりば*/
		p + h4 {
				padding-left: 10px;
		}
		/* ======================================================

（SP）メッセージ

====================================================== */
		/*（SP）メッセージエリア*/
		#message {
				padding: 30px 0;
		}
		/*（SP）メッセージ内部　右左幅設定*/
		.messageInner section {
				padding: 0;
		}
		/*（SP）メッセージ内部　真ん中に線*/
		.messageInner section:first-child {
				padding-bottom: 30px;
				margin-bottom: 30px;
		}
		/*（SP）見出し*/
		.messageInner h2 {
				font-size: 1.4rem;
		}
		/*（SP）右側のテキストは左寄せ*/
		.messageInner section:last-child p {
				text-align: left;
				padding: 0;
		}
		/*（SP）右側のテキスト　段落のスペースを開けたい部分*/
		.messageInner section:last-child p:nth-child(4) {
				margin-bottom: 0px;
		}
		/*（SP）見出し下の英字*/
		.messageInner h2 + p {
				font-size: 1rem;
				margin: 5px 0 15px;
		}
		/*（SP）見出し下の英字　下の線（左）*/
		.messageInner h2 + p::after {
				width: 15px;
		}
		.text_wrap {
				display: inline-block;
		}
		/* ======================================================

（SP）footer

====================================================== */
		/*（SP）フッターエリア*/
		footer {
				padding: 30px 0;
		}
		/*（SP）フッター見出し*/
		footer h2 {
				font-size: 2rem;
		}
		/*（SP）フッターSNSアイコン*/
		footer li {
				width: 24px;
				margin-right: 15px;
		}
		/*（SP）コピーライト*/
		small {
				margin-top: 30px;
				font-size: 1rem;
		}
		/* ======================================================

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

====================================================== */
		.drawer-menu {
				padding: 20px 10px 0px;
		}
		.drawer-nav li a {
				padding: 10px 10px;
				font-size: 1.3rem;
		}
		.drawer-nav li a {}
		.drawer-nav li:nth-child(5) a, .drawer-nav li:nth-child(6) a, .drawer-nav li:nth-child(10) a, .drawer-nav li:nth-child(11) a, .drawer-nav li:nth-child(12) a, .drawer-nav li:nth-child(13) a, .drawer-nav li:nth-child(14) a, .drawer-nav li:nth-child(15) a, .drawer-nav li:nth-child(16) a, .drawer-nav li:nth-child(17) a {
				padding-left: 20px;
		}
		.drawer-nav {
				width: 16.25rem;
		}
		.drawer--right .drawer-nav {
				right: -16.25rem;
		}
		.drawer--right.drawer-open .drawer-hamburger {
				right: 16.25rem;
		}
		/* ======================================================

（SP）PageTop BTN 

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