@charset "UTF-8";

/* reset CSS
------------------------------------------------------------------------------- */

body, div, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, form, nav, header, footer, main, section, section, aside, figure, figcaption {
  margin: 0;
  padding: 0;
}
body {
  -webkit-text-size-adjust: 100%;
  word-break: break-all;
}
ul, ol, li {
  list-style: none;
}
main {
  display: block;
}
img {
  border: 0;
  vertical-align: middle;
}
body {
  line-height: 180%;
  font-size: 16px;/*基準サイズ*/
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
  color: #242120;
}
a {
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #242120;
}


/*_top*/

.comment{
  display: block;
  width: 100%;
  background: rgb(115,214,220);
  color: #fff;
  position: relative;
  text-align: center;
}

.test{
  height: 1000px;
}


.vertical{
  width: 100%;
  height: 200px;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

.arrow {
	padding-top: 80px;
}
.arrow span {
	position: absolute;
	bottom: 48px;
	left: 50%;
	width: 40px;
	height: 40px;
	margin-left: -12px;
	border-left: 5px solid #fff;
	border-bottom: 5px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: sdb 2s infinite;
	animation: sdb 2s infinite;
	opacity: 0;
	box-sizing: border-box;
}
.arrow span:nth-of-type(1) {
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}
.arrow span:nth-of-type(2) {
	bottom: 32px;
	-webkit-animation-delay: .15s;
	animation-delay: .15s;
}
.arrow span:nth-of-type(3) {
	bottom: 16px;
	-webkit-animation-delay: .3s;
	animation-delay: .3s;
}
@-webkit-keyframes sdb {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes sdb {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/*ここまで*/




header{
  display: block;
  height: 80px;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.second{
  height: 1170px;
  background: linear-gradient(135deg, #f90, #f09);
}
.third{
  height: 300px;
}
.forth{
  height: 820px;
  background: linear-gradient(135deg, #00b2b2, #00b22d);
}