@charset "UTF-8";
/* ---------------------------- */
/* st-Header (Structure/Header) */
/* ---------------------------- */
.st-Header_Container {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center; }
  @media screen and (min-width: 1001px) {
    .st-Header_Container {
      -webkit-justify-content: flex-start;
              justify-content: flex-start; } }
  @media screen and (min-width: 481px) and (max-width: 1000px) {
    .st-Header_Container {
      -webkit-justify-content: space-between;
              justify-content: space-between; } }
  @media screen and (max-width: 480px) {
    .st-Header_Container {
      -webkit-justify-content: space-between;
              justify-content: space-between; } }

.st-Header_Navi {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center; }
  @media screen and (min-width: 1001px) {
    .st-Header_Navi {
      height: 3.7vw; } }
  @media screen and (min-width: 481px) and (max-width: 1000px) {
    .st-Header_Navi {
      width: 60vw;
      height: 9.2vw;
      -webkit-justify-content: flex-end;
              justify-content: flex-end; }
      .st-Header_Navi li {
        margin: 0 1vw; } }
  @media screen and (max-width: 480px) {
    .st-Header_Navi {
      width: 60vw;
      height: 16.5vw;
      -webkit-justify-content: flex-end;
              justify-content: flex-end; }
      .st-Header_Navi li {
        margin: 0 2vw; } }

/* ヘッダー下のボーダーライン */
.st-Header:after {
  width: 100%;
  content: "";
  display: block;
  background-color: #ff7f7f; }
  @media screen and (min-width: 1001px) {
    .st-Header:after {
      height: 0.25vw; } }
  @media screen and (min-width: 481px) and (max-width: 1000px) {
    .st-Header:after {
      height: 0.65vw; } }
  @media screen and (max-width: 480px) {
    .st-Header:after {
      height: 1.2vw; } }

/* ロゴマーク */
.st-Header_Logo {
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center; }
  @media screen and (min-width: 1001px) {
    .st-Header_Logo {
      width: 50vw;
      -webkit-justify-content: center;
              justify-content: center;
      margin-left: 6.5%; } }
  @media screen and (min-width: 481px) and (max-width: 1000px) {
    .st-Header_Logo {
      margin-left: 1vw; } }
  @media screen and (max-width: 480px) {
    .st-Header_Logo {
      padding-left: 2vw; } }

.st-Header_LogoImg {
  height: auto;
  opacity: 1;
  transition: all 0.2s ease; }
  @media screen and (min-width: 1001px) {
    .st-Header_LogoImg {
      width: 10.75vw; } }
  @media screen and (min-width: 481px) and (max-width: 1000px) {
    .st-Header_LogoImg {
      width: 27vw; } }
  @media screen and (max-width: 480px) {
    .st-Header_LogoImg {
      width: 42vw; } }

.st-Header_LogoImg-hover {
  opacity: 0.5;
  transition: all 0.2s ease; }

/* 会員登録ボタン */
@media screen and (min-width: 1001px) {
  .st-Header_SignUpButton {
    background-image: url(./img/img_hd_login_pctab.png);
    background-repeat: no-repeat;
    background-position: center center;
    padding: 1vw 7vw; } }
@media screen and (min-width: 481px) and (max-width: 1000px) {
  .st-Header_SignUpButton {
    background-image: url(./img/img_hd_login_pctab.png);
    background-repeat: no-repeat;
    background-position: center center;
    padding: 2vw 14vw; } }
@media screen and (max-width: 480px) {
  .st-Header_SignUpButton {
    display: none; } }

/* 会員登録ボタン */
@media screen and (min-width: 1001px) {
  .st-Header_MyPageButton {
    padding: 0.2vw 1.2vw; } }
@media screen and (min-width: 481px) and (max-width: 1000px) {
  .st-Header_MyPageButton {
    padding: 0.4vw 3vw; } }
@media screen and (max-width: 480px) {
  .st-Header_MyPageButton {
    display: none; } }

/* 会員登録ボタン */
@media screen and (min-width: 1001px) {
  .st-Header_MyPageButton_Menu {
    margin: 0.6vw auto;
    padding: 0.2vw 4.4vw; } }
@media screen and (min-width: 481px) and (max-width: 1000px) {
  .st-Header_MyPageButton_Menu {
    margin: 1.6vw auto;
    padding: 0.4vw 8vw; } }
@media screen and (max-width: 480px) {
  .st-Header_MyPageButton_Menu {
    margin: 1.8vw auto;
    padding: 0.4vw 14vw; } }

@media screen and (min-width: 1001px) {
  .st-Header_SignUpButton-sp {
    display: none; } }
@media screen and (min-width: 481px) and (max-width: 1000px) {
  .st-Header_SignUpButton-sp {
    display: none; } }
@media screen and (max-width: 480px) {
  .st-Header_SignUpButton-sp {
    background-image: url(./img/img_hd_login_sp.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 60%;
    display: block;
    padding: 5vw 6vw;
    width: 28vw; } }

@media screen and (min-width: 1001px) {
  .st-Header_MyPageButton-sp {
    display: none; } }
@media screen and (min-width: 481px) and (max-width: 1000px) {
  .st-Header_MyPageButton-sp {
    display: none; } }
@media screen and (max-width: 480px) {
  .st-Header_MyPageButton-sp {
    display: block;
    padding: 1.6vw 2.2vw; } }

/* ログインボタン */
@media screen and (min-width: 1001px) {
  .st-Header_LoginButton {
    padding: 0.2vw 1.2vw; } }
@media screen and (min-width: 481px) and (max-width: 1000px) {
  .st-Header_LoginButton {
    padding: 0.4vw 3vw; } }
@media screen and (max-width: 480px) {
  .st-Header_LoginButton {
    display: none; } }

/* ログインボタン */
@media screen and (min-width: 1001px) {
  .st-Header_LogoutButton {
    background-image: url(./img/img_hd_logout_pctabsp.png);
    background-repeat: no-repeat;
    background-position: center center;
    padding: 1vw 5vw; } }
@media screen and (min-width: 481px) and (max-width: 1000px) {
  .st-Header_LogoutButton {
    background-image: url(./img/img_hd_logout_pctabsp.png);
    background-repeat: no-repeat;
    background-position: center center;
    padding: 2vw 10vw; } }
@media screen and (max-width: 480px) {
  .st-Header_LogoutButton {
    display: none; } }

@media screen and (min-width: 1001px) {
  .st-Header-loggedOut,
  .st-Header-loggedIn {
    margin-right: 0.9em; } }

@media screen and (min-width: 1001px) {
  .st-Header_LoginButton-sp {
    display: none; } }
@media screen and (min-width: 481px) and (max-width: 1000px) {
  .st-Header_LoginButton-sp {
    display: none; } }
@media screen and (max-width: 480px) {
  .st-Header_LoginButton-sp {
    display: block;
    padding: 1.6vw 1.8vw; } }

@media screen and (min-width: 1001px) {
  .st-Header_LogoutButton-sp {
    display: none; } }
@media screen and (min-width: 481px) and (max-width: 1000px) {
  .st-Header_LogoutButton-sp {
    display: none; } }
@media screen and (max-width: 480px) {
  .st-Header_LogoutButton-sp {
    background-image: url(./img/img_hd_logout_pctabsp.png);
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    padding: 5vw 6vw;
    width: 28vw; } }

/* メニューボタン */
@media screen and (min-width: 1001px) {
  .st-Header_MenuButtonOpen {
    padding: 0.4vw 0.4vw; } }
@media screen and (min-width: 481px) and (max-width: 1000px) {
  .st-Header_MenuButtonOpen {
    padding: 1vw 1.1vw; } }
@media screen and (max-width: 480px) {
  .st-Header_MenuButtonOpen {
    padding: 1.6vw 1.8vw; } }

@media screen and (min-width: 1001px) {
  .st-Header_MenuButtonClose {
    padding: 0.4vw 0.48vw; } }
@media screen and (min-width: 481px) and (max-width: 1000px) {
  .st-Header_MenuButtonClose {
    padding: 1vw 1.2vw; } }
@media screen and (max-width: 480px) {
  .st-Header_MenuButtonClose {
    padding: 1.6vw 2vw; } }

.st-Header_MenuButton {
  background: white;
  transition: all 0.2s; }

.st-Header_MenuButtonOpen {
  display: block; }

.st-Header_MenuButtonClose {
  display: none;
  position: fixed; }

@media screen and (min-width: 1001px) {
  .st-Header .sw-ButtonR,
  .st-Header .sw-ButtonG,
  .st-Header .sw-ButtonB,
  .st-Header .sw-Button {
    font-size: 0.8em;
    border-width: 3px; } }
@media screen and (min-width: 481px) and (max-width: 1000px) {
  .st-Header .sw-ButtonR,
  .st-Header .sw-ButtonG,
  .st-Header .sw-ButtonB,
  .st-Header .sw-Button {
    font-size: 2vw;
    border-width: 4px; } }
@media screen and (max-width: 480px) {
  .st-Header .sw-ButtonR,
  .st-Header .sw-ButtonG,
  .st-Header .sw-ButtonB,
  .st-Header .sw-Button {
    font-size: 5vw;
    border-width: 5px; } }