@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Arvo:wght@700&display=swap');
@import url('./component/font.css');
@import url('./component/reset.css');
@import url('./component/common.css');

:root {
    --light-white: #F4F4F4;
    --light-sandy: #D3CBBC;
    --dark-sandy: #7E6744;
    --brown: #2D2B29;
    --moss: #112025;
    --btn-dark-sandy: #7E6744B3;
    --btn-moss: #112025B3;
    --font-yu-gothic: 'Yu Gothic', sans-serif;
    --font-arvo: 'Arvo', sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Yu Mincho', sans-serif;
    font-weight: 400;
    color: var(--moss);
}

img {
    width: 100%;
    object-fit: cover;
}

a {
    color: var(--white);
}

/* Button */

.btn {
    color: var(--white);
    font-family: var(--font-yu-gothic);
    font-size: 1.6rem;
    font-weight: bold;
    width: 30rem;
    padding-block: 2.1rem;
    text-align: center;
    display: inline-block;
    border-radius: 3.5rem;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    position: relative;
}

.btn::before {
    content: '';
    width: 1.607rem;
    height: 1.552rem;
    background: url('../img/lp/arrow_down.svg') no-repeat center center;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 3rem;
    transform: translate(-50%, -50%);
    transition: all 0.2s ease-in-out;
}

.btn--rotate::before {
    transform: translate(-50%, -50%) rotate(-90deg);
}

.btn:hover {
    background: transparent;
}

.btn--sandy {
    border: 1px solid var(--btn-dark-sandy);
    background: var(--btn-dark-sandy);
}

.btn--sandy:hover {
    color: var(--btn-dark-sandy);
}

.btn--moss {
    border: 1px solid var(--btn-moss);
    background: var(--btn-moss);
}

.btn--moss:hover {
    color: var(--btn-moss);
}

.btn--sandy:hover::before {
    background-image: url('../img/lp/arrow_down_sandy.svg');
}

.btn--moss:hover::before {
    background-image: url('../img/lp/arrow_down_moss.svg');
}

@media only screen and (min-width: 992px) {
    p {
        font-size: calc(16 * 100vw / 1920);
    }

    .btn {
        font-size: calc(16 * 100vw / 1920);
        width: calc(300 * 100vw / 1920);
        padding-block: calc(21 * 100vw / 1920);
        border-radius: calc(35 * 100vw / 1920);
    }

    .btn::before {
        width: calc(16.07 * 100vw / 1920);
        height: calc(15.52 * 100vw / 1920);
        right: calc(30 * 100vw / 1920);
    }
}

@media only screen and (max-width: 991px) {
    p {
        font-size: calc(14 * 100vw / 375);
    }

    .btn {
        font-size: calc(13 * 100vw / 375);
        padding-block: calc(10.5 * 100vw / 375);
        border-radius: calc(35 * 100vw / 375);
    }

    .btn::before {
        width: calc(11 * 100vw / 375);
        height: calc(10.62 * 100vw / 375);
    }

    .btn--sandy:hover {
        color: var(--white);
        background: var(--dark-sandy);
    }

    .btn:hover::before {
        background-image: url('../img/lp/arrow_down.svg');
    }

    .btn--moss:hover {
        color: var(--white);
        background: var(--moss);
    }
}

/* Text */

.title__primary {
    font-family: var(--font-arvo);
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.title__secondary {
    font-family: var(--font-arvo);
    text-transform: uppercase;
    font-size: 3.2rem;
    letter-spacing: 2.25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.title__secondary span {
    margin-inline: 1.5rem;
}

.title__icon {
    width: 7.7rem;
    height: 2.5rem;
    flex-shrink: 0;
}

.title__icon--left {
    background: url('../img/lp/line_star_1.svg') no-repeat center center;
    background-size: contain;
}

.title__icon--right {
    background: url('../img/lp/line_star_2.svg') no-repeat center center;
    background-size: contain;
}

.subtitle {
    font-size: 2.4rem;
    font-weight: 600;
}

.line {
    width: 25rem;
    border-bottom: 2px solid var(--white);
}

.caption {
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: 3.8px;
    text-align: center;
    position: relative;
}

.caption::before,
.caption p {
    position: absolute;
}

.caption::before {
    content: '';
    width: 25rem;
    height: 0.3rem;
    background: url('../img/lp/background_gradient_pc.svg') no-repeat center;
    background-size: cover;
    bottom: -1rem;
    left: 50%;
    transform: translateX(-50%);
}

.caption p {
    bottom: -5rem;
    left: calc(50% + 4rem);
}

@media only screen and (min-width: 992px) {
    .title__primary {
        font-size: calc(24 * 100vw / 1920);
    }

    .title__secondary {
        font-size: calc(32 * 100vw / 1920);
    }

    .title__secondary span {
        margin-inline: calc(15 * 100vw / 1920);
    }

    .title__icon {
        width: calc(77 * 100vw / 1920);
        height: calc(25 * 100vw / 1920);
    }

    .subtitle {
        font-size: calc(24 * 100vw / 1920);
    }

    .line {
        width: calc(250 * 100vw / 1920);
    }

    .caption {
        font-size: calc(24 * 100vw / 1920);
    }

    .caption::before {
        width: calc(250 * 100vw / 1920);
        height: calc(3 * 100vw / 1920);
        bottom: calc(-10 * 100vw / 1920);
    }

    .caption p {
        bottom: calc(-50 * 100vw / 1920);
        left: calc(50% + calc(40 * 100vw / 1920));
    }
}

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

    .title__primary,
    .subtitle {
        font-size: calc(18 * 100vw / 375);
    }

    .title__secondary {
        font-size: calc(24 * 100vw / 375);
    }

    .title__icon {
        width: calc(59 * 100vw / 375);
        height: calc(25 * 100vw / 375);
    }

    .title__icon--left {
        background-image: url('../img/lp/line_star_sp_1.svg');
    }

    .title__icon--right {
        background-image: url('../img/lp/line_star_sp_2.svg');
    }

    .line {
        width: calc(82 * 100vw / 375);
        border-width: 1px;
    }

    .caption {
        font-size: calc(16 * 100vw / 375);
        letter-spacing: 0.8px;
    }

    .caption::before {
        width: calc(152 * 100vw / 375);
        height: calc(1.82 * 100vw / 375);
        bottom: calc(-10 * 100vw / 375);
        background-image: url('../img/lp/background_gradient_sp.svg');
    }

    .caption p {
        width: 100%;
        left: 50%;
        bottom: calc(-50 * 100vw / 375);
        transform: translateX(-50%);
    }
}

/* Header */

.header {
    height: 100vh;
    display: flex;
    position: relative;
}

.header__background {
    flex: 1 1 50%;
    position: relative;
}

.header__background img {
    height: 100%;
    object-position: top center;
}

.header__caption {
    position: absolute;
}

.header__caption--top {
    width: 53.6rem;
    top: 8rem;
    left: 14.1rem;
}

.header__caption--bottom {
    width: 47.1rem;
    bottom: 8rem;
    right: 14.1rem;
}

.header__content {
    width: 52.6rem;
    height: 100%;
    padding-bottom: 4.1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    background: var(--white);
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    transform: translateX(-50%);
    position: absolute;
    left: 50%;
}

.header__text {
    font-size: 2.8rem;
    font-weight: 600;
    letter-spacing: 26.375px;
    writing-mode: vertical-lr;
}

.header__slogan {
    width: 44.2rem;
}

.header>.header__slogan {
    display: none;
}

.header__logo {
    display: inline-block;
    width: 29.4rem;
}

.header__top {
    width: 100%;
    padding: 1.8rem 1.2rem 2.6rem 1.2rem;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}

.header__image {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.header__image img {
    width: 37.5rem;
    height: 8.4rem;
    transform: scale(1.1, 1.2);
}

@media only screen and (min-width: 992px) {
    .header__caption--top {
        width: calc(536 * 100vw / 1920);
        top: calc(80 * 100vw / 1920);
        left: calc(141 * 100vw / 1920);
    }

    .header__caption--bottom {
        width: calc(471 * 100vw / 1920);
        bottom: calc(80 * 100vw / 1920);
        right: calc(141 * 100vw / 1920);
    }

    .header__content {
        width: calc(526 * 100vw / 1920);
        padding-bottom: calc(41 * 100vw / 1920);
    }

    .header__text {
        font-size: calc(28 * 100vw / 1920);
    }

    .header__slogan {
        width: calc(442 * 100vw / 1920);
    }

    .header__logo {
        width: calc(294 * 100vw / 1920);
    }
}

@media only screen and (max-width: 991px) {
    .header {
        height: auto;
        flex-direction: column;
        padding-top: calc(28 * 100vw / 375);
        overflow: hidden;
    }

    .header__content {
        text-align: center;
        width: 110%;
        padding: calc(10 * 100vw / 375);
        height: auto;
        clip-path: none;
        left: 50%;
        top: calc(399.88 * 100vw / 375);
        transform: rotate(-7.5deg) translateX(-50%);
    }

    .header__content .header__logo {
        display: none;
    }

    .header__text {
        font-size: calc(22 * 100vw / 375);
        letter-spacing: calc(14 * 100vw / 375);
        writing-mode: horizontal-tb;
    }

    .header__slogan {
        display: none;
    }

    .header>.header__slogan {
        font: bold normal normal calc(14 * 100vw / 375)/calc(24 / 14) var(--font-yu-gothic);
        color: var(--moss);
        text-align: right;
        width: 100%;
        padding-inline: calc(12 * 100vw / 375);
        padding-block: calc(21 * 100vw / 375) calc(15 * 100vw / 375);
        clip-path: polygon(0 calc(50 * 100vw / 375), 100% 0, 100% 100%, 0% 100%);
        background: var(--white);
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
    }

    .header__top,
    .header__image {
        display: block;
    }

    .header__image img {
        width: calc(375 * 100vw / 375);
        height: calc(84 * 100vw / 375);
    }

    .header__logo {
        width: calc(122 * 100vw / 375);
    }

    .header__caption--top {
        width: calc(256 * 100vw / 375);
        top: auto;
        right: auto;
        bottom: calc(105 * 100vw / 375);
        left: calc(12 * 100vw / 375);
    }

    .header__caption--bottom {
        width: calc(240 * 100vw / 375);
        right: calc(12 * 100vw / 375);
        bottom: calc(110 * 100vw / 375);
    }
}

/* Profile */

.profile {
    padding-block: 16.2rem 26.4rem;
    padding-inline: 25rem;
    background: var(--light-sandy);
    background-size: cover;
}

.profile__content {
    padding: 10rem 17rem;
    background: url('../img/lp/profile_background.png') no-repeat center;
    background-size: contain;
}

.profile__list {
    margin-top: 10rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.profile__item {
    width: 50%;
}

.profile__item:first-child .profile__top {
    padding-inline: 3rem 4rem;
}

.profile__item:last-child .profile__top {
    padding-inline: 4rem 3rem;
    margin-left: auto;
}

.profile__top h3 {
    font-size: 2.4rem;
    margin-block: 2rem;
}

.profile__top p {
    line-height: calc(30 / 16);
    letter-spacing: 1.5px;
}

.profile__btn {
    width: 100%;
    margin-top: 3rem;
}

.profile__btn::before {
    right: calc(50% - 14rem);
}

.profile__btn--left {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.profile__btn--right {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
}

@media only screen and (min-width: 992px) {
    .profile {
        padding-block: calc(162 * 100vw / 1920) calc(264 * 100vw / 1920);
        padding-inline: calc(250 * 100vw / 1920);
    }

    .profile__content {
        padding: calc(100 * 100vw / 1920) calc(170 * 100vw / 1920);
    }

    .profile__list {
        margin-top: calc(100 * 100vw / 1920);
    }

    .profile__item:first-child .profile__top {
        padding-inline: calc(30 * 100vw / 1920) calc(40 * 100vw / 1920);
    }

    .profile__item:last-child .profile__top {
        padding-inline: calc(40 * 100vw / 1920) calc(30 * 100vw / 1920);
    }

    .profile__top h3 {
        font-size: calc(24 * 100vw / 1920);
        margin-block: calc(20 * 100vw / 1920);
    }

    .profile__btn {
        margin-top: calc(30 * 100vw / 1920);
    }

    .profile__btn::before {
        right: calc(50% - calc(140 * 100vw / 1920));
    }
}

@media only screen and (max-width: 991px) {
    .profile {
        padding-inline: calc(12 * 100vw / 375);
        padding-block: calc(64 * 100vw / 375) calc(120 * 100vw / 375);
    }

    .profile__content {
        padding: 0;
        background: none;
    }

    .profile__list {
        flex-direction: column;
        margin-top: calc(40 * 100vw / 375);
    }

    .profile__item {
        width: 100%;
        padding: calc(40 * 100vw / 375) calc(38 * 100vw / 375);
        background: url('../img/lp/profile_background_sp.svg') no-repeat center;
        background-size: contain;
    }

    .profile__item~.profile__item {
        margin-top: calc(35 * 100vw / 375);
    }

    .profile__top {
        padding-inline: 0 !important;
    }

    .profile__top h3 {
        font-size: calc(18 * 100vw / 375);
        margin-block: calc(12 * 100vw / 375);
    }

    .profile__image {
        width: calc(230 * 100vw / 375);
        margin-inline: auto;
    }

    .profile__btn {
        width: calc(260 * 100vw / 375);
        margin-top: calc(16 * 100vw / 375);
        margin-inline: auto;
        display: block;
    }

    .profile__btn--left {
        border-top-right-radius: calc(35 * 100vw / 375);
        border-bottom-right-radius: calc(35 * 100vw / 375);
        border: 1px solid var(--dark-sandy);
    }

    .profile__btn--right {
        border-top-left-radius: calc(35 * 100vw / 375);
        border-bottom-left-radius: calc(35 * 100vw / 375);
        border-left: 1px solid var(--dark-sandy);
    }

    .profile__btn::before {
        right: calc(40 * 100vw / 375);
        transform: translate(0, -50%);
    }
}

/* Story */

.story {
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.story--first {
    padding-block: 22.5rem 53rem;
    top: -5.5rem;
}

.story--second {
    padding-block: 64rem 34rem;
    top: -59rem;
}

.story__background,
.story__background--sp {
    position: absolute;
}

.story__background--sp {
    display: none;
}

.story--first .story__background {
    top: 0;
    left: -2.05rem;
}

.story--first .story__background--sp {
    top: 0;
    left: -9rem;
}

.story--second .story__background {
    top: 14rem;
    left: -26.1rem;
}

.story--first .story__background img {
    width: 214.9rem;
    height: 555.8rem;
}

.story--first .story__background--sp img {
    width: 48.401rem;
    height: 371.9rem;
}

.story--second .story__background img {
    width: 228.8rem;
    height: 448.1rem;
}

.story__container {
    width: min(163.5rem, 100%);
    padding-top: 9rem;
    margin-inline: 14.3rem auto;
    position: relative;
    z-index: 1;
}

.story__title {
    padding-left: 14.5rem;
    display: flex;
    align-items: center;
}

.story__title .subtitle {
    margin-inline: 1rem 2rem;
}

.story__list {
    margin-top: 8.7rem;
}

.story__list--first,
.story__list--third {
    margin-bottom: 15rem;
}

.story__list--second,
.story__list--fourth {
    margin-top: 18rem;
}

.story__item {
    display: flex;
}

.story__item~.story__item {
    margin-top: 8rem;
}

.story__item:nth-child(2n) {
    flex-direction: row-reverse;
    justify-content: space-between;
    padding-right: 20rem;
}

.story__list .story__item {
    padding-left: 28rem;
}

.story__list--first .story__item:nth-child(1),
.story__list--fourth .story__item {
    align-items: center;
}

.story__list--first .story__item:nth-child(2) {
    align-items: flex-end;
}

.story__list--third .story__item:nth-child(4) {
    padding-left: 14rem;
}

.story__text {
    font-weight: 600;
    width: 58.1rem;
    margin-top: 7rem;
}

.story__text--sp {
    display: none;
}

.story__list--first .story__item:nth-child(3) .story__text {
    margin-top: 6rem;
}

.story__text p {
    line-height: 3;
    letter-spacing: 3.8px;
}

.story__text br {
    display: block;
    content: "";
    margin-top: 4rem;
}

.story__image {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.story__list--first .story__item:nth-child(1) .story__image {
    width: 63.4rem;
    height: 40rem;
    background-image: url('../img/lp/story01_img01.svg');
}

.story__list--first .story__item:nth-child(2) .story__image {
    width: 38.748rem;
    height: 25.198rem;
    background-image: url('../img/lp/story01_img02.svg');
}

.story__list--first .story__item:nth-child(3) .story__image {
    width: 50.1rem;
    height: 31.47rem;
    background-image: url('../img/lp/story01_img03.svg');
}

.story__list--first .story__item:nth-child(4) .story__image {
    width: 38.7rem;
    height: 38.7rem;
    background-image: url('../img/lp/story01_img04.svg');
}

.story__list--second .story__item:nth-child(1) .story__image:nth-child(2) {
    width: 15.4rem;
    height: 27rem;
    background-image: url('../img/lp/story01_img05.svg');
}

.story__list--second .story__item:nth-child(1) .story__image:nth-child(3) {
    width: 33.291rem;
    height: 19.085rem;
    margin-top: 20rem;
    margin-left: 2.5rem;
    background-image: url('../img/lp/story01_img06.svg');
}

.story__list--second .story__item:nth-child(2) .story__image {
    width: 50.1rem;
    height: 30.7rem;
    background-image: url('../img/lp/story01_img07.svg');
}

.story__list--second .story__item:nth-child(3) .story__image {
    width: 77.9rem;
    height: 45rem;
    background-image: url('../img/lp/story01_img08.svg');
}

.story__list--third .story__item:nth-child(1) .story__image {
    width: 64rem;
    height: 40rem;
    background-image: url('../img/lp/story02_img01.svg');
}

.story__list--third .story__item:nth-child(2) .story__image {
    width: 38.7rem;
    height: 38.7rem;
    background-image: url('../img/lp/story02_img02.svg');
}

.story__list--third .story__item:nth-child(3) .story__image {
    width: 50.1rem;
    height: 26.641rem;
    margin-top: 7rem;
    background-image: url('../img/lp/story02_img03.svg');
}

.story__list--third .story__item:nth-child(4) .story__image:nth-child(1) {
    width: 46.6rem;
    height: 29.4rem;
    background-image: url('../img/lp/story02_img04.svg');
}

.story__list--third .story__item:nth-child(4) .story__image:nth-child(2) {
    width: 22.1rem;
    height: 19.8rem;
    margin: 3.5rem 7.6rem 0 auto;
    background-image: url('../img/lp/story02_img05.svg');
}

.story__list--third .story__item:nth-child(5) .story__image {
    width: 50.1rem;
    height: 27rem;
    background-image: url('../img/lp/story02_img06.svg');
}

.story__list--fourth .story__item .story__image {
    width: 77.9rem;
    height: 45rem;
    margin-right: 7.6rem;
    background-image: url('../img/lp/story02_img07.svg');
}

.story__list--fourth .story__item {
    padding-left: 0;
}

.story__saying {
    margin-top: 15rem;
    display: inline-block;
    position: relative;
}

.story__saying::before,
.story__saying::after {
    content: '';
    position: absolute;
    width: 4rem;
    height: 4rem;
}

.story__saying::before {
    top: -3.5rem;
    left: -10rem;
    background: url('../img//lp/decoration_1.svg') no-repeat center center;
    background-size: contain;
}

.story__saying::after {
    bottom: -3.5rem;
    right: -10rem;
    background: url('../img//lp/decoration_2.svg') no-repeat center center;
    background-size: contain;
}

.story__saying p {
    font-size: 2.8rem;
    font-weight: 600;
    line-height: calc(64 / 28);
    letter-spacing: 10px;
}

.story__blur {
    width: 74.2rem;
    height: 74.2rem;
    transform: translate(-50%, -50%);
    filter: blur(5rem);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
}

@media only screen and (min-width: 992px) {
    .story--first {
        padding-block: calc(225 * 100vw / 1920) calc(530 * 100vw / 1920);
    }

    .story--second {
        padding-block: calc(640 * 100vw / 1920) calc(340 * 100vw / 1920);
        top: calc(-590 * 100vw / 1920);
    }

    .story--first .story__background {
        left: calc(-205 * 100vw / 1920);
    }

    .story--second .story__background {
        top: calc(140 * 100vw / 1920);
        left: calc(-261 * 100vw / 1920);
    }

    .story--first .story__background img {
        width: calc(2149 * 100vw / 1920);
        height: calc(5558 * 100vw / 1920);
    }

    .story--second .story__background img {
        width: calc(2288 * 100vw / 1920);
        height: calc(4481 * 100vw / 1920);
    }

    .story__container {
        width: min(calc(1635 * 100vw / 1920), calc(100% - calc(32 * 100vw / 1920)));
        margin-left: calc(143 * 100vw / 1920);
        padding-top: calc(90 * 100vw / 1920);
    }

    .story__title {
        padding-left: calc(145 * 100vw / 1920);
    }

    .story__title .subtitle {
        margin-inline: calc(10 * 100vw / 1920) calc(20 * 100vw / 1920);
    }

    .story__list {
        margin-top: calc(87 * 100vw / 1920);
    }

    .story__list--first,
    .story__list--third {
        margin-bottom: calc(150 * 100vw / 1920);
    }

    .story__list--second,
    .story__list--fourth {
        margin-top: calc(180 * 100vw / 1920);
    }

    .story__item~.story__item {
        margin-top: calc(80 * 100vw / 1920);
    }

    .story__item:nth-child(2n) {
        padding-right: calc(200 * 100vw / 1920);
    }

    .story__list .story__item {
        padding-left: calc(280 * 100vw / 1920);
    }

    .story__list--fourth .story__item {
        padding-left: 0;
    }

    .story__list--third .story__item:nth-child(4) {
        padding-left: calc(140 * 100vw / 1920);
    }

    .story__text {
        width: calc(581 * 100vw / 1920);
        margin-top: calc(70 * 100vw / 1920);
    }

    .story__list--first .story__item:nth-child(3) .story__text {
        margin-top: calc(60 * 100vw / 1920);
    }

    .story__text br {
        margin-top: calc(40 * 100vw / 1920);
    }

    .story__list--first .story__item:nth-child(1) .story__image {
        width: calc(634 * 100vw / 1920);
        height: calc(400 * 100vw / 1920);
    }

    .story__list--first .story__item:nth-child(2) .story__image {
        width: calc(387.48 * 100vw / 1920);
        height: calc(251.98 * 100vw / 1920);
    }

    .story__list--first .story__item:nth-child(3) .story__image {
        width: calc(501 * 100vw / 1920);
        height: calc(314.7 * 100vw / 1920);
    }

    .story__list--first .story__item:nth-child(4) .story__image {
        width: calc(387 * 100vw / 1920);
        height: calc(387 * 100vw / 1920);
    }

    .story__list--second .story__item:nth-child(1) .story__image:nth-child(2) {
        width: calc(154 * 100vw / 1920);
        height: calc(270 * 100vw / 1920);
    }

    .story__list--second .story__item:nth-child(1) .story__image:nth-child(3) {
        width: calc(332.91 * 100vw / 1920);
        height: calc(190.85 * 100vw / 1920);
        margin-top: calc(200 * 100vw / 1920);
        margin-left: calc(25 * 100vw / 1920);
    }

    .story__list--second .story__item:nth-child(2) .story__image {
        width: calc(501 * 100vw / 1920);
        height: calc(307 * 100vw / 1920);
    }

    .story__list--second .story__item:nth-child(3) .story__image {
        width: calc(779 * 100vw / 1920);
        height: calc(450 * 100vw / 1920);
    }

    .story__list--third .story__item:nth-child(1) .story__image {
        width: calc(640 * 100vw / 1920);
        height: calc(400 * 100vw / 1920);
    }

    .story__list--third .story__item:nth-child(2) .story__image {
        width: calc(387 * 100vw / 1920);
        height: calc(387 * 100vw / 1920);
    }

    .story__list--third .story__item:nth-child(3) .story__image {
        width: calc(501 * 100vw / 1920);
        height: calc(266.41 * 100vw / 1920);
        margin-top: calc(70 * 100vw / 1920);
    }

    .story__list--third .story__item:nth-child(4) .story__image:nth-child(1) {
        width: calc(466 * 100vw / 1920);
        height: calc(294 * 100vw / 1920);
    }

    .story__list--third .story__item:nth-child(4) .story__image:nth-child(2) {
        width: calc(221 * 100vw / 1920);
        height: calc(198 * 100vw / 1920);
        margin: calc(35 * 100vw / 1920) calc(76 * 100vw / 1920) 0 auto;
    }

    .story__list--third .story__item:nth-child(5) .story__image {
        width: calc(501 * 100vw / 1920);
        height: calc(270 * 100vw / 1920);
    }

    .story__list--fourth .story__item .story__image {
        width: calc(779 * 100vw / 1920);
        height: calc(450 * 100vw / 1920);
        margin-right: calc(76 * 100vw / 1920);
    }

    .story__saying {
        margin-top: calc(150 * 100vw / 1920);
    }

    .story__saying::before,
    .story__saying::after {
        width: calc(40 * 100vw / 1920);
        height: calc(40 * 100vw / 1920);
    }

    .story__saying::before {
        top: calc(-35 * 100vw / 1920);
        left: calc(-100 * 100vw / 1920);
    }

    .story__saying::after {
        bottom: calc(-35 * 100vw / 1920);
        right: calc(-100 * 100vw / 1920);
    }

    .story__saying p {
        font-size: calc(28 * 100vw / 1920);
    }

    .story__blur {
        width: calc(742 * 100vw / 1920);
        height: calc(742 * 100vw / 1920);
        filter: blur(calc(50 * 100vw / 1920));
    }
}

@media only screen and (max-width: 991px) {
    .story--first {
        padding-block: calc(10 * 100vw / 375) calc(128 * 100vw / 375);
    }

    .story--second {
        padding-block: 0 calc(150 * 100vw / 375);
        top: calc(-120 * 100vw / 375);
        z-index: 10;
    }

    .story .story__background {
        display: none;
    }

    .story--first .story__background--sp {
        left: calc(-87 * 100vw / 375);
        display: block;
    }

    .story--first .story__background--sp img {
        object-fit: fill;
        width: calc(478 * 100vw / 375);
        height: calc(3850 * 100vw / 375);
    }

    .story--second .story__background--sp {
        left: calc(-71 * 100vw / 375);
        display: block;
    }

    .story--second .story__background--sp img {
        object-fit: fill;
        width: calc(478 * 100vw / 375);
        height: calc(3520 * 100vw / 375);
    }

    .story .story__container {
        margin: 0;
    }

    .story--first .story__container {
        padding-top: calc(90 * 100vw / 375);
    }

    .story--second .story__container {
        padding-top: calc(195 * 100vw / 375);
    }

    .story__title,
    .story__list .story__item {
        padding-left: calc(32 * 100vw / 375);
    }

    .story__list--first,
    .story__list--third {
        margin-top: calc(40 * 100vw / 375);
        margin-bottom: calc(64 * 100vw / 375);
    }

    .story__list--second {
        margin-top: calc(116 * 100vw / 375);
    }

    .story__list--fourth {
        margin-top: calc(74 * 100vw / 375);
    }

    .story__title .subtitle {
        margin-inline: calc(10 * 100vw / 375);
    }

    .story__item {
        flex-direction: column-reverse !important;
        align-items: flex-start !important;
    }

    .story__item~.story__item {
        margin-top: calc(40 * 100vw / 375);
    }

    .story__item:nth-child(2n) {
        padding-right: 0;
    }

    .story__item:nth-child(2n + 1) .story__image {
        margin-left: auto;
    }

    .story__list--second .story__item:nth-child(3),
    .story__list--third .story__item:nth-child(2),
    .story__list--fourth .story__item {
        padding-left: 0
    }

    .story__list--second .story__item:nth-child(2) {
        flex-direction: column !important;
        margin-top: calc(24 * 100vw / 375);
    }

    .story__list--second .story__item:nth-child(3),
    .story__list--third .story__item:nth-child(5) {
        flex-direction: column !important;
        margin-top: calc(32 * 100vw / 375);
    }

    .story__list--third .story__item:nth-child(4) {
        padding-left: calc(32 * 100vw / 375);
    }

    .story__list--first .story__item:nth-child(1) .story__image {
        width: calc(255 * 100vw / 375);
        height: calc(160.88 * 100vw / 375);
    }

    .story__list--first .story__item:nth-child(2) .story__image {
        width: calc(172.5 * 100vw / 375);
        height: calc(114.69 * 100vw / 375);
    }

    .story__list--first .story__item:nth-child(3) .story__image {
        margin-right: calc(32 * 100vw / 375);
        width: calc(180 * 100vw / 375);
        height: calc(113.06 * 100vw / 375);
    }

    .story__list--first .story__item:nth-child(4) .story__image {
        width: calc(173 * 100vw / 375);
        height: calc(173 * 100vw / 375);
    }

    .story__list--second .story__item:nth-child(1) .story__image:nth-child(3) {
        width: calc(203.03 * 100vw / 375);
        height: calc(120 * 100vw / 375);
        margin-left: auto;
        margin-top: calc(-67 * 100vw / 375);
    }

    .story__list--second .story__item:nth-child(1) .story__image:nth-child(2) {
        width: calc(97 * 100vw / 375);
        height: calc(170 * 100vw / 375);
        margin-left: calc(30 * 100vw / 375);
        order: 1;
    }

    .story__list--second .story__item:nth-child(2) .story__image {
        width: calc(219 * 100vw / 375);
        height: calc(134 * 100vw / 375);
        margin-inline: auto calc(32 * 100vw / 375);
        margin-top: calc(32 * 100vw / 375);
    }

    .story__list--second .story__item:nth-child(3) .story__image {
        width: calc(375 * 100vw / 375);
        height: calc(214 * 100vw / 375);
        margin-top: calc(32 * 100vw / 375);
    }

    .story__list--third .story__item:nth-child(1) .story__image {
        width: calc(225 * 100vw / 375);
        height: calc(159.38 * 100vw / 375);
    }

    .story__list--third .story__item:nth-child(2) .story__image {
        width: calc(187 * 100vw / 375);
        height: calc(187 * 100vw / 375);
    }

    .story__list--third .story__item:nth-child(3) .story__image {
        width: calc(220.87 * 100vw / 375);
        height: calc(117.45 * 100vw / 375);
        margin-right: calc(32 * 100vw / 375);
        margin-top: 0;
    }

    .story__list--third .story__item:nth-child(4) .story__image:nth-child(1) {
        width: calc(229 * 100vw / 375);
        height: calc(145 * 100vw / 375);
    }

    .story__list--third .story__item:nth-child(4) .story__image:nth-child(2) {
        width: calc(108.79 * 100vw / 375);
        height: calc(97.47 * 100vw / 375);
        margin-inline: auto calc(32 * 100vw / 375);
        margin-top: calc(16 * 100vw / 375);
    }

    .story__list--third .story__item:nth-child(5) .story__image {
        width: calc(248.64 * 100vw / 375);
        height: calc(134 * 100vw / 375);
        margin-top: calc(40 * 100vw / 375);
    }

    .story__list--fourth .story__item .story__image {
        width: calc(375 * 100vw / 375);
        height: calc(217 * 100vw / 375);
        margin-top: calc(32 * 100vw / 375);
        margin-right: 0;
    }

    .story__list--third .story__item:nth-child(4) .flex-grow-1 {
        width: 100%;
    }

    .story__text {
        width: auto;
        margin-top: calc(40 * 100vw / 375) !important;
    }

    .story__list--first .story__item:nth-child(4) .story__text,
    .story__list--third .story__item:nth-child(2) .story__text,
    .story__list--third .story__item:nth-child(4) .story__text,
    .story__list--fourth .story__item .story__text {
        display: none;
    }

    .story__list--second .story__item:nth-child(2) .story__text,
    .story__list--second .story__item:nth-child(3) .story__text,
    .story__list--third .story__item:nth-child(5) .story__text,
    .story__list--fourth .story__item:nth-child(1) .story__text {
        margin-top: 0 !important;
    }

    .story__list--second .story__item:nth-child(3) .story__text {
        padding-inline: calc(32 * 100vw / 375);
    }

    .story__list--third .story__item:nth-child(2) .story__text {
        padding-left: calc(32 * 100vw / 375);
    }

    .story__list--fourth .story__item .story__text {
        padding-inline: calc(32 * 100vw / 375) calc(24 * 100vw / 375);
    }

    .story__text p {
        line-height: calc(30 / 14);
        letter-spacing: 1.2px;
    }

    .story__text--sp {
        display: block !important;
    }

    .story__text br {
        margin-top: calc(24 * 100vw / 375);
    }

    .story__saying {
        margin-top: calc(64 * 100vw / 375);
        width: 100%;
    }

    .story__saying::before {
        top: calc(-24 * 100vw / 375);
        left: calc(32 * 100vw / 375);
        background-image: url('../img/lp/decoration_sp_1.svg');
    }

    .story__saying::after {
        bottom: calc(-24 * 100vw / 375);
        right: calc(32 * 100vw / 375);
        background-image: url('../img/lp/decoration_sp_2.svg');
    }

    .story__saying::before,
    .story__saying::after {
        width: calc(20 * 100vw / 375);
        height: calc(20 * 100vw / 375);
    }

    .story__saying p {
        font-size: calc(16 * 100vw / 375);
        letter-spacing: 0.8px;
    }

    .story__blur {
        width: calc(336 * 100vw / 375);
        height: calc(336 * 100vw / 375);
        filter: blur(calc(50 * 100vw / 375));
    }

    .story__saying p span {
        display: block;
    }
}

/* Video */

.video {
    width: min(69.5rem, calc(100% - 6.4rem));
    margin-inline: auto;
    margin-top: 5rem;
    text-align: center;
}

.video__line {
    width: 0.2rem;
    height: 17.5rem;
    margin-inline: auto;
    background: var(--white);
}

.video__text {
    font-family: var(--font-arvo);
    font-size: 2.4rem;
    letter-spacing: 0.8px;
    margin-block: 4rem 2rem;
}

.video__box {
    height: 45.1rem;
    background: var(--moss);
    position: relative;
}

.video__box video {
    width: 100%;
    height: 100%;
}

.video__image {
    width: 100%;
    height: 100%;
    background: url('../img/lp/video_image.svg') no-repeat center center;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
}

.video__button {
    width: 9.4rem;
    height: 9.4rem;
    border-radius: 50%;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.video__button.show {
    display: flex;
}

.video__icon {
    margin-left: 1rem;
    border-top: 2.05rem solid transparent;
    border-bottom: 2.05rem solid transparent;
    border-left: 2.5rem solid #333;
}

.video__title {
    font-family: var(--font-yu-gothic);
    font-size: 2.8rem;
    line-height: calc(48 / 28);
    letter-spacing: 1.8px;
    margin-top: 2.4rem;
}

@media only screen and (min-width: 992px) {
    .video {
        width: min(calc(695 * 100vw / 1920), calc(100% - calc(32 * 100vw / 1920)));
        margin-top: 5rem;
    }

    .video__line {
        width: calc(2 * 100vw / 1920);
        height: calc(175 * 100vw / 1920);
    }

    .video__text {
        font-size: calc(24 * 100vw / 1920);
        margin-block: calc(40 * 100vw / 1920) calc(20 * 100vw / 1920);
    }

    .video__box {
        height: calc(451 * 100vw / 1920);
    }

    .video__button {
        width: calc(94 * 100vw / 1920);
        height: calc(94 * 100vw / 1920);
    }

    .video__icon {
        margin-left: calc(10 * 100vw / 1920);
        border-top: calc(20.5 * 100vw / 1920) solid transparent;
        border-bottom: calc(20.5 * 100vw / 1920) solid transparent;
        border-left: calc(25 * 100vw / 1920) solid #333;
    }

    .video__title {
        font-size: calc(28 * 100vw / 1920);
        margin-top: calc(24 * 100vw / 1920);
    }
}

@media only screen and (max-width: 991px) {
    .video {
        width: calc(100% - calc(64 * 100vw / 375));
    }

    .video__line {
        width: 1px;
        height: calc(100 * 100vw / 375);
    }

    .video__text {
        font-size: calc(16 * 100vw / 375);
        margin-block: calc(16 * 100vw / 375);
    }

    .video__box {
        height: calc(205 * 100vw / 375);
    }

    .video__button {
        width: calc(43 * 100vw / 375);
        height: calc(43 * 100vw / 375);
    }

    .video__icon {
        margin-left: calc(5 * 100vw / 375);
        border-top: calc(9.4 * 100vw / 375) solid transparent;
        border-bottom: calc(9.4 * 100vw / 375) solid transparent;
        border-left: calc(11.01 * 100vw / 375) solid #333;
    }

    .video__title {
        font-size: calc(16 * 100vw / 375);
        margin-top: calc(16 * 100vw / 375);
    }
}

/* About */

.about {
    color: var(--moss);
    padding-top: 18rem;
    margin-top: -89rem;
    position: relative;
    z-index: 1;
}

.about .title__secondary {
    position: relative;
    z-index: 1;
}

.about__top {
    padding-top: 17rem;
    position: relative;
}

.about__box {
    margin-top: 9.7rem;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.about__background {
    position: absolute;
    overflow: hidden;
}

.about__background--sp {
    display: none;
}

.about__background--first {
    top: 0;
    left: -2.9rem;
    width: calc(100% + 2.9rem);
}

.about__background--second {
    top: 3rem;
    left: 0;
    width: 100%;
}

.about__background img {
    width: auto;
}

.about__background--first img {
    height: 126.1rem;
}

.about__background--second img {
    height: 202.1rem;
}

.about__detail {
    width: 92rem;
    padding-top: 29rem;
    position: relative;
}

.about__detail::before {
    content: '';
    width: 30rem;
    height: 56.82rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    top: 0;
}

.about__detail:first-child:before {
    background-image: url('../img/lp/about__image_1.png');
    right: 6rem;
}

.about__detail:last-child:before {
    background-image: url('../img/lp/about__image_2.png');
    left: 6rem;
}

.about__content {
    padding-block: 6.4rem;
    background: var(--white);
    box-shadow: 4px 3px 10px rgba(0, 0, 0, 0.16);
}

.about__detail:first-child .about__content {
    padding-inline: 18rem 44rem;
}

.about__detail:last-child .about__content {
    padding-inline: 44rem 18rem;
}

.about__text {
    margin-bottom: 5rem;
}

.about__text p {
    font: bold normal normal 2.2rem/calc(36 / 22) var(--font-yu-gothic);
}

.about__container {
    width: min(112.5rem, 100%);
    margin-inline: auto;
    margin-top: 16rem;
    position: relative;
    z-index: 1;
}

.about__list {
    padding-bottom: 7rem;
    margin-bottom: 6rem;
    position: relative;
}

.about__item:not(:last-child) {
    display: flex;
    justify-content: space-between;
}

.about__item:nth-child(1) {
    justify-content: center;
    margin-bottom: -9rem;
}

.about__item:nth-child(3) {
    padding-inline: 19.8rem;
    margin-top: 13.2rem;
}

.about__item:nth-child(4) {
    color: var(--white);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.about__icon {
    width: 25rem;
    height: 25rem;
}

.about__line {
    content: '';
    width: 0.2rem;
    height: 28.2rem;
    background: var(--white);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.about__action {
    text-align: center;
    padding-block: 23rem 28rem;
    background: url('../img/lp/door.png') no-repeat center center;
    background-size: contain;
}

.about__title {
    font: bold normal normal 2.2rem/calc(36 / 22) var(--font-yu-gothic);
    margin-bottom: 8rem;
}

.about__link {
    height: 6.607rem;
}

.about__link~.about__link {
    margin-left: 2.5rem;
}

.about__link:first-child {
    width: 18rem;
}

.about__link:last-child {
    width: 22.3rem;
}

.about__action .btn {
    width: 37rem;
    margin-top: 8rem;
}

.about__action .btn::before {
    right: 2rem;
}

@media only screen and (min-width: 992px) {
    .about {
        margin-top: calc(-890 * 100vw / 1920);
        padding-top: calc(180 * 100vw / 1920);
    }

    .about__top {
        padding-top: calc(170 * 100vw / 1920);
    }

    .about__box {
        margin-top: calc(97 * 100vw / 1920);
    }

    .about__background--first {
        left: calc(-29 * 100vw / 1920);
        width: calc(100% + calc(29 * 100vw / 1920));
    }

    .about__background--second {
        top: calc(30 * 100vw / 1920);
    }

    .about__background--first img {
        height: calc(1261 * 100vw / 1920);
    }

    .about__background--second img {
        height: calc(2021 * 100vw / 1920);
    }

    .about__detail {
        width: calc(920 * 100vw / 1920);
        padding-top: calc(290 * 100vw / 1920);
    }

    .about__detail::before {
        width: calc(300 * 100vw / 1920);
        height: calc(568.2 * 100vw / 1920);
    }

    .about__detail:first-child:before {
        right: calc(60 * 100vw / 1920);
    }

    .about__detail:last-child:before {
        left: calc(60 * 100vw / 1920);
    }

    .about__content {
        padding-block: calc(64 * 100vw / 1920);
    }

    .about__detail:first-child .about__content {
        padding-inline: calc(180 * 100vw / 1920) calc(440 * 100vw / 1920);
    }

    .about__detail:last-child .about__content {
        padding-inline: calc(440 * 100vw / 1920) calc(180 * 100vw / 1920);
    }

    .about__text {
        margin-bottom: calc(50 * 100vw / 1920);
    }

    .about__text p {
        font-size: calc(22 * 100vw / 1920);
    }

    .about__container {
        width: min(calc(1125 * 100vw / 1920), 100%);
        margin-top: calc(160 * 100vw / 1920);
    }

    .about__list {
        padding-bottom: calc(70 * 100vw / 1920);
        margin-bottom: calc(60 * 100vw / 1920);
    }

    .about__item:nth-child(1) {
        margin-bottom: calc(-90 * 100vw / 1920);
    }

    .about__item:nth-child(3) {
        padding-inline: calc(198 * 100vw / 1920);
        margin-top: calc(132 * 100vw / 1920);
    }

    .about__icon {
        width: calc(250 * 100vw / 1920);
        height: calc(250 * 100vw / 1920);
    }

    .about__line {
        height: calc(282 * 100vw / 1920);
    }

    .about__action {
        padding-block: calc(230 * 100vw / 1920) calc(280 * 100vw / 1920);
    }

    .about__title {
        font-size: calc(22 * 100vw / 1920);
        margin-bottom: calc(80 * 100vw / 1920);
    }

    .about__link {
        height: calc(66.07 * 100vw / 1920);
    }

    .about__link~.about__link {
        margin-left: calc(25 * 100vw / 1920);
    }

    .about__link:first-child {
        width: calc(180 * 100vw / 1920);
    }

    .about__link:last-child {
        width: calc(223 * 100vw / 1920);
    }

    .about__action .btn {
        width: calc(370 * 100vw / 1920);
        margin-top: calc(80 * 100vw / 1920);
    }

    .about__action .btn::before {
        right: calc(20 * 100vw / 1920);
    }
}

@media only screen and (max-width: 991px) {
    .about {
        padding-top: calc(180 * 100vw / 375);
        margin-top: calc(-370 * 100vw / 375);
        z-index: 11;
    }

    .about__top {
        padding-top: calc(104 * 100vw / 375);
    }

    .about__top .title__secondary span {
        margin-inline: 0;
        max-width: calc(200 * 100vw / 375);
    }

    .about__container {
        padding-top: calc(30 * 100vw / 375);
        margin-top: calc(46 * 100vw / 375);
    }

    .about__background {
        display: none;
    }

    .about__background--sp {
        display: block;
    }

    .about__background--first.about__background--sp {
        left: calc(-15 * 100vw / 375);
        width: calc(100% + calc(15 * 100vw / 375));
    }

    .about__background--first.about__background--sp img {
        width: calc(407 * 100vw / 375);
        height: calc(1154.9 * 100vw / 375);
    }

    .about__background--second.about__background--sp {
        left: 0;
        width: 100%;
    }

    .about__background--second.about__background--sp img {
        width: calc(375 * 100vw / 375);
        height: calc(1118 * 100vw / 375);
    }

    .about__box {
        flex-direction: column;
        margin-top: calc(40 * 100vw / 375);
    }

    .about__detail {
        width: calc(325 * 100vw / 375);
        padding-top: calc(185 * 100vw / 375);
    }

    .about__detail::before {
        width: calc(132 * 100vw / 375);
        height: calc(250 * 100vw / 375);
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
    }

    .about__detail:last-child {
        margin-left: auto;
        margin-top: calc(32 * 100vw / 375);
    }

    .about__content {
        width: 100%;
        padding-inline: 0 !important;
        padding-block: calc(72 * 100vw / 375) calc(20 * 100vw / 375) !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .about__content .btn {
        width: calc(203 * 100vw / 375);
        padding-block: calc(6.5 * 100vw / 375);
    }

    .about__content .btn::before {
        right: calc(15 * 100vw / 375);
    }

    .about__text {
        margin-bottom: calc(14 * 100vw / 375);
    }

    .about__text p {
        font-size: calc(16 * 100vw / 375);
        line-height: calc(26 / 16);
    }

    .about__item:nth-child(1) {
        margin-bottom: calc(-45 * 100vw / 375);
    }

    .about__item:nth-child(2) {
        margin-inline: calc(-4 * 100vw / 375) calc(-8 * 100vw / 375);
    }

    .about__item:nth-child(3) {
        padding-inline: calc(24 * 100vw / 375) calc(20 * 100vw / 375);
        margin-top: calc(100 * 100vw / 375);
    }

    .about__item:nth-child(4) {
        width: 100%;
        top: 48%;
    }

    .about__icon {
        width: calc(128 * 100vw / 375);
        height: calc(128 * 100vw / 375);
    }

    .about__list {
        padding-bottom: calc(90 * 100vw / 375);
        margin-bottom: calc(40 * 100vw / 375);
        overflow: hidden;
    }

    .about__line {
        height: calc(190 * 100vw / 375);
    }

    .about__action {
        width: calc(345 * 100vw / 375);
        margin-inline: auto;
        padding-block: calc(55 * 100vw / 375) calc(72 * 100vw / 375);
        background-image: url('../img/lp/door_sp.png');
        background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .about__title {
        font-size: calc(16 * 100vw / 375);
        line-height: calc(28 / 16);
        letter-spacing: 0.8px;
        margin-bottom: calc(32 * 100vw / 375);
    }

    .about__title span {
        display: block;
    }

    .about__action .btn {
        margin-top: calc(32 * 100vw / 375);
        width: calc(220 * 100vw / 375);
    }

    .about__link {
        height: calc(40 * 100vw / 375);
    }

    .about__link~.about__link {
        margin-left: calc(8 * 100vw / 375);
    }

    .about__link:first-child {
        width: calc(108.85 * 100vw / 375);
    }

    .about__link:last-child {
        width: calc(135 * 100vw / 375);
    }
}

/* Scroll button */

.scroll-btn {
    width: 8.6rem;
    height: 8.6rem;
    background: url('../img/lp/top_btn.svg') no-repeat center center;
    background-size: cover;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    position: fixed;
    bottom: 7.7rem;
    left: calc(100% - 38rem);
    z-index: 99;
}

.scroll-btn:hover {
    background-image: url('../img/lp/top_btn_sandy.svg');
}

.scroll-btn.show {
    opacity: 1;
    visibility: visible;
}

@media only screen and (min-width: 992px) {
    .scroll-btn {
        width: calc(86 * 100vw / 1920);
        height: calc(86 * 100vw / 1920);
        bottom: calc(77 * 100vw / 1920);
        left: calc(100vw - calc(380 * 100vw / 1920));
    }
}

@media only screen and (max-width: 991px) {
    .scroll-btn {
        width: calc(48 * 100vw / 375);
        height: calc(48 * 100vw / 375);
        left: auto;
        right: calc(32 * 100vw / 375);
        bottom: calc(148 * 100vw / 375);
    }
}

/* Footer */

.footer {
    font-family: var(--font-yu-gothic);
    color: var(--white);
    text-align: center;
    margin-top: 9rem;
    position: relative;
    z-index: 1;
}

.footer__logo {
    display: inline-block;
    width: 17.077rem;
}

.footer__list {
    width: min(112.5rem, calc(100% - 3.2rem));
    margin: 2.4rem auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.footer__item~.footer__item {
    margin-left: 2.9rem;
}

.footer__link {
    font-size: 1.4rem;
    line-height: calc(24 / 14);
    transition: all 0.2s ease-in-out;
}

.footer__link:hover {
    opacity: 0.7;
}

.footer__copyright {
    font-size: 1.2rem;
    line-height: calc(26 / 12);
}

@media only screen and (min-width: 992px) {
    .footer {
        margin-top: calc(90 * 100vw / 1920);
    }

    .footer__logo {
        width: calc(170.77 * 100vw / 1920);
    }

    .footer__list {
        width: min(calc(1125 * 100vw / 1920), calc(100% - calc(32 * 100vw / 1920)));
        margin: calc(24 * 100vw / 1920) auto;
    }

    .footer__item~.footer__item {
        margin-left: calc(29 * 100vw / 1920);
    }

    .footer__link {
        font-size: calc(14 * 100vw / 1920);
    }

    .footer__copyright {
        font-size: calc(12 * 100vw / 1920);
    }
}

@media only screen and (max-width: 991px) {
    .footer {
        margin-top: 0;
        top: calc(55 * 100vw / 375);
        z-index: 12;
    }

    .footer__logo {
        width: calc(170.77 * 100vw / 375);
    }

    .footer__link {
        font-size: calc(14 * 100vw / 375);
    }

    .footer__link:hover {
        opacity: 1;
    }

    .footer__copyright {
        font-size: calc(12 * 100vw / 375);
    }
}