@charset "utf-8";

body{
	color: #FFF;
	line-height: 1.2;
	background: #000;
	box-sizing: border-box;
}
a{
	color:#FFFEC5;
	outline:none;
	text-decoration: none;
}
input:focus,
textarea:focus{
	background: #FFF;
}
a:hover,
span:hover,
input:hover,
select:hover,
label:hover,
textarea:hover{
	opacity:0.6;
	filter:alpha(opacity=60);
	-ms-filter:"alpha( opacity=60 )";
	cursor:pointer;
}
p{
	line-height: 1.5;
	margin: 0 0 30px 0;
}
.smf_none{
	display: none;
}
::selection {
	background: #d6e9ff;
}
::-moz-selection {
	background: #d6e9ff;
}
.f_small{
	font-size: 0.6em;
}
.sec_title {
	font-weight: bold;
	font-size: 2.8em;
	margin: 0 0 20px 0;
}
ul#news_feed,
ul.comics_data{
	display: flex;
	flex-wrap: wrap;
	min-height: 300px;
}
ul#news_feed li,
ul.comics_data li{
	width: 50%;
	padding: 0 20px 20px 0;
	overflow: hidden;
}
ul#news_feed li img{
	float: left;
	margin: 0 20px 0 0;
}
ul#news_feed li .feed_time {
	color: #7B7B7B;
	margin: 0 0 20px 0;
}
ul#news_feed li h2 a{
	font-size: 1.6em;
}
ul.comics_data li{
	text-align: center;
}
#section02 ul.comics_data li img{
	box-shadow: 10px 10px #000;
}
#section03 ul.comics_data li img{
	box-shadow: 10px 10px #DDD;
}
#section04 ul.comics_data li img{
	box-shadow: 10px 10px #DDD;
}
ul.comics_data li h3{
	font-size: 2.0em;
	margin: 10px 0 0 0;
}
dl.comics_status{
	text-align: left;
}
dl.comics_status dt{
	font-size: 1.4em;
	font-weight:bold;
	margin: 0 0 0 20px;
}
dl.comics_status dd{
	margin: 20px;
}
dl.credits{
	display: flex;
	flex-wrap: wrap;
}
dl.credits dt{
	font-size: 1.4em;
	font-weight:bold;
	margin: 0 0 0 20px;
}
dl.credits dd{
	margin: 20px;
}
ul.credits_list{
	display: flex;
	flex-wrap: wrap;
	line-height: 1.4;
}
ul.credits_list li{
	margin: 0 30px 0 0;
}
ul.credits_list li strong{
	color: #999;
	margin: 0 5px 0 0;
}
.sec_area {
	height: 100vh;
}
.contents_area {
	width: 1000px;
	margin: 0 auto;
}
#section01 {
	min-height: 450px;
}
#section05 {
	background: url("../images/site/about_bg.jpg") no-repeat center;
	min-height: 560px;
}
#section02,
#section03,
#section04 {
	color: #FFF;
	padding: 40px 0 120px 0;
	position: relative;
	z-index: 0;
}
#section03 {
	color: #000;
}
#section02::after,
#section03::after,
#section04::after {
	content: '';
	position: absolute;
	left:0;
	top: 0;

	/*四角形を傾けます*/
	transform: skewY(-5deg);
	transform-origin: bottom left;

	z-index: -1;
	width:100%;
	height:100%;
	background:#0B3776;
}
#section03::after {
	background:#FFF;
}
#section04::after {
	background:#006845;
}
.sec,
.num {
	display: block;
	text-align: center;
	color: #fff;
	font-weight: bold;
	line-height: 1.1;
}

.sec {
	font-size: calc(20 / 375 * 100vw);
}

.num {
	font-size: calc(50 / 375 * 100vw);
}

.offset {
	color: #fff;
	text-align: center;
}

/* header
------------------------------------------------------------*/
header {
	width: 100%;
	height: 100px;
	background: rgba(0,0,0,.4);
	padding: 0 3%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: space-between;
	-ms-flex-pack: space-between;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	transition: .3s;
	z-index: 100;
}
header .logo {
	display: inline-block;
}
header .logo img {
	transition: .3s;
}
header.scroll {
	background: rgba(0,0,0,.7);
	height: 50px;
	padding: 0 3%;
}
header.scroll .logo img {
	max-width: 200px;
}

/* main_nav
------------------------------------------------------------*/
nav ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
nav ul li:not(:last-of-type) {
	margin-right: 2.5vw;
}
nav ul li a {
	color: #FFF;
	font-size: 1.2em;
	font-weight: bold;
	display: inline-block;
	text-decoration: none;
	text-shadow:0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000,0 0 3px #000;
	position: relative;
	padding: 20px 0;
}
nav ul li a.current,
nav li ul li a.current {
	color: #FBFF72;
}
nav li ul {
	display: none;
	position: absolute;
}
nav li ul li {
	text-align: center;
	width: 150px;
	background: rgba(0,0,0,.4);
	margin: 18px 0 0 0;
}
nav li ul li a {
	display: block;
}
.swiper-container {
	margin: -20px 0 40px 0;
}
.swiper-container,
.swiper-slide img {
	 width: 100%;
}
.swiper-slide img {
	height: 100%;
}

footer{
	font-size: 0.8em;
	text-align: center;
    width: 100%;
	margin-top: auto;
	padding: 20px 0 40px 0;
}
.fb-page{
	width: 100%;
	height: 600px;
	margin: 0 auto 30px auto;
}
ul#footer_navi{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
ul#footer_navi li {
	margin: 0 0 40px 0;
}
ul#footer_navi li:nth-child(n + 2) {
	margin: 0 0 40px 20px;
}
ul#footer_navi li a{
	color: #B4B4B4;
}
#info_mail{
	font-size: 1.4rem;
	margin: 0 0 10px 0;
}
#info_mail a{
	color: #FFF;
}
#copyright{
	display:flex;
	display:-ms-flexbox; /* IE10 */
	display:-webkit-box; /* Android4.3以下、Safari3.1〜6.0 */
	display:-webkit-flex; /* Safari6.1以降 */
	align-items:center;
	justify-content: center;
}
footer img{
	height: 40px;
	margin: 0 0 0 10px;
}

.release_day {
	color: #A2A2A2;
	margin: 0;
}
a.buy_btn {
  color: #FFF;
  font-size: 16px;
  font-weight: bold;
  background: #F00;
  width: 200px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 10px;
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  transition: .3s;
  margin: 0 auto 30px auto;
}
a.buy_btn::before,
a.buy_btn::after {
  content: "";
  width: 100%;
  position: absolute;
  top: 0;
  z-index: -1;
  transition: transform ease .3s;
}
a.buy_btn::before {
  right: -60px;
  border-right: 60px solid transparent;
  border-bottom: 60px solid #FFF;
  transform: translateX(-100%);
}
a.buy_btn::after {
  left: -60px;
  border-left: 60px solid transparent;
  border-top: 60px solid #FFF;
  transform: translateX(100%);
}
a.buy_btn:hover {
	color: #F00;
  transform: scale(1.1);
  opacity:1.0;
  filter:alpha(opacity=100);
}
a.buy_btn:hover::before {
  transform: translateX(-49%);
}
a.buy_btn:hover::after {
  transform: translateX(49%);
}

.loading{
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
  background: #000;
  z-index: 9999;
}
.animation{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #fff;
  -webkit-animation: lodanimetion 1500ms ease-out forwards infinite;
  animation: lodanimetion 1500ms ease-out forwards infinite;
}
@keyframes lodanimetion {
  from,to {
    opacity: 0;
  }
  50% {
    opacity: .5;
  }
}