/*====================================
↓GoogleFont読み込み↓
====================================*/
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700,900&display=swap&subset=japanese");
@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/*====================================
↓全体共通変数定義↓
====================================*/
:root {
  /* フォント関連 */
  --font-color-base: #333;
  --font-color-main: #1a5e9a;
  --font-family-base: "Noto Sans JP", sans-serif;
  --font-family-barlow: "Barlow", sans-serif;;
  /* 色関連 */
  --back-color-base: #fff;
  /* デザインサイズ（デザインサイズに合わせて以下値を変更） */
  --design-size-pc: 1280;
  --design-size-sp: 750;
}

/*====================================
↓デフォルトCSS↓
====================================*/
html {
  overflow-y: scroll;
  font-size: 1px;
  height: -webkit-fill-available;
}
@media screen and (max-width: 1280px) {
  /* ←max-widthの値は[var(--design-size-pc)]と同一にする*/
  html {
    font-size: calc(1 / var(--design-size-pc) * 100vw);
  }
  html.is_other {
    font-size: calc(1 / var(--design-size-pc) * (100vw - 18px));
  }
}
@media screen and (max-width: 768px) {
  /* ←ここはママで良い*/
  html {
    font-size: calc(1 / var(--design-size-sp) * 100vw);
  }
  html.is_other {
    font-size: calc(1 / var(--design-size-sp) * (100vw - 18px));
  }
}
body {
  font-size: 16rem;
  font-family: var(--font-family-base);
  color: var(--font-color-base);
  background-color: var(--back-color-base);
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* SP
----------------------------------*/
@media screen and (max-width: 768px) {
  body {
    font-size: 32rem;
  }
}
a {
  color: var(--font-color-base);
  text-decoration: underline;
}
a:hover {
  text-decoration: none;
}
a img {
  transition: opacity 0.3s ease-out;
}
a:hover img {
  opacity: 0.7;
}
img.nofade {
  opacity: 1 !important;
}
img {
  width: 100%;
  height: auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/*====================================
↓判定用CSS↓
====================================*/
#responseFlagTab {
  display: none !important;
}
@media screen and (min-width: 769px) {
  #responseFlagPc {
    display: block !important;
  }
  #responseFlagSp {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  #responseFlagPc {
    display: none !important;
  }
  #responseFlagSp {
    display: block !important;
  }
}

/*====================================
↓表示切り替え用CSS↓
====================================*/
@media screen and (min-width: 769px) {
  .sp {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .pc {
    display: none !important;
  }
}