:root{
  --mega-primary:#1a2a5a;
  --mega-text:#333333;
  --mega-gray-bg:#f7f8fa;
  --mega-border:#e8edf3;
  --mega-white:#ffffff;
  --mega-muted:#9aa5b3;
  --mega-blue-bg:#0b56a1;
  --mega-ease:cubic-bezier(0.19,1,0.22,1);
  --mega-speed:.5s;
}

body.mobile-menu-open{
  overflow:hidden;
  touch-action:none;
}

/* =========================================
   PC mega panel
========================================= */
.header-style-4 .main-bar .navbar-nav > li.has-mega-panel{
  position:relative;
}

.header-style-4 .main-bar .navbar-nav > li.has-mega-panel > a{
  position:relative;
  /*padding-right:18px;*/
    padding-right:20px;
}

.header-style-4 .main-bar .navbar-nav > li.has-mega-panel > a::after{
  content:"\f107";
  font-family:"Font Awesome 6 Free", FontAwesome;
  font-weight:900;
  line-height:1;
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  font-size:11px;
  opacity:.65;
  transition:transform .3s ease, opacity .3s ease;
}

.header-style-4 .main-bar .navbar-nav > li.has-mega-panel:hover > a::after{
  opacity:1;
}

.header-style-4 .main-bar .navbar-nav > li.has-mega-panel > .sub-menu.mega-panel{
  position:absolute !important;
  left:50% !important;
  top:100% !important;
  right:auto !important;
  transform:translateX(-50%) translateY(15px);
  width:400px;
  min-width:400px;
  max-width:400px;
  margin:0;
  padding:30px;
  border:1px solid var(--mega-border);
  border-radius:12px;
  background:var(--mega-white);
  box-shadow:0 20px 60px rgba(0,68,136,.08);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:9999;
  list-style:none;
  transition:
    opacity var(--mega-speed) var(--mega-ease),
    transform var(--mega-speed) var(--mega-ease),
    visibility var(--mega-speed);
}

.header-style-4 .main-bar .navbar-nav > li.has-mega-panel:hover > .sub-menu.mega-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

.header-style-4 .main-bar .navbar-nav > li.has-mega-panel > .sub-menu.mega-panel,
.header-style-4 .main-bar .navbar-nav > li.has-mega-panel > .sub-menu.mega-panel *,
.header-style-4 .main-bar .navbar-nav > li.has-mega-panel > .sub-menu.mega-panel *::before,
.header-style-4 .main-bar .navbar-nav > li.has-mega-panel > .sub-menu.mega-panel *::after{
  box-sizing:border-box;
}

.header-style-4 .main-bar .navbar-nav > li.has-mega-panel > .sub-menu.mega-panel > li{
  float:none !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  list-style:none !important;
}

.header-style-4 .main-bar .navbar-nav > li.has-mega-panel > .sub-menu.mega-panel .mega-panel__item > a{
  text-decoration:none !important;
  white-space:normal !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  position:relative !important;
  float:none !important;
  margin:0 !important;
  outline:none !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
}

/* card/tile only 共通打ち消し */
.header-style-4 .main-bar .navbar-nav > li.has-mega-panel > .sub-menu.mega-panel.mega-panel--card .mega-panel__item > a::before,
.header-style-4 .main-bar .navbar-nav > li.has-mega-panel > .sub-menu.mega-panel.mega-panel--card .mega-panel__item > a::after,
.header-style-4 .main-bar .navbar-nav > li.has-mega-panel > .sub-menu.mega-panel.mega-panel--tile .mega-panel__item > a::before,
.header-style-4 .main-bar .navbar-nav > li.has-mega-panel > .sub-menu.mega-panel.mega-panel--tile .mega-panel__item > a::after{
  content:none !important;
  display:none !important;
}

.header-style-4 .mega-panel__head{
  margin-bottom:25px !important;
  padding:0 !important;
  cursor:default;
}

.header-style-4 .mega-panel__eyebrow{
  display:block;
  font-size:10px;
  color:var(--mega-muted);
  line-height:1.4;
  margin-bottom:4px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700;
}

.header-style-4 .mega-panel__title-row{
  display:flex;
  align-items:center;
  gap:12px;
}

.header-style-4 .mega-panel__title{
  margin:0;
  font-size:18px;
  line-height:1.4;
  font-weight:300;
  color:var(--mega-primary);
}

.header-style-4 .mega-panel__line{
  display:inline-block;
  width:80px;
  height:1px;
  background:var(--mega-primary);
  opacity:.2;
}

/* 会社案内 */
.header-style-4 .mega-panel--card{
  display:grid !important;
  grid-template-columns:1fr;
  gap:12px;
}

.header-style-4 .mega-panel--card .mega-panel__head{
  grid-column:1 / -1;
}

.header-style-4 .mega-panel--card .mega-panel__item > a{
  display:block !important;
  width:100% !important;
  padding:18px 24px !important;
  border-radius:8px;
  border:1px solid var(--mega-border) !important;
  background:transparent !important;
  color:var(--mega-text) !important;
  font-size:15px;
  font-weight:300;
  line-height:1.6;
  transition:all var(--mega-speed) var(--mega-ease);
}

.header-style-4 .mega-panel--card .mega-panel__item > a:hover{
  background:var(--mega-gray-bg) !important;
  color:var(--mega-primary) !important;
  transform:translateX(6px);
  border-color:var(--mega-primary) !important;
  box-shadow:4px 4px 20px rgba(0,68,136,.04);
}

/* 業務内容 */
.header-style-4 .mega-panel--tile{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.header-style-4 .mega-panel--tile .mega-panel__head{
  grid-column:1 / -1;
}

.header-style-4 .mega-panel--tile .mega-panel__item > a{
  display:flex !important;
  width:100% !important;
  min-height:92px;
  padding:20px 10px !important;
  border-radius:10px;
  border:1px solid transparent !important;
  background:var(--mega-gray-bg) !important;
  color:var(--mega-text) !important;
  text-align:center !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  line-height:1.4 !important;
  transition:all var(--mega-speed) var(--mega-ease);
}

.header-style-4 .mega-panel--tile .mega-panel__item > a i{
  display:block !important;
  position:static !important;
  float:none !important;
  margin:0 auto !important;
  width:auto !important;
  height:auto !important;
  font-size:22px !important;
  line-height:1 !important;
  color:var(--mega-primary) !important;
  transition:inherit;
}

.header-style-4 .mega-panel--tile .mega-panel__item > a span{
  display:block !important;
  width:100%;
  font-size:14px;
  font-weight:300;
  color:inherit;
  text-align:center;
}

.header-style-4 .mega-panel--tile .mega-panel__item > a:hover{
  background:var(--mega-primary) !important;
  color:#fff !important;
  transform:translateY(-5px);
  box-shadow:0 10px 25px rgba(0,68,136,.15);
}

.header-style-4 .mega-panel--tile .mega-panel__item > a:hover i{
  color:#fff !important;
  transform:scale(1.08);
}

/* お問い合わせ：index_Menu.html の style-original 再現 */
.header-style-4 .main-bar .navbar-nav > li.has-mega-panel > .sub-menu.mega-panel.mega-panel--original{
  width:400px;
  min-width:400px;
  max-width:400px;
  padding:30px;
  border-radius:12px;
}

.header-style-4 .main-bar .navbar-nav > li.has-mega-panel > .sub-menu.mega-panel.mega-panel--original .mega-panel__head{
  margin-bottom:25px !important;
  padding:0 !important;
}

.header-style-4 .main-bar .navbar-nav > li.has-mega-panel > .sub-menu.mega-panel.mega-panel--original .mega-panel__eyebrow{
  display:block;
  font-size:10px;
  color:#aaa;
  line-height:1.4;
  margin-bottom:4px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700;
}

.header-style-4 .main-bar .navbar-nav > li.has-mega-panel > .sub-menu.mega-panel.mega-panel--original .mega-panel__title-row{
  display:flex;
  align-items:center;
  gap:12px;
}

.header-style-4 .main-bar .navbar-nav > li.has-mega-panel > .sub-menu.mega-panel.mega-panel--original .mega-panel__title{
  margin:0;
  font-size:18px;
  line-height:1.4;
  font-weight:700;
  color:var(--mega-primary);
}

.header-style-4 .main-bar .navbar-nav > li.has-mega-panel > .sub-menu.mega-panel.mega-panel--original .mega-panel__line{
  display:inline-block;
  width:50px;
  height:1px;
  background:var(--mega-primary);
  opacity:.2;
}

.header-style-4 .main-bar .navbar-nav > li.has-mega-panel > .sub-menu.mega-panel.mega-panel--original .mega-panel__item{
  margin:0 !important;
  padding:0 !important;
}

.header-style-4 .main-bar .navbar-nav > li.has-mega-panel > .sub-menu.mega-panel.mega-panel--original .mega-panel__item > a{
  padding:12px 0 !important;
  font-size:16px;
  font-weight:600;
  color:var(--mega-primary) !important;
  display:flex !important;
  align-items:center;
  width:100% !important;
  background:transparent !important;
  line-height:1.5 !important;
  transition:all var(--mega-speed) var(--mega-ease);
  position:relative !important;
}

.header-style-4 .main-bar .navbar-nav > li.has-mega-panel > .sub-menu.mega-panel.mega-panel--original .mega-panel__item > a::before{
  content:"▶" !important;
  display:inline-block !important;
  font-size:9px;
  margin-right:12px;
  opacity:.6;
  color:var(--mega-primary) !important;
  line-height:1;
}

.header-style-4 .main-bar .navbar-nav > li.has-mega-panel > .sub-menu.mega-panel.mega-panel--original .mega-panel__item > a::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  bottom:8px !important;
  left:22px !important;
  width:0 !important;
  height:1px !important;
  background:var(--mega-primary) !important;
  transition:width var(--mega-speed) var(--mega-ease);
}

.header-style-4 .main-bar .navbar-nav > li.has-mega-panel > .sub-menu.mega-panel.mega-panel--original .mega-panel__item > a:hover{
  padding-left:12px !important;
  opacity:.7;
}

.header-style-4 .main-bar .navbar-nav > li.has-mega-panel > .sub-menu.mega-panel.mega-panel--original .mega-panel__item > a:hover::after{
  width:calc(100% - 22px) !important;
}

/* =========================
   SP full screen menu
========================= */
.mobile-fullmenu{
  display:none;
}

@media (max-width: 991px){
  .header-style-4 .sticky-header.main-bar-wraper,
  .header-style-4 .main-bar{
    z-index:1200;
  }

  .header-style-4 .navbar-toggler{
    position:relative;
    z-index:1301;
    width:54px;
    height:54px;
    padding:0;
    margin-top:4px;
    border:none !important;
    box-shadow:none !important;
    background:transparent !important;
    outline:none !important;
  }

  .header-style-4 .navbar-toggler:hover,
  .header-style-4 .navbar-toggler:focus,
  .header-style-4 .navbar-toggler:active{
    border:none !important;
    box-shadow:none !important;
    background:transparent !important;
    outline:none !important;
  }

  .header-style-4 .navbar-toggler .icon-bar{
    width:20px;
    margin:4px auto;
    background:#00224d;
  }

  .header-style-4 .header-nav.navbar-collapse{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    min-height:100dvh !important;
    display:block !important;
    margin:0 !important;
    padding:72px 0 0 !important;
    overflow:hidden !important;
    background:#f7f7f7 !important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-14px);
    transition:
      opacity .45s var(--mega-ease),
      transform .45s var(--mega-ease),
      visibility .45s;
  }

  .header-style-4 .header-nav.navbar-collapse.collapse:not(.show){
    display:block !important;
  }

  .header-style-4 .header-nav.navbar-collapse.show,
  .header-style-4 .header-nav.navbar-collapse.collapsing{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }

  .header-style-4 .header-nav .navbar-nav{
    display:none !important;
  }

  .mobile-fullmenu{
    display:flex;
    flex-direction:column;
    height:calc(100dvh - 72px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }

  .mobile-fullmenu__inner{
    display:flex;
    flex-direction:column;
    min-height:100%;
  }

  .mobile-fullmenu__top{
    padding:24px 28px 0;
    /*background:#f7f7f7;*/
  }

  .mobile-fullmenu__brand{
    display:flex;
    align-items:center;
    min-height:64px;
    margin-bottom:18px;
  }

  .mobile-fullmenu__brand-logo{
    width:190px;
    max-width:62vw;
    height:auto;
    display:block;
  }

  .mobile-fullmenu__home{
    display:block;
    padding:14px 0 18px;
    border-bottom:1px solid var(--mega-primary);
    color:var(--mega-primary);
    font-size:16px;
    font-weight:700;
    text-decoration:none;
    line-height:1.5;
  }

  .mobile-fullmenu__grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:22px 40px;
    padding:18px 28px 26px;
    background:#f7f7f7;
  }

  .mobile-fullmenu__group{
    min-width:0;
  }

  .mobile-fullmenu__group-title{
    margin:0;
    padding:0 0 12px;
    border-bottom:1px solid var(--mega-primary);
    color:var(--mega-primary);
    font-size:15px;
    line-height:1.5;
    font-weight:700;
  }

  .mobile-fullmenu__group-list{
    margin:12px 0 0;
    padding-left:18px;
  }

  .mobile-fullmenu__group-list li{
    margin:0 0 9px;
    color:var(--mega-primary);
  }

  .mobile-fullmenu__group-list a{
    color:var(--mega-primary);
    text-decoration:none;
    font-size:14px;
    line-height:1.6;
    font-weight:500;
    display:inline-block;
  }

  .mobile-fullmenu__group-list a:hover{
    opacity:.75;
  }

  .mobile-fullmenu__cta{
    margin-top:auto;
    background:var(--mega-blue-bg);
    padding:26px 28px 34px;
  }

  .mobile-fullmenu__cards{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
    margin-bottom:24px;
  }

  .mobile-fullmenu__card{
    position:relative;
    overflow:hidden;
    min-height:76px;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:16px;
    font-weight:700;
    letter-spacing:.02em;
    background:
      linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.02)),
      linear-gradient(120deg, rgba(255,255,255,.10), transparent 55%),
      #1f77c8;
  }

  .mobile-fullmenu__card--works{
    background:
      linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.02)),
      linear-gradient(120deg, rgba(255,255,255,.14), transparent 52%),
      #1b77c7;
  }

  .mobile-fullmenu__card--recruit{
    background:
      linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.02)),
      linear-gradient(120deg, rgba(255,255,255,.14), transparent 52%),
      #2b6ead;
  }

  .mobile-fullmenu__maincta{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:78px;
    border:2px solid rgba(255,255,255,.92);
    color:#fff;
    text-decoration:none;
    font-size:18px;
    font-weight:700;
    letter-spacing:.03em;
    margin-bottom:26px;
    transition:opacity .25s ease, transform .25s ease;
  }

  .mobile-fullmenu__maincta:hover{
    color:#fff;
    opacity:.88;
    transform:translateY(-1px);
  }

  .mobile-fullmenu__subnav{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
    margin-bottom:26px;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.42);
  }

  .mobile-fullmenu__pill{
    min-height:44px;
    border:1px solid rgba(255,255,255,.9);
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 18px;
    color:#fff;
    text-decoration:none;
    font-size:12px;
    font-weight:700;
    letter-spacing:.02em;
    position:relative;
  }

  .mobile-fullmenu__pill::after{
    content:"\f061";
    font-family:"Font Awesome 6 Free", FontAwesome;
    font-weight:900;
    font-size:11px;
    margin-left:10px;
  }

  .mobile-fullmenu__social{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:32px;
  }

  .mobile-fullmenu__social a{
    color:#fff;
    font-size:34px;
    line-height:1;
    text-decoration:none;
  }

  .mobile-fullmenu__social a:hover{
    opacity:.8;
  }
}

@media (max-width: 575px){
  .header-style-4 .navbar-toggler{
    width:50px;
    height:50px;
    margin-top:2px;
    border:none !important;
    box-shadow:none !important;
    background:transparent !important;
  }

  .header-style-4 .navbar-toggler .icon-bar{
    width:18px;
    margin:4px auto;
  }

  .header-style-4 .header-nav.navbar-collapse{
    padding:64px 0 0 !important;
  }

  .mobile-fullmenu{
    height:calc(100dvh - 64px);
  }

  .mobile-fullmenu__top{
    padding:18px 20px 0;
  }

  .mobile-fullmenu__brand{
    min-height:56px;
    margin-bottom:14px;
  }

  .mobile-fullmenu__brand-logo{
    width:168px;
    max-width:64vw;
  }

  .mobile-fullmenu__home{
    font-size:18px;
    padding:12px 0 16px;
  }

  .mobile-fullmenu__grid{
    gap:18px 22px;
    padding:16px 20px 24px;
  }

  .mobile-fullmenu__group-title{
    font-size:18px;
    padding-bottom:10px;
  }

  .mobile-fullmenu__group-list{
    margin-top:10px;
    padding-left:16px;
  }

  .mobile-fullmenu__group-list a{
    font-size:16px;
  }

  .mobile-fullmenu__cta{
    padding:22px 20px 28px;
  }

  .mobile-fullmenu__cards{
    gap:12px;
    margin-bottom:20px;
  }

  .mobile-fullmenu__card{
    min-height:66px;
    font-size:15px;
  }

  .mobile-fullmenu__maincta{
    min-height:70px;
    font-size:16px;
    margin-bottom:22px;
  }

  .mobile-fullmenu__subnav{
    gap:12px;
    margin-bottom:22px;
  }

  .mobile-fullmenu__pill{
    min-height:42px;
    font-size:11px;
    padding:0 14px;
  }

  .mobile-fullmenu__social{
    gap:28px;
  }

  .mobile-fullmenu__social a{
    font-size:32px;
  }
}

@media only screen and (max-width: 767px){
  .header-style-4 .top-bar .wt-topbar-right{
    display: none !important;
  }
}

/* =========================================================
   EXA Header official alignment v7
   PCロゴ位置・スマホロゴサイズ・ハンバーガー中央揃え・SP追従
   ※ヘッダー共通の正解設定。各HTML側で個別上書きしない。
   ========================================================= */

/* PC：ロゴは通常フローのまま、メニュー文字の中心に合わせる */
@media (min-width: 992px) {
  .site-header.header-style-4 .main-bar .logo-header {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    float: left !important;
    display: block !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    transform: translateY(20px) !important;
    z-index: 20;
  }

  .site-header.header-style-4 .main-bar .logo-header-inner,
  .site-header.header-style-4 .main-bar .logo-header-one,
  .site-header.header-style-4 .main-bar .logo-header-one > a {
    display: block !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  .site-header.header-style-4 .main-bar .logo-header img {
    display: block !important;
    width: auto;
    height: auto;
    /* max-width は既存テーマ側のロゴ幅指定を活かすため、ここでは上書きしない */
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: top !important;
  }
}

/* スマホ・タブレット：ヘッダー追従と、上下線の中心にロゴとハンバーガーを配置 */
@media (max-width: 991px) {
  /* スマホでは固定配置でヘッダー追従を保証。
     sticky/JSに依存させず、スクロール時もロゴ・ハンバーガーを残す */
  .site-header.header-style-4 {
    min-height: 72px !important;
  }

  .site-header.header-style-4 .sticky-header.main-bar-wraper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1500 !important;
    background: #ffffff !important;
  }

  .site-header.header-style-4 .main-bar {
    position: relative !important;
    min-height: 72px !important;
    background: #ffffff !important;
  }

  .site-header.header-style-4 .main-bar > .container {
    position: relative !important;
    min-height: 72px !important;
  }

  .site-header.header-style-4 .main-bar .logo-header {
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    float: none !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    transform: translateY(-50%) !important;
    z-index: 1520 !important;
  }

  .site-header.header-style-4 .main-bar .logo-header-inner,
  .site-header.header-style-4 .main-bar .logo-header-one,
  .site-header.header-style-4 .main-bar .logo-header-one > a {
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  .site-header.header-style-4 .main-bar .logo-header img {
    display: block !important;
    width: auto !important;
    max-width: 198px !important;
    max-height: 47px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: top !important;
  }

  .site-header.header-style-4 .main-bar #mobile-side-drawer,
  .site-header.header-style-4 .main-bar .navbar-toggler {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    left: auto !important;
    bottom: auto !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 1600 !important;
  }

  /* 全画面メニューはヘッダーより背面。×ボタンを確実に前面に残す */
  .site-header.header-style-4 .header-nav.navbar-collapse {
    z-index: 1400 !important;
  }

  .site-header.header-style-4 .main-bar #mobile-side-drawer .icon-bar,
  .site-header.header-style-4 .main-bar .navbar-toggler .icon-bar {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    display: block !important;
    width: 26px !important;
    height: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #00224d !important;
    border-radius: 999px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform-origin: center center !important;
    transition:
      transform .28s ease,
      opacity .2s ease,
      background-color .2s ease !important;
  }

  /* 閉じている時：三本線 */
  .site-header.header-style-4 .main-bar #mobile-side-drawer.collapsed .icon-bar-first,
  .site-header.header-style-4 .main-bar .navbar-toggler.collapsed .icon-bar-first {
    transform: translate(-50%, calc(-50% - 8px)) rotate(0deg) !important;
  }

  .site-header.header-style-4 .main-bar #mobile-side-drawer.collapsed .icon-bar-two,
  .site-header.header-style-4 .main-bar .navbar-toggler.collapsed .icon-bar-two {
    transform: translate(-50%, -50%) rotate(0deg) !important;
    opacity: 1 !important;
  }

  .site-header.header-style-4 .main-bar #mobile-side-drawer.collapsed .icon-bar-three,
  .site-header.header-style-4 .main-bar .navbar-toggler.collapsed .icon-bar-three {
    transform: translate(-50%, calc(-50% + 8px)) rotate(0deg) !important;
  }

  /* 開いている時：×ボタン */
  .site-header.header-style-4 .main-bar #mobile-side-drawer:not(.collapsed) .icon-bar-first,
  .site-header.header-style-4 .main-bar .navbar-toggler:not(.collapsed) .icon-bar-first,
  .site-header.header-style-4 .main-bar #mobile-side-drawer.active .icon-bar-first,
  .site-header.header-style-4 .main-bar #mobile-side-drawer.is-active .icon-bar-first {
    transform: translate(-50%, -50%) rotate(45deg) !important;
  }

  .site-header.header-style-4 .main-bar #mobile-side-drawer:not(.collapsed) .icon-bar-two,
  .site-header.header-style-4 .main-bar .navbar-toggler:not(.collapsed) .icon-bar-two,
  .site-header.header-style-4 .main-bar #mobile-side-drawer.active .icon-bar-two,
  .site-header.header-style-4 .main-bar #mobile-side-drawer.is-active .icon-bar-two {
    transform: translate(-50%, -50%) scaleX(0) !important;
    opacity: 0 !important;
  }

  .site-header.header-style-4 .main-bar #mobile-side-drawer:not(.collapsed) .icon-bar-three,
  .site-header.header-style-4 .main-bar .navbar-toggler:not(.collapsed) .icon-bar-three,
  .site-header.header-style-4 .main-bar #mobile-side-drawer.active .icon-bar-three,
  .site-header.header-style-4 .main-bar #mobile-side-drawer.is-active .icon-bar-three {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
  }
}

/* ======================================================
   iPhone Safari / Chrome mobile menu safe-area fix
   スマホメニュー下部ボタン切れ対策
====================================================== */

@media (max-width: 900px) {

  .header-style-4 .header-nav,
  .mobile-sider-drawer-menu .header-nav {
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    max-height: 100dvh;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-sizing: border-box;

    padding-bottom: calc(180px + env(safe-area-inset-bottom)) !important;
  }

  .mobile-fullmenu {
    box-sizing: border-box;
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }

  .mobile-fullmenu__inner {
    box-sizing: border-box;
  }

  .mobile-fullmenu__cta {
    margin-bottom: calc(90px + env(safe-area-inset-bottom)) !important;
  }

  .mobile-fullmenu__maincta:last-child {
    margin-bottom: calc(40px + env(safe-area-inset-bottom));
  }

  body.mobile-menu-open,
  body.menu-active {
    overflow: hidden;
    touch-action: none;
  }
}