@charset "UTF-8";
@import "../common/mixins";
@import "../common/variables";

html {
  font-size: (100vw / 32);
}

.forPC {
  display: none;
}

.forSP {
  display: block;
}

section {
  position: relative;
}

.swiper-button-prev, .swiper-button-next {
  width: percentage(55/640);
  height: auto;

  svg {
    height: 5.9rem;
  }

  &:after {
    font-size: 0;
  }
}

.swiper-button-next {
  svg {
    transform: rotate(180deg);
  }
}

.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
  left: 2rem;
}

.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
  right: 2rem;
}

.nav-toggle {
  //position: relative;
  //display: none;
  position: fixed;
  /* bodyに対しての絶対位置指定 */
  top: 2rem;
  right: 2rem;
  width: 30px;
  height: 22px;
  cursor: pointer;
  z-index: 30;
  text-align: center;
  //opacity: 0;
  //transition: .5s ease-in-out;
  span {
    display: block;
    position: absolute;
    /* .navToggleに対して */
    width: 30px;
    border-bottom: solid 1px #000;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    //left: 6px;
    &:nth-child(1) {
      top: 0;
    }

    &:nth-child(2) {
      top: 7px;
    }

    &:nth-child(3) {
      top: 14px;
    }
  }

  &.active span {
    border-bottom: solid 1px #000 !important;
    /* 最初のspanをマイナス45度に */
    &:nth-child(1) {
      top: 10px;
      left: 0;
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }

    /* 2番目と3番目のspanを45度に */
    &:nth-child(2), &:nth-child(3) {
      top: 10px;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      transform: rotate(45deg);
    }
  }

  &.in-view {
    //display: block;
    //opacity: 1;
  }
}

.global-menu {
  display: block;
  position: fixed;
  right: 0;
  top: 0;
  background-color: #fff;
  transition: transform .5s;
  transform: translate3d(100%, 0, 0);
  z-index: 10;

  &.active {
    transform: translate3d(0, 0, 0);
  }

  .menu {
    list-style: none;
    padding: 5rem 3rem 2rem;

    li {
      padding: .5em 0;
      @include fontSize(27);
      @include tracking(150);
      background-color: #fff;
      transition: opacity .2s;
      opacity: 1;

      &:hover {
        opacity: .7;
      }

      a {
        display: block;
      }
    }
  }
}

#overview {
  position: relative;

  .background {
    width: 100%;
    height: 100vh;
  }

  .content {
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
  }

  .logo.tnf, .title-1, .title-2 {
    position: absolute;
  }

  .logo.tnf {
    width: percentage(102/640);
    top: 1.5rem;
    left: 1.5rem;

    a {
      display: block;
    }

    svg {
      height: 2.4rem;
    }
  }

  .title-1 {
    width: percentage(368/640);
    left: 50%;
    transform: translate3d(-50%, 6rem, 0);
  }

  .title-2 {
    width: percentage(550/640);
    left: 50%;
    transform: translate3d(-50%, 10rem, 0);
  }
}

#intro {
  padding: 10rem 2rem 3rem;

  .intro {
    width: percentage(412/560);
    margin: 0 auto;
  }

  .title-en, .title-ja {
    margin-top: 8.5rem;

    .text {
      @include fontSize(45, 60);
      text-align: center;
      @include tracking(150);
    }
  }

  .title-ja {
    margin-top: 5rem;

    .text {
      @include fontSize(40, 60);
      font-weight: bold;
      @include tracking(0)
    }
  }

  .content-en, .content-ja {
    margin-top: 2.5rem;

    .text {
      @include fontSize(21, 37.5);
      text-align: center;
      @include tracking(150);
    }
  }
}

#maternity-movie {
  padding: 3rem 0;

  .title {
    .text {
      @include fontSize(54);
      text-align: center;
      @include tracking(150);
    }
  }

  .movie {
    margin-top: 3rem;
  }
}

#maternity-images {
  padding: 3rem 0;

  .title {
    .text {
      @include fontSize(54);
      text-align: center;
      @include tracking(150);
    }
  }

  .images-slider-image1, .images-slider-image2 {
    margin-top: 3rem;
  }

  .items-detail {
    margin-top: 1em;

    .text {
      @include fontSize(19);
      text-align: center;
      opacity: 1;

      &.fade-enter-active, &.fade-leave-active {
        transition: opacity .35s;
      }

      &.fade-enter, &.fade-leave-to {
        opacity: 0;
      }
    }

    .name {
      font-weight: bold;
    }
  }

  .swiper-button-prev, .swiper-button-next {
    color: #fff;
  }
}

#maternity-items {
  padding: 3rem 0;

  .title {
    .text {
      @include fontSize(54);
      text-align: center;
      @include tracking(150);
    }
  }

  .items {
    .item {
      margin-top: 2.5rem;
    }
  }

  .name-container {
    text-align: center;

    a {
      display: inline-block;
    }

    .name {
      .text {
        @include fontSize(36);
        text-align: center;
        @include tracking(150);
      }
    }

    .code {
      margin-top: .5em;

      .text {
        @include fontSize(18);
        text-align: center;
        @include tracking(150);
      }
    }
  }

  .item-container {
    margin-top: 3rem;
    padding-bottom: 5rem;

    .image {
      width: percentage(369/640);
      margin: 0 auto;

      & + .content {
        margin-top: 1em;
      }
    }

    .status {
      margin-top: 1em;

      .text {
        @include fontSize(27);
        text-align: center;
      }
    }

    .content {
      margin-top: .5em;

      .text {
        @include fontSize(21, 37.5);
        padding: 0 2rem;
      }
    }
  }

  .spec-container {
    margin-top: .5em;

    .spec {
      padding: 0 2rem;
      @include fontSize(18, 30)
    }
  }

  .movie {
    width: 100%;
    margin-top: 6.5rem;
  }

  .cover-container {
    margin-top: 6.5rem;

    .image {
      width: percentage(369/640);
      margin: 0 auto;
    }

    .content {
      padding: 3rem 2rem 0;

      .text {
        @include fontSize(21, 37.5)
      }
    }
  }

  .cover-use-container {
    margin-top: 6.5rem;

    .title {
      .text {
        @include fontSize(27);
        text-align: center;
      }
    }
  }

  .items-slider-functions {
    padding: 5rem 0;
  }

  .function-container {
    width: percentage(318/640);

    .image {
      padding: 0 2rem;
    }

    .title {
      .text {
        margin-top: 1em;
        @include fontSize(18);
        text-align: left;
      }
    }

    .content {
      .text {
        margin-top: .5em;
        @include fontSize(14);
        text-align: left;
        padding-right: 2rem;
      }
    }
  }

  .other-items-container {

  }

  .other-item-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 6rem;

    .left-area, .right-area {
      padding: 0 2rem;
    }

    .right-area {
      a {
        display: inline-block;
      }
    }

    .image {
      width: percentage(409/560);
      margin: 0 auto;
    }

    .name {
      margin-top: 3rem;

      .text {
        @include fontSize(36, 54);
        @include tracking(150);
      }
    }

    .name-ja, .code {
      margin-top: .5em;

      .text {
        @include fontSize(18);
        @include tracking(150);
      }
    }

    .content {
      margin-top: 2.5rem;

      .text {
        @include fontSize(21);
        @include tracking(150);
      }
    }

    .sub {
      margin-top: 1rem;
    }

    .sub-image {
      width: percentage(210/560);
      margin: 0 auto;
    }

    .sub-content {
      margin-top: .5em;

      .text {
        @include fontSize(18);
        text-align: center;
        @include tracking(150);
      }
    }

    .spec {
      margin-top: 1rem;

      .text {
        @include fontSize(18);
        @include tracking(150);
      }
    }
  }

  .swiper-button-prev, .swiper-button-next {
    top: 14rem;
    color: #000;
  }

  .swiper-container-horizontal {
    > .swiper-pagination-bullets {
      .swiper-pagination-bullet {
        margin: 0 6px;
      }
    }
  }

  .swiper-pagination-bullet-active {
    background: #000;
  }
}

#size-chart {
  padding: 3rem 0;

  .title {
    .text {
      @include fontSize(36);
      text-align: center;
      @include tracking(150);
    }
  }

  .size-chart {
    width: percentage(560/640);
    margin: 6rem auto 0;
    padding: 0 2rem;
    border-collapse: collapse;

    thead {
      > tr {
        > th {
          @include fontSize(30);
          text-align: center;
          font-weight: normal;
          @include tracking(150);
          border-bottom: 1px solid #000;
          padding: 0 0 1em;
        }
      }
    }

    tbody {
      > tr {
        > td {
          font-family: 'DM Serif Display', serif;
          @include fontSize(24);
          @include tracking(150);
          padding: .5em 0;

          &.name {
            font-family: 'Noto Sans JP', sans-serif;
            @include fontSize(21);
            @include tracking(150);
            padding-left: 2em;
          }
        }
      }

      .border {
        border-bottom: 1px solid #000;
      }
    }
  }
}

#maternity {
  .maternity-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: percentage(560/640);
    margin: 0 auto;
    padding: 6rem 0;

    .image {
      width: percentage(100/560);
      //padding: 0 1rem;
    }

    .content {
      width: percentage(460/560);
      padding: 0 1rem;

      .text {
        @include fontSize(18);
      }
    }
  }
}

#footer-image {
  padding: 3rem 0 6rem;

  .image {
    width: percentage(450/640);
    margin: 0 auto;
  }

  .content {
    .text {
      margin-top: 1.6rem;
      @include fontSize(24);
      text-align: center;
      @include tracking(150);
    }
  }
}

footer {
  .copyright {
    .text {
      @include fontSize(18);
      text-align: center;
      @include tracking(150);
      padding: 2rem 0;
    }
  }
}

#to-top {
  position: fixed;
  width: percentage(62/640);
  bottom: 5rem;
  right: 2rem;
  transition: transform .5s;
  transform: translate3d(0, 8rem, 0);
  z-index: 100;

  a {
    display: block;
  }

  &.visible {
    transform: translate3d(0, 0, 0);
  }
}