@charset "utf-8";
/* CSS Document */
body{ letter-spacing: 0;}
.banner header nav a{ width:80%; font-size:15px; text-align:center;}
nav.menu ul li{ width:80%; text-align:center;}
nav.menu ul li a{ font-size:15px;}
.indexabout { background: url(../images/bg.jpg) no-repeat center calc(100% - 20vh - 450px)}
.indexabout .main .title .tw{ display: flex; width: 60%; margin: 0 auto; flex-wrap: wrap; flex-direction: column-reverse; writing-mode:horizontal-tb;}
.aboutpart1 .main .title .tw{ display: flex; margin: 0 auto; flex-wrap: wrap; flex-direction: column-reverse; writing-mode:horizontal-tb;}
.indexabout .main .title h2,.aboutpart1 .main .title h2{ font-size: 25px; line-height: 32px;font-family: 'DM Serif Display', serif;}
.indexabout .main .title h2 strong,.aboutpart1 .main .title h2 strong{ margin: 0 0 10px 0; font-size: 48px; line-height: 55px; text-transform: uppercase;}
.indexabout .main .title .tag,.aboutpart1 .main .title .tag{ width:fit-content; margin: 0 0 50px 0; padding: 2px 50px 2px 10px; font-size: 15px;}
.indexabout .main .title .tag::after,.aboutpart1 .main .title .tag::after{ bottom: 7px; left: inherit; right: -15px;}
.indexabout .main .title .en,.indexservice .stitle .en,.indexnews .main .title .en,.indexservice ul li .title .en,.aboutpart1 .main .title .en,.roomservice .main .title .en,.trafficmain .main .title .en{ display:  none;}
.indexabout .main .text,.aboutpart1 .main .text{ padding: 0;}
.indexabout .main .text p,.aboutpart1 .main .text p{ font-size: 18px; line-height: 28px;}
.indexservice .titlemain .main{ width: 45%;}
.indexservice .stitle{display: flex;flex-wrap: wrap; flex-direction: column-reverse;}
.indexservice .stitle .tw{display: flex;flex-wrap: wrap; flex-direction: column-reverse; writing-mode:horizontal-tb;}
.indexservice .stitle .tw h2{ font-size: 25px; line-height: 32px;font-family: 'DM Serif Display', serif;}
.indexservice .stitle .tw h2 strong{ margin: 0 0 10px 0; font-size: 48px; line-height: 55px; text-transform: uppercase;}
.indexservice ul li .title h3{ font-size: 30px;font-family: 'DM Serif Display', serif;}
.indexservice .stitle .tag{ width:fit-content;margin: 0 0 50px 0; padding: 2px 50px 2px 10px; font-size: 15px;}
.indexservice .stitle .tag::after{ bottom: 7px; left: inherit; right: -15px;}

.indexlocation .main .title .tw{ display: flex; flex-wrap: wrap; flex-direction: column; writing-mode:horizontal-tb;}
.indexlocation .main .title h2{ font-size: 20px; line-height: 28px; text-align: right;font-family: 'DM Serif Display', serif;}
.indexlocation .main .title h2 strong{ margin: 0 0 10px 0; font-size: 37px; line-height: 45px; text-transform: uppercase;}
.indexlocation .main .title .tag{ width:fit-content; margin: 0 0 50px 0; padding: 2px 50px 2px 10px; font-size: 15px;}
.indexlocation .main .title .tag::after{ bottom: 7px; left: inherit; right: -15px;}

.indexnews .main .title  .tw{ display: flex; flex-wrap: wrap; flex-direction: column-reverse; writing-mode:horizontal-tb;}
.indexnews .main .title h2{ font-size: 20px; line-height: 28px;font-family: 'DM Serif Display', serif;}
.indexnews .main .title h2 strong{ margin: 0 0 10px 0; font-size: 45px; line-height: 45px; text-transform: uppercase;}
.indexnews .main .title .tag{ width:fit-content; margin: 0 0 50px 0; padding: 2px 50px 2px 10px; font-size: 15px;}
.indexnews .main .title .tag::after{ bottom: 7px; left: inherit; right: -15px;}
.aboutpart2 .text h2{font-family: 'DM Serif Display', serif;}
.roomlist .nav ul li a{ letter-spacing: 0;}
.roomlist ul.list li .text h2,.roomlist ul.list li .main .box .img .title h2{ letter-spacing: 0;font-family: 'DM Serif Display', serif;}
.roomlist ul.list li .text .en,.roomlist ul.list li .main .box .img .title .en{ display:  none;}
.roomlist ul.list li .text p,.roomlist ul.list li .main .box p{ font-size: 16px; line-height: 26px;}
.roomlist ul.list li .text .link a{ text-transform: uppercase;}

.roomservice .main .title .tw{ display: flex; width: 80%; margin: 0 auto; flex-wrap: wrap; flex-direction: column-reverse; writing-mode:horizontal-tb;}
.roomservice .main .title h2{ font-size: 20px; line-height: 28px;font-family: 'DM Serif Display', serif;}
.roomservice .main .title h2 strong{ margin: 0 0 10px 0; font-size: 40px; line-height: 45px; text-transform: uppercase;}
.roomservice .main .title .tag{ width:fit-content; margin: 0 0 50px 0; padding: 2px 50px 2px 10px; font-size: 15px;}
.roomservice .main .title .tag::after{ bottom: 7px; left: inherit; right: -15px;}
.roomservice .main ul{ margin: -5% 0 0 2%;}
.roomservice .main ul li strong{ width: 250px}
.roomservice .main ul li p{ width: calc(100% - 250px)}

.massagetop .main p.text { font-size: 16px; line-height: 28px;}

.massagelist ul.list li .name .tag{ padding: 30px 2px 30px 2px; writing-mode:vertical-rl; font-size: 15px; line-height: 22px; text-transform: uppercase;}
.massagelist ul.list li .name .tag span{ display: inline;}
.trafficmain{ background: linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(255,255,255,1) 40%),url(../images/bg.jpg) no-repeat center top;}
.trafficmain .main .title{ width: 250px;}
.trafficmain .main .title .tw{ display: flex; width: 90%; flex-wrap: wrap; flex-direction: column-reverse; writing-mode:horizontal-tb;}
.trafficmain .main .title h2{ font-size: 20px; line-height: 28px;font-family: 'DM Serif Display', serif;}
.trafficmain .main .title h2 strong{ margin: 0 0 10px 0; font-size: 40px; line-height: 45px; text-transform: uppercase;}
.trafficmain .main .title .tag{ width:fit-content; margin: 0 0 50px 0; padding: 2px 50px 2px 10px; font-size: 15px;}
.trafficmain .main .title .tag::after{ bottom: 7px; left: inherit; right: -15px;}
.trafficmain .main ul{ width: calc(98% - 250px);}
.trafficmain .main ul li p { font-size: 16px; line-height: 28px;}
.newsmain .name h2{ font-family: 'DM Serif Display', serif;}
.contactfrome .main ul li input[type=submit]{ text-transform: uppercase;}
.trafficmain .main ul li .img .title h2{ font-family: 'DM Serif Display', serif; letter-spacing: 0;}
@media screen and (max-width: 896px) {
    
    .indexabout .main .title h2,.aboutpart1 .main .title h2,.roomservice .main .title h2,.trafficmain .main .title h2{ font-size:20px; line-height:28px;}
    .indexabout .main .title h2 strong,.aboutpart1 .main .title h2 strong,.roomservice .main .title h2 strong,.trafficmain .main .title h2 strong{ font-size:40px; line-height: 46px;}
    .indexabout .main .title .en,.aboutpart1 .main .title .en{ width:180px; font-size:12px; line-height:19px;}
    .roomservice .main .title .en,.trafficmain .main .title .en{ margin:15px 0 0 0; font-size:12px; line-height:19px;}
    .indexservice .stitle h2{ font-size:20px; line-height:36px;}
    .indexservice .stitle h2 strong{ font-size:32px;}
    .indexservice .stitle .tw h2 strong{ font-size:38px; line-height: 44px;}
    .indexservice .stitle .en{ margin:30px auto 0 auto; font-size:12px;}
    .indexlocation .main .title h2{ font-size:20px; line-height:26px;}
    .indexlocation .main .title h2 strong{ font-size:38px;}
    .indexnews .main .title h2 { font-size:20px; line-height:26px;}
    .indexnews .main .title h2 strong{ font-size:38px;}
    
    .indexabout .main .title .tw{ height: inherit;}
    
    .indexlocation .main .title,.indexnews .main .title{ width: 190px;}
    .indexlocation .main .title .tw{ height: inherit;}
    .indexlocation .main .title h2{ font-size:20px; line-height:26px;}
    .indexlocation .main .title h2 strong{ font-size: 32px; line-height: 36px;}
    .indexlocation .main p.img{ width: calc(100% - 190px);}
    .indexnews .main ul{ width: calc(90% - 190px);}
}
@media screen and (max-width: 550px) {
    .indexabout{ padding:100px 0 200px 0; overflow:hidden; background:url(../images/bg.jpg) no-repeat 60% calc(100% - 20vh - 300px); background-size:300% auto;}
    .indexabout .main .title .tw{ width: 100%;}
    .indexabout .main .title h2 strong, .aboutpart1 .main .title h2 strong{ font-size: 40px;}
    .indexabout .main .title .tag, .aboutpart1 .main .title .tag,.indexservice .stitle .tag,.indexlocation .main .title .tag,.indexnews .main .title .tag,.roomservice .main .title .tag,.trafficmain .main .title .tag{ margin: 0 0 15px 0}
    .indexabout .more p{ text-align: left;}
    .indexservice .titlemain .main{ width: 100%;}
    .indexservice .stitle .tw h2{ font-size: 20px;}
    .indexservice .stitle .tw h2 strong,.indexlocation .main .title h2 strong,.indexnews .main .title h2 strong{ font-size: 38px;}
    .indexlocation .main .title h2{ text-align: left;}
    .roomservice .main .title .tw{ width: 100%;}
    .roomservice .main ul li p{ width: 100%;}
    .trafficmain .main .title,.trafficmain .main ul{ width: 100%;}
    .indexlocation .main .title,.indexnews .main .title{ width: 90%;}
    .indexlocation .main p.img{ width: 100%;}
    .indexnews .main ul{ width: 100%;}
    
}