@charset "utf-8";
/*
機　　能　　名：排水管高圧洗浄
作　　成　　日：2019/09/05
作　　成　　者：52WEB WORKS. 関本
更　　新　　日：

/* ***************************************
	about
**************************************** */
@media screen and (min-width: 769px) {/* PC */
.main_ttl {
background:url(../images/about/main_ttl_pc.png) center 0 no-repeat;
}
}
@media screen and (max-width: 768px) {/* SP */
.main_ttl {
background:url(../images/about/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/about/main_ttl_pc.png) center 0 no-repeat;
background-size:auto 395px;
-webkit-background-size:auto 395px;
}
}
}

/* ***************************************
	system
**************************************** */
#system {
margin-bottom:0;
}
#system .s_box,
#system .s_box_in {
margin:0 auto;
}
#system .s_box h4 {
position:relative;
display:inline-block;
}
#system .s_box h4 img {
position:absolute;
}
#system .s_box .txt_red,
#system .s_box .txt_black .small {
font-style:normal;
}
#system .s_box .align_r {
line-height:1.2;
}
/* s_memo */
#system .s_memo {
border-top:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
margin:0 auto;
}
#system .s_memo_in {
background:#F3E5E5;
}
#system .s_memo h5 {
text-align:center;
font-family:"ＭＳ Ｐ明朝","MS PMincho","Times New Roman","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","メイリオ",Meiryo,serif;
}
@media screen and (min-width: 769px) {/* PC */
#system .bg_wrapper {
padding:20px 0 100px 0;
}
#system .s_intro2 {
width:840px;
margin:0 auto 126px auto;
}
#system .s_box {
width:900px;
}
#system .s_box1 {
margin-bottom:30px;
background:url(../images/about/s_box1_bg.png) right 0 no-repeat;
}
#system .s_box2 {
margin-bottom:100px;
background:url(../images/about/s_box2_bg.png) right 0 no-repeat;
}
#system .s_box3 {
background:url(../images/about/s_box3_bg.png) right 0 no-repeat;
}
#system .s_box_in {
width:840px;
}
#system .s_box h4 {
font-size:22px;
padding-left:140px;
margin:25px 0 55px 20px;
}
#system .s_box h4 .big {
font-size:44px;
}
#system .s_box h4 img {
top:-70px;
left:-20px;
}
#system .s_box .s_txt {
width:520px;
margin-bottom:95px;
text-align:center;
}
#system .txt_black .small {
font-size:26px;
}
/* s_memo */
#system .s_memo {
padding:10px 0;
width:900px;
margin-bottom:100px;
}
#system .s_memo_in {
padding:20px 30px;
}
#system .s_memo h5 {
margin-bottom:20px;
font-size:20px;
}
}
@media screen and (max-width: 768px) {/* SP */
#system .s_intro1 {
background:#FFF;
width:calc(90% - 40px);
margin:0 auto;
padding:30px 20px;
}
#system .s_intro1 p {
text-align:center;
}
#system .bg_wrapper {
padding:10px 0 50px 0;
}
#system .s_box1 {
margin-bottom:25px;
background:url(../images/about/s_box1_bg.png) center 175px no-repeat;
background-size:160px auto;
-webkit-background-size:160px auto;
}
#system .s_box2 {
margin-bottom:50px;
background:url(../images/about/s_box2_bg.png) center 175px no-repeat;
background-size:160px auto;
-webkit-background-size:160px auto;
}
#system .s_box3 {
background:url(../images/about/s_box3_bg.png) center 175px no-repeat;
background-size:160px auto;
-webkit-background-size:160px auto;
}
#system .s_box h4 {
font-size:11px;
padding-left:70px;
width:calc(96% - 80px);
margin:60px 0 20px 10px;
}
#system .s_box h4 .big {
font-size:22px;
}
#system .s_box h4 img {
top:-35px;
left:-10px;
width:96px;
}
#system .s_box .s_txt {
text-align:center;
margin-bottom:170px;
}
#system .txt_black .small {
font-size:16px;
}
#system .txt_blue {
font-size:26px;
}
/* s_memo */
#system .s_memo {
padding:5px 0;
margin-bottom:50px;
}
#system .s_memo_in {
padding:15px;
}
#system .s_memo h5 {
margin-bottom:15px;
font-size:17px;
}
@media screen and (min-width: 480px) {/* Tablet iPad・mini */
#system .s_box1 {
margin-bottom:25px;
background:url(../images/about/s_box1_bg.png) center 140px no-repeat;
background-size:160px auto;
-webkit-background-size:160px auto;
}
#system .s_box2 {
margin-bottom:50px;
background:url(../images/about/s_box2_bg.png) center 140px no-repeat;
background-size:160px auto;
-webkit-background-size:160px auto;
}
#system .s_box3 {
background:url(../images/about/s_box3_bg.png) center 140px no-repeat;
background-size:160px auto;
-webkit-background-size:160px auto;
}
#system .s_box h4 {
width:calc(50% - 90px);
padding-left:90px;
margin:60px auto 20px auto;
display:block;
}
}
@media screen and (max-width: 320px) {/* iphoneSE */
#system .txt_blue {
font-size:22px;
}
#system .s_box h4 {
padding-left:50px;
width:calc(96% - 60px);
}
#system .s_box h4 .big {
font-size:18px;
}
#system .s_box h4 img {
width:80px;
}
}
}

/* ***************************************
	flow
**************************************** */
#flow {
margin-bottom:0;
}
#flow .f_box {
border-bottom:1px solid #CCCCCC;
position:relative;
}
#flow .f_box:after {
position:absolute;
left:50%;
content:"";
}
#flow .f_box5:after {
display:none;
}
#flow .f_box h4 {
font-family:"ＭＳ Ｐ明朝","MS PMincho","Times New Roman","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","メイリオ",Meiryo,serif;/* りゅうみん */
}
#flow .f_box h4 .num {
background:#000;
color:#E0D2B7;
text-align:center;
border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;
}
@media screen and (min-width: 769px) {/* PC */
#flow .bg_wrapper {
padding:20px 0 100px 0;
}
#flow .f_intro {
width:840px;
margin:0 auto 70px auto;
}
#flow .f_box {
padding-bottom:30px;
margin-bottom:80px;
min-height:168px;
}
#flow .f_box:after {
bottom:-51px;
margin-left:-25px;
border-top:50px solid #41515A;
border-right:50px solid transparent;
border-left:50px solid transparent;
}
#flow .f_box1 {
background:url(../images/about/f_box1.png) right top no-repeat;
}
#flow .f_box2 {
background:url(../images/about/f_box2.png) right top no-repeat;
}
#flow .f_box3 {
background:url(../images/about/f_box3.png) right top no-repeat;
}
#flow .f_box4 {
background:url(../images/about/f_box4.png) right top no-repeat;
}
#flow .f_box5 {
background:url(../images/about/f_box5.png) right top no-repeat;
}
#flow .f_box h4 {
font-size:34px;
margin-bottom:20px;
}
#flow .f_box h4 .num {
font-size:27px;
width:40px;
height:40px;
line-height:40px;
display:inline-block;
margin-right:8px;
}
#flow .f_box h4 .small {
font-size:28px;
}
#flow .f_box p {
width:450px;
margin-left:48px;
}
@media screen and (min-width: 769px) and (max-width: 1280px) {/* PC small */
}
}
@media screen and (max-width: 768px) {/* SP */
#flow .bg_wrapper {
padding:15px 0 50px 0;
}
#flow .f_intro {
margin:0 auto 45px auto;
}
#flow .f_box {
padding-bottom:125px;
margin-bottom:40px;
min-height:102px;
}
#flow .f_box1 {
background:url(../images/about/f_box1.png) right 0px bottom 20px no-repeat;
background-size:auto 84px;
-webkit-background-size:auto 84px;
}
#flow .f_box2 {
background:url(../images/about/f_box2.png) right 0px bottom 20px no-repeat;
background-size:auto 84px;
-webkit-background-size:auto 84px;
}
#flow .f_box3 {
background:url(../images/about/f_box3.png) right 0px bottom 20px no-repeat;
background-size:auto 84px;
-webkit-background-size:auto 84px;
}
#flow .f_box4 {
background:url(../images/about/f_box4.png) right 0px bottom 20px no-repeat;
background-size:auto 84px;
-webkit-background-size:auto 84px;
}
#flow .f_box5 {
background:url(../images/about/f_box5.png) right 0px bottom 20px no-repeat;
background-size:auto 84px;
-webkit-background-size:auto 84px;
}
#flow .f_box:after {
bottom:-26px;
margin-left:-12px;
border-top:25px solid #41515A;
border-right:25px solid transparent;
border-left:25px solid transparent;
}
#flow .f_box h4 {
font-size:17px;
padding-left:28px;
margin-bottom:15px;
position:relative;
min-height:20px;
line-height:1.2;
}
#flow .f_box h4 .num {
font-size:13px;
width:20px;
height:20px;
line-height:20px;
display:inline-block;
position:absolute;
top:0;
left:0;
}
#flow .f_box h4 .small {
font-size:14px;
}
@media screen and (min-width: 480px) {/* Tablet iPad・mini */
#flow .f_box {
padding-bottom:20px;
}
#flow .f_box p {
width:410px;
}
}
}

/* ***************************************
	area
**************************************** */
#area {
margin-bottom:0;
}
#area .a_intro {
background:#FFF;
}
#area .a_intro p {
margin:0 auto;
}
#area .a_map {
margin:0 auto;
}
#area .a_map .a_ttl {
font-family:"ＭＳ Ｐ明朝","MS PMincho","Times New Roman","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","メイリオ",Meiryo,serif;
font-weight:bold;
}
#area .a_map .info_memo .info_memo_in {
display:block;
position:relative;
text-align:center;
}
#area .a_box {
margin:0 auto;
}
#area .a_box_last {
border-bottom:1px solid #CCCCCC;
padding-bottom:20px;
}
#area .a_box h4 {
text-align:center;
background:#5C6E85;
color:#FFF;
font-family:"ＭＳ Ｐ明朝","MS PMincho","Times New Roman","游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","メイリオ",Meiryo,serif;
}
#area .a_box li {
line-height:2;
}
#area .a_box .w_all {
border-bottom:1px solid #CCCCCC;
padding-bottom:20px;
margin-bottom:20px;
}

@media screen and (min-width: 769px) {/* PC */
#area .ttl_01 {
padding-bottom:70px;
}
#area .a_intro {
padding-bottom:60px;
}
#area .a_intro p {
width:840px;
}
#area .a_intro .red {
font-size:14px;
}
#area .bg_wrapper {
padding-bottom:100px;
}
#area .a_map {
width:900px;
padding-top:40px;
margin-bottom:60px;
background:url(../images/top/a_bg_pc.png) center 0 no-repeat;
}
#area .a_map .clearfix {
padding-left:88px;
}
#area .a_map .a_ttl {
font-size:34px;
float:left;
width:340px;
padding-top:10px;
line-height:1.2;
text-align:right;
}
#area .a_map .a_ttl .red {
font-size:66px;
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;
}
#area .a_map .a_ttl .big {
font-size:46px;
}
#area .a_map .a_ttl .small {
font-size:20px;
display:block;
text-align:left;
padding-left:55px;
}
#area .a_map .info_memo {
font-size:33px;
float:left;
width:270px;
margin-left:25px;
}
#area .a_map .info_memo .info_memo_in {
margin-bottom:7px;
padding:12px 10px;
}
#area .a_map .info_memo .info_memo_in:before {
content:"";
position:absolute;
top:50%;
left:-24px;
margin-top:-12px;
border:12px solid transparent;
border-right:12px solid #FFDC73;
z-index:2;
}
#area .a_map .info_memo .info_memo_in:after {
content:"";
position:absolute;
top:50%;
left:-32px;
margin-top:-14px;
border:14px solid transparent;
border-right:14px solid #BA0000;
z-index:1;
}
#area .a_map .a_memo {
margin:0 0 70px 260px;
}
#area .a_box {
width:900px;
margin-bottom:50px;
}
#area .a_box h4 {
font-size:20px;
height:63px;
line-height:63px;
margin-bottom:30px;
}
#area .a_box ul div {
padding:0 0px 0 30px;
}
#area .a_box li {
width:6em;
}
#area .a_box .w_all {
width:100%;
}
@media screen and (min-width: 769px) and (max-width: 1280px) {/* PC small */
}
}
@media screen and (max-width: 768px) {/* SP */
#area .a_intro {
padding-bottom:30px;
}
#area .a_intro p {
width:90%;
}
#area .a_intro .red {
font-size:12px;
}
#area .bg_wrapper {
padding-bottom:50px;
}
#area .a_map {
width:90%;
margin-bottom:25px;
padding-top:15px;
background:url(../images/about/a_bg_sp.png) 0 0 no-repeat;
background-size:139px auto;
-webkit-background-size:139px auto;
}
#area .a_map .a_ttl {
position:relative;
font-size:12px;
line-height:1.2;
text-align:center;
}
#area .a_map .a_ttl .red {
font-size:28px;
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;
}
#area .a_map .a_ttl .big {
font-size:20px;
}
#area .a_map .a_ttl .small {
font-size:10px;
display:block;
margin-left:100px;
position:relative;
top:-38px;
}
#area .a_map .info_memo {
margin-left:150px;
margin-bottom:17px;
}
#area .a_map .info_memo .info_memo_in {
margin-bottom:5px;
}
#area .a_map .a_memo {
font-size:12px;
margin:0 0 20px 90px;
}
#area .a_box {
width:90%;
margin-bottom:30px;
}
#area .a_box h4 {
font-size:16px;
height:35px;
line-height:35px;
margin-bottom:20px;
}
#area .a_box li {
width:25%;
}
#area .a_box .w_all {
width:100%;
}
@media screen and (min-width: 480px) {/* Tablet iPad・mini */
#area .a_map {
width:50%;
}
#area .a_box li {
width:14%;
}
#area .a_box .w_all {
width:100%;
}
}
@media screen and (max-width: 320px) {/* iphoneSE */
#area .a_box li {
width:33%;
}
#area .a_box .w_all {
width:100%;
}
}
}