@charset "UTF-8";

/*
 * Gratianex typography tuning
 * Coomilの文字階層（本文14〜16px・主見出し40px前後）を参考に、
 * 本文の可読性を保ちながら大見出しの圧迫感を抑える。
 */

body {
    font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
    font-size: 15px;
    line-height: 1.8;
}

/* Common footer */
#grx-footer-news-title {
    font-size: clamp(36px, 3.2vw, 46px);
    line-height: 1.2;
}

.grx-footer-logo {
    font-size: 32px;
    line-height: 1.1;
}

/* Front page */
.front-page .hero-title {
    max-width: 650px;
    font-size: clamp(42px, 4vw, 48px);
    line-height: 1.14;
    letter-spacing: -0.035em;
}

.front-page .hero-title-sub {
    font-size: clamp(16px, 1.45vw, 18px);
    line-height: 1.65;
}

.front-page .section-header .en-title,
.front-page .section-header-left .en-title,
.front-page .support-service-heading .en-title,
.front-page .core-flow-header .en-title {
    font-size: clamp(28px, 2.7vw, 32px);
}

.front-page .section-header .ja-title,
.front-page .section-header-left .ja-title,
.front-page .support-service-heading h3,
.front-page .core-flow-header .ja-title {
    font-size: clamp(22px, 2.05vw, 26px);
    line-height: 1.55;
}

.front-page .section-works .ja-title {
    font-size: 15px;
}

.front-page .section-cta h2 {
    font-size: clamp(30px, 3.1vw, 36px);
    line-height: 1.42;
}

/* Company */
.company-page .company-hero-copy h1 {
    font-size: clamp(48px, 5vw, 56px);
    line-height: 1.12;
}

.company-page .company-section-heading h2 {
    font-size: clamp(34px, 3.5vw, 42px);
    line-height: 1.35;
}

.company-page .company-mission-statement {
    font-size: clamp(26px, 2.7vw, 32px);
    line-height: 1.65;
}

.company-page .company-founder-copy .company-founder-intro {
    font-size: 21px;
    line-height: 1.75;
}

.company-page .company-value-card h3 {
    font-size: 24px;
    line-height: 1.45;
}

.company-page .company-profile-aside-content h3 {
    font-size: 26px;
    line-height: 1.5;
}

.company-page .company-final-cta h2 {
    font-size: clamp(34px, 3.4vw, 40px);
    line-height: 1.4;
}

/* Service index and service details */
.grx-page-hero h1,
.grx-service-hero h1 {
    font-size: clamp(42px, 4.5vw, 52px);
    line-height: 1.18;
    letter-spacing: -0.035em;
}

.grx-page-hero p:last-child,
.grx-service-hero-lead {
    font-size: 16px;
    line-height: 1.9;
}

.grx-service-intro h2,
.grx-service-section-heading h2,
.grx-service-style-lead h2,
.grx-detail-process > h2,
.grx-detail-price h2 {
    font-size: clamp(28px, 3vw, 34px);
    line-height: 1.4;
}

.grx-service-copy h2,
.grx-main-service-content h3 {
    font-size: clamp(27px, 2.8vw, 32px);
    line-height: 1.4;
}

.grx-service-copy h3,
.grx-main-service-content h4 {
    font-size: 18px;
    line-height: 1.6;
}

.grx-service-cta h2 {
    font-size: clamp(32px, 3.5vw, 40px);
    line-height: 1.4;
}

/* Works archive and case studies */
.works-hero-title {
    font-size: 32px;
    line-height: 1.4;
}

.work-single-hero .work-main-title {
    font-size: clamp(36px, 4vw, 46px);
    line-height: 1.3;
}

.work-lead {
    font-size: 16px;
    line-height: 1.9;
}

.work-showcase-heading h2,
.gallery-heading h2 {
    font-size: clamp(30px, 3vw, 36px);
    line-height: 1.4;
}

.work-design-group-heading h3 {
    font-size: clamp(25px, 2.5vw, 30px);
    line-height: 1.45;
}

.work-story-heading h2 {
    font-size: clamp(25px, 2.6vw, 30px);
}

.work-case-cta h2 {
    font-size: clamp(29px, 3vw, 34px);
    line-height: 1.45;
}

/* Contact */
.contact-hero h1 {
    font-size: clamp(42px, 4.5vw, 52px);
    line-height: 1.28;
}

.contact-intro h2,
.contact-form-heading h2 {
    font-size: clamp(27px, 2.8vw, 32px);
    line-height: 1.4;
}

/* Privacy policy */
.privacy-hero h1 {
    font-size: clamp(42px, 4.5vw, 52px);
    line-height: 1.25;
}

.privacy-section h2 {
    font-size: clamp(26px, 2.7vw, 30px);
    line-height: 1.45;
}

.privacy-nav h2,
.privacy-contact h2 {
    font-size: 24px;
    line-height: 1.45;
}

/* Blog, articles and sitemap */
.grx-content-hero h1 {
    font-size: clamp(38px, 4.2vw, 46px);
    line-height: 1.25;
}

.grx-post-heading h2 {
    font-size: 32px;
}

.grx-article-header h1 {
    font-size: clamp(34px, 3.8vw, 42px);
    line-height: 1.4;
}

.grx-article-body {
    font-size: 16px;
}

.grx-article-body h2 {
    font-size: 27px;
}

.grx-article-body h3 {
    font-size: 20px;
}

.grx-human-sitemap h2 {
    font-size: 24px;
}

@media (max-width: 768px) {
    body {
        font-size: 14px;
        line-height: 1.85;
    }

    #grx-footer-news-title {
        font-size: 30px;
    }

    .grx-footer-logo {
        font-size: 28px;
    }

    .front-page .hero-title {
        max-width: 310px;
        font-size: 30px;
        line-height: 1.18;
        letter-spacing: -0.03em;
    }

    .front-page .hero-title-sub {
        font-size: 14px;
        line-height: 1.7;
    }

    .front-page .hero-desc,
    .front-page .section-header .section-lead,
    .front-page .section-header-left .section-lead,
    .front-page .support-service-heading p:not(.en-title) {
        font-size: 13px;
        line-height: 1.85;
    }

    .front-page .section-header .en-title,
    .front-page .section-header-left .en-title,
    .front-page .support-service-heading .en-title,
    .front-page .core-flow-header .en-title,
    .front-page .section-works .en-title {
        font-size: 24px;
    }

    .front-page .section-header .ja-title,
    .front-page .section-header-left .ja-title,
    .front-page .support-service-heading h3,
    .front-page .core-flow-header .ja-title {
        font-size: 20px;
        line-height: 1.5;
    }

    .front-page .section-works .ja-title {
        font-size: 12px;
    }

    .front-page .section-cta h2 {
        font-size: 24px;
        line-height: 1.5;
    }

    .company-page .company-hero-copy h1 {
        font-size: 38px;
        line-height: 1.15;
    }

    .company-page .company-section-heading h2 {
        font-size: 27px;
        line-height: 1.42;
    }

    .company-page .company-mission-statement {
        font-size: 18px;
        line-height: 1.75;
    }

    .company-page .company-founder-copy .company-founder-intro {
        font-size: 16px;
        line-height: 1.8;
    }

    .company-page .company-value-card h3 {
        font-size: 18px;
    }

    .company-page .company-profile-aside-content h3 {
        font-size: 21px;
    }

    .company-page .company-final-cta h2 {
        font-size: 27px;
        line-height: 1.45;
    }

    .grx-page-hero h1,
    .grx-service-hero h1 {
        font-size: 32px;
        line-height: 1.28;
    }

    .grx-page-hero p:last-child,
    .grx-service-hero-lead {
        font-size: 14px;
    }

    .grx-service-intro h2,
    .grx-service-section-heading h2,
    .grx-service-style-lead h2,
    .grx-detail-process > h2,
    .grx-detail-price h2 {
        font-size: 24px;
        line-height: 1.45;
    }

    .grx-service-copy h2,
    .grx-main-service-content h3 {
        font-size: 24px;
        line-height: 1.45;
    }

    .grx-service-copy h3,
    .grx-main-service-content h4 {
        font-size: 16px;
    }

    .grx-service-cta h2 {
        font-size: 26px;
        line-height: 1.5;
    }

    .works-hero-title {
        font-size: 27px;
    }

    .work-single-hero .work-main-title {
        font-size: 28px;
        line-height: 1.38;
    }

    .work-lead {
        font-size: 14px;
        line-height: 1.85;
    }

    .work-showcase-heading h2,
    .gallery-heading h2 {
        font-size: 26px;
    }

    .work-design-group-heading h3 {
        font-size: 23px;
    }

    .work-story-heading h2 {
        font-size: 23px;
    }

    .work-case-cta h2 {
        font-size: 25px;
    }

    .contact-hero h1,
    .privacy-hero h1 {
        font-size: 30px;
        line-height: 1.35;
    }

    .contact-intro h2,
    .contact-form-heading h2,
    .privacy-section h2,
    .privacy-contact h2 {
        font-size: 22px;
        line-height: 1.5;
    }

    .privacy-nav h2 {
        font-size: 18px;
    }

    .grx-content-hero h1,
    .grx-article-header h1 {
        font-size: 29px;
        line-height: 1.4;
    }

    .grx-post-heading h2 {
        font-size: 24px;
    }

    .grx-article-body {
        font-size: 14px;
        line-height: 1.95;
    }

    .grx-article-body h2 {
        font-size: 22px;
    }

    .grx-article-body h3,
    .grx-human-sitemap h2 {
        font-size: 18px;
    }
}