/*====================================
↓GoogleFont読み込み↓
====================================*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Red+Hat+Text:ital,wght@0,300..700;1,300..700&display=swap");



/*====================================
↓全体共通変数定義↓
====================================*/
:root {
  /* ブレークポイント（案件に合わせて変更-JSの判定に使用） */
  --breakpoint-pc: 769px;
  /* フォント関連 */
  --font-color-base: #333;
  --font-color-main: #11519f;
  --font-color-sub: #26b593;
  --font-family-base: "Noto Sans JP", sans-serif;
  --font-family-serif: "Noto Serif JP", serif;
  --font-family-red-hat-text: "Red Hat Text", sans-serif;
  --font-family-open-sans: "Open Sans", sans-serif;
  /* 色関連 */
  --back-color-base: #fff;
  --back-color-main: #11519f;
  --back-color-sub: #26b593;
  --back-color-white: #fff;
  /* デザインサイズ（デザインサイズに合わせて以下値を変更） */
  --design-size-pc: 1200;
  --design-size-sp: 375;
  /* Flexでのギャップ値指定 */
  --grid-num: 16rem;
  --negative-margin: calc(50% - 50cqi);
}
[data-sa-type] {
  opacity: 0;
}

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

sub,
sup {
  position: relative;
  font-size: 62%;
  line-height: 0;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}

.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
}


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


.dummyTxt {
  position: absolute;
  top: 10rem;
  font-size: 12rem;
  line-height: 2;
  transform: translateX(-100%);
}
*:has( > .dummyTxt) {
  position: relative;
}