/*
Theme Name: Go 5tudio 2026
Theme URI: https://gostudio.jp/
Author: Go 5tudio
Author URI: https://gostudio.jp/
Description: Custom WordPress theme converted from the approved Claude Design system.
Version: 3.1.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.1
Text Domain: go5tudio
*/

/* =========================================================
   Go 5tudio responsive correction layer — clean baseline
   ========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

body {
    min-width: 320px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

#go5-home,
#g5-main-content,
#g5-site-header,
#g5-site-footer {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

#go5-home,
#g5-main-content {
    overflow-x: clip !important;
}

/* Japanese line breaking: CSS only, no DOM mutation. */
html:lang(ja)
:where(main, article, #g5-site-footer)
:where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption, blockquote, span, a) {
    line-break: strict;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

@supports (word-break: auto-phrase) {
    html:lang(ja)
    :where(main, article, #g5-site-footer)
    :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption, blockquote, span, a) {
        word-break: auto-phrase;
    }
}

:where(main, article)
:where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption, blockquote) {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
}

:where(main, article)
:where(h1, h2, h3, h4, h5, h6) {
    text-wrap: pretty;
}

:where(main, article)
:where(p, li, dd, figcaption, blockquote) {
    text-wrap: pretty;
}

/* Flex/grid children must be allowed to shrink without widening the page. */
:where(#g5-main-content, main, article)
[style*="display: flex"] > *,
:where(#g5-main-content, main, article)
[style*="display:flex"] > *,
:where(#g5-main-content, main, article)
[style*="display: grid"] > *,
:where(#g5-main-content, main, article)
[style*="display:grid"] > * {
    min-width: 0;
}

/* =========================================================
   Header
   ========================================================= */

#g5-site-header {
    padding-inline: clamp(20px, 3.35vw, 48px) !important;
}

#g5-site-header nav {
    min-width: 0;
}

/* =========================================================
   Hero
   ========================================================= */

.g5-home-hero {
    height: calc(100vh - 208px) !important;
    height: calc(100dvh - 208px) !important;
    min-height: 520px !important;
    padding: 0 !important;
    align-items: center !important;
}

.g5-home-hero .g5-hero-content {
    position: relative;
    z-index: 2;
    flex: 0 0 auto !important;
    width: min(1120px, calc(100% - 48px)) !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: clamp(18px, 2.2vh, 26px) !important;
}

.g5-home-hero .g5-hero-h1 {
    width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: clamp(20px, 6vw, 64px) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.025em !important;
    white-space: normal !important;
    text-wrap: wrap !important;
}

.g5-home-hero .g5-hero-line,
.g5-home-hero .g5-hero-line-last {
    display: block !important;
    width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
}

.g5-home-hero .g5-hero-gradient,
.g5-home-hero .g5-hero-tail {
    display: inline !important;
    width: auto !important;
    max-width: none !important;
    font-size: inherit !important;
    line-height: inherit !important;
    white-space: nowrap !important;
}

.g5-home-hero .g5-hero-copy {
    width: min(820px, 100%) !important;
    max-width: 820px !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: clamp(15px, 1.3vw, 20px) !important;
    line-height: 1.65 !important;
}

.g5-home-hero .g5-hero-copy > span {
    display: block !important;
    width: max-content !important;
    max-width: 100% !important;
    white-space: nowrap !important;
}

.g5-home-hero .g5-hero-copy > br {
    display: none !important;
}

.g5-home-hero .g5-hero-btns {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    width: max-content !important;
    max-width: 100% !important;
    gap: 16px !important;
    padding-top: 6px !important;
}

.g5-home-hero .g5-hero-btns > a {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}

.g5-home-hero .g5-rail {
    flex-shrink: 0;
}

/* =========================================================
   Stats
   ========================================================= */

.g5-home-stats {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch !important;
    width: 100%;
    height: auto !important;
    min-height: 117px;
    gap: 0 !important;
    padding: 18px clamp(24px, 5.55vw, 80px) !important;
}

.g5-home-stats > .g5-stat-div {
    display: none !important;
}

.g5-home-stats > div:not(.g5-stat-div) {
    min-width: 0;
    padding: 8px clamp(8px, 1vw, 18px);
}

.g5-home-stats > div:not(.g5-stat-div) span {
    white-space: nowrap !important;
}

/* =========================================================
   Shared sections
   ========================================================= */

.g5-home-services,
.g5-home-process,
.g5-home-works,
.g5-home-blog {
    width: 100%;
    max-width: 100%;
    padding-left: clamp(24px, 5.55vw, 80px) !important;
    padding-right: clamp(24px, 5.55vw, 80px) !important;
}

/* =========================================================
   Services
   ========================================================= */

.g5-home-services .g5-svc-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
    gap: clamp(28px, 4vw, 60px) !important;
    width: 100%;
}

.g5-home-services .g5-svc-head > * {
    min-width: 0;
}

.g5-home-services .g5-svc-head h2 {
    font-size: clamp(32px, 2.8vw, 40px) !important;
    line-height: 1.35 !important;
}

.g5-home-services .g5-svc-head p {
    max-width: 720px;
    margin-left: auto !important;
    font-size: clamp(16px, 1.4vw, 20px) !important;
    line-height: 1.6 !important;
}

.g5-home-services .g5-cards {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px !important;
    width: 100%;
}

.g5-home-services .g5-cards > a {
    width: auto !important;
    min-width: 0 !important;
    flex: none !important;
}

.g5-home-services .g5-cards > a > div:first-child {
    height: clamp(180px, 15vw, 240px) !important;
}

/* =========================================================
   Process
   ========================================================= */

.g5-home-process {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 34px !important;
}

.g5-home-process > div:first-child {
    width: auto !important;
    max-width: 760px !important;
}

.g5-home-process > div:nth-child(2) {
    width: 100% !important;
    min-width: 0 !important;
}

.g5-home-process .g5-proc-steps > div {
    min-width: 0;
    padding-right: clamp(18px, 1.8vw, 30px) !important;
}

.g5-home-process .g5-proc-steps > div:last-child {
    padding-right: 0 !important;
}

.g5-home-process .g5-proc-steps > div > span:last-child {
    font-size: clamp(13px, 0.85vw, 15px) !important;
    line-height: 1.8 !important;
}

/* =========================================================
   Works / Values
   ========================================================= */

.g5-home-works .g5-cards {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px !important;
    width: 100%;
}

.g5-home-works .g5-cards > a {
    min-width: 0;
    flex: none !important;
}

.g5-home-works .g5-values {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px 36px !important;
    width: 100%;
}

.g5-home-works .g5-values > div {
    min-width: 0;
    align-items: flex-start !important;
}

/* =========================================================
   Blog
   ========================================================= */

.g5-home-blog .g5-cards-dark {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px !important;
    width: 100%;
}

.g5-home-blog .g5-cards-dark > a {
    min-width: 0;
    flex: none !important;
}

.g5-home-blog .g5-cards-dark > a:only-child {
    width: min(520px, 100%) !important;
}

/* =========================================================
   Footer
   ========================================================= */

#g5-site-footer {
    padding-left: clamp(24px, 5.55vw, 80px) !important;
    padding-right: clamp(24px, 5.55vw, 80px) !important;
}

#g5-site-footer .g5-footer-top {
    align-items: start;
}

#g5-site-footer .g5-footer-cols {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    gap: 34px 44px !important;
    flex: 1;
    min-width: 0;
}

#g5-site-footer .g5-footer-cols > div {
    width: auto !important;
    min-width: 0;
}

/* =========================================================
   Breakpoints
   ========================================================= */

@media (max-width: 1399px) {
    #g5-site-header {
        gap: 32px !important;
        padding-inline: 32px !important;
    }

    #g5-site-header nav {
        gap: 22px !important;
    }

    .g5-home-services .g5-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .g5-home-services .g5-cards > a > div:first-child {
        height: 220px !important;
    }
}

@media (max-width: 1199px) {
    .g5-home-hero {
        min-height: 560px !important;
    }

    .g5-home-hero .g5-rail {
        display: none !important;
    }

    .g5-home-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 16px 32px !important;
        gap: 8px !important;
    }

    .g5-home-stats > div:not(.g5-stat-div) {
        justify-content: flex-start !important;
        padding: 14px 18px;
    }

    .g5-home-services .g5-svc-head {
        grid-template-columns: minmax(0, 1fr);
    }

    .g5-home-services .g5-svc-head p {
        max-width: 900px;
        margin-left: 0 !important;
        text-align: left !important;
    }

    .g5-home-works .g5-cards,
    .g5-home-blog .g5-cards-dark {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #g5-site-footer .g5-footer-top {
        flex-direction: column !important;
    }

    #g5-site-footer .g5-footer-top > div:first-child {
        width: 100% !important;
        max-width: 420px;
    }

    #g5-site-footer .g5-footer-cols {
        width: 100%;
    }
}

@media (max-width: 899px) {
    .g5-home-hero {
        min-height: 600px !important;
    }

    .g5-home-hero .g5-hero-content {
        width: calc(100% - 40px) !important;
        margin-left: 20px !important;
    }

    .g5-home-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 14px 24px !important;
    }

    .g5-home-services .g5-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .g5-home-process .g5-proc-nums,
    .g5-home-process .g5-proc-dots {
        display: none !important;
    }

    .g5-home-process .g5-proc-steps {
        counter-reset: g5-process-step;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px !important;
    }

    .g5-home-process .g5-proc-steps > div {
        counter-increment: g5-process-step;
        position: relative;
        padding: 28px !important;
        border: 1px solid rgba(30, 30, 30, 0.1);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.42);
    }

    .g5-home-process .g5-proc-steps > div::before {
        content: "0" counter(g5-process-step);
        display: block;
        margin-bottom: 20px;
        font-family: 'Inter', sans-serif;
        font-size: 20px;
        font-weight: 700;
        color: rgba(34, 34, 34, 0.55);
    }

    .g5-home-process .g5-proc-steps > div > span:last-child {
        font-size: 14px !important;
    }

    .g5-home-works .g5-values {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        padding: 32px !important;
    }

    #g5-site-footer .g5-footer-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 639px) {
    .g5-home-hero {
        height: auto !important;
        min-height: 680px !important;
        padding: 52px 0 44px !important;
        align-items: flex-start !important;
    }

    .g5-home-hero .g5-hero-bg {
        object-position: 62% center !important;
    }

    .g5-home-hero .g5-hero-scrim {
        background: linear-gradient(
            90deg,
            rgba(6, 20, 50, 0.92) 0%,
            rgba(6, 20, 50, 0.72) 72%,
            rgba(6, 20, 50, 0.42) 100%
        ) !important;
    }

    .g5-home-hero .g5-hero-content {
        width: calc(100% - 32px) !important;
        margin-left: 16px !important;
        gap: 20px !important;
    }

    .g5-home-hero .g5-hero-copy {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 15px !important;
        line-height: 1.75 !important;
    }

    .g5-home-hero .g5-hero-copy > span {
        display: inline !important;
        width: auto !important;
        max-width: 100% !important;
        white-space: normal !important;
    }

    .g5-home-hero .g5-hero-copy > br {
        display: initial !important;
    }

    .g5-home-hero .g5-hero-btns {
        flex-flow: column nowrap !important;
        align-items: stretch !important;
        width: min(100%, 280px) !important;
    }

    .g5-home-hero .g5-hero-btns > a {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center;
        padding: 14px 20px !important;
    }

    .g5-home-stats {
        grid-template-columns: minmax(0, 1fr);
        padding: 14px 20px !important;
    }

    .g5-home-stats > div:not(.g5-stat-div) {
        width: 100%;
        justify-content: flex-start !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .g5-home-stats > div:not(.g5-stat-div):last-child {
        border-bottom: 0;
    }

    .g5-home-services,
    .g5-home-process,
    .g5-home-works,
    .g5-home-blog {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .g5-home-services .g5-svc-head h2,
    .g5-home-process .g5-h2,
    .g5-home-works .g5-h2,
    .g5-home-blog .g5-h2 {
        font-size: clamp(27px, 8vw, 36px) !important;
        line-height: 1.4 !important;
    }

    .g5-home-services .g5-svc-head p br {
        display: none;
    }

    .g5-home-services .g5-cards,
    .g5-home-works .g5-cards,
    .g5-home-blog .g5-cards-dark,
    .g5-home-process .g5-proc-steps,
    .g5-home-works .g5-values {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .g5-home-services .g5-cards > a > div:first-child {
        height: 220px !important;
    }

    .g5-home-process .g5-proc-steps > div,
    .g5-home-works .g5-values {
        padding: 24px !important;
    }

    .g5-home-works .g5-sec-head,
    .g5-home-blog .g5-sec-head {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 18px;
    }

    #g5-site-footer .g5-footer-cols {
        grid-template-columns: minmax(0, 1fr);
    }

    #g5-site-footer .g5-footer-bottom {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 18px;
    }
}