/*ーーーーーーーーーーーーーーーーーー
subscription
ーーーーーーーーーーーーーーーーーー*/
/* ID:126 トップページのヘッダーとFV間のマージン解消 */
.p-subscription{
    margin: 0;
    padding: 0;
    a{
        display: block;
        padding: 12px;
        text-align: center;
        font-size: clamp(0.813rem, 0.781rem + 0.13vw, 0.938rem);
    }
}

.p-subscription__notice {
    color: var(--white-color);
    a {
        background-color: var(--accent-color-red);
    }
}

.p-subscription__text{
    display: inline;
}

.p-subscription__cta{
    display: inline-block;
    margin-left: clamp(0.5rem, 0.373rem + 0.52vw, 1rem);

    &::after {
        background: url("../images/arrow-b.svg") no-repeat center center / contain;
        right: -18px;
        top: clamp(0.625rem, 0.593rem + 0.13vw, 0.75rem);
    }
}

.p-subscription__notice .p-subscription__cta {
    &::after {
        background: url("../images/arrow-b-white.svg") no-repeat center center / contain;
    }
}

/* 緊急メッセージ対応 */
.p-subscription__info {
    background-color: var(--accent-color-red);
    color: #fff;
}

.p-subscription__infosub {
    background-color: var(--bg-color);
}


/* 親：中央寄せの土台 */
.p-subscription__info,
.p-subscription__infosub {
    display: flex;
    justify-content: center;   /* aタグを中央に寄せる */
}

/* aタグ：中身(text+cta)を横並びにする。幅は中身に合わせて縮む */
.p-subscription__info a,
.p-subscription__infosub a {
    display: flex;
    align-items: center;      
}

.p-subscription__info a {
    background-color: var(--accent-color-red);
}

.p-subscription__info a:hover,
.p-subscription__infosub a:hover {
    text-decoration: underline;
}

.p-subscription__info a:hover {
    background-color: var(--accent-color-red);
}

.p-subscription__infosub a:hover {
    background-color: var(--bg-color);
}

/* テキスト：固定幅で省略表示 */
.p-subscription__info .p-subscription__text,
.p-subscription__infosub .p-subscription__text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* CTA：潰れないようにする */
.p-subscription__info .p-subscription__cta,
.p-subscription__infosub .p-subscription__cta {
    flex-shrink: 0;
    white-space: nowrap;
}

.p-subscription__info .p-subscription__cta::after  {
    content: ""; 
    background: url(../images/arrow-b-white.svg) no-repeat center center / contain;
}
.c-arrow::after {
    right: -20px;
}

@media screen and (max-width: 1023px) {
    .p-subscription__info,
    .p-subscription__infosub {
        justify-content: flex-start;
    }
    .p-subscription__info .p-subscription__text,
    .p-subscription__infosub .p-subscription__text {
        flex: 1;  
    }
}

@media (max-width: 1024px) {
    .p-subscription a {
        padding-left: 24px;
        padding-right: 24px;
        text-align: left;
    }

    .p-subscription__notice a {
        text-align: center;
    }
}