@font-face {
  font-family: "BrauerLL";
  src: url("../ref/fonts/BrauerLL-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "BrauerLL";
  src: url("../ref/fonts/BrauerLL-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TTCommons";
  src: url("../ref/fonts/TT-Commons-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

/* SPで画像を長押しすると「画像を保存」等のサブメニューが出てしまうため無効化する */
img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  /* 横トラックがはみ出しても横スクロールバーは.h-scroll-sticky自身の
     overflow:hiddenで内側に収まるため出ない。html/bodyにoverflow-xを付けると
     position:stickyが正しく動かなくなる(bodyがスクロールコンテナ扱いになり、
     ビューポート基準でスティックしなくなる)ため付けない。 */
  -webkit-text-size-adjust: 100%;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* legacy Edge/IE */
}

/* display:none だとブラウザによってスクロール自体が無効化されることがあるため
   width/heightを0にして見た目だけ消す */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #fff;
  background: #fff;
}

/* ---------- ヘッダー（フルスクリーン確保 / キービジュアルを画面幅いっぱい・上下中央） ---------- */
.header {
  position: relative;
  height: 100vh;
  /* JSでロックした--vh(一番小さい高さに固定)だと、ツールバーが引っ込んだ状態で
     読み込まれた場合などにフルスクリーンにならないことがあった。
     ネイティブのsvh(ツールバー表示時=一番小さい高さ)を直接使えば、
     JSに頼らず・ツールバー開閉時のジャンプもなく常に正しいフルスクリーンになる。 */
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  overflow: hidden;
}

/* <picture>はデフォルトだと中身(img)の実寸なりにしか広がらず、
   header-visualのwidth:100%/height:100%(cover表示)が効かなくなるため、
   pictureの方をheaderいっぱいに広げてimgにそのまま引き継がせる */
.header picture {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

/* SPは常にheader基準の通常配置（固定/pinなし）。PC専用のfixed/pin切り替えは
   下部の@media(min-width:769px)内でのみ上書きする。 */
.header-badge-26aw {
  position: absolute;
  left: 1px;
  bottom: 1px;
  width: 42%;
  z-index: 2;
}

.header-badge-6 {
  position: absolute;
  right: 1px;
  bottom: 90px;
  width: 40px;
  /* SVGにwidth/height指定がなくviewBoxのみのため、ここで明示的にサイズを指定 */
  height: auto;
  z-index: 2;
}

/* ---------- フッター（ビジュアル＋その下にリンクを縦並び） ---------- */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
}

/* 画像はcover(切り抜き)ではなく幅基準の自然な高さでそのまま収める＝containと
   同じく画像全体が欠けずに見える。縦方向は「画面1枚分の中で中心から少し上」という
   見た目になるようJS(sizeFooterVisual)がtopを計算する。ラッパー自体の高さも
   画像が実際に占める範囲＋わずかな余白ぶんだけJSで詰めるので、次の要素
   (.footer-links)は普通に後ろに続くだけで画像のすぐ下に来る
   （以前は100vh固定＋次要素をマイナスマージンで引き上げる方式で、
   　bodyの高さが実際の見た目より大きくなる不具合があったため変更した）。 */
.footer-visual-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.footer-visual {
  display: block;
  position: absolute;
  /* width:100%ちょうどだと、サブピクセルの丸め誤差で左右どちらかの端に
     背景色の細い線が見えることがあったため、左右に少しずつ余分に広げて
     確実に端まで覆うようにする(はみ出す分はwrap側のoverflow:hiddenでクリップ)。
     transform: translateX(-50%)で中央寄せする方式だとSafariでは要素が
     GPUレイヤーに昇格し、そのレイヤーの縁がoverflow:hiddenで綺麗にクリップ
     されず逆に細い線が出ることがあったため、transformは使わずleftの固定値だけで
     ずらす（左右非対称になるが2px程度なので見た目には影響しない）。 */
  left: -2px;
  width: calc(100% + 4px);
  height: auto;
  /* topはJSで計算してインラインで設定する */
}

.footer-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 0;
}

.footer-link {
  color: #000;
  font-family: "BrauerLL", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-decoration: none;
}

/* ロゴとcopyrightを1グループにして、フッター最下部に固定された見た目にする */
.footer-bottom-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
  /* リンクとの間隔 */
  padding-bottom: 100px;
}

.footer-logo-btn {
  display: block;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.footer-logo {
  display: block;
  width: 33px;
  height: auto;
}

.footer-copyright {
  display: block;
  margin-top: 6px;
  text-align: center;
  font-family: "TTCommons", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 9px;
  line-height: 1.1;
  color: #000;
}

/* keyvisual(header-visual)はSP/PCともフルスクリーンでcover表示（画面いっぱいに埋めて必要に応じて切り抜く）。
   width:100%ちょうどだとサブピクセルの丸め誤差で左右どちらかの端に
   背景色の細い線が見えることがあったため、左右に少しずつ余分に広げて
   確実に端まで覆うようにする（はみ出す分はheaderのoverflow:hiddenでクリップ）。
   transform: translateX(-50%)で中央寄せする方式だとSafariでは要素が
   GPUレイヤーに昇格し、そのレイヤーの縁がoverflow:hiddenで綺麗にクリップ
   されず逆に細い線が出ることがあったため、transformは使わずleftの固定値だけで
   ずらす（左右非対称になるが2px程度なので見た目には影響しない）。 */
.header-visual {
  display: block;
  position: absolute;
  top: 0;
  left: -2px;
  width: calc(100% + 4px);
  height: 100%;
  object-fit: cover;
  object-position: 70% 0;
}

/* ---------- 横スクロール（スライダー）セクション ---------- */
.h-scroll-wrap {
  position: relative;
  /* 高さはJSで動的に計算してセットする（初期値はフォールバック） */
  height: 1000vh;
  background: #fff;
}

/* ピン留めはposition:fixedのJS切り替えではなくCSSのposition:stickyにしてある。
   fixedとネイティブピンチズームの組み合わせがモバイルSafariでクラッシュを
   引き起こしていたため（sticky-test/での実機検証で解消を確認済み）。
   stickyなら文書フロー内の要素のままなので、ズーム時の不安定さが出ない。 */
.h-scroll-sticky {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  /* lvh(ツールバーが引っ込んだ状態=一番大きい高さ)はブラウザが最初から
     正しい値を知っているため、JSで少しずつ観測して大きくしていく方式
     だと「スクロールしてツールバーが引っ込んだ瞬間に高さが変わって見える」
     ジャンプが起きてしまう。ネイティブのlvh単位を直接使えばそれが起きない。 */
  height: 100lvh;
  overflow: hidden;
}

.h-scroll-track {
  display: flex;
  height: 100%;
  /* will-changeは付けない。このトラックは25パネル分(約25画面)の幅があり、
     常時GPUレイヤーに昇格させたままだと、ズームで表示範囲が変わった際に
     巨大レイヤーの再ラスタライズが発生し、端末によってはクラッシュの原因になりうるため。 */
}

/* panelの幅は固定(100vw)ではなく、中の写真(.panel-photo)の実寸に合わせて
   自動で決まる(flex-basis:auto)。写真は画面の高さいっぱいを基準にしていて
   横幅は4:5比率なりの実寸になるため、結果的にpanel自体が画面幅より広く/狭くなる。
   これにより「画面幅ぴったりの箱の中に写真を収める」のではなく「写真の実寸=panelの実寸」
   になるので、写真が画面幅からはみ出しても隣のpanelと重なることがない
   （隣のpanelは自分の写真の実寸ぶんだけ、常にその後ろから始まるため）。 */
.panel {
  flex: 0 0 auto;
  height: 100%;
  position: relative;
  /* aspect-ratioから計算される幅は小数px(サブピクセル)になることがあり、
     隣接するpanel同士の境目でブラウザの丸め誤差により背景色の細い線が
     一瞬見えることがあった。1pxだけ隣のpanelに重ねることで防ぐ
     （写真自体はcontainなので1px程度重なっても見た目には影響しない）。 */
  margin-right: -1px;
}

/* ---------- パネル内の写真（1枚固定） ---------- */
/* 各パネルは写真1枚のみ（スライダーではない）。画面の高さいっぱい・4:5比率で、
   横幅はaspect-ratioからブラウザが自動計算する（左右の余白・パネル間の隙間はなし）。 */
.panel-photo {
  position: relative;
  height: 100%;
  width: auto;
  aspect-ratio: 4 / 5;
}

/* pictureはデフォルトだと中身(img)の実寸なりにしか広がらないため、
   panel-photoいっぱいに広げてimgにそのまま引き継がせる(headerと同じ理由) */
.panel-photo picture {
  display: block;
  width: 100%;
  height: 100%;
}

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

/* 服のクレジット（写真の左下）。1セット＝アイテム<ブランド>/価格/BUYの3行。
   複数アイテムある場合は配列の最後（後から追加した方）が一番下になり、
   それより前のセットは上に積まれる。 */
.panel-credit-list {
  position: absolute;
  left: 16px;
  bottom: 36px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  /* 配列の最後の要素が一番下にくる */
  gap: 10px;
  /* セット同士の間隔 */
}

.panel-credit {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* セット内3行の間隔（統一） */
  color: #fff;
  font-family: "BrauerLL", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  line-height: 1.1;
  /* フォントの行間による余分な余白を詰める */
}

.panel-credit-item {
  font-size: 11px;
}

.panel-credit-price {
  font-size: 11px;
}

.panel-credit-buy {
  display: inline-block;
  color: #fff;
  font-size: 11px;
  text-decoration: underline;
  text-decoration-color: #fff;
}

button{
    visibility:hidden;
}

@media (min-width: 769px) {
  /* PCではheaderをフルスクリーン確保(svh)+cover表示ではなく、
     keyvisual画像を幅100%で表示した時の自然な高さ(アスペクト比なり)に
     headerの高さ自体を合わせる（画像が欠けたり余白ができたりしない）。 */
  .header {
    height: auto;
    display: block;
  }

  .header picture {
    width: 100%;
    height: auto;
  }

  .header-visual {
    position: static;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: initial;
  }

  /* PCのみ：最初の1画面分(ビューポート)は四隅に固定表示し、keyvisualの下端が
     画面下端に到達したら固定を解除してkeyvisualと一緒に通常スクロールされていく。
     #hScrollWrapのpin留めと同じ考え方で、position:fixed/absoluteをJS(updateHeaderBadges)
     で切り替える（CSSのposition:stickyは使わない設計方針のため）。SPはこの上書きを
     受けず、常にheader基準の通常配置のまま。 */
  .header-badge-26aw {
    position: fixed;
    left: auto;
    right: 0;
    bottom: 0;
    width: 25%;
  }

  .header-badge-6 {
    position: fixed;
    right: auto;
    left: 0;
    top: 0;
    width: 7%;
  }

  /* keyvisualの下端が画面下端に到達した後：headerを基準(position:relative)にした
     通常配置に切り替わり、keyvisualと一緒にそのままスクロールされていく */
  .header-badge-26aw.is-end {
    position: absolute;
    right: 0;
    bottom: 0;
  }

  .header-badge-6.is-end {
    position: absolute;
    left: 0;
    /* topはJS(updateHeaderBadges)で固定解除した瞬間の画面上端位置に合わせて設定する。
       header基準の0px固定にすると、固定解除の瞬間には既にheader上端(画面よりずっと上)
       へ飛んでしまい消えて見えるため。 */
  }
}