html { scroll-behavior: smooth;}

/* スクロールダウン↓ */
#scroll-down {
  display: block;
  position: relative;
  padding-top: 68px;/* 矢印の先の位置 */
  text-align:center;
  margin-top:20px;/* スクロールダウンの位置 */
  margin-bottom:0px;/* スクロールダウンの下に0px隙間を空ける */
  }

/* 英文字↓ */
.arrow-down {
  display: block;
  margin: 0 auto;
  width: 10px;
  height: 30px;
  }

/* 矢印の先 */
.arrow-down:after {
  content: '';
  display: block;
  margin: 0;
  padding: 0;
  width: 10px;
  height: 10px;
  border-top: 1px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
  behavior: url(-ms-transform.htc);
  -moz-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  }

/* 英文字↓ */
.scroll-title {
  display: block;
  text-transform: uppercase;
  color: #FFFFFF;
  font-size:12px;
  font-weight:bold;
  letter-spacing:.1em;
  }

/* 英文字↓ */
.scroll-title:hover{color:#DEB971;}

/* 矢印の棒 */
#scroll-down::before {
-webkit-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;/* Safari 4+ */
-moz-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;/* Fx 5+ */
-o-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;/* Opera 12+ */
animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;/* IE 10+, Fx 29+ */
position: absolute;
top: 0px;
left: 50%;
width: 1px;
height: 80px;
background: #FFFFFF;
content: ' ';
}



@-webkit-keyframes elasticus {
0% {
	-webkit-transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	-moz-transform-origin: 0% 0%;
	-o-transform-origin: 0% 0%;
	transform-origin: 0% 0%;
	-webkit-transform: scale(1, 0);
	-ms-transform: scale(1, 0);
	-moz-transform: scale(1, 0);
	-o-transform: scale(1, 0);
	transform: scale(1, 0);
}
50% {
	-webkit-transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	-moz-transform-origin: 0% 0%;
	-o-transform-origin: 0% 0%;
	transform-origin: 0% 0%;
	-webkit-transform: scale(1, 1);
	-ms-transform: scale(1, 1);
	-moz-transform: scale(1, 1);
	-o-transform: scale(1, 1);
	transform: scale(1, 1);
}
50.1% {
	-webkit-transform-origin: 0% 100%;
	-ms-transform-origin: 0% 100%;
	-moz-transform-origin: 0% 100%;
	-o-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
	-webkit-transform: scale(1, 1);
	-ms-transform: scale(1, 1);
	-moz-transform: scale(1, 1);
	-o-transform: scale(1, 1);
	transform: scale(1, 1);
}
100% {
	-webkit-transform-origin: 0% 100%;
	-ms-transform-origin: 0% 100%;
	-moz-transform-origin: 0% 100%;
	-o-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
	-webkit-transform: scale(1, 0);
	-ms-transform: scale(1, 0);
	-moz-transform: scale(1, 0);
	-o-transform: scale(1, 0);
	transform: scale(1, 0);
}
}
@-moz-keyframes elasticus {
0% {
	-webkit-transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	-moz-transform-origin: 0% 0%;
	-o-transform-origin: 0% 0%;
	transform-origin: 0% 0%;
	-webkit-transform: scale(1, 0);
	-ms-transform: scale(1, 0);
	-moz-transform: scale(1, 0);
	-o-transform: scale(1, 0);
	transform: scale(1, 0);
}
50% {
	-webkit-transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	-moz-transform-origin: 0% 0%;
	-o-transform-origin: 0% 0%;
	transform-origin: 0% 0%;
	-webkit-transform: scale(1, 1);
	-ms-transform: scale(1, 1);
	-moz-transform: scale(1, 1);
	-o-transform: scale(1, 1);
	transform: scale(1, 1);
}
50.1% {
	-webkit-transform-origin: 0% 100%;
	-ms-transform-origin: 0% 100%;
	-moz-transform-origin: 0% 100%;
	-o-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
	-webkit-transform: scale(1, 1);
	-ms-transform: scale(1, 1);
	-moz-transform: scale(1, 1);
	-o-transform: scale(1, 1);
	transform: scale(1, 1);
}
100% {
	-webkit-transform-origin: 0% 100%;
	-ms-transform-origin: 0% 100%;
	-moz-transform-origin: 0% 100%;
	-o-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
	-webkit-transform: scale(1, 0);
	-ms-transform: scale(1, 0);
	-moz-transform: scale(1, 0);
	-o-transform: scale(1, 0);
	transform: scale(1, 0);
}
}
@-o-keyframes elasticus {
0% {
	-webkit-transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	-moz-transform-origin: 0% 0%;
	-o-transform-origin: 0% 0%;
	transform-origin: 0% 0%;
	-webkit-transform: scale(1, 0);
	-ms-transform: scale(1, 0);
	-moz-transform: scale(1, 0);
	-o-transform: scale(1, 0);
	transform: scale(1, 0);
}
50% {
	-webkit-transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	-moz-transform-origin: 0% 0%;
	-o-transform-origin: 0% 0%;
	transform-origin: 0% 0%;
	-webkit-transform: scale(1, 1);
	-ms-transform: scale(1, 1);
	-moz-transform: scale(1, 1);
	-o-transform: scale(1, 1);
	transform: scale(1, 1);
}
50.1% {
	-webkit-transform-origin: 0% 100%;
	-ms-transform-origin: 0% 100%;
	-moz-transform-origin: 0% 100%;
	-o-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
	-webkit-transform: scale(1, 1);
	-ms-transform: scale(1, 1);
	-moz-transform: scale(1, 1);
	-o-transform: scale(1, 1);
	transform: scale(1, 1);
}
100% {
	-webkit-transform-origin: 0% 100%;
	-ms-transform-origin: 0% 100%;
	-moz-transform-origin: 0% 100%;
	-o-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
	-webkit-transform: scale(1, 0);
	-ms-transform: scale(1, 0);
	-moz-transform: scale(1, 0);
	-o-transform: scale(1, 0);
	transform: scale(1, 0);
}
}
@keyframes elasticus {
0% {
	-webkit-transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	-moz-transform-origin: 0% 0%;
	-o-transform-origin: 0% 0%;
	transform-origin: 0% 0%;
	-webkit-transform: scale(1, 0);
	-ms-transform: scale(1, 0);
	-moz-transform: scale(1, 0);
	-o-transform: scale(1, 0);
	transform: scale(1, 0);
}
50% {
	-webkit-transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	-moz-transform-origin: 0% 0%;
	-o-transform-origin: 0% 0%;
	transform-origin: 0% 0%;
	-webkit-transform: scale(1, 1);
	-ms-transform: scale(1, 1);
	-moz-transform: scale(1, 1);
	-o-transform: scale(1, 1);
	transform: scale(1, 1);
}
50.1% {
	-webkit-transform-origin: 0% 100%;
	-ms-transform-origin: 0% 100%;
	-moz-transform-origin: 0% 100%;
	-o-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
	-webkit-transform: scale(1, 1);
	-ms-transform: scale(1, 1);
	-moz-transform: scale(1, 1);
	-o-transform: scale(1, 1);
	transform: scale(1, 1);
}
100% {
	-webkit-transform-origin: 0% 100%;
	-ms-transform-origin: 0% 100%;
	-moz-transform-origin: 0% 100%;
	-o-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
	-webkit-transform: scale(1, 0);
	-ms-transform: scale(1, 0);
	-moz-transform: scale(1, 0);
	-o-transform: scale(1, 0);
	transform: scale(1, 0);
}
}



// codepen profile logo
#paschka {
display: block;
color:white;
font-family:helvetica neue, helvetica, arial;
font-size:32px;
text-decoration: none;
position: fixed;
bottom:0px;
right:0px;
padding:0px;
transition: all .1s ease;
background:#000;
height:40px;
line-height:30px;
vertical-align:middle;
width:40px;
text-align:center;
border-radius: 5%;
bottom:20px;
right:20px;

&:hover {
background:#232323;
transition:all .1s ease;
color:#f0f0f0;
}
}

/* ***************************************************************************************
レスポンシブ設定
****************************************************************************************** */


/* ▼ スマホ：760px以下の幅の場合に適応される////////////////////////////////*/
@media screen and (max-width:1280px){

	#scroll-down {display: none;}

}/*//////////////////////////////////////////////////////////////////////*/


/* ▼ パソコン：1281pxから1600pxの幅の場合に適応される///////////////////////*/
@media screen and (min-width:1281px) and (max-width:1600px){
  
#scroll-down {margin-top:0px;margin-bottom:30px;}
  
}/*//////////////////////////////////////////////////////////////////////*/