body {
    font-family: 'Noto Sans JP', 'Hiragino Sans', 'Meiryo', sans-serif;
    overflow-x: hidden;
}

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

/* ---- サイドメニュー ---- */
/* サイドメニューのアニメーション */
.side-menu {
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}        
.side-menu.open {
    transform: translateX(0);
}

/* トップの 6 ボタン */
/* オーバーレイのアニメーション */
.overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.overlay.open {
    opacity: 1;
    visibility: visible;
}
#header {
    transition: transform 0.3s ease-in-out;
}

/* ================== */
/* ---- 写真めくり ---- */
/* ================== */

.carousel-container {
    perspective: 1000px;
}
.photo-card {
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-style: preserve-3d;
    cursor: pointer;
}        
.photo-card:hover {
    transform: translateY(-5px) scale(1.02);
}
.photo-card.active {
    z-index: 30;
    transform: translateX(0) scale(1);
}        
.photo-card.second {
    z-index: 20;
    transform: translateX(60px) scale(0.95);
    opacity: 0.8;
}        
.photo-card.third {
    z-index: 10;
    transform: translateX(120px) scale(0.9);
    opacity: 0.6;
}

/* hover と時間で変化 */
.image-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}        
.image-slider {
    display: flex;
    width: 200%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}        
.image-item {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}        
.image-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
}        
/* スライド状態 */
.slide-to-second {
    transform: translateX(-50%);
}        
/* ホバー時のアニメーション */
.button-container:hover .image-slider {
    transform: translateX(-50%);
}        
/* 自動切り替え時のアニメーション */
.auto-slide .image-slider {
    transform: translateX(-50%);
}


/* =============== */
/* MV ボタン スライド */
/* =============== */

.text-container {
    position: relative;
    width: 7.638vw;
    height: 7.222vw;
    border-radius: 0.83cqi;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 10;
    margin-top: 0.694cqi;
    box-shadow: 
        inset -4px 4px 6px rgba(211, 227, 247, 0.5),
        inset 4px -4px 6px rgba(211, 227, 247, 0.5),
        inset -4px -4px 6px rgba(255, 255, 255, 1),
        inset 4px 4px 6px rgba(55, 135, 193, 1);
}
@media (max-width: 768px) {
    .text-container {
        position: relative;
        width: 61px;
        height: 61px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        z-index: 10;
        margin-top: 4px;
        box-shadow: 
            inset -4px 4px 6px rgba(211, 227, 247, 0.5),
            inset 4px -4px 6px rgba(211, 227, 247, 0.5),
            inset -4px -4px 6px rgba(255, 255, 255, 1),
            inset 4px 4px 6px rgba(55, 135, 193, 1);
    }
}
.image-container {
    position: relative;
    width: 7.638vw;
    height: 7.222vw;
    border-radius: 0.83cqi;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 10;
    margin-top: 0.694cqi;
    box-shadow: 
        inset -4px 4px 6px rgba(211, 227, 247, 0.5),
        inset 4px -4px 6px rgba(211, 227, 247, 0.5),
        inset -4px -4px 6px rgba(255, 255, 255, 1),
        inset 4px 4px 6px rgba(55, 135, 193, 1);
    transition: box-shadow .3s;
}
@media (max-width: 768px) {
    .image-container {
        position: relative;
        width: 61px;
        height: 61px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        z-index: 10;
        margin-top: 4px;
        box-shadow: 
            inset -4px 4px 6px rgba(211, 227, 247, 0.5),
            inset 4px -4px 6px rgba(211, 227, 247, 0.5),
            inset -4px -4px 6px rgba(255, 255, 255, 1),
            inset 4px 4px 6px rgba(55, 135, 193, 1);
    }
}
.text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-family: 'Arial', sans-serif;
}
.image-overlay {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateX(-50%);
}
.green-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(34, 197, 94, 0.0); /* グリーンのオーバーレイ */
  transform: translateX(-100%);
  transition: transform 0.5s ease-in-out;
}
.auto-slide .green-overlay {
  transform: translateX(0%);
}
.green-overlay.hide {
  transform: translateX(100%);
  transition: transform 0.5s ease-in-out;
}

.text-base {
    color: #333333;
    z-index: 11;
}
.text-animated {
    z-index: 12;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.5s ease-in-out;
}
.button-container:hover .text-animated {
    clip-path: inset(0 0 0 0);
}
.auto-slide .text-animated {
    clip-path: inset(0 0 0 0);
}
.text-animated.hide {
    clip-path: inset(0 0 0 100%);
}
.shadow-3xl {
    box-shadow: 0 35px 60px -12px rgba(0, 0, 0, 0.25);
}

/* ================ */
/* neumorphism な shadow */
/* ================ */
.separator-shadow {
    box-shadow: 
        1px 1px 2px rgba(255, 255, 255, 0.3),
        -1px -1px 2px rgba(219, 219, 219, 0.5),
        inset -5px 5px 10px rgba(219, 219, 219, 0.2),
        inset 5px -5px 10px rgba(219, 219, 219, 0.2),
        inset -5px -5px 10px rgba(255, 255, 255, 0.9),
        inset 5px 5px 13px rgba(219, 219, 219, 0.9)
        ;
}
.header-contact-shadow {
    box-shadow: 
        4px 4px 10px rgba(219, 219, 219, 0.9),
        -4px -4px 8px rgba(255, 255, 255, 0.9),
        4px -4px 8px rgba(219, 219, 219, 0.2),
        -4px 4px 8px rgba(219, 219, 219, 0.2),
        inset -1px -1px 2px rgba(219, 219, 219, 0.5),
        inset 1px 1px 2px rgba(255, 255, 255, 0.3)
        ;
    padding: 12px 20px;
}
.hamburger-shadow {
    box-shadow: 
        4px 4px 10px rgba(219, 219, 219, 0.9),
        -4px -4px 8px rgba(255, 255, 255, 0.9),
        4px -4px 8px rgba(219, 219, 219, 0.2),
        -4px 4px 8px rgba(219, 219, 219, 0.2),
        inset -1px -1px 2px rgba(219, 219, 219, 0.5),
        inset 1px 1px 2px rgba(255, 255, 255, 0.3)
        ;
}
.member-shadow {
    box-shadow: 
        5px 5px 13px rgba(133, 133, 133, 1),
        -5px -5px 10px rgba(255, 255, 255, 1),
        5px -5px 10px rgba(133, 133, 133, 0.2),
        -5px 5px 10px #85858580,
        inset -1px -1px 2px rgba(133, 133, 133, 0.5),
        inset 1px 1px 2px rgba(255, 255, 255, 0.3)
        ;
}
.top-recruit-shadow {
    box-shadow: 
        inset 1px 1px 2px rgba(73, 178, 255, 0.3),
        inset -1px -1px 2px rgba(37, 92, 131, 0.5),
        -7px 7px 14px rgba(37, 92, 131, 0.2),
        7px -7px 14px rgba(37, 92, 131, 0.2),
        -7px -7px 14px rgba(73, 178, 255, 0.9),
        7px 7px 18px rgba(37, 92, 131, 0.9)
        ;
}
.gotop-shadow {
    box-shadow: 
        inset 1px 1px 2px rgba(255, 255, 255, 0.3),
        inset -1px -1px 2px rgba(219, 219, 219, 0.5),
        -4px 4px 8px rgba(219, 219, 219, 0.2),
        4px -4px 8px rgba(219, 219, 219, 0.2),
        -4px -4px 8px rgba(255, 255, 255, 0.9),
        4px 4px 10px rgba(219, 219, 219, 0.9)
        ;
}
.member-inner-shadow {
    box-shadow: 
        inset 5px 5px 13px rgba(55, 135, 193, 1),
        inset -5px -5px 10px rgba(255, 255, 255, 1),
        inset 5px -5px 10px rgba(211, 227, 247, 0.5),
        inset -5px 5px 10px rgba(211, 227, 247, 0.5)
        ;
}
.member-sp-inner-shadow {
    box-shadow: 
        inset -2px 2px 3px rgba(211, 227, 247, 0.5),
        inset 2px -2px 3px rgba(211, 227, 247, 0.5),
        inset -2px -2px 3px rgba(255, 255, 255, 1),
        inset 2px 2px 3px rgba(55, 135, 193, 1)
        ;
}
.top-sp-creative-inner-shadow {
    box-shadow: 
        inset -4px 4px 6px rgba(211, 227, 247, 0.5),
        inset 4px -4px 6px rgba(211, 227, 247, 0.5),
        inset -4px -4px 6px rgba(255, 255, 255, 1),
        inset 4px 4px 6px rgba(55, 135, 193, 1)
        ;
}
.top-creative-inner-shadow {
    box-shadow: 
        inset -5px 5px 10px rgba(211, 227, 247, 0.5),
        inset 5px -5px 10px rgba(211, 227, 247, 0.5),
        inset -5px -5px 10px rgba(255, 255, 255, 1),
        inset 5px 5px 13px rgba(55, 135, 193, 1)
        ;
}
.recruit-blue-shadow {
    box-shadow: 
        1px 0px 2px rgba(61, 149, 212, 0.3),
        -1px -1px 2px rgba(50, 122, 174, 0.5),
        inset -5px 5px 10px rgba(50, 122, 174, 0.2),
        inset 5px -5px 10px rgba(50, 122, 174, 0.2),
        inset -5px 0px 10px rgba(61, 149, 212, 0.3),
        inset 5px 5px 13px rgba(50, 122, 174, 0.9)
        ;
}
.recruit-separator-shadow {
    box-shadow: 
        1px 1px 2px rgba(255, 255, 255, 0.3),
        -1px 0px 2px rgba(219, 219, 219, 0.5),
        inset 5px -5px 10px rgba(219, 219, 219, 0.2),
        inset -5px -5px 10px rgba(255, 255, 255, 0.9),
        inset 5px 0px 13px rgba(219, 219, 219, 0.9)
        ;
}
.recruit-box-shadow {
    box-shadow: 
        inset 1px 1px 2px rgba(255, 255, 255, 0.3),
        inset -1px -1px 2px rgba(133, 133, 133, 0.5),
        -5px 5px 10px rgba(133, 133, 133, 0.2),
        5px -5px 10px rgba(133, 133, 133, 0.2),
        -5px -5px 10px rgba(255, 255, 255, 1),
        5px 5px 13px rgba(133, 133, 133, 1)
        ;

}
.recruit-box-inner-shadow {
    box-shadow: 
        inset -5px 5px 10px rgba(211, 227, 247, 0.5),
        inset 5px -5px 10px rgba(211, 227, 247, 0.5),
        inset -5px -5px 10px rgba(255, 255, 255, 1),
        inset 5px 5px 13px rgba(55, 135, 193, 1)
        ;
}
.badge-shadow {
    box-shadow: 
        inset 1px 1px 2px rgba(255, 255, 255, 0.3),
        inset -1px -1px 2px rgba(219, 219, 219, 0.5),
        -5px 5px 10px rgba(219, 219, 219, 0.2),
        5px -5px 10px rgba(219, 219, 219, 0.2),
        -5px -5px 10px rgba(255, 255, 255, 0.9),
        5px 5px 13px rgba(219, 219, 219, 0.9)
        ;
}
.contact-inner-shadow {
    box-shadow: 
        inset 5px 5px 13px rgba(219, 219, 219, 0.9),
        inset -5px -5px 10px rgba(255, 255, 255, 0.9)
        ;
}
.contact-outer-shadow {
    box-shadow: 
        4px 4px 10px rgba(219, 219, 219, 0.9),
        -4px -4px 8px rgba(255, 255, 255, 0.9)
        ;
}
.contact-radio-shadow {
    box-shadow:
        4px 4px 10px rgba(219, 219, 219, 0.9),
        -4px -4px 8px rgba(255, 255, 255, 0.9)
        ;
}
.contact-flow-shadow {
    box-shadow:
        5px 5px 13px rgba(219, 219, 219, 0.9),
        -5px -5px 10px rgba(255, 255, 255, 0.9)
        ;
}
.checkbox-shadow {
    box-shadow: 
        inset 5px 5px 13px rgba(219, 219, 219, 0.9),
        inset -5px -5px 10px rgba(255, 255, 255, 0.9)
        ;
}
.work-panel-shadow {
    box-shadow:
    4px 4px 10px 0 rgba(219, 219, 219, 0.9),
    -4px -4px 8px 0 rgba(255, 255, 255, 0.9),
    4px -4px 8px 0 rgba(219, 219, 219, 0.2),
    -4px 4px 8px 0 rgba(219, 219, 219, 0.2),
    -1px -1px 2px 0 rgba(219, 219, 219, 0.5),
    1px 1px 2px 0 rgba(255, 255, 255, 0.3);
}
.member-modal-close-shadow {
    box-shadow: 
        4px 4px 10px rgba(219, 219, 219, 0.9),
        -4px -4px 8px rgba(255, 255, 255, 0.9)
        ;
}
.sp-menu-shadow {
    box-shadow: 
        inset 5px 5px 13px rgba(50, 122, 174, 0.9),
        inset -5px -5px 10px rgba(61, 149, 212, 0.9)
    ;
}

/* ================ */
/* ボタンの hover イベント */
/* ================ */

.common-btn-shadow {
    box-shadow: 
        -4px 4px 8px rgba(219, 219, 219, 0.2),
        4px -4px 8px rgba(219, 219, 219, 0.2),
        -4px -4px 8px rgba(255, 255, 255, 0.9),
        4px 4px 10px rgba(219, 219, 219, 0.9),
        inset 1px 1px 2px rgba(255, 255, 255, 0.3),
        inset -1px -1px 2px rgba(219, 219, 219, 0.5);
}
.creative-btn-shadow {
    box-shadow: 
        -5px 5px 10px rgba(133, 133, 133, 0.2),
        5px -5px 10px rgba(133, 133, 133, 0.2),
        -5px -5px 10px rgba(255, 255, 255, 1),
        5px 5px 13px rgba(133, 133, 133, 1);
}
@media (max-width: 768px) {
    .creative-btn-shadow {
        box-shadow: 
            -3px -3px 5px rgba(255, 255, 255, 1),
            3px 3px 5px rgba(133, 133, 133, 1),
            inset 1px 1px 2px rgba(255, 255, 255, 0.3),
            inset -1px -1px 2px rgba(133, 133, 133, 0.5);
    }
}
.neumorphism-btn {
    background: #F3F3F3;
    width: 9.027vw;
    height: 8.611vw;
    border-radius: 16px;
    transition: all 4s ease-in-out, box-shadow 4s ease-in-out, transform 4s ease-in-out;
    box-shadow: 
        -5px 5px 10px rgba(133, 133, 133, 0.2),
        5px -5px 10px rgba(133, 133, 133, 0.2),
        -5px -5px 10px rgba(255, 255, 255, 1),
        5px 5px 13px rgba(133, 133, 133, 1),
        inset 1px 1px 2px rgba(255, 255, 255, 0.3),
        inset -1px -1px 2px rgba(133, 133, 133, 0.5);
    transition: box-shadow .2s;
}
@media (max-width: 768px) {
    .neumorphism-btn {
        background: #F3F3F3;
        width: 73px;
        height: 70px;
        border-radius: 12px;
        transition: all 0.3s ease;
        box-shadow: 
            -3px -3px 5px rgba(255, 255, 255, 1),
            3px 3px 5px rgba(133, 133, 133, 1),
            inset 1px 1px 2px rgba(255, 255, 255, 0.3),
            inset -1px -1px 2px rgba(133, 133, 133, 0.5);
    }
}
.neumorphism-btn:hover {
    box-shadow: 
        0px 0px 0px transparent,
        0px 0px 0px transparent,
        10px 10px 30px transparent,
        -10px -10px 30px transparent,
        inset 8px 8px 20px rgba(0, 0, 0, 0.15),
        inset -8px -8px 20px rgba(255, 255, 255, 0.7);
    transform: translateY(2px);
}
.neumorphism-btn:active {
    box-shadow: 
        inset 12px 12px 25px rgba(0, 0, 0, 0.2),
        inset -12px -12px 25px rgba(255, 255, 255, 0.8);
    transform: translateY(4px);
}
.icon-container {
    background: #F3F3F3;
    border-radius: 12px;
    transition: all 0.5s ease;
}

.btn-transition {
    transition: all .5s;
}

/* ================ */
/* == フェードイン == */
/* ================ */

.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}        
.fade-in-up.show {
    opacity: 1;
    transform: translateY(0);
}
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }
.delay-600 { transition-delay: 0.6s; }

/* ================ */
/* == タブ切り替え == */
/* ================ */
.recruit-tab-container .tab-list {
    display: flex;
    justify-content: center;
    margin-top: 23px;
    padding-bottom: 23px;

    @media screen and (max-width: 768px) {
        flex-direction: column;
        text-align: center;
        width: fit-content;
        margin: 23px auto 0;
        padding-bottom: 0;
    }
}
.recruit-tab-container .tab-item {
    padding: 5px 20px;
    font-size: 16px;
    line-height: 25px;
    color: #858585;
    cursor: pointer;

    @media screen and (max-width: 768px) {
        padding: 7.5px 10px;
        font-size: 15px;
    }
}
.recruit-tab-container .tab-item:not(:first-of-type) {
    border-left: 1px solid #333;

    @media screen and (max-width: 768px) {
        border-left: none;
        border-top: 1px solid #858585;
    }
}
@media screen and (max-width: 768px) {
    .recruit-tab-container .tab-item:first-of-type {
        border-top: 1px solid #858585;
    }
}
.recruit-tab-container, .tab-item.active {
    color: #333;
    cursor: default;
}

.recruit-tab-container .tab-content {
    padding-top: 30px;
    border-top: 1px solid #333;
    text-align: center;
}
.recruit-tab-container .tab-panel {
    display: none;
}
.recruit-tab-container .tab-panel.active {
    display: block;
}

.creative-tab-container .tab-panel {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.creative-tab-container .tab-panel.active {
    position: relative;
    opacity: 1;
    visibility: visible;
}

/* ================ */
/* == アコーディオン == */
/* ================ */
.is-opened .js-summary span {
    background: url('/images/recruit/icon-close.svg')no-repeat center;
}

/* ================ */
/* == レスポンシブ 共通 == */
/* ================ */

main, .container-inline {
    container-type: inline-size;
}

@media screen and (max-width: 1440px) {
    main .text-128 {
        font-size: 8.888cqi;
    }
    main .text-96 {
        font-size: 6.66cqi;
    }
    main .text-60 {
        font-size: 4.166cqi;
    }
    main .text-52 {
        font-size: 3.645cqi;
    }
    main .text-36 {
        font-size: 2.5cqi;
    }
    main .text-30 {
        font-size: 2.083cqi;
    }
    main .text-24 {
        font-size: 1.666cqi;
    }
    main .text-22 {
        font-size: 1.527cqi;
    }
    main .text-16 {
        font-size: 1.111cqi;
    }
    main .text-14 {
        font-size: 0.972cqi;
    }
    main .cqi-mt-72 {
        margin-top: 5cqi;
    }
}

@media screen and (max-width: 768px) {
    main .text-128 {
        font-size: 20.512cqi;
        line-height: 100%;
    }
    main .text-64 {
        font-size: 16.41cqi;
        line-height: 130%;
    }
    main .text-60 {
        font-size: 7.179cqi;
    }
    main .text-52 {
        font-size: 6.41cqi;
    }
    main .text-43 {
        font-size: 11.025cqi;
        line-height: 130%;
    }
    main .text-36 {
        font-size: 5.64cqi;
    }
    main .text-24 {
        font-size: 6.153cqi;
    }
    main .text-22-sp {
        font-size: 5.641cqi;
    }
    main .text-20 {
        font-size: 5.128cqi;
    }
    main .text-16 {
        font-size: 4.1cqi;
        line-height: 156%;
    }

    main .text-60-sp {
        font-size: 15.384cqi;
        line-height: 80%;
    }

    .recruitItem.main {
        width: 100%;
    }
    .recruitItem.sub {
        width: calc(50% - 15px);

        .title {
            font-size: 15px;
        }

        .summary {
            display: none;
        }
    }

    .tab-panel {
        scroll-margin-top: 110px; /* 固定ヘッダーの高さに合わせる */
    }

    .animate-kv {
        .animate-kv-ttl {
            opacity: 0;
            transform: translateY(35.89cqi);
            transition: all 1.5s;
        }

        .animate-kv-icon {
            opacity: 0;
            transition: opacity 1s;
        }
    }
}