@charset "UTF-8";

/* ==========================================================================
   フロントページ固有スタイル
   ========================================================================== */

/* front_page.css 用トークン */
:root {
    --front-page-color-cta-text: #1f2f7a;
    --front-page-color-submit-gradient-start: #2e6dd2;
    --front-page-color-submit-gradient-end: #2b7ed7;
    --front-page-color-tag-blue: #2f6fd5;
    --front-page-color-input-focus: #4866f0;
    --front-page-color-checkbox-border: #E5E7EB;
    --front-page-color-tag-bg: #d4e4f7;
    --front-page-color-input-border: #d6d9e5;
    --front-page-color-thumb-placeholder: #d9d9d9;
    --front-page-color-shadow-soft: rgba(0, 0, 0, 0.05);
    --front-page-color-shadow-medium: rgba(0, 0, 0, 0.08);
    --front-page-color-overlay-20: rgba(0, 0, 0, 0.2);
    --front-page-color-overlay-33: rgba(0, 0, 0, 0.33);
    --front-page-color-cta-shadow: rgba(16, 27, 78, 0.2);
    --front-page-color-cta-shadow-hover: rgba(16, 27, 78, 0.28);
    --front-page-color-card-shadow: rgba(17, 18, 46, 0.25);
    --front-page-color-white-20: rgba(255, 255, 255, 0.2);
    --front-page-color-white-40: rgba(255, 255, 255, 0.4);
    --front-page-color-white-60: rgba(255, 255, 255, 0.6);
    --front-page-color-white-70: rgba(255, 255, 255, 0.7);
    --front-page-color-white-85: rgba(255, 255, 255, 0.85);
    --front-page-color-white-86: rgba(255, 255, 255, 0.86);
    --front-page-color-white-90: rgba(255, 255, 255, 0.9);
    --front-page-color-white-92: rgba(255, 255, 255, 0.92);
    --front-page-color-input-focus-ring: rgba(72, 102, 240, 0.15);
    --front-page-color-structure-bg: rgba(73, 73, 73, 0.3);
    --front-page-color-title-shadow: rgba(9, 12, 33, 0.35);
    --front-page-size-minus-1: -1px;
    --front-page-size-minus-2: -2px;
    --front-page-percent-minus-50: -50%;
    --front-page-percent-0: 0%;
    --front-page-percent-33: 33%;
    --front-page-percent-40: 40%;
    --front-page-percent-49: 49%;
    --front-page-percent-50: 50%;
    --front-page-percent-60: 60%;
    --front-page-percent-100: 100%;
    --front-page-size-1: 1px;
    --front-page-size-2: 2px;
    --front-page-size-3: 3px;
    --front-page-size-5: 5px;
    --front-page-size-6: 6px;
    --front-page-size-9: 9px;
    --front-page-size-10: var(--font-size-tag-small);
    --front-page-size-14: var(--font-size-sub);
    --front-page-size-15: var(--font-size-base);
    --front-page-size-18: var(--font-size-large);
    --front-page-size-23: 23px;
    --front-page-size-28: 28px;
    --front-page-size-30: 30px;
    --front-page-size-50: 50px;
    --front-page-size-80: 80px;
    --front-page-size-200: 200px;
    --front-page-size-290: 290px;
    --front-page-size-300: 300px;
    --front-page-size-320: 320px;
    --front-page-size-380: 380px;
    --front-page-size-500: 500px;
    --front-page-size-690: 690px;
    --front-page-size-072em: 0.72em;
    --front-page-size-075rem: 0.75rem;
    --front-page-size-085rem: 0.85rem;
    --front-page-size-0875rem: 0.875rem;
    --front-page-size-095rem: 0.95rem;
    --front-page-size-1rem: 1rem;
    --front-page-size-12em: 1.2em;
    --front-page-size-15rem: 1.5rem;
    --front-page-size-100dvh: 100dvh;
    --front-page-time-012: 0.12s;
    --front-page-time-02: 0.2s;
    --front-page-opacity-08: 0.8;
    --front-page-opacity-09: 0.9;
    --front-page-opacity-092: 0.92;
    --front-page-opacity-095: 0.95;
    --front-page-line-height-12: 1.2;
    --front-page-line-height-14: 1.4;
    --front-page-line-height-15: 1.5;
    --front-page-line-height-16: 1.6;
    --front-page-line-height-17: 1.7;
    --front-page-line-height-18: 1.8;
    --front-page-font-weight-medium: 500;
    --front-page-font-weight-bold: 700;
    --front-page-grid-columns-1: 1;
    --front-page-grid-columns-3: 3;
    --front-page-grid-columns-4: 4;
    --front-page-z-index-2: 2;
    --front-page-line-clamp-3: 3;
    --front-page-aspect-ratio-video: 16 / 9;
}

/* --------------------------------------------------------------------------
   Migrated from common.css: ショートコード出力スタイル
   -------------------------------------------------------------------------- */
/* コンテンツリスト（動画・記事など） */
.l-main .article-list {
    display: grid;
    grid-template-columns: repeat(var(--front-page-grid-columns-4), 1fr);
    gap: var(--space-20);
}

.l-main .article-list article {
    background: var(--color-white);
    border-radius: var(--space-8);
    overflow: hidden;
    box-shadow: 0 var(--front-page-size-2) var(--front-page-size-5) var(--front-page-color-shadow-soft);
}

.l-main .article-list article img {
    width: var(--front-page-percent-100);
    height: auto;
    aspect-ratio: var(--front-page-aspect-ratio-video);
    object-fit: cover;
    display: block;
}

.l-main .article-list article a {
    display: block;
}

.l-main .article-list article > div {
    padding: var(--front-page-size-10) var(--front-page-size-15);
    font-size: var(--front-page-size-0875rem);
    line-height: var(--front-page-line-height-14);
}

/* --------------------------------------------------------------------------
   Migrated from common.css: フロントページ リセット・レイアウト
   -------------------------------------------------------------------------- */
/* Merged from assets/css/pages/front-page.css */

/* ==========================================================================
   Front Page (front-page.php)
   ========================================================================== */

/* Table of contents
   1. Resets (front page only)
   2. Layout
   3. Portal
   4. Concept
   5. Recommend
   6. Movies
   7. News
   8. Utilities
   9. Responsive
*/

/* ==========================================================================
   1. Resets (front page only)
   ========================================================================== */
body.home {
    padding-left: 0 !important;
    padding-right: 0 !important;
    background-color: var(--color-bg-light) !important;
    max-width: none !important;
    margin: 0 !important;
}

/* フロントページ内の要素リセット */
body.home .l-main {
    max-width: none;
    padding: 0;
    padding-bottom: var(--space-48);
    margin: 0;
}

body.home .l-main * {
    box-sizing: border-box;
}

body.home .l-main h1,
body.home .l-main h2,
body.home .l-main h3,
body.home .l-main p {
    margin: 0;
}

body.home .l-main ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.home .l-main img {
    max-width: var(--front-page-percent-100);
    height: auto;
    vertical-align: bottom;
}

/* フロントページ全体のリンクスタイル */
.l-main a:hover {
    text-decoration: none;
}

/* ==========================================================================
   2. Layout
   ========================================================================== */
.l-main {
    background-color: var(--color-white);
    display: flex;
    flex-direction: column;
    gap: var(--space-48);
}

/* --------------------------------------------------------------------------
   Migrated from common.css: ポータル (.p-top-portal)
   -------------------------------------------------------------------------- */
.p-top-portal {
    position: relative;
    z-index: 0;
    overflow: hidden;
    min-height: 300px;
    height: var(--kv-height, calc(var(--front-page-size-100dvh) - var(--header-height)));
    display: flex;
    align-items: center;
    color: var(--color-white);
    background: linear-gradient(180deg, #0A0047 0%, #443A7C 100%);
}

/* --------------------------------------------------------------------------
   KV 背景オブジェクト（absolute配置、装飾用）
   PC基準: 1440×859
   X位置・幅: calc(VALUE / 1440 * 100%)
   Y位置・高さ: calc(VALUE / 859 * 100%)
   -------------------------------------------------------------------------- */
.p-top-portal__bg {
    position: absolute;
    pointer-events: none;
}

.p-top-portal__bg img {
    display: block;
    width: 100%;
    height: 100%;
}

/* rectangle1: size(1700.13, 1640.59), pos(-702.12, -564.74) */
.p-top-portal__bg--rectangle1 {
    z-index: 1;
    left: calc(-702.12 / 1440 * 100%);
    top: calc(-564.74 / 859 * 100%);
    width: calc(1700.13 / 1440 * 100%);
    height: calc(1640.59 / 859 * 100%);
}

/* rectangle2: size(1636.6, 1702.59), pos(-795.78, 228.87) */
.p-top-portal__bg--rectangle2 {
    z-index: 2;
    left: calc(-795.78 / 1440 * 100%);
    top: calc(228.87 / 859 * 100%);
    width: calc(1636.6 / 1440 * 100%);
    height: calc(1702.59 / 859 * 100%);
}

/* rectangle3: size(1332, 1513), pos(657, -379) */
.p-top-portal__bg--rectangle3 {
    z-index: 3;
    left: calc(657 / 1440 * 100%);
    top: calc(-379 / 859 * 100%);
    width: calc(1332 / 1440 * 100%);
    height: calc(1513 / 859 * 100%);
}

/* circle: size(401, 402), pos(-89.25, -73.5) */
.p-top-portal__bg--circle {
    z-index: 4;
    left: calc(-89.25 / 1440 * 100%);
    top: calc(-73.5 / 859 * 100%);
    width: calc(401 / 1440 * 100%);
    height: calc(402 / 859 * 100%);
}

/* square: size(339.55, 339.55), pos(988, -167) */
.p-top-portal__bg--square {
    z-index: 5;
    left: calc(988 / 1440 * 100%);
    top: calc(-167 / 859 * 100%);
    width: calc(339.55 / 1440 * 100%);
    height: calc(339.55 / 859 * 100%);
}

/* グラデーションオーバーレイ: size(1440, 604), pos(0, 379) */
.p-top-portal__bg--gradient-overlay {
    z-index: 6;
    left: 0;
    top: calc(379 / 859 * 100%);
    width: 100%;
    height: calc(604 / 859 * 100%);
    background: linear-gradient(180deg, rgba(67, 58, 123, 0.00) 2.18%, rgba(255, 255, 255, 0.60) 52.03%, #FFF 78.37%);
}

/* triangle: size(234.68, 201.25), pos(495, 416) */
.p-top-portal__bg--triangle {
    z-index: 7;
    left: calc(495 / 1440 * 100%);
    top: calc(416 / 859 * 100%);
    width: calc(234.68 / 1440 * 100%);
    height: calc(201.25 / 859 * 100%);
}

.p-top-portal__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-40);
    z-index: 10;
}

.p-top-portal__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    max-width: var(--front-page-size-690);
}

.p-top-portal__headline {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.p-top-portal__title {
    width: min(calc(100vw * 693 / 1440), 693px);
    font-size: min(calc(100vw * 86 / 1440), 86px);
    font-weight: var(--front-page-font-weight-bold);
    line-height: var(--front-page-line-height-12);
    text-shadow: 0 var(--space-8) var(--space-24) var(--front-page-color-title-shadow);
}

.p-top-portal__lead {
    font-size: var(--front-page-size-1rem);
    color: var(--front-page-color-white-90);
}

/* SP用ボタン群（デフォルト非表示） */
.p-top-portal__sp-actions {
    display: none;
}

.p-top-portal__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--front-page-size-290);
    max-width: var(--front-page-percent-100);
    padding: var(--space-12) var(--front-page-size-28);
    border-radius: var(--border-radius-button);
    background: var(--color-white);
    color: var(--front-page-color-cta-text);
    font-size: 1rem;
    font-weight: var(--front-page-font-weight-bold);
    box-shadow: 0 var(--space-12) var(--space-24) var(--front-page-color-cta-shadow);
    transition: transform var(--front-page-time-02), box-shadow var(--front-page-time-02), opacity var(--front-page-time-02);
    position: relative;
}

.p-top-portal__cta::after {
    content: "";
    position: absolute;
    top: var(--front-page-percent-50);
    right: var(--space-16);
    width: var(--front-page-size-14);
    height: var(--front-page-size-14);
    transform: translateY(var(--front-page-percent-minus-50));
    background-color: currentColor;
    -webkit-mask-image: url('../../images/icon/arrow_right.svg');
    mask-image: url('../../images/icon/arrow_right.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.p-top-portal__cta:hover {
    text-decoration: none;
    transform: translateY(var(--front-page-size-minus-2));
    box-shadow: 0 var(--front-page-size-14) var(--front-page-size-30) var(--front-page-color-cta-shadow-hover);
    opacity: var(--front-page-opacity-095);
}

.p-top-portal__card {
    width: min(var(--front-page-size-380), var(--front-page-percent-40));
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--front-page-size-18);
    background: var(--front-page-color-white-86);
    color: var(--color-text);
    border-radius: var(--space-8);
    padding: var(--space-32) var(--space-40);
    box-shadow: 0 var(--front-page-size-18) var(--space-40) var(--front-page-color-card-shadow);
    backdrop-filter: blur(var(--front-page-size-6));
    border: var(--front-page-size-1) solid var(--front-page-color-white-60);
}

.p-top-portal__card-title {
    text-align: center;
    font-size: var(--front-page-size-15rem);
    font-weight: var(--front-page-font-weight-bold);
}

.p-top-portal__form {
    display: grid;
    gap: var(--space-16);
}

.p-top-portal__field {
    display: grid;
    gap: var(--space-8);
}

.p-top-portal__field input {
    width: var(--front-page-percent-100);
    border-radius: var(--front-page-size-10);
    border: var(--front-page-size-1) solid var(--front-page-color-input-border);
    padding: var(--front-page-size-10) var(--front-page-size-14);
    font-size: var(--front-page-size-095rem);
    background: var(--color-white);
    outline: none;
    transition: border-color var(--front-page-time-02), box-shadow var(--front-page-time-02);
}

.p-top-portal__field input:focus {
    border-color: var(--front-page-color-input-focus);
    box-shadow: 0 0 0 var(--front-page-size-3) var(--front-page-color-input-focus-ring);
}

.p-top-portal__input-wrap {
    position: relative;
    display: block;
}

.p-top-portal__toggle {
    position: absolute;
    right: var(--front-page-size-10);
    top: var(--front-page-percent-50);
    transform: translateY(var(--front-page-percent-minus-50));
    border: none;
    background: transparent;
    padding: 0;
    width: var(--space-24);
    height: var(--space-24);
    cursor: pointer;
    color: #CF83F4;
}

.p-top-portal__toggle::before {
    content: "";
    display: block;
    width: var(--space-20);
    height: var(--space-20);
    background-color: currentColor;
    -webkit-mask-image: url('../../images/icon/visibility.svg');
    mask-image: url('../../images/icon/visibility.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.p-top-portal__toggle.is-visible::before {
    -webkit-mask-image: url('../../images/icon/visibility_off.svg');
    mask-image: url('../../images/icon/visibility_off.svg');
}

.p-top-portal__remember {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--front-page-size-085rem);
    color: var(--color-text);
}

.p-top-portal__remember input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: var(--front-page-size-18);
    height: var(--front-page-size-18);
    margin: 0;
    border: var(--front-page-size-1) solid var(--front-page-color-checkbox-border);
    border-radius: var(--front-page-size-3);
    background-color: var(--color-white);
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.p-top-portal__remember input[type="checkbox"]::before {
    content: "";
    width: var(--front-page-size-5);
    height: var(--front-page-size-9);
    border-right: var(--front-page-size-2) solid var(--color-white);
    border-bottom: var(--front-page-size-2) solid var(--color-white);
    transform: rotate(45deg) scale(0);
    transform-origin: center;
    transition: transform var(--front-page-time-012) ease-in-out;
}

.p-top-portal__remember input[type="checkbox"]:checked {
    background-color: var(--front-page-color-submit-gradient-start);
    border-color: var(--front-page-color-submit-gradient-start);
}

.p-top-portal__remember input[type="checkbox"]:checked::before {
    transform: rotate(45deg) scale(1);
}

.p-top-portal__submit {
    border: none;
    --portal-submit-icon-size: var(--space-24);
    --portal-submit-icon-offset: var(--space-16);
    --portal-submit-icon-reserve: calc(var(--portal-submit-icon-size) + var(--portal-submit-icon-offset));
    border-radius: var(--border-radius-button);
    padding: var(--space-12) calc(var(--space-16) + var(--portal-submit-icon-reserve));
    background: linear-gradient(90deg, var(--front-page-color-submit-gradient-start) var(--front-page-percent-0), var(--front-page-color-submit-gradient-end) var(--front-page-percent-100));
    color: var(--color-white);
    font-weight: var(--front-page-font-weight-bold);
    font-size: var(--front-page-size-1rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 var(--front-page-size-1) var(--space-4) 0 var(--front-page-color-overlay-33);
    transition: transform var(--front-page-time-02), opacity var(--front-page-time-02);
    position: relative;
}

.p-top-portal__submit:hover {
    opacity: var(--front-page-opacity-09);
    transform: translateY(var(--front-page-size-minus-1));
}

.p-top-portal__submit-icon {
    display: inline-flex;
    position: absolute;
    top: var(--front-page-percent-50);
    right: var(--portal-submit-icon-offset);
    transform: translateY(var(--front-page-percent-minus-50));
    align-items: center;
    justify-content: center;
    width: var(--portal-submit-icon-size);
    height: var(--portal-submit-icon-size);
    background: transparent;
}

.p-top-portal__submit-icon img {
    width: var(--front-page-size-14);
    height: var(--front-page-size-14);
    filter: brightness(0) invert(1);
}

.p-top-portal__actions {
    display: grid;
    gap: var(--space-4);
}

.p-top-portal__error {
    font-size: var(--front-page-size-085rem);
    color: var(--color-error);
}

.p-top-portal__error:empty {
    display: none;
}

.p-top-portal__forgot {
    font-size: var(--front-page-size-085rem);
    color: var(--front-page-color-submit-gradient-start);
    text-align: left;
}

.p-top-portal__forgot:hover {
    text-decoration: none;
    opacity: var(--front-page-opacity-08);
}

/* --------------------------------------------------------------------------
   Migrated from common.css: コンセプト (.p-top-concept)
   -------------------------------------------------------------------------- */
/* 1. Concept */
/* ==========================================================================
   4. Concept
   ========================================================================== */
.p-top-concept {
    position: relative;
    z-index: 1;
    padding: var(--space-32) 0;
    background-color: var(--color-white);
}

@media screen and (min-width: 768px) {
    .p-top-portal + .p-top-concept {
        margin-top: calc(-1 * var(--space-48) - 2px);
        padding-top: calc(var(--space-48) + var(--space-32) + 2px);
    }
}

.p-top-concept__inner {
    display: grid;
    grid-template-columns: 1fr min(calc(100vw * 574 / 1440), 574px);
    gap: var(--space-12) var(--front-page-size-50);
    align-items: center;
    max-width: 1300px;
}

.p-top-concept__left {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.p-top-concept__right {
    grid-column: 2;
    grid-row: 1 / 3;
}

.p-top-concept__logo {
    display: block;
    width: var(--front-page-size-300);
    height: auto;
}

.p-top-concept__lead {
    width: min(calc(100vw * 617 / 1440), 617px);
    font-size: min(calc(100vw * 32 / 1440), 32px);
    font-weight: var(--front-page-font-weight-bold);
    color: var(--color-text);
    line-height: var(--front-page-line-height-15);
}

.p-top-concept__desc {
    grid-column: 1;
    grid-row: 2;
    font-size: 1.125rem;
    color: var(--color-text);
    line-height: var(--front-page-line-height-18);
}

.p-top-concept__diagram {
    display: block;
    max-width: var(--front-page-percent-100);
    width: var(--front-page-percent-100);
    height: auto;
}

.p-top-concept__diagram.u-sp-only {
    display: none;
}

.p-top-movies__grid {
    display: grid;
    grid-template-columns: repeat(var(--front-page-grid-columns-4), 1fr);
    gap: var(--space-20);
}

.p-top-videos__list {
    display: contents;
}

.p-top-videos__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    background: var(--color-white);
    border-radius: var(--space-12);
    overflow: hidden;
    box-shadow: 0 var(--space-4) var(--space-16) var(--front-page-color-shadow-medium);
}

.p-top-videos__thumb-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: opacity var(--front-page-time-02);
}

.p-top-videos__thumb-link:hover {
    opacity: var(--front-page-opacity-092);
    color: inherit;
    text-decoration: none;
}

.p-top-videos__thumb {
    position: relative;
    width: var(--front-page-percent-100);
    aspect-ratio: var(--front-page-aspect-ratio-video);
    overflow: hidden;
}

.p-top-videos__thumb-img {
    width: var(--front-page-percent-100);
    height: var(--front-page-percent-100);
    object-fit: cover;
}

.p-top-videos__duration {
    position: absolute;
    bottom: var(--space-12);
    right: var(--space-12);
    padding: var(--space-4) var(--front-page-size-10);
    border-radius: 4px;
    background: rgba(51, 51, 51, 0.8);
    color: var(--color-white);
    font-size: var(--font-size-small);
    z-index: var(--front-page-z-index-2);
}

.p-top-thumb-provider-tag {
    position: absolute;
    top: var(--space-12);
    right: var(--space-12);
    display: inline-flex;
    align-items: center;
    padding: var(--space-4) var(--space-12);
    border-radius: 18px;
    background: var(--color-white);
    color: var(--color-text);
    font-size: 12px;
    line-height: var(--line-height-tight);
    z-index: var(--front-page-z-index-2);
}

.p-top-videos__content-type-band {
    padding: 0;
    background: var(--color-white);
}

.p-top-movies__tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.p-top-movies__tag {
    display: inline-flex;
    align-items: center;
    padding: var(--space-4) var(--space-8);
    border-radius: var(--space-20);
    font-size: var(--front-page-size-075rem);
    color: var(--front-page-color-tag-blue);
    background: var(--front-page-color-tag-bg);
    border: var(--front-page-size-1) solid var(--front-page-color-tag-blue);
    text-decoration: none;
}

.p-top-movies__tag:hover {
    opacity: var(--front-page-opacity-09);
    color: var(--front-page-color-tag-blue);
}

.p-top-articles__list {
    display: contents;
}

.p-top-articles__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    background: var(--color-white);
    border-radius: var(--space-12);
    overflow: visible;
    box-shadow: none;
}

.p-top-articles__thumb-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: opacity var(--front-page-time-02);
}

.p-top-articles__thumb-link:hover {
    opacity: var(--front-page-opacity-092);
    color: inherit;
    text-decoration: none;
}

.p-top-articles__thumb {
    position: relative;
    width: var(--front-page-percent-100);
    aspect-ratio: var(--front-page-aspect-ratio-video);
    overflow: hidden;
}

.p-top-articles__thumb-img {
    width: var(--front-page-percent-100);
    height: var(--front-page-percent-100);
    object-fit: cover;
}

.p-top-articles__content-type-band {
    padding: 0;
    background: var(--color-white);
}

.p-top-events__list {
    display: grid;
    grid-template-columns: repeat(var(--front-page-grid-columns-3), 1fr);
    gap: var(--space-24);
}

.p-top-events__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    background: var(--color-white);
    border-radius: var(--space-12);
    overflow: hidden;
    box-shadow: 0 var(--space-4) var(--space-16) var(--front-page-color-shadow-medium);
}

.p-top-events__thumb-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: opacity var(--front-page-time-02);
}

.p-top-events__thumb-link:hover {
    opacity: var(--front-page-opacity-092);
    color: inherit;
    text-decoration: none;
}

.p-top-events__thumb {
    position: relative;
    width: var(--front-page-percent-100);
    aspect-ratio: var(--front-page-aspect-ratio-video);
    overflow: hidden;
}

.p-top-events__thumb-img {
    width: var(--front-page-percent-100);
    height: var(--front-page-percent-100);
    object-fit: cover;
}

.p-top-events__tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    padding: 0;
    background: var(--color-white);
}

.p-top-events__tag {
    display: inline-flex;
    align-items: center;
    padding: var(--space-4) 0;
    border-radius: var(--space-20);
    font-size: var(--front-page-size-075rem);
    color: var(--front-page-color-tag-blue);
    background: var(--front-page-color-tag-bg);
    border: var(--front-page-size-1) solid var(--front-page-color-tag-blue);
    text-decoration: none;
}

.p-top-events__tag:hover {
    opacity: var(--front-page-opacity-09);
    color: var(--front-page-color-tag-blue);
}

/* 新着動画・イベントカード共通 */
.p-top-media-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    background: var(--color-white);
    border-radius: var(--space-12);
    overflow: visible;
    box-shadow: none;
}

.p-top-media-card__thumb-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: opacity var(--front-page-time-02);
}

.p-top-media-card__thumb-link:hover {
    opacity: var(--front-page-opacity-092);
    color: inherit;
    text-decoration: none;
}

.p-top-media-card__thumb {
    position: relative;
    width: var(--front-page-percent-100);
    aspect-ratio: var(--front-page-aspect-ratio-video);
    overflow: hidden;
    border-radius: var(--space-12);
    box-shadow: 0 var(--space-4) var(--space-16) var(--front-page-color-shadow-medium);
}

.p-top-media-card__tag-list {
    padding: 0;
    box-shadow: none;
}

.p-top-media-card__tag {
    padding: var(--space-4) var(--space-8);
    color: var(--color-white);
    background: var(--color-primary);
    border: var(--front-page-size-1) solid var(--color-primary);
}

.p-top-media-card__tag:hover {
    color: var(--color-white);
}

.p-top-media-card__provider {
    margin: 0;
    font-size: var(--font-size-small);
    color: var(--color-gray-dark);
}

.p-top-events__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-4) var(--space-16);
    padding: 0;
    font-size: var(--front-page-size-075rem);
    color: var(--color-gray-dark);
    line-height: var(--front-page-line-height-18);
}

@media screen and (min-width: 1024px) {
    .p-top-events__meta {
        flex-direction: row;
        flex-wrap: wrap;
    }
}


.p-top-events__meta-item {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* お知らせ（dl形式） */
.p-top-info__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.p-top-info__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-12);
    padding: var(--front-page-size-15) 0;
    border-bottom: var(--front-page-size-1) solid var(--color-border);
}

@media screen and (min-width: 768px) {
    .p-top-info__item {
        width: 100%;
        margin: 0;
    }
}

@media screen and (min-width: 768px) {
    .p-top-events__list .p-top-p-top-events__thumb-link {
        gap: 4px;
    }
}

.p-top-info__item:last-child {
    border-bottom: none;
}

.p-top-info__icon {
    display: inline-flex;
    flex-shrink: 0;
    color: #636363;
}

.p-top-info__icon svg {
    width: var(--space-16);
    height: var(--space-16);
}

.p-top-info__date {
    flex-shrink: 0;
    font-size: var(--front-page-size-0875rem);
    color: #636363;
}

.p-top-info__bar {
    width: var(--front-page-size-1);
    height: var(--front-page-size-12em);
    min-height: var(--front-page-size-14);
    background: var(--color-border);
    flex-shrink: 0;
}

.p-top-info__title {
    flex: 1;
    min-width: 0;
    font-size: var(--front-page-size-1rem);
    font-weight: var(--front-page-font-weight-bold);
    color: var(--color-text);
}

.p-top-info__title:hover {
    color: var(--color-primary);
    text-decoration: none;
}

#front-top #front_widget {
    width: var(--front-page-size-500);
    position: relative;
    left: var(--front-page-percent-60);
}

#front-top article {
    display: inline-grid;
    width: var(--front-page-percent-49);
}

.home #contents article {
    display: inline-grid;
    width: var(--front-page-percent-33);
}

/* --------------------------------------------------------------------------
   Migrated from common.css: フロントページ レスポンシブ
   -------------------------------------------------------------------------- */
/* ==========================================================================
   9. Responsive (SP: max-width 767px)
   ========================================================================== */
@media screen and (max-width: 767px) {
    .l-main {
        gap: var(--space-40);
    }

    body.home .l-main {
        padding-bottom: var(--space-40);
    }

    /* 1. Concept（ポータル直後の場合、間隔を0にする） */
    .p-top-portal + .p-top-concept {
        margin-top: calc(-1 * var(--space-40) - 2px);
    }

    .p-top-concept {
        padding: 0;
    }

    .p-top-concept__inner {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-12);
    }

    .p-top-concept__left {
        order: 1;
        width: var(--front-page-percent-100);
    }

    .p-top-concept__right {
        order: 2;
        width: var(--front-page-percent-100);
    }

    .p-top-concept__desc {
        order: 3;
        font-size: 0.8125rem;
        text-align: justify;
    }

    .p-top-concept__logo {
        display: none;
    }

    .p-top-concept__lead {
        width: var(--front-page-percent-100);
        font-size: 1.125rem;
    }

    .p-top-concept__diagram {
        max-width: var(--front-page-percent-100);
    }

    .p-top-concept__diagram.u-sp-only {
        display: block;
    }

    .p-top-concept__diagram.u-pc-only {
        display: none;
    }

    /* 3. Recommended */
    .p-top-movies__grid {
        grid-template-columns: repeat(var(--front-page-grid-columns-1), 1fr); /* 1 column */
    }

    /* 0. Portal */
    .p-top-portal {
        min-height: auto;
        height: auto;
        aspect-ratio: 320 / 429;
        align-items: flex-start;
        padding-top: calc(100vw * 40 / 320);
    }

    /* SP配置（基準: 320×429） */
    /* rectangle1: size(774, 746.89), pos(-495, -227) */
    .p-top-portal__bg--rectangle1 {
        left: calc(-495 / 320 * 100%);
        top: calc(-227 / 429 * 100%);
        width: calc(774 / 320 * 100%);
        height: calc(746.89 / 429 * 100%);
    }

    /* rectangle2: size(479, 498.31), pos(-312, 180) */
    .p-top-portal__bg--rectangle2 {
        left: calc(-312 / 320 * 100%);
        top: calc(180 / 429 * 100%);
        width: calc(479 / 320 * 100%);
        height: calc(498.31 / 429 * 100%);
    }

    /* rectangle3: size(473, 535.35), pos(126, -79) */
    .p-top-portal__bg--rectangle3 {
        left: calc(126 / 320 * 100%);
        top: calc(-79 / 429 * 100%);
        width: calc(473 / 320 * 100%);
        height: calc(535.35 / 429 * 100%);
    }

    /* circle: size(140.29, 141), pos(-32, -28) */
    .p-top-portal__bg--circle {
        left: calc(-32 / 320 * 100%);
        top: calc(-28 / 429 * 100%);
        width: calc(140.29 / 320 * 100%);
        height: calc(141 / 429 * 100%);
    }

    /* square: size(95.05, 95.05), pos(201, -28) */
    .p-top-portal__bg--square {
        left: calc(201 / 320 * 100%);
        top: calc(-28 / 429 * 100%);
        width: calc(95.05 / 320 * 100%);
        height: calc(95.05 / 429 * 100%);
    }

    /* グラデーションオーバーレイ: size(320, 172), pos(0, 257) */
    .p-top-portal__bg--gradient-overlay {
        left: 0;
        top: calc(257 / 429 * 100%);
        width: 100%;
        height: calc(172 / 429 * 100%);
    }

    /* triangle: size(85.24, 73.1), pos(160, 153) */
    .p-top-portal__bg--triangle {
        left: calc(160 / 320 * 100%);
        top: calc(153 / 429 * 100%);
        width: calc(85.24 / 320 * 100%);
        height: calc(73.1 / 429 * 100%);
    }

    .p-top-portal__inner {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }

    .p-top-portal__content {
        gap: calc(100vw * 56 / 320);
        align-items: center;
    }

    .p-top-portal__headline {
        align-items: flex-start;
    }

    .p-top-portal__title {
        width: auto;
        font-size: calc(100vw * 36 / 320);
    }

    .p-top-portal__lead {
        font-size: 0.875rem;
    }

    /* PC用のCTAボタンとログインカードを非表示 */
    .p-top-portal__cta,
    .p-top-portal__card {
        display: none;
    }

    /* SP用ボタン群を表示 */
    .p-top-portal__sp-actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-12);
    }

    .p-top-portal__sp-btn {
        width: var(--front-page-size-200);
        padding-top: var(--space-8);
        padding-bottom: var(--space-8);
        text-align: center;
        font-size: 1rem;
        min-height: 45px;
    }

    /* お知らせ */
    .p-top-info__item {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: var(--space-8);
        row-gap: var(--space-8);
        align-items: center;
    }

    .p-top-info__icon {
        grid-column: 1;
        grid-row: 1;
    }

    .p-top-info__date {
        grid-column: 2;
        grid-row: 1;
    }

    .p-top-info__title {
        grid-column: 1 / -1;
        grid-row: 2;
        font-weight: var(--front-page-font-weight-medium);
    }

    .p-top-info__item:last-child {
        border-bottom: var(--front-page-size-1) solid var(--color-border);
    }

    .p-top-info__bar {
        display: none;
    }
}


/* --------------------------------------------------------------------------
   セクション1: ヒーローメンバー（ログイン済み）
   -------------------------------------------------------------------------- */
.p-hero-member {
    background-image: url('../../images/background/key_visual_pc.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: var(--space-48) 0;
}

.p-hero-member__slider {
    position: relative;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--space-48);
    display: grid;
    row-gap: var(--space-16);
}

.p-hero-member__track {
    position: relative;
    overflow: hidden;
}

.p-hero-member__slide {
    display: none;
}

.p-hero-member__slide.is-active {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.p-hero-member__slide-inner {
    display: flex;
    gap: var(--space-32);
    align-items: stretch;
}

.p-hero-member__thumb {
    flex: 1;
    min-width: 0;
    aspect-ratio: var(--front-page-aspect-ratio-video);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    background: var(--front-page-color-overlay-20);
}

.p-hero-member__thumb img {
    width: var(--front-page-percent-100);
    height: var(--front-page-percent-100);
    object-fit: cover;
    display: block;
}

.p-hero-member__thumb-placeholder {
    width: var(--front-page-percent-100);
    height: var(--front-page-percent-100);
    background: var(--color-gray-light);
}

.p-hero-member__info {
    flex: 0 0 var(--front-page-size-320);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-16);
    color: var(--color-white);
}

.p-hero-member__provider {
    display: inline-block;
    font-size: var(--font-size-small);
    padding: var(--space-4) var(--space-12);
    background: var(--front-page-color-white-20);
    border-radius: var(--border-radius-pill);
    align-self: flex-end;
}

.p-hero-member__title {
    font-size: var(--space-24);
    font-weight: var(--front-page-font-weight-bold);
    line-height: var(--front-page-line-height-14);
    color: var(--color-white);
}

.p-hero-member__excerpt {
    font-size: var(--font-size-sub);
    line-height: var(--front-page-line-height-16);
    color: var(--front-page-color-white-85);
    display: -webkit-box;
    -webkit-line-clamp: var(--front-page-line-clamp-3);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.p-hero-member__contributor {
    display: flex;
    align-items: center;
    gap: var(--space-12);
}

.p-hero-member__contributor-img {
    width: var(--space-48);
    height: var(--space-48);
    border-radius: var(--front-page-percent-50);
    object-fit: cover;
}

.p-hero-member__contributor-text {
    display: flex;
    flex-direction: column;
    gap: var(--front-page-size-2);
}

.p-hero-member__contributor-aff {
    font-size: var(--font-size-small);
    color: var(--front-page-color-white-70);
}

.p-hero-member__contributor-name {
    font-size: var(--font-size-sub);
    font-weight: var(--front-page-font-weight-medium);
}

.p-hero-member__btn {
    align-self: flex-start;
}

.p-hero-member__meta-sp {
    display: none;
}

.p-hero-member__type {
    display: inline-flex;
    align-items: center;
    gap: var(--front-page-size-6);
    color: var(--color-white);
    font-size: var(--font-size-sub);
}

.p-hero-member__type img {
    width: var(--space-16);
    height: var(--space-16);
}

/* 矢印ボタン */
.p-hero-member__arrow {
    position: absolute;
    top: var(--front-page-percent-50);
    transform: translateY(var(--front-page-percent-minus-50));
    width: var(--space-40);
    height: var(--space-40);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--front-page-color-white-20);
    border: none;
    border-radius: var(--front-page-percent-50);
    cursor: pointer;
    z-index: var(--front-page-z-index-2);
    transition: background var(--front-page-time-02);
}

.p-hero-member__arrow:hover {
    background: var(--front-page-color-white-40);
}

.p-hero-member__arrow--prev {
    left: var(--space-8);
}

.p-hero-member__arrow--next {
    right: var(--space-8);
}

/* ドットインジケーター */
.p-hero-member__dots {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
}

.p-hero-member__dot {
    width: var(--front-page-size-10);
    height: var(--front-page-size-10);
    border-radius: var(--front-page-percent-50);
    border: none;
    background: var(--front-page-color-white-40);
    cursor: pointer;
    padding: 0;
    transition: background var(--front-page-time-02);
}

.p-hero-member__dot.is-active {
    background: var(--color-white);
}

/* ヒーローメンバー SP */
@media screen and (max-width: 767px) {
    .p-hero-member {
        background-image: url('../../images/background/key_visual_sp.webp');
        padding: var(--space-24) 0 var(--space-32);
    }

    .p-hero-member__slider {
        padding: 0 var(--space-16);
    }

    .p-hero-member__slide-inner {
        flex-direction: column;
        gap: var(--space-16);
    }

    .p-hero-member__info {
        flex: none;
    }

    .p-hero-member__title {
        font-size: var(--space-20);
    }

    .p-hero-member__meta-sp {
        display: block;
    }

    .p-hero-member__arrow {
        display: none;
    }
}


/* --------------------------------------------------------------------------
   セクション1-B: おすすめコンテンツ スライダー（ログイン済み）
   -------------------------------------------------------------------------- */
.p-member-recommend {
    background-image: url('../../images/background/recommend_pc.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: var(--space-36) 0;
}

.p-member-recommend__slider {
    position: relative;
    width: calc(100% - (var(--gutter) * 2));
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.p-member-recommend__track {
    position: relative;
    width: 100%;
}

.p-member-recommend__slide {
    width: 100%;
    height: auto;
}

.p-member-recommend__slide-inner {
    display: flex;
    gap: var(--space-32);
    align-items: stretch;
}

.p-top-recommend__media {
    flex: 0 1 62%;
    align-self: flex-start;
    min-width: 0;
    border-radius: var(--space-8);
    overflow: hidden;
    background: var(--color-white);
}

.p-top-recommend__text .p-top-recommend__provider {
    margin: 0;
    font-size: 1em;
    color: var(--color-white);
}

.p-top-recommend__media .c-card-thumb--top-recommend {
    width: var(--front-page-percent-100);
}

.p-member-recommend__info {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-16);
    color: var(--color-white);
}

.p-member-recommend__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.p-member-recommend__title {
    margin: 0;
    font-size: var(--space-24);
    font-weight: var(--front-page-font-weight-bold);
    line-height: var(--front-page-line-height-14);
    color: var(--color-white);
}

.p-member-recommend__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.p-member-recommend__provider {
    margin: 0;
    font-size: var(--font-size-base);
    line-height: var(--front-page-line-height-18);
    color: var(--front-page-color-white-85);
}

.p-member-recommend__event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-16);
    font-size: var(--font-size-base);
}

.p-member-recommend__event-meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--font-size-base);
    line-height: var(--front-page-line-height-18);
    color: var(--front-page-color-white-85);
}

.p-member-recommend__event-meta-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}

.p-member-recommend__excerpt {
    font-size: var(--font-size-base);
    line-height: var(--front-page-line-height-18);
    color: var(--front-page-color-white-85);
}

.p-member-recommend__divider {
    height: 0;
    border-top: var(--front-page-size-1) solid var(--front-page-color-white-60);
}

.p-member-recommend__cta {
    align-self: center;
    font-size: var(--font-size-large);
}

/* ナビゲーション（矢印 + ドット） */
.p-member-recommend__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-16);
}

.p-member-recommend__slider.swiper-horizontal > .swiper-pagination-bullets,
.p-member-recommend__slider .swiper-pagination-bullets.swiper-pagination-horizontal,
.p-member-recommend__slider .swiper-pagination-custom,
.p-member-recommend__slider .swiper-pagination-fraction {
    position: static;
    inset: auto;
    width: auto;
    transform: none;
}

.p-member-recommend__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-40);
    height: var(--space-40);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.p-member-recommend__arrow:hover {
    opacity: var(--opacity-80);
}

.p-member-recommend__dots {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.p-member-recommend__dot {
    width: var(--front-page-size-10);
    height: var(--front-page-size-10);
    border-radius: var(--front-page-percent-50);
    border: none;
    background: var(--front-page-color-white-40);
    cursor: pointer;
    padding: 0;
    transition: background var(--front-page-time-02);
}

.p-member-recommend__dot.is-active {
    background: var(--color-white);
}

/* おすすめスライダー SP */
@media screen and (max-width: 767px) {
    .p-member-recommend {
        background-image: url('../../images/background/recommend_sp.webp');
        padding: var(--space-24) 0 var(--space-32);
    }

    .p-member-recommend__slider {
        width: calc(100% - (var(--gutter) * 2));
        padding: 0;
    }

    .p-member-recommend__slide-inner {
        flex-direction: column;
        gap: var(--space-16);
    }

    .p-member-recommend__slide-inner .p-top-recommend__media {
        flex: none;
        width: var(--front-page-percent-100);
    }

    .p-member-recommend__info {
        flex: none;
    }

    .p-member-recommend__title {
        display: none;
    }

    .p-member-recommend__provider,
    .p-member-recommend__event-meta,
    .p-member-recommend__event-meta-item,
    .p-member-recommend__excerpt {
        font-size: var(--font-size-base-sp);
    }

    .p-member-recommend__cta {
        align-self: center;
        font-size: var(--font-size-section-title);
    }

}


/* --------------------------------------------------------------------------
   セクション2: おすすめコンテンツ（ログイン済み）
   -------------------------------------------------------------------------- */
.p-recommend-member {
    padding: var(--space-48) 0;
    background: var(--color-bg);
}

.p-recommend-member .c-gi-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
}

.p-recommend-member__heading {
    font-size: var(--font-size-heading);
    font-weight: var(--front-page-font-weight-bold);
    text-align: center;
    color: var(--color-text);
}

.p-recommend-member__grid {
    display: grid;
    grid-template-columns: repeat(var(--front-page-grid-columns-4), 1fr);
    gap: var(--space-24);
}

.p-recommend-member__action {
    text-align: center;
}

@media screen and (max-width: 767px) {
    .p-recommend-member {
        padding: var(--space-32) 0;
    }

    .p-recommend-member .c-gi-container {
        gap: var(--space-24);
    }

    .p-recommend-member__heading {
        font-size: var(--font-size-heading-sp);
    }

    .p-recommend-member__action {
        padding-top: var(--space-8);
    }

    .p-recommend-member__grid {
        grid-template-columns: repeat(var(--front-page-grid-columns-1), 1fr);
        gap: var(--space-16);
    }
}


/* --------------------------------------------------------------------------
   セクション3: おすすめコンテンツ（未ログイン）
   -------------------------------------------------------------------------- */
.p-top-recommend {
    background-image: url('../../images/background/recommend_guest_pc.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: var(--front-page-size-80) 0;
}

.p-top-recommend .c-gi-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-48);
}

.p-top-recommend__heading {
    font-size: var(--font-size-heading);
    font-weight: var(--front-page-font-weight-bold);
    text-align: center;
    color: var(--color-white);
}

.p-top-recommend__row {
    display: flex;
    gap: var(--space-32);
    align-items: flex-start;
}

.p-top-recommend__row--reverse {
    flex-direction: row-reverse;
}

.p-top-recommend__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-16);
    font-size: 1.125rem;
    color: var(--color-white);
}

.p-top-recommend__summary {
    font-size: 1em;
    line-height: var(--front-page-line-height-18);
}

.p-top-recommend__structure {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-16) var(--space-20);
    border-radius: var(--border-radius-md);
    background: var(--front-page-color-structure-bg);
}

.p-top-recommend__structure-title {
    font-size: 1em;
    color: var(--color-white);
}

.p-top-recommend__structure-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: 0;
    list-style: none;
}

.p-top-recommend__structure-item {
    position: relative;
    padding-left: var(--space-16);
    font-size: 1em;
    line-height: var(--front-page-line-height-17);
    color: var(--front-page-color-white-92);
}

.p-top-recommend__structure-item::before {
    content: "";
    position: absolute;
    top: var(--front-page-size-072em);
    left: 0;
    width: var(--space-4);
    height: var(--space-4);
    border-radius: var(--front-page-percent-50);
    background: var(--color-primary);
}

.p-top-recommend__divider {
    height: 0;
    border-top: var(--front-page-size-1) solid var(--front-page-color-white-60);
}

.p-top-recommend__supervisor {
    font-size: 1em;
    color: var(--color-white);
}

.p-top-recommend__cta {
    align-self: flex-start;
    background: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
    box-shadow: none;
    font-size: 18px;
}

.p-top-recommend__cta:hover {
    background: transparent;
    color: var(--color-white);
    box-shadow: none;
}

@media screen and (min-width: 768px) {
    .p-top-recommend__cta {
        width: var(--front-page-size-200);
    }

    .p-top-recommend__summary,
    .p-top-recommend__structure,
    .p-top-recommend__supervisor {
        font-size: 16px;
    }
}

.p-top-recommend__thumb-link {
    display: block;
    text-decoration: none;
    line-height: 0;
}

.p-top-recommend__media-head {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.p-top-recommend__thumb-link:hover {
    text-decoration: none;
    opacity: var(--front-page-opacity-092);
}

.c-card-thumb--top-recommend .c-card-thumb__link:hover {
    opacity: var(--front-page-opacity-092);
}

.p-top-recommend__thumb,
.c-card-thumb--top-recommend .c-card-thumb__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--front-page-aspect-ratio-video);
    background: var(--front-page-color-thumb-placeholder);
    border-radius: 0;
}

.p-top-recommend__thumb img,
.c-card-thumb--top-recommend .c-card-thumb__image img,
.c-card-thumb--top-recommend .c-card-thumb__noimage {
    width: var(--front-page-percent-100);
    height: var(--front-page-percent-100);
    display: block;
}

body.home .l-main .p-top-recommend__thumb img,
body.home .l-main .c-card-thumb--top-recommend .c-card-thumb__image img {
    height: var(--front-page-percent-100);
}

.p-top-recommend__thumb img,
.c-card-thumb--top-recommend .c-card-thumb__image img {
    object-fit: cover;
}

.c-card-thumb--top-recommend .c-card-thumb__noimage {
    background: var(--front-page-color-thumb-placeholder);
}

.p-top-recommend__duration,
.c-card-thumb--top-recommend .c-card-thumb__duration {
    position: absolute;
    right: var(--space-12);
    bottom: var(--space-12);
    padding: var(--space-16) var(--space-16);
    font-size: var(--font-size-small);
    line-height: 0;
    color: var(--color-white);
    background: rgba(51, 51, 51, 0.8);
    border-radius: 4px;
}

.p-top-recommend__content-type-band,
.c-card-thumb--top-recommend .c-card-thumb__body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    padding: var(--space-8) 0;
    background: var(--color-white);
    font-size: var(--font-size-base);
    color: var(--color-primary);
}

.c-card-thumb--top-recommend .c-card-thumb__body {
    width: var(--front-page-percent-100);
}

.c-card-thumb--top-recommend .c-card-thumb__type {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    width: var(--front-page-percent-100);
    color: var(--color-primary);
    font-size: var(--font-size-base);
}

.c-card-thumb--top-recommend .c-card-thumb__type-icon {
    width: var(--front-page-size-23);
    height: var(--front-page-size-23);
    flex-shrink: 0;
}

.p-top-recommend__content-type-icon,
.c-card-thumb--top-recommend .c-card-thumb__type-icon {
    width: var(--front-page-size-23);
    height: var(--front-page-size-23);
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-image: var(--content-type-icon);
    mask-image: var(--content-type-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.p-top-recommend__content-type,
.c-card-thumb--top-recommend .c-card-thumb__type span {
    line-height: var(--front-page-line-height-12);
}

.p-top-recommend__join-wrap {
    text-align: center;
    margin-top: calc(var(--space-40) - var(--space-48));
}

.p-top-recommend__join {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--front-page-size-290);
    max-width: var(--front-page-percent-100);
    padding: var(--space-12) var(--front-page-size-28);
    border-radius: var(--border-radius-button);
    background: var(--color-white);
    color: var(--front-page-color-cta-text);
    font-size: 1rem;
    font-weight: var(--front-page-font-weight-bold);
    border-color: var(--color-white);
    box-shadow: 0 var(--space-12) var(--space-24) var(--front-page-color-cta-shadow);
    transition: transform var(--front-page-time-02), box-shadow var(--front-page-time-02), opacity var(--front-page-time-02);
    position: relative;
}

.p-top-recommend__join::after {
    content: "";
    position: absolute;
    top: var(--front-page-percent-50);
    right: var(--space-16);
    width: var(--front-page-size-14);
    height: var(--front-page-size-14);
    transform: translateY(var(--front-page-percent-minus-50));
    background-color: currentColor;
    -webkit-mask-image: url('../../images/icon/arrow_right.svg');
    mask-image: url('../../images/icon/arrow_right.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.p-top-recommend__join:hover {
    text-decoration: none;
    transform: translateY(var(--front-page-size-minus-2));
    box-shadow: 0 var(--front-page-size-14) var(--front-page-size-30) var(--front-page-color-cta-shadow-hover);
    opacity: var(--front-page-opacity-095);
    color: var(--front-page-color-cta-text);
}

@media screen and (max-width: 767px) {
    .p-top-recommend {
        background-image: url('../../images/background/recommend_guest_sp.webp');
        padding: var(--space-40) 0;
    }

    .p-top-recommend .c-gi-container {
        gap: var(--space-24);
    }

    .p-top-recommend__heading {
        font-size: var(--font-size-heading-sp);
    }

    .p-top-recommend__row,
    .p-top-recommend__row--reverse {
        flex-direction: column;
        gap: var(--space-16);
    }

    .p-top-recommend__row + .p-top-recommend__row {
        margin-top: var(--space-16);
    }

    .p-top-recommend__media {
        flex: 1 1 auto;
        order: -1;
        width: 100%;
    }

    .p-top-recommend__text {
        font-size: 13px;
    }

    .p-top-recommend__cta {
        align-self: center;
        font-size: 16px;
    }

    .p-top-recommend__join-wrap {
        margin-top: calc(var(--space-40) - var(--space-24));
    }

    .p-top-recommend__join {
        width: var(--front-page-size-200);
    }
}


/* --------------------------------------------------------------------------
   セクション5: 特集バナー（共通）
   -------------------------------------------------------------------------- */
.p-feature-banner {
    display: flex;
    align-items: stretch;
    gap: var(--space-32);
    background: var(--color-primary);
    border-radius: var(--border-radius-lg);
    padding: var(--space-32) var(--space-40);
    color: var(--color-white);
}

.p-feature-banner__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.p-feature-banner__title {
    font-size: 2.5rem;
    font-weight: var(--front-page-font-weight-bold);
    color: var(--color-white);
}

.p-feature-banner__desc {
    font-size: 1.5rem;
    line-height: var(--front-page-line-height-16);
    color: var(--front-page-color-white-90);
}

.p-feature-banner__actions {
    display: flex;
    gap: var(--space-12);
    flex-wrap: wrap;
    margin-top: auto;
    font-size: 20px;
}

.p-feature-banner__actions .c-gi-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    font-size: 20px;
    box-shadow: none;
    white-space: nowrap;
}

/* PC時: [br_pc]は改行、[br_sp]は非表示 */
.p-feature-banner__actions .c-gi-btn .u-br-sp {
    display: none;
}

.p-feature-banner__actions .c-gi-btn:hover {
    box-shadow: none;
}

.p-feature-banner__image {
    flex: 0 0 40%;
    max-width: 40%;
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

.p-feature-banner__image img {
    width: var(--front-page-percent-100);
    height: auto;
    display: block;
    border-radius: var(--border-radius-md);
}

@media screen and (max-width: 767px) {
    .p-top-feature .p-top-section__inner {
        gap: var(--space-16);
    }

    .p-feature-banner {
        flex-direction: column;
        padding: var(--space-16) 0;
        gap: var(--space-16);
        margin: 0;
    }

    .p-feature-banner__image {
        flex: 0 0 100%;
        width: var(--front-page-percent-100);
        max-width: var(--front-page-percent-100);
        order: -1;
    }

    .p-feature-banner__title {
        font-size: 16px;
    }

    .p-feature-banner__desc {
        font-size: 13px;
    }

    .p-feature-banner__actions {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: var(--space-16);
        margin-top: 0;
    }

    .p-feature-banner__actions .c-gi-btn {
        flex: 0 0 calc((var(--front-page-percent-100) - var(--space-16)) / 2);
        width: calc((var(--front-page-percent-100) - var(--space-16)) / 2);
        max-inline-size: none;
        --c-gi-btn-icon-size: 1em;
        --c-gi-btn-icon-offset: var(--space-6);
        padding: 8px;
        font-size: 13px;
        text-align: center;
        white-space: normal;
        overflow-wrap: normal;
        line-height: var(--front-page-line-height-14);
    }

    /* スマホ時: [br_sp]は改行、[br_pc]は非表示 */
    .p-feature-banner__actions .c-gi-btn .u-br-sp {
        display: inline;
    }

    .p-feature-banner__actions .c-gi-btn .u-br-pc {
        display: none;
    }
}


/* --------------------------------------------------------------------------
   共通セクション見出し・フッター
   -------------------------------------------------------------------------- */
body.home .l-main .p-top-section-heading {
    font-size: var(--font-size-heading);
    font-weight: var(--front-page-font-weight-bold);
    text-align: center;
    color: var(--color-text);
}

.p-top-recommend-for-you__heading-sp {
    display: none;
}

.p-top-section-footer {
    text-align: center;
}

.p-top-section-footer .c-gi-btn--primary-outline,
.p-recommend-member__action .c-gi-btn--primary-outline {
    box-shadow: none;
}

@media screen and (min-width: 768px) {
    .p-top-section-footer .c-gi-btn--primary-outline {
        width: 250px;
    }
}

/* --------------------------------------------------------------------------
   会員トップ セクション2: あなたにおすすめのコンテンツ
   -------------------------------------------------------------------------- */
.p-top-recommend-for-you {
    background: var(--color-bg);
}

.p-top-recommend-for-you__grid {
    grid-template-columns: repeat(var(--front-page-grid-columns-3), 1fr);
    gap: var(--space-24);
}

.p-top-section__content .p-top-recommend__media--section-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    border-radius: var(--space-12);
    overflow: visible;
    background: var(--color-white);
}

.p-top-section__content .p-top-recommend__media--section-content .p-top-recommend__media-head--section-content {
    border-radius: var(--space-12);
    overflow: hidden;
    box-shadow: 0 var(--space-4) var(--space-16) var(--front-page-color-shadow-medium);
}

.p-top-section__content .p-top-recommend__media--section-content .p-top-recommend__thumb {
    border-radius: 0;
}

.p-top-section__content .p-top-recommend__media--section-content .p-top-recommend__tag-list {
    padding: 0;
}

.p-top-section__content .p-top-recommend__media--section-content .p-top-recommend__provider {
    margin: 0;
    font-size: var(--font-size-small);
    color: var(--color-gray-dark);
}

@media screen and (max-width: 767px) {
    body.home .l-main .p-top-section-heading {
        font-size: var(--font-size-heading-sp);
    }

    .p-recommend-member__heading,
    .p-top-recommend__heading,
    body.home .l-main .p-top-section-heading {
        font-weight: var(--front-page-font-weight-medium);
    }

    .p-top-recommend-for-you__heading-pc {
        display: none;
    }

    .p-top-recommend-for-you__heading-sp {
        display: inline;
    }

    .p-top-recommend-for-you__grid {
        grid-template-columns: repeat(var(--front-page-grid-columns-1), 1fr);
        gap: var(--space-16);
    }

    /* SP: 3件に制限 */
    .p-top-recommend-for-you__grid > :nth-child(n+4) {
        display: none;
    }
}


/* --------------------------------------------------------------------------
   セクション4-8 親ラッパー
   -------------------------------------------------------------------------- */
.p-top-content-sections {
    display: flex;
    flex-direction: column;
    padding-top: 32px;
    padding-bottom: 52px;
    gap: 80px;
}

/* --------------------------------------------------------------------------
   セクション4-6: 新着動画 / 特集 / 新着テキストコンテンツ（共通）
   -------------------------------------------------------------------------- */
.p-top-videos,
.p-top-feature,
.p-top-articles {
    background: var(--color-bg);
}

.p-top-section__inner {
    display: flex;
    flex-direction: column;
}

.p-top-section__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
}

.p-top-feature .p-top-section__inner {
    gap: 0;
}

.p-top-videos__grid {
    display: grid;
    grid-template-columns: repeat(var(--front-page-grid-columns-3), 1fr);
    gap: var(--space-24);
}

@media screen and (max-width: 767px) {
    .p-top-videos__grid {
        grid-template-columns: repeat(var(--front-page-grid-columns-1), 1fr);
        gap: var(--space-20);
    }

    /* SP: 動画3件に制限 */
    .p-top-videos__list > :nth-child(n+4) {
        display: none;
    }
}


/* --------------------------------------------------------------------------
   セクション6: 新着テキストコンテンツ（共通）
   -------------------------------------------------------------------------- */
.p-top-articles__grid {
    display: grid;
    grid-template-columns: repeat(var(--front-page-grid-columns-4), 1fr);
    gap: var(--space-24);
}

@media screen and (max-width: 767px) {
    .p-top-articles__grid {
        grid-template-columns: repeat(var(--front-page-grid-columns-1), 1fr);
        gap: var(--space-20);
    }

    /* SP: 記事3件に制限 */
    .p-top-articles__list > :nth-child(n+4) {
        display: none;
    }
}


/* --------------------------------------------------------------------------
   セクション7: 新着イベント・ウェビナー（共通）
   -------------------------------------------------------------------------- */
.p-top-events {
    background: var(--color-white);
}

.p-top-events .c-gi-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
    min-width: 0;
}

.p-top-events__slider {
    width: 100%;
    min-width: 0;
}

@media screen and (max-width: 767px) {
    .p-top-events .c-gi-container {
        gap: 16px;
    }

    .p-top-events__card {
        gap: var(--space-4);
    }

    .p-top-events__meta-item {
        line-height: 1.35;
    }

    .p-top-events__slider {
        margin-left: calc(-1 * var(--gutter));
        margin-right: calc(-1 * var(--gutter));
        width: calc(100% + var(--gutter) * 2);
    }
}

.p-top-events__slider.is-slider-ready {
    display: block;
    overflow: hidden;
}

.p-top-events__slider.is-slider-ready > .p-top-events__list {
    display: flex;
    gap: 0;
}

.p-top-events__slider.is-slider-ready > .p-top-events__list.swiper-wrapper {
    height: auto;
}

.p-top-events__slider.is-slider-ready > .p-top-events__list > .p-top-events__card {
    height: auto;
    min-width: 0;
    width: 69.28vw; /* SP: 221.7 / 320 */
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
    z-index: 1;
}

@media screen and (min-width: 1024px) {
    .p-top-events__slider.is-slider-ready > .p-top-events__list > .p-top-events__card {
        width: 50.194%; /* PC: 622.41 / 1240 */
    }
}

.p-top-events__slider.is-slider-ready > .p-top-events__list > .p-top-events__card.swiper-slide-prev {
    transform: scale(0.5);
    transform-origin: right center;
    opacity: 0.72;
}

.p-top-events__slider.is-slider-ready > .p-top-events__list > .p-top-events__card.swiper-slide-next {
    transform: scale(0.5);
    transform-origin: left center;
    opacity: 0.72;
}

.p-top-events__slider.is-slider-ready > .p-top-events__list > .p-top-events__card.swiper-slide-active {
    transform: scale(1);
    opacity: 1;
    z-index: 2;
}


/* --------------------------------------------------------------------------
   セクション8: お知らせ（共通）
   -------------------------------------------------------------------------- */
.p-top-info {
    background: var(--color-bg);
}

.p-top-info__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-48);
}

.p-top-info__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
}

.p-top-info__divider {
    border: none;
    border-top: var(--front-page-size-1) solid var(--color-border);
    margin: 0;
}

.p-top-info__content > .p-top-info__list {
    width: 80%;
    max-width: none;
    margin: 0 auto;
}

.p-top-info__content > .p-top-info__list > .p-top-info__list {
    width: 100%;
    max-width: none;
    margin: 0;
}

@media screen and (max-width: 767px) {
    .p-top-content-sections {
        padding-top: 0;
        padding-bottom: 0;
        gap: var(--space-40);
    }

    .p-top-feature {
        background: var(--color-primary);
    }

    .p-top-section-footer .c-gi-btn--primary-outline {
        font-size: 16px;
    }

    .p-footer__main {
        font-size: 12px;
    }

    .p-footer__main .p-footer__list a,
    .p-footer__main .p-footer__desc {
        font-size: 12px;
    }

    .p-footer__copyright {
        display: block !important;
    }

    .p-top-info__inner {
        gap: var(--space-32);
    }

    .p-top-info__divider + .p-top-info__content {
        margin-top: calc(var(--space-16) - var(--space-32));
    }

    .p-top-info__content {
        gap: var(--space-16);
    }

    .p-top-info__content > .p-top-info__list {
        width: 100%;
    }

    .p-top-section__content {
        gap: 16px;
    }
}