@charset "UTF-8";

:root {
  /* コンテナ要素幅 */
  --responsive-sys-container-width: 1200px;
  --responsive-sys-content-header-width: 23%;

  /* ボタン幅 */
  --responsive-sys-button-width: 160px;
  --responsive-sys-snssync-button-width: 280px;

  /* 枠色 */
  --responsive-sys-border-color-gray-primary: #c8c8c8;
  --responsive-sys-border-color-gray-tertiary: #e5e5e5;
  --responsive-sys-border-color-gray-secondary: #dcdcdc;

  /* 背景色 */
  --responsive-sys-content-header-background-color: #f8f8f8;
}

@media screen and (min-width: 835px) {
  body {
    font-size: 16px;
  }
  /* ----ヘッドライン---- */

  h1,
  .h1 {
    font-size: 28px;
    font-family: var(--font-500);
    font-weight: 500;
  }
  h2,
  .h2 {
    font-size: 24px;
    font-family: var(--font-500);
    font-weight: 500;
  }
  h3,
  .h3 {
    font-size: 18px;
  }
  .pc-only{
    display: block;
  }
  .sp-only{
    display: none;
  }
  body .swiper-button-next, body .swiper-button-prev {
    width: 49px;
    height: 49px;
    transition: background-color .3s;
  }
  .swiper-button-next:hover, .swiper-button-prev:hover {
    background: #868E9B;
  }
  .swiper-button-next:hover::after {
    background: url(../../img/usr/common/arrow_next_w.png) center center / contain no-repeat;
  }
  .swiper-button-prev:hover::after {
    background: url(../../img/usr/common/arrow_prev_w.png) center center / contain no-repeat;
  }
  .swiper-button-pause {
    width: 49px;
    height: 49px;
    cursor: pointer;
    transition: background-color .3s;
  }
  .swiper-button-pause:hover {
    background: #868E9B;
  }
  .swiper-button-pause:hover::before, .swiper-button-pause:hover::after {
    background: #FFF;
  }
}