★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */ /* ================================================================================ レイアウト ================================================================================ */ /* 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: 80px 0 133px; 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: 12vw 0; } .inner_wrap { position: relative; width: 100%; padding: 0 4vw; } } /* ================================================================================ マージンボックス ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* 上にマージンを空ける ----------------------------------------------- */ .top_long { margin-top: 120px; } .top_middle { margin-top: 80px; } .top_short { margin-top: 40px; } .top_vshort { margin-top: 20px; } /* 下にマージンを空ける ----------------------------------------------- */ .bottom_long { margin-bottom: 120px; } .bottom_middle { margin-bottom: 80px; } .bottom_short { margin-bottom: 40px; } .bottom_vshort { margin-bottom: 20px; } /* 両方にマージンを空ける ----------------------------------------------- */ .both_long { margin-top: 120px; margin-bottom: 120px; } .both_middle { margin-top: 80px; margin-bottom: 80px; } .both_short { margin-top: 40px; margin-bottom: 40px; } .both_vshort { margin-top: 20px; margin-bottom: 20px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* 上にマージンを空ける ----------------------------------------------- */ .top_long { margin-top: 16vw; } .top_middle { margin-top: 12vw; } .top_short { margin-top: 8vw; } .top_vshort { margin-top: 4vw; } /* 下にマージンを空ける ----------------------------------------------- */ .bottom_long { margin-bottom: 16vw; } .bottom_middle { margin-bottom: 12vw; } .bottom_short { margin-bottom: 8vw; } .bottom_vshort { margin-bottom: 4vw; } /* 両方にマージンを空ける ----------------------------------------------- */ .both_long { margin-top: 16vw; margin-bottom: 16vw; } .both_middle { margin-top: 12vw; margin-bottom: 12vw; } .both_short { margin-top: 8vw; margin-bottom: 8vw; } .both_vshort { margin-top: 4vw; margin-bottom: 4vw; } } /* ================================================================================ パディングボックス ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* 上にパディングを空ける ----------------------------------------------- */ .p_top_long { padding-top: 120px; } .p_top_middle { padding-top: 80px; } .p_top_short { padding-top: 40px; } .p_top_vshort { padding-top: 20px; } /* 下にパディングを空ける ----------------------------------------------- */ .p_bottom_long { padding-bottom: 120px; } .p_bottom_middle { padding-bottom: 80px; } .p_bottom_short { padding-bottom: 40px; } .p_bottom_vshort { padding-bottom: 20px; } /* 両方にパディングを空ける ----------------------------------------------- */ .row_long { padding-top: 120px; padding-bottom: 120px; } .row_middle { padding-top: 80px; padding-bottom: 80px; } .row_short { padding-top: 40px; padding-bottom: 40px; } .row_vshort { padding-top: 20px; padding-bottom: 20px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* 上にパディングを空ける ----------------------------------------------- */ .p_top_long { padding-top: 16vw; } .p_top_middle { padding-top: 12vw; } .p_top_short { padding-top: 8vw; } .p_top_vshort { padding-top: 4vw; } /* 下にパディングを空ける ----------------------------------------------- */ .p_bottom_long { padding-bottom: 16vw; } .p_bottom_middle { padding-bottom: 12vw; } .p_bottom_short { padding-bottom: 8vw; } .p_bottom_vshort { padding-bottom: 4vw; } /* 両方にパディングを空ける ----------------------------------------------- */ .row_long { padding-top: 16vw; padding-bottom: 16vw; } .row_middle { padding-top: 12vw; padding-bottom: 12vw; } .row_short { padding-top: 8vw; padding-bottom: 8vw; } .row_vshort { padding-top: 4vw; padding-bottom: 4vw; } /* 背景色を伸ばす ----------------------------------------------- */ .row_sp { padding-left: 4vw !important; padding-right: 4vw !important; } } /* ================================================================================ カラーボックス ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* カラー01 */ .row_c01 { background: url(../img/spacer.gif) center top / auto auto repeat ,#f5f5f5; } /* カラー02 */ .row_c02 { background: url(../img/spacer.gif) center top / auto auto repeat ,#eeeeee; } /* ボーダー囲い */ .box_border { padding: 40px; border: 8px solid #cccccc; } /* 画像のボーダー囲い */ .img_border img { border: 8px solid #cccccc; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* カラー01 */ .row_c01 { background: url(../img/spacer.gif) center top / auto auto repeat ,#f5f5f5; padding-left: 4vw; padding-right: 4vw; } /* カラー02 */ .row_c02 { background: url(../img/spacer.gif) center top / auto auto repeat ,#eeeeee; padding-left: 4vw; padding-right: 4vw; } /* ボーダー囲い */ .box_border { padding: 4vw; border: 2vw solid #cccccc; } /* 画像のボーダー囲い */ .img_border img { border: 2vw solid #cccccc; } } /* ================================================================================ 見出し ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* h2見出し ----------------------------------------------- */ .h2_cate { border-bottom: 3px solid #000000; padding: 0 0 16px 0 !important; } .h2_cate h2 { font-size: 32px; font-weight: 500; text-align: center; } /* h3見出し ----------------------------------------------- */ .h3_cate { border-bottom: 1px solid #000000; padding: 0 0 12px 0 !important; } .h3_cate h3 { font-size: 26px; font-weight: 500; text-align: center; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* h2見出し ----------------------------------------------- */ .h2_cate { border-bottom: 3px solid #000000; padding: 0 0 2vw 0 !important; } .h2_cate h2 { font-size: 5.5vw; font-weight: 500; line-height: 1.4 !important; text-align: center; } /* h3見出し ----------------------------------------------- */ .h3_cate { border-bottom: 1px solid #000000; padding: 0 0 1.5vw 0 !important; } .h3_cate h3 { font-size: 4.5vw; font-weight: 500; line-height: 1.4 !important; text-align: center; } } /* ================================================================================ 共通ボタン ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* リンク ----------------------------------------------- */ .link_common { margin-top: 40px; } .link_common ul { font-size: 0; letter-spacing: -0.4em; text-align: center; } .link_common ul li { display: inline-block; font-size: 24px; letter-spacing: 0; margin-left: 20px; } .link_common ul li:first-of-type { margin-left: 0; } .link_common ul li a { position: relative; display: block; background-color: #666666; color: #ffffff; letter-spacing: 0.05em; text-indent: 0.05em; line-height: 1.3; padding: 0.8em 4em 0.9em; } .link_common ul li a::after { position: absolute; content: ""; display: block; background: url(../img/arrow.png) center top / contain no-repeat; width: 10px; height: 15px; top: 50%; margin-top: -7px; right: 16px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* リンク ----------------------------------------------- */ .link_common { margin-top: 6vw; } .link_common ul { text-align: center; } .link_common ul li { display: block; font-size: 4vw; } .link_common ul li { margin-top: 2vw; } .link_common ul li:first-of-type { margin-top: 0; } .link_common ul li a { position: relative; display: block; width: 80vw; background-color: #666666; color: #ffffff; letter-spacing: 0.05em; text-indent: 0.05em; line-height: 1.3; padding: 0.8em 0 0.9em; margin-left: auto; margin-right: auto; } .link_common ul li a::after { position: absolute; content: ""; display: block; background: url(../img/arrow.png) center top / contain no-repeat; width: 2vw; height: 3vw; top: 50%; margin-top: -1.5vw; right: 3vw; } } /* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ここから各固定ページ ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */ a{ color:#222; } /* ================================================================================ 〇〇ページ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .main_cate img{ width:100vw; height:auto; } .cate_title{ color: #222; width: 50px; margin: 0 auto; font-size: 30px; letter-spacing: 13px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .main_cate img{ width:100vw; height:auto; } .h_logo { position: absolute; margin: 4.3vw 0 0 6vw; z-index: 10; } .h_logo img { width: 14vw; } .cate_title{ color: #222; width: 7vw; margin: 0 auto; font-size: 6vw; letter-spacing: 5px; } } /* ================================================================================ 〇〇ページ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .message_01{ width:1000px; margin:0 auto; text-align:center; } .message_01_pic{ width:80%; margin: 47px auto 0; } .message_01_pic img{ width:100%; } .message_01_text_base{ display: flex; flex-direction: row; margin-top: 72px; width: 712px; text-align: center; margin-left: 64px; margin-bottom: 100px; } .message_01_midashi, .message_01_text{ flex-direction: column-reverse; } .message_01_midashi{ text-align: left; writing-mode: vertical-rl; height: 370px; padding: 26px; font-size: 24px; color: #222; border-left: 1px solid #B0948B; border-right: 1px solid #B0948B; letter-spacing: 3px; } .message_01_text{ writing-mode: vertical-rl; height: 419px; text-align: left; color: #222; width: 557px; padding-right: 50px; line-height: 2.5; } .message_02{ display: flex; width: 934px; margin: 85px auto 0; } .message_02_left{ width: 74%; } .message_02_midashi{ font-size: 26px; line-height: 1.8; margin-bottom: 26px; } .message_02_text{ font-size:16px; } message_02_right{ width:48%; } .message_02_pic img{ width:100%; } .top_01_haikei01{ background-image: url(../img/nami_left.jpg); background-position: -21px -428px; background-size: cover; height: 440px; position: absolute; width: 400px; margin-top: -400px; z-index: -1; } .top_01_haikei02{ background-image: url(../img/nami_right.jpg); background-position: -21px 428px; background-size: cover; height: 440px; position: absolute; width: 400px; margin-top: -331px; margin-left: 739px; z-index: -1; } .top_01_haikei03{ background-image: url(../img/nami_left.jpg); background-position: -21px -428px; background-size: cover; height: 440px; position: absolute; width: 400px; margin-top: -400px; z-index: -1; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .message_01{ width: 93vw; margin:0 auto; text-align:center; } .message_01_pic{ width: 100%; margin: 7vw auto 0; } .message_01_pic img{ width:100%; } .message_01_text_base{ display: flex; flex-direction: row; margin-top: 12vw; width: 87vw; text-align: center; margin-left: 0; margin-bottom: 0vw; } .message_01_midashi, .message_01_text{ flex-direction: column-reverse; } .message_01_midashi{ text-align: left; writing-mode: vertical-rl; height: 100vw; padding: 3vw; font-size: 5vw; color: #222; border-left: 1px solid #B0948B; border-right: 1px solid #B0948B; letter-spacing: 3px; } .message_01_text{ writing-mode: vertical-rl; height: 114vw; text-align: left; color: #222; width: 71vw; padding-right: 3vw; line-height: 2; } .message_02{ display: block; width: 90vw; margin: 12vw auto 0; } .message_02_left{ width: 100%; } .message_02_midashi{ font-size: 5vw; line-height: 1.8; margin-bottom: 12vw; text-align: center; } .message_02_text{ font-size: 3.6vw; line-height: 2; margin-bottom: 13vw; } message_02_right{ width:100%; } .message_02_pic img{ width:100%; } .top_01_haikei01{ background-image: url(../img/nami_left.jpg); background-position: -21px -428px; background-size: cover; height: 440px; position: absolute; width: 400px; margin-top: -400px; } .top_01_haikei02{ background-image: url(../img/nami_right.jpg); background-position: -21px 428px; background-size: cover; height: 440px; position: absolute; width: 400px; margin-top: -331px; margin-left: 739px; } .top_01_haikei03{ background-image: url(../img/nami_left.jpg); background-position: -21px -428px; background-size: cover; height: 440px; position: absolute; width: 400px; margin-top: -400px; } } /* ================================================================================ 〇〇ページ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .menu_01{ display: flex; width: 934px; margin: 85px auto 0; } .menu_01_left{ width: 74%; } .menu_01_midashi{ font-size: 23px; line-height: 1.8; margin-bottom: 26px; padding-bottom: 5px; border-bottom: 1px solid #BFB0B0; letter-spacing: 1px; padding-right: 10px; width: 440px; } .menu_01_text{ font-size:16px; } .menu_01_right{ width:48%; } .menu_01_pic img{ width:100%; } .menu_oomidashi{ line-height: 27px; font-size: 18px; text-indent: 29px; margin-bottom: 6px; } .menu_oomidashi:before{ content: ''; display: inline-block; width: 28px; height: 27px; background-image: url(../img/menu_icon.jpg); background-size: contain; vertical-align: middle; margin-right: 8px; position:absolute; margin-left: -31px; } .menu_name{ margin-left: 30px; color: #646060; margin-bottom: 10px; width: 410px; padding-right: 10px; } .menu_shosai{ border-top: 1px solid #BBB4B4; font-size: 13px; color: #605B5B; width: 410px; padding-right: 10px; margin-left: 30px; margin-bottom: 30px; padding-top:10px; } .menu_kakaku{ width: 400px; text-align: right; margin-top: -37px; margin-bottom: 5px; color:#646060; } .top_midashi{ font-size: 24px; letter-spacing: 7px; } .top_midashi_en{ font-size:15px; color:#878787; letter-spacing:2px; font-size: 12px; } .menu_02{ width: 1000px; margin: 100px auto 6px; text-align: center; } .menu_02_bg{ background: #a47e64; padding-top: 60px; height: 356px; margin-top: 49px; } .menu_02_in{ width: 1003px; margin:0 auto; display: flex; } .menu_02_pic{ width:500px; } .menu_02_pic img{ width:100%; height:auto; } .menu_02_text{ width: 500px; padding-left: 30px; padding-top: 23px; } .menu_02_midashi{ font-size: 20px; color: #FFF; line-height: 22px; margin-left: 30px; margin-bottom: 21px; } .menu_02_midashi:before{ content: ''; display: inline-block; width: 28px; height: 27px; background-image: url(../img/menu_icon_white.png); background-size: contain; vertical-align: middle; margin-right: 8px; position:absolute; margin-left: -31px; } .menu_02_kisetsu_title{ font-size: 16px; color: #FFF; margin-left: 30px; padding-bottom: 10px; border-bottom: 1px solid #C1AB8E; margin-bottom: 10px; } .menu_02_shousai{ font-size: 16px; color: #FFF; margin-left: 30px; } .menu_03{ width: 1000px; margin: 129px auto 6px; text-align: center; } .menu_03_bg{ padding-top: 60px; height: 356px; margin-top: 0px; } .menu_03_in{ width: 1003px; margin:0 auto; display: flex; } .menu_03_pic{ width:500px; } .menu_03_pic img{ width:100%; height:auto; } .menu_03_text{ width: 500px; padding-right: 30px; padding-top: 23px; } .menu_03_midashi{ font-size: 28px; color: #1e1d1d; line-height: 48px; margin-left: 59px; letter-spacing: 2px; margin-bottom: 24px; } .menu_03_midashi:before{ content: ''; display: inline-block; width: 35px; height: 35px; background-image: url(../img/menu_icon_brown.png); background-size: contain; vertical-align: middle; margin-right: 8px; position: absolute; margin-left: -40px; margin-top: 8px; } .menu_03_kisetsu_title{ font-size: 16px; color: #1e1d1d; margin-left: 30px; padding-bottom: 10px; border-bottom: 1px solid #C1AB8E; margin-bottom: 10px; } .menu_03_shousai{ font-size: 16px; color: #1e1d1d; margin-left: 30px; line-height: 1.8; } .menu_04{ width: 1000px; margin: 145px auto 6px; text-align: center; } .menu_04_bg{ padding-top: 0; margin-top: 49px; } .menu_04_in{ width: 1003px; margin:0 auto; display: flex; } .menu_04_pic{ width:500px; } .menu_04_pic img{ width:100%; height:auto; } .menu_04_text{ width: 500px; padding-left: 30px; padding-top: 23px; } .menu_04_midashi{ font-size: 21px; color: #1e1d1d; line-height: 48px; margin-left: 59px; letter-spacing: 2px; margin-bottom: 7px; } .menu_04_midashi:before{ content: ''; display: inline-block; width: 24px; height: 24px; background-image: url(../img/menu_icon_brown.png); background-size: contain; vertical-align: middle; margin-right: 8px; position: absolute; margin-left: -35px; margin-top: 13px; } .menu_04_kisetsu_title{ font-size: 16px; color: #1e1d1d; margin-left: 30px; padding-bottom: 10px; border-bottom: 1px solid #C1AB8E; margin-bottom: 10px; } .menu_04_shousai{ font-size: 15px; color: #1e1d1d; margin-left: 30px; margin-bottom: 32px; } .menu_042_in{ width: 1003px; margin: 28px auto 0; display: flex; } .menu_042_pic{ width:500px; } .menu_042_pic img{ width:100%; height:auto; } .menu_042_text{ width: 500px; padding-right: 30px; padding-top: 0px; } .menu_042_midashi{ font-size: 28px; color: #1e1d1d; line-height: 48px; margin-left: 59px; letter-spacing: 2px; margin-bottom: 24px; } .menu_042_midashi:before{ content: ''; display: inline-block; width: 35px; height: 35px; background-image: url(../img/menu_icon_brown.png); background-size: contain; vertical-align: middle; margin-right: 8px; position: absolute; margin-left: -40px; margin-top: 8px; } .menu_042_kisetsu_title{ font-size: 16px; color: #1e1d1d; margin-left: 30px; padding-bottom: 10px; border-bottom: 1px solid #C1AB8E; margin-bottom: 10px; } .menu_042_shousai{ font-size: 16px; color: #1e1d1d; margin-left: 30px; line-height: 1.8; } .menu_05{ width:1000px; margin: 82px auto -1px; text-align:center; } .menu_05_pic{ } .menu_05_pic ul{ width: 1000px; margin: 32px auto 0; } .menu_05_pic li{ display:inline-block; width : calc(100% / 3.1) ; padding: 21px; } .take_kakaku{ margin-top: -27px; text-align: right; padding-bottom: 9px; border-bottom: 1px solid #A6A6A6; } .take_title{ text-align: left; } .take_text{ margin-top: 10px !important; text-align: left; font-size: 15px; } .take_05_pic01{ margin: 0 auto 12px; } .take_05_pic01 img{ width:100%; } .takeout_01 li{ display: inline-block; width: calc(100% / 2.1); padding: 20px; } .takeout_01 ul{ width:900px; margin:0 auto; } .takeout_info{ font-size:14px; text-align:center; margin-top: 30px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .menu_01{ width: 90vw; margin: 10vw auto 0; } .menu_01_left{ width: 100%; } .menu_01_midashi{ font-size: 6vw; line-height: 1.8; margin-bottom: 5vw; padding-bottom: 3vw; border-bottom: 1px solid #BFB0B0; letter-spacing: 1px; padding-right: 10px; width: 90vw; } .menu_01_text{ font-size:16px; } .menu_01_right{ width: 100%; } .menu_01_pic img{ width:100%; } .menu_oomidashi{ line-height: 27px; font-size: 18px; text-indent: 29px; margin-bottom: 6px; } .menu_oomidashi:before{ content: ''; display: inline-block; width: 28px; height: 27px; background-image: url(../img/menu_icon.jpg); background-size: contain; vertical-align: middle; margin-right: 8px; position:absolute; margin-left: -31px; } .menu_name{ margin-left: 5vw; color: #646060; margin-bottom: 2vw; width: 76%; padding-right: 3vw; } .menu_shosai{ border-top: 1px solid #BBB4B4; font-size: 4vw; color: #605B5B; width: 91%; padding-right: 3vw; margin-left: 6vw; margin-bottom: 8vw; padding-top: 3vw; } .menu_kakaku{ width: 100%; text-align: right; margin-top: -10vw; margin-bottom: 3vw; color: #646060; } .top_midashi{ font-size: 24px; letter-spacing: 7px; } .top_midashi_en{ font-size:15px; color:#878787; letter-spacing:2px; font-size: 3vw; } .menu_02{ width: 90vw; margin: 21vw auto 3vw; text-align: center; } .menu_02_bg{ background: #a47e64; padding-top: 6vw; height: 124vw; margin-top: 9vw; } .menu_02_in{ width: 90vw; margin: 0 auto; display: block; } .menu_02_pic{ width: 90vw; } .menu_02_pic img{ width:100%; height:auto; } .menu_02_text{ width: 90vw; padding-left: 0; padding-top: 5vw; } .menu_02_midashi{ font-size: 5vw; color: #FFF; line-height: 7.3vw; margin-left: 11vw; margin-bottom: 3vw; } .menu_02_midashi:before{ content: ''; display: inline-block; width: 28px; height: 27px; background-image: url(../img/menu_icon_white.png); background-size: contain; vertical-align: middle; margin-right: 8px; position:absolute; margin-left: -31px; } .menu_02_kisetsu_title{ font-size: 4vw; color: #FFF; margin-left: 3vw; padding-bottom: 3vw; border-bottom: 1px solid #C1AB8E; margin-bottom: 3vw; margin-top: 3vw; } .menu_02_shousai{ font-size: 3.5vw; color: #FFF; margin-left: 3vw; } .menu_03{ width: 90vw; margin: 22vw auto 0; text-align: center; } .menu_03_bg{ padding-top: 5vw; margin-top: 0px; } .menu_03_in{ width: 90vw; margin:0 auto; } .menu_03_pic{ width: 100%; } .menu_03_pic img{ width:100%; height:auto; margin-bottom:4vw; } .menu_03_text{ width: 90vw; padding-top: 6vw; } .menu_03_midashi{ font-size: 5vw; color: #1e1d1d; line-height: 8vw; letter-spacing: 2px; margin-bottom: 7vw; width: 60vw; margin-left: 21vw; } .menu_03_midashi:before{ content: ''; display: inline-block; width: 35px; height: 35px; background-image: url(../img/menu_icon_brown.png); background-size: contain; vertical-align: middle; margin-right: 8px; position: absolute; margin-left: -40px; margin-top: 8px; } .menu_03_kisetsu_title{ font-size: 16px; color: #1e1d1d; margin-left: 30px; padding-bottom: 10px; border-bottom: 1px solid #C1AB8E; margin-bottom: 10px; } .menu_03_shousai{ font-size: 3.4vw; color: #1e1d1d; line-height: 1.8; width: 86vw; margin-bottom: 5vw; } .menu_04{ width: 40vw; margin: 5vw auto 5vw; text-align: center; } .menu_04_bg{ padding-top: 0; margin-top: 4vw; } .menu_04_in{ width: 90vw; margin:0 auto; display: block; } .menu_04_pic{ width: 90vw; } .menu_04_pic img{ width:100%; height:auto; } .menu_04_text{ width: 90vw; padding-left: 0; padding-top: 7vw; } .menu_04_midashi{ font-size: 5vw; color: #1e1d1d; line-height: 13vw; margin-left: 16vw; letter-spacing: 2px; margin-bottom: 0vw; } .menu_04_midashi:before{ content: ''; display: inline-block; width: 24px; height: 24px; background-image: url(../img/menu_icon_brown.png); background-size: contain; vertical-align: middle; margin-right: 8px; position: absolute; margin-left: -35px; margin-top: 13px; } .menu_04_kisetsu_title{ font-size: 16px; color: #1e1d1d; margin-left: 30px; padding-bottom: 10px; border-bottom: 1px solid #C1AB8E; margin-bottom: 10px; } .menu_04_shousai{ font-size: 15px; color: #1e1d1d; margin-left: 30px; margin-bottom: 32px; } .menu_042_in{ width: 90vw; margin: 5vw auto 0; display: block; } .menu_042_pic{ width:90vw; } .menu_042_pic img{ width:100%; height:auto; } .menu_042_text{ width: 90vw; padding-right: 30px; padding-top: 0px; } .menu_042_midashi{ font-size: 5vw; color: #1e1d1d; line-height: 7vw; margin-left: 14vw; letter-spacing: 2px; margin-bottom: 5vw; width: 72vw; margin-top: 8vw; } .menu_042_midashi:before{ content: ''; display: inline-block; width: 35px; height: 35px; background-image: url(../img/menu_icon_brown.png); background-size: contain; vertical-align: middle; margin-right: 8px; position: absolute; margin-left: -40px; margin-top: 8px; } .menu_042_kisetsu_title{ font-size: 16px; color: #1e1d1d; margin-left: 30px; padding-bottom: 10px; border-bottom: 1px solid #C1AB8E; margin-bottom: 10px; } .menu_042_shousai{ font-size: 3.6vw; color: #1e1d1d; margin-left: 6vw; line-height: 1.8; width: 78vw; background: #F4F0EB; padding: 5vw; margin-bottom: 8vw; } .menu_05{ width: 90vw; margin: 19vw auto 2vw; text-align:center; } .menu_05_pic{ } .menu_05_pic ul{ width: 90vw; margin: 3vw auto 0; } .menu_05_pic li{ padding: 6vw; } .take_kakaku{ margin-top: -9vw; text-align: right; padding-bottom: 4vw; border-bottom: 1px solid #A6A6A6; font-size: 5vw; } .take_title{ text-align: left; font-size: 5vw; margin-top: 4vw; } .take_text{ margin-top: 4vw !important; text-align: left; font-size: 3.6vw; } .take_05_pic01{ margin: 0 auto 12px; } .take_05_pic01 img{ width:100%; } .takeout_01 li{ } .takeout_01 ul{ width: 78vw; margin: 0 auto; } .takeout_info{ font-size:3.4vw; text-align:center; margin-top: 5vw; } } /* ================================================================================ 〇〇ページ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .tennai_01{ width: 1000px; margin: 60px auto 0; } .tennai_01_tuboniwa_pic{ } .tuboniwa_base{ display: flex; } .tuboniwa_left{ width: 65%; display: flex; margin-top: 50px; } .tuboniwa_right{ width:32%; padding-top: 48px; } .tuboniwa_midashi{ font-size: 73px; color: #131313; letter-spacing: 11px; } .tuboniwa_text{ color:#665a50; } .now_tuboniwa{ background: #d8cdc3; padding: 16px; display: flex; margin-top: 30px; } .now_tuboniwa_konki{ font-size:20px; line-height: 30px; } .now_tuboniwa_konki_name{ font-size: 24px; line-height: 30px; margin-left: 22px; } .tuboniwa_pic_sample{ } .tennai_02{ width: 1000px; margin: 60px auto 0; } .white{ color:#FFF; } .tenntai_02_midashi{ color: #131313; letter-spacing: 11px; font-size: 55px; position: absolute; margin-left: 922px; } .tennai_02_tuboniwa_pic{ padding-top: 60px; } .tennai_02_text{ padding:10px 0; color:#665a50; } .tennai_03{ width: 1000px; margin: 60px auto 0; } .tenntai_03_midashi{ color: #131313; letter-spacing: 11px; font-size: 55px; margin-left: 0px; text-align:center; } .tennai_03_tuboniwa_pic{ padding-top: 60px; } .tennai_03_text{ padding: 10px 0 0 0; color:#665a50; text-align:center; width: 1053px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .tennai_01{ width: 82vw; margin: 60px auto 0; } .tennai_01_tuboniwa_pic{ width:100vw; } .tennai_01_tuboniwa_pic img{ width: 100%; margin-left: -9vw; margin-bottom: 8vw; } .tuboniwa_base{ display: flex; } .tuboniwa_left{ width: 106%; display: flex; margin-top: 9vw; margin-left: -3vw; } .tuboniwa_right{ width:32%; padding-top: 48px; display: none; } .tuboniwa_midashi{ font-size: 14vw; color: #131313; letter-spacing: 11px; } .tuboniwa_text{ padding: 8px; color:#665a50; } .now_tuboniwa{ background: #d8cdc3; padding: 5vw; margin-top: 5vw; } .now_tuboniwa_konki{ font-size: 3vw; line-height: 6vw; color:#D96565; } .now_tuboniwa_konki_name{ font-size: 4vw; line-height: 6vw; margin-left: 0vw; } .tuboniwa_pic_sample{ } .tennai_02{ width: 100vw; margin: 60px auto 0; } .white{ color:#FFF; } .tenntai_02_midashi{ color: #fff; letter-spacing: 5px; font-size: 6vw; position: absolute; margin-left: 55vw; margin-top: 4vw; } .tennai_02_tuboniwa_pic{ width:100vw; } .tennai_02_tuboniwa_pic img{ width: 100%; margin-left: -4vw; margin-bottom: 8vw; } .tennai_02_text{ padding: 0 0; color: #665a50; width: 92vw; margin-top: -5vw; } .tennai_03{ width: 100vw; margin: 60px auto 0; } .tenntai_03_midashi{ color: #000; letter-spacing: 5px; font-size: 6vw; margin-left: 0; margin-top: 4vw; text-align: center; width: 97vw; } .tennai_03_tuboniwa_pic{ width:100vw; } .tennai_03_tuboniwa_pic img{ width: 100%; margin-left: -4vw; margin-bottom: 8vw; } .tennai_03_text{ padding: 0 0; color: #665a50; width: 92vw; margin-top: 3vw; } } /* ================================================================================ 〇〇ページ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .tennai_01{ } .info_01_info{ } .info_01_info ul{ font-size: 0ox; width: 600px; margin: 0 auto; } .info_01_info li{ display: inline-block; font-size: 16px; padding: 2px; color: #514541; } li.komoku{ width: 30%; } li.naiyo{ width: 69%; } li.lines{ width:100%; border-bottom: 1px solid #B39F8E; } .info_01_map{ width: 786px; margin: 42px auto 0; } .info_01_map iframe{ width: 100%; height: 376px; } .info_01_link{ text-align: center; padding-top: 30px; } .info_01_link a{ background: #dccec1; display: block; width: 300px; padding: 10px 0; text-align: center; margin: 0 auto 101px; } .info_01_link a:hover{ color:#FFF; } .info_01_link:before{ content: ''; display: inline-block; width: 15px; height: 23px; background-image: url(../img/map_icon.jpg); background-size: contain; vertical-align: middle; margin-right: 8px; position: absolute; margin-left: -71px; margin-top: 13px; } .info02{ } .info02_message{ font-size: 14px; color: #807671; width: 600px; margin: 32px auto 0; text-align: center; } .info02_text{ font-size: 13px; width: 600px; margin: 0 auto; margin-top: 0px; margin-top: 23px; border-top: 1px solid #B3A8A4; padding-top: 23px; color: #555; } .info03_tel{ width: 600px; text-align: center; margin@: 0; margin: 39px auto 7px; font-size: 23px; letter-spacing: 2px; } .info03_tel_base{ border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 1px solid #93857d; display: flex; padding: 20px 60px; width: 600px; margin: 0 auto; line-height: 37px; } .info03_01{ font-size: 13px; padding-right: 10px; } .info03_02{ font-size: 30px; letter-spacing: 2px; padding-right: 6px; } info03_03{ font-size:12px; } .opentable{ text-align:center; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .tennai_01{ } .info_01_info{ } .info_01_info ul{ font-size: 0ox; width: 81vw; margin: 0 auto; } .info_01_info li{ display: inline-block; font-size: 16px; padding: 2px; color: #514541; } li.komoku{ width: 30%; } li.naiyo{ width: 96%; } li.lines{ width:100%; border-bottom: 1px solid #B39F8E; } .info_01_map{ width: 81vw; margin: 2vw auto 0; } .info_01_map iframe{ width: 100%; height: 376px; } .info_01_link{ text-align: center; padding-top: 30px; } .info_01_link a{ background: #dccec1; display: block; width: 60vw; padding: 5vw 0; text-align: center; margin: 0 auto 10vw; } .info_01_link a:hover{ color:#FFF; } .info_01_link:before{ content: ''; display: inline-block; width: 15px; height: 23px; background-image: url(../img/map_icon.jpg); background-size: contain; vertical-align: middle; margin-right: 8px; position: absolute; margin-left: -71px; margin-top: 13px; } .info02{ } .info02_message{ font-size: 3.2vw; color: #807671; width: 90vw; margin: 9vw auto 0; text-align: center; } .info02_text{ font-size: 3.6vw; width: 90vw; margin: 0 auto; margin-top: 0px; margin-top: 0px; margin-top: 5vw; border-top: 1px solid #B3A8A4; padding-top: 5vw; color: #555; } .info03_tel{ width: 90vw; text-align: center; margin@: 0; margin: 8vw auto 5vw; font-size: 5vw; letter-spacing: 2px; } .info03_tel_base{ border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 1px solid #93857d; padding: 3vw 5vw 6vw; width: 90vw; margin: 0 auto; line-height: 8vw; text-align: center; } .info03_01{ font-size: 4vw; padding-right: 10px; } .info03_02{ font-size: 8vw; letter-spacing: 2px; padding-right: 6px; } info03_03{ font-size:4vw; } .opentable{ text-align:center; width:90vw; } .ot-dtp-picker.wide { width: 806px; width: 90vw !important; } }