@charset "utf-8"


header
  .wrapper
    display: flex
  .logo
    a
      display: block
  .header-left
    background: #e9eae2 url(../img/common/header_bg.jpg) no-repeat right bottom
  .header-social
    display: flex
    align-items: center
    a
      display: block
  .list-navigation a,
  .header-right,
  .block-contact a
    color: #fff
  .list-navigation
    background: #f8c255
    a
      +desktop
        display: block
      +mobile
        display: inline-block
  .text-address
    display: block
  .header-navigation
    display: none
    z-index: 100
  .button-menu
    position: absolute
    z-index: 101
    cursor: pointer
    border: solid 3px #e9eae2
    span
      display: block
      height: 3px
      background: #e9eae2
      transition: all .4s ease
      position: absolute
      left: 50%
      transform: translateX(-50%)
  .block-contact
    a
      display: block
  .is-active
    border: none

+desktop
  header
    .logo
      width: 159px
      margin-bottom: 60px
    .header-left
      width: 100%
      min-height: 500px
      position: relative
    .detail-left
      position: absolute
      right: 0
      top: 50px
      width: 867px
    .header-social
      margin-left: 11px
      li
        &:not(:first-child)
          margin-left: 8px
    .header-right
      position: relative
      background: #7acec3 url(../img/common/bg_line_01.png) bottom left/466px 100% no-repeat
      width: calc(50% - 285px)
      flex-shrink: 0
      padding: 260px 0 0 60px
    .content-contact
      font-size: 13px
      line-height: 1
    .text-address
      margin-bottom: 46px
    .button-menu
      width: 125px
      height: 120px
      top: 50px
      left: 236px
      transform: translateX(-50%)
      span
        width: 40px
        border-radius: 10px
        &:nth-child(1)
          top: 48px
        &:nth-child(2)
          top: 55px
        &:nth-child(3)
          top: 62px
    .is-active
      background-color: #f8c255
      span
        &:nth-child(1)
          transform: translate(-50%, 9px) rotate(-45deg)
        &:nth-child(2)
          opacity: 0
        &:nth-child(3)
          transform: translate(-50%, -4px) rotate(-135deg)
    .block-contact
      margin-left: 77px
      .contact-text
        width: 150px
        +desktop-ie
          word-break: break-word
    .header-navigation
      position: absolute
      left: -426px
      top: 50px
      height: 100%
      width: 600px
    .list-navigation
      display: flex
      align-items: center
      li
        width: 20%
      a
        display: flex
        align-items: center
        justify-content: center
        min-height: 120px
        width: 100%
        +desktop-ie
          padding-top: 50px
    .contact-number
      pointer-events: none

+mobile
  header
    background-color: #e9eae2
    .wrapper
      justify-content: space-between
      position: relative
      padding-left: 0
      padding-right: 0
    .logo
      width: 1.59rem
      img
        width: 100%
    .header-left
      width: 100%
      background-size: contain
      padding: .1rem .2rem
    .header-right
      width: 1.66rem
      padding: .3rem .2rem
      background-color: #7acec3
      flex-shrink: 0
    .header-navigation
      position: absolute
      width: 100%
      height: auto
      left: 0
      top: 0
    .list-navigation
      padding: .98rem .69rem .8rem
      li
        width: 80%
        margin-bottom: .2rem
    .button-menu
      width: .9rem
      height: .9rem
      right: .34rem
      top: 50%
      transform: translateY(-50%)
      span
        width: .4rem
        &:nth-child(1)
          top: .25rem
        &:nth-child(2)
          top: .4rem
        &:nth-child(3)
          top: .55rem
    .is-active
      span
        &:nth-child(1)
          top: .4rem
          transform: translateX(-.22rem) rotate(-44deg)
        &:nth-child(2)
          opacity: 0
        &:nth-child(3)
          top: .4rem
          transform: translateX(-.2rem) rotate(44deg)
    .overlay
      position: fixed
      width: 100%
      height: 100%
      right: 0
      top: 0
      z-index: 99
      opacity: 0
      visibility: hidden
      transition: all 0.3s
    .overlay.is-show
      opacity: 1
      visibility: visible
      transition: all 0.3s