@charset "UTF-8";
/* ============================================================
   わたらせテレビ レイアウト調整CSS
   （auスマートバリュー・自宅セット割ページ用）

   ・KDDI提供素材（css/style.css と index.html 内のKDDI素材部分）は変更せず、
     サイト共通の枠（ヘッダー・左メニュー・フッター）との干渉をこのファイルで打ち消す。
   ・読み込み順：reset_new.css → pure-drawer.css → global_new.css
                 → css/style.css（KDDI素材）→ このファイル
   ・PC（769px以上）      ：他のインターネットページと同じ枠の中に素材を表示
   ・スマホ（599px以下）  ：他のインターネットページと同じスマホ用の枠の中に素材を表示
   ・600〜768px（タブレット縦など）：枠は表示せず、KDDI素材のみ
     （この幅はサイト共通CSSではPC扱い、KDDI素材ではスマホ扱いになり、両立できないため）
   ============================================================ */


/* ------------------------------------------------------------
   1. サイト共通部分を、KDDI素材CSSの全体指定から守る
   ------------------------------------------------------------ */

/* style.css の body のフォント指定を、サイト共通（reset_new.css）と同じに戻す */
body {
  font-family: "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* style.css の「* { box-sizing: border-box; }」「img { width: 100%; }」を共通部分では無効化 */
:where(#intial, body > header, nav.pc_nav, .bg_pink, .service_menu, .pink_under, .watv_banner, body > footer),
:where(#intial, body > header, nav.pc_nav, .bg_pink, .service_menu, .pink_under, .watv_banner, body > footer) * {
  box-sizing: revert;
}
:where(#intial, body > header, nav.pc_nav, .bg_pink, .service_menu, .watv_banner, body > footer) img {
  width: auto;
}
body > header img[width="218"] { width: 218px; } /* ヘッダーロゴ */
body > footer img[width="255"] { width: 255px; } /* フッターロゴ */

/* style.css の header / footer 指定を打ち消す */
body > header {
  display: block;
  height: auto;
}
body > footer {
  position: static;
  z-index: auto;
  margin-top: 0;
}


/* ------------------------------------------------------------
   2. KDDI素材を、サイト共通CSSから守る（素材単体で見たときと同じ表示に）
   ------------------------------------------------------------ */
.index {
  font-family: "Manrope", "Noto Sans JP", sans-serif; /* style.css の body 指定 */
  font-size: 1rem;
  line-height: normal;
  color: #000;
}
.index img {
  vertical-align: baseline;
}
.index :focus-visible {
  outline: revert;
}

/* 素材内の <footer>（「記載内容は〜時点の情報です」の部分）からサイト共通footerの装飾を外す */
.index > footer {
  min-width: 0;
  width: auto;
  padding: 0;
  color: inherit;
}
/* footer.js が素材内の <footer> にも差し込むサイト共通フッターを隠す（index.html末尾のJSで削除も行う） */
.index > footer > :not(.footer_bottom) {
  display: none !important;
}


/* ------------------------------------------------------------
   3. PC（769px以上）：他のインターネットページと同じレイアウト
   ------------------------------------------------------------ */
@media screen and (min-width: 769px) {
  body {
    padding-top: 58px; /* global_new.css と同じ（style.css の padding: 0 を戻す） */
  }
  body > footer {
    background-color: #323232; /* global_new.css と同じ（style.css の背景色を戻す） */
  }

  /* KDDI素材のPC用背景（左右の固定パネル）は使わない */
  .pc_main {
    display: none;
  }

  /* 見出しと素材の間の余白（素材は拡大するため、余白は見出し側に付ける） */
  .service_point_wrap > .pink_under {
    margin-bottom: 40px;
  }

  /* KDDI素材本体を右側のコンテンツ欄（幅730px）に配置
     素材のPC用デザインは幅402pxのため、zoom で拡大して幅700pxで表示する
     大きさを変えるときは zoom を「表示したい幅 ÷ 402」にする（例：幅600px → 1.4925、元の大きさ → 1） */
  .service_point_wrap > .index {
    zoom: 1.7413;
    margin: 0 auto;
    z-index: 0; /* サイト共通のLINE・Instagramバナーより下に表示 */
  }
}


/* ------------------------------------------------------------
   4. スマホ（599px以下）：他のインターネットページと同じスマホ用レイアウト
   ------------------------------------------------------------ */
@media screen and (max-width: 599px) {
  body {
    padding-top: 82px; /* global_new.css と同じ（style.css の padding: 0 を戻す） */
  }
  body > footer {
    background-color: #2ea7e0; /* global_new.css と同じ（style.css の背景色を戻す） */
  }

  /* 見出しまわりの余白は他ページ（.menu_sp）と同じに。KDDI素材は画面幅いっぱいのまま */
  .menu_point {
    overflow: visible; /* 追従メニュー（position: sticky）を効かせるため */
  }
  .service_point_wrap {
    padding: 40px 0;
  }
  .service_point_wrap > .pink_under {
    margin-left: 5%;
    margin-right: 5%;
  }
  .pink_under > span {
    display: inline-block; /* 見出しを「・」の位置で改行させる */
  }
  .service_point_wrap > .index {
    position: relative;
    z-index: 0; /* サイト共通のLINE・Instagramバナーより下に表示 */
    margin-top: 8px;
  }

  /* KDDI素材の追従メニュー：画面の上端ではなく、固定ヘッダー（高さ81px）の下に追従させる */
  .index .menuArea,
  .index .menuArea.fixed {
    position: sticky;
    top: 81px;
    left: auto;
    z-index: 1000;
  }
}


/* ------------------------------------------------------------
   5. 600〜768px（タブレット縦など）：共通の枠を出さず、KDDI素材のみ表示
   ------------------------------------------------------------ */
@media screen and (min-width: 600px) and (max-width: 768px) {
  #intial,
  body > header,
  nav.pc_nav,
  .bg_pink,
  .service_menu,
  .pink_under,
  .watv_banner,
  body > footer {
    display: none !important;
  }
  body,
  body.pc_top_fixed_body {
    padding-top: 0;
  }
  .menu_point {
    width: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .service_point_wrap {
    width: auto;
    float: none;
  }
}