@charset "utf-8";

html:root {
    --color-kaisya: #e60012;
    --color-hito: #ff9867;
    --color-monokoto: #78cabe;
    --color-kizuna: #b2d700;
    --color-topics: #ffb400;
}
.icon_kaisya_path {
    fill: var(--color-kaisya);
}
.icon_hito_path {
    fill: var(--color-hito);
}
.icon_monokoto_path {
    fill: var(--color-monokoto);
}
.icon_kizuna_path {
    fill: var(--color-kizuna);
}
.icon_topics_path {
    fill: var(--color-topics);
}
.icon_gray .icon_path {
    fill: #ccc;
}

@media (min-width: 1440px) {
    html {
        font-size: 1px;
    }
}
@media (max-width: 1439px) and (min-width: 641px) {
    html {
        font-size: calc(1vw / 1440 * 100);
    }
}
@media (min-width: 641px) {
    .sp_only {
        display: none !important;
    }
}
@media (max-width: 640px) {
    html {
        font-size: calc(1vw / 390 * 100);
    }
    .pc_only {
        display: none !important;
    }
}

.font_rounded {
    font-family: "M PLUS Rounded 1c", sans-serif;
}

.font_noto_sans {
    font-family: "Noto Sans", sans-serif;
}
.content_wrap {
    font-feature-settings: "palt";
    color: #333;
    background-color: #e6e6e6;
    position: relative;
    overflow: clip;
}
.content {
    font-family: "Noto Sans JP", sans-serif;
}
img,
picture {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
@media (min-width: 641px) {
    .content {
        width: 1440rem;
        margin-inline: auto;
        padding: 35rem 80rem 128rem;
    }
}
@media (max-width: 640px) {
    body {
        padding-bottom: 48rem;
    }
    .content {
        padding-top: 24rem;
        padding-inline: 8rem;
    }
}
@media (min-width: 641px) {
    @media (hover:hover) {
        .content a {
            transition: opacity 0.5s;
        }
        .content a:hover {
            opacity: 0.7;
        }
    }
}

/* common */
.content_top {
    position: relative;
    z-index: 100;
}
.content_ttl {
    text-align: center;
}
.content_ttl_link {
    display: block;
}
.content_list,
.category_list {
    display: flex;
}
.content_list_link,
.category_list_link {
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    color: #333;
    display: block;
}
.content_list_link_none,
.category_list_link_none {
    color: #b3b3b3;
    pointer-events: none;
}

.section_wrap {
	border-image-slice: 33%;
	border-image-repeat: repeat;
    position: relative;
}
.section + .section {
	border-image-slice: 33%;
	border-image-repeat: repeat;
}
.section_ttl {
    font-weight: 900;
    line-height: 1.25;
    text-align: center;
}
.section_border {
    position: absolute;
}
.top_right {
    rotate: 90deg;
}
.bottom_left {
    rotate: 270deg;
}
.bottom_right {
    rotate: 180deg;
}

.content_bottom {
    text-align: center;
}
.content_bottom_ttl {
    margin-inline: auto;
    display: block;
}

.lang_list {
    display: flex;
    align-items: center;
    justify-content: center;
}
.lang_list > li {
    position: relative;
}
.lang_list > li + li::before {
    content: '';
    width: 1rem;
    height: 100%;
    background-color: var(--color-kaisya);
    display: block;
    position: absolute;
    top: 0;
}
.lang_list_link {
    font-weight: 700;
    text-decoration: none;
    color: #757575;
}
.lang_list_link.is_active {
    color: var(--color-kaisya);
    pointer-events: none;
}

@media (min-width: 641px) {
    .section_border {
        width: 36rem;
        height: 36rem;
        background: url(../img/common/pc_corner_rounder.svg) no-repeat 50% / contain;
    }
    .top_left {
        top: -4rem;
        left: -4rem;
    }
    .top_right {
        top: -4rem;
        right: -4rem;
    }
    .bottom_left {
        left: -4rem;
        bottom: -4rem;
    }
    .bottom_right {
        right: -4rem;
        bottom: -4rem;
    }

    .content_ttl {
        position: absolute;
        top: 0;
        left: 0;
    }
    .content_ttl_link {
        width: 144rem;
    }
    .content_list,
    .category_list {
        justify-content: center;
        gap: 20rem;
    }
    .content_list_link,
    .category_list_link {
        width: 96rem;
        padding-block: 3rem;
        font-size: 12rem;
    }
    .content_list_icon,
    .category_list_icon {
        width: 64rem;
        height: 64rem;
        margin-bottom: 8rem;
        margin-inline: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .lang_list {
        gap: 16rem;
        position: absolute;
        top: 0;
        right: 0;
    }
    .lang_list > li {
        line-height: 1;
    }
    .lang_list > li + li::before {
        left: -9rem;
    }
    .lang_list_link {
        font-size: 14rem;
    }

    .section_wrap {
        margin-top: 24rem;
        border-image-source: url(../img/common/line_pc.svg);
        border-image-width: 32rem;
    }
    .section {
        padding-block: 40rem;
    }
    .section + .section {
        border-image-source: url(../img/common/line_pc.svg);
        border-image-width: 32rem 0 0;
    }
    .section_ttl {
        margin-bottom: 24rem;
        font-size: 20rem;
    }

    .content_bottom {
        padding-top: 80rem;
    }
    .content_bottom_ttl {
        width: 237rem;
    }
}
@media (max-width: 640px) {
    .section_border {
        width: 28rem;
        height: 28rem;
        background: url(../img/common/sp_corner_rounder.svg) no-repeat 50% / contain;
    }
    .top_left {
        top: -2rem;
        left: -2rem;
    }
    .top_right {
        top: -2rem;
        right: -2rem;
    }
    .bottom_left {
        left: -2rem;
        bottom: -2rem;
    }
    .bottom_right {
        right: -2rem;
        bottom: -2rem;
    }

    .content_top {
        width: 100%;
        padding-left: 16rem;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        display: flex;
        justify-content: space-between;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 999;
    }
    .content_top::before {
        content: '';
        width: 100%;
        height: 100%;
        background-color: #fff;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 11;
    }
    .content_top_bg {
        width: 100%;
        height: 100%;
        background-color: #000;
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        opacity: 0;
    }
    .content_ttl {
        position: relative;
        z-index: 11;
    }
    .content_ttl_link {
        width: 118rem;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .content_nav {
        display: block;
    }
    .content_nav_ttl {
        padding-left: 16rem;
        padding-block: 11rem;
        position: relative;
        z-index: 20;
    }
    .content_nav_ttl_link {
        font-weight: 900;
        font-size: 20rem;
        line-height: 1.25;
        color: var(--color-kaisya);
        text-decoration: none;
    }
    .content_nav_btn {
        width: 48rem;
        height: 48rem;
        border: none;
        background-color: var(--color-kaisya);
        position: relative;
        z-index: 20;
    }
    .content_nav_btn::before,
    .content_nav_btn::after,
    .content_nav_btn_line {
        width: 24rem;
        height: 2px;
        margin: auto;
        border-radius: 10rem;
        background-color: #fff;
        display: block;
        position: absolute;
        left: 0;
        right: 0;
    }
    .content_nav_btn::before,
    .content_nav_btn::after {
        content: '';
    }
    .content_nav_btn::before {
        top: calc(50% - 9rem);
    }
    .content_nav_btn::after {
        top: calc(50% + 7rem);
    }
    .content_nav_btn_line {
        top: calc(50% - 1rem);
    }
    .content_nav_inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 21rem;
    }

    .lang_list {
        gap: 26rem;
        z-index: 20;
    }
    .lang_list > li {
        line-height: 1.2;
    }
    .lang_list > li + li::before {
        left: -14rem;
    }
    .lang_list_link {
        font-size: 10rem;
    }

    .content_list_wrap {
        padding: 24rem;
        background-color: #fff;
        position: absolute;
        left: 0;
        bottom: calc(100% - 1px);
        z-index: 10;
    }
    .content_list {
        flex-wrap: wrap;
        gap: 12rem;
    }
    .content_list_link {
        width: 165rem;
        height: 48rem;
        font-size: 14rem;
        text-align: left;
        display: flex;
        align-items: center;
    }
    .content_list_icon {
        width: 32rem;
        min-width: 32rem;
        height: 32rem;
        margin-right: 4rem;
    }

    .section_wrap {
        border-image-source: url(../img/common/line_sp.svg);
        border-image-width: 16rem;
    }
    .section {
        padding-block: 24rem;
    }
    .section + .section {
        border-image-source: url(../img/common/line_sp.svg);
        border-image-width: 16rem 0 0;
    }
    .section_ttl {
        margin-bottom: 16rem;
        font-size: 18rem;
    }

    .category_list {
        justify-content: center;
        gap: 16rem;
    }
    .category_list_link {
        width: 50rem;
        font-size: 10rem;
    }
    .category_list_icon {
        width: 40rem;
        height: 40rem;
        margin-bottom: 4rem;
        margin-inline: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .content_bottom {
        padding-block: 40rem;
    }
    .content_bottom_ttl {
        width: 158rem;
    }
}
@media (max-width: 640px) {
    .is_nav_open.content_top {
        z-index: 1010;
    }
    .content_nav_btn::before,
    .content_nav_btn::after {
        transition: transform 0.5s;
    }
    .content_nav_btn_line {
        transition: scale 0.5s;
    }
    .is_nav_open .content_nav_btn::before {
        transform: translateY(8rem) rotate(45deg);
    }
    .is_nav_open .content_nav_btn::after {
        transform: translateY(-8rem) rotate(-45deg);
    }
    .is_nav_open .content_nav_btn .content_nav_btn_line {
        scale: 0 1;
    }
    .content_top_bg {
        transition: opacity 0.5s;
        pointer-events: none;
    }
    .is_nav_open .content_top_bg {
        opacity: 0.3;
        pointer-events: all;
    }
}
@media (min-width: 641px) {
    @media (hover:hover) {
        a.content_list_link,
        a.category_list_link {
            transition: opacity 0.5s;
        }
        a.content_list_link:hover,
        a.category_list_link:hover {
            opacity: 0.5;
        }
    }
}

body.is_modal_show {
    overflow: hidden;
}
.modal_content {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    opacity: 0;
    transform: translateY(100%);
    background: rgba(0, 0, 0, 0.3);
    transition: opacity 0.3s 0s, transform 0s 0.3s;
}
.modal_content.is_modal_show {
    opacity: 1;
    transform: translateY(0%);
    transition: opacity 0.3s 0s, transform 0s 0s;
}
.modal_scroll {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    text-align: center;
    letter-spacing: -0.5em; /*inline-blockの隙間をなくす*/
}
.modal_scroll_inner {
    text-align: center;
    margin: auto;
    width: 100%;
    letter-spacing: normal; /* letter-spacing 戻す*/
    line-height: 1.5;
}
.modal_inner {
    background-color: #fff;
    position: relative;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
}
.is_modal_show .modal_inner {
    opacity: 1;
}

/* centering */
.modal_scroll_inner,
.modal_scroll:after {
    display: inline-block;
    vertical-align: middle;
}
.modal_scroll:after {
    content: '';
    height: 100%;
}
/* close */
.modal_close {
    width: 48rem;
    height: 48rem;
    border: none;
    background-color: var(--color-kaisya);
    position: absolute;
    right: 0;
    cursor: pointer;
}
.modal_close::before,
.modal_close::after {
    content: '';
    width: 70%;
    height: 2px;
    margin: auto;
    background-color: #fff;
    display: block;
    position: absolute;
    inset: 0;
}
.modal_close::before {
    rotate: 45deg;
}
.modal_close::after {
    rotate: -45deg;
}

.about_modal_content .simplebar-track {
    width: 4rem;
    border-radius: 100rem;
    background: #e6e6e6;
}
.about_modal_content .simplebar-track .simplebar-scrollbar.simplebar-visible::before{
    opacity:1;
}
.about_modal_content .simplebar-track .simplebar-scrollbar::before{
    width: 100%;
    background: #757575;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
@media (min-width: 641px) {
    .modal_scroll_inner {
        padding: 56rem 20rem;
        max-width: 1000rem;
    }
}
@media (max-width: 640px) {
    .modal_scroll_inner {
        padding: 52rem 16rem;
        max-width: 390rem;
    }
}

/* about */
.about_btn {
    line-height: 1.25;
    color: var(--color-kaisya);
    border: 1px solid var(--color-kaisya);
    border-radius: 4rem;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}
.about_btn_icon {
    width: 10rem;
    height: 10rem;
    margin-block: auto;
    display: block;
    stroke: var(--color-kaisya);
    position: absolute;
    top: 0;
    right: 16rem;
    bottom: 0;
}
.about_btn_txt,
.about_btn_txt_lang {
    text-align: center;
    display: block;
}

.about_modal_inner {
    border-radius: 16rem;
}
.about_modal_content {
    text-align: left;
}
.about_modal_ttl {
    line-height: 1.25;
    color: var(--color-kaisya);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.about_modal_ttl_inner {
    display: inline-block;
}
.about_modal_txt {
    line-height: 2;
    letter-spacing: 0.04em;
}
.about_modal_txt_weight {
    font-weight: 700;
}
.about_modal_ttl_sub {
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-kaisya);
}
@media (min-width: 641px) {
    .about_btn {
        padding: 12rem 47rem;
        gap: 8rem;
        position: absolute;
        top: 27rem;
        right: 0;
    }
    .about_btn_inner {
        text-align: left;
    }
    .about_btn_txt {
        font-size: 14rem;
    }
    .about_btn_txt_lang {
        margin-top: 4rem;
        font-size: 10rem;
    }

    .about_modal_inner {
        padding: 20rem;
    }
    .about_modal_content {
        height: 600rem;
        padding: 16rem 60rem;
    }
    .about_modal_ttl {
        font-size: 24rem;
        gap: 8rem;
    }
    .about_modal_ttl_img {
        width: 173rem;
    }
    .about_modal_ttl_inner {
        padding-bottom: 11rem;
    }
    .about_modal_txt {
        margin-top: 40rem;
        font-size: 16rem;
    }
    .about_modal_ttl_sub {
        font-size: 24rem;
    }
    .about_modal_txt + .about_modal_ttl_sub {
        margin-top: 80rem;
    }
    .about_modal_ttl_sub + .about_modal_txt {
        margin-top: 24rem;
    }
    .modal_close {
        top: -56rem;
    }
}
@media (max-width: 640px) {
    .about_btn {
        width: 100%;
        margin-top: 24rem;
        padding-block: 8rem;
        font-size: 14rem;
        gap: 16rem;
    }
    .about_btn_txt {
        font-size: 14rem;
    }
    .about_btn_txt_lang {
        margin-top: 4rem;
        font-size: 12rem;
    }

    .about_modal_inner {
        padding: 10rem;
    }
    .about_modal_content {
        height: 540rem;
        padding: 30rem 14rem;
    }
    .about_modal_ttl {
        font-size: 18rem;
        gap: 4rem;
    }
    .about_modal_ttl_img {
        width: 115rem;
    }
    .about_modal_ttl_inner {
        padding-bottom: 11rem;
    }
    .about_modal_txt {
        margin-top: 24rem;
        font-size: 14rem;
    }
    .about_modal_ttl_sub {
        font-size: 20rem;
    }
    .about_modal_txt + .about_modal_ttl_sub {
        margin-top: 48rem;
    }
    .about_modal_ttl_sub + .about_modal_txt {
        margin-top: 24rem;
    }
    .modal_close {
        top: -52rem;
    }
}
@media (min-width: 641px) {
    @media (hover:hover) {
        .about_btn {
            transition: color 0.5s, background-color 0.5s;
        }
        .about_btn:hover {
            color: #fff;
            background-color: var(--color-kaisya);
        }
        .about_btn_icon {
            transition: stroke 0.5s;
        }
        .about_btn:hover .about_btn_icon {
            stroke: #fff;
        }
    }
}

/* car_list */
.car_list_wrap {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    overflow: hidden;
}
.car_list {
    display: flex;
    align-items: flex-end;
    position: absolute;
    left: 0;
    bottom: 0;
}
.car_list > li {
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: contain;
}
.car_list > li[data-img="1"] {
    background-image: url(../img/common/car_list_01.svg);
}
.car_list > li[data-img="2"] {
    background-image: url(../img/common/car_list_02.svg);
}
.car_list > li[data-img="3"] {
    background-image: url(../img/common/car_list_03.svg);
}
.car_list > li[data-img="4"] {
    background-image: url(../img/common/car_list_04.svg);
}
.car_list > li[data-img="5"] {
    background-image: url(../img/common/car_list_05.svg?v=1);
}
.car_list > li[data-img="6"] {
    background-image: url(../img/common/car_list_06.svg?v=1);
}
.car_list > li[data-img="7"] {
    background-image: url(../img/common/car_list_07.svg);
}
.car_list > li[data-img="8"] {
    background-image: url(../img/common/car_list_08.svg);
}
.car_list > li[data-img="9"] {
    background-image: url(../img/common/car_list_09.svg);
}
.car_list > li[data-img="10"] {
    background-image: url(../img/common/car_list_10.svg);
}
.car_list > li[data-img="11"] {
    background-image: url(../img/common/car_list_11.gif);
}
.car_list > li[data-img="12"] {
    background-image: url(../img/common/car_list_12.svg);
}
@media (min-width: 641px) {
    .car_list_wrap {
        height: 50rem;
    }
    .car_list > li {
        min-width: 110rem;
        height: 50rem;
        margin-left: 1440rem;
    }
}
@media (max-width: 640px) {
    .car_list_wrap {
        height: 25rem;
    }
    .car_list > li {
        width: 55rem;
        height: 25rem;
        margin-left: 390rem;
    }
}
.car_list {
    animation: carList 200s infinite linear;
}
.car_list_2 {
    animation-delay: -100s;
}
@keyframes carList {
    0% {
        translate: 100% 0;
    }
    100% {
        translate: -100% 0;
    }
}