@charset "UTF-8";

/* カスタムプロパティ */
:root {
  --margin-small: 2rem;
  --margin-medium: 3rem;
  --bgcolor-main: #000;
  --bgcolor-music: #21021E;
  --bgcolor-sports: #021834;
  --bgcolor-games: #081B01;
  --point-color: #2680FF;
}

@media (width >=1080px) {
  :root {
    --margin-small: 4rem;
    --margin-medium: 7rem;
  }
}

/* reset */
@media screen and (width >=1200px) {

  .base-width-pc,
  .base-width {
    max-inline-size: 120rem;
  }
}

/* utility */
@media (width >=480px) {
  .disp-xs {
    display: none;
  }
}

@media (width >=1080px) {
  .disp-s {
    display: none;
  }
}

@media (width < 1080px) {
  .disp-m {
    display: none;
  }
}

.mx-auto {
  margin-inline: auto;
}

.mt-s {
  margin-top: var(--margin-small);
}

.mt-m {
  margin-top: var(--margin-medium);
}

.max-il-l {
  max-inline-size: 86rem;
}

.mt-0-64em {
  margin-top: 0.64em;
}

.mt-0-8em {
  margin-top: 0.8em;
}

.mt-1em {
  margin-top: 1em;
}

.mt-1-6em {
  margin-top: 1.6em;
}

.mt-2em {
  margin-top: 2em;
}

.text-right {
  text-align: right;
}

.font-caption {
  font-size: 1.2rem;
}

.font-bold {
  font-weight: 700;
}

.text-center {
  text-align: center;
}

/* ordered-list */
.ordered-list {
  list-style-type: decimal;
  padding-left: 1.5em;

  >li:not(:first-child) {
    margin-top: 1em;
  }
}

.ordered-list li::marker,
.ordered-list-ttl {
  font-weight: bold;
}

/* note-list */
.note-list {
  >li::before {
    content: "※";
    margin-right: 0.25em;
  }
}

.counter-note-list {
  counter-reset: note-counter;

  li {
    counter-increment: note-counter;
  }

  li::before {
    content: "※" counter(note-counter);
    margin-right: 0.25em;
  }
}

@media (width >=1080px) {

  .counter-note-list,
  .note-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0 0.5em;

    li {
      display: grid;
      grid-template-columns: subgrid;
      grid-column: 1 / -1;
    }

    li::before {
      grid-column: 1;
      margin-right: 0;
    }
  }
}

/* video */
.video-replay {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.24em;
  font-size: 1.4rem;
}

.video-replay-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.4em 1.6em 0.4em 0.4em;
  line-height: 1;
  color: #fff;
  background-image: url("../images/icon-play.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 1.4rem 1.4rem;
}

.video-replay-btn.is-playing {
  background-image: url("../images/icon-stop.svg");
  background-size: 1.8rem 1.8rem;
}

.video-replay-btn.is-ended {
  background-image: url("../images/icon-replay.svg");
  background-size: 1.6rem 1.6rem;
}

.video-replay-btn:hover {
  transition: opacity 0.2s;

  &:hover {
    opacity: 0.6;
  }
}

/* scroll-trigger */
.scroll-trigger {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;

  .child-item {
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
  }
}

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

.scroll-trigger.fade-in .child-item {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1s;
}

/* base */
.article-special {
  font-family: ryo-gothic-plusn, sans-serif;
  font-weight: 400;
  counter-reset: chapter-count;
}

@media (width < 1080px) {
  .max-content-width-s {
    max-width: 56rem;
    margin-inline: auto;
  }

  .max-content-width-m {
    max-width: 76.8rem;
    margin-inline: auto;
  }
}

/* MV */
.main-visual {
  --global-header-height: 8.7rem;
  width: 100%;
  height: calc(100dvh - var(--global-header-height));
  max-height: 179.2vw;
  text-align: center;
  background: #000;
  color: #fff;
  overflow: hidden;
  position: relative;
}

.mv-first-text,
.mv-text,
.mv-front,
.mv-r,
.mv-l,
.mv-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: opacity 0.6s;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }
}

.mv-first-text {
  &.animated {
    animation: fadeAndOut 1.8s ease-in-out forwards;
  }
}

@keyframes fadeAndOut {
  0% {
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.mv-bg {
  &.animated {
    opacity: 1;
  }
}

.mv-l {
  transform: translateX(0.5%) scale(0.8);
  transition: all 0.4s;

  &.animated {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

.mv-r {
  transform: translateX(-0.5%) scale(0.8);
  transition: all 0.4s;

  &.animated {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

.mv-front {
  &.animated {
    opacity: 1;
  }
}

.mv-text {
  &.animated {
    opacity: 1;
  }
}

@media (width >=768px) {
  .main-visual {
    --global-header-height: 10.2rem;
    max-height: 85vw;
  }
}

/* intro */
.intro-section {
  padding: 5rem 0;
  background: var(--bgcolor-main);
  color: #fff;
  font-size: 1.8rem;
  line-height: 2;
  text-align: center;
}

.intro-img {
  max-width: 22rem;
  margin-top: 3rem;
}

.page-nav-menu {
  display: grid;
  justify-content: space-between;
  align-items: center;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 14% 4.8%;
  margin-top: 6rem;
}

.page-nav-menu-anchor {
  color: #fff;
  border: 2px solid #848484;
  border-radius: 10px;
  display: grid;
  justify-items: center;
  justify-content: center;
  align-items: center;
  gap: 0 0.2em;
  width: 100%;
  padding: 0.56em 0 0.24em;
  font-size: 1.4rem;
  line-height: 1;
  background: var(--bgcolor-main);


  &[href^="#music"] {
    background: var(--bgcolor-music);
  }

  &[href^="#sports"] {
    background: var(--bgcolor-sports);
  }

  &[href^="#games"] {
    background: var(--bgcolor-games);
  }

  .arrow-icon {
    height: auto;
  }
}

.page-nav-menu-anchor {
  transition: background-color 0.2s;

  &:hover {
    text-decoration: none;
    color: inherit;
    background-color: color-mix(in srgb, var(--bgcolor-main), #fff 10%);

    &[href^="#music"] {
      background-color: color-mix(in srgb, var(--bgcolor-music), #fff 10%);
    }

    &[href^="#sports"] {
      background-color: color-mix(in srgb, var(--bgcolor-sports), #fff 10%);
    }

    &[href^="#games"] {
      background-color: color-mix(in srgb, var(--bgcolor-games), #fff 10%);
    }

    .arrow-icon {
      transform: translateY(0.12em);
    }
  }
}

@media (min-width: 1080px) {
  .intro-section {
    padding: 10rem 0;
  }

  .intro-img {
    max-width: 41.2rem;
    margin-top: 5rem;
  }

  .page-nav-menu {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 3%;
    max-width: 108rem;
    margin-inline: auto;
    margin-top: 9rem;
  }

  .page-nav-menu-anchor {
    grid-template-columns: auto auto;
    padding: 0.64em;
    font-size: 1.8rem;
  }
}

/* chapter */
.chapter {
  padding: 6rem 0;
  background: var(--bgcolor-main);
  color: #fff;

  &#music {
    background: var(--bgcolor-music);
  }

  &#sports {
    background: var(--bgcolor-sports);
  }

  &#games {
    background: var(--bgcolor-games);
  }
}

.chapter-count {
  counter-increment: chapter-count;
}

.chapter-header {
  text-align: center;
}

.chapter-label {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  width: fit-content;
  margin-bottom: 3rem;
  padding: 0.48em 1.5em;
  font-family: bebas-neue-pro, sans-serif;
  font-size: 1.4rem;
  line-height: 1;
  background: var(--point-color);
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  text-align: center;

  .chapter-label-num {
    &::after {
      content: counter(chapter-count);
      font-size: 1.2em;
    }
  }
}

.chapter-category {
  margin-bottom: 0.5em;
  font-size: 1.8rem;
  background: linear-gradient(132deg, #E3AD2D 4.35%, #AB680A 34.24%, #FFC420 63.81%);
  background-clip: text;
  color: transparent;
}

.chapter-title {
  margin-bottom: 1em;
  font-size: 4rem;
  line-height: 1.4;
}

.chapter-main-visual-wrap {
  max-width: 150rem;
  padding: 0 5.5%;
  position: relative;
}

.chapter-main-visual-title {
  font-family: helvetica-neue-lt-pro, sans-serif;
  /* font-size: 4rem; */
  font-size: 10vw;
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
  position: absolute;
  left: 5%;
  bottom: 2.6rem;
  transform: translateY(0.5em);
}

.chapter-body {
  padding: 8rem 0 0;
}

.chapter-sub-title {
  margin-bottom: 1.2em;
  font-size: 2.4rem;
  line-height: 1.5;
  font-weight: bold;
  text-align: center;

  .chapter-sub-title-lead {
    font-size: 0.72em;
    font-weight: 500;
  }
}

.chapter-main {
  margin-bottom: 6rem;
}

.chapter-main-text {
  padding: 1rem 0;
  font-weight: 500;
  line-height: 1.8;
}

.chapter-main-img {
  margin-top: 3rem;
}

.chapter-detail {
  &:not(:first-child) {
    margin-top: 5rem;
  }
}

.chapter-detail-title {
  font-size: 1.6rem;
  font-weight: 500;
  text-align: center;

  #music & {
    color: var(--bgcolor-music);
  }

  #sports & {
    color: var(--bgcolor-sports);
  }

  #games & {
    color: var(--bgcolor-games);
  }

  em {
    display: block;
    margin: 0.2em 0;
    padding: 0.32em;
    background: var(--bgcolor-main);
    color: #fff;
    border-radius: 5px;
    font-weight: bold;

    #music & {
      background: var(--bgcolor-music);
    }

    #sports & {
      background: var(--bgcolor-sports);
    }

    #games & {
      background: var(--bgcolor-games);
    }
  }
}

.chapter-detail-models {
  font-size: 1.2rem;
  text-align: center;
}

.chapter-detail-text {
  margin-top: 1.2em;
  font-size: 1.5rem;
}

.chapter-detail-img-wrap {
  margin-top: 2rem;
}

@media (min-width: 1080px) {
  .chapter {
    padding: 7rem 0 10rem;
  }

  .chapter-label {
    margin-bottom: 4rem;
    font-size: 1.6rem;
  }

  .chapter-category {
    font-size: 2.4rem;
  }

  .chapter-title {
    font-size: 7rem;
  }

  .chapter-main-visual {
    padding: 0 8% 2.5%;
  }

  .chapter-main-visual-title {
    font-size: 11rem;
    left: 0;
    bottom: 0;
    transform: none;
  }

  .chapter-body {
    padding: 14rem 6.5% 0;
  }

  .chapter-sub-title {
    margin-bottom: 1.5em;
    font-size: 4.6rem;

    .chapter-sub-title-lead {
      font-size: 0.64em;
    }
  }

  .chapter-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .chapter-main-text {
    flex: 1;
    padding: 1rem 6% 1rem 0;
  }

  .chapter-main-img {
    width: 55%;
    margin-top: 0;
  }

  .chapter-detail {
    display: flex;
  }

  .chapter-detail-text-wrap {
    flex: 1;
    padding: 0 4.2% 0 0;
  }

  .chapter-detail-img-wrap {
    width: 64%;
    margin-top: 0;
  }
}

/* accordion */
.accordion-trigger {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2em;
  width: 100%;
  padding: 0.8em 1em;
  font-size: 1.6rem;
  font-weight: bold;
  background-color: #000;
  color: #fff;
  border: solid 1px #D2D2D2;

  transition: background-color 0.3s ease;
}

.accordion-content-wrap {
  overflow: hidden;
}

.accordion-content-inner {
  padding: 3rem 4.8% 2rem;
}

.accordion-trigger:hover {
  background-color: #222;
}

.accordion-trigger:focus-visible {
  outline: 3px solid #0056b3;
  outline-offset: -3px;
}

.arrow-icon {
  width: 1.5em;
  height: 1.5em;
  transition: transform 0.3s ease;
}

.accordion-trigger[aria-expanded="true"] .arrow-icon {
  transform: rotate(180deg);
}

.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease, visibility 0.3s ease;
  visibility: hidden;
  background-color: #fff;
  color: #000;
}

.accordion-content:not([aria-hidden="true"]) {
  grid-template-rows: 1fr;
  visibility: visible;
}

@media (min-width: 1080px) {
  .accordion-content-inner {
    padding: 2% 4.8%;
  }
}

/* Tabs */
.tab-list-wrap {
  text-align: center;
}

.tab-list {
  position: relative;
  display: inline-flex;
  background-color: #888;
  border-radius: 50px;
  padding: 4px;
  gap: 4px;
  z-index: 0;
}

.tab-indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  background-color: #000;
  border-radius: 50px;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
}

.tab-trigger {
  position: relative;
  border: none;
  background: transparent;
  color: #fff;
  padding: 10px 24px;
  font-size: 1.4rem;
  font-weight: bold;
  border-radius: 50px;
  cursor: pointer;
  transition: color 0.3s ease;
  z-index: 2;
}

.tab-trigger[aria-selected="false"] {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s;

  &:hover {
    color: #000;
  }
}

.tab-trigger[aria-selected="true"] {
  color: #fff;
  cursor: default;
}

.tab-trigger:focus-visible {
  outline: 3px solid #0056b3;
  outline-offset: 2px;
}

.tab-content-wrapper {
  margin-top: 4rem;
  position: relative;
  transition: height 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.tab-panel {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.tab-panel.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

@media (min-width: 1080px) {
  .tab-trigger {
    font-size: 1.6rem;
  }

  .tab-content-wrapper {
    margin-top: 5rem;
  }
}

/* video-banner-card */
.video-banner-card {
  display: flex;
  gap: 0.8rem;
  max-width: 58rem;
  margin-top: 8rem;
  background: linear-gradient(155deg, #FFF 1.37%, #E3E4E6 93.94%);
  color: #000;
  border: 3px solid #FFF;
  border-radius: 10px;
  font-weight: bold;
  text-decoration: none;
}

.video-banner-card {
  transition: opacity 0.2s;
}

.video-banner-card:hover {
  text-decoration: none;
  opacity: 0.6;
}

.video-banner-thumbnail {
  flex: 1;
  padding: 0.8rem 0 0.8rem 0.8rem;
}

.video-banner-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50%;
}

.video-banner-text-wrap {
  margin-top: auto;
  padding-right: 0;
  text-align: center;
}

.video-banner-title {
  display: inline-block;
  margin-bottom: 0.24em;
  padding: 0 0.7em 1em;
  font-size: min(2.8vw, 1.6rem);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='188' height='13' viewBox='0 0 188 13' fill='none' preserveAspectRatio='none'%3E%3Cline y1='0.5' x2='100%25' y2='0.5' stroke='black'/%3E%3Cline x1='137.354' y1='0.353553' x2='125.354' y2='12.3536' stroke='black'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
}

.video-banner-lead {
  font-size: min(2.8vw, 1.6rem);
  font-feature-settings: "palt";
  margin: 0;

  em {
    font-size: 1.5em;
    font-weight: bold;
  }
}

.video-banner-btn {
  margin-top: auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.72em;
  font-size: min(2.8vw, 1.6rem);
  background-color: #fff;
  padding: 0.5em 1.8em;
  border-radius: 10px 0 0 0;
}

.video-banner-btn-text {
  font-weight: bold;
  color: #000;
}

.video-banner-btn-icon {
  display: block;
  width: 1.7em;
  height: 1.7em;
  flex-shrink: 0;
}

@media (min-width: 1080px) {
  .video-banner-card {
    gap: 2rem;
    margin-top: 16rem;
    border: 6px solid #FFF;
  }

  .video-banner-thumbnail {
    padding: 1rem 0 1rem 2rem;
  }

  .video-banner-text-wrap {
    padding-right: 1.6rem;
  }

  .video-banner-title {
    font-size: 1.6rem;
  }

  .video-banner-lead {
    font-size: 1.6rem;
  }

  .video-banner-btn {
    font-size: 1.4rem;
  }
}

/* sub-chapter */
.sub-chapter {
  padding: 3rem 0 7rem;
  border-top: solid 1px #000;

  &.aiauto-section {
    border-top: none;
  }
}

.sub-chapter-title {
  margin: 1rem 0 3rem;
  font-size: 2.4rem;
}

.sub-chapter-lead {
  font-size: 1.6rem;
  line-height: 1.8;
}

.sub-chapter-body {
  margin-top: 3rem;
}

.aquos-logo {
  height: 2.64rem;

  img {
    inline-size: auto;
    block-size: 100%;
  }
}

@media (min-width: 1080px) {
  .sub-chapter {
    padding: 5rem 0 10rem;
  }

  .sub-chapter-title {
    font-size: 4.6rem;
  }

  .sub-chapter-lead {
    text-align: center;
  }

  .sub-chapter-body {
    max-width: 96rem;
    margin-top: 8rem;
  }

  .aquos-logo {
    height: 4.2rem;
  }
}

/* before-after */
.image-compare-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 20px;
  user-select: none;
}

.image-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.image-box img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.image-before {
  z-index: 1;
}

.image-after {
  z-index: 2;
  width: 100%;
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

.compare-handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.handle-line {
  position: absolute;
  top: 0;
  left: -1px;
  width: 2px;
  height: 100%;
  background-color: #fff;
}

.handle-circle {
  --handle-size: 4.4rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--handle-size);
  height: var(--handle-size);
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.compare-range-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 4;
}

.compare-range-input:focus-visible~.compare-handle .handle-circle {
  outline: 3px solid #0056b3;
  outline-offset: 3px;
}

@media (min-width: 1080px) {
  .handle-circle {
    --handle-size: 8.8rem;
  }
}

/* static-slider */
.splide__track--nav>.splide__list>.splide__slide {
  border: none;
}

@supports(outline-offset: -3px) {
  .splide.is-focus-in .splide__slide:focus {
    outline: 2px solid var(--cyan);
  }
}

.splide__track--nav>.splide__list>.splide__slide.is-active {
  border: none
}

.image-main-slider {
  width: 100%;
  max-width: 800px;
  margin: 0 auto 16px;
  overflow: hidden;
}

.image-main-slider .splide__slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.image-thumb-slider {
  width: 100%;
  max-width: 800px;
  margin: 0 auto 40px;
}

.image-thumb-slider .splide__list {
  justify-content: flex-start !important;
  transform: none !important;
}

.image-thumb-slider .splide__slide {
  overflow: hidden;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.3s ease, border-color 0.3s ease;
}

.image-thumb-slider .splide__slide.is-active {
  opacity: 1;
  cursor: default;
}

.image-thumb-slider .splide__slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* video-slider */
#video-slider {
  width: 100%;
  max-width: 800px;
  margin: 0 auto 24px;
  overflow: hidden;
}

.video-wrapper video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.video-navigation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.video-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.72em 2.8em;
  font-size: 1.4rem;
  font-weight: bold;
  border: none;
  border-radius: 100px;
  background-color: #dcdcdc;
  color: #333;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.video-nav-btn.active {
  background-color: #000;
  color: #fff;
}

.video-nav-btn.active {
  cursor: default;
}

.video-nav-btn:not(.active):hover {
  transition: opacity 0.2s;

  &:hover {
    opacity: 0.6;
  }
}

.splide__progress {
  background: #e0e0e0;
  height: 4px;
  width: 100%;
}

.splide__progress__bar {
  background: var(--point-color);
  height: 100%;
  width: 0;
  transition: width 0.25s linear;
}

/* btn-aquos-ai */
.btn-aquos-ai-wrap {
  padding: 8rem 0 0;
  text-align: center;
}

.btn-aquos-ai-arrow {
  width: 1.4em;
  height: 1lh;
  flex-shrink: 0;
  overflow: visible;
}

.btn-aquos-ai {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  width: fit-content;
  padding: 1em 1.6em;
  background: linear-gradient(91deg, #2D9FD1 30.79%, #CC306A 101.46%);
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  border-radius: 50px;
  transition: opacity 0.2s, background-color 0.3s ease;
  text-decoration: none;
}

.btn-aquos-ai-arrow .arrow-line {
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-aquos-ai-arrow .arrow-head {
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-aquos-ai:hover {
  text-decoration: none;
  color: #fff;
  opacity: 0.8;

  .arrow-line {
    transform: scaleX(1.43);
  }

  .arrow-head {
    transform: translateX(10px);
  }
}

@media (min-width: 1080px) {
  .btn-aquos-ai {
    font-size: 1.8rem;
  }
}

/* products */
.product {
  text-align: center;

  &:not(:first-child) {
    margin-top: 8rem;
  }
}

.product-title {
  margin-bottom: 0.64em;
  font-size: 2.2rem;
}

.product-list {
  margin-top: 4rem;
}

.product-item {
  display: flex;
  justify-content: space-between;
  gap: 4%;

  &:not(:first-child) {
    margin-top: 3rem;
  }
}

.product-img {
  width: 48%;
}

.product-text-wrap {
  flex: 1;
}

.product-category {
  margin-bottom: 0.24em;
  font-size: 1.3rem;
  font-weight: 500;
}

.product-line {
  margin-bottom: 0.4em;
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1;
}

.screen-size-item {
  display: inline-flex;
  padding: 0.16em 0.48em;
  font-size: 1.2rem;
  font-weight: bold;
  background: #000;
  color: #fff;
}

.product-anchor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  width: fit-content;
  margin-top: 1em;
  padding: 0.8em 1.2em;
  background: #fff;
  color: #000;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 500;
  border: 1.5px solid #000;
  border-radius: 50px;
  transition: background-color 0.3s ease;
}

.arrow-svg {
  width: 1.2em;
  height: 1em;
  overflow: visible;
  flex-shrink: 0;
}

.arrow-line {
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.arrow-head {
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.product-anchor:hover {
  text-decoration: none;
}

.product-anchor:hover .arrow-line {
  transform: scaleX(1.5);
}

.product-anchor:hover .arrow-head {
  transform: translateX(10px);
}

@media (width >=480px) {
  .products-section .chapter-label {
    margin-bottom: 3.6em;
  }

  .product-list {
    display: flex;
    gap: 5%;
    margin-top: 4rem;
  }

  .product-item {
    display: block;
    width: 48%;

    &:not(:first-child) {
      margin-top: 0;
    }
  }

  .product-img {
    width: 100%;
    margin-bottom: 4rem;
  }

  .product-category {
    font-size: 1.6rem;
  }

  .product-line {
    margin-bottom: 0.8em;
    font-size: 2.6rem;
  }

  .screen-size-item {
    font-size: 1.4rem;
  }

  .product-anchor {
    margin-top: 1.84em;
    padding: 0.8em 1.6em;
    font-size: 1.4rem;
  }
}

@media (width >=1080px) {
  .products {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 5rem;
  }

  .product {
    &:not(:first-child) {
      margin-top: 0;
    }
  }
}