#service
{
	padding-top:98px;
	padding-bottom:98px;
	.header
	{
		picture
		{
			img
			{
				display: block;
				max-width: 100%;
			}
		}
		div
		{
			h1
			{
				margin-bottom: 30px;
				display: inline-block;
					padding-bottom:20px;
					border-bottom: 3px solid $main-color;
			}
			p
			{
				margin-bottom: 30px;
			}
		}
	}
	ul
	{
		display: flex;
		flex-wrap:wrap;
		li
		{
      position: relative;
      &::before
			{
				display: block;
				content:' ';
				padding-top:100%;
				width: 100%;
			}
      >div
      {
        position: absolute;
        top:0;
        left:0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        text-align: center;
        picture
        {
          width: 100%;
          display: block;
          margin-bottom:12px;
          img
          {
            display: block;
            max-width: 100%;
            margin:0 auto;
          }
        }
        span
        {
          color:#fff;
          width: 100%;
        }

      }
			&:nth-child(1)
			{
				background-color: $main-color;
			}
			&:nth-child(2)
			{
				background-color: #5E9F61;
			}
			&:nth-child(3)
			{
				background-color: #7BAE7D;
			}
			&:nth-child(4)
			{
				background-color: #97BE98;
			}
		}
	}
	@media(min-width:768px)
	{
		.header
		{
			display: flex;
			flex-wrap:wrap;
			picture
			{
				order:0;
				width: 50%;
			}
			div
			{
				order:1;
				width: 50%;
			}
		}
		ul
		{
			li
			{
				width: 25%;
			}
		}
	}
	@media(max-width:769px)
	{
		.header
		{
			picture
			{
				display: block;
				
			}
		}
		ul
		{
			li
			{
				width: 50%;
				a
				{
					div
					{
						picture
						{
							width: 80%;
							margin:0 auto 20px auto;
						}
					}
				}
			}
		}
	}
}

#project
{
  h2
  {
    text-align: center;
    color:$main-color;
    font-size: 30px;
    font-weight: 700;
    line-height: 150%; /* 45px */
    letter-spacing: 3px;
    margin-bottom: 30px;
    padding-bottom:20px;
    position: relative;
    &::after
    {
      position: absolute;
      bottom:0;
      left:calc(50% - 75px);
      content:' ';
      width: 150px;
      height:3px;
      background-color: $main-color;
    }
  }
  .project-list
  {
    display: flex;
    flex-wrap:wrap;
    text-align: center;
    width: 100%;
    dl
    {

      dt
      {
        margin-bottom: 20px;
        font-size: 16px;
        font-weight: 500;
        line-height: 150%; /* 24px */
        letter-spacing: 1.6px;
        color:#000;
        span
        {
          display: block;
          font-size: 30px;
          font-weight: 700;
          line-height: 150%; /* 45px */
          letter-spacing: 3px;
          color:#97BE98;
          margin-bottom: 20px;
          
        }
      }
      dd
      {
        margin-bottom: 65px;
        color:#8E8E93;
        font-size: 16px;
        font-weight: 400;
        line-height: 150%; /* 24px */
        letter-spacing: 1.6px;
      }
      
      @media(min-width:768px)
      {
        width: calc((100% - 120px) / 3);
        margin:0 30px 60px 30px;
        &:nth-child(3n)
        {
          margin-right: 0;
        }
        &:nth-child(3n + 1)
        {
          margin-left: 0;
        }
      }
      @media(max-width:767px)
      {
        width: calc((100% - 30px) / 2);
        margin:0 15px 60px 15px;
        &:nth-child(2n)
        {
          margin-right: 0;
        }
        &:nth-child(2n + 1)
        {
          margin-left: 0;
        }
      }
    }
  }
}