/*------------------------------------*
　ダウンロードCSS（詳細ページ用 - 2カラムレイアウト）
\*------------------------------------*/

/* Noto Sans JP フォント適用 */
.download_detail_wrapper,
.download_text_column,
.download_description,
.download_cta_section,
.download_navigation {
  font-family: "Noto Sans JP", sans-serif;
}

/* CSS変数定義 - レイアウト設定 */
:root {
  /* レイアウト幅設定 */
  --content-max-width: 1200px;

  /* カラム比率設定 */
  --left-column-ratio: 40;  /* 左カラム比率（%） */
  --right-column-ratio: 60; /* 右カラム比率（%） */

  /* 計算値（自動計算されるため変更不要） */
  --left-column-vw: calc(var(--left-column-ratio) * 1vw);
  --right-column-vw: calc(var(--right-column-ratio) * 1vw);
  --left-column-max-width: calc(var(--content-max-width) * var(--left-column-ratio) / 100);
  --right-column-max-width: calc(var(--content-max-width) * var(--right-column-ratio) / 100);

  /* 背景色設定 */
  --bg-left: #ffffff;
  --bg-right: #f8f9fa;
}

/* common.cssのmain要素のmin-width:980pxを上書き */
body main {
    min-width: 0 !important;
    width: 100% !important;
    padding:124px 0 0 !important;
}

.download {
  text-align: left;
  /* 基本レイアウト */
  .inner {
    max-width: var(--content-max-width);
    padding: 0 20px;
    margin: 0 auto 80px;
    box-sizing: border-box;
  }

  /* パンくずリスト - グリッドレイアウト対応 */
  #pankuzu.download_breadcrumb {
    max-width: 100%;
    margin-left: auto;
    padding: 20px 10px 20px 20px;
    box-sizing: border-box;
    word-break: break-all;
    overflow-wrap: break-word;
    white-space: normal;
    line-height: 1.6;

    /* li要素のスタイル */
    li {
      display: inline; /* シンプルなインライン表示 */
      list-style: none; /* リストマーカーを削除 */
      margin: 0;
      padding: 0;
      color: #23262D;
    }

    /* 最初以外のli要素に左余白を追加 */
    li:not(:first-child) {
      padding-left: 1em;
    }

    /* リンクの改行制御 */
    a {
      word-break: break-all;
      overflow-wrap: break-word;
      white-space: normal;
      color: #62697a !important;
    }

    /* 区切り文字（>）の保護 */
    span {
      white-space: nowrap; /* 区切り文字は改行しない */
      color: #62697a !important;
    }

    /* 最後のli（現在のページ）内のspanは改行可能 */
    li:last-child span {
      word-break: break-all;
      overflow-wrap: break-word;
      white-space: normal;
    }
  }
}
.download_detail_wrapper {
  box-sizing: border-box;
  width: 100%;
  padding: 0 0 140px;
  overflow: hidden;

  /* CSS変数を使った背景分割 */
  background: linear-gradient(
    to right,
    var(--bg-left) 0%,
    var(--bg-left) calc(var(--left-column-ratio) * 1%),
    var(--bg-right) calc(var(--left-column-ratio) * 1%),
    var(--bg-right) 100%
  );
}

/* 内部コンテナで幅をコントロール */
.download_detail_inner {
  max-width: none; /* 最大幅制限を削除 */
  width: 100%; /* フル幅に */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.download_two_column_layout {
  display: grid;
  /* CSS変数を使ったグリッド分割 - パンくず用に調整 */
  grid-template-columns: var(--left-column-vw) var(--right-column-vw);
  grid-template-rows: auto 1fr;
  gap: 0;
  align-items: start;

  /* コンテンツの最大幅制限とセンタリングを各カラムで制御 */
  .download_text_column,
  .download_image_column {
    width: 100%;
    box-sizing: border-box;
  }

  .download_text_column {
    max-width: var(--left-column-max-width);
    margin-left: auto; /* 左カラムは右寄せ */
    padding: 0 40px 0 20px;
    grid-column: 1;
    grid-row: 2/3;
  }

  .download_image_column {
    max-width: var(--right-column-max-width);
    margin-right: auto; /* 右カラムは左寄せ */
    padding: 100px 40px 40px 40px;
    grid-column: 2;
    grid-row: 1/3;
  }
}

/* 左カラム: テキストコンテンツ（白背景エリア） */
.download_text_column {
  padding: 40px; /* 左カラム専用パディング */
  box-sizing: border-box;
  .download_main_title {
    font-size: 32px;
    line-height: 1.4;
    color: #23262D;
    margin: 0 0 40px;
    font-weight: bold;
  }

  .download_description {
    line-height: 1.8;
    color: #23262D;
    font-size: 16px;
    margin-bottom: 50px;

    /* 余計な段落の制御 */
    p:first-child {
      margin-top: 0; /* 最初のpタグの上余白を削除 */
    }

    p:last-child {
      margin-bottom: 0; /* 最後のpタグの下余白を削除 */
    }

    p:empty {
      display: none; /* 空のpタグを非表示 */
    }

    /* スペースのみの段落も非表示 */
    p:blank {
      display: none;
    }

    /* 連続する段落間の過度な余白を制御 */
    p + p {
      margin-top: 0;
    }

    p {
      margin: 0 0 1.5em;
    }
    h1 {
      font-size: 26px;
      margin-bottom: 48px;
    }

    h2 {
      font-size: 24px;
      color: #23262D;
      margin: 2em 0 1em;
      padding-bottom: 10px;
      border-bottom: 2px solid #213866;
    }

    h3 {
      font-size: 16px;
      color: #23262D;
      margin: 1.8em 0 1em;
      letter-spacing: 0.12em;
    }
  }

  /* 資料ダウンロードボタン */
  .download_cta_section {
    margin-bottom: 20px;

    .download_cta_button {
      display: flex;
      align-items: center;
      justify-content: space-between; /* アイコンを右端に配置 */
      gap: 12px;
      padding: 18px 32px;
      background: #D60F3D;
      color: #fff;
      text-decoration: none;
      border-radius: 6px;
      font-weight: bold;
      font-size: 16px;
      transition: all 0.3s ease;

      /* テキスト部分をまとめる */
      .download_text_wrapper {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .download_arrow {
        width: 16px;
        height: 16px;
        margin-left: auto; /* 右端に固定 */
        svg {
            width: 100%;
            height: 100%;
            vertical-align: top;
          }
      }
    }
  }

  /* ナビゲーション */
  .download_navigation {
    .back_to_list {
      display: flex;
      align-items: center;
      justify-content: space-between; /* アイコンを右端に配置 */
      gap: 8px;
      padding: 12px 20px;
      background: #fff;
      color: #989898;
      text-decoration: none;
      border: 2px solid #ddd;
      border-radius: 6px;
      font-size: 14px;
      font-weight: bold;
      transition: all 0.3s ease;

      /* テキスト部分 */
      span:not(.arrow_left) {
        flex-grow: 1;
      }

      .arrow_left {
          display: inline-block;
          width: 16px;
          height: 16px;
          order: 2; /* 右端に配置 */
          transition: all 0.3s ease;
          svg {
            width: 100%;
            height: 100%;
            vertical-align: top;
            transition: all 0.3s ease;

            path {
              transition: fill 0.3s ease;
            }
          }
      }

      &:hover {
        .arrow_left {
          transform: translateX(-3px);
        }
      }
    }
  }
}
/* NEWバッジのスタイル */
.download_new_badge {
  position: absolute;
  top: 22px;
  left: 24px;
  background: #D60F3D;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 9999px;
  letter-spacing: 0.5px;
  line-height: 1;
  z-index: 10;
}
/* 右カラム: 画像プレビュー（灰色背景エリア） */
.download_image_column {
  padding: 40px; /* 右カラム専用パディング */
  box-sizing: border-box;
  position: relative;

  .download_preview_container {
    position: sticky;
    top: 40px;
    overflow: visible; /* NEWバッジがはみ出すのを許可 */



    /* カスタムフィールド画像用グリッドレイアウト */
    .download_images_grid {
      display: flex;
      flex-direction: column;
      gap: 36px;

      .download_main_image {
        width: 100%;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
        background: #213866;

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

      .download_sub_images {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;

        .download_sub_image {
          border-radius: 8px;
          overflow: hidden;
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
          background: #213866;

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

    /* フォールバック（旧コード）も保持 */
    .download_main_image {
      width: 100%;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
      background: #213866;

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

    .download_placeholder_image {
      width: 100%;
      aspect-ratio: 4/3;
      background: linear-gradient(135deg, #213866 0%, #1a2b52 100%);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);

      .placeholder_content {
        text-align: center;
        color: #fff;

        .placeholder_icon {
          font-size: 48px;
          display: block;
          margin-bottom: 16px;
        }

        p {
          font-size: 18px;
          margin: 0;
          font-weight: 600;
        }
      }
    }
  }
}

/* エラー表示用スタイル */
.sec_download_no_content {
  padding: 60px 40px;
  text-align: center;
  background: #f8f9fa;
  border-radius: 12px;

  .download_no_content {
    padding: 40px;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 30px;

    p {
      margin: 0;
      color: #666;
      font-size: 16px;
    }
  }

  .link_download_list {
    a {
      display: inline-block;
      padding: 12px 24px;
      background: #213866;
      color: #fff;
      text-decoration: none;
      border-radius: 6px;
      font-weight: 600;
      transition: all 0.3s ease;

      &:hover {
        background: #1a2b52;
        transform: translateY(-2px);
      }
    }
  }
}

/*------------------------------------*
　レスポンシブデザイン
\*------------------------------------*/

/* @media (max-width: 1024px) {
  .download_two_column_layout {
    gap: 60px;
  }

  .download_detail_container {
    padding: 40px;
  }
} */

@media (max-width: 768px) {
  body main {
    padding-top: 75px !important;
  }

  .download_detail_wrapper {
    background: #fff;
    padding: 0 0 calc(160/750*100vw);
  }

  /* モバイル版：パンくず → 画像 → テキストの順番に調整 */
  .download_two_column_layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    .download_text_column {
      max-width: 100%;
      padding: 0 calc(20/750*100vw);
    }

  }

  /* パンくずリストのモバイル版スタイル */
  #pankuzu.download_breadcrumb {
    order: 1; /* パンくずを最初に表示 */
    max-width: none;
    margin: 0;
    padding: calc(20/750*100vw) calc(40/750*100vw);
    font-size: calc(20/750*100vw);

    /* シンプルなインライン表示（モバイル版） */
    word-break: break-all;
    overflow-wrap: break-word;
    white-space: normal;
    line-height: 1.6;

    /* li要素のスタイル（モバイル版） */
    li {
      display: inline; /* シンプルなインライン表示 */
      list-style: none;
      margin: 0;
      padding: 0;
      color: #23262D;
    }

    /* 最初以外のli要素に左余白を追加（モバイル版） */
    li:not(:first-child) {
      padding-left: calc(16/750*100vw); /* モバイル用のサイズ調整 */
    }

    /* リンクのスタイル（モバイル版） */
    a {
      word-break: break-all;
      overflow-wrap: break-word;
      white-space: normal;
    }

    /* 区切り文字のスタイル（モバイル版） */
    span {
      white-space: nowrap;
    }

    /* 最後のli内のspanは改行可能（モバイル版） */
    li:last-child span {
      word-break: break-all;
      overflow-wrap: break-word;
      white-space: normal;
    }
  }

  .download_image_column {
    order: 2; /* 画像を2番目に表示 */

    .download_preview_container {
      position: static;
    }
  }

  /* モバイル版NEWバッジのスタイル */
  .download_new_badge {
    position: absolute;
    top: calc(29/750*100vw);
    left: calc(32/750*100vw);
    background: #D60F3D;
    color: #fff;
    font-size: calc(20/750*100vw);
    font-weight: bold;
    padding: 0 calc(16/750*100vw);
    border-radius: 9999px;
    letter-spacing: calc(0.7/750*100vw);
    line-height: calc(40/750*100vw);
    z-index: 10;
  }

  .download_text_column {
    order: 3; /* テキストを3番目に表示 */
    display: block; /* flexを解除 */
  }

  /* テキストカラム内の要素の順序をリセット */
  .download_description {
    order: initial;
  }

  .download_cta_section {
    order: initial;
  }

  .download_navigation {
    order: initial;
  }

  .download_detail_inner {
    padding: 0;
  }

  .download_text_column,
  .download_image_column {
    padding: 30px 20px;
  }
}

/* タブレット用NEWバッジのスタイル */
@media (max-width: 1024px) and (min-width: 769px) {
  .download_new_badge {
    top: 18px;
    left: 20px;
    font-size: 11px;
    padding: 5px 10px;
    letter-spacing: 0.4px;
  }
}

@media (max-width: 768px) {
  .download {
    .inner {
      padding: 0 calc(40/750*100vw);
      margin: 0 auto calc(120/750*100vw);
    }
  }

  .download_detail_container {
    padding: 0;
  }

  .download_text_column {
    .download_main_title {
      font-size: calc(48/750*100vw);
      margin-bottom: calc(60/750*100vw);
    }

    .download_description {
      font-size: calc(32/750*100vw);
      margin-bottom: calc(80/750*100vw);

      p {
        margin-bottom: calc(28/750*100vw);
      }
      h1 {
        font-size: calc(42/750*100vw);
        margin-bottom: calc(56/750*100vw);
      }

      h2 {
        font-size: calc(42/750*100vw);
        margin: calc(48/750*100vw) 0 calc(24/750*100vw);
        padding-bottom: calc(16/750*100vw);
      }

      h3 {
        font-size: calc(26/750*100vw);
        margin: calc(64/750*100vw) 0 calc(24/750*100vw);
        padding-left: calc(16/750*100vw);
      }
    }

    .download_cta_section {
      margin-bottom: calc(24/750*100vw);

      .download_cta_button {
        padding: calc(36/750*100vw) calc(44/750*100vw);
        font-size: calc(28/750*100vw);
        gap: calc(16/750*100vw);
        border-radius: calc(8/750*100vw);

        .download_arrow {
          width: calc(28/750*100vw);
        }
      }
    }

    .download_navigation {
      .back_to_list {
        padding: calc(36/750*100vw) calc(44/750*100vw) calc(36/750*100vw) calc(44/750*100vw);
        font-size: calc(28/750*100vw);
        gap: calc(12/750*100vw);
        border-radius: calc(8/750*100vw);

        .arrow_left {
          width: calc(18/750*100vw);
        }
      }
    }
  }

  .download_two_column_layout .download_image_column {
    padding:calc(110/750*100vw) calc(70/750*100vw);
    background: #F2F2F3;
    .download_preview_container {
      .download_main_image {
        border-radius: calc(16/750*100vw);
      }

      .download_placeholder_image {
        border-radius: calc(16/750*100vw);

        .placeholder_content {
          .placeholder_icon {
            font-size: calc(72/750*100vw);
            margin-bottom: calc(24/750*100vw);
          }

          p {
            font-size: calc(32/750*100vw);
          }
        }
      }
    }
  }
}

/* NEWバッジ用アニメーション */
@keyframes download-new-pulse {
  0% {
    transform: rotate(-5deg) scale(1);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
  }
  100% {
    transform: rotate(-3deg) scale(1.05);
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.6);
  }
}