@charset "utf-8";
/* ==========================================================================
   言語切り替えリンク（日本語ページ → 英語ページ）
   ヘッダー右上に配置する。英語ページ(en/index.html)の「Japanese」リンクと
   同じ見た目に揃えている（矢印付きテキストリンク・ホバーで矢印がスライド）。
   ========================================================================== */
.en_switch {
  position: absolute;
  right: 20px;
  top: 30px;
  z-index: 10;
  line-height: 1;
}
.en_switch_link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #005352;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  padding: 0 0 3px;
  border-bottom: solid 1px #9fcdc7;
  -webkit-transition: color .2s ease, border-color .2s ease;
  -o-transition: color .2s ease, border-color .2s ease;
  transition: color .2s ease, border-color .2s ease;
}
/* 文字が小さく指で押しにくいため、見た目は変えずにタップできる範囲を上下左右に広げる */
.en_switch_link {
  position: relative;
}
.en_switch_link::before {
  content: "";
  position: absolute;
  top: -14px;
  right: 0; /* 右はすぐ隣のハンバーガーボタンと重ならないよう広げない */
  bottom: -14px;
  left: -12px;
}
.en_switch_link svg {
  width: 15px;
  height: 15px;
  margin-left: 7px;
  -webkit-transition: -webkit-transform .2s ease;
  -o-transition: transform .2s ease;
  transition: transform .2s ease;
}
.en_switch_link:hover {
  color: #5fbdd3;
  border-bottom-color: #5fbdd3;
  text-decoration: none;
}
.en_switch_link:hover svg {
  -webkit-transform: translateX(4px);
  -ms-transform: translateX(4px);
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   スマートフォン
   ヘッダーが高さ70pxの固定バーになり、右端にハンバーガーメニューが出るため、
   その左隣に収まる位置・サイズにする。
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  /* ハンバーガーメニューのバー(.mean-bar / z-index:999999・横幅100%)が
     リンクの上に重なりタップできなくなるため、それより前面に出す */
  .en_switch {
    right: 58px;
    top: 24px;
    z-index: 1000000;
  }
  /* 狭い画面で会社名ロゴとリンクが重ならないよう、ロゴの幅を抑える */
  header h1 {
    max-width: calc(100vw - 170px);
  }
  header h1 img {
    max-width: 100%;
    height: auto;
  }
  .en_switch_link {
    font-size: 13px;
    padding: 0 0 2px;
  }
  .en_switch_link svg {
    width: 13px;
    height: 13px;
    margin-left: 5px;
  }
}
@media screen and (max-width: 360px) {
  .en_switch { right: 52px; }
  .en_switch_link { font-size: 12px; }
}