#head
{
  background-color: $bg-color;
}
.breadcrumb
{
  background-color: $bg-color;
}

.wrap
{
  &:has(#content)
  {
    text-align: center;
    background-color: $bg-color;
    
    
    h1
    {
      display: flex;
      justify-content:center;
      margin-bottom:25px;
      span
      {
        font-size: 24px;
        font-weight: 400;
        line-height: 150%; /* 36px */
        letter-spacing: 2.4px;
        color:$main-color;
        padding:7px 16px;
        border-radius: 30px;
        border:1px dashed $main-color;
      }
    }
    .second-title
    {
      font-size: 20px;
      font-weight: 400;
      line-height: 150%; /* 30px */
      letter-spacing: 2px;
      color:$main-color;
      margin-bottom:25px;
    }
   
    #content
    {
      margin-bottom:20px;
      max-width: 570px;
      margin-left: auto;
      margin-right:auto;
      font-size: 16px;
      font-weight: 400;
      line-height: 150%; /* 24px */
      letter-spacing: 1.6px;
      p
      {
        padding:20px 0;
      }
    }
    >picture
    {
      display: block;
      img
      {
        display: block;
        max-width: 100%;
        margin-left:auto;
        margin-right:auto;
      }
    }
  }
}


#company-info
{
  padding-top:50px;
  padding-bottom:50px;
  h2
  {
    position: relative;
    text-align: center;
    font-size: 24px;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 2.4px;
    margin-bottom: 50px;
    &::after
    {
      position: absolute;
      content:' ';
      width: 21px;
      height: 15px;
      display: block;
      background-color: #9CCCD3;
      border-radius: 100%;
      top:-14px;
      left:calc(50% - 10px);
    }
  }
  .info
  {
    background-color:$bg-color;
    border-radius: 30px;
    padding:6px;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    >div
    {
      border:1px dashed $main-color;
      border-radius: 30px;
      padding:70px 20px;

      picture
      {
        margin-bottom:50px;
        display: block;
        width: 100%;
        img
        {
          max-width: 100%;
          margin-left:auto;
          margin-right:auto;
          display: block;
        }
      }
      .dl-list
      {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        dl
        {
          display: flex;
          font-size: 20px;
          font-weight: 400;
          line-height: 150%; /* 30px */
          letter-spacing: 2px;
          color:$main-color;
          margin-bottom: 20px;
          dt
          {
            width: 50%;
            padding-right:20px;
          }
          dd
          {
            width: 50%;
          }
        }
      }
    }
  }
}
#photo-list
{
  padding-top:50px;
  padding-bottom:50px;
  h2
  {
    position: relative;
    text-align: center;
    font-size: 24px;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 2.4px;
    margin-bottom: 50px;
    &::after
    {
      position: absolute;
      content:' ';
      width: 21px;
      height: 15px;
      display: block;
      background-color: #9CCCD3;
      border-radius: 100%;
      top:-14px;
      left:calc(50% - 10px);
    }
  }
  ul
  {
    max-width: 820px;
    margin-left:auto;
    margin-right:auto;
    li
    {
      border-radius: 20px;
      margin-bottom:10px;
      background-color: $bg-color;
      padding:5px;
      picture
      {
        overflow: hidden;
        border:1px dashed $main-color;
        display: block;
        border-radius: 20px;
        padding:10px;
        img
        {
          border-radius: 20px;
          display: block;
          width: 100%;
        }
      }
    }
  }
}
#service-list
{
  padding-top:50px;
  padding-bottom:50px;
  h2
  {
    position: relative;
    text-align: center;
    font-size: 24px;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 2.4px;
    margin-bottom: 200px;
    &::after
    {
      position: absolute;
      content:' ';
      width: 21px;
      height: 15px;
      display: block;
      background-color: #9CCCD3;
      border-radius: 100%;
      top:-14px;
      left:calc(50% - 10px);
    }
  }
  .article-list
	{
		display: flex;
		flex-wrap:wrap;
		justify-content:center;
		article
		{
			margin:0 5% 150px 5%;
			position: relative;
			background-color: $bg-color;
			border-radius:67px;
			padding:10px;
			display: flex;
			width: 380px;
			picture
			{
				display: block;
				width: 120px;
				height:120px;
				border-radius: 100%;
				border:10px solid $bg-color;
				border-bottom-color:transparent;
				position: absolute;
				top:-85px;
				left:calc(50% - 60px);
				&::after
				{
					border-top:1px dashed $main-color;
					content:' ';
					display: block;
					position: absolute;
					width: 100%;
					height:15px;
					bottom:0px;
					left:0px;
					background-color: $bg-color;
				}
				img
				{
					background-color: $bg-color;
					position: relative;
					z-index:1;
					display: block;
					border:1px dashed $main-color;
					border-bottom-color:transparent;
					border-radius: 100%;
					height: 100%;
					width: 100%;
					display: block;
					object-fit: cover;
					object-position: top center;
				}
			}
			>div
			{
				border:1px dashed $main-color;
				border-radius: 67px;
				padding:30px 20px 40px 20px;
				h3
				{
					width: 100%;
					text-align: center;
					font-size: 20px;
					font-weight: 400;
					line-height: 150%; /* 30px */
					letter-spacing: 2px;
					margin-bottom:20px;
					a
					{
						color:$main-color;
					}
				}
				p
				{
					padding:0 40px;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					letter-spacing: 1.6px;
					color:$main-color;
				}
			}
		}
		@media(max-width:767px)
		{
			article
			{
				margin:0 0 100px 0;
			}
		}
	}
		
	.more
	{
		text-align: center;
		a
		{
			font-size: 20px;
			font-weight: 400;
			line-height: 150%; /* 30px */
			letter-spacing: 2px;
			color:$main-color;
			i
			{
				padding:5px 16px;
				background-color: $main-color;
				border-radius: 30px;
				color:$bg-color;
			}
		}
	}
}