@charset "UTF-8";

/*-------------------------
__#loading
-------------------------*/
#loading{background-color:var(--main-color);width:100%;height:100%;position:fixed;left:0;top:0;z-index:9999;}
#loading.is-fade{animation:fadeOut 1.2s cubic-bezier(0.25, 0, 0, 1) 0.2s forwards;}

@keyframes fadeOut {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

#loading > .loading_inner{display:flex;justify-content:center;align-items:center;width:100%;height:100%;}
#loading .loading_box{height:100%;width:100%;position:relative;}
#loading .loading_box .loading_logo{font-size:1px;line-height:0;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);}
#loading .loading_box .loading_logo img{height:auto;width:380px;opacity:0;}
#loading.is-active .loading_box .loading_logo img{animation:logoFadeIn 0.8s cubic-bezier(0.25, 0, 0, 1) 0.8s forwards;}
#loading.is-fade .loading_box .loading_logo{animation:logoFadeOut 1.2s cubic-bezier(0.25, 0, 0, 1) forwards;}

@keyframes logoFadeIn {
  0% {
    opacity: 0;
    margin-top: 40px;
  }
  100% {
    opacity: 1;
    margin-top: 0;
  }
}

@keyframes logoFadeOut {
  0% {
    opacity: 1;
    margin-top: 0;
  }
  100% {
    opacity: 0;
    margin-top: -40px;
  }
}

@media screen and (max-width: 1280px) {
  #loading .loading_box .loading_logo img{width:29.687vw;}
}

@media screen and (max-width: 767px) {
  #loading .loading_box .loading_logo img{width:170px;}
}

/*-------------------------
__#main
-------------------------*/
#main{margin:-30px 0 0;}

@media screen and (max-width: 1280px) {
  #main{margin:-2.343vw 0 0;}
}

@media screen and (max-width: 767px) {
  #main{margin:-5px 0 0;}
}

/* main_slider */
#main #main_slider{height:960px;position:relative;}
#main #main_slider #slider{height:100%;overflow:hidden;opacity:0;pointer-events:none;}
#main #main_slider #slider.slick-initialized{opacity:1;}
#main #main_slider #slider .slick-list{height:100%!important;}
#main #main_slider #slider .slick-track{height:100%;}
#main #main_slider #slider .slick-slide{height:100%;}
#main #main_slider #slider .slick-slide > div{height:100%;}
#main #main_slider #slider .slide-item{height:100%;}
#main #main_slider #slider .slide-item img{height:100%!important;max-height:initial!important;width:100%;object-fit:cover;}
#main #main_slider #slider .is-animation{animation:zoom_up 10s linear 0s normal both;}

@keyframes zoom_up {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}

#main .maincopy_box{position:absolute;top:50%;left:50%;transform:translate(-600px, -50%);z-index:5;}
#main .maincopy_box .maincopy{font-size:1px;line-height:0;text-align:left;width:584px;margin:0 auto 60px 0;}
#main .maincopy_box .maincopy img{height:auto;width:100%;}
#main .maincopy_box .lead{font-family:"Noto Serif JP", serif;font-size:24px;line-height:2.5;font-weight:500;color:#000;text-align:left;}

/* strengths */
#main #strengths{position:relative;padding:150px 0;}
#main #strengths p.en{font-size:300px;font-weight:300;color:var(--main-color);letter-spacing:0.05em;opacity:.06;position:absolute;left:0;bottom:calc(100% - 80px);transform:rotate(90deg);transform-origin:bottom left;white-space:nowrap;}
#main #strengths .strengths_ttl_box{font-family:"Noto Serif JP", serif;text-align:left;width:1200px;margin:0 auto;padding:0 0 80px;}
#main #strengths .strengths_ttl_box .ttl{font-size:36px;margin:0 0 50px;letter-spacing:.2em;color: var(--main-color);}
#main #strengths .strengths_ttl_box .txt{font-size:24px;line-height:1.8;}

#main #strengths .diagram{height:846px;width:846px;margin:0 auto;position:relative;}

#main #strengths .diagram svg{height:auto;width:100%;}
#main #strengths .diagram svg .cls-1,
#main #strengths .diagram svg .cls-2,
#main #strengths .diagram svg .cls-3,
#main #strengths .diagram svg .cls-4,
#main #strengths .diagram svg .cls-5,
#main #strengths .diagram svg .cls-6,
#main #strengths .diagram svg .cls-7,
#main #strengths .diagram svg .cls-8{isolation:isolate;}
#main #strengths .diagram svg .cls-1,
#main #strengths .diagram svg .cls-2,
#main #strengths .diagram svg .cls-3,
#main #strengths .diagram svg .cls-4,
#main #strengths .diagram svg .cls-6,
#main #strengths .diagram svg .cls-7,
#main #strengths .diagram svg .cls-8 {font-size:24px;font-variation-settings:'wght' 500;font-weight:500;}
#main #strengths .diagram svg .cls-9,
#main #strengths .diagram svg .cls-10,
#main #strengths .diagram svg .cls-11,
#main #strengths .diagram svg .cls-12,
#main #strengths .diagram svg .cls-13,
#main #strengths .diagram svg .cls-14,
#main #strengths .diagram svg .cls-15,
#main #strengths .diagram svg .cls-16,
#main #strengths .diagram svg .cls-17,
#main #strengths .diagram svg .cls-18,
#main #strengths .diagram svg .cls-19,
#main #strengths .diagram svg .cls-20,
#main #strengths .diagram svg .cls-21,
#main #strengths .diagram svg .cls-22{stroke-linejoin:round;stroke-width:9px;}
#main #strengths .diagram svg .cls-9,
#main #strengths .diagram svg .cls-10,
#main #strengths .diagram svg .cls-11,
#main #strengths .diagram svg .cls-14,
#main #strengths .diagram svg .cls-16,
#main #strengths .diagram svg .cls-19,
#main #strengths .diagram svg .cls-22{fill:none;}
#main #strengths .diagram svg .cls-9,
#main #strengths .diagram svg .cls-13{stroke:#f52b39;}
#main #strengths .diagram svg .cls-2,
#main #strengths .diagram svg .cls-13{fill:#f52b39;}
#main #strengths .diagram svg .cls-3,
#main #strengths .diagram svg .cls-20{fill:#1eb55a;}
#main #strengths .diagram svg .cls-10,
#main #strengths .diagram svg .cls-12{stroke:#363637;}
#main #strengths .diagram svg .cls-4,
#main #strengths .diagram svg .cls-15,
#main #strengths .diagram svg .cls-23{fill:#1650b3;}
#main #strengths .diagram svg .cls-11,
#main #strengths .diagram svg .cls-20{stroke:#1eb55a;}
#main #strengths .diagram svg .cls-12{fill:#363637;}
#main #strengths .diagram svg .cls-14,
#main #strengths .diagram svg .cls-17{stroke:#b11f98;}
#main #strengths .diagram svg .cls-15,
#main #strengths .diagram svg .cls-16{stroke:#1650b3;}
#main #strengths .diagram svg .cls-24{fill:#fff;}
#main #strengths .diagram svg .cls-6,
#main #strengths .diagram svg .cls-18{fill:#ecad19;}
#main #strengths .diagram svg .cls-17,
#main #strengths .diagram svg .cls-7{fill:#b11f98;}
#main #strengths .diagram svg .cls-18,
#main #strengths .diagram svg .cls-22{stroke:#ecad19;}
#main #strengths .diagram svg .cls-8,
#main #strengths .diagram svg .cls-21{fill:#1caec5;}
#main #strengths .diagram svg .cls-19,
#main #strengths .diagram svg .cls-21{stroke:#1caec5;}

#main #strengths .diagram svg .infog{opacity:0;transform:translate(0, -40px);transition:opacity .3s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
@media screen and (min-width: 768px) {
  #main #strengths .diagram svg a:hover .infog{opacity:1;transform:translate(0, 0);}
}

#main #strengths .diagram svg .bg{opacity:0;transform:scale(0.8);transform-origin:center;transition:opacity .4s cubic-bezier(0.165, 0.84, 0.44, 1), transform .4s cubic-bezier(0.165, 0.84, 0.44, 1);z-index:10;}
#main #strengths .diagram svg .manual .bg{transform-origin:669px 213px;}
#main #strengths .diagram svg .service .bg{transform-origin:446px 90px;}
#main #strengths .diagram svg .digital_printing .bg{transform-origin:396px 745px;}
#main #strengths .diagram svg .printing .bg{transform-origin:175px 617px;}
#main #strengths .diagram svg .bookbinding .bg{transform-origin:103px 403px;}
#main #strengths .diagram svg .assembly_logistics .bg{transform-origin:211px 185px;}
#main #strengths .diagram svg .creative .bg{transform-origin:638px 670px;}
#main #strengths .diagram svg .document .bg{transform-origin:739px 453px;}
@media screen and (min-width: 768px) {
  #main #strengths .diagram svg a:hover .bg{opacity:1;transform:scale(1);}
}

@media screen and (max-width: 1280px) {
  #main #main_slider{height:75vw;position:relative;}
  #main .maincopy_box{transform:translate(-46.875vw, -50%);}
  #main .maincopy_box .maincopy{width:45.625vw;margin:0 auto 4.687vw 0;}
  #main .maincopy_box .lead{font-size:1.875vw;}

  #main #strengths{padding:11.718vw 0;}
  #main #strengths p.en{font-size:23.4375vw;bottom:calc(100% - 6.25vw);}
  #main #strengths .strengths_ttl_box{width:93.75vw;padding:0 0 6.25vw;}
  #main #strengths .strengths_ttl_box .ttl{font-size:2.8125vw;margin:0 0 3.906vw;}
  #main #strengths .strengths_ttl_box .txt{font-size:1.875vw;}

  #main #strengths .diagram{height:66.093vw;width:66.093vw;}
}

@media screen and (max-width: 767px) {
  #main #main_slider{height:120vw;max-height:450px;min-height:initial;}
  #main .maincopy_box{display:block;width:auto;left:40px;transform:translate(0, -50%);}
  #main .maincopy_box .maincopy{width:250px;margin:0 auto 40px 0;}
  #main .maincopy_box .lead{font-size:14px;line-height:2.2;}

  #main #strengths{padding:40px 0 20px;}
  #main #strengths p.en{font-size:80px;bottom:calc(100% - 10px);letter-spacing:0.1em;}
  #main #strengths .strengths_ttl_box{width:auto;margin:auto 40px;padding:0 0 30px;}
  #main #strengths .strengths_ttl_box .ttl{font-size:16px;font-weight:700;letter-spacing:0;margin:0 0 30px;}
  #main #strengths .strengths_ttl_box .txt{font-size:14px;}

  #main #strengths .diagram{height:84vw;width:84vw;}
}

@media screen and (max-width: 374px) {
  #main .maincopy_box{left:10.666vw;}
  #main .maincopy_box .maincopy{width:66.666vw;margin:0 auto 10.666vw 0;}
  #main .maincopy_box .lead{font-size:3.733vw;}
}