body{
font-size:2rem;

}

.silverSurfer {
  background-image: -webkit-linear-gradient(top, #BCBCBC 0%, #D9D9D9 26%, #EFEFEF 49%, #E0E0E0 74%, #D3D3D3 100%), -webkit-linear-gradient(top, #BCBCBC 0%, #D9D9D9 26%, #EFEFEF 49%, #E0E0E0 74%, #D3D3D3 100%), -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 150%), -webkit-radial-gradient(at 50% 59%, rgba(255, 255, 255, 0.3) 66%, rgba(0, 0, 0, 0.3) 200%);
  background-image: linear-gradient(to bottom, #BCBCBC 0%, #D9D9D9 26%, #EFEFEF 49%, #E0E0E0 74%, #D3D3D3 100%), linear-gradient(to bottom, #BCBCBC 0%, #D9D9D9 26%, #EFEFEF 49%, #E0E0E0 74%, #D3D3D3 100%), linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 150%), radial-gradient(at 50% 59%, rgba(255, 255, 255, 0.3) 66%, rgba(0, 0, 0, 0.3) 200%);
  background-blend-mode: multiply,multiply,screen; }




h1{
  font-size: 25px;
  width: 35%; 
  padding: 1rem 2rem;
  border-top: 4px solid #d8dcdc;
  border-right: 4px solid #666;
  border-bottom: 4px solid #333;
  border-left: 4px solid #868888;
  border-radius: 0;
  background-image: -webkit-linear-gradient(135deg, #ccc 0%, #868888 20%, #d8dcdc 34%, white 53%, #ccc 100%);
  background-image: linear-gradient(-45deg, #ccc 0%, #868888 20%, #d8dcdc 34%, white 53%, #ccc 100%);
  position: relative;
  display: inline-block;
  padding: 0.25em 0.5em;
 }


h2 {
  font-size: 10px;
  color: #364e96;/*文字色*/
  padding: 0.5em 0;/*上下の余白*/
  /* border-top: solid 2px #364e96;上線 */
  /* border-bottom: solid 2px #364e96;下線 */
  text-align: center;
  box-sizing: border-box;
  width: 100%;

}


.top{

  font-size: 15px;
  color: #364e96;/*文字色*/
  padding: 0.5em 0;/*上下の余白*/
  /* border-top: solid 2px #364e96;上線 */
  /* border-bottom: solid 2px #364e96;下線 */
  text-align: center;
  box-sizing: border-box;
  width: 100%;

}

.ban_lst{
  position:absolute;
	right:20px;
	top:20px;
  padding: 5px 25px;
  color: #000;
  border-top: 4px solid #d8dcdc;
  border-right: 4px solid #666;
  border-bottom: 4px solid #333;
  border-left: 4px solid #868888;
  border-radius: 0;
  background-image: -webkit-linear-gradient(135deg, #333 0%, #868888 20%, #d8dcdc 34%, white 53%, #666 100%);
  background-image: linear-gradient(-45deg, #333 0%, #868888 20%, #d8dcdc 34%, white 53%, #666 100%);
  text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff;
}
.ban_lst:hover {
  text-shadow: 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff;
}

  /*アップロードボタン 　*/



/* 棋譜読み込み */
.up_btn {
  height: 40px;
  width: 120px;
  padding: 5px 20px;
  font-size:1.5rem;
  color: #000;
  border-top: 4px solid #d8dcdc;
  border-right: 4px solid #666;
  border-bottom: 4px solid #333;
  border-left: 4px solid #868888;
  border-radius: 0;
  background-image: -webkit-linear-gradient(135deg, #333 0%, #868888 20%, #d8dcdc 34%, white 53%, #666 100%);
  background-image: linear-gradient(-45deg, #333 0%, #868888 20%, #d8dcdc 34%, white 53%, #666 100%);
  text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff;
}

.up_file2:hover {
  text-shadow: 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff;
}



/* 選択されてません */
.up_file2 {
  height: 40px;
  width: 260px;
  padding: 5px 20px;
  font-size:1.2rem;
  color: #000;
  border-top: 4px solid #d8dcdc;
  border-right: 4px solid #666;
  border-bottom: 4px solid #333;
  border-left: 4px solid #868888;
  border-radius: 0;
  background-image: -webkit-linear-gradient(135deg, #333 0%, #868888 20%, #d8dcdc 34%, white 53%, #666 100%);
  background-image: linear-gradient(-45deg, #333 0%, #868888 20%, #d8dcdc 34%, white 53%, #666 100%);
  text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff;
}
.up_file2:hover {
  text-shadow: 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff;
}
/* 
.sub_botton    {
  font-size: 20px;
   width: 60%;
    */
}
a.btn-solid-gold:hover {
  margin-top: 3px;

  color: #b1921b;
  border-right: 4px solid #cea82c;
  border-bottom: 7px solid #987c1e;
  border-left: 4px solid #ffed8b;

}

a.btn-solid-gold:hover {

  margin-top: 5px;
  color: #b1921b;
  border-right: 4px solid #cea82c;
  border-bottom: 7px solid #987c1e;
  border-left: 4px solid #ffed8b;
}

.boxarea_container{
  text-align: center;
}
.setsumei_1{   
  color: #070707;
   text-align: center;
   padding: 4px;
}

.in_kifubox{ 

    position: relative; /* 今の位置を基準 */
	  left:0px;
	  top: 20px;
    width: 60%;  
    border: 10px solid #0a0;  /* 枠線 */
    border-radius: 1em;   /* 角丸 */
    padding: 0.5em;          /* 内側の余白量 */
    background-color: rgba(208, 219, 211, 0.986);  /* 背景色 */
    width: 60%;             /* 横幅いっぱいにする */
    box-sizing: border-box;  /* ※これがないと横にはみ出る */
    height: 400px;           /* 高さ */
    font-size:20px;          /* 文字サイズ */
    color:#000000;
    line-height: 1;        /* 行の高さ */
}

.out_kifudata{
    border: 10px solid #0a0;  /* 枠線 */
    border-radius: 1em;   /* 角丸 */
    padding: 0.3em;          /* 内側の余白量 */
    background-color: rgba(208, 219, 211, 0.986);   /* 背景色 */
    width: 50%;             /* 横幅いっぱいにする */
    box-sizing: border-box;  /* ※これがないと横にはみ出る */
    height: 500px;           /* 高さ */
    font-size: 25px;          /* 文字サイズ */
    line-height: 1;        /* 行の高さ */
}

.memo{
    color:#000;
    border: 2px solid #0a0;  /* 枠線 */
    border-radius: 0.60em;   /* 角丸 */
    padding: 0.2em;          /* 内側の余白量 */
    background-color: rgb(139, 216, 204);  /* 背景色 */
    width: 15%;             /* 横幅いっぱいにする */
    box-sizing: border-box;  /* ※これがないと横にはみ出る */
    height: 25px;           /* 高さ */
    font-size: 1em;          /* 文字サイズ */
    line-height: 1.0;        /* 行の高さ */
}

.goban_no{
    text-align:center;
    border: 2px solid #0a0;  /* 枠線 */
    border-radius: 0.60em;   /* 角丸 */
    padding: 0.2em;          /* 内側の余白量 */
    background-color: rgb(139, 216, 204);  /* 背景色 */
    width: 8%;             /* 横幅いっぱいにする */
    box-sizing: border-box;  /* ※これがないと横にはみ出る */
    height: 25px;           /* 高さ */
    font-size: 1em;          /* 文字サイズ */
    line-height: 1.0;        /* 行の高さ */
}
.verno{
  font-size: 15px;
  color: #000205;/*文字色*/
  padding:0px 0;/*上下の余白*/
  text-align:right;
}


.items{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
 
}
 /* 
.item{
box-sizing: border-box;
border:1px solid #ccc;
margin: 0;
padding: 20px;
}
 */
.botton    {

  padding: 2.5px 2.5px;
  color: #000;
  font-size:22px;
  width: 200px;
  height: 50px;
  border-top: 4px solid #d8dcdc;
  border-right: 4px solid #666;
  border-bottom: 4px solid #333;
  border-left: 4px solid #868888;
  border-radius: 0;
  background-image: -webkit-linear-gradient(135deg, #333 0%, #868888 20%, #d8dcdc 34%, white 53%, #666 100%);
  background-image: linear-gradient(-45deg, #333 0%, #868888 20%, #d8dcdc 34%, white 53%, #666 100%);
  text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff;
}
.botton:hover {
  text-shadow: 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff;
}
.clear_btn {
  padding: 0px 0px;
  color: #000;
  border-top: 4px solid #d8dcdc;
  border-right: 4px solid #666;
  border-bottom: 4px solid #333;
  border-left: 4px solid #868888;
  border-radius: 0;
  background-image: -webkit-linear-gradient(135deg, #333 0%, #868888 20%, #d8dcdc 34%, white 53%, #666 100%);
  background-image: linear-gradient(-45deg, #333 0%, #868888 20%, #d8dcdc 34%, white 53%, #666 100%);
  text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff;
}
.clear_btn:hover {
  text-shadow: 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff;
}

.btn_grp{ 
  position: relative; /* 今の位置を基準 */
  top: -210px; 
	padding: 1.0% 1.0%;
  flex-direction: row; 
  margin         :auto;            
   /*box-sizing     : border-box;           罫線も含む長さ      */
   /*background     : rgb(226, 15, 15);               */
  display        : flex;                 /* FlexBox定義         */
  justify-content: center;               /* 揃えの定義          */
}

.inner{
position: relative;
 top: 200px; 
  
}
   


.subtitle { 
font-size: 1px;
  color: #000205;/*文字色*/
  padding:0px 0;/*上下の余白*/
  text-align:center;
}

.box1_01{
font-size: 15px;
  color: #000205;/*文字色*/
  padding: 0.0em 0;/*上下の余白*/
  text-align:center;
} 
.inputbox1{
font-size: 15px;
  color: #0e0701;/*文字色*/
  padding: 0.0em 0;/*上下の余白*/
   text-align:center;
}

.commentbox{
font-size: 15px;
  color: #000205;/*文字色*/
  padding: 0.0em 0;/*上下の余白*/
  text-align:center;
  
}
 .banno_chk{
  font-size: 15px;
  color: #000205;/*文字色*/
  padding: 0.0em 0;/*上下の余白*/
   text-align:center;
}
 .box2{
  font-size: 15px;
  color: #000205;/*文字色*/
  padding: 0.0em 0;/*上下の余白*/
   text-align:center;
}
.clip_btn{
  font-size: 1.2em;
  padding: 5px 20px;
  display: inline-block;
  height: 60px;
  width: 260px;
  color: rgb(253, 14, 14);
  display: inline-block;
  border-top: 4px solid #d8dcdc;
  border-right: 4px solid #666;
  border-bottom: 4px solid #333;
  border-left: 4px solid #868888;
  border-radius: 0%;
  background-image: -webkit-linear-gradient(135deg, #333 0%, #868888 20%, #d8dcdc 34%, white 53%, #666 100%);
  background-image: linear-gradient(-45deg, #333 0%, #868888 20%, #d8dcdc 34%, white 53%, #666 100%);
  text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff;
}
.clip_btn:hover {
  text-shadow: 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff;
}



.varno{
  font-size: 15px;
  color: #000205;/*文字色*/
  padding: 0.0em 0;/*上下の余白*/
   text-align:right;
}
.android{
  font-size: 15px;
  color: #000205;/*文字色*/
  padding: 0.0em 0;/*上下の余白*/
   text-align:right;
}



*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}
.btn-engine-start {
  position: relative;

  width: 145px;
  height: 145px;
  margin: 0 auto;

  border-radius: 50%;
  background: rgb(202, 64, 64);
  background: -webkit-linear-gradient(
    315deg,
    white 0%,
    white 22%,
    #ddd 44%,
    #a5a5a5 52%,
    black 100%
  );
  background: linear-gradient(
    135deg,
    white 0%,
    white 22%,
    #ddd 44%,
    #a5a5a5 52%,
    black 100%
  );
  -webkit-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}

.btn-engine-start:before {
  position: absolute;
  top: 7.5px;
  left: 7.5px;

  display: block;

  width: 130px;
  height: 130px;

  content: "";

  border-radius: 50%;
  background: #515151;
  background: -webkit-linear-gradient(
    -45deg,
    #515151 0%,
    #515151 19%,
    #ededed 50%,
    white 77%,
    white 100%
  );
  background: -webkit-linear-gradient(
    315deg,
    #515151 0%,
    #515151 19%,
    #ededed 50%,
    white 77%,
    white 100%
  );
  background: linear-gradient(
    135deg,
    #515151 0%,
    #515151 19%,
    #ededed 50%,
    white 77%,
    white 100%
  );

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#515151', endColorstr='#ffffff', GradientType=1);
}

.btn-engine-start:hover a.btn-engine-start-in:before {
  top: 70px;

  background: #61c419;
  -webkit-box-shadow: 0 0 6px rgba(97, 196, 25, 0.3);
  box-shadow: 0 0 6px rgba(97, 196, 25, 0.3);
}

.btn-engine-start:hover a.btn-engine-start-in {
  padding: 37px 0 0;

  color: #b4e391;
  -webkit-box-shadow: inset 0 1px 1px black, 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 1px black, 0 1px 2px rgba(0, 0, 0, 0.5);
  text-shadow: 0 0 6px rgba(97, 196, 25, 0.3), 0 0 6px rgba(97, 196, 25, 0.3);
}

a.btn-engine-start-in {
  font-size: 14px;
  line-height: 1.2;

  position: absolute;
  top: 18px;
  left: 18px;

  width: 109px;
  height: 109px;
  padding: 35px 0 0;

  color: #fff;
  border-radius: 50%;
  background: #959595;
  background: -webkit-linear-gradient(
    -45deg,
    #959595 0%,
    #0d0d0d 46%,
    #010101 50%,
    #0a0a0a 69%,
    #1b1b1b 100%
  );
  background: -webkit-linear-gradient(
    315deg,
    #959595 0%,
    #0d0d0d 46%,
    #010101 50%,
    #0a0a0a 69%,
    #1b1b1b 100%
  );
  background: linear-gradient(
    135deg,
    #959595 0%,
    #0d0d0d 46%,
    #010101 50%,
    #0a0a0a 69%,
    #1b1b1b 100%
  );
  -webkit-box-shadow: inset 0 2px 2px white, 0 2px 4px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 2px 2px white, 0 2px 4px rgba(0, 0, 0, 0.5);

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#959595', endColorstr='#1b1b1b', GradientType=1);
}

a.btn-engine-start-in:before {
  position: absolute;
  top: 18px;
  left: calc(50% - 13px);

  width: 26px;
  height: 8px;

  content: "";
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;

  border-radius: 10px;
  background: green;
  background: #555;
}

a.btn-engine-start-in span {
  font-size: 10px;
}



.wolverine {
  background: -webkit-linear-gradient(left, #BDBFBA 4%, #5A5C5B 98%), -webkit-linear-gradient(16deg, rgba(255, 255, 255, 0.5) 54%, rgba(0, 0, 0, 0.5) 100%);
  background: linear-gradient(90deg, #BDBFBA 4%, #5A5C5B 98%), linear-gradient(74deg, rgba(255, 255, 255, 0.5) 54%, rgba(0, 0, 0, 0.5) 100%);
  background-blend-mode: multiply; }

  /* .underTheEarth {
  background-image: -webkit-radial-gradient(50% 150%, #787B7D 5%, #4B5052 100%);
  background-image: radial-gradient(50% 150%, #787B7D 5%, #4B5052 100%); } */
  
  }