@charset "UTF-8";

/* com_lead
---------------------------------------------------------*/
.m_img_area{
    border-bottom:rgba(66,57,50,0.35) 1px solid;
}



/* com_lead
---------------------------------------------------------*/
.com_lead{
    position: relative;
    margin-bottom: 65px;
}
.com_lead::before{
    position: absolute;
    display: block;
    content: "";
    background: url("../images/examination/deco1.svg")no-repeat top center;
    background-size: 100% auto;
    width: 329px;
    height: 100%;
    top:.7em;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: -1;    
}
.com_lead_tit{
    font-size: min(190%,2.8vw);
    line-height: 2.7em;
}
.com_lead_tit span{
    color: #423932;
}
.com_lead_tit .span2{
    font-size:235%;
}
.com_lead_txt{
    margin-top: 1em;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
.com_lead{
    margin-bottom: 8%;
}
.com_lead_tit{
    line-height: 2.5em;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
.com_lead{
    margin-bottom: 8%;
}
.com_lead::before{
    width: 42%;
    top:-0.7em;
}
.com_lead_tit{
    font-size:100%;
    line-height: 1em;
}
.com_lead_tit span{
    display:block;
}
.com_lead_tit .span2{
    font-size:225%;
    line-height: 1.2em;
}
.com_lead_txt{
    margin-top: 1.5em;
}
}



/* box1
---------------------------------------------------------*/
.box1{
    width: 102%;
    margin-left: -1%;
    background: linear-gradient(to right,  rgba(99,183,163,1) 0%,rgba(132,212,193,1) 100%);
    border-radius: 30px;
    padding: 70px 4.5%;
    box-sizing: border-box;
    margin-bottom: 95px;
}
.box1 .flexbox{
    align-items: center;	
}
.box1 .flexbox > div:nth-child(odd){
    width: 26%;
}
.box1 .flexbox > div:nth-child(even){
    width: 8.5%;
    max-width: 110px;
}
.box1 .flex2 .img,
.box1 .flex3 .img{
    width: 86%;
    margin: 0 auto 1rem;
}
.box1 .txt{
    text-align: center;
    font-size: 235%;
    font-size: min(235%,2.7vw);
    line-height: 1.2em;
    font-weight: bold;
    color: #FFE3EE;
}
.box1 .flex2 .txt{
    color: #E2FFB3;}
.box1 .flex3 .txt{
    color: #fff;}

.box1 .txt span{
    font-size:78%;
}
.box1 .flex1 li{
    display: flex;
    justify-content: space-between;
    align-items: center;	
    margin-bottom: 15px;
}
.box1 .flex1 li:last-child{
    margin-bottom: 0;
}
.box1 .flex1 li:nth-child(odd){
    flex-flow: row-reverse;
}
.box1 .flex1 li .img{
    width: 38%;
}
.box1 .flex1 li .txt{
    width: 57%;
    text-align: left;
}
.box1 .flex1 li:last-child .txt{
    text-align: right;
}

/* PC調整
------------------------------------------*/
@media only screen and (min-width: 960px) and (max-width: 1520px) {
.box1{
    padding: 5vw 3% 5vw 3.5%;
}
.box1 .txt{
    letter-spacing: normal;
}
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
.box1{
    padding: 4vw 1.5% 4.5vw 3%;
    margin-bottom: 10%;
}
.box1 .flexbox > div:nth-child(odd){
    width: 29%;
}
.box1 .flexbox > div:nth-child(even){
    width: 6.5%;
}
.box1 .flex2 .img,
.box1 .flex3 .img{
    margin: 0 auto 1.5vw;
}
.box1 .txt{
    letter-spacing: normal;
}
.box1 .flex1 li{
    margin-bottom: 2vw;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
/*.box1{
    width: 100%;
    margin-left: 0;
    background: linear-gradient(to top,  rgba(99,183,163,1) 0%,rgba(132,212,193,1) 100%);
    padding: 4% 5% 5%;
    margin-bottom: 15%;
}
.box1 .flexbox{
    display: block;
}
.box1 .flexbox > div:nth-child(odd){
    width: 100%;
}
.box1 .flexbox > div:nth-child(even){
    width: 10vw;
    text-align: center;
    margin: 3% auto;
}
.box1 .txt{
    font-size:140%;
}
.box1 .flex1 ul{
    width: 75%;
    margin: 0 auto;
}
.box1 .flex1 li{
    margin-bottom: -0.7em;
}
.box1 .flex1 li .img{
    width:45%;
}
.box1 .flex1 li .img img{
    width: 100%;
}
.box1 .flex1 li .txt{
    width: 51%;
}
.box1 .flex1 li:nth-child(1) .txt{
    text-align: right;
}
.box1 .kigou2 img{
    transform: rotate(90deg);
}
.box1 .flex2,
.box1 .flex3{
	display: flex;
    justify-content: space-between;
    align-items: center;
}
.box1 .flex2 .img,
.box1 .flex3 .img{
    width: 45%;
    margin: 0;
}
.box1 .flex2 .txt,
.box1 .flex3 .txt{
    width: 51.5%;
    text-align: left;
}*/
.box1_sp{
    margin-bottom: 15%;
}
}




/* flow
---------------------------------------------------------*/
#flow{
    margin-bottom: 50px;
}

/*exa_index1*/
#flow .exa_index1{
    text-align: center;
    font-size:190%;
    font-size: min(190%,2.8vw);
    line-height: 1.4em;
    margin-bottom: 90px;
}
#flow .exa_index1 h2{
    margin-top: .8em;
}

/*stepbox*/
#flow .stepbox{
    position: relative;
    display: flex;
    justify-content: space-between;
    margin-bottom: 35px;
}
#flow .stepbox.nomgn{
    margin-bottom: 0;
}
#flow .stepbox::before{
    position: absolute;
    display: block;
    content: "";
    background: linear-gradient(to right,  rgba(227,209,215,1) 0%,rgba(217,242,179,1) 100%);
    background-size: 100% auto;
    width: 18px;
    height: 18px;
    bottom:0;
    left: 0;
    border-radius: 50%;
    opacity: .6;    
}
#flow .stepbox.nomgn::before{
    display: none;
}
#flow .stepbox .number{
    position: absolute;
    top:0;
    left: 0;
    font-size:190%;
    font-size: min(190%,3.4vw);
    line-height: 1em;
}
#flow .step_inbox{
    position: relative;
    padding-left: 4.3rem;
    margin-top: 3.5em;
    box-sizing: border-box;
    padding-bottom: 50px;
    margin-bottom: 40px;
}
#flow .nomgn .step_inbox{
    padding-bottom: 0;
    margin-bottom: 0;
}
#flow .step_inbox::before{
    position: absolute;
    display: block;
    content: "";
    background: linear-gradient(to bottom,  rgba(227,209,215,1) 0%,rgba(217,242,179,1) 100%);
    background-size: 100% auto;
    width: 18px;
    height: 100%;
    top:0;
    left: 0;
    border-radius: 10px;
    opacity: .6;    
}
#flow .step_flexbox > .flex_l{
    width: 52%;
} 
#flow .step_flexbox > .flex_l > .attention{
    margin-top: .5em;
} 
#flow .step_flexbox > .flex_l > .attention li{
    padding-left: 1.1em;
    text-indent: -1.1em;
    margin-bottom: .5em;
}
#flow .step_flexbox > .flex_l > .attention li:last-child{
    margin-bottom: 0;
}
#flow .step_flexbox > .flex_r{
    width: 41.5%;
    max-width: 480px;
} 
#flow .step_inbox h3{
    font-size:240%;
    font-size: min(240%,3.5vw);
    line-height: 1.4em;
    margin-bottom: .3em;
} 
#flow .attention{
    margin-top:.5em;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
#flow{
    margin-bottom: 8%;
}

/*exa_index1*/
#flow .exa_index1{
    margin-bottom: 4%;
}
#flow .exa_index1 div{
    width: 43vw;
    margin: 0 auto;
}

/*stepbox*/
#flow .stepbox{
    margin-bottom: 3%;
}
#flow .stepbox::before{
    width: 15px;
    height: 15px;
}
#flow .step_inbox{
    padding-left: 2.8rem;
    margin-top: 3em;
    padding-bottom: 0;
    margin-bottom: 3%;
}
#flow .step_inbox::before{
    width: 15px;
}
#flow .step_flexbox > .flex_l{
    width: 54.5%;
} 
#flow .step_inbox h3{
    margin-bottom: .2em;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
#flow{
    margin-bottom: 8%;
}
    
/*exa_index1*/
#flow .exa_index1{
    font-size:110%;
    margin-bottom: 14%;
}
#flow .exa_index1 div{
    width: 65vw;
    margin: 0 auto;
}
#flow .exa_index1 h2{
    margin-top: .8em;
}

/*stepbox*/
#flow .stepbox{
    margin-bottom: 15%;
}
#flow .stepbox::before{
    width: 15px;
    height: 15px;
    left: 0.8em;
}
#flow .stepbox .number{
    font-size:150%;
    top:-1.5em;
    left: 0.2em;
}
#flow .step_inbox{
    padding-left: 14vw;
    margin-top: 0;
    padding-bottom: 0;
    margin-bottom: 28px;
}
#flow .step_inbox::before{
    width: 15px;
    height: 100%;
    bottom: 0;
    top: auto;
    left: 0.8em;
}
#flow .step_flexbox{
    display: block;
}
#flow .step_flexbox > .flex_l{
    width: 100%;
} 
#flow .step_flexbox > .flex_r{
    width:85%;
    margin: 4% auto;
} 
#flow .step_inbox h3{
    font-size: 150%;
    margin-bottom: .3em;
} 
}






/* step1
---------------------------------------------------------*/
#flow .step1 .iconlist{
    display: flex;
    justify-content: space-between;
	flex-wrap: wrap;
    margin-top: 1.5rem;
    padding-left: .6em;
    box-sizing: border-box;
}
#flow .step1 .iconlist li{
    position: relative;
    padding-left: 1.5em;
    box-sizing: border-box;
    width: 48%;
    line-height: 1.4em;
    margin-top: .7em;
}
#flow .step1 .iconlist li.full{
    width: 100%;
}
#flow .step1 .iconlist li:nth-child(-n+2){
    margin-top: 0;
}
#flow .step1 .iconlist li::before{
    position: absolute;
    display: block;
    content: "";
    background: #63B7A3;
    opacity: .7;
    background-size: 100% auto;
    width: .7em;
    height: .7em;
    border-radius: 50%;
    top:.35em;
    left: 0;
}

#flow .step1 .iconlist li:last-child{
    width: 100%;
    text-align: right;
    font-size:90%;
    padding-right: .5em;
}
#flow .step1 .iconlist li:last-child::before{
    display: none;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
#flow .step1 .iconlist{
    margin-top: 1rem;
    padding-left: 0;
}
#flow .step1 .iconlist li{
    padding-left: 1.2em;
    margin-top: .5em;
}
#flow .step1 .iconlist li::before{
    top:.3em;
}
#flow .step1 .iconlist li:last-child{
    padding-right: 0;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
#flow .step1 .iconlist{
    margin-top: 1.2rem;
    padding-left: 0;
    margin-bottom: 1.5em;
}
#flow .step1 .iconlist li{
    padding-left: 1em;
    margin-top: .6em;
}
#flow .step1 .iconlist li:last-child{
    font-size:90%;
    padding-right: 1em;
    margin-top: 0;
}
}





/* step2
---------------------------------------------------------*/
#flow .step_colorbox{
    background:rgba(99,183,163,0.07);
    border-radius: 30px;
    padding: 60px 5%;
    box-sizing: border-box;
    margin-top: 40px;
}
#flow .step_colorbox_list > li{
    border-bottom:rgba(66,57,50,0.50) solid 1px;
    padding-bottom: 60px;
    margin-bottom: 60px;
}
#flow .step_colorbox_list > li:last-child{
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

/*flexbox*/
#flow .step_colorbox_list .fltbox .flt_l{
    width: 40%;
    max-width: 420px;
}
#flow .step_colorbox_list .fltbox .flt_r{
    width: 56%;
}
#flow .step_colorbox_list .fltbox .flt_r .tit{
    color: #63B7A3;
    margin-bottom: 1rem;
    font-weight: bold;
    font-size:110%;
    letter-spacing: 0.08em;
}
#flow .step_colorbox_list .fltbox .flt_r .tit p{
    line-height: 1.5em;
    margin-bottom: .5em;
}
#flow .step_colorbox_list .fltbox .flt_r .tit h4{
    font-size: min(170%,3vw);
    line-height: 1.4em;
}
#flow .step_colorbox_list .fltbox .flt_r .tit h4 span{
    font-size: 78%;
    margin:0 .3em;
}

/*col2*/
#flow .step_colorbox_list .col2{
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}
#flow .step_colorbox_list .col2 li{
    width: 47.5%;
}
#flow .step_colorbox_list .col2 li .flt_l{
    width: 47%;
    max-width: 230px;
    margin-right: 6.5%;
    margin-bottom: .5em;
}
#flow .step_colorbox_list .col2 li .flt_r{
    /*width: 47.5%;*/
    float: none;
    width: 100%;
}
#flow .step_colorbox_list .col2 li .flt_r dt{
    width: 47.5%;
    margin-left: auto;
    margin-right: 0;
    background:rgba(66,57,50,0.45);
    font-weight: bold;
    border-radius: 50px;
    color: #fff;
    line-height: 1.4em;
    letter-spacing: 0.1em;
    padding: .38em 1.2em;
    box-sizing: border-box;
    margin-bottom: .7em;
}
#flow .step_colorbox_list li:nth-child(3) .fltbox .flt_l{
	position: relative;
}
#flow .step_colorbox_list li:nth-child(3) .fltbox .flt_l .abs{
	position: absolute;
	max-width: 160px;
	width: 38.1%;
	left: -4.762%;
	bottom: 0;
	transform: translateY(18%);
}
/*com_btn1*/
#flow .step2 .step_inbox > .com_btn1{
    text-align: center;
    margin-top: 45px;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
#flow .step_colorbox{
    padding: 5% 4%;
    margin-top: 3%;
}
#flow .step_colorbox_list > li{
    padding-bottom:6%;
    margin-bottom: 6%;
}

/*flexbox*/
#flow .step_colorbox_list .fltbox .flt_r .tit p{
    margin-bottom: .3em;
}
#flow .step_colorbox_list .fltbox .flt_l{
    margin-right: 4%;
    margin-bottom: 1em;
}
#flow .step_colorbox_list .fltbox .flt_r{
    width: 100%;
    float: none;
}
    
/*col2*/
#flow .step_colorbox_list .col2{
    margin-top: 4%;
}
#flow .step_colorbox_list .col2 li{
    width: 48%;
}
#flow .step_colorbox_list .col2 li .flt_l{
    margin-right: 5%;
}
#flow .step_colorbox_list .col2 li .flt_r dt{
    width: 49%;
    font-size:95%;
    letter-spacing: normal;
    padding: .38em 1em;
}

/*com_btn1*/
#flow .step2 .step_inbox > .com_btn1{
    margin-top: 4%;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
#flow .step_colorbox{
    padding: 6% 5%;
    border-radius: 10px;
    margin-top: 4%;
    width: 102%;
    margin-left: -2%;
}
#flow .step_colorbox_list > li{
    padding-bottom: 8%;
    margin-bottom: 8%;
}

/*flexbox*/
#flow .step_colorbox_list .fltbox .flt_l{
    width: 75%;
    float: none;
    margin: 0 auto 4.5%;
}
#flow .step_colorbox_list .fltbox .flt_r{
    width: 100%;
    float: none;
}
#flow .step_colorbox_list .fltbox .flt_r .tit{
    margin-bottom: .6rem;
    font-size: 95%;
    text-align: center;
}
#flow .step_colorbox_list .fltbox .flt_r .tit p{
    margin-bottom: .2em;
    letter-spacing: normal;
    line-height: 1.4em;
}
#flow .step_colorbox_list .fltbox .flt_r .tit h4{
    font-size: 135%;
    line-height: 1.4em;
}
#flow .step_colorbox_list .fltbox .flt_r .tit h4 span{
    font-size: 78%;
    margin:0;
}

/*col2*/
#flow .step_colorbox_list .col2{
    display: block;
    margin-top: 6%;
}
#flow .step_colorbox_list .col2 li{
    width: 100%;
    margin-bottom: 1em;
}
#flow .step_colorbox_list .col2 li:last-child{
    margin-bottom: 0;
}
#flow .step_colorbox_list .col2 li .flt_l{
    width: 46%;
    margin-right: 6%;
    margin-bottom: .5em;
}
#flow .step_colorbox_list .col2 li .flt_r{
    float: none;
    width: 100%;
}
#flow .step_colorbox_list .col2 li .flt_r dt{
    font-size: 88%;
    letter-spacing: normal;
    width:50%;
    padding: .32em .8em .25em;
    margin-bottom: .5em;
}

/*com_btn1*/
#flow .step2 .step_inbox > .com_btn1{
    margin-top: 4%;
}
#flow .step2 .step_inbox > .com_btn1 a{
    width: 100%;
}
}



/* step4
---------------------------------------------------------*/
#flow .step4 .com_btn1{
    text-align: center;
    margin-top: 40px;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
#flow .step4 .com_btn1{
    margin-top: 4%;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
#flow .step4 .com_btn1{
    margin-top: 5%;
}
#flow .step4 .com_btn1 a{
    width: 100%;
}
}




/* exa_bottom_txt
---------------------------------------------------------*/
.exa_bottom_txt{
    padding: 90px 0 120px;
}
.exa_bottom_txt .com_chon_tit{
    font-size: min(190%,2.8vw);
    font-weight:bold;
    line-height: 1.4em;
    letter-spacing: 0.05em;
    color: #63B7A3;
    margin-bottom: 0;
    margin-left: 0;
}
.exa_bottom_txt .com_chon_tit .com_chon{
    width: 1.5px;
    height: 1em;
}
.exa_bottom_txt .com_chon_tit .com_chon::before{
    background-color: #63B7A3;
}
.exa_bottom_txt .com_chon_tit .com_chon.type1{
    top:-1.3em;
    left: -0.7em;
}
.exa_bottom_txt .com_chon_tit .com_chon.type2{
    top:-1.3em;
    right: -0.7em;
}
.exa_bottom_txt .com_chon_tit .com_chon.type3{
    bottom:-1.3em;
    left: -0.7em;
}
.exa_bottom_txt .com_chon_tit .com_chon.type4{
    bottom:-1.3em;
    right: -0.7em;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
.exa_bottom_txt{
    padding: 6% 0 7%;
}
.exa_bottom_txt .com_chon_tit{
    letter-spacing: 0.01em;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
.exa_bottom_txt{
    padding: 11% 0 12%;
}
.exa_bottom_txt .com_chon_tit{
    font-size: 105%;
    letter-spacing: 0.01em;
}
}