/* css reset */
* {
        margin: 0;
        padding: 0;
        border: none;
        list-style-type: none;
        font-style: normal;
        font-weight: normal;
        text-align: left;
}

/* clearfix */
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

/* IE6 */
* html .clearfix { zoom: 1;}

/* IE7 */
*:first-child+html .clearfix { zoom: 1;}

body{
	font-family: メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, Arial, Verdana, Helvetica, sans-serif;
	font-size:14px;
	color:#333;
	background-color:#ff6666;
}

img{
	max-width:100%;
	height:auto;
	border:0px;
	vertical-align:bottom;
}

header,.frame_sp,footer{
	min-width:1000px;
}

.main{
	width:960px;
	margin:0 auto;
	position:relative;
	padding:30px 20px;
	color:#fff;
}

p{
	font-size:14px;
	padding:0px 0 20px 0;
}

a{
	color:inherit;
}


/* 見出し */

h2{
	font-size:45px;
	letter-spacing: 0.1em;
	color:#fff;
}

h3{
	font-size:25px;
	color:#fff;
	padding:15px 0;
}

h4{
	color:#fff;
	font-size:45px;
	line-height:1.2em;
}

h5{
	border-radius: 6px;
	font-size:15px;
	margin:10px 0 0 0;
	padding:2px 0 0 0;
	font-weight:bold;
	color:#333;
	text-align:center;
}


/* ヘッダー */

header .main{
	padding:20px 0 10px;
}

header.sub_head .main{
	padding:20px;
}

header h1{
	background:url(/compile/image/logo_compile.png) no-repeat left;
	line-height:500;
	overflow:hidden;
	background-size:contain;
	width:280px;
	height:132px;
	float:left;
}

header.sub_head h1{
	width:200px;
	height:93px;
}

header .egg_tweet{
	float:right;
}

header .mail{
	position:absolute;
	bottom:10px;
	right:0px;
	width:165px;
	height:32px
}

/* インフォメーション */

#info .main{
	color:#fff;
	padding-top:0;
	padding-bottom:10px;
}

#info h3 a{
	text-decoration:none;
}

#info h3 a:hover{
	text-decoration:underline;
}
	
#info li{
	font-size:13px;
	padding:0 0 2px 0;
}

#info ul li a:hover{
	color:#000;
}

.bana{
	padding:25px 25px 0;
	width:590px;
	text-align:center;
}

.twitter{
	float:right;
	margin-top:20px;
	margin-left:2%;
	width:41%;
}

ul.page_menu{
	text-align:center;
	margin-top:15px;
}

ul.page_menu li{
	display:inline-block;
	vertical-align:top;
	width:32%;
	margin-right:1%;
}

ul.page_menu li:last-child{
	margin-right:0;
}

ul.page_menu li a{
	display:block;
	background:#fff;
	height:55px;
	font-weight:bold;
	font-size:22px;
	color:#ff6666;
	text-align:center;
	text-decoration:none;
	line-height:55px;
	border:3px solid #fff;
}

#info ul.page_menu li a:hover{
	color:#fff;
	background:#f66;
}

#subpage_menu .main{
	text-align:center;
	padding:10px 30px;
}

#subpage_menu a{
	display:inline-block;
	margin:0 15px 15px;
	text-align:center;
}

#subpage_menu a:hover{
	color:#333;
}


/* LINEスタンプ */

#line_stamp{
	background:#FFF;
}

#line_stamp .main{
	padding:25px 20px 0;
}

#line_stamp img.mainimg{
	display:block;
	width:32%;
	float:left;
}

#line_stamp .line_rcol{
	float:right;
	width:64%;
	padding-bottom:30px;
}

#line_stamp h2{
	color:#00c402;
	line-height:2em;
}

#line_stamp p{
	color:#666;
}

#line_stamp a.download{
	display:block;
	width:220px;
	height:60px;
	background:#00c402;
	text-align:center;
	line-height:60px;
	color:#fff;
	font-size:24px;
	font-weight:bold;
	margin:0 auto 20px;
	text-decoration:none;
}

#line_stamp a.download:hover{
	background:#33d035;
}

#line_stamp ul li{
	float:left;
	width:25%;
}

/* 魔導発売カウントダウン */

.mado_countdown{
	background:#fff;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	padding:9px 10px 2px;
	margin-left:290px;
	width:210px;
	color:#f66;
	font-size:18px;
	font-weight:bold;
	text-align:center;
	position:relative;
}

.mado_countdown:after {
  content: "";
  position: absolute;
  top: 30px;
  height: 0;
  width: 0;
  left: -21px;
  border: 11px solid transparent;
  border-right: 11px solid #fff;
}

.mado_countdown img{
	width:180px;
	margin-bottom:8px;
}

#mado_count{
	text-align:center;
	font-size:36px;
	font-weight:bold;
}

/* COMPILE_BUY_BTN */

a.comp_btn{
	display:block;
	text-align:center;
	width:150px;
	height:auto;
	border:5px solid #fff;
	font-size:16px;
	font-weight:bold;
	color:#fff;
	background:#F66;
	padding:10px 8px;
	border-radius: 13px;
	-moz-border-radius: 13px;
	-webkit-border-radius: 13px;
	text-decoration:none;
	margin:10px auto 3px;
	box-shadow:0 0 0 1px #999,0 3px 0 #a5a5a5;
}

a.comp_btn:hover{
	background:#f88;
}

a.comp_btn:active{
	margin:13px auto 0;
	box-shadow:0 0 0 1px #999;
}

/* AC-MALL用購入ボタン */

/*.btn_123ars a{ color: #fff; text-decoration:none;}

.btn_123ars {
	text-decoration: none;
	text-align: center;
	font-size: 20px;
	display: block;
	width: 100px;
	padding: 5px 0;
	background:#ff9900;
	border: 1px solid #DDD;
	color:#FFF;
	margin:15px auto 0;
}

.btn_123ars:hover{
	position:relative;
	top:2px;
	left:2px;
	background-color:#B26B00;
	transition:ease-in;
}*/


/* コンパイルサウンド */

#compile_cd{
	background:#99cc00;
}

#compile_cd .main{
	padding-bottom:50px;
}

#compile_cd h2{
	color:white;
}

#compile_cd p{
	color:white;
	padding:0;
}

#compile_cd ul{
	padding:30px 0 0 0;
	list-style-type: none;
}

#compile_cd .li-1{
	float:left;
	padding:0 20px 0 0;
}

#compile_cd .li-2{
	margin-left:280px;
	padding:0 0 0px 20px;
}


#compile_cd .li-3{
	float:right;
	padding:20px 0 0 0;
}

#compile_cd .li-4{
	margin-right:280px;
	padding:0 20px 40px 0;
}

#compile_cd a.btn{
	text-decoration: none;
	text-align: center;
	font-size: 20px;
	display: block;
	width: 100px;
	padding: 5px 0;
	background:#99cc00;
	border: 1px solid #DDD;
	color:#FFF;
	margin:15px auto 0;
	position:relative;
	top:0;
	left:0;
	transition-property:background-colort;
	transition-timing-function:linear;
	transition-duration:1s;
}

#compile_cd a.btn:hover{
	position:relative;
	top:2px;
	left:2px;
	background-color:#6A860D;
}


/* プロジェクトEGGで遊ぼう！ */

#egg_cs{
	background:#ff9900;
	background-image: url(/compile/image/egg_logo.png);
	background-repeat:no-repeat;
	background-position:center right;
}

#egg_cs a{
	color:#FFF;
	text-decoration:none;}
	
#egg_cs a:hover{
	color:#0099ff;
	text-decoration:underline;
}



/* 不要？
#download2{
	margin:20px 0 0 0;
	text-align:center;
	min-width:220px;
}

#download2 p{
	text-align:center;
	font-size:16px;
}

#download3{
	text-align:center;
}

#download3 img{
	float:none;
}

#download3 p{
	text-align:center;
	font-size:16px;
}*/


/* コンパイルゲームカタログ */

#compile_game{
	text-align:center;
}

#compile_game .main{
	padding-bottom:0;
}

#compile_game ul{
	margin:20px 30px 40px;
}

#compile_game li{
	width:50%;
	float:left;
	text-align:center;
}

#compile_game ul a.btn_con {
	color:#FFF;
	text-align:center;
	font-size:16px;
	display:block;
	width:250px;
	padding:5px 0;
	background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#006699));
	border:1px solid #0FF;
	border-radius:5px;
	margin:10px auto 0;
	text-decoration:none;
}

#compile_game ul a.btn_con:hover{
	position:relative;
	top:2px;
	left:2px;
}

#compile_game p.egg_member{
	text-align:center;
	padding:0;
}

#compile_game p.egg_member a{
	color:#FFF;
}

#compile_game p a:hover{
	color:#510026;
	text-decoration:underline;
}



/* コンパイルゲームカタログ リストページ */


#list_p{
	background:#ff6666;
	min-width:1000px;
	color:#FFF;
}

#list_p h2{
	text-align:center;
	padding:20px 30px 10px 30px;
}

.game{
	padding:10px;
	min-height:140px;
}

#list_p h5{
	color:#333;
	font-weight:bold;
}

#list_p img{
	padding:0 5px 0 0;
	float:left;
}

#list_p li{
	width:440px;
	padding:5px 20px;
	float:left;
}

#list_p .cart{
	text-align: center;
	font-size: 13px;
	display: block;
	width: 120px;
	padding: 5px 0;
	background:#333;
	margin:15px auto 0;
}

#list_p .cart:hover{
	color:#FFF;
	position:relative;
	top:2px;
	left:2px;
	background-color:#59b1eb;
	transition:ease-in;
}

#list_p a{
	color:#FFF;
	text-decoration:none;
}

#list_p a:hover{
	color:#510026;
}

#list_p a.dousa{
	float:right;
	font-size:16px;
}
.egg_meibo1{
	margin:auto 90px;
	width:480px;
	position:relative;
	padding:0 20px 0 480px;
}



/* コンパイルゲームを遊ぼう！　リスト */

#egg_cs .main{
	padding-bottom:50px;
}

#egg_cs p{
	padding:0;
}

#egg_cs h2{
	color:#FFF;
}

.game_list{
	width:250px;
	float:left;
	padding:50px 25px 20px 0;
}

.game_list p{
	font-size:26px;
}

.game_list .title_number{
	font-size:100px;
	line-height:0.9em;
	text-align:center;
	margin-top:10px;
}

.game_title{
	padding:30px 0 0;
	}


/* ザナック */

#zanac{
	background-image: url(/compile/image/zanac.jpg);
	background-position:center top;
}

#zanac .main{
	padding-bottom:50px;
}

#zanac p,#zanac ul{
	width:55%;
}

#zanac .zanac_topimg{
	float:right;
	width:40%;
}

#zanac li{
	padding:10px 0 0 0;
	font-size:15px;
}

#zanac a{
	color:#000;
	font-size:15px;
	text-decoration:none;}
	
#zanac a:hover{
	color:#F33;
	text-decoration:underline;
}

#zanac a img{
	vertical-align:middle;
	margin-right:10px;
}

#zanac a:hover img{
	position:relative;
	top:2px;
	left:2px;
}



/* コミック魔導物語 */

#madou{
	background:#FFF;
	margin:0 auto;
	position:relative;
	overflow:hidden;
}

#madou img.comic_topimg{
	position:absolute;
	top:-30px;
	left:50%;
	margin-left:-670px;
}

#madou .main{
	color:#666;
	padding:40px 20px 40px 520px;
	width:460px;
}

#madou h2{
	color:#666;
	margin-bottom:20px;
}

ul.madoucomic li{
	float:left;
}

ul.madoucomic li a{
	display:block;
	width:30px;
	height:30px;
	color:#FF6666;
	background:#FFF;
	font-weight:bold;
	line-height:30px;
	text-align:center;
	text-decoration:none;
	border:#FF6666 3px solid;
	margin:0 5px 8px 0;
	position:relative;
}

ul.madoucomic li a:hover{
	color:#FFF;
	background:#F66;
}

ul.madoucomic li a.new:after{
	content:'';
	position:absolute;
	top:-7px;
	left:-6px;
	width:36px;
	height:13px;
	background:url(/compile/image/comic_new.png) no-repeat;
}


/* いつでもスマホ */

#sumaho{
	background: url(../images/app.jpg);
}

#sumaho h2{
	line-height:1.2em;
}

#sumaho p{
	padding:5px 0 0 0;
}

#sumaho ul{
	margin:0 50px;
	text-align:center;
	}


#sumaho li{
	display:inline-block;
	padding:30px 5px 10px;
	text-align:center;
	width:150px;
	vertical-align:top;
}

#sumaho li a{
	display:block;
	text-align:center;
}

#sumaho a img{
	border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	margin-bottom:10px;
}

#sumaho a:hover img{
	position:relative;
	top:2px;
	left:2px;
}


/* 魔導物語1-2-3 MSX */

.madou123_2{
	margin:0 auto;
	width:480px;
	position:relative;
	padding-left:460px;
}

.madou123_2 a{
	text-decoration:none;
}

.madou123_2 a:hover{
	color:#0099CC;
	text-decoration:underline;
}

#madou123{
	background:#FFF;
	margin:0 auto;
	background-image: url(/compile/image/madou123.jpg);
	background-repeat:no-repeat;
	background-position:center top 50px;
	padding: 30px 0;
}

#download4{
	text-align:center;
	padding:10px 0;
}

.madou_3{
	margin:30px 10px 20px 30px;
	font-size:15px;
	text-align:center;
}

.madou_3 p{
	font-size:20px;
	color:#F00;
	text-align:center;
	margin: 0;
}

.copy{
	font-size:11px;
	}


/* フロートメニュー部分 */

#floatSideMenu{
	float:right;
	position:fixed;
	bottom:50px;
	right:-13px;
	z-index: 5;
}

#floatSideMenu a{
	display:block;
	width: 80px;
	height: 110px;
	overflow: hidden;
	/*アニメーション指定*/
    transition-property: margin;
    transition-duration:0.1s;
    transition-timing-function:ease;
}

#floatSideMenu a:hover{
	margin-right:5px;
}


/* フッター */

footer{
width:100%;
background:#ff6666;
color:#fff;
}

footer .main{
padding:10px 0;
}

footer a{
color:#fff;
text-decoration:none;
}

footer a:hover{
text-decoration:underline;
}

footer .main{
text-align:center;
font-size:11px;
line-height:1.3em;
}


/*  以下サブページ専用css  */

.right_col{
	float:right;
	width:650px;
	border-radius:10px;        /* CSS3草案 */
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 10px;   /* Firefox用 */
}

.topic_data{
	padding:10px 10px 0;
	text-align:right;
}

.topic_text{
	padding:10px 10px 0;
}

.right_col p a{
	color:#33C;
}

.right_col p a:hover{
	color:#000;
}

.right_col h2{
	line-height:1.3em;
	color:#666;
	background:#fff;
	border-radius: 6px;
	-webkit-border-radius: 6px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 6px;   /* Firefox用 */
	padding:20px 25px 15px;
	font-weight:bold;
	font-size:22px;
}

/* ステーションニュースページ */

.left_col{
	float:left;
	width:280px;
}

ul.category li:first-child{
	background:#fff;
	color:#666;
	font-weight:bold;
	border:none;
	font-size:1.3em;
	padding:8px 15px;
	margin:0 0 3px;
	border-radius: 5px;
	-webkit-border-radius: 5px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 5px;   /* Firefox用 */
}

ul.category li a{
	display:block;
	color:#33C;
	border-bottom:2px dashed #FFF;
	padding:11px 5px;
	line-height:1.1em;
}

ul.category li a:hover{
	color:#000;
	text-decoration:underline;
}

.topic_text a{
	color:#33C;
}

.topic_text a:hover{
	color:#000;
	text-decoration:underline;
}

.topic_text ul li{
	border-bottom:2px dashed #FFF;
	padding:11px 5px;
}

/* メールフォーム */

.wpcf7 input{
	text-align:center;
	background:#FFF;
	color:#000;
	border-radius:3px;
	-webkit-border-radius: 3px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 3px;   /* Firefox用 */
	padding:3px;
}

.wpcf7 textarea{
	border-radius:3px;
	-webkit-border-radius: 3px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 3px;   /* Firefox用 */
	height:100px;
	width:400px;
	padding:3px;
}


/* 150213_お知らせ */

.tuiki{
	font-size:17px;
	padding:20px;
	background:#FFF;
	width:800px;
	margin:0 auto;
	margin-bottom:25px;
}

/* きゅ～きょく遊び方ボタン */

.button li{
	display:inline-block;
}

.button{
	text-align:center;
	margin:40px;
}

.button .disc_play{
  color: #FFF;
  font-weight:bold;
  text-align:center;
  font-size: 18px;
  display: block;
  width: 200px;
  padding: 15px 0;
  background: -webkit-gradient(linear, left top, left bottom, from(#F90), to(#F60));
  border:5px solid #FFF;
  border-radius: 5px;
  text-decoration: none;
  margin-right:20px;
}

.button .disc_play:hover{
	text-decoration:none;
	color:#FFF;
	-webkit-transform: translateY(2px);
}


.button .disc_faq{
  color: #FFF;
  font-weight:bold;
  text-align:center;
  font-size: 18px;
  display: block;
  width: 200px;
  padding: 15px 0;
  background: -webkit-gradient(linear, left top, left bottom, from(#F90), to(#F60));
  border:5px solid #FFF;
  border-radius: 5px;
  text-decoration: none;
}

.button .disc_faq:hover{
	text-decoration:none;
	color:#FFF;
	-webkit-transform: translateY(2px);
}

/* ディスクステーションRe#01 FAQボタン */

.button_Re li{
	display:inline-block;
}

#dsre_01 .button_Re{
	text-align:center;
}

.button_Re .Re_faq{
  display:block;
  color: #FFF;
  font-weight:bold;
  text-align:center;
  font-size: 18px;
  width: 200px;
  padding:15px 0;
  background: -webkit-gradient(linear, left top, left bottom, from(#F90), to(#F60));
  border:5px solid #FFF;
  border-radius: 5px;
  text-decoration: none;
  margin:auto;
  box-shadow:0 0 0 1px #999,0 3px 0 #a5a5a5;
}


.button_Re .Re_faq:hover{
	text-decoration:none;
	color:#FFF;
	-webkit-transform: translateY(2px);
}



@media screen and (max-width: 1000px) {

/* 150213_お知らせ */	
.tuiki{
	width:auto;
	margin:20px;
}

header,.frame_sp,footer{
	min-width:100%;
}

.main{
	width:auto;
	padding:30px 20px;
}

.right_col{
	width:65%;
}

.left_col{
	width:28%;
}

header .main{
	padding:20px 20px 10px;
}

header .mail{
	right:20px;
}

/* 魔導コミック */

#madou .main{
	padding:30px 1% 30px 52%;
	width:46%;
	margin:0;
}

}


@media screen and (max-width: 850px) {

ul.page_menu li{
	display:block;
	width:auto;
	margin-right:0;
}

ul.page_menu li a{
	height:40px;
	font-size:20px;
	line-height:40px;
}

/* コミック魔導物語 */

#madou img.comic_topimg{
	position:absolute;
	top:-20px;
	left:50%;
	margin-left:-300px;
	width:600px;
}

#madou .main{
	padding:220px 20px 30px;
	width:auto;
}

#madou h2{
	padding:10px;
	text-align:center;
}

#madou h2,#madou p{
	background:rgba(255,255,255,0.7);
	text-shadow:1px 1px 1px #fff,-1px -1px 1px #fff,-1px 1px 1px #fff,1px -1px 1px #fff;
	color:#666;
}

#madou p{
	padding:0;
	margin-bottom:20px;
}
}

@media screen and (max-width: 750px) {

.right_col{
	float:none;
	width:100%;
	margin-bottom:50px;
}

.left_col{
	float:none;
	width:100%;
	margin-bottom:20px;
}

header .mail{
	position:static;
	float:right;
	margin-right:3px;
	margin-top:5px;
}

/* コンパイルサウンド */

#compile_cd ul{
	padding-top:15px;
}

#compile_cd .li-4,#compile_cd .li-2{
	margin:0;
	padding:0;
}

#compile_cd .li-1,#compile_cd .li-3{
	float:none;
	text-align:center;
	margin-bottom:5px;
}

#compile_cd .li-4{
	margin-bottom:40px;
}

/* コンパイルゲームカタログ */

#compile_game ul{
	margin:0 0 40px;
}

#compile_game li{
	width:auto;
	float:none;
	margin-top:20px;
}

/* ZANAC */

#zanac h2{
	float:left;
	width:68%;
}

#zanac .zanac_topimg{
	width:30%;
	margin:0 0 10px 2%;
}

#zanac p,#zanac ul{
	width:auto;
}

#zanac ul{
	clear:both;
}

}


@media screen and (max-width: 640px) {

.main{
	width:auto;
	padding:20px 10px;
}

h2{
	font-size:36px;
	letter-spacing: 0;
}

header .main{
	padding:20px 10px 10px;
}

header h1{
	width:280px;
	height:129px;
	float:none;
	margin:0 auto 15px;
}

.egg_tweet{
	float:none;
	position:absolute;
	left:5px;
	top:10px;
}

.mado_countdown{
	margin:20px auto 5px;
}

.mado_countdown:after {
  content: "";
  position: absolute;
  top: -21px;
  height: 0;
  width: 0;
  left:auto;
  right:20px;
  border: 11px solid transparent;
  border-bottom: 11px solid #fff;
}

h3{
	padding:10px 0 5px;
}

.twitter{
	float:none;
	width:100%;
	text-align:center;
	margin:10px auto 0;
}


/* LINEスタンプ */

#line_stamp img.mainimg{
	float:none;
	margin:0 auto 10px;
	width:70%;
}

#line_stamp .line_rcol{
	float:none;
	width:auto;
}

#line_stamp ul li{
	width:46%;
	text-align:center;
	padding:5px 2%;
}

/* コンパイルサウンド */

#compile_cd li h4{
	font-size:30px;
}

/* プロジェクトEGGを遊ぼう！ */

#egg_cs{
	background-position:right 5px bottom 10px;
	background-size:500px auto;
}

.game_list{
	margin:0 auto;
	float:none;
	padding:20px 0 0;
	width:auto;
	max-width:300px;
}

.game_list .title_number{
	font-size:70px;
}

/* ZANAC */

#zanac li{
	text-align:center;
}

#zanac a img{
	display:block;
	margin:0 auto 5px;
	vertical-align:bottom;
}

/* コミック魔導物語 */

#madou img.comic_topimg{
	position:absolute;
	top:-20px;
	left:5%;
	right:5%;
	margin:0;
	width:90%;
}

#madou .main{
	padding:150px 10px 30px;
}

/* iPhone */

#sumaho ul{
	margin:0;
	text-align:left;
}

#sumaho li{
	width:46%;
	padding:10px 1%;
}


/* フロートメニュー部分 */

#floatSideMenu{
	bottom:-30px;
	right:-15px;
	z-index: 100;
}

#floatSideMenu a{
	width: 73px;
	height: 100px;
}

/* メールフォーム */

.wpcf7 textarea{
	width:100%;
}


}

@media screen and (max-width: 592px) {
	
.button .disc_play{
	margin-right:0;
}
	

}

@media screen and (max-width: 570px) {
	
.button .disc_play{
	margin-bottom:10px;
}
	

}

