@charset "UTF-8";

/* common */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho&display=swap');

:root {
  --gold: linear-gradient(45deg, #f2d379, #dcb355);
  --yellow: #F2D379;
  --black: #2A2626;

  --txt50: clamp(35px, 3.472vw, 50px);
  --txt40: clamp(28px, 2.77vw, 40px);
  --txt25: clamp(20px, 1.736vw, 25px);
  --txt19: clamp(17px, 1.319vw, 19px);
  --txt16: clamp(15px, 1.11vw, 16px);
  --txt15: clamp(14px, 1.04vw, 15px);
  --txt13: 13px;

  --m-200: 13.89%;
  --m-100: 6.941%;
  --m-150: 10.42%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Shippori Mincho", serif;
  line-height: 200%;
  letter-spacing: .05rem;
  transition: .5s;
  font-size: var(--txt16);
}

html {
  background: url(./img/background.jpg) !important;
  background-size: 100% auto !important;
  background-repeat: repeat !important;
  background-position: center !important;
  font-weight: 400;
  scroll-behavior: smooth;
}

body {
  color: #fff;
  overflow-x: hidden;
}

.gold {
  background: var(--gold);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  width: fit-content;
}

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

a {
  text-decoration: none;
  display: block;
}

ul Li,
ol li {
  list-style: none;
}

.flex {
  display: flex;
}

.column {
  display: flex;
  flex-direction: column;
}

.sp-br {
  display: none;
}

/* --- テキストサイズ指定 --- */
.font13{
  font-size: var(--txt13);
}
.font15 {
  font-size: var(--txt15);
}

.font16 {
  font-size: var(--txt16);
}

.font19 {
  font-size: var(--txt19);
}

.font25 {
  font-size: var(--txt25);
}

.font40 {
  font-size: var(--txt40);
}

.font50 {
  font-size: var(--txt50);
}

/* --- 余白指定 --- */
.m-200 {
  padding: 0 var(--m-200);
}

.m-tb-150 {
  padding-top: var(--m-150);
  padding-bottom: var(--m-150);
}

.m-top-100 {
  padding-top: var(--m-100);
}

.m-bottom-100 {
  padding-bottom: var(--m-100);
}

@media screen and (max-width: 769px) {
  .sp-br {
    display: block;
  }
}

@media screen and (max-width: 500px) {
  :root {
    --m-200: 9%;

    --txt40: clamp(19px, 2.77vw, 40px);
    --txt50: clamp(30px, 3.472vw, 50px);
    --txt19: clamp(16px, 1.319vw, 19px);
  }
}

@media screen and (max-width: 400px) {
  :root {
    --txt50: clamp(25px, 3.472vw, 50px);
    --txt19: clamp(15px, 1.319vw, 19px);
  }

  .sp-non {
    display: none;
  }
}

/* アニメーション ============================== */
.ziwa {
  transition: 1.5s ease-in-out;
  filter: blur(10px);
  opacity: 0;
}

.ziwa-hi {
  transition: 1s ease-in-out;
  filter: blur(5px);
  opacity: 0;
}

.ziwa.in-view,
.ziwa-hi.in-view {
  filter: blur(0);
  opacity: 1;
}

.fade {
  transform: translateY(50px);
  opacity: 0;
  transition: 2s ease-in-out;
}

.fade.in-view {
  transform: translateY(0);
  opacity: 1;
}

/* 追従 ============================== */
.cta-button--w {
  position: fixed;
  right: 0;
  top: 35%;
  width: fit-content;
  z-index: 2;
}

.cta-button--w ul {
  gap: 1rem;
}

.cta-button--w li{
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
.cta-button--w li a {
  padding: 1.2rem .7rem;
  border: var(--yellow) solid 1px;
  border-right: 0;
  background: #628080;
}

.cta-button--w li a:hover {
  background: #475C5D;
}

.cta-button--w li a span {
  /* -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl; */
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: .3rem;
}

@media screen and (max-width: 500px) {
  .cta-button--w {
    bottom: 0;
    top: unset;
    margin: 0 auto;
    left: 0;
    width: 100%;
  }

  .cta-button--w ul {
    flex-direction: row;
    gap: 0;
  }

  .cta-button--w li {
    width: 50%;
  }

  .cta-button--w li:first-child a {
    border-right: none;
  }

  .cta-button--w li a {
    padding: .5rem 1rem;
  }
  .cta-button--w li{
    -ms-writing-mode: unset;
    writing-mode: unset;
  }

  .cta-button--w li a span {
    /* -ms-writing-mode: unset;
    writing-mode: unset; */
    letter-spacing: inherit;
    width: 100%;
  }
}

/* パララックス画像 ============================== */
#noah, #voxy{
  scroll-margin-top: 20px;
}
.p--img {
  aspect-ratio: 1051 / 399;
  width: 80%;
  height: auto;
  overflow: hidden;
}

.alphard--img {
  background: url(./img/noah-p.jpg) no-repeat;
  background-size: 100% auto;
  background-position-x: center;
  background-position-y: var(--parallax-Y, 0%);
}

.alphard--imgArea {
  position: relative;
}

.alphard--imgArea::after {
  content: "";
  background: url(img/alphard_woman.png) no-repeat;
  background-position: center;
  background-size: contain;
  width: 18.3%;
  height: 100%;
  position: absolute;
  top: 40px;
  right: 7vw;
}

.vellfire--imgArea {
  position: relative;
}

.vellfire--imgArea::after {
  content: "";
  background: url(img/vellfire_woman.png) no-repeat;
  background-position: center;
  background-size: contain;
  width: 17.6%;
  height: 100%;
  position: absolute;
  top: 45px;
  left: 3vw;
}

.vellfire--img {
  background: url(./img/voxy-p.jpg) no-repeat;
  background-size: 100% auto;
  background-position-x: center;
  background-position-y: var(--parallax-Y, 0%);
  margin: 0 0 0 auto;
}

.carType-alphard,
.carType-vellfire{
  aspect-ratio: 1051 / 20;
  width: 80%;
  height: auto;
  padding-left: 1rem;
  line-height: 120%;
}

.carType-vellfire{
  margin: 0 0 0 auto;
  padding-left: 0;
  padding-right: 1rem;
}

@media screen and (max-width: 500px) {
  .p--img,
  .carType-alphard,
  .carType-vellfire {
    width: 83%;
  }

  .carType-alphard,
  .carType-vellfire{
    font-size: 11px;
    line-height: 1.2;
    opacity: .5;
  }

  .alphard--imgArea::after {
    top: -35px;
    right: 0;
  }

  .vellfire--imgArea::after {
    top: -45px;
    left: 0;
  }

}

/* MV ============================== */

.mv--w .img--w {
  position: relative;
}

.mv--w .img--w .txt-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.mv--w .img--w picture {
  display: block;
}

.mv--w .img--w picture img {
  display: block;
  width: 100%;
  height: auto;
}

.carType {
  font-size: 11px;
}

.carType-mv {
  /* position: absolute;
  bottom: 0;
  right: 0; */
  padding: 0 10px;
}

@media screen and (max-width: 500px) {
  .carType {
    /* font-size: 8px; */
    font-size: 11px;
    line-height: 1.4;
    opacity: .5;
  }

  .carType-mv {
    padding: 0 5px;
  }
}

/* よさこいやっさん ============================== */
.collaborationMovie .column{
  gap: 2rem;
}
.collaborationMovie h2 {
  position: relative;
  margin: 0 auto;
}
.collaborationMovie h2 span{
  line-height: 150%;
}

.collaborationMovie h2::before {
  content: "";
  background: url(img/h-txt_bg.svg) no-repeat;
  background-position: center;
  background-size: contain;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -11vw;
  z-index: -1;
}

.movie {
  /* text-align: center; */
  position: relative;
  /* line-height: 1; */
  width: 80%;
  margin: 0 auto;
}

.movie iframe {
  /* width: 800px;
  height: 450px; */
  aspect-ratio: 800 / 450;
  width: 100%;
  height: auto;
  border: 1px solid var(--yellow);
}

.movie::before {
  content: "";
  background: url(img/YT_left.png) no-repeat;
  /* background-position: center;
  background-size: contain;
  width: 17.1%;
  height: 100%; */
  position: absolute;
  /* top: 75px; */
  bottom: var(--txt15);
  left: -17%;
  aspect-ratio: 177 / 316;
  width: 20%;
  height: auto;
  background-size: 100% 100%;
}

.movie::after {
  content: "";
  background: url(img/YT_right.png) no-repeat;
  /* background-position: center;
  background-size: contain;
  width: 13.2%;
  height: 100%; */
  position: absolute;
  /* top: 70px; */
  /* right: 1vw; */
  right: -15%;
  bottom: var(--txt15);
  aspect-ratio: 140 / 301;
  width: 16%;
  height: auto;
  background-size: 100% 100%;
}
.movie p{
  text-align: right;
  margin: 0 auto;
  line-height: 100%;
}
.youtube {
  display: inline-block;
  color: #fff;
  line-height: 100%;
  border-bottom: 1px #fff solid;
}
.youtube:hover{
  opacity: .5;
}

@media screen and (max-width: 780px){
  .collaborationMovie .column{
    gap: 1rem;
  }
  .movie{
    width: 90%;
  }
}
@media screen and (max-width: 500px) {
  .carType {
    /* font-size: 8px; */
    text-align: justify;
  }

  .carType-mv {
    padding: 0 5px;
  }

  .movie{
    width: 100%;
  }

  .collaborationMovie h2::before{
    background-position: right;
  }

  .movie iframe {
    width: 100%;
    height: auto;
  }

  .movie::before {
    /* width: 20%; */
    width: 18%;
    /* position: absolute; */
    /* top: 15px; */
    bottom: 2rem;
    left: -9vw;
  }

  .movie::after {
    /* width: 18%; */
    width: 15%;
    /* position: absolute; */
    /* top: 13px; */
    bottom: 2rem;
    right: -9vw;
  }

  .movie p,
  .youtube {
    /* font-size: 8px; */
    font-size: 13px;
    text-align: left;
  }

  .collaborationMovie h2::before {
    left: -27vw;
  }
}


/* 導入 ============================== */
.intro--w {
  gap: 3rem;
  /* overflow: hidden; */
  position: relative;
}

.intro--w::before {
  content: "";
  background: url(./img/bg-maru.svg) no-repeat;
  aspect-ratio: 665 / 657;
  background-size: 100% 100%;
  width: 52%;
  height: auto;
  position: absolute;
  top: -30%;
  left: -5%;
  opacity: .4;
  z-index: -1;
}

.intro--w h1 {
  text-align: center;
  line-height: 150%;
}

.intro--w p {
  gap: 1.5rem;
}

.intro--w p span {
  text-align: center;
}
.intro--w .link--w{
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}
.intro--w .link--w a{
  padding: 1rem 1.5rem;
  border: 1px solid var(--yellow);
  background: #628080;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.intro--w .link--w a::after{
  content: "";
  display: block;
  width: .5rem;
  height: .5rem;
  border-bottom: 1px solid var(--yellow);
  border-right: 1px solid var(--yellow);
  transform: rotate(45deg);
}
.intro--w .link--w a:hover{
  background: #475C5D;
}

@media screen and (max-width: 780px){
  .intro--w::before{
    top: -17%;
  }
}
@media screen and (max-width: 500px) {
  .intro--w::before {
    width: 70%;
  }
}

/* ノア・ヴォクシー ============================== */

table{
  width: 100%;
  border-collapse: collapse;
}
table th{
  background: #475C5D;
  padding: 20px 15px;
}
table td{
  background: rgba(255,255,255,0.5);
  padding: 20px 15px;
  color: var(--black);
  text-align: right;
}
table.column2 th,
table.column2 td{
  width: 50%;
}
table tr:not(:last-child) {
  border-bottom: #676767 1px solid;
}

table.column4 th{
  width: 20%;
  text-align: left;
}
table.column4 td{
  width: 25%;
}
.sub-table--w .column2 th{
  text-align: left;
}

.grade--w{
  gap: 2rem;
}
.grade--w h2{
  text-align: center;
}
.plan--w{
  gap: 2rem;
}
.plan--w h2{
  margin: 0 auto;
}
.plan--w h3,
.grade--w h3{
  margin-bottom: .5rem;
  text-align: center;
}
.plan--w p{
  text-align: center;
}

.alphard-txt--w {
  gap: 3rem;
}

.alphard-txt--w h2,
.alphard-txt--w p {
  text-align: center;
  margin: 0 auto;
}

.alphard-txt--w h2 {
  line-height: 150%;
}

.alphard-content--w h2{
  text-align: center;
}
.alphard-content--w ul.column {
  gap: 5rem;
}

.alphard-content--w li {
  align-items: center;
  gap: 2rem;
}

.alphard-content--w .dot li {
  list-style: disc;
  margin-left: 1.5rem;
}

.alphard-content--w li:nth-of-type(2n) {
  flex-direction: row-reverse;
}

.alphard-content--w .img--w {
  flex: 5;
}

.alphard-content--w .txt--w {
  gap: 1.5rem;
  flex: 4;
}

.alphard-content--w .txt--w .ttl {
  align-items: center;
  gap: .5rem;
}

.alphard-content--w .txt--w .ttl::after {
  content: "";
  height: 1px;
  width: stretch;
  background: #fff;
  display: inline-block;
}

.alphard-content--w .txt--w h3 {
  white-space: nowrap;
}

.amount--w {
  border: var(--yellow) 1px solid;
  padding: 2.5rem;
  margin-top: 5rem;
  /* gap: 1rem; */
}

.amount--w h2,
.amount--w p {
  text-align: center;
}

.amount--w .gold {
  margin: 0 auto;
}

.amount--w .amount {
  align-items: baseline;
  gap: 5px;
}

.amount--w .amount span {
  line-height: 150%;
}


@media screen and (max-width: 769px) {

  .alphard-content--w li,
  .alphard-content--w li:nth-of-type(2n) {
    flex-direction: column;
  }

  .alphard-content--w .txt--w {
    width: 100%;
  }

  .alphard-content--w .amount--w h2 {
    line-height: 150%;
  }
}

@media screen and (max-width: 500px) {
  table.column4 tr{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .sub-table--w .column4 tr{
    border: none;
  }
  table.column4 th,
  table.column4 td{
    width: 100%;
    border-bottom: 1px solid #676767;
  }
  .alphard-content--w .amount--w {
    padding: 1.5rem 1rem;
  }

  .carType-alphard {
    /* margin-top: 20px; */
  }
  .carType.carType-alphard,
  .carType.carType-vellfire{
    font-size: 11px;
  }
}

/* タブ切り替え ============================== */
.tab__content {
  display: none;
  padding-top: calc(var(--m-100) / 2);
}
.tab__content.is-active {
  display: block;
}
.tab--w{
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.tab--w .tab__btn{
  padding: 1rem;
  background: #628080;
  border: var(--yellow) solid 1px;
  color: #fff;
  cursor: pointer;
}
.tab--w .tab__btn.is-active{
  background: #475C5D;
  color: var(--yellow);
}

@media screen and (max-width: 500px){
  .tab--w{
    grid-template-columns: 1fr;
  }
}

/* CTAコンテンツ ============================== */
.cta--w .column {
  gap: 2rem;
}

.cta--w .m-200 {
  background: #475C5D;
}

.cta--w h2 {
  line-height: 150%;
  text-align: center;
}

.cta--w .link--w {
  justify-content: space-between;
}

.cta--w p {
  text-align: center;
}

.cta--w .link--w,
.cta--w .img-flex--w {
  gap: 2rem;
}

.cta--w a {
  border: 1px solid var(--yellow);
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
}

.cta--w a::after {
  content: "";
  width: .5rem;
  height: .5rem;
  display: block;
  border-right: 1px solid var(--yellow);
  border-bottom: 1px solid var(--yellow);
  transform: rotate(-45deg);
  transition: .5s;
}

.cta--w a:hover {
  background: #628080;
}

@media screen and (max-width: 500px) {

  .cta--w .link--w,
  .cta--w .img-flex--w {
    flex-direction: column;
  }
}