/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
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{ position: relative;box-sizing:border-box; border:0;vertical-align:baseline;margin:0;padding:0; outline: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);tap-highlight-color: rgba(0, 0, 0, 0);-webkit-backface-visibility:hidden; backface-visibility:hidden;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
hr{ border:0;}
button{ border:0; padding:0; background:none; font-size:1em; outline:0;}



@font-face {
  font-family: 'rounded M';
  src: url('data/font/rounded-x-mplus-1p-regular.woff') format('woff'),
url('data/font/rounded-x-mplus-1p-regular.ttf') format('truetype');
}

@font-face {
  font-family: 'rounded B';
  src: url('data/font/rounded-x-mplus-1p-bold.woff') format('woff'),
url('data/font/rounded-x-mplus-1p-bold.ttf') format('truetype');
}

  

/*/////////////////////////
base layout　helve
//////////////////////////*/
html,body{
	font-family:"rounded M","游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", sans-serif  ;

	font-size:14px;
	line-height:1.6;
	width:100%;
	min-height:100%;
	background-color:#f5eee3;
}




body{

	font-weight:normal;
	letter-spacing:0.0em;
	width:100%;
	text-align:left;
	 -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
	color:#530000;
	overflow-y: scroll;
	background:#f5eee3;

}
body#top{background:url(img/common/bg_pattern_1.png) left top #f5eee3;}

.bold,
strong{font-family:"rounded B";}


body.active{ }

body.fixed{ overflow-x:hidden;  overflow-y:scroll; min-height:100vh}



img{ vertical-align:bottom;}

a, a:link {
    color:#530000;
    text-decoration:underline;
	outline:0;
	
}
a:hover, a:active {
    color:#530000;
    text-decoration:underline;
}
a:visited {
    color:#530000;
    text-decoration:none;
}

.introBtn a,
li a,
dl a{text-decoration:none !important;}

h1,
h2,
h3,
h4,
h5,
h6{ padding:0; margin:0 auto 0 auto; font-weight:normal; display:block;}


hr{ border:0; padding:0; margin:0; height:1px;}
p{ margin-bottom:2em;}

select{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

input,
textarea{}




/* 各ベンダープレフィックスが取れた標準版！！(http://caniuse.com/#search=placeholder-shown) */
:placeholder-shown {
    color: #666; opacity: 1;}

/* Google Chrome, Safari, Opera 15+, Android, iOS */
::-webkit-input-placeholder {
    color: #666;  opacity: 1;}

/* Firefox 18- */
:-moz-placeholder {
     color: #666;  opacity: 1;}

/* Firefox 19+ */
::-moz-placeholder {
     color: #666;  opacity: 1;}

/* IE 10+ */
:-ms-input-placeholder {
     color: #666;  opacity: 1;}

.placeholder{
     color: #666;  opacity: 1;}

:disabled { 
     color: #fff !important;  opacity: 1 !important;
}

textarea[disabled][readonly],
input[disabled][readonly]{ color: #fff !important;  opacity: 1 !important;}



.pcDevice{}
.touchDevice{}



/* loading cover
----------------------------------------------- */

#loader{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	
	z-index:9999;
	background-color: #f5eee3;
	
}

#loadingAnim{
	position: fixed;
	top: 44%;
	left: 50%;
	display:block;
	width: 152px;
	height: 300px;
	background:url(img/parts/loading_mark.gif) center center no-repeat;
	transform-origin:left top;
	transform:scale(0.4,0.4) translate(-50%,-50%);
	
}


html.touchDevice #loadingAnim{
	top: 45%;
	transform:scale(1,1) translate(-50%,-50%);

}

#loadingAnim:after{
	content: '';
	display: none;
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 152px;
	height: 300px;
}

#loading_count{
	display:none;
	position: fixed;
	top: 50%;
	left: 50%;
	margin:30px 0 0 -50px;
	text-align:center;

	color:#999;
	font-size:1rem;
	width:100px;
	
	padding:0;
}


#preload{ width: 1px; height: 1px; position: fixed; bottom: 0; right: 0; opacity: .01; overflow: hidden;}
#preload img{ width: 1px; height: 1px; opacity: .01; }


/* IE Only
----------------------------------------------- */
#dp_swf_engine{ display:none;}







/* wrap
----------------------------------------------- */
 
#container	{ opacity:0.01; position:relative; z-index:1; margin:auto; width:100%; min-width: 1100px; height:auto; min-height: 700px; background-color: #d2ccc1;}

body#top #container	{ overflow: hidden;height:100vh; max-width: 1600px;}




body#top #bg:before,
body#top #bg:after{ content: ''; position: absolute; z-index: 1;top: 0; left: 0; width:100%;  min-width: 1100px; max-width: 1600px; height: 100vh; min-height: 850px;}

body#top #bg:before{display: block;  background: url(img/top/bg.png) center 0 no-repeat; background-size: cover;transition: background 3000ms cubic-bezier(.50,.0,.50,1);}
body#top #bg:after{display: none; background: url(img/top/bg_sp.png) center 0 no-repeat; background-size: cover;transition: background 3000ms cubic-bezier(.50,.0,.50,1);}


body#top #bg.bgShow:before{background-position: center bottom;}
body#top #bg.bgShow.stop:before{transition: background 0ms;}

body#top #bg.bgShow:after{background-position: center bottom;}
body#top #bg.bgShow.stop:after{transition: background 0ms;}

body#top #bg.stop:before{transition: background 0ms;background: url(img/top/bg.png) center 0 no-repeat; background-size: cover;background-position: center bottom;}
body#top #bg.stop:after{transition: background 0ms; background: url(img/top/bg_sp.png) center 0 no-repeat; background-size: cover;background-position: center bottom;}




#bg2	{ position:fixed; z-index:1; margin:auto; width:100%; min-width: 1100px; height:auto; min-height: 850px; padding-top: 143%; overflow: hidden; }



#bg2:before,
#bg2:after{ content: ''; position: absolute;top: 0; left: 0; width:100%; min-width: 1100px; height: auto; min-height: auto; }

#bg2:before{ z-index: 1;display: block;  background: url(img/common/bg_contents.png) center top no-repeat; background-size: cover;transition: background 3000ms cubic-bezier(.50,.0,.50,1);padding-top: 143%;}




#bg2:after {
	z-index: 2;
	position: fixed;
    width: 100%;
    height: 100%;
    background: url(img/common/bg_pattern.png);
    
	
  -webkit-animation: bgLoop 6s linear infinite;
          animation: bgLoop 6s linear infinite;
}



#base		{  position:relative; z-index:2; width:100%; margin:auto;}


#main		{  position:relative; z-index:2; width:100%;  max-width: 800px; min-height: 600px; border: solid 0px #f30;  margin:auto; padding-top: 200px;}


body:not(#top) #main{ opacity: 0; transition: all 400ms cubic-bezier(0,0,.5,1);}
body:not(#top) #main.show{ opacity: 1; }




#copyright{ height: 0px; padding-top: 200px; overflow: hidden; background: url(img/common/copyright.png) center 50px no-repeat;opacity: 0;transition: all 400ms cubic-bezier(0,0,.5,1);}

#copyright.show{ opacity: 1;}









/* action
----------------------------------------------- */
#container.fixed{ position:fixed; margin: auto; width:100%; height:100% !important; max-width: auto !important;overflow:hidden; top: 0px; left: 50%;
   transform: translate(-50%, 0);}


#changeCover{ display: none; position:fixed; width:100%; height:100%; overflow:hidden; top: 0px; left: 0; z-index: 9999; background-color: #f5eee3;}


#coverView{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(img/parts/white_90.png);
	z-index:9000;
	opacity: 0;
	transition: all 500ms cubic-bezier(.50,.0,.50,1);
}

#coverView.show{opacity: 1;}

#coverViewContents{
		position: fixed;
	top: 5%;
	left: 10%;
	width: 80%;
	height: 90%;
	z-index:9000;
	
}
#coverViewContents iframe{
	position: fixed;
	top: 50%;
	left: 50%;
	

	
}

#coverViewContents.image{
	position: fixed;
	top: 50%;
	left: 50%;
	width: 50%;
	height: 60%;
	transform: translate(-50%, -50%);
	z-index:9000;
}

.touchDevice #coverViewContents.image{
	width: 80%;
	height: 80%;
	transform: translate(-50%, -50%);
	z-index:9000;
}

#coverViewContents.image.top_visual{
	position: fixed;
	top: 50%;
	left: 50%;
	width: 90%;
	height: 90%;
	transform: translate(-50%, -50%);
	z-index:9000;
}

.touchDevice #coverViewContents.image.top_visual{
	width: 90%;
	height: 90%;
	transform: translate(-50%, -50%);
	z-index:9000;
}




#coverViewClose{
	position: fixed;
	top: 25px;
	right: 25px;
	width: 62px;
	height: 88px;
	background: url(img/common/btn_view_close.png) no-repeat;
	background-size: contain;
	z-index:9001;
	cursor: pointer;
	transition: all 200ms ease;
}

#coverViewClose:hover{
	
  
	 -webkit-transform: scale(1.1,1.1); 
	 transform: scale(1.1,1.1); 
}





@-webkit-keyframes bgLoop {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -75px 90px;
  }
}

@keyframes bgLoop {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -75px 90px;
  }
}