/*
 * ヘッダー、グローバルナビ、サブメニュー、フッター、共通セクション幅、共通インナーなどのレイアウト用
 */

/* ======================================

  POS-COMヘッダー：基本レイアウト

====================================== */

@media (min-width: 960px) {
  #header.l-header {
    position: relative;
    z-index: 100;
    background: var(--poscom-white);
    box-shadow: 0 8px 28px rgba(6, 27, 58, 0.08);
  }

  #header .l-header__bar {
    min-height: 32px;
    background: var(--poscom-deep-navy);
    color: var(--poscom-white);
  }

  #header .l-header__barInner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: min(1760px, calc(100% - 64px));
    max-width: none;
    min-height: 32px;
    margin-inline: auto;
    padding-inline: 0;
  }

  #header .c-catchphrase {
    color: var(--poscom-white);
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 600;
    font-style: italic;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-align: left;
  }

  #header .l-header__inner {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2vw, 36px);
    width: min(1760px, calc(100% - 64px));
    max-width: none;
    min-height: 98px;
    margin-inline: auto;
    padding: 16px 0;
  }

  #header .l-header__logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin-right: clamp(4px, 1vw, 16px);
  }

  #header .c-headLogo {
    display: flex;
    align-items: center;
    margin: 0;
  }

  #header .c-headLogo__link {
    display: flex;
    align-items: center;
  }

  #header .c-headLogo__img {
    width: auto;
    max-width: clamp(190px, 16vw, 300px);
    max-height: 72px;
    object-fit: contain;
  }

  #header #gnav {
    flex: 1 1 auto;
    display: block;
    min-width: 0;
  }

  #header .c-gnav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 0.7vw, 12px);
    margin: 0;
    padding: 0;
  }

  #header .c-gnav > li {
    flex: 0 1 auto;
  }

  #header .c-gnav > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0.72em clamp(0.8em, 1vw, 1.25em);
    border: 1px solid rgba(11, 44, 94, 0.1);
    border-radius: 10px;
    background: linear-gradient(180deg, var(--poscom-white), var(--poscom-bg));
    color: var(--poscom-deep-navy);
    box-shadow: 0 6px 18px rgba(6, 27, 58, 0.06);
    text-decoration: none;
    transition:
      color 0.2s ease,
      background-color 0.2s ease,
      border-color 0.2s ease,
      box-shadow 0.2s ease,
      transform 0.2s ease;
  }

  #header .c-gnav > li > a:hover {
    border-color: rgba(215, 25, 32, 0.24);
    background: var(--poscom-white);
    color: var(--poscom-red);
    box-shadow: 0 10px 24px rgba(6, 27, 58, 0.1);
    transform: translateY(-1px);
  }

  #header .c-gnav .ttl {
    color: inherit;
    font-family: var(--font-sans);
    font-size: clamp(12px, 0.9vw, 15px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }

  #header .c-gnav > li:last-child > a {
    border-color: rgba(215, 25, 32, 0.42);
    background:
      linear-gradient(135deg, var(--poscom-red), var(--poscom-red));
    color: var(--poscom-white);
    box-shadow: 0 10px 26px rgba(215, 25, 32, 0.2);
  }

  #header .c-gnav > li:last-child > a:hover {
    border-color: rgba(215, 25, 32, 0.5);
    background:
      linear-gradient(135deg, var(--poscom-red), var(--poscom-red));
    color: var(--poscom-white);
    box-shadow: 0 12px 30px rgba(215, 25, 32, 0.28);
  }

  #header .l-header__menuBtn.sp_ {
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-left: clamp(4px, 0.8vw, 14px);
  }

  #header .l-header__menuBtn .c-iconBtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 12px;
    background: var(--poscom-deep-navy);
    color: var(--poscom-white);
    box-shadow: 0 10px 24px rgba(6, 27, 58, 0.18);
    cursor: pointer;
    transition:
      background-color 0.2s ease,
      box-shadow 0.2s ease,
      transform 0.2s ease;
  }

  #header .l-header__menuBtn .c-iconBtn:hover {
    background: var(--poscom-red);
    box-shadow: 0 12px 28px rgba(215, 25, 32, 0.24);
    transform: translateY(-1px);
  }

  #header .l-header__menuBtn .c-iconBtn::after {
    content: "MENU";
    position: absolute;
    bottom: 6px;
    left: 50%;
    color: var(--poscom-white);
    font-family: var(--font-en);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    transform: translateX(-50%);
  }

  #header .-menuBtn .c-iconBtn__icon {
    position: relative;
    display: block;
    width: 24px;
    height: 2px;
    margin-top: -8px;
    background: var(--poscom-white);
    font-size: 0;
    line-height: 0;
    transition: background-color 0.2s ease;
  }

  #header .-menuBtn .c-iconBtn__icon::before,
  #header .-menuBtn .c-iconBtn__icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 24px;
    height: 2px;
    background: var(--poscom-white);
    transition:
      transform 0.2s ease,
      top 0.2s ease,
      bottom 0.2s ease;
  }

  #header .-menuBtn .c-iconBtn__icon::before {
    top: -8px;
  }

  #header .-menuBtn .c-iconBtn__icon::after {
    bottom: -8px;
  }

  [data-spmenu="opened"] #header .-menuBtn .c-iconBtn__icon {
    background: transparent;
  }

  [data-spmenu="opened"] #header .-menuBtn .c-iconBtn__icon::before {
    top: 0;
    transform: rotate(45deg);
  }

  [data-spmenu="opened"] #header .-menuBtn .c-iconBtn__icon::after {
    bottom: 0;
    transform: rotate(-45deg);
  }

  .p-spMenu {
    display: block;
  }

  .p-spMenu__inner {
    background: var(--poscom-white);
  }

  .p-spMenu__body {
    color: var(--poscom-text);
    font-family: var(--font-sans);
  }

  [data-spmenu="opened"] .p-spMenu__inner,
  [data-spmenu="opened"] .p-spMenu__body {
    visibility: visible;
  }
}

/* ======================================

  POS-COMヘッダー：電話番号・画像ナビパネル

====================================== */

.poscom-header-panel {
  display: none;
}

@media (min-width: 960px) {
  #header #gnav {
    display: none;
  }

  #header .l-header__inner {
    gap: clamp(18px, 1.5vw, 30px);
    width: min(1840px, calc(100% - 56px));
    min-height: 122px;
    padding: 14px 0;
  }

  #header .l-header__logo {
    margin-right: 0;
  }

  #header .c-headLogo__img {
    max-width: clamp(210px, 15vw, 290px);
    max-height: 92px;
  }

  .poscom-header-panel {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: clamp(18px, 1.6vw, 34px);
    min-width: 0;
  }

  .poscom-header-tel {
    flex: 0 0 clamp(300px, 20vw, 360px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 88px;
    padding: 10px 18px;
    border: 2px solid rgba(6, 27, 58, 0.86);
    border-radius: 6px;
    background: var(--poscom-white);
    color: var(--poscom-deep-navy);
    text-align: center;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(6, 27, 58, 0.08);
    transition:
      border-color 0.2s ease,
      box-shadow 0.2s ease,
      transform 0.2s ease;
  }

  .poscom-header-tel:hover {
    border-color: var(--poscom-navy);
    color: var(--poscom-deep-navy);
    box-shadow: 0 12px 28px rgba(6, 27, 58, 0.14);
    transform: translateY(-1px);
  }

  .poscom-header-tel__lead {
    display: block;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.04em;
  }

  .poscom-header-tel__number {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.18em;
    margin-top: 4px;
    color: var(--poscom-deep-navy);
    font-family: var(--font-en);
    font-size: clamp(31px, 2.6vw, 42px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.04em;
  }

  .poscom-header-tel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.08em;
    height: 1.08em;
    line-height: 1;
  }

  .poscom-header-tel__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .poscom-header-tel__time {
    display: block;
    margin-top: 6px;
    color: var(--poscom-deep-navy);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.03em;
  }

  .poscom-service-nav {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    min-width: 0;
    min-height: 96px;
    padding: 12px 18px;
    overflow: hidden;
    border-radius: 26px;
    background: rgba(238, 242, 245, 0.92);
    box-shadow:
      0 10px 26px rgba(6, 27, 58, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.72);
  }

  .poscom-service-nav__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 84px;
    padding: 4px clamp(8px, 0.7vw, 14px);
    border-left: 1px solid rgba(6, 27, 58, 0.72);
    color: var(--poscom-navy);
    text-align: center;
    text-decoration: none;
    transition:
      color 0.2s ease,
      background-color 0.2s ease;
  }

  .poscom-service-nav__item:first-child {
    border-left: 0;
  }

  .poscom-service-nav__item:hover {
    color: var(--poscom-red);
    background: rgba(255, 255, 255, 0.34);
  }

  .poscom-service-nav__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(48px, 3.4vw, 64px);
    height: clamp(44px, 3.2vw, 60px);
    margin-bottom: 7px;
    overflow: hidden;
  }

  .poscom-service-nav__icon.-contact-icon {
    width: clamp(50px, 3.4vw, 62px);
    height: clamp(50px, 3.4vw, 62px);
    border-radius: 50%;
    background: rgba(215, 25, 32, 0.08);
  }

  .poscom-service-nav__icon img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.2s ease;
  }

  .poscom-service-nav__item:hover .poscom-service-nav__icon img {
    transform: translateY(-3px);
  }

  .poscom-service-nav__label {
    display: block;
    color: inherit;
    font-family: var(--font-sans);
    font-size: clamp(14px, 1.02vw, 17px);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }

  .poscom-service-nav__item.-contact {
    color: #0e7e86;
  }

  #header .l-header__menuBtn.sp_ {
    margin-left: 0;
  }

  #header .l-header__menuBtn .c-iconBtn {
    width: 54px;
    height: 54px;
    border-radius: 10px;
  }
}

@media (max-width: 1280px) and (min-width: 960px) {
  #header .l-header__inner {
    gap: 14px;
    width: min(1240px, calc(100% - 32px));
    min-height: 110px;
  }

  #header .c-headLogo__img {
    max-width: 190px;
    max-height: 78px;
  }

  .poscom-header-panel {
    gap: 14px;
  }

  .poscom-header-tel {
    flex-basis: 292px;
    min-height: 82px;
    padding: 8px 14px;
  }

  .poscom-header-tel__lead {
    font-size: 13px;
  }

  .poscom-header-tel__number {
    font-size: 30px;
  }

  .poscom-header-tel__time {
    font-size: 12px;
  }

  .poscom-service-nav {
    min-height: 86px;
    padding: 10px 12px;
    border-radius: 22px;
  }

  .poscom-service-nav__item {
    min-width: 70px;
    padding-inline: 7px;
  }

  .poscom-service-nav__icon {
    width: 46px;
    height: 42px;
    margin-bottom: 6px;
  }

  .poscom-service-nav__icon.-contact-icon {
    width: 46px;
    height: 46px;
  }

  .poscom-service-nav__label {
    font-size: 12px;
    letter-spacing: 0.02em;
  }

  #header .l-header__menuBtn .c-iconBtn {
    width: 50px;
    height: 50px;
  }
}

/* ======================================

  POS-COMヘッダー：PC用メニューボタン

====================================== */

@media (min-width: 960px) {
  /* PCでもSWELLのメニューボタンを右端に表示する */
  #header .l-header__menuBtn.sp_ {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* 濃紺ベースの角丸ボタンにして、ヘッダー内のCTA感を整える */
  #header .l-header__menuBtn .c-iconBtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 68px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    background:
      linear-gradient(135deg, var(--poscom-deep-navy) 0%, var(--poscom-navy) 64%, #123e73 100%);
    color: var(--poscom-white);
    box-shadow:
      0 14px 30px rgba(6, 27, 58, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition:
      background-color 0.3s ease,
      border-color 0.3s ease,
      box-shadow 0.3s ease,
      transform 0.3s ease;
  }

  /* hover時に左から右へ流れる細い配送ライン */
  #header .l-header__menuBtn .c-iconBtn::before {
    content: "";
    position: absolute;
    top: 18px;
    left: -70%;
    z-index: 1;
    width: 64%;
    height: 2px;
    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.72) 44%,
        rgba(34, 142, 56, 0.62) 70%,
        transparent 100%
      );
    box-shadow: 0 0 12px rgba(34, 142, 56, 0.28);
    opacity: 0;
    pointer-events: none;
  }

  /* hover時は少し赤を含む濃紺へ変化させる */
  #header .l-header__menuBtn .c-iconBtn:hover {
    border-color: rgba(255, 255, 255, 0.26);
    background:
      linear-gradient(135deg, var(--poscom-navy) 0%, #123e73 60%, var(--poscom-red) 100%);
    box-shadow:
      0 16px 34px rgba(6, 27, 58, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
  }

  /* hover時だけ配送ラインを一度流す */
  #header .l-header__menuBtn .c-iconBtn:hover::before {
    animation: poscom-menu-line 0.72s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* MENUラベルは小さく、英字フォントで上品に表示する */
  #header .l-header__menuBtn .c-iconBtn::after {
    content: "MENU";
    position: absolute;
    right: 0;
    bottom: 9px;
    left: 0;
    z-index: 3;
    width: 100%;
    color: var(--poscom-white);
    font-family: var(--font-en);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.12em;
    text-align: center;
    transform: none;
  }

  /* 中央線を長めにして、前へ進むスピード感を出す */
  #header .l-header__menuBtn .c-iconBtn__icon {
    position: absolute;
    top: 23px;
    left: 50%;
    z-index: 2;
    display: block;
    width: 30px;
    height: 2px;
    margin: 0;
    border-radius: 999px;
    background: var(--poscom-white);
    font-size: 0;
    line-height: 0;
    transform: translateX(-50%);
    transition:
      width 0.3s ease,
      background-color 0.3s ease,
      transform 0.3s ease;
  }

  /* 上下線は短めにして、配送ライン風の三本線にする */
  #header .l-header__menuBtn .c-iconBtn__icon::before,
  #header .l-header__menuBtn .c-iconBtn__icon::after {
    content: "";
    position: absolute;
    right: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--poscom-white);
    transition:
      top 0.3s ease,
      bottom 0.3s ease,
      width 0.3s ease,
      background-color 0.3s ease,
      transform 0.3s ease;
  }

  /* 上線 */
  #header .l-header__menuBtn .c-iconBtn__icon::before {
    top: -9px;
    width: 22px;
  }

  /* 下線 */
  #header .l-header__menuBtn .c-iconBtn__icon::after {
    bottom: -9px;
    width: 24px;
  }

  /* hover時は中央線を少し伸ばして前進感を出す */
  #header .l-header__menuBtn .c-iconBtn:hover .c-iconBtn__icon {
    width: 34px;
    transform: translateX(calc(-50% + 1px));
  }

  /* hover時の上線 */
  #header .l-header__menuBtn .c-iconBtn:hover .c-iconBtn__icon::before {
    width: 25px;
  }

  /* hover時の下線 */
  #header .l-header__menuBtn .c-iconBtn:hover .c-iconBtn__icon::after {
    width: 27px;
  }

  /* メニュー展開時はボタン背景に赤を少し混ぜる */
  [data-spmenu="opened"] #header .l-header__menuBtn .c-iconBtn {
    background:
      linear-gradient(135deg, var(--poscom-deep-navy) 0%, var(--poscom-navy) 58%, var(--poscom-red) 100%);
  }

  /* 展開時はMENU表記をCLOSEに変える */
  [data-spmenu="opened"] #header .l-header__menuBtn .c-iconBtn::after {
    content: "CLOSE";
    font-size: 9px;
    letter-spacing: 0.1em;
  }

  /* 展開時は中央線を消す */
  [data-spmenu="opened"] #header .l-header__menuBtn .c-iconBtn__icon {
    width: 30px;
    background: transparent;
    transform: translateX(-50%);
  }

  /* 展開時の上線をXの片側にする */
  [data-spmenu="opened"] #header .l-header__menuBtn .c-iconBtn__icon::before {
    top: 0;
    width: 30px;
    background: var(--poscom-white);
    transform: rotate(42deg);
  }

  /* 展開時の下線をXの片側にする */
  [data-spmenu="opened"] #header .l-header__menuBtn .c-iconBtn__icon::after {
    bottom: 0;
    width: 30px;
    background: var(--poscom-white);
    transform: rotate(-42deg);
  }
}

/* メニューボタン内を走る配送ラインのアニメーション */
@keyframes poscom-menu-line {
  0% {
    opacity: 0;
    transform: translateX(0);
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(260%);
  }
}

@media (max-width: 1280px) and (min-width: 960px) {
  /* 中間幅ではメニューボタンを少し小さくする */
  #header .l-header__menuBtn .c-iconBtn {
    width: 52px;
    height: 58px;
    border-radius: 16px;
  }

  /* 中間幅用のMENUラベル */
  #header .l-header__menuBtn .c-iconBtn::after {
    bottom: 8px;
    font-size: 8px;
    line-height: 1;
    letter-spacing: 0.1em;
  }

  /* 中間幅用の中央線 */
  #header .l-header__menuBtn .c-iconBtn__icon {
    top: 22px;
    width: 27px;
  }

  /* 中間幅用の上線 */
  #header .l-header__menuBtn .c-iconBtn__icon::before {
    top: -7px;
    width: 20px;
  }

  /* 中間幅用の下線 */
  #header .l-header__menuBtn .c-iconBtn__icon::after {
    bottom: -7px;
    width: 22px;
  }
}

/* ======================================

  POS-COMヘッダー：ロゴと電話カードの間隔調整

====================================== */

@media (min-width: 960px) {
  #header .l-header__inner {
    gap: clamp(10px, 0.8vw, 18px);
  }

  #header .l-header__logo {
    flex-basis: clamp(260px, 19vw, 340px);
  }

  #header .c-headLogo__img {
    max-height: 132px;
  }

  .poscom-header-panel {
    gap: clamp(10px, 1vw, 18px);
  }
}

@media (max-width: 1280px) and (min-width: 960px) {
  #header .l-header__inner {
    gap: 8px;
  }

  #header .l-header__logo {
    flex-basis: 236px;
  }

  #header .c-headLogo__img {
    max-height: 108px;
  }

  .poscom-header-panel {
    gap: 8px;
  }
}

@media (max-width: 959px) {
  .poscom-header-panel {
    display: none;
  }
}

/* ======================================

  POS-COMヘッダー：パネル全体のサイズ調整

====================================== */

@media (min-width: 960px) {
  #header .l-header__inner {
    gap: clamp(16px, 1.25vw, 26px);
    width: min(1840px, calc(100% - 48px));
    min-height: 118px;
    padding: 10px 0;
  }

  #header .l-header__logo {
    flex: 0 0 clamp(230px, 17vw, 300px);
  }

  #header .c-headLogo,
  #header .c-headLogo__link {
    width: 100%;
  }

  #header .c-headLogo__img {
    width: auto;
    max-width: 100%;
    max-height: 118px;
    height: auto;
    object-fit: contain;
  }

  .poscom-header-panel {
    gap: clamp(16px, 1.3vw, 28px);
  }

  .poscom-header-tel {
    flex: 0 0 clamp(300px, 18vw, 332px);
    min-height: 82px;
    padding: 8px 16px;
  }

  .poscom-header-tel__lead {
    font-size: 14px;
    line-height: 1.15;
  }

  .poscom-header-tel__number {
    gap: 0.14em;
    margin-top: 3px;
    font-size: clamp(27px, 1.95vw, 32px);
    line-height: 1;
    letter-spacing: 0.025em;
    white-space: nowrap;
  }

  .poscom-header-tel__icon {
    width: 1em;
    height: 1em;
  }

  .poscom-header-tel__time {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .poscom-service-nav {
    min-height: 94px;
    padding: 11px 18px;
    border-radius: 26px;
  }

  .poscom-service-nav__item {
    min-width: clamp(112px, 7.1vw, 148px);
    padding: 4px clamp(10px, 0.85vw, 16px);
  }

  .poscom-service-nav__icon {
    width: clamp(46px, 3.15vw, 58px);
    height: clamp(42px, 3vw, 54px);
    margin-bottom: 7px;
  }

  .poscom-service-nav__icon.-contact-icon {
    width: clamp(48px, 3.2vw, 56px);
    height: clamp(48px, 3.2vw, 56px);
  }

  .poscom-service-nav__label {
    font-size: clamp(15px, 1vw, 17px);
    line-height: 1.15;
  }

  #header .l-header__menuBtn.sp_ {
    margin-left: clamp(2px, 0.4vw, 8px);
  }
}

@media (max-width: 1280px) and (min-width: 960px) {
  #header .l-header__inner {
    gap: 12px;
    width: min(1248px, calc(100% - 28px));
    min-height: 106px;
    padding: 8px 0;
  }

  #header .l-header__logo {
    flex-basis: 214px;
  }

  #header .c-headLogo__img {
    max-height: 96px;
  }

  .poscom-header-panel {
    gap: 12px;
  }

  .poscom-header-tel {
    flex-basis: 286px;
    min-height: 76px;
    padding: 7px 12px;
  }

  .poscom-header-tel__lead {
    font-size: 12px;
  }

  .poscom-header-tel__number {
    font-size: 25px;
    letter-spacing: 0.015em;
  }

  .poscom-header-tel__time {
    font-size: 11px;
  }

  .poscom-service-nav {
    min-height: 82px;
    padding: 9px 10px;
    border-radius: 22px;
  }

  .poscom-service-nav__item {
    min-width: 86px;
    padding-inline: 7px;
  }

  .poscom-service-nav__icon {
    width: 42px;
    height: 38px;
    margin-bottom: 5px;
  }

  .poscom-service-nav__icon.-contact-icon {
    width: 42px;
    height: 42px;
  }

  .poscom-service-nav__label {
    font-size: 12px;
  }

  #header .l-header__menuBtn .c-iconBtn {
    width: 52px;
    height: 58px;
    border-radius: 16px;
  }
}

/* ======================================

  POS-COMヘッダー：ロゴサイズ最終調整

====================================== */

@media (min-width: 960px) {
  /* ロゴと電話番号カードを近づけるため、ヘッダー内の横間隔を詰める */
  #header .l-header__inner {
    gap: clamp(4px, 0.45vw, 10px);
  }

  /* ロゴの表示領域を広げて、左側の存在感を強める */
  #header .l-header__logo {
    flex: 0 0 clamp(300px, 20vw, 360px);
    margin-right: 0;
  }

  /* SWELL側のロゴリンク幅を固定せず、画像サイズに自然に合わせる */
  #header .c-headLogo,
  #header .c-headLogo__link {
    width: auto;
    max-width: none;
  }

  /* ロゴ画像は比率を崩さず、ヘッダー内で大きめに表示する */
  #header .c-headLogo__img {
    width: auto;
    max-width: clamp(300px, 20vw, 360px);
    max-height: 142px;
    height: auto;
  }

  /* ロゴ画像内の右余白を見越して、電話番号カード側を少し左へ寄せる */
  .poscom-header-panel {
    gap: clamp(4px, 0.65vw, 12px);
    margin-left: clamp(-64px, -3vw, -36px);
  }
}

@media (max-width: 1280px) and (min-width: 960px) {
  /* 中間幅では全体の横間隔をさらに圧縮する */
  #header .l-header__inner {
    gap: 4px;
  }

  /* 中間幅でもロゴが小さくなりすぎないようにする */
  #header .l-header__logo {
    flex-basis: 270px;
  }

  /* 中間幅用のロゴ最大サイズ */
  #header .c-headLogo__img {
    max-width: 270px;
    max-height: 124px;
  }

  /* 中間幅では電話番号カードをロゴ側へ少し寄せる */
  .poscom-header-panel {
    gap: 6px;
    margin-left: -42px;
  }
}

/* ======================================

  POS-COMヘッダー：電話番号カード余白微調整

====================================== */

@media (min-width: 960px) {
  /* 電話番号カードの内側余白だけを少し広げる */
  .poscom-header-tel {
    padding: 11px 19px;
  }
}

@media (max-width: 1280px) and (min-width: 960px) {
  /* 中間幅では広げすぎないように微調整する */
  .poscom-header-tel {
    padding: 9px 14px;
  }
}

/* ======================================

  POS-COMヘッダー：サービスナビhover演出

====================================== */

@media (min-width: 960px) {
  /* 各メニューに奥行きを持たせ、テキスト反転の基準にする */
  .poscom-service-nav__item {
    position: relative;
    perspective: 700px;
    transition:
      background-color 0.28s ease,
      color 0.28s ease;
  }

  /* hover時の下線は出さず、文字色と動きだけで反応を見せる */
  .poscom-service-nav__item::after {
    content: none;
  }

  /* hover時は背景を少し明るくして、押せる領域を分かりやすくする */
  .poscom-service-nav__item:hover {
    background: rgba(255, 255, 255, 0.58);
    color: var(--poscom-red);
  }

  /* お問い合わせ項目は赤文字との相性を保つため、背景だけ少し柔らかくする */
  .poscom-service-nav__item.-contact:hover {
    background: rgba(215, 25, 32, 0.07);
  }

  /* hover時も下線は表示しない */
  .poscom-service-nav__item:hover::after {
    content: none;
  }

  /* テキストだけを上品に反転させるための下準備 */
  .poscom-service-nav__label {
    position: relative;
    display: inline-block;
    transform-origin: center 58%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition:
      color 0.28s ease,
      letter-spacing 0.28s ease;
    will-change: transform;
  }

  /* テキストは軽くロールして戻る程度に抑え、読みづらい時間を短くする */
  .poscom-service-nav__item:hover .poscom-service-nav__label {
    color: var(--poscom-red);
    letter-spacing: 0.08em;
    animation: poscom-nav-label-roll 0.62s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* アイコンは回転させず、少し浮かせるだけにする */
  .poscom-service-nav__item:hover .poscom-service-nav__icon img {
    transform: translateY(-4px) scale(1.04);
  }

  /* お問い合わせは赤丸の背景ごと浮かせる */
  .poscom-service-nav__icon.-contact-icon {
    transition:
      transform 0.28s ease,
      background-color 0.28s ease,
      box-shadow 0.28s ease;
  }

  /* 赤丸全体をhover対象として動かし、アイコンだけが浮く違和感をなくす */
  .poscom-service-nav__item.-contact:hover .poscom-service-nav__icon.-contact-icon {
    background: rgba(215, 25, 32, 0.13);
    box-shadow: 0 8px 18px rgba(215, 25, 32, 0.16);
    transform: translateY(-4px) scale(1.04);
  }

  /* お問い合わせ内の画像は赤丸と一緒に動かすため、単独では動かさない */
  .poscom-service-nav__item.-contact:hover .poscom-service-nav__icon.-contact-icon img {
    transform: none;
  }
}

/* ナビテキストがくるっとロールして戻る、控えめな反転アニメーション */
@keyframes poscom-nav-label-roll {
  0% {
    transform: rotateX(0deg) rotateZ(0deg) translateY(0);
  }

  38% {
    transform: rotateX(-105deg) rotateZ(-1.5deg) translateY(-2px);
  }

  68% {
    transform: rotateX(-330deg) rotateZ(0.8deg) translateY(0);
  }

  100% {
    transform: rotateX(-360deg) rotateZ(0deg) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* 動きを減らす設定では、反転せず色変化だけにする */
  .poscom-service-nav__item:hover .poscom-service-nav__label {
    animation: none;
  }

  .poscom-service-nav__item:hover .poscom-service-nav__icon img {
    transform: none;
  }
}
/* ======================================

  POS-COMヘッダー：キャッチコピー横の光画像

====================================== */

@media (min-width: 960px) {
  /* 光画像が濃紺バーの外へはみ出さないようにする */
  #header .l-header__bar {
    position: relative;
    overflow: hidden;
  }

  /* キャッチコピー文字のすぐ右に画像を並べる */
  #header .c-catchphrase {
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  #header .c-catchphrase .poscom-catchphrase-shineText {
    position: relative;
    display: inline-block;
    color: inherit;
    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    white-space: inherit;
  }

  #header .c-catchphrase .poscom-catchphrase-shineText__base,
  #header .c-catchphrase .poscom-catchphrase-shineText__shine {
    display: inline-block;
    color: inherit;
    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    white-space: inherit;
  }

  #header .c-catchphrase .poscom-catchphrase-shineText__base {
    position: relative;
    z-index: 1;
  }

  #header .c-catchphrase .poscom-catchphrase-shineText__shine {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    color: transparent;
    background-image: linear-gradient(
      90deg,
      rgba(0, 31, 63, 0) 0%,
      rgba(255, 255, 255, 0.08) 18%,
      #dffcff 34%,
      #74e7f3 50%,
      #18b9d0 64%,
      #f7ffff 76%,
      rgba(255, 255, 255, 0.12) 88%,
      rgba(0, 31, 63, 0) 100%
    );
    background-repeat: no-repeat;
    background-size: 260% 100%;
    background-position: 200% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    pointer-events: none;
    transition: background-position 3.4s ease-out;
  }

  #header .c-catchphrase.is-shine-active .poscom-catchphrase-shineText__shine {
    background-position: -100% 50%;
  }

  /* Canvaで作成した光画像をキャッチコピー横に表示する */
  #header .c-catchphrase::after {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: clamp(150px, 12vw, 220px);
    height: clamp(22px, 2vw, 32px);
    margin-left: -14px;
    background-image: url("/wp-content/uploads/2026/05/bar-light.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.86;
    transform: translateX(0) scale(1);
    animation: poscomCatchLight 3.6s ease-in-out infinite;
    pointer-events: none;
  }
}

/* 光画像を控えめにきらめかせる */
@keyframes poscomCatchLight {
  0%,
  100% {
    opacity: 0.72;
    transform: translateX(0) scale(0.98);
  }

  45% {
    opacity: 1;
    transform: translateX(2px) scale(1.03);
  }

  70% {
    opacity: 0.82;
    transform: translateX(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #header .c-catchphrase .poscom-catchphrase-shineText__shine {
    background-position: 50% 50%;
    transition: none;
  }

  /* 動きを減らす設定では光画像のアニメーションを止める */
  #header .c-catchphrase::after {
    animation: none;
  }
}

/* ======================================

  POS-COM Mega Menu

====================================== */

@media (min-width: 960px) {
  /* メガメニューをヘッダー直下に展開するための基準にする */
  #header {
    position: relative;
  }

  /* PC用メガメニュー本体 */
  .poscom-mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 45;
    width: 100%;
    background:
      linear-gradient(
        135deg,
        var(--poscom-deep-navy) 0%,
        var(--poscom-navy) 50%,
        #0a8fa3 100%
      );
    box-shadow: 0 24px 48px rgba(6, 27, 58, 0.22);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition:
      opacity 0.24s ease,
      visibility 0.24s ease,
      transform 0.24s ease;
  }

  /* メガメニューを開いた状態 */
  .poscom-mega-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* メガメニューの内側幅 */
  .poscom-mega-menu__inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 34px 48px;
  }

  /* 各パネルは対象メニューだけ表示する */
  .poscom-mega-panel {
    display: none;
  }

  /* 表示中パネルのレイアウト */
  .poscom-mega-panel.is-active {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: clamp(36px, 3.2vw, 52px);
    align-items: center;
  }

  /* 左側の見出しエリア */
  .poscom-mega-panel__side {
    position: relative;
    color: var(--poscom-white);
  }

  /* 見出し左の細いアクセントライン */
  .poscom-mega-panel__side::before {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: #1098a7;
    box-shadow: 0 0 14px rgba(16, 152, 167, 0.32);
  }

  /* 英字見出し */
  .poscom-mega-panel__eyebrow {
    display: block;
    color: var(--poscom-white);
    font-family: var(--font-en);
    font-size: clamp(24px, 2.1vw, 34px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.16em;
  }

  /* 日本語見出し */
  .poscom-mega-panel__ja {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
  }

  /* 説明文 */
  .poscom-mega-panel__lead {
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-family: var(--font-readable);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.75;
  }

  /* メガメニュー説明文の固定改行行 */
  .poscom-mega-panel__lead-line {
    display: block;
    white-space: nowrap;
  }

  /* 右側の画像・リンクカード */
  .poscom-mega-panel__body {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 28px;
    align-items: stretch;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
  }

  /* メガメニュー画像枠 */
.poscom-mega-panel__image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  overflow: hidden;
  border-radius: 16px;
  background:
    linear-gradient(135deg, var(--poscom-gray-light), rgba(10, 143, 163, 0.18));
}

/* メガメニュー画像 */
.poscom-mega-panel__image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 180px;
  object-fit: contain;
  object-position: center center;
}

  /* リンク一覧 */
  .poscom-mega-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    align-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* リンク一覧の項目リセット */
  .poscom-mega-list li {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* メガメニュー内リンク */
  .poscom-mega-list a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 52px;
    overflow: hidden;
    padding: 12px 50px 12px 20px;
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 4px;
    background:
      linear-gradient(
        120deg,
        #329546 0%,
        #329546 36%,
        #2099a6 36.5%,
        #2099a6 100%
      );
    color: var(--poscom-white);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    text-shadow: 0 2px 8px rgba(6, 27, 58, 0.42);
    transition:
      background-color 0.25s ease,
      border-color 0.25s ease,
      color 0.25s ease,
      transform 0.25s ease,
      box-shadow 0.25s ease;
  }

  /* 2色ボタン本体を見せるため、上に重なる斜めオーバーレイは使わない */
  .poscom-mega-list a::before {
    content: none;
  }

  /* 右端の矢印で、次へ進む動線を明確にする */
  .poscom-mega-list a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    z-index: 1;
    width: 10px;
    height: 10px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    opacity: 0.9;
    transform: translateY(-50%) rotate(45deg);
    transition:
      opacity 0.25s ease,
      transform 0.25s ease;
  }

  /* ボタン内テキストを斜め面より前面に出す */
  .poscom-mega-list a {
    isolation: isolate;
  }

  /* hover時は濃紺寄りに締めて、白文字の視認性を保つ */
  .poscom-mega-list a:hover {
    border-color: rgba(255, 255, 255, 0.9);
    background:
      linear-gradient(
        120deg,
        #329546 0%,
        #329546 36%,
        #2099a6 36.5%,
        #2099a6 100%
      );
    color: var(--poscom-white);
    box-shadow:
      0 10px 24px rgba(6, 27, 58, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transform: translateX(4px);
  }

  /* hover時も余計なオーバーレイは表示しない */
  .poscom-mega-list a:hover::before {
    content: none;
  }

  /* hover時は右矢印を少し前へ送る */
  .poscom-mega-list a:hover::after {
    opacity: 0.72;
    transform: translate(3px, -50%) rotate(45deg);
  }

  /* hover中のヘッダーナビ項目を少し強調する */
  .poscom-service-nav__item.is-mega-active {
    background: rgba(255, 255, 255, 0.62);
    color: var(--poscom-red);
  }
}

@media (max-width: 1280px) and (min-width: 960px) {
  /* 中間幅ではメガメニュー全体を少し詰める */
  .poscom-mega-menu__inner {
    padding: 28px 32px;
  }

  /* 中間幅用のパネル比率 */
  .poscom-mega-panel.is-active {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 30px;
  }

  /* 中間幅用の右側カード */
  .poscom-mega-panel__body {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 20px;
    padding: 18px;
  }

  /* 中間幅用の英字見出し */
  .poscom-mega-panel__eyebrow {
    font-size: 24px;
  }

  /* 中間幅用の説明文 */
  .poscom-mega-panel__lead {
    font-size: 13px;
    line-height: 1.72;
  }

  /* 中間幅用の説明文行 */
  .poscom-mega-panel__lead-line {
    white-space: nowrap;
  }

  /* 中間幅用のリンク */
  .poscom-mega-list a {
    min-height: 48px;
    padding: 10px 13px;
    font-size: 14px;
  }
}

@media (max-width: 959px) {
  /* スマホではPC用メガメニューを表示しない */
  .poscom-mega-menu {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* 動きを減らす設定ではメガメニューの移動演出を止める */
  .poscom-mega-menu,
  .poscom-mega-list a {
    transition: none;
    transform: none;
  }
}

/* メガメニュー内の小アイコン */
.poscom-mega-list__icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: inline-block;
  flex-shrink: 0;
  margin-right: 10px;
  vertical-align: middle;
}

/* ======================================

  POS-COM Fixed Header

====================================== */

@media (min-width: 960px) {
  /* 追従ヘッダー全体はSWELLの表示制御を活かしつつ、白背景と薄い影で整える */
  #fix_header.l-fixHeader {
    z-index: 60;
    background: var(--poscom-white);
    box-shadow: 0 8px 24px rgba(6, 27, 58, 0.12);
  }

  /* ロゴとコンパクトナビを横並びにする */
  #fix_header .l-fixHeader__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(16px, 2vw, 28px);
    min-height: 72px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /* SWELL標準の追従ヘッダーナビはPCでは非表示にする */
  #fix_header .l-fixHeader__gnav {
    display: none;
  }

  /* 追従ヘッダーのロゴ領域 */
  #fix_header .l-fixHeader__logo {
    flex: 0 0 clamp(130px, 12vw, 170px);
    min-width: 0;
  }

  /* 追従ヘッダーのロゴリンク */
  #fix_header .c-headLogo,
  #fix_header .c-headLogo__link {
    display: flex;
    align-items: center;
    width: auto;
    max-width: 100%;
  }

  /* 追従ヘッダーのロゴ画像 */
  #fix_header .c-headLogo__img {
    width: auto;
    max-width: 100%;
    max-height: 56px;
    height: auto;
    object-fit: contain;
  }

  /* 追従ヘッダー専用のコンパクトナビ */
  #fix_header .poscom-fixHeader-panel.poscom-service-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    max-width: min(1280px, calc(100vw - 340px));
    min-height: 56px;
    height: auto;
    margin: 0 0 0 -48px;
    padding: 6px clamp(24px, 2vw, 42px) 6px clamp(48px, 3vw, 72px);
    overflow: hidden;
    border-radius: 999px;
    background: rgba(238, 242, 245, 0.92);
    box-shadow: inset 0 0 0 1px rgba(11, 44, 94, 0.06);
  }

  /* 追従ヘッダー左側の余白に電話番号だけを配置する */
  #fix_header .poscom-fixHeader-tel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42em;
    flex: 0 0 auto;
    min-height: 44px;
    margin-right: 12px;
    padding: 0 22px;
    border: 1px solid rgba(11, 44, 94, 0.18);
    border-radius: 999px;
    background: var(--poscom-white);
    color: var(--poscom-deep-navy);
    font-family: var(--font-en);
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(6, 27, 58, 0.08);
    transition:
      border-color 0.22s ease,
      color 0.22s ease,
      transform 0.22s ease,
      box-shadow 0.22s ease;
  }

  /* 電話番号の数字 */
  #fix_header .poscom-fixHeader-tel__number {
    display: block;
    font-size: clamp(18px, 1.45vw, 24px);
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  /* 電話番号の前に置く画像アイコン */
  #fix_header .poscom-fixHeader-tel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.24em;
    height: 1.24em;
    flex-shrink: 0;
  }

  /* 電話アイコン画像 */
  #fix_header .poscom-fixHeader-tel__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* 電話番号の横に営業日時だけを控えめに表示する */
  #fix_header .poscom-fixHeader-hours {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-right: auto;
    color: var(--poscom-muted);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  /* 電話番号hover */
  #fix_header .poscom-fixHeader-tel:hover {
    border-color: rgba(215, 25, 32, 0.32);
    color: var(--poscom-red);
    box-shadow: 0 8px 18px rgba(6, 27, 58, 0.12);
    transform: translateY(-1px);
  }

  /* 追従ヘッダーの各ナビ項目 */
  #fix_header .poscom-fixHeader-panel .poscom-service-nav__item {
    position: relative;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: clamp(88px, 7.2vw, 110px);
    min-height: 48px;
    padding: 4px 10px;
    border-left: 1px solid rgba(11, 44, 94, 0.14);
    background: transparent;
    color: var(--poscom-navy);
    text-align: center;
    text-decoration: none;
    transition:
      background-color 0.22s ease,
      color 0.22s ease,
      transform 0.22s ease;
  }

  /* 先頭項目の区切り線は消す */
  #fix_header .poscom-fixHeader-panel .poscom-service-nav__item.-shipping {
    border-left: 0;
  }

  /* 追従ヘッダーのナビhover */
  #fix_header .poscom-fixHeader-panel .poscom-service-nav__item:hover {
    background: rgba(255, 255, 255, 0.72);
    color: var(--poscom-red);
    transform: translateY(-1px);
  }

  /* お問合せだけ赤を少し強める */
  #fix_header .poscom-fixHeader-panel .poscom-service-nav__item.-contact {
    color: #16c6d3;
  }

  /* 追従ヘッダーのアイコン枠 */
  #fix_header .poscom-fixHeader-panel .poscom-service-nav__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 30px;
    margin-bottom: 3px;
    overflow: visible;
  }

  /* 追従ヘッダーのお問合せアイコン枠 */
  #fix_header .poscom-fixHeader-panel .poscom-service-nav__icon.-contact-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(215, 25, 32, 0.08);
  }

  /* 追従ヘッダーのアイコン画像 */
  #fix_header .poscom-fixHeader-panel .poscom-service-nav__icon img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.22s ease;
  }

  /* hover時はアイコンを少しだけ浮かせる */
  #fix_header .poscom-fixHeader-panel .poscom-service-nav__item:hover .poscom-service-nav__icon img {
    transform: translateY(-2px) scale(1.03);
  }

  /* お問合せは赤丸ごと動かす */
  #fix_header .poscom-fixHeader-panel .poscom-service-nav__item.-contact:hover .poscom-service-nav__icon.-contact-icon {
    transform: translateY(-2px) scale(1.03);
  }

  /* お問合せ内の画像だけが単独で動かないようにする */
  #fix_header .poscom-fixHeader-panel .poscom-service-nav__item.-contact:hover .poscom-service-nav__icon.-contact-icon img {
    transform: none;
  }

  /* 追従ヘッダーのラベル */
  #fix_header .poscom-fixHeader-panel .poscom-service-nav__label {
    display: block;
    color: inherit;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  /* 追従ヘッダーから開くメガメニューを、追従ヘッダーの直下に表示する */
  #fix_header .poscom-mega-menu {
    z-index: 65;
  }

  #fix_header .poscom-fixHeader-menuBtn {
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-left: clamp(8px, 1vw, 16px);
  }

  #fix_header .poscom-fixHeader-menuBtn .c-iconBtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    background:
      linear-gradient(135deg, var(--poscom-deep-navy) 0%, var(--poscom-navy) 64%, #123e73 100%);
    color: var(--poscom-white);
    box-shadow:
      0 12px 26px rgba(6, 27, 58, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition:
      background-color 0.3s ease,
      border-color 0.3s ease,
      box-shadow 0.3s ease,
      transform 0.3s ease;
  }

  #fix_header .poscom-fixHeader-menuBtn .c-iconBtn::before {
    content: "";
    position: absolute;
    top: 16px;
    left: -70%;
    z-index: 1;
    width: 64%;
    height: 2px;
    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.72) 44%,
        rgba(34, 142, 56, 0.62) 70%,
        transparent 100%
      );
    box-shadow: 0 0 12px rgba(34, 142, 56, 0.28);
    opacity: 0;
    pointer-events: none;
  }

  #fix_header .poscom-fixHeader-menuBtn .c-iconBtn:hover {
    border-color: rgba(255, 255, 255, 0.26);
    background:
      linear-gradient(135deg, var(--poscom-navy) 0%, #123e73 60%, var(--poscom-red) 100%);
    box-shadow:
      0 14px 30px rgba(6, 27, 58, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
  }

  #fix_header .poscom-fixHeader-menuBtn .c-iconBtn:hover::before {
    animation: poscom-menu-line 0.72s cubic-bezier(0.16, 1, 0.3, 1);
  }

  #fix_header .poscom-fixHeader-menuBtn .c-iconBtn::after {
    content: "MENU";
    position: absolute;
    right: 0;
    bottom: 7px;
    left: 0;
    z-index: 3;
    width: 100%;
    color: var(--poscom-white);
    font-family: var(--font-en);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.12em;
    text-align: center;
  }

  #fix_header .poscom-fixHeader-menuBtn .c-iconBtn__icon {
    position: absolute;
    top: 20px;
    left: 50%;
    z-index: 2;
    display: block;
    width: 27px;
    height: 2px;
    margin: 0;
    border-radius: 999px;
    background: var(--poscom-white);
    font-size: 0;
    line-height: 0;
    transform: translateX(-50%);
    transition:
      width 0.3s ease,
      background-color 0.3s ease,
      transform 0.3s ease;
  }

  #fix_header .poscom-fixHeader-menuBtn .c-iconBtn__icon::before,
  #fix_header .poscom-fixHeader-menuBtn .c-iconBtn__icon::after {
    content: "";
    position: absolute;
    right: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--poscom-white);
    transition:
      top 0.3s ease,
      bottom 0.3s ease,
      width 0.3s ease,
      background-color 0.3s ease,
      transform 0.3s ease;
  }

  #fix_header .poscom-fixHeader-menuBtn .c-iconBtn__icon::before {
    top: -8px;
    width: 20px;
  }

  #fix_header .poscom-fixHeader-menuBtn .c-iconBtn__icon::after {
    bottom: -8px;
    width: 22px;
  }

  #fix_header .poscom-fixHeader-menuBtn .c-iconBtn:hover .c-iconBtn__icon {
    width: 31px;
    transform: translateX(calc(-50% + 1px));
  }

  #fix_header .poscom-fixHeader-menuBtn .c-iconBtn:hover .c-iconBtn__icon::before {
    width: 23px;
  }

  #fix_header .poscom-fixHeader-menuBtn .c-iconBtn:hover .c-iconBtn__icon::after {
    width: 25px;
  }

  [data-spmenu="opened"] #fix_header .poscom-fixHeader-menuBtn .c-iconBtn {
    background:
      linear-gradient(135deg, var(--poscom-deep-navy) 0%, var(--poscom-navy) 58%, var(--poscom-red) 100%);
  }

  [data-spmenu="opened"] #fix_header .poscom-fixHeader-menuBtn .c-iconBtn::after {
    content: "CLOSE";
    font-size: 8px;
    letter-spacing: 0.1em;
  }

  [data-spmenu="opened"] #fix_header .poscom-fixHeader-menuBtn .c-iconBtn__icon {
    width: 28px;
    background: transparent;
    transform: translateX(-50%);
  }

  [data-spmenu="opened"] #fix_header .poscom-fixHeader-menuBtn .c-iconBtn__icon::before {
    top: 0;
    width: 28px;
    background: var(--poscom-white);
    transform: rotate(42deg);
  }

  [data-spmenu="opened"] #fix_header .poscom-fixHeader-menuBtn .c-iconBtn__icon::after {
    bottom: 0;
    width: 28px;
    background: var(--poscom-white);
    transform: rotate(-42deg);
  }
}

@media (max-width: 1280px) and (min-width: 960px) {
  /* 中間幅では追従ヘッダーを少し詰める */
  #fix_header .l-fixHeader__inner {
    gap: 12px;
    min-height: 66px;
  }

  /* 中間幅用ロゴ */
  #fix_header .l-fixHeader__logo {
    flex-basis: 126px;
  }

  /* 中間幅用ロゴ画像 */
  #fix_header .c-headLogo__img {
    max-height: 48px;
  }

  /* 中間幅用ナビ */
  #fix_header .poscom-fixHeader-panel.poscom-service-nav {
    max-width: none;
    min-height: 52px;
    margin-left: -28px;
    padding: 5px 18px 5px 34px;
  }

  /* 中間幅用の電話番号 */
  #fix_header .poscom-fixHeader-tel {
    min-height: 40px;
    margin-right: 8px;
    padding: 0 16px;
  }

  /* 中間幅用の電話番号数字 */
  #fix_header .poscom-fixHeader-tel__number {
    font-size: 18px;
    letter-spacing: 0.025em;
  }

  /* 中間幅用の営業日時 */
  #fix_header .poscom-fixHeader-hours {
    min-height: 40px;
    font-size: 11px;
    letter-spacing: 0.02em;
  }

  /* 中間幅用ナビ項目 */
  #fix_header .poscom-fixHeader-panel .poscom-service-nav__item {
    min-width: 78px;
    padding-inline: 7px;
  }

  /* 中間幅用アイコン */
  #fix_header .poscom-fixHeader-panel .poscom-service-nav__icon {
    width: 28px;
    height: 27px;
  }

  /* 中間幅用ラベル */
  #fix_header .poscom-fixHeader-panel .poscom-service-nav__label {
    font-size: 12px;
  }

  #fix_header .poscom-fixHeader-menuBtn .c-iconBtn {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  #fix_header .poscom-fixHeader-menuBtn .c-iconBtn::after {
    bottom: 6px;
    font-size: 8px;
  }

  #fix_header .poscom-fixHeader-menuBtn .c-iconBtn__icon {
    top: 18px;
    width: 25px;
  }
}

@media (max-width: 959px) {
  /* スマホでは追従ヘッダー専用ナビを表示しない */
  .poscom-fixHeader-panel,
  .poscom-fixHeader-menuBtn {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* 動きを減らす設定では追従ヘッダー内の動きを止める */
  #fix_header .poscom-fixHeader-panel .poscom-service-nav__item,
  #fix_header .poscom-fixHeader-panel .poscom-service-nav__icon img,
  #fix_header .poscom-fixHeader-menuBtn .c-iconBtn {
    transition: none;
    transform: none;
  }
}

/* ======================================
  POS-COM PC Menu Button Balance Adjust
  通常ヘッダーのハンバーガー線だけを少し右へ寄せる
====================================== */

@media (min-width: 960px) {
  #header .l-header__menuBtn .c-iconBtn__icon {
    left: calc(50% + 2px);
  }

  #header .l-header__menuBtn .c-iconBtn:hover .c-iconBtn__icon {
    transform: translateX(calc(-50% + 1px));
  }

  [data-spmenu="opened"] #header .l-header__menuBtn .c-iconBtn__icon {
    left: calc(50% + 2px);
    transform: translateX(-50%);
  }
}