@charset "UTF-8";
/* CSS Document */

#main_img{ background: url("../../room/img/tit.jpg") no-repeat center center;background-size: cover;}
#lead_col { min-height:450px;}
#lead_col h2 { margin-right:45px; font-weight: 600;}
#lead_col h2 span { display: block;}

section { position: relative;}

@media screen and (max-width: 600px) {
                    #lead_col h2 { margin-right:0;}
}

/* ---------------------------------------------------
Index
------------------------------------------------------ */
.index #sec1 { margin-top:80px; width:100%;}
.index #sec1 h2 { line-height: 1.5; padding-bottom:0;}
.index #sec1 h2::after{content:none;}
.index #sec1>ul>li { display: flex; position: relative; min-height:500px;}
.index #sec1>ul>li:nth-of-type(even) { -webkit-box-direction: reverse;-ms-flex-direction: row-reverse; flex-direction: row-reverse;}
.index #sec1>ul>li .img { position: absolute; left:50%; top:0; width: 740px;}
.index #sec1 li div { position: absolute; right:50%; top:0; width:600px;}
.index #sec1>ul>li:nth-of-type(even) .img {left:auto; right:50%; top:0; }
.index #sec1>ul>li:nth-of-type(even) div { left:50%; top:0; }
.index #sec1 li div h2 { font-size:40px; text-align: center; }
.index #sec1 li div h2 b { display: inline-block;font-weight:600;}
.index #sec1 li div h2 b::first-letter{ color:#78a325;}
.index #sec1 li div h2 span.en { color:#b2a9a5; display: block; font-size:45px; font-weight: normal; font-variant-caps:small-caps;line-height: 1; }
.index #sec1 li div ul { margin-left:100px; padding-top:30px;}
.index #sec1 li div ul li { margin-bottom:15px;}
.index #sec1 li div ul li a{ display: block; padding:5px; position: relative; }
.index #sec1 li div ul li a::before,
.index #sec1 li div ul li a::after {background:rgba(70,35,13,.7); content:""; display: block; position: absolute; transition: .7s;}
.index #sec1 li div ul li a::before { bottom:0; left:0; height:1px; width:310px;}
.index #sec1 li div ul li a::after { bottom:5px; left:298px; height:1px; width:15px; transform: rotate(45deg);}
.index #sec1 li div ul li a:hover::before { bottom:0; left:10px; height:1px; width:310px;}
.index #sec1 li div ul li a:hover::after { bottom:5px; left:308px; height:1px; width:15px; transform: rotate(45deg);}
.index #sec1>ul>li:nth-of-type(1) h2 + p { text-align: center;}
.index #sec1>ul>li:nth-of-type(1) h2 + p span { border:1px solid; display: inline-block; margin-right:10px; padding:1px 10px;}
.index #sec1>ul>li:nth-of-type(1) li:nth-of-type(3) a::before,
.index #sec1>ul>li:nth-of-type(1) li:nth-of-type(4) a::before{width:440px;}
.index #sec1>ul>li:nth-of-type(1) li:nth-of-type(3) a::after,
.index #sec1>ul>li:nth-of-type(1) li:nth-of-type(4) a::after{left:428px;}
.index #sec1>ul>li:nth-of-type(1) li:nth-of-type(3) a:hover::after,
.index #sec1>ul>li:nth-of-type(1) li:nth-of-type(4) a:hover::after{left:438px;} 
@media screen and (max-width: 600px) {
                    .index #sec1>ul>li { display: block; height:auto; min-height:0; padding:15px 0 30px 0; margin:30px auto; width: 90%;}
                    .index #sec1>ul>li .img { position:relative; left:0; top:0; margin:20px auto; width:100%;}
                    .index #sec1>ul>li:nth-of-type(even) .img {left:0; right:0; top:0; }
                    .index #sec1>ul>li:nth-of-type(even) div { left:0; top:0; }
                    .index #sec1 li div { position: relative; right:0; top:0; width:100%;}
                    .index #sec1 li div ul { margin-left:0; padding-top:0; text-align: center;}
                    .index #sec1 li div ul li a::before {left:50%; margin-left:-110px; width:220px;}
                    .index #sec1 li div ul li a::after { left:50%; margin-left:98px;}
                    .index #sec1 li div ul li a:hover::before { left:50%; margin-left:-100px; width:220px;}
                    .index #sec1 li div ul li a:hover::after {left:50%; margin-left:108px;}
                    .index #sec1>ul>li:nth-of-type(1) h2 + p { margin:-15px 0 30px 0;}
                    .index #sec1>ul>li:nth-of-type(1) li:nth-of-type(3) a::before,
                    .index #sec1>ul>li:nth-of-type(1) li:nth-of-type(4) a::before{width:220px;}
                    .index #sec1>ul>li:nth-of-type(1) li:nth-of-type(3) a::after,
                    .index #sec1>ul>li:nth-of-type(1) li:nth-of-type(4) a::after{left:50%;}
                    .index #sec1>ul>li:nth-of-type(1) li:nth-of-type(3) a:hover::after,
                    .index #sec1>ul>li:nth-of-type(1) li:nth-of-type(4) a:hover::after{left:50%;}
}

/* ---------------------------------------------------
Cnav
------------------------------------------------------ */
.room01 #cn_01 a,
.room02 #cn_02 a,
.room03 #cn_03 a,
.room04 #cn_04 a {background:rgba(70,35,13,.1);}
.room01 #cn_01 a::after,
.room02 #cn_02 a::after,
.room03 #cn_03 a::after,
.room04 #cn_04 a::after {transform: rotate(-45deg);}
.room01 #cn_01 a:hover::after,
.room02 #cn_02 a:hover::after,
.room03 #cn_03 a:hover::after,
.room04 #cn_04 a:hover::after {right:20px;}
@media screen and (max-width: 600px) {
                    #cnav li { font-size:14px;}
                    #cnav li#cn_01 a::after,
                    #cnav li#cn_01 a:hover::after{right:5px;}
}


/* ---------------------------------------------------
content
------------------------------------------------------ */
.content main>h2 { font-size:45px; font-weight: 400; line-height: 1.2; margin:65px auto; text-align: center;}
.content main>h2 span.en { color:#b2a9a5; font-size:70px;}
.content main>h2 + p { text-align: center;margin:0 auto; padding:50px 0; width:80%; max-width:1000px;}
.content section { padding:30px 0 0;}
.content section h3 { font-size:24px; margin-bottom:30px; text-align: center;}
.content section h3 span.r_name { background:rgba(120,163,37,.4); display: block; font-size:75px; line-height: 95px; height:95px; margin:0 auto 20px; text-align: center; width:95px;}
.content section .box_txt { background:#fff; padding: 30px 0;}
.content section .box_txt dl * { box-sizing: border-box;}
.content section .box_txt dl { margin:0 auto; display: flex; flex-wrap: wrap; width:1050px;}
.content section .box_txt dt { border-bottom:1px solid #ada7a7; border-right:1px solid #ada7a7; background:rgba(208,205,205,.35); 
                    padding:5px 0; text-align: center; width:12%;}
.content section .box_txt dd { border-bottom:1px solid #ada7a7; padding:5px 5px 5px 8px; width:88%;}
.content section .box_txt dd img{ margin:0 10px; height:38px; width:auto;}
.content section .r_btn a { background:rgba(65,33,15,.1); border:1px solid #ada7a7; display: block; margin: 50px auto 50px; padding:20px 0; text-align: center; width:420px;}
.content section .r_btn a:hover { background:rgba(65,33,15,0);}
@media screen and (max-width: 600px) {
                    .content main>h2 { font-size:30px;}
                    .content main>h2 span.en { font-size:50px; line-height: 1;}
                    .content main>h2 + p { text-align: left;}
                    .content section { margin:0 auto;width:90%;}
                    .content section h3 { font-size:20px;}
                    .content section h3 span.r_name { font-size:50px; line-height: 65px; height:65px; width:65px;}
                    .content section .box_txt dl{ width:100%;}
                    .content section .box_txt dt { border:0;width:100%;}
                    .content section .box_txt dd { border:0; width:100%;}
                    .content section .r_btn a { padding:15px 0;width:260px;}
}

/*----------room01*/
.content.room01 main>h2 { margin-bottom:0;}
.room01 #note { background: url("../../room/img/bg_01.jpg")no-repeat; background-size: cover; padding:0;margin:0 auto; width:90%;}
.room01 #note .inner { margin:0 auto; position: relative; width:1100px;}
.room01 #note .inner::after { content:""; clear:both; display: block; height:0;}
.room01 #note h3 {float:left; padding:90px 0 0 0; margin:0 0 0 30px; font-size:24px; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; 
                 position: relative; height:300px; line-height: 1; text-align: left; width:1em; }
.room01 #note h3 span.en{ font-size:18px; margin-top:20px;}
.room01 #note h3::before { content:""; display: block; height:85px; width:1px; background:#46230d; position: absolute; left:50%; top:0;}
.room01 #note .inner > p { float:right; margin:80px 0; width:900px;}
.room01 #note dl { float:right; display: flex; flex-wrap:wrap; margin:0 0 30px; width:900px;}
.room01 #note dt,
.room01 #note dd { box-sizing: border-box; border-bottom: 1px solid rgba(74,52,39,.3); padding:10px;}
.room01 #note dt { border-right: 1px solid rgba(74,52,39,.3);text-align: center; width:20%;}
.room01 #note dd { width:80%;}

@media screen and (max-width: 600px) {
.room01 #note .inner { padding-bottom:30px; width:90%;}
.room01 #note .inner > p { float:none; margin:40px 0; width:90%;}
.room01 #note h3 { float:none; margin:0 5%; height:auto; padding:15px 0 0 40px; width:90%;box-sizing: border-box;
                     -webkit-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb;}
.room01 #note h3::before {left:0; }
.room01 #note dl {border-top: 1px solid rgba(74,52,39,.3); float:none; display:block; margin:0 auto 30px; padding:0; width:90%;}
.room01 #note dt{ border-right:0;width:100%;}
.room01 #note dd{ width:100%;}
}

/*----------room02*/
.content.room02 .box_ojc { margin: 0 auto !important; min-width: 1200px; max-width: 1300px;}
@media screen and (max-width: 600px) {
.content.room02 .box_ojc { min-width: 0; max-width:100%; }
}

/* ---------------------------------------------------
font
------------------------------------------------------ */
.index #sec1 li div h2 span.en,
.index #sec1 li div ul li,
.content main>h2 span.en,
.content section h3 span.r_name,
.room01 #note h3 span.en{display: block; font-family: garamond-premier-pro, serif; font-weight: 400; font-style: normal;font-variant-caps: small-caps;}