@font-face {
  font-family: 'hsr';
  src: url('../fonts/hsr_web.woff2') format('woff2');
}

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: 'hsr', "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  overscroll-behavior-y: none;
  font-size: 16px;
  line-height: 1.07;
}

.panel {
  font-size: 14px;
}

iframe {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
}

iframe#ifr {
  width: 100%;
  height: 100%;
  padding: 0;
  margin-top: 0px;
  border: 0;
}

iframe#ifr1 {
  width: 100%;
  height: 100%;
  padding: 0;
  margin-top: 0px;
  border: 0;
}

iframe#ifr2 {
  width: 100%;
  height: 50%;
  padding: 0;
  margin-top: 0px;
  border: 0;
}

iframe#ifr3 {
  width: 100%;
  height: 100%;
  padding: 0;
  margin-top: 0px;
  border: 0;
}

iframe#ifr4 {
  width: 100%;
  height: 100%;
  padding: 0;
  margin-top: 0px;
  border: 0;
}

iframe#ifr5 {
  width: 100%;
  height: 100%;
  padding: 0;
  margin-top: 0px;
  border: 0;
}

iframe#ifr6 {
  width: 100%;
  height: 100%;
  padding: 0;
  margin-top: 0px;
  border: 0;
}

button {
  /* ブラウザ特有のスタイルを無効に */
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;

  /* 整える */
  width: 60px;
  height: 30px;
  margin: 1em 0;
  /* 前後の隙間 */
  padding: 0.6em 1em;
  /* 塗りの余白 */
  font-size: 0.1em;
  /* フォントサイズ */
  background-color: #ffffff00;
  /* 背景色 */
  color: rgb(0, 0, 0);
  /* テキストカラー */
  cursor: pointer;
  /* カーソルを指マークに */
  border-radius: 3px;
  /* 角の丸み */
  border: 0;
  /* 枠線を消す */
  transition: 0.3s;
  /* ホバーの変化を滑らかに */
}

/* top.html */
#tabs {
  display: flex;
  justify-content: center;
  position: fixed;
  width: 100%;
  bottom: 0;
  /* タブを上に固定 */
  z-index: 1000;
  /* 適切な z-index の値を設定 */
  margin-bottom: 0px;
}

.tablink {
  flex: 1;
  text-align: center;
  height: 35px;
  margin: 0;
  padding: 5px;
  cursor: pointer;
  border-radius: 0px;
  background-color: black;
  color: #8a8a8a;
  border: 1px solid #8a8a8a;
  border-bottom: 2px solid #8a8a8a;
  font-size: 1em;
  font-family: 'hsr';
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  padding-bottom: 20px;
}

.tab-content img {
  margin-bottom: 20px;
  /* 余白を追加 */
}


table {
  border-collapse: collapse;
  width: 94%;
  margin: 3%;
}

td {
  border: 1px solid #000000;
  height: 18px;
}

tr {
  padding: 3px;
  height: 10px;
}

td:nth-child(1) {
  text-align: right;
  width: 55px;
  padding: 2px 4px 2px 0px;
}

td:nth-child(2) {
  text-align: left;
  width: 40px;
  padding: 2px 0px 2px 4px;
}

td:nth-child(3) {
  text-align: left;
  padding: 2px 2px 2px 4px;
  width: calc(100% - 95px);
}


#budget {
  border-collapse: collapse;
  width: 94%;
  margin: 3%;
}

#budget td {
  border: 1px solid #000000;
  height: 18px;
}

#budget tr {
  padding: 3px;
  height: 10px;
}

#budget td:nth-child(1) {
  text-align: right;
  width: 55px;
  padding: 2px 4px 2px 0px;
}

#budget td:nth-child(2) {
  text-align: left;
  width: calc(100% - 220px);
  padding: 2px 0px 2px 4px;
}

#budget td:nth-child(3) {
  text-align: right;
  padding: 2px 4px 2px 0px;
  width: 90px;
}

#budget td:nth-child(4) {
  text-align: right;
  padding: 2px 4px 2px 0px;
  width: 75px;
}

#budget tr:nth-child(even) td {
  background: #eeeeee;
}


.small-text {
  font-size: smaller;
}


input#i1 {
  height: 35px;
  margin: 0.1em 0;
  /* 前後の隙間 */
  padding: 0.6em 1em;
  /* 塗りの余白 */
  font-size: 1em;
  /* フォントサイズ */
  font-family: inherit;
  background-color: #ffffff00;
  /* 背景色 */
  color: rgb(255, 255, 255);
  /* テキストカラー */
  border-color: #ffffff;
}

input {
  height: 25px;
  margin: 0.1em 0;
  /* 前後の隙間 */
  padding: 0.3em 1em;
  /* 塗りの余白 */
  font-size: 0.8em;
  /* フォントサイズ */
  font-family: inherit;
  background-color: #ffffff00;
  /* 背景色 */
  color: rgb(255, 255, 255);
  /* テキストカラー */
  border-color: #ffffff;
}