★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */ /* ================================================================================ レイアウト ================================================================================ */ /* 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; } } /* 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) { /* 上にマージンを空ける ----------------------------------------------- */ .top_long { margin: 120px 0 0 0; } .top_middle { margin: 80px 0 0 0; } .top_short { margin: 40px 0 0 0; } .top_vshort { margin: 20px 0 0 0; } /* 下にマージンを空ける ----------------------------------------------- */ .bottom_long { margin: 0 0 120px 0; } .bottom_middle { margin: 0 0 80px 0; } .bottom_short { margin: 0 0 40px 0; } .bottom_vshort { margin: 20px 0 0 0; } /* 両方にマージンを空ける ----------------------------------------------- */ .both_long { margin: 120px 0; } .both_middle { margin: 80px 0; } .both_short { margin: 40px 0; } .both_vshort { margin: 20px 0; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* 上にマージンを空ける ----------------------------------------------- */ .top_long { margin: 16vw 0 0 0; } .top_middle { margin: 12vw 0 0 0; } .top_short { margin: 8vw 0 0 0; } .top_vshort { margin: 4vw 0 0 0; } /* 下にマージンを空ける ----------------------------------------------- */ .bottom_long { margin: 0 0 16vw 0; } .bottom_middle { margin: 0 0 12vw 0; } .bottom_short { margin: 0 0 8vw 0; } .bottom_vshort { margin: 0 0 4vw 0; } /* 両方にマージンを空ける ----------------------------------------------- */ .both_long { margin: 16vw 0; } .both_middle { margin: 12vw 0; } .both_short { margin: 8vw 0; } .both_vshort { margin: 4vw 0; } } /* ================================================================================ パディングボックス ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .row_long { position: relative; padding: 120px 0; } .row_middle { position: relative; padding: 80px 0; } .row_short { position: relative; padding: 40px 0; } .row_vshort { position: relative; padding: 20px 0; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .row_long { position: relative; padding: 16vw 0; } .row_middle { position: relative; padding: 12vw 0; } .row_short { position: relative; padding: 8vw 0; } .row_vshort { position: relative; padding: 4vw 0; } } /* ================================================================================ 区切り ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .separator { position: relative; background: url(../img/separator.png) center top 50% / 140px auto no-repeat; height: 280px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .separator { position: relative; background: url(../img/separator.png) center top 50% / 25vw auto no-repeat; height: 40vw; } } /* ================================================================================ 見出し ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .message-title { text-indent: -9999px; background: url(../img/message-title.png) center top no-repeat; background-size: contain; height: 70px; margin: 0 auto; } .menu-title { text-indent: -9999px; background: url(../img/menu-title.png) center top no-repeat; background-size: contain; height: 70px; margin: 0 auto; } .voice-title { text-indent: -9999px; background: url(../img/voice-title.png) center top no-repeat; background-size: contain; height: 70px; margin: 0 auto; } .blog-title { text-indent: -9999px; background: url(../img/blog-title.png) center top no-repeat; background-size: contain; height: 70px; margin: 0 auto; } .access-title { text-indent: -9999px; background: url(../img/access-title.png) center top no-repeat; background-size: contain; height: 70px; margin: 0 auto; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .message-title { text-indent: -9999px; background: url(../img/message-title.png) center top no-repeat; background-size: contain; height: 11vw; margin: 0 auto; } .menu-title { text-indent: -9999px; background: url(../img/menu-title.png) center top no-repeat; background-size: contain; height: 11vw; margin: 0 auto; } .voice-title { text-indent: -9999px; background: url(../img/voice-title.png) center top no-repeat; background-size: contain; height: 11vw; margin: 0 auto; } .blog-title { text-indent: -9999px; background: url(../img/blog-title.png) center top no-repeat; background-size: contain; height: 11vw; margin: 0 auto; } .access-title { text-indent: -9999px; background: url(../img/access-title.png) center top no-repeat; background-size: contain; height: 11vw; margin: 0 auto; } } /* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ここから各固定ページ ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */ /* ================================================================================ 挨拶ページ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .row_greeting01 { } .row_greeting01 img { border-radius: 53% 73% 59% 68%/67% 62% 58% 58%; } .message-text { letter-spacing: 0.1em; line-height: 2; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .row_greeting01 { } .row_greeting01 img { border-radius: 53% 73% 59% 68%/67% 62% 58% 58%; } .message-text { letter-spacing: 0.1em; line-height: 1.8; } } /* ================================================================================ メニュー ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .row_menu { background-color: #fff; width: 828px; margin: 120px auto 0; border: 8px solid #3d9738; border-radius: 30px; font-family: tbchibirgothicplusk-pro, 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; padding-bottom: 31px; } .row_menu:before { content: ''; background: url(../img/directors.png) center top no-repeat; background-size: contain; width: 297px; height: 147px; position: absolute; margin: -123px 0 0 550px; z-index: -1; } .coupon-box:before { content: ''; background: url(../img/coupon-leaf01.png) center top no-repeat; background-size: contain; width: 164px; height: 166px; position: absolute; margin: -41px 0 0 -37px; z-index: 1; } .coupon-box:after { content: ''; background: url(../img/coupon-leaf02.png) center top no-repeat; background-size: contain; width: 164px; height: 166px; position: absolute; margin: 202px 0 0 689px; z-index: 1; } .coupon-title { position: relative; font-size: 33px; color: #3d9738; letter-spacing: 0.1em; margin: 44px 0 0 206px; /* margin: 44px 0 0 134px;*/ } .coupon-title h2 { font-weight: normal; /* margin-left: 200px !important;*/ margin-top: 10px !important; } /* .coupon-title:before { content: ''; background: url(../img/coupon-first.png) center top no-repeat; background-size: contain; width: 187px; height: 56px; position: absolute; margin: 0 0 0 0; z-index: 1; } */ .normal-time { font-size: 28px; margin: 40px 0 0 112px; letter-spacing: 0.1em; } .normal-price { font-size: 62.5px; margin: -22px 0 0 105px; letter-spacing: 0.02em; } .normal-price span { font-size: 39.3px; } .discount-time { font-size: 20.6px; margin: 31px 0 0 49px; letter-spacing: 0.1em; } .discount-price { font-size: 87px; margin: -38px 0 0 40px; letter-spacing: 0.02em; background: linear-gradient(transparent 80%,#ff6 40%); height: 124px; width: 218px; } .discount-price2 { font-size: 87px; margin: -38px 0 0 40px; letter-spacing: 0.02em; background: linear-gradient(transparent 80%,#ff6 40%); height: 124px; width: 400px; } .discount-price span { font-size: 47.3px; } .discount-price2 span { font-size: 47.3px; } .coupon-attention { text-align: center; font-size: 16.5px; margin-top: 11px; letter-spacing: 0.1em; } .arrow { margin-top: 69px; } /* 見出し ----------------------------------------------- */ .title_tree { position: relative; font-family: tbchibirgothicplusk-pro, 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; } .title_tree h3 { position: relative; padding: 0 0 0 22px !important; letter-spacing: 0.1em; } .title_tree h3::before { position: absolute; content: ""; display: block; background: url(../img/icon_tree.png) center top / contain no-repeat; width: 12px; height: 22px; top: 0px; left: 0px; } /* 予約 ----------------------------------------------- */ .link_yoyaku { text-align: center; } .link_yoyaku h3 { font-size: 22px; margin: 0 0 1em 0; font-family: tbchibirgothicplusk-pro, 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; letter-spacing: 0.1em; } .link_yoyaku ul { font-size: 0; letter-spacing: -0.4em; } .link_yoyaku ul li { display: inline-block; vertical-align: middle; width: 48%; } .link_yoyaku ul li:first-of-type { margin-right: 4%; } .link_yoyaku ul li a img { width: 100%; height: auto; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .row_menu { background-color: #fff; width: 85vw; margin: 24vw auto 0; border: 4px solid #3d9738; border-radius: 8vw; font-family: tbchibirgothicplusk-pro, 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; padding-bottom: 8vw; } .row_menu:before { content: ''; background: url(../img/directors.png) center top no-repeat; background-size: contain; width: 100%; height: 24vw; position: absolute; margin: -19vw 0 0 21vw; z-index: -1; } .coupon-box:before { content: ''; background: url(../img/coupon-leaf01.png) center top no-repeat; background-size: contain; width: 100%; height: 16vw; position: absolute; margin: -4vw 0 0 -38vw; z-index: 1; } .coupon-box:after { content: ''; background: url(../img/coupon-leaf02.png) center top no-repeat; background-size: contain; width: 100%; height: 17vw; position: absolute; margin: 38vw 0 0 38vw; z-index: 1; } .coupon-title { position: relative; font-size: 4vw; color: #3d9738; letter-spacing: 0.1em; margin: 9vw 0 0 0; } .coupon-title h2 { font-weight: normal; margin-left: 15vw !important; /* margin-left: 34vw !important;*/ margin-top: 2vw !important; } /* .coupon-title:before { content: ''; background: url(../img/coupon-first.png) center top no-repeat; background-size: contain; width: 100%; height: 8vw; position: absolute; margin: 0 0 0 -22vw; z-index: 1; } */ .normal-time { font-size: 3.3vw; margin: 4vw 0 0 7vw; letter-spacing: 0.1em; } .normal-price { font-size: 7vw; margin: -1vw 0 0 6.7vw; letter-spacing: 0.02em; } .normal-price span { font-size: 4.5vw; } .discount-time { font-size: 3vw; margin: 3.1vw 0 0 5vw; letter-spacing: 0.1em; } .discount-price { font-size: 10vw; margin: -3.5vw 0 0 5vw; letter-spacing: 0.02em; background: linear-gradient(transparent 80%,#ff6 60%); height: 14.5vw; width: 27vw; } .discount-price2 { font-size: 10vw; margin: -3.5vw 0 0 5vw; letter-spacing: 0.02em; background: linear-gradient(transparent 80%,#ff6 60%); height: 14.5vw; width: 48vw; } .discount-price span { font-size: 6vw; } .discount-price2 span { font-size: 6vw; } .coupon-attention { text-align: center; font-size: 3.2vw; letter-spacing: 0.1em; } .arrow { margin-top: 9vw; } .coupon01-box { width: 36vw; } .coupon02-box { width: 10vw; } .coupon03-box { width: 34vw; } /* 見出し ----------------------------------------------- */ .title_tree { position: relative; font-family: tbchibirgothicplusk-pro, 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; } .title_tree h3 { position: relative; padding: 0 0 0 4.5vw !important; letter-spacing: 0.1em; font-family: tbchibirgothicplusk-pro, 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; } .title_tree h3::before { position: absolute; content: ""; display: block; background: url(../img/icon_tree.png) center top / contain no-repeat; width: 2.8vw; height: 4.5vw; top: 0px; left: 0px; } /* 予約 ----------------------------------------------- */ .link_yoyaku { text-align: center; } .link_yoyaku h3 { font-size: 4vw; margin: 0 0 1em 0; font-family: tbchibirgothicplusk-pro, 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; letter-spacing: 0.1em; } .link_yoyaku ul { } .link_yoyaku ul li { } .link_yoyaku ul li:first-of-type { margin-bottom: 6%; } .link_yoyaku ul li a img { width: 100%; height: auto; } } /* ================================================================================ アクセスページ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .img_curve img { border-radius: 53% 73% 59% 68%/67% 62% 58% 58%; } .map_box a { width: 100%; height: 450px; display: block; z-index: 1; position: absolute; } /* 免責事項 ----------------------------------------------- */ .row_access_menseki { } /* 見出し */ .title_menseki{ text-align: center; } .title_menseki img { width: 379px; height: auto; } .dot_box { border: 3px dotted; border-radius: 30px; padding: 35px; letter-spacing: 0.1em; line-height: 2; } /* 予約フォーム ----------------------------------------------- */ .access_tel_box { position: relative; background-color: #fff; border: 8px solid #3d9738; border-radius: 30px; font-family: tbchibirgothicplusk-pro, 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; padding: 40px 60px; text-align: center; } .access_tel_box::before { position: absolute; left: -37px; top: -41px; content: ''; background: url(../img/coupon-leaf01.png) center top / contain no-repeat; width: 164px; height: 166px; z-index: 1; } .access_tel_box::after { position: absolute; right: -37px; bottom: -41px; content: ''; background: url(../img/coupon-leaf02.png) center top / contain no-repeat; width: 164px; height: 166px; z-index: 1; } .title_tel { font-size: 26px; line-height: 1; margin: 0 0 0.8em 0; } .access_tel { position: relative; color: #6b3f22; font-size: 18px; font-family: tbchibirgothicplusk-pro, 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; line-height: 1.3; letter-spacing: 0.1em; text-align: center; margin: 0 0 0.6em 0; } .access_tel span { display: block; font-size: 2.2em; font-family: roboto, 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; margin-left: 26px; } .access_tel span:before { position: absolute; content: ''; background: url(../img/tel-icon.png) center top / contain no-repeat; width: 23px; height: 33px; margin-left: -34px; margin-top: 11px; z-index: 1; } .access_tel span a { color: #6b3f22; pointer-events: none; } .access_tel2 { font-size: 18px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .img_curve img { border-radius: 53% 73% 59% 68%/67% 62% 58% 58%; } .map_box a { width: 100%; height: 450px; display: block; z-index: 1; position: absolute; } /* 免責事項 ----------------------------------------------- */ .row_access_menseki { } /* 見出し */ .title_menseki{ text-align: center; } .title_menseki img { width: 60vw; height: auto; } .dot_box { border: 3px dotted; border-radius: 8vw; padding: 6vw; letter-spacing: 0.1em; line-height: 1.8; } /* 予約フォーム ----------------------------------------------- */ .access_tel_box { position: relative; background-color: #fff; border: 4px solid #3d9738; border-radius: 8vw; font-family: tbchibirgothicplusk-pro, 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; padding: 6vw; text-align: center; } .access_tel_box::before { position: absolute; left: -6vw; top: -6vw; content: ''; background: url(../img/coupon-leaf01.png) center top / contain no-repeat; width: 20vw; height: 20vw; z-index: 1; } .access_tel_box::after { position: absolute; right: -6vw; bottom: -6vw; content: ''; background: url(../img/coupon-leaf02.png) center top / contain no-repeat; width: 20vw; height: 20vw; z-index: 1; } .title_tel { font-size: 6vw; line-height: 1; margin: 0 0 0.8em 0; } .access_tel { position: relative; color: #6b3f22; font-size: 4vw; font-family: tbchibirgothicplusk-pro, 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; line-height: 1.3; letter-spacing: 0.1em; text-align: center; margin: 0 0 0.6em 0; } .access_tel span { display: block; font-size: 2.2em; font-family: roboto, 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; margin-left: 8vw; } .access_tel span:before { position: absolute; content: ''; background: url(../img/tel-icon.png) center top / contain no-repeat; width: 6vw; height: 7vw; margin-left: -7.5vw; margin-top: 2.5vw; z-index: 1; } .access_tel span a { color: #6b3f22; } .access_tel2 { font-size: 4vw; } }