@charset "UTF-8";

@import url(animation.css);

:root {
    --pc-screen-calc: 100/1920;
    --tb-screen-calc: 100/1024;
    --sp-screen-calc: 100/576;
    --text-color: #082627;
    --base-color: #F9FCFD;
    --accent-color: #28A6A5;
}

html {
    font-size: 100%;
}

* {
    box-sizing: border-box;
}

body {
    font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    line-height: 1.7;
    color: black;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

li {
    list-style-type: none;
}

.box-shadow {
    box-shadow: 0 0 8p1 2px rgb(93, 93, 93);
}

/* ----------------------------------------------- */
/* オープニングアニメーション */
/* ----------------------------------------------- */
.opening {
    width: 100%;
    height: 100vh;
    background-color: var(--text-color);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999999;
    overflow: hidden;
}

.opening-beginning {
    color: var(--base-color);
    font-family: "Tangerine";
    font-size: calc(48vw * var(--pc-screen-calc));
    letter-spacing: calc(4vw * var(--pc-screen-calc));
    line-height: 1;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    margin: auto;
    opacity: 0;
    -webkit-animation: opening-text-appear 4s .5s ease forwards;
    animation: opening-text-appear 4s .5s ease forwards;
}

.opening-screen {
    width: calc(560vw * var(--pc-screen-calc));
    height: calc(560vw * var(--pc-screen-calc));
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    margin: auto;
    border-radius: 50%;
    background-color: var(--base-color);
    -webkit-filter: blur(calc(400vw * var(--pc-screen-calc)));
    filter: blur(calc(400vw * var(--pc-screen-calc)));
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-animation: appear-screen 1.5s 4.1s ease-out forwards;
    animation: appear-screen 1.5s 4.1s ease-out forwards;
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
}

.typing-effect {
    width: 22ch;
    -webkit-animation: typing-effect 0.5s step-end infinite alternate,
        typing-action 3s steps(22) 5s both,
        typing-out 5s both 5s;
    animation: typing-effect 0.5s step-end infinite alternate,
        typing-action 3s steps(22) 5s both,
        typing-out 5s both 5s;
    white-space: nowrap;
    overflow: hidden;
    border-right: calc(2vw * var(--pc-screen-calc)) solid;
    font-family: monospace;
    font-size: calc(24vw * var(--pc-screen-calc));
}

.fade-up {
    opacity: 0;
    transform: translateY(calc(15vw * var(--pc-screen-calc)));
    transition: all .5s ease;
}

.fade-up.is-active {
    opacity: 1;
    transform: translateY(0);
}

@media screen and (max-width:1080px) {

    .opening-beginning {
        font-size: calc(48vw * var(--tb-screen-calc));
        letter-spacing: calc(4vw * var(--tb-screen-calc));
    }

    .opening-screen {
        -webkit-filter: blur(calc(300vw * var(--tb-screen-calc)));
        filter: blur(calc(300vw * var(--tb-screen-calc)));
        width: calc(300vw * var(--tb-screen-calc));
        height: calc(300vw * var(--tb-screen-calc));
    }

    .typing-effect {
        border-right: calc(2vw * var(--tb-screen-calc)) solid;
        font-size: calc(12vw * var(--tb-screen-calc));
    }

    .fade-up {
        transform: translateY(calc(15vw * var(--tb-screen-calc)));
    }
}

@media screen and (max-width:576px) {

    .opening-beginning {
        font-size: calc(48vw * var(--sp-screen-calc));
        letter-spacing: calc(4vw * var(--sp-screen-calc));
    }

    .opening-screen {
        -webkit-filter: blur(calc(300vw * var(--sp-screen-calc)));
        filter: blur(calc(300vw * var(--sp-screen-calc)));
        width: calc(300vw * var(--sp-screen-calc));
        height: calc(300vw * var(--sp-screen-calc));
    }

    .typing-effect {
        border-right: calc(2vw * var(--sp-screen-calc)) solid;
        font-size: calc(6vw * var(--sp-screen-calc));
    }

    .fade-up {
        transform: translateY(calc(15vw * var(--sp-screen-calc)));
    }
}


/* -------------------------------------------------------------------- */
/* 共通↓ */
/* --------------------------------------------------------------------- */
.cursor {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #a62874;
    width: calc(16vw * var(--pc-screen-calc));
    height: calc(16vw * var(--pc-screen-calc));
    border: calc(1vw * var(--pc-screen-calc)) solid var(--base-color);
    border-radius: 50%;
    margin: calc(-8vw * var(--pc-screen-calc)) 0 0 calc(-8vw * var(--pc-screen-calc));
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    z-index: 1111111;
    opacity: 1;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.ripple {
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(166, 40, 116, 0.5);
    width: calc(24vw*var(--pc-screen-calc));
    height: calc(24vw*var(--pc-screen-calc));
    border-radius: 50%;
    pointer-events: none;
    z-index: 11111;
    -webkit-filter: blur(calc(4vw*var(--pc-screen-calc)));
    filter: blur(calc(4vw*var(--pc-screen-calc)));
}

.pagination {
    position: fixed;
    top: 50%;
    right: calc(30vw*var(--pc-screen-calc));
    z-index: 999;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: calc(16vw*var(--pc-screen-calc));
}

.pagination-dot {
    width: calc(12vw*var(--pc-screen-calc));
    height: calc(12vw*var(--pc-screen-calc));
    background-color: var(--base-color);
    border-radius: 50%;
    transition: all 0.3s;
    border: calc(1vw*var(--pc-screen-calc)) solid var(--text-color);
    outline: solid calc(1vw*var(--pc-screen-calc)) var(--base-color);
}

.pagination-dot.active {
    background-color: var(--text-color);
}

.triangle {
    width: calc(32vw*var(--pc-screen-calc));
    height: calc(32vw*var(--pc-screen-calc));
    position: absolute;
    bottom: calc(5vw*var(--pc-screen-calc));
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: var(--text-color);
    -webkit-clip-path: polygon(100% 50%, 0 50%, 50% 100%);
    clip-path: polygon(100% 50%, 0 50%, 50% 100%);
    -webkit-animation: blinking 1.5s 0s linear infinite;
    animation: blinking 1.5s 0s linear infinite;
}

@media screen and (max-width:1080px) {

    .cursor {
        display: none;
    }

    .triangle {
        width: calc(44vw*var(--tb-screen-calc));
        height: calc(44vw*var(--tb-screen-calc));
        bottom: calc(8vw*var(--tb-screen-calc));
        z-index: 9;
    }

    .pagination {
        right: calc(30vw*var(--tb-screen-calc));
        gap: calc(16vw*var(--tb-screen-calc));
    }

    .pagination-dot {
        width: calc(12vw*var(--tb-screen-calc));
        height: calc(12vw*var(--tb-screen-calc));
        outline: solid calc(1vw*var(--tb-screen-calc)) var(--base-color);

    }
}

@media screen and (max-width:576px) {

    .pagination {
        right: calc(15vw*var(--sp-screen-calc));
        gap: calc(16vw*var(--sp-screen-calc));
    }

    .pagination-dot {
        width: calc(12vw*var(--sp-screen-calc));
        height: calc(12vw*var(--sp-screen-calc));
        outline: solid calc(1vw*var(--sp-screen-calc)) var(--base-color);
    }
}

header {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}

.header__wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.header-button {
    width: calc(40vw*var(--pc-screen-calc));
    height: calc(50vw*var(--pc-screen-calc));
    position: absolute;
    top: calc(60vw*var(--pc-screen-calc));
    right: calc(60vw*var(--pc-screen-calc));
    z-index: 999999;
}

.header-button span {
    width: 100%;
    height: calc(5vw*var(--pc-screen-calc));
    position: absolute;
    left: 0;
    border-radius: 999px;
    background-color: var(--text-color);
    display: block;
    transition: all .5s ease;
}

.header-button span:nth-of-type(1) {
    top: calc(10vw*var(--pc-screen-calc));
}

.header-button span:nth-of-type(2) {
    top: 0;
    bottom: 0;
    margin: auto 0;
}

.header-button span:nth-of-type(3) {
    bottom: calc(10vw*var(--pc-screen-calc));
}

.header-button.is-opened span:nth-of-type(1) {
    top: 0;
    bottom: 0;
    margin: auto 0;
    transform: rotate(-135deg);
}

.header-button.is-opened span:nth-of-type(2) {
    opacity: 0;
    left: 50%;
}

.header-button.is-opened span:nth-of-type(3) {
    bottom: 0;
    top: 0;
    margin: auto 0;
    transform: rotate(135deg);
}

.header__navi {
    width: 100%;
    height: 100%;
}

.header__navi ul {
    width: 100%;
    height: 100%;
    position: relative;
}

.header__navi ul li {
    position: absolute;
    width: calc(300vw*var(--pc-screen-calc));
    height: calc(300vw*var(--pc-screen-calc));
    text-align: center;
    border-radius: 50%;
    background: radial-gradient(closest-side circle at center,
            transparent 50%,
            hsla(157, 5%, 53%, 0.4) 90%,
            transparent 100%);
    transition: all .5 ease;
}

.header__navi ul li.is-closed {
    visibility: hidden;
    opacity: 0;
    transition: opacity 1s ease;
}

.header__navi ul li.is-opened {
    visibility: visible;
    opacity: 1;
    transition: opacity 1s ease;
}

@media (any-hover:hover) {

    .header__navi ul li:hover {
        background: radial-gradient(closest-side circle at center,
                transparent 20%,
                hsla(156, 19%, 85%, 0.4) 90%,
                transparent 100%);
    }
}

.header__navi ul li a {
    width: 100%;
    height: 100%;
    color: var(--text-color);
    font-size: calc(40vw*var(--pc-screen-calc));
    font-weight: 500;
    display: grid;
    place-items: center;
    border-radius: 50%;
}

@media screen and (max-width:1080px) {

    .header-button {
        width: calc(40vw*var(--tb-screen-calc));
        height: calc(50vw*var(--tb-screen-calc));
        top: calc(60vw*var(--tb-screen-calc));
        right: calc(60vw*var(--tb-screen-calc));
    }

    .header-button span {
        height: calc(5vw*var(--tb-screen-calc));
    }

    .header-button span:nth-of-type(1) {
        top: calc(10vw*var(--tb-screen-calc));
    }

    .header-button span:nth-of-type(3) {
        bottom: calc(10vw*var(--tb-screen-calc));
    }

    .header__navi ul li {
        width: calc(300vw*var(--tb-screen-calc));
        height: calc(300vw*var(--tb-screen-calc));
        background: radial-gradient(closest-side circle at center,
                transparent 50%,
                hsla(160, 45%, 92%, 0.4) 90%,
                transparent 100%);
    }

    .header__navi ul li a {
        font-size: calc(40vw*var(--tb-screen-calc));
    }
}

@media screen and (max-width:576px) {

    .header-button {
        width: calc(40vw*var(--sp-screen-calc));
        height: calc(50vw*var(--sp-screen-calc));
        top: calc(40vw*var(--sp-screen-calc));
        right: calc(60vw*var(--sp-screen-calc));
    }

    .header-button span {
        height: calc(5vw*var(--sp-screen-calc));
    }

    .header-button span:nth-of-type(1) {
        top: calc(10vw*var(--sp-screen-calc));
    }

    .header-button span:nth-of-type(3) {
        bottom: calc(10vw*var(--sp-screen-calc));
    }

    .header__navi ul li {
        width: calc(300vw*var(--sp-screen-calc));
        height: calc(300vw*var(--sp-screen-calc));
        background: radial-gradient(closest-side circle at center,
                transparent 50%,
                hsla(160, 45%, 92%, 0.4) 90%,
                transparent 100%);
    }

    .header__navi ul li a {
        font-size: calc(40vw*var(--sp-screen-calc));
    }
}

/* ------------------------------------------------------- */
/* 共通おわり↑ */
/* ------------------------------------------------------- */

.scroll-snap__container {
    overflow: auto;
    -ms-scroll-snap-type: y mandatory;
    scroll-snap-type: y mandatory;
    height: 100vh;
}

section {
    width: 100%;
    height: 100vh;
    scroll-snap-align: start;
    overflow: hidden;
}

.top {
    width: 100%;
    position: relative;
    z-index: 0;
    overflow: hidden;

    /* レンズ表示OFFの場合は削除↓ */
    /* background-color: var(--base-color); */
}

.top::after {
    content: "";
    width: calc(826vw*var(--pc-screen-calc));
    height: 100%;
    display: block;
    position: absolute;
    z-index: 4;
    top: 0;
    right: 0;
    -webkit-clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
    background-color: #28A6A5;
    opacity: 0;
    transition: opacity 3s ease-out;
    transition-delay: .5s;
}

/* オープニングアニメーションフェードイン */
.top.is-active::after {
    opacity: 1;
}

.circle-area {
    width: 100%;
    height: 100vh;
    position: relative;
}

.circle__inner {
    width: 100%;
    height: 100%;
    background-color: white;
    mix-blend-mode: screen;
    z-index: 5;
}

.circle {
    position: absolute;
    border-radius: 50%;
}

.circle1 {
    width: calc(830vw*var(--pc-screen-calc));
    height: calc(830vw*var(--pc-screen-calc));
    margin: calc(-415vw*var(--pc-screen-calc)) 0 0 calc(-415vw*var(--pc-screen-calc));
    background-color: #3fa728;
}

.circle2 {
    margin: -310px 0 0 -310px;
    width: calc(620vw*var(--pc-screen-calc));
    height: calc(620vw*var(--pc-screen-calc));
    margin: calc(-310vw*var(--pc-screen-calc)) 0 0 calc(-310vw*var(--pc-screen-calc));
    background-color: var(--accent-color);
}

.circle3 {
    width: calc(400vw*var(--pc-screen-calc));
    height: calc(400vw*var(--pc-screen-calc));
    margin: calc(-200vw*var(--pc-screen-calc)) 0 0 calc(-200vw*var(--pc-screen-calc));
    background-color: var(--text-color);
}

.top__wrapper {
    width: 75%;
    height: 100%;
    margin: 0 auto;
    padding: calc(223vw*var(--pc-screen-calc)) calc(8vw*var(--pc-screen-calc)) 0;
    box-sizing: initial;
}

.top__title {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    color: var(--text-color);
    font-family: Arial, sans-serif;
    font-size: calc(114vw*var(--pc-screen-calc));
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.16em;
    position: relative;
    z-index: 3;
}

.top__contents {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    row-gap: calc(32vw*var(--pc-screen-calc));
    grid-auto-flow: column;
    margin-top: calc(104vw*var(--pc-screen-calc));
    position: relative;
    z-index: 2;
}

.top__contents li {
    width: calc(384vw*var(--pc-screen-calc));
    color: var(--text-color);
    font-family: Arial, sans-serif;
    font-size: calc(48vw*var(--pc-screen-calc));
    font-weight: normal;
    letter-spacing: 0.12em;
    line-height: 1;
}

.top__image {
    width: calc(514vw*var(--pc-screen-calc));
    height: calc(844vw*var(--pc-screen-calc));
    position: absolute;
    top: calc(60vw*var(--pc-screen-calc));
    right: calc(184vw*var(--pc-screen-calc));
    z-index: 10;
}

.top__image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

@media screen and (max-width:1080px) {

    .scroll-snap__container {
        -ms-scroll-snap-type: y proximity;
        scroll-snap-type: y proximity;
    }

    section {
        height: 100svh;
    }

    .top::after {
        right: calc(-80vw*var(--tb-screen-calc));
        width: 74%;
        -webkit-clip-path: polygon(50% 0, 100% 0, 50% 100%, 0 100%);
        clip-path: polygon(50% 0, 100% 0, 50% 100%, 0 100%);
        background: linear-gradient(to left, #F9FCFD 50%, #28A6A5);
    }

    .circle__inner {
        mix-blend-mode: initial;
    }

    .circle {
        display: none;
    }

    .top__wrapper {
        width: 100%;
        background-color: var(--accent-color);
        padding: initial;
    }

    .top__title {
        font-size: calc(104vw*var(--tb-screen-calc));
        position: absolute;
        top: 180px;
        top: calc(180vw*var(--tb-screen-calc));
        left: 0;
        right: 0;
        margin: 0 auto;
        z-index: 9;
    }

    .top__contents {
        width: 100%;
        grid-template-rows: repeat(8, 1fr);
        row-gap: calc(56vw*var(--tb-screen-calc));
        position: absolute;
        top: calc(320vw*var(--tb-screen-calc));
        left: calc(80vw*var(--tb-screen-calc));
        z-index: 11;
    }

    .top__contents li {
        font-size: calc(56vw*var(--tb-screen-calc));
        width: 100%;
    }

    .top__image {
        width: 40%;
        height: calc(750vw*var(--tb-screen-calc));
        top: initial;
        bottom: calc(64vw*var(--tb-screen-calc));
        right: calc(80vw*var(--tb-screen-calc));
    }

    .top__image img {
        -o-object-fit: contain;
        object-fit: contain;
    }
}

@media screen and (max-width:576px) {

    .top__contents {
        width: 80%;
        grid-template-columns: 2fr;
        grid-template-rows: repeat(6, 1fr);
        margin-top: calc(48vw*var(--sp-screen-calc));
    }

    .top__image {
        width: 56%;
        height: auto;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
}

.content {
    width: 100%;
    height: 100vh;
    background-color: var(--base-color);
    position: relative;
}

.content::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-image: url(../images/ramen_Moment.jpg);
    background-position: center;
    background-size: cover;
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease;
}

.content.second::before {
    background-image: url(../images/AdobeStock_267694987.jpeg);
}

.content:has(.common-button:hover)::before {
    opacity: 1;
    visibility: visible;
}

.content::after {
    content: "";
    width: calc(826vw*var(--pc-screen-calc));
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    -webkit-clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
    background-color: var(--accent-color);
}

.content.second::after {
    left: initial;
    right: 0;
    -webkit-clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.flow-object1 {
    width: calc(264vw*var(--pc-screen-calc));
    height: calc(264vw*var(--pc-screen-calc));
    left: calc(80vw*var(--pc-screen-calc));
    bottom: calc(308vw*var(--pc-screen-calc));
    border-radius: 100%;
    position: absolute;
    z-index: 9;
    background: radial-gradient(closest-side circle at center,
            transparent 50%,
            hsla(164, 100%, 97%, 0.4) 90%,
            transparent 100%);
    -webkit-filter: blur(calc(5vw*var(--pc-screen-calc)));
    filter: blur(calc(5vw*var(--pc-screen-calc)));
}

.flow-object2 {
    width: calc(200vw*var(--pc-screen-calc));
    height: calc(200vw*var(--pc-screen-calc));
    left: calc(820vw*var(--pc-screen-calc));
    top: calc(40vw*var(--pc-screen-calc));
    border-radius: 100%;
    position: absolute;
    z-index: 9;
    background: hsla(126, 10%, 60%, 0.4);
    -webkit-filter: blur(calc(2vw*var(--pc-screen-calc)));
    filter: blur(calc(2vw*var(--pc-screen-calc)));
}

.flow-object3 {
    width: calc(324vw*var(--pc-screen-calc));
    height: calc(324vw*var(--pc-screen-calc));
    right: calc(580vw*var(--pc-screen-calc));
    bottom: calc(208vw*var(--pc-screen-calc));
    border-radius: 100%;
    position: absolute;
    z-index: 0;
    background: radial-gradient(closest-side circle at center,
            transparent 50%,
            hsla(157, 6%, 59%, 0.4) 90%,
            transparent 100%);
    -webkit-filter: blur(calc(10vw*var(--pc-screen-calc)));
    filter: blur(calc(10vw*var(--pc-screen-calc)));
}

.flow-object4 {
    width: calc(204vw*var(--pc-screen-calc));
    height: calc(204vw*var(--pc-screen-calc));
    right: calc(40vw*var(--pc-screen-calc));
    top: calc(208vw*var(--pc-screen-calc));
    border-radius: 100%;
    position: absolute;
    z-index: 0;
    background: radial-gradient(closest-side circle at center,
            transparent 50%,
            hsla(156, 10%, 70%, 0.4) 90%,
            transparent 100%);
    -webkit-filter: blur(calc(5vw*var(--pc-screen-calc)));
    filter: blur(calc(5vw*var(--pc-screen-calc)));
}

.flow-up {
    opacity: 0;
    transform: translateY(calc(360vw*var(--pc-screen-calc)));
}

.flow-up.is-active {
    -webkit-animation: flowing-up-object 10s forwards ease;
    animation: flowing-up-object 10s forwards ease;
}

.content__wrapper {
    width: 75%;
    height: 100%;
    margin: 0 auto;
    padding: 0 calc(8vw*var(--pc-screen-calc)) 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: initial;
}

.content__container {
    width: 100%;
    z-index: 3;
}

.content__container--left {
    width: 50%;
    height: auto;
    position: absolute;
    top: calc(160vw*var(--pc-screen-calc));
    left: calc(160vw*var(--pc-screen-calc));
    z-index: 2;
}

.second .content__container--left {
    left: initial;
    right: calc(160vw*var(--pc-screen-calc));
}

.content__container--left::before {
    content: "";
    width: calc(100% + 48vw*var(--pc-screen-calc));
    height: calc(100% + 48vw*var(--pc-screen-calc));
    position: absolute;
    top: calc(-24vw*var(--pc-screen-calc));
    left: calc(-24vw*var(--pc-screen-calc));
    margin: auto;
    z-index: -1;
    background-color: #04110a;
    background: linear-gradient(to left, #383838, #091911 50%, #131916 75%, #2c302e 100%);
    display: block;
    border-radius: 8px;
}

.content__container--left::after {
    content: "";
    width: calc(600vw*var(--pc-screen-calc));
    height: calc(200vw*var(--pc-screen-calc));
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: -2;
    margin: 0 auto;
    background-image: url("../images/display.png");
    background-size: contain;
    background-position: center;
    display: block;
}

.content__container--left img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    vertical-align: top;
    box-shadow: 0 0 calc(8vw*var(--pc-screen-calc)) calc(1vw*var(--pc-screen-calc));
    background-color: black;
}

.content__container--right {
    width: 30%;
    height: calc(744vw*var(--pc-screen-calc));
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: calc(80vw*var(--pc-screen-calc)) calc(64vw*var(--pc-screen-calc));
    background-color: var(--base-color);
    position: absolute;
    right: calc(160vw*var(--pc-screen-calc));
    bottom: calc(120vw*var(--pc-screen-calc));
    z-index: 3;
    border: calc(24vw*var(--pc-screen-calc)) solid var(--accent-color);
    -webkit-filter: drop-shadow(0 0 1px);
    filter: drop-shadow(0 0 1px);
}

.second .content__container--right {
    right: initial;
    left: calc(160vw*var(--pc-screen-calc));
}

.content__container--right::after {
    content: "";
    width: calc(150vw*var(--pc-screen-calc));
    height: calc(150vw*var(--pc-screen-calc));
    position: absolute;
    left: calc(-120vw*var(--pc-screen-calc));
    top: calc(120vw*var(--pc-screen-calc));
    z-index: -1;
    background-color: var(--base-color);
    -webkit-clip-path: polygon(100% 20%, 0 50%, 100% 60%);
    clip-path: polygon(100% 20%, 0 50%, 100% 60%);
    display: block;
}

.second .content__container--right::after {
    left: initial;
    right: calc(-120vw*var(--pc-screen-calc));
    -webkit-clip-path: polygon(0 20%, 100% 50%, 0 60%);
            clip-path: polygon(0 20%, 100% 50%, 0 60%);
}

.content__title {
    width: calc(320vw*var(--pc-screen-calc));
    height: auto;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.16em;
    margin: 0 auto;
}

.content__desc {
    color: var(--text-color);
    font-size: calc(24vw*var(--pc-screen-calc));
    margin-top: calc(48vw*var(--pc-screen-calc));
}

.common-button {
    display: block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    position: relative;
    z-index: 1;
    color: #082627;
    font-size: calc(24vw*var(--pc-screen-calc));
    font-weight: bold;
    text-transform: uppercase;
    padding: calc(24vw*var(--pc-screen-calc)) calc(48vw*var(--pc-screen-calc));
    margin-top: auto;
}

.common-button::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border: calc(2vw*var(--pc-screen-calc)) solid #082627;
    background-color: var(--background-color);
    pointer-events: none;
    border-radius: 100vmax;
    width: var(--width);
    transform: translate(var(--translateX), 0);
    box-shadow: var(--box-shadow);
}

.fa-caret-right {
    color: var(--text-color);
    font-size: calc(24vw*var(--pc-screen-calc));
    margin-right: calc(8vw*var(--pc-screen-calc));
}

@media screen and (max-width:1200px) {

    .content {
        background-color: var(--accent-color);
        height: auto;
        min-height: 100vh;
    }

    .content::after {
        left: calc(-80vw*var(--tb-screen-calc));
        width: 74%;
        -webkit-clip-path: polygon(0 0, 50% 0, 100% 100%, 50% 100%);
        clip-path: polygon(0 0, 50% 0, 100% 100%, 50% 100%);
        background: linear-gradient(to right, #F9FCFD 50%, #28A6A5);
    }

    .content.second::after {
        right: calc(-80vw*var(--tb-screen-calc));
        width: 74%;
        -webkit-clip-path: polygon(50% 0, 100% 0, 50% 100%, 0 100%);
        clip-path: polygon(50% 0, 100% 0, 50% 100%, 0 100%);
        background: linear-gradient(to left, #F9FCFD 50%, #28A6A5);
    }

    .flow-object1 {
        width: calc(264vw*var(--tb-screen-calc));
        height: calc(264vw*var(--tb-screen-calc));
        left: calc(80vw*var(--tb-screen-calc));
        bottom: calc(508vw*var(--tb-screen-calc));
        background: radial-gradient(closest-side circle at center,
                transparent 50%,
                hsla(164, 100%, 97%, 0.4) 90%,
                transparent 100%);
        -webkit-filter: blur(calc(5vw*var(--tb-screen-calc)));
        filter: blur(calc(5vw*var(--tb-screen-calc)));
    }

    .flow-object2 {
        width: calc(200vw*var(--tb-screen-calc));
        height: calc(200vw*var(--tb-screen-calc));
        left: initial;
        right: calc(20vw*var(--tb-screen-calc));
        top: calc(40vw*var(--tb-screen-calc));
        background: hsla(126, 10%, 60%, 0.4);
        -webkit-filter: blur(calc(2vw*var(--tb-screen-calc)));
        filter: blur(calc(2vw*var(--tb-screen-calc)));
    }

    .flow-object3 {
        width: calc(324vw*var(--tb-screen-calc));
        height: calc(324vw*var(--tb-screen-calc));
        right: calc(-80vw*var(--tb-screen-calc));
        bottom: calc(308vw*var(--tb-screen-calc));
        background: radial-gradient(closest-side circle at center,
                transparent 50%,
                hsla(157, 17%, 36%, 0.4) 90%,
                transparent 100%);
        -webkit-filter: blur(calc(10vw*var(--tb-screen-calc)));
        filter: blur(calc(10vw*var(--tb-screen-calc)));
    }

    .flow-object4 {
        width: calc(204vw*var(--tb-screen-calc));
        height: calc(204vw*var(--tb-screen-calc));
        right: calc(340vw*var(--tb-screen-calc));
        top: calc(508vw*var(--tb-screen-calc));
        background: radial-gradient(closest-side circle at center,
                transparent 50%,
                hsla(155, 40%, 94%, 0.4) 90%,
                transparent 100%);
        -webkit-filter: blur(calc(5vw*var(--tb-screen-calc)));
        filter: blur(calc(5vw*var(--tb-screen-calc)));
    }

    .flow-up {
        opacity: 0;
        transform: translateY(calc(360vw*var(--tb-screen-calc)));
    }

    .content__wrapper {
        width: 100%;
        padding: calc(80vw*var(--tb-screen-calc)) calc(-80vw*var(--tb-screen-calc));
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .content__container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    .content__container--left {
        width: 80%;
        margin: 0 auto;
        position: relative;
        top: initial;
        left: initial;
        right: initial;
        bottom: initial;
    }

    .second .content__container--left {
        left: initial;
        top: initial;
        right: initial;
        bottom: initial;
    }

    .content__container--left::before {
        width: calc(100% + 48vw*var(--tb-screen-calc));
        height: calc(100% + 48vw*var(--tb-screen-calc));
        top: calc(-24vw*var(--tb-screen-calc));
        left: calc(-24vw*var(--tb-screen-calc));
        border-radius: calc(8vw*var(--tb-screen-calc));
    }

    .content__container--left::after {
        width: calc(600vw*var(--tb-screen-calc));
        height: calc(200vw*var(--tb-screen-calc));
    }

    .content__container--left img {
        box-shadow: 0 0 calc(8vw*var(--tb-screen-calc)) calc(1vw*var(--tb-screen-calc));
    }

    .content__container--right {
        width: 65%;
        height: auto;
        padding: calc(80vw*var(--tb-screen-calc)) calc(64vw*var(--tb-screen-calc));
        -webkit-filter: drop-shadow(0 0 8px);
        filter: drop-shadow(0 0 8px);
        position: relative;
        top: initial;
        right: initial;
        bottom: initial;
        margin-top: calc(240vw*var(--tb-screen-calc));
        margin-left: calc(128vw*var(--tb-screen-calc));
    }

    .second .content__container--right {
        top: initial;
        right: initial;
        left: initial;
        bottom: initial;
        margin-left: -50px;
    }

    .content__container--right::before {
        display: none;
    }

    .content__container--right::after {
        width: calc(100vw*var(--tb-screen-calc));
        height: calc(280vw*var(--tb-screen-calc));
        top: calc(-250vw*var(--tb-screen-calc));
        right: calc(80vw*var(--tb-screen-calc));
        left: initial;
        margin: initial;
        bottom: initial;
        -webkit-clip-path: polygon(50% 0%, 2% 100%, 98% 100%);
        clip-path: polygon(50% 0%, 2% 100%, 98% 100%);
    }

    .second .content__container--right::after {
        top: calc(-250vw*var(--tb-screen-calc));
        left: calc(80vw*var(--tb-screen-calc));
        right: initial;
        -webkit-clip-path: polygon(50% 0%, 2% 100%, 98% 100%);
        clip-path: polygon(50% 0%, 2% 100%, 98% 100%);
    }

    .content__title {
        width: calc(320vw*var(--tb-screen-calc));
    }

    .content__desc {
        font-size: calc(24vw*var(--tb-screen-calc));
        margin-top: calc(48vw*var(--tb-screen-calc));
    }

    .common-button {
        font-size: calc(24vw*var(--tb-screen-calc));
        padding: calc(20vw*var(--tb-screen-calc)) calc(48vw*var(--tb-screen-calc));
        margin-top: calc(40vw*var(--tb-screen-calc));
    }

    .common-button::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        border: calc(2vw*var(--pc-screen-calc)) solid #082627;
        background-color: var(--background-color);
        pointer-events: none;
        border-radius: 100vmax;
        width: var(--width);
        transform: translate(var(--translateX), 0);
    }

    .fa-caret-right {
        font-size: calc(24vw*var(--tb-screen-calc));
        margin-right: calc(8vw*var(--tb-screen-calc));
    }
}

@media screen and (max-width:576px) {

    .content::after {
        left: calc(-80vw*var(--sp-screen-calc));
    }

    .flow-object1 {
        width: calc(264vw*var(--sp-screen-calc));
        height: calc(264vw*var(--sp-screen-calc));
        left: calc(80vw*var(--sp-screen-calc));
        bottom: calc(208vw*var(--sp-screen-calc));
        background: radial-gradient(closest-side circle at center,
                transparent 50%,
                hsla(164, 100%, 97%, 0.4) 90%,
                transparent 100%);
        -webkit-filter: blur(calc(5vw*var(--sp-screen-calc)));
        filter: blur(calc(5vw*var(--sp-screen-calc)));
    }

    .flow-object2 {
        width: calc(200vw*var(--sp-screen-calc));
        height: calc(200vw*var(--sp-screen-calc));
        left: initial;
        right: calc(20vw*var(--sp-screen-calc));
        top: calc(40vw*var(--sp-screen-calc));
        background: hsla(126, 10%, 60%, 0.4);
        -webkit-filter: blur(calc(2vw*var(--sp-screen-calc)));
        filter: blur(calc(2vw*var(--sp-screen-calc)));
    }

    .flow-object3 {
        width: calc(324vw*var(--sp-screen-calc));
        height: calc(324vw*var(--sp-screen-calc));
        right: calc(-80vw*var(--sp-screen-calc));
        bottom: calc(308vw*var(--sp-screen-calc));
        background: radial-gradient(closest-side circle at center,
                transparent 50%,
                hsla(157, 17%, 36%, 0.4) 90%,
                transparent 100%);
        -webkit-filter: blur(calc(10vw*var(--sp-screen-calc)));
        filter: blur(calc(10vw*var(--sp-screen-calc)));
    }

    .flow-object4 {
        width: calc(204vw*var(--sp-screen-calc));
        height: calc(204vw*var(--sp-screen-calc));
        right: calc(340vw*var(--sp-screen-calc));
        top: calc(508vw*var(--sp-screen-calc));
        background: radial-gradient(closest-side circle at center,
                transparent 50%,
                hsla(155, 40%, 94%, 0.4) 90%,
                transparent 100%);
        -webkit-filter: blur(calc(5vw*var(--sp-screen-calc)));
        filter: blur(calc(5vw*var(--sp-screen-calc)));
    }

    .flow-up {
        opacity: 0;
        transform: translateY(calc(360vw*var(--sp-screen-calc)));
    }

    .content__container--left {
        width: 85%;
        top: calc(80vw*var(--sp-screen-calc));
    }

    .second .content__container--left {
        top: calc(80vw*var(--sp-screen-calc));
    }

    .content__container--left::before {
        width: calc(100% + 48vw*var(--sp-screen-calc));
        height: calc(100% + 48vw*var(--sp-screen-calc));
        top: calc(-24vw*var(--sp-screen-calc));
        left: calc(-24vw*var(--sp-screen-calc));
        border-radius: calc(8vw*var(--sp-screen-calc));
    }

    .content__container--left::after {
        width: calc(300vw*var(--sp-screen-calc));
        height: calc(100vw*var(--sp-screen-calc));
    }

    .content__container--right {
        width: 80%;
        padding: calc(80vw*var(--sp-screen-calc)) calc(40vw*var(--sp-screen-calc));
        margin-top: calc(188vw*var(--sp-screen-calc));
        margin-left: 0;
    }

    .second .content__container--right {
        margin-left: 0;
    }

    .content__container--right::after {
        width: calc(80vw*var(--sp-screen-calc));
        height: calc(280vw*var(--sp-screen-calc));
        top: calc(-150vw*var(--sp-screen-calc));
        right: calc(40vw*var(--sp-screen-calc));
    }

    .content__title {
        width: calc(320vw*var(--sp-screen-calc));
    }

    .content__desc {
        font-size: calc(24vw*var(--sp-screen-calc));
        margin-top: calc(48vw*var(--sp-screen-calc));
    }

    .common-button {
        font-size: calc(24vw*var(--sp-screen-calc));
        padding: calc(24vw*var(--sp-screen-calc)) calc(80vw*var(--tb-screen-calc));
        margin-top: calc(40vw*var(--sp-screen-calc));
    }

    .fa-caret-right {
        font-size: calc(24vw*var(--sp-screen-calc));
        margin-right: calc(16vw*var(--sp-screen-calc));
    }
}

/* ---------------------------------------------------------------
footer
------------------------------------------------------------------*/
footer {
    width: 100%;
    height: 100vh;
    background-color: var(--text-color);
    scroll-snap-align: start;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.footer__wrapper {
    width: 100%;
    position: relative;
}

.footer__navi ul li {
    width: calc(150vw*var(--pc-screen-calc));
    height: calc(150vw*var(--pc-screen-calc));
    border-radius: 50%;
    background-color: #f9fcfdc1;
    position: absolute;
    z-index: 999;
}

@media (any-hover:hover) {

    .footer__navi ul li:hover {
        background-color: #f9fcfd79;
    }
}

.footer__navi ul li a {
    width: 100%;
    height: 100%;
    color: var(--text-color);
    font-size: calc(16vw*var(--pc-screen-calc));
    border-radius: 50%;
    display: grid;
    place-content: center;
}

.footer-logo {
    width: 15%;
    margin: 0 auto;
    position: relative;
    z-index: 0;
}

small {
    color: var(--base-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.white-maru {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 99;
}

@media screen and (max-width:1080px) {

    .footer-logo {
        width: 25%;
    }

    .footer__navi ul li {
        width: calc(150vw*var(--tb-screen-calc));
        height: calc(150vw*var(--tb-screen-calc));
    }

    .footer__navi ul li a {
        font-size: calc(16vw*var(--tb-screen-calc));
    }
}

@media screen and (max-width:576px) {

    .footer__navi ul li {
        width: calc(80vw*var(--sp-screen-calc));
        height: calc(80vw*var(--sp-screen-calc));
    }

    .footer__navi ul li a {
        font-size: calc(12vw*var(--sp-screen-calc));
    }
}