★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */ /* ================================================================================ レイアウト ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { #wrapper{ } main.outer_wrap { position: relative; max-width: none; /* max-width: 1920px; 固定幅レイアウト時 */ width: 100%; min-height: 50vh; display: block; padding: 150px 0 80px; margin: 0 auto; } .inner_wrap { position: relative; width: 100%; margin: 0 auto; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { #wrapper { } main.outer_wrap { position: relative; width: 100%; min-height: 50vh; padding: 8vw 0; } .inner_wrap { position: relative; width: 100%; padding: 0 4vw; } } /* ================================================================================ メイン画像 ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .header-box{ position: relative; } .m-concept{ width: 100%; height: 21.9vw; background: url(../img/cate01-img.jpg) no-repeat center top / 100% auto; position: absolute; } .m-lunch{ width: 100%; height: 21.9vw; background: url(../img/cate02-img.jpg) no-repeat center top / 100% auto; position: absolute; } .m-food{ width: 100%; height: 21.9vw; background: url(../img/cate03-img.jpg) no-repeat center top / 100% auto; position: absolute; } .m-drink{ width: 100%; height: 21.9vw; background: url(../img/cate04-img.jpg) no-repeat center top / 100% auto; position: absolute; } .m-course{ width: 100%; height: 21.9vw; background: url(../img/cate05-img.jpg) no-repeat center top / 100% auto; position: absolute; } .m-access,.m-cate{ width: 100%; height: 21.9vw; background: url(../img/cate06-img.jpg) no-repeat center top / 100% auto; position: absolute; } /* タイトル文字設定 */ .m-cate .page-title h2, .m-concept .page-title h2, .m-lunch .page-title h2, .m-food .page-title h2, .m-drink .page-title h2, .m-course .page-title h2, .m-access .page-title h2{ text-align: center; font-size: 3.5vw; letter-spacing: 0.05em; padding: 2vw 0 0 0vw; margin-top: 5vw; color: #ffffff; font-weight:normal; position: relative; } .m-cate .page-title h2::before, .m-concept .page-title h2::before, .m-lunch .page-title h2::before, .m-food .page-title h2::before, .m-drink .page-title h2::before, .m-course .page-title h2::before, .m-access .page-title h2::before{ position: absolute; content: ""; display: block; background:url(../img/cate-title_kazali.png) no-repeat center top / 100% auto; top: -24px; left: 47vw; width: 4.5vw; height: 7vw; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .header-box{ position: relative; } .m-concept{ width: 100%; height: 39vw; background: url(../img/cate01-img.jpg) no-repeat center top / cover; position: absolute; } .m-lunch{ width: 100%; height: 39vw; background: url(../img/cate02-img.jpg) no-repeat center top / cover; position: absolute; } .m-food{ width: 100%; height: 39vw; background: url(../img/cate03-img.jpg) no-repeat center top / cover; position: absolute; } .m-drink{ width: 100%; height: 39vw; background: url(../img/cate04-img.jpg) no-repeat center top / cover; position: absolute; } .m-course{ width: 100%; height: 39vw; background: url(../img/cate05-img.jpg) no-repeat center top / cover; position: absolute; } .m-access,.m-cate{ width: 100%; height: 39vw; background: url(../img/cate06-img.jpg) no-repeat center top / cover; position: absolute; } /* タイトル文字設定 */ .m-cate .page-title h2, .m-concept .page-title h2, .m-lunch .page-title h2, .m-food .page-title h2, .m-drink .page-title h2, .m-course .page-title h2, .m-access .page-title h2{ text-align: center; font-size: 7.5vw; letter-spacing: 0.05em; padding: 17vw 0 0 0vw; color: #ffffff; font-weight:normal; position: relative; text-shadow: 0px 0px 5px rgba(38,26,12,0.66), 0px 0px 5px rgba(38,26,12,0.66), 0px 0px 5px rgba(38,26,12,0.66); } .m-cate .page-title h2::before, .m-concept .page-title h2::before, .m-lunch .page-title h2::before, .m-food .page-title h2::before, .m-drink .page-title h2::before, .m-course .page-title h2::before, .m-access .page-title h2::before{ position: absolute; content: ""; display: block; background:url(../img/cate-title_kazali.png) no-repeat center top / 100% auto; top: 1vw; left: 47vw; width: 4.5vw; height: 7vw; } .top-tel { z-index: 1; text-align: center; padding: 9vw 0 7vw; background: url(../img/sp-top_info.jpg)no-repeat center top/ 100% auto; margin-top: 16vw; } } /* ================================================================================ レイアウトボックス ================================================================================ */ span.orange { color: #f6bd10; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .bottom_long { margin: 0 0 120px 0; } .bottom_middle { margin: 0 0 80px 0; } .bottom_short { margin: 0 0 40px 0; } /* ロゴ */ .top-logo{ position: relative; } .top-logo a{ display: block; display: block; width: 14.3vw; padding: 2vw 0 3vw 3vw; } .top-logo a img{ width: 15.3vw; } /* グローバルナビゲーション ----------------------------------------------- */ .navi-box{/* 背景 */ background:url(../img/top-nav-bg.jpg)no-repeat center top / 100% auto; height: 6.2vw; position: relative; z-index: 2; top: 7vw; } .navi-box ul{ text-align: center; font-size:0; } .navi-box ul li{ display: inline-block; margin: 1.8vw 0.8vw 0; vertical-align: top; } .navi-box a:hover { opacity: 1 !important; } /* オフ */ .navi-box ul li#nav-01_off a{ background: url(../img/nav01-on.png) no-repeat center top /100% auto; display: block; width: 5vw; height: 5vw; text-indent: -9999px; } .navi-box ul li#nav-01_off a:hover{ background:url(../img/nav01-on.png) no-repeat center top /100% auto; } /* オン */ .navi-box ul li#nav-01_on a{ background:url(../img/nav01.png) no-repeat center top /100% auto; width: 5vw; height: 5vw; text-indent: -9999px; display: block; } .navi-box ul li#nav-01_on a:hover{ background:url(../img/nav01-on.png) no-repeat center top /100% auto; } /* --------コンセプト */ /* オフ */ .navi-box ul li#nav-02_off a{ background:url(../img/nav02-on.png) no-repeat center top /100% auto; width: 7vw; height: 5vw; text-indent: -9999px; display: block; } .navi-box ul li#nav-02_off a:hover{ background:url(../img/nav02-on.png) no-repeat center top /100% auto; } /* オン */ .navi-box ul li#nav-02_on a{ background:url(../img/nav02.png) no-repeat center top /100% auto; width: 7vw; height: 5vw; text-indent: -9999px; display: block; } .navi-box ul li#nav-02_on a:hover{ background:url(../img/nav02-on.png) no-repeat center top /100% auto; } /* --------ランチ */ /* オフ */ .navi-box ul li#nav-03_off a{ background:url(../img/nav03-on.png) no-repeat center top /100% auto; width: 5vw; height: 3vw; text-indent: -9999px; display: block; } .navi-box ul li#nav-03_off a:hover{ background:url(../img/nav03-on.png) no-repeat center top /100% auto; } /* オン */ .navi-box ul li#nav-03_on a{ background:url(../img/nav03.png) no-repeat center top /100% auto; width: 5vw; height: 3vw; text-indent: -9999px; display: block; } .navi-box ul li#nav-03_on a:hover{ background:url(../img/nav03-on.png) no-repeat center top /100% auto; } /* --------フード */ /* オフ */ .navi-box ul li#nav-04_off a{ background:url(../img/nav04-on.png) no-repeat center top /100% auto; width: 4vw; height: 3vw; text-indent: -9999px; display: block; } .navi-box ul li#nav-04_off a:hover{ background:url(../img/nav04-on.png) no-repeat center top /100% auto; } /* オン */ .navi-box ul li#nav-04_on a{ background:url(../img/nav04.png) no-repeat center top /100% auto; width: 4vw; height: 3vw; text-indent: -9999px; display: block; } .navi-box ul li#nav-04_on a:hover{ background:url(../img/nav04-on.png) no-repeat center top /100% auto; } /* --------ドリンク */ /* オフ */ .navi-box ul li#nav-05_off a{ background:url(../img/nav05-on.png) no-repeat center top /100% auto; width: 5vw; height: 3vw; text-indent: -9999px; display: block; } .navi-box ul li#nav-05_off a:hover{ background:url(../img/nav05-on.png) no-repeat center top /100% auto; } /* オン */ .navi-box ul li#nav-05_on a{ background:url(../img/nav05.png) no-repeat center top /100% auto; width: 5vw; height: 3vw; text-indent: -9999px; display: block; } .navi-box ul li#nav-05_on a:hover{ background:url(../img/nav05-on.png) no-repeat center top /100% auto; } /* ----コース---- */ /* オフ */ .navi-box ul li#nav-06_off a{ background:url(../img/nav06-on.png) no-repeat center top /100% auto; width: 6vw; height: 3vw; text-indent: -9999px; display: block; } .navi-box ul li#nav-06_off a:hover{ background:url(../img/nav06-on.png) no-repeat center top /100% auto; } /* オン */ .navi-box ul li#nav-06_on a{ background:url(../img/nav06.png) no-repeat center top /100% auto; width: 6vw; height: 3vw; text-indent: -9999px; display: block; } .navi-box ul li#nav-06_on a:hover{ background:url(../img/nav06-on.png) no-repeat center top /100% auto; } /* --------アクセス */ /* オフ */ .navi-box ul li#nav-07_off a{ background:url(../img/nav07-on.png) no-repeat center top /100% auto; width: 5.5vw; height: 3vw; text-indent: -9999px; display: block; } .navi-box ul li#nav-07_off a:hover{ background:url(../img/nav07-on.png) no-repeat center top /100% auto; } /* オン */ .navi-box ul li#nav-07_on a{ background:url(../img/nav07.png) no-repeat center top /100% auto; width: 5.5vw; height: 3vw; text-indent: -9999px; display: block; } .navi-box ul li#nav-07_on a:hover{ background:url(../img/nav07-on.png) no-repeat center top /100% auto; } /* フェイスブックアイコン */ .navi-box ul li:last-of-type{ margin-top: 2.1vw !important; margin-left: 2vw; } .navi-box ul li:last-of-type img{ height: 1.6vw !important; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .bottom_long { margin: 0 0 16vw 0; } .bottom_middle { margin: 0 0 12vw 0; } .bottom_short { margin: 0 0 8vw 0; } /* IS消し */ .sp-slider{ display: none; } /* ロゴ */ .top-logo{ position: relative; padding: 1vw 0 0; } .top-logo a{ display: block; width: 27.3vw; padding: 4vw 0; margin: 0 auto; } .top-logo a img{ width: 27.3vw; } } /* ================================================================================ 見出し ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .h3_cate h3 { margin: 0 auto 50px !important; width: 700px; text-align: center; font-size: 38px; font-weight: 400; border-bottom: 1px solid #fff; padding: 0 0 20px !important; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .h2_cate h2 { text-align: center; color: #fefbe8; font-size: 5vw; font-weight: 700; background: url(../img/h2_cate_bg.jpg) center -7vw no-repeat; background-size: 50%; padding: 16vw 0 7vw !important; } .h3_cate h3 { margin: 0 auto !important; text-align: center; font-size: 6vw; font-weight: 400; border-bottom: 1px solid #fff; padding: 0 0 3vw !important; } } /* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ここから各固定ページ ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */ /* ================================================================================ コンセプトページ ================================================================================ */ #wrapper.page-concept main.outer_wrap { background: url(../img/drink_bg_01.jpg) center top no-repeat; background-size: contain; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .concept_text_box { background-color: rgba(12,12,12,0.7); padding: 30px; } .concept_row_01 .column04-title01 h4, .concept_row_02 .column04-title01 h4, .concept_row_03 .column04-title01 h4 { font-size: 2vw !important; padding: 3.3vw 0 0 3.4vw !important; } .concept_row_01 .column04-01_box::before{ background: none !important; } .concept_row_03 .column04-01_box::before{ background: url(../img/bottole-brown_siro.png) no-repeat center top / 100% auto; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .concept_text_box { background-color: rgba(12,12,12,0.5); padding: 4vw; } .concept_row_01 .column04-title01 h4, .concept_row_02 .column04-title01 h4, .concept_row_03 .column04-title01 h4 { font-size: 4vw !important; padding: 9.2vw 0 0 1vw !important; } .concept_row_01 .column04-title02 h4, .concept_row_02 .column04-title02 h4, .concept_row_03 .column04-title02 h4 { font-size: 4vw !important; padding: 14.8vw 0 0 0 !important; } .concept_banner_box a img { width: 60vw; } .concept_row_01 .column04-img01::before, .concept_row_01 .column04-img02::before { display: none; } .concept_row_02 .column04-img01::before, .concept_row_02 .column04-img02::before { display: none; } .concept_row_03 .column04-img01::before, .concept_row_03 .column04-img02::before { display: none; } .concept_row_01 .column04-01_box::before{ background: none !important; } } /* ================================================================================ ランチページ ================================================================================ */ #wrapper.page-lunch main.outer_wrap { background: url(../img/lunch_bg_01.jpg) center top no-repeat; background-size: contain; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .lunch_text_box { background-color: rgba(12,12,12,0.7); padding: 30px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { } /* ================================================================================ フードページ ================================================================================ */ #wrapper.page-food main.outer_wrap { background: url(../img/food_bg_01.jpg) center top no-repeat; background-size: contain; } .under { border-bottom: solid 3px #b91212; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { #wrapper.page-food main.outer_wrap { padding: 150px 0 0 !important; } /* おすすめ */ .food-column03{ } .food-column03 .post_wrap ul{ text-align: center; font-size: 0; } .food-column03 .post_wrap ul li{ display: inline-block; vertical-align:top; font-size: 22px; font-weight: bold; margin: 0 20px 80px; } /* 画像のトリミング */ .food-column03 .post_thumb img{ width: 300px; height: 300px; object-fit: cover; font-family: 'object-fit: cover;'; /* IE対策 */ position: relative; } /* 背景の白 */ .food-column03 .post_thumb{ position: relative; } .food-column03 .post_thumb::before{ position: absolute; content: ""; background-color:#ffffff; top: -10px; left: 10px; width: 300px; height: 300px; } /* 商品名 */ .food-column03 .post_title{ padding:1.5vw 0 0; } .imgWrap { overflow: hidden; /*拡大時にはみ出た部分を隠す*/ width: 100%; height: auto; } .imgWrap img { display: block; transition-duration: 0.3s; /*変化に掛かる時間*/ } .imgWrap img:hover { transform: scale(1.1); /*画像の拡大率*/ transition-duration: 0.3s; /*変化に掛かる時間*/ } /* 2連バナー */ .column02{ height: 26vw; } .column02-botan01,.column02-botan02,.column02-botan03{ position: relative } .column02-botan01::before{ position: absolute; content: ""; display: block; background:url(../img/botan02.png) no-repeat center top / 100% auto; top: 0; left: 0; width: 49.6vw; height: 37vw; pointer-events: none !important; z-index: 1; } .column02-botan02::before{ position: absolute; content: ""; display: block; background:url(../img/botan02.png) no-repeat center top / 100% auto; top: 0; left: 0; width: 49.6vw; height: 37vw; pointer-events: none !important; z-index: 1; } .column02-botan03::before{ position: absolute; content: ""; display: block; background:url(../img/botan03.png) no-repeat center top / 100% auto; top: 0; left: 0; width: 49.6vw; height: 37vw; pointer-events: none !important; z-index: 1; } /* 電話 */ .takeout-tel { position: relative; z-index: 1; font-size: 40px; letter-spacing: 0.05em; text-align: center; line-height: 1; margin-top: -20px; } .takeout-tel a { position: relative; color:#ffffff; pointer-events: none; display: inline-block; padding-left: 48px; } .takeout-tel a::before { position: absolute; content: ""; display: block; background:url(../img/tel-icon.png) left top no-repeat; background-size: auto; background-size: contain; top: 0; left: 0; width: 38px; height: 37px; } .takeout_box { color: #2f1b0f; font-size: 20px; font-weight: 700; background: url(../img/column04-bg01.jpg) no-repeat center -100px / 100% auto; text-shadow: 0px 0px 7px #CECECE, 0px 0px 7px #CECECE; padding: 100px 0; } .takeout_box h4 { text-align: center; font-size: 34px; line-height: 1.6 !important; padding: 0 0 30px !important; } .takeout_box .apple a img { width: 204px; height: 75px; margin: 0 0 20px; } .takeout_box .google a img { width: 252px; height: 75px; margin: 0 0 20px; } .takeout_box .kensaku p { text-align: center; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* おすすめ */ .food-column03{ } .food-column03 .post_wrap ul{ text-align: center; font-size: 0; } .food-column03 .post_wrap ul li{ vertical-align: top; font-size: 4vw; font-weight: bold; margin: 0 0 12vw; } /* 画像のトリミング */ .food-column03 .post_thumb img{ width: 60vw; height: 60vw; object-fit: cover; font-family: 'object-fit: cover;'; /* IE対策 */ position: relative; } /* 背景の白 */ .food-column03 .post_thumb{ position: relative; } .food-column03 .post_thumb::before{ position: absolute; content: ""; background-color:#ffffff; top: -5vw; left: 21vw; width: 60vw; height: 60vw; } /* 商品名 */ .food-column03 .post_title{ padding: 3vw 0 0; } .imgWrap { overflow: hidden; /*拡大時にはみ出た部分を隠す*/ width: 100%; height: auto; } .imgWrap img { display: block; transition-duration: 0.3s; /*変化に掛かる時間*/ } .imgWrap img:hover { transform: scale(1.1); /*画像の拡大率*/ transition-duration: 0.3s; /*変化に掛かる時間*/ } /* 2連バナー */ .column02-botan01,.column02-botan02,.column02-botan03{ position: relative } .column02-botan01::before{ position: absolute; content: ""; display: block; background:url(../img/botan02.png) no-repeat center top / 100% auto; top: 0; left: 0; width: 99.6vw; height: 41vw; pointer-events: none !important; z-index: 2; } .column02-botan02::before{ position: absolute; content: ""; display: block; background:url(../img/botan02.png) no-repeat center top / 100% auto; top: 0; left: 0; width: 99.6vw; height: 41vw; pointer-events: none !important; z-index: 2; } .column02-botan03::before{ position: absolute; content: ""; display: block; background:url(../img/botan03.png) no-repeat center top / 100% auto; top: 0; left: 0; width: 99.6vw; height: 41vw; pointer-events: none !important; z-index: 2; } /* 電話 */ .takeout-tel { position: relative; z-index: 1; font-size: 7vw; letter-spacing: 0.05em; padding: 5vw 0; text-align: center; line-height: 1; } .takeout-tel a { position: relative; color:#ffffff; display: inline-block; padding-left: 7vw; } .takeout-tel a::before { position: absolute; content: ""; display: block; background:url(../img/tel-icon.png) left top no-repeat; background-size: auto; background-size: contain; top: 0.7vw; left: 0; width: 5vw; height: 4.8vw; } .takeout_box { color: #2f1b0f; font-size: 3.8vw; font-weight: 700; background: url(../img/column04-bg01.jpg) no-repeat center top; background-size: cover; text-shadow: 0px 0px 7px #CECECE, 0px 0px 7px #CECECE; padding: 10vw 4vw; } .takeout_box h4 { text-align: center; font-size: 6vw; line-height: 1.6 !important; padding: 0 0 3vw !important; } .takeout_box .apple a img { width: 50vw; margin: 0 0 2vw; } .takeout_box .google a img { width: 60vw; margin: 0 0 2vw; } .takeout_box .kensaku p { text-align: center; padding: 0 0 5vw; } } /* ================================================================================ ドリンクページ ================================================================================ */ #wrapper.page-drink main.outer_wrap { background: url(../img/drink_bg_01.jpg) center top no-repeat; background-size: contain; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* h3タイトル */ .drink-h3{ padding: 75px 0 30px; } .drink-h3 ul{ text-align: center; font-size:0; } .drink-h3 ul li{ vertical-align: top; font-size: 42px; display: inline-block; } .drink-h3 ul li:first-of-type{ margin-right: 30px; } .drink-h3 ul li:last-of-type{ margin-left: 30px; } .drink-h3 ul li img{ width: 60px; } .drink-h3 h3{ font-size: 42px; font-weight: normal; position: relative; line-height: 1.3 !important; letter-spacing: 0.05em; padding: 10px 0 0 !important; } .drink-h3 h3 font { /* 翻訳用 */ font-size: 38px; } .drink-h3 h3::before{ position: absolute; content: ""; display: block; background: url(../img/kazari-01.png)no-repeat center top / 100% auto; top: -125px; left: 50%; width: 125px; height: 92px; margin-left: -64px; } .drink_text { text-align: center; font-size: 22px; } .menu_table01 tr { border-bottom: 1px dotted #eeeeee !important; } .menu_table_title h3 { text-align: left !important; color: #e6562f !important; font-size: 24px !important; line-height: 1.3 !important; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* h3タイトル */ .drink-h3{ padding: 17vw 0 0; } .drink-h3 ul{ text-align: center; font-size:0; } .drink-h3 ul li{ vertical-align: top; font-size: 4.8vw; display: inline-block; } .drink-h3 ul li:first-of-type{ margin-right: 2vw; } .drink-h3 ul li:last-of-type{ } .drink-h3 ul li img{ width: 8.2vw; } .drink-h3 h3{ font-size: 4.8vw; font-weight: normal; position: relative; line-height: 1.2 !important; letter-spacing: 0.05em; } .drink-h3 h3 font { /* 翻訳用 */ font-size: 3vw; } .drink-h3 h3::before{ position: absolute; content: ""; display: block; background: url(../img/kazari-01.png)no-repeat center top / 100% auto; top: -15vw; left: 50%; width: 17.1vw; height: 19vw; margin-left: -9.4vw; } .menu_table01 tr { border-bottom: 1px solid rgba(238,238,238,0.3) !important; } .menu_table_title h3 { text-align: left !important; color: #e6562f !important; font-size: 5.6vw !important; line-height: 1.3 !important; } } /* ================================================================================ コースページ ================================================================================ */ #wrapper.page-course main.outer_wrap { background: url(../img/course_bg_01.jpg) center top no-repeat; background-size: contain; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .column04{ color:#fff; padding: 0 0 8.9vw; position: relative } .column04::before{ position: absolute; content: ""; display: block; top: -3vw; left: 0; width: 100.1vw; height: 7vw; z-index: 1; } /* h3タイトル */ .column04-h3{ padding: 0 0 3.76vw; } .column04-h3 ul{ text-align: center; font-size:0; } .column04-h3 ul li{ vertical-align: top; font-size:2.8vw; display: inline-block; } .column04-h3 ul li:first-of-type{ margin-right: 1vw; } .column04-h3 ul li img{ width: 4.2vw; } .column04-h3 h3{ font-size: 2.8vw; font-weight: normal; position: relative; line-height: 1.2 !important; letter-spacing: 0.05em; } .column04-h3 h3::before{ position: absolute; content: ""; display: block; background: url(../img/kazari-02.png)no-repeat center top / 100% auto; top: -6vw; left: 12.5vw; width: 7.1vw; height: 11vw; } /*▼▼▼▼ 気の合う仲間とお酒も楽しむ ▼▼▼▼*/ .column04-01_box{ position:relative; } .column04-01_box::before{ position: absolute; content: ""; display: block; background: url(../img/bottole-brown.png)no-repeat center top / 100% auto; top: 23vw; left: 28.5vw; width: 16.1vw; height: 25vw; } /* h4タイトル */ .column04-title01{ position: relative; } .column04-title01::before{ position: absolute; content: ""; display: block; background: url(../img/column04-title_bg.png)no-repeat center top / 100% auto; top: 0vw; left: 1.5vw; width: 46.1vw; height: 9vw; z-index: 1; } .column04-title01 h4{ font-weight: normal; color: #2f1b0f; font-size: 2.1vw; z-index: 2; position: relative; padding: 3.2vw 0 0 4vw !important; text-align: center; } /* 英語の時 */ .column04-title01 h4 font{ font-weight: normal; font-size: 2vw; text-align: center; margin-left: -0.5vw !important; } /* テキスト */ .column04-text01{ font-size: 1.2vw; padding: 4.7vw 2vw 0 4vw; letter-spacing: 0.02em; text-shadow: 0px 0px 7px #0c0c0c, 0px 0px 7px #0c0c0c; } /* テキスト英語の時 */ .column04-text01 font{ } /* 画像 */ .column04-img01{ padding: 3.7vw 0 0; position: relative; } .column04-img01::before{ position: absolute; content: ""; background: #b91212; top: 32.1vw; left: 2vw; width: 54.1vw; height: 10vw; } .column04-img01 img{ width: 100%; position: relative; } /* ボタン */ .column04-bottan01{ position: relative; padding: 7.6vw 0 0 35.6vw !important; } .column04-bottan01 a{ right: 26.5vw; display: block; background-color: #b91212; color: #ffffff; font-size: 1.25vw; font-weight: bold; letter-spacing: 0.08em; width: 23.2vw !important; padding: 1.6vw 0 1.5vw 0vw; position: relative; text-align: center; line-height: 1.4 !important; } .column04-bottan01 a::before{ position: absolute; content: ">"; top: 1.6vw; left: 20.6vw; font-size: 1.3vw; } /*▼▼▼▼ 友人・家族と料理を楽しむ ▼▼▼▼*/ .column04-02_box{ padding: 7vw 0 0; position: relative } /* .column04-02_box::before{ position: absolute; content: ""; display: block; background: url(../img/brown-wine_glass.png)no-repeat center top / 100% auto; top: 32.6vw; left: 55vw; width: 6.4vw; height: 29vw; } */ /* h4タイトル */ .column04-title02{ position: relative; } .column04-title02::before{ position: absolute; content: ""; display: block; background: url(../img/column04-title_bg02.png)no-repeat center top / 100% auto; top: 4.6vw; left: -1.9vw; width: 46.1vw; height: 9vw; z-index: 1; } .column04-title02 h4{ text-align: center; font-weight: normal; color: #2f1b0f; font-size: 2.1vw; padding: 7.8vw 0 0 0 !important; margin-left: -4vw !important; z-index: 2; position: relative; } /* 英語の時 */ .column04-title02 h4 font{ text-align: center; font-weight: normal; font-size: 1.95vw; margin-left: 0.3vw !important; } /* テキスト */ .column04-text02{ font-size: 1.2vw; padding: 4.7vw 1vw 0 3vw; letter-spacing: 0.02em; text-shadow: 0px 0px 7px #0c0c0c, 0px 0px 7px #0c0c0c; } /* テキスト英語の時 */ .column04-text02{ } /* 画像 */ .column04-img02{ padding: 3.7vw 0 0; position: relative; } .column04-img02::before{ position: absolute; content: ""; background: #b91212; top: 31.8vw; left: -3vw; width: 54.1vw; height: 10vw; } .column04-img02 img{ width: 100%; position: relative; } /* ボタン */ .column04-bottan02{ position: relative; padding: 5.8vw 0 0 35.6vw !important; } .column04-bottan02 a{ right: 26.5vw; display: block; background-color: #b91212; color: #ffffff; font-size: 1.25vw; font-weight: bold; letter-spacing: 0.08em; width: 23.2vw !important; padding: 1.6vw 0 1.5vw 0vw; position: relative; text-align: center; line-height: 1.4 !important; } .column04-bottan02 a::before{ position: absolute; content: ">"; top: 1.6vw; left: 20.6vw; font-size: 1.3vw; } .course_box { width: 30vw !important; color: #f6bd10; font-size: 1.1vw; border: 1px solid #f6bd10; padding: 1vw; margin: 0 0 1vw !important; } .kome p { font-size: 1.1vw; } .nomiho_box h4 { text-align: center; font-size: 28px; font-weight: 400; } .nomiho_box .top h4 { border-bottom: 1px solid #eee; padding: 0 0 10px !important; margin: 0 0 10px !important; } .nomiho_text { color: #f6bd10; border: 1px solid #f6bd10; padding: 20px; margin: 20px 0 !important; } /* 飲み放題ドリンクメニュー */ .nomiho table { width: 100%; color: #1e1613; border: 1px solid #1e1613; background-color: #e6d2b3; } .nomiho table tr th { font-size: 20px; border: 1px solid #1e1613; padding: 10px; } .nomiho table tr th, .nomiho table tr td { border: 1px solid #1e1613; padding: 20px; } .nomiho table tr th { color: #fff; background-color: #b91212 !important; } .nomiho table tr th.left { width: 16%; vertical-align: middle; } .course_row_01 .column04-01_box::before, .course_row_03 .column04-01_box::before { background: none !important; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .column04{ color:#2f1b0f; padding: 0 0 21.9vw; } /* h3タイトル */ .column04-h3{ padding: 0 0 3.76vw; } .column04-h3 ul{ text-align: center; font-size:0; } .column04-h3 ul li{ vertical-align: top; font-size:2.8vw; display: inline-block; } .column04-h3 ul li:first-of-type{ margin-right: 3vw; } .column04-h3 ul li img{ width: 8.2vw; } .column04-h3 h3{ font-size: 5.7vw; font-weight: normal; position: relative; line-height: 1.2 !important; letter-spacing: 0.05em; } .column04-h3 h3::before{ position: absolute; content: ""; display: block; background: url(../img/kazari-02.png)no-repeat center top / 100% auto; top: -15vw; left: 27.5vw; width: 17.1vw; height: 19vw; } /*▼▼▼▼ 気の合う仲間とお酒も楽しむ ▼▼▼▼*/ .column04-01_box{ position:relative; } /* h4タイトル */ .column04-title01{ position: relative; } .column04-title01::before{ position: absolute; content: ""; display: block; background: url(../img/column04-title_bg.png)no-repeat center top / 100% auto; top: 2.6vw; left: -1.3vw; width: 96.1vw; height: 19vw; z-index: 1; } .column04-title01 h4{ font-weight: normal; font-size: 5vw; z-index: 2; position: relative; padding: 9.2vw 0 0 1vw !important; text-align: center; } /* 英語になったとき */ .column04-title01 h4 font{ } /* テキスト */ .column04-text01{ color: #fff; padding: 8vw 5vw; } /* 画像 */ .column04-img01{ padding: 3.7vw 0 0; position: relative; } .column04-img01::before{ position: absolute; content: ""; background: #b91212; top: 11.6vw; left: 1vw; width: 81.1vw; height: 52vw; } .column04-img01 img{ width: 90%; position: relative; } /* ボタン */ .column04-bottan01{ position: relative; padding: 0 0 5vw 0 !important; } .column04-bottan01 a{ display: block; background-color: #b91212; color: #ffffff; font-size: 4.2vw; font-weight: bold; letter-spacing: 0.02em; width: 72.4vw !important; padding: 3.9vw 0 3.9vw 1.2vw; margin: 0 auto; position: relative; text-align: center; line-height: 1.4 !important; } .column04-bottan01 a::before{ position: absolute; content: ">"; top: 7.3vw; left: 65vw; font-size: 3.3vw; } /*▼▼▼▼ 友人・家族と料理を楽しむ ▼▼▼▼*/ .column04-02_box{ padding: 10vw 0 0; position: relative } /* h4タイトル */ .column04-title02{ position: relative; } .column04-title02::before{ position: absolute; content: ""; display: block; background: url(../img/column04-title_bg02.png)no-repeat center top / 100% auto; top: 8vw; left: -1.3vw; width: 96.1vw; height: 19vw; z-index: 1; } .column04-title02 h4{ font-weight: normal; font-size: 5vw; z-index: 2; position: relative; padding: 14.2vw 0 0 3.6vw !important; text-align: center; } /* 英語になったとき */ .column04-title02 h4 font{ } /* テキスト */ .column04-text02{ color: #fff; padding: 10vw 5vw 8vw; } /* 画像 */ .column04-img02{ padding: 3.7vw 0 0; position: relative; } .column04-img02::before{ position: absolute; content: ""; background: #b91212; top: 11.6vw; left: 1vw; width: 81.1vw; height: 52vw; } .column04-img02 img{ width: 90%; position: relative; } /* ボタン */ .column04-bottan02{ position: relative; padding: 0 0 5vw 0 !important; } .column04-bottan02 a{ display: block; background-color: #b91212; color: #ffffff; font-size: 4.2vw; font-weight: bold; letter-spacing: 0.02em; width: 72.4vw !important; padding: 3.9vw 0 3.9vw 1.2vw; margin: 0 auto; position: relative; text-align: center; line-height: 1.4 !important; } .column04-bottan02 a::before{ position: absolute; content: ">"; top: 4.3vw; left: 65vw; font-size: 3.3vw; } .course_box { color: #f6bd10; border: 1px solid #f6bd10; padding: 3vw; margin: 0 0 3vw !important; } .kome p { } .nomiho_box h4 { text-align: center; font-size: 6vw; font-weight: 400; } .nomiho_box .top h4 { border-bottom: 1px solid #eee; padding: 0 0 3vw !important; margin: 0 0 3vw !important; } .nomiho_text { color: #f6bd10; border: 1px solid #f6bd10; padding: 3vw; margin: 6vw 0 !important; } /* 飲み放題ドリンクメニュー */ .nomiho table { color: #1e1613; border: 1px solid #1e1613; background-color: #e6d2b3; } .nomiho table tr th { border: 1px solid #1e1613; padding: 2.6vw; } .nomiho table tr th, .nomiho table tr td { border: 1px solid #1e1613; padding: 2.6vw; } .nomiho table tr th { vertical-align: middle; color: #fff; background-color: #b91212 !important; } .nomiho table tr th.left { vertical-align: middle; } .nomiho table tr th, .nomiho table tr td { display: block; text-align: left; width: 100%; } .nomiho table tr th.sp_none { display: none; } .course_row_01 .column04-01_box::before, .course_row_03 .column04-01_box::before { background: none !important; } } /* ================================================================================ アクセスページ ================================================================================ */ .map_box a { width: 100%; height: 450px; display: block; z-index: 100; position: absolute; } .access_table02 tr { border-bottom: 1px dotted #eeeeee !important; } .privacy_policy { color: #f6bd10 !important; background-color: transparent !important; border: 1px solid #f6bd10; } .contact_f7 th span { color: #f6bd10 !important; } .contact_f7 th, .contact_f7 td { border-bottom: dotted 1px #eeeeee !important; } .btn_submit input[type="submit"], .btn_submit input[type="button"] { color: #040000 !important; background-color: #f6bd10 !important; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .contact_f7 tr.address_cell th, .contact_f7 tr.address_cell td { padding: 15px !important; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .contact_f7 tr.address_cell th, .contact_f7 tr.address_cell td { padding: 15px 0 !important; } }