@charset "UTF-8";
@import url("common.css");


:root { /* 色変更される場合は、#以降のカラーコードを変更してください IE非対応 */
	--base-color: #111;
	--link-color:#111;
	--linkhover-color: #999;
	--back-color: #fff;
	--border-color: #000;
}

/* フォント */
/*
.jost-<uniquifier> {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.noto-sans-jp-<uniquifier> {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
}
*/


body {
      color: var(--base-color);
      font-family: "Noto Sans JP", sans-serif;
      font-weight: normal;
      background: var(--back-color);
      font-size: 1.8rem;
      font-weight: 500;
      line-height: 1.6;
      margin:0;
      padding:0;
      position: relative;
  }

a {
	display:block;
	color: var(--link-color);
	-webkit-text-decoration-line: none;
	        text-decoration-line: none;
    transition: all 0.3s ease;
}
a:hover { 
	color: var(--linkhover-color);
}



/*全体
-------------------------------------*/
.main_text{
    font-size:1.6rem;
    line-height:2.0;
    letter-spacing: 0.05em;
}
.title_box{
    text-align:center;
}
.sub_title{
   font-size:1.8rem;
   letter-spacing: 0.075em; 
   text-align: center;
   font-weight:bold;
}
.section_title{
    font-family: "Jost", sans-serif;
    font-size:6.5rem;
    letter-spacing: 0.075em; 
    text-align: center;
    display: inline-block;
    background: rgb(14,93,168);
    background: linear-gradient(36deg, rgba(14,93,168,1) 0%, rgba(106,207,255,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin:0 auto;
    font-weight:bold;
}
.rl{
    position:relative;
}
.nowrap{
    display:inline-block;
    text-wrap: nowrap;
}


/*ヘッダー
-------------------------------------*/
.header{
    width:100%;
    min-width:1210px;
    height:100px;
    background:#fff;
    position: relative;
    z-index: 9999;
}
.header.view{
    position: fixed;
    animation-name: fadein;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.header.view_out{
    position: fixed;
    animation-name: fadeout;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
@keyframes fadein {
    0% {
       opacity: 1;
       transform: translateY(-100px);
    }
    100% {
       opacity: 1;
       transform: translateY(0);
    }
  }
  @keyframes fadeout {
    0% {
       opacity: 1;
       transform: translateY(0);
    }
    100% {
        opacity: 1;
        transform: translateY(-100px);
    }
  }
.header .wrap{
    width:100%;
    margin:0 auto;
}
.header .logo{
    width:342px;
    height:auto;

    margin-right:auto;
    margin-left:25px;
    margin-top:10px;
}
.logo img{
    width:62px;
    height:auto;
}
.header .logo_box{
    margin-left:10px;
}
.header .sub_logo{
    font-size:1.5rem;
    letter-spacing: 0.1em;
    text-align:center;
    font-weight:bold;
    color:#0e5da8;
}
.header .main_logo{
    font-size:2.7rem;
    letter-spacing: 0.075em;
    text-align:center;
    font-weight:bold;
    color:#111;
}
.global_navi{
    display:flex;
    justify-content:center;
    align-items:center;
    height:100px;
    width:100%;
    min-width:1210px;
    margin:0 auto;
}
.global_navi_item{
    height:60px;
    width:140px;
    color:#111;
    text-decoration:none;
    position:relative;
    text-align: center;
    font-weight:700;
    font-size:1.6rem;
    letter-spacing:0.12em;
    padding-top:5px;
}
.nav_survice::before,
.nav_profile::before,
.nav_access::before{
    text-align: center;
    position:absolute;
    top:35px;
    color:#0e5da8;
    font-family: "Jost", sans-serif;
    font-size:1.3rem;
    letter-spacing:0.075em;
    display:block;
    width:100%;
}
.nav_survice::before{
    content:"SURVICE";
}
.nav_profile::before{
    content:"PROFILE";
}
.nav_access::before{
    content:"ACCESS";
}
.nav_survice:hover::before,
.nav_profile:hover::before,
.nav_access:hover::before,
.nav_contact:hover::before{
    opacity: 0.7;
}
.nav_contact{
    font-size:1.6rem;
    letter-spacing:0.12em;
    width:240px;
    padding-left:40px;
    border-left:1px solid #ccc;
    position: relative;
}
.nav_contact::before{
    font-family: "Jost", sans-serif;
    font-size:1.3rem;
    letter-spacing:0.075em;
    display:block;
    width:calc(100% - 40px);
    position:absolute;
    top:30px;
    color:#1d75bc;
    content:"CONTACT";
}
.nav_contact::after{
    content:"";
    background:url(../img/contact_icon.png) no-repeat;
    background-size: contain;
    height:27px;
    width:34px;
    position:absolute;
    top:10px;
    left:40px;
}
.contact_icon{
    width:34px;
    height:auto;
}
/*mein
-------------------------------------*/
main{
    /*padding-top:100px;*/
    min-width:1210px;
    overflow: hidden;
}
/*メインヴィジュアル
-------------------------------------*/
.main_view_area{
    width:100%;
    height:730px;
    overflow: hidden;
    background-color:#fff; 
    position:relative;
    padding:0;
}
.main_view_area .mid_width {
    min-width:auto;
    max-width: none;
}
.main_view_area .wrap{
    position:relative;
    overflow:visible;
    height:730px;
    padding:0;
    margin: 0 0 0 auto;
}
.slider{
    height:658px;
    position: absolute;
    top:0;
    left:13%;
    min-width:1210px;
    z-index:1;
    background:#fff;
}
.mainimage01,
.mainimage03{
    width:100%;
    height:658px!important;

}
.mainimage01{
    background:url(../img/main_img01.jpg) no-repeat;
    background-size:cover;
}
.mainimage03{
    background:url(../img/main_img03.jpg) no-repeat;
    background-size:cover;
}
.mainimage02{
    background:url(../img/main_img02.jpg) no-repeat;
    background-size: cover;
    height:658px;
    position: absolute;
    bottom:0;
    width:100%;
    min-width:1210px;
    z-index:0;
}
.main_catch{
    position: absolute;
    width:800px;
    height:350px;
    z-index:2;
    top:216px;
    left:10vw;
}
.main_catch .main_catch_text{
    font-weight:bold;
    letter-spacing: 0.13em;
    color:#fff;
    font-size:4.7rem;
    text-shadow: 0px 0px 10px rgba(0,0,0,0.9);
    margin-bottom:25px;
}
.survice_area{
    width:735px;
    justify-content: space-between;
}
.survice_area .sv_circle{
    width:166px;
    height:166px;
    border-radius: 50%;
    background-color: #fff;
    flex-shrink: 0;
    text-align:center;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    box-shadow: rgba(17, 17, 17, 0.17) 0px 0px 15px;
}
.survice_area .sv_text{
    font-size:1.6rem;
    letter-spacing: 0.075em;
    line-height:1.5;
    margin-top:30px;
    margin-bottom:10px;
    font-weight:bold;
}
.survice_area .sv_text.t01{
    margin-top:43px;
    margin-bottom:15px;

}
.survice_area .sv_circle img{
    width:35%;
}
.survice_area .sv_circle .sv01img{
    width:38%;
}
.survice_area .sv_circle .sv02img{
    width:50%;
}

/*水回りの工事、お困りごとなど何でもご相談下さい！
-------------------------------------*/
.about{
    width:100%;
    padding-top:115px;
    padding-bottom:100px;
    background:url(../img/about_bg_img.png) no-repeat;
    background-size:cover;
    background-position: 10% 45%;
}
.about_title{
    margin:0;
    margin-bottom:130px;
    text-align:center;
    font-size:3.0rem;
    letter-spacing: 0.075em;
    font-weight:bold;
    position:relative;
}
.about_title::after{
    content:"";
    position:absolute;
    display: block;
    height:3px;
    width:75px;
    top:90px;
    left:calc(50% - 37px);
    background: linear-gradient(90deg, rgba(18,92,153,1) 0%, rgba(108,200,247,1) 100%);
}
.about .row{
    align-items: start;
    width:100%;
}
.about .text_area{
    width:620px;
    flex-shrink: 0;
}
.about .text_area p{
    margin:3rem 0;
    font-weight:normal;
    font-size:1.7rem;
    letter-spacing: 0.05em;
    line-height:1.9;

}
.text_area p:first-of-type{
    margin-top:3.5rem;
}
.about .img_area{
    margin-left:0px;
}
.about .img_area{
    flex:1;
}
.about .img_area img{
    width:578px;
    max-width: none;
    height:auto;
    position:relative;
    right:7px; 
}
.area_box{
    margin:10px auto 0 auto;
    padding:40px;
    width:872px;
    background-color:rgba(255,255,255,0.5);
    box-shadow: rgba(149, 157, 165, 0.1) 0px 8px 24px;
    text-align:center;
}
.color_text01{
    color:#1a72ba; 
    font-size:2.0rem;
    font-weight: 700;
}
.area_text{
    margin-top:20px;
    font-size:1.6rem;
    text-wrap: nowrap;
}
.area_text .b::after{
    content:"・・・";
}
.area_text .b{
    font-size:1.8rem;
}

/*事業内容
-------------------------------------*/
.survice{
    background:url(../img/sv_bg02_1.jpg) no-repeat top center,url(../img/sv_bg02.png) no-repeat bottom left -30vw;
    background-size:100%,100%;
    padding-top:100px;
    padding-bottom:400px;
    overflow: hidden;
}
.survice .row{
    margin-top:85px;
}
.survice .title_box{
    margin-bottom:20px;
}
.survice .img_area{
    width:540px;
    flex-shrink: 0;
}
.survice .img_area img{
    width:540px;
    height:auto;
    box-shadow: rgba(17, 17, 17, 0.17) 0px 0px 15px;
}
.survice .rv .img_area img{
    left:auto;
    right:0px;
}

.sv_list{
    list-style:none;
    margin-left:5px;
    
}
.sv_list_item{
    position: relative;
    padding-left:20px;
    font-weight: bold;
    font-size:1.6rem;
}
.sv_title{
    font-size:2.6rem;
    font-weight:700;
    padding:30px 0;
    letter-spacing: 0.075em;
}
.sv_title.t01{
    padding-left:10rem;
    background:url(../img/sv_icon01.png) no-repeat;
    background-size:75px;
    background-position:left 3px center;
}
.sv_title.t02{
    padding-left:15rem;
    background:url(../img/sv_icon02.png) no-repeat;
    background-size:130px;
    background-position:left 3px center;
}
.sv_title.t03{
    padding-left:10rem;
    background:url(../img/sv_icon03.png) no-repeat;
    background-size:58px;
    background-position:left 3px center;
}
.sv_title.t04{
    padding-left:9rem;
    background:url(../img/sv_icon04.png) no-repeat;
    background-size:58px;
    background-position:left 3px center;
}
.survice .rv .text_area{
    margin-left:0px;
    margin-right:40px;
}
.survice .text_area{
    margin-left:40px;
}
.survice .text_area p{
    font-size:1.6rem;
    letter-spacing: 0.05em;
    position:relative;
    left:3px;
    line-height:2.0;
    margin:2rem 1em 2rem 0;
}
.survice .text_area .sv01_p,
.survice .text_area .sv02_p,
.survice .text_area .sv03_p{
    margin:2rem 0 2rem 0;
}
.survice .text_area .sv04_m{
    margin:1rem 0 2rem 0;
}
.sv_list_item{
    margin-bottom:1rem;
    padding-left:2.7rem;
}
.sv_list_item:before {
    content: "";
    position: absolute;
    top: .15em;
    left: 0px;
    width: 18px;
    height: 18px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    border-radius: 50%;
    background-color: #0a58a0;
}

.sv_list_item:after {
    content: "";
    position: absolute;
    top: .6em;
    left: 5px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
}
.survice .text_area .sub_text{
    font-weight:normal;
    font-size:1.6rem;
    line-height:1.5;
}
.ml_none{
    margin-top:10px;
    margin-left:-2rem;
    margin-bottom:20px;
}


/*会社概要
-------------------------------------*/
.profile_area{
    padding-top:200px;
    margin-top:-200px;
    clip-path: polygon(0 8.5vw, 100% 0, 100% 100%, 0 100%);
    background: rgb(106,207,255);
    background: linear-gradient(20deg, rgba(231,238,246,1) 0%, rgba(254,255,255,1) 100%);
    position: relative;
    padding-bottom:700px;
}
.profile{
    width:100%;
    overflow: hidden;
}
.profile_area .logo_bg_area{
    background:url(../img/profile_bg_logo.svg) no-repeat;
    width:482px;
    height:482px;
    position:absolute;
    top:300px;
    right:-20px;

}
.profile .mid_width{
    position: relative;
}
.profile .main_text{
    margin:4rem auto 2rem auto;
    width:fit-content;
    padding-right:100px;

}
dl.main_table{
    display: flex;
	flex-wrap: wrap;
	align-items: stretch;	
	width: 910px;
    margin-left:10%;
	border:none;
}
dl.main_table .th{
	padding: 30px;
	width: 200px;
	border-bottom: 1px solid #0e5da8;
    font-weight:bold;
    display: flex;
    align-items: center;

}
dl.main_table .td{
	padding: 30px;
	width: calc(100% - 200px);
	border-bottom: 1px solid #dbdbdb;
    font-weight:normal;
}

/*沿革
-------------------------------------*/

.history{
    position:absolute;
    left:0;
    top:-580px;
    z-index: 100;
    width:150vw;
    height:580px;
    background:#fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    padding:80px;
}
.history .sub_title,
.history .section_title{
    text-align:left;
}
.history_line{
    margin-top:50px;
    background:url(../img/history_img.png) no-repeat;
    background-size:1194px;
    width:1194px;
    height:83px;

}
.history_line_area{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    width:1120px;
}

.hs_box{
    margin-top:0px;
    width:450px;
}
.hs_box .ym{
    margin-top:20px;
    font-size:1.6rem;
    font-weight:bold;
    color:#0e5da8;
    letter-spacing: 0.075em;
}
.hs_box .text{
    font-size:1.6rem;
    letter-spacing: 0.025em;
    margin-top:10px;
}

/*お問い合わせ・ご相談
-------------------------------------*/
.wrap_contact{
    background:url(../img/contact_bg.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    margin-top:-100px;
    padding-top:230px;
    padding-bottom:140px;
    position:relative;
}
.contact{
    text-align:center;
    position:relative;
    z-index:10;
}
.contact_box{
    max-width:890px;
    padding:25px;
    height:220px;
    margin:50px auto 0px auto;
    background:#fff;
    border:1px solid #9e9e9e;
}
.contact .section_title{
    color: #111;
    background:none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
}
.contact .main_text{
    font-size:1.8rem;
    font-weight:bold;
}
.contact_box a:hover{
    opacity: 0.5;
    color:#111;
}
.contact_box .mail,
.contact_box .tel{
    display:flex;
    height:100%;
    width:50%;
    position:relative;
    align-items:center;
    justify-content: center;
}
.contact_box .inner{
}
.contact_box .tel::before{
    content:"";
    position:absolute;
    top:calc(50% - 65px);
    display:inline-block;
    height:130px;
    width:100%;
    border-left:1px solid #9e9e9e;
    left:0;
}
.contact_box .mail_text{
    display:block;
    font-size:2.4rem;
    letter-spacing: 0.1rem;
    font-weight:bold;
}
.contact_box .sub_text{
    margin-top:20px;
    display:block;
    font-size:1.6rem;
    letter-spacing: 0.1rem;
}
.contact_box .number{
    font-family: "Jost", sans-serif;
    font-size:3.2rem;
    letter-spacing: 0.075em;
    font-weight: 600;
    display:inline-block;
    padding-top:0px;
    padding-left:5rem;
    position:relative;
}
.contact_box .number::before{
    content:"";
    display: inline-block;
    position:absolute;
    left:0;
    top:5px;
    width:37px;
    height:37px;
    background:url(../img/tel_icon.png) no-repeat;
    background-size:37px;
}

.contact_box .mail_icon{
    margin-top:20px;
    width:60px;
    height:45px;
}
.contact_box .tel_icon{
    width:37px;
    height:37px;
}
.jost{
    font-family: "Jost", sans-serif;
}
/*アクセス
-------------------------------------*/
.access{
    margin-top:135px;
}
.access .title_box{
    text-align:left;
}
.access .title_box *{
    text-align:left;
}
.access .title_box .sub_title{
    font-size:1.8rem;
}
.access_img{
    width:55%;
    height:auto;
    min-width:808px;
    min-height:525px;
    position:relative;
    left:min(-3.5vw,-50px);
}
.access .row{
    align-items:end;
}
.access .main{
    text-align:center;
}
.access .logo_mark{
    width:78px;
    height:78px;
    margin-right:20px;
}
.access_logo{
    font-size:2.7rem;
    font-weight:bold;
    letter-spacing: 0.05em;

}
.access .s_text{
    margin-top:20px;
    font-size:1.7rem;
    letter-spacing: 0.07em;
    font-weight:normal;
    text-wrap: nowrap;
}
.access .ss_text{
    margin-top:15px;
    font-family: "Jost", sans-serif;
    font-size:1.6rem;
    letter-spacing: 0.05em;
    font-weight:normal;
}
.access .post{
    margin-top: 64px;
    margin-left: 34px;
    position:relative;
    bottom:-5px;
    background:url(../img/post_img.png) no-repeat;
    background-size:cover;
    width:357px;
    height:199px;
    z-index:100;
}
.access .post p{
    position:absolute;
    top:53px;
    right:45px;
    font-weight:bold;
}
.map{
    width:100%;
    height:500px;
    position: relative;
}
.map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
/*フッター
-------------------------------------*/
.footer{
    background:#2b3f6d;
    width:100%;
    min-width:1210px;
}
.footer .wrap{
    margin:0 auto;
    max-width:1170px;
    text-align:center;
    padding:80px 0 30px 0;
}
.foot_navi{
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.foot_navi_item{
    display:block;
    height:60px;
    width:150px;
    color:#fff;
    position:relative;
    font-size:1.6rem;
    letter-spacing: 0.1em;
    font-weight:bold;
    cursor: pointer;
}

.foot_navi_item::after{
    content:"/";
    padding-left:40px;
    pointer-events: none;
}
.foot_navi_item:last-child::after{
    content:"";
}
.foot_navi_item:hover::after{
    color:#fff;
    pointer-events: none;
}
.footer .line{
    height:1px;
    width:100%;
    background:#717e9d;
    margin-top:20px;

}
.footer .copy{
    margin-top:30px;
    color:#fff;

}
.foot_bottom{
    background:#fff;
    height:75px;
    width:100%;
}
.copy{
    font-size:1.4rem;
    letter-spacing: 0.1em;
}

@media screen and (min-width:1400px) { 
    /*　画面サイズが1400px以上はここを読み込む　*/
    .main_catch{
        left:10vw;
    }
    a[href^="tel:"] {
        pointer-events: none;
    }
    .chatch_sv_img{
        display: none;
    }
    .history_line_area.pc_none_s{
        display:none;
    }
}

@media screen and (min-width:769px) and ( max-width:1399px){ 
    /*　画面サイズが769pxからはここを読み込む　*/
    .main_catch{
        left:7vw;
    }
    .history{
        left:50px;
    }
    a[href^="tel:"] {
        pointer-events: none;
    }
    .chatch_sv_img{
        display: none;
    }
    .history_line_area.pc_none_s{
        display:none;
    }

}
@media screen and (max-width:768px) { 
    /*　画面サイズが768pxからはここを読み込む　*/

.full_width {
    width: 100%;
}
.mid_width{
    margin: 0 auto;
    width: 100%;
    max-width:none;
    min-width:auto;
    padding:0 5vw;
}
.title_box{
    text-align:center;
}
.sub_title{
   font-size:4vw;
}
.section_title{
    font-size:10vw;
    letter-spacing: 0.075em; 
}

.br_mid_none{
    display:none;
}
.header{
    width:100%;
    min-width:auto;
    height:60px;
    background:#fff;
    z-index: 9999;
    position:fixed;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.header .wrap{
    width:100%;
}

.header .logo{
    width:215px;
    height:auto;

    margin-right:auto;
    margin-left:2.5vw;
    margin-top:8px;
}
.logo img{
    width:38px;
    height:auto;
}
.header .logo_box{
    margin-left:1.25vw;
    text-align:left;
}
.header .sub_logo{
    text-align:left;
    font-size:1.0rem;
    letter-spacing: 0.1em;
}
.header .main_logo{
    font-size:1.6rem;
    letter-spacing: 0.075em;
}

.global_navi{
    width:100%;
    min-width:auto;
    position:absolute;
    height:auto;

}
.global_navi_item{
    display:none;
}
/*ハンバーガーメニュー
-------------------------------------*/

.hamburger {
	position:absolute;
	top:15px;
	right:3vw;
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	cursor: pointer;
	z-index: 9999;
}
.hamburger .bar {
	width: 30px;
	height: 2px;
	background: linear-gradient(-120deg, rgba(106,207,255,1) 0%, rgba(14,93,168,1) 100%);
	display: block;
	position: absolute;
	transition: all 0.3s;
    border-radius: 2px;
  }
  .hamburger .bar-top {
	transform: translate(0, -10px);
  }
  .hamburger .bar-bottom {
	transform: translate(0, 10px);
  }
  
  .hamburger.open .bar-middle {
	opacity: 0;
  }
  .hamburger.open .bar-top {
	transform: translate(0, 0) rotate(45deg);
  }
  .hamburger.open .bar-bottom {
	transform: translate(0, 0) rotate(-45deg);
  }
  .smart_navi {
	position: fixed;
	z-index: 9998;
	width: 100%;
	height: auto;
	background: #0e5da8;
	top: -60vh;
	left: 0;
	transition: all 0.8s ease;
	font-weight: normal;
    color:#fff;
    overflow-y: scroll;
    text-align: center;
    /* IE, Edge 対応 */
    -ms-overflow-style: none;
    /* Firefox 対応 */
    scrollbar-width: none;
  }
  .smart_navi::-webkit-scrollbar {
    display:none;
  }
  .smart_navi.open {
	top:0;
  }
  .smart_navi .smart_navi_item .smart_navi_list{
    padding:20px;
    border-bottom:1px solid #fff;
  }
  .smart_navi .smart_navi_item .smart_navi_list:last-of-type{
    border-bottom:none;
    padding-bottom:30px;
  }
  .smart_navi .smart_navi_item{
    list-style:none;
    margin:60px 5vw 0 5vw;
  }
  .smart_navi .smart_navi_item a{
    color:#fff;
  }

    /*mein
    -------------------------------------*/
    main{
        padding-top:60px;
        min-width:auto;
        overflow: hidden;
    }

    /*メインヴィジュアル
    -------------------------------------*/
    .main_view_area{
        width:100%;
        height:87.5vw;
        overflow: hidden;
        background-color:#fff;
        position:relative;
        padding:0;
    }
    .main_view_area .wrap{
        height:87.5vw;
    }
    .slider{
        height:61.25vw;
        position: absolute;
        top:0;
        left:10vw;
        width:calc(100% - 10vw);
        min-width:auto;
        z-index:1;
        background:#fff;
    }
    .mainimage01,
    .mainimage03{
        width:100%;
        height:61.25vw!important;

    }

    .mainimage02{
        height:79.5vw;
        position: absolute;
        bottom:0;
        width:100%;
        min-width:auto;
    }

    .main_catch{
        width:auto;
        height:auto;
        z-index:2;
        top:26vw;
        left:5vw;
    }
    .main_catch .main_catch_text{
        font-size:5.25vw;
        text-shadow: 0px 0px 10px rgba(0,0,0,0.9);
        line-height:1.6666;
        letter-spacing: 0.13em;
    }
    .survice_area{
        display:none;
    }

    .chatch_sv_img{
        position: absolute;
        top:57.49vw;
        width:100%;
        left:calc(50% - 50%);
        z-index: 1;
    }

    /*水回りの工事、お困りごとなど何でもご相談下さい！
    -------------------------------------*/
    .about{
        width:100%;
        padding-top:50px;
        padding-bottom:100px;
        background:url(../img/area_bg_sp.png) no-repeat;
        background-size:min(200vw,768px);
        background-position: left 50% bottom;
    }
    .about_title{
        margin:0;
        margin-bottom:10vw;
        text-align:center;
        font-size:4.5vw;
        letter-spacing: 0.075em;
        font-weight:bold;
        position:relative;
    }
    .about_title::after{
        height:3px;
        width:50px;
        top:20vw;
        left:calc(50% - 25px);
    }
    .about .row{
        align-items: start;
        width:100%;
        flex-direction: column-reverse;
    }
    .about .text_area{
        width:100%;
        flex-shrink: 0;
    }
    .about .text_area p{
        margin:3rem 0;
        font-weight:500;
        font-size:1.59rem;/*改行位置調整の為*/
        letter-spacing: 0em;
        line-height:1.9;

    }
    .text_area p:first-of-type{
        margin-top:1rem;
    }.about .img_area{
        margin-left:0px;
    }
    .about .img_area{
        flex:1;
    }
    .about .img_area img{
        width:100vw;
        max-width: none;
        height:auto;
        position:relative;
        right:auto; 
        left:-5vw;
    }

    .area_box{
        margin:10px auto 0 auto;
        padding:40px 15px;
        width:100%;
    }
    .color_text01{
        font-size:1.8rem;
        font-weight: 700;
    }
    .color_text01 span{
        display: inline-block;
    }
    .area_text{
        margin-top:20px;
        font-size:1.6rem;
        text-wrap: wrap;
        text-align: left;
    }
    .area_text .b::after{
        content:"・・・";
    }
    .area_text .b{
        font-size:1.8rem;
        display: block;
        margin-bottom:10px;
    }

    /*事業内容
    -------------------------------------*/
    .survice{
        background:url(../img/sv_bg02_1_sp.png) no-repeat top center,url(../img/sv_bg02.png) no-repeat bottom min(15vw,50px) left max(-150vw,-700px);
        background-size:100%,min(300%,1500px);
        padding-top:40px;
        padding-bottom:300px;
        overflow: hidden;
    }
    .survice .row{
        margin-top:0px;
        flex-direction: column;
    }

    .survice .img_area{
        width:100%;
    }
    .survice .img_area img{
        width:100%;
        height:auto;
    }
    .sv_title{
        font-size:2.0rem;
        font-weight:700;
        padding:30px 0;
        letter-spacing: 0.075em;
        text-align: center;
        margin:0 auto;
        width:fit-content;
    }
    .sv_title.t01{
        padding-left:6.5rem;
        background:url(../img/sv_icon01.png) no-repeat;
        background-size:55px;
        background-position:left  center;
    }
    .sv_title.t02{
        padding-left:12rem;
        background:url(../img/sv_icon02.png) no-repeat;
        background-size:100px;
        background-position:left center;
    }
    .sv_title.t03{
        padding-left:6rem;
        background:url(../img/sv_icon03.png) no-repeat;
        background-size:45px;
        background-position:left center;
    }
    .sv_title.t04{
        padding-left:6rem;
        background:url(../img/sv_icon04.png) no-repeat;
        background-size:45px;
        background-position:left center;
        margin-top:1rem;
    }

    .survice .rv .text_area,
    .survice .text_area{
        margin-left:0px;
        margin-right:0px;
        width:100%;
    }
    .survice .text_area p{
        font-size:1.6rem;
        letter-spacing: 0em;
        position:static;
        left:0;
        line-height:1.75;
        margin:2rem 0 2rem 0;
    }
    .survice .text_area .sv04_m{
        margin:2rem 0 2rem 0;
    }
    .sv02_p .nowrap{
        text-wrap: wrap;
        display: inline;
    }
    .sv_list_item{
        margin-bottom:0.5rem;
        padding-left:2.7rem;
    }
    .survice .text_area .sub_text{
        font-weight:normal;
        font-size:1.6rem;
        line-height:1;
        display: inline;
    }
    .survice .text_area .sub_text.ml_none{
        display: block;
        line-height:1.5;
    }

    /*会社概要
    -------------------------------------*/
    .profile_area{
        padding-top:100px;
        margin-top:-200px;
        padding-bottom:850px;
    }
    .profile{
        width:100%;
        overflow: hidden;
    }
    .profile_area .logo_bg_area{
        width:80vw;
        height:80vw;
        top:min(100%,500px);
        right:-3vw;
    }
    .profile .main_text{
        padding-right:0;

    }
    dl.main_table{
        flex-direction: column;	
        width: 100%;
        margin-left:auto;
        margin-right:auto;
        border:none;
    }
    dl.main_table .th{
        padding: 20px 0 10px 0;
        width: 100%;
        position:relative;
        border-bottom: 1px solid #dbdbdb;
    }
    dl.main_table .th::before{
        content: '';
        position: absolute;
        bottom: -1px;
        width:35vw;
        height: 1px;
        background: #0e5da8;/*左：ピンク*/
    }
    dl.main_table .td{
        padding: 20px 0;
        width: 100%;
        border:none;
        margin-bottom:20px;
    }
    /*沿革
    -------------------------------------*/

    .history{
        position:absolute;
        left:5vw;
        top:-750px;
        z-index: 100;
        width:calc(100% - 5vw);
        height:auto;
        background:#fff;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        padding:50px 5vw;
    }
    .history .sub_title,
    .history .section_title{
        text-align:left;
    }
    .history .section_title{
        letter-spacing: 0.075em;
    }
    .history_line{
        margin-top:40px;
        background:url(../img/history_line_sp.png) no-repeat;
        background-size:163px;
        background-position: left 3vw top;
        width:90vw;
        height:604px;
    }
    .history_line_area{
        display:flex;
        flex-direction: column;
        justify-content: space-between;
        width:60vw;
        height:580px;
        padding-top:20px;
        margin-left:14vw;
    }
    .hs_box {
        margin-top:0;
    }
    .hs_box .text{
        margin-top:5px;
    }
    .history_line_area .text.indent{
        text-indent:-0.8rem;
    }
    .history_line_area.sp_none_s{
        display:none;
    }
    .wrap_contact{
        background:url(../img/contact_bg.jpg) no-repeat;
        background-position: center;
        background-size: cover;
        padding-top:37vw;
        padding-bottom:80px;
        margin-top:-40px;
    }
    .contact{
        background:none;
        margin-top:0;
        padding-top:0;
        padding-bottom:0;
        text-align:center;
        position:relative;
        z-index:10;
    }
    .contact_box{
        max-width:none;
        width:min(90vw,500px);
        padding:25px;
        height:auto;
        margin:50px auto 0px auto;
        flex-direction: column;
    }
    .contact .main_text{
        font-size :1.4rem;
        font-weight:bold;
    }
    .contact_box .mail,
    .contact_box .tel{
        display:flex;
        height:min(50vw,250px);
        width:100%;
        position:relative;
        align-items:center;
        justify-content: center;
    }
    .contact_box .tel::before{
        content:"";
        position:absolute;
        top:0;
        display:inline-block;
        height:130px;
        width:100%;
        border-left:none;
        border-top:1px solid #9e9e9e;
        left:0;
    }
    .contact_box .mail_text{
        display:block;
        font-size:2.0rem;
        letter-spacing: 0.1rem;
        font-weight:bold;
    }
    .contact_box .number{
        font-size:2.4rem;
        letter-spacing: 0.075em;
        padding-left:4rem;
    }
    .contact_box .number::before{

        left:0;
        top:5px;
        width:30px;
        height:30px;
        background-size:30px;
    }
    /*アクセス
    -------------------------------------*/
    .access{
        margin-top:30px;
    }
    .access .title_box{
        text-align:center;
    }
    .access .title_box *{
        text-align:center;
    }
    .access .title_box .sub_title{
        font-size:1.8rem;
    }
    .access .row{
        flex-direction: column;
        align-items: center;
    }
    .access_img{
        width:100%;
        height:auto;
        min-width:auto;
        min-height:auto;
        position:relative;
        left:auto;
    }
    .access .main{
        text-align:center;
        padding-top:30px;
    }
    .access .logo_mark{
        width:35px;
        height:35px;
        margin-right:15px;
    }
    .access_logo{
        font-size:2.2rem;
        font-weight:bold;
        letter-spacing: 0.05em;
    
    }
    .access .s_text{
        margin-top:20px;
        font-size:1.6rem;
        letter-spacing: 0;
        text-wrap: wrap;
    }
    .access .ss_text{
        margin-top:15px;
        font-size:1.6rem;
        letter-spacing: 0;
        text-wrap: nowrap;
    }
    .access .ss_text a{
        display: inline!important;
    }
    .access .post{
        margin:50px auto 0 auto;
        position:relative;
        bottom:-5px;
        background:url(../img/post_img.png) no-repeat;
        background-size:cover;
        width:min(80vw,400px);
        height:min(44vw,220px);
        z-index:100;
    }
    .access .post p{
        width:150px;
        position:absolute;
        top:min(13vw,70px);
        right:calc(35% - 75px);
        font-weight:bold;
        font-size:1.4rem;
    }
    .map{
        width:100%;
        height:350px;
    }
    /*フッター
    -------------------------------------*/
    .footer{
        background:#2b3f6d;
        width:100%;
        min-width:auto;
        overflow: hidden;
    }
    .footer .wrap{
        margin:0 auto;
        max-width:1170px;
        text-align:center;
        padding:40px 0 30px 0;
    }
    .foot_navi{
        display:flex;
        flex-wrap: wrap;
        width:fit-content;
        margin:0 auto;
        align-items: center;
        justify-content: center;
        margin-left:4vw;
    }
    .footer .line{
        width:90vw;
        margin:0 auto;
    }
    .foot_navi_item{
        display:block;
        height:60px;
        width:22.5vw;
        color:#fff;
        position:relative;
        font-size:1.4rem;
        letter-spacing: 0.1em;
        font-weight:bold;
        text-align:center;
        position:relative;
    }
    .foot_navi_item::after{
        content:"/";
        position:absolute;
        padding-left:0;
        right:-0.5rem;
        pointer-events: none;
    }
    @media screen and (max-width:400px) {
        .br_mid_none{
            display:block;
        }
    }

}