@charset "utf-8";


body{
	font-family: "游ゴシック","Yu Gothic","游ゴシック体","YuGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Meiryo UI","メイリオ","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	width:100vw;
	margin:0 auto;
	position:relative;
	background-repeat: repeat-y;
	background-size: contain;
	border-style:none;
	overflow-x: hidden;

}




*{
	margin:0;
	padding:0;
	color: #000;
}


img{
	border:none;
	vertical-align:bottom;
}


a{
	text-decoration:none;
}


li{
	list-style-type:none;
}


	/*404の為の設定*/
body{
	/* background-color: #F0F4F4;*/
	margin-top: 0;
}

h2{
	font-size: 25px;
	font-weight:lighter;
	text-align: center;
}



h3{
	font-size: 25px;
	font-weight: bold;
	text-align: center;
}


p{
	line-height: 1.8em;
}



#visual{
	width: 100vw;
	height: 70vh;
	position: relative;
	background-color: #FFFFFF;
}


#none1{
	display: none;
}

/* 404の為の設定 */
img{
width: 100%;
}
/* 404の為の設定 */


.container{
 opacity: 0;
   opacity: 0;
   animation-name: fadein-bottom;
   animation-duration: 1.0s;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
	animation-delay: 1.0s;
}

@keyframes fadein-bottom {
   0% {
      opacity: 0;
      transform: translateY(0);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   }
}





#space{
	letter-spacing:0.5em;
}




.headline {
  align-items: center;
  background-color: var(--color);
  display: flex;
  font-weight: 700;
  font-size: 8vw;
  height: 70vh;
  justify-content: center;
  overflow: hidden;
  perspective: 1000px;
  scroll-snap-align: start;
  width: 100vw;
}





.headline:nth-child(1) {
  --color: #f9ca24;
}
.headline:nth-child(2) {
  --color: #3498db;
}
.headline:nth-child(3) {
  --color: #ff7979;
}
.headline:nth-child(4) {
  --color: #ffffff;
}
.headline:nth-child(5) {
  --color: #e74c3c;
}
.headline:nth-child(6) {
  --color: #f8c291;
}

.word,
.char {
  animation-delay: var(--del);
  animation-direction: var(--dir, normal);
  animation-duration: var(--dur);
  animation-iteration-count: var(--it, infinite);
  animation-name: var(--name);
  animation-timing-function: var(--tf);
  animation-fill-mode: var(--fill, forwards);
  display: inline-block;
  position: relative;
  transform-origin: 50% 100%;
  z-index: 1;
}





.headline--fall .char {
  --name: fall;
  --dur: 600ms;
  --del: calc(var(--char-index) * -0.05s);
  --tf: cubic-bezier(0.165, 0.44, 0.64, 1);
}
@keyframes fall {
  0% {
    transform: rotateY(-25deg);
  }
  25% {
    transform: translateY(2%) rotateY(25deg);
  }
  50% {
    transform: rotateY(-25deg);
  }
  75% {
    transform: translateY(4%) rotateY(25deg);
  }
  100% {
    transform: rotateY(-25deg);
  }
}

.headline--flip .char {
  --name: flip;
  --dur: 4000ms;
  --del: calc(var(--char-index) * 0.075s);
  --tf: linear;
}
@keyframes flip {
  5% {
    transform: rotateX(1turn);
  }
  10% {
    transform: rotateX(2turn);
  }
  20% {
    transform: rotateX(3turn);
  }
  40% {
    transform: rotateX(4turn);
  }
  70%, 100% {
    transform: rotateX(5turn);
  }
}

.headline--float .char {
  --name: float;
  --dur: 2200ms;
  --del: calc(var(--char-index) * -0.5s);
  --tf: ease-in-out;
  --dir: alternate;
}
.headline--float .char:nth-child(2n) {
  --name: float-alt;
}
@keyframes float {
  from {
    transform: translate(2%, -10%) rotate(-1deg);
  }
  to {
    transform: translate(-2%, 5%) rotate(3deg);
  }
}
@keyframes float-alt {
  from {
    transform: translate(0%, -5%) rotate(-1deg);
  }
  to {
    transform: translate(2%, 10%) rotate(3deg);
  }
}

.headline--jog .char {
  --name: jog;
  --dur: 500ms;
  --del: calc(var(--char-index) * -0.025s);
  --tf: linear;
}
@keyframes jog {
  0% {
    transform: translate(0, 0) rotate(5deg);
  }
  25% {
    transform: translate(5%, -5%) rotate(10deg);
  }
  50% {
    transform: translate(5%, 0) rotate(15deg);
  }
  75% {
    transform: translate(10%, -5%) rotate(10deg);
  }
  100% {
    transform: translate(0, 0) rotate(5deg);
  }
}

.headline--jump .char {
  --name: jump;
  --dur: 800ms;
  --del: calc(var(--char-index) * 0.075s);
  --tf: cubic-bezier(0.165, 0.44, 0.64, 1);
}
@keyframes jump {
  20% {
    transform: translateY(2%) scaleY(0.9);
  }
  40% {
    transform: translateY(-100%) scaleY(1.2);
  }
  50% {
    transform: translateY(10%) scaleY(0.8);
  }
  70% {
    transform: translateY(-5%) scaleY(1);
  }
  80%, 100% {
    transform: translateY(0) scaleY(1);
  }
}

.headline--twirl .char {
  --name: twirl;
  --dur: 6000ms;
  --del: calc(var(--char-index) * 0.025s);
  --tf: linear;
}
@keyframes twirl {
  2.5% {
    transform: rotateY(1turn);
  }
  5% {
    transform: rotateY(2turn);
  }
  10% {
    transform: rotateY(3turn);
  }
  20% {
    transform: rotateY(4turn);
  }
  40% {
    transform: rotateY(5turn);
  }
  70%, 100% {
    transform: rotateY(6turn);
  }
}

.headline:nth-child(1) {
  --color: #ffffff;
}

.headline--blink .char {
  --dur: 0.8s;
  --del: calc(var(--char-index) * 0.0125s);
  --name: blink;
  --tf: steps(1, start);
  opacity: 0;
}
@keyframes blink {
  50% {
    opacity: 1;
  }
}

.headline--break .char {
  --dur: 2s;
  --name: break-drop;
  --td: ease;
  color: transparent;
  overflow: visible;
}
.headline--break .char:before, .headline--break .char:after {
  color: black;
  visibility: visible;
}
.headline--break .char:before {
  animation: break-left var(--dur) linear infinite;
  clip-path: polygon(55% 0, 50% 25%, 55% 60%, 50% 120%, 0 100%, 0 0);
  transform-origin: 0 100%;
}
.headline--break .char:after {
  animation: break-right var(--dur) linear infinite;
  clip-path: polygon(50% 0%, 100% 0, 100% 100%, 44% 120%, 53% 68%, 46% 22%);
  transform-origin: 100% 100%;
}
@keyframes break-drop {
  20% {
    transform: translateY(-100%);
  }
  22% {
    transform: translateY(10%);
  }
  25% {
    transform: translateY(-5%);
  }
  30% {
    transform: translateY(0);
  }
}
@keyframes break-left {
  22% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-8deg);
  }
  28% {
    transform: rotate(-10deg);
  }
  30%, 100% {
    transform: rotate(-5deg);
  }
}
@keyframes break-right {
  22% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(5deg);
  }
  28% {
    transform: rotate(10deg) translateY(10%);
  }
  30%, 100% {
    transform: rotate(4deg) translateY(5%);
  }
}

.headline--hide {
  --dur: 4s;
}
.headline--hide .word:after {
  animation: hide-cover calc(var(--dur) * 2) ease-out infinite;
  border-top: 0.5vw solid black;
  background-color: var(--color);
  content: "";
  height: 150%;
  left: 0;
  position: absolute;
  top: 100%;
  width: 100%;
  z-index: 2;
}
.headline--hide .char {
  --name: hide-jump;
  --del: calc(var(--char-index) * 0.04s);
  --td: cubic-bezier(0.215, 0.61, 0.355, 1);
  --dir: alternate;
  transform-origin: 50% 100%;
}
.headline--hide .char[data-char=B]:after {
  --name: hide-peek;
  --dir: alternate;
  animation: var(--name) var(--dur) var(--td) infinite var(--dir);
  content: attr(data-char);
  visibility: visible;
}
@keyframes hide-jump {
  0%, 10% {
    transform: translateY(0);
  }
  15% {
    transform: translateY(-25%);
  }
  20%, 100% {
    transform: translateY(100%);
  }
}
@keyframes hide-peek {
  0%, 35% {
    transform: translateY(0);
  }
  40%, 60% {
    transform: translateY(-40%);
  }
  70%, 90% {
    transform: translateY(-45%) skewY(10deg);
  }
  95%, 100% {
    transform: translateY(-46%) skewY(-10deg);
  }
}
@keyframes hide-cover {
  0%, 7% {
    transform: scaleX(0);
  }
  8%, 95% {
    transform: scaleX(1);
  }
  98%, 100% {
    transform: scaleX(0);
  }
}







#concept{
	width: 100vw;
	margin-top: 350px;
}

#concept h2{
	margin: 0px 0 70px;
}

#concept-text{
	text-align: center;
	font-size:14px;
	line-height: 4em;
}



.animation1{
    opacity: 0;
    -webkit-transform: translate3d(0%, 0px, 0); 
    transform: translate3d(0%, 0px, 0);
    -webkit-transition: all 1.5s ease-out;
    transition: all 1.5s ease-out;
	transition-delay:0.3s;
}

.animation1.active1{
    opacity: 1; 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0);
}


.animation2{
    opacity: 0;
    -webkit-transform: translate3d(0%, 0px, 0); 
    transform: translate3d(0%, 0px, 0);
    -webkit-transition: all 1.5s ease-out;
    transition: all 1.5s ease-out;
	transition-delay:0.3s;
}

.animation2.active2{
    opacity: 1; 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0);
}

.smart-animation{
animation-name:fadeInAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
animation-delay: 4s;
	display: none;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}




#works{
	width: 100vw;
	margin-bottom: 250px;
	margin-top: 200px;
}


#works h2{
	margin-bottom: 70px;
}



.pin img{
	height: 50px;
	width: auto;
	display: block;
	margin: 0 auto;
}



#pint-smart{
	display: none;
}





#contact{
	margin-top: 75px;
}

#contact-text{
	margin-top: 52px;
	font-size: 13px;
	text-align: center;
}




.btn{
	margin-top: 40px;
}

.btn img{
	height: 50px;
	width: auto;
	display: block;
	margin: 0 auto;
}


#inst-smart{
	display: none;
}




#mail{
	text-align: center;
	margin-bottom: 72px;
	font-weight: bold;
	transition:all 0.3s ease;
}







@media screen and (min-width:750px){


	
	
.smart_br{
	display: none;
}	
	






#visual{
	width: auto;
	height: 80vh;
}



.headline {
	height: 80vh;
  font-size: 40px;
}

.headline--hide .word:after {
  border-top: 2px solid black;
}
	
	
	
	
	

}





@media screen and (min-width:1150px){
	

	

	

	
#visual{

}

	

	
	
	
	
	


#concept{
	width:1150px;
	display: block;
	margin: 0 auto;
}

#works{
	width:1150px;
	display: block;
	margin: 0 auto;
}







#contact{
	width:1150px;
	display: block;
	margin: 0 auto;
}

	
h2{
	font-size: 32px;
	font-weight:normal;
}	
	
h3{
	font-size: 25px;
}

p{
	font-size: 15px;
	line-height: 1.8em;
}






#mein-tittle{
	font-size: 40px;
	height: 50px;
}
	



#concept{

}

#concept h2{
	margin: 450px 0 85px;
}

#concept-text{
	font-size:17px;
	line-height: 4em;

}
	



#works{
	margin-top: 450px;
	padding-bottom: 0;
}

#works h2{
	margin-bottom: 0px;
	margin-top: 0px;
}

#contact{
	margin-top: 450px;
	padding-bottom: 0;
}

	
	
	
#pint-smart{
	display: block;
}
	

	
.pin img{
	height: 60px;
	width: auto;
	display: block;
	margin: 0 auto;
}
	
	
.pin {
	position: relative;
	width: 225px;
	height: 60px;
	margin: 0 auto;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	margin-top: 50px;
}


.pin 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;
}


.pin:hover img:nth-of-type(2) {
	opacity: 0;
}



#inst-smart{
	display: block;
}

#contact-text{
	margin-top: 70px;
	font-size: 15px;
}



#mail{
	margin-bottom: 100px;
	font-size: 20px;
	margin-top: 30px;
}
	


#mail a {
  display: inline-block;
  position: relative;
  overflow: hidden;
  color: black;
  text-decoration: none;
	top: 12px;
}

#mail a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color:black;
  transform: translate(-100%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
  content: "";
}

#mail a:hover:after {
  transform: translate(0, 0);
}
	

	
	.smart-none{
		display: block;
	}	
	
	
	.btn img{
	height: 60px;
	width: auto;
	display: block;
	margin: 0 auto;
}
	
	
.btn {
	position: relative;
	width: 225px;
	height: 60px;
	margin: 0 auto;
	display: block;
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	margin-top: 50px;
}
.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;
}
.btn:hover img:nth-of-type(2) {
	opacity: 0;
}
	
	


#page-top {
    position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 77%;
		margin: 0px;
}
#page-top a {
	text-decoration: none;
	width: 38px;
	display: block;
}

#page-top a:hover {
	text-decoration: none;
	background: #999;
}

	
	
	
	
}