@charset "utf-8";
/* =========================================================================================
Layout
=========================================================================================*/
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
}

/* =========================================================================================
MAIN VISUAL
=========================================================================================*/
.main-visual {
    position: relative;
    z-index: 1;
}
.main-visual::before {
    content: "";
    background: url(../images/Live_the_Next.svg) no-repeat center / contain;
    width: 60vw;
    aspect-ratio: 1050 / 135;
    position: absolute;
    left: 0;
    bottom: 2px;
    translate: 0 5%;
    z-index: 1;
}
.main-visual .inner {
    max-width: var(--contents-width-large);
    display:flex;
    justify-content: flex-end;
}
.main-visual .inner .scroll-area {
    width: 60vw;
    height: 100%;
    background: url(../images/main-visual_kv.webp) repeat-y center;
    background-size: 100% auto;
    margin-left: calc(50% - 50vw);
    animation: scroll-kv 1000s linear infinite;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
@keyframes scroll-kv {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 0 -19000px;
    }
}
.main-visual .inner .text-area {
    display: flex;
    flex-direction: column;
    align-items: end;
    padding-top: 160px;
    position: relative;
    z-index: 10;
    width:40%;
}
.main-visual .inner .text-area > div {
    width: 100%;
    max-width: 490px;
}
.main-visual .inner .text-area .intro {
    writing-mode: vertical-rl;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: start;
    justify-content: right;
    gap: 1.25em;
    margin-bottom: 50px;
}
.main-visual .inner .text-area .intro strong {
    color: var(--color-main);
    font-size: clamp(1.875rem, calc(0.257rem + 3.158vw), 2.625rem); /* min: 30px, max: 42px */
    line-height: 1.5;
    margin-left: 0.5em;
}
.main-visual .inner .text-area .intro p {
    font-size: clamp(0.875rem, calc(0.73rem + 0.526vw), 1.0625rem); /* min: 14px, max: 18px */
    display: inline-block;
    padding-inline: 0.5em;
}
.main-visual .inner .text-area .swiper {
    padding: 0;
    margin: 0;
}
.main-visual .inner .text-area .swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 49 / 31;
}
.main-visual .inner .text-area .swiper .swiper-slide figure {
    font-size: clamp(0.875rem, calc(0.605rem + 0.526vw), 1rem); /* min: 14px, max: 16px */
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
.main-visual .inner .text-area .swiper .swiper-pagination {
    text-align: right;
    translate: 0 7px;
}
.main-visual .inner .text-area .swiper .swiper-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 100%;
}
.main-visual .inner .text-area .swiper .swiper-pagination .swiper-pagination-bullet-active {
    background: var(--color-main);
}
.main-visual .inner .text-area .btn {
    justify-content: space-between;
    margin-top: 30px;
}
.main-visual .inner .text-area .btn a {
    width: 45%;
}
@media only screen and (max-width: 1500px) {
.main-visual .inner .scroll-area {
    width: 55vw;
}
.main-visual .inner .text-area {
    width:45%;
}
.main-visual::before {
    width: 55vw;
}
}
@media only screen and (max-width: 1400px) {
.main-visual .inner .scroll-area {
    width: 50vw;
}
.main-visual .inner .text-area {
    width:45%;
}
.main-visual::before {
    width: 50vw;
}
}
@media only screen and (max-width: 1200px) {
.main-visual .inner .text-area .intro {
    writing-mode: horizontal-tb;
    display: block;
    
}
.main-visual .inner .text-area .intro p {
    padding-inline: 0em;
}
.main-visual .inner .text-area .intro strong {
    margin-left: 0em;
    margin-bottom: 0.5em;
    display: block;
}
}
@media only screen and (max-width: 980px) {
.main-visual .inner .text-area {
padding-top:0;
     align-items: center;
}
}
@media only screen and (max-width: 820px) {
.main-visual .inner .scroll-area {
position:absolute;
top:0;
left:0;
width: 100vw;
}
.main-visual::before {
width: 100vw;
}
.main-visual .inner .text-area {
width: 94%;
 padding: 1.5em !important;
   background: rgba(255,255,255,0.9);
   margin: 2.0em auto 4.5em;
}
.main-visual .inner {
   justify-content: center;
}
.main-visual .inner .text-area .btn {
    justify-content: center;
    margin-top: 20px;
}
.main-visual .inner .text-area .intro {
    margin-bottom: 30px;
}
.main-visual .inner .text-area .intro p br {
    display:none;
}
}
@media only screen and (max-width: 468px) {
}

/* =========================================================================================
PICK UP
=========================================================================================*/
section.pickup .post-list ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
}
section.pickup .post-list ul li {
    max-width: 570px;
}
section.pickup .inner .swiper-button-prev,
section.pickup .inner .swiper-button-next {
    width: 50px;
    height: 50px;
    border: 3px solid var(--color-accent);
    border-radius: 100%;
    position: absolute;
    top: 0;
    translate: 0 50%;
    z-index: 10;
}
.swiper-button-next:after,
.swiper-button-prev:after {
    color: var(--color-accent);
    font-size: 20px !important;
    font-weight: var(--weight-bold);
}
section.pickup .inner .swiper-button-prev {
    left: auto;
    right: 65px;
}
section.pickup .inner .swiper-button-prev::after {
    translate: -1px 1px;
}
section.pickup .inner .swiper-button-next {
    left: auto;
    right: 0;
}
section.pickup .inner .swiper-button-next::after {
    translate: 1px 1px;
}
@media only screen and (max-width: 820px) {
section.pickup .inner .swiper-button-prev,
section.pickup .inner .swiper-button-next {
    width: 30px;
    height: 30px;
    border: 2px solid var(--color-accent);
    border-radius: 100%;
    position: absolute;
    top: 20px;
    translate: 0 50%;
    z-index: 10;
}
.swiper-button-next:after,
.swiper-button-prev:after {
    color: var(--color-accent);
    font-size: 13px !important;
    font-weight: var(--weight-bold);
}
section.pickup .inner .swiper-button-prev {
    left: auto;
    right: 40px;
}
}
@media only screen and (max-width: 468px) {
}

/* =========================================================================================
PRODUCT
=========================================================================================*/
section.product {
    background: url(../images/product_bg.webp) no-repeat center / cover;
}
section.product .bg-blue {
    color: #fff;
    width: 100%;
    max-width: 520px;
    background: rgba(5,97,181,0.85);
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 30px;
    padding: 40px;
    margin-inline: 0 auto;
    position: relative;
    z-index: 1;
}
section.product .bg-blue::before {
    content: "";
    width: 100%;
    max-width: 300px;
    aspect-ratio: 300 / 110;
    background: url(../images/product_object_text.svg) no-repeat center / contain;
    position: absolute;
    right: 0;
    bottom: 0;
    translate: 25% 25%;
    filter: drop-shadow(0 3px 0 rgba(5, 98, 171, 1));
    z-index: 5;
}
section.product .bg-blue h2 {
    font-size: clamp(1.5rem, calc(0.868rem + 2.697vw), 2.25rem); /* min: 24px, max: 36px */
    line-height: 1.6;
}
section.product .bg-blue .text {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 1em;
}
section.product .bg-blue .btn {
    padding-block: 0.5em 0.75em;
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 468px) {
}

/* =========================================================================================
STRENGTHS
=========================================================================================*/
section.strengths {
    color: #fff;
    background: var(--color-main);
    padding-block: 110px;
}
section.strengths .logo-image {
    width: fit-content;
    margin: auto auto 2.0em;
}
section.strengths h2 {
    margin-block: 0.5em 0;
}
section.strengths .box {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: center;
    gap: 7.5%;
}
section.strengths .box .item {
    width: calc((100% - 7.5% - 7.5%) / 3);
}
section.strengths .box .item:nth-of-type(2) {
    margin-top: 100px;
}
section.strengths .box .item .image img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 100%;
}
section.strengths .box .item h3 {
    translate: 0 -35%;
    margin-bottom: -1em;
    position: relative;
    z-index: 5;
}
@media only screen and (max-width: 980px) {
    section.strengths .box {
        gap: 50px 80px;
    }
    section.strengths .box .item {
        width: calc((100% - 80px) / 2);
        margin-top: 0 !important;
    }
}
@media only screen and (max-width: 600px) {
    section.strengths h2 {
        margin-bottom: 1.5em;
    }
    section.strengths .box .item {
        width: 100%;
        max-width: 400px;
    }
}
@media only screen and (max-width: 468px) {
section.strengths .box .item .image img {
    width: 60%;
    margin: auto;
}
}

/* =========================================================================================
WORKS
=========================================================================================*/
section.works {
    background: var(--color-accent);
    padding-bottom: 0;
}
section.works .box {
    display: grid;
    grid-template-columns: minmax(300px, 35%) 1fr;
    gap: 0;
}
section.works .box .text {
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 1em;
}
section.works .box .text .catchphrase {
    font-size: clamp(1.5rem, calc(1.079rem + 1.798vw), 2rem); /* min: 24px, max: 32px */
    line-height: 1.7;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0.5em;
}
section.works .box .text .btn {
    margin-top: 50px;
}
section.works .box .post-list.row ul {
    width: 100%;
    max-width: 660px;
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 0;
    margin-inline: auto 0;
    margin-bottom: 0;
    position: relative;
    z-index: 10;
}
section.works .box .post-list.row ul li {
    padding: 0 0 40px 40px;
    width: 50%;
    background: var(--color-accent);
    position: relative;
    z-index: 10;
}
section.works .box .post-list.row ul li::before {
    content: "";
    width: 50%;
    aspect-ratio: 1 / 1;
    background: #000;
    position: absolute;
    top: -15px;
    right: -15px;
    z-index: -1;
    opacity: 0.2;
}
section.works .box .post-list.row ul li:nth-of-type(even) {
    translate: 0 -80px;
    z-index: 1;
}
section.works .box .post-list.row ul li:nth-of-type(even)::before {
    background: #fff;
}
section.works .box .post-list.row ul li:only-child {
    max-width: 310px;
}
section.works .box .post-list.row ul li article {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 10px;
}
section.works .box .post-list.row ul li article a {
    display: block;
}
section.works .box .post-list.row ul li .thumbnail {
    margin: 0;
    position: relative;
    z-index: 10;
}
section.works .box .post-list.row ul li .thumbnail img {
    aspect-ratio: 1 / 1;
}
section.works .box .post-list.row ul li .thumbnail .info-area {
    font-weight: var(--weight-semibold);
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: stretch;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 5;
}
section.works .box .post-list.row ul li .thumbnail .info-area .owner,
section.works .box .post-list.row ul li .thumbnail .info-area .cat a {
    color: #fff;
    font-size: clamp(0.875rem, calc(0.895rem + 0.449vw), 0.9375rem); /* min: 14px, max: 16px */
    line-height: 1.4;
    padding: 0.45em 0.75em 0.25em;
}
section.works .box .post-list.row ul li .thumbnail .info-area .owner {
    background: var(--color-main);
}
section.works .box .post-list.row ul li .thumbnail .info-area .cat a {
    height: 100%;
    background: #000;
}
section.works .box .post-list.row ul li .title a {
    color: #fff;
    font-size: clamp(1rem, calc(1.02rem + 0.449vw), 1.125rem); /* min: 18px, max: 20px */
    font-weight: var(--weight-bold);
    line-height: 1.5;
}
section.works .scroll-object {
    width: 100%;
    height: 12.5vh;
    max-height: 165px;
    background: url(../images/works_object_scroll.svg) repeat-x center;
    background-size: auto 100%;
    opacity: 0.6;
    animation: scroll-text 300s linear infinite;
    translate: 0 27.5%;
}
@keyframes scroll-text {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -19000px 0;
    }
}
@media only screen and (max-width: 820px) {
    section.works .box {
        grid-template-columns: repeat(1, 1fr);
        gap: 100px;
    }
}
@media only screen and (max-width: 468px) {
section.works .box .post-list.row ul {
    display: block;
}
section.works .box .post-list.row ul li {
    width: 100%;
    padding: 0 0 30px 0;
}
section.works .box .post-list.row ul li:nth-of-type(even) {
    translate: 0 0;
    z-index: 1;
}
section.works .box .text .btn {
    margin-top: 30px;
}
}

/* =========================================================================================
DIVISIONS
=========================================================================================*/
section.divisions {
}
section.divisions .box {
    display: flex;
    flex-wrap: wrap;
    gap: 75px 0;
}
section.divisions .item {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
section.divisions .item .image {
    min-height: 400px;
}
section.divisions .item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
section.divisions .item:first-child .image {
    width: 50vw;
    margin-left: calc(100% - 50vw);
}
section.divisions .item:last-child .image {
    width: 50vw;
    margin-right: calc(100% - 50vw);
}
section.divisions .item .text {
    width: calc(100% - 50px - 50px);
    background: #fff;
    flex-grow: 1;
    padding: 40px 40px 0;
    translate: 0 -140px;
    margin: auto;
}
section.divisions .item .text h3.mid-slash {
    font-size: clamp(1.25rem, calc(0.743rem + 2.697vw), 1.875rem); /* min: 20px, max: 30px */
    padding-bottom: 1em;
}
section.divisions .item .text h3.mid-slash::before {
    width: 1.6em;
}
section.divisions .item .btn {
    margin-top: -120px;
}
@media only screen and (max-width: 980px) {
    section.divisions .item .text {
        width: calc(100% - 30px);
        padding: 40px 10% 0;
        margin: auto;
    }
    section.divisions .item:first-child .text {
        margin-inline: 0 auto;
    }
    section.divisions .item:last-child .text {
        margin-inline: auto 0;
    }
}
@media only screen and (max-width: 600px) {
    section.divisions .item {
        width: 100%;
    }
    section.divisions .image {
        width: 100vw !important;
        min-width: 375px;
        margin-right: calc(50% - 50vw) !important;
        margin-left: calc(50% - 50vw) !important;
    }
    section.divisions .item .text {
        width: 100%;
        padding: 40px 10% 0;
    }
}

/* =========================================================================================
TOPICS
=========================================================================================*/
section.topics {
    background: var(--color-light-blue);
}
section.topics .mid-circle::after {
    display: none;
}
section.topics .box {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: center;
    gap: 3.5%;
}
section.topics .box .item {
    width: calc((100% - 3.5% - 3.5%) / 3);
}
section.strengths .box .item:nth-of-type(2) {
    margin-top: 100px;
}
section.topics .box .item:nth-of-type(even) {
    translate: 0 -80px;
}
section.topics .box .item .image {
    margin-bottom: 30px;
}
section.topics .box .item .text {
    flex-grow: 1;
    margin-bottom: 2em;
}
section.topics .box .item .text h3.mid-slash {
    font-size: clamp(1.125rem, calc(0.743rem + 2.697vw), 1.625rem); /* min: 18px, max: 26px */
    padding-bottom: 1em;
    margin-bottom: 0.5em;
}
section.topics .box .item .text h3.mid-slash::before {
    width: 1.6em;
}
@media only screen and (max-width: 980px) {
    section.topics .box {
        gap: 50px 80px;
    }
    section.topics .box .item {
        width: calc((100% - 80px) / 2);
        margin-top: 0 !important;
    }
}

@media only screen and (max-width: 600px) {
    section.topics .box {
        gap: 60px;
    }
    section.topics .box .item {
        width: 100%;
        translate: 0 !important;
    }
}
@media only screen and (max-width: 468px) {
}