/* =============================================
   download.css  |  お役立ち資料ダウンロードページ専用スタイル
   ============================================= */

/* ── レイアウトリセット ── */
:is(body.page_download, body.page_new_download) {
  overflow-x: hidden;
}

:is(body.page_download, body.page_new_download) main#contents {
  max-width     : none;
  width         : 100%;
  margin-left   : 0;
  margin-right  : 0;
  padding-left  : 0;
  padding-right : 0;
  padding-bottom: 0;
  display       : block;
}

:is(body.page_download, body.page_new_download) #dcms_layoutPageBlock {
  width: 100%;
}

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

/* ── パンくず ──
   左 = サイドメニュー幅(280px) + dl-content-inner の左 padding に揃える
   margin: 0 !important で sompo.common.css の margin: 0 auto を完全上書き */
:is(body.page_download, body.page_new_download) #locator_template_c2 .inner {
  max-width   : none !important;
  margin      : 0    !important;
  padding-left: calc(280px + clamp(24px, 3vw, 48px)) !important;
}

/* ── ヒーロー ──
   dl-content-wrap 内に配置されたため width:100vw(全幅) を 100% に上書き。
   inner の左 padding を dl-content-inner と揃える。 */
:is(body.page_download, body.page_new_download) .page-header.oc-hero {
  width        : 100%;
  padding-left : 0;
  padding-right: 0;
}

:is(body.page_download, body.page_new_download) .page-header.oc-hero .page-header__inner {
  padding-left : clamp(24px, 3vw, 48px);
  padding-right: max(clamp(24px, 5vw, 80px), calc((100vw - 1440px) / 2 + clamp(24px, 5vw, 80px)));
}

/* ── ヒーロー サブテキスト ── */
.dl-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;
}

/* ── ヒーロー 3リンクボタン ── */
.dl-hero-links {
  display   : flex;
  flex-wrap : wrap;
  gap       : 10px;
  margin-top: 24px;
}

a.dl-hero-link {
  display        : inline-flex;
  align-items    : center;
  padding        : 9px 22px;
  background     : rgba(255, 255, 255, 0.12);
  border         : 1px solid rgba(255, 255, 255, 0.35);
  color          : rgba(255, 255, 255, 0.85) !important;
  font-family    : 'Noto Sans JP', sans-serif;
  font-size      : clamp(12px, 1vw, 14px);
  font-weight    : 700;
  text-decoration: none !important;
  transition     : background 0.2s var(--oc-ease), border-color 0.2s var(--oc-ease);
}

a.dl-hero-link.is-current {
  background  : var(--oc-red);
  border-color: var(--oc-red);
  color       : #fff !important;
}

a.dl-hero-link:hover,
a.dl-hero-link:focus-visible {
  background  : rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.6);
  color       : #fff !important;
}

a.dl-hero-link.is-current:hover,
a.dl-hero-link.is-current:focus-visible {
  background  : #a81220;
  border-color: #a81220;
}

/* ── コンテンツラッパー（padding は dl-body 2カラム内の定義に委譲）── */
:is(body.page_download, body.page_new_download) .dl-content-wrap {
  display: block;
}

/* ── セクション見出し h2（ジャンル別 / サービス別 / 目的別）──
   resource_center の oc-section-heading デザインに準拠。
   ::before で右カラム幅のみ赤線を引く（左端 x=250、右端 = viewport 右端）。 */
:is(body.page_download, body.page_new_download) .dl-section-heading {
  padding   : 56px 0 32px;
  margin    : 0;
  position  : relative;
}

:is(body.page_download, body.page_new_download) .dl-section-heading::before {
  content   : '';
  position  : absolute;
  top       : 0;
  left      : calc(-1 * clamp(24px, 3vw, 48px)); /* dl-content-inner の左 padding 分だけ戻る → 右カラム左端(x=280)に揃える */
  width     : calc(100vw - 280px);               /* 右カラム幅 = ページ幅 - サイドメニュー幅 */
  height    : 4px;
  background: var(--oc-red);
}

:is(body.page_download, body.page_new_download) .dl-section-heading .oc-label {
  display       : block;
  font-family   : 'IBM Plex Sans', sans-serif;
  font-size     : 11px;
  font-weight   : 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color         : var(--oc-red);
  margin-bottom : 6px;
}

:is(body.page_download, body.page_new_download) .dl-section-heading h2 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size  : clamp(22px, 2.5vw, 28px);
  font-weight: 700;
  color      : var(--oc-navy);
  margin     : 0;
  padding    : 0;
  border     : none;
}

/* ── サブセクション見出し h3 ──
   左赤ボーダーで resource_center のデザイン言語と統一。 */
:is(body.page_download, body.page_new_download) h3.title-underline {
  font-family: 'Noto Sans JP', sans-serif;
  font-size  : clamp(15px, 1.6vw, 18px);
  font-weight: 700;
  color      : var(--oc-navy);
  margin     : 36px 0 0;
  padding    : 4px 0 4px 14px;
  border     : none !important;
  border-left: 4px solid var(--oc-red) !important;
}

:is(body.page_download, body.page_new_download) .title-underline__inner {
  display      : block;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* ── 小見出し h4 ── */
:is(body.page_download, body.page_new_download) .dl-content-inner h4 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size  : clamp(13px, 1.4vw, 15px);
  font-weight: 700;
  color      : var(--oc-text);
  margin     : 24px 0 0;
  padding    : 0;
}

/* ── タブメニュー（サブカテゴリ切り替え）── */
:is(body.page_download, body.page_new_download) .white-paper-tab {
  width     : 100%;
  text-align: left;
  margin-top: 20px;
}

:is(body.page_download, body.page_new_download) ul.white-paper-tab_menu {
  display    : flex;
  flex-wrap  : wrap;
  gap        : 8px;
  padding    : 0 0 24px;
  margin     : 0;
  background : transparent;
  border     : none;
  list-style : none;
  align-items: center;
}

:is(body.page_download, body.page_new_download) ul.white-paper-tab_menu li {
  padding  : 0;
  margin   : 0;
  min-width: auto;
}

:is(body.page_download, body.page_new_download) ul.white-paper-tab_menu li a {
  display        : block;
  padding        : 6px 16px;
  font-size      : 13px;
  font-weight    : 600;
  color          : #555;
  background     : #f5f7fa;
  border         : 1px solid var(--oc-border);
  border-radius  : 100px;
  text-decoration: none;
  box-shadow     : none;
  transition     : background 0.2s var(--oc-ease),
                   color 0.2s var(--oc-ease),
                   border-color 0.2s var(--oc-ease);
}

:is(body.page_download, body.page_new_download) ul.white-paper-tab_menu li a:hover,
:is(body.page_download, body.page_new_download) ul.white-paper-tab_menu li a:focus-visible,
:is(body.page_download, body.page_new_download) ul.white-paper-tab_menu li.selected a {
  background  : var(--oc-navy);
  border-color: var(--oc-navy);
  color       : #fff;
  box-shadow  : none;
}

/* ── ダウンロードカードグリッド ── */
:is(body.page_download, body.page_new_download) .download_list {
  display  : flex;
  flex-wrap: wrap;
  gap      : 20px;
  margin-top   : 16px;
  margin-bottom: 0;
}

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

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

/* サムネイル */
:is(body.page_download, body.page_new_download) .download_list .top-media_thumb {
  display    : block;
  position   : relative;
  width      : 100%;
  max-width  : 100%;
  padding-top: 0;
  height     : auto;
  overflow   : hidden;
  background : #f5f7fa;
  order      : 1;
  flex-shrink: 0;
}

:is(body.page_download, body.page_new_download) .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;
}

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

/* テキストエリア */
:is(body.page_download, body.page_new_download) .download_list .top-media_box {
  order: 2;
  flex : 1;
  width: 100%;
}

:is(body.page_download, body.page_new_download) .download_list .top-media_item {
  display       : flex;
  flex-direction: column;
  width         : 100%;
  background    : none;
  box-shadow    : none;
  margin-top    : 0;
}

:is(body.page_download, body.page_new_download) .download_list .top-media_txtarea {
  padding: 16px 18px 8px;
}

:is(body.page_download, body.page_new_download) .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;
}

:is(body.page_download, body.page_new_download) .download_list .top-media_title {
  margin: 0;
}

:is(body.page_download, body.page_new_download) .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);
}

:is(body.page_download, body.page_new_download) .download_list .top-media_title a::after {
  display: none !important;
}

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

/* 「詳しく見る」テキスト */
:is(body.page_download, body.page_new_download) .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);
}

:is(body.page_download, body.page_new_download) .download_list .boxlink:hover .top-media_item::after,
:is(body.page_download, body.page_new_download) .download_list .js-boxlink:hover .top-media_item::after {
  gap: 10px;
}

/* 非表示要素 */
:is(body.page_download, body.page_new_download) .download_list .top-media_category,
:is(body.page_download, body.page_new_download) .download_list .top-media_btn,
:is(body.page_download, body.page_new_download) .download_list .md-link_btn,
:is(body.page_download, body.page_new_download) .download_list ._nversion,
:is(body.page_download, body.page_new_download) .download_list ._min {
  display: none;
}

:is(body.page_download, body.page_new_download) .download_list .boxlink a,
:is(body.page_download, body.page_new_download) .download_list .js-boxlink a {
  display        : block;
  text-decoration: none;
}

/* ── レスポンシブ ── */
@media screen and (max-width: 679px) {
  .dl-hero-links {
    flex-direction: column;
    align-items   : flex-start;
  }

  /* SP: 2列 */
  :is(body.page_download, body.page_new_download) .download_list .boxlink,
  :is(body.page_download, body.page_new_download) .download_list .js-boxlink {
    width: calc(50% - 10px);
  }
}

/* =============================================
   2カラムレイアウト
   左: サイドメニュー (JS で position:fixed に切り替え)
   右: コンテンツ (flex:1)
   ============================================= */

/* ── 2カラムラッパー ── */
:is(body.page_download, body.page_new_download) .dl-body {
  display        : flex;
  align-items    : flex-start;
  width          : 100%;
  position       : relative; /* phase2 absolute サイドバーの基準点 */
}

:is(body.page_download, body.page_new_download) .dl-body::before {
  content       : '';
  position      : absolute;
  left          : 280px;
  top           : 0;
  bottom        : 0;
  width         : 12px;
  background    : linear-gradient(to right, rgba(3, 38, 71, 0.04), transparent);
  pointer-events: none;
}


/* ── 左カラム: サイドメニュー ──
   CMS の #dcms_layoutPageBlock の overflow 制約で position:sticky が効かないため
   JS (initSideMenu) が position:fixed でスクロール追従を実装する。
   z-index:9 でヘッダー(10)・メガメニュー(15)より背面に配置。 */
:is(body.page_download, body.page_new_download) .dl-sidemenu {
  flex-shrink    : 0;
  width          : 280px;
  overflow-y     : auto;
  background     : #fff;
  padding        : 20px 16px 20px 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--oc-border) transparent;
}

/* JS が .is-fixed を付与したとき position:fixed に切り替わる */
:is(body.page_download, body.page_new_download) .dl-sidemenu.is-fixed {
  position: fixed;
  z-index : 9;
}

:is(body.page_download, body.page_new_download) .dl-sidemenu::-webkit-scrollbar       { width: 4px; }
:is(body.page_download, body.page_new_download) .dl-sidemenu::-webkit-scrollbar-thumb { background: var(--oc-border); border-radius: 2px; }

/* ── 右カラム: コンテンツ ── */
:is(body.page_download, body.page_new_download) .dl-content-wrap {
  flex     : 1;
  min-width: 0;
  /* padding なし — anchor nav がフルワイドになるよう dl-content-inner に委譲 */
}

:is(body.page_download, body.page_new_download) .dl-content-inner {
  padding-left  : clamp(24px, 3vw, 48px);
  padding-right : max(clamp(24px, 5vw, 80px), calc((100vw - 1440px) / 2 + clamp(24px, 5vw, 80px)));
  padding-bottom: 80px;
}

/* ── トップリンク ── */
:is(body.page_download, body.page_new_download) .dl-sidemenu__top {
  display        : block;
  font-family    : 'Noto Sans JP', sans-serif;
  font-size      : 14px;
  font-weight    : 700;
  color          : var(--oc-navy);
  text-decoration: none !important;
  padding-bottom : 10px;
  margin-bottom  : 12px;
  border-bottom  : 2px solid var(--oc-red);
}

:is(body.page_download, body.page_new_download) .dl-sidemenu__top:hover { color: var(--oc-red); text-decoration: none !important; }

/* ── メインリスト ── */
:is(body.page_download, body.page_new_download) .dl-sidemenu__nav {
  list-style: none;
  margin    : 0;
  padding   : 0;
}

:is(body.page_download, body.page_new_download) .dl-sidemenu__nav > li + li { margin-top: 10px; }

/* 大カテゴリ（ジャンル別 / サービス別 / 目的別）*/
:is(body.page_download, body.page_new_download) .dl-sidemenu__nav > li > a {
  display        : block;
  font-family    : 'Noto Sans JP', sans-serif;
  font-size      : 14px;
  font-weight    : 700;
  color          : var(--oc-red);
  text-decoration: none;
  padding        : 6px 0 4px;
  border-bottom  : 1px solid var(--oc-border);
  margin-bottom  : 4px;
}

:is(body.page_download, body.page_new_download) .dl-sidemenu__nav > li > a:hover { color: #a81220; }

/* サブリスト */
:is(body.page_download, body.page_new_download) .dl-sidemenu__sub {
  list-style  : none;
  margin      : 0 0 4px;
  padding-left: 0;
}

:is(body.page_download, body.page_new_download) .dl-sidemenu__sub li { position: relative; }

:is(body.page_download, body.page_new_download) .dl-sidemenu__sub li::before {
  content    : '・';
  position   : absolute;
  left       : 0;
  top        : 0;
  color      : var(--oc-red);
  font-size  : 11px;
  line-height: 1.8;
}

:is(body.page_download, body.page_new_download) .dl-sidemenu__sub li a {
  display        : block;
  font-family    : 'Noto Sans JP', sans-serif;
  font-size      : 13px;
  color          : #555;
  text-decoration: none;
  padding        : 3px 0 3px 12px;
  line-height    : 1.5;
  transition     : color 0.15s var(--oc-ease);
}

:is(body.page_download, body.page_new_download) .dl-sidemenu__sub li a:hover { color: var(--oc-red); }

/* ── SP（〜767px）: 1カラム、サイドメニューは非表示 ── */
@media screen and (max-width: 767px) {
  :is(body.page_download, body.page_new_download) .dl-body {
    flex-direction: column;
  }

  :is(body.page_download, body.page_new_download) .dl-body::before {
    display: none;
  }

  :is(body.page_download, body.page_new_download) .dl-sidemenu {
    display: none;
  }

  :is(body.page_download, body.page_new_download) .dl-content-inner {
    padding-left : clamp(16px, 5vw, 24px);
    padding-right: clamp(16px, 5vw, 24px);
  }

  /* SP: サイドメニューがないのでパンくずとヒーローの左合わせをリセット */
  :is(body.page_download, body.page_new_download) #locator_template_c2 .inner {
    padding-left: clamp(16px, 5vw, 24px) !important;
  }

  :is(body.page_download, body.page_new_download) .page-header.oc-hero .page-header__inner {
    padding-left : clamp(16px, 5vw, 24px);
    padding-right: clamp(16px, 5vw, 24px);
  }

  /* SP: サイドメニューなし → 右カラム = ページ全幅 */
  :is(body.page_download, body.page_new_download) .dl-section-heading::before {
    left : calc(-1 * clamp(16px, 5vw, 24px));
    width: 100vw;
  }

  :is(body.page_download, body.page_new_download) h3.title-underline {
    border-left-width: 3px;
  }
}