@charset "UTF-8";
/*! Writen  by SCSS */
.mainvisual {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9; }
  @media screen and (max-width: 480px) {
    .mainvisual {
      aspect-ratio: 414/450; } }
  .mainvisual .inset {
    position: absolute;
    inset: 0; }
  .mainvisual .scene01 {
    background: #FFF; }
    .mainvisual .scene01 .main_copy_group {
      position: absolute;
      inset: 0;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      opacity: 0;
      transform: scale(1.3);
      transition: 1.5s opacity cubic-bezier(0.75, 0, 0.25, 1) 0s, 1.5s transform cubic-bezier(0.75, 0, 0.25, 1) 0s, 1.5s filter cubic-bezier(0.75, 0, 0.25, 1) 0s; }
      .mainvisual .scene01 .main_copy_group .main_copy {
        font-size: clamp(30px, 4vw, 64px);
        color: #62533f;
        line-height: 1.5;
        letter-spacing: 0.05em; }
        @media screen and (max-width: 820px) {
          .mainvisual .scene01 .main_copy_group .main_copy {
            font-size: 5vw; } }
        @media screen and (max-width: 480px) {
          .mainvisual .scene01 .main_copy_group .main_copy {
            font-size: 9.5vw; } }
        .mainvisual .scene01 .main_copy_group .main_copy span {
          display: inline-block;
          line-height: 1; }
          .mainvisual .scene01 .main_copy_group .main_copy span.big {
            font-size: 180%;
            color: #900;
            line-height: 0.8; }
          .mainvisual .scene01 .main_copy_group .main_copy span.small {
            font-size: 80%; }
          @media screen and (max-width: 480px) {
            .mainvisual .scene01 .main_copy_group .main_copy span.vpc480 {
              display: none; } }
        .mainvisual .scene01 .main_copy_group .main_copy.copy_img {
          width: 66.59%;
          margin: 0 auto;
          max-width: 799px; }
          @media screen and (max-width: 820px) {
            .mainvisual .scene01 .main_copy_group .main_copy.copy_img {
              width: 65%; } }
          @media screen and (max-width: 480px) {
            .mainvisual .scene01 .main_copy_group .main_copy.copy_img {
              width: 85%; } }
  .mainvisual .scene02 .main_image:before {
    content: "";
    position: absolute;
    inset: 0;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("../images/top/main/main_view.jpg");
    transform-origin: bottom center;
    transform-origin: 47% 78.6%;
    opacity: 0;
    transition: 1.5s opacity ease-in-out 0s, 1.5s filter ease-in-out 0s, 3s transform cubic-bezier(0.75, 0, 0.25, 1) 0s, 3s transform-origin cubic-bezier(0.75, 0, 0.25, 1) 0s;
    transform: scale(2);
    filter: brightness(300%);
    will-change: opacity,transform,filter; }
    @media screen and (max-width: 480px) {
      .mainvisual .scene02 .main_image:before {
        transform-origin: 54.5% 95.6%;
        background-image: url("../images/top/main/main_view_sp.jpg"); } }
  .mainvisual .scene02 .main_image img {
    width: 100%; }
  .mainvisual .scene02 .main_line_group .main_line {
    clip-path: inset(100% 0 0 0);
    transition: 1s clip-path ease-in-out 0s;
    mix-blend-mode: screen; }
    @media screen and (max-width: 480px) {
      .mainvisual .scene02 .main_line_group .main_line {
        transition: 1.5s clip-path ease-in-out 0s; } }
  .mainvisual .scene02 .main_line_group .main_line_prot {
    opacity: 0;
    transform: translateY(20px);
    transition: 1s opacity ease-in-out 0.2s,1s transform ease-in-out 0.2s; }
    @media screen and (max-width: 480px) {
      .mainvisual .scene02 .main_line_group .main_line_prot {
        transition: 1s opacity ease-in-out 0.4s,1s transform ease-in-out 0.4s; } }
  .mainvisual .scene02 .main_zone_group .main_zone {
    opacity: 0;
    transform: translateY(20px);
    transition: 1.5s opacity ease-in-out 0s, 1.5s transform cubic-bezier(0.75, 0, 0.25, 1) 0s; }
    .mainvisual .scene02 .main_zone_group .main_zone.zone02 {
      transition-delay: 0.5s; }
    .mainvisual .scene02 .main_zone_group .main_zone.zone03 {
      transition-delay: 1s; }
  .mainvisual .scene02 .main_local_group .main_local {
    clip-path: inset(100% 0 0 0);
    transition: 1.5s clip-path ease-in-out 0s; }
  .mainvisual .scene02 .main_local_group .twincle {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: 1.2s opacity ease-in-out 0.5s;
    width: 100%; }
    .mainvisual .scene02 .main_local_group .twincle li {
      position: absolute;
      inset: 0;
      background: center center/cover no-repeat;
      opacity: 0; }
      .mainvisual .scene02 .main_local_group .twincle li.tw01 {
        animation-delay: -2.5s !important;
        animation-duration: 4.5s !important;
        background-image: url(../images/top/main/tw01.png); }
        @media screen and (max-width: 480px) {
          .mainvisual .scene02 .main_local_group .twincle li.tw01 {
            background-image: url(../images/top/main/tw01_sp.png); } }
      .mainvisual .scene02 .main_local_group .twincle li.tw02 {
        animation-delay: -3s !important;
        animation-duration: 6.5s !important;
        background-image: url(../images/top/main/tw02.png); }
        @media screen and (max-width: 480px) {
          .mainvisual .scene02 .main_local_group .twincle li.tw02 {
            background-image: url(../images/top/main/tw02_sp.png); } }
      .mainvisual .scene02 .main_local_group .twincle li.tw03 {
        animation-delay: -3.5s !important;
        animation-duration: 3s !important;
        background-image: url(../images/top/main/tw03.png); }
        @media screen and (max-width: 480px) {
          .mainvisual .scene02 .main_local_group .twincle li.tw03 {
            background-image: url(../images/top/main/tw03_sp.png); } }
      .mainvisual .scene02 .main_local_group .twincle li.tw04 {
        animation-delay: -4s !important;
        animation-duration: 4.5s !important;
        background-image: url(../images/top/main/tw04.png); }
        @media screen and (max-width: 480px) {
          .mainvisual .scene02 .main_local_group .twincle li.tw04 {
            background-image: url(../images/top/main/tw04_sp.png); } }
      .mainvisual .scene02 .main_local_group .twincle li.tw05 {
        animation-delay: -4.5s !important;
        animation-duration: 6.5s !important;
        background-image: url(../images/top/main/tw05.png); }
        @media screen and (max-width: 480px) {
          .mainvisual .scene02 .main_local_group .twincle li.tw05 {
            background-image: url(../images/top/main/tw05_sp.png); } }
      .mainvisual .scene02 .main_local_group .twincle li.tw06 {
        animation-delay: -5s !important;
        animation-duration: 3s !important;
        background-image: url(../images/top/main/tw06.png); }
        @media screen and (max-width: 480px) {
          .mainvisual .scene02 .main_local_group .twincle li.tw06 {
            background-image: url(../images/top/main/tw06_sp.png); } }
      .mainvisual .scene02 .main_local_group .twincle li.tw07 {
        animation-delay: -5.5s !important;
        animation-duration: 5.5s !important;
        background-image: url(../images/top/main/tw07.png); }
        @media screen and (max-width: 480px) {
          .mainvisual .scene02 .main_local_group .twincle li.tw07 {
            background-image: url(../images/top/main/tw07_sp.png); } }
      .mainvisual .scene02 .main_local_group .twincle li.tw08 {
        animation-delay: -6s !important;
        animation-duration: 2.5s !important;
        background-image: url(../images/top/main/tw08.png); }
        @media screen and (max-width: 480px) {
          .mainvisual .scene02 .main_local_group .twincle li.tw08 {
            background-image: url(../images/top/main/tw08_sp.png); } }
@keyframes hikari {
  0% {
    opacity: 0;
    transform: translateY(0%); }
  30% {
    opacity: 1; }
  75% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: translateY(-20%); } }
@keyframes hikari_sp {
  0% {
    opacity: 0;
    transform: translateY(0%); }
  30% {
    opacity: 1; }
  75% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: translateY(-20%); } }
  .mainvisual .scene02 .main_local_group .main_local_prot {
    opacity: 0;
    transform: translateY(20px);
    transition: 1.5s opacity ease-in-out 0.5s,1.5s transform ease-in-out 0.5s; }
  .mainvisual .scene02 .main_prot {
    opacity: 0;
    transform: translateY(20px);
    transition: 1s opacity ease-in-out 0s,1s transform ease-in-out 0s; }
  .mainvisual .scene02 .last_copy {
    position: absolute;
    right: 1.88%;
    top: 3.34%;
    font-size: clamp(30px, 3.75vw, 60px);
    color: #62533f;
    line-height: 1.4;
    letter-spacing: 0.05em;
    text-align: right;
    opacity: 0;
    transform: translateY(15px);
    transition: 1.5s opacity cubic-bezier(0.75, 0, 0.25, 1) 0s, 1.5s transform cubic-bezier(0.75, 0, 0.25, 1) 0s; }
    @media screen and (max-width: 480px) {
      .mainvisual .scene02 .last_copy {
        transform: scale(1.3);
        display: flex;
        justify-content: center;
        align-items: center;
        transform-origin: center;
        text-align: center;
        top: 13%;
        left: 0;
        right: 0;
        bottom: auto;
        font-size: 8vw; } }

/*
	▼260911時点 アニメーションの雛形のみ準備
	アニメーションを組み始めたら、このコメントは削除して下さい。
*/
#mainvisual.s1 .scene01 .main_copy_group.first {
  opacity: 1;
  transform: scale(1); }
#mainvisual.s1_2 .scene01 .main_copy_group.first {
  opacity: 0;
  filter: blur(10px); }
#mainvisual.s1_3 .scene01 .main_copy_group.second {
  opacity: 1;
  transform: scale(1); }
#mainvisual.s1_4 .scene01 .main_copy_group.second {
  opacity: 0;
  filter: blur(10px); }
#mainvisual.s1_5 .scene01 .main_copy_group.third {
  opacity: 1;
  transform: scale(1); }
#mainvisual.s1_6 .scene01 .main_copy_group.third {
  opacity: 0;
  filter: blur(10px); }
#mainvisual.s1_7 .scene01 .main_copy_group.fourth {
  opacity: 1;
  transform: scale(1); }
#mainvisual.s1_8 .scene01 .main_copy_group.fourth {
  opacity: 0;
  filter: blur(10px); }
#mainvisual.s2 .scene02 .main_image:before {
  opacity: 1;
  filter: brightness(100%); }
#mainvisual.s2_2 .scene02 .main_image:before {
  transform: scale(1);
  transform-origin: 50% 50%; }
#mainvisual.s2_3 .scene02 .main_line_group .main_line {
  clip-path: inset(0 0 0 0); }
#mainvisual.s2_3 .scene02 .main_line_group .main_line_prot {
  opacity: 1;
  transform: translateY(0); }
#mainvisual.s2_4 .scene02 .main_zone_group .main_zone {
  opacity: 1;
  transform: translateY(0); }
#mainvisual.s2_5 .scene02 .main_local_group .main_local {
  clip-path: inset(0 0 0 0); }
#mainvisual.s2_5 .scene02 .main_local_group .twincle {
  opacity: 1; }
  #mainvisual.s2_5 .scene02 .main_local_group .twincle li {
    animation: hikari 10s linear 0s infinite both; }
    @media screen and (max-width: 480px) {
      #mainvisual.s2_5 .scene02 .main_local_group .twincle li {
        animation: hikari_sp 10s linear 0s infinite both; } }
#mainvisual.s2_5 .scene02 .main_local_group .main_local_prot {
  opacity: 1;
  transform: translateY(0); }
#mainvisual.s2_6 .scene02 .last_copy {
  opacity: 1;
  transform: translateY(0); }
  @media screen and (max-width: 480px) {
    #mainvisual.s2_6 .scene02 .last_copy {
      transform: scale(1); } }

/*# sourceMappingURL=mainvisual.css.map */