﻿*{
box-sizing: border-box;
}
img{
border:0;
}
BODY,TH,TD,P,DIV{
font-size : 13px;
line-height : 20px;
color:#333;
font-family : メイリオ,"Meiryo UI",tahoma;
}
BODY{
text-align:center;
background: #ffffff;
}
DIV,TABLE,P{
margin : 0 auto;
padding: 0 auto;
}
DIV#all{
margin : 0 auto;
}



/*----------flexbox一括指示----------*/
.menu,
.msg_main,
.under_menu{
display: flex;
flex-direction: row;
}
/*----------flexbox一括指示終了----------*/



/*----------skin_main----------*/
.frame{background: #ffffff;
border: 1px solid #263147;
margin: 20px auto;
padding: 0;
}
.menu{
background: #263147;
padding: 10px;
}
.menu p{
color: #ffffff;
}
.talk_menu{
font-size: 18px;
line-height : 30px;
text-align: left;
width: 80%;
font-weight:bold;
color: #ffffff;
}
.friend{
font-size: 18px;
line-height : 30px;
text-align: left;
width: 90%;
font-weight:bold;
color: #ffffff;
}
.under_menu{
border-top: 1px solid #eeeeee;
background: #ffffff;
}
.under_menu p{
color: #999999;
margin: 8px auto;
}



/*----------skin_mainの記事一覧----------*/
.msg_main{
background: #ffffff;
position: relative;
z-index: 1;
padding: 5px auto;
border-top: 1px solid #eeeeee;
}
.msg_main:hover{
background: #eeeeee;
}
.msg_main a{
z-index: 2;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-indent:-999px;
}

.to_line{
font-size: 16px;
position:absolute;
top:12px;
left: 70px;
}
.icon{
width: 50px;
margin: 10px;
}

.comment{
text-align: right;
display:none;
margin: 35px 0 0;
height : 20px;
overflow: hidden;
}
.comment:last-child{
display:inline-block;
}

.date_list{
font-size: 14px;
color: #333333;
position:absolute;
bottom: 10px;
right: 15px;
}



/*----------トーク部分----------*/
.talk_bg{
background: #83a0c8;
}
.talk_main{
display: flex;
flex-direction: row;
}
.talk_box{
padding: 17px;
margin:10px 10px 0;
position: relative;
background: #ffffff;
text-align: left;
border-radius: 18px;
}
.talk_boxnone{
margin:10px;
}
.talk_box:after{
right: 100%;
top: 25px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-right-color: #ffffff;
border-width: 8px;
margin-top: -8px;
}
.talk_box .comt{
font-size: 14px;
}
.talk_date{
padding-right: 15px;
text-align: right;
font-size:12px;
color: #ffffff;
}

/*----------パソコン用----------*/
@media screen and (min-width:800px) {
.frame,
.menu,
.icon_list{
width: 500px;	/*　基本の横幅　*/
}
.talk_main{
margin: 20px 10px 5px;
}
}/*----------ここまで----------*/
/*----------スマホ用----------*/
@media ( max-width: 799px ){
.talk_boxnone img{
width: 100%;
}
.talk_main{
margin: 10px 0;
}

}/*----------ここまで----------*/
/*----------トーク部分終了----------*/



/*----------検索ページ----------*/
.search{
}
.search th,
.font_w{
color: #ffffff;
}
/*----------検索ページ終了----------*/



/*----------インプットフォーム----------*/
.left_tip{
text-align: left;
}
.form_new{background: #ffffff;
padding: 10px;
}
::placeholder {
 color: #263147;
}
.w100{
width: 100%;
}
.waku{
margin: 5px auto;
border: 1px solid #263147;
padding: 5px;
font-size: 14px;
}
.slc{
border: 1px solid #263147;
padding:4px;
}
.btn{
border: 1px solid #263147;
background: #263147;
color: #ffffff;
padding: 5px;
}
small{
font-size: 11px;
}



/*----------スタンプ----------*/
.stamp_list{
margin-bottom: 15px;
}
.stamp_list label{
cursor: pointer;
transition: 0.4s;
}
.stamp_list label:hover{
color: #eeeeee;
}
.stamp_list p{
margin: 10px auto;
text-align: center;
}
#stamp{
display: none;
}

.stamp_icon{
text-align: left;
height: 0;
overflow: hidden;
opacity: 0;
transition: 0.4s;
}
.stamp_list input:checked ~ .stamp_icon {
padding: 10px;
height: auto;
opacity: 1;
}

/*----------スタンプ（パソコン表示）----------*/
@media screen and (min-width:800px) {
.stamp_list{
width: 550px;
}
.stamp_icon{
display: flex;
flex-wrap: wrap;
}
}/*----------ここまで----------*/



/*----------アイコン一覧用----------*/
.icon_list{
display: flex;
flex-wrap: wrap;
border:1px solid #263147;
}
.icon_list p{
margin: 10px;
}
.icon_list p img{
margin-bottom: 10px;}



/*----------リンク指示----------*/
a{
text-decoration: none;
color: #999999;
}

.menu a{
color: #ffffff;
transition: 0.4s;
}
.menu a:hover{
color: #999999;
}

.under_menu a{
color: #999999;
transition: 0.4s;
}
.under_menu a:hover{
color: #263147;
}

.page_link a{
border:1px solid #263147;
background: #263147;
color: #ffffff;
padding: 3px 5px;
margin: 3px;
transition: 0.4s;
}
.page_link a:hover{
border:1px solid #263147;
background: #ffffff;
color: #263147;
}
