/********* 第2階層 共通*********/
.tac{text-align: center;}
.tar{text-align: right;}

.mt10{margin-top: 10px;}
.mt15{margin-top: 15px;}
.mt25{margin-top: 25px;}
.mt30{margin-top: 30px;}
.mt40{margin-top: 40px;}
.mb30{margin-bottom: 30px;}
.mb40{margin-bottom: 40px;}
.mb60{margin-bottom: 60px;}

.mr10{margin-right: 10px;}
.mr20{margin-right: 20px;}

.ml10{margin-left: 10px;}
.ml20{margin-left: 20px;}

/********* main *********/

.breadcrumbs-wrap{
    background: #ecf7ff;
    margin-top: 0px;
    margin-bottom: 38px;}
.breadcrumbs {
    width: 1190px;
    margin: 0 auto;
    padding: 7px 0 12px;
	font-size: 16px;
    font-size: 1.6rem;}

@media screen and (max-width: 768px){
	.breadcrumbs{
		width:96%;
		margin: 0 auto 1%;
        padding: 1.5% 0 2.5%;
        font-size:1.2rem;}
    .breadcrumbs-wrap{
        margin-bottom: 14px;
    }
    .single h1.ttl01{
        margin-bottom: 5px;
        font-size: 2.2rem;
        padding: 3% 5%;
    }
}

#contents-wrap,
#contents-wrap2{
    display: flex;
    justify-content: space-between;
    width: 1200px;
    margin: 0 auto 70px auto;
}

.page-contents{
    width: 68%;
    max-width:815px;
}

.page-contents p{
    margin-bottom: 20px;
}


.page-contents h2{
    padding: 0 1% 0 2%;
    margin-top: 5.1%;
    margin-bottom: 3%;   
    color: #1F5D9F;
    font-size: 26px;
    font-weight: bold;
    border-left: solid 5px #1F5D9F;
    background: transparent;
}
.page-contents h3{
    padding: 0 1% 0 0;
    margin-top: 5.1%;
    margin-bottom: 2%;   
    color: #1F5D9F;
    font-size: 22px;
    font-weight: bold;
    background: transparent;
}
.page-contents dl{
    margin-bottom: 10px;
    line-height: 1.75em;
}
.page-contents dt{
    font-weight:bold;
}
.page-contents li{
    margin-bottom: 10px;
    font-size: 18px;
}

.page-inner img{
    max-width: 100%;
    width: auto;
    height: auto;
    margin: auto;
    display: block;
}

.ttl01{
    background: #1F5D9F;
    padding: 1% 3%;
    margin-bottom: 36px;    
    border-radius: 5px;
    color: #fff;
    font-size: 26px;
    font-size: 2.2rem;
    font-weight: bold;
}

.ttl02 {
    margin-bottom: 13px;
    font-size: 47px;
    font-family: gotham, sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.6;
    text-transform: uppercase;
    color: #03205a;
    display: flex;
    position: relative;
    &::before{
        content: '>';
        font-family: gotham, sans-serif;
        display: inline-block;
    }
}

.page-contents .linkBtn{
    margin-bottom: 10px;
}
.page-contents .linkBtn a{
    border-radius: 50px;
    background: #1f5d9f;
    padding: 10px 20px;
    color: #fff;
    display: inline-block;
    font-size: 18px;
}

@media screen and (max-width:768px){
    #contents-wrap,
    #contents-wrap2{
        width: 100%;
        display: block;
        margin-bottom: 20px;}

    #main-contents{
        width: 100%;
        margin: 0 auto 5%;}

    #main-contents{
        width: 93%;
    }

    h1.ttl01{
        margin-bottom: 7%; 
        text-align: center;
    } 

    .ttl02{
        font-size: 30px;
    }

    .page-contents h2{
        font-size: 20px;
    }
    .page-contents h3{
        font-size: 18px;
    }
}



/*** 料金表 ***/
#price .price {
    display: flex;
    /* justify-content: space-between; */
    background: #77C1C4;
    text-align: center;
    font-size: 2.2rem;
    margin: 0 0 1px 0px;
    color: #fff;
    font-weight: bold;
}
#price .price .p-l {
    width: 34%;
    padding: 2% 0;
}
#price .price .p-r {
    width: 62%;
    padding: 2% 6%;    
    border-left: 1px solid #fff;}

@media screen and (max-width: 768px){
    #price .price{
        font-size:16px;
    }
    #price .price .p-l {
        width: 26%;
    }
    #price .price .p-r {
        width: 75%;
        padding: 2% 0 2% 3%;
        text-align: left;
    }
    #price p span,
    #price .page-contents h3 span{
        display: block;
        font-size: 16px;    
    }
    
}

/*** お客様の声 ***/
.voice-top{
    margin-bottom: 45px;
}

.voice-wrap{
    width: 100%;
    margin-bottom: 45px;
    padding-bottom: 45px;
    border-bottom: 1px solid #e2e2e2e2;
    overflow: hidden;
}
.voice-pic{
    float: left;
    width: 28%;
}
.voice-detail{
    float: right;
    width: 68%;
}
.voice-detail h3{
    margin-top: 0% !important;
}
@media screen and (max-width: 768px){
    .voice-wrap{
        margin-bottom: 28px;
        padding-bottom: 0px;
    }
    .voice-pic{
        float: none;
        width: 100%;
        margin-bottom: 15px;
    }
    .voice-detail{
        float: none;
        width: 100%;
    }
    .voice-top{
        margin-bottom: 30px;
    }   
}

/* case */
.case_BA_block {
    margin-bottom: 30px;
    display: flex;
}
.case_BA_block > div{
    width: 48%;
    height: 100%;
    margin: 0 1.5%;
}
.case_BA_block .img_block {
    height: 300px;
    border: 1px solid #eee;}

.case_BA_block .img_block img{
    width: 100%;
    height: 100%;
    object-fit: cover;    
}

.case_block{
    margin-bottom: 5%;
}
.archive .more_btn{
    margin-top: 35px;
    background: #ff8000;
    width: 30%;
    text-align: center;
    border-radius: 5px;
    margin-left: 67%;    
}

.archive .more_btn a{
    color: #fff;
    padding: 12px;
    display: block;

}

@media screen and (max-width: 768px){
    .case_BA_block {
        display: block;
    }
    .case_BA_block > div{
        width: 100%;
        margin: 0 1% 3%;}
    .case_BA_block .img_block {
        height: 100%;}
    
    .archive .more_btn{
        background: #ff8000;
        width: 41%;
        text-align: center;
        border-radius: 5px;
        margin-left: 59%;    
    }

    .archive .more_btn a{
        color: #fff;
        padding: 12px;
        display: block;
    }
}

/*** qa ***/
.displayNone {display: none;}

.qa-block{
    margin-top: 5.7%;
}
.qa-block > div{
    background: url(../images/qa-icon.jpg)no-repeat top left;
}
.qa-block > div p{
    background: #EAF4EE;
    margin-bottom: 5.8%;
    margin-left: 15.5%;    
    padding: 3.4% 2% 3.4% 3.4%;
    border-radius: 10px;
    font-size: 2.0rem;
    color: #4A1B0C;
}

section.qa-box-wrap {
    background: #298eaf;
    border-radius: 10px;
    margin-bottom: 25px;
    padding: 0 2px 2px;
}
section.qa-box-wrap h1 a{
    padding: 6px 0 4px;
    color: #fff;
    font-size: 24px;
    text-align: center;
    display: block;
}
.qa-box-inner {
    padding: 15px 20px;
    background: #fff;
    border-radius: 10px;}
.qa-box-inner h2{
    font-size: 18px;
    margin-bottom: 12px;
}
.qa-box-inner h2 span{
    color: #298eaf;
    margin-right: 20px;
    display: inline-block;
}
.qa-box-inner .more {
    text-align: right;
}

.single-question p.date{
    text-align: right;
    padding-bottom: 30px;}

@media screen and (max-width: 768px){
    section.qa-box-wrap h1{font-size: 22px;}
    .qa-box-inner{padding: 1% 2% 0;}
    .qa-box-inner .more{
        width: 60%;
        margin: 5px auto 0;}
    .qa-block > div{background-size: 14%;}
    
}


.page-contents h2.ttl2{
    margin: 0 0 95px;
    padding: 10px 17px 13px;
    background: linear-gradient(90deg,rgba(24, 103, 198, 1) 0%, rgba(4, 75, 149, 1) 100%);
    font-size: 28px;
    color: #fff;
    line-height: 1.39;
    border: none;
}

div#contents-wrap2 .page-contents h2.ttl2{
    margin-top: 73px;
}


#flow .timeline {
    counter-reset: num;
}

#flow .timeline .step {
    margin-bottom: 110px;
    display: flex;
    counter-increment: num;
    justify-content: space-between;
}

#flow .timeline .step-left,
#flow .timeline .step-right{
    width: 45%;
    position: relative;

}

#flow .timeline .step-img{
    width: 100%;
    max-width: 340px;
    position: relative;
    &::after{
        content: '';
        position: absolute;
        width: 8px;
        height: 100%;
        background: linear-gradient(0deg, rgba(24, 103, 198, 1) 0%, rgba(4, 75, 149, 1) 100%);
        left: 0;
        right: 0;
        bottom: -70%;
        z-index: -1;
        margin: auto;
    }
        &::before{
            width: 113px;
            padding: 6px 0 8px;
            content: "STEP " counter(num, decimal-leading-zero);
            background: #073aa5;
            font-size: 20px;
            font-family: gotham, sans-serif;
            color: rgb(255, 255, 255);
            line-height: 1.2;
            text-align: center;
            position: absolute;
            top: -38px;
            left: 2px;
    }
}

#flow .timeline .step-img img{
    box-shadow: 14px 9px 0px 4px #073aa5;
}

#flow .timeline .step:last-child{
    margin-bottom: 0;
}
#flow .timeline .step:last-child .step-img{
    &::after{
        display: none;
    }
}

#flow .timeline .step-content{
    width: 54%;
}

#flow .timeline h3.step-title{
    margin: 0 0 16px;
    padding: 0;
    font-size: 24px;
    color: #0639a4;
    line-height: 1.39;
}

#flow #contents-wrap p, #flow #contents-wrap2 p{
    margin-bottom: 0;
    color: #333333;
    line-height: 1.39;
}

#flow ul.note{
    margin-top: 25px;
}
#flow ul.note li{
    margin-bottom: 3px;
    display: flex;
    line-height: 1.39;
    &::before{
        content: '※';
        display: inline-block;
    }
    
}
@media screen and (max-width: 768px){
    #flow .page-contents{
        width: 96%;
        margin: 0 auto;
    }

    #flow div#contents-wrap .timeline .step{
        display: block;
    }

    #flow div#contents-wrap2 .timeline .step{
        flex-wrap: wrap-reverse;
    }

    #flow .timeline .step{
        margin: 0 auto;
        padding-bottom: 50px;
        position: relative;
        &::after {
            content: '';
            width: 5px;
            height: 100%;
            background: linear-gradient(0deg,rgba(4, 75, 149, 1) 0%, rgba(24, 103, 198, 1) 50%, rgba(4, 75, 149, 1) 100%);
            left: 0;
            right: auto;
            top: 0;
            display: inline-block;
            position: absolute;
        }
    }

    #flow div#contents-wrap .timeline .step:last-child,
    #flow div#contents-wrap2 .timeline .step:last-child{
        &::after{
            display: none;
        }
    }
    

    #flow .timeline .step-content{
        width: 100%;
    }
    #flow .timeline .step-left, #flow .timeline .step-right{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .page-contents h2.ttl2{ 
        margin: 0 0 55px;
        padding: 5px 5px 6px;
        font-size: 20px;
    }

    div#contents-wrap2 .page-contents h2.ttl2{
        margin-top: 30px;
    }
    
    #flow .timeline .step-left,
    #flow .timeline .step-right {
        margin-bottom: 20px;
    }

    #flow .timeline .step-img{
        width: 40%;
        max-width: 340px;
        position: relative;
        &::after {
            display: none;
        }
        &::before {
            width: 83px;
            padding: 4px 0 4px;
            font-size: 16px;
            top: -27px;
            left: 2px;
        }
    }
    #flow .timeline .step-img img{
        box-shadow: 6px 6px 0px 1px #073aa5;
    }

    #flow .timeline h3.step-title{
        margin: 0;
        width: 54%;
        font-size: 18px;
        display: grid;
        place-content: center;
    }

    #flow ul.note {
        margin-top: 15px;
    }
    #flow ul.note li{
        font-size: 16px;
    }


    #flow .step-body{
        padding-left: 16px; 
    }

    #flow #contents-wrap2 .step-body{
        padding-right: 16px;
        padding-left: 0;
    }

    #flow #contents-wrap2 .timeline .step{
    &::after {
        right: 6px;
        left: auto;
        }
    }
}