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

#contents_wrap { padding-bottom:3px;}
#main_img {background: url("../../group/img/tit.jpg") no-repeat center center;background-size: cover;}
#main_img h1 { padding-top:100px;}
section { padding:50px 0 80px;}
@media screen and (max-width: 600px) {
                    #main_img h1 { padding-top:0;}
                    section { padding:50px 0 40px;}
}
/* ---------------------------------------------------
Lead_col
------------------------------------------------------ */
#lead_col { padding:0;}
#lead_col h2 { height:100%;}
#lead_col h2>span { display: block; font-size:24px;}
#lead_col h2 b { font-weight: 600;}
#lead_col h2 b span { font-size: 36px; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb; }
#lead_col .box_txt { padding-right:40px; height:360px; }
#lead_col img { right:0;top: 0; margin-right: 0;  position: relative;}
#lead_col .box_ojc { position: absolute; right:53%; top:68px; height:316px; width:475px;}
.box_ojc div {  display: block; height:316px; position: relative;}
.box_ojc img { height:316px; width: 100%;}
.box_ojc div p { background:#fff; font-size:15px;margin:-60px auto 0 auto ; line-height: 1.3; padding:6px 0; position: relative; text-align: center; width:180px; }
.slide_single .slick-dots {bottom: -40px!important;}

@media screen and (max-width: 600px) { 
                #lead_col h2>span { font-size:18px;}
                #lead_col .box_txt { padding-right:0; height:auto; }
                #lead_col .box_txt p { padding:10px 2%;}
                #lead_col .box_ojc { position: relative; right:0;top:0; height:auto; width:100%;}
                .box_ojc div,
                .box_ojc img { height:auto; width:100%;}
                .box_ojc div p {margin:0 auto ;}
                #sec1 { margin:60px auto 0 auto; width:92%;}
                #sec3 { margin:0 auto; width:92%;}
}
/* ---------------------------------------------------
Sec1
------------------------------------------------------ */
#sec1 { padding-bottom:40px;}
#sec1 ul { display: flex; flex-wrap: wrap; margin: 0 3%; min-width: 1200px; }
#sec1 li { margin:0 2px 30px 2px; width:-webkit-calc(100% / 3 - 4px); width:calc(100% / 3 - 4px);}
#sec1 li dl { padding:20px 20px 20px; text-align: center;}
#sec1 li dt { font-size:28px;}
#sec1 li dt span.wbr { display: block;}
#sec1 li dd { padding:20px 20px 0 ; text-align: left;}  
#sec1 li:nth-of-type(n+4) dd{ text-align: left;}

@media screen and (max-width: 600px) {
                #sec1 ul { display: block;margin: 0; min-width:0; }
                #sec1 li { margin:0 0 30px 0; width:100%;}
                #sec1 li dl { padding:10px 5% 20px 5%; text-align: center;}
                #sec1 li dt { font-size:22px;}
                #sec1 li dt span.wbr { margin-bottom:-7px;} 
                #sec1 li dd { padding:10px 0 0 0;}
}
/* ---------------------------------------------------
Sec2
------------------------------------------------------ */
#sec2 { background:rgba(74,52,39,.1); margin:0 2%;}
#sec2 ul { display: flex; flex-wrap: wrap; margin:30px auto 0 auto; min-width: 1200px; max-width: 1400px; box-sizing: border-box;}
#sec2 li { font-size:20px; margin:10px ; text-align: center; width:-webkit-calc(100% / 3 - 20px); width:calc(100% / 3 - 20px);}
#sec2 li a:hover{text-decoration: underline;}
#sec2 li a:hover img { border-radius: 15px;}
#sec2 li a small { font-size:14px;}
#sec2 li img { margin-bottom:10px;}

@media screen and (max-width: 600px) {
                #sec2 { margin:0 20px;}
                #sec2 h2 { margin-top:0; }
                #sec2 ul { display: block; margin: 0 auto; min-width:0; max-width:90% }
                #sec2 li { margin:0 0 30px 0; width:100%;}
                #sec2 li a small,
                #sec2 li a .wbr{ display: block;}
                #sec2 li img { display: block;}
}

/* ---------------------------------------------------
Sec3
------------------------------------------------------ */
#sec3 dl { display: flex; flex-wrap: wrap; margin:50px auto 0 auto; width:1000px;}
#sec3 dt,
#sec3 dd { border-bottom:1px solid rgba(70,35,13,.5) ;font-size:20px; padding:13px; box-sizing:border-box;width:50%; }
#sec3 dt p,
#sec3 dt small,
#sec3 dt span { font-size:14px;}
#sec3 dd span { font-size:12px;}
#sec3 dd small { font-size:13px;}
#sec3 dd p{ font-size:15px; padding:10px 1%; text-align: left;}
#sec3 dd p b { font-weight:600; display: block;}
#sec3 dd>b { color: rgba(205,55,31,1.00); display: block;}

@media screen and (max-width: 600px) {
                #sec3 dl {margin:0 auto; width:90%;}
                #sec3 dt {border-bottom:0; width:100%;}
                #sec3 dt span,
                #sec3 dt .wbr{ display: block;}
                #sec3 dd { text-align: right;width:100%;}
                #sec3 dd span.wbr { display: block;}
}


/* ---------------------------------------------------
Sec4
------------------------------------------------------ */
#sec4 {padding-top:0; background:url("../../room/img/bg_01.jpg");}
#sec4 h2 { background: url(../img/btn_bg1.png) #4e8d71; color:#fff; font-size:30px; line-height: 1.8; padding:10px ; position: relative; border:1px solid;}
#sec4 h2 span.wbr {color:#fff; font-size:30px;}
#sec4 h2::after {content:"▼"; color:#6AA627; font-size:30px; position: absolute; left:50%; bottom:20px; margin-left:0; height:0; width:0;}
#sec4 .sup { font-size:20px; margin:50px auto 30px auto ; text-align: center; width:70%;}
#sec4 .sup p { margin-bottom:20px;}
#sec4 .note { padding: 35px 0; margin:0 auto; width:900px; text-align: center;}
#sec4 .note>p { margin-bottom:20px;}
#sec4 .note>p:first-of-type { font-size:22px; font-weight: bold;}
#sec4 .note dl { border-top:1px solid rgba(70,35,13,.5);border-bottom:1px solid rgba(70,35,13,.5); margin:0 3%; padding:30px 0;}
#sec4 .note dd ul { display: flex;}
#sec4 .note dd li { margin: 10px 1%; width:48%;}
#sec4 .note dd li b { font-size:50px;}
#sec4 h3 {color:#b2a9a5; display: block; font-size:75px; font-family: garamond-premier-pro, serif; font-weight: 400; font-style: normal; font-variant-caps: small-caps; 
                margin-top:50px;line-height: 1; text-align: center; }

@media screen and (max-width: 600px) {
                #sec4 h2,
                #sec4 h2 span.wbr { color:#fff; display: block; font-size:24px; margin:0 -4%;}
                #sec4 .sup { font-size:16px; margin:20px 10% ; text-align: left; width:80%;}
                #sec4 .note { padding: 20px 10%; text-align:left; width:100%; box-sizing: border-box;}
                #sec4 .note>p:first-of-type { font-size:18px; text-align: center;}
                #sec4 .note dl { margin:0;}
                #sec4 .note dt { font-size:14px; letter-spacing: 0; text-align: center;}
                #sec4 .note dd { text-align: center;}
                #sec4 .note dd ul { display:block;}
                #sec4 .note dd li { margin: 10px 1%; width:98%;}
                #sec4 .note dd li b { font-size:30px;}
                #sec4 h3 { font-size:50px;}
}

form { }
form div { box-sizing: border-box;}
form#mailformpro dl { display: flex; flex-wrap:wrap; margin: 0 auto; width:900px; }
form#mailformpro dl dt { font-size:15px!important; width:22%!important; float:none; }
form#mailformpro dl dd { font-size:15px!important; width:74%!important; padding: 10px 0 10px 2%!important; }
form#mailformpro dl small { font-size:12px;}

input[type="text"], 
input[type="email"],
input[type="tel"], 
input[type="date"],
select,
button, 
label,
textarea { background: #fff; /*box-shadow: 0px 0px 5px #CCC inset;*/ border: 1px solid rgba(70,35,13,.4);border-radius: 4px; font-size: 15px; height: 37px!important; outline: none; padding: 0 5px;
                    /*width: 100%; min-width: 100%;*/ word-break: break-all; white-space: normal;}
label {background:none; border:0!important;}
textarea.style1 { height:37px!important;}
textarea.style3 { height:70px!important;}
select { width: auto; min-width: 0;}
input[type="text"].box_text { width: auto; min-width: 0;}
.mfp_rows .mfp_col5 { width:48%; float: left; margin-right:2%;}
.mfp_buttons { margin:0 auto; width:250px;}
.mfp_buttons button{ background: #46230d; border: 1px solid #46230d; border-radius: 0; color: #fff; cursor: pointer; display: block; font-size: 15px; font-family: inherit;
                    height: 50px;/*line-height: 48px;*/outline: none;text-align: center; text-shadow: none!important; width: 100%;
                    -webkit-appearance: none;-moz-appearance: none;appearance: none;
                    -webkit-transition: opacity 0.8s ease;transition: opacity 0.8s ease;}
.mfp_buttons button:hover { background: #907071;border: 1px solid #907071; }

@media screen and (max-width: 600px) {
                form { margin:0 auto;width:92%;}
                form#mailformpro dl { width:90%; }
                form#mailformpro dl dt { width:100%!important; padding-top:10px!important;}
                form#mailformpro dl dd { width:100%!important; padding: 0 0 10px 0!important; }
                form#mailformpro dl dd small.wbr {display: block;}
                input[type="text"]:not([class]) , 
                input[type="email"],
                input[type="tel"], 
                select,
                button, 
                textarea{ width:90%;}
                
                form#mailformpro label.check { display: block; white-space: normal; line-height:1.5; padding:8px; width:92%;}
                .mfp_rows .mfp_col5 { width:98%; float: none; }
                form#mailformpro label { white-space:normal!important; padding:10px 3px;}
}