@charset "shift_jis";


/* ========================================
	#index
======================================== */

#wrapper {
	background-image: none;
	background-color: #FFFFFF;
}

#mainvisual {
	background: url(../images/bg01.png) center top repeat;
}
#mainvisual2 {
	background: url(../images/bg_main1.png) center top no-repeat;
}
#mainvisual3 {
	background: url(../images/bg_main2.png) center 190px no-repeat;
}
#mainvisual4 {
	background: url(../images/bg_main3.png) center 440px no-repeat;
}
#mainvisual5 {
	height: 844px;
	background: url(../images/bg_main4.png) center bottom no-repeat;
}

#mainvisual .inner {
	position: relative;
} 

#mainvisual .ttl {
	position: absolute;
	top: 218px;
	left: 265px;
}

#mainvisual .btn-download {
	position: absolute;
	top: 743px;
	left: 788px;
	z-index: 11;
}
#mainvisual .btn-download .update {
	position: absolute;
	top: -8px;
	left: 112px;
}

/* --------------------------------
	#topnavi
-------------------------------- */
#topnavi {
	height: 100px;
	position: relative;
	z-index: 10;
}

#topnavi .topnavi01,
#topnavi .topnavi02,
#topnavi .topnavi03,
#topnavi .topnavi04,
#topnavi .topnavi05 {
	position: absolute;
	top: 0;
}

#topnavi .topnavi01 {
	left: 25px;
	z-index: 13;
}

#topnavi .topnavi02 {
	left: 207px;
	z-index: 14;
}

#topnavi .topnavi03 {
	left: 387px;
	z-index: 12;
}

#topnavi .topnavi04 {
	left: 554px;
	z-index: 13;
}

#topnavi .topnavi05 {
	left: 740px;
}

#topnavi .topnavi01 .update {
	position: absolute;
	top: 0;
	right: -11px;
}
#topnavi .topnavi02 .update {
	position: absolute;
	top: 0;
	right: -11px;
}
#topnavi .topnavi03 .update {
	position: absolute;
	top: 0;
	right: -4px;
}
#topnavi .topnavi04 .update {
	position: absolute;
	top: 0;
	right: -13px;
}
#topnavi .topnavi05 .update {
	position: absolute;
	top: 0;
	right: -10px;
}


#topmain {
	padding: 0 0 0 0;
	width: 100%;
	background: #000000 url(../images/foot_bg01.png) center bottom repeat-x;
}

#topmain #main-top {
	margin: 0 auto;
	width: 920px;
	/*height: 487px;*/
	position: relative;
}

#topmain .addsong {
	margin: 0 auto;
	width: 860px;
	height: 75px;
	position: relative;
	top: -40px;
	/*left: 30px;*/
}

#topmain .addsong .add-ttl {
	position: absolute;
	top: -17px;
	left: 340px;
}

#topmain .bnr-listening {
	margin: 0 auto;
	width: 779px;
	height: 110px;
	position: relative;
	top: -20px;
}

#topmain .info {
	width: 920px;
	position: relative;
	top: 0;
	left: 0;
}

#topmain .info a:link, a:visited {
	text-decoration: underline;
	color: #FFF;
	outline: none;
}
#topmain .info a:hover, a:active {
	text-decoration: none;
	color: #FFF;
	outline: none;
}


#topmain .info-ttl {
	position: absolute;
	top: -17px;
	left: 370px;
}

#topmain .info-main {
	/*background: url(../images/info_bg_top.png) 0 0 no-repeat;*/
	background: url(../images/info_bg_main.png) 0 0 repeat-y;
}

#topmain .info-bg-btm {
	padding-bottom: 10px;
	background: url(../images/info_bg_btm.png) left bottom no-repeat;
}

#topmain .info-bg-top {
	padding-top: 40px;
	background: url(../images/info_bg_top.png) left top no-repeat;
}

#topmain .info-data {
	padding: 0 15px 10px 15px;
	color: #FFFFFF;
	font-size: 18px;
	line-height: 1.5;
}

#topmain .info-data a,
#topmain .info-data a:visited {
	color: inherit;
}

#topmain .info-data > dt {
	width: 120px;
	float: left;
}

#topmain .info-data > dd {
	width: 760px;
	float: right;
}


#topmain .main-body {
	margin-top: 20px;
}

#topmain #spec {
	width: 756px;
	height: 132px;
	background: url(../images/202006_spec_bg.png) 0 0 no-repeat;
	position: relative;
    margin: 0 auto;
}

#topmain #spec .spec-package {
	position: absolute;
	top: 19px;
	left: 21px;
}

#topmain #spec .spec-ico {
	position: absolute;
	top: 19px;
	left: 127px;
}

#topmain #spec .spec-cero {
	position: absolute;
	top: 19px;
	left: 176px;
}

#topmain #spec .spec-img01 {
	position: absolute;
	top: 19px;
	left: 273px;
}

#topmain #spec .spec-img02 {
	position: absolute;
	top: 44px;
	left: 273px;
}

#topmain #spec .spec-img03 {
	position: absolute;
	top: 71px;
	left: 273px;
}

#topmain #spec .spec-img04 {
	position: absolute;
	top: 77px;
	left: 186px;
}

#topmain #spec .spec-img04 .more {
	position: absolute;
	top: 0;
	left: 244px;
}

#topmain #spec .spec-network {
	position: absolute;
	top: 71px;
	left: 127px;
}

#topmain #spec .spec-btn01 {
	position: absolute;
	top: 20px;
	left: 557px;
}

#topmain #spec .spec-btn02 {
	position: absolute;
	top: 130px;
	left: 421px;
}

#topmain .main-bnr {
	width: 222px;
	float: right;
}

#topmain .main-bnr > ul {
}


#topmain .bnr-btm {
	margin-top: 20px;
}


#topmain .footnavi {
	padding: 25px 0;
	/*position: relative;*/
}

/* ========================================
	#footer-btm
======================================== */
#footer-btm {
	padding: 20px 0;
	/*background: #FFFFFF url(../images/footer_btm_bg.png) 0 0 repeat-x;*/
}

#footer-btm .inner {
	position: relative;
}
#footer-btm .copyright {
	padding: 0 0 0 20px;
}

#footer-btm-navi {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	left: 609px;
}


/* ========================================
	#comic
======================================== */
#mainvisual {
	position: relative;
	z-index: 2;
}
#mainwrap {
	position: relative;
	z-index: 5;
}
#comic {
	position: relative;
	top: -100px;
	z-index: 5;
	width: 100%;
	height: 844px;
	overflow: hidden;
}
#comic_bg {
	display: none;
	position: absolute;
	top: 0;
	width: 100%;
	height: 844px;
	background: #000000;
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
}
#slide {
	position: relative;
	z-index: 5;
	top: 100px;
	width: 920px;
	margin: 0 auto;
}
#slide #slide-element {
	position: relative;
	width: 920px;
}
#slide #slide-element .block {
	position: relative;
	left: 0;
	width: 920px;
}
#slide #slide-element .frame01,
#slide #slide-element .frame02,
#slide #slide-element .frame03,
#slide #slide-element .frame04,
#slide #slide-element .frame05,
#slide #slide-element .frame06,
#slide #slide-element .frame07,
#slide #slide-element .frame08 {
	display: none;
}


#slide #slide-element .frame01 {
	position: absolute;
	top: 40px;
	left: 109px;
}
#slide #slide-element .frame02 {
	position: absolute;
	top: -1px;
	left: 451px;
}
#slide #slide-element .frame03 {
	position: absolute;
	top: 312px;
	left: 46px;
}
#slide #slide-element .frame04 {
	position: absolute;
	top: 310px;
	left: 420px;
}
#slide #slide-element .frame05 {
	position: absolute;
	top: 46px;
	left: 104px;
}
#slide #slide-element .frame06 {
	position: absolute;
	top: 48px;
	left: 475px;
}
#slide #slide-element .frame07 {
	position: absolute;
	top: 341px;
	left: 113px;
}
#slide #slide-element .frame08 {
	position: absolute;
	top: 343px;
	left: 476px;
}

#slide .frame-no {
	display: none;
}
#slide .frame-no01 {
	position: absolute;
	top: 286px;
	left: 414px;
}
#slide .frame-no02 {
	position: absolute;
	top: 285px;
	left: 482px;
}
#slide .frame-no03 {
	position: absolute;
	top: 349px;
	left: 413px;
}
#slide .frame-no04 {
	position: absolute;
	top: 348px;
	left: 483px;
}


#slide #prev {
	display: none;
	position: absolute;
	top: 282px;
	left: 8px;
	cursor: pointer;
}
#slide #next {
	display: none;
	position: absolute;
	top: 282px;
	right: 9px;
	cursor: pointer;
}
#slide #shimobe-mark {
	/*display: none;*/
	position: absolute;
	top: 444px;
	right: 12px;
	z-index: 20;
}

/* ========================================
	#header-logo
======================================== */
#header-logo {
	height: 100px;
	display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;

}

#header-logo .wiiu {
	top: 40px;
}

#header-logo .caution {
	margin: 0 auto;
	padding: 0 100px 0 0;
	width: 960px;
	box-sizing: border-box;
}

#header-logo .caution dt {
	font-size: 20px;
	font-weight: bold;
	color: #FF0000;
	margin: 0;
	padding: 0;
	line-height: 1.5;
	letter-spacing: -0.05em;
}

#header-logo .caution dd {
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.4;
	letter-spacing: -0.05em;
}

#header-logo .caution dd a {
	color: #333;
}

@media screen and (min-width: 1150px) {
	#header-logo .caution .narrow {
		display: none;
	}
}