★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */ /* ================================================================================ レイアウト ================================================================================ */ /* 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: 12vw 0;*/ } .inner_wrap { position: relative; width: 100%; /*padding: 0 4vw;*/ } } /* ================================================================================ メイン画像 ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .main_cate { position: relative; height: 525px; background-position: center; background-size: cover; } .main_cate_in { position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%) } /* メイン画像のタイトル */ .main_cate_in h1 { font-size: 50px; text-align: center; color: #FFFFFF; font-family: 'EB Garamond', serif; letter-spacing: .2em; } body.page-id-541 .main_cate,body.page-id-548 .main_cate{ background-position: top center; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .main_cate { position: relative; height: 40vh; background-position: center; background-size: cover; } .main_cate_in { position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%) } /* メイン画像のタイトル */ .main_cate_in h1 { font-size: 8vw; text-align: center; color: #FFFFFF; font-family: 'EB Garamond', serif; letter-spacing: .2em; } body.page-id-541 .main_cate,body.page-id-548 .main_cate{ background-position: top center; } } /* ================================================================================ セクション ================================================================================ */ /* 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: 209px; 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; } } /* ================================================================================ 予約 ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .f_reserve{ max-width: 1000px; width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 13px; padding-top: 58px; } .f_reserve #sns_low_area{ margin-top: 48px; } .f_reserve #sns_low_area ul{ display: flex; } .f_reserve #sns_low_area ul li{ box-shadow: 10px 3px 31px #000E15; width: 50%; } .f_reserve #sns_low_area ul li:not(:last-of-type){ margin-right: 2.9%; } .f_reserve #sns_low_area ul li img{ width: 100%; height: auto; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .f_reserve{ padding-left: 4.6vw; padding-right: 4.6vw; width: 100%; padding-top: 12vw; } .f_reserve #sns_low_area{ margin-top: 6vw; } .f_reserve #sns_low_area ul li{ box-shadow: 1vw 1vw 5vw #000E15; } .f_reserve #sns_low_area ul li:not(:first-of-type){ margin-top: 7vw; } .f_reserve #sns_low_area ul li img{ width: 100%; height: auto; } } /* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ここから各固定ページ ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */ /* ================================================================================ 実績紹介部分 ================================================================================ */ /* カテゴリアイコン色 */ .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) { #lowMain{ background:url("../img/low/lowMain_bg.jpg") no-repeat center / cover; padding-top:92px; padding-bottom: 89px; text-align: center; } #lowMain h2{ color:#113D5C; font-size: 36px; margin-bottom: 0.8em; font-weight: 400; line-height: 1.45em; text-shadow: 3px 2px 6px rgba(0,61,95,.24); } #lowMain p{ font-size: 16px; } .lowSub{ padding-top: 132.4px; padding-bottom: 102.2px; } .lowSub p{ margin-top: 0; max-width: 778px; margin-left: auto; margin-right: auto; text-align: center; } .low_main_title{ position: relative; } .low_main_title::after { content: url(../img/top/flowsub_bg.png); position: absolute; top: 50%; left: 50%; transform: translate(-55%,-46%); z-index: -1; } .low_main_title h2 { font-size: 20px; text-align: center; font-weight: 300; letter-spacing: .1em; } .low_main_title span { font-size: 32.5px; text-align: center; /*font-weight: 300;*/ display: block; letter-spacing: .29em; line-height: 1.7em; } .lowSub .low_main_title{ margin-bottom: 77.4px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { #lowMain{ background:url("../img/low/lowMain_bg.jpg") no-repeat center / cover; padding:12vw 4.6vw 12vw; } #lowMain h2{ color:#113D5C; font-size: 5vw; margin-bottom: 1em; /*font-weight: 300;*/ line-height: 1.45em; text-shadow: 1vw 1vw 5vw rgba(0,61,95,.24); text-align: center; } #lowMain p{ color:#113D5C; letter-spacing: 0.05em; } .lowSub{ padding-top: 22vw; padding-bottom: 14vw; } .lowSub p{ margin-top: 0; } .low_main_title{ position: relative; } .lowSub .low_main_title{ margin-bottom: 20vw; } .low_main_title::after { content: url(../img/top/flowsub_bg.png); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-49%); z-index: -1; } .low_main_title h2 { font-size: 4vw; text-align: center; /*font-weight: 300;*/ letter-spacing: .1em; } .low_main_title span { font-size: 7vw; text-align: center; display: block; /*font-weight: 300;*/ letter-spacing: .2em; line-height: 1.7em; } } /* ================================================================================ コンセプトページ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { #concept_point{ background: url("../img/low/concept_bg.jpg") top center / 100%; padding-top: 71px; padding-bottom:50px; } .low_column_head{ text-align: center; } .low_column_head h2{ margin-bottom: .5em; font-size: 36px; font-weight: 300; } .low_column_head p{ font-size: 18px; } .low_column_head::after{ display: block; content: url('https://www.luna-e-lumen.com/wordpress/wp-content/uploads/2023/04/concept_deco.png'); margin-top: 18px; margin-left: auto; margin-right: auto; } .concept_list_wrap{ margin-top:94px; } .concept_list{ display: flex; flex-wrap: wrap; justify-content: center; } .concept_list .concept_list_item{ position: relative; display: flex; flex-wrap: wrap; width: 309px; height: 203px; margin-left: 18.5px; margin-right: 18.5px; margin-bottom: 69px; } .concept_list .concept_list_item span{ position: absolute; top:0; left: 50%; z-index: 1; transform: translate(-50% , -50%); display: flex; justify-content: center; width: 93px; height: 93px; padding-top: .1em; padding-bottom: 46.5px; font-size: 28px; color: #FFFFFF; background-color: #B08C59; border-radius: 50%; } .concept_list .concept_list_item .concept_list_item_exp{ position: relative; z-index: 2; padding: 30px 25px 10px; background-color: #142D4F; color: #FFFFFF; } .concept_list .concept_list_item .concept_list_item_exp h3{ font-size: 18px; font-weight: 300; align-items: center; text-align: center; } .concept_list .concept_list_item .concept_list_item_exp h3::after{ content: url('https://www.luna-e-lumen.com/wordpress/wp-content/uploads/2023/04/icon_star.png'); display: block; margin-left: auto; margin-right: auto; margin-top: 5px; height: 25px; } .concept_list .concept_list_item .concept_list_item_exp p{ font-size: 16px; line-height: 1.45em !important; margin-top: 5px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { #concept_point{ background: url("../img/low/concept_bg.jpg") top center / 100%; padding-top: 12vw; padding-bottom:14vw; } .low_column_head{ text-align: center; } .low_column_head h2{ margin-bottom: 2.1px; font-size: 5.5vw; font-weight: 300; } .low_column_head::after{ display: block; content: url('https://www.luna-e-lumen.com/wordpress/wp-content/uploads/2023/04/concept_deco.png'); margin-top: 7vw; margin-left: auto; margin-right: auto; font-weight: 300; } .concept_list_wrap{ margin-top:50px; } .concept_list .concept_list_item{ position: relative; display: flex; flex-wrap: wrap; width: 100%; margin-top: 15vw; } .concept_list .concept_list_item span{ position: absolute; top:0; left: 50%; z-index: 1; transform: translate(-50% , -50%); display: flex; justify-content: center; width: 20vw; height: 20vw; padding-bottom: 10vw; font-size:6vw; color: #FFFFFF; background-color: #B08C59; border-radius: 50%; padding-top: .5vw; } .concept_list .concept_list_item .concept_list_item_exp{ position: relative; z-index: 2; padding: 6vw 5vw; background-color: #142D4F; color: #FFFFFF; width: 100%; } .concept_list .concept_list_item .concept_list_item_exp h3{ font-size: 4vw; font-weight: 300; align-items: center; text-align: center; } .concept_list .concept_list_item .concept_list_item_exp h3::after{ content: url('https://www.luna-e-lumen.com/wordpress/wp-content/uploads/2023/04/icon_star.png'); display: block; margin-left: auto; margin-right: auto; margin-top: 1vw; height: 7vw; } .concept_list .concept_list_item .concept_list_item_exp p{ font-size: 3.6vw; line-height: 1.45em !important; margin-top: 1vw; } } /* ================================================================================ 施術メニューページ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .recommend_area{ padding-top: 54.5px; padding-bottom: 51px; background: url(../img/site_bg.jpg) repeat top center; color: #FFFFFF; } .elementor-section.elementor-section-boxed.recommend_area > .elementor-container{ max-width: 681px; } .recommend_area h3{ font-size: 24px; font-weight: 300; text-align: center; padding: 0.6em 0.5em 0.9em; border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; margin-bottom:34.5px; } .recommend_list ul{ display: flex; flex-wrap: wrap; } .recommend_list ul li{ display: flex; align-items: center; width: 50%; padding-right: 1em } .recommend_list ul li::before{ width: 35px; content: url('https://www.luna-e-lumen.com/wordpress/wp-content/uploads/2023/04/icon_star_w.png'); text-align: center; display: block; transform: translateY(.25em) } .recommend_list ul li p{ width: calc(100% - 35px); } #wrapper .recommend_list ul li::before,#wrapper .recommend_list ul li p{ line-height: 2.8em; } .menu_area{ padding-top:108px; padding-bottom:104px; } .menu_area .low_main_title{ position: relative; margin-bottom: 8px; } .menu_list_item.elementor-section .elementor-container{ max-width: 1000px !important; } .menu_list_item .elementor-column{ width: calc((100% - 3%) / 2); } .menu_list_item .elementor-column:first-of-type{ margin-right: 3%; } .menu_list_item{ margin-top:114px; } .menu_info{ margin-top: -11px; } #wrapper .menu_info p{ line-height: 1.45em; } .menu_head{ display: flex; align-items: flex-end; justify-content: space-between; padding: 0 10px 4px; border-bottom: 3px solid #B68B50; } .menu_info .menu_head h3{ font-size: 24px; font-weight: 400; color: #113D5C; } .menu_info .menu_head p{ font-size: 20px; } #wrapper .menu_info .menu_head p ,#wrapper .menu_info .menu_head h3{ line-height: 1.78em; } .menu_info p:not(:first-child){ margin-top: 0; } .menu_info .menu_exp p{ padding: 13px 10px; } .menu_info .menu_exp p.menu_cats{ border-bottom: 1px solid #707070; } .menu_info .menu_exp p.menu_attention{ font-size: 14px; } .menu_info .menu_coupon{ margin-top: 17px; } .menu_info .menu_coupon ul{ display: flex; } .menu_info .menu_coupon ul li{ width: 50%; background-color: #EBE6E1; min-height: 147px; padding: 17px 10px 3px; text-align: center; box-shadow: 5px 5px 13px rgba(54,37,18,.2); } .menu_info .menu_coupon ul li:first-of-type{ margin-right: 5.7%; } .menu_coupon .menu_coupon_head{ margin-bottom: -1px; } .menu_coupon .menu_coupon_head p.menu_coupon_name{ font-size: 20px; } .menu_coupon .menu_coupon_head p.menu_coupon_price{ font-size: 30px; } .menu_coupon .menu_coupon_head p.menu_coupon_price span{ font-size: 20px; display: inline-block; } .menu_coupon .menu_coupon_exp p{ font-size: 16px; height: 3em; display: flex; align-items: center; justify-content: center; } #campain_area{ margin-bottom:96px; } #campain_area .campain_menu{ height: 198px; max-width: 529px; width: 100%; display: flex; align-items: center; justify-content: center; text-align: center; background-color: #FFEEBF; border-radius: 7px; position: relative; margin-left:auto; margin-right: auto; } #campain_area .campain_menu h4{ font-size: 19px; background-color: #113D5C; color: #FFFFFF; padding: .01em 1em .01em; display: inline-block; font-weight: 400; min-width: 251px; } #campain_area .campain_menu p{ line-height: 1.35em; font-weight: 300; } #campain_area .campain_menu p:not(:first-child){ margin-top: 0; } #campain_area .campain_menu p.campain_price{ margin-top: 0.5em; margin-bottom: 0.29em; font-family: 'EB Garamond', serif; letter-spacing: .02em; font-size: 40px; } #campain_area .campain_menu p.campain_price > span { display: inline-block; font-size: 70px; color: #E3851E; text-shadow:3px 2px 5px rgba(170,154,137,.52); font-family: 'Noto Serif JP', serif; letter-spacing: .015em; margin-right: 0.1em; } #campain_area .campain_menu p.campain_exp span{ color: #113D5C; } #campain_area .campain_menu::before,#campain_area .campain_menu::after{ content: ""; width: 102px; height: 102px; background: url('https://www.luna-e-lumen.com/wordpress/wp-content/uploads/2023/04/campain_star.png') no-repeat center / 100%; display: block; position: absolute } #campain_area .campain_menu::before{ top:0; left: 0; transform: translate(-50%,-18%); } #campain_area .campain_menu::after{ bottom:0; right: 0; transform: translate(50%,18%); } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .recommend_area{ padding-top: 8vw; padding-bottom: 8vw; background: url(../img/site_bg.jpg) repeat top center; color: #FFFFFF; } .recommend_area h3{ font-size: 5vw; font-weight: 300; text-align: center; padding: .5em; border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; margin-bottom:5vw; } .recommend_list ul li{ display: flex; align-items: center; width: 100%; } .recommend_list ul li::before{ width: 9vw; content: url('https://www.luna-e-lumen.com/wordpress/wp-content/uploads/2023/04/icon_star_w.png'); text-align: center; display: block; transform: translateY(.25em) } .recommend_list ul li p{ width: calc(100% - 9vw); } #wrapper .recommend_list ul li::before,#wrapper .recommend_list ul li p{ line-height: 3em; } .menu_area{ padding-top: 20vw; padding-bottom: 7vw; } .menu_area .low_main_title{ position: relative; margin-bottom: 10vw; } .menu_list_item{ margin-top:10vw; } #wrapper .menu_info p{ line-height: 1.45em; } .menu_img{ margin-top: 4vw; margin-bottom: 4vw; } .menu_head{ display: flex; align-items: flex-end; justify-content: space-between; padding: 2vw 3vw; border-bottom: 1vw solid #B68B50; } .menu_info .menu_head h3{ font-size: 5vw; font-weight: 300; color: #113D5C; } .menu_info .menu_head p{ } #wrapper .menu_info .menu_head p ,#wrapper .menu_info .menu_head h3{ line-height: 1.78em; } .menu_info p:not(:first-child){ margin-top: 0; } .menu_info .menu_exp p{ padding: 3vw; } .menu_info .menu_exp p.menu_cats{ border-bottom: 0.1vw solid #707070; } .menu_info .menu_exp p.menu_attention{ font-size: 3.5vw; } .menu_info .menu_coupon{ margin-top: 5vw; } .menu_info .menu_coupon ul li{ width: 100%; background-color: #EBE6E1; padding: 4vw; text-align: center; box-shadow: 1vw 1vw 5vw rgba(54,37,18,.2); } .menu_info .menu_coupon ul li:not(:first-child){ margin-top: 5vw; } .menu_coupon .menu_coupon_head{ margin-bottom: 3.2vw; } .menu_coupon .menu_coupon_head p.menu_coupon_name{ font-size: 5vw; } .menu_coupon .menu_coupon_head p.menu_coupon_price{ font-size: 5.8vw; } .menu_coupon .menu_coupon_head p.menu_coupon_price span{ font-size: 5vw; display: inline-block; font-family: 'Noto Serif JP', serif; letter-spacing: -.0001em; } .menu_coupon .menu_coupon_exp p{ font-size: 4vw; } #campain_area{ margin-bottom:13vw; } #campain_area .campain_menu{ padding: 5vw 4vw; display: flex; align-items: center; justify-content: center; text-align: center; background-color: #FFEEBF; border-radius: 3vw; position: relative; } #campain_area .campain_menu h4{ font-size: 6vw; background-color: #113D5C; color: #FFFFFF; padding: .01em 1em .01em; display: inline-block; font-weight: 400; } #campain_area .campain_menu p{ line-height: 1.35em; font-weight: 300; } #campain_area .campain_menu p:not(:first-child){ margin-top: 0; } #campain_area .campain_menu p.campain_price{ margin-top: 0.6em; margin-bottom: 0.3em; font-family: 'EB Garamond', serif; font-size: 5vw; letter-spacing: .1em; } #campain_area .campain_menu p.campain_price > span{ display: inline-block; font-size: 14vw; color: #E3851E; text-shadow:1vw 1vw 5vw rgba(170,154,137,.52); } #campain_area .campain_menu p.campain_exp span{ color: #113D5C; } #campain_area .campain_menu::before,#campain_area .campain_menu::after{ content: ""; width: 20vw; height: 20vw; background: url('https://www.luna-e-lumen.com/wordpress/wp-content/uploads/2023/04/campain_star.png') no-repeat center / 100%; display: block; position: absolute } #campain_area .campain_menu::before{ top:0; left: 0; transform: translate(-50%,-18%); } #campain_area .campain_menu::after{ bottom:0; right: 0; transform: translate(50%,18%); } } /* ================================================================================ ご利用の流れページ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { #flow_area{ margin: 91px auto 91px; max-width: 1000px; } .flow_item:not(.flow_item_end)::after{ display: block; content: url("https://www.luna-e-lumen.com/wordpress/wp-content/uploads/2023/04/flow_arow.png"); width: 39px; height: 23px; margin-bottom: 10px; margin-left: auto; margin-right: auto; } .flow_item.flow_item_start::after{ margin-top: 63px; } .flow_item:not(.flow_item_start)::after{ margin-top: 5px; } .flow_number{ width: 206px; height: 206px; display: flex; align-items: center; justify-content: center; background: url('https://www.luna-e-lumen.com/wordpress/wp-content/uploads/2023/04/ef568c0da8aa0b4e874a5d82be6e60e6.png') no-repeat center/cover; text-align: center; padding-top: 0.5em; } .flow_number span{ display: block; line-height: 1em; } .flow_number span:first-of-type{ font-size: 20px; color:#FFFFFF; } .flow_number span:last-of-type{ font-size: 47px; color:#E3851E; } .flow_info{} .flow_item.flow_item_start .flow_info{ padding-top: 28px; } .flow_item:not(.flow_item_start) .flow_info{ padding-top: 71px; } .flow_info h2{ font-family: 'EB Garamond', serif; font-weight: 500; font-size: 30px; color: #113D5C; margin-bottom: 14px; } .flow_info p{ font-size: 16px; } .flow_img{ margin-top:27px; width: 100%; max-width: 614px; } .flow_img a{ box-shadow: 5px 5px 13px rgba(54,37,18,.16); } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { #flow_area{ margin-top: 11vw; margin-bottom: 11vw; } .flow_item{ margin-bottom: 4vw; } .flow_item:not(.flow_item_end)::after{ display: block; content: ""; width: 15vw;height: 8vw; margin-top: 8vw; background:url("https://www.luna-e-lumen.com/wordpress/wp-content/uploads/2023/04/flow_arow.png") no-repeat top center; margin-left: auto; margin-right: auto; } .flow_number{ width: 40vw; height: 40vw; display: flex; align-items: center; justify-content: center; background: url('https://www.luna-e-lumen.com/wordpress/wp-content/uploads/2023/04/ef568c0da8aa0b4e874a5d82be6e60e6.png') no-repeat center/cover; text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 4vw; } .flow_number span{ display: block; line-height: 1em; } .flow_number span:first-of-type{ font-size: 4vw; color:#FFFFFF; } .flow_number span:last-of-type{ font-size: 10.5vw; color:#E3851E; } .flow_info h2{ font-family: 'EB Garamond', serif; font-weight: 500; font-size: 5vw; color: #113D5C; margin-bottom: 2vw; line-height: 1.45em; } .flow_img{ margin-top:4vw; } .flow_img a{ box-shadow: 1vw 1vw 5vw rgba(54,37,18,.16); } } /* ================================================================================ お客様の声ページ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { #voice_area{ margin-top: 120px; margin-bottom: 101px; } .elementor-section.elementor-section-boxed.voice_column > .elementor-container { max-width: 1000px; } .voice_column .elementor-row{ flex-wrap: wrap; counter-reset: number 0; } .voice_column .elementor-column, .voice_column .elementor-column{ width: calc((100% - 2.8%) / 2) !important; margin-bottom: 25px; } .voice_column .elementor-column:nth-of-type(2n), .voice_column .elementor-column:nth-of-type(2n){ margin-left: 2.8%; } .voice_column .voice_item{ padding: 3%; background-color: #EBE6E1; box-shadow: 5px 5px 13px rgba(54,37,18,.16); } .voice_column .voice_item h2{ font-size: 27px; display: flex; justify-content: space-between; align-items: flex-start; font-weight: 400; padding-bottom: 14.5px; border-bottom: 1px solid #707070; } .voice_column .voice_item h2::before{ counter-increment: number 1; content: "Voice0" counter(number) ; display: block; font-size: 21px; letter-spacing: -.03em; } .voice_column .voice_item h3{ font-size: 20px; font-weight: 300; padding-top: 21.5px; padding-bottom: 21.5px; line-height: 1.45em; height: 4em; } .voice_column .voice_item .voice_item_exp{ padding: 7% 4%; background-color: #FFFFFF; min-height: 315px; margin-top: 20px; } #wrapper .voice_column .voice_item .voice_item_exp p{ line-height: 1.45em; letter-spacing: .01em; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { #voice_area{ margin-top: 15vw; margin-bottom: 15vw; } .voice_column .elementor-row{ flex-wrap: wrap; counter-reset: number 0; } .voice_column .elementor-column, .voice_column .elementor-column{ margin-bottom: 10vw; } .voice_column .voice_item{ padding: 4.5vw; background-color: #EBE6E1; box-shadow: 1vw 1vw 5vw rgba(54,37,18,.16); } .voice_column .voice_item h2{ font-size: 4.5vw; display: flex; justify-content: space-between; align-items: flex-start; /*font-weight: 300;*/ padding-bottom: 4vw; border-bottom: 1px solid #707070; } .voice_column .voice_item h2::before{ counter-increment: number 1; content: "Voice0" counter(number) ; display: block; font-size: 4vw; } .voice_column .voice_item h3{ font-size: 5vw; font-weight: 400; padding-top: 3vw; padding-bottom: 3vw; line-height: 1.45em; } .voice_column .voice_item .voice_item_exp{ padding: 4vw; background-color: #FFFFFF; } #wrapper .voice_column .voice_item .voice_item_exp p{ line-height: 1.45em; letter-spacing: .05em; font-size: 3.8vw; } } /* ================================================================================ 予約ページ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { #reserve_main{ padding-top:87px; padding-bottom: 111px; text-align: center; position: relative; } #reserve_main::before{ content: ""; height: 100%; width: 50%; position: absolute; top:0; left:0; background: url("https://www.luna-e-lumen.com/wordpress/wp-content/uploads/2023/04/reserve_tel_left.png") no-repeat left center / contain; z-index: -1; } #reserve_main::after{ content: ""; height: 100%; width: 50%; position: absolute; top:0; right:0; background: url("https://www.luna-e-lumen.com/wordpress/wp-content/uploads/2023/04/reserve_tel_right.png") no-repeat right center / contain; z-index: -1; } #reserve_tel{ text-align: center; } #reserve_tel p{ font-size: 20px; margin-bottom: 8px; font-weight: 400; } #reserve_tel a{ font-size: 50px; color: #142E55; font-weight: 400; display: block; margin-top: 0; line-height: 1em; letter-spacing: .01em; } #reserve_tel span{ font-size: 16px; display: block; line-height: 2.2em; } #line_area{ padding-top: 75px; padding-bottom: 68px; background-color: #EBE6E1; } #line_area.elementor-section .elementor-container{ max-width: 1000px; } #line_area .line_item{text-align: center;} #line_area .line_item .reserve_line_exp{ padding-top:20px; padding-bottom:49px; } #line_area .line_item .reserve_line_exp p{ line-height: 1.45em; } #line_area .line_item .reserve_line_exp p:first-of-type{ font-size: 24px; } #line_area .line_item .reserve_line_exp p:not(:first-child) { margin-top: 12px; } #line_area .line_item .line_qr p{ font-size: 20px; margin-top: 12px; } #line_area .reserve_sample p{ line-height: 1.2em; margin-bottom: 19px; } #line_area .line_qr img{width: 127px;} #attention_area{ padding-top: 102px; padding-bottom: 165px; } #attention_area .low_main_title{ margin-bottom: 90px; } .attention_infomation.elementor-section .elementor-container{ max-width: 1000px; } .attention_infomation .elementor-column{ width: calc((100% - 8.2%) / 3) !important; } .attention_infomation .elementor-column:not(:nth-of-type(3n)){ margin-right: 4.1%; } .attention_item span{ display: block; font-size: 43px; color: #B08C59; font-weight: 400; margin-top: 14px; position: relative; line-height: 1em; } .attention_item:not(.attention_item_end) span::after{ position: absolute; top:50%; right:-7%; content: ""; display: block; width: 88%; height:20px; background: url("https://www.luna-e-lumen.com/wordpress/wp-content/uploads/2023/04/attention_arrow.png") no-repeat left center / 100%; transform: translate(0 , -60%) } #wrapper .attention_item p{ line-height: 1.45em; margin-top: 15px; } .attention_item:not(.attention_item_end) p{ width: 110%; } #disclaimer_area{ margin-top:163px; } #disclaimer_area.elementor-section .elementor-container{ max-width: 1000px; } #disclaimer_area h3{ text-align: center; font-size: 24px; font-weight: 400; margin-bottom: 65px; } #disclaimer_area p{ line-height: 1.45em; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { #reserve_main{ padding-top: 13vw; padding-bottom: 16vw; text-align: center; position: relative; } #reserve_tel{ text-align: center; } #reserve_tel p{ margin-bottom: 2.2vw; } #reserve_tel a{ font-size: 8vw; color: #142E55; font-weight: 400; display: block; margin-top: 0; line-height: 1em; letter-spacing: .01em; } #reserve_tel span{ display: block; } #line_area{ padding-top: 9vw; padding-bottom: 9vw; background-color: #EBE6E1; } #line_area .line_item{text-align: center;} #line_area .line_item .reserve_line_exp{ padding-top: 8vw; padding-bottom: 5vw; } #line_area .line_item .reserve_line_exp p{ line-height: 1.45em; } #line_area .line_item .reserve_line_exp p:first-of-type{ font-size: 4.5vw; } #line_area .line_item .reserve_line_exp p:not(:first-child) { margin-top: 0; } #attention_area{ padding-top: 30vw; padding-bottom: 30vw; } #attention_area .low_main_title{ margin-bottom: 30vw; } .attention_item{ margin-bottom: 6vw } .attention_item span{ display: block; font-size: 14vw; color: #B08C59; font-weight: 400; margin-top: 2vw; line-height: 1em; } #wrapper .attention_item p{ line-height: 1.45em; margin-top: 2vw; } .attention_item:not(.attention_item_end) p{ width: 110%; } #disclaimer_area{ margin-top:20vw; } #disclaimer_area h3{ text-align: center; font-size: 4.2vw; font-weight: 400; margin-bottom: 9vw; } #disclaimer_area p{ line-height: 1.45em; } } /* ================================================================================ アクセスページ ================================================================================ */ .map_box a { width: 100%; height: 450px; display: block; z-index: 1; position: absolute; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { }