/* Global reset and base styles */
*,*::before,*::after{box-sizing:border-box}*{margin:0}html,body{height:100%}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}

/* Swiper styles (library) */

/* @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, 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');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:50%;background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;touch-action:none;background:rgba(0,0,0,.1)}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-next+.swiper-slide,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}/* ============================================ */
/* ローディング画面（Pace.js用） */
/* ============================================ */
/* ローディング完了時にメインコンテンツをフェードイン */
/* .pace-done #global-container {
  transition: opacity 1s;
  opacity: 1;
} */

/* 初期状態: メインコンテンツを非表示 */
/* #global-container {
  opacity: 0;
} */

/* ローディングインジケーターのコンテナ */
/* .pace {
  z-index: 2000;
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100px;
  height: 100px;
} */

/* 進捗テキストの表示エリア */
/* .pace .pace-progress {
  transform: none !important;
  text-align: center;
} */

/* 進捗パーセンテージの表示（data-progress-text属性から取得） */
/* .pace .pace-progress::after {
  content: attr(data-progress-text);
  display: block;
  font-weight: 100;
  font-size: 2em;
  font-family: "Klee One", cursive;
  color: #535353;
} */

/* ローディング完了時に非表示 */
/* .pace.pace-inactive { */
  /* display: none; */
/* } */

/* ロゴ画像表示用の設定 */
/* .pace-progress-inner { */
  /* 1. ロゴのサイズに合わせて調整してください */
  /* width: 100px;  */
  /* height: 100px; */
  
  /* 2. 背景色を透明にして、画像を指定します */
  /* background-color: transparent; 
  background-image: url("images/logo.webp"); /* ←ここにロゴ画像のパスを入れる */
  /* background-size: contain;   ロゴ全体が見えるように縮小 */
  /* background-repeat: no-repeat; */
  /* background-position: center; */
  
  /* margin: 0 auto; */

  /* 3.「ふわふわ」アニメーション */
  
  /* animation: logo-pulse 2s infinite ease-in-out;
} */ 

/* ふわふわ明滅するアニメーション（新規追加） */
/* @keyframes logo-pulse { */
  /* 0% { opacity: 0.5; transform: scale(0.95); } */
  /* 50% { opacity: 1; transform: scale(1.05); } */
  /* 100% { opacity: 0.5; transform: scale(0.95); } */
/* } */ 

/* ============================================ */
/* ローディング画面（完璧な「グルっと集結」版） */
/* ============================================ */

/* --- Pace.jsのデフォルト表示を非表示 --- */
.pace {
  display: none !important;
}

/* --- メインコンテンツのフェードイン --- */
#global-container {
  opacity: 0;
}
/* ★修正点1：爆速で読み込まれても「2秒待ってから」メインコンテンツを出す */
.pace-done #global-container {
  transition: opacity 1s 2s; 
  opacity: 1;
}

/* --- ローディング画面全体のベース --- */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
}

/* ★修正点2：爆速で読み込まれても「2秒待ってから」ローディング画面を消す */
body.pace-done #loading-screen {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-out 2s, visibility 0.8s ease-out 2s;
}

/* --- 4つの画像をまとめる枠 --- */
.wind-logo-container {
  position: relative;
  width: 250px;
  height: 250px;
  /* 集結完了後、全体をゆっくり回し続ける */
  animation: spinLogo 20s linear 2s infinite; 
}
@media screen and (min-width: 960px) {
  .wind-logo-container {
    width: 350px;
    height: 350px;
  }
}

/* --- 【魔法の仕掛け1】ラッパーが「180度の大きな回転」を担当 --- */
.rotation-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center;
  animation: sweepArc 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes sweepArc {
  0% { transform: rotate(-180deg); }
  100% { transform: rotate(0deg); }
}

/* --- 【魔法の仕掛け2】羽自体が「外から中心への直線移動」を担当 --- */
/* 回転と直線移動が組み合わさることで、美しい螺旋（スパイラル）軌道になります */
.feather {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0; /* 最初は透明 */
}

/* 紫（左上へ向かう：最初は画面の反対側から） */
@keyframes flyInPurple {
  /* scale(0)で極小状態から大きくなることで遠近感を強調 */
  0%   { transform: translate(-300px, -300px) scale(0); opacity: 0; }
  15%  { opacity: 1; } /* 開始直後にすぐ姿を見せる！ */
  100% { transform: translate(0, 0) scale(1); opacity: 1; }
}

/* ピンク（右上へ向かう） */
@keyframes flyInPink {
  0%   { transform: translate(300px, -300px) scale(0); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(0, 0) scale(1); opacity: 1; }
}

/* 水色（右下へ向かう） */
@keyframes flyInCyan {
  0%   { transform: translate(300px, 300px) scale(0); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(0, 0) scale(1); opacity: 1; }
}

/* オレンジ（左下へ向かう） */
@keyframes flyInOrange {
  0%   { transform: translate(-300px, 300px) scale(0); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(0, 0) scale(1); opacity: 1; }
}

/* 各羽にアニメーションを適用 */
.feather.purple { animation: flyInPurple 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.feather.pink   { animation: flyInPink   1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.feather.cyan   { animation: flyInCyan   1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.feather.orange { animation: flyInOrange 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }

/* 全体のゆっくり回転 */
@keyframes spinLogo {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* ============================================ */
/* 基本スタイル */
/* ============================================ */
/* フォントファミリーの設定 */
body {
  font-family: "Klee One", cursive;
}

/* 画像の基本スタイル */
img {
  max-width: 100%;
  vertical-align: bottom;
}

/* ============================================ */
/* ユーティリティクラス（マージン・パディング） */
/* ============================================ */
/* 小さいマージンボトム（16px） */
.mb-sm, .highlight__title, .programs__title, .pamphlet__img, .sub-title {
  margin-bottom: 16px !important;
}

/* 大きいマージンボトム（80px、PCでは150px） */
.mb-lg, .highlight__btn, .programs, .pamphlet {
  margin-bottom: 80px !important;
}
@media screen and (min-width: 960px) {
  .mb-lg, .highlight__btn, .programs, .pamphlet {
    margin-bottom: 150px !important;
  }
}

/* 小さいパディングボトム（16px） */
.pb-sm, .pamphlet__texts {
  padding-bottom: 16px !important;
}

/* 大きいパディングボトム（80px、PCでは150px） */
.pb-lg, .hero {
  padding-bottom: 80px !important;
}
@media screen and (min-width: 960px) {
  .pb-lg, .hero {
    padding-bottom: 150px !important;
  }
}

/* ============================================ */
/* レイアウトユーティリティ */
/* ============================================ */
/* コンテンツの最大幅を設定（90%幅、最大1070px） */
.content-width, .footer, .highlight__container, .highlight__header, .programs, .pamphlet, .header__inner {
  width: 90%;
  margin: 0 auto;
  max-width: 1070px;
}

/* Flexboxレイアウト（モバイル:縦並び、PC:横並び） */
.flex, .footer__ul, .footer__nav, .highlight__container, .programs__inner, .pamphlet__inner, .header__nav {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 600px) {
  .flex, .footer__ul, .footer__nav, .highlight__container, .programs__inner, .pamphlet__inner, .header__nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ============================================ */
/* カラーユーティリティ */
/* ============================================ */
/* 紫色（ブランドカラー） */
.purple {
  color: #4d7c5c;
}

.font-sm, .sub-title {
  font-size: 14px;
}
@media screen and (min-width: 960px) {
  .font-sm, .sub-title {
    font-size: 16px;
  }
}

.font-md, .highlight__title {
  font-size: 17px;
  color: #522e1d;
}
@media screen and (min-width: 960px) {
  .font-md, .highlight__title {
    font-size: 19px;
  }
}

.font-lr, .programs__title {
  font-size: 17px;
  color: #522e1d;
}
@media screen and (min-width: 960px) {
  .font-lr, .programs__title {
    font-size: 23px;
  }
}

.font-lg, .main-title {
  font-size: 25px;
}
@media screen and (min-width: 960px) {
  .font-lg, .main-title {
    font-size: 36px;
  }
}

.main-title {
  font-weight: 600;
  margin-bottom: 0;
  display: block;
  color: #522e1d;
}

.sub-title {
  color: #535353;
}

/* 「企画一覧」セクションのタイトル上の余白を広げる */
.programs .main-title {
  margin-top: 40px;
}

/* ============================================ */
/* スクロール連動アニメーション（Appear） */
/* ============================================ */
/* 上方向からフェードイン（初期位置: 下に6px） */
.appear.up .item {
  transform: translateY(6px);
}

/* 下方向からフェードイン（初期位置: 上に6px） */
.appear.down .item {
  transform: translateY(-6px);
}

/* 左方向からフェードイン（初期位置: 右に40px） */
.appear.left .item {
  transform: translateX(40px);
}

/* 右方向からフェードイン（初期位置: 左に40px） */
.appear.right .item {
  transform: translateX(-40px);
}

/* 初期状態: 非表示でアニメーション準備 */
.appear .item {
  transition: all 0.8s;
  opacity: 0;
}
/* ビューポートに入った時: 表示してアニメーション */
.appear.inview .item {
  opacity: 1;
  transform: none;
}
/* 各子要素に順番に遅延を設定（0.1sずつ） */
.appear.inview .item:nth-child(1) {
  transition-delay: 0.1s;
}
.appear.inview .item:nth-child(2) {
  transition-delay: 0.2s;
}
.appear.inview .item:nth-child(3) {
  transition-delay: 0.3s;
}
.appear.inview .item:nth-child(4) {
  transition-delay: 0.4s;
}
.appear.inview .item:nth-child(5) {
  transition-delay: 0.5s;
}
.appear.inview .item:nth-child(6) {
  transition-delay: 0.6s;
}
.appear.inview .item:nth-child(7) {
  transition-delay: 0.7s;
}
.appear.inview .item:nth-child(8) {
  transition-delay: 0.8s;
}
.appear.inview .item:nth-child(9) {
  transition-delay: 0.9s;
}
.appear.inview .item:nth-child(10) {
  transition-delay: 1s;
}

/* ============================================ */
/* ボタンスタイル */
/* ============================================ */
/* 基本ボタンスタイル */
.btn {
  position: relative;
  display: inline-block;
  background-color: white;
  border: 1px solid #522e1d;
  font-weight: 600;
  padding: 10px 40px;
  margin: 10px auto;
  cursor: pointer;
  transition: all 0.3s;
  color: #522e1d;
  text-decoration: none !important;
}
/* ホバー時に背景色が変わるボタン */
.btn.float:hover {
  background-color: #522e1d;
  color: white;
  box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
}
/* 塗りつぶしボタン（初期状態: 黒背景） */
.btn.filled {
  background-color: #522e1d;
  color: white;
  box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
}
/* 塗りつぶしボタンのホバー（白背景に変化） */
.btn.filled:hover {
  background-color: white;
  color: #522e1d;
  box-shadow: none;
}
/* ホバー時に文字間隔が広がるボタン */
.btn.letter-spacing:hover {
  background-color: #522e1d;
  letter-spacing: 3px;
  color: white;
}
/* ホバー時に影が消えるボタン */
.btn.shadow {
  box-shadow: none;
}
.btn.shadow:hover {
  transform: translate(-2.5px, -2.5px);
  box-shadow: 5px 5px 0 0 #522e1d;
}
/* 押し込み効果のあるボタン */
.btn.solid {
  box-shadow: 2px 2px 0 0 #522e1d;
  border-radius: 7px;
}
.btn.solid:hover {
  transform: translate(2px, 2px);
  box-shadow: none;
}
/* 背景が左からスライドするボタン */
.btn.slide-bg {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
/* スライドする背景（初期状態: 左側に隠れている） */
.btn.slide-bg::before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: #522e1d;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  transition: transform 0.3s;
  z-index: -1;
}
.btn.slide-bg:hover {
  color: white;
}
/* ホバー時に背景がスライドイン */
.btn.slide-bg:hover::before {
  transform: none;
}
/* 3Dカバーエフェクトボタン */
.btn.cover-3d {
  position: relative;
  z-index: 1;
  transform-style: preserve-3d;
  perspective: 300px;
}
.btn.cover-3d span {
  display: inline-block;
  transform: translateZ(20px);
}
/* 3D回転する背景（初期状態: 90度回転して非表示） */
.btn.cover-3d::before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: #522e1d;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateX(90deg);
  transition: all 0.3s;
  transform-origin: top center;
  opacity: 0;
}
.btn.cover-3d:hover {
  color: white;
}
/* ホバー時に3D回転して背景が現れる */
.btn.cover-3d:hover::before {
  transform: none;
  opacity: 1;
}

/* 3Dキュービックボタン（未使用のスタイル） */
.btn-cubic {
  position: relative;
  display: inline-block;
  transform-style: preserve-3d;
  perspective: 300px;
  width: 150px;
  height: 50px;
  margin: 0 auto;
  cursor: pointer;
  font-weight: 600;
}
.btn-cubic span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #522e1d;
  box-sizing: border-box;
  line-height: 48px;
  text-align: center;
  transition: all 0.3s;
  transform-origin: center center -25px;
  color: #522e1d;
}
.btn-cubic .hovering {
  background-color: #522e1d;
  color: white;
  transform: rotateX(90deg);
}
.btn-cubic .default {
  background-color: white;
  color: #522e1d;
  transform: rotateX(0);
}
.btn-cubic:hover .hovering {
  transform: rotateX(0);
}
.btn-cubic:hover .default {
  transform: rotateX(-90deg);
}

/* ============================================ */
/* ヒーロースライダー（カスタムスタイル） */
/* ============================================ */
/* Swiperコンテナのオーバーフローを表示（影が見えるように） */
.swiper {
  overflow: visible !important;
}

/* スライドの基本スタイル */
.swiper-slide {
  height: 500px;
  overflow: hidden;
}
/* PC表示時: 影を追加 */
@media screen and (min-width: 960px) {
  .swiper-slide {
    box-shadow: 0 8px 40px -10px rgba(0, 0, 0, 0.8);
  }
}
/* スライド内の画像（ズームイン効果） */
.swiper-slide > img,
.swiper-slide > picture > img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  transform: scale(1.3); /* 初期状態: 拡大 */
  transition: transform 1.9s ease;
}
/* picture要素を親要素いっぱいに広げる */
.swiper-slide > picture {
  display: block;
  width: 100%;
  height: 100%;
}
/* スライドのオーバーレイ（青みがかったフィルター） */
.swiper-slide::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 61, 125, 0.1);
}
/* アクティブなスライドはオーバーレイをなくして明るく表示 */
.swiper-slide-active::after {
  background-color: rgba(0, 61, 125, 0);
}
/* アクティブなスライド: 画像を通常サイズに */
.swiper-slide-active > img,
.swiper-slide-active > picture > img {
  transform: none;
}
/* アクティブなスライド: タイトルを表示 */
.swiper-slide-active .hero__title {
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* ヒーローセクション */
.hero {
  overflow: hidden;
  padding-top: 100px; /* ヘッダーの高さ分のパディング */
}

/* ヒーロー単一画像（スライダーなし） */
.hero--single .hero__image {
  width: 100%;
  min-height: 55vh;
  display: block;
}
.hero--single .hero__image picture {
  display: block;
  width: 100%;
  height: 100%;
}
.hero--single .hero__image img {
  width: 100%;
  height: 100%;
  min-height: 55vh;
  object-fit: cover;
  display: block;
  /* vertical-align: bottom; */
}
@media screen and (min-width: 960px) {
  .hero--single .hero__image {
    min-height: 0;
    height: 710px;
  }
  .hero--single .hero__image picture {
    height: 100%;
  }
  .hero--single .hero__image img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center center;
  }
}

/* ヒーロータイトル（中央配置、初期状態: 非表示） */
.hero__title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 20px));
  color: white;
  font-size: 25px;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease 1s, transform 0.3s ease 1s;
}
/* スクロールインジケーターのコンテナ */
.hero__footer {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 2;
  height: 68px;
  width: 22px;
  overflow: hidden;
}
/* 下向き矢印（アニメーション付き） */
.hero__downarrow {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 6px;
  animation-name: kf-arrow-anime;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
/* スクロールテキスト（90度回転） */
.hero__scrolltext {
  position: absolute;
  transform: rotate(90deg);
  color: rgba(255, 255, 255, 0.7);
  left: -8px;
  top: 11px;
  font-size: 1.2em;
}

/* 矢印の上下アニメーション */
@keyframes kf-arrow-anime {
  0%, 50%, 100% {
    transform: translateY(-10%);
  }
  30% {
    transform: none;
  }
}
/* ============================================ */
/* テキストアニメーション */
/* ============================================ */
/* 初期状態: 非表示 */
.animate-title,
.tween-animate-title {
  opacity: 0;
}
/* ビューポートに入った時: 表示 */
.animate-title.inview,
.tween-animate-title.inview {
  opacity: 1;
}
/* 文字単位で表示（JavaScriptで分割された各文字） */
.animate-title.inview .char,
.tween-animate-title.inview .char {
  display: inline-block;
}
/* 各文字の初期状態: 非表示 */
.animate-title .char,
.tween-animate-title .char {
  opacity: 0;
}

/* 文字ごとのアニメーション設定（CSS版） */
.animate-title.inview .char {
  animation-name: kf-animate-chars;
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.39, 1.57, 0.58, 1);
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: both;
}
/* 各文字に順番に遅延を設定（0.04sずつ、最大30文字まで） */
.animate-title.inview .char:nth-child(1) {
  animation-delay: 0.04s;
}
.animate-title.inview .char:nth-child(2) {
  animation-delay: 0.08s;
}
.animate-title.inview .char:nth-child(3) {
  animation-delay: 0.12s;
}
.animate-title.inview .char:nth-child(4) {
  animation-delay: 0.16s;
}
.animate-title.inview .char:nth-child(5) {
  animation-delay: 0.2s;
}
.animate-title.inview .char:nth-child(6) {
  animation-delay: 0.24s;
}
.animate-title.inview .char:nth-child(7) {
  animation-delay: 0.28s;
}
.animate-title.inview .char:nth-child(8) {
  animation-delay: 0.32s;
}
.animate-title.inview .char:nth-child(9) {
  animation-delay: 0.36s;
}
.animate-title.inview .char:nth-child(10) {
  animation-delay: 0.4s;
}
.animate-title.inview .char:nth-child(11) {
  animation-delay: 0.44s;
}
.animate-title.inview .char:nth-child(12) {
  animation-delay: 0.48s;
}
.animate-title.inview .char:nth-child(13) {
  animation-delay: 0.52s;
}
.animate-title.inview .char:nth-child(14) {
  animation-delay: 0.56s;
}
.animate-title.inview .char:nth-child(15) {
  animation-delay: 0.6s;
}
.animate-title.inview .char:nth-child(16) {
  animation-delay: 0.64s;
}
.animate-title.inview .char:nth-child(17) {
  animation-delay: 0.68s;
}
.animate-title.inview .char:nth-child(18) {
  animation-delay: 0.72s;
}
.animate-title.inview .char:nth-child(19) {
  animation-delay: 0.76s;
}
.animate-title.inview .char:nth-child(20) {
  animation-delay: 0.8s;
}
.animate-title.inview .char:nth-child(21) {
  animation-delay: 0.84s;
}
.animate-title.inview .char:nth-child(22) {
  animation-delay: 0.88s;
}
.animate-title.inview .char:nth-child(23) {
  animation-delay: 0.92s;
}
.animate-title.inview .char:nth-child(24) {
  animation-delay: 0.96s;
}
.animate-title.inview .char:nth-child(25) {
  animation-delay: 1s;
}
.animate-title.inview .char:nth-child(26) {
  animation-delay: 1.04s;
}
.animate-title.inview .char:nth-child(27) {
  animation-delay: 1.08s;
}
.animate-title.inview .char:nth-child(28) {
  animation-delay: 1.12s;
}
.animate-title.inview .char:nth-child(29) {
  animation-delay: 1.16s;
}
.animate-title.inview .char:nth-child(30) {
  animation-delay: 1.2s;
}

/* 文字アニメーション（下からフェードイン） */
@keyframes kf-animate-chars {
  0% {
    opacity: 0;
    transform: translateY(-50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================ */
/* 画像スライドエフェクト */
/* ============================================ */
/* カバースライドコンテナ */
.cover-slide {
  position: relative;
  overflow: hidden;
}
/* カバー要素（初期状態: 非表示） */
.cover-slide::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #eaebe6;
  opacity: 0;
}
/* ビューポートに入った時: カバースライドアニメーション開始 */
.cover-slide.inview::after {
  opacity: 1;
  animation-name: kf-cover-slide;
  animation-duration: 1.6s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: both;
}

/* カバースライドアニメーション（左から右へ、その後右から左へ消える） */
@keyframes kf-cover-slide {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50.1% {
    transform-origin: right;
    transform: scaleX(1);
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}
/* 画像ズームエフェクト（初期状態: 非表示） */
.img-zoom, .bg-img-zoom {
  opacity: 0;
}
/* ビューポートに入った時: 画像を表示してズームイン */
.inview .img-zoom, .inview .bg-img-zoom {
  opacity: 1;
  transition: transform 0.3s ease;
  animation-name: kf-img-show;
  animation-duration: 1.6s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
}
/* ホバー時: さらに拡大 */
.inview .img-zoom:hover, .inview .bg-img-zoom:hover {
  transform: scale(1.05);
}

/* 画像表示アニメーション（ズームイン効果） */
@keyframes kf-img-show {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  50.1% {
    opacity: 1;
    transform: scale(1.5); /* 拡大してから通常サイズに */
  }
  100% {
    opacity: 1;
  }
}
/* ホバー時に暗くなるオーバーレイ */
.hover-darken::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: background-color 0.3s ease;
  pointer-events: none;
  animation-name: kf-img-show;
  animation-duration: 1.6s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
}
/* ホバー時: 半透明の黒いオーバーレイを表示 */
.hover-darken:hover::before {
  background-color: rgba(0, 0, 0, 0.4);
}

/* 背景画像ズーム */
.bg-img-zoom {
  background-image: url(image-1.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
}

/* アスペクト比50%のコンテナ（画像の高さを維持） */
.img-bg50 {
  position: relative;
}
.img-bg50::before {
  display: block;
  content: "";
  padding-top: 50%; /* 高さを幅の50%に設定 */
}

/* ============================================ */
/* モバイルメニュー */
/* ============================================ */
/* モバイルメニューのコンテナ（右側に固定） */
.mobile-menu {
  position: fixed;
  right: 0;
  top: 60px;
  width: 300px;
}
/* PC表示時: ハンバーガーメニューをより広く表示 */
@media screen and (min-width: 960px) {
  .mobile-menu {
    width: 480px;
  }
}
.mobile-menu .logo {
  padding: 0 40px;
  font-size: 38px;
}
/* ハンバーガーメニューボタン（常に表示） */
.mobile-menu__btn {
  background-color: unset;
  border: none;
  outline: none !important;
  cursor: pointer;
}
/* ハンバーガーアイコンの線（3本） */
.mobile-menu__btn > span {
  background-color: #522e1d;
  width: 35px;
  height: 2px;
  display: block;
  margin-bottom: 9px;
  transition: transform 0.7s;
}
.mobile-menu__btn > span:last-child {
  margin-bottom: 0;
}
/* メニュー背景カバー（クリックで閉じる） */
.mobile-menu__cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s;
  cursor: pointer;
  z-index: 200;
}
/* メニューリスト（3D効果用） */
.mobile-menu__main {
  padding: 0;
  perspective: 2000px;
  transform-style: preserve-3d;
}
/* メニュー項目（初期状態: 奥に隠れている） */
.mobile-menu__item {
  list-style: none;
  display: block;
  transform: translate3d(0, 0, -1000px);
  padding: 0 40px;
  transition: transform 0.3s, opacity 0.2s;
  opacity: 0;
}
.mobile-menu__link {
  display: block;
  margin-top: 30px;
  color: #522e1d;
  text-decoration: none !important;
}

/* メニューが開いた時の状態 */
/* メインコンテナを左にスライド */
.menu-open #container {
  transform: translate(-300px, 60px);
  box-shadow: 0 8px 40px -10px rgba(0, 0, 0, 0.8);
}
/* PC表示時: メニュー幅に合わせてスライド量を増やす */
@media screen and (min-width: 960px) {
  .menu-open #container {
    transform: translate(-480px, 60px);
  }
}
/* 背景カバーを表示 */
.menu-open .mobile-menu__cover {
  opacity: 1;
  visibility: visible;
}
/* メニュー項目を表示（奥から手前に） */
.menu-open .mobile-menu__item {
  transform: none;
  opacity: 1;
}
/* ハンバーガーアイコンを×に変化 */
.menu-open .mobile-menu__btn > span {
  background-color: #522e1d;
}
/* 1本目の線: 下に移動して135度回転 */
.menu-open .mobile-menu__btn > span:nth-child(1) {
  transition-delay: 70ms;
  transform: translateY(11px) rotate(135deg);
}
/* 2本目の線: 左に移動して消える */
.menu-open .mobile-menu__btn > span:nth-child(2) {
  transition-delay: 0s;
  transform: translateX(-18px) scaleX(0);
}
/* 3本目の線: 上に移動して-135度回転 */
.menu-open .mobile-menu__btn > span:nth-child(3) {
  transition-delay: 140ms;
  transform: translateY(-11px) rotate(-135deg);
}

/* ============================================ */
/* ページレイアウト */
/* ============================================ */
/* 背景色のループアニメーション（#DEB6C4 → #DFBD99 → #A1CFCA → #BFB1D7） */
@keyframes bg-color-cycle {
  0% { background-color: #DEB6C4; }
  25% { background-color: #DFBD99; }
  50% { background-color: #A1CFCA; }
  75% { background-color: #BFB1D7; }
  100% { background-color: #DEB6C4; }
}

/* メインコンテナ（モバイルメニュー開閉時のスライドに使用） */
#container {
  position: relative;
  z-index: 10;
  background-color: #DEB6C4;
  animation: bg-color-cycle 40s ease-in-out infinite;
  transition: transform 0.5s, box-shadow 0.5s;
}

/* メインコンテンツエリア */
#main-content {
  position: relative;
  z-index: 0;
}

/* メインコンテンツ */
main {
  position: relative;
  z-index: -1;
}

/* ============================================ */
/* ヘッダー */
/* ============================================ */
/* 固定ヘッダー（常に白背景） */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: white;
  display: flex;
  align-items: center;
  z-index: 100;
}
/* スクロール時に影を追加（triggeredクラスが追加された時） */
.header.triggered {
  box-shadow: 10px 0 25px -10px rgba(0, 0, 0, 0.5);
}
/* ヘッダー内部（ロゴとナビゲーション） */
.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* ナビゲーションメニュー（常に非表示 - ハンバーガーメニューを使用） */
.header__nav {
  justify-content: space-between;
  align-items: center;
  text-align: center;
  display: none;
}
/* ナビゲーションリスト */
.header__ul {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
}
/* ナビゲーション項目 */
.header__li {
  margin: 10px;
}
@media screen and (min-width: 600px) {
  .header__li {
    margin-left: 30px;
    margin-right: 0;
  }
}
/* ナビゲーションリンク */
.header__li > a {
  color: #522e1d;
  text-decoration: none;
  text-transform: uppercase;
}
/* ヘッダー内のロゴ */
.header .logo {
  justify-content: center;
}
@media screen and (min-width: 600px) {
  .header .logo {
    font-size: 20px;
    justify-content: flex-start;
  }
}

/* ============================================ */
/* パンフレットセクション */
/* ============================================ */
/* パンフレットセクションのコンテナ */
.pamphlet__inner {
  position: relative;
  z-index: 0;
  justify-content: space-between;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: #eaebe6;
  padding: 15px;
}
@media screen and (min-width: 600px) {
  .pamphlet__inner {
    padding: 50px;
  }
}
@media screen and (min-width: 1280px) {
  .pamphlet__inner {
    padding: 50px 150px;
  }
}
/* PCでも動画とテキストを上下に表示する（動画上、テキスト下） */
@media screen and (min-width: 960px) {
  .pamphlet__inner {
    /* 強制的に縦並びに戻す（他のユーティリティで横並びになるため上書き） */
    flex-direction: column;
    align-items: stretch;
  }
  .pamphlet__img {
    width: 100%;
    height: auto;
    max-height: 640px;
  }
  .pamphlet__texts {
    width: 100%;
    display: block;
    padding-left: 0;
    padding-top: 24px;
  }
  .pamphlet__texts .pamphlet__texts-inner {
    width: 100%;
  }
}
@media screen and (max-width: 959px) {
  .pamphlet__img {
    width: 100%;
    height: auto;
    max-height: 320px;
  }
}
/* 画像コンテナ */
.pamphlet__img {
  height: 300px;
  transition: box-shadow 0.5s ease 1.6s;
}
/* ビューポートに入った時: 内側に影を追加 */
.pamphlet__img.inview {
  box-shadow: inset 0 0 30px #522e1d;
}
@media screen and (min-width: 600px) {
  .pamphlet__img {
    flex-basis: 47%;
  }
}
@media screen and (min-width: 960px) {
  .pamphlet__img {
    height: 400px;
  }
}
/* 画像 */
.pamphlet__img > img {
  position: relative;
  z-index: -1;
  opacity: 1;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
/* レスポンシブ動画埋め込み */
.pamphlet__video {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 アスペクト比 */
  overflow: hidden;
}
.pamphlet__video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* パンフレット用のカバースライド疑似要素が動画下に枠を作る問題を解消 */
.pamphlet .cover-slide::after {
  display: none !important;
}
/* 動画コンテナの高さを常にコンテンツに合わせる */
.pamphlet__img {
  height: auto !important;
  background: transparent !important;
  padding: 0 !important;
}
/* もし古い画像要素が残っていれば非表示にする（保険） */
.pamphlet__img .img-zoom {
  display: none !important;
}
/* テキストコンテンツ（PC: 右側に配置） */
@media screen and (min-width: 600px) {
  .pamphlet__texts {
    display: flex;
    align-items: flex-end;
    flex-basis: 47%;
  }
}
/* タイトルの左側に線を表示（アニメーション付き） */
.pamphlet__texts.inview .pamphlet__title::before {
  animation-name: scaleX;
  animation-duration: 0.3s;
  animation-timing-function: ease;
  animation-delay: 1.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
.pamphlet__title {
  position: relative;
}
/* タイトル左側の装飾線（PC表示時のみ） */
.pamphlet__title::before {
  display: none;
  position: absolute;
  content: "";
  height: 1px;
  width: 100px;
  top: 50%;
  left: -120px;
  background: #522e1d;
  transform: scaleX(0);
  transform-origin: right;
}
@media screen and (min-width: 960px) {
  .pamphlet__title::before {
    display: block;
  }
}
@media screen and (min-width: 960px) {
  .pamphlet__description {
    margin-bottom: 40px;
  }
}

/* 横方向のスケールアニメーション */
@keyframes scaleX {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}
/* ============================================ */
/* 企画カテゴリ一覧 */
/* ============================================ */
/* 宿泊先カード（PC: 2列表示） */
@media screen and (min-width: 600px) {
  .programs__item {
    flex-basis: 50%;
  }
}
@media screen and (min-width: 960px) {
  .programs__item {
    margin-bottom: 60px;
  }
}
/* もっと詳しくボタン */
.programs__btn {
  text-align: center;
  flex-basis: 100%;
}

/* ============================================ */
/* 注目企画（ハイライト） */
/* ============================================ */
/* ハイライトセクションのコンテナ */
.highlight__inner {
  position: relative;
}
/* 背景色（下部90%をグレーに） */
.highlight__inner::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 90%;
  width: 100%;
  background: #eaebe6;
}
/* 企画カードのコンテナ */
.highlight__container {
  position: relative;
  z-index: 2;
  justify-content: space-between;
}
@media screen and (max-width: 599px) {
  .highlight__container {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 0 8px 10px;
  }
  .highlight__container::-webkit-scrollbar {
    display: none;
  }
}
/* 観光地カード（レスポンシブ: モバイル1列、タブレット2列、PC4列） */
@media screen and (min-width: 600px) {
  .highlight__item {
    flex-basis: 47%;
  }
}
@media screen and (min-width: 960px) {
  .highlight__item {
    flex-basis: 25%;
  }
}
@media screen and (min-width: 1280px) {
  .highlight__item {
    flex-basis: 23%;
  }
}
@media screen and (max-width: 599px) {
  .highlight__item {
    flex: 0 0 78%;
    scroll-snap-align: center;
  }
}
/* 観光地画像 */
.highlight__img {
  height: 150px;
  margin-bottom: 5px;
}
@media screen and (min-width: 960px) {
  .highlight__img {
    height: 335px;
  }
}
.highlight__img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 599px) {
  .highlight__img {
    height: auto;
    aspect-ratio: 3 / 4;
    position: relative;
    overflow: hidden;
  }
  .highlight__img > img {
    position: absolute;
    inset: 0;
  }
}
/* 一覧から探すボタン */
.highlight__btn {
  text-align: center;
  flex-basis: 100%;
}
@media screen and (max-width: 599px) {
  .highlight__btn {
    flex: 0 0 78%;
    scroll-snap-align: center;
  }
}

/* ============================================ */
/* フッター */
/* ============================================ */
.footer {
  /* ビューポート幅で表示し、親コンテナの色が見えないようにする */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  box-sizing: border-box;
  margin: 0;
  padding: 60px 0;
  background: white;
}
.footer .logo,
.footer__nav {
  width: 90%;
  margin: 0 auto;
  max-width: 1070px;
}
.footer__nav {
  justify-content: space-between;
  align-items: center;
  text-align: center;
}
.footer__bottom {
  width: 90%;
  margin: 20px auto 0;
  max-width: 1070px;
}
.footer__social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.footer__social-link {
  color: #535353;
  text-decoration: none !important;
  position: relative;
  padding-left: 1.4em; /* アイコン分の余白 */
  letter-spacing: 1px;
}
.footer__social-link:hover {
  text-decoration: underline !important;
}
/* フッター内ではアイコンを左端に配置 */
.footer__social-link.icon::before {
  left: 0;
}
.footer__ul {
  list-style: none;
  padding: 0;
}
.footer__li {
  margin: 10px;
}
.footer__copyright {
  color: #522e1d;
}
@media screen and (min-width: 600px) {
  .footer__li {
    margin-left: 0;
    margin-right: 30px;
  }
}
.footer__li > a {
  color: #522e1d;
  text-decoration: none;
}
.footer > .logo {
  font-size: 20px;
  justify-content: center;
}
@media screen and (min-width: 600px) {
  .footer > .logo {
    justify-content: flex-start;
  }
}

/* ============================================ */
/* ロゴ */
/* ============================================ */
.logo {
  font-size: 20px;
  display: flex;
  color: #522e1d;
}
.logo__img {
  width: 0.7em;
}
.logo__world {
  color: #4d7c6b; /* ブランドカラー */
}

/* ============================================ */
/* サイドバー（SNSリンク・コピーライト） */
/* ============================================ */
/* サイドバー（モバイル: 非表示、大画面PC: 表示） */
.side {
  display: none;
  position: fixed;
  top: 70%;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}
@media screen and (min-width: 1280px) {
  .side {
    display: block;
  }
}
.side .tween-animate-title {
  color: #522e1d;
  text-decoration: none !important;
  margin: 0 40px;
  vertical-align: middle;
  letter-spacing: 2px;
}
/* 左サイドバー（初期状態: 左側に隠れている） */
.side.left {
  left: -50px;
}
/* ビューポートに入った時: 左からスライドイン */
.side.left.inview {
  left: 50px;
}
/* 左サイドバーの内容を-90度回転（縦書き表示） */
.side.left .side__inner {
  transform-origin: top left;
  transform: rotate(-90deg);
}
/* 右サイドバー（初期状態: 右側に隠れている） */
.side.right {
  right: -50px;
}
/* ビューポートに入った時: 右からスライドイン */
.side.right.inview {
  right: 50px;
}
/* 右サイドバーの内容を90度回転（縦書き表示） */
.side.right .side__inner {
  transform-origin: top right;
  transform: rotate(90deg);
}

/* ============================================ */
/* アイコン（SNSリンク用） */
/* ============================================ */
.icon {
  position: relative;
}
/* アイコンの疑似要素（SVG画像を表示） */
.icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -20px;
  width: 1em;
  height: 1em;
  transform: translateY(-50%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
/* Twitterアイコン */
.icon.twitter::before {
  background-image: url(images/twitter.svg);
}
/* Facebookアイコン */
.icon.fb::before {
  background-image: url(images/instagram.svg);
}

/* ============================================ */
/* 風の模様（ウェーブ装飾）アニメーション */
/* ============================================ */
.wind-decoration-area {
  position: relative;
  width: 100%;
  height: 90px; /* 帯エリアの高さ */
  overflow: visible;
  margin: 30px 0; /* 前後のセクションとの余白 */
  opacity: 0.85; /* 全体を少し透けさせて馴染ませる */
}

/* 個別の波の共通設定 */
.wind-wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: repeat-x;
  background-position: left center;
}

/* --- 紫の風 --- */
.wind-wave.purple {
  /* なだらかな上向きの波 */
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1000 100" xmlns="http://www.w3.org/2000/svg"><path d="M 0 50 Q 250 10, 500 50 T 1000 50" fill="none" stroke="%23DCD3E6" stroke-width="12"/></svg>');
  background-size: 1000px 100%;
  animation: wind-move-1000 15s linear infinite;
  z-index: 1;
}

/* --- ピンクの風 --- */
.wind-wave.pink {
  /* 少し深めの下向きの波 */
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1000 100" xmlns="http://www.w3.org/2000/svg"><path d="M 0 50 Q 250 90, 500 50 T 1000 50" fill="none" stroke="%23F4D3E0" stroke-width="8"/></svg>');
  background-size: 1200px 100%; /* 長さを変えて波をズラす */
  animation: wind-move-1200 12s linear infinite;
  z-index: 2;
  top: -10px; /* 少し上に配置 */
}

/* --- 水色の風 --- */
.wind-wave.cyan {
  /* 鋭い上向きの波 */
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1000 100" xmlns="http://www.w3.org/2000/svg"><path d="M 0 50 Q 250 -10, 500 50 T 1000 50" fill="none" stroke="%23CDE5DE" stroke-width="15"/></svg>');
  background-size: 800px 100%;
  animation: wind-move-800 18s linear infinite;
  z-index: 3;
  top: 15px;
}

/* --- オレンジの風 --- */
.wind-wave.orange {
  /* 大きな下向きの波 */
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1000 100" xmlns="http://www.w3.org/2000/svg"><path d="M 0 50 Q 250 110, 500 50 T 1000 50" fill="none" stroke="%23F4DDC4" stroke-width="10"/></svg>');
  background-size: 1500px 100%;
  animation: wind-move-1500 20s linear infinite;
  z-index: 4;
}

/* --- 風が右から左へ流れるアニメーション --- */
@keyframes wind-move-1000 {
  0% { background-position: 0 center; }
  100% { background-position: -1000px center; }
}
@keyframes wind-move-1200 {
  0% { background-position: 0 center; }
  100% { background-position: -1200px center; }
}
@keyframes wind-move-800 {
  0% { background-position: 0 center; }
  100% { background-position: -800px center; }
}
@keyframes wind-move-1500 {
  0% { background-position: 0 center; }
  100% { background-position: -1500px center; }
}

/* --- 逆向きの風（左から右へ）にする追加クラス --- */
.wind-decoration-area.reverse-wind {
  transform: scaleX(-1); /* 左右を反転させる魔法のコード */
}

/* --- ヒーローセクションのベース設定 --- */
.hero--single {
  position: relative; /* 風を画像の上に浮かせる基準にします */
  width: 100%;
  overflow: hidden;
  padding-top: 100px; /* ヘッダー分の余白 */
}

.hero__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- ヒーローセクション（親）の設定 --- */
.hero--single {
  position: relative;
  width: 100%;
  overflow: visible; 
  padding-top: 100px;
}

/* --- 画像の上に重ねる風（子）の設定 --- */
.hero-wind-top,
.hero-wind-bottom {
  position: absolute;
  left: 0;
  width: 100%;
  height: 60px;
  margin: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0.8;
  
  overflow: visible;
}

/* 上部の風の配置を調整 */
.hero-wind-top {
  /* 画像の上端にピタッと合わせる */
  top: 100px; 
}

/* 下部の風の配置を調整 */
.hero-wind-bottom {
  /* 画像の下端にピタッと合わせる */
  bottom: 150px;

  overflow: visible;
}