@charset "UTF-8";

/*  BASE
==========================================================*/
html:has(.z-mechanism) {
  scroll-behavior: smooth;
}
.z-mechanism {
  /* font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "メイリオ", "ＭＳ Ｐゴシック", sans-serif; */
  font-size: 1.5rem;
  font-size: clamp(1.4rem, calc(15 / 1200 * 100vw), 1.5rem);
  line-height: 1.6;
  letter-spacing: 0.04em;
  font-feature-settings: "palt";
  color: #3c5064;
  margin-bottom: 10rem;
}
.z-inner--1000 {
  width: 100rem;
  max-width: 85%;
  margin: 0 auto;
}
.z-inner--980 {
  width: 98rem;
  max-width: 85%;
  margin: 0 auto;
}
@media print, screen and (max-width: 750px) {
  .z-mechanism {
    margin-bottom: 7.6rem;
  }
  .z-inner--1000 {
    max-width: 89%;
  }
}


/* aos */
[data-aos=fade-up]{transform:translate(0,60px)}
[data-aos=fade-left]{transform: translate3d(20px,0,0);}
[data-aos=fade-right]{transform: translate3d(20px,0,0);}
[data-aos=zoom-out]{transform:scale(1.05)}

.aos-mask-wrap {
  overflow: hidden;
}
/* AOSで動かす本体 */
[data-aos="ttl-slide-up"] {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
  transition-property: transform, opacity;
  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1); 
}
[data-aos="ttl-slide-up"].aos-animate {
  transform: translateY(0);
  opacity: 1;
}

/* HACK */
/*
.h_wrap:not(.h_fixed){margin-top: -120px;}
@media print, screen and (max-width:750px) {
  .h_wrap:not(.h_fixed){ margin-top: -16vw;}
}
*/

/*  COMMON
==========================================================*/
.z-fv__logo {
  position: absolute;
  top: 2.2rem;
  left: 2.2rem;
}
.z-fv__logoImg {
  width: 150px;
  height: auto;
  aspect-ratio: 116/32;
}
@media print, screen and (max-width:750px) {
  .z-fv__logo {
  top: 1rem;
  left: 1rem;
  }
  .z-fv__logoImg {
    width: 116px;
  }
}



.z-headingL__ja {
  font-size: 5.1rem;
  font-size: clamp(3.2rem, calc(51 / 1400 * 100vw), 5.1rem);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-indent: -0.06em;
  font-weight: bold;
}
.z-headingL__en {
  font-weight: bold;
  font-size: 1.7rem;
  font-size: clamp(1.5rem, calc(17 / 1200 * 100vw), 1.7rem);
  letter-spacing: 0.02em;
  opacity: 0.5;
}
.z-heading2 {
  text-align: center;
}
.z-heading2__ja {
  font-size: 4rem;
  font-size: clamp(2.6rem, calc(40 / 1200 * 100vw), 4rem);
  line-height: calc(48 / 40);
  letter-spacing: 0.12em;
  font-weight: bold;
}
.z-heading2__en {
  font-weight: bold;
  font-size: 1.4rem;
  font-size: clamp(1.2rem, calc(14 / 1200 * 100vw), 1.4rem);
  letter-spacing: 0.02em;
  opacity: 0.5;
}
.z-heading2__ja--30 {
  font-size: 3rem;
  font-size: clamp(2.4rem, calc(30 / 1200 * 100vw), 3rem);
}

.z-bgBlue {
  background-color: #ebf1f5;
}
.z-txt {
  font-size: 1.9rem;
  font-size: clamp(1.6rem, calc(19 / 1400 * 100vw), 1.9rem);
  letter-spacing: 0.12em;
  font-weight: bold;
  line-height: calc(35 / 19);
}
.z-txt--accent {
  color: #fff;
  background-color: #cf121b;
  padding: 0.12em 0 0.12em 0.12em;
}

/* efficacyTopic */
.z-efficacyTopic {
  padding: 9.6rem 0 9.6rem;
  scroll-margin-top: 120px;
}
@media print, screen and (max-width: 1110px) {
  .z-efficacyTopic {
    scroll-margin-top: 80px;
  }
}
@media print, screen and (max-width: 750px) {
  .z-efficacyTopic {
    scroll-margin-top:  13.33333vw;
  }
}
.z-efficacyTopic__inner {
  position: relative;
}
.z-efficacyTopicNum {
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
  position: absolute;
  top: 0;
  left: 0;
}
.z-efficacyTopicNum__num {
  display: block;
  font-size: 2rem;
}
.z-heading3 {
  font-weight: bold;
  font-size: 3rem;
  font-size: clamp(2.1rem, calc(30 / 1200 * 100vw), 3rem);
  line-height: calc(38 / 30);
  letter-spacing: 0.02em;
}
.z-tabHide {
  display: block;
}
.z-spHide {
  display: block;
}
.z-spShow {
  display: none !important;
}
/* NAV */
.z-nav__menu {
  border-right: 1px solid rgba(60, 80, 100, 0.5);
}
.z-nav__menu:first-child {
  border-left: 1px solid rgba(60, 80, 100, 0.5);
}

.z-nav__menuLink {
  display: block;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.z-nav__menuLink::after {
  content: "";
  display: block;
  width: 2rem;
  height: 2rem;
  aspect-ratio: 1/1;
  background: url(../../img/mechanism/icon-arrow_circle.svg) no-repeat center
    center / contain;
}
.z-nav__txt {
  display: flex;
  font-size: 1.8rem;
  font-size: clamp(1.6rem, calc(18 / 1200 * 100vw), 1.8rem);
  align-items: center;
  text-align: center;
  min-height: 2.4em;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: 0.06em;
  margin: calc(25em / 18) 0 calc(10em / 18);
}

@media print, screen and (max-width: 991px) {
  .z-nav__txt {
    font-size: clamp(1.2rem, calc(16 / 990 * 100vw), 1.6rem);
  }
  .z-nav__menuLink::after {
    width: 1.5rem;
    height: 1.5rem;
  }
  .z-tabHide {
    display: none;
  }
}
@media print, screen and (max-width: 750px) {
  .z-efficacyTopicNum {
    top: -8rem;
  }
  .z-efficacyTopic {
    padding: 11.6rem 0 7.6rem;
  }
  .z-nav__txt {
    font-size: clamp(1.1rem, calc(11 / 375 * 100vw), 1.4rem);
  }
  .z-txt {
    font-size: clamp(1.5rem, calc(15 / 600 * 100vw), 1.7rem);
  }

  .z-spHide {
    display: none !important;
  }
  .z-spShow {
    display: block !important;
  }
}

/*  FV
==========================================================*/
.z-fv {
  width: 100%;
/*	pointer-events: none;*/
}
.z-fv__video {
  display: block;
  width: 100%;
  height: auto;
  /* max-height: calc(95vh - 120px); */
  aspect-ratio: 16/9;
  background-color: #000;
}

/*  EFFICACY
==========================================================*/
.z-efficacy {
  padding: 10.8rem 0;
}
.z-efficacy__contents {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.z-efficacy__heading img {
  display: block;
  font-size: 5.1rem;
  font-size: clamp(3.2rem, calc(51 / 1400 * 100vw), 5.1rem);
  width: calc(211em / 51);
  height: auto;
  margin-bottom: 0.9rem;
}
.z-efficacy__txt {
  margin-top: 5rem;
}
.z-efficacySlide {
  width: calc(500 / 1000 * 100%);
  max-width: 100%;
  /* margin: 0 auto 4.5rem; */
}
.z-efficacySlide .slick-slide {
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}
.z-efficacySlide .slick-slide img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.z-dots__wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.9rem;
  gap: 6px;
}

.z-dots__wrap li {
  width: 6px;
  height: 6px;
  background-color: #3c5064;
  cursor: pointer;
  transition: all 0.5s;
  opacity: 0.5;
}

.z-dots__wrap li:hover,
.z-dots__wrap li.slick-active {
  opacity: 1;
}
.z-dots__wrap li button {
  display: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  padding: 0;
  border: none;
  background-color: transparent;
}
@media print, screen and (max-width: 750px) {
  .z-efficacy__contents {
    flex-direction: column;
  }
  .z-efficacySlide {
    width: 100%;
  }
  .z-efficacy__txt {
    margin-top: 2.4rem;
  }
  .z-efficacy__heading {
    text-align: center;
  }
  .z-efficacy__heading img {
    width: 18rem;
    margin: 0 auto 0.9rem;
  }
  .z-efficacy {
    padding: 7.6rem 0;
  }
  .z-efficacy__txt .z-tabHide {
    display: block;
  }
}

/*  MANAGED
==========================================================*/
.z-managed {
  padding: 8.2rem 0 10rem;
}
.z-managed__contents {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(80 / 1000 * 100%);
}
.z-managed__txtFrame {
  margin-top: 5.6rem;
}
.z-managed__txt {
  margin-top: 3.5rem;
  margin-bottom: -0.2em;
}
.z-managed__img {
  width: calc(353 / 1000 * 100%);
  max-width: 100%;
}
.z-managed__img img {
  height: auto;
  width: 100%;
  aspect-ratio: 353/275;
}
@media print, screen and (max-width: 991px) {
  .z-managed__txtFrame {
    width: calc(100% - calc(433 / 1000 * 100%));
  }
}
@media print, screen and (max-width: 750px) {
  .z-managed__contents {
    flex-direction: column;
    align-items: center;
  }
 .z-managed__img {
    width: 35.3rem;
    max-width: 80%;
  }
  .z-managed__img img {
    width: 100%;
    height: auto;
  }
  .z-managed {
    padding: 6.6rem 0 7.6rem;
  }
  .z-managed__txt {
    margin-top: 2.4rem;
    letter-spacing: 0.06em;
    text-align: justify;
  }
  .z-managed__txtFrame {
    width: 100%;
    margin-top: 4rem;
  }
  .z-managed__heading {
    text-align: center;

  }
}
/* MECHANISM NAV
==========================================================*/
.z-mechanismNav {
  padding: 15.8rem 0 4rem;
}
.z-mechanismNav__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.z-mechanismNav__menu img {
  width: 100%;
  height: auto;
}
@media print, screen and (max-width: 750px) {
  .z-mechanismNav {
    padding: 4.8rem 0 3rem;
  }
  .z-mechanismNav__list {
  display: block;
  }
  .z-mechanismNav__menu img {
    /* display: none; */
    width: 5.4rem;
  }
  .z-mechanismNav__txt {
    font-size: 1.4rem;
    margin: 0;
    width: 100%;
    padding-left: 1em;
  }
  .z-mechanismNav__menuLink {
    flex-direction: row;
  }
  .z-mechanismNav__menu:first-child {
    border-left: unset;
  }
   .z-mechanismNav__menu {
    border-right: unset;
    border-bottom: 1px solid rgba(60, 80, 100, 0.5);
   }    

}

/* CAUSE & MECHANISM
==========================================================*/
.z-case {
  padding: 10rem 0 9.6rem;
  overflow: hidden;
}
.z-case__contents {
  margin-top: 6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.z-case__txt {
  margin-top: calc(14em / 15);
  text-align: justify;
}
.z-case__txtFrame {
  width: fit-content;
}
.z-case__imgWrap {
  width: calc(360 / 980 * 100%);
  height: auto;
  position: relative;
}
.z-case__imgWrap::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(../../img/mechanism/mechanism_arrow.svg?2507) no-repeat center center / contain;
  position: absolute;
  top: 0;
  left: 0;
 
    -webkit-animation: 18s linear infinite rotation;
  animation: 18s linear infinite rotation;
}
@keyframes rotation {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.z-case__img {
  height: 100%;
 width: 100%;

}
@media print, screen and (max-width: 991px) {
  .z-case__txtFrame {
    width: calc(230 / 842 * 100%);
  }
  .z-case__txtFrame .z-heading3 {
    font-size: clamp(1.9rem, calc(30 / 1200 * 100vw), 3rem);
  }
}
@media print, screen and (max-width: 750px) {
  .z-case__contents {
    flex-direction: column;
    justify-content: center;
    margin-top: 4rem;
  }
  .z-case__txtFrame {
    width: 27rem;
    max-width: 100%;
  }
  .z-case__imgWrap {
    width: 40rem;
    max-width: 100%;
  }
  .z-case {
    padding: 11.6rem 0 7.6rem;
  }
}

/* EFFECTS OF MAGNETISM
==========================================================*/
.z-magnetism__imgFrame {
  margin: 6.4rem auto 0;
  width: clamp(40rem, calc(674 / 980 * 100%), 67.2rem);
  max-width: 90%;
}
.z-magnetism__img {
  width: 100%;
  height: auto;
  aspect-ratio: 672/262;
}
.z-magnetism__txtFrame {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4rem;
  gap: 3rem;
}
.z-magnetism__txt {
  width: calc(550 / 980 * 100%);
  text-align: justify;
}
@media print, screen and (max-width: 991px) {
  .z-magnetism__txt {
    width: calc(100% - 33rem);
  }
}
@media print, screen and (max-width: 750px) {
  .z-magnetism__img {
    aspect-ratio: 250/500;
  }
  .z-magnetism__imgFrame {
    width: 25rem;
    max-width: 100%;
    margin-top: 4rem;
  }
  .z-magnetism__txtFrame {
    flex-direction: column;
    gap: 2rem;
    margin-top: 5rem;
  }
  .z-magnetism__txt {
    width: 100%;
  }
}
/* ABOUT NS FORCE
==========================================================*/
.z-nsforce__contents {
  margin-top: 7.3rem;
}
.z-nsforce__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
}
.z-nsforce__video {
  width: calc(100% - 37rem);
  max-width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
.z-nsforce__logo {
  display: block;
  margin: 0 auto;
  height: auto;
  max-width: 100%;
  width: calc(200 / 330 * 100%);
}
.z-nsforce__title {
  font-size: 2.8rem;
  font-size: clamp(2.1rem, calc(28 / 1400 * 100vw), 2.8rem);
  margin-top: 5.3rem;
}
.z-nsforce__txt {
  margin-top: 1.3rem;
}
.z-nsforce__bottom {
  display: flex;
  /* flex-wrap: wrap; */
  justify-content: center;
  gap: 5.7rem;
  margin-top: 8rem;
}
.z-nsforceEffects {
  width: 35rem;
  text-align: center;
}
.z-nsforceEffects__title {
  display: block;
  line-height: 1.2;
  width: 100%;
  font-weight: bold;
  border: 3px solid #3c5064;
  background-color: #fff;
  border-radius: 1.5rem;
  padding: 3px;
}
.z-nsforceEffects__img {
  margin-top: 1rem;
  width: 100%;
  max-width: 100%;
  height: auto;
}
.z-nsforceEffects__txt {
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: bold;
  margin-top: 1.3rem;
}
.z-nsforceEffects__txt--note {
  display: block;
  font-size: 1.3rem;
  font-weight: 400;
  margin-top: 1rem;
}
@media print, screen and (max-width: 991px) {
  .z-nsforce__bottom {
    gap: calc(36 / 991 * 100vw);
  }
  .z-nsforceEffects__txt {
    font-size: 1.5rem;
    font-size: clamp(1.4rem, calc(14 / 768 * 100vw), 1.5rem);
  }
  .z-nsforce__video {
    width: calc(100% - 31rem);
  }
}
@media print, screen and (max-width: 750px) {
  .z-nsforce__bottom {
    flex-wrap: wrap;
  }
  .z-nsforceEffects__img {
    max-width: 80%;
  }
  .z-nsforceEffects__title {
    margin: 0 auto;
    max-width: 80%;
  }
  .z-nsforce__bottom {
    gap: 3.6rem;
    margin-top: 6rem;
  }
  .z-nsforce__video {
    width: 100%;
  }
  .z-nsforce__top {
    flex-direction: column;
  }
  .z-nsforce__contents {
    margin-top: 4rem;
  }
  .z-nsforce__title {
    margin-top: 3rem;
  }
  .z-nsforce__logo {
    max-width: 50%;
  }
}

/* PART CATEGORY
==========================================================*/
.z-categoryNav {
  margin: 4rem auto;
}
.z-categoryNav__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.z-categoryNav__menu {
  border-right: 1px solid rgba(60, 80, 100, 0.5);
}

.z-categoryNav__menu:first-child {
  border-left: 1px solid rgba(60, 80, 100, 0.5);
}
.z-categoryNav__menuLink {
  padding: 3.6rem 1rem 0;
}
.z-categoryNav__menuLink img {
  max-width: 70%;
  height: auto;
}
@media print, screen and (max-width: 991px) {
  .z-categoryNav__menuLink {
    padding: 2rem 1rem 0;
  }
}
@media print, screen and (max-width: 750px) {
  .z-categoryNav__menuLink img {
    max-width: 40%;
  }
  .z-categoryNav__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 0;
  }
  .z-categoryNav__menu:nth-child(4) {
    border-left: 1px solid rgba(60, 80, 100, 0.5);
  }
  .z-categoryNav__menuLink {
    padding: 0.5rem 0 0;
  }
  .z-categoryNav__txt {
    margin-top: calc(16em / 18);
  }
}
/* BRANDS
==========================================================*/
.z-brands {
  margin-top: 13rem;
}
.z-brandsNav {
  padding-top: 4rem;
}
.z-brandsNav__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.z-brandsNav__menu {
  border-right: 1px solid rgba(60, 80, 100, 0.5);
}

.z-brandsNav__menu:first-child {
  border-left: 1px solid rgba(60, 80, 100, 0.5);
}
.z-brandsNav__menuLink img {
  width: 100%;
  height: auto;
}
.z-brandsNav__txt {
  min-height: unset;
  margin: calc(25em / 18) 0 calc(20em / 18);
}
.z-rankingBnr {
  margin-top: 3.6rem;
  width: 100%;
  max-width: 100%;
}
.z-rankingBnr__img {
  width: 100%;
  height: auto;
}
@media print, screen and (max-width: 750px) {
  .z-brandsNav__list {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .z-brandsNav__menu {
    border-left: 1px solid rgba(60, 80, 100, 0.5);
  }
  .z-brands {
    margin-top: 8rem;
  }
  .z-brandsNav__txt {
    font-size: clamp(1.5rem, calc(16 / 990 * 100vw), 1.6rem);
  }
}
/* Q & A
==========================================================*/
.z-faqList {
  font-size: 1.6rem;
  margin-top: 4rem;
}
.z-faqList__txt {
  text-align: justify;
}
.z-faqList__item {
  border-bottom: 1px solid rgba(60, 80, 100, 0.5);
}
.z-faqList__q {
  font-weight: bold;
  cursor: pointer;
}
.z-faqList__q,
.z-faqList__a {
  padding: calc(33em / 16) calc(40em / 16) calc(33em / 16) calc(70em / 16);
  display: flex;
  gap: calc(22em / 16);
  position: relative;
  letter-spacing: 0.06em;
}
.z-faqList__q::before {
  position: absolute;
  content: "";
  display: block;
  width: calc(28em / 16);
  height: calc(23em / 16);
  background: url(../../img/mechanism/icon-q.svg) no-repeat center center /
    contain;
  left: 2rem;
}
.z-faqList__q::after {
  position: absolute;
  content: "";
  display: block;
  width: calc(16em / 16);
  height: calc(9em / 16);
  background: url(../../img/mechanism/icon-arrow_down.svg) no-repeat center
    center / contain;
  right: 2rem;
  transition: all 0.3s;
  margin-top: 0.5em;
}
.z-faqList__q.open::after {
  transform: rotate(180deg);
}
.z-faqList__a {
  display: none;
}
.active .z-faqList__a {
  display: block;
}
.z-faqList__a::before {
  position: absolute;
  content: "";
  display: block;
  width: calc(28em / 16);
  height: calc(23em / 16);
  background: url(../../img/mechanism/icon-a.svg) no-repeat center center /
    contain;
  left: 2rem;
}

@media print, screen and (max-width: 750px) {
  .z-faqList {
    font-size: 1.4rem;
    margin-top: 3rem;
  }
  .z-faqList__q,
  .z-faqList__a {
    padding: calc(33em / 16) calc(20em / 16) calc(33em / 16) calc(36em / 16);
    display: flex;
    gap: calc(22em / 16);
    position: relative;
    letter-spacing: 0.06em;
  }
  .z-faqList__a {
    padding-top: 1rem;
  }
  .z-faqList__q::before {
    left: 0.2em;
    width: calc(24em / 16);
  }
  .z-faqList__q::after {
    right: 0.2em;
  }
  .z-faqList__a::before {
    left: 0.2em;
    width: calc(24em / 16);
  }
}