@charset "utf-8";

/* ------------------
 フェード用CSS
------------------ */
.fade {
	opacity: 0;
	transition: .5s ease-in-out;
	&.fade--bot{transform: translate(0,100px);}
	&.fade--top{transform: translate(0,-100px);}
	&.fade--left{transform: translate(-100px,0);}
	&.fade--right{transform: translate(100px,0);}
	&.fadein{transform: translate(0,0);opacity: 1;}
}

/* MV箇所 */
.top_mv {
  position: relative;
  height: 800px;
  background: var(--var-color);
  overflow: hidden;
  @media screen and (max-width: 767px) {
    height: 560px;
  }
}
.top_mv--ttl {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 22%;
  margin: auto;
  height: calc(100% - 128px);
  z-index: 1;
  p {
    color: #fff;
    font-weight: bold;
  }
  @media screen and (max-width: 1600px) {
    right: 15%;
  }
  @media screen and (max-width: 767px) {
    width: max-content;
    height: calc(100% - 160px);
    right: 12%;
  }
  @media screen and (max-width: 350px) {
    right: 5%;
  }
  @media print {
    right: 8%;
  }
}
.top_mv--ttlVert {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: initial;
  margin-bottom: var(--space-45);
  & > span {
    font-size: var(--font-40);
    letter-spacing: var(--letter-20);
    writing-mode: vertical-rl;
    text-orientation: upright;
    border-right: 1px solid #fff;
    &:last-child {
      border-left: 1px solid #fff;
    }
  }
  @media screen and (max-width: 767px) {
    margin-bottom: 0;
  }
}
.top_mv--ttlMain {
  position: relative;
  z-index: 1;
  p {
    display: inline;
    font-size: 8rem;
    letter-spacing: 16px;
  }
  @media screen and (max-width: 767px) {
    p {
      font-size: 5.6rem;
      letter-spacing: 2.8px;
    }
  }
}
.top_mv--polygon {
  position: absolute;
  top: 8px;
  animation: rotateAnime 10s linear infinite;
  transform-origin: center;
  z-index: -1;
  /* animationの基準（原点）確認用
  &::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 10px;
    height: 10px;
    background: red;
    border-radius: 50%;
  } */
  &.type01 {
    left: -35px;
  }
  &.type02 {
    left: 64px;
    animation: rotateAnimeRev 10s linear infinite;
  }
  &.type03 {
    right: -20px;
  }
  @media screen and (max-width: 767px) {
    top: 16px;
    width: 85px!important;
    aspect-ratio: 150 / 143;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    &.type01 {
      left: -14px;
    }
    &.type02 {
      left: 48px;
    }
    &.type03 {
      right: -12px;
    }
  }
}
@keyframes rotateAnime {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}
@keyframes rotateAnimeRev {
  from {transform: rotate(360deg);}
  to {transform: rotate(0deg);}
}
.top_mv--ttlSub {
  font-size: var(--font-24);
  width: 100%;
  max-width: max-content;
  margin: var(--space-30) auto 0;
  @media screen and (max-width: 767px) {
    font-size: var(--basic-txt);
    margin-top: 10px;
  }
}
.top_mv--abs {
  position: absolute;
  &.type01 {
    top: 0;
    bottom: 0;
    left: 18%;
    margin: auto;
    display: flex;
    align-items: center;
  }
  &.type02 {
    top: 0;
    right: 0;
    left: 80px;
    margin: auto;
    display: flex;
    justify-content: center;
  }
  &.type03 {
    top: 64px;
    right: 1.5%;
  }
  &.type04 {
    top: 104px;
    left: 1.5%;
  }
  @media screen and (max-width: 1920px) {
    
  }
  @media screen and (max-width: 1600px) {
    &.type01 {
      left: 12%;
    }
    &.type03 {
      right: -88px;
    }
    &.type04 {
      left: -108px;
    }
  }
  @media screen and (max-width: 767px) {
    img {object-fit: contain;}
    &.type01 {
      top: auto;
      bottom: 24px;
      left: 12%;
      img {width: 220px;}
    }
    &.type02 {
      left: 160px;
      img {width: 96px;}
    }
    &.type03 {
      img {width: 128px;}
    }
    &.type04 {
      left: -40px;
      img {width: 104px;}
    }
  }
  @media screen and (max-width: 350px) {
    &.type01 {
      left: 6%;
    }
  }
}

/* MV下コンテンツ */
.top_fv {
  overflow: hidden;
}
.top_fv--fig {
  position: absolute;
  z-index: 1;
  &:has(img[src="img/top_fv01.webp"]) {
    top: 740px;
    right: 20%;
    img {border-radius: 0 50px 50px 0;}
  }
  &:has(img[src="img/top_fv02.webp"]) {
    left: 20%;
    bottom: 65px;
    img {border-radius: 50px 0 0 50px;}
  }
  @media screen and (max-width: 1920px) {
    &:has(img[src="img/top_fv01.webp"]) {right: 15%;}
    &:has(img[src="img/top_fv02.webp"]) {left: 15%;}
  }
  @media screen and (max-width: 1600px) {
    &:has(img[src="img/top_fv01.webp"]) {
      right: 0;
      img {border-radius: 0;}
    }
    &:has(img[src="img/top_fv02.webp"]) {
      left: 0;
      img {border-radius: 0;}
    }
  }
  @media screen and (max-width: 767px) {
    display: none;
  }
  @media print {
    &:has(img[src="img/top_fv01.webp"]) {right: 5%;}
    &:has(img[src="img/top_fv02.webp"]) {left: 5%;}
  }
}
.top_fv .cmn_container {
  padding: 50px 0 120px;
  @media screen and (max-width: 767px) {
    padding: var(--space-65) 0;
  }
}
.top_fv--cont {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  &.rev {
    margin: auto;
    margin-right: 0;
  }
  &:not(:last-child) {
    margin-bottom: 72px;
  }
  @media screen and (max-width: 767px) {
    &:not(:last-child) {
      margin-bottom: var(--space-65);
    }
    figure.sp_block {
      &:has(img[src="img/top_fv01.webp"]) img {border-radius: 0 50px 50px 0;}
      &:has(img[src="img/top_fv02.webp"]) img {border-radius: 50px 0 0 50px;}
    }
  }
}
.top_fv--cont .cmn_heading {margin-bottom: 0.25em;}
.top_fv--polygon {
  position: absolute;
  &.type01 {
    top: -60px;
    left: 0;
    animation: rotateAnime 8s linear infinite;
  }
  &.type02 {
    bottom: -40px;
    left: 0;
    animation: rotateAnimeRev 10s linear infinite;
  }
  &.type03 {
    bottom: 64px;
    right: 0;
    left: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    animation: rotateAnime 12s linear infinite;
  }
  &.type04 {
    bottom: -50px;
    right: 128px;
    animation: rotateAnimeRev 10s linear infinite;
  }
  &.type05 {
    top: 0;
    right: -96px;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
    animation: rotateAnime 8s linear infinite;
  }
  @media screen and (max-width: 767px) {
    img {object-fit: contain;}
    &.type01 {
      img {
        width: 168px;
      }
    }
    &.type02 {
      img {
        width: 104px;
      }
    }
    &.type03 {
      top: 500px;
      right: auto;
      bottom: auto;
      left: 10%;
      margin: 0;
      width: 176px;
      aspect-ratio: 346 / 341;
      img {
        width: 100%;
      }
    }
    &.type04 {
      right: 5%;
      img {
        width: 88px;
      }
    }
    &.type05 {
      top: 20%;
      right: -48px;
      bottom: auto;
      img {
        width: 164px;
      }
    }
  }
}

/* 子要素を順番にフェードイン */
.fade.fade--list {
	opacity: 1;
	& + p {
		text-align: center;
		margin: 20px auto;
	}
}
.fade_child {
  opacity: 0;
  transform: translate(0,100px);
  transition: .5s ease-in-out;
	&:nth-child(1){transition-delay: 0.15s;}
  &:nth-child(2){transition-delay: 0.3s;}
  &:nth-child(3){transition-delay: 0.45s;}
  &:nth-child(4){transition-delay: 0.6s;}
  &:nth-child(5){transition-delay: 0.75s;}
  &:nth-child(6){transition-delay: 0.9s;}
  &:nth-child(7){transition-delay: 1.05s;}
  &:nth-child(8){transition-delay: 1.2s;}
  &:nth-child(9){transition-delay: 1.35s;}
}
.fadein .fade_child{
  transform: translate(0,0);
  opacity: 1;
}

/* 製品ラインナップ */
.top_lineup {
  background: url(../img/top_lineup_bg.webp)no-repeat center;
  background-size: cover;
}
.top_lineup .cmn_container {
  & > * {
    position: relative;
    z-index: 1;
  }
}
.top_lineup--list {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  @media screen and (max-width: 767px) {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
}
.top_lineup--item {
  width: calc(33.3% - 20px);
  @media screen and (max-width: 767px) {
    width: 100%;
    max-width: 328px;
  }
}
.top_lineup--link {
  position: relative;
  display: block;
  width: 100%;
  &:hover {opacity: 0.8;}
  &::after {
    content: '';
    position: absolute;
    background: url(../common/img/expand_icon.webp)no-repeat center;
    background-size: contain;
    width: 40px;
    height: 40px;
    right: 15px;
    bottom: 15px;
  }
  img {
    width: 100%;
    display: block;
  }
}
div[popover="auto"] {
  width: 100%;
  height: 100vh;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  &:popover-open {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5em;
  }
  @media screen and (max-width: 767px) {
    padding-inline: 5%;
  }
}
button.Close {
  background: #fff;
  color: var(--var-color);
  font-weight: bold;
  font-size: var(--font-24);
  letter-spacing: var(--letter-12);
  /* border-radius: 30px; */
  padding: 0.25em 2em;
  &:hover {
    opacity: 0.8;
  }
}
body:has(div[popover="auto"]:popover-open) {overflow: hidden;}

.top_lineup--txt {
  background: #fff;
  padding: var(--space-30) 20px;
  border-radius: 0 0 20px 20px;
  @media screen and (max-width: 767px) {
    padding-inline: 5%;
  }
}
.top_lineup--subHead {
  min-height: 84px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: var(--font-24);
  letter-spacing: var(--letter-12);
  padding-bottom: 0.75em;
  margin-bottom: 0.75em;
  border-bottom: 1px solid var(--main-color);
  .blue_txt {
    display: block;
    font-size: var(--basic-txt);
    margin-top: 0.25em;
  }
  & + p {
    min-height: 174px;
  }
  @media screen and (max-width: 767px) {
    min-height: initial;
    & + p {min-height: initial;}
  }
}
.top_lineup--polygon {
  position: absolute;
  &.type01 {
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    display: flex;
    align-items: center;
  }
  &.type02 {
    bottom: 0;
    left: 0;
  }
}

/* 星空万華鏡 */
.top_star {
  margin-bottom: -96px;
  &::before {
    content: '';
    position: absolute;
    background: url(../img/top_star_bg.webp)no-repeat center;
    background-size: cover;
    width: 100%;
    height: 400px;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
  }
  &::after {
    content: '';
    position: absolute;
    background: url(../img/rail_fig.webp)repeat center;
    background-size: contain;
    width: 100%;
    height: 20px;
    top: 155px;
    right: 0;
    left: 0;
    margin: auto;
  }
  @media screen and (max-width: 767px) {
    &::after {
      background: url(../img/rail_fig.webp) no-repeat center;
      background-size: cover;
      top: 200px;
    }
  }
}
.top_star--inner {
  position: relative;
  width: 90%;
  max-width: 1240px;
  margin: 0 auto;
  padding-top: var(--space-65);
  z-index: 1;
}
.top_star--ttlBlock {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5em 1.5em;
  * {
    color: #fff;
    font-weight: bold;
  }
  @media screen and (max-width: 767px) {
    gap: 0.5em 1em;
  }
}
.top_star--ttl {
  font-size: var(--font-40);
  letter-spacing: var(--letter-20);
}
.top_star--label {
  font-size: var(--font-24);
  letter-spacing: var(--letter-12);
  border: 2px solid #fff;
  border-radius: 30px;
  padding: 0 2em;
  @media screen and (max-width: 767px) {
    font-size: min(1.8rem, 4.8vw);
    padding-inline: 1.5em;
    & + p.indent_txt {
      font-size: min(1.5rem, 4.2vw);
      height: 54px;
    }
  }
}
figure:has(img[src="img/train_icon.svg"]) {
  margin-top: -2em;
  @media screen and (max-width: 767px) {
    margin-top: 0;
  }
}
.top_star--wrap {
  width: 100%;
  max-width: 1024px;
  height: 300px;
  margin: 3em auto 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  @media screen and (max-width: 767px) {
    height: auto;
    flex-direction: column;
    align-items: center;
  }
}
.top_star--left {
  width: 100%;
  max-width: 328px;
}
.top_star--right {
  width: 100%;
  max-width: calc(100% - 20px - 328px);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  p {
    color: #fff;
    font-weight: bold;
  }
  @media screen and (max-width: 767px) {
    max-width: initial;
    gap: 20px;
    p {color: var(--var-color);}
  }
}
.top_star--fig {
  display: flex;
  justify-content: space-between;
  @media screen and (max-width: 767px) {
    gap: 10px;
  }
}

/* ものづくりのこだわり */
.top_point .cmn_container {
  padding-top: 160px;
  & > * {
    position: relative;
    z-index: 1;
  }
}
.top_point--list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 56px;
  @media screen and (max-width: 767px) {
    gap: 10px;
  }
}
.top_point--item {
  width: 100%;
  max-width: 241px;
  display: flex;
  flex-direction: column;
  align-items: center;
  figure {
    margin-bottom: 1em;
  }
}
.top_point--subHead {
  color: var(--main-color);
  font-size: var(--font-24);
  letter-spacing: var(--letter-12);
  margin-bottom: 10px;
  @media screen and (max-width: 767px) {
    & + p {font-size: 1.4rem;}
  }
}
.top_point--polygon {
  position: absolute;
  &.type01 {
    top: 0;
    left: 0;
  }
  &.type02 {
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    display: flex;
    justify-content: center;
  }
  &.type03 {
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    align-items: center;
  }
  @media screen and (max-width: 767px) {
    img {object-fit: contain;}
    &.type01 {
      img {width: 160px;}
    }
    &.type02 {
      img {width: 176px;}
    }
    &.type03 {
      img {width: 168px;}
    }
  }
}

/* よくあるご質問 */
.top_faq {
  &::before {
    content: '';
    position: absolute;
    background: url(../img/top_faq_bg.webp)no-repeat center;
    background-size: cover;
    width: 100%;
    height: 400px;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
  }
}
.top_faq .cmn_heading {
  margin-bottom: var(--space-65);
  text-align: center;
}
.top_faq--cont {
  width: 100%;
  border-radius: 20px;
  background: #fff;
  padding: var(--space-65);
  @media screen and (max-width: 767px) {
    padding-inline: 5%;
  }
}
.top_faq details {
  &:not(:last-child) {
    margin-bottom: var(--space-45);
  }
}
.top_faq--q {
  list-style: none;
  color: var(--main-color);
  font-size: var(--font-24);
  font-weight: bold;
  border-bottom: 1px solid var(--main-color);
  padding-bottom: 0.75em;
  display: flex;
  align-items: center;
  gap: 1em;
  &::-webkit-details-marker {display: none;}
  span {
    background: var(--main-color);
    border-radius: 100px;
    color: #fff;
    width: 60px;
    min-width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-32);
    padding-bottom: 4px;
  }
  @media screen and (max-width: 767px) {
    gap: 0.75em;
    span {
      width: 48px;
      min-width: 48px;
      height: 48px;
    }
  }
}
.top_faq--a {
  padding-top: 0.75em;
  font-size: var(--font-18);
  a {
    text-decoration: underline;
    &:hover {text-decoration: none;}
  }
}

/* ループ箇所 */
.top_loop {
  position: relative;
  div {
    position: relative;
    width: 100%;
    height: 390px;
  }
  div::before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url("../img/loop.webp");
    animation: bgAnime 100s linear infinite;
  }
  @media screen and (max-width: 767px) {
    div {
      height: 280px;
    }
    div::before {
      background-image: url("../img/loop_sp.webp");
    }
  }
}
@keyframes bgAnime {
  0% { background-position: 9100px 0 }
100% { background-position: 0 0 }
}