@charset "utf-8";
/*.clearfix******************************/
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  display: inline-block;
}
/* Hides from IE Mac \*/
* html .clearfix {
  height: 1%;
}
.clearfix {
  display: block;
}
/* Basic Structure
-------------------------------------*/
* {
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  padding: 0;
}
fieldset {
  border: none;
}
a img {
  border: none;
}
ul li {
  list-style-type: none;
  text-decoration: none;
}
img {
  vertical-align: bottom;
}
/* Sentence, Character
------------------------------------*/
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-size: 87%;
  font-weight: normal;
  font-family: sans-serif;
  line-height: 170%;
  color: #786A56;
}
/*

/***********************************************
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 auto;
}

.f-head h1 {
  margin: 0;
  padding: 0;
  line-height: 0; /* 画像の下にできる数ピクセルの隙間を消す */
}

/***********************************************
f-head
***********************************************/
.f-head {
    width: 100%;
    max-width: 1600px;
    height: 540px;      /* カンプの縦幅に固定 */
    overflow: hidden;   /* 1600pxからはみ出た画像部分を隠す */
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.f-head img {
    width: 1600px;      /* 画像の実際の横幅を強制キープ */
    max-width: none;    /* 下部にある max-width: 100% を打ち消す */
    height: 540px;      /* カンプの縦幅に固定 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 常に画像の中央寄せ */
}
.f-head .f-inner {
  position: relative;
  height: 600px;
  top: -600px;
}
.f-inner {
  width: 990px;
  margin-left: auto;
  margin-right: auto;
}
.f-head .f-inner h2 {
  position: absolute;
  top: 50px;
  z-index: 30;
  left: 200px;
  width: 660px;
}
.img-box {
  max-width: 1600px;
  min-width: 990px;
  height: 600px;
  overflow: hidden;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.img-box > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 600px;
  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);
}
/* 2枚目のスライド */
.img-box > div:nth-of-type(2) {
  background-image: url(../images/slide02.png);
  /* 追記 */
  animation-delay: 6s;
}
/* 3枚目のスライド */
.img-box > div:nth-of-type(3) {
  background-image: url(../images/slide03.png);
  /* 追記 */
  animation-delay: 12s;
}
/* 4枚目のスライド */
.img-box > div:nth-of-type(4) {
  background-image: url(../images/slide04.png);
  /* 追記 */
  animation-delay: 18s;
}
/* ★追加：すべてのimg要素のサイズを半分に */
img {
  max-width: 100%;
  height: auto;
}

#content {
  width: 100%;
}

.freeArea {
  width: 100%;
  margin: 0 auto;
  max-width: 1600px;
  overflow: hidden;
}
#f-spot {
  min-width: 990px;
  margin-left: auto;
  margin-right: auto;
}
/***********************************************
動きの追加
***********************************************/
/* アニメーション用のクラス */
.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);
}
/***********************************************
各エリア
***********************************************/
/*
.access{
	width: 100%;
	height: 250px;
    text-align: center;
    margin-top: -70px;
}

*/
/* ★追加：各spot内の画像サイズを明示的に指定 */
/*
.spot01 img { width: 800px; height: 270px; }
.spot02 img { width: 960px; height: 280px; }
.spot03 img { width: 830px; height: 280px; }
.spot04 img { width: 790px; height: 280px; }
.spot05 img { width: 890px; height: 260px; }
*/
/*.spot06 img { width: 520px; height: 360px; }*/

/* フェード用コンテナ */
.fade-slider {
    position: relative;
    overflow: hidden;
}
/* 各スライドの基本設定 */
.fade-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* 最初は透明 */
    transition: opacity 2s ease-in-out; /* ふわっと具合の調整 */
    z-index: 0;
}
/* 現在表示されているスライド */
.fade-item.is-active {
    opacity: 1; /* 見えるようにする */
    z-index: 1;
}
.fade-item img {
    width: 100%;
    height: 100%;
}
.intro-slider {
	    position: absolute;
    top: 40px;
    left: -50px;
    width: 558px;
    height: 406px;
}
.onsen-slider, .dinner-slider {
    width: 990px;
    height: 361px;
    margin: 0 auto;
}



.intro {
 background-image: url(../images/intro_back.png);
     height: 480px; 
    background-position: center center;
    background-size: 1600px 480px;
    background-repeat: no-repeat;
}

.intro_inner{
  position: relative;
  width: 990px;
  margin-left: auto;
  margin-right: auto;
}

.intro_text {
  position: absolute;
  width: 427px;
  right: 0px;
  top: 50px;
}


.article_back {
  height: auto;
background-image: url("../images/back.png");
  background-position:  top center;
    background-size: 1600px 1020px;
  background-repeat: no-repeat;
}



.article01 {
       padding-top: 50px;
    height: 450px;
}
.article01-inner {
  position: relative;
  width: 990px;
  margin-left: auto;
  margin-right: auto;
}
.article01_title {
     position: absolute;
    width: 296px;
	    left: 20px;
    top: -10px;
    z-index: 999;
}

.onsen_text{
	    position: absolute;
    width: 941px;
    top: 340px;
    left: 40px;
}


.article02 {
     height: 450px;
	margin-top: 10px;
}


.article02_title{
	    position: absolute;
    width: 296px;
    top: -10px;
    right: 20px;
    z-index: 999;
}
.article02-inner {
  position: relative;
  width: 990px;
  margin-left: auto;
  margin-right: auto;
}


.dinner_text{
	width: 960px;
	    position: absolute;
    top: 350px;
}

.article03 {
/*  height: 350px;*/
}

.article03-inner {
  display: flex !important;
  justify-content: space-between; /* 隙間を綺麗にあける */
  align-items: center;            /* 縦方向の中央（高さを揃える） */
  width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.btn_syukuhaku,
.btn_official {
  display: block;
  /* 親幅990pxに対して、480pxずつ（計960px）に調整し、間に30pxの余裕を持たせる */
  width: 480px; 
  height: auto;   /* 高さは自動で揃うようにする */
}

/* aタグをposition基準にする */
.btn_syukuhaku a,
.btn_official a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
/* 両方の画像を重ねる */
.btn_syukuhaku a img,
.btn_official a img {
  display: block;
  width: 100%;
  height: auto; /* 縦横比を維持 */
}

.img-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;                        /* 初期状態：非表示 */
  transition: opacity 0.4s ease;    /* 徐々に変化（秒数はお好みで） */
}

/* ホバー時にホバー用画像をフェードイン */
.btn_syukuhaku a:hover .img-hover,
.btn_official a:hover .img-hover {
  opacity: 1;
}

/***************************************************************
default.css 追加に伴うバグ修正（上書き対応）
***************************************************************/

/* 1. リセットされたdivや要素の挙動を正常（ブロック要素など）に戻す */
.freeArea div,
.freeArea p,
.freeArea section,
.freeArea header,
.freeArea footer {
  display: block;
}

/* 2. box-sizing の変更によるサイズ縮みを元に戻す（全体・パーツ） */
.freeArea,
.freeArea *,
.freeArea ::before,
.freeArea ::after {
  box-sizing: content-box; /* カンプ通りのサイズ計算に戻す */
}

/* 3. 消えてしまったスライドショーの「表示の土台」を強制確保 */
.fade-slider {
  display: block !important;
}
.fade-item {
  display: block !important;
}

/* 4. clearfixのインラインブロック化をブロック化へ修正 */
#content.clearfix {
  display: block; /* inline-blockだと横幅100%が崩れるリスクを回避 */
}

/* 5. 宿泊ボタンなどのフレックスコンテナ内のブロック設定 */
.article03-inner {
  display: flex !important; /* flex指定を担保 */
}
.btn_syukuhaku,
.btn_official {
  display: block;
}