/* =========================================================
   UNREASONED Links — リンクまとめ
   正は design-system.md。トークンと部品は EC（ec-theme/css/ds.css v1.7）から写す
   色の値はこの :root にだけ書く
   - 地：墨（--ink）1色（依頼者の指定）。背景の写真は暗く落として地に沈める（afterglow と同じ）
   - 文字：明朝・セリフ（Instrument Serif ＋ ひな明朝）。白
   - 部品：行き先の面は EC の誘導の面（.go）。暗い地なので EC の CONCEPT と同じ明るいスリガラス（glass--night）
   ========================================================= */
:root {
  --white: #FFFFFF;
  --paper: #F2F4F4;
  --ink: #111111;
  --smoke: #A3A3A3;

  /* 暗い地の上の誘導の面（EC の CONCEPT と同じ） */
  --glass-night: rgb(255 255 255 / .1);
  --glass-night-strong: rgb(255 255 255 / .18);
  --blur: blur(16px) saturate(140%);
  /* 背景の写真を地に沈める明るさ */
  --photo-tone: brightness(.6);

  /* 行き先のマーク（ロゴから文字を外した黒の透過PNG。EC と同じ画像） */
  --mark-brand: url("assets/mark-brand.png");
  --mark-clothes: url("assets/mark-clothes.png");
  --mark-books: url("assets/mark-books.png");
  --mark-records: url("assets/mark-records.png");

  --font-head: "YakuHanMP", "Instrument Serif", "Hina Mincho", serif;

  --ls-0: 0;
  --ls-text: .04em;
  --ls-ui: .08em;

  --radius: 4px;

  --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-24: 24px; --sp-32: 32px; --sp-40: 40px;
  --sp-48: 48px; --sp-64: 64px;

  /* 1列だけのページなので、どの幅でも4列。中身の幅は最大560 */
  --grid-cols: 4; --grid-margin: 16px; --grid-gutter: 16px; --wrap-max: 592px;

  /* 背景の写真（ブランドサイト Clothes のメインビジュアル）の寸法。
     元の画像ではロゴが幅の 20.4%、縦横の中央にある。ロゴがその空きに戻る大きさで写真を敷く */
  --logo-w: 176px;
  --bg-w: calc(var(--logo-w) / .204);
  --bg-h: calc(var(--bg-w) * .5626);
  --logo-top: calc(var(--bg-h) / 2 - var(--logo-w) * .299);

  --dur-ui: 160ms; --ease: cubic-bezier(.2, .6, .2, 1);
}
@media (min-width: 768px) {
  :root { --grid-margin: 32px; --grid-gutter: 24px; --wrap-max: 624px; --logo-w: 208px; }
}
@media (min-width: 1024px) {
  :root { --grid-margin: 40px; --wrap-max: 640px; --logo-w: 240px; }
}

/* =========================================================
   Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--white); font-family: var(--font-head); font-size: 16px; line-height: 24px; letter-spacing: var(--ls-text); font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, ul { margin: 0; padding: 0; }
ul { list-style: none; }
:focus-visible { outline: 1px solid var(--white); outline-offset: 4px; }

/* =========================================================
   Page
   ========================================================= */
.lk { min-height: 100svh; overflow-x: clip; }
.lk__in { width: 100%; max-width: var(--wrap-max); margin-inline: auto; padding-inline: var(--grid-margin); display: flex; flex-direction: column; align-items: center; text-align: center; }

/* 背景の写真：ロゴ〜SNSの後ろに敷き、暗く落として、下へ向けて墨の地に溶かす（afterglow のリンク集と同じ使い方）。
   上段の服とロゴの空きだけを見せ、下段の服（写真の 60% から下）が透けて残る前に消し切る。
   スマホ・タブレットは画面の幅で左右を切る。写真の幅より画面が広いときは、左右も紙色に溶かす。
   下端の 2px は切る（動き（transform）の付いた層では、マスクしていても写真の最後の1行が薄く出て線になるため。下端はもともと透明） */
.lk__hero { position: relative; isolation: isolate; }
.lk__bg { position: absolute; z-index: -1; top: 0; left: 50%; translate: -50% 0; width: min(100%, var(--bg-w)); max-width: none; height: var(--bg-h); object-fit: cover; object-position: 50% 50%; clip-path: inset(0 0 2px 0); filter: var(--photo-tone); pointer-events: none;
  -webkit-mask: linear-gradient(#000 36%, transparent 60%) 0 0 / 100% 100% no-repeat; mask: linear-gradient(#000 36%, transparent 60%) 0 0 / 100% 100% no-repeat; }
@media (min-width: 768px) {
  .lk__bg {
    -webkit-mask: linear-gradient(#000 36%, transparent 60%) 0 0 / 100% 100% no-repeat, linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent) 0 0 / 100% 100% no-repeat;
    mask: linear-gradient(#000 36%, transparent 60%) 0 0 / 100% 100% no-repeat, linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent) 0 0 / 100% 100% no-repeat;
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
}
/* スクロールすると、写真はゆっくり寄りながら少し遅れて下がり、消える（CSSだけ。使えないブラウザでは止まったまま）。
   afterglow より下がる量を抑え（8%）、早めに消す（ロゴ〜SNSの 80% が抜けるまで）。上段の服がロゴの空きに入って重ならないようにするため */
@supports (animation-timeline: view()) {
  .lk__hero { view-timeline: --lk-hero block; }
  .lk__bg { transform-origin: 50% 32%; animation: lk-photo linear both; animation-timeline: --lk-hero; animation-range: exit 0% exit 80%; }
}
@keyframes lk-photo {
  to { transform: translateY(8%) scale(1.12); opacity: 0; }
}

/* ロゴは元の画像でロゴがあった空き（写真の中央）に置く。暗い地なので白抜き（ブランドサイトのトップと同じ） */
.lk__head { padding-top: var(--logo-top); }
.lk__logo { width: var(--logo-w); }
.lk__logo img { width: 100%; }
/* 紹介文は欧文1行。Instrument Serif は字面が小さいので、EC のキャッチ（PC）と同じ 20/32 */
.lk__bio { margin-top: var(--sp-24); font-size: 20px; line-height: 32px; letter-spacing: var(--ls-text); }

/* SNS：EC のフッターの FOLLOW と同じ（Simple Icons・CC0、20px、押せる範囲 44×44）。最後はお問い合わせ（ブランドサイトのお問い合わせページ）で、同じ太さで描いた封筒 */
.lk__sns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-16); }
.lk__sns a { display: grid; place-items: center; width: 44px; height: 44px; transition: opacity var(--dur-ui) var(--ease); }
.lk__sns a:hover { opacity: .56; }
.lk__sns svg { width: 20px; height: 20px; fill: currentColor; }

/* =========================================================
   行き先：EC の誘導の面（.go）。左にマーク、名前と説明、右に矢印（別のサイトなので ↗）
   暗い地なので EC の CONCEPT と同じ明るいスリガラス（glass--night）にし、マークは反転して白に。
   いちばん来てほしいオンラインショップだけ、EC の地の紙色の面（行き先のショップの色）にする
   ========================================================= */
/* 写真の箱は行き先の上端まで伸びるので、行き先を写真より手前に置く */
.lk__body { position: relative; padding-bottom: calc(var(--sp-48) + env(safe-area-inset-bottom)); }
.lk__list { display: grid; gap: var(--sp-8); width: 100%; margin-top: var(--sp-40); }
.go { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-16); min-height: 96px; padding: var(--sp-24); text-align: left; transition: background-color var(--dur-ui) var(--ease); }
.go__mark { grid-row: 1 / span 2; width: 32px; height: 48px; background: var(--m) center / contain no-repeat; }
.go__title { grid-column: 2; font-size: 24px; line-height: 32px; letter-spacing: var(--ls-0); }
.go__text { grid-column: 2; font-size: 12px; line-height: 16px; letter-spacing: var(--ls-ui); }
.go svg { grid-column: 3; grid-row: 1 / span 2; width: 24px; height: 24px; }
.go:active { transform: translateY(1px); }
.go__mark--brand { --m: var(--mark-brand); }
.go__mark--clothes { --m: var(--mark-clothes); }
.go__mark--books { --m: var(--mark-books); }
.go__mark--records { --m: var(--mark-records); }

.glass--night { background: var(--glass-night); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-radius: var(--radius); color: var(--white); }
.glass--night:hover { background: var(--glass-night-strong); }
/* 黒のマークを、暗い面では反転して白に */
.glass--night .go__mark { filter: invert(1); }
.paper { background: var(--paper); border-radius: var(--radius); color: var(--ink); }
.paper:hover { background: var(--white); }

.lk__c { margin-top: var(--sp-64); font-size: 12px; line-height: 16px; letter-spacing: var(--ls-text); color: var(--smoke); }

/* =========================================================
   Motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}