:root {
  --slide-w: min(64vw, 1080px);
  --bg: #faf8f4;
  --tint: #f2eee7;
  --ink: #3a3835;
  --sub: #8b867e;
  --line: #ddd7cc;
  --en: "Jost", sans-serif;
  --ja: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --bar-h: 30px;
  --header-h: 102px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ja);
  font-size: 15px;
  line-height: 2;
  letter-spacing: .08em;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
img { display: block; width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, dl, dd, p, h2 { margin: 0; padding: 0; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ヘッダー(最上部にお知らせ帯) */
.header { position: fixed; inset: 0 0 auto 0; z-index: 30; transition: background-color .4s, box-shadow .4s; }
.header__bar { height: var(--bar-h); background: var(--ink); color: var(--bg); font-size: 10px; letter-spacing: .14em; line-height: var(--bar-h); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 12px; }
.header__bar a { display: block; }
.header__inner { height: calc(var(--header-h) - var(--bar-h)); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
.header.is-solid, body.is-locked .header, .is-sub .header {
  background: rgba(250, 248, 244, .94);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--line);
}
.is-sub { padding-top: var(--header-h); }
.logo { display: flex; align-items: center; gap: 10px; }
.logo__mark { width: 34px; height: 38px; }
.logo__type { font-family: var(--en); font-weight: 300; font-size: 17px; line-height: 1.05; letter-spacing: .16em; }
.logo__sub {
  font-family: var(--en); font-size: 7px; line-height: 1.7; letter-spacing: .3em;
  padding-left: 10px; border-left: 1px solid currentColor;
}
.gnav { display: none; }
.insta svg { width: 24px; height: 24px; display: block; }
.menu-btn { width: 28px; height: 28px; position: relative; }
.menu-btn span {
  position: absolute; left: 2px; right: 2px; height: 1px; background: currentColor;
  transition: transform .4s, top .4s;
}
.menu-btn span:nth-child(1) { top: 10px; }
.menu-btn span:nth-child(2) { top: 18px; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { top: 14px; transform: rotate(30deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { top: 14px; transform: rotate(-30deg); }

/* ドロワー */
.drawer {
  position: fixed; inset: 0; z-index: 20;
  background: var(--bg);
  padding: calc(var(--header-h) + 32px) 32px 32px;
  opacity: 0; transition: opacity .4s;
}
.drawer[hidden] { display: none; }
.drawer.is-open { opacity: 1; }
.drawer a {
  display: flex; align-items: baseline; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
  font-size: 12px; color: var(--sub);
}
.drawer a span { font-family: var(--en); font-weight: 300; font-size: 20px; letter-spacing: .2em; color: var(--ink); min-width: 120px; }

/* ヒーロー(スマホは画面全体、PCは左右がのぞくスライダー) */
.top { display: flex; flex-direction: column; }
.hero { position: relative; order: 1; }
.themes { order: 2; }
.hero__viewport { position: relative; overflow: hidden; height: 100vh; height: 100svh; background: var(--tint); }
.hero__track { display: flex; height: 100%; will-change: transform; transition: transform 1s cubic-bezier(.3, .1, .2, 1); }
.hero__track.is-jump { transition: none; }
.hero__slide { flex: 0 0 100vw; height: 100%; overflow: hidden; }
.hero__slide { position: relative; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }
/* 写真に焼き込まず、ロゴを線のデータで重ねる(拡大してもぼやけない) */
.hero__logo { position: absolute; left: 50%; top: 24%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 14px; color: #4a4744; opacity: .9; }
.hero__logomark { width: 72px; height: 81px; }
.hero__logotype { font-family: var(--en); font-weight: 300; font-size: 33px; line-height: 1.08; letter-spacing: .16em; }
.hero__logosub { font-family: var(--en); font-size: 10px; line-height: 1.9; letter-spacing: .32em; padding-left: 14px; border-left: 1px solid currentColor; }
.hero__viewport::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(250,248,244,.55) 0, rgba(250,248,244,0) 18%, rgba(250,248,244,0) 62%, rgba(250,248,244,.75) 100%);
}
.hero__arrow { display: none; }
.hero__copy { position: absolute; left: 0; right: 0; bottom: 76px; z-index: 2; text-align: center; padding: 0 16px; pointer-events: none; }
.hero__ja { font-size: 17px; letter-spacing: .22em; }
.hero__en { font-family: var(--en); font-weight: 300; font-size: 9px; letter-spacing: .34em; margin-top: 6px; }
.hero__dots { position: absolute; left: 0; right: 0; bottom: 36px; z-index: 2; display: flex; justify-content: center; gap: 10px; }
.hero__dots button { width: 22px; height: 22px; position: relative; }
.hero__dots button::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -3px 0 0 -3px;
  border-radius: 50%; border: 1px solid var(--ink); transition: background-color .4s;
}
.hero__dots button[aria-selected="true"]::after { background: var(--ink); }

/* テーマ帯 */
.themes { padding: 28px 0 8px; }
.themes__label { text-align: center; font-size: 11px; color: var(--sub); letter-spacing: .2em; }
.themes ul { display: flex; gap: 8px; overflow-x: auto; padding: 12px 20px; scrollbar-width: none; }
.themes ul::-webkit-scrollbar { display: none; }
.themes a {
  display: block; white-space: nowrap; font-size: 12px; line-height: 1;
  padding: 11px 18px; border: 1px solid var(--line); border-radius: 99px; background: #fff;
  transition: background-color .3s, border-color .3s;
}
.themes a:hover { background: var(--tint); border-color: var(--sub); }

/* 見出し */
.ttl { text-align: center; font-weight: 400; margin-bottom: 36px; }
.ttl__en { display: block; font-family: var(--en); font-weight: 300; font-size: 22px; letter-spacing: .32em; line-height: 1.4; text-indent: .32em; }
.ttl__ja { display: block; font-size: 11px; color: var(--sub); letter-spacing: .2em; margin-top: 4px; }
.ttl--left { text-align: left; }
.ttl--left .ttl__en { text-indent: 0; }

.sec { padding: 72px 20px; }
.sec--tint { background: var(--tint); }
.more { text-align: center; margin-top: 40px; }
.more a {
  display: inline-block; font-size: 12px; letter-spacing: .16em; padding: 0 4px 6px; position: relative;
}
.more a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform-origin: right; transition: transform .5s; }
.more a:hover::after { transform: scaleX(.4); }

/* ピックアップ */
.pickup { display: grid; gap: 20px; padding: 28px 20px 0; }
.pickup__card { display: block; overflow: hidden; }
.pickup__card img { aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.2s ease; }
.pickup__card:hover img { transform: scale(1.03); }
.pickup__card p { font-size: 14px; margin-top: 10px; display: flex; align-items: baseline; gap: 14px; }
.pickup__card span { font-family: var(--en); font-size: 9px; letter-spacing: .3em; color: var(--sub); }

/* コンセプト(縦書きのコピーと、ゆっくりずれる写真) */
.concept { padding: 96px 20px 24px; overflow: hidden; }
.concept__visual { position: relative; padding: 0 0 72px 44px; }
.concept__img { overflow: hidden; will-change: transform; }
.concept__img--main img { aspect-ratio: 4 / 5; object-fit: cover; }
.concept__img--sub { position: absolute; right: -20px; bottom: 0; width: 42%; box-shadow: 0 0 0 8px var(--bg); }
.concept__img--sub img { aspect-ratio: 3 / 4; object-fit: cover; }
.concept__vertical { position: absolute; left: 0; top: 0; writing-mode: vertical-rl; font-size: 13px; letter-spacing: .5em; color: var(--sub); white-space: nowrap; }
.concept__body { padding-top: 48px; text-align: center; }
.concept__lead { font-size: 16px; line-height: 2.3; letter-spacing: .16em; margin-bottom: 28px; text-align: left; }
.concept__lead br, .concept__text br { display: none; }
.concept__body .concept__text { text-align: left; }
.concept__text { font-size: 13px; line-height: 2.5; color: #5a5752; }
.concept__text + .concept__text { margin-top: 1.4em; }

/* アイテム */
.cats { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 32px; }
.cats button { font-family: var(--en); font-weight: 300; font-size: 10px; letter-spacing: .18em; padding: 6px 2px; color: var(--sub); border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.cats button.is-on, .cats button:hover { color: var(--ink); border-color: var(--ink); }
.items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
.items li[hidden] { display: none; }
.items a { display: block; }
.items img { aspect-ratio: 1; object-fit: cover; background: #fff; transition: opacity .5s; }
.items a:hover img { opacity: .8; }
.items__cat { font-family: var(--en); font-size: 8px; letter-spacing: .3em; color: var(--sub); margin-top: 12px; line-height: 1.6; }
.items__name { font-size: 13px; line-height: 1.7; }

/* スナップ(横に流れる) */
.snaps { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 0 20px 8px; scrollbar-width: none; }
.snaps::-webkit-scrollbar { display: none; }
.snaps li { flex: 0 0 44%; scroll-snap-align: start; }
.snaps img { aspect-ratio: 3 / 4; object-fit: cover; transition: opacity .5s; }
.snaps a:hover img { opacity: .8; }
.snaps__who { font-family: var(--en); font-size: 9px; letter-spacing: .2em; color: var(--sub); margin-top: 10px; line-height: 1.6; }
.snaps__item { font-size: 12px; line-height: 1.7; }

/* 特集 */
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
.features a { display: block; }
.features img { aspect-ratio: 3 / 2; object-fit: cover; transition: opacity .5s; }
.features a:hover img { opacity: .8; }
.features__tag { font-family: var(--en); font-size: 9px; letter-spacing: .3em; color: var(--sub); margin-top: 14px; }
.features__ttl { font-size: 13px; line-height: 1.8; }

/* お知らせ */
.news { border-top: 1px solid var(--line); }
.news a { display: flex; gap: 20px; align-items: baseline; padding: 20px 4px; border-bottom: 1px solid var(--line); transition: background-color .3s; }
.news a:hover { background: var(--tint); }
.news__tag { font-family: var(--en); font-size: 9px; letter-spacing: .26em; color: var(--sub); min-width: 44px; }
.news__ttl { font-size: 13px; line-height: 1.8; }

/* 店舗 */
.shop { background: var(--tint); }
.shop__img img { aspect-ratio: 3 / 2; object-fit: cover; }
.shop__body { padding: 52px 24px 72px; }
.shop dl > div { display: flex; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.shop dt { min-width: 72px; color: var(--sub); }
.shop__btns { display: grid; gap: 12px; margin-top: 36px; }
.btn {
  display: block; text-align: center; font-size: 12px; letter-spacing: .18em; padding: 14px 20px;
  background: var(--ink); color: var(--bg); border: 1px solid var(--ink); transition: background-color .4s, color .4s;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn--line { background: transparent; color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--bg); }

/* アクセス */
.access { padding: 72px 0 88px; }
.access__map { height: 320px; background: var(--tint); }
.access__map iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(.85) sepia(.12) contrast(.95) brightness(1.03); }
.access__body { padding: 36px 24px 0; max-width: 760px; margin: 0 auto; }
.access dl > div { display: flex; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.access dt { min-width: 72px; color: var(--sub); }

/* ブランド */
.brand__main { display: block; }
.brand__main + .brand__main { margin-top: 56px; }
.brand__img { overflow: hidden; }
.brand__img img { aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.4s ease; }
.brand__main:hover .brand__img img { transform: scale(1.03); }
.brand__body { padding-top: 28px; }
.brand__label { font-family: var(--en); font-size: 9px; letter-spacing: .3em; color: var(--sub); }
.brand__name { font-family: var(--en); font-weight: 300; font-size: 22px; letter-spacing: .14em; line-height: 1.5; margin: 6px 0 16px; }
.brand__text { font-size: 13px; line-height: 2.3; color: #5a5752; }
.brand__text br { display: none; }
.brand__more { display: inline-block; font-size: 12px; letter-spacing: .16em; margin-top: 22px; padding-bottom: 6px; border-bottom: 1px solid var(--ink); }
.brand__cats { display: grid; gap: 48px; margin-top: 64px; padding-top: 56px; border-top: 1px solid var(--line); }
.brand__cats a { display: block; }
.brand__catimg { overflow: hidden; }
.brand__catimg img { aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.4s ease; }
.brand__cats a:hover .brand__catimg img { transform: scale(1.04); }
.brand__catlabel { font-family: var(--en); font-size: 9px; letter-spacing: .3em; color: var(--sub); margin-top: 20px; }
.brand__catname { font-weight: 400; font-size: 17px; letter-spacing: .14em; line-height: 1.8; margin: 2px 0 10px; }
.brand__cattext { font-size: 13px; line-height: 2.2; color: #5a5752; }
.brand__cattext br { display: none; }
.brand__catmore { display: inline-block; font-size: 11px; letter-spacing: .16em; margin-top: 16px; padding-bottom: 5px; border-bottom: 1px solid var(--ink); }

/* ギフト */
.gift { background: var(--bg); }
.gift__main img { aspect-ratio: 3 / 2; object-fit: cover; object-position: 70% 60%; }
.gift__body { padding: 52px 24px 72px; }
.gift__lead { font-size: 20px; line-height: 2; letter-spacing: .22em; margin-bottom: 22px; }
.gift__text { font-size: 13px; line-height: 2.3; color: #5a5752; }
.gift__subs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 32px; }
.gift__subs img { aspect-ratio: 1; object-fit: cover; }
.more--left { text-align: left; }

/* Instagram */
.instagram__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.instagram__grid img { aspect-ratio: 1; object-fit: cover; transition: opacity .5s; }
.instagram__grid a:hover img { opacity: .8; }
.sec > .instagram__btn { max-width: 320px; margin: 36px auto 0; }

/* 場所の紹介 */
.place { padding: 88px 24px; text-align: center; }
.place__inner { max-width: 720px; margin: 0 auto; }
.place__label { font-family: var(--en); font-size: 10px; letter-spacing: .34em; color: var(--sub); }
.place__ttl { font-weight: 400; font-size: 19px; line-height: 2; letter-spacing: .18em; margin: 16px 0 28px; }
.place__text { font-size: 13px; line-height: 2.4; color: #5a5752; text-align: left; }
.place__text br { display: none; }

/* 下層ページ共通 */
.page { min-height: 60vh; }
.crumb { padding: 18px 20px 0; font-family: var(--en); font-size: 10px; letter-spacing: .16em; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb span::before { content: "/"; margin: 0 10px; }
.crumb span { font-family: var(--ja); letter-spacing: .08em; }
.sec--page { padding-top: 48px; }
.page__lead { text-align: center; font-size: 13px; line-height: 2.3; color: #5a5752; margin: -12px 0 36px; }
.page__lead br { display: none; }
.pager { display: flex; justify-content: center; gap: 8px; margin-top: 56px; font-family: var(--en); font-size: 13px; }
.pager a, .pager span { width: 36px; height: 36px; line-height: 36px; text-align: center; border: 1px solid var(--line); }
.pager .is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* アイテム詳細 */
.detail { padding: 28px 20px 72px; }
.detail__main img { aspect-ratio: 1; object-fit: cover; background: #fff; }
.detail__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.detail__thumbs button { display: block; width: 100%; opacity: .55; transition: opacity .3s; }
.detail__thumbs button.is-on, .detail__thumbs button:hover { opacity: 1; }
.detail__thumbs img { aspect-ratio: 1; object-fit: cover; }
.detail__body { padding-top: 36px; }
.detail__cat { font-family: var(--en); font-size: 9px; letter-spacing: .3em; color: var(--sub); }
.detail__name { font-weight: 400; font-size: 22px; letter-spacing: .14em; line-height: 1.7; margin: 4px 0; }
.detail__brand { font-family: var(--en); font-weight: 300; font-size: 12px; letter-spacing: .14em; color: var(--sub); }
.detail__text { font-size: 13px; line-height: 2.4; color: #5a5752; margin: 28px 0; }
.detail__text br { display: none; }
.detail__spec > div { display: flex; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.detail__spec > div:first-child { border-top: 1px solid var(--line); }
.detail__spec dt { min-width: 88px; color: var(--sub); }
.detail__note { font-size: 11px; color: var(--sub); margin-top: 16px; }
.detail__btns { display: grid; gap: 12px; margin-top: 28px; }

/* 特集記事 */
.article { padding: 36px 0 88px; }
.article__head { text-align: center; padding: 0 24px 40px; }
.article__tag { font-family: var(--en); font-size: 10px; letter-spacing: .34em; color: var(--sub); }
.article__ttl { font-weight: 400; font-size: 24px; line-height: 1.9; letter-spacing: .18em; margin: 14px 0 22px; }
.article__lead { font-size: 13px; line-height: 2.3; color: #5a5752; }
.article__lead br { display: none; }
.article__hero img { aspect-ratio: 3 / 2; object-fit: cover; }
.article__body { max-width: 720px; margin: 0 auto; padding: 16px 24px 0; }
.article__body h2 { font-weight: 400; font-size: 17px; letter-spacing: .18em; margin: 56px 0 18px; padding-left: 16px; border-left: 1px solid var(--ink); line-height: 1.6; }
.article__body p { font-size: 14px; line-height: 2.4; color: #4d4a46; }
.article__body p + p { margin-top: 1.4em; }
.article__body figure { margin: 40px -24px; }
.article__body figcaption { font-size: 11px; color: var(--sub); padding: 10px 24px 0; }
.article__two { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 40px 0; }
.article__two img { aspect-ratio: 3 / 4; object-fit: cover; }
.article__items { padding: 88px 20px 0; }

/* 404 */
.notfound { text-align: center; padding: 96px 24px 120px; }
.notfound__en { font-family: var(--en); font-weight: 300; font-size: 56px; letter-spacing: .2em; color: var(--line); line-height: 1.2; }
.notfound__ttl { font-weight: 400; font-size: 20px; line-height: 2; letter-spacing: .18em; margin: 20px 0 16px; }
.notfound__text { font-size: 13px; color: #5a5752; }


/* フッター(サイトマップつき) */
.footer { background: var(--tint); padding: 64px 24px 36px; }
.footer__brand .logo { display: inline-flex; }
.footer__ja { font-size: 13px; letter-spacing: .2em; margin-top: 20px; }
.footer__addr { font-size: 11px; line-height: 2; color: var(--sub); margin-top: 14px; }
.footer__nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 20px; margin-top: 44px; }
.footer__head { font-family: var(--en); font-size: 10px; letter-spacing: .3em; color: var(--sub); margin-bottom: 10px; }
.footer__nav a { display: block; font-size: 12px; line-height: 2.5; }
.footer__nav a:hover { opacity: .6; }
.footer__keys { font-family: var(--en); font-size: 8px; letter-spacing: .34em; color: var(--sub); margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); text-align: center; }
.footer__demo { font-size: 10px; color: var(--sub); margin-top: 16px; letter-spacing: .06em; line-height: 1.8; text-align: center; }
.footer__copy { font-family: var(--en); font-size: 9px; letter-spacing: .2em; color: var(--sub); margin-top: 8px; text-align: center; }

/* オープニング(ロゴの円を線で描く) */
.opening { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; animation: openingOut .9s ease 2.1s forwards; }
.opening svg { width: 96px; height: 108px; overflow: visible; }
.opening__c { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; animation: openingDraw 1.2s cubic-bezier(.5, 0, .2, 1) forwards; }
.opening__c--2 { animation-delay: .3s; }
.opening__c--3 { animation-delay: .7s; animation-duration: .6s; }
.opening__type { font-family: var(--en); font-weight: 300; font-size: 15px; letter-spacing: .4em; text-indent: .4em; opacity: 0; animation: openingType .9s ease 1s forwards; }
.no-opening .opening { display: none; }
@keyframes openingDraw { to { stroke-dashoffset: 0; } }
@keyframes openingType { to { opacity: 1; } }
@keyframes openingOut { to { opacity: 0; visibility: hidden; } }

/* 出現アニメーション */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1.2s ease, transform 1.2s ease; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__track { transition: none; }
  .opening { display: none; }
}

/* PC */
@media (min-width: 768px) {
  :root { --bar-h: 32px; --header-h: 108px; }
  body { font-size: 15px; }
  .header__inner { padding: 0 40px; }
  .header__bar { font-size: 11px; }
  .menu-btn { display: none; }
  .logo__mark { width: 40px; height: 45px; }
  .logo__type { font-size: 20px; }
  .logo__sub { font-size: 8px; }
  .gnav { display: flex; gap: 40px; margin-left: auto; margin-right: 40px; }
  .gnav a { font-family: var(--en); font-weight: 300; font-size: 12px; letter-spacing: .26em; padding: 6px 0; position: relative; }
  .gnav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s; }
  .gnav a:hover::after { transform: scaleX(1); }

  .hero__viewport::after {
    background: linear-gradient(to bottom, rgba(250,248,244,.6) 0, rgba(250,248,244,0) 20%, rgba(250,248,244,0) 58%, rgba(250,248,244,.82) 100%);
  }
  .hero__arrow {
    display: block; position: absolute; top: 50%; z-index: 3; width: 52px; height: 52px; margin-top: -26px;
    border: 1px solid rgba(58, 56, 53, .35); border-radius: 50%; background: rgba(250, 248, 244, .35); backdrop-filter: blur(4px);
    transition: background-color .3s;
  }
  .hero__arrow:hover { background: rgba(250, 248, 244, .9); }
  .hero__arrow::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); }
  .hero__arrow--prev { left: 32px; }
  .hero__arrow--prev::after { transform: translate(-30%, -50%) rotate(-135deg); }
  .hero__arrow--next { right: 32px; }
  .hero__arrow--next::after { transform: translate(-70%, -50%) rotate(45deg); }
  .hero__logo { left: 26%; top: 44%; gap: 1.55vw; }
  .hero__logomark { width: 7vw; height: 7.9vw; }
  .hero__logotype { font-size: 3.35vw; }
  .hero__logosub { font-size: .9vw; padding-left: 1.55vw; }
  .hero__copy { bottom: 92px; }
  .hero__ja { font-size: 30px; letter-spacing: .26em; }
  .hero__en { font-size: 12px; margin-top: 14px; letter-spacing: .4em; }
  .hero__dots { bottom: 40px; }

  .themes { padding: 56px 0 0; }
  .themes ul { justify-content: center; flex-wrap: wrap; overflow: visible; }
  .themes a { font-size: 13px; padding: 12px 22px; }

  .ttl { margin-bottom: 56px; }
  .ttl__en { font-size: 28px; }
  .ttl__ja { font-size: 12px; }
  .sec { padding: 120px 40px; }
  .sec > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
  .sec--narrow > * { max-width: 760px; }
  .more { margin-top: 64px; }

  .pickup { grid-template-columns: repeat(2, 1fr); gap: 32px; max-width: 1200px; margin: 0 auto; padding: 48px 40px 0; }

  .concept { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 88px; max-width: 1240px; margin: 0 auto; padding: 160px 40px 60px; overflow: visible; }
  .concept__visual { padding: 0 0 120px 72px; }
  .concept__img--sub { right: -48px; width: 40%; box-shadow: 0 0 0 12px var(--bg); }
  .concept__vertical { font-size: 15px; }
  .concept__body { padding-top: 0; text-align: left; }
  .concept__body .ttl { text-align: left; margin-bottom: 40px; }
  .concept__body .ttl__en { text-indent: 0; font-size: 14px; color: var(--sub); }
  .concept__lead { font-size: 21px; line-height: 2.2; letter-spacing: .18em; margin-bottom: 36px; }
  .concept__lead br, .concept__text br { display: inline; }
  .concept__text { font-size: 14px; }

  .brand__main { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; }
  .brand__main + .brand__main { margin-top: 96px; }
  .brand__main--rev { grid-template-columns: 1fr 1.2fr; }
  .brand__main--rev .brand__img { order: 2; }
  .brand__body { padding-top: 0; }
  .brand__name { font-size: 28px; }
  .brand__text { font-size: 14px; }
  .brand__text br { display: inline; }
  .brand__cats { grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 96px; padding-top: 80px; }
  .brand__catname { font-size: 19px; }
  .brand__cattext br { display: inline; }

  .gift { display: grid; grid-template-columns: 1.2fr 1fr; align-items: stretch; }
  .gift__main img { height: 100%; aspect-ratio: auto; min-height: 640px; }
  .gift__body { padding: 96px 64px; align-self: center; max-width: 600px; }
  .gift__lead { font-size: 26px; }
  .gift__text { font-size: 14px; }

  .instagram__grid { grid-template-columns: repeat(6, 1fr); gap: 12px; }
  .place { padding: 140px 40px; }
  .place__ttl { font-size: 26px; }
  .place__text { font-size: 14px; text-align: center; }
  .place__text br { display: inline; }

  .crumb { padding: 24px 40px 0; max-width: 1200px; margin: 0 auto; }
  .sec--page { padding-top: 64px; }
  .page__lead { font-size: 14px; margin-bottom: 48px; }
  .page__lead br { display: inline; }
  .items.items--list { grid-template-columns: repeat(4, 1fr); }
  .items.items--list li:first-child { grid-row: auto; }
  .items.items--list li:first-child img { aspect-ratio: 1; height: auto; }
  .items.items--list li:nth-child(8) { display: block; }
  .items.items--list li[hidden] { display: none; }
  .detail { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; max-width: 1200px; margin: 0 auto; padding: 40px 40px 120px; align-items: start; }
  .detail__gallery { position: sticky; top: calc(var(--header-h) + 24px); }
  .detail__body { padding-top: 12px; }
  .detail__name { font-size: 28px; }
  .detail__text { font-size: 14px; }
  .detail__text br { display: inline; }
  .detail__btns { grid-template-columns: repeat(2, 1fr); }
  .article { padding-top: 56px; }
  .article__ttl { font-size: 34px; }
  .article__lead { font-size: 14px; }
  .article__lead br { display: inline; }
  .article__hero { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
  .article__hero img { aspect-ratio: 2 / 1; }
  .article__body p { font-size: 15px; }
  .article__body figure { margin: 56px -120px; }
  .article__body figcaption { padding: 12px 0 0; text-align: center; }
  .article__items { max-width: 1200px; margin: 0 auto; padding: 120px 40px 0; }

  .items { grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 40px 28px; }
  .items[data-cat="all"] li:first-child { grid-row: span 2; }
  .items[data-cat="all"] li:nth-child(8) { display: none; }
  .items[data-cat="all"] li:first-child a { display: flex; flex-direction: column; height: 100%; }
  .items[data-cat="all"] li:first-child img { aspect-ratio: auto; flex: 1 1 0; min-height: 0; height: auto; width: 100%; }
  .items__name { font-size: 14px; }
  .snaps { gap: 20px; margin: 0 auto; padding: 0; }
  .snaps li { flex: 1 1 0; }
  .snaps__item { font-size: 13px; }
  .features { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .features__ttl { font-size: 14px; }
  .cats { gap: 4px 32px; }
  .cats button { font-size: 12px; letter-spacing: .24em; }
  .news__ttl { font-size: 14px; }

  .shop { display: grid; grid-template-columns: 1.2fr 1fr; align-items: stretch; }
  .shop__img img { height: 100%; aspect-ratio: auto; min-height: 520px; }
  .shop__body { padding: 96px 64px; align-self: center; max-width: 560px; }
  .shop dl > div { font-size: 14px; }
  .shop__btns { grid-template-columns: repeat(2, 1fr); }

  .access { padding: 120px 0 140px; }
  .access__map { height: 460px; }
  .access dl > div { font-size: 14px; }
  .gnav { gap: 34px; }

  .footer { padding: 96px 40px 40px; }
  .footer__top { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; max-width: 1120px; margin: 0 auto; }
  .footer__nav { grid-template-columns: repeat(3, 1fr); margin-top: 8px; }
  .footer__nav a { font-size: 13px; }
  .footer__keys { max-width: 1120px; margin: 72px auto 0; }
}
  .footer__ja { font-size: 18px; }
}

/* ============================================================
   WordPress 版で追加した部品
   ============================================================ */

/* お知らせ帯が無いとき */
body.no-bar { --bar-h: 0px; --header-h: 72px; }
.no-bar .header__bar { display: none; }
.insta--empty { width: 24px; height: 24px; }

/* 写真が無いときの枠 */
.noimage { display: block; aspect-ratio: 1; background: var(--tint); }
.empty { text-align: center; font-size: 13px; color: var(--sub); padding: 40px 0; }

/* 一覧: カテゴリ(リンク版)と絞り込み */
.cats--links a { display: inline-block; font-family: var(--en); font-weight: 300; font-size: 10px; letter-spacing: .18em; padding: 6px 2px; color: var(--sub); border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.cats--links a.is-on, .cats--links a:hover { color: var(--ink); border-color: var(--ink); }
.filters { margin: -8px 0 40px; text-align: center; }
.filters__label { font-size: 11px; color: var(--sub); letter-spacing: .2em; margin-top: 12px; }
.filters__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.filters__list a { display: block; font-size: 12px; line-height: 1; padding: 10px 16px; border: 1px solid var(--line); border-radius: 99px; background: #fff; transition: background-color .3s, border-color .3s; }
.filters__list a:hover { border-color: var(--sub); }
.filters__list a.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ページ送り(WordPress の出力に合わせる) */
.pager .page-numbers { display: inline-block; min-width: 36px; height: 36px; line-height: 36px; text-align: center; border: 1px solid var(--line); padding: 0 6px; }
.pager .dots { border: 0; }

/* お知らせの日付 */
.news__date { font-family: var(--en); font-size: 11px; letter-spacing: .12em; color: var(--sub); min-width: 78px; }
.news a { flex-wrap: wrap; row-gap: 4px; }

/* LINE の案内 */
.line-box { margin-top: 36px; padding: 24px 20px; background: var(--tint); text-align: center; }
.line-box__text { font-size: 13px; line-height: 1.9; margin-bottom: 14px; }
.line-box .btn { max-width: 320px; margin: 0 auto; }

/* 贈りもののボタン */
.gift__btns { display: grid; gap: 12px; margin-top: 32px; }

/* 店舗情報のボタン(本数が変わっても並ぶように) */
.shop__btns { display: grid; gap: 12px; margin-top: 36px; }

/* 営業日カレンダー(サイト) */
.calendar { margin-top: 36px; }
.calendar__today { display: inline-block; font-size: 12px; letter-spacing: .12em; padding: 6px 14px; border: 1px solid var(--ink); border-radius: 99px; margin-bottom: 20px; }
.calendar__today.is-closed { color: var(--sub); border-color: var(--line); }
.calendar__months { display: grid; gap: 28px; }
.cal__month { font-family: var(--en); font-weight: 300; font-size: 20px; letter-spacing: .12em; margin-bottom: 10px; }
.cal__y { font-size: 11px; letter-spacing: .2em; color: var(--sub); margin-right: 10px; }
.cal__m { font-family: var(--ja); font-size: 12px; margin-left: 2px; }
.cal__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal__table th { font-weight: 400; font-size: 11px; color: var(--sub); padding: 6px 0; border-bottom: 1px solid var(--line); }
.cal__table td { text-align: center; padding: 3px 0; }
.cal__table td span { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; font-family: var(--en); font-size: 13px; }
.cal__w0 { color: #9a6b62; }
.cal__w6 { color: #5f7486; }
.cal__day.is-closed span { background: var(--ink); color: var(--bg); }
.cal__day.is-before span { color: var(--line); }
.cal__day.is-past span { opacity: .45; }
.cal__day.is-today span { box-shadow: 0 0 0 1px var(--ink); }
.cal__day.is-closed.is-today span { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--ink); }
.calendar__legend { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--sub); margin-top: 14px; }
.calendar__mark { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.calendar__note { font-size: 12px; color: var(--sub); margin-top: 8px; line-height: 1.9; }

/* 記事本文(ブロックエディタで書いた内容) */
.entry { font-size: 14px; line-height: 2.3; color: #4d4a46; }
.entry > * + * { margin-top: 1.4em; }
.entry h2 { font-weight: 400; font-size: 17px; letter-spacing: .18em; margin-top: 56px; padding-left: 16px; border-left: 1px solid var(--ink); line-height: 1.6; color: var(--ink); }
.entry h3 { font-weight: 400; font-size: 15px; letter-spacing: .14em; margin-top: 40px; color: var(--ink); }
.entry a { text-decoration: underline; text-underline-offset: 3px; }
.entry ul, .entry ol { padding-left: 1.4em; }
.entry ul { list-style: disc; }
.entry figure { margin-left: 0; margin-right: 0; }
.entry figcaption { font-size: 11px; color: var(--sub); margin-top: 10px; }
.entry img { height: auto; }
.entry .wp-block-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.entry .wp-block-column { margin: 0; }
.entry .wp-block-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.entry .wp-block-gallery .wp-block-image { margin: 0; width: 100% !important; }
.entry .wp-block-gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.article__body.entry { padding-top: 24px; }
.article--news .article__head { padding-bottom: 28px; }

/* 固定ページ */
.page--privacy .entry h2 { font-size: 15px; margin-top: 40px; }
.page--privacy .entry { font-size: 13px; }

/* 取り置き・ご相談フォーム(Contact Form 7) */
.page--reserve .entry > p:first-child { font-size: 13px; text-align: center; margin-bottom: 36px; }
.wpcf7-form .form-row { margin-bottom: 22px; }
.wpcf7-form .form-label { display: block; font-size: 13px; letter-spacing: .1em; margin-bottom: 8px; }
.wpcf7-form .req { display: inline-block; font-size: 10px; line-height: 1; padding: 4px 6px; margin-left: 8px; background: var(--ink); color: var(--bg); vertical-align: 2px; letter-spacing: .1em; }
.wpcf7-form .opt { display: inline-block; font-size: 10px; line-height: 1; padding: 3px 6px; margin-left: 8px; border: 1px solid var(--line); color: var(--sub); vertical-align: 2px; }
.wpcf7-form input[type=text], .wpcf7-form input[type=email], .wpcf7-form input[type=tel], .wpcf7-form textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 0; padding: 12px 14px; transition: border-color .3s;
}
.wpcf7-form input:focus, .wpcf7-form textarea:focus { outline: none; border-color: var(--ink); }
.wpcf7-form textarea { height: 160px; line-height: 1.8; }
.wpcf7-form .wpcf7-radio { display: grid; gap: 8px; }
.wpcf7-form .wpcf7-list-item { margin: 0; display: block; }
.wpcf7-form .wpcf7-radio .wpcf7-list-item label { display: flex; align-items: center; gap: 10px; font-size: 14px; margin: 0; padding: 12px 14px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.wpcf7-form .wpcf7-list-item input { accent-color: var(--ink); width: 16px; height: 16px; margin: 0; }
.wpcf7-form .form-note { font-size: 11px; color: var(--sub); margin-top: 6px; line-height: 1.8; }
.wpcf7-form .form-accept { text-align: center; font-size: 13px; margin-top: 28px; }
.wpcf7-form .form-accept label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.wpcf7-form .form-submit { text-align: center; margin-top: 24px; }
.wpcf7-form input[type=submit] { font: inherit; font-size: 13px; letter-spacing: .2em; color: var(--bg); background: var(--ink); border: 1px solid var(--ink); padding: 16px 20px; width: 100%; max-width: 360px; cursor: pointer; transition: background-color .4s, color .4s; -webkit-appearance: none; border-radius: 0; }
.wpcf7-form input[type=submit]:hover { background: transparent; color: var(--ink); }
.wpcf7-form input[type=submit]:disabled { opacity: .4; cursor: not-allowed; }
.wpcf7-not-valid-tip { font-size: 12px; color: #a0524a; margin-top: 6px; }
.wpcf7 form .wpcf7-response-output { margin: 24px 0 0; padding: 16px; font-size: 13px; line-height: 1.8; border: 1px solid var(--line); background: #fff; text-align: center; }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--ink); }
.wpcf7-spinner { display: block; margin: 12px auto 0; }

/* 特集一覧 */
.features--list { gap: 40px 16px; }

@media (min-width: 768px) {
  body.no-bar { --bar-h: 0px; --header-h: 76px; }
  .filters { margin-bottom: 56px; }
  .news__date { font-size: 12px; min-width: 92px; }
  .news a { flex-wrap: nowrap; }
  .gift__btns { grid-template-columns: repeat(2, 1fr); }
  .shop__btns { grid-template-columns: repeat(2, 1fr); }
  .shop__btns .btn:first-child:not(:last-child):nth-last-child(odd) { grid-column: 1 / -1; }
  .calendar__months { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .cal__table td span { width: 30px; height: 30px; font-size: 12px; }
  .entry { font-size: 15px; }
  .entry .alignwide { margin-left: -120px; margin-right: -120px; }
  .features--list { grid-template-columns: repeat(3, 1fr); gap: 56px 28px; }
}