/*
 * 資料ダウンロードページ（download.html）専用の追加CSS
 * 既存のCSS（base_1.css / extr_*.css / bootstrap.min.css / user_1.css / responsive.css / custom.css）は
 * 一切変更せず、このファイルで新規に見た目を追加する。
 */

/* ---------- メインビジュアル ---------- */
/* 写真はキャッチコピー部分を除いたクリーンなトリミング版（img/fujiki-download-hero.jpg、新規追加ファイル）を使用。
   タイトル帯は写真の下部に半透明で重ねて表示する（参考デザインに合わせる）。 */
.fujiki-dl-hero {
  position: relative;
  max-width: 960px;
  margin: 0 auto 24px;
}

.fujiki-dl-hero-img {
  display: block;
  width: 100%;
  /* コンテナ幅によらず帯との高さバランスを保つため、高さを固定してトリミング表示する。 */
  height: 260px;
  object-fit: cover;
  object-position: center top;
  border-radius: 4px;
}

.fujiki-dl-hero-badge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 20px 12px;
  /* 背景写真がうっすら透ける半透明の帯。文字側にも影を付けて視認性を確保する。 */
  background: rgba(34, 34, 32, 0.52);
  border-radius: 0 0 4px 4px;
}

.fujiki-dl-hero-badge-title {
  margin: 0;
  padding-left: 12px;
  border-left: 6px solid #ff7f00;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.fujiki-dl-hero-badge-sub {
  margin: 3px 0 0 18px;
  color: #ffe2bb;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ---------- 見出し「各種資料ダウンロード」 ---------- */
.fujiki-dl-heading {
  display: flex;
  align-items: center;
  margin: 8px 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e3e3e3;
  color: #333;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.02em;
}

.fujiki-dl-heading-mark {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 10px;
  background: #ff7f00;
  border-radius: 50%;
  flex: none;
}

/* ---------- 右サイドメニュー：Instagramバナーと「製品紹介」バナーの間隔 ---------- */
/* ホームページ（index.html）には .special_lcss03 { margin: 0 auto 15px; } という
   インラインCSSがあり、これがInstagramバナー下の余白を作っている。
   download.htmlはそのインラインCSSを読み込んでいないため余白が無くなっていた。
   バナー自体のサイズは変更せず、余白のみをこのページ専用に追加する。 */
.side-container-c01 .special_lcss03 {
  margin-bottom: 10px;
}

/* ---------- 資料一覧（WordPress iframe 読み込み部） ---------- */
.fujiki-dl-list {
  margin-bottom: 32px;
}

.fujiki-dl-iframe {
  display: block;
  width: 100%;
  min-height: 420px;
  border: 0;
}

.fujiki-dl-note {
  margin-top: 8px;
  color: #888;
  font-size: 12px;
}

/* ---------- 右端固定「資料ダウンロード」ボタン（画像方式） ---------- */
/* 他ページへも同じ見た目で設置できるよう、このブロックは download.html 専用クラス名
   （fujiki-fixed-dl-*）で完結させている。他ページに設置する際は、このCSSブロックと
   対応するHTML（download.html内のリンク部分）をそのままコピーすればよい。
   ボタンは img/download.png（文字・アイコンを含む1枚画像）をそのまま表示するだけなので、
   背景色・文字・アイコン用のCSSは持たない。リンク要素自体には余白・背景・枠を付けない。
   PCではメインビジュアル上端付近（ヘッダー直下）を基準にスクロール追従で固定する。 */
.fujiki-fixed-dl-btn {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 1000;
  display: block;
  line-height: 0;
}

.fujiki-fixed-dl-img {
  display: block;
  width: 34px;
  height: auto;
}

/* タブレット・PC：ヘッダー直下（メインビジュアル上端付近）を基準に固定表示し、画像幅を46pxにする */
@media (min-width: 768px) {
  .fujiki-fixed-dl-btn {
    top: 120px;
    transform: none;
  }
  .fujiki-fixed-dl-img {
    width: 46px;
  }
}

/* ---------- スマートフォン対応 ---------- */
@media (max-width: 767px) {
  .fujiki-dl-hero-img {
    height: 150px;
  }
  .fujiki-dl-hero-badge {
    padding: 7px 14px 8px;
  }
  .fujiki-dl-hero-badge-title {
    font-size: 15px;
    border-left-width: 4px;
    padding-left: 8px;
  }
  .fujiki-dl-hero-badge-sub {
    font-size: 10px;
    margin-left: 12px;
  }
  .fujiki-dl-heading {
    font-size: 16px;
    margin-top: 4px;
  }
}