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


/*--- first veiw
-------------------------------------------------------------------------------- */
.main_top{
	min-height:100%;
	max-width:1280px;
	margin:0 auto;
}
@media screen and (max-width: 768px) {
	.main_top{
		overflow:hidden;
	}
}
.main_top_bg{
	position:relative;
}
img.main_img{
	width:100%;
	height:auto;
	max-width:1280px;
}


/*--- top_dl
-------------------------------------------------------------------------------- */
.top_dl{
	max-width:55%;
	margin: 10px 20px 45px 10px;
	position: absolute;
	bottom: 0;
	right: 0;
}
.top_dl img{
	max-width:100%;
	height:auto;
}
.top_dl .flex_naka{
	width:auto;
}
.top_dl .right{
	text-align:right;
	margin-right:10px;
}
.top_dl .left{
	text-align:left;
}
@media screen and (max-width: 768px) {
	.top_dl{
		max-width:100%;
		width:100%;
		margin:5px auto 50px auto;
		position: absolute;
		bottom: 0;
		right:auto;
		left:auto;
	}
	.top_dl .flex_naka{
		width:50%;
	}
	.top_dl .flex_naka a{
		width:100%;
	}
	.top_dl .flex_naka a img{
		width:90%;
	}
}
@media screen and (max-width: 600px) {
	.top_dl{
		margin:5px auto 20px auto;
	}
}


/*--- top_story
-------------------------------------------------------------------------------- */
.top_story{
	width:100%;
	padding-top:50px;
	text-align:center;
}
.top_story h2.ttl{
	text-align:center;
	width:100%;
}
@media screen and (max-width: 768px) {
	.top_story{
		margin-top:-30px;
		padding-top:30px;
	}
}


/*--- top_chara
-------------------------------------------------------------------------------- */
.top_chara{
	width:100%;
	padding-top:0px;
	text-align:center;
	margin:0 auto 80px auto;
}
.top_chara h2.ttl{
	text-align:center;
	width:100%;
}
.top_chara .overlay_on{
	cursor: pointer!important;
}
.top_chara p{
	color:rgba(255,255,255,0.8);
	font-size:18px;
	text-align:center;
}
@media screen and (max-width: 768px) {
	.top_chara{
		margin:0px auto 0px auto;
		padding-top:30px;
	}
	.top_chara p{
		font-size:12px;
	}
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .7);
  opacity: 0;
  visibility: hidden;
  transition: .3s linear;
}
.overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.overlay .profile{
	opacity: 0;
}
.overlay .profile.is-open-waku{
	opacity: 1;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
  	visibility: visible;
}
.overlay img{
	display:none;
	position:relative;
}
.overlay img.is-open-img{
	display:block;
}
.overlay .menu{ 
	width: 45px;
	height: 45px;
	top: -10px;
	right: -50px;
	position:absolute; 
	cursor:pointer; 
	overflow:hidden; 
	z-index:9999;
}
.overlay .menu1{ 
	width: 45px;
	height:2px; 
	background-color: #c69c6d;
	position:absolute;
	top:18px;
	-o-transform: rotate(405deg);
	-moz-transform: rotate(405deg);
	-webkit-transform: rotate(405deg);
	-ms-transform: rotate(405deg);
	transform: rotate(405deg);
}
.overlay .menu3{ 
	width: 45px;
	height:2px; 
	background-color: #c69c6d;
	position:absolute;
	top:18px;
	-o-transform: rotate(-405deg);
	-moz-transform: rotate(-405deg);
	-webkit-transform: rotate(-405deg);
	-ms-transform: rotate(-405deg);
	transform: rotate(-405deg);
}
@media screen and (max-width: 768px) {
	.overlay .profile.is-open-waku{
		width:90%;
	}
	.overlay img{
		width:100%;
		height:auto;
	}
	.overlay .menu{
		width: 45px;
		height: 45px;
		top: -25px;
    	right: -10px;
		transform: scale(0.7);
	}
}

/*--- top_system
-------------------------------------------------------------------------------- */
.top_system{
	width:100%;
	padding-top:50px;
}
.top_system .still{
	position:relative;
	width:100%;
}
.top_system .still img{
	display:block;
	max-width:80%;
}
.top_system .still .right{
	position:absolute;
	top:0;
	right:0;
}
.top_system .still .zindex{
	z-index:1;
	position:relative;
}
.top_system .still .right.zindex{
	z-index:1;
	position:absolute;
}

.top_system .playimage{
	text-align:center;
	margin:-50px auto 120px auto;
	position:relative;
}
.top_system .left1{
	position:absolute;
	left:15%;
	top:50px;
	width:280px;
}
.top_system .left2{
	position:absolute;
	left:15%;
	bottom:-70px;
	width:280px;
}
.top_system .right1{
	position:absolute;
	right:15%;
	bottom:0px;
	width:280px;
}
.top_system .right2{
	position:absolute;
	right:15%;
	top:-40px;
	width:280px;
}
@media screen and (max-width: 1000px) {
	.top_system .left1{
		left:8%;
	}
	.top_system .left2{
		left:8%;
	}
	.top_system .right1{
		right:8%;
	}
	.top_system .right2{
		right:8%;
	}
}
@media screen and (max-width: 850px) {
	.top_system .left1{
		left:4%;
	}
	.top_system .left2{
		left:4%;
	}
	.top_system .right1{
		right:4%;
	}
	.top_system .right2{
		right:4%;
	}
}
@media screen and (max-width: 768px) {
	.top_system .left1{
		left:1%;
	}
	.top_system .left2{
		left:1%;
	}
	.top_system .right1{
		right:1%;
	}
	.top_system .right2{
		right:1%;
	}
	.top_system .still_mb img{
		display:block;
	}
}
@media screen and (max-width: 650px) {
	.top_system .left1{
		left:0%;
		width:200px;
	}
	.top_system .left2{
		left:0%;
		width:200px;
	}
	.top_system .right1{
		right:0%;
		width:200px;
	}
	.top_system .right2{
		right:0%;
		width:200px;
	}
}
@media screen and (max-width: 480px) {
	.top_system .left1{
		left:-5px;
		top:50px;
		width:150px;
	}
	.top_system .left2{
		left:1%;
		bottom:-80px;
		width:150px;
	}
	.top_system .right1{
		right:-5px;
		bottom:0px;
		width:150px;
	}
	.top_system .right2{
		right:1%;
		top:-80px;
		width:150px;
	}
	.top_system{
		padding-top:40px;
	}
	.top_system .playimage{
		margin:20px auto 100px auto;
	}
	.top_system .play{
		width:50%;
		height:auto;
	}
}


/*--- top_last
-------------------------------------------------------------------------------- */
.top_last{
	margin:80px auto;
	text-align:center;
}
.top_last a{
	margin-top:50px;
	display:inline-block;
}
@media screen and (max-width: 768px) {
	.top_last{
		margin:20px auto;
	}
	.top_last a{
		margin-top:10px;
		width:80%;
	}
}

/*--- foot
-------------------------------------------------------------------------------- */
footer .box{
	border: 3px solid #c69c6d;
	padding: 27px 0 40px 0;
	text-align: center;
	margin: 0 auto;
	font-size: 18px;
	color: rgba(255,255,255,0.8);
	width: 90%;
	min-height: 390px;
	position:relative;
}
footer .box .bara{
	position:absolute;
	bottom:-60px;
	right:-50px;
}
footer .box h3{
	color: #c69c6d;
	text-align: center;
	margin-bottom: 10px;
	font-family: 'Sail', cursive!important;
	font-weight: normal;
	font-size: 35px;
}
footer .box .box_naka{
	height: 340px;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	overflow-y: auto;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"!important;
}
footer table{
	width: 100%;
	margin: 0px auto;
	font-size: 14px;
	text-align: left;
	overflow-y: auto;
}
footer table tr{
	/*border-bottom: 1px dashed #f5c9e5;*/
}
footer table .L{
	width: 33%;
	padding: 10px 10px 10px 5px;
	vertical-align: top;
	color: #c69c6d;
	text-align: right;
	letter-spacing: 0.00rem;
}
footer table .R{
	width: 67%;
	padding: 10px;
}

footer copyright{
	display:block;
	width:100%;
	padding:40px 0 80px 0;
	font-size:20px;
	text-align:center;
	font-family: 'Sail', cursive!important;
}
footer copyright a{
	color:#c69c6d;
}

@media screen and (max-width: 768px) {
	footer .box{
		margin:15px auto;
		border: 2px solid #c69c6d;
		padding: 10px 0 40px 0;
		color: rgba(255,255,255,0.8);
		width: 95%;
		min-height: 370px;
		height:auto;
		position:relative;
	}
	footer .box .bara{
		bottom: -20px;
    	right: -20px;
		width:120px;
	}
	footer .box h3{
		margin-bottom: 10px;
		font-size: 30px;
	}
	footer table{
		font-size: 14px;
	}
	footer table .L{
		width: 25%;
	}
	footer table .R{
		width: 74%;
		padding: 10px;
	}
	footer .foot_attention{
		font-size:12px;
	}
	footer copyright{
		padding:40px 0 40px 0;
	}
}
@media screen and (max-width: 480px) {
	footer table{
		font-size: 12px;
	}
}