@charset "UTF-8";
/* CSS Document */
/* 1. 基本設定: ブラウザの余白をリセットし、コンテンツを中央に配置 */
html, body {
    height: 100%; /* 画面全体の高さを確保 */
    margin: 0;
    padding: 0;
    overflow: hidden; /* スクロールを禁止し、画面内に収める */
    display: flex; /* コンテンツを中央寄せにする準備 */
    justify-content: center; /* 水平方向の中央寄せ */
    align-items: center; /* 垂直方向の中央寄せ */
    background-color: #000; /* 画像以外の背景色 (任意) */
}

/* 2. 画像コンテナ: 画面全体を占める */
.image-container {
    /* flexboxによって既に中央に配置されているため、サイズ設定は不要だが、
       画像が画面からはみ出さないようにするために、親要素として機能する */
    max-width: 100vw; /* ビューポート幅の最大 */
    max-height: 100vh; /* ビューポート高さの最大 */
}

/* 3. 画像本体の設定: 縦長・横長画面に対応する核となる設定 */
.full-screen-image {
    display: block;
    width: auto;
    height: auto;
    /* object-fit: contain; は通常、親要素内でフィットさせる際に使いますが、
       ここでは width: 100% と height: 100% の組み合わせで、
       さらに max-width/height で縦横比を維持しつつ画面内に収めるアプローチを取ります */
    
    /* 縦横比を維持しつつ、コンテナ（画面）内に完全に収めるための設定 */
    max-width: 100vw;  /* ビューポート幅の100%を最大とする */
    max-height: 100vh; /* ビューポート高さの100%を最大とする */
}