/* データ取得中のオーバレイ */
#loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(128, 128, 128, 0.6);
    /* 半透明グレー */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    display: none;
    /* 初期は非表示 */
}

.spinner {
    width: 60px;
    height: 60px;
    border: 8px solid #f3f3f3;
    /* 外枠 */
    border-top: 8px solid #3498db;
    /* 青色の回転部分 */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loadingText {
    font-size: 18px;
    color: white;
    font-weight: bold;
}

/* はてな装飾 */
.referral-help-icon {
    display: inline-block;
    margin-left: 5px;
    font-weight: bold;
    color: #fff;
    background: #fd6e44;
    border-radius: 50%;
    width: 1.5em;
    height: 1.5em;
    text-align: center;
    line-height: 1.5em;
    font-size: 1.05em;
    box-shadow: 0 2px 8px rgba(251, 186, 98, 0.18);
    transition: background 0.13s, color 0.13s, box-shadow 0.15s;
    animation: blink-q 1.2s infinite;
}

@keyframes blink-q {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.45;
    }
}

.referral-help-link:hover .referral-help-icon,
.referral-help-link:focus .referral-help-icon {
    background: #fff;
    color: #fd6e44;
    box-shadow: 0 0 0 2px #fd6e4433;
}

/* アフィリエイトリンクカード用 */
.affiliate-links-container {
    display: flex;
    flex-direction: column;
    margin-top: 50px;
}

.affiliate-link-card:not(:last-child) {
    margin-bottom: 20px;
}

.affiliate-link-card {
    background-color: #f9f9f9;
    /* 背景色を薄いグレーに設定 */
    border: 1px solid #ddd;
    /* 境界線を薄いグレーで設定 */
    padding: 10px;
    /* 内側の余白を10pxに設定 */
    border-radius: 8px;
    /* 角を8pxの丸みにする */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* 軽い影を付ける */
    word-wrap: break-word;
    /* 単語が長い場合は改行する */
}

.affiliate-link-card h2 {
    font-size: 0.9em;
    /* 見出しの文字サイズを小さく設定 */
    margin-bottom: 5px;
    /* 下部のマージンを5pxに設定 */
}

.affiliate-link-card p {
    font-size: 0.9em;
    /* 段落の文字サイズを小さく設定 */
    margin-bottom: 5px;
    /* 下部のマージンを5pxに設定 */
}

.copy-button {
    background-color: #007bff;
    /* ボタンの背景色を青に設定 */
    color: white;
    /* テキスト色を白に設定 */
    padding: 5px 10px;
    /* 内側の余白を設定 */
    border: none;
    /* ボーダーなし */
    border-radius: 20px;
    /* 角を20pxの丸みにする */
    cursor: pointer;
    /* ポインターを表示 */
    font-size: 0.8em;
    /* フォントサイズを小さく設定 */
    max-width: 80px;
    /* 最大幅を80pxに制限 */
    margin-bottom: 10px;
    /* 下部のマージンを10pxに設定 */
}

.copy-button:hover {
    background-color: #0056b3;
    /* ホバー時にボタンの背景色を濃い青に変更 */
}

.copy-button:focus {
    outline: none;
    /* フォーカス時のアウトラインを消去 */
}

.copy-message {
    font-size: 0.8em;
    /* メッセージの文字サイズを小さく設定 */
    color: green;
    /* メッセージのテキスト色を緑に設定 */
    margin-top: 5px;
    /* 上部のマージンを5pxに設定 */
}

.custom-ul {
    margin-top: 40px;
    /* 上部のマージンを40pxに設定 */
}

.custom-li {
    margin-bottom: 20px;
    /* 下部のマージンを20pxに設定 */
}

#urlDisplayCard {
    background-color: #f9f9f9;
    /* 背景色を薄いグレーに設定 */
    border: 1px solid #ddd;
    /* 境界線を薄いグレーで設定 */
    padding: 20px;
    /* 内側の余白を20pxに設定 */
    margin-top: 20px;
    /* 上部のマージンを20pxに設定 */
    border-radius: 8px;
    /* 角を8pxの丸みにする */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* 軽い影を付ける */
    text-align: left;
    /* テキストを左揃えにする */
}

.table {
    width: 100%;
    /* テーブルの幅を100%に設定 */
    border-collapse: collapse;
    /* 境界線の重なりを防ぐ */
    margin-bottom: 20px;
    /* 下部のマージンを20pxに設定 */
}

.table th,
.table td {
    border: 1px solid #ddd;
    /* セルに薄いグレーの境界線を設定 */
    padding: 8px;
    /* セルの内側の余白を8pxに設定 */
    text-align: left;
    /* テキストを左揃えにする */
}

.table th {
    background-color: #f2f2f2;
    /* ヘッダーセルの背景色を薄いグレーに設定 */
}

.table tr:nth-child(even) {
    background-color: #f9f9f9;
    /* 偶数行の背景色を薄いグレーに設定 */
}

.toggle-button {
    display: inline-block;
    /* インラインブロック表示 */
    padding: 8px 10px;
    /* 内側の余白を設定 */
    margin-bottom: 40px;
    /* 下部のマージンを40pxに設定 */
    font-size: 11px;
    /* フォントサイズを小さく設定 */
    color: #ffffff;
    /* テキスト色を白に設定 */
    background-color: #28a745;
    /* ボタンの背景色を緑に設定 */
    border: none;
    /* ボーダーなし */
    border-radius: 5px;
    /* 角を5pxの丸みにする */
    cursor: pointer;
    /* ポインターを表示 */
    transition: background-color 0.3s ease;
    /* 背景色の遷移に0.3秒のアニメーションを追加 */
}

.toggle-button.active {
    background-color: #007bff;
    /* アクティブ状態の背景色を青に設定 */
}

.toggle-button:hover {
    background-color: #218838;
    /* ホバー時の背景色を濃い緑に設定 */
}

.toggle-button.active:hover {
    background-color: #0056b3;
    /* アクティブ状態でホバー時の背景色を濃い青に設定 */
}

.light-mode {
    --table-header-background-color: #f2f2f2;
    /* ライトモード時のテーブルヘッダー背景色 */
    --table-data-background-color: #f9f9f9;
    /* ライトモード時のテーブルデータ背景色 */
    --affiliate-link-card-background-color: #f9f9f9;
    /* ライトモード時のアフィリエイトリンクカード背景色 */
}

.dark-mode {
    --table-header-background-color: #000000;
    /* ダークモード時のテーブルヘッダー背景色 */
    --table-data-background-color: #201f1f;
    /* ダークモード時のテーブルデータ背景色 */
    --affiliate-link-card-background-color: #000000;
    /* ダークモード時のアフィリエイトリンクカード背景色 */
}

.dark-mode th {
    background-color: var(--table-header-background-color);
    /* ダークモード時のテーブルヘッダーの背景色を設定 */
}

.dark-mode td {
    background-color: var(--table-data-background-color);
    /* ダークモード時のテーブルデータの背景色を設定 */
}

.dark-mode .affiliate-link-card {
    background-color: var(--affiliate-link-card-background-color);
    /* ダークモード時のアフィリエイトリンクカードの背景色を設定 */
}

.table-container {
    overflow-x: auto;
    /* 横方向にコンテンツがはみ出した場合にスクロールバーを表示 */
}

/* PWAインストールボタン */
#installButton {
    display: none;
    /* JavaScriptで表示されるまで非表示 */
    padding: 15px 15px;
    /* ボタン内の余白を設定 */
    background-color: #0056b3;
    /* ボタンの背景色 */
    color: #ffffff;
    /* ボタンの文字色 */
    border: none;
    /* ボタンの枠線を消す */
    border-radius: 5px;
    /* 角を丸める */
    font-size: 13px;
    /* 文字サイズ */
    cursor: pointer;
    /* ホバー時のカーソルをポインターに */
    transition: background-color 0.3s ease;
    /* ホバー時の背景色変更をスムーズに */
    display: block;
    /* ボタンをブロック表示 */
    max-width: 250px;
    /* ボタンの最大幅を設定 */
    text-align: center;
    /* テキストを中央揃え */
}

/* ホバー時のスタイル */
#installButton:hover {
    background-color: #0057b377;
    /* ホバー時のボタンの色を変更 */
}

.affiliate-qr-code {
    display: block;
    margin: 10px 0;
    max-width: 150px;
}

.download-button {
    display: inline-block;
    margin: 5px 5px 10px 0;
    padding: 8px 12px;
    color: #fff;
    /* 文字色を白に設定 */
    background-color: #565453f1;
    font-size: 0.8em;
    text-decoration: none;
    /* 下線を除去 */
    border-radius: 4px;
}

.download-button:hover {
    background-color: #56545398;
    /* ホバー時の背景色を変更 */
    color: #fff;
    /* 文字色を白に固定 */
}

.sns-buttons {
    display: flex;
    justify-content: flex-start;
    /* 左揃え */
    margin-top: 10px;
}

.sns-button {
    display: inline-block;
    padding: 8px 12px;
    font-size: 0.8em;
    color: #fff;
    /* 文字色を白に設定 */
    text-decoration: none;
    /* 下線を除去 */
    border-radius: 4px;
    margin: 0 5px;
    /* ボタン間のスペースを設定 */
}

.sns-button.line {
    background-color: #00c300;
}

.sns-button.twitter {
    background-color: #1DA1F2;
}

.sns-button.facebook {
    background-color: #3b5998;
}

.sns-button.line:hover {
    background-color: #07e407;
    color: #fff;
    /* 文字色を白に固定 */
}

.sns-button.twitter:hover {
    background-color: #1da0f2ab;
    color: #fff;
    /* 文字色を白に固定 */
}

.sns-button.facebook:hover {
    background-color: #3b5898c0;
    color: #fff;
    /* 文字色を白に固定 */
}

/* 友だち紹介を促す演出 */
.fade-in-text {
    opacity: 0;
    transition: opacity 1.5s ease-in;
}

.fade-in-text.show {
    opacity: 1;
}

/* アンケートを促す表記 */
.survey-notice {
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    padding: 5px;
    margin: 0 0 20px 0;
    font-size: 15px;
    color: #856404;
    border-radius: 6px;
    text-align: center;
}

/* ダークモード時のアンケート案内表示の色調整 */
html.dark-mode .survey-notice {
    background-color: #2a2a2a;
    border: 1px solid #444;
    color: #f0f0f0;
}

html.dark-mode .survey-notice button.survey-btn {
    background-color: #444;
    color: #fff;
    border: 1px solid #666;
}

html.dark-mode .survey-notice button.survey-btn:hover {
    background-color: #666;
}

#surveyNoticeContainer {
    display: none;
    /* 初期状態は非表示 */
}

/* アンケートページへの遷移ボタン */
.survey-btn {
    margin-top: -5px;
    margin-bottom: 10px;
    background-color: #856404;
    color: white;
    padding: 8px 16px;
    border: none;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
}

.survey-btn:hover {
    background-color: #b98c05;
}

/* ダッシュボード案内用のコンテナで画像をレスポンシブに */
#referralGuide img {
    max-width: 100%;
    height: auto;
    display: block;
    /* お好み。中央揃え等したい場合はmarginも調整 */
    margin: 8px auto;
}

/* カード内の紹介文エリアの画像にレスポンシブを適用 */
.affiliate-link-card .description img {
    max-width: 100%;
    height: auto;
    display: block;
    /* 中央寄せしたいならmargin: 0 auto;も可 */
}

.affiliate-link-card img,
.affiliate-link-card picture {
    max-width: 600px;
    height: auto;
    display: block;
}

/* Quill画像：デフォルトは左寄せ。pictureごと対応 */
#referralGuide img,
#referralGuide picture {
    display: block;
    margin-left: 0 !important;
    margin-right: auto !important;
    max-width: 100%;
    height: auto;
}

/* 中央寄せ（pタグにql-align-center） */
#referralGuide .ql-align-center img,
#referralGuide .ql-align-center picture {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 右寄せ */
#referralGuide .ql-align-right img,
#referralGuide .ql-align-right picture {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* 左寄せ明示時 */
#referralGuide .ql-align-left img,
#referralGuide .ql-align-left picture {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Quill動画（YouTube等）のスタイル */
iframe.ql-video {
    display: block;
    width: 100%;
    max-width: 1000px;
    /* お好みで */
    height: 563px;
    /* 1000 * 9 / 16 = 562.5 → 563 */
    border: none;
    background: #000;
    margin-left: 0;
    margin-right: auto;
}

.video-wrapper iframe.ql-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* 中央寄せ */
iframe.ql-video.ql-align-center {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
}

.video-wrapper.ql-align-center {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 右寄せ */
iframe.ql-video.ql-align-right {
    margin-left: auto !important;
    margin-right: 0 !important;
    display: block;
}

.video-wrapper.ql-align-right {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* 左寄せ */
iframe.ql-video.ql-align-left {
    margin-left: 0 !important;
    margin-right: auto !important;
    display: block;
}

.video-wrapper.ql-align-left {
    margin-left: 0 !important;
    margin-right: auto !important;
}

@media (max-width: 650px) {

    .video-wrapper,
    iframe.ql-video {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 600px) {
    #installButton {
        margin-left: auto;
        margin-right: auto;
    }
}

html.dark-mode #referralNoteModal>div {
    background: #222 !important;
    color: #f0f0f0 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

html.dark-mode #referralNoteModal button#closeReferralNote {
    color: #aaa !important;
}


/* QRコード読み取りカメラのスタイル */
/* ─────────────────────────────
   共通：メタリック風スタイル基盤
   ※ #qrCameraContainer に .metal-xxx を付与して色替え
   シルバー：<div id="qrCameraContainer" class="metal-silver">
   ゴールド：<div id="qrCameraContainer" class="metal-champagne">
   グラファイト：<div id="qrCameraContainer" class="metal-graphite">
   ───────────────────────────── */
#qrCameraContainer {
  --btn-fg: #fff;
  --btn-radius: 12px;
  --btn-shadow: 0 8px 16px rgba(0,0,0,.18);
  --btn-inset: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.2);
  --frame-radius: 16px;
  --frame-shadow: 0 10px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.3);
  --sheen-deg: 75deg;
  --sheen: linear-gradient(var(--sheen-deg), transparent 0%, rgba(255,255,255,.25) 18%, rgba(255,255,255,.55) 32%, transparent 46%) no-repeat;
  gap: 14px; /* すこし余白を上品に */
}

/* ボタン共通（開始/終了） */
#startCameraButton, #closeCameraButton {
  position: relative;
  overflow: hidden;
  padding: 12px 26px;
  border: none;
  border-radius: var(--btn-radius);
  color: var(--btn-fg);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: var(--btn-shadow);
  transition: transform .08s ease, filter .2s ease, box-shadow .2s ease, background-position .35s ease;
  background-size: 220% 220%;
  background-position: 50% 50%;
}
#startCameraButton::after,
#closeCameraButton::after{
  /* 斜めの走るハイライト（ホバー時に横切る） */
  content:"";
  position:absolute; inset:0;
  background: var(--sheen);
  background-size: 200% 200%;
  transform: translateX(-120%);
  transition: transform .6s ease;
  pointer-events:none;
}
#startCameraButton:hover::after,
#closeCameraButton:hover::after{
  transform: translateX(120%);
}
#startCameraButton:active,
#closeCameraButton:active{
  transform: translateY(1px) scale(.99);
  filter: brightness(.96);
}

/* 動画フレーム（ベゼルを金属調に） */
#qrVideo{
  width: 100%;
  max-width: 420px;
  border: none;
  border-radius: var(--frame-radius);
  padding: 8px;                      /* ベゼル厚み */
  box-shadow: var(--frame-shadow);
  background: linear-gradient(160deg, var(--bezel-hi), var(--bezel-mid) 35%, var(--bezel-lo) 70%, var(--bezel-mid)),
              repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, rgba(0,0,0,.05) 2px 4px); /* うっすらヘアライン */
}

/* 中央寄せと余白を“以前どおり”に戻す最小オーバーライド */
#qrCameraContainer{
  margin: 0 auto 35px;   /* 以前どおり：上0 / 左右auto / 下35px */
  text-align: center;    /* 子のインライン要素も中央に */
  gap: 0;                /* 追加していたギャップを無効化 */
}

/* 動画フレームを確実に中央寄せ（ブロック化 & autoマージン） */
#qrVideo{
  display: block;
  margin: 0 auto;
  padding: 0;            /* ベゼルのために追加した余白をオフ → 高さ/上下感が元に戻る */
}

/* ボタンも中央に（flex環境外でも効く保険） */
#startCameraButton,
#closeCameraButton{
  margin: 0 auto;
}

/* ステータスの点滅 */
#cameraStatus.blinking { animation: blink 1.5s infinite; }
@keyframes blink { 50% { opacity: .35; } }

/* ─────────────────────────────
   ① クール・シルバー（上品な白銀）
   ───────────────────────────── */
.metal-silver {
  --btn-grad: linear-gradient(180deg, #f5f7fa 0%, #dfe3e8 48%, #c7ccd3 52%, #b3b9c1 100%);
  --btn-rim:  linear-gradient(180deg, rgba(255,255,255,.7), rgba(0,0,0,.18));
  --bezel-hi: #f0f2f5; --bezel-mid:#c8cdd4; --bezel-lo:#a8aeb6;
}
.metal-silver #startCameraButton,
.metal-silver #closeCameraButton{
  background: var(--btn-grad);
  box-shadow: var(--btn-shadow), var(--btn-inset);
  outline: 1px solid rgba(0,0,0,.05);
}
.metal-silver #startCameraButton:hover,
.metal-silver #closeCameraButton:hover{
  filter: brightness(1.04) contrast(1.02);
}

/* ─────────────────────────────
   ② シャンパン・ゴールド（華やかで上品）
   ───────────────────────────── */
.metal-champagne {
  --btn-fg: #2b210f;
  --btn-grad: linear-gradient(180deg, #fff4d8 0%, #f1d9a7 44%, #dcbc7c 52%, #caa664 100%);
  --bezel-hi:#fff6e3; --bezel-mid:#e2cba2; --bezel-lo:#c3a36f;
}
.metal-champagne #startCameraButton,
.metal-champagne #closeCameraButton{
  background: var(--btn-grad);
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
  box-shadow: 0 8px 18px rgba(112,84,35,.22), var(--btn-inset);
  outline: 1px solid rgba(105,84,40,.25);
}
.metal-champagne #startCameraButton:hover,
.metal-champagne #closeCameraButton:hover{
  filter: brightness(1.03) saturate(1.02);
}

/* ─────────────────────────────
   ③ ミッドナイト・グラファイト（深い青黒）
   ───────────────────────────── */
.metal-graphite {
  --btn-grad: linear-gradient(180deg, #3d4854 0%, #303a45 45%, #262f38 55%, #1f2830 100%);
  --bezel-hi:#4f5a66; --bezel-mid:#2e3943; --bezel-lo:#1a2128;
}
.metal-graphite #startCameraButton,
.metal-graphite #closeCameraButton{
  background: var(--btn-grad);
  box-shadow: 0 8px 18px rgba(0,0,0,.35), var(--btn-inset);
  outline: 1px solid rgba(255,255,255,.06);
}
.metal-graphite #startCameraButton:hover,
.metal-graphite #closeCameraButton:hover{
  filter: brightness(1.06);
}

/* ダークモード時にほんの少しコントラスト調整 */
.dark-mode .metal-silver #qrVideo,
.dark-mode .metal-champagne #qrVideo,
.dark-mode .metal-graphite #qrVideo{
  box-shadow: 0 10px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.45);
}