#MainArea {
	position:relative;
	text-align: center;
	font-size: 100%;
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	color: rgb(255, 255, 255);
	background-color: rgb(255, 255, 255);
	width:100vw;
	height: auto;
	margin-right: auto;
	margin-left: auto;
}

/* 背景1（表示高さいっぱいに配置されるよう設定＋固定） */
.fixed-bg {
	position:relative;
	width: 100vw;
	height: 500px;
    background-position: center top;
    background-size: auto 100%;
    background-repeat: no-repeat;   /*背景は繰り返さない*/
    background-image: url("/KohaneEX/img/10_sp/back_sp.jpg");
    z-index: 0;
}
/* 背景2 */
.scrolling-bg{
	width: 100vw;
	height: auto;
	min-height: 100vh;
    background-repeat: repeat;		/*横、縦方向に繰り返す*/
    background-clip: content-box;
    z-index: 10;
	background-image: url("/KohaneEX/img/01_top/kabegami.jpg");
}



/* 購入ページ ----------------- */
.DL_btn {
	z-index: 100;
	position: fixed;
    right: 0;
    top: 60px;
}

.DL_btn_ps {
	z-index: 100;
	position: fixed;
    right: 0;
    top: 170px;
}




/* こはねEXロゴ ----------------- */
.logo{
	position: absolute;
	top:-50px;
    left: 0;
    width:150px;
    height:auto;
	margin:0;
	z-index:5;
	text-align:left;
}
.logo img{
	width:100%;
	height:auto;
}

/* 雲 */
.kumo{
	z-index: 20;
	position: absolute;
	width:100vw;
	height:auto;
	top:380px;
	bottom:0;
	left:0;
	right:0;
	//text-align: left;
}
.kumo img{
	width: 100%;	/* 親要素に関係なく、画面の幅に合わせる */
    height: auto;
}



/*-----------------------------------------------------*/

.moji{
	position: absolute;
	width:380px;
    height: auto;
    top:292px;
    left:0;
	z-index: 0;
	text-align: left;
}
.moji img{
	width:100%;
	height: auto;
}

/*-----------------------------------------------------*/

.kohaneJK{
	z-index: 10;
	position: absolute;
    left: 20px;
    top: 2px;
}
.kohaneJK a{
	text-decoration: none;
}
.kohaneJK img{
	width: 70px;
	height: auto;
}
.kohaneJK img:hover {
	transform: scale(1.05);		/*画像の拡大率*/
	transition-duration: 0.1s;	/*変化に掛かる時間*/
}


/*-----------------------------------------------------*/

/* 動画＆LINE（ブロック２の１） */
.moveArea{
	position: relative;
	width:100vw;
	height:280px;
	box-sizing:border-box;
	margin:0 auto;
}
.move{
	position: relative;
	width: 100%;
	height:auto;
	margin:0 auto;
	padding:0 0 8px 0;
}
.move img{
	width: 100%;
	height:auto;
}
.move #mov1{
	position: absolute;
	width: 100%;
	height:auto;
	top:34px;
	margin: 20px auto;
	padding:0;
}

/*-----------------------------------------------------*/

/* ツイッター（ブロック２の２） */
.twitterArea{
	position: relative;
	width:100vw;
	height: auto;
	box-sizing:border-box;
}
.twitterArea img{
	width: 100%;
	height:auto;
}
.twitter{
	position: absolute;
	width:80%;
	height:auto;
	top:90px;
	margin: 0 20px;
}

.twitterArea .foll{
	position: absolute;
	width:100%;
	height:10%;
	bottom:10px;
	margin:0 auto;
}
.button{
	display: inline-block;     /* インラインブロック要素にする */
	top:50%;
	margin:0;
	padding:0;
	cursor:pointer;
	vertical-align: middle;		/* 上下揃え（インライン要素のみ有効） */
}
.button img{
	width: 70%;
	height:auto;
}



.LINEstamp{
	position: relative;
	width: 100%;
	height:80px;
	margin:0 auto;
}


/*-----------------------------------------------------*/

.Area1{
	position: relative;
	width:380px;
	height:240px;
	overflow:hidden;
	text-align:center;
	box-sizing:border-box;	/* width+左右のmarginの合計を100%にすれば、親要素にはまる。 */
	z-index: 30;
}
.Area1 img{
	width:100%;
	height:auto;
}


.news{
	position: absolute;
	top:54px;
	left:0;
	right:0;
	width:345px;		/* 横幅（必須） */
	height:136px; 		/* 縦幅（必須） */
	/*background-color:#ccc;*/ /* 背景色 */
	overflow: auto; /*状況に応じて縦スクロールバーが出現*/
	margin:0 0 0 20px; /* 上 右 下 左 */
}
.news p{
	/*font-size:100%;*/				/* 文字サイズ */
	color: #503828;
	font-size: 0.5em;				/* サイズ1.2倍 */
	text-align: left;				/* 左詰め */
	margin:0.2em 10px;				/* 行間（上下、左右） */
	/*letter-spacing: 0.5px;*/		/*文字幅*/
}
.news span{
	color:#ff307e;
}
.news span.date{
	display: inline-block;
	width:70px;
	/*text-decoration: underline;*/
	color:#ff307e;
}
.news a{
	color: #503828;
	text-decoration: none;
}
.news a:hover{
	text-decoration: underline;
	color: #ff307e;
	/*border-bottom: 1px solid #ff307e;*/
}
.news img{
	width:16px;
	height:6px;
}



/* ソフト情報2（モード等） */
.info {
	position: relative;
	width:100vw;
	height:120px;
	margin: 0 auto;			/* 中央揃え */
}
.info img{
	width:100%;
	height:auto;
}

.info .soft_text{
	position: absolute;
	width:100%;
	height:120px;
	top:10%;
	margin: 0 auto;
}

.info .soft_text p{
	font-size:0.68em;		/* 文字サイズ */
	-webkit-transform:scale(0.8);
	-moz-transform:scale(0.8);
	-ms-transform:scale(0.8);
	-o-transform:scale(0.8);
	transform:scale(0.8);
	color: white;		/* 文字色 */
	font-weight: bold;	/* 太字に */
	text-align: left;	/* 左詰め */
	line-height: 1.0;
	margin:0 10%;    /* 行間（上下、左右） */
}

.info .container_switch_ps{
	position: absolute;
	bottom: 18%;
	left: 13%;
	height: 32%;
	width: 42%;
}
.info  .container_switch_ps .icon_switch{
	position: absolute;
	top: 8%;
	left: 5%;
	height: 70%;
	width: auto;
	z-index: 200;
}
.info  .container_switch_ps .icon_ps{
	position: absolute;
	top: 20%;
	left: 24%;
	height: 40%;
	width: auto;
	z-index: 300;
}

.info .get_soft_steam{
	position: absolute;
	bottom: 18%;
	right: 10%;
	height: 32%;
	width: 32%;
}



.Area3{
	position: relative;
	width:100vw;
	height:40px;
	/*overflow:hidden;*/
	/*text-align:center;*/
	margin:0 auto;
	box-sizing:border-box;	/* width+左右のmarginの合計を100%にすれば、親要素にはまる。 */
	/*z-index: 30;*/
}
.Area3 img{
	width:100%;
	height:auto;
}

#FooterArea{
    top: -50px;
}
#footer {
	/*理由がよくわからない値*/
	scale: 35.2%;
	left: -350px;
	top: -90px;
	/*理由がよくわからない値ここまで*/
	position: absolute;
	border: 0;
	width:1080px;
	height:340px;
	padding:0;
}


/* menu_link をフロー内に配置（Twitter 埋め込み高さに関係なく製品情報の下に表示） */
.menu_link {
	position: relative;
	bottom: auto;
}


*{
	margin:0;
	padding:0;
	box-sizing:border-box;            /* パディングとボーダーを幅と高さに含める */
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}
body {
	width:100%;
	height:100%;
	min-width:380px;
}