:root {
    --black: #323232;
    --gray: #4B4B4B;
    --l-gray: #646464;
    --white: #F5F5F5;
    --bg-white: #FAFAFA;
  }

body{
    font-family: "Noto Sans JP", sans-serif;
    color: var(--black);
} 
img{
    width: 100%;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
.pc{
    display: block;
}
.sp{
    display: none;
}
p{
    line-height: 2;
}
.float-btn{
    position: fixed;
    bottom: 1em;
    left: 2em;
    z-index: 3;

}
.recruit-bnr{
    width: 300px;
    height: 175px;
    position: fixed;
    bottom: 90px;
    left: 2em;
    z-index: 3;
}
@media screen and (max-width:520px) {
    .recruit-bnr{
        width: 150px;
        height: 87.5px;
    }

}

.float-btn .contact-btn{
    background: rgba(255, 255, 255, 0.7);

}

.bg-gray-txt{
    color: var(--white);
    background: url(../img/txt-bg.png);
    background-size: cover;
    margin-right: 5px;
    padding: 5px;
    font-weight: 400;

}
.sec-ttl{
    margin-bottom: 3em;
}
.sec-ttl .nu{
    position: relative;
    font-weight: 500;
    padding-left: 30px;

}
.sec-ttl .nu::before{
    content: '';
    background: var(--black);
    width: 20px;
    height: 1px;
    top: 52%;
    left: 0;
    position: absolute;
}

.sec-ttl .ttl{
    font-size: 72px;
    font-weight: bold;
    margin-top: 4px;
    text-wrap: nowrap;

}
.syne{
    font-family: "syne", sans-serif;
}
.zenkaku{
    font-family: "Zen Kaku Gothic New", sans-serif;
}
.wide-wrap{
    width: 94.37%;
    margin: 0 auto;
}
.content-wrap{
    width: 80%;
    max-width: 1500px;
    margin: 0 auto;
}
.logo-area{
    transition: .3s;
}
.logo-area:hover{
    filter: opacity(40%);

}
#header{
    padding-top: 3%;
    position: fixed;
    width: 100%;
    z-index: 5;
}
#header .wide-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;


}
#header .wide-wrap .h-logo{
    width: 160px;

}
#header .wide-wrap .menu{
    display: flex;
    justify-content: space-between;
}
#header .wide-wrap .menu nav ul{
    display: flex;

}
#header .wide-wrap .menu nav ul li{
    padding-right: 42px;

}
#header .wide-wrap .menu a{
    font-weight: 500;
    color: var(--black);
    transition: .3s;

}
#header .wide-wrap .menu a:hover{
    filter: opacity(40%);

}

.menu-icon{

    cursor: pointer;
    text-align: center;
}
.menu-icon div{
    position: relative;
    width: 50px;
    height: 31px;

}
.menu-icon span{
    position: absolute;
    left: 0;
    height: 3px;
    background-color: var(--black);
    margin: auto;

}
.menu-icon span:nth-of-type(1) {
    top: 0;
    width: 50px;
}
.menu-icon span:nth-of-type(2) {
    top: 0;
    bottom: 0;
    width: 36px;
}
.menu-icon span:nth-of-type(3) {
    top: auto;
    bottom: 0;
    width: 24px;
}
.close-btn{
    cursor: pointer;
    text-align: center;
    display: inline-block;
    margin-left: auto;
    position: absolute;
    top: 44px;
    right: 21px;
}

.close-btn div{
    position: relative;
    width: 50px;
    height: 31px;

}
.close-btn span{
    position: absolute;
    left: 0;
    height: 3px;
    background-color: var(--black);
    margin: auto;

}

.close-btn span:nth-of-type(1) {
    top: 0;
    width: 50px;
    transform: rotate(-45deg);
}

.close-btn span:nth-of-type(3) {
    top: 0;
    bottom: 25px;
    width: 50px;
    transform: rotate(45deg);
}

.close-btn span:nth-of-type(2) {
    display: none;

}
.others-menu-flex a:not(.under-2){
    font-size: 12px;
}

#fv{
    width: 100%;
    height: 1000px;
    background: url(../img/fv_pc.png);
    background-size: cover;
    background-position: left;
    display: flex;
    justify-content: center;
    align-items: center;

}
#fv .chatchcopy{
    text-align: center;
    color: var(--white);
    
}
#fv .chatchcopy h1{
    font-family: "syne", sans-serif;
    font-weight: 500;
    font-size: 150px;
    line-height: 1.5;

}
#fv .chatchcopy p{
    font-size: 20px;
}
.open-menu{
    position: fixed;
    background: var(--white);
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: none;
    height: 100%;
    overflow-y: auto;
    max-height: 100vh;
    z-index: 30;
    
}
.open-menu.open{
    display: block;

}
.open-menu .con-wrap{
    margin: 2em 2em;
    padding: 3em 2em 6%;
    position: relative;

}
.open-menu .con-wrap .inner{
    width: 90%;
    margin: 0 auto;
    margin-top: 5em;

}
.open-menu .con-wrap .inner .brack-line{
    margin-top: 0;

}

.open-menu .open-contact-area{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.open-contact-area .txt-area .zenkaku {
    font-size: 14px;
    font-weight: 500;
}

.open-contact-area .txt-area .syne {
    font-size: 52px;
    font-weight: 500;
    transform: translateY(-20px);
}
.open-contact-area .contact-btn{
    justify-content: left;
}
.open-contact-area .rotate .rotate-txt{
    padding-left: 30px;

}
.float-btn .contact-btn{
    justify-content: left;
}
.float-btn .rotate .rotate-txt{
    padding-left: 30px;

}

.open-navmenu{
    margin: 4% 0 5% 0;
}
.brack-line{
    display: block;
    background: var(--black);
    height: 1px;
}
.open-navmenu .flex-con {
    display: flex;
    justify-content: space-between;
}
.open-navmenu .flex-con .logo-area{
    width: 15%;

}
.open-navmenu .flex-con .logo-area a{
    width: 80px;
    display: block;
    transition: .3s;
}

.open-navmenu .flex-con .logo-area a:hover{
    filter: opacity(40%);

}
.open-navmenu .flex-con .menu-area{
    border-top: 1px solid #646464;
    padding-top: 0.5em;
}
.open-navmenu .flex-con .menu-area .others-menu-flex{
    display: flex;
    justify-content: space-between;

}
.open-navmenu .flex-con .menu-area .others-menu-flex div:last-child{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    width: 69.21%;

}

.open-navmenu .flex-con .menu-area a{
    color: var(--black);
    display: block;
    transition: .3s;

}
.open-navmenu .flex-con .menu-area a:hover{
    filter: opacity(40%);

}
.open-navmenu .flex-con .menu-area .under-2{
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 500;
    position: relative;
    margin-bottom: 1.5em;
    padding-left: 16px;

}
.open-navmenu .flex-con .menu-area .under-2::before{
    position: absolute;
    content: '';
    background-image: url(../img/dot.svg);
    width: 10px;
    height: 10px;
    background-size: contain;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;

}

.open-navmenu .flex-con .menu-area .under-2 span{
    font-family: "Noto Sans JP", sans-serif;
    font-size: 13px;
    padding-left: 10px;

}
.open-navmenu .flex-con .menu-area .menu-ttl{
    color: var(--l-gray);
    font-size: 12px;
    margin-bottom: 1.5em;

}

.open-navmenu .flex-con .about-menu{
    width: 23.77%;

}

.open-navmenu .flex-con .others-menu{
    width: 56.48%;

}
.open-navmenu .flex-con .others-menu .services {
    margin-bottom: 3em;
}


.open-navmenu .campany-name{
    display: flex;
    align-items: center;
}

.campany-name .address-txt{
    font-size: 14px;
    color: #646464;
    margin-right: 18px;

}

.campany-name .address-txt .map_blank {
    width: 40px;
    display: inline-block;
    padding-left: 13px;
}
.campany-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

section{
    background: var(--bg-white);
}
section#introduction{
    padding: 10% 0 13%;
    position: relative;
    z-index: 2;
}
#introduction::before{
    content: '';
    background-image: url(../img/bg_lines.png);
    background-position: top center;
    background-size: cover;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    position: absolute;
    z-index: 1;

}
section#introduction .inner{
    width: 90%;
    margin: 0 auto;
    position: relative;
    z-index: 3;

}
section#introduction .inner .txt-area{
    width: 550px;
    margin: 0 auto;

}
section#introduction .inner .txt-area .detail-intro{
    margin-bottom: 9%;
}
section#introduction .inner .btn-block{
    width: 550px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;

}
.campany-name .corporate {
    font-weight: 500;
    margin-right: 2em;
    position: relative;

}

.campany-name .corporate::before{
    position: absolute;
    content: '';
    width: 1px;
    height: 25px;
    background-color: var(--black);
    top: 8px;
    right: -17px;
}

.campany-name .corporate span{
    font-size: 20px;

}

.btn-wrap{
    width: 230px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
    position: relative;

}
span.txt-j {
    display: block;
}

.rotate .rotate-txt{
    /* 3D変形させた際の、奥行きを指定 */
    perspective: 300px;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.rotate .rotate-txt span{
    /* 背面の要素（2個目のspanタグ）を非表示にする */
    backface-visibility: hidden;
    /* アニメーション効果を0.5秒間で適用 */
    transition: transform .8s;
    display: block;
    height: 20px;
}


/* ホバー前 */
.rotate .rotate-txt .txt-e {
    /* 10px下に移動し縦中央に表示する */
    transform: translateY(10px) rotateX(0deg);
}

.rotate .rotate-txt .txt-j {
    /* 90度回転させ非表示にする */
    transform: rotateX(-90deg);
}

/* ホバー時 */
.rotate:hover .rotate-txt .txt-e {
    /* X軸周りに90度回転して非表示にする */
    transform: rotateX(90deg);
}

.rotate:hover .rotate-txt .txt-j {
    /* 10px上に移動し表示する */
    transform: translateY(-10px) rotateX(0deg);
}


.btn-wrap:hover .arw img:last-of-type{
    opacity: 1;

}
.btn-wrap:hover .arw img:first-of-type{
    opacity: 0;

}

.btn-wrap span{
    color: var(--black);
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 500;

}
.btn-wrap .arw{
    width: 70px;

}
.btn-wrap .arw img{
    transition: .3s;
}
.btn-wrap .arw img:last-of-type{
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    width: 70px;
    height: 70px;

}

section#introduction .inner .txt-area .catchcopy{
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 2em;


}
section#introduction .inner .txt-area .syne{
    font-size: 48px;
    font-weight: 500;
    line-height: 1.8;

}


section#introduction .inner .txt-area p:not(.catchcopy){
    margin: 0 0 1em 0;

}
#movie .wide-wrap{
    position: relative;
    overflow: hidden;
    height: 910px;

}

video{
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    min-width: 100%;
    height: auto;
    min-height: 100%;
    transform: translate(-50%, -50%);
}

#service{
    padding: 8% 0 12% 0;
}
#service .content-wrap .content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4em;
}
#service .content-wrap .content div:first-child{
    width: 63.72%;

}
.scroll-txt{
    text-align: center;
    display: flex;
    overflow: hidden;
    background: #fafafa;
}

/* テキストアニメーション */
.t{
    display: inline-block;
    margin-right: 12px;
}
.text-in{
    margin-right: 5px;
}
.char{
    display: inline-block;
    animation: fadeIn 0.7s forwards;
    opacity: 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(1em);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.scroll-txt p{
    color: #E1E1E1;
    font-size: 130px;
    margin:0;
    display : inline-block;
    padding-left: 8rem;
    white-space : nowrap;
    line-height : 1em;
    padding-bottom: 2%;
    animation : scrollscrolltxt 40s linear infinite;
    font-weight: 300;
}

@keyframes scrollscrolltxt{
    0% { transform: translateX(0)}
    100% { transform: translateX(-100%)}
    }

#works {
    padding-top: 12%;
    padding-bottom: 6%;
    margin-top: -5%;
    background: -webkit-linear-gradient(top, #F5F5F5, #FAFAFA);
}
#works .sec-intro{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
#works .sec-intro div:last-child{
    width: 63.72%;

}
.work-content .pc{
    display: flex;
    gap: 1%;
    justify-content: space-between;
    margin: 4% 0;
}

.work-content .pc .item{
    position: relative;

}
.work-content .pc .item .digitalmedia {
    margin-top: 3%;
    position: relative;

}

.work-content .pc .item a img{
    transition: .5s;

}

.work-content .pc .item a img:last-child{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;

}
.work-content .pc .item .digitalmedia a img:last-child{
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;

}

.work-content .pc .item a:hover img:last-child{
    opacity: 1;
    
}
.work-content .pc .item a:hover img:first-child{
    opacity: 0;
    
}

.mini-btn{
    padding-right: 40px;
    position: relative;
    transition: .3s;
}
.mini-btn:hover{
    filter: opacity(40%);
}
.mini-btn span{
    font-weight: 500;
    color: var(--black);
    border-bottom: 1px solid;
    
}
.mini-btn::before{
    content: '';
    background: url(../img/mini_btn.png);
    background-size: contain;
    width: 30px;
    height: 30px;
    top: -6px;
    right: 0;
    position: absolute;
}

#works .mini-btn-wrap{
    display: flex;
    justify-content: flex-end;
}
#topics{
    padding: 6% 0 8%;
    overflow-x: hidden;
}
#topics .inner{
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 80%;
    max-width: 1500px;
    margin: 0 auto;
}
#topics .topics-ttl{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    max-width: 100%;
    width: 100%;
}
#topics .topics-ttl .sec-ttl{
    margin-bottom: 0;
}
#topics .sec-ttl .nu{
    font-size: 16px;
    line-height: 1.6;
    font-weight: 500;
    padding-left: 28px;
}
#topics .topics-categories{
    display: flex;
    align-items: center;
    gap: 64px;
    flex-wrap: wrap;
}
#topics .topics-category{
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.8;
    color: var(--black);
    position: relative;
    padding: 0;
    transition: .2s;
    background: none;
    border: 0;
    cursor: pointer;
}
#topics .topics-category:first-child{
    padding-left: 0;
}
#topics .topics-category + .topics-category::before{
    content: '';
    position: absolute;
    left: -32px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 21px;
    background: var(--black);
}
#topics .topics-category:hover{
    filter: opacity(60%);
}
#topics .inner .slick-wrap{
    width: 100%;
    align-self: flex-start;
}
.slick-block .slick-list{
    overflow: hidden;
}
#topics .slick-block .slick-track{
    display: flex;
}
#topics .slick-block .slick-slide{
    height: auto;
    display: flex;
}
#topics .slick-wrap .slick-block{
    width: calc(100% + (100vw - 100%) / 2);
}
.slick-block .slick-item{
    /* width: 300px; */
    width: 300px;
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 16px;
    position: relative;
    margin-right: 24px;
    transition: .5s;
    color: var(--black);
}
.slick-block .slick-item:hover{
    filter: opacity(40%);
}
.slick-block .slick-item::before{
    display: none;

}
.slick-block .slick-item .img-area{
    width: 100%;
    aspect-ratio: 1200 / 630;
    overflow: hidden;
}
.slick-block .slick-item .img-area img{
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.slick-item .txt-area{
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 110px;
    flex: 1;
    
}
.slick-item .txt-area .topics-title{
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}
.slick-item .txt-area .update-date{
    font-size: 14px;
    line-height: 1.4;
    font-family: "Roboto", sans-serif;
    font-weight: 400;

}
.slick-item .txt-area .blog-ttl{
    font-weight: 500;
    font-size: 16px;
    line-height: 1.6;

}
#topics .topics-meta{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    color: var(--black);
    font-size: 14px;
    line-height: 1.4;
    margin-top: auto;
    text-align: right;
}
#topics .topics-meta-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--black);
}
#topics .topics-meta-icon img{
    display: block;
    width: 100%;
    height: 100%;
}
#topics .topics-meta-icon .fa{
    font-size: 14px;
}
#topics .topics-meta-text{
    font-weight: 500;
}
.topics-footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
}
.topics-arrows{
    display: flex;
    align-items: center;
    gap: 48px;
}
.topics-arrows button{
    width: 20px;
    height: 12px;
    border: none;
    background: none;
    padding: 0;
    position: relative;
    cursor: pointer;
    transition: .2s;
}
.topics-arrows button::before{
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1.5px;
    background: var(--black);
    transform: translateY(-50%);
}
.topics-arrows button::after{
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    border-top: 1.5px solid var(--black);
    border-right: 1.5px solid var(--black);
    transform: translateY(-50%) rotate(45deg);
}
.topics-arrows .prev-arrow{
    transform: rotate(180deg);
    margin-right: 0;
}
.topics-arrows button:hover{
    filter: opacity(40%);
}
.topics-more{
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--black);
    font-size: 16px;
    line-height: 1.8;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
.topics-more-icon{
    width: 30px;
    height: 30px;
    position: relative;
    flex: 0 0 30px;
}
.topics-more-icon img{
    display: block;
    width: 100%;
    height: 100%;
}
.slick-arrow{
    background: none;
    border: 0;
    cursor: pointer;
    transition: .3s;
}
.slick-arrow::before{
    filter: opacity(40%);

}
.prev-arrow{
    margin-right: 2em;
}
#recruit{
    padding: 6% 0;
}
#recruit .wide-wrap .recruit-content{
    display: flex;
    width: 90%;
    justify-content: space-between;
    flex-wrap: wrap;
    
}
#recruit .wide-wrap .recruit-content .image-block{
    width: 41.39%;
    

}
#recruit .wide-wrap .recruit-content .txt-area{
    width: 51.45%;
    

}
#recruit .wide-wrap .btn-block{
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
    margin-top: 4rem;

}
#contact-area{
    background: var(--bg-white);
    padding-top: 6%;
}
#contact-area .content-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

#contact-area .content-wrap .txt-area .zenkaku{
    font-size: 18px;
    font-weight: 500;

}
#contact-area .content-wrap .txt-area .syne{
    font-size: 50px;
    font-weight: 500;

}
#contact-area .wide-wrap{
    display: block;
    background: var(--black);
    height: 1px;
    margin-top: 4%;

}
#contact-area .contact-btn{
    margin-bottom: 22px;

}
.contact-btn{
    display: flex;
    width: 380px;
    height: 60px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    transition: .3s;

}
.contact-sp{
    background: var(--black);
    position: relative;
}
.contact-sp span{
    color: var(--white)!important;
}

.contact-sp::before{
    content: '';
    background: url(../img/arw_small_f.svg);
    width: 11px;
    height: 7px;
    top: 28px;
    right: 20px;
    position: absolute;

}
.contact-sp-f{
    border: 2px solid var(--black);
    position: relative;
}
.contact-sp-f::before{
    content: '';
    background: url(../img/arw_small_b.svg);
    width: 11px;
    height: 7px;
    top: 28px;
    right: 20px;
    position: absolute;

}
.contact-sp-f span{
    position: relative;
}
.contact-sp-f span::before{
    content: '';
    background: url(../img/Vector.svg);
    background-size: contain;
    width: 13px;
    height: 13px;
    top: 2px;
    left: -18px;
    position: absolute;

}
.ham-btn-wrap{
    margin: 5% 0;
}
.ham-btn-wrap a{
    width: 100%;
    margin-bottom: 10px;
}

.rotate:not(.circle-icon){
    background: #ffffff;
    position: relative;

}
.rotate:not(.circle-icon):before{
    content: '';
    background: url(../img/arw_small_b.svg);
    width: 11px;
    height: 7px;
    top: 28px;
    right: 20px;
    position: absolute;
    transition: .3s;
}

.contact-btn span{
    color: var(--black);

}
.rotate:not(.circle-icon):hover{
    background: var(--black);

}
.rotate:not(.circle-icon):hover::before{
    background: url(../img/arw_small_f.svg);

}
.rotate:not(.circle-icon):hover .rotate-txt .txt-j{
    color: var(--white);

}

#footer{
    background: var(--bg-white);
    padding: 4% 0 15%;
}
#footer .content-wrap .footer-con{
    display: flex;
    justify-content: space-between;

}
#footer .content-wrap .footer-con .cam-info,.f-menu{
    width: 37.64%;

}
.footer-con .cam-info .f-logo{
    width: 200px;
    display: block;
    margin-bottom: 1.5em;


}
.footer-con .cam-info p:not(.tell-nu){
    font-size: 14px;
    color: #646464;
    
}

.cam-info .map_blank{
    width: 40px;
    display: inline-block;
    padding-left: 13px;
}
.tell-nu{
    position: relative;
    padding-left: 30px;
    margin-top: 0.5em;

}
.tell-nu::before{
    content: '';
    background: url(../img/Vector.svg);
    background-size: contain;
    width: 13px;
    height: 13px;
    top: 12px;
    left: 9px;
    position: absolute;
}
.tell-nu a{
    color: var(--black);
    font-weight: 500;
    transition: .3s;

}
.tell-nu a:hover{
    filter: opacity(40%);

}
.recruit span{
    width: 12px;
    height: 12px;
    display: inline-block;
    margin-left: 5px;
}

.f-menu{
    text-align: right;
}
.footer-con .f-menu nav{
    margin-bottom: 2em;
}

.footer-con .f-menu nav ul{
    display: flex;
    flex-wrap: wrap;
    gap: 6%;
    justify-content: flex-end;
    
}
.footer-con .f-menu nav ul li{
    margin-bottom: 2em;
}
.footer-con .f-menu nav ul li a{
    color: var(--black);
    font-weight: 500;
    transition: .3s;
}
.footer-con .f-menu nav ul li a:hover{
    filter: opacity(40%);
}

/* slider */
/* recruit */
.slick-dots {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-right: auto;
    gap: 4px;
  }

  .slick-dots li {
    margin: 0;
  }

  .slick-dots li button {
    width: 50px;
    height: 2px; /* 高さをバーの厚さに */
    background-color: #C8C8C8; /* デフォルトのバーの色 */
    border: none;
  }
  .slick-dots li button {
    font-size: 0; /* 数字を見えなくする */
  }
  .slick-dots li button::before {
    content: ""; /* デフォルトの数字を空にする */
  }

  .slick-dots li.slick-active button {
    background-color: #969696; /* アクティブなスライドの色 */
  }
  .contact-sp-only{
    display: none;
  }
  .circle-sp{
    display: none;
  }

.fade-in {
    transition: 1.0s ease-in-out;
    transform: translateY(50px);
    opacity: 0;
}

.fade-in.visible {
opacity: 1;
transform: translateY(0);
}

.timing02 {transition-delay: .2s;}
.timing04 {transition-delay: .4s;}
.timing06 {transition-delay: .6s;}
.timing08 {transition-delay: .8s;}




@media screen and (max-width:1200px) {
    #movie .wide-wrap {
        height: 648px;
    }
    #fv{
        background-position: top center;
    }

}

@media screen and (max-width:768px) {
    
    .pc{
        display: none!important;
    }
    .sp{
        display: block;
    }

    #fv {
        height: 100vh;
    }

    #header .wide-wrap .menu nav{
        display: none;
    }
    #fv .chatchcopy h1{
        
        font-size: 70px;
    
    }
    section#introduction .inner .btn-block {
        width: 100%;
    }
    section#introduction .inner .txt-area {
        width: 90%;
        margin: 0 auto;
    }
    section#introduction .inner .txt-area .catchcopy {
        font-size: 20px;
    }
    section#introduction .inner .txt-area .syne {
        font-size: 40px;
    }
    .bg-gray-txt {
        line-height: 2.5;
    }
    .float-btn{
        width: 90%;
        margin: 0 auto;
        left: 1em;
        right: 1em;
    }
    .float-btn .contact-btn {
        width: 100%;
    }
    .float-btn .contact-sp-only{
        position: relative;
        display: flex!important;
        justify-content: center;
    }
    .float-btn .contact-sp-only::before{
        content: '';
        background: url(../img/arw_small_b.svg);
        width: 11px;
        height: 7px;
        top: 28px;
        right: 20px;
        position: absolute;

    }
    #movie .wide-wrap {
        height: 800px;
    }
    .sec-ttl {
        margin-bottom: 1.5em;
    }
    .sec-ttl .nu {
        font-size: 12px;
    }
    .sec-ttl .ttl {
        font-size: 48px;
    }
    .content-wrap {
        width: 90%;
        margin: 0 auto;
    }
    #service .content-wrap .content {
        flex-direction: column;
        align-items: flex-end;
    }
    #service .content-wrap .content div:first-child {
        width: 100%;
    }
    .scroll-txt p {
        font-size: 90px;
        padding-bottom: 5%;
    }
    #works {
        margin-top: -11%;
        padding-top: 20%;
        padding-bottom: 23%;
    }
    #works .sec-intro {
        align-items: flex-start;
        flex-direction: column;
    }
    #works .sec-intro div:last-child {
        width: 100%;
        margin-bottom: 2em;
    }
    .work-content .sp{
        margin: 4% 0 10%;
    }
    .work-content .sp div{
        margin-bottom: 1em;
    }
    #recruit .wide-wrap .recruit-content{
        width: 100%;
        
    }
    #recruit .wide-wrap .recruit-content .image-block{
        width: 100%;
        
    
    }
    #recruit .wide-wrap .recruit-content .txt-area{
        width: 100%;
        margin-top: 6.5%;
        
    
    }
    #contact-area .content-wrap {
        flex-direction: column;
        align-items: center;

    }
    #contact-area .content-wrap .txt-area{
        text-align: center;

    }
    #contact-area .contact-btn {
        width: 100%;
    }
    #contact-area .content-wrap .txt-area .syne {
        font-size: 36px;
    }
    #footer {
        padding: 11% 0 32%;
    }
    .footer-con .cam-info .f-logo {
        width: 160px;
    }
    .footer-con .f-menu nav ul {
        justify-content: flex-start;
        flex-direction: column;
        margin-top: 9%;
    }
    .footer-con .f-menu nav ul li {
        margin-bottom: 2em;
        border-bottom: 1px solid #c8c8c8;
        padding-bottom: 2em;
    }
    
    .footer-con .f-menu nav ul li:last-of-type{
        border-bottom: 0;
        margin-bottom: 0;

    }
    #footer .content-wrap .footer-con {
        flex-direction: column;

    }
    #footer .content-wrap .footer-con .cam-info, .f-menu {
        width: 100%;
    }
    .f-menu {
        text-align: left;
    }
    .open-menu .open-contact-area {
        flex-direction: column;
    }
    .open-menu .open-contact-area {
        flex-direction: column;
    }
    .open-contact-area div:last-child{
        display: none;
    }
    .open-menu .con-wrap {
        margin: 2em 1em;
    }
    .open-menu .con-wrap .inner {
        margin-top: 3em;
    }
    .open-contact-area .txt-area .syne {
        font-size: 30px;
        font-weight: 500;
        transform: translateY(-4px);
    }
    .open-navmenu .flex-con {
        flex-direction: column;
        margin-top: 9%;

    }
    .open-navmenu .flex-con .menu-area .others-menu-flex {
        flex-direction: column;
    }
    .open-navmenu .flex-con .menu-area .others-menu-flex div:last-child {
        font-size: 12px;
        gap: 0;
        width: 100%;

    }
    .open-navmenu .flex-con .menu-area .others-menu-flex div:last-child a{
        width: 50%;
        margin-bottom: 1em;
    }
    .open-navmenu .flex-con .about-menu {
        width: 100%;
        margin-bottom: 1em;
    }
    .open-navmenu .flex-con .others-menu {
        width: 100%;
    }
    .open-navmenu .flex-con .menu-area .menu-ttl {
        margin-bottom: 2em;
    }
    .open-navmenu .flex-con .logo-area {
        width: 160px;
        position: absolute;
        top: 32px;
        left: 25px;
    }
    .open-navmenu .flex-con .logo-area a {
        width: 100%;
    }
    .open-menu .con-wrap .inner {
        width: 100%;
    }
    #topics {
        padding: 16% 0 9% 0;
    }
    #topics .inner {
        flex-direction: column;
        width: 90%;
        margin: 0 auto;
        gap: 24px;
    }
    #topics .sec-ttl .nu{
        font-size: 12px;
        padding-left: 22px;
    }
    #topics .sec-ttl .nu::before{
        width: 14px;
    }
    .topics-ttl{
        flex-direction: column;
        align-items: flex-start !important;
        justify-content: flex-start;
        gap: 24px;
    }
    #topics .topics-categories{
        width: 100%;
        justify-content: center;
        gap: 24px;
        flex-wrap: nowrap;
    }
    #topics .topics-category{
        font-size: 16px;
        padding: 0;
    }
    #topics .topics-category:first-child{
        padding-left: 0;
    }
    #topics .topics-category + .topics-category::before{
        left: -12px;
        height: 21px;
    }
    #topics .inner .slick-wrap {
        width: 100%;
    }
    #topics .slick-block .slick-item{
        margin-right: 16px;
    }
    .slick-item .txt-area{
        flex: auto;
    }
    .topics-footer{
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0;
    }
    .topics-arrows{
        gap: 32px;
    }
    .campany-name {
        align-items: baseline;
        flex-direction: column;
    }
    #contact-area .contact-sp-only{
        background-color: var(--black);
        display: flex!important;
        justify-content: center;
        position: relative;
    }
    #contact-area .contact-sp-only::before{
        content: '';
        background: url(../img/arw_small_f.svg);
        width: 11px;
        height: 7px;
        top: 28px;
        right: 20px;
        position: absolute;

    }
    #contact-area .contact-sp-only span{
        color: var(--white);

    }
    .circle-sp{
        display: flex;
    }

    section#introduction {
        padding: 20% 0 25%;
    
    }
    #service {
        padding: 16% 0 16% 0;
    }
    #service .content-wrap .content .txt-area{
        margin-bottom: 9%;
    }
    #recruit {
        padding: 15% 0;
    }
    #contact-area {
        padding-top: 12%;
    }
    .slick-block .slick-list {
        overflow: hidden;
    }

      .scroll-txt p{
            padding-left: 5rem;

      }

}
@media screen and (max-width:500px) {
    #fv .chatchcopy h1 {
        font-size: 50px;
    }
    #fv .chatchcopy p {
        font-size: 16px;
    }

}