@charset "utf-8";
/* CSS Document */
* {
  margin: 0;
  padding: 0;
}

body{
	padding: 0;
	color:#000;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background: #2F2F2F;
}
.pc { display: block !important; }
.sp { display: none !important; }

/*リンク類指定-----------------------------*/
a:link {
	color:#245fbb;
	text-decoration:none;
}
a:visited {
	color:#f3f;
}
a:hover {
	text-decoration:none;
}
a img:hover {
	opacity: 0.7 ;
}
/*リンク類指定-----------------------------*/

/*ヘッダー&フッター-----------------------------*/
#sod_header_white{ top:0; position:fixed; width:100%; height:40px; background:#FFF; z-index:1000; }
#sod_header_black{ top:0; position:fixed; width:100%; height:40px; background:#000; z-index:1000; }
#sodBtn{ float:left; margin: 4px; }
#sod_fotter{ text-align:center; width:100%; background-color:#000000; overflow:hidden; line-height:1.3em; padding:10px 0px 0px 0px;}
#sod_copy{ font-size:10px; color:#999; margin:0.3%; }
#sod_copy a{ color:#C00; }
/*ヘッダー&フッター-----------------------------*/

.main{
	width: 100%;
	text-align: center;
	margin: 0 auto 0;
}
#header{
	width: 100%;
	background: #fff;
	text-align: left;
	border-bottom: solid 3px #ea559a;
	padding: 7% 0 0;
}
#header img{
	width: 316px;
	padding: 0 0 20px 100px;
}
#comment_base{
	width: 100%;
	text-align: center;
}
.comment{
	width: 80%;
	padding: 2% 0 5%;
	margin: 0 auto 0;
	font-size: 1.0em;
	color: #FFFFFF;
	text-align: left;
}
.title{
	width: 24%;
	padding: 0.5%;
	margin: 3% 65% 0 5%;
	font-size: 1.2em;
	color: #ffffff;
	font-weight: bold;
	border-radius: 10px;
	border: solid 1px #ffffff;
}
#bt_base{
	width: 100%;
	text-align: center;
}
#bt_base p{
	width: 60%;
	padding: 2%;
	margin: 3% auto 10%;
	font-size: 1.6em;
	color: #ffffff;
	font-weight: bold;
	border-radius: 10px;
	background: linear-gradient(#f76f6f, #d61c3e);
	text-align: center;
}
#bar_base{
	width: 100%;
	text-align: center;
	padding: 0.5% 0;
	font-size: 1.6em;
	font-weight: bold;
	color: #ffffff;
	border-bottom: solid 3px #adadad;
}
#bar_base p{
	text-align: left;
	padding: 0 0 0 8%;
}
#jk_base{
	width: 100%;
	margin: 0 auto 0;
	padding: 5% 0 8%;
}
#jk_base img{
	width: 100%;
	box-shadow: 0px 0px 3px 2px #000000;
	border: 8px solid #fff;
}
#jk_base ul{
	width: 100%;
}
#jk_base li{
	display: inline-block;
}
.jk{
	width: 50%;
	padding: 1%;
}
.text01{
	width: 30%;
	padding: 2%;
	vertical-align: top;
}
.title01{
	width: 96%;
	padding: 12% 0 3%;
	font-size: 1.6em;
	color: #f34394;
	font-weight: bold;
	border-bottom: 3px solid #f34394;
	text-align: left;
}
.title02{
	text-align: left;
	font-size: 1.0em;
	color: #ffffff;
	padding: 5% 1% 3%;
	line-height: 1.8em;
}
#lineup_base{
	width: 100%;
	margin: 0 auto 0;
	padding: 5% 0 3%;
}
#lineup_base img{
	width: 100%;
}
#lineup_base ul{
	width: 100%;
}
#lineup_base li{
	display: inline-block;
	width: 160px;
	padding: 1%;
}
#lineup_base p{
	width: 100%;
	margin-top: 4%;
	background: linear-gradient(#6D737A, #485059);
	padding: 6% 0;
	color: #ffffff;
	border-radius: 5px;
	font-size: 0.9em;
}
#lineup_comment{
	width: 90%;
	margin: 0 auto 0;
	padding: 2% 0;
	text-align: left;
}
#lineup_comment p{
	width: 100%;
	color: #f32b92;
	font-size: 0.8em;
	padding-top: 1%;
}
#footer{
	width: 100%;
	margin: 5% auto 0;
	padding: 5% 0;
}
#footer img{
	width: 140px;
}

/*フェイドイン--------------------*/
.fadein01{
	animation: fadeIn 3s ease 0s 1 normal;
	-webkit-animation: fadeIn 3s ease 0s 1 normal;
}
@keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}



/* Sma/////////////////////////CSS */
@media screen and ( max-width:640px ){

.pc { display: none !important; }
.sp { display: block !important; }

body{
	padding: 0;
	color:#000;
	font:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/*ヘッダー&フッター-----------------------------*/
.main{
	width: 100%;
	text-align: center;
	margin: 0 auto 0;
}
#header{
	width: 100%;
	background: #fff;
	text-align: center;
	border-bottom: solid 2px #ea559a;
	padding: 15% 0 0;
}
#header img{
	width: 200px;
	padding: 5%;
}
#comment_base{
	width: 100%;
	text-align: center;
}
.comment{
	width: 80%;
	padding: 2% 0 10%;
	margin: 3% auto 0;
	font-size: 0.9em;
	color: #ffffff;
}
.title{
	width: 80%;
	padding: 2%;
	margin: 6% auto 0;
	font-size: 1.0em;
	color: #ffffff;
	font-weight: bold;
	border-radius: 10px;
	border: solid 1px #ffffff;
}
#bt_base{
	width: 90%;
	margin: 0 auto 0;
	padding: 5% 0;
}
#bt_base p{
    width: 96%;
    padding: 2%;
    margin: 3% auto 10%;
    font-size: 1.2em;
    color: #ffffff;
    font-weight: bold;
    border-radius: 10px;
    background: linear-gradient(#f76f6f, #d61c3e);
    text-align: center;
}
#bar_base{
	width: 100%;
	text-align: center;
	padding: 1% 0;
	font-size: 1.2em;
	font-weight: bold;
	color: #fff;
}
#bar_base p{
	text-align: left;
	padding: 0 0 0 8%;
}
#jk_base{
	width: 100%;
	margin: 0 auto 0;
}
#jk_base img{
	width: 90%;
	box-shadow: 0px 0px 3px 2px #000000;
	border: 0;
}
#jk_base ul{
	width: 100%;
}
#jk_base li{
	display: inline-block;
	width: 96%;
}
.jk{
	width: 90%;
	padding: 1%;
}
.text01{
	width: 30%;
	padding: 2%;
	vertical-align: top;
}
.title01{
	width: 90%;
	padding: 1% 0 3%;
	font-size: 1.2em;
	color: #f34394;
	font-weight: bold;
	border-bottom: 2px solid #f34394;
	text-align: left;
	margin: 0 auto 0;
}
.title02{
	text-align: left;
	font-size: 0.9em;
	color: #ffffff;
	padding: 5% 1% 3%;
	line-height: 1.8em;
	width: 90%;
	margin: 0 auto 0;
}
#lineup_base{
	width: 100%;
	margin: 0 auto 0;
	padding: 5% 0 3%;

}
#lineup_base img{
	width: 100%;
}
#lineup_base ul{
	width: 100%;
}
#lineup_base li{
	display: inline-block;
	width: 28%;
	padding: 1%;
}
#lineup_base p{
    width: 100%;
    margin-top: 4%;
    background: linear-gradient(#6D737A, #485059);
    padding: 6% 0;
    color: #ffffff;
    border-radius: 5px;
    font-size: 0.9em;
}
#lineup_comment{
	width: 90%;
	margin: 0 auto 0;
	padding: 2% 0;
	text-align: left;
}
#lineup_comment p{
	width: 100%;
	color: #f32b92;
	font-size: 0.8em;
	padding-top: 1%;
}


}