@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/nara01.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/nara02.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/nara03.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:#D2BCE7;
    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;
} 
}

/* safety */

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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


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

    .safety-content{
    padding:50px 0 0 0;
    }
    
.safety-content h3,
.safety-content p,
.safety-content .safety-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, .safety-content h3,
_:-ms-lang(x)::-ms-backdrop, .safety-content p,
_:-ms-lang(x)::-ms-backdrop, .safety-content .safety-btn{/*IE11用ハック*/
    width:100%;
}
    
.safety-content h3{
    text-align: center;
    font-size: 1.2rem;

}
    
.safety-box{
    display: block;

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


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

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

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

/* specialty */

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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


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

    .specialty-content{
    padding:50px 0 0 0;
    }
    
.specialty-content h3,
.specialty-content p,
.specialty-content .specialty-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, .specialty-content h3,
_:-ms-lang(x)::-ms-backdrop, .specialty-content p,
_:-ms-lang(x)::-ms-backdrop, .specialty-content .specialty-btn{/*IE11用ハック*/
    width:100%;
}
    
.specialty-content h3{
    text-align: center;
    font-size: 1.2rem;

}
    
.specialty-box{
    display: block;

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


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

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

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