@charset "UTF-8";

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-family:'Hiragino Kaku Gothic ProN',Verdana, Arial,'Lucida Grande', Meiryo, sans-serif;
	vertical-align: baseline;
	-webkit-font-smoothing: antialiased;
}
body {
	color:#351c15;
	background-color:#fcede7;
}
body:not(.sphone) {
	line-height: 1.4em;
	font-size: .92rem;
}
body.sphone {
	line-height: 1.4em;
	font-size: 14px;
}
a {
	text-decoration:underline;
	outline:none;
	color:#351c15;
}
a:hover {
	text-decoration:none;
	color:#351c15;
}
a:focus,a:visited {
	outline:none;
	color:#351c15;
}
img {
	border:none;
	vertical-align:bottom;
}
li {
	list-style:none;
}
iframe {
	display:block;
}
::selection {
	background-color:#ffeaee;
}
::-moz-selection {
	background-color:#ffeaee;
}
iframe[name="google_conversion_frame"] { position:absolute; top:0; }


/* -------------------------------------------------------------------------- */
/* -- #Loading -- */
#Loading {
	z-index:200;
	position:fixed;
	width:100%;
	height:100%;
	left:0;
	top:0;
	background-color:#fff;
}
#Loading>p {
	animation: loading 1.6s linear infinite;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	background: url(../images/loading.png) center center no-repeat;
	background-size: 100% auto;
}
body:not(.sphone) #Loading>p {
	width: 80px;
	height: 80px;
}
body.sphone #Loading>p {
	width: 15%;
	height: 0;
	padding-top: 15%;
}
@keyframes loading {
	0%    {transform: rotate(0);}
	100%  {transform: rotate(360deg);}
}


/* -------------------------------------------------------------------------- */
/* -- all -- */
article {
	opacity: 0;
	position: relative;
	box-sizing: border-box;
	width: 100%;
}
body:not(.sphone) article {
	top: 3rem;
}
body.sphone article {
	top: 2%;
}
.opa {
	transition: all 160ms 0s ease-in;
}
.opa:hover,.opa:focus {
	opacity: .6;
}

.txtshadow {
	text-shadow:0px 1px 0px rgba(255,255,255,.6);
}


/* -------------------------------------------------------------------------- */
/* -- #pvArea -- */
#pvArea {
	display: none;
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,.9);
}
body:not(.sphone) #pvArea #player {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 70%;
	height: 76%;
	margin: auto;
}
#player iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}

body:not(.sphone) #pvArea #close {
	box-sizing: border-box;
	position: fixed;
	right: 10px;
	top: 10px;
	width: 50px;
	height: 50px;
	padding-top: 25px;
	cursor: pointer;
	background: url(../images/close.png) center center no-repeat #be150d;
	background-size: 100% auto;
	transition: all 300ms 0s ease;
}
#pvArea #close:hover {
	opacity: .5;
}
/* ----------------------------- */
body.sphpne #pvArea,body.sphpne #pvArea * {
	display: none;
}


/* -------------------------------------------------------------------------- */
/* -- #backImg -- */
#backImg {
	position: fixed;
	z-index: -1;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: url(../images/back.jpg) center bottom no-repeat;
}
body:not(.pc) #backImg {
	background-size: auto 100% ;
}
body.pc #backImg {
	background-size: cover;
}


/* -------------------------------------------------------------------------- */
/* -- nav -- */
nav {
	box-sizing: border-box;
	width: 100%;
	letter-spacing: -.40em;
	background-color: rgba(255,255,255,.9);
	border: #fff 1px solid;
	box-shadow:0px 0px 10px 0px rgba(255,255,255,.2);
}
nav>* {
	position: relative;
	display:inline-block;
	letter-spacing: normal;
	vertical-align:top;
	*display: inline;
	*zoom: 1;
}
nav a {
	display: block;
	margin-right: 2rem;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
nav .nav1 a {
	background-image: url(../images/nav1_off.png);
}
nav .nav1 a:hover,nav .nav1 a.current {
	background-image: url(../images/nav1_on.png);
}
nav .nav2 a {
	background-image: url(../images/nav2_off.png);
}
nav .nav2 a:hover,nav .nav2 a.current {
	background-image: url(../images/nav2_on.png);
}
nav .nav3 a {
	background-image: url(../images/nav3_off.png);
}
nav .nav3 a:hover,nav .nav3 a.current {
	background-image: url(../images/nav3_on.png);
}
nav .nav4 a {
	background-image: url(../images/nav4_off.png);
}
nav .nav4 a:hover,nav .nav4 a.current {
	background-image: url(../images/nav4_on.png);
}
nav .nav5 a {
	background-image: url(../images/nav5_off.png);
}
nav .nav5 a:hover,nav .nav5 a.current {
	background-image: url(../images/nav5_on.png);
}
/* ----------------------------- */
body:not(.sphone) nav {
	display: none;
	padding-left: .5rem;
}
body:not(.sphone) nav>*:not(:last-of-type)::after {
	content: '';
	position: absolute;
	right: .5rem;
	top: 0;
	width: 15px;
	height: 50px;
	background: url(../images/nav_star.png) center center no-repeat;
	background-size: 100% auto;
}
body:not(.sphone) nav a {
	height: 50px;
}
/* ----------------------------- */
body.pc nav {
	position: fixed;
	z-index: 100;
	left: 0;
	bottom: 0;
}
/* ----------------------------- */
body.sphone nav {
	margin-top: 3%;
	padding: 2%;
	text-align: center;
}
body.sphone nav p {
	width: 50%;
}
body.sphone nav p:not(:last-of-type) {
	border-bottom: #ff967f 1px dotted;
}
body.sphone nav a {
	width: 100%;
	height: 0;
	margin-top: 2%;
	margin-bottom: 2%;
	padding-top: 12%;
	background-size: auto 100%;
}


/* -------------------------------------------------------------------------- */
/* -- #wrap -- */
#wrap {
	opacity: 0;
}
/* ----------------------------- */
body.pc #wrap {
	position: relative;
	width: 100%;
	background-image: url(../images/wrapimg1.png), url(../images/wrapimg2.png), url(../images/wrapimg3.png), url(../images/wrapimg4.png);
	background-position: center 0, center 250px, center 500px, center 750px;
	background-repeat: no-repeat;
	background-size: auto;
}
body.tablet #wrap {
	position: relative;
	width: 100%;
	background: url(../images/wrapimg_tablet.jpg) 0 0 no-repeat;
	background-size: 100% auto;
}
body.sphone #wrap {
	position: relative;
	width: 100%;
	background: url(../images/wrapimg_sp.jpg) 0 0 no-repeat;
	background-size: 100% auto;
}


/* -------------------------------------------------------------------------- */
/* -- header -- */
h1,header h2,header h3,header .cast {
	position: absolute;
	height: 0;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background-position: center 0;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
header h2 {
	background-image: url(../images/he_catch1.png);
}
h1 {
	background-image: url(../images/title.png);
}
header h3.catch1 {
	background-image: url(../images/he_catch2.png);
}
header h3.catch2 {
	background-image: url(../images/he_catch3.png);
}
header .cast {
	background-image: url(../images/he_cast.png);
}
header .cast span {
	display: none;
}
#genteiBtn img {
	width: 100%;
	height: auto;
}
#movieBtn {
	cursor: pointer;
	background-position: center 0;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
#sns {
	text-align: center;
	letter-spacing: -.40em;
}
#sns li {
	display:inline-block;
	letter-spacing: normal;
	vertical-align:top;
	*display: inline;
	*zoom: 1;
}
#sns li:not(:first-child) {
	margin-left: .5rem;
}
/* ----------------------------- */
body:not(.sphone) header h2 {
	right: 0;
	top: 0;
	width: 65.1%;
	/*padding-top: 5.4%;*/
	padding-top: 0;
}
body:not(.sphone) h1 {
	opacity: 0;
	right: 0;
	/*top: 11.3%;*/
	top: 13%;
	width: 50.5%;
	padding-top: 16%;
}
body:not(.sphone) header .catch1 {
	left: 12%;
	top: 38%;
	width: 5.6%;
	/*padding-top: 26%;*/
	padding-top: 0;
}
body:not(.sphone) header .catch2 {
	opacity: 0;
	left: 15%;
	bottom: 3%;
	width: 70%;
	padding-top: 4.6%;
}
body:not(.sphone) header .filter {
	animation:Blur .9s 2s ease-out forwards;
}
@keyframes Blur {
    0%   { filter: blur(6px); opacity: 0; }
    100% { filter: blur(0); opacity: 1; }
}
body:not(.sphone) header .cast {
	opacity: 0;
	left: -.5%;
	/*top: 20.5%;*/
	top: 22.5%;
	width: 75.3%;
	padding-top: 32.8%;
}
body:not(.sphone) #genteiBtn {
	display: none;
	position: absolute;
	right: 0;
	top: 45%;
	width: 20%;
}
body:not(.sphone) #movieBtn {
	display: none;
	position: absolute;
	right: 0;
	bottom: 19%;
	width: 20%;
	padding-top: 8.7%;
	background-image: url(../images/he_moviebtn.png);
}
body:not(.sphone) #sns {
	opacity: 0;
	position: absolute;
	right: 0;
	bottom: 14%;
	width: 20%;
}
/* ----------------------------- */
body.pc header {
	position: relative;
	width: 1200px;
	height: 610px;
	margin: auto;
}
/* ----------------------------- */
body.tablet header {
	position: relative;
	margin: 0 2%;
	padding-top: 52%;
}
/* ----------------------------- */
body.sphone header {
	position: relative;
	padding-top: 110%;
}
body.sphone header h2 {
	left: 1%;
	top: 1%;
	width: 98%;
	padding-top: 9%;
}
body.sphone h1 {
	left: 10%;
	top: 8%;
	width: 86%;
	padding-top: 28%;
}
body.sphone header .catch1 {
	left: 18%;
	top: 30%;
	width: 9%;
	padding-top: 45%;
}
body.sphone header .catch2 {
	position: relative;
	width: 98%;
	margin: auto;
	padding-top: 7%;
}
body.sphone .cast {
	display: none;
}
body.sphone #genteiBtn {
	width: 70%;
	margin: 3% auto 0;
}
body.sphone #movieBtn {
	bottom: 0;
	width: 100%;
	height: 0;
	margin: 3% 0;
	padding-top: 18.6%;
	background-image: url(../images/he_moviebtn_sp.png);
 }


/* -------------------------------------------------------------------------- */
/* -- #intro -- */
#intro .cont {
	opacity: 0;
}
#intro .cont.filter {
	animation:Blur .8s ease-out forwards;
}
@keyframes Blur {
    0%   { filter: blur(10px); opacity: 0; }
    100% { filter: blur(0); opacity: 1; }
}

#intro .cont h3 {
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background-position: 0 0;
	background-repeat: no-repeat;
}
#intro .cont:nth-of-type(1) {
	background-image: url(../images/intro_photo1_1.jpg), url(../images/intro_photo1_2.jpg), url(../images/intro_photo1_3.jpg), url(../images/intro_photo1_4.jpg);
}
#intro .cont:nth-of-type(1) h3 {
	background-image: url(../images/intro_mt1.png);
}
#intro .cont:nth-of-type(2) {
	background-image: url(../images/intro_photo2.jpg);
}
#intro .cont:nth-of-type(2) h3 {
	background-image: url(../images/intro_mt2.png);
}
#intro .cont:nth-of-type(3) {
	background-image: url(../images/intro_photo3_1.jpg), url(../images/intro_photo3_2.jpg), url(../images/intro_photo3_3.jpg), url(../images/intro_photo3_4.jpg);
}
#intro .cont:nth-of-type(3) h3 {
	background-image: url(../images/intro_mt3.png);
}
#intro .cont:nth-of-type(4) {
	background-image: url(../images/intro_photo4.jpg);
}
#intro .cont:nth-of-type(4) h3 {
	background-image: url(../images/intro_mt4.png);
}
#intro .cont p {
	line-height: 1.6em;
}
/* ----------------------------- */
body:not(.sphone) #intro>section::before {
	content: '';
	position: absolute;
	z-index: -1;
	width: 580px;
	height: 115px;
	background: url(../images/intro_title.png) 0 0 no-repeat;
	background-size: auto;
	transform: rotate(-15deg);
}
body:not(.sphone) #intro .cont {
	min-height: 382px;
	margin-top: .3em;
}
body:not(.sphone) #intro .cont:nth-of-type(odd) {
	padding-right: 52%;
	background-repeat: no-repeat;
	background-size: 25% auto;
}
body:not(.sphone) #intro .cont:nth-of-type(even) {
	padding-left: 52%;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 49.7% auto;
}
body:not(.sphone) #intro .cont h3 {
	height: 0;
	padding-top: 22%;
	background-size: 94% auto;
}
/* ----------------------------- */
body.pc #intro>section {
	position: relative;
	width: 1200px;
	margin: 2rem auto 0;
}
body.pc #intro>section::before {
	left: -60px;
	top: 270px;
}
body.tablet #intro>section::before {
	left: 0;
	top: 240px;
}
body.pc #intro .cont {
	padding-top: 20px;
}
body.pc #intro .cont:nth-of-type(odd) {
	background-position: 66.4% 0, right 0, 66.4% 202px, right 202px;
}
/* ----------------------------- */
body.tablet #intro>section {
	margin: 4% 2% 0;
}
body.tablet #intro .cont:nth-of-type(odd) {
	background-position: 66.4% 0, right 0, 66.4% 75.8%, right 75.8%;
}
/* ----------------------------- */
body.sphone #intro>section {
	position: relative;
}
body.sphone #intro .cont {
	margin-top: 6%;
}
body.sphone #intro .cont:nth-of-type(odd) {
	padding: 0 3% 70%;
	background-position: 0 75%, right 75%, 0 bottom, right bottom;
	background-repeat: no-repeat;
	background-size: 49.5% auto;
}
body.sphone #intro .cont:nth-of-type(even) {
	padding: 0 3% 70%;
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
body.sphone #intro .cont h3 {
	height: 0;
	padding-top: 20%;
	background-size: 100% auto;
}


/* -------------------------------------------------------------------------- */
/* -- #story -- */
#story .cont {
	line-height: 1.8em;
	background-color: rgba(255,255,255,.6);
	box-shadow:0px 0px 10px 3px rgba(255,255,255,.4);
}
#story h2 {
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: url(../images/story_title.png) center 0 no-repeat;
	transform: rotate(8deg);
}
#story>section {
	position: relative;
}
/* ----------------------------- */
body:not(.sphone) #story {
	min-height: 900px;
	padding-top: 550px;
	background-image: url(../images/story_img1.png), url(../images/story_img2.png), url(../images/story_img3.png), url(../images/story_img4.png);
	background-position: center 0, center 250px, center 500px, center 750px;
	background-repeat: no-repeat;
}
body:not(.sphone) #story h2 {
	position: absolute;
	z-index: 0;
	left: 0;
	right: 0;
	top: -80px;
	width: 262px;
	height: 158px;
	margin: auto;
}
/* ----------------------------- */
body.pc #story>section {
	width: 1120px;
	margin: auto;
}
body.pc #story .cont {
	padding: 2rem 3.5rem;
}
/* ----------------------------- */
body.tablet #story>section {
	margin: 0 3%;
}
body.tablet #story .cont {
	padding: 4% 6%;
}
/* ----------------------------- */
body.sphone #story {
	padding-top: 90%;
	background: url(../images/story_img_sp2.png) center top no-repeat;
	background-size: 100% auto;
}
body.sphone #story h2 {
	box-sizing: border-box;
	position: absolute;
	top: -16%;
	width: 92%;
	height: 0;
	padding-top: 34%;
	background-size: auto 100%;
}
body.sphone #story .cont {
	padding: 6% 3%;
}


/* -------------------------------------------------------------------------- */
/* -- #chart -- */
#chart h2 {
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: url(../images/chart_title.png) center 0 no-repeat;
	transform: rotate(-15deg);
}
#chart section {
	position: relative;
	background: url(../images/chart_img.jpg) center top no-repeat;
	background-size: 100% auto;
}
/* ----------------------------- */
body:not(.sphone) #chart h2 {
	position: absolute;
	left: 40px;
	top: -60px;
	width: 294px;
	height: 112px;
}
/* ----------------------------- */
body.pc #chart {
	min-height: 1283px;
	padding-top: 11px;
	background: url(../images/chart_back.png) center top no-repeat;
}
body.pc #chart section {
	width: 1120px;
	height: 1263px;
	margin: auto;
}
/* ----------------------------- */
body.tablet #chart section {
	width: 100%;
	height: 0;
	padding-top: 113%;
}
/* ----------------------------- */
body.sphone #chart {
	padding-top: 30%;
}
body.sphone #chart h2 {
	position: absolute;
	top: -22%;
	width: 92%;
	height: 0;
	padding-top: 24%;
	background-size: auto 100%;
}
body.sphone #chart section {
	width: 100%;
	height: 0;
	padding-top: 113%;
}


/* -------------------------------------------------------------------------- */
/* -- #caststaff -- */
#caststaff h3 {
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background-position: center 0;
	background-repeat: no-repeat;
	background-size: auto 100%;
}
#caststaff h3:nth-of-type(1) {
	background-image: url(../images/cs_cast.png);
}
#caststaff h3:nth-of-type(2) {
	background-image: url(../images/cs_staff.png);
}
#caststaff div {
	text-align: center;
}
#caststaff div strong {
	font-size: 1.15em;
}
#caststaff div span {
	font-size: .9em;
}
#caststaff .img {
	background: url(../images/cs_img.jpg) center 0 no-repeat;
}
/* ----------------------------- */
body:not(.sphone) #caststaff h3 {
	height: 40px;
	margin-bottom: 1rem;
}
body:not(.sphone) #caststaff div {
	margin-bottom: 3rem;
}
body:not(.sphone) #caststaff .img {
	width: 100%;
	height: 400px;
	background-color: rgba(255,255,255,.6);
}
/* ----------------------------- */
body.pc #caststaff {
	padding-top: 5rem;
}
/* ----------------------------- */
body.tablet #caststaff {
	padding-top: 0%;
}
/* ----------------------------- */
body.sphone #caststaff {
	padding-top: 10%;
}
body.sphone #caststaff h3 {
	height: 0;
	margin-top: 4%;
	padding-top: 8%;
}
body.sphone #caststaff div p {
	margin-top: 2%;
}
body.sphone #caststaff div p>span {
	display: block;
}
body.sphone #caststaff .img {
	width: 100%;
	height: 0;
	margin-top: 6%;
	padding-top: 50%;
	background-size: 100% auto;
}


/* -------------------------------------------------------------------------- */
/* -- #product -- */
#product h3 {
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background-position: center 0;
	background-repeat: no-repeat;
	background-size: auto 100%;
}
#product .sell h3 {
	background-image: url(../images/prod_sell.png);
}
#product .rental h3 {
	background-image: url(../images/prod_rental.png);
}
#product h3+p {
	text-align: center;
	line-height: 1.3em;
	font-size: .9em;
}
#product .list {
	margin-top: 2rem;
	text-align: center;
	letter-spacing: -.40em;
}
#product .list li {
	display:inline-block;
	letter-spacing: normal;
	vertical-align:top;
	*display: inline;
	*zoom: 1;
}

/* sell */
#product .sell .release img {
	width: auto;
	height: 100%;
}
#product .sell .list .jk {
	width: 100%;
	height: 0;
	padding-top: 146%;
	background-position: center 0;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
#product .sell .list h4 img {
	width: 100%;
	height: auto;
}
#product .sell .list li:nth-child(1) .jk {
	background-image: url(../images/prod_sell_jk1.png);
}
#product .sell .list li:nth-child(2) .jk {
	background-image: url(../images/prod_sell_jk2.png);
}
#product .sell .list li:nth-child(3) .jk {
	background-image: url(../images/prod_sell_jk3.png);
}
#product .sell .list li:nth-child(4) .jk {
	background-image: url(../images/prod_sell_jk4.png);
}
#product .sell .list li:nth-child(5) .jk {
	background-image: url(../images/prod_sell_jk5.png);
}
#product .bnrArea {
	text-align: center;
}
#product .bnrArea li img {
	width: 100%;
	height: auto;
}

/* rental */
#product .rental .list .jk {
	width: 100%;
	height: 0;
	padding-top: 142.2%;
	background-position: center 0;
	background-repeat: no-repeat;
	background-size: 100% auto;
	border: #fff 1px solid;
	box-shadow:0px 0px 10px 3px rgba(255,255,255,.6);
}
#product .rental .list h4 {
	width: 100%;
	height: 0;
	margin-top: .5rem;
	padding-top: 62%;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background-position: center 0;
	background-repeat: no-repeat;
	background-size: 100% auto;
}
#product .rental .list li:nth-child(1) .jk {
	background-image: url(../images/prod_ren_jk1.jpg);
}
#product .rental .list li:nth-child(2) .jk {
	background-image: url(../images/prod_ren_jk2.jpg);
}
#product .rental .list li:nth-child(3) .jk {
	background-image: url(../images/prod_ren_jk3.jpg);
}
#product .rental .list li:nth-child(4) .jk {
	background-image: url(../images/prod_ren_jk4.jpg);
}
#product .rental .list li:nth-child(5) .jk {
	background-image: url(../images/prod_ren_jk5.jpg);
}

#product .rental .list li:nth-child(1) h4 {
	background-image: url(../images/prod_ren1.png);
}
#product .rental .list li:nth-child(2) h4 {
	background-image: url(../images/prod_ren2.png);
}
#product .rental .list li:nth-child(3) h4 {
	background-image: url(../images/prod_ren3.png);
}
#product .rental .list li:nth-child(4) h4 {
	background-image: url(../images/prod_ren4.png);
}
#product .rental .list li:nth-child(5) h4 {
	background-image: url(../images/prod_ren5.png);
}
/* ----------------------------- */
body:not(.sphone) #product h3 {
	height: 40px;
	margin-bottom: 1rem;
}
body:not(.sphone) #product .list li:not(:last-child) {
	margin-right: 2%;
}
body:not(.sphone) #product .sell .release {
	height: 90px;
	margin-top: 1.5rem;
	text-align: center;
}
body:not(.sphone) #product .sell .list h4 {
	margin-top: .5rem;
}
body:not(.sphone) #product .bnrArea {
	letter-spacing: -.40em;
}
body:not(.sphone) #product .bnrArea li {
	width: 32%;
	display:inline-block;
	letter-spacing: normal;
	vertical-align:top;
	*display: inline;
	*zoom: 1;
}
body:not(.sphone) #product .bnrArea li:nth-child(2) {
	margin-left: 2%;
	margin-right: 2%;
}
body:not(.sphone) #product .rental {
	margin-top: 3rem;
}
/* ----------------------------- */
body.pc #product {
	padding-top: 5rem;
}
body.pc #product .list li {
	width: 200px;
}
.pc #product .bnrArea {
	width: 960px;
	margin: 2rem auto 0;
}
/* ----------------------------- */
body.tablet #product {
	padding-top: 0%;
}
body.tablet #product .list li {
	width: 18%;
}
.tablet #product .bnrArea {
	margin: 4% 3% 0;
}
/* ----------------------------- */
body.sphone #product {
	box-sizing: border-box;
	padding: 10% 3% 0;
}
body.sphone #product h3 {
	height: 0;
	margin-top: 4%;
	padding-top: 8%;
}
body.sphone #product h3+p {
	margin-top: 2%;
}
.sphone #product .sell .release {
	height: 90px;
	margin-top: 3%;
	text-align: center;
}
body.sphone #product .list li {
	width: 46%;
	margin-top: 3%;
}
body.sphone #product .list li:nth-child(odd) {
	margin-right: 3%;
}
.sphone #product .bnrArea {
	margin: 4% 6% 0;
}
.sphone #product .bnrArea li {
	margin-bottom: 2%;
}
.sphone #product .rental {
	margin-top: 10%;
}


/* -------------------------------------------------------------------------- */
/* -- footer -- */
footer {
	text-align: center;
	letter-spacing: .1em;
}
/* ----------------------------- */
body:not(.sphone) footer {
	margin: 6rem 0 4rem;
	font-size: .8em;
}
/* ----------------------------- */
body.sphone footer {
	margin: 12% 0 3%;
	font-size: .7em;
}


/* -------------------------------------------------------------------------- */
/* -- #pageTop -- */
#pageTop {
	position: fixed;
	z-index: 200;
	bottom: -100px;
}
#pageTop a {
	display: block;
	background: url(../images/totop.png) center center no-repeat;
	background-size: cover;
	box-shadow:0px 0px 10px 3px rgba(255,255,255,.4);
	transition: all 220ms 0s ease-out;
}
#pageTop a:hover,#pageTop a:focus {
	opacity: .6;
}
/* ----------------------------- */
body:not(.sphone) #pageTop {
	right: 2vw;
	/*bottom: 7vh;*/

}
body:not(.sphone) #pageTop a {
	width: 80px;
	height: 80px;
	border-radius: 40px;

}
/* ----------------------------- */
body.sphone #pageTop {
	right: .5vw;
	/*bottom: 7vh;*/

}
body.sphone  #pageTop a {
	width: 60px;
	height: 60px;
	border-radius: 30px;

}


/* -------------------------------------------------------------------------- */
/* -- max-width:1200px -- */
@media screen and (max-width:1200px) {
body.pc {
	width: 1200px;
}
}