@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
  
  
  
@import url('https://fonts.googleapis.com/earlyaccess/notosansjapanese.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

.font-noto {
  font-family: 'Noto Sans Japanese';
}

.font-noto-serif {
  font-family: 'Noto Serif JP';
}

.bebas-neue-regular {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-style: normal;
}

.shippori-mincho-b1-regular {
  font-family: 'Shippori Mincho B1', serif;
}

#azl {
/*
  color: #FFFFFF;
*/
  background: none;
  font-family: 'Noto Serif JP', sans-serif;
  overflow-x: hidden;
  font-size: 1rem;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  word-wrap: break-word;
}
#azl:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  background: url("/cmn/img/prd/te-v1r-azl/back-01.webp");
  background-size: clamp(60px, 10vw, 120px) auto;
}
#azl .l-inner {
  max-width: 1200px;
  width: 90%;
  margin: 0 auto;
}




/*-------------------
common
-------------------*/

.mfp-container{
  padding:0;
}


@media only screen and (min-width:1200px) {


}
@media only screen and (max-width:640px) {

}


/*-------------------
mainimg
-------------------*/

#azl #mainimg{
  position:relative;
}
#azl #mainimg .kv_img img {
  max-width: none;
  width: 100%;
  height: auto;
}
#azl #mainimg .mktl{
  position:absolute;
  bottom:clamp(20px, 1.77vw, 34px);
  left:0;
  right:0;
}

#azl #mainimg .kv_tl{
  width: clamp(250px, 63.48958333vw, 1219px);
  margin:0 auto;
  animation: fadeInBottom .5s;
  animation-delay: 1s;
  animation-fill-mode: backwards;
  transition: .8s;
  -webkit-animation: fadeInBottom .5s;
  -webkit-animation-delay: 1s;
  -webkit-animation-fill-mode: backwards;
  -webkit-transition: .8s;
  line-height:1;
}
#azl #mainimg .kv_tl img{
}
#azl #mainimg .copyright {
  width: clamp(220px, 32.8125vw, 630px);
  margin:clamp(1px, 6vw, 116px) auto 0;
}

@keyframes fadeinkvblur{
  from {
    opacity: 0;
    filter:blur(15px);
  }

  to {
    opacity: 1;
    filter:blur(0);
  }
}
@media only screen and (max-width: 640px) {
  #azl #mainimg .copyright {
    margin:10px auto 0;
  }
}

@media only screen and (min-width: 641px) {
  .u-spOnly {
    display: none;
  }
}
@media only screen and (max-width: 640px) {
  .u-pcOnly {
    display: none;
  }
}


/*-------------------
movie
-------------------*/

#azl #movie {
  position:relative;
  background: linear-gradient(to right, rgba(0,74,139,1) 0%,rgba(0,66,114,1) 100%);
}

#azl #movie .mvimg{
  position:relative;
  width:100%;
  max-width:1200px;
  margin:0 auto;
}

#azl #movie .mvbtn{
  position:absolute;
  top:50%;
  left:0;
  right:0;
  width: clamp(80px, 14.75vw, 177px);
  height: clamp(80px, 14.75vw, 177px);
  margin:0 auto;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  display:flex;
  justify-content: center;
  align-items: center;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  pointer-events: all;
  cursor: pointer;
}

#azl #movie .mvcc{
  position:absolute;
  width:100%;
  height:auto;
  margin:0 auto;
  animation:18s linear infinite rotation1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
#azl #movie .mvcc img{
  transition: all 0.3s ease-in-out;
}
@keyframes rotation1{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}
#azl #movie .mvbtn:hover .mvcc img{
  opacity:.8;
  transform: scale(1.2);
}

#azl #movie .mvar{
  width:clamp(22px, 4.5vw, 54px);
  height:auto;
  position:relative;
  margin-left: clamp(2px, .583vw, 7px);
}

#azl #movie .mvar img{
  vertical-align:top;
}

#azl .modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  overflow: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  opacity: 0;
  visibility: hidden;
}
#azl .modal.is-active {
  opacity: 1;
  visibility: visible;
}
#azl .modal .modal-close-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9997;
  opacity: 0.8;
}
#azl .modal .modal-close-btn {
  position: absolute;
  top: 3vw;
  right: 3vw;
  z-index: 9999;
  width: 2.5vw;
  height: 2.5vw;
  background-image: url("/cmn/img/prd/te-v1r-azl/voice_modal_close.webp");
  background-size: 2.5vw;
  background-repeat: no-repeat;
  cursor: pointer;
}

#azl .modal .modal-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  z-index: 9998;
}
#azl .movie-modal .movie-modal-container {
  width: clamp(200px, 80vw, 1000px);;
  aspect-ratio: 16/9;
}

#azl .movie-modal .movie-modal-video {
  width: 100%;
  height: 100%;
  display: none;
}
#azl .movie-modal .movie-modal-video iframe {
  width: 100%;
  height: 100%;
}
#azl .movie-modal .movie-modal-video.is-active {
  display: block;
}

@media (max-width: 768px) {
  #azl .modal .modal-close-btn {
    top: 4vw;
    right: 4vw;
    width: 6vw;
    height: 6vw;
    background-size: 6vw;
  }
}
@media (max-width: 767.98px) {
  #azl .movie-modal .movie-modal-container {
    width: 98vw;
  }
}


@media only screen and (min-width:1200px) {

  #azl #movie .mvbtn:hover{
    opacity:.8;
  }
}

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


}


/*-------------------
abmd
-------------------*/

#azl #abmd{
  text-align:center;
  position:relative;
}





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



}


#azl .sec-frame {
  position: relative;
  padding-top: clamp(.5rem, 12.5vw, 150px);
  padding-bottom: clamp(.5rem, 16.16vw, 194px);
}
#azl .sec-frameInner {
  
}
#azl .sec-frame:before ,
#azl .sec-frame:after ,
#azl .sec-frameInner:before ,
#azl .sec-frameInner:after {
  content: '';
  display: block;
  width: clamp(.5rem, 17.9vw, 215px);
  height: clamp(.5rem, 17.9vw, 215px);
  position: absolute;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
#azl .sec-frame:before {
  background-image: url("/cmn/img/prd/te-v1r-azl/frame-01.webp");
  top: clamp(.5rem, 2.5vw, 30px);
  left: clamp(.5rem, 2.5vw, 30px);
}
#azl .sec-frame:after {
  background-image: url("/cmn/img/prd/te-v1r-azl/frame-02.webp");
  top: clamp(.5rem, 2.5vw, 30px);
  right: clamp(.5rem, 2.5vw, 30px);
}
#azl .sec-frameInner:before {
  background-image: url("/cmn/img/prd/te-v1r-azl/frame-03.webp");
  bottom: clamp(.5rem, 2.5vw, 30px);
  left: clamp(.5rem, 2.5vw, 30px);
}
#azl .sec-frameInner:after {
  background-image: url("/cmn/img/prd/te-v1r-azl/frame-04.webp");
  bottom: clamp(.5rem, 2.5vw, 30px);
  right: clamp(.5rem, 2.5vw, 30px);
}
#azl .sec-frame .l-inner:before ,
#azl .sec-frame .l-inner:after {
  position: absolute;
  content: '';
  width: calc(100% - 648px);
  height: clamp(.5rem, 2.5vw, 30px);
  background-image: url("/cmn/img/prd/te-v1r-azl/frame-line.webp");
  background-position: center;
  background-size: auto 100%;
  background-repeat: repeat-x;
  left: 0;
  right: 0;
  margin: auto;
}
#azl .sec-frame .l-inner:before {
  top: clamp(.5rem, 3.666666667vw, 44px);
}
#azl .sec-frame .l-inner:after {
  bottom: clamp(.5rem, 3.666666667vw, 44px);
}

#azl .sec-frame.sec-frame--white:before {
  background-image: url("/cmn/img/prd/te-v1r-azl/frame2-01.webp");
}
#azl .sec-frame.sec-frame--white:after {
  background-image: url("/cmn/img/prd/te-v1r-azl/frame2-02.webp");
}
#azl .sec-frame.sec-frame--white .sec-frameInner:before {
  background-image: url("/cmn/img/prd/te-v1r-azl/frame2-03.webp");
}
#azl .sec-frame.sec-frame--white .sec-frameInner:after {
  background-image: url("/cmn/img/prd/te-v1r-azl/frame2-04.webp");
}
#azl .sec-frame.sec-frame--white .l-inner:before ,
#azl .sec-frame.sec-frame--white .l-inner:after {
  background-image: url("/cmn/img/prd/te-v1r-azl/frame2-line.webp");
}

@media only screen and (max-width:1200px) {
  #azl .sec-frame .l-inner:before ,
  #azl .sec-frame .l-inner:after {
    width: 52vw;
  }
}



#azl .commentBox {
  border: #452e1a 1px solid;
  font-size: clamp(12px, 2vw, 24px);
  line-height: 2;
  color: #462f1c;
  background: #FFF;
  padding: clamp(15px, 2.5vw, 30px);
  text-align: center;
}
#azl .commentBox h3 {
  width: clamp(200px, 45.66vw, 548px);
  margin: clamp(.5rem, 5vw, 60px) auto clamp(.5rem, 2.5vw, 30px);
}
#azl .commentBox .detail {
  font-size: clamp(12px, 1.666vw, 20px);
  line-height: 1.85;
}
#azl .commentBox h4 {
  font-size: clamp(15px, 2.5vw, 30px);
  line-height: 1.5;
  margin-bottom: clamp(.5rem, 0.833333333vw, 10px);
}
#azl .commentBox .commentBoxInFrame {
  margin-top: clamp(.5rem, 4.166666667vw, 50px);
  font-size: clamp(12px, 1.666vw, 20px);
  line-height: 1.85;
  padding: clamp(15px, 2.5vw, 30px);
  background: #f3f0e5;
}

@media only screen and (max-width:640px) {
  #azl .commentBox {
    text-align: left;
  }
  #azl .commentBox h3 {
  }
  #azl .commentBox h4 {
    text-align: center;
  }
  #azl .commentBox .detail {
  }
  #azl .commentBox .commentBoxInFrame {
  }
}

/*-------------------
about
-------------------*/

#azl #about{
  position:relative;
  text-align:center;
  color: #462f1c;
}
#azl #about h2{
  width: clamp(150px, 32.5vw, 390px);
  margin: 0 auto;
}

#azl #about .abpr{
  width:70%;
  max-width:575px;
  margin: clamp(.5rem, 7.5vw, 90px) auto clamp(.5rem, 4.1666vw, 50px);
  padding: clamp(.5rem, 12vw, 69px) 0;
/*
  padding: 69px 0;
*/
  position: relative;
}
#azl #about .abpr:before{
  content: '';
  display: block;
/*
  width: 473px;
  height: 473px;
*/
  width: clamp(.5rem, 56.26vw, 473px);
  height: clamp(.5rem, 56.26vw, 473px);
  background: url("/cmn/img/prd/te-v1r-azl/about-img-02.webp") no-repeat center;
  background-size: contain;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 0;
  right: 0;
  z-index: 1;
}
#azl #about .abpr img {
  position: relative;
  z-index: 10;
}
#azl .aboutDetail {
  font-size: clamp(13px, 2.666666667vw, 30px);
  line-height: 2;
}
#azl .aboutDetail__txt {
}
#azl .aboutDetail__txt .strong {
  color: #073b62;
  font-weight: 700;
}
#azl .aboutName {
  font-size: clamp(.5rem, 5vw, 60px);
  line-height: 1.2;
  font-weight: 700;
  margin-top: clamp(.5rem, 6.333vw, 76px);
}
#azl .aboutPrice {
  font-size: clamp(.5rem, 5.833333333vw, 70px);
  line-height: 1.2;
  font-weight: 700;
  margin-top: clamp(.5rem, 1vw, 12px);
}
#azl .aboutPrice__tag {
  font-size: 0.5714285714em;
}
#azl .aboutBtn {
  margin: clamp(25px, 4.833333333vw, 58px) auto 0;
  width: clamp(200px, 43.83333333vw, 526px)
}


@media only screen and (min-width:1200px) {

}

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


}




/*-------------------
model
-------------------*/


#azl #model{
  position:relative;
  text-align:center;
  background: linear-gradient(to right, rgba(178,161,125,1) 0%,rgba(207,194,164,1) 50%,rgba(178,161,125,1) 100%);
  color: #462f1b;
}

#azl #model h2{
  width: clamp(191px, 41.41666667vw, 497px);
  margin: 0 auto;
}
#azl #model .basemodelUpper {
  margin: clamp(.5rem, 5vw, 60px) 0 clamp(.5rem, 5.8333vw, 70px);
}
#azl #model .basemodelUpperFrame {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0;
}
#azl #model .basemodelUpper__img {
  width:70%;
  max-width:clamp(.5rem, 43.75vw, 525px);
  padding: 5% 0;
  position: relative;
}
#azl #model .basemodelUpper__img:before{
  content: '';
  display: block;
  width: 84.7619%;
  height: 145.4248%;
  background: url("/cmn/img/prd/te-v1r-azl/base-img-02.webp") no-repeat center;
  background-size: contain;
  position: absolute;
  top: 10.07%;
  bottom: 0;
  margin: auto;
  left: 0;
  right: 11.42%;
  z-index: 1;
}
#azl #model .basemodelUpper__img img {
  position: relative;
  z-index: 10;
}
#azl #model .basemodelUpperInfo {
  margin-left: clamp(.5rem, 4.16vw, 50px);
}
#azl #model .basemodelUpperInfo__name {
  font-size: clamp(.5rem, 5vw, 60px);
  line-height: 1.2;
  font-weight: 700;
  margin-top: clamp(.5rem, 6.333vw, 76px);
  letter-spacing: 0.08em;
  text-align: left;
}
#azl #model .basemodelUpperInfoPrice {
  font-size: clamp(.5rem, 5.833333333vw, 70px);
  line-height: 1.2;
  font-weight: 700;
  margin-top: clamp(.5rem, 1vw, 12px);
  letter-spacing: 0.08em;
}
#azl #model .basemodelUpperInfoPrice__tag {
  font-size: 0.5714285714em;
}


#azl #model .basemodelDetail {
  font-size: clamp(13px, 2vw, 24px);
  line-height: 2;
}
#azl #model .basemodelDetail__txt {
}
#azl #model .basemodelDetail__attention {
  font-size: clamp(12px, 1.666666667vw, 20px);
  line-height: 2;
}
#azl #model .basemodelBtn {
  margin: clamp(25px, 8.916666667vw, 107px) auto 0;
  width: clamp(200px, 43.83333333vw, 526px)
}





@media only screen and (min-width:1200px) {

}

@media only screen and (max-width:640px) {
  #azl #model .basemodelUpper {
    margin: clamp(.5rem, 7.5vw, 90px) auto clamp(20px, 4.1666vw, 50px);
  }
  #azl #model .basemodelUpperFrame {
    display: block;
  }
  #azl #model .basemodelUpper__img {
    width:70%;
    max-width:clamp(.5rem, 70vw, 525px);
    padding: 6% 0;
    margin: 0 auto;
  }
  #azl #model .basemodelUpperInfo {
    margin-left: 0;
    padding: 15px 0 0 0;
  }
  #azl #model .basemodelUpperInfo__name {
    text-align: center;
  }
  #azl #model .basemodelUpperInfoPrice {
  }
  #azl #model .basemodelUpperInfoPrice__tag {
  }
}




/*-------------------
voice
-------------------*/

#azl #voice{
  position:relative;
  text-align:center;
  background: linear-gradient(to right, rgba(0,74,139,1) 0%,rgba(0,66,114,1) 100%);
  color: #FFF;
}
#azl #voice h2{
  width: clamp(226px, 49vw, 588px);
  margin: 0 auto;
}
#azl #voice .voiceIntro {
  font-size: clamp(13px, 2vw, 24px);
  margin-top: clamp(20px, 6.333333333vw, 76px);
}

#azl #voice .md.swiper-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: clamp(.5rem, 6.666666667vw, 80px);
}
#azl #voice .md.swiper-wrapper .swiper-slide {
  margin-right: 0 !important;
  margin-left: 1.46%;
  width: 18.83% !important;
  cursor: pointer;
}
#azl #voice .md.swiper-wrapper .swiper-slide:nth-of-type(5n + 1) {
  margin-left: 0;
}

#azl #voice .vcslidewp {
  max-width: 617px;
  margin: 30px auto 0;
  position: relative;
}
#azl #voice .vcslide {
  overflow: hidden;
  padding: 0 0 100px 0;
}

#azl #voice .bt-voiceList {
  position: absolute;
  width: clamp(1.6rem, 27.71474878%, 171px);
  bottom: 0;
  right: 30.41491086%;
}
#azl #voice .bt-voiceList img {
  transform: translate(0,100px);
}
#azl #voice .bt-sample {
  position: absolute;
  width: clamp(1.6rem, 27.71474878%, 171px);
  bottom: 0;
  right: 1.620745543%;
}
#azl #voice .bt-sample img {
  transform: translate(0,100px);
}
#azl #voice .vcslide .swiper-button-next,
#azl #voice .vcslide .swiper-button-prev {
  position: absolute;
  top: var(--swiper-navigation-top-offset, 48%);
  width: calc(var(--swiper-navigation-size) / 33* 35);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px -(var(--swiper-navigation-size) / 2));
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  outline: none;
}
#azl #voice .vcslide .swiper-button-next {
  right: -67px;
}
#azl #voice .vcslide .swiper-button-prev {
  left: -67px;
}
#azl #voice .js-voice-slider .swiper-slide-active .bt-voiceList {
  opacity:1;
  -webkit-animation: ichi-top 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.1s both;
          animation: ichi-top 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.1s both;
}

#azl #voice .js-voice-slider .swiper-slide-active .bt-sample{
  opacity:1;
  -webkit-animation: sample-bottom 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.2s both;
          animation: sample-bottom 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.2s both;
}


@-webkit-keyframes ichi-top {
  0% {
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes slide-top {
  0% {
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@-webkit-keyframes sample-bottom {
  0% {
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes slide-top {
  0% {
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@media only screen and (max-width:800px) {
  #azl #voice .vcslide .swiper-button-next {
    right: -10px;
  }
  #azl #voice .vcslide .swiper-button-prev {
    left: -10px;
  }
}

@media only screen and (max-width:768px) {
  #azl #voice .md.swiper-wrapper .swiper-slide {
    margin-right: 0 !important;
    margin-left: 2%;
    width: 32% !important;
  }
  #azl #voice .md.swiper-wrapper .swiper-slide:nth-of-type(5n + 1) {
    margin-left: 2%;
  }
  #azl #voice .md.swiper-wrapper .swiper-slide:nth-of-type(3n + 1) {
    margin-left: 0;
  }
  #azl #voice .md.swiper-wrapper .swiper-slide:nth-of-type(n + 4) {
    margin-top: 10px;
  }
}
@media only screen and (max-width:640px) {
  #azl #voice .vcslide {
    padding: 0 0 17vw 0;
  }
  #azl #voice .bt-voiceList img {
    transform: translate(0,15vw);
  }
  #azl #voice .bt-sample img {
    transform: translate(0,15vw);
  }
  #azl #voice .vcslide .swiper-button-next,
  #azl #voice .vcslide .swiper-button-prev {
    top: var(--swiper-navigation-top-offset, 46%);
    width: calc(var(--swiper-navigation-size) / 38* 35);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px -(var(--swiper-navigation-size) / 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color));
    outline: none;
  }
  #azl #voice .vcslide .swiper-button-next {
    right: -10px;
  }
  #azl #voice .vcslide .swiper-button-prev {
    left: -10px;
  }
}
@media only screen and (max-width:500px) {
  #azl #voice .md.swiper-wrapper .swiper-slide {
    margin-right: 0 !important;
    margin-left: 4%;
    width: 48% !important;
  }
  #azl #voice .md.swiper-wrapper .swiper-slide:nth-of-type(5n + 1) {
    margin-left: 4%;
  }
  #azl #voice .md.swiper-wrapper .swiper-slide:nth-of-type(3n + 1) {
    margin-left: 4%;
  }
  #azl #voice .md.swiper-wrapper .swiper-slide:nth-of-type(2n + 1) {
    margin-left: 0;
  }
  #azl #voice .md.swiper-wrapper .swiper-slide:nth-of-type(n + 3) {
    margin-top: 10px;
  }
}


.mfp-zoom-out {
}
.mfp-zoom-out .mfp-with-anim {
    opacity: 0;
    transition: all 0.3s ease-in-out;
    transform: scale(1.3);
}
.mfp-zoom-out.mfp-bg {
    opacity: 0;
    transition: all 0.3s ease-out;
}
.mfp-zoom-out.mfp-ready .mfp-with-anim {
    opacity: 1;
    transform: scale(1);
}
.mfp-zoom-out.mfp-ready.mfp-bg {
    opacity: 0.8;
}
.mfp-zoom-out.mfp-removing .mfp-with-anim {
    transform: scale(1.3);
    opacity: 0;
}
.mfp-zoom-out.mfp-removing.mfp-bg {
    opacity: 0;
}


.voice-index{
  width:100%;
  max-width: 700px;
  margin:0 auto;
  position:relative;
}

.voice-index img{
  max-width:100%;
  margin:0 auto;
}



.voice-index .close-btn{
  position: absolute;
  bottom: clamp(-50px, -7.142857143vw, -30px);
  right: clamp(-50px, -7.142857143vw, -30px);
  z-index: 9999;
  width: clamp(60px, 17.14285714vw, 100px);
  height:  clamp(60px, 17.14285714vw, 100px);
  cursor: pointer;
}

.voice-index .close-btn:after{
  content:'';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("/cmn/img/prd/te-v1r-azl/modal_close.webp");
  background-size: 100%;
  background-repeat: no-repeat;
}


/*@media only screen and (min-width:1200px) {
  .voice-index{
    width:50%;
    margin:0 auto;
    position:relative;
  }

  .voice-index .close-btn{
    bottom: -89px;
    right: -89px;
    width: 178px;
    height: 178px;
  }

  .voice-index .close-btn:after{
    width: 178px;
    height: 178px;
  }

}*/


.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    content: none;
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    content: none;
}




@media only screen and (min-width:1200px) {



}

@media only screen and (max-width:640px) {
  .voice-index .close-btn{
    right: 0;
  }
}

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

  
}



/*-------------------
despck
-------------------*/



/*-------------------
design
-------------------*/

#azl #design{
  position:relative;
  text-align:center;
}

#azl #design h2{
  width: clamp(245px, 53vw, 637px);
  margin: 0 auto;
}

#azl #design .dg-sl-wp{
}

#azl #design .dg-sl-wp-in{
  position:relative;
  padding:112px 0;
  width:100%;
  max-width:617px;
  margin: clamp(.5rem, 6.666vw, 80px) auto clamp(.5rem, 5vw, 60px);
}
#azl #design .dg-sl-wp-in:before {
  background: url("/cmn/img/prd/te-v1r-azl/design-bg.webp") no-repeat center;
  background-size: contain;
/*
  width: 127.5%;
  height: 146.66%;
*/
  width: 612px;
  height: 704px;
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

#azl #design .js-design-slider{
  width:77.79578606%;
  margin:0 auto;
  position: relative;
  z-index: 10;
}


#azl #design .dg-sl-wp-in .swiper-button-next,
#azl #design .dg-sl-wp-in .swiper-button-prev {
  position: absolute;
  top: var(--swiper-navigation-top-offset, 50%);
  width: calc(var(--swiper-navigation-size) / 33* 35);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px -(var(--swiper-navigation-size) / 2));
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  outline: none;
}
#azl #design .dg-sl-wp-in .swiper-button-next {
  right: -67px;
}
#azl #design .dg-sl-wp-in .swiper-button-prev {
  left: -67px;
}
#azl #design .js-design-slider .swiper-slide-active .bt-voiceList {
  opacity:1;
  -webkit-animation: ichi-top 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.1s both;
          animation: ichi-top 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.1s both;
}

#azl #design .js-design-slider .swiper-slide-active .bt-sample{
  opacity:1;
  -webkit-animation: sample-bottom 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.2s both;
          animation: sample-bottom 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.2s both;
}


@media only screen and (min-width:1200px) {

}
@media only screen and (max-width:800px) {
  #azl #design .dg-sl-wp-in .swiper-button-next {
    right: -10px;
  }
  #azl #design .dg-sl-wp-in .swiper-button-prev {
    left: -10px;
  }
}
@media only screen and (max-width:691px) {
  #azl #design .dg-sl-wp-in{
    padding:16.2vw 0;
  }
  #azl #design .dg-sl-wp-in:before {
  /*
    width: 127.5%;
    height: 146.66%;
  */
    width: 88.56vw;
    height: 101.88vw;
  }
}
@media only screen and (max-width:640px) {
  #azl #design .dg-sl-wp-in .swiper-button-next,
  #azl #design .dg-sl-wp-in .swiper-button-prev {
    position: absolute;
    top: var(--swiper-navigation-top-offset, 50%);
    width: calc(var(--swiper-navigation-size) / 38* 35);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px -(var(--swiper-navigation-size) / 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color));
    outline: none;
  }

}



/*-------------------
package
-------------------*/
#azl #package{
  position:relative;
  text-align:center;
  margin: clamp(.5rem, 13.33vw, 160px) 0 0 0;
}


#azl #package h2{
  width: clamp(273px, 59.33vw, 712px);
  margin: 0 auto clamp(40px, 6.66vw, 80px);
}

#azl #package .pk-sl-wp{
  width: clamp(280px, 66vw, 792px);
  margin:0 auto clamp(30px, 3.33vw, 40px);
  position:relative;
  padding:0;
}





@media only screen and (min-width:1200px) {


  
}

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



}




/*-------------------
tuning
-------------------*/

#azl #tuning{
  position:relative;
  margin: clamp(.5rem, 13.33vw, 160px) 0 0 0;
  text-align:center;
  
}

#azl #tuning h2{
  width: clamp(253px, 54.83vw, 658px);
  margin: 0 auto;
}
#azl #tuning .commentBox {
  margin-top: clamp(40px, 6.91666vw, 83px);;
}


@media only screen and (min-width:1200px) {
}



/*-------------------
gaming
-------------------*/
#azl #gaming{
  position:relative;
  text-align:center;
  background: linear-gradient(to right, rgba(178,161,125,1) 0%,rgba(207,194,164,1) 50%,rgba(178,161,125,1) 100%);
  color: #462f1b;
}

#azl #gaming h2{
  width: clamp(223px, 48.41667vw, 581px);
  margin: 0 auto clamp(.5rem, 8.333vw, 100px);;
}
#azl #gaming .gamingmode__txt {
  font-size: clamp(13px, 2vw, 24px);
  line-height: 2;
}
#azl #gaming .gamingmode__caution {
  font-size: clamp(12px, 1.8333vw, 22px);
  line-height: 2;
}
#azl #gaming .gamingmode__img {
  width: clamp(300px, 55.25vw, 663px);
  margin: clamp(.5rem, 5vw, 60px) auto clamp(.5rem, 9vw, 108px);
}


/*-------------------
footer
-------------------*/

#azl #footer {
  text-align: center;
  position: relative;
}


#azl #footer .copyright {
  font-size:clamp(9px, 1.5vw, 18px);
  font-weight:bold;
  letter-spacing:0.01em;
  color:#231815;

}

@media only screen and (min-width:1200px) {

}



/*------------
animetion
------------*/

.mask-bg {
  color:transparent;
  display: inline-block;
  overflow: hidden;
  position: relative;
  transition: color 0ms 450ms;
}
.mask-bg::after {
  background: #5a1e14;
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transform: translate(-101%, 0);
}
 
.mask-bg.scrollin {
  color:#5a1e14;
}
.mask-bg.scrollin::after {
  animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.170, 1);
}

.mask-bgg {
  color:transparent;
  display: inline-block;
  overflow: hidden;
  position: relative;
  transition: color 0ms 450ms;
}
.mask-bgg::after {
  background: #FFFFFF;
  bottom: 0;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(-101%, 0);
}
 
.mask-bgg.scrollin {
  color:#FFFFFF;
}
.mask-bgg.scrollin::after {
  animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.170, 1);

}
 
@keyframes mask-bg {
  0% {
    transform: translate(-101%, 0)
  }
  40%, 60% {
    transform: translate(0, 0%)
  }
  100% {
    transform: translate(100%, 0);
  }
}




.fadein{
  opacity:0;
}

.fadein.scrollin{
  animation-name:fadeinAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  animation-delay:.5s;
}

@keyframes fadeinAnime{
  from {
    opacity: 0;
    transform: scale(1.1);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}




.fadeUp{
  opacity:0;
}

.fadeUp.scrollin{
  animation-name:fadeUpAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}



@keyframes fadeDnAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}



.fadeinp {
  opacity: 0;
  
}
.fadeinp.scrollin {
  animation-name:fadeinpAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  animation-timing-function: easeInOutBack;

}

@keyframes fadeinpAnime{
  from {
    opacity: 0;
    transform: scale(1.1);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}


.fadeinblur{
  opacity:0;
}

.fadeinblur.scrollin{
  animation-name:fadeinblurAnime;
  animation-duration:.5s;
  animation-delay:1s;
  animation-fill-mode:forwards;
  animation-timing-function: cubic-bezier(.29,1.61,.9,.46);
  transition: .8s;
}

@keyframes fadeinblurAnime{
  from {
    opacity: 0;
    filter:blur(15px);
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    filter:blur(0);
    transform: scale(1);
  }
}


.fadeinleft {
  opacity: 0;
  
}
.fadeinleft.scrollin {
  animation-name:fadeInLeft;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  animation-timing-function: easeInOutBack;

}





@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@-webkit-keyframes fadeInTop {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInTop {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeInBottom {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInBottom {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}