/** Shopify CDN: Minification failed

Line 646:60 Unexpected "*"

**/
/*
 * goride-custom.css
 *
 * Horizon標準ファイルに追記していたカスタムCSSの集約先。
 * テーマ更新時はこのファイルをコピーするだけでスタイルが移る。
 *
 * 読み込み: layout/theme.liquid -> snippets/goride-globals.liquid
 *
 * 新規作成した goride-*.liquid のCSSはここには入れない。
 * それらは自作ファイルなので、ファイルごとコピーされる。
 */

/* ===== snippets/theme-styles-variables.liquid ===== */

/*
 * テーマ全体の変数の上書き。
 *
 * theme-styles-variables.liquid の :root で定義された値を、後から
 * 同じ :root で上書きしている。goride-custom.css は theme.liquid の
 * </head> 直前で読み込まれ、theme-styles-variables.liquid より後になるため、
 * 同じ詳細度でも後勝ちする。
 */
:root {
  /* Figma実測の字間は -2% / 0% / +3% / +8% の4種。
     テーマ標準の tight は -3% のため -2% に寄せ、+8% の wide を足す。
     wide は全角大文字の小さいキャプション(ABOUT VIA BLANKWEAR等)専用 */
  --letter-spacing--display-tight: -0.02em;
  --letter-spacing--display-wide: 0.08em;

  /* heading-tight だけ -1%。セクション見出しが詰まって見えるという
     クライアント指摘により、2026-09-24に -2% から変更した。

     この変数を参照するのは h1 / h2 / h3 プリセットの3つ
     (config/settings_data.json の type_letter_spacing_h1〜h3 が
     どれも heading-tight を指している)。h4〜h6 は heading-normal(0%)
     なので変わらない。

     商品名やHeroの見出しは custom プリセットで、文字サイズから
     body-tight を参照する仕組み(snippets/typography-style.liquid)のため、
     こちらは -2% のまま影響を受けない。 */
  --letter-spacing--heading-tight: -0.01em;
  --letter-spacing--heading-wide: 0.08em;

  --letter-spacing--body-tight: -0.02em;
  --letter-spacing--body-wide: 0.08em;

  /* 補足テキストの薄さ。テーマ標準の 0.8 では薄さが足りなかった */
  --opacity-subdued-text: 0.7;

  /* 控えめな文字色(--color-foreground-muted)の不透明度。
     テーマ標準の 0.6 だと、文字色 #101820 を背景 #EFEFEF に重ねた実効色が
     rgb(105,110,115) となり、コントラスト比は約4.48:1。
     WCAG 1.4.3(AA)が本文サイズの文字に求める4.5:1をわずかに下回るため
     ADA監査で不足と判定されていた。0.65 にすると約5.26:1 になり満たす。

     この1行で監査の指摘2件(ブログ一覧と記事の日付・著者名、
     価格フィルターの「The highest price is $118.00」)が同時に直る。
     どちらも個別に色指定を持たず --color-foreground-muted を参照しているだけで、
     この変数は他にも入力欄のプレースホルダ(assets/base.css)や
     並び替えの補助テキストなど薄い文字全般で使われるため、
     セレクタごとに上書きするより1箇所で直す方が漏れが出ない。

     副作用: 薄い文字がわずかに濃くなり、1段上の --opacity-subdued-text(0.7)
     との差がほぼ無くなる。薄さを保ちたい場合、基準を満たす下限は
     0.63(約4.93:1)。0.62 以下は4.5:1 を割るため下げてはいけない。 */
  --opacity-muted-text: 0.65;
}

/*
 * 型プリセット(paragraph/h1〜h6)のモバイル用サイズ。
 *
 * テーマ標準の流動サイズ(clamp)は設定値が48px以上のときだけ効くため、
 * 現在の設定値(h1=42 / h2=34 / h3=32 / h4=24 / h5=14 / h6=12)では
 * モバイルでもPCと同じサイズのままになる。
 *
 * theme-styles-variables.liquid の :root は
 * --font-[preset]--size: var(--font-size--[preset]) と参照で定義しているため、
 * --font-size--[preset] を差し替えるだけで全プリセットに伝播する。
 *
 * 以前はこの7つの値をカスタマイザの設定項目として持っていたが、
 * 一度も変更されず既定値のまま使われていたため、設定項目を廃してここに直書きした。
 * テーマ更新時に config/settings_schema.json へ7項目を移す手間がなくなる。
 * 値を変えたいときはこのファイルを直接編集する。
 *
 * 注意: Hero やTOPページの見出しなど type_preset が custom のブロックは
 * サイズを直接指定しているため、この指定の対象外(各セクション側の
 * @media 指定がそのまま効く)。
 */
@media screen and (max-width: 749px) {
  :root {
    --font-size--paragraph: 1rem; /* 16px */
    --font-size--h1: 2rem; /* 32px */
    --font-size--h2: 1.625rem; /* 26px */
    --font-size--h3: 1.625rem; /* 26px */
    --font-size--h4: 1.5rem; /* 24px */
    --font-size--h5: 0.875rem; /* 14px */
    --font-size--h6: 0.75rem; /* 12px */
  }
}

/*
 * セクションの上下余白を全ページで揃える。
 *
 * テーマ標準では .spacing-style が 990px 未満で --spacing-scale に 0.7 を掛けるため、
 * セクション設定に 80px を入れてもPCとモバイルで意図した値にならなかった。
 * セクションに限って倍率を差し替え、設定値80pxが
 * PC・タブレットで80px、モバイルで48px(80 × 0.6)になるようにする。
 *
 * これにより新しいページを作る際も、セクションの余白を80pxに設定するだけで
 * TOPページと同じリズムになる。Hero や告知バーのように
 * Figmaで別の値が指定されているセクションは、各セクション側で上書きする。
 *
 * .section.spacing-style(同一要素)だけでなく .section .spacing-style(子孫要素)
 * にも対応する。snippets/section.liquid のようにsectionラッパーと
 * spacing-style要素が別々のdivに分かれている実装があり、同一要素限定の
 * セレクタだとその実装には一切適用されず、テーマ標準の0.7倍(990px基準)に
 * フォールバックしてモバイルが48pxでなく56pxになってしまっていたため
 */
.section.spacing-style,
.section .spacing-style {
  --spacing-scale: var(--spacing-scale-default);

  @media screen and (max-width: 749px) {
    --spacing-scale: var(--spacing-scale-sm);
  }
}

/* ===== sections/collection-list.liquid ===== */
  /* カテゴリー名・SHOP→はテーマの型プリセットに一致する太さ/字間の組み合わせが
     ないため以下で上書きする。ネストしたブロックはblock.idに親のハッシュが
     前置されるため、部分一致(属性セレクタ)で指定する。実際の文字は外側divではなく
     内側の<p>(.custom-typography > *が対象)に描画されるため、子要素にも当てる。
     セクション見出しはh2プリセットに寄せたため上書き不要になった */

  /* Figma仕様(改修版で再確認): カテゴリ名(JACKETS等)は Semi Bold(600)。
     旧実装は 800 を指定していたため実際より太く見えていた。
     index.json 側は font: var(--font-heading--family)(= inter_n6 = 600)なので、
     本来この上書き自体が不要だが、明示しておくと将来テーマ設定の
     見出しフォントを変えたときに意図しない太さにならない */
  [class*='collection-title'],
  [class*='collection-title'] > * {
    font-weight: 600 !important;
  }

  /* Figma仕様: SHOP→ は Medium(500)・字間+6%(14pxで0.84px)。
     index.json 側は font: var(--font-body--family)(= inter_n4 = 400)のため、
     太さはここで指定する。モバイル側では500を指定していたが
     デスクトップは指定漏れで400のままだった */
  [class*='text_collection_shop_link'],
  [class*='text_collection_shop_link'] > * {
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
  }

  /* カード画像の縦横比はカスタマイザの「アスペクト比」設定で管理する
     (現在は縦長 = 4:5)。以前ここに 445/593(約3:4)の上書きを置いていたが、
     セレクタが一致せず一度も効いていなかったため撤去した。理由は付録F-19 */

  /* Figmaモバイル仕様(Cycle 6 Collections): デスクトップの3列グリッドはそのまま維持し、
     モバイルのみ横スクロールカルーセルに切り替える(carousel_on_mobile設定を有効化。
     テーマ標準の仕組みを流用することで、スクロールスナップ・タッチ操作は
     resource-list-carousel.liquid側の既存実装に任せられる)。
     カード幅は固定318px(--mobile-card-sizeはclamp(150px, 値, 450px)の中央値として使われるため
     318pxを直接指定すればそのまま反映される)、カード間gapは12px。
     上下paddingは theme-styles-variables.liquid の共通ルールで48pxになる。
     横方向のpaddingは--util-page-margin-offset(スライドショーのgutter機構)が
     ブレークポイントで既に16px/40pxと切り替わるため対応不要 */
  @media screen and (max-width: 749px) {
    [id*='collections_grid'] .resource-list__carousel {
      --mobile-card-size: 318px !important;
    }

    [id*='collections_grid'] .resource-list__carousel slideshow-slides {
      gap: 12px !important;
    }

    /* Figma仕様: カテゴリ名20px(デスクトップは24px) */
    [class*='collection-title'],
    [class*='collection-title'] > * {
      font-size: 20px !important;
    }

    /* SHOP→は指示により14px・太さMediumに調整(Figma仕様は11pxだが14pxを優先)。
       字間はFigma仕様の0.55pxを維持。太さは本文フォントの既定ウェイト
       (var(--font-body--weight))になっていたため、Medium(500)を明示的に指定 */
    [class*='text_collection_shop_link'],
    [class*='text_collection_shop_link'] > * {
      font-size: 14px !important;
      font-weight: 500 !important;
      letter-spacing: 0.55px !important;
    }
  }

/* ===== sections/featured-blog-posts.liquid ===== */
  .featured-blog-posts__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--gap-lg);
    width: 100%;
  }

  /* 見出しブロックは fit-content 幅のため、VIEW ALL を右端に寄せる */
  .featured-blog-posts__header > :first-child {
    margin-inline-end: auto;
  }

  .featured-blog-posts__view-all {
    flex-shrink: 0;
    padding-block: 4px;
    border-block-end: 1px solid currentcolor;
    color: var(--color-foreground);
    font-family: var(--font-body--family);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: var(--letter-spacing--body-loose);
    line-height: normal;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .featured-blog-posts__view-all:hover {
    opacity: 0.7;
  }

  /* Figma仕様: カードは「記事タイトル(=コラボレーター名)」と
     「著者(=役割)」の2行のみで、本文抜粋は無い。
     _featured-blog-posts-card.liquid は blog-post-description を静的ブロックとして
     無条件に描画するため(content_for 'block', id: 'blog-post-description')、
     templates/index.json のブロック定義から外してもスキーマ既定値で表示されてしまう。
     そのためCSSで非表示にする */
  [id*='works_with'] .blog-post-card__content-text {
    display: none;
  }

  /* カードリンクのフォーカス枠線が見えない問題。
     .featured-blog-posts-card__link は position: absolute; inset: 0 で
     スライドの端いっぱいに重なるリンク(Horizon標準)。フォーカス時の枠線は
     既定で要素の外側(--focus-outline-offset: 0.2em)に描かれるが、
     祖先の <slideshow-slide> に overflow: hidden が指定されている
     (snippets/slideshow-styles.liquid)ため、外側にはみ出した枠線が
     スライドの外に出て切り取られ、見えなくなっていた。

     Phase 1-6(商品ギャラリーのスクロール領域)・Phase 2-6(矢印ボタン)と
     同じ「overflow: hiddenな祖先の中でリンクが端いっぱいにある」パターン。
     直し方も同じで、枠線を内側に描く(Horizon標準の.focus-insetと同じ値)。 */
  .featured-blog-posts-card__link:focus-visible {
    outline-offset: calc(var(--focus-outline-width) * -1);
  }

  /* 上下paddingは theme-styles-variables.liquid の共通ルールで
     PC80px / モバイル48px になるため、ここでの上書きは不要。
     横方向は --page-margin がブレークポイントで16px/40pxに切り替わるため対応不要 */
  @media screen and (max-width: 749px) {
    /* カード幅を280pxに固定する(画像の縦横比3:2はimage_ratioで決まるので変わらない)。
       既定の mobile_card_size: 60cqw では画面幅390pxで約234pxと小さかった。
       --mobile-card-size は clamp(150px, 値, 450px) の中央値として使われるため、
       280pxを直接指定すればそのまま反映される(Collectionsの318pxと同じ方式) */
    [id*='works_with'] .resource-list__carousel {
      --mobile-card-size: 280px !important;
    }
  }

/* ===== sections/section.liquid ===== */
  /* Figma仕様(B2B Apply CTA): 見出し/本文の折り返し幅を800pxに固定して中央寄せ。
     実際の折り返し幅はtext-blockの子要素(> *)側のmax-inline-sizeで決まり、
     max_width設定"normal"は32.5em(本文16pxだと約520px)という狭いトークンに
     固定されているため、外側要素へのmax-width上書きだけでは効かない。
     子要素のmax-inline-sizeを直接上書きする必要がある。
     section.liquidは汎用ファイルのため、このサイクル固有のブロックIDに限定してスコープする */
  [class*='text_cta_heading'] > * {
    max-inline-size: 800px !important;
  }

  [class*='text_cta_body'] > * {
    max-inline-size: 800px !important;
    line-height: 1.75 !important;
  }

  a[class*='button_start_application'] {
    padding-inline: 30px !important;
    padding-block: 15px !important;
    border-radius: 0 !important;
    font-weight: 600 !important;
    letter-spacing: 0.42px !important;
  }

  /* Figmaモバイル仕様(Cycle 8 B2B Apply CTA): 外側padding(90px→56px)、
     内側の左右padding(32px→16px)、見出し(34px→26px・行間1.25)、
     本文(16px→15px・行間1.7)、ボタン(padding 26px/14px・字間0.39px)に調整
     (デスクトップの値は維持)。section.liquidは汎用ファイルのため、
     このサイクル固有のブロックIDに限定してスコープする */
  @media screen and (max-width: 749px) {
    /* 上下paddingは theme-styles-variables.liquid の共通ルールで
       PC80px / モバイル48px になるため、ここでの上書きは不要 */
    [class*='group_cta_inner'] {
      padding-inline: 16px !important;
    }

    [class*='text_cta_body'] > * {
      font-size: 15px !important;
      line-height: 1.7 !important;
    }

    a[class*='button_start_application'] {
      padding-inline: 26px !important;
      padding-block: 14px !important;
      letter-spacing: 0.39px !important;
    }
  }

/* ===== sections/product-list.liquid ===== */
  /* セクション見出しのサイズ(PC34px/モバイル26px)・太さ(600)・字間(-1%)は
     h2プリセットに寄せたため、ここでの上書きは不要になった
     (字間はファイル冒頭の --letter-spacing--heading-tight で決まる) */

  /* 商品名の太さ(Medium 500)・字間(-2%)・サイズ(18px)は、カスタマイザから
     変更できるようテンプレートのブロック設定へ移した(type_preset: custom /
     font: subheading / font_size: 1.125rem / letter_spacing: tight)。
     モバイル時のサイズは snippets/product-card-typography-styles.liquid に集約している */

  /* Figma仕様: VIEW ALLは大文字・字間0.42px・下線(border-bottom black) */
  a[class*='button_view_all'] {
    text-transform: uppercase !important;
    letter-spacing: 0.42px !important;
    border-bottom: 1px solid #000 !important;
  }

  /* 上下paddingは theme-styles-variables.liquid の共通ルールで
     PC80px / モバイル48px になるため、ここでの上書きは不要。
     横方向のpaddingは--page-marginがブレークポイントで既に16px/40pxと
     切り替わるため対応不要 */
  @media screen and (max-width: 749px) {
    /* Figma仕様: グリッドのgapは縦24px・横20px。
       テーマ標準は--resource-list-mobile-gap-maxで12pxに制限されるため、
       このセクションに限り直接上書きする。

       product-listセクションは2箇所で使っている。TOPページ(product_list_fa6P9H)と
       About Usページ末尾(about_featured_styles)で、どちらも同じFeatured Stylesの
       コレクションを出すため見た目を揃える。
       product-listセクション全体に当てないのは、将来ほかのページで
       別の見せ方をする余地を残すため */
    [id*='product_list_fa6P9H'] .resource-list--grid,
    [id*='about_featured_styles'] .resource-list--grid {
      --resource-list-row-gap: 24px !important;
      --resource-list-column-gap: 20px !important;
    }

    /* Figma仕様: VIEW ALLは13px・字間0.39px(デスクトップは0.42px) */
    a[class*='button_view_all'] {
      font-size: 13px !important;
      letter-spacing: 0.39px !important;
    }
  }

/* ===== sections/product-recommendations.liquid ===== */
  /* セクション見出しのサイズ・太さ・字間・行間はh2プリセットに寄せたため
     ここでの上書きは不要になった(TOPページの各セクション見出しと共通) */

  /* 商品名の太さ・字間・サイズはテンプレートのブロック設定へ移した。
     モバイル時のサイズは snippets/product-card-typography-styles.liquid に集約 */

  /* Figma仕様: セクション上部に1pxの罫線。.sectionはページ幅グリッドのため
     border-topを付けると中央カラム幅で途切れる。.section-background
     (position:absolute; inset:0で画面幅いっぱい)側に引く
     (product-list.liquidの同種の実装に倣う) */
  .product-recommendations .section-background {
    border-block-start: 1px solid var(--color-foreground);
  }

/* ===== snippets/cart-items-component.liquid ===== */
/* カート内は角丸なしで統一する。ボタン・入力欄・数量セレクター・
   クーポンのピル表示はいずれもこれらの変数から角丸を取るため、
   個別セレクターではなく変数側を0に上書きしている。
   カート画面とカートドロワーの両方がこの要素に包まれる。
   元は cart-items-component.liquid の .cart-items-component ルール内に
   書いていた宣言。同じセレクタで再指定している */
.cart-items-component {
  --style-border-radius-buttons: 0;
  --style-border-radius-buttons-primary: 0;
  --style-border-radius-buttons-secondary: 0;
  --style-border-radius-inputs: 0;
  --style-border-radius-pills: 0;
}

/* ===== snippets/predictive-search-styles.liquid ===== */
/* 検索窓のRecently Viewed等、結果カード内の商品名はMedium(500)。
   resource-card側は.paragraph(400)が当たるため、2クラス分の詳細度で上書きする
   (resource-cardはメニュードロワー等でも使うため、検索結果内にスコープする) */
.predictive-search-results__card .resource-card__title {
  font-weight: 500;
}

/* ===== snippets/localization-form.liquid ===== */
/* 国名も全て大文字にする。ヘッダーのトリガーボタン(Utility Bar / ドロワー)は
   既に大文字表示なので、開いたあとの選択肢もそれに揃える。
   通貨コード(country.currency.iso_code)は元から大文字なので指定不要。
   元は localization-form.liquid のネスト内(.localization-form__list-item
   :not([hidden]) > .country)に書いていた宣言。ネストを展開して再指定している */
.localization-form__list-item:not([hidden]) .country {
  text-transform: uppercase;
}

/* ===== sections/product-information.liquid ===== */
  /* Figmaデザイン(PDP)の寸法調整。schemaのrange上限を超える値をCSSで上書きしている */
  .product-information {
    /* 2カラムgapをFigmaの64pxに。schemaのmaxが48pxで保存できないためCSSで上書き。
       --gapはこの要素自身にインラインstyleで設定されるため!importantが必須 */
    --gap: 64px !important;
  }

  @media screen and (min-width: 750px) {
    .product-information .slideshow-controls__thumbnails {
      /* サムネ幅をFigmaの88pxに。schemaのmaxが72pxのためCSSで上書き */
      --thumbnail-width: 88px;
      gap: 12px;
    }

    .product-information slideshow-controls:not([controls-on-media])[pagination-position='left'] .slideshow-controls__thumbnails {
      /* サムネ⇔メイン画像の間隔をFigmaの16pxに(既定は--focus-outline-offset相当の細い余白) */
      --slideshow-thumbnails-padding-inline: 16px;
    }
  }

  @media screen and (max-width: 749px) {
    .product-information .slideshow-controls__thumbnails {
      gap: 10px; /* Figma SP: サムネ間 10px */
    }

    .product-information .slideshow-control {
      /* SPのサムネ幅をFigmaの72pxに固定(標準はclamp(44px, 7vw, ...)で44px止まりのため) */
      width: 72px !important;
    }
  }

  /* メイン画像の比率をFigmaの実寸(PC 520x700)に近づける */
  .product-information .product-media-container {
    --gallery-aspect-ratio: 0.743; /* 520 / 700 */
  }

  @media screen and (max-width: 749px) {
    .product-information .product-media-container {
      /* SPはFigmaの実寸(高さ460px)に合わせて比率を離し固定高さにする */
      --gallery-aspect-ratio: auto;
      height: 460px;
    }
  }

  /* SP商品名の26px指定は、テーマ設定「見出し3のモバイルでのサイズ」へ一本化した
     (snippets/theme-styles-variables.liquid のモバイル用プリセット出力)。
     h3プリセットを使う他のページタイトルとまとめて縮小されるため、
     ここでのセクション個別の上書きは不要になった */

  /* SPのメイン商品画像・サムネイル行: 標準のHorizon挙動ではmobile media がグリッドの
     margin列まで含めて(grid-column: 1/-1)全幅表示される仕様のため、他要素と同じ
     コンテンツ列(2/3)に収め、左右16px相当のページ余白を持たせる */
  @media screen and (max-width: 749px) {
    .product-information .product-information__media {
      grid-column: 2 / 3 !important;
    }

    /* サムネイル行は標準でmargin-inline: autoにより中央寄せされるため、左寄せに変更 */
    .product-information .slideshow-controls__thumbnails {
      margin-inline: 0 !important;
    }
  }

  /* サムネイル選択中の枠線をFigma仕様の1本・1pxに統一。
     標準はoutline(1.5px)とborder(1px)が重なって太く見えるため、outlineを外し
     borderのみ残す。色は既存どおり--color-foreground(トンマナのforeground)を使う。
     Shopifyのセクションスタイルは:where()で自動スコープされ具体性が無効化されるため、
     ソース順やスコープの影響を受けないよう!importantで確実に上書きする */
  .product-information .slideshow-controls__thumbnails .slideshow-control:is([aria-selected='true']) {
    outline: none !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--color-foreground) !important;
  }

  /* ↑の outline: none が、キーボードでフォーカスしたときの枠線まで消していた。
     Horizonは選択中サムネイルの枠もフォーカスの枠も同じ outline で描いており
     (snippets/slideshow-controls.liquid の [aria-selected='true'] と
     assets/base.css の *:focus-visible)、選択中の outline を消すと
     そのサムネイルにフォーカスが来ても何も表示されなくなる。
     Tabで最初に止まるのは通常この選択中サムネイルなので、
     ADA監査では「サムネイルでフォーカス位置が見えない」と判定されていた
     (WCAG 2.4.7 フォーカスの可視化)。

     ここでフォーカス時だけ枠線を描き直す。↑を :not(:focus-visible) で
     絞る形にはしていない。Horizon側の outline が復活すると
     offset が異なり選択中の見た目が変わってしまうため、
     消したままにして自前で描く方が結果が読みやすい。

     :focus-visible はキーボードで到達したときだけ効き、マウスのクリックでは
     効かない。選択中サムネイルは border(内側1px)とこの outline(外側)の
     2本が同時に見えるが、フォーカスが外れれば1本に戻る。 */
  .product-information .slideshow-controls__thumbnails .slideshow-control:focus-visible {
    outline: var(--focus-outline-width) solid var(--color-foreground) !important;
    outline-offset: calc(var(--focus-outline-offset) / 2) !important;
  }

  /* スライドショーの矢印をFigmaのchevron形状に変更(icons_style: chevronでicon-caret.svgを使用)。
     色を--color-foregroundに固定し、mix-blend-mode: differenceによる自動色反転を止める。
     アイコンサイズは.svg-wrapperの既定--icon-size-sm(20px)がそのままFigma仕様と一致するため上書き不要 */
  .product-information slideshow-arrows {
    mix-blend-mode: normal;
  }

  .product-information slideshow-arrows .slideshow-control {
    color: var(--color-foreground);
    --icon-stroke-width: 1.45833px;
  }

  /* ボタン自体が--minimum-touch-target(44px)分の幅を持ち、標準のdisplay:block
     (.button-unstyled)ではアイコンがそのボックス内で画像端側に寄らないため、
     flex化してjustify-content: flex-endで明示的に寄せる。
     previousボタンはこの後ボタン全体がflip-x(scale: -1 1)で左右反転されるため、
     「flex-end(右寄せ)」を指定すると反転後は見た目上「左寄せ」になり、
     結果として両ボタンとも画像側の端にアイコンが揃う */
  .product-information slideshow-arrows .slideshow-control {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  /* スライドショーの矢印は標準でmobile:hidden(display: none !important)が付き
     モバイルで非表示になる仕様のため、PDPではモバイルでも表示する */
  @media screen and (max-width: 749px) {
    .product-information slideshow-arrows.mobile\:hidden {
      display: flex !important;
    }

    /* ボタン自体に標準でpadding: 0 var(--padding-xs)(12.8px)が付いており、
       これが画像の縁とアイコンの間の余白の正体だったため取り除く */
    .product-information slideshow-arrows .slideshow-control {
      padding-inline: 0 !important;
    }
  }

  /* バリアントピッカー(Color/Size)をFigma仕様に調整。
     全サイトのバリアントピッカーに影響させないよう.product-informationスコープで上書き */

  /* Colorラベルの選択値(「Color — Navy」)の区切り文字と文字色。
     標準は60%グレー(--variant-option-label-color-subdued)のためforegroundに変更 */
  .product-information .variant-option__swatch-value {
    color: var(--color-foreground) !important;
  }
  .product-information .variant-option__swatch-value::before {
    content: '— ';
  }

  /* Colorスウォッチの間隔をFigmaの12pxに(標準は--gap-xs) */
  .product-information .variant-option--swatches > overflow-list {
    gap: 12px !important;
  }

  /* ColorピッカーとSizeピッカーの間は罫線なしで24pxの余白のみ
     (罫線を試みたが<legend>の標準配置と干渉するため、余白のみ採用) */
  .product-information .variant-option + .variant-option {
    margin-top: 24px !important;
  }

  /* Sizeボタン: 角丸なし・padding(縦8px/横18px)・ボタン間gap10px・Inter Medium 13px。
     テーマ設定のvariant_button_width(equal-width-buttons)によりボタンが
     グリッドで均等に横幅いっぱいに伸びる仕様のため、PDPでは自然幅に戻す */
  .product-information .variant-option--buttons {
    gap: 10px !important;
  }

  .product-information .variant-option--equal-width-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  /* :not(--has-swatch)を必ず付ける — Colorスウォッチにも同じクラスが付くため、
     除外しないと border-radius: 0 でスウォッチの丸が四角になり、
     padding でスウォッチが横長に膨らむ。Horizonは
     variant-picker-styles.liquid でスウォッチを padding: 0 / border-radius:
     --variant-picker-swatch-radius にしており、それを打ち消してしまう */
  .product-information .variant-option__button-label:not(.variant-option__button-label--has-swatch) {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    border-radius: 0 !important;
    padding: 8px 18px !important;
    font-family: var(--font-subheading--family) !important; /* Inter Medium */
    font-weight: 500 !important;
    font-size: 13px !important;
  }

  /* 未選択・購入可能時のborderをFigmaの#101820(foreground)に。
     売切れ時は次のルールで色を変えるため、ここでは対象から除外する */
  .product-information
    .variant-option__button-label:not(.variant-option__button-label--has-swatch):not(
      :has([data-option-available='false'], :checked)
    )::before {
    border-color: var(--color-foreground) !important;
  }

  /* 売切れ表現: 標準の斜線SVG(25度)を非表示にし、水平打消し線に統一する。
     選択中・未選択どちらの売切れも同じ水平線にするため、この2つは
     :checked状態を問わず常に適用する */
  .product-information
    .variant-option__button-label:not(.variant-option__button-label--has-swatch):has(
      [data-option-available='false']
    )
    .variant-option__strikethrough {
    display: none !important;
  }

  .product-information .variant-option__button-label:has([data-option-available='false']) .variant-option__button-label__text {
    text-decoration: line-through !important;
  }

  /* 背景・border・文字色(--color-variant-border(#d5d7d7)・#9a9a92)は
     未選択の売切れのみに適用する。:not(:has(:checked))を必ず付ける —
     「選択中かつ売切れ」の組み合わせはテーマ標準で黒塗り表示
     (--color-selected-variant-background)になるため、ここで一括上書き
     すると選択中のボタンまで背景色が変わってしまう */
  .product-information
    .variant-option__button-label:not(.variant-option__button-label--has-swatch):has(
      [data-option-available='false']
    ):not(:has(:checked)) {
    background-color: var(--color-variant-border) !important;
  }

  .product-information
    .variant-option__button-label:not(.variant-option__button-label--has-swatch):has(
      [data-option-available='false']
    ):not(:has(:checked))::before {
    border-color: var(--color-variant-border) !important;
  }

  .product-information
    .variant-option__button-label:has([data-option-available='false']):not(:has(:checked))
    .variant-option__button-label__text {
    color: #9a9a92 !important;
  }

  /* 売切れボタンはホバーしても配色を変えない。標準はhoverで
     --color-variant-hover-*/--color-selected-variant-hover-*系に
     切り替わる仕様のため、非ホバー時と同じ値で固定する */
  .product-information
    .variant-option__button-label:not(.variant-option__button-label--has-swatch):has(
      [data-option-available='false']
    ):not(:has(:checked)):hover {
    background-color: var(--color-variant-border) !important;
    color: #9a9a92 !important;
  }

  .product-information
    .variant-option__button-label:not(.variant-option__button-label--has-swatch):has(
      [data-option-available='false']
    ):has(:checked):hover {
    background-color: var(--color-selected-variant-background) !important;
    color: rgb(var(--color-selected-variant-text-rgb) / var(--opacity-subdued-text)) !important;
  }

  /* Size Guideリンク(popup-link)をFigmaに合わせる: 下線あり・letter-spacing 1%・外部リンクアイコン非表示 */
  .product-information .popup-link__button {
    text-decoration: underline;
    letter-spacing: 0.01em;
  }

  .product-information .popup-link__button svg {
    display: none !important;
  }

  /* Size Guideモーダルのサイズ
     根本原因: <dialog>のブラウザ標準スタイルは width: fit-content のため、
     max-widthだけ広げても中身(画像)の固有幅より広くならず小さいままになる。
     widthを明示指定して初めて広がる。
     PCは画像が収まりきるため横スクロールは出さない。スマホは画像を2倍に
     拡大して見せるため、下の@mediaでoverflow-xをautoに戻している */
  .product-information .popup-link__content {
    max-height: 90dvh !important;
    overflow-x: hidden;
    overflow-y: auto;
  }

  @media screen and (min-width: 750px) {
    .product-information .popup-link__content {
      /* 参考デザイン(ビューポート幅のほぼ全体)に合わせる。
         元画像が2400pxなので1400pxで頭打ちにして拡大ボケを防ぐ */
      width: min(90vw, 1400px) !important;
      max-width: min(90vw, 1400px) !important;
      /* 既定は--padding-5xl(48px)を四辺に取り画像領域を圧迫するため縮める。
         上だけは閉じるボタン(右上に絶対配置)と画像が重ならないよう残す */
      padding: var(--padding-4xl) var(--padding-lg) var(--padding-lg) !important;
    }
  }

  @media screen and (max-width: 749px) {
    .product-information .popup-link__content {
      width: 100dvw !important;
      max-width: 100dvw !important;
      /* テーマ標準(base.css)がスマホで height: 100dvh を当てており、中身の量に
         関係なく縦に画面いっぱい伸びてしまう。中身(画像)の高さだけに縮ませる */
      height: fit-content !important;
      min-height: 0 !important;
      max-height: 90dvh !important;
      /* 上は閉じるボタン(右上に絶対配置)との重なりを避ける分だけ残し、
         左右は画像を画面幅いっぱいに使わせるため0にする */
      padding: var(--padding-4xl) 0 var(--padding-xs) !important;
      /* 画像を画面幅の2倍で出すため、はみ出した分を横スクロールで見せる。
         共通ルール側の overflow-x: hidden をここで打ち消している */
      overflow-x: auto;
    }
  }

  /* サイズ表画像。imageブロック(blocks/image.liquid)ではなくcustom-liquidで
     メタフィールドを直接描画している。
     理由1: size_guide_imageはfile_referenceメタフィールドで、Liquidのvalueはimageでは
     なくmediaオブジェクトを返す。aspect_ratio/width/heightはimage側のプロパティのため
     いずれもnilになり、--ratioが1(正方形)へフォールバックして横長のサイズ表が
     切り抜かれ、image_tagもwidth/height属性やsrcsetの上限を出力できない。
     custom-liquid側ではpreview_imageを取り出して実imageオブジェクトを渡している。
     理由2: imageブロックのsizesは'auto, ...100vw'固定で、モーダル幅(90vw / 上限1400px)
     とは一致せず解像度の選択を制御できない。ここではsizes・widths・loadingを明示する */
  .product-information .popup-link__content .size-guide-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    margin-inline: auto;
  }

  /* スマホは画面が狭く、画面幅ぴったりに収めるとサイズ表の文字が読めない。
     画像を画面幅の2倍で出し、切れた部分はモーダル内の横スクロールで見せる。
     max-width: none を必ず付ける — 上のルールの max-width: 100% が残ると
     width: 200% が 100% に丸められて拡大されない。
     margin-inline: auto も打ち消す — 2倍幅では中央寄せの計算で左端が
     マイナスにずれ、スクロールしても左端が見えなくなる */
  @media screen and (max-width: 749px) {
    .product-information .popup-link__content .size-guide-image {
      width: 200%;
      max-width: none;
      margin-inline: 0;
    }
  }

  /* DESCRIPTION/DETAILSアコーディオン見出しをFigmaに合わせる:
     SemiBold・大文字・letter-spacing2%。h5プリセットはInter Medium 14pxまでは
     一致するが、太さ・大文字・letter-spacingはaccordion-stylesがletter-spacingを
     バインドしないなど設定だけでは到達できないためCSSで直接指定する。

     colorは実測で #101820CC(不透明度80%)だった。値は
     --opacity-subdued-text(0.8)と一致するが、accordion-styles.liquid・
     h5プリセット・details[open]・accordion-custom-component.liquid の
     いずれにも summary の色を変える記述が無く、指定元を特定できていない。
     展開・非展開のどちらでも100%の黒にするため --color-foreground を明示する */
  .product-information .accordion .details__header {
    color: var(--color-foreground) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
  }

  /* chevronアイコンは summary .svg-wrapper の既定(--icon-size-xs、約13.6px)を
     上書きしFigma仕様の20pxにする */
  .product-information .accordion .details__header .svg-wrapper {
    width: 20px !important;
    height: 20px !important;
  }

  /* DETAILSの中身(blocks/goride-product-specs.liquid が出力するラベル+メタフィールド値の行)。
     .accordion の子である前提のセレクタなので、あのブロックは
     accordion ブロックの子に置く必要がある */
  .product-information .accordion .product-spec-row {
    font-family: var(--font-body--family);
    font-size: 1rem;
    line-height: 1.6;
    color: #333333;
  }

  /* 行間はラッパー側のgapで付ける。
     元は .product-spec-row + .product-spec-row { margin-top: 4px } という
     隣接セレクタだったが、行を子ブロック(_goride-product-spec-row)にしたことで
     Shopifyが各行をラッパー要素で包む可能性があり、隣接セレクタだと
     効かなくなるため。見た目の間隔は4pxのままで変わらない */
  .product-information .accordion .goride-product-specs__rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  /* 購入エリアの高さをFigma仕様44pxに(数量セレクタ・ADD TO CARTに影響。
     BUY IT NOWは48px指定のため下記で個別に上書きする) */
  .product-information {
    --height-buy-buttons: 44px;
  }

  /* 数量セレクタの±ボタン・数値欄の幅をFigma仕様40pxに
     (既定は--minimum-touch-target=44px) */
  .product-information .quantity-selector :is(.quantity-minus, .quantity-plus) {
    width: 40px !important;
  }

  .product-information .quantity-selector input[type='number'] {
    width: 40px !important;
    max-width: 40px !important;
  }

  /* ADD TO CART: .buttonはbody/accentのみ選択可でMedium(500)の
     選択肢がないためCSSで直接指定。letter-spacingもプリセットに
     2%の選択肢が無いため同様 */
  .product-information .add-to-cart-button {
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: 0.02em !important;
    border-radius: 0 !important;
  }

  .product-information .add-to-cart-icon {
    display: none !important;
  }

  /* BUY IT NOW(accelerated-checkout): ウォレット(Shop Pay等)が無効な場合は
     素のunbrandedボタンになり背景・borderもCSSで制御できるためsecondary相当に。
     ウォレット有効時は角丸・高さの2変数以外は制御できない仕様のため、
     その2つのみ上書きする */
  .product-information button.shopify-payment-button__button--unbranded {
    --button-background-color: transparent;
    --button-color: var(--color-foreground);
    --button-border-color: var(--color-foreground);
    --button-border-width: 1px;
    border-radius: 0 !important;
    height: 48px !important;
  }

  /* BUY IT NOWは枠線のみのsecondary相当のため、primaryボタン共通の
     黒80%不透明度ホバーを適用せず透明のままにする */
  .product-information button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
    --button-background-color: transparent;
    --button-color: var(--color-foreground);
    --button-border-color: var(--color-foreground);
  }

  .product-information shopify-accelerated-checkout {
    --shopify-accelerated-checkout-button-border-radius: 0px !important;
    --shopify-accelerated-checkout-button-block-size: 48px !important;
  }

/* ===== sections/media-with-content.liquid ===== */
  /* Figma仕様(About Teaser): 画像高さ450px固定(デスクトップ)/299px固定(モバイル)。
     media_height="auto"だと--media-heightが文字列"auto"になりmin-heightが
     機能しないため、この画像ブロックだけ直接高さを指定する */
  [id*='about_teaser'] .media-block {
    @media screen and (min-width: 750px) {
      min-height: 450px !important;
    }

    @media screen and (max-width: 749px) {
      min-height: 299px !important;
    }
  }

  /* Figma仕様(改修版): 本文の行間1.75。
     --line-height--body-loose は1.6までしか無いため、この値だけ直接指定する。
     ネストしたブロックはblock.idに親のハッシュが前置されるため、部分一致(属性セレクタ)で指定する。
     実際の文字は外側divではなく内側の<p>(.custom-typography > *が対象)に
     描画されるため、子要素にも同じ上書きを当てる必要がある。
     フォント太さ・字間・色はindex.jsonのブロック設定(font/letter_spacing/text_color)で
     指定しているため、ここでの!important上書きは廃止した */
  [class*='text_about_body'],
  [class*='text_about_body'] > * {
    line-height: 1.75 !important;
  }

  /* Figma仕様: 太さMedium(500)・字間+3%・下線。
     .button-unstyledは太さ・字間・下線を指定しないため明示的に上書きする */
  [class*='button_read_story'] {
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em !important;
    border-bottom: 1px solid currentcolor !important;
  }

  /* Figmaモバイル仕様(Cycle 7 About Teaser): 外側padding(48px)、
     キャプション11px・字間0.66px、見出し24px・行間1.25、本文15px・行間1.7、
     READ OUR STORYボタン13px・字間0.39pxに調整(デスクトップの値は維持)。
     横方向のpaddingは--page-marginがブレークポイントで既に16px/40pxと
     切り替わるため対応不要 */
  @media screen and (max-width: 749px) {
    /* 上下paddingは theme-styles-variables.liquid の共通ルールで
       PC80px / モバイル48px になるため、ここでの上書きは不要 */
    [class*='text_about_caption'],
    [class*='text_about_caption'] > * {
      font-size: 11px !important;
      letter-spacing: 0.06em !important;
    }

    [class*='text_about_heading'],
    [class*='text_about_heading'] > * {
      font-size: 24px !important;
      line-height: 1.25 !important;
    }

    [class*='text_about_body'],
    [class*='text_about_body'] > * {
      font-size: 15px !important;
      line-height: 1.7 !important;
    }

    /* 本文の<br>はデスクトップでFigmaと同じ改行位置にするためのもの。
       スマホ幅では短い行ができて不自然になるので無効化する
       (brにdisplay:noneを当てると改行そのものが消える) */
    [class*='text_about_body'] br {
      display: none;
    }

    [class*='button_read_story'] {
      font-size: 13px !important;
    }
  }

  /* Figma仕様(改修版 About Teaser): 画像が未設定のときはメディア枠を出さず、
     テキストを1カラムで表示する。画像を設定すると自動的に旧デザインの
     「左メディア+右テキスト」に戻る。

     判定方法: snippets/media.liquid は image が空のとき placeholder_svg_tag に
     'media-block__placeholder' クラスを付けたSVGを出力する。これを :has() で拾うことで、
     静的ブロックの settings を section 側から参照せずに済ませている
     (静的ブロックは content_for で描画され section.blocks から辿れない)。

     セレクタは .section も含めて3クラスにしてある。上の grid-template-areas 群と
     同じ2クラスだと詳細度が並び、ソース順だけが頼りになって壊れやすいため */
  .section.media-with-content:has(.media-block__placeholder) {
    grid-template-columns: var(--full-page-grid-with-margins);
    grid-template-areas: 'margin-left content margin-right';

    .media-block {
      display: none;
    }

    /* メディアが無いので、テキスト側に付いていた片側paddingは不要。
       上下paddingも0にする。テーマ標準は
       padding-block: calc(2 * var(--page-margin)) / デスクトップは var(--page-margin)
       なのでスマホ32px・PC40pxが内側に足され、セクションのpadding(48px/90px)と
       二重になっていた。Figmaはセクションのpaddingだけで完結している */
    &.section--page-width .media-with-content__content > .group-block-content {
      padding-inline: 0;
      padding-block: 0;
    }

    /* Figma仕様: フレーム幅1400pxに対してコンテンツ幅877px。
       1400px以下はこの比率(877 / 1400 = 62.643%)で縮小し、1400px以上では
       877pxで打ち止めにして左右の余白が広がるようにする(ユーザー確定)。
       上限を設けないと広い画面で1行が長くなりすぎて可読性が落ちるため。

         1400px → 62.643% = 877px(比率と上限が一致する点)
         1920px → 877px固定・左右521.5px
         1200px → 751.7px・左右224px

       vwではなく%を使っているのは、vwがスクロールバー幅を含む環境で
       セクション幅とズレるため(この%はセクション幅=グリッドコンテナ基準) */
    @media screen and (min-width: 750px) {
      grid-template-columns: 1fr min(62.643%, 877px) 1fr;
    }
  }

/* ===== sections/footer.liquid ===== */
  /* Figma仕様(改修版): ロゴ画像は174x107。
     imageブロックには幅のpx指定が無く%指定のみのため、ここで幅を固定する。
     min()にしてあるのは、列幅が174pxを下回る画面でも溢れないようにするため。
     旧デザインのテキストロゴ+説明文は改修版Figmaに無いため、ブロックごと
     imageブロックに置き換えた(text_footer_logo / text_footer_description の
     上書きも不要になったので削除済み)

     PCでロゴを列の中央に置いていた指定(margin-inline: auto)は撤去した
     (2026-09-24)。ロゴと同じ列にSNSアイコンなどを積んだため、ロゴだけ中央だと
     左揃えの他の要素と縦の軸がずれる。
     他の3列(COMPANY/SHOP/POLICY)も左揃えなので、左揃えに統一した。

     ただしモバイルではロゴだけを中央に置いている(SNSアイコンとContact Usは
     左揃えのまま)。指定はこのファイル内のモバイル用ブロックにある。 */
  [class*='image_footer_logo'] {
    inline-size: min(174px, 100%) !important;
  }

  /* Figma仕様(改修版): COMPANY/SHOP/CONTACT見出しは12px・Regular(400)・字間+6%(0.72px)。
     リンクは14px・白(不透明度なし)。menuブロックはtext_color未設定時にブロックID付きクラスを
     持たないため、text_colorを明示指定してcolor-custom-{id}クラスを発生させてスコープする。
     旧デザインでは見出しBold(700)・リンクrgba(0,0,0,0.75)だったが、改修版でダーク背景+白文字に
     なったため両方見直した。字間はpxではなくemにしてフォントサイズ変更に追従させる */
  /* 文字は<summary class="menu__heading paragraph">の中のspanに入っており、
     常時表示用(__default)とアコーディオン用(__accordion)の2つがある。
     どちらのspanにも外側から直接スタイルが当たっているため、summary側だけを
     指定しても勝てない。必ず両方のspanを列挙する必要がある。
       - __default: 上の「.footer-content .menu__heading__default」で
         font-weight: 600 が指定されている
       - __accordion: base.css の「.paragraph > *」で
         font-size: var(--font-paragraph--size) が指定されている
     spanは display: contents だが、テキストはspanからこれらを継承する */
  [class*='menu_shop'] .menu__heading,
  [class*='menu_company'] .menu__heading,
  [class*='menu_policy'] .menu__heading,
  [class*='menu_shop'] :is(.menu__heading__default, .menu__heading__accordion),
  [class*='menu_company'] :is(.menu__heading__default, .menu__heading__accordion),
  [class*='menu_policy'] :is(.menu__heading__default, .menu__heading__accordion) {
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 0.06em !important;
  }

  [class*='menu_shop'] .menu__item,
  [class*='menu_company'] .menu__item,
  [class*='menu_policy'] .menu__item {
    font-size: 14px !important;
  }

  /* Footerの列数を5列に上書きしていたルールは撤去した(2026-09-24)。

     以前はブロックが5つ(ロゴ/COMPANY/SHOP/POLICY/CONTACT)あり、
     footer.liquid の grid_columns が at_most: 4 で打ち止めされる関係で
     5つ目が全幅で下段に落ちていた(.footer-content--isolated-grid-item-desktop)。
     それを打ち消すために5列を強制していた。

     CONTACTをロゴと同じ列にまとめてブロックが4つになったため、
     テーマ標準のまま4列で並ぶようになり、上書きが不要になった。 */

  /* COMPANY/SHOP/POLICYの間隔を詰める(2026-09-24)。

     テーマ標準は repeat(4, 1fr) の均等4列で、1列あたり330px
     (内容幅1440px、列間gap40px)。リンクの文字は列の左端に置かれるため、
     Download Catalog のような短いリンクの右側に200px以上の空白ができ、
     メニュー同士が370px離れて見えていた。

     COMPANY と SHOP の列幅を240pxにして、余った幅は1列目
     (ロゴ+CONTACT)に吸収させる。見出しの左端どうしの間隔は
     280px(列幅240px + gap40px)になる。

     最初はリンクの最長文字列の幅(max-content)まで詰めたが、
     メニューが窮屈に見えたため240pxに広げ直した。

     POLICY列の幅はテーマ標準の1列分と同じ calc(25% - 30px) で固定する
     ((100% - gap40px × 3) ÷ 4 を展開した式)。これにより
     POLICYの位置と右端までの距離は変わらない。

     1列目を minmax(174px, 1fr) にしているのは、1000〜1100px程度の
     狭いPC画面でロゴ(174px)が縮まないようにするため。この幅では
     代わりにメニュー列が240pxより狭くなる(minmax(0, 240px)の下限0)。
     ロゴの幅を優先し、メニュー側を譲る形にしている。

     990px未満は2列(750-989px)・1列(749px以下)に折り返すテーマ標準の
     レイアウトに任せるため、このルールはPC幅に限定する。 */
  @media screen and (min-width: 990px) {
    [id*='footer_m9NzUG'] .footer-content {
      grid-template-columns: minmax(174px, 1fr) minmax(0, 240px) minmax(0, 240px) calc(25% - 30px);
    }
  }

  /* 「CONTACT」見出し(textブロック)への指定は撤去した(2026-09-30)。
     見出しを無くして SNSアイコン → Contact Us の並びにしたため、
     ブロックごと footer-group.json から削除されている。

     代わりに置いた Contact Us は buttonブロック(style_class: button-unstyled)で、
     出力は <a class="button-unstyled button-unstyled--{ハッシュ}__button_contact_us">。
     COMPANY/SHOP/POLICYのリンクと同じ14pxに揃える。

     文字色はブロック設定の link_text_color(#ffffff)が
     snippets/button-custom-styles.liquid 経由で出力するためCSS側では指定しない。

     !important を付けずに済むよう、セクションIDと組み合わせて詳細度を(0,2,0)にしてある
     (base.css の .button-unstyled が font-size: var(--font-paragraph--size) を
     指定しているため、同じ詳細度(0,1,0)では後勝ちに頼ることになる) */
  [id*='footer_m9NzUG'] [class*='button_contact_us'] {
    font-size: 14px;
  }

  /* モバイル: 5列を2列に折り返すとアコーディオンの開閉行が横に割れて
     押しにくくなるため、1列にしてロゴ→COMPANY→SHOP→POLICY→CONTACTの縦積みにする。
     COMPANY/SHOP/POLICYはmenuブロックのshow_as_accordionで開閉式になり、
     見出しだけが1階層目に並ぶ(デスクトップは常時展開。
     accordion-custom-componentにdisable_on_desktop: trueが渡されているため)。
     footer.liquidは汎用ファイルのため、このサイト固有のfooter_m9NzUGインスタンスに
     限定してスコープする */
  @media screen and (max-width: 749px) {
    /* paddingは外側.sectionではなく、spacing-styleクラスを持つ内側の
       .footer-content自体に適用されるため、そちらを直接上書きする。
       アコーディオンは区切り線(accordion_dividers)で仕切られるため、
       行間のgapは詰めて線の間隔が空きすぎないようにする */
    [id*='footer_m9NzUG'] .footer-content {
      padding-block: 40px !important;
      grid-template-columns: 1fr !important;
      gap: 14px !important;
    }

    /* 区切り線はダーク背景では--color-borderが暗くて見えないため半透明の白にする。
       あわせて下側に20pxのpaddingを入れる。テーマ標準では .menu__details に
       下paddingが無く、区切り線が見出しのすぐ下に接していたため、
       見出しの上(グリッドのgap 14px)だけが空いて上下が非対称になっていた。
       これで「上14px → 見出し → 下14px → 区切り線」となり、
       線を挟んだ見出し同士の間隔も 14px + 14px で線が中央にくる */
    [id*='footer_m9NzUG'] .menu--dividers .menu__details {
      padding-block-end: 14px !important;
      border-color: rgba(255, 255, 255, 0.25) !important;
    }

    /* 開いた状態では .details-content 側にも下paddingが入り
       (.menu--dividers .details-content の var(--padding-sm))、
       上の14pxと二重になるため0にする */
    [id*='footer_m9NzUG'] .menu--dividers .details-content {
      padding-block-end: 0 !important;
    }

    /* 1列目(ロゴ + SNSアイコン + Contact Us)の上に、折りたたみ行と同じ余白を入れる。
       折りたたみ行は「見出し → 14px → 区切り線」で、区切り線から次の見出しまでは
       グリッドのgap(14px)。この列には区切り線が無いため、行の内側paddingとして
       14pxを足して他の行と同じ上下のリズムに揃える。

       groupブロックはbackground_colorを設定しないとブロックIDクラスを
       出さないため、グリッド直下の子を :has() で特定する。
       目印は以前は「CONTACT」見出し(textブロック)だったが、見出しを廃止したため
       ロゴのimageブロックに変えた(2026-09-30)。imageブロックは設定に関わらず
       ブロックIDを含むクラスを出力する */
    [id*='footer_m9NzUG'] .footer-content > :has([class*='image_footer_logo']) {
      padding-block-start: 14px !important;
    }

    /* モバイルではロゴだけを列の中央に置く。
       SNSアイコンとContact Usは左揃えのままにして、すぐ下に続く
       COMPANY/SHOP/POLICYの見出しと左端を揃える。

       ロゴは上のルールで幅が min(174px, 100%) に固定されているため、
       左右のmarginをautoにすれば中央に寄る(flexアイテムのautoマージンは
       交差軸=横方向にも効く)。

       グループ側の align-items を center にする方法は採らない。
       同じ列に積んであるSNSアイコンとContact Usまで中央に動いてしまう。

       ブロック設定(horizontal_alignment_flex_direction_column)で
       中央にする方法も採れない。設定はPC・モバイル共通のため、
       PC版のロゴまで中央に動いて他の列と軸がずれる。 */
    [id*='footer_m9NzUG'] [class*='image_footer_logo'] {
      margin-inline: auto;
    }

    /* モバイルでアイコンを横並びに戻していたルールは撤去した(2026-09-24)。
       SNSアイコンを5つに増やすにあたって、groupブロック側の設定を
       content_direction: row / vertical_on_mobile: false に変えたため、
       PC・スマホとも横並びになり、CSSでの打ち消しが不要になった。
       (.mobile-column クラス自体が出力されなくなっている) */

    /* Figma仕様: 見出し11px・字間0.55px(デスクトップは12px・0.72px)。
       アコーディオン時に表示されるのは.menu__heading__accordion側で、
       base.cssの「.paragraph > *」がこのspanにfont-sizeを直接指定しているため、
       <summary>だけを指定しても効かない(CONTACTだけ小さく見える原因だった) */
    [class*='menu_shop'] .menu__heading,
    [class*='menu_company'] .menu__heading,
    [class*='menu_policy'] .menu__heading,
    [class*='menu_shop'] :is(.menu__heading__default, .menu__heading__accordion),
    [class*='menu_company'] :is(.menu__heading__default, .menu__heading__accordion),
    [class*='menu_policy'] :is(.menu__heading__default, .menu__heading__accordion) {
      font-size: 11px !important;
      letter-spacing: 0.55px !important;
    }

    /* Figma仕様: リンク13px(デスクトップは14px)、リンク間gap 9px(デスクトップは10px)。
       --spacing--sizeは.menu__item + .menu__itemの間隔にも使われる共有変数のため9pxにする */
    [class*='menu_shop'] .menu__item,
    [class*='menu_company'] .menu__item,
    [class*='menu_policy'] .menu__item {
      font-size: 13px !important;
    }

    /* Contact Us もメニューのリンクと同じ13pxに落とす(デスクトップは14px) */
    [id*='footer_m9NzUG'] [class*='button_contact_us'] {
      font-size: 13px;
    }

    [class*='menu_shop'],
    [class*='menu_company'],
    [class*='menu_policy'] {
      --spacing--size: 9px !important;
    }

    /* Figma仕様: 見出しとリンクリストの間隔は14px。
       .details-contentのmargin-block-startも--spacing--size(リンク間gapと共有)を
       参照しているため、9pxで上書きすると見出し-リスト間も9pxになってしまう。
       ここだけ独立して14pxを指定する */
    [class*='menu_shop'] .details-content,
    [class*='menu_company'] .details-content,
    [class*='menu_policy'] .details-content {
      margin-block-start: 14px !important;
    }
  }

  /* Figma仕様: Brand Columnはリンク2列より広い(3列均等の1frではFigmaより狭くなる)。
     元は footer.liquid の @media (min-width: 990px) の内側に置いていたため、
     切り出しにあたって同じメディアクエリで包み直している */
  @media screen and (min-width: 990px) {
    .footer-content[style*='--grid-columns: 3'] {
      grid-template-columns: 1.6fr 1fr 1fr;
    }
  }

/* ===== sections/hero.liquid ===== */
  /*
   * Heroの上下余白はFigmaで上100px・下28pxと非対称に指定されており、
   * 他のセクションのような80px/48pxのリズムには乗らない。
   * 共通化でモバイルの倍率を0.6に変更したため、
   * Heroだけはテーマ標準の0.7に戻して従来の見た目を保つ。
   */
  @media screen and (max-width: 749px) {
    .hero__container.spacing-style {
      --spacing-scale: var(--spacing-scale-md);
    }
  }

  /* スマホは--section-height-largeが35rem(560px)固定でPCのsvh指定より
     縦が伸びないため、モバイル専用の高さで上書きする。
     --hero-min-heightはインラインstyleで指定されており、CSSからは
     上書きできないため min-height 自体を再指定する */
  @media screen and (max-width: 749px) {
    .hero {
      min-height: calc(var(--hero-min-height-mobile, var(--hero-min-height)) - var(--hero-height-offset));
    }
  }

  /* Figma仕様: Hero Text Blockの幅は560px。テキストブロック既定の
     --max-width(font-size基準のem)より優先させる */
  .hero__content-wrapper .text-block > * {
    max-inline-size: min(100%, 560px);
  }

  /* Figma仕様: 右20px・下28pxの位置に半透明のロゴを重ねる(1400x788のフレームで
     x=1213..1380 / y=692..760)。メディアより手前、テキストより奥に置く */
  .hero__watermark {
    position: absolute;
    right: 20px;
    bottom: 28px;
    width: var(--hero-watermark-width, 167px);
    opacity: var(--hero-watermark-opacity, 0.2);
    z-index: var(--layer-flat);
    pointer-events: none;
  }

  .hero__watermark img {
    display: block;
    width: 100%;
    height: auto;
  }

  @media screen and (max-width: 749px) {
    /* スマホはテキストが画面幅いっぱいに広がるため、ロゴを下端に置くと重なる。
       テキストは下端中央のままにして、ロゴは右上に離して配置する */
    .hero__watermark {
      top: 16px;
      right: 16px;
      bottom: auto;
      width: var(--hero-watermark-width-mobile, 100px);
    }
  }

  /* 「画像に合わせる」高さ設定: ブロック(テキスト・ボタン)があっても、
     コンテナ自体に画像のアスペクト比を適用して高さを画像に追従させる */
  .hero--fit-to-image {
    min-height: 0;
  }

  .hero--fit-to-image .hero__container {
    min-height: 0;
    aspect-ratio: var(--hero-media-aspect-ratio, auto);
  }

  /* 改修版Figmaでは Hero フレーム(1400x788)が Utility Bar / Header とは別に
     定義されているため、Hero自体の高さ = 設定値 とする。
     テーマ標準の .hero は min-height から ヘッダー高さ(--hero-height-offset)を
     差し引く計算式のため、このHeroに限り差し引かないよう上書きする。
     section.idにはテンプレート単位のプレフィックス(例:
     template--19908676124785__hero_jVaWmY)が付くため、部分一致の属性セレクタで指定。
     旧実装の min-height: 640px !important (640px固定)はこの方式に置き換えた。 */
  [id*='hero_jVaWmY'].hero {
    /* svhは画面の「高さ」に対する割合のため、縦に長いウィンドウ(例: 1440x1222)では
       90svhが1100pxを超えてしまう。Figmaの788px相当を上限としてキャップし、
       画面が縦に短い場合だけ縮むようにする */
    min-height: min(var(--hero-min-height), var(--hero-max-height, 788px)) !important;
  }

  /* モバイルは section_height_mobile で高さを決める。
     旧実装が min-height: 0 !important / aspect-ratio(画像比率追従)で高さを
     潰していたため、同じ詳細度+!importantで打ち消す必要がある */
  @media screen and (max-width: 749px) {
    [id*='hero_jVaWmY'].hero {
      min-height: var(--hero-min-height-mobile, 75svh) !important;
    }

    [id*='hero_jVaWmY'] .hero__container {
      min-height: inherit !important;
      aspect-ratio: auto;
    }
  }

  /* Figma仕様: オーバーレイは0%(黒55%)→50%(黒5%)→100%(透明)の3段階グラデーション。
     overlayスニペットは2色グラデーションのみのため、トップページHero(hero_jVaWmY)に限定して上書き */
  [id*='hero_jVaWmY'] .overlay--gradient {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0) 100%) !important;
  }

  /* Figma仕様: 見出し(52px)は行間1.05・太さSemi Bold・幅560px。
     テーマの型プリセットには一致する行間/太さの組み合わせがないため上書き。
     グループ内にネストしたブロックはblock.idに親のハッシュ(例: ATExHRDlJMTR1L3dHS__button_shop_now)が
     前置されるため、完全一致のクラス名ではなく部分一致(属性セレクタ)で指定する */
  [class*='text_hero_heading'].custom-typography,
  [class*='text_hero_heading'].custom-typography > * {
    font-weight: 600 !important;
    line-height: 1.05 !important;
  }

  [class*='text_hero_heading'] {
    max-width: 560px !important;
  }

  /* Figma仕様: Heroボタンのpadding(横28px・縦14px)・角丸なし・文字太さSemi Bold・字間0.42px */
  a[class*='button_shop_now'],
  a[class*='button_apply_wholesale'] {
    padding-inline: 28px !important;
    padding-block: 14px !important;
    border-radius: 0 !important;
    font-weight: 600 !important;
    letter-spacing: 0.42px !important;
  }

  /* Figmaモバイル仕様(Cycle 2 Hero): 見出し32px・行間1.1、本文15px、
     ボタン間ギャップ10px(デスクトップは14px)。
     ボタンの縦積み・幅いっぱいはグループ/ボタンブロックのwidth_mobile設定側で対応済み */
  @media screen and (max-width: 749px) {
    [class*='text_hero_heading'].custom-typography,
    [class*='text_hero_heading'].custom-typography > * {
      font-size: 32px !important;
      line-height: 1.1 !important;
    }

    /* 実際の文字は外側divではなく内側の<p>(.custom-font-size > *が対象)に
       描画されるため、子要素にも同じ上書きを当てる必要がある */
    [class*='text_hero_body'],
    [class*='text_hero_body'] > * {
      font-size: 15px !important;
    }

    [class*='group_hero_buttons'] {
      --gap: 10px !important;
    }
  }

  /* Figma仕様: Heroは下辺のみに線を引く(上辺には引かない)。
     元は hero.liquid の .hero__container の中で border ショートカットの
     直後に置いていた。goride-custom.css はセクションのCSSより後に
     読み込まれるため、同じ詳細度でも後勝ちでショートカットを上書きできる */
  .hero__container {
    border-bottom: var(--hero-bottom-border-width, 0px) solid
      var(--hero-bottom-border-color, var(--color-border));
  }

/* ===== 記事ページ(templates/article.json) ===== */

/* 記事のアイキャッチ画像を、本文と同じ幅に揃える。

   本文(.blog-post-content)は max-width: var(--normal-content-width) = 42rem(672px)
   で中央寄せされているが、画像ブロックは width 設定が「幅いっぱい」のため
   セクションの幅(1360px)まで広がっていた。

   Horizonのファイルには手を入れず、ここで上限だけを与えている。
   本文と同じ変数を参照しているので、テーマ設定でコンテンツ幅を変えれば
   画像もそれに追従する。

   セレクタについて。実際に出力されるクラスはこうなっている。

     image-block image-block--AVVpFYjBKWXl4T3F6N__blog-post-image ...

   templates/*.json に書いたブロックIDには、その手前にハッシュが付く。
   つまり image-block--blog-post-image という並びは存在しないため、
   ブロックIDだけを部分一致で拾い、.image-block と組み合わせて絞り込む。

   (blog.json の _blog-post-image は別のブロックで .image-block を持たないため、
    この組み合わせなら記事ページのアイキャッチだけに当たる)

   モバイルは画面幅が672px未満のため、この上限は効かず今までどおり幅いっぱいになる。 */
.image-block[class*='blog-post-image'] {
  max-inline-size: var(--normal-content-width);
  margin-inline: auto;
}

/* ===== sections/slideshow.liquid ===== */

/* TOPのFV(スライドショー)の高さ。支給画像を切らないよう、画像と同じ縦横比にする。

   支給画像は PC 3840x1500(2.56:1)・スマホ 1080x1440(3:4)。
   2026-10-08時点で使っている8枚すべてがこの寸法。
   画像に文字やロゴが焼き込まれているため、端が切れると読めなくなる。

   もとは Figma仕様の PC 90vh(上限788px)・スマホ75vh を高さにしていたが、
   その比率は支給画像と一致せず object-fit: cover で左右が切れていた
   (例: 1920x788 は 2.44:1 で、画像の 2.56:1 より縦長なので左右が切れる。
    スマホは 390x590 = 0.66:1 で、画像の 0.75:1 に対し約12%切れていた)。
   画像を切らないことを優先してFigma仕様の高さは捨てている。
   このため超ワイドな画面ではFVが縦に大きくなる(2560px幅で約1000px)。
   上限を設けると設けた分だけ左右が切れるので、意図して上限を置いていない。

   高さは snippets/slideshow-styles.liquid が
   slideshow-slides { min-height: var(--slide-min-height) } で決めている
   (PCは min-width: 750px の中で --slide-min-height-desktop に切り替わる)。
   この下限(スマホ25rem=400px・PC45rem=720px)が残っていると、
   比率から出した高さの方が小さい画面で下限が勝ってまた切れる
   (PC1440pxなら比率上は563pxで、720pxの下限が勝ってしまう)。
   そのため min-height を打ち消してから aspect-ratio で高さを決める。
   min-height:0 はメディアクエリの外に1つ書けば足りる
   ([id] + 要素 の詳細度が Horizon 側の要素1つより強く、
    PC側のメディアクエリ内の指定にも勝つため)。

   750px の境目は blocks/_slide.liquid の <picture> の出し分け
   (max-width: 749px)と対になっている。片方だけ動かすと、
   スマホ用画像にPCの比率が当たって切れる。

   TOPのFV以外のスライドショーに影響しないよう、セクションIDでスコープする。 */
[id*='fv_slideshow'] slideshow-slides {
  min-height: 0;
  aspect-ratio: 1080 / 1440;
}

@media screen and (min-width: 750px) {
  [id*='fv_slideshow'] slideshow-slides {
    aspect-ratio: 3840 / 1500;
  }
}

/* スマホ専用画像を <picture> で出し分けているため
   (blocks/_slide.liquid の「CUSTOM START: スマホ専用画像」)、
   画像が .slide__image-container の直接の子ではなくなる。

   Horizon 側は
     .slide__image-container > .slide__image { width/height 100%; object-fit: cover }
   と直接の子セレクタで書いているので、間に <picture> が挟まると効かなくなる。
   picture と、その中の img の両方に当て直す。

   スマホ用画像を設定していないスライドは <picture> で包まれないため、
   従来どおり Horizon 側のルールが効く。 */
.slide__image-container > .slide__picture {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide__image-container > .slide__picture > .slide__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* ===== snippets/slideshow-arrows.liquid ===== */

/* スライドショーの矢印ボタンのフォーカス枠線が切れる問題。

   base.css の *:focus-visible は --focus-outline-offset: 0.2em で
   枠線を要素の外側に描く。矢印ボタンは
   slideshow-arrows { position: absolute; inset: 0 } により
   画像領域のちょうど端に置かれているため、外側にはみ出した分が
   画像領域の外に出て見えなくなる。商品ページのギャラリーと
   商品カードの両方で起きる。

   枠線を内側に描いて収める。値は Horizon の .focus-inset(base.css)と同じ。
   outline-offset だけを変えており、太さ・色・形は標準のままにしている。

   なおWCAG上の不合格ではない(2.4.7 はフォーカス位置が見えることしか
   要求せず、枠線の全周が見えることを求めるのは WCAG 2.2 の別項目)。
   Phase 1-6 の動作確認中に見つかった見た目の問題として直している。 */
slideshow-arrows .slideshow-control:focus-visible {
  outline-offset: calc(var(--focus-outline-width) * -1);
}

/* ===== 外部アプリ対策(Globo Form Builder) ===== */

/* /pages/get-a-free-catalog の資料請求フォーム。
   ADA監査(2026-09-03)の B6(ラベルのコントラスト不足・10件)と
   B5(フォーカスリングが見えない)への対処。
   詳細は docs/ada-accessibility-plan.md の 1-B / 1-C / 3-2。

   なぜテーマ側から直せるのか。
   同じくフォームアプリでも Shopify Forms は Shadow DOM の中に描画されるため
   テーマのCSSが一切届かない(contact / wholesale の B1・B2 が直せないのはこのため)。
   Globo は通常のDOMに描画されるので、ここからの上書きが効く。

   セレクタについて。
   監査レポートには id="161470-name-1" のような指定が載っているが、
   この 161470 はフォームのインスタンス番号で、アプリ側でフォームを
   作り直すと変わる。そのため id は使わず、クラスと data 属性で当てている。

   詳細度について。
   Globo はフォーム本体の直前に <style> を注入する(レポート p.46 で
   <style> 要素が指摘されているのがそれ)。body内の<style>は
   head で読み込むこのファイルより後になるため、詳細度が同じだと
   あちらが勝つ。

   そこでまず、属性セレクタや要素名を足して一段上げる方法を試したが
   (.label-content に対して .label-content[data-label] のように)、
   実機で確認したところ色の指定は負けていた。勝敗は次のとおり。

     .label-content[data-label]                 (0,2,0)  負け
     input.material_outlined-input              (0,1,1)  負け
     .checkbox-label.globo-option:focus-visible (0,3,0)  勝ち
     button.wizard__submit:focus-visible        (0,2,1)  勝ち

   Globo 側の色指定が (0,2,0) 以上でこのファイルより後に来るため、
   属性セレクタ1つでは届かない。

   このため **色だけ !important を付けている。** フォーカスの枠線は
   詳細度だけで勝てているので付けていない。
   使い分けの理由がこれ。安易に付けたものではない。

   もし将来また効かなくなったら、詳細度が上がったのか
   インライン style 属性で色が入るようになったのかを
   DevTools の Computed で確認する(手順は docs/theme-update-guide.md 5-12)。

   色について。
   #101820ad は sections/goride-about-header.liquid、
   snippets/goride-wholesale-gate-styles.liquid と同じ値(前景色の68%)。
   このプロジェクトで「薄いが基準を満たす文字色」として統一している。
   白い入力欄の上で約6.1:1、ページ背景 #EFEFEF の上で約5.3:1。

   副作用。
   このフォームのラベルは未入力のとき入力欄の中に placeholder のように
   表示される作りなので、濃くすると「入力済みの値」に見えやすくなる。
   コントラスト基準(4.5:1)を満たすには避けられないトレードオフ。 */
.label-content[data-label],
.label-content[data-label] p {
  color: #101820ad !important;
}

/* 入力欄に打ち込んだ文字。監査で 10件のうちに入力欄自体が挙がっていたため、
   前景色そのもの(背景が白で約15:1)にする。
   打ち込んだ値は本文と同じ扱いなので、薄くせずサイトの前景色に揃える。 */
input.material_outlined-input,
textarea.material_outlined-input {
  color: #101820 !important;
}

/* 同意チェックボックス・その中のPrivacy Policyリンク・送信ボタンの
   フォーカス枠。この3つだけ枠線が出ないと報告があったため足している。

   base.css の *:focus-visible は詳細度(0,1,0)の全称ルールなので、
   Globo 側に outline を消すルールがあると負ける。ここで一段上の
   詳細度で描き直す。太さ・位置は Horizon 標準のトークンをそのまま使い、
   色だけ currentcolor ではなく前景色を明示している
   (ラベル文字が薄い色を継いでいると枠線まで薄くなるため)。

   同意チェックボックスのラベルの指定は、下の「本体を隠す方式を変える」で
   本体がフォーカスできるようになったため通常は使われない。
   JSが動かなかったときにラベルの tabindex が残る場合の保険として置いてある。 */
.checkbox-label.globo-option:focus-visible,
.label-content[data-label] a:focus-visible,
button.wizard__submit:focus-visible {
  outline: var(--focus-outline-width) solid #101820;
  outline-offset: var(--focus-outline-offset);
}

/* 同意チェックボックス本体の隠し方を変える。

   ■ 何が問題だったか

   アプリのマークアップはこうなっている。

     <div class="checkbox-wrapper">
       <input class="checkbox-input" type="checkbox">   <- display: none
       <label tabindex="0" class="checkbox-label globo-option">...</label>
       <small class="messages"></small>
     </div>

   本体は display: none で消され、画面の四角は <label> の擬似要素が描いている。
   よくある「見た目を自作する」やり方だが、消し方に display: none を使うと
   要素がフォーカス不可になり、アクセシビリティツリーからも消える。

     キーボード     : Space が効かない -> チェックできない
     読み上げソフト : チェックボックスとして認識されない

   同意は必須項目なので、キーボードだけの利用者は送信できない。
   WCAG 2.1.1(Level A)と 4.1.2(Level A)の両方に該当する。

   ■ ここでやっていること

   「見えないがフォーカスはできる」隠し方に変える。1pxに縮めて
   clip-path で切り取る方式で、Horizon の .visually-hidden(assets/base.css)や
   スキップリンクと同じ考え方。読み上げソフトからは見える状態が保たれる。

   これで Space での切り替えはブラウザの標準動作が担当する。
   キー操作を自作していないので、アプリ側が将来同じ修正を入れても
   二重に反応することはない。

   position: absolute にしているのは、本来 display: none で場所を取って
   いなかった要素を流し込むとレイアウトがずれるため。
   基準にする .checkbox-wrapper 側に position: relative を足している。

   ラベルの tabindex="0" を外すのは snippets/goride-globo-form-a11y.liquid の
   仕事。属性はCSSでは消せない。片方だけ消さないこと。 */
.checkbox-wrapper {
  position: relative;
}

.checkbox-wrapper .checkbox-input {
  display: block !important;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* 本体は見えないので、フォーカス枠はラベル(画面に見えている四角と文字)に出す。
   マークアップ上 input の直後が label なので隣接セレクタで当たる。 */
.checkbox-wrapper .checkbox-input:focus-visible + .checkbox-label {
  outline: var(--focus-outline-width) solid #101820;
  outline-offset: var(--focus-outline-offset);
}

/* ===== blocks/_blog-post-description.liquid ===== */

/* Journal一覧ページ(templates/blog.json)の記事カードにある「READ MORE」を、
   トップの Featured blog posts にある「VIEW ALL」と同じ
   下線付きリンクボタンに揃える。
   対になる VIEW ALL 側のスタイルは上の
   「sections/featured-blog-posts.liquid」の節(.featured-blog-posts__view-all)。

   セレクタについて。
   .blog-post-card__content-text の中身は _blog-post-description.liquid が
   `content | strip_html` して出力するため、この中に現れる <a> は
   read more リンクただ1つだけ。記事本文中のリンクを巻き込む心配はない。
   (同じブロックを使う _featured-blog-posts-card.liquid は
    show_read_more: false なので、そもそもリンクを出さない)

   Horizon側の既定値は3か所に分かれている。

   (1) blocks/_blog-post-card.liquid  .blog-post-card__content a
         display: block / text-decoration: none / padding-block-start: 0.75rem
   (2) blocks/_blog-post-description.liquid  .blog-post-card__content-text a
         color: currentcolor
   (3) assets/base.css  .text-block > *:first-child
         margin-block-start: 0

   (1)(2)はクラス1個+要素1個でこちらと同じ強さなので、後に読まれる
   goride-custom.css が素直に勝つ。

   だが(3)には勝てない。セレクタを
   `.blog-post-card__content .blog-post-card__content-text a` と
   親クラスまで書いているのはそのため。理由は2つある。

   まず(3)が当たること自体が分かりにくい。このブロックは
   `text-block` クラスを持ち、中身は「本文のテキスト」と「read moreリンク」
   だけだが、テキストの方は**要素ではない**ので、
   要素として数えると <a> が :first-child になってしまう。

   そして詳細度。`.text-block > *:first-child` の `*` は0と数えるので
   実質クラス2個ぶんあり、`.blog-post-card__content-text a`
   (クラス1個+要素1個)より強い。読み込み順は関係なく負ける。
   実際これで margin-block-start だけが効かず、
   display と padding は効く、という分かりにくい状態になった。 */

/* 下線(border-block-end)を文字の長さに揃えるために3つ指定している。
   既定の display: block のままだと線がカード幅いっぱいに伸びるため。
     display: inline-block  通常の流れのとき
     inline-size: fit-content  block化されても幅を内容に合わせるための保険
     align-self: flex-start  親がflexコンテナのとき
   flexコンテナの子は inline-block が block に変換される(blockify)うえ、
   align-items の既定値 stretch で幅いっぱいに伸ばされるため、
   display だけでは足りない。

   本文との間隔は既定では padding-block-start: 0.75rem だったが、
   padding のままだと下線の内側に余白が入ってしまうので margin に移した。
   値を0.75remから1.25remに広げているのは、文字サイズを本文の16pxから14pxに
   下げたぶん行の高さが縮み、元の12pxでは本文に詰まって見えたため。

   letter-spacing と font-size は VIEW ALL と同じ値にしてある
   (0.03em / 14px)。片方だけ変えると書式が揃わなくなる。

   文言「...」の除去は locales/en.default.json の content.read_more で行い、
   大文字化はここの text-transform で行う。 */
.blog-post-card__content .blog-post-card__content-text a {
  display: inline-block;
  inline-size: fit-content;
  align-self: flex-start;
  margin-block-start: 1.25rem;
  padding-block: 0 4px;
  border-block-end: 1px solid currentcolor;
  color: var(--color-foreground);
  font-family: var(--font-body--family);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: var(--letter-spacing--body-loose);
  line-height: normal;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

/* VIEW ALL と同じ、色ではなく不透明度で反応させる。
   Horizon既定(.blog-post-card__content-text a:hover)は色を薄くするため、
   色は明示的に据え置く。 */
.blog-post-card__content .blog-post-card__content-text a:hover {
  color: var(--color-foreground);
  opacity: 0.7;
}

/* ===== blocks/buy-buttons.liquid ===== */

/* 再入荷の案内は、カート追加ボタンの文言そのものを差し替える形にしたので
   専用のCSSは持たない。無効状態のボタンの見た目がそのまま使われる。
   ボタンを消して独自の要素に置き換える作りは、バリエーション切り替えを
   壊すため採ってはいけない。理由は docs/theme-update-guide.md 付録F-23。 */