@charset "UTF-8";

/* other */

@media screen and (max-width: 1210px) {
  /*メニュー部分*/
  .ham-menu {
      background-color: #fff; /*メニュー背景色*/
      box-sizing: border-box;
      padding: 10px 20px; /*メニュー内部上下左右余白*/
      max-height: 90%;
      position: fixed;
      right: -270px; /*メニュー横幅①と合わせる*/
      top: 0;
      transition: transform 0.3s linear 0s; /*0.3s は変化するのにかかる時間*/
      -webkit-transition: transform 0.3s linear 0s;
      -moz-transition: transform 0.3s linear 0s;
      width: 270px; /*メニュー横幅①*/
      z-index: 200;
  }

  /*メニューアイコン部分は疑似要素で*/
  .ham-menu::before {
      background-color: #fff; /*ボタン部分背景色*/
      border-radius: 0 0 0 10px; /*左下角丸*/
      color: #333; /*アイコン（フォント）色*/
      content: "≡"; /*メニューアイコン*/
      display: block;
      font-size: 50px; /*アイコン（フォント）サイズ*/
      height: 50px;
      line-height: 50px; /*縦位置中央化*/
      position: absolute;
      right: 100%;
      text-align: center;
      top: 0;
  }

  /*透過背景部分*/
  .menu-background {
      background-color: #333; /*黒背景部分背景色*/
      display: block;
      height: 100%;
      opacity: 0;
      position: fixed;
      right: 0;
      top: 0;
      transition: all 0.3s linear 0s; /*0.3s は変化するのにかかる時間*/
      -webkit-transition: all 0.3s linear 0s;
      -moz-transition: all 0.3s linear 0s;
      width: 100%;
      z-index: -1;
  }
  
  /*hover 時の処理*/
  .ham-menu:hover {
      transform: translate(-270px); /*メニュー横幅①と合わせる*/
      -webkit-transform: translate(-270px);  
      -moz-transform: translate(-270px);
  }
  
  .ham-menu:hover + .menu-background {
      opacity: 0.5; /*黒背景部分透過度*/
      z-index: 199;
  }

  .ham-content{
    max-height: 85vh;
    overflow: auto;
  }

  /*文字中央表示*/
  .ham-text {
      vertical-align: middle;
      padding-left: 5px;
  }

  .ham-img {
      vertical-align: middle;
  }

  /*リストの行間*/
  .ham-list {
    line-height: 2.2;
  }

  .ham-menu ul {
    padding: 0px;
    margin: 0px;
    margin-block-end: 1em;
  }

}

/* pc */
@media screen and (min-width: 1211px) {
  .ham-menu {
      display:none;
  }
}

.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger {
  position: relative;
  width: 50px;
  height: 44px;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #fff;
  border-radius: 4px;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 20px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}

.subTitle {
  font-size: 20pt;
  font-weight: bold;
  color: #222266;
}

.subsubTitle {
  font-size: large;
  font-weight: bold;
  color: #222266;
}

.subTitle_EN {
  font-size: 10pt;
  font-weight: normal;
  padding-left: 10px;
}

.subTitle_line {
  background-color: #222266;
  width: 100%;
  height: 1px;
  margin-bottom: 10px;
}