/* ============================================
   応募型キャンペーン一覧ページのスタイル
   ============================================ */

/* ページ全体背景色 */
.entry-campaign-list::before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/EntryCampaign_Back.png');
    background-size: 100% auto;
    background-position: top center;
    background-repeat: repeat;
    z-index: -1;
}

/* ページトップコンテナ */
.container-top {
    max-width: 1200px;
    margin: calc(100vw * 0.12) auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container-top .title {
    font-size: calc(100vw * 0.056);
    font-weight: bold;
    text-align: center;
    padding-bottom: calc(100vw * 0.08);
}

.container-top .description {
    font-size: calc(100vw * 0.033);
    font-weight: normal;
    text-align: center;
    line-height: 1.75;
    color: #666666;
}

/* キャンペーン一覧 */
.campaign-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: calc(100vw * 0.1);
}

/* キャンペーンブロック */
.campaign-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    box-sizing: border-box;
    margin-bottom: 5vw;
    background-color: #ffffff;
    --border-radius-calc: 2;
    overflow: hidden;
    padding-bottom: calc(100vw * 0.09);
}
.campaign-block:nth-of-type(1) {
    margin-top: 5vw;
}

.campaign-block > * {
    width: 90%;
}
/* キャッチコピー */
.campaign-catchcopy {
    font-size: calc(100vw * (28 / 720));
    color: #000000;
    text-align: center;
    margin-top: 9vw;
}

/* タイトル */
.campaign-title {
    font-size: calc(100vw * (64 / 720));
    font-weight: bold;
    text-align: center;
    margin-bottom: 0;
    margin-top: calc(100vw * 0.01);
    margin-bottom: calc(100vw * 0.08);
    line-height: 1.4;
}

/* メインビジュアル */
.campaign-visual-wrapper {
    width: 100%;
    margin-bottom: calc(100vw * 0.11);
}

.campaign-visual {
    width: 90%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ロングディスクリプション */
.campaign-long-description {
    font-size: calc(100vw * (29 / 720));
    line-height: 1.75;
    text-align: center;
    color: #333333;
}

/* 会員登録ボタン */
.btn-register-entry {
    display: inline-block;
    font-size: calc(100vw * (26 / 720));
    line-height: 3.4em;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 9999px;
    background-color: #000000;
    color: #ffffff;
    transition: all 0.3s ease;
    margin: calc(100vw * 0.04) 0;
    cursor: pointer;
    box-sizing: border-box;
    width: 81%
}

.btn-register-entry:hover {
    opacity: 0.8;
}

/* セクションタイトル（見出し） */
.section-title {
    font-size: calc(100vw * (38 / 720));
    text-align: center;
    margin-top: calc(100vw * 0.12);
    margin-bottom: calc(100vw * 0.06);
    color: #333333;
}

/* 対象品リスト */
.target-products-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(100vw * 0.16);
    margin-bottom: calc(100vw * 0.12);
}

/* 対象品ブロック */
.product-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* 順番表示（複数順次タイプ）第◯弾 */
.product-sequence {
    font-size: calc(100vw * (29 / 720));
    font-weight: bold;
    color: #333333;
    width: 100%;
    border-bottom: 0.26vw solid #aaaaaa;
}

/* 対象品期間表示（品別期間） */
.product-period-display {
    font-size: calc(100vw * (29 / 720));
    color: #333333;
    text-align: center;
    line-height: 1.6;
    margin: calc(100vw * 0.06) 0;
}

/* 商品画像（台座付き） */
.product-image-unit {
    position: relative;
    margin-bottom: calc(100vw * 0.05);
    width: 90%;
}

.product-image-unit img {
    height: auto;
    display: block;
    margin: 0 auto;
    width: 90%;
}

/* 台座効果（productDetail.cssの.image-unit::afterを参考） */
.product-image-unit::after {
    content: '';
    display: block;
    background-color: white;
    width: 100%;
    height: 0px;
    padding-top: 7%;
    box-shadow: 0px 8px 60px 0px #aaaaaa;
}

/* 品名 */
.product-name {
    font-size: calc(100vw * (53 / 720));
    font-weight: bold;
    text-align: center;
    color: #333333;
}

/* 対象（for Men/Women） */
.product-target {
    font-size: calc(100vw * (22 / 720));
    color: #999999;
    text-align: center;
}

/* カラー名 */
.product-color {
    font-size: calc(100vw * (22 / 720));
    color: #999999;
    text-align: center;
}

/* 抽選に申し込むボタン */
.btn-entry-product {
    display: inline-block;
    font-size: calc(100vw * (26 / 720));
    line-height: 3.4em;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 9999px;
    background-color: #000000;
    color: #ffffff;
    transition: all 0.3s ease;
    margin: calc(100vw * 0.04) 0;
    cursor: pointer;
    box-sizing: border-box;
    width: calc(81% / 0.9);
}

.btn-entry-product:hover:not(:disabled) {
    background-color: #333333;
}

.btn-entry-product.btn-disabled {
    background-color: #cccccc;
    color: #666666;
    cursor: not-allowed;
}

/* コメント */
.isLoggedIn-spacer {
    height: calc(100vw * 0.12);
    width: 100%;
}

.campaign-comment {
    font-size: calc(100vw * (29 / 720));
    line-height: 1.75;
    text-align: center;
    margin: 0;
    color: #333333;
}

/* 区切り線 */
.campaign-divider {
    width: 90%;
    height: 0.26vw;
    background-color: #aaaaaa;
    margin: auto;
    margin-top: calc(100vw * 0.11);
    margin-bottom: calc(100vw * -0.04);
}

/* 応募期間表示（応募期間日付） */
.campaign-period-display {
    font-size: calc(100vw * (29 / 720));
    text-align: center;
    line-height: 1.6;
    margin-bottom: calc(100vw * 0.03);
    color: #333333;
}

/* 注意文言（応募期間注意） */
.campaign-notice {
    font-size: calc(100vw * (24 / 720));
    text-align: center;
    color: #333333;
}

/* 注意事項リスト */
.note-item {
    font-size: calc(100vw * (24 / 720));
    text-align: left;
    line-height: 1.75;
    color: #333333;
    margin-bottom: calc(100vw * 0.02);
    word-break: break-all;
    overflow-wrap: break-word;
    word-wrap: break-word;
    line-break: anywhere;
    white-space: pre-wrap;
    white-space: break-spaces;
}
.note-item:last-of-type {
    margin-bottom: 0;
}

/* お問い合わせ先（お問い合わせ先本文） */
.contact-info {
    font-size: calc(100vw * (24 / 720));
    text-align: left;
    line-height:2.2;
    color: #333333;
}

/* キャンペーンなしメッセージ */
.no-campaigns {
    text-align: center;
    padding: calc(100vw * 0.15) calc(100vw * 0.05);
    font-size: calc(100vw * 0.04);
    color: #666666;
    line-height: 1.75;
}

.no-campaigns p {
    margin: calc(100vw * 0.02) 0;
}

/* ============================================
   モーダルスタイル
   ============================================ */

/* モーダルオーバーレイ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

/* モーダルコンテンツ */
.modal-content {
    position: relative;
    background-color: #ffffff;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: calc(100vw * 0.02);
    box-shadow: 0 0 calc(100vw * 0.05) rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
}

/* 閉じるボタン */
.modal-close {
    position: sticky;
    top: calc(100vw * 0.02);
    display: block;
    margin-left: auto;
    margin-right: calc(100vw * 0.02);
    margin-bottom: calc(-100vw * 0.06);
    font-size: calc(100vw * 0.06);
    background: none;
    border: none;
    cursor: pointer;
    color: #333333;
    line-height: 1;
    padding: 0;
    width: calc(100vw * 0.06);
    height: calc(100vw * 0.06);
    z-index: 10;
}

.modal-close:hover {
    color: #000000;
}

/* モーダル内商品画像 */
.modal-product-image-unit {
    position: relative;
    width: 90%;
    margin: auto;
    margin-bottom: calc(100vw * 0.05);
    margin-top: calc(100vw * 0.17);
}

.modal-product-image-unit img {
    width: 90%;
    margin: 0 auto;
    height: auto;
    display: block;
}

.modal-product-image-unit::after {
    content: '';
    display: block;
    background-color: white;
    width: 100%;
    height: 0px;
    padding-top: 7%;
    box-shadow: 0px 8px 60px 0px #aaaaaa;
    margin: 0;
}

/* モーダル内商品情報（モーダル品名） */
.modal-product-name {
    font-size: calc(100vw * (53 / 720));
    font-weight: bold;
    text-align: center;
    color: #333333;
}

.modal-product-target {
    font-size: calc(100vw * (22 / 720));
    color: #999999;
    text-align: center;
}

.modal-product-color {
    font-size: calc(100vw * (22 / 720));
    color: #999999;
    text-align: center;
    margin-bottom: calc(100vw * 0.09);
}

/* サイズ選択 */
.modal-size-selector {
    margin-bottom: calc(100vw * 0.04);
}

.size-selector-label { /* 非表示 */
    font-size: calc(100vw * 0.036);
    text-align: center;
    margin-bottom: calc(100vw * 0.03);
    color: #333333;
    display: none;
}

/* サイズボタンのラッパー（縦線を表示） */
.size-buttons-wrapper {
    width: 78%;
    margin: 0 auto;
    height: calc(100vw * 0.10);
    position: relative;
}

/* 縦線（左右） */
.size-buttons-wrapper::before,
.size-buttons-wrapper::after {
    content: '';
    display: block;
    height: 100%;
    width: 0.52vw;
    background-color: #000;
    position: absolute;
    top: 0;
    transition: all .3s;
    opacity: 0;
}

.size-buttons-wrapper::before {
    left: 0;
}

.size-buttons-wrapper::after {
    right: 0;
}

/* 右端でない場合は右線を表示 */
.not-right-edge.size-buttons-wrapper::after {
    opacity: 1;
}

/* 左端でない場合は左線を表示 */
.not-left-edge.size-buttons-wrapper::before {
    opacity: 1;
}

.size-buttons-container {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    align-items: center;
}

.size-buttons-flex {
    display: flex;
    flex-wrap: nowrap;
    gap: calc(100vw * 0.02);
    width: fit-content;
    height: 100%;
    align-items: center;
    padding: 0 4px;
}

/* サイズボタン（productData.cssの.size-buttonを参考） */
.size-button {
    width: auto;
    height: calc(100vw * 0.08);
    padding: 0;
    aspect-ratio: 1/1;
    border: var(--border-line-weight) solid #999;
    border-radius: 15%;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    background-color: #ffffff;
    font-size: calc(100vw * 0.025);
    transition: all 0.3s ease;
}

.size-button:hover {
    border-color: #333333;
}

.size-button.selected {
    background: black;
    color: white;
    border-color: black;
}

/* モーダル区切り線 */
.modal-divider {
    width: 90%;
    height: 0.26vw;
    background-color: #aaaaaa;
    margin: auto;
    margin-top: calc(100vw * 0.09);
    margin-bottom: calc(100vw * 0.11);
}

/* 同意確認タイトル（モーダル確認見出し） */
.modal-consent-title {
    font-size: calc(100vw * (29 / 720));
    text-align: center;
    line-height: 1.6;
    margin-bottom: calc(100vw * 0.04);
    color: #333333;
    font-weight: bold;
}

/* 同意項目リスト */
.modal-consent-items {
    display: flex;
    flex-direction: column;
}

.consent-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(100vw * 0.025) 0;
    border-bottom: 0.26vw solid #aaaaaa;
    width: 90%;
    height: calc(100vw * 0.14);
    margin: 0 auto;
}

.consent-item label {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

.consent-item span {
    flex: 1;
    font-size: calc(100vw * (20 / 720));
    color: #333333;
    word-break: break-all;
}

.consent-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: calc(100vw * 0.05);
    height: calc(100vw * 0.05);
    margin-left: calc(100vw * 0.05);
    cursor: pointer;
    border-radius: 10%;
    border: 0.52vw solid #333333;
    box-sizing: border-box;
    background-color: #ffffff;
    position: relative;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.consent-item input[type="checkbox"]:checked {
    background-color: #000000;
    border-color: #000000;
}

.consent-item input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: calc(100vw * 0.035);
    font-weight: bold;
    line-height: 1;
}

/* 規約トグル */
.modal-terms-toggle {
    border-bottom: 0.26vw solid #aaaaaa;
    padding: calc(100vw * 0.025) 0;
    width: 90%;
    margin: 0 auto;
    height: calc(100vw * 0.14);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

/* 本文表示時はボーダーを非表示 */
.modal-terms-toggle.expanded {
    border-bottom: none;
}

.modal-terms-toggle span {
    flex: 1;
    font-size: calc(100vw * (20 / 720));
    color: #333333;
    word-break: break-all;
}

.terms-toggle-btn {
    width: calc(100vw * 0.05);
    height: calc(100vw * 0.05);
    margin-left: calc(100vw * 0.05);
    border-radius: 10%;
    background-color: #ffffff;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

/* +記号（閉じている時） */
.terms-toggle-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 0.52vw;
    background-color: #666666;
    transition: all 0.2s ease;
}

.terms-toggle-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.52vw;
    height: 100%;
    background-color: #666666;
    transition: all 0.2s ease;
}

/* -記号（開いている時：縦線を非表示） */
.modal-terms-toggle.expanded .terms-toggle-btn::after {
    opacity: 0;
}

/* 規約本文コンテナ */
.modal-terms-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(100vw * 0.025) 0;
    border-bottom: 0.26vw solid #aaaaaa;
    width: 90%;
    margin: 0 auto;
}

#modal-terms-text {
    font-size: calc(100vw * (20 / 720));
    line-height: 2;
    color: #333333;
    width: 100%;
    padding-bottom: calc(100vw * 0.06);
    word-break: break-all;
    overflow-wrap: break-word;
    word-wrap: break-word;
    line-break: anywhere;
    white-space: pre-wrap;
    white-space: break-spaces;
}
#modal-terms-text::before {
    content: '応募規約';
    font-size: calc(100vw * (20 / 720));
    line-height: 2;
    color: #333333;
    margin-bottom: calc(100vw * 0.01);
    display: block;
}

/* 規約確認チェックボックス */
.modal-terms-checkbox {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    padding: calc(100vw * 0.025) 0;
    width: 90%;
    height: calc(100vw * 0.14);
    margin: 0 auto;
    border-bottom: 0.26vw solid #aaaaaa;
}

.modal-terms-checkbox label {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

.modal-terms-checkbox span {
    flex: 1;
    font-size: calc(100vw * (20 / 720));
    color: #333333;
    word-break: break-all;
}

.modal-terms-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: calc(100vw * 0.05);
    height: calc(100vw * 0.05);
    margin-left: calc(100vw * 0.05);
    cursor: pointer;
    border-radius: 10%;
    border: 0.52vw solid #333333;
    box-sizing: border-box;
    background-color: #ffffff;
    position: relative;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.modal-terms-checkbox input[type="checkbox"]:checked {
    background-color: #000000;
    border-color: #000000;
}

.modal-terms-checkbox input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: calc(100vw * 0.035);
    font-weight: bold;
    line-height: 1;
}
.modal-terms-checkbox.disabled::after {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: '';
    width: 100%;
    height: 100%;
    background-color: #00000088;
}

/* モーダル送信ボタン */
.btn-modal-submit {
    display: inline-block;
    font-size: calc(100vw * (26 / 720));
    line-height: 3.4em;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 9999px;
    background-color: #cccccc;
    color: #666666;
    transition: all 0.3s ease;
    margin: calc(100vw * 0.12) 9.5%;
    cursor: not-allowed;
    box-sizing: border-box;
    width: 81%;
}

.btn-modal-submit:not(:disabled) {
    background-color: #000000;
    color: #ffffff;
    cursor: pointer;
}

.btn-modal-submit:not(:disabled):hover {
    background-color: #333333;
}