/* ページ全体の背景色を #eeeeee に設定 */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* 横スクロールを無効化 */
    background-color: #eeeeee; /* グレーの背景色 */
}

/* PC版のみ表示されるキャンペーン申請手続きセクション */
.pc-only {
    display: none;
}

@media (min-width: 768px) {
    .pc-only {
        display: block;
    }
}

/* スマホ用キャンペーン申請手続きセクションはPC版で非表示 */
.sp-only {
    display: block;
}

@media (min-width: 768px) {
    .sp-only {
        display: none;
    }
}

header {
    max-width: 100%; /* ヘッダーをページ全体にフィット */
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9); /* 半透明の白色背景 */
    border-bottom: 1px solid #ddd;
    z-index: 1000;
    padding: 5px 10px; /* 上下と左右にパディングを追加 */
    box-sizing: border-box; /* パディングを含めてサイズを計算 */
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header img#header-image {
    border-radius: 10px; /* 角を丸くする */
}

/* インストールボタンとアプリアイコンのサイズ調整 */
#install-image, #header-image {
    transition: transform 0.3s; /* ホバー時のアニメーションを追加 */
}

#install-image:hover {
    transform: scale(1.1); /* ホバー時に少し拡大 */
}

/* PC用のスタイル */
@media (min-width: 768px) {
    header img#header-image {
        height: 60px; /* PC版のアプリアイコンサイズ */
        width: 60px;
    }
    #install-image {
        height: 50px; /* PC版のインストールボタンサイズ */
        width: auto; /* アスペクト比を維持 */
    }
}

/* スマホ用のスタイル */
@media (max-width: 767px) {
    header img#header-image {
        height: 50px; /* SP版のアプリアイコンサイズ */
        width: 50px;
    }
    #install-image {
        height: 40px; /* SP版のインストールボタンサイズ */
        width: auto; /* アスペクト比を維持 */
    }
}

/* その他のスタイル */
.images {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.images img {
    width: 100%;
    height: auto;
}

/* Twitter埋め込みコンテナの背景をグレーに設定 */
.twitter-embed-container, .line-embed-container {
    background-color: #eeeeee; /* グレーの背景色 */
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 20px;
    border-radius: 10px;
    box-sizing: border-box;
}

/* LINEボタンの中央配置とサイズ変更 (PC版) */
.line-embed-container.pc {
    display: flex;
    justify-content: center; /* 中央に配置 */
    padding: 20px;
}

.line-embed-container.pc img {
    width: 200px !important; /* 幅を200pxに拡大 */
    height: auto !important; /* アスペクト比を維持 */
}

/* スマホでPC版のLINE埋め込みを非表示に */
@media (max-width: 767px) {
    .line-embed-container.pc {
        display: none; /* スマホでPC版のLINE埋め込みを非表示に */
    }
}

/* PC用とSP用の表示切り替え */
.pc {
    display: none;
}
.b {
    display: none; /* スマホでBの画像を非表示に */
}

@media (min-width: 768px) {
    .images img.a {
        display: none;
    }
    .images img.b {
        display: block;
    }
    .sp {
        display: none;
    }
    .pc {
        display: block;
    }

    .twitter-embed-container.pc {
        width: 600px; /* PC表示での幅 */
        margin: 0 auto; /* 中央に配置 */
    }

    .twitter-embed-container.pc a.twitter-timeline {
        width: 100% !important; /* 幅をコンテナに合わせる */
        height: 600px !important; /* 高さを600pxに固定 */
    }

    .line-embed-container.pc img {
        width: 200px !important; /* LINEボタンの幅を200pxに拡大 */
        height: auto !important; /* ボタンのアスペクト比を維持 */
    }
}

@media (max-width: 767px) {
    .twitter-embed-container.sp a.twitter-timeline, 
    .line-embed-container.sp img {
        width: 100% !important; /* スマホ表示での幅 */
        height: auto !important; /* スマホ表示での高さ */
    }
}

.campaign-application {
    background-color: #f9f9f9; /* 背景色を淡いグレーに */
    padding: 20px;
    border-radius: 10px;
    margin: 20px auto;
    max-width: 800px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.campaign-application h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 15px;
    text-align: center;
}

.campaign-application ol {
    padding-left: 20px;
}

.campaign-application li {
    margin-bottom: 15px;
    font-size: 16px;
    color: #555;
    line-height: 1.6;
}

.campaign-application p {
    margin: 5px 0 0 20px;
    font-size: 14px;
    color: #666;
}

.campaign-application a {
    color: #007BFF; /* リンクを青色に */
    text-decoration: none;
    font-weight: bold;
}

.campaign-application a:hover {
    text-decoration: underline; /* ホバー時に下線を表示 */
}       

footer {
    background-color: #333; /* ダークな背景色 */
    color: #fff; /* 白い文字色 */
    text-align: center;
    padding: 20px 10px;
    width: 100%;
    position: relative;
    bottom: 0;
}

.footer-content {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.footer-content p {
    margin: 0;
    padding: 10px 0;
}

.footer-nav {
    margin-top: 10px;
}

.footer-nav a {
    color: #ddd; /* 少し明るい文字色 */
    text-decoration: none;
    margin: 0 15px;
    font-size: 14px;
    transition: color 0.3s;
}

/* バナーの基本スタイル */
.floating-banner {
    display: none; /* 初期状態では非表示 */
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
    width: 300px; /* バナーのサイズ */
    height: auto;
    background-color: transparent;
    opacity: 0; /* 透明からスタート */
    transform: translateY(20px); /* 少し下からスタート */
    transition: opacity 1.5s ease, transform 1.5s ease; /* アニメーションをゆっくり */
}

/* バナーが表示されるときのスタイル */
.show-banner {
    display: block;
    opacity: 1;
    transform: translateY(0); /* 元の位置に移動 */
}

/* バナーが消えるときのスタイル */
.hide-banner {
    opacity: 0;
    transform: translateY(20px); /* 少し下に移動しながら消える */
    transition: opacity 1.5s ease, transform 1.5s ease; /* アニメーションをゆっくり */
}

/* バナーの画像 */
.floating-banner img {
    width: 100%; /* バナーの幅を設定 */
    height: auto;
}

/* バツボタンのスタイル */
.close-banner {
    position: absolute;
    top: -15px;
    right: -15px;
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 50%; /* 円形にする */
    width: 30px;
    height: 30px;
    font-size: 18px;
    color: #333;
    cursor: pointer;
    display: flex;
    justify-content: center; /* 水平方向の中央配置 */
    align-items: center; /* 垂直方向の中央配置 */
    text-align: center;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 軽い影を追加 */
}

/* バツボタンのホバー時のスタイル */
.close-banner:hover {
    color: #000;
}

/* PC表示時にのみバナーを表示 */
@media (min-width: 768px) {
    .floating-banner {
        display: block; /* PC版でバナーを表示 */
    }
}

/* スマホ版でバナーを非表示にする */
@media (max-width: 767px) {
    .floating-banner {
        display: none; /* スマホ版でバナーを非表示にする */
    }
}

/* フッター直前に追加される画像の共通スタイル */
.how-to-container {
    text-align: center;
    margin-bottom: 20px; /* フッターとの間に余白を追加 */
}

.how-to-image {
    max-width: 100%;
    height: auto;
}

/* PC表示時にのみ表示される画像 */
@media (min-width: 768px) {
    .pc-only {
        display: block;
    }
    .sp-only {
        display: none;
    }
}

/* スマホ表示時にのみ表示される画像 */
@media (max-width: 767px) {
    .pc-only {
        display: none;
    }
    .sp-only {
        display: block;
    }
}

/* YouTube埋め込み用のレスポンシブ対応 */
.iframe-container {
    width: 100%;
    max-width: 800px; /* PC版での最大幅を800pxに制限 */
    margin: 0 auto; /* PC版で中央に配置 */
    padding-bottom: 20px; /* サムネイルの下に余白を追加 */
}

.iframe-container iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* アスペクト比を16:9に指定 */
    border: none; /* ボーダーを消す */
    display: block; /* ブロック要素にすることで中央揃えを有効に */
}

/* 親要素（A5, B5）の設定 */
.relative-container {
    position: relative;
    display: block; /* 画像全体をブロックとして扱う */
    width: 100%; /* 幅を100%に設定 */
    margin: 0; /* 不要な余白を取り除く */
}

/* PC版: FukidashiのサイズをA5およびB5の幅の40%に設定 */
@media (min-width: 768px) {
    .fukidashi-overlay.pc {
        display: block; /* PC版で表示 */
        position: absolute;
        top: 3%;
        left: 50%;
        transform: translateX(-50%);
        width: 40%; /* FukidashiをA5/B5の幅の40%に設定 */
        height: auto;
    }
    .fukidashi-overlay.sp {
        display: none; /* スマホ版では非表示 */
    }
}

/* スマホ版: FukidashiのサイズをA5およびB5の幅の40%に設定 */
@media (max-width: 767px) {
    .fukidashi-overlay.pc {
        display: none; /* PC版では非表示 */
    }
    .fukidashi-overlay.sp {
        display: block; /* スマホ版で表示 */
        position: absolute;
        top: 3%;
        left: 50%;
        transform: translateX(-50%);
        width: 90%; /* FukidashiをA5/B5の幅の40%に設定 */
        height: auto;
    }
}

/* サイズが大小するアニメーション */
@keyframes pulse {
    0%, 100% {
        transform: translateX(-50%) scale(0.92);
    }
    50% {
        transform: translateX(-50%) scale(1.02); /* サイズを10%拡大 */
    }
}

/* Fukidashiにサイズが大小するアニメーションを追加 */
.fukidashi-overlay {
    animation: pulse 1.5s ease-in-out infinite;
    cursor: pointer; /* クリック可能に見せる */
}

/* クリック時のエフェクト */
.fukidashi-overlay:active {
    transform: translateX(-50%) scale(0.9);
    transition: transform 0.2s ease;
}

.relative-container a {
    display: block;  /* aタグをブロック要素として扱い、余白を取り除く */
    width: 100%;     /* aタグが画像と同じ幅を持つように設定 */
    height: auto;    /* 高さも画像に合わせる */
    margin-bottom: -7px; /* 余計なマージンを削除 */
    padding: 0;      /* 余計なパディングを削除 */
}

/*ーーーーーーーー 共通ポップアップオーバーレイここからーーーーーーーーー */


/* 共通ポップアップオーバーレイ */
.dynamic-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 半透明の背景 */
    z-index: 9999;
}

/* ポップアップコンテンツ */
.dynamic-popup-content {
    position: relative; /* 親要素に対する基準点 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 中央揃え */
    background: #ffffff; /* 背景色: 白 */
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    text-align: center;
    width: 90%; /* 最大幅 */
    max-width: 400px; /* コンパクトな幅 */
    overflow-y: auto; /* 内容が溢れた場合はスクロール */
    aspect-ratio: 3 / 5; /* 縦横比を3:4に設定 */
}

/* 縦長画像のスタイル */
.dynamic-popup-content img {
    max-width: 100%; /* 横幅をコンテナに合わせる */
    height: auto; /* 縦横比を維持 */
    object-fit: contain; /* 縦横比を保ちながら親要素内に表示 */
    border-radius: 10px; /* 画像の角を丸く */
}

/* 閉じるリンク */
.dynamic-popup-close {
    display: inline-block;
    margin-top: 10px;
    font-size: 1em;
    color: #ff6290; /* アクセントカラー */
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold;
    transition: color 0.3s;
}

.dynamic-popup-close:hover {
    color: #ff8ca3; /* ホバー時に明るいピンク */
}

/* スクロールバーのスタイル */
.dynamic-popup-content::-webkit-scrollbar {
    width: 6px; /* スクロールバーの幅 */
}

.dynamic-popup-content::-webkit-scrollbar-thumb {
    background-color: #ff6290; /* スクロールバー色: ピンク */
    border-radius: 4px;
}

.dynamic-popup-content::-webkit-scrollbar-track {
    background-color: #f7f7f7; /* スクロールバー背景 */
}



/*ーーーーーーーー 共通ポップアップオーバーレイここまでーーーーーーーーー */



/* デバイス選択ポップアップ */
.device-popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff; /* 背景: 白 */
    padding: 25px 20px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    max-width: 90%;
    width: 350px;
    font-family: 'Arial', sans-serif;
}

.device-popup-content h2 {
    font-size: 1.4em;
    color: #ff6290; /* アクセントカラー: ピンク */
    margin-bottom: 20px;
    font-weight: bold;
}

.device-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
}

.device-button {
    padding: 10px 20px;
    font-size: 1em;
    border: 2px solid #ff6290; /* ピンクの枠線 */
    border-radius: 25px; /* 丸みを強調 */
    cursor: pointer;
    color: #ff6290; /* テキスト色 */
    background-color: #ffffff; /* ボタン背景: 白 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background 0.3s, color 0.3s, transform 0.2s;
}

.device-button:hover {
    background-color: #ff6290; /* ホバー時: ピンク */
    color: #ffffff; /* テキスト色を白に */
    transform: scale(1.05); /* 少し拡大 */
}

.dynamic-popup-close {
    display: block;
    margin-top: 15px;
    color: #ff6290; /* 閉じるリンク: ピンク */
    text-decoration: underline;
    font-weight: bold;
    cursor: pointer;
    font-size: 0.9em;
    transition: color 0.3s;
}

.dynamic-popup-close:hover {
    color: #ff8ca3; /* ホバー時: 明るいピンク */
}

/* クリックエリア */
#android-clickable-area-1 {
    position: absolute;
    top: 64%; /* 親要素（画像）に対してY軸40%の位置 */
    left: 0%; /* 親要素（画像）に対してX軸30%の位置 */
    width: 100%; /* 親要素の幅の20% */
    height: 15%; /* 親要素の高さの15% */
    background: rgba(255, 0, 0, 0); /* 背景透明 */
    cursor: pointer;
    z-index: 10;
}

/* ホバー時の確認用 (デバッグ用) */
#android-clickable-area-1:hover {
    background: rgba(255, 255, 255, 0.3); /* デバッグ時にエリアを可視化 */
}

/* クリックエリア2 (新しいエリア) */
#android-clickable-area-2 {
    position: absolute;
    top: 615%; /* Y軸位置（画像内の新しい位置） */
    left: 0%; /* X軸位置 */
    width: 100%; /* エリアの幅 */
    height: 27%; /* エリアの高さ */
    background: rgba(255, 0, 0, 0); /* 背景透明 */
    cursor: pointer;
    z-index: 10;
}

#android-clickable-area-2:hover {
    background: rgba(255, 255, 255, 0.3); /* デバッグ時にエリアを可視化 */
}