.fv { height: calc(100vh - 120px); overflow: hidden; position: relative; z-index: 1; }
.fv::before { background: #000; opacity: 0.2; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.fv .fv_text { top: 0; left: 0; width: 100%; height: 100%; color: #fff; z-index: 2; }
.fv .fv_text h2 { width: 100%; font-size: 3.725rem; padding-bottom: 3rem; letter-spacing: 5px; }


.fv_text p { width: 100%; letter-spacing: 8px; mix-blend-mode: multiply; font-size: 4rem;
    text-shadow: 0 0 5px #000, 0 0 10px #000000d1, 0 0 15px #000000ab; 
}
.fv_text p.bigger { font-size: 4.375rem; }
.fv_text1 { padding: 0 1rem; line-height: 130%; }
.fv_text .fv_text3 { font-size: 2rem; margin-top: 1rem; letter-spacing: 2px; }

.fv_text .fv_txt_logo { pointer-events: none; width: 100%; height: 100%; text-align: center; margin: auto; padding-bottom: 2rem; box-sizing: border-box; }
.fv_text .fv_txt_logo img { width: auto; height: 100%; }

.fv_text .btn_wrap { padding-top: 1rem; }
.fv_text .btn_wrap .btn { font-size: 18px; margin: 0 1rem; letter-spacing: 1px; text-shadow: none; box-shadow: 1px 1px 5px 0px #00000063; z-index: 0; }

.fv_wrap { max-width: 1300px; margin: auto; width: 94%; }
.fv_txt_slider { width: 100%; padding-top: 28%; position: relative;}
.fv_txt_slide { opacity: 0; transition: 1.8s ease; position: absolute; top: 0; bottom: 0; margin: auto; width: 100%; height: 100%; filter: blur(20px); }
.fv_txt_slide.active { opacity: 1; filter: blur(0px); }

.fv_overlay { mix-blend-mode:multiply; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; background: #0000003e url(../img/top/fv_overlay.png) no-repeat center center; background-size: cover; }
.fv_slider { left: 0; top: 0; width: 100%; height: 100%; z-index: 1; }
.fv_slider .slide { opacity: 0; transition: 2s linear; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.fv_slider .slide.active { opacity: 1; }
.fv_slider .slide .img { left: 0; top: 0; bottom: 0; position: relative; width: 105%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; }
.fv_slider .slide.show .img { left: -5%; transition: 10s linear; }

.company_message { padding: 14rem 0 30rem; background-image: url(../img/top/bg1.jpg); font-family: "Shippori Mincho", sans-serif; font-weight: 400; font-style: normal; }
.company_message h2 { font-size: 2.375rem; line-height: 180%; letter-spacing: 5px; }
.company_message h2 span { display: block; }
.company_message .row { padding: 5.5rem 0 0; position: relative; z-index: 2; }
.company_message .row span { display: block; }
.company_message .row h3 { font-size: 1.75rem; padding-bottom: 1rem; line-height: 180%; }
.company_message .row p.txt { font-size: 18px; line-height: 220%; }
.company_message::before,
.company_message::after { width: 100%; height: 200px; background: linear-gradient(to bottom, white 0%, transparent 100%); left: 0; top: 0; z-index: 0; }
.company_message::after { background: linear-gradient(to top, white 0%, transparent 100%); bottom: 0; top: auto; }

.blur_show { position: relative; transform: translate(-20px, -30px); opacity: 1; transition: 0.5s linear; 
	filter: blur(20px);
	-webkit-filter:  blur(20px);
	will-change: filter; /* safari fix */
}

.top_gallery { padding: 5px 5px 2rem; overflow: hidden; }
.top_gallery .col { width: 500px; margin: 5px; }
.top_gallery .col img { margin-top: 10px; }
.top_gallery .col img:first-child { margin: 0; }
.top_gallery .col.small { width: 350px; }
.top_gallery .track { width: 3490px; display:inline-flex; animation: scroll 64s linear infinite; }

@keyframes scroll { from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.company { overflow: hidden; padding: 4rem 0 6rem; background-image: url(../img/top/bg2.jpg); }
.company .head_style1 { margin-left: -15px; }
.company_info { padding: 2rem 0 4rem; }

.company_info .slider { padding-bottom: 2rem; }
.company_info .slider .slide {  width: 228px; background-color: #fff; box-sizing: border-box; 
    padding: 2rem 1rem 1rem;
    border-radius: 0.5rem;
    box-shadow: 2px 2px 8px 0px #535353; 
}
.company_info .slider .slick-slide { margin-left: 15px; }
.company_info .slider .slide img { width: 4rem; }
.company_info .slider .slide .ttl { font-size: 1.25rem; padding: 1.25rem 0 1rem; line-height: 150%; }
.company_info .slider .slide .btn_wrap a { font-size: 14px; }
.company_info .swiper-scrollbar {  position: relative; top: 0; z-index: 0; }

.services { padding: 4rem 0; background-image: url(../img/top/bg3.jpg); }
.services h3 { font-size: 3.125rem; padding: 1rem 0 2rem; }
.services h3 .icon { width: 3.75rem; margin-right: 0.5rem; }
.services .slider { padding-top: 2rem; overflow: visible; }
.services .slider_nav { display: none; }
.services .slider .swiper-wrapper { flex-wrap: wrap; justify-content: space-between; }
.services .slider .slide { width: 49%; height: auto; position: relative; padding-bottom: 2rem; margin-top: 2%; overflow: hidden; box-sizing: border-box; box-shadow: 2px 2px 6px 2px #dbdbdb; }
.services .slider .slide .wrap { padding: 2rem 6%; flex-direction: row-reverse; }
.services .slider .slide h4 { padding-bottom: 1rem; font-weight: 600; }
.services .slider .slide h4 small { display: block; font-size: 1rem; }
.services .slider .slide h4 span { display: block; font-size: 2rem; font-weight: 100; padding-top: 0.5rem; }
.services .slider .slide h4 .romaji { font-size: 2.2rem; }
.services .slider .slide .left { width: 71%; }
.services .slider .slide img { max-width: 140px; width: 27%; }
.services .btn_wrap { position: absolute; width: 100%; bottom: 0; left: 0; }
.services .btn_wrap .btn.style3 { justify-content: flex-end; }

.news { padding: 7.25rem 0 7.5rem; }
.news h3 { font-size: 2.5rem; justify-content: center; }
.news h3 .icon { width: 42px; }
.news ul { padding: 4rem 0 0; }
.news ul li a { padding: 3rem 0; border-bottom: 1px solid #999999;
    background-image: url(../img/common/icn-arw2.png);
    background-position: right center;
    background-size: 30px auto;
    background-repeat: no-repeat;
}
.news ul li:first-child a { border-top: 1px solid #999999; }
.news ul li a .date span { font-size: 13px; height: 25px; line-height: 25px; padding: 0 1rem; display: block; letter-spacing: 1px; border-radius: 5px; }
.news ul li a .ttl { margin-left: 2rem; }
.news .btn_wrap { padding-top: 4rem; }
.news .btn_wrap .btn { height: 70px; font-size: 18px; border: 1px solid #EDEBE2; }

/* -------------------------------------------- recruit */

.recruit { position: relative; }
.recruit .view { opacity: 1; padding-top: 45%; width: 100%; position: sticky; top: 122px; left: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.recruit .view img { position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.recruit_wrap { padding-top: 15%; position: relative; z-index: 2; }
.recruit_wrap .recruit_main { padding: 8vw 0; background-image: url(../img/top/bg4.jpg); }
.recruit_wrap .box { width: 480px; box-sizing: border-box; margin: auto; }
.recruit_wrap .img_wrap { width: 94%; pointer-events: none; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 1600px; }
.recruit_wrap h3 { font-size: 1.875rem; padding-bottom: 1rem; }
.recruit_wrap .ttl { padding: 2rem 0; }
.recruit_wrap .ttl::after { width: 66px; height: 2px; background-color: #555555; left: 0; right: 0; margin: auto; bottom: 0; }
.recruit_wrap h4 { font-size: 3.125rem; }
.recruit_wrap h4 { justify-content: center; }
.recruit_wrap h4 .icon { width: 44px; }
.recruit_wrap img { max-width: 450px; width: calc(50% - 260px); }
.recruit_wrap .txt { padding-top: 2rem; }
.recruit_wrap .btn_wrap { padding-top: 2rem; }

/* -------------------------------------------- tablet */

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

    .fv { height: calc(100vh - 60px); }

    .fv_text .btn_wrap .btn { height: 60px; line-height: 60px; font-size: 1rem; min-width: 250px; margin: 0 0.5rem; }

    .fv_text p { font-size: 3rem; }
    .fv_text p.bigger { font-size: 3.5rem; }

    .company_message { padding: 8rem 0 16rem; }
    .company_message h2 { letter-spacing: 2px; font-size: 2rem; line-height: 160%; }
    .company_message .row { padding: 4rem 0 0; }
    .company_message .row h3 { font-size: 1.5rem; }
    .company_message .row p.txt { font-size: 1rem; }

    .recruit_wrap .recruit_main { padding: 4rem 0; }
    .recruit_wrap .img_wrap { width: 100%; margin: auto; max-width: 640px; padding-top: 3rem; position: static; transform: unset; }
    .recruit_wrap img { width: 49%; }

    .services .slider { padding-bottom: 2rem; }
    .services .slider .swiper-wrapper { flex-wrap: nowrap; }
    .services .slider .slide { width: 520px; animation: unset !important; box-shadow: 2px 2px 12px -4px #3c3c3c; border-radius: 0.75rem; }
    .services .slider_nav  { display: flex; }
}

/* -------------------------------------------- sp */

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

    .fv { height: calc(100vh - 200px); min-height: 60vw; }
    
    .fv_style1 { padding-top: 0; height: calc(100vh - 69px); min-height: 60vw; }
    .fv_style2 { padding-top: 120%; }
    .fv_text .fv_text1 { font-size: 1.75rem; font-size: clamp(1.75rem, 8.25vw, 3rem); letter-spacing: 0px; }
    .fv_text .fv_text1.bigger { font-size: clamp(1.75rem, 9.25vw, 4rem);  }
    .fv_txt_slider { padding-top: 48%; }
    .fv_text .fv_txt_logo { padding: 0; }
    .fv_text .btn_wrap { padding-top: 1rem; }
    .fv_text .btn_wrap .btn { padding-right: 3rem; width: 230px; min-width: 0; height: 55px; line-height: 55px; display: block; margin: 1rem auto; }

    .fv_slider .slide .img { width: 110%; }
    .fv_slider .slide.show .img { left: -10%; transition: 8s linear; }

    .company_message { padding: 5rem 0; background-image: url(../img/top/bg1-sp.jpg); }
    .company_message .row { padding-top: 4rem; }
    .company_message .row h3 { font-size: 1.5rem; }
    .company_message .row p.txt { line-height: 200%; }

    .company_message::before,
    .company_message::after { height: 300px; }
    

    .top_gallery { padding-bottom: 1rem; }
    .top_gallery .col { width: 250px; }
    .top_gallery .col.small { width: 171px; }
    .top_gallery .track { width: 1764px; }

    .company { padding-top: 4rem; }
    .company .head_style1 { margin: 0; }
    .company .head_style1 .ttl { display: block; }
    .company .head_style1 .ttl span { width: 100%; display: block; padding-top: 0.5rem; }
    .company_info { padding: 1rem 0 2rem; }
    .company_info .slider { overflow: visible; padding-bottom: 1rem; }
    .company_info .slider .slide { width: 165px; }
    .company_info .slider .slide .ttl { font-size: 16px; padding: 1rem 0 0.5rem; }
    .company_info .slider .slide .btn_wrap a { font-size: 12px; padding: 0.5rem; }
    .company_info .slider .slide img { width: 2.5rem; }

    
    .services h3 { padding-top: 0; }
    .services h3 .icon { width: 3rem; }
    .services h3 span { display: block; width: 100%; font-size: 2.25rem; padding-top: 0.5rem; }
    .services .txt { text-align: left; }

    .services .slider .slide { width: 260px; }
    .services .slider .slide .wrap { text-align: center; }
    .services .slider .slide img { width: 100px; }
    .services .slider .slide .left { width: 100%; }
    .services .slider .slide h4 { font-size: 11px; }
    .services .slider .slide h4 small { font-size: 11px; height: 17px; }
    .services .slider .slide h4 span { font-size: 1.375rem; }
    .services .slider .slide h4 .romaji { font-size: 1.5rem; }
    .services .slider .slide .txt { font-size: 12px; }
    .services .slider .slide .txt span { display: inline; }
    .services .btn_wrap .btn.style3 { justify-content: center; }

    .news { padding: 5rem 0; }
    .news h3 { font-size: 2rem; }
    .news h3 .icon { width: 32px; }
    .news ul { padding-top: 2rem; }
    .news ul li a { padding: 1.25rem 0; background-size: 25px auto; background-image: url(../img/common/icn-arw2-sp.png); }
    .news ul li a .date span { padding: 0 0.75rem; font-size: 12px; }
    .news ul li a .ttl { margin: 0; padding-top: 0.5rem; padding-right: 40px; word-break: break-all; }

    .news .btn_wrap .btn { height: 60px; line-height: 60px; font-size: 1rem; }

    .recruit .view { padding-top: 87%; }
    .recruit_wrap .box { width: 100%; }
    .recruit_wrap h3 { font-size: 1.75rem; }
    .recruit_wrap h4 span { width: 100%; display: block; padding-top: 0.5rem; font-size: 2.125rem; }
    .recruit_wrap h4 .icon { width: 32px; }
    .recruit_wrap .ttl { padding: 0 0 1rem; }
    .recruit_wrap .ttl::after { width: 32px; }
    .recruit_wrap .txt { font-size: 13px; }
    .recruit_wrap .img_wrap { max-width: 420px; }
    
}