@charset "utf-8";
/*
 * home CSS
 * ---------------------------------------------
 * 
 * 
 */
 

@import 'base.css';

/*===================================
	visual	
=====================================*/
.visual {
    position: relative;
    margin: auto 30px;
}
@media screen and (max-width: 999px) {
    .visual {
        margin: auto 2.6%;
    }
}
.visual .sp {
    display: none;
}
.visual img {
    width: 100%;
    border-radius: 10px;
}
.visual .v {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -1;
    transition-duration: .5s;
}
.visual .v1 {
    opacity: 0
}
@keyframes slide1 {
  0% {
    opacity: 1;
  }
  10.5% {
    opacity: 1;
  }
  12.5% {
    opacity: 0;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slide2 {
  0% {
    opacity: 0;
  }
  10.5% {
    opacity: 0;
  }
  12.5% {
    opacity: 1;
  }
  23% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes slide3 {
  0% {
    opacity: 0;
  }
  23% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  35.5% {
    opacity: 1;
  }
  37.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes slide4 {
  0% {
    opacity: 0;
  }
  35.5% {
    opacity: 0;
  }
  37.5% {
    opacity: 1;
  }
  48% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes slide5 {
  0% {
    opacity: 0;
  }
  48% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  60.5% {
    opacity: 1;
  }
  62.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes slide6 {
  0% {
    opacity: 0;
  }
  60.5% {
    opacity: 0;
  }
  62.5% {
    opacity: 1;
  }
  73% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes slide7 {
  0% {
    opacity: 0;
  }
  73% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  85.5% {
    opacity: 1;
  }
  87.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes slide8 {
  0% {
    opacity: 0;
  }
  85.5% {
    opacity: 0;
  }
  87.5% {
    opacity: 1;
  }
  97.5% {
    opacity: 1;
  }
  99.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.visual .v1 {
  animation: slide1 60s infinite linear;
}
.visual .v2 {
  animation: slide2 60s infinite linear;
}
.visual .v3 {
  animation: slide3 60s infinite linear;
}
.visual .v4 {
  animation: slide4 60s infinite linear;
}
.visual .v5 {
  animation: slide5 60s infinite linear;
}
.visual .v6 {
  animation: slide6 60s infinite linear;
}
.visual .v7 {
  animation: slide7 60s infinite linear;
}
.visual .v8 {
  animation: slide8 60s infinite linear;
}

/*===================================
	content	
=====================================*/
.sec {
    position: relative;
}
.sec h2 {
    margin-bottom: 1.2em;
    font-size: 3.6rem;
    line-height: 1.66;
    font-weight: 100;
}
.sec h2 b {
    font-weight: 100;
}
.sec p {
    margin-bottom: 2.5em;
    font-size: 2.4rem;
}
.sec .btn,.sec .btns {
    font-size: 3rem;
}

/*===================================
    concept__sec
=====================================*/
.concept__sec {
    padding: 155px 0 155px 42%;
    text-align: left;
}
.concept__sec:before {
    display: block;
    position: absolute;
    left: 17%;
    width: 174px;
    height: 238px;
    background: url("../images/base/cactus.svg") no-repeat 0 0;
    background-size: 100% auto;
}

/*===================================
	message__sec	
=====================================*/
.message__sec {
    padding: 80px 0 110px;
}
.message__sec .btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 30px;
}

/*===================================
	app__sec	
=====================================*/
.app__sec {
    padding: 73px 0 60px;
}
.download__list {
     display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 40px;
    margin-bottom: 50px;
}
.download__list li {
    width: 300px;
}
.download__list li a + img {
    margin-top: 38px;
}
.spec__list {
    width: 775px;
    margin: auto;
    padding-left: 65px;
    text-align: left;
}
.spec__list li {
    margin: .5em 0;
    padding-left: 1em;
    text-indent: -1em;
    line-height: 1.5;
}
.spec__list li:before {
    display: inline;
    content: "・";
}

/************************************************************************************
smaller than 768px
*************************************************************************************/
@media only screen and (max-width: 768px) {
	/*===================================
        visual	
    =====================================*/
	.visual .sp {
        display: block;
    }
    .visual .pc {
        display: none;
    }
    
    /*===================================
        content	
    =====================================*/
    .sec h2 {
        font-size: 4.3vw;
        line-height: 1.44;
        font-weight: 300;
    }
    .sec p {
        font-size: 3.1vw;
    }
    .sec .btn,.sec .btns {
        font-size: 3.4vw;
    }

    /*===================================
        concept__sec
    =====================================*/
    .concept__sec {
        padding: 11.9vw 0 11.9vw 31vw;
    }
    .concept__sec:before {
        left: 2.6%;
        width: 20.9vw;
        height: 28.7vw;
    }
    
    /*===================================
        message__sec	
    =====================================*/
    .message__sec {
        padding: 10.2vw 0 10.6vw;
    }
    .message__sec .btns {
        gap: 0 10px;
    }
    
    /*===================================
        app__sec	
    =====================================*/
    .app__sec {
        padding: 13.9vw 0 10.3vw;
    }
    .download__list {
         display: inherit;
        flex-wrap: inherit;
        justify-content: inherit;
        gap: 0;
        margin-bottom: 8.6vw;
    }
    .download__list li {
        width: 78vw;
        margin: auto;
    }
    .download__list li a + img {
        display: none;
    }
    .app__sec .download__list .and {
		display: none;
	}
	.android .app__sec .download__list .iOS {
		display: none;
	}
	.android .app__sec .download__list .and {
		display: block;
	}
    .spec__list {
        width: auto;
        margin: auto 2.6% 0;
        padding-left: 0;
    }

    
}


/************************************************************************************
smaller than 414px
*************************************************************************************/
@media screen and (max-width: 414px) {
    
}


/************************************************************************************
smaller than 320px
*************************************************************************************/
@media screen and (max-width: 320px) {
    
}




/************************************************************************************
2025.04.16 採用情報リンク
*************************************************************************************/
body {
    padding-bottom: 6em;
}
.footer nav li:nth-of-type(1) {
    position: fixed;
    z-index;
    100000;
    bottom: 0;
    left: 0;
}
.footer nav li:nth-of-type(1) {
    background: #eee;
    width: 100%;
    height: 3.5em;
    line-height: 3.5em;
    font-size: 1.8rem;
}
@media screen and (max-width: 414px) {
    body {
        padding-bottom: 10em;
    }
    .footer nav li:nth-of-type(1) {
        font-size: 1.4rem;
    }
  }