@CHARSET "UTF-8";
 /**
    * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
    * 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 {
	    margin: 0;
	    padding: 0;
	    border: 0;
	    font-size: 100%;
	    font: inherit;
	    vertical-align: baseline;
    }
    .fL{float:left;}
	.fR{float:right;}
    html {
    	height: 100%;
	}

    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
    
    @font-face{ 
		font-family: 'DotGothicStyle'; /* 自由な名前をつけることができます */
		src:url('../font/misaki_gothic.eot'); /* IE9以上用 */
		src:url('../font/misaki_gothic.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
		url('../font/misaki_gothic.woff') format('woff'), /* モダンブラウザ用 */
		url('../font/misaki_gothic.ttf') format('truetype'); /* iOS, Android用 */	
		
		font-family: 'DotMinchoStyle'; /* 自由な名前をつけることができます */
		src:url('../font/misaki_mincho.eot'); /* IE9以上用 */
		src:url('../font/misaki_mincho.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
		url('../font/misaki_mincho.woff') format('woff'), /* モダンブラウザ用 */
		url('../font/misaki_mincho.ttf') format('truetype'); /* iOS, Android用 */
		
		font-family: 'Dotk8x12Style'; /* 自由な名前をつけることができます */
		src:url('../font/k8x12.eot'); /* IE9以上用 */
		src:url('../font/k8x12.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
		url('../font/k8x12.woff') format('woff'), /* モダンブラウザ用 */
		url('../font/k8x12.ttf') format('truetype'); /* iOS, Android用 */
	}

	.DotFontClass {
		font-family: 'Dotk8x12Style';
	}

    body {
	    line-height: 1;
		font-family:Helvetica, Arial,
		'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
		Meiryo, メイリオ, sans-serif;
		color:#555;
		height: 100%;
    }
    
   div.main {
    	background: url(../images/headBG.png) no-repeat 0 0;
    	background-size: 100% auto;
    	margin: 0 auto;
    	height: 1334px;
    	min-width: 1200px;
    	position: relative;
    }
    
    div.head {
		width:100%;
		/* text-align:center; */
		min-width: 1200px;
		position: absolute;
		top: 5%;
	}
	
	div.head img {
		width:25%;
		position: absolute;
	}
	
   div.character {
   		width: 100%;
   		position: absolute;
   		top: 280px;
   		min-width: 1200px;
   }
   
   div.character img.leftPersonImg {
   		position: absolute;
   		left:0%;
   		width: 25%;
   }
   
   div.character img.rightPersonImg {
   		position: absolute;
   		right:0%;
   		width: 25%;
   }
   
   div.head2 {
   		width: 100%;
   		margin: 0 auto;
   		text-align: center;
   		position: absolute;
   		top: 42%;
   		min-width: 1200px;
   }

	.noUnderLine {
		text-decoration: none;
	}
   
   .yajirushiImg {
	   position: relative;
	   left: -1%;
	   top: -52px;
   }
   
   div.NEWGAME1 img {
   		position: absolute;
   		width: 12%;
   }
   
   
   div.stageBG {
   		width: 1060px;
   		background: url(../images/stageselectBG.png) no-repeat 0 0;
   		margin: 0 auto;
   		height: 549px;
   		position: relative;
   		top: 55%;
   }
   
   .stage1 {
		position: absolute;
		top: 20%;
		left: 3%;
		opacity: 0;
   }
   
   .stage2 {
		position: absolute;
		top: 20%;
		left: 23%;
		opacity: 0;
   }
   
   .stage3 {
		position: absolute;
		top: 20%;
		left: 43%;
		opacity: 0;
   }
   
   .stage4 {
		position: absolute;
		top: 20%;
		left: 63%;
		opacity: 0;
   }
   
   .stage5 {
		position: absolute;
		top: 20%;
		left: 83%;
		opacity: 0;
   }
   
   .stage6 {
		position: absolute;
		top: 60%;
		left: 3%;
		opacity: 0;
   }
   
   .stage7 {
		position: absolute;
		top: 60%;
		left: 23%;
		opacity: 0;
   }
   
   .stage8 {
		position: absolute;
		top: 60%;
		left: 43%;
		opacity: 0;
   }
   
   .stage9 {
		position: absolute;
		top: 60%;
		left: 63%;
		opacity: 0;
   }
   
   .stage10 {
		position: absolute;
		top: 60%;
		left: 83%;
		opacity: 0;
   }
   
   div.middle {
   		background: url(../images/MBG.png);
    	background-size: 100% auto;
    	width: 100%;
    	margin: 0 auto;
    	height: 490px;;
    	min-width: 1200px;
    	position: relative;
   }
   
   .m1 {
   		position: absolute;
   		top: 10%;
   		left: 26%;
   }
   
   .download1 {
   		margin-top:35px;
   		width: 100%;
   		/* position: absolute; */
   		/* min-width: 1200px; */
   }
   
   .download1 img.iosDownload {
   		margin-right: 15px;
   }
   
   .download1 img.androidDownload {
   		margin-left: 15px;
   }
 
   .m2 {
   		position: absolute;
   		top: 10%;
   		left: 55%;
   }
   
	div.introshop {
		width: 100%;
		background: url(../images/shopBG.png) no-repeat 0 0;
       	background-size: 100% auto;
       	height: 801px;
       	min-width: 1200px;
   		margin: 0 auto;
    	position: relative;
	}
	
	div.shophead {
		background: url(../images/SHOPHEAD1.png) no-repeat 0 0;
		height: 158px;
		width: 520px;
		position: relative;
		top: 5%;
		margin: 0 auto;
	}
	
	div.SHOPHEAD1 img {
		width: 35%;
	}
	
	.typingArea {
		position: relative;
		width: 100%;
		top: 19%;
		text-align: center;
		letter-spacing: 0.2em;
		/* フォントサイズ */
		display: none;
		color: white; 
		line-height: 50px; 
		font-size: 170%;
	}
	
	.shop1 {
		position: absolute;
		top: 34%;
		left: 25.5%;
	}
	
	.shop2 {
		position: absolute;
		top: 34%;
		left: 43.5%;
	}
	
	.shop3 {
		position: absolute;
		top: 34%;
		left: 61.5%;
	}
	
	.shop4 {
		position: absolute;
		top: 34%;
		left: 71%;
	}
	
	.shop5 {
		position: absolute;
		top: 65%;
		left: 35%;
	}
	
	.shop6 {
		position: absolute;
		top: 65%;
		left: 52%;
	}
	
	.shop7 {
		position: absolute;
		top: 65%;
		left: 62%;
	}
	
	.slm {
		position: absolute;
		top: 46%;
		left: 35%;
	}
	
	div.speak1 {
		width: 100%;
		position: absolute;
		min-width: 1200px;
		top: 48%;
	}
	
	div.speak1 img.menImg1 {
		position: absolute;
		left: 43.5%;
		width: 5%;
		opacity: 0;
	}
	
	div.speak1 img.wordImg1 {
		position: absolute;
		left: 28.5%;
		top: 60px;
		width: 15%;
		opacity: 0;
	}
	
	div.speak2 {
		width: 100%;
		position: absolute;
		min-width: 1200px;
		top: 80%;
	}
	
	div.speak2 img.menImg2 {
		position: absolute;
		left: 62%;
		width: 4%;
		opacity: 0;
	}
	
	div.speak2 img.wordImg2 {
		position: absolute;
		left: 67%;
		top: -40px;
		width: 13%;
		opacity: 0;
	}

	div.introcoupon {
		width: 100%;
		background: url(../images/couponBG.png) no-repeat 0 0;
       	background-size: 100% auto;
       	height: 912px;
       	min-width: 1200px;
   		margin: 0 auto;
   		position: relative;
	}
	
	.couponhead {
		background: url(../images/COUPONHEAD1.png) no-repeat 0 0;
		height: 158px;
		width: 520px;
		position: relative;
		margin: 0 auto;
		top: 6%;
	}
	
	.caution {
		opacity: 0;
		position: absolute;
		top:40%;
		left:50%;
		background: url(../images/warning.png) no-repeat 0 0;
		background-size:100% 100%;
		z-index:10;
		height:25%;
		width:25%;
		color: #ff0000;
		text-align:center;
		 line-height: 270px;
		font-size: 300%;
	}
	
/* 	
	.type2 {
		position: relative;
		width: 100%;
		top: 19%;
		text-align: center;
		letter-spacing: 0.2em;
 		display: none;
	}
 */	
	div.first {
		width: 100%;
		position: relative;
		min-width: 1200px;
		/* top: 35%; */
	}
	
	div.first img.newBox1Img {
		position: absolute;
		left: 49%;
		width: 8%;
		top: 245px;
	}

	div.first img.couponImg {
		position: absolute;
		right: 45%;
		width: 35%;
		top:150px;
		opacity: 0;
	}
	
	div.first img.box1Img {
		position: absolute;
		left: 50%;
		width: 8%;
		top: 230px;
		opacity: 0;
	}

	img.bs2Img {
		position: absolute;
		right: 16%;
		top: 100px;
		width: 5%;
		opacity: 0;
	}
	
	div.second {
		width: 100%;
		position: absolute;
		min-width: 1200px;
		/* top: 65%; */
	}

	div.second img.newBox2Img {
		position: absolute;
		left: 34%;
		width: 8%;
		top: 480px;
	}
	
	div.second img.couponImg2 {
		position: absolute;
		left: 35%;
		width: 35%;
		top: 400px;
		opacity: 0;
	}
	
	div.second img.box2Img {
		position: absolute;
		left: 33%;
		width: 8%;
		top: 450px;
		opacity: 0;
	}

	div.second img.taku2Img {
		position: absolute;
		left: 0%;
		top: 270px;
		width: 5%;
		opacity:0;
	}
	
	div.download2 {
		background: url(../images/downloadBG.png);
       	background-size: 100% auto;
       	min-width: 1200px;
   		margin: 0 auto;
   		text-align:center;
   		padding-top: 30px;
   		padding-bottom: 30px;
	}
	
	.download2 img.iosDownload2 {
		margin-right: 50px;
	}
	
	.download2 img.androidDownload2 {
		margin-left: 50px;
	}
	
	div.footer {
		background: url(../images/footerBG.png);
       	background-size: 100% auto;
       	min-width: 1200px;
   		margin: 0 auto;
   		text-align:center;
   		padding-top: 20px;
   		padding-bottom: 20px;
	}
	
	.footer1 {
		margin-bottom: 10px;
		font-size: 16px;
	}
	
	div.footer dl {
		display:inline-block;
		margin: 0 auto;
	}
	
	div.footer a {
		text-decoration: none;
	}
	
	div.footer dt {
		float:left;
		padding-left:5px;
	}
	
	div.footer dd {
		float:left;
		margin-left:5px;
	}
	
	.footer2 {
		margin-top: 10px;
		font-size: 16px;
	}
	
	.couponAttention {
		opacity: 0;
		padding:5px;
		background-color:#000;
		position: absolute;
		bottom:5px;
		left:10px;
		color: #fff;
		font-size: 25px;
	}
	
	/* ショップリンクを大きくする */
	.shopLink a img{
		transition:0.5s;
	}
	
	.shopLink a:hover img {
		transform:scale(1.05);
	}
	
	.cf:before,
	.cf:after {
	    content: " ";
	    display: table;
	}
	
	.cf:after {
	    clear: both;
	}
	
	.cf {
	    *zoom: 1;
	}