@import url(./color.css);
@font-face
{
font-family: IPAex明朝;
src: url('https://cdn.leafscape.be/IPAexfont/ipaexm_web.woff2')
     format("woff2");
}
/*-------------------------------------------------
このフォントはIPAフォントライセンスv1.0の下で提供されています。
 
http://ipafont.ipa.go.jp/ipa_font_license_v1.html
 
-------------------------------------------------*/

html,
body {
margin : 0;
padding : 0;
}

BODY,TH,TD,P,DIV{
font-family : メイリオ,"Meiryo UI",tahoma;
font-size : 13px;
line-height : 20px;
}
BODY{
  /* 画像ファイルの指定 */
  background-image: url(../img/bg.jpg);
   
  /* 画像を常に天地左右の中央に配置 */
  background-position: center center;
   
  /* 画像をタイル状に繰り返し表示しない */
  background-repeat: no-repeat;
   
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-attachment: fixed;
   
  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  background-size: cover;
   
  /* 背景画像が読み込まれる前に表示される背景のカラー */
  background-color: #464646;
text-align : center;
}
DIV,TABLE,P{/* センタリング用 */
margin : 0 auto;
padding: 0 auto;
}
a{
text-decoration: none;
color : #333333;
}
#main{
margin-bottom : 50px;
}
.sub{
position:fixed;
}
/*------メニュー------*/
.menu{
text-align : center;
margin-top : 30px;
}
ul{
border-radius:4px;
margin : 15px 20px 20px;
padding: 0;
list-style: none;
}
.menu li {
font-weight:bold;
height: 40px;
line-height: 40px;
margin : 2;
vertical-align: middle;
text-align: center;
}
.menu li > a {
color:#fff;
text-decoration: none;
display: table;
width: 50%;
}

/*------メニューここまで------*/

.contents{
}
.sub_menu{
z-index: 3;
margin : 20px auto;
}
.logo{
font-family: 'Mr De Haviland', cursive;
font-size:55px;
color:rgba(255,255,255,0.8);
font-weight:normal;
text-shadow:0 0 5px #fff,0 0 3px #fff;
}
.member_list{
background : #ffffff;
box-shadow : 2px 2px 4px #999999;
box-sizing : border-box;
z-index : 3;
}
.res{
font-size : 12px;
}
.footer{
margin : 50px auto 80px;
}
#page-top{
z-index: 1000;
}
/*------メニューのリンク効果------*/
.menu li a {
position: relative;
display: inline-block;
text-decoration: none;
}
.menu li a:hover{
color:#e6c0c0;
}
.menu li a::after {
position: absolute;
bottom: -4px;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #e6c0c0;
transform: scale(0, 1);
transform-origin: center top;
transition: transform .3s;
}
.menu li a:hover::after {
transform: scale(1, 1);
}


/*------writing、admin、フッターのリンク効果------*/
.sub_menu a,
.footer a{
	color:#fff;
	position: relative;
	display: inline-block;
	padding: 0.1em 0.3em;
	text-decoration: none;
}
.sub_menu a{
	width: 80px;
}
.sub_menu a:after,
.footer a:after{
	position: absolute;
	bottom: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	content: '';
	transition: all 0.3s ease;
	opacity: 0;
	border-radius: 10px;
background: linear-gradient(-135deg, #f0831e,#856daf,#2d293e);
}
.sub_menu a:hover:after,
.footer a:hover:after{
	bottom: 0;
	height: 100%;
	opacity: 0.3;
}

/*------レス画面を開くリンク効果------*/
H1 a{
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}
H1 a:hover {
color: #fff;
text-shadow: -1px 1px 5px #e3acae, 1px -1px 5px #e3acae;
}

/*------skin_form.html専用------*/
.info{
margin : 20px auto;
padding : 20px;
background : #ffffff;
box-shadow : 1px 1px 2px #999999;
box-sizing : border-box;
text-align : left;
}
.info h1{
font-size: 18px;
margin: 5px auto;
}
.info h1::before {
content : '\002731';
color : #e3acae;
margin-right : 5px;
}
.info dl { line-height : 1; position : relative; }
.info dt { padding-left: 25px; }
.info dd { margin: 0 0 10px 0; padding-left: 100px; }
.info dt + dd { margin-top: -14px; }
.info dd::before {
content: '\002713';
position: absolute;
left : 3px;
color: #e3acae;
}
.file_button {
  padding: 3px 10px;
  text-align: center;
  color: #fff;
  background-color:#e3acae;
  overflow: hidden;
  -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
  -o-transition: .3s ease;
  transition: .3s ease;
}
.file_button:hover {
background-color:#fff;
color:rgba(25,25,25,0.6);
}
.file_input{
  top: 0;
  left: 0;
  width: 100%;
  cursor: pointer;
}

/*------skin_res.html専用------*/
.res_thread{
box-shadow : 2px 2px 4px #999999;
box-sizing : border-box;
margin: 30px auto 60px;
Background:#fff;
padding:0 10px;
}
.res_sub{
text-align : center;
margin-bottom : 10px;
}
.face{
min-width:156px;
margin : 20px auto;
padding :28px 0;
background-image:url(img/icon.png);
background-repeat:no-repeat;
}
.msg{
box-sizing : border-box;
text-align : left;
}
.date_res{
text-align : right;
}
.editform{
margin: 30px auto;
}
.editform .waku,
.editform select{
margin: 2px;
}
/*------フォーム専用------*/
.entryform{
}
.max100{
width: 100%;
}
.waku{
font-size : 12px;
background : #ffffff;
border : 1px solid #e3acae;
padding : 5px;
}
.btn{
border : 1px solid #e3acae;
background:#e3acae;
color : #ffffff;
padding : 4px 5px;
}
.waku,
.btn{
font-family : メイリオ,"Meiryo UI",tahoma;
}
select {
/*　矢印を消す　*/
-webkit-appearance:none;
-moz-appearance:none;
text-indent: .01px; /* Firefox用 */
text-overflow: ""; /* Firefox用 */
appearance:none;
border:1px solid #e3acae;
padding : 5px 4px;
background:#ffffff;
cursor:pointer;
}
/*------TOPジャンプボタン------*/
#page-top{
position: fixed;
bottom: 0;
width: 100%;
background-color: #000000;
opacity: 0.5;
padding: 3px;
}
#page-top a{
width: 100%;
display : block;
color : #ffffff;
}

.title{
font-family: IPAex明朝;
font-size:18px;
margin:0 0 5px 0;
}
/*------パソコン用------*/
@media screen and (min-width:780px) {
.ps_del{display:none;}/* パソコン閲覧時に非表示 */
#main{
display: flex;/* メニューとコンテンツを横並びにする */
flex-direction: row;/*メニューとコンテンツの並びを左右逆にしたい場合はrow-reverseにする;*/
}
.sub{
width: 300px;
height: 100%;
background: url(../img/black.png);
}
.contents{
flex: 1;
margin-left : 300px;
}
.member{
display: flex;
flex-wrap: wrap;
}
.member_list{
padding:15px;
margin : 20px auto;
width: 40%;
}
.msg,
.msg_mini{
width: 100%;
margin : 20px 10px;
}
h1.pc{
font-family: 'Mr De Haviland', cursive;
font-size:55px;
color:rgba(255,255,255,0.8);
font-weight:normal;
text-shadow:0 0 5px #fff,0 0 3px #fff;
}
h1.sml{display:none;}

/*------横幅一括指定------*/
.info,
.res_thread,
.entryform{
width: 680px;
}
/*------パソコン用skin_res.html専用------*/
.res_thread{
display: flex;/* アイコンと文章を横並びにする */
}

}/*------ここまで------*/


/*------スマホ用------*/
@media ( max-width: 779px ){
.smp_del{display:none;}/* スマホ閲覧時に非表示 */
/*------横幅一括指定------*/
.logo img,
.tree,
.res_thread,
.entryform{
width: 90%;
}
.menu_link a{
color : #ffffff;
}
.logo{
margin-top : 60px;
}
.member_list{
padding:15px 0;
margin : 50px auto;
padding-bottom : 15px;
}
.msg,
.msg_mini{
margin : 8px 10px;
}
.face{
padding-top : 28px;
}
.face br {
display : none;
}

}/*------ここまで------*/


/* Sink　https://ianlunn.github.io/Hover/ */
@media screen and (min-width:780px) {/*パソコン時のみ*/
.hvr-sink {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-sink:hover, .hvr-sink:focus, .hvr-sink:active {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
}
}