@charset "utf-8";
/*==================================================
 gHead / gnav　新ヘッダー（header_s.php 用）
 ※ 旧ヘッダー（.sin-header / #head / #toggle）とは
 　 セレクタが重複しないため共存可能
==================================================*/
.gHead {
  --gh-yellow: #ffdc00;
  --gh-yellow-pale: #ffec99;
  --gh-line: #f2c94c;
  --gh-orange: #d97f00;
  --gh-btn-line: #ffcf00;
  --gh-btn-bg: #fffae5;
  --gh-black: #111;
  --gh-width: 1200px;
  --gh-panelW: 1280px;
  --gh-barH: 60px;
  --gh-navH: 64px;
  --gh-tabGap: 8px;   /* 開いたタブの上に空けるスペース */
  --gh-radius: 5px;

  position: relative;
  z-index: 9999;
  background: var(--gh-yellow);
}
.gHead *,
.gHead *::before,
.gHead *::after {
  box-sizing: border-box;
}
.gHead ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gHead a {
  text-decoration: none;
  color: #000;
}

/*==================================================
 共通CSSの打ち消し（要素セレクタ由来の影響を遮断）
 skin.css   : div:after クリアフィックス / header / nav / h1
 default.css: vertical-align:bottom / a:focus outline:none
==================================================*/
/* すべてのdivに付くクリアフィックス擬似要素を無効化 */
.gHead div::after,
.gHead section::after,
.gnav__overlay::after {
  content: none;
  display: none;
  clear: none;
}

/* header 要素への指定を打ち消す */
header.gHead {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
}

/* header h1 / header h1 img への指定を打ち消す */
.gHead .gHead__logo {
  max-width: none;
  max-height: none;
  padding: 0;
  margin: 0;
}
.gHead .gHead__logo img {
  max-width: none;
  max-height: none;
  min-height: 0;
  width: auto;
}

/* nav 要素への指定を打ち消す */
.gHead .gnav {
  width: 100%;
  height: auto;
  padding: 0;
  border: 0;
  opacity: 1;
  font-size: 1.6rem;
  font-weight: normal;
  line-height: 1.6;
  text-align: left;
  transition: none;
}

/* button のブラウザ既定を打ち消す */
.gHead button {
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
}

/* default.css の vertical-align:bottom を打ち消す
   （inline-flex なリンクが行内で下寄せになるのを防ぐ） */
.gHead a,
.gHead span,
.gHead img,
.gHead li,
.gHead button {
  vertical-align: middle;
}

/* インライン要素を挟まないようリスト項目自体をflex化 */
.gHead__utilLinks li,
.gHead__utilBtns li,
.gnav__sub li {
  display: flex;
  align-items: center;
}

/* default.css の a:focus{outline:none} でキーボード操作時の
   フォーカスが見えなくなるため復帰させる */
.gHead a:focus-visible,
.gHead button:focus-visible {
  outline: solid 2px #000;
  outline-offset: 2px;
}

/*--- 上段バー ---*/
.gHead__bar {
  background: var(--gh-yellow);
}
.gHead__inner {
  width: 100%;
  max-width: var(--gh-width);
  min-height: var(--gh-barH);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.gHead__logo {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
}
.gHead__logo img {
  display: block;
  width: auto;
  height: 40px;
}

/*--- 上段バー右側 ---*/
.gHead__util {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 24px;
}
.gHead__utilLinks {
  display: flex;
  align-items: center;
  gap: 20px;
}
.gHead__utilLinks a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.4rem;
  line-height: 1;
  transition: opacity 0.2s;
}
.gHead__utilLinks a::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -1px;
  border-top: solid 1px #000;
  border-right: solid 1px #000;
  transform: rotate(45deg);
}
.gHead__utilLinks a:hover {
  opacity: 0.6;
}
.gHead__utilBtns {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gHead__utilBtns a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 136px;
  height: 40px;
  padding: 0 14px;
  background: var(--gh-black);
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1;
  transition: background 0.2s;
}
.gHead__utilBtns a::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -1px;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  transform: rotate(45deg);
}
.gHead__utilBtns li:first-child a:hover {
  background: #108f16;
}
.gHead__utilBtns a:hover {
  background: #d30202;
}

/*--- ハンバーガー（SPのみ表示） ---*/
.gHead__toggle {
  display: none;
}

/*--- ナビ本体 ---*/
.gHead .gnav {
  display: block;
  position: relative;
  background: var(--gh-yellow-pale);
}
.gnav__inner {
  width: 100%;
  max-width: var(--gh-width);
  margin: 0 auto;
  padding: 0 20px;
}
.gnav__list {
  display: flex;
  /* 右端の区切り線。項目側に持たせると開いたカードの
     背景色と競合するため ul の背景として描く */
  background: linear-gradient(var(--gh-line), var(--gh-line)) right center / 1px 20px no-repeat;
}
.gnav__item {
  flex: 1 1 0;
  min-width: 0;
  background: linear-gradient(var(--gh-line), var(--gh-line)) left center / 1px 20px no-repeat;
}
.gnav__link {
  position: relative;
  z-index: 0;
  width: 100%;
  height: var(--gh-navH);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  /* 白エリアが上に --gh-tabGap 分短いぶん、ラベルも下げて中央に揃える */
  padding: var(--gh-tabGap) 10px 0;
  border: 0;
  background: transparent;
  color: #000;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}
/* タブの白背景。上に --gh-tabGap 分の余白を残し、
   下は -1px 伸ばしてパネルと繋げる */
.gnav__link::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: var(--gh-tabGap) 0 -2px;
  border-radius: var(--gh-radius) var(--gh-radius) 0 0;
  background: transparent;
  transition: background 0.2s;
}
.gnav__link:hover::before {
  background: rgba(255, 255, 255, 0.55);
}
.gnav__item.is-open > .gnav__link::before,
.gnav__link.is-current::before {
  background: #fff;
  /* 上方向のみ。左右に出すとパネルとの接合部に影の塊が残る */
  box-shadow: 0 -3px 10px -6px rgba(0, 0, 0, 0.22);
}
/* 開いているタブをパネルより前面に置き、白同士を繋げる */
.gnav__item.is-open > .gnav__link {
  z-index: 2;
}

/*--- ▼マーク ---*/
.gnav__mark {
  flex: 0 0 auto;
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gh-orange);
}
.gnav__mark::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 6px;
  height: 6px;
  border-right: solid 2px #fff;
  border-bottom: solid 2px #fff;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s;
}
.gnav__item.is-open .gnav__mark::before {
  transform: translateY(1px) rotate(-135deg);
}

/*--- メガメニュー ---*/
.gnav__mega {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 0 20px 40px;
}
.gnav__item.is-open > .gnav__mega {
  display: block;
  animation: gnavFade 0.25s ease both;
}
@keyframes gnavFade {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.megaPanel {
  position: relative;
  z-index: 1;
  max-width: var(--gh-panelW);
  /* -1px でタブとの間にサブピクセルの隙間が出るのを防ぐ */
  margin: -5px auto 0;
  padding: 34px 40px 36px;
  display: flex;
  gap: 32px;
  background: #fff;
  border-radius: var(--gh-radius);
  /* 下方向のみ。上や左右に出すとタブとの境目に影の塊が見える */
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.22);
}
.megaPanel__head {
  flex: 0 0 265px;
}
.megaPanel__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.2;
}
.megaPanel__deco {
  width: auto;
  height: 50px;
  margin-top: -16px;
}
.megaPanel__text {
  margin: 0;
  color: #333;
  font-size: 1.4rem;
  line-height: calc(1em + 11px);
}
.megaPanel__img {
  margin: 22px 0 0;
}
.megaPanel__img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.megaPanel__list {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  align-content: start;
}
.megaPanel__list a {
  height: 100%;
  min-height: 80px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gh-btn-bg);
  border: solid 2px var(--gh-btn-line);
  border-radius: 4px;
  font-size: 1.6rem;
  font-weight: normal;
  line-height: 1.5;
  text-align: center;
  transition: background 0.2s, border-color 0.2s;
}
.megaPanel__list a:hover {
  background: #fff6d9;
  border-color: var(--gh-orange);
}

/*--- SP専用ブロックはPCでは非表示 ---*/
.gnav__sub,
.gnav__btns {
  display: none;
}

/*--- メガメニュー背面のクリック領域 ---*/
.gnav__overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: transparent;
  font-size: 1.6rem;
}
.gnav__overlay[hidden] {
  display: none;
}

/*==================================================
 SP
==================================================*/
@media screen and (max-width: 769px) {
  .gHead {
    --gh-barH: 50px;
    height: auto;
    position: sticky;
    top: 0;
  }
  .gHead__inner {
    max-width: none;
    min-height: var(--gh-barH);
    padding: 0 0 0 12px;
    gap: 0;
  }
  .gHead .gHead__logo {
    max-height: none;
    padding: 0;
  }
  .gHead .gHead__logo img {
    height: 26px;
    max-height: none;
    min-height: 0;
    width: auto;
  }
  .gHead__util {
    display: none;
  }

  /*--- ハンバーガー ---*/
  .gHead__toggle {
    flex: 0 0 auto;
    display: block;
    position: relative;
    width: var(--gh-barH);
    height: var(--gh-barH);
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    line-height: 1;
    background: var(--gh-black);
    cursor: pointer;
  }
  .gHead__toggleText {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .gHead__toggleBar,
  .gHead__toggleBar::before,
  .gHead__toggleBar::after {
    position: absolute;
    left: 50%;
    width: 22px;
    height: 2px;
    background: #fff;
    transition: transform 0.25s, opacity 0.2s;
  }
  .gHead__toggleBar {
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .gHead__toggleBar::before,
  .gHead__toggleBar::after {
    content: "";
    left: 0;
  }
  .gHead__toggleBar::before { top: -7px; }
  .gHead__toggleBar::after  { top: 7px; }

  .gHead__toggle[aria-expanded="true"] .gHead__toggleBar {
    background: transparent;
  }
  .gHead__toggle[aria-expanded="true"] .gHead__toggleBar::before {
    top: 0;
    transform: rotate(45deg);
  }
  .gHead__toggle[aria-expanded="true"] .gHead__toggleBar::after {
    top: 0;
    transform: rotate(-45deg);
  }

  /*--- ドロワー ---*/
  /* 背面スクロールの固定（position:fixed / overflow:hidden）は
     .is-scrollLocked に集約したため、ここでは持たない。
     ドロワーとモーダルが同時に開いたときに互いの固定を
     打ち消し合っていたのを防ぐため（scroll-lock.js）。
     is-gnavOpen は見た目の分岐専用として残している */
  .gHead .gnav {
    display: none;
    position: fixed;
    top: var(--gh-barH);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    width: auto;
    height: auto;
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 背面は黒半透明。メニュー本体は .gnav__inner に持たせる */
    background: rgba(0, 0, 0, 0.55);
    opacity: 1;
    text-align: left;
    transition: none;
  }
  body.is-gnavOpen .gHead .gnav {
    display: block;
  }
  /* 左右の余白はここで一括。ul 側に padding を書くと
     .gHead ul{padding:0} に負けるため必ずこの div に持たせる */
  .gnav__inner {
    max-width: none;
    padding: 0 14px 18px;
    background: var(--gh-yellow-pale);
  }

  .gnav__list {
    display: block;
    background: none;
  }
  .gnav__item {
    background: none;
    border-bottom: solid 1px var(--gh-btn-line);
  }

  /*--- 開いた項目は白いカードにする ---*/
  .gnav__item.is-open {
    margin: 0;
    background: #fff;
    border-bottom: 0;
    border-radius: 10px;
    box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.16);
  }
  /* カードの直前の項目は区切り線を消す（カード上部の余白を活かす） */
  .gnav__item:has(+ .gnav__item.is-open) {
    border-bottom-color: transparent;
  }

  .gnav__link {
    height: 46px;
    padding: 0 10px 0 8px;
    justify-content: flex-start;
    gap: 0;
    border-radius: 0;
    font-size: 1.4rem;
    text-align: left;
    overflow: inherit;
  }
  .gnav__link.gnav__link--mega{
    padding: 0 8px;
  }
  .gnav__link::before {
    content: none;
  }
  .gnav__link:hover,
  .gnav__item.is-open > .gnav__link {
    background: transparent;
  }
  .gnav__mark {
    margin-left: auto;
  }

  /* 開いたカードのタイトル下の区切り線 */
  .gnav__item.is-open > .gnav__link::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 2px;
    background: #ffcf00;
  }

  /*--- 下層を持たない項目の矢印（軸線＋塗りの三角で描画） ---*/
  .gnav__link--page::after {
    content: "";
    flex: 0 0 auto;
    margin-left: auto;
    width: 16px;
    height: 3px;
    background: var(--gh-orange);
  }
  .gnav__link--page::before {
      content: "";
      order: 2;
      flex: 0 0 auto;
      position: static;
      inset: auto;
      z-index: auto;
      width: 9px;
      height: 9px;
      margin-left: -9px;
      border: 0;
      border-top: solid 3px var(--gh-orange);
      border-right: solid 3px var(--gh-orange);
      border-radius: 0;
      background: none;
      box-shadow: none;
      transform: rotate(45deg);
      transition: none;
  }

  /*--- SPアコーディオン内 ---*/
  .gnav__mega {
    position: static;
    width: auto;
    padding: 10px;
  }
  .megaPanel {
    max-width: none;
    display: block;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .megaPanel__head {
    display: none;
  }
  .megaPanel__list {
    display: block;
  }
  .megaPanel__list li:not(:last-child) {
    margin-bottom: 5px;
  }
  .megaPanel__list a {
    min-height: 44px;
    font-size: 1.4rem;
  }

  /*--- 下部リンク ---*/
  .gHead .gnav__sub {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 5px;
    margin: 20px 0 20px;
    padding: 0 6px;
  }
  .gnav__sub a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.4rem;
    line-height: 1.4;
  }
  .gnav__sub a::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-top: solid 1px #000;
    border-right: solid 1px #000;
    transform: rotate(45deg);
  }

  /*--- 下部ボタン ---*/
  .gnav__btns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .gnav__btns a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 50px;
    background: var(--gh-black);
    border-radius: 2px;
    color: #fff;
    font-size: 1.6rem;
    font-weight: normal;
  }
  .gnav__btns a::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-top: -6px;
    border-top: solid 1px #fff;
    border-right: solid 1px #fff;
    transform: rotate(45deg);
  }

  .gnav__overlay {
    display: none;
  }
}

/*--- 480px以下 ---*/
@media screen and (max-width: 480px) {
  .gHead .gHead__logo img {
    height: 26px;
  }
}

/*--- 動きを抑える設定への配慮 ---*/
@media (prefers-reduced-motion: reduce) {
  .gHead *,
  .gHead *::before,
  .gHead *::after {
    transition: none !important;
    animation: none !important;
  }
}

/*==================================================
 gFoot　新フッター（footer-s.php 用）
 ※ 旧フッター（#footer / #footLft / #footRht）とは
 　 セレクタが重複しないため共存可能
==================================================*/
.gFoot {
  --gf-yellow: #ffcf00;
  --gf-line: #000;
  --gf-mark: #1a1a1a;
  --gf-black: #111;
  --gf-width: 1280px;

  position: relative;
  z-index: 1;
}

/*--- 共通CSSの打ち消し ---*/
/* skin.css : footer{background:#ffcf00;padding:1px 0 70px;line-height:1.2} */
footer.gFoot {
  width: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
  line-height: 1.6;
}
/* skin.css : div:after / section:after のクリアフィックス */
.gFoot div::after,
.gFoot section::after {
  content: none;
  display: none;
  clear: none;
}
.gFoot *,
.gFoot *::before,
.gFoot *::after {
  box-sizing: border-box;
}
.gFoot ul {
  list-style: none;
  margin: 15px 0 0;
  padding: 0;
}
.gFoot p {
  margin: 0;
}
.gFoot a,
.gFoot a:link,
.gFoot a:visited {
  color: #1a1a1a;
  text-decoration: none;
}
.gFoot button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
/* default.css : vertical-align:bottom */
.gFoot a,
.gFoot span,
.gFoot img,
.gFoot li,
.gFoot button {
  vertical-align: middle;
}
/* default.css : a:focus{outline:none} */
.gFoot a:focus-visible,
.gFoot button:focus-visible,
.gFoot__pagetop:focus-visible {
  outline: solid 2px #000;
  outline-offset: 2px;
}

.gFoot__inner {
  width: 100%;
  max-width: var(--gf-width);
  margin: 0 auto;
  padding: 0 40px;
}

/*==================================================
 フッターナビ
==================================================*/
.gFoot__nav {
  padding: 52px 0 60px;
  background: var(--gf-yellow);
}
.gFoot__navWrap {
  display: flex;
  gap: 56px;
}
.gFootNav {
  flex: 1 1 auto;
  min-width: 0;
}
.gFootNav__main {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 30px;
  row-gap: 32px;
  align-items: start;
}

/*--- 見出し行 ---*/
.gFootNav__head {
  display: flex;
  align-items: center;
  border-bottom: solid 1px var(--gf-line);
}
.gFootNav__link {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 2px 9px;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.4;
  transition: opacity 0.2s;
}
.gFootNav__link:hover {
  opacity: 0.6;
}
.gFootNav__item--noLink .gFootNav__link:hover{
  opacity: 1;
}
/* 矢印（軸線＋V字の2要素で描画） */
/* .gFootNav__link::after {
  content: "";
  flex: 0 0 auto;
  margin-left: auto;
  width: 12px;
  height: 2px;
  background: #000;
}
.gFootNav__link::before {
  content: "";
  order: 2;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-left: -6px;
  margin-right: 4px;
  border-top: solid 2px #000;
  border-right: solid 2px #000;
  transform: rotate(45deg);
} */
.gFootNav__toggle {
  display: none;
}
.gFootNav__toggleText,
.gFoot__pagetopText {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media screen and (max-width: 769px) {
  /* リンクが無い項目は、行のどこをタップしても開閉できるようにする */
  .gFootNav__item--noLink .gFootNav__head {
    position: relative;
  }
  .gFootNav__item--noLink .gFootNav__toggle::after {
    content: "";
    position: absolute;
    inset: 0;
  }
}

/*--- サブメニュー ---*/
.gFootNav__sub {
  display: grid;
  gap: 9px;
  margin-top: 20px;
  padding: 0 2px;
}
.gFootNav__sub a {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 1.4rem;
  line-height: 1.5;
  transition: opacity 0.2s;
}
.gFootNav__sub a::before {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 2px;
  margin-top: 0.65em;
  background: #ffec99;
}
.gFootNav__sub a:hover {
  opacity: 0.6;
}

/*--- 右カラム ---*/
.gFoot__side {
  flex: 0 0 220px;
}
.gFoot__sideLinks {
  display: grid;
  gap: 19px;
}
.gFoot__sideLinks a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.6rem;
  line-height: 1.4;
  transition: opacity 0.2s;
}
.gFoot__sideLinks a::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-top: solid 1px #000;
  border-right: solid 1px #000;
  transform: rotate(45deg);
}
.gFoot__sideLinks a:hover {
  opacity: 0.6;
}
.gFoot__sns {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 30px!important;
  padding-left: 2px;
}
.gFoot__sns a {
  display: block;
  transition: opacity 0.2s;
}
.gFoot__sns a:hover {
  opacity: 0.6;
}
.gFoot__sns img {
  display: block;
  width: auto;
  height: 26px;
}

/*==================================================
 お問合せ・会社情報
==================================================*/
.gFoot__contact {
  padding: 26px 0 30px;
  background: #fff;
}
.gFoot__contactWrap {
  display: grid;
  grid-template-columns: 182px 302px minmax(0, 1fr);
  column-gap: 30px;
  row-gap: 20px;
  align-items: flex-start;
}
.gFoot__mascot {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.gFoot__mascot img {
  display: block;
  width: 100%;
  height: auto;
}
.gFoot__catch {
  grid-column: 2 / span 2;
  grid-row: 1;
  align-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}
.gFoot__catchIcon img {
  display: block;
  width: 36px;
  height: 36px;
}
.gFoot__catchText {
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.gFoot__contactTel {
  grid-column: 2;
  grid-row: 2;
}
.gFoot__badge{
  margin-bottom: 10px!important;
}
.gFoot__badge img {
  display: block;
  width: 300px;
  height: auto;
}
.gFoot__tel {
  margin-top: 8px;
}
.gFoot__tel a {
  display: block;
}
.gFoot__tel img {
  display: block;
  width: 300px;
  height: auto;
}
.gFoot__company {
  grid-column: 3;
  grid-row: 2;
  min-width: 0;
  padding: 0 0 0 30px;
  border-left: solid 1px #1a1a1a;
}
.gFoot__companyName {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 5px!important;
}
.gFoot__address {
  margin-top: 10px;
  font-size: 1.3rem;
  line-height: 1.7;
}
.gFoot__map {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 3px 6px;
    background: var(--gf-black);
    border-radius: 9px;
    color: #fff;
    font-size: 1.2rem;
    font-weight: normal;
    line-height: 1;
    white-space: nowrap;
    transition: opacity 0.2s;
}
.gFoot__map:link,
.gFoot__map:visited {
  color: #fff!important;
}
.gFoot__map:hover {
  opacity: 0.7;
}

/*==================================================
 コピーライト
==================================================*/
.gFoot__copyright {
  padding: 12px 20px;
  background: #222;
  color: #fff;
  text-align: center;
}
.gFoot__copyright p {
  font-size: 1.2rem;
  line-height: 1.4;
}

/*==================================================
 ページトップ
==================================================*/
.v_gFoot .fixed-nav{
    position: fixed;
    right: 25px;
    bottom: 110px;
    z-index: 99;
    width: 70px;
}
.gFoot__pagetop {
  position: fixed;
  right: 25px;
  bottom: 60px;
  z-index: 900;
  width: 50px;
  height: 50px;
  background: #1a1a1a;
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s, background 0.2s;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  cursor: pointer;
}
.gFoot__pagetop.is-visible {
  opacity: 1;
  visibility: visible;
}
.gFoot__pagetop:hover {
  background: #ffcf00;
}
.gFoot__pagetop::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 20px;
  margin: -10px 0 0 -0.5px;
  background: #fff;
}
.gFoot__pagetop::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -10px 0 0 -4px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(-45deg);
  transition: all ease .3s;
}
.gFoot__pagetop:hover::after{
  border-color: #1a1a1a;
  transition: all ease .3s;
}
.gFoot__pagetop:hover::before{
  background: #1a1a1a;
  transition: all ease .3s;
}
/*==================================================
 SP
==================================================*/
@media screen and (max-width: 769px) {
  /* skin.css : footer{background:none;padding:0;margin:-50px 0 0} */
  footer.gFoot {
    margin: 0;
    padding: 0;
    background: #fff;
  }

  .gFoot__inner {
    max-width: none;
    padding: 0 20px;
  }

  /*--- フッターナビ ---*/
  .gFoot__nav {
    padding: 6px 0 26px;
  }
  .gFoot__navWrap {
    display: block;
  }
  .gFootNav__main {
    display: block;
  }
  .gFootNav__head {
    min-height: 48px;
  }
  .gFootNav__link {
    padding: 10px 0;
    font-size: 1.6rem;
    overflow: inherit;
  }

  /* グループ項目は矢印を出さず、丸ボタンで開閉する */
  .gFootNav__item--group .gFootNav__link::before,
  .gFootNav__item--group .gFootNav__link::after {
    content: none;
  }
  .gFootNav__toggle {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 30px;
    height: 30px;
  }
  .gFootNav__mark {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--gf-mark);
  }
  .gFootNav__mark::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 6px;
    height: 6px;
    border-right: solid 2px #fff;
    border-bottom: solid 2px #fff;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.25s;
  }
  .gFootNav__item--group.is-open .gFootNav__mark{
    background: #ffe266;
  }
  .gFootNav__item--group.is-open .gFootNav__mark::before {
    transform: translateY(1px) rotate(-135deg);
    border-color: #1a1a1a;
  }

  /*--- サブメニュー（JS有効時のみ閉じる） ---*/
  .gFootNav.is-ready .gFootNav__sub {
    display: none;
  }
  .gFootNav.is-ready .gFootNav__item--group.is-open .gFootNav__sub {
    display: grid;
    margin-bottom: 10px;
  }
  .gFootNav__sub {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
    margin: 14px 0 16px;
    padding: 0;
  }
  .gFootNav__sub a {
    font-size: 1.3rem;
  }

  /*--- 右カラム ---*/
  .gFoot__side {
    flex: none;
    margin-top: 26px;
  }
  .gFoot__sideLinks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 12px;
  }
  .gFoot__sideLinks a {
    font-size: 1.6rem;
  }
  .gFoot__sns {
    justify-content: center;
    gap: 16px;
    margin-top: 26px;
    padding-left: 0;
  }
  .gFoot__sns img {
    height: 24px;
  }

  /*--- お問合せ・会社情報 ---*/
  .gFoot__contact {
    padding: 25px 0 45px;
  }
  .gFoot__contactWrap {
    grid-template-columns: 88px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 10px;
    align-items: start;
  }
  .gFoot__mascot {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .gFoot__catch {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    align-items: flex-start;
    gap: 8px;
  }
  .gFoot__catchIcon img {
    width: 20px;
    min-width: 20px;
    height: 20px;
  }
  .gFoot__catchText {
    font-size: 1.6rem;
    line-height: 1.4;
  }
  .gFoot__contactTel {
    grid-column: 2;
    grid-row: 2;
  }
  .gFoot__tel {
    margin-top: 4px;
  }
  .gFoot__badge img,
  .gFoot__tel img {
    width: 100%;
    height: auto;
  }
  .gFoot__company {
    border-top: solid 1px #1a1a1a;
    grid-column: 1 / -1;
    grid-row: 3;
    padding: 12px 0 0;
    border-left: 0;
  }
  .gFoot__companyName {
    font-size: 1.6rem;
  }
  .gFoot__address {
    margin-top: 10px;
    font-size: 1.3rem;
    line-height: calc(1em + 7px);
  }

  /*--- コピーライト ---*/
  .gFoot__copyright {
    padding: 7px 14px;
  }
  .gFoot__copyright p {
    font-size: 1.1rem;
  }

  /*--- ページトップ ---*/
  .gFoot__pagetop {
    right: 10px;
    bottom: 10px;
    width: 44px;
    height: 44px;
  }
}

/*--- 動きを抑える設定への配慮 ---*/
@media (prefers-reduced-motion: reduce) {
  .gFoot *,
  .gFoot *::before,
  .gFoot *::after,
  .gFoot__pagetop {
    transition: none !important;
    animation: none !important;
  }
}

/*==================================================
 mvSlider　トップ メインビジュアル（KeenSlider）
==================================================*/
.mvSlider {
  --mv-radius: 4px;
  --mv-dot: #c9c9c9;
  --mv-dot-active: #1a1a1a;
  --mv-arrow-bg: #1a1a1a;

  position: relative;
  padding: 0 0 8px;
  background: #fff;
  overflow: hidden;
}
.mvSlider *,
.mvSlider *::before,
.mvSlider *::after {
  box-sizing: border-box;
}
/* skin.css : div:after のクリアフィックスを無効化 */
.mvSlider div::after {
  content: none;
  display: none;
  clear: none;
}
.mvSlider button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
  background: #ccc;
}

.mvSlider__body {
  position: relative;
}

/* 初期化が終わるまで隠す。*/
.mvSlider__body,
.mvSlider__dots {
  opacity: 0;
}
.mvSlider.is-ready .mvSlider__body,
.mvSlider.is-ready .mvSlider__dots {
  opacity: 1;
  transition: opacity 0.3s;
}

.mvSlider__slide {
  overflow: hidden;
  border-radius: var(--mv-radius);
}
/* 複製したスライドは読み上げ対象から外す */
.mvSlider__slide[data-mv-clone] {
  pointer-events: auto;
}
.mvSlider__link {
  display: block;
  transition: opacity 0.2s;
}
.mvSlider__link:hover {
  opacity: 0.85;
}
.mvSlider__slide img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

/*--- 矢印 ---*/
.mvSlider__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 50px;
  height: 50px;
  margin-top: -20px;
  background: var(--mv-arrow-bg)!important;
  transition: background 0.2s, opacity 0.2s;
}
.mvSlider__arrow--prev {
  left: 20px;
}
.mvSlider__arrow--next {
  right: 20px;
}
.mvSlider__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
}
.mvSlider__arrow--prev::before {
  margin: -5px 0 0 -3px;
  transform: rotate(-135deg);
}
.mvSlider__arrow--next::before {
  margin: -5px 0 0 -7px;
  transform: rotate(45deg);
}
.mvSlider__arrow:hover {
  background: #ffcf00!important;
}
.mvSlider__arrow--prev:hover::before{
  border-color: var(--mv-arrow-bg);
}
.mvSlider__arrow--next:hover::before{
  border-color: var(--mv-arrow-bg);
}
.mvSlider__arrowText {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/*--- ドット ---*/
.mvSlider__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
.mvSlider__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mv-dot);
  transition: background 0.2s, transform 0.2s;
}
.mvSlider__dot:hover {
  transform: scale(1.15);
}
.mvSlider__dot.is-active {
  background: var(--mv-dot-active);
}

/*==================================================
 PC
==================================================*/
@media screen and (min-width: 770px) {
  /* 1枚500px固定。KeenSlider側は perView:'auto' なので
     画面幅に応じて左右のスライドが端で見切れる */
  .mvSlider__track .mvSlider__slide {
    min-width: 500px;
    max-width: 500px;
    width: 500px;
  }
}

/*==================================================
 SP
==================================================*/
@media screen and (max-width: 769px) {
  main.top-main{
    padding-top: 10px!important;
  }
  .mvSlider {
    padding: 0 0 4px;
  }
  /* デザイン上SPでは矢印を出さない */
  .mvSlider__arrow {
    display: none;
  }
  .mvSlider__dots {
    gap: 8px;
    margin-top: 14px;
  }
  .mvSlider__dot {
    width: 8px;
    height: 8px;
  }
}

/*--- 動きを抑える設定への配慮 ---*/
@media (prefers-reduced-motion: reduce) {
  .mvSlider *,
  .mvSlider *::before,
  .mvSlider *::after {
    transition: none !important;
    animation: none !important;
  }
}
/*.sin-top-btn*/
.sin-top-btn.ver_col3{
  max-width: 815px;
}
/* 2つ目のバナー列から重複していた id="intro_bnr" を外したため、
   contents.css の #index #contents ul#intro_bnr が効かなくなる。
   同じ見た目になるよう、ここで補う */
#index #contents .sin-top-btn.ver_col3 {
  margin-bottom: 25px;
}
@media screen and (max-width: 769px) {
  #index #contents .sin-top-btn.ver_col3 {
    width: 100%;
    max-width: 700px;
    padding: 0;
    margin-bottom: 25px;
  }
}
@media screen and (max-width: 640px) {
  #index #contents .sin-top-btn.ver_col3 {
    width: 100%;
    max-width: 700px;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 15px;
  }
}

/*==================================================
 top-sec　トップ各セクション共通の見出し
 <div class="top-sec__head">
   <h2 class="top-sec__title" data-en="RECOMMEND">イチオシ商品</h2>
 </div>
==================================================*/
.top-sec__head {
  --ts-en: #ffcf00;

  margin: 0 0 26px;
  padding: 0;
  text-align: center;
}
/* skin.css : div:after のクリアフィックスを無効化 */
.top-sec__head::after {
  content: none;
  display: none;
  clear: none;
}
.top-sec__title {
  margin: 0;
  padding: 0;
  font-size: 4.0rem;
  font-weight: bold;
  line-height: 1.3;
}
/* data-en の値を英字ラベルとして見出しの上に出す */
.top-sec__title::before {
  content: attr(data-en);
  display: block;
  margin-bottom: 10px;
  color: var(--ts-en);
  font-family: "Poppins", sans-serif;
  font-size: 1.4rem;
  font-weight: bold;
  letter-spacing: 0.12em;
  line-height: 1;
}
/* data-en が無い場合は英字ラベルの余白を作らない */
.top-sec__title:not([data-en])::before,
.top-sec__title[data-en=""]::before {
  display: none;
}

@media screen and (max-width: 769px) {
  .top-sec__head {
    margin-bottom: 18px;
  }
  .top-sec__title {
    font-size: 3.0rem;
  }
  .top-sec__title::before {
    margin-bottom: 8px;
    font-size: 1.2rem;
  }
}

/*==================================================
 pickup　イチオシ商品（RECOMMEND / KeenSlider）
==================================================*/
.pickup {
  --pk-yellow: #ffcf00;
  --pk-card-bg: #f2f2f2;
  --pk-text: #666;
  --pk-arrow-bg: #1a1a1a;
  --pk-card-w: 297px;
  --pk-pad: 25px;

  padding: 56px 0 60px;
  background: #fff;
}
.pickup *,
.pickup *::before,
.pickup *::after {
  box-sizing: border-box;
}
/* skin.css : div:after のクリアフィックスを無効化 */
.pickup div::after,
.pickup section::after {
  content: none;
  display: none;
  clear: none;
}
.pickup p,
.pickup h2,
.pickup h3,
.pickup figure {
  margin: 0;
  padding: 0;
}
.pickup a,
.pickup a:link,
.pickup a:visited {
  color: #000;
  text-decoration: none;
}
.pickup button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}


/*--- スライダー ---*/
.pickupSlider {
  position: relative;
}
.pickupSlider__body {
  position: relative;
  /* 初期化が終わるまで隠す（JS無効時は noscript で表示に戻す） */
  opacity: 0;
}
.pickupSlider.is-ready .pickupSlider__body {
  opacity: 1;
  transition: opacity 0.3s;
}
.pickupSlider__slide {
  display: flex;
  height: auto;
}

/*--- カード ---*/
.pickupCard {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--pk-pad);
  background: var(--pk-card-bg);
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.pickupCard:hover {
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.22);
}

/*--- サムネイル（正方形に収める） ---*/
.pickupCard__img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 12px;
  background: #fff;
  overflow: hidden;
}
.pickupCard__img img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  /* 見切れさせず、正方形の枠に収める */
  object-fit: contain;
  vertical-align: middle;
  transition: transform 0.3s;
}
.pickupCard:hover .pickupCard__img img {
  transform: scale(1.04);
}

/*--- 新着バッジ（左上の三角） ---*/
.pickupCard__badge {
  position: absolute;
  top: var(--pk-pad);
  left: var(--pk-pad);
  z-index: 2;
  width: 64px;
  height: 64px;
  background: linear-gradient(
    to bottom right,
    var(--pk-yellow) 0,
    var(--pk-yellow) 50%,
    transparent 50%
  );
  pointer-events: none;
}
.pickupCard__badge span {
  position: absolute;
  top: 13px;
  left: -6px;
  width: 64px;
  color: #000;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  transform: rotate(-45deg);
}

/*--- テキスト ---*/
.pickupCard__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 16px 0 0;
}
.pickupCard__title {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 8px!important;
}
.pickupCard__text {
  margin-top: 10px;
  color: var(--pk-text);
  font-size: 1.4rem;
  line-height: 1.7;
}
.pickupCard__more {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  padding-top: 16px;
  font-size: 1.4rem;
  font-weight: normal;
}
/* 矢印（軸線＋V字の2要素で描画） */
.pickupCard__more::after {
  content: "";
  flex: 0 0 auto;
  margin-left: 12px;
  width: 18px;
  height: 2px;
  background: var(--pk-yellow);
}
.pickupCard__more::before {
  content: "";
  order: 2;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-left: -9px;
  border-top: solid 2px var(--pk-yellow);
  border-right: solid 2px var(--pk-yellow);
  transform: rotate(45deg);
}

/*--- 矢印ボタン（トップスライダーと同じ見た目） ---*/
/* .pickup button{background:none} に負けないよう .pickup を付ける */
.pickup .pickupSlider__arrow {
  position: absolute;
  /* サムネイルが正方形なので、カード幅の半分が画像の中心 */
  top: calc(var(--pk-card-w) / 2);
  z-index: 3;
  width: 50px;
  height: 50px;
  background: var(--pk-arrow-bg);
  transform: translateY(-50%);
  transition: background 0.2s;
}
.pickup .pickupSlider__arrow:hover {
  background: #ffcf00 !important;
}
.pickup .pickupSlider__arrow--prev {
  left: 30px;
}
.pickup .pickupSlider__arrow--next {
  right: 30px;
}
.pickup .pickupSlider__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
}
.pickup .pickupSlider__arrow--prev::before {
  margin: -5px 0 0 -3px;
  transform: rotate(-135deg);
}
.pickup .pickupSlider__arrow--next::before {
  margin: -5px 0 0 -7px;
  transform: rotate(45deg);
}
.pickup .pickupSlider__arrow--next:hover::before {
    border-color: var(--mv-arrow-bg);
}
.pickup .pickupSlider__arrow--prev:hover::before {
    border-color: var(--mv-arrow-bg);
}
.pickupSlider__arrowText {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/*==================================================
 PC
==================================================*/
@media screen and (min-width: 770px) {
  /* 1枚297px固定。KeenSlider側は perView:'auto' なので
     画面幅に応じて左右のカードが端で見切れる */
  .pickupSlider__track .pickupSlider__slide {
    min-width: var(--pk-card-w);
    max-width: var(--pk-card-w);
    width: var(--pk-card-w);
  }
}

/*==================================================
 SP
==================================================*/
@media screen and (max-width: 769px) {
  .pickup {
    padding: 34px 0 38px;
  }
  .pickupCard{
    padding: 15px;
  }
  .pickupCard__img {
    padding: 10px;
  }
  .pickupCard__body {
    padding: 14px 0 0;
  }
  .pickupCard__title {
    font-size: 1.4rem;
  }
  .pickupCard__text {
    font-size: 1.3rem;
  }
  .pickupCard__badge {
    top: 15px;
    left: 15px;
    width: 60px;
    height: 60px;
  }
  .pickupCard__badge span {
    top: 11px;
    left: -6px;
    width: 56px;
    font-size: 1.1rem;
  }
  /* デザイン上SPでは矢印を出さない */
  .pickup .pickupSlider__arrow {
    display: none;
  }
}

/*--- 動きを抑える設定への配慮 ---*/
@media (prefers-reduced-motion: reduce) {
  .pickup *,
  .pickup *::before,
  .pickup *::after {
    transition: none !important;
    animation: none !important;
  }
}

/*==================================================
 srch　商品検索（SEARCH）
 ※ 旧 #top-search / .top-lineup 系とは
 　 セレクタが重複しないため共存可能
==================================================*/
.srch {
  --sr-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
  --sr-yellow: #ffcf00;
  --sr-card-bg: #f2f2f2;
  --sr-border: #ddd;
  --sr-width: 1200px;

  padding: 50px 0;
  background: #fff;
  margin-top: 0!important;
}
.srch *,
.srch *::before,
.srch *::after {
  box-sizing: border-box;
}
/* skin.css : div:after のクリアフィックスを無効化 */
.srch div::after,
.srch section::after {
  content: none;
  display: none;
  clear: none;
}
/* リセットは :where() で詳細度を0にする。
   .srch ul のように書くと (0,1,1) となり、
   .srch__cats (0,1,0) の margin などを打ち消してしまうため */
.srch :where(ul) {
  list-style: none;
  margin: 0;
  padding: 0;
}
.srch :where(p) {
  margin: 0;
}
.srch :where(a),
.srch :where(a:link),
.srch :where(a:visited) {
  color: #000;
  text-decoration: none;
}
.srch :where(button) {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  color: #000;
  cursor: pointer;
}
.srch img {
  vertical-align: middle;
}

.srch__inner {
  width: 100%;
  max-width: var(--sr-width);
  margin: 0 auto;
  padding: 0 20px;
}

/*--- リード文 ---*/
.srch__lead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1.5rem;
  font-weight: normal;
  line-height: 1.4;
}
.srch__lead::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--sr-icon-search) no-repeat center / contain;
  mask: var(--sr-icon-search) no-repeat center / contain;
}

/*--- 検索フォーム（トップ／モーダル共通） ---*/
.srchForm {
  display: flex;
  align-items: stretch;
}
.srchForm__text {
  flex: 1 1 auto;
  min-width: 0;
  height: 50px;
  padding: 0 14px;
  border: solid 1px var(--sr-border);
  border-right: 0;
  background: #fff;
  font-family: inherit;
  font-size: 1.4rem;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
}
.srchForm__text:focus {
  outline: solid 2px rgba(0, 0, 0, 0.35);
  outline-offset: -2px;
}
.srchForm__text::placeholder {
  color: #999;
}
.srchForm__btn {
  flex: 0 0 auto;
  position: relative;
  width: 50px;
  height: 50px;
  background: #111!important;
  transition: background 0.2s;
}
.srchForm__btn:hover {
  background: #3d3d3d;
}
.srchForm__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 25px;
  height: 25px;
  background: #fff;
  -webkit-mask: var(--sr-icon-search) no-repeat center / contain;
  mask: var(--sr-icon-search) no-repeat center / contain;
}
.srchForm__btnText {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* トップに置くフォームは中央寄せで幅を絞る */
.srch .srchForm {
  width: 100%;
  max-width: 520px;
  margin: 16px auto 0;
}

/*--- 大カテゴリのタイル ---*/
.srch__cats {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-top: 24px;
}
.srch__cat {
  width: 100%;
  height: 100%;
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--sr-card-bg);
  transition: background 0.2s;
}
.srch__cat:hover {
  background: #e8e8e8;
}
.srch__catIcon {
  display: block;
  width: 100px;
  max-width: 100%;
}
.srch__catIcon img {
  display: block;
  width: 100%;
  height: auto;
}
.srch__catName {
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
}

/*==================================================
 srchModal　商品検索モーダル
 モーダルの土台（.modal-window など）は既存のまま。
 このコンテンツが開いているときだけ見た目を上書きする
==================================================*/
/* 既定の「閉じる」ボタンを、このモーダルのときだけ黄色い×にする。
   .modal-content-wrap は overflow:auto のため、
   パネル内に置いた閉じるボタンは切れてしまう。
   この要素はスクロール領域の外にあるので確実に見える */
.modal-content-wrap{
  border-radius: 5px;
}
.modal-container:has(#srch-modal.active) .modal-close-btn {
  top: -38px;
  width: 30px;
  height: 30px;
  gap: 0;
  background: #ffcf00;
  font-size: 0;
  transition: opacity 0.2s;
  border-radius: 5px;
}
.modal-container:has(#srch-modal.active) .modal-close-btn:hover {
  opacity: 0.75;
}
.modal-container:has(#srch-modal.active) .modal-close-btn::before {
  width: 16px;
  height: 16px;
  margin: 0;
  background: linear-gradient(to left, transparent 7px, #000 7px, #000 9px, transparent 9px),
    linear-gradient(to top, transparent 7px, #000 7px, #000 9px, transparent 9px);
}
.modal-container:has(#srch-modal.active) {
  width: 100%;
  max-width: 1200px;
}
.modal-content-wrap:has(#srch-modal.active) {
  max-height: 88vh;
}

.srchModal {
  --sr-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
  --sr-yellow: #ffcf00;
  --sr-border: #ddd;
  --sr-line: #e8e8e8;
  --sr-active-bg: #fff8dc;
  /* 右パネルの表示領域の高さ（PCのみ）。
     大分類を切り替えてもモーダルの高さが変わらないよう固定する。
     入る件数に合わせて調整するのはここだけでよい */
  --sr-panel-h: 560px;

  position: relative;
  /* 余白は各ブロックへ。ここで付けると
     ヘッダー下の区切り線や左リストが端まで届かない */
  padding: 0;
  border-radius: 5px;
}
.srchModal *,
.srchModal *::before,
.srchModal *::after {
  box-sizing: border-box;
}
.srchModal div::after {
  content: none;
  display: none;
  clear: none;
}
.srchModal :where(ul) {
  list-style: none;
  margin: 0;
  padding: 0;
}
.srchModal :where(p) {
  margin: 0;
}
.srchModal :where(a),
.srchModal :where(a:link),
.srchModal :where(a:visited) {
  color: #000;
  text-decoration: none;
}
.srchModal :where(button) {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  color: #000;
  cursor: pointer;
}

/*--- 閉じるボタン ---*/
/*--- ヘッダー ---*/
.srchModal__head {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 24px 30px 22px;
  border-bottom: solid 1px var(--sr-border);
}
.srchModal__title {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 2.4rem;
  font-weight: normal;
  line-height: 1.3;
}
.srchModal__title::before {
  content: "";
  flex: 0 0 auto;
  margin-top: -5px;
  width: 30px;
  height: 30px;
  background: currentColor;
  -webkit-mask: var(--sr-icon-search) no-repeat center / contain;
  mask: var(--sr-icon-search) no-repeat center / contain;
}
.srchModal .srchForm {
  flex: 0 1 500px;
  margin-left: auto;
}

/*--- 大分類リスト＋パネル ---*/
.srchModal__cats {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  /* 大分類の数だけ min-content の行を作り、最後に 1fr の行を置く。
     こうしないと grid-row:1/-1 が「1行目だけ」の意味になり、
     1行目がパネルの高さまで伸びてリストが崩れる。
     余った高さは末尾の 1fr が吸収する */
  grid-template-rows: repeat(var(--sr-cat-count, 7), min-content) 1fr;
  align-items: start;
  /* 中身の少ない大分類でも縮まないようにする。
     パネル側の max-height と同じ値にすることで高さが固定される */
  min-height: var(--sr-panel-h);
  padding-top: 0;
  /* 左カラムと右パネルの間の縦罫。
     display:contents のため列そのものは styling できないので背景で描く */
  background: linear-gradient(
    to right,
    transparent 0 249px,
    var(--sr-line) 249px 250px,
    transparent 250px
  );
}
.srchCat {
  /* li を透過させて、ボタンとパネルを直接グリッドに並べる */
  display: contents;
}
.srchCat__btn {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 6px 12px 6px 20px;
  border-bottom: solid 1px var(--sr-line);
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.4;
  text-align: left;
  transition: background 0.2s;
}
.srchCat__btn:hover {
  background: #fafafa;
}
.srchCat.is-active .srchCat__btn {
  position: relative;
  background: var(--sr-active-bg);
  /* 行の背景が縦罫（コンテナ背景）を隠すので、ここで引き直す */
  border-right: solid 1px var(--sr-line);
}
/* 選択中の先頭に付く丸 */
.srchCat.is-active .srchCat__btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 6px;
  width: 5px;
  height: 5px;
  margin-top: -2px;
  border-radius: 50%;
  background: #e8a000;
}
/* 選択中の右に出る三角（吹き出しの尻尾）。
   塗りつぶしの三角ではなく、45度回転させた正方形に
   2辺だけ罫線を引くことで「枠線付きの三角」にする。
   塗りは行の背景色と同じにして、縦罫を跨いで繋がって見せる */
.srchCat.is-active .srchCat__btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -7px;
  width: 11px;
  height: 11px;
  margin-top: -6px;
  background: var(--sr-active-bg);
  border-top: solid 1px var(--sr-line);
  border-right: solid 1px var(--sr-line);
  transform: rotate(45deg);
}
.srchCat__name {
  flex: 1 1 auto;
  min-width: 0;
}
.srchCat__icon {
  flex: 0 0 auto;
  display: block;
  width: 42px;
}
.srchCat__icon img {
  display: block;
  width: 100%;
  height: auto;
}

.srchCat__panel {
  grid-column: 2;
  grid-row: 1 / -1;
  /* 中身の多い大分類でも伸びないようにし、
     はみ出す分はパネル内でスクロールさせる */
  max-height: var(--sr-panel-h);
  overflow-y: auto;
  /* 端まで送ったときにモーダル本体へスクロールが伝わらないようにする */
  overscroll-behavior: contain;
  /* スクロールバーの有無で中身の幅がずれないようにする */
  scrollbar-gutter: stable;
  padding: 22px 30px 30px;
}
.srchCat:not(.is-active) .srchCat__panel {
  display: none;
}
.srchCat__empty {
  padding: 20px 0;
  color: #777;
  font-size: 1.3rem;
}

/*--- 小分類のカード ---*/
.srchItems {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.srchItem {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px 10px 14px;
  border: solid 1px #e6e6e6;
  border-radius: 4px;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.srchItem:hover {
  border-color: var(--sr-yellow);
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.14);
}
.srchItem__img {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
}
.srchItem__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.srchItem__name {
  margin-top: 8px;
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  color: #000;
}

/*==================================================
 SP
==================================================*/
@media screen and (max-width: 769px) {
  .modal-content-wrap{
    border-radius: 0;
  }
  .srch {
    padding: 10px 0;
  }
  .srch__inner {
    max-width: none;
    padding: 0 16px;
  }
  .srch__lead {
    font-size: 1.4rem;
  }
  .srch .srchForm {
    max-width: none;
    margin-top: 12px;
  }
  .srch__cats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 18px;
  }
  .srch__cat {
    padding: 14px 6px 12px;
    gap: 8px;
  }
  .srch__catIcon {
    width: 62px;
  }
  .srch__catName {
    font-size: 1.2rem;
  }
  .srchForm__btn{
    width: 42px;
    height: 42px;
  }
  .srchForm__text {
    height: 42px;
  }

  /*--- モーダル（SPは全画面表示） ---*/
  .modal-container:has(#srch-modal.active) {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    margin: 0;
  }
  .modal-content-wrap:has(#srch-modal.active) {
    /* modal-window.js が inline で max-height を書き込むため、
       !important でないと上書きできない */
    max-height: 100vh !important;
    max-height: 100dvh !important;
    height: 100vh;
    height: 100dvh;
    box-shadow: none;
  }
  .srchModal {
    padding: 0;
  }
  /* 閉じるボタンはスクロール領域の外にあるので、
     ヘッダーの右上へ重ねて常に見える位置に置く */
  .modal-container:has(#srch-modal.active) .modal-close-btn {
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 28px;
    height: 28px;
  }
  .srchModal__head {
    display: block;
    padding: 14px 14px 16px;
  }
  .srchModal__title {
    padding-right: 40px;
    font-size: 1.6rem;
  }
  .srchModal__title::before {
    width: 18px;
    height: 18px;
  }
  .srchModal .srchForm {
    margin: 12px 0 0;
  }

  /*--- SPはアコーディオン ---*/
  .srchModal__cats {
    display: block;
    background: none;
    min-height: 0;
    padding: 0 0 16px;
  }
  .srchCat {
    display: block;
  }
  .srchCat__btn {
    padding: 6px 14px 6px 16px;
    border-bottom: solid 1px var(--sr-line);
  }
  .srchCat.is-active .srchCat__btn {
    border-right: 0;
  }
  /* 縦並びなので尻尾は下向きにする */
  .srchCat.is-active .srchCat__btn::after {
    content: "";
    top: auto;
    right: auto;
    bottom: -6px;
    left: 50%;
    margin: 0 0 0 -6px;
    border-top: 0;
    border-right: solid 1px var(--sr-line);
    border-bottom: solid 1px var(--sr-line);
  }
  .srchCat__panel {
    /* SPはアコーディオンなので高さの固定は不要 */
    max-height: none;
    overflow: visible;
    scrollbar-gutter: auto;
    padding: 16px 14px 18px;
    border-bottom: solid 1px var(--sr-line);
  }
  .srchItems {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .srchItem {
    padding: 10px 8px;
  }
  .srchItem__name {
    font-size: 1.2rem;
  }
}

/*--- 動きを抑える設定への配慮 ---*/
@media (prefers-reduced-motion: reduce) {
  .srch *,
  .srchModal * {
    transition: none !important;
    animation: none !important;
  }
}

/*==================================================
 背面スクロールの固定（共通）
 scroll-lock.js が body に .is-scrollLocked を付ける

 ドロワー（is-gnavOpen）とモーダル（is-modalOpen）は
 見た目の分岐にのみ使い、body の固定はこのクラスへ一本化する。
 別々に固定していると、両方開いた状態から片方を閉じたときに
 固定が解除され、スクロール位置も先頭へ飛んでしまう
==================================================*/
body.is-scrollLocked {
  position: fixed;
  left: 0;
  width: 100%;
  overflow: hidden;
  /* スクロールバーが消えたぶんを埋めて、
     開いた瞬間に中身が右へずれるのを防ぐ。
     幅は scroll-lock.js が測って --scrollbar-w に入れる */
  box-sizing: border-box;
  padding-right: var(--scrollbar-w, 0px);
  /* 下の .gHead が fixed になってフローから抜けるぶんを確保する。
     これが無いと、開いた瞬間に中身がヘッダーの高さだけ上へ詰まる。
     高さは scroll-lock.js が測って --locked-head-h に入れる */
  padding-top: var(--locked-head-h, 0px);
}
/* default.css の html{overflow-y:scroll} で
   展開中も右端に余白が出るため打ち消す */
html:has(body.is-scrollLocked) {
  overflow-y: hidden;
}
/* body が position:fixed になるとスクロールコンテナが無くなり、
   sticky のヘッダーが文書上の位置（= -scrollY）へ戻ってしまう。
   展開中は fixed に切り替えてビューポート上端へ固定する */
body.is-scrollLocked .gHead {
  position: fixed;
  top: 0;
  left: 0;
  /* fixed はビューポート基準になるため、そのままだと
     スクロールバーの領域まで広がってヘッダーだけ横に伸びる */
  right: var(--scrollbar-w, 0px);
}

/*==================================================
 topNews　展示会情報 / お知らせ
 ※ 旧 #cnt02 / .info / .cntLft とは
 　 セレクタが重複しないため共存可能
==================================================*/
.topNews {
  --tn-yellow: #ffcf00;
  --tn-date: #e0a500;
  --tn-line: #eee;
  --tn-black: #111;
  --tn-width: 1200px;

  padding: 56px 0 60px;
  background: #f5f5f5;
}
.topNews *,
.topNews *::before,
.topNews *::after {
  box-sizing: border-box;
}
/* skin.css : div:after のクリアフィックスを無効化 */
.topNews div::after,
.topNews section::after {
  content: none;
  display: none;
  clear: none;
}
/* リセットは :where() で詳細度を0にして、
   コンポーネント側の指定が必ず勝つようにする */
.topNews :where(ul) {
  list-style: none;
  margin: 0;
  padding: 0;
}
.topNews :where(p),
.topNews :where(h2) {
  margin: 0;
  padding: 0;
}
.topNews :where(a),
.topNews :where(a:link),
.topNews :where(a:visited) {
  color: #000;
  text-decoration: none;
}

.topNews__inner {
  width: 100%;
  max-width: var(--tn-width);
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}

/*--- 見出し行 ---*/
.topNews__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
/* 見出しとリンクに同じ高さを持たせて、中央揃えを確実にする */
.topNews__title,
.topNews__more {
  min-height: 36px;
}
.topNews__title {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 3rem;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 0!important;
  position: relative;
  padding-left: 20px;
}
/* 見出し左の黄色いバー */
.topNews__title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: var(--tn-yellow);
}

/*--- 一覧を見る ---*/
.topNews__more {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 4px;
  background: transparent;
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1;
  transition: background 0.2s, color 0.2s;
}
/* 矢印（軸線＋V字の2要素で描画） */
.topNews__more::after {
  content: "";
  flex: 0 0 auto;
  margin-left: 12px;
  margin-top: -2px;
  width: 16px;
  height: 2px;
  background: var(--tn-date);
  transition: background 0.2s;
}
.topNews__more::before {
  content: "";
  order: 2;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: -2px;
  margin-left: -9px;
  border-top: solid 2px var(--tn-date);
  border-right: solid 2px var(--tn-date);
  transform: rotate(45deg);
  transition: border-color 0.2s;
}
.topNews__more:hover {
  background: var(--tn-black);
  color: #fff;
  text-decoration: none;
}
.topNews__more:hover::after {
  background: #fff;
}
.topNews__more:hover::before {
  border-color: #fff;
}

/*--- 一覧 ---*/
.topNews__body {
  padding: 0 24px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px -4px rgba(0, 0, 0, 0.16);
}
.topNews__list > li + li {
  border-top: solid 1px var(--tn-line);
}
.topNews__item {
  display: block;
  padding: 16px 0;
  transition: opacity 0.2s;
}
.topNews__date {
  display: block;
  margin-bottom: 6px;
  color: var(--tn-date);
  font-family: "Poppins", sans-serif;
  font-size: 1.3rem;
  font-weight: normal;
  line-height: 1;
  text-decoration: none!important;
}
.topNews__item:hover .topNews__date{
  color: var(--tn-date);
  text-decoration: none!important;
}
.topNews__text {
  display: block;
  font-size: 1.6rem;
  line-height: calc(1em + 8px);
}
.topNews__item:hover .topNews__text{
  color: #000;
  text-decoration: underline;
}
.topNews__empty {
  padding: 24px 0;
  color: #777;
  font-size: 1.3rem;
}

/*==================================================
 SP
==================================================*/
@media screen and (max-width: 769px) {
  .topNews {
    padding: 40px 0;
  }
  .topNews__inner {
    max-width: none;
    padding: 0 14px;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .topNews__head {
    gap: 10px;
    margin-bottom: 10px;
  }
  .topNews__title,
  .topNews__more {
    min-height: 30px;
  }
  .topNews__title {
    gap: 10px;
    font-size: 2.0rem;
    padding-left: 15px;
  }
  .topNews__title::before {
    width: 4px;
  }
  .topNews__more {
    padding: 7px 12px;
    font-size: 1.2rem;
  }
  .topNews__more::after {
    margin-left: 10px;
    width: 14px;
  }
  .topNews__body {
    padding: 10px 14px;
    border-radius: 6px;
  }
  .topNews__item {
    padding: 12px 0;
  }
  .topNews__date {
    margin-bottom: 4px;
    font-size: 1.2rem;
  }
  .topNews__text {
    font-size: 1.3rem;
    line-height: 1.6;
  }
}

/*--- 動きを抑える設定への配慮 ---*/
@media (prefers-reduced-motion: reduce) {
  .topNews * {
    transition: none !important;
  }
}

/*==================================================
 topInsta　Instagram
 有料プラグイン導入後は .topInsta__embed の中身が
 プラグインの出力に差し替わる想定
==================================================*/
.topInsta {
  --ti-bg: #fdf8e8;
  --ti-ph-a: #cbcbcb;
  --ti-ph-b: #e5e5e5;
  --ti-cols: 5;
  --ti-width: 1200px;

  padding: 48px 0 56px;
  background: var(--ti-bg);
  margin-top: 0!important;
}
.topInsta *,
.topInsta *::before,
.topInsta *::after {
  box-sizing: border-box;
}
/* skin.css : div:after のクリアフィックスを無効化 */
.topInsta div::after,
.topInsta section::after {
  content: none;
  display: none;
  clear: none;
}
.topInsta :where(ul) {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 見出しは他セクションより一回り小さい */
.topInsta .top-sec__head {
  margin-bottom: 20px;
}
.topInsta .top-sec__title {
  font-size: 2.8rem;
}

.topInsta__inner {
  width: 100%;
  max-width: var(--ti-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* プラグインの出力をそのまま受けるための箱。
   埋め込み側が持つ余白を打ち消さないよう、最低限だけ指定する */
.topInsta__embed {
  width: 100%;
}
.topInsta__embed img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/*--- 未設定時のプレースホルダー ---*/
.topInsta__placeholder {
  display: grid;
  grid-template-columns: repeat(var(--ti-cols), minmax(0, 1fr));
  gap: 0;
}
.topInsta__placeholder > li {
  aspect-ratio: 1 / 1;
  background: var(--ti-ph-b);
}
/* 市松模様。列数が奇数なので nth-child(odd) だけで交互になる */
.topInsta__placeholder > li:nth-child(odd) {
  background: var(--ti-ph-a);
}

/*==================================================
 SP
==================================================*/
@media screen and (max-width: 769px) {
  .topInsta {
    --ti-cols: 3;
    padding: 30px 0 34px;
  }
  .topInsta .top-sec__head {
    margin-bottom: 14px;
  }
  .topInsta .top-sec__title {
    font-size: 2rem;
  }
  .topInsta__inner {
    max-width: none;
    padding: 0 12px;
  }
  /* 3列×3行に収めるため10個目は隠す */
  .topInsta__placeholder > li:nth-child(n + 10) {
    display: none;
  }
}

/*==================================================
 topShop　商品販売サイト
==================================================*/
.topShop {
  --ts-shop-border: #ddd;
  --ts-shop-width: 1200px;

  padding: 60px 0 80px;
  background: #fff;
  margin-top: 0!important;
}
.topShop *,
.topShop *::before,
.topShop *::after {
  box-sizing: border-box;
}
/* skin.css : div:after のクリアフィックスを無効化 */
.topShop div::after,
.topShop section::after {
  content: none;
  display: none;
  clear: none;
}
.topShop :where(ul) {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 見出しは他セクションより一回り小さい */
.topShop .top-sec__head {
  margin-bottom: 18px;
}
.topShop .top-sec__title {
  font-size: 2.4rem;
}

.topShop__inner {
  width: 100%;
  max-width: var(--ts-shop-width);
  margin: 0 auto;
  padding: 0 20px;
}

.topShop__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.topShop__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border: solid 1px var(--ts-shop-border);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.topShop__item:hover {
  border-color: #bbb;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.16);
}
.topShop__item img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

/*==================================================
 SP
==================================================*/
@media screen and (max-width: 769px) {
  .topShop {
    padding: 40px 0 60px;
  }
  .topShop .top-sec__head {
    margin-bottom: 14px;
  }
  .topShop .top-sec__title {
    font-size: 2.0rem;
  }
  .topShop__inner {
    max-width: none;
    padding: 0 14px;
  }
  .topShop__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}
.top-movie {
  width: 1080px;
  max-width: 90vw;
}
.top-movie video {
  width: 100%;
  height: auto;
  max-height: 80vh;
  min-height: 200px;
  background: #000;
  object-fit: contain;
}