/**
 * ABOUT新デザイン確認用
 *
 * functions-about.phpにより、固定ページID 1081だけで読み込まれます。
 * Responsive policy: SP <= 767px (375px design reference),
 * tablet 768px - 1279px, PC >= 1280px.
 */

@font-face {
    font-family: "Google Sans Flex";
    src: url("../fonts/GoogleSansFlex-Variable.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

#page_content {
    position: relative;
}

#header .logo .h1 > svg {
    filter: brightness(0) invert(1);
}

#main_title {
    position: relative;
    overflow: hidden;
    min-height: 638px;
    padding: 0;
    color: #fff;
    background-color: #061626;
    background-image:
        linear-gradient(rgba(0, 12, 24, 0.14), rgba(0, 12, 24, 0.14)),
        url("../../images/about-new/about-fv.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-bottom: 0;
}

#main_title .container {
    position: relative;
    display: block;
    width: min(calc(100% - clamp(56px, 5.555556vw, 80px)), 1280px);
    max-width: 1280px;
    min-height: 638px;
    margin: 0 auto;
    padding: 0;
}

#main_title h1 {
    position: absolute;
    top: 458px;
    left: 1px;
    margin: 0;
    color: #fff;
    font-family: "Google Sans Flex", "Noto Sans JP", sans-serif;
    font-size: clamp(16px, 1.25vw, 18px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.05em;
}

#breadcrumbs {
    position: absolute;
    z-index: 2;
    top: 380px;
    left: 0;
    width: 100%;
    height: 30px;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #fff;
}

#breadcrumbs .container {
    width: min(calc(100% - clamp(56px, 5.555556vw, 80px)), 1280px);
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 0 0 clamp(1px, 0.138889vw, 2px);
    text-align: left;
}

/*
 * 既存page.cssが同じ要素を!importantで黒に固定しているため、
 * このページのパンくずに限って白へ上書きします。
 */
#breadcrumbs,
#breadcrumbs a,
#breadcrumbs span {
    color: #fff !important;
}

#breadcrumbs .aioseo-breadcrumbs span,
#breadcrumbs .aioseo-breadcrumbs a {
    font-size: clamp(13px, 0.902778vw, 14px);
    font-weight: 500;
    line-height: 1;
}

#breadcrumbs .aioseo-breadcrumbs .aioseo-breadcrumb-separator {
    width: 4px;
    height: 4px;
    margin:
        clamp(3px, 0.277778vw, 4px)
        clamp(10px, 0.972222vw, 14px)
        clamp(4px, 0.347222vw, 5px)
        clamp(13px, 1.25vw, 18px);
    vertical-align: top;
}

#page_content > .container {
    width: 100%;
    max-width: none;
    padding: 0;
}

#page_content > .container main {
    width: 100%;
    max-width: none;
    margin: 0;
}

#page_content .main_content {
    margin-bottom: 0;
}

.ga-about {
    width: 100%;
}

#page .ga-sidebanner {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.ga-about__hero-title {
    position: absolute;
    z-index: 2;
    top: 493px;
    left: max(clamp(29px, 2.847222vw, 41px), calc((100% - 1280px) / 2 + 1px));
    margin: 0;
    color: #fff;
    font-family: "Google Sans Flex", "Noto Sans JP", sans-serif;
    font-size: clamp(64px, 6.25vw, 90px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
}

.ga-about__what {
    position: relative;
    z-index: 2;
    min-height: 902px;
    overflow-x: clip;
    color: #313131;
    background-color: #fff;
}

.ga-about__what-inner {
    position: relative;
    width: min(calc(100% - clamp(56px, 5.555556vw, 80px)), 1280px);
    max-width: 1280px;
    min-height: 902px;
    margin: 0 auto;
}

.ga-about__what-heading {
    position: absolute;
    top: 160px;
    left: 0;
}

.ga-about__what-label {
    margin: 0;
    color: var(--313131, #313131);
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(16px, 1.388889vw, 20px);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

#page_content .ga-about__what-title {
    color: #313131;
    font-family: "Google Sans Flex", "Noto Sans JP", sans-serif;
    font-size: clamp(64px, 6.25vw, 90px);
    font-style: normal;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    font-variation-settings: "GRAD" 0, "ROND" 0, "wdth" 100;
}

#page_content .ga-about__what-title::before,
#page_content .ga-about__what-title::after {
    content: normal;
}

.ga-about__what-title span {
    display: block;
}

.ga-about__what-text {
    position: absolute;
    top: 168px;
    left: 621px;
    width: 659px;
    color: var(--313131, #313131);
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(15px, 1.25vw, 18px);
    font-style: normal;
    font-weight: 500;
    line-height: 2.111111;
    letter-spacing: 0;
}

#page_content .ga-about__what-text p {
    margin: 0;
    color: #313131;
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(15px, 1.25vw, 18px);
    font-style: normal;
    font-weight: 500;
    line-height: 2.111111;
    letter-spacing: 0;
}

#page_content .ga-about__what-text p + p {
    margin-top: clamp(28px, 2.638889vw, 38px);
}

.ga-about__what-gallery {
    /* 1440pxカンプの31pxを基準に比例させます。 */
    --gallery-gap: clamp(20px, 2.152778vw, 31px);
    --gallery-third-gap: calc(var(--gallery-gap) / 3);
    position: absolute;
    top: 668px;
    left: 0;
    width: 100%;
    overflow: hidden;
}

.ga-about__what-gallery-track {
    display: flex;
    gap: 0;
    width: max-content;
    /* WordPress本文に混入した全角スペースを匿名Flex要素として広げません。 */
    font-size: 0;
    animation: ga-about-gallery-loop 36s linear infinite;
    will-change: transform;
}

.ga-about__what-image + .ga-about__what-image {
    margin-left: var(--gallery-gap);
}

.ga-about__what-image {
    flex: 0 0 590px;
    width: 590px;
    height: auto;
    aspect-ratio: 590 / 389;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    scroll-snap-align: start;
}

.ga-about__what-image--solar {
    background-image: url("../../images/about-new/about-what-01.png");
}

.ga-about__what-image--power {
    background-image: url("../../images/about-new/about-what-02.png");
}

.ga-about__what-image--city {
    background-image: url("../../images/about-new/about-what-03.png");
}

@keyframes ga-about-gallery-loop {
    to {
        transform: translate3d(
            calc(-33.333333% - var(--gallery-third-gap)),
            0,
            0
        );
    }
}

@media (prefers-reduced-motion: reduce) {
    .ga-about__what-gallery {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .ga-about__what-gallery::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .ga-about__what-gallery-track {
        animation: none;
        will-change: auto;
    }
}

.ga-about__policy {
    position: relative;
    z-index: 1;
    height: 898px;
    color: #313131;
    background-color: #f3f3ec;
}

.ga-about__policy-inner {
    position: relative;
    width: min(calc(100% - clamp(56px, 5.555556vw, 80px)), 1280px);
    max-width: 1280px;
    height: 898px;
    margin: 0 auto;
}

#page_content .ga-about__policy-label {
    position: absolute;
    top: 340px;
    left: 190px;
    display: flex;
    align-items: center;
    gap: clamp(5px, 0.434028vw, 6.25px);
    margin: 0;
    color: #313131;
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(14px, 0.972222vw, 15px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
}

.ga-about__policy-icon {
    display: block;
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    background-image: url("../../images/about-new/policy-icon.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#page_content .ga-about__policy-title {
    position: absolute;
    top: 385px;
    left: 190px;
    margin: 0;
    color: #313131;
    font-family: "Google Sans Flex", sans-serif;
    font-size: clamp(56px, 5.416667vw, 78px);
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    font-variation-settings: "GRAD" 0, "ROND" 0, "wdth" 100;
}

#page_content .ga-about__policy-title::before,
#page_content .ga-about__policy-title::after {
    content: normal;
}

#page_content .ga-about__policy-text {
    position: absolute;
    top: 521px;
    left: 190px;
    margin: 0;
    color: #313131;
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(18px, 1.527778vw, 22px);
    font-weight: 700;
    line-height: 2;
    letter-spacing: 0;
}

.ga-about__policy-diagram {
    position: absolute;
    top: 317px;
    left: 661px;
    width: 439px;
    height: 411px;
    background-image: url("../../images/about-new/policy-diagram.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* --------------------------------------------------
   VISION / MISSION
-------------------------------------------------- */
.ga-about__vision-mission {
    --ga-about-vision-copy-left: max(230px, calc(50vw - 450px));
    position: relative;
    width: 100%;
    height: 1349px;
    margin-top: 0;
    overflow: hidden;
    background: #fff;
}

.ga-about__vision-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 880px;
    background-image:
        linear-gradient(rgba(8, 8, 8, 0.3), rgba(8, 8, 8, 0.3)),
        url("../../images/about-new/vision.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

.ga-about__vision-card,
.ga-about__mission-card {
    position: absolute;
    z-index: 1;
    background: #fff;
}

.ga-about__vision-card {
    top: 0;
    left: 0;
    width: 57.222222%;
    height: 490px;
}

.ga-about__mission-image {
    position: absolute;
    top: 846px;
    left: 0;
    width: 43.125%;
    height: 503px;
    background-image:
        linear-gradient(rgba(8, 8, 8, 0.3), rgba(8, 8, 8, 0.3)),
        url("../../images/about-new/mission.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.ga-about__mission-card {
    top: 846px;
    right: 0;
    width: 56.875%;
    height: 503px;
}

#page_content .ga-about__vision-mission-label {
    position: absolute;
    display: flex;
    align-items: center;
    gap: clamp(5px, 0.434028vw, 6.25px);
    margin: 0;
    color: #313131;
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(14px, 0.972222vw, 15px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
}

.ga-about__vision-card .ga-about__vision-mission-label {
    top: 123px;
    left: var(--ga-about-vision-copy-left);
}

.ga-about__mission-card .ga-about__vision-mission-label {
    top: 83px;
    left: 12.087912%;
}

#page_content .ga-about__vision-mission-title {
    position: absolute;
    margin: 0;
    color: #313131;
    font-family: "Google Sans Flex", sans-serif;
    font-size: clamp(56px, 5.416667vw, 78px);
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    font-variation-settings: "GRAD" 0, "ROND" 0, "wdth" 100;
}

#page_content .ga-about__vision-mission-title::before,
#page_content .ga-about__vision-mission-title::after {
    content: normal;
}

.ga-about__vision-card .ga-about__vision-mission-title {
    top: 170px;
    left: var(--ga-about-vision-copy-left);
}

.ga-about__mission-card .ga-about__vision-mission-title {
    top: 130px;
    left: 12.087912%;
}

#page_content .ga-about__vision-mission-text {
    position: absolute;
    margin: 0;
    color: #313131;
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(18px, 1.527778vw, 22px);
    font-weight: 700;
    letter-spacing: 0;
}

#page_content .ga-about__vision-text {
    top: 306px;
    left: var(--ga-about-vision-copy-left);
    line-height: 2;
}

#page_content .ga-about__mission-text {
    top: 266px;
    left: 12.087912%;
    width: min(80%, 460px);
    line-height: 2.090909;
}

/* --------------------------------------------------
   VALUE
-------------------------------------------------- */
.ga-about__value {
    position: relative;
    width: 100%;
    height: 1102px;
    background: #fff;
}

.ga-about__value-inner {
    position: relative;
    width: min(calc(100% - clamp(56px, 5.555556vw, 80px)), 1280px);
    height: 100%;
    margin: 0 auto;
}

#page_content .ga-about__value-label {
    position: absolute;
    top: 121px;
    left: 190px;
    display: flex;
    align-items: center;
    gap: clamp(5px, 0.434028vw, 6.25px);
    margin: 0;
    color: #313131;
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(14px, 0.972222vw, 15px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
}

#page_content .ga-about__value-title {
    position: absolute;
    top: 168px;
    left: 190px;
    margin: 0;
    color: #313131;
    font-family: "Google Sans Flex", "Noto Sans JP", sans-serif;
    font-size: clamp(56px, 5.416667vw, 78px);
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
}

#page_content .ga-about__value-title::before,
#page_content .ga-about__value-title::after {
    content: normal;
}

.ga-about__value-list {
    position: absolute;
    inset: 0;
}

.ga-about__value-item {
    position: absolute;
    left: 0;
    width: 100%;
    height: 170px;
}

.ga-about__value-item--01 {
    top: 304px;
}

.ga-about__value-item--02 {
    top: 474px;
}

.ga-about__value-item--03 {
    top: 638px;
}

.ga-about__value-item--04 {
    top: 808px;
}

.ga-about__value-rule {
    position: absolute;
    top: 0;
    left: 190px;
    width: 909px;
    height: 3px;
    background:
        linear-gradient(#eaeaea, #eaeaea) left top / 909px 1px no-repeat,
        linear-gradient(#15b9f5, #15b9f5) left 1px / 31px 2px no-repeat;
}

#page_content .ga-about__value-tag,
#page_content .ga-about__value-copy {
    position: absolute;
    margin: 0;
    color: #313131;
    font-family: "Noto Sans JP", sans-serif;
    font-style: normal;
}

#page_content .ga-about__value-tag {
    top: 68px;
    left: 190px;
    font-size: clamp(16px, 1.25vw, 18px);
    font-weight: 500;
    line-height: normal;
}

.ga-about__value-item--01 .ga-about__value-tag {
    top: 70px;
}

#page_content .ga-about__value-copy {
    top: 62px;
    left: 485px;
    font-size: clamp(20px, 1.805556vw, 26px);
    font-weight: 700;
    line-height: normal;
}

/* --------------------------------------------------
   COMPANY INFORMATION
-------------------------------------------------- */
.ga-about__company {
    position: relative;
    width: 100%;
    height: 2203px;
    background: #313131;
}

.ga-about__company-inner {
    position: relative;
    width: min(calc(100% - clamp(56px, 5.555556vw, 80px)), 1280px);
    height: 100%;
    margin: 0 auto;
}

#page_content .ga-about__company-label {
    position: absolute;
    top: 145px;
    left: 14.84375%;
    display: flex;
    align-items: center;
    gap: clamp(5px, 0.434028vw, 6.25px);
    margin: 0;
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(14px, 0.972222vw, 15px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
}

#page_content .ga-about__company-title {
    position: absolute;
    top: 192px;
    left: 14.84375%;
    margin: 0;
    color: #fff;
    font-family: "Google Sans Flex", "Noto Sans JP", sans-serif;
    font-size: clamp(56px, 5.416667vw, 78px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
}

#page_content .ga-about__company-title::before,
#page_content .ga-about__company-title::after {
    content: normal;
}

#page_content .ga-about__company-title span {
    display: block;
}

.ga-about__company-list {
    position: absolute;
    top: 388px;
    left: 14.84375%;
    width: 71.09375%;
    margin: 0;
}

.ga-about__company-row {
    display: grid;
    grid-template-columns: 24.065934% 75.934066%;
    box-sizing: border-box;
    height: 83px;
    padding-top: clamp(24px, 2.361111vw, 34px);
    border-bottom: 1px solid #505050;
}

#page_content .ga-about__company-term,
#page_content .ga-about__company-data,
#page_content .ga-about__company-row a {
    margin: 0;
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(14px, 1.041667vw, 15px);
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
}

.ga-about__company-row--address .ga-about__company-data {
    display: flex;
    align-items: flex-start;
    gap: clamp(16px, 1.666667vw, 24px);
    white-space: nowrap;
}

#page_content .ga-about__company-map {
    display: inline-flex;
    align-items: center;
    gap: clamp(5px, 0.416667vw, 6px);
}

.ga-about__company-pin {
    display: block;
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    background: url("../../images/about-new/company-map-pin.png") center / contain no-repeat;
}

.ga-about__company-row--contact {
    height: 118px;
}

.ga-about__company-row--contact .ga-about__company-term,
.ga-about__company-row--contact .ga-about__company-data,
.ga-about__company-row--business .ga-about__company-data,
.ga-about__company-row--makers .ga-about__company-data,
.ga-about__company-row--history .ga-about__company-data {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.388889vw, 20px);
}

.ga-about__company-row--contact .ga-about__company-term,
.ga-about__company-row--contact .ga-about__company-data {
    gap: clamp(14px, 1.319444vw, 19px);
}

.ga-about__company-row--business {
    height: 153px;
}

.ga-about__company-row--makers {
    height: 468px;
}

.ga-about__company-row--history {
    height: 329px;
    border-bottom: 0;
}

#page_content .ga-about__company-row--history b {
    display: inline-block;
    width: 90px;
    font: inherit;
}

/* PC版：企業情報の下端からSIMULATIONカード上端まで、1440px時120px */
@media screen and (min-width: 1280px) {
    #page_content > .ga-entry-links {
        padding-top: calc(120 / var(--design-pc) * 100cqw);
    }
}

/* 1279px以下は絶対配置を解除し、SP・タブレットの通常フローへ切り替えます。 */
@media (max-width: 1279px) {
    .ga-about__pc-break {
        display: none;
    }

    .ga-about {
        --about-gutter: clamp(16px, 5.128205vw, 20px);
        --about-gutter-negative: clamp(-20px, -5.128205vw, -16px);
        --about-gutter-total: clamp(32px, 10.25641vw, 40px);
    }

    #main_title {
        min-height: 480px;
        background-position: 58% center;
    }

    #main_title .container {
        width: calc(100% - clamp(32px, 10.25641vw, 40px));
        min-height: 480px;
        padding: 0;
    }

    #main_title h1 {
        top: 348px;
        left: 0;
        font-size: clamp(14px, 3.589744vw, 15px);
        line-height: 1;
    }

    #breadcrumbs {
        top: 260px;
        height: 29px;
    }

    #breadcrumbs .container {
        width: calc(100% - clamp(32px, 10.25641vw, 40px));
        padding-left: 0;
    }

    .ga-about__hero-title {
        top: 382px;
        left: clamp(16px, 5.128205vw, 20px);
        font-size: clamp(48px, 14.358974vw, 56px);
    }

    .ga-about__what {
        min-height: auto;
        padding:
            clamp(48px, 14.358974vw, 56px)
            var(--about-gutter)
            clamp(52px, 16.410256vw, 64px);
    }

    .ga-about__what-inner {
        width: 100%;
        min-height: auto;
    }

    .ga-about__what-heading,
    .ga-about__what-text {
        position: static;
    }

    .ga-about__what-label {
        font-size: clamp(15px, 4.102564vw, 16px);
    }

    #page_content .ga-about__what-title {
        font-size: clamp(48px, 15vw, 68px);
        line-height: 0.95;
    }

    /* 共通page.cssのh2余白はSP・タブレットだけ解除します。PC版はカンプ通りの既存指定を維持します。 */
    #page_content .ga-about__what-title,
    #page_content .ga-about__policy-title,
    #page_content .ga-about__vision-mission-title,
    #page_content .ga-about__value-title,
    #page_content .ga-about__company-title {
        margin: 0;
        padding: 0;
        padding-top: 16px;
    }

    .ga-about__what-text {
        width: 100%;
        margin-top: clamp(28px, 9.230769vw, 36px);
        font-size: clamp(14px, 3.846154vw, 15px);
        line-height: 2;
    }

    #page_content .ga-about__what-text p {
        font-size: clamp(14px, 3.846154vw, 15px);
        line-height: 2;
    }

    #page_content .ga-about__what-text p + p {
        margin-top: clamp(20px, 6.153846vw, 24px);
    }

    .ga-about__what-gallery {
        --gallery-gap: clamp(12px, 4.102564vw, 16px);
        position: static;
        width: calc(100% + var(--about-gutter-total));
        margin:
            clamp(32px, 10.25641vw, 40px)
            var(--about-gutter-negative)
            0;
        padding:
            0
            var(--about-gutter)
            clamp(10px, 3.076923vw, 12px);
    }

    .ga-about__what-image {
        flex-basis: min(82vw, 360px);
        width: min(82vw, 360px);
        height: auto;
        aspect-ratio: 590 / 389;
    }

    .ga-about__policy {
        height: auto;
        padding:
            clamp(52px, 16.410256vw, 64px)
            var(--about-gutter)
            clamp(60px, 18.461538vw, 72px);
    }

    .ga-about__policy-inner {
        width: 100%;
        height: auto;
    }

    #page_content .ga-about__policy-label,
    #page_content .ga-about__policy-title,
    #page_content .ga-about__policy-text,
    .ga-about__policy-diagram {
        position: static;
    }

    #page_content .ga-about__policy-title {
        font-size: clamp(52px, 18vw, 64px);
        line-height: 1;
    }

    #page_content .ga-about__policy-text {
        margin-top: clamp(26px, 8.205128vw, 32px);
        font-size: clamp(16px, 4.358974vw, 17px);
        line-height: 2;
    }

    .ga-about__policy-diagram {
        width: min(100%, 439px);
        height: auto;
        margin: clamp(32px, 10.25641vw, 40px) auto 0;
        aspect-ratio: 439 / 411;
    }

    .ga-about__vision-mission {
        display: flex;
        flex-direction: column;
        height: auto;
        margin-top: 0;
        overflow: visible;
    }

    .ga-about__vision-image,
    .ga-about__vision-card,
    .ga-about__mission-image,
    .ga-about__mission-card {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: 100%;
        height: auto;
    }

    .ga-about__vision-card {
        order: 1;
        box-sizing: border-box;
        min-height: 0;
        padding:
            clamp(48px, 14.358974vw, 56px)
            var(--about-gutter)
            clamp(52px, 16.410256vw, 64px);
    }

    .ga-about__vision-image {
        order: 2;
        min-height: 0;
        aspect-ratio: 16 / 10;
        background-position: center, center top;
        background-size: cover, 104% auto;
    }

    .ga-about__mission-image {
        order: 4;
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .ga-about__mission-card {
        order: 3;
        box-sizing: border-box;
        min-height: 0;
        padding:
            clamp(48px, 14.358974vw, 56px)
            var(--about-gutter)
            clamp(52px, 16.410256vw, 64px);
    }

    #page_content .ga-about__vision-card .ga-about__vision-mission-label,
    #page_content .ga-about__mission-card .ga-about__vision-mission-label,
    #page_content .ga-about__vision-card .ga-about__vision-mission-title,
    #page_content .ga-about__mission-card .ga-about__vision-mission-title,
    #page_content .ga-about__vision-text,
    #page_content .ga-about__mission-text {
        position: static;
        top: auto;
        left: auto;
    }

    #page_content .ga-about__vision-card .ga-about__vision-mission-label,
    #page_content .ga-about__mission-card .ga-about__vision-mission-label {
        top: auto;
    }

    #page_content .ga-about__vision-card .ga-about__vision-mission-title,
    #page_content .ga-about__mission-card .ga-about__vision-mission-title {
        top: auto;
        font-size: clamp(52px, 18vw, 64px);
        line-height: 1;
    }

    #page_content .ga-about__vision-text,
    #page_content .ga-about__mission-text {
        top: auto;
        width: 100%;
        margin-top: clamp(26px, 8.205128vw, 32px);
        font-size: clamp(16px, 4.358974vw, 17px);
        line-height: 2;
    }

    .ga-about__value {
        height: auto;
    }

    .ga-about__value-inner {
        width: 100%;
        height: auto;
        padding:
            clamp(52px, 16.410256vw, 64px)
            var(--about-gutter)
            clamp(60px, 18.461538vw, 72px);
    }

    #page_content .ga-about__value-label,
    #page_content .ga-about__value-title,
    .ga-about__value-list,
    .ga-about__value-item,
    .ga-about__value-rule,
    #page_content .ga-about__value-tag,
    #page_content .ga-about__value-copy {
        position: static;
    }

    #page_content .ga-about__value-title {
        font-size: clamp(56px, 19vw, 64px);
        line-height: 1;
    }

    .ga-about__value-list {
        margin-top: clamp(32px, 10.25641vw, 40px);
    }

    .ga-about__value-item {
        width: 100%;
        height: auto;
    }

    .ga-about__value-item + .ga-about__value-item {
        margin-top: clamp(6px, 2.051282vw, 8px);
    }

    .ga-about__value-rule {
        width: 100%;
        height: 3px;
    }

    #page_content .ga-about__value-tag {
        margin-top: clamp(20px, 6.153846vw, 24px);
        font-size: clamp(15px, 4.102564vw, 16px);
    }

    #page_content .ga-about__value-copy {
        margin-top: clamp(12px, 4.102564vw, 16px);
        font-size: clamp(18px, 5.128205vw, 20px);
        line-height: 1.7;
    }

    .ga-about__company {
        height: auto;
        padding:
            clamp(49.778px, 15.555556vw, 66.889px)
            var(--about-gutter);
    }

    .ga-about__company-inner {
        width: 100%;
        height: auto;
    }

    #page_content .ga-about__company-label,
    #page_content .ga-about__company-title,
    .ga-about__company-list {
        position: static;
    }

    #page_content .ga-about__company-title {
        font-size: clamp(32px, 10vw, 44px);
        line-height: 0.95;
    }

    #page_content .ga-about__company-title span {
        white-space: nowrap;
    }

    .ga-about__company-list {
        width: 100%;
        margin-top: clamp(32px, 10.25641vw, 40px);
    }

    .ga-about__company-row,
    .ga-about__company-row--contact,
    .ga-about__company-row--business,
    .ga-about__company-row--makers,
    .ga-about__company-row--history {
        display: block;
        width: 100%;
        height: auto;
    }

    #page_content .ga-about__company-term,
    #page_content .ga-about__company-data,
    #page_content .ga-about__company-row a {
        font-size: clamp(14px, 3.589744vw, 15px);
        line-height: 1.8;
    }

    #page_content .ga-about__company-term {
        font-weight: 700;
    }

    #page_content .ga-about__company-data {
        margin-top: clamp(10px, 3.076923vw, 12px);
    }

    .ga-about__company-row--address .ga-about__company-data {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: clamp(6px, 2.051282vw, 8px);
        white-space: normal;
    }

    .ga-about__company-row--contact .ga-about__company-term,
    .ga-about__company-row--contact .ga-about__company-data,
    .ga-about__company-row--business .ga-about__company-data,
    .ga-about__company-row--makers .ga-about__company-data,
    .ga-about__company-row--history .ga-about__company-data {
        gap: clamp(4px, 1.025641vw, 6px);
    }

    #page_content .ga-about__company-row--history b {
        width: 62px;
    }
}

/* --------------------------------------------------
   SP 767px以下：本文の最小文字サイズを15pxに統一
-------------------------------------------------- */
@media (max-width: 767.98px) {
    /* ABOUTで読み込む既存のbody最小幅を解除し、320pxでも右端を切らない。 */
    body {
        min-width: 0;
    }

    body:has(.ga-about) {
        --about-sp-gutter: clamp(16px, 5.333333vw, 20px);
        --about-sp-gutter-negative: clamp(-20px, -5.333333vw, -16px);
        --about-sp-gutter-total: clamp(32px, 10.666667vw, 40px);
        --about-sp-font-display: clamp(52px, 14.933333vw, 56px);
        --about-sp-font-company: clamp(42px, 12.8vw, 48px);
        --about-sp-font-label: clamp(15px, 4.266667vw, 16px);
        --about-sp-font-emphasis: clamp(16px, 4.533333vw, 17px);
        --about-sp-font-value-copy: clamp(18px, 5.333333vw, 20px);
        --about-sp-space-6: clamp(4px, 1.6vw, 6px);
        --about-sp-space-8: clamp(6px, 2.133333vw, 8px);
        --about-sp-space-12: clamp(10px, 3.2vw, 12px);
        --about-sp-space-16: clamp(12px, 4.266667vw, 16px);
        --about-sp-space-24: clamp(20px, 6.4vw, 24px);
        --about-sp-space-32: clamp(26px, 8.533333vw, 32px);
        --about-sp-space-36: clamp(28px, 9.6vw, 36px);
        --about-sp-space-40: clamp(32px, 10.666667vw, 40px);
        --about-sp-space-56: clamp(48px, 14.933333vw, 56px);
        --about-sp-space-64: clamp(52px, 17.066667vw, 64px);
        --about-sp-space-72: clamp(60px, 19.2vw, 72px);
        --about-sp-company-space: clamp(49.778px, 15.555556vw, 66.889px);
    }

    body:has(.ga-about) #breadcrumbs,
    body:has(.ga-about) #breadcrumbs a,
    body:has(.ga-about) #breadcrumbs span,
    body:has(.ga-about) #breadcrumbs li {
        font-size: 15px;
    }

    .ga-about {
        --about-gutter: var(--about-sp-gutter);
        --about-gutter-negative: var(--about-sp-gutter-negative);
        --about-gutter-total: var(--about-sp-gutter-total);
    }

    /* SPの英字見出しは375px時56px。画面が狭い場合は52pxまで縮小します。 */
    .ga-about__hero-title,
    #page_content .ga-about__what-title,
    #page_content .ga-about__policy-title,
    #page_content .ga-about__vision-card .ga-about__vision-mission-title,
    #page_content .ga-about__mission-card .ga-about__vision-mission-title,
    #page_content .ga-about__value-title {
        font-size: var(--about-sp-font-display);
    }

    /* 長いINFORMATIONを1行に収めながら、ほかの見出しとのサイズ差を縮めます。 */
    #page_content .ga-about__company-title {
        font-size: var(--about-sp-font-company);
        line-height: 1;
    }

    #main_title h1,
    #page_content .ga-about__what-text,
    #page_content .ga-about__what-text p,
    #page_content .ga-about__policy-label,
    #page_content .ga-about__vision-mission-label,
    #page_content .ga-about__value-label,
    #page_content .ga-about__company-label,
    #page_content .ga-about__company-term,
    #page_content .ga-about__company-data,
    #page_content .ga-about__company-row a {
        font-size: 15px;
    }

    #page_content .ga-about__company-term,
    #page_content .ga-about__company-data,
    #page_content .ga-about__company-row a {
        line-height: 1.55;
    }

    .ga-about__company-row,
    .ga-about__company-row--contact,
    .ga-about__company-row--business,
    .ga-about__company-row--makers,
    .ga-about__company-row--history {
        padding: var(--about-sp-space-12) 0;
    }

    #page_content .ga-about__company-data {
        margin-top: var(--about-sp-space-6);
    }

    .ga-about__company-row--address .ga-about__company-data,
    .ga-about__company-row--business .ga-about__company-data,
    .ga-about__company-row--makers .ga-about__company-data {
        gap: 2px;
    }

    .ga-about__company-row--history .ga-about__company-data {
        gap: var(--about-sp-space-6);
    }

    .ga-about__company-row--contact {
        display: grid;
        grid-template-columns: 1fr;
    }

    .ga-about__company-row--contact .ga-about__company-term,
    .ga-about__company-row--contact .ga-about__company-data {
        display: contents;
    }

    .ga-about__company-row--contact .ga-about__company-term span:first-child {
        order: 1;
    }

    .ga-about__company-row--contact .ga-about__company-data span:first-child {
        order: 2;
        margin-top: var(--about-sp-space-6);
    }

    .ga-about__company-row--contact .ga-about__company-term span:nth-child(2) {
        order: 3;
        margin-top: var(--about-sp-space-24);
    }

    .ga-about__company-row--contact .ga-about__company-data span:nth-child(2) {
        order: 4;
        margin-top: var(--about-sp-space-6);
    }

    #main_title .container,
    #breadcrumbs .container {
        width: calc(100% - var(--about-sp-gutter-total));
    }

    .ga-about__hero-title {
        left: var(--about-sp-gutter);
    }

    .ga-about__what {
        padding:
            var(--about-sp-space-56)
            var(--about-sp-gutter)
            var(--about-sp-space-64);
    }

    .ga-about__what-label {
        font-size: var(--about-sp-font-label);
    }

    .ga-about__what-text {
        margin-top: var(--about-sp-space-36);
    }

    #page_content .ga-about__what-text p + p {
        margin-top: var(--about-sp-space-24);
    }

    .ga-about__what-gallery {
        --gallery-gap: var(--about-sp-space-16);
        margin:
            var(--about-sp-space-40)
            var(--about-gutter-negative)
            0;
        padding:
            0
            var(--about-sp-gutter)
            var(--about-sp-space-12);
    }

    .ga-about__policy {
        padding:
            var(--about-sp-space-64)
            var(--about-sp-gutter)
            var(--about-sp-space-72);
    }

    #page_content .ga-about__policy-text,
    #page_content .ga-about__vision-text,
    #page_content .ga-about__mission-text {
        margin-top: var(--about-sp-space-32);
        font-size: var(--about-sp-font-emphasis);
    }

    .ga-about__policy-diagram {
        margin-top: var(--about-sp-space-40);
    }

    .ga-about__vision-card,
    .ga-about__mission-card {
        padding:
            var(--about-sp-space-56)
            var(--about-sp-gutter)
            var(--about-sp-space-64);
    }

    .ga-about__value-inner {
        padding:
            var(--about-sp-space-64)
            var(--about-sp-gutter)
            var(--about-sp-space-72);
    }

    .ga-about__value-list,
    .ga-about__company-list {
        margin-top: var(--about-sp-space-40);
    }

    .ga-about__value-item + .ga-about__value-item {
        margin-top: var(--about-sp-space-8);
    }

    #page_content .ga-about__value-tag {
        margin-top: var(--about-sp-space-24);
        font-size: var(--about-sp-font-label);
    }

    #page_content .ga-about__value-copy {
        margin-top: var(--about-sp-space-16);
        font-size: var(--about-sp-font-value-copy);
    }

    .ga-about__company {
        padding:
            var(--about-sp-company-space)
            var(--about-sp-gutter);
    }

}

/* --------------------------------------------------
   LARGE SMARTPHONE 640px - 767px
   POLICYは、横幅に余裕ができる範囲だけ2列にします。
-------------------------------------------------- */
@media (min-width: 640px) and (max-width: 767px) {
    /* 768pxのタブレット表示へ向けて、56pxから64pxまで連続的に拡大します。 */
    #page_content .ga-about__policy-title,
    #page_content .ga-about__vision-card .ga-about__vision-mission-title,
    #page_content .ga-about__mission-card .ga-about__vision-mission-title,
    #page_content .ga-about__value-title {
        font-size: clamp(56px, calc(16px + 6.25vw), 64px);
    }

    .ga-about__policy-inner {
        display: grid;
        grid-template-columns:
            minmax(280px, 1fr)
            clamp(280px, 42vw, 340px);
        grid-template-areas:
            "label diagram"
            "title diagram"
            "text diagram";
        column-gap: clamp(20px, 3.125vw, 24px);
        align-items: start;
    }

    #page_content .ga-about__policy-label {
        grid-area: label;
    }

    #page_content .ga-about__policy-title {
        grid-area: title;
    }

    #page_content .ga-about__policy-text {
        grid-area: text;
    }

    .ga-about__policy-diagram {
        grid-area: diagram;
        align-self: start;
        width: 100%;
        max-width: 340px;
        margin: 0;
    }
}

/* --------------------------------------------------
   TABLET 768px - 1279px
-------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1279px) {
    body:has(.ga-about) #page_content #breadcrumbs,
    body:has(.ga-about) #page_content #breadcrumbs a,
    body:has(.ga-about) #page_content #breadcrumbs span,
    body:has(.ga-about) #page_content #breadcrumbs li {
        font-size: 15px;
        line-height: 15px;
    }

    #main_title {
        min-height: clamp(520px, 58.651026vw, 600px);
    }

    #main_title .container {
        width: calc(100% - clamp(80px, 10.416667vw, 106px));
        min-height: clamp(520px, 58.651026vw, 600px);
    }

    #main_title h1 {
        top: clamp(385px, 44.183773vw, 452px);
        font-size: clamp(16px, 1.953125vw, 18px);
    }

    #breadcrumbs {
        top: clamp(300px, 34.213099vw, 350px);
    }

    #breadcrumbs .container {
        width: calc(100% - clamp(80px, 10.416667vw, 106px));
    }

    .ga-about__hero-title {
        top: clamp(425px, 49.853372vw, 510px);
        left: clamp(40px, 5.208333vw, 53px);
        font-size: clamp(60px, 7.624633vw, 78px);
    }

    .ga-about {
        --about-gutter: clamp(32px, 4.166667vw, 53px);
        --about-gutter-negative: clamp(-53px, -4.166667vw, -32px);
        --about-gutter-total: clamp(64px, 8.333333vw, 106px);
    }

    .ga-about__what {
        padding:
            clamp(72px, 9.375vw, 96px)
            var(--about-gutter)
            clamp(80px, 10.416667vw, 106px);
    }

    #page_content .ga-about__what-title {
        font-size: clamp(68px, 7.624633vw, 78px);
    }

    .ga-about__what-text {
        margin-top: clamp(32px, 4.166667vw, 43px);
        font-size: clamp(16px, 1.759531vw, 18px);
        line-height: 2;
    }

    #page_content .ga-about__what-text p {
        font-size: clamp(16px, 1.759531vw, 18px);
        line-height: 2;
    }

    #page_content .ga-about__what-text p + p {
        margin-top: clamp(24px, 3.125vw, 32px);
    }

    .ga-about__what-gallery {
        margin-top: clamp(40px, 5.208333vw, 53px);
    }

    .ga-about__what-image {
        flex-basis: min(70vw, 590px);
        width: min(70vw, 590px);
    }

    .ga-about__policy {
        padding:
            clamp(72px, 9.375vw, 96px)
            var(--about-gutter)
            clamp(80px, 10.416667vw, 106px);
    }

    .ga-about__policy-inner {
        display: grid;
        grid-template-columns:
            clamp(360px, 29.710711vw, 380px)
            clamp(320px, 29.710711vw, 380px);
        grid-template-areas:
            "label diagram"
            "title diagram"
            "text diagram";
        column-gap: clamp(24px, 3.125vw, 40px);
        justify-content: center;
        align-items: start;
    }

    #page_content .ga-about__policy-label {
        grid-area: label;
    }

    #page_content .ga-about__policy-title {
        grid-area: title;
    }

    #page_content .ga-about__policy-text {
        grid-area: text;
    }

    .ga-about__policy-diagram {
        grid-area: diagram;
        align-self: center;
        width: clamp(320px, 29.710711vw, 380px);
        margin: 0;
    }

    /* タブレットの小見出しは15px未満にしません。 */
    #page_content .ga-about__policy-label,
    #page_content .ga-about__vision-card .ga-about__vision-mission-label,
    #page_content .ga-about__mission-card .ga-about__vision-mission-label,
    #page_content .ga-about__value-label,
    #page_content .ga-about__company-label {
        font-size: clamp(15px, 1.564027vw, 16px);
    }

    #page_content .ga-about__policy-title,
    #page_content .ga-about__vision-card .ga-about__vision-mission-title,
    #page_content .ga-about__mission-card .ga-about__vision-mission-title,
    #page_content .ga-about__value-title {
        font-size: clamp(64px, calc(56px + 1.041667vw), 69.333px);
    }

    #page_content .ga-about__policy-text,
    #page_content .ga-about__vision-text,
    #page_content .ga-about__mission-text {
        margin-top: clamp(32px, 4.166667vw, 43px);
        font-size: clamp(18px, 1.955034vw, 20px);
    }

    .ga-about__vision-card,
    .ga-about__mission-card {
        padding:
            clamp(72px, 9.375vw, 96px)
            0
            clamp(80px, 10.416667vw, 106px);
    }

    #page_content .ga-about__vision-card .ga-about__vision-mission-label,
    #page_content .ga-about__mission-card .ga-about__vision-mission-label,
    #page_content .ga-about__vision-card .ga-about__vision-mission-title,
    #page_content .ga-about__mission-card .ga-about__vision-mission-title,
    #page_content .ga-about__vision-text,
    #page_content .ga-about__mission-text {
        width: min(calc(100% - var(--about-gutter-total)), 800px);
        margin-inline: auto;
    }

    .ga-about__value-inner {
        width: min(calc(100% - var(--about-gutter-total)), 800px);
        margin-inline: auto;
        padding:
            clamp(72px, 9.375vw, 96px)
            0
            clamp(80px, 10.416667vw, 106px);
    }

    .ga-about__value-list {
        margin-top: clamp(40px, 5.208333vw, 53px);
    }

    #page_content .ga-about__value-tag {
        margin-top: clamp(24px, 3.125vw, 32px);
        font-size: clamp(16px, 1.759531vw, 18px);
    }

    #page_content .ga-about__value-copy {
        margin-top: clamp(16px, 2.083333vw, 21px);
        font-size: clamp(20px, 2.346041vw, 24px);
    }

    .ga-about__company {
        padding:
            clamp(80px, 10.416667vw, 106px)
            0;
    }

    .ga-about__company-inner {
        width: min(calc(100% - var(--about-gutter-total)), 800px);
        margin-inline: auto;
    }

    #page_content .ga-about__company-title {
        font-size: clamp(44px, 6.256109vw, 64px);
    }

    .ga-about__company-list {
        margin-top: clamp(40px, 5.208333vw, 53px);
    }

    /* タブレットでは、PC版と同じく項目名と内容を左右2列にします。 */
    .ga-about__company-row {
        display: grid;
        grid-template-columns: 24.065934% minmax(0, 1fr);
        padding-block: clamp(24px, 2.361111vw, 34px);
    }

    #page_content .ga-about__company-data {
        margin-top: 0;
    }

    /* 住所・最寄り駅・MAPも、タブレット幅に収まる間隔で横並びにします。 */
    .ga-about__company-row--address .ga-about__company-data {
        flex-direction: row;
        gap: clamp(8px, 1.041667vw, 13px);
        white-space: nowrap;
    }

    #page_content .ga-about__company-term,
    #page_content .ga-about__company-data,
    #page_content .ga-about__company-row a {
        font-size: clamp(15px, 1.564027vw, 16px);
    }

    /*
     * ABOUT下部の共通パーツだけをタブレット用に上書きします。
     * 共通style.cssの820px／821px境界を、このページでは使いません。
     */
    #page_content > .ga-entry-links {
        padding-top: clamp(40px, calc(-60px + 13.020833vw), 106.667px);
    }

    .ga-contact {
        container-type: inline-size;
    }

    .ga-contact__inner {
        width: 100%;
        max-width: none;
        height: clamp(280px, calc(249.333px + 3.993056vw), 300.444px);
    }

    .ga-contact__label {
        left: clamp(40px, calc(-6.667px + 6.076389vw), 71.111px);
        top: clamp(78px, calc(60.333px + 2.300347vw), 89.778px);
        gap: 3.25px;
        font-size: 15px;
        line-height: 1;
    }

    .ga-contact__mark {
        width: clamp(14.889px, calc(19.542px - 0.363715vw), 16.75px);
        height: clamp(14.889px, calc(19.542px - 0.363715vw), 16.75px);
        flex-basis: clamp(14.889px, calc(19.542px - 0.363715vw), 16.75px);
    }

    .ga-contact__title {
        left: clamp(38px, calc(-9px + 6.119792vw), 69.333px);
        top: clamp(124px, calc(100.667px + 3.038194vw), 139.556px);
        font-size: clamp(58px, calc(51.667px + 0.824653vw), 62.222px);
        line-height: clamp(58px, calc(57px + 0.130208vw), 58.667px);
    }

    .ga-contact__arrow {
        top: clamp(120px, calc(101.333px + 2.430556vw), 132.444px);
        right: clamp(40px, calc(-4px + 5.729167vw), 69.333px);
        width: clamp(35.556px, calc(46.667px - 0.868056vw), 40px);
        height: clamp(35.556px, calc(46.667px - 0.868056vw), 40px);
        border-radius: 5px;
    }

    .ga-contact__arrow-icon {
        width: 100%;
        height: 100%;
    }

    /*
     * Footer layout is owned by the shared style.css.
     * Disable this duplicated tablet block so TOP and ABOUT use the same
     * shared footer breakpoints as every other page.
     *
    #footer.ga-footer {
        container-type: inline-size;
        min-height: clamp(540px, 65.208333vw, 834px);
    }

    #footer.ga-footer .ga-footer__inner {
        width: 100%;
        max-width: none;
        min-height: clamp(540px, 65.208333vw, 834px);
        padding:
            clamp(48px, 5.625vw, 71.944px)
            clamp(17.778px, calc(23.333px - 0.434028vw), 20px)
            clamp(25px, calc(162.667px - 10.763889vw), 80px);
        container-type: inline-size;
    }

    #footer.ga-footer .ga-footer__top {
        display: flex;
        justify-content: space-between;
        gap: clamp(20px, calc(-33.333px + 6.944444vw), 55.556px);
        padding:
            0
            clamp(0px, calc(-74.667px + 9.722222vw), 49.778px)
            0
            clamp(0px, calc(-64px + 8.333333vw), 42.667px);
    }

    #footer.ga-footer .ga-footer__catch {
        flex: 0 0 auto;
        font-size: clamp(32px, calc(50.5 / var(--design-pc) * 100cqw), 44.861px);
        line-height: clamp(43px, calc(68 / var(--design-pc) * 100cqw), 60.397px);
    }

    #footer.ga-footer .ga-footer__nav {
        display: grid;
        grid-template-columns:
            minmax(100px, 0.85fr)
            minmax(180px, 1.45fr)
            minmax(150px, 1fr);
        grid-template-rows: auto auto;
        column-gap: clamp(16px, calc(44 / var(--design-pc) * 100cqw), 39.08px);
        row-gap: calc(40 / var(--design-pc) * 100cqw);
        width: clamp(475px, calc(720 / var(--design-pc) * 100cqw), 621.7px);
        margin-top: 0;
        padding-top: calc(18 / var(--design-pc) * 100cqw);
    }

    #footer.ga-footer .ga-footer__nav-group--about {
        grid-column: 1;
        grid-row: 1;
    }

    #footer.ga-footer .ga-footer__nav-group--personal {
        grid-column: 2;
        grid-row: 1;
    }

    #footer.ga-footer .ga-footer__nav-group--corporate {
        grid-column: 2;
        grid-row: 2;
    }

    #footer.ga-footer .ga-footer__nav-group--links {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    #footer.ga-footer .ga-footer__nav-heading,
    #footer.ga-footer .ga-footer__nav-list--primary a {
        font-size: clamp(15px, calc(18 / var(--design-pc) * 100cqw), 15.988px);
        line-height: 16px;
    }

    #footer.ga-footer .ga-footer__nav-heading + .ga-footer__nav-list {
        padding-top: calc(30 / var(--design-pc) * 100cqw);
    }

    #footer.ga-footer .ga-footer__nav-list {
        gap: calc(15 / var(--design-pc) * 100cqw);
        padding-top: 0;
    }

    #footer.ga-footer .ga-footer__nav-list a {
        font-size: 15px;
        line-height: 16px;
    }

    #footer.ga-footer .ga-footer__company {
        container-type: normal;
        width: calc(1400 / var(--design-pc) * 100cqw);
        height: clamp(48px, calc(72 / var(--design-pc) * 100cqw), 63.95px);
        min-height: clamp(48px, calc(72 / var(--design-pc) * 100cqw), 63.95px);
        margin-top: clamp(56px, calc(80 / var(--design-pc) * 100cqw), 71.056px);
        padding: 0 calc(52 / var(--design-pc) * 100cqw);
        border-radius: calc(10 / var(--design-pc) * 100cqw);
    }

    #footer.ga-footer .ga-footer__company.is-expanded {
        height: clamp(180px, calc(260 / var(--design-pc) * 100cqw), 230.931px);
        min-height: clamp(180px, calc(260 / var(--design-pc) * 100cqw), 230.931px);
        padding:
            clamp(24px, calc(43 / var(--design-pc) * 100cqw), 38.191px)
            calc(52 / var(--design-pc) * 100cqw)
            clamp(20px, calc(28 / var(--design-pc) * 100cqw), 24.869px);
    }

    #footer.ga-footer .ga-footer__company::before,
    #footer.ga-footer .ga-footer__company::after {
        width: calc(142.699 / var(--design-pc) * 100cqw);
        height: calc(541.622 / var(--design-pc) * 100cqw);
        border-width: calc(10 / var(--design-pc) * 100cqw);
    }

    #footer.ga-footer .ga-footer__company::before {
        left: calc(950 / var(--design-pc) * 100cqw);
        top: calc(-8 / var(--design-pc) * 100cqw);
    }

    #footer.ga-footer .ga-footer__company::after {
        right: calc(290 / var(--design-pc) * 100cqw);
        top: calc(-128 / var(--design-pc) * 100cqw);
    }

    #footer.ga-footer .ga-footer__brand,
    #footer.ga-footer .ga-footer__company-name,
    #footer.ga-footer .ga-footer__address,
    #footer.ga-footer .ga-footer__bottom {
        opacity: 0;
        pointer-events: none;
        transform: translateY(12px);
    }

    #footer.ga-footer .ga-footer__company.is-expanded .ga-footer__brand,
    #footer.ga-footer .ga-footer__company.is-expanded .ga-footer__company-name,
    #footer.ga-footer .ga-footer__company.is-expanded .ga-footer__address,
    #footer.ga-footer .ga-footer__company.is-expanded .ga-footer__bottom {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    #footer.ga-footer .ga-footer__brand-mark {
        width: clamp(30px, calc(36 / var(--design-pc) * 100cqw), 31.975px);
        height: clamp(30px, calc(36 / var(--design-pc) * 100cqw), 31.975px);
        flex-basis: clamp(30px, calc(36 / var(--design-pc) * 100cqw), 31.975px);
    }

    #footer.ga-footer .ga-footer__brand {
        gap: clamp(8px, calc(10 / var(--design-pc) * 100cqw), 8.882px);
    }

    #footer.ga-footer .ga-footer__brand-text {
        width: clamp(130px, calc(196.435 / var(--design-pc) * 100cqw), 174.442px);
        height: auto;
        aspect-ratio: 196.435 / 21.913;
        font-size: 0;
        line-height: 0;
    }

    #footer.ga-footer .ga-footer__company-name,
    #footer.ga-footer .ga-footer__address {
        font-size: 15px;
        line-height: 18px;
    }

    #footer.ga-footer .ga-footer__company-name {
        margin-top: clamp(15px, calc(26 / var(--design-pc) * 100cqw), 23.093px) !important;
    }

    #footer.ga-footer .ga-footer__address {
        margin-top: clamp(8px, calc(13 / var(--design-pc) * 100cqw), 11.547px) !important;
    }

    #footer.ga-footer .ga-footer__to-top {
        top: calc(14 / var(--design-pc) * 100cqw);
        right: calc(14 / var(--design-pc) * 100cqw);
        width: clamp(42px, calc(56 / var(--design-pc) * 100cqw), 49.739px);
        height: clamp(42px, calc(56 / var(--design-pc) * 100cqw), 49.739px);
        border-radius: calc(10 / var(--design-pc) * 100cqw);
    }

    #footer.ga-footer .ga-footer__bottom {
        left: auto;
        right: calc(40 / var(--design-pc) * 100cqw);
        bottom: calc(28 / var(--design-pc) * 100cqw);
        display: flex;
        justify-content: flex-start;
        gap: calc(38 / var(--design-pc) * 100cqw);
    }
    */
}

/* --------------------------------------------------
   PC 1280px以上
   1440pxのデザイン寸法を最大1920pxのページフレーム内で同比率表示します。
-------------------------------------------------- */
@media (min-width: 1280px) {
    #page_content {
        --layout-max: 1920px;
        --content-max: 1706.667px;
        width: min(100%, var(--layout-max));
        max-width: var(--layout-max);
        margin-inline: auto;
        container-type: inline-size;
        container-name: ga-about-page;
    }

    .ga-about {
        width: 100%;
        max-width: var(--layout-max);
        margin-inline: auto;
        container-type: inline-size;
        container-name: ga-about;
    }

    #main_title {
        min-height: clamp(454px, 44.305556cqw, 851px);
    }

    #main_title .container {
        width: min(88.888889%, var(--content-max));
        max-width: var(--content-max);
        min-height: clamp(454px, 44.305556cqw, 851px);
    }

    #main_title h1 {
        top: min(calc(458 / 1440 * 100cqw), 610.667px);
    }

    #breadcrumbs {
        top: min(calc(380 / 1440 * 100cqw), 506.667px);
        height: min(calc(30 / 1440 * 100cqw), 40px);
    }

    #breadcrumbs .container {
        width: min(88.888889%, var(--content-max));
        max-width: var(--content-max);
    }

    .ga-about__hero-title {
        top: min(calc(493 / 1440 * 100cqw), 657.333px);
        left: min(calc(81 / 1440 * 100cqw), 108px);
    }

    .ga-about__what {
        min-height: calc(902 / 1440 * 100cqw);
    }

    .ga-about__what-inner {
        width: min(88.888889%, var(--content-max));
        max-width: var(--content-max);
        min-height: calc(902 / 1440 * 100cqw);
    }

    .ga-about__what-heading {
        top: calc(160 / 1440 * 100cqw);
    }

    .ga-about__what-text {
        top: calc(168 / 1440 * 100cqw);
        left: calc(621 / 1440 * 100cqw);
        width: calc(659 / 1440 * 100cqw);
    }

    .ga-about__what-gallery {
        top: calc(668 / 1440 * 100cqw);
        /* 左位置は本文に揃え、右側だけページフレーム端まで延ばします。 */
        width: calc(100% + 5.555556cqw);
    }

    .ga-about__what-image {
        flex-basis: calc(590 / 1440 * 100cqw);
        width: calc(590 / 1440 * 100cqw);
        height: auto;
    }

    .ga-about__policy {
        height: calc(898 / 1440 * 100cqw);
    }

    .ga-about__policy-inner {
        width: min(88.888889%, var(--content-max));
        max-width: var(--content-max);
        height: calc(898 / 1440 * 100cqw);
    }

    #page_content .ga-about__policy-label {
        top: calc(340 / 1440 * 100cqw);
        left: calc(190 / 1440 * 100cqw);
    }

    #page_content .ga-about__policy-title {
        top: calc(385 / 1440 * 100cqw);
        left: calc(190 / 1440 * 100cqw);
    }

    #page_content .ga-about__policy-text {
        top: calc(521 / 1440 * 100cqw);
        left: calc(190 / 1440 * 100cqw);
    }

    .ga-about__policy-diagram {
        top: calc(317 / 1440 * 100cqw);
        left: calc(661 / 1440 * 100cqw);
        width: calc(439 / 1440 * 100cqw);
        height: calc(411 / 1440 * 100cqw);
    }

    .ga-about__vision-mission {
        --ga-about-vision-copy-left: calc(270 / 1440 * 100cqw);
        height: calc(1349 / 1440 * 100cqw);
    }

    .ga-about__vision-image {
        height: calc(880 / 1440 * 100cqw);
    }

    .ga-about__vision-card {
        height: calc(490 / 1440 * 100cqw);
    }

    .ga-about__mission-image {
        top: calc(846 / 1440 * 100cqw);
        height: calc(503 / 1440 * 100cqw);
    }

    .ga-about__mission-card {
        top: calc(846 / 1440 * 100cqw);
        height: calc(503 / 1440 * 100cqw);
    }

    .ga-about__vision-card .ga-about__vision-mission-label {
        top: calc(123 / 1440 * 100cqw);
    }

    .ga-about__mission-card .ga-about__vision-mission-label {
        top: calc(83 / 1440 * 100cqw);
    }

    .ga-about__vision-card .ga-about__vision-mission-title {
        top: calc(170 / 1440 * 100cqw);
    }

    .ga-about__mission-card .ga-about__vision-mission-title {
        top: calc(130 / 1440 * 100cqw);
    }

    #page_content .ga-about__vision-text {
        top: calc(306 / 1440 * 100cqw);
    }

    #page_content .ga-about__mission-text {
        top: calc(266 / 1440 * 100cqw);
        width: calc(460 / 1440 * 100cqw);
    }

    .ga-about__value {
        height: calc(1102 / 1440 * 100cqw);
    }

    .ga-about__value-inner {
        width: min(88.888889%, var(--content-max));
        max-width: var(--content-max);
    }

    #page_content .ga-about__value-label {
        top: calc(121 / 1440 * 100cqw);
        left: calc(190 / 1440 * 100cqw);
    }

    #page_content .ga-about__value-title {
        top: calc(168 / 1440 * 100cqw);
        left: calc(190 / 1440 * 100cqw);
    }

    .ga-about__value-item {
        height: calc(170 / 1440 * 100cqw);
    }

    .ga-about__value-item--01 {
        top: calc(304 / 1440 * 100cqw);
    }

    .ga-about__value-item--02 {
        top: calc(474 / 1440 * 100cqw);
    }

    .ga-about__value-item--03 {
        top: calc(638 / 1440 * 100cqw);
    }

    .ga-about__value-item--04 {
        top: calc(808 / 1440 * 100cqw);
    }

    .ga-about__value-rule {
        left: calc(190 / 1440 * 100cqw);
        width: calc(909 / 1440 * 100cqw);
    }

    #page_content .ga-about__value-tag {
        top: calc(68 / 1440 * 100cqw);
        left: calc(190 / 1440 * 100cqw);
    }

    .ga-about__value-item--01 .ga-about__value-tag {
        top: calc(70 / 1440 * 100cqw);
    }

    #page_content .ga-about__value-copy {
        top: calc(62 / 1440 * 100cqw);
        left: calc(485 / 1440 * 100cqw);
    }

    .ga-about__company {
        height: calc(2203 / 1440 * 100cqw);
    }

    .ga-about__company-inner {
        width: min(88.888889%, var(--content-max));
        max-width: var(--content-max);
    }

    #page_content .ga-about__company-label {
        top: calc(145 / 1440 * 100cqw);
    }

    #page_content .ga-about__company-title {
        top: calc(192 / 1440 * 100cqw);
    }

    .ga-about__company-list {
        top: calc(388 / 1440 * 100cqw);
    }

    .ga-about__company-row {
        height: calc(83 / 1440 * 100cqw);
        padding-top: calc(34 / 1440 * 100cqw);
    }

    .ga-about__company-row--contact {
        height: calc(118 / 1440 * 100cqw);
    }

    .ga-about__company-row--business {
        height: calc(153 / 1440 * 100cqw);
    }

    .ga-about__company-row--makers {
        height: calc(468 / 1440 * 100cqw);
    }

    .ga-about__company-row--history {
        height: calc(329 / 1440 * 100cqw);
    }

    /* PCの文字・余白は1920pxフレームのcqwを基準にし、上限で固定します。 */
    #main_title h1 {
        font-size: clamp(16px, 1.25cqw, 24px);
    }

    #breadcrumbs .aioseo-breadcrumbs span,
    #breadcrumbs .aioseo-breadcrumbs a {
        font-size: clamp(13px, 0.902778cqw, 17.333px);
    }

    #breadcrumbs .aioseo-breadcrumbs .aioseo-breadcrumb-separator {
        width: min(0.277778cqw, 5.333px);
        height: min(0.277778cqw, 5.333px);
        margin:
            min(0.277778cqw, 5.333px)
            min(0.972222cqw, 18.667px)
            min(0.347222cqw, 6.667px)
            min(1.25cqw, 24px);
    }

    .ga-about__hero-title,
    #page_content .ga-about__what-title {
        font-size: clamp(64px, 6.25cqw, 120px);
    }

    .ga-about__what-label {
        font-size: clamp(16px, 1.388889cqw, 26.667px);
    }

    .ga-about__what-text,
    #page_content .ga-about__what-text p {
        font-size: clamp(15px, 1.25cqw, 24px);
    }

    #page_content .ga-about__what-text p + p {
        margin-top: clamp(28px, 2.638889cqw, 50.667px);
    }

    .ga-about__what-gallery {
        /* 1440px時31px。1920pxフレーム時は約41.333pxで上限停止します。 */
        --gallery-gap: clamp(20px, 2.152778cqw, 41.333px);
    }

    #page_content .ga-about__policy-label,
    #page_content .ga-about__vision-mission-label,
    #page_content .ga-about__value-label,
    #page_content .ga-about__company-label {
        font-size: clamp(14px, 0.972222cqw, 18.667px);
    }

    #page_content .ga-about__policy-title,
    #page_content .ga-about__vision-mission-title,
    #page_content .ga-about__value-title {
        font-size: clamp(69.333px, 5.416667cqw, 104px);
    }

    #page_content .ga-about__company-title {
        font-size: clamp(56px, 5.416667cqw, 104px);
    }

    #page_content .ga-about__policy-text,
    #page_content .ga-about__vision-mission-text {
        font-size: clamp(18px, 1.527778cqw, 29.333px);
    }

    #page_content .ga-about__value-tag {
        font-size: clamp(16px, 1.25cqw, 24px);
    }

    #page_content .ga-about__value-copy {
        font-size: clamp(20px, 1.805556cqw, 34.667px);
    }

    #page_content .ga-about__company-term,
    #page_content .ga-about__company-data,
    #page_content .ga-about__company-row a {
        font-size: clamp(14px, 1.041667cqw, 20px);
    }
}

/* --------------------------------------------------
   WIDE PC 1921px以上
   内容は1920px基準のまま、画像・色背景だけを画面端まで延ばします。
-------------------------------------------------- */
@media (min-width: 1921px) {
    #page {
        overflow-x: clip;
    }

    #main_title,
    .ga-about__what,
    .ga-about__policy,
    .ga-about__company {
        width: 100vw;
        margin-left: calc(50% - 50vw);
    }

    #breadcrumbs {
        left: 50%;
        width: 100vw;
        transform: translateX(-50%);
    }

    .ga-about__what-gallery {
        width: calc(50vw + 50%);
    }

    .ga-about__vision-mission {
        overflow: visible;
    }

    .ga-about__vision-image {
        left: calc(50% - 50vw);
        width: 100vw;
    }

    .ga-about__vision-card::before,
    .ga-about__mission-card::after {
        content: "";
        position: absolute;
        top: 0;
        width: 50vw;
        height: 100%;
        background: #fff;
    }

    .ga-about__vision-card::before {
        right: 100%;
    }

    .ga-about__mission-image {
        left: calc(50% - 50vw);
        width: calc(50vw - 6.875%);
    }

    .ga-about__mission-card::after {
        left: 100%;
    }
}