@charset "UTF-8";
@media (min-width:810px){
    .btn-contact::after{
        content:"";
        position:absolute;
        top:-50%;
        left:-180%;
        width:80px;
        height:200%;
        background:linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.45),
            rgba(255,245,210,.7),
            rgba(255,255,255,.45),
            transparent
        );
    
        transform:rotate(25deg);
    
        transition:1s;
    }
    
    .btn-contact:hover::after{
        left:180%;
    }
    .btn-contact::after{
        animation:goldShine 4s linear infinite;
    }
    
    @keyframes goldShine{
        0%{
            left:-180%;
        }
    
        70%{
            left:180%;
        }
    
        100%{
            left:180%;
        }
    }

    .btn-recruit::after{
        content:"";
    
        position:absolute;
        top:-50%;
        left:-180%;
    
        width:70px;
        height:200%;
    
        background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.25),
            rgba(150,210,255,.45),
            rgba(255,255,255,.25),
            transparent
        );
    
        transform:rotate(25deg);
    }
    
    .btn-recruit:hover::after{
        animation:blueShine 1s ease forwards;
    }
    
    @keyframes blueShine{
        to{
            left:180%;
        }
    }
    
    .faq-question:hover::after{width: 100%;}
    .faq-question:hover .faq-q p{ color: #d7bc75;}
    .faq-question:hover .faq-q::after{top: 70%;}
    #news ul li:hover::after{width: 100%;}
    #news ul li:hover .day{color: #d7bc75;}
    #news ul li:hover p{color: #d7bc75;}
    #case_studies .flex li a:hover .thum::after{background: rgba(0, 0, 0, 0);}
    #case_studies .flex li a:hover .thum img{transform: scale(1.05);}


    .btn a:hover{color: #fff;}
    .btn a:hover::before{opacity: 1;}
    .btn a:hover::after{left: 150%;}
    .low-page #business .link-btn li a:hover::before{opacity: 1;}
    .low-page #business .link-btn li a:hover::after{left: 150%;}
    #cta .card:hover .btn p::before{opacity: 1;}
    #cta .card:hover .btn p::after{left: 150%;}
    #cta .card:hover .btn p{color: #fff;}

    #inquiry .btn:hover span{color: #fff;}
    #inquiry .btn button:hover::before{opacity: 1;}
    #inquiry .btn button:hover::after{left: 150%;}
    .pc-nav ul li a:hover{color: #d7bc75;}
    .footer-links li a:hover{color: #d7bc75;}
    .footer-links li:hover::after{background-image: url(../images/arrow-gold.svg);}
    .page-numbers li a:hover{color: #d7bc75;}
    .page-numbers li a.next:hover::after{background-image: url(../images/arrow-gold.svg);}
    .page-numbers li a.prev:hover::after{background-image: url(../images/arrow-gold.svg);}
}

@media (max-width:1200px){
    .hamburger{ display:block; z-index:1001;}
    .pc-nav{
        flex-direction: column;
        align-items: normal;
    }
    .pc-nav .logo{display: block;}
    .pc-nav {
        position: fixed;
        padding: 50px 50px 50px 50px;
        top: 0;
        right: 0;
        width: 50%;
        height: 100vh;
        background: rgba(0, 0, 0, .95);
        z-index: 1000;
      
        display: flex;
        flex-direction: column;
      
        transform: translateY(100%);
        transition: transform .3s ease;
        will-change: transform;
        border-left: solid 1px #d7bc75;
      }
      
      .pc-nav.active {
        transform: translateY(0);
      }
    .pc-nav ul{ flex-direction:column; gap:30px; margin:0; margin-bottom: 30px;}
    .pc-nav ul li a{display: block; font-size:1.4rem; width: 100%; padding-bottom: 10px; border-bottom: solid 1px #898989; position: relative;}
    .pc-nav ul li a::after{content: "";
        width: 10px;
        height: 10px;
        background-image: url(../images/arrow-white.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        top: 45%;
        right: 0px;
        transform: translateY(-50%);}
    .pc-nav .logo{width: 120px!important; position: relative; left: 50%; transform: translateX(-50%); margin-bottom: 60px;}
    .pc-nav .logo a{border: none;}
    .pc-nav .header-btns{flex-direction: column;}

    .hamburger{display:block;}

    .logo{ width:180px;}

    .site-header.scrolled .logo{width:140px;}
    .hamburger { width: 30px; height: 22px;}
    .hamburger span:nth-child(2){top: 10px;}

    #our_strengths .os-swiper{width: 50%;}
    #our_strengths .ttl-area .sp-block{display: block;}
}


@media (max-width: 1100px) {
    .footer-middle .right .contact-col{width: 47%;}
    .footer-middle .right .recruit-col{width: 47%;}
    .footer-middle .right .btn {width: 100%;}
}
@media (max-width: 768px) {
    section{overflow: hidden;}
    .loader-logo img{width: 200px;}
    p{font-size: 1.4rem;}
    header{padding: 12px 20px;}
    .home p{font-size: 1.4rem;}
    .section-pd-top{padding-top: 50px;}
    .section-pd-bottom{padding-bottom: 50px;}
    .breadcrumb{padding-bottom: 60px;}
    .l-header-logo{right: -40%;}

    .fv{height: 90svh;}
    
    .fv-txt h1.gold{font-size: 10vw;}
    .fv-txt:first-of-type h1{font-size: 8.5vw;}

    .ttl{margin-bottom: 25px;}
    .ttl h2{font-size: 4.5rem;}

    #about .flex .img{width: 100%; margin-bottom: 50px;}
    #about .flex .img img{width: 60%;}
    #about .flex .txt{width: 100%;}
    #about .logo-bg{width: 500px; top: inherit; transform: translateY(0); bottom: 0;}

    #business .card-container .item{margin-bottom: 20px;}
    #business .card-container .item:last-of-type{margin-bottom: 0px;}
    #business .card{height: 220px;}
    #business .card__text{font-size: 1.2rem;}

    #our_strengths{padding-left: 20px; padding-right: 20px;}
    #our_strengths .ttl-area{position: relative;}
    #our_strengths .os-swiper {width: 100%; margin-left: inherit; margin-right: inherit;}
    #our_strengths .swiper{width: auto; margin-bottom: 30px;}
    #our_strengths .o_s_btn{position: relative; bottom: inherit; left: inherit;}
    .slide__content {padding: 10px 10px 20px 10px;}
    #our_strengths .swiper-button-next{ width: 30px; height: 30px; right: -10px;}
    #our_strengths .swiper-button-prev {width: 30px; height: 30px; left: -10px;}
    #our_strengths .card__title{font-size: 2rem;}
    #our_strengths .card__text{font-size: 1.2rem;}

    #cta {padding-left:20px; padding-right: 20px; padding-bottom: 50px;}
    #cta .card-container .item{width: 100%;}
    #cta .card-container .card{height: 320px;}
    #cta .card-container .item{margin-bottom: 20px;}
    #cta .card-container .item:last-of-type{margin-bottom: 0px;}
    #cta .btn{left: 50%; transform: translateX(-50%); width: 100%;}
    #our_strengths .num{font-size: 5rem;}
    #our_strengths .swiper-slide:nth-of-type(3) .num{top: -7%;}
    #our_strengths .swiper-slide:nth-of-type(4) .num{top: -7%;}

    #case_studies .flex li{width: 100%;}
    #case_studies .flex li:first-of-type{margin-bottom: 20px;}
    #case_studies .flex li a .thum::after{content: none;}
    #case_studies h3{font-size: 1.8rem;}

    .faq-q::before{width: 18px; height: 18px; top:2px;}
    .faq-a::before{width: 18px; height: 18px; top:2px;}
    .faq-q, .faq-a{padding-left: 25px; padding-right: 20px;}
    .faq-q::after{width: 12px; height: 12px;}

    #news ul li a::after {width: 12px; height: 12px;}
    #news .day-area{margin-bottom: 5px;}
    #news .list ul li a p{width: 100%;}
    #news .list ul li a::after{width: 10px; height: 10px;}

    .site-footer{padding: 80px 0px 60px;}
    .footer-logo{width: 85%;}
    .footer-logo img{width: 100%;}
    .footer-address-area{padding-right: 0;}

    .section-pd-top{padding-top: 15%;}

    .card__content{padding: 15px 24px 10px 10px;;}
    .card-container .item{width: 100%;}

    .home .right-btn{position: relative; right: inherit; top: inherit; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; margin-top: 50px;}
    #our_strengths .o_s_btn{position: relative; right: inherit; top: inherit; left: 50%; transform: translateX(-50%); display: flex; justify-content: center;}

    .footer-middle .left{width: 100%;}
    .footer-middle .right{width: 100%; justify-content: center; display: block;}
    .footer-middle .right .contact-col:first-of-type{margin-right: 0; margin-bottom: 20px;}
    .footer-top {flex-direction: column; align-items: center; gap: 40px; margin-bottom: 50px;}
    .footer-logo-placeholder {width: 100%; max-width: 360px;}
    .footer-address-area {align-items: center; text-align: center; width: 100%;}
    .footer-address-area .btn-outline-gold {width: 100%; min-width: 280px;}
    .footer-middle {flex-direction: column; gap: 50px;}
    .footer-col.contents-col {padding-right: 0;}
    .btn-outline-gold {width: 100%; max-width: 320px; margin: 0 auto;}
    .footer-bottom {flex-direction: column; gap: 15px; text-align: center;}
    .footer-middle .right .contact-col{width: auto;}
    .footer-middle .right .recruit-col{width: auto;}
    .footer-middle .right .btn{width: 300px;}

    /* 下層 */
    .l-header-logo{width: 450px;}
    body.recruit .logo{width: 200px;}
    .low-header{height: 220px;}
    .low-header .low-header-ttl h1{font-size: 4rem;}
    .low-page .flex.flex-reverse{flex-direction: column-reverse;}
    .low-page .flex .txt{width: 100%;}
    .low-page .flex .img{width: 100%;}

    .low-page #our_strengths .flex h3{font-size: 2rem;}
    .low-page #company .flex .txt{ margin-bottom: 10px;}

    .company-profile .flex:last-of-type dd{padding-left: 14px; text-indent: -14px;}
    .company-profile dt{width: 100%; border: none; padding-bottom: 0;}
    .company-profile dd{font-size: 1.4rem; padding-left: 0;}

    .low-page #business .link-btn li{width: 49.5%; margin-bottom: 5px;}
    .low-page #business .link-btn li::after{right: 5px; width: 12px; height: 12px;}
    .low-page #business .link-btn li a{font-size: 1.1rem;}
    .low-page #business .flex .img{margin-bottom: 10px;}
    .low-page #business .business-item h3{font-size: 2rem;}

    .low-page #our_business .intro .txt{ margin-bottom: 20px;}
    .low-page #our_business .intro h3{font-size: 2.5rem!important;}

    body.recruit #greeting .flex .img{width: 100%; margin-bottom: 20px;}
    body.recruit #greeting .flex .txt{width: 100%;}
    .low-page #greeting .flex .txt p:last-of-type{margin-bottom: 10px;}

    body.recruit #job .flex .item{width: 100%;}

    body.recruit #message h3{width: 100%; margin-bottom: 30px;}
    body.recruit #message .txt-area{width: 100%;}

    body.recruit .recruitment-profile .flex:last-of-type dd{padding-left: 14px; text-indent: -14px;}
    body.recruit .recruitment-profile dt{width: 100%; border: none; padding-bottom: 0; font-size: 1.4rem; color: #d7bc75;;}
    body.recruit .recruitment-profile dd{font-size: 1.4rem; padding-left: 0; flex: 1;}
    body.recruit .btn-area .btn{margin-bottom: 20px;}
    body.recruit .recuruit-item h3{font-size: 2rem;}
    body.recruit .recruitment-profile .flex{margin-bottom: 10px; flex-direction: column;}
    body.recruit .recruitment-profile dt{flex: 1;}
    
    .low-page .card{height: 45vw;}
    .low-page .card-container .item{margin-bottom: 10px;}

    .low-page #our_strengths .flex .txt{margin-bottom: 10px;}

    .low-page #case_studies h3{font-size: 1.8rem;}

    #inquiry .step-nav{width: 100%;}
    #inquiry .inquiry-form dt {font-size: 1.2rem;}
    #inquiry .inquiry-form dd{margin-bottom: 20px;}
    #inquiry .privacy-check label{font-size: 1.1rem;}
    .inquiry-flex{display: flex; justify-content: center;}
    .inquiry-flex li{margin: 0 20px; padding-bottom: 0;}
    .inquiry-flex span{width: auto; margin-right: 5px;}
    .inquiry-flex li:not(:last-child)::after{left: inherit; right: -30px; width: 20px; height: 1px; top: 50%; transform: translateY(-50%) translateX(0);}

    .low-page #service_flow h3{margin-bottom: 10px; font-size: 2rem;}

    .d-news-ttl h2{font-size: 2rem;}

    .low-page #case_studies .gallery {flex-direction: column;}
    .low-page #case_studies .gallery-left { width: 100%; flex: none;}

    .low-page #case_studies .gallery-right {flex-direction: row;}

    .low-page #case_studies .gallery-right img { aspect-ratio: 3 / 2; flex: 1; min-width: 0; }

    .pc-nav{width: 100%;}

    .low-page #service_flow .btn{ left: 50%; transform: translateX(-50%);}
      
    #job .flex .item{width: 100;}
    #job .flex .item:first-of-type{margin-bottom: 50px;}

    body.recruit #job .flex .item .txt-area h3{font-size: 2rem;}

    body.recruit #our_value .txt .item h3{font-size: 2rem; padding-left: 25px;}
    body.recruit #personality .flex li{width: 49%; padding: 10px; font-size: 1.4rem; margin-bottom: 2%;}
    body.recruit #our_value .txt .item h3::after {width: 15px; height: 15px;}
    body.recruit #our_value .img {margin-bottom: 20px;}

    body.recruit .sv-text p{font-size: 4vw;}
    body.recruit .sv-text p br.sp-block{display: block;}
    body.recruit .fv-txt:first-of-type h1{font-size:7.5vw;}

    body.recruit #point .item{width: 100%; margin-bottom: 20px;}
    body.recruit #point .item:last-of-type{margin-bottom: 0px;}
    body.recruit #point .item h3{font-size: 1.8rem;}

    body.recruit #interview .flex{margin-bottom: 50px;}
    body.recruit #interview .flex .img{width: 100%; margin-bottom: 10px;}
    body.recruit #interview .flex .txt{width: 100%;}
    body.recruit #interview .flex h3{font-size: 2rem;}

    body.recruit .nunber-list li{width: 100%; margin-bottom: 10px;}
    .header-btns.sp-fixed{display: flex; position: fixed; bottom: 0; left: 0; width: 100%; gap: 0; z-index: 30;}
    .header-btns.sp-fixed a{width: 50%; min-width: inherit;}

    body.recruit .lead .sp-block{ display: block;}
    body.recruit{background-image:inherit;}

    .company-profile .tel dd a{pointer-events: all;}

    .low-page #case_studies .flex li{width: 49%;}
    .low-page #case_studies h3{font-size: 1.6rem;}
    .low-page #case_studies .flex li:nth-last-of-type(){margin-bottom: 0;}
    .low-page #case_studies .flex li:nth-of-type(5){margin-bottom: 0;}
    .low-page #case_studies.single-case h2{font-size: 2.5rem;}
    .low-page #case_studies.single-case .coment h3{font-size: 1.8rem;}
    .low-page #case_studies.single-case .coment{padding: 10px;}
    .low-page #case_studies .gallery.single .gallery-left{width: 100%;}


          body.recruit #interview .interview-item {
            margin-bottom: 20px;
        }
    
        body.recruit #interview .interview-question {
            display: block;
        }
    
        body.recruit #interview .interview-img {
            width: 100%;
        }
    
        body.recruit #interview .interview-img img {
            height: auto;
            aspect-ratio: 3 / 2;
        }
    
        body.recruit #interview .interview-heading {
            width: 100%;
            padding: 20px 55px 20px 0;
        }
    
        body.recruit #interview .interview-position {
            margin-bottom: 5px;
            font-size: 1.2rem;
        }
    
        body.recruit #interview .interview-heading h3 {
            margin-bottom: 8px;
            font-size: 2rem;
        }
    
        body.recruit #interview .interview-name {
            font-size: 1.2rem;
        }
    
        body.recruit #interview .interview-toggle {
            right: 20px;
            width: 22px;
            height: 22px;
        }
    
        body.recruit #interview .interview-toggle::before {
            width: 22px;
        }
    
        body.recruit #interview .interview-toggle::after {
            height: 22px;
        }
    
        body.recruit #interview .interview-block h4 {font-size: 1.6rem;}
    
        body.recruit #interview .interview-block p {
            font-size: 1.4rem;
            line-height: 1.9;
        }
        body.recruit #interview .interview-question {
            margin-bottom: 30px;
          }
    

          #inquiry .btn{
            flex-wrap: wrap;
            
          }
          #inquiry #wpcf7-f36-o1 .inquiry.confirm .submit-wrap{
            margin: 10px;
          }
          #office_work h3 br.sp-block{display: block;}
}


@media (max-width: 420px) {
    .btn{width: 100%;}
    .footer-middle .right .btn{width: 100%;}
    .low-page #case_studies h3{font-size: 1.2rem;}
}