@import url('navi.css');
@import url('color.css');
@import url('tip.css');

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

/*--------------------------------------------------*/
/*　　　　　　　　メニューデザイン　　　　　　　　　*/
/*--------------------------------------------------*/
.menu{
text-align: center;
}
.menu ul {
margin: 20px;
padding: 0 0.5em;
position: relative;
}
.menu ul li{
font-size: 14px;
text-align: left;
line-height: 40px;
padding-left: 30px;
border-bottom: dashed 1px silver;
list-style-type: none!important;
transition: .4s;
}
.menu li:hover{
color: #ffffff;
}
.menu li a{
display:block;
}
.menu ul li:before {
font-size: 16px;
font-family: "Font Awesome 5 Free";
content: "\f3a5";
position: absolute;
font-weight: 900;
left: 10px;
}
.menu ul li:last-of-type {
border-bottom: none;
}

/*--------------------------------------------------*/
/*　　　　　　　　　文字リンク用　　　　　　　　　　*/
/*--------------------------------------------------*/
.form_menu{
font-size: 15px;
margin: 15px auto;
}
.form_menu1:before,
.form_menu2:before,
.form_menu3:before,
.form_menu4:before{
font-family: "Font Awesome 5 Free";
padding-right: 5px;
font-weight: 900;
}
.form_menu1:before{
content: "\f56b";
}
.form_menu2:before{
content: "\f002";
}
.form_menu3:before{
content: "\f084";
}
.form_menu4:before{
content: "\f3e5";
}


/*--------------------------------------------------*/
/*　　　　　　　　　skin_main.html　　　　　　　　　*/
/*--------------------------------------------------*/
.tree{
position:relative;
margin: 20px auto 20px;
padding: 10px;
text-shadow: 1px 1px 0 #ffffff,
-1px 1px 0 #ffffff,
 1px -1px 0 #ffffff,
-1px -1px 0 #ffffff;
}
.tree span{
display: inline-block; /*tree内の名前を途中で改行させない指示*/
}
.topic{
background: rgba(255,255,255,0.8);
padding: 15px;
}
h1{
margin: 0 auto 10px;
font-size: 17px;
line-height : 20px;
font-weight:normal;
text-overflow: ellipsis;/*はみ出したテキストを「...」で省略*/
white-space: nowrap;/* 〃 */
overflow: hidden;/* 〃 */
}
.date_mark{
display:none;
}
.date_mark:nth-last-child(1){
display: block;
right:25px;
bottom:20px;
position:absolute;
}
.date_mark:before{
font-family: "Font Awesome 5 Free";
padding-right: 5px;
font-weight: 400;
content: "\f017";
}


/*--------------------------------------------------*/
/*　　　　　　　　　skin_res.html　　　　　　　　　 */
/*--------------------------------------------------*/
.thread{
}
h2{
font-size: 14;
margin: 0 0 10px;
text-align: center;
}
.face{
padding-top: 20px;
text-align: center;
position: relative;
}
.msg,
.msg2{
width: 100%;
padding: 40px 0;
text-align: left;
border: 1px solid #000000;
}
.white{
background: #ffffff;
padding: 15px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.res_date{
padding-top: 10px;
text-align: center;
}
.msgform{
margin-top: 50px;
}
.editform{
padding: 30px 0 15px;
display: flex;
width: 250px;
}
.cover{
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}
.face_100sz{
margin-top: 5px;/* アイコン100×100サイズ時の調整 */
}


/*--------------------------------------------------*/
/*　　　　　　　　skin_spast.html　　　　　　　　　 */
/*--------------------------------------------------*/
.spast{
margin-bottom: 30px;
}

/*--------------------------------------------------*/
/*　　　　　　　　　　パソコン用　　　　　　　　　　*/
/*--------------------------------------------------*/
@media screen and (min-width:780px) {

.ps_del{display:none;}/* パソコン閲覧時に非表示 */

#main{
padding: 10px 0;
}
.menu{
width: 300px;
height: 100%;
position: fixed;
}

.contents{
width: 100%;
}
.msg2{
border-top: 0;
}

/*------主な横幅一括指定------*/
.tree,
.thread,
.msgform,
.spast{
width: 680px;
}
/*--------------------------------------------------*/
/*　　　　　　　　　skin_res.html　　　　　　　　　 */
/*--------------------------------------------------*/
.thread{
display: flex;
}
.face{
width: 200px;
text-align: center;
}

}/*---------消さない---------*/


/*------------------------------------------------*/
/*　　　　　　　　　　スマホ用　　　　　　　　　　*/
/*------------------------------------------------*/
@media ( max-width: 779px ){

.smp_del{display:none;}/* スマホ閲覧時に非表示 */

/*------主な横幅一括指定------*/
.tree,
.thread,
.msgform,
.spast{
width: 98%;
}

.contents{
padding-top: 80px;
padding-bottom: 20px;
}
img{
max-width: 100%;
}
.sitename{
font-size: 15px;
color: #ffffff;
}
h1,
.form_menu{
font-size:13px;
}
/*--------------------------------------------------*/
/*　　　　　　　　　skin_res.html　　　　　　　　　 */
/*--------------------------------------------------*/
.face{
margin: 35px;
}

}/*---------消さない---------*/


/*------------------------------------------------*/
/*　　　　　　　　　リンク効果　　　　　　　　　　*/
/*------------------------------------------------*/
a{
text-decoration: none;
}
.form_menu a{
color: #000000;
padding: 3px;
margin: 3px;
transition: .4s;
}
.form_menu a:hover{
color: #e0e0e0;
}
.tree a{
color: #000000;
transition: .4s;
}
.tree a:hover{
color: transparent;
text-shadow: 0px 0px 3px #000000;
}
.menu a{
color: #000000;
}
.page_link a{
display: inline-block;
color: #ffffff;
background: #000000;
padding: 3px 7px;
line-height: 30px;
border-radius: 3px;
margin: 10px 5px;
transition: .4s;
font-weight: bold;
}
.page_link a:hover{
color: #000000;
background: transparent;
}


/*------------------------------------------------*/
/*　　　　　　　　　↑↓ボタン　　　　　　　　　　*/
/*------------------------------------------------*/
.circle{
display: inline-block;
text-decoration: none;
color: #ffffff;
background: #000000;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 30px;
text-align: center;
overflow: hidden;
font-weight: bold;
transition: .4s;
margin: 3px;
}

.circle:hover {
color: #000000;
background: transparent;
}
#fotter{
z-index:999;
text-align: right;
left:10px;
bottom:10px;
position:fixed;
}