@charset "UTF-8";
/* LP */


/* ==================================
　PC  レイアウト
================================== */
.m_sec_offhours{
/*max-width: 100rem;*/
width: 100%;
margin: 0 auto;
}

/* ==================================
　PC  h2 - h6
================================== */
/* 汎用 */
.m_ttl_lv2{
margin-top: 10.5rem;
margin-bottom: 4rem;
padding-bottom: 1rem;
border-bottom: 2px #ee3300 dotted;
}
.m_ttl_lv2 .s_ttl{
font-size: 3.4rem;
text-align: center;
color: #555;
font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
.m_ttl_lv2 .s_ttl .s_span{
font-size: 1.8rem;
color: #ee3300;
font-weight: bold;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}

.m_ttl_lv3{
position: relative;
display: inline-block;
max-width: 100rem;
width: 100%;
margin: 0 auto 1.7rem;
font-size: 1.4rem;
font-weight: bold;
font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
color: #666;
text-align: center;
}
.m_ttl_lv3 .s_span{
font-size: 2.4rem;
font-weight: bold;
}
.m_ttl_lv3::before{
content: '';
position: absolute;
left: 50%;
bottom: 5px;
display: inline-block;
width: 30px;
height: 1px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);/*位置調整*/
background-color: #999;
}

/* 個別 */
.m_ttl_photo{
position: relative;
z-index: 2; 
display: flex;
justify-content: center;
align-items: center;
max-width: 43rem;
width: 100%;
height: 8rem;
margin: 0 auto -4rem;
font-size: 2.8rem;
font-weight: bold;
border: #ee3300 2px solid;
color: #ee3300;
}

/* ステップ */
.m_ttl_step_col{
display: flex;
justify-content: center;
align-items: center;
max-width: 44rem;
width: 100%;
height: 9rem;
margin: 0 auto;
background-color: #ee3300;
}

.m_border{
margin-top: 5.5rem;
}
.m_border span{
width: 100%;
height: 1px;
display: block;
margin: 0 auto 2px;
background-color: #ee3300;
}
.m_border span:nth-child(1){
max-width: 60px;
}
.m_border span:nth-child(2){
max-width: 160px;
}
.m_border span:nth-child(3){
max-width: 260px;
}

.m_ttl_step_col .m_ttl_step{
position: relative;
z-index: 2; 
display: flex;
justify-content: center;
align-items: center;
max-width: 43rem;
width: 100%;
height: 8rem;
font-size: 2.8rem;
font-weight: bold;
border: #fff 2px solid;
color: #fff;
background-color: #ee3300;
}

/* ==================================
　PC  カラム　ボックス
================================== */
/* ヘッダーボックス */
.m_box_terop{
display: flex;
justify-content: center;
align-items: center;
padding: 1.3rem;
background: url("../imgs/bg_01.jpg");
background-size: cover;
border-radius: 10px;
}
.m_box_terop .m_col_terop{
position: relative;
}
.m_box_terop .s_txt{
font-size: 2.4rem;
line-height: 1.45;
text-align: center;
}
.m_box_terop .s_arrow{
position: absolute;
z-index: 2;
bottom: -4.8rem;
left: calc(50% - 23.5px);
}

/* 弊社の強み */
.m_box_offhours{
padding-bottom: 8rem;
background: url("../imgs/bd_02.png") no-repeat top right;
}
.m_box_offhours .e_txt_offhours{
padding-top: 1em;
font-size: 1.6rem;
}

.m_6col_photo{
padding-top: 8rem;
padding-bottom: 2rem;
background: linear-gradient(to bottom, #f7f7f7, #ededed);
border-radius: 10px;
}
.m_6col_photo .e_ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.m_6col_photo .e_ul .e_li{
margin-right: 1.3rem;
margin-bottom: 2.6rem;
}

/* 事例 1 */
.m_box_caseA{
padding: 0.8rem;
box-shadow: 0px 0px 15px 0px #777777;
}
.m_box_caseA .s_col{
padding: 3.2rem;
}
.m_box_caseA.s_case1 .s_col{ background:url("../imgs/bg_06.png") no-repeat center right, linear-gradient(to bottom, #f7f7f7, #ededed); background-size: cover; }
.m_box_caseA.s_case2 .s_col{ background:url("../imgs/bg_08.png") no-repeat center right, linear-gradient(to bottom, #f7f7f7, #ededed); background-size: cover; }

.m_box_caseA .s_col .e_label{
display: flex;
align-items: center;
margin-bottom: 3.2rem;
}
.m_box_caseA .s_col .e_label:last-child{
margin-bottom: 0;
}
.m_box_caseA .s_col .e_label .e_label_dt{
display: flex;
justify-content: center;
align-items: center;
width: 157px;
height: 45px;
margin-right: 3.2rem;
background: url("../imgs/bg_05.png");
font-size: 2.4rem;
font-weight: bold;
color: #fff;
}
.m_box_caseA .s_col .e_label .e_label_dd{
flex: 1;
font-size: 2rem;
font-weight: bold;
}
.m_box_caseA .s_col .e_label .e_label_dd em{
color: #ee3300;
}

/* 事例 2 */
.m_box_caseB{
margin-top: 6rem;
margin-left: 4rem;
padding-bottom: 5.5rem;
}
.m_box_caseB.s_case1{ background: url("../imgs/bg_07.png") no-repeat right bottom; }
.m_box_caseB.s_case2{ background: url("../imgs/bg_09.png") no-repeat right bottom; }

.m_box_caseB .m_ttl_lv4{
display: flex;
align-items: center;
max-width: 375px;
width: 100%;
height: 41px;
padding-left: 25px;
}
.m_box_caseB .m_ttl_lv4 .s_span{
font-size: 2.4rem;
font-weight: bold;
}
.m_box_caseB .m_ttl_lv4.s_suggetion{ background: url("../imgs/txt_01.png") no-repeat; background-size: contain }
.m_box_caseB .m_ttl_lv4.s_meesage  { background: url("../imgs/txt_02.png") no-repeat; background-size: contain }

.m_box_caseB .m_ol_list{
margin-top: 2.5rem;
margin-bottom: 4.5rem;
}
.m_box_caseB .e_ol{
counter-reset: item;
list-style-type: none;
padding-left: 0;
}
.m_box_caseB .e_li{
text-indent: -1.5em;
padding-left: 1.5em;
}
.m_box_caseB .e_li:before {
counter-increment: item;
content: counter(item);
content: counter(item, {list-style-type});
padding-right: 1em;
font-weight: bold;
}
.m_box_caseB .e_li strong{
font-size: 2rem;
}

.m_box_caseB .m_col_voice{
display: flex;
flex-wrap: wrap;
margin-top: 3rem;
}
.m_box_caseB .m_col_voice .m_col:first-child{
margin-left: 2rem;
margin-right: 6rem;
margin-bottom: 1rem;
text-align: center;
}
.m_box_caseB .m_col_voice .m_col .e_voice_txt{
margin-top: 0.8rem;
font-weight: bold;
}
.m_box_caseB .m_col_voice .m_col:last-child{
align-self: center;
}

.m_box_caseB .m_col .s_txt{
font-size: 1.8rem;
}

.m_box_caseA.s_case2 + .m_box_caseB.s_case2{
margin-bottom: -8.5rem;
}

/* faq */
.m_box_faq .m_col_faq{
display: flex;
flex-wrap: nowrap;
margin-bottom: 3.5rem;
}
.m_box_faq .m_col_faq:last-child{
margin-bottom: 0;
}
.m_box_faq .m_col_faq .e_dl{
flex: 1;
margin-top: 1.5rem;
margin-left: 4.5rem;
}
.m_box_faq .m_col_faq .e_dl .e_dt{
margin-bottom: 2rem;
font-size: 2.4rem;
font-weight: bold;
color: #ee3300;
}

/* 弊社の実績 */
.m_performance{
padding-top: 3rem;
background-color: #fff;
}

/* ==================================
　PC  リスト
================================== */
/* ヘッダー 4カラム */
.m_4col {
}
.m_4col .e_ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.m_4col .e_ul .e_li{
display: flex;
justify-content: center;
align-items:center; 
max-width: 22rem;
width: 100%;
height: 22rem;
margin-bottom: 3.4rem;
background-repeat: no-repeat;
background-size: contain;
border: 2px #666 solid;
border-radius: 5px;
}
.m_4col .e_ul .e_li:nth-child(1){ background-image: url("../imgs/list_bi_01.png"); }
.m_4col .e_ul .e_li:nth-child(2){ background-image: url("../imgs/list_bi_02.png"); }
.m_4col .e_ul .e_li:nth-child(3){ background-image: url("../imgs/list_bi_03.png"); }
.m_4col .e_ul .e_li:nth-child(4){ background-image: url("../imgs/list_bi_04.png"); }
.m_4col .e_ul .e_li .e_txt{
margin-top: 12rem;
line-height: 1.6;
font-size: 1.6rem;
font-weight: bold;
}

/* 業務スタートまでのフロー */
.m_box_step{
position: relative;
margin-top: -4.5rem;
padding-top: 7rem;
padding-bottom: 15rem;
background: url("../imgs/bg_03.png") no-repeat right 6px bottom 6px;
box-shadow: 0px 0px 15px 0px #777777;
}
.m_box_step .e_ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-left: 10rem;
}
.m_box_step .e_ul .e_li{
max-width: 45rem;
width: 100%;
}
.m_box_step .e_ul .e_li .s_ttl_lv3{
position: relative;
}
.m_box_step .e_ul .e_li .e_span{
position: absolute;
left: 145px;
bottom: 40px;
font-size: 2.2rem;
font-weight: bold;
}
.m_box_step .e_ul .e_li .s_ul{
margin-left: 14.2rem;
}
.m_box_step .e_ul .e_li .e_li_child{
margin-left: 1em;
text-indent: -1em;
}
.m_box_step .e_ul .e_li .e_li_child::before{
content: "・";
font-weight: bold;
color: #ee3300;
}
.m_box_step .s_arrow{
position: absolute;
right: 200px;
bottom: 90px;
}
@media only screen and (max-width: 1176px){
.m_box_step .s_arrow{
display: none;
}
}
.m_ttl_start{
position: relative;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
max-width: 931px;
width: 100%;
height: 170px;
margin: -6.5rem auto 0;
background-image: url("../imgs/bg_04.png");
background-size: cover;
}
.m_ttl_start .s_txt{
font-size: 4rem;
font-weight: bold;
font-style: italic;
color: #fff;
text-shadow: 0px 0px 18px rgba(255,255,255,1.1);
}

/* ==================================
　PC  汎用
================================== */
.s_br_sp_only{
display: none;
}
.s_img_sp_only{
display: none;
}
.s_bold{
font-weight: bold;
}
.s_col_offhours{
color: #ee3300;
}
.s_under_line{
text-decoration: underline
}

/* ==================================
　 ウェブ運用支援サービス 20210412
================================== */

.area_body{padding: 0;}
.cf{padding: 0 60px;}
.mt30{padding: 0 60px;}

.m_sec_offhours{
}

.h2_box {
    text-align: left;
    border-left: 6px solid #ee3300;
    color: #333333;
    margin: 0  auto 54px;
    font-size: 40px;    
    padding: 0 0 0 29px;
}

.h2_box h2{
    font-weight: bold;
    letter-spacing: -0.3rem; 
    line-height: 4rem;
}

.h2_box h2 span{
    font-size: 20px;
    color: #ee3300;
    display: block;
    letter-spacing: -0rem;    
    padding-bottom: 15px;    
    line-height: 2rem;    
    font-weight: bolder;
}

.e_contact_btn .s_contact_btn .e_link span{text-align: center;}

@media screen and (max-width: 768px) {
    
    .h2_box {font-size: 25px; padding: 0 0 0 15px;}
    
}



/*************************contents01***************************/

.m_sec_offhours {
    padding: 130px 60px 120px; 
    box-sizing: border-box;
    position: relative;
}

.m_sec_offhours img.bg{
    position: absolute;
    top: 50px;
    right: 43px;
}

.m_sec_offhours  ul{
    background: #f3f3f3;
    box-sizing: border-box;
/*    padding: 30px;*/
    flex-wrap: wrap;
    padding: 5px;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;

}

.m_sec_offhours ul li{
    background: #fff;
    position: relative;
    text-align: center;     
    width: 243px;
    min-height: 230px;
    box-sizing: border-box;
    margin: 20px;
    padding: 36px 25px 25px 25px;
}

.m_sec_offhours ul li img.number{
    position: absolute;
    top: -10px;
    left: -9px;
}

.m_sec_offhoursul li p{
    font-weight: bold;
    font-size: 16px;
    padding-top: 25px;
    line-height: 2.3rem;
    color: #333333;
}

.m_sec_offhours p.txt{
    text-align: center;
    font-size: 14px;
    margin: 80px auto 40px;
}

.m_sec_offhours p.txt span{
    font-size: 18px;
    font-weight: bold;
}

.m_sec_offhours p.txt span b{
    color: #ee3300;
    font-weight: bold;
    font-size: 22px;
}

.m_sec_offhours .e_contact_btn{
    width: 470px;
    margin: 0 auto;
}

.m_sec_offhours .e_contact_btn .e_link{
    padding: 20px 0;
}

@media screen and (max-width: 768px) {
    
    .m_sec_offhours img.bg{width: 36%;}
    .m_sec_offhours .e_contact_btn{width: auto;}
    
}

@media screen and (max-width: 500px) {
    
    .m_sec_offhours{    padding: 130px 20px 70px; width: 100%;}
    .m_sec_offhours img.bg {top: 80px;right: 23px;}
}



/*************************contents02***************************/

#contents02{
    background: #fafafa;  
    position: relative;
    padding: 60px 60px 120px;
}

#contents02 .bg02{
    position: absolute;
    top: -130px;
    right: 30px;
}


#contents02 p.main_txt{
    font-size: 16px;
    text-align: left;
    margin-bottom: 30px;
}

#contents02 p.main_txt span{color: #ee3300;}
#contents02 p.main_txt b{font-weight: bold;}

#contents02 .box{
    width: 80%;
    margin: 60px auto;
}

#contents02 .box h3{
    text-align: center;
    background: #ee3300;
    color: #fff;
    padding: 10px 0;    
    font-size: 20px;
}

#contents02 .box div{
    border-left: 16px solid #f3f3f3;
    border-right: 16px solid #f3f3f3;
    border-bottom: 16px solid #f3f3f3;    
}


/*** .box01 ***/

#contents02 .box01 ul {
    display: -webkit-flex;
    display: flex;    
    -webkit-justify-content: center;
    justify-content: center;
    margin: 0 auto;
    padding: 0 0 20px 0 ;
    background: #fff;
    flex-wrap:wrap;
}

#contents02 .box01 ul li{
    width: calc( 100% / 3 - 10px);
    text-align: center;
    margin: 25px 0;
}

#contents02 .box01 ul li p{
    text-align: center;
    margin: 0;
    font-weight: bold;
    padding: 20px 0 0 0;
}

/***.box02***/


#contents02 .box02 div{padding: 80px 0 65px; text-align: center;background: #fff;}
 
#contents02 .box02 dl{
    box-sizing: border-box;    
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;    
    width: 70%;
    margin: 0 auto;
    text-align: left;
}

#contents02 .box02 dl.arrow01{padding: 15px 0;}
#contents02 .box02 dl.arrow01 dt{ text-align: center; } 
/*.m_sec_offhours #contents02 .box02 dl.arrow01 dd{ width: 285px;} */

#contents02 .box02 dl dt{width: 30%;}
#contents02 .box02 dl dd{padding: 0 0 0 30px; width: 100%; box-sizing: border-box;}

#contents02 .box02 dl dd span{font-size: 22px;font-weight: bold;}

#contents02 .box02 dl dd ul li{display: inline-block;}
#contents02 .box02 dl dd ul li:before{
    content: "・";
    font-size: 20px;
    color: #ee3300;
}

#contents02 p.txt{
    text-align: center;
    font-size: 14px;
    margin: 80px auto 40px;
}

#contents02 p.txt span{
    font-size: 18px;
    font-weight: bold;
}

#contents02 p.txt span b{
    color: #ee3300;
    font-weight: bold;
    font-size: 22px;
}

#contents02 .e_contact_btn{
    width: 470px;
    margin: 0 auto;
}
#contents02 .e_contact_btn .e_link{ padding: 20px 0;}

@media screen and (max-width: 768px) {
    #contents02 img.bg02{width: 36%;}
   
    #contents02 .box{width: 100%;}
    #contents02 .box01 ul li{
       width: calc( 100% / 2 - 60px);
        text-align: center;
        margin: 25px;
    }
    
    #contents02 .box02 dl{width: 90%;}
    #contents02 .box img.start{width: 90%; margin: 0 auto;}
    #contents02 .e_contact_btn{width: 100%;}
}

@media screen and (max-width: 500px) {
    
    #contents02 {width: 100%; padding: 60px 20px 120px; box-sizing: border-box;}
    #contents02 .bg02 {top: -40px; right: 20px;}
    
    #contents02 .box01 ul li{width: 100%;}
    #contents02 .box02 dl{display: block; box-sizing: border-box;}
    
    #contents02 .box02 dl dt{width: 100%;}
    #contents02 .box02 dl dt img{width: 60%;display: block; margin: 0 auto;}
    #contents02 .box02 dl.arrow01 dt img{max-width: 100%; width: auto;}
    
    #contents02 .box02 dl dd{padding: 0;}
    #contents02 .box02 dl dd span{text-align: center; display: block; padding: 10px 0; font-size: 20px;}
    /*#contents02 .box02 dl.arrow01{display: none;}*/
    
    #contents02 .box02 dl dd ul li{display: block; text-align: justify;}
    
}

/*************************contents03***************************/

#contents03{
    padding: 60px 60px 40px;
    position: relative;
}

#contents03 .bg{
    position: absolute;
    top: -110px;
    right: 70px;
}

#contents03 .box {
    text-align: left;
    width: 80%;
    margin: 0 auto 70px;
}

#contents03 .box div.inner {
    border: 16px solid #f3f3f3;
    padding: 29px 57px;
    box-sizing: border-box;
    background: #fff;
}

#contents03 .box div.inner div{
    padding: 40px 0;
    border-bottom: 2px solid #dddddd;
}

#contents03 .box div.inner div dl{
    display: -webkit-flex;
    display: flex;    
    -webkit-align-items: center;
    align-items: center;
    margin: 20px auto 0;
}

#contents03 .box div.inner div.in01 dl dt{
    color: #fff; 
    background: #333333;
    padding: 8px 15px;
    line-height: 2rem;
    margin-right: 25px;
}
#contents03 .box div.inner div.in01 dl dd{font-weight: bold;}
#contents03 .box div.inner div.in01 dl dd span{color: #ee3300;font-weight: bold;}

#contents03 .box div.inner div.in01 dl.dl01 { margin: 20px auto 40px;}
#contents03 .box div.inner div.in01 dl.dl01 dt{  background: #ee3300;font-size: 20px;}
#contents03 .box div.inner div.in01 dl.dl01 dd{font-size: 24px;}

/****/
#contents03 .box div.inner div.in02 p{font-size: 24px; font-weight: bold;}
#contents03 .box div.inner div.in02 p img{margin-right: 10px; vertical-align: text-top;}
#contents03 .box div.inner div.in02 dl{font-size: 18px;}

#contents03 .box div.inner div.in02 dl dt{
    color: #fff;
    background: #ee3300;
    padding: 7px 12px;
    border-radius: 20px;
    line-height: 2rem;
    margin-right: 25px;
}
#contents03 .box div.inner div.in02 dl dd span{color: #ee3300;}
#contents03 .box div.inner div.in02 dl dd b{font-size: 22px; font-weight: bold;}

/****/
#contents03 .box div.inner div.in03{border-bottom: 0;}
#contents03 .box div.inner div.in03 p{font-size: 24px; font-weight: bold;}
#contents03 .box div.inner div.in03 p img{margin-right: 10px; vertical-align: text-top;}

#contents03 .box div.inner div.in03 .in03_wrap{
    display: -webkit-flex;
    display: flex;
    align-items: center;
    padding: 0;
    border: none;
}

#contents03 .box div.inner div .fukidashi {
    position: relative;
    display: inline-block;
    margin: 1.5em 55px 1.5em 0;
    padding: 20px 30px;
    min-width: 120px;
    max-width: 100%;
    font-size: 16px;
    background: #f3f3f3;
    border-bottom: none;    
    border-radius: 10px;
    
}

#contents03 .box div.inner div .fukidashi:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #f3f3f3;
    border-bottom: none;    
}

#contents03 .box div.inner div .fukidashi:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -26px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-left: 14px solid #f3f3f3;
  z-index: 1;
}

#contents03 .box div.inner div.in03 .in03_wrap .fukidashi p {
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-size: 16px;
}
#contents03 .box div.inner div.in03 .in03_wrap .fukidashi p span{font-weight: bold;}

@media screen and (max-width: 768px) {
    
    #contents03 .box{width: 100%;}
    #contents03 img.bg{width: 36%;}
    
    
    #contents03 .box div.inner div .fukidashi{margin: 1.5em 25px 1.5em 0; padding: 15px;}
    #contents03 .box div.inner div.in01 dl dt{
        color: #fff;
        background: #333333;
        padding: 8px 15px;
        line-height: 2rem;
        margin-right: 25px;
        min-width: 64px;
        box-sizing: border-box;        
    }
}

@media screen and (max-width: 500px) {
    
    #contents03{width: 100%; padding: 60px 20px 40px; box-sizing: border-box;}
    #contents03 .box{ margin: 0 auto 30px;}
    #contents03 img.bg{top: -40px;  right: 20px;}
    #contents03 .box div.inner{padding:10px;}
    
    #contents03 .box div.inner div dl{display: block; margin: 0 auto 0;}
    #contents03 .box div.inner div.in01 dl.dl01{margin: 10px auto;}
    #contents03 .box div.inner div.in01 dl.dl01 dd{font-size: 20px;}
    
    #contents03 .box div.inner div.in01 dl dt{text-align: center; margin: 10px auto;}
    
    #contents03 .box div.inner div.in02 dl{display: flex; margin: 20px 0; align-items: baseline;}
    #contents03 .box div.inner div.in02 dl dt{margin-right: 15px;}
    
    #contents03 .box div.inner div.in03 .in03_wrap{display: block;}
    
    #contents03 .box div.inner div .fukidashi{width: 100%; margin: 20px auto;box-sizing: border-box;}
    
    #contents03 .box div.inner div .fukidashi:before {display: none;}
    #contents03 .box div.inner div .fukidashi:after {display: none;}
    
    #contents03 .box div.inner div.in03 .in03_wrap img{display: none;}
    
    
}



/*************************contents04***************************/
#contents04{
   /* background: url("../imgs/bg04.png")right top 0px no-repeat;  */
    padding: 60px 60px 120px;
    background: #fafafa;
    position: relative;
}

#contents04 img.bg{
    position: absolute;
    top: -90px;
    right: 50px;
}

#contents04 .box{
    width: 80%;
    margin: 0 auto;
}

#contents04 .box h4{
    color: #fff;
    background: #ee3300;
    padding: 25px 20px;
    border-radius: 10px;
    line-height: 2rem;
    display: -webkit-flex;
    display: flex;    
    align-items: center;
    font-size: 24px;
}

#contents04 .box h4 img{margin-right: 20px;}

#contents04 .box p{
    padding: 20px 10px 40px 80px;
    font-size: 18px;
    text-align: justify;
}

@media screen and (max-width: 768px) {
    #contents04 .box h4{font-size: 20px;line-height: 2.2rem;}
    #contents04 .box p{padding: 20px 20px 40px 20px;}
}

@media screen and (max-width: 500px) {
    
    #contents04{ padding: 60px 20px 30px; box-sizing: border-box; width: 100%;}
    #contents04 img.bg{width: 36%;top: -40px; right: 20px;}

    
    #contents04 .box {width: 100%;}
    #contents04 .box h4{padding: 20px 10px;}
}



/*************************contents04***************************/
#contents05{
    /*background: url("../imgs/bg05.png")right top 0px no-repeat;  */
    padding: 60px 60px 0px;
    position: relative;
}

#contents05 img.bg{
    position: absolute;
    top: -70px;
    right: 60px;
}


#contents05 ul{
    padding: 60px 0;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
}

#contents05 ul li:nth-child(2){
    margin: 0 100px;
}
#contents05 ul li b{
    font-weight: bold;
    display: block;
    padding: 20px 0 8px;
    line-height: 2rem;  
}

#contents05 ul li span{
    color: #ee3300;
    font-weight: bold;
    display: block;    
    line-height: 2rem;   
    font-size: 14px; 
}

#contents05 ul li p{
    font-size: 14px;
    margin: 15px auto;
    text-align: justify;
}

#contents05 ul li ol{
    
}

#contents05 ul li ol li{
    display: inline-block;
    margin: 10px 10px 0 0!important;
    border: 1px solid #dddddd;
    font-size: 14px;
    padding: 2px 15px;
    border-radius: 20px;
}

#contents05 a{
    text-align: center;
    border-radius: 50px;
    border: 2px solid #ee3300;
    width: 470px;
    color: #333333;
    padding: 20px 0;
    display: block;
    font-weight: bold;
    margin: 0 auto;
}


@media screen and (max-width: 768px) {
    #contents05 ul {display: block;}
    #contents05 ul li{width: 100%;}
    #contents05 ul li img{display: block; margin: 0 auto; max-width: 100%;}
    #contents05 ul li ol li{display: inline;}
    #contents05 ul li:nth-child(2){margin: 50px 0;}
    
    #contents05 a{width: 60%;}
}

@media screen and (max-width: 500px) {
    
    #contents05{    padding: 60px 20px 0px; box-sizing: border-box;}
    #contents05 img.bg{width: 36%;top: -40px; right: 20px;}
    
    #contents05 ul li ol{display: flex;width: auto; flex-wrap: wrap;}
    #contents05 ul li ol li{ width: initial;}
    
    #contents05 a {  width: 80%; }    
}


/* ==================================
　SP
================================== */
@media only screen and (max-width: 768px){

          /* SP ここから */


/* ==================================
　SP  テキスト
================================== */
.e_txt_offhours{
padding-left: 1rem;
padding-right: 1rem;
}
/* ==================================
　SP  カラム　ボックス
================================== */
/* ヘッダーボックス */
.m_box_terop{
padding: 0 1vw;
background: url("../imgs/bg_01.jpg");
background-size: cover;
}
.m_box_terop .s_txt{
font-size: 5vw;
line-height: 1.6;
text-align: left;
padding: 3vw;
}
.m_box_terop .s_arrow{
width: 30px;
bottom: -1.7rem;
left: calc(50% - 15px);
}

/* 弊社の強み */
.m_6col_photo .e_ul .e_li{
margin-left: 1.1rem;
margin-bottom: 1.3rem;
}

/* 弊社の実績 */
.m_performance{
padding-top: 0;
}

/* ==================================
　SP  リスト
================================== */
/* ヘッダー 4カラム */
.m_4col .e_ul{
justify-content: center;
}
.m_4col .e_ul .e_li{
max-width: 38.23vw;
height: 38.23vw;
margin-right: 2.7vw;
margin-bottom: 2.7vw;
}
.m_4col .e_ul .e_li .e_txt{
margin-top: 22vw;
font-size: 2.6vw;
}

/* 業務スタートまでのフロー */
.m_box_step{
margin-top: -2.85rem;
padding-top: 5rem;
padding-bottom: 10rem;
/*background: url("../imgs/bg_03.png") no-repeat right 6px bottom 6px;*/
background: none;
box-shadow: 0px 0px 5px 0px #777777;
}
.m_box_step .e_ul{
margin-left: 4vw;
margin-right: 4vw;
}
.m_box_step .e_ul .e_li:first-child{
margin-top: -4vw;
}
.m_box_step .e_ul .e_li .s_ttl_lv3{
margin-top: 4vw;
margin-bottom: 4vw;
}
.m_box_step .e_ul .e_li .s_ttl_lv3 .e_img{
width: 50%;
}
.m_box_step .e_ul .e_li .e_span{
left: 25vw;
bottom: 8vw;
font-size: 4.2vw;
}
.m_box_step .e_ul .e_li .s_ul{
margin-left: 6.5vw;
}
.m_ttl_start{
max-width: 74vw;
height: inherit;
margin: -6.5rem auto 0;
}
.m_ttl_start .s_txt{
padding: 4vw;
font-size: 7vw;
text-align: center;
}

/* 事例 1 */
.m_box_caseA{
padding: 0.8rem;
box-shadow: 0px 0px 5px 0px #777777;
}
.m_box_caseA .s_col{
padding: 4vw;
}
.m_box_caseA .s_col .e_label{
flex-direction: column;
align-items: flex-start;
margin-bottom: 2.5rem;
}
.m_box_caseA .s_col .e_label .e_label_dt{
height: 30px;
margin-bottom: 1.5rem;
font-size: 1.8rem;
}
.m_box_caseA .s_col .e_label .e_label_dd{
flex: initial;
font-size: 1.8rem;
}

/* 弊社の強み */
.m_box_offhours{
padding-bottom: 20vw;
background: url("../imgs/bd_02.png") no-repeat top center;
background-color:rgba(255,255,255,0.2);
background-blend-mode:lighten;
background-size: contain;
}
.m_box_offhours .e_txt_offhours:first-child{
padding-top: 0;
}

/* 事例 2 */
.m_box_caseB{
margin-top: 3rem;
margin-left: 0;
padding-bottom: 2.75rem;
}
.m_box_caseB.s_case1,
.m_box_caseB.s_case2{
background: none;
}
.m_box_caseB .m_ttl_lv4{
max-width: 80vw;
height: inherit;
padding-left: 2rem;
}
.m_box_caseB .m_ttl_lv4 .s_span{
font-size: 2rem;
}
.m_box_caseB .m_ol_list{
margin: 2rem 1rem 4rem 1rem;
}
.m_box_caseB .e_li strong{
font-size: 1.8rem;
}
.m_box_caseB .m_col_voice .m_col:first-child{
margin-left: 3rem;
width: 160px;
}
.m_box_caseB .m_col .s_txt{
padding: 0 1rem;
font-size: 1.6rem;
}
.m_box_caseA.s_case2 + .m_box_caseB.s_case2{
margin-bottom: -5rem;
}

/* faq */
.m_box_faq .m_col_faq{
margin-bottom: 3rem;
}
.m_box_faq .m_col_faq .e_img{
width: 12vw;
}
.m_box_faq .m_col_faq .e_dl{
margin-top: 0;
margin-left: 1rem;
}
.m_box_faq .m_col_faq .e_dl .e_dt{
margin-bottom: 1rem;
font-size: 2rem;
}

/* ==================================
　SP  h2 - h6
================================== */
.m_ttl_lv2 {
margin-top: 12vw;
margin-bottom: 6vw;
padding-bottom: 0.5rem;
border-bottom: 2px #ee3300 dotted;
}
.m_ttl_lv2 .s_ttl{
font-size: 6vw;
line-height: 1.5;
}
.m_ttl_lv2 .s_ttl .s_span{
font-size: 3.5vw;
}

/* 個別 */
.m_ttl_photo{
max-width: 74vw;
height: 14vw;
margin: 0 auto -3rem;
font-size: 5vw;
}

/* ステップ */
.m_ttl_step_col{
max-width: 74vw;
height: 16vw;
}
.m_ttl_step_col .m_ttl_step{
max-width: 72vw;
height: 14vw;
font-size: 5vw;
}

    
/* ==================================
　SP  汎用
================================== */
.s_br_sp_only{
display: block;
}
.s_br_pc_only{
display: none;
}
.s_img_sp_only{
display: inline;
}
.s_img_pc_only{
display: none;
}

}/* SP_end */

/* ==================================
　その他
================================== */
.mt30{
margin-top: 30px;
}
.l_footer .m_nav .e_page_top a img {
position: relative;
z-index: 3;
}

/* 最下部ボタン */
.l_offhours{
display: flex;
justify-content: center;
margin: 6rem 0 3rem;
}
@media only screen and (max-width: 768px){
.l_offhours{
margin: 0;
}
}
.l_offhours .m_postarea{
margin: 0;
float: none;
width: inherit;
}
.l_offhours .m_postarea .e_li{
margin: 0;
padding: 0;
}
.l_offhours .m_postarea .e_tags {
float: none;
margin: 0;
padding: 0;
}
.l_offhours .m_postarea .e_tags .tag {
margin: 0;
}
.l_offhours .m_postarea .e_tags .tag a {
padding: 0 2rem;
font-size: 1.4rem;
line-height: 34px;
}
.area_body .unit_breadcrumb .l_offhours li{
background-image: none;
}