@charset "UTF-8";
/*=======================================
	breakpoint
=======================================*/
/*=======================================
	hover
=======================================*/
/*=======================================
	中央配置
=======================================*/
/*=======================================
	可変レスポンシブ
=======================================*/
/* PC */
/* TB */
/* SP */
/*=======================================
	ブラウザ別
=======================================*/
/* Safari */
/* Firefox */
/*=======================================
  clampの計算
=======================================*/
/*-------------------------
- header--products
-------------------------*/
/*=======================================
　header--products
=======================================*/
.header--products .header__site_label {
  position: absolute;
  left: 175px;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 160px;
  height: 40px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: block;
}
.header--products .header__site_label a {
  border-radius: 5px;
  background: #F6F6F8;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--main_black);
  white-space: nowrap;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}
.header--products .header__nav__list {
  -webkit-column-gap: 29px;
     -moz-column-gap: 29px;
          column-gap: 29px;
}
.header--products .header__action {
  width: 140px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 15px;
}
.header--products .header__action--brand img {
  width: 18px;
}
.header--products .header__action--contact img {
  width: 21px;
}
@media only screen and (max-width: 1180px) {
  .header--products .header__logo a img {
    width: 70px;
  }
}
.header--products .header__logo a:focus-visible {
  outline: 2px solid var(--main_red);
  outline-offset: 4px;
}
@media only screen and (max-width: 1180px) {
  .header--products .header__site_label {
    display: none;
  }
}
.header--products .header__sp_tab {
  display: block;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
}
.header--products .header__sp_tab[aria-current] {
  cursor: default;
}
.header--products .header__nav__link:focus-visible,
.header--products .header__sp_linklist button:focus-visible,
.header--products .header__sp_tab:focus-visible {
  outline: 2px solid var(--main_red);
  outline-offset: -4px;
}

/*=======================================
　pmega（製品カタログサイト用メガメニュー）
=======================================*/
.pmega[hidden] {
  display: none;
}

/* 背景スクロールロック（PC/SP共通）
   ─ スクロールバーが消える分の横ずれを、body と position:fixed の要素に
     padding-right で補填する（--pmega-sbw は JS が設定） */
body.is-pmega-locked {
  overflow: hidden;
  padding-right: var(--pmega-sbw, 0px);
}

body.is-pmega-locked .header--products,
body.is-pmega-locked .pmega,
body.is-pmega-locked .pmega__backdrop {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-right: var(--pmega-sbw, 0px);
}

.pmega__backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  z-index: 90;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}
.pmega__backdrop.is-visible {
  display: block;
}
.pmega__backdrop.is-active {
  opacity: 1;
}
@media only screen and (max-width: 1180px) {
  .pmega__backdrop {
    display: none !important;
  }
}

/* -------------------------------------------------
   PC
------------------------------------------------- */
@media only screen and (min-width: 1181px) {
  .header--products .header__inner {
    position: relative;
    z-index: 110;
  }
  .pmega {
    position: fixed;
    top: 90px;
    left: 0;
    width: 100%;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    -ms-scroll-chaining: none;
        overscroll-behavior: contain;
    background: #fff;
    border-top: 1px solid #E8E8E8;
    -webkit-box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    z-index: 95;
    opacity: 0;
    -webkit-transform: translateY(-8px);
        -ms-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-transition: opacity 0.25s ease, -webkit-transform 0.25s ease;
    transition: opacity 0.25s ease, -webkit-transform 0.25s ease;
    transition: opacity 0.25s ease, transform 0.25s ease;
    transition: opacity 0.25s ease, transform 0.25s ease, -webkit-transform 0.25s ease;
  }
  .pmega.is-active {
    opacity: 1;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
  }
  .pmega__card {
    position: relative;
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
  }
  .pmega__sphead,
  .pmega__sptabs,
  .pmega__spcontact,
  .pmega__back,
  .pmega__panel_head {
    display: none;
  }
  .pmega__inner {
    display: grid;
    grid-template-columns: 299px minmax(0, 900px);
    grid-template-rows: auto 1fr;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    padding: 30px 0 40px;
  }
  .pmega__head {
    grid-column: 1;
    grid-row: 1;
    padding-bottom: 16px;
  }
  .pmega__rail {
    grid-column: 1;
    grid-row: 2;
  }
  /* 右：グレーパネル（Figma Frame 382）
     高さは Figma の実寸で固定し、カテゴリー／メーカーを切り替えても変えない。
     製品情報は下 60px がCTA用の予約領域。CTAは既存位置から下へ5px移動し、上下10pxで配置する。
     トムススタイリングはFigmaにCTAが無いため、下paddingもFigma実寸の 20px。 */
  .pmega__body {
    grid-column: 2;
    grid-row: 1/span 2;
    min-width: 0;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    height: 487px;
    padding: 20px 28px 60px;
    background: #F1F1F4;
    border-radius: 10px;
  }
  .pmega--styling .pmega__body {
    height: 383px;
    padding-bottom: 20px;
  }
  .pmega__ttl_en {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 26px;
    line-height: 1.1538461538;
    color: var(--main_black);
  }
  .pmega__ttl_jp {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4375;
    color: var(--main_gray);
  }
  /* 左：カテゴリー / メーカー
     Figma実測：項目高30px・項目間隔35px（＝隙間5px）。
     カテゴリーが9→12件に増えたぶん、縦の間隔を10px→5pxに詰めている。 */
  .pmega__rail_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    row-gap: 5px;
    width: 190px;
    list-style: none;
  }
  .pmega__rail_btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-column-gap: 10px;
       -moz-column-gap: 10px;
            column-gap: 10px;
    width: 100%;
    height: 30px;
    padding: 0 15px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    background: none;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    -webkit-transition: background 0.2s ease;
    transition: background 0.2s ease;
  }
  /* 右：パネル（グレーパネル内をタブ行＋スクロール領域で分割）
     内容量が少なくても縮めず、常に固定枠いっぱいを占める。 */
  /* 共通CTA：グレーパネルの下部予約帯へ絶対配置する。
     パネル切替でも一覧の内部スクロールでも位置が動かない（Figmaも同じ絶対配置）。 */
  /* スクロール下端のフェード（PC専用）
     Figma では PC「製品情報」パネル下端のグラデーション（844×47）としてのみ存在し、
     PC「トムススタイリング」とスマホ用フレームには無い。
     要素の枠に対して掛かるので、下にCTAボタンが入っても位置がずれない。
     is-scrollable の付け外しは JS（まだ下に続きがあるときだけ付く）。 */
  /* 閉じるボタン */
}
@media only screen and (min-width: 1181px) and (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .pmega__rail_btn:hover {
    background: #F7F7F9;
  }
}
@media only screen and (min-width: 1181px) and (min-width: 769px) and (-ms-high-contrast: none), only screen and (min-width: 1181px) and (min-width: 769px) and (-ms-high-contrast: active) {
  .pmega__rail_btn:hover {
    background: #F7F7F9;
  }
}
@media only screen and (min-width: 1181px) {
  .pmega__rail_btn.is-active {
    background: #F1F1F4;
  }
  .pmega__rail_btn.is-active .pmega__rail_txt {
    font-weight: 700;
  }
  .pmega__rail_btn.is-active .pmega__rail_dot {
    opacity: 1;
  }
  .pmega__rail_txt {
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0;
    color: #555;
  }
  .pmega__rail_dot {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--main_red);
    opacity: 0;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
  }
  .pmega__panel {
    display: none;
    position: relative;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    min-height: 0;
  }
  .pmega__panel.is-active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .pmega__tabs {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-column-gap: 15px;
       -moz-column-gap: 15px;
            column-gap: 15px;
    row-gap: 6px;
    margin-bottom: 20px;
  }
  .pmega__tab {
    background: none;
    border: none;
    -webkit-box-shadow: inset 0 -2px 0 transparent;
            box-shadow: inset 0 -2px 0 transparent;
    padding: 0 5px 5px;
    font-family: inherit;
    font-size: 18px;
    line-height: 1.2222222222;
    letter-spacing: 0;
    color: var(--main_gray);
    cursor: pointer;
    -webkit-transition: border-color 0.2s ease;
    transition: border-color 0.2s ease;
  }
  .pmega__tab.is-active {
    font-weight: 500;
    -webkit-box-shadow: inset 0 -2px 0 var(--main_red);
            box-shadow: inset 0 -2px 0 var(--main_red);
  }
  .pmega__tab:focus-visible {
    outline: 2px solid var(--main_red);
    outline-offset: 2px;
  }
  .pmega__scroll {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -ms-scroll-chaining: none;
        overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .pmega__scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  .pmega__foot {
    position: absolute;
    right: 28px;
    bottom: 10px;
    margin: 0;
  }
  .pmega__panel.is-scrollable .pmega__scroll {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 47px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 47px), transparent 100%);
  }
  .pmega__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    list-style: none;
  }
  .pmega__grid[hidden] {
    display: none;
  }
  .pmega__close {
    position: absolute;
    top: 30px;
    right: 0;
    width: 20px;
    height: 20px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
  }
  .pmega__close img {
    width: 100%;
    height: auto;
    display: block;
    -webkit-filter: brightness(0) saturate(100%);
            filter: brightness(0) saturate(100%);
  }
}
@media only screen and (min-width: 1181px) and (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .pmega__close:hover {
    opacity: 0.6;
  }
}
@media only screen and (min-width: 1181px) and (min-width: 769px) and (-ms-high-contrast: none), only screen and (min-width: 1181px) and (min-width: 769px) and (-ms-high-contrast: active) {
  .pmega__close:hover {
    opacity: 0.6;
  }
}
/* -------------------------------------------------
   共通（CTAボタン / カード）
   ※ スクロール下端のフェードは PC専用のため PCブロック側に定義
------------------------------------------------- */
/* 共通CTA「新製品情報はこちら」
   ─ #pmega-products と #pmega-styling に1個ずつ配置し、
     パネル切替やPCの一覧内部スクロールにかかわらず同じ位置へ共通表示する。
     リンク先: https://tomscars.tomsracing.co.jp/new-product/ */
.pmega__foot {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: 20px;
}

.pmega__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 176px;
  height: 40px;
  padding: 0 20px;
  background: #fff;
  border: 1px solid #D9D9DC;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--main_black);
  text-decoration: none;
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
}
.pmega__btn::after {
  content: "";
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--main_black);
  border-right: 1px solid var(--main_black);
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .pmega__btn:hover {
    background: #F1F1F4;
    opacity: 1;
  }
  .pmega__btn:hover::after {
    -webkit-transform: translateX(5px) rotate(45deg);
        -ms-transform: translateX(5px) rotate(45deg);
            transform: translateX(5px) rotate(45deg);
  }
}
@media (min-width: 769px) and (-ms-high-contrast: none), (min-width: 769px) and (-ms-high-contrast: active) {
  .pmega__btn:hover {
    background: #F1F1F4;
    opacity: 1;
  }
  .pmega__btn:hover::after {
    -webkit-transform: translateX(5px) rotate(45deg);
        -ms-transform: translateX(5px) rotate(45deg);
            transform: translateX(5px) rotate(45deg);
  }
}
.pmega__btn:focus-visible {
  outline: 2px solid var(--main_red);
  outline-offset: 2px;
}

.pmega__item {
  min-width: 0;
}

.pmega__link {
  position: relative;
  display: block;
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  padding: 0 0 10px;
  text-align: center;
  color: var(--main_gray);
}
.pmega__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  -webkit-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
}
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .pmega__link:hover {
    opacity: 1;
  }
}
@media (min-width: 769px) and (-ms-high-contrast: none), (min-width: 769px) and (-ms-high-contrast: active) {
  .pmega__link:hover {
    opacity: 1;
  }
}
.pmega__link:focus-visible {
  outline: 2px solid var(--main_red);
  outline-offset: 2px;
}

@media only screen and (min-width: 1181px) and (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .pmega__link:hover::after {
    border-color: #BBBBBE;
  }
}
@media only screen and (min-width: 1181px) and (min-width: 769px) and (-ms-high-contrast: none), only screen and (min-width: 1181px) and (min-width: 769px) and (-ms-high-contrast: active) {
  .pmega__link:hover::after {
    border-color: #BBBBBE;
  }
}
/* 画像枠（Figma Frame 495）は通常・tallとも同じ高さで、中の画像の置き方だけが違う。
   通常 : 枠205x90 に 205x80 を y=5 で配置（上下5px）
   tall : 枠205x90 に 205x85 を y=0 で配置（上0 / 下5px） */
.pmega__thumb {
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  aspect-ratio: 205/90;
  padding: 5px 0;
  overflow: hidden;
}
.pmega__thumb picture {
  display: block;
  width: 100%;
  height: 100%;
}
.pmega__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.pmega__thumb--tall {
  padding: 0 0 5px;
}

.pmega__text {
  display: block;
}

/* ---- PCカードの箱（Figma実寸）----------------------------------------
   カード外形高 $pmega-pc-card-h
   ├─ 画像枠     : $pmega-pc-thumb-box-h（カード上端と一致。中の画像位置は .pmega__thumb 参照）
   └─ テキスト領域: 残りの高さ。下10pxを除いた範囲に
                    名称＋サブ名称を1つのまとまりとして上下中央へ。
   共通定義（height:100% など）の後に置いて確実に上書きする。 */
@media only screen and (min-width: 1181px) {
  .pmega__link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 138px;
    padding: 0;
  }
  .pmega__thumb {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
  }
  .pmega__text {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    min-height: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 0 10px 10px;
  }
  .pmega__name {
    padding: 0;
    font-size: 14px;
    line-height: 1.4285714286;
  }
  .pmega__sub {
    padding: 0;
    font-size: 11px;
    line-height: 1.1818181818;
  }
}
.pmega__tab_label {
  display: block;
  text-align: center;
}

.pmega__br {
  display: inline;
}

.pmega__tab_label .pmega__br {
  display: none;
}

.pmega__name {
  display: block;
  padding: 0;
  font-weight: 700;
  color: var(--main_gray);
  letter-spacing: 0;
  word-break: break-word;
}

.pmega__sub {
  display: block;
  padding: 0 10px;
  color: #BBBBBE;
  letter-spacing: 0;
  word-break: break-word;
}

/* -------------------------------------------------
   SP
------------------------------------------------- */
@media only screen and (max-width: 1180px) {
  .pmega {
    position: static;
  }
  .header.is-pmega-open .header__sp_menu {
    display: none;
  }
  .pmega__card {
    position: fixed;
    top: 20px;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 336px;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background: #fff;
    border-radius: 10px;
    color: #111;
    z-index: 230;
    overflow: hidden;
    -ms-scroll-chaining: none;
        overscroll-behavior: contain;
    -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  }
  .pmega__close,
  .pmega__ttl_en {
    display: none;
  }
  body.is-pmega-locked .pmega__card,
  body.is-pmega-locked .header--products .header__sp_menu {
    margin-left: calc(var(--pmega-sbw, 0px) * -0.5);
  }
  /* 共通CTA：Figmaのスマホ実寸に合わせ、左右18pxを空けて幅260pxで置く
     （カード一覧・戻る・お問い合わせ導線のいずれも覆わない通常フロー配置）
     SPでは Figma どおりカテゴリー一覧（第2階層）のときだけ出す。
     各カテゴリーを開いた第3階層の全画面（バリアント2/4〜13）にはCTAが無い。 */
  .pmega__foot {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-top: 20px;
    padding: 0 18px;
  }
  .pmega.is-panel-open .pmega__foot {
    display: none;
  }
  .pmega__btn {
    width: 100%;
  }
  .pmega__sphead {
    position: relative;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    height: 51px;
  }
  .pmega__splogo {
    position: absolute;
    top: 20px;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 70px;
  }
  .pmega__splogo img {
    width: 100%;
    height: auto;
    display: block;
  }
  .pmega__spclose {
    position: absolute;
    top: 23px;
    right: 19px;
    width: 19px;
    height: 19px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
  }
  .pmega__spclose img {
    width: 100%;
    height: auto;
    display: block;
  }
  .pmega__inner {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 15px 20px 5px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* 見出し（戻る + タイトル） */
  .pmega__head,
  .pmega__panel_head {
    position: -webkit-sticky;
    position: sticky;
    top: 5px;
    z-index: 2;
    margin: 5px auto 0;
    padding-bottom: 20px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    background: #fff;
  }
  .pmega__head::before,
  .pmega__panel_head::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 20px;
    background: #fff;
  }
  .pmega__ttl_jp,
  .pmega__panel_ttl {
    font-size: 14px;
    color: #919191;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
  }
  .pmega__back {
    position: absolute;
    top: -1px;
    left: 18px;
    width: 14px;
    height: 14px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
  }
  .pmega__back::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    border-left: 1px solid #111;
    border-bottom: 1px solid #111;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  /* 第2階層リスト（カテゴリー / メーカー） */
  .pmega__rail {
    padding: 0 18px;
  }
  .pmega__rail_list {
    list-style: none;
  }
  .pmega__rail_list li {
    border-bottom: 1px solid #E5E5E5;
  }
  .pmega__back:focus-visible,
  .pmega__spclose:focus-visible,
  .pmega__rail_btn:focus-visible,
  .pmega__tab:focus-visible {
    outline: 2px solid var(--main_red);
    outline-offset: 2px;
  }
  .pmega__rail_btn {
    position: relative;
    width: 100%;
    height: 46px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0 10px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    text-align: left;
    color: #111;
    cursor: pointer;
  }
  .pmega__rail_btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 9px;
    height: 9px;
    border-top: 1px solid #111;
    border-right: 1px solid #111;
    -webkit-transform: translateY(-50%) rotate(45deg);
        -ms-transform: translateY(-50%) rotate(45deg);
            transform: translateY(-50%) rotate(45deg);
  }
  .pmega__rail_dot {
    display: none;
  }
  /* 第3階層パネル */
  .pmega__panel {
    display: none;
  }
  .pmega__panel.is-active {
    display: block;
  }
  .pmega.is-panel-open .pmega__head,
  .pmega.is-panel-open .pmega__rail {
    display: none;
  }
  .pmega:not(.is-panel-open) .pmega__panel {
    display: none;
  }
  /* タブ行（Figma Frame 499：幅276 / GRID / spacing 10 / 上padding 10）
     カテゴリー3つ … 85.3px × 3 を1行（276 = 85.3×3 + 10×2）
     カテゴリー4つ … 133px の2列×2行に、各タブを中央寄せ
     メーカー2つ  … 内容幅のまま1行 */
  .pmega__tabs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 10px;
    background: #F1F1F4;
    border-radius: 5px 5px 0 0;
    padding: 20px 10px 0;
  }
  .pmega__tab {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 20px) / 3);
            flex: 0 0 calc((100% - 20px) / 3);
    max-width: 100%;
    padding: 0 5px 5px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.2142857143;
    letter-spacing: 0;
    color: var(--main_gray);
    cursor: pointer;
    -webkit-box-shadow: inset 0 -2px 0 transparent;
            box-shadow: inset 0 -2px 0 transparent;
  }
  .pmega__tab.is-active {
    font-weight: 500;
    -webkit-box-shadow: inset 0 -2px 0 var(--main_red);
            box-shadow: inset 0 -2px 0 var(--main_red);
  }
  .pmega__tab_label .pmega__br {
    display: inline;
  }
  .pmega__tab:nth-last-child(4):first-child,
  .pmega__tab:nth-last-child(4):first-child ~ .pmega__tab {
    -ms-flex-preferred-size: calc((100% - 10px) / 2);
        flex-basis: calc((100% - 10px) / 2);
    padding: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .pmega__tab:nth-last-child(4):first-child .pmega__tab_label,
  .pmega__tab:nth-last-child(4):first-child ~ .pmega__tab .pmega__tab_label {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
    padding: 0 5px 5px;
    -webkit-box-shadow: inset 0 -2px 0 transparent;
            box-shadow: inset 0 -2px 0 transparent;
  }
  .pmega__tab:nth-last-child(4):first-child.is-active .pmega__tab_label,
  .pmega__tab:nth-last-child(4):first-child ~ .pmega__tab.is-active .pmega__tab_label {
    -webkit-box-shadow: inset 0 -2px 0 var(--main_red);
            box-shadow: inset 0 -2px 0 var(--main_red);
  }
  .pmega__tab:nth-last-child(2):first-child,
  .pmega__tab:nth-last-child(2):first-child ~ .pmega__tab {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto;
  }
  .pmega__scroll {
    background: #F1F1F4;
    border-radius: 5px;
    padding: 10px;
  }
  .pmega__tabs + .pmega__scroll {
    border-radius: 0 0 5px 5px;
    padding-top: 20px;
  }
  .pmega__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    list-style: none;
  }
  .pmega__grid[hidden] {
    display: none;
  }
  /* SPカードの箱（Figma Frame 383 = 137×88 / tallは137×106）
     画像枠は通常137×50・tall137×62で、中の画像は
     通常 137×40 を y=5（上下5px）、tall 137×57 を y=0（上0 / 下5px）に置く。
     テキスト領域は行内で最も高いカードに合わせて伸び、下10pxを除いた範囲に
     名称＋サブ名称を1つのまとまりとして上下中央へ（Figma Frame 494 の配置）。 */
  .pmega__link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 0 0 10px;
  }
  .pmega__text {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    min-height: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .pmega__thumb {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    aspect-ratio: 137/50;
  }
  .pmega__thumb--tall {
    aspect-ratio: 137/62;
  }
  .pmega__name {
    padding: 0 10px;
    font-size: 12px;
    line-height: 1.4166666667;
  }
  .pmega__sub {
    font-size: 9px;
    line-height: 1.2222222222;
  }
  .pmega__spcontact {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}