@charset "utf-8";

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
@media screen and (max-width: 768px) {
	html {
	  overflow-x: hidden;
	}
}

body {
	background-color: #fbfbfb;
	overflow: scroll;
	overflow-x:hidden;
	font-size: 16px;
	color: #1b1b1b;
  margin: 0;
  text-align: center;
  font-family: Quicksand, 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
@media screen and (max-width: 768px) {
	body {
	  overflow-x: hidden;
	}
}

main {
	width: 100%;
	overflow-x: hidden;
	margin: 0 auto;
}

div {
	margin-bottom: 7.5em;
}

h1 {
	color: #555555;
	font-size: x-large;
}

h2,
h3 {
	color: #555555;
}

a:link { color: #1b1b1b; }
a:visited { color: #1b1b1b; }
a:hover { color: #a7a7a7; }
a:active { color: #1b1b1b; }

/* スマートフォン 改行 */
.br-sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .br-sp {
    display: block;
  }
}

.introduction img {
	width: 500px;
}
@media screen and (max-width: 768px) {
	.introduction img {
		width: 90%;
	}
}

div.characters {
	width: 90%;
	margin: 0 auto;
}
.characters ul {
	width: 96%;
	display: flex;
	list-style-type: none;
}
.characters ul li {
	width: 22.5%;
	margin-left: 2%;
	margin: 0 auto;
}
.characters ul li:last-child {
	margin-right: 2%;
}
.characters ul li img {
	width: 100%;
}
@media screen and (max-width: 768px) {
  .characters ul {
		width: 90%;
		display: block;
	}
	.characters ul li {
		width: 90%;
		margin: 0 auto;
		margin-left: 0%;
	}
	.characters ul li:last-child {
		margin-right: 0%;
	}
}

div.characters {
	width: 90%;
	margin: 0 auto;
}
.photos ul {
	width: 96%;
	display: flex;
	list-style-type: none;
}
.photos ul li {
	width: 30%;
	margin: 0 auto;
	margin-left: 2.5%;
}
.photos ul li:nth-child(3) {
	margin-right: 2.5%;
}
.photos ul li img {
	width: 100%;
}
@media screen and (max-width: 768px) {
  .photos ul {
		width: 90%;
		display: block;
	}
	.photos ul li {
		width: 90%;
		margin-left: 0%;
	}
	.photos ul li:nth-child(3) {
		margin-right: 0%;
	}
}

.links ul {
	width: 50%;
	display: flex;
	list-style-type: none;
	margin: 0 auto;
}
.links ul li {
	width: 50%;
}
.links ul li a {
	text-decoration: none;
}
@media screen and (max-width: 768px) {
  .links ul {
		width: 90%;
		display: block;
		text-align: center;
		padding-left: 0;
		margin: 0 auto;
	}
	.links ul li {
		width: 100%;
		text-align: center;
	}
}