@charset "utf-8";
/*=============== ▼BASE ===============*/
.negativemargin_main {
  margin: -90px 0 0 0;
  overflow: hidden;
}

.negativemargin_main img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 64em) {
  .negativemargin_main {
    margin: -60px 0 0 0;
  }
}

header {
  transition: 0.3s;
}

header.hide {
  transform: translateY(-100%);
}

.header {
  z-index: 5000;
  background-color: rgba(255, 255, 255, 0.95);
}

*:focus {
  outline: none;
}

main,
section,
.wrapper {
  position: relative;
}

picture {
  display: block;
}

img {
  width: 100%;
  height: auto;
}

.sp {
  display: none;
}

@media screen and (orientation: portrait) {
  .pc {
    display: none;
  }

  .sp {
    display: block;
  }
}

a {
  transition: opacity 0.2s;
}

a:hover {
  opacity: 0.7;
}

body {
  visibility: hidden;
  opacity: 0;
}

body.is-loaded {
  visibility: visible;
  opacity: 1;
}

/*=============== ▼コンテンツ挿入部分 ===============*/
.scroll-animation-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  perspective: 150vw;
}

/* ▼mv */
.mv {
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 100vh;
  transform-origin: top left;
  backface-visibility: hidden;
}

.mv > * {
  position: absolute;
}

/* ▼intro */
.intro {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100vh;
  transform-origin: top left;
  backface-visibility: hidden;
}

.intro > * {
  position: absolute;
}

/* ▼interior */
.interior {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100vh;
  transform-origin: top left;
  backface-visibility: hidden;
}

/* ▼products */
.products {
  display: grid;
  place-items: center;
  position: absolute;
  width: 100%;
  height: 100vh;
}

/*=============== ▼LANDSCAPE(PC) ===============*/
@media screen and (orientation: landscape) {
  .scroll-animation-wrapper {
    perspective: 150vw;
  }

  /* ▼mv */
  .mv {
    background: url(/product/closeup/assets/img/ttb-jdg/mv-bg.png) no-repeat center / cover;
    transform: rotateX(0deg);
  }

  .mv h1 {
    top: 8%;
    left: 8%;
    width: 38%;
  }

  .mv > p {
    bottom: 2%;
    right: 2%;
    width: 23.2%;
  }

  /* ▼intro */
  .intro {
    background: url(/product/closeup/assets/img/ttb-jdg/intro-bg.png) no-repeat center / cover;
  }

  .intro-title01 {
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
    width: 24.8%;
  }

  .intro-img01 {
    top: 54%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 42%;
  }

  .intro-text01 {
    top: 16%;
    left: 61.4%;
    width: 9.6%;
  }

  .intro-text02 {
    bottom: 10%;
    left: 60%;
    width: 12%;
  }

  .intro-text03 {
    bottom: 12.8%;
    left: 26%;
    width: 13.2%;
  }

  .intro-title02 {
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
    width: 26%;
  }

  .intro-img02 {
    top: 26%;
    right: 16%;
    width: 24%;
  }

  .intro-text04 {
    position: relative;
    left: 14%;
    width: 100%;
  }

  .intro-img03 {
    display: flex;
    flex-direction: column-reverse;
    top: 34%;
    left: 20%;
    width: 26%;
  }

  .intro-text05 {
    position: relative;
    right: 8%;
    width: 86%;
  }

  .intro-title03 {
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
    width: 27.2%;
  }

  .intro-img04 {
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24.8%;
  }

  .intro-img05 {
    top: 46%;
    left: 50%;
    top: 60%;
    left: 54%;
    transform: translate(-50%, -50%);
    width: 24.8%;
  }

  .intro-text06 {
    top: 50%;
    left: 30.8%;
    width: 9.2%;
  }

  .intro-text07 {
    top: 48%;
    right: 28%;
    width: 9.2%;
  }

  .intro-text08 {
    top: 16%;
    left: 18%;
    width: 22%;
  }

  .intro-text09 {
    top: 34%;
    right: 25%;
    width: 13.2%;
  }

  /* ▼interior */
  .interior {
    background: url(/product/closeup/assets/img/ttb-jdg/interior-bg.png) no-repeat center / cover;
  }

  .interior > * {
    position: absolute;
  }

  .interior-title {
    z-index: 1;
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
    width: 27%;
  }

  .interior-background {
    width: 100%;
    height: 100%;
    background: rgba(202, 202, 204, 0.9);
    background: linear-gradient(90deg, rgba(202, 202, 204, 0.9) 50%, rgba(215, 204, 200, 0.9) 50%);
  }

  .interior-img {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
  }

  /* ▼products */
  .products {
    background: url(/product/closeup/assets/img/ttb-jdg/products-bg.png) no-repeat center / cover;
  }

  .products-title {
    width: 24.4%;
  }

  .products-img {
    width: 41%;
  }

  .products-link {
    display: block;
    width: 9.6%;
  }
}
/*=============== ▲LANDSCAPE(PC) ===============*/

/*=============== ▼PORTRAIT(SP) ===============*/
@media screen and (orientation: portrait) {
  .scroll-animation-wrapper {
    perspective: 300vw;
  }

  /* ▼mv */
  .mv {
    background: url(/product/closeup/assets/img/ttb-jdg/sp/mv-bg.png) no-repeat center / cover;
  }

  .mv h1 {
    top: 12%;
    left: 8%;
    width: 68%;
  }

  .mv > p {
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    width: 56%;
  }

  /* ▼intro */
  .intro {
    background: url(/product/closeup/assets/img/ttb-jdg/sp/intro-bg.png) no-repeat center / cover;
  }

  .intro-title01 {
    top: 4%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
  }

  .intro-img01 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
  }

  .intro-text01 {
    top: 26%;
    right: 2%;
    width: 23.2%;
  }

  .intro-text02 {
    bottom: 24%;
    right: 2%;
    width: 29.4%;
  }

  .intro-text03 {
    bottom: 20%;
    left: 2%;
    width: 31.6%;
  }

  .intro-title02 {
    top: 4%;
    left: 50%;
    transform: translateX(-50%);
    width: 62%;
  }

  .intro-img02 {
    top: 14%;
    right: 6%;
    width: 44%;
  }

  .intro-text04 {
    position: absolute;
    top: 38%;
    left: -106%;
    transform: translateY(-50%);
    width: 120%;
  }

  .intro-img03 {
    bottom: 12%;
    left: 2%;
    width: 46.8%;
  }

  .intro-text05 {
    position: absolute;
    top: 60%;
    left: 106%;
    transform: translateY(-50%);
    width: 96%;
  }

  .intro-title03 {
    top: 4%;
    left: 50%;
    transform: translateX(-50%);
    width: 66%;
  }

  .intro-img04 {
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 58%;
  }

  .intro-img05 {
    top: 54%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 58%;
  }

  .intro-text06 {
    top: 50%;
    left: 6%;
    width: 22%;
  }

  .intro-text07 {
    top: 58%;
    right: 4%;
    width: 22%;
  }

  .intro-text08 {
    top: 22%;
    left: 6%;
    width: 72%;
  }

  .intro-text09 {
    top: 36%;
    right: 1%;
    width: 38%;
  }

  /* ▼interior */
  .interior-first-content {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(/product/closeup/assets/img/ttb-jdg/sp/interior-bg01.png) no-repeat center / cover;
  }

  .interior-first-content > * {
    position: absolute;
  }

  .interior-first-content .interior-title {
    top: 4%;
    left: 50%;
    transform: translateX(-50%);
    width: 64%;
  }

  .interior-first-content .interior-background {
    width: 100%;
    height: 100%;
    background-color: rgba(215, 204, 200, 0.9);
  }

  .interior-first-content .interior-img {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72.8%;
  }

  .interior-second-content {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(/product/closeup/assets/img/ttb-jdg/sp/interior-bg02.png) no-repeat center / cover;
  }

  .interior-second-content > * {
    position: absolute;
  }

  .interior-second-content .interior-title {
    top: 4%;
    left: 50%;
    transform: translateX(-50%);
    width: 64%;
  }

  .interior-second-content .interior-background {
    width: 100%;
    height: 100%;
    background-color: rgba(202, 202, 204, 0.9);
  }

  .interior-second-content .interior-img {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70.6%;
  }

  /* ▼products */
  .products {
    background: url(/product/closeup/assets/img/ttb-jdg/sp/products-bg.png) no-repeat center / cover;
  }

  .products-title {
    width: 58.4%;
  }

  .products-img {
    width: 90%;
  }

  .products-link {
    display: block;
    width: 24%;
  }
}
/*=============== ▲PORTRAIT(SP) ===============*/