@charset "utf-8";
/* ==================================================================
   レスポンス「最新レポート」特集ページ専用CSS
   対象: /special/recent/3947/  （body.page-giga--3947）
   PC / SP 共通・レスポンシブ対応

   Palette — ゴールド系＝調査レポート、赤＝全文PDF の2系統でカードを色分けする。
   会員注記のテキスト・マーク・ボタンは同じ系統色で揃え、種別が一目で分かるようにする
     #c23a29  赤：全文PDF（FREEマーク・無料DLボタン・無料訴求テキスト・種別名バッジ）
     #a21000  濃赤：全文PDFボタンの影
     #6b5a2e  濃金：調査レポート（限定マーク・DLボタン・会員注記テキスト）
     #4a3f22  濃茶：調査レポートボタンの影
     #957f46  中金：見出し・アクセント・タブアクティブ（このページの基準色）
     #836e3b  金：調査レポートの種別バッジ
     #333     種別バッジの接頭辞「全文PDF」／本文
     #c8b688  金罫線（無料訴求枠） / #fdfaf2 生成り地
     #e3e0d6  罫線
     #f6f5f1  カード枠・淡ベージュ面 / #fbf1f0 カード枠（全文PDF 2種で共通）
     #d5cfbe  UI罫線（タブ）
     #6b6252  サブテキスト

   Breakpoints
     max-width: 1023px … 件数の重ね解除（PCのまま・件数をタブの下へ）
     max-width: 768px  … 縦積み（SP・タブレット）
     max-width: 480px  … スマホ小
   ================================================================== */

/* ------------------------------------------------------------------
   1. ベース
   ------------------------------------------------------------------ */
.gigaindex .detail {
 font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
 letter-spacing: .5px;
}
.gigaindex .head {
 display: none;
}
.gigaindex img {
 vertical-align: bottom;
}
.gigaindex .detail .free-custom {
 text-align: left;
}
/* ------------------------------------------------------------------
   2. 種別の説明（調査レポート / 全文PDF の違い）
   PCは左右2カラム、SP（≤768px）は上下。
   枠は対応する .card--item と同じ「10pxベタ枠＋padding 25px」に揃え、
   一覧のどのカードの説明かが枠色で対応するようにする
   ------------------------------------------------------------------ */
.gigaindex .type-guide {
 display: flex;
 gap: 24px;
 margin: 10px 0 20px;
}
.gigaindex .type-guide__item {
 flex: 1 1 0;
 padding: 25px;
 border: 10px solid;
}
/* 枠色は .card--item[data-type="report"] と同じ */
.gigaindex .type-guide__item--report {
 border-color: #f6f5f1;
}
/* 枠色は .card--item[data-type="conference"] / ="seminar" と同じ */
.gigaindex .type-guide__item--pdf {
 border-color: #fbf1f0;
}
.gigaindex .type-guide__ttl {
 margin: 0 0 12px;
 font-size: 40px;
 font-weight: 700;
 line-height: 1.4em;
 text-align: center;
}
.gigaindex .type-guide__item--report .type-guide__ttl {
 color: #6b5a2e;
}
.gigaindex .type-guide__item--pdf .type-guide__ttl {
 color: #c23a29;
}
.gigaindex .type-guide__text {
 margin: 0;
 font-size: 18px;
 line-height: 1.7em;
 text-align: left;
}

/* ------------------------------------------------------------------
   3. 無料訴求リード（全文PDFは無料会員で月3本まで）
   ------------------------------------------------------------------ */
/* 帯そのものを全文PDF系の赤で塗り、文字は白で抜く（コントラスト 5.34:1）。
   面が主張するので枠線は持たせない */
.gigaindex .free-lead {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: center;
 gap: 8px 16px;
 margin: 0 0 30px;
 padding: 14px 20px;
 background-color: #c23a29;
 border: none;
}
/* 赤地の上なのでマークは白抜き（地と文字色を反転） */
.gigaindex .free-lead__mark {
 flex-shrink: 0;
 padding: 7px 12px;
 background-color: #fff;
 color: #c23a29;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 15px;
 font-weight: 700;
 line-height: 1;
 letter-spacing: 1px;
}
.gigaindex .free-lead__text {
 margin: 0;
 font-feature-settings: "palt" 1;
 font-size: 18px;
 font-weight: 700;
 letter-spacing: 1px;
 line-height: 1.5em;
 color: #fff;
}
/* SPだけ「無料会員登録…」の前で改行させる改行タグ */
.gigaindex .br-sp {
 display: none;
}
.gigaindex .free-lead__num {
 font-size: 1.3em;
}
/* 赤地の上に置くリンク。金の下線・ホバー色（本文リンク用）では地に沈むので
   この帯専用に白で完結させる */
.gigaindex .free-lead__link {
 flex-shrink: 0;
 font-size: 15px;
 color: #fff;
 font-weight: 700;
 text-decoration: underline rgba(255, 255, 255, .5);
}
.gigaindex .free-lead__link:hover {
 color: #fff;
 text-decoration: underline #fff;
}
.gigaindex .free-lead__link::after {
 content: "≫";
 color: #fff;
}

/* ------------------------------------------------------------------
   4. 絞り込み（種別タブ）・並び替え
   PCはタブ切り替え型。行の下端にベースラインを1本通し、
   選択中のタブだけ自身の白地でその線を覆って一覧側とつなげる。
   面（地色）で選択を示さないので .filter-area の枠・地色は持たせない
   ------------------------------------------------------------------ */
.gigaindex .filter-area {
 margin: 0 0 22px;
 padding: 0;
}
.gigaindex .filter-row {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 10px 14px;
}
/* ベースラインはタブを含む1行目だけが持つ（2行目＝並び順は対象外）。
   タブの下端を接地させるので align-items は flex-end。
   線の太さは .filter-btn.is-active の margin-bottom と同値（4px）にする。
   ずらすと選択タブが線を覆いきれない／覆いすぎる */
.gigaindex .filter-row:first-child {
 align-items: flex-end;
 gap: 0 14px;
 border-bottom: 4px solid #c8b688;
}
.gigaindex .filter-row + .filter-row {
 margin-top: 14px;
 padding-top: 14px;
 border-top: 1px solid #e3e0d6;
}
.gigaindex .filter-label {
 flex-shrink: 0;
 min-width: 80px;
 padding-bottom: 15px;
 font-size: 18px;
 font-weight: 700;
 letter-spacing: 1px;
 text-align: center;
 color: #957f46;
}
.gigaindex .filter-tabs {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
}
/* 下辺は「線を引かない」。上下で色の違う border を隣り合わせると
   ブラウザが角を斜めに継ぐ（マイター）ため、太くするほど角が濁る。
   タブの下端はそのまま .filter-row のベースラインに接地させる */
.gigaindex .filter-btn {
 font-family: inherit;
 font-size: 18px;
 font-weight: 700;
 letter-spacing: .5px;
 color: #6b6252;
 background-color: #fff;
 border: 4px solid #e3e0d6;
 border-bottom: none;
 border-radius: 0;
 padding: 12px 22px;
 cursor: pointer;
 transition: color .2s, border-color .2s;
}
.gigaindex .filter-btn:hover {
 border-color: #c8b688;
 color: #957f46;
}
/* .is-active は :hover より後に置き、選択中のタブはホバーしても選択色を保つ。
   margin-bottom で自身をベースラインの高さぶん下へ伸ばし、白地でその4pxを覆って
   一覧とつなげる。padding-bottom を同じ4px足しているのは文字位置を動かさないため。
   z-index:1 で .filter-row の border より前面に置く */
.gigaindex .filter-btn.is-active {
 position: relative;
 z-index: 1;
 margin-bottom: -4px;
 padding-bottom: 16px;
 border-color: #c8b688;
 color: #6b5a2e;
}
/* 並び順セレクト。既定ではHTML側をコメントアウトしてあり、
   出す場合に備えてスタイルだけ用意している */
.gigaindex .filter-select {
 font-family: inherit;
 font-size: 16px;
 color: #333;
 background-color: #fff;
 border: 1px solid #d5cfbe;
 border-radius: 2px;
 padding: 8px 12px;
 cursor: pointer;
}
/* 件数は .filter-area の「外」にあるので、SPでは白地のまま素直に下へ並ぶ。
   PCだけ負マージンでタブ行に引き上げ、ベースラインの右上に重ねる。
   計算：filter-area の margin-bottom 22px と相殺したうえで
   自身の高さ24px＋ベースラインまでの19pxぶん持ち上げる（-65px）。
   下マージン41px は 上に引いた分を戻して後続カードの位置を変えないための値
   （-65 + 24 + 41 = 0）。line-height を固定しているのは高さを確定させるため */
.gigaindex .filter-count {
 margin: -65px 0 41px;
 text-align: right;
 font-size: 18px;
 line-height: 24px;
 color: #6b6252;
}
.gigaindex .filter-count .num {
 font-size: 20px;
 font-weight: 700;
 color: #957f46;
}

/* ------------------------------------------------------------------
   5. カード共通
   ------------------------------------------------------------------ */
.gigaindex .card--item {
 padding: 25px;
 margin-bottom: 30px;
 border: 10px solid #f6f5f1;
}
/* 全文PDF（カンファレンス／セミナー）は枠色を共通の淡い赤にし、
   種別は枠の濃さではなくバッジ・ボタン・注記の赤で示す */
.gigaindex .card--item[data-type="conference"],
.gigaindex .card--item[data-type="seminar"] {
 border-color: #fbf1f0;
}
.gigaindex .card--item.is-hidden {
 display: none;
}

/* 種別タグ */
.gigaindex .type-badge {
 flex: 0 0 100%;
 margin: 0 0 12px;
 line-height: 1;
}
/* 「全文PDF」＋「種別名」の2セグメントを隙間なく連結した帯。
   inline-flex なので中の span を増減しても高さと縦位置が揃う */
.gigaindex .type-badge__label {
 display: inline-flex;
 align-items: stretch;
 font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
 font-size: 15px;
 font-weight: 700;
 line-height: 1;
 letter-spacing: 1px;
 color: #fff;
}
.gigaindex .type-badge__kind,
.gigaindex .type-badge__name {
 display: flex;
 align-items: center;
 padding: 8px 16px;
}
/* 接頭辞「全文PDF」は種別を問わず黒で固定 */
.gigaindex .type-badge__kind {
 background-color: #333;
}
/* 全文PDF 2種（カンファレンス／セミナー）は種別名セグメントも赤で統一し、
   カード全体の赤系＝全文PDF という対応を崩さない。
   白文字で AA を満たす（赤 5.34:1 / 金 4.93:1） */
.gigaindex .type-badge--conference .type-badge__name,
.gigaindex .type-badge--seminar .type-badge__name {
 background-color: #c23a29;
}
/* 調査レポートは接頭辞を持たないので、この1枚だけで帯になる */
.gigaindex .type-badge--report .type-badge__name {
 background-color: #836e3b;
}

/* カードヘッダー（種別タグ / 年月 / タイトル） */
.gigaindex .card--title {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 border-bottom: 2px solid #e3e0d6;
 padding-bottom: 10px;
}
.gigaindex .card--date {
 width: 20%;
 margin: 0;
 padding: 8px 0 0;
 box-sizing: border-box;
 display: table;
 border-right: 2px solid #e3e0d6;
 text-align: center;
 font-size: 32px;
 font-weight: 700;
 line-height: 1em;
}
.gigaindex .card--date .date {
 margin: 0;
}
.gigaindex .seminar--title {
 width: 80%;
 display: inline-block;
 box-sizing: border-box;
 margin: 0;
 padding-left: 20px;
 font-size: 26px;
 font-weight: 700;
 line-height: 1.4em;
}

/* ------------------------------------------------------------------
   6. カード本体（画像 / 本文 / 申込）
   ------------------------------------------------------------------ */
.gigaindex .card--box {
 display: flex;
 flex-wrap: wrap;
 padding-top: 20px;
}
.gigaindex .card--box .ph {
 width: 26%;
 height: 184px;
 display: inline-block;
 background: url(/base/images/noimage_l.png) center center no-repeat #EAEAEA;
 background-size: 150px auto;
}
.gigaindex .card--box .ph img {
 width: 100%;
 aspect-ratio: 3 / 2;
 object-fit: contain;
}
.gigaindex .card--box .contents {
 width: 49%;
 display: inline-block;
 box-sizing: border-box;
 padding: 0 30px 0 20px;
}
/* 会員注記のテキストはボタン幅いっぱいに置く（7.参照）。
   その基準幅を cqw で拾えるようにこの列自体をコンテナにする */
.gigaindex .card--box .apply {
 width: 25%;
 display: inline-block;
 text-align: center;
 container-type: inline-size;
}
/* 概要
   dl / dd / ul / 見出しの余白はブラウザ標準値に依存させず、この枠内で明示指定する
   （dd の margin-inline-start:40px が残ると .contents から横に溢れる） */
.gigaindex .card--box .contents .info {
 margin: 0 0 25px;
 padding: 0;
 letter-spacing: normal;
}
.gigaindex .card--box .contents .info .ttl {
 display: block;
 width: 100%;
 margin: 5px 0 10px;
 padding: 0 0 3px;
 border-bottom: 2px solid #e3e0d6;
 color: #957f46;
 font-size: 20px;
 font-weight: 700;
 line-height: 1.2em;
 text-align: left;
}
.gigaindex .card--box .contents .info .movie-detail {
 display: block;
 width: 100%;
 box-sizing: border-box;
 margin: 0;
 padding: 0;
 font-size: 17px;
 line-height: 1.6em;
}
.gigaindex .card--box .contents .info .movie-detail p {
 margin: 0 0 8px;
}

/* レポート詳細 */
.gigaindex .card--box .contents .ttl--interview {
 margin: 0 0 10px;
 padding-bottom: 3px;
 border-bottom: 2px solid #e3e0d6;
 color: #957f46;
 font-size: 20px;
 font-weight: 600;
}
.gigaindex .card--box .contents .interview {
 margin: 0;
 padding: 0;
}
.gigaindex .card--box .contents .interview li {
 list-style: disc;
 margin-left: 20px;
 margin-bottom: 5px;
}
.gigaindex .card--box .contents .interview li a,
.gigaindex .card--box .apply .link {
 text-decoration: underline rgba(149, 127, 70, .3);
}
.gigaindex .card--box .contents .interview li a:hover,
.gigaindex .card--box .apply .link:hover {
 color: #957f46;
 text-decoration: underline #957f46;
}
.gigaindex .card--box .apply .link::after {
 content: "≫";
 color: #957f46;
}

/* ------------------------------------------------------------------
   7. 会員種別の注記（限定マーク / 無料マーク）
   面と枠は持たせず、文字そのものを大きくして訴求する
   ------------------------------------------------------------------ */
.gigaindex .card--box .apply .member-note,
.gigaindex .card--box .apply .free-banner {
 display: block;
 margin: 0 0 14px;
 padding: 0;
 font-weight: 700;
 line-height: 1.4em;
 text-align: center;
}
/* 文字色は同じカードのマーク・ボタンと同系統に揃える */
.gigaindex .card--box .apply .member-note {
 color: #6b5a2e;
}
.gigaindex .card--box .apply .free-banner {
 color: #c23a29;
}
/* マークは種別バッジ（.type-badge__label）と同じ字送り・余白・角なしに揃える */
.gigaindex .card--box .apply .member-note__mark,
.gigaindex .card--box .apply .free-banner__mark {
 display: block;
 width: fit-content;
 margin: 0 auto 8px;
 padding: 8px 16px;
 font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
 font-size: 15px;
 font-weight: 700;
 line-height: 1;
 letter-spacing: 1px;
 color: #fff;
}
.gigaindex .card--box .apply .member-note__mark {
 background-color: #6b5a2e;
}
.gigaindex .card--box .apply .free-banner__mark {
 background-color: #c23a29;
}
/* 直下のボタン（.apply 幅 = 100%）いっぱいに文字を伸ばす。
   1cqw = .apply 幅の1% なので、列幅が変わっても折り返さずに比率が保たれる。
   係数は「文字数 × 1em ＋ 字間」から実測して決めた上限で、
   min() の px 値は列が広がるSPで文字が大きくなりすぎないための頭打ち */
.gigaindex .card--box .apply .member-note__text,
.gigaindex .card--box .apply .free-banner__text {
 display: block;
 white-space: nowrap;
}
.gigaindex .card--box .apply .member-note__text {
 font-size: min(9.3cqw, 26px);
}
.gigaindex .card--box .apply .free-banner__text {
 font-size: min(6.9cqw, 20px);
}
.gigaindex .card--box .apply .free-banner__num {
 font-size: 1.35em;
}

/* ------------------------------------------------------------------
   8. ダウンロードボタン
   ------------------------------------------------------------------ */
.gigaindex .card--box .apply a.btn {
 display: inline-block;
 width: 100%;
 margin: 0 auto 20px;
 padding: 12px 0 10px;
 box-sizing: border-box;
 position: relative;
 border: none;
 border-radius: .25em;
 outline: none;
 cursor: pointer;
 background-color: #6b5a2e;
 box-shadow: 0 4px #4a3f22;
 color: #fff;
 font-size: 22px;
 font-weight: 700;
 letter-spacing: 1px;
 text-align: center;
 overflow: hidden;
}
.gigaindex .card--box .apply a.btn:hover {
 top: 2px;
 box-shadow: 0 2px #4a3f22;
 color: #fff;
 text-decoration: none;
 opacity: 1;
}
.gigaindex .card--box .apply a.btn:active {
 top: 6px;
 box-shadow: 0 0 #4a3f22;
 text-decoration: none;
}
/* 無料ダウンロード（全文PDF）。赤にして調査レポートの濃金と種別で塗り分ける。
   .btn と同一詳細度なので後置で上書きする */
.gigaindex .card--box .apply a.btn--free {
 background-color: #c23a29;
 box-shadow: 0 4px #a21000;
}
.gigaindex .card--box .apply a.btn--free:hover {
 box-shadow: 0 2px #a21000;
}
.gigaindex .card--box .apply a.btn--free:active {
 box-shadow: 0 0 #a21000;
}
/* 見逃し配信への誘導（セミナーのみ）。HTML側は class="btn btn-archive" にして
   .btn--free と同じ当て方で形状を共有し、色だけ後置で上書きする。
   .btn と同一詳細度なので後置で上書きする */
.gigaindex .card--box .apply a.btn-archive {
 background-color: #303030;
 box-shadow: 0 4px #111;
}
/* 無料DLボタンの直下に並ぶときだけ2つのボタン間隔を10px詰める。
   単独で置かれた場合は .btn の余白のままにする */
.gigaindex .card--box .apply a.btn--free + a.btn-archive {
 margin-top: -10px;
}
.gigaindex .card--box .apply a.btn-archive:hover {
 box-shadow: 0 2px #111;
}
.gigaindex .card--box .apply a.btn-archive:active {
 box-shadow: 0 0 #111;
}

/* ------------------------------------------------------------------
   9. 該当なし表示
   ------------------------------------------------------------------ */
.gigaindex .no-result {
 display: none;
 margin: 0 0 30px;
 padding: 50px 20px;
 background-color: #f6f5f1;
 border: 1px solid #e3e0d6;
 font-size: 18px;
 text-align: center;
 color: #6b6252;
}
.gigaindex .no-result.is-visible {
 display: block;
}
.gigaindex .free-custom {
 max-width: 1200px;
 margin: 0 auto;
}
/* ------------------------------------------------------------------
   10. レスポンシブ（1023px以下：件数の重ねを解除）
   タブの右に件数を置く余白がなくなるため、負マージンでの重ねをやめ、
   件数をタブの下（白地・右寄せ）に素直に並べる
   ------------------------------------------------------------------ */
@media screen and (max-width: 1023px) {
 .gigaindex .filter-row:first-child {
  gap: 8px 14px;
 }
 /* 幅が足りずタブの右に件数を置けないので、重ねをやめて通常の位置に戻す */
 .gigaindex .filter-count {
  margin: 0 0 5px;
 }
 /* 769〜832pxでもタブ4つが1行に収まるよう左右paddingを詰める */
 .gigaindex .filter-btn {
  padding: 12px 14px;
 }
}

/* ------------------------------------------------------------------
   11. レスポンシブ（768px以下：縦積み）
   ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {
 .gigaindex .detail {
  font-size: 15px;
  line-height: normal;
 }
 /* type-guide と free-lead はブラウザ側面に接触させない。
    2要素は .free-custom 直下の連続した兄弟なのでガターはここ1箇所でまとめて指定する。
    （下マージンは各要素側の責務なので、ここでは左右だけを触る） */
 .gigaindex .type-guide,
 .gigaindex .free-lead,
 .gigaindex .filter-count {
  margin-left: 15px;
  margin-right: 15px;
 }
 /* 下マージンはPCの30pxを引き継がず、SPは詰める */
 .gigaindex .free-lead {
  margin-bottom: 18px;
 }

 /* 2種の説明は左右から上下へ */
 .gigaindex .type-guide {
  display: block;
 }
 .gigaindex .type-guide__item + .type-guide__item {
  margin-top: 16px;
 }
 /* 枠は SP の .card--item（border-width:6px / padding:15px）に合わせる */
 .gigaindex .type-guide__item {
  padding: 15px;
  border-width: 6px;
 }
 .gigaindex .type-guide__ttl {
  font-size: 1.6em;
 }
 .gigaindex .type-guide__text {
  font-size: 15px;
 }

 .gigaindex .free-lead {
  gap: 8px 12px;
  padding: 12px 0;
 }
 .gigaindex .free-lead__text {
  font-size: 16px;
 }
 /* 「全文PDF（カンファレンス／セミナー）は」で改行し、
    「無料会員登録…」を2行目の頭に置く */
 .gigaindex .br-sp {
  display: inline;
 }
 /* SPは4つのタブを2段グリッドで積むため、PCのタブ（ベースライン連結）の
    見せ方は成立しない。ここで面塗りの選択表現に戻す */
 .gigaindex .filter-area {
  margin-bottom: 0;
  padding: 14px;
  background-color: #f6f5f1;
  border: none;
 }
 .gigaindex .filter-row:first-child {
  align-items: center;
  gap: 10px 14px;
  border-bottom: none;
 }
 /* ラベル「種別」は自身が幅いっぱいの行になってから中央寄せする。
    flexアイテムのままだと内容幅に縮むので text-align だけでは中央に来ない */
 .gigaindex .filter-label {
  width: 100%;
  padding-bottom: 0;
  text-align: center;
 }
 /* タブは2列グリッドに切り替え、4つのボタンを均等な2段組にする */
 .gigaindex .filter-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  margin-bottom: 0;
 }
 .gigaindex .filter-btn {
  font-size: 13px;
  padding: 9px 2px;
  letter-spacing: normal;
  white-space: nowrap;
  border: 1px solid #d5cfbe;
  border-radius: 2px;
 }
 /* ベースラインが無いので下へのはみ出し（margin/padding）も不要 */
 .gigaindex .filter-btn.is-active {
  margin-bottom: 0;
  padding-bottom: 9px;
  background-color: #957f46;
  border-color: #957f46;
  color: #fff;
 }
 /* 件数はタブの下に単独行で置く。18px はPC用なのでSPは元どおり15px
    （line-height の固定も不要） */
 .gigaindex .filter-count {
  margin-bottom: 0;
  font-size: 15px;
  line-height: normal;
 }
 .gigaindex .card--item {
  padding: 15px;
  margin-bottom: 20px;
  border-width: 6px;
 }
 .gigaindex .card--title {
  display: block;
  padding-bottom: 12px;
 }
 /* 年月は中央。子の .date 側には text-align を持たせず、ここ1箇所で決める */
 .gigaindex .card--date {
  display: block;
  width: 100%;
  padding: 0 0 8px;
  border-right: none;
  font-size: 24px;
 }
 /* タイトルと本文は左揃え。サイト共通CSSの中央寄せを明示的に打ち消す */
 .gigaindex .seminar--title {
  display: block;
  width: 100%;
  padding-left: 0;
  text-align: left;
  font-size: 20px;
 }
 .gigaindex .type-badge {
  text-align: center;
 }
 .gigaindex .card--box {
  display: block;
  padding-top: 15px;
 }
 .gigaindex .card--box .ph {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto 15px;
 }
 .gigaindex .card--box .contents {
  display: block;
  width: 100%;
  padding: 0;
 }
 .gigaindex .card--box .contents .info {
  margin-bottom: 18px;
 }
 .gigaindex .card--box .contents .info .ttl,
 .gigaindex .card--box .contents .ttl--interview {
  font-size: 17px;
 }
 .gigaindex .card--box .contents .info .movie-detail {
  font-size: 15px;
 }
 .gigaindex .card--box .apply {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 20px auto 0;
 }
 .gigaindex .card--box .apply .link {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6em;
  display: block;
 }
 .gigaindex .card--box .apply a.btn {
  font-size: 19px;
 }
}

/* ------------------------------------------------------------------
   12. レスポンシブ（480px以下：スマホ小）
   ------------------------------------------------------------------ */
@media screen and (max-width: 480px) {
 .gigaindex .free-lead {
  flex-direction: column;
  text-align: center;
 }
 /* .filter-btn は 768px 側で折り返さない前提の値に決めているため、
    ここで padding を上書きすると再び折り返す。意図的に何も指定しない。 */
 .gigaindex .filter-select {
  flex: 1 1 auto;
 }
 .gigaindex .card--date {
  font-size: 18px;
  font-weight: 600;
 }
 /* font-size は 768px 側で 20px に統一済みなのでここでは指定しない */
 .gigaindex .seminar--title {
  line-height: 1.4em;
  font-weight: 600;
 }
 .gigaindex .card--box .apply a.btn {
  font-size: 17px;
 }
}