/* =============================================
   resource_center.css  |  お役立ち情報ページ専用スタイル
   outline.css の oc- 変数・コンポーネントを継承
   ============================================= */

/* ── main#contents リセット ── */
body.page_resource_center {
  overflow-x: hidden;
}

body.page_resource_center main#contents {
  max-width     : none;
  width         : 100%;
  padding-left  : 0;
  padding-right : 0;
  padding-bottom: 0;
}

/* ── oc-container を 1440px へ拡張 ── */
body.page_resource_center .oc-container {
  max-width     : 1440px;
  padding-inline: clamp(24px, 5vw, 80px);
}

/* ── パンくずリストを 1440px 基準左端に揃える ── */
body.page_resource_center #locator_template_c2 .inner {
  max-width   : none !important;
  margin-left : 0    !important;
  padding-left: max(clamp(24px, 5vw, 80px), calc((100vw - 1440px) / 2 + clamp(24px, 5vw, 80px))) !important;
}

/* ── ヒーロー：.full-width の padding を打ち消し、1440px 基準で位置合わせ ── */
body.page_resource_center .page-header.oc-hero {
  padding-left : 0;
  padding-right: 0;
}

body.page_resource_center .page-header.oc-hero .page-header__inner {
  align-items  : center;
  padding-top  : 130px; /* 固定ヘッダー高さ分オフセット → 見える領域の中央に収める */
  padding-left : max(clamp(24px, 5vw, 80px), calc((100vw - 1440px) / 2 + clamp(24px, 5vw, 80px)));
  padding-right: max(clamp(24px, 5vw, 80px), calc((100vw - 1440px) / 2 + clamp(24px, 5vw, 80px)));
}

/* ── ヒーロー サブテキスト ── */
.rc-hero-sub {
  color      : rgba(255, 255, 255, 0.85);
  font-size  : clamp(13px, 1.2vw, 16px);
  margin-top : 14px;
  line-height: 1.75;
  max-width  : 560px;
}

/* ── アンカーナビゲーション（メニューバー） ── */
/* position:sticky は親 #dcms_layoutPageBlock の overflow:hidden で無効になるため
   JS（initStickyNav）で is-stuck クラスを付与して fixed 化する */
.rc-anchor-nav {
  background  : var(--oc-navy);
  border      : none;
}

/* JS が付与：ヘッダー直下に固定 */
.rc-anchor-nav.is-stuck {
  position  : fixed;
  top       : 0; /* JS で上書き */
  left      : 0;
  right     : 0;
  z-index   : 9;   /* .global-header_area の z-index:10 より低く設定 */
  box-shadow: 0 4px 16px rgba(3, 38, 71, 0.22);
}

.rc-anchor-nav .oc-container {
  padding-top   : 0;
  padding-bottom: 0;
}

.rc-anchor-nav__list {
  display        : flex;
  flex-wrap      : nowrap;
  overflow-x     : auto;
  gap            : 0;
  list-style     : none;
  margin         : 0;
  padding        : 0;
  scrollbar-width: none;
}

.rc-anchor-nav__list::-webkit-scrollbar {
  display: none;
}

.rc-anchor-nav__list br {
  display: none;
}

.rc-anchor-nav__list a {
  display        : flex;
  align-items    : center;
  padding        : 0 22px;
  height         : 48px;
  white-space    : nowrap;
  background     : transparent;
  color          : rgba(255, 255, 255, 0.75);
  font-family    : 'Noto Sans JP', sans-serif;
  font-size      : 13px;
  font-weight    : 700;
  text-decoration: none;
  transition     : color 0.2s var(--oc-ease),
                   background 0.2s var(--oc-ease);
}

.rc-anchor-nav__list a:hover,
.rc-anchor-nav__list a:focus-visible {
  color     : #fff;
  background: rgba(255, 255, 255, 0.12);
}

.rc-anchor-nav__list a.is-active {
  color     : #fff;
  background: rgba(255, 255, 255, 0.18);
}

/* ── outline.css の oc-section-heading 赤上罫線をこのページでは廃止 ──
   6セクション分の赤線が連続するとくどいため、グレーの薄い罫線に変更 */
body.page_resource_center .oc-section-heading {
  border-top-color: var(--oc-border);
  border-top-width: 1px;
}

/* ── コンテンツセクション ── */
.rc-content-section {
  padding-bottom: 64px;
}

.rc-content-section:last-of-type {
  padding-bottom: 80px;
}

/* ── セクション内テキスト ── */
.rc-section-text {
  font-size  : 15px;
  line-height: 1.85;
  color      : var(--oc-text);
  margin-top : 4px;
}

/* ── セクション下部ボタン ── */
.rc-section-footer {
  margin-top: 36px;
  text-align: center;
}

/* ── ボタン（oc-hero-cta と同スタイル） ── */
.rc-btn {
  display         : inline-flex;
  align-items     : center;
  gap             : 10px;
  padding         : 12px 24px;
  background-color: var(--oc-red);
  color           : #fff !important;
  font-family     : 'Noto Sans JP', sans-serif;
  font-weight     : 700;
  font-size       : clamp(12px, 1vw, 14px);
  letter-spacing  : 0.04em;
  text-decoration : none !important;
  border          : 2px solid var(--oc-red);
  transition      : background-color 0.25s var(--oc-ease),
                    color 0.25s var(--oc-ease);
}

.rc-btn::after {
  content     : '';
  display     : block;
  width       : 7px;
  height      : 7px;
  border-top  : 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform   : translateX(0px) rotate(45deg);
  flex-shrink : 0;
  transition  : transform 0.35s ease-out;
}

.rc-btn:hover,
.rc-btn:focus-visible {
  background-color: #a81220;
  border-color    : #a81220;
  outline-offset  : 3px;
}

.rc-btn:hover::after,
.rc-btn:focus-visible::after {
  transform: translateX(6px) rotate(45deg);
}

/* ── 動画グリッド ── */
.rc-video-grid {
  display              : grid;
  grid-template-columns: repeat(3, 1fr);
  gap                  : 28px;
  margin-top           : 8px;
}

.rc-video-item {
  display       : flex;
  flex-direction: column;
  gap           : 12px;
}

.rc-video-embed {
  position   : relative;
  padding-top: 56.25%;
  background : var(--oc-navy);
  overflow   : hidden;
}

.rc-video-embed iframe {
  position: absolute;
  inset   : 0;
  width   : 100%;
  height  : 100%;
  border  : 0;
}

.rc-video-item p {
  font-size  : 14px;
  line-height: 1.65;
  color      : var(--oc-text);
  margin     : 0;
}

/* ── CMS ブログリスト：4列グリッドカード ── */
.download_list {
  display  : flex;
  flex-wrap: wrap;
  gap      : 20px;
  margin-top: 16px;
}

/* カード1件 */
.download_list .boxlink,
.download_list .js-boxlink {
  display        : flex;
  flex-direction : column;
  position       : relative;
  width          : calc(25% - 15px) !important;
  min-width      : 200px !important;
  margin         : 0 !important;
  background     : #fff !important;
  box-shadow     : none !important;
  border         : 1px solid var(--oc-border) !important;
  text-decoration: none !important;
  overflow       : hidden !important;
  transition     : box-shadow 0.22s var(--oc-ease);
}

.download_list .boxlink:hover,
.download_list .js-boxlink:hover {
  box-shadow: 0 4px 20px rgba(3, 38, 71, 0.10) !important;
}

/* サムネイル：カード上部・横幅いっぱい
   ドキュメント画像は文字入りのため object-fit:cover でクロップせず
   自然な縦横比のまま全体を表示する。
   <span> はインライン要素のため display:block が必須。 */
.download_list .top-media_thumb {
  display    : block !important;
  position   : relative !important;
  width      : 100% !important;
  max-width  : 100% !important;
  padding-top: 0 !important;
  height     : auto !important;
  overflow   : hidden !important;
  background : #fff !important;
  order      : 1 !important;
  flex-shrink: 0 !important;
}

.download_list .top-media_thumb img {
  display   : block !important;
  position  : static !important;
  top       : auto !important;
  left      : auto !important;
  width     : 100% !important;
  height    : auto !important;
  max-width : 100% !important;
  transform : none !important;
  transition: transform 0.4s var(--oc-ease) !important;
}

.download_list .boxlink:hover .top-media_thumb img,
.download_list .js-boxlink:hover .top-media_thumb img {
  transform: scale(1.04) !important;
}

/* テキストエリア：サムネイル下 */
.download_list .top-media_box {
  order      : 2;
  flex       : 1;
  display    : flex;
  width      : 100%;
}

.download_list .top-media_item {
  display       : flex;
  flex-direction: column;
  width         : 100%;
  background    : none;
  box-shadow    : none;
}

.download_list .top-media_txtarea {
  padding: 16px 18px 8px;
}

.download_list .top-media_date {
  display       : block;
  font-family   : 'IBM Plex Sans', sans-serif;
  font-size     : 11px;
  font-weight   : 500;
  letter-spacing: 0.1em;
  color         : var(--oc-red);
  margin-bottom : 8px;
}

.download_list .top-media_title {
  margin: 0;
}

.download_list .top-media_title a {
  display    : block;
  font-size  : 14px !important;
  font-weight: 700 !important;
  color      : var(--oc-navy) !important;
  line-height: 1.6 !important;
  transition : color 0.2s var(--oc-ease);
}

.download_list .top-media_title a::after {
  display: none !important;
}

.download_list .boxlink:hover .top-media_title a,
.download_list .js-boxlink:hover .top-media_title a {
  color: var(--oc-red) !important;
}

/* カード下部の「詳しく →」テキストリンク */
.download_list .top-media_item::after {
  content      : '詳しく見る';
  display      : flex;
  align-items  : center;
  gap          : 6px;
  font-size    : 12px;
  font-weight  : 700;
  color        : var(--oc-red);
  padding      : 10px 18px 16px;
  margin-top   : auto;
  transition   : gap 0.2s var(--oc-ease);
}

.download_list .boxlink:hover .top-media_item::after,
.download_list .js-boxlink:hover .top-media_item::after {
  gap: 10px;
}

/* カテゴリ・ボタン類は非表示 */
.download_list .top-media_category,
.download_list .top-media_btn,
.download_list .md-link_btn,
.download_list ._nversion,
.download_list ._min {
  display: none !important;
}

.download_list .boxlink a,
.download_list .js-boxlink a {
  display        : block;
  text-decoration: none;
}

/* ── レスポンシブ ── */

@media screen and (max-width: 1100px) {
  .rc-video-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 679px) {
  .rc-anchor-nav__list a {
    padding: 0 14px;
    font-size: 12px;
  }

  .rc-video-grid {
    grid-template-columns: 1fr;
  }

  .rc-content-section {
    padding-bottom: 48px;
  }

  .rc-content-section:last-of-type {
    padding-bottom: 56px;
  }

  /* ブログリスト：スマホは2列 */
  .download_list .boxlink,
  .download_list .js-boxlink {
    width: calc(50% - 10px) !important;
  }
}