#head
{
	
	@media(min-width:980px)
	{
		position: absolute;
		top:0px;
		left:0px;
		width:100%;
		z-index:1;
	}
}

#banner
{
	article
	{
		>div
		{
			h2
			{
				color:#000;
			}
			p
			{
				color:#909090;
			}
			ul
			{
				li
				{
					a
					{
						transition-duration:.5s;
						border:1px solid #909090;
						color:#909090;
						border-radius: 10px;
						&:hover
						{
							color:#fff;
							background-color: $main-color;
							box-shadow: 0 0 5px $main-color;
						}
					}
					&:first-child
					{
						a
						{
							background-color: $main-color;
							color:#fff;
							border-color:$main-color;
						}
					}
				}
			}
		}
	}
	@media(min-width:980px)
	{
		padding-left:20vw;
	}
	@media(min-width:980px)
	{
		article
		{
			padding:0;
			display: flex;
			align-items:center;
			>div
			{
				flex:1;
				h2
				{
					font-size:pxvw(40);
					line-height:pxvw(50);
					margin-bottom:pxvw(30);
				}
				p
				{
					font-size:pxvw(15);
					line-height:pxvw(24);
					letter-spacing: 2px;
					margin-bottom:pxvw(30);
				}
				ul
				{
					display: flex;
					li
					{
						padding-right:pxvw(10);
						a
						{
							display: block;
							padding:pxvw(10) pxvw(20);
						}
					}
				}
				
			}
			picture
			{
				width: 40vw;
				img
				{
					display: block;
					width: 100%;
				}
			}
		}
	}

	@media(max-width:979px)
	{
		padding: 0 10px;
		article
		{
			>div
			{
				h2
				{
					padding:50px 0;
					font-size:28px;
					line-height:38px;
				}
				p
				{
					font-size:15px;
					line-height:24px;
					letter-spacing: 1px;
					margin-bottom:20px;
				}
				ul
				{
					li
					{
						margin-bottom:20px;
						a
						{
							display: inline-block;
							padding:20px 20px;
							font-size:15px;
							letter-spacing: 1px;
						}
					}
				}
			}
			picture
			{
				display: block;
				img
				{
					display: block;
					width: 100%;
				}
			}
		}
	}
}

#service
{
	padding-top:100px;
	padding-bottom:100px;
	border-bottom: 1px solid #e0e0e0;
	h2
	{
		text-align: center;

	}
	.description
	{
		text-align: center;
		color:#909090;
		max-width: 360px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom:100px;
	}
	.article-list
	{
		display: flex;
		flex-wrap: wrap;
		article
		{
			background-color: #f5f5f5;
			picture
			{
				display: block;
        box-shadow: 0 0 5px #999;
				img
				{
					display: block;
					width: 100%;
				}
			}
		}
	}
	@media(min-width:980px)
	{
		h2
		{
			font-size:pxvw(32);
			line-height:pxvw(62);
		}
		.description
		{
			font-size:pxvw(15);
			line-height: pxvw(24);
			font-size:400;
		}
		.article-list
		{
			article
			{
				margin:0 pxvw(30) pxvw(60) pxvw(30);
				width: calc((100% - 6.24vw) / 3);
				padding:pxvw(50) pxvw(20) pxvw(20) pxvw(20);
				&:nth-child(3n)
				{
					margin-right: 0px;
				}
				&:nth-child(3n + 1)
				{
					margin-left: 0px;
				}
				h3
				{
					font-size:pxvw(24);
					line-height:pxvw(32);
					margin-bottom:10px;
				}
				p
				{
					font-size:pxvw(15);
					line-height:pxvw(24);
					margin-bottom:10px;
					letter-spacing: 1px;
				}
			}
		}
	}
	@media(max-width:979px)
	{
		h2
		{
			font-size:32px;
			line-height: 62px;
			
		}
		p
		{
			font-size:15px;
			line-height: 24px;
			
		}
		.article-list
		{
			
			article
			{
        display: flex;
        flex-direction: column;
				width:calc(50% - 5px);
				margin-bottom:10px;
				&:nth-child(2n)
				{
					margin-left: 5px;
				}
				&:nth-child(2n + 1)
				{
					margin-right: 5px;
				}
				padding:30px 10px 10px 10px;
				h3
				{
					font-size:24px;
					line-height:32px;
					margin-bottom:20px;
				}
				p
				{
					font-size:15px;
					line-height: 24px;
					margin-bottom:20px;
          flex:1;
				}
			}
		}
	}
}