@charset "UTF-8";
/* ================================================ vw vh */
/* hover
=================================================================== */
/* common
=================================================================== */
/* layout
=================================================================== */
/* imgCover
=================================================================== */
/* background
=================================================================== */
/* flex
=================================================================== */
/* animation delay
=================================================================== */
/* 3d
=================================================================== */
/* font
=================================================================== */
/* vw
=================================================================== */
/* form
=================================================================== */
/* =================================================================== hover */
/* ================================================ vw vh */
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ top */
/* 縦長の画面でヒーローが伸びすぎて写真の左右が切れるため、高さの上限を 1080px（横幅が広い画面では 16:9 の高さ）にする（PC のみ） */
@media only screen and (min-width: 768px) {
  .topMain {
    min-height: 0;
    max-height: max(1080px, 56.25vw); }
  /* 上限で画面より低くなると data-scroll-speed="-2" の背景が下へずれて上端に隙間が出るため、ずれる分（画面高−ヒーロー高の 1/9）だけ上に伸ばす */
  .topMain .topMain__bg {
    height: max(100%, calc(88.8% + 11.2vh)); } }

.main .mainBg > li {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  width: 0; }
  .main .mainBg > li:first-child {
    display: block; }
  .main .mainBg > li:after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(67, 67, 67, 0.24); }

.main .mainContents .mainContents__position {
  display: none; }
  .main .mainContents .mainContents__position:first-child {
    display: block; }

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ banner */
@keyframes lineAnime {
  0% {
    width: 0; }
  100% {
    width: 100%; } }
@-webkit-keyframes lineAnime {
  0% {
    width: 0; }
  100% {
    width: 100%; } }
@keyframes lineAnimeEnd {
  0% {
    width: 100%; }
  100% {
    width: 0; } }
@-webkit-keyframes lineAnimeEnd {
  0% {
    width: 100%; }
  100% {
    width: 0; } }
.topMain__banner {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 3; }
  .topMain__banner .topMain__banner--list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -ms-transition-duration: 0.3s;
    -ms-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition-duration: 0.3s;
    -moz-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translate3d(0, 100%, 0); }
    .topMain__banner .topMain__banner--list.active {
      transform: translate3d(0, 0, 0); }
    .topMain__banner .topMain__banner--list > li {
      position: relative;
      width: 100%;
      overflow: hidden;
      cursor: pointer; }
      .topMain__banner .topMain__banner--list > li .topMain__banner--bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1; }
        .topMain__banner .topMain__banner--list > li .topMain__banner--bg > span {
          display: block;
          position: absolute; }
          .topMain__banner .topMain__banner--list > li .topMain__banner--bg > span:nth-child(1) {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            opacity: 0;
            transition-duration: 1.5s;
            transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            -ms-transition-duration: 1.5s;
            -ms-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            -webkit-transition-duration: 1.5s;
            -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
            -moz-transition-duration: 1.5s;
            -moz-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
          .topMain__banner .topMain__banner--list > li .topMain__banner--bg > span:nth-child(2) {
            height: 100%;
            width: 0%;
            left: 0;
            background-color: white; }
      .topMain__banner .topMain__banner--list > li .hoverTarget {
        position: relative;
        text-align: left;
        white-space: nowrap;
        font-size: 0;
        padding: 14px 25px;
        z-index: 2;
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start; }
        .topMain__banner .topMain__banner--list > li .hoverTarget span, .topMain__banner .topMain__banner--list > li .hoverTarget p {
          display: block;
          line-height: 1;
          color: #fff;
          transition-duration: 1.5s;
          transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
          -ms-transition-duration: 1.5s;
          -ms-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
          -webkit-transition-duration: 1.5s;
          -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
          -moz-transition-duration: 1.5s;
          -moz-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
        .topMain__banner .topMain__banner--list > li .hoverTarget span {
          align-self: center;
          width: 30px;
          font-size: 10px; }
        .topMain__banner .topMain__banner--list > li .hoverTarget p {
          width: calc(100% - 30px);
          font-size: 13px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden; }
      .topMain__banner .topMain__banner--list > li.active--start .topMain__banner--bg > span:nth-child(1) {
        opacity: 1; }
      .topMain__banner .topMain__banner--list > li.active--start .hoverTarget span, .topMain__banner .topMain__banner--list > li.active--start .hoverTarget p {
        color: #000; }
      .topMain__banner .topMain__banner--list > li.active--end .topMain__banner--bg > span:nth-child(2) {
        left: auto;
        right: 0;
        -webkit-animation: lineAnimeEnd 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
        animation: lineAnimeEnd 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
        animation-delay: 0s;
        -webkit-animation-delay: 0s; }

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー momentNav */
.momentNav {
  margin-bottom: 90px; }

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー topConcept */
.topConcept {
  position: relative;
  padding-top: 150px;
  padding-bottom: 200px;
  overflow: hidden; }
  .topConcept.articleBgColor:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(67, 67, 67, 0.15);
    z-index: 2; }
  .topConcept .topConcept__detail {
    max-width: 1095px;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start; }
    .topConcept .topConcept__detail .topConcept__title {
      width: 370px;
      font-size: 81px;
      line-height: 1.2; }
    .topConcept .topConcept__detail .topConcept__text > li {
      font-size: 18px;
      line-height: 2;
      margin-bottom: 30px; }
      .topConcept .topConcept__detail .topConcept__text > li strong {
        display: block;
        font-size: 25px; }
  .topConcept .topConcept__bg {
    position: absolute;
    /* data-scroll-speed="-6" で背景が最大 0.3×(画面高−セクション高) ずれるため、縦長の画面ではその分だけ上下に伸ばす（通常の画面では従来どおり） */
    top: min(0px, calc(30% - 30vh));
    left: 0;
    width: 100%;
    height: max(100%, calc(40% + 60vh));
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("../img/contents/top/concept--img.jpg");
    z-index: 0; }

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ hover */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー pc */
@media (hover: hover) and (pointer: fine) {
  .hover--o:hover, .hover--o:active {
    opacity: .5; }

  .navMain > li > a:hover:after, .navMain > li > a:active:after {
    width: 100%;
    right: auto;
    left: 0; }

  .navMain > li .navArrow:hover > span, .navMain > li .navArrow:active > span {
    transition-delay: 0.4s;
    -webkit-transition-delay: 0.4s;
    top: calc(50% + 2px); } }

/* トップの ACTIVITIES：サムネを従来の縦横比のまま高さ約 460px（幅 336px）に固定（PC・タブレット。スライド数は top.js で auto） */
@media only screen and (min-width: 768px) {
  #my-keen-slider-activities .keen-slider__slide {
    width: 336px;
    min-width: 336px;
    max-width: 336px; } }

/* トップの PRODUCTS CATEGORY／ACTIVITIES：掴んでスライドできることが分かるカーソル（動きは common.js の setSliderGrab） */
#my-keen-slider-cat .keen-slider, #my-keen-slider-activities .keen-slider {
  cursor: grab; }
  #my-keen-slider-cat .keen-slider:active, #my-keen-slider-activities .keen-slider:active {
    cursor: grabbing; }
  #my-keen-slider-cat .keen-slider a, #my-keen-slider-cat .keen-slider img, #my-keen-slider-activities .keen-slider a, #my-keen-slider-activities .keen-slider img {
    -webkit-user-drag: none;
    user-select: none;
    cursor: inherit; }