@charset "UTF-8";

/* ========================================
   LP - natura-project で追加した表示調整
   （locusia から移植した lp-audition.css は変更せず、ここで上書きする）
   ======================================== */

/* 見出しの太さは500を上限にする（元CSSの700・900を上書き。ボタン・日付等の太字は対象外） */
.lp-sidebar-title,
.lp-hero-sp-title,
.lp-section-label,
.lp-section-title,
.lp-concept-heading,
.lp-video-title,
.lp-timeline-label,
.lp-producer-name,
.lp-cta-heading,
.lp-people-name,
.lp-group-name-main,
.lp-group-sns-heading,
.lp-footer-sns-heading,
.lp-live-title,
.lp-req-extra-heading,
.lp-policy-modal-title,
.lp-policy-modal-body h2,
.lp-policy-modal-body h3,
.lp-policy-modal-body h4 {
    font-weight: 500;
}

/* PC左エリアの募集期間（ENTRY PERIOD）の枠の余白（元CSS: 12px 28px） */
.lp-sidebar-period {
    padding: 12px 20px;
}

/* SPヒーローの募集期間（ENTRY PERIOD）の枠の余白（元CSS: 12px 24px） */
.lp-hero-sp-period {
    padding: 12px;
}

/* SPヒーローの募集期間：改行したときの行間を狭く（元はページ既定の1.8を継承） */
.lp-hero-sp-period-date {
    line-height: 1.3;
}

/* SPヒーロー画像：繰り返さず、ヒーロー全体を覆う（元CSSは横幅合わせのみで、横長画像だと縦に繰り返していた） */
.lp-audition:not(.lp-teaser) .lp-hero-sp-bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* ヒーロー文字の縦位置（管理画面「ヒーロー」タブで選択。中央は既定のまま）
   body に lp-pos-top / lp-pos-bottom が付き、SPヒーローとPCサイドバーの両方に効く */

/* SP：ヒーロー内 */
.lp-pos-top .lp-hero-sp {
    align-items: flex-start;
    padding-top: 48px;
}

.lp-pos-bottom .lp-hero-sp {
    align-items: flex-end;
    padding-bottom: 48px;
}

/* 写真欄（コンセプト下・応募資格の最後など。列数・形は管理画面で選択） */
.lp-photos {
    display: grid;
    gap: 12px;
    margin-top: 40px;
}

.lp-photos--cols2 { grid-template-columns: repeat(2, 1fr); }
.lp-photos--cols3 { grid-template-columns: repeat(3, 1fr); gap: 8px; }

.lp-photo {
    margin: 0;
}

.lp-photo img {
    display: block;
    width: 100%;
    height: auto;
    /* 矩形（既定）は角丸。サークル・柔らかい形状は下で上書き */
    border-radius: 12px;
}

/* 写真の形（マスク）：サークル・柔らかい形状は正方形に切り抜く */
.lp-photos--circle .lp-photo img,
.lp-photos--soft .lp-photo img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
}

.lp-photos--circle .lp-photo img {
    border-radius: 50%;
}

/* 柔らかい形状：角を不規則に丸めた有機的な形。並びで形を少しずつ変えて自然に見せる */
.lp-photos--soft .lp-photo img {
    border-radius: 62% 38% 55% 45% / 48% 58% 42% 52%;
}

.lp-photos--soft .lp-photo:nth-child(3n+2) img {
    border-radius: 42% 58% 38% 62% / 60% 44% 56% 40%;
}

.lp-photos--soft .lp-photo:nth-child(3n) img {
    border-radius: 55% 45% 64% 36% / 40% 62% 38% 60%;
}

.lp-photo figcaption {
    margin-top: 6px;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--lp-gray);
    text-align: center;
}

/* 応募資格の下に追加する項目（報酬・費用など） */
.lp-req-extra {
    margin-top: 40px;
}

.lp-req-extra-heading {
    margin: 0 0 8px;
    padding-left: 12px;
    border-left: 3px solid var(--lp-accent);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
}

.lp-req-extra-text {
    margin: 12px 0 0;
    font-size: 0.9rem;
    line-height: 1.8;
}

/* 注記（箇条書きの項目内、または単独の行） */
.lp-req-extra-note {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;
    line-height: 1.7;
    color: var(--lp-gray);
}

/* ENTRYセクションのボタン文字色を白に固定
   （.lp-page a { color: inherit } の方が詳細度が高く、セクションの文字色を変えるとボタン文字まで変わるため） */
.lp-cta .lp-btn--line,
.lp-cta .lp-btn--primary {
    color: var(--lp-white);
}

/* PC：左固定サイドバー（中身自体に上下40pxの余白があるため、合計48px程度になるよう調整） */
.lp-pos-top .lp-sidebar {
    align-items: flex-start;
    padding-top: 8px;
}

.lp-pos-bottom .lp-sidebar {
    align-items: flex-end;
    padding-bottom: 8px;
}