@charset "UTF-8";
/* CSS Document */
.no-scroll {
overflow: hidden;
}

.loading {
position: fixed;
z-index: 1000;
width: 100%;
height: 100dvh;
background: #EB6600;
display: grid;
place-items: center;
}
.loading > div {
width: 30vw;
max-width: 200px;
position: relative;
animation: load 500ms;
transform: translateY(0);
}
@keyframes load {
0% {transform: translateY(100px);}
100% {transform: translateY(0);}
}
.loading > div > img {
display: block;
position: relative;
z-index: 1001;
}
.loading > div > span {
display: block;
position: absolute;
top: 0;
z-index: 1002;
opacity: 0;
}
.loading > div > span:nth-child(1) {
animation: wave1 2000ms infinite;
}
.loading > div > span:nth-child(2) {
animation: wave2 2000ms infinite;
}
.loading > div > span:nth-child(3) {
animation: wave3 2000ms infinite;
}
@keyframes wave1 {
0% {opacity: 0;}
20% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes wave2 {
10% {opacity: 0;}
30% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes wave3 {
20% {opacity: 0;}
40% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}
.loading.hide {
opacity: 0;
pointer-events: none;
transition: opacity 500ms;
}

#header .hero:before {
content: "";
display: block;
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
background: url(../images/frame.svg) no-repeat center center;
background-size: cover;
}

#challenge1 img {
position: relative;
z-index: 1;
clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}
#challenge1:before, #shoplist ul li:before {
position: absolute;
top: 0;
right: 0;
z-index: 2;
content: "";
display: block;
width: 100%;
height: 100%;
transition: .6s;
transition-delay: .3s;
}
#challenge1.-visible:before, #shoplist ul li.-visible:before {
width: 0;
}
#challenge1:before {
background: #fff;
}
#challenge1 h2 {
position: absolute;
right: 0;
z-index: 2;
color: #EB6600;
}

#shoplist {
position: relative;
color: #fff;
}
#shoplist a {
color: #fff;
}
#shoplist:before {
content: "";
display: block;
width: 100%;
top: 0;
left: 0;
transform: translateY(-100%);
position: absolute;
background: #EB6600;
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
#shoplist ul li {
position: relative;
}
#shoplist ul li:before {
background: #EB6600;
}
#shoplist ul li span {
position: relative;
display: table;
margin-left: auto;
padding: 0 5px;
width: 90px;
height: 90px;
line-height: 90px;
text-align: center;
color: #EB6600;
font-size: 2rem;
font-weight: bold;
background: #fff;
border-radius: 50%;
box-sizing: border-box;
z-index: 1;
}
#shoplist ul li span:before {
content: "";
position: absolute;
bottom: -25px;
left: 50%;
margin-left: -15px;
border: 15px solid transparent;
border-top: 15px solid #fff;
z-index: 1;
}
#shoplist ul li img {
position: relative;
z-index: 0;
padding-bottom: 10px;
}
#shoplist ul li a {
display: block;
font-weight: bold;
}

#recruit {
position: relative;
}
#recruit:before {
content: "";
display: block;
width: 100%;
top: 0;
left: 0;
position: absolute;
background: #EB6600;
clip-path: polygon(100% 0, 0 0, 100% 100%);
z-index: 10;
}
#recruit > div {
position: relative;
}
#recruit > div:before {
content: "";
display: block;
position: absolute;
z-index: 3;
width: 100%;
height: 100%;
background: url(../images/frame.svg) no-repeat center center;
background-size: cover;
opacity: .2;
}
#recruit > div .box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 5;
color: #fff;
}
#recruit > div .box a {
color: #fff;
}
.slider li {
transition: none;
}

#service {
background: #343434;
color: #fff;
position: relative;
}
#service:after {
content: "";
display: block;
width: 100%;
bottom: 0;
left: 0;
position: absolute;
background: #fff;
clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
#service h2 {
text-align: right;
}
#service article {
position: relative;
}
#service article:before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1;
}
#service article#service1:before {
background: url(../images/service1.svg) no-repeat center center;
background: cover;
}
#service article#service2:before {
background: url(../images/service2.svg) no-repeat center center;
background: cover;
}
#service article#service3:before {
background: url(../images/service3.svg) no-repeat center center;
background: cover;
}
#service article#service4:before {
background: url(../images/service4.svg) no-repeat center center;
background: cover;
}
#service article:last-child {
padding-bottom: 0;
}
#service article .box, #service article .box img {
position: relative;
}
#service article .box img {
z-index: 0;
clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}
#service article .box h3 {
position: absolute;
z-index: 1;
}
#service article ul {
width: 90%;
max-width: 1280px;
margin: 0 auto;
}
#service article ul li {
display: flex;
align-items: center;
}
#service article ul li span {
position: relative;
display: block;
padding: 0 5px;
text-align: center;
color: #EB6600;
background: #fff;
border-radius: 50%;
box-sizing: border-box;
}
#service article ul li span:before {
content: "";
position: absolute;
top: 50%;
right: -25px;
margin-top: -15px;
border: 15px solid transparent;
border-left: 15px solid #fff;
z-index: 0;
}

#news > a {
display: table;
margin: 0 auto;
}


@media (max-width: 560px){
#challenge {
padding-bottom: 80px;
}
#challenge1 {
margin-bottom: 30px;
}
#challenge1:before {
width: 0;
}
#challenge1 h2.bottom-up {
transform: translateY(0%);
opacity: 1;
}
#challenge2 .title,
#challenge2 .title span {
transform: translate(0, 0);
animation-delay: 0.6s;
}
#challenge2 .fade {
opacity: 1;
}
#challenge2 h3, #service h3 {
font-size: 4.2vw;
}
#challenge2 h3 {
padding-bottom: 10px;
}
#challenge2 h3 div, #service h3 div {
padding: 4px 10px;
margin-bottom: 5px;
}
#challenge2 p {
line-height: 180%;
padding-bottom: 30px;
}

#shoplist, #service {
padding: 40px 0;
}
#shoplist:before, #recruit:before, #service:after {
height: 50px;
}
#shoplist ul {
padding-bottom: 40px;
}
#shoplist ul li h3 {
text-align: center;
padding-bottom: 5px;
}
#shoplist ul li p {
text-align: center;
}
#shoplist ul li p a {
font-size: 5vw;
}
#shoplist iframe {
height: 50vh;
}

#recruit h2 {
padding-bottom: 30px;
}
#recruit p {
padding-bottom: 10px;
}

#service h2 {
padding-bottom: 50px;
}
#service h2 {
display: flex;
flex-direction: column-reverse;
}
#service article {
padding: 80px 0 100px;
}
#service article#service1:before {
width: 68px;
height: 100px;
}
#service article#service2:before {
width: 90px;
height: 72px;
}
#service article#service3:before {
width: 56px;
height: 100px;
}
#service article#service4:before {
width: 88px;
height: 100px;
}
#service article .box {
padding-bottom: 20px;
}
#service article .box h3 {
top: 5%;
font-size: 3.5vw;
}
#service article ul li span {
margin-right: 15px;
min-width: 90px;
min-height: 90px;
line-height: 90px;
font-size: 1.3rem;
}
#service article ul li strong {
font-weight: normal;
}

#news {
padding: 40px 0 60px;
}
}

@media (min-width: 561px){
#challenge {
padding-bottom: 150px;
}
#challenge2 h3 {
padding-bottom: 50px;
}
#challenge2 h3 div, #service h3 div {
padding: 8px 20px;
margin-bottom: 10px;
}
#challenge2 p, #recruit p {
padding-bottom: 30px;
line-height: 180%;
}

#shoplist, #service, #news {
padding: 80px 0;
}
#shoplist:before, #recruit:before, #service:after {
height: 100px;
}
#shoplist h2, #recruit h2 {
padding-bottom: 80px;
}
#shoplist h2 span {
padding-right: 30px;
}
#shoplist ul {
display: flex;
justify-content: space-between;
padding-bottom: 50px;
}
#shoplist ul li {
width: 32%;
}
#shoplist ul li:nth-child(2):before {
transition-delay: .6s;
}
#shoplist ul li:nth-child(3):before {
transition-delay: .9s;
}
#shoplist ul li a {
font-size: 2rem;
}
#shoplist iframe {
height: 600px;
}

#service h2, #news h2 {
padding-bottom: 100px;
}
#service h2 span {
padding-left: 30px;
}
#service article {
padding: 120px 0 150px;
}
#service article#service1:before {
width: 136px;
height: 200px;
}
#service article#service2:before {
width: 180px;
height: 143px;
}
#service article#service3:before {
width: 112px;
height: 200px;
}
#service article#service4:before {
width: 176px;
height: 200px;
}
#service article .box {
padding-bottom: 50px;
}
#service article ul li {
font-size: 2rem;
}
#service article ul li span {
margin-right: 20px;
min-width: 130px;
min-height: 130px;
line-height: 130px;
font-size: 1.6rem;
}
}

@media (min-width: 561px) and (max-width: 960px){
#challenge1 {
margin-bottom: 50px;
}
#challenge2 h3, #service h3 {
font-size: 4vw;
}

#service article .box h3 {
top: 10%;
font-size: 2.8vw;
}
}

@media (max-width: 960px){
#header h1 {
width: 18vw;
left: 1vw;
top: 20px;
}

#challenge1 {
position: relative;
}
#challenge1 h2 {
bottom: -3vw;
}

#service article ul li {
padding-bottom: 20px;
}
#service article ul li:last-child {
padding-bottom: 0;
}
}

@media (min-width: 961px){
#header h1 {
width: 20vw;
}

#challenge, #challenge2 {
position: relative;
}
#challenge1, #challenge2 {
width: 60%;
}
#challenge1 {
position: absolute;
z-index: 1;
right: 0;
top: 0;
}
#challenge1 h2 {
bottom: -20px;
}
#challenge2 {
z-index: 3;
}
#challenge2 p {
width: 60%;
}

#service article .box img {
width: 60%;
}
#service article .box h3 {
top: 50%;
right: 0;
transform: translateY(-50%);
}
#service h3 .title {
transform: translate(100%, 0);
}
#service h3 .title.-visible {
transform: translate(0, 0);
}
#service article ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#service article ul li {
width: 48%;
padding-bottom: 30px;
}
#service article ul li:nth-child(2):before {
transition-delay: .3s;
}
#service article ul li:nth-child(3):before {
transition-delay: .6s;
}
#service article ul li:nth-child(4):before {
transition-delay: .9s;
}
#service article ul li:nth-last-child(-n+2) {
padding-bottom: 0;
}
}

@media (min-width: 961px) and (max-width: 1280px){
#challenge2 {
transform: translateY(-30px);
}
#challenge2 h3, #service h3 {
font-size: 2.5rem;
}
}

@media (min-width: 1281px){
#challenge2 {
padding-top: 50px;
}
#challenge2 h3, #service h3 {
font-size: 3rem;
}
#challenge2 p {
font-size: 1.8rem;
}
}