@charset "UTF-8";
/* CSS Document */

#contents {
margin-top: 0px;
}
/* 中身-モバイルファースト======================================================================================================== */

#main_slider{
position: relative;
}
#main_slider h1{
color: #fff;
text-shadow:0px 0px 10px rgba(0, 0, 0, .5);
white-space: nowrap;
line-height: 1.4;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
margin: auto;
z-index: 5000;
}
#main_slider h1 span{
display: block;
}
#main_slider h1 span.s{
font-size: 10vw;
}
#main_slider h1 span.m{
font-size: 20vw;
}

#main_slider li img{
width: 100%;
height: 100vh;
object-fit: cover;
animation: 5.5s linear forwards zoomin;
}
@keyframes zoomin {
0% {
  transform: scale(1.1);
}
100% {
  transform: scale(1);
}
}

#main_slider .scroll{
position: absolute;
bottom: 9vh;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
margin: 0 auto;
z-index: 5000;
}
#main_slider .scroll a{
display: block;
text-decoration: none;
font-size: 1.8vh;
color: #fff;
text-shadow:0px 0px 10px #000;
text-align: center;
}
#main_slider .scroll a::after{
content: "";
display: block;
width: 1px;
height: 6vh;
margin: 0 auto;
background-color: #fff;
animation: 1s infinite ease-in-out alternate forwards extend;
}
@keyframes extend {
0% {
  height: 6vh;
}100% {
  height: 5vh;
}
}




#message{
background: #C7CACD;
background-image: -webkit-image-set(url(../images/bg.png) 1x, url(../images/bg@2x.png) 2x),radial-gradient(circle, #fff 0%, #C7CACD 200%);
background-repeat: no-repeat, no-repeat;
background-position: 10vw bottom, left top;
background-size: auto 110%, auto;
padding-top: 20vw;
padding-bottom: 20vw;
}
#message .contents_size{
position: relative;
}
#message .text{
position: relative;
z-index: 100;
padding-top: 38vw;
}
#message .text .common_title .en{
padding-bottom: 5vw;
}
#message .text .common_title h2{
font-size: 5.5vw;
text-shadow:0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff;
}

#message .photo{
margin-left: -5vw;
margin-right: -5vw;
}
#message .photo figure{
clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
z-index: 50;
}
#message .photo figure img{
width: 100%;
height: auto;
}
#message .photo .p01{
width: 80vw;
clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
position: absolute;
top: 0;
right: -5vw;
}
#message .photo .p02{
width: 70vw;
margin-top: 10vw;
margin-left: auto;
margin-right: -3vw;
}
#message .photo .p03{
width: 50vw;
position: absolute;
left: 0;
bottom: -25vw;
}



#business{
display: flex;
flex-direction: column-reverse;
position: relative;
}
#business .photo{
position: relative;
}
#business .photo .p{
clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 0% 100%);
}
#business .photo .img{
width: 70vw;
position: absolute;
bottom: -5vw;
right: -2vw;
}

#business .text{
margin-top: 0vw;
padding: 0vw 5vw 20vw;
text-align: left;
position: relative;
}
#business .text .common_title{
margin-bottom: 0;
}
#business .text .common_title .en{
font-size: 20vw;
color: rgba(85, 85, 85, .2);
position: absolute;
top: 10vw;
right: -2vw;
z-index: 1;
}
#business .text .common_title h2{
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-orientation: upright;
margin: 0 auto;
position: relative;
z-index: 10;
}
#business .text .common_title h2 .k{
text-orientation: sideways;
}



#recruit{
background-color: #cb261e;
background-image: url(../images/bg_red.png);
background-image: -webkit-image-set(url(../images/bg_red.png) 1x, url(../images/bg_red@2x.png) 2x);
background-repeat: no-repeat;
background-position: 80% bottom;
background-size: auto 80%;
color: #fff;
padding-bottom: 20vw;
}
#recruit #recruit_slider{
}
#recruit #recruit_slider ul{
display: flex;
width: 360vw;
animation: 20s infinite linear 0.5s both infinity-scroll-left;
transform: translate3d(0, 0, 0);
}
#recruit #recruit_slider li{
width: 30vw;
}
@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-50%);
}
}

#recruit .contents_size{
text-align: center;
}
#recruit .common_title{
margin-top: -5vw;
z-index: 10;
position: relative;
}
#recruit .common_title .en{
color: #fff;
}
#recruit .common_title h2{
font-size: 5vw;
text-shadow:0px 0px 10px #cb261e, 0px 0px 10px #cb261e, 0px 0px 10px #cb261e, 0px 0px 10px #cb261e, 0px 0px 10px #cb261e;
}
#recruit .common_title + p{
text-align: left;
text-shadow:0px 0px 10px #cb261e, 0px 0px 10px #cb261e, 0px 0px 10px #cb261e, 0px 0px 10px #cb261e, 0px 0px 10px #cb261e;
}

#recruit .movie{
margin: 40px 0;
}
#recruit .movie iframe{
width: 100%;
height: auto;
aspect-ratio: 16/9;
}

#recruit .contents_size ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#recruit .contents_size li{
width: 48%;
margin-bottom: 4%;
aspect-ratio: 1/1;
}
#recruit .contents_size li a{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
aspect-ratio: 1/1;
background-color: #FFF;
box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.3);
color: #cb261e;
text-decoration: none;
}
#recruit .contents_size li .icon img{
width: auto;
height: 40px;
}
#recruit .contents_size li h3{
font-size: 18px;
}
#recruit .contents_size li p{
font-size: 3vw;
}




#company .photo{
clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
margin-right: -5vw;
margin-bottom: 20px;
}
#company .text .common_title h2{
margin-top: -8vw;
}



/* PCのみ======================================================================================================== */
@media print, screen and (min-width: 751px){

#main_slider h1{
line-height: 1.2;
text-shadow:0px 0px 20px rgba(0, 0, 0, .3);
}
#main_slider h1 span.s{
font-size: 12vh;
}
#main_slider h1 span.m{
font-size: 25vh;
}

#main_slider .scroll{
bottom: 0;
}
#main_slider .scroll a{
font-size: 1.2vh;
}



#message{
background-position: 110% -100px, left top;
background-size: auto, auto;
padding-top: 12vw;
padding-bottom: 12vw;
}
#message .text{
padding-top: 0;
}
#message .text .common_title .en{
color: rgba(85, 85, 85, .2);
padding-bottom: 1vw;
padding-top: 2vw;
}
#message .text .common_title h2{
font-size: 3vw;
}
#message .text .common_btn{
text-align: left;
margin-top: 40px;
}

#message .photo .p01{
width: 40vw;
clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
right: 0;
}
#message .photo .p02{
width: 30vw;
margin-top: 0;
margin-right: 0;
position: absolute;
right: -5vw;
bottom: -5vw;
}
#message .photo .p03{
width: 18vw;
left: inherit;
right: 18vw;
bottom: -15vw;
}



#business{
flex-direction: row-reverse;
align-items: center;
}
#business .photo{
width: 50%;
}
#business .photo .p{
clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 0% 100%);
}
#business .photo .p img{
width: 100%;
}
#business .photo .img{
width: 40vw;
bottom: 5vw;
right: -10vw;
}
#business .photo .img img{
width: 100%;
}

#business .text{
width: 50%;
padding: 0vw 10vw;
}
#business .text .common_title{
margin-bottom: 60px;
}
#business .text .common_title .en{
font-size: 10vw;
top: -5vw;
right: -1vw;
}
#business .text .common_title h2{
font-size: 4vw;
}
#business .text .common_btn{
margin-top: 60px;
}


#recruit{
background-position: -10% 350px;
background-size: auto;
padding-bottom: 12vw;
}
#recruit #recruit_slider ul{
width: 3600px;
}
#recruit #recruit_slider li{
width: 300px;
}
#recruit #recruit_slider li img{
width: 100%;
}

#recruit .common_title{
margin-top: -3vw;
}
#recruit .common_title h2{
font-size: 2vw;
}
#recruit .common_title + p{
width: 800px;
margin: 0 auto;
}
#recruit .movie{
width: 800px;
margin: 80px auto;
}
#recruit .movie iframe{
}

#recruit .contents_size li{
width: 23%;
margin-bottom: 0;
}
#recruit .contents_size li a:hover{
background-color: rgba(255, 255, 255, 0.8);
transform: scale(1.05);
}
#recruit .contents_size li .icon img{
height: 60px;
}
#recruit .contents_size li h3{
font-size: min(2.5vw,30px);
margin-top: .5vw;
}
#recruit .contents_size li p{
font-size: min(1.2vw,18px);
}



#company{
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
}
#company .photo{
width: 600px;
clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);
margin-right: 0;
margin-bottom: 0;
}
#company .photo img{
width: 100%;
}
#company .text{
flex: 1;
margin-right: 60px;
}
#company .text .common_title h2{
margin-top: -5vw;
}
#company .text .common_btn{
text-align: left;
}



}