html {
 overflow-y: scroll;
}

body {
  background-color: #efad28;
  background-image: url("picture/background.png")
}

a:link {color: #977a2d;text-decoration: none;}
a:visited {color: #977a2d;text-decoration: none;}
a:hover {color: #977a2d;text-decoration: underline;}

a.normal_link:link {color: #22a;text-decoration: underline;}
a.normal_link:visited {color: #22a;text-decoration: underline;}
a.normal_link:hover {color: #22a;text-decoration: underline;}

.navi_btn {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 8px 10px 0px 10px;
  text-decoration: none;
  color: #64470a;
  background: #fff1da;
  border-bottom: 2px solid #cc0;
  border-radius: 15px 15px 0 0;
}

.navi_btn:not(.navi_btn_open) > a:hover {
  background-image: url("picture/nikukyu.png");
  background-repeat: no-repeat;
  background-position: 50% -90%;
}

.navi_btn_open {
  background: #850;
  background-image: url("picture/nikukyu.png");
  background-repeat: no-repeat;
  background-position: center center;
}
.navi_btn_open > a {
  color: #fff;
}

img {border: none;}

h2 {
  padding-top: 5px;
  padding-left: 40px;
  position: relative;
  background: #eb6;
  border-radius: 0 10px 10px;
  color: #977a2d;
  text-shadow: 2px 2px 1px #fff,  -2px 2px 1px #fff,  2px -2px 1px #fff,  -2px -2px 1px #fff;
}

h2:before {
  content: "";
  position: absolute;
  background: #fd8;
  background-image: url("picture/no.png");
  background-repeat: no-repeat;
  background-position: center center;
  padding-left: 0px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  top: 50%;
  left: -15px;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#wrap {
  width: 820px;
  text-align: left;
  margin: 20px auto;
}

#header {
  width: 100%;
  height: 280px; /*300*/
  background-image: url("picture/logo.png");
  background-repeat: no-repeat;
  background-position: top center;
}

#inner { margin: 10px; }

#main_contents {
  padding: 10px 30px 20px 30px;
  background: #fff;
  border-radius: 0 0 50px 50px;
}

#navi {
  width: 100%;
}

#footer {
  font-size: 12px;
  padding-top: 20px;
  text-align: center;
  clear: both;
}

table.base_table1 {
  width: auto;
  border-spacing: 0;
}

table.base_table1 {
  border:1px solid #555;
}

table.base_table1 tr {
  border:1px solid #555;
}

table.base_table1 tr td {
  border:1px solid #555;
}

table.base_table1 th {
  padding: 5px;
  background: #eb6;
  font-weight: bold;
  text-align: center;
}

table.base_table1 tr td {
  padding: 5px;
  font-size: small;
  text-align: left;
}

table.base_table1 tr:nth-child(2n+1) {
  background: #fec;
}

.speak {
  position: relative;
  display: inline-block;
  width: 100%;
  padding-bottom: 10px;
  clear: both;
}

.left_face {
  position: relative;
  display: inline-block;
  width: 20%;
  min-height: 100px;
  text-align: center;
  float: left;
}

.speak_message{
  position: relative;
  display: inline-block;
  width: 57%;
  float: left;
  vertical-align: middle;
}

.right_face {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  display: inline-block;
  width: 20%;
  min-height: 100px;
  text-align: center;
  float: right;
}

.balloon-left {
  position: relative;
  display: inline-block;
  margin: 1em 0 1em 15px;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  border: solid 3px #850;
  box-sizing: border-box;
  border-radius: 10px;
}

.balloon-left:before{
  content: "";
  position: absolute;
  top: 50%;
  left: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-right: 12px solid #fff;
  z-index: 2;
}

.balloon-left:after{
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-right: 14px solid #850;
  z-index: 1;
}

.balloon-right {
  position: relative;
  display: inline-block;
  margin: 1em 15px 1em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  border: solid 3px #850;
  box-sizing: border-box;
  border-radius: 10px;
}

.balloon-right:before{
  content: "";
  position: absolute;
  top: 50%;
  right: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-left: 12px solid #fff;
  z-index: 2;
}

.balloon-right:after{
  content: "";
  position: absolute;
  top: 50%;
  right: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-left: 14px solid #850;
  z-index: 1;
}

.kaban {
  background: #fdd;
}

.kaban:before {
  border-right: 12px solid #fdd;
}

.serval {
  background: #fed;
}
.serval:before {
  border-right: 12px solid #fed;
}

.lucky {
  background: #dff;
}
.lucky:before {
  border-right: 12px solid #dff;
}

.lucky-right {
  background: #dff;
}
.lucky-right:before {
  border-left: 12px solid #dff;
}

.arai {
  background: #ddf;
}
.arai:before {
  border-right: 12px solid #ddf;
}

.fennec {
  background: #ffd;
}
.fennec:before {
  border-right: 12px solid #ffd;
}

.fennec-right {
  background: #ffd;
}
.fennec-right:before {
  border-left: 12px solid #ffd;
}

.hakase {
  background: #eee;
}
.hakase:before {
  border-right: 12px solid #eee;
}

.hakase-right {
  background: #eee;
}
.hakase-right:before {
  border-left: 12px solid #eee;
}

.josyu {
  background: #fdb;
}
.josyu:before {
  border-right: 12px solid #fdb;
}

.josyu-right {
  background: #fdb;
}
.josyu-right:before {
  border-left: 12px solid #fdb;
}