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

#main_img{ background: url("../../room/img/tit.jpg") no-repeat center center; background-size: cover; }
#contents_wrap #breadcrumb {background:url("../img/pager01.jpg");}
#cnav li { margin:0 15px 30px; line-height: 1.3; }
#cnav li a>span {text-shadow: 3px 4px 6px rgb(61 70 70);}
#cnav li a>span .wbr { display: block;}
#cnav li a>span b { font-size:20px; line-height: 1;}
#lead_col { padding-bottom:30px;}


@media screen and (max-width: 600px) {
                    #cnav { flex-direction: column; margin-top:60px; }
                    #cnav li { border-bottom:1px solid #ccc; margin:0 0 5px 0; line-height: 1.8; width:100%; }
                    #cnav li img { display: none; }
                    #cnav li a { padding:10px 0;}
                    #cnav li a>span { color:#2a2b2b; font-size:16px; bottom:0; position: relative; text-align: left;text-shadow:none; padding-left:5%; width:95%; }
                    #cnav li a>span::before{ content:none; }
                    #cnav li a>span::after {left: 97%; bottom:50%;} 
                    #cnav li a>span .wbr { display: inline-block;}
                    #cnav li a>span b { font-size:16px;}
                    
}
@media screen and (max-width: 321px) {
                    #lead_col h2,
                    #lead_col h2 span:not([class]){font-size:16px; letter-spacing: 0;}
                    #lead_col .copy { text-align: center;}
                    #lead_col .copy .wbr { display: block;}
}

/*---------------------------------------------------
common
------------------------------------------------------ */
section { padding:40px 0;}
section:not(#lead_col) h2 { font-size:42px; margin:50px auto 30px ;}
section:not(#lead_col) h2 b {font-size:34px;}
section:not(#lead_col) h2::before {background: radial-gradient(circle farthest-side, #2a2b2b, #2a2b2b 30%, transparent 30%, transparent);
                      background-size: 8px 8px; 
                      content: ""; display: inline-block; height: 8px; position: absolute; top:-50px; left:50%; margin-left:-31px; width: 63px;
                      -webkit-transform: rotate(90deg);transform: rotate(90deg);}
.inner::after { content:""; clear:both; display: block; height:0;}
.box_ojc{ min-width: 1200px; width:100%; max-width:1400px; margin:0 auto 60px auto !important;}
.box_txt {margin:0 auto; width:525px;}
.box_txt h3 { font-size:24px; margin-bottom:45px; text-align: center;}
.box_txt h3 span:not(.wbr) { font-size:14px;display: block; }
.box_txt h3 span.wbr {display: block;}
.box_txt p { margin-bottom:10px;}
img.sub_img { float:left; width:590px;}
.data_col { font-size:18px; display: flex; flex-wrap: wrap; margin:80px auto 0; width:525px;}
.data_col dt,
.data_col dd { border-bottom:1px solid rgba(74,74,75,.4); padding:5px; box-sizing: border-box;}
.data_col dt { text-align: center; width:25%;}
.data_col dd { width:75%;}
.info_col { border:1px solid rgba(74,74,75,.4); clear:both; display: flex; margin:65px auto; padding:25px; width:1080px; box-sizing: border-box;}
.info_col dt.acc_tit { display: block; font-size:20px; padding-top:2.5em; width:27%; vertical-align: middle;}
.info_col dd { width:73%; }
.info_col dd ul { clear:both; display: flex; flex-wrap: wrap;}
.info_col dd li { padding:10px 10px 10px 0; width:18%; box-sizing: border-box;}
.info_col dd li.w_li{ width:23%; }
.info_col dd li::before { content:"・"; display: inline-block;}
.r_reserve { background:#3d3e3f; color:#efe9e0; display: block; margin:40px auto; padding:18px 0; text-align: center; width:520px; position: relative; z-index: 1;}
.r_reserve::after { content: ''; background: #efe9e0; border:1px solid #D5D3D1; height: 100%; width: 100%; box-sizing: border-box;
                    position: absolute; top: 0; left: 0; 
                    transform: scale(0, 1); transform-origin: left top; transition: .4s cubic-bezier(0.45, 0, 0.55, 1); z-index: -1;}
.r_reserve:hover {color: #2a2b2b; border:0;}
.r_reserve:hover::after { transform: scale(1, 1);}

@media screen and (max-width: 600px) {
                    section:not(#lead_col) h2 { font-size:28px; margin:35px auto 10px ; width:96%;}
                    section:not(#lead_col) h2 b {font-size:22px; display: block;}
                    section:not(#lead_col) h2 .wbr { display: block;}
                    .box_ojc{ min-width: 100%; width:100%; max-width:100%; margin:0 auto 30px auto !important;}
                    .box_txt { margin:0 auto; width:80%;}
                    .box_txt h3 { font-size:20px; margin:0 0 20px 0; width:100%; }
                    .box_txt h3 span:not(.wbr) { font-size:12px;}
                    .box_txt h3 span.wbr {display: inline-block;}
                    img.sub_img { float:none; margin:0  10%; width:80%;}
                    .data_col { font-size:16px; flex-direction: column; margin:40px auto 0; width:80%;}
                    .data_col dt { background: rgba(184,132,2,.1); border:0; text-align: left; width:100%;}
                    .data_col dd { border:0; width:100%;}
                    .info_col { border:1px solid rgba(74,74,75,.4); display: block; margin:35px auto; padding:15px; width:80%; }
                    .info_col dt.acc_tit { border:0; font-size:18px; margin:0 auto ; padding-top:0; width:100%; }
                    .info_col dt.acc_tit.active { margin-bottom:15px;}
                    .info_col dd { width:100%; }
                    .info_col dd ul { }
                    .info_col dd li { padding:7px 0 7px 0; width:50%;}
                    .info_col dd li.w_li{ width:100%;}
                    .r_reserve { width:80%; }
}
@media screen and (max-width: 321px) {
                    .info_col {width:80%;}
                    .info_col dd li { width:100%;}
                    .info_col dd li:nth-of-type(5n+1),
                    .info_col dd li:nth-of-type(5n+2){ width:100%;}
}


/*---------------------------------------------------
sction
------------------------------------------------------ */
#sec1 .inner,
#sec2 .inner,
#sec4 .inner { padding-top:50px;}
#sec2,
#sec4,
#sec6,
#sec8{ background:url("../img/pager01.jpg");}

#sec1 .inner,
#sec2 .inner,
#sec4 .inner,
#sec6 .inner,
#sec7 .inner,
#sec8 .inner{ display: flex; align-items: flex-start;}

img.sub_img+.box_txt { float:right;}
img.sub_img+.box_txt+.data_col { float:right;}

div.sub_img { display: flex; margin:0 auto; width:1200px;}
div.sub_img img { width:590px;}
div.sub_img img:nth-of-type(1) { margin-right:80px;}

@media screen and (max-width: 600px) {
                    #sec3 .box_txt,
                    #sec5 .box_txt{ padding-top:30px;}
                    #sec1 .inner,
                    #sec2 .inner,
                    #sec4 .inner,
                    #sec6 .inner,
                    #sec7 .inner,
                    #sec8 .inner{ flex-direction: column; padding-top:30px;}
                    img.sub_img+.box_txt { float:none;}
                    img.sub_img+.box_txt+.data_col { float:none;}
                    div.sub_img { flex-direction: column; margin:0 auto; width:80%;}
                    div.sub_img img {margin-bottom:5px; width:100%;}
                    div.sub_img img:nth-of-type(1) { margin-right:0;}
}