/* -----
共通
----- */

	/* -----
	見出し
	----- */

		.safety .details img {
			margin: 20px;
		}


	/* -----
	本文
	----- */

		.details p {
			line-height: 150%;
		}

			
	/* -----
	安全性試験
	----- */

		table caption {
			text-align: center;
			padding: 10px;

			background-color: #CD5C5C;
			color: #FFFFFF;

			border: 1px solid #231815;
			border-bottom: 0;
		}

		table th {
			align-content: center;

			background-color: #FFFFE0;

			border: 1px solid #231815;
		}

		table td {
			padding: 10px;

			line-height: 150%;

			border: 1px solid #231815;
		}
		
	/* -----
	フェードイン用
	----- */

	.fadeIn {
			opacity: 0; /* 透過させておく */
			visibility: hidden; /* 非表示にしておく */
			transform: translateY(30px); /* 動かすために30px下に配置【Y→Xで右から左】【(-30px)で動き逆になる】 */
			transition: 1s /* opacity 1s, visibility 1s, transform 1s */ ; /* 各々の変化の速度【1s＝1秒】 */
		}
			
		/* jsで後からつける要素【HTMLに書かなくてよい】 */
		.fade-in {
			opacity: 1;
			visibility: visible;
			transform: translateX(0); /* 【.fade】で"transform: translate'Y'"の場合は'X' */
		}


/* -----
PC
----- */

	@media not screen and (max-width:1200px) {

		/* -----
		見出し
		----- */
		
			.safety {
				max-width: 1100px;
				margin: auto;
				margin-bottom: 100px;
			}
			
			.safety .details {
				display: flex;
				justify-content: center;

				margin: 10px 0;
			}
			
			.safety .details div {
				width: 100%;
			}
			
			.safety .details h3 {
				width: 100%;

				margin-bottom: 5px;
				padding-left: 10px;
				
				font-size: xx-large;

				border-bottom: 3px solid #231815;
			}
			
			.safety .details p {
				margin: 20px;

				font-size: large;
			}
			
			.safety:nth-child(odd) .details {
				flex-direction: row-reverse;
			}

			
		/* -----
		安全性試験
		----- */
		
			table {
				max-width: 1100px;
				margin: auto;
				margin-bottom: 5px;
			}

			table caption {
				letter-spacing: 50px;

				font-size: x-large;
			}

			table th {
				align-content: center;

				width: 220px;

				padding: 10px;

				background: #FFFFE0;

				border: 1px solid #231815;
			}

			table td {
				width: 880px;
			}

			.test {
				text-align: end;

				margin-right: 40px;
			}
	}


/* -----
SP
----- */

	@media screen and (max-width:1200px) {

		/* -----
		見出し
		----- */
		
			.safety {
				width: 100%;
				margin-bottom: 50px;
			}
			
			.safety .details {
				display: flex;
				flex-direction: column-reverse;
				margin: 10px 0;
			}
			
			.safety .details h3 {
				width: 90%;

				margin-bottom: 5px;
				padding-left: 10px;
				
				font-size: large;

				border-bottom: 3px solid #231815;
			}
			
			.safety .details p {
				margin: 10px;

				word-wrap: break-word;
			}

			.safety .details img {
				width: 90%;
				height: 90%;
			}

			
		/* -----
		安全性試験
		----- */
		
			table {
				width: 90%;

				margin: auto;
				margin-bottom: 5px;
			}

			table caption {
				letter-spacing: 10px;

				font-size: large;
			}
			
			table th {
				width: 30%;

				padding: 10px;
			}
			
			table td {
				width: 70%;
			}
			
			.test {
				text-align: end;

				margin-right: 15px;

				font-size: small;
			}
	}