/* -------------------------------------------------------
事業内容一覧
---------------------------------------------------------*/
	.contents {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.box {
		text-align: center;
		padding: 20px 0;
		border-radius: 20px;
		background-color: #FDFDFD;
		box-shadow: 5px 5px 10px 0 #333333; 
	}

	.box .orange {
		background-color: var(--sub_grad_end);
	}

	.box img {
		margin: 15px 0;
	}
	
	.box p {
		align-content: center;
		padding: 0 20px;
		line-height: 200%;
	}

	/* -----新着情報テーブル----- */
	.fade {
		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' */
	}


/* -------------------------------------------------------
事業内容詳細
---------------------------------------------------------*/

	.service-ttl {
		display: flex;
		justify-content: space-around;
		margin-bottom: 50px;
	}

	.service-ttl h2 {
		align-content: center;
		text-align: center;

	}

	.service-subTtl {
		margin-bottom: 50px;
	}

	.service-subTtl h3,
	.service-subTtl h4 {
		text-align: center;
		margin-bottom: 20px;
	}

	.service-subTtl p,
	.strength p {
		text-indent: 1em;
		line-height: 150%;
	}

	.strength div {
		margin-bottom: 30px;
	}

	.strength h5 {
		text-align: center;
		font-size: large;
		font-weight: bold;
	}

	.strength > h5 {
		margin-bottom: 20px;
	}
	
	.example h6,
	.example p {
		margin-bottom: 5px;
		line-height: 150%;
	}

/* -------------------------------------------------------
PC設定
---------------------------------------------------------*/

	@media not screen and (max-width:1200px) {
		
		/* ---------------
		事業内容一覧
		--------------- */

		.box {
			width: 500px;
			height: 100%;
		}

		.box h2 {
			width: 420px;
			margin-bottom: 10px;
			padding: 5px;
			clip-path: polygon(0 0, 100% 0, 400px 100%, 0 100%);
			font-size: x-large;	
			font-weight: bold;
			color: var(--sub_font_color);
			background-color: var(--main_grad_end);
		}

		.box h2 span {
			font-size: medium;
		}

		.box h3 {
			padding-bottom: 10px;
		}
		.box p {
			height: 110px;
			font-size: large;
		}

		.box .sp {
			display: none;
		}

		
		/* ---------------
		事業内容詳細
		--------------- */
		.service-ttl h2 {
			font-size: 50px;
		}

		.service-ttl h2 span {
			font-size: xx-large;
		}

		.service-subTtl h3 {
			font-size: xx-large;
		}

		.service-subTtl h4 {
			font-size: x-large;
		}

		.service-subTtl h3 br,
		.service-subTtl h4 br,
		section h5 br {
			display: none;
		}

		 .strength div {
			display: flex;
			justify-content: space-around;
		}

		.strength:nth-child(even) div {
			flex-direction: row-reverse;
		}

		section h5 {
			align-content: center;
		}
	}

/* -------------------------------------------------------
SP設定
---------------------------------------------------------*/

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

		/* ---------------
		事業内容一覧
		--------------- */
		.box {
			width: 90%;
			max-width: 350px;
			margin: auto;
			margin-bottom: 100px;
		}

		.box h2 {
			width: 300px;
			margin-bottom: 10px;
			padding: 5px;
			clip-path: polygon(0 0, 100% 0, 280px 100%, 0 100%);
			font-size: arge;	
			font-weight: bold;
			color: var(--sub_font_color);
			background-color: var(--main_grad_end);
		}

		.box h2 span {
			font-size: small;
		}

		.box h3 {
			font-size: small
		}

		.box img {
			width: 100%;
		}
		
		.box p {
			height: 105px;
			font-size: small;
		}

		
		/* ---------------
		事業内容詳細
		--------------- */
		.service-ttl {
			flex-direction: column-reverse;
		}
		.service-ttl img {
			width: 100%;
		}
		.service-ttl h2 {
			margin-bottom: 10px;
			font-size: x-large;
		}

		.service-ttl h2 span {
			font-size: large;
		}
		
		.service-subTtl h3 {
			font-size: x-large;
		}

		.service-subTtl h4 {
			font-size: large;
		}

		section div img {
			width: 100%;
			margin-bottom: 30px;
		}
	}