@charset "UTF-8";
:root {
  --color-black: #000000;
  --color-black-rgb: 0, 0, 0;
  --color-white: #ffffff;
  --color-white-rgb: 255, 255, 255;
  --color-LYnavy100: #000048;
  --color-LYnavy100-rgb: 0, 0, 72;
  --color-yahoo: #ff0033;
  --color-line: #06c755;
  --color-text-primary: rgba(0, 0, 0, 0.73);
  --color-text-link: #0079FF;
  --color-border-secondary: rgba(0, 0, 0, 0.2);
  --gradation-agent-i-2: linear-gradient(90deg, #FF468D 0%, #B632F4 50%, #0085FF 100%);
}

html {
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  min-width: 375px;
  min-height: 100vh;
  background: #fff;
  color: var(--color-text-primary);
}
body.is-locked {
  overflow: hidden;
}

a {
  color: var(--color-text-primary);
  text-decoration: none;
}

a, button {
  opacity: 1;
  transition: opacity 0.4s ease;
  cursor: pointer;
}
@media screen and (hover: hover) {
  a:hover, button:hover {
    opacity: 0.7;
  }
}

button:focus-visible {
  outline: auto #005fcc;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  *::before, *::after {
    animation: none !important;
  }
  .mainvisual h1,
  .mainvisual .graphic-front,
  .mainvisual .graphic-back,
  .mainvisual .agent-i {
    opacity: 1 !important;
  }
  .mainvisual .agent-i {
    opacity: 1 !important;
    scale: 1 !important;
  }
  .animation {
    opacity: 1 !important;
  }
}
.show__on-pc-layout {
  display: block;
}
@media screen and (max-width: 767px) {
  .show__on-pc-layout {
    display: none !important;
  }
}
.show__on-sp-layout {
  display: block;
}
@media screen and (min-width: 768px) {
  .show__on-sp-layout {
    display: none !important;
  }
}

.jsOff {
  margin: 16px auto 8px;
  padding: 8px;
  width: 96%;
  max-width: 990px;
  text-align: center;
  background-color: var(--color-white);
  border: 1px solid #e60013;
  font-size: 1.2rem;
}
@media screen and (min-width: 375px) {
  .jsOff {
    margin-top: 24px;
    font-size: 1.4rem;
  }
}
.jsOff .pt1 {
  padding-bottom: 4px;
}
.jsOff .pt2 {
  padding-bottom: 8px;
}
.jsOff .pt3 a {
  color: #1a75ff;
  text-decoration: underline;
}

.wrapper {
  position: relative;
  width: 100%;
  margin: auto;
  background: var(--color-white);
  overflow-x: hidden;
}
.wrapper::before, .wrapper::after {
  content: "";
  position: absolute;
  left: 50%;
  display: block;
  width: 550px;
  height: 250px;
  border-radius: 400px;
  filter: blur(40px);
  z-index: 0;
}
@media screen and (min-width: 768px) {
  .wrapper::before, .wrapper::after {
    width: 1200px;
    height: 600px;
    filter: blur(200px);
  }
}
.wrapper::before {
  top: 540px;
  transform: translate(-107%, 0) rotate(150deg) translateZ(0);
  opacity: 0.5;
  background: linear-gradient(39deg, rgba(110, 220, 255, 0.7) 15.81%, rgba(182, 50, 244, 0.7) 50.99%, rgba(255, 70, 141, 0.7) 86.17%);
}
@media screen and (min-width: 768px) {
  .wrapper::before {
    top: 460px;
    transform: translate(-115%, 0) rotate(150deg) translateZ(0);
  }
}
.wrapper::after {
  top: 760px;
  transform: translate(10%, 0) rotate(150deg) translateZ(0);
  opacity: 0.6;
  background: linear-gradient(100deg, rgba(0, 133, 255, 0.6) 11.24%, rgba(110, 220, 255, 0.6) 77.98%, rgba(182, 50, 244, 0.6) 94.37%);
}
@media screen and (min-width: 768px) {
  .wrapper::after {
    top: 710px;
    transform: translate(10%, 0) rotate(150deg) translateZ(0);
  }
}
.wrapper > * {
  position: inherit;
  z-index: 1;
}

main .inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 24px;
}
@media screen and (min-width: 768px) {
  main .inner {
    width: 100%;
    max-width: 664px;
    margin: 0 auto;
    padding: 32px;
    margin-bottom: 60px;
    border-radius: 52px;
    background: var(--color-white);
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.05);
  }
}

.section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.section__title {
  width: auto;
  height: 24px;
  margin-bottom: 16px;
}
@media screen and (min-width: 768px) {
  .section__title {
    height: 32px;
  }
}
.section__title img {
  width: auto;
  height: 100%;
}
.section__lead {
  width: 100%;
  max-width: 450px;
  margin-bottom: 24px;
  color: #595959;
  font-size: 1.4rem;
  line-height: 140%;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .section__lead {
    max-width: 600px;
    margin-bottom: 20px;
    font-size: 1.8rem;
  }
}

.mainvisual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 350px;
  margin-bottom: 44px;
  padding: 0 24px;
}
@media screen and (min-width: 768px) {
  .mainvisual {
    height: 560px;
    margin-bottom: 60px;
  }
}
.mainvisual h1 {
  width: 148px;
  height: 49px;
  margin-bottom: 31px;
  z-index: 1;
  opacity: 0;
}
@media screen and (min-width: 768px) {
  .mainvisual h1 {
    width: 216px;
    height: 71px;
    margin-bottom: 50px;
  }
}
.mainvisual h1 img {
  width: 100%;
  height: 100%;
}
.mainvisual .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.mainvisual .bg > * {
  position: absolute;
  display: block;
}
.mainvisual .bg .graphic {
  width: 100%;
  height: 100%;
  z-index: 1;
}
.mainvisual .bg .graphic > * {
  position: absolute;
  display: block;
}
.mainvisual .bg .graphic .graphic-front,
.mainvisual .bg .graphic .graphic-back {
  top: calc(50% - 176px);
  left: calc(50% - 299px);
  width: 600px;
  height: 346px;
  opacity: 0;
}
@media screen and (min-width: 768px) {
  .mainvisual .bg .graphic .graphic-front,
  .mainvisual .bg .graphic .graphic-back {
    top: calc(50% - 301px);
    left: calc(50% - 600px);
    width: 1200px;
    height: 560px;
  }
}
.mainvisual .bg .graphic .graphic-front {
  z-index: 3;
  background-image: url(https://s.yimg.jp/images/evt/agent-i/assets/img/mainvisual/graphic_front_small.svg);
  background-size: cover;
  background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
  .mainvisual .bg .graphic .graphic-front {
    background-image: url(https://s.yimg.jp/images/evt/agent-i/assets/img/mainvisual/graphic_front_large.svg);
  }
}
.mainvisual .bg .graphic .graphic-back {
  z-index: 1;
  background-image: url(https://s.yimg.jp/images/evt/agent-i/assets/img/mainvisual/graphic_back_small.svg);
  background-size: cover;
  background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
  .mainvisual .bg .graphic .graphic-back {
    background-image: url(https://s.yimg.jp/images/evt/agent-i/assets/img/mainvisual/graphic_back_large.svg);
  }
}
.mainvisual .bg .graphic .agent-i {
  position: relative;
  width: 106px;
  height: 99px;
  top: calc(50% - 96px);
  left: calc(50% - 53px);
  background-image: url(https://s.yimg.jp/images/evt/agent-i/assets/img/mainvisual/agent-i_face.png);
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 2;
  opacity: 0;
}
@media screen and (min-width: 768px) {
  .mainvisual .bg .graphic .agent-i {
    width: 155px;
    height: 144px;
    top: calc(50% - 109px);
    left: calc(50% - 79px);
  }
}
.mainvisual .bg .graphic .agent-i::after {
  content: "";
  position: absolute;
  top: 46%;
  left: calc(50% - 20px);
  display: block;
  width: 41px;
  height: 21px;
  background-image: url(https://s.yimg.jp/images/evt/agent-i/assets/img/mainvisual/agent-i_eye.png);
  background-size: cover;
  background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
  .mainvisual .bg .graphic .agent-i::after {
    left: calc(50% - 28px);
    width: 59px;
    height: 31px;
  }
}
.mainvisual > p {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 100%;
  margin-bottom: 18px;
  background: var(--gradation-agent-i-2);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media screen and (min-width: 768px) {
  .mainvisual > p {
    font-size: 2.8rem;
    margin-bottom: 24px;
  }
}
.mainvisual a.button {
  position: relative;
  max-width: 202px;
  height: 48px;
  background: var(--gradation-agent-i-2);
  font-size: 1.8rem;
  z-index: 1;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .mainvisual a.button {
    max-width: 280px;
    height: 60px;
    font-size: 2.2rem;
  }
}
.mainvisual a.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -200px;
  width: 100%;
  height: 40%;
  background-color: var(--color-white);
  filter: blur(20px);
  transform: translateZ(0) rotate(-45deg);
}
.mainvisual a.button span {
  display: block;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 50%;
  right: 50%;
  background-image: url(https://s.yimg.jp/images/evt/agent-i/assets/img/icon_sparkle.svg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.mainvisual a.button span:nth-of-type(1) {
  width: 7px;
  height: 7px;
  transform: translate(660%, -240%);
  opacity: 0;
}
@media screen and (min-width: 768px) {
  .mainvisual a.button span:nth-of-type(1) {
    transform: translate(800%, -271%);
  }
}
.mainvisual a.button span:nth-of-type(2) {
  transform: translate(486%, -108%);
  opacity: 1;
}
@media screen and (min-width: 768px) {
  .mainvisual a.button span:nth-of-type(2) {
    transform: translate(570%, -110%);
  }
}
.mainvisual a.button span:nth-of-type(3) {
  width: 7px;
  height: 7px;
  transform: translate(760%, 10%);
  opacity: 0;
}
@media screen and (min-width: 768px) {
  .mainvisual a.button span:nth-of-type(3) {
    transform: translate(900%, 20%);
  }
}

.mainvisual.is-animated * {
  transform-origin: center center;
}
.mainvisual.is-animated .icon {
  animation: fadeInZoomUpIcon 500ms 0ms both;
  animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
}
.mainvisual.is-animated .graphic-front,
.mainvisual.is-animated .graphic-back {
  opacity: 0.2;
  animation: fadeInZoomUpGraphic 500ms 0ms both;
  animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
}
.mainvisual.is-animated h1 {
  opacity: 0;
  animation: fadeInWordmark 500ms 100ms both;
  animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
}
.mainvisual.is-animated .agent-i {
  opacity: 0;
  scale: 0.8;
  transform-origin: bottom center;
  animation: fadeInZoomUpAgenti 600ms 270ms both, bounce 600ms 500ms both;
  animation-timing-function: cubic-bezier(0.5, 0, 0, 1);
}
.mainvisual.is-animated .agent-i::after {
  transform-origin: center center;
  animation: agentiBlink 300ms 1100ms 2 both;
}
.mainvisual.is-animated a.button {
  transform-origin: bottom center;
  animation: bounce 600ms 1570ms both;
}
.mainvisual.is-animated a.button::before {
  animation: buttonShiny 700ms 2000ms both;
}
.mainvisual.is-animated a.button span:nth-of-type(1) {
  opacity: 0;
  animation: sparkle_1 600ms 2400ms both;
}
.mainvisual.is-animated a.button span:nth-of-type(2) {
  opacity: 1;
  animation: sparkle_2 600ms 2600ms both;
}
.mainvisual.is-animated a.button span:nth-of-type(3) {
  opacity: 0;
  animation: sparkle_1 600ms 2200ms 2 both;
}

@keyframes fadeInWordmark {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeInZoomUpAgenti {
  0% {
    opacity: 0;
    scale: 0.8;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
@keyframes fadeInZoomUpGraphic {
  0% {
    opacity: 0.2;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounce {
  0% {
    transform: translateY(0) scale(1);
  }
  10% {
    transform: translateY(0) scale(1.05, 0.95);
  }
  40% {
    transform: translateY(-10%) scale(0.95, 1.05);
  }
  75% {
    transform: translateY(0) scale(1.05, 0.95);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
@keyframes agentiBlink {
  0% {
    transform: scale(1, 1);
  }
  40% {
    transform: scale(1.2, 0.2);
  }
  50% {
    transform: scale(0.95, 1.05);
  }
  60% {
    transform: scale(1, 1);
  }
}
@keyframes buttonShiny {
  0% {
    left: -200px;
  }
  100% {
    left: 200px;
  }
}
@keyframes sparkle_1 {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sparkle_2 {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.key-movie {
  width: 100%;
  max-width: 450px;
  aspect-ratio: 16/9;
  margin-bottom: 32px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-border-secondary);
}
.key-movie:has(.youtube-embed__trigger:focus-visible) {
  outline: auto #005fcc;
}
@media screen and (min-width: 768px) {
  .key-movie {
    max-width: 600px;
    margin-bottom: 60px;
  }
}
.key-movie iframe {
  width: 100%;
  height: 100%;
}

.youtube-embed {
  position: relative;
}
.youtube-embed__trigger {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
.youtube-embed__trigger img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 101%;
  height: auto;
  filter: brightness(0.9);
}
.youtube-embed__trigger span {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 100px;
  border: 2px solid #FFF;
  background: rgba(0, 0, 0, 0.25);
}
.youtube-embed__trigger span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  display: block;
  width: 14px;
  height: 20px;
  background: var(--color-white);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.youtube-embed__inline {
  width: 100%;
}
.youtube-embed__inline iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
}
.youtube-embed.is-playing .youtube-embed__trigger {
  display: none;
}
.youtube-embed .modal__wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100% + 48px);
  height: 100%;
  transform: translateX(-24px);
  display: none;
  justify-content: center;
  align-items: center;
  background: rgb(0, 0, 0);
  z-index: 1000;
}
.youtube-embed .modal__wrapper.is-open {
  display: flex;
}
.youtube-embed .modal__content {
  position: relative;
  width: 100%;
  z-index: 0;
}
@media (orientation: landscape) {
  .youtube-embed .modal__content {
    width: auto;
    height: 100%;
    aspect-ratio: 16/9;
  }
}
.youtube-embed .modal__content iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
  border: none;
}
.youtube-embed .modal__close {
  position: absolute;
  top: 16px;
  right: 40px;
  width: 40px;
  height: 40px;
  padding-top: 3px;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 3rem;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1;
}

.use-case {
  margin-bottom: 44px;
}
@media screen and (min-width: 768px) {
  .use-case {
    margin-bottom: 72px;
  }
}
.use-case .section__title {
  height: 41px;
}
@media screen and (min-width: 768px) {
  .use-case .section__title {
    height: 49px;
  }
}
.use-case ul {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  max-width: 450px;
}
@media screen and (min-width: 768px) {
  .use-case ul {
    gap: 20px;
    max-width: 600px;
  }
}
.use-case ul li {
  width: calc((100% - 12px) / 2);
}
@media screen and (min-width: 768px) {
  .use-case ul li {
    width: calc((100% - 20px) / 2);
  }
}
.use-case ul li p {
  width: 100%;
  color: #595959;
  font-size: 1.4rem;
  line-height: 140%;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .use-case ul li p {
    font-size: 1.8rem;
  }
}
.use-case .video__wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  margin-bottom: 12px;
  border-radius: 20px;
  box-sizing: content-box;
  background: var(--color-border-secondary);
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .use-case .video__wrapper {
    aspect-ratio: 9/16;
  }
}
.use-case .video__wrapper:focus-within {
  outline: auto #005fcc;
}
@supports selector(:has(:focus-visible)) {
  .use-case .video__wrapper:focus-within {
    outline: none;
  }
  .use-case .video__wrapper:has(.video__trigger:focus-visible) {
    outline: auto #005fcc;
  }
}
.use-case .video__wrapper.is-playing {
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.use-case .video__wrapper.is-playing .video__inline {
  display: block;
}
.use-case .video__trigger {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
.use-case .video__trigger:focus, .use-case .video__trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px blue inset;
}
.use-case .video__trigger img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 100%;
  height: auto;
}
.use-case .video__trigger span {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 100px;
  border: 2px solid #FFF;
  background: rgba(0, 0, 0, 0.25);
}
.use-case .video__trigger span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  display: block;
  width: 14px;
  height: 20px;
  background: var(--color-white);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.use-case .video__inline {
  display: none;
  width: 100%;
}
.use-case .video__inline video {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}
.use-case .video.is-playing .video__trigger {
  display: none;
}

.lets-try-it {
  margin-bottom: 54px;
}
@media screen and (min-width: 768px) {
  .lets-try-it {
    margin-bottom: 0;
  }
}
.lets-try-it .section__lead span.show__on-pc-layout {
  display: none !important;
}
@media screen and (min-width: 768px) {
  .lets-try-it .section__lead span.show__on-pc-layout {
    display: inline-block !important;
  }
}
.lets-try-it ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 450px;
}
@media screen and (min-width: 768px) {
  .lets-try-it ul {
    flex-direction: row;
    gap: 20px;
    max-width: 600px;
  }
}
.lets-try-it ul li {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .lets-try-it ul li {
    width: calc((100% - 20px) / 2);
  }
}
.lets-try-it ul li a,
.lets-try-it ul li button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  aspect-ratio: 342/170;
  border-radius: 20px;
  background: var(--color-border-secondary);
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .lets-try-it ul li a,
  .lets-try-it ul li button {
    aspect-ratio: 290/390;
  }
}
.lets-try-it ul li a picture,
.lets-try-it ul li button picture {
  width: 100%;
  height: 100%;
}
.lets-try-it ul li a picture img,
.lets-try-it ul li button picture img {
  width: 100%;
  height: 100%;
}

.qr-modal__wrapper {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  z-index: 100;
  color: var(--color-text-primary);
}
.qr-modal__wrapper.is-open {
  display: flex;
}
.qr-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1;
}
.qr-modal__close::before, .qr-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 27px;
  background: rgb(26, 26, 26);
}
.qr-modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.qr-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.qr-modal__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 390px;
  height: 375px;
  padding-top: 14px;
  border-radius: 20px;
  background: var(--color-white);
}
.qr-modal__content img {
  width: 172px;
  height: 172px;
  margin-bottom: 28px;
}
.qr-modal__content > p {
  display: block;
  margin-bottom: 10px;
  font-size: 1.8rem;
  line-height: 140%;
  text-align: center;
}
.qr-modal__content small {
  color: rgb(144, 144, 144);
  font-size: 1.1rem;
}

.button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 320px;
  height: 55px;
  margin: 0 auto;
  border-radius: 100px;
  color: var(--color-white);
  font-size: 1.8rem;
  font-weight: 600;
  background: var(--color-black);
  transform: translateZ(0);
  transition: opacity 0.4s ease;
  opacity: 1;
  cursor: pointer;
}
.button span {
  position: relative;
  margin-left: -12px;
  opacity: 1;
}
.button.arrow::after {
  content: "";
  width: 10px;
  height: 10px;
  border: 2.5px solid var(--color-white);
  border-right: none;
  border-bottom: none;
  position: absolute;
  top: 50%;
  right: 22px;
  transform: translate(0, -50%) rotate(-225deg);
  transition: translate 0.4s ease, rotate 0.4s ease;
}
.button.outline {
  background: transparent;
  filter: none;
  border: 1px solid var(--color-LYnavy100);
  color: var(--color-LYnavy100);
}
@media screen and (hover: hover) {
  .button.outline:hover {
    opacity: 0.6;
  }
}
.button.outline::after {
  border-color: var(--color-LYnavy100);
}

.animation {
  opacity: 0;
}

.fade-in-down {
  animation-fill-mode: both;
  animation-duration: 1s;
  animation-name: fadeInDown;
  visibility: visible !important;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.coming-soon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #F3F3F3;
}
.coming-soon p {
  width: auto !important;
  font-size: 1.5rem !important;
  font-weight: 600;
  line-height: 140%;
  text-align: center;
  background: var(--gradation-agent-i-2);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media screen and (min-width: 768px) {
  .coming-soon p {
    font-size: 1.8rem !important;
  }
}

.key-movie .coming-soon p {
  font-size: 1.7rem !important;
}
@media screen and (min-width: 768px) {
  .key-movie .coming-soon p {
    font-size: 2rem !important;
  }
}

header {
  position: absolute !important;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0) translateZ(0);
  width: 100%;
  max-width: 498px;
  z-index: 100 !important;
}
@media screen and (min-width: 768px) {
  header {
    max-width: 704px;
  }
}
header.zindex-down {
  z-index: 1 !important;
}
header .corporate-logo {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  margin: 0 auto;
  padding: 15px 24px;
  z-index: 99;
}
@media screen and (min-width: 768px) {
  header .corporate-logo {
    gap: 20px;
    padding: 20px 20px;
  }
}
header .corporate-logo picture {
  display: block;
  position: relative;
}
header .corporate-logo picture img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media screen and (hover: hover) {
  header .corporate-logo a:hover {
    opacity: 1 !important;
  }
}
header .corporate-logo .yj-logo picture {
  width: 29px;
  padding-top: 51.724137931%;
}
@media screen and (min-width: 768px) {
  header .corporate-logo .yj-logo picture {
    width: 85px;
    padding-top: 24.7058823529%;
  }
}
header .corporate-logo .line-logo picture {
  width: 43px;
  padding-top: 34.8837209302%;
}
@media screen and (min-width: 768px) {
  header .corporate-logo .line-logo picture {
    width: 57px;
    padding-top: 35.0877192982%;
  }
}

.loginArea {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 7px;
}
.loginArea em {
  font-style: normal;
}
.loginArea a {
  text-decoration: none;
}

.footer {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  padding: 50px 24px calc(100px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  background: #F4F6FA;
  color: var(--color-text-primary);
  font-size: 1.4rem;
  text-align: center;
  z-index: 0;
}
@media screen and (min-width: 990px) {
  .footer {
    padding-bottom: 48px;
  }
}
.footer a {
  color: var(--color-text-link);
}
@media screen and (hover: hover) {
  .footer a:hover {
    opacity: 1 !important;
  }
}
.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 664px;
  margin: 0 auto 44px;
}
.footer__notes {
  font-size: 1.3rem;
  line-height: 160%;
}
.footer__notes ul {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.footer__notes ul li {
  display: flex;
  text-align: start;
}
.footer__notes ul li::before {
  content: "・";
  display: block;
  padding: 0 5px;
}
.footer__qr-text {
  font-size: 1rem;
  opacity: 0.7;
  text-align: center;
  margin: 0 auto;
}
.footer__qr-text a {
  text-decoration: underline;
}
.footer__property-link {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.footer__property-link li {
  display: inline-block;
}
.footer__property-link li a {
  display: block;
}
.footer__sub-link {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 7px;
  width: 100%;
  margin: 0 auto 16px;
  font-size: 1.2rem;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .footer__sub-link {
    max-width: 260px;
  }
}
.footer__sub-link li {
  display: flex;
  gap: 7px;
}
.footer__sub-link li:not(:first-child):before {
  content: "-";
  display: inline-block;
  color: var(--color-border-secondary);
}
@media screen and (max-width: 767px) {
  .footer__sub-link li:nth-child(3):before {
    display: none;
  }
}
.footer__sub-link li a {
  display: block;
  height: 100%;
}
.footer__sub-link .show__on-pc-layout {
  display: inline !important;
}
@media screen and (max-width: 767px) {
  .footer__sub-link .show__on-pc-layout {
    display: none !important;
  }
}
.footer__copyright {
  font-size: 1.2rem;
}
.footer .sns {
  margin-bottom: 44px;
  display: flex;
  text-align: center;
  justify-content: center;
  transition: opacity 0.4s ease, translate 0.4s ease;
}
.footer .sns__inner {
  display: flex;
  align-items: center;
  gap: 16px;
}
.footer .sns__inner > li {
  transition: translate 0.4s ease;
}
.footer .sns__inner > li a {
  display: block;
  width: 43px;
  height: 43px;
  padding: 0;
  border-radius: 100px;
}
.footer .sns__inner > li a img {
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.emg {
  text-align: center;
}
.emg .is-showEmg {
  margin-top: 20px;
}
@media screen and (max-width: 989px) {
  .emg.is-emg {
    display: none;
  }
}
@media screen and (min-width: 990px) {
  .emg.is-mem {
    display: none;
  }
}/*# sourceMappingURL=index.css.map */