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



/* common, font */

html {
	font-size: 62.5%;
	font-family:Helvetica,Arial, Roboto, “Droid Sans”, “游ゴシック”, YuGothic,“ヒラギノ角ゴ ProN W3″,“Hiragino Kaku Gothic ProN”, “メイリオ”,Meiryo, sans-serif;
}
.sp_font_base {
	font-size: 17px;
}

body {
	-webkit-text-size-adjust: 100%;
	font-size: 16px;
	font-size: 1.6rem;
}


.cf:after {
	content:" ";
	display:block;
	clear:both;
}

a {
	outline:none;
}

a:link,
a:visited {
	color: #1d3994;
	text-decoration: underline;
}
a:hover,
a:active {
	color: #7E97E5;
}

a:hover img,
a:active img,
input.img_btn:hover,
input.img_btn:active,
input.img_submit:hover,
input.img_submit:active {
	opacity: 0.8;
}

img {
	vertical-align: top;
	max-width: 100%;
}

ul.vertical_list > li {
	display: block;
	float: none;
	width: 100%;
}

.indent {
	padding-left: 1em;
}
.indent.dot:before {
	content: "・";
	display: inline;
	margin-left: -1em;
}
.indent.kome:before {
	content: "※";
	display: inline;
	margin-left: -1em;
	font-size: 0.9em;
	vertical-align: top;
}

.base_point {
	position: relative;
}

.align_center {
	text-align: center;
}




/* SNSシェアボタン */
.sns_share_box li {
	display: inline-block;
	margin-right: 10px;
}
.sns_share_box li:last-child {
	margin-right: 0;
}
.sns_share_box li a {
	display: block;
}
.sns_share_box li a img {
	width: 30px;
	height: 30px;
}




/*-----------------------
	page loader
-----------------------*/

#page-loader {
	display:block;
	background-color: #000;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	height: 100%;
}
#page-loader img {
	display: block;
	position: absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin:auto;
}
.noscript_message {
	position: absolute;
	top: 40%;
	width: 100%;
	text-align: center;
	color: #fff;
}



/*-----------------------
	layout
-----------------------*/

.wrapper {
	width: 100%;
	overflow: hidden;
	position: relative;
	z-index: 0;
}


/* header */
.header {
	position: relative;
	z-index: 100;
}
.header .header_bg {
	position: fixed;
	z-index: 9999;
	width: 100%;
	background-color: rgba(0,0,0,0.6);

}
.h_logo {
	float: left;
	width: 210px;
}
.h_logo img {
	margin: -3px 0 2px -10px;
}

/* nav */
.h_nav {
	float: right;
	position: relative;
}
.h_nav li {
	display: inline-block;
}
.h_nav li a {
	display: block;
	margin: 0;
	padding: 21px 6px;
}
.h_nav li img {
	height: 30px;
}
#h_nav_icon {
	position: absolute;
	top: 0;
	left: -35px;
	z-index: -1;
	margin-left: 800px;
	opacity: 0;
}

/* gnav newアイコン */
.header .new {
	position: relative;
}
.header .new::before {
	content: "";
	display: block;
	position: absolute;
	top: 6px;
	left: 5px;
	z-index: 0;
	width: 50px;
	max-width: 60px;
	height: 35px;
	background: url(./images/magica/top/movie/icon_new.png) left top no-repeat;
	background-size: 100%;
	pointer-events: none;
}


/* メインラップ */
#main_wrap {
	position: relative;
	z-index: 0;
}

.wrapper_inner {
	max-width: 1024px;
	margin: 0 auto;
}
.inner_content {
	padding: 0 40px 20px;
}


/* table-cell用 */
.t_cont {
	display: table;
	width: 100%;
}
.t_cell {
	display: table-cell;
}

/* inline-blockの隙間をなくす */
ul {
  letter-spacing: -0.5em;
}
li {
  letter-spacing: normal;
}





/*----------------
	bg
----------------*/

.bg_backmost {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -99999;
	background: url(../../../images/magica/common/bg/bg_backmost.jpg) center top no-repeat;
	background-size: cover;
}


/*----------------------
	slanting_box
----------------------*/

.main_box {
	position: relative;
	padding: 60px 0;
	z-index: 1;
}
.slanting_box {
	position: absolute;
	top: 0;
	z-index: -1;
	width: 100%;
	overflow: hidden;
	padding-bottom: 20%;
	-webkit-transform: translate3d(0,0,0);
}
.slanting_box.last {
	padding-bottom: 0;
}

.slanting_box img {
	backface-visibility: hidden;
}


.slanting_box > .asset_content {
	box-sizing: border-box;
	/* max-width: 1024px; */
	/* margin: 6% auto; */
	height: 1000px;
}
.sl_01 {
	-moz-transform: skewY(4deg);
	-webkit-transform: skewY(4deg);
	transform: skewY(4deg);
	-webkit-backface-visibility: hidden;
}
.sl_01 > .asset_content,
.sl_01 > .content_bg,
.sl_01 > .bg_attachment {
	-moz-transform: skewY(-4deg);
	-webkit-transform: skewY(-4deg);
	transform: skewY(-4deg);
	-webkit-backface-visibility: hidden;
}

.sl_02 {
	-moz-transform: skewY(-8deg);
	-webkit-transform: skewY(-8deg);
	transform: skewY(-8deg);
}
.sl_02 > .asset_content,
.sl_02 > .content_bg,
.sl_02 > .bg_attachment {
	-moz-transform: skewY(8deg);
	-webkit-transform: skewY(8deg);
	transform: skewY(8deg);
	-webkit-backface-visibility: hidden;
}

/* コンテンツ背景　オーバーレイアイテム */
.content_bg, .bg_attachment {
	position: absolute;
	top: 0;
	left: -25%;
	z-index: -2;
	width: 150%;
	height: 200%;
	margin-top: -6%;
}
.bg_attachment {
	z-index: -1;
	width: 100%;
	left: 0;
}
.sl_01 .bg_line_top {
	position: absolute;
	top: 0;
	right: -10%;
	width: 120%;
	height: 50px;
	background-color: #000;
	-moz-transform: rotate(3deg);
	-webkit-transform: rotate(3deg);
	transform: rotate(3deg);
	-webkit-backface-visibility: hidden;
	margin-top: -26px;
}
.sl_02 .bg_line_top {
	position: absolute;
	top: 0;
	left: -10%;
	width: 120%;
	height: 50px;
	background-color: #000;
	-moz-transform: rotate(-7deg);
	-webkit-transform: rotate(-7deg);
	transform: rotate(-7deg);
	-webkit-backface-visibility: hidden;
	margin-top: -26px;
}

/* responsive */
@media (min-width: 1024px) {
.pc_none {
	-moz-transform: skewY(0deg);
	-webkit-transform: skewY(0deg);
	transform: skewY(0deg);
}
.pc_none > .asset_content {
	-moz-transform: skewY(0deg);
	-webkit-transform: skewY(0deg);
	transform: skewY(0deg);
}
}



/*----------------
  footer, totop
----------------*/


/* ToTop */
.totop_btn a {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 100px;
	z-index: 10;
}




/* footer */
#footer_wrap {
	position: relative;
	z-index: 10;
	background: #343038;
	color: #fff;
}
#footer_wrap .inner_content {
	padding-bottom: 0;
}
.f_top {
	padding: 36px 0;
	text-align: center;
	letter-spacing: -1em;
}

.product_info {
	letter-spacing: -1em;
	display: inline-block;
	width: 46%;
	text-align: left;
	vertical-align: middle;
	background: #000;
	line-height: 1.4;
	padding: 15px;
	margin: 0 2%;
	border-radius: 6px;
}
.product_info .app_icon {
	letter-spacing: normal;
	display: inline-block;
	vertical-align: middle;
	width: 25%;
}
.product_info .info_text {
	letter-spacing: normal;
	display: inline-block;
	vertical-align: middle;
	padding-left: 4%;
	box-sizing: border-box;
	max-width: 75%;
	font-size: 14px;
	font-size: 1.4rem;
}
.info_text dt {
	float: left;
	width: 5em;
}
.info_text dt::after {
	content: ":";
	display: inline;
	float: right;
}
.info_text dd {
	padding-left: 5.5em;
}

.f_dl_box {
	display: inline-block;
	width: 46%;
	margin: 0 2%;
	letter-spacing: normal;
	vertical-align: middle;
}
.f_dl_box ul {
	text-align: center;
}
.f_dl_box li {
	text-align: center;
	display: inline-block;
	margin: 2%;
	width: 46%;
}
.f_dl_box li a {
	display: inline-block;
	width: 100%;
	border-radius: 8%;
	box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.f_dl_box li a img {
	width: 100%;
}



.f_bottom {
	text-align: center;
}

.f_bottom .sns_share_box {
	border-top: 1px dashed #fff;
	padding: 10px 0;
}
.f_nav {
	border-top: 1px dashed #fff;
	border-bottom: 1px solid #fff;
	line-height: 2.1;
}

.f_nav li {
	display: inline-block;
	margin: 0 1em;
	line-height: 1;
}

.f_nav a{
	text-decoration: none;
	color: #fff;
}
.f_nav a:hover,
.f_nav a:active {
	color: #ddd;
}

.copyright {
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 3.7;
}


/*-------------------------------------
	responsive
-------------------------------------*/


/*------------------
	PC
------------------*/

.show_pc,
.show_pc_tab  {
	display: block;
}
.show_tab,
.show_sp,
.show_tab_sp {
	display: none;
}

/*------------------
	tablet
------------------*/
@media (max-width: 1023px) {
	
.show_pc {
	display: none;
}
.show_pc_tab,
.show_tab,
.show_tab_sp {
	display: block;
}
.show_sp {
	display: none;
}



/* header */
.header .header_bg {
	background-color: transparent;
	position: static;
	height: 140px;
}

.h_logo {
	width: 360px;
}
.h_logo img {
	margin: 0;
}



/* nav */
.sp_nav.overlay_nav {
	display: none;
	float: none;
	background-color: rgba(0,0,0,0.3);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	height: 100%;
	overflow-y: auto;
}
.overlay_nav nav {
	padding: 5%;
}
.overlay_nav ul {
	background-color: rgba(0,0,0,0.9);
	padding: 50px 10px;
	box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.sp_nav li {
	display: block;
	text-align: center;
}
.sp_nav li a {
	display: inline-block;
	padding: 10px;
	margin: 10px 0px;
}
.sp_nav li img {
	height: 60px;
}
#h_nav_icon {
	display: none;
}

.hum_menu {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 999;
}
.hum_menu .hum_menu_btn {
	display: block;
	cursor: pointer;
}
.hum_menu_btn img {
	width: 100px;
	height: 100px;
}



/* slanting_box */
.main_box {
	position: relative;
	padding: 20px 0 40px;
}
.slanting_box {
	z-index: 0;
}


.wrapper_inner {
	max-width: 768px;
	margin: 0 auto;
}
.inner_content {
	padding: 0 15px 30px;
}


.f_nav ul {
	margin: 0 auto;
	padding: 1em 0;
}
.f_nav li {
	display: block;
	margin: 1.5em 0;
}

/* bg */
.bg_backmost {
	background: url(./images/magica/common/bg/bg_backmost_sp.jpg) center top no-repeat;
	background-size: 110%;
}


/* footer */
.product_info,
.f_dl_box {
	width: 100%;
	display: block;
	margin: 0;
}
.f_dl_box {
	margin-top: 30px;
}


}
/*------------------
	smart phone
------------------*/
@media (max-width: 767px) {


.show_pc,
.show_pc_tab,
.show_tab {
	display: none;
}

.show_tab_sp,
.show_sp {
	display: block;
}

.wrapper_inner {
	min-width: 640px!important;
}

.h_logo {
	margin-left: 10px;
}

.wrapper_inner {
	width: 100%;
}


.totop_btn a {
	bottom: 0px;
	right: 0px;
	width: 125px;
}



.sns_share_box li {
	margin-right: 20px;
}
.sns_share_box li a img {
	width: 60px;
	height: 60px;
}


.product_info .info_text {
	font-size: 12px;
	font-size: 1.2rem;
}


}


@media (max-width: 640px) {

body {
	width: 640px;
}

}