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

/* cssには、以下の内容が含まれています。セクションごとに整理して説明します：

## 1. グローバルリセットと基本スタイル
- CSSリセット（box-sizing, margin, paddingの初期化）
- 基本的なフォント設定（Klee Oneフォント）
- 画像やメディア要素の基本スタイル

## 2. Swiperライブラリのスタイル
- Swiper.js（スライダーライブラリ）の全スタイル
- スライド、ナビゲーション、ページネーションなどのスタイル

## 3. ローディング画面（Pace.js用）
- コメントアウトされた古いローディングスタイル
- 現在の「グルっと集結」アニメーションのローディング画面
- メインコンテンツのフェードイン制御

## 4. 基本スタイル
- フォントファミリー設定
- 画像の基本スタイル

## 5. ユーティリティクラス
- マージン・パディングのユーティリティ（mb-sm, pb-lgなど）
- レイアウトユーティリティ（content-width, flexなど）
- カラーユーティリティ（purple, font-smなど）

## 6. スクロール連動アニメーション（Appear）
- 要素がビューポートに入った時のアニメーション
- 上・下・左・右からのフェードイン

## 7. ボタンスタイル
- 各種ボタンのスタイル（btn, btn.float, btn.filledなど）
- ホバー効果（影、背景色変更、スライドなど）

## 8. モバイルメニュー
- ハンバーガーメニューのスタイル
- メニュー開閉時のアニメーション
- 3D効果とスライドアニメーション

## 9. ページレイアウト
- メインコンテナの背景色アニメーション
- コンテンツエリアの設定

## 10. ヘッダー
- 固定ヘッダーのスタイル
- スクロール時の影効果
- ロゴとナビゲーションの配置

## 11. ロゴ
- ロゴのフォントサイズと色設定
- ブランドカラーの適用

## 12. サイドバー（SNSリンク・コピーライト）
- サイドバーの表示・非表示制御
- 縦書きテキストとスライドインアニメーション

## 13. アイコン（SNSリンク用）
- Twitter, InstagramアイコンのSVG表示
- アイコンの位置調整

## 14. フッター
- フッターのレイアウトとスタイル
- ロゴ、ナビゲーション、SNSリンクの配置
- レスポンシブ対応 */

/* このCSSファイルは、サイト全体で共通して使用されるスタイルを集めたもので、ハンバーガーメニュー、ヘッダー、フッター、ローディング画面などの共有要素を定義しています。各ページ固有のスタイルは、個別のCSSファイル（例: about.css, shinkan.css）で管理されています。 */

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

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

/* ============================================ */
/* 風の模様（ウェーブ装飾）アニメーション */
/* ============================================ */
.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;
  background-color: transparent;
  mix-blend-mode: normal;
  animation-iteration-count: infinite;
}

.wind-wave.purple {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20100'%3E%3Cpath%20d='M0%2050%20Q250%2010%20500%2050%20T1000%2050'%20fill='none'%20stroke='%23DCD3E6'%20stroke-width='12'%2F%3E%3C%2Fsvg%3E");
  background-size: 1000px 100%;
  animation: wind-move-1000 15s linear infinite;
  z-index: 1;
}

.wind-wave.pink {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20100'%3E%3Cpath%20d='M0%2050%20Q250%2090%20500%2050%20T1000%2050'%20fill='none'%20stroke='%23F4D3E0'%20stroke-width='8'%2F%3E%3C%2Fsvg%3E");
  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,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20100'%3E%3Cpath%20d='M0%2050%20Q250%20-10%20500%2050%20T1000%2050'%20fill='none'%20stroke='%23CDE5DE'%20stroke-width='15'%2F%3E%3C%2Fsvg%3E");
  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,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20100'%3E%3Cpath%20d='M0%2050%20Q250%20110%20500%2050%20T1000%2050'%20fill='none'%20stroke='%23F4DDC4'%20stroke-width='10'%2F%3E%3C%2Fsvg%3E");
  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); }

/* ============================================ */
/* ユーティリティクラス（マージン・パディング） */
/* ============================================ */
/* 小さいマージンボトム（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);
}

/* ============================================ */
/* モバイルメニュー */
/* ============================================ */
/* モバイルメニューのコンテナ（右側に固定） */
.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;
  }
}

/* ============================================ */
/* ロゴ */
/* ============================================ */
.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);
}

/* ============================================ */
/* フッター */
/* ============================================ */
.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;
  }
}