/* お客さん向け画面 */

/* ---- ヘッダー ---- */
.site-header { background: var(--surface); border-bottom: var(--border); position: sticky; top: 0; z-index: 50; }
.site-header__inner { display: flex; align-items: center; gap: var(--space-5); min-height: 80px; }
/* logo.png は上下に市松の帯を含むため、文字の部分だけが見えるように切り抜く */
.site-header__logo, .site-footer__logo { display: block; flex: none; width: 168px; height: 42px; overflow: hidden; }
.site-header__logo img, .site-footer__logo img { width: 100%; margin-top: -12px; }
.site-nav { flex: 1; }
.site-nav__list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1) var(--space-4); list-style: none; margin: 0; padding: 0; }
.site-nav__list a {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--text);
  text-decoration: none;
  padding: var(--space-1) 0;
  border-bottom: 3px solid transparent;
}
.site-nav__list a:hover { color: var(--brand); }
.site-header__actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.icon-link {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.icon-link:hover { color: var(--brand); }
.icon-link__label { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-note); letter-spacing: 0.08em; }
/* ヘッダーのアイコン（マイページ・カート・メニュー）は文字を出さずアイコンだけにする（2026-10-27 決定）。文字は読み上げソフト用に残す。
   メニューのボタンは 960px 以下（タブレット・スマホ）でしか出ないので、PC ではメニューの項目が文字で並ぶ */
.site-header .icon-link__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-header .icon-link svg { width: 28px; height: 28px; }
.icon-link__count {
  position: absolute;
  top: -8px; right: -8px;
  min-width: 22px; height: 22px;
  padding: 0 5px;
  border-radius: 11px;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-note);
  font-weight: 800;
  line-height: 22px;
  text-align: center;
}
.site-menu { display: none; }
.site-menu > summary { list-style: none; }
.site-menu > summary::-webkit-details-marker { display: none; }
.site-menu__panel {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: var(--surface);
  border-bottom: var(--border);
  padding: var(--space-2) var(--space-4) var(--space-4);
}
.site-menu__panel ul { list-style: none; margin: 0; padding: 0; }
.site-menu__panel a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-1);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.08em;
  color: var(--text);
  text-decoration: none;
}
.site-menu__panel a::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 8px; height: 8px;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
  transform: rotate(45deg);
}
/* ABOUT の中のタブ（BRAND / STORY / ACMA GUIDE）へのリンクは、ABOUT の下に一段下げて並べる */
.site-menu__panel .site-menu__sub a { padding-left: var(--space-5); font-size: 14px; }
.site-menu__ja { font-family: var(--font-body); font-size: var(--fs-note); font-weight: 700; font-style: normal; letter-spacing: 0; color: var(--muted); }
/* <details> の開閉だけで ≡ と × を入れかえる（JS を使わないため） */
.site-menu__close, .site-menu[open] .site-menu__open { display: none; }
.site-menu[open] .site-menu__close { display: block; }
/* 後ろの画面を暗くする。暗くする板を重ねると sticky のヘッダーの重なりの中に入り、ヘッダーまで暗くなるため、
   パネルの影を画面いっぱいに広げ、パネルより上を clip-path で切り落とす。JS がないので暗い所を押しても閉じない（× で閉じる） */
.site-menu[open] .site-menu__panel { box-shadow: 0 0 0 100vmax rgba(43, 46, 46, .45); clip-path: inset(0 -100vmax -100vmax -100vmax); }

/* 今いるページのメニューに印を付ける（body の data-page と a の data-nav が一致したもの） */
body[data-page="home"] [data-nav="home"],
body[data-page="about"] [data-nav="about"],
body[data-page="items"] [data-nav="items"],
body[data-page="blog"] [data-nav="blog"],
body[data-page="guide"] [data-nav="guide"],
body[data-page="contact"] [data-nav="contact"] { color: var(--brand); border-bottom-color: var(--brand); }
body[data-page="mypage"] .site-header [data-nav="mypage"],
body[data-page="cart"] .site-header [data-nav="cart"] { color: var(--brand); }
/* 開いたメニューでは今いるページを文字の色だけで示し、区切り線は変えない */
.site-header .site-menu__panel a[data-nav] { border-bottom: 1px solid var(--line); }

@media (max-width: 960px) {
  .site-nav { display: none; }
  .site-menu { display: block; }
  .site-header__inner { position: relative; }
  .site-menu__panel { padding: var(--space-2) var(--space-5) var(--space-5); }
  .site-menu__panel ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-5); }
}
@media (max-width: 480px) {
  .site-menu__panel { padding: var(--space-1) var(--space-4) var(--space-4); }
  .site-menu__panel ul { grid-template-columns: 1fr; }
  .site-header__inner { min-height: 64px; gap: var(--space-3); }
  .site-header__logo, .site-footer__logo { width: 136px; height: 34px; }
  .site-header__logo img, .site-footer__logo img { margin-top: -10px; }
}

/* ---- フッター ---- */
.site-footer { margin-top: var(--space-8); background: var(--text); color: #f4e9df; }
.site-footer .checker { background-color: var(--brand); }
.site-footer__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--space-5);
  padding-top: var(--space-6);
  padding-bottom: var(--space-5);
}
/* 暗いフッターの上でもヘッダーと同じ見え方にするため、ヘッダーと同じ地の色の札に載せる */
.site-footer__logo { box-sizing: content-box; padding: 8px 14px; background: var(--surface); border-radius: var(--radius); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.site-footer a { color: #f4e9df; font-size: var(--fs-note); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__follow { margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-note); letter-spacing: .12em; }
.site-footer .site-footer__sns { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.site-footer__sns a { display: grid; place-items: center; }
.site-footer__sns svg { width: 24px; height: 24px; fill: currentColor; }
.site-footer__copy {
  margin: 0;
  padding: var(--space-3) var(--space-4) var(--space-5);
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-note);
  color: #b3a197;
}
@media (max-width: 720px) {
  .site-footer__inner { grid-template-columns: 1fr; }
}

/* ---- ページの枠 ---- */
.page { padding: var(--space-6) 0 0; }
.page-head { margin-bottom: var(--space-6); }
.section { padding: var(--space-7) 0; }
.section + .section { border-top: 1px solid var(--line); }
.section__more { margin-top: var(--space-5); text-align: center; }

/* ---- HOME ---- */
/* バナーは運営者が差し替える画像。縦横比が画像ごとに違っても切れないよう、幅に合わせて縮めるだけにする */
.home-banner { background: var(--surface); border-bottom: var(--border); }
.home-banner__link { display: block; max-width: 1280px; margin: 0 auto; }
.home-banner img { width: 100%; height: auto; }

/* 紹介文は工場の作業伝票（2026-10-28 決定。比較: design-proposals/intro.html の案 4） */
.intro { padding: var(--space-7) 0; }
.intro__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-1); }
.intro__head-en { font-family: var(--font-display); font-weight: 900; font-size: 20px; letter-spacing: 0.08em; }
.intro__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(20px, 4.4vw, 28px);
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--brand);
  margin: var(--space-2) 0 var(--space-4);
}
.intro__order { width: 100%; border-collapse: collapse; font-family: var(--font-heading); font-weight: 700; line-height: 1.6; }
.intro__order th {
  width: 7.5em;
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  text-align: left;
  vertical-align: top;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 12px;
  line-height: 2.2;
  letter-spacing: 0.1em;
  color: var(--muted);
  white-space: nowrap;
}
.intro__order td { padding: var(--space-2) 0; }
.intro__order tr + tr > * { border-top: 1px solid var(--line); }
.intro__lamp { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 900; letter-spacing: 0.06em; color: var(--ok); }
.intro__lamp::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #2ecc5f; box-shadow: 0 0 0 3px rgba(46, 204, 95, .25), 0 0 8px #2ecc5f; }
.intro__action { margin-top: var(--space-5); text-align: center; }
@media (max-width: 480px) {
  .intro__order { font-size: var(--fs-note); }
  .intro__order th { width: 6.6em; }
}

/* 雑誌の特集ページの見立て。後ろに英字の名前を大きく敷き、写真を少し傾けて重ねる */
/* 大きな英字は画面幅によってはみ出すので切る。切る範囲を外へ広げ、傾けた写真の影までは切らないようにする */
.pickup { overflow: hidden; margin: 0 -16px -24px; padding: 0 16px 24px; }
.pickup__en {
  margin: 0 0 -0.47em;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(64px, 13vw, 150px);
  line-height: .85;
  letter-spacing: -.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in srgb, var(--brand) 16%, transparent);
}
.pickup__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: end;
}
.pickup__info, .pickup__image { position: relative; }
.pickup__info { padding-top: 80px; }
.pickup__image { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: var(--border); border-radius: var(--radius); rotate: 3deg; }
@media (max-width: 720px) {
  .pickup__en { margin-bottom: 4px; }
  .pickup__body { grid-template-columns: 1fr; }
  .pickup__info { padding-top: 0; }
  .pickup__image { order: -1; }
}

.post-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.post-list li { border-bottom: 1px solid var(--line); }
.post-list a { display: grid; grid-template-columns: 110px 1fr; gap: var(--space-3); padding: var(--space-4) var(--space-2); color: var(--text); text-decoration: none; }
.post-list a:hover { background: var(--surface); }
.post-list time { font-family: var(--font-display); font-weight: 700; color: var(--muted); font-size: var(--fs-note); }
.post-list__title { font-weight: 700; }
.post-list__excerpt { display: block; font-size: var(--fs-body); color: var(--muted); font-weight: 400; }
@media (max-width: 480px) { .post-list a { grid-template-columns: 1fr; gap: 0; } }

/* HOME の News。ラベル（data-label）ごとの見た目はテイストで付ける */
.news-notes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.news-notes a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: var(--space-4); border: var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; }
.news-notes__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.news-notes time { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-note); color: var(--muted); }
.news-notes__label { padding: 0 8px; border: 1.5px solid currentColor; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.news-notes__new { font: italic 900 11px/1.6 var(--font-display); color: var(--brand); }
.news-notes__title { font-weight: 700; }
.news-notes__excerpt { font-size: var(--fs-note); color: var(--muted); }
.news-notes__more { margin-top: auto; padding-top: var(--space-2); align-self: flex-end; font-size: var(--fs-note); font-weight: 700; color: var(--brand); }
@media (max-width: 480px) { .news-notes { grid-template-columns: 1fr; } }

/* ---- 商品一覧 ---- */
.items-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-6); align-items: start; }
.filters { display: grid; gap: var(--space-5); }
.filters ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.filters a { display: flex; justify-content: space-between; padding: 6px var(--space-2); border-radius: var(--radius); color: var(--text); text-decoration: none; font-size: var(--fs-body); }
.filters a:hover { background: var(--cream); }
.filters a[aria-current="page"] { background: var(--text); color: #fff; font-weight: 700; }
.items-toolbar p { margin: 0; }
.items-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); font-size: var(--fs-note); }
.items-toolbar .select { width: auto; min-height: 38px; }
/* 文章のページ（ABOUT・CONTACT・記事・ガイド・特商法・プライバシー）も、紙の幅と本文の始まりを商品一覧にそろえる（2026-11-01 ユーザー決定）。
   紙ごと文章の幅にしぼると、紙が見えるこのデザインではページを移るたびに紙の幅が変わって見えるため。
   左の欄に置くものがないページも欄は空けたままにする（本文を左に寄せると右に大きな空きが残る） */
.side-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.side-layout__main { grid-column: 2; }
.side-layout__main > .form { max-width: var(--text-width); }
.side-layout__side { font-size: var(--fs-note); }
.filters h2 { font-family: var(--font-display); font-weight: 900; letter-spacing: 0.08em; font-size: var(--fs-note); margin-bottom: var(--space-2); }
@media (max-width: 720px) {
  .side-layout { grid-template-columns: 1fr; }
  .side-layout__main { grid-column: auto; }
  .items-layout { grid-template-columns: 1fr; }
  .filters ul { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .filters a { border: 1.5px solid var(--line-strong); gap: var(--space-2); }
}

/* ---- 商品詳細 ---- */
.product { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-7); align-items: start; }
.gallery__main { border: var(--border); border-radius: var(--radius); background: var(--cream); aspect-ratio: 1 / 1; overflow: hidden; }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
/* 販売の種類のラベルは写真の右上に、売り切れは写真のまん中に出す（商品カードとそろえる） */
.gallery__main { position: relative; }
.gallery__badges { position: absolute; right: var(--space-3); top: var(--space-3); z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.gallery__main.is-soldout img { opacity: 0.45; filter: grayscale(0.6); }
.gallery__main.is-soldout .gallery__badges { inset: 0; display: grid; place-items: center; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.gallery__thumbs a { display: block; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--cream); aspect-ratio: 1 / 1; overflow: hidden; }
.gallery__thumbs a[aria-current="true"] { border: 2px solid var(--brand); }
.product__badges { margin-bottom: var(--space-3); }
.product__category { margin: 0 0 var(--space-1); font-size: var(--fs-note); font-weight: 700; }
.product__name { font-size: clamp(22px, 4vw, 30px); margin-bottom: var(--space-2); }
.product__price { font-size: 28px; margin: var(--space-3) 0 var(--space-1); }
.product__shipping { font-size: var(--fs-note); color: var(--muted); margin-bottom: var(--space-5); }
.product__buy { display: grid; gap: var(--space-4); padding: var(--space-5) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.product__desc { margin-top: var(--space-6); }
/* パソコンの幅: サムネイルを写真の左に縦に並べ、説明と仕様は写真・購入欄の下の段に幅いっぱいで置く（2026-10-30 ユーザー決定）。
   説明を右の列に入れたままだと右の列だけ長くなり、写真の下が大きく空くため */
@media (min-width: 821px) {
  .gallery:has(.gallery__thumbs) { display: grid; grid-template-columns: 84px 1fr; gap: 18px; align-items: start; }
  .gallery__thumbs { grid-column: 1; grid-row: 1; grid-template-columns: 1fr; gap: var(--space-3); margin: 0; }
  .gallery__main { grid-column: 2; grid-row: 1; }
  .product-more { margin-top: var(--space-7); }
  .product-more .product__desc { max-width: none; margin-top: 0; display: grid; grid-template-columns: 1.1fr 1fr; column-gap: var(--space-7); align-items: start; }
  .product-more .product__desc > * { grid-column: 1; }
  .product-more .product__desc > h2 { grid-column: 1 / -1; margin-top: 0; }
  .product-more .product__desc > .dl { grid-column: 2; grid-row: 2 / span 20; margin-top: 0; }
}
.stock { font-size: var(--fs-note); font-weight: 700; }
.stock--ok { color: var(--ok); }
.stock--low { color: var(--warn); }
.stock--none { color: var(--muted); }
.sale-period {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 2px solid var(--brand);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--fs-note);
}
.sale-period__title { font-family: var(--font-display); font-weight: 900; letter-spacing: 0.08em; color: var(--brand); font-size: var(--fs-note); }
.sale-period__date { font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.qty-row { display: flex; align-items: center; gap: var(--space-3); }
@media (max-width: 820px) {
  .product { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ---- カート・購入手続き ---- */
.checkout-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-6); align-items: start; }
/* 上に固定したヘッダー（80px）の下に 24px あけて止める */
.summary { position: sticky; top: 104px; }
.summary__rows { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); font-size: var(--fs-body); }
.summary__row { display: flex; justify-content: space-between; gap: var(--space-3); }
.summary__row dt, .summary__row dd { margin: 0; }
.summary__total { padding-top: var(--space-3); border-top: 2px solid var(--line-strong); font-weight: 700; font-size: 16px; }
.summary__total .price { font-size: 22px; }
.summary__items { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-3); font-size: var(--fs-note); }
.summary__items li { display: grid; grid-template-columns: 48px 1fr auto; gap: var(--space-2); align-items: center; }
.summary__items img { border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream); }
@media (max-width: 880px) {
  .checkout-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
}

.cart-list { list-style: none; margin: 0; padding: 0; border-top: var(--border); }
.cart-item { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); align-items: start; }
.cart-item__image { border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--cream); }
.cart-item__name { font-weight: 700; margin-bottom: 2px; }
.cart-item__variant { font-size: var(--fs-note); color: var(--muted); }
.cart-item__controls { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-3); }
.cart-item__subtotal { text-align: right; }
@media (max-width: 560px) {
  .cart-item { grid-template-columns: 72px 1fr; }
  .cart-item__subtotal { grid-column: 2; text-align: left; }
}

.address-card { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: var(--fs-body); }
.address-card__name { font-weight: 700; font-size: var(--fs-body); }
.address-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

/* 決済代行の部品（PAY.JP のカード入力欄）を差し込む場所 */
.payment-element {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1.5px dashed #b9a798;
  border-radius: var(--radius);
  background: #fffdf9;
}
.payment-element__fake { height: 44px; border: 1.5px solid #b9a798; border-radius: var(--radius); background: var(--surface); padding: 10px 12px; color: var(--muted); font-size: var(--fs-body); }

.complete { text-align: center; max-width: 640px; margin: 0 auto; }
.complete__mark { width: 120px; margin: 0 auto var(--space-5); }
.complete__no { display: inline-block; margin: var(--space-3) 0 var(--space-5); padding: var(--space-2) var(--space-4); border: var(--border); border-radius: var(--radius); background: var(--surface); font-family: var(--font-display); font-weight: 800; letter-spacing: 0.06em; }

/* ---- ログイン ---- */
.auth { max-width: 440px; margin: 0 auto; }
.idp-btn { justify-content: flex-start; gap: var(--space-3); }
.idp-btn__icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-family: var(--font-display); font-weight: 900; font-size: 14px; color: #fff; flex: none; }
.or { display: flex; align-items: center; gap: var(--space-3); color: var(--muted); font-size: var(--fs-note); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---- マイページ ---- */
.mypage-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.mypage-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mypage-nav a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius); color: var(--text); text-decoration: none; font-weight: 700; font-size: var(--fs-body); }
.mypage-nav a:hover { background: var(--cream); }
body[data-sub="mypage-orders"] [data-nav="mypage-orders"],
body[data-sub="mypage-lotteries"] [data-nav="mypage-lotteries"],
body[data-sub="mypage-addresses"] [data-nav="mypage-addresses"],
body[data-sub="mypage-cards"] [data-nav="mypage-cards"],
body[data-sub="mypage-account"] [data-nav="mypage-account"] { background: var(--text); color: #fff; }
.order-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.order-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; }
.order-row:hover { border-color: var(--brand); }
.order-row__no { font-family: var(--font-display); font-weight: 800; }
.order-row__thumbs { display: flex; gap: var(--space-1); margin-top: var(--space-2); }
.order-row__thumbs img { width: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream); }
@media (max-width: 720px) {
  .mypage-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .mypage-nav ul { display: flex; overflow-x: auto; gap: var(--space-2); padding-bottom: var(--space-1); }
  .mypage-nav a { white-space: nowrap; border: 1.5px solid var(--line-strong); }
}

/* ---- ブログ ---- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
/* 一覧ではサムネイル画像を出さない（2026-10-30 決定）。中身の手がかりは「一覧に出す説明」で出す */
.blog-card a { display: block; height: 100%; color: var(--text); text-decoration: none; }
.blog-card__meta { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.blog-card__title { font-size: 16px; margin: var(--space-1) 0 0; }
.blog-card a:hover .blog-card__title { color: var(--brand); }
.blog-card { position: relative; }
.blog-card__date { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-note); color: var(--muted); }
.blog-card__label { display: inline-block; padding: 0 8px; border: 1.5px solid currentColor; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.6; color: var(--muted); }
.blog-card__excerpt { margin: var(--space-1) 0 0; font-size: var(--fs-note); color: var(--muted); }
.blog-card__new { position: absolute; z-index: 1; right: var(--space-2); top: var(--space-2); padding: 0 8px; border-radius: var(--radius); background: var(--brand); color: #fff; font: 700 11px/1.6 var(--font-display); }
.article__meta { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; color: var(--muted); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-note); margin-bottom: var(--space-5); }
.article__nav { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-7); padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: var(--fs-body); }

/* ---- STORY / ABOUT ---- */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.feature-grid li { padding: var(--space-4); border: var(--border); border-radius: var(--radius); background: var(--surface); }
.feature-grid h3 { color: var(--brand); margin-bottom: var(--space-2); }
.feature-grid p { margin: 0; font-size: var(--fs-body); }
.doc-box {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 6px 6px 0 var(--brand);
}
/* ABOUT のタブ。JS がないときは 3 つのパネルを全部出す（tabs.js が 1 つだけ見せる） */
/* 追従するヘッダー（PC 80px・スマホ 64px）の下にタブが隠れないよう、飛んだときの位置をずらす */
.folder-tabs { scroll-margin-top: 104px; }
@media (max-width: 480px) { .folder-tabs { scroll-margin-top: 84px; } }
/* タブは商品一覧のカテゴリと同じ見た目で左の欄に縦に並べる（2026-11-01 ユーザー決定。それまでのフォルダのタブはやめた） */
.folder-tabs__list { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
.folder-tabs__list a { display: block; padding: 6px var(--space-2); border-radius: var(--radius); color: var(--text); text-decoration: none; font-family: var(--font-display); font-weight: 900; letter-spacing: .06em; font-size: var(--fs-body); }
.folder-tabs__list a:hover { background: var(--cream); }
.folder-tabs__list a[aria-selected="true"] { background: var(--text); color: #fff; }
/* 長いパネル（STORY）を読み進めてもタブを押せるよう、パソコンの幅では左の欄を追従させる */
@media (min-width: 721px) { .folder-tabs__side { position: sticky; top: 120px; } }
@media (max-width: 720px) {
  .folder-tabs__list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .folder-tabs__list a { border: 1.5px solid var(--line-strong); }
}
/* お問い合わせのフォームも ABOUT の本文と同じ書類に入れる（2026-11-01 ユーザー決定）。紙にそのまま置くと、どこまでがフォームか見えにくいため */
.folder-tabs__body, .contact-sheet { padding: var(--space-5); border: var(--border); background: var(--surface); }
.folder-tabs__panel + .folder-tabs__panel { margin-top: var(--space-6); }
.folder-tabs__panel[hidden] { display: none; }
/* 紙の内側の余白の分だけ狭くなるので、本文の写真（最大 320px）が 360px 幅ではみ出さないようにする。.prose img.prose__figure に負けないよう同じ強さで書く */
.folder-tabs__body img, .folder-tabs__body img.prose__figure { max-width: min(320px, 100%); height: auto; }
@media (max-width: 480px) { .folder-tabs__list a { padding: var(--space-2) var(--space-3); font-size: 13px; } .folder-tabs__body, .contact-sheet { padding: var(--space-4); } }
.doc-box__label { font-family: var(--font-display); font-weight: 900; letter-spacing: 0.1em; font-size: var(--fs-note); color: var(--brand); }

/* ---- 404 ---- */
.notfound { text-align: center; padding: var(--space-8) 0; }
/* メンテナンス中のページはヘッダーを出さないので、ロゴを本文の上に中央寄せで置く */
.notfound .site-header__logo { margin: 0 auto var(--space-5); }
.notfound__code { font-family: var(--font-display); font-weight: 900; font-size: clamp(72px, 18vw, 140px); line-height: 1; color: var(--brand); letter-spacing: 0.04em; }
.idp-btn__icon--google { background: #4285f4; }
.idp-btn__icon--yahoo { background: #ff0033; }
.idp-btn__icon--line { background: #06c755; }
.order-row .r { text-align: right; }