@charset "utf-8";

/* ----------------------------------------------------------
/* 共通
---------------------------------------------------------- */
@media (max-width: 768px){
body {
	min-width: 100%;
	}
}

@media (max-width: 640px){
body {
	min-width: 320px;
	}
}


/* ----------------------------------------------------------
/* メインビジュアル
---------------------------------------------------------- */
#main {
	background: url(../images/bg_main.png);
	}

#main #mainIn {
	width: 1200px;
	height: 655px;
	margin: 0 auto;
	position: relative;
	}

#main #mainIn h1 {
	width: 834px;
	height: 323px;
	background: url(../images/img_title.png) no-repeat;
	background-size: 834px 323px;
	top: 30px;
	right: 0;
	position: absolute;
	z-index: 20;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	}

#main #mainIn .event {
	top: 200px;
	right: 0;
	position: absolute;
	z-index: 30;
	}

#main #mainIn .project {
	top: 20px;
	left: 0;
	position: absolute;
	}

#main #mainIn .twitter {
	top: 10px;
	left: 255px;
	position: absolute;
	}

#main #mainIn .abema {
	top: 155px;
	left: 245px;
	position: absolute;
	}

#main #mainIn .about {
	top: 275px;
	left: 0;
	position: absolute;
	}

#main #mainIn .news {
	top: 275px;
	left: 244px;
	position: absolute;
	z-index: 10;
	}

#main #mainIn .azazel {
	top: 275px;
	left: 488px;
	position: absolute;
	}

#main #mainIn .release {
	top: 275px;
	left: 732px;
	position: absolute;
	}

#main #mainIn .movie {
	top: 275px;
	left: 976px;
	position: absolute;
	}

@media (max-width: 768px){
#main {
	position: relative;
	}

#main #mainIn {
	width: 100%;
	height: auto;
	position: static;
	}

#main #mainIn h1 {
	width: 100%;
	height: 0;
	background: url(../images/mainimg_sp.png) no-repeat;
	background-size: contain;
	padding: 90.49479% 0 0 0;
	position: static;
	}

#main #mainIn .event {
	margin: 0 0 15px 0;
	padding: 0 15px;
	position: static;
	}

#main #mainIn .event img {
	width: 100%;
	height: auto;
	}

#main #mainIn .project {
	width: 100%;
	top: 1.3%;
	left: 0;
	}

#main #mainIn .project img {
	width: 37%;
	height: auto;
	margin: 0 0 0 4%;
	}

#main #mainIn .twitter {
	width: 30%;
	top: 29%;
	left: 2%;
	}

#main #mainIn .twitter img {
	width: 100%;
	height: auto;
	}

#main #mainIn .abema {
	width: 30%;
	top: 29%;
	left: auto;
	right: 0;
	}

#main #mainIn .abema img {
	width: 100%;
	height: auto;
	}

#main #mainIn .azazel {
	display: none;
	}

#main #mainIn ul#menu {
	width: 100%;
	padding: 0 10px 20px 10px;
	}

#main #mainIn ul#menu li {
	width: 25%;
	text-align: center;
	padding: 0 5px;
	float: right;
	}

#main #mainIn ul#menu li img {
	width: 100%;
	height: auto;
	}

#main #mainIn ul#menu li .news img {
	width: 121%;
	height: auto;
	}

#main #mainIn .about {
	position: static;
	}

#main #mainIn .news {
	position: static;
	}

#main #mainIn .release {
	position: static;
	}

#main #mainIn .movie {
	position: static;
	}
}


/* ----------------------------------------------------------
/* コンテンツ
---------------------------------------------------------- */
#notes {
	color: #fff;
	text-align: center;
	background: #000;
	padding: 5px;
	}

#wrapper h2 {
	text-align: center;
	}

#wrapper .bg {
	width: 1200px;
	background: #fff;
	border: 5px solid #000;
	border-radius: 10px;
	margin: 0 auto;
	padding: 30px 50px;
	}

#pageTop {
	bottom: 15px;
	right: 15px;
	position: fixed;
	z-index: 100;
	}

@media (max-width: 768px){
#wrapper .bg {
	width: 100%;
	padding: 15px;
	}

#wrapper h2 img {
	height: 90px;
	}
}

@media (max-width: 640px){
#notes {
	font-size: 1.1rem;
	}

#wrapper h2 img {
	height: 60px;
	}

#pageTop {
	bottom: 5px;
	right: 5px;
	}

#pageTop img {
	width: 60px;
	height: 60px;
	}
}

@media (max-width: 320px){
#wrapper h2 img {
	height: 50px;
	}
}


/* ----------------------------------------------------------
/* ニュース
---------------------------------------------------------- */
#news {
	background: url(../images/bg_news.png);
	background-size: 32.5px 32.5px;
	border-bottom: 10px solid #000;
	padding: 5px 0 40px 0;
	}

#news article {
	margin: 0 0 10px 0;
	}

#news article:last-child {
	margin: 0;
	}

#news article .title {
	width: 100%;
	background: #ffffaf;
	border: 2px solid #000;
	border-radius: 5px;
	padding: 15px 45px 15px 15px;
	display: table;
	position: relative;
	cursor: pointer;
	}

#news article .title:after {
	content: "";
	width: 10px;
	height: 10px;
	top: 50%;
	right: 20px;
	border-top: 3px solid #5fb414;
	border-right: 3px solid #5fb414;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	margin: -9px 0 0 0;
	position: absolute;
	display: block;
	}

#news article .title.close:after {
	content: "";
	width: 10px;
	height: 10px;
	top: 50%;
	right: 20px;
	border-top: 3px solid #5fb414;
	border-right: 3px solid #5fb414;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	margin: -4px 0 0 0;
	position: absolute;
	display: block;
	}

#news article .title .date {
	width: 110px;
	vertical-align: top;
	display: table-cell;
	}

#news article .title .date span {
	font-size: 14px;
	font-size: 1.4rem;
	color: #fff;
	text-align: center;
	background: #000;
	display: block;
	}

#news article .title h3 {
	font-size: 16px;
	font-size: 1.6rem;
	padding: 0 0 0 30px;
	}

#news article .detail {
	font-size: 14px;
	font-size: 1.4rem;
	padding: 15px 0;
	}

#news article:last-child .detail {
	padding: 20px 0 0 0;
	}

#news article .detail h4 {
	font-size: 14px;
	font-size: 1.4rem;
	color: #5fb414;
	}

#news article .detail h5 {
	font-size: 14px;
	font-size: 1.4rem;
	}

#news article .detail p {
	margin: 0 0 20px 0;
	}

#news article .detail p:last-child {
	margin: 0;
	}

#news article .detail .btn {
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: bold;
	color: #fff;
	text-align: center;
	background: #5fb414;
	border-radius: 50px;
	border: none;
	text-decoration: none;
	margin: 0 auto;
	padding: 10px 40px;
	display: inline-block;
	}

#news article .detail table.table {
	width: 100%;
	border-collapse: collapse;
	}

#news article .detail table.table thead th {
	color: #fff;
	background: #000;
	border: 1px solid #333;
	padding: 10px 20px;
	}

#news article .detail table.table tbody th {
	font-size: 14px;
	font-size: 1.4rem;
	text-align: left;
	vertical-align: middle;
	border: 1px solid #333;
	padding: 10px 20px;
	}

#news article .detail table.table tbody th.item {
	color: #fff;
	background: #141414;
	}

#news article .detail table.table td {
	vertical-align: middle;
	border: 1px solid #333;
	padding: 10px 15px;
	}

#news article .detail table.table td strong {
	display: none;
	}

@media (max-width: 768px){
#news {
	padding: 5px 15px 20px 15px;
	}

#news article .title {
	padding: 10px 50px 10px 15px;
	display: block;
	}

#news article .title h3 {
	padding: 0;
	display: block;
	}

#news article .title .date {
	width: 100%;
	margin: 0 0 5px 0;
	display: block;
	}

#news article .title .date span {
	font-size: 12px;
	font-size: 1.2rem;
	padding: 0 5px;
	display: inline-block;
	}

#news article .detail {
	padding: 10px 0;
	}

#news article:last-child .detail {
	padding: 10px 0 0 0;
	}
}

@media (max-width: 640px){
#news article .title h3 {
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 140%;
	}

#news article .detail img.image {
	width: 100%;
	height: auto;
	}

#news article .detail .btn {
	font-size: 14px;
	font-size: 1.4rem;
	display: block;
	}

#news article .detail table.table {
	width: 100%;
	border-collapse: collapse;
	}

#news article .detail table.table thead {
	display: none;
	}

#news article .detail table.table tr {
	margin: 0 0 20px 0;
	display: block;
	}

#news article .detail table.table tr:last-child {
	margin: 0;
	}

#news article .detail table.table tbody th {
	width: 100%;
	color: #fff;
	background: #000;
	border: none;
	margin: 0 0 5px 0;
	padding: 5px 10px;
	display: block;
	}

#news article .detail table.table td {
	vertical-align: middle;
	border: none;
	margin: 0 0 10px 0;
	padding: 0;
	display: block;
	}

#news article .detail table.table td:last-child {
	margin: 0;
	}

#news article .detail table.table td.title {
	font-weight: bold;
	color: #b29d3b;
	}

#news article .detail table.table td strong {
	display: block;
	}
}


/* ----------------------------------------------------------
/* 商品情報
---------------------------------------------------------- */
#release {
	background: url(../images/bg_release.png) top left repeat-x #ff86b7;
	border-bottom: 10px solid #000;
	padding: 5px 0 40px 0;
	}

#release p {
	text-align: center;
	margin: 0 0 40px 0;
	}

#release p img.sp {
	display: none;
	}

/* DB */
.DBtmp_box      {width: 100%; margin: 0;}
.DBtmp_top      {margin: 0; padding: 0;}
.DBtmp_left     {width: 150px; text-align: center; padding: 20px 50px 0 0;}
.DBtmp_right    {padding: 20px 0 0 0;}
.DBtmp_compound {margin: 0; padding: 0 0 5px 0;}
.DBtmp_catch    {color:#4123b0; line-height: 100%; margin: 0 0 5px 0;}
.DBtmp_title    {font-size: 18px; font-size: 1.8rem; font-weight: bold; color: #b3317d; background:url(../images/ico_release.png) left center no-repeat; background-size: 50px 50px; margin: 0; padding: 15px 0 15px 60px; display: block;}
.DBtmp_subtitle {margin: 0; padding: 0;}
.DBtmp_date     {margin: 0; padding: 0;}
.DBtmp_detail   {margin: 0; padding: 0;}
.DBtmp_list     {margin: 0; padding: 0;}
.DBtmp_listline {margin: 0; padding: 0;}
.DBtmp_line     {margin: 0; padding: 0; display: none;}

@media (max-width: 768px){
#release {
	padding: 5px 15px 20px 15px;
	}

#release p {
	margin: 0 0 20px 0;
	}

#release p img.pc {
	width: 90%;
	}
}

@media (max-width: 640px){
#release p img.pc {
	display: none;
	}

#release p img.sp {
	width: 70%;
	display: inline-block;
	}

.DBtmp_top      {margin: 0; padding: 0 0 20px 0;}
.DBtmp_left     {width: 100%; padding: 0 0 20px 0; display: block;}
.DBtmp_right    {width: 100%; padding: 0; display: block;}
.DBtmp_catch    {margin: 0;}
.DBtmp_title    {font-size: 14px; font-size: 1.4rem; line-height: 150%;}
}

@media (max-width: 480px){
#release p img.sp {
	width: 90%;
	}
}

@media (max-width: 320px){
#release p img.sp {
	width: 100%;
	}
}


/* ----------------------------------------------------------
/* アザゼルさんとは？
---------------------------------------------------------- */
#about {
	background: url(../images/bg_about.png);
	background-size: 139.5px 139.5px;
	border-bottom: 10px solid #000;
	padding: 5px 0 40px 0;
	}

#about h3 {
	margin: 0 0 15px 0;
	}

#about h4 {
	font-size: 20px;
	font-size: 2.0rem;
	color: #005d63;
	margin: 0 0 5px 0;
	}

#about p {
	font-size: 16px;
	font-size: 1.6rem;
	margin: 0 0 30px 0;
	}

#about #staff {
	margin: 0 0 30px 0;
	}

#about #staff #azazel ,
#about #staff #azazel_z {
	width: 50%;
	float: left;
	}

#about dl dt {
	font-size: 16px;
	font-size: 1.6rem;
	white-space: nowrap;
	float: left;
	}

#about dl dd {
	font-size: 16px;
	font-size: 1.6rem;
	}

@media (max-width: 768px){
#about {
	padding: 5px 15px 20px 15px;
	}

#about h3 {
	margin: 0 0 5px 0;
	}

#about h3 img {
	width: auto;
	height: 35px;
	}

#about h4 {
	font-size: 16px;
	font-size: 1.6rem;
	}

#about p {
	font-size: 14px;
	font-size: 1.4rem;
	margin: 0 0 20px 0;
	padding: 0 0 20px 0;
	position: relative;
	}

#about #staff {
	margin: 0 0 20px 0;
	padding: 0 0 20px 0;
	position: relative;
	}

#about p:after ,
#about #staff:after {
	width: 8%;
	border-top: 3px dotted #005d63;
	bottom: 0;
	left: 44%;
	content: "";
	display: block;
	position: absolute;
	}

#about #staff #azazel ,
#about #staff #azazel_z {
	width: 100%;
	float: none;
	}

#about #staff #azazel {
	margin: 0 0 20px 0;
	}

#about dl dt ,
#about dl dd {
	font-size: 14px;
	font-size: 1.4rem;
	}
}

@media (max-width: 640px){
#about h3 img {
	height: 30px;
	}
}

@media (max-width: 480px){
#about h2 img {
	height: 53px;
	}

#about h3 img {
	height: 25px;
	}
}

@media (max-width: 370px){
#about h2 img {
	height: 45px;
	}
}


/* ----------------------------------------------------------
/* 動画
---------------------------------------------------------- */
#movie {
	background: url(../images/bg_movie.png);
	background-size: 20px 20px;
	border-bottom: 10px solid #000;
	padding: 5px 0 40px 0;
	}

#movie ul {
	width: 640px;
	margin:0 auto;
	}

#movie ul li .movie {
	height: 0;
	margin:0 10px;
	padding: 0 0 56.25% 0;
	overflow: hidden;
	position: relative;
	}

#movie .movie iframe {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	}

@media (max-width: 768px){
#movie {
	padding: 5px 15px 20px 15px;
	}

#movie ul {
	width: 100%;
	}
}


/* ----------------------------------------------------------
/* 10周年プロジェクト
---------------------------------------------------------- */
#project {
	background: url(../images/bg_project.png);
	background-size: 60.5px 80.5px;
	padding: 40px 0 0 0;
	}

#project h2 {
	margin: 0 0 20px 0;
	}

#project h2 img.sp {
	display: none;
	}

#project p.text {
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 140%;
	text-align: center;
	margin: 0 0 30px 0;
	}

#project .detail {
	width: 1200px;
	margin: 0 auto;
	position: relative;
	}

#project .detail ul {
	width: 860px;
	margin: 0 0 30px 0;
	float: left;
	}

#project .detail ul li {
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: bold;
	border: 5px solid #000;
	border-radius: 10px;
	margin: 0 0 10px 0;
	padding: 20px 20px 20px 80px;
	}

#project .detail ul li a {
	font-size: 24px;
	font-size: 2.4rem;
	color: #000;
	}

#project .detail ul li.no1 {
	background: url(../images/img_10_1.png) center left no-repeat #fff;
	background-position: 15px 50%;
	background-size: 45px 45px;
	}

#project .detail ul li.no2 {
	background: url(../images/img_10_2.png) center left no-repeat #fff;
	background-position: 15px 50%;
	background-size: 45px 45px;
	}

#project .detail ul li.no3 {
	background: url(../images/img_10_3.png) center left no-repeat #fff;
	background-position: 15px 50%;
	background-size: 45px 45px;
	}

#project .detail ul li.no4 {
	background: url(../images/img_10_4.png) center left no-repeat #fff;
	background-position: 15px 50%;
	background-size: 45px 45px;
	}

#project .detail ul li.no5 {
	background: url(../images/img_10_5.png) center left no-repeat #fff;
	background-position: 15px 50%;
	background-size: 45px 45px;
	}

#project .detail p.andmore {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 0;
	}

@media (max-width: 768px){
#project {
	padding: 20px 15px 0 15px;
	}

#project h2 {
	margin: 0 0 20px 0;
	}

#project h2 img.pc {
	display: none;
	}

#project h2 img.sp {
	width: 70%;
	height: auto;
	display: inline-block;
	}

#project p.text {
	font-size: 20px;
	font-size: 2.0rem;
	margin: 0 0 20px 0;
	}

#project .detail ul li a {
	font-size: 20px;
	font-size: 2.0rem;
	}

#project .detail {
	width: 100%;
	}

#project .detail ul {
	width: 100%;
	margin: 0;
	float: none;
	}

#project .detail ul li {
	font-size: 20px;
	font-size: 2.0rem;
	padding: 20px 20px 20px 70px;
	}

#project .detail ul li.no1 ,
#project .detail ul li.no2 ,
#project .detail ul li.no3 ,
#project .detail ul li.no4 ,
#project .detail ul li.no5 {
	background-size: 40px 40px;
	}

#project .detail p.andmore {
	text-align: center;
	margin: 20px 0 0 0;
	position: static;
	}

#project .detail p.andmore img {
	width: auto;
	height: 230px;
	margin: 0 0 0 -30px;
	}

#project br {
	display: none;
	}
}

@media (max-width: 640px){
#project h2 img.sp {
	width: 80%;
	}

#project p.text {
	font-size: 18px;
	font-size: 1.8rem;
	text-align: left;
	}

#project .detail ul li {
	font-size: 18px;
	font-size: 1.8rem;
	padding: 15px 20px 15px 70px;
	}

#project .detail ul li a {
	font-size: 18px;
	font-size: 1.8rem;
	}

#project .detail ul li.no1 ,
#project .detail ul li.no2 ,
#project .detail ul li.no3 ,
#project .detail ul li.no4 ,
#project .detail ul li.no5 {
	background-size: 35px 35px;
	}
}

@media (max-width: 480px){
#project {
	padding: 20px 15px 0 15px;
	}

#project h2 {
	margin: 0 0 20px 0;
	}

#project h2 img.pc {
	display: none;
	}

#project h2 img.sp {
	width: 90%;
	}

#project p.text {
	font-size: 16px;
	font-size: 1.6rem;
	text-align: left;
	}

#project .detail ul li {
	font-size: 16px;
	font-size: 1.6rem;
	padding: 10px 15px 10px 60px;
	}

#project .detail ul li a {
	font-size: 16px;
	font-size: 1.6rem;
	}

#project .detail ul li.no1 ,
#project .detail ul li.no2 ,
#project .detail ul li.no3 ,
#project .detail ul li.no4 ,
#project .detail ul li.no5 {
	background-size: 30px 30px;
	}
}


/* ----------------------------------------------------------
/* フッター
---------------------------------------------------------- */
footer {
	color: #fff;
	text-align: center;
	background: #000;
	padding: 40px 0;
	}

/* banner */
footer ul#banner {
	width: 1100px;
	margin: 0 auto;
	}

footer ul#banner li {
	margin: 0 10px;
	float: left;
	}

/* share */
footer #share {
	height: 20px;
	margin: 30px auto;
	}

/* copy */
footer p {
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1.4;
	clear: both;
	}

@media (max-width: 768px){
footer ul#banner {
	width: 100%;
	padding: 0 10px;
	display: table;
	}

footer ul#banner li {
	width: 25%;
	margin: 0;
	padding: 5px;
	display: table-cell;
	}

footer ul#banner li img {
	width: 100%;
	height: auto;
	}
}

@media (max-width: 640px){
footer {
	padding: 30px 0;
	}

footer ul#banner li {
	width: 50%;
	}

footer p {
	font-size: 10px;
	font-size: 1.0rem;
	}
}