@charset "utf-8";

/*------------------------------------------------------------------*/
/*--スマホ用CSS----------------------------------------------------------------*/
/*------------------------------------------------------------------*/

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

@media screen and (max-width: 680px) {


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


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

.hero{
	width: 60%;
	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: 49%;
	margin: 20px auto 0 auto;
	padding: 0;
	text-align: center;
}

.logins .ft_navi{

	display: none;
}

.logins p{

	margin: 0 0 20px 0;
	padding: 0;
	font-size: 3vw;
	text-align: center;
}

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


.logins .copy{
	padding: 2% 0 0 0 !important;
}

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

/* 選択画面 */

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

.chara_select_wra .thumbnail{
	margin: 0 auto 0 auto;
	padding: 0;


}

.chara_select_wra .thumbnail .slick-slide{

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

}

.slider {
      width :  50%;
      margin :  100px auto;
}
 
.slick-slide {
    margin :  0px 20px;
    height : auto;
}
 
.slick-slide img {
    width :  100%;
}
 
.slick-prev::before,
.slick-next::before {
    color :  black;
  }


.slick-slide {
    transition :  all ease-in-out .3s;
    opacity :  .2;
  }
 
.slick-active {
    opacity :  .5;
}
 
.slick-current {
    opacity :  1;
}

.slick-prev{
	width: 30px !important;
	height: 35px !important;
	margin: 0 0 0 40px;
	z-index: 3333;
}


.slick-next {
	width: 30px !important;
	height: 35px !important;
	margin: 0 40px 0 0;
	z-index: 3333;

}


.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{
	margin: 0 auto 0 auto;
	padding: 0;

}

.chara_voice{
	position: absolute;
	top: 12%;
   	left: 8%;
	width: 200px;
	margin: 0;
	padding: 0;

}

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

}

.btn_start{
	width: 200px;
	margin: -50px auto 0 auto;
	padding: 0;
}


/* ストーリー選択 */

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

}

.character_wra{
	display: none;
}


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

.character_wra_sp img{margin: 0; padding: 0;}



.story_list_wra ul{

	list-style: none;
	position: relative;
	width: 80%;
	margin: 0 auto 0 auto;
	padding: 30% 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;
	height: 100%;
}

.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(10%);
   	 -webkit-transform: translateY(10%);
    	-ms-transform: translateY(10%);
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 0;	

}

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

}


.storyScene .story_character_face_2{
	position: absolute;
	top: 0;
    	transform: translateY(10%);
   	 -webkit-transform: translateY(10%);
    	-ms-transform: translateY(10%);
	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: 360px;
	height: 130px;
	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 0 15px;
	font-family:'TBcinema';
	font-size: 13px;

}

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



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

.sec_chara_wra{
	min-height: 100vh;
	margin: 5px 0 20px 0;
	padding: 0;
}

.special_talk{
	display: table;
	position:relative;
	box-sizing: border-box;
	margin: 0 0 1% 0;
	padding: 3%;
}

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

.special_talk .spe_tal_thum{
	display: table-cell; 
	width: 25%;
	margin: 0 8% 0 0;
	padding: 0;
}

.special_talk .spe_tal_center{
	display: table-cell; 
	box-sizing: border-box;
	/* カンプから変更 要素が真ん中によってデザイン崩れる為 width: 30%;*/
	margin: 0;
	padding: 0 0 0 8%; 
	vertical-align: top;
}


.special_talk .spe_tal_right{
	display: table-cell;
	width: 25%;
	margin: 0 0 0 0;
	padding: 0;
	text-align: center;
	vertical-align: middle;
}

.special_talk .chara_name{
	margin: 0 0 5px 0;
	padding: 10px 0 0 0;
	font-size: 5vw;
	font-weight: 700;
	text-align: center;
	color: #4d2c03;
}


.special_talk .encounter{
	margin: 0 0 2px 0;
	padding: 0;
	font-size: 3vw;
	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: 3vw;
	text-align: left;
	font-weight: 700;
	color: #928244;
}


.special_talk .btn_talk{
	display: inline-block;
	width: 80%;
	margin: 0 auto 0 auto;
	padding: 0;
	vertical-align: middle;
}



.chara_list{
	position:relative;
	box-sizing: border-box;
	margin: 0 0 1% 0;
	padding: 3%;
}

.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;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	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: 25%;
	margin: 0 8% 0 0;
	padding: 0;
}

.chara_list .cha_li_center{
	float: left; 
	width: 40%;
	margin: 0;
	padding: 0;
}


.chara_list .cha_li_right{
	float: right; 
	width: 20%;
	margin: 0 0 0 0;
	padding: 0 10px 0 0;
}

.chara_list .chara_name{
	margin: 0 0 5px 0;
	padding: 10px 0 0 0;
	font-size: 5vw;
	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 2px 0;
	padding: 0;
	font-size: 3vw;
	font-weight: 700;
	text-align: left;
	color: #4d2c03;
}

.chara_list .talk{
 	 white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;
	margin: 0;
	padding: 0;
	font-size: 3vw;
	text-align: left;
	font-weight: 700;
	color: #928244;
	word-break: break-all;/* カンプから変更 */
}


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

.chara_list .fs_percent{
	margin: 0 0 8px 0;
	padding: 0;
	font-size: 6vw;
	font-weight: 700;
	text-align: center;
	color: #ba0202;
}

.chara_list .btn_talk{
	width: 80%;
	margin: 0 auto 0 auto;
	padding: 0;
}

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

.messages{
	height: 100%;
}

.messages #wrap{
	overflow: hidden;
	height: 100%;
}

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

.message_character{
	position: absolute;
	top: 0;
	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: 50px;
	margin: 0 10px 0 0 ;
	padding: 0;

}

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

}

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

}

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

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

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


.messages .countBox{
	position: relative;
	top: 20px;
	width: 70px;
	height: 80px;
	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: 40%;
	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: 14px;
	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: 14px;
	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: 12px;
	margin: 0;
	padding: 0;
}


.messages .btn_push {
    position: relative;
    z-index: 999;
    width: 50%;
    margin: 0;
    padding: 0 0 0 50%;
}

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

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

.lovemeterFlame{
	position:relative;
	width: 15px;
	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: 13px;
	height: 106px; 
	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: 999;
    margin: 215px 0 0 0;
    padding: 0;
}

.messages .btn_lover_off{
	display: none;
}

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

.message_wra {
    position: fixed;
    z-index: 1000;
    bottom: 0;
    width: 100%;
}

.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;
	word-break: break-all;/* カンプから変更 */
}

.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: 40%;
	margin: 0;
	padding: 0;
}



.message_form{
	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;
}

.messageForm_inner .left{
	width: 15%;
	vertical-align: middle;
}


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

.messageForm_inner .center{
	width: 67%;
}

.messageForm_inner .right{
	width: 20%;
	vertical-align: middle;
}


.message_form .waku{
  	resize: none;
	width: 90%;
	height: 30px;
	margin: 0 auto 3px auto;
	padding: 10px 0 0 0;
	font-size: 0.8rem;
}

.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;
	height: 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: 3vw;
	text-align: center;
	vertical-align:middle;
	color: #fff;
	background: #ff0000;
	content:"99"
}

.informations .btn_all{
	float: right;
	margin: 0;
	padding: 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;
	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 0 10px 0;
	font-size: 3vw;
	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;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	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;
}


.newspost{
	overflow: hidden;
	position: relative;
	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: 8% 15px 8% 15px;
}

.post_l{
	float: left;
	width: 20%;
	margin: 0 3% 0 0;
	padding: 0;
	font-size: 2vw;
	text-align: center;
}


.post_l img{
	width: 100%;
}


.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: 0;
}

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

.contents{
	margin: 20px 2% 20px 2%;
	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{
	min-height: 100vh;
	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: 200px;
	margin: 20px auto 15px auto;
	padding: 0;
}

.items .lovecoin_wra .lovecoin{
	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;
	text-shadow: 1px 1px 0 #000, -1px -1px 0 #000,-1px 1px 0 #000, 1px -1px 0 #000,0px 1px 0 #000,  0-1px 0 #000,-1px 0 0 #000, 1px 0 0 #000;
	color: #FFF;
}

.items .lovecoin_wra .paid{
	float: left;
	clear: both;
	box-sizing: border-box;
	width: 100px;
	height: 22px;
	margin: 0 0 0 0;
	padding: 3px 0 0 25px;
	font-size: 3vw;
	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: 100px;
	height: 22px;
	margin: 0 0 0 0;
	padding: 3px 0 0 25px;
	font-size: 3vw;
	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 25px;
	text-align: right;
	color: #fff;
}

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

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

}

.item_banner{
	float: left;
	box-sizing: border-box;
	width: 33%;
	margin: 0 0.3% 0 0;
	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;
	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: 0;
	padding: 0;
	font-size: 15%;
	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: 0;
	font-size: 0.6rem;
	color: #fff;
}

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


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

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

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

.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: 96%;
	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(10%);
   	 -webkit-transform: translateY(10%);
    	-ms-transform: translateY(10%);
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 0;	
}


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


.kokuhaku .story_character_face_2{
	position: absolute;
	top: 0;
    	transform: translateY(10%);
   	 -webkit-transform: translateY(10%);
    	-ms-transform: translateY(10%);
	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: 360px;
	height: 130px;
	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: 15px;
   	right: 15px;
	width: 30px;
	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 50px 0 15px;
	font-family:'TBcinema';
	font-size: 13px;
	color: #000;
}

.kokuhaku .lines_box .next{
	position: absolute;
	bottom: 5px;
   	right: 15px;
	z-index: 555;
	width: 20px;
	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: 100%;
	margin: 0;
	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;
	height: 100%;
}

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

.yellDetail .headline{
	margin: 15px 2% 0 2%;
	padding: 0;
}

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

/*.yellDetail .yellMeter_inner{
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	background: url(../img/www/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: 5px;
	margin: 0;
	padding: 0;
}

.yellDetail .sideLeft .btn_ranking{
	width: 70px;
	margin: 0 0 30px 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 50px 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: 200px;
	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;
	padding: 0;
	font-size: 0.6rem;
	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: 50px;
	margin: 0  0 10px 0;
	padding: 0;
}

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

.yellDetail .btn_return{
	position: fixed;
	bottom: 20px;
	left: 10px;
	width: 70px;
	margin: 0;
	padding: 0;
}


.yellDetail .yellSend{
	position: fixed;
	width: 50%;
	bottom: 70px;
	right: 5px;
	margin: 0;
	padding: 0;
}

.yellSend .yell_character{
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
}

.yellSend .yellSend .ic_send_bg{
	margin: 0;
	padding: 0;
}

.yellSend .yell_send{
	position: absolute;
	bottom: -50px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	width: 100%;
}


.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 2% 20px 2%;
	padding: 15px;
	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;
	color: #5b3601;
}

.page_inner{
	margin: 0;
	padding: 15px;
	border-radius: 5px;		/* CSS3草案 */
	-webkit-border-radius: 5px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 5px;	/* Firefox用 */
	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{
	
	min-height: 100vh;
	margin: 0 2% 0 2%;
	padding: 0;

}

.setting_entry_wra{
	margin: 5% 0 5% 0;
	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: 80%;
	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: 70%;
	margin: 20px auto 0 auto;
	padding: 0;
	text-align: center;
}


.btn_cancel{
	display: block;
	float: left;
	width: 49%;
	margin: 0 1% 0 0;
	padding: 0;
	text-align: center;
}



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


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

}

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

.presentBox #wrap{
	/*background: url(../img/www/web/informations/news_bg.png) no-repeat;
	background-size: cover;*/

}


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

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


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

.presentPost{
	overflow: hidden;
	position: relative;
	margin: 0 auto 5px 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;
	top: -10px;
	left: 0;
	width: 180px;
	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: -1px 0 0 0;
	padding: 0 0 0 0;
	font-size: 0.7rem;
	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: -10px 0 0 0;
	padding: 0;
	font-size: 0.8rem;
	font-weight: 700;
	text-align: left;
	color: #614725;
	text-overflow: ellipsis;
}	

.box_r{
	display: table-cell;
	width: 30%;
	margin: 0;
	padding: 0;
	vertical-align:middle;
}


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

.mypage{
	overflow: hidden !important;
}

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

.mypage .sec_mypage_wrap{
	margin: 0;
	padding: 0;
}


.mypage .favorite_bg{
	/*
	position: absolute;
	top: 70%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	width: 100%;
	z-index: -999;
	margin: 0;
	padding: 0;
	*/
	position: absolute;
	z-index: -999;
}


.mypage .box_top{
	display: flex;
	margin: 0;
	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: 5px;
	right: 10px;
	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;
	text-shadow:1px 1px 0 #000, -1px -1px 0 #000,-1px 1px 0 #000, 1px -1px 0 #000,0px 1px 0 #000,  0-1px 0 #000,-1px 0 0 #000, 1px 0 0 #000;
}

.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: 0;
	left: 0;
	width: 80%;
	margin: 0 0 0 20%;
	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: 5px;
	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: 80px;
	left: 0;
	display: flex;
	width: 100%;
	margin: 0;
	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/web/bg2.png) no-repeat;
	background-position: center center;
	background-attachment: fixed;
	background-size: cover;*/
}


.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: 8px;
	right: 15px;
	width: 40%;
	margin: 0;
	padding: 0;
}


.inventory .box_top .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;
	text-shadow: 1px 1px 0 #000, -1px -1px 0 #000,-1px 1px 0 #000, 1px -1px 0 #000,0px 1px 0 #000,  0-1px 0 #000,-1px 0 0 #000, 1px 0 0 #000;
}

.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: 0;
	left: 0;
	width: 75%;
	margin: 3px 5% 0 20%;
	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: 0.5rem;
	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: 0.6rem;
	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: 60%;
	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: 0.7rem;
	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: 0.7rem;
	font-weight: 700;
	text-align: center;
    	color: #4d2d04;
    	text-overflow: ellipsis;
    	white-space: nowrap; 
}


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

.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 5px 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 .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: 5px 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*/



/****4.7インチ******************************************************/


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


/****パートナー**************************/

.character .chara_voice{
	position: absolute;
	top: 12%;
	width:  140px;
	margin: 0;
	padding: 0;

}


.character .btn_voice{width: 50%;}


.storySelect .story_list_wra ul {
    list-style: none;
    position: relative;
    width: 90%;
    margin: 0 auto 0 auto;
    padding: 5% 0 0 0;
    text-align: center;
}


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

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


/****トーク******************************************************/


.message_form{
	margin: 0;
	padding: 2px 0 2px 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: 20px;
}

.messageForm_inner .left{
	width: 20%;
	text-align: center;
	vertical-align: middle;
}


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

.messageForm_inner .center{
	width: 60%;
	padding: 5px 0 0 0;
}

.messageForm_inner .right{
	width: 20%;
	vertical-align: middle;
}


.message_form .waku{
  	resize: none;
	width: 90%;
	height: 18px;
	margin: 0 auto 0 auto;
	padding: 2px 0 0 0;
	font-size: 0.8rem;
}

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

.message_form .textcount{
	margin: -5px 0 0 0;
	padding: 0;
	font-size: 0.5rem;
	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: 0.6rem;
	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%);

}


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

.mypage .favorite_bg{
	position: fixed;
	top: -100px;
	left: 0;
  	transform: translateY(-50%) translateX(-50%);
  	-webkit-transform: translateY(-50%) translateX(-50%);
	transform: scale(0.8);
	width: 100%;
	z-index: -999;
	margin: 0;
	padding: 0;

}

.mypage .sideRight{
	position: absolute;
	top: 90px;
	right: 5px;
	width: 40px;
	margin: 0;
	padding: 0;
}

.mypage .box_bottom{
	display: flex;
	position: absolute;
	bottom: 40px;
	left: 0;
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 0;
}


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

.inventory .item_list_item .item_data{
	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%);
	width: 90%;
	margin: 0;
	padding: 0;
}

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

.favorite .bot_top_right{

	font-size: 0.6rem;

}

}/*end*/