@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700&display=swap&subset=japanese");
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,700&display=swap");
.item:nth-child(1) {
  -webkit-animation: example 0.6s ease 0.1s 1 forwards;
  animation: example 0.6s ease 0.1s 1 forwards; }

.item:nth-child(2) {
  -webkit-animation: example 0.6s ease 0.2s 1 forwards;
  animation: example 0.6s ease 0.2s 1 forwards; }

.item:nth-child(3) {
  -webkit-animation: example 0.6s ease 0.3s 1 forwards;
  animation: example 0.6s ease 0.3s 1 forwards; }

.item:nth-child(4) {
  -webkit-animation: example 0.6s ease 0.4s 1 forwards;
  animation: example 0.6s ease 0.4s 1 forwards; }

.item:nth-child(5) {
  -webkit-animation: example 0.6s ease 0.5s 1 forwards;
  animation: example 0.6s ease 0.5s 1 forwards; }

.item:nth-child(6) {
  -webkit-animation: example 0.6s ease 0.6s 1 forwards;
  animation: example 0.6s ease 0.6s 1 forwards; }

@-webkit-keyframes example {
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }
@keyframes example {
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }
.mainVisual {
  background: url("../img/top/mv.jpg") no-repeat fixed;
  background-size: cover;
  width: 100%;
  height: 100vh;
  position: relative; }
  .mainVisual h1 {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 150px;
    height: 430px;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-size: 271.4%;
    color: #fff;
    padding: 20px 25px;
    border: 2px solid #fff;
    line-height: 1.3; }
    .mainVisual h1 span {
      display: block;
      position: relative;
      z-index: 1; }
      .mainVisual h1 span:last-child {
        text-indent: 5em; }
    .mainVisual h1::after {
      content: "";
      background: url("../img/top/mv_ttl_bg.png") no-repeat;
      background-size: 95px;
      width: 95px;
      height: 452px;
      display: block;
      position: absolute;
      top: -50px;
      right: -30px;
      height: 0px;
      animation: mainVisual 0.8s both;
      animation-delay: 0.5s; }
  @media screen and (max-width: 480px) {
    .mainVisual {
      background: url(../img/top/mv_sp.jpg) no-repeat center; }
      .mainVisual h1 {
        width: 120px;
        height: 300px;
        font-size: 180.4%;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center; }
        .mainVisual h1 span {
          text-indent: -2em; }
          .mainVisual h1 span:last-child {
            text-indent: 3em; } }

@keyframes mainVisual {
  100% {
    height: 452px; } }
.news {
  position: absolute;
  bottom: 20px;
  right: 0;
  left: 0;
  max-width: 1200px;
  margin: auto;
  background: rgba(0, 0, 0, 0.5);
  padding: 20px; }
  .news li a {
    color: #fff;
    display: flex; }
    .news li a span:first-child {
      margin-right: 15px; }
    .news li a span:last-child {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex-grow: 1; }
  @media screen and (max-width: 1024px) {
    .news {
      max-width: 80%; } }
  @media screen and (max-width: 480px) {
    .news {
      max-width: 90%; } }

.scroll_icon {
  pointer-events: none;
  width: 210px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg); }
  .scroll_icon::before {
    content: "";
    width: 120px;
    height: 1px;
    background: #fff;
    margin-right: 25px; }
  .scroll_icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 5px;
    height: 5px;
    background: #fff;
    border-radius: 50%; }
  .scroll_icon span {
    display: block;
    /*    &::before{
          content: "";
          position: absolute;
          width: 100px;
          height: 1px;
          background: #000;
          bottom: 0;
          top: 0;
          margin: auto;
          animation:scroll_icon 1.2s infinite;
          animation-timing-function:linear;
          animation-direction: reverse;
        }
    */ }

@keyframes scroll_icon {
  0% {
    left: -120px; }
  45% {
    left: 80px;
    width: 100px; }
  46% {
    width: 0; }
  100% {
    width: 0;
    left: 120px; } }
@media screen and (max-width: 896px) {
  .scroll_icon {
    left: -30px; } }
@media screen and (max-width: 480px) {
  .scroll_icon {
    display: none;
    left: -80px;
    height: 50px; } }
.top_about {
  padding: 175px 0 115px;
  position: relative;
  background: #f9f9f9; }
  .top_about::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: url("../img/common/bg_14p.png");
    width: 100%;
    height: 100%; }
  .top_about .inner {
    position: relative;
    z-index: 2; }
    .top_about .inner.anim {
      opacity: 0;
      visibility: hidden; }
      .top_about .inner.anim.active {
        opacity: 1;
        visibility: visible; }
    .top_about .inner .txt {
      position: relative;
      z-index: 1; }
    .top_about .inner .imgBox {
      position: relative;
      z-index: 1; }
    .top_about .inner.whats_about {
      font-size: 114.3%;
      display: flex; }
      .top_about .inner.whats_about::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 100px;
        transform: translateX(-50vw);
        -moz-transform: translateX(-50vw);
        -webkit-transform: translateX(-50vw);
        background: #fff;
        height: 440px;
        width: 80vw; }
  .top_about ul {
    margin-top: 165px;
    display: flex;
    justify-content: space-between; }
    .top_about ul li {
      font-size: 114.3%;
      width: calc(98%/3);
      text-align: center;
      /*アニメーション用*/
      -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
      transform: translateY(-100%); }
      .top_about ul li .imgBox {
        height: 250px; }
        .top_about ul li .imgBox img {
          position: relative;
          z-index: 1; }
        .top_about ul li .imgBox::after {
          content: "";
          position: absolute;
          bottom: 25px;
          left: 0;
          right: 0;
          margin: auto;
          animation: top_about 0.8s both;
          animation-delay: 0.5s; }
      .top_about ul li h3 {
        font-size: 137.5%;
        padding: 0 0 35px; }
      .top_about ul li:nth-child(1) .imgBox::after {
        background: url("../img/top/fude01.png") no-repeat center;
        height: 81px; }
      .top_about ul li:nth-child(2) {
        transition-delay: 0.2s; }
        .top_about ul li:nth-child(2) .imgBox img {
          left: 30px; }
        .top_about ul li:nth-child(2) .imgBox::after {
          background: url("../img/top/fude02.png") no-repeat center;
          height: 84px;
          animation-delay: 0.8s; }
      .top_about ul li:nth-child(3) {
        transition-delay: 0.5s; }
        .top_about ul li:nth-child(3) .imgBox::after {
          background: url("../img/top/fude03.png") no-repeat center;
          height: 97px;
          animation-delay: 1s; }
  @media screen and (max-width: 1024px) {
    .top_about ul li {
      width: calc(95%/3); }
      .top_about ul li .imgBox::after {
        background-size: 100% !important; } }
  @media screen and (max-width: 896px) {
    .top_about {
      padding: 35px 0 115px; }
      .top_about .inner .txt {
        margin-top: 20px; }
      .top_about .inner > .imgBox img {
        width: 60%; }
      .top_about .inner.whats_about {
        font-size: 100%;
        flex-direction: column-reverse; }
        .top_about .inner.whats_about::after {
          content: "";
          position: absolute;
          left: 50%;
          top: 100px;
          transform: translateX(-50vw);
          -moz-transform: translateX(-50vw);
          -webkit-transform: translateX(-50vw);
          background: #fff;
          height: 440px;
          width: 80vw; }
      .top_about ul {
        margin-top: 45px; }
        .top_about ul li {
          font-size: 100%; }
          .top_about ul li h3 {
            padding: 0 0 20px; } }
  @media screen and (max-width: 480px) {
    .top_about {
      padding: 35px 0; }
      .top_about .inner .txt {
        margin-top: 20px; }
      .top_about .inner > .imgBox img {
        width: 100%; }
      .top_about ul {
        display: block; }
        .top_about ul li {
          width: 100%;
          position: relative;
          text-align: left;
          padding-left: 120px;
          min-height: 120px; }
          .top_about ul li .imgBox {
            width: 100px;
            height: auto;
            position: absolute !important;
            left: 0; }
            .top_about ul li .imgBox img {
              left: 0 !important; }
            .top_about ul li .imgBox::after {
              bottom: -30px; }
          .top_about ul li h3 {
            font-size: 114.3%;
            padding: 0 0 10px; } }

.concept {
  margin: 150px 0 110px;
  text-align: center; }
  .concept .conceptMv {
    margin-bottom: 185px;
    position: relative; }
    .concept .conceptMv img {
      position: relative;
      z-index: 2; }
    .concept .conceptMv::before {
      content: "";
      position: absolute;
      z-index: 1;
      top: 200px;
      left: 0;
      width: 40vw;
      height: 75%;
      background: #e6e6e6;
      background-image: url("../img/common/bg_14p.png"); }
    .concept .conceptMv::after {
      content: "";
      position: absolute;
      top: 260px;
      right: 0;
      width: 80vw;
      height: 75%;
      background: #f9f9f9;
      background-image: url("../img/common/bg_14p.png"); }
  .concept p {
    font-size: 114.3%; }
  @media screen and (max-width: 1024px) {
    .concept .conceptMv::before {
      top: 40%; }
    .concept .conceptMv::after {
      top: 50%; } }
  @media screen and (max-width: 896px) {
    .concept {
      margin: 0px 0 110px; }
      .concept .conceptMv {
        margin-bottom: 85px; } }
  @media screen and (max-width: 480px) {
    .concept p {
      font-size: 100%; } }

.itemList li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 100px;
  position: relative; }
  .itemList li .imgBox {
    width: 47%; }
  .itemList li .txtBox {
    width: 47%;
    display: flex;
    align-items: center; }
    .itemList li .txtBox .product-code-default {
      color: #6b6b6b;
      font-size: 85.7%; }
    .itemList li .txtBox .ec-headingTitle {
      padding: 25px 0;
      margin-bottom: 30px;
      font-size: 214.3%;
      border-bottom: 1px solid #6b6b6b; }
    .itemList li .txtBox .productRole__description {
      line-height: 2; }
    .itemList li .txtBox .ec-productRole__price {
      margin: 50px 0; }
      .itemList li .txtBox .ec-productRole__price .ec-price__price {
        font-size: 178.6%; }
  .itemList li .catch {
    position: absolute;
    top: -90px;
    left: 30px; }
  .itemList li:nth-child(even) {
    flex-direction: row-reverse; }
    .itemList li:nth-child(even) .catch {
      left: auto;
      right: 30px; }
@media screen and (max-width: 480px) {
  .itemList li {
    display: block; }
    .itemList li .imgBox {
      width: 100%; }
    .itemList li .txtBox {
      width: 100%; }
      .itemList li .txtBox .ec-headingTitle {
        padding: 15px 0;
        margin-bottom: 15px;
        font-size: 160%; }
      .itemList li .txtBox .ec-productRole__price {
        margin: 25px 0; }
      .itemList li .txtBox .btn01 {
        text-align: center; }
    .itemList li .catch {
      top: -50px;
      left: -10px;
      width: 40%; } }

.gallery {
  margin-top: 250px;
  text-align: center; }
  .gallery .galleryMv {
    margin-bottom: 260px;
    position: relative; }
    .gallery .galleryMv img {
      position: relative;
      z-index: 2; }
    .gallery .galleryMv::before {
      content: "";
      position: absolute;
      z-index: 1;
      top: 200px;
      left: 0;
      width: 40vw;
      height: 75%;
      background: #e6e6e6;
      background-image: url("../img/common/bg_14p.png"); }
    .gallery .galleryMv::after {
      content: "";
      position: absolute;
      top: 260px;
      right: 0;
      width: 80vw;
      height: 75%;
      background: #f9f9f9;
      background-image: url("../img/common/bg_14p.png"); }
  .gallery ul {
    display: flex;
    justify-content: center; }
  @media screen and (max-width: 1024px) {
    .gallery {
      margin-top: 180px; }
      .gallery .galleryMv {
        margin-bottom: 130px; }
        .gallery .galleryMv::before {
          top: 40%; }
        .gallery .galleryMv::after {
          top: 50%; } }
  @media screen and (max-width: 480px) {
    .gallery {
      margin-top: 80px; }
      .gallery .galleryMv {
        margin-bottom: 80px; }
        .gallery .galleryMv::before {
          top: 40%; }
        .gallery .galleryMv::after {
          top: 50%; }
      .gallery ul {
        flex-wrap: wrap; }
        .gallery ul li {
          width: calc(100%/2); }
          .gallery ul li img {
            vertical-align: bottom; } }