@charset "UTF-8";

body{
	margin: 0 auto;
}


img{
  width: auto;
  height: auto;
}

/* __ Contents __ */

.container {
  overflow: auto;
  scroll-snap-type: y mandatory;
  height: 100vh;
}
.area {
  scroll-snap-align: start;
  height: 100vh;
  text-align: center
}

/* General Styling */
body {
  text-align: center;
  line-height: normal;
}
body p {
  padding-top: 90px;
}
h1 {
  padding-top: 30px;
}
a {
	display: inline-block;
    background-color: #1564A0;
    transition: background-color 0.5s;
	font-size: 0.8em;
	color: #fff;
	font-weight: 200;
	font-family: poppin;
	letter-spacing: 0.06em;
	padding-top: 10px;
	padding-bottom: 9px;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 6px;
	text-decoration: none;
}
p {
    margin-top: -40px;	
}
h3 {
	margin-bottom: 30px;
}
a:hover {
    background-color: powderblue;
}
h3 {
  font-size: 0.8em;
  color: #fff;
  font-family: poppin;
  font-weight: 200;
  letter-spacing: 0.05em;
}
.area:nth-child(1) {
  background-color: #008DB7;
}
.area:nth-child(2) {
  background-color: #91684A;
}
.area:nth-child(3) {
  background-color: #EAAC7F;
}
.area:nth-child(4) {
  background-color: #C4BFE7;
}
.area:nth-child(5) {
  background-color: saddlebrown;
}
.area:nth-child(6) {
  background-color: darkcyan;
}
.area:nth-child(7) {
  background-color: darkgoldenrod;
}
.area:nth-child(8) {
  background-color: darkslateblue;
}
.area:nth-child(9) {
  background-color: darkolivegreen;
}


/* Media queries
-------------------------------------------------------*/
/* スマホ 767px以下 */
@media only screen and (max-width: 767px){
  img{
    width: 85%;
    height: auto;
  }
}
/* pc 768px以上 */
@media only screen and (min-width: 768px), print {
  img{
    width: auto;
    height: auto;
  }
}