@charset "UTF-8";

/* CSS Document */
body {
    font-family: YakuHanJP, "Noto Sans JP", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    overflow: auto;
    height: 100%;
    margin: 0;
    background-color: #F4F5F4;
}

html {
    font-size: 62.5%;
    /* -> 10px; */
}

h1, h2, h3, h4, h5, h6 {
    /*display: none;*/
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

img {
    width: 100%;
    height: auto;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

p {
    margin: 0;
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.8;
    text-align: justify;
    word-break: break-all;
    text-justify: inter-ideograph;
    text-justify: inter-character;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

li {
    color: #1D1D1D;
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.8;
    text-align: justify;
    word-break: break-all;
    text-justify: inter-ideograph;
    text-justify: inter-character;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

p,
li,
table, figcaption, time, address, span, dt, dd, select {
    letter-spacing: 0.05rem;
    color: #1D1D1D;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

input, button {
    letter-spacing: 0.05rem;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

a,
a:hover {
    text-decoration: none;
    transition: 0.3s;
}

/* スマホ時にアニメーションを無効化 */
@media (max-width: 767px) {
    /* a {
        transition: none !important;
        animation: none !important;
    }

    a:hover {
        transform: none !important;
    } */
}

figure {
    margin: 0;
}

table {
    width: 100%;
    border-collapse: collapse;
}

section {
    overflow: hidden;
}

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

@media screen and (min-width: 1200px) {
    .display-none.min-1200 {
        display: none !important;
    }
}

@media screen and (max-width: 1199px) {
    .display-none.max-1199 {
        display: none !important;
    }
}

@media screen and (min-width: 992px) {
    .display-none.min-992 {
        display: none !important;
    }
}

@media screen and (max-width: 991px) {
    .display-none.max-991 {
        display: none !important;
    }
}

@media screen and (min-width: 768px) {
    .display-none.min-768 {
        display: none !important;
    }
}

@media screen and (max-width: 767px) {
    .display-none.max-767 {
        display: none !important;
    }
}

.display-none.heading {
    display: none;
}

.effect-fade {
    opacity: 0;
}

.fade-01 {
    transform: translate(0, 45px);
    transition: 1s;
}

.fade-02 {
    transform: translate(0, 45px);
    transition: 1.5s;
}

.fade-03 {
    transform: translate(0, 45px);
    transition: 2s;
}

.fade-04 {
    transform: translate(0, 45px);
    transition: 2.5s;
}

.fade-05 {
    transform: translate(0, 45px);
    transition: 3s;
}

.fade-06 {
    transform: translate(0, 45px);
    transition: 3.5s;
}

.fade-07 {
    transform: translate(0, 45px);
    transition: 4s;
}

.effect-fade.effect-scroll {
    opacity: 1;
    transform: translate(0, 0);
}

/* .text-anime {
    animation: textAnime 1.5s .5s forwards ease-in-out;
    transform: translateY(150%);
}

.hidden-box {
    overflow: hidden;
} */

@keyframes textAnime {
    to {
        transform: translateY(0px);
    }
}

.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/* fluid でも左右にゆとりを。画面が広いほど少し広げる */
.container-fluid {
    padding-right: 16px;
    padding-left: 16px;
}

@media (min-width: 768px) {
    .container-fluid {
        padding-right: 24px;
        padding-left: 24px;
    }
}

@media (min-width: 1200px) {
    .container-fluid {
        padding-right: 40px;
        padding-left: 40px;
    }
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}

@media screen and (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media screen and (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media screen and (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media screen and (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

@media screen and (min-width: 1400px) {
    .container {
        max-width: 1280px;
    }
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.wrap-col {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

@media screen and (min-width: 992px) {
    .wrap-col {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.img-liquid {
    width: 100%;
}

.sofia-sans {
    font-family: "Sofia Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: bold;
}

:root {
    --header-h: 80px;
    /* PCヘッダー */
}

@media (max-width: 767px) {
    :root {
        --header-h: 70px;
    }

    /* SPヘッダー */
}

/* ===== Header ===== */
/* -------------- ヘッダー -------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #FFF;
    padding-block: 15px;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    gap: 8px;
    align-items: center;
    font-weight: 700;
}

.logo img {
    height: 50px;
    width: auto;
}

@media screen and (max-width: 767px) {
    .logo img {
        height: 40px;
    }

}

.nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
}

.nav__list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 25px;
    margin: 0;
    padding: 0;
}

.nav__list a {
    display: inline-block;
}

.g-nav-list {
    font-size: clamp(1.3rem, 1.265rem + 0.094vw, 1.4rem);
    font-weight: 500;
    border-right: 1px solid #2E5A44;
    padding-right: 25px;
}

.g-nav-works {
    border-right: none;
    padding-right: 0;
}

.g-nav-list a {
    color: #1D1D1D;
    display: flex;
    align-items: center;
    transition: .3s;
}

@media screen and (min-width: 768px) {
    .g-nav-list a:hover {
        opacity: 1;
        color: #f5da3c;
    }
}

.g-nav-list a:before {
    content: '';
    display: inline-block;
    width: 50px;
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 7px;
    transition: .3s;
}

@media screen and (min-width: 768px) {
    .g-nav-list a:hover:before {
        transform: translateY(-5px);
        /* 上に5px移動、数値は調整 */
    }
}

.g-nav-company a:before {
    background-image: url(../images/header/company_c.svg);
    width: 44px;
    height: 34px;
}

.g-nav-method a:before {
    background-image: url(../images/header/method_c.svg);
    width: 36px;
    height: 34px;
}

.g-nav-works a:before {
    background-image: url(../images/header/works_c.svg);
    width: 30px;
    height: 34px;
}

@media screen and (min-width: 768px) {
    .g-nav-list a:hover::before {
        opacity: 0.7;
    }
}

.g-nav-contact {
    font-size: clamp(1.3rem, 1.265rem + 0.094vw, 1.4rem);
    font-weight: 500;
}

.g-nav-contact a {
    background-color: #ffc830;
    color: #1D1D1D;
    padding: 10px 15px;
    transition: .3s;
    display: flex;
    align-items: center;
}

@media screen and (min-width: 768px) {
    .g-nav-contact a:hover {
        background-color: #1d1d1d;
        color: #FFF;
        padding: 10px 15px;
    }
}

.g-nav-contact a:after {
    content: '';
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-left: 7px;
    background-image: url(../images/header/contact.svg);
    width: 20px;
    height: 20px;
    transition: .3s;
}

@media screen and (min-width: 768px) {
    .g-nav-contact a:hover::after {
        background-image: url(../images/header/contact_w.svg);
    }
}

/* -------------- ヘッダー -------------- */
/*------------------ヒーローイメージ_トップページ------------------*/
.hero {
    position: relative;
    width: 100%;
    top: 0;
    padding-top: 0;
    margin-top: 0;
    z-index: 1;
}

@media screen and (max-width: 991px) {
    .hero-wrap {
        margin-top: 0;
    }
}

/* ヒーローのテキストボックスは少し絞ると見栄え◎ */
.hero .swiper-comment.container-fluid {
    max-width: 1280px;
    /* 1440px画面でちょうど良い */
    margin-left: auto;
    margin-right: auto;
}

/* Swiperのスタイル */
.swiper-container {
    width: 100%;
    height: calc(100vh - 80px);
    overflow: hidden;
}

.swiper-container .swiper-wrapper .swiper-slide {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.hero .swiper-container::before {
    content: "";
    background-color: #2a2a2a50;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.hero .swiper-comment-wrap {
    position: absolute;
    width: 100%;
    height: calc(100vh - 80px);
    /* min-height: 100vh; */
    display: table;
    text-align: left;
    z-index: 10;
}

@media screen and (max-width: 767px) {
    .hero .swiper-comment-wrap {
        height: calc(100vh - 70px);
        min-height: calc(100dvh - var(--header-h));
        min-height: calc(100svh - var(--header-h));
        min-height: calc(var(--vh, 1vh) * 100 - var(--header-h));
    }
}

.hero .swiper-comment {
    margin: 0 auto;
    height: calc(100vh - 80px);
    mix-blend-mode: hard-light;
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 767px) {
    .hero .swiper-comment {
        height: calc(100vh - 70px);
        min-height: calc(100dvh - var(--header-h));
        min-height: calc(100svh - var(--header-h));
        min-height: calc(var(--vh, 1vh) * 100 - var(--header-h));
    }
}

/* スライド要素にも明示（予防線） */
.hero .swiper-container .swiper-wrapper,
.hero .swiper-container .swiper-slide {
    height: calc(100vh - 80px);
}

@media screen and (max-width: 767px) {

    .hero .swiper-container .swiper-wrapper,
    .hero .swiper-container .swiper-slide {
        height: calc(100vh - 70px);
        min-height: calc(100dvh - var(--header-h));
        min-height: calc(100svh - var(--header-h));
        min-height: calc(var(--vh, 1vh) * 100 - var(--header-h));
    }
}

.hero .swiper-comment-contents {
    margin: 0 auto;
    margin-left: 0;
    height: auto;
    width: auto;
}

.hero .swiper-comment-contents {
    position: absolute;
    left: 0;
    bottom: 15px;
    opacity: 1;
    z-index: 1;
    width: 100%;
}

@media screen and (max-width: 767px) {
    .hero .swiper-comment-contents {
        /* top: 50%;
        bottom: 50%; */
        margin-top: 0;
    }
}

.swiper-comment-contents img {
    width: 70%;
    padding-bottom: 20px;
    margin-bottom: 15px;
    border-bottom: 1px solid #FFF;
}

@media screen and (max-width: 767px) {
    .swiper-comment-contents img {
        width: 100%;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

}

.swiper-container .swiper-comment .eng-text {
    color: #FFF;
    font-weight: 500;
    margin-bottom: 10px;
}

.hero .swiper-comment .title {
    font-size: clamp(4rem, 2.222rem + 5.556vw, 10rem);
    /* 320px〜1400px */
    color: #fff;
    font-weight: 700;
    line-height: 0.5;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #fff;
}

@media screen and (max-width: 767px) {
    .swiper-container .swiper-comment .title {
        line-height: 1;
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #fff;
        font-size: 28px;
    }
}

.hero .swiper-comment .title span {
    color: #EFEB4B;
    font-weight: 700;
}

.hero .swiper-comment .text {
    font-size: clamp(1.4rem, 1.281rem + 0.37vw, 1.8rem);
    /* 320px〜1400px */
    color: #fff;
    font-weight: 600;
    line-height: 1.4;
}

@media screen and (max-width: 767px) {
    .swiper-container .swiper-comment .text {
        margin-bottom: 0;
        font-size: 20px;
    }

}

/* これを追加／修正 */
.hero,
.hero .swiper,
.hero .swiper-wrapper,
.hero .swiper-slide {
    height: calc(100vh - 80px);
    /* ビューポートの高さいっぱい */
}

@media screen and (max-width: 767px) {

    .hero,
    .hero .swiper,
    .hero .swiper-container,
    .hero .swiper-wrapper,
    .hero .swiper-slide {
        height: calc(100vh - 70px);
        min-height: calc(100dvh - var(--header-h));
        min-height: calc(100svh - var(--header-h));
        min-height: calc(var(--vh, 1vh) * 100 - var(--header-h));
        position: relative;
        overflow: hidden;
    }
}

.hero .swiper-slide {
    background-size: cover;
    background-position: center;
}

.hero .swiper-container,
.hero .swiper-wrapper,
.hero .swiper-slide {
    min-height: inherit;
}

/*------------------ヒーローイメージ_トップページ------------------*/

.section-box {
    padding: 100px 0;
    text-align: center;
    position: relative;
}

@media screen and (max-width: 767px) {
    .section-box {
        padding: 50px 0;
    }
}

.heading-title {
    font-size: 36px;
    line-height: 1.6;
    font-weight: 700;
    margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
    .heading-title {
        font-size: 20px;
        text-align: center;
    }
}

/* top-company セクション */
.top-company {
    position: relative;
    overflow: hidden;
}

.top-company__inner {
    display: grid;
    grid-template-columns: 6fr 4fr;
    /* 左右2カラム */
    align-items: center;
    gap: 40px;
    min-height: 500px;
    /* 高さは必要に応じて */
}

.top-company__content {
    z-index: 1;
}

.top-company::after {
    /* content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background: url("../images/top/company-logo.svg") no-repeat center/cover;
    z-index: 0; */
}

/* スマホでは縦積み */
@media (max-width: 767px) {
    .top-company__inner {
        grid-template-columns: 1fr;
    }

    .top-company::after {
        position: static;
        width: 100%;
        height: 240px;
        display: block;
    }
}

@media (min-width: 992px) {
    .top-company .heading-title {
        .top-company .text {
            width: 70%;
        }
    }
}

.btn {
    color: #FFF;
    padding: 15px 20px;
    font-size: 16px;
    display: inline-block;
    transition: .3s;
    /* border-radius: 10px; */
}

.btn span {
    display: flex;
    align-items: center;
}

.btn span:after {
    content: '';
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-left: 15px;
    width: 16px;
    height: 16px;
}

.btn span:after {
    background-image: url(../images/btn-arrow-bk.svg);
    transition: .3s ease;
}

@media screen and (min-width: 768px) {
    .btn:hover span:after {
        background-image: url(../images/btn-arrow-wt.svg);
    }
}

.top-company .text-box {
    /* max-width: 600px; */
    text-align: left;
    margin-right: auto;
}

.top-company .text {
    width: 70%;
}

@media (max-width: 767px) {
    .top-company .text {
        width: 100%;
        margin-top: 30px;
    }
}

.top-company .btn {
    background-color: #ffc830;
    color: #1d1d1d;
}

.text {
    margin-bottom: 30px;
}

.top-company .img-box {
    max-width: 300px;
    margin: 0 auto;
}

@media screen and (max-width: 767px) {
    .top-company__inner .text-box {
        order: 2;
        text-align: center;
    }

    .top-company__inner .img-box {
        display: none;
    }

    .top-company__inner .img-box-sp {
        text-align: center;
    }

    .top-company__inner .img-box-sp img {
        width: 40%;
    }
}

.eng-text-box {
    position: relative;
    padding: 7px 15px;
    display: inline-block;
    margin-bottom: 20px;
}

.eng-text-box:before, .eng-text-box:after {
    content: '';
    width: 20px;
    height: 30px;
    position: absolute;
    display: inline-block;
}

.eng-text-box:before {
    border-left: solid 2px #FFC830;
    border-top: solid 2px #FFC830;
    top: 0;
    left: 0;
}

.eng-text-box:after {
    border-right: solid 2px #FFC830;
    border-bottom: solid 2px #FFC830;
    bottom: 0;
    right: 0;
}

.eng-text-box p {
    margin: 0;
    padding: 0;
    line-height: 1.4;
}

@keyframes infinity-scroll-right {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0%);
    }
}

.scroll-infinity__list--right {
    animation: infinity-scroll-right 80s infinite linear 0.5s both;
}

.scroll-infinity__wrap {
    display: flex;
    overflow: hidden;
}

.scroll-infinity__list {
    display: flex;
    list-style: none;
    padding: 0
}

.scroll-infinity__item {
    width: calc(100vw / 3);
    line-height: 0;
}

@media (max-width: 767px) {
    .scroll-infinity__item {
        width: calc(100vw / 1);
    }
}

.scroll-infinity__item>img {
    width: 100%;
}

.top-method {
    background: #2E5B45;
    position: relative;
}

.top-method__inner {
    display: grid;
    grid-template-columns: 5fr 5fr;
    align-items: center;
    gap: 60px;
    min-height: 500px;
}

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

    .top-method__inner .img-box {
        order: 2;
    }

    .top-method__inner .text-box {
        order: 1;
    }
}

.top-method .text-box {
    text-align: left;
    margin-right: auto;
}

@media (max-width: 767px) {
    .top-method__inner .text-box {
        text-align: center;
    }
}

.top-method p {
    color: #FFF;
}

.top-method .btn {
    background-color: #ffc830;
    color: #1D1D1D;
}

/* .top-method .btn span:after {
    background-image: url(../images/btn-arrow-bk.svg);
} */

.top-method::before {
    content: "";
    background-image: url(../images/top/method/bg.png);
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    mix-blend-mode: difference;
    background-size: 120%;
    background-position: center;
    opacity: 0.5;
}

/* ===== Features ===== */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* ← 3カラム */
    gap: 50px;
    /* カードの間隔 */
    margin-top: 50px;
    list-style: none;
    padding: 0;
}

.feature-card {
    /* background: #fff;
    border: 1px solid #e5e7eb; */
    padding: 0;
    text-align: left;
    border-right: 1px solid #FFF;
}

@media (max-width: 767px) {
    .feature-card {
        border-right: none;
        border-bottom: 1px solid #5a7f6d;
        padding-bottom: 50px;
    }
}

.feature-card__kicker {
    font-weight: 700;
    color: #FFF;
    font-size: 50px;
    margin-bottom: 15px;
    line-height: 1;
}

@media (max-width: 767px) {
    .feature-card__kicker {
        font-size: 36px;
        text-align: center;
    }
}

.feature-card__title {
    font-size: 26px;
    margin-top: 0;
    margin-bottom: 15px;
    color: #FFF;
    line-height: 1;
}

@media (max-width: 767px) {
    .feature-card__title {
        text-align: center;
    }
}

.feature-card__text {
    color: #6b7280;
    margin: 0;
}

@media (max-width: 767px) {
    .feature-card__text {
        text-align: center;
    }
}

/* スマホで縦積み */
@media (max-width: 767px) {
    .feature-grid {
        grid-template-columns: 1fr;
    }
}

.top-works {
    width: 100%;
    min-height: 400px;
    /* 必要な高さ */
    background:
        linear-gradient(to right, #353E41 50%, transparent 50%),
        /* 左半分に色 */
        url("../images/top/works/01.jpg") right center / 50% auto no-repeat;
    /* 右半分に画像 */
    padding: 0;
    background-size: cover;
}

@media (max-width: 767px) {
    .top-works {
        background-color: #353E41;
        background-size: 100%;
        background-image: none;
    }
}

.top-works__inner {
    display: grid;
    grid-template-columns: 5fr 5fr;
    /* 左右2カラム */
    align-items: center;
    gap: 40px;
    min-height: 500px;
    /* 高さは必要に応じて */
}

@media (max-width: 767px) {
    .top-works__inner {
        grid-template-columns: 1fr;
        min-height: auto;
    }
}

.top-works .text-box {
    text-align: left;
    margin-left: auto;
    padding: 100px 0;
    padding-right: 50px;
}

@media (max-width: 767px) {
    .top-works .text-box {
        padding-right: 0;
        padding: 50px 0;
        text-align: center;
    }

    .top-works .img-box {
        display: none;
    }
}

.top-works p {
    color: #FFF;
}

.top-works .btn {
    background-color: #ffc830;
    color: #1D1D1D;
}

/* .top-works .btn span:after {
    background-image: url(../images/btn-arrow-bk.svg);
} */

.top-group .text-box {
    text-align: left;
    margin-left: auto;
}

@media (max-width: 767px) {
    .top-group .text-box {
        text-align: center;
        margin-left: auto;
    }
}

.group-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 2カラム */
    gap: 32px;
    /* 余白 */
    margin-top: 40px;
}

.group-card {
    background: rgb(255 255 255 / 60%);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    text-align: left;
}

.group-card h3 {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

@media (max-width: 767px) {
    .group-card h3 {
        text-align: center;
    }
}

.group-card p {
    margin: 0 0 8px;
    font-size: 14px;
    color: #555;
}

.group-card .btn {
    display: inline-block;
    margin-top: 12px;
    padding: 20px 28px;
    font-size: 14px;
    border-radius: 6px;
    transition: .3s;
    background: #ffc830;
    color: #1D1D1D;
}

@media (max-width: 767px) {
    .group-card .btn {
        display: block;
    }
}

@media screen and (min-width: 768px) {
    .group-card .btn:hover {
        background: #1D1D1D;
        color: #fff;
    }
}

.group-card a span {
    color: #1D1D1D;
}

@media screen and (min-width: 768px) {
    .group-card .btn:hover span {
        color: #fff;
    }
}

/* スマホでは1カラム */
@media (max-width: 767px) {
    .group-grid {
        grid-template-columns: 1fr;
    }

    .group-card a span {
        text-align: center;
        display: block;
    }
}

.group-card a span:after {
    content: '';
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-left: 7px;
    background-image: url(../images/top/group/link-arrow-bk.svg);
    width: 16px;
    height: 16px;
    transition: .3s;
}

@media screen and (min-width: 768px) {
    .group-card a:hover span:after {
        content: '';
        display: inline-block;
        background-size: contain;
        background-repeat: no-repeat;
        vertical-align: middle;
        margin-left: 7px;
        background-image: url(../images/top/group/link-arrow.svg);
        width: 16px;
        height: 16px;
    }
}

.top-group::before {
    content: "";
    background-image: url(../images/top/group/bg.png);
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    mix-blend-mode: difference;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.5;
}

.top-partners {
    padding-top: 0;
}

.top-partners__inner {
    display: grid;
    grid-template-columns: 5fr 5fr;
    align-items: flex-start;
    gap: 40px;
    padding-top: 100px;
    border-top: 1px solid #e5e7eb;
}

@media (max-width: 767px) {
    .top-partners__inner {
        grid-template-columns: 1fr;
    }
}

.top-partners__inner .text-box {
    /* display: grid;
    grid-template-columns: 5fr 5fr;
    align-items: center;
    gap: 40px;
    min-height: 500px;*/
    text-align: left;
}

@media (max-width: 767px) {
    .top-partners__inner .text-box {
        text-align: center;
    }

    .top-partners__inner {
        text-align: center;
        padding-top: 50px;
    }
}

.aside__inner-header {
    /* padding-top: 100px;
    border-top: 1px solid #e5e7eb; */
}

@media (max-width: 767px) {
    .aside__inner-header {
        /* padding-top: 50px;
        border-top: 1px solid #e5e7eb; */
    }
}

.aside__inner-header .text-box {
    margin-bottom: 50px;
}

@media screen and (max-width: 767px) {
    .aside__inner-header .text-box {
        margin-bottom: 30px;
    }

}

.aside__inner-header .heading-title {
    text-align: center;
    color: #FFF;
}

.aside__inner-header .text-col {
    width: 60%;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .aside__inner-header .text-col {
        width: 100%;
    }
}

.aside__inner .text-box {
    text-align: center;
}

.aside__inner .text {
    /* width: 55%; */
    margin: 0 auto;
}

footer {
    background-color: #2E5B45;
    padding: 50px 0;
}

.footer__inner {
    display: grid;
    grid-template-columns: 4fr 6fr;
    align-items: center;
    gap: 40px;
    margin-bottom: 30px;
}

@media (max-width: 991px) {
    .footer__inner {
        grid-template-columns: 1fr;
    }
}

.footer__address {
    font-style: normal;
    font-size: 14px;
    line-height: 1.6;
    color: #FFF;
}

.footer__img-box {
    display: flex;
    gap: 30px;
    align-items: center;
}

@media (max-width: 991px) {
    .footer__img-box {
        flex-direction: column;
    }
}

.footer__logo {
    line-height: 1;
}

.footer__logo img {
    height: 50px;
    width: auto;
}

.footer__ipros-link {
    transition: .3s;
}

@media screen and (min-width: 768px) {
    .footer__ipros-link:hover {
        opacity: 0.6;
    }
}

.footer__ipros {
    line-height: 1;
}

.footer__ipros img {
    height: 50px;
    width: auto;
}

@media screen and (max-width: 991px) {
    .footer__ipros {
        text-align: center;
    }

    .footer__ipros img {
        height: auto;
        width: 70%;
    }
}

.footer__nav-list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0;
    padding: 0;
    justify-content: flex-end;
}

.footer__nav-list li {
    font-size: clamp(1.3rem, 1.265rem + 0.094vw, 1.4rem);
    font-weight: 500;
}

.footer__nav-list li a {
    color: #FFF;
    transition: .3s;
}

@media screen and (min-width: 768px) {
    .footer__nav-list li a:hover {
        color: #ffc830;
    }
}

@media screen and (max-width: 991px) {
    .footer__col-right {
        display: none;
    }
}

.copyright-box {
    /* border-top: 1px solid #e5e7eb; */
    margin-top: 15px;
    /* padding-top: 20px; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 991px) {
    .copyright-box {
        flex-direction: column-reverse;
        gap: 15px;
    }

    address {
        text-align: center;
    }
}

.copyright-box p {
    color: #FFF;
    font-size: 12px;
    margin: 0;
}

.copyright-box a {
    color: #FFF;
    font-size: 12px;
    margin: 0;
    font-weight: 500;
    transition: .3s;
}

@media screen and (min-width: 768px) {
    .copyright-box a:hover {
        color: #ffc830;
    }
}

.cta-grid {
    display: grid;
    grid-template-columns: 5fr 5fr;
    gap: 24px;
    /* max-width: 900px;
    margin: 0 auto; */
}

@media screen and (max-width: 991px) {
    .cta-grid {
        grid-template-columns: 1fr;
    }

}

.cta-card-wrap {
    background: rgba(46 90 68 / 80%);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
}

@media screen and (max-width: 991px) {
    .cta-card-wrap {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
        overflow: hidden;
    }

}

.cta-card-wrap .eng-text {
    font-size: 26px;
    color: #ffc830;
    display: inline-block;
}

@media screen and (max-width: 767px) {
    .cta-card-wrap .eng-text {
        font-size: 18px;
    }
}

.cta-card-wrap .title {
    font-size: 26px;
    margin-top: 0;
    font-weight: 700;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: #FFF;
}

@media screen and (max-width: 767px) {
    .cta-card-wrap .title {
        font-size: 20px;
    }
}

.aside-section {
    padding-top: 100px;
    padding-bottom: 100px;
    position: relative;
    background-image: url(../images/footer-bg.jpg);
    background-size: cover;
    background-position: center;
}

@media screen and (max-width: 767px) {
    .aside-section {
        padding-top: 50px;
        padding-bottom: 50px;
        background-position: 23% center;
    }
}

.aside-section:before {
    content: '';
    background-color: #353E41;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    mix-blend-mode: darken;
}

.aside-section .eng-text-box p {
    color: #FFF;
}

.aside__inner-footer .text {
    margin-bottom: 30px;
    color: #FFF;
}

.cta-card-wrap-right img {
    height: 70px;
    width: auto;
}

@media screen and (max-width: 767px) {
    .cta-card-wrap-right img {
        height: auto;
        width: 90%;
    }

}

.cta-card-wrap-left .btn {
    background-color: #ffc830;
    width: 80%;
    text-align: center;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 70px;
    margin: 0 auto;
}

@media screen and (min-width: 768px) {
    .cta-card-wrap-left .btn:hover {
        background-color: #1d1d1d;
        color: #ffc830;
    }
}

.cta-card-wrap-left .btn span:after {
    content: none;
}

.cta-card-wrap-left .btn>span {
    position: relative;
    z-index: 1;
    transition: .3s ease;
    color: #1d1d1d;
}

@media screen and (min-width: 768px) {
    .cta-card-wrap-left .btn:hover>span {
        color: #ffc830;
    }
}

.cta-card-wrap-left .btn .arrow-col {
    margin-left: 0;
    position: absolute;
    right: 15px;
}

.cta-card-wrap-left .btn .arrow {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1d1d1d;
    border-radius: 50px;
    transition: .3s;
}

@media screen and (min-width: 768px) {
    .cta-card-wrap-left .btn:hover .arrow {
        background-color: #ffc830;
    }
}

.cta-card-wrap-left .btn .arrow img {
    display: block;
    width: 16px;
}

.arrow-icon {
    color: #ffc830;
    transition: color 0.3s ease;
}

@media screen and (min-width: 768px) {
    .btn:hover .arrow-icon {
        color: #1d1d1d;
    }
}

.hero-title-box {
    text-align: left;
    position: relative;
}

.other-hero .heading-title {
    margin-bottom: 0;
    font-size: 26px;
    padding-left: 20px;
    margin-bottom: 30px;
    line-height: 1;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

@media screen and (max-width: 767px) {
    .other-hero .heading-title {
        padding-left: 0;
    }
}

.other-hero .text {
    padding-left: 20px;
    margin-bottom: 0;
}

@media screen and (max-width: 767px) {
    .other-hero .text {
        padding-left: 0;
    }
}

.breadcrumb-box {
    margin-bottom: 50px;
    text-align: left;
}

@media (max-width: 767px) {
    .breadcrumb-box {
        margin-bottom: 30px;
        text-align: center;
    }
}

.breadcrumb-inline {
    display: inline-block;
    color: #FFF;
    background-color: #1d1d1d;
    border-radius: 50px;
    padding: 5px 15px;
    font-size: 12px;
}

.other-hero {
    padding-top: 30px;
    padding-bottom: 0;
    text-align: center;
    position: relative;
}

.other-hero .hero-title-box {
    padding-bottom: 50px;
}

@media screen and (max-width: 767px) {
    .other-hero .hero-title-box {
        text-align: center;
    }
}

.other-hero .eng-text {
    font-size: 70px;
    line-height: 1.2;
}

@media screen and (max-width: 767px) {
    .other-hero .eng-text {
        font-size: 36px;
    }
}

.company-hero .hero-img-box {
    height: 350px;
    background: url("../images/company/hero.jpg") center center / cover no-repeat;
}

.company-message {
    padding-bottom: 0;
}

.section-box .heading-box {
    text-align: left;
    margin-right: auto;
}

@media screen and (max-width: 767px) {
    .section-box .heading-box {
        text-align: center;
    }
}

.company-message .first-img-box {
    height: 550px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    /* 横方向中央 */
    align-items: center;
    /* 縦方向中央 */
}

@media screen and (max-width: 767px) {
    .company-message .first-img-box {
        height: auto;
    }
}

.company-message .first-img-box img {
    width: 100%;
    height: auto;
    object-fit: cover;
    /* ← これで上下トリミング */
    object-position: center center;
}

.company-message__inner {
    display: grid;
    grid-template-columns: 4fr 6fr;
    align-items: flex-start;
    min-height: 500px;
    gap: 60px;
    margin-top: 50px;
    padding-bottom: 100px;
    border-bottom: 1px solid #e5e7eb;
}

@media screen and (max-width: 767px) {
    .company-message__inner {
        grid-template-columns: 1fr;
        padding-bottom: 50px;
    }

    .company-message__inner .text-box {
        order: 1;
    }

    .company-message__inner .img-box {
        order: 2;
    }
}

.company-message__inner .heading-title {
    font-size: 26px;
    line-height: 1.8;
    font-weight: 700;
    margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
    .company-message__inner .heading-title {
        font-size: 18px;
        text-align: justify;
    }
}

.company-message__inner .ceo-box {
    display: flex;
    justify-content: right;
}

.company-message__inner .ceo {
    text-align: right;
}

.company-philosophy {
    padding-bottom: 0;
}

.company-philosophy .heading-title {
    margin-bottom: 0;
}

.philosophy-box {
    padding-top: 80px;
    padding-bottom: 80px;
}

@media screen and (max-width: 767px) {
    .philosophy-box {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

.philosophy {
    font-size: 36px;
    line-height: 1;
    font-weight: 700;
    border: 1px solid #1d1d1d;
    padding: 30px;
    display: inline-block;
}

@media screen and (max-width: 767px) {
    .philosophy {
        font-size: 22px;
    }
}

.company-philosophy .mv-grid {
    display: grid;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 0;
    padding-bottom: 100px;
    border-bottom: 1px solid #e5e7eb;
}

@media screen and (max-width: 767px) {
    .company-philosophy .mv-grid {
        padding-bottom: 50px;
    }
}

.company-philosophy .mv-title {
    position: relative;
    padding: 7px 15px;
    display: inline-block;
    margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
    .company-philosophy .mv-title {
        line-height: 1.4;
        text-align: center;
        margin-bottom: 15px;
    }
}

.company-philosophy .mv-title:before, .company-philosophy .mv-title:after {
    content: '';
    width: 20px;
    height: 30px;
    position: absolute;
    display: inline-block;
}

.company-philosophy .mv-title:before {
    border-left: solid 2px #FFF;
    border-top: solid 2px #FFF;
    top: 0;
    left: 0;
}

.company-philosophy .mv-title:after {
    border-right: solid 2px #FFF;
    border-bottom: solid 2px #FFF;
    bottom: 0;
    right: 0;
}

.company-philosophy .values-card .mv-title:before {
    border-left: solid 2px #1D1D1D;
    border-top: solid 2px #1D1D1D;
    top: 0;
    left: 0;
}

.company-philosophy .values-card .mv-title:after {
    border-right: solid 2px #1D1D1D;
    border-bottom: solid 2px #1D1D1D;
    bottom: 0;
    right: 0;
}

.company-philosophy .mv-card {
    padding: 3.5% 5%;
    text-align: left;
}

@media screen and (max-width: 767px) {
    .company-philosophy .mv-card {
        text-align: center;
    }
}

.mission-card {
    background: #2E5A44;
}

.mission-card .text {
    margin-bottom: 0;
}

.vision-card {
    background: #1D1D1D;
}

.company-philosophy .mv-card .mv-title, .company-philosophy .mv-card .text, .company-philosophy .mv-card li {
    color: #FFF;
}

@media screen and (max-width: 767px) {
    .company-philosophy .mv-card li {
        margin-bottom: 15px;
    }
}

.company-philosophy .values-card .mv-title, .company-philosophy .values-card .text {
    color: #1D1D1D;
}

.company-philosophy .mv-card .mv-list {
    list-style-type: disc;
    padding-left: 20px;
}

.company-philosophy .mv-card .mv-title .en {
    font-size: 40px;
    color: #FFF;
}

@media screen and (max-width: 767px) {
    .company-philosophy .mv-card .mv-title .en {
        font-size: 30px;
        display: block;
    }
}

.company-philosophy .mv-card .mv-title .jp {
    font-size: 22px;
    font-weight: 600;
    margin-left: 15px;
    color: #FFF;
}

@media screen and (max-width: 767px) {
    .company-philosophy .mv-card .mv-title .jp {
        font-size: 18px;
        margin-left: 0;
    }
}

.company-philosophy .mv-card.values-card .mv-title .en {
    color: #1D1D1D;
}

.company-philosophy .mv-card.values-card .mv-title .jp {
    color: #1D1D1D;
}

.values-col {
    margin-bottom: 50px;
}

.values-title-box {
    margin-bottom: 30px;
}

.values-title-box .en {
    font-size: 14px;
}

@media screen and (max-width: 767px) {
    .values-title-box .en {
        /* text-align: center; */
    }
}

.values-title {
    font-size: 46px;
    margin: 0;
    border-bottom: 1px solid #1D1D1D;
    padding-bottom: 30px;
    position: relative;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

@media screen and (max-width: 767px) {
    .values-title {
        font-size: 26px;
        text-align: left;
    }
}

.values-title::after {
    content: '';
    width: 150px;
    height: 5px;
    display: inline-block;
    background-color: #1d1d1d;
    position: absolute;
    left: 0;
    bottom: 0;
}

.values-card .text {
    font-size: 18px;
}

@media screen and (max-width: 767px) {
    .values-card .text {
        font-size: 16px;
    }
}

.values-card .values-col:last-of-type, .values-card .values-col:last-of-type .text {
    margin-bottom: 0;
}

.company-philosophy .values-card {
    padding-bottom: 0;
}

.company-philosophy .values-card .mv-title {
    margin-bottom: 50px;
}

.company-dl {
    display: grid;
    grid-template-columns: 250px 1fr;
    /* 左ラベル、右内容 */
    gap: 12px 24px;
    margin: 0;
    padding: 30px 0;
    border-bottom: 1px solid #1D1D1D;
}

@media screen and (max-width: 767px) {
    .company-dl {
        grid-template-columns: 1fr;
    }
}

.company-dl:first-of-type {
    border-top: 1px solid #1D1D1D;
}

.company-dl dt {
    font-weight: 700;
    color: #1D1D1D;
    font-size: 16px;
    text-align: left;
}

.company-dl dd {
    margin: 0;
    color: #1D1D1D;
    line-height: 1.6;
    font-size: 16px;
    text-align: left;
}

.profile-box {
    padding: 3.5% 5%;
}

.company-dl iframe {
    margin-top: 30px;
    width: 100%;
}

.company-profile .heading-box {
    margin-bottom: 50px;
}

.company-profile .heading-title {
    margin-bottom: 0;
}

.method-hero .hero-img-box {
    height: 350px;
    background: url("../images/method/hero.jpg") center center / cover no-repeat;
}

@media screen and (max-width: 767px) {
    .method-hero .hero-img-box {
        height: 220px;
    }
}

.method-features .mv-card {
    padding: 3.5% 5%;
    text-align: left;
    padding-bottom: 0;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .method-features .mv-card {
        padding-left: 0;
        padding-right: 0;
    }
}

.features-box {
    display: grid;
    grid-template-columns: 5fr 5fr;
    align-items: center;
    gap: 80px;
    margin-top: 0;
    margin-bottom: 100px;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .features-box {
        grid-template-columns: 7fr 3fr;
        gap: 50px;
    }
}

@media screen and (max-width: 767px) {
    .features-box {
        display: grid;
        grid-template-columns: 1fr;
        gap: 50px;
    }
}

.features-title-box {
    margin-bottom: 20px;
}

.features-title {
    font-size: 32px;
    margin: 0;
    border-bottom: 1px solid #1D1D1D;
    padding-bottom: 20px;
    position: relative;
}

@media screen and (max-width: 767px) {
    .features-title {
        font-size: 26px;
    }
}

.features-card .features-box:last-of-type {
    margin-bottom: 0;
}

.features-card .text {
    font-size: 16px;
    margin-bottom: 0;
}

.features-right-col {
    text-align: center;
    line-height: 1;
}

.features-right-col img {
    max-height: 200px;
    width: auto;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .features-right-col img {
        max-height: none;
        width: 100%;
        height: auto;
    }
}

@media screen and (max-width: 767px) {
    .features-right-col img {
        max-height: none;
        width: 100%;
        height: auto;
    }

    .features-right-col img.sp-small {
        max-height: none;
        width: 70%;
        height: auto;
    }
}

.method-flow {
    background-color: #2E5B45;
}

.method-flow .eng-text-box .eng-text {
    color: #FFF;
}

.method-flow .heading-title {
    color: #FFF;
}

.flow-box {
    display: grid;
    grid-template-columns: 6fr 4fr;
    align-items: flex-start;
    gap: 50px;
    margin-top: 0;
    margin-bottom: 30px;
    position: relative;
    padding: 50px;
}

@media screen and (max-width: 767px) {
    .flow-box {
        grid-template-columns: 1fr;
        padding: 30px;
        gap: 15px;
    }
}

.flow-box::after {
    content: "";
    background-color: #71D071;
    border-radius: 40px;
    mix-blend-mode: overlay;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
}

.flow-col {
    position: relative;
    z-index: 1;
}

.flow-title-box {
    margin-bottom: 20px;
}

.flow-card .text {
    font-size: 16px;
    margin-bottom: 0;
    color: #FFF;
}

.flow-left-col {
    position: relative;
    z-index: 1;
    text-align: left;
}

.flow-right-col {
    position: relative;
    z-index: 1;
    line-height: 1;
}

.flow-title-box {
    margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
    .flow-title-box {
        display: grid;
        grid-template-columns: 3fr 7fr;
        gap: 30px;
        align-items: end;
    }
}

.flow-title {
    font-size: 40px;
    margin-top: 20px;
    margin-bottom: 0;
    position: relative;
    color: #FFF;
}

@media screen and (max-width: 767px) {
    .flow-title {
        font-size: 26px;
        margin: 0;
    }
}

.num {
    width: auto;
    height: 150px;
}

@media screen and (max-width: 767px) {
    .num {
        width: 100%;
        height: auto;
    }
}

.method-gbrc {
    background-color: #2E5B45;
    padding-top: 0;
}

.method-gbrc__inner {
    display: grid;
    grid-template-columns: 5fr 5fr;
    align-items: flex-start;
    gap: 40px;
}

@media screen and (max-width: 767px) {
    .method-gbrc__inner {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

.method-gbrc__inner .text-box {
    text-align: left;
}

@media screen and (max-width: 767px) {
    .method-gbrc__inner .text-box {
        text-align: center;
    }
}

.method-gbrc .eng-text-box p {
    color: #FFF;
}

.method-gbrc .heading-title {
    color: #FFF;
}

@media screen and (max-width: 767px) {
    .method-gbrc .heading-title {
        margin-bottom: 0;
    }
}

.method-faq__inner .heading-title {
    text-align: center;
}

.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
}

.panel {
    margin-bottom: 15px;
}

.panel-header {
    width: 100%;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border: none;
    cursor: pointer;
    font-size: 16px;
    text-align: left;
    border-radius: 15px;
    transition: .3s;
}

@media screen and (max-width: 767px) {
    .panel-header {
        gap: 15px;
        padding: 15px 15px;
    }
}

@media screen and (min-width: 768px) {
    .panel-header:hover {
        background: #2E5A44;
        color: #FFF;
    }
}

.panel-header.active {
    background: #518B4E;
    color: #FFF;
}

.panel-header.active {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.icon {
    font-size: 24px;
    transition: transform 0.3s;
}

.panel-header.active .icon {
    transform: rotate(45deg);
    color: #FFF;
}

.panel-content {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease-out;
    background-color: #FFF;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;

}

.panel-body {
    padding: 20px;
    border-top: 1px solid #eee;
}

@media screen and (max-width: 767px) {
    .panel-body {
        padding: 15px 15px;
    }
}

.panel-header .text {
    margin-bottom: 0;
    font-size: 18px;
    font-weight: 600;
}

@media screen and (min-width: 768px) {
    .panel-header:hover .text, .panel-header.active .text {
        color: #FFF;
    }

    .panel-header:hover .icon {
        color: #FFF;
    }
}

@media screen and (max-width: 767px) {
    .panel-header .text {
        line-height: 1.4;
        font-size: 16px;
        align-items: center;
        gap: 10px;
        display: grid;
        grid-template-columns: 1fr 9fr;
    }

    .panel-header.active .text {
        color: #FFF;
    }
}

.panel-header .text::before {
    content: '';
    display: inline-block;
    width: 50px;
    height: 50px;
    background-image: url(../images/method/faq/faq_icon_gr.svg);
    background-size: contain;
    vertical-align: middle;
    margin-right: 15px;
    transition: .3s;
}

@media screen and (max-width: 767px) {
    .panel-header .text::before {
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        margin: 0;
        background-position: center;
    }
}

@media screen and (min-width: 768px) {
    .panel-header.active .text::before, .panel-header:hover .text::before {
        background-image: url(../images/method/faq/faq_icon_wt.svg);
    }
}

@media screen and (max-width: 767px) {
    .panel-header.active .text::before, .text::before {
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .panel-header:hover .text::before {
        background-image: url(../images/method/faq/faq_icon_gr.svg);
    }
}

.panel-content .answer {
    margin-bottom: 0;
    font-size: 18px;
    padding-left: 60px;
    padding-right: 30px;
}

@media screen and (max-width: 767px) {
    .panel-content .answer {
        margin-bottom: 0;
        font-size: 16px;
        padding-left: 7px;
        padding-right: 7px;
    }
}

.privacy-list-box {
    margin-bottom: 50px;
}

.privacy-list-box .list-title {
    background-color: #2E5B45;
    margin: 0;
    color: #FFF;
    font-weight: 500;
    font-size: 20px;
    padding: 15px;
    text-align: left;
    border-radius: 50px;
    display: flex;
    align-items: center;
    line-height: 1;
    margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
    .privacy-list-box .list-title {
        font-size: 16px;
    }
}

.privacy-list-box .list-title::before {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    display: inline-block;
    margin-right: 15px;
}

.privacy-text-box {
    padding-left: 50px;
    padding-right: 50px;
}

@media screen and (max-width: 767px) {
    .privacy-text-box {
        padding-left: 15px;
        padding-right: 15px;
    }
}

.privacy-text-box .description {
    margin-bottom: 10px;
}

.privacy-text-box li {
    padding-left: 1em;
    text-indent: -1em;
}

.table-works {
    border-bottom: 1px solid #2e5a44;
}

.table-works th, .table-works td {
    text-align: center;
    white-space: nowrap;
    padding: 20px 12px;
    font-size: 14px;
}

.table-works th {
    background-color: #2e5a44;
    color: #FFF;
    font-weight: 500;
    border-left: 1px solid #f4f5f4;
}

.table-works th a {
    color: #FFF;
}

.table-works tr:nth-child(even) {
    background-color: #d9ded9;
}

.works-hero {
    padding-bottom: 100px;
}

/* ===== Works Filter (FEAS の上に被せるUI) ===== */
:root {
    --wf-bg: #ffffff;
    --wf-br: #e5e7eb;
    --wf-head: #f6f7f9;
    --wf-txt: #111827;
    --wf-sub: #6b7280;
    --wf-pri: #0ea5e9;
    /* ブランドカラーに合わせて調整可 */
    --wf-pri-ink: #fff;
}

.ui-works-filter {
    background-color: #d9ded9 !important;
    border-radius: 15px;
    padding: 20px;
    padding-bottom: 30px;
    margin-bottom: 15px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background-clip: padding-box;
}

.ui-works-filter:focus,
.ui-works-filter:focus-within {
    background-color: #d9ded9 !important;
}

.ui-works-filter:hover {
    background-color: #d9ded9 !important;
}

/* 「条件をクリア」 */
.ui-works-filter__meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.ui-works-filter__count {
    color: var(--wf-sub);
    font-size: 14px;
}

.ui-works-filter__reset {
    border: 1px solid var(--wf-br);
    background: #fff;
    color: #111;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
}

/* レイアウト（項目の幅割り当て） */
.ui-works-filter .feas-field {
    grid-column: span 6;
}

/* デフォ：2列 */
.ui-works-filter .feas-submit {
    grid-column: span 12;
}

/* ボタンは1行占有 */

/* 幅指定：PDFイメージに近づける例 */
.ui-works-filter .feas-field--pref {
    grid-column: span 4;
}

/* 都道府県 */
.ui-works-filter .feas-field--kw {
    grid-column: span 5;
}

/* キーワード */
.ui-works-filter .feas-field--year {
    grid-column: span 3;
}

/* 施工年度 */
.ui-works-filter .feas-field--proof {
    grid-column: span 6;
}

/* 設計耐力 */
.ui-works-filter .feas-field--depth {
    grid-column: span 6;
}

/* 改良深さ */
.ui-works-filter .feas-submit {
    grid-column: 10 / -1;
}

/* 右寄せ */

@media (max-width: 900px) {
    .ui-works-filter form {
        grid-template-columns: repeat(6, 1fr);
    }

    .ui-works-filter .feas-field,
    .ui-works-filter .feas-field--pref,
    .ui-works-filter .feas-field--kw,
    .ui-works-filter .feas-field--year,
    .ui-works-filter .feas-field--proof,
    .ui-works-filter .feas-field--depth {
        grid-column: span 6;
    }

    .ui-works-filter .feas-submit {
        grid-column: span 6;
    }
}

@media (max-width: 520px) {
    .ui-works-filter form {
        grid-template-columns: repeat(4, 1fr);
    }

    .ui-works-filter .feas-field,
    .ui-works-filter .feas-submit {
        grid-column: span 4;
    }
}


/* ===== FEAS フォーム(ID=1) レイアウト ===== */
#feas-searchform-1 .search-form-box {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
    align-items: end;
    /* ラベル高さが違っても下端を揃える */
}

/* デフォは 3カラム分＝4列並び */
#feas-searchform-1 .search-form-inner {
    grid-column: span 3;
}

/* 5番目=キーワード, 6番目=検索ボタン を 6カラム分＝2列並び */
#feas-searchform-1 .search-form-inner:nth-child(5),
#feas-searchform-1 .search-form-inner:nth-child(6) {
    grid-column: span 6;
}

/* 入力UIの体裁（任意：見た目を整える） */
#feas-searchform-1 .search-title {
    margin: 0 0 6px;
    font-size: 14px;
    color: #1d1d1d;
}

#feas-searchform-1 select,
#feas-searchform-1 input[type="text"] {
    width: 100%;
    padding: 15px 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #aaa;
    font-size: 16px;
    line-height: 1.6;
}

@media screen and (min-width: 768px) {

    #feas-searchform-1 select,
    #feas-searchform-1 input[type="text"],
    #feas-searchform-1 input[type="search"] {
        color: #8a8f98;
    }
}

/* キーワード入力のプレースホルダーを同色にしたい場合 */
#feas-searchform-1 input[type="text"]::placeholder,
#feas-searchform-1 input[type="search"]::placeholder {
    color: #1D1D1D;
    /* 同じ色。薄くしたいなら #999 など */
    opacity: 1;
    /* ブラウザ既定の薄さを打ち消す */
}

#feas-searchform-1 input[type="submit"] {
    width: 100%;
    padding: 12px 18px;
    border: 0;
    background: #1d1d1d;
    /* サイト色に合わせて調整OK */
    color: #fff;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    height: 100%;
}

@media screen and (min-width: 768px) {
    #feas-searchform-1 input[type="submit"]:hover {
        filter: brightness(.96);
    }
}

/* レスポンシブ（画面が狭いときは2列→1列へ） */
@media (max-width: 900px) {
    #feas-searchform-1 .search-form-inner {
        grid-column: span 6;
    }

    /* 2列 */
}

@media (max-width: 560px) {
    #feas-searchform-1 .search-form-inner {
        grid-column: span 12;
    }

    /* 1列 */
}

.search-btn {
    height: 100%;
}

.ui-works-filter .form-col {
    /* height: 50px; */
}

/* グリッドはそのまま（4列 + 2列 も既存指定でOK） */
#feas-searchform-1 .search-form-box {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
    align-items: stretch;
    /* ← 各セルを同じ高さに */
}

@media screen and (max-width: 767px) {
    #feas-searchform-1 .search-form-box {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* 各項目を縦Flexにして、中身を下に寄せる準備 */
#feas-searchform-1 .search-form-inner {
    grid-column: span 3;
    /* 1～4番目は3カラム=4列 */
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

@media screen and (max-width: 767px) {
    #feas-searchform-1 .search-form-inner {
        grid-column: 1;
        margin-bottom: 5px;
    }
}

/* 5=キーワード, 6=検索ボタン を6カラム=2列 */
#feas-searchform-1 .search-form-inner:nth-child(5),
#feas-searchform-1 .search-form-inner:nth-child(6) {
    grid-column: span 6;
}

@media screen and (max-width: 767px) {
    #feas-searchform-1 .search-form-inner:nth-child(5) {
        margin-bottom: 30px;
    }
}

/* 入力UIは自動で下へ（ラベル高さぶんを“自動で差し引く”効果） */
#feas-searchform-1 .search-form-inner .form-col {
    margin-top: auto;
}

@media screen and (max-width: 767px) {
    #feas-searchform-1 .search-form-inner .form-col {
        margin-top: 0;
    }
}

/* ボタンのブロック（.search-btn）は .form-col が無いのでボタン自体に適用 */
#feas-searchform-1 .search-btn .feas-submit-button {
    margin-top: auto;
}

@media screen and (max-width: 767px) {
    #feas-searchform-1 .search-btn .feas-submit-button {
        padding: 20px !important;
    }
}

/* 矢印を消す（各ブラウザ対応） */
#feas-searchform-1 select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none !important;
    /* 一部ブラウザのデフォルト背景も消す */
    padding-right: 1rem;
    /* 右の余白はお好みで */
}

/* 旧Edge/IE */
#feas-searchform-1 select::-ms-expand {
    display: none;
}

.table-sub-description {
    margin-top: 15px;
    font-size: 12px;
    color: #6b7280;
    text-align: center;
}

.count-bold {
    color: #2E5A44;
    font-weight: 600;
    font-size: 22px;
}

.works-filter-actions {
    margin-top: 12px;
}

.works-filter-actions .btn-clear {
    display: inline-block;
    padding: 10px 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    background: #fff;
}

@media screen and (min-width: 768px) {
    .works-filter-actions .btn-clear:hover {
        background: #f5f5f5;
    }
}

.works-contents .pagination {
    margin-top: 20px;
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
}

.works-contents .page-numbers {
    border: 1px solid #1d1d1d;
    width: 36px;
    height: 36px;
    display: block;
    line-height: 32px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    color: #1d1d1d;
    transition: .3s;
}

@media screen and (min-width: 768px) {
    .works-contents .page-numbers:hover {
        background: #ffc830;
        color: #1d1d1d;
    }
}

.works-contents .page-numbers.current {
    background: #1d1d1d;
    color: #fff;
}

.works-contents .prev.page-numbers, .works-contents .next.page-numbers {
    border: none;
    width: 18px;
    height: 18px;
    line-height: 1;
}

@media screen and (min-width: 768px) {
    .works-contents .prev.page-numbers:hover, .works-contents .next.page-numbers:hover {
        background-color: transparent;
        opacity: 0.7;
    }
}

/* FEASのセレクト全体の既定色（未選択時の色） */
@media screen and (min-width: 768px) {
    .ui-works-filter #feas-searchform-1 select {
        color: #8a8f98;
        /* お好みで */
    }
}

/* 先頭のプレースホルダ option を薄く */
.ui-works-filter #feas-searchform-1 select>option[value=""] {
    color: #9aa0a6;
}

/* value="" が選ばれていない＝何か選択済みなら濃く */
.ui-works-filter #feas-searchform-1 select:not(:has(> option[value=""]:checked)) {
    color: #1D1D1D;
    /* 濃い文字色 */
    font-weight: 600;
    /* 太字にしたい場合 */
}

/* 見出しの器（ラベル + 矢印） */
.table-works th .th-sortbox {
    /* display: inline-grid;
    grid-template-columns: auto 20px;
    align-items: center;
    column-gap: 8px; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.table-works th .th-sortbox.is-right {
    justify-content: end;
    /* 右寄せ用 */
}

/* ラベル自体もトグルリンク（任意） */
.table-works th .th-label-link {
    color: inherit;
    text-decoration: none;
}

@media screen and (min-width: 768px) {
    .table-works th .th-label-link:hover {
        text-decoration: underline;
    }
}

/* 矢印2本を縦に積む（個別クリック可） */
.table-works th .th-arrows {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}

/* クリックターゲットを十分確保 */
.table-works th .th-arrows .arrow {
    display: block;
    width: 20px;
    height: 18px;
    line-height: 0;
    position: relative;
    color: #9aa0a6;
    /* 非アクティブ色 */
    opacity: .7;
}

@media screen and (min-width: 768px) {
    .table-works th .th-arrows .arrow:hover {
        opacity: 1;
    }
}

/* 三角形（SVG不要・重ならない） */
.table-works th .th-arrows .arrow::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

.table-works th .th-arrows .arrow.up::before {
    border-bottom: 8px solid currentColor;
}

.table-works th .th-arrows .arrow.down::before {
    border-top: 8px solid currentColor;
}

/* アクティブ方向だけ濃く */
.table-works th .th-arrows .arrow.is-active {
    color: #111;
    opacity: 1;
}

/* ソートUI */
.table-works th {
    vertical-align: middle;
}

@media screen and (max-width: 767px) {
    .table-works th {
        background-color: #2e5a44 !important;
    }
}

.th-sortbox {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

.th-sortbox.is-right {
    justify-content: flex-end;
    width: 100%;
}

.th-label {
    font-weight: 600;
    pointer-events: none;
    color: #FFF;
}

.arrow {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.arrow svg {
    display: block;
    width: 16px;
    height: 16px;
}

.arrow.is-active svg {
    outline: none;
}

/* 必要なら色付け等はここで */

/* 施工実績テーブルのソート矢印：大きさ＆白色 */
.table-works thead .th-sortbox .arrow {
    width: 28px;
    /* クリック領域を大きく */
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.table-works thead .th-sortbox .arrow svg {
    width: 22px;
    /* 矢印アイコンの見た目サイズ */
    height: 22px;
}

/* 矢印を白に（path まで確実に） */
.table-works thead .th-sortbox .arrow svg,
.table-works thead .th-sortbox .arrow svg path {
    fill: #2e5a44 !important;
    /* テーマ側の指定に勝てるように保険で !important */
}

.table-works thead .th-sortbox .arrow svg {
    background-color: #ffffff;
    border-radius: 3px;
}

/* 任意：非アクティブは少し薄く、アクティブは100% */
.table-works thead .th-sortbox .arrow:not(.is-active) svg {
    opacity: .6;
}

.table-works thead .th-sortbox .arrow.is-active svg {
    opacity: 1;
}

/* 任意：背景が明るくて白が見えづらい時の縁取り（お好みで） */
.table-works thead .th-sortbox .arrow svg path {
    /* stroke: rgba(0,0,0,.35);
  stroke-width: 1; */
}

/* ▼ FEAS(フォームID=1) キーワード入力の色制御 */
/* #feas-searchform-1 input[type="search"],
#feas-searchform-1 input[type="text"] {
    color: #1d1d1d;
-webkit-text-fill-color: #1d1d1d;
} */

/* 未入力（placeholder が表示されている状態）の色 */
#feas-searchform-1 input[type="search"]::placeholder,
#feas-searchform-1 input[type="text"]::placeholder {
    color: #8a8f98;
    opacity: 1;
    /* ブラウザ既定の薄さを打ち消す */
}

/* フォーカスした瞬間（まだ未入力）→ プレースホルダーを濃く */
#feas-searchform-1 input[type="search"]:focus::placeholder,
#feas-searchform-1 input[type="text"]:focus::placeholder {
    color: #8a8f98;
}

/* 入力が始まったら（placeholder が消える状態）→ 本文の色は #1d1d1d */
#feas-searchform-1 input[type="search"]:not(:placeholder-shown),
#feas-searchform-1 input[type="text"]:not(:placeholder-shown) {
    color: #1d1d1d;
    -webkit-text-fill-color: #1d1d1d;
}

/* オートフィル時の黒文字化対策（必要なら） */
#feas-searchform-1 input[type="search"]:-webkit-autofill,
#feas-searchform-1 input[type="text"]:-webkit-autofill {
    -webkit-text-fill-color: #1d1d1d !important;
    transition: background-color 9999s ease-out 0s;
    box-shadow: 0 0 0 1000px transparent inset;
}

/* 未入力のとき（placeholder） */
#feas-searchform-1 input[type="search"]::placeholder,
#feas-searchform-1 input[type="text"]::placeholder {
    color: #8a8f98;
    opacity: 1;
}

/* 入力時 */
/* #feas-searchform-1 input[type="search"],
#feas-searchform-1 input[type="text"] {
    color: #8a8f98;
    -webkit-text-fill-color: #8a8f98;
} */

/* 未入力（placeholder表示中）の色 */
#feas-searchform-1 input[type="search"]::placeholder,
#feas-searchform-1 input[type="text"]::placeholder {
    color: #8a8f98;
    /* 薄いグレー */
    opacity: 1;
}

/* 入力後のテキストは濃い色に */
#feas-searchform-1 input[type="search"],
#feas-searchform-1 input[type="text"] {
    /* color: #1d1d1d !important; */
    /* 濃いグレー/黒 */
    /* -webkit-text-fill-color: #1d1d1d !important; */
    font-weight: 500;
    /* 入力後は太字にしたい場合 */
}

#feas-searchform-1 input:not(:placeholder-shown),
#feas-searchform-1 input:not(:placeholder-shown) {
    font-weight: 500;
}

/* ========== Snow Monkey Forms をPDFデザインに寄せる(精査版) ========== */

/* ベース：ラベルとコントロール */
.smf-item {
    display: grid;
    grid-template-columns: min(23.7921vw, 225px) 1fr;
    column-gap: 30px;
    row-gap: 10px;
    padding-bottom: 30px;
}

@media (max-width: 767px) {
    .smf-item {
        grid-template-columns: 1fr;
        row-gap: 8px;
    }
}

.smf-item__col--label {
    display: flex;
    align-items: center;
}

.smf-item__label__text {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: #1D1D1D;
    position: relative;
    display: inline-block;
    /* ← typo修正 */
}

/* 必須マーク（赤の小さな●を右肩に） */
.form-required .smf-item__label__text::before {
    content: "\25CF";
    font-size: 10px;
    color: #f00;
    position: absolute;
    top: 2px;
    right: -14px;
    transform: translateY(0);
}

/* 入力欄（テキスト/メール/電話/テキストエリア） */
.smf-item__controls input[type="text"],
.smf-item__controls input[type="email"],
.smf-item__controls input[type="tel"],
.smf-item__controls textarea.smf-textarea-control__control {
    width: 100%;
    background-color: #f6f6f6;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 16px;
    line-height: 1.8;
    padding: 15px 15px;
    margin: 0;
}

.smf-item__controls textarea.smf-textarea-control__control {
    min-height: 160px;
    resize: vertical;
}

/* エラーメッセージ：項目の右横に小さく */
.smf-error-messages {
    position: absolute;
    display: inline-block;
    width: auto;
    height: auto;
    margin-left: 20px;
    margin-top: 5px;
    font-size: 14px;
}

/* 確認画面：プレースホルダーの見た目調整 */
.snow-monkey-form[data-screen="confirm"] .smf-placeholder {
    font-size: 16px;
    padding-top: 12px;
}

/* ボタン（確認・送信/完了・戻る） */
.smf-action {
    display: flex;
    gap: 14px;
    justify-content: center;
    align-items: center;
    margin: 50px 0 0;
    flex-wrap: wrap;
}

.smf-action .smf-button-control__control {
    appearance: none;
    border: none;
    border-radius: 0;
    padding: 18px 56px;
    font-size: 16px;
    cursor: pointer;
}

/* 確認 → 送信/完了：濃紺フラット */
.smf-action .smf-button-control__control[data-action="confirm"],
.smf-action .smf-button-control__control[data-action="complete"],
.smf-action .smf-button-control__control[type="submit"] {
    background: #FFC830;
    color: #1d1d1d;
    width: 300px;
    border-radius: 0;
    border: none;
    padding: 26px 80px;
    font-size: 18px;
    font-weight: 600;
}

/* 戻る：薄グレー×紺文字 */
.smf-action .smf-button-control__control[data-action="back"] {
    background: #eaeaea;
    color: #002555;
}

/* 進捗トラッカー（現在位置を紺） */
.smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__number {
    background-color: #002555;
    color: #fff;
}

.smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__text {
    color: #002555;
    font-weight: 600;
}

/* 同意チェック（中央寄せ・グレーの囲み） */
.field-checkbox-privacy,
.field-group-privacy {
    display: block;
    padding: 0;
}

.field-group-privacy {
    padding: 24px;
    border-radius: 5px;
    background: #f7f7f7;
    font-size: 14px;
}

.field-text-privacy {
    font-weight: 600;
}

.field-text-privacy a {
    color: #1d1d1d;
    text-decoration: underline;
}

/* チェックボックスのラベル（不要表示なら隠す） */
.smf-checkbox-control__label {
    display: none;
}

/* テーブル風フォームの余白調整（任意） */
.smf-form--simple-table {
    margin-top: 40px;
}

.smf-form--simple-table .smf-item.field-checkbox-privacy {
    padding-bottom: 0;
}

/* 完了画面の見た目（淡い青背景で中央） */
.snow-monkey-form[data-screen="complete"] .smf-form {
    display: flex;
    justify-content: center;
    background-color: #ecf3f8;
    padding: 30px;
    border-radius: 10px;
}

/* 入力欄の統一（URLを追加） */
.smf-item__controls input[type="text"],
.smf-item__controls input[type="email"],
.smf-item__controls input[type="tel"],
.smf-item__controls input[type="url"],
/* ← 追加 */
.smf-item__controls textarea.smf-textarea-control__control {
    width: 100%;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 16px;
    line-height: 1.8;
    padding: 15px 15px;
    margin: 0;
}

/* URL入力の見た目（プレースホルダー含む） */
.smf-item__controls input[type="url"]::placeholder {
    opacity: .7;
}

/* バリデーション時の軽いフィードバック（任意） */
.smf-item__controls input[type="url"]:user-invalid {
    outline: 2px solid #d32f2f22;
}

.smf-item__controls input[type="url"]:user-valid {
    outline: 2px solid #2e7d321f;
}

/* 確認画面での長いURL折り返し対策 */
.snow-monkey-form[data-screen="confirm"] .smf-placeholder {
    word-break: break-all;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

/* 進捗トラッカー（現在位置を紺）—既存維持 */
.smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__number {
    background-color: #1D1D1D;
    color: #fff;
}

.smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__text {
    color: #1D1D1D;
    font-weight: 600;
}

/* ===== 必須バッジ＆未入力の視覚フィードバック ===== */

/* ① 以前の赤●を無効化（使わない場合） */
.form-required .smf-item__label__text::before {
    content: none !important;
}

/* ② 「必須」バッジ（ラベル右側に表示） */
.form-required .smf-item__label__text {
    position: relative;
    padding-right: 48px;
    /* バッジ分の余白 */
}

.form-required .smf-item__label__text::after {
    content: "必須";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    min-width: 40px;
    text-align: center;
    font-size: 12px;
    line-height: 1;
    padding: 6px 8px 5px;
    border-radius: 4px;
    background: #ffc830;
    color: #1D1D1D;
    font-weight: 500;
}

/* ③ 未入力の必須コントロールには薄い赤のアウトライン（対応ブラウザ） */
.form-required .smf-item__controls input:required:user-invalid,
.form-required .smf-item__controls textarea:required:user-invalid,
.form-required .smf-item__controls select:required:user-invalid {
    outline: 2px solid #d32f2f22;
}

/* ④ 入力済み（妥当）ならうっすら緑（任意。不要なら削除可） */
.form-required .smf-item__controls input:required:user-valid,
.form-required .smf-item__controls textarea:required:user-valid,
.form-required .smf-item__controls select:required:user-valid {
    outline: 2px solid #2e7d321f;
}

/* ⑤ 確認画面ではバッジを非表示（見た目をすっきり） */
.snow-monkey-form[data-screen="confirm"] .form-required .smf-item__label__text::after {
    display: none;
}

form.snow-monkey-form[data-screen="confirm"] .field-group-privacy {
    display: none;
}

@media (min-width: 768px) {
    form.snow-monkey-form[data-screen="confirm"] .smf-form {
        width: 60%;
        margin: auto;
    }
}

@media (max-width: 767px) {
    form.snow-monkey-form[data-screen="confirm"] .smf-form {
        padding: 30px;
    }

    form.snow-monkey-form[data-screen="confirm"] .smf-button-control {
        margin-left: 0;
    }
}

@media (min-width: 992px) {
    .contact-hero .container {
        /* max-width: 960px; */
    }

}

.contact-contents-box .list-title {
    background-color: #2E5B45;
    margin: 0;
    color: #FFF;
    font-weight: 500;
    font-size: 20px;
    padding: 15px;
    text-align: left;
    border-radius: 50px;
    display: flex;
    align-items: center;
    line-height: 1;
    margin-bottom: 50px;
}

.contact-contents-box .list-title::before {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    display: inline-block;
    margin-right: 15px;
}

.smf-progress-tracker {
    margin-bottom: 50px;
}

.contact-hero {
    padding-bottom: 100px;
}

.smf-item__col.smf-item__col--controls {
    text-align: left;
}

.field-group-privacy {
    justify-content: center;
}

.field-group-privacy .field-text-privacy {
    font-weight: 600;
    margin-left: 10px;
}

.breadcrumbs {
    background-color: #1d1d1d;
    display: inline-block;
    padding: 7.5px 15px;
    border-radius: 50px;
}

.breadcrumbs span {
    font-size: 12px;
    line-height: 1;
}

.breadcrumbs a {
    color: #FFF;
    display: inline-block;
    transition: .3s;
}

.breadcrumbs a span {
    color: #FFF;
    display: inline-block;
    transition: .3s;
}

@media screen and (min-width: 768px) {
    .breadcrumbs a:hover {
        color: #ffc830;
    }
}

.breadcrumbs .current-item {
    color: #FFF;
    display: inline-block;
}

.breadcrumbs .breadcrumb-arrow {
    font-size: 10px;
    color: #FFF;
    margin: 0 10px;
}

@media screen and (min-width: 992px) {
    .menu-box-wrap {
        display: none;
    }
}

@media screen and (max-width: 991px) {
    .site-header .nav {
        display: none;
    }
}

.text-box .btn {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    line-height: 1;
    height: 50px;
    outline: none;
    position: relative;
    transition: color 0.5s ease;
    overflow: hidden;
    display: inline-flex;
}

@media (max-width: 767px) {
    .group-card .btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }

}

.text-box .btn-bk {
    color: #ffffff;
}

@media screen and (max-width: 767px) {
    .text-box .btn-bk {
        align-items: center;
        justify-content: center;
        display: flex;
    }
}

.text-box .btn-yl {
    color: #1d1d1d;
}

@media screen and (max-width: 767px) {
    .text-box .btn-yl {
        align-items: center;
        justify-content: center;
        display: flex;
    }
}

@media screen and (min-width: 768px) {
    .text-box .btn-bk:hover span {
        color: #1D1D1D;
    }
}

@media screen and (min-width: 768px) {
    .text-box .btn:hover::before {
        transform: scaleX(1);
        transform-origin: left;
    }
}

.text-box .btn::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: right;
    transition: all 0.5s ease;
    transition-property: transform;
    z-index: 1;
}

.text-box .btn::before {
    background: #1d1d1d;
}

.btn span {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
    font-weight: 500;
    transition: .3s;
}

@media screen and (min-width: 768px) {
    .btn:hover span {
        color: #FFF;
    }
}

/* .btn-bk span {
    color: #ffffff;
} */

/* .top-company .btn:hover span:after {
    background-image: url(../images/btn-arrow-bk.svg);
} */

.section-box .white-text span {
    color: #FFF;
}





/* -------------------アニメーション------------------- */
/* =========================
   1) 見出し：1文字ずつリビール
========================= */
/* 初期（分割後の .char を少し下げて透明に） */
.heading-title .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(.6em);
    transition:
        transform .6s cubic-bezier(.2, .7, .2, 1),
        opacity .6s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--char-index) * .03s);
    will-change: transform, opacity;
    font-weight: 600;
}

/* 可視域に入ったら発火（.heading-title に .is-inview が付与される想定） */
.heading-title.is-inview .char {
    opacity: 1;
    transform: translateY(0);
}

/* PC は少しゆったり＆密に */
@media (min-width:768px) {
    .heading-title .char {
        transition-duration: .7s;
        transition-delay: calc(var(--char-index) * .025s);
    }
}

/* 動き控えめ希望（OS設定） */
@media (prefers-reduced-motion:reduce) {
    .heading-title .char {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =========================
   2) セクション汎用リビール
   - デフォルトは表示
   - JS準備完了(html.has-reveal)後だけ“非表示ベース”を適用
   - is-inview が勝って必ず表示に戻る
========================= */
/* デフォルト（JS不調でも見える） */
.section-box [data-reveal] {
    opacity: 1;
    transform: none;
}

/* JS準備完了後だけ“非表示ベース”を適用 */
.has-reveal .section-box [data-reveal] {
    opacity: 0;
    /* 変化元はバリアントごとのカスタムプロパティを参照 */
    transform: var(--reveal-from, translateY(18px));
    transition:
        opacity .7s cubic-bezier(.2, .7, .2, 1),
        transform .7s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--reveal-order, 0) * var(--reveal-stagger, 80ms));
    will-change: opacity, transform;
}

/* 発火後（←このルールは必ず上記より“あと”に置く） */
.section-box.is-inview [data-reveal] {
    opacity: 1;
    transform: none;
}

/* バリアント（変化元を変えるだけ：--reveal-from） */
.section-box [data-reveal="fade"] {
    --reveal-from: none;
}

.section-box [data-reveal="up"] {
    --reveal-from: translateY(18px);
}

.section-box [data-reveal="left"] {
    --reveal-from: translateX(18px);
}

.section-box [data-reveal="right"] {
    --reveal-from: translateX(-18px);
}

.section-box [data-reveal="zoom"] {
    --reveal-from: scale(.96);
}

/* 大きめ要素はややゆっくり */
.has-reveal .section-box figure[data-reveal],
.has-reveal .section-box img[data-reveal] {
    transition-duration: .85s;
}

/* 動き控えめ希望（OS設定） */
@media (prefers-reduced-motion:reduce) {
    .section-box [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* IO/JS不調の最終保険（常時表示） */
html.no-reveal .section-box [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* 発火後は常に表示（非表示ベースより後ろに置く） */
.has-reveal .section-box.is-inview [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
}

/* =========================
   3) ボタン矢印の軽いフィードバック
========================= */
.btn .arrow-icon {
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), opacity .35s;
    transform: translateX(0) translateY(0) scale(1);
    opacity: .9;
}

@media screen and (min-width: 768px) {

    .btn:hover .arrow-icon,
    .btn:focus-visible .arrow-icon {
        /* transform: translateX(4px) translateY(-1px) scale(1.05); */
        opacity: 1;
    }
}

/* =========================
   4) /company の企業理念は常に表示（ピンポイント保険）
========================= */
#philosophy [data-reveal],
#philosophy .effect-fade {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* 例：見た目だけ90%に */
.form-small input,
.form-small select,
.form-small textarea {
    transform: scale(0.9);
    transform-origin: left center;
}

/* グローバル：iOSのフォーカス時ズーム対策 */
@supports (-webkit-touch-callout: none) {
    input, select, textarea, button {
        font-size: 16px;
    }

    input::placeholder, textarea::placeholder {
        font-size: 16px;
    }
}

html {
    -webkit-text-size-adjust: 100%;
}

/* 自動文字拡大の揺れ防止 */

/* 検索フォームのラッパー（クラスは環境に合わせて変更） */
.works-search,
.fe-advns .fe-form,
.fe-advns .search_items {
    /* 候補：FE Advanced Searchのラッパー */
    display: grid;
    grid-template-columns: 1fr;
    /* SPは1カラム */
    row-gap: 14px;
    /* ← 縦の間隔は常にコレだけにする */
}

/* 子要素の“外側マージン”は無効化してgapに一本化 */
.works-search>*,
.fe-advns .fe-form>*,
.fe-advns .search_items>* {
    margin: 0 !important;
}

/* ラベルとコントロールの細かな整形（任意） */
.works-search label,
.fe-advns .fe_label {
    margin: 0 0 .4rem !important;
    line-height: 1.2;
}

.works-search select,
.fe-advns select {
    width: 100%;
    line-height: 1.2;
}

/* ===== iOSの文字拡大をこのフォーム内だけ抑制 ===== */
#feas-searchform-1,
#feas-searchform-1 * {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

/* ===== “間隔の出どころ”を1か所に限定（gap管理） ===== */
#feas-searchform-1 .search-form-box {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
    /* ← 間隔はここだけから出す */
    align-items: end;
}

@media (max-width: 767px) {
    #feas-searchform-1 .search-form-box {
        grid-template-columns: 1fr;
        row-gap: 15px;
        column-gap: 0;
    }
}

/* 子ブロックに残っている margin/padding の積み上がりを打ち消す */
#feas-searchform-1 .search-form-inner,
#feas-searchform-1 .search-form-inner>* {
    margin: 0 !important;
    padding: 0 !important;
}

/* ===== コントロールの寸法を “px固定” に（相対拡大を断つ） ===== */
@supports (-webkit-touch-callout: none) {

    #feas-searchform-1 select,
    #feas-searchform-1 input[type="text"],
    #feas-searchform-1 input[type="search"],
    #feas-searchform-1 button {
        font-size: 16px !important;
        /* iOSのズーム発火を根本から止める */
    }
}

#feas-searchform-1 select,
#feas-searchform-1 input[type="text"],
#feas-searchform-1 input[type="search"] {
    width: 100%;
    box-sizing: border-box;
    height: 44px !important;
    /* ← 高さは固定 */
    line-height: 44px !important;
    /* ← 行高も固定（縦中央） */
    padding: 0 12px !important;
    /* ← 内側余白も px 固定 */
    border: 1px solid #e5e7eb;
    background: #fff;
}

/* ===== ラベルの下だけ少し空ける（ここも px 固定） ===== */
#feas-searchform-1 .search-title {
    margin: 0 0 6px !important;
    line-height: 1.2;
}

/* ===== :hover/:focus で高さが変わらないように ===== */
#feas-searchform-1 :focus,
#feas-searchform-1 :focus-within {
    box-shadow: none !important;
    outline-offset: 0;
}

@media (hover: none) and (pointer: coarse) {
    #feas-searchform-1 *:hover {
        box-shadow: none !important;
        transition: none !important;
        animation: none !important;
    }

    #feas-searchform-1 select:hover, #feas-searchform-1 input[type="text"]:hover {
        background: #ffffff !important;
    }
}

.site-header {
    background: #FFF !important;
}

/* === 基本フェードアップ === */
.effect-fade {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s ease, transform .6s ease;
    will-change: opacity, transform;
}

.effect-scroll {
    opacity: 1;
    transform: none;
}

/* 左右スライドのバリエーション（任意） */
.effect-fade-left {
    transform: translateX(-16px);
}

.effect-fade-right {
    transform: translateX(16px);
}

.effect-scroll.effect-fade-left,
.effect-scroll.effect-fade-right {
    transform: none;
}

/* スタッガー（親に付ける） */
.stagger>* {
    opacity: 0;
    transform: translateY(10px);
}

.stagger.effect-scroll>* {
    animation: fadeUp .5s ease both;
}

.stagger.effect-scroll>*:nth-child(1) {
    animation-delay: .06s;
}

.stagger.effect-scroll>*:nth-child(2) {
    animation-delay: .12s;
}

.stagger.effect-scroll>*:nth-child(3) {
    animation-delay: .18s;
}

/* 以降必要なら増やす */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* 端末配慮：動き苦手設定の人には最小限に */
@media (prefers-reduced-motion: reduce) {

    .effect-fade,
    .stagger>* {
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* === 基本：セクション到達で子要素を出す === */
/* 初期は非表示にしたいので、JSが has-reveal を付けたときだけ隠す */
html.has-reveal .reveal {
    opacity: 0;
    transform: translateY(14px);
}

html.has-reveal .reveal-left {
    opacity: 0;
    transform: translateX(-16px);
}

html.has-reveal .reveal-right {
    opacity: 0;
    transform: translateX(16px);
}

/* セクションが in-view になったら、子の .reveal を表示 */
.section-box.is-inview .reveal,
.section-box.is-inview .reveal-left,
.section-box.is-inview .reveal-right {
    opacity: 1;
    transform: none;
    transition: opacity .6s ease, transform .6s ease;
    will-change: opacity, transform;
}

/* スタッガー（親に .stagger を付けるとズラして出る） */
.section-box.is-inview .stagger>* {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeUp .5s ease both;
}

.section-box.is-inview .stagger>*:nth-child(1) {
    animation-delay: .06s;
}

.section-box.is-inview .stagger>*:nth-child(2) {
    animation-delay: .12s;
}

.section-box.is-inview .stagger>*:nth-child(3) {
    animation-delay: .18s;
}

/* 必要に応じて増やす */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* アニメ苦手設定のユーザー配慮 */
@media (prefers-reduced-motion: reduce) {

    html.has-reveal .reveal,
    html.has-reveal .reveal-left,
    html.has-reveal .reveal-right,
    .section-box.is-inview .stagger>* {
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

.modal-nav .phone-modal-menu.main li:last-of-type a {
    padding: 0;
}

.modal-nav .phone-modal-menu.main li:last-of-type a img {
    width: 50%;
}

/* モーダルのスタッガー速度（必要ならページごとに上書きOK） */
:root {
    --modal-stagger: 80ms;
}

/* 初期状態：非表示 */
#modal-nav-id .menu-list {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.45s cubic-bezier(.2, .7, .2, 1),
        transform 0.45s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--i, 0) * var(--modal-stagger));
    will-change: opacity, transform;
}

/* モーダルが開いたとき（body.modal-open が付与される想定） */
body.modal-open #modal-nav-id .menu-list {
    opacity: 1;
    transform: none;
}

/* アクセシビリティ：アニメ無効化 */
@media (prefers-reduced-motion: reduce) {
    #modal-nav-id .menu-list {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* MV：共通のフェードアップ */
.mv-img,
.mv-text {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 1.15s cubic-bezier(.2, .7, .2, 1),
        transform 1.15s cubic-bezier(.2, .7, .2, 1);
    will-change: opacity, transform;
}

/* 表示状態 */
.mv-img.is-show,
.mv-text.is-show {
    opacity: 1;
    transform: translateY(0);
}

/* テキストは少し遅らせて“追従” */
.mv-text {
    transition-delay: .18s;
    /* 好みで .12〜.25s */
}

/* さらに“ゆっくり”にしたい時は 1.15s → 1.35s 程度に */

@media (prefers-reduced-motion: reduce) {
    .mv-img, .mv-text {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* 基本は出さない（保険） */
.page-loader {
    display: none;
}

/* トップだけ表示・レイアウト適用 */
.home .page-loader {
    display: grid;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #fff;
    place-items: center;
    pointer-events: none;
    opacity: 1;
    transition: opacity .6s ease;
}

.home .page-loader .loader-inner {
    display: grid;
    place-items: center;
}

/* 共通：モバイル基準 */
.page-loader .loader-logo {
    width: 70vw;
    /* スマホの程よい大きさ */
    max-width: 100vw;
    /* 画面幅が狭いときは縮む */
    height: auto;
}

/* タブレット〜PCで少し大きめに */
@media (min-width: 768px) {
    .page-loader .loader-logo {
        width: 360px;
        /* PCで大きめに */
        max-width: 400px;
    }
}

/* 大画面デスクトップはさらに大きく */
@media (min-width: 1200px) {
    .page-loader .loader-logo {
        width: 400px;
        max-width: 420px;
    }
}

.home .page-loader .loader-logo {
    opacity: 0;
    transform: translateY(10px) scale(.98);
    animation: loader-pop .9s cubic-bezier(.2, .7, .2, 1) .15s forwards,
        loader-hold .8s linear .9s forwards,
        loader-fade .5s ease 1.7s forwards;
}

@keyframes loader-pop {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes loader-hold {
    from {
        opacity: 1;
    }

    to {
        opacity: 1;
    }
}

@keyframes loader-fade {
    to {
        opacity: 0;
    }
}

/* ローダー終了フェード */
.home.is-loaded .page-loader {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .page-loader {
        display: none !important;
    }
}

.method-faq {
	display: none;
}

.notfound-contents {
    padding-bottom: 100px;
}

@media (min-width: 768px) {
    .notfound-contents .btn {
        width: 300px;
        margin: 0;
    }
}

@media (max-width: 767px) {
    .notfound-contents {
        padding-bottom: 50px;
    }
}