@charset "utf-8";

/*
 * セクション単位で管理するスタイルシート。
 * 各セクション内は「基本 → 幅別の上書き」の順です。
 * 旧構成は main-backup.css に保存しています。
 */

/* ===============================================
 * 共通
 * =============================================== */

:root {
    --green: #78ae31;
    --pale: #f4f8ee;
    --line: #c8d2c3;
    --ink: #1d1d1b;
    --bg-beige: #F4F1EB;
    --bg-soft: #F6F6F3;
    --border-soft: #D9DDD6;
    --border-form: #DDD;
}

@media (min-width:768px) and (max-width:1100px) {
    html {
        scroll-padding-top: 90px;
    }

    main {
        padding-top: 70px;
    }
}

@media(max-width:767px) {
    html {
        scroll-padding-top: 75px;
    }

    main {
        padding-top: 55px;
    }
}

/* セクション間の上下余白を共通クラスで統一する。 */
section.section-spacing,
div.section-spacing {
    padding-block: var(--section-padding);
}
.section-wrap {
    width: min(1200px, calc(100% - 56px));
    margin: auto;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.section-title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 3.8rem;
    line-height: 1.5;
    letter-spacing: .05em;
    font-weight: 700;
}
.section-title--sans {
    font-family: "Noto Sans JP", sans-serif;
}
/* トップページの各セクション見出しは従来どおり明朝体にする。 */
.home .section-title {
    font-family: "Noto Serif JP", serif;
}
.card-title {
    font-size: 2.6rem;
    line-height: 1.5;
}
.button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 280px;
    min-height: 70px;
    background: var(--green);
    color: #fff;
    padding: 0 20px;
    font-size: 1.6rem;
    font-weight: 700;
    margin-top: 23px;
    transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
/* ボタン内の長い線矢印 */
.button b {
    position: relative;
    flex: 0 0 38px;
    width: 38px;
    height: 1px;
    background: currentColor;
    font-size: 0;
    font-weight: 400;
    line-height: 1;
    transition: transform .25s ease;
}
.button b::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 12px;
    height: 12px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}
@media (hover: hover) {
    .button:hover {
        background-color: #5c9420;
        box-shadow: 0 6px 14px rgb(0 0 0 / 12%);
        transform: translateY(-2px);
    }

    .button:hover b {
        transform: translateX(5px);
    }
}
.section-label {
    color: var(--green);
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: .09em;
    display: flex;
    align-items: center;
    gap: 11px;
    line-height: 1;
}
.section-label i {
    width: 80px;
    height: 1px;
    background: #b7d38e;
    display: block;
}
.section-label+.section-title {
    margin-top: 8px;
}
.section-lead {
    margin-top: 20px;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 2.2;
}
.text-link {
    font-size: 1.6rem;
    font-weight: 700;
    margin-top: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid #777;
    padding-bottom: 4px;
    width: max-content;
    white-space: nowrap;
}
.text-link b {
    flex: 0 0 38px;
    transition: transform .2s ease;
}
@media (hover: hover) {
    .text-link,
    .view-all,
    .process__link {
        transition: color .2s ease, border-bottom-color .2s ease;
    }

    .text-link:hover,
    .view-all:hover,
    .process__link:hover {
        color: var(--green);
        border-bottom-color: var(--green);
    }

    .text-link:hover b,
    .view-all:hover b,
    .process__link:hover b {
        transform: translateX(5px);
    }
}
:root {
    --section-padding: 80px;
}

@media(max-width:767px) {
    .button {
        min-height: 60px;
        margin: 20px auto 0;
    }

    .section-label {
        font-size: 2rem;
        gap: 8px;
    }

    .section-label i {
        width: 30px;
    }

    .section-title {
        font-size: 2.6rem;
    }

    .card-title {
        font-size: 2rem;
    }

    .text-link {
        font-size: 1.6rem;
        width: max-content;
        margin-top: 8px;
    }

    .section-lead {
        margin-top: 10px;
        font-size: 1.6rem;
    }

    .section-lead--support br {
        display: none;
    }
}

@media (max-width:767px) {
    :root {
        --section-padding: 50px;
    }
}

/* ===============================================
 * ヘッダー・ナビゲーション
 * =============================================== */

.site-header {
    position: relative;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1200px, calc(100% - 56px));
    margin: auto;
}

/* 下層ページのヘッダー下に、画面幅いっぱいの区切り線を表示する。 */
body:not(.home) {
    overflow-x: hidden;
}

body:not(.home) .site-header::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100vw;
    border-bottom: 1px solid var(--border-soft);
    content: "";
    transform: translateX(-50%);
}

.logo {
    display: inline-block;
    width: 260px;
}
.site-nav {
    display: flex;
    align-items: center;
    gap: 25px;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .04em;
}
.site-nav a {
    white-space: nowrap;
}
.site-nav > a:not(.nav-contact) {
    position: relative;
    transition: color .2s ease;
}
.site-nav > a:not(.nav-contact)::after {
    position: absolute;
    right: 0;
    bottom: -6px;
    left: 0;
    height: 1px;
    background: #b7d38e;
    content: "";
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .3s ease;
}
.site-nav > a[aria-current="page"]:not(.nav-contact) {
    color: var(--green);
}
.site-nav > a[aria-current="page"]:not(.nav-contact)::after {
    transform: scaleX(1);
}
@media (hover: hover) {
    .site-nav > a:not(.nav-contact):hover,
    .site-nav > a:not(.nav-contact):focus-visible {
        color: var(--green);
    }

    .site-nav > a:not(.nav-contact):hover::after,
    .site-nav > a:not(.nav-contact):focus-visible::after {
        transform: scaleX(1);
    }
}
.nav-contact {
    border: 1px solid #bcd491;
    color: var(--green);
    padding: 8px 20px;
    background: linear-gradient(var(--green), var(--green)) center / 0 100% no-repeat;
    transition: background-size .4s ease-in-out, color .25s ease;
}

.nav-contact__icon {
    display: none;
}
@media (hover: hover) {
    .nav-contact:hover,
    .nav-contact:focus-visible {
        color: #fff;
        background-size: 100% 100%;
    }
}
@media (min-width:768px) and (max-width:1100px) {
    .nav-contact {
        border: 0;
        color: var(--ink);
    }
}
@media(max-width:767px) {
    .nav-contact {
        border: 0;
        color: var(--ink);
    }
}
.menu-button {
    display: none;
}
.site-nav__mobile,
.mobile-site-link,
.mobile-menu-copyright {
    display: none;
}
.footer .logo {
    width: 168px;
}

@media (min-width:900px) and (max-width:1279px) {
    .site-header {
        height: 80px;
    }

    .site-header .logo {
        width: 200px;
    }

    .site-nav {
        gap: 18px;
        font-size: 1.4rem;
    }

    .nav-contact {
        padding: 7px 14px;
    }
}

@media (min-width:768px) and (max-width:1100px) {
    body.is-menu-open {
        overflow: hidden;
    }

    .site-header {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 10;
        width: 100%;
        height: 70px;
        padding: 0 28px;
        background: #fff;
    }

    .site-header.is-menu-open {
        background: #f5f5f3;
    }

    .site-header.is-scrolled {
        box-shadow: 0 3px 10px rgb(0 0 0 / 8%);
    }

    .logo {
        width: 200px;
    }

    .menu-button {
        position: relative;
        z-index: 6;
        display: block;
        width: 44px;
        height: 28px;
    }

    .menu-button span:not(.sr-only) {
        position: absolute;
        right: 0;
        left: 0;
        display: block;
        height: 2px;
        margin: 0;
        background: #333;
        transition: transform .2s, opacity .2s;
    }

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

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

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

    .menu-button.is-open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }

    .menu-button.is-open span:nth-child(2) { opacity: 0; }

    .menu-button.is-open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

    .site-nav {
        position: fixed;
        top: 70px;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 5;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(5, auto) auto minmax(0, 1fr);
        align-content: start;
        column-gap: 28px;
        overflow-y: auto;
        padding: 28px 28px max(28px, env(safe-area-inset-bottom));
        background: #f5f5f3;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .18s ease-out, visibility 0s linear .18s;
    }

    .site-nav.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
    }

    .site-nav a {
        display: flex;
        align-items: flex-start;
        min-height: 40px;
        padding: 0 0 18px;
        border-bottom: 1px solid var(--border-soft);
        font-size: 1.6rem;
        line-height: 1.4;
        letter-spacing: .05em;
    }

    .site-nav a:nth-child(1) { grid-column: 1; grid-row: 1; }

    .site-nav a:nth-child(2) { grid-column: 1; grid-row: 2; }

    .site-nav a:nth-child(3) { grid-column: 1; grid-row: 3; }

    .site-nav a:nth-child(4) { grid-column: 1; grid-row: 4; }

    .site-nav a:nth-child(5) { grid-column: 1; grid-row: 5; border-bottom: 1px solid var(--border-soft); }

    .site-nav a:nth-child(6) { grid-column: 2; grid-row: 1; }

    .site-nav a:nth-child(7) { grid-column: 2; grid-row: 2; }

    .site-nav a:nth-child(8) { grid-column: 2; grid-row: 3; }

    .site-nav a:nth-child(9) { grid-column: 2; grid-row: 4; }

    .site-nav a:nth-child(10) { grid-column: 2; grid-row: 5; border-bottom: 0; }

    .site-nav__mobile,
    .mobile-site-link,
    .mobile-menu-copyright {
        display: flex;
    }

    .site-nav .mobile-site-link {
        display: grid;
        grid-column: 1 / -1;
        grid-row: 6;
        align-content: center;
        justify-items: start;
        padding: 10px 20px;
        border: 0;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 4px 12px rgb(0 0 0 / 8%);
        color: var(--ink);
    }

    .mobile-site-link__content {
        display: flex;
        flex-direction: column;
        width: max-content;
        padding: 10px 0 10px 15px;
        border-left: 3px solid #76AB30;
        color: var(--ink);
    }

    .mobile-site-link__content > span {
        color: #76AB30;
        font-size: 1.4rem;
        font-weight: 700;
    }

    .mobile-site-link__content strong {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 8px;
        font-size: 1.6rem;
        font-weight: 700;
    }

    .mobile-site-link b {
        font-size: 1.8rem;
        line-height: 1;
    }

    .mobile-menu-copyright {
        grid-column: 1 / -1;
        grid-row: 7;
        align-self: end;
        justify-content: center;
        width: 200px;
        margin-top: 0;
        padding-top: 24px;
        border-top: 1px solid var(--border-soft);
        font-size: 1.2rem;
    }
}

@media(max-width:767px) {
    body.is-menu-open {
        overflow: hidden;
        background: #f5f5f3;
    }

    .section-wrap,
    .site-header,
    .hero {
        width: calc(100% - 40px);
    }

    .site-header {
        height: 55px;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        padding: 0 20px;
        margin: 0 auto;
        background: #fff;
        z-index: 10;
    }

    .site-header.is-menu-open {
        background: #f5f5f3;
        box-shadow: none;
    }

    .site-header.is-scrolled {
        box-shadow: 0 3px 10px rgb(0 0 0 / 8%);
    }

    .logo {
        width: 140px;
    }

    .site-nav {
        position: fixed;
        display: grid;
        top: 55px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #f5f5f3;
        padding: 20px 20px max(20px, env(safe-area-inset-bottom));
        z-index: 5;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(5, auto) auto minmax(0, 1fr);
        column-gap: 20px;
        align-content: start;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .18s ease-out, visibility 0s linear .18s;
    }

    .site-nav.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
    }

    .site-nav a {
        display: flex;
        align-items: flex-start;
        min-height: 40px;
        padding: 0 0 18px;
        border-bottom: 1px solid var(--border-soft);
        font-size: 1.6rem;
        line-height: 1.4;
        letter-spacing: .05em;
    }

    .menu-button {
        position: relative;
        z-index: 6;
        display: block;
        width: 44px;
        height: 28px;
    }

    .menu-button span:not(.sr-only) {
        position: absolute;
        right: 0;
        left: 0;
        height: 2px;
        background: #333;
        display: block;
        margin: 0;
        transition: transform .2s, opacity .2s;
    }

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

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

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

    .menu-button.is-open span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .menu-button.is-open span:nth-child(2) {
        opacity: 0;
    }

    .menu-button.is-open span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    .site-nav a:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .site-nav a:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }

    .site-nav a:nth-child(3) {
        grid-column: 1;
        grid-row: 3;
    }

    .site-nav a:nth-child(4) {
        grid-column: 1;
        grid-row: 4;
    }

    .site-nav a:nth-child(5) {
        grid-column: 1;
        grid-row: 5;
        border-bottom: 0;
    }

    .site-nav a:nth-child(6) {
        grid-column: 2;
        grid-row: 1;
    }

    .site-nav a:nth-child(7) {
        grid-column: 2;
        grid-row: 2;
    }

    .site-nav a:nth-child(8) {
        grid-column: 2;
        grid-row: 3;
    }

    .site-nav a:nth-child(9) {
        grid-column: 2;
        grid-row: 4;
    }

    .site-nav a:nth-child(10) {
        grid-column: 2;
        grid-row: 5;
        border-bottom: 0;
    }

    .site-nav__mobile,
    .mobile-site-link,
    .mobile-menu-copyright {
        display: flex;
    }

    .site-nav .mobile-site-link {
        display: grid;
        grid-column: 1 / -1;
        grid-row: 6;
        align-content: center;
        justify-items: start;
        padding: 10px 20px;
        border: 0;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 4px 12px rgb(0 0 0 / 8%);
        color: var(--ink);
    }

    .mobile-site-link__content {
        display: flex;
        flex-direction: column;
        width: max-content;
        margin-left: 0;
        padding: 10px 0 10px 15px;
        border-radius: 3px;
        border-left: 3px solid #76AB30;
        color: var(--ink);
    }

    .mobile-site-link__content>span {
        color: #76AB30;
        font-size: 1.4rem;
        font-weight: 700;
    }

    .mobile-site-link__content strong {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 8px;
        font-size: 1.6rem;
        font-weight: 700;
        color: var(--ink);
    }

    .mobile-site-link b {
        font-size: 1.8rem;
        line-height: 1;
    }

    .mobile-menu-copyright {
        grid-column: 1 / -1;
        grid-row: 7;
        align-self: end;
        justify-content: center;
        margin-top: 0;
        padding-top: 24px;
        border-top: 1px solid var(--border-soft);
        font-size: 1.2rem;
        font-weight: 400;
    }

    .footer .logo {
        width: 140px;
    }
}

/* ===============================================
 * ファーストビュー
 * =============================================== */

.hero {
    position: relative;
    /* top: 70px のキービジュアル（約592px高）が収まる高さを確保 */
    min-height: 662px;
    width: min(1200px, calc(100% - 56px));
    margin: auto;
    display: flex;
    align-items: flex-start;
    padding-top: 28px;
    margin-bottom: 0;
}
.hero__content {
    position: relative;
    z-index: 1;
    width: 55%;
}
.hero h1 {
    font-family: "Noto Serif JP", serif;
    font-size: 7rem;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: .03em;
}
.hero h1 span {
    color: var(--green);
}
.hero__lead {
    font-size: 2.7rem;
    font-weight: 500;
    line-height: 1.65;
    margin-top: 35px;
    letter-spacing: .05em;
}
.hero__text {
    font-size: 1.8rem;
    line-height: 2;
    margin-top: 20px;
    margin-bottom: 50px;
    font-weight: 500;
    max-width: 650px;
}
.hero__image {
    position: absolute;
    right: 20px;
    top: 70px;
    width: 480px;
    z-index: 0;
}
.hero__image img {
    width: 100%;
}

@media (min-width:1280px) and (max-height:800px) {
    .hero {
        min-height: 650px;
        padding-top: 20px;
    }

    .hero__image {
        top: 40px;
        width: 480px;
    }
}

@media (min-width:768px) and (max-width:1279px) {
    .hero {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
        column-gap: clamp(24px, 3vw, 40px);
        align-items: start;
        min-height: 0;
        padding-top: 0;
    }

    .hero__content {
        width: auto;
    }

    .hero h1 {
        font-size: clamp(6rem, 7vw, 7rem);
        white-space: nowrap;
    }

    .hero__lead {
        font-size: clamp(2.2rem, 2.7vw, 2.7rem);
        margin-top: clamp(20px, 2.7vw, 35px);
    }

    .hero__text {
        font-size: clamp(1.6rem, 1.8vw, 1.8rem);
        margin-top: clamp(14px, 1.6vw, 20px);
    }

    .hero__image {
        position: static;
        width: 100%;
        margin-top: 70px;
    }
}

@media(max-width:767px) {
    .hero {
        padding-top: 17px;
        min-height: 0;
        display: block;
    }

    .hero__content {
        width: 100%;
    }

    .hero h1 {
        font-size: 3.8rem;
    }

    .hero__lead {
        font-size: 2.2rem;
        margin-top: 17px;
    }

    .hero__text {
        font-size: 1.6rem;
        line-height: 1.85;
        margin-top: 14px;
        margin-bottom: 0;
        width: 100%;
    }

    .hero__image {
        position: static;
        width: 100%;
        margin-top: 30px;
    }
}

/* ===============================================
 * NEWS
 * =============================================== */

.text-link b,
.view-all b,
.service-grid b {
    font-size: 1.9rem;
    font-weight: 400;
    line-height: 1;
}
.news {
    background: var(--bg-soft);
    width: 100%;
    margin-top: 80px;
}
.news__inner {
    min-height: 185px;
    position: relative;
    padding: 60px 0 90px;
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 40px;
    align-items: start;
}
.news__list {
    border-top: 1px solid var(--line);
    width: 820px;
}
.news__list>a:not(.view-all) {
    border-bottom: 1px solid var(--line);
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) auto;
    column-gap: 30px;
    align-items: center;
    font-size: 1.6rem;
    min-height: 70px;
    padding: 20px;
    transition: background-color .2s ease, padding .2s ease;
}
.news__list > a:not(.view-all) span,
.news__list > a:not(.view-all) b {
    transition: color .2s ease, transform .2s ease;
}
@media (hover: hover) {
    .news__list > a:not(.view-all):hover {
        background: var(--pale);
        padding-right: 14px;
        padding-left: 26px;
    }

    .news__list > a:not(.view-all):hover span {
        color: var(--green);
    }

    .news__list > a:not(.view-all):hover b {
        transform: translateX(4px);
    }
}
.news time {
    color: #999;
    font-size: 1.6rem;
}
.news em {
    font-size: 1.3rem;
    color: var(--green);
    font-style: normal;
    border: 1px solid #bdd593;
    text-align: center;
    width: max-content;
    padding: 1px 6px;
}
.news b {
    font-size: 1.6rem;
    font-weight: 400;
}
.view-all {
    position: absolute;
    right: 0;
    bottom: 38px;
    font-size: 1.6rem;
    font-weight: 700;
    border-bottom: 1px solid #777;
    padding: 0 0 4px;
    display: flex;
    gap: 19px;
    align-items: center;
}
.news__list .view-all {
    position: absolute;
    right: 0;
    bottom: 80px;
    margin: 0;
}
.text-link b,
.view-all b {
    position: relative;
    width: 38px;
    height: 1px;
    background: currentColor;
    font-size: 0;
    transition: transform .2s ease;
}
.text-link b::after,
.view-all b::after,
.service-grid b::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 12px;
    height: 12px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}
.text-link b::after,
.view-all b::after {
    right: 2.5px;
}
.note__list a:not(.view-all) {
    display: flex;
    gap: 30px;
    align-items: center;
    border-bottom: 1px dashed var(--line);
    min-height: 80px;
    padding: 20px 12px;
    font-size: 1.6rem;
    font-weight: 600;
    transition: background-color .2s ease;
}
.note__list a:not(.view-all) b {
    flex: 0 0 38px;
    margin-left: auto;
    font-size: 2rem;
    font-weight: 400;
    transition: transform .2s ease;
}
.note__list a:not(.view-all) span {
    flex: 1 1 auto;
    transition: color .2s ease;
}
@media (hover: hover) {
    .note__list a:not(.view-all):hover {
        background: var(--pale);
    }

    .note__list a:not(.view-all):hover span {
        color: var(--green);
    }

    .note__list a:not(.view-all):hover b {
        transform: translateX(4px);
    }
}
.note__list .view-all {
    bottom: 80px;
}
.note__list .view-all {
    position: relative;
    right: auto;
    bottom: auto;
    display: flex;
    width: max-content;
    margin: 30px 0 0 auto;
}

@media(max-width:767px) {
    .button b,
    .text-link b,
    .view-all b {
        font-size: 0;
    }

    .news {
        margin-top: 40px;
    }

    .news__inner {
        min-height: 0;
        padding: 50px 0;
        display: block;
    }

    .news__list {
        width: 100%;
        margin-top: 20px;
    }

    .news__list>a:not(.view-all) {
        grid-template-columns: 1fr auto;
        grid-template-areas:
        "date arrow"
        "title arrow";
        column-gap: 20px;
        min-height: 0;
        padding: 15px 0;
    }

    .news time {
        grid-area: date;
        font-size: 1.4rem;
    }

    .news__list>a:not(.view-all) span {
        grid-area: title;
        font-size: 1.6rem;
    }

    .news__list>a:not(.view-all) b {
        grid-area: arrow;
        font-size: 2rem;
    }

    .news .view-all b {
        font-size: 0;
    }

    .news__list .view-all {
        position: relative;
        right: auto;
        bottom: auto;
        width: max-content;
        margin: 30px 0 0 auto;
        font-size: 1.6rem;
        gap: 13px;
    }

    .note__list a:not(.view-all) {
        gap: 12px;
        min-height: 58px;
        padding: 16px 12px;
        font-size: 1.4rem;
    }

    .note__list a:not(.view-all) b {
        flex-basis: 20px;
        font-size: 1.6rem;
    }

    .note__list .view-all {
        bottom: auto;
    }
}

@media (min-width:768px) and (max-width:1023px) {
    .news__inner {
        grid-template-columns: 120px minmax(0, 1fr);
        gap: 24px;
    }

    .news__list {
        width: 100%;
        min-width: 0;
    }
}

@media (min-width:1024px) and (max-width:1075px) {
    .news__inner {
        grid-template-columns: 120px minmax(0, 1fr);
        gap: 24px;
    }
}

@media (min-width:768px) {
    .news__inner {
        padding-bottom: 143px;
    }
}

/* ===============================================
 * ABOUT・SERVICE
 * =============================================== */

.about-service {
    display: grid;
    grid-template-columns: 42% 58%;
    padding-top: 59px;
    padding-bottom: 54px;
}
.about {
    padding-right: 56px;
}
.about>p,
.manga p,
.manga-movie p,
.process__inner>p,
.note p {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 2.2;
    margin-top: 30px;
}
.about img {
    margin-top: 24px;
    width: 100%;
}
.about .text-link {
    margin-left: auto;
}
.services {
    border-left: 1px solid var(--border-soft);
    padding-left: 35px;
}
.service-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 15px;
    position: relative;
}
.service-grid::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--border-soft);
}
.service-grid a {
    min-height: 170px;
    border-top: 1px solid var(--border-soft);
    padding: 11px 9px 12px 0;
    position: relative;
    transition: background-color .25s ease, border-top-color .25s ease;
}
.service-grid a:nth-child(odd) {
    padding-left: 20px;
    padding-right: 25px;
}
.service-grid a:nth-child(even) {
    padding-left: 30px;
}
.service-grid strong {
    color: var(--green);
    font-size: 3.2rem;
    font-family: "Noto Serif JP", serif;
    display: block;
}
.service-grid img {
    width: auto;
    height: 44px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    margin: 0 9px 4px 0;
}
.service-grid h3 {
    display: inline;
    font-family: "Noto Serif JP", serif;
    font-size: 2.4rem;
    font-weight: 700;
    transition: color .25s ease;
}
.service-grid p {
    font-size: 1.6rem;
    line-height: 2;
    margin-top: 20px;
    min-height: 6em;
    margin-bottom: 25px;
    font-weight: 500;
}
.service-grid b {
    position: absolute;
    right: 8px;
    bottom: 13px;
    width: 38px;
    height: 1px;
    background: currentColor;
    font-size: 0;
    font-weight: 400;
    transition: transform .25s ease;
}
@media (hover: hover) {
    .service-grid a:hover {
        background: var(--pale);
        border-top-color: var(--green);
    }

    .service-grid a:hover h3 {
        color: var(--green);
    }

    .service-grid a:hover b {
        transform: translateX(5px);
    }
}
.service-grid a:nth-child(odd) b {
    right: 30px;
}
.service-grid a:nth-child(even) b {
    right: 20px;
}
.service-grid a:nth-child(-n+2) b {
    bottom: 30px;
}
@media (min-width:1024px) {
    .service-grid a:nth-child(n + 3) b {
        bottom: 30px;
    }
}

@media(max-width:767px) {
    .about-service {
        display: block;
        padding-top: 35px;
        padding-bottom: 31px;
    }

    .about {
        padding: 0;
    }

    .about>p,
    .manga p,
    .manga-movie p,
    .process__inner>p,
    .note p {
        font-size: 1.6rem;
        margin-top: 13px;
        line-height: 1.9;
    }

    .about img {
        margin-top: 15px;
    }

    .about .text-link {
        margin-top: 30px;
    }

    .services {
        position: relative;
        border: 0;
        margin-top: 50px;
        padding: 50px 0 0;
    }

    .services::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 100vw;
        height: 1px;
        background: var(--border-soft);
        transform: translateX(-50%);
    }

    .service-grid {
        margin-top: 11px;
    }

    .service-grid a {
        min-height: 137px;
        padding-top: 8px;
    }

    .service-grid a:nth-child(odd) {
        padding-right: 14px;
    }

    .service-grid a:nth-child(even) {
        padding-left: 30px;
    }

    .service-grid strong {
        font-size: 1.6rem;
    }

    .service-grid img {
        width: auto;
        height: 44px;
        margin-right: 5px;
    }

    .service-grid h3 {
        font-size: 1.6rem;
    }

    .service-grid p {
        margin-top: 5px;
        min-height: 0;
        margin-bottom: 30px;
        line-height: 1.8;
    }

    .service-grid b {
        right: 2px;
        bottom: 7px;
        font-size: 0;
    }
}

@media (max-width:1113px) {
    .about .for-pc {
        display: none;
    }
}

@media (max-width:1023px) {
    .about-service {
        display: block;
        padding-bottom: 0;
    }

    .about {
        padding-right: 0;
    }

    .services {
        position: relative;
        border: 0;
        margin-top: 50px;
        padding: 50px 0 0;
    }

    .services::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 100vw;
        height: 1px;
        background: var(--border-soft);
        transform: translateX(-50%);
    }

    .service-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 18px;
    }

    .service-grid::before {
        display: none;
    }

    .service-grid a,
    .service-grid a:nth-child(odd),
    .service-grid a:nth-child(even) {
        display: grid;
        grid-template-columns: max-content 28px minmax(0,1fr) 20px;
        grid-template-areas:
        "number icon title arrow"
        "text text text text";
        align-items: center;
        column-gap: 12px;
        row-gap: 18px;
        min-height: 0;
        height: 100%;
        padding: 20px;
        border: 1px solid var(--border-soft);
    }

    .service-grid strong {
        grid-area: number;
        color: var(--green);
        font-family: "Noto Serif JP", serif;
        font-size: 2.2rem;
        line-height: 1;
    }

    .service-grid img {
        grid-area: icon;
        width: 28px;
        height: 28px;
        margin: 0;
        object-fit: contain;
    }

    .service-grid h3 {
        grid-area: title;
        display: block;
        font-family: "Noto Serif JP", serif;
        font-size: 2rem;
        line-height: 1.2;
    }

    .service-grid p {
        grid-area: text;
        min-height: 0;
        margin: 0;
        line-height: 1.8;
    }

    .service-grid .for-pc {
        display: none;
    }

    .service-grid b,
    .service-grid a:nth-child(odd) b,
    .service-grid a:nth-child(-n+2) b {
        grid-area: arrow;
        position: relative;
        right: auto;
        bottom: auto;
        justify-self: end;
        width: 20px;
        height: 1px;
    }

    .service-grid b::after {
        width: 10px;
        height: 10px;
        border-width: 1px;
    }
}

@media (min-width:768px) and (max-width:1023px) {
    .service-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

/* ===============================================
 * MANGA
 * =============================================== */

.manga {
    /* background: var(--pale); */
    background: var(--bg-soft);
    padding: 53px 0 80px;
}
.manga__inner {
    display: grid;
    grid-template-columns: calc(30% - 24px) calc(70% - 24px);
    align-items: start;
    column-gap: 48px;
}
.manga__content {
    grid-column: 1;
    grid-row: 1;
}
.manga__actions {
    grid-column: 1;
    grid-row: 2;
}
.manga .section-title,
.manga-movie .section-title {
    margin-top: 18px;
}
.manga .button+.button {
    margin-top: 9px;
}
.manga__inner>img {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 100%;
    margin-top: 46px;
    box-shadow: 0 5px 14px rgb(0 0 0 / 12%);
}
.manga-divider {
    height: 0;
    border-top: 1px solid var(--border-soft);
}
.manga-movie {
    /* background: var(--pale); */
    background: var(--bg-soft);
    padding: 80px 0 52px;
}
.manga-movie__inner {
    display: grid;
    grid-template-columns: 42% 58%;
    align-items: start;
}
.manga-movie__content {
    grid-column: 1;
    grid-row: 1;
}
.manga-movie__actions {
    grid-column: 1;
    grid-row: 2;
}
.movie {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 100%;
    margin-top: 46px;
}
.movie__thumbnail {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    box-sizing: border-box;
    border: 5px solid #fff;
    background: #fff;
    box-shadow: 0 5px 14px rgb(0 0 0 / 12%);
    overflow: hidden;
}
.movie__thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}
@media (hover: hover) {
    .movie__thumbnail:hover img {
        transform: scale(1.02);
    }
}
.movie__thumbnail[hidden] {
    display: none;
}
.movie__embed {
    aspect-ratio: 16 / 9;
    box-sizing: border-box;
    border: 1px solid #B2B2B2;
}
.movie__embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (min-width:768px) and (max-width:1024px) {
    .manga__inner,
    .manga-movie__inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .manga__content,
    .manga__actions,
    .manga__inner > img,
    .manga-movie__content,
    .manga-movie__actions,
    .movie {
        grid-column: 1;
        grid-row: auto;
    }

    .manga__content,
    .manga-movie__content {
        order: 1;
    }

    .manga__inner > img,
    .movie {
        order: 2;
        width: min(100%, 640px);
        margin-top: 0;
        justify-self: center;
    }

    .manga__actions,
    .manga-movie__actions {
        order: 3;
        margin-top: 6px;
    }

    .manga__actions {
        display: flex;
        justify-content: center;
        gap: 16px;
    }

    .manga__actions .button,
    .manga .button + .button {
        margin-top: 0;
    }

    .manga-movie__actions {
        display: flex;
        justify-content: center;
    }

    .manga-movie__actions .button {
        margin-top: 0;
    }
}

@media(max-width:767px) {
    .manga__inner {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .manga__content,
    .manga__actions,
    .manga__inner>img {
        grid-column: 1;
        grid-row: auto;
    }

    .manga__content {
        order: 1;
    }

    .manga__inner>img {
        order: 2;
    }

    .manga__actions {
        order: 3;
    }

    .manga__inner>img {
        margin-top: 0;
    }

    .manga .section-title,
    .manga-movie .section-title {
        margin-top: 14px;
    }

    .manga .button+.button {
        margin-top: 7px;
    }

    .manga-movie {
        padding: 80px 0 31px;
    }

    .manga-movie__inner {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .manga-movie__content,
    .manga-movie__actions,
    .movie {
        grid-column: 1;
        grid-row: auto;
    }

    .manga-movie__content {
        order: 1;
    }

    .movie {
        order: 2;
    }

    .manga-movie__actions {
        order: 3;
    }

    .movie {
        margin-top: 0;
    }
}

/* ===============================================
 * PROCESS
 * =============================================== */

.process {
    padding-top: 58px;
    padding-bottom: 58px;
}
.process__inner>p {
    max-width: 530px;
}
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px;
    margin-top: 28px;
}
.process-grid article {
    border: 1px solid var(--line);
    border-radius: 5px;
    min-height: 204px;
    text-align: center;
    padding: 20px;
    position: relative;
}
.process-grid article:not(:last-child):after {
    content: "";
    position: absolute;
    right: -45px;
    top: 50%;
    width: 40px;
    height: 1px;
    z-index: 1;
    background: #76AB30;
    transform: translateY(-50%);
}
.process-grid article:not(:last-child):before {
    content: "";
    position: absolute;
    right: -45px;
    top: 50%;
    z-index: 1;
    width: 12px;
    height: 12px;
    border-top: 1px solid #76AB30;
    border-right: 1px solid #76AB30;
    transform: translateY(-50%) rotate(45deg);
}
.process-grid img {
    height: 80px;
    width: auto;
    margin: 0 auto 30px;
}
.process-grid h3 {
    font-size: 2.2rem;
}
.process-grid h3::after {
    content: "";
    display: block;
    width: 64px;
    height: 2px;
    margin: 16px auto;
    background: #76AB30;
}
.process-grid p {
    font-size: 1.6rem;
    line-height: 1.8;
    margin-top: 0;
    text-align: left;
}
.process__link {
    margin-left: auto;
    margin-top: 18px;
    width: max-content;
}



@media (max-width:1024px) {
    .process {
        position: relative;
    }

    .process::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 50%;
        width: 100vw;
        height: 1px;
        background: var(--border-soft);
        transform: translateX(-50%);
    }

    .process-grid {
        grid-template-columns: minmax(0, 680px);
        justify-content: center;
        row-gap: 35px;
        margin-top: 32px;
    }

    .process-grid article {
        display: grid;
        grid-template-columns: 60px minmax(0, 1fr);
        align-items: center;
        column-gap: 20px;
        min-height: 0;
        padding: 20px 16px;
        border: 1px solid var(--border-soft);
        text-align: left;
    }

    .process-grid article:not(:last-child)::after {
        display: block;
        top: auto;
        right: auto;
        bottom: -28px;
        left: 50%;
        width: 1px;
        height: 20px;
        background: #76AB30;
        transform: translateX(-50%);
    }

    .process-grid article:not(:last-child)::before {
        display: block;
        top: auto;
        right: auto;
        bottom: -28px;
        left: 50%;
        width: 10px;
        height: 10px;
        border: solid #76AB30;
        border-width: 0 1px 1px 0;
        transform: translateX(-50%) rotate(45deg);
    }

    .process-grid img {
        width: 60px;
        height: 60px;
        margin: 0;
        object-fit: contain;
    }

    .process-grid h3 {
        font-size: 1.8rem;
        font-weight: 700;
        line-height: 1.5;
    }

    .process-grid h3::after {
        display: none;
    }

    .process-grid p {
        grid-column: 1 / -1;
        margin-top: 10px;
        padding-top: 20px;
        border-top: 2px solid #76AB30;
        font-size: 1.5rem;
        line-height: 1.5;
    }

    .process__link {
        margin-top: 24px;
    }
}

@media (max-width:767px) {
    .process-grid img {
        width: auto;
        height: 33px;
    }
}

/* ===============================================
 * NOTE
 * =============================================== */

.note em {
    font-size: 1.2rem;
    color: var(--green);
    font-style: normal;
    border: 1px solid #bdd593;
    text-align: center;
    width: max-content;
    padding: 1px 6px;
    border-radius: 3px;
}
.note {
    border-top: 1px solid var(--border-soft);
    padding-top: 56px;
    padding-bottom: 136px;
    display: grid;
    grid-template-columns: 28% 72%;
    position: relative;
}
.note .section-title {
    margin-top: 19px;
}
.note__list {
    border-top: 1px dashed var(--line);
}
.note__list em {
    grid-column: 1;
    grid-row: 1;
}
.note__list span {
    grid-column: 1;
    grid-row: 2;
}

@media (max-width:1024px) {
    .note .for-pc {
        display: none;
    }

    .note {
        padding-top: 35px;
        padding-bottom: 104px;
        display: block;
        border-top: 0;
    }

    .note .section-title {
        margin-top: 14px;
    }

    .note__list {
        margin-top: 17px;
    }

    .note em {
        font-size: 1.2rem;
        padding: 0 3px;
    }
}

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

.contact {
    background: var(--pale);
    text-align: center;
    padding: 55px 0 59px;
}
.contact .section-label {
    justify-content: center;
}
.contact .section-title {
    font-family: "Noto Serif JP", serif;
    margin-top: 19px;
}
.contact p {
    font-size: 1.6rem;
    font-weight: 500;
    margin-top: 10px;
}
.contact .button {
    margin: 21px auto 0;
    width: max-content;
    white-space: nowrap;
    justify-content: flex-start;
    gap: 20px;
}

@media(max-width:767px) {
    .contact {
        padding: 35px 0;
    }

    .contact .section-title {
        margin-top: 14px;
    }

    .contact p {
        font-size: 1.6rem;
        margin-top: 8px;
    }

    .contact .button {
        width: max-content;
        margin-top: 16px;
    }
}

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

.footer {
    padding-top: 43px;
}
.footer__top {
    display: flex;
    justify-content: space-between;
    padding-bottom: 43px;
}
.footer p {
    font-size: 1.4rem;
    line-height: 1.8;
    margin-top: 7px;
}
.footer__nav {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.footer__links {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 5px 40px;
    align-content: start;
}
@media (min-width:841px) and (hover: hover) {
    .footer__links > a {
        position: relative;
        transition: color .2s ease;
    }

    .footer__links > a::after {
        position: absolute;
        right: 0;
        bottom: -1px;
        left: 0;
        height: 1px;
        background: currentColor;
        content: "";
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .2s ease;
    }

    .footer__links > a:hover {
        color: var(--green);
    }

    .footer__links > a:hover::after {
        transform: scaleX(1);
    }

    .footer__site-link {
        position: relative;
        transition: color .2s ease;
    }

    .footer__site-link::after {
        position: absolute;
        right: 0;
        bottom: -4px;
        left: 0;
        height: 1px;
        background: currentColor;
        content: "";
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .2s ease;
    }

    .footer__site-link:hover {
        color: var(--green);
    }

    .footer__site-link:hover::after {
        transform: scaleX(1);
    }
}
.footer__site-list {
    display: flex;
    gap: 40px;
}
.footer__site {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 24px;
    line-height: 1.2;
    text-decoration: none;
}

@media (min-width:841px) {
    .footer__site {
        width: max-content;
    }
}

.footer__site-label {
    color: #76AB30;
    font-size: 1.4rem;
    font-weight: 700;
}
.footer__site-link {
    color: inherit;
    text-decoration: none;
}
.footer__site b {
    margin-left: 3px;
    font-size: 1.8rem;
    line-height: 1;
}
.footer__bottom {
    border-top: 1px solid var(--border-soft);
    padding: 40px 0 60px;
    font-size: 1.2rem;
}

.page-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 20;
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 1px solid var(--green);
    border-radius: 50%;
    background: rgb(255 255 255 / 94%);
    color: var(--green);
    font-size: 2.4rem;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease, background-color .2s ease, color .2s ease;
}
.page-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
@media (hover: hover) {
    .page-top:hover,
    .page-top:focus-visible {
        background: var(--green);
        color: #fff;
    }
}
@media (max-width:767px) {
    .page-top {
        right: 16px;
        bottom: 16px;
        width: 46px;
        height: 46px;
        font-size: 2.1rem;
    }
}

@media (max-width:840px) {
    .footer {
        padding-top: 30px;
    }

    .footer__top {
        display: block;
    }

    .footer p {
        font-size: 1.4rem;
        margin-top: 5px;
    }

    .footer__nav {
        margin-top: 20px;
        font-size: 1.4rem;
    }

    .footer__links {
        grid-template-columns: repeat(2, 1fr);
        gap: 0 20px;
    }

    .footer__links a {
        padding: 10px 0;
        border-bottom: 1px solid #eee;
    }

    .footer__site-list {
        flex-direction: column;
        gap: 0;
        width: 100%;
        max-width: 520px;
        margin: 30px auto 0;
    }

    .footer__site {
        position: relative;
        width: 100%;
        margin-top: 0;
        gap: 8px;
        padding: 20px 40px 24px 40px;
        border: 1px solid var(--border-soft);
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 4px 12px rgb(0 0 0 / 8%);
    }

    .footer__site + .footer__site {
        margin-top: 16px;
    }

    .footer__site::before {
        position: absolute;
        top: 20px;
        bottom: 20px;
        left: 20px;
        width: 3px;
        border-radius: 1.5px;
        background: #76AB30;
        content: "";
    }

    .footer__site-label {
        font-size: 1.4rem;
    }

    .footer__site-link {
        padding: 0;
        border-bottom: 0;
    }

    .footer__site b {
        margin-left: 5px;
        font-size: 1.4rem;
    }

    .footer__bottom {
        font-size: 1.2rem;
        text-align: center;
        padding: 24px 0;
    }
}

/* ===============================================
 * トップページ リニューアル（静的HTML確認用）
 * =============================================== */

@media (min-width:1101px) {
    .site-header {
        height: 140px;
        width: min(1200px, calc(100% - 56px));
    }

    .site-header .logo {
        flex: 0 0 260px;
        width: 260px;
    }

    .site-nav {
        margin-left: auto;
        gap: clamp(20px, 2vw, 38px);
        font-size: inherit;
        letter-spacing: .1em;
    }

    .site-nav > a:not(.nav-contact) {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        text-align: center;
    }

    .site-nav > a:not(.nav-contact)::after {
        display: none;
    }

    .nav__en {
        display: block;
        width: 100%;
        padding-bottom: 4px;
        border-bottom: 1px solid var(--green);
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1;
    }

    .nav__jp {
        color: #777;
        font-size: 1.2rem;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 1.2;
    }

    .site-nav > a:not(.nav-contact):hover .nav__jp,
    .site-nav > a:not(.nav-contact):focus-visible .nav__jp {
        color: var(--green);
    }

    .site-nav > a[aria-current="page"] .nav__jp {
        color: var(--green);
    }

    .nav-contact {
        padding: 15px 30px;
        font-size: 1.6rem;
        letter-spacing: .1em;
    }

    .nav-contact .nav__en {
        width: auto;
        padding-bottom: 0;
        border-bottom: 0;
        font-size: inherit;
        line-height: inherit;
    }

    .nav-contact .nav__jp {
        display: none;
    }

    .site-nav__mobile,
    .site-nav .mobile-site-link,
    .site-nav .mobile-menu-copyright {
        display: none !important;
    }
}

.hero__eyebrow {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: .1em;
}

@media (min-width:1280px) {
    .hero {
        width: 100%;
        min-height: 660px;
        padding-top: 0;
    }

    .hero__content {
        width: 67%;
        min-height: 660px;
        padding: 60px clamp(40px, 6vw, 160px) 60px max(28px, calc((100vw - 1200px) / 2));
        background: linear-gradient(90deg, #fff 0%, #fff 65%, rgb(255 255 255 / 0%) 100%);
    }

    .hero__eyebrow {
        font-size: 3rem;
        line-height: 1.25;
    }

    .hero h1 {
        margin-top: 10px;
        font-family: "Noto Serif JP", serif;
        font-size: 4.8rem;
        font-weight: 700;
        line-height: 1.55;
        letter-spacing: .05em;
        white-space: nowrap;
    }

    .hero__lead {
        margin-top: 34px;
        font-size: 2.4rem;
        font-weight: 700;
        line-height: 1.6;
        letter-spacing: .03em;
    }

    .hero__text {
        max-width: none;
        margin-top: 28px;
        margin-bottom: 34px;
        font-size: 2.4rem;
        font-weight: 500;
        line-height: 1.8;
    }

    .hero__image {
        top: 0;
        right: 0;
        width: 65%;
        height: 660px;
    }

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

@media (min-width:768px) and (max-width:1279px) {
    .hero {
        position: relative;
        width: 100%;
        display: flex;
        align-items: flex-start;
        min-height: 500px;
        padding-top: 0;
    }

    .hero__content {
        position: relative;
        z-index: 1;
        box-sizing: border-box;
        width: 100%;
        min-height: 500px;
        padding: 52px clamp(28px, 6vw, 72px) 24px max(28px, calc((100vw - 1200px) / 2));
        background: linear-gradient(90deg, #fff 0%, #fff 64%, rgb(255 255 255 / 0%) 100%);
    }

    .hero__eyebrow {
        font-size: clamp(2rem, 2.7vw, 3.2rem);
    }

    .hero h1 {
        font-size: clamp(3.6rem, 4.5vw, 4.8rem);
        line-height: 1.45;
        white-space: nowrap;
    }

    .hero__text {
        margin-top: 24px;
        margin-bottom: 28px;
        font-size: clamp(1.7rem, 2vw, 2rem);
        line-height: 1.8;
    }

    .hero__image {
        position: absolute;
        top: 0;
        right: 0;
        width: 65%;
        height: 500px;
        margin-top: 0;
    }

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

@media (min-width:768px) and (max-width:1230px) {
    .news__inner {
        padding-bottom: 60px;
    }

    .news__list .view-all {
        position: relative;
        right: auto;
        bottom: auto;
        width: max-content;
        margin: 30px 0 0 auto;
    }
}

.news {
    margin-top: 0;
}

.footer__links > a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1.25;
}

.footer__links {
    row-gap: 20px;
}

.footer__links > a small {
    color: #666;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0;
}

@media (hover: hover) {
    .footer__links > a:hover small,
    .footer__links > a:focus-visible small {
        color: var(--green);
    }
}

@media (max-width:1100px) {
    .nav__jp {
        display: block;
        margin-top: 8px;
        color: #777;
        font-size: 1.2rem;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 1.2;
    }

    .site-nav > a:nth-child(-n+10):not(.nav-contact) {
        flex-direction: column;
        gap: 0;
    }

    .site-nav > a:not(.nav-contact)::after {
        display: none;
    }

    .site-nav > a[aria-current="page"] .nav__jp {
        color: var(--green);
    }

    .site-nav > a[aria-current="page"] {
        color: var(--green);
    }

    .site-nav {
        grid-template-rows: repeat(4, auto) auto auto auto auto;
        row-gap: 10px;
    }

    .site-nav > a:not(.nav-contact):not(.mobile-site-link) {
        box-sizing: border-box;
        height: 54px;
        min-height: 0;
        padding-bottom: 8px;
    }

    .site-nav a:nth-child(1) { grid-column: 1; grid-row: 1; }
    .site-nav a:nth-child(2) { grid-column: 1; grid-row: 2; }
    .site-nav a:nth-child(3) { grid-column: 1; grid-row: 3; }
    .site-nav a:nth-child(4) { grid-column: 1; grid-row: 4; }
    .site-nav a:nth-child(5) { grid-column: 2; grid-row: 3; border-bottom: 1px solid var(--border-soft); }
    .site-nav a:nth-child(6) { grid-column: 1 / -1; grid-row: 5; }
    .site-nav a:nth-child(7) { grid-column: 2; grid-row: 1; }
    .site-nav a:nth-child(8) { grid-column: 2; grid-row: 2; }
    .site-nav .nav-contact {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        height: 70px;
        min-height: 70px;
        margin-top: 20px;
        padding: 15px 20px;
        border: 0;
        border-radius: 5px;
        background: var(--green);
        color: #fff;
    }
    .site-nav .nav-contact .nav__en { display: none; }
    .site-nav .nav-contact .nav__jp {
        margin: 0;
        color: #fff;
        font-size: 1.8rem;
        font-weight: 700;
    }
    .site-nav > .nav-contact[aria-current="page"] .nav__jp {
        color: #fff;
    }
    .site-nav .nav-contact__icon {
        display: block;
        width: 24px;
        height: auto;
        margin-right: 10px;
        filter: brightness(0) invert(1);
    }
    .site-nav .mobile-site-link {
        box-sizing: border-box;
        height: 70px;
        min-height: 70px;
        padding: 0 20px;
        margin-top: 7px;
        border: 1px solid var(--border-soft);
        border-radius: 5px;
        box-shadow: none;
        align-content: normal;
        align-items: center;
    }

    .site-nav a.mobile-site-link.mobile-site-link--blog {
        grid-column: 1 / -1;
        grid-row: 6;
    }

    .site-nav a.mobile-site-link.mobile-site-link--site {
        grid-column: 1 / -1;
        grid-row: 7;
    }

    .site-nav .mobile-site-link .mobile-site-link__content {
        padding: 0 0 0 15px;
    }

    .site-nav .mobile-site-link .mobile-site-link__content > span,
    .site-nav .mobile-site-link .mobile-site-link__content strong {
        line-height: 1.2;
    }

    .site-nav .mobile-site-link .mobile-site-link__content strong {
        margin-top: 2px;
    }
    .mobile-menu-copyright {
        grid-row: 8;
        align-self: auto;
        width: 100%;
        margin-top: 40px;
        padding-top: 24px;
    }
}

@media (max-width:767px) {
    .hero {
        width: 100%;
        padding-top: 0;
        background:
            linear-gradient(90deg, rgb(255 255 255 / 94%) 0%, rgb(255 255 255 / 68%) 56%, rgb(255 255 255 / 18%) 100%),
            url("../images/top-hero.webp") 68% center / cover no-repeat;
    }

    .hero__content {
        min-height: 480px;
        padding: 56px 16px 24px;
    }

    .hero__eyebrow {
        font-size: 1.6rem;
    }

    .hero__eyebrow,
    .hero h1,
    .hero__text {
        text-shadow:
            -1px -1px 2px rgb(255 255 255 / 95%),
             1px -1px 2px rgb(255 255 255 / 95%),
            -1px  1px 2px rgb(255 255 255 / 95%),
             1px  1px 2px rgb(255 255 255 / 95%),
             0 0 12px rgb(255 255 255 / 90%);
    }

    .hero__image {
        display: none;
    }

    .hero__text br {
        display: none;
    }
}

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

.breadcrumb {
    display: flex;
    gap: 5px;
    padding-top: 32px;
    color: #999;
    font-size: 1.4rem;
    font-weight: 700;
}
.breadcrumb a {
    color: #999;
}
@media (hover: hover) {
    .breadcrumb a {
        transition: color .2s ease;
    }

    .breadcrumb a:hover {
        color: var(--green);
    }
}
.breadcrumb [aria-current] {
    color: var(--green);
}
.about-hero {
    padding-bottom: 105px;
}
.about-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 645px;
    gap: 70px;
    align-items: flex-start;
    padding-top: 51px;
}
.about-hero__eyebrow {
    color: var(--green);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: .08em;
}
.about-hero__title {
    margin-top: 2px;
    font-size: 2.8rem;
    line-height: 1.5;
}
.about-hero__catch {
    margin-top: 24px;
    font-family: "Noto Serif JP", serif;
    font-size: 5.6rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .06em;
}
.about-hero__text,
.about-body-text,
.value-item > p,
.about-support__lead {
    font-size: 1.8rem;
    line-height: 2.2;
}
.about-hero__text {
    max-width: 510px;
    margin-top: 24px;
    font-weight: 500;
}
.about-hero__image {
    position: relative;
    z-index: 0;
}
.about-hero__image::before {
    position: absolute;
    z-index: -1;
    top: auto;
    right: auto;
    bottom: -35px;
    left: -35px;
    width: 610px;
    height: 420px;
    background: #f3f8eb;
    content: "";
}
.about-hero__image img {
    display: block;
    width: 645px;
    height: 448px;
    object-fit: cover;
}
@media (min-width:768px) and (max-width:1279px) {
    .about-hero {
        padding-bottom: 80px;
    }

    .about-hero__grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
        gap: clamp(60px, 6vw, 90px);
    }

    .about-hero__catch {
        font-size: clamp(3.4rem, 4.38vw, 5.6rem);
    }

    .about-hero__text {
        font-size: clamp(1.6rem, 1.41vw, 1.8rem);
    }

    .about-hero__image img {
        width: 100%;
        height: auto;
        aspect-ratio: 645 / 448;
    }

    .about-hero__image {
        align-self: center;
    }

    .about-hero__image::before {
        width: 94%;
        height: 90%;
    }
}
@media (max-width:767px) {
    .breadcrumb {
        padding-top: 24px;
        font-size: 1.2rem;
    }

    .about-hero {
        padding-bottom: 62px;
    }

    .about-hero__grid {
        display: block;
        padding-top: 30px;
    }

    .about-hero__catch {
        margin-top: 18px;
        font-size: 3.4rem;
    }

    .about-hero__text {
        margin-top: 18px;
        font-size: 1.6rem;
    }

    .about-hero__image {
        margin-top: 35px;
    }

    .about-hero__image img {
        width: 100%;
        height: auto;
        aspect-ratio: 645 / 448;
    }

    .about-hero__image::before {
        top: auto;
        right: auto;
        bottom: -12px;
        left: -12px;
        width: 94%;
        height: 90%;
    }
}
.about-philosophy {
    /* background: #f4f8ee; */
    background: var(--bg-soft);
}
.about-philosophy__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 450px;
    gap: 50px;
    align-items: start;
    margin-top: 18px;
}
.about-philosophy__text {
    align-self: start;
}
.about-philosophy__text .section-title {
    margin-top: 0;
}
.about-body-text {
    max-width: 780px;
    margin-top: 33px;
    font-weight: 500;
}
.about-body-text p + p {
    margin-top: 22px;
}
.philosophy-diagram {
    align-self: start;
    width: 450px;
    margin-top: 0;
}
.philosophy-diagram__image {
    display: block;
    width: 100%;
    height: auto;
}
@media (min-width:768px) and (max-width:1279px) {
    .section-label {
        font-size: clamp(2.2rem, 2.19vw, 2.8rem);
    }

    .section-title {
        font-size: clamp(2.8rem, 2.97vw, 3.8rem);
    }

    .card-title {
        font-size: clamp(2.1rem, 2.03vw, 2.6rem);
    }

    .about-philosophy__content {
        grid-template-columns: minmax(0, 1fr) clamp(280px, 35vw, 450px);
        gap: clamp(24px, 4vw, 50px);
    }

    .about-body-text {
        font-size: clamp(1.6rem, 1.41vw, 1.8rem);
    }

    .value-item__number {
        font-size: clamp(2.2rem, 2.19vw, 2.8rem) !important;
    }

    .value-item__icon {
        height: clamp(4.6rem, 4.53vw, 5.8rem);
        margin-left: clamp(1.6rem, 2.34vw, 3rem);
    }

    .about-support__lead {
        font-size: clamp(1.6rem, 1.41vw, 1.8rem);
    }

    .support-cards img {
        height: clamp(2.6rem, 2.34vw, 3rem);
    }

    .support-cards h3 {
        font-size: clamp(1.9rem, 1.88vw, 2.2rem);
    }

    .consultation h3 {
        font-size: clamp(2.1rem, 2.19vw, 2.4rem);
    }

    .consultation > p {
        font-size: clamp(2.2rem, 2.19vw, 2.8rem);
    }

    .consultation li {
        font-size: clamp(1.6rem, 1.56vw, 2rem);
    }

    .philosophy-diagram {
        width: 100%;
    }

}
@media (min-width:768px) and (max-width:899px) {
    .about-philosophy__content {
        display: block;
        margin-top: 18px;
    }

    .philosophy-diagram {
        width: min(100%, 400px);
        margin: 36px auto 0;
    }
}
@media (max-width:767px) {
    .about-philosophy__content {
        display: block;
        margin-top: 14px;
    }

    .about-body-text {
        margin-top: 22px;
        font-size: 1.6rem;
    }

    .philosophy-diagram {
        width: min(100%, 340px);
        margin: 30px auto 0;
    }

}
.value-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 40px;
}
.value-item {
    min-height: 245px;
    padding: 0 30px;
    border-left: 1px solid var(--border-soft);
}
.value-item:first-child {
    border-left: 0;
    padding-left: 0;
}
.value-item:last-child {
    padding-right: 0;
}
.value-item__number {
    display: inline-block;
    color: var(--green);
    font-size: 2.8rem !important;
    font-weight: 900;
    line-height: 1 !important;
    vertical-align: middle;
}
.value-item__icon {
    display: inline-block;
    width: auto;
    height: 58px;
    margin: 0 0 10px 30px;
    vertical-align: middle;
}
.value-item > p:last-child {
    margin-top: 10px;
    line-height: 1.8;
}
@media (min-width:768px) and (max-width:1110px) {
    .value-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }

    .value-item {
        min-height: 0;
        padding: 0 18px;
    }

    .value-item:nth-child(odd) {
        border-left: 0;
        padding-left: 0;
    }

    .value-item:nth-child(even) {
        padding-right: 0;
    }

    .value-item:nth-child(n+3) {
        margin-top: 30px;
        padding-top: 30px;
        position: relative;
    }

    .value-item:nth-child(n+3)::before {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 1px;
        background: var(--border-soft);
        content: "";
    }

    .value-item:nth-child(3)::before {
        right: 18px;
    }

    .value-item:nth-child(4)::before {
        left: 18px;
    }

    .value-item:nth-child(4) {
        border-left: 0;
    }

    .value-item:nth-child(4)::after {
        position: absolute;
        top: 30px;
        bottom: 0;
        left: 0;
        width: 1px;
        background: var(--border-soft);
        content: "";
    }
}
@media (max-width:767px) {
    .value-list {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .value-item {
        min-height: 0;
        padding: 0;
        border-left: 0;
    }

    .value-item:nth-child(odd) {
        padding-left: 0;
    }

    .value-item:nth-child(even) {
        padding-right: 0;
    }

    .value-item + .value-item {
        margin-top: 30px;
        padding-top: 30px;
        border-top: 1px solid var(--border-soft);
    }

    .value-item__icon {
        height: 42px;
        margin-left: 14px;
    }

}
.about-support {
    border-top: 1px solid var(--border-soft);
}
@media (max-width:1279px) {
    .about-support {
        position: relative;
        border-top: 0;
    }

    .about-support::before {
        position: absolute;
        top: 0;
        left: 50%;
        width: 100vw;
        height: 1px;
        background: var(--border-soft);
        content: "";
        transform: translateX(-50%);
    }
}
.about-support__lead {
    margin-top: 26px;
    font-weight: 500;
}
.support-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 40px;
}
.support-cards article {
    padding: 24px;
    border: 1px solid var(--border-soft);
    border-radius: 5px;
}
.support-cards img {
    display: inline-block;
    width: auto;
    height: 30px;
    object-fit: contain;
    vertical-align: middle;
}
.support-cards h3 {
    display: inline-block;
    margin: 0 0 0 10px;
    font-size: 2.2rem;
    line-height: 1.4;
    vertical-align: middle;
}
.support-cards p {
    margin-top: 9px;
    font-size: 1.6rem;
    line-height: 1.8;
}
.consultation {
    margin-top: 47px;
}
.consultation h3 {
    font-size: 2.4rem;
    line-height: 1.5;
    text-align: center;
}

.consultation h3::before {
    display: block;
    width: 64px;
    height: 1px;
    margin: 0 auto 24px;
    background: var(--green);
    content: "";
}
.consultation ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 17px 25px;
    margin-top: 24px;
}
@media (min-width:768px) and (max-width:1279px) {
    .consultation ul {
        grid-template-columns: repeat(2, 1fr);
    }
}
.consultation li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.4;
}
.consultation li::before {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    background: url("../images/check-mark.svg") center / contain no-repeat;
    content: "";
}

@media (min-width:1280px) {
    .consultation li {
        white-space: nowrap;
    }
}
.consultation > p {
    width: min(100%, 1000px);
    margin: 50px auto 0;
    padding: 10px 30px;
    border-radius: 999px;
    background: var(--bg-beige);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}
.consultation .for-tablet {
    display: none;
}
@media (max-width:1279px) {
    .consultation .for-tablet {
        display: block;
    }
}
@media (min-width:769px) and (max-width:1279px) {
    .consultation > p {
        white-space: nowrap;
    }

    .consultation > p .for-sp:not(.for-tablet) {
        display: none !important;
    }
}
@media (max-width:1220px) {
    .support-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .support-cards article {
        padding: 18px;
    }

    .consultation li {
        font-size: 1.6rem;
    }

    .consultation li::before {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .consultation > p {
        font-size: 2rem;
        font-size: 1.8rem;
    }
}
@media (max-width:767px) {
    .about-support__lead {
        font-size: 1.6rem;
    }

    .support-cards {
        grid-template-columns: 1fr;
        margin-top: 28px;
    }

    .support-cards article {
        min-height: 0;
    }

    .consultation {
        margin-top: 35px;
    }

    .consultation h3 {
        font-size: 2.4rem;
    }

    .consultation ul {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 20px;
    }

    .consultation li {
        font-size: 1.6rem;
    }


    .consultation > p {
        margin-top: 30px;
        padding: 13px 18px;
        border-radius: 10px;
        font-size: 1.8rem;
    }

.about-support__lead br {
        display: none;
    }
}

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

.service-hero {
    padding-bottom: 105px;
}

.service-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 645px;
    gap: 70px;
    align-items: center;
    padding-top: 51px;
}

.service-hero__eyebrow,
.service-detail__heading p {
    color: var(--green);
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.service-hero__title {
    margin-top: 2px;
    font-size: 2.8rem;
    line-height: 1.5;
}

.service-hero__catch {
    margin-top: 24px;
    font-family: "Noto Serif JP", serif;
    font-size: 5.6rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .06em;
}

.service-hero__text,
.service-overview__lead,
.service-detail__lead,
.service-price__lead {
    font-size: 1.8rem;
    line-height: 2.2;
}

.service-hero__text {
    max-width: 510px;
    margin-top: 24px;
    font-weight: 500;
}

.service-hero__image {
    position: relative;
    z-index: 0;
}

.service-hero__image::before {
    position: absolute;
    z-index: -1;
    bottom: -35px;
    left: -35px;
    width: 610px;
    height: 420px;
    background: #f3f8eb;
    content: "";
}

.service-hero__image img {
    width: 645px;
    height: 448px;
    object-fit: cover;
}

@media (min-width:768px) and (max-width:1279px) {
    .service-hero {
        padding-bottom: 80px;
    }

    .service-hero__grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
        gap: clamp(60px, 6vw, 90px);
    }

    .service-hero__catch {
        font-size: clamp(3.4rem, 4.38vw, 5.6rem);
    }

    .service-hero__text {
        font-size: clamp(1.6rem, 1.41vw, 1.8rem);
    }

    .service-hero__image img {
        width: 100%;
        height: auto;
        aspect-ratio: 645 / 448;
    }

    .service-hero__image::before {
        width: 94%;
        height: 90%;
    }
}

@media (max-width:767px) {
    .service-hero {
        padding-bottom: 62px;
    }

    .service-hero__grid {
        display: block;
        padding-top: 30px;
    }

    .service-hero__catch {
        margin-top: 18px;
        font-size: 3.4rem;
    }

    .service-hero__text {
        margin-top: 18px;
        font-size: 1.6rem;
    }

    .service-hero__image {
        margin-top: 35px;
    }

    .service-hero__image img {
        width: 100%;
        height: auto;
        aspect-ratio: 645 / 448;
    }

    .service-hero__image::before {
        bottom: -12px;
        left: -12px;
        width: 94%;
        height: 90%;
    }
}

.service-overview {
    background: var(--bg-soft);
}

.service-overview__intro.section-spacing {
    padding-bottom: 60px;
}

.service-overview__lead {
    margin-top: 26px;
    font-weight: 500;
}

.service-overview__cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.service-overview__cards a {
    display: grid;
    grid-template-columns: 30px 1fr;
    column-gap: 10px;
    padding: 20px;
    border: 1px solid var(--border-soft);
    border-radius: 5px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.service-overview__cards img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.service-overview__cards span {
    align-self: center;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.35;
}

.service-overview__cards small,
.service-overview__cards b {
    grid-column: 1 / -1;
}

.service-overview__cards small {
    margin-top: 12px;
    font-size: 1.6rem;
    line-height: 1.7;
}

.service-overview__cards b {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 15px;
    color: var(--green);
    font-size: 1.3rem;
    text-align: right;
}

.service-overview__cards b::after {
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    content: "";
    transform: rotate(45deg);
}

@media (hover: hover) {
    .service-overview__cards a:hover {
        border-color: #b7d38e;
        box-shadow: 0 7px 16px rgb(0 0 0 / 8%);
        transform: translateY(-3px);
    }
}

@media (max-width:1200px) {
    .service-overview__cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

@media (max-width:767px) {
    .service-overview__intro.section-spacing {
        padding-bottom: 40px;
    }

    .service-overview__lead {
        font-size: 1.6rem;
    }

    .service-overview__cards {
        grid-template-columns: 1fr;
        margin-top: 28px;
    }
}

.service-detail {
    position: relative;
    padding: 60px 0;
    background: transparent;
}

.service-detail:not(.service-detail--design) .service-detail__inner::before {
    position: absolute;
    top: -60px;
    right: 0;
    left: 0;
    height: 1px;
    background: #cbd5c5;
    content: "";
}

.service-detail--wordpress,
.service-detail--system {
    background: transparent;
}

.service-detail--design {
    padding-top: 0;
}

.service-detail__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 546px) minmax(0, 654px);
    grid-template-areas:
        "heading ."
        "body visual"
        "note note";
    column-gap: 80px;
    row-gap: 0;
}

.service-detail__heading {
    grid-area: heading;
    display: flex;
    align-items: center;
    gap: 0;
}

.service-detail__heading > div {
    margin-left: 20px;
    padding-left: 20px;
    border-left: 1px solid #8ab741;
}

.service-detail__body {
    grid-area: body;
}

.service-detail__heading img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(57%) sepia(37%) saturate(778%) hue-rotate(45deg) brightness(95%) contrast(88%);
}

.service-detail--manga .service-detail__heading img {
    filter: none;
}

.service-detail__heading p {
    line-height: 1.2;
}

.service-detail__heading span {
    display: block;
    margin-top: 2px;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.4;
}

.service-detail h2 {
    margin-top: 20px;
    font-size: 3.2rem;
    line-height: 1.5;
}

.service-detail__lead {
    max-width: 534px;
    margin-top: 20px;
    font-weight: 500;
}

.service-detail__points {
    width: 468px;
    max-width: calc(100% - 32px);
    margin-left: 32px;
    margin-top: 26px;
}

.service-detail__points li {
    padding: 17px 0;
    border-top: 1px solid #cbd5c5;
}

.service-detail__points li:last-child {
    border-bottom: 1px solid #cbd5c5;
}

.service-detail__points strong {
    display: block;
    color: var(--green);
    font-size: 1.7rem;
}

.service-detail__points span {
    display: block;
    margin-top: 5px;
    font-size: 1.5rem;
    line-height: 1.8;
}

.service-detail__visual img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.service-detail__visual {
    grid-area: visual;
    align-self: center;
}

.service-detail--manga .service-detail__visual {
    align-self: start;
    margin-top: 20px;
}

.service-detail__visual--manga {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.service-manga-banner {
    display: block;
    border: 1px solid #e2e5df;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}

.service-manga-banner--lp {
    padding: 24px 24px 19px;
}

.service-manga-banner--lp > span {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 15px;
    color: var(--green);
    font-size: 1.6rem;
    font-weight: 700;
}

.service-manga-banner b {
    font-size: 2rem;
    font-weight: 400;
    line-height: 1;
}

.service-manga-banner--movie {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 20px;
    align-items: end;
    padding: 24px;
}

.service-manga-banner--movie > span {
    align-self: end;
    justify-self: end;
    width: 230px;
    text-align: left;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.7;
}

.service-manga-banner--movie strong {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    font: inherit;
    font-size: 2rem;
    text-align: left;
}

.service-manga-banner--movie small {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
    color: var(--green);
    font-size: 1.6rem;
    line-height: 1.4;
    white-space: nowrap;
}

@media (hover: hover) {
    .service-manga-banner:hover {
        box-shadow: 0 7px 16px rgb(0 0 0 / 12%);
        transform: translateY(-3px);
    }
}

.service-detail__note {
    grid-area: note;
    margin-top: 35px;
    font-size: 2rem;
    font-weight: 700;
    line-height: 2;
    text-align: center;
}

@media (min-width:768px) and (max-width:1100px) {
    .service-detail__heading {
        gap: 0;
    }

    .service-detail__heading > div {
        margin-left: 18px;
        padding-left: 18px;
    }

    .service-detail__heading img {
        width: 40px;
        height: 40px;
    }

    .service-detail__heading p {
        font-size: 2rem;
    }

    .service-detail__heading span {
        font-size: 1.5rem;
    }

    .service-detail__inner {
        grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr);
        column-gap: 36px;
        row-gap: 0;
    }

    .service-detail h2 {
        font-size: clamp(2.8rem, 3vw, 3.2rem);
    }

    .service-detail__lead {
        font-size: 1.6rem;
    }

    .service-detail__points {
        width: auto;
        max-width: none;
        margin-left: 0;
    }

    .service-manga-banner--movie {
        display: block;
        padding: 16px;
    }

    .service-manga-banner--movie > span {
        display: block;
        width: 100%;
        margin-top: 12px;
        font-size: 1.6rem;
    }

    .service-manga-banner--movie strong {
        width: 100%;
        max-width: none;
        margin: 0;
        font-size: 1.5rem;
        text-align: center;
        white-space: nowrap;
    }

    .service-manga-banner--movie strong .for-pc {
        display: none;
    }

    .service-manga-banner--movie small {
        margin-top: 8px;
        font-size: 1.6rem;
    }

    .service-detail__note {
        font-size: 1.8rem;
    }

}

@media (max-width:767px) {
    .service-detail {
        padding: 40px 0;
    }

    .service-detail--design {
        padding-top: 0;
    }

    .service-detail:not(.service-detail--design)::before {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 1px;
        background: #8ab741;
        content: "";
    }

    .service-detail:not(.service-detail--design) .service-detail__inner::before {
        content: none;
    }

    .service-detail__inner {
        display: flex;
        flex-direction: column;
        gap: 0;
        align-items: stretch;
    }

    .service-detail__heading {
        gap: 0;
    }

    .service-detail__heading > div {
        margin-left: 14px;
        padding-left: 14px;
    }

    .service-detail__heading img {
        width: 36px;
        height: 36px;
    }

    .service-detail__heading p {
        font-size: 1.7rem;
    }

    .service-detail__heading span {
        font-size: 1.3rem;
    }

    .service-detail h2 {
        margin-top: 14px;
        font-size: 2.4rem;
    }

    .service-detail__lead {
        margin-top: 14px;
        font-size: 1.6rem;
        line-height: 2;
    }

    .service-detail__points {
        width: auto;
        max-width: none;
        margin-left: 0;
        margin-top: 20px;
    }

    .service-detail__points li {
        padding: 13px 0;
    }

    .service-detail__visual {
        order: 2;
        margin-top: 40px;
    }

    .service-detail--design .service-detail__visual,
    .service-detail--manga .service-detail__visual {
        margin-top: 40px;
    }

    .service-detail__visual--manga {
        gap: 18px;
    }

    .service-manga-banner--lp {
        padding: 16px 16px 14px;
    }

    .service-manga-banner--lp > span {
        margin-top: 12px;
        font-size: 1.6rem;
    }

    .service-manga-banner--movie {
        display: block;
        padding: 16px;
    }

    .service-manga-banner--movie > span {
        display: block;
        width: 100%;
        margin-top: 12px;
        font-size: 1.6rem;
    }

    .service-manga-banner--movie strong {
        position: static;
        display: block;
        width: 100%;
        max-width: none;
        margin: 0;
        transform: none;
        font-size: 1.6rem;
        text-align: center !important;
        white-space: nowrap;
    }

    .service-manga-banner--movie small {
        margin-top: 8px;
        justify-content: flex-end;
        font-size: 1.6rem;
    }

    .service-detail__note {
        order: 3;
        margin-top: 30px;
        font-size: 1.6rem;
        line-height: 1.8;
        text-align: left;
    }
}

.service-price__lead {
    margin-top: 26px;
    font-weight: 500;
}

.service-price__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: min(100%, 1084px);
    gap: clamp(16px, 2.5vw, 32px);
    margin-right: auto;
    margin-left: auto;
    margin-top: 32px;
}

.service-price__cards article {
    padding: 24px;
    border: 1px solid #d9dfd5;
    border-radius: 5px;
}

.service-price__cards h3 {
    display: table;
    font-size: 2.4rem;
}

@media (max-width:1100px) {
    .service-price__cards h3 {
        font-size: 2rem;
    }
}

.service-price__cards h3::after {
    display: block;
    width: calc(100% + 12px);
    height: 2px;
    margin-top: 8px;
    background: var(--green);
    content: "";
}

.service-price__cards p {
    margin-top: 12px;
    font-size: 1.6rem;
    line-height: 1.8;
}

.service-price__contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 30px;
    padding: 32px;
    background: var(--bg-beige);
    border-radius: 10px;
}

.service-price__message {
    display: flex;
    align-items: center;
    gap: 20px;
}

.service-price__icon {
    display: grid;
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
    place-items: center;
    border-radius: 50%;
    background: #fff;
}

.service-price__icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.service-price__text {
    font-size: 2rem;
    font-weight: 700;
}

.service-price__contact .button {
    flex: 0 0 auto;
    width: max-content;
    margin: 0;
    white-space: nowrap;
    justify-content: flex-start;
    gap: 20px;
}

@media (min-width:768px) and (max-width:1100px) {
    .service-price__contact {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    .service-price__message {
        justify-content: center;
    }

    .service-price__contact .button {
        align-self: center;
    }
}

@media (max-width:767px) {
    .service-price__lead {
        font-size: 1.6rem;
    }

    .service-price__cards {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 24px;
    }

    .service-price__contact {
        display: block;
        padding: 18px;
    }

    .service-price__text {
        font-size: 1.6rem;
    }

    .service-price__icon {
        display: none;
    }

    .service-price__contact .button {
        width: max-content;
        margin: 16px auto 0;
    }
}

.service-faq {
    border-top: 1px solid #e3e8df;
}

.service-faq__inner {
    display: block;
}

.faq-list {
    width: min(100%, 1000px);
    margin: 40px auto 0;
}

.faq-list details {
    border: 1px solid #d9dfd5;
    border-radius: 4px;
    overflow: hidden;
}

.faq-list details + details {
    margin-top: 12px;
}

.faq-list summary {
    position: relative;
    padding: 16px 50px 16px 46px;
    cursor: pointer;
    font-size: 2rem;
    font-weight: 700;
    list-style: none;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary::before {
    position: absolute;
    top: 50%;
    left: 18px;
    color: var(--green);
    content: "Q.";
    font-weight: 900;
    transform: translateY(-50%);
}

.faq-list summary::after {
    position: absolute;
    top: 50%;
    right: 20px;
    width: 9px;
    height: 9px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    content: "";
    transform: translateY(-70%) rotate(45deg);
    transition: transform .35s ease;
}

.faq-list details[open] summary::after {
    transform: translateY(-30%) rotate(225deg);
}

.faq-list details.is-closing summary::after {
    transform: translateY(-70%) rotate(45deg);
}

.faq-list details p {
    margin: 0 18px 16px 46px;
    padding-top: 12px;
    border-top: 1px solid #edf0eb;
    font-size: 1.8rem;
    line-height: 1.8;
}

@media (max-width:767px) {
    .faq-list {
        width: 100%;
        margin-top: 25px;
    }

    .faq-list summary {
        padding: 14px 38px 14px 40px;
        font-size: 1.5rem;
    }

    .faq-list summary::before {
        left: 14px;
    }

    .faq-list summary::after {
        right: 15px;
    }

    .faq-list details p {
        margin: 0 14px 14px 40px;
        font-size: 1.4rem;
    }
}

/* ===============================================
 * 下層ページ共通ファーストビュー
 * =============================================== */

.lower-page-hero {
    padding-bottom: 105px;
}

.lower-page-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 580px;
    gap: 70px;
    align-items: flex-start;
    padding-top: 32px;
}

.lower-page-hero__eyebrow {
    color: var(--green);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.lower-page-hero__title {
    font-size: 2.4rem;
    line-height: 1.5;
    font-weight: 500;
}

.lower-page-hero__catch {
    margin-top: 24px;
    font-family: "Noto Serif JP", serif;
    font-size: 4.6rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .06em;
}

.lower-page-hero__catch .for-tablet {
    display: none;
}

.lower-page-hero__text {
    max-width: 510px;
    margin-top: 24px;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 2.2;
}

.lower-page-hero__image {
    position: relative;
    z-index: 0;
}

.lower-page-hero__image::before {
    position: absolute;
    z-index: -1;
    bottom: -35px;
    left: -35px;
    width: 550px;
    height: 380px;
    background: var(--bg-beige);
    content: "";
}

.lower-page-hero__image img {
    display: block;
    width: 580px;
    height: 403px;
    object-fit: cover;
    border: 1px solid #e4e4e4;
}

@media (min-width:768px) and (max-width:1279px) {
    .lower-page-hero {
        padding-bottom: 80px;
    }

    .lower-page-hero__grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
        gap: clamp(60px, 6vw, 90px);
    }

    .lower-page-hero__catch {
        font-size: clamp(3.2rem, 4.38vw, 4.6rem);
    }

    .lower-page-hero__catch .for-tablet {
        display: block;
    }

    .lower-page-hero__text {
        font-size: clamp(1.6rem, 1.41vw, 1.8rem);
    }

    .lower-page-hero__image {
        align-self: center;
    }

    .lower-page-hero__image img {
        width: 100%;
        height: auto;
        aspect-ratio: 645 / 448;
    }

    .lower-page-hero__image::before {
        width: 94%;
        height: 90%;
    }
}

@media (max-width:767px) {
    .lower-page-hero {
        padding-bottom: 62px;
    }

    .lower-page-hero__grid {
        display: block;
        padding-top: 30px;
    }

    .lower-page-hero__eyebrow {
        font-size: 1.8rem;
    }

    .lower-page-hero__title {
        font-size: 2rem;
    }

    .lower-page-hero__catch {
        margin-top: 18px;
        font-size: 3.4rem;
    }

    .about-hero .lower-page-hero__catch,
    .process-hero .lower-page-hero__catch {
        font-size: clamp(1.75rem, 8.15vw, 3rem);
        letter-spacing: 0;
    }

    .lower-page-hero__catch .for-tablet {
        display: block;
    }

    .company-hero .lower-page-hero__catch {
        font-size: 3rem;
        letter-spacing: .02em;
    }
    
    .lower-page-hero__text {
        margin-top: 18px;
        font-size: 1.6rem;
    }

    .lower-page-hero__image {
        margin-top: 35px;
    }

    .lower-page-hero__image img {
        width: 100%;
        height: auto;
        aspect-ratio: 645 / 448;
    }

    .lower-page-hero__image::before {
        bottom: -12px;
        left: -12px;
        width: 94%;
        height: 90%;
    }
}

/* ===============================================
 * PROCESS
 * =============================================== */
.process-hero__steps {
    margin-top: 36px;
    font-size: 1.6rem;
    font-weight: 700;
}

/* SHOWCASE・COMPANYでも使用するセンター型の下層ページ導入 */
.lower-page-intro {
    background: var(--bg-soft);
    text-align: center;
}

.lower-page-intro__label,
.process-intro__label {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    color: var(--green);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.5;
}

.lower-page-intro__label i,
.process-intro__label i {
    width: 80px;
    height: 1px;
    margin-top: 10px;
    background: #b7d38e;
}

.lower-page-intro h2 {
    margin-top: 18px;
    font-size: 2.8rem;
    line-height: 1.5;
}

.lower-page-intro p {
    margin-top: 26px;
    font-size: 2rem;
    font-weight: 500;
    line-height: 2;
}

.process-flow__list {
    position: relative;
    width: min(100%, 950px);
    margin: 55px auto 0;
}

.process-flow__list li {
    position: relative;
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 36px;
    align-items: center;
}

.process-flow__list li:not(:last-child)::before {
    position: absolute;
    z-index: 0;
    top: 50%;
    bottom: -94px;
    left: 34px;
    width: 1px;
    background: var(--border-soft);
    content: "";
}

.process-flow__list li::after {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 70px;
    width: 36px;
    height: 1px;
    background: var(--border-soft);
    content: "";
}

.process-flow__list li + li {
    margin-top: 24px;
}

.process-flow__number {
    position: relative;
    z-index: 1;
    display: grid;
    width: 70px;
    height: 70px;
    place-items: center;
    border: 2px solid #8ab741;
    border-radius: 50%;
    background: #fff;
    color: var(--green);
    font-size: 2.4rem;
    font-weight: 700;
}

.process-flow__list article {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 140px;
    padding: 24px 30px;
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    background: #fff;
}

.process-flow__icon {
    display: grid;
    flex: 0 0 100px;
    width: 100px;
    height: 100px;
    place-items: center;
    border-radius: 50%;
    background: var(--bg-soft);
}

.process-flow__icon img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.process-flow__list h3 {
    font-size: 2rem;
    line-height: 1.5;
}

.process-flow__list p {
    margin-top: 12px;
    font-size: 1.6rem;
    line-height: 2;
}

.process-support {
    border-top: 1px solid #d9dfd5;
}

.process-support__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 48px;
}

.process-support__list article {
    padding: 0 42px;
    text-align: center;
}

.process-support__list article + article {
    border-left: 1px solid var(--border-soft);
}

.process-support__list img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin: 0 auto;
}

.process-support__list h3 {
    margin-top: 18px;
    font-size: 1.8rem;
}

.process-support__list p {
    margin-top: 12px;
    font-size: 1.5rem;
    line-height: 1.8;
    text-align: left;
}

@media (min-width:768px) and (max-width:1100px) {
    .process-flow__list {
        width: min(100%, 850px);
    }

    .process-support__list article {
        padding: 0 24px;
    }
}

@media (max-width:767px) {
    .process-hero__steps {
        margin-top: 24px;
        font-size: 1.4rem;
    }

    .lower-page-intro__label,
    .process-intro__label {
        font-size: 1.8rem;
    }

    .lower-page-intro__label i,
    .process-intro__label i {
        width: 54px;
        margin-top: 8px;
    }

    .lower-page-intro h2 {
        margin-top: 14px;
        font-size: 2.4rem;
    }

    .lower-page-intro p {
        margin-top: 20px;
        font-size: 1.6rem;
        line-height: 1.9;
        text-align: left;
    }

    .process-flow__list {
        margin-top: 35px;
    }

    .process-flow__list li {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 16px;
        align-items: start;
    }

    .process-flow__list li:not(:last-child)::before {
        top: 24px;
        bottom: -64px;
        left: 23px;
    }

    .process-flow__list li::after {
        top: 24px;
        left: 48px;
        width: 16px;
    }

    .process-flow__list li + li {
        margin-top: 16px;
    }

    .process-flow__number {
        width: 48px;
        height: 48px;
        font-size: 1.7rem;
    }

    .process-flow__list article {
        display: grid;
        grid-template-columns: 60px minmax(0, 1fr);
        /* column-gap: 12px; */
        gap: 0 12px;
        align-items: center;
        min-height: 0;
        padding: 18px;
    }

    .process-flow__icon {
        flex-basis: 60px;
        width: 60px;
        height: 60px;
    }

    .process-flow__icon img {
        width: 34px;
        height: 34px;
    }

    .process-flow__list article > div {
        display: contents;
    }

    .process-flow__list h3 {
        grid-column: 2;
        margin-top: 0;
        font-size: 1.7rem;
    }

    .process-flow__list p {
        grid-column: 1 / -1;
        font-size: 1.4rem;
    }

    .process-support__list {
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 30px;
    }

    .process-support__list article {
        padding: 28px 0;
    }

    .process-support__list article + article {
        border-top: 1px solid #b7d38e;
        border-left: 0;
    }

    .process-support__list img {
        width: 68px;
        height: 68px;
    }
}

/* NEWS一覧・詳細 */
.news-page {
    max-width: 1200px;
    padding-top: 0;
    padding-bottom: 120px;
}
.news-page__heading {
    margin-top: 32px;
    text-align: center;
}
.news-page__heading .section-label {
    justify-content: center;
    margin: 0;
    font-size: 2rem;
    letter-spacing: .08em;
}
.news-page__heading .section-label i {
    display: none;
}
.news-page__heading .section-title {
    margin-top: 14px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .04em;
}

/* PRIVACY POLICY */
.privacy-page {
    width: min(920px, calc(100% - 56px));
    padding-top: 0;
    padding-bottom: 120px;
}

.privacy-page__heading {
    margin-top: 68px;
    padding-bottom: 56px;
    text-align: center;
}

.privacy-page__heading h1 {
    margin: 0;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.5;
}

.privacy-page__heading h1::after {
    display: block;
    width: 56px;
    height: 1px;
    margin: 20px auto 0;
    background: var(--green);
    content: "";
}

.privacy-page__content {
    font-size: 1.6rem;
    line-height: 2;
}

.privacy-page__content > *:first-child {
    margin-top: 0;
}

.privacy-page__content h2 {
    margin-top: 52px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.5;
}

.privacy-page__content h3 {
    margin-top: 32px;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.6;
}

.privacy-page__content p,
.privacy-page__content ul,
.privacy-page__content ol {
    margin-top: 18px;
}

.privacy-page__content ul,
.privacy-page__content ol {
    padding-left: 1.5em;
}

.privacy-page__content ul {
    list-style: disc;
}

.privacy-page__content a {
    color: var(--green);
    text-underline-offset: .2em;
}

@media (max-width:767px) {
    .privacy-page {
        width: min(920px, calc(100% - 40px));
        padding-bottom: 80px;
    }

    .privacy-page__heading {
        margin-top: 48px;
        padding-bottom: 40px;
    }

    .privacy-page__heading h1 {
        font-size: 2.4rem;
    }

    .privacy-page__heading h1::after {
        margin-top: 16px;
    }

    .privacy-page__content {
        font-size: 1.5rem;
        line-height: 1.9;
    }

    .privacy-page__content h2 {
        margin-top: 40px;
        font-size: 1.6rem;
    }

    .privacy-page__content h3 {
        margin-top: 28px;
        font-size: 1.7rem;
    }
}
.news-page__list {
    width: min(920px, 100%);
    margin: 54px auto 0;
    border-top: 1px solid var(--border-soft);
}
.news-page__item {
    margin: 0;
    border-bottom: 1px solid var(--border-soft);
}
.news-page__item a {
    display: grid;
    grid-template-columns: 145px minmax(0,1fr) 28px;
    gap: 26px;
    align-items: center;
    min-height: 108px;
    color: var(--ink);
    text-decoration: none;
    transition: color .2s ease;
}
.news-page__item time {
    color: #999;
    font-size: 1.8rem;
    font-weight: 500;
}
.news-page__label {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: max-content;
    min-width: 96px;
    padding: 7px 10px;
    border: 1px solid #aaca7f;
    color: var(--green);
    font-size: 1.5rem;
    font-weight: 500;
}
.news-page__item h2 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.6;
}
.news-page__item b {
    font-size: 2.4rem;
    font-weight: 400;
    text-align: right;
    transition: transform .2s ease;
}
.news-page__item a:hover, .news-page__item a:focus-visible {
    color: var(--green);
}
.news-page__item a:hover b, .news-page__item a:focus-visible b {
    transform: translateX(6px);
}
.news-page__empty {
    width: min(920px, 100%);
    margin: 54px auto 0;
    padding: 36px 0;
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    font-size: 1.8rem;
}
.news-pagination {
    width: min(920px, 100%);
    margin: 42px auto 0;
}
.news-pagination .page-numbers {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.news-pagination a, .news-pagination span {
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    border: 1px solid var(--border-soft);
    color: var(--ink);
    font-size: 1.5rem;
    text-decoration: none;
}
.news-pagination .current, .news-pagination a:hover, .news-pagination a:focus-visible {
    border-color: var(--green);
    background: var(--green);
    color: #fff;
}
.news-detail {
    padding-top: 0;
    padding-bottom: 120px;
}
.news-detail__page-heading {
    padding-bottom: 54px;
    border-bottom: 1px solid var(--border-soft);
}
.news-detail__inner {
    width: min(920px, calc(100% - 56px));
    margin: 52px auto 0;
}
.news-detail__header {
    margin-top: 32px;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--border-soft);
}
.news-detail__meta {
    display: flex;
    gap: 18px;
    align-items: center;
    margin: 0;
    color: #999;
    font-size: 1.6rem;
}
.news-detail__meta span {
    color: var(--green);
}
.news-detail h1 {
    margin: 18px 0 0;
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.5;
}
.news-detail__thumbnail {
    float: left;
    box-sizing: border-box;
    width: 200px;
    margin: 48px 32px 18px 0;
    border: 1px solid var(--border-soft);
}
.news-detail__thumbnail img {
    display: block;
    width: 100%;
    height: auto;
}
.news-detail__content {
    margin-top: 52px;
    font-size: 1.7rem;
    line-height: 2;
}
.news-detail__thumbnail + .news-detail__content {
    margin-top: 48px;
}
.news-detail__content > *:first-child {
    margin-top: 0;
}
.news-detail__content img {
    max-width: 100%;
    height: auto;
}
.news-detail__back {
    clear: both;
    margin: 60px 0 0;
    text-align: right;
}
.news-detail__back .view-all {
    display: inline-flex;
    position: static;
    gap: 24px;
    align-items: center;
    width: auto;
    margin: 0;
    padding-bottom: 8px;
    color: var(--ink);
    font-size: 1.7rem;
    text-decoration: none;
}
.news-detail__back .view-all b {
    font-size: 0;
    font-weight: 400;
    transition: transform .2s ease;
}
.news-detail__back .view-all:hover, .news-detail__back .view-all:focus-visible {
    color: var(--green);
}
.news-detail__back .view-all:hover b, .news-detail__back .view-all:focus-visible b {
    transform: translateX(6px);
}
@media (max-width:767px) {
    .news-page, .news-detail {
        padding-top: 0;
        padding-bottom: 70px;
    }
    .news-detail__inner {
        width: calc(100% - 40px);
        margin-top: 34px;
    }
    .news-detail__page-heading {
        padding-bottom: 34px;
    }
    .news-page__heading, .news-detail__header {
        margin-top: 30px;
    }
    .news-page__list {
        margin-top: 34px;
    }
    .news-page__item a {
        grid-template-columns: 1fr 24px;
        gap: 10px 16px;
        min-height: 0;
        padding: 20px 0;
    }
    .news-page__item time {
        font-size: 1.5rem;
    }
    .news-page__label {
        min-width: 0;
        padding: 5px 8px;
        font-size: 1.3rem;
    }
    .news-page__item h2 {
        grid-column: 1;
        font-size: 1.6rem;
        line-height: 1.6;
    }
    .news-page__item b {
        grid-column: 2;
        grid-row: 1 / span 2;
        font-size: 2rem;
    }
    .news-detail__header {
        padding-bottom: 26px;
    }
    .news-detail__meta {
        gap: 12px;
        font-size: 1.4rem;
    }
    .news-detail__content {
        margin-top: 34px;
        font-size: 1.6rem;
        line-height: 1.9;
    }
    .news-detail h1 {
        font-size: 2rem;
    }
    .news-detail__thumbnail {
        display: none;
    }
    .news-detail__thumbnail + .news-detail__content {
        margin-top: 34px;
    }
    .news-detail__back {
        margin-top: 42px;
    }
}

/* ===============================================
 * COMPANY
 * =============================================== */
.company-message {
    background: var(--bg-soft);
    text-align: center;
}
.company-message__label {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    color: var(--green);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: .08em;
}
.company-message__label i {
    width: 54px;
    height: 1px;
    margin-top: 10px;
    background: #b7d38e;
}
.company-message h2 {
    margin-top: 18px;
    font-size: 2.8rem;
    line-height: 1.5;
}
.company-message__text {
    margin-top: 26px;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 2;
}
.company-message__text p + p { margin-top: 24px; }
.company-profile > .section-title {
    position: relative;
    padding-bottom: 18px;
    text-align: center;
}
.company-profile > .section-title::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 56px;
    height: 1px;
    margin: auto;
    background: var(--green);
    content: "";
}
.company-profile__table,
.company-profile__map {
    width: min(100%, 900px);
    margin-right: auto;
    margin-left: auto;
}
.company-profile__table {
    margin-top: 34px;
    border-top: 1px solid var(--border-soft);
    border-left: 1px solid var(--border-soft);
}
.company-profile__table > div {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
}
.company-profile__table dt,
.company-profile__table dd {
    min-height: 58px;
    padding: 14px 18px;
    border-right: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    font-size: 1.5rem;
    line-height: 1.65;
}
.company-profile__table dt { background: #f4f4f4; font-weight: 700; }
.company-profile__table dd { margin: 0; font-weight: 400; }
.company-profile__map {
    margin-top: 30px;
    border: 1px solid var(--border-soft);
}
.company-profile__map iframe { display: block; width: 100%; height: 450px; }
@media (max-width:767px) {
    .company-message__label { font-size: 1.8rem; }
    .company-message h2 { margin-top: 14px; font-size: 2.2rem; }
    .company-message__text { margin-top: 18px; font-size: 1.5rem; text-align: left; }
    .company-message__text p + p { margin-top: 18px; }
    .company-profile > .section-title { padding-bottom: 14px; }
    .company-profile__table { margin-top: 24px; }
    .company-profile__table > div { display: block; }
    .company-profile__table dt,
    .company-profile__table dd { min-height: 0; padding: 12px 14px; font-size: 1.4rem; }
    .company-profile__table dd { border-top: 0; }
    .company-profile__map { margin-top: 20px; }
    .company-profile__map iframe { height: 320px; }
}

/* ===============================================
 * CONTACT
 * =============================================== */
.contact-hero {
    padding: 0 0 70px;
}

.contact-hero__heading {
    max-width: 760px;
    margin: 48px auto 0;
    text-align: center;
}

.contact-hero__eyebrow {
    color: var(--green);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.contact-hero h1 {
    margin-top: 4px;
    font-size: 2.8rem;
}

.contact-hero__catch {
    margin-top: 34px;
    font-family: "Noto Serif JP", serif;
    font-size: 5rem;
    line-height: 1.45;
}

.contact-hero__text {
    margin-top: 30px;
    font-size: 1.8rem;
    line-height: 1.8;
}

.contact-guide > p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 30px;
    background: var(--bg-beige);
    font-size: 1.6rem;
    font-weight: 700;
}

.contact-guide > p img {
    width: 38px;
}

.contact-guide__points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1000px;
    margin: 46px auto 0;
}

.contact-guide__points article {
    padding: 0 18px;
    text-align: center;
}

.contact-guide__points article + article {
    border-left: 1px solid var(--border-soft);
}

.contact-guide__points img {
    width: 56px;
    height: 56px;
    margin: 0 auto;
    object-fit: contain;
}

.contact-guide__points h2 {
    margin-top: 10px;
    color: #2F3130;
    font-size: 1.8rem;
}

.contact-guide__points p {
    margin-top: 8px;
    font-size: 1.4rem;
    line-height: 1.8;
}

.contact-form {
    max-width: 900px;
    padding-top: 0;
}

.contact-form .section-title {
    position: relative;
    padding-bottom: 18px;
    text-align: center;
}

.contact-form .section-title::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 56px;
    height: 1px;
    margin: auto;
    background: var(--green);
    content: "";
}

.contact-form__notice {
    margin-top: 34px;
    padding: 22px 30px;
    background: #f1f1f1;
    text-align: center;
    font-size: 1.6rem;
}

.contact-form__fields {
    margin-top: 30px;
}

.contact-form__fields .wpcf7 > form > p {
    margin: 0;
}

/* CF7 also adds <br> after each block-level row. Those line breaks sit
 * outside .contact-form__row, so remove them at the form level as well. */
.contact-form__fields .wpcf7 > form > br {
    display: none;
}

.contact-form__fields .cf-turnstile,
.contact-form__fields .wpcf7-turnstile {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto 20px;
}

.contact-form__fields .wpcf7 form.sent .wpcf7-response-output {
    margin: 24px 0 0;
    border: 1px solid var(--green);
    background: #f3f8eb;
    padding: 16px 18px;
    color: var(--ink);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
}

.contact-form__fields .wpcf7 form.invalid .wpcf7-response-output,
.contact-form__fields .wpcf7 form.unaccepted .wpcf7-response-output,
.contact-form__fields .wpcf7 form.failed .wpcf7-response-output {
    margin: 24px 0 0;
    border: 1px solid #d33;
    background: #fff5f5;
    padding: 14px 18px;
    color: #d33;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
}

.contact-form__row {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    margin-top: 20px;
    border: 0;
    padding: 0;
}

.contact-form__row > label,
.contact-form__row > p > label,
.contact-form__row legend {
    grid-column: 1;
    grid-row: 1;
    padding-top: 0;
    font-size: 1.6rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Contact Form 7 may wrap a form-tag in a paragraph. Keep that wrapper
 * from becoming a grid cell, so the label and field retain their columns. */
.contact-form__row > p {
    display: contents;
    margin: 0;
}

/* CF7 converts line breaks around form-tags to <br>. In this grid those
 * elements create an unintended extra row between the label and field. */
.contact-form__row br {
    display: none !important;
}

.contact-form__row em,
.contact-form__agreement em {
    margin-left: 8px;
    color: #6E9E33;
    font-size: 1.2rem;
    font-style: normal;
}

.contact-form__row small {
    font-size: 1.2rem;
    font-weight: 400;
}

.contact-form__row > .wpcf7-form-control-wrap,
.contact-form__row > p > .wpcf7-form-control-wrap,
.contact-form__row--address > div {
    grid-column: 2;
    grid-row: 1;
    display: block;
    min-width: 0;
}

.contact-form__row input:not([type="radio"]),
.contact-form__row select,
.contact-form__row textarea {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid var(--border-form);
    border-radius: 4px;
    background: #fff;
    padding: 15px 16px;
    color: var(--ink);
    font: inherit;
    font-size: 1.6rem;
}

.contact-form__row input:not([type="radio"]),
.contact-form__row select {
    height: 54px;
}

.contact-form__row select {
    appearance: none;
    -webkit-appearance: none;
    padding: 0 52px 0 16px;
    line-height: 52px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4 7 6 6 6-6' fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
    background-position: right 16px center;
    background-repeat: no-repeat;
    background-size: 20px;
}

.contact-form__row input::placeholder,
.contact-form__row textarea::placeholder {
    color: #aaa;
}

.contact-form__row--address > div {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.contact-form__row--address > div > .wpcf7-form-control-wrap ~ .wpcf7-form-control-wrap {
    margin-top: 10px;
}

.contact-form__row--address {
    align-items: start;
}

.contact-form__row--address > label,
.contact-form__row--address > p > label {
    display: flex;
    align-items: center;
    align-self: start;
    height: 54px;
    padding-top: 0;
    line-height: inherit;
}

.contact-form__address-fields {
    display: flex;
    flex-direction: column;
}

.contact-form__row--address > .contact-form__address-fields {
    display: grid;
    gap: 10px;
}

.contact-form__address-field,
.contact-form__address-fields > .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
    margin: 0 !important;
}

.contact-form__row--address > .contact-form__address-fields > .wpcf7-form-control-wrap ~ .wpcf7-form-control-wrap {
    margin-top: 0 !important;
}

fieldset.contact-form__row {
    display: block;
    position: relative;
    min-height: 54px;
    padding-left: 290px;
}

fieldset.contact-form__row legend {
    position: absolute;
    top: 50%;
    left: 0;
    float: none;
    box-sizing: border-box;
    width: 270px;
    margin: 0;
    padding-top: 0;
    transform: translateY(-50%);
}

.contact-form__radios {
    display: flex;
    align-items: center;
    min-height: 54px;
    margin-left: 0;
}

.contact-form__radios .wpcf7-form-control-wrap,
.contact-form__radios .wpcf7-radio {
    display: flex;
    align-items: center;
    gap: 18px;
}

.contact-form__radios .wpcf7-list-item {
    display: inline-flex;
    align-items: center;
    margin: 0;
    font-size: 1.6rem;
    white-space: nowrap;
}

.contact-form__radios label {
    display: inline-flex;
    align-items: center;
}

.contact-form__radios input[type="radio"] {
    display: inline-block;
    flex: 0 0 16px;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    margin: 0 6px 0 0;
    border: 1px solid #888;
    border-radius: 50%;
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
}

.contact-form__radios input[type="radio"]:checked {
    border-color: var(--green);
    background: radial-gradient(circle, var(--green) 0 4px, transparent 4.5px);
}

.contact-form__row--message textarea {
    height: 180px;
    min-height: 180px;
    resize: vertical;
}

.contact-form__row--message {
    align-items: start;
}

.contact-form__row--message > label,
.contact-form__row--message > p > label {
    padding-top: 0;
    margin-top: 0;
    position: relative;
    top: 15px;
}

.contact-form__privacy {
    box-sizing: border-box;
    width: min(100%, 800px);
    height: 210px;
    margin: 40px auto 0;
    overflow-y: auto;
    border: 1px solid var(--border-soft);
    background: #fff;
    padding: 18px 24px;
    font-size: 1.4rem;
    line-height: 1.8;
}

.contact-form__privacy > *:first-child {
    margin-top: 0;
}

.contact-form__privacy h2,
.contact-form__privacy h3,
.contact-form__privacy h4,
.contact-form__privacy p,
.contact-form__privacy ul {
    margin: 0 0 16px;
}

.contact-form__privacy ul {
    padding-left: 1.5em;
}

/* Reuse the privacy-policy page typography while keeping this scroll area compact. */
.contact-form__privacy.privacy-page__content h2 {
    margin: 32px 0 12px;
    font-size: 1.8rem;
    line-height: 1.5;
}

.contact-form__privacy.privacy-page__content h3 {
    margin: 24px 0 10px;
    font-size: 1.6rem;
    line-height: 1.6;
}

.contact-form__privacy.privacy-page__content p,
.contact-form__privacy.privacy-page__content ul,
.contact-form__privacy.privacy-page__content ol {
    margin: 0 0 12px;
}

.contact-form__agreement {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    width: min(100%, 800px);
    margin: 24px auto 0;
    font-size: 1.4rem;
    font-weight: 700;
}

.contact-form__agreement .wpcf7-form-control-wrap {
    display: contents;
}

.contact-form__agreement > p {
    display: contents;
    margin: 0;
}

.contact-form__agreement .wpcf7-list-item {
    margin: 0;
}

.contact-form__agreement br {
    display: none !important;
}

.contact-form__agreement em {
    flex: 0 0 auto;
    order: 2;
    white-space: nowrap;
}

.contact-form__agreement .wpcf7-acceptance {
    order: 1;
}

.contact-form__agreement .wpcf7-not-valid-tip {
    flex: 0 0 100%;
    order: 3;
    margin-top: 8px;
    color: #d33;
    font-size: 1.4rem;
    line-height: 1.5;
    text-align: center;
}

.contact-form__agreement input[type="checkbox"] {
    display: inline-block;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    margin: 0 8px 0 0;
    border: 1px solid #999;
    border-radius: 2px;
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    vertical-align: -3px;
}

.contact-form__agreement input[type="checkbox"]:checked {
    border-color: var(--green);
    background-color: var(--green);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px;
}

.contact-form__submit {
    display: block;
    width: 280px;
    min-height: 70px;
    margin: 26px auto 0;
    border: 0;
    background-color: var(--green);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 20'%3E%3Cpath d='M1 10h38M31 2l8 8-8 8' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 20px center;
    background-repeat: no-repeat;
    background-size: 38px 16px;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    text-align: left;
    text-indent: 20px;
    transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

/* お問い合わせページでは、フォームの終了とフッターを明確に区切る。 */
.contact-page + .footer {
    position: relative;
}

.contact-page + .footer::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    border-top: 1px solid var(--border-soft);
    content: "";
    transform: translateX(-50%);
}

@media (hover: hover) {
    .contact-form__submit:hover {
        background-color: #5c9420;
        box-shadow: 0 6px 14px rgb(0 0 0 / 12%);
        transform: translateY(-2px);
    }
}

@media (max-width:767px) {
    .contact-form__fields .wpcf7 form.sent .wpcf7-response-output {
        text-align: left;
    }

    .contact-form__fields .wpcf7 form.invalid .wpcf7-response-output,
    .contact-form__fields .wpcf7 form.unaccepted .wpcf7-response-output,
    .contact-form__fields .wpcf7 form.failed .wpcf7-response-output {
        text-align: left;
    }

    .contact-hero {
        padding: 0 0 30px;
    }

    .contact-hero__heading {
        margin-top: 38px;
    }

    .contact-hero__eyebrow {
        font-size: 1.7rem;
    }

    .contact-hero h1 {
        font-size: 2.4rem;
    }

    .contact-hero__catch {
        margin-top: 24px;
        font-size: 3.2rem;
    }

    .contact-hero__text {
        margin-top: 20px;
        font-size: 1.4rem;
        text-align: left;
    }

    .contact-hero__text br {
        display: none;
    }

    .contact-guide > p {
        align-items: center;
        gap: 12px;
        padding: 18px;
        font-size: 1.4rem;
        line-height: 1.7;
    }

    .contact-guide > p img {
        width: 28px;
    }

    .contact-guide__points {
        grid-template-columns: max-content;
        gap: 0;
        width: max-content;
        max-width: 100%;
        margin: 34px auto 0;
    }

    .contact-guide__points article {
        display: grid;
        position: relative;
        grid-template-columns: 44px max-content;
        column-gap: 16px;
        align-items: center;
        padding: 18px 0;
        text-align: left;
    }

    .contact-guide__points article + article {
        border-left: 0;
    }

    .contact-guide__points article + article::before {
        position: absolute;
        top: 0;
        left: 50%;
        width: min(330px, calc(100vw - 40px));
        border-top: 1px solid var(--border-soft);
        content: "";
        transform: translateX(-50%);
    }

    .contact-guide__points img {
        grid-column: 1;
        grid-row: 1 / span 2;
        align-self: center;
        width: 44px;
        height: 44px;
        margin: 0;
    }

    .contact-guide__points h2 {
        grid-column: 2;
        margin-top: 0;
        font-size: 1.5rem;
        line-height: 1.4;
    }

    .contact-guide__points p {
        grid-column: 2;
        margin-top: 4px;
        font-size: 1.2rem;
        line-height: 1.7;
    }

    .contact-form .section-title {
        font-size: 2.4rem;
    }

    .contact-form__notice {
        margin-top: 24px;
        padding: 16px;
        font-size: 1.4rem;
        text-align: left;
    }

    .contact-form__row {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 20px;
    }

    .contact-form__row > label,
    .contact-form__row > p > label,
    .contact-form__row legend {
        grid-column: 1;
        grid-row: auto;
        padding-top: 0;
    }

    .contact-form__row > .wpcf7-form-control-wrap,
    .contact-form__row > p > .wpcf7-form-control-wrap,
    .contact-form__row--address > div {
        grid-column: 1;
        grid-row: auto;
    }

    fieldset.contact-form__row {
        min-height: 0;
        padding-left: 0;
    }

    fieldset.contact-form__row legend {
        position: static;
        float: none;
        width: auto;
        transform: none;
    }

    .contact-form__row--address > label,
    .contact-form__row--address > p > label {
        height: auto;
        line-height: inherit;
    }

    .contact-form__row--message > label,
    .contact-form__row--message > p > label {
        top: 0;
    }

    .contact-form__radios {
        min-height: 0;
        margin-left: 0;
    }

    .contact-form__radios .wpcf7-form-control-wrap,
    .contact-form__radios .wpcf7-radio {
        flex-wrap: wrap;
        gap: 12px 18px;
    }

    .contact-form__privacy {
        width: 100%;
        height: 200px;
        padding: 16px;
    }

    .contact-form__submit {
        width: 100%;
        min-height: 60px;
    }
}