@charset "utf-8";

/* message */

#message{
    position: relative;
    padding:0 70px;
    
}

#message h2{
    position: absolute;
    right:45%;
    z-index: 2;
}

.message-area{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    
}

.message-img{
    background:url("../img2/price01.jpg") no-repeat center;
    background-size: cover;
    height: 50vh;
    width:48%;
}

.message-content{
    display: flex;
    justify-content: center;
    padding: 150px 0 0 0;
    width:45%;
}

.message-box{
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
}

.message-content h3,
.message-content p,
.message-content .message-btn{
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;    
    text-orientation: upright;
    height: 20em;
    letter-spacing: 0.1em;
}

.message-content h3{
    font-size:1.5rem;
    line-height: 2.5;
}

_:-ms-lang(x)::-ms-backdrop, .message-content h3{/*IE11用ハック*/
    width:30%;
}

.message-content p{
    line-height: 3.5;
    margin: 0 0 0 50px;
}

_:-ms-lang(x)::-ms-backdrop, .message-content p{/*IE11用ハック*/
    width:60%;
}

_:-ms-lang(x)::-ms-backdrop, .message-content .message-btn{/*IE11用ハック*/
    width:10%;
}


@media screen and (max-width:1280px) {

.message-content h3{
    line-height: 2;
    margin: 0 0 0 10px;
}

.message-content p{
    line-height: 3;
    margin: 0 0 0 20px;
}
    
}

@media screen and (max-width:1000px) {
.message-content p{
    line-height: 2;
}
}


@media screen and (max-width:768px) {
#message{
    padding: 0 30px;
}
    
#message h2 {
    position: relative;
    right: inherit;
    top: 40px;
}
    .message-img,
    .message-content{
        width:100%;
    }
    
    .message-img{
        height:40vh;
    }

    .message-content{
    padding:50px 0 0 0;
    }
    
.message-content h3,
.message-content p,
.message-content .message-btn{
    -ms-writing-mode: lr-tb;
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    height: inherit;
    margin: 0 0 50px 0;
}
    
_:-ms-lang(x)::-ms-backdrop, .message-content h3,
_:-ms-lang(x)::-ms-backdrop, .message-content p,
_:-ms-lang(x)::-ms-backdrop, .message-content .message-btn{/*IE11用ハック*/
    width:100%;
}
    
.message-content h3{
    text-align: center;
    font-size: 1.2rem;

}
    
.message-box{
    display: block;

}
    
.message-box .btn{
    padding: 10px;
    display: block;
}
        
}


@media screen and (max-width:430px) {
    .message-img{
        height:20vh;
    }
}

@media screen and (max-width:370px) {

 .message-content p br{
    display: none;
    }
}


/* history */

#history{
    position: relative;
    padding:0 70px;
    margin: 0 0 100px 0;
}

#history h2{
    position: absolute;
    right:45%;
    z-index: 2;
}


.history-area{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    
}

.history-img{
    background:url("../img2/price02.jpg") no-repeat center;
    background-size: cover;
    height: 60vh;
    width:48%;
}

.history-content{
    width:45%;
    padding: 150px 0 0 0;
}


@media screen and (max-width:768px) {
#history{
    padding: 0 30px;
}
#history h2{
    position: relative;
    right: inherit;
    top: 40px;
}
    .history-img,
    .history-content{
        width:100%;
    }
    
    .history-img{
        height:40vh;
    }

    .history-content{
    padding:50px 0 0 0;
    }  
}

@media screen and (max-width:430px) {
    .history-img{
        height:20vh;
    }
}

/* faq */

#faq{
    margin:0 0 200px 0;
}

#faq h2{
    text-align: center;
    margin:0 0 100px 0;
    font-size: 2.5rem;
    color:#3E2058;
}


.faq-bg{
    position: relative;
    height: 55vh;
    background:url("../img2/price3.jpg") no-repeat center;
    background-size:cover;
    margin: 0 0 200px 25%;
    top:-50px;
}

.faq-bg::after{
    content:'';
    position: absolute;
    top:20%;
    left:-32%;
    width:100%;
    height:55vh;
    background:#f3f3f3;
    z-index: -1;
}

@media screen and (max-width:768px) {

.faq-bg,
.faq-bg::after{
    height:35vh;
}   
}

@media screen and (max-width:550px) {
#faq{
    margin:0 0 100px 0;
}
    
#faq h2{
    margin: 0 0 50px 0;   
    text-align: center;
    font-size: 2rem;
    color:#3E2058;
}
    
.faq-bg{
    margin:0 0 100px 25%;
    top:-50px;
}

.faq-bg,
.faq-bg::after{
    height:20vh;
} 
}

/* inquiry */

#inquiry{
    position: relative;
    padding:0 70px;
    
}

#inquiry h2{
    position: absolute;
    right:45%;
    z-index: 2;
}

.inquiry-area{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    
}

.inquiry-img{
    background:url("../img2/inquiry.jpg") no-repeat center;
    background-size: cover;
    height: 50vh;
    width:48%;
}

.inquiry-content{
    display: flex;
    justify-content: center;
    padding: 150px 0 0 0;
    width:45%;
}

.inquiry-box{
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
}

.inquiry-content h3,
.inquiry-content p,
.inquiry-content .inquiry-btn{
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;    
    text-orientation: upright;
    height: 20em;
    letter-spacing: 0.1em;
}

.inquiry-content h3{
    font-size:1.5rem;
    line-height: 2.5;
}

_:-ms-lang(x)::-ms-backdrop, .inquiry-content h3{/*IE11用ハック*/
    width:30%;
}

.inquiry-content p{
    line-height: 3.5;
    margin: 0 0 0 50px;
}

_:-ms-lang(x)::-ms-backdrop, .inquiry-content p{/*IE11用ハック*/
    width:60%;
}

_:-ms-lang(x)::-ms-backdrop, .inquiry-content .inquiry-btn{/*IE11用ハック*/
    width:10%;
}


@media screen and (max-width:1280px) {

.inquiry-content h3{
    line-height: 2;
    margin: 0 0 0 10px;
}

.inquiry-content p{
    line-height: 3;
    margin: 0 0 0 20px;
}
    
}

@media screen and (max-width:1000px) {
.inquiry-content p{
    line-height: 2;
}
}


@media screen and (max-width:768px) {
#inquiry{
    padding: 0 30px;
}
    
#inquiry h2 {
    position: relative;
    right: inherit;
    top: 40px;
}
    .inquiry-img,
    .inquiry-content{
        width:100%;
    }
    
    .inquiry-img{
        height:40vh;
    }

    .inquiry-content{
    padding:50px 0 0 0;
    }
    
.inquiry-content h3,
.inquiry-content p,
.inquiry-content .inquiry-btn{
    -ms-writing-mode: lr-tb;
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    height: inherit;
    margin: 0 0 50px 0;
}
    
_:-ms-lang(x)::-ms-backdrop, .inquiry-content h3,
_:-ms-lang(x)::-ms-backdrop, .inquiry-content p,
_:-ms-lang(x)::-ms-backdrop, .inquiry-content .inquiry-btn{/*IE11用ハック*/
    width:100%;
}
    
.inquiry-content h3{
    text-align: center;
    font-size: 1.2rem;

}
    
.inquiry-box{
    display: block;

}
    
.inquiry-box .btn{
    padding: 10px;
    display: block;
}
        
}


@media screen and (max-width:430px) {
    .inquiry-img{
        height:20vh;
    }
}

@media screen and (max-width:370px) {

 .inquiry-content p br{
    display: none;
    }
}

/* estimate */

#estimate{
    position: relative;
    padding:0 70px;
    
}

#estimate h2{
    position: absolute;
    right:45%;
    z-index: 2;
}

.estimate-area{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    
}

.estimate-img{
    background:url("../img2/estimate.jpg") no-repeat center;
    background-size: cover;
    height: 50vh;
    width:48%;
}

.estimate-content{
    display: flex;
    justify-content: center;
    padding: 150px 0 0 0;
    width:45%;
}

.estimate-box{
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
}

.estimate-content h3,
.estimate-content p,
.estimate-content .estimate-btn{
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;    
    text-orientation: upright;
    height: 20em;
    letter-spacing: 0.1em;
}

.estimate-content h3{
    font-size:1.5rem;
    line-height: 2.5;
}

_:-ms-lang(x)::-ms-backdrop, .estimate-content h3{/*IE11用ハック*/
    width:30%;
}

.estimate-content p{
    line-height: 3.5;
    margin: 0 0 0 50px;
}

_:-ms-lang(x)::-ms-backdrop, .estimate-content p{/*IE11用ハック*/
    width:60%;
}

_:-ms-lang(x)::-ms-backdrop, .estimate-content .estimate-btn{/*IE11用ハック*/
    width:10%;
}


@media screen and (max-width:1280px) {

.estimate-content h3{
    line-height: 2;
    margin: 0 0 0 10px;
}

.estimate-content p{
    line-height: 3;
    margin: 0 0 0 20px;
}
    
}

@media screen and (max-width:1000px) {
.estimate-content p{
    line-height: 2;
}
}


@media screen and (max-width:768px) {
#estimate{
    padding: 0 30px;
}
    
#estimate h2 {
    position: relative;
    right: inherit;
    top: 40px;
}
    .estimate-img,
    .estimate-content{
        width:100%;
    }
    
    .estimate-img{
        height:40vh;
    }

    .estimate-content{
    padding:50px 0 0 0;
    }
    
.estimate-content h3,
.estimate-content p,
.estimate-content .estimate-btn{
    -ms-writing-mode: lr-tb;
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    height: inherit;
    margin: 0 0 50px 0;
}
    
_:-ms-lang(x)::-ms-backdrop, .estimate-content h3,
_:-ms-lang(x)::-ms-backdrop, .estimate-content p,
_:-ms-lang(x)::-ms-backdrop, .estimate-content .estimate-btn{/*IE11用ハック*/
    width:100%;
}
    
.estimate-content h3{
    text-align: center;
    font-size: 1.2rem;

}
    
.estimate-box{
    display: block;

}
    
.estimate-box .btn{
    padding: 10px;
    display: block;
}
        
}


@media screen and (max-width:430px) {
    .estimate-img{
        height:20vh;
    }
}

@media screen and (max-width:370px) {

 .estimate-content p br{
    display: none;
    }
}

/* contract */

#contract{
    position: relative;
    padding:0 70px;
    
}

#contract h2{
    position: absolute;
    right:45%;
    z-index: 2;
}

.contract-area{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    
}

.contract-img{
    background:url("../img2/contract.jpg") no-repeat center;
    background-size: cover;
    height: 50vh;
    width:48%;
}

.contract-content{
    display: flex;
    justify-content: center;
    padding: 150px 0 0 0;
    width:45%;
}

.contract-box{
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
}

.contract-content h3,
.contract-content p,
.contract-content .contract-btn{
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;    
    text-orientation: upright;
    height: 20em;
    letter-spacing: 0.1em;
}

.contract-content h3{
    font-size:1.5rem;
    line-height: 2.5;
}

_:-ms-lang(x)::-ms-backdrop, .contract-content h3{/*IE11用ハック*/
    width:30%;
}

.contract-content p{
    line-height: 3.5;
    margin: 0 0 0 50px;
}

_:-ms-lang(x)::-ms-backdrop, .contract-content p{/*IE11用ハック*/
    width:60%;
}

_:-ms-lang(x)::-ms-backdrop, .contract-content .contract-btn{/*IE11用ハック*/
    width:10%;
}


@media screen and (max-width:1280px) {

.contract-content h3{
    line-height: 2;
    margin: 0 0 0 10px;
}

.contract-content p{
    line-height: 3;
    margin: 0 0 0 20px;
}
    
}

@media screen and (max-width:1000px) {
.contract-content p{
    line-height: 2;
}
}


@media screen and (max-width:768px) {
#contract{
    padding: 0 30px;
}
    
#contract h2 {
    position: relative;
    right: inherit;
    top: 40px;
}
    .contract-img,
    .contract-content{
        width:100%;
    }
    
    .contract-img{
        height:40vh;
    }

    .contract-content{
    padding:50px 0 0 0;
    }
    
.contract-content h3,
.contract-content p,
.contract-content .contract-btn{
    -ms-writing-mode: lr-tb;
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    height: inherit;
    margin: 0 0 50px 0;
}
    
_:-ms-lang(x)::-ms-backdrop, .contract-content h3,
_:-ms-lang(x)::-ms-backdrop, .contract-content p,
_:-ms-lang(x)::-ms-backdrop, .contract-content .contract-btn{/*IE11用ハック*/
    width:100%;
}
    
.contract-content h3{
    text-align: center;
    font-size: 1.2rem;

}
    
.contract-box{
    display: block;

}
    
.contract-box .btn{
    padding: 10px;
    display: block;
}
        
}


@media screen and (max-width:430px) {
    .contract-img{
        height:20vh;
    }
}

@media screen and (max-width:370px) {

 .contract-content p br{
    display: none;
    }
}

/* payment */

#payment{
    position: relative;
    padding:0 70px;
    
}

#payment h2{
    position: absolute;
    right:45%;
    z-index: 2;
}

.payment-area{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    
}

.payment-img{
    background:url("../img2/payment.jpg") no-repeat center;
    background-size: cover;
    height: 50vh;
    width:48%;
}

.payment-content{
    display: flex;
    justify-content: center;
    padding: 150px 0 0 0;
    width:45%;
}

.payment-box{
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
}

.payment-content h3,
.payment-content p,
.payment-content .payment-btn{
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;    
    text-orientation: upright;
    height: 20em;
    letter-spacing: 0.1em;
}

.payment-content h3{
    font-size:1.5rem;
    line-height: 2.5;
}

_:-ms-lang(x)::-ms-backdrop, .payment-content h3{/*IE11用ハック*/
    width:30%;
}

.payment-content p{
    line-height: 3.5;
    margin: 0 0 0 50px;
}

_:-ms-lang(x)::-ms-backdrop, .payment-content p{/*IE11用ハック*/
    width:60%;
}

_:-ms-lang(x)::-ms-backdrop, .payment-content .payment-btn{/*IE11用ハック*/
    width:10%;
}


@media screen and (max-width:1280px) {

.payment-content h3{
    line-height: 2;
    margin: 0 0 0 10px;
}

.payment-content p{
    line-height: 3;
    margin: 0 0 0 20px;
}
    
}

@media screen and (max-width:1000px) {
.payment-content p{
    line-height: 2;
}
}


@media screen and (max-width:768px) {
#payment{
    padding: 0 30px;
}
    
#payment h2 {
    position: relative;
    right: inherit;
    top: 40px;
}
    .payment-img,
    .payment-content{
        width:100%;
    }
    
    .payment-img{
        height:40vh;
    }

    .payment-content{
    padding:50px 0 0 0;
    }
    
.payment-content h3,
.payment-content p,
.payment-content .payment-btn{
    -ms-writing-mode: lr-tb;
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    height: inherit;
    margin: 0 0 50px 0;
}
    
_:-ms-lang(x)::-ms-backdrop, .payment-content h3,
_:-ms-lang(x)::-ms-backdrop, .payment-content p,
_:-ms-lang(x)::-ms-backdrop, .payment-content .payment-btn{/*IE11用ハック*/
    width:100%;
}
    
.payment-content h3{
    text-align: center;
    font-size: 1.2rem;

}
    
.payment-box{
    display: block;

}
    
.payment-box .btn{
    padding: 10px;
    display: block;
}
        
}


@media screen and (max-width:430px) {
    .payment-img{
        height:20vh;
    }
}

@media screen and (max-width:370px) {

 .payment-content p br{
    display: none;
    }
}

/* start */

#start{
    position: relative;
    padding:0 70px;
    
}

#start h2{
    position: absolute;
    right:45%;
    z-index: 2;
}

.start-area{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    
}

.start-img{
    background:url("../img2/price03.jpg") no-repeat center;
    background-size: cover;
    height: 50vh;
    width:48%;
}

.start-content{
    display: flex;
    justify-content: center;
    padding: 150px 0 0 0;
    width:45%;
}

.start-box{
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
}

.start-content h3,
.start-content p,
.start-content .start-btn{
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;    
    text-orientation: upright;
    height: 20em;
    letter-spacing: 0.1em;
}

.start-content h3{
    font-size:1.5rem;
    line-height: 2.5;
}

_:-ms-lang(x)::-ms-backdrop, .start-content h3{/*IE11用ハック*/
    width:30%;
}

.start-content p{
    line-height: 3.5;
    margin: 0 0 0 50px;
}

_:-ms-lang(x)::-ms-backdrop, .start-content p{/*IE11用ハック*/
    width:60%;
}

_:-ms-lang(x)::-ms-backdrop, .start-content .start-btn{/*IE11用ハック*/
    width:10%;
}


@media screen and (max-width:1280px) {

.start-content h3{
    line-height: 2;
    margin: 0 0 0 10px;
}

.start-content p{
    line-height: 3;
    margin: 0 0 0 20px;
}
    
}

@media screen and (max-width:1000px) {
.start-content p{
    line-height: 2;
}
}


@media screen and (max-width:768px) {
#start{
    padding: 0 30px;
}
    
#start h2 {
    position: relative;
    right: inherit;
    top: 40px;
}
    .start-img,
    .start-content{
        width:100%;
    }
    
    .start-img{
        height:40vh;
    }

    .start-content{
    padding:50px 0 0 0;
    }
    
.start-content h3,
.start-content p,
.start-content .start-btn{
    -ms-writing-mode: lr-tb;
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    height: inherit;
    margin: 0 0 50px 0;
}
    
_:-ms-lang(x)::-ms-backdrop, .start-content h3,
_:-ms-lang(x)::-ms-backdrop, .start-content p,
_:-ms-lang(x)::-ms-backdrop, .start-content .start-btn{/*IE11用ハック*/
    width:100%;
}
    
.start-content h3{
    text-align: center;
    font-size: 1.2rem;

}
    
.start-box{
    display: block;

}
    
.start-box .btn{
    padding: 10px;
    display: block;
}
        
}


@media screen and (max-width:430px) {
    .start-img{
        height:20vh;
    }
}

@media screen and (max-width:370px) {

 .start-content p br{
    display: none;
    }
}

/* delivery */

#delivery{
    position: relative;
    padding:0 70px;
    
}

#delivery h2{
    position: absolute;
    right:45%;
    z-index: 2;
}

.delivery-area{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    
}

.delivery-img{
    background:url("../img2/price04.jpg") no-repeat center;
    background-size: cover;
    height: 50vh;
    width:48%;
}

.delivery-content{
    display: flex;
    justify-content: center;
    padding: 150px 0 0 0;
    width:45%;
}

.delivery-box{
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
}

.delivery-content h3,
.delivery-content p,
.delivery-content .delivery-btn{
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;    
    text-orientation: upright;
    height: 20em;
    letter-spacing: 0.1em;
}

.delivery-content h3{
    font-size:1.5rem;
    line-height: 2.5;
}

_:-ms-lang(x)::-ms-backdrop, .delivery-content h3{/*IE11用ハック*/
    width:30%;
}

.delivery-content p{
    line-height: 3.5;
    margin: 0 0 0 50px;
}

_:-ms-lang(x)::-ms-backdrop, .delivery-content p{/*IE11用ハック*/
    width:60%;
}

_:-ms-lang(x)::-ms-backdrop, .delivery-content .delivery-btn{/*IE11用ハック*/
    width:10%;
}


@media screen and (max-width:1280px) {

.delivery-content h3{
    line-height: 2;
    margin: 0 0 0 10px;
}

.delivery-content p{
    line-height: 3;
    margin: 0 0 0 20px;
}
    
}

@media screen and (max-width:1000px) {
.delivery-content p{
    line-height: 2;
}
}


@media screen and (max-width:768px) {
#delivery{
    padding: 0 30px;
}
    
#delivery h2 {
    position: relative;
    right: inherit;
    top: 40px;
}
    .delivery-img,
    .delivery-content{
        width:100%;
    }
    
    .delivery-img{
        height:40vh;
    }

    .delivery-content{
    padding:50px 0 0 0;
    }
    
.delivery-content h3,
.delivery-content p,
.delivery-content .delivery-btn{
    -ms-writing-mode: lr-tb;
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    height: inherit;
    margin: 0 0 50px 0;
}
    
_:-ms-lang(x)::-ms-backdrop, .delivery-content h3,
_:-ms-lang(x)::-ms-backdrop, .delivery-content p,
_:-ms-lang(x)::-ms-backdrop, .delivery-content .delivery-btn{/*IE11用ハック*/
    width:100%;
}
    
.delivery-content h3{
    text-align: center;
    font-size: 1.2rem;

}
    
.delivery-box{
    display: block;

}
    
.delivery-box .btn{
    padding: 10px;
    display: block;
}
        
}


@media screen and (max-width:430px) {
    .delivery-img{
        height:20vh;
    }
}

@media screen and (max-width:370px) {

 .delivery-content p br{
    display: none;
    }
}