@charset "utf-8"

.column-product
  position: relative
.section-title
  position: absolute
  line-height: 1
  color: #fff

+desktop
  .column-category
    background: url(../img/top/bg_line_01.png) #ebb240 bottom right/466px 100% no-repeat

+mobile
  .column-category
    background: url(../img/top/bg_line_01.png) #ebb240 center center / 100% 100% no-repeat
    height: 2rem
  .section-title
    left: 50%
    top: 1.2rem
    font-size: .5rem

.section-top-projects
  .projects-list
    position: absolute
    line-height: 1.07692
    a
      color: #fff
      display: inline-block
  .is-active
    position: relative
    &:before
      content: ""
      position: absolute
      background: url(../img/common/icon_arrow_01.png) center / 100% auto no-repeat
      top: 50%
    a
      color: #000
  .sub-title
    line-height: 1.4
  .button-more
    line-height: 1
    background: no-repeat
  .number-like
    background: center 0 no-repeat
    text-align: center
    line-height: 1
    color: #ff0000
  .wrapper-info
    z-index: 1
  .third-product
    background: #dfe0d9
    overflow: hidden
  .list-data,
  .data-bottom
    line-height: 1
    span
      &:first-child
        font-weight: normal

  .is-block
    display: block
  .block-top,
  .block-bottom
    .product-image
      position: relative

  .fourth-product
    .button-more
      color: #fff
    .number-like
      background-image: url(../img/common/icon_heart_02.png)
    .product-image
      z-index: 2

  .fifth-product
    .wrapper-info,
    .group-button
      position: absolute
    .group-button
      right: 0

  .product-six
    .block-top
      background-color: #f7f7f3
    .group-button
      position: relative

  .product-seven
    background-color: #fcfcfc
    .product-image,
    .wrapper-info
      position: relative
    .product-image
      right: 0
  .product-eight
    background-color: #cecece

  .product-nine
    background: #ebb240 url(../img/top/bg_line_02.png) no-repeat 0 0
    .is-color
      color: #fff
    .title-time,
    .projects-list
      position: relative
    .title-time
      left: 0
      top: 0
      color: #333

+desktop
  .section-top-projects
    .section-title
      top: 300px
      right: 50px
  .column-product
    display: flex
    width: calc(50% - 285px)
    min-height: 500px
  .product-image
    position: absolute
    top: 0
    height: 100%
  .block-content
    display: flex
    align-items: flex-start
  .section-title
    font-size: 48px

  .section-top-projects
    .projects-list
      top: 170px
      width: 100px
      font-size: 13px
      margin-bottom: 73px
      right: 200px
      .is-active
        &:before
          width: 19px
          height: 15px
          left: -30px
          margin-top: -8px
    .sub-title
      font-size: 24px
      margin-bottom: 10px
    .button-more
      display: block
      background-image: url(../img/common/icon_arrow_02.png)
      font-size: 18px
      padding: 0 0 2px 28px
      width: 140px
    .number-like
      background-image: url(../img/common/icon_heart_01.png)
      font-size: 11px
      width: 145px
      padding-top: 29px
    .product-image
      right: 28px
    .second-product
      padding: 78px 0 0 100px
      width: 570px
      .product-image
        width: 256px
      .list-data
        margin-bottom: 73px
      .button-more
        margin-bottom: 110px
    .third-product
      padding: 29px 0 15px 45px
      .sub-title
        margin-bottom: 6px
      .wrapper-info
        width: 157px
        z-index: 2
      .product-image
        width: 235px
        z-index: 1
        left: 200px
      .description
        width: 160px
        line-height: 1
        font-size: 12px
        margin-bottom: 15px
      .button-more
        margin-bottom: 21px
    .list-data
      font-size: 12px

    .fourth-product,
    .fifth-product,
    .product-six,
    .block-top
      min-height: 465px

    .fourth-product
      background-color: #6b7d86
      position: relative
      overflow: hidden
      padding: 32px 0 0 30px
      &:before
        content: ""
        position: absolute
        width: 100%
        height: 100%
        top: 0
        background: url(../img/top/product_bg_01.jpg) repeat-x top left
        left: 0
      .wrapper-info
        position: absolute
        right: 122px
        z-index: 5
        color: #fff
      .product-image
        width: 300px
        right: 0
      .list-data
        margin-bottom: 35px
      .button-more
        margin-bottom: 28px
      img
        width: 100%

    .fifth-product
      background-color: #eaeaea
      width: 736px
      flex-shrink: 0
      .wrapper-info
        right: 65px
        top: 83px
        padding-right: 168px
      .group-button
        top: 10px
      .button-more
        margin-bottom: 20px
      .product-image
        width: 426px
        left: 100px
        top: 63px

    .product-six
      width: calc(50% - 285px)
      flex-shrink: 0
      height: 465px
      .block-top,
      .block-bottom
        width: 100%
      .block-top
        margin-top: -250px
        padding-top: 23px
      .wrapper-info
        flex-shrink: 0
      .info-top
        margin-left: 61px
        position: relative
      .image-top
        right: calc(50% - 232px)
        width: 311px
        margin: 0 auto -21px
      .list-data
        width: 152px
        margin-right: 20px
        flex-shrink: 0
      .button-more
        margin-bottom: 19px
        background-position-y: 2px
      .block-bottom
        display: flex
        min-height: 250px
      .image-bottom
        width: 195px
        left: 30px
        top: 0
        margin-right: 52px
      .info-bottom
        padding-top: 40px
      .link-top
        position: absolute
        width: 50px
        right: -60px
        top: -3px
      .inner-top
        display: flex
      .inner-bottom
        font-size: 12px
      .data-bottom
        margin-bottom: 24px

    .product-seven,
    .product-eight,
    .product-nine
      min-height: 300px

    .product-seven
      width: 100%
      .wrapper-info
        padding-left: 28px
      .content-seven
        width: 485px
        margin-left: auto
        margin-right: 126px
      .button-more
        right: 110px
        top: 33px
      .number-like
        right: 0
        width: 106px
        top: 31px
      .button-more,
      .number-like
        position: absolute
      .sub-title
        margin-bottom: 2px

    .product-eight
      width: 300px
      flex-shrink: 0
      padding: 72px 10px 15px 157px
      img
        width: 100%
      .wrapper-info
        width: 125px
        flex-shrink: 0
      .product-image
        left: 0
        width: 150px
        top: 51px
      .list-data
        margin-bottom: 29px
      .button-more,
      .number-like
        margin-left: -34px
      .button-more
        margin-bottom: 22px

    .product-nine
      display: block
      width: calc(50% - 285px)
      flex-shrink: 0
      padding: 56px 50px 50px 100px
      .title-time
        font-size: 14px
        margin-bottom: 6px
      .projects-list
        position: static

+mobile
  .section-top-projects
    img
      width: 100%
    .wrapper
      padding-left: 0
      padding-right: 0
    .column-category
      min-height: 4.8rem
    .projects-list
      top: .5rem
      margin-left: -.4rem
      transform: translateX(-50%)
      left: 50%
      .is-active
        &:before
          background-image: url(../img/common/sp/icon_arrow_01.png)
          width: .38rem
          height: .3rem
          left: -.45rem
          margin-top: -.15rem
    .section-title
      top: 3rem
      margin-left: -.5rem
    .sub-title
      font-size: .42rem
      margin-bottom: .2rem
    .list-data
      margin-bottom: .4rem
      line-height: 1.2
    .wrapper-info
      padding: .5rem .4rem
      width: 100%
      order: 2
    .button-more
      display: inline-block
      font-size: .3rem
      background-image: url(../img/common/sp/icon_arrow_02.png)
      background-size: .38rem auto
      margin-bottom: .4rem
      padding-left: .56rem
    .number-like
      background-image: url(../img/common/sp/icon_heart_01.png)
      background-size: .52rem auto
      width: 2.5rem
      padding-top: .58rem
    .description
      margin-bottom: .4rem

    .second-product .product-image,
    .third-product .product-image
      width: 50%
      margin: 0 auto
    .third-product
      display: flex
      flex-wrap: wrap
      .product-image
        margin-top: .5rem
    .fourth-product
      display: flex
      padding: 0
      .product-image
        width: 5rem
        margin-left: auto
      .wrapper-info
        margin-bottom: 0
        padding: .2rem .2rem .2rem .4rem
      .button-more
        color: $base-font-color
      .number-like
        background-image: url(../img/common/sp/icon_heart_01.png)

    .fifth-product
      padding: 0
      background-color: #eaeaea
      display: flex
      flex-wrap: wrap
      .wrapper-info,
      .group-button
        position: relative
      .wrapper-info
        padding: .4rem
      .product-image
        width: 60%
        margin: .5rem auto 0

    .product-six
      padding: 0
      .product-image
        width: 60%
        margin: 0 auto
      .block-top
        padding-top: .4rem
      .wrapper-info
        padding: .5rem .4rem
      .image-bottom
        width: 50%
      .list-date
        margin-bottom: .4rem

    .product-eight
      padding: .4rem 0 0 3.2rem
      .product-image
        width: 3rem
        position: absolute
        left: 0
      .wrapper-info
        margin-bottom: 0

    .product-nine
      padding: .3rem 0 2rem 2rem
      background-size: 100% 100%
      .projects-list
        top: .05rem
        left: 2.9rem
        width: 90%

.section-top-studio
  background-color: #e9eae2
  .column-category
    background-color: #ff9b6d
  .text-studio
    line-height: 1
    span
      display: block
  .content-right
    .text-awards
      line-height: 1.4
      border-bottom: 1px solid #bfc0b9
  .list-studio
    justify-content: space-between

+desktop
  .section-top-studio
    .wrapper,
    .list-studio,
    .content-studio
      display: flex
    .content-left
      flex-shrink: 0
      width: 360px
      margin-right: 28px
    .content-studio
      padding: 93px 0 0 115px
    .text-studio
      font-size: 18px
      line-height: .9
      &:not(:last-child)
        margin-bottom: 14px
    .block-text
      &.is-italic
        margin-bottom: 34px
        .text-studio
          line-height: 1.1
        &:not(:last-child)
          margin-bottom: 12px
      &:not(:first-child)
        margin-top: 40px
    .content-right
      .image-studio
        margin-bottom: 39px
      .text-awards
        font-size: 14px
        margin-bottom: 23px
    .list-studio
      line-height: 1.16667
      margin-right: -10px
      li
        width: 165px
        font-size: 12px
    .section-title
      right: 103px
      top: 291px

+mobile
  .section-top-studio
    padding-bottom: .5rem
    .column-category
      margin: 0 -.4rem
    .image-studio
      margin-bottom: .5rem
    .block-text
      margin-bottom: .6rem
    .text-studio
      font-size: .36rem
      margin-top: .3rem
    .image-studio
      img
        width: 100%
    .text-awards
      font-size: .3rem
      margin-bottom: .46rem
    .content-studio
      padding-top: .5rem

.section-top-staff
  background-color: #e9eae2
  .staff-text span,
  .name-staff span
    display: block
  .info-staff
    line-height: 1.28571

  .name-staff
    span
      font-weight: normal
  .group-info
    display: flex
    justify-content: space-between
    align-items: center
  .button-cv
    display: block
    background: no-repeat right center
    color: #fd5000

+desktop
  .section-top-staff
    padding: 62px 0 102px
    .wrapper
      width: 1165px
      margin-left: auto
      margin-right: auto
      display: flex
      justify-content: space-between
    .staff-title
      margin-bottom: 15px
    .staff-text
      span
        margin-top: 15px
    .info-staff
      width: 266px
      flex-shrink: 0
    .list-staff
      display: flex
      flex-wrap: wrap
      margin: 0 -15px
      .item-staff
        margin: 0 15px
    .image-staff,
    .name-staff
      margin-bottom: 14px
    .name-staff
      font-size: 13px
      line-height: 1.2
      span
        font-size: 12px
    .button-cv
      background-image: url(../img/common/icon_arrow_03.png)
      padding: 4px 27px 4px 0

+mobile
  .section-top-staff
    padding: .5rem 0
    .staff-title
      font-size: .32rem
      margin-bottom: .3rem
    .staff-text
      span
        margin-top: .3rem
    .item-staff,
    .staff-text
      margin-bottom: .6rem
    .name-staff
      font-size: .3rem
      span
        font-size: .28rem
    .name-staff,
    .image-staff
      margin-bottom: .28rem
    .image-staff
      img
        width: 100%
    .button-cv
      background-image: url(../img/common/sp/icon_arrow_03.png)
      background-size: .38rem auto
      padding: .08rem .54rem .08rem 0

.section-top-news
  background-color: #e5e9df
  .column-category
    background-color: #d4edbf
    flex-shrink: 0
  .news-title,
  .date
    line-height: 1
  .date
    display: block
  .date,
  .news-text
    color: #6a6969
  .news-text
    line-height: 1.16667
    text-align: justify
  .button-read
    text-align: right
    a
      color: #fd5000
      display: inline-block
      line-height: 1

+desktop
  .section-top-news
    .content-news
      padding: 76px 20px 20px 100px
    .section-title
      right: 136px
      top: 289px
    .wrapper,
    .list-news
      display: flex
    .list-news
      flex-wrap: wrap
      li
        width: 370px
        &:not(:last-child)
          margin-right: 30px
    .news-title
      font-size: 24px
      margin-bottom: 5px
      margin-right: -5px
      min-height: 48px
    .date
      font-size: 12px
      margin-bottom: 18px
    .image-news
      margin-bottom: 19px
      img
        width: 100%
    .news-text
      font-size: 12px
      margin-bottom: 5px
      min-height: 56px
    .button-read
      a
        font-size: 12px

+mobile
  .section-top-news
    .content-news
      padding: .8rem 0 .6rem
    .column-category
      margin: 0 -.4rem
    .news-title
      font-size: .36rem
      margin-bottom: .1rem
      min-height: .72rem
    .list-news
      li
        margin-bottom: .6rem
    .news-text
      margin-bottom: .15rem
    .date,
    .image-news
      margin-bottom: .4rem
    .image-news
      img
        width: 100%