/* 旅行者の駅 ヘッダー整理 v2.5.1
   PCは1行固定。中間幅では無理に折り返さずハンバーガーへ切替。 */

.ts-header-inner{
  gap:16px;
}

.ts-brand{
  flex:0 0 auto;
}

.ts-nav{
  flex:0 0 auto;
  gap:16px;
  white-space:nowrap;
}

.ts-nav a{
  font-size:.82rem;
  white-space:nowrap;
  line-height:1.2;
}

.ts-nav .ms-nav-link{
  padding:8px 12px!important;
  border-radius:999px;
  background:#f0f8fc;
  border-color:#d4e6ef;
  color:#12658f;
}

.ts-search-mini{
  flex:0 1 220px;
  width:220px;
  min-width:170px;
  max-width:220px;
}

.ts-search-mini input{
  font-size:.82rem;
}

/* 1200px前後では文字を2行にせず、コンパクトメニューへ */
@media(max-width:1200px){
  .ts-nav,
  .ts-search-mini{
    display:none!important;
  }
  .ts-mobile-menu{
    display:block!important;
    margin-left:auto;
  }
}

/* 広いPCでは余裕を持って1行表示 */
@media(min-width:1201px){
  .ts-mobile-menu{
    display:none!important;
  }
}

/* モバイルメニューを少し見やすく */
.ts-mobile-panel{
  z-index:100;
}

.ts-mobile-panel a{
  display:block;
  white-space:nowrap;
}

.ts-mobile-panel a[data-my-station-link]{
  margin-top:6px;
  border-top:1px solid #e3edf3;
  padding-top:14px;
  color:#12658f;
}

/* v2.5.5: マイ駅は画面幅に関係なく常時アクセス可能 */
.ts-my-station-mobile{
  display:none;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-height:42px;
  padding:8px 12px!important;
  border:1px solid #cfe1eb;
  border-radius:999px;
  background:#eef8fc;
  color:#12658f!important;
  text-decoration:none;
  font-size:.78rem;
  font-weight:800;
  white-space:nowrap;
  margin-left:auto;
}

@media(max-width:1200px){
  .ts-my-station-mobile{
    display:inline-flex!important;
  }
  .ts-mobile-menu{
    margin-left:4px!important;
  }
}

@media(max-width:430px){
  .ts-my-station-mobile{
    min-height:40px;
    padding:7px 10px!important;
    font-size:.73rem;
  }
}

/* v2.5.6 mobile/tablet header stabilization */
@media(max-width:1200px){
  .ts-header-inner{
    display:flex!important;
    align-items:center!important;
    min-height:72px!important;
    padding:0 14px!important;
    gap:8px!important;
    position:relative!important;
  }

  .ts-brand{
    flex:0 1 auto!important;
    min-width:0!important;
    margin-right:auto!important;
  }

  .ts-brand strong{
    white-space:nowrap!important;
  }

  .ts-nav,
  .ts-search-mini{
    display:none!important;
  }

  .ts-my-station-mobile{
    display:inline-flex!important;
    margin-left:auto!important;
    order:2!important;
    position:static!important;
    z-index:41!important;
  }

  .ts-mobile-menu{
    display:block!important;
    position:relative!important;
    margin-left:0!important;
    order:3!important;
    flex:0 0 auto!important;
    z-index:50!important;
  }

  .ts-mobile-menu > summary,
  .ts-mobile-trigger{
    position:relative!important;
    z-index:52!important;
  }

  .ts-mobile-panel{
    position:absolute!important;
    top:calc(100% + 10px)!important;
    right:0!important;
    left:auto!important;
    width:min(320px,calc(100vw - 24px))!important;
    max-height:calc(100vh - 120px)!important;
    overflow:auto!important;
    margin:0!important;
    padding:10px!important;
    border:1px solid #d8e6ee!important;
    border-radius:16px!important;
    background:#fff!important;
    box-shadow:0 18px 45px rgba(16,63,95,.18)!important;
    transform:none!important;
    z-index:51!important;
  }

  .ts-mobile-panel a{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:12px 13px!important;
    border-radius:10px!important;
    background:transparent!important;
    color:#183344!important;
    text-decoration:none!important;
    font-size:.93rem!important;
    line-height:1.35!important;
    white-space:normal!important;
  }

  .ts-mobile-panel a:hover{
    background:#f3f8fb!important;
  }

  .ts-mobile-panel a[data-my-station-link]{
    margin-top:6px!important;
    padding-top:12px!important;
    border-top:1px solid #e4edf2!important;
    color:#12658f!important;
    font-weight:800!important;
  }
}

@media(max-width:520px){
  .ts-header-inner{
    min-height:66px!important;
  }
  .ts-brand small{
    display:none!important;
  }
  .ts-my-station-mobile{
    min-height:38px!important;
    padding:7px 9px!important;
    font-size:.72rem!important;
  }
}

/* Prevent opened mobile menu from changing document flow */
.ts-mobile-panel{
  box-sizing:border-box!important;
}