#body
{
  article
  {
    header
    {
      overflow: hidden;
      position: relative;
      display: flex;
      align-items:center;
      picture
      {
        position: absolute;
        top:0;
        left:24px;
        overflow: hidden;
        border-radius: 8px 0 0 8px;
        width: 100%;
        height: 100%;
        img
        {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
        }
      }
      h1
      {
        position: relative;
        z-index: 1;
        color:#fff;
        font-size: 32px;
        line-height: 46px;
        letter-spacing: 1.28px;
      }
      
    }
    #content
    {
      padding-top:96px;
      padding-bottom:96px;
      h2
      {
        font-size: 24px;
        line-height: 35px; /* 145.833% */
        letter-spacing: 0.96px;
        margin-bottom: 24px;
      }
      p
      {
        margin-bottom: 24px;
      }
    }
    #list-1
    {
      background-color: #FFF9F5;
      .list
      {
        padding-top:96px;
        padding-bottom:96px;
        
        >div
        {
          h2
          {
            font-size: 24px;
            line-height: 35px; /* 145.833% */
            letter-spacing: 0.96px;
            margin-bottom: 24px;
          }
        }
        ul
        {     
          li
          {
            display: flex;
            align-items:flex-start;
            color:#F3A291;
            line-height: 32px;
            margin-bottom: 8px;
            &::before
            {
              margin-right:5px;
              content:' ';
              width: 32px;
              height: 32px;
              display: block;
              background:url("/webdata/tplimg/icon.png") no-repeat center center;
            
            }
          }
        }

      }
    }

    #content2
    {
      padding-top:96px;
      padding-bottom:96px;
      background-color: #FFF4EC;
      
      h2
      {
        margin-bottom: 48px;
        font-size: 24px;
        line-height: 35px;
        letter-spacing: 0.96px;
        text-align: center;
      }
      >div
      {
        
        >dl
        {
          margin:4px;
          background-color: #fff;
          padding:56px 40px;
          dt
          {
            font-size: 18px;
            line-height: 26px; /* 144.444% */
            letter-spacing: 0.72px;
            margin-bottom: 16px;
            text-align: center;
            &::before
            {
              content:' ';
              width: 32px;
              height: 32px;
              display: block;
              background:url("/webdata/tplimg/icon.png") no-repeat center center;
              margin-left:auto;
              margin-right:auto;
            
            }
          }
        }
      }
    }
    @media(min-width:768px)
    {
      header
      {
        height: 56.25vw;
      }
      #list-1
      {
        .list
        {
          display: flex;
          >div
          {
            width: 50%;
            padding-right: 24px;
          }
        }
      }
      #content2
      {
        
        >div
        {
          display: flex;
          dl
          {
            width: calc((100% - 24px) / 4);
            &:nth-child(4n)
            {
              margin-right: 0;
            }
            &:nth-child(4n + 1)
            {
              margin-left: 0;
            }
          }
        }
        
      }
    }
    @media(max-width:767px)
    {
      header
      {
        height: 150vw;;
      }
      #list-1
      {
        .list
        {
          >div
          {
            margin-bottom: 24px;
          }
        }
      }
    }
  }
}


#booking
{
	background-color: #fff;
	padding-top:120px;
	padding-bottom:120px;
	h2
	{
		text-align: center;
		font-size: 32px;
		line-height: 46px;
		letter-spacing: 1.28px;
		margin-bottom: 72px;
		span
		{
			justify-content:center;
		}
	}
	.data-list
	{
		display: flex;
		flex-wrap:wrap;
		>div
		{
			picture
			{
				display: block;
				overflow: hidden;
				border-radius: 8px;
				margin-bottom:8px;
				position: relative;
				padding-top:100%;
				img
				{
					position: absolute;
					top:0;
					left:0;
					object-fit: cover;
					object-position: center;
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			>div
			{
				display: flex;
				i
				{
					font-size: 48px;
					letter-spacing: 1.92px;
					line-height: 70px;
					margin-right:16px;
					color:$main-color;
				}
				dl
				{
					dt
					{
						font-size: 14px;
						line-height: 20px; 
						letter-spacing: 0.56px;
					}
				}
			}
			
		}
	}

	@media(min-width:768px)
	{
		.data-list
		{
			>div
			{
				margin-bottom:56px;
				picture
				{
					margin-bottom:32px;
				}
				&:nth-child(5n + 1)
				{
					margin-right:28px;
					width: calc(50% - 28px);
					picture
					{
						padding-top:50%;
					}
				}
				&:nth-child(5n + 2)
				{
					margin-left:28px;
					width: calc(50% - 28px);
					picture
					{
						padding-top:50%;
					}
				}
				&:nth-child(5n + 3)
				{
					width: calc((100% - 112px) / 3);
					margin-right:28px;
				}
				&:nth-child(5n + 4)
				{
					width: calc((100% - 112px) / 3);
					margin-right:28px;
					margin-left:28px;
				}
				&:nth-child(5n)
				{
					width: calc((100% - 112px) / 3);
					margin-left:28px;
				}
			}
			
		}
	}
	@media(max-width:767px)
	{
		h2
		{
			font-size: 24px;
			line-height: 36px; /* 150% */
			letter-spacing: 0.96px;
			margin-bottom: 32px;
		}
		.data-list
		{
			>div
			{
				margin-bottom: 32px;
				picture
				{
					margin-bottom: 24px;
				}
			}
		}
	}
}