@charset "utf-8";

/*------------------------------------------------------------------*/
/*--PC用CSS----------------------------------------------------------------*/
/*------------------------------------------------------------------*/

/* 画像urlをカンプから変更 (../img/www/) → (../img/www/web/) */
/* 画像urlをカンプから変更 (../img/www/character) → (../img/www/web/characters) */

@media screen and (min-width: 681px) {


/***ログイン******************************************/

.sec_login_wra{
	margin: 0;
	padding: 0;
}

.hero{
	width: 50%;
	margin: 20px auto 0 auto;
	padding: 0;
}

.hero img{display: block;}

.login_entry_wra{

	margin: 0 auto 5% auto;
	padding: 30px;
	border: 3px solid #8a6632;
	border-radius: 30px;		/* CSS3草案 */
	-webkit-border-radius: 30px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 30px;	/* Firefox用 */
	background: #f3e6c3;
}

.logins dl{
	margin: 0 0 30px 0;
	padding: 0;

}


.logins dt{
	margin: 0 0 5px 0;
	padding: 0;
	text-align: left;
	font-size: 18px;
	font-weight: 700;
	color: #653f01;
}


.logins dd{
	margin: 0;
	padding: 0 0 0 0;
}


.logins .waku{
	width: 100%;
	height: 30px;
	margin: 0 auto 0 auto;
	padding: 0;
	font-size: 18px;
	text-align: center;


}

.btn_ok{
	display: block;
	width: 200px;
	margin: 20px auto 0 auto;
	padding: 0;
	text-align: center;
}

.logins .ft_navi{

	display: none;
}

.logins p{

	margin: 0;
	padding: 0;
	font-size: 11px;
	text-align: center;
}

.logins p a{
	text-decoration: none;
	color: #fff;
}


.logins .copy{
	padding: 20px 0 0 0 !important;
}

/****キャラクター******************************************************/

/* 選択画面 */

.chara_select_wra{
	margin: 10% 0 0 0;
	padding: 0;
	text-align: center;
}

.chara_select_wra .thumbnail{
	width: 500px;
	margin: 0 auto 0 auto;
	padding: 0;


}

.chara_select_wra .thumbnail .slick-slide{

	width: 80px;
	margin: 0;
	padding: 0;

}

.slick-prev::before {
  content: "" !important;
}

.slick-prev::after {
  content: url(../img/www/web/characters/arrow_left.png);
}

.slick-next::before {
  content: "" !important;
}

.slick-next::after {
  content: url(../img/www/web/characters/arrow_right.png);
}


/* プロフィール */

.chara_profile_wra{
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
}

.chara_profile{
	width: 75%;
	margin: 0 auto 0 auto;
	padding: 0;

}

.chara_voice{
	position: absolute;
	width: 200px;
	top: 120px;
	left: 150px;
	margin: 0;
	padding: 0;

}

.btn_voice{
	float: left;
	width: 80px;
	margin: 0;
	padding: 0;

}

.btn_start{
	position: absolute;
	width: 200px;
	bottom: 50px;
	right: 70px;
	margin: 0;
	padding: 0;
}


/* ストーリー選択 */

.story_list_wra{
	position: relative;
	margin: 0 0 0 0;
	padding: 0;

}

.character_wra{
	display: none;
	position: absolute;
	top: 0;
   	left: 50%;
    	transform: translateX(-50%);
    	-webkit-transform: translateX(-50%);
    	-ms-transform: translateX(-50%);
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 0;
	text-align: center;
}

.character_wra_sp{ display: none; }


.story_list_wra ul{

	list-style: none;
	position: relative;
	width: 80%;
	margin: 0 auto 0 auto;
	padding: 15% 0 0 0;
	text-align: center;
}

.story_list_wra ul lis{

	margin: 0 0 15px 0;
	padding: 0;
}

/* ストーリーシーン */

.storyScene{
	overflow: hidden;
	height: 100%;
}

.storyScene #wrap{
	overflow: hidden;
	width: 680px;
	height: 100%;
	margin: 0 auto 0 auto;
	padding: 0;
}

.storyScene .story_character{
	display: inline-block;
	position: relative;
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 0;	
}

.storyScene .story_character .pic{
	position: absolute;
	top: 0;
    	transform: translateY(5%);
   	 -webkit-transform: translateY(5%);
    	-ms-transform: translateY(5%);
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 0;
}

.storyScene .story_character_face_1{
	position: absolute;
	top: 0;
    	transform: translateY(5%);
   	 -webkit-transform: translateY(5%);
    	-ms-transform: translateY(5%);
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 0;
}


.storyScene .story_character_face_2{
	position: absolute;
	top: 0;
    	transform: translateY(5%);
   	 -webkit-transform: translateY(5%);
    	-ms-transform: translateY(5%);
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 0;
}

.storyScene .dialogue_box{
	position: absolute;
	bottom: 60px;
   	left: 50%;
    	transform: translateX(-50%);
    	-webkit-transform: translateX(-50%);
    	-ms-transform: translateX(-50%);
	width: 96%;
	margin: 0 auto 0 auto;
	padding: 0;
}

.storyScene .dialogue_box .btn_auto{
	box-sizing: border-box;
	position: absolute;
	top: -30px;
   	right: 10px;
	width: 80px;
}

.storyScene .dialogue_box .name{
	box-sizing: border-box;
	position: absolute;
	top: -10px;
   	left: 15px;
	width: 134px;
	height: 30px;
	margin: 0;
	padding: 6px 0 0 0;
	text-align:  center;
	font-family:'TBcinema';
	font-size: 15px;
	color: #fff;
	background: url(../img/www/web/characters/chara_name_bg.png) no-repeat;
	background-size: cover;

}

.storyScene .lines_box{
	width: 620px;
	height: 220px;
	margin: 0 auto 0 auto;
	padding: 0;
	background: url(../img/www/web/characters/lines_bg.png) no-repeat;
	background-position: center center;
	background-size: cover;
}



.storyScene .lines_box .lines p{
	position: absolute;
	top: 50%;
    	transform: translateY(-50%);
    	-webkit-transform: translateY(-50%);
    	-ms-transform: translateY(-50%);
	margin: 0 auto 0 auto;
	padding: 0 15px 5px 15px;
	font-family:'TBcinema';
	font-size: 15px;

}

.storyScene .lines_box .next{
	position: absolute;
	bottom: 5px;
   	right: 20px;
	z-index: 555;
	width: 35px;
	margin: 0;
	padding: 0;	
}




/***トーク　キャラクター一覧******************************************/

.sec_chara_wra{
	margin: 20px 0 20px 0;
	padding: 0;
}

.special_talk{
	overflow: hidden;
	clear: both;
	display: table;
	position:relative;
	box-sizing: border-box;
	width: 680px;
	margin: 0 0 1% 0;
	padding: 3%;
}

.special_talk .spe_tal_bg{
	position: absolute;
	top: 0;
	left: 0;
	z-index: -88888;
	width: 680px;
	margin: 0;
	padding: 0;
}

.special_talk .spe_tal_thum{
	float: left;
	width: 160px;
	margin: 0 70px 0 0;
	padding: 0;
}

.special_talk .spe_tal_thum img{
	display: block;
	width: 160px;

}

.special_talk .spe_tal_center{
	float: left;
	box-sizing: border-box;
	width: 270px;
	margin: 0;
	padding: 0; 
	vertical-align: top;
}


.special_talk .spe_tal_right{
	float: right;
	margin: 0 0 0 0;
	padding: 0;
	text-align: center;
	vertical-align: middle;
}

.special_talk .chara_name{
	margin: 0 0 20px 0;
	padding: 15px 0 0 0;
	font-size: 25px;
	font-weight: 700;
	text-align: center;
	color: #4d2c03;
}


.special_talk .encounter{
	margin: 0 0 15px 0;
	padding: 0;
	font-size: 18px;
	font-weight: 700;
	text-align: left;
	color: #4d2c03;
}

.special_talk .talk{
 	white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;
	margin: 0;
	padding: 0;
	font-size: 15px;
	text-align: left;
	font-weight: 700;
	color: #928244;
}


.special_talk .btn_talk{
	position: absolute;
	top: 0;
    	transform: translateY(145%);
   	 -webkit-transform: translateY(145%);
    	-ms-transform: translateY(145%);
	right: 30px;
	width: 120px;
	margin: 0 auto 0 auto;
	padding: 0;
	vertical-align: middle;
}



.chara_list{
	position: relative;
	box-sizing: border-box;
	margin: 0 0 15px 0;
	padding: 20px;
}


.sec_chara_wra .number::before{
	box-sizing: border-box;
	position: absolute;
	top: -10px;
	right: 30px;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 3px;
	border-radius: 50px;/* CSS3草案 */
	-webkit-border-radius: 50px;/* Safari,Google Chrome用 */
	-moz-border-radius: 50px;/* Firefox用 */
	font-size: 0.7rem;
	text-align: center;
	color: #fff;
	background: #ff0000;
	content:"99"
}

.chara_list .cha_li_bg{
	position: absolute;
	top: 0;
	left: 0;
	z-index: -88888;
	margin: 0;
	padding: 0;
}


.chara_list .cha_li_thum{
	float: left; 
	width: 160px;
	margin: 0 70px 0 0;
	padding: 0;
}

.chara_list .cha_li_center{
	float: left; 
	width: 270px;
	margin: 0;
	padding: 0;
}


.chara_list .cha_li_right{
	float: right; 
	width: 120px;
	margin: 0 0 0 0;
	padding: 0 15px 0 0;
}

.chara_name{
	margin: 0 0 20px 0;
	padding: 15px 0 0 0;
	font-size: 25px;
	font-weight: 700;
	text-align: center;
}


.chara_list .chara_01{color: #6e0605;}
.chara_list .chara_02{color: #3c6a50;}
.chara_list .chara_03{color: #2b4963;}
.chara_list .chara_04{color: #b15516;}
.chara_list .chara_05{color: #734c9f;}
.chara_list .chara_06{color: #868686;}
.chara_list .chara_07{color: #5d5d5d;}


.chara_list .encounter{
	margin: 0 0 15px 0;
	padding: 0;
	font-size: 18px;
	font-weight: 700;
	text-align: left;
	color: #4d2c03;
}

.chara_list .talk{
	margin: 0;
	padding: 0;
	font-size: 15px;
	text-align: left;
	font-weight: 700;
	color: #928244;
	word-break: break-all;/* カンプから変更 */
}


.chara_list .friendship{
	margin: 0 0 15px 0;
	padding: 15px 0 0 0;
	font-size: 25px;
	font-weight: 700;
	text-align: center;
	color: #4d2c03;
}

.chara_list .fs_percent{
	margin: 0 0 20px 0;
	padding: 15px 0 0 0;
	font-size: 40px;
	font-weight: 700;
	text-align: center;
	color: #ba0202;
}

.chara_list .btn_talk{
	width: 100px;
	margin: 0 auto 0 auto;
	padding: 0;
}

/***トーク チャット******************************************/

.messages{
	height: 100%;
}

.messages #wrap{
	overflow: hidden;
	width: 680px;
	margin: 0 auto 0 auto;
	height: 100%;
}

.sec_chat_wra{
	position: relative;
	margin: 0;
	padding: 0;
}

.message_character{
	position: absolute;
	top: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 30px 0 0 0;
}

.message_character_face_1{
	position: absolute;
	top: 0;
	margin: 0;
	padding: 30px 0 0 0;
}


.message_character_face_2{
	position: absolute;
	top: 0;
	margin: 0;
	padding: 30px 0 0 0;
}

.messages .sideTop{
	list-style: none;
	position: absolute;
	top: 5px;
	left: 5px;
	margin: 0;
	padding: 0;
}

.messages .sideTop li{
	float: left;

}

.messages .btn_return{
	width: 75px;
	margin: 0 10px 0 0 ;
	padding: 0;

}

.messages .btn_display_off,
.messages .btn_display_on{
	width: 60px;
	margin: 0 5px 0 0;
	padding: 0;

}

.messages .btn_play{
	width: 60px;
	margin: 0 5px 0 0;
	padding: 0;

}

.messages .sideRight{
	overflow: hidden;
	float: right;
	position: relative;
	top: 5px;
	width: 150px;
	height: 525px;
	margin: 0 5px 0 0;
	padding: 0;
}

.messages .sideRight_inner{
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 150px;
	height: 420px;
	margin: 0;
	padding: 0;
}

.messages .messages_counter{
	position: absolute;
	left: 0;
	bottom: 0;
	margin: 0;
	padding: 0;
}


.messages .countBox{
	position: relative;
	width: 105px;
	height: 120px;
	margin: 0;
	padding: 0;
}

.messages .countBox_number_1{
	position: absolute;
	top: 50%;
    	transform: translateY(-50%);
    	-webkit-transform: translateY(-50%);
    	-ms-transform: translateY(-50%);
	left: 50%;
    	transform: translateX(-50%);
    	-webkit-transform: translateX(-50%);
    	-ms-transform: translateX(-50%);
	margin: 0;
	padding: 0;
	text-align: center;
}

.messages .countBox_number_1 img{
	width: 18px;
	margin: 0 auto 0 auto;
	padding: 0;

}


.messages .countBox_number_2{
	display: flex;
	justify-content: center;
	position: absolute;
	top: 50%;
    	transform: translateY(-50%);
    	-webkit-transform: translateY(-50%);
    	-ms-transform: translateY(-50%);
	left: 50%;
    	transform: translateX(-50%);
    	-webkit-transform: translateX(-50%);
    	-ms-transform: translateX(-50%);
	width: 50%;
	margin: 0;
	padding: 0;
	text-align: center;
}

.messages .countBox_number_2 img{
	width: 18px;
	margin: 0;
	padding: 0;

}

.messages .countBox_number_3{
	display: flex;
	justify-content: center;
	position: absolute;
	top: 50%;
    	transform: translateY(-50%);
    	-webkit-transform: translateY(-50%);
    	-ms-transform: translateY(-50%);
	left: 50%;
    	transform: translateX(-50%);
    	-webkit-transform: translateX(-50%);
    	-ms-transform: translateX(-50%);
	width: 75%;
	margin: 0;
	padding: 0;
	text-align: center;
}

.messages .countBox_number_3 img{
	width: 18px;
	margin: 0;
	padding: 0;
}

.messages .countBox_number_4{
	display: flex;
	justify-content: center;
	position: absolute;
	top: 50%;
    	transform: translateY(-50%);
    	-webkit-transform: translateY(-50%);
    	-ms-transform: translateY(-50%);
	left: 50%;
    	transform: translateX(-50%);
    	-webkit-transform: translateX(-50%);
    	-ms-transform: translateX(-50%);
	width: 75%;
	margin: 0;
	padding: 0;
	text-align: center;
}

.messages .countBox_number_4 img{
	width: 18px;
	margin: 0;
	padding: 0;
}

.messages .btn_push{
	position:relative;
	z-index: 1000;
	width:70%; 
	margin: 0;
	padding: 0 0 0 30%;
}


.message_lovemeter{
	position: absolute;
	right: 0;
	width: 60px;
	margin: 0;
	padding: 0;
}

.lovemeterLevel{
	width: 60px;
	margin: 0;
	padding: 0;
}

.lovemeterFlame{
	position:relative;
	width: 30px;
	margin: 0 auto 0 auto;
	padding: 0;
}

.lovemeterFlame .flame{
	position:relative;
	z-index: 999;
	margin: 0;
	padding: 0;
}

.lovemeterBar{
	overflow: hidden;
	position: absolute; 
	bottom: 5px;
	z-index: 888;
	width: 27px;
	height: 212px; 
	margin: 0 auto 0 auto;
	padding: 0;
	border-radius: 1px;		/* CSS3草案 */
	-webkit-border-radius: 1px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 1px;	/* Firefox用 */
	background: #000;
}

.friendBg{ background: linear-gradient(0deg, rgba(122,9,201,1) 0%, rgba(209,100,225,1) 100%); }

.loverBg{ background: linear-gradient(0deg, rgba(255,3,122,1) 0%, rgba(254,153,185,1) 100%); }

.messages .btn_conf{
	position:relative;
	z-index: 888;
	margin: 420px 0 0 0;
	padding: 0;
}

.messages .btn_lover_off{
	display: none;
}

.messages .btn_lover_on{
	position:relative;
	z-index: 888;
	margin: 420px 0 0 0;
	padding: 0;
}

.message_wra{
	position: fixed;
	z-index: 999;
	bottom: 0;
	width: 680px;
	margin: 0;
	padding: 0;
}

.message_field{
	overflow-y: scroll;
	box-sizing: border-box;
	height: 200px;
	margin: 0 2% 0 2%;
	padding: 3%;
	border-radius: 15px 15px 0 0;		
	-webkit-border-radius: 15px 15px 0 0;	
	-moz-border-radius: 15px 15px 0 0;	
	background: rgba(37,19,2,0.8);
}

.message_field .message_box_chara{
	clear: both;
	overflow: hidden;
	width: 100%;
	margin: 0 0 15px 0;
	padding: 0;
}


.message_box_chara .ic_thum{
	float: left;
	width: 60px;
	min-height: 1px;
	margin: 0 25px 0 0;
	padding: 0;
}


.message_box_chara .ic_thum .hide{ display: none;}

.message_box_chara .post{
	float: left;
	position: relative;
	width: 60%;
	margin: 0;
	padding: 10px;
	border-radius: 15px;		
	-webkit-border-radius: 15px;	
	-moz-border-radius: 15px;
	font-size: 13px;
	text-align: left;
	background: #f3e6c3;

}

.message_box_chara .post::before{
	position: absolute;
    	left: -20px;
	width: 20px;
	content: url(../img/www/web/messages/message_beard_left.png)

}


.message_field .message_box_i{
	float: right;
	clear: both;
	width: 70%;
	margin: 0 25px 15px 0;
	padding: 0;
}

.message_box_i .post{
	position: relative;
	margin: 0;
	padding: 10px;
	border-radius: 15px;		
	-webkit-border-radius: 15px;	
	-moz-border-radius: 15px;
	font-size: 13px;
	text-align: left;	
	background: #fff;
}

.message_box_i .post::before{
	position: absolute;
    	right: -15px;
	width: 20px;
	content: url(../img/www/web/messages/message_beard_right.png)

}

.message_box_chara .post_img{
	float: left;
	position: relative;
	width: 70%;
	margin: 0;
	padding: 0;
}

.message_field .message_box_i .post_present{
	float: right;
	width: 30%;
	margin: 0;
	padding: 0;
}




.message_form{
	width: 680px;
	margin: 0;
	padding: 10px 0 10px 0;;	
	text-align: center;
	background: linear-gradient(0deg, rgba(243,230,194,1) 30%, rgba(255,249,233,1) 100%);
}

.messageForm_inner{
	list-style: none;
	display: table;
	width: 100%;
	margin: 0;
	padding: 0;
}

.messageForm_inner li{
	display: table-cell;
	margin: 0;
	padding: 0;
	height: 30px;
	vertical-align: middle;
}

.messageForm_inner .left{
	width: 15%;
}


.messageForm_inner .left img{
	width: 30px;
	height: 30px;
}

.messageForm_inner .center{
	width: 67%;
}

.messageForm_inner .right{
	width: 20%;
}


.message_form .waku{
	resize: none;
	width: 100%;
	height: 30px;
	margin: 0 auto 0 auto;
	padding: 10px 0 0 0;
	font-size: 18px;
}


.message_form .waku::placeholder{
	font-size: 18px;
	text-align: center;
}

.message_form .textcount{
	margin: 0;
	padding: 0;
	font-size: 0.8rem;
	text-align: center;
}

.message_form .btn_send{
	display: inline-block;
	margin: 0;
	padding: 5px 20px 5px 20px;
	border: 0;
	border-radius: 5px;		/* CSS3草案 */
	-webkit-border-radius: 5px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 5px;	/* Firefox用 */
	font-size: 13px;
	text-align: center;
	color: #f3e6c2;
	background: rgb(37,19,2);
	background: linear-gradient(0deg, rgba(37,19,2,1) 0%, rgba(93,67,42,1) 100%);

}



/***ニュース 一覧******************************************/

.informations .top_btn{
	overflow: hidden;
	margin: 0;
	padding: 10px;
}

.informations .btn_present{
	float: left;
	position: relative;
	width: 45px;
	hegiht: 45px;
	margin:  0;
	padding: 0;
	vertical-align:middle;
	
}

.btn_present img{ width: 45px;}


.informations .batch::after{
	position: absolute;
	box-sizing: border-box;
	top: 0;
	right: -5px;
	width: 20px;
	height: 20px;
	margin: 0;
	z-index: 999;
	padding: 3px;
	border-radius: 50px;		/* CSS3草案 */
	-webkit-border-radius: 50px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 50px;	/* Firefox用 */
	font-size: 0.5rem;
	text-align: center;
	vertical-align:middle;
	color: #fff;
	background: #ff0000;
	content:"99"
}

.informations .btn_all{
	float: right;
	margin: 0;
	padding: 5px 0 0 0;
	text-align: right;
	vertical-align:middle;
}

.btn_all img{width: 200px;}

.news_list{
	box-sizing: border-box;
	margin: 0 0 10px 0;
	padding: 0;
	background: url(../img/www/web/informations/news_bg.png) no-repeat;
	background-size: cover;
}


.news_list ul.tab{
	list-style: none;
	/*overflow: hidden;*/
	margin: 0;
	padding: 0;
}

.news_list ul.tab li{
	float: left;
	position: relative;
	box-sizing: border-box;
	width: 25%;
	border-right: 1px solid #ad9347;
	padding: 10px;
	font-size: 12px;
	text-align: center;
	color: #283493;
	cursor: pointer;
	background: #c8ad5e;
}

.news_list ul.tab li:hover{
	color: #000;
}

.news_list .number::after{
	box-sizing: border-box;
	position: absolute;
	top: -10px;
	right: 0;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 3px;
	border-radius: 50px;/* CSS3草案 */
	-webkit-border-radius: 50px;/* Safari,Google Chrome用 */
	-moz-border-radius: 50px;/* Firefox用 */
	font-size: 0.7rem;
	text-align: center;
	color: #fff;
	background: #ff0000;
	content:"99"
}

.news_list ul.tab li.active{
	border-right: 1px solid #ad9347;
	color: #000;
	background: url(../img/www/web/informations/news_bg.png) no-repeat;
}

.news_list .tabContent {
  	display: none;
	overflow-y: scroll;
	height: 660px;
	margin: 0;
    	padding: 10px;
}

.news_list .active {
    display: block;
}


.news_list .tabContent active ul{
	list-style: none;
    	clear: both;
	margin: 0;
	padding: 0;
}

.news_list .tabContent active ul li{
    	clear: both;
	margin: 0;
	padding: 0;
}

.news_list .tabContent ul{
	list-style: none;
	float: left;
    	clear: both;
	width: 60%;
	margin: 0;
	padding: 0;
}


.news_list .tabContent ul li{
	margin: 0;
	padding: 0;
	font-size: 12px;
    	color: #283493;
}


.newspost{
	overflow: hidden;
	position: relative;
	width: 600px;
	margin: 0 auto 10px auto;
	padding: 0;
}


.newspost_bg{
	margin: 0;
	padding: 0;
}

.newspost_bg img{
	display: block;

}

.newspost_inner{
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	margin: 0;
	padding: 30px;
}

.post_l{
	float: left;
	width: 20%;
	margin: 0 5% 0 0;
	padding: 20px 0 0 0;
	text-align: center;
}

.post_c{
	float: left;
	width: 50%;
	margin: 0;
	padding: 0;
}

.post_c a{
	text-decoration: none;
	color: #000;

}

.post_r{
	float: right;
	width: 20%;
	margin: 0;
	padding: 15px 0 0 0;
}

/***ニュース 詳細******************************************/

.contents{
	margin: 20px 0 0 0;
	padding: 30px;
	border-radius: 30px;		/* CSS3草案 */
	-webkit-border-radius: 30px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 30px;	/* Firefox用 */
	background: #f3e6c3;
}

.news_title{
	margin: 0 0 15px 0;
	padding: 0 0 0 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 120% !important;
	color: #8c6431;
}

.news_article{
	margin: 0 0 20px 0;
	padding: 15px;
	background: #fff8e6;
}

.btn_close{
	width: 200px;
	margin: 20px auto 0 auto;
	padding: 0;

}

/***ヘルプ******************************************/

.sec_help_wra{
	margin: 20px 0 0 0;
	padding: 0;
	border-top: 1px solid #877a71;

}

.accbox{
	margin: 0;
	padding: 0;
}

.accbox label{
	display: block;
	position: relative;
	margin: 0;
	padding : 15px 15px 15px 30px;
	border-bottom: 1px solid #b0a496;
	font-size: 13px;
	color: #4c3b03;
	background: #fff7e2;
	cursor :pointer;
	transition: all 0.5s;
}

/*アイコンを表示*/

.accbox label::before{
	display: inline-block;
	position: absolute;
	left: 10px;
	width: 	15px;
	height: 15px;
	background-image: url(../img/www/web/informations/ic_question.png);
	background-size: cover;
	content: "";
}

.accbox label::after{
	display: inline-block;
	position: absolute;
	right: 15px;
	width: 	15px;
	height: 19px;
	background-image: url(../img/www/web/informations/ic_next.png);
	background-size: cover;
	content: "";
}

.accbox label:hover {
    background :#ffe9a9;
}

.accbox input {
    display: none;
}

.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}


.cssacc:checked + label + .accshow {
	height: auto;
	padding: 15px;
	border-bottom: 1px solid #b0a496;
	background: #fff;
	opacity: 1;
}

.accbox .accshow p {
	margin: 0;
	padding: 0;
	font-size: 13px;
}

.cssacc:checked + label::after {
 	display: inline-block;
	position: absolute;
	right: 15px;
	width: 20px;
	height: 15px;
	background-image: url(../img/www/web/informations/ic_under.png);
	background-size: cover;
	content: "";
}



/***ショップ******************************************/
.sec_item_wra{
	margin: 0;
	padding: 15px;
	/*background: url(../img/www/web/informations/news_bg.png) no-repeat;
	background-size: cover;*/
}

.items .lovecoin_wra{
	overflow: hidden;
	width:492px;
	margin: 20px auto 15px auto;
	padding: 0;
}

.items .lovecoin_wra .lovecoin{
	float: left;
	box-sizing: border-box;
	width: 200px;
	height: 32px;
	margin: 0 0 0 0;
	padding: 10px 20px 0 0;
	font-size: 15px;
	text-align: right;
	background: url(../img/www/web/messages/ic_lovecoin.png) no-repeat;
	background-size: cover;
}

.items .lovecoin_wra .paid{
	float: left;
	box-sizing: border-box;
	width: 146px;
	height: 32px;
	margin: 0 0 0 0;
	padding: 10px 0 0 40px;
	font-size: 15px;
	text-align: right;
	background: url(../img/www/web/messages/ic_lovecoin_min.png) no-repeat;
	background-size: cover;
}



.items .lovecoin_wra .free{
	float: left;
	box-sizing: border-box;
	width: 146px;
	height: 32px;
	margin: 0 0 0 0;
	padding: 10px 0 0 40px;
	font-size: 15px;
	text-align: right;
	background: url(../img/www/web/messages/ic_lovecoin_min.png) no-repeat;
	background-size: cover;
}

.items .lovecoin_wra .paid dl,
.items .lovecoin_wra .free dl{
	display: table;
	margin: 0;
	padding: 0;
}

.items .lovecoin_wra .paid dt,
.items .lovecoin_wra .free dt{
	display: table-cell;
	margin: 0;
	padding: 0;
	text-align: left;
	color: #fff;
}

.items .lovecoin_wra .paid dd,
.items .lovecoin_wra .free dd{
	display: table-cell;
	margin: 0;
	padding: 0 0 0 30px;
	text-align: right;
	color: #fff;
}

.items .headline{
	width: 70%;
	margin: 0 auto 10px auto;
	padding: 0;
}

.picup_banner{
	margin: 0 0 10px 0;
	padding: 0; 
}

.item_list{
	overflow: hidden;
	box-sizing: border-box;
	margin: 0 0 10px 0;
	padding: 0; 

}

.item_banner{
	float: left;
	box-sizing: border-box;
	width: 214px;
	height: 277px;
	margin: 1px;
	padding: 0; 
}

.items .tab{
	list-style: none;
	display: table;
	width: 90%;
	margin: 0 auto 0 auto;
	padding: 0;
}

.items .tab li{
	display: table-cell;
	margin: 0;
	padding: 5px;
	cursor: pointer;
}


.items .menus{
	display: table;
	margin: 0 auto 0 auto;
	padding: 0;
}

.items .menus li{
	display: table-cell;
	margin: 0;
	padding: 0;
	cursor: pointer;
}

.items .tab li:hover,
.items .menus li:hover{
	color: #fff;
}

.items .tab li.active{
	margin: 0;
	padding: 0;
  	zoom: 110%;
}

.items .menus li.active{
	margin: 0;
	padding: 0;
  	zoom: 120%;
}

.items .tabContent,
.items .tabContent2{
	clear: both;
	margin: 0;
    	padding: 5px 0 0 0;
    	display: none;
	overflow: hidden;
}

.items .active {
	display: block;
}


.tabContent2 ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.tabContent2 ul li{
	margin: 0 0 5px 0;
	padding: 0;
}

.tabContent2 p{
	margin: 0;
	padding: 0;
	font-size: 0.8rem;
	text-align: right;
}

.items .item_list_inner{
	display: flex;
	flex-wrap: wrap; 
  	-webkit-flex-wrap: wrap;          	
	-ms-flex-wrap    : wrap; 
	margin: 0 0 10px 0;
	padding: 0;
}

.items .item_list_inner .headline{
	width: 96%;
	margin: 0 auto 10px auto;
	padding: 0;
}

.items .item_list_inner .item_list_item{
	
	position: relative;
	width: 31%;
	margin: 0 1% 0 1%;
	padding: 0;
}

.item_list_item .item{
	position: absolute;
	top: 7%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	width: 50%;
	margin: 0;
	padding: 0;
}

.items .item_list_item .item_data{
	position: absolute;
	top: 45%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	width: 90%;
	margin: 0;
	padding: 0;
}

.items .item_data .item_name{
 	overflow: hidden; 
	width: 100%;
	margin: 7px 0 10px 0;
	padding: 0;
	font-size: 0.8rem;
	text-align: center;
    	text-overflow: ellipsis;
    	white-space: nowrap; 
}

.items .item_data .item_price{
	position: relative;
	margin: 0;
	padding: 0;
}

.items .item_data .item_price .price{

	position: absolute;
	top: 10%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	left: 80%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	margin: 0;
	padding: 8px 0 0 0;	
	font-size: 15px;
	font-weight: 700;
	color: #fff;
}

.items .item_data .item_buy{
	margin: 0;
	padding: 0;
	text-align: center;
}


/***告白******************************************/

.kokuhaku{
	overflow: hidden;
	height: 100%;
}

.kokuhaku #wrap{
	overflow: hidden;
	width: 680px;
	height: 100%;
	margin: 0 auto 0 auto;
	padding: 0;
}

.sec_kokuhaku_wra{
	position: relative;
	margin: 0;
	padding: 0;
}

.kokuhaku_blank{
	position: absolute;
	top: 0;
	box-sizing: border-box;
	height: 100vh;
	margin: 0;
	padding: 0;
}


.modal_lover{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	opacity: 0;
	visibility: hidden;
	transition: .3s linear;
}

.modal_lover_inner{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	width: 480px;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}

.modal_lover_inner p{
	margin: 0 0 10px 0;
	padding: 0;
	font-size: 2.0rem;
	text-align: center;
	color: #fb51aa;
}

.modal_lover_inner ul{
	list-style: none;
	display: table;
	margin: 0;
	padding: 0;
}

.modal_lover_inner li{
	display: table-cell;
	margin: 0;
	padding: 2%;
}


.kokuhaku .story_character{
	display: inline-block;
	position: relative;
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 0;	
}

.kokuhaku .story_character .pic{
	position: absolute;
	top: 0;
    	transform: translateY(5%);
   	 -webkit-transform: translateY(5%);
    	-ms-transform: translateY(5%);
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 0;	
}

.kokuhaku .story_character_face_1{
	position: absolute;
	top: 0;
    	transform: translateY(5%);
   	 -webkit-transform: translateY(5%);
    	-ms-transform: translateY(5%);
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 0;	
}

.kokuhaku .story_character_face_2{
	position: absolute;
	top: 0;
    	transform: translateY(5%);
   	 -webkit-transform: translateY(5%);
    	-ms-transform: translateY(5%);
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 0;	
}

.kokuhaku .dialogue_box{
	position: absolute;
	bottom: 60px;
   	left: 50%;
    	transform: translateX(-50%);
    	-webkit-transform: translateX(-50%);
    	-ms-transform: translateX(-50%);
	width: 96%;
	margin: 0 auto 0 auto;
	padding: 0;
}

.kokuhaku .dialogue_box .btn_auto{
	box-sizing: border-box;
	position: absolute;
	top: -30px;
   	right: 10px;
	width: 80px;
}

.kokuhaku .dialogue_box .name{
	box-sizing: border-box;
	position: absolute;
	top: -10px;
   	left: 15px;
	z-index: 999;
	width: 205px;
	height: 32px;
	margin: 0;
	padding: 6px 0 0 0;
	text-align:  center;
	font-family:'TBcinema';
	font-size: 15px;
	color: #000;
	background: url(../img/www/web/kokuhaku/ic_lines_name_bg.png) no-repeat;
	background-size: cover;

}

.kokuhaku .lines_box{
	position: relative;
	width: 620px;
    	height: 220px;
	margin: 0 auto 0 auto;
	padding: 0;
	background: url(../img/www/web/characters/lines_bg.png) no-repeat;
	background-position: center center;
	background-size: cover;
}

.kokuhaku .lines_log{
	position: absolute;
	top: 30px;
   	right: 15px;
	width: 45px;
	margin: 0;
	padding: 0;

}

.kokuhaku .lines_box .lines p{
	position: absolute;
   	top: 50%;
    	transform: translateY(-50%);
    	-webkit-transform: translateY(-50%);
    	-ms-transform: translateY(-50%);
	margin: 0 auto 0 auto;
	padding: 0 55px 0 15px;
	font-family:'TBcinema';
	font-size: 15px;
	color: #000;
}

.kokuhaku .lines_box .next{
	position: absolute;
	bottom: 5px;
   	right: 15px;
	z-index: 555;
	width: 30px;
	margin: 0;
	padding: 0;
	
}


/***エール********************************************/

/**エール一覧***/


.sec_yellList_wra{
	clear: both;
	margin: 0;	
	padding: 5px 0 0 0;
}

.yellList .yell_character{
	clear: both;
	position: relative;
	width: 96%;
	margin: 0 auto 0 auto;	
	padding: 0;
}

.yellList .yell_character_inner{
	display: table;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	width: 96%;
	margin: 0 auto 0 auto;
	padding: 0;
}

.yellList .yell_character .ic_ranking{
	display: table-cell;
	width: 20%;
	margin: 0;
	padding: 5px;
	vertical-align: middle;
}

.yellList .yell_character .rightBox{
	display: table-cell;
	width: 80%;
	margin: 0;
	padding: 5px 0 5px 0;
	vertical-align: middle;
}

.yellList .rightBox .character_thumnail{
	float: left;
	width: 30%;
	margin: 0;
	padding: 0;
}

.yellList .rightBox .rightBox_inner{
	float: right;
	box-sizing: border-box;
	width: 70%;
	margin: 0;
	padding: 0 7px 0 5px;
}

.yellList .rightBox_inner .nameplate{
	clear: both;
	position: relative;
	margin: 0 0 5px 0;	
	padding: 0;

}

.yellList .rightBox_inner .nameplate .character_name{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 1.0rem;
	font-weight: 700;
	text-align: center;
}

.yellList .chara_1{ color: #6f0507;}
.yellList .chara_2{ color: #3b694f;}
.yellList .chara_3{ color: #2b4a66;}
.yellList .chara_4{ color: #b25416;}
.yellList .chara_5{ color: #724c9f;}
.yellList .chara_6{ color: #8b8b8b;}
.yellList .chara_7{ color: #000;}


.yellList .point_inner{
	display:table;
	clear: both;
	margin: 0;
	padding: 0;
}


.yellList .point_inner .point_count{
	display: table-cell;
	position: relative;
	width: 80%;
	margin: 0;	
	padding: 0 5px 0 0;
}


.yellList .point_count .point_count_number{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
}


.yellList .point_count .point_count_number .number{
	width: 10%;
	margin: 0;
	padding: 0;
}

.yellList .btn_yell{
	display: table-cell;
	width: 30px;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}

.yellList .event_banner{
	list-style: none;
	width: 96%;
	margin: 0 auto 0 auto;	
	padding: 0;
}


.yellList .event_banner li{
	margin: 0 0 5px 0;	
	padding: 0;
}



/**エール詳細***/


.yellDetail{
	overflow: hidden;
	height: 100%;
}

.yellDetail #wrap{
	overflow: hidden;
	width: 680px;
	height: 100%;
	margin: 0 auto 0 auto;
	padding: 0;
}

.yellDetail .sec_yellDetail_wra{
	position: relative;
	height: 100vh;
	margin: 0;
	padding: 0;
}

.yellDetail .headline{
	width: 90%;
	margin: 15px auto 0 auto;
	padding: 0;
}

.yellDetail .yellMeter{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	width: 40%;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}

/*.yellDetail .yellMeter_inner{
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	background: url(../img/www/web/yell/yell_detail_meter_mask_6_1@2x.png) no-repeat;
	background-size: cover;
}*/

.yellDetail .yellMeter_inner .mask{
	position: fixed;
	bottom: 0;
	width: 100%;
	margin: 0;
	padding: 0;
}


.yellDetail .sideLeft{
	position: absolute;
	top: 10%;
	left: 10px;
	margin: 0;
	padding: 0;
}

.yellDetail .sideLeft .btn_ranking{
	width: 70px;
	margin: 0 0 100px 0;
	padding: 0;
}

.yellDetail .sideLeft .ranking_up{
	position: relative;
	width: 70px;
	margin: 0 0 30px 0;
	padding: 0;
}

.yellDetail .sideLeft .ranking_down{
	position: relative;
	width: 70px;
	margin: 0 0 30px 0;
	padding: 0;
}

.yellDetail .sideLeft .ranking_up dl,
.yellDetail .sideLeft .ranking_down dl{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	width: 100%;
	margin: 0;
	padding: 0;
}

.yellDetail .sideLeft .ranking_up dt,
.yellDetail .sideLeft .ranking_down dt{
	margin: 0;
	padding: 0;
	font-size: 0.5rem;
	font-weight: 700;
	text-align: center;
}

.yellDetail .sideLeft .ranking_up dd,
.yellDetail .sideLeft .ranking_down dd{
	margin: 0;
	padding: 0;
	font-size: 0.5rem;
	font-weight: 700;
	text-align: center;
}


.btn_ranking{
	width: 70px;
	margin: 0;
	padding: 0;
}

.yellDetail .sideLeft .ranking_log{
	width: 300px;
	margin: 0 0 0 5px;
	padding: 0;
}

.yellDetail .sideLeft .ranking_log ul{

	list-style: none;
	margin: 0;
	padding: 0;
}

.yellDetail .sideLeft .ranking_log ul li{
	margin: 0 0 15px 0;
	padding: 0;
	font-size: 15px;
	text-align: left;
	color: #fff;
}

.yellDetail .sideLeft .ranking_log ul .light{
	opacity: 0.6;
}



.yellDetail .sideRight{
	position: absolute;
	top: 10%;
	right: 10px;
	z-index: 999;
	margin: 0;
	padding: 0;
}

.yellDetail .sideRight ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.yellDetail .sideRight ul li{
	width: 75px;
	margin: 0 0 15px 0;
	padding: 0;
}

.yellDetail .sideRight .btn_help{
	width: 30px;
	margin: 0 auto 0 auto;
	padding: 0;
}

.yellDetail .btn_return{
	position: absolute;
	bottom: 35px;
	width: 680px;
	margin: 0 auto 0 auto;
	padding: 0;
}

.yellDetail .btn_return img{
	width: 100px;
}


.yellDetail .yellSend{
	width: 680px;
	margin: 0;
	padding: 0;
}

.yellSend .yell_character{
	position: absolute;
	right: 15px;
	bottom: 70px;
	width: 30%;
	margin: 0;
	padding: 0;
	text-align: center;
}



.yellSend .yell_send{
	position: absolute;
	right: 15px;
	bottom: 35px;
	width: 30%;
}


.yellSend table{
	position: absolute;
	top: 25%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	box-sizing: border-box;
	width: 60%;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0 auto 30px auto; 
	padding: 0;
}

.yellSend table tr{ border: none;}

.yellSend table td{ 
	box-sizing: border-box;
	margin: 0;
	padding: 0;
 	border: none;
	vertical-align: middle;
}

.yellSend table .td01,
.yellSend table .td03{
	width: 30px;
	height: 30px;
	text-align: center;
}

.yellSend table .number{
	width: 96%;
	margin: 0 2% 0 2%;
	padding: 5px 0 5px 0;
	border: 1px solid #ddd;
	border-radius: 5px;		/* CSS3草案 */
	-webkit-border-radius: 5px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 5px;	/* Firefox用 */
	font-size: 1.0rem;
	text-align: center;
}

.yellSend table .subtraction,
.yellSend table .addition{
	width: 30px;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
}

.yellSend .btn_send{
	position: absolute;
	top: 55%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	margin: 0;
	padding: 0;
	text-align: center;
}


/***利用規約******************************************/

.page_wra{
	margin: 20px 0 20px 0;
	padding: 30px 60px 30px 60px;
	border: 3px solid #8a6634;
	border-radius: 30px;		/* CSS3草案 */
	-webkit-border-radius: 30px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 30px;	/* Firefox用 */
	background: #f3e6c3;
}

.page_wra h1{
	margin: 0 0 10px 0;
	padding: 0;
	font-size: 20px;
	line-height: 150% !important;
	text-align: center;
}

.page_inner{
	margin: 0;
	padding: 15px;
	background: #fff;
}


.page_inner h2{
	margin: 0 0 5px 0;
	padding: 0;
	font-size: 18px;
	line-height: 120% !important;
}


.page_article{
	margin: 0 0 15px 0;
	padding: 0;
}


.page_article ul{

	margin: 0;
	padding: 0 3% 0 3%;

}


.page_article ul li{

	margin: 0 0 5px 0;
	padding: 0;
	font-size: 14px;

}

.page_article p{
	margin: 0 0 5px 0;
	padding: 0;
	font-size: 14px;
	line-height: 100% !important;
}



.page .btn_close{
	width: 200px;
	margin: 20px auto 0 auto;
	padding: 0;

}


/***引継ぎ設定******************************************/

.sec_setting_wra{
	margin: 0;
	padding: 0;
}

.setting_entry_wra{
	margin: 5% auto 5% auto;
	padding: 30px;
	border: 3px solid #8a6632;
	border-radius: 30px;		/* CSS3草案 */
	-webkit-border-radius: 30px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 30px;	/* Firefox用 */
	background: #f3e6c3;
}


.users .headline{
	width: 320px;
	margin: 0 auto 30px auto;
	padding: 0;

}

.users p{
	margin: 0 0 30px 0;
	padding: 0;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	color: #653f00
}


.users dl{
	clear:both;
	margin: 0 0 30px 0;
	padding: 0;

}


.users dt{
	margin: 0 0 5px 0;
	padding: 0;
	text-align: left;
	font-size: 18px;
	font-weight: 700;
	color: #653f01;
}


.users dd{
	margin: 0;
	padding: 0 0 0 0;
}


.users .waku{
	width: 100%;
	height: 30px;
	margin: 0 auto 0 auto;
	padding: 0;
	font-size: 18px;
	text-align: center;


}

.btn_wra{
	overflow: hidden;
	width: 420px;
	margin: 20px auto 0 auto;
	padding: 0;
	text-align: center;
}


.btn_cancel{
	display: block;
	float: left;
	width: 200px;
	margin: 0 20px 0 0;
	padding: 0;
	text-align: center;
}



.btn_setting{
	/* カンプから変更 ボタン1個にしてセンタリングさせたのでコメントアウト
	display: block;
	float: left;
	*/
	display: block;
	float: left;
	width: 200px;
	margin: 0;
	padding: 0;
	text-align: center;
}


.btn_close{
	display: block;
	width: 200px;
	margin: 0 auto 0 auto;
	padding: 0;
	text-align: center;

}

/***プレゼント******************************************/

.presentBox .btn_all{
	margin: 0;
	padding: 10px;
	text-align: right;
}

.sec_present_wra{
	overflow: hidden;
	margin: 0 0 10px 0;
	padding: 0;
	background: url(../img/www/web/informations/news_bg.png) no-repeat;
	background-size: cover;
}

.present{
	box-sizing: border-box;
	margin: 0 0 10px 0;
	padding: 0;
}


.presentList{
	margin: 0;
	padding: 10px;
}

.presentPost{
	overflow: hidden;
	position: relative;
	width: 90%;
	margin: 0 auto 10px auto;
	padding: 0;
}


.presentPost_bg{
	margin: 0;
	padding: 0;
}

.presentPost_bg img{
	display: block;

}

.presentPost_inner{
	display: table;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 20px 15px 15px 15px;
}

.box_l{
	display: table-cell;
	width: 68%;
	margin: 0 0 0 0;
	padding: 0;
	text-align: center;
}

.finished{
	position: relative;
	width: 270px;
	margin: 0 0 5px 0;
	padding: 0;
}


.finished_text{
	position: absolute;
	top: 50%;
	left: 50%;
  	transform: translateY(-50%) translateX(-50%);
  	-webkit-transform: translateY(-50%) translateX(-50%);
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 0.8rem;
	text-align: center;
	color: #fff;
}

.box_l .comment{
    	overflow: hidden;
	display: -webkit-box;
  	-webkit-box-orient: vertical;
  	-webkit-line-clamp: 2;
 	max-width:400px;
	margin: 0;
	padding: 0;
	font-size: 1.0rem;
	font-weight: 700;
	text-align: left;
	line-height: 1.2;
	color: #614725;
	text-overflow: ellipsis;
	/*white-space: nowrap;*/
}	

	

.box_r{
	display: table-cell;
	width: 20%;
	margin: 0;
	padding: 20px 0 0 0;
	text-align: center;
	vertical-align:middle;
}


/****マイページ******************************************************/

.mypage{
	overflow: hidden !important;
}

.mypage #wrap{
	overflow: hidden !important;
}


.mypage .container{
	position: relative;
	width: 680px;
	margin: 0 auto 0 auto;
	padding: 0;
} 


.mypage .favorite_bg{
	position: absolute;
	top: 70%;
	left: 50%;
  	transform: translateY(-50%) translateX(-50%);
  	-webkit-transform: translateY(-50%) translateX(-50%);
	width: 680px;
	z-index: -999;
	margin: 0;
	padding: 0;
	text-align: center;
}

.mypage .favorite_bg img{
	width: 80%;
}

.mypage .sec_mypage_wrap{
	height: 100vh;
	margin: 0 auto 0 auto;
	padding: 0;
}


.mypage .box_top{
	display: flex;
	width: 600px;
	margin: 0 auto 0 auto;
	padding: 0;
}

.mypage .box_top_left{
	box-sizing: border-box;
	width: 50%;
	margin: 0;
	padding: 5px;
}

.mypage .box_top_right{
	box-sizing: border-box;
	width: 50%;
	margin: 0;
	padding: 5px 5px 0 0;
}

.mypage .box_top_right .loveCoin{
	position: relative;
	margin: 0;
	padding: 0;
}

.mypage .box_top_right .loveCoin_inner{
	display: table;
	position: absolute;
	top: 8px;
	right: 15px;
	width: 40%;
	margin: 0;
	padding: 0;
}


.mypage .box_top_right .loveCoin_inner .number{
	display: table-cell;
	width: 75%;
	margin: 0;
	padding: 0 5px 0 0;
	font-weight: 700;
	text-align: right;
	color: #fff;
	vertical-align: middle;
}

.mypage .box_top_right .loveCoin_inner .btn_add{
	display: table-cell;
	width: 25%;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}


.mypage .box_top_right ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.mypage .box_top_right ul li{
	position: relative;
	width: 49%;
	margin: 0;
	padding: 0;
}

.mypage .box_top_right ul .left{
	float: left;
}

.mypage .box_top_right ul .right{
	float: right;
}

.mypage .box_top_right ul .left dl,
.mypage .box_top_right ul .right dl{
	display: table;
	position: absolute;
	top: 49%;
	left: 50%;
  	transform: translateY(-50%) translateX(-50%);
  	-webkit-transform: translateY(-50%) translateX(-50%);
	width: 70%;
	margin: 0 0 0 10px;
	padding: 0;
}

.mypage .box_top_right ul .left dt,
.mypage .box_top_right ul .right dt{
	display: table-cell;
	width: 40%;
	margin: 0;
	padding: 0;
	font-size: 0.5rem;
	text-align: left;
	vertical-align: middle;
	color: #fff;
}

.mypage .box_top_right ul .left dd,
.mypage .box_top_right ul .right dd{
	display: table-cell;
	width: 60%;
	margin: 0;
	padding: 0 5px 0 0;
	font-size: 0.6rem;
	text-align: right;
	vertical-align: middle;
	color: #fff;
}

.mypage .sideRight{
	position: absolute;
	top: 130px;
	right: 50px;
	width: 50px;
	margin: 0;
	padding: 0;
}

.mypage .sideRight .btn_sideRight{
	clear: both;
	position: relative;
	margin: 0 0 5px 0;
	padding: 0;
}

.mypage .sideRight .btn_news::after,
.mypage .sideRight .btn_present::after,
.mypage .sideRight .btn_twitter::after{
	position: absolute;
	top: 0;
	right: 0;
	width: 15px;
	height: 15px;
	margin: 0;
	padding: 0;
	border-radius: 50%;		/* CSS3草案 */
	-webkit-border-radius: 50%;	/* Safari,Google Chrome用 */
	-moz-border-radius: 50%;	/* Firefox用 */
	font-size: 0.4rem;
	text-align: center;
	color: #fff;
	background: #ff0000;
}




.mypage .box_bottom{
	position: absolute;
	bottom: 170px;
	left: 0;
	display: flex;
	width: 600px;
	margin: 0 auto 0 auto;
	padding: 0;
}

.mypage .box_bottom_left{
	box-sizing: border-box;
	width: 35%;
	margin: 0;
	padding: 5px;
}

.mypage .box_bottom_right{
	box-sizing: border-box;
	width: 65%;
	margin: 0;
	padding: 5px 5px 0 0;
}


.mypage .box_bottom_right .btn_profile{
	position: relative;
	margin: 0 0 5px 0;
	padding: 0;

}

.mypage .box_bottom_right .btn_profile{
	position: relative;
	margin: 0 0 3px 0;
	padding: 0;

}

.mypage .box_bottom_right .btn_profile .profile_data{
	position: absolute;
	top: 50%;
	left: 50%;
  	transform: translateY(-50%) translateX(-50%);
  	-webkit-transform: translateY(-50%) translateX(-50%);
	width: 100%;
	margin: 0;
	padding: 0;
}

.mypage .box_bottom_right .btn_profile .profile_data dl{
	margin: 0;
	padding: 0;
}

.mypage .box_bottom_right .btn_profile .profile_data dl dt{
	margin: 0 0 3px 0;
	padding: 0;
	font-size: 1.2rem;
	font-weight: 700;
	text-align: center;
	color: #6a4a27;
}

.mypage .box_bottom_right .btn_profile .profile_data dl dd{
	margin: 0;
	padding: 0;
	font-size: 0.6rem;
	font-weight: 700;
	text-align: center;
	color: #6a4a27;
}


.mypage .box_bottom_right ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.mypage .box_bottom_right ul li{
	position: relative;
	width: 49%;
	margin: 0;
	padding: 0;
}

.mypage .box_bottom_right ul .btn_Inventory{
	float: left;
}

.mypage .box_bottom_right ul .btn_collection{
	float: right;
}


/****所持品******************************************************/

.inventory #wrap{
	margin: 0;
	padding: 0;
	/*background: url(../img/www/bg2.png) no-repeat;
	background-position: center center;
	background-attachment: fixed;
	background-size: cover;*/
}

.inventory .sec_inventory_wrap{
	margin: 0;
	padding: 0 0 150px 0;
}

.inventory .box_top{
	overflow: hidden;
	width: 70%;
	margin: 15px auto 15px auto;
	padding: 0;
}

.inventory .box_top .loveCoin{
	position: relative;
	margin: 0;
	padding: 0;
}

.inventory .box_top .loveCoin_inner{
	display: table;
	position: absolute;
	top: 50%;
	right: 15px;
  	transform: translateY(-50%);
  	-webkit-transform: translateY(-50%);
	width: 40%;
	margin: 0;
	padding: 0;
}


.inventory .box_top .loveCoin_inner .number{
	display: table-cell;
	width: 75%;
	margin: 0;
	padding: 0 15px 0 0;
	font-size: 20px;
	font-weight: 700;
	text-align: right;
	color: #fff;
	vertical-align: middle;
}

.inventory .box_top .loveCoin_inner .btn_add{
	display: table-cell;
	width: 25%;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}


.inventory .box_top ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.inventory .box_top ul li{
	position: relative;
	width: 49%;
	margin: 0;
	padding: 0;
}

.inventory .box_top ul .left{
	float: left;
}

.inventory .box_top ul .right{
	float: right;
}

.inventory .box_top ul .left dl,
.inventory .box_top ul .right dl{
	display: table;
	position: absolute;
	top: 50%;
	left: 50%;
  	transform: translateY(-50%) translateX(-50%);
  	-webkit-transform: translateY(-50%) translateX(-50%);
	width: 75%;
	margin: 0 0 0 15px;
	padding: 0;
}

.inventory .box_top ul .left dt,
.inventory .box_top ul .right dt{
	display: table-cell;
	width: 40%;
	margin: 0;
	padding: 0;
	font-size: 15px;
	font-weight: 700;
	text-align: left;
	vertical-align: middle;
	color: #fff;
}

.inventory .box_top ul .left dd,
.inventory .box_top ul .right dd{
	display: table-cell;
	width: 60%;
	margin: 0;
	padding: 0 5px 0 0;
	font-size: 15px;
	font-weight: 700;
	text-align: right;
	vertical-align: middle;
	color: #fff;
}

.inventory .headline{
	width: 70%;
	margin: 0 auto 10px auto;
	padding: 0;
}

.inventory .item_list_inner{
	display: flex;
	flex-wrap: wrap; 
  	-webkit-flex-wrap: wrap;          	
	-ms-flex-wrap    : wrap; 
	overflow: hidden;
	width: 90%;
	margin: 0 auto 0 auto;
	padding: 0 0 0 1%;
}


.inventory .item_list_inner .item_list_item{
	box-sizing: border-box;
	position: relative;
	width: 33%;
	margin: 0;
	padding: 0 1% 1% 1%;
}

.inventory .item_list_item .item{
	position: absolute;
	top: 7%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	width: 50%;
	margin: 0;
	padding: 0;
}

.inventory .item_list_item .item_data{
	position: absolute;
	top: 65%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	width: 90%;
	margin: 0;
	padding: 0;
}

.inventory .item_data .item_name{
 	overflow: hidden; 
	width: 95%;
	margin: 0 auto 0 auto;
	padding: 0;
	font-size: 15px;
	text-align: center;
    	text-overflow: ellipsis;
    	white-space: nowrap; 
}

.inventory .item_data .item_number{
 	overflow: hidden; 
	width: 95%;
	margin: 0 auto 0 auto;
	padding: 0;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
    	color: #4d2d04;
    	text-overflow: ellipsis;
    	white-space: nowrap; 
}


/****コレクション******************************************************/


.collection .sec_collection_wrap{
	margin: 0;
	padding: 0 0 150px 0;
}


.collection .box_top{
	overflow: hidden;
	width: 95%;
	margin: 0 auto 0 auto;
	padding: 0;
}

.collection .tab{
	list-style: none;
	display: table;
	overflow-x: scroll;
	width: 100%;
	margin: 5px auto 0 auto;
	padding: 0;
}

.collection .tab::-webkit-scrollbar{
  display: none;
}

.collection .tab li{
	display: table-cell;
	box-sizing: border-box;
	margin: 0;
	padding: 2px;
	cursor: pointer;
}

.collection .tab li:hover{
	color: #fff;
}

.collection .tab .active{
	margin: 0;
	padding: 2px;
}


.collection .tabContent{
	display: none;
	clear: both;
	overflow: hidden;
	margin: 0;
    	padding: 5px 0 0 0;
}

.collection .active {
	display: block;
}

.collection .tabContent .headline{
	width: 70%;
	margin: 0 auto 0 auto;
	padding: 0;
}

.collection .collection_list{
	display: flex;
	flex-wrap: wrap; 
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap    : wrap; 
	align-items: flex-start;
	-webkit-box-align: start;
	-ms-flex-align: start;
	width: 95%;
	margin: 0 auto 30px auto;
	padding: 0;
}

.collection .collection_still,
.collection .collection_story{
	box-sizing: border-box;
	position: relative;
	width: 19%;
	margin: 0 1% 1% 0;
	padding: 3px;
	border: 1px solid #725c28;
	background: linear-gradient(0deg, rgba(201,180,102,1) 0%, rgba(137,90,16,1) 20%, rgba(226,203,118,1) 35%, rgba(170,148,56,1) 50%, rgba(226,203,118,1) 65%, rgba(137,90,16,1) 80%, rgba(200,180,102,1) 100%);
}

.collection .collection_voice{
	box-sizing: border-box;
	width: 19%;
	margin: 0 1% 1% 0;
	padding: 0;
}


.collection .collection_sitll .thum_still,
.collection .collection_voice .thum_voice,
.collection .collection_story .thum_story{
	display: block;
	margin: 0;
	padding: 0;
	background: #fff;
}


/****お気に入り******************************************************/

.favorite #wrap{
	margin: 0;
	padding: 0;
	/*background: url(../img/www/web/bg2.png) no-repeat;
	background-position: center center;
	background-attachment: fixed;
	background-size: cover;*/
}

.favorite .sec_favorite_wrap{
	margin: 0;
	padding: 0 0 150px 0;
}

.favorite .box_top{
	overflow: hidden;
	box-sizing: border-box;
	width: 95%;
	margin: 5px auto 5px auto;
	padding: 2px;
	border: 1px solid #8a6633;
	border-radius: 10px;/* CSS3草案 */
	-webkit-border-radius: 10px;/* Safari,Google Chrome用 */
	-moz-border-radius:10px;/* Firefox用 */
	background: linear-gradient(90deg, rgba(227,206,134,1) 20%, rgba(255,249,200,1) 50%, rgba(227,206,134,1) 80%);
}

.favorite .box_top_inner{
	display: table;
	box-sizing: border-box;
	margin: 0;
	padding: 5px;
	border: 1px solid #8a6633;
	border-radius: 8px;/* CSS3草案 */
	-webkit-border-radius: 8px;	/* Safari,Google Chrome用 */
	-moz-border-radius:8px;	/* Firefox用 */
	background: #fff;
}

.favorite .bot_top_left{
	display: table-cell;
	width: 18%;
	margin: 0;
	padding: 0;
}


.favorite .bot_top_right{
	display: table-cell;
	width: 80%;
	margin: 0;
	padding: 0 0 0 2%;
	font-size: 0.8rem;
	font-weight: 700;
	text-align: left;
	vertical-align: middle;
	color: #4d2d04;;
}


.favorite .favorite_inner{
	display: flex;
	flex-wrap: wrap; 
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap    : wrap;
	align-items: flex-start;
	-webkit-box-align: start;
	-ms-flex-align: start;
	overflow: hidden;
	width: 95%;
	margin: 0 auto 0 auto;
	padding: 0 0 0 1%;
}

.favorite .favorite_item_on,
.favorite .favorite_item_off{
	box-sizing: border-box;
	position: relative;
	width: 24%;
	margin: 0 1% 1% 0;
	padding: 3px;
}

.favorite .favorite_item_on{
	border: 1px solid #725c28;
	background: linear-gradient(0deg, rgba(201,180,102,1) 0%, rgba(137,90,16,1) 20%, rgba(226,203,118,1) 35%, rgba(170,148,56,1) 50%, rgba(226,203,118,1) 65%, rgba(137,90,16,1) 80%, rgba(200,180,102,1) 100%);
}

.favorite .favorite_item_off{
	border: 1px solid #575757;
	background: linear-gradient(0deg, rgba(193,193,193,1) 0%, rgba(78,78,78,1) 20%, rgba(231,231,231,1) 35%, rgba(193,193,193,1) 50%, rgba(231,231,231,1) 65%, rgba(78,78,78,1) 80%, rgba(193,193,193,1) 100%);
}


.favorite .favorite_item_inner{
	width: 100%;
	margin: 0;
	padding: 0;
}

.favorite .favorite_item_inner .thum_still{
	display: block;
	margin: 0;
	padding: 0;
	background: #fff;
}

.favorite .thum_on::before{
	position: absolute;
	top: -3px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	width: 40%;
	height: 5px;
	margin: 0;
	padding: 0;
	border: 1px solid #fff;
	border-radius: 30px;		/* CSS3草案 */
	-webkit-border-radius: 30px;	/* Safari,Google Chrome用 */
	-moz-border-radius:30px;	/* Firefox用 */
	background: linear-gradient(0deg, rgba(201,13,0,1) 28%, rgba(255,101,101,1) 68%, rgba(250,26,26,1) 87%);
	content:'';
}


}/*end*/


@media screen and (max-height: 760px) {

.mypage .container,
.inventory .container,
.collection .container,
.favorite .container{
	max-width: 540px; 
	margin: 0 auto 0 auto;
	padding: 0;
}

.mypage #main,
.inventory #main,
.collection #main,
.favorite .container{
	max-width: 540px; 

}

/****マイページ******************************************************/

.mypage .favorite_bg{
	position: absolute;
	top: 55%;
	left: 50%;
  	transform: translateY(-50%) translateX(-50%);
  	-webkit-transform: translateY(-50%) translateX(-50%);
	width: 680px;
	z-index: -999;
	margin: 0;
	padding: 0;
	text-align: center;
}

.mypage .favorite_bg img{
	width: 60%;
}

.mypage .box_top{
	position: absolute;
	left: 50%;
  	transform: translateX(-50%);
	width: 400px;
	margin: 0 auto 0 auto;
	padding: 0;

}



.mypage .box_bottom{
	display: flex;
	position: absolute;
	bottom: 170px;
	left: 50%;
  	transform: translateX(-50%);
	width: 400px;
	margin: 0 auto 0 auto;
	padding: 0;
}


}/*end*/