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

#container {
	width:100%;
	height:auto;
}

#mainvisual_for_sp {
	display:none;
}

#gnav {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	background:url(../common/img/gnav_bg.png) center top repeat-x;
	z-index:5000;
}
#gnav_inner {
	position:relative;
	width:100%;
	max-width:960px;
	height:35px;
	margin:0 auto;	
}
#gnav_inner ul {
	width:100%;
	height:35px;
}
#gnav_inner ul li {
	float:left;
	margin:-5px 13px 0;
}
#gnav_inner ul li a {
	display:block;
	height:39px;
}
#gnav_inner ul li a:hover {
	opacity:0.7;
	background:#fffaee;
}

#contents_outer {
	width:100%;
	height:788px;
	margin:0 auto;
	background-color:#000;
	background:#000 url(../img/main.jpg) center top no-repeat;
	position:relative;
	overflow:hidden !important;
}
#contents {
	width:960px;
	height:788px;
	margin:0 auto;
	padding:0;
	position:relative;
	z-index:4000;
}

#title {
	position:absolute;
	top:360px;
	left:80px;
}
#cannes {
	position:absolute;
	top:480px;
	left:300px;
}
#caststaff {
	position:absolute;
	bottom:20px;
	left:265px;
}
#copy {
	position:absolute;
	top:80px;
	left:75px;
}
#submenu {
	position:relative;
	clear:both;
	width:100%;
	min-width:960px;
	height:160px;
	background:#fff;
}
#submenu_inner {
	position:relative;
	width:960px;
	margin:10px auto;
}
#roadshow {
	position:absolute;
	top:100px;
	left:248px;
}
#btn_about_grace_outer {
	float:left;
	width:40%;
	text-align:right;
}
#btn_costume_outer {
	float:left;
	width:20%;
	text-align:center;
}
#btn_comments_outer {
	float:left;
	width:40%;
	text-align:left;
}
#btn_about_grace {
	width:193px;
	height:68px;
	margin:0 auto 20px;
}
#btn_costume {
	width:193px;
	height:68px;
	margin:0 auto 20px;
}
#btn_comments {
	width:193px;
	height:68px;
	margin:0 auto 20px;
}

#online {
	display:block;
	position:absolute;
	top:450px;
	left:50%;
	margin-left:420px;
}
#online_s {
	display:none;
}

#bddvd {
	display:block;
	position:absolute;
	top:420px;
	right:50%;
	margin-right:420px;
}
#bddvd_s {
	display:none;
}
#premium {
	display:block;
	position:absolute;
	top:200px;
	left:50%;
	margin-left:420px;
}
#premium_s {
	display:none;
}

/* modal */
dl dt{
	position:absolute;
	top:76px;
	left:410px;
	width:127px;
	height:14px;
	cursor:pointer;
}
div#glayLayer{
	display:none;
	position:fixed;
	left:0;
	top:0;
	height:100%;
	width:100%;
	background:#000;
	filter:alpha(opacity=75);
	opacity: 0.75;
	z-index:5999;
}
* html div#glayLayer{
	position:absolute;
}
#overLayer{
	display:none;
	width:797px;
	position: absolute;
	top:640px;
	left:50%;
	margin-left:-399px;
	z-index:6000;

}
#overLayer img.close{
	position:absolute;
	top:-16px;
	right:0;
	cursor:pointer;
}


#btn_digital_pc {
	display:block;
	position:absolute;
	top:280px;
	right:50%;
	margin-right:416px;
}
#btn_digital_middle {
	display:none;
}
#btn_digital_sp {
	display:none;
}

/* digital area */
#digital {
	width:1200px;
	margin:40px auto 20px;
	text-align:center;
	color:#640810;
}
#digital ul {
	width:1200px;
	margin:10px auto 0;
}
#digital ul li {
	float:left;
	width:200px;
	height:auto;
	margin:0 0 10px;
	text-align:center;
}
#digital ul li a {
	display:block;
	background:#fff;
	border:1px solid #ccc;
	border-radius:8px;
	width:96%;
	height:auto;
	margin:0 auto;
}
#digital ul li a:hover {
	border:1px solid #fc0;
}
#digital ul li a img {
	display:block;
	width:92%;
	height:auto;
	margin:0 auto;
}
#digital > span {
	display:block;
	font-size:22px;
	font-weight:bold;
	color:#c41f5b;
}
#digital > div {
	clear:both;
	text-indent:-1em;
	margin:0 0 0 1em;
	font-size:12px;
	text-align:center;
}
#digital > p {
	clear:both;
	text-align:right;
	font-size:11px;
}

/* fancybox */
iframe {
	width:820px;
}

@media screen and (max-width: 1240px) {
#contents_outer {
	width:100%;
	height:848px;
	margin:0 auto;
	background-color:#000;
	background:#000 url(../img/main.jpg) center top no-repeat;
	position:relative;
	overflow:hidden !important;
}
#contents {
	width:960px;
	height:848px;
	margin:0 auto;
	padding:0;
	position:relative;
	z-index:4000;
}
#caststaff {
	position:absolute;
	bottom:80px;
	left:265px;
}

#online {
	display:none;
}
#online_s {
	display:block;
	position:absolute;
	top:250px;
	left:50%;
	margin-left:-278px;
}
#bddvd {
	display:none;
}
#bddvd_s {
	display:block;
	position:absolute;
	top:160px;
	left:50%;
	margin-left:-278px;
}
#premium {
	display:none;
}
#premium_s {
	display:block;
	position:absolute;
	top:70px;
	left:50%;
	margin-left:-278px;
}

#submenu {
	position:relative;
	clear:both;
	width:100%;
	min-width:960px;
	height:340px;
	background:#fff;
}
dl dt{
	position:absolute;
	top:80px;
	left:410px;
	width:127px;
	height:14px;
	cursor:pointer;
}
#roadshow {
	position:absolute;
	top:100px;
	left:248px;
}

#btn_digital_pc {
	display:none;
}
#btn_digital_middle {
	display:block;
	position:absolute;
	top:770px;
	left:50%;
	margin-left:-280px;
	z-index:10000;
}
#btn_digital_sp {
	display:none;
}

/* digital area */
#digital {
	width:98%;
	margin:40px auto 20px;
}
#digital ul {
	width:100%;
	margin:10px auto 0;
}
#digital ul li {
	float:left;
	width:16.66%;
	height:60px;
}
#digital > span {
	display:block;
	font-size:22px;
	font-weight:bold;
	color:#c41f5b;
}
#digital > div {
	clear:both;
	text-indent:-1em;
	margin:0 0 0 1em;
	font-size:12px;
	text-align:center;
}

}


@media screen and (max-width: 960px) {
#contents_outer {
	min-width:100%;
	width:100%;
	height:788px;
	margin:0 auto;
	background:#000 url(../img/main.jpg) center top no-repeat;
	position:relative;
	overflow:hidden !important;
}

#mainvisual_for_sp {
	display:block;
	width:100%;
	margin:75px 0 0;
}

#container {
	width:100%;
	min-width:90%; /* Masonryで謎の余白ができるのでこの数値で！ */
	height:auto;
	background:#fff;
}

#header {
	width:100%;
	min-width:100%;
	height:auto;
	border-bottom:1px solid #c9c9c9;
	background:#fff;
}
#header_inner {
	width:100%;
	height:auto;
	margin:0 auto;
	padding:0 0 10px;
}

#gnav {
	width:100%;
	min-width:100%;
	z-index:5000;
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ccffffff,EndColorStr=#ccffffff);
	background-color: rgba(255, 255, 255, 0.8);
	background-image:none;
}
#gnav:not(:target){
    filter: none;
    -ms-filter: none;
}
#gnav_inner {
	position:relative;
	width:100%;
	height:75px;
	max-width:100%;
	margin:0 auto;	
}
#gnav_inner ul {
	width:100%;
	height:75px;
}
#gnav_inner ul li {
	float:left;
	width:31%;
	height:35px;
	margin:-5px 0 0;
}
#gnav_inner ul li a {
	display:block;
	text-align:center;
}
#gnav_inner ul li a:hover {
	background:#fff4cc;
}
#contents_outer {
	min-width:100%;
	width:100%;
	height:auto;
	margin:0 auto;
	background:#fff;
	position:relative;
	overflow:hidden;
}
#contents,
#contents02 {
	display:none;
}

#submenu {
	position:relative;
	clear:both;
	width:100%;
	min-width:100%;
	max-width:100%;
	height:340px;
	background:#fff;
}
#submenu_inner {
	position:relative;
	width:100%;
	min-width:100%;
	max-width:100%;
	height:240px;
	margin:10px auto;
}
#roadshow {
	clear:both;
	position:relative;
	top:0;
	left:0;
	display:block;
	margin:10px auto 0;
	width:80%;
	max-width:373px;
}

/* modal */
dl {
	clear:both;
	position:relative;
	top:0;
	left:0;	
	padding:20px 0 0;
	width:100%;
}
dl dt{
	position:relative;
	top:0;
	left:0;
	width:127px;
	height:14px;
	margin:0 auto;
	cursor:pointer;
}
dl dd{
	margin:0 auto;
	width:90%
}
dl dd img{
	width:100%
}
div#glayLayer{
	display:none;
	position:fixed;
	left:0;
	top:0;
	height:100%;
	width:100%;
	background:#000;
	filter:alpha(opacity=75);
	opacity: 0.75;
	z-index:5999;
}
* html div#glayLayer{
	position:absolute;
}
#overLayer{
	display:none;
	width:90%;
	position: absolute;
	top:80%;
	left:50%;
	margin-left:-45%;
	z-index:6000;
}
#overLayer img#billing{
	width:100%;
}
#overLayer img.close{
	position:absolute;
	top:-16px;
	right:0;
	cursor:pointer;
}

#btn_digital_pc {
	display:none;
}
#btn_digital_middle {
	display:none;
}
#btn_digital_sp {
	display:block;
	position:absolute;
	bottom:1%;
	left:50%;
	margin-left:-280px;
	width:561px;
}

/* digital area */
#digital {
	width:98%;
	margin:40px auto 20px;
}
#digital ul {
	width:100%;
	margin:10px auto 0;
}
#digital ul li {
	float:left;
	width:25%;
	height:auto;
}
#digital > span {
	display:block;
	font-size:22px;
}
#digital > div {
	clear:both;
	text-indent:-1em;
	margin:0 0 0 1em;
	font-size:12px;
	text-align:center;
}

}

@media screen and (max-width: 940px) {
#gnav_inner ul li {
	float:left;
	margin:-5px 1% 0;
}
}

@media screen and (max-width: 880px) {
#gnav_inner ul li {
	float:left;
	width:30%;
	margin:-5px 1% 0;
	text-align:center;
}
#btn_about_grace_outer {
	float:left;
	width:33%;
	text-align:right;
}
#btn_costume_outer {
	float:left;
	width:33%;
	text-align:center;
}
#btn_comments_outer {
	float:left;
	width:33%;
	text-align:left;
}
}

@media screen and (max-width: 640px) {
#gnav {
	position:relative;
	margin:10px 0 0;
}
#mainvisual_for_sp {
	display:block;
	width:100%;
	margin:0;
}

#header_inner #logo {
	float:left;
	width:44%;
	margin:0 5%;
}
#header_inner #logo img {
	width:100%;
	max-width:294px;
}
#header_inner #roadshow {
	float:left;
	width:36%;
	padding:3% 2% 0;
}
#header_inner #roadshow img {
	width:100%;
	max-width:227px;
}
#header_inner #btn01 {
	float:left;
	width:48%;
	margin:0 0 0 3%;
	padding:2% 0 0;
	text-align:center;
}
#header_inner #btn01 img {
	width:100%;
	max-width:120px;
}
#header_inner #btn02 {
	float:left;
	width:48%;
	padding:2% 0 0;
	text-align:center;
}
#header_inner #btn02 img {
	width:100%;
	max-width:120px;
}

#btn_about_grace img {
	width:100%;
	max-width:193px;
}
#btn_costume img {
	width:100%;
	max-width:193px;
}
#btn_comments img {
	width:100%;
	max-width:193px;
}

#premium_s {
	display:block;
	position:absolute;
	top:70px;
	left:3%;
	width:94%;
	margin-left:0;
	
}
#online_s {
	display:block;
	position:absolute;
	top:260px;
	left:3%;
	width:94%;
	margin-left:0;
	
}
#bddvd_s {
	display:block;
	position:absolute;
	top:160px;
	left:3%;
	width:94%;
	margin-left:0;
	
}

#btn_digital_pc {
	display:none;
}
#btn_digital_middle {
	display:none;
}
#btn_digital_sp {
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	margin-left:3%;
	width:94%;
}

/* digital area */
#digital {
	width:96%;
	margin:40px auto 20px;
}
#digital ul {
	width:100%;
	margin:10px auto;
}
#digital ul li {
	float:left;
	width:33.33%;
	height:auto;
}
#digital > span {
	display:block;
	font-size:22px;
}
#digital > span img {
	display:block;
	width:98%;
	margin:0 auto;
}
#digital > div {
	clear:both;
	text-indent:-1em;
	margin:0 0 0 1em;
	font-size:12px;
	text-align:left;
}
}

@media screen and (max-width: 600px) {
#gnav_inner {
	position:relative;
	width:100%;
	height:110px;
	max-width:100%;
	margin:0 auto;	
}
#gnav_inner ul {
	width:100%;
	height:110px;
}
#gnav_inner ul li {
	float:left;
	width:47%;
	margin:-5px 1% 0;
	text-align:center;
}
}

@media screen and (max-width: 500px) {
#gnav_inner {
	position:relative;
	width:100%;
	height:125px;
	max-width:100%;
	margin:0 auto;	
}
#gnav_inner ul {
	width:100%;
	height:125px;
}
#pagetitle,
#pagetitle02 {
	clear:both;
	position:relative;
	background:none;
	height:auto;
	margin:0;
	padding:0;
}

#pagetitle img#s,
#pagetitle02 img#s {
	display:block;
	width:100%;
}
#pagetitle #ti_for_sp,
#pagetitle02 #ti_for_sp {
	position:absolute;
	top:0;
	left:0;
	width:80%;
	padding:4% 10% 0;
}
#pagetitle img#ti,
#pagetitle02 img#ti {
	width:100%;
}

#submenu {
	position:relative;
	clear:both;
	width:100%;
	min-width:100%;
	max-width:100%;
	height:310px;
	background:#fff;
}
#submenu_inner {
	position:relative;
	width:100%;
	min-width:100%;
	max-width:100%;
	height:210px;
	margin:10px auto;
}
#premium_s {
	display:block;
	position:absolute;
	top:60px;
	left:3%;
	width:94%;
	margin-left:0;
	
}
#online_s {
	display:block;
	position:absolute;
	top:210px;
	left:3%;
	width:94%;
	margin-left:0;
	
}
#bddvd_s {
	display:block;
	position:absolute;
	top:140px;
	left:3%;
	width:94%;
	margin-left:0;
	
}
#roadshow {
	clear:both;
	position:relative;
	top:0;
	left:0;
	display:block;
	margin:10px auto 0;
	width:80%;
	max-width:373px;
}
dl {
	clear:both;
	position:relative;
	top:0px;
	left:0;	
	padding:20px 0 0;
	width:100%;
}
}

@media screen and (max-width: 460px) {
/* digital area */
#digital {
	width:96%;
	margin:40px auto 20px;
}
#digital ul {
	width:100%;
	margin:10px auto;
}
#digital ul li {
	float:left;
	width:50%;
	height:auto;
}
#digital > span {
	display:block;
	font-size:18px;
}
#digital > span img {
	display:block;
	width:98%;
	margin:0 auto;
}
#digital > div {
	clear:both;
	text-indent:-1em;
	margin:0 0 0 1em;
	font-size:12px;
}
}

@media screen and (max-width: 400px) {
#gnav_inner {
	position:relative;
	width:100%;
	height:180px;
	max-width:100%;
	margin:0 auto;	
}
#gnav_inner ul {
	width:100%;
	height:180px;
}
#gnav_inner ul li {
	float:left;
	width:100%;
	margin:-5px 1% 0;
	text-align:center;
}

#submenu {
	position:relative;
	clear:both;
	width:100%;
	min-width:100%;
	max-width:100%;
	height:240px;
	background:#fff;
}
#submenu_inner {
	position:relative;
	width:100%;
	min-width:100%;
	max-width:100%;
	height:170px;
	margin:10px auto;
}

#premium_s {
	display:block;
	position:absolute;
	top:60px;
	left:3%;
	width:94%;
	margin-left:0;
	
}
#online_s {
	display:block;
	position:absolute;
	top:105%;
	left:3%;
	width:94%;
	margin-left:0;
	
}
#bddvd_s {
	display:block;
	position:absolute;
	top:70%;
	left:3%;
	width:94%;
	margin-left:0;
	
}
}