/* 動画ギャラリーページ専用（既存パーツの見た目を崩さない範囲で上書き） */

.video-archive {
  /* 古い電子カタログ由来のタブ領域はページ差し替え用に非表示 */
}

.video-archive .tab-v2.js-news-search {
  display: none;
}

/* カードグリッド（PCは横4列、SPは1列） */
.video-archive-page__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 35px 15px;
}

.video-archive-page__grid .card-v3 {
  width: calc((100% - 45px) / 4);
}

.video-archive-page__grid .card-v3__type--blank {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.video-archive-page__grid .card-v3__head,
.video-archive-page__grid .card-v3__image {
  width: 100%;
  max-width: none;
}

.video-archive-page__grid .card-v3__body {
  width: 100%;
  margin-left: 0;
  padding: 12px 14px 14px;
}

.video-archive-page__grid .card-v3__image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.video-archive-card__title {
  font-size: 1.6rem;
  font-weight: 700;
}

/* card-v3 共通のタイトル右アイコン（別タブ想定スプライト）を出さない */
.video-archive .video-archive-page__grid .card-v3 .card-v3__type--blank .card-v3__title.video-archive-card__title::after,
.video-archive .video-archive-page__grid .card-v3 .card-v3__type--blank .video-archive-card__title::after {
  content: none !important;
  background: none !important;
  background-image: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.video-archive-card__desc {
  font-size: 14px;
  font-weight: 400;
  margin: 6px 0 0;
  line-height: 1.6;
}

.video-archive-card__meta {
  margin-top: 6px;
}

.video-archive-card__date {
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  color: #666;
}

.video-archive-card__lang-note {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: #666;
}

.video-archive-card__lang-sep {
  display: inline-block;
  margin: 0 6px;
  color: #9a9a9a;
}

/* モーダル（タブのコンパクト化 / iframe比率調整） */
.modal--video-archive .video-archive-modal__tabs .tab-v2__label {
  font-size: 1.4rem;
}

.modal--video-archive .video-archive-modal__player {
  margin-top: 14px;
}

.video-archive-modal__video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.video-archive-modal__video-container iframe {
  width: 100%;
  height: 100%;
}

.video-archive-modal__player {
  padding-bottom: 2px;
}

@media only screen and (max-width: 767.98px) {
  .video-archive-page__grid .card-v3 {
    width: 100%;
  }

  .modal--video-archive .video-archive-modal__player {
    margin-top: 10px;
  }

  /* SP時：タブエリアの下側角丸は削って、PC同様に上側だけ角丸にする */
  .video-archive-modal__tabs .tab-v2__list,
  .modaal-content-container .video-archive-modal__tabs .tab-v2__list {
    border-radius: 15px 15px 0 0;
  }

}

/* モーダル内タブを少し小さめに */
.modal--video-archive .video-archive-modal__tabs .tab-v2__button {
  padding: 6px 10px;
  text-decoration: none;
}

.modal--video-archive .video-archive-modal__tabs .tab-v2__label {
  font-size: 1.2rem;
}

.modal--video-archive .video-archive-modal__tabs .js-video-archive-modal__tablist li.active .tab-v2__button,
.modal--video-archive .video-archive-modal__tabs .js-video-archive-modal__tablist li.is-current .tab-v2__button {
  background-color: #0091ba;
  border-color: #0091ba;
  color: #fff;
}

/* 利用不可言語はタブを残したまま無効表示（薄い灰色背景＋押せない見た目） */
.video-archive-modal__tabs .js-video-archive-modal__tablist > li.is-disabled > .js-video-archive-modal__tab,
.video-archive-modal__tabs .js-video-archive-modal__tablist > li > .js-video-archive-modal__tab.is-disabled,
.modaal-content-container .video-archive-modal__tabs .js-video-archive-modal__tablist > li.is-disabled > .js-video-archive-modal__tab,
.modaal-content-container .video-archive-modal__tabs .js-video-archive-modal__tablist > li > .js-video-archive-modal__tab.is-disabled {
  background: #eee !important;
  border-color: #ddd !important;
  color: #999 !important;
  box-shadow: none !important;
  opacity: 0.75;
  cursor: not-allowed !important;
  pointer-events: none !important;
  font-weight: 400 !important;
}

.video-archive-modal__tabs .js-video-archive-modal__tablist > li.is-disabled > .js-video-archive-modal__tab:hover,
.video-archive-modal__tabs .js-video-archive-modal__tablist > li > .js-video-archive-modal__tab.is-disabled:hover,
.modaal-content-container .video-archive-modal__tabs .js-video-archive-modal__tablist > li.is-disabled > .js-video-archive-modal__tab:hover,
.modaal-content-container .video-archive-modal__tabs .js-video-archive-modal__tablist > li > .js-video-archive-modal__tab.is-disabled:hover {
  background: #eee !important;
  border-color: #ddd !important;
  color: #999 !important;
}

.modal--video-archive .video-archive-modal .heading3 {
  margin-top: 0;
}

.modaal-content-container .modal--video-archive .video-archive-modal .heading3,
.modaal-content-container .video-archive-modal .heading3 {
  margin-top: 0 !important;
}

/* モーダル内タブ：3言語時と同じ「1列＝約33%」幅（単一言語時も横幅いっぱい／文字幅に縮みすぎない） */
@media print, screen and (min-width: 768px) {
  .video-archive-modal__tabs .tab-v2__list,
  .modaal-content-container .video-archive-modal__tabs .tab-v2__list {
    justify-content: flex-start !important;
  }

  /* li+li の margin-left: 0.6em ×2 分を除いた3等分（既存 tab-v2 と同じ前提） */
  .video-archive-modal__tabs .tab-v2__list > li,
  .modaal-content-container .video-archive-modal__tabs .tab-v2__list > li {
    flex: 0 0 calc((100% - 1.2em) / 3) !important;
    width: calc((100% - 1.2em) / 3) !important;
    max-width: calc((100% - 1.2em) / 3) !important;
    box-sizing: border-box;
  }

  .video-archive-modal__tabs .tab-v2__list > li .tab-v2__button,
  .modaal-content-container .video-archive-modal__tabs .tab-v2__list > li .tab-v2__button {
    width: 100%;
    box-sizing: border-box;
  }
}

/* YouTubeリンク（製品情報TOP「グループ会社」と同じ product-link-zone04 系） */
.video-archive__youtube-links {
  margin-top: 40px;
}

.video-archive__youtube-links .product-link-zone04 .product-link-zone04-p01 a.video-archive__youtube-zone-link {
  display: flex;
  align-items: center;
  gap: 12px;
}

.video-archive__youtube-zone-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: block;
  object-fit: contain;
}

.video-archive__youtube-zone-main {
  flex: 1 1 auto;
  min-width: 0;
}