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

body{
	margin: 0;
	padding: 0;
	color: #FFF;
	background-color: #252525;
	}


@font-face{
	font-family: 'typicons';
	src: url('../fonts/typicons.eot');
	src: url('../fonts/typicons.eot?#iefix') format('embedded-opentype'),
		url('../fonts/typicons.woff') format('woff'),
		url('../fonts/typicons.ttf') format('truetype'),
		url('../fonts/typicons.svg#typicons') format('svg');
	font-weight: normal;
	font-style: normal;
	}


#AprilContainer{
	background-image: url(../images/kukikaikai_background_square.png),url(../images/kukikaikai_background_black.jpg);
	background-repeat: repeat;
	background-size: auto;
	}

h1{margin: 0; padding: 10px 5px;}


h2{
	padding: 0.5em 1em;
	border-radius: 9px;
	background-color: #9b210b;
	background-image: url(../images/kukikaikai_h2_bg.jpg);
	background-repeat: repeat;
	background-size: auto;
	}

section#CHARA h2{background-image: url(../images/kukikaikai_h2_charabg.jpg)!important;}


h3{
	font-size: 1.2em;
	color: #ec6941;
	border-bottom: 1px solid #ec6941;
	}

h3:before{
	margin-right: 0.25em;
	font-size: 1.5em;
    font-family: 'typicons';
    content: '\e0b0';
	}

section#CHARA h3{border-bottom: none;}
section#CHARA h3:before{margin-right: 0; content: '';}


header,main,footer{display: block;}/*IE対策*/

ul{margin: 1em 0; padding: 0 1em;}
li{margin-bottom: 0.5em;}
p,li{font-size: 1.1em; line-height: 1.8em;}
strong{color: #00b7ee;}

section#CHARA ul{padding: 0;}
section#CHARA li{list-style-type: none;}

img{max-width: 100%;}


:hover{
	-webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    transition: all  0.7s ease;
	}


/*-----ナビゲーション-----*/
header{
	width: 100%;
	background-color: rgba(0,0,0,0.8);
	position: fixed;
	z-index: 36;
	}

nav{
	width: 100%;
	max-width: 1380px;
	margin: auto;
	}

#mainMenu{
	display: flex;
	align-items: center;
	justify-content: center;
	}

#mainMenu ul{margin: 0; padding: 0;}
#mainMenu li{
	flex: 0 1 20%;
	margin: 0!important;
	text-align: center;
	}

#mainMenu a{padding: 30px 5px; display: block;}


/*リンク背景色指定*/
#mainMenu li:nth-child(2){background-color: rgba(230,0,18,0.7);}
#mainMenu a:hover{background-color: rgba(191,51,25,0.4);}

/*スマホ用*/
#toggle{display: none;}




/*-----メインビジュアル-----*/
main{padding-top: 90px;}

#mainVisual{
	padding: 3em 0;
	background-image: url(../images/kukikaikai_background_kumo.png);
	background-repeat: no-repeat;
	background-size: auto;
	background-position: center;
	text-align: center;
	}

#mainVisual p:last-child{display: none;}

/*開発中止*/
.BlogLink{
	width: 55%;
	margin: 0 auto 2em;
	border: 3px solid #e00016;
	background-color: rgba(0,0,0,0.9);
	}

	@media only screen and (max-width: 1024px) { .BlogLink{width: 70%;} }

.BlogLink div:last-child{flex: 0 1 30%; margin-left: 5%;}
.BlogLink div:first-child{flex: 0 1 65%;}


.BlogLink a{padding: 2em; display: flex; align-items: center;}
.BlogLink a:hover{background-color: rgba(255,255,255,0.1);}

.BlogLink p{
	display: block!important;
	text-align: center;
	color: #dcdcdc;
	font-weight: bold;
	}

.red{color: #e00016;}

.BlogLink p:first-child{
	font-size: 1.6em;
	line-height: 1.8em;
	color: #FF0;
	font-weight: bold;
	}



/*-----イントロダクション-----*/
.intro{
	padding: 4em 0.5em;
	text-align: center;
	background-color: rgba(137,87,161,0.1);
	}


/*-----メインコンテンツ-----*/
section#MOVIE,section#GUIDE,section#CHARA{padding-top: 120px; margin-top: -120px;}


#mainContents{padding-top: 7%;}

.Article{
	width: 100%;
	max-width: 1380px;
	margin: 0 auto;
	}

#mainContents section{margin: 1em 1em 15%;}

#mainContents section > div{margin: 1.5em;}


/*発売決定！*/
.ilog9th{text-align: center;}
.ilog9th p{margin: 4em 0.5em;}


/*ゲームリンク・動画*/
#MOVIE{display: flex;}
#MOVIE div{flex: 0 1 48%; margin: 0 1%;}
#MOVIE div:first-child :hover{opacity: 0.9;}

.pv{
	width:100% !important;
	margin: 0 !important;
	padding-bottom:38vh;
	position:relative;
	}

.pv iframe{
	width:100%;
	height:100%;
	top:0;
	right:0;
	position:absolute;
	z-index: 1;
	}


/*遊び方*/
.FlexBox{display: flex; flex-wrap: wrap;}
.block2{flex: 0 1 48%; margin: 0 1% 2em;}
.block2 p:first-child{margin-bottom: 2em; text-align: center;}

.block3{flex: 0 1 30%; margin: 0 1% 2em;}
.block3 img{float: left; margin-right: 0.5em;}


/*キャラクター*/
.charaArticle {margin-bottom: 4em; display: flex;}
.charaArticle div:first-child{flex: 0 1 37%; margin-right: 3%;}
.charaArticle div:last-child{flex: 0 1 60%;}

/*アイログ リンク*/
.LinkButton{
	width: 60%;
	margin: auto;
	border: 2px solid #FFF;
	border-radius: 9px;
	background-color: rgba(241,158,194,0.5);
	font-weight: bold;
	text-align: center;
	}

.LinkButton a{padding: 0.5em 1em; display: block;}
.LinkButton a:hover{background-color: rgba(241,158,194,0.5);}


/*---------SNS------------------------------------*/

.SNS_share ul{
	margin: 12% 0 0;
	padding: 0;
	display: flex;
	justify-content: center;
	list-style-type: none;
	}

.SNS_share li{
	width: 60px;
	height: 60px;
	display: block;
	cursor: pointer;
	margin: 0 1em;
	text-align: center;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	}

.SNS_share li:hover{
	box-shadow: inset 0 0 5px 0 rgba(255,255,255,0.3);
	-webkit-box-shadow: inset 0 0 5px 0 rgba(255,255,255,0.3);
	-moz-box-shadow: inset 0 0 5px 0 rgba(255,255,255,0.3);
	}


	.Facebook{border: solid 2px #3b579d;}
	.Twitter{border: solid 2px #55acee}
	.Line{border: solid 2px #00cc00;}

		li.Facebook img, li.Line img{padding-top: 21.5%;}
		li.Twitter img{padding-top: 27%;}

	.Facebook:hover{background: rgba(59,87,157,0.4);}
	.Twitter:hover{background: rgba(85,172,238,0.3);}
	.Line:hover{background: rgba(0,204,0,0.3);}



/*---------フッター------------------------------------*/

footer{
	margin: 5em auto 0;
	padding: 3.5em 1.75em;
	background-color: #000;
	}

footer div{
	width: 100%;
	max-width: 1380px;
	margin: 0 auto;
	padding: 0;
	}

footer nav{
	margin-top: 1.5em;
	padding-bottom: 3em;
	color: #FFF;
	border-bottom: 1px solid #313131;
	}

footer a{color: #FFF; margin-right: 1em;}
footer a:hover{color: #cdecfb;}

footer p{
	font-size: 0.9em;
	line-height: 1.2em;
	margin-top: 3%;
	color: #FFF!important;
	}

footer p:first-child{margin-top: 0;}
footer p:last-child{text-align: center;}



/*---------ページTOPへ戻る------------------------------------*/
#pageTop {
	position: fixed;
	width: 80px;
	bottom: 30px;
	right: 30px;
	z-index: 999;
	display:block;
	}
	
	#pageTop img{width: 100%;}
	#pageTop:hover img{opacity: 0.7;}





/*-----タブレット--------------------------------------------*/
@media only screen and (max-width: 768px) {
	
#AprilContainer{background-size: 25%;}

	
/*-----メニュー-----*/
#toggle{
	padding: 0 !important;
	display: block;
	text-align: left;
	position: relative;
	}
	
	#toggle img{width: 180px; height: auto; padding: 0.5em 0;}
	
	#toggle a{display: block; text-align: center;}
	
	#toggle a:after {
			padding: 0 8px;
			font-size: 1.7em;
			color: #FFF;
	        font-family: 'typicons';
	        content: '\e116';
			display: inline-block;
			position: absolute;
			top: 20px;
			right: 20px;
			background: #434343;
			}

	
#mainMenu{display: none;}

	#mainMenu li{
		width: 100%;
		margin-top: 0;
        text-align: center;
        border-bottom: 1px solid #ccc;
		}
    
	#mainMenu li:first-child{display: none;}
	#mainMenu li:last-child{border-bottom:none; display: block;}

	#mainMenu a{padding: 0.6em;; color: #00a0e9; display: block;}

	
/*-----メインビジュアル-----*/
main{padding-top: 60px;}

section#MOVIE,section#GUIDE,section#CHARA{padding-top: 80px; margin-top: -80px;}
	
/*開発中止*/
.BlogLink{
	width: 90%;
	margin: 0 auto 2em;
	border: 3px solid #e00016;
	background-color: rgba(0,0,0,0.9);
	}

.BlogLink div:first-child{margin-bottom: 1em;}
.BlogLink div:last-child{width: 35%; margin: auto;}

.BlogLink a{padding: 1.5em; display: block;}



	
/*ゲームリンク・動画*/
#MOVIE{display: block;}
#MOVIE div{flex: 0 1 90%; margin: 0 5%;}

.pv{
	width:90% !important;
	margin: 6em 5% 0!important;
	}

	
/*遊び方*/
.Article section:nth-child(4) div.FlexBox{display: block;}
.block2{margin: 0 0 4em}
.block3{flex: 0 1 48%; margin: 0 1% 2em;}

/*アイログ リンク*/
.LinkButton{width: 80%;}

}


/*-----スマートフォン--------------------------------------------*/
@media only screen and (max-width: 480px) {

p,li{font-size: 1.0em; line-height: 1.6em;}

h2{padding: 0.35em 0.5em;}
h2 > img{width: auto; height: 24px;}
	
/*-----メインビジュアル-----*/
main{padding-top: 30px;}

#mainVisual{
	padding: 3em 0 1em;
	background-image: none;
	}

#mainVisual p:last-child{display: block; margin: 1em;}


/*開発中止*/
	.BlogLink div:last-child{width: 50%;}
	
.BlogLink a{padding: 1em 0.5em;}
	
.BlogLink p:first-child{
	font-size: 1.3em;
	line-height: 1.4em;
	}


/*-----イントロダクション-----*/
.intro{padding: 2em 0.5em;}
	

/*-----メインコンテンツ-----*/
#mainContents{padding-top: 0;}

#mainContents section{margin: 1em 1em 4em;}
#mainContents section > div{margin: 1.5em 0.5em;}


/*発売決定！*/
.ilog9th{text-align: center;}
.ilog9th p{margin: 2em 0.5em;}


/*ゲームリンク・動画*/
#MOVIE div:first-child{display: none;}
	
.pv{
	width:100% !important;
	margin: 0 !important;
	padding-bottom: 56.25%;
	position:relative;
	}

.pv iframe{
	width:100%;
	height:100%;
	top:0;
	right:0;
	position:absolute;
	}

/*遊び方*/
.FlexBox{display: block;}
.block3{margin: 0 0 4em;}
	
/*キャラクター*/
.charaArticle {margin-bottom: 4em; display: block;}
.charaArticle div:first-child{width: 80%; margin: 0 auto 2em!important;}

/*アイログ リンク*/
.LinkButton{width: 94%;}
	

/*---------SNS------------------------------------*/

.SNS_share ul{margin: 5em 0 0;}

.SNS_share li{width: 55px; height: 55px;}
li.Facebook img, li.Line img{padding-top: 20.5%;}
li.Twitter img{padding-top: 26%;}


	
/*---------フッター------------------------------------*/
footer a{width: 90%; display: block; margin-bottom: 0.5em;}

	
/*---------ページTOPへ戻る------------------------------------*/
#pageTop {
	width: 70px;
	bottom: 20px;
	right: 20px;
	}
}


/*---------ネタ記事用------------------------------------*/
#Ilog0401 {
	display: block;
	max-width: 640px;
	margin: auto;
	padding: 3em 0 5em;
	color: #000;
}
#Ilog0401>div {
	padding: 60px 20px 20px;
	background-color: #FFF;
}
#Ilog0401 p {line-height: 1.6em;}
#Ilog0401 p  {margin: auto auto 60px;}
#Ilog0401 img {max-width: 100%;}
#Ilog0401 .flexBox {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	margin: auto auto 60px;
}
#Ilog0401 .flexBox>p:first-child {flex: 0 0 auto; margin: 0 auto 1.2em;}
#Ilog0401 .flexBox>p:last-child {flex: 1 1 0px; margin: 40px auto 1.2em;}
#Ilog0401 .flexBox>p:first-child>img {display: block; margin: 0 1em 1em 0;}

#mainMenu .topLink a{padding: 0px; display: block;}
#mainMenu .topLink a:hover{background-color: transparent;}

#Ilog0401 .bold {font-weight: bold;}
#Ilog0401 .large {font-size: 1.2em; line-height: 1.6em;}
#Ilog0401 .big {font-size: 1.6em; line-height: 1.6em;}
#Ilog0401 .txtred {color: #F44;}
#Ilog0401 .br {margin: auto auto 90px;}
#Ilog0401 .br2 {margin: auto auto 120px;}

@media only screen and (max-width: 480px) {
	#Ilog0401>div {padding: 60px 10px 10px;}
	#Ilog0401 .big {font-size: 1.5em;}
	#Ilog0401 .flexBox>p:first-child {flex: 0 0 90px;}
	#Ilog0401 .flexBox>p:last-child {margin: 30px auto 1.2em;}
	#Ilog0401 .flexBox>p:first-child>img {width: 80px;}
}