/* ==================================================================
【Home】ホーム用ヘッダー画像
================================================================== */
.header-home {
  position: fixed;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #000;
  z-index: -1;
}






/* ==================================================================
【Home】ホーム用ヘッダーのスライドショー
================================================================== */
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 3s ease-in-out;
  z-index: -1;
}
.slide.active {
  opacity: 1;
  z-index: 2;
}
.slide.previous {
  opacity: 0;
  z-index: 1;
}
.slide img {
  width: 120%;
  height: 100%;
  object-fit: cover;
  transform: translateX(var(--pan-start, 0%));
}
@keyframes pan {
  from { transform: translateX(var(--pan-start)); }
  to   { transform: translateX(var(--pan-end)); }
}




/* ==================================================================
【Home】中央ロゴ
================================================================== */
.center-logo-home {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* width: 60%; */
  width: 18%;
  max-width: 500px;
  z-index: 12;

  opacity: 0;
  transition: opacity 3s ease;

}

/* 表示状態 */
.center-logo-home.show {
  opacity: 1;
}




/* ==================================================================
【Home】中央ロゴ（スマホ）
================================================================== */
@media (max-width: 768px) {
  .center-logo-home {
    width: 150px;
  }
}





/* ==================================================================
【Home】Scrollインジケーター（上→下に流れる）
================================================================== */
.scroll-indicator {
  position: absolute;
  bottom: -10px; 
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;

  opacity: 0;
  transition: opacity 3s ease;

}

/* 表示状態 */
.scroll-indicator.show {
  opacity: 1;
}

.scroll-indicator span {
  font-size: 13px;
  letter-spacing: 2px;
  opacity: 1;
  margin-bottom: -10px;
  color: #fff;
}
/* 白い細い枠（外枠） */
.scroll-line {
  width: 2px;
  height: 64px;
  background: rgba(255,255,255,0.25);
  overflow: hidden;
  position: relative;
  border-radius: 2px;
}
/* 内側を流れる白いライン（上→下） */
.scroll-line::before {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  animation: scrollFlow 2.0s ease-in-out infinite;
}
/* 上から下へスッと流れるアニメーション */
@keyframes scrollFlow {
  0%   { top: -100%; opacity: 0; }
  30%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}



/* ==================================================================
【Home】ヘッダー画像高さ分の透明余白
================================================================== */
.hero-sub1 {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}


/* ==================================================================
【Home】グラデーション余白
================================================================== */
.hero-sub2 {
  position: relative;
  width: 100%;
  height: 30vh;
  overflow: hidden;
  background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.02) 7%,
      rgba(0,0,0,0.04) 13%,
      rgba(0,0,0,0.06) 20%,
      rgba(0,0,0,0.08) 27%,
      rgba(0,0,0,0.10) 33%,
      rgba(0,0,0,0.12) 40%,
      rgba(0,0,0,0.14) 47%,
      rgba(0,0,0,0.16) 53%,
      rgba(0,0,0,0.18) 60%,
      rgba(0,0,0,0.20) 67%,
      rgba(0,0,0,0.22) 73%,
      rgba(0,0,0,0.24) 80%,
      rgba(0,0,0,0.26) 87%,
      rgba(0,0,0,0.28) 93%,
      rgba(0,0,0,0.30) 100%
  );
}



/* ==================================================================
【Home】INTRODUCTION（背景オーバーレイ）【日本語】＆【英語】
================================================================== */
.hero-sub {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  align-items: center;
  background: rgba(0,0,0,0.30);

}



/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */



/* ==================================================================
【Home】INTRODUCTION（文章_建書き文章）【日本語】
================================================================== */
.hero-vertical  {
  position: absolute;
  /* right: 600px; */

  right: 20%;

  top: 30%;
  transform: translateY(-50%);
  display: flex;
  gap: 10px; /* ← 縦列の間隔 */
  color: #fff;
}

.vertical-main {
  font-family: "游明朝", "Yu Mincho", serif;
  /* font-size: 28px; */
  font-size: 26px;
  letter-spacing: 0.15em;
  line-height: 1.8;
  color: #fff;
}

.vertical-main {
  display: flex;
  flex-direction: row-reverse; /* ← これで解決 */
  gap: 0px;
}
/* 各列を縦書きにする */
.vertical-main span {
  writing-mode: vertical-rl;
  text-orientation: upright;
  display: inline-block;
  letter-spacing: 0.15em;
  line-height: 1.8;

  opacity: 0;
  transition: 
    opacity 4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 各行のベース位置＋下にずらす */
.line1 {
  transform: translateY(40px);
}
.line2 {
  /* transform: translateY(200px); */ /* 160 + 40 */
  /* transform: translateY(175px); */ /* 135 + 40 */
  transform: translateY(200px);
}
.line3 {
  /* transform: translateY(395px); */ /* 355 + 40 */
  /* transform: translateY(345px); */ /* 305 + 40 */
  transform: translateY(395px);
}

/* 表示時 */
.vertical-main.show span {
  opacity: 1;
}

.vertical-main.show .line1 {
  transform: translateY(0);
}
.vertical-main.show .line2 {
  /* transform: translateY(160px); */
  transform: translateY(135px);
}
.vertical-main.show .line3 {
  /* transform: translateY(355px); */
  transform: translateY(305px);
}


/* ==================================================================
【Home】INTRODUCTION（文章_横書き文章）【日本語】
================================================================== */
.hero-description  {
  position: absolute;
  top: 50%;
  left: 45%;
  transform: translate(-50%, -50%) translateY(40px);
  color: #fff;
  /* text-align: center; */
  z-index: 2;
  /* max-width: 550px; */
  width: 40%; 


  opacity: 0;
  transition: 
    opacity 4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 表示されたとき */
.hero-description.show {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0); /* ← ここも同じ基準に */
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */






/* ==================================================================
【Home】INTRODUCTION（文章_建書き文章）【英語】
================================================================== */
.hero-verticalen  {
  position: relative;
  padding-top: 150px;
}
.vertical-mainen {
  font-size: 28px;
  line-height: 1.8;
  color: #fff;
  display: block;
  max-width: 800px;
  width: 90%;
  margin: 0 auto;
  text-align: center;
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 4s cubic-bezier(0.22, 1, 0.36, 1);
}
.vertical-mainen.show {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 768px) {
  .hero-verticalen  {
    position: relative;
    padding-top: 10px;
  }
}





/* ==================================================================
【Home】INTRODUCTION（文章_横書き文章）【英語】
================================================================== */
.hero-descriptionen  {
  position: absolute;
  top: 50%;
  left: 50%; /* ←ここを52% → 50%に修正 */

  transform: translate(-50%, -50%) translateY(40px);

  color: #fff;
  text-align: center;
  z-index: 2;
  max-width: 800px;
  width: 90%;

  padding-top: 8%;


  opacity: 0;
  transition:
    opacity 4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 4s cubic-bezier(0.22, 1, 0.36, 1);
}



/* 表示されたとき */
.hero-descriptionen.show {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0); /* ← ここも同じ基準に */
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */




/* ==================================================================
【Home】INTRODUCTION（文章_本文）
================================================================== */
.hero-text p {
  font-size: 14px;
  opacity: 1;
}









/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


/* ==================================================================
【Home】INTRODUCTION【日本語】
================================================================== */
@media (max-width: 1024px) {
  .hero-sub {
    height: 120vh;
  }
  .hero-text {
    display: flex;
    flex-direction: column;
    align-items: center; 
  }
  .hero-vertical {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    transform: none;
    /* margin-top: 120px; */
    margin-top: 25%; 
  }
  .hero-description {
    width: 80%;
    max-width: 800px;
    text-align: center;
    padding-top: 180px;
    margin-left: 5%;
  }
  .line1 {
    /* transform: translateY(40px); */ /* 0 + 40 */
    transform: translateY(40px);
  }
  .line2 {
    /* transform: translateY(120px); */ /* 80 + 40 */
    transform: translateY(105px);
  }
  .line3 {
    /* transform: translateY(220px); */ /* 180 + 40 */
    transform: translateY(170px);
  }
  /* 表示時 */
  .vertical-main.show span {
    opacity: 1;
  }
  .vertical-main.show .line1 {
    transform: translateY(0);
  }
  .vertical-main.show .line2 {
    /* transform: translateY(80px); */
    /* transform: translateY(65px); */
    transform: translateY(50px);
  }
  .vertical-main.show .line3 {
    /* transform: translateY(180px); */
    /* transform: translateY(130px); */
    transform: translateY(100px);
  }
  .hero-vertical {
    margin-bottom: 40px; /* ← 余白で分離 */
  }
  .hero-description {
    margin-top: 130px;  /* ← ここを増やす */
  }
}


@media (max-height: 750px) {
  .hero-sub {
    height: 180vh;
  }
}


@media (min-width: 1020px) and (max-width: 1030px) and (min-height: 595px) and (max-height: 605px) {
  .hero-vertical {
    margin-top: 15%; 
  }
}




/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


/* ==================================================================
【Home】INTRODUCTION【英語】
================================================================== */
/* @media (max-width: 1024px) { */
/* @media (max-width: 1280px) { */

@media (max-width: 1024px) {

  .hero-verticalen {
    /* transform: translateY(150px); */
    /* transform: translateY(60%); */
    /* padding-top: 150px; */
    /* padding-top: 50%; */

    padding-top: 40%;

  }

  .hero-descriptionen {
    /* margin-top: 50px; */
    /* padding-top: 180px; */

    padding-top: 70%;

  }

}


@media (max-width: 350px) {
  .hero-verticalen {
    padding-top: 25%;
  }



}


@media (min-width: 1020px) and (max-width: 1030px) and (min-height: 595px) and (max-height: 605px) {
  .hero-verticalen {
    padding-top: 20%;
  }
  .hero-descriptionen {
    padding-top: 30%;

  }
}




/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */




/* ==================================================================
【Home】もみじスライダー
================================================================== */
.momiji-section {
  padding: 225px 0;
  background: #fffff9;   /* ミルキーホワイト */

  padding-bottom: 100px;
}




/* 文字部分と画像部分のフワッと表示 */
.momiji-text,
.momiji-paint {
  opacity: 0;
  transform: translateY(60px);
  transition: all 2s cubic-bezier(0.22, 1, 0.36, 1);
}
.momiji-text.show {
  opacity: 1;
  transform: translateY(0);
}
.momiji-paint.show {
  opacity: 1;
  transform: translateY(0);
}





/* タイトル */
.momiji-title {
  text-align: center;
  margin-bottom: 40px;
}

.momiji-en {
  display: block;
  font-size: 28px;
  letter-spacing: 2px;
}

.momiji-ja {
  font-size: 14px;
  color: #666;
}







/* スライダー */
.momijiscrolling-wrapper {
  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;

  cursor: grab;

  touch-action: pan-y;

  scroll-behavior: auto;
  user-select: none;          /* 追加 */
  -webkit-user-select: none;  /* 追加 */
}

.momijiscrolling-wrapper::-webkit-scrollbar {
  display: none;
}

.momijiscrolling-wrapper.dragging {
  cursor: grabbing;
}

.momijiscrolling-track {
  display: flex;
  gap: 20px;
  width: max-content;
  will-change: transform;
  transform: translate3d(0,0,0);
}

.momiji-card img {
  pointer-events: none; /* 追加 */
  user-drag: none;
  -webkit-user-drag: none;
}

.momijiscrolling-wrapper {
  overflow: hidden;

  cursor: grab;

  touch-action: pan-y;

  user-select: none;
  -webkit-user-select: none;

  position: relative;
}

.momijiscrolling-wrapper.dragging {
  cursor: grabbing;
}



















/* カード */
.momiji-card {
  width: 600px;
  flex-shrink: 0;
  text-align: center;

  padding-bottom: 125px;

}

.momiji-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 0px;
}

/* タイトル */
.momiji-title {
  margin-top: 30px;
  font-size: 14px;
}

/* アニメーション */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}


.momiji-slider {
  position: relative;
  width: 100%;
  height: 680px;
  overflow: visible;
  border-radius: 12px;
  
  margin-top: 25px;

}

/* 画像は全部重ねるが「必ず1枚見える設計」にする */
.momiji-slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0;
  transition: opacity 0.8s ease;

  display: none;

}

/* 初期状態（これが重要） */
.momiji-slider img:first-child {
  opacity: 1;
}

/* 表示中 */
.momiji-slider img.active {
  opacity: 1;
  z-index: 2;

  display: block;

}


@media (max-width: 768px) {
  .momiji-section {
    padding: 175px 0;
    padding-bottom: 100px;
  }
  .momiji-card {
    /* width: 270px; */   /* スマホでは小さく */
    width: 290px;

    padding-bottom: 25px;

  }
  .momiji-slider {
    /* height: 350px; */  /* 画像の高さを縮小 */
    height: 375px;
  }
  .momiji-title {
    font-size: 12px;
  }
  .momijiscrolling-track {
    gap: 10px; /* 間隔も少し詰める */
  }
}




/* ==================================================================
【Home】もみじスライダー_説明文字部分
================================================================== */
.home-momiji-title {
  width: 80%;
  max-width: 800px;
  text-align: center;
  flex: 1;
  padding-top: 0px;
  display: inline-block;
  margin: 0 auto;
  display: block;
  margin-bottom: 30px;
}




/* ==================================================================
【Home】もみじスライダー_英語タイトル
================================================================== */
.home-momiji-titleen {
  font-size: 28px;
  letter-spacing: 2px;
  margin-bottom: 2px;
  font-weight: bold;
  margin: 0;
  /* text-align: left; */

}

/* ==================================================================
【Home】もみじスライダー_日本語タイトル
================================================================== */
.home-momiji-titlejp {
  font-size: 16px;
  opacity: 0.8;
  font-weight: bold;

  margin: 2px auto 12px;   /* ← 中央寄せ */
  padding-top: 2px;

  border-top: 1px solid rgba(0,0,0,0.3);

  text-align: center;      /* ← 文字を中央に */
  width: fit-content;      /* ← 幅を文字に合わせる（重要） */

  margin-bottom: 40px;


}



/* ==================================================================
【Home】もみじスライダー_説明文
================================================================== */
.home-momiji-text {
  font-size: 14px;
  max-width: none;
  margin: 0 0 10px 0;
}
@media screen and (max-width: 768px) {
  .home-momiji-text {
    max-width: 100%;   /* ← 横幅を制限 */
  }
}







/* ==================================================================
【Home】もみじスライダー_英語タイトルと日本語タイトルの間の横線
================================================================== */
.momiji-section .home-momiji-titlejp {
  width: 160px;
}




/* ==================================================================
【Home】もみじスライダー_More
================================================================== */
.home-momiji-more {
  font-size: 16px;
  opacity: 0.8;
  font-weight: bold;
  margin: 2px auto 12px;   /* ← 中央寄せ */
  padding-top: 2px;
  border-bottom: 1px solid rgba(0,0,0,0.3);
  text-align: center;      /* ← 文字を中央に */
  width: fit-content;      /* ← 幅を文字に合わせる（重要） */
  line-height: 0;
  padding-bottom: 0px;
  margin-bottom: 60px;
}
.home-momiji-more a {
  color: inherit;        /* 親の色をそのまま使う */
  text-decoration: none; /* 下線を消す */
}
.home-momiji-more:hover {
  opacity: 0.6;
  transition: opacity 0.2s;
}






/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */





/* ==================================================================
【Home】スライダー下の追加画像＋説明文章
================================================================== */
.about-add {


  position: relative;

  padding-bottom: 80px;

}

.about-wrap {
  margin-top: 80px; /* スライダーとの間隔 */
}

.about-add.is-last {
  padding-bottom: 150px; /* ← ここを変える */
}

.about-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  gap: 40px;
  align-items: center;
}




/* 左画像 */
.about-image {
  flex: 0 0 55%;
  position: relative;

}
.about-image img {
  width: 100%;
  max-width: 800px;
  height: auto;
  object-fit: cover;
  display: block;
  margin: 0;


}


/* 右テキスト */
.about-content {
  flex: 1;
  padding-top: 0px;

}
.about-content h2 {
  font-size: 17px;
  margin-bottom: 20px;
  opacity: 0.8;
  font-weight: bold;
  margin: 0;

  margin: 2px 0 12px;
  padding-top: 2px;



}








.about-content p {
  font-size: 14px;
  line-height: 1.6;
  max-width: none;
  margin: 0 0 10px 0 !important;
}



/* ふわっと表示（初期状態） */
.about-image,
.about-content {
  opacity: 0;
  transform: translateY(60px);
  transition: all 2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 表示状態 */
.about-image.show,
.about-content.show {
  opacity: 1;
  transform: translateY(0);
}








@media (max-width: 768px) {
  .about-add {
    padding-bottom: 50px; /* ← 80 → 40に */
  }

  .about-container {
    flex-direction: column;
    gap: 15px;
    padding: 0 16px; 

  }
  .about-image {
    padding-left: 0;   /* ←これが重要 */


  }
  .about-image img {
    width: 100%;     /* ← これで大きく */
    height: auto;    /* ← 縦も自然に */
    max-width: none; /* ← 制限解除 */

  }
  .about-content {
    max-width: 85%;
    margin: 0 auto;    /* ← 中央寄せ */
    width: 100%;


  }
}


















/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */



/* ==================================================================
【Home】周辺観光スライダー
================================================================== */
.tourism-section {
  padding: 200px 0;
  /* background-color: #f7f6f5; */   /* パールホワイト  */
  /* background-color: #f5f4ef; */
  background-color: #f5f4ef;

  padding-bottom: 150px;

}


/* 文字部分と画像部分のフワッと表示 */
.tourism-text,
.tourism-paint {
  opacity: 0;
  transform: translateY(60px);
  transition: all 2s cubic-bezier(0.22, 1, 0.36, 1);
}
.tourism-text.show {
  opacity: 1;
  transform: translateY(0);
}
.tourism-paint.show {
  opacity: 1;
  transform: translateY(0);
}




/* タイトル */
.tourism-title {
  text-align: center;
  margin-bottom: 40px;
}

.tourism-en {
  display: block;
  font-size: 28px;
  letter-spacing: 2px;
}

.tourism-ja {
  font-size: 14px;
  color: #666;
}






/* スライダー */
.tourismscrolling-wrapper {
  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;

  cursor: grab;

  touch-action: pan-y;

  scroll-behavior: auto;
  user-select: none;          /* 追加 */
  -webkit-user-select: none;  /* 追加 */
}

.tourismscrolling-wrapper::-webkit-scrollbar {
  display: none;
}

.tourismscrolling-wrapper.dragging {
  cursor: grabbing;
}

.tourismscrolling-track {
  display: flex;
  gap: 25px;
  width: max-content;
  will-change: transform;
  transform: translate3d(0,0,0);
}

.place-card img {
  pointer-events: none; /* 追加 */
  user-drag: none;
  -webkit-user-drag: none;
}


.tourismscrolling-wrapper {
  overflow: hidden;

  cursor: grab;

  touch-action: pan-y;

  user-select: none;
  -webkit-user-select: none;

  position: relative;
}

.tourismscrolling-wrapper.dragging {
  cursor: grabbing;
}













/* カード */
.place-card {
  width: 450px;
  flex-shrink: 0;
  text-align: center;
}

.place-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
}

/* タイトル */
.place-title {
  margin-top: 30px;
  font-size: 14px;
}

/* アニメーション */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}


.card-slider {
  position: relative;
  width: 100%;
  height: 500px;

  overflow: visible; /* ← hidden を visible に変更 */

  border-radius: 12px;
  margin-top: 25px;
}


/* 画像は全部重ねるが「必ず1枚見える設計」にする */
.card-slider img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  opacity: 0;

  transition: opacity 0.8s ease-in-out;

  z-index: 1;

  pointer-events: none;
}




/* 表示中 */
.card-slider img.active {
  opacity: 1;
  z-index: 2;

}






@media (max-width: 768px) {
  .tourism-section {
    padding: 175px 0;
    padding-bottom: 150px;
  }
  .place-card {
    /* width: 200px; */   /* スマホでは小さく */
    width: 260px;

  }
  .card-slider {
    /* height: 250px; */  /* 画像の高さを縮小 */
    height: 325px;
  }
  .place-title {
    font-size: 12px;
  }
  .tourismscrolling-track {
    /* gap: 20px; */ /* 間隔も少し詰める */
    gap: 10px;
  }
}





/* ==================================================================
【Home】周辺観光スライダー_説明文字部分
================================================================== */
.home-tourism-title {
  width: 80%;
  max-width: 800px;
  text-align: center;
  flex: 1;
  padding-top: 0px;
  display: inline-block;
  margin: 0 auto;
  display: block;
  margin-bottom: 30px;
}




/* ==================================================================
【Home】周辺観光スライダー_英語タイトル
================================================================== */
.home-tourism-titleen {
  font-size: 28px;
  letter-spacing: 2px;
  margin-bottom: 2px;
  font-weight: bold;
  margin: 0;
  /* text-align: left; */
}

/* ==================================================================
【Home】周辺観光スライダー_日本語タイトル
================================================================== */
.home-tourism-titlejp {
  font-size: 16px;
  opacity: 0.8;
  font-weight: bold;

  margin: 2px auto 12px;   /* ← 中央寄せ */
  padding-top: 2px;

  border-top: 1px solid rgba(0,0,0,0.3);

  text-align: center;      /* ← 文字を中央に */
  width: fit-content;      /* ← 幅を文字に合わせる（重要） */

  margin-bottom: 40px;


}



/* ==================================================================
【Home】周辺観光スライダー_説明文
================================================================== */
.home-tourism-text {
  font-size: 14px;
  max-width: none;
  margin: 0 0 10px 0;
}
@media screen and (max-width: 768px) {
  .home-tourism-text {
    max-width: 100%;   /* ← 横幅を制限 */
  }
}







/* ==================================================================
【Home】周辺観光スライダー_英語タイトルと日本語タイトルの間の横線
================================================================== */
.tourism-section .home-tourism-titlejp {
  width: 230px;
}




/* ==================================================================
【Home】周辺観光スライダー_More
================================================================== */
.home-tourism-more {
  font-size: 16px;
  opacity: 0.8;
  font-weight: bold;
  margin: 2px auto 12px;   /* ← 中央寄せ */
  padding-top: 2px;
  border-bottom: 1px solid rgba(0,0,0,0.3);
  text-align: center;      /* ← 文字を中央に */
  width: fit-content;      /* ← 幅を文字に合わせる（重要） */
  line-height: 0;
  padding-bottom: 0px;
  margin-bottom: 60px;
}
.home-tourism-more a {
  color: inherit;        /* 親の色をそのまま使う */
  text-decoration: none; /* 下線を消す */
}
.home-tourism-more:hover {
  opacity: 0.6;
  transition: opacity 0.2s;
}


/* ==================================================================
【Home】周辺観光スライダー_スライド画像下のドット
================================================================== */

.tourism-dots {
  position: absolute;
  bottom: -20px; 
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px; 
  z-index: 10; 

}
.tourism-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  /* background: white; */
  border: 1px solid #8c7a6b;
  cursor: pointer;
  transition: 0.3s all;



}
/* アクティブ */
.tourism-dots span.active {
  animation: fillDot 3s linear forwards;

}
/* アニメーション */
@keyframes fillDot {
  from { background: transparent; }
  to { background: #8c7a6b; }
}



/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ==================================================================
【Home】LOCATION
================================================================== */
.location-section {
  padding: 200px 0;
  background: #fffff9;   /* ミルキーホワイト */
  padding-bottom: 250px;
}

/* 文字部分と画像部分のフワッと表示 */
.location-text,
.location-video {
  opacity: 0;
  transform: translateY(60px);
  transition: all 2s cubic-bezier(0.22, 1, 0.36, 1);
}
.location-text.show {
  opacity: 1;
  transform: translateY(0);
}
.location-video.show {
  opacity: 1;
  transform: translateY(0);
}

/* タイトル */
.location-title {
  text-align: center;
  margin-bottom: 40px;
}

.location-en {
  display: block;
  font-size: 28px;
  letter-spacing: 2px;
}

.location-ja {
  font-size: 14px;
  color: #666;
}







/* ==================================================================
【Home】LOCATION_説明文字部分
================================================================== */
.home-location-title {
  width: 80%;
  max-width: 800px;
  text-align: center;
  flex: 1;
  padding-top: 0px;
  display: inline-block;
  margin: 0 auto;
  display: block;
  margin-bottom: 30px;
}


/* ==================================================================
【Home】LOCATION_英語タイトル
================================================================== */
.home-location-titleen {
  font-size: 28px;
  letter-spacing: 2px;
  margin-bottom: 2px;
  font-weight: bold;
  margin: 0;
  /* text-align: left; */
}

/* ==================================================================
【Home】LOCATION_日本語タイトル
================================================================== */
.home-location-titlejp {
  font-size: 16px;
  opacity: 0.8;
  font-weight: bold;

  margin: 2px auto 12px;   /* ← 中央寄せ */
  padding-top: 2px;

  border-top: 1px solid rgba(0,0,0,0.3);

  text-align: center;      /* ← 文字を中央に */
  width: fit-content;      /* ← 幅を文字に合わせる（重要） */
  margin-bottom: 40px;
}


/* ==================================================================
【Home】LOCATION_説明文
================================================================== */
.home-location-text {
  font-size: 14px;
  max-width: none;
  margin: 0 0 10px 0;
}
.last-location {
  margin-bottom: 30px;
}
.home-location-text1 {
  font-size: 14px;
  max-width: none;
  margin: 0 0 5px 0;
}
.first-location {
  font-size: 18px;
}

@media screen and (max-width: 768px) {
  .location-section {
    padding: 175px 0;
    padding-bottom: 200px;
  }
  .home-location-text {
    max-width: 100%;   /* ← 横幅を制限 */
  }
}

/* ==================================================================
【Home】LOCATION_英語タイトルと日本語タイトルの間の横線
================================================================== */
.location-section .home-location-titlejp {
  width: 180px;
}




/* ==================================================================
【Home】LOCATION_More
================================================================== */
.home-location-more {
  font-size: 16px;
  opacity: 0.8;
  font-weight: bold;
  margin: 2px auto 12px;   /* ← 中央寄せ */
  padding-top: 2px;
  border-bottom: 1px solid rgba(0,0,0,0.3);
  text-align: center;      /* ← 文字を中央に */
  width: fit-content;      /* ← 幅を文字に合わせる（重要） */
  line-height: 0;
  padding-bottom: 0px;
  margin-bottom: 60px;
}
.home-location-more a {
  color: inherit;        /* 親の色をそのまま使う */
  text-decoration: none; /* 下線を消す */
}
.home-location-more:hover {
  opacity: 0.6;
  transition: opacity 0.2s;
}


















/* ==================================================================
【Home】LOCATION_地図ズーム動画
================================================================== */
.location-video {
  width: 95%;
  max-width: 1125px;
  object-fit: cover;   /* ←重要：はみ出しを自然に切る */

  display: block;
  margin: 0 auto;   /* ←横中央揃え */

  border-radius: 12px;

  margin-top: 75px;


}




/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */