@charset "utf-8";
.breadcrumb {
    background-color: #fff;
    position: relative;
    z-index: 1;
}
/* mv */
.mv,
.mv_inner {
    position: relative;
}
.mv {
    overflow: clip;
}
.mv_inner {
    transform: translateY(-50em);
}
.mv_area {
    background: no-repeat 50% / cover;
    position: sticky;
    top: 0;
    left: 0;
}
.mv_ttl {
    display: flex;
    flex-direction: column;
    position: absolute;
}
.mv_ttl > img {
    width: 100%;
    height: auto;
}
.mv_img {
    margin-inline: auto;
    background: no-repeat 50% / contain;
    position: absolute;
    left: 0;
    right: 0;
}
@media (min-width: 1441px) {
    .mv_inner {
        transform: translateY(0);
    }
}
@media (min-width: 521px) {
    .mv,
    .mv_area {
        height: calc(680 / 1440 * 100vw);
    }
    .mv_inner {
        height: calc(680 * 3 / 1440 * 100vw);
    }
    .mv_img {
        width: calc(1440 / 1440 * 100vw);
        height: calc(680 / 1440 * 100vw);
        top: calc(340 / 1440 * 100vw - 340 / 1440 * 100vw);
    }
    .mv_ttl {
        width: calc(493 / 1440 * 100vw);
        gap: calc(20 / 1440 * 100vw);
        top: calc(340 / 1440 * 100vw - 216 / 1440 * 100vw);
        right: calc(50vw + 149 / 1440 * 100vw);
    }
}
@media (max-width: 1023px) and (min-width: 768px) {
    .mv,
    .mv_area {
        height: calc(680px * (1024 / 1440));
    }
    .mv_inner {
        height: calc(680px * 3 * (1024 / 1440));
    }
    .mv_img {
        width: calc(1440px * (1024 / 1440));
        height: calc(680px * (1024 / 1440));
        top: calc(0 * (1024 / 1440));
    }
    .mv_ttl {
        width: calc(493px * (1024 / 1440));
        top: calc(124px * (1024 / 1440));
        left: calc(80px * (1024 / 1440));
    }
}
@media (min-width: 521px) {
    .mv_area {
        background-image: url(../images/index/mv_bg.jpg);
    }
    .mv_img {
        background-image: url(../images/index/mv_img.png);
    }
}
@media (max-width: 520px) {
    .mv,
    .mv_area {
        height: calc(1350 / 780 * 100vw);
    }
    .mv_inner {
        height: calc(1350 * 3 / 780 * 100vw);
    }
    .mv_area {
        background-image: url(../images/index/mv_bg_sp.jpg);
    }
    .mv_ttl {
        width: calc(679 / 780 * 100vw);
        margin-inline: auto;
        gap: calc(28 / 780 * 100vw);
        top: calc(675 / 780 * 100vw - 475 / 780 * 100vw);
        left: 0;
        right: 0;
    }
    .mv_img {
        width: calc(716 / 780 * 100vw);
        height: calc(716 / 780 * 100vw);
        background-image: url(../images/index/mv_img_sp.png);
        top: calc(675 / 780 * 100vw - 161 / 780 * 100vw);
    }
}
.animation_ready .mv_ttl_img {
    transition: clip-path 1s cubic-bezier(0.33, 1, 0.68, 1);
    clip-path: inset(0 100% 0 0);
}
.mv_ttl_img + .mv_ttl_img {
    transition-delay: 0.3s;
}
.is_animation_loaded .mv_ttl_img {
    clip-path: inset(0 0 0 0);
}

/* lead */
.lead {
    background-color: var(--color-customstyles);
    position: relative;
}
.lead::before {
    content: '';
    background: url(../images/index/lead_bg.jpg) no-repeat 50% 100% / cover;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
}
.lead_inner {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 40em;
    position: relative;
}
.lead_ttl {
    display: inline-block;
}
.lead_ttl_sub_in,
.lead_txt_in {
    font-weight: 900;
}
.lead_ttl_sub_in {
    letter-spacing: 0;
}
.lead_slide_wrap {
    width: calc(440em * 5);
    height: 265em;
    border: max(2em, 2px) solid var(--color-black);
    background-color: var(--color-black);
    overflow: hidden;
}
.lead_slide {
    display: flex;
}
.lead_img {
    width: 440em;
    height: auto;
    padding-left: 24em;
}
@media (min-width: 521px) {
    .lead::before {
        width: calc(580em + 50vw - 720em);
        height: 100%;
    }
    .lead_inner {
        width: 1200em;
        margin-inline: auto;
    }
    .lead_ttl_in {
        font-size: 120em;
    }
    .lead_ttl_sub_in {
        line-height: 1.2;
        font-size: 48em;
    }
    .lead_txt_in {
        font-size: max(24em, 12px);
    }
    .lead_slide_wrap {
        position: absolute;
        top: 166em;
        left: 478em;
    }
}
@media (min-width: 1520px) {
    .lead_inner {
        width: auto;
        margin-inline: 160em;
    }
}
@media (max-width: 520px) {
    .lead::before {
        width: 182em;
        height: 304em;
    }
    .lead_inner {
        width: 350em;
        margin-inline: auto;
    }
    .lead_ttl_in {
        font-size: 72em;
    }
    .lead_ttl_sub_in {
        line-height: 1.5;
        font-size: 28em;
    }
    .lead_txt_in {
        line-height: 1.75;
        font-size: max(18em, 12px);
    }
    .lead_slide_wrap {
        position: relative;
    }
}
.lead::before {
    transition: clip-path 1s cubic-bezier(0.33, 1, 0.68, 1);
    clip-path: inset(0 100% 0 0);
}
.lead.is_animated::before {
    clip-path: inset(0 0 0 0);
}
.lead_slide_2,
.lead_slide_3 {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.lead_slide {
    animation: leadImgSlide 120s infinite linear;
}
.lead_slide_2 {
    animation-delay: -40s;
}
.lead_slide_3 {
    animation-delay: -80s;
}
@keyframes leadImgSlide {
    0% {
        transform: translateX(150%);
    }
    100% {
        transform: translateX(-150%);
    }
}

/* common */
.special_area {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}
.special_ttl {
    display: inline-block;
}
.special_ttl_sub_in {
    font-weight: 900;
    line-height: 1.5;
}
.special_txt_in {
    font-weight: 700;
    font-size: max(18em, 12px);
    line-height: 1.75;
    letter-spacing: 0;
}
.btn .btn_arrow {
    right: 20em;
}
@media (min-width: 521px) {
    .special_ttl {
        padding-right: 10em;
    }
    .special_ttl_in {
        font-size: 96em;
        line-height: 0.9;
    }
    .special_ttl_sub_in {
        font-size: 32em;
    }
    .special_area {
        gap: 24em;
    }
    .btn {
        margin-inline: auto;
    }
}
@media (max-width: 520px) {
    .special_ttl_in {
        font-size: 66em;
        line-height: 1;
    }
    .special_ttl_sub_in {
        font-size: 28em;
    }
    .special_area {
        gap: 40em;
    }
    .btn {
        margin-top: 80em;
    }
    .btn .btn_inner {
        line-height: 1.25;
        font-size: 22em;
    }
}

/* history */
.history {
    border-top: max(2em, 2px) solid var(--color-black);
    background-color: var(--color-history);
    position: relative;
}
.history_area_wrap {
    position: relative;
}

.history_contents {
    background-color: #eb835c;
}
.history_item_wrap {
    display: flex;
    flex-direction: column;
}
.history_item_cover {
    position: relative;
}
a.history_item {
    color: var(--color-white);
    display: block;
}
.history_item::before {
    content: '';
    margin-block: auto;
    border: max(1em, 1px) solid var(--color-black);
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
}
.history_item_red::before {
    background-color: var(--color-history-red);
}
.history_item_orange::before {
    background-color: var(--color-history-orange);
}
.history_item_blue::before {
    background-color: var(--color-history-blue);
}
.history_item_gray::before {
    background-color: var(--color-history-gray);
}
.history_item_black::before {
    background-color: var(--color-history-black);
}
.history_item_img {
    width: 100%;
    height: auto;
}
.history_item_catch {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8em;
}
.history_item_catch {
    margin-bottom: 14em;
}
.history_item_catch_in,
.history_item_catch_s {
    line-height: 1.16;
    display: block;
}
.history_item_catch_in {
    font-weight: 900;
    font-size: 20em;
}
.history_item_catch_s {
    font-weight: 500;
    font-size: 14em;
}
.history_item_txt {
    padding-right: 70em;
    display: flex;
    position: relative;
}
.history_item_txt_in {
    font-size: 58em;
    line-height: 0.9;
    letter-spacing: -0.04em;
}
.history_item_txt_s,
.history_item_txt_num {
    font-weight: 900;
    line-height: 1.16;
    letter-spacing: 0;
}
.history_item_txt_s {
    font-size: max(18em, 12px);
}
.history_item_txt_num {
    font-size: max(20em, 12px);
}
.history_item_arrow {
    width: 63em;
    position: absolute;
    right: 0;
}
.history_btn .btn_inner {
    font-size: max(22em, 12px);
}
@media (min-width: 521px) {
    .history {
        display: flex;
    }
    .history_area_wrap,
    .history_contents {
        width: 50%;
        min-width: 640em;
    }
    .history_area {
        background: url(../images/index/history_bg.jpg) no-repeat 50% / cover;
        position: sticky;
        top: 0;
        left: 0;
    }
    .history_area_inner {
        max-width: 600em;
        height: 100svh;
        margin-left: auto;
        padding: 120em 120em 120em 0;
    }

    .history_contents {
        padding-block: 135em 120em;
        border-left: max(2em, 2px) solid var(--color-black);
        position: relative;
    }
    .history_item_wrap {
        gap: 115em;
    }
    .history_item_wrap {
        position: relative;
    }
    .history_item {
        width: 480em;
        margin-inline: auto;
    }
    .history_item::before {
        width: 24em;
        height: 24em;
        left: -15em;
    }
    .history_item_txt {
        margin-top: 16em;
        align-items: center;
        gap: 8em;
    }
    .history_btn {
        width: 480em;
        margin-top: 120em;
        margin-inline: auto;
    }
    .history_item_arrow {
        margin-block: auto;
        top: 0;
        bottom: 0;
    }
}
@media (min-width: 1520px) {
    .history_area_inner {
        width: auto;
        margin-left: 160em;
    }
}
@media (max-width: 1280px) and (min-width: 521px) {
    .history_area_inner {
        padding-right: 40em;
    }
}
@media (min-width: 521px) and (max-height: 720px) {
    .history_area {
        height: calc(100svh + 100em);
        top: -100em;
    }
}
@media (max-width: 520px) {
    .history {
        position: relative;
    }
    .history::before {
        content: '';
        width: 2px;
        height: 100%;
        background-color: var(--color-black);
        display: block;
        position: absolute;
        top: 0;
        left: 20em;
        z-index: 1;
    }
    .history_area_wrap {
        background: url(../images/index/history_bg_sp.jpg) no-repeat 50% / cover;
    }
    .history_area {
        padding: 120em 20em 120em 40em;
    }

    .history_contents {
        padding-block: 80em 120em;
    }
    .history_item_wrap {
        gap: 80em;
    }
    .history_item {
        width: 330em;
        margin-left: 40em;
    }
    .history_item::before {
        width: 16em;
        height: 16em;
        left: 12em;
        z-index: 1;
    }
    .history_item_txt {
        margin-top: 12em;
        flex-direction: column;
        gap: 4em;
    }
    .history_item_txt_inner {
        white-space: nowrap;
    }
    .history_btn {
        width: 330em;
        margin-left: 40em;
    }
    .history_item_arrow {
        top: -52em;
        bottom: auto;
    }
}
.history_contents {
    transition: background-color 0.6s;
}
.history_contents.is_bg_red {
    background-color: #eb835c;
}
.history_contents.is_bg_orange {
    background-color: #f4a253;
}
.history_contents.is_bg_blue {
    background-color: #7aaede;
}
.history_contents.is_bg_gray {
    background-color: #afbacc;
}
.history_contents.is_bg_black {
    background-color: #95a0a2;
}
.history_item::before {
    animation: historyDotReverse 0.3s forwards;
}
.is_animated.history_item::before {
    animation: historyDot 0.4s forwards;
}

@keyframes historyDot {
    0% {
        scale: 1;
    }
    33% {
        scale: 1.8;
    }
    66% {
        scale: 1.4;
    }
    100% {
        scale: 1.5;
    }
}
@keyframes historyDotReverse {
    0% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}
@media (min-width: 521px) {
    @media (hover:hover) {
        .history_item {
            transition: color 0.3s;
        }
        .special .history_item:hover {
            color: var(--color-red);
        }
        #contents-body .section .history_item:hover .history_item_img {
            opacity: 1;
        }
        .history_item_arrow {
            transition: fill 0.3s;
        }
        .history_item:hover .history_item_arrow {
            fill: var(--color-red);
        }
    }
}

/* customstyles */
.customstyles {
    background-color: var(--color-customstyles);
}
.customstyles_item_wrap {
    margin-top: 80em;
    display: flex;
    flex-direction: column;
    gap: 80em;
    position: relative;
}
.customstyles_item {
    display: flex;
    position: sticky;
    left: 0;
}
.customstyles_item::before,
.customstyles_item::after {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
}
.customstyles_item::before {
    border: max(2em, 2px) solid var(--color-black);
}
.customstyles_item::after {
    border: max(4em, 4px) solid var(--color-red);
    opacity: 0;
}
.customstyles_item_black,
.customstyles_item_black:link,
#contents-body .section .special a.customstyles_item_black:active,
.customstyles_item_black:visited {
    color: var(--color-white);
}
.customstyles_item_black .customstyles_item_ttl {
    color: var(--color-black);
    background-color: var(--color-white);
}
.customstyles_item_1 {
    background-color: var(--color-customstyles-beige);
}
.customstyles_item_2 {
    background-color: var(--color-customstyles-green);
}
.customstyles_item_3 {
    background-color: var(--color-customstyles-yellow);
}
.customstyles_item_4 {
    background-color: var(--color-customstyles-navy);
}
.customstyles_item_5 {
    background-color: var(--color-customstyles-brown);
}
.customstyles_item_img_wrap {
    display: block;
}
.customstyles_item_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.customstyles_item_area,
.customstyles_item_area_inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
}
.customstyles_item_number {
    display: inline-block;
    position: relative;
    white-space: nowrap;
}
.customstyles_item_number_num {
    position: absolute;
}
.customstyles_item_ttl {
    color: var(--color-white);
    background-color: var(--color-black);
}
.customstyles_item_ttl_in {
    font-weight: 700;
    font-size: 20em;
    line-height: 1.5;
}
.customstyles_item_txt_in {
    font-weight: 500;
    font-size: max(16em, 12px);
    line-height: 1.5;
    letter-spacing: 0;
}
.customstyles_item_link {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12em;
}
.customstyles_item_arrow {
    width: 63em;
    height: 40em;
}
.customstyles_btn {
    margin-top: 80em;
}
@media (min-width: 521px) {
    .customstyles_area {
        position: sticky;
        top: 120em;
        left: 0;
    }
    .customstyles_item {
        top: 240em;
    }
    .customstyles_item_img_wrap {
        width: 720em;
    }
    .customstyles_item_area {
        width: 480em;
        padding-block: 56em 31em;
        gap: 32em;
    }
    .customstyles_item_area_inner {
        gap: 32em;
    }
    .customstyles_item_number {
        padding-inline: 16em 15em;
    }
    .customstyles_item_number_in {
        font-size: 56em;
    }
    .customstyles_item_number_num {
        top: -21em;
        left: 100%;
    }
    .customstyles_item_number_num_in {
        font-size: 220em;
    }
    .customstyles_item_ttl {
        width: 330em;
        padding: 8em 16em;
    }
    .customstyles_item_txt {
        padding-inline: 16em 40em;
    }
    .customstyles_item_txt_in {
        line-height: 1.75;
    }
    .customstyles_item_link {
        margin-right: 32em;
    }
    .customstyles_item_link_in {
        font-size: 40em;
    }
    .customstyles_btn {
        width: 600em;
    }
}
@media (min-width: 521px) and (max-height: 720px) {
    .customstyles_area {
        top: 20em;
    }
    .customstyles_item {
        top: 130em;
    }
}
@media (max-width: 520px) {
    .customstyles_item {
        flex-direction: column;
        top: 20em;
    }
    .customstyles_item_area {
        padding-block: 24em;
        gap: 45em;
    }
    .customstyles_item_area_inner {
        gap: 24em;
    }
    .customstyles_item_img_wrap {
        width: 100%;
        height: 232em;
    }
    .customstyles_item_number {
        padding-inline: 16em 4em;
    }
    .customstyles_item_number_in {
        font-size: 42em;
    }
    .customstyles_item_number_num {
        top: -56em;
        left: 100%;
    }
    .customstyles_item_number_num_in {
        font-size: 136em;
    }
    .customstyles_item_ttl {
        width: 100%;
        padding: 6em 18em 15em;
    }
    .customstyles_item_txt {
        padding-inline: 16em;
    }
    .customstyles_item_txt_in {
        line-height: 1.5;
    }
    .customstyles_item_link {
        margin-right: 18em;
    }
    .customstyles_item_link_in {
        font-size: 28em;
    }
    .customstyles_btn {
        width: 350em;
        margin-inline: auto;
    }
}
.customstyles_item:active {
    color: var(--color-black);
}
@media (min-width: 521px) {
    @media (hover:hover) {
        .customstyles_item::after {
            transition: opacity 0.3s;
        }
        .customstyles_item:hover::after {
            opacity: 1;
        }
        .customstyles_item:hover {
            color: var(--color-black);
        }
        #contents-body .section .customstyles_item:hover .customstyles_item_img {
            opacity: 1;
        }
        .special .customstyles_item_black:hover {
            color: var(--color-white);
        }
        .customstyles_item_link_in {
            transition: color 0.3s;
        }
        .customstyles_item:hover .customstyles_item_link_in {
            color: var(--color-red);
        }
        .customstyles_item_arrow {
            transition: fill 0.3s;
        }
        .customstyles_item:hover .customstyles_item_arrow {
            fill: var(--color-red);
        }
    }
}

/* lineup */
.lineup {
    background-color: var(--color-lineup);
}
.lineup_item_wrap {
    display: flex;
}
.lineup_item {
    display: flex;
    flex-direction: column;
}
.lineup_item_img {
    width: 100%;
    height: auto;
}
.lineup_item_txt {
    display: flex;
    flex-direction: column;
    gap: 3em;
    position: relative;
}
.lineup_item_txt_in {
    font-size: 54em;
    line-height: 0.9;
    letter-spacing: -0.04em;
}
.lineup_item_txt_inner {
    font-weight: 900;
    font-size: max(18em, 12px);
    line-height: 1.16;
    letter-spacing: 0;
}
.lineup_item_arrow {
    width: 63em;
    height: 40em;
    position: absolute;
    top: 4em;
    right: 0;
}
@media (min-width: 521px) {
    .lineup_item_wrap {
        margin-top: 60em;
        justify-content: center;
        gap: 60em;
    }
    .lineup_item {
        width: 360em;
        gap: 12em;
    }
    .lineup_btn {
        width: 380em;
        margin-top: 72em;
    }
}
@media (max-width: 520px) {
    .lineup_item_wrap {
        margin-top: 86em;
        flex-direction: column;
        gap: 80em;
    }
    .lineup_item {
        gap: 12em;
    }
    .lineup_item_txt_in {
        padding-right: 1.5em;
    }
    .lineup_btn {
        margin-top: 80em;
    }
}
@media (min-width: 521px) {
    @media (hover:hover) {
        .lineup_item {
            transition: color 0.3s;
        }
        .special .lineup_item:hover {
            color: var(--color-red);
        }
        #contents-body .section .lineup_item:hover .lineup_item_img {
            opacity: 1;
        }
        .lineup_item_arrow {
            transition: fill 0.3s;
        }
        .lineup_item:hover .lineup_item_arrow {
            fill: var(--color-red);
        }
    }
}

/* media */
.media {
    padding-block: 120em 40em;
}