@charset "UTF-8";

body {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Meiryo", sans-serif;
  font-size: 1.6rem;
}

@media print, screen and (max-width: 768px) {
  body {
    font-size: 1rem;
  }
}

:root {
  --color_cream: #f9f2d0;
}

/*=====================================================================================================================*/
.fade-zero {
  opacity: 0;
  transition: .6s;
  visibility: hidden
}

.gal01 .fade-zero.go {
  opacity: 1;
  transform: translateY(0) translateX(0);
  visibility: visible
}

.fade {
  opacity: 0;
  transition: .8s;
  visibility: hidden
}

.fade.go {
  opacity: 1;
  transform: translateY(0) translateX(0);
  visibility: visible
}

.fade-up {
  opacity: 0;
  transition: .8s;
  visibility: hidden;
  transform: translateY(50px)
}

.fade-up.go {
  opacity: 1;
  transform: translateY(0) translateX(0);
  visibility: visible
}

@media print, screen and (min-width: 768px) {
  .fade-up {
    transform: translateY(100px)
  }
}

.fade-up_gal {
  opacity: 0;
  transition: .3s;
  visibility: hidden;
  transform: translateY(20px)
}

.fade-up_gal.gogo {
  opacity: 1;
  transform: translateY(0) translateX(0);
  visibility: visible;
}

.fade-down {
  opacity: 0;
  transition: .8s;
  visibility: hidden;
  transform: translateY(-50px)
}

.fade-down.go {
  opacity: 1;
  transform: translateY(0) translateX(0);
  visibility: visible
}

@media print, screen and (min-width: 768px) {
  .fade-down {
    transform: translateY(-100px)
  }
}

.fade-down_gal {
  opacity: 0;
  transition: .8s;
  visibility: hidden;
  transform: translateY(-50px)
}

.fade-down_gal.gogo {
  opacity: 1;
  transform: translateY(0) translateX(0);
  visibility: visible
}

@media print, screen and (min-width: 768px) {
  .fade-down_gal {
    transform: translateY(-100px)
  }
}

.fade-left {
  opacity: 0;
  transition: .8s;
  visibility: hidden;
  transform: translateX(-50px)
}

.fade-left.go {
  opacity: 1;
  transform: translateY(0) translateX(0);
  visibility: visible
}

@media print, screen and (min-width: 768px) {
  .fade-left {
    transform: translateX(-100px)
  }
}

.fade-left_gal {
  opacity: 0;
  transition: .8s;
  visibility: hidden;
  transform: translateX(-50px)
}

.fade-left_gal.gogo {
  opacity: 1;
  transform: translateY(0) translateX(0);
  visibility: visible
}

@media print, screen and (min-width: 768px) {
  .fade-left_gal {
    transform: translateX(-100px)
  }
}

.fade-right {
  opacity: 0;
  transition: .8s;
  visibility: hidden;
  transform: translateX(50px)
}

.fade-right.go {
  opacity: 1;
  transform: translateY(0) translateX(0);
  visibility: visible
}

@media print, screen and (min-width: 768px) {
  .fade-right {
    transform: translateX(100px)
  }
}

.fade-right_gal {
  opacity: 0;
  transition: .8s;
  visibility: hidden;
  transform: translateX(50px)
}

.fade-right_gal.gogo {
  opacity: 1;
  transform: translateY(0) translateX(0);
  visibility: visible
}

@media print, screen and (min-width: 768px) {
  .fade-right_gal {
    transform: translateX(100px)
  }
}

.fade-top--right {
  opacity: 0;
  transition: .8s;
  visibility: hidden;
  transform: translateY(-20px) translateX(20px)
}

.fade-top--right.go {
  opacity: 1;
  transform: translateY(0) translateX(0);
  visibility: visible
}

@media print, screen and (min-width: 768px) {
  .fade-top--right {
    transform: translateY(-100px) translateX(100px)
  }
}

.fade-top--left {
  opacity: 0;
  transition: .8s;
  visibility: hidden;
  transform: translateY(-20px) translateX(-20px)
}

.fade-top--left.go {
  opacity: 1;
  transform: translateY(0) translateX(0);
  visibility: visible
}

@media print, screen and (min-width: 768px) {
  .fade-top--left {
    transform: translateY(-100px) translateX(-100px)
  }
}

.fade-bottom--right {
  opacity: 0;
  transition: .6s;
  visibility: hidden;
  transform: translateY(20px) translateX(20px)
}

.fade-bottom--right.go {
  opacity: 1;
  transform: translateY(0) translateX(0);
  visibility: visible
}

@media print, screen and (min-width: 768px) {
  .fade-bottom--right {
    transform: translateY(100px) translateX(100px)
  }
}

.fade-bottom--left {
  opacity: 0;
  transition: .8s;
  visibility: hidden;
  transform: translateY(20px) translateX(-20px)
}

.fade-bottom--left.go {
  opacity: 1;
  transform: translateY(0) translateX(0);
  visibility: visible
}

@media print, screen and (min-width: 768px) {
  .fade-bottom--left {
    transform: translateY(100px) translateX(-100px)
  }
}

.kaiten {
  animation: rotateAnimation 30s linear infinite;
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.marionette-landing {
  opacity: 0;
}

.marionette-landing.gogo {
  opacity: 1;
  animation: soft-landing 2.8s cubic-bezier(0.05, 0.9, 0.1, 1) forwards;
}

@keyframes soft-landing {
  0% {
    opacity: 0;
    transform: translateY(-150px) scale(0.98);
    /* わずかに縮小させておく */
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    /* 最終着地 */
  }
}

.time-early {
  transition: .6s
}

.time-01 {
  transition-delay: .1s
}

.time-03 {
  transition-delay: .3s
}

.time-05 {
  transition-delay: .5s
}

.time-08 {
  transition-delay: .8s
}

.time-10 {
  transition-delay: 1s
}

.time-15 {
  transition-delay: 1.5s
}

.time-20 {
  transition-delay: 2s
}

.time-25 {
  transition-delay: 2.5s
}

.time-30 {
  transition-delay: 3s
}

@-webkit-keyframes poyon {
  0% {
    transform: scale(1, 1);
  }

  25% {
    transform: scale(1.2, 1.2);
  }

  50% {
    transform: scale(1, 1);
  }

  75% {
    transform: scale(1.1, 1.1);
  }

  100% {
    transform: scale(1, 1);
  }
}

@keyframes poyon {
  0% {
    transform: scale(1, 1);
  }

  25% {
    transform: scale(1.2, 1.2);
  }

  50% {
    transform: scale(1, 1);
  }

  75% {
    transform: scale(1.1, 1.1);
  }

  100% {
    transform: scale(1, 1);
  }
}

.poyon {
  opacity: 0;
  transition: 1.2s;
  visibility: hidden;
}

.poyon.go {
  opacity: 1;
  animation: poyon 0.5s alternate;
  visibility: visible;
}

@keyframes poyon {
  0% {
    transform: scale(1, 1);
  }

  25% {
    transform: scale(1.2, 1.2);
  }

  50% {
    transform: scale(1, 1);
  }

  75% {
    transform: scale(1.1, 1.1);
  }

  100% {
    transform: scale(1, 1);
  }
}

/* .fade-right {
  opacity: 0;
  transition: .8s;
  visibility: hidden;
  transform: translateX(50px)
}

.fade-right.go {
  opacity: 1;
  transform: translateY(0) translateX(0);
  visibility: visible
} */
.vibration-fade-left {
  visibility: hidden;
  transform: translateX(-200px);
}

.vibration-fade-left.go {
  animation: leftFadeVibrate 0.8s ease-out forwards;
  visibility: visible;
}

@keyframes leftFadeVibrate {
  0% {
    opacity: 0;
    transform: translateX(-200px) scale(0.8);
  }

  /* 30%で最高速度になり、元の位置を一気に通り過ぎる */
  30% {
    opacity: 1;
    transform: translateX(25px) scale(1);
  }

  /* 45%で逆方向に少しだけ戻る */
  45% {
    transform: translateX(-5px);
  }

  /* 60%の段階で完全に停止（後半は静止させて勢いを際立たせる） */
  60%, 100% {
    transform: translateX(0);
  }
}

.vibration-fade-right {
  visibility: hidden;
  transform: translateX(200px);
}

.vibration-fade-right.go {
  animation: rightFadeVibrate 0.8s ease-out forwards;
  visibility: visible;
}

@keyframes rightFadeVibrate {
  0% {
    opacity: 0;
    transform: translateX(200px) scale(0.8);
  }

  /* 30%で最高速度になり、元の位置を一気に通り過ぎる */
  30% {
    opacity: 1;
    transform: translateX(-25px) scale(1);
  }

  /* 45%で逆方向に少しだけ戻る */
  45% {
    transform: translateX(5px);
  }

  /* 60%の段階で完全に停止（後半は静止させて勢いを際立たせる） */
  60%, 100% {
    transform: translateX(0);
  }
}

.vibration-fade-up {
  visibility: hidden;
  transform: translateY(200px);
}

.vibration-fade-up.go {
  animation: upFadeVibrate 0.8s ease-out forwards;
  visibility: visible;
}

@keyframes upFadeVibrate {
  0% {
    opacity: 0;
    transform: translateY(200px) scale(0.8);
  }

  40% {
    opacity: 1;
    transform: scale(1);
  }

  55% {
    transform: translateY(-10px);
  }

  70% {
    transform: translateY(10px);
  }

  85% {
    transform: translateY(-5px);
  }

  100% {
    transform: translateY(0);
  }
}

.vibration-fade-down {
  visibility: hidden;
  transform: translateY(-200px);
}

.vibration-fade-down.go {
  animation: downFadeVibrate 0.8s ease-out forwards;
  visibility: visible;
}

@keyframes downFadeVibrate {
  0% {
    opacity: 0;
    transform: translateY(-200px) scale(0.8);
  }

  40% {
    opacity: 1;
    transform: scale(1);
  }

  55% {
    transform: translateY(10px);
  }

  70% {
    transform: translateY(-10px);
  }

  85% {
    transform: translateY(5px);
  }

  100% {
    transform: translateY(0);
  }
}

/*=====================================================================================================================*/
#loading {
  font-family: "Quantico", sans-serif;
  font-weight: 400;
  font-style: normal;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background-color: var(--color_cream);
  ;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.loading_gif {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loading_inner {
  width: 100vw;
  height: 100vh;
  background-color: #17181a;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: circle(0%);
}

.loading_inner.go {
  animation: showCircle 4.2s forwards;
}

@keyframes showCircle {
  0% {
    clip-path: circle(0% at 50% 50%);
  }

  20% {
    clip-path: circle(15% at 50% 50%);
    /* 大きくなる */
  }

  40% {
    clip-path: circle(5% at 50% 50%);
    /* 小さくなる */
  }

  60% {
    clip-path: circle(40% at 50% 50%);
    /* 再び大きくなる */
  }

  80% {
    clip-path: circle(10% at 50% 50%);
    /* 100%直前：一度きゅっと小さくなる */
  }

  /* --- 80%〜100%: 読み込み完了（中心から一気に拡大） --- */
  85% {
    clip-path: circle(0% at 50% 50%);
    /* 完全に一瞬閉じる（溜めの演出） */
  }

  100% {
    clip-path: circle(150% at 50% 50%);
    /* 画面全体を覆うまで拡大 */
  }
}

#loading_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#loading_img {
  width: 1200px;
  height: auto;
}

@media print, screen and (max-width: 767px) {
  #loading {
    width: 100%;
    height: auto;
  }

  #loading_logo {
    width: 100%;
    height: auto;
  }

  #loading_img {
    width: 100%;
  }
}

.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1.2s;
  animation-delay: 1.2s;
  animation-fill-mode: forwards;
  opacity: 1;
}

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

  to {
    opacity: 0;
    transform: translateY(-100px);
  }
}

#mv-section {
  background-color: var(--color_cream);
  text-align: center;
  max-height: 1200px;
}

.img-fit_op {
  width: auto;
  height: 100vh;
}

@media screen and (min-width: 1200px) {
  #mv-section {
    min-height: 1200px;
    max-height: 1200px;
  }
}

@media print, screen and (max-width: 768px) {
  #mv-section {
    width: 100%;
    height: auto;
    max-height: 350px;
    padding: 20px 10px 0;
  }

  .img-fit {
    width: 100%;
    height: auto;
  }
}

#mv_wrapper {
  background-color: var(--color_cream);
  ;
  position: relative;
  width: 100vw;
  height: auto;
  /*  min-height: 1200px;*/
  padding-top: 20px;
}

@media print, screen and (max-width: 767px) {
  #mv_wrapper {
    width: auto;
    min-height: 350px;
    padding-top: 0;
  }
}

#mv_inner {
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

.mv_anime {
  position: absolute;
}

/* 追加分トライアンドエラー */
@media screen and (max-height: 800px) {
  #mv-section {
    min-height: 900px;
  }

  #mv_inner {
    max-width: 900px;
  }

  #mv-section img {
    height: 900px;
    width: auto;
  }

  #intoro-text {
    padding: 260px 0;
  }
}

@media print, screen and (max-width: 767px) {
  #mv_inner {
    max-width: auto;
  }

  #mv-section {
    min-height: auto;
  }

  #mv-section img {
    height: auto;
    width: 100%;
  }
}

.galgal {
  opacity: 0;
  visibility: hidden;
  transform: scale(0);
}

.galgal.gogo {
  opacity: 0;
  visibility: visible;
  animation: zuzuzun 1.1s ease-out forwards;
}

@keyframes zuzuzun {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  /* 30%時点で2.4倍まで大爆発 */
  30% {
    opacity: 0.3;
    transform: scale(0.5);
  }

  /* ここから早めのテンポで細かく往復（余韻） */
  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }

  65% {
    opacity: 0.8;
    transform: scale(1.15);
  }

  80% {
    opacity: 1;
    transform: scale(0.95);
  }

  90% {
    opacity: 1;
    transform: scale(1.02);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

#bg_logo {
  z-index: 9;
}

#bg01 {
  z-index: 5;
}

#bg02 {
  z-index: 6;
}

#bg03 {
  z-index: 7;
}

#bg04 {
  z-index: 8;
}

#bg05 {
  z-index: 6;
}

#bgtv {
  z-index: 5;
}

#bg06 {
  z-index: 5;
}

#bg07 {
  z-index: 4;
}

#bg08 {
  z-index: 3;
}

#bg09 {
  z-index: 4;
}

#bgaq {
  z-index: 9;
}

.pop_area {
  animation: floating-x 7.2s ease-in-out infinite alternate-reverse;
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.pop_img {
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
}

@keyframes floating-x {
  0% {
    transform: translateX(-1%);
  }

  100% {
    transform: translateX(1%);
  }
}

@keyframes floating-y {
  0% {
    transform: translateY(-2%);
  }

  100% {
    transform: translateY(2%);
  }
}

.splash_area {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.avantgardey_4 {
  position: absolute;
  top: 20px;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
}

.is-active .avantgardey_4 img {
  animation: uekara 2s ease-out;
}

@keyframes uekara {
  0% {
    opacity: 0;
    transform: translateY(-40px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tv {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.tv img {
  opacity: 0;
}

.is-active .tv img {
  animation: subaru 0.8s ease-out forwards;
  animation-delay: 3s;
}

@keyframes subaru {
  0% {
    opacity: 0;
    transform: translateX(40px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.avantgardey_6 {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
}

.avantgardey_6 img {
  animation: shake 2s infinite;
  transform: rotate(20deg);
}

@keyframes shake {
  50% {
    transform: rotate(-20deg);
  }

  100% {
    transform: rotate(20deg);
  }
}

.ameba {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 8;
}

.ameba img {
  background-color: #fff;
  animation: poyoyon 1s ease 0s infinite alternate;
  transform-origin: center;
}

@keyframes poyoyon {
  from {
    transform: scale(0.98, 0.98);
  }

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

/*=====================================================================================================================*/
main {
  /*background: #001484 url("/aquos/avantgardey-2026sp/assets/images/dummy.jpg") no-repeat center top;
  height: 14480px;*/
  background-color: #001482;
  overflow: hidden;
}

.citcle_area {
  background-color: var(--color_cream);
  ;
  position: relative;
}

.citcle_inner {
  background: url("/aquos/avantgardey-2026sp/assets/images/bg_citcle.png") no-repeat center top;
  background-size: cover;
  min-height: 360px;
}

.citcle_btn {
  display: flex;
  font-size: 180%;
  /*27px÷16px×100;*/
  font-weight: bold;
  font-style: italic;
  justify-content: space-around;
  padding-top: 180px;
  width: 770px;
  margin: 0 auto;
}

.citcle_btn li {
  text-align: center;
  width: 33%;
  border-left: 2px solid var(--color_cream);
  ;
}

.citcle_btn li:last-child {
  border-right: 2px solid var(--color_cream);
  ;
}

.citcle_btn li a {
  width: 33%;
  color: var(--color_cream);
  ;
  padding: 46px 1em 0;
}

.citcle_btn li a:hover {
  background: url("/aquos/avantgardey-2026sp/assets/images/bg_menu.png") no-repeat center top;
  color: #dc4d2f;
}

@media print, screen and (max-width: 767px) {
  .citcle_inner {
    background-size: auto;
    min-height: auto;
    padding: 20px;
  }

  .citcle_btn {
    font-size: 130%;
    padding-top: 100px;
    width: 90%;
  }

  .citcle_btn li a {
    padding: 20px 0.5em 0;
  }

  .citcle_btn li a:hover {
    background-size: 3.1em;
  }
}

.content_area {
  width: 900px;
  margin: 0 auto;
}

.title_performance {
  width: 770px;
  height: auto;
  margin: -60px auto;
  position: relative;
}

.title_talk {
  width: 728px;
  height: auto;
  margin: -60px auto;
  position: relative;
}

.title_member {
  width: 494px;
  height: auto;
  margin: -60px auto;
  position: relative;
}

@media print, screen and (max-width: 768px) {
  .content_area {
    width: auto;
    padding: 0 15px;
  }

  .title_performance, .title_talk, .title_member {
    width: auto;
    margin: -30px auto;
    padding: 50px 15px 0;
  }

  .title_member {
    width: 80%;
    height: auto;
  }
}

.content_area#anshin {
  margin-top: 350px;
}

.content_area#wakuwaku {
  margin-top: 350px;
}

#intoro-text {
  background-color: var(--color_cream);
  ;
  padding: 0 0 260px;
}

#intoro-text .content_inner {
  background: url("/aquos/avantgardey-2026sp/assets/images/bg_intro_text.png") no-repeat left top;
  background-size: 13% auto;
  width: 880px;
  margin: 0 auto;
  padding: 75px 75px 0;
  font-size: 175%;
  /*28px÷16px×100;*/
  font-weight: bold;
  color: #001482;
  text-align: justify;
}

@media print, screen and (max-width: 768px) {
  .content_area#anshin, .content_area#wakuwaku {
    margin-top: 0;
  }

  #intoro-text {
    padding: 30px 30px;
  }

  #intoro-text .content_inner {
    background: url("/aquos/avantgardey-2026sp/assets/images/bg_intro_text_sp.png") no-repeat center top;
    background-position: center top;
    background-size: 20% auto;
    width: auto;
    padding: 35px 0 0;
  }

  #intoro-text .content_inner.fade {
    visibility: visible;
    opacity: 1;
  }
}

.title_main {
  background: url("/aquos/avantgardey-2026sp/assets/images/bg_title.png") no-repeat center bottom;
  background-size: contain;
  height: 230px;
  font-size: 343%;
  /*55px÷16px×100;*/
  font-weight: bold;
  font-style: italic;
  color: var(--color_cream);
  ;
  text-align: center;
  padding-top: 148px;
}

.title_sub {
  background-color: #DC4D2F;
  border: 2px solid var(--color_cream);
  ;
  border-radius: 30px;
  font-size: 34px;
  font-weight: bold;
  font-style: italic;
  color: var(--color_cream);
  ;
  text-align: center;
  padding: 5px 0;
  letter-spacing: -0.1em;
}

.title_point {
  width: 96px;
  height: auto;
  margin: 95px 0 0 -18px;
}

.title_point02 {
  height: auto;
  margin-top: 0;
}

.text_futoji {
  font-size: 32px;
  font-weight: bold;
  font-style: italic;
  color: var(--color_cream);
  margin: 15px 0 35px;
}

@media print, screen and (max-width: 767px) {
  .title_main {
    height: 150px;
    font-size: 240%;
    /*55px÷16px×100;*/
    padding-top: 100px;
  }

  .title_sub {
    border-radius: 50px;
    font-size: 18px;
    padding: 5px 15px;
  }

  .title_point {
    display: none;
  }

  .point01 {
    background: url("/aquos/avantgardey-2026sp/assets/images/point01.png") no-repeat left 0;
    background-size: 50px;
    padding-left: 60px;
    line-height: 1.5;
    min-height: 50px;
  }

  .point02 {
    background: url("/aquos/avantgardey-2026sp/assets/images/point02.png") no-repeat left 0;
    background-size: 50px;
    padding-left: 60px;
    line-height: 1.5;
    min-height: 50px;
  }

  .title_point02 {
    margin-top: 0;
  }

  .text_futoji {
    font-size: 20px;
    margin: 7px 0 15px;
  }

  .text_futoji br {
    display: none;
  }
}

.point_inner {
  position: relative;
}

.point_inner01_2 {
  margin-top: 130px;
}

.point_inner02 {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

.point_inner03 {
  display: flex;
  justify-content: space-between;
}

.point_inner_img img {
  margin-bottom: 15px;
}

.title_orange {
  font-size: 22px;
  font-weight: bold;
  color: #db4f2e;
  margin-bottom: 10px;
  border-left: 5px solid #db4f2e;
  padding-left: 10px;
}

.text_caption {
  color: var(--color_cream);
}

.text_caption_type {
  margin: 10px 0 0 -0.5em;
  font-size: 1.4rem;
}

.text_caption_last {
  line-height: 1.9;
}

.content_inner {
  position: relative;
}

.content_inner02 {
  margin-top: 200px;
}

.icon_ai_auto {
  width: 588px;
  height: auto;
  margin: 100px auto 0;
}

@media print, screen and (max-width: 767px) {
  .content_inner {
    margin-top: 40px;
  }

  .point_inner {
    margin-top: 40px;
  }

  .point_inner01_2 {
    margin-top: 50px;
  }

  .point_inner02 {
    display: block;
    flex-direction: row;
  }

  .point_inner03 {
    display: block;
  }

  .title_orange {
    font-size: 16px;
  }

  .text_caption {
    font-size: 15px;
  }

  .text_caption_type {
    font-size: 1.3rem;
  }

  .title_orange br, .text_caption br {
    display: none;
  }

  .icon_ai_auto {
    width: 80%;
    height: auto;
    margin: 50px auto;
  }
}

.pic01 {
  width: 580px;
}

.pic02 {
  width: 694px;
  margin: 50px 0 0 auto;
}

.pic03 {
  width: 540px;
  margin-top: 130px;
}

.pic04 {
  width: 550px;
  margin-top: 214px;
}

.pic05 {
  width: 100%;
  margin-top: 30px;
}

.pic06 {
  width: 841px;
  margin: 100px auto 200px;
}

.gal {
  position: absolute;
}

.gal01 {
  width: 190px;
  height: auto;
  right: -148px;
  top: 64px;
}

.gal02 {
  width: 388px;
  height: auto;
  right: 0;
  top: 79px;
}

.gal03 {
  width: 330px;
  height: auto;
  left: -160px;
  top: 0;
}

.gal04 {
  width: 374px;
  height: auto;
  right: -36px;
  top: 230px;
}

.gal05 {
  width: 110px;
  height: auto;
  right: -20px;
  top: 64px;
}

.gal06 {
  width: 346px;
  height: auto;
  left: -40px;
  bottom: -150px;
}

.gal07 {
  width: 384px;
  height: auto;
  right: -60px;
  top: -30px;
}

.gal08 {
  width: 474px;
  height: auto;
  left: -120px;
  bottom: -280px;
}

.gal09 {
  width: 316px;
  height: auto;
  right: -148px;
  top: -170px;
}

.gal10 {
  width: 204px;
  height: auto;
  left: -148px;
  bottom: 0;
}

@media print, screen and (max-width: 767px) {
  .pic01 {
    width: 100%;
  }

  .pic02 {
    width: 100%;
  }

  .pic03 {
    display: block;
    width: 100%;
    margin: 0;
  }

  .pic04 {
    width: 100%;
    margin-top: 0;
  }

  .pic05 {
    width: 100%;
    margin-top: 20px;
  }

  .pic06 {
    width: 100%;
    margin: 20px auto 50px;
  }

  .gal {
    position: static;
    margin: 20px auto 0;
  }

  .gal01 {
    width: 40%;
  }

  .gal02 {
    width: 78%;
  }

  .gal03 {
    width: 62%;
  }

  .gal04 {
    width: 70%;
  }

  .gal05 {
    width: 24%;
  }

  .gal06 {
    width: 67%;
  }

  .gal07 {
    width: 73%;
  }

  .gal08 {
    width: 87%;
  }

  .gal09 {
    width: 60%;
  }

  .gal10 {
    width: 39%;
  }
}

.title_more {
  width: 618px;
  height: auto;
  margin: 200px auto 0;
}

.slick-slider {
  padding: 30px 50px 0;
  margin: 0 auto;
}

.slick-dots {
  width: 800px;
}

.title_partner {
  width: 676px;
  height: auto;
  margin: 60px auto 0;
}

.garelly {
  background: var(--color_cream) url("/aquos/avantgardey-2026sp/assets/images/bg_garelly.png") repeat-x top left;
  padding: 50px 0 50px;
}

.img-loop {
  margin-top: 150px;
  overflow: hidden;
  padding-bottom: 200px;
  position: relative;
  width: 100%;
  z-index: 1
}

.img-loop-box {
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  will-change: transform;
  -webkit-animation: scroll-img 100s linear infinite;
  animation: scroll-img 100s linear infinite
}

.img-loop-box img {
  height: 480px;
  margin-left: 20px;
  object-fit: contain;
  width: auto;
}

@media print, screen and (max-width: 767px) {
  .title_more {
    width: 100%;
    height: auto;
    margin: 100px auto 0;
  }

  .slick-slider {
    padding: 30px 20px 0;
    margin: 0 auto;
  }

  .title_partner {
    width: 100%;
    height: auto;
    margin: 30px auto 0;
  }

  .img-loop {
    margin-top: 50px;
    padding-bottom: 0
  }

  .img-loop-box img {
    height: 200px;
    margin-left: 15px
  }
}

@-webkit-keyframes scroll-img {
  0% {
    transform: translateX(0)
  }

  100% {
    transform: translateX(-50%)
  }
}

@keyframes scroll-img {
  0% {
    transform: translateX(0)
  }

  100% {
    transform: translateX(-50%)
  }
}

.video-wrap {
  width: 800px;
  margin: 0 auto;
  padding-bottom: 200px;
  text-align: center
}

.video-wrap iframe {
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 0 auto;
  max-width: 800px;
  width: 100%;
}

@media print, screen and (max-width: 767px) {
  .video-wrap {
    width: 100%;
    padding-bottom: 50px;
  }

  .video-wrap iframe {
    max-width: 100%;
  }
}

.section-lineup {
  background-color: #f8f6f7;
  padding-top: 200px;
  padding-bottom: 200px
}

.lineup_inner {
  width: 1000px;
  margin: 0 auto;
}

@media print, screen and (max-width: 767px) {
  .section-lineup {
    padding-top: 40px;
    padding-bottom: 40px
  }

  .lineup_inner {
    width: 100%;
  }
}

.section-lineup-ttl {
  margin-right: auto;
  margin-bottom: 85px;
  margin-left: auto;
  max-width: 669px;
  width: 100%
}

@media print, screen and (max-width: 767px) {
  .section-lineup-ttl {
    margin-bottom: 40px;
    max-width: 350px
  }
}

.section-lineup-list {
  display: flex
}

@media print, screen and (min-width: 768px) {
  .section-lineup-list {
    flex-wrap: wrap;
    justify-content: space-between
  }
}

@media print, screen and (max-width: 767px) {
  .section-lineup-list {
    flex-direction: column;
    gap: 60px
  }
}

.section-lineup-list-item {
  width: 43.6%
}

@media print, screen and (max-width: 767px) {
  .section-lineup-list-item {
    margin: 0 auto;
    width: 90%
  }
}

.section-lineup-btn {
  font-size: 21px;
  margin-top: 25px;
  padding: 5px 20px;
  display: flex;
  justify-content: center;
  background-color: #000;
  border: 1px solid transparent;
  color: #fff;
  align-items: center;
  gap: 8px;
  padding: 5px 15px;
  text-align: center;
  width: 100%;
}

.section-lineup-btn:hover {
  color: #fff;
  opacity: 0.8;
  text-decoration: none;
}

@media print, screen and (max-width: 767px) {
  .section-lineup-btn {
    font-size: 14px;
    margin: 20px auto 0
  }
}

.btn .icon {
  display: block;
  height: 13px;
  width: 7px;
}

.btn .icon svg {
  display: block;
  fill: #fff;
  height: 13px;
  width: 7px;
}

#lineup {
  padding: 150px 0 300px;
}

.title_tv {
  width: 714px;
  margin: 0 auto 70px;
}

.profile_inner {
  width: 800px;
  margin: -160px auto 0;
  padding-bottom: 100px;
}

.profile_inner .img-fit {
  margin: 20px 0 90px;
}

.profile_inner p {
  color: var(--color_cream);
  ;
}

.member_flex {
  text-align: center;
}

.member_flex ul {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 60px;
}

.member_flex li {
  width: 170px;
  height: auto;
  margin: 0 15px;
}

.title_avantgardey {
  width: 416px;
  height: auto;
  margin: 120px auto 0;
}

.title_profile {
  width: 114px;
  height: auto;
  margin: 0 auto 40px;
}

@media print, screen and (max-width: 767px) {
  #lineup {
    padding: 75px 0 75px;
  }

  .title_tv {
    width: 100%;
    margin: 0 auto 40px;
  }

  .profile_inner {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 100px;
  }

  .profile_inner .img-fit {
    margin: 20px 0 45px;
  }

  .member_flex ul {
    width: 100%;
    margin: 30px 0 30px;
  }

  .member_flex li {
    width: 20%;
    height: auto;
    margin: 0 5px;
  }

  .title_avantgardey {
    width: 60%;
    height: auto;
    margin: 60px auto 0;
  }

  .title_profile {
    width: 90px;
    margin: 0 auto 20px;
  }

}