@charset "utf-8";

/* ======================================================
 * layout.css
 * ------------------------------------------------------
 * WIRE FRAME ********************************************
 * Body
 * Navigation
 * Header
 * Contents
 * Footer
 * RESPONSIVE *******************************************
 * - 769px <= width <= 1039px
 * ClearFix
====================================================== */

/********************************************************

  WIRE FRAME

********************************************************/

/* Body
------------------------------------------------------ */
#pageContainer {
}

/*----- side -----*/
#sideContainer {
	position: absolute;
	left: -300px;
	top: 0;
	width: 300px;
	background: #282828;
	-webkit-box-shadow: -5px -1px 2px 0px rgba(0,0,0,0.2) inset;
	   -moz-box-shadow: -5px -1px 2px 0px rgba(0,0,0,0.2) inset;
	    -ms-box-shadow: -5px -1px 2px 0px rgba(0,0,0,0.2) inset;
	     -o-box-shadow: -5px -1px 2px 0px rgba(0,0,0,0.2) inset;
	        box-shadow: -5px -1px 2px 0px rgba(0,0,0,0.2) inset;
	/* overflow-y: auto; */
	z-index: 10001;
}

/*----- main -----*/
#mainContainer {
}


/* Navigation
------------------------------------------------------ */
#globalNavi {
	clear: both;
	padding: 80px 0 0 0;
}

/*----- navigation -----*/
#navigation {
}
/* sideSearch */
#navigation #sideSearch {
	display: none;
	padding: 22px 10px;
}
/* commonMenu */
#navigation .commonMenu {
	border-top: 1px solid #353535;
}
#navigation .commonMenu + .commonMenu {
	margin-top: 30px;
	border-top: none;
}
#navigation .commonMenu > li {
	border-bottom: 1px solid #353535;
}
#navigation .commonMenu > li > a {
	position: relative;
	display: block;
	padding: 15px 45px 12px 20px;
	background: #282828;
	-webkit-box-shadow: -5px -1px 2px 0px rgba(0,0,0,0.2) inset;
	   -moz-box-shadow: -5px -1px 2px 0px rgba(0,0,0,0.2) inset;
	    -ms-box-shadow: -5px -1px 2px 0px rgba(0,0,0,0.2) inset;
	     -o-box-shadow: -5px -1px 2px 0px rgba(0,0,0,0.2) inset;
	        box-shadow: -5px -1px 2px 0px rgba(0,0,0,0.2) inset;
	color: #ffffff;
	font-size: 15px;
	font-size: 1.5rem;
	font-weight: bold;
	text-decoration: none;
}
#navigation .commonMenu > li > a:after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	display: block;
	width: 7px;
	height: 12px;
	margin: -6px 0 0 0;
	background: url(/common_files/images/com_link_ic02.png) no-repeat 0 0;
}
#navigation .commonMenu > li > a:hover {
	background: #232323;
}
/* sideSocial */
#navigation #sideSocial {
	display: none;
}


/* Header
------------------------------------------------------ */
#globalHeader {
	clear: both;
	position: relative;
}
#header {
	clear: both;
}

/*----- headerWrap01 -----*/
.headerWrap01 {
	clear: both;
	position: relative;
	width: 100%;
	height: 80px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	    -ms-box-sizing: border-box;
	     -o-box-sizing: border-box;
          box-sizing: border-box;
	background: #353535;
}
/* siteLogo */
.headerWrap01 #siteLogo {
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -27px 0 0 -31px;
}
/* headerUtility */
.headerWrap01 #headerUtility {
	float: left;
	display: table;
}
.headerWrap01 #headerUtility #menuBtn {
	position: relative;
	display: table-cell;
}
.headerWrap01 #headerUtility #menuBtn > a {
	display: block;
	width: 80px;
	height: 80px;
	background-color: #282828;
	background-image: url(/common_files/images/header_bt01.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	text-indent: -9999px;
	outline: none;
}
.headerWrap01 #headerUtility #menuBtn.active > a {
	background-image: url(/common_files/images/header_bt01on.png);
}
.headerWrap01 #headerUtility #menuBtn > a:hover {
	background-color: #222222;
}
.headerWrap01 #headerUtility #menuBtn .tip {
	position: absolute;
	left: 4px;
	top: 60px;
	display: block;
	width: 229px;
	height: 70px;
	z-index: 20;
}
.headerWrap01 #headerUtility #headerSearch {
	display: table-cell;
	padding: 0 0 0 20px;
	vertical-align: middle;
}
/* headerSocial */
.headerWrap01 #headerSocial {
	float: right;
}
.headerWrap01 #headerSocial .snsMenu {
	display: table;
}
.headerWrap01 #headerSocial .snsMenu > li {
	display: table-cell;
	border-left: 1px solid #4a4a4a;
}
.headerWrap01 #headerSocial .snsMenu > li > a {
	display: block;
	width: 80px;
	height: 80px;
	background-color: #353535;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	text-indent: -9999px;
	outline: none;
}
.headerWrap01 #headerSocial .snsMenu > li.menu01 > a { background-image: url(/common_files/images/com_sns_logo01.png); }
.headerWrap01 #headerSocial .snsMenu > li.menu02 > a { background-image: url(/common_files/images/com_sns_logo02.png); }
.headerWrap01 #headerSocial .snsMenu > li.menu03 > a { background-image: url(/common_files/images/com_sns_logo03.png); }

.headerWrap01 #headerSocial .snsMenu > li > a:hover {
	background-color: #2d2d2d;
}
.headerWrap01 #headerSocial .snsMenu > li.menu01 > a:hover { background-image: url(/common_files/images/com_sns_logo01on.png); }
.headerWrap01 #headerSocial .snsMenu > li.menu02 > a:hover { background-image: url(/common_files/images/com_sns_logo02on.png); }
.headerWrap01 #headerSocial .snsMenu > li.menu03 > a:hover { background-image: url(/common_files/images/com_sns_logo03on.png); }


/* Contents
------------------------------------------------------ */
#globalContents {
	clear: both;
}
#contents {
	clear: both;
}
/*----- main -----*/
#main {
	clear: both;
}

[class*="titleWrap"],
[class*="naviWrap"],
[class*="mainWrap"],
[class*="pathWrap"],
[class*="copyrightWrap"],
[class*="bannerWrap"] {
	clear: both;
	position: relative;
}
[class*="titleWrap"] > *:first-child,
[class*="naviWrap"] > *:first-child,
[class*="mainWrap"] > *:first-child,
[class*="pathWrap"] > *:first-child,
[class*="copyrightWrap"] > *:first-child,
[class*="bannerWrap"] > *:first-child {
	margin-top: 0 !important;
}

/*** titleWrap ***/
.titleWrap01 {
}

/*** naviWrap ***/
.naviWrap01 {
	position: absolute;
	width: 100%;	
	background-color: #535353;
	z-index: 50;
}
#release .naviWrap01 {
	position: inherit !important;
	width: auto !important;
}
/* contentsNavi */
.contentsNavi {
	position: relative;
	height: 40px;
	width: 960px;
	margin: 0 auto;
	-webkit-box-shadow: 12px 0px 5px -6px rgba(69, 69, 69, 0.65), -12px 0px 5px -6px rgba(69, 69, 69, 0.65);
	-moz-box-shadow:    12px 0px 5px -6px rgba(69, 69, 69, 0.65), -12px 0px 5px -6px rgba(69, 69, 69, 0.65);
	box-shadow:         12px 0px 5px -6px rgba(69, 69, 69, 0.65), -12px 0px 5px -6px rgba(69, 69, 69, 0.65);
}
#release .contentsNavi {
	width: auto !important;
}
.contentsNavi .categoryNavi .toggleBtn {
	position: absolute;
	left: 50%;
	margin: 0 0 0 -480px;
	z-index: 10;
}
.contentsNavi .categoryNavi .toggleBtn > a {
	display: block;
	width: 160px;
	height: 40px;
	background-color: #282828;
	background-image: url(/category_files/images/pc_release_bt03.png);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	-webkit-box-shadow: 12px 0px 5px -6px rgba(69, 69, 69, 0.65);
	-moz-box-shadow:    12px 0px 5px -6px rgba(69, 69, 69, 0.65);
	box-shadow:         12px 0px 5px -6px rgba(69, 69, 69, 0.65);
}
.contentsNavi .categoryNavi .toggleBtn > a:hover {
	background-color: #222222;
}
.contentsNavi .categoryNavi .toggleBtn.open > a {
	background-image: url(/category_files/images/pc_release_bt04.png);
}
.contentsNavi > p,
.contentsNavi > ul > li {
	position: relative;
	background-color: #535353;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
	line-height: 40px;
}
.contentsNavi > ul > li:hover {
	background: #4a4a4a;
}
.contentsNavi > ul > li.currentNav {
	display: none;
}
.contentsNavi > ul > li.selected {
	background: #282828;
}
.contentsNavi > p.selected:after,
.contentsNavi > ul > li.selected:after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -24px;
	width: 0;
	height: 0;
	margin: 0 0 0 -8px;
	border-top: 12px solid #535353;
	border-right: 8px solid transparent;
	border-bottom: 12px solid transparent;
	border-left: 8px solid transparent;
	z-index: 100;
}
.contentsNavi > ul > li.selected:after {
	border-top: 12px solid #282828;
}
.contentsNavi > ul > li > a {
	display: block;
	color: #ffffff;
	text-decoration: none;
}
.contentsNavi > ul > li.clone {
	display: none !important;
}
/* childNavi */


/* twoNavi */
[class*="CateTopNavi"] > ul > li {
	float: left;
	border-left: 1px solid #353535;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	    -ms-box-sizing: border-box;
	     -o-box-sizing: border-box;
          box-sizing: border-box;
}
[class*="CateTopNavi"] > ul > li:first-child {
	border-left: 0;
}
.twoCateTopNavi > ul > li {
	width: 480px;
}
.threeCateTopNavi > ul > li {
	width: 320px;
}
.fourCateTopNavi > ul > li {
	width: 240px;
}
.fiveCateTopNavi > ul > li {
	width: 192px;
}
.sixCateTopNavi > ul > li {
	width: 160px;
}
/* pulldownNavi */
.pulldownNavi {
	position: relative;
}
.pulldownNavi:hover {
	cursor: pointer;
}
.pulldownNavi > ul {
	position: absolute;
	left: 0;
	top: 40px;
	width: 100%;
	background: -webkit-linear-gradient(top,  #3e3e3e 0%,#3e3e3e 2%,#424242 4%,#444444 6%,#4a4a4a 8%,#4a4a4a 100%);
 		 background: -moz-linear-gradient(top,  #3e3e3e 0%, #3e3e3e 2%, #424242 4%, #444444 6%, #4a4a4a 8%, #4a4a4a 100%);
			background: -ms-linear-gradient(top,  #3e3e3e 0%,#3e3e3e 2%,#424242 4%,#444444 6%,#4a4a4a 8%,#4a4a4a 100%);
			 background: -o-linear-gradient(top,  #3e3e3e 0%,#3e3e3e 2%,#424242 4%,#444444 6%,#4a4a4a 8%,#4a4a4a 100%);
					background: linear-gradient(to bottom,  #3e3e3e 0%,#3e3e3e 2%,#424242 4%,#444444 6%,#4a4a4a 8%,#4a4a4a 100%);
		 -pie-background: linear-gradient(#3e3e3e 0%,#3e3e3e 2%,#424242 4%,#444444 6%,#4a4a4a 8%,#4a4a4a 100%);
}
.pulldownNavi > ul > li {
	border-top: 1px solid #353535;
}
.pulldownNavi > ul > li:first-child {
	border-top: 0;
}
.pulldownNavi > ul > li > a {
	color: #ffffff;
	display: block;
}

/*** mainWrap ***/
.mainWrap01 {
	padding: 40px 0 50px;
	background-color: #e8e8e8;
	z-index: 10;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	.mainWrap01 {
		z-index: 2;
	}
}
.mainWrap01.withArrow {
	position: relative;
	padding-bottom: 80px;
}
.naviWrap01 + .mainWrap01 {
	margin-top: 40px;
}
#release .mainWrap01 {
	margin-top: 0;
}
.mainWrap02 {
	padding: 60px 0;
	background-color: #ffffff;
}
.mainWrap02.withArrow {
	position: relative;
}
.titleWrap01 + .mainWrap02 {
	padding: 40px 0;
}
.mainWrap03 {
	padding: 40px 0;
	min-height: 420px;
	background: url(/common_files/images/com_bg04.png) no-repeat 50% 100%;
}
.mainWrap03.withArrow {
	padding-bottom: 70px;
	position: relative;
}
.mainWrap04 {
	padding: 40px 0;
	background-color: #ffffff;
	background: url(/common_files/images/com_bg05.png) no-repeat 50% 100% #282828;
}
.mainWrap02.withArrow + .mainWrap04 {
	padding-top: 70px;
}
.mainWrap04.withArrow {
	padding-bottom: 69px;
	position: relative;
}
.mainWrap05 {
	padding: 15px 0 60px;
	background-color: #282828;
}
.mainWrap06 {
	padding: 0 0 50px;
	background-color: #e8e8e8;
	z-index: 10;
}
.mainWrap01.withArrow:after,
.mainWrap03.withArrow:after,
.mainWrap04.withArrow:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 30px;
	background: url(/common_files/images/com_bg01.png) no-repeat 50% 100%;
}
.mainWrap02.withArrow:after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -60px;
	width: 0;
	height: 0;
	margin: 0 0 0 -67px;
	border-top: 30px solid #ffffff;
	border-right: 67px solid transparent;
	border-bottom: 30px solid transparent;
	border-left: 67px solid transparent;
	z-index: 10000;
}

/* articleLayout */
.articleLayout {
	clear: both;
	width: 960px;
	margin: 0 auto;
}
.articleLayout > *:first-child {
	margin-top: 0 !important;
}
/* contentsLayout */
.contentsLayout {
	clear: both;
	width: 960px;
	margin: 0 auto;
}
.contentsBlock01 + .contentsLayout {
	margin-top: 30px;
}
.contentsLayout + .contentsBlock01 {
	margin-top: 30px;
}
.contentsLayout > *:first-child {
	margin-top: 0 !important;
}
.contentsLayout > .layoutMain {
	float: left;
	width: 630px;
}
.contentsLayout.noSide > .layoutMain {
	float: none;
	width: auto;
}
.contentsLayout > .layoutSide {
	float: right;
	width: 300px;
}
.contentsLayout > .layoutSide + .layoutSide {
	margin-top: 30px;
}
#movie .contentsLayout > .layoutSide.spUpper2 {
	display: none;
}

/* shadowL */
.contentsLayout.shadowL {
	padding-bottom: 30px;
	background: url(/common_files/images/com_shadow_bg08.png) no-repeat 0 bottom;
}

/* mainBlock01 */
.mainBlock01 {
	position: relative;
	background-color: #ffffff;
	height: 100%;
}
.mainBlock01:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -30px;
	width: 100%;
	height: 30px;
	background: url(/common_files/images/com_shadow_bg02.png) no-repeat 50% 0;
}
.contentsLayout.noSide > .layoutMain .mainBlock01:after {
	background: url(/common_files/images/com_shadow_bg01.png) no-repeat 50% 0;
}
.contentsLayout.shadowL >.layoutMain .mainBlock01:after {
	background: none;
}
.mainBlock01 > .detailWrap01 {
	padding: 15px 15px 25px;
}
/* sideBlock01 */
.sideBlock01 {
	position: relative;
	background-color: #ffffff;
}
.sideBlock01 + .sideBlock01 {
	margin-top: 30px;
}
.sideBlock01:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -30px;
	width: 100%;
	height: 30px;
	background: url(/common_files/images/com_shadow_bg03.png) no-repeat 50% 0;
}
.sideBlock01 > .detailWrap01 {
	padding: 15px;
}
/* contentsBlock01 */
.contentsBlock01 {
	clear: both;
	position: relative;
	background-color: #ffffff;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	.contentsBlock01 {
		z-index: 1;
	}
}
.contentsBlock01:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -30px;
	width: 100%;
	height: 30px;
	background: url(/common_files/images/com_shadow_bg01.png) no-repeat 50% 0;
}
.contentsBlock01 + .contentsBlock01 {
	margin-top: 30px;
}

/*** pathWrap ***/
.pathWrap01 {
	border-top: 1px solid #b5b5b5;
	background-color: #d2d2d2;
}
/* topicPath */
.topicPath {
	width: 960px;
	margin: 0 auto;
	border-left: 1px solid #b5b5b5;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	    -ms-box-sizing: border-box;
	     -o-box-sizing: border-box;
          box-sizing: border-box;
}
.topicPath > li {
	position: relative;
	float: left;
	margin: -1px 6px 0 0;
	border-top: 1px solid #b5b5b5;
}
.topicPath > li.into {
	border-right: 1px solid #b5b5b5;
}
.topicPath > li.into:after {
	content: "";
	position: absolute;
	right: -5px;
	top: 50%;
	display: block;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 0;
	border-top: 1px solid #b5b5b5;
	border-right: 1px solid #b5b5b5;
	background: #d2d2d2;
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	     -o-transform: rotate(45deg);
	        transform: rotate(45deg);
	z-index: 2;
}
.topicPath > li a,
.topicPath > li em {
	display: block;
	padding: 15px 15px 15px 10px;
	color: #353535;
}
.topicPath > li:first-child a,
.topicPath > li:first-child em {
	padding: 15px 15px 15px 14px;
}
.topicPath > li a {
	text-decoration: underline;
}
.topicPath > li a:hover {
	text-decoration: none;
}
.topicPath > li em {
	font-weight: bold;
	font-style: normal !important;
}

/*** copyrightWrap ***/
.copyrightWrap01 {
	border-top: 1px solid #b5b5b5;
	padding: 15px 0;
	background-color: #282828;
	color: #ffffff;
}
.copyrightWrap01 > ul {
	margin: 0 auto;
	width: 960px;
	font-size: 12px;
	font-size: 1.2rem;
}
.copyrightWrap01 > ul > li {
	float: left;
	width: auto;
	margin: 5px 5px 0 0;
}

/*** bannerWrap ***/
.bannerWrap01 {
	padding: 30px 0;
	background-color: #353535;
}
/* bannerSlider */
.bannerSlider {
}
.bannerSlider .bx-wrapper {
	position: relative !important;
	width: 100% !important;
	overflow: visible !important;
}
.bannerSlider .bx-wrapper .bx-viewport {
	max-width: 960px !important;
	margin: 0 auto !important;
}
.bannerSlider .bannerList {
}
.bannerSlider .bannerList > li {
	float: left;
	max-width: 225px;
	background: #ffffff;
}
.bannerSlider .bx-wrapper .bx-controls {
}
.bannerSlider .bx-wrapper .bx-controls .bx-pager {
	display: none;
}
.bannerSlider .bx-wrapper .bx-controls .bx-controls-direction > a {
	position: absolute;
	top: 50%;
	display: block;
	width: 18px;
	height: 26px;
	margin: -13px 0 0 0;
	text-indent: -9999px;
	outline: none;
}
.bannerSlider .bx-wrapper .bx-controls .bx-controls-direction .bx-prev {
	left: -38px;
	background: url(/common_files/images/com_slide_bt03.png) no-repeat 0 0;
}
.bannerSlider .bx-wrapper .bx-controls .bx-controls-direction .bx-next {
	right: -38px;
	background: url(/common_files/images/com_slide_bt04.png) no-repeat 0 0;
}

/*** pageTopBtn ***/
#pageTopBtn {
	clear: both;
	position: fixed;
	right: 10px;
	bottom: 60px;
	z-index: 10000;
}

/* Footer
------------------------------------------------------ */
#globalFooter {
	clear: both;
	position: relative;
}
#footer {
	clear: both;
}

/*----- footerWrap01 -----*/

.footerWrap01 {
	clear: both;
	width: 100%;
	min-height: 50px;
	padding: 0 25px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	    -ms-box-sizing: border-box;
	     -o-box-sizing: border-box;
          box-sizing: border-box;
	background: #000000;
}
/* footerProducton */
.footerWrap01 #footerProducton {
	clear: both;
	padding: 15px 0 10px;
	border-bottom: 1px solid #2d2d2d;
}
.footerWrap01 #footerProducton .copyrightList {
	margin: -5px 0 0 0;
	line-height: 1.0;
}
.footerWrap01 #footerProducton .copyrightList > li {
	display: inline;
	margin: 5px 5px 0 0;
	color: #ffffff;
	font-size: 7px;
	font-size: 0.7rem;
	line-height: 1.0;
}
/* footerUtility */
.footerWrap01 #footerUtility {
	float: left;
}
.footerWrap01 #footerUtility .utilMenu {
	padding: 15px 0 0 0;
}
.footerWrap01 #footerUtility .utilMenu > li {
	float: left;
	margin: 0 12px 0 0;
}
.footerWrap01 #footerUtility .utilMenu > li > a {
	display: block;
	padding: 0 0 0 12px;
	background: url(/common_files/images/com_link_ic01.png) no-repeat 0 50%;
	color: #ffffff;
	font-size: 12px;
	font-size: 1.2rem;
}
/* footerIdentity */
.footerWrap01 #footerIdentity {
	float: right;
}
.footerWrap01 #footerIdentity #footerLogo {
	float: right;
	padding: 17px 0;
	line-height: 1.0;
}
.footerWrap01 #footerIdentity #copyright {
	float: right;
	padding: 20px 20px 20px 0;
	font-size: 0;
}


/********************************************************

  RESPONSIVE

********************************************************/

/*
@media screen and (min-width: 769px) and (max-width: 1039px) {
}
*/



/* ClearFix
------------------------------------------------------ */
.headerWrap01:after,
.topicPath:after,
.bannerSlider .bannerList:after,
.footerWrap01:after,
.footerWrap01 #footerUtility .utilMenu:after,
.footerWrap01 #footerIdentity:after,
.contentsNavi ul:after,
.contentsLayout:after,
.copyrightWrap01 > ul:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	overflow: hidden;
}

.headerWrap01,
.topicPath,
.bannerSlider .bannerList,
.footerWrap01,
.footerWrap01 #footerUtility .utilMenu,
.footerWrap01 #footerIdentity,
.contentsNavi ul,
.contentsLayout,
.copyrightWrap01 > ul {
	zoom: 1;
}