@charset "utf-8";

/* --- LP基本設定（最優先でフォントを強制的に当てる） --- */
.iceattachedcollar-lp-wrap,
.iceattachedcollar-lp-wrap *,
.iceattachedcollar-lp-wrap h1,
.iceattachedcollar-lp-wrap h2,
.iceattachedcollar-lp-wrap h3,
.iceattachedcollar-lp-wrap h4,
.iceattachedcollar-lp-wrap h5,
.iceattachedcollar-lp-wrap h6,
.iceattachedcollar-lp-wrap h1.header-top-text,
.iceattachedcollar-lp-wrap h2.showcase-title,
.iceattachedcollar-lp-wrap h2.section-line-title,
.iceattachedcollar-lp-wrap h3.notes-title,
.iceattachedcollar-lp-wrap .status-period-title {
    font-family: "秀英丸ゴシック B", sans-serif !important;
}

.iceattachedcollar-lp-wrap {
    line-height: 1.6;
    color: #333;
    font-size: 16px;
    background-color: #ffffff;
}

.iceattachedcollar-lp-wrap * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.iceattachedcollar-lp-wrap .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 10px 15px 0px;
}

.iceattachedcollar-lp-wrap img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.pc-only { display: block; }
.sp-only { display: none; }

/* --- ヘッダー --- */
.iceattachedcollar-lp-wrap .main-header {
    background-color: #96d3eb; 
    color: #333;
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: center;
}

/* ヘッダー上部テキスト (PC用) / h1用にfont-weightを明示的調整 */
.iceattachedcollar-lp-wrap h1.header-top-text {
    font-size: 30px; 
    color: #004b7a;
    font-weight: bold;
    margin-top: 0;
    line-height: 1.6;
}

.iceattachedcollar-lp-wrap .title-banner {
    width: 100%;
    background: transparent; 
    padding: 0; 
}

.iceattachedcollar-lp-wrap .header-img {
    width: 100%;
    max-width: 920px;
}

.iceattachedcollar-lp-wrap .overlap-text-container {
    position: relative;
    z-index: 10;
}

/* イントロテキスト (PC用) */
.iceattachedcollar-lp-wrap .intro-text {
    font-size: 24px; 
    font-weight: bold;
    text-align: center;
    line-height: 1.8; 
    color: #004b7a;
}

/* --- 企画者コメントエリア --- */
.iceattachedcollar-lp-wrap .planner-comment-box {
    background-color: #ffffff;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 30px;
    margin-top: 40px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.iceattachedcollar-lp-wrap .planner-comment-image {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
}

.iceattachedcollar-lp-wrap .planner-comment-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.iceattachedcollar-lp-wrap .planner-comment-text {
    text-align: left;
}

.iceattachedcollar-lp-wrap .planner-comment-text h2 {
    font-size: 18px;
    color: #006094;
    margin-bottom: 8px;
    font-weight: bold;
}

.iceattachedcollar-lp-wrap .planner-comment-text p {
    font-size: 15px;
    color: #333;
    line-height: 1.6;
    margin: 0;
}

/* --- コンテンツエリア --- */
.iceattachedcollar-lp-wrap .content-area {
    background-color: #ffffff;
    padding: 40px 0 20px; 
}

/* --- どれか一個が届きますエリア --- */
.iceattachedcollar-lp-wrap .product-showcase-section {
    text-align: center;
}

.iceattachedcollar-lp-wrap .showcase-title {
    font-size: 28px;
    color: #006094;
    font-weight: bold;
    margin-bottom: 30px;
}

/* 商品スペックのテキストエリア設定 */
.iceattachedcollar-lp-wrap .product-specs-box {
    display: inline-block;
    text-align: left; 
    margin-top: 25px;
    font-size: 15px;
    color: #006094; 
    line-height: 1.6;
}
.iceattachedcollar-lp-wrap .product-specs-box p {
    margin: 0 0 5px 0;
}
.iceattachedcollar-lp-wrap .product-specs-box p:last-child {
    margin-bottom: 0;
}

.iceattachedcollar-lp-wrap .campaign-box {
    background-color: #fff;
    margin-bottom: 20px;
    position: relative;
}

.iceattachedcollar-lp-wrap .campaign-inner {
    padding: 15px 0 30px; 
    text-align: center;
}

/* --- 見出し（左右にライン） --- */
.iceattachedcollar-lp-wrap .section-line-title {
    font-size: 26px;
    color: #df5896;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.iceattachedcollar-lp-wrap .section-line-title::before,
.iceattachedcollar-lp-wrap .section-line-title::after {
    content: "";
    display: inline-block;
    width: 80px;
    height: 2px;
    background-color: #006094;
    margin: 0 20px;
}

/* --- 手に入れるにはテキスト --- */
.iceattachedcollar-lp-wrap .get-instruction-text {
    font-size: 22px;
    font-weight: bold;
    color: #006094;
    line-height: 1.8;
    margin-top: 20px;
}

.iceattachedcollar-lp-wrap .highlight-pink {
    background-color: #df5896;
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    display: inline-block;
    margin: 0 4px;
}

/* -----------------------------------------------------------
   ステータス表示エリア（動的メッセージ）
----------------------------------------------------------- */

/* 新設：ステータス表示エリア全体の背景ボックス (PC用) */
.iceattachedcollar-lp-wrap .status-display-box {
    background-color: #d6f1ff;  /* 背景カラー */
    border-radius: 20px;        /* 角丸の大きさ */
    padding: 40px 20px;         /* ボックス内側の余白（上下 左右） */
    max-width: 600px;           /* 横幅の上限 */
    margin: 0 auto 40px;        /* 中央配置、および下のボタンとの間の余白 */
}

/* あなたのお申し込み期間 テキスト */
.iceattachedcollar-lp-wrap .status-period-title {
    text-align: center;
    font-size: 24px;
    color: #0087c9;
    font-weight: bold;
    margin-bottom: 10px;        /* 下のテキストとの余白 */
    letter-spacing: 0.1em;
}

/* 常に表示するテキスト */
.iceattachedcollar-lp-wrap .login-note {
    text-align: center;
    font-size: 14px;
    color: #000;
    margin-bottom: 20px;        /* 下のメッセージとの余白 */
    font-weight: bold;
}

/* H2のデフォルトのmargin等をリセットしてデザインを制御しやすくする */
.iceattachedcollar-lp-wrap .dynamic-status-heading {
    margin: 0;
    padding: 0;
    text-align: center;
}

/* 動的に挿入されるテキストのコンテナ */
.iceattachedcollar-lp-wrap #status-message-container {
    color: #0087c9;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.6;
    letter-spacing: 0.1em;
    margin-bottom: 10px;        /* ボックス内での下部余白調整 */
}

/* 中身が空（ログイン前等）の時は、この要素自体を非表示にして余白を詰める */
.iceattachedcollar-lp-wrap #status-message-container:empty {
    display: none;
    margin: 0;
    padding: 0;
}

/* -----------------------------------------------------------
   エントリーボタン関連
----------------------------------------------------------- */
.iceattachedcollar-lp-wrap .test.entry-form {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 auto 20px !important;
    box-shadow: none !important;
    text-align: center !important;
    position: relative !important;
}

.iceattachedcollar-lp-wrap .test.entry-form ul,
.iceattachedcollar-lp-wrap .test.entry-form li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.iceattachedcollar-lp-wrap .test .btn {
    display: block !important;
    width: 90% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    border: none !important;
    padding: 0 0 10px 0 !important;
    background: transparent !important;
}

/* ピンクのボタン */
.iceattachedcollar-lp-wrap .test.entry-form-pink .btn button {
    width: 100% !important;
    padding: 20px 60px 20px 35px !important; 
    color: #fff !important;
    font-size: 26px !important;
    font-weight: bold !important;
    background: #df5896 !important; 
    border: none !important;
    border-radius: 10px !important; 
    box-shadow: 0 6px 0 #b33971 !important; 
    transition: 0.1s !important;
    cursor: pointer !important;
    display: block !important;
    position: relative !important;
    text-align: center !important;
    outline: none !important;
    -webkit-appearance: none;
    letter-spacing: 0.1em;
}

/* 矢印アイコンの調整 */
.iceattachedcollar-lp-wrap .test.entry-form-pink .btn button::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    right: 30px !important;
    transform: translateY(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    border-top: 12px solid transparent !important;
    border-bottom: 12px solid transparent !important;
    border-left: 16px solid #fff !important;
}

.iceattachedcollar-lp-wrap .test .btn button:active {
    transform: translateY(3px) !important; 
    box-shadow: 0 3px 0 #b33971 !important; 
}

.iceattachedcollar-lp-wrap .entry-status-note {
    font-size: 16px;
    text-align: center;
    margin-top: 12px;
    color: #333;
    font-weight: bold;
}

.iceattachedcollar-lp-wrap .check-entry-link {
    margin-top: 20px;
    margin-bottom: 40px;
    text-align: center;
}
.iceattachedcollar-lp-wrap .check-entry-link a {
    color: #333;
    text-decoration: underline;
    font-weight: bold;
    font-size: 18px;
}

/* --- 注意事項 --- */
.iceattachedcollar-lp-wrap .notes { text-align: left; font-size: 16px; padding-top: 20px; margin-top: 10px; font-weight: bold; }
.iceattachedcollar-lp-wrap .notes h3 { font-size: 18px; margin-bottom: 12px; color: #006094; font-weight: bold; }
/* 変更箇所：インデント設定を追加 */
.iceattachedcollar-lp-wrap .notes ul li {
    margin-bottom: 5px;
    list-style-type: none !important;
    padding-left: 1em; /* 1文字分全体を下げる */
    text-indent: -1em; /* 最初の1行だけ1文字分戻す */
}
.iceattachedcollar-lp-wrap .code-right { text-align: right; margin-top: 10px; }

/* -----------------------------------------------------------
   下部キャンペーンエリア
----------------------------------------------------------- */
.iceattachedcollar-lp-wrap .extra-campaign { 
    text-align: center; 
    margin: 40px 0 40px; 
}
.iceattachedcollar-lp-wrap .extra-title { color: #333; font-size: 26px; font-weight: bold; margin-bottom: 20px; }


/* --- レスポンシブ：768px以下（スマホ用） --- */
@media (max-width: 768px) {
    .pc-only { display: none !important; }
    .sp-only { display: block; }
    
    .iceattachedcollar-lp-wrap .main-header {
        padding-top: 25px;
        padding-bottom: 25px;
    }

    /* スマホ用のフォントサイズ調整 */
    .iceattachedcollar-lp-wrap h1.header-top-text { 
        font-size: 18px; 
    }
    
    .iceattachedcollar-lp-wrap .intro-text { 
        font-size: 16px; 
        text-align: center;
    }
    
    /* 企画者コメントエリアのスマホ調整 */
    .iceattachedcollar-lp-wrap .planner-comment-box {
        flex-direction: column;
        text-align: center;
        padding: 20px 15px;
        gap: 15px;
        margin-top: 25px;
    }
    .iceattachedcollar-lp-wrap .planner-comment-text {
        text-align: left;
    }
    .iceattachedcollar-lp-wrap .planner-comment-text h2 {
        text-align: center; 
    }
    
    /* 商品スペックテキストのスマホ調整 */
    .iceattachedcollar-lp-wrap .showcase-title { font-size: 20px; margin-bottom: 20px; }
    .iceattachedcollar-lp-wrap .product-specs-box {
        font-size: 13px;
        margin-top: 15px;
        max-width: 100%;
        padding: 0 10px;
    }

    .iceattachedcollar-lp-wrap .section-line-title { font-size: 20px; }
    .iceattachedcollar-lp-wrap .section-line-title::before,
    .iceattachedcollar-lp-wrap .section-line-title::after {
        width: 40px;
        margin: 0 10px;
    }

    .iceattachedcollar-lp-wrap .get-instruction-text {
        font-size: 15px;
    }
    .iceattachedcollar-lp-wrap .highlight-pink {
        padding: 2px 6px;
    }

    /* -----------------------------------------------------------
       新設：ステータス表示エリア（スマホ用）
       PC用とは別にここでカラーや上下左右の余白を自由に微調整できます
    ----------------------------------------------------------- */
    .iceattachedcollar-lp-wrap .status-display-box {
        background-color: #d6f1ff;  /* スマホ用背景カラー */
        border-radius: 15px;        /* スマホ用角丸（少し小さめに調整） */
        padding: 30px 0px;         /* スマホ用内側余白（少しタイトに調整） */
        margin: 0 auto 30px;        /* 下のボタンとの間の余白 */
        width: 100%;                 /* 画面幅に合わせて綺麗に伸縮（レスポンシブ） */
        max-width: 560px;           /* ボタンの最大幅と揃えて綺麗に見せています */
    }

    /* あなたのお申し込み期間 テキスト（スマホ用） */
    .iceattachedcollar-lp-wrap .status-period-title {
        font-size: 18px;
        margin-top: 0;              /* 上部マージンのリセット */
        margin-bottom: 8px;
    }
    
    /* ステータス表示エリア（スマホ用） */
    .iceattachedcollar-lp-wrap .login-note {
        font-size: 12px;
        margin-bottom: 15px;
    }
    .iceattachedcollar-lp-wrap #status-message-container {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .iceattachedcollar-lp-wrap .test.entry-form-pink .btn button { 
        font-size: 20px !important; 
        padding: 15px 40px 15px 20px !important;
    }
    .iceattachedcollar-lp-wrap .test.entry-form-pink .btn button::after {
        right: 20px !important;
        border-top: 8px solid transparent !important;
        border-bottom: 8px solid transparent !important;
        border-left: 12px solid #fff !important;
    }
    
    .iceattachedcollar-lp-wrap .entry-status-note { font-size: 14px; }
    .iceattachedcollar-lp-wrap .check-entry-link a { font-size: 16px; }

    .iceattachedcollar-lp-wrap .notes { font-size: 14px; }
    .iceattachedcollar-lp-wrap .notes h3 { font-size: 16px; font-weight: bold; }
    
    .iceattachedcollar-lp-wrap .extra-title { font-size: 18px; } 
}