/* ============================================================
   and AJ paw-pads — Official Site CSS  (SCOR-inspired layout)
   Color: jacquard-teal (#7faba9 family)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --teal-dark:    #35615f;
  --teal-mid:     #7faba9;
  --teal-light:   #9fc8c5;
  --teal-pale:    #a7cbc8;
  --cream:        #fffaf1;
  --cream-bg:     #f5ede0;
  --ink:          #2f2925;
  --ink-light:    #5a4f44;
  --ink-muted:    #8a7d72;
  --section-max:  860px;

  --ribbon-pattern:
    repeating-linear-gradient(90deg,
      rgba(255,250,241,.28) 0 2px, transparent 2px 9px,
      rgba(76,125,122,.34) 9px 12px, transparent 12px 22px),
    repeating-linear-gradient(0deg,
      rgba(255,250,241,.2) 0 2px, transparent 2px 18px),
    linear-gradient(180deg, #8bb8b6, #7faba9 58%, #6f9d9a);

  --jacquard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Crect width='180' height='180' fill='none'/%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.34' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M90 14 C104 30 104 48 90 64 C76 48 76 30 90 14Z'/%3E%3Cpath d='M90 166 C104 150 104 132 90 116 C76 132 76 150 90 166Z'/%3E%3Cpath d='M14 90 C30 76 48 76 64 90 C48 104 30 104 14 90Z'/%3E%3Cpath d='M166 90 C150 76 132 76 116 90 C132 104 150 104 166 90Z'/%3E%3Cpath d='M90 58 C112 70 126 78 138 90 C126 102 112 110 90 122 C68 110 54 102 42 90 C54 78 68 70 90 58Z'/%3E%3Cpath d='M56 56 C70 64 80 74 90 90 C100 74 110 64 124 56'/%3E%3Cpath d='M56 124 C70 116 80 106 90 90 C100 106 110 116 124 124'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.16'%3E%3Ccircle cx='90' cy='90' r='7'/%3E%3Ccircle cx='90' cy='14' r='3'/%3E%3Ccircle cx='90' cy='166' r='3'/%3E%3Ccircle cx='14' cy='90' r='3'/%3E%3Ccircle cx='166' cy='90' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Base ── */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  background:
    var(--jacquard),
    radial-gradient(circle at 50% 0%, rgba(255,250,241,.42), transparent 28rem),
    linear-gradient(180deg, #9fc8c5 0%, #7faba9 46%, #6d9b98 100%);
  background-size: 180px 180px, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Sticky Nav ── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 52px;
  background: linear-gradient(90deg, rgba(72,121,118,.97), rgba(127,171,169,.94));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,250,241,.3);
  box-shadow: 0 2px 18px rgba(55,88,86,.28);
}

.nav-logo {
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 900;
  font-size: .85rem;
  color: var(--cream);
  text-decoration: none;
  letter-spacing: .04em;
  -webkit-text-stroke: .3px rgba(15,13,12,.7);
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  display: block;
  padding: 6px 9px;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-size: .68rem;
  font-weight: 700;
  color: rgba(255,250,241,.88);
  text-decoration: none;
  border-radius: 999px;
  letter-spacing: .06em;
  transition: background .16s, color .16s;
  white-space: nowrap;
}

.nav-links a:hover {
  background: rgba(255,250,241,.16);
  color: var(--cream);
}

.nav-shop {
  background: linear-gradient(135deg, var(--cream), #e5d9c7) !important;
  color: var(--ink) !important;
  font-weight: 900 !important;
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: inset 0 0 0 1px rgba(76,125,122,.2);
  font-size: .7rem !important;
}

.nav-shop:hover {
  background: var(--cream) !important;
  color: var(--teal-dark) !important;
}

/* ── Pending / Notice ── */
.notice-pending {
  display: block;
  font-size: .72rem;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 400;
  color: rgba(255,250,241,.75);
  margin-top: 8px;
  letter-spacing: .03em;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

.badge-pending {
  display: inline-block;
  background: rgba(160,100,40,.9);
  color: var(--cream);
  font-size: .6rem;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: .04em;
  vertical-align: middle;
  margin-left: 4px;
}

.card-notice {
  display: block;
  font-size: .74rem;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  color: var(--ink-muted);
  margin-top: 5px;
  font-style: italic;
}

/* ── Hero ── */
.hero {
  position: relative;
  min-height: 540px;
  padding: 80px 96px 72px;
  text-align: center;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(127,171,169,.06), rgba(111,157,154,.12)),
    var(--jacquard),
    radial-gradient(circle at 50% 35%, rgba(255,250,241,.5), transparent 15rem),
    linear-gradient(145deg, #a7cbc8, #7faba9 55%, #689693);
  background-size: auto, 190px 190px, auto, auto;
  background-repeat: no-repeat, repeat, no-repeat, no-repeat;
  border-bottom: 1px solid rgba(255,250,241,.62);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  top: 16px; bottom: 16px;
  width: 64px;
  background: var(--ribbon-pattern);
  background-size: 64px auto;
  border-left: 1px solid rgba(255,250,241,.44);
  border-right: 1px solid rgba(76,125,122,.36);
  box-shadow: 0 12px 32px rgba(55,88,86,.28);
  opacity: .88;
}

.hero::before { left: 16px; }
.hero::after  { right: 16px; }
.hero > * { position: relative; z-index: 1; }
.hero-inner { display: grid; gap: 0; }

.eyebrow {
  display: inline-block;
  justify-self: center;
  padding: 6px 16px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--teal-dark);
  background: rgba(255,250,241,.84);
  border-radius: 999px;
  font-size: .7rem;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
}

h1 {
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-size: clamp(2rem, 12vw, 4.4rem);
  font-weight: 900;
  color: var(--cream);
  margin: .3em 0;
  letter-spacing: .04em;
  -webkit-text-stroke: 1.2px rgba(18,15,13,.9);
  text-shadow:
    0 2px 0 rgba(18,15,13,.95),
    1px 1px 0 rgba(18,15,13,.9),
    -1px 1px 0 rgba(18,15,13,.9),
    1px -1px 0 rgba(18,15,13,.9),
    -1px -1px 0 rgba(18,15,13,.9),
    0 5px 16px rgba(0,0,0,.82),
    0 0 26px rgba(255,250,241,.18);
}

.catch {
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-size: clamp(.9rem, 3vw, 1.1rem);
  font-weight: 800;
  color: var(--cream);
  line-height: 1.9;
  letter-spacing: .04em;
  margin-bottom: 1.6em;
  -webkit-text-stroke: .35px rgba(18,15,13,.86);
  text-shadow:
    0 1px 0 rgba(18,15,13,.95),
    1px 1px 0 rgba(18,15,13,.8),
    -1px 1px 0 rgba(18,15,13,.8),
    0 3px 12px rgba(0,0,0,.82);
}

/* ── CTA Buttons ── */
.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.btn {
  display: inline-block;
  padding: 12px 24px;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-size: .88rem;
  font-weight: 800;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.45);
  transition: transform .15s, box-shadow .15s, filter .15s;
  cursor: pointer;
  letter-spacing: .03em;
}

.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.22); }
.btn:active { transform: translateY(0); }

.btn-primary {
  color: var(--ink);
  background: linear-gradient(135deg, #fffaf1, #e5d9c7);
  box-shadow: inset 0 0 0 1px rgba(76,125,122,.2), 0 3px 10px rgba(0,0,0,.18);
}

.btn-shop {
  color: var(--cream);
  background: linear-gradient(135deg, #3a7370, #4c897d);
  border-color: rgba(255,250,241,.3);
  box-shadow: 0 3px 10px rgba(0,0,0,.22);
}

.btn-shop:hover { filter: brightness(1.12); }

.btn-instagram {
  color: var(--cream);
  background: linear-gradient(135deg, #5c6bc0, #7b5ea7);
  border-color: rgba(255,250,241,.2);
  box-shadow: 0 3px 10px rgba(0,0,0,.2);
}

.btn-creema {
  color: var(--cream);
  background: linear-gradient(135deg, #e25c6a, #c44d5a);
  border-color: rgba(255,250,241,.2);
  box-shadow: 0 3px 10px rgba(0,0,0,.2);
}

.btn-outline {
  color: var(--teal-dark);
  background: rgba(255,250,241,.82);
  border-color: rgba(76,125,122,.4);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.btn-sm {
  padding: 8px 18px;
  font-size: .8rem;
}

/* ── News Bar ── */
.news-bar {
  background:
    linear-gradient(rgba(255,250,241,.72), rgba(255,250,241,.82)),
    var(--jacquard),
    linear-gradient(135deg, #a7cbc8, #7faba9);
  background-size: auto, 120px 120px, auto;
  background-repeat: no-repeat, repeat, no-repeat;
  border-bottom: 1px solid rgba(76,125,122,.22);
  padding: 0;
}

.news-bar-inner {
  max-width: var(--section-max);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.news-bar-label {
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .16em;
  color: var(--teal-dark);
  padding: 3px 10px;
  background: rgba(76,125,122,.14);
  border: 1px solid rgba(76,125,122,.3);
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}

.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.news-item {
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  font-size: .78rem;
  color: var(--ink-light);
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.5;
}

.news-tag {
  display: inline-block;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}

.news-tag.info  { background: rgba(76,125,122,.15); color: var(--teal-dark); border: 1px solid rgba(76,125,122,.25); }
.news-tag.event { background: rgba(90,60,40,.1); color: #5a3c28; border: 1px solid rgba(90,60,40,.2); }
.news-tag.order { background: rgba(92,107,192,.1); color: #3d4ea0; border: 1px solid rgba(92,107,192,.22); }

/* ── Main layout ── */
main {
  padding: 0 0 56px;
}

/* ── Section Base ── */
section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,250,241,.68), rgba(255,250,241,.82)),
    var(--jacquard),
    linear-gradient(135deg, #a7cbc8, #7faba9);
  background-size: auto, 170px 170px, auto;
  background-repeat: no-repeat, repeat, no-repeat;
  border: 1px solid rgba(255,250,241,.55);
  border-radius: 14px;
  margin: 20px 18px 0;
  box-shadow: 0 16px 36px rgba(55,88,86,.18);
}

section::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 34px;
  background: var(--ribbon-pattern);
  background-size: 48px auto;
  opacity: .65;
  border-right: 1px solid rgba(76,125,122,.22);
  pointer-events: none;
  z-index: 0;
}

.section-inner {
  position: relative;
  margin-left: 34px;
}

/* ── Section Header ── */
h2.section-heading {
  position: relative;
  margin: 0;
  padding: 14px 20px 15px 54px; /* 34px ribbon + 20px gap */
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-size: clamp(1rem, 3vw, 1.15rem);
  font-weight: 900;
  color: var(--cream);
  background:
    linear-gradient(90deg, rgba(72,121,118,.93), rgba(127,171,169,.7)),
    var(--ribbon-pattern);
  background-size: auto, 64px auto;
  border-bottom: 1px solid rgba(255,250,241,.4);
  -webkit-text-stroke: .35px rgba(15,13,12,.82);
  text-shadow: 0 1px 0 rgba(15,13,12,.95), 0 3px 10px rgba(0,0,0,.75);
  letter-spacing: .1em;
}

h2.section-heading .en {
  font-size: .6em;
  font-weight: 400;
  -webkit-text-stroke: 0;
  text-shadow: none;
  opacity: .78;
  margin-left: .7em;
  letter-spacing: .15em;
}

h2.section-heading::after {
  content: "✦ ✧ ✦";
  display: block;
  margin-top: 5px;
  color: rgba(255,250,241,.78);
  font-size: .7rem;
  letter-spacing: .5em;
  font-weight: 400;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.section-body {
  padding: 24px 22px 28px;
}

/* Concept: lead quote */
.concept-lead {
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-size: clamp(1rem, 3.5vw, 1.25rem);
  font-weight: 800;
  color: var(--teal-dark);
  line-height: 1.9;
  margin: 0 0 1em;
  letter-spacing: .05em;
  border-left: 3px solid rgba(76,125,122,.5);
  padding-left: 14px;
}

.concept-body {
  font-size: .92rem;
  line-height: 1.95;
  color: var(--ink);
  margin: 0;
}

/* ── Collection ── */
.collection-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.collection-card {
  background:
    linear-gradient(rgba(255,250,241,.5), rgba(255,250,241,.68)),
    var(--jacquard);
  background-size: auto, 120px 120px;
  border: 1px solid rgba(76,125,122,.25);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.collection-card-image {
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(rgba(76,125,122,.18), rgba(76,125,122,.34)),
    var(--jacquard),
    var(--ribbon-pattern);
  background-size: auto, 120px 120px, 48px auto;
  background-repeat: no-repeat, repeat, repeat;
  display: grid;
  place-items: center;
  color: rgba(255,250,241,.72);
  font-size: .72rem;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  letter-spacing: .1em;
}

.collection-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.collection-card-body {
  padding: 12px 14px 14px;
  flex: 1;
}

.collection-card-icon {
  font-size: 1.4rem;
  display: block;
  margin-bottom: 6px;
}

.collection-card-name {
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: .88rem;
  color: var(--teal-dark);
  display: block;
  margin-bottom: 4px;
}

.collection-card-desc {
  font-size: .78rem;
  color: var(--ink-light);
  line-height: 1.65;
  display: block;
}

.collection-note {
  margin-top: 14px;
  font-size: .82rem;
  color: var(--ink-light);
}

.collection-note a { color: var(--teal-dark); font-weight: 700; }

/* ── Maker's Message ── */
.maker-inner {
  display: flex;
  gap: 22px;
  align-items: flex-start;
}

.maker-photo {
  width: 130px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background:
    linear-gradient(rgba(76,125,122,.2), rgba(76,125,122,.38)),
    var(--jacquard),
    var(--ribbon-pattern);
  background-size: auto, 120px 120px, 48px auto;
  background-repeat: no-repeat, repeat, repeat;
  display: grid;
  place-items: center;
  color: rgba(255,250,241,.65);
  font-size: .72rem;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  text-align: center;
  letter-spacing: .08em;
  border: 1px solid rgba(255,250,241,.5);
}

.maker-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.maker-text { flex: 1; }

.maker-quote {
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-size: .94rem;
  font-weight: 800;
  color: var(--teal-dark);
  line-height: 1.85;
  margin: 0 0 .8em;
  letter-spacing: .04em;
}

.maker-body {
  font-size: .88rem;
  line-height: 1.9;
  color: var(--ink-light);
  margin: 0;
}

/* ── Semi Order ── */
.semi-order-tagline {
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-size: clamp(1rem, 3.5vw, 1.22rem);
  font-weight: 900;
  color: var(--teal-dark);
  line-height: 1.75;
  margin: 0 0 .6em;
  letter-spacing: .04em;
}

.semi-order-sub {
  font-size: .88rem;
  color: var(--ink-light);
  margin: 0 0 16px;
  line-height: 1.7;
}

.semi-order-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.semi-order-list li {
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  font-size: .85rem;
  color: var(--ink);
  padding: 7px 12px;
  background: rgba(255,250,241,.55);
  border: 1px solid rgba(76,125,122,.2);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.semi-order-list li::before {
  content: "✦";
  color: var(--teal-mid);
  font-size: .72rem;
  flex-shrink: 0;
}

/* ── Gallery ── */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.gallery-item {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px solid rgba(255,250,241,.6);
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(rgba(76,125,122,.16), rgba(76,125,122,.32)),
    var(--jacquard),
    var(--ribbon-pattern);
  background-size: auto, 150px 150px, 64px auto;
  background-repeat: no-repeat, repeat, repeat;
  color: rgba(255,250,241,.72);
  font-size: .72rem;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  letter-spacing: .1em;
}

.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Events ── */
.event-card {
  background:
    linear-gradient(rgba(255,250,241,.52), rgba(255,250,241,.68)),
    var(--jacquard);
  background-size: auto, 120px 120px;
  border: 1px solid rgba(76,125,122,.25);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 10px 0;
}

.event-date {
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 900;
  font-size: .9rem;
  color: var(--teal-dark);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}

.event-name {
  font-size: .86rem;
  color: var(--ink);
  margin: 0;
  line-height: 1.6;
}

.event-badge {
  display: inline-block;
  background: var(--teal-dark);
  color: var(--cream);
  font-size: .62rem;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: .06em;
}

/* ── FAQ ── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.faq-item {
  border-bottom: 1px solid rgba(76,125,122,.18);
  padding: 14px 0;
}

.faq-item:first-child { padding-top: 4px; }
.faq-item:last-child  { border-bottom: none; padding-bottom: 0; }

.faq-q {
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: .9rem;
  color: var(--teal-dark);
  margin: 0 0 6px;
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.faq-q::before {
  content: "Q.";
  font-size: .78rem;
  font-weight: 900;
  color: var(--teal-mid);
  flex-shrink: 0;
}

.faq-a {
  font-size: .86rem;
  color: var(--ink-light);
  line-height: 1.8;
  margin: 0;
  padding-left: 20px;
}

.faq-a a { color: var(--teal-dark); font-weight: 700; }

/* ── Contact Grid ── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.contact-card {
  background: rgba(255,250,241,.55);
  border: 1px solid rgba(76,125,122,.22);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.contact-card .contact-label {
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 700;
  font-size: .72rem;
  color: var(--teal-dark);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.contact-card .contact-desc {
  font-size: .8rem;
  color: var(--ink-light);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

.contact-card .btn { width: 100%; text-align: center; }

/* ── Section utility ── */
p.section-note {
  font-size: .8rem;
  color: var(--ink-muted);
  line-height: 1.75;
  margin: 10px 0 0;
}

p.section-note a { color: var(--teal-dark); font-weight: 700; }

/* ── Footer ── */
footer {
  text-align: center;
  padding: 36px 18px 32px;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-size: .73rem;
  color: rgba(255,250,241,.68);
  border-top: 1px solid rgba(255,250,241,.18);
  background: rgba(55,88,86,.18);
  letter-spacing: .06em;
  margin-top: 24px;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

footer a { color: rgba(255,250,241,.78); text-decoration: none; }
footer a:hover { color: var(--cream); }

/* ── Scroll anchor offset ── */
[id] { scroll-margin-top: 62px; }

/* ── Responsive ── */
@media (min-width: 640px) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
  .collection-grid { grid-template-columns: repeat(3, 1fr); }
  .maker-photo { width: 160px; }
}

@media (min-width: 900px) {
  section { margin: 24px auto 0; max-width: calc(var(--section-max) + 36px + 36px); }
  .collection-grid { grid-template-columns: repeat(5, 1fr); }
}

/* タブレット */
@media (max-width: 720px) {
  .collection-grid { grid-template-columns: repeat(2, 1fr); }
}

/* スマホ標準（〜560px） */
@media (max-width: 560px) {
  .hero { min-height: 500px; padding: 72px 66px 64px; }
  .hero::before, .hero::after { width: 50px; background-size: 50px auto; }
  .hero::before { left: 10px; }
  .hero::after  { right: 10px; }
  h1 { font-size: 2rem; }

  /* Nav: テキストリンクを非表示、ロゴ + Online Shop のみ */
  .site-nav { padding: 0 12px; }
  .nav-links li:not(:last-child) { display: none; }
  .nav-links { gap: 0; }

  /* CTA 縦並び */
  .cta { flex-direction: column; align-items: center; }
  .cta .btn { width: 100%; max-width: 300px; text-align: center; }

  /* News bar */
  .news-bar-inner { flex-direction: column; gap: 10px; padding: 12px 16px; }

  /* Contact grid 1カラム */
  .contact-grid { grid-template-columns: 1fr; }

  /* Maker layout 縦積み */
  .maker-inner { flex-direction: column; align-items: center; }
  .maker-photo { width: 120px; }
  .maker-text { text-align: center; }
}

/* スマホ小型（〜400px） */
@media (max-width: 400px) {
  .hero { padding: 72px 54px 64px; }
  .hero::before, .hero::after { width: 42px; background-size: 42px auto; }
  .hero::before { left: 6px; }
  .hero::after  { right: 6px; }
  .collection-grid { grid-template-columns: 1fr; }
}