/* -------------------------------------------------- */
/* ヘッダ */
/* -------------------------------------------------- */

/* ベース */
header { align-items:center; box-sizing:border-box; border-bottom:1px solid var(--gr-2); justify-content:flex-start; padding:5px 20px; height:60px; width:100%; }

/* 見出し */
header h1 img { height:auto; max-width:260px; }

@container( min-width:1000px ) {

/* ベース */
header { align-items:center; justify-content:space-between; padding:5px 35px 0 35px; height:135px; }

}

/* -------------------------------------------------- */
/* ナビゲーション */
/* -------------------------------------------------- */

/* 展開アイコン */
.global-nav__toggle { transform:translateY(-50%); position:fixed; top:calc( 60px / 2 ); right:20px; height:26px; width:30px; z-index:1001; }
.global-nav__toggle-line, .global-nav__toggle-line::before, .global-nav__toggle-line::after { background-color:var(--gr-2); display:inline-block; position:absolute; top:50%; left:0; height:2px; width:100%; }
.global-nav__toggle-line::before { transform:translateY(-10px); transition:.3s; }
.global-nav__toggle-line::after { transform:translateY(8px); transition:.3s; }

/* 動かす */
#nav-toggle:checked ~ label .global-nav__toggle-line { background-color:transparent; transition:.3s; }
#nav-toggle:checked ~ label .global-nav__toggle-line::before { background-color:var(--wh); transform:translate(0,-50%) rotate(45deg); transition:.3s; }
#nav-toggle:checked ~ label .global-nav__toggle-line::after { background-color:var(--wh); transform:translate(0,-50%) rotate(-45deg); transition:.3s; }

/* サイトナビゲーション */
.global-nav__list li { width:calc( 50% - 10px ); }

@container( min-width:1000px ) {

/* 展開アイコン */
.global-nav__toggle-line { display:none; }

/* PCナビゲーション */
.global-nav { display:flex; flex-direction:column; gap:10px; }
.global-nav::before { background-image:url('../img/nav/nav-bg-pc.png'); background-position:top right; display:block; height:85px; width:100%; }
.global-nav__list { background-color:transparent; display:flex; flex-direction:row; flex-wrap:nowrap; gap:40px; overflow:visible; padding-bottom:5px; position:static; max-height:100%; height:35px; min-height:auto; height:auto; width:auto; }
.global-nav__list li { padding-bottom:5px; position:relative; width:auto; }
.global-nav__list li ul.column.sub-nav { align-items:center; background-color:rgba(255,255,255,0.5); box-sizing:border-box; display:none; flex-direction:row; gap:10px; justify-content:center; transform:translateY(30px) translateX(-50%); top:0; left:50%; padding:10px; position:absolute; white-space:nowrap; min-width:max-content; width:max-content; }
/* .global-nav__list li:hover ul.column.sub-nav { display:flex; } */
.global-nav__list li.is-open ul.column.sub-nav { display:flex; }
.global-nav__list li ul.column.sub-nav li { font-weight:600; font-size:14px; display:inline-flex; text-align:center; padding:0; position:static; width:auto; }
.global-nav__list li ul.column.sub-nav li + li::before { content:'/'; display:inline-block; padding-right:12px; }
.global-nav__list li ul.column.sub-nav li a { padding:0; margin:0; width:auto; }

}

@container( max-width:1100px ) {

/* PCナビゲーション */
.global-nav__list { gap:10px; }
.global-nav__list li { font-size:14px; }

}

@container( max-width:1200px ) {

/* PCナビゲーション */
.global-nav__list { gap:15px }

}

@container( max-width:1300px ) {

/* PCナビゲーション */
.global-nav__list { gap:20px }

}