﻿/*-----ani start------*/

p > span > span{
     display: inline-block;
     -webkit-transform: translateX(20px);
     transform: translateX(20px);
     -webkit-animation: .35s cubic-bezier(.175,.885,.32,1.275) both;
     animation: .35s cubic-bezier(.175,.885,.32,1.275) both;
     opacity: 0;
}

@keyframes slide-bs{
     0%{-webkit-transform: translateX(20px);transform: translateX(20px);}
     100%{-webkit-transform: translateX(0);transform: translateX(0);}
}

/*-----ani end------*/



/*------global start------*/

.bg_color1 {
    background-color: #fd5707;
}

.txt_color3 {
    color: #fd5200;
}

.bg_color4 {
    background-color: #f7f7f7;
}

.txt_color1 {
    color: #11a25f;
}

.bg_color3 {
    background-color: #ececec;
}

#loading_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(1);
    width: 60%;
    max-width: 150px;
    z-index: 3;
    opacity: 1;
    animation: kakudai 1.5s ease forwards;
    animation-delay: 0.5s;
}



@keyframes kakudai {
  0%   { 
      transform: translate(-50%,-50%) scale(1);
      opacity: 1;
  }
  100% { 
      transform: translate(-50%,-50%) scale(10);
  opacity:0;
  }
}


.page_title_box .wrap{
    position:relative;
}

.page_title_box .wrap:before{
content: "";
    display: block;
    width: 0%;
    height: 105%;
    position: absolute;
    top: 45%;
    left: 50%;
    background-color: rgba(255,255,255,0.7);
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    pointer-events: none;
    z-index: 0;
    animation: bg 0.1s linear forwards;
    animation-delay: 3.5s;
}

@keyframes bg {
    0% { width: 0%;}
  100% { width: 105%;}
}

.page_title_box .wrap p.font_25{
    font-size: 18px;
}

.all_header #header {
    display: none;
}

#page-top .bg_color1{
    /*background-color: #11a25f;*/
    background-color: #fd5200;
}

/*.more:hover .txt_color_nomal{
    color:white;
}*/

.hvr_txt_color1:hover {
    color: #fd5200;
    font-weight: bold;
}

.page_title_box .font_25 span span{
    color: #fd5200;
}

.bg_color2 {
    background-color: #e7e7e7;
}

.linkStyle{
    color:black;
}


/*------global end------*/




/*---top start-----*/

.img-container:before {
    background: #fd5707;
}

.svg_box{
    display: none;
}

#contents .box figure:after {
content: '';
    position: absolute;
    top: 100%;
    bottom: 0;
    margin: auto;
    width: 200%;
    height: 100%;
    z-index: -1;
    border: none;
    opacity: 1;
    /* background-color: #11a25f; */
    background-color: #cee6da;
    background-image: url(./Dup/img/back.png);
}

#contents .box figure:before {
    content: '';
    position: absolute;
    top: 100%;
    bottom: 0;
    margin: auto;
    width: 200%;
    height: 100%;
    z-index: 0;
    border: none;
    opacity: 1;
    background-image: url(./Dup/img/back.png);
}

#contents .box figure.ichi:before {
    width: 100%;
    height: 100%;
    background-image: url(./Dup/img/ichi.png);
    background-repeat: no-repeat, repeat;
    background-position: bottom left;
    background-size: contain;
}

#contents .box figure.san:before {
    width: 100%;
    height: 100%;
    background-image: url(./Dup/img/san.png);
    background-repeat: no-repeat, repeat;
    background-position: bottom left;
    background-size: contain;
}

#contents .box figure.ni:before {
    /*left: -20%;*/
    width: 100%;
    height: 100%;
    background-image: url(./Dup/img/ni.png);
    background-repeat: no-repeat, repeat;
    background-position: bottom right;
    background-size: contain;
}


#contents .box{
    /*background-image: url(./Dup/img/back.png);*/
    background-position: bottom right;
    background-size: contain;
    background-repeat: no-repeat;
        margin-bottom: 150px;
}

#contents .box.koren{
background-position: bottom left;
}

#top_cms{
    position: relative;
    z-index: 1;
}

#contents .box h3 {
    display: inline-block;
    position: relative;
    /* font-size: 20px; */
    font-size: -webkit-calc(1rem + 20px);
    font-size: calc(1rem + 20px);
}

#contents .box .txt_wrap {
    z-index: 2;
    position: relative;
}

.hvr_border_color3:hover {
    border-color: #fd5200;
}
.hvr_bg_color3:hover {
    background-color: #fd6116;
}

.main_img:before{
       content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(./Dup/img/font.png);
    background-position: center left;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    background-size: 50%;
    pointer-events: none;
    z-index: 1;
    opacity: 1;
    animation: bgiLoop 0.5s linear 15s forwards;
}

@keyframes bgiLoop {
    0% { opacity: 1;}
  100% { opacity: 0;}
}

.catch{
    display: none;
}

.txt_wrap p.txt_color3{
    font-weight: bold;
}

.navi{
    display: none;
}

#contents .box:nth-child(odd) figure:after {
    right: 40%;
    -moz-transform: translateX(50%) skewY(-10deg);
    -webkit-transform: translateX(50%) skewY(
-10deg
);
    -ms-transform: translateX(50%) skewY(-10deg);
    transform: translateX(50%) skewY(
-10deg
);
}


.t_cms_img2 .img-container:before {
    background: #fd5707;
}

/*---top end-----*/

/*-----page03 start------*/

#cms_2-a h4.box_title1{
    font-weight: bold;
}

/*-----page03 end------*/


/*-----採用情報 start-----*/

#cms_6-b .cate_title{
    font-weight: bold;
    letter-spacing: 0.25em;
        color: black;
}

/*-----採用情報 end-----*/


/*---page08 start-----*/

#tel_CONTACT{
    display: block;
}

#mail_CONTACT{
    display: none;
}

#tel_CONTACT p{
    margin: 5px;
}

/*---page08 end-----*/


/*--20240610 correct start--*/

.banners{
        max-width: 1280px;
    margin: 0 auto 10%;
}

/*--20240610 correct end--*/


@media screen and (max-width: 1000px){
.all_header #header {
    display: inline-flex;
}

.top_page header {
    background-color: rgba(255,255,255,0.4);
    padding-bottom: 20px;
}

.main_img:before {
    background-size: 60%;
}

.cate_list li {
    text-align: left;
        width: 50%;
}

}



/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.main_img_wrap{height: auto}
.main_wrap{margin-top: 50vh;}

#contents .box figure {
    width: 80%;
}

#contents .box .txt_wrap {
    width: 80%;
}

}

/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
.main_wrap{margin-top: 35vh;}
#video{height: 35vh;}


.main_img_wrap{
    margin-top: 50px;
}

main{
    margin-top: 0 !important;
}

.top_page header {
    background-color: transparent;
    padding-bottom: 0px;
}

#contents .box figure {
    width: 100%;
}

#contents .box .txt_wrap {
    width: 100%;
}

#page_title h2 {
    color: #000;
}

#tel_CONTACT p a{
    letter-spacing: 0.01em;
}

.cate_list li {
        width: 100% !important;
}

.page_title_box .wrap:before {
    height: 130%;
}

#page_title p {
    color: black;
}

.banners {
    padding: 0 10px;
}

}

