/*
Theme Name: meviy04_2
Description: Meviy Blog Template
Author: MASAtoshi OKA
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: meviy04_2
Version: 4.0
*/
#lp_mep2025 {
    position: relative;
    font-size: 18px;
    color: black;
    background: #fff;
    margin-top: 109px;
    box-sizing: border-box;
}
@media screen and (max-width: 1024px) {
	#lp_mep2025{margin-top: 16vw;}
}

#lp_mep2025 .sec_wrap{
	max-width: 1200px;
	box-sizing: border-box;
	padding: 40px 15px !important;
}
#lp_mep2025 #mep2025_intro .sec_wrap{
    padding: 20px 15px !important;
}
#mep2025_service .sec_wrap{
    padding-bottom: 0 !important;
}

.mobile_only{display: none;}
@media screen and (max-width: 600px) {
	.mobile_only{display: inline;}
	.pc_only{display: none;}
}

h2.section_title{
    display: block;
    float: none;
    margin: 20px auto;
    width: 100%;
    border: none;
    padding: 10px 20px;
    color: #0a1464;
    font-weight: 600;
    font-size: 33px;
    text-align: center;
}
#mep2025_case h2.section_title,
#meviy_expand h2.section_title{
    font-size: 22px;
}
#mep2025_case h2.section_title span,
#meviy_expand h2.section_title span{
    display: block;
    border: 5px solid #0a1464;
    padding: 10px;
    margin-top: 20px;
    font-size: 33px;
    width: 100%;
    max-width: 400px;
    margin: 20px auto;
}
.balloon_title{
    display: block;
    width: 100%;
    max-width: 900px;
    float: none;
    margin: 0 auto;
}
#mep2025_service h2.section_title,
#mep2025_service_2 h2.section_title{
  position: relative;
  display: inline-block;
  background: #FFF;
  border: solid 5px #0a1464;
  box-sizing: border-box;
  -moz-border-radius:30px;
  border-radius:30px;
  padding: 20px;
  font-size: 25px;
}
#mep2025_service h2.section_title:before,
#mep2025_service_2 h2.section_title:before {
  content: "";
  position: absolute;
  bottom: -29px;
  left: 50%;
  margin-left: -17px;
  border: 15px solid transparent;
  border-top: 15px solid #fff;
  z-index: 2;
}
#mep2025_service h2.section_title:after,
#mep2025_service_2 h2.section_title:after {
  content: "";
  position: absolute;
  bottom: -40px;
  left: 50%;
  margin-left: -20px;
  border: 18px solid transparent;
  border-top: 18px solid #0a1464;
  z-index: 1;
}
.service_h2_face_wonder{
    display: block;
    float: none;
    width: 150px;
    margin: 20px auto;

}
.service_h2_face_wonder img{
    width: 100%;
    height: auto;
}
@media screen and (max-width: 900px) {
    h2.section_title{font-size: 26px;}
    #mep2025_service h2.section_title,
    #mep2025_service_2 h2.section_title{
        font-size: 22px;
    }
}
@media screen and (max-width: 750px) {
    h2.section_title{font-size: 22px;}
    #mep2025_service h2.section_title,
    #mep2025_service_2 h2.section_title{
        font-size: 20px;
        text-align: left;
    }
    #mep2025_service h2.section_title br,
    #mep2025_service_2 h2.section_title br{display: none;}
}


/* CV BTN */

.try_meviy a{
    background: rgb(255, 177, 0);
  background: linear-gradient(270deg, rgb(255, 177, 0) 0%, rgb(251, 232, 90) 100%);
  box-shadow: rgba(50, 50, 93, 0.35) 0px 30px 50px -20px, rgba(0, 0, 0, 0.5) 20px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  width: 100%;
  -moz-border-radius:10px;
  border-radius:10px;
  color: #000;
  font-size: 26px;
  font-weight: 800;
  text-align: center;
  max-width: 600px;
  margin: 15px auto;
  float: none;
  display: block;
  padding: 15px;
}
@media screen and (max-width: 600px) {
    .try_meviy a{font-size: 22px;}
}
@media screen and (max-width: 400px) {
    .try_meviy a{font-size: 20px;}
}

/* INTRO ------------------------------------- */

#mep2025_intro h2{
    color: #0a1464;
    text-align: center;
    font-size: 23px;
    font-weight: 800;
    margin: 0;
}
#mep2025_intro h2 strong{
    font-size: 35px;
}
@media screen and (max-width: 650px) {
    #mep2025_intro h2{font-size: 16px;}
    #mep2025_intro h2 strong{font-size: 25px;}
}
@media screen and (max-width: 450px) {
    #mep2025_intro h2{font-size: 16px;}
    #mep2025_intro h2 strong{font-size: 20px;}
}

/* TIME --------------------------------------- */
#mep2025_time{
    background: #e6e6e6;
}
.time_intro img{
    width: 100%;
    height: auto;
}
.time_img img{
    width: 100%;
    height: auto;
}
.time_img_note{
    display: flex;
    justify-content: flex-end;
    padding: 15px;
}
.time_img_note ul{

}
.time_img_note ul li{
    list-style: none;
    margin-bottom: 7px;
    font-size: 15px;
    color: #0a1464;
}
@media screen and (max-width: 450px) {
    .time_img_note{
    text-align: left;
    font-size: 10px;
    }
}

/* SERVICE ------------------------------------- */
h3.h3_question{
    background: #5bbdce;
    color: #0a1464;
    font-size: 36px;
    font-weight: 600;
    text-align: center;
    padding: 20px;
}


.service_h2{
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
}
.service_h2 h2{
    position: relative;
    display: inline-block;
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    color: #0a1464;
    border: #0a1464 5px solid;
    -moz-border-radius:10px;
    border-radius:10px;
    background: #fff;
    padding: 15px;

}
.service_h2 h2:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-right: 12px solid #FFF;
  z-index: 2;
}

.service_h2 h2:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -36px;
  margin-top: -18px;
  border: 18px solid transparent;
  border-right: 18px solid #0a1464;
  z-index: 1;
}
.service_h2 h2 span{
   background: linear-gradient(transparent 50%, #ffc600 50%);
}

.service_h2_face{
    float: left;
    width: 100px;
    margin-right: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.service_h2_h2{
    width: calc(100% - 160px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.service_h2_face img{
    width: 100px;
    height: 100px
}
.comment_center{
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}
.comment_center p{
    color: #0a1464;
    font-size: 20px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.comment_center img{
    display: block;
    width: 100px;
    height: 100px;
    float: none;
    margin: 15px auto;
}

@media screen and (max-width: 700px) {
    h3.h3_question{font-size: 26px;}
    .service_h2 h2{font-size: 20px; text-align: left; padding: 15px;}
    .comment_center p{font-size: 16px;}
    .comment_center img{width: 70px;height: 70px;}
}
@media screen and (max-width: 500px) {
    h3.h3_question{font-size: 22px;}
    .service_h2 h2{font-size: 18px; text-align: left; padding: 15px;}
    .service_h2_face{
    width: 70px;
    height: 70px;
    margin-right: 30px;
    }
    .service_h2_h2{
        width: calc(100% - 130px);
    }
    .comment_center p{font-size: 14px;}
    .comment_center img{width: 50px;height: 50px;}
}

.service_all{
    display: flex;
    width: 100%;
    margin-bottom: 10px;
    -moz-border-radius:10px;
    border-radius:10px;
    overflow: hidden;
}
.service_meviy{
    display: block;
    width: 60%;
    padding: 20px;
    box-sizing: border-box;
    background: #0a1464;
    color: #fff;
}
.service_mp{
    display: block;
    width: 40%;
    padding: 20px;
    box-sizing: border-box;
    background: #5bbdce;
    color: #0a1464;

}
.service_all h4{
    margin: 0;
    text-align: center;
    font-style: 20px;
    font-weight: 600;
}
.service_all p{
    text-align: center;
    color: #0a1464;
    font-size: 12px;
    font-weight: 600;
    height: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 120%;
}
.service_all ul{
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}
.service_all ul li{
    width: 100px;
    margin: 10px;
    box-sizing: border-box;
    background: #fff;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.service_all .service_mp ul li{
    margin-bottom: 35px;
}
.meviy_expand{
    width: calc(100% - 30px);
    max-width: 460px;
    float: none;
    margin: 10px auto;
    /* background-color: #29abe2; */
    background: #fff;
    box-sizing: border-box;
    -moz-border-radius:10px;
    border-radius:10px;
}
.meviy_expand h4{
    color: #0a1464;
}
.service_all ul li.expand_title{
    background-color: #5bbdce;
    color: #0a1464;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100px;
    font-size: 14px;
    font-weight: 600;
    -moz-border-radius:100px;
    border-radius:100px;
}
a.service_text_link{
    display: block;
    color: #5bbdce;
    text-decoration: underline;
    text-align: center;
    font-size: 13px;
    padding-top: 15px;
}
.service_mp a.service_text_link{color: #fff;}

@media screen and (max-width: 1100px) {
    .service_all h4{font-size: 16px;}
    .service_all ul li{width: 90px;}
    .meviy_expand{max-width: 420px;}
}
@media screen and (max-width: 1000px) {
    .service_all h4{font-size: 14px;}
    .service_all ul li{width: 80px;}
    .meviy_expand{max-width: 380px;}
    .service_meviy{
    width: 55%;
    padding: 20px 10px;
    }
    .service_mp{
        width: 45%;
        padding: 20px 10px;
    }
}
@media screen and (max-width: 850px) {
    .service_all{
        flex-direction: column;
    }
    .service_meviy{
    width: 100%;
    padding: 20px;
    }
    .service_mp{
        width: 100%;
        padding: 20px;
    }
    .service_all .service_mp ul li{
        margin-bottom: 15px;
    }

}


.service_diagram_2{
    display: flex;
    /* justify-content: space-between;
    flex-direction: row-reverse; */
    justify-content: center;
}
.service_comment_1,
.service_comment_2{
    display: block;
    width: 150px;
    display: flex;
    flex-direction: column;
}
.service_comment_1{
    justify-content: flex-start;
}
.service_comment_2{
    justify-content: flex-end;
}
.service_diagram_img{
    /* width: calc(100% - 330px); */
    width: 100%;
    max-width: 700px;
    background: #fff;
    padding: 15px 30px;
    -moz-border-radius:10px;
    border-radius:10px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.service_diagram_img img{width: 100%; height: auto;}
@media screen and (max-width: 750px) {
    .service_diagram_img{padding: 15px;}
}

#mep2025_service_2{
    background: #f7f7f7;
}

#mep2025_service_2 h2{
    text-align: center;
    font-size: 35px;
    font-weight: 600;
    color: #0a1464;
}
.service_diagram_img_2{width: 100%; padding-bottom: 30px;}
.service_diagram_img_2 img{width: 100%; height: auto;}

/* お客様事例--------------------------- */
#mep2025_case{background: #e6e6e6;}

ul.estimate_case{
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    justify-content: center;
}
ul.estimate_case li{
    background: #fff;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    width: 700px;
    box-sizing: border-box;
    display:flex;
    margin: 30px;
}
.estimate_cad{
    width: 270px;
}
.estimate_case_text{
    width: calc(100% - 270px);
    padding: 20px;
    box-sizing: border-box;
}
.estimate_case_text h3{
    font-size: 22px;
    font-weight: 600;
    color: #0a1464;
}
.estimate_case_text .estimate_amount{
    color: #0a1464;
    font-size: 14px;
    font-weight: 600;
}
.estimate_case_text img{
    width: 100%;
    height: auto;
    margin: 15px 0;
}
.estimate_voice{
    color: #0a1464;
}
.estimate_voice h4{
    color: #0a1464;
    font-weight: 600;
}
.estimate_case_text p{
    font-size: 14px;

}

/* 拡大中---------------------------------------- */
#meviy_expand{}
#meviy_expand h2{
}
.expand_service{
    display: block;
    background: #FFF;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    width: 100%;
    margin: 40px 0;
    padding: 15px;
    -moz-border-radius:10px;
    border-radius:10px;
}
#meviy_expand h3{
    color: #0a1464;
    font-size: 20px;
    font-weight: 600;
    text-align: center;

}
#meviy_expand ul{
    display: flex;
    justify-content: flex-start;
}
#meviy_expand ul li{
    width: 150px;
    margin: 15px;
    text-align: center;
}
#meviy_expand ul li img{
    width: 150px;
    height: 150px;
}
#meviy_expand ul li.expand_meviy img{
    border: 2px solid #0a1464;
}
#meviy_expand ul li.expand_mp img{
    border: 2px solid #348ea6;
}
#meviy_expand ul li h4{
    font-weight: 600;
    font-size: 16px;
    color: #0a1464;
}
#meviy_expand ul li p{
    font-weight: 400;
    font-size: 12px;
    color: #0a1464;
}
#meviy_expand ul li.expand_mp h4,
#meviy_expand ul li.expand_mp p{
    color: #348ea6;
}

/* 使い方------------------------------------ */

#bar_meviy_step_1,
#bar_meviy_step_2{
    background: #ededed;
}

ul.bar_meviy_step{
    display: flex;
    flex-direction: column;
}
ul.bar_meviy_step li{
    background: #fff;
    /* padding: 25px; */
    margin: 25px 0;
    display: flex;
    justify-content: space-between;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    -moz-border-radius:10px;
    border-radius:10px;
    overflow: hidden;
}
ul.bar_meviy_step li:nth-child(odd){
    flex-direction: row-reverse;
}
.step_img{
    width: 600px;
    /* box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */
}
.step_img img{width: 100%; height: auto;}
.step_text{
    width: calc(100% - 620px);
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

ul.bar_meviy_step li:nth-child(odd) .step_text{
    padding-left: 0;
}
ul.bar_meviy_step li:nth-child(even) .step_text{
    padding-right: 0;
}
.step_number{
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 24px;
    color: #0a1464;
}
.step_text h3{
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #0a1464;
    border-left: #0a1464 7px solid;
    padding-left: 10px;
}
.step_text p{
    font-size: 18px;
    margin-bottom: 7px;
}


@media screen and (max-width: 1100px) {
    .step_img{width: 500px;}
    .step_text{ width: calc(100% - 520px);}
}
@media screen and (max-width: 1000px) {
    .step_text h3{font-size: 22px; line-height: 120%;}
    .step_text p{font-size: 16px;}
    .step_text{padding: 15px;}
}
@media screen and (max-width: 900px) {
    .marketplace_intro p{text-align: left;}
    .step_img{width: 400px;}
    .step_text{
        width: calc(100% - 420px);
        padding: 15px;
    }
}
@media screen and (max-width: 800px) {
    ul.bar_meviy_step li{
        flex-direction: column;
        width: 100%;
        max-width: 400px;
        float: none;
        margin: 20px auto;
    }
    ul.bar_meviy_step li:nth-child(odd){
        flex-direction: column;
    }
    .step_text{width: 100%;}
    .step_img{width: 100%;}
    ul.bar_meviy_step li:nth-child(odd) .step_text{
        padding-left:15px;
    }
    ul.bar_meviy_step li:nth-child(even) .step_text{
        padding-right:15px;
    }
}