/* title_svg SVG オーバーフロー対応 */
.title_svg {
  overflow: visible !important;
  /* 位置を上に移動（calc設定でレスポンシブ対応） */
  top: calc(400/ 1920* 100vw) !important;
   left: 50%;
   width: calc(1400 / 1920 * 100%);
   max-width: 1400px;
}

.title_svg svg {
  overflow: visible !important;
   left: calc(100vw * (45 / 100));
   
}

/* スクランブルテキスト */
.scramble-text-container {
  position: absolute;
  /* 1920pxで50px相当、1920px以上は50px、未満は比例 */
  top: clamp(0px, calc(100vw * (100 / 1920)), 150px);

  left: calc(100vw * (45 / 100));
  --scramble-x-offset: 24px;
  transform: translateX(calc(-50% + var(--scramble-x-offset)));
  z-index: 5;
  text-align: left;
  width: 90%;
  max-width: 1200px;
}

.title_sub {
    width: calc(450 / 1920 * 100%);
    height: 300px;
    position: absolute;
    top: calc(1100/ 1920 * 100%);
    left: 50%;
 transform: translateX(-50%);  /* ← これを追加 */	
    margin: 0;
    padding: 0;
    z-index: 20;
    opacity: 0;
    /* width: 100%; */
    /* height: auto; */
}


.scramble-line {
  color: white;
  margin-bottom: 20px;
  line-height: 1.4;
  font-size: calc(40/ 1680 * 100vw); /* 1.5倍に変更 */
  font-weight: normal;
  font-style: italic;
  font-family: 'Georgia', serif;
  opacity: 0;
  visibility: hidden;
  
  /* ★ 単語の途中で折り返しを避ける設定 */
  word-break: normal;           /* 単語の途中で改行しない */
  overflow-wrap: normal;        /* 長い単語でも途中で改行しない */
  hyphens: none;                /* ハイフネーション（自動ハイフン挿入）を無効化 */
  white-space: normal;          /* 通常の空白処理 */
}

/* kv_flex フェード画像スタイル */

.kv_flex {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1680px;
  margin: 50px auto 0;
  padding: 0;
  position: relative;
  height: calc(100vw * (900 / 1680));
  max-height: 900px;
}

/* フェード画像（中央に配置） */
.fade-image {
  position: absolute;
  top: calc(50% + 20px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: auto;
  max-width: 750px;
  opacity: 0;
  z-index: 15;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fade-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* レスポンシブ対応 */

/* 大画面用（1680px以上） */


@media (max-width: 1024px) {
  .fade-image {
    width: 75%;
    max-width: 700px;
  }
  
  .scramble-line {
    font-size: calc(45/ 1680 * 100vw); /* 1.5倍に変更 */
    margin-bottom: 15px;
  }
  
  /* タブレット用：title_svgの位置調整 */
  .title_svg {
    bottom: calc(50 / 1024 * 100vw) !important;
  }
}

/* ===== スマホ用（640px以下）を1箇所にまとめる ===== */
@media (max-width: 640px) {
  
  /* #slide1の高さ設定 */
  #slide1 {
    height: 100vh !important;
    height: 100dvh !important; /* アドレスバー対策 */
    min-height: 550px;
    background-size: cover !important;
  }
  
  /* kv_flexの高さ */
  .kv_flex {
    height: calc(100vw * (600 / 640));
  }

  /* フェード画像 */
  #slide1 .fade-image {
    position: absolute;
    left: 50% !important;
    bottom: 70px;
    transform: translate(-50%, 0) !important;
    width: auto !important;
    max-width: none !important;
    z-index: 10;
  }

  #slide1 .fade-image img {
    width: 92vw !important;
    height: auto;
    max-width: none !important;
    display: block;
    transform: translateY(4px);
  }
  
  /* スクランブルテキスト */
  .scramble-line {
    font-size: 1.2rem !important;
    margin-bottom: 10px;
    
    /* ★ 単語の途中で折り返しを避ける設定（スマホ用） */
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    white-space: normal !important;
  }
  
  .scramble-text-container {
    width: 85%;
    top: 45%;
	color: white;
  }
  
  /* .title_sub（日本語テキスト）の配置 - 上に配置 */
  .title_sub {
    width: calc(800/ 1920 * 100%);
    max-width: 60vw;
    height: auto;
    position: absolute;
    top: 360px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0;
    padding: 0;
    z-index: 20;
    opacity: 0;
  }
  
  /* .title_svg（英語テキスト）の配置 - 下に配置 */
  .title_svg {
    width: calc(900	/ 640 * 100%);
    max-width: 86vw;
    position: absolute;
    top: 280px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0;
    padding: 0;
    z-index: 20;
    opacity: 0;
    bottom: auto !important;
  }
}