#body
{
	article
	{
		header
		{
			display: flex;
			position: relative;
			justify-content:flex-end;
			margin-bottom:120px;
			div
			{
				position: absolute;
				background-color: rgba(255,255,255,.8);
				bottom:0;
				left:0;
				width: 485px;
				z-index: 2;
				padding:40px;
				h1
				{
					margin-bottom:20px;
				}
			}
			picture
			{
				padding:40px;
				display: block;
				width: 70%;
				position: relative;

				&::before
				{
					display: block;
					content:' ';        
					padding-top:80%;
				}
				&::after
				{
					position: absolute;
					top:0;
					right:0;
					display: block;
					content: ' ';
					width: 50%;
					height: 100%;
					background-color: $main-color;
				}
				img
				{
					top:40px;
					right:40px;
					position: absolute;
					z-index:1;
					display: block;
					width: calc(100% - 80px);
					height: calc(100% - 80px);
				}
			}
		}
		@media(max-width:767px)
		{
			header
			{
				padding-bottom:80px;
				div
				{
					padding-left:0;
					padding:40px 24px 24px 0;
					width: 80%;
				}
				picture
				{
					width: 100%;
					padding:20px;
					&::before
					{
						padding-top:120%;
					}
					img
					{
						top:20px;
						right:20px;
						width: calc(100% - 40px);
						height: calc(100% - 40px);
					}
				}
			}
		}

		#list-1
		{
			text-align: center;
			padding-bottom:60px;
			>div
			{
				margin-bottom: 30px;
				i
				{
					display: block;
					font-size: 30px;
					font-weight: 700;
					line-height: 45px;
					letter-spacing: 3px;
					color:$main-text-color;
					margin-bottom:20px;
				}
				h2
				{
					font-size: 16px;
					font-weight: 500;
					line-height: 24px;
					letter-spacing: 1.6px;
					margin-bottom: 20px;
				}
				p
				{
					font-size: 16px;
					line-height: 24px;
					letter-spacing: 1.6px;
					color:#8E8E93;
				}
			}
			@media(min-width:768px)
			{
				display: flex;
				justify-content:space-between;
				>div
				{
					width: calc((100% - 80px) / 3);
					margin:0 20px;
					&:nth-child(3n)
					{
						margin-right:0;
					}
					&:nth-child(3n + 1)
					{
						margin-left: 0;
					}
				}
			}
		}
		
		#list-2
		{
			background-color: #F6F6F6;
			padding-top:120px;
			padding-bottom:120px;
			>div
			{
				margin-bottom:120px;
				&:last-child
				{
					margin-bottom: 0;
				}
				picture
				{
					display: block;
					img
					{
						display: block;
						width: 100%;
					}
				}
				>div
				{
					background-color: #fff;
					text-align: center;
					font-size: 16px;
					line-height: 24px;
					letter-spacing: 1.6px;
					padding:20px;
					dl
					{
						dt
						{
							font-weight: 500;
							padding-top:20px;
							padding-bottom:20px;
						}
						dd
						{
							color:#8E8E93;
						}
					}
				}
			}
			@media(min-width:768px)
			{

				>div
				{
					display: flex;
					picture
					{
						width: 50%;
					}
					>div
					{
						width: 50%;
						display: flex;
						justify-content:center;
						align-items:center;
						
						dl
						{
							max-width:390px;
						}
					}
					&:nth-child(2n)
					{
						picture
						{
							order:1;
						}
						>div
						{
							order:0;
						}
					}
				}
			}
		}
		
		#list3
		{
			padding-top:120px;
			padding-bottom:120px;
			.data
			{
				margin-bottom: 120px;
				&:last-child
				{
					margin-bottom: 0;
				}
				picture
				{
					display: block;
					position: relative;
					&::after
					{
						content:' ';
						width: 50%;
						height: 50%;
						display: block;
						position: absolute;
						background-color: $main-color;
						top:0px;
						
					}
					img
					{
						position: relative;
						z-index: 1;
						display: block;
						width: 100%;
					}
				}
				.content
				{
					h2
					{
						margin-bottom:40px;
					}
					p
					{
						margin-bottom: 20px;
					}
					dl
					{
						margin-bottom: 10px;
						dt
						{
							color:$main-color;
							margin-bottom: 5px;
							font-weight: 500;
						}
					}
					.num-list
					{
						display: flex;
						flex-wrap:wrap;
						dl
						{
							width: calc(50% - 5px);
							&:nth-child(2n)
							{
								margin-left: 5px;
							}
							&:nth-child(2n + 1)
							{
								margin-right: 5px;
							}
							dt
							{
								span
								{
									font-size: 20px;
									font-weight: 500;
									line-height: 30px;
									letter-spacing: 2px;
								}
							}
							
						}
					}
				}
				&:nth-child(2n + 1)
				{
					picture
					{
						padding-top:40px;
						padding-right:40px;
						&::after
						{
							right:0;
						}
					}
				}
				&:nth-child(2n)
				{
					picture
					{
						padding-top:40px;
						padding-left: 40px;
						&::after
						{
							left: 0;
						}
					}
				}
			}			
			@media(min-width:1448px)
			{
				.data
				{
					&:nth-child(2n + 1)
					{
						padding-left:calc(50% - 700px);
					}
					&:nth-child(2n)
					{
						padding-right:calc(50% - 700px);
					}
				}
			}
			@media(max-width:1447px)
			{
				.data
				{
					&:nth-child(2n + 1)
					{
						padding-left:24px;
					}
					&:nth-child(2n)
					{
						padding-right:24px;
					}
				}
			}
			@media(min-width:768px)
			{
				.data
				{
					display: flex;
					margin-bottom: 120px;
					picture
					{
						width: 50%;
					}
					.content
					{
						width: 50%;
					}
					&:nth-child(2n + 1)
					{
						.content
						{
							order:0;
							padding-right:40px;
						}
						picture
						{
							order:1;
						}
					}
					&:nth-child(2n)
					{
						.content
						{
							padding-left: 40px;
						}
					}
				}
			}
			@media(max-width:767px)
			{
				padding-bottom:50px;
				.data
				{
					
					&:nth-child(2n + 1){
						picture
						{
							padding-top:20px;
							padding-right:20px;
						}
						.content
						{
							padding:24px 24px 24px 0
						}
					}
					&:nth-child(2n){
						picture
						{
							padding-top:20px;
							padding-left:20px;
						}
						.content
						{
							padding:24px 0 24px 24px;
						}
					}
				}
			}
		}


		#info
		{
			margin-bottom: 120px;
			h2
			{
				margin-bottom: 80px;
			}
			>div
			{
				picture
				{
					display: block;
					img
					{
						display: block;
						width: 100%;
					}
				}
				>div
				{
					dl
					{
						display: flex;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
						letter-spacing: 1.6px;
						padding:50px 0;
						border-bottom: 1px solid #8E8E93;
						dt
						{
							width: 100px;
							font-weight: 500;
						}
						dd
						{
							color:#8E8E93;
							a
							{
								color:#8E8E93;
								&:hover
								{
									color:$main-color;
								}
							}
						}
					}
				}
			}
			@media(min-width:768px)
			{
				>div
				{
					display: flex;
					picture
					{
						width: 30%;

						img
						{
							display: block;
							width: 100%;
							height: 100%;
							object-position: center;
							object-fit: cover;
						}
					}
					>div
					{
						padding-left:50px;
						width: 70%;
					}
				}
			}
		}
	}
}