@charset "UTF-8";
/****************************************
contents
*****************************************/

body {
overflow-x: hidden;
}



/* トップページ：ローディング▼▼
------------------------------------------------------------ */
.loading {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
}
.loading.is-active {
  opacity: 0;
  visibility: hidden;
}
.loading-animation{
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  animation: slideOut 1s 1.25s ease forwards;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
}
.loading-animation.is-active {
  opacity: 1;
  visibility: visible;
}
@keyframes slideOut {
  0% {
    transform: translateY(0%);
    opacity:1;
  }
  100%{
    transform: translateY(-100%);
    opacity:0;
  }
}




/* トップページ：メインイメージ▼▼
------------------------------------------------------------ */
.mainimg.open{
  margin-bottom:15.0vw;
  background: url(../img/mainimg.jpg) no-repeat;
  background-size: cover;
  position:relative;
}
@keyframes fadeIn{
  0% {
    opacity:0;
  }
  100%{
    opacity:1;
    
  }
}
.mainimg.open .mainimg__text{
  position:absolute;
  left:40%;
  width:800px;
  -webkit-transform:translateX(-50%);
  transform:translateX(-50%);
  animation: anim01 0.8s 1.8s ease forwards;
  opacity:0;
}
@keyframes anim01{
  0% {
    top:40%;
    opacity:0;
  }
  100%{
    top:35%;
    opacity:1;
  }
}
.mainimg.open .mainimg__text p{
  font-weight:400;
  letter-spacing:0.1em;
  color:#000;
  line-height:2.2em;
  font-size:20px;
  font-size:2.0rem;
  font-weight:700;
  text-shadow: 0 0 1em #fff, 0 0 0.2em #fff;
}
.mainimg .scroll {
  width: 30px;
  position: absolute;
  bottom: 30px;
  left: 50%;
  margin-left: -15px;
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  -moz-animation: scroll-arrow 1s infinite alternate;
  -webkit-animation: scroll-arrow 1s infinite alternate;
  animation: scroll-arrow 1s infinite alternate;
}
@-moz-keyframes scroll-arrow {
  0% {
    -moz-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -moz-transform: translate(0, 100%);
    transform: translate(0, 100%);
  }
}
@-webkit-keyframes scroll-arrow {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%);
  }
}
@keyframes scroll-arrow {
  0% {
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -moz-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%);
  }
}
@media (max-width:1100px){
  .mainimg.open .mainimg__text{
    left:50%;
    width:90%;
    animation: anim01 0.8s 0.6s ease forwards;
  }
}
@media (max-width:768px){
  .mainimg.open .mainimg__text p{
    line-height:2.0em;
    font-size:16px;
    font-size:1.6rem;
  }
}




.index h2{
  font-size:50px;
  font-size:5.0rem;
  letter-spacing: 0.03em;
  line-height: 1.5;
}
.index h2::first-letter{
  font-size:55px;
  font-size:5.5rem;
  color: #e75970;
}
.index h2 span:nth-child(2){
  color: #f5cd46;
}
.index h2 span:nth-child(3){
  color: #f7e052;
}
.index h2 span:nth-child(4){
  color: #83c6b0;
}
.index h2 span:nth-child(5){
  color: #76a4ca;
}
.index h2 span:nth-child(6){
  color: #4180b8;
}
.index h2 span:nth-child(7){
  color: #c387bc;
}
.index h2 span:nth-child(8){
  color: #4180b8;
}
.index h2 span:nth-child(9){
  color: #76a4ca;
}
.index h2 span:nth-child(10){
  color: #83c6b0;
}
.index h2 span:nth-child(11){
  color: #f7e052;
}
@media (max-width:768px){
.index h2{
  font-size:40px;
  font-size:4.0rem;
  letter-spacing: 0.01em;
  line-height: 1.5;
}
.index h2::first-letter{
  font-size:45px;
  font-size:4.5rem;
  color: #e75970;
}
}



/* トップページ：コンセプト▼▼
------------------------------------------------------------ */
.concept{
  padding-bottom:15.0vw;
}
.concept .concept__wrap{
  display: flex;
}
.concept .concept__wrap .concept__text{
  width:50%;
  margin:0 auto;
  padding-top:4.6vw;
  padding-left:0;
  letter-spacing:0.06em;
}
.concept .concept__wrap .concept__text h2{
  position:relative;
  margin:0 auto;
  width:70%;
  padding-bottom:1.5vw;
  opacity:0;
}
.concept .concept__wrap.active .concept__text h2{
  animation: anim__concept 0.8s ease forwards;
}
.concept .concept__wrap .concept__text p{
  position:relative;
  margin:0 auto;
  width:70%;
  padding-bottom:2.0vw;
  font-size:16px;
  font-size:1.6rem;
  line-height:1.8em;
  opacity:0;
}
.concept .concept__wrap.active .concept__text p{
  animation: anim__concept 0.8s 0.4s ease forwards;
}
@keyframes anim__concept{
  0% {
    left:-50px;
    opacity:0;
  }
  100%{
    left:0;
    opacity:1;
  }
}
.concept .concept__wrap .concept__image{
  position:relative;
  width:50%;
  margin-left:auto;
  display: inline-block;
  overflow: hidden;
  padding:0;
  font-size:0;
}
.concept .concept__wrap .concept__image img{
  width:100%;
  height:auto;
  opacity:0;
}
.concept .concept__wrap.active .concept__image img{
  animation: fadeIn 1s 0.5s ease forwards;
}
.concept .concept__wrap.active .concept__image::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -100%;
  z-index: 1;
	background: linear-gradient(to right,#e75970,#f4d058,#f7e052,#83c6b0,#76a4ca,#4180b8,#c387bc);
  animation: marquee1 1s ease forwards;
}
@keyframes marquee1 {
  0%{
    transform: translateX(-100%);
    opacity:0;
  }
  50%{
    transform: translateX(100%);
    opacity:1;
  }
  100%{
    transform: translateX(200%);
    opacity:0;
  }
}
.concept .concept__wrap .concept__text .concept__button {
  position: relative;
  margin:0 auto;
  width:75%;
  opacity:0;
}
.concept .concept__wrap.active .concept__text .concept__button{
  animation: anim__concept 0.8s 0.6s ease forwards;
}
.concept .concept__wrap .concept__text button.btn {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight:700;
	background: #e75970;
  border: 2px solid #e75970;
  color: white;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 1.0rem 10.0rem;
  -webkit-transition: color 0.1s cubic-bezier(0.16, 0.08, 0.355, 1), background 0.1s cubic-bezier(0.16, 0.08, 0.355, 1);
  transition: color 0.1s cubic-bezier(0.16, 0.08, 0.355, 1), background 0.1s cubic-bezier(0.16, 0.08, 0.355, 1);
  display: inline-block;
  cursor: pointer;
  outline: none;
  vertical-align: middle;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.concept .concept__wrap .concept__text button.btn a {
  color: #fff;
}
.concept .concept__wrap .concept__text button.btn:hover {
  color: #fff;
}
.concept .concept__wrap .concept__text button.btn-arrow {
  position: relative;
  -webkit-transition: background-color 300ms ease-out;
  transition: background-color 300ms ease-out;
}
.concept .concept__wrap .concept__text button.btn-arrow span {
  display: inline-block;
  position: relative;
  -webkit-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  will-change: transform;
}
.concept .concept__wrap .concept__text button.btn-arrow:hover span {
  -webkit-transform: translate3d(-1rem, 0, 0);
  transform: translate3d(-1rem, 0, 0);
}
.concept .concept__wrap .concept__text button.btn-arrow svg {
  position: absolute;
  width: 1.1em;
  right: 0px;
  right: 0rem;
  opacity: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 300ms ease-out;
  transition: all 300ms ease-out;
  will-change: right, opacity;
}
.concept .concept__wrap .concept__text button.btn-arrow svg * {
  stroke-width: 5;
  stroke-color: transparent;
}
.concept .concept__wrap .concept__text button.btn-arrow:hover svg {
  opacity: 1;
  right: -2rem;
}

@media (max-width:768px){
  .concept{
    padding-bottom:19.0vw;
  }
  .concept .concept__wrap{
    display: block;
  }
  .concept .concept__wrap .concept__text,
  .concept .concept__wrap .concept__image{
    width:100%;
  }
  .concept .concept__wrap .concept__text h2,
  .concept .concept__wrap .concept__text p,
  .concept .concept__wrap .concept__text .concept__button{
    width:80%;
  }
  .concept .concept__wrap .concept__text p{
    padding-bottom:5.0vw;
  }
  .concept .concept__wrap .concept__text .concept__button{
    padding-bottom:10.0vw;
  }
  .concept .concept__wrap .concept__text button.btn {
    width:100%;
  }
  .concept .concept__wrap .concept__text h2{
    text-align:center;
  }
  .concept .concept__wrap .concept__text h2 img{
    max-height:40px;
  }
}





/* トップページ：サービス▼▼
------------------------------------------------------------ */
.service{
  padding-bottom:15.0vw;
}
.service .service__wrap h2{
  text-align:center;
  opacity:0;
}
.service .service__wrap.active h2{
  animation: anim__concept 2s ease forwards;
}
.service .service__wrap .service__list{
  width:100%;
  -webkit-transition:.6s ease-in-out;
  transition:.6s ease-in-out;
  -webkit-transform:translateY(50px);
  transform:translateY(50px);
  display: flex;
    flex-wrap: wrap;
}
.service .service__wrap .service__list li{
  position:relative;
  width:33.33%;
  padding-bottom:17.0vw;
	opacity:0;
	
}
.service .service__wrap.active .service__list li.serviceanim01{
  animation: anim__service 0.8s 0.2s ease forwards;
}
.service .service__wrap.active .service__list li.serviceanim02{
  animation: anim__service 0.8s 0.4s ease forwards;
}
.service .service__wrap.active .service__list li.serviceanim03{
  animation: anim__service 0.8s 0.6s ease forwards;
}
.service .service__wrap.active .service__list li.serviceanim04{
  animation: anim__service 0.8s 0.6s ease forwards;
}
@keyframes anim__service{
  0% {
    top:100px;
    opacity:0;
  }
  100%{
    top:0;
    opacity:1;
  }
}
.service .service__wrap .service__list li a{
  position:relative;
  display:block;
  width:100%;
  height:0;
  padding-bottom:50.666666%;
}
.service .service__wrap .service__list li a .service__text{
  position:absolute;
  top:55%;
  left:50%;
  width:80%;
  -webkit-transform:translateX(-50%);
  transform:translateX(-50%);
}
.service .service__wrap .service__list li a .service__text h3{
  padding-bottom:2.33333vw;
  text-align:center;
  color:#fff;
  font-size:30px;
  font-size:3.0rem;
  font-weight:700;
  letter-spacing: 0.05em;
	line-height: 1.5;
  text-shadow: 0 0 1em #000, 0 0 0.2em #000;
}
.service .service__wrap .service__list li a .service__text p{
  color:#fff;
  font-size:16px;
  font-size:1.6rem;
  line-height:1.7em;
  letter-spacing: 0.1em;
  text-shadow: 0 0 1em #000, 0 0 0.2em #000;
}
.service .service__wrap .service__list li a .service--image{
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  width:100%;
  height:202%;
  overflow:hidden;
}
.service .service__wrap .service__list li a .service--image img{
  width:100%;
  -webkit-transition:4s;
  transition:4s;
  -webkit-transition-timing-function:cubic-bezier(.075,.82,.165,1);
  transition-timing-function:cubic-bezier(.075,.82,.165,1);
}
.service .service__wrap .service__list li a .service--image .image--filter{
position:absolute;
  z-index:10;
  top:0;
  left:0;
  width:100%;
  height:100%;
  -webkit-transition:4s;
  transition:4s;
  -webkit-transition-timing-function:cubic-bezier(.075,.92,.165,1);
  transition-timing-function:cubic-bezier(.075,.92,.165,1);
  opacity:.5;
  background-color:#000;
}
.service .service__wrap .service__list li a:hover .service--image img{
  -webkit-transform:scale(1.1);
  transform:scale(1.1);
}
.service .service__wrap .service__list li a:hover .service--image .image--filter{
  opacity:0;
}

.service__Link{
	margin:auto;
	margin:40px 0 0 0;
	padding:40px;
	text-align:center;
	background-color:#f7e052;
}
.service__Link h3{
  font-size:2.0rem;
  font-weight:700;
  line-height:1.8em;
}

@media (max-width:1200px){
.service .service__wrap .service__list li a .service__text{
    top:5vw;
  }
  .service .service__wrap .service__list li a .service__text h3{
    padding-bottom:2.33333vw;
    font-size:26px;
    font-size:2.6rem;
    line-height:1.4em;
  }
}

@media (max-width:980px){
  .service .service__wrap .service__list li{
    position:relative;
		width:50%;
		overflow:hidden;
  }
}

@media (max-width:768px){
  .service{
  padding-bottom:35.0vw;
  }
  .service .service__wrap h2 img{
    max-height:31px;
  }
  .service .service__wrap .service__list{
    margin-bottom:0vw;
    display: block;
  }
  .service .service__wrap .service__list li{
    position:relative;
    width:100%;
  padding-bottom:0;
  }
  .service .service__wrap .service__list li a{
    padding-bottom:76.666666%
  }
  .service .service__wrap .service__list li a .service--image{
    width:100%;
    height:100%;
  }
  .service .service__wrap .service__list li a .service--image .image--filter{
    opacity:.3;
  }
  .service .service__wrap .service__list li a .service__text{
    top:16.33333vw;;
	}
	.service__Link{
	padding:40px;
}
}





/* トップページ：アンドモア▼▼
------------------------------------------------------------ */
.andmore{
  padding-bottom:15.0vw;
  text-align:center;
}
.andmore .andmore__wrap h2{
  text-align:center;
opacity:0;
}
.andmore .andmore__wrap.active h2{
  animation: anim__concept 2s ease forwards;
}
.andmore .andmore__wrap .andmore__item{
max-width:1200px;
  width:100%;
  overflow: hidden;
  margin:0 auto;
  position:relative;
  display: inline-block;
  padding:0;
  font-size:0;
  -webkit-transition:.6s ease-in-out;
  transition:.6s ease-in-out;
  -webkit-transform:translateY(50px);
  transform:translateY(50px);
}
.andmore .andmore__wrap.active .andmore__item::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 1;
  background: linear-gradient(to right,#e75970,#f4d058,#f7e052,#83c6b0,#76a4ca,#4180b8,#c387bc);
  opacity:1;
  animation: anim__andmore01 1s ease-in forwards;
}
@keyframes anim__andmore01{
  0%{
    transform: translateY(100%);
    opacity:0;
  }
  90%{
    opacity:1;
  }
  100%{
    transform: translateY(-100%);
    opacity:0;
  }
}
.andmore .andmore__wrap .andmore__item .andmore--image{
  background-color:#000;
  opacity:0;
}
.andmore .andmore__wrap.active .andmore__item .andmore--image{
  animation: fadeIn 1s 0.8s ease forwards;
}
.andmore .andmore__wrap .andmore__item a .andmore__text{
  position:absolute;
  z-index: 3;
  top:8.0vw;
  left:50%;
  width:80%;
  -webkit-transform:translateX(-50%);
  transform:translateX(-50%);
}
.andmore .andmore__wrap .andmore__item a .andmore__text h3{
  position: relative;
  padding-bottom:2.33333vw;
  opacity:0;
}
.andmore .andmore__wrap.active .andmore__item a .andmore__text h3{
  animation: anim__andmore02 1s 1s ease forwards;
}
.andmore .andmore__wrap .andmore__item a .andmore__text p{
  position: relative;
  text-align:center;
  color:#fff;
  font-size:16px;
  font-size:1.6rem;
  line-height:1.8em;
  font-weight:700;
  letter-spacing: 0.1em;
  text-shadow: 0 0 1em #000, 0 0 0.2em #000;
  opacity:0;
}
.andmore .andmore__wrap.active .andmore__item a .andmore__text p{
  animation: anim__andmore02 1s 1.2s ease forwards;
}
@keyframes anim__andmore02{
  0% {
    top:50px;
    opacity:0;
  }
  100%{
    top:0;
    opacity:1;
  }
}
.andmore .andmore__wrap .andmore__item img{
  max-width:100%;
}
.andmore .andmore__wrap .andmore__item a .andmore--image img{
  -webkit-transition:4s;
  transition:4s;
  -webkit-transition-timing-function:cubic-bezier(.075,.82,.165,1);
  transition-timing-function:cubic-bezier(.075,.82,.165,1);
}
.andmore .andmore__wrap .andmore__item a .andmore--image .image--filter{
  position:absolute;
  z-index:10;
  top:0;
  left:0;
  width:100%;
  height:100%;
  -webkit-transition:4s;
  transition:4s;
  -webkit-transition-timing-function:cubic-bezier(.075,.82,.165,1);
  transition-timing-function:cubic-bezier(.075,.12,.165,1);
  opacity:0.15;
  background-color:#000;
}
.andmore .andmore__wrap .andmore__item a:hover .andmore--image img{
  -webkit-transform:scale(1.1);
  transform:scale(1.1);
}
.andmore .andmore__wrap .andmore__item a:hover .andmore--image .image--filter{
  opacity:0;
}

@media (max-width:768px){
  .andmore .andmore__wrap .andmore__item a .andmore__text{
    position:relative;
    z-index: 3;
    top:0;
    left:50%;
    width:80%;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%);
  }
  .andmore .andmore__wrap h2 img{
    max-height:26px;
  }
  .andmore .andmore__wrap .andmore__item a .andmore__text p{
    position: relative;
    color:#000;
    text-align:left;
    text-shadow: none;
    letter-spacing: 0.05em;
    display: block;
  }
  .andmore .andmore__wrap .andmore__item a .andmore--image{
    width:80%;
    margin: 5% auto;
    overflow:hidden;
  }
  .andmore .andmore__wrap .andmore__item a .andmore--image .image--filter{
    display: none;
  }
}