★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */ /* ================================================================================ レイアウト ================================================================================ */ /* 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: 60px 0 120px; margin: 0 auto; } .inner_wrap { position: relative; width: 100%; margin: 0 auto; } /* エネナビ */ .page-enenavi .inner_wrap { width: 1000px; } .page-enenavi .inner_wrap input[type="submit"] { background-color: #eb661b; color: #ffffff; border: none; cursor: pointer; cursor: hand; opacity: 1; transition-property: color,opacity,background-color; transition-duration: 0.3s; transition-timing-function: ease-in-out; transition-delay: 0s; } .page-enenavi .inner_wrap input[type="submit"]:hover { background-color: #2454ac; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { #wrapper { } main.outer_wrap { position: relative; width: 100%; min-height: 50vh; padding: 8vw 0 16vw; } .inner_wrap { position: relative; width: 100%; padding: 0 4vw; } /* エネナビ */ .page-enenavi .inner_wrap { } .page-enenavi .inner_wrap input[type="submit"] { background-color: #eb661b; color: #ffffff; border: none; cursor: pointer; cursor: hand; opacity: 1; transition-property: color,opacity,background-color; transition-duration: 0.3s; transition-timing-function: ease-in-out; transition-delay: 0s; } .page-enenavi .inner_wrap input[type="submit"]:hover { background-color: #2454ac; } } /* 下の余白消し ----------------------------------------------- */ .page-attracting main.outer_wrap, .page-contact_us main.outer_wrap, .page-cleaning main.outer_wrap, .page-site_map main.outer_wrap { padding-bottom: 0; } /* ================================================================================ 各ページ画像設定 ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .main_cate { background: url(../img/cate-main_img.jpg)no-repeat center top; height: 397px; text-align: center; color: #fff; font-size: 50px; text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,0.4); } .main_cate_in { width: inherit; height: inherit; display: flex; justify-content: center; align-items: center; } .main_cate span { display: block; font-size: 0.4em; line-height: 0.8; letter-spacing: 0.18em; } /* お風呂モニタリング専用 */ .page-bath .main_cate { background: url(../img/cate-main_img2.jpg)no-repeat center top; height: 526px; text-align: center; color: #fff; font-size: 50px; text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,0.4); } .page-bath .main_cate p{ display: none; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .main_cate { background: url(../img/cate-main_img_sp.jpg)no-repeat center top /contain; height: 70vw; text-align: center; color: #fff; font-size: 6vw; text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,0.4); } .main_cate p { padding: 33vw 0 0; } .main_cate span{ display: block; font-size: 0.5em; line-height: 1.1; letter-spacing: 0.18em; } /* お風呂モニタリング専用 */ .page-bath .main_cate { background: url(../img/sp_cate_ofro_img2.jpg)no-repeat center top /contain; height: 82vw; text-align: center; color: #fff; font-size: 6vw; text-shadow: 0.05em 0.05em 0.1em rgba(0,0,0,0.4); margin-top: 13vw; } .page-bath .main_cate p{ display: none; } } /* ================================================================================ セクション ================================================================================ */ /* 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; } .ofuro_img .col3_1 img, .ofuro_img .col3_2 img, .ofuro_img .col3_3 img { height: auto; } } /* 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; } .ofuro_img .col3_1 img, .ofuro_img .col3_2 img, .ofuro_img .col3_3 img { height: auto; } } /* ================================================================================ マージンボックス ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* 上にマージンを空ける ----------------------------------------------- */ .top_long { margin-top: 120px; } .top_middle { margin-top: 80px; } .top_short { margin-top: 40px; } .top_vshort { margin-top: 20px; } /* 下にマージンを空ける ----------------------------------------------- */ .bottom_long { margin-bottom: 120px; } .bottom_middle { margin-bottom: 80px; } .bottom_short { margin-bottom: 40px; } .bottom_vshort { margin-bottom: 20px; } /* 両方にマージンを空ける ----------------------------------------------- */ .both_long { margin-top: 120px; margin-bottom: 120px; } .both_middle { margin-top: 80px; margin-bottom: 80px; } .both_short { margin-top: 40px; margin-bottom: 40px; } .both_vshort { margin-top: 20px; margin-bottom: 20px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* 上にマージンを空ける ----------------------------------------------- */ .top_long { margin-top: 16vw; } .top_middle { margin-top: 12vw; } .top_short { margin-top: 8vw; } .top_vshort { margin-top: 4vw; } /* 下にマージンを空ける ----------------------------------------------- */ .bottom_long { margin-bottom: 16vw; } .bottom_middle { margin-bottom: 12vw; } .bottom_short { margin-bottom: 8vw; } .bottom_vshort { margin-bottom: 4vw; } /* 両方にマージンを空ける ----------------------------------------------- */ .both_long { margin-top: 16vw; margin-bottom: 16vw; } .both_middle { margin-top: 12vw; margin-bottom: 12vw; } .both_short { margin-top: 8vw; margin-bottom: 8vw; } .both_vshort { margin-top: 4vw; margin-bottom: 4vw; } } /* ================================================================================ パディングボックス ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* 上にパディングを空ける ----------------------------------------------- */ .p_top_long { padding-top: 120px; } .p_top_middle { padding-top: 80px; } .p_top_short { padding-top: 40px; } .p_top_vshort { padding-top: 20px; } /* 下にパディングを空ける ----------------------------------------------- */ .p_bottom_long { padding-bottom: 120px; } .p_bottom_middle { padding-bottom: 80px; } .p_bottom_short { padding-bottom: 40px; } .p_bottom_vshort { padding-bottom: 20px; } /* 両方にパディングを空ける ----------------------------------------------- */ .row_long { padding-top: 120px; padding-bottom: 120px; } .row_middle { padding-top: 80px; padding-bottom: 80px; } .row_short { padding-top: 40px; padding-bottom: 40px; } .row_vshort { padding-top: 20px; padding-bottom: 20px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* 上にパディングを空ける ----------------------------------------------- */ .p_top_long { padding-top: 16vw; } .p_top_middle { padding-top: 12vw; } .p_top_short { padding-top: 8vw; } .p_top_vshort { padding-top: 4vw; } /* 下にパディングを空ける ----------------------------------------------- */ .p_bottom_long { padding-bottom: 16vw; } .p_bottom_middle { padding-bottom: 12vw; } .p_bottom_short { padding-bottom: 8vw; } .p_bottom_vshort { padding-bottom: 4vw; } /* 両方にパディングを空ける ----------------------------------------------- */ .row_long { padding-top: 16vw; padding-bottom: 16vw; } .row_middle { padding-top: 12vw; padding-bottom: 12vw; } .row_short { padding-top: 8vw; padding-bottom: 8vw; } .row_vshort { padding-top: 4vw; padding-bottom: 4vw; } /* 背景色を伸ばす ----------------------------------------------- */ .row_sp { padding-left: 4vw !important; padding-right: 4vw !important; } } /* ================================================================================ カラー ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .row_grid { position: relative; background: url(../img/bg_grid.jpg) center top -1px / auto 12px repeat; } .row_c01 { position: relative; background: #ffedcd; } .box_border { padding: 40px; border: 8px solid #ffe4b3; } .box_border2 img { border: 8px solid #ffe4b3; } .box_border3 { padding: 20px; border: 8px solid #ffe4b3; } /* お風呂モニタリング専用 */ .page-bath .row_grid { position: relative; background: url(../img/bg_grid02.jpg) center top -1px / auto 9px repeat; padding-left: 4vw; padding-right: 4vw; } .page-bath .row_c02 { position: relative; background: #d3f4ff; } .page-bath .box_border3 { padding: 20px; border: 8px solid #144a9e; background-color: #ffffff; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .row_grid { position: relative; background: url(../img/bg_grid.jpg) center top -1px / auto 12px repeat; padding-left: 4vw; padding-right: 4vw; } .row_grid.row_grid2 { padding-left: 0; padding-right: 0; } .row_c01 { position: relative; background: #ffedcd; padding-left: 4vw; padding-right: 4vw; } .box_border, .box_border3 { padding: 6vw; border: 2vw solid #ffe4b3; } .box_border2 img { border: 2vw solid #ffe4b3; } /* お風呂モニタリング専用 */ .page-bath .row_grid { position: relative; background: url(../img/bg_grid02.jpg) center top -1px / auto 12px repeat; padding-left: 4vw; padding-right: 4vw; } .page-bath .row_c02 { position: relative; background: #d3f4ff; padding-left: 4vw; padding-right: 4vw; } .page-bath .box_border3 { padding: 20px; border: 2vw solid #144a9e; background-color: #ffffff; } } /* ================================================================================ 見出し ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* h3見出し */ .h3_cate { position: relative; background: url(../img/title_bg03.png) no-repeat center bottom / auto 6px; text-align: center; padding: 0 0 20px 0; } .h3_cate h3 { display: flex; align-items: center; color: #000000; font-size: 28px; font-weight: 500; letter-spacing: 0.05em; text-indent: 0.05em; line-height: 1.4 !important; } .h3_cate h3:before, .h3_cate h3:after { content: ""; flex-grow: 1; height: 1px; background: #000000; display: block; } .h3_cate h3:before { margin-right: 0.8em; } .h3_cate h3:after { margin-left: 0.8em; } /* h3見出し2 */ .h3_cate2 { position: relative; border-bottom: 1px solid #EC661B; font-size: 30px; padding-bottom: 0.2em; } .h3_cate2 h3 { font-weight: 500; color: #EC661B; line-height: 1.4 !important; } /* h4見出し */ .h4_cate h4 { font-size: 21px; font-weight: 500; color: #000000; line-height: 1.6; } /* お風呂モニタリング専用 */ /* h2見出し2 */ .h2_ofuro h2{ background: #144a9e; font-size: 30px; color: #fff; padding: 32px 0 43px; border-radius: 5px; position: relative; } .h2_ofuro h2::before{ position: absolute; content: ''; display: block; background: url(../img/title_bg_w.png)no-repeat center top / 100% auto; width: 36px; height: 8px; bottom: 15px; left: 50%; margin-left: -18px; } /* h3見出し */ .page-bath .h3_cate { position: relative; background: url(../img/title_bg03_b.png) no-repeat center bottom / auto 6px; text-align: center; padding: 0 0 20px 0; } .page-bath .h3_cate h3 { display: flex; align-items: center; color: #144a9e; font-size: 28px; font-weight: 500; letter-spacing: 0.05em; text-indent: 0.05em; line-height: 1.4 !important; border-bottom: 4px solid; padding: 0px 0 10px; } .h3_cate h3:before, .h3_cate h3:after { height: auto; background: transparent; display: block; } /* h3見出し2 */ .page-bath .h3_cate2 { position: relative; border-bottom: 1px solid #144a9e; font-size: 30px; padding-bottom: 0.2em; } .page-bath .h3_cate2 h3 { font-weight: 500; color: #144a9e; line-height: 1.4 !important; } .page-bath .h3_cate3 { position: relative; border-bottom: 1px solid #144a9e; font-size: 35px; padding-bottom: 0.2em; } .page-bath .h3_cate3 h3 { font-weight: 500; color: #144a9e; line-height: 1.4 !important; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* h3見出し */ .h3_cate { position: relative; background: url(../img/title_bg03.png) no-repeat center bottom / auto 1.4vw; text-align: center; padding: 0 0 4vw 0; } .h3_cate h3 { display: flex; align-items: center; color: #000000; font-size: 5vw; font-weight: 500; letter-spacing: 0.05em; text-indent: 0.05em; line-height: 1.1 !important; } .h3_cate h3:before, .h3_cate h3:after { content: ""; flex-grow: 1; height: 1px; background: #000000; display: block; } .h3_cate h3:before { margin-right: 1.5em; } .h3_cate h3:after { margin-left: 1.5em; } /* h3見出し2 */ .h3_cate2 { position: relative; border-bottom: 1px solid #EC661B; font-size: 4.2vw; padding-bottom: 0.2em; } .h3_cate2 h3 { font-weight: 500; color: #EC661B; line-height: 1.4 !important; } /* h4見出し */ .h4_cate h4 { font-size: 4vw; font-weight: 500; color: #000000; line-height: 1.6; } /* お風呂モニタリング専用 */ /* h2見出し2 */ .h2_ofuro h2{ background: #144a9e; font-size: 5vw; color: #fff; padding: 2.7vw 4vw 4.8vw; border-radius: 5px; position: relative; line-height: 1.5; } .h2_ofuro h2::before{ position: absolute; content: ''; display: block; background: url(../img/title_bg_w.png)no-repeat center top / 100% auto; width: 5vw; height: 1.2vw; bottom: 2vw; left: 50%; margin-left: -2.3vw; } /* h3見出し */ .page-bath .h3_cate { position: relative; background: url(../img/title_bg03_b.png) no-repeat center bottom / auto 1.1vw; text-align: center; padding: 0 0 4vw 0; } .page-bath .h3_cate h3 { display: flex; align-items: center; color: #144a9e; font-size: 6vw; font-weight: 500; letter-spacing: 0.05em; text-indent: 0.05em; line-height: 1.4 !important; border-bottom: 4px solid; padding: 0px 0 1vw; } .h3_cate h3:before, .h3_cate h3:after { height: auto; background: transparent; display: block; } /* h3見出し2 */ .page-bath .h3_cate2 { position: relative; border-bottom: 1px solid #144a9e; font-size: 5vw; padding-bottom: 0.2em; } .page-bath .h3_cate2 h3 { font-weight: 500; color: #144a9e; line-height: 1.4 !important; } .page-bath .h3_cate3 { position: relative; border-bottom: 1px solid #144a9e; font-size: 5.5vw; padding-bottom: 0.2em; } .page-bath .h3_cate3 h3 { font-weight: 500; color: #144a9e; line-height: 1.4 !important; } } /* ================================================================================ 共通色々　ページ内リンクなど ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* ページ内リンク ----------------------------------------------- */ .page_link { } .page_link ul { font-size: 0; letter-spacing: -0.4em; text-align: center; } .page_link ul li { display: inline-block; width: 300px; font-size: 26px; letter-spacing: 0; padding: 0 10px; } .page_link ul li a { display: block; padding: 1em 0; color: rgba(235,103,28,0.8); border: 2px solid; box-shadow: rgba(235,103,28,0.4) 0 0px 0px 0 inset; transition: all 0.3s cubic-bezier(0.390, 0.500, 0.150, 1.360); } .page_link ul li a:hover { color: rgba(255, 255, 255, 0.9); box-shadow: rgba(235,103,28,0.8) 0 0px 0px 80px inset; } .page_link.page_link2 ul li { width: auto; } .page_link.page_link2 ul li a { padding: 1em; } /* h4 ----------------------------------------------- */ .item_box01 { } .item_box01 h4 { font-size: 1.2em; font-weight: 500; color: #000000; } /* ボタン ----------------------------------------------- */ .link_cate { text-align: center; } .link_cate.link_cate2 { text-align: left; } .link_cate a{ position: relative; text-align: center; background: #eb671b; color: #ffffff !important; font-size: 18px; letter-spacing: 0.08em; padding: 13px 0; width: 303px; display: inline-block; border-radius: 3px; /* CSS3草案 */ -webkit-border-radius: 3px; /* Safari,Google Chrome用 */ -moz-border-radius: 3px; /* Firefox用 */ } /* 弊社発注フォームはこちら */ .link_cate_form a{ position: relative; text-align: center; background: #ffa500; color: #ffffff !important; font-size: 18px; letter-spacing: 0.08em; padding: 13px 0; width: 303px; display: inline-block; border-radius: 3px; /* CSS3草案 */ -webkit-border-radius: 3px; /* Safari,Google Chrome用 */ -moz-border-radius: 3px; /* Firefox用 */ } .link_cate a::before{ position: absolute; content: ''; background: url(../img/link_icon.png)no-repeat center top / 100% auto; width: 17px; height: 17px; top: 20px; right: 10px; } .link_cate.link_cate3 a{ padding: 13px 3em; width: auto; } .link_cate02 { text-align: center; } .link_cate02.link_cate2 { text-align: left; } .link_cate02 a{ position: relative; text-align: center; background: #eb671b; color: #ffffff !important; font-size: 18px; letter-spacing: 0.08em; padding: 13px 0; width: 503px; display: inline-block; border-radius: 3px; /* CSS3草案 */ -webkit-border-radius: 3px; /* Safari,Google Chrome用 */ -moz-border-radius: 3px; /* Firefox用 */ } .link_cate02 a::before{ position: absolute; content: ''; background: url(../img/link_icon.png)no-repeat center top / 100% auto; width: 17px; height: 17px; top: 20px; right: 10px; } .link_cate02.link_cate3 a{ padding: 13px 3em; width: auto; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* ページ内リンク ----------------------------------------------- */ .page_link { } .page_link ul { font-size: 0; letter-spacing: -0.4em; text-align: center; } .page_link ul li { display: inline-block; width: 300px; font-size: 5vw; letter-spacing: 0; padding: 3vw 0; } .page_link ul li a { display: block; padding: 1em 0; color: rgba(235,103,28,0.6); border: 2px solid; box-shadow: rgba(235,103,28,0.4) 0 0px 0px 0 inset; transition: all 0.3s cubic-bezier(0.390, 0.500, 0.150, 1.360); } .page_link ul li a:hover { color: rgba(255, 255, 255, 0.85); box-shadow: rgba(235,103,28,0.7) 0 0px 0px 20vw inset; } /* h4 ----------------------------------------------- */ .item_box01 { } .item_box01 h4 { font-size: 1.2em; font-weight: 500; color: #000000; } /* ボタン ----------------------------------------------- */ .link_cate { text-align: center; margin-top: 6vw; } .link_cate a{ position: relative; text-align: center; background: #eb671b; color: #ffffff !important; font-size: 4.2vw; letter-spacing: 0.08em; padding: 4vw 0; width: 100%; display: inline-block; border-radius: 3px; /* CSS3草案 */ -webkit-border-radius: 3px; /* Safari,Google Chrome用 */ -moz-border-radius: 3px; /* Firefox用 */ } .link_cate a::before{ position: absolute; content: ''; background: url(../img/link_icon.png)no-repeat center top / 100% auto; width: 4.6vw; height: 4.6vw; top: 5.5vw; right: 3vw; } .link_cate02 { text-align: center; margin-top: 6vw; } .link_cate02 a{ position: relative; text-align: center; background: #eb671b; color: #ffffff !important; font-size: 3.2vw; letter-spacing: 0.08em; padding: 4vw 0; width: 100%; display: inline-block; border-radius: 3px; /* CSS3草案 */ -webkit-border-radius: 3px; /* Safari,Google Chrome用 */ -moz-border-radius: 3px; /* Firefox用 */ } .link_cate02 a::before{ position: absolute; content: ''; background: url(../img/link_icon.png)no-repeat center top / 100% auto; width: 3.5vw; height: 3.5vw; top: 5vw; right: 2.5vw; } } /* ================================================================================ 共通お問い合わせ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .contact_cate { position: relative; background: url(../img/bg_grid.jpg) center top -1px / auto 12px repeat; padding: 50px 0; text-align: center; color: #ec661b; border: 10px solid; } /* h2 */ /* .contact_cate_h2 h2 { position: relative; font-size: 18px; font-weight: 400; letter-spacing: 0.1em; } .contact_cate_h2 h2 span { font-size: 36px; font-family: 'Lato', sans-serif; display: block; line-height: 1.2; letter-spacing: 0.13em; } */ .contact_cate_box { /* margin: 30px 0 0 0; */ text-align: center; font-size: 0; } /* ====メールでのお問い合わせ==== */ .contact-box-left { text-align: center; display: inline-block; vertical-align: top; border-right: 1px solid; padding: 42px 82px 62px 0; } /* h3 */ .contact-box-left h3 { position: relative; letter-spacing: 0.05em; padding: 0 0 16px; font-weight: 400; font-size: 22px; } /* ボタン */ .contact_cate .contact_link_botan { text-align: center; } .contact_cate .contact_link_botan a { position: relative; border: 2px solid; font-size: 23px; font-family: 'Lato', sans-serif; color: #000000; letter-spacing: 0.12em; padding: 13px 0 12px 48px; width: 303px; display: block; margin: 0 auto; border-radius: 3px; /* CSS3草案 */ -webkit-border-radius: 3px; /* Safari,Google Chrome用 */ -moz-border-radius: 3px; /* Firefox用 */ } .contact_cate .contact_link_botan a::before { position: absolute; content: ''; background: url(../img/mail_icon.png)no-repeat center top / 100% auto; width: 28px; height: 22px; top: 22px; left: 65px; } /* ====電話でのお問い合わせ==== */ .contact-box-right { text-align: center; display: inline-block; vertical-align: top; padding: 0 41px 0 82px; } /* h3 */ .contact-box-right h3 { position: relative; letter-spacing: 0.05em; padding: 0 0 4px; font-weight: 400; font-size: 22px; } /* お電話～ */ .contact-box-right a { font-family: 'Lato', sans-serif; position: relative; color: #000000; pointer-events: none; display: block; font-size: 31.2px; letter-spacing: 0.05em; padding: 0 0 0 37px; } .contact-box-right a::before { position: absolute; content: 'TEL'; font-size: 16px; top: 14px; left: -2px; } .contact-box-right p { font-size: 16px; letter-spacing: 0.15em; margin-top: -5px; } .contact-box-right .contact-tel { margin-bottom: 20px; } /* FAX */ .contact-box-right .contact-fax a::before { position: absolute; content: 'FAX'; font-size: 16px; top: 14px; left: -2px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .contact_cate { position: relative; background: url(../img/bg_grid.jpg) center top -1px / auto 12px repeat; padding: 4em 0; color: #ec661b; border: 2vw solid; } /* h2 */ /* .contact_cate_h2 h2 { position: relative; font-size: 4vw; font-weight: 400; letter-spacing: 0.1em; text-align: center; padding: 0 0 12vw; } .contact_cate_h2 h2 span { font-size: 7.5vw; font-family: 'Lato', sans-serif; display: block; letter-spacing: 0.13em; }*/ /* ====メールでのお問い合わせ==== */ .contact-box-left { border-bottom: 1px solid; text-align: center; margin: 0 1em; padding: 0 0 3.5em; } /* h3 */ .contact-box-left h3 { position: relative; letter-spacing: 0.05em; padding: 0 0 0.8em; font-weight: 400; font-size: 5vw; } /* ボタン */ .contact_cate .contact_link_botan { text-align: center; } .contact_cate .contact_link_botan a { position: relative; border: 2px solid; font-size: 4.8vw; font-family: 'Lato', sans-serif; color: #000000; letter-spacing: 0.12em; padding: 4vw 0 4vw 7vw; width: 76vw; display: block; margin: 0 auto; border-radius: 3px; /* CSS3草案 */ -webkit-border-radius: 3px; /* Safari,Google Chrome用 */ -moz-border-radius: 3px; /* Firefox用 */ } .contact_cate .contact_link_botan a::before { position: absolute; content: ''; background: url(../img/mail_icon.png)no-repeat center top / 100% auto; width: 7vw; height: 6vw; top: 5.4vw; left: 17vw; } /* ====電話でのお問い合わせ==== */ .contact-box-right { text-align: center; padding: 3.5em 0 0; } /* h3 */ .contact-box-right h3 { position: relative; letter-spacing: 0.05em; font-weight: 400; font-size: 5vw; } /* お電話～ */ .contact-box-right a { font-family: 'Lato', sans-serif; position: relative; color: #000000; display: block; font-size: 9vw; letter-spacing: 0.05em; padding: 0 0 0 10vw; } .contact-box-right a::before { position: absolute; content: 'TEL'; font-size: 5vw; top: 3.6vw; left: 4.8vw; } .contact-box-right p { font-size: 4vw; letter-spacing: 0.15em; margin-top: -0.6em; } .contact-box-right .contact-tel { margin-bottom: 6vw; } /* FAX */ .contact-box-right .contact-fax a { pointer-events: none; } .contact-box-right .contact-fax a::before { position: absolute; content: 'FAX'; font-size: 5vw; top: 3.6vw; left: 4.8vw; } } /* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ここから各固定ページ ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */ /* ================================================================================ 会社概要ページ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .company_row01-box01 { background: url(../img/company_row01-bg.jpg) center top / auto auto no-repeat; height: 1132px; } /* タイトル左寄せ ----------------------------------------------- */ .company_row01-title01 h3 { color: #000000; font-size: 65px; font-family: 'Lato', sans-serif; position: relative; line-height: 1; } .company_row01-title01 h3::before { background: url(../img/title-bg02.png) center top / 100% auto no-repeat; position: absolute; content: ''; display: block; width: 8px; height: 42px; top: 13px; left: -23px; } .company_row01-title01 h3 span { font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; font-size: 24px; vertical-align: top; display: inline-block; padding: 18px 0 0 17px; position: relative; } .company_row01-title01 h3 span::before { position: absolute; content: ''; display: block; width: 680px; height: 1px; background: #000000; bottom: -7px; left: 8px; } /* テキスト ----------------------------------------------- */ .company_row01-text01 { color: #000000; padding: 30px 0 0 60px; } /* タイトル右寄せ ----------------------------------------------- */ .company_row01-title02 h3 { color: #ffffff; font-size: 65px; font-family: 'Lato', sans-serif; text-align: right; position: relative; line-height: 1; } .company_row01-title02 h3::before { background: url(../img/title-bg02.png) center top / 100% auto no-repeat; position: absolute; content: ''; display: block; width: 8px; height: 42px; top: 13px; right: -23px; } .company_row01-title02 h3 span { font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; font-size: 24px; vertical-align: top; display: inline-block; padding: 18px 17px 0 0; position: relative; } .company_row01-title02 h3 span::before { position: absolute; content: ''; display: block; width: 680px; height: 1px; background: #ffffff; bottom: -7px; right: 8px; } /* テキスト右寄せ ----------------------------------------------- */ .company_row01-text02 { color: #ffffff; padding: 17px 40px 0 0; margin-left: auto; margin-right: 0; text-align: right; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .company_row01-box01 { } .company_row01_sp01 { background: url(../img/company_row01_sp01.jpg) center top / cover repeat; padding: 8vw 6vw; margin: 0 -4vw; width: auto !important; } .company_row01_sp02 { background: url(../img/company_row01_sp02.jpg) center top / cover repeat; padding: 8vw 6vw; margin: 0 -4vw; width: auto !important; } .company_row01_sp03 { background: url(../img/company_row01_sp03.jpg) center top / cover repeat; padding: 8vw 6vw; margin: 0 -4vw; width: auto !important; } .company_row01_sp04 { background: url(../img/company_row01_sp04.jpg) center top / auto 14px repeat; padding: 8vw 6vw; margin: 0 -4vw; width: auto !important; } /* タイトル左寄せ ----------------------------------------------- */ .company_row01-title01 h3 { color: #000000; font-size: 10vw; font-family: 'Lato', sans-serif; position: relative; line-height: 1; border-bottom: 1px solid; } .company_row01-title01 h3::before { background: url(../img/title-bg02.png) center top / contain no-repeat; position: absolute; content: ''; display: block; width: 2vw; height: 6vw; top: 50%; left: -4vw; margin-top: -3vw; } .company_row01-title01 h3 span { font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; font-size: 0.5em; vertical-align: top; display: inline-block; padding: 0.5em 0 0 0.5em; position: relative; } /* テキスト ----------------------------------------------- */ .company_row01-text01 { color: #000000; padding: 4vw 0 0 4vw; } /* タイトル右寄せ ----------------------------------------------- */ .company_row01-title02 h3 { color: #ffffff; font-size: 10vw; font-family: 'Lato', sans-serif; text-align: right; position: relative; line-height: 1; border-bottom: 1px solid; } .company_row01-title02 h3::before { background: url(../img/title-bg02.png) center top / contain no-repeat; position: absolute; content: ''; display: block; width: 2vw; height: 6vw; top: 50%; right: -4vw; margin-top: -3vw; } .company_row01-title02 h3 span { font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; font-size: 0.5em; vertical-align: top; display: inline-block; padding: 0.5em 0.5em 0 0; position: relative; } /* テキスト右寄せ ----------------------------------------------- */ .company_row01-text02 { color: #ffffff; padding: 4vw 4vw 0 0; text-align: right; } /* 会社概要テーブル ----------------------------------------------- */ .about_table table tr th, .about_table table tr td { font-size: 4vw; } /* mapテキスト ----------------------------------------------- */ .map_box { font-size: 4vw; } } /* google map ----------------------------------------------- */ .map_box a { width: 100%; height: 450px; display: block; z-index: 1; position: absolute; } .map_box + iframe { border: 10px solid #f8f0e2 !important; } /* ================================================================================ その他薬品 ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* no photo */ .np_text { text-align: center; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* no photo */ .np_text { text-align: left; } } /* ================================================================================ サイトマップ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .sitemap { text-align: center; } .sitemap a { font-size: 20px; color: #ec661b; } .sitemap > ul { display: inline-block; text-align: left; } .sitemap > ul > li { margin-top: 0.6em; padding: 0 0.6em 0.6em; border-bottom: 1px dashed #ec661b; } .sitemap > ul > li:first-of-type { margin-top: 0; padding-top: 0.6em; border-top: 1px dashed #ec661b; } /* 2段目 */ .sitemap > ul > li > ul { padding: 0 0 0 1.5em; } .sitemap > ul > li > ul > li { position: relative; margin-top: 0.3em; } .sitemap > ul > li > ul > li::before { position: absolute; content: ""; display: block; background: url(../img/icon_sitemap.png) center top / contain no-repeat; width: 10px; height: 10px; top: 11px; left: -1.1em; } /* 3段目 */ .sitemap > ul > li > ul > li > ul { padding: 0 0 0 1.5em; } .sitemap > ul > li > ul > li > ul:last-of-type { padding-bottom: 0.3em; } .sitemap > ul > li > ul > li > ul > li { position: relative; margin-top: 0.3em; } .sitemap > ul > li > ul > li > ul > li::before { position: absolute; content: ""; display: block; background: url(../img/icon_sitemap.png) center top / contain no-repeat; width: 10px; height: 10px; top: 11px; left: -1.1em; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .sitemap { text-align: center; } .sitemap a { font-size: 4.2vw; color: #ec661b; } .sitemap > ul { display: inline-block; text-align: left; } .sitemap > ul > li { margin-top: 0.6em; padding: 0 0.6em 0.6em; border-bottom: 1px dashed #ec661b; } .sitemap > ul > li:first-of-type { margin-top: 0; padding-top: 0.6em; border-top: 1px dashed #ec661b; } /* 2段目 */ .sitemap > ul > li > ul { padding: 0 0 0 1.5em; } .sitemap > ul > li > ul > li { position: relative; margin-top: 0.3em; } .sitemap > ul > li > ul > li::before { position: absolute; content: ""; display: block; background: url(../img/icon_sitemap.png) center top / contain no-repeat; width: 2vw; height: 2vw; top: 2vw; left: -1.1em; } /* 3段目 */ .sitemap > ul > li > ul > li > ul { padding: 0 0 0 1.5em; } .sitemap > ul > li > ul > li > ul:last-of-type { padding-bottom: 0.3em; } .sitemap > ul > li > ul > li > ul > li { position: relative; margin-top: 0.3em; } .sitemap > ul > li > ul > li > ul > li::before { position: absolute; content: ""; display: block; background: url(../img/icon_sitemap.png) center top / contain no-repeat; width: 2vw; height: 2vw; top: 2vw; left: -1.1em; } } /* ================================================================================ 事例紹介一覧 ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .category-customer_list .works_date { display: none; } .category-customer_list .works_title, .page-customer_case .works_title { margin-top: 20px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .category-customer_list .works_date { display: none; } .category-customer_list .works_title, .page-customer_case .works_title { margin-top: 4vw; } } /* ================================================================================ エネナビ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .link_ene img{ width: 220px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .link_ene img{ width: 40vw; } } /* ================================================================================ お風呂モニタリング　古い未公開の ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* 加速するの画像を固定 */ .row01_furo{ position: relative; height:542px; } .row01_furo_img{ position:absolute; width:1920px; height:542px; left:50%; margin-left:-960px; } .row01_furo_img img{ max-width:1920px !important; } /* 設備君 */ .row02_furo_text{ position:relative; } .row02_furo_text::before{ position:absolute; content:""; display:block; background:url(../img/setubikun_img.png) no-repeat center top / 100% auto; width:142px; height:268px; right: 69px; top: -88px; } /* サービス提供 */ ul.fro_service{ padding:30px 0; } ul.fro_service02{ padding:30px 0; } ul.fro_service02 li:first-of-type{ padding:0 0 15px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* 設備君 */ .row02_furo_text{ position:relative; } .row02_furo_text::before{ position:absolute; content:""; display:block; background:url(../img/setubikun_img.png) no-repeat center top / 100% auto; width: 20vw; height: 25vw; right: 0vw; top: 19vw; } /* サービス提供 */ ul.fro_service{ padding: 5vw 0; } ul.fro_service02{ padding: 5vw 0; } ul.fro_service02 li:first-of-type{ padding:0 0 2.5vw; } } /* ================================================================================ お風呂モニタリング　20226/6 ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* フォントを大きく */ .f_big{ font-size: 25px; } .f_big2{ font-size: 20px; } /* フォントを小さく */ .f_small{ font-size: 12px; } /* 温浴施設で働くすべての方へ */ .text-subtitle{ font-size: 35px; } /* 料金プラン */ .table_plan table { width: 100%; } .table_plan table , .table_plan td, .table_plan th { border: 1px solid #144a9e; border-collapse: collapse; padding: 10px; vertical-align: middle; } .table_plan th { background: #e5f0ff; padding: 10px; } .table_plan td { background-color: #ffffff; } /* 主な機能 */ .ofuro_row03 .arrow{ color: #eb661b; font-size: 35px; } .effect_list{ text-align: center; font-size: 0; padding-bottom: 10px; } .effect_list li{ display: inline-block; background-color: #eb661b; color: #ffffff; font-size: 18px; font-weight: bold; padding: 10px; margin: 0 10px; } .text_s{ font-size: 13px; } /* 吹き出しキャラクター　衛生 */ .fukidasi_k01{ margin: 41px 0 10px 50px; } .fukidasi_k01 p{ position: relative; background-color: #d3f4ff; border-radius: 10px; font-weight: bold; color: #144a9e; display: inline-block; padding: 10px 40px; } .fukidasi_k01 p::before { content: ""; position: absolute; top: 50%; left: 99.5%; margin-top: -15px; border: 15px solid transparent; border-left: 15px solid #d3f4ff; } .fukidasi_k01 p::after { content: ""; position: absolute; background: url(../img/fukidasi_eisei_img.png) no-repeat center top / auto 100%; top: 50%; left: 103.5%; margin-top: -60px; width: 92px; height: 130px; } /* 吹き出しキャラクター　整備 */ .fukidasi_k02{ margin: 61px 0 10px 170px; } .fukidasi_k02 p{ position: relative; background-color: #d3f4ff; border-radius: 10px; font-weight: bold; color: #144a9e; display: inline-block; padding: 10px 40px; } .fukidasi_k02 p::before { content: ""; position: absolute; top: 50%; left: 99.5%; margin-top: -15px; border: 15px solid transparent; border-left: 15px solid #d3f4ff; } .fukidasi_k02 p::after { content: ""; position: absolute; background: url(../img/fukidasi_setubi_img.png) no-repeat center top / auto 100%; top: 50%; left: 103.5%; margin-top: -60px; width: 105px; height: 116px; } /* 吹き出しキャラクター　省エネ */ .fukidasi_k03{ margin: 61px 0 10px 107px; } .fukidasi_k03 p{ position: relative; background-color: #d3f4ff; border-radius: 10px; font-weight: bold; color: #144a9e; display: inline-block; padding: 10px 40px; } .fukidasi_k03 p::before { content: ""; position: absolute; top: 50%; left: 99.5%; margin-top: -15px; border: 15px solid transparent; border-left: 15px solid #d3f4ff; } .fukidasi_k03 p::after { content: ""; position: absolute; background: url(../img/fukidasi_shouene_img.png) no-repeat center top / auto 100%; top: 50%; left: 102.5%; margin-top: -98px; width: 100px; height: 165px; } /* キャラクター */ .character01, .character02, .character03{ position: relative; } .character01::before{ position: absolute; content: ""; background: url(../img/eisei.png) no-repeat center top / 100% auto; width: 130px; height: 77px; top: -78px; right: -33px; } .character02::before{ position: absolute; content: ""; background: url(../img/setubi.png) no-repeat center top / 100% auto; width: 104px; height: 75px; top: -83px; right: -21px; } .character03::before{ position: absolute; content: ""; background: url(../img/syouene.png) no-repeat center top / 100% auto; width: 107px; height: 136px; top: -131px; right: -8px; } /* お風呂モニタリングで促進する効果 */ .ofuromoni_box{ position: relative; border: solid 1px #144a9e; background: #ffffff; border-radius: 10px; padding: 40px; margin: 0 40px; } .ofuromoni_box::before{ position: absolute; content: ""; background: url(../img/syouene_02.png) no-repeat center top / 100% auto; width: 127px; height: 191px; top: -166px; right: 20px; } .ofuromoni_box .ofromoni_list{ float: left; margin-right: 35px; } .ofuromoni_box > ul > li{ position: relative; font-size: 23px; padding-left: 37px; margin-left: 33px; font-weight: bold; color: #144a9e; } .ofuromoni_box > ul > li::before{ position: absolute; content: ""; background: url(../img/ore_ch.jpg) no-repeat center top / 100% auto; width: 30px; height: 30px; top: 5px; left: 0; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* フォントを大きく */ .f_big{ font-size: 4.5vw; } .f_big2{ font-size: 4.5vw; } /* フォントを小さく */ .f_small{ font-size: 3vw; } /* 温浴施設で働くすべての方へ */ .text-subtitle{ font-size: 5.5vw; } /* 主な機能 */ .ofuro_row03 .arrow{ color: #eb661b; font-size: 1.5em; } .effect_list{ text-align: center; font-size: 0; padding-bottom: 4vw; } .effect_list li{ display: inline-block; background-color: #eb661b; color: #ffffff; font-size: 3vw; font-weight: bold; padding: 2vw; margin: 0 1vw 2vw; } .text_s{ font-size: 3vw; } /* 料金プラン */ .table_plan table { width: 100%; } .table_plan table , .table_plan td, .table_plan th { border: 1px solid #144a9e; border-collapse: collapse; padding: 0.5em; vertical-align: middle; } .table_plan th { background: #e5f0ff; padding: 0.5em; width: 26%; } .table_plan td { background-color: #ffffff; } /* 吹き出しキャラクター　衛生 */ .fukidasi_k01, .fukidasi_k02, .fukidasi_k03{ margin: 10vw 28vw 0 0; } .fukidasi_k01 p, .fukidasi_k02 p, .fukidasi_k03 p{ position: relative; background-color: #d3f4ff; border-radius: 10px; font-weight: bold; color: #144a9e; display: inline-block; padding: 3vw 3vw; } .fukidasi_k01 p::before, .fukidasi_k02 p::before, .fukidasi_k03 p::before { content: ""; position: absolute; top: 50%; left: 99.5%; margin-top: -15px; border: 15px solid transparent; border-left: 15px solid #d3f4ff; } .fukidasi_k01 p::after { content: ""; position: absolute; background: url(../img/fukidasi_eisei_img.png) no-repeat center top / auto 100%; top: 50%; left: 108.5%; margin-top: -17vw; width: 22vw; height: 29vw; } /* 吹き出しキャラクター　整備 */ .fukidasi_k02 p::after { content: ""; position: absolute; background: url(../img/fukidasi_setubi_img.png) no-repeat center top / auto 100%; top: 50%; left: 108.5%; margin-top: -13vw; width: 20vw; height: 24vw; } /* 吹き出しキャラクター　省エネ */ .fukidasi_k03 p::after { content: ""; position: absolute; background: url(../img/fukidasi_shouene_img.png) no-repeat center top / auto 100%; top: 50%; left: 108.5%; margin-top: -21vw; width: 20vw; height: 36vw; } /* キャラクター */ .character01, .character02, .character03{ position: relative; } .character01::before{ position: absolute; content: ""; background: url(../img/eisei.png) no-repeat center top / 100% auto; width: 27vw; height: 16vw; top: -17vw; right: -7vw; } .character02::before{ position: absolute; content: ""; background: url(../img/setubi.png) no-repeat center top / 100% auto; width: 22vw; height: 17vw; top: -16vw; right: -4vw; } .character03::before{ position: absolute; content: ""; background: url(../img/syouene.png) no-repeat center top / 100% auto; width: 22vw; height: 29vw; top: -21vw; right: -4vw; } /* お風呂モニタリングで促進する効果 */ .ofuromoni_box{ position: relative; border: solid 1px #144a9e; background: #ffffff; border-radius: 10px; padding: 4vw; } .ofuromoni_box::before{ position: absolute; content: ""; background: url(../img/syouene_02.png) no-repeat center top / 100% auto; width: 18vw; height: 27vw; top: -23.7vw; right: 4vw; } .ofuromoni_box > ul > li{ position: relative; font-size: 5vw; padding-left: 7vw; font-weight: bold; color: #144a9e; line-height: 1.2; margin-bottom: 3vw; } .ofuromoni_box > ul > li::before{ position: absolute; content: ""; background: url(../img/ore_ch.jpg) no-repeat center top / 100% auto; width: 5vw; height: 5vw; top: 0.6vw; left: 0; } } /* ================================================================================ プライバシーポリシー ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .plaivacy_box p.title_p:not(:first-of-type){ padding-top:1.5em } ul.pla_01{ margin: 0 0 0 1em; } ul.pla_01 li.text_01{ text-indent: -2.1em; margin-left: 2.1em; } ul.pla_01 li.text_02 { text-indent: -2.6em; margin-left: 3em; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .plaivacy_box p.title_p:not(:first-of-type){ padding-top:1.5em } ul.pla_01{ margin: 0 0 0 1em; } ul.pla_01 li.text_01{ text-indent: -2.1em; margin-left: 2.1em; } ul.pla_01 li.text_02 { text-indent: -2.6em; margin-left: 3em; } } /*-------------特定商取引法に基づく表記------------------*/ .tokutei{ width: 100%; } .tokutei p { font-size: 16px; font-weight: bold; text-align: center; margin: 60px auto 40px; } .tokutei th { background: #ec661b; border: solid 1px #ec661b; border-bottom: solid 1px #fff; color: #fff; padding: 10px; text-align: left; } .tokutei td { border: solid 1px #000; padding: 10px; } @media screen and (max-width: 640px) { .tokutei { width: 100%; } .tokutei tr { display: block; float: left; margin-bottom: 10px; } .tokutei tr th { border-bottom: none; } .tokutei tr td, .tokutei tr th { display: block; height: auto; } .tokutei thead { display: block; float: left; width: 100%; } .tokutei thead tr { width: 100%; } .tokutei tbody { display: block; float: left; width: 70%; } .tokutei tbody tr { width: 50%; } .tokutei tbody td:last-child { border-bottom: solid 1px #ccc; } }