/**
 * レイアウトテンプレート CSS
 *
 * 役割: サイズ、余白、配置のみを定義
 * 色や背景は背景テンプレート（TemplateDesign）で管理
 */

/* ========================================
   共通スタイル
   ======================================== */

/* Noto Sans JP フォント読み込み */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;900&display=swap');

/* 全レイアウト共通のフォント設定 */
[class^="layout-"] {
  font-family: 'Noto Sans JP', sans-serif;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* タイトル共通スタイル - 全レイアウトで統一 */
[class^="layout-"] .title {
  font-weight: 900; /* Heavy/Black */
  font-size: 6.4rem; /* 112px - 全レイアウトで固定 */
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: center; /* 中央揃え */
  margin: 0;
  padding: 0;
  position: absolute;
  top: 80px; /* 上部固定位置 */
  left: 0;
  right: 0;
  width: 100%;
}

/* 本文共通スタイル（16:9 と 9:16 の両方をカバー）
   ※ 9:16 では class が "aspect-9-16 layout-xl ..." のように layout- が先頭でないため
   [class^="layout-"] だけだとマッチしない。.aspect-9-16 .content も併記する。 */
[class^="layout-"] .content,
.aspect-9-16 .content {
  font-weight: 500; /* Medium */
  margin: 0;
  padding: 0;
  /* 長い英数字連続でもコンテナを突き抜けないよう any 位置で折り返し可に */
  overflow-wrap: anywhere;
  word-break: normal;
  width: 100%; /* flex親の align-items: flex-start によるシュリンクを防ぎ、text-align を有効にする */
}

/* Tiptap が出力する <p> タグのマージンをリセット・空行を確保 */
[class^="layout-"] .content p {
  margin: 0;
  min-height: 1em;
}

/* 画像領域共通スタイル - 全レイアウトで統一 */
[class^="layout-"].with-image .image-area {
  position: absolute;
  right: 120px; /* 右端から120pxの位置 */
  top: 305px; /* タイトル下の位置（テキストブロック上辺 + 25px調整） */
  width: 640px; /* 正方形の幅 */
  height: 640px; /* 正方形の高さ */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden; /* はみ出し部分を隠す */
}

[class^="layout-"].with-image .image-area img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 正方形領域内に画像全体をフィット（長辺を640pxに合わせて拡大/縮小） */
}

/* ========================================
   特大レイアウト (XL)
   推奨文字数: 10-50文字
   ======================================== */

/* 画像なし - 上から下へ表示 */
.layout-xl.no-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 100px 170px; /* 左辺を20px左側に移動（190px → 170px） */
  padding-right: 120px; /* 右辺を広げて1文字分追加 */
  padding-top: 280px; /* タイトル分のスペース確保 */
  text-align: left;
}

.layout-xl.no-image .content {
  font-size: 5.3rem; /* 100px */
  line-height: 1.6;
  letter-spacing: 0.035em;
  max-width: 100%;
}

/* 画像あり - 左右2カラム */
.layout-xl.with-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 100px 170px; /* 左辺を20px左側に移動（190px → 170px） */
  padding-top: 280px; /* タイトル分のスペース確保 */
  padding-right: 820px; /* 画像領域分のスペース確保（テキストを1文字分広げる: 880px → 820px） */
}

.layout-xl.with-image .text-area {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.layout-xl.with-image .image-area {
  right: 160px; /* 特大サイズのみ40px内側に移動 */
}

.layout-xl.with-image .content {
  font-size: 5.3rem; /* 88px */
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-align: left;
}

/* ========================================
   大レイアウト (L)
   推奨文字数: 40-80文字
   ======================================== */

.layout-l.no-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 90px 180px;
  padding-right: 120px; /* 右辺を広げて一文字追加 */
  padding-top: 280px; /* タイトル分のスペース確保 */
  text-align: left;
}

.layout-l.no-image .content {
  font-size: 4.25rem; /* 68px */
  line-height: 1.66;
  letter-spacing: 0.04em;
  max-width: 100%;
}

.layout-l.with-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 90px 180px; /* 左辺を40px内側に移動 */
  padding-top: 280px; /* タイトル分のスペース確保 */
  padding-right: 880px; /* 画像領域分のスペース確保 */
}

.layout-l.with-image .text-area {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.layout-l.with-image .image-area {
  right: 160px; /* 大サイズのみ40px内側に移動 */
}

.layout-l.with-image .content {
  font-size: 4.25rem; /* 68px */
  line-height: 1.66;
  letter-spacing: 0.03em;
  text-align: left;
}

/* ========================================
   中レイアウト (M)
   推奨文字数: 60-110文字
   ======================================== */

.layout-m.no-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 85px 170px;
  padding-right: 120px; /* 右辺を広げて全角27文字入るように */
  padding-top: 280px; /* タイトル分のスペース確保 */
  text-align: left;
}

.layout-m.no-image .content {
  font-size: 3.5rem; /* 56px */
  line-height: 1.75;
  letter-spacing: 0.05em;
}

.layout-m.with-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 85px 170px; /* 左辺を40px内側に移動 */
  padding-top: 280px; /* タイトル分のスペース確保 */
  padding-right: 880px; /* 画像領域分のスペース確保 */
}

.layout-m.with-image .text-area {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.layout-m.with-image .image-area {
  right: 160px; /* 中サイズのみ40px内側に移動 */
}

.layout-m.with-image .content {
  font-size: 3.5rem; /* 56px */
  line-height: 1.75;
  letter-spacing: 0.04em;
  text-align: left;
}

/* ========================================
   小レイアウト (S)
   推奨文字数: 100-150文字
   ======================================== */

.layout-s.no-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 80px 160px; /* 画像ありと同じ左辺位置 */
  padding-top: 280px; /* タイトル分のスペース確保 */
  text-align: left;
}

.layout-s.no-image .content {
  font-size: 3.0rem; /* 42px */
  line-height: 2.0;
  letter-spacing: 0.04em;
  width: 100%;
}

.layout-s.with-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 80px 170px; /* 左辺を5px右に移動（160px → 165px） */
  padding-top: 280px; /* タイトル分のスペース確保 */
  padding-right: 880px; /* 画像領域分のスペース確保 */
}

.layout-s.with-image .text-area {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.layout-s.with-image .image-area {
  right: 160px; /* 小サイズのみ40px内側に移動 */
}

.layout-s.with-image .content {
  font-size: 3.0rem; /* 42px */
  line-height: 2.05;
  letter-spacing: 0.05em;
  text-align: left;
}

/* ========================================
   特小レイアウト (XS)
   推奨文字数: 150-250文字
   ======================================== */

.layout-xs.no-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 80px 170px; /* 左辺を5px右に移動（165px → 170px） */
  padding-right: 120px; /* 右辺を広げて文字数を維持 */
  padding-top: 280px; /* タイトル分のスペース確保 */
  text-align: left;
}

.layout-xs.no-image .content {
  font-size: 2.7rem; /* 30px */
  line-height: 1.95;
  letter-spacing: 0.05em;
  width: 100%;
}

.layout-xs.with-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 80px 170px; /* 左辺を40px内側に移動 */
  padding-top: 280px; /* タイトル分のスペース確保 */
  padding-right: 880px; /* 画像領域分のスペース確保 */
}

.layout-xs.with-image .text-area {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.layout-xs.with-image .image-area {
  right: 160px; /* 特小サイズのみ40px内側に移動 */
}

.layout-xs.with-image .content {
  font-size: 2.7rem; /* 28px */
  line-height: 1.95;
  letter-spacing: 0.05em;
  text-align: left;
}

/* ========================================
   フェードインアニメーションレイアウト（全サイズ共通）
   タイトル → 本文 → 画像 の順番でフェードイン
   ======================================== */

@keyframes layoutFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* タイトル：1.0秒遅れてフェードイン（全フェードバリアント共通） */
.layout-xl-fade .title, .layout-l-fade .title, .layout-m-fade .title,
.layout-s-fade .title,  .layout-xs-fade .title {
  animation: layoutFadeIn 0.8s ease-out 1.0s both;
}

/* 本文：1.3秒遅れてフェードイン */
.layout-xl-fade .content, .layout-l-fade .content, .layout-m-fade .content,
.layout-s-fade .content,  .layout-xs-fade .content {
  animation: layoutFadeIn 0.8s ease-out 1.3s both;
}

/* 画像エリア：1.6秒遅れてフェードイン */
.layout-xl-fade .image-area, .layout-l-fade .image-area, .layout-m-fade .image-area,
.layout-s-fade .image-area,  .layout-xs-fade .image-area {
  animation: layoutFadeIn 0.8s ease-out 1.6s both;
}

/* ========================================
   フェード 特大 (XL-FADE) 16:9
   ======================================== */

.layout-xl-fade.no-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 100px 170px;
  padding-right: 120px;
  padding-top: 280px;
  text-align: left;
}

.layout-xl-fade.no-image .content {
  font-size: 5.3rem;
  line-height: 1.6;
  letter-spacing: 0.035em;
  max-width: 100%;
}

.layout-xl-fade.with-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 100px 170px;
  padding-top: 280px;
  padding-right: 820px;
}

.layout-xl-fade.with-image .text-area {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.layout-xl-fade.with-image .image-area {
  right: 160px;
}

.layout-xl-fade.with-image .content {
  font-size: 5.3rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-align: left;
}

/* ========================================
   フェード 大 (L-FADE) 16:9
   ======================================== */

.layout-l-fade.no-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 90px 180px;
  padding-right: 120px;
  padding-top: 280px;
  text-align: left;
}

.layout-l-fade.no-image .content {
  font-size: 4.25rem;
  line-height: 1.66;
  letter-spacing: 0.04em;
  max-width: 100%;
}

.layout-l-fade.with-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 90px 180px;
  padding-top: 280px;
  padding-right: 880px;
}

.layout-l-fade.with-image .text-area {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.layout-l-fade.with-image .image-area {
  right: 160px;
}

.layout-l-fade.with-image .content {
  font-size: 4.25rem;
  line-height: 1.66;
  letter-spacing: 0.03em;
  text-align: left;
}

/* ========================================
   フェード 中 (M-FADE) 16:9
   ======================================== */

.layout-m-fade.no-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 85px 170px;
  padding-right: 120px;
  padding-top: 280px;
  text-align: left;
}

.layout-m-fade.no-image .content {
  font-size: 3.5rem;
  line-height: 1.75;
  letter-spacing: 0.05em;
}

.layout-m-fade.with-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 85px 170px;
  padding-top: 280px;
  padding-right: 880px;
}

.layout-m-fade.with-image .text-area {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.layout-m-fade.with-image .image-area {
  right: 160px;
}

.layout-m-fade.with-image .content {
  font-size: 3.5rem;
  line-height: 1.75;
  letter-spacing: 0.04em;
  text-align: left;
}

/* ========================================
   フェード 小 (S-FADE) 16:9
   ======================================== */

.layout-s-fade.no-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 80px 160px;
  padding-top: 280px;
  text-align: left;
}

.layout-s-fade.no-image .content {
  font-size: 3.0rem;
  line-height: 2.0;
  letter-spacing: 0.04em;
  width: 100%;
}

.layout-s-fade.with-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 80px 170px;
  padding-top: 280px;
  padding-right: 880px;
}

.layout-s-fade.with-image .text-area {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.layout-s-fade.with-image .image-area {
  right: 160px;
}

.layout-s-fade.with-image .content {
  font-size: 3.0rem;
  line-height: 2.05;
  letter-spacing: 0.05em;
  text-align: left;
}

/* ========================================
   フェード 特小 (XS-FADE) 16:9
   ======================================== */

.layout-xs-fade.no-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 80px 170px;
  padding-right: 120px;
  padding-top: 280px;
  text-align: left;
}

.layout-xs-fade.no-image .content {
  font-size: 2.7rem;
  line-height: 1.95;
  letter-spacing: 0.05em;
  width: 100%;
}

.layout-xs-fade.with-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 80px 170px;
  padding-top: 280px;
  padding-right: 880px;
}

.layout-xs-fade.with-image .text-area {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.layout-xs-fade.with-image .image-area {
  right: 160px;
}

.layout-xs-fade.with-image .content {
  font-size: 2.7rem;
  line-height: 1.95;
  letter-spacing: 0.05em;
  text-align: left;
}

/* ========================================
   リッチテキストエディタ対応
   ======================================== */

/* 太字 */
[class^="layout-"] .content strong,
[class^="layout-"] .content b {
  font-weight: 900;
}

/* 斜体 */
[class^="layout-"] .content em,
[class^="layout-"] .content i {
  font-style: italic;
}

/* 下線 */
[class^="layout-"] .content u {
  text-decoration: underline;
}

/* リンク（使わないかもしれないが念のため） */
[class^="layout-"] .content a {
  text-decoration: underline;
}

/* フォントサイズの倍率設定（リッチテキストエディタの小・中・大ボタン対応） */
[class^="layout-"] .content span[style*="font-size: 0.7em"] {
  font-size: 0.7em !important;
}

[class^="layout-"] .content span[style*="font-size: 1.3em"] {
  font-size: 1.3em !important;
}

/* ========================================
   9:16 縦型レイアウト（1080x1920px）
   ======================================== */

/* 9:16用タイトル - 16:9と同じ固定サイズ、8文字幅 */
.aspect-9-16[class^="layout-"] .title,
.aspect-9-16[class*="layout-"] .title {
  position: absolute !important;
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 900 !important; /* Black */
  font-size: 6.4rem !important; /* 112px - 全レイアウトで固定 */
  top: 80px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 850px !important; /* 8文字分の幅（約100px × 8文字） */
  max-width: 850px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* 9:16用画像領域 - 中央配置の正方形（16:9と同じサイズ） */
.aspect-9-16.with-image .image-area {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: 455px !important; /* タイトル(80 + 2行分約250px) + マージン + 105px = 455px */
  width: 640px !important; /* 16:9と同じ正方形サイズ */
  height: 640px !important; /* 16:9と同じ正方形サイズ */
  right: auto !important; /* 16:9のright指定を無効化 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.aspect-9-16.with-image .image-area img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* ========================================
   9:16 特大レイアウト (XL)
   ======================================== */

.aspect-9-16.layout-xl.no-image {
  padding: 0 145px !important;
  padding-top: 485px !important; /* タイトル(80 + 2行分約250px) + マージン + 105px = 485px */
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
}

.aspect-9-16.layout-xl.no-image .content {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 500 !important; /* Medium */
  font-size: 5.3rem !important;
  line-height: 1.5 !important;
  letter-spacing: 0.035em !important;
  text-align: left !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.aspect-9-16.layout-xl.with-image {
  padding: 0 145px !important;
  padding-top: 1145px !important; /* タイトル位置(455) + 画像(640) + マージン(50) = 1145px */
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
}

.aspect-9-16.layout-xl.with-image .content {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 500 !important; /* Medium */
  font-size: 5.3rem !important;
  line-height: 1.4 !important;
  letter-spacing: 0.02em !important;
  text-align: left !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ========================================
   9:16 大レイアウト (L)
   ======================================== */

.aspect-9-16.layout-l.no-image {
  padding: 90px 80px !important;
  padding-top: 485px !important; /* タイトル(80 + 2行分約250px) + マージン + 105px = 485px */
  text-align: center !important;
}

.aspect-9-16.layout-l.no-image .content {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 500 !important; /* Medium */
  font-size: 4.25rem !important;
  line-height: 1.66 !important;
  letter-spacing: 0.04em !important;
  text-align: left !important;
}

.aspect-9-16.layout-l.with-image {
  padding: 90px 80px !important;
  padding-top: 1145px !important; /* タイトル位置(455) + 画像(640) + マージン(50) = 1145px */
  text-align: center !important;
}

.aspect-9-16.layout-l.with-image .content {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 500 !important; /* Medium */
  font-size: 4.25rem !important;
  line-height: 1.66 !important;
  letter-spacing: 0.03em !important;
  text-align: left !important;
}

/* ========================================
   9:16 中レイアウト (M)
   ======================================== */

.aspect-9-16.layout-m.no-image {
  padding: 85px 80px !important;
  padding-top: 485px !important; /* タイトル(80 + 2行分約250px) + マージン + 105px = 485px */
  text-align: center !important;
}

.aspect-9-16.layout-m.no-image .content {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 500 !important; /* Medium */
  font-size: 3.5rem !important;
  line-height: 1.75 !important;
  letter-spacing: 0.05em !important;
  text-align: left !important;
}

.aspect-9-16.layout-m.with-image {
  padding: 85px 80px !important;
  padding-top: 1145px !important; /* タイトル位置(455) + 画像(640) + マージン(50) = 1145px */
  text-align: center !important;
}

.aspect-9-16.layout-m.with-image .content {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 500 !important; /* Medium */
  font-size: 3.5rem !important;
  line-height: 1.75 !important;
  letter-spacing: 0.04em !important;
  text-align: left !important;
}

/* ========================================
   9:16 小レイアウト (S)
   ======================================== */

.aspect-9-16.layout-s.no-image {
  padding: 80px 80px !important;
  padding-top: 485px !important; /* タイトル(80 + 2行分約250px) + マージン + 105px = 485px */
  text-align: center !important;
}

.aspect-9-16.layout-s.no-image .content {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 500 !important; /* Medium */
  font-size: 3.0rem !important;
  line-height: 2.0 !important;
  letter-spacing: 0.04em !important;
  text-align: left !important;
}

.aspect-9-16.layout-s.with-image {
  padding: 80px 80px !important;
  padding-top: 1145px !important; /* タイトル位置(455) + 画像(640) + マージン(50) = 1145px */
  text-align: center !important;
}

.aspect-9-16.layout-s.with-image .content {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 500 !important; /* Medium */
  font-size: 3.0rem !important;
  line-height: 2.05 !important;
  letter-spacing: 0.05em !important;
  text-align: left !important;
}

/* ========================================
   9:16 特小レイアウト (XS)
   ======================================== */

.aspect-9-16.layout-xs.no-image {
  padding: 80px 80px !important;
  padding-top: 485px !important; /* タイトル(80 + 2行分約250px) + マージン + 105px = 485px */
  text-align: center !important;
}

.aspect-9-16.layout-xs.no-image .content {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 500 !important; /* Medium */
  font-size: 2.7rem !important;
  line-height: 1.95 !important;
  letter-spacing: 0.05em !important;
  text-align: left !important;
}

.aspect-9-16.layout-xs.with-image {
  padding: 80px 80px !important;
  padding-top: 1145px !important; /* タイトル位置(455) + 画像(640) + マージン(50) = 1145px */
  text-align: center !important;
}

.aspect-9-16.layout-xs.with-image .content {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 500 !important; /* Medium */
  font-size: 2.7rem !important;
  line-height: 1.95 !important;
  letter-spacing: 0.05em !important;
  text-align: left !important;
}

/* ========================================
   スライドアップ+フェードアニメーションレイアウト（全サイズ共通）
   ======================================== */

@keyframes layoutSlideUpFade {
  from { opacity: 0; translate: 0 30px; }
  to   { opacity: 1; translate: 0 0; }
}

.layout-xl-slideup .title, .layout-l-slideup .title, .layout-m-slideup .title,
.layout-s-slideup .title,  .layout-xs-slideup .title {
  animation: layoutSlideUpFade 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.0s both;
}
.layout-xl-slideup .content, .layout-l-slideup .content, .layout-m-slideup .content,
.layout-s-slideup .content,  .layout-xs-slideup .content {
  animation: layoutSlideUpFade 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.3s both;
}
.layout-xl-slideup .image-area, .layout-l-slideup .image-area, .layout-m-slideup .image-area,
.layout-s-slideup .image-area,  .layout-xs-slideup .image-area {
  animation: layoutSlideUpFade 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.6s both;
}

.layout-xl-slideup.no-image { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 100px 170px; padding-right: 120px; padding-top: 280px; text-align: left; }
.layout-xl-slideup.no-image .content { font-size: 5.3rem; line-height: 1.6; letter-spacing: 0.035em; max-width: 100%; }
.layout-xl-slideup.with-image { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 100px 170px; padding-top: 280px; padding-right: 820px; }
.layout-xl-slideup.with-image .text-area { display: flex; flex-direction: column; width: 100%; }
.layout-xl-slideup.with-image .image-area { right: 160px; }
.layout-xl-slideup.with-image .content { font-size: 5.3rem; line-height: 1.6; letter-spacing: 0.02em; text-align: left; }

.layout-l-slideup.no-image { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 90px 180px; padding-right: 120px; padding-top: 280px; text-align: left; }
.layout-l-slideup.no-image .content { font-size: 4.25rem; line-height: 1.66; letter-spacing: 0.04em; max-width: 100%; }
.layout-l-slideup.with-image { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 90px 180px; padding-top: 280px; padding-right: 880px; }
.layout-l-slideup.with-image .text-area { display: flex; flex-direction: column; width: 100%; }
.layout-l-slideup.with-image .image-area { right: 160px; }
.layout-l-slideup.with-image .content { font-size: 4.25rem; line-height: 1.66; letter-spacing: 0.03em; text-align: left; }

.layout-m-slideup.no-image { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 85px 170px; padding-right: 120px; padding-top: 280px; text-align: left; }
.layout-m-slideup.no-image .content { font-size: 3.5rem; line-height: 1.75; letter-spacing: 0.05em; }
.layout-m-slideup.with-image { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 85px 170px; padding-top: 280px; padding-right: 880px; }
.layout-m-slideup.with-image .text-area { display: flex; flex-direction: column; width: 100%; }
.layout-m-slideup.with-image .image-area { right: 160px; }
.layout-m-slideup.with-image .content { font-size: 3.5rem; line-height: 1.75; letter-spacing: 0.04em; text-align: left; }

.layout-s-slideup.no-image { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 80px 160px; padding-top: 280px; text-align: left; }
.layout-s-slideup.no-image .content { font-size: 3.0rem; line-height: 2.0; letter-spacing: 0.04em; width: 100%; }
.layout-s-slideup.with-image { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 80px 170px; padding-top: 280px; padding-right: 880px; }
.layout-s-slideup.with-image .text-area { display: flex; flex-direction: column; width: 100%; }
.layout-s-slideup.with-image .image-area { right: 160px; }
.layout-s-slideup.with-image .content { font-size: 3.0rem; line-height: 2.05; letter-spacing: 0.05em; text-align: left; }

.layout-xs-slideup.no-image { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 80px 170px; padding-right: 120px; padding-top: 280px; text-align: left; }
.layout-xs-slideup.no-image .content { font-size: 2.7rem; line-height: 1.95; letter-spacing: 0.05em; width: 100%; }
.layout-xs-slideup.with-image { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 80px 170px; padding-top: 280px; padding-right: 880px; }
.layout-xs-slideup.with-image .text-area { display: flex; flex-direction: column; width: 100%; }
.layout-xs-slideup.with-image .image-area { right: 160px; }
.layout-xs-slideup.with-image .content { font-size: 2.7rem; line-height: 1.95; letter-spacing: 0.05em; text-align: left; }

/* ========================================
   9:16 フェードインアニメーションレイアウト（全サイズ）
   ======================================== */

.aspect-9-16.layout-xl-fade.no-image {
  padding: 0 145px !important;
  padding-top: 485px !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
}

.aspect-9-16.layout-xl-fade.no-image .content {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 500 !important;
  font-size: 5.3rem !important;
  line-height: 1.5 !important;
  letter-spacing: 0.035em !important;
  text-align: left !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.aspect-9-16.layout-xl-fade.with-image {
  padding: 0 145px !important;
  padding-top: 1145px !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
}

.aspect-9-16.layout-xl-fade.with-image .content {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 500 !important;
  font-size: 5.3rem !important;
  line-height: 1.4 !important;
  letter-spacing: 0.02em !important;
  text-align: left !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.aspect-9-16.layout-l-fade.no-image {
  padding: 90px 80px !important;
  padding-top: 485px !important;
  text-align: center !important;
}

.aspect-9-16.layout-l-fade.no-image .content {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 500 !important;
  font-size: 4.25rem !important;
  line-height: 1.66 !important;
  letter-spacing: 0.04em !important;
  text-align: left !important;
}

.aspect-9-16.layout-l-fade.with-image {
  padding: 90px 80px !important;
  padding-top: 1145px !important;
  text-align: center !important;
}

.aspect-9-16.layout-l-fade.with-image .content {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 500 !important;
  font-size: 4.25rem !important;
  line-height: 1.66 !important;
  letter-spacing: 0.03em !important;
  text-align: left !important;
}

.aspect-9-16.layout-m-fade.no-image {
  padding: 85px 80px !important;
  padding-top: 485px !important;
  text-align: center !important;
}

.aspect-9-16.layout-m-fade.no-image .content {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 500 !important;
  font-size: 3.5rem !important;
  line-height: 1.75 !important;
  letter-spacing: 0.05em !important;
  text-align: left !important;
}

.aspect-9-16.layout-m-fade.with-image {
  padding: 85px 80px !important;
  padding-top: 1145px !important;
  text-align: center !important;
}

.aspect-9-16.layout-m-fade.with-image .content {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 500 !important;
  font-size: 3.5rem !important;
  line-height: 1.75 !important;
  letter-spacing: 0.04em !important;
  text-align: left !important;
}

.aspect-9-16.layout-s-fade.no-image {
  padding: 80px 80px !important;
  padding-top: 485px !important;
  text-align: center !important;
}

.aspect-9-16.layout-s-fade.no-image .content {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 500 !important;
  font-size: 3.0rem !important;
  line-height: 2.0 !important;
  letter-spacing: 0.04em !important;
  text-align: left !important;
}

.aspect-9-16.layout-s-fade.with-image {
  padding: 80px 80px !important;
  padding-top: 1145px !important;
  text-align: center !important;
}

.aspect-9-16.layout-s-fade.with-image .content {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 500 !important;
  font-size: 3.0rem !important;
  line-height: 2.05 !important;
  letter-spacing: 0.05em !important;
  text-align: left !important;
}

.aspect-9-16.layout-xs-fade.no-image {
  padding: 80px 80px !important;
  padding-top: 485px !important;
  text-align: center !important;
}

.aspect-9-16.layout-xs-fade.no-image .content {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 500 !important;
  font-size: 2.7rem !important;
  line-height: 1.95 !important;
  letter-spacing: 0.05em !important;
  text-align: left !important;
}

.aspect-9-16.layout-xs-fade.with-image {
  padding: 80px 80px !important;
  padding-top: 1145px !important;
  text-align: center !important;
}

.aspect-9-16.layout-xs-fade.with-image .content {
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 500 !important;
  font-size: 2.7rem !important;
  line-height: 1.95 !important;
  letter-spacing: 0.05em !important;
  text-align: left !important;
}

/* ========================================
   9:16 エクスポートモード
   html2canvasはtransform: translateX(-50%)を正確にレンダリングしないため、
   エクスポート時は left:0; right:0; margin:auto による中央揃えに切り替える
   ======================================== */

/* modern-screenshot（ネイティブ描画）は translateX(-50%) を正しく描けるため、
   html2canvas 時代の中央寄せ回避 override は不要。通常の 9:16 中央寄せに従う。
   （旧 .aspect-9-16.export-mode .title / .image-area の override は削除） */

/* ========================================
   9:16 スライドアップ+フェードアニメーションレイアウト（全サイズ）
   ======================================== */

.aspect-9-16.layout-xl-slideup.no-image { padding: 0 145px !important; padding-top: 485px !important; text-align: left !important; display: flex !important; flex-direction: column !important; }
.aspect-9-16.layout-xl-slideup.no-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 5.3rem !important; line-height: 1.5 !important; letter-spacing: 0.035em !important; text-align: left !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
.aspect-9-16.layout-xl-slideup.with-image { padding: 0 145px !important; padding-top: 1145px !important; text-align: left !important; display: flex !important; flex-direction: column !important; }
.aspect-9-16.layout-xl-slideup.with-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 5.3rem !important; line-height: 1.4 !important; letter-spacing: 0.02em !important; text-align: left !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }

.aspect-9-16.layout-l-slideup.no-image { padding: 90px 80px !important; padding-top: 485px !important; text-align: center !important; }
.aspect-9-16.layout-l-slideup.no-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 4.25rem !important; line-height: 1.66 !important; letter-spacing: 0.04em !important; text-align: left !important; }
.aspect-9-16.layout-l-slideup.with-image { padding: 90px 80px !important; padding-top: 1145px !important; text-align: center !important; }
.aspect-9-16.layout-l-slideup.with-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 4.25rem !important; line-height: 1.66 !important; letter-spacing: 0.03em !important; text-align: left !important; }

.aspect-9-16.layout-m-slideup.no-image { padding: 85px 80px !important; padding-top: 485px !important; text-align: center !important; }
.aspect-9-16.layout-m-slideup.no-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 3.5rem !important; line-height: 1.75 !important; letter-spacing: 0.05em !important; text-align: left !important; }
.aspect-9-16.layout-m-slideup.with-image { padding: 85px 80px !important; padding-top: 1145px !important; text-align: center !important; }
.aspect-9-16.layout-m-slideup.with-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 3.5rem !important; line-height: 1.75 !important; letter-spacing: 0.04em !important; text-align: left !important; }

.aspect-9-16.layout-s-slideup.no-image { padding: 80px 80px !important; padding-top: 485px !important; text-align: center !important; }
.aspect-9-16.layout-s-slideup.no-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 3.0rem !important; line-height: 2.0 !important; letter-spacing: 0.04em !important; text-align: left !important; }
.aspect-9-16.layout-s-slideup.with-image { padding: 80px 80px !important; padding-top: 1145px !important; text-align: center !important; }
.aspect-9-16.layout-s-slideup.with-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 3.0rem !important; line-height: 2.05 !important; letter-spacing: 0.05em !important; text-align: left !important; }

.aspect-9-16.layout-xs-slideup.no-image { padding: 80px 80px !important; padding-top: 485px !important; text-align: center !important; }
.aspect-9-16.layout-xs-slideup.no-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 2.7rem !important; line-height: 1.95 !important; letter-spacing: 0.05em !important; text-align: left !important; }
.aspect-9-16.layout-xs-slideup.with-image { padding: 80px 80px !important; padding-top: 1145px !important; text-align: center !important; }
.aspect-9-16.layout-xs-slideup.with-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 2.7rem !important; line-height: 1.95 !important; letter-spacing: 0.05em !important; text-align: left !important; }

/* ========================================
   管理画面プレビュー: アニメーション無効（最終状態を即時表示）
   ======================================== */
.layout-preview-instant .title,
.layout-preview-instant .content,
.layout-preview-instant .image-area {
  animation: none !important;
  opacity: 1 !important;
  translate: none !important;
}

/* ========================================
   左スライドインアニメーションレイアウト（slideinleft）
   translate を使用（9:16の translateX(-50%) と干渉しない）
   ======================================== */

@keyframes layoutSlideInLeftFade {
  from {
    opacity: 0;
    translate: -50px 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* タイトル：1.0秒遅れてスライドイン+フェード */
.layout-xl-slideinleft .title, .layout-l-slideinleft .title, .layout-m-slideinleft .title,
.layout-s-slideinleft .title,  .layout-xs-slideinleft .title {
  animation: layoutSlideInLeftFade 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.0s both;
}

/* 本文：1.3秒遅れて */
.layout-xl-slideinleft .content, .layout-l-slideinleft .content, .layout-m-slideinleft .content,
.layout-s-slideinleft .content,  .layout-xs-slideinleft .content {
  animation: layoutSlideInLeftFade 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.3s both;
}

/* 画像エリア：1.6秒遅れて */
.layout-xl-slideinleft .image-area, .layout-l-slideinleft .image-area, .layout-m-slideinleft .image-area,
.layout-s-slideinleft .image-area,  .layout-xs-slideinleft .image-area {
  animation: layoutSlideInLeftFade 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.6s both;
}

/* 特大 (XL-SLIDEINLEFT) 16:9 */
.layout-xl-slideinleft.no-image {
  display: flex; flex-direction: column; justify-content: flex-start;
  align-items: flex-start; padding: 100px 170px; padding-right: 120px; padding-top: 280px; text-align: left;
}
.layout-xl-slideinleft.no-image .content { font-size: 5.3rem; line-height: 1.6; letter-spacing: 0.035em; max-width: 100%; }
.layout-xl-slideinleft.with-image {
  display: flex; flex-direction: column; justify-content: flex-start;
  align-items: flex-start; padding: 100px 170px; padding-top: 280px; padding-right: 820px;
}
.layout-xl-slideinleft.with-image .text-area { display: flex; flex-direction: column; width: 100%; }
.layout-xl-slideinleft.with-image .image-area { right: 160px; }
.layout-xl-slideinleft.with-image .content { font-size: 5.3rem; line-height: 1.6; letter-spacing: 0.02em; text-align: left; }

/* 大 (L-SLIDEINLEFT) 16:9 */
.layout-l-slideinleft.no-image {
  display: flex; flex-direction: column; justify-content: flex-start;
  align-items: flex-start; padding: 90px 180px; padding-right: 120px; padding-top: 280px; text-align: left;
}
.layout-l-slideinleft.no-image .content { font-size: 4.25rem; line-height: 1.66; letter-spacing: 0.04em; max-width: 100%; }
.layout-l-slideinleft.with-image {
  display: flex; flex-direction: column; justify-content: flex-start;
  align-items: flex-start; padding: 90px 180px; padding-top: 280px; padding-right: 880px;
}
.layout-l-slideinleft.with-image .text-area { display: flex; flex-direction: column; width: 100%; }
.layout-l-slideinleft.with-image .image-area { right: 160px; }
.layout-l-slideinleft.with-image .content { font-size: 4.25rem; line-height: 1.66; letter-spacing: 0.03em; text-align: left; }

/* 中 (M-SLIDEINLEFT) 16:9 */
.layout-m-slideinleft.no-image {
  display: flex; flex-direction: column; justify-content: flex-start;
  align-items: flex-start; padding: 85px 170px; padding-right: 120px; padding-top: 280px; text-align: left;
}
.layout-m-slideinleft.no-image .content { font-size: 3.5rem; line-height: 1.75; letter-spacing: 0.05em; }
.layout-m-slideinleft.with-image {
  display: flex; flex-direction: column; justify-content: flex-start;
  align-items: flex-start; padding: 85px 170px; padding-top: 280px; padding-right: 880px;
}
.layout-m-slideinleft.with-image .text-area { display: flex; flex-direction: column; width: 100%; }
.layout-m-slideinleft.with-image .image-area { right: 160px; }
.layout-m-slideinleft.with-image .content { font-size: 3.5rem; line-height: 1.75; letter-spacing: 0.04em; text-align: left; }

/* 小 (S-SLIDEINLEFT) 16:9 */
.layout-s-slideinleft.no-image {
  display: flex; flex-direction: column; justify-content: flex-start;
  align-items: flex-start; padding: 80px 160px; padding-top: 280px; text-align: left;
}
.layout-s-slideinleft.no-image .content { font-size: 3.0rem; line-height: 2.0; letter-spacing: 0.04em; width: 100%; }
.layout-s-slideinleft.with-image {
  display: flex; flex-direction: column; justify-content: flex-start;
  align-items: flex-start; padding: 80px 170px; padding-top: 280px; padding-right: 880px;
}
.layout-s-slideinleft.with-image .text-area { display: flex; flex-direction: column; width: 100%; }
.layout-s-slideinleft.with-image .image-area { right: 160px; }
.layout-s-slideinleft.with-image .content { font-size: 3.0rem; line-height: 2.05; letter-spacing: 0.05em; text-align: left; }

/* 特小 (XS-SLIDEINLEFT) 16:9 */
.layout-xs-slideinleft.no-image {
  display: flex; flex-direction: column; justify-content: flex-start;
  align-items: flex-start; padding: 80px 170px; padding-right: 120px; padding-top: 280px; text-align: left;
}
.layout-xs-slideinleft.no-image .content { font-size: 2.7rem; line-height: 1.95; letter-spacing: 0.05em; width: 100%; }
.layout-xs-slideinleft.with-image {
  display: flex; flex-direction: column; justify-content: flex-start;
  align-items: flex-start; padding: 80px 170px; padding-top: 280px; padding-right: 880px;
}
.layout-xs-slideinleft.with-image .text-area { display: flex; flex-direction: column; width: 100%; }
.layout-xs-slideinleft.with-image .image-area { right: 160px; }
.layout-xs-slideinleft.with-image .content { font-size: 2.7rem; line-height: 1.95; letter-spacing: 0.05em; text-align: left; }

/* ========================================
   9:16 左スライドインアニメーションレイアウト（全サイズ）
   ======================================== */

.aspect-9-16.layout-xl-slideinleft.no-image { padding: 0 145px !important; padding-top: 485px !important; text-align: left !important; display: flex !important; flex-direction: column !important; }
.aspect-9-16.layout-xl-slideinleft.no-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 5.3rem !important; line-height: 1.5 !important; letter-spacing: 0.035em !important; text-align: left !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
.aspect-9-16.layout-xl-slideinleft.with-image { padding: 0 145px !important; padding-top: 1145px !important; text-align: left !important; display: flex !important; flex-direction: column !important; }
.aspect-9-16.layout-xl-slideinleft.with-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 5.3rem !important; line-height: 1.4 !important; letter-spacing: 0.02em !important; text-align: left !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }

.aspect-9-16.layout-l-slideinleft.no-image { padding: 90px 80px !important; padding-top: 485px !important; text-align: center !important; }
.aspect-9-16.layout-l-slideinleft.no-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 4.25rem !important; line-height: 1.66 !important; letter-spacing: 0.04em !important; text-align: left !important; }
.aspect-9-16.layout-l-slideinleft.with-image { padding: 90px 80px !important; padding-top: 1145px !important; text-align: center !important; }
.aspect-9-16.layout-l-slideinleft.with-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 4.25rem !important; line-height: 1.66 !important; letter-spacing: 0.03em !important; text-align: left !important; }

.aspect-9-16.layout-m-slideinleft.no-image { padding: 85px 80px !important; padding-top: 485px !important; text-align: center !important; }
.aspect-9-16.layout-m-slideinleft.no-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 3.5rem !important; line-height: 1.75 !important; letter-spacing: 0.05em !important; text-align: left !important; }
.aspect-9-16.layout-m-slideinleft.with-image { padding: 85px 80px !important; padding-top: 1145px !important; text-align: center !important; }
.aspect-9-16.layout-m-slideinleft.with-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 3.5rem !important; line-height: 1.75 !important; letter-spacing: 0.04em !important; text-align: left !important; }

.aspect-9-16.layout-s-slideinleft.no-image { padding: 80px 80px !important; padding-top: 485px !important; text-align: center !important; }
.aspect-9-16.layout-s-slideinleft.no-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 3.0rem !important; line-height: 2.0 !important; letter-spacing: 0.04em !important; text-align: left !important; }
.aspect-9-16.layout-s-slideinleft.with-image { padding: 80px 80px !important; padding-top: 1145px !important; text-align: center !important; }
.aspect-9-16.layout-s-slideinleft.with-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 3.0rem !important; line-height: 2.05 !important; letter-spacing: 0.05em !important; text-align: left !important; }

.aspect-9-16.layout-xs-slideinleft.no-image { padding: 80px 80px !important; padding-top: 485px !important; text-align: center !important; }
.aspect-9-16.layout-xs-slideinleft.no-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 2.7rem !important; line-height: 1.95 !important; letter-spacing: 0.05em !important; text-align: left !important; }
.aspect-9-16.layout-xs-slideinleft.with-image { padding: 80px 80px !important; padding-top: 1145px !important; text-align: center !important; }
.aspect-9-16.layout-xs-slideinleft.with-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 2.7rem !important; line-height: 1.95 !important; letter-spacing: 0.05em !important; text-align: left !important; }

/* ========================================
   ホッピングアニメーションレイアウト（全サイズ共通）
   弾むような動きで表示（ぽよんと跳ねるエフェクト）
   ======================================== */

@keyframes layoutHop {
  0% { opacity: 0; translate: 0 40px; }
  20% { opacity: 1; translate: 0 -25px; }
  35% { translate: 0 0; }
  50% { translate: 0 -10px; }
  65% { translate: 0 0; }
  80% { translate: 0 -3px; }
  100% { translate: 0 0; }
}

/* タイトル：1.0秒遅れてホッピング */
.layout-xl-hop .title, .layout-l-hop .title, .layout-m-hop .title,
.layout-s-hop .title,  .layout-xs-hop .title {
  animation: layoutHop 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.0s both;
}

/* 本文：1.3秒遅れてホッピング */
.layout-xl-hop .content, .layout-l-hop .content, .layout-m-hop .content,
.layout-s-hop .content,  .layout-xs-hop .content {
  animation: layoutHop 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.3s both;
}

/* 画像エリア：1.6秒遅れてホッピング */
.layout-xl-hop .image-area, .layout-l-hop .image-area, .layout-m-hop .image-area,
.layout-s-hop .image-area,  .layout-xs-hop .image-area {
  animation: layoutHop 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55) 1.6s both;
}

.layout-xl-hop.no-image { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 100px 170px; padding-right: 120px; padding-top: 280px; text-align: left; }
.layout-xl-hop.no-image .content { font-size: 5.3rem; line-height: 1.6; letter-spacing: 0.035em; max-width: 100%; }
.layout-xl-hop.with-image { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 100px 170px; padding-top: 280px; padding-right: 820px; }
.layout-xl-hop.with-image .text-area { display: flex; flex-direction: column; width: 100%; }
.layout-xl-hop.with-image .image-area { right: 160px; }
.layout-xl-hop.with-image .content { font-size: 5.3rem; line-height: 1.6; letter-spacing: 0.02em; text-align: left; }

.layout-l-hop.no-image { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 90px 180px; padding-right: 120px; padding-top: 280px; text-align: left; }
.layout-l-hop.no-image .content { font-size: 4.25rem; line-height: 1.66; letter-spacing: 0.04em; max-width: 100%; }
.layout-l-hop.with-image { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 90px 180px; padding-top: 280px; padding-right: 880px; }
.layout-l-hop.with-image .text-area { display: flex; flex-direction: column; width: 100%; }
.layout-l-hop.with-image .image-area { right: 160px; }
.layout-l-hop.with-image .content { font-size: 4.25rem; line-height: 1.66; letter-spacing: 0.03em; text-align: left; }

.layout-m-hop.no-image { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 85px 170px; padding-right: 120px; padding-top: 280px; text-align: left; }
.layout-m-hop.no-image .content { font-size: 3.5rem; line-height: 1.75; letter-spacing: 0.05em; }
.layout-m-hop.with-image { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 85px 170px; padding-top: 280px; padding-right: 880px; }
.layout-m-hop.with-image .text-area { display: flex; flex-direction: column; width: 100%; }
.layout-m-hop.with-image .image-area { right: 160px; }
.layout-m-hop.with-image .content { font-size: 3.5rem; line-height: 1.75; letter-spacing: 0.04em; text-align: left; }

.layout-s-hop.no-image { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 80px 160px; padding-top: 280px; text-align: left; }
.layout-s-hop.no-image .content { font-size: 3.0rem; line-height: 2.0; letter-spacing: 0.04em; width: 100%; }
.layout-s-hop.with-image { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 80px 170px; padding-top: 280px; padding-right: 880px; }
.layout-s-hop.with-image .text-area { display: flex; flex-direction: column; width: 100%; }
.layout-s-hop.with-image .image-area { right: 160px; }
.layout-s-hop.with-image .content { font-size: 3.0rem; line-height: 2.05; letter-spacing: 0.05em; text-align: left; }

.layout-xs-hop.no-image { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 80px 170px; padding-right: 120px; padding-top: 280px; text-align: left; }
.layout-xs-hop.no-image .content { font-size: 2.7rem; line-height: 1.95; letter-spacing: 0.05em; width: 100%; }
.layout-xs-hop.with-image { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 80px 170px; padding-top: 280px; padding-right: 880px; }
.layout-xs-hop.with-image .text-area { display: flex; flex-direction: column; width: 100%; }
.layout-xs-hop.with-image .image-area { right: 160px; }
.layout-xs-hop.with-image .content { font-size: 2.7rem; line-height: 1.95; letter-spacing: 0.05em; text-align: left; }

/* ========================================
   9:16 ホッピングアニメーションレイアウト（全サイズ）
   ======================================== */

.aspect-9-16.layout-xl-hop.no-image { padding: 0 145px !important; padding-top: 485px !important; text-align: left !important; display: flex !important; flex-direction: column !important; }
.aspect-9-16.layout-xl-hop.no-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 5.3rem !important; line-height: 1.5 !important; letter-spacing: 0.035em !important; text-align: left !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
.aspect-9-16.layout-xl-hop.with-image { padding: 0 145px !important; padding-top: 1145px !important; text-align: left !important; display: flex !important; flex-direction: column !important; }
.aspect-9-16.layout-xl-hop.with-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 5.3rem !important; line-height: 1.4 !important; letter-spacing: 0.02em !important; text-align: left !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }

.aspect-9-16.layout-l-hop.no-image { padding: 90px 80px !important; padding-top: 485px !important; text-align: center !important; }
.aspect-9-16.layout-l-hop.no-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 4.25rem !important; line-height: 1.66 !important; letter-spacing: 0.04em !important; text-align: left !important; }
.aspect-9-16.layout-l-hop.with-image { padding: 90px 80px !important; padding-top: 1145px !important; text-align: center !important; }
.aspect-9-16.layout-l-hop.with-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 4.25rem !important; line-height: 1.66 !important; letter-spacing: 0.03em !important; text-align: left !important; }

.aspect-9-16.layout-m-hop.no-image { padding: 85px 80px !important; padding-top: 485px !important; text-align: center !important; }
.aspect-9-16.layout-m-hop.no-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 3.5rem !important; line-height: 1.75 !important; letter-spacing: 0.05em !important; text-align: left !important; }
.aspect-9-16.layout-m-hop.with-image { padding: 85px 80px !important; padding-top: 1145px !important; text-align: center !important; }
.aspect-9-16.layout-m-hop.with-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 3.5rem !important; line-height: 1.75 !important; letter-spacing: 0.04em !important; text-align: left !important; }

.aspect-9-16.layout-s-hop.no-image { padding: 80px 80px !important; padding-top: 485px !important; text-align: center !important; }
.aspect-9-16.layout-s-hop.no-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 3.0rem !important; line-height: 2.0 !important; letter-spacing: 0.04em !important; text-align: left !important; }
.aspect-9-16.layout-s-hop.with-image { padding: 80px 80px !important; padding-top: 1145px !important; text-align: center !important; }
.aspect-9-16.layout-s-hop.with-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 3.0rem !important; line-height: 2.05 !important; letter-spacing: 0.05em !important; text-align: left !important; }

.aspect-9-16.layout-xs-hop.no-image { padding: 80px 80px !important; padding-top: 485px !important; text-align: center !important; }
.aspect-9-16.layout-xs-hop.no-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 2.7rem !important; line-height: 1.95 !important; letter-spacing: 0.05em !important; text-align: left !important; }
.aspect-9-16.layout-xs-hop.with-image { padding: 80px 80px !important; padding-top: 1145px !important; text-align: center !important; }
.aspect-9-16.layout-xs-hop.with-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 2.7rem !important; line-height: 1.95 !important; letter-spacing: 0.05em !important; text-align: left !important; }

/* ========================================
   スケールインアニメーションレイアウト（全サイズ共通）
   有機的なイージングで拡大しながら表示
   ======================================== */

@keyframes scaleIn {
  0% { opacity: 0; scale: 0.6; }
  100% { opacity: 1; scale: 1; }
}

/* タイトル：1.0秒遅れてスケールイン */
.layout-xl-scalein .title, .layout-l-scalein .title, .layout-m-scalein .title,
.layout-s-scalein .title,  .layout-xs-scalein .title {
  animation: scaleIn 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.0s both;
}

/* 本文：1.3秒遅れてスケールイン */
.layout-xl-scalein .content, .layout-l-scalein .content, .layout-m-scalein .content,
.layout-s-scalein .content,  .layout-xs-scalein .content {
  animation: scaleIn 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.3s both;
}

/* 画像エリア：1.6秒遅れてスケールイン */
.layout-xl-scalein .image-area, .layout-l-scalein .image-area, .layout-m-scalein .image-area,
.layout-s-scalein .image-area,  .layout-xs-scalein .image-area {
  animation: scaleIn 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.6s both;
}

.layout-xl-scalein.no-image { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 100px 170px; padding-right: 120px; padding-top: 280px; text-align: left; }
.layout-xl-scalein.no-image .content { font-size: 5.3rem; line-height: 1.6; letter-spacing: 0.035em; max-width: 100%; }
.layout-xl-scalein.with-image { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 100px 170px; padding-top: 280px; padding-right: 820px; }
.layout-xl-scalein.with-image .text-area { display: flex; flex-direction: column; width: 100%; }
.layout-xl-scalein.with-image .image-area { right: 160px; }
.layout-xl-scalein.with-image .content { font-size: 5.3rem; line-height: 1.6; letter-spacing: 0.02em; text-align: left; }

.layout-l-scalein.no-image { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 90px 180px; padding-right: 120px; padding-top: 280px; text-align: left; }
.layout-l-scalein.no-image .content { font-size: 4.25rem; line-height: 1.66; letter-spacing: 0.04em; max-width: 100%; }
.layout-l-scalein.with-image { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 90px 180px; padding-top: 280px; padding-right: 880px; }
.layout-l-scalein.with-image .text-area { display: flex; flex-direction: column; width: 100%; }
.layout-l-scalein.with-image .image-area { right: 160px; }
.layout-l-scalein.with-image .content { font-size: 4.25rem; line-height: 1.66; letter-spacing: 0.03em; text-align: left; }

.layout-m-scalein.no-image { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 85px 170px; padding-right: 120px; padding-top: 280px; text-align: left; }
.layout-m-scalein.no-image .content { font-size: 3.5rem; line-height: 1.75; letter-spacing: 0.05em; }
.layout-m-scalein.with-image { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 85px 170px; padding-top: 280px; padding-right: 880px; }
.layout-m-scalein.with-image .text-area { display: flex; flex-direction: column; width: 100%; }
.layout-m-scalein.with-image .image-area { right: 160px; }
.layout-m-scalein.with-image .content { font-size: 3.5rem; line-height: 1.75; letter-spacing: 0.04em; text-align: left; }

.layout-s-scalein.no-image { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 80px 160px; padding-top: 280px; text-align: left; }
.layout-s-scalein.no-image .content { font-size: 3.0rem; line-height: 2.0; letter-spacing: 0.04em; width: 100%; }
.layout-s-scalein.with-image { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 80px 170px; padding-top: 280px; padding-right: 880px; }
.layout-s-scalein.with-image .text-area { display: flex; flex-direction: column; width: 100%; }
.layout-s-scalein.with-image .image-area { right: 160px; }
.layout-s-scalein.with-image .content { font-size: 3.0rem; line-height: 2.05; letter-spacing: 0.05em; text-align: left; }

.layout-xs-scalein.no-image { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 80px 170px; padding-right: 120px; padding-top: 280px; text-align: left; }
.layout-xs-scalein.no-image .content { font-size: 2.7rem; line-height: 1.95; letter-spacing: 0.05em; width: 100%; }
.layout-xs-scalein.with-image { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 80px 170px; padding-top: 280px; padding-right: 880px; }
.layout-xs-scalein.with-image .text-area { display: flex; flex-direction: column; width: 100%; }
.layout-xs-scalein.with-image .image-area { right: 160px; }
.layout-xs-scalein.with-image .content { font-size: 2.7rem; line-height: 1.95; letter-spacing: 0.05em; text-align: left; }

/* ========================================
   9:16 スケールインアニメーションレイアウト（全サイズ）
   ======================================== */

.aspect-9-16.layout-xl-scalein.no-image { padding: 0 145px !important; padding-top: 485px !important; text-align: left !important; display: flex !important; flex-direction: column !important; }
.aspect-9-16.layout-xl-scalein.no-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 5.3rem !important; line-height: 1.5 !important; letter-spacing: 0.035em !important; text-align: left !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
.aspect-9-16.layout-xl-scalein.with-image { padding: 0 145px !important; padding-top: 1145px !important; text-align: left !important; display: flex !important; flex-direction: column !important; }
.aspect-9-16.layout-xl-scalein.with-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 5.3rem !important; line-height: 1.4 !important; letter-spacing: 0.02em !important; text-align: left !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }

.aspect-9-16.layout-l-scalein.no-image { padding: 90px 80px !important; padding-top: 485px !important; text-align: center !important; }
.aspect-9-16.layout-l-scalein.no-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 4.25rem !important; line-height: 1.66 !important; letter-spacing: 0.04em !important; text-align: left !important; }
.aspect-9-16.layout-l-scalein.with-image { padding: 90px 80px !important; padding-top: 1145px !important; text-align: center !important; }
.aspect-9-16.layout-l-scalein.with-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 4.25rem !important; line-height: 1.66 !important; letter-spacing: 0.03em !important; text-align: left !important; }

.aspect-9-16.layout-m-scalein.no-image { padding: 85px 80px !important; padding-top: 485px !important; text-align: center !important; }
.aspect-9-16.layout-m-scalein.no-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 3.5rem !important; line-height: 1.75 !important; letter-spacing: 0.05em !important; text-align: left !important; }
.aspect-9-16.layout-m-scalein.with-image { padding: 85px 80px !important; padding-top: 1145px !important; text-align: center !important; }
.aspect-9-16.layout-m-scalein.with-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 3.5rem !important; line-height: 1.75 !important; letter-spacing: 0.04em !important; text-align: left !important; }

.aspect-9-16.layout-s-scalein.no-image { padding: 80px 80px !important; padding-top: 485px !important; text-align: center !important; }
.aspect-9-16.layout-s-scalein.no-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 3.0rem !important; line-height: 2.0 !important; letter-spacing: 0.04em !important; text-align: left !important; }
.aspect-9-16.layout-s-scalein.with-image { padding: 80px 80px !important; padding-top: 1145px !important; text-align: center !important; }
.aspect-9-16.layout-s-scalein.with-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 3.0rem !important; line-height: 2.05 !important; letter-spacing: 0.05em !important; text-align: left !important; }

.aspect-9-16.layout-xs-scalein.no-image { padding: 80px 80px !important; padding-top: 485px !important; text-align: center !important; }
.aspect-9-16.layout-xs-scalein.no-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 2.7rem !important; line-height: 1.95 !important; letter-spacing: 0.05em !important; text-align: left !important; }
.aspect-9-16.layout-xs-scalein.with-image { padding: 80px 80px !important; padding-top: 1145px !important; text-align: center !important; }
.aspect-9-16.layout-xs-scalein.with-image .content { font-family: 'Noto Sans JP', sans-serif !important; font-weight: 500 !important; font-size: 2.7rem !important; line-height: 1.95 !important; letter-spacing: 0.05em !important; text-align: left !important; }

/* スケールインは個別の scale をアニメーションするため、中央寄せを transform: translateX(-50%)
   のままにすると scale と合成され「右側を起点に左へ拡大」してしまう。中央寄せを個別 translate に
   切り替え、拡大の起点を中央に固定する（タイトル・画像領域。スライドアップ系と同じ手法）。 */
.aspect-9-16[class*="layout-"][class*="-scalein"] .title,
.aspect-9-16[class*="layout-"][class*="-scalein"].with-image .image-area {
  transform: none !important;
  translate: -50% 0 !important;
  transform-origin: center center !important;
}