@charset "UTF-8";

/* m_img
---------------------------------------------------------*/
.contentpage .m_img_area .m_img{
    background-image: url("../images/firstly/m_img@2x.jpg");}
.contentpage .m_img_area .m_img::before{
    background-image: url("../images/firstly/m_deco@2x.png");}

/* sec1
---------------------------------------------------------*/
#sec1 .sec1_box{
    position: relative;
    border:1px solid #293F42;
    border-radius: 70px;
    padding: 110px 4% 90px;
    box-sizing: border-box;
}
#sec1 .sec1_box::before{
    position: absolute;
    display: block;
    content: "";
    background: url("../images/firstly/abs01@2x.png")no-repeat top right;
    background-size: 100% auto;
    width: 30%;
    max-width: 210px;
    height: 500px;
    top: -30px;
    right: 8.5%;
}
#sec1 .sec1_box .inbox{
    position: relative;
    max-width: 990px;
    margin: 0 auto;
}
#sec1 .sec1_box .inbox::before{
    position: absolute;
    display: block;
    content: "";
    background: url("../images/firstly/abs02@2x.png")no-repeat top right;
    background-size: 100% auto;
    width: 25%;
    max-width: 232px;
    height: 500px;
    top: -55px;
    right: -1.5%;
}
#sec1 .sec1_box_index,
#sec1 .sec1_box_list{
    max-width: 958px;
    margin-left: auto;
    margin-right: auto;
}
#sec1 .sec1_box_index_inbox{
    width:75%;    
}
#sec1 .sec1_box_index .ft_min{
    font-size: min(240%,3.2vw);
    letter-spacing: 0.01em;
    line-height: 1.6em;
    margin-bottom: .6em;
}
#sec1 .sec1_box_list li{
    border-bottom: dotted 2px #293F42;
    padding-bottom: .8em;
    margin-bottom: 1.9em;
    line-height: 1.6em;
}
#sec1 .sec1_box_list li p{
    position: relative;
    padding-left: 1.8em;
    box-sizing: border-box;
}
#sec1 .sec1_box_list li p::before{
    position: absolute;
	font-family: 'fontello';
	content: '\e800';	
	left: 0;
	font-size: 105%;
	top: 0;
    color: #C09C53;
}
#sec1 .com_contact_list{
    width: 100%;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
#sec1 .sec1_box{
    border-radius: 50px;
    padding: 6% 5% 5%;
}
#sec1 .sec1_box::before{
    width: 25%;
    top: -3.5vw;
}
#sec1 .sec1_box .inbox::before{
    width: 20%;
    top: 1vw;
    right: 0;
}
#sec1 .sec1_box_index .ft_min{
    margin-bottom: .2em;
}
#sec1 .sec1_box_list li{
    padding-bottom: .7em;
    margin-bottom: 1.2em;
}
#sec1 .sec1_box_list li p{
    padding-left: 1.2em;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
#sec1 .sec1_box{
    border-radius: 30px;
    padding: 8% 5%;
}
#sec1 .sec1_box::before{
    width: 30%;
    top: -4vw;
    left: 0;
    right: 0;
    margin: 0 auto;
}
#sec1 .sec1_box .inbox::before{
    width: 24%;
    top:0;
    right: -1%;
}
#sec1 .sec1_box_index_inbox{
    width: 100%;    
}
#sec1 .sec1_box_index .ft_min{
    font-size: 145%;
    letter-spacing: normal;
    line-height: 1.5em;
    margin-bottom: .4em;
}
#sec1 .sec1_box_list li{
    padding-bottom: .8em;
    margin-bottom: 1.2em;
}
#sec1 .sec1_box_list li p{
    padding-left: 1.2em;
}
}




/* sec2
---------------------------------------------------------*/
#sec2 .bg{
    position: relative;
}
#sec2 .bg::before{
    position: absolute;
    display: block;
    content: "";
    background: url("../images/firstly/bg@2x.png")no-repeat bottom left;
    background-size: 100% auto;
    width: 100%;
    height: 500px;
    bottom: 0;
    left: 0;
    z-index: -5;
    mix-blend-mode:overlay!important;
}
#sec2 .bg::after{
    position: absolute;
    display: block;
    content: "";/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e8f5f4+1,e8f5f4+35,73d9ca+100 */
background: linear-gradient(to bottom,  #e8f5f4 1%,#e8f5f4 35%,#73d9ca 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    background-size: 100% auto;
    width: 100%;
    height: calc(100% - 50px);
    bottom: 0;
    left: 0;
    z-index: -6;
}
#sec2 .sec2_index{
    margin-bottom: 80px;
    text-align: center;
}
#sec2 .sec2_index div{
    width: 42%;
    max-width: 380px;
    margin: 0 auto 60px;
} 
#sec2 .sec2_index .ft_min{
    font-size: min(240%,3.5vw);
    letter-spacing: 0.01em;
    line-height: 1em;
}
#sec2 .sec2_list > li{
    position: relative;
    width: 96%;
    background: url("../images/firstly/abs06@2x.png")no-repeat top center;
    background-size: 100% 100%;
    margin: 0 auto 65px;
    padding: 70px 6%;
    box-sizing: border-box;
}
#sec2 .sec2_list > li:last-child{
    margin-bottom: 0;
}
#sec2 .sec2_list > li::before{
    position: absolute;
    display: block;
    content: "";
    background: url("../images/firstly/abs04@2x.png")no-repeat top center;
    background-size: 100% auto;
    width: 30%;
    max-width: 128px;
    height: 300px;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
}
#sec2 .sec2_list > li:nth-child(even)::before{
    background-image: url("../images/firstly/abs05@2x.png");
}
#sec2 .sec2_list > li:last-child::before{
    display: none;
}
#sec2 .sec2_list .flexbox .flex_l{
    width: 56%;
}
#sec2 .sec2_list .flexbox .flex_l .index{
    display: flex;
    justify-content: space-between;
    align-items: center;	
    margin-bottom: 40px;
}
#sec2 .sec2_list .flexbox .flex_l .index .step{
    position: relative;
    width: 21%;
    text-align: left;
    padding: 1.5em 10% 1.5em 0;
    box-sizing: border-box;
}
#sec2 .sec2_list .flexbox .flex_l .index .step::before{
    position: absolute;
    display: block;
    content: "";
    background: #21B5AB;
    background-size: 100% 100%;
    width: calc(160% + 1.5rem);
    height: 100%;
    top:0;
    right: 0;
    border-radius: 0 80px 80px 0;
}
#sec2 .sec2_list .flexbox .flex_l .index .step img{
    position: relative;
    z-index: 2;
    margin-left: 0;
    margin-right: auto;
}
#sec2 .sec2_list .flexbox .flex_l .index .ft_min{
    width: 73%;
    text-align: left;
    font-size: min(235%,3.2vw);
    letter-spacing:.05em;
    font-feature-settings: "palt";
    line-height: 1.5em;
}
#sec2 .sec2_list .flexbox .flex_l .txt{
    max-width: 530px;
    margin: 0 auto;
}
#sec2 .sec2_list .flexbox .flex_r{
    width: 40%;
}
#sec2 .img1{
    width: 12%;
    max-width: 119px;
    margin: 0 auto;
    padding: 30px 0 50px;
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) { 
#sec2 .bg::after{
    height: calc(100% - 5vw);
}
#sec2 .sec2_index{
    margin-bottom: 5%;
}
#sec2 .sec2_index div{
    margin: 0 auto 4%;
} 
#sec2 .sec2_list > li{
    width: 100%;
    margin: 0 auto 5vw;
    padding: 4vw 4% 5vw;
}
#sec2 .sec2_list > li::before{
    width: 10vw;
}
#sec2 .sec2_list .flexbox .flex_l{
    width: 57%;
}
#sec2 .sec2_list .flexbox .flex_l .index{
    margin-bottom: 2vw;
}
#sec2 .sec2_list .flexbox .flex_l .index .step{
    width: 19%;
    padding: .8em 8% .8em 0;
}
#sec2 .sec2_list .flexbox .flex_l .index .step::before{
    width: calc(135% + .5em);
}
#sec2 .sec2_list .flexbox .flex_l .index .ft_min{
    width: 76%;
}
#sec2 .img1{
    padding: 3vw 0 5vw;
}
}

/* Mobile (Portrait) 
------------------------------------------*/ 
@media only screen and (max-width: 767px) { 
#sec2 .bg::after{
    height: calc(100% - 7vw);
}
#sec2 .sec2_index{
    margin-bottom: 10%;
}
#sec2 .sec2_index div{
    width: 65%;
    margin: 0 auto 6%;
} 
#sec2 .sec2_index .ft_min{
    font-size: 150%;
}
#sec2 .sec2_list > li{
    width: 100%;
    margin: 0 auto 12vw;
    padding: 0 6% 8%;
}
#sec2 .sec2_list > li::before{
    width: 17vw;
}
#sec2 .sec2_list .flexbox{
    display: block;
}
#sec2 .sec2_list .flexbox .flex_l{
    width: 100%;
    margin-bottom: 8%;
}
#sec2 .sec2_list .flexbox .flex_l .index{
    display: block;
    margin-bottom: 2%;
}
#sec2 .sec2_list .flexbox .flex_l .index .step{
    width: 25%;
    text-align: center;
    padding: 5vw 7% 5vw;
    margin: 0 auto 5%;
}
#sec2 .sec2_list .flexbox .flex_l .index .step::before{
    background-size: 100% 100%;
    width: 100%;
    height: calc(100% + 2vw);
    top:-2vw;
    right: 0;
    left: 0;
    margin: 0 auto;
    border-radius: 0 0 80px 80px;
}
#sec2 .sec2_list .flexbox .flex_l .index .step img{
    margin-left: auto;
    margin-right: auto;
}
#sec2 .sec2_list .flexbox .flex_l .index .ft_min{
    width: 100%;
    text-align: center;
    font-size:170%;
}
#sec2 .sec2_list .flexbox .flex_l .txt{
    max-width: 100%;
}
#sec2 .sec2_list .flexbox .flex_l .com_btn1 a{
    margin-left: auto;
    margin-right: auto;
}
#sec2 .sec2_list .flexbox .flex_r{
    width: 80%;
    margin: 0 auto;
}
#sec2 .img1{
    width: 18vw;
    padding: 4vw 0 6vw;
}
}