/*
Theme Name: Nozomi Creative
Theme URI:
Author: 希 Creative
Description: 希 Creative オリジナルWordPressテーマ
Version: 1.0
*/

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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #f3f0e9;
    color: #171714;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
    line-height: 1.85;
}


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

.site-header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;

    width: 100%;

    display: flex;
    align-items: center;

    padding: 27px 6%;

    color: #fff;
}

.brand {
    color: inherit;
    text-decoration: none;
    font-size: 25px;
    line-height: 1.2;
}

.brand b {
    font-size: 39px;
    font-weight: 400;
}

.brand small,
.site-footer small {
    display: block;

    font-family: Arial, sans-serif;
    font-size: 9px;

    letter-spacing: .22em;
}

.global-nav {
    margin-left: auto;

    display: flex;
    gap: 30px;
}

.global-nav a {
    color: inherit;
    text-decoration: none;

    font-family: Arial, sans-serif;
    font-size: 11px;

    letter-spacing: .15em;
}

.menu-toggle {
    display: none;

    margin-left: auto;

    background: none;
    border: 0;

    color: #fff;
    font-size: 25px;

    cursor: pointer;
}


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

.hero {
    min-height: 760px;

    position: relative;
    overflow: hidden;

    color: #fff;

    background:
        url("assets/images/hero.jpg")
        center center / cover no-repeat;
}

.shade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.68),
            rgba(0,0,0,.10)
        );
}

.hero-copy {
    position: relative;
    z-index: 2;

    padding: 155px 7% 90px;

    max-width: 790px;
}

.eyebrow {
    margin: 0 0 10px;

    font-family: Georgia, serif;
    font-size: 13px;

    letter-spacing: .25em;
}

.hero h1 {
    margin: 30px 0;

    font-size: clamp(48px, 6vw, 88px);
    font-weight: 400;

    line-height: 1.25;
    letter-spacing: .08em;
}

.hero-copy > p:not(.eyebrow) {
    font-size: 17px;
    letter-spacing: .08em;
}

.play {
    display: inline-flex;
    align-items: center;
    gap: 18px;

    margin-top: 24px;

    color: #fff;
    text-decoration: none;

    letter-spacing: .12em;
}

.play span {
    width: 56px;
    height: 56px;

    display: grid;
    place-items: center;

    border: 1px solid #fff;
    border-radius: 50%;
}

.scroll {
    position: absolute;

    right: 4%;
    bottom: 35px;

    z-index: 2;

    writing-mode: vertical-rl;

    font-family: Arial, sans-serif;
    font-size: 9px;

    letter-spacing: .2em;
}


/* =========================
   COMMON SECTION
========================= */

.section {
    padding: 85px 5%;
}

.light {
    background: #f6f4ee;
}

.section-head {
    display: flex;

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

    margin-bottom: 35px;
}

.section-head h2 {
    margin: 0;

    font-size: 21px;
    font-weight: 400;
}

.section-head a {
    color: inherit;
    text-decoration: none;

    font-size: 12px;
}


/* =========================
   WORKS
========================= */

.works-grid {
    display: grid;

    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 250px 250px;

    gap: 8px;
}

.work {
    position: relative;

    overflow: hidden;

    background: #333;
    color: #fff;
}

.work.big {
    grid-row: 1 / 3;
}

.work.tall {
    grid-column: 3;
    grid-row: 1 / 3;
}

.ph {
    width: 100%;
    height: 100%;

    transition: transform .7s ease;
}

.work:hover .ph {
    transform: scale(1.04);
}


/* 仮背景：あとで実際の写真へ変更 */

.billtech {
    background:
        linear-gradient(
            135deg,
            #1d1b1a,
            #77736a 45%,
            #171717
        );
}

.housing {
    background:
        linear-gradient(
            145deg,
            #26372b,
            #84917e
        );
}

.recruit {
    background:
        linear-gradient(
            145deg,
            #65706e,
            #252c2c
        );
}

.clinic {
    background:
        linear-gradient(
            145deg,
            #c7baa5,
            #eee8dc
        );
}

.overlay {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 25px;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.84)
        );
}

.overlay h3 {
    margin: 5px 0;

    font-size: 21px;
    font-weight: 400;
}

.overlay small {
    font-family: Arial, sans-serif;
    font-size: 10px;

    letter-spacing: .15em;
}

.overlay p {
    margin: 0;

    font-size: 12px;
}


/* =========================
   SERVICE
========================= */

.service {
    color: #fff;

    background:
        linear-gradient(
            140deg,
            #27372f,
            #07100c
        );
}

.services {
    display: grid;

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

.services article {
    padding: 30px;

    border-right: 1px solid rgba(255,255,255,.28);
}

.services article:first-child {
    border-left: 1px solid rgba(255,255,255,.28);
}

.services span {
    font-size: 32px;
}

.services h3 {
    font-size: 22px;
    font-weight: 400;
}

.services p {
    font-size: 13px;
}


/* =========================
   ABOUT
========================= */

.about {
    display: grid;

    grid-template-columns: 1fr 1.25fr;

    gap: 60px;

    align-items: center;
}

.about-photo {
    height: 430px;
}

.creator {
    height: 100%;

    background:
        linear-gradient(
            135deg,
            #343d3b,
            #aab0a5
        );
}

.about-copy {
    max-width: 650px;
}

.about-copy h2 {
    font-size: 38px;
    font-weight: 400;
}

.outline,
.cta {
    display: inline-block;

    margin-top: 15px;
    padding: 11px 24px;

    color: inherit;
    text-decoration: none;

    border: 1px solid;

    font-size: 12px;
}


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

.contact {
    padding: 110px 7%;

    background: #111;
    color: #fff;
}

.contact h2 {
    font-size: clamp(36px, 5vw, 65px);
    font-weight: 400;

    line-height: 1.45;
}


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

.site-footer {
    padding: 28px 6%;

    display: flex;

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

    background: #090909;
    color: #aaa;
}

.site-footer b {
    color: #fff;

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


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

.reveal {
    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity 1s ease,
        transform 1s ease;
}

.reveal.show {
    opacity: 1;

    transform: translateY(0);
}


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

@media (max-width: 800px) {

    .global-nav {
        display: none;

        position: absolute;

        top: 78px;
        right: 5%;

        padding: 25px;

        flex-direction: column;

        background: #111;
    }

    .global-nav.open {
        display: flex;
    }

    .menu-toggle {
        display: block;
    }

    .hero {
        min-height: 700px;
    }

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

    .works-grid {
        display: block;
    }

    .work {
        height: 280px;

        margin-bottom: 8px;
    }

    .work.big,
    .work.tall {
        height: 380px;
    }

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

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

    .section {
        padding: 60px 6%;
    }
}


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

@media (max-width: 520px) {

    .site-header {
        padding: 20px 6%;
    }

    .brand {
        font-size: 20px;
    }

    .brand b {
        font-size: 31px;
    }

    .hero-copy {
        padding:
            145px 7%
            80px;
    }

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

    .hero-copy > p:not(.eyebrow) {
        font-size: 14px;
    }

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

    .section-head {
        align-items: start;
        gap: 20px;

        flex-direction: column;
    }

    .about-photo {
        height: 320px;
    }

    .site-footer {
        flex-direction: column;

        align-items: start;
    }
}