/* ==========================================================================
   ヘッダー／グローバルナビ（kids.css から抜粋・同一内容）
   ========================================================================== */
.header {
  background-color: #000;
  z-index: 30;
}

@media print, screen and (max-width: 767px) {
  .header {
    padding: 0 4vw;
  }
}

.gnav__inner .gnav-logo__img,
.header-logo .gnav-logo__img {
  -webkit-filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%)
    contrast(101%);
  filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%);
}

.header__btns--sp .header__reharsal__icon,
.header__btns--sp .header__members__icon {
  -webkit-filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%)
    contrast(101%);
  filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%);
}

@media print, screen and (max-width: 767px) {
  .header__btns--sp .header__reharsal__link {
    margin-right: 2.6666666667vw;
  }
}

@media print, screen and (max-width: 767px) {
  .header__btns--sp .header__members__link {
    margin-right: 6.5333333333vw;
    width: 15.2vw;
    letter-spacing: 0.03em;
  }
}

@media print, screen and (max-width: 767px) {
  .header__btns--sp .nav-toggle__inner {
    height: 8.9333333333vw;
  }
}

.header__btns--sp .nav-toggle__inner span[class*='nav-toggle__bar'] {
  display: inline-block;
  height: 7px;
}

@media print, screen and (max-width: 767px) {
  .header__btns--sp .nav-toggle__inner span[class*='nav-toggle__bar'] {
    height: 0.9333333333vw;
  }
}

.header__btns--sp .nav-toggle__inner span[class*='nav-toggle__bar'].nav-toggle__bar--02 {
  width: 45px;
}

@media print, screen and (max-width: 767px) {
  .header__btns--sp .nav-toggle__inner span[class*='nav-toggle__bar'].nav-toggle__bar--02 {
    width: 6vw;
  }
}

@media print, screen and (max-width: 767px) {
  .header__members__text {
    font-weight: 300;
  }
}

.header__members__text,
.nav-toggle__text,
.gnav__submitBtn__subText {
  color: #fff;
}

.gnav__submitBtn div {
  margin-top: -16px;
}

@media print, screen and (min-width: 1101px) {
  .gnav__submitBtn__title,
  .gnav__submitBtn__subText {
    left: 25px;
  }
}

@media print, screen and (min-width: 1101px) {
  .gnav__submitBtn {
    padding: 0 44px 0 25px;
  }
}

@media print, screen and (min-width: 768px) and (max-width: 1100px) {
  .header__reharsal__link {
    width: 45px;
  }
}

@media print, screen and (min-width: 768px) and (max-width: 1100px) {
  .nav-toggle__bar--02 {
    margin-top: 8px;
  }
}

@media print, screen and (min-width: 1101px) {
  .gnav__menu {
    margin-left: 0;
  }
}

.gnav__menu .link {
  color: #fff;
}

.gnav__menu .link:hover {
  background-image: -webkit-gradient(linear, left top, right top, from(#fff), to(#fff));
  background-image: -webkit-linear-gradient(left, #fff, #fff);
  background-image: -o-linear-gradient(left, #fff, #fff);
  background-image: linear-gradient(90deg, #fff, #fff);
}

.is-scrolled .gnav {
  background: #000;
}

.nav-toggle__inner span[class*='nav-toggle__bar'],
.nav-toggle__bar--02:after {
  background-color: #fff;
}

#gnav {
  background-color: #000;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
}

.gnav__inner {
  background-color: #000;
}

@media print, screen and (min-width: 768px) {
  .gnav__inner {
    height: 80px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    max-width: initial;
    width: 95.84%;
  }
}

.gnav__inner .gnav__submitBtn.link__arrow--white {
  background-image: url(../../images/common/arrow01_white.svg);
  color: #fff;
}

.page__head .gnav {
  color: #fff;
  z-index: 40;
  top: 0;
}

@media print, screen and (min-width: 1101px) {
  .page__head .gnav {
    padding-top: 0;
  }
}

@media print, screen and (min-width: 1101px) {
  .gnav-logo__img {
    width: 67px !important;
    height: 66px !important;
    position: relative;
  }
}

/* ==========================================================================
   キッズサイト共通スタイル（/kids の全ページで読み込む）
   - ヘッダー／グローバルナビ：kids.css（キッズトップ）と同じ見た目にする
   - 下層ページ（アーカイブ・詳細）の見出しエリアをキッズ配色にする
   - キッズ用フッター（/static/include/common/footer_kids.html）
   読み込み：rei-dance-kids/header.php（個別CSSの後）
   ========================================================================== */

/* ---------- 全ページ共通 ---------- */
.main {
  background-color: #fff;
}

/* ---------- キッズ専用ヘッダー（header_kidssite.html）のロゴ ---------- */
/* logo_kids.png（白・縦長 602×746）を使うので、正方形ロゴ用のサイズ指定と白反転フィルターを解除する */
.gnav-logo__img--kids {
  width: 100% !important;
  height: auto !important;
  -webkit-filter: none !important;
  filter: none !important;
}

@media print, screen and (max-width: 767px) {
  .header-logo--kids {
    width: 9vw;
  }
}

@media print, screen and (min-width: 768px) and (max-width: 1100px) {
  .header-logo--kids {
    width: 42px;
  }
}

@media print, screen and (min-width: 1101px) {
  .gnav-logo--kids {
    width: auto;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }

  .gnav-logo--kids .gnav-logo__img--kids {
    width: 48px !important;
  }
}

/* ---------- 下層ページの見出し（アーカイブ：.page__head） ---------- */
/* ※ キッズトップ（body.home）は kids.css のメインビジュアル用スタイルを使う */
body:not(.home) .page__head {
  background: #8177f2 linear-gradient(90deg, #ceadef 0%, #8177f2 50%, #4eaff7 100%);
  color: #fff;
}

body:not(.home) .page__head .page__head__h1--en,
body:not(.home) .page__head .page__head__h1--jp,
body:not(.home) .page__head .breadcrumb,
body:not(.home) .page__head .breadcrumb__link,
body:not(.home) .page__head .breadcrumb__text {
  color: #fff;
}

body:not(.home) .page__head .breadcrumb__item:first-child .breadcrumb__link {
  background: url(../../images/common/icon_home.png) no-repeat left center/contain;
}

/* ---------- 詳細ページの見出し（.hero：ニュース・インストラクターなど） ---------- */
.single .hero {
  background: #8177f2 linear-gradient(90deg, #ceadef 0%, #8177f2 50%, #4eaff7 100%);
  color: #fff;
}

.single .hero .hero__customPost__name,
.single .hero .hero__h1,
.single .hero .hero__date,
.single .hero .intro__text,
.single .hero .hero__genre__item,
.single .hero .breadcrumb,
.single .hero .breadcrumb__link,
.single .hero .breadcrumb__text {
  color: #fff;
}

.single .hero .breadcrumb__item:first-child .breadcrumb__link {
  background: url(../../images/common/icon_home.png) no-repeat left center/contain;
}

.single .hero .hero__link--list {
  color: #fff;
  background-image: url(../../images/common/arrow01_white_left.svg);
}

.single .hero .career-link {
  color: #fff;
  border-color: #fff;
  background-image: url(../../images/common/arrow01_white.svg);
}

/* 詳細ページ見出し内のナビ（PC）：黒いバーを最上部に付ける（共通CSSは top:49px） */
@media print, screen and (min-width: 1101px) {
  .single .hero .gnav {
    top: 0;
  }
}

/* ---------- キッズ フッター（footer_kidssite.html） ---------- */
/* 構成・レイアウトは共通CSSの横浜フッター（.footer__*）をそのまま使い、背景と文字色だけ上書きする */
.footer--kids {
  background: #8177f2 linear-gradient(120deg, #ceadef 0%, #8177f2 55%, #4eaff7 100%);
  color: #fff;
}

/* 画面下に固定表示されるキャンペーンバナー（.fixed-campaign-banner、高さ約 53px）に
   コピーライトが隠れないよう、フッター下端に余白を足す */
@media print, screen and (max-width: 767px) {
  .footer--kids {
    height: auto !important;
    padding-bottom: 90px;
  }
}

@media print, screen and (min-width: 768px) and (max-width: 1100px) {
  .footer--kids {
    padding-bottom: 80px;
  }
}

@media print, screen and (min-width: 1101px) {
  .footer--kids .footer__under {
    padding-bottom: 80px;
  }
}

.footer--kids .footer__upper,
.footer--kids .footer__middle,
.footer--kids .footer__middle--right {
  border-bottom-color: rgba(255, 255, 255, 0.4);
}

.footer--kids .footer__siteName,
.footer--kids address,
.footer--kids address a,
.footer--kids .copyright,
.footer--kids .breadcrumb,
.footer--kids .breadcrumb__link,
.footer--kids .breadcrumb__text,
.footer--kids .pagetop__text {
  color: #fff;
}

.footer--kids .btn__memberLogin:hover {
  background-color: #fff;
  color: #8177f2;
}

.footer--kids .footer__btn img,
.footer--kids .footer__banner___image {
  border-radius: 6px;
}

/* ---------- ヘッダー：最初は透明、スクロールすると白 ---------- */
/* スクロール判定は common.js が body に付ける .is-scrolled（50px 以上スクロール） */

/* 透明状態（初期） */
.header--kids,
.header--kids .header-top {
  background: transparent;
  -webkit-transition:
    background-color 0.3s,
    -webkit-box-shadow 0.3s;
  transition:
    background-color 0.3s,
    box-shadow 0.3s;
}

#gnav,
.gnav--kids .gnav__inner {
  background: transparent;
}

@media print, screen and (min-width: 1101px) {
  .gnav--kids {
    -webkit-transition:
      background-color 0.3s,
      -webkit-transform 0.25s;
    transition:
      background-color 0.3s,
      transform 0.25s;
  }
}

/* スマホ・タブレットの開いたメニュー（パネル）：白（半透明）にして文字・矢印・区切り線を黒系に */
@media print, screen and (max-width: 1100px) {
  #gnav.gnav--kids {
    background: #fff;
    color: #111;
  }

  .gnav--kids .gnav__menu .link,
  .gnav--kids .gnav-item__link--tertiary,
  .gnav--kids .footer__snsLink,
  .gnav--kids .copyright,
  .gnav--kids .gnav__banners .swiper-pagination-fraction,
  .gnav--kids .gnav__banners .swiper-button-prev,
  .gnav--kids .gnav__banners .swiper-button-next {
    color: #111;
  }

  .gnav--kids .gnav__menu .link:hover {
    background-image: -webkit-gradient(linear, left top, right top, from(#111), to(#111));
    background-image: linear-gradient(90deg, #111, #111);
  }

  .gnav--kids .gnav-item--primary {
    border-bottom-color: #e3e3e3;
  }

  .gnav--kids .gnav-item__link--primary {
    background-image: url(../../images/common/arrow01_black.svg) !important;
  }

  .gnav--kids .gnav-item__link--primary.no-link {
    background-image: none !important;
  }

  .gnav--kids .gnav-item__link--tertiary {
    background-image: url(../../images/common/arrow01_black.svg) !important;
  }

  /* メニューを開いている間はヘッダーもパネルと同じ白にする */
  .is-nav-opened .header--kids,
  .is-nav-opened .header--kids .header-top {
    background: #fff;
  }

  .is-nav-opened .header--kids .header__members__text,
  .is-nav-opened .header--kids .nav-toggle__text {
    color: #111;
  }

  .is-nav-opened .header--kids .nav-toggle__inner span[class*='nav-toggle__bar'],
  .is-nav-opened .header--kids .nav-toggle__bar--02:after {
    background-color: #111;
  }

  .is-nav-opened .header--kids .header__reharsal__icon,
  .is-nav-opened .header--kids .header__members__icon {
    -webkit-filter: none;
    filter: none;
  }
}

/* ロゴ（logo_kids.png・白）は透明状態では白のまま。背景が白になる状態（スクロール後・メニュー展開中）は黒にする */
.gnav-logo__img--kids {
  -webkit-filter: none !important;
  filter: none !important;
}

.is-scrolled .gnav-logo__img--kids,
.is-nav-opened .gnav-logo__img--kids {
  -webkit-filter: brightness(0) !important;
  filter: brightness(0) !important;
}

/* スマホ・タブレットの開いたメニュー（白パネル）内のロゴも黒 */
@media print, screen and (max-width: 1100px) {
  .gnav--kids .gnav-logo__img--kids {
    -webkit-filter: brightness(0) !important;
    filter: brightness(0) !important;
  }
}

/* スクロール後：白＋文字・アイコンを黒に */
.is-scrolled .header--kids,
.is-scrolled .header--kids .header-top {
  background: #fff;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.is-scrolled .header--kids .header__members__text,
.is-scrolled .header--kids .nav-toggle__text {
  color: #111;
}

.is-scrolled .header--kids .nav-toggle__inner span[class*='nav-toggle__bar'],
.is-scrolled .header--kids .nav-toggle__bar--02:after {
  background-color: #111;
}

.is-scrolled .header--kids .header__reharsal__icon,
.is-scrolled .header--kids .header__members__icon {
  -webkit-filter: none;
  filter: none;
}

@media print, screen and (min-width: 1101px) {
  body.is-scrolled #gnav.gnav--kids {
    background: #fff;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    color: #111;
  }

  .is-scrolled .gnav--kids .gnav__menu .link,
  .is-scrolled .gnav--kids .footer__snsLink {
    color: #111;
  }

  .is-scrolled .gnav--kids .gnav__menu .link:hover {
    background-image: -webkit-gradient(linear, left top, right top, from(#111), to(#111));
    background-image: linear-gradient(90deg, #111, #111);
  }
}

/* ---------- スマホ・タブレット：背景をページ上端（透明ヘッダーの後ろ）まで伸ばす ---------- */
/* 共通CSSは .main と .footer をヘッダー高さ分（SP 17.33vw／タブレット 80px）translateY で下げているため、
   透明ヘッダーの後ろに body の黒が見える。キッズではずらさず、見出しエリア側にヘッダー分の上余白を持たせる */
@media print, screen and (max-width: 1100px) {
  .main,
  .footer--kids {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

@media print, screen and (max-width: 767px) {
  /* キッズトップ（メインビジュアル） */
  .home .page__head {
    height: calc(157.3333333333vw + 17.3333333333vw);
  }

  .home .page__head__inner {
    padding-top: calc(5.3333333333vw + 17.3333333333vw);
  }

  /* アーカイブの見出し（共通は上余白 19.07vw。ヘッダー 17.33vw に隠れないよう少し足す） */
  body:not(.home) .page__head .page__head__inner {
    padding-top: calc(19.0666666667vw + 4vw);
  }

  /* 詳細ページの見出し（single-news.css は上下 8vw） */
  .single .hero {
    padding-top: calc(8vw + 17.3333333333vw);
  }
}

@media print, screen and (min-width: 768px) and (max-width: 1100px) {
  .home .page__head__inner {
    padding-top: calc(5.3333333333vw + 80px);
  }
}

/* ---------- WordPress 管理バー表示時（ログイン中）の位置調整 ---------- */
/* 管理バーは高さ 32px（783px 以上）／46px（782px 以下）。html に margin-top が付くのでコンテンツはずれないが、
   fixed / sticky のヘッダー・ナビは top を管理バー分だけ下げる */

/* スマホ・タブレット：固定ヘッダー（.header）と開いたナビ（.gnav） */
@media print, screen and (max-width: 782px) {
  .admin-bar .header {
    top: 46px;
  }

  .admin-bar.is-nav-opened .gnav {
    max-height: calc(100vh - 17.3333333333vw - 46px);
    -webkit-transform: translateY(calc(17.3333333333vw + 46px));
    -ms-transform: translateY(calc(17.3333333333vw + 46px));
    transform: translateY(calc(17.3333333333vw + 46px));
  }
}

@media print, screen and (min-width: 768px) and (max-width: 782px) {
  .admin-bar.is-nav-opened .gnav {
    max-height: calc(100vh - 80px - 46px);
    -webkit-transform: translateY(126px);
    -ms-transform: translateY(126px);
    transform: translateY(126px);
  }
}

@media print, screen and (min-width: 783px) and (max-width: 1100px) {
  .admin-bar .header {
    top: 32px;
  }

  .admin-bar.is-nav-opened .gnav {
    max-height: calc(100vh - 80px - 32px);
    -webkit-transform: translateY(112px);
    -ms-transform: translateY(112px);
    transform: translateY(112px);
  }
}

/* PC：スクロール時に現れる sticky ナビ */
@media print, screen and (min-width: 1101px) {
  .admin-bar .gnav {
    top: 32px;
  }

  /* 詳細ページの見出し内ナビ（absolute 配置）は元の位置のまま */
  .admin-bar .hero .gnav {
    top: 49px;
  }
}

/* メニュー内のキャンペーンバナー（header_kidssite.html の .campaign_banner）
   ・PC（1101px〜）はヘッダーバーを「ロゴ（左）／グローバルメニュー（中央）／バナー（右）」に並べる
     ロゴとバナーを同じ伸縮幅（flex: 1 1 0）にしてメニューを中央へ
     バナーはスマホのメニュー内と同じ幅 370px（高さ約 53px、ヘッダー 80px に対し上下の余白は約 13px）で右寄せ
     画面右の余白は .gnav__inner の既定のまま（バナーは右端に付けない）
   ・スマホ・タブレットのメニューパネル内では幅 370px までで表示 */
@media print, screen and (min-width: 1101px) {
  .gnav--kids .gnav__inner > .gnav-logo {
    flex: 1 1 0;
    min-width: 0;
  }

  .gnav--kids .gnav__menu {
    flex: 0 0 auto;
    order: 1;
  }

  .gnav--kids .campaign_banner {
    display: flex;
    order: 2;
    justify-content: flex-end;
    flex: 1 1 0;
    min-width: 370px;
    max-width: none; /* kids.css（トップのみ読込）の .campaign_banner { max-width: 370px } を解除 */
    margin-left: 24px;
    line-height: 0;
  }

  .gnav--kids .campaign_banner img {
    display: block;
    width: 370px;
    height: auto;
  }
}

/* 狭いPC（1101〜1415px）はメニューを画面中央に置くとバナー 370px が入らないため、
   ロゴは自身の幅だけにし、メニューはロゴとバナーの間の中央に置く */
@media print, screen and (min-width: 1101px) and (max-width: 1415px) {
  /* メニュー自体の margin は既存CSSで指定されているため、ロゴ右・バナー左の auto マージンで空きを均等に分ける */
  .gnav--kids .gnav__inner > .gnav-logo {
    flex: 0 0 auto;
    margin-right: auto;
  }

  .gnav--kids .campaign_banner {
    flex: 0 0 auto;
    min-width: 0;
    margin-left: auto;
  }
}

/* 〜1599px はメニュー項目が7つ（EVENT 追加）とバナー 370px が並ぶと幅が足りないため、メニューの間隔と文字を詰める */
@media print, screen and (min-width: 1101px) and (max-width: 1599px) {
  .gnav--kids .gnav__menu > .gnav-item--primary:not(:last-child) {
    margin-right: 22px;
  }

  .gnav--kids .gnav__menu .gnav__text--eng {
    font-size: 16px;
  }
}

@media print, screen and (max-width: 1100px) {
  .gnav--kids .campaign_banner {
    display: block;
    width: 100%;
    max-width: 370px;
    margin: 24px auto 0;
  }

  .gnav--kids .campaign_banner img {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* kids.css にあって未移植だったヘッダー関連の残り（トップと同一内容） */
.page__head__inner .gnav-logo__img {
  position: relative;
  z-index: 50;
}

@media print, screen and (max-width: 1100px) {
  .headerbtn__line {
    margin-top: 5.2vw !important;
  }
}

@media print, screen and (min-width: 768px) {
  .gnav__menu li:nth-of-type(9) {
    margin-right: 0;
  }
}

/* トップ NEWS：PCではスライダーの矢印・ページ番号（.swiper2__nav__wrap）がスライダー下に 52px はみ出すため、
   「すべてのニュースを見る」ボタンと重ならないよう上に余白を取る（margin は相殺されるので padding で指定） */
@media print, screen and (min-width: 1101px) {
  .news .kids__btn__area {
    padding-top: 48px;
  }
}

/* ---------- トップ：ヒーロー下のスライドバナー（content-kids.php .top__banners） ---------- */
/* ページ番号（1 / 2）が Swiper 標準CSSの position:absolute で ◀ ▶ に重なるため、並びの中に戻して「◀ ▶ 1 / 2」にする（下のスライダーと同じ並び） */
.top__banners .swiper1__nav__wrap .swiper-pagination {
  position: static;
  width: auto;
}

/* ◀ ▶ は Swiper 標準CSS（高さ 44px・margin-top:-22px）でページ番号より上に浮くため、高さを文字に合わせて縦位置を揃える */
.top__banners .swiper1__nav__wrap .swiper-button-prev,
.top__banners .swiper1__nav__wrap .swiper-button-next {
  top: 0;
  left: auto; /* Swiper 標準の left/right:10px で ◀ ▶ が寄って重なるのを解除 */
  right: auto;
  width: auto;
  height: auto;
  margin-top: 0;
  padding: 4px;
}

.top__banners .swiper1__nav__wrap .swiper-button-next {
  margin-right: 0;
}

@media print, screen and (min-width: 768px) {
  .top__banners .swiper1__nav__wrap .swiper-button-prev {
    margin-right: 16px;
  }

  .top__banners .swiper1__nav__wrap .swiper-pagination {
    margin: 0 0 0 20px;
  }
}

/* 2枚以下（.is-static）はスライドさせず中央に並べる（PCは横並び、スマホは縦並び） */
.top__banners.is-static .swiper-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: none !important;
}

@media print, screen and (min-width: 768px) {
  .top__banners.is-static .swiper-wrapper {
    gap: 30px;
    box-sizing: border-box;
    padding: 0 4vw; /* タブレット幅でバナーが画面端に付かないように */
  }

  .top__banners.is-static .swiper-slide {
    flex-shrink: 0;
    width: calc((100% - 30px) / 2) !important;
    max-width: 568px;
  }
}

@media print, screen and (max-width: 767px) {
  .top__banners.is-static .swiper-wrapper {
    flex-direction: column;
    gap: 4vw;
  }
}

/* ---------- トップ：NEWS スライダーの操作（content-kids.php .news .swiper2__nav__wrap） ---------- */
/* ページ番号が Swiper 標準CSSの position:absolute（幅 100vw）で左に寄り、スマホでは ◀ ▶ と重なっていたため、
   インストラクター詳細の動画スライダーと同じく「見出し行の右端に ◀ ▶ 1 / 6」（同じ文字サイズ・色）に揃える */
.news .news__guide {
  position: relative;
}

.news .swiper-container2 .swiper2__nav__wrap {
  position: absolute;
  top: -18px; /* .swiper-container2 の上端から見た NEWS 見出しの縦中央 */
  right: 0;
  bottom: auto;
  left: auto;
  width: auto;
  margin: 0;
  justify-content: flex-end;
  transform: translateY(-50%);
  z-index: 2;
}

.news .swiper2__nav__wrap .swiper-pagination {
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  width: auto;
  margin: 0 0 0 20px;
  font-size: 12px;
  color: #111;
}

.news .swiper2__nav__wrap .swiper-button-prev,
.news .swiper2__nav__wrap .swiper-button-next {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: auto;
  height: auto;
  margin: 0;
  padding: 4px;
  font-size: 12px;
  line-height: 1;
  color: #111;
  cursor: pointer;
}

.news .swiper2__nav__wrap .swiper-button-prev {
  margin-right: 16px;
}

.news .swiper2__nav__wrap .swiper-button-disabled {
  opacity: 0.3;
}

@media print, screen and (min-width: 768px) and (max-width: 1100px) {
  .news .swiper-container2 .swiper2__nav__wrap {
    right: 4vw;
  }
}

@media print, screen and (max-width: 767px) {
  .news .swiper-container2 .swiper2__nav__wrap {
    top: 3.6vw;
  }

  .news .swiper2__nav__wrap .swiper-pagination {
    margin-left: 2.6666666667vw;
    font-size: 3.2vw;
  }

  .news .swiper2__nav__wrap .swiper-button-prev,
  .news .swiper2__nav__wrap .swiper-button-next {
    padding: 1.0666666667vw;
    font-size: 2.2666666667vw;
  }

  .news .swiper2__nav__wrap .swiper-button-prev {
    margin-right: 2.6666666667vw;
  }
}