html {
	font-size: 12px;
	}

  .midasi {
	font-size: 2rem; /* 16pxの2倍サイズ */
  }

  .box {
	/* PC表示では1200pxを最大幅とする */
	max-width: 1200px;
	/* PC表示では中央寄せにする */
	margin: 0 auto;
	padding: 0.5em;
	border: 0.2em solid black;
  }

  .video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 アスペクト比 */
    height: 0;
    overflow: hidden;
  }	

  .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  @media screen and (max-width: 768px) {
		.box {
			/* タブレット表示ではセンタリング */
			margin: 0 auto;
		}
	}

	@media screen and (max-width: 480px) {
		.box {
		  /* スマホ表示では横幅いっぱいに表示する */
		  max-width: 100%;
		  /* スマホ表示ではborderを無効にする */
		  padding: 0;
		  border: none;
		}
	  }

  .default {
	font-size: 1.5rem; /* 16pxの1.5倍サイズ */
  }

  img {
	width: 100%;
  }

  iframe {
	width: 80%;
	margin: 0 auto;	/* 中央寄せ */
	/* iframeを中央寄せするためのおまじない */
	display: block;
  }

  /* PC */
  p {
	padding: 0;
	border: none;
}

  /* PC */
  p {
	background-color: black;
	color: white;
  }

  /* タブレット */
  @media screen and (max-width: 768px) {
	p {
		background-color: black;
		 color:green;
	}
  }

  /* スマホ */
  @media screen and (max-width: 480px) {
	p {
		background-color: black;
		 color:red;
	}
  }