/* ========================================
   COMMON HEADER
   Fixed Header
======================================== */

.site-header {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    background-color: rgba(255, 255, 255, 0.96);
}

.site-header__inner {
    width: 100%;
    height: 100px;
    padding: 0 5vw;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* BRAND
---------------------------------------- */

.site-header__brand {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;

    color: #111111;
    text-decoration: none;
    line-height: 1;
}

.site-header__logo {
    font-family: "Times New Roman", "Yu Mincho", "YuMincho", serif;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.08em;
}

.site-header__tagline {
    margin-top: 8px;

    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 8px;
    font-weight: 400;
    letter-spacing: 0.22em;
}


/* ========================================
   GLOBAL NAVIGATION
======================================== */

.global-nav {
    display: flex;
    align-items: center;
    gap: 42px;
}

.global-nav__list {
    display: flex;
    align-items: center;
    gap: 32px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.global-nav__link {
    position: relative;

    display: block;

    padding: 10px 0;

    color: #111111;
    text-decoration: none;

    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.12em;

    transition: opacity 0.3s ease;
}

.global-nav__link:hover {
    opacity: 0.55;
}


/* NAVIGATION UNDERLINE */

.global-nav__link::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 3px;

    width: 0;
    height: 1px;

    background-color: #111111;

    transition: width 0.3s ease;
}

.global-nav__link:hover::after {
    width: 100%;
}


/* ========================================
   MY STORY BUTTON
======================================== */

.my-story-button {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 126px;
    height: 42px;

    padding: 0 24px;

    background-color: #111111;
    border: 1px solid #111111;

    color: #ffffff;
    text-decoration: none;

    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.16em;

    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

.my-story-button:hover {
    background-color: #ffffff;
    color: #111111;
}


/* ========================================
   HAMBURGER
======================================== */

.hamburger {
    display: none;

    position: relative;
    z-index: 1100;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 0;
    background: transparent;

    cursor: pointer;
}

.hamburger__line {
    position: absolute;
    left: 8px;

    width: 26px;
    height: 1px;

    background-color: #111111;

    transition:
        transform 0.35s ease,
        top 0.35s ease,
        opacity 0.25s ease;
}

.hamburger__line:nth-child(1) {
    top: 13px;
}

.hamburger__line:nth-child(2) {
    top: 21px;
}

.hamburger__line:nth-child(3) {
    top: 29px;
}


/* HAMBURGER OPEN */

.hamburger.is-active .hamburger__line:nth-child(1) {
    top: 21px;
    transform: rotate(45deg);
}

.hamburger.is-active .hamburger__line:nth-child(2) {
    opacity: 0;
}

.hamburger.is-active .hamburger__line:nth-child(3) {
    top: 21px;
    transform: rotate(-45deg);
}


/* ========================================
   MOBILE MENU
======================================== */

.mobile-menu {
    position: fixed;
    inset: 0;

    z-index: 1050;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: rgba(255, 255, 255, 0.98);

    visibility: hidden;
    opacity: 0;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}

.mobile-menu.is-open {
    visibility: visible;
    opacity: 1;
}

.mobile-menu__nav {
    width: min(80%, 480px);
    text-align: center;
}

.mobile-menu__list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.mobile-menu__item {
    margin-bottom: 22px;
}

.mobile-menu__link {
    display: inline-block;

    color: #111111;
    text-decoration: none;

    font-family: "Times New Roman", "Yu Mincho", "YuMincho", serif;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.1em;

    transition: opacity 0.3s ease;
}

.mobile-menu__link:hover {
    opacity: 0.5;
}


/* MOBILE MY STORY */

.mobile-menu__story {
    margin-top: 46px;
}

.mobile-menu__story-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;

    width: 220px;
    height: 54px;

    background-color: #111111;

    color: #ffffff;
    text-decoration: none;

    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 11px;
    letter-spacing: 0.16em;
}


/* ========================================
   TABLET
======================================== */

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

    .site-header__inner {
        height: 88px;
        padding: 0 32px;
    }

    .global-nav {
        display: none;
    }

    .hamburger {
        display: block;
    }

}


/* ========================================
   SMARTPHONE
======================================== */

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

    .site-header__inner {
        height: 76px;
        padding: 0 20px;
    }

    .site-header__logo {
        font-size: 19px;
    }

    .site-header__tagline {
        margin-top: 6px;
        font-size: 6px;
    }

    .mobile-menu__link {
        font-size: 21px;
    }

    .mobile-menu__item {
        margin-bottom: 18px;
    }

}


/* ========================================
   COMMON FOOTER
======================================== */

.site-footer {
    width: 100%;
    padding: 100px 5vw 32px;

    /* 追加 */
    box-sizing: border-box;


    background-color: #111111;
    color: #ffffff;
}


/* ========================================
   FOOTER MAIN
======================================== */

.site-footer__main {
    width: 100%;
    max-width: 1600px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.5fr 1fr 1.2fr;
    gap: 80px;
}


/* ========================================
   FOOTER BRAND
======================================== */

.site-footer__brand-link {
    display: inline-flex;
    flex-direction: column;

    color: #ffffff;
    text-decoration: none;
}

.site-footer__logo {
    font-family:
        "Times New Roman",
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 26px;
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1;
}

.site-footer__tagline {
    margin-top: 9px;

    font-family:
        Arial,
        "Helvetica Neue",
        sans-serif;

    font-size: 8px;
    font-weight: 400;
    letter-spacing: 0.22em;
}

.site-footer__message {
    margin-top: 50px;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 16px;
    font-weight: 400;
    line-height: 2;
    letter-spacing: 0.08em;

    color: rgba(255, 255, 255, 0.75);
}


/* ========================================
   FOOTER NAVIGATION
======================================== */

.footer-nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
}

.footer-nav__list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.footer-nav__item {
    margin-bottom: 22px;
}

.footer-nav__link {
    position: relative;

    display: inline-block;

    padding-bottom: 4px;

    color: #ffffff;
    text-decoration: none;

    font-family:
        Arial,
        "Helvetica Neue",
        sans-serif;

    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.16em;

    transition: opacity 0.3s ease;
}

.footer-nav__link:hover {
    opacity: 0.55;
}


/* UNDERLINE */

.footer-nav__link::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 0;
    height: 1px;

    background-color: #ffffff;

    transition: width 0.3s ease;
}

.footer-nav__link:hover::after {
    width: 100%;
}


/* ========================================
   FOOTER CONTACT
======================================== */

.site-footer__contact {
    padding-left: 60px;

    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.site-footer__contact-label {
    margin: 0 0 28px;

    font-family:
        "Times New Roman",
        serif;

    font-size: 14px;
    letter-spacing: 0.15em;
}

.site-footer__contact-text {
    margin: 0 0 32px;

    color: rgba(255, 255, 255, 0.7);

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 13px;
    line-height: 2;
    letter-spacing: 0.06em;
}


/* CONTACT BUTTON */

.site-footer__contact-button {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    max-width: 300px;
    height: 54px;

    padding: 0 22px;

    /* ★ここを追加 */
    box-sizing: border-box;

    border: 1px solid rgba(255, 255, 255, 0.55);

    color: #ffffff;
    text-decoration: none;

    font-family:
        Arial,
        "Helvetica Neue",
        sans-serif;

    font-size: 10px;
    letter-spacing: 0.18em;

    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

.site-footer__contact-button:hover {
    background-color: #ffffff;
    color: #111111;
}

.site-footer__contact-arrow {
    font-size: 16px;
}


/* ========================================
   FOOTER BOTTOM
======================================== */

.site-footer__bottom {
    width: 100%;
    max-width: 1600px;

    margin: 90px auto 0;
    padding-top: 28px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.site-footer__copyright {
    margin: 0;

    color: rgba(255, 255, 255, 0.5);

    font-family:
        Arial,
        "Helvetica Neue",
        sans-serif;

    font-size: 9px;
    letter-spacing: 0.12em;
}


/* BACK TO TOP */

.site-footer__pagetop {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;

    font-family:
        Arial,
        "Helvetica Neue",
        sans-serif;

    font-size: 9px;
    letter-spacing: 0.14em;

    transition: color 0.3s ease;
}

.site-footer__pagetop:hover {
    color: #ffffff;
}


/* ========================================
   FOOTER TABLET
======================================== */

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

    .site-footer {
        padding:
            80px 40px 30px;
    }

    .site-footer__main {
        grid-template-columns:
            1fr 1fr;

        gap: 70px 50px;
    }

    .site-footer__contact {
        grid-column:
            1 / -1;

        padding-top: 50px;
        padding-left: 0;

        border-top:
            1px solid rgba(255, 255, 255, 0.2);

        border-left: 0;
    }

    .site-footer__contact-button {
        max-width: 340px;
    }

}


/* ========================================
   FOOTER SMARTPHONE
======================================== */

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

    .site-footer {
        padding:
            70px 20px 26px;
    }

    .site-footer__main {
        display: block;
    }


    /* BRAND */

    .site-footer__logo {
        font-size: 22px;
    }

    .site-footer__message {
        margin-top: 36px;

        font-size: 14px;
        line-height: 2;
    }


    /* NAVIGATION */

    .footer-nav {
        margin-top: 55px;

        grid-template-columns:
            repeat(2, 1fr);

        gap: 30px;
    }

    .footer-nav__item {
        margin-bottom: 20px;
    }


    /* CONTACT */

    .site-footer__contact {
        margin-top: 45px;
        padding-top: 45px;
        padding-left: 0;

        border-top:
            1px solid rgba(255, 255, 255, 0.2);

        border-left: 0;
    }

    .site-footer__contact-text {
        font-size: 12px;
    }

    .site-footer__contact-button {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }


    /* BOTTOM */

    .site-footer__bottom {
        margin-top: 60px;
        padding-top: 24px;

        flex-direction: column-reverse;
        align-items: flex-start;

        gap: 28px;
    }

}


/* ========================================
   TOP PAGE
======================================== */

.top-page {
    margin: 0;

    background-color: #ffffff;
    color: #111111;
}


/* ========================================
   TOP COMMON
======================================== */

.top-section-label {
    margin: 0 0 18px;

    font-family:
        Arial,
        "Helvetica Neue",
        sans-serif;

    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.22em;

    color: #555555;
}

.top-section-label--white {
    color: rgba(255, 255, 255, 0.8);
}


.top-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    min-width: 210px;
    height: 52px;

    padding: 0 22px;

    border: 1px solid #777777;

    color: #111111;
    text-decoration: none;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 11px;
    letter-spacing: 0.08em;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

.top-button:hover {
    background-color: #111111;
    border-color: #111111;

    color: #ffffff;
}


/* ========================================
   01 HERO
======================================== */

.top-hero {
    position: relative;

    width: 100%;
    height: calc(100vh - 100px);
    min-height: 650px;

    overflow: hidden;

    color: #ffffff;
}


.top-hero__image {
    position: absolute;
    inset: 0;
}


.top-hero__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}


.top-hero__overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.05) 0%,
            rgba(0, 0, 0, 0.02) 40%,
            rgba(0, 0, 0, 0.28) 100%);
}


/* HERO CONTENT */

.top-hero__content {
    position: absolute;

    top: 50%;
    right: 7vw;

    z-index: 2;

    width: min(47vw, 720px);

    transform: translateY(-50%);

    text-align: center;
}


.top-hero__catch {
    margin: 0 0 22px;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 13px;
    letter-spacing: 0.2em;
}


.top-hero__title {
    margin: 0;

    font-family:
        "Times New Roman",
        serif;

    font-size: clamp(45px, 5.5vw, 82px);
    font-weight: 400;
    line-height: 1;

    letter-spacing: 0.08em;
}


.top-hero__subtitle {
    margin: 18px 0 0;

    font-family:
        "Times New Roman",
        serif;

    font-size: 18px;
    letter-spacing: 0.14em;
}


.top-hero__message {
    margin: 38px 0 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 13px;
    line-height: 2;

    letter-spacing: 0.08em;
}


/* HERO PLAY */

.top-hero__play {
    margin: 32px auto 0;

    display: inline-flex;
    align-items: center;

    gap: 16px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #ffffff;

    cursor: pointer;
}


.top-hero__play-icon {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding-left: 3px;

    border:
        1px solid rgba(255, 255, 255, 0.8);

    border-radius: 50%;

    font-size: 10px;

    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}


.top-hero__play-text {
    font-family:
        "Times New Roman",
        serif;

    font-size: 11px;

    letter-spacing: 0.12em;
}


.top-hero__play:hover .top-hero__play-icon {
    background-color: #ffffff;

    color: #111111;
}


/* SCROLL */

.top-hero__scroll {
    position: absolute;

    left: 4vw;
    bottom: 0;

    z-index: 2;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 12px;

    font-family:
        Arial,
        sans-serif;

    font-size: 7px;

    letter-spacing: 0.22em;

    writing-mode: vertical-rl;
}


.top-hero__scroll-line {
    width: 1px;
    height: 60px;

    display: block;

    background-color:
        rgba(255, 255, 255, 0.7);
}


/* ========================================
   02 CONCEPT
======================================== */

.top-concept {
    width: 100%;

    display: grid;

    grid-template-columns:
        60% 40%;

    background-color: #ffffff;
}


.top-concept__image {
    min-height: 500px;

    overflow: hidden;
}


.top-concept__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.top-concept__content {
    display: flex;
    flex-direction: column;

    justify-content: center;

    padding:
        70px clamp(40px, 6vw, 110px);
}


.top-concept__title {
    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size:
        clamp(26px, 2.7vw, 42px);

    font-weight: 400;

    line-height: 1.65;

    letter-spacing: 0.08em;


    width: max-content;

    max-width: none;

}


.top-concept__text {
    margin: 32px 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 12px;

    line-height: 2;

    letter-spacing: 0.06em;

    color: #555555;
}


/* ========================================
   03 FEATURED STORY
======================================== */

.top-story {
    padding:
        90px 5vw 110px;

    background-color: #ffffff;
}


.top-story__heading {
    max-width: 1500px;

    margin: 0 auto 40px;

    display: flex;

    align-items: flex-end;
    justify-content: space-between;
}


.top-story__heading-title {
    margin: 0;

    font-family:
        "Times New Roman",
        serif;

    font-size:
        clamp(34px, 4vw, 58px);

    font-weight: 400;

    line-height: 1;

    letter-spacing: 0.1em;
}


.top-story__heading-text {
    margin: 12px 0 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 12px;

    letter-spacing: 0.08em;
}


.top-story__all {
    display: inline-flex;

    gap: 20px;

    padding-bottom: 8px;

    border-bottom:
        1px solid #777777;

    color: #111111;

    text-decoration: none;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 10px;

    letter-spacing: 0.08em;
}


/* FEATURE */

.top-story__feature {
    max-width: 1500px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        26% 43% 31%;

    border:
        1px solid #dddddd;
}


.top-story__content {
    padding:
        clamp(30px, 4vw, 65px);

    display: flex;
    flex-direction: column;

    justify-content: center;
}


.top-story__number {
    margin: 0 0 16px;

    font-family:
        "Times New Roman",
        serif;

    font-size: 11px;

    letter-spacing: 0.12em;
}


.top-story__title {
    margin: 0;

    font-family:
        "Times New Roman",
        serif;

    font-size:
        clamp(28px, 3vw, 46px);

    font-weight: 400;

    letter-spacing: 0.08em;
}


.top-story__line {
    width: 32px;
    height: 1px;

    margin: 20px 0;

    background-color: #111111;
}


.top-story__lead {
    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 15px;

    letter-spacing: 0.08em;
}


.top-story__text {
    margin: 30px 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 11px;

    line-height: 2;

    letter-spacing: 0.06em;

    color: #555555;
}


/* STORY MAIN */

.top-story__main-image {
    overflow: hidden;
}


.top-story__main-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.8s ease;
}


.top-story__feature:hover .top-story__main-image img {
    transform: scale(1.02);
}


/* STORY GALLERY */

.top-story__gallery {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    grid-template-rows:
        repeat(2, 1fr);
}


.top-story__sub-image {
    margin: 0;

    overflow: hidden;
}


.top-story__sub-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* ========================================
   04 PLAN
======================================== */

.top-plan {
    background-color: #f6f3ee;
}


.top-plan__heading {
    padding:
        110px 20px 70px;

    text-align: center;
}


.top-plan__heading-title {
    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size:
        clamp(28px, 3vw, 45px);

    font-weight: 400;

    line-height: 1.7;

    letter-spacing: 0.08em;
}


/* PHOTO + FILM */

.top-plan__primary {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);
}


.top-plan-card {
    position: relative;

    min-height: 520px;

    overflow: hidden;

    color: #ffffff;

    text-decoration: none;
}


.top-plan-card__image,
.top-plan-card__overlay {
    position: absolute;

    inset: 0;
}


.top-plan-card__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.8s ease;
}


.top-plan-card__overlay {
    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.48),
            rgba(0, 0, 0, 0.05));
}


.top-plan-card__content {
    position: absolute;

    left: 7vw;
    top: 50%;

    z-index: 2;

    transform:
        translateY(-50%);
}


.top-plan-card__title {
    margin: 0;

    font-family:
        "Times New Roman",
        serif;

    font-size:
        clamp(34px, 4vw, 58px);

    font-weight: 400;

    letter-spacing: 0.08em;
}


.top-plan-card__catch {
    margin: 12px 0 25px;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 15px;

    letter-spacing: 0.08em;
}


.top-plan-card__text {
    margin: 0 0 30px;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 12px;

    line-height: 2;
}


.top-plan-card__button {
    width: 190px;
    height: 48px;

    padding: 0 18px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border:
        1px solid rgba(255, 255, 255, 0.8);

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 10px;
}


.top-plan-card:hover .top-plan-card__image img {
    transform: scale(1.03);
}


/* PHOTO & FILM */

.top-plan-combination {
    position: relative;

    min-height: 380px;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    color: #ffffff;

    text-align: center;
    text-decoration: none;
}


.top-plan-combination__image,
.top-plan-combination__overlay {
    position: absolute;

    inset: 0;
}


.top-plan-combination__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.8s ease;
}


.top-plan-combination__overlay {
    background:
        rgba(0, 0, 0, 0.3);
}


.top-plan-combination__content {
    position: relative;

    z-index: 2;
}


.top-plan-combination__title {
    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size:
        clamp(27px, 3vw, 44px);

    font-weight: 400;

    line-height: 1.7;

    letter-spacing: 0.08em;
}


.top-plan-combination__button {
    width: 240px;
    height: 50px;

    margin: 32px auto 0;

    padding: 0 20px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border:
        1px solid rgba(255, 255, 255, 0.8);

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 10px;
}


.top-plan-combination:hover .top-plan-combination__image img {
    transform: scale(1.02);
}


/* PLAN MORE */

.top-plan__more {
    padding: 60px 20px 100px;

    text-align: center;
}


/* ========================================
   05 CONTACT CTA
======================================== */

.top-contact {
    position: relative;

    min-height: 600px;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    color: #ffffff;

    text-align: center;
}


.top-contact__image,
.top-contact__overlay {
    position: absolute;

    inset: 0;
}


.top-contact__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.top-contact__overlay {
    background:
        rgba(0, 0, 0, 0.28);
}


.top-contact__content {
    position: relative;

    z-index: 2;

    padding: 80px 20px;
}


.top-contact__label {
    margin: 0 0 20px;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: 0.25em;
}


.top-contact__title {
    margin: 0;

    font-family:
        "Times New Roman",
        serif;

    font-size:
        clamp(42px, 6vw, 82px);

    font-weight: 400;

    line-height: 1.15;

    letter-spacing: 0.1em;
}


.top-contact__text {
    margin: 30px 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 14px;

    line-height: 2;

    letter-spacing: 0.08em;
}


.top-contact__button {
    width: 260px;
    height: 54px;

    margin: 0 auto;

    padding: 0 22px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border:
        1px solid rgba(255, 255, 255, 0.9);

    color: #ffffff;

    text-decoration: none;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 11px;

    letter-spacing: 0.08em;

    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}


.top-contact__button:hover {
    background-color: #ffffff;

    color: #111111;
}


/* ========================================
   HERO FILM MODAL
======================================== */

.film-modal {
    position: fixed;

    inset: 0;

    z-index: 5000;

    display: flex;

    align-items: center;
    justify-content: center;

    visibility: hidden;

    opacity: 0;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}


.film-modal.is-open {
    visibility: visible;

    opacity: 1;
}


.film-modal__backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(0, 0, 0, 0.95);
}


.film-modal__inner {
    position: relative;

    z-index: 1;

    width:
        min(90vw, 1400px);
}


.film-modal__movie video {
    width: 100%;

    max-height: 82vh;

    display: block;

    background-color: #000000;
}


.film-modal__close {
    position: absolute;

    top: -55px;
    right: 0;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;
}


.film-modal__close span {
    position: absolute;

    top: 20px;
    left: 7px;

    width: 28px;
    height: 1px;

    background-color: #ffffff;
}


.film-modal__close span:first-child {
    transform: rotate(45deg);
}


.film-modal__close span:last-child {
    transform: rotate(-45deg);
}


/* ========================================
   TOP TABLET
======================================== */

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

    .top-hero {
        height:
            calc(100vh - 88px);
    }


    .top-hero__content {
        right: 5vw;

        width: 55vw;
    }


    .top-concept {
        grid-template-columns:
            55% 45%;
    }


    .top-story__feature {
        grid-template-columns:
            34% 66%;
    }


    .top-story__gallery {
        grid-column: 1 / -1;

        min-height: 380px;
    }

}


/* ========================================
   TOP SMARTPHONE
======================================== */

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

    /* HERO */

    .top-hero {
        height:
            calc(100svh - 76px);

        min-height: 650px;
    }


    .top-hero__image img {
        object-position: center;
    }


    .top-hero__overlay {
        background:
            linear-gradient(0deg,
                rgba(0, 0, 0, 0.55),
                rgba(0, 0, 0, 0.05));
    }


    .top-hero__content {
        top: auto;

        left: 22px;
        right: 22px;
        bottom: 70px;

        width: auto;

        transform: none;
    }


    .top-hero__catch {
        font-size: 10px;
    }


    .top-hero__title {
        font-size: 37px;
    }


    .top-hero__subtitle {
        font-size: 14px;
    }


    .top-hero__message {
        margin-top: 25px;

        font-size: 11px;
    }


    .top-hero__play {
        margin-top: 24px;
    }


    .top-hero__scroll {
        display: none;
    }


    /* CONCEPT */

    .top-concept {
        display: block;
    }


    .top-concept__image {
        min-height: 0;

        height: 390px;
    }


    .top-concept__content {
        padding:
            70px 24px 85px;
    }


    .top-concept__title {
        font-size: 27px;
    }


    /* STORY */

    .top-story {
        padding:
            80px 20px 90px;
    }


    .top-story__heading {
        display: block;

        margin-bottom: 35px;
    }


    .top-story__all {
        margin-top: 30px;
    }


    .top-story__feature {
        display: block;
    }


    .top-story__content {
        padding: 35px 25px;
    }


    .top-story__main-image {
        height: 470px;
    }


    .top-story__gallery {
        min-height: 0;
    }


    .top-story__sub-image {
        aspect-ratio: 1 / 1;
    }


    /* PLAN */

    .top-plan__heading {
        padding:
            85px 24px 60px;
    }


    .top-plan__primary {
        display: block;
    }


    .top-plan-card {
        display: block;

        min-height: 480px;
    }


    .top-plan-card__content {
        left: 28px;
    }


    .top-plan-combination {
        min-height: 430px;
    }


    .top-plan-combination__content {
        padding: 40px 24px;
    }


    /* CONTACT */

    .top-contact {
        min-height: 580px;
    }


    .top-contact__title {
        font-size: 43px;
    }


    /* MOVIE */

    .film-modal__inner {
        width: 94vw;
    }

}


/* ========================================
   CONCEPT PAGE
======================================== */

.concept-page {
    margin: 0;

    background-color: #ffffff;
    color: #111111;
}


/* ========================================
   CONCEPT COMMON
======================================== */

.concept-section-number {
    display: flex;
    align-items: center;

    gap: 22px;

    margin-bottom: 26px;

    font-family:
        "Times New Roman",
        serif;

    font-size: 10px;
    letter-spacing: 0.18em;

    color: #444444;
}


.concept-section-number--white {
    color: rgba(255, 255, 255, 0.85);
}


/* ========================================
   01 HERO
======================================== */

.concept-hero {
    position: relative;

    width: 100%;
    height: 680px;

    overflow: hidden;

    color: #ffffff;
}


.concept-hero__image,
.concept-hero__overlay {
    position: absolute;
    inset: 0;
}


.concept-hero__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}


.concept-hero__overlay {
    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.38) 0%,
            rgba(0, 0, 0, 0.12) 52%,
            rgba(0, 0, 0, 0.03) 100%);
}


.concept-hero__content {
    position: absolute;

    left: 7vw;
    top: 50%;

    z-index: 2;

    transform: translateY(-50%);
}


.concept-hero__label {
    margin: 0 0 25px;

    font-family:
        "Times New Roman",
        serif;

    font-size: 11px;

    letter-spacing: 0.22em;
}


.concept-hero__title {
    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size:
        clamp(34px, 4vw, 50px);

    font-weight: 400;

    line-height: 1.65;

    letter-spacing: 0.08em;

    width: max-content;
    max-width: none;

}


.concept-hero__text {
    margin: 35px 0 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 13px;

    line-height: 2;

    letter-spacing: 0.08em;
}


/* ========================================
   02 OUR STORY
======================================== */

.concept-story {
    display: grid;

    grid-template-columns:
        43% 57%;

    min-height: 560px;

    background-color: #ffffff;
}


.concept-story__content {
    display: flex;
    flex-direction: column;

    justify-content: center;

    padding:
        80px clamp(45px, 7vw, 130px);
}


.concept-story__title {
    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size:
        clamp(28px, 3vw, 44px);

    font-weight: 400;

    line-height: 1.7;

    letter-spacing: 0.08em;
}


.concept-story__text {
    margin-top: 35px;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 13px;

    line-height: 2;

    letter-spacing: 0.06em;

    color: #444444;
}


.concept-story__text p {
    margin: 0 0 18px;
}


.concept-story__image {
    overflow: hidden;
}


.concept-story__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* ========================================
   03 WHAT WE LEAVE
======================================== */

.concept-memory {
    display: grid;

    grid-template-columns:
        57% 43%;

    min-height: 560px;

    background-color: #f7f5f1;
}


.concept-memory__image {
    overflow: hidden;
}


.concept-memory__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.concept-memory__content {
    display: flex;
    flex-direction: column;

    justify-content: center;

    padding:
        80px clamp(45px, 7vw, 130px);
}


.concept-memory__title {
    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size:
        clamp(27px, 2.8vw, 42px);

    font-weight: 400;

    line-height: 1.7;

    letter-spacing: 0.07em;
}


.concept-memory__text {
    margin-top: 35px;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 13px;

    line-height: 2;

    letter-spacing: 0.06em;

    color: #444444;
}


.concept-memory__text p {
    margin: 0 0 20px;
}


/* ========================================
   04 PHOTO & FILM
======================================== */

.concept-photo-film {
    display: grid;

    grid-template-columns:
        40% 30% 30%;

    min-height: 610px;

    background-color: #ffffff;
}


.concept-photo-film__intro {
    display: flex;
    flex-direction: column;

    justify-content: center;

    padding:
        80px clamp(45px, 6vw, 110px);
}


.concept-photo-film__title {
    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size:
        clamp(28px, 3vw, 44px);

    font-weight: 400;

    line-height: 1.65;

    letter-spacing: 0.08em;
}


.concept-photo-film__text {
    margin-top: 35px;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 12px;

    line-height: 2;

    letter-spacing: 0.06em;

    color: #444444;
}


.concept-photo-film__text p {
    margin: 0 0 20px;
}


/* PHOTO / FILM CARD */

.concept-media-card {
    position: relative;

    min-height: 610px;

    overflow: hidden;

    color: #ffffff;

    text-decoration: none;
}


.concept-media-card__image,
.concept-media-card__overlay {
    position: absolute;
    inset: 0;
}


.concept-media-card__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.8s ease;
}


.concept-media-card__overlay {
    background:
        linear-gradient(0deg,
            rgba(0, 0, 0, 0.48) 0%,
            rgba(0, 0, 0, 0.02) 65%);
}


.concept-media-card__content {
    position: absolute;

    left: 38px;
    right: 38px;
    bottom: 42px;

    z-index: 2;
}


.concept-media-card__title {
    margin: 0;

    font-family:
        "Times New Roman",
        serif;

    font-size:
        clamp(30px, 3vw, 44px);

    font-weight: 400;

    letter-spacing: 0.08em;
}


.concept-media-card__text {
    margin: 10px 0 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 14px;

    letter-spacing: 0.08em;
}


.concept-media-card__arrow {
    position: absolute;

    right: 0;
    bottom: 3px;

    font-size: 18px;
}


.concept-media-card:hover .concept-media-card__image img {
    transform: scale(1.03);
}


/* ========================================
   05 FOR THE FUTURE
======================================== */

.concept-future {
    position: relative;

    min-height: 650px;

    display: flex;

    align-items: center;

    overflow: hidden;

    color: #ffffff;
}


.concept-future__image,
.concept-future__overlay {
    position: absolute;
    inset: 0;
}


.concept-future__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}


.concept-future__overlay {
    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.48) 0%,
            rgba(0, 0, 0, 0.14) 60%,
            rgba(0, 0, 0, 0.04) 100%);
}


.concept-future__content {
    position: relative;

    z-index: 2;

    width: 50%;

    padding:
        100px 7vw;
}


.concept-future__title {
    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size:
        clamp(31px, 3.5vw, 52px);

    font-weight: 400;

    line-height: 1.65;

    letter-spacing: 0.08em;
}


.concept-future__text {
    margin-top: 40px;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 13px;

    line-height: 2;

    letter-spacing: 0.07em;

    color:
        rgba(255, 255, 255, 0.9);
}


.concept-future__text p {
    margin: 0 0 20px;
}


/* ========================================
   06 NEXT STORY
======================================== */

.concept-next {
    display: grid;

    grid-template-columns:
        43% 57%;

    min-height: 400px;

    background-color: #ffffff;
}


.concept-next__content {
    display: flex;
    flex-direction: column;

    justify-content: center;

    padding:
        70px clamp(45px, 7vw, 130px);
}


.concept-next__title {
    margin: 0;

    font-family:
        "Times New Roman",
        serif;

    font-size:
        clamp(38px, 4.5vw, 66px);

    font-weight: 400;

    line-height: 1;

    letter-spacing: 0.09em;
}


.concept-next__text {
    margin: 20px 0 35px;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 13px;

    letter-spacing: 0.08em;
}


/* NEXT BUTTON */

.concept-next__button {
    width: 245px;
    height: 52px;

    padding: 0 22px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border: 1px solid #777777;

    color: #111111;

    text-decoration: none;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 11px;

    letter-spacing: 0.08em;

    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}


.concept-next__button:hover {
    background-color: #111111;

    color: #ffffff;
}


/* NEXT GALLERY */

.concept-next__gallery {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 4px;
}


.concept-next__image {
    overflow: hidden;
}


.concept-next__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.8s ease;
}


.concept-next__image:hover img {
    transform: scale(1.025);
}


/* ========================================
   CONCEPT TABLET
======================================== */

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

    /* HERO */

    .concept-hero {
        height: 600px;
    }


    /* STORY */

    .concept-story {
        grid-template-columns:
            45% 55%;
    }


    /* MEMORY */

    .concept-memory {
        grid-template-columns:
            55% 45%;
    }


    /* PHOTO FILM */

    .concept-photo-film {
        grid-template-columns:
            100%;
    }


    .concept-photo-film__intro {
        min-height: 470px;

        padding:
            80px 10vw;
    }


    .concept-media-card {
        min-height: 560px;
    }


    /* FUTURE */

    .concept-future__content {
        width: 65%;
    }


    /* NEXT */

    .concept-next {
        grid-template-columns:
            40% 60%;
    }

}


/* ========================================
   CONCEPT SMARTPHONE
======================================== */

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

    /* HERO */

    .concept-hero {
        height: 650px;
    }


    .concept-hero__image img {
        object-position: 60% center;
    }


    .concept-hero__overlay {
        background:
            linear-gradient(0deg,
                rgba(0, 0, 0, 0.55) 0%,
                rgba(0, 0, 0, 0.04) 70%);
    }


    .concept-hero__content {
        top: auto;

        left: 24px;
        right: 24px;
        bottom: 55px;

        transform: none;
    }


    .concept-hero__title {
        font-size: 28px;

        line-height: 1.7;
    }


    .concept-hero__text {
        margin-top: 25px;

        font-size: 11px;
    }


    /* SECTION NUMBER */

    .concept-section-number {
        margin-bottom: 22px;

        font-size: 9px;
    }


    /* OUR STORY */

    .concept-story {
        display: flex;

        flex-direction: column-reverse;

        min-height: 0;
    }


    .concept-story__image {
        height: 420px;
    }


    .concept-story__content {
        padding:
            65px 24px 75px;
    }


    .concept-story__title {
        font-size: 27px;
    }


    /* MEMORY */

    .concept-memory {
        display: block;

        min-height: 0;
    }


    .concept-memory__image {
        height: 420px;
    }


    .concept-memory__content {
        padding:
            65px 24px 75px;
    }


    .concept-memory__title {
        font-size: 26px;
    }


    /* PHOTO & FILM */

    .concept-photo-film {
        display: block;
    }


    .concept-photo-film__intro {
        min-height: 0;

        padding:
            70px 24px;
    }


    .concept-photo-film__title {
        font-size: 27px;
    }


    .concept-media-card {
        display: block;

        min-height: 520px;
    }


    .concept-media-card__content {
        left: 26px;
        right: 26px;
        bottom: 32px;
    }


    /* FUTURE */

    .concept-future {
        min-height: 650px;
    }


    .concept-future__image img {
        object-position: 65% center;
    }


    .concept-future__overlay {
        background:
            linear-gradient(0deg,
                rgba(0, 0, 0, 0.62) 0%,
                rgba(0, 0, 0, 0.05) 80%);
    }


    .concept-future__content {
        width: auto;

        align-self: flex-end;

        padding:
            80px 24px 55px;
    }


    .concept-future__title {
        font-size: 29px;
    }


    /* NEXT STORY */

    .concept-next {
        display: block;

        min-height: 0;
    }


    .concept-next__content {
        padding:
            70px 24px;
    }


    .concept-next__title {
        font-size: 43px;
    }


    .concept-next__gallery {
        height: 250px;

        gap: 2px;
    }

}




/* ========================================
   STORIES PAGE
======================================== */

.stories-page {
    margin: 0;

    background: #fff;
    color: #171717;
}


/* ========================================
   STORIES COMMON
======================================== */

.stories-section-label,
.stories-item__number,
.stories-next__label {

    margin: 0 0 18px;

    font-family:
        "Times New Roman",
        serif;

    font-size: 10px;

    font-weight: 400;

    letter-spacing: 0.2em;
}


/* BUTTON */

.stories-button {

    width: 230px;
    height: 52px;

    padding: 0 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border: 1px solid #777;

    color: #111;

    text-decoration: none;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 11px;

    letter-spacing: 0.08em;

    transition:
        background 0.35s ease,
        color 0.35s ease;
}


.stories-button:hover {

    background: #111;

    color: #fff;
}


/* ========================================
   01 HERO
======================================== */

.stories-hero {

    position: relative;

    width: 100%;

    height: 620px;

    overflow: hidden;

    color: #fff;
}


.stories-hero__image,
.stories-hero__overlay {

    position: absolute;

    inset: 0;
}


.stories-hero__image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;
}


.stories-hero__overlay {

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.43) 0%,
            rgba(0, 0, 0, 0.12) 52%,
            rgba(0, 0, 0, 0.02) 100%);
}


.stories-hero__content {

    position: absolute;

    z-index: 2;

    top: 50%;
    left: 11%;

    transform: translateY(-50%);

    max-width: 600px;
}


.stories-hero__label {

    margin: 0 0 22px;

    font-family:
        "Times New Roman",
        serif;

    font-size: 11px;

    letter-spacing: 0.2em;
}


.stories-hero__title {

    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size:
        clamp(38px, 4.4vw, 68px);

    font-weight: 400;

    line-height: 1.5;

    letter-spacing: 0.08em;
}


.stories-hero__text {

    margin: 30px 0 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 13px;

    line-height: 1.95;

    letter-spacing: 0.06em;
}


/* ========================================
   02 INTRO
======================================== */

.stories-intro {

    padding: 70px 8vw;

    background: #fff;
}


.stories-intro__inner {

    width: min(900px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 110px;

    align-items: center;
}


.stories-intro__title {

    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size:
        clamp(29px, 3vw, 43px);

    font-weight: 400;

    line-height: 1.65;

    letter-spacing: 0.08em;
}


.stories-intro__text {

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 12px;

    line-height: 1.9;

    letter-spacing: 0.05em;

    color: #444;
}


.stories-intro__text p {

    margin:
        0 0 22px;
}


/* ========================================
   STORY COMMON
======================================== */

.stories-item {

    width: 100%;

    min-height: 520px;

    display: grid;

    grid-template-columns:
        52% 25% 23%;

    background: #fff;

    border-top:
        1px solid #eee;
}


/* MAIN IMAGE */

.stories-item__main {

    min-height: 520px;

    overflow: hidden;
}


.stories-item__main img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.8s ease;
}


.stories-item:hover .stories-item__main img {

    transform:
        scale(1.015);
}


/* STORY TEXT */

.stories-item__content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        55px clamp(30px, 4vw, 65px);
}


.stories-item__name {

    margin: 0;

    font-family:
        "Times New Roman",
        serif;

    font-size:
        clamp(30px, 3.1vw, 48px);

    font-weight: 400;

    line-height: 1.1;

    letter-spacing: 0.06em;
}


.stories-item__catch {

    margin:
        18px 0 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 17px;

    line-height: 1.7;

    letter-spacing: 0.08em;
}


.stories-item__description {

    margin:
        30px 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 11px;

    line-height: 1.9;

    letter-spacing: 0.05em;

    color: #444;
}


.stories-item__description p {

    margin:
        0 0 18px;
}


/* SUB GALLERY */

.stories-item__gallery {

    min-height: 520px;

    display: grid;

    grid-template-rows:
        repeat(3, 1fr);

    gap: 4px;
}


.stories-item__gallery figure {

    margin: 0;

    overflow: hidden;
}


.stories-item__gallery img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.6s ease;
}


.stories-item__gallery figure:hover img {

    transform:
        scale(1.03);
}


/* ========================================
   STORY 02
======================================== */

.stories-item--02 {

    grid-template-columns:
        38% 42% 20%;

    background:
        #f7f5f1;
}


/* ========================================
   STORY 03
======================================== */

.stories-item--03 {

    grid-template-columns:
        52% 28% 20%;
}


/* ========================================
   06 NEXT PLAN
======================================== */

.stories-next {

    position: relative;

    min-height: 470px;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    color: #fff;

    text-align: center;
}


.stories-next__image,
.stories-next__overlay {

    position: absolute;

    inset: 0;
}


.stories-next__image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;
}


.stories-next__overlay {

    background:
        rgba(0, 0, 0, 0.32);
}


.stories-next {
    position: relative;

    min-height: 470px;

    display: flex;

    align-items: center;
    justify-content: flex-start;

    overflow: hidden;

    color: #fff;

    text-align: center;
}


.stories-next__content {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 520px;

    margin-left: 8vw;

    padding: 70px 24px;

    box-sizing: border-box;
}


.stories-next__label {

    margin-bottom: 16px;

    color:
        rgba(255, 255, 255, 0.85);
}


.stories-next__title {

    margin: 0;

    font-family:
        "Times New Roman",
        serif;

    font-size:
        clamp(42px, 5vw, 70px);

    font-weight: 400;

    letter-spacing: 0.1em;
}


.stories-next__catch {

    margin:
        22px 0 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 19px;

    line-height: 1.8;

    letter-spacing: 0.08em;
}


.stories-next__text {

    margin:
        18px 0 30px;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 11px;

    letter-spacing: 0.08em;
}


.stories-next__button {

    width: 240px;
    height: 52px;

    margin: 0 auto;

    padding: 0 22px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border:
        1px solid rgba(255, 255, 255, 0.85);

    color: #fff;

    text-decoration: none;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 11px;

    letter-spacing: 0.08em;

    transition:
        background 0.35s ease,
        color 0.35s ease;
}


.stories-next__button:hover {

    background: #fff;

    color: #111;
}


/* ========================================
   STORIES TABLET
======================================== */

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

    .stories-hero {

        height: 580px;
    }


    .stories-item {

        grid-template-columns:
            50% 50%;
    }


    .stories-item__gallery {

        grid-column:
            1 / -1;

        min-height: 250px;

        grid-template-columns:
            repeat(3, 1fr);

        grid-template-rows:
            none;
    }


    .stories-item--02 {

        grid-template-columns:
            40% 60%;
    }


    .stories-item--02 .stories-item__gallery {

        grid-column:
            1 / -1;
    }


    .stories-item--03 {

        grid-template-columns:
            50% 50%;
    }

}


/* ========================================
   STORIES SMARTPHONE
======================================== */

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

    /* HERO */

    .stories-hero {

        height: 650px;
    }


    .stories-hero__image img {

        object-position:
            63% center;
    }


    .stories-hero__overlay {

        background:
            linear-gradient(0deg,
                rgba(0, 0, 0, 0.62) 0%,
                rgba(0, 0, 0, 0.05) 75%);
    }


    .stories-hero__content {

        top: auto;

        left: 24px;
        right: 24px;
        bottom: 50px;

        max-width: none;

        transform: none;
    }


    .stories-hero__title {

        font-size: 31px;
    }


    .stories-hero__text {

        font-size: 11px;
    }


    /* INTRO */

    .stories-intro {

        padding:
            65px 24px;
    }


    .stories-intro__inner {

        display: block;
    }


    .stories-intro__title {

        font-size: 28px;
    }


    .stories-intro__text {

        margin-top: 35px;
    }


    /* STORIES */

    .stories-item,
    .stories-item--02,
    .stories-item--03 {

        display: flex;

        flex-direction: column;

        min-height: 0;
    }


    .stories-item__main {

        min-height: 0;

        height: 430px;
    }


    .stories-item__content {

        padding:
            55px 24px 65px;
    }


    .stories-item__name {

        font-size: 32px;
    }


    .stories-item__catch {

        font-size: 16px;
    }


    .stories-button {

        width: 100%;

        max-width: 280px;
    }


    /* STORY 02:
     スマホでも画像 → テキストの順 */

    .stories-item--02 .stories-item__main {

        order: 1;
    }


    .stories-item--02 .stories-item__content {

        order: 2;
    }


    .stories-item--02 .stories-item__gallery {

        order: 3;
    }


    /* GALLERY */

    .stories-item__gallery {

        width: 100%;

        min-height: 0;

        display: grid;

        grid-template-columns:
            repeat(3, 1fr);

        grid-template-rows:
            none;

        gap: 2px;
    }


    .stories-item__gallery figure {

        aspect-ratio:
            1 / 1;
    }


    /* NEXT */

    .stories-next {

        min-height: 520px;
    }

    .stories-next__content {
        max-width: none;

        margin-left: 0;

        padding: 70px 24px;

        text-align: center;
    }

    .stories-next__image img {

        object-position:
            65% center;
    }


    .stories-next__title {

        font-size: 47px;
    }


    .stories-next__catch {

        font-size: 17px;
    }

}



/* ========================================
   PLAN PAGE
======================================== */


/* ----------------------------------------
   COMMON
---------------------------------------- */

.plan-page {
    margin: 0;
    padding: 0;

    background-color: #ffffff;
    color: #171717;
}


.plan-page img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.plan-section-label,
.plan-detail__number,
.plan-both__number,
.plan-next__label {
    margin: 0 0 18px;

    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.2em;
}


/* ========================================
   BUTTON
======================================== */

.plan-button {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 230px;
    height: 52px;

    padding: 0 22px;

    box-sizing: border-box;

    border: 1px solid #777777;

    color: #111111;
    text-decoration: none;

    font-family: "Yu Mincho", "YuMincho",
        "Hiragino Mincho ProN", serif;

    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.08em;

    transition:
        background-color 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease;
}


.plan-button:hover {
    background-color: #111111;
    border-color: #111111;

    color: #ffffff;
}


.plan-button--white {
    border-color: rgba(255, 255, 255, 0.85);

    color: #ffffff;
}


.plan-button--white:hover {
    background-color: #ffffff;
    border-color: #ffffff;

    color: #111111;
}



/* ========================================
   01 HERO
======================================== */

.plan-hero {
    position: relative;

    width: 100%;
    height: 720px;

    overflow: hidden;

    color: #ffffff;
}


.plan-hero__image {
    position: absolute;
    inset: 0;
}


.plan-hero__image img {
    object-position: center;
}


.plan-hero__overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.42) 0%,
            rgba(0, 0, 0, 0.15) 48%,
            rgba(0, 0, 0, 0.03) 100%);
}


.plan-hero__content {
    position: absolute;

    z-index: 2;

    top: 50%;
    left: 10%;

    transform: translateY(-42%);

    width: min(620px, 80%);
}


.plan-hero__label {
    margin: 0 0 25px;

    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.22em;
}


.plan-hero__title {
    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: clamp(38px, 4vw, 45px);
    font-weight: 400;

    line-height: 1.55;
    letter-spacing: 0.08em;

    width: max-content;

    max-width: none;



}


.plan-hero__text {
    margin: 30px 0 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 13px;

    line-height: 2;
    letter-spacing: 0.07em;
}


.plan-hero__scroll {
    position: absolute;

    z-index: 2;

    right: 5vw;
    bottom: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 12px;

    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 8px;

    letter-spacing: 0.2em;

    writing-mode: vertical-rl;
}


.plan-hero__scroll-line {
    display: block;

    width: 1px;
    height: 55px;

    background-color: rgba(255, 255, 255, 0.8);
}



/* ========================================
   02 INTRODUCTION
======================================== */

.plan-intro {
    padding: 120px 8vw 130px;

    background-color: #ffffff;
}


.flow-intro__inner {
    width: min(1040px, 100%);
    margin: 0 auto;

    display: grid;

    /* 修正 */
    grid-template-columns: 1.2fr 0.8fr;

    gap: 80px;

    align-items: center;
}


.plan-intro__title {
    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: clamp(30px, 3vw, 40px);
    font-weight: 400;

    line-height: 1.7;
    letter-spacing: 0.08em;


}


.plan-intro__text {
    color: #444444;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 12px;

    line-height: 2.1;
    letter-spacing: 0.05em;
}


.plan-intro__text p {
    margin: 0 0 25px;
}


.plan-intro__text p:last-child {
    margin-bottom: 0;
}



/* ========================================
   03 / 04
   PHOTO / FILM
======================================== */

.plan-detail {
    width: 100%;

    min-height: 600px;

    display: grid;
    grid-template-columns: 58% 42%;
}


.plan-detail--photo {
    background-color: #f7f5f1;
}


.plan-detail--film {
    grid-template-columns: 42% 58%;

    background-color: #ffffff;
}


.plan-detail__image {
    min-height: 600px;

    overflow: hidden;
}


.plan-detail__image img {
    transition: transform 1s ease;
}


.plan-detail:hover .plan-detail__image img {
    transform: scale(1.015);
}


.plan-detail__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 80px clamp(45px, 7vw, 110px);

    box-sizing: border-box;
}


.plan-detail__number {
    color: #777777;
}


.plan-detail__title {
    margin: 0;

    font-family: "Times New Roman", serif;

    font-size: clamp(48px, 5vw, 76px);
    font-weight: 400;

    line-height: 1;

    letter-spacing: 0.08em;
}


.plan-detail__catch {
    margin: 28px 0 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 20px;

    line-height: 1.8;
    letter-spacing: 0.1em;
}


.plan-detail__description {
    margin: 35px 0;

    color: #444444;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 12px;

    line-height: 2;
    letter-spacing: 0.05em;
}


.plan-detail__description p {
    margin: 0 0 20px;
}



/* ========================================
   05 PHOTO & FILM
======================================== */

.plan-both {
    position: relative;

    width: 100%;
    height: 650px;

    overflow: hidden;

    color: #ffffff;
}


.plan-both__image {
    position: absolute;
    inset: 0;
}


.plan-both__image img {
    object-position: center;
}


.plan-both__overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.5) 0%,
            rgba(0, 0, 0, 0.28) 42%,
            rgba(0, 0, 0, 0.05) 75%);
}


.plan-both__content {
    position: relative;

    z-index: 2;

    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;

    width: min(520px, 80%);

    margin-left: 10vw;
}


.plan-both__number {
    color: rgba(255, 255, 255, 0.8);
}


.plan-both__title {
    margin: 0;

    font-family: "Times New Roman", serif;

    font-size: clamp(46px, 5vw, 72px);
    font-weight: 400;

    line-height: 1.1;
    letter-spacing: 0.07em;
}


.plan-both__catch {
    margin: 28px 0 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 21px;

    line-height: 1.8;
    letter-spacing: 0.1em;
}


.plan-both__description {
    margin: 32px 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 12px;

    line-height: 2;
    letter-spacing: 0.06em;
}


.plan-both__description p {
    margin: 0 0 18px;
}



/* ========================================
   06 HOW DO YOU WANT TO REMEMBER?
======================================== */

.plan-choice {
    padding: 130px 7vw 140px;

    background-color: #f8f7f4;
}


.plan-choice__heading {
    width: min(800px, 100%);

    margin: 0 auto 75px;

    text-align: center;
}


.plan-choice__title {
    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: clamp(30px, 3vw, 44px);
    font-weight: 400;

    line-height: 1.7;
    letter-spacing: 0.08em;
}


.plan-choice__lead {
    margin: 30px 0 0;

    color: #555555;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 12px;

    line-height: 2;
    letter-spacing: 0.06em;
}



/* CARDS
---------------------------------------- */

.plan-choice__cards {
    width: min(1200px, 100%);

    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 28px;
}


.plan-choice-card {
    display: block;

    color: #111111;
    text-decoration: none;

    background-color: #ffffff;

    overflow: hidden;

    transition: transform 0.4s ease;
}


.plan-choice-card:hover {
    transform: translateY(-5px);
}


.plan-choice-card__image {
    width: 100%;

    margin: 0;

    aspect-ratio: 1 / 1;

    overflow: hidden;
}


.plan-choice-card__image img {
    transition: transform 0.7s ease;
}


.plan-choice-card:hover .plan-choice-card__image img {
    transform: scale(1.025);
}


.plan-choice-card__content {
    position: relative;

    min-height: 180px;

    padding: 30px 32px;

    box-sizing: border-box;
}


.plan-choice-card__number {
    margin: 0 0 14px;

    color: #888888;

    font-family: Arial, "Helvetica Neue", sans-serif;

    font-size: 9px;

    letter-spacing: 0.18em;
}


.plan-choice-card__title {
    margin: 0;

    font-family: "Times New Roman", serif;

    font-size: clamp(25px, 2.2vw, 34px);
    font-weight: 400;

    letter-spacing: 0.07em;
}


.plan-choice-card__text {
    margin: 16px 0 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 12px;

    letter-spacing: 0.06em;
}


.plan-choice-card__arrow {
    position: absolute;

    right: 30px;
    bottom: 30px;

    font-size: 18px;

    transition: transform 0.3s ease;
}


.plan-choice-card:hover .plan-choice-card__arrow {
    transform: translateX(6px);
}



/* MESSAGE
---------------------------------------- */

.plan-choice__message {
    width: min(650px, 100%);

    margin: 90px auto 0;

    text-align: center;

    color: #444444;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 12px;

    line-height: 2.1;
    letter-spacing: 0.06em;
}


.plan-choice__message p {
    margin: 0 0 22px;
}



/* ========================================
   07 NEXT / FLOW
======================================== */

.plan-next {
    position: relative;

    width: 100%;
    min-height: 520px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    color: #ffffff;

    text-align: center;
}


.plan-next__image {
    position: absolute;
    inset: 0;
}


.plan-next__image img {
    object-position: center;
}


.plan-next__overlay {
    position: absolute;
    inset: 0;

    background-color: rgba(0, 0, 0, 0.35);
}


.plan-next__content {
    position: relative;

    z-index: 2;

    padding: 70px 24px;
}


.plan-next__label {
    margin-bottom: 15px;

    color: rgba(255, 255, 255, 0.85);
}


.plan-next__title {
    margin: 0;

    font-family: "Times New Roman", serif;

    font-size: clamp(48px, 5vw, 72px);
    font-weight: 400;

    letter-spacing: 0.1em;
}


.plan-next__catch {
    margin: 25px 0 32px;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 19px;

    line-height: 1.8;
    letter-spacing: 0.08em;
}


.plan-next__button {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 240px;
    height: 52px;

    margin: 0 auto;

    padding: 0 22px;

    box-sizing: border-box;

    border: 1px solid rgba(255, 255, 255, 0.85);

    color: #ffffff;
    text-decoration: none;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 11px;

    letter-spacing: 0.08em;

    transition:
        background-color 0.35s ease,
        color 0.35s ease;
}


.plan-next__button:hover {
    background-color: #ffffff;

    color: #111111;
}



/* ========================================
   TABLET
   768px - 1100px
======================================== */

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


    /* HERO */

    .plan-hero {
        height: 650px;
    }


    .plan-hero__content {
        left: 7%;
    }


    /* INTRO */

    .plan-intro {
        padding:
            100px 7vw 110px;
    }


    .plan-intro__inner {
        gap: 70px;
    }


    /* PHOTO / FILM */

    .plan-detail,
    .plan-detail--film {
        grid-template-columns:
            55% 45%;
    }


    .plan-detail--film {
        grid-template-columns:
            45% 55%;
    }


    .plan-detail__content {
        padding:
            65px 45px;
    }


    .plan-detail__image {
        min-height: 540px;
    }


    /* PHOTO & FILM */

    .plan-both {
        height: 600px;
    }


    .plan-both__content {
        margin-left: 7vw;
    }


    /* CHOICE */

    .plan-choice {
        padding:
            110px 5vw 120px;
    }


    .plan-choice__cards {
        gap: 18px;
    }


    .plan-choice-card__content {
        padding:
            25px 22px;
    }


}



/* ========================================
   SMARTPHONE
   767px以下
======================================== */

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


    /* ========================================
       HERO
    ======================================== */

    .plan-hero {
        height: 650px;
    }


    .plan-hero__image img {
        object-position: 60% center;
    }


    .plan-hero__overlay {
        background:
            linear-gradient(0deg,
                rgba(0, 0, 0, 0.6) 0%,
                rgba(0, 0, 0, 0.25) 55%,
                rgba(0, 0, 0, 0.05) 100%);
    }


    .plan-hero__content {
        top: auto;
        right: 24px;
        bottom: 65px;
        left: 24px;

        transform: none;

        width: auto;
    }


    .plan-hero__label {
        margin-bottom: 18px;

        font-size: 9px;
    }


    .plan-hero__title {
        font-size: 30px;

        line-height: 1.6;
    }


    .plan-hero__text {
        margin-top: 22px;

        font-size: 11px;
    }


    .plan-hero__scroll {
        display: none;
    }



    /* ========================================
       INTRO
    ======================================== */

    .plan-intro {
        padding:
            75px 24px 85px;
    }


    .plan-intro__inner {
        display: block;
    }


    .plan-intro__title {
        font-size: 28px;
    }


    .plan-intro__text {
        margin-top: 45px;

        font-size: 11px;
    }



    /* ========================================
       PHOTO / FILM
    ======================================== */

    .plan-detail,
    .plan-detail--film {
        display: flex;
        flex-direction: column;

        min-height: 0;
    }


    .plan-detail__image {
        width: 100%;
        height: 430px;

        min-height: 0;
    }


    .plan-detail__content {
        padding:
            60px 24px 70px;
    }


    .plan-detail__title {
        font-size: 47px;
    }


    .plan-detail__catch {
        margin-top: 22px;

        font-size: 18px;
    }


    .plan-detail__description {
        margin:
            28px 0 32px;

        font-size: 11px;
    }


    .plan-button {
        width: 100%;
        max-width: 280px;
    }


    /* FILMはスマホで画像→文章 */

    .plan-detail--film .plan-detail__image {
        order: 1;
    }


    .plan-detail--film .plan-detail__content {
        order: 2;
    }



    /* ========================================
       PHOTO & FILM
    ======================================== */

    .plan-both {
        height: 650px;
    }


    .plan-both__image img {
        object-position: 60% center;
    }


    .plan-both__overlay {
        background:
            linear-gradient(0deg,
                rgba(0, 0, 0, 0.65) 0%,
                rgba(0, 0, 0, 0.28) 65%,
                rgba(0, 0, 0, 0.05) 100%);
    }


    .plan-both__content {
        justify-content: flex-end;

        width: auto;

        margin: 0;

        padding:
            0 24px 65px;

        box-sizing: border-box;
    }


    .plan-both__title {
        font-size: 42px;
    }


    .plan-both__catch {
        margin-top: 22px;

        font-size: 18px;
    }


    .plan-both__description {
        margin:
            25px 0 30px;

        font-size: 11px;
    }



    /* ========================================
       CHOICE
    ======================================== */

    .plan-choice {
        padding:
            80px 24px 90px;
    }


    .plan-choice__heading {
        margin-bottom: 50px;
    }


    .plan-choice__title {
        font-size: 28px;
    }


    .plan-choice__lead {
        margin-top: 25px;

        font-size: 11px;
    }


    .plan-choice__cards {
        display: block;
    }


    .plan-choice-card {
        margin-bottom: 30px;
    }


    .plan-choice-card:last-child {
        margin-bottom: 0;
    }


    .plan-choice-card__image {
        aspect-ratio: 1 / 1;
    }


    .plan-choice-card__content {
        min-height: 160px;

        padding:
            25px 25px;
    }


    .plan-choice-card__title {
        font-size: 30px;
    }


    .plan-choice-card__arrow {
        right: 25px;
        bottom: 25px;
    }


    .plan-choice__message {
        margin-top: 65px;

        font-size: 11px;
    }



    /* ========================================
       NEXT / FLOW
    ======================================== */

    .plan-next {
        min-height: 520px;
    }


    .plan-next__image img {
        object-position: 60% center;
    }


    .plan-next__overlay {
        background-color:
            rgba(0, 0, 0, 0.42);
    }


    .plan-next__content {
        padding:
            65px 24px;
    }


    .plan-next__title {
        font-size: 48px;
    }


    .plan-next__catch {
        font-size: 17px;
    }


    .plan-next__button {
        width: 240px;
    }


}


/* ========================================
   FLOW PAGE
======================================== */


/* ----------------------------------------
   COMMON
---------------------------------------- */

.flow-page {
    margin: 0;
    padding: 0;

    background-color: #ffffff;
    color: #171717;
}


.flow-page img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.flow-section-label,
.flow-step__number,
.flow-shooting__number,
.flow-next__label {
    margin: 0 0 18px;

    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.20em;
}



/* ========================================
   01 HERO
======================================== */

.flow-hero {
    position: relative;

    width: 100%;
    height: 720px;

    overflow: hidden;

    color: #ffffff;
}


.flow-hero__image {
    position: absolute;
    inset: 0;
}


.flow-hero__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* HERO DARK GRADATION */

.flow-hero__overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.46) 0%,
            rgba(0, 0, 0, 0.25) 38%,
            rgba(0, 0, 0, 0.08) 65%,
            rgba(0, 0, 0, 0.02) 100%);
}


/* HERO TEXT */

.flow-hero__content {
    position: absolute;

    z-index: 2;

    top: 50%;
    left: 11%;

    transform: translateY(-42%);

    width: min(650px, 78%);
}


/* SMALL "FLOW" */

.flow-hero__label {
    margin: 0 0 24px;

    font-family: "Times New Roman", serif;
    font-size: 15px;
    font-weight: 400;

    line-height: 1;

    letter-spacing: 0.24em;
}


/* MAIN TITLE */

.flow-hero__title {
    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: clamp(42px, 4.3vw, 66px);
    font-weight: 400;

    line-height: 1.55;
    letter-spacing: 0.08em;
}


/* HERO DESCRIPTION */

.flow-hero__text {
    margin: 30px 0 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 13px;
    font-weight: 400;

    line-height: 2;
    letter-spacing: 0.06em;
}


/* SCROLL */

.flow-hero__scroll {
    position: absolute;

    z-index: 2;

    right: 5vw;
    bottom: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 12px;

    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 8px;

    letter-spacing: 0.20em;

    writing-mode: vertical-rl;
}


.flow-hero__scroll-line {
    display: block;

    width: 1px;
    height: 55px;

    background-color: rgba(255, 255, 255, 0.8);
}



/* ========================================
   02 INTRODUCTION
======================================== */

.flow-intro {
    padding: 125px 8vw 135px;

    background-color: #ffffff;
}


.flow-intro__inner {
    width: min(1200px, 100%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: 600px 1fr;
    gap: 80px;

    align-items: center;
}


.flow-intro__title {
    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: clamp(30px, 3vw, 44px);
    font-weight: 400;

    line-height: 1.7;
    letter-spacing: 0.08em;

    white-space: nowrap;
}


.flow-intro__text {
    color: #444444;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 12px;

    line-height: 2.1;
    letter-spacing: 0.05em;
}


.flow-intro__text p {
    margin: 0 0 25px;
}


.flow-intro__text p:last-child {
    margin-bottom: 0;
}



/* ========================================
   03 - 06 / 08 - 09
   FLOW STEP
======================================== */

.flow-step {
    width: 100%;

    min-height: 580px;

    display: grid;
    grid-template-columns: 58% 42%;

    background-color: #f7f5f1;
}


/* ALTERNATE */

.flow-step--reverse {
    grid-template-columns: 42% 58%;

    background-color: #ffffff;
}


/* IMAGE */

.flow-step__image {
    min-height: 580px;

    overflow: hidden;
}


.flow-step__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.9s ease;
}


.flow-step:hover .flow-step__image img {
    transform: scale(1.015);
}


/* CONTENT */

.flow-step__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 75px clamp(45px, 7vw, 110px);

    box-sizing: border-box;
}


.flow-step__number {
    color: #888888;
}


/* ENGLISH TITLE */

.flow-step__english {
    margin: 0;

    font-family: "Times New Roman", serif;

    font-size: clamp(42px, 4vw, 62px);
    font-weight: 400;

    line-height: 1;

    letter-spacing: 0.07em;
}


/* JAPANESE TITLE */

.flow-step__title {
    margin: 28px 0 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 20px;
    font-weight: 400;

    line-height: 1.7;
    letter-spacing: 0.10em;
}


/* DESCRIPTION */

.flow-step__description {
    margin: 32px 0 0;

    color: #444444;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 12px;

    line-height: 2;
    letter-spacing: 0.05em;
}


.flow-step__description p {
    margin: 0 0 20px;
}


.flow-step__description p:last-child {
    margin-bottom: 0;
}



/* ========================================
   07 FLOW 05 / SHOOTING
======================================== */

.flow-shooting {
    position: relative;

    width: 100%;
    height: 720px;

    overflow: hidden;

    color: #ffffff;
}


.flow-shooting__image {
    position: absolute;
    inset: 0;
}


.flow-shooting__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


.flow-shooting__overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.48) 0%,
            rgba(0, 0, 0, 0.24) 40%,
            rgba(0, 0, 0, 0.03) 75%);
}


.flow-shooting__content {
    position: relative;

    z-index: 2;

    width: min(520px, 80%);
    height: 100%;

    margin-left: 10vw;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.flow-shooting__number {
    color: rgba(255, 255, 255, 0.8);
}


.flow-shooting__english {
    margin: 0;

    font-family: "Times New Roman", serif;

    font-size: clamp(48px, 5vw, 76px);
    font-weight: 400;

    line-height: 1;

    letter-spacing: 0.07em;
}


.flow-shooting__title {
    margin: 28px 0 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 22px;
    font-weight: 400;

    line-height: 1.7;
    letter-spacing: 0.10em;
}


.flow-shooting__description {
    margin: 32px 0 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 12px;

    line-height: 2;
    letter-spacing: 0.06em;
}


.flow-shooting__description p {
    margin: 0 0 20px;
}



/* ========================================
   10 AFTER STORY
======================================== */

.flow-after {
    padding: 130px 8vw;

    background-color: #f7f5f1;
}


.flow-after__inner {
    width: min(1180px, 100%);

    margin: 0 auto;

    display: grid;
    grid-template-columns: 42% 58%;

    gap: 90px;

    align-items: center;
}


.flow-after__content {
    padding-left: 30px;
}


.flow-after__title {
    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: clamp(30px, 3vw, 45%);
    font-weight: 400;

    line-height: 1.7;
    letter-spacing: 0.08em;
}


.flow-after__text {
    margin-top: 35px;

    color: #444444;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 12px;

    line-height: 2.1;
    letter-spacing: 0.05em;
}


.flow-after__text p {
    margin: 0 0 22px;
}


.flow-after__image {
    height: 520px;

    overflow: hidden;
}


.flow-after__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}



/* ========================================
   11 NEXT / CONTACT
======================================== */

.flow-next {
    position: relative;

    width: 100%;
    min-height: 560px;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    overflow: hidden;

    color: #ffffff;
}


.flow-next__image {
    position: absolute;
    inset: 0;
}


.flow-next__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


.flow-next__overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.50) 0%,
            rgba(0, 0, 0, 0.27) 42%,
            rgba(0, 0, 0, 0.04) 75%);
}


.flow-next__content {
    position: relative;

    z-index: 2;

    width: min(520px, 80%);

    margin-left: 10vw;

    padding: 70px 0;

    box-sizing: border-box;
}


.flow-next__label {
    color: rgba(255, 255, 255, 0.85);
}


.flow-next__title {
    margin: 0;

    font-family: "Times New Roman", serif;

    font-size: clamp(48px, 5vw, 72px);
    font-weight: 400;

    line-height: 1;

    letter-spacing: 0.10em;
}


.flow-next__catch {
    margin: 27px 0 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 20px;

    line-height: 1.8;
    letter-spacing: 0.08em;
}


.flow-next__text {
    margin: 22px 0 32px;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 11px;

    line-height: 2;
    letter-spacing: 0.06em;
}


/* CONTACT BUTTON */

.flow-next__button {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 240px;
    height: 52px;

    padding: 0 22px;

    box-sizing: border-box;

    border: 1px solid rgba(255, 255, 255, 0.85);

    color: #ffffff;
    text-decoration: none;

    font-family: Arial, "Helvetica Neue", sans-serif;

    font-size: 10px;
    font-weight: 400;

    letter-spacing: 0.15em;

    transition:
        background-color 0.35s ease,
        color 0.35s ease;
}


.flow-next__button:hover {
    background-color: #ffffff;

    color: #111111;
}



/* ========================================
   TABLET
   768px - 1100px
======================================== */

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


    /* HERO */

    .flow-hero {
        height: 650px;
    }


    .flow-hero__content {
        left: 7%;

        width: 600px;
        max-width: 70%;
    }


    .flow-hero__title {
        font-size: clamp(38px, 5vw, 54px);
    }



    /* INTRO */

    .flow-intro {
        padding: 100px 7vw 110px;
    }


    .flow-intro__inner {
        gap: 70px;
    }



    /* FLOW STEP */

    .flow-step {
        grid-template-columns: 55% 45%;

        min-height: 520px;
    }


    .flow-step--reverse {
        grid-template-columns: 45% 55%;
    }


    .flow-step__image {
        min-height: 520px;
    }


    .flow-step__content {
        padding: 60px 42px;
    }


    .flow-step__english {
        font-size: 46px;
    }



    /* SHOOTING */

    .flow-shooting {
        height: 650px;
    }


    .flow-shooting__content {
        margin-left: 7vw;
    }



    /* AFTER STORY */

    .flow-after {
        padding: 110px 6vw;
    }


    .flow-after__inner {
        gap: 55px;
    }


    .flow-after__content {
        padding-left: 0;
    }


    .flow-after__image {
        height: 460px;
    }



    /* NEXT */

    .flow-next__content {
        margin-left: 7vw;
    }

}



/* ========================================
   SMARTPHONE
   767px以下
======================================== */

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


    /* ========================================
       HERO
    ======================================== */

    .flow-hero {
        height: 650px;
    }


    .flow-hero__image img {
        /*
        新郎新婦を画面内に残すため、
        スマホではやや右寄りを表示
        */
        object-position: 64% center;
    }


    .flow-hero__overlay {
        background:
            linear-gradient(0deg,
                rgba(0, 0, 0, 0.68) 0%,
                rgba(0, 0, 0, 0.38) 45%,
                rgba(0, 0, 0, 0.06) 100%);
    }


    .flow-hero__content {
        top: auto;
        right: 24px;
        bottom: 58px;
        left: 24px;

        transform: none;

        width: auto;
        max-width: none;
    }


    .flow-hero__label {
        margin-bottom: 18px;

        font-size: 11px;
    }


    .flow-hero__title {
        font-size: 31px;

        line-height: 1.65;
        letter-spacing: 0.06em;
    }


    .flow-hero__text {
        margin-top: 22px;

        font-size: 11px;

        line-height: 1.9;
    }


    .flow-hero__scroll {
        display: none;
    }



    /* ========================================
       INTRO
    ======================================== */

    .flow-intro {
        padding: 75px 24px 85px;
    }


    .flow-intro__inner {
        display: block;
    }


    .flow-intro__title {
        font-size: 28px;
    }


    .flow-intro__text {
        margin-top: 42px;

        font-size: 11px;
    }



    /* ========================================
       FLOW STEP
    ======================================== */

    .flow-step,
    .flow-step--reverse {
        display: flex;
        flex-direction: column;

        min-height: 0;
    }


    .flow-step__image {
        order: 1;

        width: 100%;
        height: 400px;

        min-height: 0;
    }


    .flow-step__content {
        order: 2;

        padding: 55px 24px 65px;
    }


    .flow-step__number {
        margin-bottom: 15px;
    }


    .flow-step__english {
        font-size: 42px;
    }


    .flow-step__title {
        margin-top: 22px;

        font-size: 18px;
    }


    .flow-step__description {
        margin-top: 27px;

        font-size: 11px;
    }



    /* ========================================
       SHOOTING
    ======================================== */

    .flow-shooting {
        height: 650px;
    }


    .flow-shooting__image img {
        object-position: 55% center;
    }


    .flow-shooting__overlay {
        background:
            linear-gradient(0deg,
                rgba(0, 0, 0, 0.68) 0%,
                rgba(0, 0, 0, 0.30) 60%,
                rgba(0, 0, 0, 0.05) 100%);
    }


    .flow-shooting__content {
        justify-content: flex-end;

        width: auto;
        height: 100%;

        margin: 0;

        padding:
            0 24px 60px;

        box-sizing: border-box;
    }


    .flow-shooting__english {
        font-size: 45px;
    }


    .flow-shooting__title {
        margin-top: 20px;

        font-size: 19px;
    }


    .flow-shooting__description {
        margin-top: 25px;

        font-size: 11px;
    }



    /* ========================================
       AFTER STORY
    ======================================== */

    .flow-after {
        padding: 80px 24px 90px;
    }


    .flow-after__inner {
        display: flex;
        flex-direction: column;

        gap: 50px;
    }


    .flow-after__content {
        order: 2;

        padding: 0;
    }


    .flow-after__image {
        order: 1;

        width: 100%;
        height: 400px;
    }


    .flow-after__title {
        font-size: 28px;
    }


    .flow-after__text {
        margin-top: 30px;

        font-size: 11px;
    }



    /* ========================================
       NEXT / CONTACT
    ======================================== */

    .flow-next {
        min-height: 570px;

        align-items: flex-end;
    }


    .flow-next__image img {
        object-position: 60% center;
    }


    .flow-next__overlay {
        background:
            linear-gradient(0deg,
                rgba(0, 0, 0, 0.70) 0%,
                rgba(0, 0, 0, 0.30) 62%,
                rgba(0, 0, 0, 0.05) 100%);
    }


    .flow-next__content {
        width: 100%;

        margin: 0;

        padding:
            60px 24px;

        box-sizing: border-box;
    }


    .flow-next__title {
        font-size: 46px;
    }


    .flow-next__catch {
        margin-top: 22px;

        font-size: 18px;
    }


    .flow-next__text {
        margin:
            20px 0 30px;

        font-size: 11px;
    }


    .flow-next__button {
        width: 100%;
        max-width: 280px;
    }

}


/* ========================================
   ABOUT PAGE
======================================== */


/* ----------------------------------------
   COMMON
---------------------------------------- */

.about-page {
    margin: 0;
    padding: 0;

    background-color: #ffffff;
    color: #171717;
}


.about-page img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.about-section-label,
.about-next__label {
    margin: 0 0 18px;

    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 10px;
    font-weight: 400;

    letter-spacing: 0.20em;
}



/* ========================================
   01 HERO
======================================== */

.about-hero {
    position: relative;

    width: 100%;
    height: 720px;

    overflow: hidden;

    color: #ffffff;
}


.about-hero__image {
    position: absolute;
    inset: 0;
}


.about-hero__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* HERO GRADATION */

.about-hero__overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.48) 0%,
            rgba(0, 0, 0, 0.28) 28%,
            rgba(0, 0, 0, 0.08) 55%,
            rgba(0, 0, 0, 0.01) 100%);
}


/* HERO CONTENT */

.about-hero__content {
    position: absolute;

    z-index: 2;

    top: 50%;
    left: 7vw;

    transform: translateY(-45%);

    width: min(600px, 45%);
}


/* SMALL ABOUT */

.about-hero__label {
    margin: 0 0 22px;

    font-family: "Times New Roman", serif;
    font-size: 12px;
    font-weight: 400;

    letter-spacing: 0.22em;
}


/* MAIN ENGLISH TITLE */

.about-hero__title {
    margin: 0;

    font-family:
        "Times New Roman",
        "Yu Mincho",
        serif;

    font-size: clamp(46px, 4.5vw, 70px);
    font-weight: 400;

    line-height: 1.15;
    letter-spacing: 0.04em;
}


/* JAPANESE COPY */

.about-hero__catch {
    margin: 28px 0 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 20px;
    font-weight: 400;

    line-height: 2;
    letter-spacing: 0.10em;
}


/* SCROLL */

.about-hero__scroll {
    position: absolute;

    z-index: 2;

    left: 7vw;
    bottom: 28px;

    display: flex;
    flex-direction: column;

    gap: 10px;

    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 8px;

    letter-spacing: 0.20em;
}


.about-hero__scroll-line {
    display: block;

    width: 1px;
    height: 45px;

    margin-left: 3px;

    background-color: rgba(255, 255, 255, 0.8);
}



/* ========================================
   02 PHILOSOPHY
======================================== */

.about-philosophy {
    padding: 120px 7vw;

    background-color: #ffffff;
}


.about-philosophy__inner {
    width: min(1240px, 100%);

    margin: 0 auto;

    display: grid;
    grid-template-columns: 42% 58%;

    align-items: center;
}


.about-philosophy__content {
    padding-right: 75px;

    box-sizing: border-box;
}


.about-philosophy__title {
    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: clamp(30px, 3vw, 44px);
    font-weight: 400;

    line-height: 1.7;
    letter-spacing: 0.08em;
}


.about-philosophy__text {
    margin-top: 32px;

    color: #444444;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 12px;

    line-height: 2.1;
    letter-spacing: 0.05em;
}


.about-philosophy__text p {
    margin: 0 0 20px;
}


.about-philosophy__text p:last-child {
    margin-bottom: 0;
}


.about-philosophy__image {
    height: 430px;

    margin: 0;

    overflow: hidden;
}


.about-philosophy__image img {
    object-position: center;
}



/* ========================================
   03 PROFILE
======================================== */

.about-profile {
    padding: 0 7vw 120px;

    background-color: #f7f5f1;
}


.about-profile__inner {
    width: min(1240px, 100%);

    margin: 0 auto;

    display: grid;
    grid-template-columns: 30% 40% 30%;

    align-items: center;
}


/* PROFILE IMAGE */

.about-profile__image {
    height: 520px;

    margin: 0;

    overflow: hidden;
}


.about-profile__image img {
    object-position: center;
}


/* PROFILE CONTENT */

.about-profile__content {
    padding: 70px 55px;

    box-sizing: border-box;
}


.about-profile__name-en {
    margin: 0;

    font-family: "Times New Roman", serif;

    font-size: clamp(31px, 3vw, 45px);
    font-weight: 400;

    line-height: 1.2;
    letter-spacing: 0.06em;
}


.about-profile__name-ja {
    margin: 10px 0 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 17px;

    letter-spacing: 0.12em;
}


.about-profile__job {
    margin: 12px 0 0;

    color: #666666;

    font-family: "Times New Roman", serif;
    font-size: 13px;

    letter-spacing: 0.05em;
}


.about-profile__message {
    margin-top: 35px;

    color: #444444;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 12px;

    line-height: 2;
    letter-spacing: 0.05em;
}


.about-profile__message p {
    margin: 0 0 20px;
}


/* PROFILE INFO */

.about-profile__info {
    padding: 35px;

    box-sizing: border-box;

    background-color: rgba(255, 255, 255, 0.75);
}


.about-profile__info-title {
    margin: 0 0 25px;

    font-family: "Times New Roman", serif;
    font-size: 11px;

    letter-spacing: 0.15em;
}


.about-profile__info dl {
    margin: 0;
}


.about-profile__info dl>div {
    display: grid;
    grid-template-columns: 70px 1fr;

    gap: 15px;

    padding: 12px 0;

    border-bottom: 1px solid #dddddd;
}


.about-profile__info dl>div:last-child {
    border-bottom: none;
}


.about-profile__info dt,
.about-profile__info dd {
    margin: 0;

    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 9px;

    line-height: 1.7;
    letter-spacing: 0.08em;
}


.about-profile__info dt {
    color: #888888;
}


.about-profile__info dd {
    color: #333333;
}



/* ========================================
   04 MY STORY
======================================== */

.about-story {
    padding: 125px 6vw 135px;

    background-color: #ffffff;
}


.about-story__inner {
    width: min(1320px, 100%);

    margin: 0 auto;
}


/* HEADING */

.about-story__heading {
    margin-bottom: 65px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: end;
}


.about-story__title {
    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: clamp(32px, 3.3vw, 48px);
    font-weight: 400;

    line-height: 1.5;
    letter-spacing: 0.08em;
}


.about-story__lead {
    margin: 0;

    color: #555555;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 11px;

    line-height: 2;
    letter-spacing: 0.06em;
}


/* 4 STORY CARDS */

.about-story__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 34px;
}


.about-story-card {
    min-width: 0;
}


.about-story-card__image {
    width: 100%;

    margin: 0 0 22px;

    aspect-ratio: 3 / 2;

    overflow: hidden;
}


.about-story-card__image img {
    transition: transform 0.7s ease;
}


.about-story-card:hover .about-story-card__image img {
    transform: scale(1.025);
}


.about-story-card__number {
    position: relative;

    margin: 0 0 15px;

    color: #777777;

    font-family: "Times New Roman", serif;
    font-size: 19px;

    letter-spacing: 0.08em;
}


.about-story-card__number::after {
    content: "";

    display: inline-block;

    width: 42px;
    height: 1px;

    margin-left: 15px;
    margin-bottom: 5px;

    background-color: #aaaaaa;
}


.about-story-card__title {
    margin: 0;

    min-height: 72px;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 16px;
    font-weight: 400;

    line-height: 1.7;
    letter-spacing: 0.06em;
}


.about-story-card__text {
    margin: 20px 0 0;

    color: #555555;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 10px;

    line-height: 2;
    letter-spacing: 0.04em;
}



/* ========================================
   05 WHAT I VALUE
======================================== */

.about-value {
    padding: 120px 6vw 130px;

    background-color: #f7f5f1;
}


.about-value__inner {
    width: min(1320px, 100%);

    margin: 0 auto;
}


.about-value__heading {
    margin-bottom: 55px;
}


.about-value__title {
    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: clamp(31px, 3.2vw, 46px);
    font-weight: 400;

    line-height: 1.6;
    letter-spacing: 0.08em;
}


/* VALUE LIST */

.about-value__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 35px;
}


.about-value-card {
    display: grid;
    grid-template-columns: 58% 42%;

    min-width: 0;

    background-color: #ffffff;
}


.about-value-card__image {
    margin: 0;

    aspect-ratio: 1 / 1;

    overflow: hidden;
}


.about-value-card__image img {
    transition: transform 0.7s ease;
}


.about-value-card:hover .about-value-card__image img {
    transform: scale(1.025);
}


.about-value-card__content {
    position: relative;

    padding: 28px 20px;

    box-sizing: border-box;
}


.about-value-card__number {
    margin: 0 0 10px;

    color: #888888;

    font-family: "Times New Roman", serif;
    font-size: 18px;
}


.about-value-card__title {
    margin: 0;

    font-family: "Times New Roman", serif;

    font-size: clamp(19px, 1.8vw, 26px);
    font-weight: 400;

    letter-spacing: 0.07em;
}


.about-value-card__jp {
    margin: 8px 0 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 12px;

    letter-spacing: 0.10em;
}


.about-value-card__text {
    margin: 20px 0 0;

    color: #555555;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 9px;

    line-height: 1.9;
    letter-spacing: 0.04em;
}



/* ========================================
   06 MESSAGE
======================================== */

.about-message {
    padding: 120px 6vw;

    background-color: #ffffff;
}


.about-message__inner {
    width: min(1240px, 100%);

    margin: 0 auto;

    display: grid;
    grid-template-columns: 55% 45%;

    align-items: center;
}


.about-message__image {
    height: 560px;

    margin: 0;

    overflow: hidden;
}


.about-message__image img {
    object-position: center;
}


.about-message__content {
    padding: 65px 0 65px 75px;

    box-sizing: border-box;
}


.about-message__title {
    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: clamp(28px, 2.8vw, 40px);
    font-weight: 400;

    line-height: 1.75;
    letter-spacing: 0.07em;
}


.about-message__text {
    margin-top: 35px;

    color: #444444;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 12px;

    line-height: 2.05;
    letter-spacing: 0.05em;
}


.about-message__text p {
    margin: 0 0 20px;
}



/* ========================================
   07 NEXT / CONTACT
======================================== */

.about-next {
    position: relative;

    width: 100%;
    height: 600px;

    display: flex;
    align-items: center;

    overflow: hidden;

    color: #ffffff;
}


.about-next__image {
    position: absolute;
    inset: 0;
}


.about-next__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


.about-next__overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.48) 0%,
            rgba(0, 0, 0, 0.26) 42%,
            rgba(0, 0, 0, 0.04) 75%);
}


.about-next__content {
    position: relative;

    z-index: 2;

    width: min(520px, 80%);

    margin-left: 9vw;
}


.about-next__label {
    color: rgba(255, 255, 255, 0.85);
}


.about-next__title {
    margin: 0;

    font-family: "Times New Roman", serif;

    font-size: clamp(48px, 5vw, 74px);
    font-weight: 400;

    line-height: 1;

    letter-spacing: 0.10em;
}


.about-next__catch {
    margin: 28px 0 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 20px;

    line-height: 1.8;
    letter-spacing: 0.09em;
}


.about-next__text {
    margin: 22px 0 32px;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 11px;

    line-height: 2;
    letter-spacing: 0.06em;
}


/* CONTACT BUTTON */

.about-next__button {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 240px;
    height: 52px;

    padding: 0 22px;

    box-sizing: border-box;

    border: 1px solid rgba(255, 255, 255, 0.9);

    color: #ffffff;
    text-decoration: none;

    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 10px;

    letter-spacing: 0.15em;

    transition:
        background-color 0.35s ease,
        color 0.35s ease;
}


.about-next__button:hover {
    background-color: #ffffff;

    color: #111111;
}



/* ========================================
   TABLET
   768px - 1100px
======================================== */

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


    /* HERO */

    .about-hero {
        height: 650px;
    }


    .about-hero__content {
        left: 6vw;

        width: 48%;
    }


    .about-hero__title {
        font-size: clamp(40px, 5vw, 58px);
    }


    .about-hero__catch {
        font-size: 17px;
    }



    /* PHILOSOPHY */

    .about-philosophy {
        padding: 100px 6vw;
    }


    .about-philosophy__inner {
        grid-template-columns: 45% 55%;
    }


    .about-philosophy__content {
        padding-right: 45px;
    }


    .about-philosophy__image {
        height: 390px;
    }



    /* PROFILE */

    .about-profile {
        padding: 0 5vw 100px;
    }


    .about-profile__inner {
        grid-template-columns: 35% 65%;
    }


    .about-profile__content {
        padding: 55px 45px;
    }


    .about-profile__info {
        grid-column: 1 / -1;

        margin-top: 35px;
    }


    .about-profile__info dl {
        display: grid;
        grid-template-columns: repeat(2, 1fr);

        gap: 0 40px;
    }



    /* MY STORY */

    .about-story {
        padding: 100px 5vw 110px;
    }


    .about-story__list {
        grid-template-columns: repeat(2, 1fr);

        gap: 60px 35px;
    }


    .about-story-card__title {
        min-height: auto;
    }



    /* VALUE */

    .about-value {
        padding: 100px 5vw 110px;
    }


    .about-value__list {
        gap: 18px;
    }


    .about-value-card {
        display: block;
    }


    .about-value-card__content {
        min-height: 210px;
    }



    /* MESSAGE */

    .about-message {
        padding: 100px 5vw;
    }


    .about-message__inner {
        grid-template-columns: 52% 48%;
    }


    .about-message__content {
        padding-left: 50px;
    }


    .about-message__image {
        height: 500px;
    }

}



/* ========================================
   SMARTPHONE
   767px以下
======================================== */

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


    /* ========================================
       HERO
    ======================================== */

    .about-hero {
        height: 650px;
    }


    .about-hero__image img {
        /*
        カメラマンと新郎新婦を
        スマホ画面内へ残す
        */
        object-position: 52% center;
    }


    .about-hero__overlay {
        background:
            linear-gradient(0deg,
                rgba(0, 0, 0, 0.70) 0%,
                rgba(0, 0, 0, 0.28) 52%,
                rgba(0, 0, 0, 0.04) 100%);
    }


    .about-hero__content {
        top: auto;
        right: 24px;
        bottom: 60px;
        left: 24px;

        transform: none;

        width: auto;
    }


    .about-hero__label {
        margin-bottom: 16px;

        font-size: 10px;
    }


    .about-hero__title {
        font-size: 38px;

        line-height: 1.2;
    }


    .about-hero__catch {
        margin-top: 20px;

        font-size: 16px;

        line-height: 1.9;
    }


    .about-hero__scroll {
        display: none;
    }



    /* ========================================
       PHILOSOPHY
    ======================================== */

    .about-philosophy {
        padding: 75px 24px 85px;
    }


    .about-philosophy__inner {
        display: flex;
        flex-direction: column;
    }


    .about-philosophy__content {
        order: 1;

        width: 100%;

        padding: 0;
    }


    .about-philosophy__title {
        font-size: 28px;
    }


    .about-philosophy__text {
        margin-top: 30px;

        font-size: 11px;
    }


    .about-philosophy__image {
        order: 2;

        width: 100%;
        height: 300px;

        margin-top: 45px;
    }



    /* ========================================
       PROFILE
    ======================================== */

    .about-profile {
        padding: 60px 24px 80px;
    }


    .about-profile__inner {
        display: block;
    }


    .about-profile__image {
        width: 100%;
        height: auto;

        aspect-ratio: 4 / 5;
    }


    .about-profile__content {
        padding: 45px 0;
    }


    .about-profile__name-en {
        font-size: 31px;
    }


    .about-profile__name-ja {
        font-size: 16px;
    }


    .about-profile__message {
        font-size: 11px;
    }


    .about-profile__info {
        margin: 0;

        padding: 28px 24px;
    }


    .about-profile__info dl {
        display: block;
    }



    /* ========================================
       MY STORY
    ======================================== */

    .about-story {
        padding: 80px 24px 90px;
    }


    .about-story__heading {
        display: block;

        margin-bottom: 50px;
    }


    .about-story__title {
        font-size: 30px;
    }


    .about-story__lead {
        margin-top: 28px;
    }


    .about-story__list {
        display: block;
    }


    .about-story-card {
        margin-bottom: 65px;
    }


    .about-story-card:last-child {
        margin-bottom: 0;
    }


    .about-story-card__image {
        margin-bottom: 20px;
    }


    .about-story-card__title {
        min-height: 0;

        font-size: 17px;
    }


    .about-story-card__text {
        font-size: 11px;
    }



    /* ========================================
       WHAT I VALUE
    ======================================== */

    .about-value {
        padding: 80px 24px 90px;
    }


    .about-value__heading {
        margin-bottom: 45px;
    }


    .about-value__title {
        font-size: 29px;
    }


    .about-value__list {
        display: block;
    }


    .about-value-card {
        display: grid;
        grid-template-columns: 52% 48%;

        margin-bottom: 25px;
    }


    .about-value-card:last-child {
        margin-bottom: 0;
    }


    .about-value-card__content {
        min-height: 0;

        padding: 22px 18px;
    }


    .about-value-card__title {
        font-size: 21px;
    }


    .about-value-card__text {
        margin-top: 15px;

        font-size: 9px;
    }



    /* ========================================
       MESSAGE
    ======================================== */

    .about-message {
        padding: 80px 24px 90px;
    }


    .about-message__inner {
        display: flex;
        flex-direction: column;
    }


    .about-message__image {
        order: 1;

        width: 100%;
        height: 380px;
    }


    .about-message__content {
        order: 2;

        padding: 50px 0 0;
    }


    .about-message__title {
        font-size: 27px;
    }


    .about-message__text {
        margin-top: 30px;

        font-size: 11px;
    }



    /* ========================================
       NEXT / CONTACT
    ======================================== */

    .about-next {
        height: 570px;

        align-items: flex-end;
    }


    .about-next__image img {
        object-position: 62% center;
    }


    .about-next__overlay {
        background:
            linear-gradient(0deg,
                rgba(0, 0, 0, 0.72) 0%,
                rgba(0, 0, 0, 0.28) 65%,
                rgba(0, 0, 0, 0.03) 100%);
    }


    .about-next__content {
        width: 100%;

        margin: 0;

        padding: 55px 24px;

        box-sizing: border-box;
    }


    .about-next__title {
        font-size: 46px;
    }


    .about-next__catch {
        margin-top: 22px;

        font-size: 18px;
    }


    .about-next__text {
        font-size: 11px;
    }


    .about-next__button {
        width: 100%;
        max-width: 280px;
    }

}



/* ========================================
   FAQ PAGE
======================================== */


/* ----------------------------------------
   COMMON
---------------------------------------- */

.faq-page {
    margin: 0;
    padding: 0;

    background-color: #ffffff;
    color: #171717;
}


.faq-page img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.faq-section-label {
    margin: 0 0 18px;

    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 10px;
    font-weight: 400;

    letter-spacing: 0.20em;
}



/* ========================================
   01 HERO
======================================== */

.faq-hero {
    position: relative;

    width: 100%;
    height: 720px;

    overflow: hidden;

    color: #ffffff;
}


.faq-hero__image {
    position: absolute;
    inset: 0;
}


.faq-hero__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* HERO GRADATION */

.faq-hero__overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.48) 0%,
            rgba(0, 0, 0, 0.27) 35%,
            rgba(0, 0, 0, 0.08) 65%,
            rgba(0, 0, 0, 0.02) 100%);
}


/* HERO CONTENT */

.faq-hero__content {
    position: absolute;

    z-index: 2;

    top: 50%;
    left: 8vw;

    transform: translateY(-43%);

    width: min(580px, 70%);
}


.faq-hero__label {
    margin: 0 0 22px;

    font-family: "Times New Roman", serif;
    font-size: 13px;
    font-weight: 400;

    letter-spacing: 0.22em;
}


.faq-hero__title {
    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: clamp(42px, 4.3vw, 66px);
    font-weight: 400;

    line-height: 1.45;
    letter-spacing: 0.08em;
}


.faq-hero__text {
    margin: 28px 0 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 13px;

    line-height: 2;
    letter-spacing: 0.06em;
}


/* SCROLL */

.faq-hero__scroll {
    position: absolute;

    z-index: 2;

    right: 5vw;
    bottom: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 12px;

    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 8px;

    letter-spacing: 0.20em;

    writing-mode: vertical-rl;
}


.faq-hero__scroll-line {
    display: block;

    width: 1px;
    height: 55px;

    background-color: rgba(255, 255, 255, 0.8);
}



/* ========================================
   02 INTRODUCTION
======================================== */

.faq-intro {
    padding: 120px 8vw 130px;

    background-color: #ffffff;
}


.faq-intro__inner {
    width: min(1040px, 100%);

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 120px;

    align-items: center;
}


.faq-intro__title {
    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: clamp(30px, 3vw, 44px);
    font-weight: 400;

    line-height: 1.7;
    letter-spacing: 0.08em;
}


.faq-intro__text {
    color: #444444;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 12px;

    line-height: 2.1;
    letter-spacing: 0.05em;
}


.faq-intro__text p {
    margin: 0 0 24px;
}


.faq-intro__text p:last-child {
    margin-bottom: 0;
}



/* ========================================
   03 FAQ CONTENT
======================================== */

.faq-content {
    padding: 0 7vw 140px;

    background-color: #ffffff;
}


.faq-content__inner {
    width: min(1240px, 100%);

    margin: 0 auto;
}



/* ========================================
   FAQ CATEGORY
======================================== */

.faq-category {
    display: grid;
    grid-template-columns: 32% 68%;

    margin-bottom: 110px;

    border-top: 1px solid #d8d8d8;
}


.faq-category:last-child {
    margin-bottom: 0;
}



/* ----------------------------------------
   CATEGORY VISUAL
---------------------------------------- */

.faq-category__visual {
    padding: 42px 50px 0 0;

    box-sizing: border-box;
}


.faq-category__image {
    width: 100%;

    margin: 0 0 32px;

    aspect-ratio: 4 / 3;

    overflow: hidden;
}


.faq-category__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.7s ease;
}


.faq-category:hover .faq-category__image img {
    transform: scale(1.02);
}


.faq-category__heading {
    position: relative;
}


.faq-category__number {
    margin: 0 0 12px;

    color: #888888;

    font-family: "Times New Roman", serif;
    font-size: 12px;

    letter-spacing: 0.12em;
}


.faq-category__title {
    margin: 0;

    font-family: "Times New Roman", serif;

    font-size: clamp(34px, 3.3vw, 48px);
    font-weight: 400;

    line-height: 1;

    letter-spacing: 0.08em;
}


.faq-category__jp {
    margin: 13px 0 0;

    color: #555555;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 11px;

    letter-spacing: 0.10em;
}



/* ========================================
   FAQ LIST
======================================== */

.faq-list {
    border-left: 1px solid #e0e0e0;
}



/* ========================================
   FAQ ITEM
======================================== */

.faq-item {
    border-bottom: 1px solid #d8d8d8;
}


.faq-item:first-child {
    border-top: none;
}



/* QUESTION */

.faq-item__question {
    position: relative;

    width: 100%;
    min-height: 100px;

    display: grid;
    grid-template-columns: 45px 1fr 30px;

    gap: 18px;

    align-items: center;

    padding: 25px 28px 25px 42px;

    border: 0;

    background-color: transparent;

    color: #171717;

    text-align: left;

    cursor: pointer;

    box-sizing: border-box;

    transition: background-color 0.3s ease;
}


.faq-item__question:hover {
    background-color: #faf9f7;
}


.faq-item__q {
    align-self: start;

    padding-top: 2px;

    font-family: "Times New Roman", serif;

    font-size: 21px;
    font-weight: 400;

    line-height: 1.5;
}


.faq-item__question-text {
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 14px;
    font-weight: 400;

    line-height: 1.8;
    letter-spacing: 0.06em;
}



/* ========================================
   PLUS / MINUS ICON
======================================== */

.faq-item__icon {
    position: relative;

    display: block;

    width: 22px;
    height: 22px;
}


.faq-item__icon::before,
.faq-item__icon::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    background-color: #333333;

    transform: translate(-50%, -50%);

    transition:
        transform 0.35s ease,
        opacity 0.35s ease;
}


/* HORIZONTAL */

.faq-item__icon::before {
    width: 18px;
    height: 1px;
}


/* VERTICAL */

.faq-item__icon::after {
    width: 1px;
    height: 18px;
}


/* OPEN = MINUS */

.faq-item.is-open .faq-item__icon::after {
    opacity: 0;

    transform:
        translate(-50%, -50%) rotate(90deg);
}



/* ========================================
   ANSWER
======================================== */

.faq-item__answer {
    max-height: 0;

    overflow: hidden;

    background-color: #f7f5f1;

    transition:
        max-height 0.45s ease;
}


.faq-item__answer-inner {
    display: grid;
    grid-template-columns: 45px 1fr;

    gap: 18px;

    padding: 30px 70px 35px 42px;

    box-sizing: border-box;
}


.faq-item__a {
    font-family: "Times New Roman", serif;

    font-size: 21px;

    line-height: 1.6;
}


.faq-item__answer p {
    margin: 0;

    color: #555555;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 12px;

    line-height: 2.1;
    letter-spacing: 0.05em;
}



/* ========================================
   OPEN QUESTION
======================================== */

.faq-item.is-open .faq-item__question {
    background-color: #ffffff;
}


.faq-item.is-open .faq-item__q {
    color: #777777;
}



/* ========================================
   04 CONTACT CTA
======================================== */

.faq-contact {
    padding: 120px 7vw;

    background-color: #f7f5f1;
}


.faq-contact__inner {
    width: min(1200px, 100%);

    margin: 0 auto;

    display: grid;
    grid-template-columns: 42% 58%;

    align-items: center;

    background-color: #ffffff;
}


.faq-contact__content {
    padding: 70px;

    box-sizing: border-box;
}


.faq-contact__title {
    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: clamp(30px, 3vw, 43px);
    font-weight: 400;

    line-height: 1.7;
    letter-spacing: 0.08em;

    /* 途中で不自然に改行されるのを防ぐ */
    white-space: nowrap;

}


.faq-contact__text {
    margin: 30px 0;

    color: #555555;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 11px;

    line-height: 2;
    letter-spacing: 0.05em;
}



/* CONTACT BUTTON */

.faq-contact__button {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 240px;
    height: 52px;

    padding: 0 22px;

    box-sizing: border-box;

    border: 1px solid #555555;

    color: #111111;
    text-decoration: none;

    font-family: Arial, "Helvetica Neue", sans-serif;

    font-size: 10px;
    font-weight: 400;

    letter-spacing: 0.15em;

    transition:
        background-color 0.35s ease,
        color 0.35s ease;
}


.faq-contact__button:hover {
    background-color: #111111;

    color: #ffffff;
}



/* CONTACT IMAGE */

.faq-contact__image {
    width: 100%;
    height: 480px;

    margin: 0;

    overflow: hidden;
}


.faq-contact__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}



/* ========================================
   05 FINAL VISUAL
======================================== */

.faq-final {
    position: relative;

    width: 100%;
    height: 600px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    color: #ffffff;

    text-align: center;
}


.faq-final__image {
    position: absolute;
    inset: 0;
}


.faq-final__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


.faq-final__overlay {
    position: absolute;
    inset: 0;

    background-color: rgba(0, 0, 0, 0.20);
}


.faq-final__content {
    position: relative;

    z-index: 2;

    padding: 30px;
}


.faq-final__text {
    margin: 0;

    font-family: "Times New Roman", serif;

    font-size: clamp(38px, 4.5vw, 68px);
    font-weight: 400;

    line-height: 1.2;
    letter-spacing: 0.07em;
}


.faq-final__jp {
    margin: 22px 0 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 14px;

    line-height: 1.8;
    letter-spacing: 0.12em;
}



/* ========================================
   TABLET
   768px - 1100px
======================================== */

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


    /* ========================================
       HERO
    ======================================== */

    .faq-hero {
        height: 650px;
    }


    .faq-hero__content {
        left: 7vw;

        width: 60%;
    }


    .faq-hero__title {
        font-size: clamp(38px, 5vw, 54px);
    }



    /* ========================================
       INTRO
    ======================================== */

    .faq-intro {
        padding: 100px 7vw 110px;
    }


    .faq-intro__inner {
        gap: 70px;
    }



    /* ========================================
       FAQ CONTENT
    ======================================== */

    .faq-content {
        padding:
            0 6vw 110px;
    }


    .faq-category {
        grid-template-columns: 34% 66%;

        margin-bottom: 90px;
    }


    .faq-category__visual {
        padding-right: 35px;
    }


    .faq-item__question {
        padding:
            24px 22px 24px 30px;
    }


    .faq-item__answer-inner {
        padding:
            28px 50px 32px 30px;
    }



    /* ========================================
       CONTACT
    ======================================== */

    .faq-contact {
        padding: 100px 6vw;
    }


    .faq-contact__inner {
        grid-template-columns: 45% 55%;
    }


    .faq-contact__content {
        padding: 50px;
    }


    .faq-contact__image {
        height: 440px;
    }



    /* ========================================
       FINAL
    ======================================== */

    .faq-final {
        height: 520px;
    }

}



/* ========================================
   SMARTPHONE
   767px以下
======================================== */

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


    /* ========================================
       HERO
    ======================================== */

    .faq-hero {
        height: 650px;
    }


    .faq-hero__image img {
        object-position: 58% center;
    }


    .faq-hero__overlay {
        background:
            linear-gradient(0deg,
                rgba(0, 0, 0, 0.67) 0%,
                rgba(0, 0, 0, 0.30) 48%,
                rgba(0, 0, 0, 0.05) 100%);
    }


    .faq-hero__content {
        top: auto;
        right: 24px;
        bottom: 60px;
        left: 24px;

        transform: none;

        width: auto;
    }


    .faq-hero__label {
        margin-bottom: 16px;

        font-size: 10px;
    }


    .faq-hero__title {
        font-size: 32px;

        line-height: 1.55;
    }


    .faq-hero__text {
        margin-top: 20px;

        font-size: 11px;
    }


    .faq-hero__scroll {
        display: none;
    }



    /* ========================================
       INTRO
    ======================================== */

    .faq-intro {
        padding: 75px 24px 85px;
    }


    .faq-intro__inner {
        display: block;
    }


    .faq-intro__title {
        font-size: 28px;
    }


    .faq-intro__text {
        margin-top: 35px;

        font-size: 11px;
    }



    /* ========================================
       FAQ CONTENT
    ======================================== */

    .faq-content {
        padding:
            0 24px 90px;
    }



    /* CATEGORY */

    .faq-category {
        display: block;

        margin-bottom: 80px;

        border-top: 1px solid #d8d8d8;
    }


    .faq-category__visual {
        padding:
            35px 0 30px;
    }


    .faq-category__image {
        margin-bottom: 25px;

        aspect-ratio: 4 / 3;
    }


    .faq-category__number {
        margin-bottom: 10px;

        font-size: 11px;
    }


    .faq-category__title {
        font-size: 36px;
    }


    .faq-category__jp {
        margin-top: 10px;

        font-size: 10px;
    }



    /* ========================================
       FAQ LIST
    ======================================== */

    .faq-list {
        border-left: none;

        border-top: 1px solid #d8d8d8;
    }



    /* QUESTION */

    .faq-item__question {
        min-height: 88px;

        grid-template-columns: 32px 1fr 24px;

        gap: 10px;

        padding:
            22px 5px 22px 0;
    }


    .faq-item__q {
        font-size: 18px;
    }


    .faq-item__question-text {
        padding-right: 5px;

        font-size: 12px;

        line-height: 1.8;
    }



    /* PLUS */

    .faq-item__icon {
        width: 20px;
        height: 20px;
    }


    .faq-item__icon::before {
        width: 16px;
    }


    .faq-item__icon::after {
        height: 16px;
    }



    /* ANSWER */

    .faq-item__answer-inner {
        grid-template-columns: 32px 1fr;

        gap: 10px;

        padding:
            25px 10px 30px 0;
    }


    .faq-item__a {
        font-size: 18px;
    }


    .faq-item__answer p {
        font-size: 11px;

        line-height: 2;
    }



    /* ========================================
       CONTACT CTA
    ======================================== */

    .faq-contact {
        padding: 75px 24px 85px;
    }


    .faq-contact__inner {
        display: flex;
        flex-direction: column;

        width: 100%;
    }


    .faq-contact__content {
        order: 2;

        width: 100%;

        padding: 45px 25px 50px;
    }


    .faq-contact__image {
        order: 1;

        width: 100%;
        height: 300px;
    }


    .faq-contact__image img {
        object-position: center;
    }


    .faq-contact__title {
        font-size: 28px;
    }


    .faq-contact__text {
        margin:
            25px 0 30px;

        font-size: 11px;
    }


    .faq-contact__button {
        width: 100%;
        max-width: 280px;
    }



    /* ========================================
       FINAL VISUAL
    ======================================== */

    .faq-final {
        height: 430px;
    }


    .faq-final__image img {
        /*
        瀬戸内の夕日を
        スマホでも中央に残す
        */
        object-position: 55% center;
    }


    .faq-final__overlay {
        background-color: rgba(0, 0, 0, 0.26);
    }


    .faq-final__content {
        padding: 24px;
    }


    .faq-final__text {
        font-size: 35px;

        line-height: 1.25;
    }


    .faq-final__jp {
        margin-top: 18px;

        font-size: 12px;

        line-height: 1.8;
    }

}



/* ========================================
   FAQ PAGE
======================================== */


/* ----------------------------------------
   COMMON
---------------------------------------- */

.faq-page {
    margin: 0;
    padding: 0;

    background-color: #ffffff;
    color: #171717;
}


.faq-page img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.faq-section-label {
    margin: 0 0 18px;

    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 10px;
    font-weight: 400;

    letter-spacing: 0.20em;
}



/* ========================================
   01 HERO
======================================== */

.faq-hero {
    position: relative;

    width: 100%;
    height: 720px;

    overflow: hidden;

    color: #ffffff;
}


.faq-hero__image {
    position: absolute;
    inset: 0;
}


.faq-hero__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* HERO GRADATION */

.faq-hero__overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.48) 0%,
            rgba(0, 0, 0, 0.27) 35%,
            rgba(0, 0, 0, 0.08) 65%,
            rgba(0, 0, 0, 0.02) 100%);
}


/* HERO CONTENT */

.faq-hero__content {
    position: absolute;

    z-index: 2;

    top: 50%;
    left: 8vw;

    transform: translateY(-43%);

    width: min(580px, 70%);
}


.faq-hero__label {
    margin: 0 0 22px;

    font-family: "Times New Roman", serif;
    font-size: 13px;
    font-weight: 400;

    letter-spacing: 0.22em;
}


.faq-hero__title {
    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: clamp(42px, 4.3vw, 66px);
    font-weight: 400;

    line-height: 1.45;
    letter-spacing: 0.08em;
}


.faq-hero__text {
    margin: 28px 0 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 13px;

    line-height: 2;
    letter-spacing: 0.06em;
}


/* SCROLL */

.faq-hero__scroll {
    position: absolute;

    z-index: 2;

    right: 5vw;
    bottom: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 12px;

    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 8px;

    letter-spacing: 0.20em;

    writing-mode: vertical-rl;
}


.faq-hero__scroll-line {
    display: block;

    width: 1px;
    height: 55px;

    background-color: rgba(255, 255, 255, 0.8);
}



/* ========================================
   02 INTRODUCTION
======================================== */

.faq-intro {
    padding: 120px 8vw 130px;

    background-color: #ffffff;
}


.faq-intro__inner {
    width: min(1040px, 100%);

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 120px;

    align-items: center;
}


.faq-intro__title {
    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: clamp(30px, 3vw, 44px);
    font-weight: 400;

    line-height: 1.7;
    letter-spacing: 0.08em;
}


.faq-intro__text {
    color: #444444;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 12px;

    line-height: 2.1;
    letter-spacing: 0.05em;
}


.faq-intro__text p {
    margin: 0 0 24px;
}


.faq-intro__text p:last-child {
    margin-bottom: 0;
}



/* ========================================
   03 FAQ CONTENT
======================================== */

.faq-content {
    padding: 0 7vw 140px;

    background-color: #ffffff;
}


.faq-content__inner {
    width: min(1240px, 100%);

    margin: 0 auto;
}



/* ========================================
   FAQ CATEGORY
======================================== */

.faq-category {
    display: grid;
    grid-template-columns: 32% 68%;

    margin-bottom: 110px;

    border-top: 1px solid #d8d8d8;
}


.faq-category:last-child {
    margin-bottom: 0;
}



/* ----------------------------------------
   CATEGORY VISUAL
---------------------------------------- */

.faq-category__visual {
    padding: 42px 50px 0 0;

    box-sizing: border-box;
}


.faq-category__image {
    width: 100%;

    margin: 0 0 32px;

    aspect-ratio: 4 / 3;

    overflow: hidden;
}


.faq-category__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.7s ease;
}


.faq-category:hover .faq-category__image img {
    transform: scale(1.02);
}


.faq-category__heading {
    position: relative;
}


.faq-category__number {
    margin: 0 0 12px;

    color: #888888;

    font-family: "Times New Roman", serif;
    font-size: 12px;

    letter-spacing: 0.12em;
}


.faq-category__title {
    margin: 0;

    font-family: "Times New Roman", serif;

    font-size: clamp(34px, 3.3vw, 48px);
    font-weight: 400;

    line-height: 1;

    letter-spacing: 0.08em;
}


.faq-category__jp {
    margin: 13px 0 0;

    color: #555555;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 11px;

    letter-spacing: 0.10em;
}



/* ========================================
   FAQ LIST
======================================== */

.faq-list {
    border-left: 1px solid #e0e0e0;
}



/* ========================================
   FAQ ITEM
======================================== */

.faq-item {
    border-bottom: 1px solid #d8d8d8;
}


.faq-item:first-child {
    border-top: none;
}



/* QUESTION */

.faq-item__question {
    position: relative;

    width: 100%;
    min-height: 100px;

    display: grid;
    grid-template-columns: 45px 1fr 30px;

    gap: 18px;

    align-items: center;

    padding: 25px 28px 25px 42px;

    border: 0;

    background-color: transparent;

    color: #171717;

    text-align: left;

    cursor: pointer;

    box-sizing: border-box;

    transition: background-color 0.3s ease;
}


.faq-item__question:hover {
    background-color: #faf9f7;
}


.faq-item__q {
    align-self: start;

    padding-top: 2px;

    font-family: "Times New Roman", serif;

    font-size: 21px;
    font-weight: 400;

    line-height: 1.5;
}


.faq-item__question-text {
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 14px;
    font-weight: 400;

    line-height: 1.8;
    letter-spacing: 0.06em;
}



/* ========================================
   PLUS / MINUS ICON
======================================== */

.faq-item__icon {
    position: relative;

    display: block;

    width: 22px;
    height: 22px;
}


.faq-item__icon::before,
.faq-item__icon::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    background-color: #333333;

    transform: translate(-50%, -50%);

    transition:
        transform 0.35s ease,
        opacity 0.35s ease;
}


/* HORIZONTAL */

.faq-item__icon::before {
    width: 18px;
    height: 1px;
}


/* VERTICAL */

.faq-item__icon::after {
    width: 1px;
    height: 18px;
}


/* OPEN = MINUS */

.faq-item.is-open .faq-item__icon::after {
    opacity: 0;

    transform:
        translate(-50%, -50%) rotate(90deg);
}



/* ========================================
   ANSWER
======================================== */

.faq-item__answer {
    max-height: 0;

    overflow: hidden;

    background-color: #f7f5f1;

    transition:
        max-height 0.45s ease;
}


.faq-item__answer-inner {
    display: grid;
    grid-template-columns: 45px 1fr;

    gap: 18px;

    padding: 30px 70px 35px 42px;

    box-sizing: border-box;
}


.faq-item__a {
    font-family: "Times New Roman", serif;

    font-size: 21px;

    line-height: 1.6;
}


.faq-item__answer p {
    margin: 0;

    color: #555555;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 12px;

    line-height: 2.1;
    letter-spacing: 0.05em;
}



/* ========================================
   OPEN QUESTION
======================================== */

.faq-item.is-open .faq-item__question {
    background-color: #ffffff;
}


.faq-item.is-open .faq-item__q {
    color: #777777;
}



/* ========================================
   04 CONTACT CTA
======================================== */

.faq-contact {
    padding: 120px 7vw;

    background-color: #f7f5f1;
}


.faq-contact__inner {
    width: min(1200px, 100%);

    margin: 0 auto;

    display: grid;
    grid-template-columns: 42% 58%;

    align-items: center;

    background-color: #ffffff;
}


.faq-contact__content {
    padding: 70px;

    box-sizing: border-box;
}


.faq-contact__title {
    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: clamp(30px, 3vw, 43px);
    font-weight: 400;

    line-height: 1.7;
    letter-spacing: 0.08em;
}


.faq-contact__text {
    margin: 30px 0;

    color: #555555;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 11px;

    line-height: 2;
    letter-spacing: 0.05em;
}



/* CONTACT BUTTON */

.faq-contact__button {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 240px;
    height: 52px;

    padding: 0 22px;

    box-sizing: border-box;

    border: 1px solid #555555;

    color: #111111;
    text-decoration: none;

    font-family: Arial, "Helvetica Neue", sans-serif;

    font-size: 10px;
    font-weight: 400;

    letter-spacing: 0.15em;

    transition:
        background-color 0.35s ease,
        color 0.35s ease;
}


.faq-contact__button:hover {
    background-color: #111111;

    color: #ffffff;
}



/* CONTACT IMAGE */

.faq-contact__image {
    width: 100%;
    height: 480px;

    margin: 0;

    overflow: hidden;
}


.faq-contact__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}



/* ========================================
   05 FINAL VISUAL
======================================== */

.faq-final {
    position: relative;

    width: 100%;
    height: 600px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    color: #ffffff;

    text-align: center;
}


.faq-final__image {
    position: absolute;
    inset: 0;
}


.faq-final__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


.faq-final__overlay {
    position: absolute;
    inset: 0;

    background-color: rgba(0, 0, 0, 0.20);
}


.faq-final__content {
    position: relative;

    z-index: 2;

    padding: 30px;
}


.faq-final__text {
    margin: 0;

    font-family: "Times New Roman", serif;

    font-size: clamp(38px, 4.5vw, 68px);
    font-weight: 400;

    line-height: 1.2;
    letter-spacing: 0.07em;
}


.faq-final__jp {
    margin: 22px 0 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 14px;

    line-height: 1.8;
    letter-spacing: 0.12em;
}



/* ========================================
   TABLET
   768px - 1100px
======================================== */

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


    /* ========================================
       HERO
    ======================================== */

    .faq-hero {
        height: 650px;
    }


    .faq-hero__content {
        left: 7vw;

        width: 60%;
    }


    .faq-hero__title {
        font-size: clamp(38px, 5vw, 54px);
    }



    /* ========================================
       INTRO
    ======================================== */

    .faq-intro {
        padding: 100px 7vw 110px;
    }


    .faq-intro__inner {
        gap: 70px;
    }



    /* ========================================
       FAQ CONTENT
    ======================================== */

    .faq-content {
        padding:
            0 6vw 110px;
    }


    .faq-category {
        grid-template-columns: 34% 66%;

        margin-bottom: 90px;
    }


    .faq-category__visual {
        padding-right: 35px;
    }


    .faq-item__question {
        padding:
            24px 22px 24px 30px;
    }


    .faq-item__answer-inner {
        padding:
            28px 50px 32px 30px;
    }



    /* ========================================
       CONTACT
    ======================================== */

    .faq-contact {
        padding: 100px 6vw;
    }


    .faq-contact__inner {
        grid-template-columns: 45% 55%;
    }


    .faq-contact__content {
        padding: 50px;
    }


    .faq-contact__image {
        height: 440px;
    }



    /* ========================================
       FINAL
    ======================================== */

    .faq-final {
        height: 520px;
    }

}



/* ========================================
   SMARTPHONE
   767px以下
======================================== */

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


    /* ========================================
       HERO
    ======================================== */

    .faq-hero {
        height: 650px;
    }


    .faq-hero__image img {
        object-position: 58% center;
    }


    .faq-hero__overlay {
        background:
            linear-gradient(0deg,
                rgba(0, 0, 0, 0.67) 0%,
                rgba(0, 0, 0, 0.30) 48%,
                rgba(0, 0, 0, 0.05) 100%);
    }


    .faq-hero__content {
        top: auto;
        right: 24px;
        bottom: 60px;
        left: 24px;

        transform: none;

        width: auto;
    }


    .faq-hero__label {
        margin-bottom: 16px;

        font-size: 10px;
    }


    .faq-hero__title {
        font-size: 32px;

        line-height: 1.55;
    }


    .faq-hero__text {
        margin-top: 20px;

        font-size: 11px;
    }


    .faq-hero__scroll {
        display: none;
    }



    /* ========================================
       INTRO
    ======================================== */

    .faq-intro {
        padding: 75px 24px 85px;
    }


    .faq-intro__inner {
        display: block;
    }


    .faq-intro__title {
        font-size: 28px;
    }


    .faq-intro__text {
        margin-top: 35px;

        font-size: 11px;
    }



    /* ========================================
       FAQ CONTENT
    ======================================== */

    .faq-content {
        padding:
            0 24px 90px;
    }



    /* CATEGORY */

    .faq-category {
        display: block;

        margin-bottom: 80px;

        border-top: 1px solid #d8d8d8;
    }


    .faq-category__visual {
        padding:
            35px 0 30px;
    }


    .faq-category__image {
        margin-bottom: 25px;

        aspect-ratio: 4 / 3;
    }


    .faq-category__number {
        margin-bottom: 10px;

        font-size: 11px;
    }


    .faq-category__title {
        font-size: 36px;
    }


    .faq-category__jp {
        margin-top: 10px;

        font-size: 10px;
    }



    /* ========================================
       FAQ LIST
    ======================================== */

    .faq-list {
        border-left: none;

        border-top: 1px solid #d8d8d8;
    }



    /* QUESTION */

    .faq-item__question {
        min-height: 88px;

        grid-template-columns: 32px 1fr 24px;

        gap: 10px;

        padding:
            22px 5px 22px 0;
    }


    .faq-item__q {
        font-size: 18px;
    }


    .faq-item__question-text {
        padding-right: 5px;

        font-size: 12px;

        line-height: 1.8;
    }



    /* PLUS */

    .faq-item__icon {
        width: 20px;
        height: 20px;
    }


    .faq-item__icon::before {
        width: 16px;
    }


    .faq-item__icon::after {
        height: 16px;
    }



    /* ANSWER */

    .faq-item__answer-inner {
        grid-template-columns: 32px 1fr;

        gap: 10px;

        padding:
            25px 10px 30px 0;
    }


    .faq-item__a {
        font-size: 18px;
    }


    .faq-item__answer p {
        font-size: 11px;

        line-height: 2;
    }



    /* ========================================
       CONTACT CTA
    ======================================== */

    .faq-contact {
        padding: 75px 24px 85px;
    }


    .faq-contact__inner {
        display: flex;
        flex-direction: column;

        width: 100%;
    }


    .faq-contact__content {
        order: 2;

        width: 100%;

        padding: 45px 25px 50px;
    }


    .faq-contact__image {
        order: 1;

        width: 100%;
        height: 300px;
    }


    .faq-contact__image img {
        object-position: center;
    }


    .faq-contact__title {
        font-size: 28px;
    }


    .faq-contact__text {
        margin:
            25px 0 30px;

        font-size: 11px;
    }


    .faq-contact__button {
        width: 100%;
        max-width: 280px;
    }



    /* ========================================
       FINAL VISUAL
    ======================================== */

    .faq-final {
        height: 430px;
    }


    .faq-final__image img {
        /*
        瀬戸内の夕日を
        スマホでも中央に残す
        */
        object-position: 55% center;
    }


    .faq-final__overlay {
        background-color: rgba(0, 0, 0, 0.26);
    }


    .faq-final__content {
        padding: 24px;
    }


    .faq-final__text {
        font-size: 35px;

        line-height: 1.25;
    }


    .faq-final__jp {
        margin-top: 18px;

        font-size: 12px;

        line-height: 1.8;
    }

}



/* ========================================
   CONTACT PAGE
======================================== */


/* ----------------------------------------
   COMMON
---------------------------------------- */

.contact-page {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    color: #171717;
}

.contact-page img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-section-label,
.contact-final__label {
    margin: 0 0 18px;

    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 10px;
    font-weight: 400;

    letter-spacing: 0.20em;
}


/* ========================================
   01 HERO
======================================== */

.contact-hero {
    position: relative;

    width: 100%;
    height: 720px;

    overflow: hidden;

    color: #ffffff;
}

.contact-hero__image {
    position: absolute;
    inset: 0;
}

.contact-hero__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* HERO OVERLAY */

.contact-hero__overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.48) 0%,
            rgba(0, 0, 0, 0.27) 35%,
            rgba(0, 0, 0, 0.08) 65%,
            rgba(0, 0, 0, 0.01) 100%);
}


/* HERO CONTENT */

.contact-hero__content {
    position: absolute;

    z-index: 2;

    top: 50%;
    left: 8vw;

    transform: translateY(-43%);

    width: min(600px, 70%);
}

.contact-hero__label {
    margin: 0 0 22px;

    font-family: "Times New Roman", serif;
    font-size: 12px;
    font-weight: 400;

    letter-spacing: 0.22em;
}

.contact-hero__title {
    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: clamp(40px, 4.2vw, 64px);
    font-weight: 400;

    line-height: 1.55;
    letter-spacing: 0.08em;

    width: max-content;

    max-width: none;

}

.contact-hero__text {
    margin: 28px 0 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 12px;

    line-height: 2;
    letter-spacing: 0.06em;
}


/* SCROLL */

.contact-hero__scroll {
    position: absolute;

    z-index: 2;

    left: 3vw;
    bottom: 28px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 10px;

    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 8px;

    letter-spacing: 0.18em;
}

.contact-hero__scroll-line {
    display: block;

    width: 1px;
    height: 45px;

    background-color: rgba(255, 255, 255, 0.8);
}


/* ========================================
   02 MESSAGE
======================================== */

.contact-message {
    padding: 115px 7vw 130px;

    background-color: #ffffff;
}

.contact-message__intro {
    width: min(1100px, 100%);

    margin: 0 auto 60px;
}

.contact-message__title {
    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: clamp(30px, 3vw, 44px);
    font-weight: 400;

    line-height: 1.6;
    letter-spacing: 0.08em;
}

.contact-message__inner {
    width: min(1200px, 100%);

    margin: 0 auto;

    display: grid;
    grid-template-columns: 55% 45%;

    align-items: stretch;
}

.contact-message__image {
    min-height: 500px;

    margin: 0;

    overflow: hidden;
}

.contact-message__image img {
    object-position: center;
}

.contact-message__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 65px 70px;

    box-sizing: border-box;

    background-color: #f7f5f1;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: 12px;

    line-height: 2.1;
    letter-spacing: 0.05em;

    color: #444444;
}

.contact-message__content>p {
    margin: 0 0 25px;
}

.contact-message__small {
    margin-top: 18px;
    padding-top: 28px;

    border-top: 1px solid #d8d5cf;

    font-size: 11px;
}

.contact-message__small p {
    margin: 0;
}


/* ========================================
   03 BEFORE CONTACT
======================================== */

.contact-before {
    padding: 120px 6vw;

    background-color: #f7f5f1;
}

.contact-before__inner {
    width: min(1320px, 100%);

    margin: 0 auto;
}

.contact-before__heading {
    margin-bottom: 65px;

    text-align: center;
}

.contact-before__title {
    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: clamp(30px, 3vw, 43px);
    font-weight: 400;

    line-height: 1.6;
    letter-spacing: 0.08em;
}

.contact-before__lead {
    margin: 25px 0 0;

    color: #555555;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 11px;

    line-height: 2;
    letter-spacing: 0.05em;
}


/* 5 ITEMS */

.contact-before__list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);

    border-top: 1px solid #d5d2cc;
    border-bottom: 1px solid #d5d2cc;
}

.contact-before-card {
    position: relative;

    min-height: 280px;

    padding: 40px 22px;

    box-sizing: border-box;

    text-align: center;

    border-right: 1px solid #d5d2cc;
}

.contact-before-card:last-child {
    border-right: 0;
}

.contact-before-card__icon {
    width: 44px;
    height: 44px;

    margin: 0 auto 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #bdb9b2;
    border-radius: 50%;

    font-family: "Times New Roman", serif;
    font-size: 17px;
}

.contact-before-card__number {
    margin: 0 0 8px;

    color: #888888;

    font-family: "Times New Roman", serif;
    font-size: 10px;

    letter-spacing: 0.12em;
}

.contact-before-card__title {
    margin: 0;

    font-family: "Times New Roman", serif;
    font-size: 13px;
    font-weight: 400;

    letter-spacing: 0.08em;
}

.contact-before-card__jp {
    margin: 12px 0 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 11px;

    letter-spacing: 0.08em;
}

.contact-before-card__text {
    margin: 15px 0 0;

    color: #666666;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 9px;

    line-height: 1.9;
    letter-spacing: 0.04em;
}


/* ========================================
   04 CONTACT FORM
======================================== */

.contact-form-section {
    padding: 130px 7vw;

    background-color: #ffffff;
}

.contact-form-section__inner {
    width: min(1150px, 100%);

    margin: 0 auto;

    display: grid;
    grid-template-columns: 32% 68%;

    border-top: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
}


/* FORM HEADING */

.contact-form-section__heading {
    padding: 60px 55px 60px 0;

    box-sizing: border-box;

    border-right: 1px solid #dddddd;
}

.contact-form-section__title {
    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: clamp(25px, 2.3vw, 34px);
    font-weight: 400;

    line-height: 1.6;
    letter-spacing: 0.07em;
}

.contact-form-section__text {
    margin: 30px 0 0;

    color: #555555;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 11px;

    line-height: 2;
    letter-spacing: 0.04em;
}

.contact-form-section__note {
    margin: 25px 0 0;

    color: #777777;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 10px;

    line-height: 1.9;
}


/* FORM AREA */

.contact-form-section__form {
    padding: 60px 0 60px 65px;

    box-sizing: border-box;
}

.contact-form {
    width: 100%;
}


/* FORM ROW */

.contact-form__row {
    margin: 0 0 25px;
    padding: 0;

    border: 0;
}

.contact-form__label {
    display: block;

    margin: 0 0 9px;

    font-family:
        "Yu Mincho",
        "YuMincho",
        sans-serif;

    font-size: 11px;

    line-height: 1.5;
    letter-spacing: 0.06em;
}

.contact-form__required {
    margin-left: 5px;

    color: #9b5f54;

    font-size: 10px;
}


/* INPUT */

.contact-form__input,
.contact-form__textarea {
    width: 100%;

    padding: 13px 15px;

    box-sizing: border-box;

    border: 1px solid #cccccc;
    border-radius: 0;

    outline: none;

    background-color: #ffffff;

    color: #222222;

    font-family:
        "Yu Mincho",
        "YuMincho",
        sans-serif;

    font-size: 12px;

    transition:
        border-color 0.3s ease,
        background-color 0.3s ease;
}

.contact-form__input {
    height: 46px;
}

.contact-form__textarea {
    min-height: 170px;

    resize: vertical;

    line-height: 1.8;
}

.contact-form__input:focus,
.contact-form__textarea:focus {
    border-color: #555555;

    background-color: #fdfdfc;
}


/* RADIO */

.contact-form__row--plan {
    margin-bottom: 28px;
}

.contact-form__radio-list {
    display: flex;
    flex-wrap: wrap;

    gap: 14px 28px;

    padding-top: 5px;
}

.contact-form__radio {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    cursor: pointer;

    font-family: Arial, "Helvetica Neue", sans-serif;
    font-size: 10px;

    letter-spacing: 0.06em;
}

.contact-form__radio input {
    width: 14px;
    height: 14px;

    margin: 0;

    accent-color: #222222;
}


/* SUBMIT */

.contact-form__submit {
    margin-top: 40px;

    display: flex;
    justify-content: flex-end;
}

.contact-form__button {
    width: 310px;
    height: 58px;

    padding: 0 25px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border: 1px solid #111111;

    background-color: #111111;

    color: #ffffff;

    cursor: pointer;

    font-family:
        "Yu Mincho",
        "YuMincho",
        sans-serif;

    font-size: 11px;

    letter-spacing: 0.10em;

    transition:
        background-color 0.35s ease,
        color 0.35s ease;
}

.contact-form__button:hover {
    background-color: #ffffff;
    color: #111111;
}


/* ========================================
   05 AFTER CONTACT
======================================== */

.contact-after {
    padding: 0 7vw 125px;

    background-color: #ffffff;
}

.contact-after__inner {
    width: min(1200px, 100%);

    margin: 0 auto;

    display: grid;
    grid-template-columns: 42% 58%;

    align-items: stretch;

    background-color: #f7f5f1;
}

.contact-after__image {
    min-height: 500px;

    margin: 0;

    overflow: hidden;
}

.contact-after__image img {
    object-position: center;
}

.contact-after__content {
    padding: 65px 70px;

    box-sizing: border-box;
}

.contact-after__title {
    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;

    font-size: clamp(28px, 2.8vw, 40px);
    font-weight: 400;

    line-height: 1.6;
    letter-spacing: 0.07em;
}

.contact-after__body {
    display: grid;
    grid-template-columns: 42% 58%;

    gap: 45px;

    margin-top: 45px;
}


/* AFTER FLOW */

.contact-after__flow {
    margin: 0;
    padding: 0;

    list-style: none;
}

.contact-after__flow li {
    position: relative;

    display: grid;
    grid-template-columns: 42px 1fr;

    gap: 14px;

    padding: 0 0 31px;
}

.contact-after__flow li:not(:last-child)::after {
    content: "";

    position: absolute;

    left: 14px;
    top: 27px;

    width: 1px;
    height: 28px;

    background-color: #bbbbbb;
}

.contact-after__number {
    font-family: "Times New Roman", serif;
    font-size: 12px;

    letter-spacing: 0.08em;
}

.contact-after__flow-text {
    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 11px;

    letter-spacing: 0.06em;
}


/* AFTER MESSAGE */

.contact-after__message {
    padding-left: 35px;

    border-left: 1px solid #d4d1cb;

    color: #555555;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 11px;

    line-height: 2;
    letter-spacing: 0.05em;
}

.contact-after__message p {
    margin: 0 0 25px;
}


/* ========================================
   06 FAQ LINK
======================================== */

.contact-faq {
    padding: 65px 7vw;

    background-color: #f7f5f1;
}

.contact-faq__inner {
    width: min(1050px, 100%);

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 100px;
}

.contact-faq__title {
    margin: 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 25px;
    font-weight: 400;

    line-height: 1.6;
    letter-spacing: 0.07em;
}

.contact-faq__content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;
}

.contact-faq__content p {
    margin: 0;

    color: #555555;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 10px;

    line-height: 1.9;
    letter-spacing: 0.05em;
}


/* FAQ BUTTON */

.contact-faq__button {
    flex-shrink: 0;

    width: 190px;
    height: 48px;

    padding: 0 20px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border: 1px solid #555555;

    color: #111111;
    text-decoration: none;

    font-family:
        "Yu Mincho",
        "YuMincho",
        sans-serif;

    font-size: 10px;

    letter-spacing: 0.10em;

    transition:
        background-color 0.35s ease,
        color 0.35s ease;
}

.contact-faq__button:hover {
    background-color: #111111;
    color: #ffffff;
}


/* ========================================
   07 FINAL MESSAGE
======================================== */

.contact-final {
    position: relative;

    width: 100%;
    height: 600px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    color: #ffffff;
    text-align: center;
}

.contact-final__image {
    position: absolute;
    inset: 0;
}

.contact-final__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.contact-final__overlay {
    position: absolute;
    inset: 0;

    background-color: rgba(0, 0, 0, 0.22);
}

.contact-final__content {
    position: relative;

    z-index: 2;

    padding: 30px;
}

.contact-final__label {
    color: rgba(255, 255, 255, 0.9);
}

.contact-final__title {
    margin: 0;

    font-family: "Times New Roman", serif;

    font-size: clamp(42px, 5vw, 72px);
    font-weight: 400;

    line-height: 1.2;
    letter-spacing: 0.06em;
}

.contact-final__text {
    margin: 25px 0 0;

    font-family:
        "Yu Mincho",
        "YuMincho",
        serif;

    font-size: 14px;

    line-height: 1.8;
    letter-spacing: 0.12em;
}


/* ========================================
   TABLET
   768px - 1100px
======================================== */

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


    /* HERO */

    .contact-hero {
        height: 650px;
    }

    .contact-hero__content {
        left: 7vw;

        width: 60%;
    }

    .contact-hero__title {
        font-size: clamp(36px, 5vw, 52px);
    }


    /* MESSAGE */

    .contact-message {
        padding: 100px 6vw;
    }

    .contact-message__inner {
        grid-template-columns: 50% 50%;
    }

    .contact-message__content {
        padding: 50px;
    }

    .contact-message__image {
        min-height: 450px;
    }


    /* BEFORE CONTACT */

    .contact-before {
        padding: 100px 5vw;
    }

    .contact-before__list {
        grid-template-columns: repeat(3, 1fr);

        border-bottom: 0;
    }

    .contact-before-card {
        border-bottom: 1px solid #d5d2cc;
    }

    .contact-before-card:nth-child(3) {
        border-right: 0;
    }


    /* FORM */

    .contact-form-section {
        padding: 110px 6vw;
    }

    .contact-form-section__inner {
        grid-template-columns: 35% 65%;
    }

    .contact-form-section__heading {
        padding-right: 40px;
    }

    .contact-form-section__form {
        padding-left: 45px;
    }


    /* AFTER */

    .contact-after {
        padding:
            0 6vw 110px;
    }

    .contact-after__inner {
        grid-template-columns: 42% 58%;
    }

    .contact-after__content {
        padding: 50px;
    }

    .contact-after__body {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .contact-after__message {
        padding:
            25px 0 0;

        border-left: 0;
        border-top: 1px solid #d4d1cb;
    }


    /* FAQ */

    .contact-faq__inner {
        gap: 60px;
    }


    /* FINAL */

    .contact-final {
        height: 520px;
    }

}


/* ========================================
   SMARTPHONE
   767px以下
======================================== */

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


    /* ========================================
       HERO
    ======================================== */

    .contact-hero {
        height: 650px;
    }

    .contact-hero__image img {
        object-position: 62% center;
    }

    .contact-hero__overlay {
        background:
            linear-gradient(0deg,
                rgba(0, 0, 0, 0.70) 0%,
                rgba(0, 0, 0, 0.28) 55%,
                rgba(0, 0, 0, 0.04) 100%);
    }

    .contact-hero__content {
        top: auto;
        right: 24px;
        bottom: 60px;
        left: 24px;

        transform: none;

        width: auto;
    }

    .contact-hero__label {
        margin-bottom: 16px;

        font-size: 10px;
    }

    .contact-hero__title {
        font-size: 30px;

        line-height: 1.65;
    }

    .contact-hero__text {
        margin-top: 20px;

        font-size: 11px;
    }

    .contact-hero__scroll {
        display: none;
    }


    /* ========================================
       MESSAGE
    ======================================== */

    .contact-message {
        padding: 75px 24px 85px;
    }

    .contact-message__intro {
        margin-bottom: 40px;
    }

    .contact-message__title {
        font-size: 28px;
    }

    .contact-message__inner {
        display: flex;
        flex-direction: column;
    }

    .contact-message__image {
        min-height: 0;

        height: 320px;
    }

    .contact-message__content {
        padding: 40px 25px;

        font-size: 11px;
    }


    /* ========================================
       BEFORE CONTACT
    ======================================== */

    .contact-before {
        padding: 80px 24px;
    }

    .contact-before__heading {
        margin-bottom: 50px;
    }

    .contact-before__title {
        font-size: 28px;
    }

    .contact-before__list {
        display: grid;
        grid-template-columns: 1fr 1fr;

        border-bottom: 0;
    }

    .contact-before-card {
        min-height: 245px;

        padding: 30px 15px;

        border-bottom: 1px solid #d5d2cc;
    }

    .contact-before-card:nth-child(even) {
        border-right: 0;
    }

    .contact-before-card:nth-child(3) {
        border-right: 1px solid #d5d2cc;
    }

    .contact-before-card:last-child {
        grid-column: 1 / -1;

        border-right: 0;
    }

    .contact-before-card__icon {
        width: 40px;
        height: 40px;
    }


    /* ========================================
       CONTACT FORM
    ======================================== */

    .contact-form-section {
        padding: 85px 24px;
    }

    .contact-form-section__inner {
        display: block;

        border-top: 1px solid #d8d8d8;
    }

    .contact-form-section__heading {
        padding:
            45px 0 40px;

        border-right: 0;
        border-bottom: 1px solid #dddddd;
    }

    .contact-form-section__title {
        font-size: 27px;
    }

    .contact-form-section__form {
        padding:
            45px 0 50px;
    }

    .contact-form__row {
        margin-bottom: 24px;
    }

    .contact-form__input {
        height: 48px;
    }

    .contact-form__textarea {
        min-height: 180px;
    }

    .contact-form__radio-list {
        display: grid;
        grid-template-columns: 1fr 1fr;

        gap: 16px;
    }

    .contact-form__submit {
        margin-top: 35px;

        justify-content: stretch;
    }

    .contact-form__button {
        width: 100%;
        height: 56px;
    }


    /* ========================================
       AFTER CONTACT
    ======================================== */

    .contact-after {
        padding:
            0 24px 85px;
    }

    .contact-after__inner {
        display: flex;
        flex-direction: column;
    }

    .contact-after__image {
        min-height: 0;

        height: 340px;
    }

    .contact-after__content {
        padding: 45px 25px;
    }

    .contact-after__title {
        font-size: 27px;
    }

    .contact-after__body {
        display: block;

        margin-top: 35px;
    }

    .contact-after__message {
        margin-top: 25px;

        padding:
            30px 0 0;

        border-left: 0;
        border-top: 1px solid #d4d1cb;
    }


    /* ========================================
       FAQ
    ======================================== */

    .contact-faq {
        padding: 65px 24px;
    }

    .contact-faq__inner {
        display: block;
    }

    .contact-faq__title {
        font-size: 24px;
    }

    .contact-faq__content {
        display: block;

        margin-top: 28px;
    }

    .contact-faq__content p {
        margin-bottom: 25px;
    }

    .contact-faq__button {
        width: 100%;
        max-width: 280px;
    }


    /* ========================================
       FINAL MESSAGE
    ======================================== */

    .contact-final {
        height: 470px;
    }

    .contact-final__image img {
        object-position: 55% center;
    }

    .contact-final__overlay {
        background-color: rgba(0, 0, 0, 0.28);
    }

    .contact-final__content {
        width: 100%;

        padding: 25px;

        box-sizing: border-box;
    }

    .contact-final__title {
        font-size: 38px;

        line-height: 1.25;
    }

    .contact-final__text {
        margin-top: 20px;

        font-size: 12px;
    }

}



/* ==========================================================
   STORY DETAIL PAGE
   STORY 01 | SOTA & MEI
========================================================== */


/* ==========================================================
   01. HERO
========================================================== */

.story-detail-page .story-detail-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 720px;
    overflow: hidden;
    background: #111;
}

.story-detail-page .story-detail-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.story-detail-page .story-detail-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.42) 0%,
            rgba(0, 0, 0, 0.16) 38%,
            rgba(0, 0, 0, 0.03) 68%,
            rgba(0, 0, 0, 0.08) 100%);
}

.story-detail-page .story-detail-hero__content {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 8%;
    transform: translateY(-42%);
    color: #fff;
}

.story-detail-page .story-detail-hero__number {
    margin: 0 0 22px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.34em;
}

.story-detail-page .story-detail-hero__title {
    margin: 0;
    font-family: "Times New Roman", serif;
    font-size: clamp(52px, 6vw, 92px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.05em;
}

.story-detail-page .story-detail-hero__catch {
    margin: 30px 0 0;
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 2;
    letter-spacing: 0.12em;
}

.story-detail-page .story-detail-hero__location {
    margin: 26px 0 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 0.32em;
}

.story-detail-page .story-detail-hero__scroll {
    position: absolute;
    z-index: 2;
    right: 4%;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    letter-spacing: 0.28em;
    writing-mode: vertical-rl;
}

.story-detail-page .story-detail-hero__scroll-line {
    display: block;
    width: 1px;
    height: 80px;
    background: rgba(255, 255, 255, 0.7);
}


/* ==========================================================
   COMMON STORY TYPOGRAPHY
========================================================== */

.story-detail-page .story-section-label {
    margin: 0 0 28px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.35em;
    color: #777;
}

.story-detail-page .story-scene__number {
    margin: 0 0 14px;
    font-family: "Times New Roman", serif;
    font-size: 54px;
    font-weight: 400;
    line-height: 1;
    color: #b9b3aa;
}

.story-detail-page .story-scene__english {
    margin: 0 0 30px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.35em;
    color: #777;
}

.story-detail-page .story-scene__title {
    margin: 0;
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;
    font-size: clamp(30px, 3vw, 46px);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.08em;
    color: #171717;
}

.story-detail-page .story-scene__text {
    margin: 35px 0 0;
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;
    font-size: 15px;
    line-height: 2.2;
    letter-spacing: 0.08em;
    color: #555;
}


/* ==========================================================
   02. INTRODUCTION
========================================================== */

.story-detail-page .story-intro {
    padding: 150px 6%;
    background: #fff;
}

.story-detail-page .story-intro__inner {
    width: min(100%, 850px);
    margin: 0 auto;
    text-align: center;
}

.story-detail-page .story-intro__name {
    margin: 0;
    font-family: "Times New Roman", serif;
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.08em;
    color: #171717;
}

.story-detail-page .story-intro__catch {
    margin: 35px 0 0;
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;
    font-size: 24px;
    line-height: 1.8;
    letter-spacing: 0.1em;
    color: #222;
}

.story-detail-page .story-intro__text {
    margin-top: 60px;
}

.story-detail-page .story-intro__text p {
    margin: 0 0 28px;
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;
    font-size: 15px;
    line-height: 2.3;
    letter-spacing: 0.08em;
    color: #666;
}


/* ==========================================================
   03 / 05 / 07.
   SPLIT SCENE
========================================================== */

.story-detail-page .story-scene--split {
    display: grid;
    grid-template-columns: 62% 38%;
    min-height: 720px;
    background: #f7f5f1;
}

.story-detail-page .story-scene--split .story-scene__image {
    width: 100%;
    min-height: 720px;
    overflow: hidden;
}

.story-detail-page .story-scene--split .story-scene__image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 720px;
    object-fit: cover;
    transition: transform 1.2s ease;
}

.story-detail-page .story-scene--split:hover .story-scene__image img {
    transform: scale(1.025);
}

.story-detail-page .story-scene--split .story-scene__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 12%;
}


/* ----------------------------------------------------------
   Reverse
---------------------------------------------------------- */

.story-detail-page .story-scene--reverse {
    grid-template-columns: 38% 62%;
    background: #fff;
}

.story-detail-page .story-scene--reverse .story-scene__image {
    grid-column: 2;
    grid-row: 1;
}

.story-detail-page .story-scene--reverse .story-scene__content {
    grid-column: 1;
    grid-row: 1;
}


/* ==========================================================
   04. WALK
   CENTER LAYOUT
========================================================== */

.story-detail-page .story-scene--center {
    padding: 150px 6%;
    background: #fff;
}

.story-detail-page .story-scene--center .story-scene__heading {
    width: min(100%, 1200px);
    margin: 0 auto 65px;
    text-align: center;
}

.story-detail-page .story-scene__wide-image {
    width: min(100%, 1200px);
    margin: 0 auto;
    overflow: hidden;
}

.story-detail-page .story-scene__wide-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 1.2s ease;
}

.story-detail-page .story-scene__wide-image:hover img {
    transform: scale(1.02);
}

.story-detail-page .story-scene__center-text {
    width: min(100%, 650px);
    margin: 60px auto 0;
    text-align: center;
}

.story-detail-page .story-scene__center-text p {
    margin: 0 0 24px;
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;
    font-size: 15px;
    line-height: 2.3;
    letter-spacing: 0.08em;
    color: #555;
}


/* ==========================================================
   06. MEMORY
   FULL IMAGE
========================================================== */

.story-detail-page .story-scene--full {
    padding: 150px 0;
    background: #f7f5f1;
}

.story-detail-page .story-scene--full .story-scene__heading {
    width: min(88%, 1200px);
    margin: 0 auto 65px;
    text-align: center;
}

.story-detail-page .story-scene__full-image {
    width: min(88%, 1400px);
    margin: 0 auto;
    overflow: hidden;
}

.story-detail-page .story-scene__full-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 1.2s ease;
}

.story-detail-page .story-scene__full-image:hover img {
    transform: scale(1.02);
}


/* ==========================================================
   08. SUNSET
========================================================== */

.story-detail-page .story-sunset {
    position: relative;
    width: 100%;
    background: #111;
}

.story-detail-page .story-sunset__image {
    position: relative;
    width: 100%;
    height: min(75vw, 900px);
    min-height: 650px;
    overflow: hidden;
}

.story-detail-page .story-sunset__image>img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-detail-page .story-sunset__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.35) 0%,
            rgba(0, 0, 0, 0.08) 48%,
            rgba(0, 0, 0, 0.03) 100%);
}

.story-detail-page .story-sunset__content {
    position: absolute;
    z-index: 2;
    left: 8%;
    bottom: 12%;
    color: #fff;
}

.story-detail-page .story-sunset__number {
    margin: 0 0 14px;
    font-family: "Times New Roman", serif;
    font-size: 56px;
    line-height: 1;
}

.story-detail-page .story-sunset__english {
    margin: 0 0 26px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 0.35em;
}

.story-detail-page .story-sunset__title {
    margin: 0;
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;
    font-size: clamp(32px, 4vw, 54px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.08em;
}

.story-detail-page .story-sunset__text {
    margin: 32px 0 0;
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;
    font-size: 14px;
    line-height: 2.1;
    letter-spacing: 0.08em;
}


/* ==========================================================
   09. PROMISE
========================================================== */

.story-detail-page .story-promise {
    padding: 160px 6%;
    background: #fff;
}

.story-detail-page .story-promise__inner {
    display: grid;
    grid-template-columns: minmax(360px, 520px) 1fr;
    gap: clamp(70px, 9vw, 150px);
    align-items: center;
    width: min(100%, 1200px);
    margin: 0 auto;
}

.story-detail-page .story-promise__image {
    overflow: hidden;
}

.story-detail-page .story-promise__image img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 1.2s ease;
}

.story-detail-page .story-promise__image:hover img {
    transform: scale(1.03);
}

.story-detail-page .story-promise__content {
    padding-right: 8%;
}


/* ==========================================================
   10. LAST SCENE
========================================================== */

.story-detail-page .story-last {
    position: relative;
    width: 100%;
    height: min(70vw, 900px);
    min-height: 650px;
    overflow: hidden;
    background: #111;
}

.story-detail-page .story-last__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-detail-page .story-last__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg,
            rgba(0, 0, 0, 0.40) 0%,
            rgba(0, 0, 0, 0.04) 55%);
}

.story-detail-page .story-last__content {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 9%;
    transform: translateX(-50%);
    width: 90%;
    text-align: center;
    color: #fff;
}

.story-detail-page .story-last__number {
    margin: 0 0 10px;
    font-family: "Times New Roman", serif;
    font-size: 42px;
}

.story-detail-page .story-last__english {
    margin: 0 0 25px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 0.4em;
}

.story-detail-page .story-last__title {
    margin: 0;
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;
    font-size: clamp(32px, 4vw, 54px);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.1em;
}


/* ==========================================================
   11. MOMENTS GALLERY
========================================================== */

.story-detail-page .story-gallery {
    padding: 160px 6%;
    background: #fff;
}

.story-detail-page .story-gallery__inner {
    width: min(100%, 1400px);
    margin: 0 auto;
}

.story-detail-page .story-gallery__heading {
    margin-bottom: 70px;
}

.story-detail-page .story-gallery__heading h2 {
    margin: 0;
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.08em;
    color: #171717;
}

.story-detail-page .story-gallery__heading>p:last-child {
    margin: 30px 0 0;
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;
    font-size: 14px;
    line-height: 2.1;
    letter-spacing: 0.08em;
    color: #666;
}

.story-detail-page .story-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.story-detail-page .story-gallery__item {
    margin: 0;
    overflow: hidden;
    background: #eee;
}

.story-detail-page .story-gallery__item img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition:
        transform 0.8s ease,
        filter 0.8s ease;
}

.story-detail-page .story-gallery__item:hover img {
    transform: scale(1.035);
}


/* ==========================================================
   12. NEXT STORY
========================================================== */

.story-detail-page .story-next {
    background: #f7f5f1;
}

.story-detail-page .story-next__link {
    position: relative;
    display: block;
    width: 100%;
    height: min(36.46vw, 700px);
    min-height: 500px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
}

.story-detail-page .story-next__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 1.4s ease;
}

.story-detail-page .story-next__link:hover .story-next__image {
    transform: scale(1.025);
}

.story-detail-page .story-next__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.02) 0%,
            rgba(0, 0, 0, 0.08) 42%,
            rgba(0, 0, 0, 0.48) 100%);
}

.story-detail-page .story-next__content {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 8%;
    transform: translateY(-50%);
    width: 42%;
    text-align: center;
}

.story-detail-page .story-next__label {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 0.4em;
}

.story-detail-page .story-next__line {
    display: block;
    width: 45px;
    height: 1px;
    margin: 24px auto 30px;
    background: rgba(255, 255, 255, 0.8);
}

.story-detail-page .story-next__number {
    margin: 0 0 16px;
    font-family: "Times New Roman", serif;
    font-size: 17px;
    letter-spacing: 0.16em;
}

.story-detail-page .story-next__title {
    margin: 0;
    font-family: "Times New Roman", serif;
    font-size: clamp(38px, 4vw, 64px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.05em;
}

.story-detail-page .story-next__catch {
    margin: 25px 0 0;
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0.08em;
}

.story-detail-page .story-next__arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 68px;
    height: 68px;
    margin: 35px auto 0;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    font-size: 22px;
    transition:
        background 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease;
}

.story-detail-page .story-next__link:hover .story-next__arrow {
    background: #fff;
    color: #171717;
    transform: translateX(5px);
}


/* ----------------------------------------------------------
   BACK TO STORIES
---------------------------------------------------------- */

.story-detail-page .story-next__back {
    padding: 55px 6%;
    text-align: center;
}

.story-detail-page .story-next__back a {
    display: inline-block;
    position: relative;
    padding-bottom: 6px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 0.28em;
    color: #222;
    text-decoration: none;
}

.story-detail-page .story-next__back a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #222;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.35s ease;
}

.story-detail-page .story-next__back a:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}


/* ==========================================================
   TABLET
   768px - 1100px
========================================================== */

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

    /* HERO */

    .story-detail-page .story-detail-hero {
        min-height: 650px;
    }

    .story-detail-page .story-detail-hero__content {
        left: 7%;
    }

    .story-detail-page .story-detail-hero__title {
        font-size: 64px;
    }


    /* INTRO */

    .story-detail-page .story-intro {
        padding: 120px 7%;
    }


    /* SPLIT */

    .story-detail-page .story-scene--split {
        grid-template-columns: 58% 42%;
        min-height: 620px;
    }

    .story-detail-page .story-scene--split .story-scene__image,
    .story-detail-page .story-scene--split .story-scene__image img {
        min-height: 620px;
    }

    .story-detail-page .story-scene--reverse {
        grid-template-columns: 42% 58%;
    }

    .story-detail-page .story-scene--split .story-scene__content {
        padding: 65px 10%;
    }


    /* CENTER / FULL */

    .story-detail-page .story-scene--center,
    .story-detail-page .story-scene--full {
        padding-top: 120px;
        padding-bottom: 120px;
    }


    /* PROMISE */

    .story-detail-page .story-promise {
        padding: 120px 7%;
    }

    .story-detail-page .story-promise__inner {
        grid-template-columns: minmax(300px, 440px) 1fr;
        gap: 70px;
    }


    /* GALLERY */

    .story-detail-page .story-gallery {
        padding: 120px 5%;
    }


    /* NEXT */

    .story-detail-page .story-next__link {
        min-height: 520px;
    }

    .story-detail-page .story-next__content {
        right: 5%;
        width: 48%;
    }

}


/* ==========================================================
   SMARTPHONE
   max-width: 767px
========================================================== */

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

    /* ========================================================
     HERO
  ======================================================== */

    .story-detail-page .story-detail-hero {
        height: 100svh;
        min-height: 620px;
    }

    .story-detail-page .story-detail-hero__image {
        object-position: 58% center;
    }

    .story-detail-page .story-detail-hero__overlay {
        background:
            linear-gradient(0deg,
                rgba(0, 0, 0, 0.48) 0%,
                rgba(0, 0, 0, 0.10) 65%);
    }

    .story-detail-page .story-detail-hero__content {
        top: auto;
        right: 7%;
        bottom: 12%;
        left: 7%;
        transform: none;
    }

    .story-detail-page .story-detail-hero__number {
        margin-bottom: 16px;
        font-size: 10px;
    }

    .story-detail-page .story-detail-hero__title {
        font-size: clamp(42px, 13vw, 58px);
    }

    .story-detail-page .story-detail-hero__catch {
        margin-top: 20px;
        font-size: 17px;
    }

    .story-detail-page .story-detail-hero__location {
        margin-top: 18px;
    }

    .story-detail-page .story-detail-hero__scroll {
        display: none;
    }


    /* ========================================================
     INTRO
  ======================================================== */

    .story-detail-page .story-intro {
        padding: 95px 7%;
    }

    .story-detail-page .story-section-label {
        margin-bottom: 20px;
        font-size: 9px;
    }

    .story-detail-page .story-intro__name {
        font-size: 42px;
    }

    .story-detail-page .story-intro__catch {
        margin-top: 25px;
        font-size: 19px;
    }

    .story-detail-page .story-intro__text {
        margin-top: 45px;
    }

    .story-detail-page .story-intro__text p {
        font-size: 13px;
        line-height: 2.15;
    }


    /* ========================================================
     COMMON SCENE
  ======================================================== */

    .story-detail-page .story-scene__number {
        font-size: 40px;
    }

    .story-detail-page .story-scene__english {
        margin-bottom: 22px;
        font-size: 9px;
    }

    .story-detail-page .story-scene__title {
        font-size: 27px;
    }

    .story-detail-page .story-scene__text {
        margin-top: 25px;
        font-size: 13px;
        line-height: 2.1;
    }


    /* ========================================================
     SPLIT → VERTICAL
  ======================================================== */

    .story-detail-page .story-scene--split,
    .story-detail-page .story-scene--reverse {
        display: flex;
        flex-direction: column;
        min-height: auto;
    }

    .story-detail-page .story-scene--split .story-scene__image,
    .story-detail-page .story-scene--reverse .story-scene__image {
        width: 100%;
        min-height: 0;
    }

    .story-detail-page .story-scene--split .story-scene__image img,
    .story-detail-page .story-scene--reverse .story-scene__image img {
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 3 / 2;
        object-fit: cover;
    }

    .story-detail-page .story-scene--split .story-scene__content,
    .story-detail-page .story-scene--reverse .story-scene__content {
        width: 100%;
        padding: 70px 8% 80px;
    }


    /* ========================================================
     WALK
  ======================================================== */

    .story-detail-page .story-scene--center {
        padding: 90px 0;
    }

    .story-detail-page .story-scene--center .story-scene__heading {
        width: 86%;
        margin-bottom: 45px;
    }

    .story-detail-page .story-scene__wide-image {
        width: 100%;
    }

    .story-detail-page .story-scene__wide-image img {
        aspect-ratio: 4 / 3;
    }

    .story-detail-page .story-scene__center-text {
        width: 86%;
        margin-top: 45px;
    }

    .story-detail-page .story-scene__center-text p {
        font-size: 13px;
        line-height: 2.1;
    }


    /* ========================================================
     MEMORY
  ======================================================== */

    .story-detail-page .story-scene--full {
        padding: 90px 0;
    }

    .story-detail-page .story-scene--full .story-scene__heading {
        width: 86%;
        margin-bottom: 45px;
    }

    .story-detail-page .story-scene__full-image {
        width: 100%;
    }

    .story-detail-page .story-scene__full-image img {
        aspect-ratio: 4 / 3;
    }


    /* ========================================================
     SUNSET
  ======================================================== */

    .story-detail-page .story-sunset__image {
        height: 82vh;
        min-height: 600px;
    }

    .story-detail-page .story-sunset__image>img {
        object-position: 60% center;
    }

    .story-detail-page .story-sunset__overlay {
        background:
            linear-gradient(0deg,
                rgba(0, 0, 0, 0.52) 0%,
                rgba(0, 0, 0, 0.05) 65%);
    }

    .story-detail-page .story-sunset__content {
        right: 8%;
        bottom: 8%;
        left: 8%;
    }

    .story-detail-page .story-sunset__number {
        font-size: 42px;
    }

    .story-detail-page .story-sunset__title {
        font-size: 29px;
    }

    .story-detail-page .story-sunset__text {
        margin-top: 22px;
        font-size: 13px;
    }


    /* ========================================================
     PROMISE
  ======================================================== */

    .story-detail-page .story-promise {
        padding: 90px 7%;
    }

    .story-detail-page .story-promise__inner {
        display: block;
    }

    .story-detail-page .story-promise__image {
        width: 100%;
    }

    .story-detail-page .story-promise__content {
        padding: 60px 2% 0;
    }


    /* ========================================================
     LAST SCENE
  ======================================================== */

    .story-detail-page .story-last {
        height: 80vh;
        min-height: 600px;
    }

    .story-detail-page .story-last__image {
        object-position: 57% center;
    }

    .story-detail-page .story-last__content {
        bottom: 8%;
    }

    .story-detail-page .story-last__number {
        font-size: 36px;
    }

    .story-detail-page .story-last__title {
        font-size: 29px;
    }


    /* ========================================================
     MOMENTS
  ======================================================== */

    .story-detail-page .story-gallery {
        padding: 95px 5%;
    }

    .story-detail-page .story-gallery__heading {
        margin-bottom: 45px;
        padding: 0 3%;
    }

    .story-detail-page .story-gallery__heading h2 {
        font-size: 26px;
    }

    .story-detail-page .story-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }


    /* ========================================================
     NEXT STORY
  ======================================================== */

    .story-detail-page .story-next__link {
        height: 78vh;
        min-height: 600px;
    }

    .story-detail-page .story-next__image {
        object-position: 43% center;
    }

    .story-detail-page .story-next__overlay {
        background:
            linear-gradient(0deg,
                rgba(0, 0, 0, 0.55) 0%,
                rgba(0, 0, 0, 0.05) 70%);
    }

    .story-detail-page .story-next__content {
        top: auto;
        right: 7%;
        bottom: 8%;
        left: 7%;
        width: auto;
        transform: none;
    }

    .story-detail-page .story-next__title {
        font-size: clamp(38px, 11vw, 50px);
    }

    .story-detail-page .story-next__catch {
        font-size: 14px;
    }

    .story-detail-page .story-next__arrow {
        width: 58px;
        height: 58px;
        margin-top: 28px;
    }

    .story-detail-page .story-next__back {
        padding: 45px 6%;
    }

}


/* ==========================================================
   VERY SMALL SMARTPHONE
   max-width: 420px
========================================================== */

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

    .story-detail-page .story-detail-hero__title {
        font-size: 40px;
    }

    .story-detail-page .story-detail-hero__catch {
        font-size: 16px;
    }

    .story-detail-page .story-intro__name {
        font-size: 38px;
    }

    .story-detail-page .story-intro__catch {
        font-size: 18px;
    }

    .story-detail-page .story-scene__title {
        font-size: 25px;
    }

    .story-detail-page .story-gallery__grid {
        gap: 4px;
    }

    .story-detail-page .story-next__title {
        font-size: 38px;
    }

}



/* ==========================================================
   STORY 02 PAGE
   HARUTO & YUI
   Theme : GREEN / FAMILY / NATURAL / CELEBRATION
========================================================== */


/* ==========================================================
   01. HERO
========================================================== */

.story02-page .story02-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 720px;
    overflow: hidden;
    background: #111;
}

.story02-page .story02-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.story02-page .story02-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(20, 30, 18, 0.42) 0%,
            rgba(20, 30, 18, 0.15) 40%,
            rgba(20, 30, 18, 0.03) 70%,
            rgba(20, 30, 18, 0.08) 100%);
}

.story02-page .story02-hero__content {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 8%;
    transform: translateY(-42%);
    color: #fff;
}

.story02-page .story02-hero__number {
    margin: 0 0 22px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.34em;
}

.story02-page .story02-hero__title {
    margin: 0;
    font-family: "Times New Roman", serif;
    font-size: clamp(52px, 6vw, 92px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.05em;
}

.story02-page .story02-hero__catch {
    margin: 30px 0 0;
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 2;
    letter-spacing: 0.12em;
}

.story02-page .story02-hero__location {
    margin: 26px 0 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 0.32em;
}

.story02-page .story02-hero__scroll {
    position: absolute;
    z-index: 2;
    right: 4%;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    letter-spacing: 0.28em;
    writing-mode: vertical-rl;
}

.story02-page .story02-hero__scroll-line {
    display: block;
    width: 1px;
    height: 80px;
    background: rgba(255, 255, 255, 0.7);
}


/* ==========================================================
   COMMON TYPOGRAPHY
========================================================== */

.story02-page .story02-section-label {
    margin: 0 0 28px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.35em;
    color: #7c8178;
}

.story02-page .story02-scene__number {
    margin: 0 0 14px;
    font-family: "Times New Roman", serif;
    font-size: 54px;
    font-weight: 400;
    line-height: 1;
    color: #aeb4a8;
}

.story02-page .story02-scene__english {
    margin: 0 0 30px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.35em;
    color: #777d73;
}

.story02-page .story02-scene__title {
    margin: 0;
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;
    font-size: clamp(30px, 3vw, 46px);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.08em;
    color: #171917;
}

.story02-page .story02-scene__text {
    margin: 35px 0 0;
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;
    font-size: 15px;
    line-height: 2.2;
    letter-spacing: 0.08em;
    color: #5b5e58;
}


/* ==========================================================
   02. THEIR STORY
========================================================== */

.story02-page .story02-intro {
    padding: 150px 6%;
    background: #fff;
}

.story02-page .story02-intro__inner {
    width: min(100%, 850px);
    margin: 0 auto;
    text-align: center;
}

.story02-page .story02-intro__name {
    margin: 0;
    font-family: "Times New Roman", serif;
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.08em;
    color: #171917;
}

.story02-page .story02-intro__catch {
    margin: 35px 0 0;
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.1em;
    color: #222;
}

.story02-page .story02-intro__text {
    margin-top: 60px;
}

.story02-page .story02-intro__text p {
    margin: 0 0 28px;
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;
    font-size: 15px;
    line-height: 2.3;
    letter-spacing: 0.08em;
    color: #666;
}


/* ==========================================================
   03 / 05 / 07.
   SPLIT SCENE
========================================================== */

.story02-page .story02-scene--split {
    display: grid;
    grid-template-columns: 62% 38%;
    min-height: 720px;
    background: #f5f6f1;
}

.story02-page .story02-scene--split .story02-scene__image {
    width: 100%;
    min-height: 720px;
    overflow: hidden;
}

.story02-page .story02-scene--split .story02-scene__image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 720px;
    object-fit: cover;
    transition: transform 1.2s ease;
}

.story02-page .story02-scene--split:hover .story02-scene__image img {
    transform: scale(1.025);
}

.story02-page .story02-scene--split .story02-scene__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 12%;
}


/* ==========================================================
   REVERSE SPLIT
========================================================== */

.story02-page .story02-scene--reverse {
    grid-template-columns: 38% 62%;
    background: #fff;
}

.story02-page .story02-scene--reverse .story02-scene__image {
    grid-column: 2;
    grid-row: 1;
}

.story02-page .story02-scene--reverse .story02-scene__content {
    grid-column: 1;
    grid-row: 1;
}


/* ==========================================================
   04. PREPARATION
========================================================== */

.story02-page .story02-scene--center {
    padding: 150px 6%;
    background: #fff;
}

.story02-page .story02-scene--center .story02-scene__heading {
    width: min(100%, 1200px);
    margin: 0 auto 65px;
    text-align: center;
}

.story02-page .story02-scene__wide-image {
    width: min(100%, 1200px);
    margin: 0 auto;
    overflow: hidden;
}

.story02-page .story02-scene__wide-image img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 1.2s ease;
}

.story02-page .story02-scene__wide-image:hover img {
    transform: scale(1.02);
}

.story02-page .story02-scene__center-text {
    width: min(100%, 650px);
    margin: 60px auto 0;
    text-align: center;
}

.story02-page .story02-scene__center-text p {
    margin: 0 0 20px;
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;
    font-size: 15px;
    line-height: 2.3;
    letter-spacing: 0.08em;
    color: #555;
}


/* ==========================================================
   06. CEREMONY
========================================================== */

.story02-page .story02-ceremony {
    padding: 150px 0;
    background: #f5f6f1;
}

.story02-page .story02-ceremony__heading {
    width: min(88%, 1200px);
    margin: 0 auto 65px;
    text-align: center;
}

.story02-page .story02-ceremony__visual {
    width: min(92%, 1500px);
    margin: 0 auto;
    overflow: hidden;
}

.story02-page .story02-ceremony__visual img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 1.3s ease;
}

.story02-page .story02-ceremony__visual:hover img {
    transform: scale(1.018);
}

.story02-page .story02-ceremony__text {
    width: min(86%, 650px);
    margin: 60px auto 0;
    text-align: center;
}

.story02-page .story02-ceremony__text p {
    margin: 0 0 24px;
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;
    font-size: 15px;
    line-height: 2.3;
    letter-spacing: 0.08em;
    color: #555;
}


/* ==========================================================
   08. TOGETHER
   FULL CINEMATIC VISUAL
========================================================== */

.story02-page .story02-together {
    width: 100%;
    background: #111;
}

.story02-page .story02-together__visual {
    position: relative;
    width: 100%;
    height: min(70vw, 900px);
    min-height: 650px;
    overflow: hidden;
}

.story02-page .story02-together__visual>img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story02-page .story02-together__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(20, 28, 18, 0.42) 0%,
            rgba(20, 28, 18, 0.12) 45%,
            rgba(20, 28, 18, 0.02) 75%);
}

.story02-page .story02-together__content {
    position: absolute;
    z-index: 2;
    left: 8%;
    bottom: 11%;
    color: #fff;
}

.story02-page .story02-together__number {
    margin: 0 0 14px;
    font-family: "Times New Roman", serif;
    font-size: 56px;
    font-weight: 400;
    line-height: 1;
}

.story02-page .story02-together__english {
    margin: 0 0 26px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 0.35em;
}

.story02-page .story02-together__title {
    margin: 0;
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;
    font-size: clamp(32px, 4vw, 54px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.08em;
}

.story02-page .story02-together__text {
    margin: 32px 0 0;
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;
    font-size: 14px;
    line-height: 2.1;
    letter-spacing: 0.08em;
}


/* ==========================================================
   09. FAMILY
========================================================== */

.story02-page .story02-family {
    padding: 160px 6%;
    background: #fff;
}

.story02-page .story02-family__inner {
    display: grid;
    grid-template-columns: minmax(360px, 520px) 1fr;
    gap: clamp(70px, 9vw, 150px);
    align-items: center;
    width: min(100%, 1200px);
    margin: 0 auto;
}

.story02-page .story02-family__image {
    overflow: hidden;
}

.story02-page .story02-family__image img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 1.2s ease;
}

.story02-page .story02-family__image:hover img {
    transform: scale(1.03);
}

.story02-page .story02-family__content {
    padding-right: 8%;
}


/* ==========================================================
   10. NEW BEGINNING
========================================================== */

.story02-page .story02-last {
    position: relative;
    width: 100%;
    height: min(70vw, 900px);
    min-height: 650px;
    overflow: hidden;
    background: #111;
}

.story02-page .story02-last__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.story02-page .story02-last__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg,
            rgba(12, 20, 10, 0.46) 0%,
            rgba(12, 20, 10, 0.04) 58%);
}

.story02-page .story02-last__content {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 9%;
    transform: translateX(-50%);
    width: 90%;
    text-align: center;
    color: #fff;
}

.story02-page .story02-last__number {
    margin: 0 0 10px;
    font-family: "Times New Roman", serif;
    font-size: 42px;
    font-weight: 400;
}

.story02-page .story02-last__english {
    margin: 0 0 25px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 0.4em;
}

.story02-page .story02-last__title {
    margin: 0;
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;
    font-size: clamp(32px, 4vw, 54px);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.1em;
}


/* ==========================================================
   11. MOMENTS GALLERY
========================================================== */

.story02-page .story02-gallery {
    padding: 160px 6%;
    background: #fff;
}

.story02-page .story02-gallery__inner {
    width: min(100%, 1400px);
    margin: 0 auto;
}

.story02-page .story02-gallery__heading {
    margin-bottom: 70px;
}

.story02-page .story02-gallery__heading h2 {
    margin: 0;
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.08em;
    color: #171917;
}

.story02-page .story02-gallery__heading>p:not(.story02-section-label) {
    margin: 28px 0 0;
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;
    font-size: 14px;
    line-height: 2.1;
    letter-spacing: 0.08em;
    color: #666;
}

.story02-page .story02-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.story02-page .story02-gallery__item {
    margin: 0;
    overflow: hidden;
    background: #eee;
}

.story02-page .story02-gallery__item img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.story02-page .story02-gallery__item:hover img {
    transform: scale(1.035);
}


/* ==========================================================
   12. NEXT STORY
   STORY 03
========================================================== */

.story02-page .story02-next {
    background: #f5f4f1;
}

.story02-page .story02-next__link {
    position: relative;
    display: block;
    width: 100%;
    height: min(36.46vw, 700px);
    min-height: 500px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
}

.story02-page .story02-next__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 1.4s ease;
}

.story02-page .story02-next__link:hover .story02-next__image {
    transform: scale(1.025);
}


/* マジックアワー用
   右側に文字を置くため左→右に暗くする */

.story02-page .story02-next__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(8, 12, 20, 0.03) 0%,
            rgba(8, 12, 20, 0.08) 42%,
            rgba(8, 12, 20, 0.55) 100%);
}

.story02-page .story02-next__content {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 8%;
    transform: translateY(-50%);
    width: 42%;
    text-align: center;
}

.story02-page .story02-next__label {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 0.4em;
}

.story02-page .story02-next__line {
    display: block;
    width: 45px;
    height: 1px;
    margin: 24px auto 30px;
    background: rgba(255, 255, 255, 0.8);
}

.story02-page .story02-next__number {
    margin: 0 0 16px;
    font-family: "Times New Roman", serif;
    font-size: 17px;
    letter-spacing: 0.16em;
}

.story02-page .story02-next__title {
    margin: 0;
    font-family: "Times New Roman", serif;
    font-size: clamp(38px, 4vw, 64px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.05em;
}

.story02-page .story02-next__catch {
    margin: 25px 0 0;
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        serif;
    font-size: 16px;
    line-height: 1.9;
    letter-spacing: 0.08em;
}

.story02-page .story02-next__arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 68px;
    height: 68px;
    margin: 35px auto 0;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    font-size: 22px;
    transition:
        background 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease;
}

.story02-page .story02-next__link:hover .story02-next__arrow {
    background: #fff;
    color: #171717;
    transform: translateX(5px);
}


/* ==========================================================
   STORY NAVIGATION
========================================================== */

.story02-page .story02-next__navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: min(88%, 1200px);
    margin: 0 auto;
    padding: 55px 0;
}

.story02-page .story02-next__previous,
.story02-page .story02-next__back {
    position: relative;
    display: inline-block;
    padding-bottom: 6px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 0.28em;
    color: #222;
    text-decoration: none;
}

.story02-page .story02-next__previous::after,
.story02-page .story02-next__back::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #222;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.35s ease;
}

.story02-page .story02-next__previous:hover::after,
.story02-page .story02-next__back:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}


/* ==========================================================
   TABLET
   max-width: 1100px
========================================================== */

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

    /* HERO */

    .story02-page .story02-hero {
        min-height: 650px;
    }

    .story02-page .story02-hero__content {
        left: 7%;
    }

    .story02-page .story02-hero__title {
        font-size: 64px;
    }


    /* INTRO */

    .story02-page .story02-intro {
        padding: 120px 7%;
    }


    /* SPLIT */

    .story02-page .story02-scene--split {
        grid-template-columns: 58% 42%;
        min-height: 620px;
    }

    .story02-page .story02-scene--split .story02-scene__image,
    .story02-page .story02-scene--split .story02-scene__image img {
        min-height: 620px;
    }

    .story02-page .story02-scene--reverse {
        grid-template-columns: 42% 58%;
    }

    .story02-page .story02-scene--split .story02-scene__content {
        padding: 65px 10%;
    }


    /* PREPARATION */

    .story02-page .story02-scene--center {
        padding-top: 120px;
        padding-bottom: 120px;
    }


    /* CEREMONY */

    .story02-page .story02-ceremony {
        padding-top: 120px;
        padding-bottom: 120px;
    }


    /* FAMILY */

    .story02-page .story02-family {
        padding: 120px 7%;
    }

    .story02-page .story02-family__inner {
        grid-template-columns: minmax(300px, 440px) 1fr;
        gap: 70px;
    }


    /* GALLERY */

    .story02-page .story02-gallery {
        padding: 120px 5%;
    }


    /* NEXT */

    .story02-page .story02-next__link {
        min-height: 520px;
    }

    .story02-page .story02-next__content {
        right: 5%;
        width: 48%;
    }

}


/* ==========================================================
   SMARTPHONE
   max-width: 767px
========================================================== */

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

    /* ========================================================
     HERO
  ======================================================== */

    .story02-page .story02-hero {
        height: 100svh;
        min-height: 620px;
    }

    .story02-page .story02-hero__image {
        object-position: 55% center;
    }

    .story02-page .story02-hero__overlay {
        background:
            linear-gradient(0deg,
                rgba(16, 25, 14, 0.50) 0%,
                rgba(16, 25, 14, 0.08) 68%);
    }

    .story02-page .story02-hero__content {
        top: auto;
        right: 7%;
        bottom: 12%;
        left: 7%;
        transform: none;
    }

    .story02-page .story02-hero__number {
        margin-bottom: 16px;
        font-size: 10px;
    }

    .story02-page .story02-hero__title {
        font-size: clamp(40px, 12vw, 56px);
    }

    .story02-page .story02-hero__catch {
        margin-top: 20px;
        font-size: 17px;
    }

    .story02-page .story02-hero__location {
        margin-top: 18px;
    }

    .story02-page .story02-hero__scroll {
        display: none;
    }


    /* ========================================================
     THEIR STORY
  ======================================================== */

    .story02-page .story02-intro {
        padding: 95px 7%;
    }

    .story02-page .story02-section-label {
        margin-bottom: 20px;
        font-size: 9px;
    }

    .story02-page .story02-intro__name {
        font-size: 40px;
    }

    .story02-page .story02-intro__catch {
        margin-top: 25px;
        font-size: 19px;
    }

    .story02-page .story02-intro__text {
        margin-top: 45px;
    }

    .story02-page .story02-intro__text p {
        font-size: 13px;
        line-height: 2.15;
    }


    /* ========================================================
     COMMON SCENE TYPOGRAPHY
  ======================================================== */

    .story02-page .story02-scene__number {
        font-size: 40px;
    }

    .story02-page .story02-scene__english {
        margin-bottom: 22px;
        font-size: 9px;
    }

    .story02-page .story02-scene__title {
        font-size: 27px;
    }

    .story02-page .story02-scene__text {
        margin-top: 25px;
        font-size: 13px;
        line-height: 2.1;
    }


    /* ========================================================
     SPLIT → VERTICAL
  ======================================================== */

    .story02-page .story02-scene--split,
    .story02-page .story02-scene--reverse {
        display: flex;
        flex-direction: column;
        min-height: auto;
    }

    .story02-page .story02-scene--split .story02-scene__image,
    .story02-page .story02-scene--reverse .story02-scene__image {
        width: 100%;
        min-height: 0;
    }

    .story02-page .story02-scene--split .story02-scene__image img,
    .story02-page .story02-scene--reverse .story02-scene__image img {
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 3 / 2;
        object-fit: cover;
    }

    .story02-page .story02-scene--split .story02-scene__content,
    .story02-page .story02-scene--reverse .story02-scene__content {
        width: 100%;
        padding: 70px 8% 80px;
    }


    /* ========================================================
     PREPARATION
  ======================================================== */

    .story02-page .story02-scene--center {
        padding: 90px 0;
    }

    .story02-page .story02-scene--center .story02-scene__heading {
        width: 86%;
        margin-bottom: 45px;
    }

    .story02-page .story02-scene__wide-image {
        width: 100%;
    }

    .story02-page .story02-scene__wide-image img {
        aspect-ratio: 4 / 3;
    }

    .story02-page .story02-scene__center-text {
        width: 86%;
        margin-top: 45px;
    }

    .story02-page .story02-scene__center-text p {
        font-size: 13px;
        line-height: 2.1;
    }


    /* ========================================================
     CEREMONY
  ======================================================== */

    .story02-page .story02-ceremony {
        padding: 90px 0;
    }

    .story02-page .story02-ceremony__heading {
        width: 86%;
        margin-bottom: 45px;
    }

    .story02-page .story02-ceremony__visual {
        width: 100%;
    }

    .story02-page .story02-ceremony__visual img {
        aspect-ratio: 4 / 3;
    }

    .story02-page .story02-ceremony__text {
        width: 86%;
        margin-top: 45px;
    }

    .story02-page .story02-ceremony__text p {
        font-size: 13px;
        line-height: 2.1;
    }


    /* ========================================================
     TOGETHER
  ======================================================== */

    .story02-page .story02-together__visual {
        height: 82vh;
        min-height: 600px;
    }

    .story02-page .story02-together__visual>img {
        object-position: 55% center;
    }

    .story02-page .story02-together__overlay {
        background:
            linear-gradient(0deg,
                rgba(12, 22, 10, 0.52) 0%,
                rgba(12, 22, 10, 0.04) 68%);
    }

    .story02-page .story02-together__content {
        right: 8%;
        bottom: 8%;
        left: 8%;
    }

    .story02-page .story02-together__number {
        font-size: 42px;
    }

    .story02-page .story02-together__title {
        font-size: 29px;
    }

    .story02-page .story02-together__text {
        margin-top: 22px;
        font-size: 13px;
    }


    /* ========================================================
     FAMILY
  ======================================================== */

    .story02-page .story02-family {
        padding: 90px 7%;
    }

    .story02-page .story02-family__inner {
        display: block;
    }

    .story02-page .story02-family__image {
        width: 100%;
    }

    .story02-page .story02-family__content {
        padding: 60px 2% 0;
    }


    /* ========================================================
     NEW BEGINNING
  ======================================================== */

    .story02-page .story02-last {
        height: 80vh;
        min-height: 600px;
    }

    .story02-page .story02-last__image {
        object-position: 52% center;
    }

    .story02-page .story02-last__overlay {
        background:
            linear-gradient(0deg,
                rgba(10, 20, 8, 0.52) 0%,
                rgba(10, 20, 8, 0.03) 65%);
    }

    .story02-page .story02-last__content {
        bottom: 8%;
    }

    .story02-page .story02-last__number {
        font-size: 36px;
    }

    .story02-page .story02-last__title {
        font-size: 29px;
    }


    /* ========================================================
     MOMENTS
  ======================================================== */

    .story02-page .story02-gallery {
        padding: 95px 5%;
    }

    .story02-page .story02-gallery__heading {
        margin-bottom: 45px;
        padding: 0 3%;
    }

    .story02-page .story02-gallery__heading h2 {
        font-size: 26px;
    }

    .story02-page .story02-gallery__heading>p:not(.story02-section-label) {
        font-size: 13px;
    }

    .story02-page .story02-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }


    /* ========================================================
     NEXT STORY
  ======================================================== */

    .story02-page .story02-next__link {
        height: 78vh;
        min-height: 600px;
    }

    .story02-page .story02-next__image {
        object-position: 46% center;
    }

    .story02-page .story02-next__overlay {
        background:
            linear-gradient(0deg,
                rgba(5, 8, 18, 0.60) 0%,
                rgba(5, 8, 18, 0.05) 68%);
    }

    .story02-page .story02-next__content {
        top: auto;
        right: 7%;
        bottom: 8%;
        left: 7%;
        width: auto;
        transform: none;
    }

    .story02-page .story02-next__title {
        font-size: clamp(36px, 10vw, 48px);
    }

    .story02-page .story02-next__catch {
        font-size: 14px;
    }

    .story02-page .story02-next__arrow {
        width: 58px;
        height: 58px;
        margin-top: 28px;
    }


    /* ========================================================
     STORY NAVIGATION
  ======================================================== */

    .story02-page .story02-next__navigation {
        width: 86%;
        padding: 42px 0;
    }

    .story02-page .story02-next__previous,
    .story02-page .story02-next__back {
        font-size: 8px;
        letter-spacing: 0.18em;
    }

}


/* ==========================================================
   VERY SMALL SMARTPHONE
   max-width: 420px
========================================================== */

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

    .story02-page .story02-hero__title {
        font-size: 38px;
    }

    .story02-page .story02-hero__catch {
        font-size: 16px;
    }

    .story02-page .story02-intro__name {
        font-size: 36px;
    }

    .story02-page .story02-intro__catch {
        font-size: 18px;
    }

    .story02-page .story02-scene__title {
        font-size: 25px;
    }

    .story02-page .story02-gallery__grid {
        gap: 4px;
    }

    .story02-page .story02-next__title {
        font-size: 36px;
    }

    .story02-page .story02-next__navigation {
        flex-direction: column;
        gap: 25px;
    }

}



/* ============================================================
   STORY 03
   KEITA & AYAKA
   MAGIC HOUR → BLUE HOUR → NIGHT
============================================================ */


/* ============================================================
   STORY03 BASE
============================================================ */

.story03-page {
    margin: 0;
    padding: 0;
    background: #ffffff;
    color: #171717;
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        "Hiragino Mincho Pro",
        serif;
}

.story03-page img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story03-page main a {
    color: inherit;
    text-decoration: none;
}

.story03-page main {
    overflow: hidden;
}


/* ============================================================
   COMMON PARTS
============================================================ */

.story03-section-label {
    margin: 0 0 28px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.28em;
    line-height: 1.5;
    color: #777777;
}

.story03-scene__number {
    margin: 0 0 14px;
    font-family: "Times New Roman", serif;
    font-size: 13px;
    letter-spacing: 0.18em;
    color: #888888;
}

.story03-scene__english {
    margin: 0 0 38px;
    font-family: "Times New Roman", serif;
    font-size: 12px;
    letter-spacing: 0.28em;
    color: #777777;
}

.story03-scene__title {
    margin: 0;
    font-size: clamp(28px, 3vw, 46px);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.06em;
}

.story03-scene__text {
    margin: 30px 0 0;
    font-size: 14px;
    line-height: 2.3;
    letter-spacing: 0.08em;
}


/* ============================================================
   01 HERO
============================================================ */

.story03-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 720px;
    overflow: hidden;
    background: #111111;
}

.story03-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.story03-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(8, 11, 22, 0.58) 0%,
            rgba(8, 11, 22, 0.28) 42%,
            rgba(8, 11, 22, 0.06) 72%,
            rgba(8, 11, 22, 0.08) 100%);
}

.story03-hero__content {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: clamp(40px, 9vw, 170px);
    transform: translateY(-42%);
    color: #ffffff;
}

.story03-hero__number {
    margin: 0 0 28px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.32em;
}

.story03-hero__title {
    margin: 0;
    font-family: "Times New Roman", serif;
    font-size: clamp(48px, 6vw, 90px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.05em;
}

.story03-hero__catch {
    margin: 38px 0 0;
    font-size: clamp(20px, 2vw, 30px);
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.08em;
}

.story03-hero__location {
    margin: 38px 0 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 0.3em;
}

.story03-hero__scroll {
    position: absolute;
    z-index: 2;
    right: 50px;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    color: #ffffff;
}

.story03-hero__scroll span:first-child {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    letter-spacing: 0.25em;
    writing-mode: vertical-rl;
}

.story03-hero__scroll-line {
    display: block;
    width: 1px;
    height: 60px;
    background: rgba(255, 255, 255, 0.7);
}


/* ============================================================
   02 THEIR STORY
============================================================ */

.story03-intro {
    padding: 160px 40px 180px;
    background: #ffffff;
}

.story03-intro__inner {
    width: min(760px, 100%);
    margin: 0 auto;
    text-align: center;
}

.story03-intro__name {
    margin: 0;
    font-family: "Times New Roman", serif;
    font-size: clamp(32px, 4vw, 54px);
    font-weight: 400;
    letter-spacing: 0.08em;
}

.story03-intro__catch {
    margin: 52px 0 0;
    font-size: clamp(25px, 3vw, 40px);
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.08em;
}

.story03-intro__text {
    margin-top: 62px;
    font-size: 14px;
    line-height: 2.4;
    letter-spacing: 0.1em;
}

.story03-intro__text p {
    margin: 0 0 28px;
}

.story03-intro__text p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   03 / 05 SPLIT SCENE
============================================================ */

.story03-scene--split {
    display: grid;
    grid-template-columns: minmax(0, 62%) minmax(0, 38%);
    min-height: 760px;
    background: #f7f5f1;
}

.story03-scene--split .story03-scene__image {
    min-height: 760px;
    overflow: hidden;
}

.story03-scene--split .story03-scene__image img {
    transition: transform 1.2s ease;
}

.story03-scene--split:hover .story03-scene__image img {
    transform: scale(1.025);
}

.story03-scene--split .story03-scene__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px clamp(50px, 7vw, 120px);
}


/* CITY WALK：左右反転 */

.story03-scene--reverse {
    grid-template-columns: minmax(0, 38%) minmax(0, 62%);
    background: #ffffff;
}

.story03-scene--reverse .story03-scene__image {
    grid-column: 2;
    grid-row: 1;
}

.story03-scene--reverse .story03-scene__content {
    grid-column: 1;
    grid-row: 1;
}


/* ============================================================
   04 MAGIC HOUR
============================================================ */

.story03-scene--center {
    padding: 170px 40px;
    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #faf7f6 45%,
            #f2edef 100%);
}

.story03-scene__heading {
    width: min(900px, 100%);
    margin: 0 auto 70px;
    text-align: center;
}

.story03-scene__wide-image {
    width: min(1200px, 100%);
    height: min(66vw, 800px);
    margin: 0 auto;
    overflow: hidden;
}

.story03-scene__wide-image img {
    transition: transform 1.2s ease;
}

.story03-scene__wide-image:hover img {
    transform: scale(1.02);
}

.story03-scene__center-text {
    width: min(600px, 100%);
    margin: 65px auto 0;
    text-align: center;
    font-size: 14px;
    line-height: 2.4;
    letter-spacing: 0.1em;
}

.story03-scene__center-text p {
    margin: 0 0 26px;
}

.story03-scene__center-text p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   06 BLUE HOUR
============================================================ */

.story03-bluehour {
    background: #101725;
}

.story03-bluehour__visual {
    position: relative;
    width: 100%;
    height: min(70vw, 900px);
    min-height: 680px;
    overflow: hidden;
}

.story03-bluehour__visual img {
    position: absolute;
    inset: 0;
}

.story03-bluehour__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(5, 11, 24, 0.65) 0%,
            rgba(5, 11, 24, 0.32) 42%,
            rgba(5, 11, 24, 0.08) 75%);
}

.story03-bluehour__content {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: clamp(50px, 10vw, 190px);
    transform: translateY(-50%);
    color: #ffffff;
}

.story03-bluehour__number {
    margin: 0 0 14px;
    font-family: "Times New Roman", serif;
    font-size: 13px;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.65);
}

.story03-bluehour__english {
    margin: 0 0 38px;
    font-family: "Times New Roman", serif;
    font-size: 12px;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.78);
}

.story03-bluehour__title {
    margin: 0;
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.08em;
}

.story03-bluehour__text {
    margin: 40px 0 0;
    font-size: 14px;
    line-height: 2.3;
    letter-spacing: 0.1em;
}


/* ============================================================
   07 CITY LIGHTS
============================================================ */

.story03-citylights {
    padding: 170px 40px;
    background: #101725;
    color: #ffffff;
}

.story03-citylights__inner {
    display: grid;
    grid-template-columns: minmax(0, 64%) minmax(0, 36%);
    width: min(1400px, 100%);
    margin: 0 auto;
}

.story03-citylights__image {
    height: 720px;
    overflow: hidden;
}

.story03-citylights__image img {
    transition: transform 1.2s ease;
}

.story03-citylights__image:hover img {
    transform: scale(1.025);
}

.story03-citylights__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 70px 0 70px clamp(55px, 7vw, 110px);
}

.story03-citylights .story03-scene__number,
.story03-citylights .story03-scene__english {
    color: rgba(255, 255, 255, 0.62);
}

.story03-citylights__title {
    margin: 0;
    font-size: clamp(30px, 3.5vw, 50px);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.08em;
}

.story03-citylights__text {
    margin: 30px 0 0;
    font-size: 14px;
    line-height: 2.3;
    letter-spacing: 0.09em;
    color: rgba(255, 255, 255, 0.84);
}


/* ============================================================
   08 ILLUMINATION
============================================================ */

.story03-illumination {
    background: #080b12;
}

.story03-illumination__visual {
    position: relative;
    width: 100%;
    height: min(72vw, 950px);
    min-height: 700px;
    overflow: hidden;
}

.story03-illumination__visual img {
    position: absolute;
    inset: 0;
}

.story03-illumination__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(5, 6, 10, 0.6) 0%,
            rgba(5, 6, 10, 0.25) 45%,
            rgba(5, 6, 10, 0.08) 100%);
}

.story03-illumination__content {
    position: absolute;
    z-index: 2;
    left: clamp(50px, 10vw, 190px);
    bottom: clamp(70px, 10vw, 150px);
    color: #ffffff;
}

.story03-illumination__number {
    margin: 0 0 14px;
    font-family: "Times New Roman", serif;
    font-size: 13px;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.65);
}

.story03-illumination__english {
    margin: 0 0 36px;
    font-family: "Times New Roman", serif;
    font-size: 12px;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.8);
}

.story03-illumination__title {
    margin: 0;
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.08em;
}

.story03-illumination__text {
    margin: 38px 0 0;
    font-size: 14px;
    line-height: 2.3;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.88);
}


/* ============================================================
   09 CLOSE
============================================================ */

.story03-close {
    padding: 180px 40px;
    background: #080b12;
    color: #ffffff;
}

.story03-close__inner {
    display: grid;
    grid-template-columns: minmax(0, 52%) minmax(0, 48%);
    align-items: center;
    width: min(1150px, 100%);
    margin: 0 auto;
}

.story03-close__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.story03-close__image img {
    transition: transform 1.2s ease;
}

.story03-close__image:hover img {
    transform: scale(1.025);
}

.story03-close__content {
    padding-left: clamp(60px, 8vw, 130px);
}

.story03-close .story03-scene__number,
.story03-close .story03-scene__english {
    color: rgba(255, 255, 255, 0.6);
}

.story03-close__title {
    margin: 0;
    font-size: clamp(30px, 3.5vw, 50px);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.08em;
}

.story03-close__text {
    margin: 32px 0 0;
    font-size: 14px;
    line-height: 2.4;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.8);
}


/* ============================================================
   10 NIGHT
============================================================ */

.story03-night {
    position: relative;
    width: 100%;
    height: min(65vw, 900px);
    min-height: 700px;
    overflow: hidden;
    background: #05070c;
}

.story03-night__image {
    position: absolute;
    inset: 0;
}

.story03-night__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(2, 4, 8, 0.08) 0%,
            rgba(2, 4, 8, 0.22) 50%,
            rgba(2, 4, 8, 0.65) 100%);
}

.story03-night__content {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 85px;
    width: calc(100% - 80px);
    transform: translateX(-50%);
    text-align: center;
    color: #ffffff;
}

.story03-night__number {
    margin: 0 0 14px;
    font-family: "Times New Roman", serif;
    font-size: 13px;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.6);
}

.story03-night__english {
    margin: 0 0 30px;
    font-family: "Times New Roman", serif;
    font-size: 12px;
    letter-spacing: 0.32em;
}

.story03-night__title {
    margin: 0;
    font-size: clamp(30px, 4vw, 54px);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.08em;
}

.story03-night__text {
    margin: 32px 0 0;
    font-size: 14px;
    line-height: 2.2;
    letter-spacing: 0.1em;
}


/* ============================================================
   11 MOMENTS GALLERY
============================================================ */

.story03-gallery {
    padding: 180px 40px 200px;
    background: #07090e;
    color: #ffffff;
}

.story03-gallery__inner {
    width: min(1300px, 100%);
    margin: 0 auto;
}

.story03-gallery__heading {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    margin-bottom: 80px;
}

.story03-gallery__heading .story03-section-label {
    grid-column: 1 / -1;
    color: rgba(255, 255, 255, 0.5);
}

.story03-gallery__title {
    margin: 0;
    font-size: clamp(32px, 4vw, 54px);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.08em;
}

.story03-gallery__text {
    justify-self: end;
    width: min(360px, 100%);
    font-size: 13px;
    line-height: 2.3;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.72);
}

.story03-gallery__text p {
    margin: 0 0 24px;
}

.story03-gallery__text p:last-child {
    margin-bottom: 0;
}

.story03-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.story03-gallery__item {
    position: relative;
    margin: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #111111;
}

.story03-gallery__item img {
    transition:
        transform 0.8s ease,
        filter 0.8s ease;
}

.story03-gallery__item:hover img {
    transform: scale(1.035);
    filter: brightness(0.9);
}


/* ============================================================
   12 END OF STORIES
============================================================ */

.story03-end {
    background: #07090e;
    color: #ffffff;
}

.story03-end__link {
    position: relative;
    display: block;
    width: 100%;
    height: 700px;
    overflow: hidden;
}

.story03-end__image {
    position: absolute;
    inset: 0;
    transition: transform 1.5s ease;
}

.story03-end__link:hover .story03-end__image {
    transform: scale(1.02);
}

.story03-end__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(4, 6, 10, 0.1) 0%,
            rgba(4, 6, 10, 0.18) 40%,
            rgba(4, 6, 10, 0.68) 100%);
}

.story03-end__content {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: clamp(50px, 10vw, 180px);
    width: min(460px, 40vw);
    transform: translateY(-50%);
    color: #ffffff;
}

.story03-end__label {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 0.3em;
}

.story03-end__line {
    display: block;
    width: 50px;
    height: 1px;
    margin: 25px 0 38px;
    background: rgba(255, 255, 255, 0.75);
}

.story03-end__title {
    margin: 0;
    font-size: clamp(30px, 3.5vw, 50px);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.08em;
}

.story03-end__text {
    margin: 30px 0 0;
    font-size: 13px;
    line-height: 2.2;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.82);
}

.story03-end__button {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    margin-top: 48px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 0.22em;
    transition:
        gap 0.35s ease,
        opacity 0.35s ease;
}

.story03-end__link:hover .story03-end__button {
    gap: 28px;
}


/* ============================================================
   STORY NAVIGATION
============================================================ */

.story03-end__navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: min(1300px, calc(100% - 80px));
    margin: 0 auto;
    padding: 55px 0;
}

.story03-end__previous,
.story03-end__back {
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.35s ease;
}

.story03-end__previous:hover,
.story03-end__back:hover {
    color: #ffffff;
}


/* ============================================================
   TABLET
   1100px以下
============================================================ */

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

    /* HERO */

    .story03-hero {
        min-height: 680px;
    }

    .story03-hero__content {
        left: 7vw;
    }


    /* INTRO */

    .story03-intro {
        padding: 130px 40px 150px;
    }


    /* SPLIT */

    .story03-scene--split {
        grid-template-columns: 58% 42%;
        min-height: 650px;
    }

    .story03-scene--split .story03-scene__image {
        min-height: 650px;
    }

    .story03-scene--split .story03-scene__content {
        padding: 60px 50px;
    }

    .story03-scene--reverse {
        grid-template-columns: 42% 58%;
    }


    /* MAGIC HOUR */

    .story03-scene--center {
        padding: 140px 40px;
    }


    /* BLUE HOUR */

    .story03-bluehour__visual {
        min-height: 650px;
    }


    /* CITY LIGHTS */

    .story03-citylights {
        padding: 140px 40px;
    }

    .story03-citylights__inner {
        grid-template-columns: 58% 42%;
    }

    .story03-citylights__image {
        height: 620px;
    }

    .story03-citylights__content {
        padding-left: 55px;
    }


    /* ILLUMINATION */

    .story03-illumination__visual {
        min-height: 650px;
    }


    /* CLOSE */

    .story03-close {
        padding: 150px 40px;
    }

    .story03-close__inner {
        grid-template-columns: 50% 50%;
    }

    .story03-close__content {
        padding-left: 60px;
    }


    /* GALLERY */

    .story03-gallery {
        padding: 150px 40px 170px;
    }


    /* END */

    .story03-end__link {
        height: 600px;
    }

    .story03-end__content {
        right: 7vw;
        width: 43vw;
    }

}


/* ============================================================
   SMARTPHONE
   767px以下
============================================================ */

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

    /* ========================================================
     HERO
  ======================================================== */

    .story03-hero {
        height: 100svh;
        min-height: 620px;
    }

    .story03-hero__image {
        object-position: 58% center;
    }

    .story03-hero__overlay {
        background:
            linear-gradient(180deg,
                rgba(7, 10, 18, 0.12) 0%,
                rgba(7, 10, 18, 0.2) 40%,
                rgba(7, 10, 18, 0.68) 100%);
    }

    .story03-hero__content {
        top: auto;
        right: 28px;
        bottom: 75px;
        left: 28px;
        transform: none;
    }

    .story03-hero__number {
        margin-bottom: 20px;
        font-size: 9px;
    }

    .story03-hero__title {
        font-size: clamp(38px, 12vw, 54px);
        line-height: 1.05;
    }

    .story03-hero__catch {
        margin-top: 26px;
        font-size: 18px;
        line-height: 1.8;
    }

    .story03-hero__location {
        margin-top: 25px;
        font-size: 9px;
    }

    .story03-hero__scroll {
        display: none;
    }


    /* ========================================================
     INTRO
  ======================================================== */

    .story03-intro {
        padding: 100px 25px 120px;
    }

    .story03-section-label {
        margin-bottom: 22px;
        font-size: 9px;
    }

    .story03-intro__name {
        font-size: 31px;
    }

    .story03-intro__catch {
        margin-top: 38px;
        font-size: 23px;
        line-height: 1.8;
    }

    .story03-intro__text {
        margin-top: 48px;
        font-size: 13px;
        line-height: 2.25;
    }


    /* ========================================================
     SPLIT SCENES
  ======================================================== */

    .story03-scene--split,
    .story03-scene--reverse {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .story03-scene--split .story03-scene__image,
    .story03-scene--reverse .story03-scene__image {
        order: 1;
        width: 100%;
        min-height: 0;
        aspect-ratio: 3 / 2;
    }

    .story03-scene--split .story03-scene__content,
    .story03-scene--reverse .story03-scene__content {
        order: 2;
        padding: 75px 28px 90px;
    }

    .story03-scene__number {
        font-size: 11px;
    }

    .story03-scene__english {
        margin-bottom: 28px;
        font-size: 10px;
    }

    .story03-scene__title {
        font-size: 28px;
        line-height: 1.7;
    }

    .story03-scene__text {
        margin-top: 25px;
        font-size: 13px;
        line-height: 2.2;
    }


    /* ========================================================
     MAGIC HOUR
  ======================================================== */

    .story03-scene--center {
        padding: 100px 25px 110px;
    }

    .story03-scene__heading {
        margin-bottom: 50px;
    }

    .story03-scene__wide-image {
        height: auto;
        aspect-ratio: 3 / 2;
    }

    .story03-scene__center-text {
        margin-top: 48px;
        font-size: 13px;
        line-height: 2.25;
    }


    /* ========================================================
     BLUE HOUR
  ======================================================== */

    .story03-bluehour__visual {
        height: 100svh;
        min-height: 650px;
    }

    .story03-bluehour__visual img {
        object-position: center;
    }

    .story03-bluehour__overlay {
        background:
            linear-gradient(180deg,
                rgba(5, 11, 24, 0.08) 0%,
                rgba(5, 11, 24, 0.18) 45%,
                rgba(5, 11, 24, 0.72) 100%);
    }

    .story03-bluehour__content {
        top: auto;
        right: 28px;
        bottom: 70px;
        left: 28px;
        transform: none;
    }

    .story03-bluehour__title {
        font-size: 30px;
    }

    .story03-bluehour__text {
        margin-top: 28px;
        font-size: 13px;
    }


    /* ========================================================
     CITY LIGHTS
  ======================================================== */

    .story03-citylights {
        padding: 100px 25px 120px;
    }

    .story03-citylights__inner {
        display: flex;
        flex-direction: column;
    }

    .story03-citylights__image {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
    }

    .story03-citylights__content {
        padding: 65px 5px 0;
    }

    .story03-citylights__title {
        font-size: 29px;
    }

    .story03-citylights__text {
        font-size: 13px;
        line-height: 2.2;
    }


    /* ========================================================
     ILLUMINATION
  ======================================================== */

    .story03-illumination__visual {
        height: 100svh;
        min-height: 650px;
    }

    .story03-illumination__visual img {
        object-position: center;
    }

    .story03-illumination__overlay {
        background:
            linear-gradient(180deg,
                rgba(5, 6, 10, 0.08) 0%,
                rgba(5, 6, 10, 0.15) 42%,
                rgba(5, 6, 10, 0.7) 100%);
    }

    .story03-illumination__content {
        right: 28px;
        bottom: 70px;
        left: 28px;
    }

    .story03-illumination__title {
        font-size: 30px;
    }

    .story03-illumination__text {
        margin-top: 28px;
        font-size: 13px;
    }


    /* ========================================================
     CLOSE
  ======================================================== */

    .story03-close {
        padding: 110px 25px 120px;
    }

    .story03-close__inner {
        display: flex;
        flex-direction: column;
    }

    .story03-close__image {
        width: 100%;
    }

    .story03-close__content {
        width: 100%;
        padding: 65px 5px 0;
    }

    .story03-close__title {
        font-size: 28px;
    }

    .story03-close__text {
        font-size: 13px;
        line-height: 2.2;
    }


    /* ========================================================
     NIGHT
  ======================================================== */

    .story03-night {
        height: 100svh;
        min-height: 650px;
    }

    .story03-night__image {
        object-position: center;
    }

    .story03-night__content {
        right: 28px;
        bottom: 65px;
        left: 28px;
        width: auto;
        transform: none;
    }

    .story03-night__title {
        font-size: 28px;
    }

    .story03-night__text {
        font-size: 13px;
    }


    /* ========================================================
     MOMENTS GALLERY
  ======================================================== */

    .story03-gallery {
        padding: 110px 20px 130px;
    }

    .story03-gallery__heading {
        display: block;
        margin-bottom: 55px;
    }

    .story03-gallery__title {
        font-size: 30px;
    }

    .story03-gallery__text {
        width: 100%;
        margin-top: 38px;
        font-size: 12px;
        line-height: 2.2;
    }

    .story03-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }


    /* ========================================================
     END OF STORIES
  ======================================================== */

    .story03-end__link {
        height: 620px;
    }

    .story03-end__image {
        object-position: 43% center;
    }

    .story03-end__overlay {
        background:
            linear-gradient(180deg,
                rgba(4, 6, 10, 0.05) 0%,
                rgba(4, 6, 10, 0.22) 45%,
                rgba(4, 6, 10, 0.78) 100%);
    }

    .story03-end__content {
        top: auto;
        right: 28px;
        bottom: 60px;
        left: 28px;
        width: auto;
        transform: none;
    }

    .story03-end__label {
        font-size: 9px;
    }

    .story03-end__line {
        margin: 20px 0 28px;
    }

    .story03-end__title {
        font-size: 28px;
        line-height: 1.65;
    }

    .story03-end__text {
        margin-top: 22px;
        font-size: 12px;
    }

    .story03-end__button {
        margin-top: 34px;
        font-size: 9px;
    }


    /* ========================================================
     STORY NAVIGATION
  ======================================================== */

    .story03-end__navigation {
        width: calc(100% - 50px);
        padding: 40px 0;
    }

    .story03-end__previous,
    .story03-end__back {
        font-size: 8px;
        letter-spacing: 0.15em;
    }

}


/* ============================================================
   VERY SMALL SMARTPHONE
   420px以下
============================================================ */

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

    .story03-hero__content {
        right: 22px;
        left: 22px;
    }

    .story03-hero__title {
        font-size: 36px;
    }

    .story03-intro {
        padding-right: 22px;
        padding-left: 22px;
    }

    .story03-gallery {
        padding-right: 15px;
        padding-left: 15px;
    }

    .story03-gallery__grid {
        gap: 4px;
    }

    .story03-end__content {
        right: 22px;
        left: 22px;
    }

    .story03-end__navigation {
        width: calc(100% - 40px);
    }

}




/* ============================================================
   PHOTO PAGE
============================================================ */


/* ============================================================
   00 PHOTO BASE
============================================================ */

.photo-page {
    margin: 0;
    padding: 0;
    background: #ffffff;
    color: #171717;
    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        "Hiragino Mincho Pro",
        serif;
}

.photo-page *,
.photo-page *::before,
.photo-page *::after {
    box-sizing: border-box;
}

.photo-page main {
    width: 100%;
    overflow: hidden;
}

.photo-page main img {
    display: block;
    width: 100%;
    height: auto;
}

.photo-page main a {
    color: inherit;
    text-decoration: none;
}

.photo-container {
    width: min(1200px, calc(100% - 120px));
    margin: 0 auto;
}


/* ------------------------------------------------------------
   COMMON TYPOGRAPHY
------------------------------------------------------------ */

.photo-section-label {
    margin: 0 0 22px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.28em;
    line-height: 1.5;
    color: #777777;
}

.photo-section-title {
    margin: 0;
    font-size: clamp(34px, 3.3vw, 54px);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.06em;
}

.photo-section-heading {
    margin-bottom: 80px;
}

.photo-section-heading--center {
    text-align: center;
}


/* ============================================================
   01 HERO
============================================================ */

.photo-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 720px;
    overflow: hidden;
    background: #111111;
}

.photo-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
}

.photo-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.48) 0%,
            rgba(0, 0, 0, 0.22) 38%,
            rgba(0, 0, 0, 0.03) 70%,
            rgba(0, 0, 0, 0) 100%);
}

.photo-hero__content {
    position: absolute;
    z-index: 2;
    left: 8%;
    top: 50%;
    transform: translateY(-40%);
    color: #ffffff;
}

.photo-hero__label {
    margin: 0 0 28px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.35em;
}

.photo-hero__title {
    margin: 0;
    font-size: clamp(42px, 4.7vw, 74px);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: 0.08em;
}

.photo-hero__en {
    margin: 34px 0 0;
    font-family: "Times New Roman", serif;
    font-size: 15px;
    font-style: italic;
    letter-spacing: 0.1em;
}


/* ============================================================
   02 INTRO
============================================================ */

.photo-intro {
    padding: 170px 0 180px;
    background: #ffffff;
}

.photo-intro__inner {
    max-width: 900px;
    text-align: center;
}

.photo-intro__title {
    margin: 0;
    font-size: clamp(36px, 3.6vw, 58px);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.06em;
}

.photo-intro__text {
    margin-top: 65px;
    font-size: 16px;
    line-height: 2.35;
    letter-spacing: 0.08em;
}

.photo-intro__text p {
    margin: 0 0 35px;
}

.photo-intro__text p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   03 WHAT WE CAPTURE
============================================================ */

.photo-capture {
    padding: 150px 0 180px;
    background: #f7f5f1;
}

.photo-capture-item {
    display: grid;
    grid-template-columns: 60% 40%;
    align-items: center;
    margin-bottom: 130px;
}

.photo-capture-item:last-child {
    margin-bottom: 0;
}

.photo-capture-item--reverse {
    grid-template-columns: 40% 60%;
}

.photo-capture-item--reverse .photo-capture-item__visual {
    order: 2;
}

.photo-capture-item--reverse .photo-capture-item__content {
    order: 1;
    padding-left: 0;
    padding-right: 14%;
}


/* IMAGE */

.photo-capture-item__visual {
    overflow: hidden;
}

.photo-capture-item__visual img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;

    transition:
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.photo-capture-item:hover .photo-capture-item__visual img {
    transform: scale(1.025);
}


/* TEXT */

.photo-capture-item__content {
    padding-left: 14%;
}

.photo-capture-item__number {
    display: block;
    margin-bottom: 25px;
    font-family: "Times New Roman", serif;
    font-size: 12px;
    letter-spacing: 0.15em;
    color: #999999;
}

.photo-capture-item__label {
    margin: 0 0 22px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.28em;
    color: #777777;
}

.photo-capture-item__content h3 {
    margin: 0 0 35px;
    font-size: clamp(30px, 2.8vw, 44px);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.06em;
}

.photo-capture-item__content>p:last-child {
    margin: 0;
    max-width: 430px;
    font-size: 15px;
    line-height: 2.2;
    letter-spacing: 0.05em;
}


/* ============================================================
   04 PHOTO STORY
============================================================ */

.photo-story-section {
    padding: 160px 0 0;
    background: #ffffff;
}


/* ------------------------------------------------------------
   STANDARD SCENE
------------------------------------------------------------ */

.photo-story-scene {
    width: min(1380px, calc(100% - 100px));
    margin: 0 auto 140px;

    display: grid;
    grid-template-columns: 68% 32%;
    align-items: center;
}

.photo-story-scene--reverse {
    grid-template-columns: 32% 68%;
}

.photo-story-scene--reverse .photo-story-scene__visual {
    order: 2;
}

.photo-story-scene--reverse .photo-story-scene__caption {
    order: 1;
    padding-left: 0;
    padding-right: 18%;
}


/* IMAGE */

.photo-story-scene__visual {
    overflow: hidden;
}

.photo-story-scene__visual img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;

    transition:
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.photo-story-scene:hover .photo-story-scene__visual img {
    transform: scale(1.025);
}


/* TEXT */

.photo-story-scene__caption {
    padding-left: 18%;
}

.photo-story-scene__caption span {
    display: block;
    margin-bottom: 20px;
    font-family: "Times New Roman", serif;
    font-size: 12px;
    color: #999999;
}

.photo-story-scene__caption p {
    margin: 0 0 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.26em;
    color: #777777;
}

.photo-story-scene__caption h3 {
    margin: 0;
    font-size: clamp(28px, 2.6vw, 42px);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.06em;
}


/* ------------------------------------------------------------
   WIDE STORY SCENE
------------------------------------------------------------ */

.photo-story-wide {
    width: 100%;
    margin: 0 0 140px;
}

.photo-story-wide__visual {
    position: relative;
    width: 100%;
    min-height: 680px;
    overflow: hidden;
    background: #111111;
}

.photo-story-wide__visual>img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.photo-story-wide:hover .photo-story-wide__visual>img {
    transform: scale(1.02);
}

.photo-story-wide__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.46) 0%,
            rgba(0, 0, 0, 0.12) 50%,
            rgba(0, 0, 0, 0) 75%);
}

.photo-story-wide__content {
    position: absolute;
    z-index: 2;

    left: 8%;
    bottom: 12%;

    color: #ffffff;
}

.photo-story-wide__content span {
    display: block;
    margin-bottom: 18px;

    font-family: "Times New Roman", serif;
    font-size: 12px;

    opacity: 0.75;
}

.photo-story-wide__content p {
    margin: 0 0 20px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.3em;
}

.photo-story-wide__content h3 {
    margin: 0;

    font-size: clamp(34px, 3.4vw, 54px);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.06em;
}


/* SUNSET */

.photo-story-wide--sunset {
    margin-bottom: 0;
}

.photo-story-wide--sunset .photo-story-wide__overlay {
    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.38) 0%,
            rgba(0, 0, 0, 0.08) 55%,
            rgba(0, 0, 0, 0) 80%);
}


/* ============================================================
   05 MOMENTS GALLERY
============================================================ */

.photo-gallery {
    padding: 170px 0;
    background: #f7f5f1;
}

.photo-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.photo-gallery__item {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: #eeeeee;
}

.photo-gallery__item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;

    transition:
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.6s ease;
}

.photo-gallery__item:hover img {
    transform: scale(1.035);
    opacity: 0.94;
}


/* ============================================================
   06 PHOTO PLAN
============================================================ */

.photo-plan {
    padding: 170px 0 180px;
    background: #ffffff;
}

.photo-plan__heading {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 80px;
    align-items: end;
    margin-bottom: 90px;
}

.photo-plan__heading .photo-section-label {
    grid-column: 1 / -1;
}

.photo-plan__heading .photo-section-title {
    grid-column: 1;
}

.photo-plan__lead {
    grid-column: 2;

    margin: 0;
    max-width: 480px;

    font-size: 15px;
    line-height: 2.2;
    letter-spacing: 0.05em;
}


/* PLAN CARD */

.photo-plan__card {
    padding: 80px 8%;
    border: 1px solid #d9d5ce;
}

.photo-plan__card-heading {
    padding-bottom: 50px;
    border-bottom: 1px solid #d9d5ce;
}

.photo-plan__card-heading p {
    margin: 0 0 15px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.28em;

    color: #777777;
}

.photo-plan__card-heading h3 {
    margin: 0;

    font-family: "Times New Roman", serif;
    font-size: clamp(32px, 3vw, 46px);
    font-weight: 400;
    letter-spacing: 0.04em;
}


/* DETAILS */

.photo-plan__details {
    padding: 50px 0;
}

.photo-plan__details dl {
    margin: 0;
}

.photo-plan__details dl>div {
    display: grid;
    grid-template-columns: 34% 66%;
    padding: 20px 0;
    border-bottom: 1px solid #e7e4df;
}

.photo-plan__details dt {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: #777777;
}

.photo-plan__details dd {
    margin: 0;

    font-family: "Times New Roman", serif;
    font-size: 16px;
    letter-spacing: 0.05em;
}

.photo-plan__note {
    margin: 0;

    font-size: 12px;
    line-height: 1.9;
    letter-spacing: 0.04em;

    color: #777777;
}


/* ============================================================
   07 INCLUDED
============================================================ */

.photo-included {
    padding: 160px 0;
    background: #f7f5f1;
}

.photo-included__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid #d8d4ce;
    border-left: 1px solid #d8d4ce;
}

.photo-included__item {
    min-height: 220px;
    padding: 45px;

    border-right: 1px solid #d8d4ce;
    border-bottom: 1px solid #d8d4ce;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    transition:
        background 0.35s ease,
        color 0.35s ease;
}

.photo-included__item:hover {
    background: #171717;
    color: #ffffff;
}

.photo-included__item span {
    font-family: "Times New Roman", serif;
    font-size: 11px;
    color: #999999;
}

.photo-included__item h3 {
    margin: 40px 0 10px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.2em;
}

.photo-included__item p {
    margin: 0;

    font-size: 14px;
    letter-spacing: 0.08em;
}


/* ============================================================
   08 PHOTO & FILM
============================================================ */

.photo-film-link {
    display: grid;
    grid-template-columns: 58% 42%;
    min-height: 720px;

    background: #ffffff;
}

.photo-film-link__visual {
    overflow: hidden;
}

.photo-film-link__visual img {
    width: 100%;
    height: 100% !important;

    object-fit: cover;
    object-position: center;

    transition:
        transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.photo-film-link:hover .photo-film-link__visual img {
    transform: scale(1.025);
}

.photo-film-link__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 100px 13%;
}

.photo-film-link__content h2 {
    margin: 0 0 45px;

    font-size: clamp(34px, 3vw, 50px);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.06em;
}

.photo-film-link__content>p:not(.photo-section-label) {
    margin: 0 0 25px;

    font-size: 15px;
    line-height: 2.15;
    letter-spacing: 0.05em;
}


/* TEXT LINK */

.photo-text-link {
    display: inline-flex;
    align-items: center;
    gap: 25px;

    width: fit-content;
    margin-top: 35px;
    padding-bottom: 8px;

    border-bottom: 1px solid #171717;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.2em;

    transition:
        opacity 0.3s ease,
        gap 0.3s ease;
}

.photo-text-link span {
    transition: transform 0.3s ease;
}

.photo-text-link:hover {
    opacity: 0.6;
    gap: 32px;
}

.photo-text-link:hover span {
    transform: translateX(3px);
}


/* ============================================================
   09 FLOW
============================================================ */

.photo-flow {
    padding: 170px 0;
    background: #ffffff;
}

.photo-flow__list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);

    border-top: 1px solid #d9d5ce;
    border-bottom: 1px solid #d9d5ce;
}

.photo-flow__item {
    position: relative;
    min-height: 210px;

    padding: 35px 25px;

    border-right: 1px solid #d9d5ce;
}

.photo-flow__item:last-child {
    border-right: 0;
}

.photo-flow__item:not(:last-child)::after {
    content: "→";

    position: absolute;
    top: 50%;
    right: -8px;
    z-index: 2;

    transform: translateY(-50%);

    width: 16px;
    background: #ffffff;

    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;

    color: #999999;
}

.photo-flow__item span {
    display: block;
    margin-bottom: 55px;

    font-family: "Times New Roman", serif;
    font-size: 11px;

    color: #999999;
}

.photo-flow__item h3 {
    margin: 0 0 12px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
}

.photo-flow__item p {
    margin: 0;

    font-size: 13px;
    letter-spacing: 0.05em;
}

.photo-flow__link {
    display: flex;
    justify-content: flex-end;
}


/* ============================================================
   10 FINAL CTA
============================================================ */

.photo-cta {
    position: relative;
    width: 100%;
    height: 700px;

    overflow: hidden;
    background: #111111;
}

.photo-cta__image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100% !important;

    object-fit: cover;
    object-position: center;
}

.photo-cta__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.42) 0%,
            rgba(0, 0, 0, 0.15) 50%,
            rgba(0, 0, 0, 0.04) 100%);
}

.photo-cta__content {
    position: absolute;
    z-index: 2;

    left: 8%;
    top: 50%;

    transform: translateY(-50%);

    color: #ffffff;
}

.photo-cta__label {
    margin: 0 0 25px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.3em;
}

.photo-cta__content h2 {
    margin: 0 0 50px;

    font-size: clamp(36px, 3.6vw, 58px);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.07em;
}


/* CTA BUTTON */

.photo-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 28px;

    min-width: 210px;
    min-height: 58px;

    padding: 17px 30px;

    border: 1px solid rgba(255, 255, 255, 0.8);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.2em;

    color: #ffffff !important;

    transition:
        background 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease;
}

.photo-cta__button:hover {
    background: #ffffff;
    color: #171717 !important;
    border-color: #ffffff;
}


/* ============================================================
   TABLET
   768px - 1100px
============================================================ */

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

    .photo-container {
        width: calc(100% - 80px);
    }


    /* HERO */

    .photo-hero {
        min-height: 650px;
    }

    .photo-hero__content {
        left: 7%;
    }


    /* INTRO */

    .photo-intro {
        padding: 130px 0 140px;
    }


    /* CAPTURE */

    .photo-capture {
        padding: 120px 0 140px;
    }

    .photo-capture-item {
        grid-template-columns: 58% 42%;
        margin-bottom: 100px;
    }

    .photo-capture-item--reverse {
        grid-template-columns: 42% 58%;
    }

    .photo-capture-item__content {
        padding-left: 10%;
    }

    .photo-capture-item--reverse .photo-capture-item__content {
        padding-right: 10%;
    }


    /* PHOTO STORY */

    .photo-story-section {
        padding-top: 130px;
    }

    .photo-story-scene {
        width: calc(100% - 80px);
        grid-template-columns: 62% 38%;
        margin-bottom: 110px;
    }

    .photo-story-scene--reverse {
        grid-template-columns: 38% 62%;
    }

    .photo-story-scene__caption {
        padding-left: 12%;
    }

    .photo-story-scene--reverse .photo-story-scene__caption {
        padding-right: 12%;
    }

    .photo-story-wide {
        margin-bottom: 110px;
    }

    .photo-story-wide__visual {
        min-height: 560px;
    }


    /* GALLERY */

    .photo-gallery {
        padding: 130px 0;
    }


    /* PLAN */

    .photo-plan {
        padding: 130px 0 140px;
    }

    .photo-plan__heading {
        column-gap: 50px;
    }


    /* INCLUDED */

    .photo-included {
        padding: 130px 0;
    }


    /* PHOTO FILM */

    .photo-film-link {
        grid-template-columns: 55% 45%;
        min-height: 620px;
    }

    .photo-film-link__content {
        padding: 70px 10%;
    }


    /* FLOW */

    .photo-flow {
        padding: 130px 0;
    }

    .photo-flow__list {
        grid-template-columns: repeat(3, 1fr);
    }

    .photo-flow__item {
        border-bottom: 1px solid #d9d5ce;
    }

    .photo-flow__item:nth-child(3) {
        border-right: 0;
    }

    .photo-flow__item:nth-child(4),
    .photo-flow__item:nth-child(5),
    .photo-flow__item:nth-child(6) {
        border-bottom: 0;
    }

    .photo-flow__item:nth-child(3)::after {
        display: none;
    }


    /* CTA */

    .photo-cta {
        height: 600px;
    }

}


/* ============================================================
   SMARTPHONE
   max-width: 767px
============================================================ */

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

    .photo-container {
        width: calc(100% - 40px);
    }

    .photo-section-label {
        margin-bottom: 16px;
        font-size: 10px;
    }

    .photo-section-title {
        font-size: 30px;
        line-height: 1.65;
    }

    .photo-section-heading {
        margin-bottom: 50px;
    }


    /* ----------------------------------------------------------
     HERO
  ---------------------------------------------------------- */

    .photo-hero {
        height: 100svh;
        min-height: 620px;
    }

    .photo-hero__image {
        object-position: 60% center;
    }

    .photo-hero__overlay {
        background:
            linear-gradient(90deg,
                rgba(0, 0, 0, 0.50) 0%,
                rgba(0, 0, 0, 0.15) 80%);
    }

    .photo-hero__content {
        left: 25px;
        right: 25px;
        top: auto;
        bottom: 12%;

        transform: none;
    }

    .photo-hero__label {
        margin-bottom: 20px;
        font-size: 10px;
    }

    .photo-hero__title {
        font-size: clamp(34px, 10vw, 46px);
        line-height: 1.55;
    }

    .photo-hero__en {
        margin-top: 24px;
        font-size: 13px;
    }


    /* ----------------------------------------------------------
     INTRO
  ---------------------------------------------------------- */

    .photo-intro {
        padding: 100px 0;
    }

    .photo-intro__title {
        font-size: 30px;
        line-height: 1.75;
    }

    .photo-intro__text {
        margin-top: 45px;
        font-size: 14px;
        line-height: 2.2;
    }


    /* ----------------------------------------------------------
     WHAT WE CAPTURE
  ---------------------------------------------------------- */

    .photo-capture {
        padding: 90px 0 110px;
    }

    .photo-capture-item,
    .photo-capture-item--reverse {
        display: flex;
        flex-direction: column;

        margin-bottom: 90px;
    }

    .photo-capture-item--reverse .photo-capture-item__visual,
    .photo-capture-item--reverse .photo-capture-item__content {
        order: initial;
    }

    .photo-capture-item__visual {
        width: 100%;
    }

    .photo-capture-item__content,
    .photo-capture-item--reverse .photo-capture-item__content {
        width: 100%;
        padding: 38px 0 0;
    }

    .photo-capture-item__number {
        margin-bottom: 18px;
    }

    .photo-capture-item__label {
        margin-bottom: 15px;
    }

    .photo-capture-item__content h3 {
        margin-bottom: 25px;
        font-size: 28px;
    }

    .photo-capture-item__content>p:last-child {
        font-size: 14px;
        line-height: 2.1;
    }


    /* ----------------------------------------------------------
     PHOTO STORY
  ---------------------------------------------------------- */

    .photo-story-section {
        padding-top: 100px;
    }

    .photo-story-scene,
    .photo-story-scene--reverse {
        display: flex;
        flex-direction: column;

        width: calc(100% - 40px);
        margin-bottom: 90px;
    }

    .photo-story-scene--reverse .photo-story-scene__visual,
    .photo-story-scene--reverse .photo-story-scene__caption {
        order: initial;
    }

    .photo-story-scene__caption,
    .photo-story-scene--reverse .photo-story-scene__caption {
        width: 100%;
        padding: 35px 0 0;
    }

    .photo-story-scene__caption span {
        margin-bottom: 14px;
    }

    .photo-story-scene__caption p {
        margin-bottom: 14px;
    }

    .photo-story-scene__caption h3 {
        font-size: 27px;
    }


    /* WIDE */

    .photo-story-wide {
        margin-bottom: 90px;
    }

    .photo-story-wide__visual {
        min-height: 520px;
    }

    .photo-story-wide__visual>img {
        object-position: center;
    }

    .photo-story-wide__overlay {
        background:
            linear-gradient(0deg,
                rgba(0, 0, 0, 0.48) 0%,
                rgba(0, 0, 0, 0.05) 70%);
    }

    .photo-story-wide__content {
        left: 25px;
        right: 25px;
        bottom: 45px;
    }

    .photo-story-wide__content h3 {
        font-size: 30px;
    }


    /* ----------------------------------------------------------
     GALLERY
  ---------------------------------------------------------- */

    .photo-gallery {
        padding: 100px 0;
    }

    .photo-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }


    /* ----------------------------------------------------------
     PHOTO PLAN
  ---------------------------------------------------------- */

    .photo-plan {
        padding: 100px 0;
    }

    .photo-plan__heading {
        display: block;
        margin-bottom: 55px;
    }

    .photo-plan__lead {
        margin-top: 35px;
        font-size: 14px;
        line-height: 2.1;
    }

    .photo-plan__card {
        padding: 50px 25px;
    }

    .photo-plan__card-heading {
        padding-bottom: 35px;
    }

    .photo-plan__card-heading h3 {
        font-size: 30px;
    }

    .photo-plan__details {
        padding: 35px 0;
    }

    .photo-plan__details dl>div {
        grid-template-columns: 1fr;
        row-gap: 10px;
        padding: 18px 0;
    }

    .photo-plan__details dd {
        font-size: 15px;
    }


    /* ----------------------------------------------------------
     INCLUDED
  ---------------------------------------------------------- */

    .photo-included {
        padding: 100px 0;
    }

    .photo-included__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .photo-included__item {
        min-height: 170px;
        padding: 25px 20px;
    }

    .photo-included__item h3 {
        margin-top: 30px;
        font-size: 10px;
    }

    .photo-included__item p {
        font-size: 13px;
    }


    /* ----------------------------------------------------------
     PHOTO & FILM
  ---------------------------------------------------------- */

    .photo-film-link {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .photo-film-link__visual {
        width: 100%;
    }

    .photo-film-link__visual img {
        height: auto !important;
        aspect-ratio: 16 / 10;
        object-fit: cover;
    }

    .photo-film-link__content {
        padding: 75px 25px 90px;
    }

    .photo-film-link__content h2 {
        margin-bottom: 35px;
        font-size: 30px;
    }

    .photo-film-link__content>p:not(.photo-section-label) {
        font-size: 14px;
        line-height: 2.1;
    }


    /* ----------------------------------------------------------
     FLOW
  ---------------------------------------------------------- */

    .photo-flow {
        padding: 100px 0;
    }

    .photo-flow__list {
        display: block;
        border-bottom: 0;
    }

    .photo-flow__item {
        min-height: 0;

        padding: 28px 10px;

        display: grid;
        grid-template-columns: 45px 1fr;
        grid-template-rows: auto auto;
        align-items: center;

        border-right: 0;
        border-bottom: 1px solid #d9d5ce !important;
    }

    .photo-flow__item span {
        grid-row: 1 / 3;

        margin: 0;

        font-size: 11px;
    }

    .photo-flow__item h3 {
        margin: 0 0 6px;
    }

    .photo-flow__item p {
        margin: 0;
    }

    .photo-flow__item::after {
        display: none !important;
    }

    .photo-flow__link {
        justify-content: flex-start;
    }


    /* ----------------------------------------------------------
     FINAL CTA
  ---------------------------------------------------------- */

    .photo-cta {
        height: 580px;
    }

    .photo-cta__image {
        object-position: 56% center;
    }

    .photo-cta__overlay {
        background:
            linear-gradient(0deg,
                rgba(0, 0, 0, 0.48) 0%,
                rgba(0, 0, 0, 0.04) 75%);
    }

    .photo-cta__content {
        left: 25px;
        right: 25px;
        top: auto;
        bottom: 55px;

        transform: none;
    }

    .photo-cta__content h2 {
        margin-bottom: 35px;

        font-size: 31px;
        line-height: 1.65;
    }

    .photo-cta__button {
        min-width: 190px;
        min-height: 54px;
    }

}


/* ============================================================
   SMALL SMARTPHONE
   max-width: 420px
============================================================ */

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

    .photo-container {

        width: calc(100% - 32px);

    }

    .photo-hero__content {

        left: 20px;

        right: 20px;

    }

    .photo-hero__title {

        font-size: 34px;

    }

    .photo-intro__title {

        font-size: 27px;

    }

    .photo-section-title {

        font-size: 27px;

    }

    .photo-gallery__grid {

        gap: 5px;

    }

    .photo-included__item {

        min-height: 155px;

        padding: 22px 16px;

    }

    .photo-included__item h3 {

        font-size: 9px;

        letter-spacing: 0.14em;

    }

    .photo-story-wide__visual {

        min-height: 480px;

    }

    .photo-story-wide__content {

        left: 20px;

        right: 20px;

    }

    .photo-story-wide__content h3 {

        font-size: 27px;

    }

    .photo-film-link__content {

        padding-left: 20px;

        padding-right: 20px;

    }

    .photo-cta__content {

        left: 20px;

        right: 20px;

    }

    .photo-cta__content h2 {

        font-size: 28px;

    }

}



/* ============================================================
   FILM PAGE
============================================================ */


/* ============================================================
   00 FILM BASE
============================================================ */

.film-page {
    margin: 0;
    padding: 0;
    background: #ffffff;
    color: #171717;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        "Hiragino Mincho Pro",
        serif;
}

.film-page *,
.film-page *::before,
.film-page *::after {
    box-sizing: border-box;
}

.film-page main {
    width: 100%;
    overflow: hidden;
}

.film-page main img,
.film-page main video {
    display: block;
    width: 100%;
}

.film-page main a {
    color: inherit;
    text-decoration: none;
}

.film-page button {
    font: inherit;
}

.film-container {
    width: min(1200px, calc(100% - 120px));
    margin: 0 auto;
}


/* ------------------------------------------------------------
   COMMON TYPOGRAPHY
------------------------------------------------------------ */

.film-section-label {
    margin: 0 0 22px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.28em;

    color: #777777;
}

.film-section-title {
    margin: 0;

    font-size: clamp(34px, 3.3vw, 54px);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.06em;
}

.film-section-heading {
    margin-bottom: 80px;
}

.film-section-heading--center {
    text-align: center;
}


/* ============================================================
   01 HERO
============================================================ */

.film-hero {
    position: relative;

    width: 100%;
    height: 100vh;
    min-height: 720px;

    overflow: hidden;
    background: #111111;
}


/* HERO VIDEO */

.film-hero__video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* OVERLAY */

.film-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.52) 0%,
            rgba(0, 0, 0, 0.25) 38%,
            rgba(0, 0, 0, 0.08) 68%,
            rgba(0, 0, 0, 0.02) 100%);
}


/* HERO TEXT */

.film-hero__content {
    position: absolute;
    z-index: 2;

    left: 8%;
    top: 50%;

    transform: translateY(-42%);

    color: #ffffff;
}

.film-hero__label {
    margin: 0 0 28px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.35em;
}

.film-hero__title {
    margin: 0;

    font-size: clamp(42px, 4.7vw, 74px);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: 0.08em;
}

.film-hero__en {
    margin: 34px 0 0;

    font-family: "Times New Roman", serif;
    font-size: 15px;
    font-style: italic;
    letter-spacing: 0.1em;
}


/* HERO PLAY */

.film-hero__play {
    position: absolute;
    z-index: 3;

    right: 7%;
    bottom: 9%;

    display: flex;
    align-items: center;
    gap: 18px;

    padding: 0;

    border: 0;
    background: transparent;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.22em;

    color: #ffffff;

    cursor: pointer;

    transition: opacity 0.3s ease;
}

.film-hero__play:hover {
    opacity: 0.65;
}

.film-play-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    padding-left: 3px;

    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;

    font-size: 11px;

    transition:
        background 0.35s ease,
        color 0.35s ease;
}

.film-hero__play:hover .film-play-icon {
    background: #ffffff;
    color: #171717;
}


/* ============================================================
   02 INTRO
============================================================ */

.film-intro {
    padding: 170px 0 180px;
    background: #ffffff;
}

.film-intro__inner {
    max-width: 900px;
    text-align: center;
}

.film-intro__title {
    margin: 0;

    font-size: clamp(36px, 3.6vw, 58px);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.06em;
}

.film-intro__text {
    margin-top: 65px;

    font-size: 16px;
    line-height: 2.35;
    letter-spacing: 0.08em;
}

.film-intro__text p {
    margin: 0 0 38px;
}

.film-intro__text p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   03 WHAT WE CAPTURE
============================================================ */

.film-experience {
    padding: 150px 0 0;
    background: #f7f5f1;
}


/* ------------------------------------------------------------
   MOTION / VOICE
------------------------------------------------------------ */

.film-experience-item {
    display: grid;
    grid-template-columns: 60% 40%;
    align-items: center;

    margin-bottom: 140px;
}

.film-experience-item--reverse {
    grid-template-columns: 40% 60%;
}

.film-experience-item--reverse .film-experience-item__media {
    order: 2;
}

.film-experience-item--reverse .film-experience-item__content {
    order: 1;

    padding-left: 0;
    padding-right: 14%;
}


/* VIDEO AREA */

.film-experience-item__media {
    position: relative;
    overflow: hidden;

    background: #111111;
}

.film-experience-item__media .film-video {
    aspect-ratio: 3 / 2;
}


/* TEXT */

.film-experience-item__content {
    padding-left: 14%;
}

.film-experience-item__number {
    display: block;

    margin-bottom: 25px;

    font-family: "Times New Roman", serif;
    font-size: 12px;
    letter-spacing: 0.15em;

    color: #999999;
}

.film-experience-item__label {
    margin: 0 0 22px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.28em;

    color: #777777;
}

.film-experience-item__content h3 {
    margin: 0 0 35px;

    font-size: clamp(30px, 2.8vw, 44px);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.06em;
}

.film-experience-item__content>p {
    margin: 0 0 25px;

    max-width: 430px;

    font-size: 15px;
    line-height: 2.2;
    letter-spacing: 0.05em;
}

.film-experience-item__content>p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   COMMON VIDEO
============================================================ */

.film-video {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    background: #111111;
}


/* ------------------------------------------------------------
   VIDEO PLAY BUTTON
------------------------------------------------------------ */

.film-video-play {
    position: absolute;
    z-index: 5;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    display: flex;
    align-items: center;
    justify-content: center;

    width: 74px;
    height: 74px;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    color: #ffffff;

    cursor: pointer;

    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        background 0.35s ease;
}

.film-video-play span {
    margin-left: 4px;
    font-size: 14px;
}

.film-video-play:hover {
    transform: translate(-50%, -50%) scale(1.08);
    background: rgba(0, 0, 0, 0.42);
}

.film-video-play.is-playing {
    opacity: 0;
    pointer-events: none;
}


/* ============================================================
   ATMOSPHERE
============================================================ */

.film-atmosphere {
    width: 100%;
}

.film-atmosphere__media {
    position: relative;

    width: 100%;
    height: 760px;

    overflow: hidden;
    background: #111111;
}

.film-atmosphere__media .film-video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.film-atmosphere__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.48) 0%,
            rgba(0, 0, 0, 0.15) 50%,
            rgba(0, 0, 0, 0.02) 80%);
}

.film-atmosphere__content {
    position: absolute;
    z-index: 3;

    left: 8%;
    bottom: 11%;

    color: #ffffff;
}

.film-atmosphere__content>span {
    display: block;

    margin-bottom: 18px;

    font-family: "Times New Roman", serif;
    font-size: 12px;

    opacity: 0.75;
}

.film-atmosphere__content>p {
    margin: 0 0 20px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.3em;
}

.film-atmosphere__content h3 {
    margin: 0 0 28px;

    font-size: clamp(34px, 3.4vw, 54px);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.06em;
}

.film-atmosphere__content>div {
    font-size: 14px;
    line-height: 2;
    letter-spacing: 0.06em;
}


/* ============================================================
   04 WEDDING FILM STORY
============================================================ */

.film-story-section {
    padding: 170px 0 0;
    background: #ffffff;
}


/* ------------------------------------------------------------
   MORNING / PREPARATION / CELEBRATION
------------------------------------------------------------ */

.film-story-scene {
    width: min(1380px, calc(100% - 100px));

    margin: 0 auto 140px;

    display: grid;
    grid-template-columns: 68% 32%;
    align-items: center;
}

.film-story-scene--reverse {
    grid-template-columns: 32% 68%;
}

.film-story-scene--reverse .film-story-scene__media {
    order: 2;
}

.film-story-scene--reverse .film-story-scene__caption {
    order: 1;

    padding-left: 0;
    padding-right: 18%;
}


/* VIDEO */

.film-story-scene__media {
    position: relative;

    overflow: hidden;
    background: #111111;
}

.film-story-scene__media .film-video {
    aspect-ratio: 3 / 2;
}


/* TEXT */

.film-story-scene__caption {
    padding-left: 18%;
}

.film-story-scene__caption>span {
    display: block;

    margin-bottom: 20px;

    font-family: "Times New Roman", serif;
    font-size: 12px;

    color: #999999;
}

.film-story-scene__caption>p {
    margin: 0 0 20px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.26em;

    color: #777777;
}

.film-story-scene__caption h3 {
    margin: 0;

    font-size: clamp(28px, 2.6vw, 42px);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.06em;
}


/* ============================================================
   CEREMONY / SUNSET WIDE VIDEO
============================================================ */

.film-story-wide {
    width: 100%;
    margin: 0 0 140px;
}

.film-story-wide__media {
    position: relative;

    width: 100%;
    height: 760px;

    overflow: hidden;
    background: #111111;
}

.film-story-wide__media .film-video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.film-story-wide__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.46) 0%,
            rgba(0, 0, 0, 0.12) 50%,
            rgba(0, 0, 0, 0) 78%);
}

.film-story-wide__content {
    position: absolute;
    z-index: 3;

    left: 8%;
    bottom: 11%;

    color: #ffffff;
}

.film-story-wide__content>span {
    display: block;

    margin-bottom: 18px;

    font-family: "Times New Roman", serif;
    font-size: 12px;

    opacity: 0.75;
}

.film-story-wide__content>p {
    margin: 0 0 20px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.3em;
}

.film-story-wide__content h3 {
    margin: 0;

    font-size: clamp(34px, 3.4vw, 54px);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.06em;
}


/* SUNSET */

.film-story-wide--sunset {
    margin-bottom: 0;
}

.film-story-wide--sunset .film-story-wide__overlay {
    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.36) 0%,
            rgba(0, 0, 0, 0.08) 55%,
            rgba(0, 0, 0, 0) 80%);
}


/* ============================================================
   05 FILM TYPES
============================================================ */

.film-types {
    padding: 170px 0 180px;

    background: #171717;
    color: #ffffff;
}

.film-types .film-section-label {
    color: rgba(255, 255, 255, 0.55);
}


/* GRID */

.film-types__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 24px;
}


/* CARD */

.film-type-card {
    min-width: 0;
}

.film-type-card__media {
    position: relative;

    overflow: hidden;
    background: #000000;
}

.film-type-card__media .film-video {
    aspect-ratio: 16 / 9;

    transition:
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.film-type-card:hover .film-type-card__media .film-video {
    transform: scale(1.025);
}

.film-type-card__media .film-video-play {
    width: 64px;
    height: 64px;
}


/* CARD TEXT */

.film-type-card__content {
    padding: 32px 4px 0;
}

.film-type-card__content>span {
    display: block;

    margin-bottom: 18px;

    font-family: "Times New Roman", serif;
    font-size: 11px;

    color: rgba(255, 255, 255, 0.45);
}

.film-type-card__label {
    margin: 0 0 14px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 0.25em;

    color: rgba(255, 255, 255, 0.6);
}

.film-type-card__content h3 {
    margin: 0 0 22px;

    font-family: "Times New Roman", serif;
    font-size: 27px;
    font-weight: 400;
    letter-spacing: 0.04em;
}

.film-type-card__content>p:last-child {
    margin: 0;

    max-width: 320px;

    font-size: 14px;
    line-height: 2;
    letter-spacing: 0.05em;

    color: rgba(255, 255, 255, 0.76);
}


/* ============================================================
   06 FILM PLAN
============================================================ */

.film-plan {
    padding: 170px 0 180px;
    background: #ffffff;
}

.film-plan__heading {
    display: grid;
    grid-template-columns: 1fr 1fr;

    column-gap: 80px;
    align-items: end;

    margin-bottom: 90px;
}

.film-plan__lead {
    margin: 0;

    max-width: 480px;

    font-size: 15px;
    line-height: 2.2;
    letter-spacing: 0.05em;
}


/* PLAN CARD */

.film-plan__card {
    padding: 80px 8%;

    border: 1px solid #d9d5ce;
}

.film-plan__card-heading {
    padding-bottom: 50px;

    border-bottom: 1px solid #d9d5ce;
}

.film-plan__card-heading p {
    margin: 0 0 15px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.28em;

    color: #777777;
}

.film-plan__card-heading h3 {
    margin: 0;

    font-family: "Times New Roman", serif;
    font-size: clamp(32px, 3vw, 46px);
    font-weight: 400;
    letter-spacing: 0.04em;
}


/* DETAILS */

.film-plan__details {
    padding: 50px 0;
}

.film-plan__details dl {
    margin: 0;
}

.film-plan__details dl>div {
    display: grid;
    grid-template-columns: 34% 66%;

    padding: 20px 0;

    border-bottom: 1px solid #e7e4df;
}

.film-plan__details dt {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.22em;

    color: #777777;
}

.film-plan__details dd {
    margin: 0;

    font-family: "Times New Roman", serif;
    font-size: 16px;
    letter-spacing: 0.05em;
}

.film-plan__note {
    margin: 0;

    font-size: 12px;
    line-height: 1.9;
    letter-spacing: 0.04em;

    color: #777777;
}


/* ============================================================
   07 PHOTO & FILM
============================================================ */

.film-photo-link {
    display: grid;
    grid-template-columns: 58% 42%;

    min-height: 720px;

    background: #f7f5f1;
}

.film-photo-link__visual {
    overflow: hidden;
}

.film-photo-link__visual img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.film-photo-link:hover .film-photo-link__visual img {
    transform: scale(1.025);
}

.film-photo-link__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 100px 13%;
}

.film-photo-link__content h2 {
    margin: 0 0 45px;

    font-size: clamp(34px, 3vw, 50px);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.06em;
}

.film-photo-link__content>p:not(.film-section-label) {
    margin: 0 0 25px;

    font-size: 15px;
    line-height: 2.15;
    letter-spacing: 0.05em;
}


/* ============================================================
   COMMON TEXT LINK
============================================================ */

.film-text-link {
    display: inline-flex;
    align-items: center;

    gap: 25px;

    width: fit-content;

    margin-top: 35px;
    padding-bottom: 8px;

    border-bottom: 1px solid #171717;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.2em;

    transition:
        opacity 0.3s ease,
        gap 0.3s ease;
}

.film-text-link span {
    transition: transform 0.3s ease;
}

.film-text-link:hover {
    opacity: 0.6;
    gap: 32px;
}

.film-text-link:hover span {
    transform: translateX(3px);
}


/* ============================================================
   08 FLOW
============================================================ */

.film-flow {
    padding: 170px 0;
    background: #ffffff;
}

.film-flow__list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);

    border-top: 1px solid #d9d5ce;
    border-bottom: 1px solid #d9d5ce;
}

.film-flow__item {
    position: relative;

    min-height: 210px;

    padding: 35px 25px;

    border-right: 1px solid #d9d5ce;
}

.film-flow__item:last-child {
    border-right: 0;
}

.film-flow__item:not(:last-child)::after {
    content: "→";

    position: absolute;
    z-index: 2;

    top: 50%;
    right: -8px;

    transform: translateY(-50%);

    width: 16px;

    background: #ffffff;

    text-align: center;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;

    color: #999999;
}

.film-flow__item span {
    display: block;

    margin-bottom: 55px;

    font-family: "Times New Roman", serif;
    font-size: 11px;

    color: #999999;
}

.film-flow__item h3 {
    margin: 0 0 12px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
}

.film-flow__item p {
    margin: 0;

    font-size: 13px;
    letter-spacing: 0.05em;
}

.film-flow__link {
    display: flex;
    justify-content: flex-end;
}


/* ============================================================
   09 FINAL CTA
============================================================ */

.film-cta {
    position: relative;

    width: 100%;
    height: 700px;

    overflow: hidden;
    background: #111111;
}

.film-cta__image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.film-cta__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.50) 0%,
            rgba(0, 0, 0, 0.17) 48%,
            rgba(0, 0, 0, 0.02) 100%);
}

.film-cta__content {
    position: absolute;
    z-index: 2;

    left: 8%;
    top: 50%;

    transform: translateY(-50%);

    color: #ffffff;
}

.film-cta__label {
    margin: 0 0 25px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.3em;
}

.film-cta__content h2 {
    margin: 0 0 50px;

    font-size: clamp(36px, 3.6vw, 58px);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.07em;
}


/* CTA BUTTON */

.film-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 28px;

    min-width: 210px;
    min-height: 58px;

    padding: 17px 30px;

    border: 1px solid rgba(255, 255, 255, 0.8);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.2em;

    color: #ffffff !important;

    transition:
        background 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease;
}

.film-cta__button:hover {
    background: #ffffff;
    color: #171717 !important;
    border-color: #ffffff;
}


/* ============================================================
   TABLET
   max-width: 1100px
============================================================ */

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

    .film-container {
        width: calc(100% - 80px);
    }


    /* HERO */

    .film-hero {
        min-height: 650px;
    }

    .film-hero__content {
        left: 7%;
    }

    .film-hero__play {
        right: 6%;
    }


    /* INTRO */

    .film-intro {
        padding: 130px 0 140px;
    }


    /* EXPERIENCE */

    .film-experience {
        padding-top: 120px;
    }

    .film-experience-item {
        grid-template-columns: 58% 42%;
        margin-bottom: 110px;
    }

    .film-experience-item--reverse {
        grid-template-columns: 42% 58%;
    }

    .film-experience-item__content {
        padding-left: 10%;
    }

    .film-experience-item--reverse .film-experience-item__content {
        padding-right: 10%;
    }

    .film-atmosphere__media {
        height: 620px;
    }


    /* STORY */

    .film-story-section {
        padding-top: 130px;
    }

    .film-story-scene {
        width: calc(100% - 80px);

        grid-template-columns: 62% 38%;

        margin-bottom: 110px;
    }

    .film-story-scene--reverse {
        grid-template-columns: 38% 62%;
    }

    .film-story-scene__caption {
        padding-left: 12%;
    }

    .film-story-scene--reverse .film-story-scene__caption {
        padding-right: 12%;
    }

    .film-story-wide {
        margin-bottom: 110px;
    }

    .film-story-wide__media {
        height: 600px;
    }


    /* FILM TYPES */

    .film-types {
        padding: 130px 0 140px;
    }

    .film-types__grid {
        gap: 18px;
    }


    /* PLAN */

    .film-plan {
        padding: 130px 0 140px;
    }

    .film-plan__heading {
        column-gap: 50px;
    }


    /* PHOTO & FILM */

    .film-photo-link {
        grid-template-columns: 55% 45%;
        min-height: 620px;
    }

    .film-photo-link__content {
        padding: 70px 10%;
    }


    /* FLOW */

    .film-flow {
        padding: 130px 0;
    }

    .film-flow__list {
        grid-template-columns: repeat(3, 1fr);
    }

    .film-flow__item {
        border-bottom: 1px solid #d9d5ce;
    }

    .film-flow__item:nth-child(3) {
        border-right: 0;
    }

    .film-flow__item:nth-child(4),
    .film-flow__item:nth-child(5),
    .film-flow__item:nth-child(6) {
        border-bottom: 0;
    }

    .film-flow__item:nth-child(3)::after {
        display: none;
    }


    /* CTA */

    .film-cta {
        height: 600px;
    }

}


/* ============================================================
   SMARTPHONE
   max-width: 767px
============================================================ */

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

    .film-container {
        width: calc(100% - 40px);
    }

    .film-section-label {
        margin-bottom: 16px;

        font-size: 10px;
    }

    .film-section-title {
        font-size: 30px;
        line-height: 1.65;
    }

    .film-section-heading {
        margin-bottom: 50px;
    }


    /* ----------------------------------------------------------
     HERO
  ---------------------------------------------------------- */

    .film-hero {
        height: 100svh;
        min-height: 620px;
    }

    .film-hero__video {
        object-position: 58% center;
    }

    .film-hero__overlay {
        background:
            linear-gradient(0deg,
                rgba(0, 0, 0, 0.52) 0%,
                rgba(0, 0, 0, 0.08) 72%);
    }

    .film-hero__content {
        left: 25px;
        right: 25px;
        top: auto;
        bottom: 18%;

        transform: none;
    }

    .film-hero__label {
        margin-bottom: 20px;

        font-size: 10px;
    }

    .film-hero__title {
        font-size: clamp(34px, 10vw, 46px);
        line-height: 1.55;
    }

    .film-hero__en {
        margin-top: 24px;

        font-size: 13px;
    }

    .film-hero__play {
        left: 25px;
        right: auto;
        bottom: 6%;

        gap: 13px;
    }

    .film-play-icon {
        width: 46px;
        height: 46px;
    }


    /* ----------------------------------------------------------
     INTRO
  ---------------------------------------------------------- */

    .film-intro {
        padding: 100px 0;
    }

    .film-intro__title {
        font-size: 30px;
        line-height: 1.75;
    }

    .film-intro__text {
        margin-top: 45px;

        font-size: 14px;
        line-height: 2.2;
    }


    /* ----------------------------------------------------------
     EXPERIENCE
  ---------------------------------------------------------- */

    .film-experience {
        padding-top: 90px;
    }

    .film-experience-item,
    .film-experience-item--reverse {
        display: flex;
        flex-direction: column;

        margin-bottom: 90px;
    }

    .film-experience-item--reverse .film-experience-item__media,
    .film-experience-item--reverse .film-experience-item__content {
        order: initial;
    }

    .film-experience-item__media {
        width: 100%;
    }

    .film-experience-item__content,
    .film-experience-item--reverse .film-experience-item__content {
        width: 100%;

        padding: 38px 0 0;
    }

    .film-experience-item__number {
        margin-bottom: 18px;
    }

    .film-experience-item__label {
        margin-bottom: 15px;
    }

    .film-experience-item__content h3 {
        margin-bottom: 25px;

        font-size: 28px;
    }

    .film-experience-item__content>p {
        font-size: 14px;
        line-height: 2.1;
    }


    /* PLAY BUTTON */

    .film-video-play {
        width: 58px;
        height: 58px;
    }

    .film-video-play span {
        font-size: 11px;
    }


    /* ATMOSPHERE */

    .film-atmosphere__media {
        height: 560px;
    }

    .film-atmosphere__overlay {
        background:
            linear-gradient(0deg,
                rgba(0, 0, 0, 0.55) 0%,
                rgba(0, 0, 0, 0.05) 72%);
    }

    .film-atmosphere__content {
        left: 25px;
        right: 25px;
        bottom: 45px;
    }

    .film-atmosphere__content h3 {
        font-size: 30px;
    }


    /* ----------------------------------------------------------
     WEDDING FILM STORY
  ---------------------------------------------------------- */

    .film-story-section {
        padding-top: 100px;
    }

    .film-story-scene,
    .film-story-scene--reverse {
        display: flex;
        flex-direction: column;

        width: calc(100% - 40px);

        margin-bottom: 90px;
    }

    .film-story-scene--reverse .film-story-scene__media,
    .film-story-scene--reverse .film-story-scene__caption {
        order: initial;
    }

    .film-story-scene__caption,
    .film-story-scene--reverse .film-story-scene__caption {
        width: 100%;

        padding: 35px 0 0;
    }

    .film-story-scene__caption>span {
        margin-bottom: 14px;
    }

    .film-story-scene__caption>p {
        margin-bottom: 14px;
    }

    .film-story-scene__caption h3 {
        font-size: 27px;
    }


    /* WIDE */

    .film-story-wide {
        margin-bottom: 90px;
    }

    .film-story-wide__media {
        height: 540px;
    }

    .film-story-wide__overlay {
        background:
            linear-gradient(0deg,
                rgba(0, 0, 0, 0.52) 0%,
                rgba(0, 0, 0, 0.04) 72%);
    }

    .film-story-wide__content {
        left: 25px;
        right: 25px;
        bottom: 45px;
    }

    .film-story-wide__content h3 {
        font-size: 30px;
    }


    /* ----------------------------------------------------------
     FILM TYPES
  ---------------------------------------------------------- */

    .film-types {
        padding: 100px 0 110px;
    }

    .film-types__grid {
        grid-template-columns: 1fr;

        gap: 75px;
    }

    .film-type-card__content {
        padding-top: 25px;
    }

    .film-type-card__content h3 {
        font-size: 26px;
    }


    /* ----------------------------------------------------------
     FILM PLAN
  ---------------------------------------------------------- */

    .film-plan {
        padding: 100px 0;
    }

    .film-plan__heading {
        display: block;

        margin-bottom: 55px;
    }

    .film-plan__lead {
        margin-top: 35px;

        font-size: 14px;
        line-height: 2.1;
    }

    .film-plan__card {
        padding: 50px 25px;
    }

    .film-plan__card-heading {
        padding-bottom: 35px;
    }

    .film-plan__card-heading h3 {
        font-size: 30px;
    }

    .film-plan__details {
        padding: 35px 0;
    }

    .film-plan__details dl>div {
        grid-template-columns: 1fr;

        row-gap: 10px;

        padding: 18px 0;
    }

    .film-plan__details dd {
        font-size: 15px;
    }


    /* ----------------------------------------------------------
     PHOTO & FILM
  ---------------------------------------------------------- */

    .film-photo-link {
        display: flex;
        flex-direction: column;

        min-height: 0;
    }

    .film-photo-link__visual {
        width: 100%;
    }

    .film-photo-link__visual img {
        height: auto;

        aspect-ratio: 16 / 10;

        object-fit: cover;
    }

    .film-photo-link__content {
        padding: 75px 25px 90px;
    }

    .film-photo-link__content h2 {
        margin-bottom: 35px;

        font-size: 30px;
    }

    .film-photo-link__content>p:not(.film-section-label) {
        font-size: 14px;
        line-height: 2.1;
    }


    /* ----------------------------------------------------------
     FLOW
  ---------------------------------------------------------- */

    .film-flow {
        padding: 100px 0;
    }

    .film-flow__list {
        display: block;

        border-bottom: 0;
    }

    .film-flow__item {
        min-height: 0;

        padding: 28px 10px;

        display: grid;
        grid-template-columns: 45px 1fr;
        grid-template-rows: auto auto;
        align-items: center;

        border-right: 0;
        border-bottom: 1px solid #d9d5ce !important;
    }

    .film-flow__item span {
        grid-row: 1 / 3;

        margin: 0;

        font-size: 11px;
    }

    .film-flow__item h3 {
        margin: 0 0 6px;
    }

    .film-flow__item p {
        margin: 0;
    }

    .film-flow__item::after {
        display: none !important;
    }

    .film-flow__link {
        justify-content: flex-start;
    }


    /* ----------------------------------------------------------
     FINAL CTA
  ---------------------------------------------------------- */

    .film-cta {
        height: 580px;
    }

    .film-cta__image {
        object-position: 40% center;
    }

    .film-cta__overlay {
        background:
            linear-gradient(0deg,
                rgba(0, 0, 0, 0.56) 0%,
                rgba(0, 0, 0, 0.06) 72%);
    }

    .film-cta__content {
        left: 25px;
        right: 25px;
        top: auto;
        bottom: 55px;

        transform: none;
    }

    .film-cta__content h2 {
        margin-bottom: 35px;

        font-size: 31px;
        line-height: 1.65;
    }

    .film-cta__button {
        min-width: 190px;
        min-height: 54px;
    }

}


/* ============================================================
   SMALL SMARTPHONE
   max-width: 420px
============================================================ */

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

    .film-container {
        width: calc(100% - 32px);
    }


    /* HERO */

    .film-hero__content {
        left: 20px;
        right: 20px;
    }

    .film-hero__title {
        font-size: 34px;
    }

    .film-hero__play {
        left: 20px;
    }


    /* INTRO */

    .film-intro__title {
        font-size: 27px;
    }

    .film-section-title {
        font-size: 27px;
    }


    /* ATMOSPHERE */

    .film-atmosphere__media {
        height: 500px;
    }

    .film-atmosphere__content {
        left: 20px;
        right: 20px;
    }

    .film-atmosphere__content h3 {
        font-size: 27px;
    }


    /* STORY */

    .film-story-wide__media {
        height: 500px;
    }

    .film-story-wide__content {
        left: 20px;
        right: 20px;
    }

    .film-story-wide__content h3 {
        font-size: 27px;
    }


    /* PHOTO & FILM */

    .film-photo-link__content {
        padding-left: 20px;
        padding-right: 20px;
    }


    /* FINAL CTA */

    .film-cta__content {
        left: 20px;
        right: 20px;
    }

    .film-cta__content h2 {
        font-size: 28px;
    }

}



/* ============================================================
   PHOTO & FILM PAGE
============================================================ */


/* ============================================================
   00 BASE
============================================================ */

.photo-film-page {
    margin: 0;
    padding: 0;

    background: #ffffff;
    color: #171717;

    font-family:
        "Yu Mincho",
        "YuMincho",
        "Hiragino Mincho ProN",
        "Hiragino Mincho Pro",
        serif;
}

.photo-film-page *,
.photo-film-page *::before,
.photo-film-page *::after {
    box-sizing: border-box;
}

.photo-film-page main {
    width: 100%;
    overflow: hidden;
}

.photo-film-page main img,
.photo-film-page main video {
    display: block;
    width: 100%;
}

.photo-film-page main a {
    color: inherit;
    text-decoration: none;
}

.photo-film-page button {
    font: inherit;
}

.pf-container {
    width: min(1200px, calc(100% - 120px));
    margin: 0 auto;
}


/* ============================================================
   COMMON TYPOGRAPHY
============================================================ */

.pf-section-label {
    margin: 0 0 22px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.28em;

    color: #777777;
}

.pf-section-title {
    margin: 0;

    font-size: clamp(34px, 3.3vw, 54px);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.06em;
}

.pf-section-heading {
    margin-bottom: 80px;
}

.pf-section-heading--center {
    text-align: center;
}

.pf-number {
    display: block;

    margin-bottom: 20px;

    font-family: "Times New Roman", serif;
    font-size: 12px;
    letter-spacing: 0.15em;

    color: #999999;
}

.pf-item-label {
    margin: 0 0 18px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 0.26em;

    color: #777777;
}


/* ============================================================
   01 HERO
============================================================ */

.pf-hero {
    position: relative;

    width: 100%;
    height: 100vh;
    min-height: 720px;

    overflow: hidden;
    background: #111111;
}

.pf-hero__image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    animation: pfHeroZoom 12s ease-out forwards;
}

@keyframes pfHeroZoom {

    from {
        transform: scale(1.035);
    }

    to {
        transform: scale(1);
    }

}


/* ------------------------------------------------------------
   HERO OVERLAY
------------------------------------------------------------ */

.pf-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.53) 0%,
            rgba(0, 0, 0, 0.30) 38%,
            rgba(0, 0, 0, 0.08) 70%,
            rgba(0, 0, 0, 0.02) 100%);
}


/* ------------------------------------------------------------
   HERO CONTENT
------------------------------------------------------------ */

.pf-hero__content {
    position: absolute;
    z-index: 2;

    left: 8%;
    top: 50%;

    transform: translateY(-43%);

    color: #ffffff;
}

.pf-hero__label {
    margin: 0 0 28px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.32em;
}

.pf-hero__title {
    margin: 0;

    max-width: 900px;

    font-size: clamp(38px, 4vw, 66px);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: 0.07em;
}

.pf-hero__title span {
    display: inline-block;

    margin-top: 8px;

    font-size: 0.68em;
    line-height: 1.8;
}

.pf-hero__en {
    margin: 34px 0 0;

    font-family: "Times New Roman", serif;
    font-size: 15px;
    font-style: italic;
    letter-spacing: 0.1em;
}


/* ------------------------------------------------------------
   HERO SCROLL
------------------------------------------------------------ */

.pf-hero__scroll {
    position: absolute;
    z-index: 2;

    right: 5%;
    bottom: 45px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 14px;

    color: #ffffff;
}

.pf-hero__scroll span {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    letter-spacing: 0.25em;

    writing-mode: vertical-rl;
}

.pf-hero__scroll i {
    position: relative;

    display: block;

    width: 1px;
    height: 60px;

    overflow: hidden;

    background: rgba(255, 255, 255, 0.35);
}

.pf-hero__scroll i::after {
    content: "";

    position: absolute;

    left: 0;
    top: -100%;

    width: 1px;
    height: 100%;

    background: #ffffff;

    animation: pfScrollLine 2s ease-in-out infinite;
}

@keyframes pfScrollLine {

    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(200%);
    }

}


/* ============================================================
   02 INTRO
============================================================ */

.pf-intro {
    padding: 170px 0 180px;

    background: #ffffff;
}

.pf-intro__inner {
    max-width: 900px;

    text-align: center;
}

.pf-intro__title {
    margin: 0;

    font-size: clamp(36px, 3.6vw, 58px);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.06em;
}

.pf-intro__text {
    margin-top: 65px;

    font-size: 16px;
    line-height: 2.35;
    letter-spacing: 0.08em;
}

.pf-intro__text p {
    margin: 0 0 38px;
}

.pf-intro__text p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   03 TWO WAYS TO REMEMBER
============================================================ */

.pf-two-ways {
    padding: 150px 0 170px;

    background: #f7f5f1;
}


/* ------------------------------------------------------------
   GRID
------------------------------------------------------------ */

.pf-two-ways__grid {
    position: relative;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 90px;
}


/* ------------------------------------------------------------
   ITEM
------------------------------------------------------------ */

.pf-two-ways__item {
    min-width: 0;
}

.pf-two-ways__media {
    position: relative;

    overflow: hidden;
    background: #111111;
}

.pf-two-ways__media img,
.pf-two-ways__media video {
    width: 100%;

    aspect-ratio: 3 / 2;

    object-fit: cover;

    transition:
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.pf-two-ways__item:hover .pf-two-ways__media img {
    transform: scale(1.025);
}


/* ------------------------------------------------------------
   MEDIA LABEL
------------------------------------------------------------ */

.pf-media-label {
    position: absolute;
    z-index: 4;

    left: 22px;
    top: 22px;

    padding: 8px 12px;

    background: rgba(0, 0, 0, 0.35);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    letter-spacing: 0.22em;

    color: #ffffff;

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}


/* ------------------------------------------------------------
   CONTENT
------------------------------------------------------------ */

.pf-two-ways__content {
    padding: 42px 4px 0;
}

.pf-two-ways__content h3 {
    margin: 0 0 28px;

    font-size: clamp(27px, 2.3vw, 38px);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.06em;
}

.pf-two-ways__content>p:last-child {
    margin: 0;

    max-width: 470px;

    font-size: 14px;
    line-height: 2.15;
    letter-spacing: 0.05em;
}


/* ------------------------------------------------------------
   CROSS
------------------------------------------------------------ */

.pf-two-ways__cross {
    position: absolute;
    z-index: 5;

    left: 50%;
    top: 27%;

    transform: translate(-50%, -50%);

    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    border-radius: 50%;

    background: #f7f5f1;

    font-family: "Times New Roman", serif;
    font-size: 25px;
    font-weight: 300;

    color: #777777;
}


/* ============================================================
   COMMON VIDEO
============================================================ */

.pf-video-wrap {
    position: relative;

    overflow: hidden;
    background: #111111;
}

.pf-video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    background: #111111;
}


/* ------------------------------------------------------------
   PLAY BUTTON
------------------------------------------------------------ */

.pf-video-play {
    position: absolute;
    z-index: 6;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    display: flex;
    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.20);

    color: #ffffff;

    cursor: pointer;

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        opacity 0.35s ease;
}

.pf-video-play>span {
    margin-left: 4px;

    font-size: 13px;
}

.pf-video-play:hover {
    transform: translate(-50%, -50%) scale(1.08);

    background: rgba(0, 0, 0, 0.45);
}

.pf-video-play.is-playing {
    opacity: 0;
    pointer-events: none;
}

.pf-video-play--large {
    width: 84px;
    height: 84px;
}

.pf-video-play--small {
    width: 54px;
    height: 54px;
}

.pf-video-play--small>span {
    font-size: 10px;
}


/* ============================================================
   04 / 05 CEREMONY + CELEBRATION
============================================================ */

.pf-story {
    padding: 170px 0;

    background: #ffffff;
}

.pf-story--celebration {
    background: #f7f5f1;
}


/* ------------------------------------------------------------
   HEADING
------------------------------------------------------------ */

.pf-story__heading {
    margin-bottom: 80px;
}

.pf-story__heading--right {
    max-width: 700px;

    margin-left: auto;

    text-align: right;
}

.pf-story__number {
    display: block;

    margin-bottom: 25px;

    font-family: "Times New Roman", serif;
    font-size: 12px;
    letter-spacing: 0.15em;

    color: #999999;
}


/* ------------------------------------------------------------
   COMPARE GRID
------------------------------------------------------------ */

.pf-story__compare {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 28px;
}


/* ------------------------------------------------------------
   CARD
------------------------------------------------------------ */

.pf-compare-card {
    min-width: 0;
}

.pf-compare-card__media {
    position: relative;

    overflow: hidden;
    background: #111111;
}

.pf-compare-card__media img,
.pf-compare-card__media video {
    width: 100%;

    aspect-ratio: 3 / 2;

    object-fit: cover;

    transition:
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.pf-compare-card:hover .pf-compare-card__media img {
    transform: scale(1.025);
}


/* ------------------------------------------------------------
   CARD CONTENT
------------------------------------------------------------ */

.pf-compare-card__content {
    padding: 40px 5px 0;
}

.pf-compare-card__content h3 {
    margin: 0 0 25px;

    font-size: clamp(26px, 2.2vw, 36px);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.06em;
}

.pf-compare-card__content>p:last-child {
    margin: 0;

    max-width: 460px;

    font-size: 14px;
    line-height: 2.15;
    letter-spacing: 0.05em;
}


/* ============================================================
   06 SUNSET
============================================================ */

.pf-sunset {
    padding: 170px 0 0;

    background: #ffffff;
}

.pf-sunset .pf-story__heading {
    margin-bottom: 80px;
}


/* ------------------------------------------------------------
   PHOTO / FILM
------------------------------------------------------------ */

.pf-sunset__photo,
.pf-sunset__film {
    position: relative;

    width: 100%;
    height: 760px;

    overflow: hidden;
    background: #111111;
}

.pf-sunset__photo img,
.pf-sunset__film video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* ------------------------------------------------------------
   OVERLAY
------------------------------------------------------------ */

.pf-sunset__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(0deg,
            rgba(0, 0, 0, 0.48) 0%,
            rgba(0, 0, 0, 0.08) 45%,
            rgba(0, 0, 0, 0) 72%);
}


/* ------------------------------------------------------------
   CAPTION
------------------------------------------------------------ */

.pf-sunset__caption {
    position: absolute;
    z-index: 4;

    left: 8%;
    bottom: 9%;

    color: #ffffff;
}

.pf-sunset__caption p {
    margin: 0 0 18px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 0.28em;
}

.pf-sunset__caption h3 {
    margin: 0;

    font-size: clamp(30px, 3vw, 48px);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.06em;
}


/* ------------------------------------------------------------
   PLUS
------------------------------------------------------------ */

.pf-sunset__plus {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 120px;

    background: #ffffff;

    font-family: "Times New Roman", serif;
    font-size: 32px;
    font-weight: 300;

    color: #999999;
}


/* ============================================================
   07 MEMORY
============================================================ */

.pf-memory {
    padding: 170px 0 180px;

    background: #171717;
    color: #ffffff;
}

.pf-memory .pf-section-label {
    color: rgba(255, 255, 255, 0.5);
}

.pf-memory__sub {
    margin: 40px 0 0;

    font-size: 18px;
    line-height: 2;
    letter-spacing: 0.08em;

    color: rgba(255, 255, 255, 0.75);
}


/* ------------------------------------------------------------
   MEMORY GRID
------------------------------------------------------------ */

.pf-memory__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 12px;
}

.pf-memory__item {
    position: relative;

    aspect-ratio: 1 / 1;

    overflow: hidden;
    background: #080808;
}

.pf-memory__item>img,
.pf-memory__item>video {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.pf-memory__item:hover>img {
    transform: scale(1.035);
}


/* PHOTO / FILM LABEL */

.pf-memory__item>span {
    position: absolute;
    z-index: 4;

    left: 18px;
    bottom: 18px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    letter-spacing: 0.25em;

    color: #ffffff;

    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}


/* ------------------------------------------------------------
   MEMORY MESSAGE
------------------------------------------------------------ */

.pf-memory__message {
    max-width: 720px;

    margin: 120px auto 0;

    text-align: center;
}

.pf-memory__message p {
    margin: 0 0 22px;

    font-family: "Times New Roman", serif;
    font-size: 15px;
    letter-spacing: 0.1em;

    color: rgba(255, 255, 255, 0.55);
}

.pf-memory__message h3 {
    margin: 0;

    font-size: clamp(30px, 3vw, 46px);
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.07em;
}


/* ============================================================
   08 PHOTO & FILM PLAN
============================================================ */

.pf-plan {
    padding: 170px 0 180px;

    background: #ffffff;
}


/* ------------------------------------------------------------
   HEADING
------------------------------------------------------------ */

.pf-plan__heading {
    display: grid;
    grid-template-columns: 1fr 1fr;

    column-gap: 80px;
    align-items: end;

    margin-bottom: 90px;
}

.pf-plan__lead {
    margin: 0;

    max-width: 480px;

    font-size: 15px;
    line-height: 2.2;
    letter-spacing: 0.05em;
}


/* ------------------------------------------------------------
   PLAN CARD
------------------------------------------------------------ */

.pf-plan__card {
    padding: 80px 8%;

    border: 1px solid #d9d5ce;
}

.pf-plan__card-heading {
    padding-bottom: 50px;

    border-bottom: 1px solid #d9d5ce;
}

.pf-plan__card-heading p {
    margin: 0 0 15px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.28em;

    color: #777777;
}

.pf-plan__card-heading h3 {
    margin: 0;

    font-family: "Times New Roman", serif;
    font-size: clamp(32px, 3vw, 46px);
    font-weight: 400;
    letter-spacing: 0.04em;
}


/* ------------------------------------------------------------
   PLAN DETAILS
------------------------------------------------------------ */

.pf-plan__details {
    padding: 50px 0;
}

.pf-plan__details dl {
    margin: 0;
}

.pf-plan__details dl>div {
    display: grid;
    grid-template-columns: 34% 66%;

    padding: 20px 0;

    border-bottom: 1px solid #e7e4df;
}

.pf-plan__details dt {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.2em;

    color: #777777;
}

.pf-plan__details dd {
    margin: 0;

    font-family: "Times New Roman", serif;
    font-size: 16px;
    letter-spacing: 0.05em;
}

.pf-plan__note {
    margin: 0;

    font-size: 12px;
    line-height: 1.9;
    letter-spacing: 0.04em;

    color: #777777;
}


/* ============================================================
   09 CHOOSE YOUR STORY
============================================================ */

.pf-choose {
    padding: 170px 0 180px;

    background: #f7f5f1;
}

.pf-choose__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 24px;
}


/* ------------------------------------------------------------
   CARD
------------------------------------------------------------ */

.pf-choose-card {
    position: relative;

    display: block;

    height: 620px;

    overflow: hidden;

    background: #111111;
    color: #ffffff !important;
}

.pf-choose-card img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.pf-choose-card:hover img {
    transform: scale(1.035);
}


/* ------------------------------------------------------------
   OVERLAY
------------------------------------------------------------ */

.pf-choose-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(0deg,
            rgba(0, 0, 0, 0.58) 0%,
            rgba(0, 0, 0, 0.08) 60%,
            rgba(0, 0, 0, 0.02) 100%);
}


/* ------------------------------------------------------------
   CONTENT
------------------------------------------------------------ */

.pf-choose-card__content {
    position: absolute;
    z-index: 2;

    left: 50px;
    right: 50px;
    bottom: 50px;
}

.pf-choose-card__content p {
    margin: 0 0 18px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 0.28em;
}

.pf-choose-card__content h3 {
    margin: 0 0 35px;

    font-size: clamp(28px, 2.5vw, 40px);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.06em;
}

.pf-choose-card__content span {
    display: inline-block;

    padding-bottom: 7px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.8);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    letter-spacing: 0.2em;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.pf-choose-card:hover .pf-choose-card__content span {
    opacity: 0.65;

    transform: translateX(5px);
}


/* ============================================================
   10 FLOW
============================================================ */

.pf-flow {
    padding: 170px 0;

    background: #ffffff;
}


/* ------------------------------------------------------------
   FLOW LIST
------------------------------------------------------------ */

.pf-flow__list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);

    border-top: 1px solid #d9d5ce;
    border-bottom: 1px solid #d9d5ce;
}

.pf-flow__item {
    position: relative;

    min-height: 210px;

    padding: 35px 25px;

    border-right: 1px solid #d9d5ce;
}

.pf-flow__item:last-child {
    border-right: 0;
}

.pf-flow__item:not(:last-child)::after {
    content: "→";

    position: absolute;
    z-index: 2;

    top: 50%;
    right: -8px;

    transform: translateY(-50%);

    width: 16px;

    background: #ffffff;

    text-align: center;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;

    color: #999999;
}

.pf-flow__item>span {
    display: block;

    margin-bottom: 55px;

    font-family: "Times New Roman", serif;
    font-size: 11px;

    color: #999999;
}

.pf-flow__item h3 {
    margin: 0 0 12px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
}

.pf-flow__item p {
    margin: 0;

    font-size: 13px;
    letter-spacing: 0.05em;
}


/* ------------------------------------------------------------
   FLOW LINK
------------------------------------------------------------ */

.pf-flow__link {
    display: flex;
    justify-content: flex-end;
}


/* ============================================================
   COMMON TEXT LINK
============================================================ */

.pf-text-link {
    display: inline-flex;
    align-items: center;

    gap: 25px;

    width: fit-content;

    margin-top: 40px;
    padding-bottom: 8px;

    border-bottom: 1px solid #171717;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.2em;

    transition:
        opacity 0.3s ease,
        gap 0.3s ease;
}

.pf-text-link span {
    transition: transform 0.3s ease;
}

.pf-text-link:hover {
    opacity: 0.6;

    gap: 32px;
}

.pf-text-link:hover span {
    transform: translateX(3px);
}


/* ============================================================
   11 FINAL CTA
============================================================ */

.pf-cta {
    position: relative;

    width: 100%;
    height: 700px;

    overflow: hidden;

    background: #111111;
}

.pf-cta__image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* ------------------------------------------------------------
   CTA OVERLAY
------------------------------------------------------------ */

.pf-cta__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.50) 0%,
            rgba(0, 0, 0, 0.16) 48%,
            rgba(0, 0, 0, 0.02) 100%);
}


/* ------------------------------------------------------------
   CTA CONTENT
------------------------------------------------------------ */

.pf-cta__content {
    position: absolute;
    z-index: 2;

    left: 8%;
    top: 50%;

    transform: translateY(-50%);

    color: #ffffff;
}

.pf-cta__label {
    margin: 0 0 25px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.3em;
}

.pf-cta__content h2 {
    margin: 0 0 50px;

    font-size: clamp(36px, 3.6vw, 58px);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.07em;
}


/* ------------------------------------------------------------
   CTA BUTTON
------------------------------------------------------------ */

.pf-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 28px;

    min-width: 210px;
    min-height: 58px;

    padding: 17px 30px;

    border: 1px solid rgba(255, 255, 255, 0.8);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    letter-spacing: 0.2em;

    color: #ffffff !important;

    transition:
        background 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease;
}

.pf-cta__button:hover {
    background: #ffffff;
    color: #171717 !important;

    border-color: #ffffff;
}


/* ============================================================
   TABLET
   max-width: 1100px
============================================================ */

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

    .pf-container {
        width: calc(100% - 80px);
    }


    /* ----------------------------------------------------------
     HERO
  ---------------------------------------------------------- */

    .pf-hero {
        min-height: 650px;
    }

    .pf-hero__content {
        left: 7%;
    }


    /* ----------------------------------------------------------
     INTRO
  ---------------------------------------------------------- */

    .pf-intro {
        padding: 130px 0 140px;
    }


    /* ----------------------------------------------------------
     TWO WAYS
  ---------------------------------------------------------- */

    .pf-two-ways {
        padding: 120px 0 140px;
    }

    .pf-two-ways__grid {
        gap: 60px;
    }

    .pf-two-ways__cross {
        width: 50px;
        height: 50px;

        font-size: 22px;
    }


    /* ----------------------------------------------------------
     STORY
  ---------------------------------------------------------- */

    .pf-story {
        padding: 130px 0;
    }


    /* ----------------------------------------------------------
     SUNSET
  ---------------------------------------------------------- */

    .pf-sunset {
        padding-top: 130px;
    }

    .pf-sunset__photo,
    .pf-sunset__film {
        height: 620px;
    }


    /* ----------------------------------------------------------
     MEMORY
  ---------------------------------------------------------- */

    .pf-memory {
        padding: 130px 0 140px;
    }

    .pf-memory__message {
        margin-top: 90px;
    }


    /* ----------------------------------------------------------
     PLAN
  ---------------------------------------------------------- */

    .pf-plan {
        padding: 130px 0 140px;
    }

    .pf-plan__heading {
        column-gap: 50px;
    }


    /* ----------------------------------------------------------
     CHOOSE
  ---------------------------------------------------------- */

    .pf-choose {
        padding: 130px 0 140px;
    }

    .pf-choose-card {
        height: 540px;
    }

    .pf-choose-card__content {
        left: 35px;
        right: 35px;
        bottom: 40px;
    }


    /* ----------------------------------------------------------
     FLOW
  ---------------------------------------------------------- */

    .pf-flow {
        padding: 130px 0;
    }

    .pf-flow__list {
        grid-template-columns: repeat(3, 1fr);
    }

    .pf-flow__item {
        border-bottom: 1px solid #d9d5ce;
    }

    .pf-flow__item:nth-child(3) {
        border-right: 0;
    }

    .pf-flow__item:nth-child(4),
    .pf-flow__item:nth-child(5),
    .pf-flow__item:nth-child(6) {
        border-bottom: 0;
    }

    .pf-flow__item:nth-child(3)::after {
        display: none;
    }


    /* ----------------------------------------------------------
     CTA
  ---------------------------------------------------------- */

    .pf-cta {
        height: 600px;
    }

}


/* ============================================================
   SMARTPHONE
   max-width: 767px
============================================================ */

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

    .pf-container {
        width: calc(100% - 40px);
    }

    .pf-section-label {
        margin-bottom: 16px;

        font-size: 10px;
    }

    .pf-section-title {
        font-size: 30px;
        line-height: 1.7;
    }

    .pf-section-heading {
        margin-bottom: 50px;
    }


    /* ==========================================================
     HERO
  ========================================================== */

    .pf-hero {
        height: 100svh;
        min-height: 620px;
    }

    .pf-hero__image {
        object-position: 58% center;
    }

    .pf-hero__overlay {
        background:
            linear-gradient(0deg,
                rgba(0, 0, 0, 0.58) 0%,
                rgba(0, 0, 0, 0.10) 70%);
    }

    .pf-hero__content {
        left: 25px;
        right: 25px;
        top: auto;
        bottom: 14%;

        transform: none;
    }

    .pf-hero__label {
        margin-bottom: 20px;

        font-size: 10px;
    }

    .pf-hero__title {
        font-size: clamp(32px, 9vw, 42px);
        line-height: 1.55;
    }

    .pf-hero__title span {
        margin-top: 12px;

        font-size: 0.62em;
    }

    .pf-hero__en {
        margin-top: 22px;

        font-size: 13px;
    }

    .pf-hero__scroll {
        display: none;
    }


    /* ==========================================================
     INTRO
  ========================================================== */

    .pf-intro {
        padding: 100px 0;
    }

    .pf-intro__title {
        font-size: 30px;
        line-height: 1.75;
    }

    .pf-intro__text {
        margin-top: 45px;

        font-size: 14px;
        line-height: 2.2;
    }


    /* ==========================================================
     TWO WAYS
  ========================================================== */

    .pf-two-ways {
        padding: 90px 0 100px;
    }

    .pf-two-ways__grid {
        display: block;
    }

    .pf-two-ways__item {
        width: 100%;
    }

    .pf-two-ways__item+.pf-two-ways__item {
        margin-top: 0;
    }

    .pf-two-ways__content {
        padding-top: 32px;
    }

    .pf-two-ways__content h3 {
        margin-bottom: 22px;

        font-size: 27px;
    }

    .pf-two-ways__content>p:last-child {
        font-size: 14px;
        line-height: 2.1;
    }

    .pf-two-ways__cross {
        position: static;

        width: auto;
        height: auto;

        margin: 55px 0;

        transform: none;

        background: transparent;

        font-size: 27px;

        text-align: center;
    }


    /* ==========================================================
     VIDEO
  ========================================================== */

    .pf-video-play {
        width: 58px;
        height: 58px;
    }

    .pf-video-play--large {
        width: 66px;
        height: 66px;
    }

    .pf-video-play--small {
        width: 46px;
        height: 46px;
    }


    /* ==========================================================
     CEREMONY / CELEBRATION
  ========================================================== */

    .pf-story {
        padding: 100px 0;
    }

    .pf-story__heading,
    .pf-story__heading--right {
        max-width: none;

        margin: 0 0 55px;

        text-align: left;
    }

    .pf-story__compare {
        grid-template-columns: 1fr;

        gap: 75px;
    }

    .pf-compare-card__content {
        padding-top: 30px;
    }

    .pf-compare-card__content h3 {
        margin-bottom: 22px;

        font-size: 27px;
    }

    .pf-compare-card__content>p:last-child {
        font-size: 14px;
        line-height: 2.1;
    }


    /* ==========================================================
     SUNSET
  ========================================================== */

    .pf-sunset {
        padding-top: 100px;
    }

    .pf-sunset .pf-story__heading {
        margin-bottom: 55px;
    }

    .pf-sunset__photo,
    .pf-sunset__film {
        height: 520px;
    }

    .pf-sunset__photo img,
    .pf-sunset__film video {
        object-position: center;
    }

    .pf-sunset__caption {
        left: 25px;
        right: 25px;
        bottom: 40px;
    }

    .pf-sunset__caption h3 {
        font-size: 28px;
    }

    .pf-sunset__plus {
        height: 90px;

        font-size: 27px;
    }


    /* ==========================================================
     MEMORY
  ========================================================== */

    .pf-memory {
        padding: 100px 0 110px;
    }

    .pf-memory__sub {
        margin-top: 30px;

        font-size: 15px;
    }

    .pf-memory__grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 6px;
    }

    .pf-memory__item>span {
        left: 12px;
        bottom: 12px;

        font-size: 8px;
    }

    .pf-memory__message {
        margin-top: 75px;
    }

    .pf-memory__message h3 {
        font-size: 28px;
        line-height: 1.8;
    }


    /* ==========================================================
     PLAN
  ========================================================== */

    .pf-plan {
        padding: 100px 0;
    }

    .pf-plan__heading {
        display: block;

        margin-bottom: 55px;
    }

    .pf-plan__lead {
        margin-top: 35px;

        font-size: 14px;
        line-height: 2.1;
    }

    .pf-plan__card {
        padding: 50px 25px;
    }

    .pf-plan__card-heading {
        padding-bottom: 35px;
    }

    .pf-plan__card-heading h3 {
        font-size: 29px;
    }

    .pf-plan__details {
        padding: 35px 0;
    }

    .pf-plan__details dl>div {
        grid-template-columns: 1fr;

        row-gap: 10px;

        padding: 18px 0;
    }

    .pf-plan__details dd {
        font-size: 15px;
    }


    /* ==========================================================
     CHOOSE YOUR STORY
  ========================================================== */

    .pf-choose {
        padding: 100px 0;
    }

    .pf-choose__grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .pf-choose-card {
        height: 500px;
    }

    .pf-choose-card__content {
        left: 25px;
        right: 25px;
        bottom: 35px;
    }

    .pf-choose-card__content h3 {
        margin-bottom: 28px;

        font-size: 28px;
    }


    /* ==========================================================
     FLOW
  ========================================================== */

    .pf-flow {
        padding: 100px 0;
    }

    .pf-flow__list {
        display: block;

        border-bottom: 0;
    }

    .pf-flow__item {
        min-height: 0;

        padding: 28px 10px;

        display: grid;
        grid-template-columns: 45px 1fr;
        grid-template-rows: auto auto;
        align-items: center;

        border-right: 0;
        border-bottom: 1px solid #d9d5ce !important;
    }

    .pf-flow__item>span {
        grid-row: 1 / 3;

        margin: 0;

        font-size: 11px;
    }

    .pf-flow__item h3 {
        margin: 0 0 6px;
    }

    .pf-flow__item p {
        margin: 0;
    }

    .pf-flow__item::after {
        display: none !important;
    }

    .pf-flow__link {
        justify-content: flex-start;
    }


    /* ==========================================================
     FINAL CTA
  ========================================================== */

    .pf-cta {
        height: 580px;
    }

    .pf-cta__image {
        object-position: 40% center;
    }

    .pf-cta__overlay {
        background:
            linear-gradient(0deg,
                rgba(0, 0, 0, 0.58) 0%,
                rgba(0, 0, 0, 0.07) 72%);
    }

    .pf-cta__content {
        left: 25px;
        right: 25px;
        top: auto;
        bottom: 55px;

        transform: none;
    }

    .pf-cta__content h2 {
        margin-bottom: 35px;

        font-size: 31px;
        line-height: 1.65;
    }

    .pf-cta__button {
        min-width: 190px;
        min-height: 54px;
    }

}


/* ============================================================
   SMALL SMARTPHONE
   max-width: 420px
============================================================ */

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

    .pf-container {
        width: calc(100% - 32px);
    }


    /* ----------------------------------------------------------
     HERO
  ---------------------------------------------------------- */

    .pf-hero__content {
        left: 20px;
        right: 20px;
    }

    .pf-hero__title {
        font-size: 32px;
    }


    /* ----------------------------------------------------------
     TYPOGRAPHY
  ---------------------------------------------------------- */

    .pf-section-title {
        font-size: 27px;
    }

    .pf-intro__title {
        font-size: 27px;
    }


    /* ----------------------------------------------------------
     STORY
  ---------------------------------------------------------- */

    .pf-compare-card__content h3,
    .pf-two-ways__content h3 {
        font-size: 25px;
    }


    /* ----------------------------------------------------------
     SUNSET
  ---------------------------------------------------------- */

    .pf-sunset__photo,
    .pf-sunset__film {
        height: 480px;
    }

    .pf-sunset__caption {
        left: 20px;
        right: 20px;
    }

    .pf-sunset__caption h3 {
        font-size: 25px;
    }


    /* ----------------------------------------------------------
     MEMORY
  ---------------------------------------------------------- */

    .pf-memory__message h3 {
        font-size: 25px;
    }


    /* ----------------------------------------------------------
     CHOOSE
  ---------------------------------------------------------- */

    .pf-choose-card {
        height: 450px;
    }

    .pf-choose-card__content {
        left: 20px;
        right: 20px;
    }

    .pf-choose-card__content h3 {
        font-size: 26px;
    }


    /* ----------------------------------------------------------
     FINAL CTA
  ---------------------------------------------------------- */

    .pf-cta__content {
        left: 20px;
        right: 20px;
    }

    .pf-cta__content h2 {
        font-size: 28px;
    }

}