@charset "utf-8";

/* =========================================================================== */
/* アニメーション用 */
/* =========================================================================== */
@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0,60px,0)}to{opacity:1;transform:translateZ(0)}}
@keyframes fadeInUp2{0%{opacity:0;transform:translate3d(0,-60px,0)}to{opacity:1;transform:translateZ(0)}}
.fadeup{animation-duration:1.5s;animation-fill-mode:both;opacity:0.01;}
.fadeup2{animation-duration:1.5s;animation-delay:.5s;animation-fill-mode:both;opacity:0.01;}
.fadeup3{animation-duration:1.5s;animation-fill-mode:both;opacity:0.01;}
.fadeup.animated{animation-name:fadeInUp;}
.fadeup2.animated{animation-name:fadeInUp;}
.fadeup3.animated{animation-name:fadeInUp2;}



img { width:100%;}
.title { background: url(/img/dayuse/title_bk.jpg) center no-repeat; background-size: cover;text-shadow: 0px 0px 6px rgba(51, 51, 51, 0.8);}

.title span {
    margin: 0; margin-bottom: 0 !important;
    padding: 0;
    text-shadow: 0px 0px 6px rgba(51, 51, 51, 0.8);
}
.title .headline {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 0;
    text-align: center;
    /* -webkit-transform: translateY(-50%);
    transform: translateY(-50%); */
    width: 100%;
}
.headline span::after {
    content: none;
}

.slick-slide{outline:none;}
h4{ font-size:24px; color:#b78554; text-align: center; margin:25px 0 20px; }
h4 + p{ margin: 30px auto; }
article.room { width: 95%; margin:20px auto 0;font-size:16px; line-height: 2em; position:relative;}
article.room h5{ font-size:20px; color:#000;text-align:left;flex:1;}
article.room h5 small{font-size:16px;}

article.room .txt.flex {display: flex; justify-content: center; align-items: center;}
article.room .plan_cat { font-size:16px; color:#000;text-align:center;flex:1; line-height: 1.7; margin-bottom: 0;}
article.room .plan_cat span { font-size:16px; color:#000;text-align:center;flex:1; font-weight: 400;}
article.room .time { color:#000;text-align:center;flex:1; line-height: 1.7;}
article.room .time dt { font-size:16px; font-weight: bold;}
article.room .time dd { font-size:16px;}

article.room .more_btn { padding: 10px;}
article.room .txt{margin-top:15px;position:relative;display:flex;align-items:center;}


article.service { width: 100%; margin-top: 20px; margin-bottom: 60px; font-size:16px; line-height: 2em; }
article.service:last-of-type { margin-bottom: 0; }
article.service h4{ font-size:24px; color:#b78554; text-align: center; margin:25px 0 20px; }
article.service .txt {margin-bottom:20px;}
article.service .slide {}
article.service .slide-img{margin-bottom:0px;}
article.service .image { width: 100%; margin-top:40px; }
article.service .image li { width: 290px; float:left; margin-right:15px;}
article.service .image li:nth-of-type(3n) { margin-right:0;}



.photo_list{
    margin: 20px auto 0;
}
.photo_list p {
    width: 49%;
    float: left;
    text-align: center;
    box-sizing: border-box;
    margin-bottom: 2%;
    position: relative;
    margin-right: 2%;
}
.photo_list p:nth-child(even){
    margin-right: 0;
}
.photo_list p::before{
    content: "";
    display: block;
    /* padding-top: 60%; */
}
.photo_list p a{
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.photo_list p img{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    -moz-object-fit: cover;
    -ms-object-fit: cover;
    -webkit-object-fit: cover;
    object-fit: cover;
}
.photo_list p span {
    padding: 10px 5px;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    background: rgba(255,255,255,.5);
    font-size: 14px;
    line-height: 1.4;
}

.no-pc{display:none;}

.local_box + .local_box{margin-top:40px;}

.room_about { padding: 10px 40px; font-size: 14px;}
.room_about dl { width: 100%; border-bottom: solid 1px #3d3d3d; padding: 20px 0;}
.room_about dl:last-of-type { border-bottom: none;}
.room_about dl dt { width:25%; margin-right:5%; float:left; font-weight:bold;}
.room_about dl dd { width:70%; float:left;}

/* .room_wrap{ padding-top: 180px; margin-top: -180px; } */

.intro {
	background: url(/img/top/bk_point07.png) 0 0 no-repeat, url(/img/top/bk_point01.png) 100% 160px no-repeat;
}

.room_wrap .image.pet-icon {position: relative;}
.room_wrap .image.pet-icon:before {content: "";position: absolute;bottom: 12px;left: 15px;width: 74px;height: 74px;background: url(/img/room/pet-icon.png) center / cover no-repeat;z-index: 1;}
.room_wrap .btn_wrap span{display: block;}
.room_wrap .btn_wrap span + span { margin-top: 10px;}
.room_wrap .btn_wrap .pet_bnr{width:100%;max-width:360px;margin:20px auto}
.room_wrap .btn_wrap .pet_bnr a{transition:.3s}
.room_wrap .btn_wrap .pet_bnr a:hover{opacity:.7}

.pagenav_room{margin-top:40px;margin-bottom:-30px;display:flex;}
.pagenav_room > li{width:25%;text-align:center;min-height:98px;background:no-repeat center center;background-size:cover;display:flex;align-items:center;position:relative;margin-right:1px;}
.pagenav_room > li::before{content:"";display:block;width:100%;height:100%;background:#000;opacity:0.45;position:absolute;left:0;top:0;z-index:1;transition:.2s;}
.pagenav_room > li:hover::before{background:#b78554;opacity:0.8;}
.pagenav_room > li a{line-height:1.5;display:block;width:100%;font-size:18px;position:relative;padding:80px 5px;position:relative;z-index:2;color:#fff;}
.pagenav_room > li a::after{content:"";display:block;width:10px;height:10px;border-right:3px solid #b78554;border-bottom:3px solid #b78554;transform:rotate(45deg);position:absolute;left:50%;bottom:10px;margin-left:-5px;transition:.3s;}
.pagenav_room > li a:hover::after{bottom:5px;}

.pagenav_room > li:first-child{background-image:url(/img/room/room01_img01.jpg);}
.pagenav_room > li:nth-child(2){background-image:url(/img/room/room03_img01.jpg);}
.pagenav_room > li:nth-child(3){background-image:url(/img/room/room09_img01.jpg);}
.pagenav_room > li:nth-child(4){background-image:url(/img/room/room07_img01.jpg);}

.slick-list{overflow: visible;}
.slick-track .slick-list{overflow: hidden;}
button.room-prev { content: ""; width: 40px; height: 40px; background: url(/img/common/maru_prev.png) no-repeat;background-size:100% auto; position: absolute; top: 50%; left: -20px; z-index: 1; -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); transform: translate(0, -50%); }
button.room-next { content: ""; width: 40px; height: 40px; background: url(/img/common/maru_next.png) no-repeat;background-size:100% auto; position: absolute; top: 50%; right: -20px; z-index: 1; -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); transform: translate(0, -50%); }
button.room-prev::after{content:"";}
button.room-next::after{content:"";}
@media print, screen and (min-width: 640px) and (max-width: 1100px) {
button#room-prev { width: 30px; height: 30px; background: url(/img/common/maru_prev.png) 0 0 / 100% no-repeat; left: -15px; }
button#room-next { width: 30px; height: 30px; background: url(/img/common/maru_next.png) 0 0 / 100% no-repeat; right: -15px; }
}

@media print, screen and (max-width: 980px) {
article { width:100%;/*margin-top:-60px; padding-top:60px;*/ }
article .more_btn { padding: 10px 50px; box-sizing: border-box; width: auto; font-size: 16px; }
article h5{font-size: 18px;text-align:center;margin-bottom:10px;}
article .txt{display:block;}
.room_wrap .btn_wrap .more_btn { width: 100%; max-width: 340px;}
}

@media print, screen and (max-width: 640px) {
.intro {
background:
			url(/img/top/bk_point05.png) 125% 250px / 60% no-repeat,
			url(/img/top/bk_point07.png) 0 0 / 80% no-repeat;
}
.no-pc{display:block;}
article { width: 100%;}
.intro .block_inner { margin: 30px auto 0;}
button#room-prev { width: 40px; height: 40px; background: url(/img/common/maru_prev.png) 0 0 / 100% no-repeat; left: -15px; }
button#room-next { width: 40px; height: 40px; background: url(/img/common/maru_next.png) 0 0 / 100% no-repeat; right: -15px; }
.room_about dl dt { width: 100%; margin-right: 0; margin-bottom: 10px; float: none; }
.room_about dl dd { width: 100%; float: none; }
article .more_btn { padding: 10px 40px; box-sizing: border-box; width: auto; font-size: 16px; }
article .txt small{display:block;}

.pagenav_room{margin-bottom:0;flex-wrap:wrap;}
.pagenav_room > li{width:100%;margin-right:0;margin-bottom:1px;min-height:1px;background:none!important;border-bottom:2px solid #b78554;}
.pagenav_room > li::before{display:none;}
.pagenav_room > li:nth-child(even){margin-right:0;}
.pagenav_room > li a{font-size:15px;text-align:left;padding:15px 25px 15px 15px;box-sizing:border-box;color:#000;}
.pagenav_room > li a::after{width:6px;height:6px;left:auto;bottom:auto;right:15px;top:50%;margin-top:-5px;border-width:2px;}
.pagenav_room > li br{display:none;}
}

/* 固定ヘッダの分アンカーリンク位置調整 */
/*
article {margin-top:-90px; padding-top:90px; }
article + article{padding-top:120px;}
*/






#block-place{background: #fff;}
#block-place .block_inner{position:relative;z-index:2;height:100%;}
#block-place .block_inner::after{content:"";display:block;clear:both;}
#block-place .block-ttl br{display:none;}
#block-place .feature-btn{font-size:22px;color:#b88550;position:relative;display:inline-block;padding-top:15px;padding-bottom:15px;font-weight:bold;}
#block-place .feature-btn::before{content:"";display:block;width:0;height:2px;background:#b88550;position:absolute;bottom:0;left:0;transition:.3s;}
#block-place .feature-btn::after{content:"";display:inline-block;width:34px;height:9px;background:url(/img/top/arrow03.png) no-repeat center center;background-size:100% auto;vertical-align:6px;margin-right:5px;margin-left:20px;transition:.3s;}
#block-place .feature-btn:hover::before{width:100%;transition:.3s;}
#block-place .feature-btn:hover::after{margin-left:25px;margin-right:0;transition:.3s;}
#block-place .txt-block .txt{font-size:22px;font-weight:bold;margin-bottom:35px;line-height:1.8;}
#block-place .txt-block .detail{margin-bottom:35px;line-height:2;}
#block-place .img{box-shadow:0 1px 16px rgba(0,0,0,0.22);display:inline-block;}

/* room */
#block-place .feature-room{position:relative;}
#block-place .feature-room::before{content:"";display:block;width:52%;height:100%;position:absolute;top:0;left:0;z-index:0;background:url(/img/dayuse/feature_back01.jpg) no-repeat left top; background-size:cover; z-index:0;}
#block-place .feature-room::after{content:"";display:block;width:100%;height:100%;position:absolute;top:0;right:0;z-index:1;background:#fff;}
#block-place .feature-room.animated::after{width:0;transition:2s ease-out;}
#block-place .feature-room .img01{position:absolute;top:10%;left:0;max-width:48%;z-index:3;}
#block-place .feature-room .img02{position:absolute;top:50.5%;left:11%;max-width:41%;z-index:5;}
#block-place .feature-room .txt-block{max-width:400px;float:right;margin:160px 0 160px;}

/* hotspring */
#block-place .feature-hotspring{position:relative; margin-top: 40px;}
#block-place .feature-hotspring::before{content:"";display:block;width:52%;height:100%;position:absolute;top:0;right:0;z-index:0;background:url(/img/dayuse/feature_back02.jpg) no-repeat left top;background-size:cover;z-index:0;}
#block-place .feature-hotspring::after{content:"";display:block;width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;background:#fff;}
#block-place .feature-hotspring.animated::after{width:0;transition:2s ease-out;}
#block-place .feature-hotspring .img01{position:absolute;top:10%;right:0;max-width:48%;}
#block-place .feature-hotspring .img02{position:absolute;;top:50.5%;right:11%;max-width:41%;}
#block-place .feature-hotspring .txt-block{max-width:400px;float: left; margin:160px 0 160px;}
#block-place .feature-hotspring .btn-block{text-align:center;margin-top:-3%;}
#block-place .feature-hotspring .btn-block a{margin:0 30px;}

/* foods */
#block-place .feature-foods{position:relative; margin-top: 40px;}
#block-place .feature-foods::before{content:"";display:block;width:52%;height:100%;position:absolute;top:0;left:0;z-index:0;background:url(/img/dayuse/feature_back03.jpg) no-repeat left top;background-size:cover;z-index:0;}
#block-place .feature-foods::after{content:"";display:block;width:100%;height:100%;position:absolute;top:0;right:0;z-index:1;background:#fff;}
#block-place .feature-foods.animated::after{width:0;transition:2s ease-out;}
#block-place .feature-foods .img01{position:absolute;top:10%;left:0;max-width:48%;z-index:3;}
#block-place .feature-foods .img02{position:absolute;top:50.5%;left:11%;max-width:41%;z-index:5;}
#block-place .feature-foods .txt-block{max-width:400px;float:right;margin:160px 0 160px;}



#block-room {margin-top: 60px;}


@media screen and (max-width:980px){
  #block-place .txt-block .txt{font-size:20px;}
  #block-place .feature-btn{font-size:18px;}
  #block-place .feature-btn::before{display:none;}
  #block-place .feature-btn::after{margin-left:10px!important;margin-right:0!important;width:20px;height:5px;}
  #block-place .feature-room .txt-block{text-align:center;max-width:100%;padding:40% 0 5%;margin:0;float:none;}
  #block-place .feature-room .img01{top: 3%; left:5%;}
  #block-place .feature-room .img02{top:12%;left:auto;right:5%;max-width:45%;}

  #block-place .feature-hotspring::before{background-size:cover;background-position:20% center;}
  #block-place .feature-hotspring .txt-block{text-align:center;max-width:100%;padding:40% 0 5%;margin:0;float:none;}
  #block-place .feature-hotspring .img01{position:absolute;top:3%;left:10%;max-width:47%;}
  #block-place .feature-hotspring .img02{position:absolute;;top:12%;right:10%;max-width:36%;}

  #block-place .feature-foods .txt-block{text-align:center;float:none;max-width:100%;padding:40% 0 5%;margin:0;}
  #block-place .feature-foods .img01{top:3%;left:10%;max-width:36%;}
  #block-place .feature-foods .img02{top:12%;left:auto;right:10%;max-width:47%;}
}

@media screen and (max-width:640px){
    
  #block-place{padding:0;}
  #block-place .block-ttl br{display:block;}
  #block-place .txt-block .txt{margin-bottom:15px;}
  #block-place .txt-block .detail{text-align:left;margin-bottom:5px;}
  #block-place .txt-block .detail br{display:none;}

  #block-place .feature-room::before{background-size:cover;}
  #block-place .feature-room .txt-block{padding:48% 0 10%;}

  #block-place .feature-room::before{
    width:100%;height:100%;}
  #block-place .feature-hotspring::before{
    width:100%;height:100%;}
  #block-place .feature-foods::before{
    width:100%;height:100%;}
    

    #block-place .feature-room{margin-top: 0; padding-top: 20px;}
    #block-place .feature-hotspring{margin-top: 0; padding-top: 20px;}
    #block-place .feature-foods{margin-top: 0; padding-top: 20px;}

    #block-place .feature-room .img01 {
        max-width: 54%;
    }

  #block-place .feature-hotspring .txt-block .txt br{display:none;}
  #block-place .feature-hotspring .txt-block{padding:48% 0 10%;}
  #block-place .feature-hotspring .img01{left:5%;max-width:54%;}
  #block-place .feature-hotspring .img02{right:5%;max-width:45%;}

  #block-place .feature-foods .txt-block{padding:48% 0 10%;}
  #block-place .feature-foods .img01{right:5%;max-width:45%; z-index: 8; left: auto; top: 12%;}
  #block-place .feature-foods .img02{left:5%;max-width:54%; top: 3%;}

    article.room .plan_cat { font-size:14px; color:#000;text-align:center;flex:1; line-height: 1.7; white-space: nowrap;}
    article.room .plan_cat span { font-size:14px; color:#000;text-align:center;flex:1; font-weight: 400;}
    article.room .time { color:#000;text-align:center;flex:1; line-height: 1.7;}
    article.room .time dt { font-size:14px; font-weight: bold;}
    article.room .time dd { font-size:14px;}

}