/***************************************************
 	Moyatter【Web版】のスタイル 
 ***************************************************/

/*clearfix*/

.clearfix:after{
	content:".";
	height:0;
	display:block;
	visibility:hidden;
	clear:both;
}

/**サイト全体のレイアウトスタイル**/

#wrapper{
	width:100%;
	min-width:980px;
	height:100%;
	position:relative;
}

#header{
	height:40px;
	width:100%;
	position:absolute;
	bottom:0;
}

/*ヘッダー周りのスタイル*/

#logo_tab{
	width:50%;
	height:100%;
	float:left;
	background-color:#9FD9F6;
}

#logo_tab img{
	height:35px;
	margin-left:40px;
}

#soudan_tab{
	width:30%;
	height:100%;
	line-height:40px;
	float:left;
	background-color:#D0E9E6;
	text-align:center;
}

#soudan_tab a{
	display:block;
	color:#9FA0A0;
	font-size:14px;
	font-weight:bold;
}

#archive_tab{
	width:20%;
	height:100%;
	line-height:40px;
	float:left;
	background-color:#6BC8F2;
	text-align:center;
}

#archive_tab a{
	display:block;
	color:#fff;
	font-size:14px;
	font-weight:bold;
}

#center_window{
	width:505px;
	height:625px;
	float:center;
	position:absolute;
	bottom:80px;
	z-index:100;
}

#center_cloud{
	background:url('../images/centercloud.png') center top no-repeat;
	padding-top:60px;
	height:565px;
	width:505px;
	position:absolute;
	bottom:0;
}

#moyako{
	background:url('../images/moyako.png') center bottom no-repeat;
	height:110px;
	width:115px;
	position:absolute;
	bottom:-80px;
	right:200px;
	z-index:1;
}

#yoriko{
	background:url('../images/yoriko.png') center bottom no-repeat;
	height:110px;
	width:115px;
	position:absolute;
	bottom:-80px;
	right:200px;
	z-index:1;	
}

#inner_window{
	margin:0 auto;
	height:380px;
	width:370px;
}

#logout{
	position:absolute;
	top:20px;
	right:50px;
}

/*TOP画面のスタイル*/

#top{
	width:100%;
	height:100%;
	min-height:700px;
	position:relative;
	background-color:#9FD9F6;
	background-image:url('../images/homeback.png');
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}

#top_info{
	position:absolute;
	top:20px;
	right:20px;
	width:400px;
	height:100px;
	z-index:1;
}

#date{
	font-weight:bold;
	text-align:right;
	padding-right:1em;
}

#user_count{
	margin-top:15px;
	font-weight:bold;
}

#user_count td{
	width:200px;
	text-align:right;
}

#user_count .w_box{
	margin-right:0px;
}

.w_box{
	color:#fff;
	font-weight:bold;
	font-size:20px;
	padding:3px 7px 3px 7px;
	margin-right:4px;
	background-color:#6BC8F2;
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	-o-border-radius:4px;
	-ms-border-radius:4px;
}

#cloud_window{
	height:100%;
	min-height:700px;
	position:relative;
	overflow:hidden;
}

/*雲のスタイル*/

.moya_cloud{
	background:url('../images/m_B_bigkumo.png') center center no-repeat;
	text-align:center;
	height:100px;
	width:220px;
	float:left;
}

.cloud_text{
	margin:50px 20px 0px 20px;
	overflow:hidden;
	font-weight:bold;
}

#left_container{
	position:absolute;
	left:0;
	height:700px;
}

#right_container{
	position:absolute;
	height:700px;
}

.cloud_column{
	width:500px;
	position:absolute;
	top:0;
}

.c_1{
	margin:90px 0px 50px 200px;
}

.c_2{
	margin:50px 100px 0px 40px;
}

.c_0{
	margin:150px 20px 0px 140px;
}

/*TOPでのモヤッターの説明コンテンツのスタイル*/

#about_moya{
	width:290px;
	margin:0 auto;
	margin-top:130px;
}

#about_moya p{
	font-weight:bold;
	font-size:14px;
	line-height:2.2;
	letter-spacing:0.3em;
}

#about_moya img{
	width:100%;
	margin-top:20px;
}

#login_box {
	text-align:center;
	margin-top:25px;
}

#login_box p{
	height:30px;
}

/*よりそいホットラインのリンク雲のスタイル*/

#yorisoi_cloud{
	position:absolute;
	right:60px;
	bottom:40px;
	background:none;
	width:280px;
	height:180px;
}

#yorisoi_cloud img{
	width:100%;
}

.cloud_btn{
	cursor:pointer;
}

.cloud_btn:hover{
	opacity:0.8;
}

/*相談メッセージビューのスタイル*/

#mstitle{
	font-size:20px;
	font-weight:bold;
	text-align:center;
	width:400px;
	position:absolute;
	top:35px;
}

#moya_view{
	height:380px;
	width:370px;
	margin-top:35px;
	overflow:auto;
	border:1px solid #ddd;
	display:none;
}

.no_input{
	height:470px !important;
}

#ms_input{
	margin-top:5px;
	display:none;
}

#ms_input textarea{
	background-color:#efefef;
	width:100%;
	height:80px;
	border:none;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	font-size:13px;
	font-weight:bold;
}

.ms_row{
	padding:15px;
}

.ms_row p{
	font-weight:bold;
	text-align:right;
}

.user_icon{
	float:left;
	width:15%;
}

.username{
	text-align:center;
	font-weight:bold;
}

.admin_icon{
	float:right;
	width:15%;
}

.funame{
	text-align:center;
	font-weight:bold;
}

.user_icon img, .admin_icon img{
	width:100%;
}

.user_ms{
	float:left;
	width:80%;
	margin-left:5%;
	color:#9FA0A0;
	font-weight:bold;
	line-height:15px;
}

.admin_ms{
	float:right;
	width:80%;
	margin-right:5%;
	color:#9FA0A0;
	font-weight:bold;
	line-height:15px;
}

.wait_ms{
	float:right;
	width:60%;
	color:#000;
	font-weight:bold;
	font-size:14px;
	line-height:25px;
}

.btn_ls{
	float:right;
	width:80%;
}

.btn_ls li{
	margin-top:10px;
	width:120px;
	text-align:center;
}

.btn_ls li.continue_ms{
	margin-top:30px;
	width:230px;
}

.btn_ls li.continue_ms{
	text-align:left;
}

/*マイ相談ページのスタイル*/

#userpage{
	width:100%;
	height:100%;
	min-height:700px;
	position:relative;
	background-color:#D0E9E6;
	background-image:url('../images/msback.png');
	background-repeat:no-repeat;
	background-position-x:center;
	background-position-y:180px;
	background-size:contain;
}

#form_col{
	background-color:#e6e6e6;
	width:310px;
	min-height:530px;
	margin:0 auto;
	padding:20px;
	position:relative;
	z-index:200;
}

/*ログイン画面のスタイル*/

#login_form{
	padding-top:100px;
	font-size:14px;
	font-weight:bold;
}

#login_form p{
	line-height:30px;
}

#login_form .input_box{
	border:none;
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	width:100%;
	height:30px;
	font-size:16px;
	text-indent:8px;
}

#login_form .btn{
	background-color:#D3EDFB;
	color:#9FA0A0;
	padding:3px 20px 3px 20px;
	line-height:35px;
}

/*会員登録画面のスタイル*/

#regist_form {
	font-size:14px;
	font-weight:bold;
}

#regist_form p{
	line-height:30px;
}

.input_box{
	border:none;
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	width:100%;
	height:30px;
	font-size:16px;
	text-indent:8px;
}

select{
	border:none;
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	height:30px;
	font-size:16px;
	text-indent:8px;
}

#regist_form select{
	width:70px;	
}

.btn{
	display:inline-block;
	background-color:#D3EDFB;
	color:#9FA0A0;
	padding:10px 20px 10px 20px;
	font-weight:bold;
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	cursor:pointer;
}

.btn a{
	display:block;
	color:#9FA0A0;	
}

.btn:hover{
	opacity:0.7;
}

.w_btn{
	background-color:#fff;
	color:#9FA0A0;
	padding:10px 30px 10px 30px;
	line-height:35px;
	font-weight:bold;
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;	
}

#kiyaku{
	background:#fff;
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	width:96%;
	padding:2%;
	height:150px;
	font-size:12px;
}

#regist_form p.small{
	font-size:12px;
	line-height:14px;
}

#regist_form .check_box{
	border:none;
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
}

/*新しい相談登録フォームのスタイル*/

#newmoya_form {
	font-size:14px;
	font-weight:bold;
}

#newmoya_form p{
	line-height:30px;
}

#newmoya_form select{
	width:200px;
}

#feeling_radio{
	margin:0 auto;
}

.radio_box{
	width:67px;
	float:left;
	margin:5px;
}

.radio_box p{
	text-align:center;
	padding-right:10px;
	line-height:16px;
	font-size:12px;
	cursor:pointer;
}

#feeling_radio img{
	width:100%;
	cursor:pointer;
}

#new_message textarea{
	border:none;
	font-size:13px;
	border-radius:4px;
	height:80px;
	width:100%;
	-webkit-border-raidus:4px;
	-moz-border-radius:4px;
	-o-border-radius:4px;
	-ms-border-radius:4px;
}

/*相談一覧ページのスタイル*/

#moyalist{
	width:500px;
	position:absolute;
	z-index:-1;
	bottom:5px;
	left:-335px;
	opacity:1.0;
	transition:opacity 0.3s ease-in-out;
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition:opacity 0.3s ease-in-out;
	-o-transition:opacity 0.3s ease-in-out;
	-ms-transition:opacity 0.3s ease-in-out;
}

#moyalist .reload{
	position:absolute;
	left:0;
	top:-10px;
}

#box_title{
	font-size:15px;
	font-weight:bold;
	height:20px;
	margin-left:120px;
	margin-bottom:5px;
}

#moyalist_box{
	height:350px;
	overflow:auto;
}

#moyalist_box .jspVerticalBar{
	right:auto;
	left:0;
}

#moyalist_box li{
	background-color:#9FD9F6;
	height:70px;
	margin-bottom:2px;
	padding:5px 15px 5px 15px;
	position:relative;
	cursor:pointer;
}

.icon{
	position:absolute;
}

.icon img{
	width:45px;
}

.moyatitle{
	position:absolute;
	left:70px;
	top:10px;
	font-size:15px;
	font-weight:bold;
	color:#000;
}

.unread{
	position:absolute;
	top:0;
	left:285px;
	font-weight:bold;
	color:#fff;
	padding-left:32px;
	padding-top:7px;
	width:15px;
	height:28px;
	background:url('../images/m_F_kifu.png');
}

.date{
	position:absolute;
	left:200px;
	top:35px;
	color:#fff;
	font-weight:bold;
}

.lastms{
	position:absolute;
	top:50px;
	color:#9FA0A0;
	font-weight:bold;
	width:330px;
	height:24px;
	overflow:hidden;
}

/*よりそいホットラインページのスタイル*/

#yorisoi{
	width:100%;
	height:100%;
	min-height:700px;
	position:relative;
	background-color:#fff;
}

#center_cloud.yorisoi{
	height:680px;
}

#about_yorisoi{
	text-align: center;
}

#about_yorisoi p{
	font-weight:bold;
	font-size:12px;
	line-height:2.2;
	letter-spacing:0.2em;
}

#about_yorisoi img{
	width:70%;
	margin-top:20px;	
}

/*アーカイブページのスタイル*/

#archive{
	width:100%;
	height:100%;
	min-height:700px;
	position:relative;
	background-color:#6BC8F2;
	background-image:url('../images/archback.png');
	background-size:contain;
	background-position-x:center;
	background-position-y:360px;
	background-repeat:no-repeat;
}

#l_arch{
	margin-top:50px;
	padding:50px 20px;
	float:left;
}

#r_arch{
	margin-top:50px;
	padding:50px;
	float:right;
}

#cate_list{
	margin-left:30px;
}

.arch_col{
	float:left;
	width:150px;
	margin-left:10px;
}

.catels{
	cursor:pointer;
	margin-bottom:10px;
}

.cate_name{
	color:#fff;
	font-weight:bold;
	font-size:17px;
	height:25px;
	padding-left:60px;
	padding-top:3px;
	margin-bottom:10px;
	background:url('../images/kumo_head.png') no-repeat;
}

#arch_list_container{
	width:200px;
	margin-left:70px;
}

#current_cate{
	color:#fff;
	font-weight:bold;
	font-size:17px;
	height:25px;
	padding-left:60px;
	padding-top:3px;
	margin-bottom:10px;
	background:url('../images/kumo_head.png') no-repeat;
}

#arch_list_container .color1{
	color:#FFF9B1 !important;
}

#arch_list_container .color2{
	color:#FEDF8F !important;
}

#arch_list_container .color3{
	color:#FACE9D !important;
}

#arch_list_container .color4{
	color:#F6BFD7 !important;
}

#arch_list_container .color5{
	color:#DDD1E7 !important;
}

#arch_list{
	background-color:#8FD3F5;	
	height:400px;
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	overflow:auto;
}

#arch_list li{
	text-align:center;
	padding:5px;
	border-bottom:2px solid #fff;
	cursor:pointer;
}

#arch_list li:hover{
	opacity:0.7;
}

.arch_title{
	font-size:13px;
	font-weight:bold;
	height:20px;
	line-height:20px;
	overflow:hidden;
}

.arch_date{
	font-size:12px;
	font-weight:bold;
	height:20px;
	line-height:20px;
	color:#fff;
	overflow:hidden;
}

/*共通スタイル*/

.fl_r{
	float:right;
}

.fl_l{
	float:left;
}

.error p{
	line-height:13px !important;
	font-size:11px !important;
	font-weight:bold !important;
	color:red !important;
}

.color1.selected_cate{
	color:#FFF9B1 !important;
}
.color1:hover{
	color:#FFF9B1 !important;
}

.color2.selected_cate{
	color:#FEDF8F !important;
}
.color2:hover{
	color:#FEDF8F !important;
}

.color3.selected_cate{
	color:#FACE9D !important;
}
.color3:hover{
	color:#FACE9D !important;
}

.color4.selected_cate{
	color:#F6BFD7 !important;
}
.color4:hover{
	color:#F6BFD7 !important;
}

.color5.selected_cate{
	color:#DDD1E7 !important;
}
.color5:hover{
	color:#DDD1E7 !important;
}

.reload{
	background-color:#fff;
	background-image:url('../images/reload.jpg');
	background-position:center;
	background-repeat:no-repeat;
	background-size:35% auto;
	width:50px;
	height:25px;
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	-o-border-radius:4px;
	-ms-border-radius:4px;
	cursor:pointer;
}

.reload:hover{
	opacity:0.7;
}