@charset "UTF-8";
/* =====================================================================
   TVer LP ver7 専用 追加スタイル（既存CSSの後＝最優先で読込）
   ページ上部は「絶対配置オーバーレイ」設計：
     - .lp-seo-design = flex column / overflow:hidden / position:relative
     - .main-heading（FV）= .frame-container-icon の巨大キャンバスで高さ確保
     - .text4（TVerとは＋特徴群）= position:absolute でキャンバス上に重ねる
   → 受賞セクションは .text4 の先頭子要素（通常フロー）として配置
   → FV受賞リボン／動画下注記は fv_right / frame-container-icon 内に絶対配置
   ===================================================================== */

.ver_award .pc_br {
  display: inline;
}

/* =====================================================================
   1. ヘッダー「TVer正規販売代理店」バッジ
   ===================================================================== */
.l-header-pc .frame-container-column {
  display: flex;
  flex-direction: row;
  /* 元は column（バッジがロゴ下に回り込む）→ 横並びに */
  align-items: center;
  gap: 14px;
  width: auto;
  /* 元の 162px 固定を解除してロゴ＋バッジを1行に */
}

.tver-agency-badge {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  font-weight: 700;
  color: #0a7fc7;
  background: #fff;
  border: 2px solid #0a7fc7;
  border-radius: 6px;
  line-height: 1;
  letter-spacing: 0.02em;
}

.l-header-pc .tver-agency-badge {
  font-size: 15px;
  padding: 7px 12px;
  border-radius: 0px;
}

.l-header-pc .icon-logo-1 {
  vertical-align: middle;
}

/* SP ヘッダー：バッジ（上）＋ GJCロゴ（下）の縦積み */
.l-header-sp .l-header__logo {
  display: flex;
  flex-direction: column-reverse;
  /* DOM:[ロゴa, バッジ]→反転でバッジ上/ロゴ下 */
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  width: auto;
  max-width: none;
  height: auto;
}

.l-header-sp .l-header__logo a {
  display: block;
  width: 134px;
  height: 22px;
  line-height: 0;
}

.l-header-sp .l-header__logo img {
  width: 134px;
  height: 22px;
  object-fit: contain;
}

.l-header-sp .tver-agency-badge {
  font-size: 10px;
  padding: 3px 7px;
  border-width: 1.5px;
  border-radius: 4px;
}

/* SP ヘッダー CTA ボタンを拡大＆2行（・の後で改行）に */
.l-header-sp .l-header__btn .c-btn {
  min-height: 40px;
  padding: 5px 14px;
  font-size: 11px;
  line-height: 1.3;
  border-radius: 8px;
  white-space: normal;
  text-align: center;
}

/* =====================================================================
   2. FV 受賞リボン（北日本第1位）
   ロゴ(octagon)・金羽は画像 / 文字はコーディング
   ===================================================================== */
.ver_award .fv_right {
  position: relative;
}

.tver-award-ribbon {
  position: absolute;
  z-index: 6;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  background: #ffffff;
  border-radius: 0px;
  /* 二重の金枠（外：太めの金＋内：細い金線を ::before で） */
  border: 3px solid #c6a03a;
  box-shadow: 0 3px 10px rgba(11, 77, 160, 0.12);
}

.tver-award-ribbon::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid #d8b862;
  border-radius: 0px;
  pointer-events: none;
}

/* Figma(412×108)基準：バッジ=箱幅の約21%(正方形)／月桂樹=約9.5% */
.tver-award-ribbon__badge {
  width: 21%;
  height: auto;
  flex: 0 0 auto;
}

.tver-award-ribbon__laurel {
  width: 9.5%;
  height: auto;
  flex: 0 0 auto;
}

/* 生画像は凹面が左向き → 左羽を反転して凹面を内(右)へ／右羽はそのままでリース状に */
.tver-award-ribbon__laurel._l {
  transform: scaleX(-1);
}

.tver-award-ribbon__txt {
  text-align: center;
  line-height: 1.05;
  padding: 0 2px;
}

.tver-award-ribbon__txt ._top {
  margin: 0 0 3px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #14315e;
  white-space: nowrap;
}

.tver-award-ribbon__txt ._rank {
  margin: 0;
  font-weight: 800;
  font-size: 32px;
  letter-spacing: 0.01em;
  /* 「北日本第○位！」は金グラデ（Figma/23h02_13 準拠）*/
  background: linear-gradient(180deg, #e8d281 0%, #c8a53d 50%, #9c7a10 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

/* 「1」のみ大きい */
.tver-award-ribbon__txt ._rank ._1 {
  font-size: 1.4em;
}

/* 「！」は金（親グラデを継承）*/
.tver-award-ribbon__txt ._rank ._ex {
  -webkit-text-fill-color: transparent;
}

.tver-award-ribbon__txt ._rank ._ref {
  -webkit-text-fill-color: #000;
  color: #000;
  font-size: 0.4em;
  font-weight: 700;
  vertical-align: super;
  margin-left: 1px;
}

/* --- ver7（ver_6）PC：動画 top186px/right17px/494px の直上に配置 --- */
.ver_7 .tver-award-ribbon {
  top: 123px;
  right: 17px;
  width: 494px;
}

/* --- FV右カラム（動画）を少し下げて左CTAとの縦バランスを合わせる --- */
@media screen and (min-width: 1439px) {
  .ver_7 .frame-container-info {
    top: 258px;
  }
}

@media screen and (max-width: 1439px) {
  .ver_7 .frame-container-info {
    top: 17.6vw;
  }
}

/* =====================================================================
   3. FV 動画下の注記
   ===================================================================== */
.tver-fv-note {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  font-weight: 600;
  width: 100%;
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
  color: #000;
  text-align: left;
  z-index: 2;
}

/* =====================================================================
   4. 受賞セクション（.text4 先頭・通常フロー）
   ===================================================================== */
.tver-award-sec {
  width: 100%;
  box-sizing: border-box;
  padding: 24px 20px 44px;
  display: flex;
  justify-content: center;
  z-index: 3;
  position: relative;
}

.text4 .tver-award-sec {
  align-self: stretch;
}

/* ワンストップ〜Strength 間に置く単独版（背景＋バッジ分の上余白） */
.tver-award-sec--standalone {
  background: #eef5fb;
  padding: 80px 20px 64px;
}

.tver-award-sec--standalone .tver-award-sec__inner {
  margin-top: 50px;
}

.tver-award-sec__inner {
  position: relative;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  /* 外枠＝太い金グラデ（角丸維持のため padding-box/border-box 技法）*/
  border: 3px solid transparent;
  border-radius: 0px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #d9b955 0%, #a9842a 28%, #efd98a 50%, #a9842a 72%, #d9b955 100%) border-box;
  padding: 92px 48px 52px;
  box-sizing: border-box;
  box-shadow: 0 10px 30px rgba(11, 77, 160, 0.08);
}

/* 内枠＝細い金線（二重枠）*/
.tver-award-sec__inner::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid #c9b169;
  border-radius: 0px;
  pointer-events: none;
}

.tver-award-sec__badge {
  position: absolute;
  top: -85px;
  left: 50%;
  transform: translateX(-50%);
  width: 170px;
  height: auto;
}

.tver-award-sec__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin-bottom: -8px;
}

.tver-award-sec__laurel {
  width: 62px;
  height: auto;
  flex: 0 0 auto;
}

.tver-award-sec__laurel._r {
  transform: scaleX(-1);
}

.tver-award-sec__headtxt {
  text-align: center;
}

.tver-award-sec__headtxt ._l1 {
  margin: 0 0 6px;
  font-size: 32px;
  font-weight: 700;
  color: #0b7ac2;
}

.tver-award-sec__headtxt ._l2 {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  color: #0b7ac2;
  line-height: 1.3;
}

.tver-award-sec__headtxt ._l2 ._1 {
  color: inherit;
}

.tver-award-sec__lead {
  margin: 0 auto 30px;
  text-align: center;
  font-size: 18px;
  line-height: 1.9;
  color: #000000;
  font-weight: 700;
}

.tver-award-sec__strong {
  margin: 0 auto 18px;
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: #000000;
}

.tver-award-sec__note {
  margin: 0 auto;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.85;
  color: #000000;
}

/* --- FVキャンバス延長（受賞セクション分だけ静的フローを下げる）--- */
.ver_award .frame-container-icon {
  min-height: 7200px !important;
}

/* =====================================================================
   4b. Feature03「約1,000番組以上」を1行で中央に収める
   （元は「800」用の固定幅レイアウトのため、約が重なり数値が溢れていた）
   ===================================================================== */
/* 数値行：約 → 1,000 → 番組以上 を下揃えで中央寄せ・折返しなし */
.ver_award .content-holder .monthly-amount {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  /* 約・1,000・番組 を同一ベースラインに揃える */
  justify-content: center;
  gap: 0;
  font-size: 88px;
}

/* 「約」= 数値行内のインライン小サイズ・下揃え */
.ver_award .content-holder .monthly-amount .h110 {
  height: auto;
  font-size: 0.42em;
  line-height: 1;
  font-weight: 700;
  align-self: baseline;
  margin: 0 0.04em 0 0;
  flex: 0 0 auto;
  white-space: nowrap;
  z-index: 5;
}

/* 「1,000」固定 min-width を解除して実寸に */
.ver_award .content-holder .t-v-advertising1 {
  white-space: nowrap;
  flex: 0 0 auto;
  min-width: 0;
  /* 「1,000」だけ少し下げる（値を増やすほど下がる）*/
  position: relative;
  top: 6px;
}

/* 「番組以上」固定 width:500px を解除して実寸に */
.ver_award .content-holder .image1 {
  min-width: 0;
  width: auto;
  flex: 0 0 auto;
  margin-left: 0;
  padding-bottom: 0;
}

.ver_award .content-holder .b48 {
  width: auto;
  height: auto;
}

/* 「無料で見放題」「（2026年1月時点）」を数値の中央に揃える */
.ver_award .content-holder .budget-section .b49 {
  left: 0;
  width: 100%;
  text-align: center;
}

.ver_award .content-holder .budget-section .div13 {
  left: 0;
  width: 100%;
  text-align: center;
}

/* =====================================================================
   5. 特徴セクション チャート画像（Feature 01 / 02）
   ===================================================================== */
.image-1-icon.tver-feat-chart,
.image-2-icon.tver-feat-chart {
  width: 500px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  background: transparent;
}

/* =====================================================================
   6. 料金カード（1.広告費 / 2.運用手数料）※ PC 表示
   ===================================================================== */
.tver-price-recode {
  align-self: stretch;
  width: 100%;
}

.tver-price-card {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border-radius: 20px;
  height: 100%;
  padding: 26px 22px 34px;
  text-align: center;
  /* カードを縦フレックスにして box を高さいっぱいに広げる */
  display: flex;
  flex-direction: column;
}

.tver-price-card__ttl {
  margin: 0 0 20px;
  font-weight: 800;
  font-size: 34px;
  line-height: 1.1;
  background: linear-gradient(180deg, #1fb4e6, #0a72c0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tver-price-card__ttl ._tax {
  -webkit-text-fill-color: initial;
  color: #0a72c0;
  font-size: 16px;
  font-weight: 700;
}

.tver-price-card__box {
  border: 2px solid #4aa3dd;
  border-radius: 16px;
  padding: 24px 16px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 内容を縦中央に */
  gap: 14px;
  flex: 1 1 auto;
  /* カード高さいっぱいに広げる */
}

.tver-price-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.tver-price-pill {
  display: inline-block;
  min-width: 190px;
  padding: 7px 22px;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.2;
  background: linear-gradient(100deg, #35c2ec 0%, #0b53a3 100%);
}

.tver-price-val {
  margin: 0;
  color: #0a4a8f;
  font-weight: 800;
  font-size: 24px;
  line-height: 1.35;
}

.tver-price-lead {
  margin: 0 0 6px;
  color: #0a4a8f;
  font-weight: 700;
  font-size: 24px;
}

.tver-price-big {
  margin: 0;
  color: #0a72c0;
  font-weight: 800;
  font-size: 125px;
  line-height: 1;
  background: linear-gradient(180deg, #1fb4e6, #0a72c0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tver-price-big ._per {
  font-size: 0.6em;
}

/* =====================================================================
   中間幅（1100〜1439px）: 動画が vw 指定になるためリボン/注記も vw
   ===================================================================== */
@media screen and (max-width: 1439px) {

  .ver_7 .tver-award-ribbon {
    top: 8vw;
    right: 0vw;
    width: 36vw;
    gap: 0.5vw;
    padding: 0.55vw 1vw;
    border-radius: 0px;
    border-width: 2px;
    outline-offset: -0.42vw;
  }

  /* badge/laurel は % 指定（Figma比率）のまま自動スケール */
  .tver-award-ribbon__txt ._top {
    font-size: 1.2vw;
    margin-bottom: 0.2vw;
  }

  .tver-award-ribbon__txt ._rank {
    font-size: 2.4vw;
  }

  .tver-fv-note {
    font-size: 0.78vw;
  }

  .image-1-icon.tver-feat-chart,
  .image-2-icon.tver-feat-chart {
    width: 40vw;
  }
}

/* =====================================================================
   SP（750px 以下）
   ===================================================================== */
@media screen and (max-width: 750px) {
  .ver_award .pc_br {
    display: none;
  }

  .ver_award .frame-container-icon {
    min-height: 1377vw !important;
  }

  /* --- FV 受賞リボン：動画(top8vw/幅100%)の直上に配置 --- */
  .ver_7 .tver-award-ribbon {
    position: relative;
    /* ::before(inset)の基準をリボン自身に（static だと内枠がはみ出す）*/
    width: 100%;
    margin: 5vw 0px 14vw;
    gap: 2vw;
    padding: 2.2vw 3vw;
    border-radius: 0px;
    border-width: 2px;
    outline-offset: -1.6vw;
  }

  /* badge/laurel は base の % 指定（Figma比率）を継承 */
  .tver-award-ribbon__txt ._top {
    font-size: 3vw;
    margin-bottom: 0.6vw;
  }

  .tver-award-ribbon__txt ._rank {
    font-size: 6.2vw;
  }

  /* --- SP: 動画をリボン直下へ／受賞セクション(text4)を動画の下へ --- */
  .ver_7 .frame-container-info {
    top: 2vw;
  }

  .ver_7 .text4 {
    top: 193vw;
  }

  /* --- FV 注記 --- */
  .tver-fv-note {
    position: static;
    width: 90%;
    margin: 2vw auto 0;
    font-size: 2vw;
  }

  /* --- 受賞セクション --- */
  .tver-award-sec {
    padding: 8vw 4vw 6vw;
  }

  .tver-award-sec--standalone {
    padding: 16vw 4vw 8vw;
  }


  .tver-award-sec--standalone .tver-award-sec__inner {
    margin-top: 0px;
  }

  .tver-award-sec__inner {
    border-radius: 0px;
    padding: 17vw 5vw 8vw;
  }

  .tver-award-sec__inner::before {
    inset: 2vw;
    border-radius: 0px;
  }

  /* PC 同様にバッジを大きく強調（top で上にオーバーハング）*/
  .tver-award-sec__badge {
    top: -13vw;
    width: 26vw;
  }

  .tver-award-sec__head {
    gap: 0.5vw;
    margin-bottom: 5vw;
  }

  .tver-award-sec__laurel {
    width: 9vw;
  }

  .tver-award-sec__headtxt ._l1 {
    font-size: 4.2vw;
    margin: 0 0 0px;
  }

  .tver-award-sec__headtxt ._l2 {
    font-size: 4.2vw;
    line-height: 1.4;
  }

  .tver-award-sec__lead {
    font-size: 3.3vw;
    line-height: 1.85;
    margin-bottom: 5vw;
    text-align: left;
  }

  .tver-award-sec__strong {
    font-size: 4vw;
    margin-bottom: 3.5vw;
    line-height: 1.5;
  }

  .tver-award-sec__note {
    font-size: 2.9vw;
    line-height: 1.8;
    text-align: left;
  }

  .l-header-sp .tver-agency-badge {
    font-size: 2.6vw;
    padding: 1vw 1.6vw;
  }

  .ver_6 .ellipse-icon {
    top: 156vw;
    z-index: 0;
  }

  .tver-award-ribbon__badge {
    width: 17%;
  }

  .ver_7 .tver-award-ribbon {
    margin: 0vw 0px 14vw;
  }

  .l-header {
    height: 71px;
  }

  .c-hamburger {
    top: 10px;
  }

  .ver_7 .tver-award-ribbon__txt ._top {
    font-size: 2.8vw;
  }

  .ver_7 .tver-award-ribbon__txt ._rank {
    font-size: 5.55vw;
  }

  .tver-award-ribbon__txt ._rank ._ref {
    position: relative;
    left: 3vw;
  }

  .tver-award-ribbon__txt ._rank ._ex {
    letter-spacing: -0.8em;
  }

  .l-header-sp .l-header__logo {
    text-align: center;
  }

  .l-header-sp .tver-agency-badge {
    font-size: 2.2vw;
    padding: 1vw 1vw 0.2vw;
    width: 25vw;
    border-radius: 0px;
    margin: 0px auto 1vw;
  }
}