@charset "utf-8";
/***********************************************
FREE
***********************************************/
html {
  scroll-behavior: smooth;
}
body {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  min-width: 990px;
  margin: 0;
}
/* ================================================================
   ★ default.css の強硬なリセットを打ち消すための追記
================================================================ */
/* 1. 見出しタグやブロック要素の display を正常化 */
h1, h2, h3, h4, h5, h6, div, main, section, header, footer {
  display: block;
}
/* 2. aタグやボタンなどのカーソルと、リストの初期化を補正 */
ul, ol {
  padding-left: 0;
  margin: 0;
}
/***********************************************
f-head
***********************************************/
.f-head {
  position: relative;
  width: 100%;
  max-width: 1600px;
  height: 500px;
  margin-left: auto;
  margin-right: auto;
}
.f-head .f-inner {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 990px;
  height: 500px;
  z-index: 20;
  margin: 0;
}
.f-head .f-inner h2 {
  display: block !important;
  position: absolute;
  top: 0px;
  left: 200px;
  width: 660px;
  height: 400px;
  z-index: 30;
}
.img-box {
  position: absolute; /* ★位置を固定して浮かせる */
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* 幅1600pxで画面中央に配置 */
  width: 100%;
  max-width: 1600px;
  min-width: 990px;
  height: 500px;
  overflow: hidden;
  z-index: 10; /* 下側に配置 */
}
.img-box > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 500px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 10;
  opacity: 0;
  animation-name: fade;
  animation-duration: 24s;
  animation-iteration-count: infinite;
  margin-left: auto;
  margin-right: auto;
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 0;
    /*transform: scale(1.2);*/
  }
  100% {
    opacity: 0;
    z-index: 0;
  }
}
/* 1枚目のスライド */
.img-box > div:first-of-type {
  background-image: url(../images/slide01.png);
  animation-delay: 0s;
}

/* 2枚目のスライド */
.img-box > div:nth-of-type(2) {
  background-image: url(../images/slide02.png);
  animation-delay: 6s; /* ★6秒後にスタート */
}

/* 3枚目のスライド */
.img-box > div:nth-of-type(3) {
  background-image: url(../images/slide03.png);
  animation-delay: 12s; /* ★12秒後にスタート */
}

/* 4枚目のスライド（追加） */
.img-box > div:nth-of-type(4) {
  background-image: url(../images/slide04.png); /* ★4枚目の画像パス */
  animation-delay: 18s; /* ★18秒後にスタート */
}
/* ★追加：すべてのimg要素のサイズを半分に */
img {
  max-width: 100%;
  height: auto;
}

#content {
  width: 100%;
}

.freeArea {
	 min-width: 990px; 
  width: 100%;
  margin: 0 auto;
  max-width: 1600px;
  overflow: hidden;
  background-image: url("../images/back.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
#f-spot {
  min-width: 990px;
  margin-left: auto;
  margin-right: auto;
}
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.anim-img {
  opacity: 0;
  animation: fade-in-up 1s ease forwards;
}
.main_back {
  position: absolute;
  width: 180px;
  left: 542px;
}
.main_title {
  position: absolute;
  top: 17px;
  width: 192px;
  left: 535px;
}
.main_logo {
  width: 150px;
  top: 420px;
  left: -180px;
  position: absolute;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
/***********************************************
動きの追加
***********************************************/
/* アニメーション用のクラス */
.fade-in-element {
  opacity: 0;
  transform: translateY(50px); /* 下からの距離を増やす */
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.fade-in-element.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/***********************************************
各エリア
***********************************************/
.intro {
  height: 270px;
}
.intro1-inner {
  position: relative;
  width: 990px;
  margin-left: auto;
  margin-right: auto;
}
.intro_text {
  position: absolute;
  width: 947px;
  left: 20px;
  top: 40px;
}
.article01 {
  height: 540px;
}
.article01-inner {
  position: relative;
  width: 990px;
  margin-left: auto;
  margin-right: auto;
}
.article01_title {
  width: 142px;
  position: absolute;
  top: 30px;
  left: 430px;
}
.article01_hotspring {
  width: 1231px;
  position: absolute;
  left: -150px;
  top: 30px;
}
.article02 {
  height: 558px;
}
.article02-inner {
  position: relative;
  width: 990px;
  margin-left: auto;
  margin-right: auto;
}
.article02_title01 {
  width: 141px;
	 height: auto;
  position: absolute;
  top: 70px;
  left: 340px;
}
.article02_title02 {
  width: 98px;
	 height: auto;
  position: absolute;
  top: 67px;
  right: 0;
}
.article02_cuisine {
  width: 447px;
  position: absolute;
  left: -90px;
  top: 70px;
}
.article02_guestroom {
  width: 537px;
  position: absolute;
  right: 39px;
  top: 70px;
}
.article04 {
  height: 220px;
	 overflow: visible;
}
.article04-inner {
  position: relative;
  width: 990px;
  margin-left: auto;
  margin-right: auto;
	  min-height: 220px;
}

.btn_plan01 {
  position: absolute;
  width: 541px;
  top: 70px;
  left: -10px;
}
.btn_plan02 {
  position: absolute;
  width: 523px;
  top: 70px;
  left: 490px;
}
.btn_plan01:hover {
  opacity: 0.7;
}
.btn_plan02:hover {
  opacity: 0.7;
}

.article04 .fade-in-element {
  transform: translateY(10px); /* ボタンはさらに浅く */
  transition: opacity 0.4s ease-out, transform 0.4s ease-out; /* 素早く出す */
}