/*
 * DEV2024-823 Stage 1: surfsnow.jp から移植したSPヘッダー/フッターCSS（振る舞い変更ゼロ）
 * 元: markup-surf の global_parts_responsive.css の @media (max-width:640px) 区間から、
 * .pcOnly/.spOnly（legacy-global.cssへ移動済み・重複のため除去）を除いたもの。
 * url()は2箇所とも /legacy/global_header/ への絶対パスに書き換え済み。
 * mm-*プレフィックスのmmenu向けルールはStage 3でMobileDrawerに置き換えたため削除済み
 * (src/app/mobile-drawer.cssへ移行)。
 */
@media screen and (max-width: 640px) {

  body {
    background: #fff;
  }

  #header {
    padding: 0 20px;
    position: relative;
    width: initial !important;
    /* box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); */
    height: 58px;
    overflow: hidden;
    background: #fff;
    font-family: "roboto", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro",
      "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    margin: 0;
  }

  #ssHeaderLogo {
    margin: 22px 0 0;
  }
  #ssHeaderLogo a {
    background: url(/legacy/global_header/surf_logo.webp) no-repeat;
    width: 130px;
    height: 17px;
    text-indent: -9999px;
    -webkit-background-size: 100% 100% !important;
    -moz-background-size: 100% 100% !important;
    background-size: 100% 100% !important;
  }

  #ssHeaderLogo a {
    display: block;
    vertical-align: middle;
    outline: none;
  }

  @-moz-document url-prefix() {
    #ssHeaderLogo {
      width: 0;
    }
  }

  #header .ssHeaderMenu {
    position: absolute;
    top: 18px;
    right: 20px;
    margin: 0;
  }
  .ssHeaderMenu li {
    text-align: center;
    height: 25px;
    display: table;
    vertical-align: middle;
    overflow: hidden;
    float: left;
  }
  .ssHeaderMenu li#ssLangbtn {
    margin: 0 15px 0 0;
  }
  .ssHeaderMenu li#ssUserbtn {
    margin: 0 15px 0 0;
  }
  .ssHeaderMenu li#ssMenubtn {
  }
  .ssHeaderMenu li a {
    display: block;
    overflow: hidden;
    height: 25px;
  }
  .ssHeaderMenu li svg {
    width: 25px;
    height: 25px;
  }

  #langmenu {
    display: none;
    position: absolute;
    top: 59px;
    left: 0;
    z-index: 9999;
    width: 100%;
    background: #333;
    padding: 20px 0;
  }
  #langmenu li {
    padding: 0 20px;
  }
  #langmenu li a {
    padding: 15px 0;
    display: block;
    color: #fff;
    line-height: 1;
  }

  .breadcrumb {
    display: none;
  }
  .footer {
    font-family: "Quicksand", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro",
      "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  }

  .footer a {
    font-size: 14px;
  }
  .page__top {
    display: none;
  }

  .footer .footer__container {
    font-size: 11px;
    text-align: center;
    margin: 0 auto !important;
    background: #424242 url(/legacy/global_header/mountain.webp) no-repeat center top !important;
    background-size: 190px !important;
    border-top: 1px solid #424242;
    clear: both;
    width: 100%;
  }
  .footer .footer__container div {
    background: #fff;
    color: #333;
    margin: 30px 0 0;
    height: 100px;
    min-width: 100%;
    padding: 10px 0;
  }
  .footer__container a {
    color: #333;
    margin: 20px 0 0;
    display: inline-block;
  }
  .footer__container a::before {
    display: none;
  }

  .footer__copy {
    padding: 5px 0 50px;
    background: #fff;
    color: #333;
  }

  /* ヘッダーゲレポンボタン */
  #header:has(#ssGereponbtn) {
    position: static;
  }
  #ssGereponbtn {
    overflow: visible;
  }
  #ssGereponbtn .gerepon_tooltip img {
    width: 25px;
    height: 25px;
  }
  .ssHeaderMenu li a.gerepon_tooltip {
    position: relative;
    cursor: pointer;
    overflow: visible;
  }
  .gerepon_tooltip_text {
    z-index: 1000;
    opacity: 1;
    visibility: visible;
    position: absolute;
    top: -10px;
    left: -80px;
    transform: translateX(-50%);
    display: inline-block;
    padding: 5px;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.3;
    background: #333;
    color: #fff;
    border-radius: 3px;
    transition: 0.3s ease-in;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    &:before {
        content: '';
        position: absolute;
        top: 15px;
        left: 143px;
        border: 7px solid transparent;
        border-top: 7px solid #333;
        margin-left: -7px;
        transform: rotateZ(270deg);
    }
  }
}