#head
{
  z-index:500;
}

header
{
	background-image: url('<?=userimg($article->photo)?>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	margin-bottom:100px;
	h1
	{
		color:#fff;
		font-size: 32px;
		font-weight: 400;
		line-height: 48px; /* 150% */
		letter-spacing: 1.6px;
	}
	ul
	{
		display: flex;
		flex-wrap:wrap;
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: 26px; /* 162.5% */
		letter-spacing: 0.8px;
		color:#fff;
		li
		{
			a
			{
				
				color:#fff;
				transition-duration:.5s;
				&:hover
				{
					color:$main-color;
				}
			}
			&::after
			{
				content:'/';
				padding:0 8px;
			}
			&:last-child
			{
				a
				{
					color:$main-color;
					&:hover
					{
						color:#fff;
					}
				}
				&::after
				{
					display: none;
				}
			}
		}
	}
	@media(min-width:1200px)
	{
		padding-top:270px;
		padding-bottom:130px;
	}
	@media(max-width:1199px)
	{
		padding-top:130px;
		padding-bottom:100px;
	}
}


#furnish-menu
{
	background-color: $main-color;
	color:#fff;
	padding:36px 56px;
	font-size: 16px;
	font-weight: 500;
	line-height: 26px; /* 162.5% */
	letter-spacing: 0.8px;
	margin-bottom:100px;
	dl
	{
		padding-bottom:10px;
		dt
		{
			display: block;
			padding-bottom:10px;
		}
		dd
		{
			display: block;
			ul
			{
				display: flex;
				flex-wrap:wrap;
				li
				{

					label
					{
            cursor: pointer;
						color:#fff;
						display: block;
						border:1px solid #fff;
						padding:10px;
						border-radius: 5px;
						transition-duration:.5s;
            input
            {
              display: none;
            }
						&:hover
						{
							background-color: #fff;
							color:$main-color;
						}
            &:has(input:checked){
              background-color: #fff;
							color:$main-color;
            }
					}
				}
				
			}
		}
	}
	@media(min-width:768px)
	{
		dl
		{
			dd
			{
				ul
				{
					li
					{
            flex:1;
            padding: 1%;
            &:first-child
            {
              padding-left:0px;
            }
            &:last-child
            {
              padding-right:0px;
            }
					}
				}
			}
		}
	}
	@media(max-width:767px)
	{
		dl
		{
			dd
			{
				ul
				{
					li
					{
						width: calc(50% - 10px);
						margin:0 10px 30px 10px;
						&:nth-child(2n)
						{
							margin-right: 0px;
						}
						&:nth-child(2n + 1)
						{
							margin-left: 0px;
						}
					}
				}
			}
		}
	}
}

#article-list
{
	display: flex;
	flex-wrap:wrap;
//	justify-content:space-between;
	article
	{
		
		picture
		{
			margin-bottom:24px;
			display: block;
			img
			{
				display: block;
				width:100%;
			}
		}
		h2
		{
			margin-bottom:8px;
			a
			{
				font-size: 18px;
				font-weight: 700;
				line-height: 28px; /* 155.556% */
				letter-spacing: 0.9px;
				color:#444;
				transition-duration:.5s;
				&:hover
				{
					color:$main-color;
				}
			}
		}
		p
		{
			font-size: 16px;
			font-weight: 400;
			line-height: 26px; /* 162.5% */
			letter-spacing: 0.8px;
			color:#444;
			margin-bottom: 16px;
			display: -webkit-box;
		  -webkit-box-orient: vertical;
		  -webkit-line-clamp: 2;
		  overflow: hidden;
		}
		span
		{
			font-size: 16px;
			font-weight: 400;
			line-height: 26px; /* 162.5% */
			letter-spacing: 0.8px;
			color:#A8A8A8;
		}
	}
	@media(min-width:768px)
	{
		article
		{
      margin:0 1.5% 3% 1.5%;
			width:calc(94% / 3);
      &:nth-child(3n)
      {
        margin-right: 0px;
      }
      &:nth-child(3n + 1)
      {
        margin-left:0px;
      }
		}
	}
	@media(max-width:767px)
	{
		article
		{
			width: calc(50% - 10px);
			margin:0 10px 30px 10px;
      &:nth-child(2n)
      {
        margin-right: 0px;
      }
      &:nth-child(2n + 1)
      {
        margin-left:0px;
      }
		}
	}
}