/* ======================================= 
   ファイル名: side-content-layout.css（交互構成セクション：竹千代・フルリキッド・ダイナミック版）
   ======================================= */

/* 専用のラッパー（他への干幹防止） */
.side-content-container {
  width: 100%;
  box-sizing: border-box;
}

.side-content-container .side-content-section {
  width: 94%; 
  max-width: 1620px; 
  margin: 140px auto 220px; 
  padding: 0; 
  box-sizing: border-box;
  font-family: "Yu Mincho", "游明朝体", serif;
  color: #4a2e1d; 
}

/* ======================================= 
   【重要】導入エリア（ヘッダー部分）の完全最適化
   ======================================= */

/* 導入エリアの親：位置計算のベースにする */
.side-content-container .side-content-header {
  display: block; 
  text-align: center; 
  margin-bottom: 60px; 
  position: relative; /* 子要素の絶対配置の基準にする */
  height: 180px; /* 💡【修正】120pxから180pxへ拡大：縦線を伸ばした分の高さを確保 */
}

/* 導入エリアの縦線：最上部に独立して配置 */
.side-content-container .side-content-header .header-line {
  width: 1px;
  height: 110px; /* 💡【修正】60pxから110pxへ変更：縦ラインをしっかりと下に伸ばす */
  background-color: #C49B6C; 
  margin: 0 auto 40px !important; /* 💡下に40pxの確実な隙間を開け、文字との被りを絶対防止 */
  display: block;

  /* アニメーション初期設定 */
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 1.0s cubic-bezier(0.25, 1, 0.5, 1), transform 1.0s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 導入エリアのタイトル（客室・料理）：💡画面の完全な真ん中（センター）に固定 */
.side-content-container .side-content-header .header-title {
  writing-mode: vertical-rl; 
  -webkit-writing-mode: vertical-rl;
  text-orientation: mixed;
  display: block; 
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.3em; 
  color: #4a2e1d;
  line-height: 1.0; 
  white-space: nowrap; 
  
  /* 💡位置を画面の完全な中心に固定する数学的配置 */
  position: absolute;
  top: 150px; /* 💡【修正】100pxから150pxへ変更：伸びた縦ライン（110px）＋余白（40px）の下からスタート */
  left: 50%;
  transform: translateX(-50%) translateY(20px) !important; 
  margin: 0 !important;

  /* アニメーション初期設定 */
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 導入エリアのキャッチコピー（静風朗月、四季の恵みなど）：💡2行を「右から流す」に並べる */
.side-content-container .side-content-header .header-subtitle {
  writing-mode: vertical-rl; 
  -webkit-writing-mode: vertical-rl;
  text-orientation: mixed;
  display: flex !important; /* 💡Flexboxを開始 */
  flex-direction: column !important; /* 💡縦書き軸での「column Rhine」が、和文を右から左へ並べる正しい指定です */
  gap: 14px; /* 💡1行目と2行目の間の「行間（隙間）」を確保 */
  font-size: 14px;
  letter-spacing: 0.25em; 
  color: #666666;
  line-height: 1.0; 
  white-space: nowrap; 
  
  /* 💡画面中心（left: 50%）から、2行に広がった幅を計算して美しく左側へ配置（44pxから58pxへ微調整） */
  position: absolute;
  top: 30px; /* 💡【修正} 10pxから30pxへ変更：長い縦線に対してバランスの良い高さに微調整 */
  left: 50%;
  transform: translateX(calc(-50% - 58px)) translateY(20px) !important; 
  margin: 0 !important;

  /* アニメーション初期設定 */
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 💡各行を確実な独立した独立ブロックとして縦書き認識させる */
.side-content-container .side-content-header .header-subtitle span {
  display: block !important;
}

/* 💡左側の2行目の頭をしっかりと（4.2em分）下げて、奥行きのある美しい配置に（完全維持） */
.side-content-container .side-content-header .header-subtitle span:last-child {
  margin-top: 4.2em !important;
}

/* アニメーション発火時（導入エリア） */
.side-content-container .side-content-header .header-line.is-animated {
  opacity: 1;
  transform: translateY(0);
}
.side-content-container .side-content-header .header-title.is-animated {
  opacity: 1;
  transform: translateX(-50%) translateY(0) !important;
}
.side-content-container .side-content-header .header-subtitle.is-animated {
  opacity: 1;
  transform: translateX(calc(-50% - 58px)) translateY(0) !important;
}


/* ======================================= 
   画像およびメインコンテンツエリア
   ======================================= */

/* メイン画像 */
.side-content-container .side-content-section .main-image-wrapper img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10; 
  border-radius: 4px 0 0 4px; 
  box-shadow: 0 10px 35px rgba(74, 46, 29, 0.06); 
  display: block;
  margin-bottom: 0;
  object-fit: cover;
}

/* 各ブロックのアニメーション初期設定 */
.side-content-container .side-content-section .main-image-wrapper,
.side-content-container .side-content-section .image-grid {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.4s cubic-bezier(0.25, 1, 0.5, 1), transform 1.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* テキストブロック専用（料理セクションなどの表示切れを絶対防止する設定） */
.side-content-container .side-content-section .content-wrapper-inner {
  opacity: 0;
  visibility: hidden; /* 初期は隠す */
  transform: translateY(40px);
  transition: opacity 1.4s cubic-bezier(0.25, 1, 0.5, 1), transform 1.4s cubic-bezier(0.25, 1, 0.5, 1), visibility 1.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity;
}

/* アニメーション発火時（コンテンツ） */
.side-content-container .side-content-section .main-image-wrapper.is-animated,
.side-content-container .side-content-section .image-grid.is-animated {
  opacity: 1;
  transform: translateY(0);
}

.side-content-container .side-content-section .content-wrapper-inner.is-animated {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* コンテンツの横並び基本設定 */
.side-content-container .side-content-section .content-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  gap: 0px; 
  width: 100%;
  position: relative;
  box-sizing: border-box;
}

/* --- タブレット・PC共通レイアウト（769px以上すべてに適用） --- */
@media (min-width: 769px) {
  
  .side-content-container .side-content-section .image-block {
    display: flex !important;
    align-items: flex-start; 
    gap: 0px; 
    /* 💡【修正】PC表示時の過度な画像拡大を防ぐため最大幅を設定 */
    max-width: 1200px;
    width: 100%; 
    /* 💡【修正】全体のレイアウト軸は中央配置にし、画面幅による全体の崩れ・極端な横ズレを防ぐ */
    margin: 0 auto !important;
    box-sizing: border-box;
    /* 💡【修正】ズームアウト時の横幅計算の狂いによるカラム落ち（縦並びへの崩れ）を絶対防止 */
    flex-wrap: nowrap !important;
  }
  
  .side-content-container .side-content-section .main-image-wrapper {
    /* 💡【修正】3番目の数値を0から1にし、極端な大画面・ズームアウト時も柔軟な縮小を許可 */
    flex: 0 1 72%; 
    min-width: 0; 
  }

  .side-content-container .side-content-section .image-grid {
    display: block;
    flex: 0 1 25%; 
    box-sizing: border-box;
    /* 💡【調整】PC表示でサブ画像をさらに上に引き上げるため、ネガティブマージンを適用 */
    margin: clamp(-80px, -5vw, -30px) 0 0 0; 
    position: relative;
    z-index: 2; 
  }
  
  .side-content-container .side-content-section .image-vertical {
    width: 100%; 
    height: auto;
    aspect-ratio: 3 / 4.5; 
    object-fit: cover;
    border-radius: 0 4px 4px 0; 
    box-shadow: 10px 15px 30px rgba(74, 46, 29, 0.1); 
  }

  /* 【白背景テキストエリア：PC版余白最適化】 */
  .side-content-container .side-content-section .content-wrapper-inner {
    /* 💡【修正】スマートで引き締まった「縦に長い長方形」にするため、最大幅を 380px に設定 */
    max-width: 380px; 
    width: 100%;
    
    /* 💡【PC表示のみさらに上方へ調整】白背景のテキストエリアをさらにガッツリと上に引き上げ（-360pxから最大-500pxのレンジへ強化） */
    margin-top: clamp(-430px, -28vw, -180px);
    
    text-align: left;
    background-color: rgba(255, 255, 255, 0.97); 
    /* 💡【修正】縦長な長方形プレートとしての美しさを出すため、上下パディングを 55px に深く、左右パディングを 35px に調整 */
    padding: 55px 35px; 
    border-radius: 4px;
    box-shadow: 0 25px 60px rgba(74, 46, 29, 0.1);
    z-index: 5; 
    box-sizing: border-box;
    position: relative;
  }
  
  /* 💡【意匠維持】奇数項目（客室など）：テキスト群を「若干右」に配置する左右非対称マージンを縦長化に合わせて調整（重なりの安定感を持たせるため 24% に調整） */
  .side-content-container .side-content-section .content-wrapper-inner {
    margin-left: auto;
    margin-right: 24%; 
  }
  
  /* 💡【意匠維持】偶数項目（料理など）：テキスト群を「若干左」に配置する左右非対称マージンを縦長化に合わせて調整（重なりの安定感を持たせるため 24% に調整） */
  .side-content-container .side-content-section:nth-of-type(even) .content-wrapper-inner {
    margin-left: 24%; 
    margin-right: auto;
  }

  .side-content-container .side-content-section .text-area {
    max-width: 100%;
  }

  /* 💡くどい重複タイトル削除用として設定のみ完全維持（HTML側から消すことで非表示と同等にする） */
  .side-content-container .side-content-section .section-title {
    font-size: 28px;
    font-weight: 600;
    border-bottom: 1px solid #C49B6C; 
    padding-bottom: 10px;
    margin-bottom: 24px;
    position: relative;
    color: #4a2e1d;
  }
  .side-content-container .side-content-section .section-title .title-ja {
    font-size: 28px;
    margin-right: 16px;
  }
  .side-content-container .side-content-section .section-title .title-en {
    font-size: 13px; 
    letter-spacing: 0.3em;
    font-weight: 600;
    text-transform: uppercase;
    opacity: 0.8;
    border-bottom: none;
    vertical-align: middle;
  }

  /* 💡PC表示では特定の改行指定（.sp-only-br）を無効化 */
  .side-content-container .side-content-section .subtitle .sp-only-br {
    display: none;
  }

  /* 【PC版：要素間マージンの縮小と強弱調整】 */
  .side-content-container .side-content-section .subtitle {
    font-size: 20px; 
    font-weight: 600;
    margin-bottom: 24px; /* 💡【修正】タイトル削除に合わせて30pxから24pxへ縮小 */
    color: #4a2e1d;
    line-height: 1.5;
    /* 🌟PC表示時：テキスト幅に応じたゴールドのアンダーバーを追加 */
    border-bottom: 1.5px solid #C49B6C;
    padding-bottom: 12px;
    display: inline-block;
  }
  .side-content-container .side-content-section .description {
    font-size: 14.5px; 
    line-height: 1.85; 
    margin-bottom: 32px; /* 💡【修正】ボタンとの距離を40pxから32pxへ縮小し視線誘導を最適化 */
    color: #333333;
  }
  .side-content-container .side-content-section .btn-detail {
    display: inline-block;
    padding: 14px 50px; 
    font-size: 14px;
    font-weight: 600;
    color: #C49B6C; 
    border: 2px solid #C49B6C; 
    background-color: transparent;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 4px;
    margin: 0;
  }
  .side-content-container .side-content-section .btn-detail:hover {
    background-color: #C49B6C;
    color: #fff;
  }

  /* 💡【意匠維持】偶数セクションのメイン・サブ画像反転構造（row-reverse）はそのまま完全維持 */
  .side-content-container .side-content-section:nth-of-type(even) .image-block {
    flex-direction: row-reverse !important;
    /* 💡全体のレイアウト軸は中央寄せにするため、左右のマージンだけ自動調整 */
    margin: 0 auto !important; 
  }
  .side-content-container .side-content-section:nth-of-type(even) .main-image-wrapper img {
    border-radius: 0 4px 4px 0; 
  }
  .side-content-container .side-content-section:nth-of-type(even) .image-vertical {
    border-radius: 4px 0 0 4px; 
    box-shadow: -10px 15px 30px rgba(74, 46, 29, 0.1); 
  }
}

/* --- 【タブレット専用調整】（769px〜1024px） --- */
@media (min-width: 769px) and (max-width: 1024px) {
  .side-content-container .side-content-section {
    margin: 60px auto 120px; 
  }
  .side-content-container .side-content-section .main-image-wrapper {
    /* 💡【修正】タブレット環境でも柔軟な縮小（カラム落ち防止）を許可 */
    flex: 0 1 70%;
  }
  .side-content-container .side-content-section .image-grid {
    /* 💡【修正】タブレット環境でも柔軟な縮小（カラム落ち防止）を許可 */
    flex: 0 1 28%;
    
    /* 💡【調整】タブレット表示で、ここからさらにサブ画像をしっかり上へ引き上げる設定 */
    margin: -45px 0 0 0 !important;
    position: relative;
    z-index: 2;
  }
  
  /* 💡【意匠維持】タブレット表示時におけるテキスト群の左右ジグザグ配置マージン（縦長化に伴い 8% でバランス調整） */
  .side-content-container .side-content-section .content-wrapper-inner {
    /* 💡【修正】タブレットでも同様にスマートな「縦に長い長方形」にするため、最大幅を 340px に調整 */
    max-width: 340px; 
    /* 💡【修正】タブレット内での美しい折り返しを実現するためパディングを縦長に調整 */
    padding: 45px 30px; 
    
    /* 💡【タブレット個別固定】PCの引き上げ（-500px）が干渉しないよう、元の適切な位置（-130px付近）で上書きして位置をキープ */
    margin-top: clamp(-130px, -12vw, -50px) !important; 
    margin-right: 8% !important;
  }
  .side-content-container .side-content-section:nth-of-type(even) .content-wrapper-inner {
    margin-left: 8% !important;
    margin-right: auto !important;
  }

  /* 🌟タブレット表示時の見出しフォントサイズを大きく調整し本文より目立たせる */
  .side-content-container .side-content-section .subtitle {
    font-size: 22px !important;
  }
}

/* --- 完全なスマホ対応（768px以下のみ） --- */
@media (max-width: 768px) {
  .side-content-container .side-content-section {
    display: flex;
    flex-direction: column;
    margin: 30px 0 100px; 
    width: 100%; 
    padding: 0; 
  }
  
  /* スマホ表示時の導入エリア調整 */
  .side-content-container .side-content-header {
    margin-bottom: 45px;
    height: 140px; /* 💡【修正】90pxから140pxへ拡大 */
  }
  .side-content-container .side-content-header .header-line {
    height: 80px; /* 💡【修正】45pxから80pxへ変更：スマホでもしっかり伸ばす */
    margin-bottom: 25px; 
  }
  .side-content-container .side-content-header .header-title {
    font-size: 22px;
    top: 105px; /* 💡【修正】70pxから105pxへ変更：伸びた縦線（80px）＋余白（25px）に追従 */
  }
  .side-content-container .side-content-header .header-subtitle {
    font-size: 13px;
    top: 15px; /* 💡【修正】5pxから15pxへ変更：バランス調整 */
    gap: 8px; /* 💡スマホ用に2行の間隔を少しコンパクトに調整 */
    transform: translateX(calc(-50% - 42px)) translateY(20px) !important; /* スマホ版初期移動量 */
  }

  /* スマホ版アニメーション発火位置上書き */
  .side-content-header .header-subtitle.is-animated {
    transform: translateX(calc(-50% - 42px)) translateY(0) !important;
  }
  
  .side-content-container .side-content-section .content-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 0;
    width: 100%;
    box-sizing: border-box;
  }

  /* 【画像ブロックの構成・比率・2枚並びの構造を完全維持】 */
  .side-content-container .side-content-section .image-block {
    display: flex !important; 
    align-items: flex-start; 
    gap: 0px; 
    margin: 0; 
    width: 100%; 
    box-sizing: border-box;
  }
  
  .side-content-container .side-content-section .main-image-wrapper {
    flex: 0 0 72%; 
    min-width: 0; 
  }
  .side-content-container .side-content-section .main-image-wrapper img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    margin-bottom: 0 !important;
    border-radius: 0; 
    box-shadow: none;
  }

  .side-content-container .side-content-section .image-grid {
    display: block;
    flex: 0 0 28%; 
    box-sizing: border-box;
    flex-shrink: 0;
    
    /* 💡【調整】スマホ表示でも、サブ画像をさらに少し上へ引き上げ */
    margin: -3vw 0 0 0 !important; 
    position: relative;
    z-index: 2; 
    padding: 0 !important;
  }
  .side-content-container .side-content-section .image-vertical {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4.5; 
    border-radius: 0; 
    box-shadow: none;
    object-fit: cover;
  }

  /* 【スマホ版：テキストとボタンのエリ面余白最適化】 */
  .side-content-container .side-content-section .content-wrapper-inner {
    max-width: 400px; 
    width: 90%; 
    
    /* 💡【調整】スマホ版もサブ画像上昇によるめり込み過ぎを防ぐため、数値をやや抑えめに再計算 */
    margin-top: max(-55px, -8vw) !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 30px 20px !important; /* 💡【修正】タイトル削除に伴いスマホ内の内側余白をさらに引き締め */
    background-color: rgba(255, 255, 255, 0.97) !important; 
    border-radius: 4px;
    box-shadow: 0 15px 40px rgba(74, 46, 29, 0.1) !important; 
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; 
    box-sizing: border-box;
    z-index: 5; 
    position: relative;
  }

  .side-content-container .side-content-section .text-area {
    display: block;
    width: 100%;
  }

  /* 💡スマホ版重複タイトル用（HTML削除に備え設定のみ完全維持） */
  .side-content-container .side-content-section .section-title {
    font-size: 24px;
    font-weight: 600;
    border-bottom: 1px solid #C49B6C;
    padding-bottom: 8px;
    margin-bottom: 18px; 
    text-align: center;
    color: #4a2e1d;
    display: flex;
    flex-direction: column; 
    align-items: center;
    gap: 4px;
  }
  .side-content-container .side-content-section .section-title .title-ja {
    font-size: 24px;
    margin-right: 0;
  }
  .side-content-container .side-content-section .section-title .title-en {
    font-size: 12px;
    letter-spacing: 0.2em;
    font-weight: 600;
    text-transform: uppercase;
    opacity: 0.8;
  }
  
  /* 💡タブレット・スマホ表示（768px以下）で特定の改行指定（.sp-only-br）を有効化 */
  .side-content-container .side-content-section .subtitle .sp-only-br {
    display: inline;
  }

  /* 【スマホ版：要素間マージンの縮小】 */
  .side-content-container .side-content-section .subtitle {
    /* 🌟スマホ表示時のフォントサイズを大きく調整 */
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 18px; /* 💡【修正】スマホの縦間隔も24pxから18pxへ再設定してタイトに */
    text-align: center;
    color: #4a2e1d;
    line-height: 1.6;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
    /* 🌟ゴールドのアンダーバーを追加 */
    border-bottom: 1.5px solid #C49B6C;
    padding-bottom: 10px;
    display: block;
  }
  
  .side-content-container .side-content-section .description {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 24px; /* 💡【修正】本文からボタンへの余白も30pxから24pxへ詰める */
    text-align: justify; 
    color: #333333;
    max-width: 100%;
  }

  .side-content-container .side-content-section .btn-detail {
    display: inline-block;
    padding: 12px 50px; 
    font-size: 14px;
    font-weight: 600;
    color: #C49B6C;
    border: 2px solid #C49B6C;
    background-color: transparent;
    text-decoration: none;
    border-radius: 4px;
    width: fit-content;
    margin: 0 auto;
    text-align: center;
  }

  .side-content-container .side-content-section:nth-of-type(even) .image-block {
    flex-direction: row-reverse !important; 
  }
  .side-content-container .side-content-section:nth-of-type(even) .main-image-wrapper img,
  .side-content-container .side-content-section:nth-of-type(even) .image-vertical {
    border-radius: 0;
    box-shadow: none;
  }
}

/* ======================================= 
   追加ベースソースコード：画像リンクおよびSNSエリア一式
   （他の要素と干渉しないよう末尾に完全独立再現）
   ======================================= */

.image-links-container {
  display: flex;
  gap: 40px;            /* 左右の画像間の余白を広く */
  max-width: 800px;      /* 横幅を広くして余白を確保 */
  margin: 0 auto;        /* 中央揃え */
  padding: 20px;         /* 外側の余白 */
}

.healing-forest {
  flex: 2; /* 左の大きい画像 */
}

.social-media-links {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;              /* 上下の画像間の余白を広く */
}

.social-media-links a {
  display: block;
}

img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
}

/* SP対応（レスポンシブ） */
@media screen and (max-width: 768px) {
  .image-links-container {
    flex-direction: column;
    text-align: center;
    gap: 25px;           /* SP時の上下余白も広く */
  }

  .social-media-links {
    flex-direction: column;
    gap: 15px;
    width: 100%;
  }

  .social-media-links a,
  .healing-forest {
    width: 100%;
  }
}

/* PC表示：最後のスパセクションとお知らせの間隔を調整 */
@media screen and (min-width: 769px) {
    .side-content-container .side-content-section:last-child {
        margin-bottom: 80px;
    }
}