@charset "UTF-8";
/*Accodion*/
.HeaderAcc {
  display: none; }
  .HeaderAcc__item {
    border-top: 1px solid #e6e6e6; }
    .HeaderAcc__item .GlobalNav__link {
      color: #fff;
      text-align: center; }
  @media screen and (max-width: 640px) {
    .HeaderAcc__item {
      border-top: 1px solid #e6e6e6; }
      .HeaderAcc__item .GlobalNav__link {
        color: #333;
        text-align: center; } }

.Header {
  position: absolute;
  width: 100%;
  line-height: 1;
  z-index: 999;
  background: transparent;
  padding: 0 20px 17px;
  z-index: 1;
  top: 0; }
  @media screen and (min-width: 641px) and (max-width: 999px) {
    .Header {
      background-size: 1300px 2vw;
      padding: 0 2vw 2vw; } }
  @media screen and (max-width: 640px) {
    .Header {
      width: 100%;
      padding: 0;
      top: 0;
      position: fixed;
      margin-top: 0;
      z-index: 999; }
      .Header.open {
        background: #fff; } }
  .Header.fixed {
    margin-top: 0;
    top: 0;
    position: fixed;
    transition: top 0.65s ease-in;
    -webkit-transition: top 0.65s ease-in;
    -moz-transition: top 0.65s ease-in;
    z-index: 999; }
    @media screen and (min-width: 641px) and (max-width: 999px) {
      .Header.fixed {
        background-size: 1300px 19%;
        padding: 0 2vw 1.6%; } }
    @media screen and (max-width: 640px) {
      .Header.fixed {
        padding-top: 0; }
        .Header.fixed.open {
          background: #fff; } }
  @media screen and (max-width: 640px) {
    .Header.bg {
      background: #fff; } }
  .HeaderBg {
    padding: 45px 0 24px; }
    .Header.fixed .HeaderBg {
      padding: 10px 0; }
      @media screen and (max-width: 640px) {
        .Header.fixed .HeaderBg {
          padding: 0; } }
    @media screen and (min-width: 641px) and (max-width: 999px) {
      .HeaderBg {
        padding: 4vw 0 1vw; } }
    @media screen and (max-width: 640px) {
      .HeaderBg {
        padding: 0; } }
  @media screen and (max-width: 640px) {
    .Header__logo {
      width: 36%;
      margin: 0 0 0 12.5%;
      padding: 5.2% 0 0; } }
  .Header__Login {
    position: absolute;
    width: 36%;
    padding: 20px 20px 10px;
    background: #8fd1d1;
    top: -170%;
    right: -436%;
    border-radius: 5px;
    box-sizing: content-box; }
    @media screen and (max-width: 640px) {
      .Header__Login {
        width: 11vw;
        top: 0;
        right: 21%;
        margin: 0 0 0 0;
        padding: 3.5vw;
        border-radius: 0; } }
  .Header__inner {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    @media screen and (max-width: 640px) {
      .Header__inner {
        width: 100%;
        padding: 0;
        display: block; } }
    .Header__inner--sp {
      position: relative;
      flex: 0 1 18.6%; }
      .Header.fixed .Header__inner--sp {
        margin: 0; }
      @media screen and (max-width: 640px) {
        .Header__inner--sp {
          width: 100%;
          height: 17.2vw;
          z-index: 999;
          position: relative; }
          .open .Header__inner--sp {
            border-bottom: 1px solid #e6e6e6; } }
  .HeaderBorder--sp {
    display: none;
    position: absolute;
    right: 6.4vw;
    top: 5.9vw;
    width: 8.5vw;
    height: 6.5vw;
    cursor: pointer;
    z-index: 101; }
    @media screen and (max-width: 640px) {
      .HeaderBorder--sp {
        display: block; } }
  .HeaderBorder__inner {
    position: relative; }
  .HeaderBorder__item {
    display: block;
    position: absolute;
    height: 1px;
    width: 100%;
    background: #999999;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out; }
    @media screen and (max-width: 640px) {
      .open .HeaderBorder__item {
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg); } }
    .HeaderBorder__item--01 {
      top: 0; }
      @media screen and (max-width: 640px) {
        .open .HeaderBorder__item--01 {
          top: 3vw; } }
    .HeaderBorder__item--02 {
      top: 3.2vw; }
      @media screen and (max-width: 640px) {
        .open .HeaderBorder__item--02 {
          width: 0;
          left: 50%; } }
    .HeaderBorder__item--07 {
      top: 3.2vw; }
      @media screen and (max-width: 640px) {
        .open .HeaderBorder__item--07 {
          width: 0;
          left: 50%; } }
    .HeaderBorder__item--03 {
      top: 6.4vw; }
      @media screen and (max-width: 640px) {
        .open .HeaderBorder__item--03 {
          top: 3vw;
          -webkit-transform: rotate(-315deg);
          -moz-transform: rotate(-315deg);
          transform: rotate(-315deg); } }

.GlobalNav {
  width: 75.8%;
  margin: 13px 0 0 auto;
  padding: 0 0.4% 0 0; }
  @media screen and (max-width: 640px) {
    .GlobalNav {
      position: absolute;
      /* 開いてないときは画面外に配置 */
      top: -200vw;
      width: 100%;
      padding: 0;
      margin: 0;
      -webkit-transition: .5s ease-in-out;
      -moz-transition: .5s ease-in-out;
      transition: .5s ease-in-out;
      opacity: 0; } }
  .GlobalNav__items {
    display: flex;
    justify-content: space-between;
    padding: 0 4px 0 0; }
    @media screen and (max-width: 640px) {
      .GlobalNav__items {
        position: static;
        display: block;
        background: #fff;
        padding: 0; } }
  .GlobalNav__item {
    flex: 0 1 16.5%; }
    @media screen and (max-width: 640px) {
      .GlobalNav__item {
        border: none;
        float: none;
        position: static;
        flex: 0 1 28.8%;
        margin: 0;
        border-bottom: 1px solid #e6e6e6; } }
    .GlobalNav__item--02 {
      position: relative;
      flex: 0 1 9.2%; }
    .GlobalNav__item--03 {
      flex: 0 1 13.3%; }
    .GlobalNav__item--04 {
      flex: 0 1 14.4%; }
      .GlobalNav__item--04 a {
        padding: 0 0 10px 0; }
        @media screen and (max-width: 640px) {
          .GlobalNav__item--04 a {
            padding: 4.5% 42% 4.1% 6%; } }
    .GlobalNav__item--05 {
      flex: 0 1 12.5%; }
    .GlobalNav__item--06 {
      display: none; }
      @media screen and (max-width: 640px) {
        .GlobalNav__item--06 {
          display: block; } }
    .GlobalNav__item--07 {
      flex: 0 1 13.9%;
      position: relative; }
      .GlobalNav__item--07 span {
        padding: 0 0 10px 0;
        cursor: pointer; }
        @media screen and (max-width: 640px) {
          .GlobalNav__item--07 span {
            padding: 7.2% 35.5% 7.2% 5.9%; } }
      @media screen and (min-width: 641px) {
        .GlobalNav__item--07:hover ul {
          display: block;
          position: absolute;
          background-color: #8FD1D1;
          width: 165px;
          right: 0px;
          left: -30px;
          top: 55px;
          margin: 0 auto;
          border-radius: 5px; }
          .GlobalNav__item--07:hover ul::before {
            position: absolute;
            content: "";
            border-right: 10px solid transparent;
            border-bottom: 15px solid #8FD1D1;
            border-left: 10px solid transparent;
            left: 0;
            right: 0;
            margin: 0 auto;
            top: -10px;
            width: 0; } }
    @media screen and (min-width: 641px) and (min-width: 641px) and (max-width: 999px) {
      .GlobalNav__item--07:hover ul::before {
        top: -1vw;
        border-right: 1vw solid transparent;
        border-bottom: 1.5vw solid #8FD1D1;
        border-left: 1vw solid transparent; } }
  @media screen and (min-width: 641px) and (min-width: 641px) and (max-width: 999px) {
    .GlobalNav__item--07:hover ul {
      left: -3vw;
      top: 5.5vw;
      width: 16.5vw;
      border-radius: .5vw; } }
      @media screen and (min-width: 641px) {
          .GlobalNav__item--07:hover ul li {
            margin: 0 auto;
            width: 90%;
            border-bottom: solid 1px #fff; }
            .GlobalNav__item--07:hover ul li:last-child {
              border-bottom: none; }
            .GlobalNav__item--07:hover ul li a {
              padding: 13px 2px 7px; } }
      @media screen and (min-width: 641px) and (min-width: 641px) and (max-width: 999px) {
        .GlobalNav__item--07:hover ul li a {
          padding: 1.3vw .2vw .7vw; } }
      @media screen and (min-width: 641px) {
        .GlobalNav__item--07 .GlobalNav__link::after {
          content: none; } }
  .GlobalNav__link {
    position: relative;
    display: inline-block;
    padding: .4em;
    text-decoration: none;
    padding: 13px 2px 10px;
    width: 100%; }
    .GlobalNav__link:hover {
      opacity: 1; }
    .GlobalNav__link::after {
      content: '';
      position: absolute;
      bottom: 7%;
      left: 0;
      width: 100%;
      height: 1px;
      transform: scaleX(0);
      background-color: #333333;
      transition: all .3s ease; }
    .GlobalNav__link:hover::after {
      transform: scaleX(1); }
    .GlobalNav__link .active::after {
      transform: scaleX(1); }
      @media screen and (max-width: 640px) {
        .GlobalNav__link .active::after {
          transform: scaleX(0); } }
    @media screen and (max-width: 640px) {
      .GlobalNav__link {
        width: 100%;
        display: block;
        padding: 5.5% 37.9% 5.1% 6%;
        box-sizing: border-box;
        position: relative; }
        .GlobalNav__link::after {
          content: "\f105";
          position: absolute;
          font-family: FontAwesome;
          top: 50%;
          margin: -2.8vw 0 0;
          font-size: 5vw;
          transform: scaleX(1);
          left: auto;
          right: 2%;
          width: 5vw;
          height: 5vw;
          background: #fff;
          line-height: 1;
          color: #333; }
        .GlobalNav__link--02::before, .GlobalNav__link--07::before {
          position: absolute;
          font-family: FontAwesome;
          top: 50%;
          left: auto;
          background: #fff;
          line-height: 1; }
        .GlobalNav__link--02::before, .GlobalNav__link--02::after, .GlobalNav__link--07::before, .GlobalNav__link--07::after {
          content: "";
          height: 0.4vw;
          background: #333;
          right: 5%;
          width: 3vw;
          margin: -0.3vw 0 0; }
        .GlobalNav__link--02::after, .GlobalNav__link--07::after {
          -webkit-transform: rotate(90deg) !important;
          -moz-transform: rotate(90deg) !important;
          transform: rotate(90deg) !important; }
        .GlobalNav__link--02.open::before, .GlobalNav__link--07.open::before {
          display: none; }
        .GlobalNav__link--02.open::after, .GlobalNav__link--07.open::after {
          -webkit-transform: rotate(0deg) !important;
          -moz-transform: rotate(0deg) !important;
          transform: rotate(0deg) !important; }
        .GlobalNav__link--close {
          padding: 6.7% 43.7% 6.7% 43.4%;
          position: relative; }
          .GlobalNav__link--close:hover::after {
            -webkit-transform: rotate(-315deg);
            -moz-transform: rotate(-315deg);
            transform: rotate(-315deg); }
          .GlobalNav__link--close::before, .GlobalNav__link--close::after {
            content: "";
            position: absolute;
            background: #999999;
            right: 3.6%;
            top: 49%;
            margin: 0.5vw 0 0;
            width: 6vw;
            height: 0.2vw;
            display: block;
            transform: scaleX(1);
            left: auto;
            -webkit-transform: rotate(315deg);
            -moz-transform: rotate(315deg);
            transform: rotate(315deg); }
          .GlobalNav__link--close::after {
            -webkit-transform: rotate(-315deg);
            -moz-transform: rotate(-315deg);
            transform: rotate(-315deg); } }
  .open .GlobalNav {
    -moz-transform: translateY(217.1vw);
    -webkit-transform: translateY(217.1vw);
    transform: translateY(217.1vw);
    overflow-y: scroll;
    opacity: 1; }

.l-underlayer .Header {
  position: static;
  margin: 0 0 23px; }
  @media screen and (min-width: 641px) and (max-width: 999px) {
    .l-underlayer .Header {
      margin: 0 0 2.3vw; } }
  @media screen and (max-width: 640px) {
    .l-underlayer .Header {
      margin: 0;
      position: fixed;
      background: #fff; } }
@media screen and (max-width: 640px) {
  .l-underlayer .Header__inner--sp {
    background: #fff;
    box-shadow: 1px 1px 3px #ccc; } }