@charset "UTF-8";

/*---------------------------------

base

---------------------------------*/

:root {
    --layout-width-inner: 1250px;
    --layout-width-inner-sm: 1050px;
    --color-primary: #DC0821;
    --color-black: #231815;
    --color-white: #FFF;
    --font-base: "Noto Sans JP", "Helvetica Neue", "Arial", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    --font-en: "Inter", sans-serif;
    --stroke-1: -1px -1px 0 var(--color-primary), -1px 0 0 var(--color-primary), -1px 1px 0 var(--color-primary), 0 -1px 0 var(--color-primary), 0 0 0 var(--color-primary), 0 1px 0 var(--color-primary), 1px -1px 0 var(--color-primary), 1px 0 0 var(--color-primary), 1px 1px 0 var(--color-primary);
}
html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td, small, button, time, figure {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: inherit;
    vertical-align: baseline;
}
header, footer, nav, section, article, aside, figure, figcaption, main {
    display: block;
}
body {
    color: var(--color-black);
    font-family: var(--font-base);
    font-weight: 400;
    overflow-wrap: break-word;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}
li, dd {
    list-style-type: none;
}
img {
    max-width: 100%;
    height: auto;
    border-style: none;
    vertical-align: bottom;
}
.text-uppercase {
    text-transform: uppercase;
}
@media (hover: hover) and (pointer: fine) {

    a[href^="tel:"] {
        pointer-events: none;
    }

}
@media (max-width: 767px) {

    .only-pc {
        display: none !important;
    }

}
@media (min-width: 768px) {

    .only-sp {
        display: none !important;
    }

}


/*---------------------------------

layout

---------------------------------*/

.wrapper {
    display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.main {
    flex: 1;
}
.inner {
    width: 100%;
    max-width: var(--layout-width-inner);
	margin-inline: auto;
    padding-inline: 25px;
}
.inner.inner--sm {
    max-width: var(--layout-width-inner-sm);
}
.contents {
    margin-block-start: 2.5rem;
}
@media (max-width: 767px) {

    .inner {
        padding-inline: 20px;
    }
    .contents {
        margin-block-start: 1.875rem;
    }

}


/*---------------------------------

スプラッシュページ

---------------------------------*/

.splash {
    position: fixed;
    inset: 0;
    z-index: 100;
    background-color: #000;
    transition: background-color 0.5s;
}
.splash:has(.splash__bg.is-hide) {
    background-color: transparent;
}
.splash.is-hide {
    opacity: 0;
    visibility: hidden;
}
.splash__bg {
    position: absolute;
    inset: 0;
    opacity: 0;
    overflow: hidden;
    transition: opacity 1s;
}
.splash__bg.is-show {
    opacity: 1;
}
.splash__bg.is-hide {
    transition: opacity 0.5s;
}
.splash__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale 1s;
}
.splash__bg.is-show img {
    scale: 1.1;
}
.splash__logo-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}
.splash__logo {
    position: relative;
    z-index: 1;
    opacity: 0;
    width: 360px;
    transition: opacity 0.5s;
}
.splash__logo.is-show {
    opacity: 1;
}
.splash__logo.is-hide {
    transition: opacity 0.2s;
}
.splash__flame01,
.splash__flame02 {
    position: absolute;
    opacity: 0;
    transition: opacity 0.2s;
}
.splash__flame01 {
    top: 48px;
    left: 121px;
    z-index: 3;
    width: 15px;
}
.splash__flame02 {
    top: 47px;
    left: 120px;
    z-index: 4;
    translate: 5%;
    width: 16px;
}
.splash__flame01.is-show,
.splash__flame02.is-show {
    opacity: 1;
}
.splash__flame01.is-hide,
.splash__flame02.is-hide {
    transition: opacity 0.5s;
}
.splash__flame-bg {
    position: absolute;
    top: 19px;
    left: 107px;
    z-index: 2;
    width: 42px;
    opacity: 0;
    filter: blur(7px);
    transition: opacity 0.2s;
}
.splash__flame-bg.is-show {
    opacity: 1;
}
.splash__flame-bg.is-hide {
    transition: opacity 0.5s;
}
.splash__text {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 480px;
}
.splash__text img {
    opacity: 0;
    transition: opacity 0.1s;
}
.splash__text.is-show img {
    opacity: 1;
}
.splash__text.is-hide img {
    transition: opacity 1s;
}
.splash__text img:nth-child(1) {
    width: 160px;
}
.splash__text img:nth-child(2) {
    width: 180px;
    margin-block-start: 10px;
    transition-delay: 0.1s;
}
.splash__text img:nth-child(3) {
    transition-delay: 0.2s;
}
.splash__text.is-hide img:nth-child(2),
.splash__text.is-hide img:nth-child(3) {
    transition-delay: 0s;
}
@media (max-width: 1000px) {

    .splash__logo {
        width: 300px;
    }
    .splash__flame01 {
        top: 40px;
        left: 102px;
        translate: -4%;
        width: 12px;
    }
    .splash__flame02 {
        top: 39px;
        left: 101px;
        translate: 0;
        width: 13px;
    }
    .splash__flame-bg {
        top: 16px;
        left: 89px;
        width: 35px;
        filter: blur(6px);
    }
    .splash__text {
        gap: 16px;
        width: 400px;
    }
    .splash__text img:nth-child(1) {
        width: 134px;
    }
    .splash__text img:nth-child(2) {
        width: 140px;
    }

}
@media (max-width: 767px) {

    .splash__logo {
        width: 190px;
    }
    .splash__flame01 {
        top: 26px;
        left: 64px;
        translate: 2% -4%;
        width: 8px;
    }
    .splash__flame02 {
        top: 25px;
        left: 63px;
        translate: 4% -8%;
        width: 9px;
    }
    .splash__flame-bg {
        top: 9px;
        left: 56px;
        width: 23px;
        filter: blur(4px);
    }
    .splash__text {
        gap: 12px;
        width: 240px;
    }
    .splash__text img:nth-child(1) {
        width: 80px;
    }
    .splash__text img:nth-child(2) {
        width: 90px;
        margin-block-start: 5px;
    }

}


/*---------------------------------

header

---------------------------------*/

.header__inner {
    display: flex;
    align-items: center;
    height: 5rem;
    padding-inline: 40px;
}
.header__logo a {
    display: inline-block;
    transition: opacity 0.3s;
}
.header__logo a:focus-visible {
    opacity: 0.7;
}
.header__items {
    display: flex;
    align-items: center;
    column-gap: 20px;
    margin-inline-start: 40px;
}
.header__item {
    display: grid;
}
.header__logo02 {
    margin-inline-start: auto;
}
@media (hover: hover) and (pointer: fine) {

    .header__logo a:hover {
        opacity: 0.7;
    }

}
@media (max-width: 1000px) {

    .header__items {
        display: none;
    }

}
@media (max-width: 767px) {

    .header__inner {
        height: 3.75rem;
        padding-inline: 20px;
    }
    .header__logo {
        width: 220px;
    }
    .header__logo02 {
        width: 92px;
    }

}


/*---------------------------------

footer

---------------------------------*/

.footer {
    background-color: var(--color-black);
}
.footer__items {
    display: none;
}
.footer__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 10.625rem;
}
.footer__logo a {
    display: inline-flex;
    column-gap: 16px;
    transition: opacity 0.3s;
}
.footer__logo a img:last-child {
    display: inline-block;
    margin-block-start: 10px;
}
.footer__logo a:focus-visible {
    opacity: 0.7;
}
.footer__copy small {
    color: var(--color-white);
    font-family: var(--font-en);
    font-size: 0.75rem;
}
@media (hover: hover) and (pointer: fine) {

    .footer__logo a:hover {
        opacity: 0.7;
    }

}
@media (max-width: 1000px) {

    .footer {
        padding-block: 2.5rem;
    }
    .footer__items {
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: 20px;
        color: var(--color-white);
    }
    .footer__item {
        display: grid;
    }
    .footer__inner {
        display: block;
        height: auto;
        margin-block-start: 2.5rem;
        text-align: center;
    }
    .footer__copy {
        margin-block-start: 3.75rem;
    }

}
@media (max-width: 767px) {

    .footer__logo a {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .footer__logo a img:first-child {
        width: 280px;
    }

}


/*---------------------------------

component

---------------------------------*/

.arrow-link {
    display: inline-grid;
    grid-template-columns: auto 1fr;
    column-gap: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: color 0.3s;
}
.arrow-link::before {
    display: inline-block;
    width: 0.75rem;
    aspect-ratio: 1 / 1;
    translate: 0 0.125rem;
    background-image: url(../images/icon_arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    content: "";
}
.arrow-link:focus-visible {
    color: var(--color-primary);
}
@media (hover: hover) and (pointer: fine) {

    .arrow-link:hover {
        color: var(--color-primary);
    }

}
.external-link {
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.3s;
}
.external-link::after {
    display: inline-block;
    width: 0.75rem;
    aspect-ratio: 1 / 1;
    translate: 0 0.0625rem;
    background-image: url(../images/icon_external-link.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    content: "";
}
.external-link span {
    margin-inline-end: 6px;
}
.external-link:focus-visible {
    color: var(--color-primary);
}
@media (hover: hover) and (pointer: fine) {

    .external-link:hover {
        color: var(--color-primary);
    }

}
.category {
    display: inline-grid;
    place-items: center;
    padding: 0.09em 1.47em;
    border: 1px solid var(--color-primary);
    border-radius: 9999px;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.6;
}
.category.category--reverse {
    background-color: var(--color-white);
    color: var(--color-primary);
}
.title {
    font-size: 2rem;
    line-height: 1.4;
}
.title span {
    color: var(--color-primary);
}
.heading {
    display: flex;
    flex-direction: column-reverse;
    text-align: center;
}
.heading__ja {
    margin-block-start: 0.5rem;
    font-size: 1rem;
    line-height: 1.6;
}
.heading__en {
    color: var(--color-primary);
    font-family: var(--font-en);
    font-size: 2.875rem;
    font-weight: 700;
    line-height: 1.3;
}
.button {
    display: inline-grid;
    place-items: center;
    position: relative;
    min-width: 16.25rem;
    min-height: 3.125rem;
    padding: 0.5em 3em;
    background-color: var(--color-black);
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.06em;
    text-align: center;
    transition: opacity 0.3s;
}
.button::after {
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 15px;
    translate: 0 -50%;
    width: 1.25rem;
    aspect-ratio: 1 / 1;
    background-image: url(../images/icon_arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    content: "";
}
.button:focus-visible {
    opacity: 0.7;
}
@media (hover: hover) and (pointer: fine) {

    .button:hover {
        opacity: 0.7;
    }

}
.page-top {
    display: block;
    position: sticky;
    bottom: 0;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    width: 3.125rem;
    margin-inline-start: auto;
    transition: opacity 0.3s, visibility 0.3s ease-out;
}
.page-top.is-active {
    opacity: 1;
    visibility: visible;
}
.page-top:focus-visible {
    opacity: 0.7;
}
@media (hover: hover) and (pointer: fine) {

    .page-top:hover {
        opacity: 0.7;
    }

}
.movie {
    aspect-ratio: 1000 / 560;
}
.movie iframe {
    width: 100%;
    height: 100%;
}
.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 12px;
}
.card {
    max-width: 392px;
}
.card.card--banner {
    max-width: 372px;
}
.card__link {
    display: block;
    position: relative;
    transition: opacity 0.3s;
}
.card__link:focus-visible {
    opacity: 0.7;
}
@media (hover: hover) and (pointer: fine) {

    .card__link:hover {
        opacity: 0.7;
    }

}
.card__thumbnail {
    position: relative;
    padding-inline-start: 20px;
}
.card__thumbnail img {
    aspect-ratio: 372 / 260;
    object-fit: cover;
    clip-path: polygon(40px 0%, 100% 0%, calc(100% - 40px) 100%, 0% 100%);
}
.card.card--shadow .card__thumbnail {
    filter: drop-shadow(0 0 8px rgb(0 0 0 / 0.1));
}
.card.card--banner .card__thumbnail {
    padding-inline-start: 0;
}
.card__title {
    position: absolute;
    bottom: 20px;
    left: 0;
    z-index: 1;
}
.card__title > span {
    display: inline;
	-webkit-box-decoration-break: clone;
            box-decoration-break: clone;
	padding: 4px 20px;
    background-color: var(--color-black);
    color: var(--color-white);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 2.05;
}
.card__title > span:first-child {
    background-color: var(--color-primary);
}
.card__body {
    margin-block-start: 1.25rem;
    padding-inline-start: 20px;
}
.card__text {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
}
.card__text:not(:first-child) {
    margin-block-start: 0.625rem;
}
.card__name {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 6px;
    font-size: 1.125rem;
    font-weight: 700;
}
.card__number {
    display: inline-block;
    margin-block-start: 0.25rem;
    color: var(--color-primary);
    font-family: var(--font-en);
    font-size: 0.75rem;
    font-weight: 500;
}
.card__kana {
    font-size: 0.75rem;
}
.card__category {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-block-start: 1rem;
}
.button-wrap {
    margin-block-start: 3.75rem;
    text-align: center;
}
@media (max-width: 1000px) {

    .heading__ja {
        margin-block-start: 0;
    }
    .heading__en {
        line-height: 1.2;
    }
    .cards {
        grid-template-columns: repeat(2, 1fr);
    }

}
@media (max-width: 767px) {

    .cards {
        grid-template-columns: 1fr;
    }
    .card,
    .card.card--banner {
        max-width: 100%;
    }
    .card__thumbnail {
        margin-inline-end: -26px;
        padding-inline-start: 10px;
    }
    .card.card--banner .card__thumbnail {
        padding-inline-start: 10px;
    }
    .card__title {
        max-width: calc(100% - 45px);
    }
    .card__text:not(:first-child) {
        margin-block-start: 0.75rem;
    }
    .card__text + .card__category {
        margin-block-start: 1.25rem;
    }

}


/*---------------------------------

スライダー

---------------------------------*/

.card-slider .splide__track {
    padding-block-start: 3.75rem;
    margin-inline-end: calc(50% - 50vw);
}
.splide__pagination {
    gap: 4px;
    top: 0.9375rem;
    right: 6.875rem;
    bottom: unset;
    left: unset;
    translate: 0 -50%;
    padding: 0;
}
.splide:not(.is-overflow) .splide__pagination {
    display: flex;
}
.splide__pagination li {
    display: grid;
}
.splide__pagination__page {
    opacity: 1;
    width: 1.25rem;
    height: 0.25rem;
    margin: 0;
    border-radius: 9999px;
    background-color: rgb(220 8 33 / 0.1);
    transition: width 0.3s;
}
.splide__pagination__page.is-active {
    transform: unset;
    width: 3.125rem;
    background-color: var(--color-primary);
}
.splide__arrows {
    display: flex;
    gap: 10px;
    position: absolute;
    top: 0;
}
.splide__arrow {
    display: block;
    position: static;
    opacity: 1;
    transform: unset;
    width: 1.875rem;
    height: 1.875rem;
    min-width: unset;
    min-height: unset;
    padding: 0;
    border-radius: 0;
    background-color: unset;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: opacity 0.3s;
}
.splide__arrow.splide__arrow--prev {
    background-image: url(../images/icon_pagination-arrow-left.svg);
}
.splide__arrow.splide__arrow--next {
    background-image: url(../images/icon_pagination-arrow-right.svg);
}
.splide__arrow::after {
    content: none;
}
.splide__arrow:not(:disabled):focus-visible {
    opacity: 0.7;
}
@media (hover: hover) and (pointer: fine) {

    .splide__arrow:disabled:hover {
        opacity: 0.3;
    }
    .splide__arrow:not(:disabled):hover {
        opacity: 0.7;
    }

}
@media (max-width: 767px) {

    .card-slider .splide__track {
        padding-block: 0 4.375rem;
    }
    .splide__arrows {
        justify-content: space-between;
        top: unset;
        bottom: 0;
        left: 50% !important;
        translate: calc(-50% - 13px);
        width: 16.375rem;
    }
    .splide__pagination {
        top: unset;
        right: 50%;
        bottom: 0.9375rem;
        translate: 50% 50%;
    }

}


/*---------------------------------

メインビジュアル

---------------------------------*/

.mv {
    position: relative;
    padding-block-start: 2.5rem;
}
.mv::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 5.3125rem);
    background-image: url(../images/mv_bg_pc.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    content: "";
}
.mv-card__link {
    display: block;
    pointer-events: none;
}
.splide__slide.is-visible .mv-card__link {
    pointer-events: auto;
}
.mv-card__thumbnail {
    position: relative;
    aspect-ratio: 900 / 540;
}
.mv-card__thumbnail::before {
    position: absolute;
    inset: 0;
    clip-path: polygon(60px 0%, 100% 0%, calc(100% - 60px) 100%, 0% 100%);
    background-color: var(--color-white);
    content: "";
}
.mv-card__thumbnail::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    clip-path: polygon(60px 0%, 100% 0%, calc(100% - 60px) 100%, 0% 100%);
    background-color: rgb(0 0 0 / 0.7);
    transition: opacity 0.3s, visibility 0.3s ease-out;
    content: "";
}
.splide__slide.is-visible .mv-card__thumbnail::after {
    opacity: 0;
    visibility: hidden;
}
.mv-card__thumbnail img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: polygon(60px 0%, 100% 0%, calc(100% - 60px) 100%, 0% 100%);
    transition: opacity 0.3s;
}
.mv-card.mv-card--shadow .mv-card__thumbnail {
    filter: drop-shadow(0 0 8px rgb(0 0 0 / 0.1));
}
.mv-card__title {
    position: absolute;
    bottom: 80px;
    left: -60px;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s;
}
.splide__slide.is-visible .mv-card__title {
    opacity: 1;
}
.mv-card__title > span {
    display: inline;
	-webkit-box-decoration-break: clone;
            box-decoration-break: clone;
	padding: 4px 20px;
    background-color: var(--color-black);
    color: var(--color-white);
    font-size: 2.125rem;
    font-weight: 800;
    line-height: 1.9;
}
.mv-card__title > span:first-child {
    background-color: var(--color-primary);
}
.mv-card__body {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    opacity: 0;
    margin-block-start: 1.25rem;
    transition: opacity 0.3s;
}
.splide__slide.is-visible .mv-card__body {
    opacity: 1;
}
.mv-card__name {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 6px;
    font-size: 1.375rem;
    font-weight: 700;
}
.mv-card__number {
    display: inline-block;
    margin-block-start: 0.375rem;
    color: var(--color-primary);
    font-family: var(--font-en);
    font-size: 0.75rem;
    font-weight: 500;
}
.mv-card__kana {
    font-size: 0.75rem;
}
.mv-card__category {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    gap: 6px;
    margin-inline-start: 30px;
}
.mv-card__text {
    max-width: 50%;
    overflow: hidden;
    font-size: 1.25rem;
    font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mv .splide__slide {
    margin-inline-end: -20px;
}
.mv .splide__slide.is-visible {
    z-index: 2;
}
.mv .splide__arrows {
    top: unset;
    bottom: 0;
    left: 13vw;
}
.mv .splide__pagination {
    top: unset;
    right: unset;
    bottom: 0.9375rem;
    left: 20.7vw;
    translate: 0 50%;
}
.mv-card__link:focus-visible .mv-card__thumbnail img,
.mv-card__link:focus-visible .mv-card__title,
.mv-card__link:focus-visible .mv-card__body {
    opacity: 0.7;
}
@media (hover: hover) and (pointer: fine) {

    .mv-card__link:hover .mv-card__thumbnail img,
    .mv-card__link:hover .mv-card__title,
    .mv-card__link:hover .mv-card__body {
        opacity: 0.7;
    }

}
@media (max-width: 1300px) {

    .mv-card__text {
        max-width: 45%;
    }

}
@media (max-width: 1200px) {

    .mv-card__title {
        bottom: 60px;
    }
    .mv .splide__arrows {
        left: 8vw;
    }
    .mv .splide__pagination {
        left: 18vw;
    }

}
@media (max-width: 1100px) {

    .mv-card__text {
        max-width: 40%;
    }

}
@media (max-width: 1000px) {

    .mv::before {
        height: calc(100% - 9.0625rem);
    }
    .mv-card__title {
        bottom: 40px;
        left: -40px;
    }
    .mv-card__title > span {
        font-size: 1.875rem;
    }
    .mv-card__text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        max-width: unset;
        line-height: 1.4;
        white-space: unset;
    }
    .mv .splide__track {
        padding-block-end: 3.75rem;
    }
    .mv .splide__pagination {
        left: 50%;
        translate: -50% 50%;
    }
    .mv .splide__arrows {
        left: 50%;
        translate: -50%;
        gap: 190px;
    }

}
@media (max-width: 767px) {

    .mv {
        padding-block-start: 1.25rem;
    }
    .mv::before {
        height: calc(100% - 11.0625rem);
        background-image: url(../images/mv_bg_sp.png);
    }
    .mv-card {
        padding-inline-start: 20px;
    }
    .mv-card__thumbnail {
        aspect-ratio: 382 / 260;
        margin-inline-end: -26px;
        padding-inline-start: 10px;
    }
    .mv-card__thumbnail::before {
        left: 10px;
        clip-path: polygon(40px 0%, 100% 0%, calc(100% - 40px) 100%, 0% 100%);
    }
    .mv-card__thumbnail::after {
        left: 10px;
        clip-path: polygon(40px 0%, 100% 0%, calc(100% - 40px) 100%, 0% 100%);
    }
    .mv-card__thumbnail img {
        clip-path: polygon(40px 0%, 100% 0%, calc(100% - 40px) 100%, 0% 100%);
    }
    .mv-card__title {
        bottom: 34px;
        left: 0;
    }
    .mv-card__title > span {
        font-size: 1.25rem;
        line-height: 2.2;
    }
    .mv-card__body {
        display: block;
        padding-inline-end: 20px;
        margin-block-start: 1.5rem;
    }
    .mv-card__category {
        margin-block-start: 0.875rem;
        margin-inline-start: 0;
    }
    .mv .splide__track {
        padding-block-end: 4.375rem;
    }

}


/*---------------------------------

素顔の選手｢REDSげんき｣

---------------------------------*/

.reds-genki {
    overflow-x: hidden;
    padding-block: 5.625rem 3.75rem;
}
.reds-genki .title {
    position: relative;
    z-index: 1;
    width: fit-content;
}
.reds-genki .contents {
    margin-block-start: -1.5rem;
}
@media (max-width: 767px) {

    .reds-genki {
        padding-block: 3.75rem;
    }
    .reds-genki .contents {
        margin-block-start: 1.25rem;
    }

}


/*---------------------------------

カテゴリースライダー

---------------------------------*/

.category-area {
    border-block-start: 2px solid var(--color-black);
    border-block-end: 2px solid var(--color-black);
}
.category-area__item {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.8;
    transition: color 0.3s;
}
.category-area__item:focus-visible {
    color: var(--color-primary);
}
@media (hover: hover) and (pointer: fine) {

    .category-area__item:hover {
        color: var(--color-primary);
    }

}
@media (max-width: 767px) {

    .category-area__item {
        font-size: 1.5rem;
        line-height: 1.8;
    }

}


/*---------------------------------

MOVIE CONTENTS

---------------------------------*/

.movie-contents {
    padding-block-start: 6.25rem;
}
.movie-contents__inner {
    overflow-x: hidden;
}
.movie-contents .title {
    position: relative;
    z-index: 1;
    width: fit-content;
}
.movie-contents .contents {
    margin-block-start: -1.5rem;
}
@media (max-width: 767px) {

    .movie-contents {
        padding-block-start: 5rem;
    }
    .movie-contents .contents {
        margin-block-start: 1.25rem;
    }

}


/*---------------------------------

ピックアップ動画

---------------------------------*/

.pick-up-movie {
    position: relative;
    z-index: 1;
    padding-block-start: 6.25rem;
}
@media (max-width: 767px) {

    .pick-up-movie {
        padding-block-start: 5rem;
    }

}


/*---------------------------------

Red Wind

---------------------------------*/

.red-wind {
    overflow-x: hidden;
    padding-block-start: 6.25rem;
}
.red-wind .title {
    position: relative;
    z-index: 1;
    width: fit-content;
}
.red-wind .contents {
    margin-block-start: -1.5rem;
}
@media (max-width: 767px) {

    .red-wind {
        padding-block-start: 5rem;
    }
    .red-wind .contents {
        margin-block-start: 1.25rem;
    }

}


/*---------------------------------

新着記事

---------------------------------*/

.whats-new {
    padding-block: 5rem 6.25rem;
}
@media (max-width: 767px) {

    .whats-new {
        padding-block: 5rem 3.75rem;
        overflow-x: hidden;
    }
    .whats-new .heading__ja {
        margin-block-start: 0.5rem;
    }
    .whats-new .card:nth-child(n+4) {
        display: none;
    }

}


/*---------------------------------

マッチデイハイライト

---------------------------------*/

.match-day-highlights {
    position: relative;
    padding-block-start: 6.25rem;
}
.match-day-highlights::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 72.5%;
    background-image: url(../images/bg_pc02.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    content: "";
}
.match-day-highlights .inner {
    position: relative;
    z-index: 1;
}
@media (max-width: 767px) {

    .match-day-highlights {
        margin-block-start: 3.75rem;
        padding-block-start: 5rem;
    }
    .match-day-highlights::before {
        height: calc(100% - 24vw);
        background-image: url(../images/bg_sp02.png);
    }

}


/*---------------------------------

CTA

---------------------------------*/

.contact {
    margin-block-end: -3.125rem;
    padding-block-end: 2.5rem;
}
.contact__body {
    display: grid;
    grid-template-columns: 51.4% 1fr;
    column-gap: 16px;
    max-width: 1006px;
    margin-inline: auto;
}
.contact__text-wrap {
    text-align: center;
}
.contact__img {
    margin-block-start: 1.25rem;
}
.contact__button {
    margin-block-start: 1.875rem;
}
.contact__button .button {
    min-width: 25.625rem;
    min-height: 3.75rem;
}
.contact__text {
    margin-block-start: 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 1.6;
}
.contact__banner {
    margin-block-start: 3.75rem;
}
.banner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.banner__item a {
    display: block;
    transition: opacity 0.3s;
}
.banner__item a:focus-visible {
    opacity: 0.7;
}
@media (hover: hover) and (pointer: fine) {

    .banner__item a:hover {
        opacity: 0.7;
    }

}
@media (max-width: 1000px) {

    .contact__body {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .contact__text-wrap {
        display: contents;
    }
    .contact__title {
        order: 1;
    }
    .contact__title img {
        width: 83%;
    }
    .contact__img {
        order: 2;
    }
    .contact__img img {
        width: 80%;
    }
    .contact__img-wrap {
        order: 3;
        margin-block-start: 2.5rem;
        text-align: center;
    }
    .contact__img-wrap img {
        max-width: 80%;
    }
    .contact__button {
        order: 4;
        margin-block-start: 2.5rem;
    }
    .contact__text {
        order: 5;
    }
    .banner {
        gap: 20px;
    }

}
@media (max-width: 767px) {

    .contact {
        padding-block-end: 4.375rem;
    }
    .contact__title img {
        width: 335px;
    }
    .contact__img {
        margin-block-start: 1.875rem;
    }
    .contact__img img {
        width: 300px;
    }
    .contact__img-wrap img {
        width: 316px;
        max-width: unset;
    }
    .contact__button {
        width: 100%;
    }
    .contact__button .button {
        min-width: 100%;
    }
    .contact__button .button img {
        width: 180px;
    }
    .banner {
        grid-template-columns: 1fr;
        gap: 16px;
    }

}


/*---------------------------------

記事一覧

---------------------------------*/

.post-archive {
    position: relative;
    padding-block: 3.75rem 6.25rem;
}
.post-archive:has(.post-archive__pagination) {
    padding-block: 3.75rem 5rem;
}
.post-archive::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 47.5rem;
    background-image: url(../images/bg_pc03.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    content: "";
}
.post-archive .inner {
    position: relative;
    z-index: 1;
}
.category-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.category-list__item .category {
    padding: 0.08em 1.22em;
    font-size: 1rem;
    transition: background-color 0.3s, color 0.3s;
}
.category-list__item .category.category--reverse.is-active {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.category-list__item .category.category--reverse:focus-visible {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.post-archive__items {
    min-height: 21.25rem;
    margin-block-start: 2.5rem;
}
.post-archive .card.is-animate {
    opacity: 1;
    animation: 0.2s zoom-in;
}
@keyframes zoom-in {
    0% {
        opacity: 0.3;
        scale: 0.9;
    }
    100% {
        opacity: 1;
        scale: 1;
    }
}
.post-archive .card[data-category="advertisement"] {
    max-width: 372px;
}
.post-archive .card[data-category="advertisement"] .card__thumbnail {
    padding-inline-start: 0;
}
.post-archive .card[data-category="advertisement"] .card__title,
.post-archive .card[data-category="advertisement"] .card__body {
    display: none;
}
.post-archive__pagination {
    margin-block-start: 3.75rem;
}
.paginationjs ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.paginationjs ul li a {
    display: inline-grid;
    place-items: center;
    width: 1.875rem;
    height: 1.875rem;
    cursor: pointer;
    background-color: var(--color-black);
    color: var(--color-white);
    font-family: var(--font-en);
    font-size: 0.75rem;
    font-weight: 500;
    transition: opacity 0.3s;
}
.paginationjs ul li.active a {
    pointer-events: none;
    background-color: var(--color-primary);
}
.paginationjs ul li.disabled a {
    pointer-events: none;
}
.paginationjs ul li:first-child a,
.paginationjs ul li:last-child a {
    width: 0.5625rem;
    background-color: unset;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: transparent;
}
.paginationjs ul li:first-child a {
    background-image: url(../images/icon_pagination-arrow-left02.svg);
}
.paginationjs ul li:last-child a {
    background-image: url(../images/icon_pagination-arrow-right02.svg);
}
@media (hover: hover) and (pointer: fine) {

    .category-list__item .category.category--reverse:hover {
        background-color: var(--color-primary);
        color: var(--color-white);
    }

}
@media (max-width: 767px) {

    .post-archive {
        overflow-x: hidden;
        padding-block: 4.375rem 3.75rem;
    }
    .post-archive::before {
        height: 45.5rem;
        background-image: url(../images/bg_sp03.png);
    }
    .post-archive .contents {
        margin-block-start: 2.5rem;
    }
    .post-archive .card__thumbnail {
        margin-inline-end: -46px;
    }
    .post-archive .card[data-category="advertisement"] {
        max-width: 100%;
    }
    .post-archive .card[data-category="advertisement"] .card__thumbnail {
        padding-inline-start: 10px;
    }

}