@charset "utf-8";

/*--------- menu ---------*/

.visualBlock {
    width: 100%;
    position: relative;
    overflow: hidden;
}

#visualVerticalImg{
    position: absolute;
    top: -500px;
    object-fit: cover;
    width: 100%;
    height:100%;
    overflow: hidden;
}

#visualVerticalImg2{
    position: absolute;
    top: -900px;
    object-fit: cover;
    width: 100%;
    height:100%;
    overflow: hidden;
}

#visualVerticalImg3{
    position: absolute;
    top: -500px;
    object-fit: cover;
    width: 100%;
    height:100%;
    overflow: hidden;
}

#visualVerticalImg4{
    position: absolute;
    top: -300px;
    object-fit: cover;
    width: 100%;
    height:100%;
    overflow: hidden;
}

#visualVerticalImg5{
    position: absolute;
    top: -970px;
    object-fit: cover;
    width: 100%;
    height:100%;
    overflow: hidden;
}

@media screen and (max-width: 768px) {
 #visualVerticalImg{
    position: absolute;
    top: 0px;
    object-fit: cover;
    width: 100%;
    height:100%;
    overflow: hidden;
}
              #visualVerticalImg2{
    position: absolute;
    top: 0px;
    object-fit: cover;
    width: 100%;
    height:100%;
    overflow: hidden;
}
                  #visualVerticalImg3{
    position: absolute;
    top: 0px;
    object-fit: cover;
    width: 100%;
    height:100%;
    overflow: hidden;
}
                      #visualVerticalImg4{
    position: absolute;
    top: 0px;
    object-fit: cover;
    width: 100%;
    height:100%;
    overflow: hidden;
}
                  #visualVerticalImg5{
    position: absolute;
    top: 0px;
    object-fit: cover;
    width: 100%;
    height:100%;
    overflow: hidden;
}
          }


/*--------- top ---------*/
body.home section#mainvisual{width:100%;margin-bottom: 0;padding-bottom: 1vh;}
body.home section#mainvisual img{height: 75vh;object-fit:cover; }


body.home section#mainvisual p{
  position: absolute;/*重ねたい子要素にabsolute*/
  top:50%;
  left: 35%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #fff;
  line-height:0.9;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}

@media screen and (max-width: 768px) {
body.home section#mainvisual p{
    width: 78%;
  position: absolute;/*重ねたい子要素にabsolute*/
  top:50%;
  left: 50%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #fff;
    line-height:1.2;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}
  
}

.main{font-size: 40px;font-weight: 800;letter-spacing: 0.1rem;}
.sub{font-size: 17px;font-weight: 600;}

@media screen and (max-width: 768px) {
.main{font-size: 32px;font-weight: 800;}
.sub{font-size: 19px;font-weight: 600;}
  
}

.bggray{background: #F9F9FA}

        .bg-sd{position:absolute;bottom:-20px;background: #fff;padding:30px;width: 120px;height:120px;border-radius: 120px;
          left: 50%; transform: translateX(-50%);  -webkit-transform: translateX(-50%);}
        .bg-sd span{position: absolute;  left:35px;bottom:30px;color: #db9439;font-size: 130%;  letter-spacing: 0.05em;}
        .scrolldown{position:absolute;bottom:0px;right:50%;animation: arrowmove 1s ease-in-out infinite;}
        @keyframes arrowmove{0%{bottom:0%;}50%{bottom:5%;}100%{bottom:0%;}}
        .scrolldown:before {
            content: "";
            position: absolute;
            bottom: 55px;
            right: -3px;
            width: 2px;
            height: 10px;
            background: #db9439;
            transform: skewX(-31deg);
        }
        .scrolldown:after{
          content:"";
          position: absolute;
          bottom:55px;
          right:0;
          width:2px;
          height: 45px;
          background:#db9439;
        }

        .swiper-button-prev,.swiper-button-next{background-image:none;color:#db9439;z-index: 99;background:#fff;border-radius: 21px;width:42px;padding:5px 0px;margin-top: -40px;}
        .swiper-button-prev{left: 0px;}
        .swiper-button-next{right:0px;}
        .swiper-button-prev:after{content:"←";font-size:200%;}
        .swiper-button-next:after{content:"→";font-size:200%;}

.slide-typo1{
  background-image: url("../img/top/typo1.png");
   background-size: 2000px;
  animation: bgscroll 50s linear infinite;
  height: 65px;
  
}

.slide-typo2{
  background-image: url("../img/top/typo2.png");
   background-size: 2000px;
  animation: bgscroll 55s linear infinite;
  height: 65px;
    animation-direction:reverse;
  
}


@-webkit-keyframes bgscroll {
  0% {background-position: 0 0;}
  100% {background-position: 100vw 0;}
 }

 @keyframes bgscroll {
  0% {background-position: 0 0;}
  100% {background-position: 100vw 0;}
 }


@media screen and (max-width: 768px) {
.slide-typo1{
  background-image: url("../img/top/typo1.png");
   background-size: 2300px;
  animation: bgscroll 10s linear infinite;
  height: 90px;
    animation-direction:reverse;
  
}
    
.slide-typo2{
  background-image: url("../img/top/typo2.png");
   background-size: 2300px;
  animation: bgscroll 15s linear infinite;
  height: 75px;
  
}

@-webkit-keyframes bgscroll {
  0% {background-position: 0 0;}
  100% {background-position: 100vw 0;}
 }

 @keyframes bgscroll {
  0% {background-position: s0 0;}
  100% {background-position: 100vw 0;}
 }

        }


.products div {width: 25%;float: left;}

@media screen and (min-width: 651px) {
    .products div {
        width: 50%;
        float: left;
        
    }
}

@media screen and (max-width: 650px) {
    .products div {
        width: 50%;
        float: left;
        
    }
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

body.home article{background: #fff;margin:10vh 0 0; padding:6vh 0 8vh;}

.pc-recruitsection{margin-top: 350px;}

.s01-text{font-size: 120%;letter-spacing: 0.025em;font-weight: 600;line-height: 2.2; color: #E89111}
@media screen and (max-width: 768px) {
.s01-text{font-size: 100%;letter-spacing: 0.000em;font-weight: 600;line-height: 1.7; color: #E89111}
        }

.s02-text1{font-size: 110%;letter-spacing: 0.025em;font-weight: 600;line-height: 2.2; color: #fff}
.s02-text2{font-size: 100%;letter-spacing: 0.025em;font-weight: 500;line-height: 1.8; color: #fff}
@media screen and (max-width: 768px) {
.s02-text1{font-size: 100%;letter-spacing: 0.000em;font-weight: 600;line-height: 2.2; color: #fff}
.s02-text2{font-size: 93%;letter-spacing: 0.000em;font-weight: 500;line-height: 1.8; color: #fff}
        }

.s06-text1{font-size: 90%;letter-spacing: 0.025em;font-weight: 600;line-height: 2.2; color: #fff}
@media screen and (max-width: 768px) {
.s06-text1{font-size: 100%;letter-spacing: 0.000em;font-weight: 600;line-height: 2.2; color: #fff}
        }

.news-text{font-size: 90%;letter-spacing: 0.000em;line-height: 1.9;}

#no04 ul li a{display:inline-block;}
#no04 ul li a:hover{color:#E89111;text-decoration: none;}

        .text-list{margin-bottom: 2vh;}
        .text-list li{padding:15px 0;border-top: 1px solid #c4c4c4;font-size: 100%;}
        .text-list li:last-child{border-bottom:none;}
        .text-list li date{float:left;line-height: 160%;font-weight: 600}
        .text-list li a{color:#000;display: inline-block;}

        @media screen and (max-width: 1080px) {
          .parallax#pll-bg1{height:auto;min-height:720px;}
          .parallax#pll-bg2{height:auto;min-height:780px;}
        }
        @media screen and (max-width: 768px) {
            body.home section#no05 p{margin:0;}
            body.home section .sp-mgb{margin-bottom:2vh;}
        }

#no04 span{font-size: 75%;background: #db9439;color:#fff;border-radius: 30px;padding: 6px 10px;text-align: center;vertical-align: middle}

  /*---------end top ---------*/

  /*--------- page ---------*/

body.pages section#mainvisual{width:100%;margin-bottom: 0;}
body.pages section#mainvisual img{height: 450px;object-fit:cover; }


#maintitle.visualBlock{height: 420px;}
#maintitle #visualVerticalImg{top: 0px;}

.pages-s00-text{font-size: 140%;letter-spacing: 0.045em;font-weight: 600;line-height: 1.7;}
.pages-s01-text{font-size: 100%;letter-spacing: 0.025em;line-height: 1.7;}
@media screen and (max-width: 768px) {
    .pages-s00-text{font-size: 140%;letter-spacing: 0.045em;font-weight: 600;line-height: 1.7;}
.pages-s01-text{font-size: 93%;letter-spacing: 0.000em;line-height: 1.7;}
        }

.brandname{font-size: 85%;letter-spacing: 0.025em;line-height: 3.0;text-align: center}

.categorytub {
    font-size: 75%;
    background: #db9439;
    color: #fff;
    border-radius: 30px;
    padding: 6px 8px;
    text-align: center;
    vertical-align: middle;
}

.requiretub {
    font-size: 80%;
    background: #db9439;
    color: #fff;
    border-radius: 4px;
    padding: 4px 6px;
    text-align: center;
    vertical-align: middle;
    margin-left: 8px;

}

.requiretub2 {
    font-size: 80%;
    background: #db9439;
    color: #fff;
    border-radius: 4px;
    padding: 4px 6px;
    text-align: center;
    vertical-align: middle;
margin-right: 3px;
}

ol.pp {
    list-style: decimal;
    font-family: "'Noto Sans Japanese', sans-serif,'Roboto'";
    line-height: 200%;
    margin-bottom: 0.5rem;
    padding: 20px;
}

.circle-btn{
  display: inline-block;
  width: 150px;
  height: 150px;
  text-align:center;
  line-height: 150px;
  border-radius: 50%;
  border: solid 1px #db9439;
    font-size: 90%;
}

.circle-btn:hover{
    color:#fff;
  display: inline-block;
  width: 150px;
  height: 150px;
  text-align:center;
  line-height: 150px;
    background: #db9439;
  border-radius: 50%;
  border: solid 1px #db9439;
    font-size: 100%;
}

.circle-btn2{
  display: inline-block;
  width: 130px;
  height: 130px;
  text-align:center;
  line-height: 130px;
  border-radius: 50%;
  border: solid 1px #db9439;
    font-size: 80%;
}

.circle-btn2:hover{
    color:#fff;
  display: inline-block;
  width: 130px;
  height: 130px;
  text-align:center;
  line-height: 130px;
    background: #db9439;
  border-radius: 50%;
  border: solid 1px #db9439;
    font-size: 90%;
}

.circle-btn3{
    color:#fff;
  display: inline-block;
  width: 200px;
  height: 200px;
  line-height: 400%;
  border-radius: 50%;
  border: solid 1px #fff;
    background-color: rgba(255, 255, 255, 0.1);
    font-size: 70%;
}

.circle-btn3:hover{
    color:#fff;
  display: inline-block;
  width: 200px;
  height: 200px;
  line-height: 400%;
  border-radius: 50%;
  border: solid 1px #000;
    background-color: rgba(0, 0, 0, 0.5);
    font-size: 70%;
}

.movearrow{position:relative;animation: arrowmove 1s ease-in-out infinite;}
        @keyframes arrowmove{0%{right:0%;}50%{right:8%;}100%{right:0%;}}
        .movearrow:before {
            content: "";

            position: absolute;
            bottom: 70px;
            right: -17px;
            width: 2px;
            height: 5px;
            background: #db9439;
            transform: skewX(60deg);
        }
        .movearrow:after{
          content:"";

          position: absolute;
          bottom:70px;
          right:-20px;
          width:40px;
          height: 1px;
          background:#db9439;
        }

.movearrow2{position:relative;animation: arrowmove 1s ease-in-out infinite;}
        @keyframes arrowmove{0%{right:0%;}50%{right:8%;}100%{right:0%;}}
        .movearrow2:before {
            content: "";

            position: absolute;
            bottom: 60px;
            right: -17px;
            width: 2px;
            height: 5px;
            background: #db9439;
            transform: skewX(60deg);
        }
        .movearrow2:after{
          content:"";

          position: absolute;
          bottom:60px;
          right:-20px;
          width:40px;
          height: 1px;
          background:#db9439;
        }


.movearrow3{position:relative;animation: arrowmove 1s ease-in-out infinite;}
        @keyframes arrowmove{0%{right:0%;}50%{right:8%;}100%{right:0%;}}
        .movearrow3:before {
            content: "";

            position: absolute;
            bottom: 20px;
            right: 16px;
            width: 2px;
            height: 4px;
            background: #fff;
            transform: skewX(60deg);
        }
        .movearrow3:after{
          content:"";

          position: absolute;
          bottom:20px;
          right:14px;
          width:40px;
          height: 1px;
          background:#fff;
        }

    /*---------end page ---------*/