★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */ /* ================================================================================ Site origin 30pxマージン解除 ※案件によって使い分けてください。 ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .panel-grid{ margin:0 auto !important; } .panel-grid-cell{ margin:0 auto !important; } .so-panel{ margin:0 auto !important; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .panel-grid{ margin:0 auto !important; } .panel-grid-cell{ margin:0 auto !important; } .so-panel{ margin:0 auto !important; } } /* ================================================================================ レイアウト ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { #wrapper{ background:url(../img/) center top no-repeat; } main.outer_wrap{ position:relative; max-width:1920px; width:100%; min-height:50vh; background:url(../img/) center top no-repeat; display:block; padding:80px 0 120px; margin:0 auto; } .inner_wrap{ position:relative; max-width:1000px; width:100%; margin:0 auto; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { #wrapper{ background: url(../img/) center top no-repeat; } main.outer_wrap{ position: relative; width: 100%; background: url(../img/) center top no-repeat; padding: 40px 0; } .inner_wrap{ position: relative; width: 100%; padding: 0 16px; } } /* ================================================================================ 各メイン画像 ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .m-cate_wrap{ position:relative; max-width:1920px; width:100%; height: 30vw; } .m-reason{ background: url(../img/main_01.jpg) center top no-repeat; background-size: cover; } .m-metal{ background: url(../img/main_02.jpg) center top no-repeat; background-size: cover; } .m-custom{ background: url(../img/main_03.jpg) center top no-repeat; background-size: cover; } .m-original{ background: url(../img/main_04.jpg) center top no-repeat; background-size: cover; } .m-qa{ background: url(../img/main_05.jpg) center top no-repeat; background-size: cover; } .m-blog{ background: url(../img/main_06.jpg) center top no-repeat; background-size: cover; } .m-access{ background: url(../img/main_07.jpg) center top no-repeat; background-size: cover; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .m-cate_wrap{ position: relative; width: 100%; height: 139vw; margin: 0 auto; height: 94vw; } .m-reason{ background: url(../img/sp_main_01.jpg) center top no-repeat; background-size: 100% auto; } .m-metal{ background: url(../img/sp_main_02.jpg) center top no-repeat; background-size: 100% auto; } .m-custom{ background: url(../img/sp_main_03.jpg) center top no-repeat; background-size: 100% auto; } .m-original{ background: url(../img/sp_main_04.jpg) center top no-repeat; background-size: 100% auto; } .m-qa{ background: url(../img/sp_main_05.jpg) center top no-repeat; background-size: 100% auto; } .m-blog{ background: url(../img/sp_main_06.jpg) center top no-repeat; background-size: 100% auto; } .m-access{ background: url(../img/sp_main_07.jpg) center top no-repeat; background-size: 100% auto; } } /* ================================================================================ 見出し ================================================================================ */ /* PC */ @media (min-width: 768px) { .h2_cate h2 { color: #ffffff; font-size: 38px; font-weight: normal; } .h2_cate h3 { color: #c1c1c1; font-size: 18px; font-weight: normal; font-family: "EB Garamond", serif; } h3.h3_cate { position: relative; text-align: center; } h3.h3_cate span { position: relative; z-index: 2; display: inline-block; margin: 0 2.5em; padding: 0 1em; color: #ffffff !important; font-size: 28px; font-weight: normal; background-color: #000000; text-align: left; } h3.h3_cate::before { position: absolute; top: 50%; z-index: 1; content: ''; display: block; width: 100%; height: 1px; background-color: #ffffff; } } /* SP */ @media (max-width: 767px) { .h2_cate h2 { color: #ffffff; font-size: 24px; font-weight: normal; } .h2_cate h3 { color: #c1c1c1; font-size: 14px; font-weight: normal; font-family: "EB Garamond", serif; } h3.h3_cate { position: relative; text-align: center; } h3.h3_cate span { position: relative; z-index: 2; display: inline-block; margin: 0 2.5em; padding: 0 1em; color: #ffffff !important; font-size: 16px; font-weight: normal; background-color: #000000; text-align: left; } h3.h3_cate::before { position: absolute; top: 50%; z-index: 1; content: ''; display: block; width: 100%; height: 1px; background-color: #ffffff; } } /* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ここから各固定ページ ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */ /* ================================================================================ 共通設定 ================================================================================ */ .midashi_h3 h3 { text-align: center; color: #FFF; } .midashi_h4 h4 { text-align: center; color: #FFF; } .txt_p_wh { color: #FFF; } .txt_p_center { text-align: center; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .midashi_h3 { margin-bottom: 30px!important; } .midashi_h3 h3 { font-size: 28px; } .midashi_h4 h4 { font-size: 24px; margin-bottom: 30px; } .section_box { margin-bottom: 100px; } .container_box { margin-bottom: 50px; } .case_box { margin-bottom: 30px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .midashi_h3 { margin-bottom: 3%; } .midashi_h3 h3 { font-size: 22px; } .midashi_h4 h4 { font-size: 20px; margin-bottom: 3%; } .section_box { margin-bottom: 12%; } .container_box { margin-bottom: 6%; } .case_box { margin-bottom: 4%; } .col_btn .panel-grid-cell { margin-bottom: 20px!important; } .pc_lr .img_box { margin-bottom: 20px; } } /* ================================================================================ 選ばれる理由 ================================================================================ */ .reason_img_box01 { background: url(../img/bg_reason01.png) no-repeat; background-size: contain; } .reason_img_box02 { background: url(../img/bg_reason02.png) no-repeat; background-size: contain; } .reason_img_txt { color: #FFF; line-height: 1.4; } .reason_img_txt span { font-size: 260%; display: block; } .strong_box { background: rgba(255,255,255,0.1); text-align: center; color: #FFF; } .strong_box h4 { border-bottom: solid 1px #FFF; } .strong_box h4 span { color: #a43434; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .reason_img_box01 { background-position: 28% top; } .reason_img_box02 { background-position: 74% top; } .reason_img_txt { font-size: 24px; text-align: right; padding-top: 100px; padding-right: 20px; } .reason_img_box02 .reason_img_img { text-align: right; } .reason_img_box02 .reason_img_img img { display: inline-block!important; } .reason_img_box02 .reason_img_txt { text-align: left; padding-left: 20px; } .strong_box { padding: 30px 40px; } .strong_box h4 { font-size: 26px; padding-bottom: 6px; margin-bottom: 12px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .reason_img_box01 { background-position: center bottom; } .reason_img_box02 { background-position: center bottom; } .reason_img_txt { font-size: 18px; text-align: center; padding-top: 20px; } .strong_box { padding: 4%; text-align: left; } .strong_box h4 { font-size: 18px; padding-bottom: 1%; margin-bottom: 2%; } } /* ================================================================================ 板金・塗装 ================================================================================ */ .flow_box02 { border: solid 1px #FFF; color: #FFF; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .flow_box02 { padding: 30px; } .flow_img_arrow { margin: 20px auto; width: 60px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .flow_box02 { padding: 4%; } .flow_img_arrow { margin: 2% auto; width: 40px; } .img_col5 .panel-grid-cell { margin-top: 15px!important; } .img_col5 .panel-grid-cell:first-child { margin-top: 0!important; } } /* ================================================================================ カスタムペイント ================================================================================ */ .custom_font_box { background: url(../img/bg_custom01.jpg) no-repeat right center; background-size: cover; color: #FFF; } .flow_box { background: rgba(255,255,255,0.1); color: #FFF; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .custom_font_box { padding: 30px 20px; } .custom_font_h4 { margin: 80px 0 10px; font-size: 24px; } .flow_box { padding: 30px; margin-bottom: 30px; } .flow_box span { font-size: 24px; } .flow_box .flow_img_box { margin: 15px 0; } .container_box .flow_box { margin-bottom: 0; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .col3_img_box .panel-grid-cell { margin-top: 15px!important; } .col3_img_box .panel-grid-cell:first-child { margin-top: 0!important; } .custom_font_box { padding: 4%; } .custom_font_h4 { font-size: 20px; padding: 10px 0; } .flow_box { padding: 4%; margin-bottom: 4%; } .flow_box span { font-size: 20px; } .flow_box .flow_img_box { margin: 2% 0; } } /* ================================================================================ オリジナルアードボード・サンブラスト ================================================================================ */ .tb_price table { width: 100%; color: #FFF; text-align: center; } .tb_price.no_th table { border-top: solid 1px #FFF; margin-bottom: 10px; } .tb_price table tr th { background: #872323; padding: 10px; } .tb_price table tr td { border-bottom: solid 1px #FFF; padding: 10px; } .tb_price table tr th:first-child, .tb_price table tr td:first-child { border-right: solid 1px #FFF; width: 50%; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .tb_price table tr th, .tb_price table tr td { padding: 10px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .tb_price table tr th, .tb_price table tr td { padding: 2%; } } /* ================================================================================ 良くあるご質問･お客様の声 ================================================================================ */ .qa_box { background: rgba(255,255,255,0.1); color: #FFF; } .qa_box span { display: block; font-weight: bold; font-size: 115%; margin-bottom: 15px; line-height: 1.4; padding-left: 23px; text-indent:-13px; } .qa_box span em { color: #a43434; font-style: normal; display: inline-block; margin-right: 8px; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .qa_box { padding: 30px; margin-bottom: 30px; } .section_box .qa_box { margin-bottom: 0; } #voice{ padding-top:7vw; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .qa_box { padding: 4%; margin-bottom: 4%; } } /* ================================================================================ アクセス・会社概要 ================================================================================ */ .tb_access table { width: 100%; color: #FFF; border-top: solid 1px #FFF; } .gmap iframe { width: 100%; } .tb_contact table { width: 100%; } .tb_contact table tr td:first-child { color: #FFF; vertical-align: top; } .tb_contact table tr td:first-child span { color: #a43434; } .tb_contact table td input[type="text"], .tb_contact table td input[type="email"], .tb_contact table td textarea { width: 100%; } .submit_btn { text-align: center; } .submit_btn input { background: #751D1C; border: none; color: #FFF; font-size: 120%; cursor: pointer; cursor: hand; opacity:1; transition-property:color,opacity; transition-duration:0.3s; transition-timing-function:ease-in-out; transition-delay:0s; } .submit_btn input:hover{ opacity:0.6; } div.wpcf7 { color: #ffffff; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .tb_access table td { border-bottom: solid 1px #FFF; padding: 5px 10px; } .gmap iframe { height: 450px; } .tb_contact table { margin-bottom: 20px; } .tb_contact table tr td { padding-bottom: 10px; } .tb_contact table td input[type="text"], .tb_contact table td input[type="email"], .tb_contact table td textarea, .tb_contact table td select { padding: 5px; } .submit_btn input { padding: 15px 90px; } .contact_text{ margin-bottom:40px; text-align:center; } .contact_text p{ color: #ffffff; } .privacy{ margin-bottom:40px; } .privacy h3, .privacy p{ color: #ffffff; text-align:center; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .tb_access table { margin-top: 20px; } .tb_access table td { display: block; width: 100%; text-align: center; padding: 2% 3% 1%; } .tb_access table td:nth-child(2) { border-bottom: solid 1px #FFF; padding-top: 0; padding-bottom: 2%; } .case_box.col3_box { margin-bottom: 15px!important; } .col3_box .panel-grid-cell:nth-child(-n+2) { margin-bottom: 15px!important; } .gmap iframe { height: 250px; } .tb_contact table { margin-bottom: 2%; } .tb_contact table tr td { display: block; width: 100%; } .tb_contact table td:nth-child(2) { padding-bottom: 3%; } .submit_btn input { padding: 2% 50px; } .contact_text{ margin-bottom:40px; } .contact_text p{ color: #ffffff; } .privacy{ margin-bottom:40px; } .privacy h3, .privacy p{ color: #ffffff; } }