html {
  scroll-behavior: smooth;
}

#wrap {
  > center {
    > table {
      > tbody {
        > tr {
          > td {
						padding-top:2px;
            vertical-align: top;
						> img {
              margin-top: 3px;
            }
          }
        }
      }
    }
  }
}
#hagakisakka {
  display: flex;
  flex-direction: column;
  gap: 16px 0;
  width: 650px;
  margin: 24px auto;

  #hagakiMenu {
    display: flex;
    justify-content: space-between;
    > label {
      cursor: pointer;
      &:has([value="hagakiIndex"]) {
        background: url(img/gn_01_off.gif) no-repeat transparent;
      }
      &:has([value="hagakiSpec"]) {
        background: url(img/gn_03_off.gif) no-repeat transparent;
      }
      &:has([value="hagakiDl"]) {
        background: url(img/gn_04_off.gif) no-repeat transparent;
      }
      &:has([value="hagakiBuy"]) {
        background: url(img/gn_05_off.gif) no-repeat transparent;
      }
      &:has(:checked) {
        > img {
          visibility: hidden;
        }
      }
      input {
        display: none;
      }
    }
  }
  #hagakiMain {
    > div {
      display: none;
    }
  }
  &:has([value="hagakiIndex"]:checked) {
    #hagakiMain {
      #hagakiIndex {
        display: block;
      }
    }
  }
  &:has([value="hagakiSpec"]:checked) {
    #hagakiMain {
      #hagakiSpec {
        display: block;
      }
    }
  }
  &:has([value="hagakiDl"]:checked) {
    #hagakiMain {
      #hagakiDl {
        display: block;
      }
    }
  }
  &:has([value="hagakiBuy"]:checked) {
    #hagakiMain {
      #hagakiBuy {
        display: block;
      }
    }
  }
  a:hover {
    color: #ff0000;
  }
  a:link {
    color: #006699;
  }
  .p10 {
    font-size: 10px;
  }
  .p10-120 {
    font-size: 10px;
    line-height: 120%;
  }
  .p10-150 {
    font-size: 10px;
    line-height: 150%;
  }
  .p12 {
    font-size: 12px;
  }
  .p12-110 {
    font-size: 12px;
    line-height: 110%;
  }
  .p12-120 {
    font-size: 12px;
    line-height: 120%;
  }
  .p12-140 {
    font-size: 12px;
    line-height: 140%;
  }
  .p12-150 {
    font-size: 12px;
    line-height: 150%;
  }
  .p14 {
    font-size: 14px;
  }
  .p14-110 {
    font-size: 14px;
    line-height: 110%;
  }
  .p14-120 {
    font-size: 14px;
    line-height: 120%;
  }
  .p14-140 {
    font-size: 14px;
    line-height: 140%;
  }
  .p14-150 {
    font-size: 14px;
    line-height: 150%;
  }
  .p16 {
    font-size: 16px;
  }
  .p16-110 {
    font-size: 16px;
    line-height: 110%;
  }
  .p16-120 {
    font-size: 16px;
    line-height: 120%;
  }
  .p16-140 {
    font-size: 16px;
    line-height: 140%;
  }
  .p16-150 {
    font-size: 16px;
    line-height: 150%;
  }
  .verup_back {
    font-size: 12px;
    color: #333333;
    background-image: url(img/bg_bar.gif);
    background-repeat: no-repeat;
    background-color: #ffffff;
  }

  li {
    list-style-image: url("img/listmark.png");
  }
}