/* --------- 基礎css --------- */
@import url('../../style_main.css');
@import url('../../style_pc.css');
@import url('../../style_sml.css');
@import url('../../../color.css');
@import url('../../../html5reset-1.6.1.css');

/* 背景をBBS別に設定する場合のcss　　　　　　　*/
/* 一種類でよければstyle_main.cssで設定して　　*/
/* 以下のid指定は削除してください　　　　　　　*/
#bbs{
background:url(../img/bg0.png) repeat center center fixed;
}



a {
text-decoration:none;
color:#000;
}

/* --------- BBS限定のレイアウト --------- */
/* 日付（リボン） */
.ribbon{
z-index: 1;
position: absolute;
top: 0;
right: 0;
width: 210px;
height: 100%;
overflow: hidden;
}
div p.time{
position:absolute;
display:none;
padding: 5px 0;
padding-left: 15px;
width: 210px;
text-align: center;
font-size: 11px;
line-height: 16px;
background: #68a9cf;
color: #fff;
letter-spacing: 0.1em;
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
box-shadow: 0 0 0 2px #68a9cf;
border-top: dashed 1px rgba(255, 255, 255, 0.65);
border-bottom: dashed 1px rgba(255, 255, 255, 0.65);
}
div p.time:last-child{
right: -35px;
top: 15px;
display:block;
}
div p.time2{
position:absolute;
display:none;
padding: 5px 0;
padding-left: 15px;
width: 210px;
text-align: center;
font-size: 11px;
line-height: 16px;
color: #fff;
letter-spacing: 0.05em;
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
box-shadow: 0 0 0 2px #fff;
border-top: dashed 1px rgba(255, 255, 255, 0.65);
border-bottom: dashed 1px rgba(255, 255, 255, 0.65);
}
div p.time2:last-child{
right: -35px;
top: 15px;
display:block;
}

/* トピックのDIV */
.topic{
padding:25px 20px;
padding-right: 150px;
background: rgba(255, 255, 255, 0.9);
text-align: left;
border:1px solid #333;
margin-bottom:40px;
position:relative;
display: block;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.14);
box-sizing: border-box;
cursor: pointer;
cursor: hand;
max-width:750px;
}
.topic a {
z-index: 2;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-indent:-999px;
}
.topic:hover {
filter:alpha(opacity=70);/* IE 6,7*/
-ms-filter: "alpha(opacity=70)";/* IE 8,9 */
-moz-opacity:0.7;/* FF , Netscape */
-khtml-opacity: 0.7;/* Safari 1.x */
opacity:0.7;
}

.topic2{
padding:25px 20px;
padding-right: 150px;
background: rgba(255, 255, 255, 0.9);
text-align: left;
border:1px solid #333;
margin-bottom:40px;
position:relative;
display: block;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.14);
box-sizing: border-box;
cursor: pointer;
cursor: hand;
max-width:750px;
margin:20px auto;
}

/* 名前の途中改行防止 */
.topic span{
display: inline-block;
}

/* --------- レス画面 --------- */
.res{
padding:20px;
background: rgba(255, 255, 255, 0.9);
text-align: left;
border-radius: 5px;
margin-bottom:40px;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.14);
box-sizing: border-box;
position: relative;
max-width:750px;
}
.face{
width:100px;
height:100px;
margin:10px 10px 0 0;
}
.msg{
margin: 0px 5px 5px;
}
.day{
margin:5px 0 0;
text-align: right;
}
.title_res{
text-align: center;
font-size:20px;
margin:0px auto 20px;

}
.res2{
padding:20px 20px 50px;
text-align: left;
border-radius: 5px;
margin-bottom:40px;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.14);
box-sizing: border-box;
position: relative;
max-width:750px;
margin:0 auto 40px;
background:url(../../img/tea.jpg) repeat-x bottom center,rgba(255, 255, 255, 0.9);
}

/* --------- フォーム --------- */
.entry{
max-width:750px;
}
.entrytip{
display: flex;
flex-wrap : wrap;
justify-content: flex-start;
}
.formtip1{
display: inline-block;
background: #68a9cf;
color: #fff;
border-radius: 5px;
text-align: center;
width: 55px;
padding: 2px;
margin:2px;
font-size: 12px;
}
.formtip2{
text-align :left;
}
.formtip3{
display: inline-block;
background: #68a9cf;
color: #fff;
border-radius: 5px;
text-align: right;
width: 70px;
padding: 4px;
margin:2px;
font-size: 12px;
}

/*テキストエリア、ボタン*/
.w100{
width: 100%;
}
.ipt1{
background: rgba(255, 255, 255, 0.9);
}
.ipt2{
background: transparent;
color: #fff;
}
.ipt1,
.ipt2{
font-size: 12px;
border-radius: 5px;
padding: 3px;
margin: 2px;
text-align: left;
border:2px solid #68a9cf;
}
.btn{
font-size: 14px;
color: #fff;
border:2px solid #68a9cf;
background: #68a9cf;
padding: 5px;
border-radius: 5px;
font-weight:bold;
}
.btn2{
margin-left:10px;
width: 130px;
}
.select {
font-size: 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: rgba(255, 255, 255, 0.9);
height: 25px;
position: relative;
z-index: 1;
padding: 0 8px;
border: 2px solid #68a9cf;
border-radius: 2px;
}
select::-ms-expand {
display: none;
}

.wordc{
font-weight:bold;
color: #fff;
text-align: right;
margin-left: auto;
}

.right{
text-align: right;
}


/* --------- レス画面のフッター --------- */

/* レスポンシブ：780px以上の指示 */
@media screen and (min-width:780px) {
#footer_res{
width:100%;
height: 60px;
text-align :center;
}
#footer_res p{
width:500px;
color: #fff;
padding: 6px;
margin-left: 300px;
display: inline-block;
background: url(../../img/black.png);
border-radius: 5px;
}
}
/* レスポンシブ：779px以下の指示　　*/
/* BBSではヘッダもスクロールします　*/
@media ( max-width: 779px ){
.left{
position: static;
}
.contents{
margin-top:initial;
}
#footer_res{
text-align :center;
}
#footer_res p{
color: #fff;
padding: 6px;
display: inline-block;
background: rgba(255, 255, 255, 0.9);
border-radius: 5px;
}

}


/* --------- レス画面の矢印 --------- */
#pageTop {
  position: fixed;
  bottom: 50px;
  right: 20px;
}

#pageTop i {
  padding-top: 6px
}


#pageTop a {
  display: block;
  z-index: 999;
  padding: 0px auto 20px;
  border-radius: 10px;
  width: 45px;
  height: 35px;
  background-color: #c0c0c0;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}
#pageTop a::before{
  font-family: FontAwesome;
  content: '\f106';
  font-size: 20px;
}

#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}
#pageBottom {
  position: fixed;
  bottom: 10px;
  right: 20px;
}

#pageBottom i {
  padding-top: 6px
}


#pageBottom a {
  display: block;
  z-index: 999;
  padding: 0px auto 20px;
  border-radius: 10px;
  width: 45px;
  height: 35px;
  background-color: #c0c0c0;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}


#pageBottom a::before{
  font-family: FontAwesome;
  content: '\f107';
  font-size: 20px;
}

#pageBottom a:hover {
  text-decoration: none;
  opacity: 0.7;
}


/* --------- アイコンの設定 --------- */

.ic_Queen{
background: url(../../../icon/Queen.jpg) center top no-repeat;
}
.ic_Nightmare{
background: url(../../../icon/Nightmare.jpg) center top no-repeat;
}
.ic_Dodo{
background: url(../../../icon/Dodo.jpg) center top no-repeat;
}

.ic_Idiot{
background: url(../../../icon/Idiot.jpg) center top no-repeat;
}
.ic_Ethl{
background: url(../../../icon/Ethl.jpg) center top no-repeat;
}
.ic_Ace{
background: url(../../../icon/Ace.jpg) center top no-repeat;
}
.ic_Cornet{
background: url(../../../icon/Cornet.jpg) center top no-repeat;
}
.ic_Jester{
background: url(../../../icon/Jester.png) center top no-repeat;
}
.ic_Traeumerei{
background: url(../../../icon/Traeumerei.jpg) center top no-repeat;
}
.ic_Hugh{
background: url(../../../icon/Hugh.jpg) center top no-repeat;
}
.ic_Johannes{
background: url(../../../icon/Johannes.gif) center top no-repeat;
}


.ic_Koyuki{
background: url(../../../icon/Koyuki.png) center top no-repeat;
}
.ic_Jyun{
background: url(../../../icon/Jyun.png) center top no-repeat;
}
.ic_Naru{
background: url(../../../icon/Naru.png) center top no-repeat;
}
.ic_Mikoto{
background: url(../../../icon/Mikoto.png) center top no-repeat;
}
.ic_Yume{
background: url(../../../icon/Yume.png) center top no-repeat;
}
.ic_Lia{
background: url(../../../icon/Lia.jpg) center top no-repeat;
}
.ic_Luca{
background: url(../../../icon/Luca.gif) center top no-repeat;
}
.ic_Reika{
background: url(../../../icon/Reika.gif) center top no-repeat;
}


/* レスポンシブ：779px以下の指示　　*/
@media ( max-width: 779px ){
.face{
margin:0 auto 10px;
}
}