/* ---------------------------------------------------- */
/* 1. ポップアップ全体のオーバーレイ（背景の半透明部分） */
/* ---------------------------------------------------- */
.popup-overlay {
    /* 画面全体に固定表示 */
    position: fixed; /* 画面に固定し、スクロールしても動かないようにする */
    top: 0;          /* 画面の一番上 */
    left: 0;         /* 画面の一番左 */
    width: 100%;     /* 幅を画面いっぱいに */
    height: 100%;    /* 高さを画面いっぱいに */

    /* 背景色と透明度 */
    background-color: rgba(0, 0, 0, 0.7); /* 黒色を70%の透明度で表示 */

    /* 最前面に表示 */
    z-index: 1000; /* 他のコンテンツの上に表示されるように、非常に高い値を設定 */

    /* ポップアップコンテンツを中央に配置するための設定 */
    display: flex;         /* Flexboxを使って子要素（popup-content）を配置 */
    justify-content: center; /* 水平方向の中央に配置 */
    align-items: center;   /* 垂直方向の中央に配置 */

    /* 初期状態では非表示（JavaScriptで表示を切り替える） */
    opacity: 0;       /* 透明度を0にして完全に隠す */
    visibility: hidden; /* 要素自体を非表示にする（マウスイベントなども無効化） */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* 表示/非表示時の滑らかなアニメーション */
}

/* ポップアップが表示された時に適用されるクラス (JavaScriptで追加/削除) */
.popup-overlay.is-visible {
    opacity: 1;      /* 透明度を1にして表示 */
    visibility: visible; /* 要素を表示 */
}


/* ---------------------------------------------------- */
/* 2. ポップアップコンテンツ本体（画像と閉じるボタンが入る箱） */
/* ---------------------------------------------------- */
.popup-content {
    background-color: #fff; /* ポップアップの背景色を白に */
    padding: 20px;          /* 内側の余白 */
    border-radius: 8px;     /* 角を丸くする */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* 影をつけて立体感を出す */

    max-width: 900px; /* ポップアップの最大幅 (PC用画像に合わせて調整) */
    width: 90%;       /* 画面幅の90%を使用（モバイルでの対応） */

    text-align: center; /* 画像やボタンを中央揃えに */
    position: relative; /* 閉じるボタンをこの要素の右上隅に配置するために必要 */

    /* ポップアップコンテンツ表示時のアニメーション */
    transform: scale(0.9); /* 少し縮小した状態から開始 */
    transition: transform 0.3s ease; /* 変形時の滑らかなアニメーション */
}

/* ポップアップが表示された時にコンテンツを拡大表示 */
.popup-overlay.is-visible .popup-content {
    transform: scale(1); /* 元のサイズに拡大 */
}


/* ---------------------------------------------------- */
/* 3. 画像のスタイル */
/* ---------------------------------------------------- */
.popup-image {
    max-width: 100%; /* 親要素（popup-content）の幅に合わせて最大幅100%に */
    height: auto;    /* 縦横比を維持して高さを自動調整 */
    display: block;  /* 画像の下に不要な隙間ができないようにブロック要素にする */
    border-radius: 4px; /* 画像の角を少し丸くする */
}


/* ---------------------------------------------------- */
/* 4. 閉じるボタン（CSSで「×」を作成） */
/* ---------------------------------------------------- */
.popup-close-btn {
    position: absolute; /* 親要素（popup-content）に対して絶対位置で配置 */
    top: -40px;          /* 親要素の上端から40px上 */
    right: 0;        /* 親要素の右端 */
    
    background: #fff;  /* ボタンの背景色 */
    border: 1px solid #ccc; /* 枠線 */
    border-radius: 50%;    /* 丸い形にする */
    width: 30px;           /* ボタンの幅 */
    height: 30px;          /* ボタンの高さ */
    display: flex;         /* Flexboxを使って「×」を中央に配置 */
    justify-content: center;
    align-items: center;
    cursor: pointer;       /* カーソルを指の形に変える */
    font-size: 1.5em;      /* 「×」の文字サイズ (今回は使用しないが、念のため) */
    color: #888;           /* 「×」の色 (今回は使用しないが、念のため) */
    line-height: 1;        /* 行の高さを1にして余計なスペースをなくす */
    
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; /* ホバー時のアニメーション */
}

/* 「×」の線の部分 (擬似要素 :before と :after を使用) */
.popup-close-btn::before,
.popup-close-btn::after {
    content: ''; /* 擬似要素にはcontentプロパティが必須 */
    position: absolute;
    width: 2px; /* 線の太さ */
    height: 20px; /* 線の長さ */
    background-color: #888; /* 線の色 */
}

/* 最初の線（斜め） */
.popup-close-btn::before {
    transform: rotate(45deg); /* 45度回転させる */
}

/* 2番目の線（もう一方の斜め） */
.popup-close-btn::after {
    transform: rotate(-45deg); /* -45度回転させる */
}

/* 閉じるボタンにマウスが乗った時のスタイル */
.popup-close-btn:hover {
    background-color: #eee; /* 背景色を少し変える */
    transform: scale(1.1); /* 少し拡大させる */
}

/* ---------------------------------------------------- */
/* 5. その他の基本スタイル (bodyのスクロール禁止用など) */
/* ---------------------------------------------------- */
body.no-scroll {
    overflow: hidden; /* スクロールを禁止する (JavaScriptで追加/削除) */
}