/* ==========================================================================
   新デザインのヘッダー（header.php共通）
   header-sakaitop-test.php / sakaitop-test.css での検証を経て、
   header.phpに直接統合したもの。
   ========================================================================== */

/* ハンバーガーボタン。#gh-content直下（.topmainmenu_bgの外）に置くことで、
   .topmainmenu_bgのposition:absolute+z-index:10によるスタッキングコンテキストの
   影響を受けないようにしている（.mobilemenuのz-index:100より確実に手前に出すため） */
.menubutton{
  display:flex !important;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  width:30px;
  flex:none;
  cursor:pointer;
  position:fixed;
  top:20px;
  right:20px;
  z-index:1000;
}
.menubutton div{
  margin:0 0 0 auto !important;
  transition:transform .3s, opacity .3s;
}
/* メニューが開いている間、ハンバーガーの3本線を×に変形させる。
   is-openクラスの付け外しはstatic/js/base.jsのクリック処理で行っている */
.menubutton.is-open div:nth-child(1){
  transform:translateY(12px) rotate(45deg);
}
.menubutton.is-open div:nth-child(2){
  opacity:0;
}
.menubutton.is-open div:nth-child(3){
  transform:translateY(-12px) rotate(-45deg);
}

/* ハンバーガーの左隣に表示するアカウント/カートアイコン（旧.topmenu-rの代わり） */
.newHeaderIcons{
  position:fixed;
  top:25px;
  right:80px;
  display:flex;
  align-items:center;
  gap:16px;
  z-index:1000;
}
@media screen and (max-width:850px){
  .newHeaderIcons{
    top:20px;
    right:70px;
    gap:12px;
  }
}
.headerIcon{
  display:inline-flex;
  color:#1e3d71;
  transition:opacity .3s;
}
.headerIcon:hover{
  opacity:.6;
}
.headerIcon__svg{
  width:30px;
  height:30px;
  display:block;
}
/* user.svgはcart.svgよりviewBoxが縦長（絵柄が箱いっぱいに近い）なため、
   同じ30pxの箱でもアカウントアイコンだけ一回り大きく見える。少しだけ縮小する。 */
.headerIcon__svg--user{
  width:26px;
  height:26px;
}
@media screen and (max-width:850px){
  .headerIcon__svg{
    width:24px;
    height:24px;
  }
  .headerIcon__svg--user{
    width:21px;
    height:21px;
  }
}

/* ロゴ下の縦書きメインメニュー（トップページのみ表示、header.php側でis_home()||is_front_page()により出し分け） */
.newMainmenuList{
  display:block;
  width:auto;
  border-top:1px solid #00a6c4;
  border-bottom:1px solid #00a6c4;
  padding: 40px 0;
}
.newMainmenuList__nav{
  display:flex;
  flex-direction:row-reverse;
  justify-content:center;
  gap:18px;
  list-style:none;
  margin:0;
  padding:0;
  height:205px;
}
.newMainmenuList__nav li{
  writing-mode:vertical-rl;
  text-orientation:upright;
}
.newMainmenuList__nav a{
  color:#707070;
  font-size:16px;
  font-family:'Shippori Mincho',YakuHanMP,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","游明朝",YuMincho,serif;
  font-weight: bold;
  letter-spacing:.05em;
  transition:opacity .3s;
}
.newMainmenuList__nav a:hover{
  opacity:.6;
}
/* newMainmenuList（縦書きメニュー）の下に表示するアカウント/カートアイコン。
   .newHeaderIcons側と同じ.headerIcon/.headerIcon__svgを使い回して見た目を揃える */
.newMainmenuList__icons{
  display:flex;
  justify-content:center;
  gap:24px;
  margin-top:30px;
}
/* SP幅（850px以下）では.newHeaderIconsが常時表示されており重複するため、こちらは隠す */
@media screen and (max-width:850px){
  .newMainmenuList__icons{
    display:none;
  }
}

/* .mobilemenu（ハンバーガーで開くフルスクリーンのメニュー）。
   基本の表示・位置（fixed, height:100%）はbaseorisho.cssのままだが、開閉は
   static/js/base.jsでスライドではなくフェードに変更しているため、rightは常に0固定、
   topも画面最上部（0）に上書きする。中の余白（padding-top）で内容がヘッダーの
   アイコン類と重ならないようにしている。 */
.mobilemenu{
  top:0 !important;
  right:0 !important;
}
.mobilemenu .newMobileMenu__nav{
  list-style:none;
  margin:0;
  padding:90px 20px 0;
  display:flex;
  flex-direction:column;
  gap:40px;
}
.mobilemenu .newMobileMenu__group{
  border:none;
  padding:0;
  font-size:inherit;
  color:inherit;
}
/* groupTitle（製品・サービス一覧）、ペアの2リンク、お問い合わせ単独リンクの3パターンすべてが
   .newMobileMenu__group直下のaに当たるので、ここでまとめて共通の見た目にする */
.mobilemenu .newMobileMenu__nav > li > a{
  display:block;
  font-size:16px;
  color:#707070;
}
.mobilemenu .newMobileMenu__groupTitle{
  margin-bottom:12px;
}
.mobilemenu .newMobileMenu__subList{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.mobilemenu .newMobileMenu__subList li{
  border:none;
  padding:0;
  font-size:14px;
}
.mobilemenu .newMobileMenu__subList li a{
  color:#707070;
}
.mobilemenu .newMobileMenu__subList li a::before{
  content:"－ ";
}
.mobilemenu .newMobileMenu__group--pair{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.mobilemenu .newMobileMenu__nav a:hover{
  opacity:.6;
}

@media screen and (min-width:851px){
  .mobilemenu .newMobileMenu__nav{
    flex-direction:row-reverse;
    align-items:flex-start;
    justify-content: end;
    padding:90px 60px 20px;
    gap:75px;
  }
  .mobilemenu .newMobileMenu__group{
    display:flex;
    flex-direction:row-reverse;
    gap:30px;
  }
  .mobilemenu .newMobileMenu__nav > li > a{
    writing-mode:vertical-rl;
    text-orientation:upright;
    font-size: 20px;
    font-weight: bold;
  }
  .mobilemenu .newMobileMenu__groupTitle{
    margin-bottom:0;
  }
  .mobilemenu .newMobileMenu__subList{
    flex-direction:row-reverse;
    gap:22px;
  }
  .mobilemenu .newMobileMenu__subList li{
    writing-mode:vertical-rl;
    text-orientation:upright;
    font-size: 18px;
  }
  .mobilemenu .newMobileMenu__subList li a{
    color:#707070;
    font-weight: bold;
  }
  /* 縦書きだと文字の「－」は横棒に見えてしまうため、PCでは文字ではなくCSSで縦線を描く */
  .mobilemenu .newMobileMenu__subList li a::before{
    content:"";
    display:inline-block;
    width:1px;
    height:10px;
    background-color:#4AA4C1;
    margin-bottom:6px;
  }
  .mobilemenu .newMobileMenu__group--pair{
    flex-direction:row-reverse;
    gap:35px;
  }
  /* 下層ページ（secondary.css適用時）は.toplogoが画面左上にほぼ余白なしで張り付いてしまうため、
   右上のハンバーガー（.menubutton、top:20px; right:20px）と揃うよう上・左に余白を付ける。
   トップページ側（.topmainmenu_bg内の縦書きメニュー用レイアウト）には影響させないよう
   body.front_pageは除外する */
  body:not(.front_page) .toplogomark div {
    margin: 20px 0 0 20px !important;
  }
}

/* topmainmenu_bg（ロゴ＋縦書きメニューの背景枠）を透明・枠なしにして、
   ロゴとメニューだけが浮いているように見せる */
.topmainmenu{
  left: auto !important;
  right: 0 !important;
}
.topmainmenu_bg{
  background-color:transparent !important;
  box-shadow:none !important;
  right: 3%;
}
@media screen and (min-width:1500px){
  .topmainmenu_bg{
    background-color:transparent !important;
    box-shadow:none !important;
    right: 20%;
  }
}
/* 769〜1250pxの範囲だけ、トップページの.topmainmenu_bg（縦書きメニュー＋ロゴ）がスライダーと
   被るため非表示にする。下層ページには.topimgのスライダー自体が無く被りが起きないため、
   ロゴまで消えてしまわないようbody.front_pageのときだけに絞る */
@media screen and (min-width:769px) and (max-width:1250px){
  body.front_page .topmainmenu_bg{
    display:none !important;
  }
}
.toplogo {
  padding-left: 0 !important;
}