@charset "utf-8";
/*メイン画像*/
#main_area{position:relative; width:100%;height:clamp(200px,calc(300/1500*100vw),300px);overflow: hidden;}
#main_area picture,#main_area  img{display:block;object-fit: cover;width:100%;height:100% !important;object-position: left center;}
#main_area p{position: absolute;left:50%;top:50%; white-space: nowrap;transform: translateX(-50%) translateY(-50%);background:#004da1;border:2px solid #FFF;border-radius: 12px; padding:clamp(15px,calc(30/1500*100vw),30px) clamp(25px,calc(50/1500*100vw),50px);text-align: center;font-size:clamp(20px,calc(30/1500*100vw),30px);color:#FFF;}
#main_area span{font-size:clamp(14px,calc(16/1025*100vw),16px); font-family: Arial, Helvetica, "sans-serif";font-weight: bold;}

.w900{position:relative;width:100%;max-width: 900px; margin:auto; padding:clamp(15px,calc(30/900*100vw),30px);}
.w1000{width:100%;max-width:1000px;margin:auto;}
.deco,.deco2{font-family: Arial, Helvetica, "sans-serif";font-style: italic;font-size:clamp(18px,calc(23/1500*100vw),23px);color:#004da1;background:url("../images/h3_line.webp") no-repeat left bottom; padding-bottom:10px; margin-bottom: 10px;}
.deco span,.deco2 span{font-family: Arial, Helvetica, "sans-serif";font-style: italic;font-size:clamp(20px,calc(30/1500*100vw),30px);}

/*サービスコンセプト*/
#newopen .imgL{justify-content: space-between;align-items: center;}
#newopen .imgL img{width:clamp(300px,calc(500/1500*100vw),500px);}
#newopen .rco{width:calc(100% - clamp(320px,calc(550/1500*100vw),550px));}
#newopen dl div{display:flex;margin-bottom: 20px;}
#newopen dt,#newopen dd{padding:10px;}
#newopen dt{background:#004da1;color:#FFF;width:300px;}
#newopen dd{border:1px solid #b4b4b5; width:calc(100% - 300px);}
h3.circle span{position:relative;z-index:0;}
h3.circle span::before{content:"";display:block;width:clamp(36px,calc(62/1500*100vw),62px); height:clamp(36px,calc(62/1500*100vw),62px);border-radius: 50px;background:#e5edf5;position:absolute;left:clamp(-30px,calc(-30/1500*100vw),-15px);top:clamp(-16px,calc(-16/1500*100vw),-5px);z-index:-1;}

/*選ばれる理由-----------------*/
.reason{align-items: flex-start;justify-content: space-between;padding-top:30px;}
.reason_lco{ left:0;width:40%; max-width: 500px;}
.reason_rco{width:55%;display:block;margin-left: auto;}
.h3_circle{border-bottom:1px solid #004da1;position:relative;padding-bottom:5px;text-shadow:3px 3px 0 #FFF, -3px -3px 0 #FFF,-3px 3px 0 #FFF, 3px -3px 0 #FFF,0px 3px 0 #FFF,  0-3px 0 #FFF,-3px 0 0 #FFF,31px 0 0 #FFF;}
.h3_circle span.blue{color:#004da1;font-family: Arial, Helvetica, "sans-serif";font-style: italic;font-size:clamp(18px,calc(23/1500*100vw),23px); line-height: 1.0;}
.h3_circle span.blue span{font-size:clamp(20px,calc(30/1500*100vw),30px);font-style: italic;}
.h3_circle::before{content:"";display:block;width:clamp(36px,calc(62/1500*100vw),62px); height:clamp(36px,calc(62/1500*100vw),62px);border-radius: 50px;background:#e5edf5;position:absolute;left:clamp(-30px,calc(-30/1500*100vw),-15px);top:10px;z-index:-1;}

/*各工程の支援内容-----------------*/
.service {counter-reset: step;}

.service > div{display:flex; flex-direction: column;z-index: 0;}
.service .boxborder{position:relative;flex-grow:1;padding-top:60px;}
.service img{margin-bottom:0;}
.service h3{width:96%;padding:10px 0 5px;background:#FFF;border-radius:20px 20px 0 0 ;position:absolute;top:-50px;left:2%;z-index: 1;}
.service h3::before{counter-increment: step;content: "STEP" counter(step);line-height: 1.2; display:block;color:#004da1;font-family: Arial, Helvetica, "sans-serif";font-style: italic;}
.service h3::after{content:"";display:block;width:190px; height: 1px;background:#004da1; margin: 10px auto 0;}

h3.line2{display:flex;justify-content: center;align-items: center;gap:clamp(30px,calc(50/1000*100vw),50px);}
h3.line2::before,h3.line2::after{content:"";display:block;width:clamp(30px,calc(60/1000*100vw),60px);height: clamp(23px,calc(46/1000*100vw),46px); background:url("../images/newopen/line2.svg") center/ contain;}
h3.line2::after{transform: scaleX(-1);}
#service .list li:last-child::before{content:none;}
/*まずはご相談ください*/
.square{display:flex;justify-content: center;align-items: center;gap:clamp(30px,calc(50/1000*100vw),50px);}
.square::before,.square::after{content:"";display:block;width:clamp(20px,calc(30/1000*100vw),30px);height: clamp(20px,calc(30/1000*100vw),30px); transform:rotate(45deg);background:#004da1;}
/* レスポンシブ
------------------------------------------------------------*/
/* 1025px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1025px){

}
/* 768px以下から
------------------------------------------------------------*/
@media only screen and (max-width:768px){
    /*サービスコンセプト*/
    #newopen .imgL img{width:80%;max-width:400px;margin:0 auto 20px;}
    #newopen .rco{width:100%;}
    #newopen dl div{flex-wrap: wrap;}
    #newopen dt,#newopen dd{width:100%;}
   /*選ばれる理由-----------------*/
    .reason_lco{width:100%;max-width:100%;margin:30px auto 0; padding:30px;order:2; background:#e5edf5;border-radius:12px;}
    .reason_lco img{display:block;width:80%; max-width: 350px;margin:auto;}
    .reason_rco{display:block;width:100%;margin-left:inherit;}
    
    /*仲介サービスについて-----------------*/
    .mh {width:100%;}
}
/* 450px以下から
------------------------------------------------------------*/
@media only screen and (max-width:450px){

}