★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */ /* ================================================================================ 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{ max-width:1920px; width:100%; min-height:50vh; background:url(../img/) center top no-repeat; display:block; padding-bottom:80px; margin:0 auto; } .inner_wrap{ max-width:1000px; width:100%; margin:0 auto; } /* 各ページ　メイン画像 */ .m-cate,.m-c-is { max-width: 1920px; width: 100%; height: 569px; background: url('../img/c-is.jpg') center top no-repeat; border-top: 2px solid #feb22f; } /* 各ページ　h2 */ .page-title { border-bottom: 2px solid; width: 50%; margin: 0 auto; font-size: 47px; color: #fff; text-align: left; padding: 262px 0 0 65px; letter-spacing: 2.5px; -moz-text-shadow: 0px 0px 6px rgba(65, 34, 15, 0.99); -webkit-text-shadow: 0px 0px 6px rgba(65, 34, 15, 0.99); -ms-text-shadow: 0px 0px 6px rgba(65, 34, 15, 0.99); text-shadow: 0px 0px 6px rgba(65, 34, 15, 0.99); } /* 各ページ　h3 */ .cate-h3 h3{ background-image: url(../img/h3.png); background-repeat: no-repeat; background-position: left top; font-size: 32px; color: #41220f; font-weight: normal; height: 100px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { #wrapper{ background:url(../img/) center top no-repeat; } main.outer_wrap{ width:100%; background:url(../img/) center top no-repeat; padding-bottom:40px; } .inner_wrap{ width:100%; padding:0 16px; } /* 各ページ　メイン画像 */ .m-cate,.m-c-is { width: 100%; background-size: cover !important; background: url('../img/sp-c-is.jpg') center top no-repeat; } /* 各ページ　h2 */ .page-title { font-size: 31px; color: #fff; text-align: center; padding: 25% 15px 22%; letter-spacing: 2.5px; -moz-text-shadow: 0px 0px 6px rgba(65, 34, 15, 0.99); -webkit-text-shadow: 0px 0px 6px rgba(65, 34, 15, 0.99); -ms-text-shadow: 0px 0px 6px rgba(65, 34, 15, 0.99); text-shadow: 0px 0px 6px rgba(65, 34, 15, 0.99); } /* 各ページ　h3 */ .cate-h3 h3{ background-image: url(../img/sp-icon.png); background-repeat: no-repeat; background-position: left top; font-size: 19px; color: #41220f; font-weight: normal; padding: 18px 0 41px 41px; margin: 0 0 0 5px; height: 54px; text-align: left !important; border-bottom: 3px solid #fff203; } } /* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ここから各固定ページ ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */ .facility_box { background: #FDFFF2; border: solid 1px #8fb313; } .facility_box h4 { color: #8fb313; } .facility_box h5 { color: #feb22f; } .price_box { text-align: center; border-radius: 10px; } .price_box .panel-grid-cell .so-panel:first-child { margin-bottom: 15px!important; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .section_box { margin-bottom: 80px!important; } .container_box { margin-bottom: 40px!important; } .komidashi_p p { font-size: 24px; font-weight: bold; } .about_midashi_h3 h3 { font-size: 28px; } .about_midashi_h4 h4 { font-size: 24px; } .facility_box { padding: 30px 40px; } .facility_box h4 { font-size: 20px } .facility_box h5 { font-size: 26px } .facility_box .pc_lr_box { display: block !important; overflow: auto; } .facility_box .pc_lr_box > div:nth-of-type(1) { float: right; } .facility_box .pc_lr_box > div:nth-of-type(2) { float: left; } .price_box { padding: 30px; } .price_box h4 { font-size: 28px; padding-bottom: 15px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .section_box { margin-bottom: 10%!important; } .container_box { margin-bottom: 4%!important; } .komidashi_p p { font-size: 20px; font-weight: bold; } .about_midashi_h3 h3 { font-size: 22px; } .about_midashi_h4 h4 { font-size: 18px; } .facility_box { padding: 5%; } .facility_box h4 { font-size: 20px } .facility_box h5 { font-size: 22px } .price_box { padding: 5%; } .price_box h4 { font-size: 22px; padding-bottom: 15px; } } /* ================================================================================ はじめての方へ ================================================================================ */ .first_h4 h4 { text-align: center; line-height: 1.4; } .first_h4 h4 span { font-size: 110%; } .first_h4 h4 .txt_pi { color: #B93E6A; } .first_h4 h4 .txt_bl { color: #2D878E; } .first_h4 h4 .txt_or { color: #FF8744; } .first_box03 { background: #FCF2F0; } .first_box03_inner { padding-left: 5%!important; padding-right: 5%!important; } .first_box03 .col_img_box .panel-grid-cell .so-panel:first-child { margin-bottom: 0!important; } .first_box03 .radius_box { border-radius: 15px; color: #FFF; text-align: center; line-height: 1.4; } .first_box03 .txt_box_bl { background: #2D878E; } .first_box03 .txt_box_pi { background: #B93E6A; } .first_box03 .txt_box_or { background: #FF8744; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .first_box02 { padding-left: 5%; padding-right: 5%; } .first_h4 h4 { font-size: 28px; } .first_box03 { padding: 80px 500%; margin: 0 -500%; } .first_box03 .radius_box { font-size: 22px; padding: 15px; } .first_box03_inner .pc_lr_box { display: block !important; overflow: auto; } .first_box03_inner .pc_lr_box > div:nth-of-type(1) { float: right; } .first_box03_inner .pc_lr_box > div:nth-of-type(2) { float: left; } .shourei_box { background-color: #ffffff; padding: 50px; } .shourei_box h3 { font-size: 24px; padding: 0 0 10px 0; } p.wpsm-show { text-align: center !important; font-size: 20px !important; color: #ffffff !important; background-color: #ff8744; padding: 10px; } p.wpsm-hide { text-align: center !important; font-size: 20px !important; color: #ffffff !important; background-color: #ff8744; padding: 10px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .first_h4 h4 { font-size: 20px; } .first_box02 .panel-grid-cell:first-child { padding-left: 8%!important; padding-right: 8%!important; } .first_box03 { padding: 8% 100%; margin: 0 -100%; } .first_box03 .radius_box { font-size: 22px; padding: 3%; } .shourei_box { background-color: #ffffff; padding: 30px; } .shourei_box h3 { font-size: 18px; padding: 0 0 10px 0; } p.wpsm-show { text-align: center !important; font-size: 16px !important; color: #ffffff !important; background-color: #ff8744; padding: 5px; } p.wpsm-hide { text-align: center !important; font-size: 16px !important; color: #ffffff !important; background-color: #ff8744; padding: 5px; } } /* ================================================================================ おれんぢ鍼灸院 ================================================================================ */ .acupuncture_box03 { background: #FCDAE3 url("../img/orange-bg03.png"); background-position: center top; background-repeat: no-repeat; } .acupuncture_box03 .about_midashi_h3 h3 { color: #B93E6A; } .post-95 .price_box { border: solid 1px #CCC; } .post-95 .price_box h4 { border-bottom: solid 3px #B93E6A; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .acupuncture_box03 { padding: 80px 500%; margin: 0 -500%; } .acupuncture_box03 .pc_lr_box { display: block !important; overflow: auto; } .acupuncture_box03 .pc_lr_box > div:nth-of-type(1) { float: right; } .acupuncture_box03 .pc_lr_box > div:nth-of-type(2) { float: left; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .acupuncture_box03 { padding: 8% 100%; margin: 0 -100%; } } /* ================================================================================ おれんぢ整骨院 ================================================================================ */ .osteopathic_box03 { background: #E6FCFD url("../img/orange-bg03.png"); background-position: center top; background-repeat: no-repeat; } .osteopathic_box03 .about_midashi_h3 h3 { color: #2D878E; } .post-97 .price_box { border: solid 1px #CCC; } .post-97 .price_box h4 { border-bottom: solid 3px #2D878E; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .osteopathic_box03 { padding: 80px 500%; margin: 0 -500%; } .osteopathic_box03 .pc_lr_box display: block !important; overflow: auto; } .osteopathic_box03 .pc_lr_box > div:nth-of-type(1) { float: right; } .osteopathic_box03 .pc_lr_box > div:nth-of-type(2) { float: left; } .menu { display :none; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .osteopathic_box03 { padding: 8% 100%; margin: 0 -100%; } .menu { display :none; } } /* ================================================================================ アクセス ================================================================================ */ .tb_access table { width: 100%; border-top: 1px solid #595959; } .gmap iframe { width: 100%; } /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .tb_access table td { padding: 15px 10px; } .gmap iframe { height: 450px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .tb_access table td { width: 100%; display: block; text-align: center; padding: 2%; } .tb_access table tr td:first-child { border-bottom: none; font-weight: bold; padding-bottom: 0; } .tb_access table tr td:nth-child(2) { padding-top: 1%; } .gmap iframe { height: 250px; } } /* ================================================================================ 〇〇ページ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { }