@charset "UTF-8";
/* 画像を拡大するカードは、共通のリンク透過を重ねない。 */
.top-craft .top-craft__link:hover,
.top-news .top-news__link:has(.top-news__img):hover,
.top-products .top-products__link:hover,
.top-shop .top-shop__link:hover {
  opacity: 1;
}
/*=======================================
	breakpoint
=======================================*/
/*=======================================
	hover
=======================================*/
/*=======================================
	中央配置
=======================================*/
/*=======================================
	可変レスポンシブ
=======================================*/
/* PC */
/* TB */
/* SP */
/*=======================================
	ブラウザ別
=======================================*/
/* Safari */
/* Firefox */
/*-------------------------
- top :ページ共通枠（コンテンツ幅）
- kv :メインビジュアル（背景写真4枚をフェード／背景は画面に固定）
- top_sec_ttl :セクション見出し（ものづくり・安全性）
- top_ttl_en :英語見出し＋日本語（Support／サポート など）
- top_craft :ものづくり・安全性の3カード
- top_support :サポート
- top_news :News & Topics
- top_magazine :Magazine／yamatoya blog
- top_products :Products
- top_shop :Online Shop（カルーセル）
- top_shoplist :Shoplist
-------------------------*/
/* ---- TOPページ用 変数 ---- */
/* 見出し */
/* 本文 */
/* 日付・区切り線 */
/* ボタン */
/* 背景（ものづくり／オンラインショップ／PCの読みものカード） */
/* SPの読みものカード・お知らせのロゴ枠 */
/* 販売店検索ボタンの地 */
/* オンラインショップのカテゴリ */
/* 製品情報カードの枠線 */
/* ものづくりカードの写真に重ねる色（#595045 / 30%） */
/* 英字見出し */
/* コンテンツ幅（Figma 1440 − 左右80） */
/* 左右の逃げ（Figma SP 375 − 左右20 = 335） */
/* 角丸 */
/* 見出しの英字（Figma PC 50px / Regular ／ SP 40px / Medium） */
/* 見出しと中身を横に並べる幅（1181px〜）。これより狭いPC・タブレットは縦に積む */
/* Figma の矢印（6.5 × 13 / 線1px）。9.2pxの正方形を45°回して上・右の辺だけ見せる
   ※見える矢印の左端は正方形の中心（left + 4.6）、先端は中心 + 6.5 */
/*=======================================
　top
=======================================*/
.top .top__inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
}

/* PC/SPで改行位置が異なる箇所の制御 */
.top-br--sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .top-br--sp {
    display: inline;
  }
}

@media screen and (max-width: 768px) {
  .top-br--pc {
    display: none;
  }
}

/* PC/SPで文言が異なる箇所 */
.top-only-sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .top-only-sp {
    display: block;
  }
}

@media screen and (max-width: 768px) {
  .top-only-pc {
    display: none;
  }
}

/* KV上のヘッダー：SPの下線（下層ページ用の白ヘッダー向け）はTOPでは出さない */
@media screen and (max-width: 1024px) {
  .header:not(.header--lower) .header__inner {
    border-bottom-color: transparent;
  }
}

/*=======================================
　kv
=======================================*/
/* 2026-09-28 CB：写真の構図とスクロール区間の高さを分離する。
   初期画面は縦コピーだけ。コピーが上端付近へ来る頃に本文が下から入り、
   本文が中央へ近づくにつれて背景だけを暗く・ぼかす。ボタン下にも余白を残す。
   背景はKVの範囲で切り抜き、ピンチ時の絶対配置への切替も維持する。 */
.kv {
  --kv-art-height: 81.944444vw;
  --kv-copy-top: min(calc(var(--kv-art-height) * 0.26338), 40svh);
  --kv-shade: 0;
  --kv-blur: 0px;
  position: relative;
  width: 100%;
  padding-top: calc(100svh + var(--kv-copy-top) - 6svh);
  padding-bottom: clamp(150px, 30svh, 360px);
  clip-path: inset(0);
  background: #8A7A66; /* 写真の読み込み前 */
}
@media screen and (min-width: 769px) and (max-width: 1180px) {
  .kv {
    --kv-art-height: max(81.944444vw, 900px);
  }
}
@media screen and (max-width: 768px) {
  .kv {
    --kv-art-height: 234.933333vw;
    --kv-copy-top: min(calc(var(--kv-art-height) * 0.2849), 40svh);
  }
}
.kv {
  /* 写真は従来の高さを基準にする。縦長の画面でも背景が途切れないようにする。 */
}
.kv .kv__bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: max(var(--kv-art-height), 100lvh);
  pointer-events: none;
  overflow: hidden;
}
.kv .kv__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--kv-shade);
}
.kv.kv--zoomed {
  overflow: hidden;
}
.kv.kv--zoomed .kv__bg {
  position: absolute;
  transform: translate3d(0, var(--kv-zoom-offset, 0px), 0);
}
.kv .kv__slider {
  position: absolute;
  inset: 0;
  filter: blur(var(--kv-blur));
  /* スクロール中も写真の寸法・構図は固定し、ぼかしだけを変える。 */
}
.kv {
  /* 4枚をフェードで切り替える */
}
.kv .kv__slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.kv .kv__slide.is-current {
  opacity: 1;
}
.kv {
  /* Figmaのトリミング（CROP）を、歪ませずに object-fit: cover ＋ 拡大で再現する。
     --kv-pos : トリミング範囲の基準点（Figmaの範囲の左上位置 ÷ はみ出し量）
     --kv-z   : cover に対する拡大率。Figmaと同じ比率の枠で同じ範囲が見える */
}
.kv .kv__img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: var(--kv-pos);
  transform: scale(var(--kv-z));
  transform-origin: var(--kv-pos);
}
.kv {
  /* Figma top_kv1（SPは top_sp の別カット） */
}
.kv .kv__slide--01 {
  --kv-pos: 59.459% 92.458%;
  --kv-z: 1.1204;
}
@media screen and (max-width: 768px) {
  .kv .kv__slide--01 {
    --kv-pos: 45.697% 1.793%;
    --kv-z: 1.0913;
  }
}
.kv {
  /* PCは既存の構図。SPの2・3枚目は2026-09-28の添付見本へ合わせる。 */
}
.kv .kv__slide--02 {
  --kv-pos: 24.371% 49.957%;
  --kv-z: 1.8511;
}
@media screen and (max-width: 768px) {
  .kv .kv__slide--02 {
    --kv-pos: 42% 90%;
    --kv-z: 1.1;
  }
}
.kv .kv__slide--03 {
  --kv-pos: 12.008% 100%;
  --kv-z: 1.0095;
}
@media screen and (max-width: 768px) {
  .kv .kv__slide--03 {
    --kv-pos: 35.3% 0%;
    --kv-z: 1.1;
  }
}
.kv .kv__slide--04 {
  --kv-pos: 80.117% 89.232%;
  --kv-z: 1.2074;
}
@media screen and (max-width: 768px) {
  .kv .kv__slide--04 {
    --kv-z: 1;
  }
}
.kv {
  /* 縦書きコピー（Figma PC x440.855 y310.787 / 78.29 × 241.427 ／ SP x90 y251 / 50 × 190.27 の別素材） */
}
.kv .kv__copy {
  position: absolute;
  left: 30.615%;
  top: var(--kv-copy-top);
  width: 5.437%;
}
@media screen and (max-width: 768px) {
  .kv .kv__copy {
    left: 24%;
    width: 13.333%;
  }
}
.kv .kv__copy img {
  display: block;
  width: 100%;
  height: auto;
}
.kv {
  /* 本文の高さは内容に追従させる。初期画面外から通常のスクロールで現れる。 */
}
.kv .kv__body {
  position: relative;
  display: flow-root;
  width: 100%;
  text-align: center;
}
.kv {
  /* Figma 16px / Medium / 行送り39（SP 14px / 行送り35） */
}
.kv .kv__txt {
  margin-top: -15.2px; /* 39 ÷ 2 − 16 × 0.297 */
  margin-bottom: -11.7px;
  font-weight: 500;
  font-size: 16px;
  line-height: 39px;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .kv .kv__txt {
    margin-top: -13.4px; /* 35 ÷ 2 − 14 × 0.297 */
    margin-bottom: -11.3px;
    font-size: 14px;
    line-height: 35px;
  }
}
.kv .kv__txt {
  /* Figma gap 39（前の行の字面の下端 → この行の字面の上端。PCのみ表示） */
}
.kv .kv__txt--last {
  margin-top: 24.5px;
}
@media screen and (max-width: 768px) {
  .kv .kv__txt--last {
    display: none;
  }
}
.kv {
  /* Figma gap 58（219 → 277）／ ボタン 257.505 × 50 */
}
.kv .kv__action {
  margin-top: 69.7px;
}
@media screen and (max-width: 768px) {
  .kv .kv__action {
    margin-top: 39.3px; /* Figma gap 40（字面の下端 → ボタン） */
  }
}
.kv {
  /* Figma PC : 左35 ＋ 文字171 ＋ 間隔10 ＋ 矢印6.5 ＋ 右35 ／ SP 222 × 40 : 左30.5 ＋ 文字150 ＋ 間隔8 ＋ 矢印5.2 ＋ 右20 */
}
.kv .kv__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 257.5px;
  height: 50px;
  padding: 0 51.5px 0 35px;
  border-radius: 999px;
  background: #CFAD75;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .kv .kv__btn {
    min-width: 222px;
    height: 40px;
    padding: 0 33.2px 0 30.5px;
    font-size: 14px;
  }
}
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .kv .kv__btn:hover {
    opacity: 0.8;
  }
}
@media (min-width: 769px) and (-ms-high-contrast: none), (min-width: 769px) and (-ms-high-contrast: active) {
  .kv .kv__btn:hover {
    opacity: 0.8;
  }
}
.kv .kv__btn::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9.2px;
  height: 9.2px;
  margin-top: -4.6px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg);
  right: 33.1px; /* 先端を右35の位置に */
}
@media screen and (max-width: 768px) {
  .kv .kv__btn::after {
    right: 18.5px;
    width: 7.4px;
    height: 7.4px;
    margin-top: -3.7px;
  }
}

/*=======================================
　top_sec_ttl / top_ttl_en
=======================================*/
/* Figma : ものづくり・安全性（30px / 字間20%）＋ yamatoyaのこだわり（16px） */
.top-sec-ttl {
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-indent: 0.2em; /* 字間ぶん右へずれるのを戻して中央に揃える */
  font-feature-settings: "palt"; /* Figma : 「・」を詰めた字幅（幅285） */
  text-align: center;
  color: #1D1D1F;
}
@media screen and (max-width: 768px) {
  .top-sec-ttl {
    font-size: 24px;
  }
}

.top-sec-sub {
  margin-top: 5px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  text-align: center;
  color: #1D1D1F;
}
@media screen and (max-width: 768px) {
  .top-sec-sub {
    margin-top: 10px;
  }
}

/* Figma : 英字（Manrope）の大文字の上端 → 18 → 日本語（16px）
   Manrope は行送り1のとき大文字の上端が 0.165em 下がる（PC 8.25 / SP 6.6）。
   日本語は行送り1.2の行の中心 ＋ 0.075em に字面の中心がくる */
.top-ttl-en .top-ttl-en__main {
  display: block;
  margin-top: -8.25px;
  font-family: "Manrope", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 50px;
  line-height: 1;
  color: #1D1D1F;
}
@media screen and (max-width: 768px) {
  .top-ttl-en .top-ttl-en__main {
    margin-top: -6.6px;
    font-weight: 500;
    font-size: 40px;
  }
}
.top-ttl-en .top-ttl-en__sub {
  display: block;
  margin-top: 10.45px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  color: #1D1D1F;
}
@media screen and (max-width: 768px) {
  .top-ttl-en .top-ttl-en__sub {
    margin-top: 12.8px;
  }
}

/*=======================================
　top_craft
=======================================*/
/* Figma PC : 見出し帯160 ＋ カード610（1280 / 3列 / radius 20）
   Figma SP : 見出し帯118 ＋ カード（335 × 280 / 縦積み / 1pxずつ隙間）
   カードは Figma の比率を最小の高さとし、狭い幅で文字が増えたときはカードが伸びる */
.top-craft {
  background: #F8F3EA;
}
.top-craft .top-craft__head {
  padding: 60px 0 40px;
}
@media screen and (max-width: 768px) {
  .top-craft .top-craft__head {
    padding: 30px 0;
  }
}
.top-craft .top-craft__list {
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-radius: 20px;
}
@media screen and (max-width: 768px) {
  .top-craft .top-craft__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
  }
}
.top-craft .top-craft__item {
  display: grid;
}
.top-craft .top-craft__item::before {
  content: "";
  grid-area: 1/1;
  padding-top: 142.969%; /* 610 ÷ 426.667 */
}
@media screen and (max-width: 768px) {
  .top-craft .top-craft__item::before {
    padding-top: 83.582%; /* 280 ÷ 335 */
  }
}
.top-craft .top-craft__link {
  position: relative;
  overflow: hidden;
  grid-area: 1/1;
  display: flex;
  flex-direction: column;
  color: #fff;
}
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .top-craft .top-craft__link:hover .top-craft__bg {
    transform: scale(calc(var(--z) * 1.03));
  }
}
@media (min-width: 769px) and (-ms-high-contrast: none), (min-width: 769px) and (-ms-high-contrast: active) {
  .top-craft .top-craft__link:hover .top-craft__bg {
    transform: scale(calc(var(--z) * 1.03));
  }
}
.top-craft .top-craft__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(89, 80, 69, 0.3);
}
.top-craft .top-craft__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos);
  transform: scale(var(--z));
  transform-origin: var(--pos);
  transition: transform 0.4s ease;
}
.top-craft .top-craft__item--products .top-craft__bg {
  --pos: 25.16% 0%;
  --z: 1.0056;
}
@media screen and (max-width: 768px) {
  .top-craft .top-craft__item--products .top-craft__bg {
    --pos: 21.78% 20.7%;
    --z: 1.1985;
  }
}
.top-craft .top-craft__item--manufacture .top-craft__bg {
  --pos: 45.47% 8%; /* 上端の透明部分を隠しながら、手元と木材の位置を下げる */
  --z: 1.5;
}
@media screen and (max-width: 768px) {
  .top-craft .top-craft__item--manufacture .top-craft__bg {
    --pos: 41.91% 20%;
    --z: 2.2;
  }
}
.top-craft .top-craft__item--sustainability .top-craft__bg {
  --pos: 77.47% 27.12%;
  --z: 2.0373;
}
@media screen and (max-width: 768px) {
  .top-craft .top-craft__item--sustainability .top-craft__bg {
    /* SPは別カットの写真（Figma img_032） */
    --pos: 73.73% 41.88%;
    --z: 3.428;
  }
}
.top-craft .top-craft__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  justify-content: space-between;
  gap: 40px;
  padding: clamp(40px, 5.903vw, 85px) 16px;
}
@media screen and (max-width: 768px) {
  .top-craft .top-craft__body {
    /* Figma SP : 上10・下20の内側で、アイコン → 20 → 見出し → 20 → 本文 を上下中央に */
    justify-content: center;
    gap: 20px;
    padding: 10px 16px 20px;
  }
}
.top-craft .top-craft__head-area {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.top-craft .top-craft__icon {
  display: block;
  width: auto;
  height: 50px;
  filter: brightness(0) invert(1);
  transform: translateX(5px);
}
@media screen and (max-width: 768px) {
  .top-craft .top-craft__item--sustainability .top-craft__icon {
    transform: translateX(2px);
  }
}
.top-craft .top-craft__ttl {
  display: block;
  margin-top: 20px;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0.2em;
  writing-mode: vertical-rl;
}
@media screen and (max-width: 768px) {
  .top-craft .top-craft__ttl {
    letter-spacing: 0;
    text-align: center;
    writing-mode: horizontal-tb;
  }
}
@media screen and (max-width: 768px) {
  .top-craft .top-craft__item:not(.top-craft__item--products) .top-craft__ttl {
    padding-bottom: 10px;
  }
}
.top-craft .top-craft__foot {
  display: block;
  text-align: center;
}
.top-craft .top-craft__txt {
  display: block;
  font-weight: 400;
  font-size: 15px;
  line-height: 31px;
}
.top-craft .top-craft__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  max-width: 100%;
  height: 40px;
  margin-top: 20px;
  border-radius: 999px;
  background: #CFAD75;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .top-craft .top-craft__btn {
    position: absolute;
    right: 20px;
    bottom: 23px;
    width: 30px;
    height: 30px;
    margin-top: 0;
  }
}
.top-craft .top-craft__btn::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9.2px;
  height: 9.2px;
  margin-top: -4.6px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg);
  right: 18.1px;
}
@media screen and (max-width: 768px) {
  .top-craft .top-craft__btn::after {
    /* 回転した矢印の線の見た目を、丸ボタンの左右中央に合わせる */
    left: calc(50% - 7.5px);
    right: auto;
  }
}
@media screen and (max-width: 768px) {
  .top-craft .top-craft__btn-txt {
    display: none;
  }
}

/*=======================================
　top_support
=======================================*/
/* Figma PC : Frame 17（padding 100 0 ／ 左に見出し299 ＋ 28 ＋ 右に一覧953）
   Figma SP : padding 60 0 ／ 見出し → 2×2の一覧 → ボタン2つ
   PCの狭い幅（〜1180px）は見出しの下に一覧を置く */
.top-support {
  padding: 100px 0;
  background: #F8F3EA;
}
@media screen and (max-width: 768px) {
  .top-support {
    padding: 60px 0;
  }
}
@media screen and (min-width: 1181px) {
  .top-support .top-support__body {
    display: flex;
    align-items: flex-start;
    gap: 28px;
  }
}
@media screen and (min-width: 1181px) {
  .top-support .top-ttl-en {
    flex: 0 0 299px;
  }
}
.top-support .top-support__contents {
  flex: 1 1 auto;
  min-width: 0;
}
@media screen and (min-width: 769px) and (max-width: 1180px) {
  .top-support .top-support__contents {
    margin-top: 40px;
  }
}
@media screen and (max-width: 768px) {
  .top-support .top-support__contents {
    margin-top: 30px;
  }
}
.top-support .top-support__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media screen and (max-width: 768px) {
  .top-support .top-support__list {
    /* Figma SP : 150 × 2列 / 間隔20 を中央に（狭い幅では列が縮む） */
    grid-template-columns: repeat(2, minmax(0, 150px));
    grid-template-rows: 122.75px auto;
    justify-content: center;
    column-gap: 20px;
    align-items: start;
    background: linear-gradient(#909090, #909090) left 1px top 110.46px/calc(50% - 10.5px) 1px no-repeat, linear-gradient(#909090, #909090) right 4px top 110.46px/calc(50% - 11.5px) 1px no-repeat, linear-gradient(#909090, #909090) left calc(50% - 0.5px) top 0.46px/1px 99px no-repeat, linear-gradient(#909090, #909090) left calc(50% - 0.5px) top 123.46px/1px 99px no-repeat;
  }
}
.top-support .top-support__item:not(:last-child) {
  border-right: 1px solid #909090;
}
@media screen and (max-width: 768px) {
  .top-support .top-support__item:not(:last-child) {
    border-right: none;
  }
}
.top-support .top-support__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 155px;
  color: #1D1D1F;
}
@media screen and (max-width: 768px) {
  .top-support .top-support__link {
    height: auto;
  }
}
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .top-support .top-support__link:hover {
    opacity: 0.6;
  }
}
@media (min-width: 769px) and (-ms-high-contrast: none), (min-width: 769px) and (-ms-high-contrast: active) {
  .top-support .top-support__link:hover {
    opacity: 0.6;
  }
}
.top-support .top-support__icon-wrap {
  display: block;
  flex-shrink: 0;
}
.top-support .top-support__icon {
  display: block;
  flex-shrink: 0;
  width: 85px;
  height: 87px;
  /* PCは85 × 87の枠を含む（図柄65.33 × 59.1、x10 y10）。
     SPは_reference/support/assets/svg/icon.svgの図柄を切り出し、TOPの寸法59.03 × 53.5で表示。
     図柄の上端7.13・文字の上端73.2に合わせる。 */
}
.top-support .top-support__icon--01 {
  width: 85px;
  height: 87px;
  margin: 0;
}
@media screen and (max-width: 768px) {
  .top-support .top-support__icon--01 {
    width: 59.03px;
    height: 53.5px;
    margin: 7.13px 0 12.57px;
  }
}
@media screen and (max-width: 768px) {
  .top-support .top-support__icon--02 {
    width: 55px;
    height: 60px;
    margin-bottom: 14.35px;
  }
}
@media screen and (max-width: 768px) {
  .top-support .top-support__icon--03 {
    width: 60px;
    height: 48px;
    margin-bottom: 9.85px;
  }
}
@media screen and (max-width: 768px) {
  .top-support .top-support__icon--04 {
    width: 52px;
    height: 40px;
    margin: 6.32px 0 11.21px;
  }
}
.top-support .top-support__txt {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  font-feature-settings: "palt"; /* Figma : 「・」を詰めた字幅 */
}
@media screen and (max-width: 768px) {
  .top-support .top-support__txt {
    display: block;
    min-height: 0;
    font-size: 14.4px;
    line-height: 22.4px;
  }
}
.top-support .top-support__btns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 50px;
}
@media screen and (max-width: 768px) {
  .top-support .top-support__btns {
    grid-template-columns: minmax(0, 1fr);
    gap: 20.3px;
    margin-top: 45.5px; /* Figma 一覧（字面の下端）の下20 ＋ gap 30 */
  }
}
.top-support .top-support__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  height: 89px;
  padding-right: 20px;
  border-radius: 999px;
  background: #CFAD75;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .top-support .top-support__btn {
    gap: 14.5px;
    height: 60px;
    padding-right: 14.5px;
  }
}
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .top-support .top-support__btn:hover {
    opacity: 0.8;
  }
}
@media (min-width: 769px) and (-ms-high-contrast: none), (min-width: 769px) and (-ms-high-contrast: active) {
  .top-support .top-support__btn:hover {
    opacity: 0.8;
  }
}
.top-support .top-support__btn::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9.2px;
  height: 9.2px;
  margin-top: -4.6px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg);
  right: 38.1px;
}
@media screen and (max-width: 768px) {
  .top-support .top-support__btn::after {
    right: 27.6px;
    width: 6.7px;
    height: 6.7px;
    margin-top: -3.35px;
  }
}
.top-support .top-support__btn-icon {
  display: block;
  flex-shrink: 0;
  width: auto;
  height: 42.79px;
  filter: brightness(0) invert(1);
}
@media screen and (max-width: 768px) {
  .top-support .top-support__btn-icon {
    height: 31.47px;
  }
}
.top-support .top-support__btn-item:nth-child(2) .top-support__btn-icon {
  height: 50.25px;
}
@media screen and (max-width: 768px) {
  .top-support .top-support__btn-item:nth-child(2) .top-support__btn-icon {
    height: 36.95px;
  }
}
.top-support .top-support__btn-txt {
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .top-support .top-support__btn-txt {
    font-size: 14.5px;
  }
}

/*=======================================
　top_news
=======================================*/
/* Figma PC : padding 100 0 ／ 見出し73 → gap 23 → 一覧314 → ボタン
   Figma SP : padding 60 0 ／ 一覧は横スクロール（左右20の余白） */
.top-news {
  padding: 100px 0 0;
}
@media screen and (max-width: 768px) {
  .top-news {
    padding: 60px 0;
  }
}
.top-news .top-news__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 24.6px; /* Figma : 見出しの大文字の上端から96 */
}
@media screen and (max-width: 768px) {
  .top-news .top-news__list {
    display: flex;
    gap: 15px;
    margin: 40.6px -20px 0;
    padding: 0 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px; /* 先頭カードも左20の位置で止まる（初期位置 scrollLeft 0） */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .top-news .top-news__list::-webkit-scrollbar {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .top-news .top-news__item {
    flex: 0 0 280px;
    scroll-snap-align: start;
  }
}
.top-news .top-news__link {
  display: block;
  color: #1D1D1F;
}
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .top-news .top-news__link:hover .top-news__img {
    transform: scale(1.03);
  }
}
@media (min-width: 769px) and (-ms-high-contrast: none), (min-width: 769px) and (-ms-high-contrast: active) {
  .top-news .top-news__link:hover .top-news__img {
    transform: scale(1.03);
  }
}
.top-news .top-news__media {
  position: relative;
  overflow: hidden;
  display: block;
  aspect-ratio: 408/230;
  border-radius: 20px;
}
.top-news .top-news__media--logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F8F3EA;
}
@media screen and (max-width: 768px) {
  .top-news .top-news__media--logo {
    background: #F3EADC;
  }
}
.top-news .top-news__img {
  position: absolute;
  max-width: none;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.top-news .top-news__img--01 {
  width: 113.235%;
  height: 150.652%;
  left: -13.235%;
  top: -6.957%;
}
.top-news .top-news__img--03 {
  width: 100.735%;
  height: 115.501%;
  left: -3.676%;
  top: -10.607%;
}
.top-news .top-news__logo {
  position: relative;
  left: 0.98%; /* Figma : 中央から右へ4・下へ4.25（SP 右へ4.6） */
  top: 1.85%;
  display: block;
  width: 55.377%;
  height: auto;
}
@media screen and (max-width: 768px) {
  .top-news .top-news__logo {
    left: 1.64%;
    top: 0;
    width: 47.761%;
  }
}
.top-news .top-news__body {
  display: block;
  margin-top: 17.7px;
}
.top-news .top-news__date {
  display: block;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  color: #909090;
}
.top-news .top-news__ttl {
  display: block;
  min-height: 52px;
  margin-top: 7.6px;
  font-weight: 500;
  font-size: 16px;
  line-height: 26px;
}
@media screen and (max-width: 768px) {
  .top-news .top-news__ttl {
    min-height: 46px;
    margin-top: 9px;
    line-height: 23px;
  }
}
.top-news .top-news__action {
  margin-top: 54.7px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .top-news .top-news__action {
    margin-top: 32.3px;
  }
}

/* もっと見る／製品情報トップへ（Figma 250 × 50 / radius 999 / 16px Medium） */
.top-news .top-more {
  padding: 0 45px;
}
.top-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  height: 50px;
  padding: 0 45px 0 25px;
  border-radius: 999px;
  background: #CFAD75;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: #fff;
}
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .top-more:hover {
    opacity: 0.8;
  }
}
@media (min-width: 769px) and (-ms-high-contrast: none), (min-width: 769px) and (-ms-high-contrast: active) {
  .top-more:hover {
    opacity: 0.8;
  }
}
.top-more::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9.2px;
  height: 9.2px;
  margin-top: -4.6px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg);
  right: 18.85px;
}

/*=======================================
　top_magazine
=======================================*/
/* Figma PC : padding 100 0 ／ 左に見出し436 ＋ 右にカード844（517 ＋ gap 28 ＋ 299）
   Figma SP : 見出し → gap 40 → カードを縦積み（gap 28）
   PCの狭い幅（〜1180px）は見出しの下にカード2枚を並べる */
.top-magazine {
  padding: 100px 0;
}
@media screen and (max-width: 768px) {
  .top-magazine {
    padding: 60px 0;
  }
}
@media screen and (min-width: 1181px) {
  .top-magazine .top-magazine__body {
    display: flex;
    align-items: flex-start;
  }
}
@media screen and (min-width: 1181px) {
  .top-magazine .top-ttl-en {
    flex: 1 1 auto;
    min-width: 0;
  }
}
.top-magazine .top-magazine__cards {
  display: grid;
  grid-template-columns: minmax(0, 517fr) minmax(0, 299fr);
  gap: 28px;
}
@media screen and (min-width: 1181px) {
  .top-magazine .top-magazine__cards {
    flex: 0 1 844px;
    min-width: 0;
  }
}
@media screen and (min-width: 769px) and (max-width: 1180px) {
  .top-magazine .top-magazine__cards {
    margin-top: 40px;
  }
}
@media screen and (max-width: 768px) {
  .top-magazine .top-magazine__cards {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 40px;
  }
}
/* 文字・装飾を含む1枚画像。PC/SPの切り替えはpictureで行う。 */
.top-magazine .top-magazine__card {
  display: block;
  align-self: start;
}
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .top-magazine .top-magazine__card:hover {
    opacity: 0.85;
  }
}
@media (min-width: 769px) and (-ms-high-contrast: none), (min-width: 769px) and (-ms-high-contrast: active) {
  .top-magazine .top-magazine__card:hover {
    opacity: 0.85;
  }
}
.top-magazine .top-magazine__card picture {
  display: block;
}
.top-magazine .top-magazine__image {
  display: block;
  width: 100%;
  height: auto;
}

/*=======================================
　top_products
=======================================*/
/* Figma PC : 左に見出し・本文300 ＋ 右にカード844（408 × 249 の2×2）／ padding-bottom 100
   Figma SP : 見出し → 本文 → ボタン → カード縦積み
   PCの狭い幅（〜1180px）は見出し・本文の下にカードを置く */
.top-products {
  padding-bottom: 100px;
}
@media screen and (max-width: 768px) {
  .top-products {
    padding-bottom: 60px;
  }
}
@media screen and (min-width: 1181px) {
  .top-products .top-products__body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
  }
}
@media screen and (min-width: 1181px) {
  .top-products .top-products__lead {
    flex: 0 0 300px;
  }
}
.top-products .top-products__txt {
  max-width: 600px;
  margin-top: 61.25px;
  font-weight: 500;
  font-size: 18px;
  line-height: 34px;
  letter-spacing: 0.06em;
  font-feature-settings: "halt"; /* Figma : 句読点・括弧を詰めた字組み（改行位置を合わせる） */
  color: #666666;
}
@media screen and (max-width: 768px) {
  .top-products .top-products__txt {
    max-width: none;
    margin-top: 40px;
    font-size: 20px;
    font-feature-settings: "palt";
    color: #1D1D1F;
  }
}
.top-products .top-products__action {
  margin-top: 60px;
}
@media screen and (max-width: 768px) {
  .top-products .top-products__action {
    margin-top: 40px;
    text-align: center;
  }
}
.top-products .top-products__action .top-more {
  justify-content: flex-start;
  padding: 0 45px 0 47px;
  font-size: 18px;
  letter-spacing: 0.04em;
}
.top-products .top-products__action .top-more::after {
  right: 23.67px;
}
.top-products .top-products__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 28px;
}
@media screen and (min-width: 1181px) {
  .top-products .top-products__list {
    flex: 0 1 844px;
    min-width: 0;
  }
}
@media screen and (min-width: 769px) and (max-width: 1180px) {
  .top-products .top-products__list {
    margin-top: 60px;
  }
}
@media screen and (max-width: 768px) {
  .top-products .top-products__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-top: 40px;
  }
}
.top-products .top-products__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 14px 0 18.35px; /* 枠線1pxを含めて Figma 上15 / 下19.35 */
  border: 1px solid #EADBC2;
  border-radius: 23px;
  background: #fff;
  color: #000;
}
@media screen and (max-width: 768px) {
  .top-products .top-products__link {
    padding: 20px 0 13.5px;
    border-radius: 20px;
  }
}
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .top-products .top-products__link:hover .top-products__img {
    transform: scale(1.05);
  }
}
@media (min-width: 769px) and (-ms-high-contrast: none), (min-width: 769px) and (-ms-high-contrast: active) {
  .top-products .top-products__link:hover .top-products__img {
    transform: scale(1.05);
  }
}
.top-products .top-products__media {
  position: relative;
  overflow: hidden;
  display: block;
  width: 76.601%;
  aspect-ratio: 311/183;
}
@media screen and (max-width: 768px) {
  .top-products .top-products__media {
    width: 62.017%;
    aspect-ratio: 206.517/148;
  }
}
.top-products .top-products__img {
  position: absolute;
  top: var(--t);
  left: var(--cx);
  width: auto;
  max-width: none;
  height: var(--h);
  translate: -50% 0;
  transition: transform 0.4s ease;
}
.top-products .top-products__img--01 {
  --h: 121.385%;
  --t: -9.543%;
  --cx: 49.98%;
}
.top-products .top-products__img--02 {
  --h: 103.825%;
  --t: 0%;
  --cx: 54.949%;
}
.top-products .top-products__img--03 {
  --h: 166.849%;
  --t: -41.138%;
  --cx: 50%;
}
.top-products .top-products__img--04 {
  --h: 100%;
  --t: 0%;
  --cx: 52.573%;
}
.top-products .top-products__name {
  display: block;
  margin-top: 1.65px;
  padding: 0 8px;
  font-weight: 500;
  font-size: 18px;
  line-height: 30px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .top-products .top-products__name {
    margin-top: 0;
  }
}

/*=======================================
　top_shop
=======================================*/
/* Figma PC : padding 60 0 100 ／ 見出し → カルーセル（大文字の上端から100）
   Figma SP : padding 60 0 60 ／ SPの寸法はPCの0.9倍 */
.top-shop {
  padding: 60px 0 100px;
  background: #F8F3EA;
}
@media screen and (max-width: 768px) {
  .top-shop {
    padding: 60px 0;
  }
}
.top-shop .top-shop__head {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 36px;
}
@media screen and (max-width: 768px) {
  .top-shop .top-shop__head {
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
    height: auto;
  }
}
.top-shop .top-shop__head .top-ttl-en__main {
  margin-bottom: -5.75px; /* 行の高さ50 → 大文字の高さ36にそろえる */
}
@media screen and (max-width: 768px) {
  .top-shop .top-shop__head .top-ttl-en__main {
    margin-bottom: -4.6px;
  }
}
.top-shop .top-shop__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 30px;
  border-radius: 999px;
  background: #CFAD75;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .top-shop .top-shop__btn {
    height: 42px;
    font-size: 18px;
  }
}
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .top-shop .top-shop__btn:hover {
    opacity: 0.8;
  }
}
@media (min-width: 769px) and (-ms-high-contrast: none), (min-width: 769px) and (-ms-high-contrast: active) {
  .top-shop .top-shop__btn:hover {
    opacity: 0.8;
  }
}
.top-shop .top-shop__btn-icon {
  display: block;
  width: 17px;
  height: 18px;
  filter: brightness(0) invert(1);
}
.top-shop .top-shop__slider {
  position: relative;
  margin-top: 64px;
}
@media screen and (max-width: 768px) {
  .top-shop .top-shop__slider {
    margin-top: 50.35px;
  }
}
.top-shop .top-shop__track {
  display: flex;
  gap: 28px;
  padding: 0 calc(50% - 149.5px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.top-shop .top-shop__track::-webkit-scrollbar {
  display: none;
}
.top-shop .top-shop__track:focus-visible {
  outline: 2px solid #CFAD75;
  outline-offset: 4px;
}
@media screen and (max-width: 768px) {
  .top-shop .top-shop__track {
    gap: 25.2px;
    padding: 0 27.6px;
    scroll-padding-inline: 27.6px;
  }
}
.top-shop .top-shop__item {
  display: flex;
  flex: 0 0 299px;
  scroll-snap-align: center;
}
@media screen and (max-width: 768px) {
  .top-shop .top-shop__item {
    flex: 0 0 269.1px;
    scroll-snap-align: start;
  }
}
.top-shop .top-shop__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 465px;
  padding: 20px 24.5px 33px;
  border-radius: 15px;
  background: #fff;
  color: #1D1D1F;
}
@media screen and (max-width: 768px) {
  .top-shop .top-shop__link {
    min-height: 418.5px;
    padding: 18px 22.05px 29.7px;
    border-radius: 13.5px;
  }
}
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .top-shop .top-shop__link:hover .top-shop__img {
    transform: scale(1.05);
  }
}
@media (min-width: 769px) and (-ms-high-contrast: none), (min-width: 769px) and (-ms-high-contrast: active) {
  .top-shop .top-shop__link:hover .top-shop__img {
    transform: scale(1.05);
  }
}
.top-shop .top-shop__link::after {
  content: "";
  position: absolute;
  right: 24.14px;
  bottom: 23.79px;
  width: 8px;
  height: 15px;
  background: url(../img/top/icon_arrow.svg) center/contain no-repeat;
}
@media screen and (max-width: 768px) {
  .top-shop .top-shop__link::after {
    right: 21.73px;
    bottom: 21.41px;
    width: 7.2px;
    height: 13.5px;
  }
}
.top-shop .top-shop__media {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  aspect-ratio: 250/200;
}
.top-shop .top-shop__img {
  position: absolute;
  max-width: none;
  transition: transform 0.4s ease;
}
.top-shop .top-shop__img--01 {
  width: 91.6%;
  height: 89.024%;
  left: 4.204%;
  top: 5.484%;
}
.top-shop .top-shop__img--02 {
  width: 89.397%;
  height: 149.009%;
  left: 6.097%;
  top: -25.495%;
}
.top-shop .top-shop__img--03 {
  width: 97.201%;
  height: 161.996%;
  left: 1.4%;
  top: -33.501%;
}
.top-shop .top-shop__img--04 {
  width: 75.597%;
  height: 115.674%;
  left: 12.201%;
  top: -6.836%;
}
.top-shop .top-shop__img--05 {
  width: 70.801%;
  height: 117.994%;
  left: 14.599%;
  top: -12.496%;
}
.top-shop .top-shop__img--06 {
  width: 68.601%;
  height: 114.338%;
  left: 15.202%;
  top: -6.003%;
}
.top-shop .top-shop__img--07 {
  width: 80.998%;
  height: 135.007%;
  left: 9.501%;
  top: -15%;
}
.top-shop .top-shop__img--08 {
  width: 68.399%;
  height: 114%;
  left: 15.8%;
  top: -4.001%;
}
.top-shop .top-shop__img--09 {
  width: 72.4%;
  height: 120.671%;
  left: 15.4%;
  top: -12.333%;
}
.top-shop .top-shop__img--10 {
  width: 81.202%;
  height: 135.336%;
  left: 9.403%;
  top: -19.164%;
}
.top-shop .top-shop__img--11 {
  width: 93.197%;
  height: 155.376%;
  left: 3.402%;
  top: -30.283%;
}
.top-shop .top-shop__cat {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 15px;
  border-radius: 999px;
  background: #F7F6F6;
  font-weight: 350;
  font-size: 14px;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .top-shop .top-shop__cat {
    height: 19.8px;
    padding: 0 13.5px;
    font-size: 12.6px;
  }
}
.top-shop .top-shop__name {
  display: block;
  margin-top: 10.5px;
  font-weight: 500;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0.03em;
  font-feature-settings: "palt"; /* Figma : カナを詰めた字幅 */
  text-align: center;
}
@media screen and (max-width: 768px) {
  .top-shop .top-shop__name {
    margin-top: 9.45px;
    font-size: 18px;
    line-height: 18px;
  }
}
.top-shop .top-shop__txt {
  display: block;
  align-self: stretch;
  margin-top: 18.9px;
  font-weight: 350;
  font-size: 15px;
  line-height: 28px;
  letter-spacing: 0.05em;
  text-spacing-trim: space-all; /* 行末の括弧を詰めない（Figmaと同じ改行位置） */
  color: #666666;
}
@media screen and (max-width: 768px) {
  .top-shop .top-shop__txt {
    margin-top: 17px;
    font-size: 14px;
    line-height: 25.2px;
  }
}
.top-shop .top-shop__nav {
  position: absolute;
  right: calc(max(20px, 50% - 640px) + 5px);
  top: -100px;
  display: flex;
  gap: 20px;
}
.top-shop .top-shop__nav[hidden] {
  display: none;
}
@media screen and (max-width: 768px) {
  .top-shop .top-shop__nav {
    display: none;
  }
}
.top-shop .top-shop__arrow {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #CFAD75;
  cursor: pointer;
  transition: opacity 0.25s ease;
}
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .top-shop .top-shop__arrow:hover {
    opacity: 0.8;
  }
}
@media (min-width: 769px) and (-ms-high-contrast: none), (min-width: 769px) and (-ms-high-contrast: active) {
  .top-shop .top-shop__arrow:hover {
    opacity: 0.8;
  }
}
.top-shop .top-shop__arrow:focus-visible {
  outline: 2px solid #1D1D1F;
  outline-offset: 3px;
}
.top-shop .top-shop__arrow:disabled {
  opacity: 0.4;
  cursor: default;
}
.top-shop .top-shop__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 8.94px;
  height: 8.94px;
  margin-top: -4.47px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}
.top-shop .top-shop__arrow--prev::before {
  left: 22.1px;
  transform: rotate(-135deg);
}
.top-shop .top-shop__arrow--next::before {
  left: 18.96px;
  transform: rotate(45deg);
}

/*=======================================
　top_shoplist
=======================================*/
/* Figma PC : padding 100 0 ／ 見出し235 ─ 95 ─ 文字229 ─ 95 ─ 検索ボタン626 × 90（上下中央）
   PCの狭い幅（〜1180px）は 見出し＋文字 の下にボタン
   Figma SP : padding 60 0 ／ 日本語見出し → 文字 → ボタン */
.top-shoplist {
  padding: 100px 0;
}
@media screen and (max-width: 768px) {
  .top-shoplist {
    padding: 60px 0;
  }
}
.top-shoplist .top-shoplist__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px 60px;
}
@media screen and (min-width: 1181px) {
  .top-shoplist .top-shoplist__body {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 40px;
  }
}
@media screen and (max-width: 768px) {
  .top-shoplist .top-shoplist__body {
    display: block;
  }
}
.top-shoplist .top-ttl-en {
  flex: 0 0 auto;
}
@media screen and (min-width: 1181px) {
  .top-shoplist .top-ttl-en {
    flex-basis: 235px; /* Figma の見出し枠の幅 */
  }
}
@media screen and (max-width: 768px) {
  .top-shoplist .top-ttl-en .top-ttl-en__main {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .top-shoplist .top-ttl-en .top-ttl-en__sub {
    margin-top: -1.95px;
  }
}
.top-shoplist .top-shoplist__txt {
  flex: 0 1 auto;
  min-width: 0;
  font-weight: 500;
  font-size: 20px;
  line-height: 33px;
  letter-spacing: 0.04em;
  color: #1D1D1F;
}
@media screen and (max-width: 768px) {
  .top-shoplist .top-shoplist__txt {
    margin-top: 40.6px;
  }
}
.top-shoplist .top-shoplist__action {
  flex: 1 1 100%;
}
@media screen and (min-width: 1181px) {
  .top-shoplist .top-shoplist__action {
    flex: 0 1 626px;
    min-width: 0;
  }
}
@media screen and (max-width: 768px) {
  .top-shoplist .top-shoplist__action {
    margin-top: 41px;
  }
}
.top-shoplist .top-shoplist__btn {
  position: relative;
  display: flex;
  max-width: 626px;
  align-items: center;
  justify-content: center;
  gap: 17px;
  height: 90px;
  padding: 0 60px;
  border-radius: 999px;
  background: #F6F6F8;
  color: #1D1D1F;
}
@media screen and (max-width: 768px) {
  .top-shoplist .top-shoplist__btn {
    gap: 15.36px;
    height: 60px;
    padding: 0 50px;
  }
}
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .top-shoplist .top-shoplist__btn:hover {
    opacity: 0.7;
  }
}
@media (min-width: 769px) and (-ms-high-contrast: none), (min-width: 769px) and (-ms-high-contrast: active) {
  .top-shoplist .top-shoplist__btn:hover {
    opacity: 0.7;
  }
}
.top-shoplist .top-shoplist__btn::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9.2px;
  height: 9.2px;
  margin-top: -4.6px;
  border-top: 1px solid #1D1D1F;
  border-right: 1px solid #1D1D1F;
  transform: rotate(45deg);
  right: 40.1px;
}
@media screen and (max-width: 768px) {
  .top-shoplist .top-shoplist__btn::after {
    right: 32.1px;
    width: 7.4px;
    height: 7.4px;
    margin-top: -3.7px;
  }
}
.top-shoplist .top-shoplist__btn-icon {
  display: block;
  flex-shrink: 0;
  width: auto;
  height: 47.89px;
}
@media screen and (max-width: 768px) {
  .top-shoplist .top-shoplist__btn-icon {
    height: 43.28px;
  }
}
.top-shoplist .top-shoplist__btn-txt {
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .top-shoplist .top-shoplist__btn-txt {
    font-size: 18.07px;
  }
}

.top-craft .top-craft__btn-txt {
  font-family: "Inter", "Noto Sans JP", sans-serif;
}

/* referenceでInter指定の日本語小見出し */
.top-magazine .top-ttl-en__sub,
.top-products .top-ttl-en__sub,
.top-shoplist .top-ttl-en__sub {
  font-family: "Inter", "Noto Sans JP", sans-serif;
}

/* 2026-09-28 CB：TOPのニュース画像を一覧と同じ内容にそろえる */
.top-news .top-news__img--current { width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; object-position: center; }
.top-news .top-news__img--focus-bottom { object-position: center 93%; }