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

div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea,
p, blockquote, th, td {
	margin: 0;
	padding: 0;
}

*, html {
 font-size: 2.6667vw;
 /* font-size: 2.45vw; */

}

li {
  list-style-type: none;
}

body {
  color: #FFF;
	font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Arial,Helvetica,Sans-Serif;
	line-height: 1.75;
  margin: 0;
}

.only-sp {
  display: block;
}

.only-pc {
  display: none;
}

p {
  font-size: 1.4rem;
  line-height: 1.75;
  font-weight: 300;
}

span,
strong { 
  font-size: inherit; 
}

img,
source {
  display: block;
}

.wrapper {
  overflow: hidden;
  background-color: transparent;
}

.inner {
  height: 100%;
}

section{
  position: relative;
  padding: 18vw 0!important;
}

.label-s {
  display: block;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

.label-s img {
  width: 100%;
}

.section-title {
  height: auto;
  width: 51.2vw;
  margin-bottom: 10vw;
  position: relative;
  margin-left: auto;
  margin-right: auto
}

.section-title img {
  height: auto!important;
  width: 100%!important;
}

/************************************************************************************

flex

************************************************************************************/
.flex {
  display: block;
}

.flex-bet {
  justify-content: space-between;
}

.flex-start {
  justify-content: flex-start;
}


/************************************************************************************

headr 

************************************************************************************/
/* .header {
  background-color: transparent;
  position: relative;
  z-index: 2;
}

.header {
  height: 12.8vw;
}

.header .logo {
  width: auto;
  height: 100%;
} */



/************************************************************************************

common

************************************************************************************/
.container {
  position: relative;
  margin-top: 0;
  z-index: 1;
}

.label {
  width: 100%;
  margin-bottom: 0;
}

.label img {
  width: 100%;
}


/* 画像ループ */
.loop_wrap.only-pc,
.loop_wrap_right.only-pc {
  display: none;
}

.loop_wrap.only-sp,
.loop_wrap_right.only-sp {
  display: block;
}

.loop_wrap {
  width: 13.33vw;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: .1rem;
}

#mv .loop_wrap {
  width: 17.33vw;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 1vw;
}

.loop_wrap_right {
  width: 13.33vw;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: .1rem;
}

.loop_wrap img,
.loop_wrap_right img {
  width: 100%;
  height: auto;
}

@keyframes loop {
  0% {
    transform: translateY(100%);
  }
  to {
    transform: translateY(-100%);
  }
}

@keyframes loop2 {
  0% {
    transform: translateY(0);
  }
  to {
    transform: translateY(-200%);
  }
}

.loop_wrap img:first-child {
  animation: loop 50s -25s linear infinite;
}

#feature .loop_wrap img:first-child,
#gallery02 .loop_wrap img:first-child {
  animation-play-state: paused;
}

.loop_wrap img:last-child {
  animation: loop2 50s linear infinite;
}

#feature .loop_wrap img:last-child,
#gallery02 .loop_wrap img:last-child{
  animation-play-state: paused;
}

@keyframes loop-right {
  0% {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(100%);
  }
}

@keyframes loop-right2 {
  0% {
    transform: translateY(-200%);
  }
  to {
    transform: translateY(0);
  }
}

.loop_wrap_right img:first-child {
  animation: loop-right 50s -25s linear infinite;
  animation-play-state: paused;
}

.loop_wrap_right img:last-child {
  animation: loop-right2 50s linear infinite;
  animation-play-state: paused;
}

#feature .loop_wrap.only-pc {
  display: none;
}


#feature .loop_wrap.only-sp {
  display: block;
  width: 13.33vw;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: .1rem;
}


@keyframes loop-f {
  0% {
    transform: translateY(100%);
  }
  to {
    transform: translateY(-100%);
  }
}

@keyframes loop2-f {
  0% {
    transform: translateY(0);
  }
  to {
    transform: translateY(-200%);
  }
}

@keyframes loop3-f {
  0% {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(-300%);
  }
}


#feature .loop_wrap img:nth-child(1) {
  animation: loop-f 160s -80s linear infinite;
  animation-play-state: paused;
}

#feature .loop_wrap img:nth-child(2){
  animation: loop2-f 160s  linear infinite;
  animation-play-state: paused;
}

/* 画像ループ end */


.imgWrap,
.imgWrap img{
  width: 100%;
}

.imgWrap.curtain span {
  display: block;

}


/************************************************************************************

mv

************************************************************************************/
#mv {
  padding: 0!important;
  height: 130vw;
  position: relative;
  z-index: 1;
}

#mv img {
  width: 100%;
}

#mv .inner {
  width: 82.4vw;
  height: auto;
  background-color: #000;
  position: relative;
  padding: 0;
  box-sizing: border-box;
  margin: 0 0 0 auto;
  padding-bottom: 6vw;
  height: 100%;
}

#mv .mv-label {
  width: 3.73vw;
  position: absolute;
  top: 2vw;
  left: 2vw;
}

#mv .mv-img {
  position: absolute;
  top: 5vw;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
}

#mv .mv-final {
  position: absolute;
  top: 6vw;
  left:  8vw;
  width: 85.44%;
  z-index: 1;
}




#jap1,
#member {
  transform-origin: center center;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-property: transform, opacity;
  /*transform: scale(0);*/
  opacity: 0;
}

#jap1 {
  width: 51.5%;
  position: absolute;
  left: -9.6%;
  top: 0;
  margin-top: -1.3vw
}

#member {
  width: 113.2%;
  margin: -1.4vw auto 0;
  position: relative;
  transform: translateX(-50%) scale(0);
  left: 50%;
  transition-delay: 1s;
  transition-duration: 0.8s;
}

#member.in {
  transform: translateX(-50%) scale(1);  
  opacity: 1;
}

#jap1.in {
  transform: scale(1);
  opacity: 1;
}

#present-bnr {
  padding: 0!important;
  position: relative;
  z-index: 2;
}

.present-bnr {
  background-color: #ca8600;
  width: 100%;
  padding: 2rem 0;
  box-sizing: border-box;
  position: relative;
}

.present-bnr .text {
  width: 65.33vw;
  margin: 0 auto;
  margin-bottom: 2rem;
}


/* キャンペーン終了後 */
.present-bnr::after {
  content: '';
  width: 100%;
  height: 100%;
  background: rgba(202,134,0,0.7);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

#present-bnr .campaign-close{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
  color: #333;
  font-size: 16px;
  z-index: 3;
  font-weight: bold;
  width: 100%;
}

a.close {
  pointer-events: none;
  opacity: .3;
}

.close-note {
  width: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 3;
}
/* キャンペーン終了後　end */

#present-bnr .btn {
  width: 13.67vw;
  max-width: 82px;
	margin: 0 auto;
	display: block;
}

.present-bnr .btn img {
  width: 100%;
}

.present-bnr .btn a:hover {
  opacity: .7;
}




/************************************************************************************

concept

************************************************************************************/
#concept {
  position: relative;
  padding: 0!important;
  overflow: hidden;
}

#concept .inner {
  background-color: #000;
  position: relative;
  z-index: 2;
  padding: 8vw 0 18vw;
}

#concept .textBox {
  font-size: 1.3rem;
  width: 80%;
  margin: 0 auto;
  position: relative;
}

.glowAnime {
  font-size: 10rem;
  font-family: "bebas-neue-pro", sans-serif;
  font-weight: 600;
  font-style: normal;
  text-align: center;
}

/*========= 光りながら出現させるためのCSS ===============*/

.glowAnime span{opacity: 0;}

/*アニメーションで透過を0から1に変化させtext-shadowをつける*/
.glowAnime.glow span{ animation:glow_anime_on 1.8s ease-out infinite; }

@keyframes glow_anime_on{
	0% { opacity:0; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
	50% { opacity:1;text-shadow: 0 0 3px #fff,0 0 6px #fff; }
	100% { opacity:1; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
}

#concept .mainCopy .item {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.05em;
  text-align: justify;
  text-justify: inter-ideograph;
  font-feature-settings: "palt";
  display: block;
  width: 100%;
  margin-bottom: 0.5em;
  overflow: hidden;
  transition: all 1.2s 1.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-property: transform, opacity;
  transform: translateY(5rem);
  opacity: 0;
  word-break:break-all; 
  text-justify:inter-character;
  word-wrap:break-word;
  overflow-wrap:break-word;
}

#concept .mainCopy .item:nth-child(2) {
  margin-bottom: 9vw;
}

#concept .mainCopy .itemInner {
  text-align: center;
  text-justify: inter-ideograph;
  width: 100%;
  margin: 0;
  display: block;
  transition: all 1.2s 1.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-property: transform, opacity;
  transform: translateY(5rem);
}

#concept .mainCopy .item.active {
  transform: translateY(0);
  opacity: 1;
}

#concept .mainCopy .item.active .itemInner {
  transform: translateY(0);
}

#concept .textBox strong {
  color: #fff100;
}

#concept .concept-img {
  width: 80%;
  margin: 5vw auto 0;
  position: relative;
  z-index: 1;
  animation-delay: 2s!important;
}

#concept .concept-img img {
  width: 100%;
}

#concept .concept-img .loop-img {
  width: 32.01%;
  position: absolute;
  right: -8.6%;
  bottom: -26.42%;
  z-index: 2;
  animation: spin 5.5s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/************************************************************************************

feature

************************************************************************************/
#feature{
  padding: 0!important;
  overflow: hidden;
}

#feature .inner {
  padding: 18vw 0!important;
  background-color: #000;
}

#feature .feature-content {
  color: #FFF;
  position: relative;
  box-sizing: content-box;
}

#feature .feature-content .feature-label {
  font-size: 1.55rem;
  font-weight: bold;
  margin-bottom: 1.87vw;
  line-height: 1.5;
}

#feature .feature-content .feature-text {
  font-size: 1.4rem;
  line-height: 1.75;
}

#feature .feature-item {
  position: relative;
}

#feature .feature-item img {
  width: 100%;
}

#feature .feature-item:nth-child(1) {
  width: 83.47vw;
}

#feature .feature-item:nth-child(1) .feature-img {
  width: 75.73vw;
}

#feature .feature-item:nth-child(1) .feature-content {
  margin: 0 0 0 auto;
  width: 58.4vw;
  padding: 8vw 0 8vw 8vw;
  font-feature-settings: 'palt';
}

#feature .feature-item:nth-child(1) .feature-content::before {
  content: '';
  width: 1px;
  height: 100%;
  background-color: #FFF;
  position: absolute;
  top: 0;
  left: 4vw;
}

#feature .feature-item:nth-child(1) .feature-content::after {
  content: '';
  width: 100%;
  height: 1px;
  background-color: #FFF;
  position: absolute;
  bottom: 4vw;
  left: 0;
}



#feature .feature-item:nth-child(2) {
  width: 79.47vw;
  margin: 48vw 0 0 auto;
  display: flex;
}

#feature .feature-item:nth-child(2) .feature-img {
  width: 37.07vw;
}

#feature .feature-item:nth-child(2) .feature-content {
  margin: 0 0 0 auto;
  width: 37.87vw;
  padding: 8vw 4.27vw 0 0;
  margin-top: 25.87vw;
}

#feature .feature-item:nth-child(2) .feature-content::before {
  content: '';
  width: 100%;
  height: 1px;
  background-color: #FFF;
  position: absolute;
  top: 4vw;
  right: 0;
}

/* #feature .feature-item:nth-child(2) .feature-label {
  letter-spacing: .01em;
} */

#feature .feature-item:nth-child(2) .feature-icon01 {
  position: absolute;
  width: 29.33vw;
  top: -24vw;
  left: 0;
}

#feature .feature-item:nth-child(2) .feature-icon01 .glitch {
  font-family: "bebas-neue-pro", sans-serif;
  font-weight: 600;
  font-style: normal;
  position: relative;
  font-size: 4rem;
  color: #fff100;
}


@keyframes noise-anim {
  0% {
    clip: rect(49px, 9999px, 74px, 0);
  }
  5% {
    clip: rect(4px, 9999px, 95px, 0);
  }
  10% {
    clip: rect(44px, 9999px, 28px, 0);
  }
  15% {
    clip: rect(30px, 9999px, 100px, 0);
  }
  20% {
    clip: rect(27px, 9999px, 77px, 0);
  }
  25% {
    clip: rect(58px, 9999px, 40px, 0);
  }
  30% {
    clip: rect(70px, 9999px, 51px, 0);
  }
  35% {
    clip: rect(91px, 9999px, 48px, 0);
  }
  40% {
    clip: rect(1px, 9999px, 88px, 0);
  }
  45% {
    clip: rect(33px, 9999px, 3px, 0);
  }
  50% {
    clip: rect(78px, 9999px, 9px, 0);
  }
  55% {
    clip: rect(71px, 9999px, 78px, 0);
  }
  60% {
    clip: rect(62px, 9999px, 48px, 0);
  }
  65% {
    clip: rect(78px, 9999px, 6px, 0);
  }
  70% {
    clip: rect(34px, 9999px, 71px, 0);
  }
  75% {
    clip: rect(76px, 9999px, 35px, 0);
  }
  80% {
    clip: rect(60px, 9999px, 15px, 0);
  }
  85% {
    clip: rect(95px, 9999px, 24px, 0);
  }
  90% {
    clip: rect(13px, 9999px, 78px, 0);
  }
  95% {
    clip: rect(27px, 9999px, 58px, 0);
  }
  100% {
    clip: rect(67px, 9999px, 14px, 0);
  }
}

#feature .feature-item:nth-child(2) .feature-icon01 .glitch:after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 red;
  top: 0;
  color: #fff100;
  background: transparent;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim 2s infinite linear alternate-reverse;
}

@keyframes noise-anim-2 {
  0% {
    clip: rect(18px, 9999px, 3px, 0);
  }
  5% {
    clip: rect(57px, 9999px, 94px, 0);
  }
  10% {
    clip: rect(39px, 9999px, 25px, 0);
  }
  15% {
    clip: rect(40px, 9999px, 83px, 0);
  }
  20% {
    clip: rect(77px, 9999px, 68px, 0);
  }
  25% {
    clip: rect(29px, 9999px, 37px, 0);
  }
  30% {
    clip: rect(70px, 9999px, 27px, 0);
  }
  35% {
    clip: rect(64px, 9999px, 17px, 0);
  }
  40% {
    clip: rect(58px, 9999px, 86px, 0);
  }
  45% {
    clip: rect(31px, 9999px, 64px, 0);
  }
  50% {
    clip: rect(76px, 9999px, 93px, 0);
  }
  55% {
    clip: rect(39px, 9999px, 88px, 0);
  }
  60% {
    clip: rect(36px, 9999px, 65px, 0);
  }
  65% {
    clip: rect(41px, 9999px, 9px, 0);
  }
  70% {
    clip: rect(8px, 9999px, 40px, 0);
  }
  75% {
    clip: rect(40px, 9999px, 94px, 0);
  }
  80% {
    clip: rect(41px, 9999px, 98px, 0);
  }
  85% {
    clip: rect(66px, 9999px, 99px, 0);
  }
  90% {
    clip: rect(39px, 9999px, 91px, 0);
  }
  95% {
    clip: rect(93px, 9999px, 37px, 0);
  }
  100% {
    clip: rect(84px, 9999px, 85px, 0);
  }
}

#feature .feature-item:nth-child(2) .feature-icon01 .glitch:before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 blue;
  top: 0;
  color: #fff100;
  background: transparent;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim-2 3s infinite linear alternate-reverse;
}


#feature .feature-item:nth-child(2) .feature-icon01 .glitch02 {
  font-family: "bebas-neue-pro", sans-serif;
  font-weight: 600;
  font-style: normal;
  position: relative;
  font-size: 4rem;
  color: #000;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff100;
}

@keyframes noise-anim02 {
  0% {
    clip: rect(49px, 9999px, 74px, 0);
  }
  5% {
    clip: rect(4px, 9999px, 95px, 0);
  }
  10% {
    clip: rect(44px, 9999px, 28px, 0);
  }
  15% {
    clip: rect(30px, 9999px, 100px, 0);
  }
  20% {
    clip: rect(27px, 9999px, 77px, 0);
  }
  25% {
    clip: rect(58px, 9999px, 40px, 0);
  }
  30% {
    clip: rect(70px, 9999px, 51px, 0);
  }
  35% {
    clip: rect(91px, 9999px, 48px, 0);
  }
  40% {
    clip: rect(1px, 9999px, 88px, 0);
  }
  45% {
    clip: rect(33px, 9999px, 3px, 0);
  }
  50% {
    clip: rect(78px, 9999px, 9px, 0);
  }
  55% {
    clip: rect(71px, 9999px, 78px, 0);
  }
  60% {
    clip: rect(62px, 9999px, 48px, 0);
  }
  65% {
    clip: rect(78px, 9999px, 6px, 0);
  }
  70% {
    clip: rect(34px, 9999px, 71px, 0);
  }
  75% {
    clip: rect(76px, 9999px, 35px, 0);
  }
  80% {
    clip: rect(60px, 9999px, 15px, 0);
  }
  85% {
    clip: rect(95px, 9999px, 24px, 0);
  }
  90% {
    clip: rect(13px, 9999px, 78px, 0);
  }
  95% {
    clip: rect(27px, 9999px, 58px, 0);
  }
  100% {
    clip: rect(67px, 9999px, 14px, 0);
  }
}

#feature .feature-item:nth-child(2) .feature-icon01 .glitch02:after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 transparent;
  top: 0;
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff100;
  background: transparent;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim02 2s infinite linear alternate-reverse;
}

@keyframes noise-anim-202 {
  0% {
    clip: rect(18px, 9999px, 3px, 0);
  }
  5% {
    clip: rect(57px, 9999px, 94px, 0);
  }
  10% {
    clip: rect(39px, 9999px, 25px, 0);
  }
  15% {
    clip: rect(40px, 9999px, 83px, 0);
  }
  20% {
    clip: rect(77px, 9999px, 68px, 0);
  }
  25% {
    clip: rect(29px, 9999px, 37px, 0);
  }
  30% {
    clip: rect(70px, 9999px, 27px, 0);
  }
  35% {
    clip: rect(64px, 9999px, 17px, 0);
  }
  40% {
    clip: rect(58px, 9999px, 86px, 0);
  }
  45% {
    clip: rect(31px, 9999px, 64px, 0);
  }
  50% {
    clip: rect(76px, 9999px, 93px, 0);
  }
  55% {
    clip: rect(39px, 9999px, 88px, 0);
  }
  60% {
    clip: rect(36px, 9999px, 65px, 0);
  }
  65% {
    clip: rect(41px, 9999px, 9px, 0);
  }
  70% {
    clip: rect(8px, 9999px, 40px, 0);
  }
  75% {
    clip: rect(40px, 9999px, 94px, 0);
  }
  80% {
    clip: rect(41px, 9999px, 98px, 0);
  }
  85% {
    clip: rect(66px, 9999px, 99px, 0);
  }
  90% {
    clip: rect(39px, 9999px, 91px, 0);
  }
  95% {
    clip: rect(93px, 9999px, 37px, 0);
  }
  100% {
    clip: rect(84px, 9999px, 85px, 0);
  }
}

#feature .feature-item:nth-child(2) .feature-icon01 .glitch02:before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 transparent;
  top: 0;
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff100;
  background: transparent;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim-202 3s infinite linear alternate-reverse;
}

#feature .feature-item:nth-child(2) .feature-icon01 .glitch:nth-child(2) {
  top: -41px;
  left: 5px;
}

#feature .feature-item:nth-child(2) .feature-icon01 .glitch02 {
  top: -81px;
  left: 10px;
}




#feature .feature-item:nth-child(3) {
  width: 78.93vw;
  margin: 35.47vw auto 0 0;
  display: flex;
}

#feature .feature-item:nth-child(3) .feature-img {
  width: 32.8vw;
}

#feature .feature-item:nth-child(3) .feature-content {
  margin: 0 0 0 auto;
  width: 38.4vw;
  padding: 8vw 0 0 8vw;
  margin-top: 13.07vw;
}

#feature .feature-item:nth-child(3) .feature-content::before {
  content: '';
  width: 100%;
  height: 1px;
  background-color: #FFF;
  position: absolute;
  top: 4vw;
  left: 0;
}




#feature .feature-item:nth-child(4) {
  width: 76.27vw;
  margin: 20vw 0 0 auto;
}

#feature .feature-item:nth-child(4) .feature-img {
  width: 100%;
}

#feature .feature-item:nth-child(4) .feature-content {
  margin: 0 0 0 auto;
  width: 58.4vw;
  padding: 8vw 0 8vw 8vw;
  font-feature-settings: 'palt';
  margin: 0 auto 0 0;
}

#feature .feature-item:nth-child(4) .feature-content::before {
  content: '';
  width: 1px;
  height: 100%;
  background-color: #FFF;
  position: absolute;
  top: 0;
  left: 4vw;
}

#feature .feature-item:nth-child(4) .feature-content::after {
  content: '';
  width: 100%;
  height: 1px;
  background-color: #FFF;
  position: absolute;
  bottom: 4vw;
  left: 0;
}




#feature .feature-item:nth-child(5) {
  width: 76vw;
  margin: 35.2vw auto 0 0;
}

#feature .feature-item:nth-child(5) .feature-img {
  width: 100%;
  z-index: 2;
  position: relative;
}

#feature .feature-item:nth-child(5) .feature-content {
  margin: 0 0 0 auto;
  width: 58.67vw;
  padding: 8vw 0 0 8vw;
  font-feature-settings: 'palt';
  margin: 0 auto 0 0;
  z-index: 1;
  position: relative;
}

#feature .feature-item:nth-child(5) .feature-content::before {
  content: '';
  width: 1px;
  height: 120%;
  background-color: #FFF;
  position: absolute;
  bottom: 0;
  left: 4vw;
}






/*スクロールボトム*/
.slideIn-bottom {
  opacity: 0;
}

.slideIn-bottom.active {
animation: slideInBottom 1s cubic-bezier(0.25, 1, 0.5, 1)  1 forwards;
animation-delay: 0.6s!important; 
}

@keyframes slideInBottom {
0% {
  transform: translateY(20%);
  opacity: 0;
}
100% {
  transform: translateY(0);
}
40%,100% {
  opacity: 1;
}
}





/************************************************************************************

costume-aw

************************************************************************************/
#costume.costume-aw {
  padding-top: 0!important;
}

#costume.costume-aw .label {
  transform: translateY(-50%);
}

#costume.costume-aw .cosItem .itemText {
  background-color: #9696a5;
}

#costume.costume-aw .cosItem .itemText::after {
  content: '';
  width: 100%;
  height: 5.33vw;
  background-color: #f0f0f5;
  position: absolute;
  top: 0;
  left: 0;
}



/************************************************************************************

gallery

************************************************************************************/
/* セクション共通2024 */
#gallery,
#gallery02 {
  padding: 0!important;
  background-color: transparent;
  overflow: hidden;
}

#gallery {
  padding-bottom: 10vw!important;
}

#gallery02 {
  padding-top: 10vw!important;
  margin-top: -10vw!important;
}

#concept .inner,
#feature .inner,
#gallery .swiper-container,
#gallery02 .swiper-container{
 width: calc( 100vw - 13.33vw);
}

#gallery .swiper-container,
#gallery02 .swiper-container {
  background-color: #000;
  padding: 18vw 0;
}

#feature .inner,
#gallery02 .swiper-container{
  margin: 0 0 0 auto;
}

#concept,
#gallery .swiper-container{
  margin: 0;
}

#gallery .label {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10vw;
  width: 80%;
}

#gallery .label-s,
#gallery02 .label-s {
  margin-bottom: 7.5vw;
  width: 50%;
}


#gallery_slider,
#gallery_slider02 {
  z-index: 2;
}

.swiper-slide img {
  width: 60.5vw;
  margin: 0 auto;
}

.swiper-button-prev,
.swiper-button-next {
  width: 17vw;
  height: 100%;
  margin: 0;
  display: block;
  background-repeat: no-repeat;
  background-size: 4vw 4vw;
  top: 0;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  display: none;
}

.swiper-button-prev {
  background-image: url("../images/wing/ico-prev-02.svg");
  background-position: right center;
  left: 0;
}

.swiper-button-next {
  background-image: url("../images/wing/ico-next-02.svg");
  background-position: left center;
  right: 0;
}


#gallery_slider02 .swiper-button-prev {
  background-image: url("../images/wing/ico-prev-02.svg");
  background-position: right center;
  left: 0;
}

#gallery_slider02 .swiper-button-next {
  background-image: url("../images/wing/ico-next-02.svg");
  background-position: left center;
  right: 0;
}


/************************************************************************************

present

************************************************************************************/
#profile .inner {
  width: 85%;
  margin-right: auto;
  margin-left: auto;
  background-image: url(../../asset/images/wing/profile-bg-sp.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  padding: 175.87vw 2rem 5rem;
  box-sizing: border-box;
  margin: 11.2vw auto;
}

#profile .inner .name-kawata {
  width: 37.6vw;
  margin-bottom: 8.53vw;
}

.profile-career {
  font-size: 1.9rem;
  color: #727171;
  padding-bottom: 2.4vw;
  margin: 12.53vw 0 6.4vw;
  border-bottom: solid 1px #727171;
  font-weight: 300;
}

.profile-wrap .profile-content {
  justify-content: flex-start;
  font-size: 1.4rem;
  color: #727171;
}

.profile-wrap .profile-content .profile-label,
.profile-wrap .profile-content .profile-body {
  display: inline;
}

.profile-wrap .profile-content .profile-label {
  margin-right: 1rem;
}

.profile-wrap.career .profile-content {
  margin-bottom: 5.53vw;
  display: block;
}

.profile-wrap.career .profile-content .profile-label,
.profile-wrap.career .profile-content .profile-body {
  display: block;
}

.profile-wrap.career .profile-content:last-child {
  margin-bottom: 0;
}

#profile .section-title-box {
  position: absolute;
  top: -11.2vw;
  left: -7.5vw;
}

.profile-img-item {
  position: absolute;
}

.profile-img-item img {
  width: 100%;
}

.profile-img-item:nth-child(1) {
  width: 40.8vw;
  top: 15.73vw;
  right: 37.87vw;
  z-index: 2;
}

.profile-img-item:nth-child(2) {
  width: 70.4vw;
  top: 27.73vw;
  right: -7.5vw;
  z-index: 1;
}

.profile-img-item:nth-child(3) {
  width: 50.67vw;
  top: 129.87vw;
  left: -7.5vw;
  z-index: 2;
}

/************************************************************************************

present

************************************************************************************/
#present-header {
  background-color: #ca8600;
  width: 100%;
  padding: 10vw 0!important;
  position: relative;
  margin-top: -2vw;
}

#present-header .section-title {
  margin-bottom: 8vw;
}

#present-header .inner {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
}

#present-header img {
  width: 100%;
}

#present-header label {
  width: 3.6vw;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

#present {
  padding: 10vw 0;
  color: #FFF;
  background-color: #000;
}

#present .section-title {
  width: 49.33vw;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

#present .section-title img {
  width: 100%!important;
  height: auto!important;
}

#present .section-title .jap {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translateY(70%) translateX(40%);
}

#present .section-title .jap span {
  font-size: 1.8rem;
  line-height: 1;
}

#present img {
  width: 100%;
}

#present .inner {
  width: 85%;
  margin-right: auto;
  margin-left: auto;
}

#present .flex {
  width: 100%;
  margin-bottom: 18vw;
}

#present .date {
  margin-bottom: 5vw;
  width: 90%;
}

#present .message {
  font-size: 2.3rem;
  font-size: 1.7rem;
  font-weight: bold;
  margin-bottom: 10vw;
  text-align: center;
}

#present .label-s {
  margin-bottom: 7vw;
}

#present .howList {
  margin-bottom: 10vw;
}

#present .howList.web {
  margin-bottom: 5vw;
}

#present .howList li {
  margin-bottom: 5vw;
  position: relative;
  display: flex;
}

#present .howList li .number {
  width: 13%;
  margin-right: 5vw;
  display: block;
}

#present .howList li .list-text {
  width: 80%;
  transform: translateY(-0.7rem);
}

#present .howList li:last-child {
  margin-bottom: 0;
}

#present .presentList li {
  margin-bottom: 7vw;
}



#present .presentList li:last-child {
  margin-bottom: 0;
}

#present .presentList .textBox {
  width: auto;
  position: relative;
  background-color: #fff100;
  padding: 3vw;
  color: #000;
}


#present .presentList .textBox .exclusive {
  width: 50%;
  margin-top: 5vw;
}

.how-title {
  margin-bottom: 10vw;
}

.how-list-title {
  font-size: 1.7rem;
  color: #fff100;
  font-weight: bold;
  border-bottom: solid 2px #fff100;
  padding-bottom:5px;
  margin-bottom: 5px;
  margin-top: 18vw;
}

.how-caution {
  display: block;
  font-size: 0.888rem;
}


.how-caution.caution01 {
  margin-bottom: 30px;
  text-align: left;
}


#present .howList li .list-text a {
  font-size: 1.4rem;
  font-weight: bold;
  border-bottom: solid 1px #fff100;
  color: #fff100;
  text-decoration:none
}

#present .howList li .list-text a:hover {
  opacity: .7;
}


#btnGroup.smooth .btn {
  padding-top: 42.42%;
}

.caution02 {
  width: 85%;
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/************************************************************************************

btnGroup

************************************************************************************/
section#btnGroup02{
  background-color: #fff100;
  padding: 10vw 0!important;
}

section#btnGroup02 .inner {
  width: 70%;
}

#btnGroup .inner,
#btnGroup02 .inner  {
  width: 85%;
  margin-left: auto;
  margin-right: auto;
}

#btnGroup .inner.apply-btn {
  margin-bottom: 0;
}

#btnGroup .btn,
#btnGroup02 .btn {
  position: relative;
	width: 100%;
  height: auto;
	margin: 0 auto;
	display: block;
	overflow: hidden;
	cursor: pointer;
  padding-top: 21.21%;
}

#btnGroup .btn:first-child,
#btnGroup02 .btn:first-child {
  margin-bottom: 8vw;
}

#btnGroup .btn img,
#btnGroup02 .btn img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	display: block;
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}

#btnGroup .btn img:nth-of-type(1),
#btnGroup02 .btn img:nth-of-type(1) {
	opacity: 0;
}

#btnGroup .btn:hover img:nth-of-type(2) ,
#btnGroup02 .btn:hover img:nth-of-type(2){
	opacity: 0;
}

#btnGroup .btn:hover img:nth-of-type(1),
#btnGroup02 .btn:hover img:nth-of-type(1) {
	opacity: 1;
}

.presentImg {
  max-width: 710px;
  margin: 0 auto 18vw;
}

#present #btnGroup  {
  background: transparent;
  padding-top: 0;
}

#btnGroup.gal {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}


#present .howList.web {
  margin-bottom: 2vw;
}


/************************************************************************************

footer

************************************************************************************/
#footer {
  padding: 50px;
  background-color: #dee6eb;
}
#footer .logo {
  width: 154px;
  margin: 0 auto 25px;
  display: block;
}
#footer .copyright {
  color: #808080;
  font-size: 12px;
  font-weight: 300;
  text-align: center;
  margin: 0;
  display: block;
}



@keyframes tickerBGpc {
  0% {
    left: 100%;
  }
  100% {
    left: -1120px;
  }
}



@media screen and (min-width:768px){
  *, html {
    font-size: 62.5%;
  }
  
  .flex {
    display: flex;
  }
  
  .label {
    width: 80%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
/*    left: 50%;
    transform: translateX(-50%);*/
  }
  
  section {
    padding-top: 10vw!important;
    padding-bottom: 10vw!important;
  }

  /* #mv .mv02.only-sp {
    display: none;
  }
  
  #mv .mv02.only-pc {
    display: block;
  } */
  

  .close-note {
  width: 298px;
}
  
  #concept .label {
    width: 100%;
  }
  
  #costume.costume-aw .label {
    transform: translateY(-50%);
  }
  
  /* #gallery::before,
  #gallery::after,
  #gallery02::before,
  #gallery02::after {
    width: 1120px;
    height: 186px;
    animation: tickerBGpc 30s linear infinite;
  } */
  
  #concept::after {
    bottom: 28vw;
  }
  
  #concept .textBox {
    width: 45em;
  }
  
  #concept .mainCopy {
    transform: translateX(1em);
  }
  
  #concept .mainCopy .item {
    font-size: 2.6rem;
  }
  
  #concept .mainCopy .item,
  #concept .mainCopy .itemInner {
    transition: all 1.2s 0s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  
  #costume {
    padding-top: 100px;
  }
  
  .cosItem .itemText::after {
    height: 20px;
  }
  
  .cosItem {
    padding-bottom: 0;
    padding-top: 50px;
    margin-bottom: 50px;
  }
  
  .cosItem figure {
    width: 300px;
    top: 0;
  }
  
  .cosItem .itemText {
    height: 300px;
    box-sizing: content-box;
  }
  
  .itemL .itemText {
    margin-right: 40vw;
    padding-right: 7vw;
    padding-left: 10vw;
    padding-bottom: 0;
  }
  
  .itemR .itemText {
    margin-left: 40vw;
    padding-left: 7vw;
    padding-right: 10vw;
    padding-bottom: 0;
  }
  
  .itemBody h2 {
    margin-bottom: 43px;
  }
  
  .itemL figure {
    right: auto;
    left: 60vw;
  }
  
  .itemR figure {
    left: auto;
    right: 60vw;
  }
  
  #costume.costume-aw .cosItem .itemText::after {
    height: 20px;
  }
  
  /* #gallery,
  #gallery02{
    padding: 26.5vw 0!important;
  }
  
   */

  
  
  /* #gallery::before,
  #gallery02::before{
    top: 12.2vw;
  } */
  
  /* #gallery::after,
  #gallery02::after{
    animation: tickerBGpc 30s 15s linear infinite;
    bottom: 12.2vw;
  } */
  
  .swiper-slide {
    width: 80vw;
  }
  
  .swiper-slide img {
    width: 100%;
  }
  
  .swiper-button-prev,
  .swiper-button-next {
    width: 6vw;
    background-position: center center;
  }
  
  #present-header {
    padding: 5.5vw 0!important;
  }
  
  #present-header .inner {
    width: 600px;
  }
  
  #present .inner {
    width: 600px;
  }
  
  
  #present-header label {
    width: 35px;
  }
  
  #present .message {
    font-size: 2.3rem;
    text-align: center;
  }
  
  #present .howList li .list-text {
    font-size: 2rem;
  }
  
  .presentList {
    flex-wrap: wrap;
    justify-content: center;
  }

  
  .presentList li {
    width: 44%;
  }

  
  .presentList li:nth-child(3) {
    margin-right: 40px;
  }
  
  .presentList li:nth-child(1),
  .presentList li:nth-child(2) {
    margin-bottom: 3vw;
  }
  
  #present .presentList .textBox {
    height: 10vw;
  }
  
  #present .presentList .textBox .exclusive {
  margin-top: 0; 
  position: absolute;
  bottom: 3vw;
  left: 3vw;
}
  
  #btnGroup,
  #btnGroup02 {
    padding: 0;
  }
  
  #btnGroup .inner,
  #btnGroup02 .inner {
    width: 710px;
  }

  #present #btnGroup .inner,
  #present #btnGroup02 .inner {
    width: auto;
  }
  
  #btnGroup .inner .btn,
  #btnGroup02 .inner .btn {
    width: 330px;
  }
  
  #btnGroup .btn:first-child,
  #btnGroup02 .btn:first-child {
    margin-bottom: 0;
  }

  #btnGroup .inner .btn, #btnGroup02 .inner .btn {
    width: 280px;
  }

  #btnGroup.smooth .btn {
    padding-top: 21.21%;
  }

  #present .section-title .jap span {
    font-size: 3.6rem;
  }

  #present-bnr .campaign-close{
    font-size: 24px;
  }

  

}



@media screen and (min-width:1000px){
  .only-sp {
    display: none;
  }
  
  section {
    padding: 150px 0!important;
  }
/* 
  section > .inner {
    width: 1000px;
    margin: 0 auto;
    padding: 0;
  } */

  .section-title {
    width: 32.69vw;
    height: auto;
  }

  #mv {
    top: 0;
  }

  #mv .inner {
    padding-bottom: 0;
  }

  #concept .inner,
  #feature .inner,
  #gallery .swiper-container,
  #gallery02 .swiper-container {
    width: calc( 100vw - 11.54vw);
  }

  #gallery .swiper-container,
  #gallery02 .swiper-container {
    padding: 150px 0;
  }


  .loop_wrap{
    display: block;
    width: 11.54vw;
    height: 130vh;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 3px;
  }

  #feature .loop_wrap.only-sp{
    display: none;
  }

  #feature .loop_wrap.only-pc{
    display: block;
    width: 11.54vw;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 3px;
  }

  .loop_wrap_right {
    display: block;
    width: 11.54vw;
    /* height: 130vh; */
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 3px;
  }

.loop_wrap.only-sp,
.loop_wrap_right.only-sp {
  display: none;
}

.loop_wrap.only-pc,
.loop_wrap_right.only-pc {
  display: block;
}

  #present .section-title {
    width: 32.69vw;
    max-width: 425px;
    margin-bottom: 80px;
  }


  #concept .inner {
    padding: 50px 0 150px;
  }


  /* .section-title img {
    height: 100%;
    width: auto;
  } */

  #mv .mv02.only-sp {
    display: none;
  }
  
  #mv .mv02.only-pc {
    display: block;
  }
  
  .only-pc {
    display: block;
  }
  .header {
    height: 128px;
  }
  
  .container {
    margin-top: 0;
  }
  
  #concept .label,
  #costume .label,
  #costume.costume-aw .label{
    width: 734px;
    left: auto;
    transform: translateX(0);
    margin-bottom: 70px;
  }

  #concept .label {
    margin-bottom: 0;
  }
  
  #gallery .label,
  #gallery02 .label{
    margin-bottom: 100px;
    width: 727px;;
  }



  
  .label-s {
    width: 271px!important;
  }


  #mv {
    height: auto;
  }

  #mv .inner {
    width: 82.46vw;
  }

  #mv .mv-img {
    position: relative;
    width: 100%;
    top: 0;
  }

  #mv .mv-final {
    top: 3vw;
  }

  #mv .page-title {
    width: 671px;
    top: 217px;
    left:-42px;
  }


  /* #mv .loop_wrap.only-sp {
    display: none;
  } */
/* 
  #mv .loop_wrap {
    display: flex;
    width: 100vw;
    height: 204px;
    overflow: hidden;
    position: absolute;
    top: 34px;
    left: 0;
  }
  
  #mv .loop_wrap img {
    width: auto;
    height: 100%;
  }
  
  @keyframes loop {
    0% {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-100%);
    }
  }
  
  @keyframes loop2 {
    0% {
      transform: translateX(0);
    }
    to {
      transform: translateX(-200%);
    }
  }
  
  #mv  .loop_wrap img:first-child {
    animation: loop 50s -25s linear infinite;
  }
  
  #mv  .loop_wrap img:last-child {
    animation: loop2 50s linear infinite;
  } */

  
  
/*  #mv .inner {
    width: 100%;
  }*/

  #jap1 {
    width: 515px;
  }
  
  #present-bnr .present-bnr.only-sp {
    display: none;
  }
  
  #present-bnr .present-bnr {
    display: block;
    padding: 65px 0 42px;
  }
  
  #present-bnr .present-bnr .inner {
    margin: 0 auto;
    width: 869px;
  }
  
  #present-bnr .present-bnr .inner .text {
    width: 100%;
    margin-bottom: 0;
  }
  
  #present-bnr .present-bnr .inner .btn {
    margin-top: 42px;
  }

  .big-label {
    display: block;
    width: 133px;
    position: absolute;
  }

  #concept .big-label {
    bottom: 0;
    left: 21px;
  }

  #costume .big-label {
    top: 0;
    right: 18px;
  }
  #costume.costume-aw .big-label {
    top: 0;
    left: 21px;
  }


  

  #concept .concept-img .loop-img {
    right: -15.6%;
  }

  #concept::after {
    bottom: 250px;
  }
  
  #concept .textBox {
    transform: translateX(26px);
  }
  
  #concept .concept-img {
    width: 727px;
  }

  #concept .textBox {
    width: 727px;
    transform: translateX(0)
  }

  #concept .mainCopy .item {
    font-size: 26px;
  }

  #concept .mainCopy .item:nth-child(1),
  #concept .mainCopy .item:nth-child(2) {
    font-size: 32px;
  }

  #concept .mainCopy .item:nth-child(2) {
    margin-bottom: 60px;
  }

  .itemWrap {
    /* width: 80%; */
    width: 727px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 70px;
  }

  #costume .itemWrap li {
    width: calc(100% / 2 - 37px);
    margin-bottom: 0;
  }

  #costume li .itemTitle {
    margin: 10px 0;
  }

  #costume {
    margin-bottom: 0;
    padding-bottom: 150px;
  }
  
  #costume .inner {
    width: 100%;
    margin: 0 auto;
    position: relative;
  }

  .cosItem {
    margin-bottom: 36px;
    padding-bottom: 36px;
  }
  
  .cosItem .itemText {
    background-color: transparent;
  }

  .itemR .itemText::before {
    content: '';
    width: 100vw;
    height: 300px; 
    background-color: #f0f0f5;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .itemL .itemText::before{
    content: '';
    width: 100vw;
    height: 300px;
    background-color: #f0f0f5;
    position: absolute;
    top: 0;
    right: 0;
  }
  
  #costume.costume-aw .cosItem .itemText {
    background-color: transparent;
  }
  
  #costume.costume-aw .itemR .itemText::before {
    background-color: #9696a5;
  }
  
  #costume.costume-aw .itemL .itemText::before {
    background-color: #9696a5;
  }
  
  #costume.costume-aw .itemR .itemText::after {
    background-color: #f0f0f5;
    width: 100vw;
  }
  
  #costume.costume-aw .itemL .itemText::after {
    background-color: #f0f0f5;
    width: 100vw;
    right: 0;
    left: auto;
  }

  .cosItem .itemText::after {
    width: 100vw;
  }
  
  .itemR .itemText::after {
    left: 0;
    right: auto;
  }
  
  .itemL .itemText::after {
    right: 0;
    left: auto;
  }
  
  .itemL figure {
    left: auto;
    right: 0;
    margin-right: 0;
  }
  
  .itemR figure {
    left: 0;
    right: auto;
    margin-left: 0;
  }
  
  .cosItem .itemText {
    padding: 0;
  }
  
  .itemL .itemText {
    margin-right: 300px;
    padding-right: 50px;
  }
  
  .itemR .itemText {
    margin-left: 300px;
    padding-left: 50px;
    width: 100vw;
  }
  
  .itemBody {
    width: 325px;
  }
  
  #gallery {
    padding-bottom: 80px!important;
  }
  #gallery02{
    padding-top: 80px!important;
    margin-top: -80px!important;
  }
  

  
  #gallery .label-s, 
  #gallery02 .label-s {
    margin-bottom: 75px;
  }
  
  .swiper-button-prev,
  .swiper-button-next {
    background-size: 36px 36px;
  }
  
  #present-header {
    padding: 80px 0 70px!important;
    margin-top: -5px;
  }

  #present-header .section-title {
    margin-bottom: 60px;
  }
  
  #present {
    padding: 100px 0;
  }

  #present .inner {
    width: 1000px;
  }
  
  #present .date {
    margin-bottom: 30px;
  }
  
  #present .message {
    font-size: 4rem;
    margin-bottom: 100px;
  }
  
  #present .label-s {
    margin-bottom: 30px;
  }




  
  #present .howList {
    width: 680px;
    margin: 0 auto 100px;
  }
  
  #present .howList li .number {
    width: 66px;
    margin-right: 24px;
  }
  
  #present .howList li .list-text {
    width: calc( 100% - 30px);
  }

  #present .howList.web {
    margin-bottom: 50px;
  }
  
  #present .howList li {
    margin-bottom: 30px;
  }
  
  #present .flex {
    width: 680px;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-between;
    gap: 80px;
    margin-bottom: 150px;
  }

  #present .howList li {
    justify-content: flex-start;
    gap: 0;
  }

  #present .howList li .number {
    width: 66px;
    margin-right: 16px;
  }


  #present .presentList li {
    margin-bottom: 0;
  }

  #present .presentList li:last-child {
    margin: 0 auto;
  }
  
  
  #present .presentList .textBox {
    height: 80px;
    padding: 25px;
  }
  
  #present .presentList .textBox .exclusive {
    left: 25px;
    bottom: 25px;
  }
  
  #btnGroup .inner .btn,
  #btnGroup02 .inner .btn {
    width: 330px;
    height: 70px;
    padding-top: 0;
  }
  
  section#btnGroup {
    padding: 100px 0;
  }
  
  #footer {
    padding: 30px 48px;
  }
  
  #footer .inner {
    -js-display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    -webkit-justify-content:space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
  }
  
  #footer .logo {
    margin: 0;
  }
  
  #footer .copyright {
    text-align: right;
  }



  .how-title {
    width: 452px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0;
  }

  .presentImg {
    width: 710px;
    margin: 0 auto 100px;
  }

  #present #btnGroup.smooth {
    width: 710px;
    margin: 0 auto 70px;
    padding-top: 30px!important;
    padding-bottom: 30px!important;
  }

  #btnGroup.smooth  .inner .btn {
    width: 330px;
    height: 140px;
    padding-top: 0;
  }

  .how-list-title {
    width: 680px;
    margin-left: auto;
    margin-right: auto;
    font-size: 2.5rem;
    margin-top: 0;
  }

  .how-list-title#race {
    margin-top: 60px;
  }

  .how-caution.caution01 {
    width: 680px;
    margin-left: auto;
    margin-right: auto;
  }

  .how-caution {
    font-size: 1.6rem;
  }

  #present .howList.web {
    margin-bottom: 20px;
  }

  #btnGroup.gal {
    padding-bottom: 50px;
  }

  #btnGroup.gal .inner .btn {
    width: 210px;
    height: 44.5px;
    padding-top: 0;
    margin: 0;
  }

  #btnGroup.obo .inner .btn {
    width: 400px;
    height: 84.5px;
    padding-top: 0;
  }

  #present .howList li .list-text a { 
    font-size: 2rem;
  }


  #profile .inner {
    width: 1100px;
    padding: 136px 70px;
    margin: 136px  auto;
    background-image: url(../../asset/images/wing/profile-bg.jpg);
  }

  #profile .section-title-box {
    position: absolute;
    top: -136px;
    left: -7.5vw;
  }

  #profile .inner .name-kawata {
    width: 350px;
    margin-bottom: 34px;
  }

  .profile-career {
    font-size: 22px;
    padding-bottom: 10px;
    margin: 40px 0 24px;
    width: 566px;
    display: inline-block;
  }

  .profile-wrap .profile-content {
    font-size: 16px;
  }

  .profile-wrap .profile-content .profile-label {
    width: 90px;
    margin-right: 0;
  }

  .profile-wrap.career .profile-content {
    margin-bottom: 27px;
    display: flex;
  }

  .profile-img-item:nth-child(1) {
    width: 381px;
    top: -73px;
    right: 82px;
  }
  
  .profile-img-item:nth-child(2) {
    width: 460px;
    top: 182px;
    right: -101px;
  }

  .profile-img-item:nth-child(3) {
    width: 446px;
    top: 928px;
    right: 143px;
    left: auto;
  }

  section#btnGroup02 .inner {
    width: 800px;
  }

  section#btnGroup02 .inner .btn{
    margin: 0;
  }
  


  .glowAnime {
    font-size: 280px;
  }

/************************************************************************************

feature

************************************************************************************/
  #feature .inner {
    padding: 150px 0!important;
  }



  #feature .feature-content .feature-label {
    font-size: 1.8rem;
    margin-bottom: 15px;
  }



  #feature .feature-item:nth-child(1) {
    width: 967px;
    margin: 0 0 0 67px;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  
  #feature .feature-item:nth-child(1) .feature-img {
    width: 553px;
  }
  
  #feature .feature-item:nth-child(1) .feature-content {
    margin: 114px 0 0 auto;
    width: 440px;
    padding: 0 30px 30px 45px;
  }
  
  #feature .feature-item:nth-child(1) .feature-content::before {
    content: '';
    width: 1px;
    height: 100%;
    background-color: #FFF;
    position: absolute;
    top: 0;
    right: 15px;
    left: auto;
  }
  
  #feature .feature-item:nth-child(1) .feature-content::after {
    content: '';
    width: 100%;
    height: 1px;
    background-color: #FFF;
    position: absolute;
    bottom: 15px;
    left: 0;
  }


  #feature .feature-item:nth-child(2) {
    margin: 99px 164px 0 auto;
    width: 532px;
    align-items: flex-end;
  }
  
  #feature .feature-item:nth-child(2) .feature-img {
    width: 270px;
  }
  
  #feature .feature-item:nth-child(2) .feature-content {
    margin: 0 0 25px auto;
    width: 261px;
    padding: 0 45px 30px 0;
  }
  
  #feature .feature-item:nth-child(2) .feature-content::before {
    content: '';
    width: 100%;
    height: 1px;
    background-color: #FFF;
    position: absolute;
    bottom: 15px;
    left: 0;
    top: auto;
  }

  #feature .feature-item:nth-child(2) .feature-icon01 {
    width: 272px;
    top: 0;
    left: -333px;
  }

  #feature .feature-item:nth-child(2) .feature-icon01 .glitch {
    font-size: 10.2rem;
    width: 280px;
  }

  #feature .feature-item:nth-child(2) .feature-icon01 .glitch:nth-child(1) {
    margin-top: -41px;
  }

  #feature .feature-item:nth-child(2) .feature-icon01 .glitch:nth-child(2) {
    margin-top: -66px;
    left: 18px;
  }

  #feature .feature-item:nth-child(2) .feature-icon01 .glitch02 {
    font-size: 10.2rem;
    margin-top: -66px;
    left: 36px;
  }



  #feature .feature-item:nth-child(3) {
    position: relative;
    margin: -82px auto 0 0;
    width: 525px;
  }
  
  #feature .feature-item:nth-child(3) .feature-img {
    width: 239px;
  }
  
  #feature .feature-item:nth-child(3) .feature-content {
    margin: 200px 0 0 auto;
    width: 286px;
    padding: 15px 0 0 45px;
  }
  
  #feature .feature-item:nth-child(3) .feature-content::before {
    content: '';
    width: 100%;
    height: 1px;
    background-color: #FFF;
    position: absolute;
    left: 0;
    top: 0;
  }







  #feature .feature-item:nth-child(4) {
    width: 949px;
    margin: -180px 0 0 auto;
    display: flex;
    align-items: flex-end;
  }
  
  #feature .feature-item:nth-child(4) .feature-img {
    width: 485px;
    order: 2;
  }
  
  #feature .feature-item:nth-child(4) .feature-content {
    margin: 0 auto 56px 0;
    width: 423px;
    padding: 0 45px 30px 30px;
    order: 1;
  }
  
  #feature .feature-item:nth-child(4) .feature-content::before {
    content: '';
    width: 1px;
    height: 100%;
    background-color: #FFF;
    position: absolute;
    top: 0;
    left: 15px;
  }
  
  #feature .feature-item:nth-child(4) .feature-content::after {
    content: '';
    width: 100%;
    height: 1px;
    background-color: #FFF;
    position: absolute;
    bottom: 15px;
    left: 0;
  }
  
  

  

#feature .feature-item:nth-child(5) {
  width: 960px;
  margin: 96px auto 0 71px;
  display: flex;
  align-items: flex-end;
}

#feature .feature-item:nth-child(5) .feature-img {
  width: 552px;
}

#feature .feature-item:nth-child(5) .feature-content {
  width: 409px;
  padding: 0 0 30px 25px;
  margin: 0 auto 68px 0;
}

#feature .feature-item:nth-child(5) .feature-content::before {
  content: '';
  width: 100%;
  height: 1px;
  background-color: #FFF;
  position: absolute;
  bottom: 15px;
  left: 0;
}

  



}



@media screen and (min-width:1366px){
  .swiper-slide img {
    width: 100%;
    height: auto;
  }
}



@media screen and (min-width:1650px){
  .itemR .itemText::before {
    content: '';
    width: 60vw;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, #f0f0f5, transparent);
  }
  
  .itemL .itemText::before{
    content: '';
    width: 60vw;
    height: 300px;
    /*background-color: #f0f0f5;*/
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(-90deg, #f0f0f5, transparent);
  }
  
  .itemR .itemText::after{
    /*background-color: #9696a5;*/
    width: 30vw!important;
    background: linear-gradient(90deg, #c8c8d2, transparent);
  }
  
  .itemL .itemText::after {
    width: 30vw!important;
    background: linear-gradient(-90deg, #c8c8d2, transparent);
  }
  
  #costume.costume-aw .itemR .itemText::before {
    width: 60vw;
    background: linear-gradient(90deg, #9696a5, transparent);
  }
  
  #costume.costume-aw .itemL .itemText::before {
    width: 60vw;
    background: linear-gradient(-90deg, #9696a5, transparent);
  }
  
  #costume.costume-aw .itemR .itemText::after {
    width: 30vw!important;
    background: linear-gradient(90deg, #f0f0f5, transparent);
  }
  
  #costume.costume-aw .itemL .itemText::after {
    width: 30vw!important;
    background: linear-gradient(-90deg, #f0f0f5, transparent);
  }

}


@media screen and (min-width:1920px){
  #feature .inner {
    padding: 225px 0 !important;
  }

  #feature .inner .feature-list {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
  }

  #feature .feature-content .feature-label {
    font-size: 2.6rem;
    margin-bottom: 22px;
  }

  #feature .feature-content .feature-text {
    font-size: 2rem;
  }

  #feature .feature-item:nth-child(1) {
    width: 1426px;
    margin: 0 0 0 99px;
  }

  #feature .feature-item:nth-child(1) .feature-img {
    width: 815px;
  }

  #feature .feature-item:nth-child(1) .feature-content {
    margin: 168px 0 0 auto;
    width: 546px;
    padding: 0 44px 44px 66px;
  }

  #feature .feature-item:nth-child(1) .feature-content::before {
    right: 22px;
  }

  #feature .feature-item:nth-child(1) .feature-content::after {
    bottom: 22px;
  }


  #feature .feature-item:nth-child(2) {
    margin: 149px 242px 0 auto;
    width: 785px;
  }

  #feature .feature-item:nth-child(2) .feature-content {
    margin: 0 0 38px auto;
    width: 321px;
    padding: 0 66px 44px 0;
  }

  #feature .feature-item:nth-child(2) .feature-content::before {
    bottom: 22px;
  }

  #feature .feature-item:nth-child(2) .feature-img {
    width: 398px;
  }

  #feature .feature-item:nth-child(2) .feature-icon01 {
    width: 402px;
    top: 0;
    left: -495px;
  }

  #feature .feature-item:nth-child(2) .feature-icon01 .glitch {
    font-size: 15rem;
    width: 350px;
  }

  #feature .feature-item:nth-child(2) .feature-icon01 .glitch02 {
    font-size: 15rem;
    margin-top: -66px;
    left: 36px;
  }

  #feature .feature-item:nth-child(2) .feature-icon01 .glitch:nth-child(2) {
    margin-top: -116px;
    left: 18px;
  }

  #feature .feature-item:nth-child(2) .feature-icon01 .glitch02 {
    font-size: 15rem;
    margin-top: -117px;
    left: 36px;
  }


  #feature .feature-item:nth-child(3) {
    position: relative;
    margin: -116px auto 0 0;
    width: 772px;
  }

  #feature .feature-item:nth-child(3) .feature-img {
    width: 352px;
  }

  #feature .feature-item:nth-child(3) .feature-content {
    margin: 311px 0 0 0;
    width: 352px;
    padding: 22px 0 0 66px;
  }

  #feature .feature-item:nth-child(4) {
    width: 1401px;
    margin: -225px 0 0 auto;
    display: flex;
    align-items: flex-end;
  }

  #feature .feature-item:nth-child(4) .feature-content {
    margin: 0 auto 88px 0;
    width: 587px;
    padding: 0 0 44px 44px;
  }

  #feature .feature-item:nth-child(4) .feature-img {
    width: 717px;
  }

  #feature .feature-item:nth-child(4) .feature-content::before {
    left: 22px;
  }

  #feature .feature-item:nth-child(4) .feature-content::after {
    bottom: 22px;
  }

  #feature .feature-item:nth-child(5) {
    width: 1416px;
    margin: 142px auto 0 92px;
  }

  #feature .feature-item:nth-child(5) .feature-img {
    width: 815px;
  }

  #feature .feature-item:nth-child(5) .feature-content {
    width: 546px;
    padding: 0 0 44px 50px;
    margin: 0 auto 99px 0;
  }

  #feature .feature-item:nth-child(5) .feature-content::before {
    bottom: 22px;
  }

  @keyframes noise-anim {
    0% {
      clip: rect(149px, 9999px, 174px, 0);
    }
    5% {
      clip: rect(14px, 9999px, 195px, 0);
    }
    10% {
      clip: rect(144px, 9999px, 128px, 0);
    }
    15% {
      clip: rect(130px, 9999px, 1000px, 0);
    }
    20% {
      clip: rect(127px, 9999px, 177px, 0);
    }
    25% {
      clip: rect(158px, 9999px, 140px, 0);
    }
    30% {
      clip: rect(170px, 9999px, 151px, 0);
    }
    35% {
      clip: rect(191px, 9999px, 148px, 0);
    }
    40% {
      clip: rect(11px, 9999px, 188px, 0);
    }
    45% {
      clip: rect(133px, 9999px, 13px, 0);
    }
    50% {
      clip: rect(178px, 9999px, 19px, 0);
    }
    55% {
      clip: rect(171px, 9999px, 178px, 0);
    }
    60% {
      clip: rect(162px, 9999px, 148px, 0);
    }
    65% {
      clip: rect(178px, 9999px, 16px, 0);
    }
    70% {
      clip: rect(134px, 9999px, 171px, 0);
    }
    75% {
      clip: rect(176px, 9999px, 135px, 0);
    }
    80% {
      clip: rect(160px, 9999px, 115px, 0);
    }
    85% {
      clip: rect(195px, 9999px, 124px, 0);
    }
    90% {
      clip: rect(113px, 9999px, 178px, 0);
    }
    95% {
      clip: rect(127px, 9999px, 158px, 0);
    }
    100% {
      clip: rect(167px, 9999px, 114px, 0);
    }
  }



@keyframes noise-anim-2 {
  0% {
    clip: rect(118px, 9999px, 13px, 0);
  }
  5% {
    clip: rect(157px, 9999px, 194px, 0);
  }
  10% {
    clip: rect(139px, 9999px, 125px, 0);
  }
  15% {
    clip: rect( 40px, 9999px,  183px, 0);
  }
  20% {
    clip: rect(177px, 9999px, 168px, 0);
  }
  25% {
    clip: rect(129px, 9999px, 137px, 0);
  }
  30% {
    clip: rect(170px, 9999px, 127px, 0);
  }
  35% {
    clip: rect(164px, 9999px, 117px, 0);
  }
  40% {
    clip: rect(158px, 9999px, 186px, 0);
  }
  45% {
    clip: rect(131px, 9999px, 164px, 0);
  }
  50% {
    clip: rect(176px, 9999px, 193px, 0);
  }
  55% {
    clip: rect(139px, 9999px, 188px, 0);
  }
  60% {
    clip: rect(136px, 9999px, 165px, 0);
  }
  65% {
    clip: rect(141px, 9999px, 19px, 0);
  }
  70% {
    clip: rect(18px, 9999px, 140px, 0);
  }
  75% {
    clip: rect(140px, 9999px, 194px, 0);
  }
  80% {
    clip: rect(141px, 9999px, 198px, 0);
  }
  85% {
    clip: rect(166px, 9999px, 199px, 0);
  }
  90% {
    clip: rect(139px, 9999px, 191px, 0);
  }
  95% {
    clip: rect(193px, 9999px, 137px, 0);
  }
  100% {
    clip: rect(184px, 9999px, 185px, 0);
  }
}


@keyframes noise-anim02 {
  0% {
    clip: rect(149px, 9999px, 174px, 0);
  }
  5% {
    clip: rect(14px, 9999px, 195px, 0);
  }
  10% {
    clip: rect(144px, 9999px, 128px, 0);
  }
  15% {
    clip: rect(130px, 9999px, 1000px, 0);
  }
  20% {
    clip: rect(127px, 9999px, 177px, 0);
  }
  25% {
    clip: rect(158px, 9999px, 140px, 0);
  }
  30% {
    clip: rect(170px, 9999px, 151px, 0);
  }
  35% {
    clip: rect(191px, 9999px, 148px, 0);
  }
  40% {
    clip: rect(11px, 9999px, 188px, 0);
  }
  45% {
    clip: rect(133px, 9999px, 13px, 0);
  }
  50% {
    clip: rect(178px, 9999px, 19px, 0);
  }
  55% {
    clip: rect(171px, 9999px, 178px, 0);
  }
  60% {
    clip: rect(162px, 9999px, 148px, 0);
  }
  65% {
    clip: rect(178px, 9999px, 16px, 0);
  }
  70% {
    clip: rect(134px, 9999px, 171px, 0);
  }
  75% {
    clip: rect(176px, 9999px, 135px, 0);
  }
  80% {
    clip: rect(160px, 9999px, 115px, 0);
  }
  85% {
    clip: rect(195px, 9999px, 124px, 0);
  }
  90% {
    clip: rect(113px, 9999px, 178px, 0);
  }
  95% {
    clip: rect(127px, 9999px, 158px, 0);
  }
  100% {
    clip: rect(167px, 9999px, 114px, 0);
  }
}

#feature .feature-item:nth-child(2) .feature-icon01 .glitch02:after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 transparent;
  top: 0;
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff100;
  background: transparent;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim02 2s infinite linear alternate-reverse;
}

@keyframes noise-anim-202 {
  0% {
    clip: rect(118px, 9999px, 13px, 0);
  }
  5% {
    clip: rect(157px, 9999px, 194px, 0);
  }
  10% {
    clip: rect(139px, 9999px, 125px, 0);
  }
  15% {
    clip: rect( 40px, 9999px,  183px, 0);
  }
  20% {
    clip: rect(177px, 9999px, 168px, 0);
  }
  25% {
    clip: rect(129px, 9999px, 137px, 0);
  }
  30% {
    clip: rect(170px, 9999px, 127px, 0);
  }
  35% {
    clip: rect(164px, 9999px, 117px, 0);
  }
  40% {
    clip: rect(158px, 9999px, 186px, 0);
  }
  45% {
    clip: rect(131px, 9999px, 164px, 0);
  }
  50% {
    clip: rect(176px, 9999px, 193px, 0);
  }
  55% {
    clip: rect(139px, 9999px, 188px, 0);
  }
  60% {
    clip: rect(136px, 9999px, 165px, 0);
  }
  65% {
    clip: rect(141px, 9999px, 19px, 0);
  }
  70% {
    clip: rect(18px, 9999px, 140px, 0);
  }
  75% {
    clip: rect(140px, 9999px, 194px, 0);
  }
  80% {
    clip: rect(141px, 9999px, 198px, 0);
  }
  85% {
    clip: rect(166px, 9999px, 199px, 0);
  }
  90% {
    clip: rect(139px, 9999px, 191px, 0);
  }
  95% {
    clip: rect(193px, 9999px, 137px, 0);
  }
  100% {
    clip: rect(184px, 9999px, 185px, 0);
  }
}


}