/* 上のお知らせの帯＋ヘッダー（固定。FV の上では白抜き、スクロール後は紙の色に紺の文字） */
.header { position: fixed; top: 0; left: 0; width: 100%; z-index: 10000; color: var(--on-dark); transition: transform .6s var(--ease), color .6s var(--ease); }
.header::before { content: ""; position: absolute; inset: 0; background: var(--bg); opacity: 0; transition: opacity .6s var(--ease); }
.header.is-blue { color: var(--ink); }
.header.is-blue::before { opacity: 1; }
.header.is-hidden { transform: translateY(-100%); }
.is-drawer .header { color: var(--on-dark); transform: none; }
.is-drawer .header::before { opacity: 0; }

.notice { position: relative; background: var(--navy); color: var(--on-dark); font-size: .8rem; font-weight: 700; line-height: 1.4545; }
.notice a { display: block; padding: 7px 60px 7px 75px; }
.notice__close { position: absolute; top: 0; right: 0; width: 36px; height: 100%; }
.notice__close span, .notice__close span::after { position: absolute; top: 50%; left: 50%; width: 12px; height: 1px; background: currentColor; content: ""; }
.notice__close span { transform: translate(-50%, -50%) rotate(45deg); }
.notice__close span::after { transform: translate(-50%, -50%) rotate(90deg); }
.notice.is-closed { display: none; }
@media (max-width: 750px) { .notice a { padding: 10px 37px 10px 10px; } }

.header__bar { position: relative; height: 89px; transition: height .6s var(--ease); }
.header__logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 17px; line-height: 1; transition: transform .4s var(--ease); }
.header__logo a { display: flex; }
.header__nav { display: none; font-size: .7333rem; font-weight: 700; line-height: 1; letter-spacing: normal; }
.header__nav ul { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; }
.header__nav--l ul { left: 4.6875vw; }
.header__nav--r ul { right: 4.6875vw; }
.header__nav li { position: relative; margin-right: 28px; }
.header__nav li:last-child { margin-right: 0; }
.header__nav li:not(.header__tel)::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right top; transition: transform .6s cubic-bezier(.6, .25, 0, 1); }
.header__nav li:hover::after { transform: scaleX(1); transform-origin: left top; }
.header__tel a, a.header__tel { display: flex; align-items: center; justify-content: center; width: 46px; height: 24px; border: 1px solid currentColor; border-radius: 50%; font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: .04em; }
.header__tel--sp { position: absolute; top: 50%; right: 8.2667vw; transform: translateY(-50%); }
.header__burger { position: absolute; top: 50%; left: 8.2667vw; transform: translateY(-50%); width: 40px; height: 40px; z-index: 10; }
.header__burger span { position: absolute; left: 5px; width: 30px; height: 1px; background: currentColor; transition: transform .4s var(--ease), opacity .3s; }
.header__burger span:nth-child(1) { top: 14px; }
.header__burger span:nth-child(2) { top: 20px; }
.header__burger span:nth-child(3) { top: 26px; }
.is-drawer .header__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg) scaleX(.5); }
.is-drawer .header__burger span:nth-child(2) { opacity: 0; }
.is-drawer .header__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg) scaleX(.5); }
.header.is-min .header__bar { height: 104px; }
.header.is-min .header__logo { transform: translate(-50%, -50%) scale(.82); }
@media (max-width: 750px) {
  .header__logo { font-size: 14px; }
  .header.is-min .header__bar { height: 66px; }
}
@media (min-width: 1024px) {
  .header__bar { height: 150px; }
  .header__nav { display: block; }
  .header__burger, a.header__tel--sp { display: none; }
}

/* スマホのメニュー（紺の全面） */
.drawer { position: fixed; inset: 0; z-index: 9999; background: var(--navy); color: var(--on-dark); padding: 150px 9.6vw 60px; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s .4s; }
.is-drawer .drawer { opacity: 1; visibility: visible; transition: opacity .4s var(--ease); }
.drawer__list { font-size: 1.25rem; font-weight: 700; line-height: 2.5; }
.drawer__sub { margin-top: 30px; font-size: .8667rem; line-height: 2.2; color: var(--on-dark-sub); }
@media (min-width: 1024px) { .drawer { display: none; } }