/*====================================
↓GoogleFont読み込み↓
====================================*/
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700,900&display=swap&subset=japanese");

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

/*====================================
↓デフォルトCSS↓
====================================*/
html {
  overflow-y: scroll;
  font-size: 1px;
  height: -webkit-fill-available;
}
@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 {
	font-size: 14rem;
	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-in-out;
}
a:hover img {
	opacity: 0.7;
}
img.nofade {
	opacity: 1 !important;
}
img {
	width: 100%;
}

/*====================================
↓判定用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;
	}
}