@charset "utf-8";
/*
機　　能　　名：排水管のトラブル
作　　成　　日：2019/09/17
作　　成　　者：52WEB WORKS. 関本
更　　新　　日：

/* ***************************************
	trouble
**************************************** */
@media screen and (min-width: 769px) {/* PC */
.main_ttl {
background:url(../images/trouble/main_ttl_pc.png) center 0 no-repeat;
}
}
@media screen and (max-width: 768px) {/* SP */
.main_ttl {
background:url(../images/trouble/main_ttl_sp.png) center center no-repeat;
background-size:auto 180px;
-webkit-background-size:auto 180px;
}
@media screen and (min-width: 480px) {/* Tablet iPad・mini */
.main_ttl {
background:url(../images/trouble/main_ttl_pc.png) center 0 no-repeat;
background-size:auto 395px;
-webkit-background-size:auto 395px;
}
}
}

/* ***************************************
	cause
**************************************** */
#cause {
margin-bottom:0;
}
#cause .c_intro {
color:#FFFFFF;
background:rgba(92,110,110,0.9);
margin:0 auto;
}
#cause .c_bg1 .mincho {
text-align:center;
line-height:1.2;
}
#cause .c_bg1 .mincho .txt {
position:relative;
z-index:1;
}
#cause .c_bg1 .mincho img {
position:absolute;
left:50%;
z-index:0;
}
#cause .c_bg1 .mincho .red {
color:#8A0000;
font-weight:bold;
}
/* c_box */
#cause .c_box {
margin:0 auto;
}
#cause .c_box h4 {
color:#FFF;
font-family:"ＭＳ Ｐ明朝","MS PMincho","Times New Roman","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","メイリオ",Meiryo,serif;
position:relative;
}
#cause .c_box h4 img {
position:absolute;
}
#cause .c_box_top p {
background:rgba(255,255,255,0.8);
}
#cause .c_pop {
position:relative;
text-align:center;
font-family:"ＭＳ Ｐ明朝","MS PMincho","Times New Roman","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","メイリオ",Meiryo,serif;
}
#cause .c_pop:before,
#cause .c_pop:after {
content:"";
position:absolute;
}
#cause .c_pop:before {
left:0;
}
#cause .c_pop:after {
right:0;
}
#cause .c_pop .blue {
color:#1F3D8C;
}
#cause .c_btm {
background:#8A0000;
}
#cause .c_btm p {
color:#FFFFFF;
font-weight:bold;
text-align:center;
font-family:"ＭＳ Ｐ明朝","MS PMincho","Times New Roman","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","メイリオ",Meiryo,serif;
}
#cause .c_box5 p {
text-align:center;
}
#cause .c_box5 .mincho span {
color:#8A0000;
}
#cause .c_box5 .txt_blue {
margin:0 auto;
display:block;
position:relative;
filter:drop-shadow(0px 0px 0px rgba(29,59,59,0));
}
#cause .c_box5 .txt_blue:before,
#cause .c_box5 .txt_blue:after {
content:"";
position:absolute;
top:0;
}
#cause .c_box5 .txt_blue:before {
left:0;
background:url(../images/trouble/c_box5_l.png) 0 0 no-repeat;
}
#cause .c_box5 .txt_blue:after {
right:0;
background:url(../images/trouble/c_box5_r.png) right 0 no-repeat;
}
#cause .c_box5 .txt_yellow {
filter:drop-shadow(0px 0px 0px rgba(29,59,59,0));
}
@media screen and (min-width: 769px) {/* PC */
#cause .ttl_01 .ttl_in {
background:url(../images/common/ttl_01_bg.png) bottom 66px center no-repeat;
padding-bottom:146px;
}
#cause .c_bg1 {
height:420px;
background:#DFDDE2 url(../images/trouble/c_bg1_pc.png) center 0 no-repeat;
}
#cause .c_intro {
width:840px;/* total 900px */
padding:30px;
position:relative;
top:-40px;
}
#cause .c_bg1 .mincho {
font-size:32px;
text-shadow:
#FFF 3px 0px,  #FFF -3px 0px,
#FFF 0px -3px, #FFF 0px 3px,
#FFF 3px 3px , #FFF -3px 3px,
#FFF 3px -3px, #FFF -3px -3px,
#FFF 1px 3px,  #FFF -1px 3px,
#FFF 1px -3px, #FFF -1px -3px,
#FFF 3px 1px,  #FFF -3px 1px,
#FFF 3px -1px, #FFF -3px -1px;
position:relative;
margin-top:110px;
}
#cause .c_bg1 .mincho img {
top:-130px;
margin-left:-226px;
}
#cause .c_bg1 .mincho .red {
font-size:46px;
}
#cause .bg_wrapper {
padding:160px 0 100px 0;
}
/* c_box */
#cause .c_box {
width:900px;
margin-bottom:160px;
}
#cause .c_box4 {
margin-bottom:50px;
}
#cause .c_box_top {
width:760px;/* total 760px */
padding:20px 70px;
margin-bottom:15px;
}
#cause .c_box1 .c_box_top {
background:url(../images/trouble/c_box1_pc.png) 0 0 no-repeat;
}
#cause .c_box2 .c_box_top {
background:url(../images/trouble/c_box2_pc.png) 0 0 no-repeat;
}
#cause .c_box3 .c_box_top {
background:url(../images/trouble/c_box3_pc.png) 0 0 no-repeat;
}
#cause .c_box4 .c_box_top {
background:url(../images/trouble/c_box4_pc.png) 0 0 no-repeat;
}
#cause .c_box h4 {
font-size:46px;
margin-bottom:35px;
text-align:center;
}
#cause .c_box h4 span {
font-size:36px;
}
#cause .c_box h4 img {
bottom:-36px;
left:-50px;
}
#cause .c_box_top p {
padding:20px 35px 30px 35px;
}
#cause .c_pop {
font-size:26px;
width:770px;
margin:0 auto 20px auto;
}
#cause .c_pop:before,
#cause .c_pop:after {
top:15px;
width:20px;
height:37px;
}
#cause .c_pop:before {
background:url(../images/trouble/c_l.png) left center no-repeat;
background-size:auto 37px;
-webkit-background-size:auto 37px;
}
#cause .c_pop:after {
background:url(../images/trouble/c_r.png) right center no-repeat;
background-size:auto 37px;
-webkit-background-size:auto 37px;
}
#cause .c_pop .red_bg {
font-size:33px;
margin-left:10px;
margin-right:10px;
}
#cause .c_pop .red_bg .small {
font-size:23px;
}
#cause .c_pop .blue {
font-size:36px;
}
#cause .c_btm {
padding:20px;
}
#cause .c_btm p {
font-size:22px;
}
#cause .c_box5 .mincho {
font-size:22px;
margin-bottom:40px;
}
#cause .c_box5 .txt_blue {
font-size:46px;
}
#cause .c_box5 .txt_yellow {
font-size:80px;
}
#cause .c_box5 .txt_yellow span {
font-size:70px;
}
#cause .c_box5 .txt_blue {
width:710px;/* total 770px */
padding-right:60px;
padding-top:40px;
line-height:1.2;
}
#cause .c_box5 .txt_blue:before,
#cause .c_box5 .txt_blue:after {
height:243px;
}
#cause .c_box5 .txt_blue:before {
width:140px;
}
#cause .c_box5 .txt_blue:after {
width:206px;
}
}
@media screen and (max-width: 768px) {/* SP */
#cause .c_txt {
background:#FFF;
padding:5%;
}
#cause .c_bg1 .c_bg_in {
padding:17px 0 35px 0;
background:url(../images/trouble/c_bg1_sp.png) center bottom no-repeat;
}
#cause .c_intro {
padding:5%;
}
#cause .bg_wrapper {
padding-top:50px;
padding-bottom:50px;
}
#cause .c_bg1 .mincho {
font-size:16px;
text-shadow:
#FFF 1.5px 0px,  #FFF -1.5px 0px,
#FFF 0px -1.5px, #FFF 0px 1.5px,
#FFF 1.5px 1.5px , #FFF -1.5px 1.5px,
#FFF 1.5px -1.5px, #FFF -1.5px -1.5px,
#FFF 1px 1.5px,  #FFF -1px 1.5px,
#FFF 1px -1.5px, #FFF -1px -1.5px,
#FFF 1.5px 1px,  #FFF -1.5px 1px,
#FFF 1.5px -1px, #FFF -1.5px -1px;
position:relative;
padding-top:60px;
}
#cause .c_bg1 .mincho img {
width:225px;
top:0;
margin-left:-112px;
}
#cause .c_bg1 .mincho .red {
font-size:23px;
}
/* c_box */
#cause .c_box {
width:90%;
margin-bottom:75px;
}
#cause .c_box4 {
margin-bottom:20px;
}
#cause .c_box_top {
padding:20px 0;
margin-bottom:10px;
}
#cause .c_box1 .c_box_top {
background:url(../images/trouble/c_box1_sp.png) 0 0 no-repeat;
}
#cause .c_box2 .c_box_top {
background:url(../images/trouble/c_box2_sp.png) 0 0 no-repeat;
}
#cause .c_box3 .c_box_top {
background:url(../images/trouble/c_box3_sp.png) 0 0 no-repeat;
}
#cause .c_box4 .c_box_top {
background:url(../images/trouble/c_box4_sp.png) 0 0 no-repeat;
}
#cause .c_box h4 {
font-size:20px;
margin-bottom:17px;
padding-left:55px;
padding-right:5px;
}
#cause .c_box h4 span {
font-size:16px;
}
#cause .c_box h4 img {
bottom:-18px;
left:-25px;
width:98px;
}
#cause .c_box_top p {
padding:15px;
}
#cause .c_pop {
font-size:13px;
width:90%;
margin:0 auto 10px auto;
}
#cause .c_pop:before,
#cause .c_pop:after {
bottom:15px;
width:24px;
height:44px;
}
#cause .c_pop:before {
background:url(../images/trouble/c_l.png) left center no-repeat;
background-size:auto 44px;
-webkit-background-size:auto 44px;
}
#cause .c_pop:after {
background:url(../images/trouble/c_r.png) right center no-repeat;
background-size:auto 44px;
-webkit-background-size:auto 44px;
}
#cause .c_pop .red_bg {
width:65%;
font-size:16px;
margin-left:0;
margin:0 auto;
}
#cause .c_pop .red_bg .small {
font-size:12px;
}
#cause .c_pop .blue {
font-size:18px;
}
#cause .c_btm {
padding:10px;
}
#cause .c_btm p {
font-size:13px;
}
#cause .c_box5 .mincho {
margin-bottom:10px;
}
#cause .c_box5 .txt_blue {
width:calc(98% - 30px);
padding-right:30px;
padding-top:18px;
line-height:1.4;
}
#cause .c_box5 .txt_blue:before,
#cause .c_box5 .txt_blue:after {
height:121px;
background-size:auto 100px;
-webkit-background-size:auto 100px;
}
#cause .c_box5 .txt_blue:before {
width:70px;
}
#cause .c_box5 .txt_blue:after {
width:103px;
}
@media screen and (min-width: 480px) {/* Tablet iPad・mini */
#cause .c_pop {
width:50%;
}
#cause .c_box5 .txt_blue {
width:calc(48% - 30px);
}
}
@media screen and (max-width: 320px) {/* iphoneSE */
#cause .c_box h4 {
font-size:18px;
}
#cause .c_box3 h4 {
padding-left:40px;
padding-right:10px;
}
#cause .c_box h4 span {
font-size:14px;
}
}
}

/* ***************************************
	how
**************************************** */
#how {
margin-bottom:0;
}
#how .h_intro {
color:#FFFFFF;
background:rgba(92,110,110,0.9);
margin:0 auto;
}
#how .h_box h4 {
font-family:"ＭＳ Ｐ明朝","MS PMincho","Times New Roman","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","メイリオ",Meiryo,serif;
text-align:center;
background:#E0D2B7;
}
#how .h_box_img {
text-align:center;
border:1px solid #DDDDDD;
}
#how .h_box3 .txt_blue {
line-height:1.3;
filter:drop-shadow(0px 0px 0px rgba(29,59,59,0));
}
#how .h_box3 .txt_yellow {
filter:drop-shadow(0px 0px 0px rgba(29,59,59,0));
}
#how .h_box3 .h_box3_in {
font-family:"ＭＳ Ｐ明朝","MS PMincho","Times New Roman","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","メイリオ",Meiryo,serif;
background:#F3E5E5;
}
#how .h_box3 .h_box3_in p {
text-align:center;
}
@media screen and (min-width: 769px) {/* PC */
#how .bg_wrapper {
padding-bottom:100px;
}
#how .h_intro {
padding:30px;
margin-bottom:50px;
}
#how .h_intro_txt {
margin-bottom:75px;
}
#how .h_box1 {
margin-bottom:70px;
}
#how .h_box2 {
margin-bottom:45px;
}
#how .h_box h4 {
font-size:40px;
height:60px;
line-height:60px;
margin-bottom:40px;
}
#how .h_box h4 span {
font-size:30px;
}
#how .h_box_img {
padding:30px 0;
margin-bottom:25px;
}
#how .h_box3 {
padding-top:12px;
background:url(../images/trouble/h_box3_bg_pc.png) 0 0 no-repeat;
}
#how .h_box3 .txt_blue {
padding-left:100px;
margin-bottom:30px;
}
#how .h_box3 .h_box3_in {
padding:25px;
font-size:18px;
}
}
@media screen and (max-width: 768px) {/* SP */
#how .bg_wrapper {
padding-bottom:50px;
}
#how .h_intro {
padding:5%;
margin-bottom:25px;
}
#how .h_intro_txt {
margin-bottom:35px;
}
#how .h_box1 {
margin-bottom:30px;
}
#how .h_box2 {
margin-bottom:20px;
}
#how .h_box h4 {
font-size:20px;
height:30px;
line-height:30px;
margin-bottom:20px;
}
#how .h_box h4 span {
font-size:15px;
}
#how .h_box_img {
padding:15px;
margin-bottom:12px;
}
#how .h_box3 {
padding-top:70px;
background:url(../images/trouble/h_box3_bg_sp.png) center 0 no-repeat;
background-size:auto 90px;
-webkit-background-size:auto 90px;
}
#how .h_box3 .txt_blue {
text-align:center;
display:block;
margin:0 auto 15px auto;
font-size:20px;
}
#how .h_box3 .txt_yellow {
font-size:30px;
}
#how .h_box3 .h_box3_in {
padding:25px 0;
}
@media screen and (min-width: 480px) {/* Tablet iPad・mini */
#how .h_box_img img {
width:50%;
}
#how .h_box3 .h_box3_in p .sp {
display:none;
}
}
@media screen and (max-width: 320px) {/* iphoneSE */
#how .h_box3 {
padding-top:80px;
}
#how .h_box3 .txt_blue {
font-size:18px;
}
#how .h_box3 .txt_yellow {
font-size:25px;
}
}
}

/* ***************************************
	maintenance
**************************************** */
#maintenance {
margin-bottom:0;
}
#maintenance .m_intro {
color:#FFFFFF;
background:rgba(92,110,110,0.9);
margin:0 auto;
}
#maintenance .m_bg1 .mincho {
text-align:center;
font-weight:bold;
line-height:1.4;
}
#maintenance .m_place li {
color:#FFFFFF;
background:#41515A;
font-family:"ＭＳ Ｐ明朝","MS PMincho","Times New Roman","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","メイリオ",Meiryo,serif;
text-align:center;
}
#maintenance .m_bg1 .mincho span {
color:#1F3D8C;
}
#maintenance .m_btm h4 {
text-align:center;
background:#7B181A;
color:#FFFFFF;
margin:0 auto;
line-height:1.2;
font-family:"ＭＳ Ｐ明朝","MS PMincho","Times New Roman","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","メイリオ",Meiryo,serif;
border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;
}
#maintenance .m_btm h4 span {
display:block;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size:12px;
}
#maintenance .m_list {
background:#F3E5E5;
color:#7B181A;
font-family:"ＭＳ Ｐ明朝","MS PMincho","Times New Roman","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","メイリオ",Meiryo,serif;
}
#maintenance .m_list h5 {
text-align:center;
}
#maintenance .m_list ul {
margin:0 auto;
line-height:2.2;
}
@media screen and (min-width: 769px) {/* PC */
#maintenance .m_bg1 {
height:420px;
background:#DFDDE2 url(../images/trouble/c_bg1_pc.png) center 0 no-repeat;
}
#maintenance .m_intro {
width:850px;/* total 900px */
padding:30px 25px;
}
#maintenance .m_bg1 .mincho {
font-size:32px;
text-shadow:
#FFF 3px 0px,  #FFF -3px 0px,
#FFF 0px -3px, #FFF 0px 3px,
#FFF 3px 3px , #FFF -3px 3px,
#FFF 3px -3px, #FFF -3px -3px,
#FFF 1px 3px,  #FFF -1px 3px,
#FFF 1px -3px, #FFF -1px -3px,
#FFF 3px 1px,  #FFF -3px 1px,
#FFF 3px -1px, #FFF -3px -1px;
position:relative;
margin-top:55px;
}
#maintenance .m_bg1 .mincho span {
font-size:46px;
}
#maintenance .bg_wrapper {
padding:50px 0 100px 0;
}
#maintenance .m_place {
margin-bottom:30px;
}
#maintenance .m_place li {
font-size:26px;
width:220px;
height:60px;
line-height:60px;
margin-right:6px;
}
#maintenance .m_place li.lastChild {
margin-right:0;
}
#maintenance .m_btm h4 {
font-size:40px;
width:280px;
height:210px;/* total 280px */
padding-top:70px;
}
#maintenance .m_btm h4 span {
padding-top:15px;
}
#maintenance .m_list {
padding:30px 0;
margin-top:-50px;
margin-bottom:10px;
}
#maintenance .m_list h5 {
font-size:36px;
margin-bottom:25px;
}
#maintenance .m_list h5 span {
font-size:30px;
}
#maintenance .m_list ul {
font-size:18px;
width:430px;
}
#maintenance .m_list li {
padding-left:28px;
background:url(../images/common/icon_chk.png) 0 6px no-repeat;
background-size:auto 23px;
-webkit-background-size:auto 23px;
}
#maintenance .m_btm .att {
text-align:center;
}
}
@media screen and (max-width: 768px) {/* SP */
#maintenance .m_bg1 {
padding:0 0 30px 0;
background:url(../images/trouble/c_bg1_sp.png) center bottom no-repeat;
}
#maintenance .m_intro {
padding:5%;
}
#maintenance .m_bg1 .mincho {
font-size:16px;
text-shadow:
#FFF 1.5px 0px,  #FFF -1.5px 0px,
#FFF 0px -1.5px, #FFF 0px 1.5px,
#FFF 1.5px 1.5px , #FFF -1.5px 1.5px,
#FFF 1.5px -1.5px, #FFF -1.5px -1.5px,
#FFF 1px 1.5px,  #FFF -1px 1.5px,
#FFF 1px -1.5px, #FFF -1px -1.5px,
#FFF 1.5px 1px,  #FFF -1.5px 1px,
#FFF 1.5px -1px, #FFF -1.5px -1px;
position:relative;
padding-top:20px;
}
#maintenance .m_bg1 .mincho span {
font-size:23px;
}
#maintenance .bg_wrapper {
padding:25px 0 50px 0;
}
#maintenance .m_place {
margin-bottom:15px;
}
#maintenance .m_place li {
font-size:18px;
width:49%;
height:40px;
line-height:40px;
margin-bottom:5px;
}
#maintenance .m_place li.even {
float:right;
}
#maintenance .m_btm h4 {
font-size:28px;
width:180px;
height:150px;/* total 180px */
padding-top:30px;
}
#maintenance .m_btm h4 span {
padding-top:8px;
}
#maintenance .m_list {
padding:20px 0;
margin-top:-40px;
margin-bottom:8px;
}
#maintenance .m_list h5 {
font-size:24px;
margin-bottom:20px;
}
#maintenance .m_list h5 span {
font-size:17px;
}
#maintenance .m_list ul {
font-size:12px;
width:90%;
}
#maintenance .m_list li {
padding-left:20px;
background:url(../images/common/icon_chk.png) 0 3px no-repeat;
background-size:auto 18px;
-webkit-background-size:auto 18px;
}
@media screen and (min-width: 480px) {/* Tablet iPad・mini */
#maintenance .m_list {
width:70%;
margin:-40px auto 8px auto;
}
#maintenance .m_list h5 .sp {
display:none;
}
#maintenance .m_list ul {
margin:0 auto;
width:65%;
}
#maintenance .m_btm .att {
text-align:center;
}
}
}