html{
 height:100%;
 width:100%;
 font-size:0;
}

body{
 background: #eeeeee;
 font-family: "MS PMincho";
 max-width:3000px;
 height: 100%;
 width:95%;
 font-size:0;
}

a{
 text-decoration:none;
 color:#ffffff;
 background-color:none;
}

p{
 text-indent:2em;
}

hr{
 width:80%;
 margin:20px;
}

textarea{
 font-size:15px;
 line-height:1.5em;
}

.titleTxt{
 background-color: #7f7f7f;
 color: #ffffff;
 height: 200px;
 text-align: center;
 height:181px;
}

.subtitle{
 text-indent:1em;
 font-size:23px;
 line-height:30px;
}

div.subtitle{
 display:table-cell;
 vertical-align:middle;
}

font.subtitle{
 font-size:23px;
}

.trim{
 overflow: hidden;
/* width: 450px;*/
 height:180px;
 position: relative;
}

.trim img{
 position: absolute;
 top:50%;
 left:50%;
 -webkit-transform:translate(-50%,-50%);
 -ms-transform:translate(-50%,-50%);
 transform:translate(-50%,-50%);
 width:50%;
 height:auto;
}

.deep{
 background: #7f7f7f;
 color: #ffffff;
}

.white{
 background: #ffffff;
 color: #7f7f7f;
}


.divide_w{
 background: #ffffff;
 height: 5px;
}
.divide_b{
 background: #7f7f7f;
 height: 5px;
}
.divide_b_L{
 background: #7f7f7f;
 line-height: 30px;
 color:#ffffff;
 font-size:20px;
 text-align:center;
}
.divide_w_L{
 background: #ffffff;
 line-height: 30px;
 color:#7f7f7f;
}

.divide_w_L50{
 background: #ffffff;
 line-height: 30px;
}

.menuHead{
 height:35px;
}

.menuBar{
 background-color:#7f7f7f;
 text-align:center;
 padding:2%;
}

.commentbar{
 height:15px;
 text-align:center;
 vertical-align:middle;
 background-color:#ffffff;
 color:#7f7f7f;
}

.contentsBox{
 border:none;
 line-height:0;
 &:after{
  content:"";
  display:block;
  clear:both;
 }
}

.menuBox{
 float:left;
 background-color:#ffffff;
 width:120px;
 line-height:10px;
 text-align:left;
 text-indent:1em;
 height:300px;
}
.divBox{
 float:left;
 background-color:#7f7f7f;
 width:5px;
 line-height:0;
 height:300px;
 color:#7f7f7f;
}

.etcBox{
 float:none;
 background-color:#ffffff;
 line-height:0;
 width:auto;
 height:300px;
}

.contentsName{
 background-color:#7f7f7f;
 font-size:20px;
 line-height:100%;
}
.contentsName:hover{
 background-color:#eeeeee;
}
.contentsName a:hover{
 color:#7f7f7f;
}

.menuBar a:hover{
 font-weight:bold;
}

.etcContents{
 font-size:15px;
}

.footer{
 background-color:#7f7f7f;
 height:30px;
}
.footer:after{
 font-size:12px;
 color:#eeeeee;
 display:block;
 content:"(C)2017 Tate-Ala-Arc. by Momonoji　　";
 margin:20px 0;

}

.HeaderBlock{
 border:none;
 height:30px;
 &:after{
  content:"";
  display:block;
  clear:both;
 }
}

.HeaderBlockA{
 background-color:#7f7f7f;
 font-size:20px;
 text-align:left;
}

.HeaderBlockB{
 background-color:#7f7f7f;
 width:40%;
 font-size:20px;
 text-align:left;
 font-weight:bold;
}
.HeaderBlockC{
 background-color:#7f7f7f;
 font-size:20px;
 text-align:left;
 width:20%;
}

/* .HeaderBlockA,.HeaderBlockB,.HeaderBlockC{ */
/*  float:left; */
/* } */

.mainBox{
 font-size:15px;
 background-color:#ffffff;
 float:none;
 width:auto;
 line-height:10px;
 text-align:left;
 text-indent:1em;
}

.mainBox_A{
 float:left;
 background-color:#ffffff;
 width:40%;
 line-height:10px;
 text-align:left;
 text-indent:1em;
}

.mainBox_B{
 float:none;
 background-color:#ffffff;
 width:40%;
 line-height:10px;
 text-align:left;
 text-indent:1em;
}

.fullheight{
 height:100%;
}

.fullwidth{
 width:100%;
}

.contentsTitle{
 background-color:#ffffff;
 /* height:100px; */
 text-align:left;
 padding:3%;
}

.contentsComment{
}

.description{
 background-color:#ffffff;
 height:80px;
}

.panel{
 line-height:30px;
 background-color:#7f7f7f;
 width:100%;
 color:#FFFFFF;
}

.textBox{
 background-color:#ffffff;
}

.h30{
 height:30px;
}
.h45{
 height:45px;
}
.h60{
 height:60px;
}
.h90{
 height:90px;
}
.h600{
 height:600px;
}

.txtFFF{
 color:#ffffff;
}

.txtBlc{
 color:#7f7f7f;
}

.txt10p{
 font-size:10px;
}

.txt15p{
 font-size:15px;
}

.txt20p{
 font-size:20px;
}

.txtCen{
 text-align:center;
}

.txtRig{
 text-align:right;
}

.txtPad1em{
 padding-left:1em;
}
.txtPad2em{
 padding-left:2em;
}

.pad5px{
 padding:5px;
}
.pad15px{
 padding:15px;
}

.w80per{
 width:80%;
}

.w70per{
 width:70%;
}

.w60per{
 width:60%;
}

.w40per{
 width:40%;
}

.w30per{
 width:30%;
}

.w20per{
 width:20%;
}

.w10per{
 width:10%;
}

.w5per{
 width:5%;
}

.wauto{
 width:auto;
}

div.floating{
 float:left;
}

.outer{
 position:relative;
}

.inner{
 position:absolute;
 top:0;
 right:0;
/* bottom:0; */
 left:0;
 margin:auto;
 width:90%;
 height:3.2rem;
}

.ofauto{
 overflow:auto;
}