body{
    font-family: 'Shippori Mincho', 'Yu Mincho', 'YuMincho', serif;
    background-color: #f7f7f7;
    font-size: 16px;
    line-height: 1.5;
}
h1 {
    font-weight: bold;
    font-size: 57px;
    line-height: 1.4;
    letter-spacing: -5px;
    text-shadow:0 3px 12px rgba(0,0,0,.35);
}
h2 {
    font-weight: bold;
    font-size: 36px;
    line-height: 1.3;
}
h3 {
    font-size: 30px;
    font-weight: bold;
    line-height: 1.3;
}
header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    transition:
        background-color .45s ease,
        backdrop-filter .45s ease,
        box-shadow .45s ease;
}

.header_inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    margin: 26px 64px;
}

/* スクロール後 */
header.scrolled{
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.header_logo{
    width: 200px;
}
.nav-container {
    display: flex;
}
.globalnav ul {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.globalnav a{
    position: relative;
    display: flex;
    align-items: center;

    color: #fff;
    text-decoration: none;
    font-size: 16px;
    line-height: 1;
}

/* 下線 */

.globalnav a::after{
    content: "";

    position: absolute;
    left: 50%;
    bottom: -10px;

    width: 0;
    height: 1px;

    background: #fff;

    transform: translateX(-50%);
    transition: width .45s cubic-bezier(.22,1,.36,1);
}

.globalnav a:hover::after{
    width: 100%;
}

/* ------------------------------
ENTRYボタン
------------------------------ */

.entry{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:8px 30px;
    margin-left:32px;

    border:1px solid rgba(255,255,255,.8);
    background:transparent;

    color:#fff;
    text-decoration:none;

    transition:
        background-color .45s ease,
        color .45s ease,
        border-color .45s ease,
        transform .45s cubic-bezier(.22,1,.36,1),
        box-shadow .45s ease;
}

.entry:hover{
    background:#fff;
    color:#111;
    border-color:#fff;

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(0,0,0,.16);
}

.entry_inner{
    display:flex;
    align-items:center;
    gap:18px;
}

.entry_inner img{
    width:10px;
    transition:transform .45s cubic-bezier(.22,1,.36,1);
}

.entry:hover .entry_inner img{
    transform:translateX(6px);
}

.entry_small{
    font-size:10px;
    line-height:1;
    margin-top: 3px;
}


/* ===============================
First View
=============================== */

.fv{
    min-height:100vh;
    background:url("../image/fv.jpg") center/cover no-repeat;
    position:relative;
    color:#f7f7f7;
}
.fv_inner{
    padding-top:155px;
    padding-left:68px;
    display:flex;
    flex-direction:column;
    gap:45px;
}
.fv p{
    font-size: 20px;
}
.accent{
    display: inline-block;
    font-size: 75px;
    background: linear-gradient(
        90deg,
        #D4F9FF 0%,
        #5EE6FC 70%,
        #2AA6BA 84%,
        #2AA6BA 100%
    );

    background-size: 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: shine 3s ease 1s 1;
}

@keyframes shine{

    0%{
        filter: brightness(1);
    }

    45%{
        filter:
            brightness(1.2)
            drop-shadow(0 0 8px rgba(94,230,252,.45));
    }

    55%{
        filter:
            brightness(1.45)
            drop-shadow(0 0 14px rgba(212,249,255,.75));
    }

    100%{
        filter: brightness(1);
    }

}

.scattered-title span{
    display: inline-block;
    opacity: 0;
    transform:
        translate3d(var(--x), var(--y), 0)
        rotate(var(--r))
        scale(.4);

    filter: blur(10px);

    animation: gatherTitle 4s cubic-bezier(.22,1,.36,1) forwards;
}

.scattered-title span:nth-child(1){ animation-delay: .02s; }
.scattered-title span:nth-child(2){ animation-delay: .05s; }
.scattered-title span:nth-child(3){ animation-delay: .08s; }
.scattered-title span:nth-child(4){ animation-delay: .11s; }
.scattered-title span:nth-child(5){ animation-delay: .14s; }
.scattered-title span:nth-child(6){ animation-delay: .17s; }
.scattered-title span:nth-child(7){ animation-delay: .20s; }
.scattered-title span:nth-child(8){ animation-delay: .23s; }
.scattered-title span:nth-child(9){ animation-delay: .26s; }
.scattered-title span:nth-child(10){ animation-delay: .29s; }
.scattered-title span:nth-child(11){ animation-delay: .32s; }
.scattered-title span:nth-child(13){ animation-delay: .35s; }
.scattered-title span:nth-child(14){ animation-delay: .38s; }
.scattered-title span:nth-child(15){ animation-delay: .41s; }
.scattered-title span:nth-child(16){ animation-delay: .44s; }
.scattered-title span:nth-child(17){ animation-delay: .47s; }
.scattered-title span:nth-child(18){ animation-delay: .50s; }
.scattered-title span:nth-child(19){ animation-delay: .53s; }
.scattered-title span:nth-child(20){ animation-delay: .56s; }
.scattered-title span:nth-child(21){ animation-delay: .59s; }
.scattered-title span:nth-child(22){ animation-delay: .62s; }
.scattered-title span:nth-child(23){ animation-delay: .65s; }



@keyframes gatherTitle{

    0%{
        opacity:0;
        transform:
            translate3d(var(--x), var(--y), 0)
            rotate(var(--r))
            scale(.4);

        filter:blur(10px);
    }

    60%{
        opacity:1;
    }

    100%{
        opacity:1;
        transform:
            translate3d(0,0,0)
            rotate(0)
            scale(1);

        filter:blur(0);
    }

}
/* CTA */

.fv_btn-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 100px;

    width: fit-content;
    position: absolute;
    right: 100px;
    bottom: 148px;

    padding: 25px 30px;

    background: #fff;
    color: #111;

    font-size: 23px;
    font-weight: bold;
    text-decoration: none;

    overflow: hidden;
    z-index: 1;

    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        box-shadow .45s ease,
        color .35s ease;
}

/* グラデーション本体 */
.fv_btn-entry::before {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        #D4F9FF 0%,
        #5EE6FC 40%,
        #2AA6BA 74%,
        #2AA6BA 100%
    );

    transform: translateX(-100%);
    transition: transform .65s cubic-bezier(.22,1,.36,1);

    z-index: -2;
}

/* 光のライン */
.fv_btn-entry::after {
    content: "";
    position: absolute;
    top: 0;
    left: -40%;
    width: 35%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,.65) 50%,
        transparent 100%
    );

    transform: skewX(-20deg);
    opacity: 0;

    z-index: -1;
}

.fv_btn-entry:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
    color: #111;
}

.fv_btn-entry:hover::before {
    transform: translateX(0);
}

.fv_btn-entry:hover::after {
    opacity: 1;
    animation: cta-shine .75s ease forwards;
}

.fv_btn-entry img {
    transition: transform .45s cubic-bezier(.22,1,.36,1);
}

.fv_btn-entry:hover img {
    transform: translateX(10px);
}

@keyframes cta-shine {
    0% {
        left: -40%;
    }
    100% {
        left: 120%;
    }
}


    .fv_btn-entry::before {
        animation: fvEntryGradient 1.2s
            cubic-bezier(.22,1,.36,1)
            1s
            forwards;
    }

    .fv_btn-entry::after {
        opacity: 1;
        animation: fvEntryShine 1s
            ease
            1s
            forwards;
    }

    .fv_btn-entry img {
        animation: fvEntryArrow 1.2s
            cubic-bezier(.22,1,.36,1)
            1s
            forwards;
    }

    /* グラデーション */
    @keyframes fvEntryGradient {

        from{
            transform: translateX(-100%);
        }

        to{
            transform: translateX(0);
        }

    }

    /* 光が流れる */
    @keyframes fvEntryShine {

        0%{
            left:-40%;
            opacity:0;
        }

        10%{
            opacity:1;
        }

        100%{
            left:120%;
            opacity:0;
        }

    }

    /* 矢印 */
    @keyframes fvEntryArrow {

        0%{
            transform:translateX(0);
        }

        60%{
            transform:translateX(10px);
        }

        100%{
            transform:translateX(6px);
        }

    }


/* ===============================
　会社案内
=============================== */

#company {
    background-color: #EAEAEA;
}

.section_inner {
    padding-top: 100px;
    padding-bottom: 80px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.section_inner p {
    font-size: 20px;
}

.section-lead {
    text-align: center;
}

.company_inner {
    background-color: #f7f7f7;
    padding-bottom: 225px;
}

/* 3つのカード */

.company-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;

    padding: 0 80px;
    margin-top: -110px;
}

.feature-box {
    color: #f7f7f7;
    padding: 277px 32px 24px;
}

.feature01 {
    background: url("../image/Placeholder_Image_1.jpg") center / cover no-repeat;
}

.feature02 {
    background: url("../image/Placeholder_Image_2.jpg") center / cover no-repeat;
}

.feature03 {
    background: url("../image/Placeholder_Image_3.jpg") center / cover no-repeat;
}

.feature-box__text {
    margin-top: 24px;
}

.feature-box__subtitle {
    margin-top: 8px;
}

.feature-box__subtitle span {
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.feature-box__subtitle span {
    display: inline-block;
    width: 0;
    white-space: nowrap;
    overflow: hidden;
}

.feature-box.played .feature-box__subtitle span {
    animation: handwriting 15s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes handwriting {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

/* なぜ選ばれるのか */

.company-reason {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;

    padding: 124px 15%;
}

.company-reason_text {
    display: flex;
    flex-direction: column;
    gap: 24px;

    line-height: 2;
}

.company-reason_image {
    overflow: hidden;
}

/* company-reason内のマーカーだけサイズ調整 */

.company-reason .marker {
    transform: translateY(-2px);
    font-size: 1.25em;
    font-weight: 700;
}

/* company-reason：ホバーで順番にマーカー */

.company-reason:hover .company-reason__list li:nth-child(1) .marker::before {
    transform: scaleX(1);
    transition-delay: .05s;
}

.company-reason:hover .company-reason__list li:nth-child(2) .marker::before {
    transform: scaleX(1);
    transition-delay: .35s;
}

.company-reason:hover .company-reason__list li:nth-child(3) .marker::before {
    transform: scaleX(1);
    transition-delay: .65s;
}


/* ===============================
　共通マーカー
=============================== */

.marker {
    position: relative;
    display: inline-block;
    z-index: 1;
}

.marker::before {
    content: "";
    position: absolute;

    left: -4px;
    right: -4px;
    bottom: 4px;

    height: 40%;

    background: linear-gradient(
        90deg,
        #D4F9FF 0%,
        #5EE6FC 75%,
        #2AA6BA 100%
    );

    opacity: .55;

    transform: scaleX(0);
    transform-origin: left center;

    transition: transform 2s cubic-bezier(.22,1,.36,1);

    z-index: -1;
}


/* ===============================
　先輩の声
=============================== */

.voice_real_cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;

    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 150px;
}

.voice_real_item {
    width: 90%;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;

    text-align: center;
}

.voice_real_item img {
    width: 60%;
}

.voice_real_item_name {
    font-weight: bold;
}


/* 経営陣 */

.voice-executive {
    background-color: #EAEAEA;
    padding-top: 100px;
}

.section_sub_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;

    padding-bottom: 50px;
}

.h2_subtitle {
    font-weight: bold;
}

.voice-executive_inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 80px;

    max-width: 1100px;
    margin: 0 auto;

    padding-top: 50px;
    padding-bottom: 150px;
}

.voice-executive_item {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.voice-executive_item_title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.voice-executive_item_title img {
    width: 100px;
}

.sub_name {
    font-size: 12px;
    font-weight: bold;
    line-height: 1.5;
}

.name {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5;
}


/* Change Your Life */

.voice-change {
    background-color: #EAEAEA;
}

.voice-change h2 {
    position: relative;

    width: fit-content;
    margin: 0 auto;
}

.voice-change h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -20px;

    width: 80px;
    height: 1px;

    background-color: #000;

    transform: translateX(-50%);
}

.voice-change_list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;

    max-width: 1200px;
    margin: 112px auto 0;
    padding-bottom: 170px;
}

.voice-change_item {
    display: flex;
    align-items: center;
    gap: 62px;

    background-color: #f7f7f7;
    padding: 60px 30px;

    box-shadow: 0 10px 20px rgba(0,0,0,.1);
}

.voice-change_item.played .marker::before {
    transform: scaleX(1);
}

.voice-change_img {
    max-width: 300px;
    overflow: hidden;
}

.voice-change_name {
    width: fit-content;

    margin-bottom: 16px;
    padding: 1px 10px;

    color: #000;
    background-color: #F2F2F2;
    border-radius: 10px;
}

.voice-change_job,
.voice-change_income {
    font-weight: bold;
    line-height: 1.5;
}

.voice-change_title {
    margin-top: 15px;
    margin-bottom: 22px;

    font-size: 20px;
    font-weight: bold;
}

/* ===============================
　仕事内容
=============================== */

.works_inner {
    background-color: #000;
    color: #f7f7f7;
    padding-top: 50px;
}

.works-item {
    display: grid;
    grid-template-columns: minmax(360px, .9fr) minmax(420px, 1.1fr);
    align-items: center;
    gap: 88px;

    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 96px 80px;

    border-top: 1px solid #f7f7f7;
}

.works-item:last-child {
    border-bottom: 1px solid #f7f7f7;
}

.works-item_content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.works-item_image {
    width: 100%;
    overflow: hidden;
}

.works-item_image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;

    opacity: 0;
    transform: translateY(100px) scale(1.05);

    transition:
        opacity 2s cubic-bezier(.22,1,.36,1),
        transform 5s cubic-bezier(.22,1,.36,1);
}

.works-item.is-shown .works-item_image img {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.works-item_number {
    font-size: 130px;
    font-weight: bold;
    line-height: 1;
}

.works-item_role-en {
    font-size: 16px;
}

.works-item_role {
    font-size: 30px;
}

.works-item_text {
    font-size: 16px;
    line-height: 1.8;
}

.works-item__skills {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;

    padding: 0;
    list-style: none;
}

.works-item__skills li {
    border: 1px solid #fff;
    border-radius: 999px;
    padding: 7px 15px;

    font-size: 16px;
    line-height: 1.5;
}


/* ===============================
　求める人物像
=============================== */

.personnel {
    padding: 140px 0;
    background: #f7f7f7;
}

.personnel_cards {
    max-width: 1320px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.personnel_cards_item {
    min-height: 610px;
    padding: 72px 40px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 48px;

    border-radius: 40px;
    color: #fff;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    box-shadow: 0 12px 32px rgba(0,0,0,.08);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.personnel_cards_item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0,0,0,.18);
}

/* カード背景 */

.personnel_cards_item:nth-child(1) {
    background-image: url("../image/seijitsu.png");
}

.personnel_cards_item:nth-child(2) {
    background-image: url("../image/seityou.png");
}

.personnel_cards_item:nth-child(3) {
    background-image: url("../image/sekinin.png");
}

.personnel_title {
    font-size: 30px;
    text-align: center;
    font-weight: 700;
}

.personnel_cards_item p {
    font-size: 18px;
    line-height: 1.9;
}

.under_text {
    margin-top: 80px;

    text-align: center;
    font-size: 23px;
    font-weight: 700;
}


/* ===============================
   働き方
   PC
=============================== */

#workstyle {
    position: relative;
    padding: 100px 0 120px;

    background:
        url("../image/workstyle-bg.jpg")
        center center / cover no-repeat fixed;
}

.workstyle_inner {
    position: relative;
    z-index: 1;
}


/* ===============================
   カード一覧
=============================== */

#workstyle .workstyle_cards {
    max-width: 1200px;

    margin: 72px auto 0;
    padding: 0 40px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 80px 48px;
}


/* ===============================
   カード本体
=============================== */

#workstyle .workstyle_cards_item {
    box-sizing: border-box;

    min-height: 340px;
    padding: 48px 34px;

    background: rgba(255, 255, 255, .92);
    border-radius: 28px;

    text-align: center;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, .14);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 18px;

    overflow: hidden;

    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1),
        box-shadow .45s ease;
}

#workstyle .workstyle_cards_item:hover {
    transform: translateY(-8px);

    box-shadow:
        0 28px 60px rgba(0, 0, 0, .18);
}


/* ===============================
   PCではトリガーを通常要素として表示
=============================== */

#workstyle .card__trigger {
    appearance: none;
    -webkit-appearance: none;

    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;

    color: inherit;
    font: inherit;
    text-align: center;

    cursor: default;
    pointer-events: none;
}


/* ===============================
   アイコン・タイトル
=============================== */

#workstyle .card__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;

    gap: 18px;
}

#workstyle .card__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;
}

#workstyle .card__icon img {
    display: block;

    width: 42px;
    height: 42px;

    object-fit: contain;
}

#workstyle .card__title {
    display: block;

    width: 100%;

    margin: 0;

    font-size: 28px;
    font-weight: 700;
    line-height: 1.45;

    text-align: center;

    overflow-wrap: normal;
    word-break: keep-all;
}


/* ===============================
   スマホ用要素はPCで非表示
=============================== */

#workstyle .card__summary,
#workstyle .card__toggle {
    display: none;
}


/* ===============================
   PCでは本文を常時表示
=============================== */

#workstyle .card__panel {
    display: block;

    width: 100%;

    opacity: 1;
}

#workstyle .card__panel-inner {
    display: block;

    width: 100%;
}

#workstyle .card__text {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    overflow: visible;

    font-size: 15px;
    line-height: 1.9;

    text-align: center;
}


/* ===============================
   下部テキスト
=============================== */

#workstyle .under_text {
    margin-top: 80px;

    text-align: center;

    font-size: 23px;
    font-weight: 700;
}


/* ===============================
  福利厚生
=============================== */

#work_support {
    background: #f7f7f7;
}

.support_iiner {
    width: 100%;
}

.support_list {
    margin-top: 96px;
}

.support_item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;

    max-width: 1440px;
    margin: 0 auto;
}

.support_item:nth-child(even) .support_item__image {
    order: 2;
}

.support_item:nth-child(even) .support_item__content {
    order: 1;
}

/* 画像 */

.support_item__image {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.support_item__image img {
    width: 100%;
    height: 100%;
    min-height: 380px;

    object-fit: cover;
    display: block;

    transition: transform 1.2s cubic-bezier(.22,1,.36,1);
}

/* 初期オーバーレイ */

.support_item__image::after {
    content: "";
    position: absolute;
    inset: 0;

    background: rgba(0,0,0,.45);
    opacity: 1;

    transition: opacity 1.2s cubic-bezier(.22,1,.36,1);

    pointer-events: none;
}

/* 初回ホバー後 */

.support_item__image.played img {
    transform: scale(1.03);
}

.support_item__image.played::after {
    opacity: 0;
}

/* テキスト */

.support_item__content {
    padding: 80px 72px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background: #f7f7f7;
}

.support_item__title {
    position: relative;
    display: inline-block;

    margin-bottom: 18px;

    font-size: 32px;
    font-weight: 700;
}

.support_item__title::after {
    content: "";
    display: block;

    width: 100%;
    height: 1px;

    margin-top: 8px;

    background: #111;
}

.support_item__catch {
    margin-bottom: 32px;

    font-size: 18px;
    font-weight: 700;
}

.support_item__text {
    font-size: 15px;
    line-height: 1.9;
}


/* ===============================
  24の約束
=============================== */

#work_support_more {
    position: relative;
    overflow: hidden;

    padding: 120px 0 140px;

    background: #f7f7f7;
}

.support_more__inner {
    position: relative;
    z-index: 1;

    max-width: 1040px;
    margin: 0 auto;
    padding: 0 40px;
}


/* ===============================
   背景文字
=============================== */

.support_more_bg {
    position: absolute;
    inset: 0;

    z-index: -1;
    pointer-events: none;
}

.bg_24 {
    position: absolute;
    top: -120px;
    left: -300px;

    font-size: 700px;
    font-weight: 700;
    line-height: 1;

    color: #fff;
}

.bg_text {
    position: absolute;

    font-size: 200px;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;
    color: #fff;
}

/* 個別位置 */

.bg_promises {
    top: 990px;
    left: 50%;

    animation: bgFlowRight 42s linear infinite;
}

.bg_wellbeing {
    top: 1500px;
    left: -20%;

    animation: bgFlowLeft 48s linear infinite;
}

.bg_future {
    top: 2400px;
    left: 45%;

    animation: bgFlowRight 46s linear infinite;
}

.bg_support {
    bottom: -155px;
    left: -10%;

    animation: bgFlowLeft 52s linear infinite;
}


/* 背景文字アニメーション */

@keyframes bgFlowRight {

    from{
        transform: translateX(-20%);
    }

    to{
        transform: translateX(20%);
    }

}

@keyframes bgFlowLeft {

    from{
        transform: translateX(20%);
    }

    to{
        transform: translateX(-20%);
    }

}


/* ===============================
   リスト
=============================== */

.support_more_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 72px 64px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.support_more_item {
    text-align: center;
}

.support_more_item img {
    display: block;

    width: 180px;
    aspect-ratio:1/1;

    margin: 0 auto 22px;

    border-radius: 50%;
    object-fit: cover;

    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        box-shadow .45s ease;
}

.support_more_item:hover img {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 16px 32px rgba(0,0,0,.12);
}

.support_more_title {
    margin-bottom: 14px;

    font-size: 18px;
    font-weight: 700;
    letter-spacing: .04em;
}

.support_more_text {
    font-size: 14px;
    line-height: 1.9;
    text-align: center;
}


/* ===============================
   FAQ
=============================== */

#faq {
    background: #fff;
    padding: 160px 0;
}

.faq_inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;

    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 120px;
    align-items: start;
}

/* 左側 */

.faq_intro {
    position: sticky;
    top: 120px;

    display: flex;
    flex-direction: column;
    gap: 35px;

    padding-top: 20px;
}

.faq_intro .section-lead {
    text-align: left;
}

/* お問い合わせボタン */

.faq_btn {
    width: 360px;
    height: 58px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #111;
    background: #fff;

    color: #111;
    text-decoration: none;

    transition:
        background-color .5s cubic-bezier(.22,1,.36,1),
        color .5s cubic-bezier(.22,1,.36,1),
        transform .5s cubic-bezier(.22,1,.36,1);
}

.faq_btn:hover {
    background: #111;
    color: #fff;
    transform: translateY(-3px);
}

/* 右側リスト */

.faq_list {
    display: flex;
    flex-direction: column;
    gap: 30px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.faq_item {
    border: 1px solid #111;
    background: #fff;

    transition:
        background-color .45s cubic-bezier(.22,1,.36,1),
        transform .45s cubic-bezier(.22,1,.36,1),
        box-shadow .45s cubic-bezier(.22,1,.36,1);
}

.faq_item:hover {
    background: #f8f8f8;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,.06);
}

.faq_question {
    width: 100%;
    padding: 28px 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    background: transparent;
    border: none;

    cursor: pointer;
    font: inherit;
    text-align: left;
}

.faq_text {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
}


.faq_question,
.faq_question *,
.faq_text{
    color: #000 !important;
    -webkit-text-fill-color: #000;
}

.faq_question{
    appearance: none;
    -webkit-appearance: none;
}


/* ×アイコン */

.faq_icon {
    position: relative;
    flex-shrink: 0;

    width: 28px;
    height: 28px;

    opacity: 0;

    transition: opacity .3s ease;
}

.faq_icon::before {
    content: "×";

    position: absolute;
    inset: 0;

    font-size: 36px;
    line-height: 28px;
    text-align: center;
}

.faq_question[aria-expanded="true"] .faq_icon {
    opacity: 1;
}

/* アンサー */

.faq_answer {
    display: grid;
    grid-template-rows: 0fr;

    padding-top: 30px;

    opacity: 0;

    transition:
        grid-template-rows .6s cubic-bezier(.22,1,.36,1),
        opacity .35s ease;
}

.faq_answer.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
}

.faq_answer p {
    overflow: hidden;

    margin: 0;
    padding: 0 24px;

    font-size: 18px;
    line-height: 2;
}

.faq_answer.is-open p {
    padding-bottom: 28px;
}

/* ===============================
   CTA
=============================== */

.cta_buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;

    padding-bottom: 100px;
}

.cta_btn {
    width: 260px;
    height: 64px;

    display: flex;
    justify-content: center;
    align-items: center;

    border: 1px solid #111;

    font-size: 18px;
    font-weight: 500;
    text-decoration: none;

    transition:
        background-color .35s ease,
        color .35s ease,
        border-color .35s ease;
}

.cta_btn:first-child {
    background: #111;
    color: #fff;
}

.cta_btn:first-child:hover {
    background: #fff;
    color: #111;
}

.cta_btn:last-child {
    background: #fff;
    color: #111;
}

.cta_btn:last-child:hover {
    background: #111;
    color: #fff;
}


/* ===============================
   Carousel
=============================== */

.carousel {
    width: 100%;
    overflow: hidden;
}

.carousel_track_1,
.carousel_track_2 {
    display: flex;
    width: max-content;

    margin: 0;
    padding: 0;

    list-style: none;
}

.carousel_track_1 {
    animation: carouselRight 90s linear infinite;
}

.carousel_track_2 {
    animation: carouselLeft 90s linear infinite;
}

.carousel_slide {
    flex-shrink: 0;

    width: 320px;
    height: 220px;
}

.carousel_slide img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    display: block;
}

@keyframes carouselRight {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes carouselLeft {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}


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

footer {
    padding: 120px 40px 56px;
    background: #fff;
}

.footer_inner {
    max-width: 1200px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer_inner img {
    width: 120px;
    height: auto;

    display: block;
    margin-bottom: 72px;
}

.footer_nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 48px;

    margin: 0 0 72px;
    padding: 0;

    list-style: none;
}

.footer_nav a {
    position: relative;

    color: #000;
    text-decoration: none;

    font-size: 20px;
    font-weight: 500;
    line-height: 1;
}

.footer_nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;

    width: 0;
    height: 1px;

    background: #000;

    transform: translateX(-50%);
    transition: width .35s ease;
}

.footer_nav a:hover::after {
    width: 100%;
}

.footer_copy {
    max-width: 1200px;
    margin: 0 auto;

    padding-top: 40px;

    border-top: 1px solid #000;

    text-align: center;
    font-size: 16px;
}