@charset "UTF-8";
/* =========================================================
   Jelim リニューアル用スタイル（BASE連携版／2026.10）
   1. 全体の左右の余白
   2. フッター
   3. スマホのメニュー
   4. キービジュアル（流れ続けるスライド）
   5. 商品一覧のお気に入り（FAVORITE）
   6. FAQ
   7. コラム一覧ページ
   元に戻す時は、各HTMLから renewal.css / favorite.js の読み込みを外してください
========================================================= */

/* ===== 1. 全体の左右の余白 ===== */
:root {
  --content-max: 1040px;                   /* 本文の最大幅 */
  --content-pad: clamp(24px, 5vw, 72px);   /* 左右の余白（画面幅に合わせて24〜72px） */
}

/* 本文を囲む箱 */
.container:where(:not(.site-header .container, .site-footer .container)),
.section-inner,
.card-links__inner,
.lookbook-wrapper,
.shop-page {
  max-width: calc(var(--content-max) + var(--content-pad) * 2);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--content-pad);
  padding-right: var(--content-pad);
  box-sizing: border-box;
}
.shop-grid {
  max-width: var(--content-max);
}
.shop-page--narrow {
  max-width: calc(760px + var(--content-pad) * 2);
}

/* 箱の中にさらに箱がある場合は、余白が二重にならないように */
.section-inner .container,
.section-inner .section-inner,
.container .container,
.container .section-inner,
.section-inner .shop-grid {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* コラム記事ページ：スマホで余白が狭くなる指定を共通の余白にそろえる */
.columndetail-section .container {
  padding-left: var(--content-pad);
  padding-right: var(--content-pad);
}





/* ===== 2. フッター ===== */
/* フッター下のあしらい：縦幅を狭く（模様は縮小して横に繰り返す）
   footer-tile.webp は「青→黄→緑」の並びがつながる幅で切り出した画像 */
.footer-pattern {
  height: clamp(36px, 4.4vw, 64px);
  background: url("../images/footer-tile.webp") repeat-x left center / auto 100%;
}
.footer-pattern img { display: none; }

/* =========================================================
   フッター（シンプル版・全ページ共通／2026.10）
   リンク3列 → SNSアイコン → お支払い方法 → コピーライト → 模様
========================================================= */
.ft { font-family: var(--font-ja-body); }
.ft__inner {
  max-width: calc(var(--content-max) + var(--content-pad) * 2);
  margin: 0 auto;
  padding: 64px var(--content-pad) 36px;
  box-sizing: border-box;
}
.ft__cols {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: space-between;
  gap: 40px 64px;
}
.ft__head {
  margin: 0 0 18px;
  font-family: var(--font-ja-head);
  font-size: .9rem;
  font-weight: normal;
  letter-spacing: .06em;
}
.ft__col ul { list-style: none; margin: 0; padding: 0; }
.ft__col li + li { margin-top: 10px; }
.ft__col a {
  font-size: .82rem;
  letter-spacing: .04em;
  opacity: .85;
}
.ft__col a:hover,
.ft__col a:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

.ft__sns {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 14px;
}
.ft__sns-link {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #542424;
  display: grid;
  place-items: center;
  transition: opacity .2s ease;
}
.ft__sns-link:hover,
.ft__sns-link:focus-visible { opacity: .8; }
.ft__sns-link img { width: 20px; height: 20px; display: block; }
.ft__sns-link img.ft__sns-note { width: 28px; height: auto; }

.ft__pay {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.ft__pay li {
  padding: 4px 10px;
  border: 1px solid rgba(84, 36, 36, .3);
  border-radius: 4px;
  background: #fff;
  font-size: .7rem;
  letter-spacing: .04em;
  line-height: 1.5;
}
.ft__copy {
  margin: 28px 0 0;
  text-align: center;
  font-size: .75rem;
  letter-spacing: .08em;
}

@media (max-width: 768px) {
  .ft__inner { padding-top: 48px; }
  .ft__cols { grid-template-columns: 1fr; gap: 32px; }
  .ft__sns { margin-top: 44px; }
}


/* ===== 3. スマホのメニュー ===== */
.site-header .main-nav .nav-sns { display: none; }   /* PCのヘッダーには出さない */
@media (max-width: 768px) {
  .site-header .main-nav {
    background: #fff;
    overflow-y: auto;
    cursor: var(--paw-hover, pointer);          /* 余白を押すと閉じる */
  }
  .site-header .main-nav a { cursor: var(--paw-hover, pointer); }
  .site-header .main-nav .nav-sns {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 14px;
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
  }
  .site-header .main-nav .nav-sns li { margin: 0; }
  .site-header .main-nav .nav-sns a { padding: 0; }
  .site-header .main-nav .nav-sns a::after { display: none; }   /* メニュー項目用の矢印を出さない */
  body.is-menu-open { overflow: hidden; }
  /* 画面の低いスマホでも、メニューの上が切れずにスクロールできるように */
  .site-header .main-nav { justify-content: flex-start; padding-bottom: 32px; }
  .site-header .main-nav > ul:first-child { margin-top: auto; }
  .site-header .main-nav .nav-sns { margin-bottom: auto; }   /* メニューを開いている間は後ろをスクロールさせない */
}


/* ===== 4. キービジュアル ===== */
/* ---------- キービジュアル：元の縦幅（写真3枚分の幅で縦長写真をそのまま表示）のまま、ゆっくり流れ続ける ---------- */
.slider-wrapper { height: auto; }
.slides { height: auto; align-items: flex-start; }
.slides.is-marquee {
  width: max-content;
  transition: none;
  animation: kv-marquee var(--kv-duration, 54s) linear infinite;
}
.slider-wrapper:hover .slides.is-marquee {
  animation-play-state: paused; /* マウスを乗せている間は止まる */
}
.slides .slide {
  flex: 0 0 auto;
  width: calc(100vw / 3);
  height: auto;
  aspect-ratio: 2 / 3;          /* 写真の比率（縦長 2:3） */
}
.slides .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes kv-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (max-width: 768px) {
  .slides .slide { width: 100vw; }  /* スマホは元どおり1枚ずつ画面幅いっぱい */
}



/* ===== 5. 商品一覧のお気に入り（FAVORITE） ===== */
.shop-filter {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: -16px 0 32px;
}
.shop-filter__btn {
  min-height: 34px;
  padding: 0 16px;
  border: 1px solid #542424;
  border-radius: 999px;
  background: #fff;
  color: #542424;
  font-family: var(--font-en-head);
  font-size: .72rem;
  letter-spacing: .12em;
  cursor: var(--paw-hover, pointer);
  transition: background .2s ease, color .2s ease;
}
.shop-filter__btn.is-active,
.shop-filter__btn:hover {
  background: #542424;
  color: #fff;
}
.shop-fav-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 0;
  font-size: .95rem;
  color: #542424;
}

.shop-item { position: relative; }
.shop-item .thumb { margin: 0; }
.shop-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
}
.shop-action {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: #542424;
  box-shadow: 0 1px 6px rgba(84, 36, 36, .18);
  cursor: var(--paw-hover, pointer);
  transition: background .2s ease, color .2s ease;
}
.shop-action:hover,
.shop-action:focus-visible { background: #542424; color: #fff; }
.shop-action--fav.is-active svg { fill: currentColor; }
.shop-item.is-hidden { display: none; }
@media (max-width: 768px) { .shop-actions { top: 10px; right: 10px; } }


/* ===== 6. FAQ ===== */


/* ---------- カテゴリメニュー ---------- */
.faq-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 48px;
}
.faq-filter .filter-btn {
  min-height: 40px;
  padding: 0 20px;
  border: 1px solid #542424;
  border-radius: 999px;
  background: #fff;
  color: #542424;
  font-size: .82rem;
  letter-spacing: .04em;
  cursor: var(--paw-hover, pointer);
  transition: background .2s ease, color .2s ease;
}
.faq-filter .filter-btn::after { display: none; }   /* 旧：矢印アイコン */
.faq-filter .filter-btn:hover { background: #F5F2EF; color: #542424; }
.faq-filter .filter-btn.active,
.faq-filter .filter-btn.active:hover { background: #542424; color: #fff; }

/* ---------- 質問と回答 ---------- */
#faq .faq {
  max-width: 880px;
  margin: 0 auto;
  background: transparent;
  border-top: 1px solid #E2DAD8;
}
/* 表示中の最後の質問の下にも線 */
#faq .faq-list-end { border-top: 1px solid #E2DAD8; max-width: 880px; margin: 0 auto; }

#faq .faq-head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 40px;
  align-items: center;
  padding: 28px 8px;
  background: transparent;
  cursor: var(--paw-hover, pointer);
}
#faq .faq-head::after { display: none; }   /* 旧：矢印アイコン */
#faq .faq-head:focus-visible { outline: 2px solid #542424; outline-offset: 2px; }

.faq-q {
  font-family: var(--font-en-head);
  font-size: 1.25rem;
  color: #542424;
  opacity: .55;
  text-align: center;
}
#faq .faq-question {
  margin: 0;
  padding: 0;
  font-size: .95rem;
  line-height: 1.7;
  color: #542424;
}

/* ＋ アイコン（開くと × に回転） */
.faq-icon {
  position: relative;
  justify-self: center;
  width: 18px;
  height: 18px;
  transition: transform .3s ease;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 1px;
  background: #542424;
  transform: translate(-50%, -50%);
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
#faq .faq.open .faq-icon { transform: rotate(45deg); }

#faq .faq-body {
  padding: 0 48px 32px calc(64px + 8px);   /* 質問の文字の位置にそろえる */
  background: transparent;
}
#faq .faq-body .medium {
  font-size: .9rem;
  line-height: 1.95;
  color: #542424;
}

@media (max-width: 768px) {
  /* カテゴリは横にスクロール */
  .faq-filter {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    margin: 0 0 32px;
    padding: 0 0 4px;
    scrollbar-width: none;
    flex-direction: row;
    align-items: center;
  }
  .faq-filter::-webkit-scrollbar { display: none; }
  .faq-filter .filter-btn {
    flex: 0 0 auto;
    width: auto;
    min-height: 38px;
    padding: 0 16px;
    font-size: .78rem;
    text-align: center;
  }
  #faq .faq, #faq .faq-list-end { margin: 0; max-width: none; }  /* 左右の余白は本文の箱に任せる */
  #faq .faq-head { grid-template-columns: 36px minmax(0, 1fr) 28px; padding: 22px 0; }
  .faq-q { font-size: 1.05rem; text-align: left; }
  #faq .faq-question { font-size: .88rem; }
  #faq .faq-body { padding: 0 8px 24px 36px; }
  #faq .faq-body .medium { font-size: .85rem; }
}


/* ===== 7. コラム一覧ページ ===== */


/* ---------- 左右の余白を広げ、コンテンツをひと回り小さく ---------- */
.column-featured {
  max-width: var(--content-max, 1040px);
  margin: 0 auto;
  padding: 56px 64px;
}
.featured-wrap { gap: 48px; }
.featured-img { flex: 0 0 52%; }
.featured-img img { width: 100%; }
.column-featured .featured-title {
  font-size: 1.6rem;
  margin-bottom: 12px;
}
.column-featured .featured-excerpt { font-size: .9rem; }
.column-featured .button-outline { margin-top: 24px; font-size: .9rem; }

.column-grid .grid-wrap { gap: 32px; }
.column-grid .card-title { font-size: 1.05rem; }
.column-grid .card-excerpt { font-size: .78rem; }
.column-grid .column-card .card-body { padding: 24px; }

/* ---------- 特集記事のラベル・日付 ---------- */
.featured-heading { display: none !important; } /* 旧：スマホだけのラベル */
.featured-content { gap: 0; }

.featured-label {
  align-self: flex-start;
  margin: 0 0 16px;
  padding: 4px 14px;
  border: 1px solid #542424;
  border-radius: 999px;
  font-size: .75rem;
  letter-spacing: .12em;
  color: #542424;
}

.featured-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 24px;
  font-size: .82rem;
  color: #542424;
}
.featured-meta time {
  font-family: var(--font-en-head);
  letter-spacing: .08em;
}
.featured-meta__sep {
  width: 1px;
  height: 12px;
  background: currentColor;
  opacity: .5;
}

/* 一覧カードの日付 */
.column-card .card-date {
  display: block;
  margin: 0 0 6px;
  font-family: var(--font-en-head);
  font-size: .78rem;
  letter-spacing: .08em;
  color: #542424;
  opacity: .75;
}

@media (max-width: 768px) {
  .column-featured { margin: 0 24px; padding: 36px 28px; }
  .featured-wrap { gap: 24px; }
  .featured-img { flex: none; }
  .column-featured .featured-title { font-size: 1.3rem; }
  .featured-meta { margin-bottom: 18px; font-size: .78rem; }
}

/* ---------- 記事一覧（参考：カードを背景色の上に並べ、中央揃えで見せる） ---------- */
.column-list-section {
  margin-top: 96px;
  padding: 88px 0 96px;
  background: #EAF1F8;
  color: #542424;
}
.cl-head {
  text-align: center;
  margin-bottom: 56px;
}
.cl-head__title {
  margin: 0;
  font-family: var(--font-ja-head);
  font-size: 1.6rem;
  letter-spacing: .08em;
}
.cl-head__lead {
  margin: 14px 0 0;
  font-size: .85rem;
}

.cl-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 56px 32px;
}
.cl-card {
  flex: 0 1 calc((100% - 96px) / 4);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cl-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin-bottom: 20px;
}
.cl-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.cl-card__img:hover img { transform: scale(1.04); }
.cl-card__date {
  font-family: var(--font-en-head);
  font-size: .75rem;
  letter-spacing: .1em;
  opacity: .7;
}
.cl-card__title {
  margin: 8px 0 0;
  font-family: var(--font-ja-head);
  font-size: 1.02rem;
  font-weight: bold;
  line-height: 1.5;
}
.cl-card__no {
  display: block;
  font-family: var(--font-en-head);
  font-size: .85rem;
  font-weight: normal;
  letter-spacing: .1em;
  margin-bottom: 2px;
}
.cl-card__who {
  margin: 10px 0 0;
  word-break: keep-all;      /* 肩書きと名前の間で改行させる */
  overflow-wrap: anywhere;
  font-size: .8rem;
  font-weight: bold;
}
.cl-card__text {
  margin: 8px 0 20px;
  font-size: .8rem;
  line-height: 1.9;
}
.cl-card__btn {
  margin-top: auto;          /* ボタンの高さをカード間でそろえる */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 26px;
  border-radius: 999px;
  background: #542424;
  color: #fff;
  font-size: .78rem;
  letter-spacing: .08em;
  text-decoration: none;
  transition: opacity .2s ease;
}
.cl-card__btn:hover,
.cl-card__btn:focus-visible { opacity: .8; }

.cl-note {
  margin: 72px 0 0;
  text-align: center;
}
.cl-note__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 32px;
  border: 1px solid #542424;
  border-radius: 999px;
  color: #542424;
  font-size: .85rem;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.cl-note__link:hover,
.cl-note__link:focus-visible { background: #542424; color: #fff; }

@media (max-width: 1100px) {
  .cl-card { flex-basis: calc((100% - 32px) / 2); max-width: 400px; }
}
@media (max-width: 600px) {
  .column-list-section { margin-top: 64px; padding: 64px 0 72px; }
  .cl-head { margin-bottom: 40px; }
  .cl-head__title { font-size: 1.35rem; }
  .cl-grid { gap: 48px; }
  .cl-card { flex-basis: 100%; }
}


/* ---------- 記事一覧 調整（2026.10）---------- */
/* 背景色なし */
.column-list-section { background: transparent; }
/* 番号・タイトルを写真の上に */
.cl-card__title { margin: 0 0 16px; }
/* サムネイルは切らずに全体を表示（note用の横長画像 1.91:1） */
.cl-card__img { aspect-ratio: 1.91 / 1; margin-bottom: 16px; }
.cl-card__who { margin-top: 0; }
/* note のボタンは四角に、左に小さく note のロゴ */
.cl-note__link {
  gap: 12px;
  border-radius: 0;
  padding: 0 28px;
}
.cl-note__icon { width: auto; height: 10px; display: block; }
.cl-note__link:hover .cl-note__icon,
.cl-note__link:focus-visible .cl-note__icon { filter: invert(1); }

/* ===== 8. ヘッダー上の送料無料のお知らせ ===== */
/* ヘッダー上の送料無料のお知らせ帯（全ページ） */
:root { --notice-h: 30px; }
.shipping-notice {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--notice-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  background: #542424;
  color: #fff;
  font-size: .75rem;
  letter-spacing: .08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-header { top: var(--notice-h) !important; }
body { padding-top: var(--notice-h); }
@media (max-width: 768px) {
  :root { --notice-h: 28px; }
  .shipping-notice { font-size: .7rem; letter-spacing: .04em; }
}

/* ===== 9. TOPのコラム ===== */
/* =========================================================
   TOPのコラム：左に見出し、右に記事3本（2026.10）
========================================================= */
.home-col-section { padding: 96px 0; }
.home-col {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.home-col__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 36px;
  color: #542424;
}
.home-col__icon { width: 34px; height: auto; margin-bottom: 14px; }
.home-col__en {
  margin: 0;
  font-family: var(--font-en-head);
  font-size: 1.7rem;
  font-weight: normal;
  letter-spacing: .14em;
}
.home-col__rule {
  width: 28px;
  height: 1px;
  margin: 14px 0 12px;
  background: currentColor;
}
.home-col__ja {
  margin: 0;
  font-size: .8rem;
  letter-spacing: .25em;
}
.home-col__more {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 24px;
  border: 1px solid #542424;
  border-radius: 999px;
  color: #542424;
  font-family: var(--font-en-head);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.home-col__more:hover,
.home-col__more:focus-visible { background: #542424; color: #fff; }

.home-col__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.home-col__card {
  display: block;
  color: #542424;
  text-decoration: none;
}
.home-col__img {
  margin: 0;
  aspect-ratio: 1.91 / 1;   /* コラムのサムネイル（note用の横長画像）を切らずに表示 */
  overflow: hidden;
  background: #f5f2ef;
}
.home-col__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.home-col__card:hover .home-col__img img,
.home-col__card:focus-visible .home-col__img img { transform: scale(1.04); }
.home-col__meta {
  margin: 14px 0 4px;
  word-break: keep-all;      /* 肩書きと名前の間で改行 */
  overflow-wrap: anywhere;
  font-size: .72rem;
  letter-spacing: .05em;
  opacity: .7;
}
.home-col__title {
  margin: 0;
  word-break: auto-phrase;   /* 対応ブラウザでは文節の切れ目で改行 */
  text-wrap: pretty;         /* 最後の行に1文字だけ残るのを防ぐ */
  font-family: var(--font-ja-body);
  font-size: .95rem;
  font-weight: normal;
  line-height: 1.7;
  letter-spacing: .04em;
}
.home-col__card:hover .home-col__title,
.home-col__card:focus-visible .home-col__title {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* タブレット・スマホ：見出しを上に、記事は横にスワイプ */
@media (max-width: 900px) {
  .home-col-section { padding: 64px 0; }
  /* 見出し → 記事 → View more の順に縦に並べる */
  .home-col { display: flex; flex-direction: column; align-items: center; gap: 0; }
  .home-col__head { display: contents; }
  .home-col__more { order: 6; margin-top: 32px; }
  .home-col__list {
    order: 5;
    align-self: stretch;
    margin-top: 32px;
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-right: calc(var(--content-pad, 24px) * -1);
    padding-right: var(--content-pad, 24px);
    scrollbar-width: none;
  }
  .home-col__list::-webkit-scrollbar { display: none; }
  .home-col__list > li {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
}

/* About us / Lookbooks / Shopping Guide の背景色をなくす（2026.10） */
.card-links { background: transparent; }
@media (max-width: 768px) { .card-links { background: transparent; } }

/* キービジュアル下のブランドメッセージ（2026.10）
   画像は背景を白にしたもの（herocopy-white.png）を使い、周りも白に */
.hero-caption { background: #fff; }
@media (min-width: 769px) {
  .hero-caption { padding: 24px 0; }
  .hero-caption .hc-text-img {
    width: min(78vw, 1120px);
    margin: 0 auto;
    display: block;
  }
}
@media (max-width: 768px) {
  .hero-caption { padding: 8px 0; }
  .hero-caption .hc-text-img {
    width: 92%;
    margin: 0 auto;
    display: block;
  }
}

/* ===== 10. About：Instagram欄 ===== */
/* About：Instagram欄の写真を2枚横並びに（2026.10） */
.instagram-hero--pair {
  max-width: 1040px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.instagram-hero--pair .instagram-hero__img {
  aspect-ratio: 2 / 3;
  height: auto;
}
@media (max-width: 768px) {
  .instagram-hero--pair { gap: 10px; }
}

/* About：公式インスタグラムのボタン（左にアイコン、背景は水色、hoverは従来どおり） */
.instagram-cta .button-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #CEDFF1;
}
.instagram-cta__icon { width: 18px; height: 18px; display: block; }
/* hoverは白背景に茶色の文字 */
.instagram-cta .button-outline:hover,
.instagram-cta .button-outline:focus-visible {
  background-color: #fff;
  color: #542424;
}


/* ==========================================================
   カーソル（犬の足跡）
   マウス操作の端末だけ。リンク・ボタンの上では白の足跡に
   （各CSSの cursor: pointer は var(--paw-hover, pointer) に置き換え済み）
   ========================================================== */
@media (hover: hover) and (pointer: fine) {
  :root {
    --paw: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20fill%3D%22%23542424%22%20stroke%3D%22%23542424%22%20stroke-width%3D%221.6%22%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%2221.5%22%20rx%3D%227%22%20ry%3D%226%22/%3E%3Cellipse%20cx%3D%226.8%22%20cy%3D%2213.6%22%20rx%3D%222.6%22%20ry%3D%223.2%22%20transform%3D%22rotate%28-25%206.8%2013.6%29%22/%3E%3Cellipse%20cx%3D%2212.2%22%20cy%3D%228%22%20rx%3D%222.7%22%20ry%3D%223.4%22%20transform%3D%22rotate%28-8%2012.2%208%29%22/%3E%3Cellipse%20cx%3D%2219.8%22%20cy%3D%228%22%20rx%3D%222.7%22%20ry%3D%223.4%22%20transform%3D%22rotate%288%2019.8%208%29%22/%3E%3Cellipse%20cx%3D%2225.2%22%20cy%3D%2213.6%22%20rx%3D%222.6%22%20ry%3D%223.2%22%20transform%3D%22rotate%2825%2025.2%2013.6%29%22/%3E%3C/g%3E%3C/svg%3E") 16 16, auto;
    --paw-blue: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20fill%3D%22%23542424%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.6%22%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%2221.5%22%20rx%3D%227%22%20ry%3D%226%22/%3E%3Cellipse%20cx%3D%226.8%22%20cy%3D%2213.6%22%20rx%3D%222.6%22%20ry%3D%223.2%22%20transform%3D%22rotate%28-25%206.8%2013.6%29%22/%3E%3Cellipse%20cx%3D%2212.2%22%20cy%3D%228%22%20rx%3D%222.7%22%20ry%3D%223.4%22%20transform%3D%22rotate%28-8%2012.2%208%29%22/%3E%3Cellipse%20cx%3D%2219.8%22%20cy%3D%228%22%20rx%3D%222.7%22%20ry%3D%223.4%22%20transform%3D%22rotate%288%2019.8%208%29%22/%3E%3Cellipse%20cx%3D%2225.2%22%20cy%3D%2213.6%22%20rx%3D%222.6%22%20ry%3D%223.2%22%20transform%3D%22rotate%2825%2025.2%2013.6%29%22/%3E%3C/g%3E%3C/svg%3E") 16 16, pointer;
    --paw-hover: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20fill%3D%22%23542424%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.6%22%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%2221.5%22%20rx%3D%227%22%20ry%3D%226%22/%3E%3Cellipse%20cx%3D%226.8%22%20cy%3D%2213.6%22%20rx%3D%222.6%22%20ry%3D%223.2%22%20transform%3D%22rotate%28-25%206.8%2013.6%29%22/%3E%3Cellipse%20cx%3D%2212.2%22%20cy%3D%228%22%20rx%3D%222.7%22%20ry%3D%223.4%22%20transform%3D%22rotate%28-8%2012.2%208%29%22/%3E%3Cellipse%20cx%3D%2219.8%22%20cy%3D%228%22%20rx%3D%222.7%22%20ry%3D%223.4%22%20transform%3D%22rotate%288%2019.8%208%29%22/%3E%3Cellipse%20cx%3D%2225.2%22%20cy%3D%2213.6%22%20rx%3D%222.6%22%20ry%3D%223.2%22%20transform%3D%22rotate%2825%2025.2%2013.6%29%22/%3E%3C/g%3E%3C/svg%3E") 16 16, pointer;
    --paw-white: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.6%22%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%2221.5%22%20rx%3D%227%22%20ry%3D%226%22/%3E%3Cellipse%20cx%3D%226.8%22%20cy%3D%2213.6%22%20rx%3D%222.6%22%20ry%3D%223.2%22%20transform%3D%22rotate%28-25%206.8%2013.6%29%22/%3E%3Cellipse%20cx%3D%2212.2%22%20cy%3D%228%22%20rx%3D%222.7%22%20ry%3D%223.4%22%20transform%3D%22rotate%28-8%2012.2%208%29%22/%3E%3Cellipse%20cx%3D%2219.8%22%20cy%3D%228%22%20rx%3D%222.7%22%20ry%3D%223.4%22%20transform%3D%22rotate%288%2019.8%208%29%22/%3E%3Cellipse%20cx%3D%2225.2%22%20cy%3D%2213.6%22%20rx%3D%222.6%22%20ry%3D%223.2%22%20transform%3D%22rotate%2825%2025.2%2013.6%29%22/%3E%3C/g%3E%3C/svg%3E") 16 16, pointer;
    --paw-white-auto: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cg%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.6%22%3E%3Cellipse%20cx%3D%2216%22%20cy%3D%2221.5%22%20rx%3D%227%22%20ry%3D%226%22/%3E%3Cellipse%20cx%3D%226.8%22%20cy%3D%2213.6%22%20rx%3D%222.6%22%20ry%3D%223.2%22%20transform%3D%22rotate%28-25%206.8%2013.6%29%22/%3E%3Cellipse%20cx%3D%2212.2%22%20cy%3D%228%22%20rx%3D%222.7%22%20ry%3D%223.4%22%20transform%3D%22rotate%28-8%2012.2%208%29%22/%3E%3Cellipse%20cx%3D%2219.8%22%20cy%3D%228%22%20rx%3D%222.7%22%20ry%3D%223.4%22%20transform%3D%22rotate%288%2019.8%208%29%22/%3E%3Cellipse%20cx%3D%2225.2%22%20cy%3D%2213.6%22%20rx%3D%222.6%22%20ry%3D%223.2%22%20transform%3D%22rotate%2825%2025.2%2013.6%29%22/%3E%3C/g%3E%3C/svg%3E") 16 16, auto;
  }
  html, body { cursor: var(--paw); }
  a, button, [role="button"], label, select, summary { cursor: var(--paw-hover); }
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
  /* 水色のボタンの上は、茶色の足跡＋白い枠線 */
  .instagram-cta .button-outline { cursor: var(--paw-blue); }
  /* 茶色の背景の上は、白の足跡＋白い枠線 */
  .ft__sns-link, .faq-filter .filter-btn.active, .cl-card__btn, .cl-note__link:hover,
  .shop-btn:not(.shop-btn--outline):not(:disabled), .shop-btn--outline:hover,
  .btn-more:hover, .home-col__more:hover, .shop-filter__btn.is-active, .shop-filter__btn:hover,
  .shop-action:hover, .contact-cta .button-outline:hover { cursor: var(--paw-white) !important; }
  .shipping-notice, .shop-toast, .featured-heading { cursor: var(--paw-white-auto) !important; }
  textarea { cursor: text; }
}


/* ===== サイズガイドへのリンク（TOP のショップ見出し右端） ===== */
.shop-section .title-en {
  position: relative;
  width: 100%;
}
.size-guide-link {
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  color: #542424;
  font-family: var(--font-en-head);
  font-size: .8rem;
  letter-spacing: .12em;
  text-decoration: none;
  transition: opacity .2s ease;
}
.size-guide-link::after { content: "→"; }
.size-guide-link:hover { opacity: .6; }

/* ===== サイズガイドのタブ（for meal / for walk） ===== */
.size-guide { scroll-margin-top: 180px; }  /* 固定ヘッダーに隠れないように */
.size-guide__note {
  margin: -16px 0 24px;   /* 見出しとの間を少し詰める */
  text-align: center;
  color: #542424;
  font-size: .9rem;
  line-height: 1.8;
}
.size-tabs { margin: 0 0 8px; }
.size-guide .image-wrap img { width: 100%; max-width: 820px; }

@media (max-width: 768px) {
  /* スマホでは見出しの下・画面中央に配置 */
  .size-guide__note { margin: -8px 0 20px; font-size: .85rem; }
  .size-guide-link {
    position: static;
    margin-top: 12px;
    font-size: .75rem;
    letter-spacing: .1em;
  }
}


/* ===== ヘッダーのメニュー：見出し（Column など）と同じ英字フォントに ===== */
.site-header .main-nav li,
.site-header .main-nav a {
  font-family: var(--font-en-head);
  letter-spacing: .1em;
}