★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */ /* ================================================================================ レイアウト ================================================================================ */ /* 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; margin: 0 auto; } .inner_wrap { position: relative; width: 100%; margin: 0 auto; } /* セクションのタイトル１ */ .underlayer_title1 { padding: 40px 20px; background: url(../img/mokuzai-bc.png) center / 100% no-repeat; position: relative; border-bottom: 8px solid #BAA08C; margin-bottom: 30px; } .underlayer_title1::before { content: ""; width: 70px; height: 70px; background: url(../img/top-menu-img2.png) center / 100% no-repeat; position:absolute; bottom: 0; left: 40px; } .underlayer_title1::after { content: ""; width: 120px; height: 110px; background: url(../img/03.png) center / 100% no-repeat; position:absolute; bottom: -10px; right: 40px; } .underlayer_title1 > .under_title { color: #fff; font-size: 2em; text-align: center; } /* セクションのタイトル２ */ .underlayer_title2 { padding: 50px 20px; position: relative; } .underlayer_title2 > .under_title { font-size: 2.813em; text-align: center; } .underlayer_title2::before { content: ""; width: 70px; height: 73px; background: url(../img/kobito2.png) center / 100% no-repeat; position:absolute; bottom: 0; left: 40px; } .underlayer_title2::after { content: ""; width: 100%; height: 100%; background: url(../img/short-tree.png) right bottom / contain no-repeat; position:absolute; bottom: 0px; right: 0px; } .head_line { background: url(../img/h-line.png) center top / 100% no-repeat; display: block; height: 3px; width: 100%; margin-bottom: 30px; } /* 画像の背景 */ .img_bc1 { background: url(../img/25979224_m.png) center / 100% no-repeat; background-size: 100% 100%; padding: 15px; } .img_bc2 { background: url(../img/item-bc3.png) center / 100% no-repeat; background-size: 100% 100%; padding: 15px; } } /* 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; } /* セクションのタイトル１ */ .underlayer_title1 { padding: 25px 10px; background: url(../img/mokuzai-bc.png) center / 100% no-repeat; position: relative; border-bottom: 8px solid #BAA08C; margin-bottom: 20px; } .underlayer_title1::before { content: ""; width: 50px; height: 50px; background: url(../img/top-menu-img2.png) center / 100% no-repeat; position: absolute; bottom: -13px; left: 0px; } .underlayer_title1::after { content: ""; width: 60px; height: 60px; background: url(../img/03.png) center / 100% no-repeat; position: absolute; bottom: -25px; right: 0px; } .underlayer_title1 > .under_title { color: #fff; font-size: 6vw; text-align: center; } .under_title.under_title_sm { font-size: 4vw; } /* セクションのタイトル２ */ .underlayer_title2 { padding: 20px 20px; position: relative; } .underlayer_title2 > .under_title { font-size: 6vw; text-align: center; } .underlayer_title2::before { content: ""; width: 50px; height: 50px; background: url(../img/kobito2.png) center / 100% no-repeat; position: absolute; bottom: 0; left: 0px; } .underlayer_title2::after { content: ""; width: 50%; height: 100%; background: url(../img/short-tree.png) right bottom / contain no-repeat; position: absolute; bottom: 0px; right: -50px; } .head_line { background: url(../img/h-line.png) center top / 100% no-repeat; display: block; height: 3px; width: 100%; margin-bottom: 10px; } /* 画像の背景 */ .img_bc1 { background: url(../img/25979224_m.png) center / 100% no-repeat; background-size: 100% 100%; padding: 15px; } .img_bc2 { background: url(../img/item-bc3.png) center / 100% no-repeat; background-size: 100% 100%; padding: 15px; } } /* ================================================================================ メイン画像 ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .main_cate { position: relative; height: 445px; } .main_cate_in { position: relative; } /* メイン画像のタイトル */ .main_cate_in p { font-size: 2em; position: absolute; top: 50%; left: 40px; color: #f8f3df; font-weight: 700; transform: translateY(-50%); text-shadow: 1px 1px 2px rgb(47, 24, 15); } .main_cate_in { position: relative; background: url(../img/top-mv.png) center / 100% no-repeat; max-width: 950px; height: 100%; margin: 0 auto; } /* メイン画像 - コンセプト */ .page-concept .main_cate_in { background: url(../img/concept-mv.png) center top / cover no-repeat; } /* メイン画像 - イベント・ギャラリー */ .page-event .main_cate_in { background: url(../img/16836501_702016799980441_3338124087008361425_o.jpg) center top / cover no-repeat; } /* メイン画像 - その他利用方法 */ .page-party .main_cate_in { background: url(../img/IMGP4928.jpg) center center / cover no-repeat; } /* メイン画像 - 食事 */ .page-food .main_cate_in { background: url(../img/IMGP4861.jpg) center center / cover no-repeat; } /* メイン画像 - 飲み物・デザート */ .page-drink-dessert .main_cate_in { background: url(../img/IMGP5038.jpg) center center / cover no-repeat; } /* メイン画像 - アクセス */ .page-access .main_cate_in { background: url(../img/image10.jpeg) center center / cover no-repeat; } /* メイン画像 - 周辺情報 */ .page-area .main_cate_in { background: url(../img/1000_F_431727185_bPn9Lfd25jh7RvCx2VPXTPZhtCXAujKL.jpg) center center / cover no-repeat; } .main_img1 { width: auto; height: 60%; position: absolute; bottom: -25px; left: 20px; z-index: 100; } .main_img2 { width: auto; height: 100%; position: absolute; top: 0px; right: 0; z-index: 100; } .main_img1 img { width: auto; height: 102%; } .main_img2 img { width: auto; height: 103%; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .main_cate { position: relative; height: 40vh; } .main_cate_in { position: relative; } .main_cate_in p { font-size: 6vw; position: absolute; top: 50%; left: 40px; color: #f8f3df; font-weight: 700; transform: translateY(-50%); text-shadow: 1px 1px 2px rgb(47, 24, 15); } .main_cate_in { position: relative; background: url(../img/top-mv.png) center / 100% no-repeat; max-width: 950px; height: 100%; margin: 0 auto; } /* メイン画像 - コンセプト */ .page-concept .main_cate_in { background: url(../img/concept-mv.png) center top / cover no-repeat; } /* メイン画像 - イベント・ギャラリー */ .page-event .main_cate_in { background: url(../img/16836501_702016799980441_3338124087008361425_o.jpg) center top / cover no-repeat; } /* メイン画像 - その他利用方法 */ .page-party .main_cate_in { background: url(../img/IMGP4928.jpg) center center / cover no-repeat; } /* メイン画像 - 食事 */ .page-food .main_cate_in { background: url(../img/IMGP4861.jpg) center center / cover no-repeat; } /* メイン画像 - 飲み物・デザート */ .page-drink-dessert .main_cate_in { background: url(../img/IMGP5038.jpg) center center / cover no-repeat; } /* メイン画像 - アクセス */ .page-access .main_cate_in { background: url(../img/image10.jpeg) center center / cover no-repeat; } /* メイン画像 - 周辺情報 */ .page-area .main_cate_in { background: url(../img/1000_F_431727185_bPn9Lfd25jh7RvCx2VPXTPZhtCXAujKL.jpg) center center / cover no-repeat; } .main_img1 { width: auto; height: 50%; position: absolute; bottom: -10px; left: -17px; z-index: 100; } .main_img2 { display: none; } .main_img1 img { width: auto; height: 100%; } .main_img2 img { width: auto; height: 103%; } } /* ================================================================================ セクション ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* 2カラム ----------------------------------------------- */ .col2_1, .col2_1_long, .col2_1_middle, .col2_1_short, .col2_1_vshort, .col2_1_mshort { margin-right: 20px; } .col2_2, .col2_2_long, .col2_2_middle, .col2_2_short, .col2_2_vshort, .col2_2_mshort { margin-left: 20px; } /* 3カラム ----------------------------------------------- */ .col3_1 { margin-right: 20px; } .col3_2 { margin-left: 10px; margin-right: 10px; } .col3_3 { margin-left: 20px; } /* 3カラム画像トリミング */ .col3_1 img, .col3_2 img, .col3_3 img { width: 100%; height: 220px; object-fit: cover; font-family: 'object-fit: cover;'; /* IE対策 */ object-position: center top; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* 2カラム ----------------------------------------------- */ .col2_1 { } .col2_1_long { margin-top: 16vw; } .col2_1_middle { margin-top: 12vw; } .col2_1_short { margin-top: 8vw; } .col2_1_vshort { margin-top: 4vw; } .col2_1_mshort { margin-top: 3vw; } .col2_2 { } .col2_2_long { margin-top: 16vw; } .col2_2_middle { margin-top: 12vw; } .col2_2_short { margin-top: 8vw; } .col2_2_vshort { margin-top: 4vw; } .col2_2_mshort { margin-top: 3vw; } /* 3カラム ----------------------------------------------- */ .col3_1 { margin-top: 0; } .col3_2, .col3_3 { margin-top: 12vw; } /* 3カラム画像トリミング */ .col3_1 img, .col3_2 img, .col3_3 img { width: 100%; height: 61vw; object-fit: cover; font-family: 'object-fit: cover;'; /* IE対策 */ object-position: center top; } } /* ================================================================================ マージンボックス ================================================================================ */ /* 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; } .top_mshort { margin-top: 10px; } /* 下にマージンを空ける ----------------------------------------------- */ .bottom_long { margin-bottom: 120px; } .bottom_middle { margin-bottom: 80px; } .bottom_short { margin-bottom: 40px; } .bottom_vshort { margin-bottom: 20px; } .bottom_mshort { margin-bottom: 10px; } } /* 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; } .top_mshort { margin-top: 3vw; } /* 下にマージンを空ける ----------------------------------------------- */ .bottom_long { margin-bottom: 16vw; } .bottom_middle { margin-bottom: 12vw; } .bottom_short { margin-bottom: 8vw; } .bottom_vshort { margin-bottom: 4vw; } .bottom_mshort { margin-bottom: 3vw; } } /* ================================================================================ パディングボックス ================================================================================ */ /* 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_top_mshort { padding-top: 10px; } /* 下にパディングを空ける ----------------------------------------------- */ .p_bottom_long { padding-bottom: 120px; } .p_bottom_middle { padding-bottom: 80px; } .p_bottom_short { padding-bottom: 40px; } .p_bottom_vshort { padding-bottom: 20px; } .p_bottom_mshort { padding-bottom: 10px; } /* 両方にパディングを空ける ----------------------------------------------- */ .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; } .row_mshort { padding-top: 10px; padding-bottom: 10px; } } /* 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_top_mshort { padding-top: 3vw; } /* 下にパディングを空ける ----------------------------------------------- */ .p_bottom_long { padding-bottom: 16vw; } .p_bottom_middle { padding-bottom: 12vw; } .p_bottom_short { padding-bottom: 8vw; } .p_bottom_vshort { padding-bottom: 4vw; } .p_bottom_mshort { padding-bottom: 3vw; } /* 両方にパディングを空ける ----------------------------------------------- */ .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_mshort { padding-top: 3vw; padding-bottom: 3vw; } /* 背景色を伸ばす ----------------------------------------------- */ .row_sp { padding-left: 4vw !important; padding-right: 4vw !important; } } /* ================================================================================ カラーボックス ================================================================================ */ /* カラー01 */ .row_c01 { background: url(../img/spacer.gif) center top / auto auto repeat ,#f5f5f5; color: inherit; } /* カラー02 */ .row_c02 { background: url(../img/spacer.gif) center top / auto auto repeat ,#444444; color: #ffffff; } /* ボーダー囲い色 */ .box_border { border-color: #cccccc; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* カラー01 */ .row_c01 { } /* カラー02 */ .row_c02 { } /* ボーダー囲い */ .box_border { padding: 40px; border-style: solid; border-width: 4px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* カラー01 */ .row_c01 { padding-left: 4vw; padding-right: 4vw; } /* カラー02 */ .row_c02 { padding-left: 4vw; padding-right: 4vw; } /* ボーダー囲い */ .box_border { padding: 4vw; border-style: solid; border-width: 4px; } } /* ================================================================================ 見出し ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* h2見出し ----------------------------------------------- */ .h2_cate { border-bottom: 3px solid; padding: 0 0 12px 0 !important; } .h2_cate h2 { font-size: 32px; font-weight: 500; line-height: 1.4; text-align: center; color: inherit; } .row_c01 .h2_cate h2 { color: inherit; } .row_c02 .h2_cate h2 { color: #ffffff; } /* h3見出し ----------------------------------------------- */ .h3_cate { border-bottom: 1px solid; padding: 0 0 8px 0 !important; } .h3_cate h3 { font-size: 26px; font-weight: 500; line-height: 1.4; text-align: center; color: inherit; } .row_c01 .h3_cate h3 { color: inherit; } .row_c02 .h3_cate h3 { color: #ffffff; } /* 3カラムh3見出し ----------------------------------------------- */ .h3_col3 { border-bottom: 1px dotted; padding: 0 0 8px 0 !important; } .h3_col3 h3 { font-size: 20px; font-weight: 500; line-height: 1.4; color: inherit; } .row_c01 .h3_col3 h3 { color: inherit; } .row_c02 .h3_col3 h3 { color: #ffffff; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* h2見出し ----------------------------------------------- */ .h2_cate { border-bottom: 3px solid; padding: 0 0 2vw 0 !important; } .h2_cate h2 { font-size: 5.5vw; font-weight: 500; line-height: 1.4; text-align: center; color: inherit; } .row_c01 .h2_cate h2 { color: inherit; } .row_c02 .h2_cate h2 { color: #ffffff; } /* h3見出し ----------------------------------------------- */ .h3_cate { border-bottom: 1px solid; padding: 0 0 1.5vw 0 !important; } .h3_cate h3 { font-size: 4.5vw; font-weight: 500; line-height: 1.4; text-align: center; color: inherit; } .row_c01 .h3_cate h3 { color: inherit; } .row_c02 .h3_cate h3 { color: #ffffff; } /* 3カラムh3見出し ----------------------------------------------- */ .h3_col3 { border-bottom: 1px dotted; padding: 0 0 1vw 0 !important; } .h3_col3 h3 { font-size: 4vw; font-weight: 500; line-height: 1.4; color: inherit; } .row_c01 .h3_col3 h3 { color: inherit; } .row_c02 .h3_col3 h3 { color: #ffffff; } } /* ================================================================================ 共通ボタン ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* リンク ----------------------------------------------- */ .link_common { } .link_common ul { font-size: 0; letter-spacing: -0.4em; text-align: center; } .link_common ul li { display: inline-block; font-size: 22px; letter-spacing: 0; } .link_common ul li:not(:first-child) { margin-left: 20px; } .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; } .row_c01 .link_common ul li a { } .row_c02 .link_common ul li a { background-color: #ffffff; color: #444444; } .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; } .row_c01 .link_common ul li a::after { } .row_c02 .link_common ul li a::after { background: url(../img/arrow2.png) center top / contain no-repeat; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* リンク ----------------------------------------------- */ .link_common { } .link_common ul { text-align: center; } .link_common ul li { display: block; font-size: 4vw; } .link_common ul li:not(:first-child) { margin-top: 2vw; } .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; } .row_c01 .link_common ul li a { } .row_c02 .link_common ul li a { background-color: #ffffff; color: #444444; } .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; } .row_c01 .link_common ul li a::after { } .row_c02 .link_common ul li a::after { background: url(../img/arrow2.png) center top / contain no-repeat; } } /* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ここから各固定ページ ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */ /* ================================================================================ 実績紹介部分 ================================================================================ */ /* カテゴリアイコン色 */ .works_icon span { background-color: #222222; color: #ffffff; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .works_wrap { position: relative; width: 1000px; margin:0 auto; } .works_wrap ul { font-size: 0; letter-spacing: -0.4em; text-align: center; } .works_wrap > ul > li { position: relative; display: inline-block; vertical-align: top; text-align: left; width: 320px; margin-left: 20px; font-size: 16px; letter-spacing: 0; } .works_wrap > ul > li:nth-of-type(3n+1) { margin-left: 0; } /* カテゴリアイコン */ .works_icon { position: absolute; top: 16px; left: 0px; z-index: 1; } .works_icon span, .works_icon a { position: relative; display: inline-block; padding: 0 0.5em 0.1em; } /* サムネイル画像 */ .works_thumb img { width: 100%; height: 213px; object-fit: cover; font-family: 'object-fit: cover;'; /* IE対策 */ object-position: center top; } /* 投稿記事見出し */ .works_title a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -o-text-overflow: ellipsis; padding: 0.3em 0.5em; font-size: 18px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .works_wrap { position: relative; margin: 0 auto; } .works_wrap > ul { } .works_wrap > ul > li { position: relative; padding: 0; } .works_wrap > ul > li:not(:first-child) { margin-top: 6vw; } .works_wrap > ul > li > a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -o-text-overflow: ellipsis; border: 1px solid #cccccc; } /* カテゴリアイコン */ .works_icon { position: absolute; top: 4vw; left: 0px; z-index: 1; } .works_icon span, .works_icon a { display: inline-block; padding: 0 0.5em 0.1em; } /* サムネイル画像 */ .works_thumb img { max-width: 100%; width: 100%; height: 62vw; object-fit: cover; font-family: 'object-fit: cover;'; object-position: center top; } /* 投稿記事見出し */ .works_title a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -o-text-overflow: ellipsis; padding: 0.3em 0.5em; font-size: 4vw; } } /* ================================================================================ コンセプトページ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .page-concept { background: url(../img/point-bc.png) center top / 100% repeat; } .page-concept .outer_wrap { padding: 0; } .concept { padding: 90px 20px; background: url(../img/top-sns-bc.png) center top / cover no-repeat; } /* タイトル */ .section_title_img { max-width: 820px; margin: 0 auto; } .section_title_img img { width: 100%; height: auto; } /* コンセプト内容 */ .concept_content { background: url(../img/concept-bc.png) center top / cover no-repeat; background-size: 100% 100%; padding: 100px 20px 75px; max-width: 1000px; width: 100%; margin: 0 auto; color: #fff; margin-top: -100px; text-align: center; } .concept_content { line-height: 40px; font-size: 1.125em; } .modal-open { font-size: 1.3em; width: 285px; text-align: center; padding: 15px; margin: 0 auto; display: block; font-family: 'Noto Serif JP','游明朝',YuMincho,'ヒラギノ明朝 ProN W2','Hiragino Mincho ProN','HG明朝B',serif; color: #fff; border: 1px solid #fff; background: none; margin-top: 50px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* モーダルウィンドウ */ .modal_content { width: 100%; height: 100vh; position: fixed; top: 0%; left: 0%; display: none; color: #fff; background-color: rgba(0, 0, 0, 0.9); z-index: 999; padding-top: 90px; padding-left: 20px; padding-right: 20px; } .modal_content::before { content: ""; width: 130px; height: 200px; background: url(../img/mv-kobito3.png) center top / 100% no-repeat; position: absolute; top: 500px; left: 20%; } .modal_content_title { font-size: 2.5em; padding-bottom: 30px; text-align: center; max-width: 1000px; margin: 0 auto; position: relative; } .modal_content_title::before { content: ""; width: 100%; height: 3px; background: url(../img/h-line.png) center top / 100% no-repeat; bottom: 0; left: 0; position: absolute; } .modal_content_text { font-size: 1.125em; text-align: center; margin-top: 55px; margin-bottom: 75px; } .modal_content.active { display: block; overflow: scroll; } .modal-close { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; border-radius: 0; background: #fff; font-size: 1.5em; width: 285px; text-align: center; padding: 15px; margin: 0 auto; display: block; font-family: 'Noto Serif JP','游明朝',YuMincho,'ヒラギノ明朝 ProN W2','Hiragino Mincho ProN','HG明朝B',serif; } /* 移転挨拶 */ .greeting { background: url(../img/mokuzai-bc.png) center top / 100% repeat; } .greeting_content { display: flex; align-items: stretch; justify-content: center; } .greeting_left, .greeting_right { width: 50%; } .greeting_left { color: #fff; font-size: 1em; padding: 110px 60px; } .greeting_right img{ width: 100%; height: auto; } /* ポイント */ .point { background: url(../img/point-bc.png) center top / 100% repeat; padding: 90px 20px; } .point_item { max-width: 1200px; margin: 0 auto; display: flex; align-items: flex-start; justify-content: center; } .point_item:not(:first-child) { margin-top: 90px; } .point_item_left, .point_item_right { width: 50%; margin-left: 20px; margin-right: 20px; } .point_img { background: url(../img/item-bc3.png) center top / cover no-repeat; padding: 15px; } .big_img { width: 100%; } .big_img img { width: 100%; height: auto; } .sm_img { width: calc(50% - 5px) } .sm_img img { width: 100%; height: auto; } .point_sm { display: flex; align-items: center; justify-content: center; margin-top: 10px; } .point_sm img:first-child { margin-right: 10px; } .point_num img{ max-width: 315px; width: 100%; margin-bottom: 15px; } .point_title { font-size: 1.5em; position: relative; padding: 0 10px; padding-bottom: 15px; font-weight: 400; } .point_title::before { content: ""; width: 100%; height: 3px; background: url(../img/h-line.png) center top / 100% no-repeat; bottom: 0; left: 0; position: absolute; } .point_text { padding: 0 10px; } /* ギャラリー */ .viewing { background: url(../img/mokuzai-bc.png) center top / 100% repeat; padding: 90px 20px; } .viewing > .section_title_img { position: relative; z-index: 10; } .viewing_container { width: 900px; margin-left: auto; margin-right: auto; margin-top: -80px; } .sub-img li.current img { border: 2px solid rgb(172, 172, 172); transition: border .5s; } .main-img { height: 535px; width: 100%; background: url(../img/item-bc2.png) center top / 100% no-repeat; background-size: 100%, 100%; padding: 30px; margin-bottom: 25px; } .main-img img { height: auto; width: 100%; } .sub-img { display: flex; margin-top: 10px; } .sub-img li { margin-right: 2%; width: calc(96% / 3); } .sub-img li:nth-child(4n) { margin-right: 0; } .sub-img li img { border: 2px solid transparent; transition: border .5s; } .sub-img img { cursor: pointer; width: 100%; } .change_text { color: #fff; margin-bottom: 45px; } /* メニューボタン */ .menu_link { padding: 50px 20px; background: url(../img/footer-bc.png) center top / cover no-repeat; } /* メニューのボタン横並び*/ .menu_btn1 { display: flex; align-items: center; justify-content: center; } .menu_btn1 > .menu_btn_item { width: 320px; padding: 70px 10px; color: #fff; font-size: 1.875em; text-align: center; margin-right: 10px; display: inline-block; } .menu_btn1 > .menu_btn_item:last-child { margin-right: 0; } .menu_btn1 > .menu_btn_item:nth-child(1) { background: url(../img/top-menu-link1.png) center top / cover no-repeat; } .menu_btn1 > .menu_btn_item:nth-child(2) { background: url(../img/top-menu-link2.png) center top / cover no-repeat; } .menu_btn1 > .menu_btn_item:nth-child(3) { background: url(../img/top-menu-link3.png) center top / cover no-repeat; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .page-concept .outer_wrap { padding: 0; } .page-concept .inner_wrap { padding: 0; } .concept { padding: 90px 20px 60px; background: url(../img/top-sns-bc.png) center top / cover no-repeat; } .concept_wrap { position: relative; padding: 90px 0 0; } /* タイトル */ .section_title_img { position: absolute; top: 25px; left: 50%; transform: translateX(-50%); margin: 0 calc(50% - 50vw); width: 120vw; margin-left: auto; margin-right: auto; z-index: 10; } .section_title_img img { width: 100%; height: auto; } /* コンセプト内容 */ .concept_content { background: url(../img/concept-bc.png) center top / cover no-repeat; background-size: 100% 100%; padding: 60px 15px 60px; max-width: 1000px; width: 100%; margin: 0 auto; color: #fff; margin-top: -100px; text-align: center; } .concept_content { line-height:25px; font-size: 3.5vw; } .modal-open { font-size: 3.5vw; width: 285px; text-align: center; padding: 15px; margin: 0 auto; display: block; font-family: 'Noto Serif JP','游明朝',YuMincho,'ヒラギノ明朝 ProN W2','Hiragino Mincho ProN','HG明朝B',serif; color: #fff; border: 1px solid #fff; background: none; margin-top: 50px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* モーダルウィンドウ */ .modal_content { width: 100%; height: 100vh; position: fixed; top: 0%; left: 0%; display: none; color: #fff; background-color: rgba(0, 0, 0, 0.9); z-index: 999; padding-top: 90px; padding-left: 20px; padding-right: 20px; } .modal_content::before { content: ""; width: 100px; height: 160px; background: url(../img/mv-kobito3.png) center top / 100% no-repeat; position: absolute; bottom: 0; left: 0; } .modal_content_title { font-size: 5vw; padding-bottom: 10px; text-align: center; max-width: 1000px; margin: 0 auto; position: relative; } .modal_content_title::before { content: ""; width: 100%; height: 3px; background: url(../img/h-line.png) center top / 100% no-repeat; bottom: 0; left: 0; position: absolute; } .modal_content_text { font-size: 3.5vw; text-align: center; margin-top: 55px; margin-bottom: 35px; } .modal_content.active { display: block; } .modal-close { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; border-radius: 0; background: #fff; font-size: 5vw; width: 285px; text-align: center; padding: 15px; margin: 0 auto; display: block; font-family: 'Noto Serif JP','游明朝',YuMincho,'ヒラギノ明朝 ProN W2','Hiragino Mincho ProN','HG明朝B',serif; } /* 移転挨拶 */ .greeting { background: url(../img/mokuzai-bc.png) center top / 100% repeat; } .greeting_content { display: flex; flex-direction: column-reverse; } .greeting_left, .greeting_right { width: 100%; } .greeting_left { color: #fff; font-size: 3.5vw; padding: 40px 20px; } .greeting_right img{ width: 100%; height: auto; } /* ポイント */ .point { background: url(../img/point-bc.png) center top / 100% repeat; padding: 60px 20px; } .point_item { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } .point_item:not(:first-child) { margin-top: 45px; } .point_item_left, .point_item_right { width: 100%; margin-left: 0px; margin-right: 0px; } .point_img { background: url(../img/item-bc3.png) center top / cover no-repeat; padding: 8px; } .big_img { width: 100%; } .big_img img { width: 100%; height: auto; } .sm_img { width: calc(50% - 5px) } .sm_img img { width: 100%; height: auto; } .point_sm { display: flex; align-items: center; justify-content: center; margin-top: 10px; } .point_sm img:first-child { margin-right: 10px; } .point_num img{ max-width: 150px; width: 100%; margin-bottom: 5px; margin-top: 15px; } .point_title { font-size: 5vw; position: relative; padding: 0 10px; padding-bottom: 8px; font-weight: 400; } .point_title::before { content: ""; width: 100%; height: 3px; background: url(../img/h-line.png) center top / 100% no-repeat; bottom: 0; left: 0; position: absolute; } .point_title span { text-align: right; display: block; } .point_title.mt { margin-top: 15px; } .point_text { padding: 0 10px; } /* ギャラリー */ .viewing { background: url(../img/mokuzai-bc.png) center top / 100% repeat; padding: 60px 20px; } .viewing > .section_title_img { position: relative; z-index: 10; } .viewing_container { width: 100%; margin-left: auto; margin-right: auto; margin-top: -40px; } .sub-img li.current img { border: 2px solid rgb(172, 172, 172); transition: border .5s; } .main-img { height: auto; width: 100%; background: url(../img/item-bc2.png) center top / 100% no-repeat; background-size: 100%, 100%; padding: 10px; margin-bottom: 10px; } .main-img img { height: auto; width: 100%; } .sub-img { display: flex; margin-top: 10px; flex-wrap: wrap; } .sub-img li { margin-right: 2%; width: calc(96% / 2); } .sub-img li:nth-child(2n) { margin-right: 0; } .sub-img li img { border: 2px solid transparent; transition: border .5s; } .sub-img img { cursor: pointer; width: 100%; } .change_text { color: #fff; margin-bottom: 30px; } .reverse { flex-direction: column-reverse; } /* メニューボタン */ .menu_link { padding: 40px 20px; background: url(../img/footer-bc.png) center top / cover no-repeat; } /* メニューのボタン横並び*/ .menu_btn1 { display: block; margin-top: 0px; } .menu_btn1 > .menu_btn_item { width: 100%; padding: 40px 10px; color: #fff; font-size: 5vw; text-align: center; margin-right: 0px; display: inline-block; margin-top: 10px; } .menu_btn1 > .menu_btn_item:last-child { margin-right: 0; } .menu_btn1 > .menu_btn_item:nth-child(1) { background: url(../img/top-menu-link1.png) center center / cover no-repeat; } .menu_btn1 > .menu_btn_item:nth-child(2) { background: url(../img/top-menu-link2.png) center center / cover no-repeat; } .menu_btn1 > .menu_btn_item:nth-child(3) { background: url(../img/top-menu-link3.png) center center / cover no-repeat; } } /* ================================================================================ 食事ページ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .page-food { background: url(../img/point-bc.png) center top / 100% repeat; } .page-food .outer_wrap { padding-top: 0; padding-bottom: 0; } /* ピックアップ */ .pickup_table01.menu_title th { padding-left: 50px; position: relative; } .pickup_table01.menu_title th::before { content: ""; width: 55px; height: 72px; background: url(../img/089024.png) center top / 100% no-repeat; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); z-index: 10; } .pickup_table01.menu_title.coffee_menu th::before { content: ""; width: 55px; height: 72px; background: url(../img/coffee-beans.png) center top / 100% no-repeat; position: absolute; left: -5px; top: 50%; transform: translateY(-50%); z-index: 10; } .pickup_table01.menu_title td { padding-top: 15px !important; } /* メニュー詳細 */ .moriawase { background-color: #F9F0D9; text-align: center; padding: 60px 20px; border-radius: 20px; } .menu_title { font-size: 1.8em; font-weight: 800; line-height: 1em; text-align: center; } .green { color: #6C864C; font-size: 1.3em; } /* メニューフレックス */ .menu_flex { max-width: 880px; border-radius: 20px; background-color: #d0b99f; padding: 40px 30px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } .menu_flex_left { width: 60%; } .menu_flex_right { margin: 15px; width: 40%; } .menu_flex_right img{ width: 100%; } .menu_flex_left .menu_bold { text-align: left; } .menu_bold { max-width: 700px; border-radius: 20px; background-color: #d0b99f; padding: 40px 30px; margin: 0 auto; } .menu_price { background: url(../img/pub_menu_hyo.png) center top / 100% no-repeat; background-size: 100% 100%; padding: 60px 30px; position: relative; } .menu_price::before { content: ""; width: 100%; height: 50px; top: 0; left: 0; background: url(../img/leaf-line.png) center top / 140% no-repeat; position: absolute; } .omori { background: url(../img/leaf-line.png) center top / 140% no-repeat; } .latte_img img{ max-width: 250px; height: auto; margin: 20px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .page-food { background: url(../img/point-bc.png) center top / 100% repeat; } .page-food .outer_wrap { padding-top: 0; padding-bottom: 0; } /* ピックアップ */ .pickup_table01.menu_title th { padding-left: 50px; position: relative; } .pickup_table01.menu_title th::before { content: ""; width: 55px; height: 72px; background: url(../img/089024.png) center top / 100% no-repeat; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); z-index: 10; } .pickup_table01.menu_title.coffee_menu th::before { content: ""; width: 55px; height: 72px; background: url(../img/coffee-beans.png) center top / 100% no-repeat; position: absolute; left: -5px; top: 50%; transform: translateY(-50%); z-index: 10; } .pickup_table01.menu_title td { padding-top: 15px !important; } /* メニュー詳細 */ .moriawase { background-color: #F9F0D9; text-align: center; padding: 30px 20px; border-radius: 20px; } .menu_title { font-size: 6vw; font-weight: 800; line-height: 1.2em; text-align: center; } .green { color: #6C864C; font-size: 4.8vw; } /* メニューフレックス */ .menu_flex { max-width: 880px; border-radius: 20px; background-color: #d0b99f; padding: 30px 15px; margin: 0 auto; } .menu_flex_left { } .menu_flex_right { margin: 15px; } .menu_flex_right img{ width: 100%; } .menu_flex_left .menu_bold { text-align: center; padding: 15px; } .menu_bold { max-width: 700px; border-radius: 20px; background-color: #d0b99f; padding: 40px 10px; margin: 0 auto; } .menu_price { background: url(../img/pub_menu_hyo.png) center top / 100% no-repeat; background-size: 100% 100%; padding: 60px 15px; position: relative; } .menu_price::before { content: ""; width: 100%; height: 50px; top: 0; left: 0; background: url(../img/leaf-line.png) center top / 180% no-repeat; position: absolute; } .omori { background: url(../img/leaf-line.png) center top / 140% no-repeat; } } /* ================================================================================ 飲み物/デザートページ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .page-drink-dessert { background: url(../img/point-bc.png) center top / 100% repeat; } .page-drink-dessert .outer_wrap { padding-top: 0; padding-bottom: 0; } .cafe_price { background-color: #d0b99f; } .menu_title_sub { font-size: 1.8em; } .drink_midashi { text-align: center; } .midashi_bc { background: url(../img/midashi1.png) center top / 100% no-repeat; display: inline-block; width: 250px; padding: 15px; text-align: center; } .coffee { background-color: #2d1e14; color: #fff; padding: 30px 15px; position: relative; border-radius: 10px; } /* .coffee::before { content: ""; width: 80px; height: 80px; position: absolute; background: url(../img/coffee_cup.png) center top / 100% no-repeat; top: 10%; right: 0px; } */ .irish_coffee { font-size: 1.2em; text-align: center; } .irish_coffee_line { background: url(http://www.celtic-moon.jp/wordpress2023/wp-content/uploads/2023/07/line-img.png) center bottom / 100% no-repeat; width: 100%; height: 60px; margin-top: -25px; } .flex_tyousei > div > div{ align-items: flex-start; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .page-drink-dessert { background: url(../img/point-bc.png) center top / 100% repeat; } .page-drink-dessert .outer_wrap { padding-top: 0; padding-bottom: 0; } .cafe_price { background-color: #d0b99f; } .menu_title_sub { font-size: 1.8em; } .drink_midashi { text-align: center; } .midashi_bc { background: url(../img/midashi1.png) center top / 100% no-repeat; display: inline-block; width: 250px; padding: 15px; text-align: center; } .coffee { background-color: #2d1e14; color: #fff; padding: 30px 15px; position: relative; border-radius: 10px; } /* .coffee::before { content: ""; width: 55px; height: 55px; position: absolute; background: url(../img/coffee_cup.png) center top / 100% no-repeat; top: 10%; right: 0px; } */ .irish_coffee { font-size: 1.2em; text-align: center; } .irish_coffee_line { background: url(http://www.celtic-moon.jp/wordpress2023/wp-content/uploads/2023/07/line-img.png) center bottom / 100% no-repeat; width: 100%; height: 60px; margin-top: -25px; } .flex_tyousei > div > div{ align-items: flex-start; } .sp_coffee_img { max-width: 200px; margin: 0 auto; } .page-drink-dessert .col3_1 img,.page-drink-dessert .col3_2 img,.page-drink-dessert .col3_3 img { height: inherit; } .coffee_price { font-size: 1.2em; margin-bottom: 20px; } .coffee_2.top_short { margin-top: 0 !important; } } /* ================================================================================ その他利用方法ページ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .page-party { background: url(../img/point-bc.png) center top / 100% repeat; } .page-party .outer_wrap { padding-top: 0; padding-bottom: 0; } .party_content { background: url(../img/top-menu-bc2.png) center top / 100% repeat; background-size: 100% 100%; padding: 60px 30px; } .party_text { text-align: center; font-size: 2em; margin-bottom: 25px; } .party_img1 { transform: rotate(-5deg); } .party_img2 { transform: rotate(8deg); } .party_img3 { transform: rotate(-6deg); } .party_text2 { text-align: center; } .party_text_wrap { padding-left: 20px; padding-right: 20px; } .party_contact { color: #fff; font-size: 1.2em; } /* レンタルスペース */ .rental_text { text-align: center; margin-bottom: 25px; } /* 利用規約 */ .b_btn a{ padding: 10px 20px; border: 1.5px solid #482409; color: #482409; font-size: 1.8em; /* max-width: 350px; */ width: 100%; display: block; margin: 0 auto; } .rental_contact { background: url(../img/rental_bc.png) center bottom / cover no-repeat; padding: 80px 0px; position: relative; } .rental_contact::before { content: ""; width: 251px; height: 200px; background: url(../img/kobito-hukusu.png) center top / 100% no-repeat; position: absolute; left: 10px; top: 10px; z-index: 10; } .rental_contact::after { content: ""; width: 150px; height: 150px; background: url(../img/06.png) center top / 100% no-repeat; position: absolute; right: 60px; bottom: 20px; z-index: 10; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .page-party { background: url(../img/point-bc.png) center top / 100% repeat; } .page-party .outer_wrap { padding-top: 0; padding-bottom: 0; } .party_content { background: url(../img/top-menu-bc2.png) center top / 100% repeat; background-size: 100% 100%; padding: 60px 30px; } .party_text { text-align: center; font-size: 4.8vw; margin-bottom: 10px; } .party_img1 { transform: rotate(-5deg); } .party_img2 { transform: rotate(8deg); } .party_img3 { transform: rotate(-6deg); } .party_text2 { text-align: center; } .party_text_wrap { padding-left: 0px; padding-right: 0px; } .party_contact { color: #fff; font-size: 1.2em; } /* レンタルスペース */ .rental_text { text-align: center; margin-bottom: 25px; } /* 利用規約 */ .b_btn a{ padding: 10px 20px; border: 1.5px solid #482409; color: #482409; font-size: 6vw; max-width: 350px; width: 100%; display: block; margin: 0 auto; } .rental_contact { background: url(../img/rental_bc.png) center bottom / cover no-repeat; padding: 80px 0px; position: relative; width: 100vw; margin: 0 calc(50% - 50vw); margin-top: 8vw; } .rental_contact::before { content: ""; width: 121px; height: 100px; background: url(../img/kobito-hukusu.png) center top / 100% no-repeat; position: absolute; left: 10px; top: -10px; z-index: 10; } .rental_contact::after { content: ""; width: 60px; height: 60px; background: url(../img/06.png) center top / 100% no-repeat; position: absolute; right: 10px; bottom: 130px; z-index: 10; } } /* ================================================================================ イベント/ギャラリーページ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .page-event { background: url(../img/point-bc.png) center top / 100% repeat; } .page-event .outer_wrap { padding-top: 0; padding-bottom: 0; } .midashi { background: url(../img/midashi1.png) center top / 100% no-repeat; display: inline-block; width: 200px; padding: 10px; text-align: center; } .event_text { margin-top: 5px !important; } .event_contact { background: url(../img/event-bc.png) center top / cover no-repeat; padding: 80px 0px; position: relative; } .event_contact::before { content: ""; width: 291px; height: 175px; background: url(../img/mv-ryori.png) center top / 100% no-repeat; position: absolute; left: 10px; top: 10px; z-index: 10; } .event_contact::after { content: ""; width: 190px; height: 125px; background: url(../img/check-kobito.png) center top / 100% no-repeat; position: absolute; right: 60px; bottom: 0; z-index: 10; } .event_contact_title { font-size: 2.5em; text-align: center; color: #fff; padding: 45px 10px; background-color: rgba(0, 0, 0, 0.5); letter-spacing: 0.2em; } .event_contact_title span { font-size: 1.25em; color: #FFE51D; } .event_contact_link { text-align: center; } .event_contact_link > div > div { align-items: center; } .tel_btn_w a { border-bottom: 1px solid #fff; } .event_contact_link .w_btn a{ padding: 10px 20px; border: 1.5px solid #fff; color: #fff; font-size: 1.8em; } .event_content { display: flex; align-items: flex-start; justify-content: center; } .event_content li{ width: calc(100% / 3); margin-left: 10px; margin-right: 10px; } /* ストーリー */ /*ベース*/ .story_toggle { display: none; } .Label { /*タイトル*/ padding: 1.2em; display: block; color: #fff; background: #675745; } .Label::before{ /*タイトル横の矢印*/ content:""; width: 6px; height: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: rotate(45deg); position: absolute; top:calc( 50% - 3px ); right: 20px; transform: rotate(135deg); } .Label, .story_content { -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); transition: all 0.3s; } .story_content { /*本文*/ height: 0; margin-bottom:10px; padding:0 5px; overflow: hidden; } .story_content li { margin-bottom: 10px; padding-left: 20px; position: relative; } .story_content li::before{ content: ""; width: 15px; height: 15px; position: absolute; top: 50%; left: 0; transform: translateY(-50%); background: url(../img/moon.png) center top / 100% no-repeat; } .story_content li a{ font-size: 1em; } .story_toggle:checked + .Label + .story_content { /*開閉時*/ height: auto; padding: 10px 5px; transition: all .3s; } .story_toggle:checked + .Label::before { transform: rotate(-45deg) !important; } /* ギャラリー */ .gallery_text { text-align: center; } .gallery_content { position: relative; } .gallery_content::before{ content: ""; width: 115px; height: 180px; position: absolute; top: 50%; left: 0; transform: translateY(-50%); background: url(../img/mv-kobito3.png) center top / 100% no-repeat; } .gallery_content::after{ content: ""; width: 100px; height: 180px; position: absolute; top: 50%; right: 0; transform: translateY(-50%); background: url(../img/top-menu-img1.png) center top / 100% no-repeat; } .illust{ display: block; width: 100%; position: relative; } .illust::before{ content: ""; width: 130px; height: 160px; position: absolute; bottom: -100px; right: 70px; transform: translateY(-50%); background: url(../img/kobito1.png) center top / 100% no-repeat; } .illust::after{ content: ""; width: 100px; height: 100px; position: absolute; bottom: -80px; left: 13%; transform: translateY(-50%); background: url(../img/06.png) center top / 100% no-repeat; } .gallery_item .post_date, .event_item .post_date, .latte_item .post_date{ display: none; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .page-event { background: url(../img/point-bc.png) center top / 100% repeat; } .page-event .outer_wrap { padding-top: 0; padding-bottom: 0; } .midashi { background: url(../img/midashi1.png) center top / 100% no-repeat; background-size: 100% 100%; display: inline-block; width: 200px; padding: 10px; text-align: center; margin-top: 0 !important; } .event_text { margin-top: 5px !important; } .event_contact { background: url(../img/event-bc.png) center top / cover no-repeat; padding: 80px 0px; position: relative; width: 100vw; margin: 0 calc(50% - 50vw); margin-top: 8vw; } .event_contact::before { content: ""; width: 130px; height: 80px; background: url(../img/mv-ryori.png) center top / 100% no-repeat; position: absolute; left: -26px; top: 10px; z-index: 10; } .event_contact::after { content: ""; width: 130px; height: 85px; background: url(../img/check-kobito.png) center top / 100% no-repeat; position: absolute; right: -36px; bottom: 0; z-index: 10; } .event_contact_title { font-size: 7vw; text-align: center; color: #fff; padding: 25px 10px; background-color: rgba(0, 0, 0, 0.5); letter-spacing: 0.2em; line-height: 1.2em; } .event_contact_title span { font-size: 8.5vw; color: #FFE51D; } .event_contact_link { text-align: center; } .event_contact_link > div > div { align-items: center; } .tel_btn_w a { border-bottom: 1px solid #fff; } .event_contact_link .w_btn a{ padding: 10px 20px; border: 1.5px solid #fff; color: #fff; font-size: 6vw; } .event_content { display: block } .event_content li{ width: 100%; margin-left: 0px; margin-right: 0px; margin-bottom: 15px; } .event_content li:last-child{ margin-bottom: 0px; } .calendar_content iframe { height: 300px; } /* ストーリー */ /*ベース*/ .story_toggle { display: none; } .Label { /*タイトル*/ padding: 15px; font-size: 3.8vw; display: block; color: #fff; background: #675745; } .Label::before{ /*タイトル横の矢印*/ content:""; width: 6px; height: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: rotate(45deg); position: absolute; top:calc( 50% - 3px ); right: 20px; transform: rotate(135deg); } .Label, .story_content { -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); transition: all 0.3s; } .story_content { /*本文*/ height: 0; margin-bottom:10px; padding:0 5px; overflow: hidden; } .story_content li { margin-bottom: 10px; padding-left: 20px; position: relative; } .story_content li::before{ content: ""; width: 15px; height: 15px; position: absolute; top: 50%; left: 0; transform: translateY(-50%); background: url(../img/moon.png) center top / 100% no-repeat; } .story_content li a{ font-size: 3.8vw; } .story_toggle:checked + .Label + .story_content { /*開閉時*/ height: auto; padding: 10px 5px; transition: all .3s; } .story_toggle:checked + .Label::before { transform: rotate(-45deg) !important; } /* ラテ */ .top_short.mt_none { margin-top: 0 !important; } /* ギャラリー */ .gallery_text { text-align: center; } .gallery_content { position: relative; } .gallery_content::before{ content: ""; width: 65px; height: 100px; position: absolute; bottom: -42%; left: -14px; transform: translateY(-50%); background: url(../img/mv-kobito3.png) center top / 100% no-repeat; } .gallery_content::after{ content: ""; width: 84px; height: 100px; position: absolute; top: 21%; right: 0; transform: translateY(-50%); background: url(../img/top-menu-img1.png) center top / 100% no-repeat; } .illust{ display: block; width: 100%; position: relative; } .illust::before{ content: ""; width: 80px; height: 100px; position: absolute; bottom: -100px; right: -28px; transform: translateY(-50%); background: url(../img/kobito1.png) center top / 100% no-repeat; } .illust::after{ content: ""; width: 50px; height: 50px; position: absolute; bottom: -66px; left: 10%; transform: translateY(-50%); background: url(../img/06.png) center top / 100% no-repeat; } .gallery_item .post_date, .event_item .post_date, .latte_item .post_date{ display: none; } } /* ================================================================================ 周辺情報/観光案内ページ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .page-area { background: url(../img/point-bc.png) center top / 100% repeat; } .page-area .outer_wrap { padding-top: 0; padding-bottom: 0; } /* ピックアップ */ .area_item_title { padding-left: 50px; position: relative; margin-bottom: 15px; font-size: 1.5em; } .area_item_title::before { content: ""; width: 50px; height: 50px; background: url(../img/yubisashi.png) center top / 100% no-repeat; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); z-index: 10; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .page-area { background: url(../img/point-bc.png) center top / 100% repeat; } .page-area .outer_wrap { padding-top: 0; padding-bottom: 0; } /* ピックアップ */ .area_item_title { padding-left: 50px; position: relative; margin-bottom: 15px; font-size: 5vw; } .area_item_title::before { content: ""; width: 50px; height: 50px; background: url(../img/yubisashi.png) center top / 100% no-repeat; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); z-index: 10; } } /* ================================================================================ アクセスページ ================================================================================ */ .map_box a { width: 100%; height: 450px; display: block; z-index: 1; position: absolute; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .page-access { background: url(../img/point-bc.png) center top / 100% repeat; } .page-access .outer_wrap { padding-top: 0; padding-bottom: 0; } .access_attention_wrap { background: url(../img/item-bc2.png) center top / 100% no-repeat; background-size: 100% 100%; text-align: center; padding: 45px 20px; position: relative; } .access_attention { padding-left: 20px; padding-right: 20px; } .access_attention_wrap::before { content: ""; background: url(../img/mv-kobito3.png) center bottom / 100% no-repeat; width: 150px; height: 230px; position: absolute; bottom: 0; left: 10px; } .access_text { line-height: 40px; margin-bottom: 45px; } .tel_btn { text-align: center; } .tel_btn a{ padding: 10px; padding-left: 50px; border: 1.5px solid #482409; position: relative; font-size: 1.875em; } .tel_btn a::before{ content: ""; width: 30px; height: 30px; background: url(../img/tel-icon2.png) center top / 100% no-repeat; position: absolute; top: 50%; left: 10px; transform: translateY(-50%); } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .page-access { background: url(../img/point-bc.png) center top / 100% repeat; } .page-access .outer_wrap { padding-top: 0; padding-bottom: 0; } .access_attention_wrap { background: url(../img/item-bc2.png) center top / 100% no-repeat; background-size: 100% 100%; text-align: center; padding: 45px 20px 55px; position: relative; } .access_attention { padding-left: 20px; padding-right: 20px; } .access_attention_wrap::before { content: ""; background: url(../img/mv-kobito3.png) center bottom / 100% no-repeat; width: 80px; height: 125px; position: absolute; bottom: -15px; left: -20px; z-index: 10; } .access_text { margin-bottom: 55px; } .tel_btn { text-align: center; } .tel_btn a{ padding: 10px; padding-left: 50px; border: 1.5px solid #482409; position: relative; font-size: 6.4vw; } .tel_btn a::before{ content: ""; width: 30px; height: 30px; background: url(../img/tel-icon2.png) center top / 100% no-repeat; position: absolute; top: 50%; left: 10px; transform: translateY(-50%); } .map_box a { width: 100%; height: 250px; display: block; z-index: 1; position: absolute; } .page-access iframe { height: 250px; } }