@charset "utf-8";

/* ==========================================================================
   Honda / 新しい取り組み (new-initiative) — page specific
   レイアウト・タイポグラフィ・カードは共通CSS(modules-2026.css)が持つ。
   グローバルヘッダー・フッターはCMSが自動付加するため、本ファイルは持たない。
   ========================================================================== */

/* ---------- breadcrumb: 区切りアイコンの形状修正 ----------
   共通CSSは区切り領域を 16px × 9px（横長）で確保しているが、
   icon-arrow-right.svg は 31 × 44（縦長）のシェブロン。
   mask-size: contain だと縦幅9pxに合わせて横2pxまで縮み、
   マスクが実質全面を覆って background-color の四角に見えてしまう。
   矢印の縦横比（31:44）を保った寸法に正し、-webkit-mask-* も補う。 */
@media (width >= 769px) {
  /* 矢印の幅を変数で正すことで、__list の gap と ::after の right が自動で整合する */
  .module-breadcrumb {
    --breadcrumb-arrow-width: 8px;
  }
  .module-breadcrumb__item::after {
    height: 11px;
    top: 50%;
    transform: translateY(-50%);
    /* mask を使わず背景画像で描画する（マスク非対応環境で塗り四角になるのを防ぐ） */
    background-color: transparent;
    background-image: url(/jp/common/modules-2026/assets/images/icon/modules/icon-arrow-right.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    mask-image: none;
  }
}

/* ---------- 読み上げ専用テキスト ----------
   外部サイトへのリンクは別ウィンドウで開くため、視覚的な別窓アイコンだけに頼らず
   スクリーンリーダー利用者にも遷移方法を伝える。 */
.u-srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- focus ---------- */
:focus-visible {
  outline: 2px solid #1167a8;
  outline-offset: 2px;
}

/* ---------- カード画像の画角統一 ----------
   共通CSSは画像領域を height:100% としており、高さがテキスト側の分量に依存する。
   そのため素材の縦横比（1.41 / 1.78 / 1.91 と混在）がそのまま出て画角が揃わない。
   otherbusinesses トップと同じ 520 x 347（3:2）に固定し、
   はみ出しは object-fit: cover（共通CSS側で指定済み）でトリミングする。 */
.module-media-category-top-link-card__image {
  aspect-ratio: 3 / 2;
  height: auto;
}

.module-media-category-top-link-card__image-img {
  aspect-ratio: 3 / 2;
  display: block;
  height: 100%;
}

/* ---------- 受賞ロゴのトリミング回避 ----------
   SOUND SITTER の素材は 980x550（比率1.78）で、3:2 の枠に cover で収めると
   左右が各 78px 切られる。受賞ロゴ（日本おもちゃ大賞 / TAKARA TOMY A.R.T.S）は
   左下にあるため、既定の center では左端が欠ける。
   object-position を左寄せにして、切り落としを右側（余白）に寄せる。 */
.module-media-category-top-link-card__image-img.is-focus-left {
  object-position: left center;
}

/* ---------- 外部サイトアイコンの出し分け ----------
   共通CSSは __button-text::after に「枠から矢印が出る」外部サイトアイコン
   (icon-module-template-link-list-icon.svg) を全カードへ無条件で付ける。
   global.honda/jp/ 配下は同一サイト内遷移なので外部アイコンは不要。
   is-external が付いたカードだけ外部リンクアイコンを付与。
   位置は共通CSS側の指定をそのまま使い、画像・サイズだけ上書きする。 */
.module-media-category-top-link-card__item.is-external .module-media-category-top-link-card__button-text::after {
  background-image: url(/jp/common/modules-2026/assets/images/icon/modules/icon-blank.svg);
  width: 12px;
}@charset "utf-8";

/* ==========================================================================
   Honda / 新しい取り組み (new-initiative) — page specific
   レイアウト・タイポグラフィ・カードは共通CSS(modules-2026.css)が持つ。
   グローバルヘッダー・フッターはCMSが自動付加するため、本ファイルは持たない。
   ========================================================================== */

/* ---------- breadcrumb: 区切りアイコンの形状修正 ----------
   共通CSSは区切り領域を 16px × 9px（横長）で確保しているが、
   icon-arrow-right.svg は 31 × 44（縦長）のシェブロン。
   mask-size: contain だと縦幅9pxに合わせて横2pxまで縮み、
   マスクが実質全面を覆って background-color の四角に見えてしまう。
   矢印の縦横比（31:44）を保った寸法に正し、-webkit-mask-* も補う。 */
@media (width >= 769px) {
  /* 矢印の幅を変数で正すことで、__list の gap と ::after の right が自動で整合する */
  .module-breadcrumb {
    --breadcrumb-arrow-width: 8px;
  }
  .module-breadcrumb__item::after {
    height: 11px;
    top: 50%;
    transform: translateY(-50%);
    /* mask を使わず背景画像で描画する（マスク非対応環境で塗り四角になるのを防ぐ） */
    background-color: transparent;
    background-image: url(/jp/common/modules-2026/assets/images/icon/modules/icon-arrow-right.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    mask-image: none;
  }
}

/* ---------- 読み上げ専用テキスト ----------
   外部サイトへのリンクは別ウィンドウで開くため、視覚的な別窓アイコンだけに頼らず
   スクリーンリーダー利用者にも遷移方法を伝える。 */
.u-srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- focus ---------- */
:focus-visible {
  outline: 2px solid #1167a8;
  outline-offset: 2px;
}

/* ---------- カード画像の画角統一 ----------
   共通CSSは画像領域を height:100% としており、高さがテキスト側の分量に依存する。
   そのため素材の縦横比（1.41 / 1.78 / 1.91 と混在）がそのまま出て画角が揃わない。
   otherbusinesses トップと同じ 520 x 347（3:2）に固定し、
   はみ出しは object-fit: cover（共通CSS側で指定済み）でトリミングする。 */
.module-media-category-top-link-card__image {
  aspect-ratio: 3 / 2;
  height: auto;
}

.module-media-category-top-link-card__image-img {
  aspect-ratio: 3 / 2;
  display: block;
  height: 100%;
}

/* ---------- 横長素材のトリミング位置調整 ----------
   3:2 の枠に cover で収めると、横長素材は左右が切り落とされる。
   主題が左寄りにある素材は、既定の center では左端が欠ける。
     - SOUND SITTER: 980x550（比率1.78）。受賞ロゴが左下 x=24 起点
     - UNI-ONE:      2048x808（比率2.54）。子どもと本体が左寄り
   object-position を左寄せにして、切り落としを右側（背景）へ寄せる。 */
.module-media-category-top-link-card__image-img.is-focus-left {
  object-position: left center;
}

/* ---------- 外部サイトアイコンの出し分け ----------
   共通CSSは __button-text::after に「枠から矢印が出る」外部サイトアイコン
   (icon-module-template-link-list-icon.svg) を全カードへ無条件で付ける。
   global.honda/jp/ 配下は同一サイト内遷移なので外部アイコンは不要。
   is-external が付いたカードだけ外部リンクアイコンを付与。
   位置は共通CSS側の指定をそのまま使い、画像・サイズだけ上書きする。 */
.module-media-category-top-link-card__item.is-external .module-media-category-top-link-card__button-text::after {
  background-image: url(/jp/common/modules-2026/assets/images/icon/modules/icon-blank.svg);
  width: 12px;
}

/* ---------- カードタイトルの寄せ指定 ----------
    共通CSSは card__title を 1080px 以上で text-align: center にしている。
    個別に寄せたいカードだけ、同じ条件で上書きする。
      - 暮らしの中の道具: Tarpchair=左 / まもってトート=右
      - 技術で拓く新領域: Honda DREAMO=左 / Honda Motanion=左
    SP（1080px未満）は共通CSSの左寄せのままで、1カラム時の読み順を崩さない。 */
@media print, screen and (width >= 1080px) {
  .module-media-category-top-link-card__title.is-align-left {
    text-align: left;
  }
  .module-media-category-top-link-card__title.is-align-right {
    text-align: right;
  }
}