@charset "utf-8";

/* ==========================================================================
   sayyoutoyoasobi - ABEMA声優と夜あそび × ブックライブ スペシャルコラボ
   画像配置先: /resources/image/landing/campaign/sayyoutoyoasobi/
   ========================================================================== */

/* ===== ラッパー ===== */
.seiyutoyoasobi-wrap {
    font-family: 'Noto Sans JP', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'ヒラギノ角ゴシック', 'Hiragino Sans', 'Meiryo', 'メイリオ', sans-serif;
    background-color: #111111;
    color: #FFFFFF;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

/* ===== グローバルCSSリセット ===== */
/* サイト共通のaタグスタイルを上書き */
.seiyutoyoasobi-wrap a,
.seiyutoyoasobi-wrap a:link,
.seiyutoyoasobi-wrap a:visited,
.seiyutoyoasobi-wrap a:hover,
.seiyutoyoasobi-wrap a:active {
    color: #FFFFFF;
    text-decoration: none;
}

/* ===== KV ===== */
.seiyutoyoasobi-kv__img {
    display: block;
    width: 100%;
    height: auto;
}

/* ===== キャンペーン概要 ===== */
.seiyutoyoasobi-intro {
    position: relative;
    overflow: hidden;
    padding: 16px 20px 63px;
}

/* 背景画像：セクション全体を覆う絶対配置 */
.seiyutoyoasobi-intro__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.seiyutoyoasobi-intro__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(60, 8, 60, 0.6) 0%, rgba(149, 68, 140, 0.6) 90.38%);

    /* 混ぜ合わせたい場合はここでも mix-blend-mode が使えます */
    mix-blend-mode: soft-light;
    z-index: 1;
}

/* カード：通常フローで背景画像の上に来る */
.seiyutoyoasobi-intro__card {
    position: relative;
    z-index: 1;
    background-color: #111111;
    border: 3px solid #FAF227;
    border-radius: 8px;
    box-shadow: -4px -4px 0px #C36EED, 4px 4px 0px #FF4988;
    padding: 20px 15px 28px;
    margin-bottom: 36px;
}

.seiyutoyoasobi-intro__collaboration {
    width: 100%;
    height: auto;
    margin-bottom: 14px;
}

.seiyutoyoasobi-intro__abema-section {
    text-align: center;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.seiyutoyoasobi-intro__text {
    color: #FFFFFF;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 12px;
}

.seiyutoyoasobi-intro__button a {
    width: 280px;
    height: 48px;
    background-color: #FFCC00;
    color: #000000 !important;
    font-size: 16px;
    display: flex;
    margin: auto;
    border-radius: 74px;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

.seiyutoyoasobi-intro__button-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 8px;
}

.seiyutoyoasobi-intro__button img {
    margin-left: 15px;
}

.seiyutoyoasobi-intro__attention {
    font-size: 12px;
    color: #FFFFFF;
    margin-top: 8px;
}

/* カードタイトル */
.seiyutoyoasobi-intro__title {
    text-align: center;
    margin: 0 0 20px;
}

.seiyutoyoasobi-intro__title img {
    width: 100%;
    height: auto;
}

/* 声優写真 */
.seiyutoyoasobi-intro__photos {
    display: flex;
    justify-content: center;
    gap: 29px;
}

.seiyutoyoasobi-intro__photo {
    display: block;
    width: calc(80% / 2);
    height: auto;
}

/* ===== リストセクション 共通 ===== */
.seiyutoyoasobi-list {
    position: relative;
    z-index: 1;
    overflow: visible;
    padding-bottom: 40px;
}

.seiyutoyoasobi-list--yasumoto {
    background: #2A2133;
    border: 3px solid #FAF227;
    border-radius: 4px;
    box-shadow: -4px -4px 0px #C36EED, 4px 4px 0px #FF4988;
    transform: rotate(-6deg);
    width: 150%;
    position: relative;
    left: -25%;
    top: -20px;
}

.seiyutoyoasobi-list--enoki {
    background: #2A2133;
    border: 3px solid #FAF227;
    border-radius: 4px;
    box-shadow: -4px -4px 0px #C36EED, 4px 4px 0px #FF4988;
    transform: rotate(6deg);
    left: -25%;
    width: 150%;
    margin-top: 20px;
}

.seiyutoyoasobi-list__inner {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    overflow: visible;
    /* yasumoto が width:150% で傾いているので、内部コンテンツは wrap 幅に戻す */
    width: calc(100% / 1.5);   /* 150% 親に対して元の 100% 相当 */
    margin: 0 auto;
    padding: 0 14px 20px;
}
.seiyutoyoasobi-list__inner.yasumoto {
    transform: rotate(6deg);
    padding-right: 17px;
    padding-left: 19px;
}
.seiyutoyoasobi-list__inner.enoki {
    transform: rotate(-6deg);
    padding-right: 24px;
    padding-left: 12px;
}

/* ===== セパレーター（seiyu_bg.png 下部を帯で表示）===== */
.seiyutoyoasobi-bg-separator {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 160px;
    overflow: hidden;
    /* 上下のリストセクション（rotate済み）の下へ潜り込む */
    margin-top: -50px;
    margin-bottom: -50px;
}

.seiyutoyoasobi-bg-separator img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    transform: translateY(-70%);
}

/* リスト セクションヘッダー（ポートレート + 見出し） */
.seiyutoyoasobi-list__header {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    margin-top: -35px;
}

.seiyutoyoasobi-list__header--right {
    flex-direction: row-reverse;
}

/* 丸型ポートレート */
.seiyutoyoasobi-list__portrait {
    flex-shrink: 0;
    width: 103px;
    height: 103px;
    object-fit: cover;
    object-position: center top;
    z-index: 2;
}

/* リスト見出し */
.seiyutoyoasobi-list__heading {
    font-family: 'JTCウインS10', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1.34;
    margin: 0;
    padding-top: 16%;
    flex-grow: 2;
    text-align: center;
}

.seiyutoyoasobi-list__heading.yasumoto {
    padding-left: 8px;
}

.seiyutoyoasobi-list__heading.enoki {
    padding-right: 8px;
}

/* コメント本文 */
.seiyutoyoasobi-list__comment {
    font-size: 17px;
    line-height: 1.34;
    color: #FFFFFF;
    margin-bottom: 24px;
    word-break: break-all;
}

/* ===== ブックグリッド ===== */
.seiyutoyoasobi-list__books {
    list-style: none;
    padding: 0;
    margin-bottom: 36px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    column-gap: 24px;
    row-gap: 24px;
}

.seiyutoyoasobi-list__book-item {
    width: calc((100% - 24px) / 2);
}

.seiyutoyoasobi-list__book-link {
    display: block;
    text-decoration: none !important;
    color: #FFFFFF !important;
    -webkit-text-decoration-skip: none;
}

.seiyutoyoasobi-list__book-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    background-color: #D9D9D9;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.8);
}

.seiyutoyoasobi-list__book-title {
    display: -webkit-box;
    font-size: 17px;
    line-height: 1.34;
    font-weight: bold;
    color: #FFFFFF !important;
    text-decoration: underline !important;
    margin-top: 9px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.seiyutoyoasobi-list__book-item:nth-child(3) .enoki.seiyutoyoasobi-list__book-title,
.seiyutoyoasobi-list__book-item:nth-child(4) .enoki.seiyutoyoasobi-list__book-title {
    height: calc(17px * 1.34 * 3);
}

/* ===== もっと見るボタン ===== */
.seiyutoyoasobi-more-btn {
    display: block;
    box-sizing: border-box;
    width: 280px;
    height: 46px;
    background-color: #FFCC00;
    line-height: 44px;
    text-align: center;
    text-decoration: none !important;
    font-size: 16px;
    font-weight: 900;
    color: #333333 !important;
    clip-path: polygon(0% 0%, calc(100% - 25px) 0%, 100% 50%, calc(100% - 25px) 100%, 0% 100%);
    padding-right: 10px;
}
.seiyutoyoasobi-more-btn:hover {
    opacity: 1;
    filter: grayscale(40%) brightness(60%);
    transition: filter 0.3s ease;
}

.seiyutoyoasobi-more-btn.right {
    margin-right: 0;
    margin-left: auto;
}

/* ===== プロフィール ===== */
.seiyutoyoasobi-profiles {
    position: relative;
    overflow: hidden;
    margin-top: -30px;
}

/* 背景画像（セクション全体を覆う） */
.seiyutoyoasobi-profiles__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* コンテンツ（背景画像の上） */
.seiyutoyoasobi-profiles__body {
    position: relative;
    z-index: 1;
    padding: 60px 20px 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.seiyutoyoasobi-profile {
    position: relative;
}

/* プロフィールカード */
.seiyutoyoasobi-profile__card {
    position: relative;
    border-radius: 4px;
    overflow: visible;
    margin-bottom: 20px;
    /* 写真がカード上部からはみ出る分の余白 */
    padding-top: 16px;
    width: 100%;
}

/* 榎木さんカード */
.seiyutoyoasobi-profile__card--reversed {
}

/* 背景画像（コンテンツ高さに合わせて伸縮） */
.seiyutoyoasobi-profile__card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    border-radius: 4px;
    z-index: 0;
}

/* コンテンツ（通常フローでカード高さを決定） */
.seiyutoyoasobi-profile__card-body {
    position: relative;
    z-index: 1;
    /* 写真の高さ分（100px）＋上段の余白を確保してからテキストを開始 */
    padding: 40% 16px 20px;
}

/* 上段：写真＋名前（絶対配置で写真は左上固定、名前は写真の右に） */
.seiyutoyoasobi-profile__card-header {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    padding: 0 16px;
    gap: 12px;
}

/* 安元さん：写真左・名前右 */
.seiyutoyoasobi-profile__card-header--yasumoto {
    flex-direction: row;
    top: 12%;
}

/* 榎木さん：写真右・名前左 */
.seiyutoyoasobi-profile__card-header--enoki {
    flex-direction: row-reverse;
    top: 6%;
}

/* 安元さん：上段=写真(左)＋名前(右)、下段=テキスト全幅（旧 --left は不要になったが念のため残す） */
.seiyutoyoasobi-profile__card-body--yasumoto {
    padding: 40% 16px 25px;
}

/* 榎木さん：旧 --right も不要になったが念のため残す */
.seiyutoyoasobi-profile__card-body--enoki {
    padding: 34% 16px 25px;
}

/* プロフィール写真ラッパー（廃止・互換用に残す） */
.seiyutoyoasobi-profile__photo-wrap {
    display: none;
}

.seiyutoyoasobi-profile__photo {
    display: block;
    width: 32%;
    height: auto;
    border-radius: 4px;
    flex-shrink: 0;
}

/* お名前 */
.seiyutoyoasobi-profile__name {
    font-family: 'JTCウインS10', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1.34;
    margin: 0;
    position: absolute;
    left: 37%;
    top: 65%;
}

.seiyutoyoasobi-profile__name.yasumoto {
    margin: 0 0 4px;
    position: static;
    text-align: center;
    flex: 1;
}
.seiyutoyoasobi-profile__name.enoki {
    position: static;
    margin: 0 0 4px;
    text-align: center;
    flex: 1;
}

.seiyutoyoasobi-profile__label--green {
    color: #84FF53;
}

/* プロフィール本文（カード内に配置） */
.seiyutoyoasobi-profile__text {
    font-size: 14px;
    line-height: 1.34;
    color: #FFFFFF;
    margin: 0;
    word-break: break-all;
    position: absolute;
}

.seiyutoyoasobi-profile__text.yasumoto {
    position: static;
    padding: 0;
}

.seiyutoyoasobi-profile__text.enoki {
    position: static;
    padding: 0;
}

/*共有*/
.cp-sns {
    margin-top: 48px;
    padding-bottom: 80px;
}
.cp-sns__list {
    display: flex;
    justify-content: center;
    gap: 16px;
}
.cp-sns__list a img {
    width: 70px;
    height: 70px;
}

/* 終了表示 */
.seiyutoyoasobi-closed {
    padding: 100px 0;
    text-align: center;
    background-color: #111111;
}
.seiyutoyoasobi-closed__message {
    font-family: JTCウインS10;
    font-weight: 400;
    font-size: 20px;
    line-height: 154%;
    letter-spacing: 0%;
}
/* ==========================================================================
   PC
   ========================================================================== */

/* 600px以下ではouterは何もしない */
.seiyutoyoasobi-outer {
    position: relative;
}

@media (min-width: 600px) {
    .seiyutoyoasobi-wrap {
        max-width: 600px;
        box-shadow:
            15px 0 30px -25px #FCFF36B2, /* 右側 */
            -15px 0 30px -25px #FCFF36B2; /* 左側 */
    }
    .seiyutoyoasobi-outer {
        background-color: #222222;
    }


    /* 黒背景の上に壁紙パターンを繰り返し敷く */
    .seiyutoyoasobi-outer::before {
        --bgwall-h: 2094px;
        --bgwall-step: calc(var(--bgwall-h) - 120px); /* 120px重なり */
        content: '';
        position: absolute;
        inset: 0;
        background-color: #222222;
        background-image:
            url(../../../image/landing/campaign/sayyoutoyoasobi/seiyu_bgwall.png?20260428),
            url(../../../image/landing/campaign/sayyoutoyoasobi/seiyu_bgwall.png?20260428),
            url(../../../image/landing/campaign/sayyoutoyoasobi/seiyu_bgwall.png?20260428),
            url(../../../image/landing/campaign/sayyoutoyoasobi/seiyu_bgwall.png?20260428);
        background-repeat: no-repeat;
        background-size: auto;
        background-position:
            center calc(var(--bgwall-step) * 0),
            center calc(var(--bgwall-step) * 1),
            center calc(var(--bgwall-step) * 2),
            center calc(var(--bgwall-step) * 3);
        z-index: 0;
    }

    /* コンテンツ本体を疑似要素より前面に */
    .seiyutoyoasobi-wrap {
        position: relative;
        z-index: 1;
    }
}

/* ==========================================================================
   374px以下（小画面）
   ========================================================================== */
@media (max-width: 374px) {
    .seiyutoyoasobi-profile__card-header--yasumoto {
        top: 10%;
        padding: 0 9px;
    }

    .seiyutoyoasobi-profile__card-header--enoki {
        top: 6%;
        padding: 0 9px;
    }

    .seiyutoyoasobi-profile__name {
        font-size: 13px;
    }
    .seiyutoyoasobi-profile__name.yasumoto {
        padding: 0;
        margin: 0;
    }

    .seiyutoyoasobi-profile__name.enoki {
        padding: 0;
        margin: 0;
    }

    .seiyutoyoasobi-profile__card-body--yasumoto {
        padding: 40% 10px 18px;
    }

    .seiyutoyoasobi-profile__card-body--enoki {
        padding: 35% 10px 18px;
    }

    .seiyutoyoasobi-profile__text {
        font-size: 12px;
    }
}

/* ==========================================================================
   PC（600px以上）プロフィール調整
   ========================================================================== */
@media (min-width: 600px) {
    .seiyutoyoasobi-list__heading {
        padding-top: 55px;
    }

    .seiyutoyoasobi-profile__card-header--yasumoto {
        top: 14%;
        padding: 0 35px;
    }

    .seiyutoyoasobi-profile__card-header--enoki {
        top: 8%;
        padding: 0 35px;
    }

    .seiyutoyoasobi-profile__photo {
        width: 140px;
        height: auto;
    }

    .seiyutoyoasobi-profile__name {
        font-size: 22px;
        margin: 0 0 20px;
    }
    .seiyutoyoasobi-profile__text.yasumoto {
        padding: 0 15px 5px;
    }

    .seiyutoyoasobi-profile__name.yasumoto {
        margin-bottom: 16px;
    }

    .seiyutoyoasobi-profile__name.enoki {
        margin-bottom: 16px;
    }

    .seiyutoyoasobi-profile__text.enoki {
        padding: 0 15px 5px;
    }

    .seiyutoyoasobi-profile__card-body--yasumoto {
        padding: 190px 20px 40px;
    }

    .seiyutoyoasobi-profile__card-body--enoki {
        padding: 170px 20px 40px;
    }

    .seiyutoyoasobi-profile__text {
        font-size: 15px;
    }

    .cp-sns {
        margin-top: 40px;
        padding-bottom: 48px;
    }
}