#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:380px;
	height: 2644px;
	margin-right: auto;
	margin-left: auto;
}

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

	background-image: url("../img/01_top/kabegami01.jpg");
}

.DL_btn {
	z-index: 100;
	position: fixed;
    right: 0;
    top: 200px;
}

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

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


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

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

/* トリプルキャンペーン★ -------------- */
.camp{
	position: absolute;
	width:380px;
    height: 140px;
	top: 180px;
	right: 0;
	text-align: right;
}
.camp img{
	width:50%;
	height: auto;
}

.oubo{
	position: absolute;
	width: 380px;
	height: 50px;
	top: 250px;
	left: 0;
	right: 0;
	margin:0 auto;
	/*margin:0 0 0 600px;*/ /* 上 右 下 左 */
	text-align: right;
}
.oubo img{
	/*padding:0 0 0 50px;*/
	margin:-0.2em 6px -0.2em 0;
}


/*
.sale{
	position: absolute;
	width:380px;
    height: 140px;
	top: 180px;
	right: 0;
	text-align: right;
	padding:0 30px 0 0;
}
.sale img{
	width:40%;
	height: 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:32px;
	height:12px;
}

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

.foll{
	position: absolute;
	width:380px;
	height:50px;
	top:480px;
	left:0;
	right:0;
	margin:0 auto;
}
.button{
	display: inline-block;     /* インラインブロック要素にする */
	top:50%;
	margin:0 10px;
	padding:0;		/*余計な隙間を除く*/
	cursor:pointer;
	vertical-align: middle;		/* 上下揃え（インライン要素のみ有効） */
}



/* 動画＆LINE（ブロック２の２） */
.moveArea{
	position: relative;
	width:380px;
	height:530px;
	box-sizing:border-box;
	margin:0 auto;
}

.move{
	position: relative;
	width: 380px;
	height:auto;
	margin:0 auto;
	padding:0 0 8px 0;  /*上 右 下 左 */
}

.move #mov1{
	position: absolute;
	width: 340px;
	height:190px;
	top:53px;
	left:0;
	right:0;
	margin:0 auto;
	padding:0;
}

.move2{
	position: relative;
	width: 380px;
	height:auto;
	margin:0 auto;
	padding:0;
}
.move2 #mov2{
	position: absolute;
	width: 340px;
	height:190px;
	top:22px;
	left:0;
	right:0;
	margin:0 auto;
	padding:0;
}


.LINEstamp{
	position: relative;
	width: 380px;
	height:70px;
	margin:0 auto;
}


/* ソフト情報1（モード等） */
.mode {
	position: relative;
	width:380px;
	height:340px;
	margin: 0 auto;
}
.mode p{
	margin-bottom: 2em;
}

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


.info .soft_text p{
	font-size:0.05em;		/* 文字サイズ */
	-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;		/* 文字色 */
	text-align: left;	/* 左詰め */
	margin:0 10px;    /* 行間（上下、左右） */
}
.info .get_soft{
	position: absolute;
	width:120px;
	height:auto;
	top: 40px;
	right: 40px;
	text-align: right;
}





*{
	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;
}