/* ==========================================================
   KUON / 久遠 公式サイト TOP — top.css（自己完結）
   出典: qa/uiux/20260802_TOP実装/_work/top_4k.png の機械実測
   （色=median採取・座標=金線/色距離検出。2026-08-02）
   モバイル型1カラムモック(941×1672・本体752px)を1:1レイアウトで再現し、
   デスクトップは黒地に中央寄せで見せる。
   ========================================================== */
:root {
  --page-w: 752px;
  --navy-header: var(--kuon-navy-header);   /* ヘッダー・実測(1,12,32) */
  --navy-deep: var(--kuon-navy-deep);       /* できること帯・実測(4,23,48) */
  --navy-nav: var(--kuon-navy-nav);          /* 下部ナビ・実測(1,20,44) */
  --navy-card: var(--kuon-navy-card);        /* 紺カード類 */
  --cream-band: var(--kuon-cream-band);      /* ギャラリー〜お知らせ帯・実測(237,223,209) */
  --cream-about: var(--kuon-cream-about);    /* ABOUT帯・実測(237,225,212) */
  --orange-cta: var(--kuon-orange);          /* CTA朱・実測 */
  --gold-line: var(--kuon-gold);
  --gold-bright: var(--kuon-gold-bright);
  --ink-900: var(--kuon-ink-900);
  --ink-700: var(--kuon-ink-700);
  --ink-dim: var(--kuon-ink-dim);
  --on-navy: var(--kuon-on-navy);
  --on-navy-dim: var(--kuon-on-navy-dim);
  --font-serif-jp: var(--kuon-font-jp);
  --font-serif-en: var(--kuon-font-en);
  --paw-svg: var(--kuon-paw-svg);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-serif-jp);
  font-size: 16px; line-height: 1.8;
  color: var(--ink-700);
  background-color: #010c20;
}
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { padding: 0; font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: clip;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

/* ---------- ページ枠（黒地に中央寄せ） ---------- */
.page { max-width: var(--page-w); margin: 0 auto; background: var(--navy-deep); }

/* ---------- ヒーロー（全面焼き込み＋透明リンク） ---------- */
.hero { position: relative; }
.hero__img { width: 100%; }
.hero__link { position: absolute; display: block; min-height: 44px; border-radius: 8px; }
.hero__link--about  { left: 5.5%;  top: 69.4%; width: 21.0%; height: 15.3%; }
.hero__link--support{ left: 27.2%; top: 70.4%; width: 26.0%; height: 14.4%; }
.hero__link:hover { cursor: pointer; }

/* ヒーロー直下のモバイル実ボタン（焼き込みボタンが小さすぎるモバイルだけ表示） */
.hero-mbtns { display: none; }
@media (max-width: 700px) {
  .hero__link { display: none; }
  .hero-mbtns { display: flex; gap: 10px; padding: 12px 16px 4px; background: var(--navy-deep); }
  .hero-mbtns a, .hero-mbtns button {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 12px 6px; font-size: 15px; letter-spacing: .06em; border-radius: 8px; white-space: normal; text-align: center;
  }
  .hero-mbtns .m-about {
    background: linear-gradient(180deg, #16294a, #0d2242); color: var(--on-navy);
    border: 1px solid rgba(201,160,99,.65);
  }
  .hero-mbtns .m-support { background: var(--orange-cta); color: #fdf6ea; border: 1px solid rgba(246,233,218,.5); }
}

/* ---------- セクション見出し（飾り線＋肉球） ---------- */
.sec-head {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 22px; font-weight: 600; letter-spacing: .14em; line-height: 1.4;
  color: var(--ink-900); white-space: nowrap; min-width: 0;
}
.sec-head--on-navy { color: var(--on-navy); font-size: 23px; }
.sec-head .line { flex: 0 1 96px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line)); }
.sec-head .line--r { background: linear-gradient(90deg, var(--gold-line), transparent); }
.sec-head .dia { color: var(--gold-line); font-size: 13px; flex: none; }

/* 見出し行（左右に「すべて見る」を伴う型） */
.sec-bar { position: relative; margin-bottom: 12px; }
.sec-bar .more {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  min-height: 44px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; letter-spacing: .08em; color: var(--ink-dim);
}
.sec-bar .more:hover { color: var(--ink-900); }

/* ---------- ABOUT ---------- */
.about {
  background: var(--cream-about);
  margin: 8px 8px 12px; padding: 12px 12px 14px; /* 下12px=金縁リング(4px)がdekiru焼き込み画像に被らない余白 */
  border: 1px solid rgba(160,120,70,.5); border-radius: 10px;
  box-shadow: 0 0 0 3px var(--cream-about), 0 0 0 4px rgba(160,120,70,.3);
}
.about__grid {
  display: grid; grid-template-columns: 196px 1fr 226px;
  gap: 12px; align-items: center;
}
.about__figure img { border-radius: 6px; }
.about__body { text-align: center; }
.about__title { font-size: 22px; letter-spacing: .18em; color: var(--ink-900); font-weight: 600; }
.about__en {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  color: #8a6f3f; font-family: var(--font-serif-en);
  font-size: 12px; letter-spacing: .28em; margin: 6px 0 10px; white-space: nowrap;
}
.about__en::before, .about__en::after { content: "❖ ―"; color: var(--gold-line); font-size: 10px; letter-spacing: .1em; }
.about__en::after { content: "― ❖"; }
.about__text { font-size: 16px; line-height: 1.75; color: var(--ink-700); }
.btn-navy {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; margin-top: 12px; padding: 7px 28px;
  background: linear-gradient(180deg, #1c3050, #0f2140);
  color: var(--on-navy); font-size: 15px; letter-spacing: .12em;
  border: 1px solid rgba(201,160,99,.6); border-radius: 6px;
  box-shadow: 0 0 0 3px #0f2140, 0 0 0 4px rgba(201,160,99,.35);
}
.btn-navy:hover { background: linear-gradient(180deg, #24395c, #16294a); }

/* ---------- 久遠ができること（参考画像20260803 完全再現） ----------
   PC: 全面焼き込み(dekiru_full 1882×836)＋カード枠実測の透明リンク
       （枠x=78/512/964/1402 幅405-407 y=150-828 → %換算）
   モバイル: 見出し帯＋肉球飾り＋カード4枚の部品クロップ2列 */
.dekiru { background: var(--navy-deep); }
.dekiru__full { position: relative; }
.dekiru__full picture, .dekiru__full > img { width: 100%; }
.dekiru__full picture > img { width: 100%; }
.dekiru__hit { position: absolute; display: block; top: 17.9%; height: 81.1%; border-radius: 12px; }
.dekiru__hit--1 { left: 4.15%;  width: 21.52%; }
.dekiru__hit--2 { left: 27.20%; width: 21.57%; }
.dekiru__hit--3 { left: 51.22%; width: 21.63%; }
.dekiru__hit--4 { left: 74.50%; width: 21.63%; }
.dekiru__mb { display: none; }

/* ---------- 生成り帯（ギャラリー〜お知らせ） ---------- */
.cream-band { background: var(--cream-band); border-radius: 14px; }

/* ---------- ギャラリー ---------- */
.gallery { padding: 14px 18px 4px; }
.gallery__row { position: relative; padding: 0 24px; }
.gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gallery__grid :is(a, button) { aspect-ratio: 159 / 145; display: block; overflow: hidden; border-radius: 8px; border: 1px solid rgba(160,120,70,.45); }
.gallery__grid :is(a, button) img { width: 100%; height: 100%; object-fit: cover; }
.gallery__grid :is(a, button):hover img { filter: brightness(1.06); }
.gallery__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  min-width: 44px; min-height: 44px; display: grid; place-items: center;
  color: #8a6f3f; font-size: 26px; line-height: 1; padding: 0;
}
.gallery__arrow--l { left: -2px; }
.gallery__arrow--r { right: -2px; }
.gallery__arrow:hover { color: var(--ink-900); }
.dots { display: flex; justify-content: center; gap: 10px; padding: 12px 0 0; }
.dots span { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #8a6f3f; display: inline-block; }
.dots .is-active { background: #16294a; border-color: #16294a; }

/* ---------- グッズ（参考画像20260803 完全再現） ----------
   PC: 全面焼き込み(goods_full 1672×941)＋枠実測の透明リンク
       （枠x=79-425/462-818/850-1200/1233-1580 y=253-775・すべて見る x1419-1620 y80-138 → %換算）
   モバイル: goods_mb(1122×1402)全面焼き込み＋2×2枠透明リンク
       （枠x=30-554/568-1092 y=262-801/815-1330 → %換算） */
.goods { padding: 6px 0 0; }
.goods__full { position: relative; }
.goods__full picture, .goods__full > img { width: 100%; }
.goods__full picture > img { width: 100%; }
.goods__hit { position: absolute; display: block; border-radius: 10px; }
.goods__hit--more { left: 84.87%; top: 8.50%; width: 12.02%; height: 6.16%; min-height: 44px; }
.goods__hit--1 { left: 4.72%;  top: 26.89%; width: 20.69%; height: 55.47%; }
.goods__hit--2 { left: 27.63%; top: 26.89%; width: 21.29%; height: 55.47%; }
.goods__hit--3 { left: 50.84%; top: 26.89%; width: 20.93%; height: 55.47%; }
.goods__hit--4 { left: 73.74%; top: 26.89%; width: 20.75%; height: 55.47%; }
.goods__mb { display: none; }


/* ---------- 最新のお知らせ ---------- */
.news { padding: 6px 12px 16px; }
.news__panel {
  background: #efe3d3; border: 1px solid rgba(160,120,70,.5); border-radius: 10px;
  padding: 14px 18px 6px; box-shadow: 0 0 0 3px #efe3d3, 0 0 0 4px rgba(160,120,70,.28);
}
.news__list :is(a, button) {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 2px; border-bottom: 1px dotted rgba(140,105,60,.45);
}
.news__list li:last-child :is(a, button) { border-bottom: none; }
.news__list :is(a, button):hover { background: rgba(201,160,99,.10); }
.news__list button { width: 100%; text-align: left; }
.news__thumb { width: 80px; flex: none; border-radius: 5px; border: 1px solid rgba(160,120,70,.4); }
.news__date { flex: none; font-size: 14px; letter-spacing: .04em; color: var(--ink-900); font-family: var(--font-serif-en); }
.badge {
  flex: none; font-size: 12px; letter-spacing: .06em; line-height: 1.6;
  padding: 1px 10px; border-radius: 4px; color: #f2e6d2;
}
.badge--new { background: #a24408; color: #fff; }
.badge--navy { background: #0a1f3a; }
.news__title {
  flex: 1; min-width: 0; font-size: 15px; color: var(--ink-900); letter-spacing: .03em;
  overflow-wrap: anywhere;
}
.news__chev { flex: none; color: #8a6f3f; font-size: 18px; }

/* ---------- PC左右余白の背景（A案: 金線和文様・リツト採用 2026-08-02） ---------- */
@media (min-width: 753px) {
  body {
    background: #010c20 url("../img/bg_pc.jpg") center / cover no-repeat fixed;
  }
}

/* ---------- PC拡大表示（B案採用 2026-08-02) ---------- */
@media (min-width: 1100px) {
  .page { zoom: 1.35; }
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 700px) {
  .sec-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .sec-bar .sec-head { font-size: 19px; gap: 8px; justify-content: flex-start; white-space: normal; }
  .sec-bar .sec-head .line { display: none; }
  .sec-bar .more { position: static; transform: none; flex: none; }
  .about__grid { grid-template-columns: 1fr 1fr; }
  .about__figure { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px; }
  .about__figure img { width: 100%; height: 100%; object-fit: cover; }
  .about__body { grid-column: 1 / -1; order: -1; }
  .about__figure { justify-self: center; }
  .dekiru__full { display: none; }
  .dekiru__mb { display: block; padding: 16px 14px 20px; }
  .dekiru__mhead { width: min(92%, 430px); height: auto; margin: 0 auto; }
  .dekiru__morn { width: 118px; height: auto; margin: 4px auto 10px; }
  .dekiru__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .dekiru__grid :is(a, button) { display: block; }
  .dekiru__grid img { width: 100%; height: auto; }
  .gallery__grid { grid-template-columns: 1fr 1fr; }
  .goods { padding: 6px 0 0; }
  .goods__full { display: none; }
  .goods__mb { display: block; position: relative; }
  .goods__mb picture, .goods__mb > img { width: 100%; }
  .goods__mb picture > img { width: 100%; }
  .goods__hitb--1 { left: 2.67%;  top: 18.69%; width: 46.70%; height: 38.45%; }
  .goods__hitb--2 { left: 50.62%; top: 18.69%; width: 46.70%; height: 38.45%; }
  .goods__hitb--3 { left: 2.67%;  top: 58.13%; width: 46.70%; height: 36.73%; }
  .goods__hitb--4 { left: 50.62%; top: 58.13%; width: 46.70%; height: 36.73%; }
  .sec-head { font-size: 20px; }
  .sec-head .line { flex-basis: 40px; }
}
@media (max-width: 560px) {
  .news__list :is(a, button) { flex-wrap: wrap; row-gap: 4px; padding: 10px 2px; }
  .news__chev { display: none; }
  .news__title { flex-basis: 100%; }
}
@media (max-width: 360px) {
  .hero-mbtns { gap: 6px; padding-inline: 10px; }
  .hero-mbtns a, .hero-mbtns button {
    min-width: 0; gap: 4px; padding-inline: 2px; font-size: 12px; letter-spacing: 0;
  }
}

/* ---------- アクセシビリティ: 動きの低減設定を尊重 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}