@charset "UTF-8";

html {
    user-select: none;
}

.redeem {
    background-color: #cfacf6;
}

/* ★修正：帯を上品なゴールドベージュに変更 */
.redeem h2 {
    margin: 0;
    background-color: #f7e8a4;
    color: #4c4c4c; /* 文字色は、ゴールドベージュに映える、濃いグレーに変更 */
    font-size: 1.1em; /* 文字の大きさを少し大きく */
    line-height: 1.6em; /* 行間を広く */
    padding: 12px;
    text-align: center;
    font-weight: bold;
    border-radius: 8px; /* 角を丸く */
    margin: 10px; /* 余白を追加 */
}

.redeem h3 {
    position: relative;
    padding: 1em 1em 1em 1.5em;
    font-size: 1em;
    margin : 0.5em;
    border-radius: 5px;
    background:#e0e0e0;
    color:#070707;
}

.redeem h3:before {
    position: absolute;
    top: 25%;
    left: 0.75em;
    width: 6px;
    height: 50%;
    content: "";
    border-radius: 3px;
    background: #e70000;
}

/* main.cssのh5スタイルを詳細度で上書きし、背景色を白にリセットする */
main.redeem article h5 {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #333333 !important;
    padding: 10px !important;
    border: none !important;
}

/* ボタンの外枠：中央揃え */
.link_button {
    text-align: center;
    margin: 25px auto;
    padding: 0 10px;
    width: 100%;
    background-color: transparent !important;
    background-image: none !important;
}

/* ★修正：テキストリンクボタンを、目立つオレンジゴールドに変更 */
.link_button a,
.link_button a.cp-btn-anchor {
    /* レイアウト：横並び・上下左右中央 */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* 色：目立つオレンジゴールドグラデーションに変更 */
    background: linear-gradient(to bottom, #f2c03d 0%, #e8a018 100%) !important;
    background-image: linear-gradient(to bottom, #f2c03d 0%, #e8a018 100%) !important;

    /* 文字：白・太字 */
    color: #fff !important;
    font-weight: bold !important;
    font-size: 16px !important;
    text-decoration: none !important;

    /* 形状：丸み・余白 */
    padding: 15px 30px !important;
    border-radius: 50px !important;
    min-width: 280px; 
    box-sizing: border-box;

    /* 演出：強めの影と動き。影の色もオレンジゴールドに合わせる */
    box-shadow: 0 4px 15px rgba(232, 160, 24, 0.4) !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
    position: static !important;
}

/* ボタン内のテキスト：可読性を高める文字影 */
.link_button a span,
.link_button a.cp-btn-anchor span {
    color: #fff !important;
    display: inline-block !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* 右側の矢印：文字の右側に配置 */
.link_button a::after,
.link_button a.cp-btn-anchor::after {
    content: '' !important;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-top: 2px solid #fff !important;
    border-right: 2px solid #fff !important;
    transform: rotate(45deg) !important;
    position: static !important;
    margin-left: 12px !important;
    margin-top: -2px !important;
}

/* タップ時のアクション：少し凹む */
.link_button a:active,
.link_button a.cp-btn-anchor:active {
    transform: scale(0.96) !important;
    box-shadow: 0 2px 6px rgba(232, 160, 24, 0.2) !important;
    opacity: 0.9 !important;
}

/* キャンペーン記事内の地文（グレーにして読みやすく） */
.redeem article p {
    color: #333 !important;
}

/* バナーモードの時は親要素の余計な装飾を消す */
.link_button.banner-mode {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 15px auto !important;
    max-width: 100%;
}

/* 画像リンク本体 */
.banner-link {
    display: block !important;
    width: 100% !important;
    text-decoration: none !important;
    background: transparent !important;
}

/* ★修正：画像バナーの枠線と影の色もオレンジゴールドに合わせる */
.banner-link img {
    width: 100% !important;
    height: auto !important;
    display: block;
    box-sizing: border-box;
    border: 3px solid #f2c03d !important; 
    border-radius: 12px !important;   
    box-shadow: 0 5px 15px rgba(232, 160, 24, 0.3) !important; 
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.banner-link:active img {
    transform: scale(0.97) !important;
    box-shadow: 0 2px 8px rgba(232, 160, 24, 0.2) !important;
}

button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

#outer_circle {
    position: relative;
    margin: 1em auto;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-image: conic-gradient(#83ff00 0% 0%, #d9d9d9 0% 100%);
}

#inner_circle {
    background-color: #eefff2;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    position: relative;
    top: 5px;
    left: 5px;
}

#inner_circle button {
    position: absolute;
    color:#0bc94b;
    font-weight:bold;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* ★修正：お知らせ枠を、帯に合わせた薄い黄色に変更 */
.information {
    padding: 10px;
    margin: 10px;
    background: #fff8e1 !important; /* 薄い黄色 */
    border-radius: 8px;
    border: 2px solid #f2c03d !important; /* 枠線は、ボタンに合わせたオレンジゴールド */
}

article {
    padding:0.5em;
    margin-bottom: 1em;
}

article p {
    font-size:1em;
    line-height:1.4em;
}

article p span {
    display: inline;
    padding: 0;
    margin: 0;
    color: #9708fc; 
    font-size: 1.1em;
}

article ul li {
    margin:0.5em;
}
article ul li:last-child {
    margin-bottom:1em;
}

article ul li a {
    border:1px solid #ffef52;
    padding: 1em 0.5em;
    display: block;
    border-radius:5px;
}

article ul li a span {
    display: block;
    font-size: 0.9em;
    margin: 0.5em 0 0 0;
}

article ul li a p {
    position: relative;
}

article ul li a p:before {
    content: "";
    position: absolute;
    top: .1em;
    right: 0;
    width: 18px;
    height: 18px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    border-radius: 50%;
    background-color: #333333;
}
 
article ul li a p:after {
    content: "";
    position: absolute;
    top: .5em;
    right: 8px;
    transform: rotate(45deg);
    width: 6px;
    height: 6px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
}

article table {
    border-collapse: collapse;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

article table th, article table td {
    border: 2px solid #fff;
    background-color: #f1f1f1;
    padding: 1em;
}
/* ★修正：テーブル見出しを、帯に合わせたゴールドベージュに変更 */
article table th {
    background-color: #f7e8a4 !important;
    color: #4c4c4c; /* 文字色も濃いグレーに */
    font-weight: bold;
    text-align: center;
    min-width: 4em;
    font-size:0.9em;
}

.choice {
    text-align:center;
}
.choice ul {
    width:100%;
    display: flex;
}
.choice ul li {
    width:50%;
    display: table-cell;
}
.choice ul li a {
    border:3px solid #ff8989;
    background:#ffd0d0;
    font-weight:bold;
    border-radius:50px;
}
.choice ul li:last-child a {
    border:3px solid #89b0ff;
    background:#d7e4ff;
}

.notice {
    margin:0.5em;
    padding:0.5em;
    background:#f1f1f1;
    border:2px solid #696969;
    border-radius:5px;
}

.process {
    margin:1em 0.5em;
    padding:0 0 0.5em;
    border:1px solid #696969;
    border-radius:5px;
}
.process em {
    display:block;
    background:#333333;
    color:#ffffff;
    font-weight:bold;
    padding:0.5em;
    border-radius:5px 5px 0 0;
}

.process a {
    font-weight: bold;
    display: block;
    padding: 0.5em;
    margin: 1em 0.5em 0.5em;;
}

.arrow {
    position: relative;
    padding-left: 30px;
}
 
.arrow::after {
    content: "";
    margin: auto;
    margin-left:0.5em;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid #eb0036;
}
.process a span {
    background: linear-gradient(transparent 90% , #eb0036 90%);
}

.regist_banner {
    padding:0.5em;
    margin: 0 auto;
    text-align: center;
}

.notice p {
    font-size:0.9em;
    line-height:1.5em;
    text-indent:-1em;
    padding:0 0 0 1em;
}
.accordion {
    margin: 1em;
}
.toggle {
    display: none;
}
.option {
    position: relative;
    margin-bottom: 1em;
}
.title,
.content {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: all 0.3s;
}
.title {
    border: solid 1px #ccc;
    padding: 1em;
    display: block;
    color: #333;
    font-weight: bold;
}
.title::after,
.title::before {
    content: "";
    position: absolute;
    right: 1.25em;
    top: 1.25em;
    width: 2px;
    height: 0.75em;
    background-color: #999;
    transition: all 0.3s;
}
.title::after {
    transform: rotate(90deg);
}
.content {
    max-height: 0;
    overflow: hidden;
}
.toggle:checked + .title + .content {
    max-height: 500px;
    transition: all 1.5s;
}
.toggle:checked + .title::before {
    transform: rotate(90deg) !important;
}

figure img {
    width:100%;
}

.campaign-banner-box {
    position: relative;
    width: 100%;
    max-width: 98%;   
    margin: 0 auto;
    margin-bottom: 10px;
}

.bg-frame {
    width: 100%;
    display: block;
}

.banner-content {
    position: absolute;
    top: 50%;   
    left: 5%;   
    transform: translateY(-50%); 
    color: #ffffff; 
    text-align: left;
    font-family: "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ丸ゴ ProN W4", "Arial Rounded MT Bold", "Meiryo", sans-serif;
    font-weight: bold; 
    width: 90%;
}

.banner-title {
    font-size: 4.5vw; 
    font-weight: bold;
    margin-bottom: 1vw;
    white-space: nowrap; 
}

.banner-date {
    font-size: 2.8vw; 
    letter-spacing: -0.02em;
    white-space: nowrap; 
}

@media (min-width: 600px) {
    .banner-title { font-size: 24px; }
    .banner-date { font-size: 16px; }
}

/* フォーム全体のコンテナ */
.cp-form-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    font-family: sans-serif;
}

/* 注意書き */
.cp-form__notes {
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 12px;
    line-height: 1.6;
    color: #444;
}
.cp-form__notes span { color: #ff4d6d; font-weight: bold; }

.cp-form__notes p {
    margin-bottom: 1em; 
    text-indent: -1em;
    margin-left: 1em;
}

/* フォーム項目 */
.cp-form__item {
    margin-bottom: 20px;
}
.cp-form__label {
    display: block;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 8px;
    color: #333;
}
.cp-form__required { color: #ff4d6d; margin-left: 3px; }

/* 入力欄 */
.cp-form__input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px; 
    box-sizing: border-box;
}
.cp-form__input--short { width: 50%; }
.cp-form__input--readonly { background-color: #eee; color: #666; }

/* 住所グループ */
.cp-form__address-group {
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #ffb6c1;
}
.cp-form__address-row { margin-bottom: 12px; }
.cp-form__sub-label {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
}

/* エラーメッセージ */
.cp-form__error {
    color: #d32f2f;
    font-size: 12px;
    margin-top: 5px;
    font-weight: bold;
}

/* フォーム上部の案内文 */
.cp-form__heading {
    font-size: 14px;
    color: #fc1375; 
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    line-height: 1.5;
}

/* 規約リンク */
.cp-terms-link {
    font-size: 13px;
    color: #ff4d6d;
    text-decoration: underline;
}

/* 送信ボタンエリア */
.cp-form__submit-area {
    margin-top: 30px;
    text-align: center;
}
.cp-form__submit-btn {
    background-color: #f2c03d; /* ボタンに合わせたオレンジゴールド */
    color: #fff;
    border: none;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 30px;
    cursor: pointer;
    width: 100%;
    box-shadow: 0 4px 0 #e8a018; /* 影の色もオレンジゴールドに */
}
.cp-form__submit-btn:active { transform: translateY(2px); box-shadow: none; }

/* 戻るボタン */
.cp-form__actions { margin-top: 20px; text-align: center; }
.btn-back {
    display: inline-block;
    color: #666;
    font-size: 14px;
    text-decoration: none;
    padding: 10px;
}

.cp-confirm-container { max-width: 600px; margin: 0 auto; padding: 20px; }
/* アラートボックスのスタイル */
.cp-confirm__alert {
    background-color: #fff;
    border: 2px solid #d32f2f; 
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 20px;
    text-align: center;
    position: relative;
}

.cp-confirm__alert p {
    color: #d32f2f;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

/* 「まだ応募は完了していません」を大きく */
.cp-confirm__alert strong {
    font-size: 16px;
    display: block;
    margin-bottom: 3px;
}

.cp-confirm__title {
    color: #ff4d6d;
    text-align: center;
    font-size: 18px;
    margin-bottom: 10px;
}
.cp-confirm__lead { text-align: center; font-size: 13px; color: #666; margin-bottom: 25px; line-height: 1.5; }

.cp-confirm__item {
    background: #fff; padding: 15px; border-radius: 8px; margin-bottom: 10px;
    display: flex; flex-direction: column; border: 1px solid #ffdae0;
}
.cp-confirm__label { font-size: 12px; color: #ff4d6d; font-weight: bold; margin-bottom: 5px; }
.cp-confirm__value, .cp-confirm__address-display { font-size: 16px; color: #333; word-break: break-all; }

.cp-confirm__btn-area { margin-top: 30px; display: flex; flex-direction: column; gap: 15px; }
.cp-confirm__btn { padding: 15px; font-size: 18px; font-weight: bold; border-radius: 30px; cursor: pointer; border: none; width: 100%; }
.cp-confirm__btn--submit { background-color: #f2c03d; color: #fff; box-shadow: 0 4px 0 #e8a018; order: 1; } /* ボタンに合わせたオレンジゴールド */
.cp-confirm__btn--modify { background-color: #fff; color: #666; border: 2px solid #ccc; font-size: 16px; order: 2; }
.cp-confirm__btn:active { transform: translateY(2px); box-shadow: none; }
/* 確認画面の最後の注意書き */
.cp-confirm__warning {
    font-size: 13px;
    line-height: 1.5;
    color: #444;
    margin: 20px 0;
    padding: 10px;
    border-radius: 8px;
}

.cp-confirm__warning strong {
    color: #fc1375; 
    font-weight: normal; 
    display: block;
}

/* ボタンエリアの微調整 */
.cp-confirm__btn-area {
    margin-top: 10px; 
}

/* カード全体を横並びに */
.cp-finish__card--split {
    display: flex;
    align-items: center; 
    padding: 12px !important;
    gap: 12px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(255, 182, 193, 0.2);
    margin-bottom: 20px;
    text-align: left; 
}

/* 左側：アイコンとタイトル（幅を固定） */
.cp-card__left {
    flex: 0 0 100px; 
    text-align: center;
    border-right: 1px solid #ffdae0; 
    padding-right: 8px;
}

.cp-card__left .cp-finish__icon {
    margin-bottom: 4px;
}

.cp-card__left .cp-finish__title {
    font-size: 13px; 
    line-height: 1.3;
    margin-bottom: 0;
}

/* 右側：説明文（残りの幅をすべて使う） */
.cp-card__right {
    flex: 1;
}

.cp-card__right .cp-finish__text {
    font-size: 12px; 
    margin-bottom: 0;
    line-height: 1.4;
}

.cp-card__right .cp-finish__text strong {
    color: #fc1375;
}

/* 外枠：上のカードとの隙間を極小にし、背景を少し濃くしてメリハリをつける */
.cp-form__notes-compact {
    text-align: center;
    margin:-20px 0;
}

/* 見出し：h2風に背景色をつけてしっかり区切る */
.compact-h2 {
    color: #fc1375; 
    background: #fff; 
    font-size: 14px;
    font-weight: bold;
}

/* 横並びコンテナ：ここを起点に50%ずつにする */
.banner-flex-container {
    display: flex !important;
    justify-content: space-between !important;
    gap: 10px !important; 
    padding: 0 10px !important;
    margin-top: 5px !important;
    width: 100% !important;
    align-items: flex-start; 
}

/* 各バナーの塊：横幅を完全に均等（50%）にする */
.banner-item {
    flex: 1 1 0 !important; 
    min-width: 0 !important;
    display: flex;
    flex-direction: column;
}

/* メッセージ部分：画像に密着させる */
.banner-msg {
    font-size: 10px;
    font-weight: bold;
    color: #444;
    line-height: 1.2;
    margin: 0 0 3px 0 !important; 
    display: block;
    text-align: center;
}

/* 画像：横幅を50%エリアいっぱいに広げ、縦は画像本来の比率を維持 */
.banner-item img {
    width: 100% !important;   
    height: auto !important;  
    display: block;
    border-radius: 4px;
}

.form_notice {
    padding:0 0.5em 0.5em;
}
.form_notice p:last-child {
    margin-bottom:1em;
}

form {
    margin:1em auto;
}
form input {
    margin-top:0.5em;
}

/* リンクの初期状態（無効） */
.entry-link {
    text-align:center;
    display: block;
    width: 80%;
    margin: 1em auto;
    padding: 1em;
    background-color: #ccc;
    color: #666;
    text-decoration: none;
    pointer-events: none;
}

/* 両方チェックで有効化 */
#check1:checked ~ #check2:checked ~ .entry-link {
    background-color: #c90238;
    color: #fff;
    pointer-events: auto;
    font-weight:bold;
}

/* リンク（ボタン）のデザイン */
.terms-btn {
    color: #007bff;
    text-decoration: underline;
    cursor: pointer;
    font-size: 1em;
    font-weight:bold;
    margin-left: 5px;
}

/* 1. ダイアログの基本スタイル（非表示のとき） */
dialog {
    display: none; 
    width: 80%;
    max-width: 500px;
    padding: 20px;
    border: none;
    border-radius: 8px;
}

/* 2. showModal() で開いたときのスタイル */
dialog[open] {
    display: flex;
    flex-direction: column;
    height: 80vh; 
}

.scroll-area { 
    flex-grow: 1; 
    overflow-y: auto; 
    border: 1px solid #eee; 
    padding: 10px; 
    margin: 10px 0; 
}

/* ーーー ここから一番最後に追加 ーーー */

/* HTMLを変更せず、リンク内の「画像」がある場合はオレンジ背景や影を完全に消去します */
.link_button a:has(img) {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    min-width: 0 !important;
    display: block !important;
}

/* 画像リンクの時、テキスト用の矢印（>）がはみ出て表示されるのを強制的に消します */
.link_button a:has(img)::after {
    display: none !important;
    content: none !important;
}

/* タップした時も、裏側のオレンジ色や余計な影が出ないようにリセットします */
.link_button a:has(img):active {
    transform: none !important;
    box-shadow: none !important;
}