@charset "UTF-8";


/* ==================================================
   RESET / BASE
================================================== */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    color: #17232b;

    background: #f8f7f3;

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

    line-height: 1.9;

    -webkit-font-smoothing: antialiased;
}


body,
html {
    width: 100%;
}


img {
    display: block;
    width: 100%;
}


a {
    color: inherit;
    text-decoration: none;
}


button {
    font: inherit;
}


.content-width {

    width: min(1180px, calc(100% - 80px));

    margin: 0 auto;
}


.section-label {

    margin: 0 0 25px;

    color: #a1845e;

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

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .32em;
}


.section-label.light {
    color: #e1c9a6;
}



/* ==================================================
   HEADER
================================================== */

.site-header {

    position: fixed;

    z-index: 1000;

    top: 0;
    left: 0;

    width: 100%;
    height: 92px;

    padding: 0 55px;

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

    color: #fff;

    transition:
        height .4s ease,
        background .4s ease,
        color .4s ease,
        box-shadow .4s ease;
}


.site-header.scrolled {

    height: 72px;

    color: #17232b;

    background:
        rgba(255,255,255,.96);

    box-shadow:
        0 3px 30px
        rgba(0,0,0,.07);

    backdrop-filter:
        blur(12px);
}


.brand {

    display: flex;

    flex-direction: column;

    line-height: 1.2;
}


.brand-en {

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

    font-size: 9px;

    letter-spacing: .27em;

    opacity: .8;
}


.brand-jp {

    margin-top: 7px;

    font-size: 21px;

    letter-spacing: .18em;
}


.global-nav {

    display: flex;

    align-items: center;

    gap: 28px;

    font-family:
        Arial,
        "Yu Gothic",
        sans-serif;

    font-size: 10px;

    letter-spacing: .16em;
}


.global-nav a {

    position: relative;

    transition:
        opacity .3s ease;
}


.global-nav a:not(.nav-contact)::after {

    position: absolute;

    content: "";

    left: 0;
    bottom: -7px;

    width: 0;
    height: 1px;

    background: currentColor;

    transition:
        width .3s ease;
}


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


.nav-contact {

    margin-left: 10px;

    padding: 13px 22px;

    border:
        1px solid rgba(255,255,255,.7);
}


.scrolled .nav-contact {

    border-color:
        rgba(23,35,43,.45);
}


.menu-button {
    display: none;
}



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

.hero {

    position: relative;

    width: 100%;
    height: 100vh;

    min-height: 720px;

    overflow: hidden;

    background: #15242b;
}


.hero-image {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center center;

    animation:
        heroOpening 14s
        cubic-bezier(.2,.7,.2,1)
        forwards;
}


@keyframes heroOpening {

    0% {
        transform: scale(1.07);
    }

    100% {
        transform: scale(1);
    }

}


.hero-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(7,18,25,.68) 0%,
            rgba(7,18,25,.40) 37%,
            rgba(7,18,25,.08) 70%,
            rgba(7,18,25,.08) 100%
        ),

        linear-gradient(
            0deg,
            rgba(5,14,20,.30) 0%,
            transparent 40%
        );
}


.hero-content {

    position: relative;

    z-index: 3;

    width: min(1180px, calc(100% - 140px));

    height: 100%;

    margin: 0 auto;

    padding-top: 65px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    color: #fff;
}


.hero-kicker {

    margin: 0 0 25px;

    color: #e2c9a5;

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

    font-size: 10px;

    letter-spacing: .38em;
}


.hero h1 {

    margin: 0;

    font-size:
        clamp(45px, 5vw, 76px);

    font-weight: 400;

    line-height: 1.4;

    letter-spacing: .09em;

    text-shadow:
        0 3px 20px
        rgba(0,0,0,.15);
}


.hero-text {

    margin: 30px 0 38px;

    font-size: 15px;

    line-height: 2.1;

    letter-spacing: .14em;
}


.hero-button {

    width: 245px;

    min-height: 62px;

    padding: 0 25px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: #17232b;

    background: rgba(255,255,255,.96);

    font-family:
        "Yu Gothic",
        sans-serif;

    font-size: 12px;

    letter-spacing: .12em;

    transition:
        background .3s ease,
        color .3s ease;
}


.hero-button:hover {

    color: #fff;

    background: #9c7a50;
}


.arrow {
    font-size: 18px;
}


.hero-location {

    position: absolute;

    z-index: 3;

    right: 55px;
    bottom: 55px;

    display: flex;

    align-items: center;

    gap: 15px;

    color: rgba(255,255,255,.8);

    font-family: Arial,sans-serif;

    font-size: 9px;

    letter-spacing: .25em;
}


.hero-location-line {

    width: 40px;
    height: 1px;

    background:
        rgba(255,255,255,.55);
}


.scroll {

    position: absolute;

    z-index: 3;

    left: 28px;
    bottom: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    color: rgba(255,255,255,.75);
}


.scroll span {

    margin-bottom: 15px;

    font-family: Arial,sans-serif;

    font-size: 8px;

    letter-spacing: .3em;

    writing-mode: vertical-rl;
}


.scroll-line {

    width: 1px;
    height: 65px;

    background:
        rgba(255,255,255,.6);
}



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

.intro {

    padding:
        145px 0 155px;

    background: #f8f7f3;
}


.intro-grid {

    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 140px;
}


.intro-title h2 {

    margin: 0;

    font-size:
        clamp(32px,3.3vw,49px);

    font-weight: 400;

    line-height: 1.65;

    letter-spacing: .08em;
}


.intro-copy {

    padding-top: 40px;

    color: #59646a;

    font-family:
        "Yu Gothic",
        sans-serif;

    font-size: 14px;

    line-height: 2.2;

    letter-spacing: .06em;
}


.intro-copy p {

    margin:
        0 0 25px;
}


.intro-lead {

    color: #25343c;

    font-family:
        "Yu Mincho",
        serif;

    font-size: 20px;

    line-height: 1.9;
}



/* ==================================================
   PROPERTY HEADING
================================================== */

.property-heading {

    padding:
        110px 0 70px;

    background: #fff;
}


.property-heading h2 {

    margin:
        0 0 10px;

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

    font-weight: 400;

    letter-spacing: .08em;
}


.property-heading
.content-width > p:last-child {

    margin: 0;

    color: #9b9b95;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: .28em;
}



/* ==================================================
   ATAMI PROPERTY
================================================== */

.atami-property {

    padding:
        30px 0 150px;

    background: #fff;
}


.property-layout {

    display: grid;

    grid-template-columns:
        1.25fr .75fr;

    gap: 80px;

    align-items: center;
}


.property-photo {

    position: relative;

    overflow: hidden;
}


.property-photo img {

    min-height: 520px;

    object-fit: cover;

    transition:
        transform 1.2s
        cubic-bezier(.2,.7,.2,1);
}


.property-photo:hover img {

    transform:
        scale(1.035);
}


.photo-tag {

    position: absolute;

    right: 0;
    bottom: 0;

    padding:
        12px 22px;

    color: #fff;

    background:
        rgba(17,40,53,.9);

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: .22em;
}


.property-number {

    margin:
        0 0 15px;

    color: #a1845e;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: .25em;
}


.property-place {

    margin:
        0 0 13px;

    color: #7d8588;

    font-family:
        Arial,
        sans-serif;

    font-size: 11px;

    letter-spacing: .35em;
}


.property-description h2,
.hiyoshi-description h2 {

    margin: 0;

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

    font-weight: 400;

    line-height: 1.6;

    letter-spacing: .06em;
}


.gold-line {

    width: 42px;
    height: 1px;

    margin:
        30px 0;

    background: #ad8d62;
}


.property-description > p:not(.property-number):not(.property-place) {

    margin:
        0 0 20px;

    color: #5f696d;

    font-family:
        "Yu Gothic",
        sans-serif;

    font-size: 13px;

    line-height: 2.05;
}


.detail-link {

    margin-top: 35px;

    padding:
        0 0 10px;

    display: flex;

    justify-content: space-between;

    border-bottom:
        1px solid #9f9d97;

    font-family:
        "Yu Gothic",
        sans-serif;

    font-size: 11px;

    letter-spacing: .12em;

    transition:
        color .3s ease;
}


.detail-link:hover {
    color: #9c7a50;
}




/* ==================================================
   ATAMI PRICE / PROPERTY DETAILS
================================================== */

.atami-details {

    margin-top: 38px;

    font-family:
        "Yu Gothic",
        sans-serif;
}


.atami-detail-heading {

    margin:
        0 0 16px !important;

    color: #a1845e !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 9px !important;

    font-weight: 600;

    line-height: 1.5 !important;

    letter-spacing: .24em;
}


/* PRICE */

.atami-price-box {

    padding:
        22px 24px 10px;

    background: #f4f2ed;

    border-top:
        1px solid rgba(161,132,94,.45);
}


.atami-price-row {

    padding:
        14px 0;

    display: grid;

    grid-template-columns:
        1fr auto;

    gap: 20px;

    align-items: end;

    border-bottom:
        1px solid rgba(23,35,43,.10);
}


.atami-price-row:last-child {
    border-bottom: none;
}


.atami-detail-label {

    display: block;

    margin-bottom: 3px;

    color: #a1845e;

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: .18em;
}


.property-description .atami-detail-name {

    margin: 0 !important;

    color: #6c7477 !important;

    font-size: 11px !important;

    line-height: 1.7 !important;
}


.property-description .atami-price-value {

    margin: 0 !important;

    color: #25343c !important;

    font-family:
        "Yu Mincho",
        serif !important;

    font-size: 16px !important;

    line-height: 1.5 !important;

    white-space: nowrap;
}


.atami-price-value strong {

    margin-right: 2px;

    color: #17232b;

    font-size: 27px;

    font-weight: 400;
}


.atami-price-value span {

    display: block;

    margin-top: 2px;

    color: #777f82;

    font-family:
        "Yu Gothic",
        sans-serif;

    font-size: 9px;

    text-align: right;
}


/* PROPERTY DETAILS */

.atami-spec {

    margin-top: 28px;

    border-top:
        1px solid rgba(161,132,94,.40);
}


.atami-spec .atami-detail-heading {

    padding-top: 20px;
}


.atami-spec-row {

    padding:
        14px 0;

    display: grid;

    grid-template-columns:
        110px 1fr;

    gap: 18px;

    border-bottom:
        1px solid rgba(23,35,43,.11);
}


.atami-spec-title {

    padding-top: 3px;

    color: #a1845e;

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: .16em;
}


.property-description .atami-spec-name {

    margin:
        0 0 2px !important;

    color: #8a8f91 !important;

    font-size: 10px !important;

    line-height: 1.6 !important;
}


.property-description .atami-spec-value {

    margin: 0 !important;

    color: #25343c !important;

    font-family:
        "Yu Mincho",
        serif !important;

    font-size: 13px !important;

    line-height: 1.8 !important;
}


/* COMMON FACILITIES */

.atami-facilities {

    margin-top: 28px;

    padding-top: 20px;

    border-top:
        1px solid rgba(161,132,94,.40);
}


.property-description .atami-facilities-title {

    margin:
        0 0 12px !important;

    color: #6c7477 !important;

    font-size: 11px !important;

    line-height: 1.7 !important;
}


.atami-facility-list {

    display: flex;

    flex-wrap: wrap;

    gap:
        7px 6px;
}


.atami-facility-list span {

    padding:
        6px 9px;

    color: #59646a;

    background: #f4f2ed;

    border:
        1px solid rgba(161,132,94,.16);

    font-size: 10px;

    line-height: 1.4;

    letter-spacing: .03em;
}


/* ==================================================
   ACTUAL VIEW
================================================== */

.actual-view {

    position: relative;

    height: 780px;

    overflow: hidden;

    background: #102631;
}


.view-image {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;
}


.view-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(5,19,28,.82) 0%,
            rgba(5,19,28,.55) 38%,
            rgba(5,19,28,.14) 72%,
            rgba(5,19,28,.08) 100%
        );
}


.view-content {

    position: relative;

    z-index: 2;

    width:
        min(1180px, calc(100% - 80px));

    height: 100%;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    color: #fff;
}


.view-content h2 {

    margin:
        0 0 30px;

    font-size:
        clamp(38px,4.2vw,58px);

    font-weight: 400;

    line-height: 1.55;

    letter-spacing: .08em;
}


.view-content > p:not(.section-label) {

    margin:
        0 0 12px;

    font-size: 14px;

    line-height: 2.1;

    letter-spacing: .08em;
}


.actual-photo-label {

    margin-top: 30px;

    padding:
        7px 13px;

    border:
        1px solid
        rgba(255,255,255,.45);

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: .22em;
}



/* ==================================================
   POINTS
================================================== */

.points-section {

    padding:
        130px 0 145px;

    background: #f3f0e9;
}


.points-title {

    margin-bottom: 70px;
}


.points-title h2 {

    margin: 0;

    font-size:
        clamp(32px,3.4vw,47px);

    font-weight: 400;

    line-height: 1.6;
}


.points-grid {

    display: grid;

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

    border-top:
        1px solid #cbc5b9;

    border-bottom:
        1px solid #cbc5b9;
}


.point {

    min-height: 270px;

    padding:
        35px 28px;

    border-right:
        1px solid #cbc5b9;
}


.point:last-child {
    border-right: none;
}


.point-number {

    color: #a1845e;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;
}


.point h3 {

    margin:
        58px 0 20px;

    font-family:
        Georgia,
        serif;

    font-size: 19px;

    font-weight: 400;

    letter-spacing: .14em;
}


.point p {

    margin: 0;

    color: #686e70;

    font-family:
        "Yu Gothic",
        sans-serif;

    font-size: 12px;

    line-height: 2;
}



/* ==================================================
   HIYOSHI
================================================== */

.hiyoshi-section {

    padding:
        155px 0;

    background: #fff;
}


.hiyoshi-grid {

    display: grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap: 100px;

    align-items: center;
}


.hiyoshi-description {

    padding-left: 30px;
}


.hiyoshi-description > p:not(.property-number):not(.property-place) {

    color: #5f696d;

    font-family:
        "Yu Gothic",
        sans-serif;

    font-size: 13px;

    line-height: 2.05;
}


.hiyoshi-lead {

    color: #25343c !important;

    font-family:
        "Yu Mincho",
        serif !important;

    font-size: 16px !important;
}


.hiyoshi-photo {

    position: relative;

    overflow: hidden;
}


.hiyoshi-photo img {

    width: 100%;

    min-height: 500px;

    object-fit: cover;

    transition:
        transform 1s ease;
}


.hiyoshi-photo:hover img {

    transform:
        scale(1.035);
}


.vertical-text {

    position: absolute;

    top: 25px;
    right: 20px;

    color: #fff;

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: .25em;

    writing-mode: vertical-rl;

    text-shadow:
        0 2px 7px
        rgba(0,0,0,.45);
}



/* ==================================================
   HIYOSHI PROPERTY SPEC
================================================== */

.hiyoshi-spec {

    display: grid;

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

    margin:
        38px 0 34px;

    border-top:
        1px solid rgba(161,132,94,.45);

    border-bottom:
        1px solid rgba(161,132,94,.45);
}


.hiyoshi-spec-item {

    padding:
        24px 24px 25px 0;
}


.hiyoshi-spec-item + .hiyoshi-spec-item {

    padding-left: 28px;

    border-left:
        1px solid rgba(161,132,94,.25);
}


.spec-label {

    display: block;

    margin-bottom: 9px;

    color: #a1845e;

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

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .22em;
}


.hiyoshi-description .spec-title {

    margin:
        0 0 7px;

    color: #8a8f91;

    font-family:
        "Yu Gothic",
        sans-serif;

    font-size: 11px;

    line-height: 1.7;

    letter-spacing: .1em;
}


.hiyoshi-description .spec-value {

    margin: 0;

    color: #25343c;

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

    font-size: 15px;

    line-height: 1.8;

    letter-spacing: .05em;
}


.hiyoshi-description .spec-sub {

    margin:
        3px 0 0;

    color: #6f777a;

    font-family:
        "Yu Gothic",
        sans-serif;

    font-size: 12px;

    line-height: 1.8;

    letter-spacing: .05em;
}



.property-status {

    margin-top: 30px;

    padding:
        22px 25px;

    background: #f4f2ed;
}


.property-status span {

    display: block;

    margin-bottom: 5px;

    color: #a1845e;

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: .22em;
}


.property-status strong {

    font-size: 15px;

    font-weight: 400;
}


.property-status p {

    margin:
        7px 0 0;

    font-size: 11px !important;
}



/* ==================================================
   INFORMATION
================================================== */

.information-section {

    padding:
        135px 0 145px;

    background: #f7f5f0;
}


.information-heading {

    margin-bottom: 70px;
}


.information-heading h2 {

    margin: 0;

    font-size:
        clamp(32px,3.4vw,47px);

    font-weight: 400;

    line-height: 1.6;
}


.information-grid {

    display: grid;

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


.info-card {

    position: relative;

    min-height: 350px;

    padding:
        38px 35px;

    border-top:
        1px solid #c7c1b5;

    border-right:
        1px solid #c7c1b5;

    border-bottom:
        1px solid #c7c1b5;

    transition:
        color .4s ease,
        background .4s ease;
}


.info-card:first-child {

    border-left:
        1px solid #c7c1b5;
}


.info-card:hover {

    color: #fff;

    background: #173443;
}


.info-number {

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    color: #a1845e;
}


.info-en {

    margin:
        70px 0 8px;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: .25em;
}


.info-card h3 {

    margin:
        0 0 20px;

    font-size: 24px;

    font-weight: 400;
}


.info-card > p:last-of-type {

    max-width: 240px;

    color: #73797a;

    font-family:
        "Yu Gothic",
        sans-serif;

    font-size: 12px;

    line-height: 2;
}


.info-card:hover
> p:last-of-type {

    color:
        rgba(255,255,255,.72);
}


.info-arrow {

    position: absolute;

    right: 30px;
    bottom: 25px;

    font-size: 20px;
}



/* ==================================================
   FACILITY
================================================== */

.facility-section {

    padding:
        130px 0;

    color: #fff;

    background: #173443;
}


.facility-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 120px;
}


.facility-grid h2 {

    margin: 0;

    font-size:
        clamp(32px,3.5vw,48px);

    font-weight: 400;

    line-height: 1.6;
}


.facility-list {

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


.facility-list > div {

    min-height: 70px;

    padding:
        0 5px;

    display: grid;

    grid-template-columns:
        60px 1fr;

    align-items: center;

    border-bottom:
        1px solid
        rgba(255,255,255,.25);
}


.facility-list span {

    color: #d9bc94;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;
}


.facility-list p {

    margin: 0;

    font-size: 14px;

    letter-spacing: .08em;
}



/* ==================================================
   ACCESS
================================================== */

.access-section {

    padding:
        145px 0;

    background: #fff;
}


.access-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 130px;
}


.access-grid h2 {

    margin: 0;

    font-size:
        clamp(32px,3.5vw,48px);

    font-weight: 400;

    line-height: 1.6;
}


.access-copy {

    padding-top: 40px;

    color: #626c70;

    font-family:
        "Yu Gothic",
        sans-serif;

    font-size: 13px;

    line-height: 2.15;
}


.access-copy p {

    margin:
        0 0 22px;
}


.simple-link {

    margin-top: 30px;

    padding:
        0 0 10px;

    display: flex;

    justify-content: space-between;

    color: #17232b;

    border-bottom:
        1px solid #969b9d;

    font-size: 11px;
}



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

.contact-section {

    position: relative;

    padding:
        140px 40px;

    overflow: hidden;

    color: #fff;

    background:
        #0e2734;
}


.contact-content {

    width:
        min(850px,100%);

    margin: 0 auto;

    text-align: center;
}


.contact-content h2 {

    margin:
        0 0 30px;

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

    font-weight: 400;

    line-height: 1.55;

    letter-spacing: .07em;
}


.contact-copy {

    margin:
        0 0 45px;

    color:
        rgba(255,255,255,.7);

    font-family:
        "Yu Gothic",
        sans-serif;

    font-size: 13px;

    line-height: 2;
}


.contact-button {

    width:
        min(520px,100%);

    min-height: 88px;

    margin: 0 auto;

    padding:
        0 32px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    text-align: left;

    color: #17232b;

    background: #fff;

    transition:
        background .3s ease,
        color .3s ease;
}


.contact-button:hover {

    color: #fff;

    background: #9b7b52;
}


.contact-small {

    display: block;

    margin-bottom: 3px;

    color: #a1845e;

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: .25em;
}


.contact-button:hover
.contact-small {

    color:
        rgba(255,255,255,.7);
}


.contact-button strong {

    font-size: 13px;

    font-weight: 400;

    letter-spacing: .1em;
}


.contact-arrow {
    font-size: 21px;
}



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

.site-footer {

    padding:
        80px 50px 28px;

    color: #adb7bb;

    background: #071a23;
}


.footer-inner {

    width:
        min(1180px,100%);

    margin: 0 auto;

    display: flex;

    justify-content: space-between;
}


.footer-en {

    margin: 0;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: .27em;
}


.footer-jp {

    margin:
        8px 0 25px;

    color: #fff;

    font-size: 22px;

    letter-spacing: .16em;
}


.footer-message {

    color: #74848b;

    font-size: 12px;

    line-height: 2;
}


.footer-navigation {

    display: grid;

    grid-template-columns:
        repeat(2,140px);

    gap:
        13px 35px;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: .18em;
}


.footer-navigation a {

    transition:
        color .3s ease;
}


.footer-navigation a:hover {
    color: #fff;
}


.footer-bottom {

    width:
        min(1180px,100%);

    margin:
        65px auto 0;

    padding-top: 25px;

    display: flex;

    justify-content: space-between;

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

    color: #596a72;

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: .18em;
}



/* ==================================================
   SCROLL ANIMATION
================================================== */

.reveal {

    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity .9s ease,
        transform .9s ease;
}


.reveal.show {

    opacity: 1;

    transform:
        translateY(0);
}



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

@media
(max-width: 1000px) {


    .site-header {

        padding:
            0 28px;
    }


    .global-nav {
        gap: 16px;
    }


    .content-width {

        width:
            calc(100% - 60px);
    }


    .property-layout {

        gap: 45px;
    }


    .hiyoshi-grid {

        gap: 55px;
    }


}



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

@media
(max-width: 768px) {


    .content-width {

        width:
            calc(100% - 44px);
    }



    /* HEADER */

    .site-header {

        height: 72px;

        padding:
            0 22px;
    }


    .site-header.scrolled {

        height: 66px;
    }


    .brand-en {

        font-size: 7px;
    }


    .brand-jp {

        font-size: 17px;
    }


    .menu-button {

        position: relative;

        z-index: 1200;

        display: block;

        width: 30px;
        height: 24px;

        padding: 0;

        color: inherit;

        border: 0;

        background: transparent;

        cursor: pointer;
    }


    .menu-button span {

        position: absolute;

        left: 0;

        width: 30px;
        height: 1px;

        background: currentColor;

        transition:
            transform .3s ease,
            opacity .3s ease,
            top .3s ease;
    }


    .menu-button span:nth-child(1) {
        top: 3px;
    }


    .menu-button span:nth-child(2) {
        top: 11px;
    }


    .menu-button span:nth-child(3) {
        top: 19px;
    }


    .menu-button.active {

        color: #fff;
    }


    .menu-button.active
    span:nth-child(1) {

        top: 11px;

        transform:
            rotate(45deg);
    }


    .menu-button.active
    span:nth-child(2) {

        opacity: 0;
    }


    .menu-button.active
    span:nth-child(3) {

        top: 11px;

        transform:
            rotate(-45deg);
    }


    .global-nav {

        position: fixed;

        z-index: 1100;

        top: 0;
        right: -100%;

        width: 85%;
        height: 100vh;

        padding:
            110px 40px 50px;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 27px;

        color: #fff;

        background: #102c3a;

        transition:
            right .4s
            cubic-bezier(.2,.7,.2,1);

        box-shadow:
            -20px 0 50px
            rgba(0,0,0,.15);
    }


    .global-nav.active {

        right: 0;
    }


    .nav-contact {

        width: 100%;

        margin:
            15px 0 0;

        text-align: center;

        border-color:
            rgba(255,255,255,.5) !important;
    }



    /* HERO */

    .hero {

        height: 92vh;

        min-height: 650px;
    }


    .hero-image {

        object-position:
            53% center;
    }


    .hero-content {

        width:
            calc(100% - 50px);

        padding-top: 45px;
    }


    .hero-kicker {

        margin-bottom: 18px;

        font-size: 8px;
    }


    .hero h1 {

        font-size:
            clamp(37px,11vw,48px);

        line-height: 1.48;
    }


    .hero-text {

        margin:
            22px 0 30px;

        font-size: 13px;
    }


    .hero-button {

        width: 220px;

        min-height: 56px;
    }


    .hero-location {

        right: 20px;
        bottom: 25px;

        font-size: 7px;
    }


    .scroll {

        display: none;
    }



    /* INTRO */

    .intro {

        padding:
            90px 0;
    }


    .intro-grid {

        grid-template-columns:
            1fr;

        gap: 35px;
    }


    .intro-copy {

        padding-top: 0;
    }



    /* PROPERTY */

    .property-heading {

        padding:
            85px 0 45px;
    }


    .atami-property {

        padding:
            10px 0 90px;
    }


    .property-layout {

        grid-template-columns:
            1fr;

        gap: 45px;
    }


    .property-photo img {

        min-height: 0;

        height: 360px;
    }




    /* ATAMI DETAILS */

    .atami-details {

        margin-top: 32px;
    }


    .atami-price-box {

        padding:
            20px 18px 8px;
    }


    .atami-price-row {

        grid-template-columns:
            1fr;

        gap: 7px;

        align-items: start;
    }


    .property-description .atami-price-value {

        white-space: normal;
    }


    .atami-price-value span {

        display: inline;

        margin-left: 5px;

        text-align: left;
    }


    .atami-spec-row {

        grid-template-columns:
            90px 1fr;

        gap: 12px;
    }


    .atami-facility-list span {

        font-size: 9px;
    }


    /* VIEW */

    .actual-view {

        height: 670px;
    }


    .view-content {

        width:
            calc(100% - 44px);
    }


    .view-content h2 {

        font-size: 38px;
    }



    /* POINTS */

    .points-section {

        padding:
            90px 0;
    }


    .points-title {

        margin-bottom: 45px;
    }


    .points-grid {

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


    .point {

        min-height: 230px;

        padding:
            28px 20px;

        border-bottom:
            1px solid #cbc5b9;
    }


    .point:nth-child(2) {

        border-right: none;
    }


    .point h3 {

        margin-top: 38px;

        font-size: 16px;
    }



    /* HIYOSHI */

    .hiyoshi-section {

        padding:
            90px 0;
    }


    .hiyoshi-grid {

        grid-template-columns:
            1fr;

        gap: 45px;
    }


    .hiyoshi-description {

        padding-left: 0;
    }


    .hiyoshi-photo {

        grid-row: 1;
    }


    .hiyoshi-photo img {

        min-height: 0;

        height: 370px;
    }




    /* HIYOSHI PROPERTY SPEC */

    .hiyoshi-spec {

        grid-template-columns:
            1fr;

        margin:
            30px 0;
    }


    .hiyoshi-spec-item {

        padding:
            20px 0;
    }


    .hiyoshi-spec-item + .hiyoshi-spec-item {

        padding-left: 0;

        border-left: none;

        border-top:
            1px solid rgba(161,132,94,.25);
    }


    /* INFORMATION */

    .information-section {

        padding:
            90px 0;
    }


    .information-heading {

        margin-bottom: 45px;
    }


    .information-grid {

        grid-template-columns:
            1fr;
    }


    .info-card {

        min-height: 270px;

        border-left:
            1px solid #c7c1b5;

        border-bottom: 0;
    }


    .info-card:last-child {

        border-bottom:
            1px solid #c7c1b5;
    }


    .info-en {

        margin-top: 45px;
    }



    /* FACILITY */

    .facility-section {

        padding:
            90px 0;
    }


    .facility-grid {

        grid-template-columns:
            1fr;

        gap: 50px;
    }



    /* ACCESS */

    .access-section {

        padding:
            90px 0;
    }


    .access-grid {

        grid-template-columns:
            1fr;

        gap: 30px;
    }


    .access-copy {

        padding-top: 0;
    }



    /* CONTACT */

    .contact-section {

        padding:
            95px 22px;
    }


    .contact-content h2 {

        font-size: 37px;
    }


    .contact-button {

        min-height: 78px;

        padding:
            0 22px;
    }



    /* FOOTER */

    .site-footer {

        padding:
            65px 25px 25px;
    }


    .footer-inner {

        flex-direction: column;

        gap: 50px;
    }


    .footer-navigation {

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


    .footer-bottom {

        margin-top: 50px;

        gap: 20px;

        flex-direction: column;
    }


}



/* ==================================================
   SMALL MOBILE
================================================== */

@media
(max-width: 480px) {


    .hero h1 {
        font-size: 35px;
    }


    .property-photo img {
        height: 290px;
    }


    .actual-view {
        height: 610px;
    }


    .view-content h2 {
        font-size: 32px;
    }


    .points-grid {
        grid-template-columns: 1fr;
    }


    .point {

        border-right: none;
    }


    .hiyoshi-photo img {
        height: 300px;
    }


    .contact-content h2 {
        font-size: 32px;
    }


}