@charset "UTF-8";

html {
    line-height: 1;
    font-size: 100%;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    background-color: #F2F3F0;
}

img {
    width: auto;
    height: auto;
    min-width: auto;
}

.container {
    width: 1120px;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

section {
    margin-top: 150px;
}

/* header */
header {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    /* 中の要素を左右中央に配置 */
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #F2F3F0;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.2s ease;
}

header.scrolled {
    box-shadow: 0 1px 5px rgba(58, 90, 64, 0.1);
}

.header-inner {
    width: 1120px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.header-menu ul {
    display: flex;
    gap: 20px;
}

.header-menu-list.contact a::after {
    content: "";
    display: inline-block;
    width: 19px;
    height: 19px;
    background: url(../img/link_icon_green.svg) no-repeat center/contain;
    margin-left: 4px;
    vertical-align: middle;
    position: relative;
    top: -2.6px;
}

h1 {
    font-family: 'futura-pt', sans-serif;
    font-weight: 600;
    /* Demi */
    font-size: 30px;
    color: #3A5A40;
    letter-spacing: 0.04em;
}

.header-menu {
    margin-left: auto;
}

.header-menu-list {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    /* Medium */
    font-size: 20px;
    color: #3A5A40
}

.link-icon {
    width: 20px;
    height: 20px;
    margin-left: 8px;
    position: relative;
    bottom: 6px;
}

/* fv */
.fv {
    width: 100%;
    height: 402px;
}

.fv-inner {
    width: 1120px;
    margin: 0 auto;
}

.fv-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fv-text {
    max-width: 750px;
}

.catch-copy {
    font-size: 40px;
    font-weight: 700;
    color: #492910;
    letter-spacing: 0.2em;
    white-space: nowrap;
}

.catch-copy-sub {
    font-size: 20px;
    font-weight: 700;
    color: #492910;
    line-height: 245%;
    margin-top: 44px;
}

.ojisan-img img {
    width: 302px;
    height: 334px;
    margin-top: 68px;
}

/* main */
.section-title {
    font-family: 'Roboto', sans-serif;
    font-size: 70px;
    font-weight: 600;
    color: #3A5A40;
    letter-spacing: 0.04em;
}

.section-title span {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: #3A5A40;
    margin-left: 16px;
}

/* about */
.about-content {
    height: 306px;
    margin-top: 96px;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.about-text {
    margin-top: 12px;
}

.about-text h3 {
    font-size: 30px;
    color: #5C4432;
    margin-bottom: 24px;
}

.about-text h3 span {
    font-size: 24px;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    color: #5C4432;
    margin-left: 12px;
}

.about-text p {
    font-size: 16px;
    line-height: 200%;
    color: #5C4432;
}

.about-img {
    width: 544px;
    height: 306px;
}

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

.pc-only {
    display: inline;
}

.sp-only {
    display: none;
}

/* SKILLS */
.skill-title {
    text-align: center;
    margin-top: 28px;
    margin-bottom: 28px;
}

.skills-content {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
    margin-top: 96px;
}

.skill-item {
    width: 352px;
    height: 569px;
    padding: 42px 32px;
    border: 1px solid #5C4432;
    text-align: center;
    box-sizing: border-box;
}

.skill-title {
    font-size: 26px;
    font-weight: 700;
    color: #3A5A40;
}

.skill-description {
    line-height: 160%;
    text-align: left;
    color: #5C4432;
}

/* WORKSセクション */
.works {
    margin-top: 150px;
}

.works-item:hover {
    opacity: 0.7;
}

.works-content {
    margin-top: 96px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 40px 30px;
}

/* リンク全体の装飾はOK */
.works-link {
    display: block;
    text-decoration: none;
    color: inherit;
    background: transparent;
    /* ← これを明示 */
}

/* 画像部分にだけ背景色を付ける */
.works-img-wrapper.with-bg {
    background-color: #EBEBEB;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* img は幅いっぱいに */
.works-img-wrapper.with-bg img {
    width: 100%;
    display: block;
}

/* テキスト部分には背景を適用しない */
.works-text {
    background: none;
    padding: 0;
    margin-top: 16px;
}

/* 大きい画像 */
.works-item:nth-child(1),
.works-item:nth-child(2) {
    grid-column: span 3;
}

.works-item:nth-child(1) img,
.works-item:nth-child(2) img {
    height: 356px;
    object-fit: contain;
}

/* 小さい画像 */
.works-item:nth-child(n+3) {
    grid-column: span 2;
}

.works-item:nth-child(n+3) img {
    height: 352px;
    object-fit: contain;
}

.works-item {
    flex-direction: column;
    align-items: center;
    /* ← 画像は中央 */
}

.works-item a {
    width: 100%;
}

.works-item img {
    width: 100%;
    display: block;
}

/* === テキスト === */
.works-text {
    text-align: left;
    /* ← テキストだけ左揃えに戻す */
    margin-top: 20px;
    background: none;
    padding: 0;
}

.works-title-text {
    font-weight: 500;
    color: #5c4432;
    font-size: 18px;
    white-space: nowrap;
    margin: 0;
}

.works-category {
    font-weight: 500;
    font-size: 18px;
    color: #5c4432;
    white-space: nowrap;
    margin-top: 4px;
    /* タイトルとカテゴリの余白 */
}

/* ─── CONTACT セクション ─── */
section.contact {
    text-align: center;
    /* 中央揃え */
    margin-top: 150px;
    /* 他セクションと同じマージン */
}


.contact-text {
    font-size: 16px;
    color: #5c4432;
    line-height: 200%;
    margin: 24px 0 40px;
    /* 見出しとの間を24px、下を40px */
}

/* ボタン本体 */
.contact-button {
    display: inline-block;
    background-color: #3A5A40;
    color: #fff;
    font-weight: 500;
    font-size: 20px;
    padding: 12px 24px;
    border-radius: 9999px;
    text-decoration: none;
    transition: background-color 0.2s;
}

/* ホバーで少し濃く */
.contact-button:hover {
    background-color: #6d986c;
}

/* アイコン部分 */
.contact-icon {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin-left: 5px;
    background: url('../img/content_icon_white.png') no-repeat center/contain;
    position: relative;
    top: -2.5px;
}

/* フッター全体 */
.site-footer {
    margin-top: 150px;
    background-color: #3A5A40;
    padding: 48px 0;
    /* 上下スペース */
}

/* コンテナ＋左右レイアウト */
.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1120px;
    margin: 0 auto;
}

.footer-menu-sp,
.footer-copy-sp {
    display: none;
}


/* ナビリンク */
.footer-menu ul {
    display: flex;
    gap: 24px;
    /* リンク間の余白 */
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu a {
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-weight: 500;
    text-decoration: none;
}

/* CONTACTのみアイコンをプラス */
.footer-menu .contact a {
    position: relative;
    padding-right: 28px;
    /* アイコン分の余白を確保 */
}

.footer-menu .contact a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    background: url('../img/content_icon_white.svg') no-repeat center/contain;
}

/* --- work-detail セクション --- */
.detail-value {
    display: block;
    flex: 1;
    line-height: 170%;
}

.detail-value-sp {
    display: none;
}

.work-detail {
    margin-top: 100px;
}

.work-detail .detail-title {
    font-family: 'Roboto', sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: #492910;
    margin-bottom: 8px;
}

.work-detail .detail-category {
    font-size: 16px;
    color: #5C4432;
    margin-bottom: 32px;
    margin-bottom: 100px;
}


/* 画像 */
.work-detail .detail-image img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 50px;
}

.detail-image-banner img {
    display: flex;
    justify-content: center;
}

.detail-image-flyer {
    display: flex;
    justify-content: center;
    /* 中央寄せ（必要に応じて） */
    gap: 20px;
    /* 画像の間の余白 */
}

detail-image-flyer img {
    width: 45%;
    /* 画像を2枚並べた時のサイズ調整 */
    height: auto;
}

.detail-image-banner-rock img {
    max-width: 926px;
    margin: 0 auto;
    display: block;
}

.detail-table {
    width: 926px;
    margin: 0 auto 40px;
    color: #5C4432;
    font-size: 16px;
}

.detail-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 30px 0;
    border-bottom: 1px solid #9D9D9D;
}

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

.detail-label {
    width: 200px;
    font-weight: bold;
    color: #5C4432;
    white-space: nowrap;
}

.detail-value.url-label a::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 1px;
    ;
    /* 文字との間隔 */
    background: url('../img/link_icon_brown.svg') no-repeat center/contain;
    vertical-align: -3px;
}

.ail-valuedet {
    flex: 1;
    line-height: 1.8;
}


.detail-value a {
    border-bottom: 1px solid #5c4432;
    padding-bottom: 5px;
}

.detail-value a:hover {
    opacity: 0.5;
}

.works-img-wrapper.with-bg.no-padding {
    padding: 0;
}

/* コピーライト */
.footer-copy {
    color: #fff;
    font-size: 16px;
    font-family: 'roboto', sans-serif;
    margin: 0;
}

/* スマホナビ（初期非表示） */
.nav-sp {
    display: block;
    /* display: none は使わない */
    position: fixed;
    top: 0;
    right: 0;
    width: 60%;
    height: 100vh;
    background-color: #3A5A40;
    z-index: 999;
    padding: 100px 20px;

    /* アニメーション用初期状態 */
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.nav-sp ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.nav-sp li {
    margin-bottom: 5vw;
}

.nav-sp a {
    font-size: 4vw;
    font-weight: 500;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
}

.nav-sp ul li:last-child a:after {
    content: "";
    display: inline-block;
    width: 3.5vw;
    /* 画像のサイズ */
    height: 3.5vw;
    margin-left: 0.3vw;
    /* 文字とアイコンの間隔 */
    background: url("../img/content_icon_white.svg") no-repeat center/contain;
    position: relative;
    top: 0.2vw;
    /* 少し下げたい場合は調整 */
}

/* --- メニューオープン時に表示 --- */
.nav-sp.active {
    transform: translatex(0);
    opacity: 1;
}

.fv-sp {
    display: none;
}

.fv-subtext-sp {
    display: none;
}

@media screen and (max-width: 1439px) {
    .container {
        width: 100%;
        padding-left: 8vw;
        padding-right: 8vw;
        box-sizing: border-box;
    }

    main {
        margin-top: 0;
    }

    section {
        margin-top: 20vw;
    }

    h1.header-logo {
        font-size: 3vw;
    }

    /* header */
    header {
        height: auto;
        padding-top: 20px;
        padding-bottom: 20px;
        align-items: flex-start;
    }

    .header-inner {
        width: 100%;
        padding-left: 28px;
        padding-right: 28px;
        box-sizing: border-box;
        justify-content: space-between;
    }

    .header-menu {
        display: none;
    }

    .container {
        width: 100%;
        padding-left: 8vw;
        padding-right: 8vw;
    }

    /* fv */
    .fv {
        display: none;
        height: auto;
    }

    .fv-sp {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 2vw;
        padding-left: 5vw;
        padding-right: 5vw;
        box-sizing: border-box;
        margin-top: 10vw
    }

    .fv-subtext-sp {
        display: block;
        margin-left: 10vw;
        margin-right: 10vw;
        font-size: 4vw;
        color: #5C4432;
        line-height: 2;
        text-align: center;
        box-sizing: border-box;
        /* ← これ重要！paddingを含めて254pxに収まるように */
    }

    .vertical-text {
        writing-mode: vertical-rl;
        text-orientation: mixed;
        font-size: 7vw;
        font-weight: 700;
        color: #492910;
        line-height: 115%;
        letter-spacing: 0.3em;
        white-space: nowrap;
    }

    .left-text {
        margin-right: 16px;
    }

    .right-text {
        margin-left: 16px;
    }

    .ojisan-img-sp {
        margin-top: 50px;
    }

    .ojisan-img-sp img {
        width: 48vw;
        height: auto;
        margin-bottom: 0;
        display: block;
    }

    .catch-copy {
        font-size: 10.67vw;
    }

    /* about */
    .section-title {
        font-size: 8vw;
    }

    .section-title span {
        font-size: 4vw;
    }

    .about {
        margin-top: 20vw;
    }

    .about-content {
        margin-top: 13vw;
        height: auto;
        flex-direction: column-reverse;
        align-items: center;
        gap: 7.5vw;
    }

    .about-text {
        text-align: left;
        margin-top: 0;
    }

    .about-text h3 {
        font-size: 7vw;
        margin-bottom: 5vw;
    }

    .about-text h3 span {
        display: inline;
        font-size: 4vw;
        margin-left: 12px;
        font-family: 'Roboto', sans-serif;
        font-weight: 600;
    }

    .about-text p {
        font-size: 4vw;
        line-height: 190%;
        white-space: normal;
    }

    .about-img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .about-img img {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
    }

    .pc-only {
        display: none;
    }

    .sp-only {
        display: inline;
    }

    .skill-item {
        width: 100%;
        height: auto;
        padding: 15vw 0;
        /* 下だけ大きめ */
        border: none;
        border-bottom: 1px dotted #5C4432;
        /* 下線だけ点線に */
        box-sizing: border-box;
    }

    .skill-item img {
        width: 25vw;
    }

    .skill-description {
        margin-bottom: 0;
        /* 余計な下余白がある場合に調整 */
    }

    .skills-content {
        margin-top: 0px;
        gap: 0;
    }

    .skill-item:nth-child(3) {
        border-bottom: none;
        padding-bottom: 0;
    }

    .skill-title {
        font-size: 6vw !important;
        font-weight: 700;
        color: #3A5A40;
        margin: 7vw 0;
    }

    .skill-description {
        font-size: 4vw !important;
    }

    .works {
        margin-top: 20vw;
    }

    .work-detail .detail-image img {
        margin-bottom: 0;
    }

    .works-item {
        width: 100%;
    }

    .works-item:hover {
        opacity: 1 !important;
    }

    .works-item figure {
        position: relative;
    }

    .works-item figure::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 12vw;
        height: 12vw;
        background-image: url("../img/lupe_icon.svg");
        /* パスはプロジェクトに合わせて */
        background-size: contain;
        background-repeat: no-repeat;
        pointer-events: none;
    }

    .works-item.with-icon figure {
        position: relative;
    }

    .works-item.with-icon figure::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 12vw;
        height: 12vw;
        background-image: url("../img/lupe_icon.svg");
        background-size: contain;
        background-repeat: no-repeat;
        pointer-events: none;
    }

    .works-item.works-item-fes figure::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 12vw;
        height: 12vw;
        background-image: url("../img/lupe_icon.svg");
        background-size: contain;
        background-repeat: no-repeat;
        pointer-events: none;
    }

    .works-item {
        position: relative;
        /* 親要素に relative を指定 */
    }

    .works-item:nth-child(n+3):not(.works-item-fes) {
        width: 40vw
    }

    .works-img-wrapper.with-bg {
        background-color: #EBEBEB;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .works-img-wrapper.with-bg img {
        width: 100%;
        height: auto;
        display: block;
    }

    .works-text {
        margin-top: 1.5vw;
        text-align: left;
    }

    .works-title-text,
    .works-category {
        font-size: 3vw;
        color: #5c4432;
        white-space: nowrap;
        margin-top: 1vw;
    }

    .works-item:nth-child(1) img,
    .works-item:nth-child(2) img {
        height: auto;
        object-fit: contain;
    }

    .works-content {
        display: flex;
        flex-wrap: wrap;
        margin-top: 13vw;
        justify-content: space-between;
        gap: 4vw 0;
    }

    .works-item:nth-child(n+3) .works-img-wrapper.with-bg :not(.works-item-fes) {
        aspect-ratio: 1 / 1;
        width: 100%;
        height: 50%;
        background-color: #EBEBEB;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .works-item-fes {
        width: 100%;
        /* 親幅いっぱいに */
    }

    .works-item-fes .works-img-wrapper.with-bg {
        aspect-ratio: 2 / 1;
    }

    .works-item:nth-child(n+3) img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .works-img-wrapper.with-bg.no-padding {
        padding: 0;
        background: none;
    }

    .work-detail .detail-title {
        font-size: 5vw;
    }

    .detail-table {
        width: 100%;
        font-size: 4vw;
        padding-left: 8vw;
        padding-right: 8vw;
        box-sizing: border-box;
        margin: 0;
    }

    .detail-row {
        flex-direction: column;
        align-items: flex-start;
        padding: 6vw 0;
        /* 上下の余白 */
    }

    .detail-value {
        padding-top: 5vw;
    }

    section.contact {
        margin-top: 20vw;
    }

    .contact-text {
        font-size: 4vw !important;
        text-align: left;
        margin: 5vw 0;
    }

    .contact-text br {
        display: none;
    }

    .contact-button {
        display: inline-block;
        background-color: #3A5A40;
        color: #fff;
        font-weight: 500;
        font-size: 4.5vw;
        padding: 2vw 3vw;
        border-radius: 9999px;
        text-decoration: none;
        transition: background-color 0.2s;
    }

    .contact-icon {
        display: inline-block;
        vertical-align: middle;
        width: 4vw;
        height: 4vw;
        margin-left: 0.5vw;
        background: url(../img/content_icon_white.svg) no-repeat center / contain;
        position: relative;
        top: -0.38vw;
    }

    .footer-inner {
        display: none;
    }

    .footer-menu-sp {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .footer-menu-sp li {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 64px;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
    }


    .footer-menu-sp a {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6vw 0;
        font-weight: bold;
        border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
        text-decoration: none;
        color: #fff;
        font-size: 3.5vw;
    }

    .footer-menu-sp a:nth-child(2),
    .footer-menu-sp a:nth-child(4) {
        border-right: none !important;
    }

    .footer-copy-sp {
        display: block;
        text-align: center;
        padding: 2.5vw;
        font-size: 3vw;
    }

    .footer-menu-sp a:last-child::after {
        content: "";
        display: inline-block;
        width: 3vw;
        height: 3vw;
        margin-left: 0.8vw;
        background: url('../img/content_icon_white.svg') no-repeat center / contain;
        vertical-align: middle;
        position: relative;
    }

    .site-footer {
        margin-top: 20vw;
        background-color: #3A5A40;
        padding: 0;
    }

    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

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

    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 24px;
        height: 17px;
        cursor: pointer;
        z-index: 1001;
    }

    .hamburger span {
        display: block;
        width: 100%;
        height: 3px;
        background-color: #3A5A40;
        border-radius: 2px;
        transition: all 0.5s ease;
    }

    .hamburger.active span {
        background-color: #ffffff;
    }

    .work-detail {
        margin-top: 10vw;
    }

    .detail-image {
        margin: 8vw 0;
    }

    .work-detail .detail-category {
        margin-bottom: 0;
    }

    .detail-value {
        display: none;
    }

    .detail-value-sp {
        display: block;
        line-height: 6vw;
        word-break: break-all;
    }

    .work-detail .detail-category {
        font-size: 4vw;
        color: #5C4432;
    }

    .detail-value a {
        border-bottom: 1px solid #5c4432;
        padding-bottom: 2px;
    }

    .detail-value.url-label a::after {
        content: "";
        display: inline-block;
        width: 3vw;
        height: 3vw;
        margin-left: 1px;
        background: url('../img/link_icon_brown.svg') no-repeat center/contain;
        vertical-align: -3px;
    }

    .detail-row:first-child {
        padding-top: 0;
    }

    .detail-row:last-child {
        padding-bottom: 0;
    }
}

@media screen and (max-width: 768px) {
    .works-text {
        display: none;
    }
}