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

html {
  scroll-behavior: smooth;
}

/*-----------
ウィンター共通
-----------*/
body.winternew {padding:0;color:#381201;background:#fff;}


.block1000 {width:100%;max-width:1000px;margin:0 auto;}
.block1000 img{width:100%;}

.block1200 {width:100%;max-width:1200px;margin:0 auto;}
.block1200 img{width:100%;}

.pad20 {padding:20px;}
.pad50 {padding:50px;}


.setsumei {text-align:left;margin-bottom:20px;line-height: 1.7;}
.fee {font-family: 'Noto Sans JP', sans-serif;font-weight:600;font-size:1.3rem;}
.fee span{font-weight:300;font-size:1rem;}

/*-----------
スクロールしてフェードイン
-----------*/
.fade {
  opacity: 0;
  transform : translate(0, 100px);
  transition : all 1500ms;
}

.fade.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}


/*-------------------------------------------
ウィンターTOPのテキストなど
-------------------------------------------*/
#winterTopArea {position:relative;margin-bottom:0px;padding-bottom:100px;margin-top:-50px; }
h1 {font-family:'Cinzel', serif;z-index: 10000;color:#fff;font-size:3.5rem;line-height:1.2;text-align: left;position:absolute;top: 20%;left:12.5%;}
h1 span{font-size:1.5rem;}
h2 {font-family: 'Zen Kaku Gothic New', sans-serif;font-weight:700;font-size:3.2rem;line-height:1.3;text-align: center;margin-top:50px;margin-bottom:30px;color:#005C3B;}
p.wintermessage {font-family: 'Zen Kaku Gothic New', sans-serif;font-weight:400;font-size:1.3rem;line-height:2;letter-spacing: 1;}

@media(max-width:640px ){
    h1 {top: 8%;left:25%;text-align: center;}   
}
/*-------------------------------------------
ウィンターTOPのフェードイン　ここから
-------------------------------------------*/
.img-box{
  width: 100%;
  height: 80vh;
  overflow: hidden;
  position: relative;
    margin:0px auto 0 auto;
}
.img-box>div{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80vh;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 10;
  opacity: 0;
    animation: anime 36s 0s infinite;
    /*
  animation-name:fade;
  animation-duration: 12s;
  animation-iteration-count: infinite;
    */
}

@keyframes anime {
  0% {
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    17% {
        opacity: 1;
    }
    30% {
        opacity: 0;
        transform: scale(1.2) ;
         z-index:9;
    }
    100% { opacity: 0 }
}

/* 1枚目のスライド */
.img-box>div:first-of-type{
  background-image: url(images/top_01.jpg?02);
}

/* 2枚目のスライド */
.img-box>div:nth-of-type(2){
  background-image: url(images/top_02.jpg?0002);
  /* 追記 */
  animation-delay: 6s;
}

/* 3枚目のスライド */
.img-box>div:nth-of-type(3){
  background-image: url(images/top_03.jpg?0002);
  /* 追記 */
  animation-delay: 12s;
}

/* 4枚目のスライド */
.img-box>div:nth-of-type(4){
  background-image: url(images/top_04.jpg?0002);
  /* 追記 */
  animation-delay: 18s;
}

/* 5枚目のスライド */
.img-box>div:nth-of-type(5){
  background-image: url(images/top_05.jpg?0002);
  /* 追記 */
  animation-delay: 24s;
}

/* 6枚目のスライド */
.img-box>div:last-of-type{
  background-image: url(images/top_06.jpg?0002);
  /* 追記 */
  animation-delay: 30s;
}

@media(max-width:640px ){
  .img-box{
  width: 100%;
  height: 60vh;
  margin:30px auto 0 auto;
}
  .img-box>div{
  height: 60vh;
}
}

/*-------------------------------------------
冬を楽しむサービス
-------------------------------------------*/
#winterService {background:url(images/bg_blue.jpg) ;padding:100px 0;}
#winterService h2{color:#00327f;}
.balloon4 {
  position: relative;
  display: block;
  margin: 1.5em auto -0.5em auto;
  padding: 15px;
  width: 300px;
  color: #555;
  background: #00327f;
  border-radius: 20px;
  color:#fff;
}

.balloon4:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #00327f;
}

.balloon4 p {
  margin: 0;
  padding: 0;
  font-family: 'Zen Kaku Gothic New', sans-serif;font-weight:600;font-size:1.3rem;text-align: center;
}

.winterServicePoint {padding:40px 30px;font-family: 'Zen Kaku Gothic New', sans-serif;font-weight:400;font-size:1.2rem;line-height: 2;text-align: left;width:98%;max-width:1400px;margin:0 auto;}


/*-------------------------------------------
おすすめポイント
-------------------------------------------*/
#winterReason {background:url(images/bg_gray.jpg) ;padding:100px 0;}
.winterPoint {padding:40px 30px;font-family: 'Zen Kaku Gothic New', sans-serif;font-weight:400;font-size:1.4rem;line-height: 2;text-align: left;width:98%;max-width:1400px;margin:0 auto;}
.winterPoint ul {font-size:0;margin:0;padding:0;width:100%;}
.winterPoint ul li{width:30%;display: inline-block;font-size:1.2rem;text-align: center;line-height: 1.5;margin-bottom:20px;vertical-align: top;}
.winterPoint ul li div.bgWhite {background:#fff;border-radius: 20px;padding:0 0px 30px 0px;box-shadow: 12px 12px 2px 1px rgba(100, 100, 100, .5);}
.winterPoint ul li img{margin-bottom:15px;width:100%;border-radius: 20px 20px 0 0;}

.winterPoint ul li:first-child{margin-right:5%;}
.winterPoint ul li:nth-child(2){margin-right:5%;}
.winterPoint ul li:nth-child(3){margin-right:0%;}
.winterPoint ul li:nth-child(4){margin-right:5%;}
.winterPoint ul li:nth-child(5){margin-right:5%;}
.winterPoint ul li:nth-child(6){margin-right:0%;}
.winterPoint ul li:nth-child(7){margin-right:5%;}
.winterPoint ul li:nth-child(8){margin-right:5%;}
.winterPoint ul li:nth-child(9){margin-right:0%;}
.winterPoint ul li:nth-child(10){margin-right:5%;}
.winterPoint ul li:nth-child(11){margin-right:5%;}
.winterPoint ul li:nth-child(12){margin-right:0%;}

@media(max-width:640px ){
.winterTopics .tipicsImage {width:90%;margin:0 auto 50px auto;}
.topicsLink li{width:90%;}
.winterPoint {width:96%;margin:0 auto 50px auto;padding:20px;}
.winterPoint ul li{width:76%;margin:0 12% 3% 12%;}
}
.balloon1 {
  position: relative;
  display: inline-block;
  margin: 1.5em auto -0.5em auto;
  padding: 15px;
  min-width: 200px;
  max-width: 100%;
  color: #555;
  background: #fff;
  border-radius: 20px;
  color:#005C3B;
}

.balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #fff;
}

.balloon1 p {
  margin: 0;
  padding: 0;
  font-family: 'Zen Kaku Gothic New', sans-serif;font-weight:600;font-size:1.3rem;
}

.balloon2 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0 -0.5em 0;
  padding: 15px;
  min-width: 200px;
  max-width: 100%;
  color: #555;
  background: #005C3B;
  border-radius: 20px;
  color:#fff;
}

.balloon2:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #005C3B;
}

.balloon2 p {
  margin: 0;
  padding: 0;
  font-family: 'Zen Kaku Gothic New', sans-serif;font-weight:600;font-size:1.3rem;
}

.balloon3 {
  position: relative;
  display: block;
  margin: 1.5em auto -0.5em auto;
  padding: 15px;
  width: 300px;
  color: #555;
  background: #005C3B;
  border-radius: 20px;
  color:#fff;
}

.balloon3:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #005C3B;
}

.balloon3 p {
  margin: 0;
  padding: 0;
  font-family: 'Zen Kaku Gothic New', sans-serif;font-weight:600;font-size:1.3rem;text-align: center;
}

.rec1 {display: flex;flex-wrap: wrap;background:#fff;border-radius: 20px;margin-bottom:20px;box-shadow: 12px 12px 2px 1px rgba(100, 100, 100, .5);}
.rec1box {width: 50%;}
.rec1box img{border-radius: 20px 0 0 20px;width: 100%;}
.rec1box p{display: flex;justify-content: center;align-items: center;padding-top:100px;}

@media(max-width:640px ){
  .rec1 {width: 76%;margin:0 auto;}
  .rec1box {width: 100%;}
  .rec1box img{border-radius: 20px 20px 0 0;}
  .rec1box p{padding:20px;}
}

/*-----------
過ごし方
-----------*/
#sugoshikata  {margin-top:100px;}
#sugoshikata h3 {font-size:2rem;margin-bottom:80px;font-family: 'Noto Serif JP', serif;}
#sugoshikata ul {margin:0 0 40px 0;padding:0;font-size:0;border-left:1px solid #c8c8c8;border-top:1px solid #c8c8c8;}
#sugoshikata ul li {display: inline-block;width:33.3333333%;vertical-align: top;position:relative;font-size:1rem;border-right:1px solid #c8c8c8;border-bottom:1px solid #c8c8c8;}
#sugoshikata ul li h4 {
  position:absolute; top: 60%;
    left: 50%;
    transform: translate(-50%, -40%);
    -webkit-transform: translate(-50%, -40%);
    -ms-transform: translate(-50%, -40%);}
#sugoshikata li a {color:#301406!important;}

.pad80 {padding:90px 0 40px 0;}

@media(max-width:640px ){
  #sugoshikata ul li img.campimage{height: 200px;object-fit: cover;}
  #sugoshikata ul li h4 {
  position:absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -45%);
    -webkit-transform: translate(-50%, -45%);
    -ms-transform: translate(-50%, -45%);}
  #sugoshikata ul {border-left:none;}
  #sugoshikata ul li:last-child {border-right:none;} 
  
  .pad80 {padding:70px 0 40px 0;}
  
}

/*------施設のアコーディオン---------*/

#winterfacility {width:100%;max-width:1000px;margin:0 auto 20px auto;}

@media(max-width:640px ){
  #winterfacility {width:90%;;margin:0 auto 20px auto;}
}


.acd-check{
    display: none;
}
.acd-label{
    background: #85AEBA;
    color: #fff;
    display: block;
    margin-bottom: 1px;
    padding: 20px;
    position: relative;
  font-size:1.1rem;
  height: 60px;
}
.acd-label:after{
    background: #598D99;
    box-sizing: border-box;
    content: '+';
    display: block;
    font-family: "Font Awesome 5 Free";
    height: 60px;
  width:60px;
    padding: 20px 20px;
    position: absolute;
    right: 0;
    top: 0px;
}
.acd-content{
    background:#fff;
    display: block;
    height: 0;
    opacity: 0;
    padding:10px;
    transition: .7s;
    visibility: hidden;
}
.acd-check:checked + .acd-label:after{
    content: '-';
}
.acd-check:checked + .acd-label + .acd-content{
    height: auto;
    opacity: 1;
    padding: 10px;
    visibility: visible;
}

table.outlineWinter {width:96%;margin:0 auto;}
table.outlineWinter th{width:40%;padding:10px 0 10px 5px;text-align:left;border-bottom:1px solid #ddd;}
table.outlineWinter td{width:20%;padding:10px 0;text-align:center;border-bottom:1px solid #ddd;border-left:1px solid #ddd;font-family: 'Tinos', serif;font-size:1.2rem;}


/*-----------
ロングステイ
-----------*/

#longstay:before {content: '+\A';white-space: pre;font-size:5rem;line-height: 250%;}
#longstay {margin-top:-100px;}
.LSbox {border:1px solid #85AEBA;padding:50px;position:relative;}
.LSbox h3{font-size:2rem;position:absolute;background:#fff;top: -10px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);}

#longstay ul {margin:0;padding:0;font-size:0;}
#longstay ul li {display: inline-block;width:48%;vertical-align: top;position:relative;font-size:1rem;}
#longstay ul li:first-child {border-right:1px solid #85AEBA;margin-right:2%;padding-right:2%;}
#longstay li a {color:#301406!important;}

@media(max-width:640px ){
  .LSbox {width:90%;padding:60px 20px 50px 20px;}
  .LSbox h3{font-size:2rem;position:absolute;background:#fff;
    line-height: 1.3;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);}
  #longstay ul {margin:0 0 30px 0;}
  .LSbox h4{margin-bottom:10px;}
}

/*-----------
オプション
-----------*/
#option {}
#option ul {margin:0;padding:0;font-size:0;}
#option ul li {display: inline-block;width:48%;vertical-align: top;position:relative;font-size:1rem;}
#option ul li:first-child {margin-right:4%;}
#option li a {color:#301406!important;}

#option h4 {position:absolute; top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
color:#fff;
  font-family: 'Noto Sans JP', sans-serif;font-weight:600;font-size:1.5rem;line-height: 1.6;
}

.optionillust {position:absolute;top:-75px;z-index: 1000;left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);}
.optionillust img{width:150px;}

@media(max-width:640px ){
  #option ul {width:96%;margin:0 auto;}
  #option ul li {width:49%;}
  #option ul li:first-child {margin-right:2%;}
}

/*-----------
あったかサポート
-----------*/
#support {background:linear-gradient(116.29230017534417deg, rgba(255, 225, 128,1) 8.23092301874262%,rgba(255, 224, 127,1) 8.23092301874262%,rgba(255, 147, 39,1) 52.20441017316017%,rgba(255, 147, 38,1) 53.10550622140643%,rgba(237, 63, 0,1) 94.7361436503837%);
  padding:50px 0;
  position:relative;
margin-top:150px;}
#support h3{
  margin-bottom:50px;
  position:absolute;
  top:-150px;
  left: 50%;
  transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);}
#support h3 img {width:500px;}
#support ul {margin:0;padding:0;font-size:0;}
#support ul li {display: inline-block;width:32%;vertical-align: top;position:relative;font-size:0.9rem;margin-right:2%;margin-bottom:20px;text-align: left;line-height:1.6;}
#support ul li:nth-child(3) {margin-right:0%}
#support ul li a{color:#fff;}
#support ul li img{width:100%;margin-bottom:10px;}
#support ul li a span{color:#301406;}

#support h4 {position:absolute; top: 60px;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
color:#fff;
  font-family: 'Noto Sans JP', sans-serif;font-weight:600;font-size:1.3rem;line-height: 1.6;
}

#support h5{margin-bottom:0px;font-family: 'Noto Sans JP', sans-serif;font-weight:600;font-size:1.5rem;line-height: 1.6;}

.moresupportBox {background:#fff;border-radius: 10px;width:100%;max-width:1000px;margin:0 auto;padding:30px 30px 40px 30px;position:relative;font-size:1rem;line-height: 1.8;}
.moresupport:before {content: '+\A';white-space: pre;font-size:5rem;line-height: 200%;}
.moresupportBox span{background:linear-gradient(transparent 60%, #ff6 60%);}
.msBox01 {position:absolute;bottom:-20px;left:-10px;}
.msBox02 {position:absolute;bottom:-15px;right:0;}


@media(max-width:640px ){
  
  #support ul {width:96%;margin:0 auto;}
  #support h4 {
    transform: translate(-40%, -50%);
    -webkit-transform: translate(-40%, -50%);
    -ms-transform: translate(-40%, -50%);
    font-size:1.2rem;
    text-align: center;
}
  .moresupportBox {width:96%;margin:0 auto;padding:40px 30px 50px 30px;}
  .msBox01 {position:absolute;bottom:-60px;left:-50px;}
.msBox02 {position:absolute;bottom:-60px;right:0px;}
}