@charset "utf-8";

/* =====================================================================

	Hero slider
	
======================================================================== */
  #hero {
    width: 100vw;
    height: 100vh;
    position: relative;
    }
  #hero .hero-text {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    /*position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);*/
    }
  #hero .hero-text img {
    opacity: 0;
		animation: fadeIn 1.8s ease 0.3s 1 forwards;
		-webkit-animation: fadeIn 1.8s ease 0.3s 1 forwards;
    }
	.fadeIn { opacity: 0; }
		.fadeIn.active {
			opacity: 1;
			animation: fadeIn 1s linear 1;
			animation-name: fadeIn;
			}
		@-webkit-keyframes fadeIn {
			from {opacity: 0;}		
			to   {opacity: 1;}
		}
		@keyframes fadeIn {
			from {opacity: 0;}		
			to   {opacity: 1;}
		}
@media (max-width: 575.98px) {
  #hero .hero-text img {
    width: 90%;
    }
}


/* =====================================================================

	料金・イベント・コース案内
	
======================================================================== */
  .index-fill a {
    color: #FFFFFF;
    text-decoration: none;
    }
  .fill-col {
    position: relative;
    overflow: hidden;
    height: 200px;
    }
    .fill-col::after {
      position: absolute;
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      top: 0;
      -webkit-transition: all .3s ease-out;
      -moz-transition: all .3s ease-out;
      -ms-transition: all .3s ease-out;
      transition: all .3s ease-out;
      }
  .fill-charge {
    border-top: solid 10px #7C867E;
    }
    .fill-charge::after {
      background: url("../img/home/fill-charge.jpg?03") no-repeat center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -ms-background-size: cover;
      background-size: cover;
      }
      .fill-charge:hover {
        border-color: #858e87;
        }
  .fill-event {
    border-top: solid 10px #636643;
    }
    .fill-event::after {
      background: url("../img/home/fill-event.jpg?03") no-repeat center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -ms-background-size: cover;
      background-size: cover;
      }
      .fill-event:hover {
        border-color: #6d704a;
        }
  .fill-course {
    border-top: solid 10px #4A7956;
    }
    .fill-course::after {
      background: url("../img/home/fill-course.jpg") no-repeat center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -ms-background-size: cover;
      background-size: cover;
      }
      .fill-course:hover {
        border-color: #50845d;
        }
      .fill-charge:hover::after,
      .fill-event:hover::after,
      .fill-course:hover::after {
        -moz-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
        }
  .fill-mask {
    background-color:rgba(0,9,8,0.65);
    height: 190px;
    z-index: 1;
    position: relative;
    -webkit-transition: all .3s ease-out;
      -moz-transition: all .3s ease-out;
      -ms-transition: all .3s ease-out;
      transition: all .3s ease-out;
    }
    .fill-mask:hover {
      background-color:rgba(0,9,8,0.2);
      }
  .fill-col--en {
    overflow: hidden;
    position: relative;
    font-size: 90%;
    text-shadow: 0 0 3px #fff;
    letter-spacing: 0.08em;
    }
    .fill-col--en::after {
      position: absolute;
      top: 50%;
      content: '';
      width: 100%;
      height: 1px;
      background-color: #FFFFFF;
      margin-left: 20px;
      }
  .fill-col--title {
    position: relative;
    margin-top: auto;
    margin-bottom: 0.5rem;
    text-align: right;
    letter-spacing: 0.25em;
    font-weight: 300;
    }
    .fill-col--title::after {
      display: block;
      content: "";
      position: absolute;
      top: 45%;
      right: 3px;
      width: 10px;
      height: 10px;
      margin: -4px 0 0 0;
      border-top: solid 1px #FFFFFF;
      border-right: solid 1px #FFFFFF;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      }
  .fill-col--title span {
    text-shadow: 0 0 2px #fff, 0 0 5px #fff;
    padding-right: 2rem;
    }
@media (min-width: 768px) {
  .fill-col {
    width: 33.3333%;
    }
}
@media (min-width: 992px) {
  .fill-col {
    height: 330px;
    }
  .fill-charge,
  .fill-event,
  .fill-course {
    border-width: 20px;
    }
  .fill-mask {
    height: 310px;
    }
  .fill-col--title {
    font-size: 1.5rem; /*24px*/
    }
    .fill-col--title::after {
      width: 13px;
      height: 13px;
      margin: -6px 0 0 0;
      }
}


/* =====================================================================

	index-news
	
======================================================================== */
  .index-news {
    position: relative;
    z-index: 0;
    }
  .index-news::before,
  .index-news::after {
    content: '';
    position: absolute;
    left:0;
    top: 0;
    width: 100%;
    }
  .index-news::before {
    z-index: -1;
    height: 50%;
    background: linear-gradient(180deg, #E5E5D3, #E5E5D3);
    }
  .index-news::after {
    z-index: -2;
    height: 100%;
    background: radial-gradient(#013319, #07140D);
    }
  .index-news-wrap {
    background-color: #FFFFFF;
    box-shadow: 0px 0px 0px 4px #FFFFFF;
    border: solid 1px #CCCCCC;
    }
  .index-news-wrap article + article {
    margin-top: 1.2rem;
    }
  .index-news-wrap .news-date {
    color: #003C3D;
    }
  .index-news-wrap .news-title {
    font-size: inherit;
    }
@media (min-width: 992px) {
  .index-news-wrap article {
    margin-left: 5rem;
    margin-right: 5rem;
    }
  .index-news-wrap article + article {
    margin-top: 1.5rem;
    }
  .index-news-wrap .news-date,
  .index-news-wrap .news-title {
    display: table-cell;
    }
  .index-news-wrap .news-date {
    padding-right: 1.5rem;
    }
}


/* =====================================================================

	index-visitors
	
======================================================================== */
	.index-visitors {
    background: url("../img/home/bg_visitors.jpg") no-repeat center top;
    background-size: cover;
    padding-bottom: 8rem;
		}
  .index-visitors .card-body {
    background-color: rgba(229,229,211,0.8);
    margin-top: 2px;
    }
  .index-visitors h4+p {
    line-height: 100%;
    margin-top: 0.25rem;
    }
@media (min-width: 992px) {
  .index-visitors {
    background-attachment: fixed;
    padding-bottom: 250px;
    }
  .index-visitors .card img {
    min-height: 0%; /*IEの高さバグ対策*/
    }
}