/* ========================================
   トップセクションの全体コンテナのスタイル
   ======================================== */
.top-container {
    display: flex;  /* 左右2つの要素を横並びに配置 */
    width: 100%;    /* 横幅を画面全体に広げる */
    height: 100vh;  /* 画面の高さ全体をカバー */
    position: relative; /* ページ内の通常のレイアウトに従う */
    margin: 0;  /* 余白をゼロにして、上部の隙間をなくす */
    padding: 0; /* パディングもゼロにして、無駄なスペースを省く */
}

/* ========================================
   左側（トップ画像エリア）のスタイル
   ======================================== */
.top-left {
    width: 43%;  /* 画面の半分（50%）を使用 */
    height: auto;  /* 親要素（.top-container）と同じ高さ */
    overflow: hidden;  /* 画像が枠からはみ出た場合に非表示にする */
}

.top-image {
    width: 100%;  /* 親要素（.top-left）の幅いっぱいに広げる */
    height: 100%; /* 親要素（.top-left）の高さいっぱいに広げる */
    object-fit: cover;  /* 画像の縦横比を維持しつつ、コンテナ全体にフィットさせる */
}

/* ========================================
   右側（タイトル画像エリア）のスタイル
   ======================================== */
.top-right {
    width: 57%;  /* 幅を少し広げて余白を調整 */
    height: auto;  /* 高さは親要素に合わせる */
    display: flex;
    align-items: flex-start;  /* ← 中央から上寄りに変更 */
    justify-content: center;
    padding-top: 8%;  /* 上に少し余白を空けて微調整 */
    background-color: transparent;  /* 背景色を透明に */
    position: relative;  /* 子要素に対して .fox-container を絶対配置しやすくする */
}


.title-image {
    max-width: 80%;  /* 画像の最大幅をエリアの80%に制限 */
    height: auto;  /* アスペクト比を保ったまま自動調整 */
}

/* ========================================
   ページ全体の設定（デフォルトの余白を削除）
   ======================================== */
body, html {
    margin: 0;  /* すべての余白を削除 */
    padding: 0;  /* すべてのパディングを削除 */
    width: 100%;  /* ページの幅を100%にする */
    height: 100%;  /* ページの高さを100%にする */
    overflow-x: hidden;  /* 横スクロールを防ぐ */
}

/* ========================================
   右側のタイトル画像の背景にぼかし効果を追加
   ======================================== */
.top-right {
    background-color: rgba(135, 206, 235, 0.8);  /* 背景色を半透明に設定 */
    backdrop-filter: blur(10px);  /* 背景のぼかし効果を追加（10pxの強度） */
}


/* 狐イラスト全体の配置設定 */
.fox-container {
    position: absolute;  /* タイトル画像の上に重ねる */
    width: 100%;  /* コンテナ全体の幅を確保 */
    height: 100%;  /* コンテナ全体の高さを確保 */
    top: 0;  /* 親要素（.top-container）の上から配置 */
    left: 0;  /* 左端から配置 */
    display: flex;  /* フレックスボックスで配置 */
    justify-content: space-between;  /* 左右に分ける */
    align-items: center;  /* 縦方向の中央揃え */
    pointer-events: none;  /* クリックイベントを通過させる（画像がボタンを邪魔しないように） */
    opacity: 1.0;  /* 透明度を60%に設定（調整可能） */
}

/* 左側の狐イラスト */
.fox-left {
    position: absolute;
    left: 48%;  /* 任意の位置に調整可能（左端からの距離） */
    top: 80%;  /* 縦位置（中央に配置） */
    transform: translateY(-50%);  /* 画像の高さの半分だけ上にずらして完全に中央 */
    width: 200px;  /* 狐の画像の幅（変更可能） */
    height: auto;  /* アスペクト比を維持 */
}

/* 右側の狐イラスト */
.fox-right {
    position: absolute;
    right: 3%;  /* 任意の位置に調整可能（右端からの距離） */
    top: 80%;  /* 縦位置（中央に配置） */
    transform: translateY(-50%);  /* 画像の高さの半分だけ上にずらして完全に中央 */
    width: 200px;  /* 狐の画像の幅（変更可能） */
    height: auto;  /* アスペクト比を維持 */
}

/* ========================================
   ミニキャラの設定
   ======================================== */
.fox-right-character{
    position: absolute;
    right: 40%;  /* 任意の位置に調整可能（右端からの距離） */
    top: 20%;  /* 縦位置（中央に配置） */
    transform: translateY(-50%);  /* 画像の高さの半分だけ上にずらして完全に中央 */
    width: 160px;  /* 狐の画像の幅（変更可能） */
    height: auto;  /* アスペクト比を維持 */
}

.fox-left-character{
    position: absolute;
    right: 1.3%;  /* 任意の位置に調整可能（右端からの距離） */
    top: 56%;  /* 縦位置（中央に配置） */
    transform: translateY(-50%);  /* 画像の高さの半分だけ上にずらして完全に中央 */
    width: 160px;  /* 狐の画像の幅（変更可能） */
    height: auto;  /* アスペクト比を維持 */
}

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

/* スマホ対応用CSS調整 */
@media (max-width: 768px) {

  .top-mobile-image{
   display: block !important;
   }

  .top-container {
    flex-direction: column; /* 縦並びに変更 */
    height: auto;
  }

  .top-left, .top-right {
    display: none; /* 左右の要素を非表示 */
  }

  .top-mobile-image {
    display: block;
    width: 100%;
    object-fit: cover;
  }

  .fox-container {
    display: none; /* スマホでは狐イラストを非表示 */
  }
}

/* PC表示ではスマホ用画像を非表示 */
.top-mobile-image {
  display: none;
}