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

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

		.about:nth-child(even) .details {
			flex-direction: row-reverse;
		}


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

		.details p {
			line-height: 150%;
		}
		
		.details span {
			font-weight: bold;
		}
	/* -----
	フェードイン用
	----- */

	.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) {

		/* -----
		見出し
		----- */
				
		.about h3 {
			width: 50%;

			margin-bottom: 5px;
			padding-left: 10px;
			padding-bottom: 3px;

			font-size: xx-large;

			border-bottom: 3px solid #231815;
		}
		
		.about .details {
			display: flex;
			align-items: center;

			margin: 10px;
		}
		
		.about .details p {
			margin: 20px;

			font-size: large;
		}
	}


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

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

		/* -----
		見出し
		----- */
		
		.about h3 {
			width: 80%;

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

			border-bottom: 3px solid #231815;
		}
		
		.about .details img {
			width: 100%;
			height: 100%;
		}
		
		.about .details p {
			margin: 10px;

			word-wrap: break-word;

		}
	}