@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
@font-face {
  font-family: 'Alte-DIN-1451-Mittelschrift';
  src: url("../fonts/Alte-DIN-1451-Mittelschrift.ttf.woff") format('woff'), url("../fonts/Alte-DIN-1451-Mittelschrift.ttf.svg#Alte-DIN-1451-Mittelschrift") format('svg'), url("../fonts/Alte-DIN-1451-Mittelschrift.ttf.eot"), url("../fonts/Alte-DIN-1451-Mittelschrift.ttf.eot?#iefix") format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}
/* CSS Document */
body {
	margin: 0;
	padding: 0;
	color: #333;
	font-family: 'Noto Sans JP', 游ゴシック, "Yu Gothic", 游ゴシック体, YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: 1pt;
	word-break: break-all;
	word-wrap : break-word;
	overflow-wrap : break-word;
	font-feature-settings: "palt";
	overflow-x: hidden;
}
img {
	width: 100%;
	margin: 0;
	padding: 0;
	vertical-align: bottom;
}
h2,h3 {
	font-family: 'Alte-DIN-1451-Mittelschrift', sans-serif;
}
.sp {
	display: none !important;
}

/*-------- hover --------*/
a {
	color: #333;
	text-decoration: none;
}
a:hover {
	opacity: 0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha(opacity=60)";
	-webkit-transition: all 0.7s;
	-moz-transition: all 0.7s;
	-ms-transition: all 0.7s;
	-o-transition: all 0.7s;
	transition: all 0.7s;
}

/*-------- flexBox --------*/
.flexBox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: space-between;
}

/*-------- nav --------*/
header {
  font-family: 'Alte-DIN-1451-Mittelschrift', sans-serif;
	width: 90%;
	background: #d4d2cb;
	padding: 15px 5%;
}
nav {
	max-width: 980px;
	margin: 0 auto;
}
nav .flexBox {
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
nav ul.flexBox:first-child {
	width: 65%;
}
nav ul.flexBox:last-child {
	width: 230px;
}
nav ul.flexBox:last-child li {
	width: 25px;
}
nav ul.flexBox:last-child li:first-child {
	width: auto;
}
nav ul.flexBox:last-child li:first-child a {
	padding: 0 10px;
	background: #fff;
	border-radius: 10px;
}
nav ul.flexBox:last-child li:nth-child(2) {
	background: url(../images/nav_icon01_on.png) no-repeat;
	background-size: 25px;
}
nav ul.flexBox:last-child li:nth-child(3) {
	background: url(../images/nav_icon02_on.png) no-repeat;
	background-size: 25px;
}
nav ul.flexBox:last-child li:nth-child(4) {
	background: url(../images/nav_icon03_on.png) no-repeat;
	background-size: 25px;
}
nav ul.flexBox:last-child li:nth-child(n+2):hover img {
	opacity: 0;
	filter: alpha(opacity=0);
	-ms-filter: "alpha(opacity=0)";
	-webkit-transition: all 0.7s;
	-moz-transition: all 0.7s;
	-ms-transition: all 0.7s;
	-o-transition: all 0.7s;
	transition: all 0.7s;
}

/*-------- navの固定 --------*/
.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

/*-------- btn --------*/
a.btn {
	color: #fff;
	text-align: center;
	letter-spacing: 2pt;
	line-height: 1;
	background: #333;
	padding: 5px 30px;
	margin: 30px auto 0;
	border-radius: 50px;
	display: table;
}
nav ul.flexBox:last-child li:first-child a:hover,
a.btn:hover,
#series ul li > div a:hover {
	color: #333;
	background: #fff200;
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha(opacity=100)";
}
a#pageTop {
	position: fixed;
	bottom: 30px;
	right: 2.5%;
	max-width: 80px;
	z-index: 999;
}

/*-------- #main --------*/
#main {
	height: 100vh;
}

/*-------- footer --------*/
footer {
	font-family: 'Alte-DIN-1451-Mittelschrift', sans-serif;
	text-align: center;
}
footer nav ul {
	width: 100%;
	padding: 60px 0 30px;
}
footer nav ul li {
	margin-bottom: 30px;
}
footer nav ul li a {
  border-bottom: 6px solid #fff;
}
footer nav ul li a:hover {
  border-bottom: 6px solid #fff200;
  opacity: 1;
	filter: alpha(opacity=1);
	-ms-filter: "alpha(opacity=1)";
}
footer div {
	position: relative;
	color: #aaa;
	font-size: 10px;
	font-weight: normal;
	border-top: 1px solid #ccc;
	padding: 30px 0;
}
footer div a {
	width: 130px;
	position: absolute;
	top: 50%;
	left: 20px;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
}

@media screen and (max-width: 768px) {

nav {
	font-size: 12px;
}
nav ul.flexBox:last-child {
    width: 210px;
}

@media screen and (max-width: 414px) {
body {
	font-size: 13px;
}

nav {
	font-size: 12px;
}

nav.sp_nav {
	background-color: rgba(0,0,0,0.4);
	border-radius: 16px;
	padding: 6px;
}
.pc {
	display: none !important;
}
.sp {
	display: inherit !important;
}

/*-------- #main --------*/
#main p {
  width: 30% !important;
  position: fixed !important;
  top: 21px !important;
  left: 3% !important;
  z-index: 999;
}
#main > div {
  width: 42%;
  position: fixed;
  top: 20px;
  right: 3%;
  z-index: 999;
}
nav ul.flexBox:first-child li {
  border-bottom: none !important;
}
nav ul.flexBox:last-child {
  width: 100%;
}
nav ul.flexBox:last-child li:first-child a {
  padding: 2px 20px;
}
/*-------- btn --------*/
a.btn {
  font-size: 16px;
	padding: 7px 40px;
}
a#pageTop {
	bottom: 20px;
	right: 2.5%;
	max-width: 60px;
}

/*-------- footer --------*/
footer div a {
  margin: 0 auto;
  display: block;
	position: inherit;
  top: inherit;
  left: inherit;
}