@charset "utf-8";
/* CSS Document */

body {
	background: url(img/bg_l.png) 50%;
	background-position: center;
	background-repeat: repeat;
	-webkit-animation: snow 20s linear infinite;/*chrome&safari*/
	-moz-animation: snow 20s linear infinite;/*firefox*/
	-ms-animation: snow 20s linear infinite;/*ie*/
	animation: snow 20s linear infinite;
}

@keyframes snow {
0% {background-position: 0 0, 0 0, 0 0;}
100% {background-position: 500px 500px, 300px 300px, 400px 400px;}
}


/*----------------------------------------------
　共通
---------------------------------------------- */
a:hover {
	text-decoration: none;
}
.blue{
	color: #738AD0;
}

@media screen and (min-width: 641px) {
.pc_none {
	display: none;
}
}
@media screen and (max-width: 640px) {

.sp_none {
	display: none;
}
}

.w100 {
	width: 100%;
}


/*背景固定*/
.cd-fixed-bg {
	min-height: 100%;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
/*	background-image: url(img/bg.png);
*/}

.cd-scrolling-bg {
	min-height: 100%;
}


/*　hタグ
---------------------------------------------- */
h1 {
	font-size: 280%;
	font-weight: normal;
	color: #333;
}
@media screen and (max-width: 640px) {
h1 {
	font-size: 172%;
}
}
h2 {
	font-size: 200%;
	color: #333;
	line-height: 1.5;
	border-bottom: 1px dashed #CCC;
	margin-bottom: 10px;
}
.prof h2:after {
	font-size: 60%;
	content: " 先生";
}
@media screen and (max-width: 479px) {
h2 {
	font-size: 139%;
	margin-top: 15px;
}
}

/* ----------------------------------------------
　header
---------------------------------------------- */
header {
	overflow: hidden;
	height: 41%;
	min-height: 300px;
	position: relative;
}
@media only screen and (max-width: 799px) {
header {
	height: 30%;
	min-height: 210px;
}
}
@media only screen and (max-width: 640px) {
header {
	min-height: 30%;
	max-height:170px;

	min-height: 170px;
}
}

header #menu{
	cursor: pointer;
	background: #000;
	padding: 2%;
}

/* LOGO */
.header_logo img{
	position: absolute;
	top: 0;
	left: 0;
	width: 27%;
	max-width:300px;
	min-width: 128px;
}

/* Top斜め画像 */
.section-triangle {
	height: 100%;
	left: 0;
	position: absolute;
	bottom: 0;
	width: 100%;
}
.section-triangle .section-triangle-inner {
	background: url(img/head_main.jpg) no-repeat;
	background-size: 100%;
	background-position: 0 62%;
	content: " ";
	height: 100%;
	left: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	position: absolute;
	bottom: 15%;
	-webkit-transform: skewY(3deg) translate3d(0,0,0);
	transform: skewY(3deg) translate3d(0,0,0);
	-webkit-transform-origin: top center;
	transform-origin: top center;
	width: 100%;
}
.section-triangle .section-triangle-inner:before {
	z-index: 0;
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.05);
}
/*@media only screen and (max-width: 799px) {
.section-triangle {
	height: 60%;
	left: 0;
	position: absolute;
	top: -6%;
	width: 100%;
}
}
@media only screen and (max-width: 799px) {
.section-triangle .section-triangle-inner {
	height: 50%;
	top: -10%;
}
}

*/

/* ----------------------------------------------
　MAIN CONTENTS
---------------------------------------------- */

.mainContents {
	width: 1000px;
	padding: 20px 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}


/* インナー 1200px
---------------------------------------------- */
.inner {
	max-width: 1200px;
	padding: 10px 0;
	margin: 0 auto;
	background: url(img/bg_midashi.png) no-repeat;
	background-position: center top;
}
.specialBlock {
	margin: 30px;
}
@media screen and (max-width: 640px) {
.specialBlock {
	margin: 15px;
}
}


/*　コンテンツ
---------------------------------------------- */
.midashi {
	text-align: center;
	padding: 0 10%;
}
.midashi h1+p {
	font-size: 108%;
	margin: 60px auto;
}
@media only screen and (max-width: 640px) {
.midashi h1+p {
	font-size: 93%;
	margin: 30px auto;
}
}





/* ----------------------------------------------
　Special Guests
---------------------------------------------- */
#guests {
}
ul.guest_list li {
	background: #FFF;
	width: 19.167%;
	margin-right: 0.8%;
	margin-bottom: 8px;
	float: left;
	position: relative;
}
ul.guest_list li a:hover {
	opacity: 0.6;
}
@media only screen and (max-width: 799px) {
ul.guest_list li {
	width: 24.167%;/*5列以上は4列に*/
	margin-bottom: 6px;
}
}
@media only screen and (max-width: 640px) {
ul.guest_list li {
	width: 32.4%;/*4列は3列に*/
	margin-bottom: 4px;
}
}
@media only screen and (max-width: 479px) {
ul.guest_list li {
	width: 49.586%;/*すべてを2列に*/
	margin-right: 0.8%;
	margin-bottom: 3px;
}
ul.guest_list li:nth-child(2n) {
	margin-right: 0;
}
}
ul.guest_list li a {
	display: block;
}
ul.guest_list dl dt{
	position: absolute;
	bottom: 3px;
	left: 0;
	background:rgba(0,0,0,0.5);
	opacity: ;
	width: 94%;
	height: 48px;
	color: #FFF;
	font-size: 124%;
	font-weight: bold;
	padding: 2px 3%;
}
ul.guest_list dl dt:after {
	font-size: 77%;
	content: " 先生";
}
ul.guest_list dl dt span{
	font-size: 77%;
	font-weight: normal;
}
ul.guest_list dl dd img{
	width: 100%;
}

@media only screen and (max-width: 767px) {
	ul.guest_list dl dt{
		height: 42px;
		font-size: 116%;
		padding: 4px 3%;
	}
	ul.guest_list dl dt span{
		font-size: 100%;
	}
}
@media only screen and (max-width: 479px) {
	ul.guest_list dl dt{
		font-size: 108%;
		padding: 2px 3%;
	}
	ul.guest_list dl dt span{
		font-size: 93%;
	}
}

/* ダイアモンド_ボタン */
.diamond_btn {
	right: 2px;
	bottom: 2px;
	width: 25%;
	height: 25%;
	background: #333;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	overflow: hidden;
	position: absolute;
}
.diamond__inner {
	position: absolute;
	margin: 25%;
	color: #fff;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
@media only screen and (max-width: 767px) {
.diamond_btn {
	right: 5px;
	bottom: 5px;
	width: 23%;
	height: 23%;
}
}
@media only screen and (max-width: 479px) {
.diamond_btn {
	right: 9px;
	bottom: 9px;
	width: 20%;
	height: 20%;
}
}

/* ダイアモンドbtn_分野ごと色分け */
ul.guest_list li.illust .diamond_btn ,
.prof .illust {
	background: #FABE00;
}
ul.guest_list li.manga .diamond_btn ,
.prof .manga {
	background: #AACF52;
}
ul.guest_list li.game .diamond_btn ,
.prof .game {
	background: #4C8DCB;
}
ul.guest_list li.anime .diamond_btn ,
.prof .anime {
	background: #2BB7B3;
}
ul.guest_list li.product .diamond_btn ,
.prof .product {
	background: #EB6EA5;
}
ul.guest_list li.digital .diamond_btn ,
.prof .digital {
	background: #AF62A3;
}
ul.guest_list li.car .diamond_btn ,
.prof .car {
	background: #EC6E7B;
}
ul.guest_list li.industrial .diamond_btn ,
.prof .industrial {
	background: #EA5504;
}
ul.guest_list li.voice .diamond_btn ,
.prof .voice {
	background: #BA8F2E;
}



/* ポップアップウィンドウ
---------------------------------------------- */
.prof {
	max-width: 860px;
	width: 100%;
	font-size: 108%;
	color: #333;
}
 .prof .genre {
	padding: 3px 10px;
	color: #FFF;
	font-size: 108%;
	font-weight: bold;
	line-height: 2.5;
}

@media screen and (max-width: 479px) {
.prof {
	max-width: 92%;
	padding: 4%;
}
.prof .genre {
	display: block;
	width: 97%;
	padding: 0 0 0 3%;
	line-height: 2;
	margin-bottom: 3px;
}
}

/* 分野ごと色分け 
.prof .illust {
	background: #FABE00;
}
.prof .manga {
	background: #AACF52;
}
.prof .game {
	background: #4C8DCB;
}
.prof .anime {
	background: #2BB7B3;
}
.prof .product {
	background: #EB6EA5;
}
.prof .digital {
	background: #AF62A3;
}
.prof .car {
	background: #EC6E7B;
}
.prof .industrial {
	background: #EA5504;
}*/


/* トップコンテンツ */
.topCont {
	clear: both;
	overflow: hidden;
}
.topCont img {
	max-width: 280px;
	width: 32%;
	float: left;
}
.topCont.no_image > img {
	display: none;
}
.rightCont {
	position: relative;
	width: 65%;
	float: right;
}
.no_image .rightCont {
	width: 100%;
}
.w100Cont {
	position: relative;
	width: 100%;
}

@media screen and (max-width: 479px) {
.topCont {
	margin-bottom: 20px;
	clear: both;
	overflow: hidden;
}
.topCont img {
	max-width: 100%;
	width: 100%;
	float: none;
}
.rightCont {
	position: relative;
	width: 100%;
	float: none;
}
}



/* SNSボタン */
ul.snsLink {
	position: absolute;
	top: 0;
	right: 0;
}
ul.snsLink li {
	float: left;
	margin-right: 10px;
}
ul.snsLink li img {
	width: 100%;
}
.snsLink li:last-child {
	margin-right: 0;
}
@media screen and (max-width: 479px) {
ul.snsLink {
	top: -5px;
}
ul.snsLink li {
	margin-right: 0;
}
ul.snsLink li img{
	width: 80%;
}
}

/* 開催履歴 */
.hukidashi {
	position: relative;
	padding: .5em .75em;
	margin: 0 0 15px;
	background-color: #748AD0;
	border-radius: 6px;
	color: #FFF;
	font-weight: bold;
}
.hukidashi::after {
	position: absolute;
	top: 100%;
	left: 30px;
	content: '';
	width: 0;
	height: 0;
	border: 8px solid transparent;
	border-top: 10px solid #748AD0;
}
dl.event_archive {
	border: 1px solid #748AD0;
	padding: 10px;
	margin-bottom: 20px;
}
dl.event_archive dt {
/*	display: inline-block;
	width: 25%;*/
}
dl.event_archive dt:before {
	content: '■';
	color: #748AD0;
	margin-right: 10px;
}
dl.event_archive dd {
/*	display: inline-block;
	width: 60%;*/
	font-size: 124%;
	font-weight: bold;
}


/* コンバージョンエリア */
ul.conversion_area {
	clear: both;
	overflow: hidden;
	text-align: center;
	margin: 30px auto 0;
	width: 720px;
}
ul.w820 {
	width: 820px;
}
ul.conversion_area li {
	float: left;
	margin-right: 20px;
}
ul.conversion_area li:last-child {
	margin-right: 0px;
}
ul.conversion_area li:hover {
	opacity: 0.6;
}
@media screen and (max-width: 820px) {
ul.conversion_area {
	width: 100%;
}
ul.w820 {
	width: 100%;
}
ul.conversion_area li {
	float: none;
	margin-right: 0px;
	margin-bottom: 10px;
}
ul.conversion_area li img {
}
ul.conversion_area li:last-child {
	margin-bottom: 0px;
}
}

@media screen and (max-width: 479px) {
ul.conversion_area {
	width: 100%;
}
ul.conversion_area li {
	float: none;
	margin-right: 0px;
	margin-bottom: 10px;
}
ul.w820 li{
	width: 90%;
	padding: 0 5%;
}
ul.conversion_area li img {
	width: 100%;
}
ul.conversion_area li:last-child {
	margin-bottom: 0px;
}

}

/* 作品一覧 */
.works_title {
	font-size: 124%;
	font-weight: bold;
	margin: 30px 0 15px 0;
}
.works_title:before {
	content:'■';
	color: #748AD0;
	padding-right: 10px;
}
ul.works {
	clear: both;
	overflow: hidden;
}
ul.works li{
	width: 32%;
	height: 274px;
	margin-right: 1%;
	margin-bottom: 10px;
	float: left;
}
ul.works li:nth-child(3n){
	margin-right: 0px;
}
ul.works li img{
	object-fit: cover;
	width: 100%;
	/*height: 100%;*/
}
.fit01 ,
.fit02 {
	top: 0px;
	left: 0px !important;
}
.fit01 { /*縦長用*/
	height: 360px !important;
	width: 100% !important;
}
.fit02 { /*横長用*/
	width: 150% !important;
}
.fit_kurata ,
.fit_kuriyama { /*倉田よしみ先生作品フィット*/
	top: 0px;
	left: 0px !important;
	height: 380px !important;
	width: 100% !important;
}

@media screen and (max-width: 901px) {
ul.works li{
	width: 32%;
}
}
@media screen and (max-width: 640px) {
ul.works li{
	width: 49.5%;
/*	height: 160px;*/
	margin-right: 1%;
	margin-bottom: 3px;
	float: left;
}
ul.works li:nth-child(2n){
	margin-right: 0px;
}
ul.works li:nth-child(3n){
	margin-right: 1%;
}
ul.works li:nth-child(6n){
	margin-right: 0px;
}
}
@media screen and (max-width: 479px) {
ul.works li{
	height: 160px;
}
}

/* ----------------------------------------------
　FOOTER
---------------------------------------------- */
footer {
	overflow: hidden;
	height: 500px;
	text-align: center;
	position: relative;
	color: #FFF;
}
footer a:link{
	color: #FFF;
}
footer a:visited {
	color: #FFF;
	text-decoration: none;
}
footer section.foot {
	position: absolute;
	bottom: 0;
	width: 100%;
	background: url(img/bg-dot-black.png) bottom right;
	background-repeat: no-repeat;
	background-image: url(img/bg-dot-black.png), url(img/bg-dot-black.png);
	background-repeat: no-repeat;
	background-position: calc(90% + 467px) 9px, calc(47% - 528px) 120px;

}
ul.footnav {
	text-align: center;
	margin-bottom: 60px;
}
ul.footnav li {
	color: #FFF;
	font-size: 116%;
	padding: 0 20px;
	display: inline-block;
	border-left: 1px solid #FFF;
}
ul.footnav li:last-child {
	border-right: 1px solid #FFF;
}
.homelink{
	width: 90%;
	height: 42px;
	margin: 0 auto 60px;
	line-height: 42px;
	background: #738AD0;
	color: #FFF;
	border-radius: 3px;
}
.homelink:hover{
	background: #93A5DB;
}
.guideSchool {
	text-align: center;
}
.guideSchool img{
	margin-bottom: 20px;
}
.guideSchool address {
	color: #FFF;
}

ul.snsArea {
	width: 80px;
	margin: 40px auto 40px;
}
ul.snsArea li {
	float: left;
	margin-right: 10px;
}
ul.snsArea li:last-child {
	margin-right: 0px;
}


/* Footer斜め背景 */
footer .section-triangle {
	height: 100%;
	left: 0;
	position: relative;
	top: 0;
	width: 100%;
}
footer .section-triangle .section-triangle-inner {
	background: -webkit-linear-gradient(right,#00f0ff 70%,#00a 100%);
	background: linear-gradient(to left,#00f0ff 70%,#00a 100%);
	content: " ";
	height: 120%;
	left: 0;
	opacity: .5;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	position: absolute;
	top: 30%;
	-webkit-transform: skewY(10deg) translate3d(0,0,0);
	transform: skewY(10deg) translate3d(0,0,0);
	-webkit-transform-origin: top center;
	transform-origin: top center;
	width: 100%;
}
footer .section-triangle .section-triangle-inner:before {
	z-index: 0;
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color:rgba(0,0,0,0.25);
}
footer .section-triangle .section-bg-inner {
	overflow: hidden;
	position: relative;
	top: 25%;
	-webkit-transform: skewY(-5deg) translate3d(0,0,0);
	transform: skewY(-5deg) translate3d(0,0,0);
	-webkit-transform-origin: top center;
	transform-origin: top center;
	background-color: #333;
	box-shadow: 0 0 15px 5px rgba(0,0,0,.3);
	height: 100%;
	left: 0;
	width: 120%;
}
footer .section-bg .section-bg-inner {
}
@media only screen and (max-width: 767px) {
footer .section-triangle .section-triangle-inner {
	top: 25%;
}
}
@media only screen and (max-width: 479px) {
footer .section-triangle .section-triangle-inner {
	top: 20%;
}
}


/* Page Top */
#pageTop {
	position: fixed;
	bottom: 20px;
	right: 20px;
}
#pageTop a {
	font-size: 150%;
	background: #666;
	text-decoration: none;
	color: #FFF;
	width: 60px;
	line-height: 60px;
	text-align: center;
	display: block;
	transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}
#pageTop a i {
	transform: rotate(225deg);
	-ms-transform: rotate(225deg);
	-moz-transform: rotate(225deg);
	-webkit-transform: rotate(225deg);
	-o-transform: rotate(225deg);
}
#pageTop a:hover {
	text-decoration: none;
	background: #999;
}