/*! Writen  by SCSS */
.sec_main {
  background: #FFF;
  position: relative;
  aspect-ratio: 1600 / 940;
  overflow: hidden; }
  @media screen and (max-width: 480px) {
    .sec_main {
      aspect-ratio: 1200 / 940; } }
  .sec_main .inset {
    position: absolute;
    inset: 0; }
  .sec_main .main_cap {
    transition: 0.5s opacity ease-in-out 0s;
    position: absolute;
    right: 5px;
    bottom: 5px;
    font-size: 10px;
    display: block;
    padding: 3px 5px;
    line-height: 1.5;
    background: none;
    color: #FFFFFF;
    text-align: right;
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.8), 0px 0px 1px rgba(0, 0, 0, 0.8), 0px 0px 2px rgba(0, 0, 0, 0.8), 0px 0px 3px rgba(0, 0, 0, 0.8), 0px 0px 4px rgba(0, 0, 0, 0.8), 0px 0px 5px rgba(0, 0, 0, 0.8); }
    .sec_main .main_cap.left {
      right: auto;
      left: 5px;
      text-align: left; }
  .sec_main .main_bg_gray:before {
    content: "";
    position: absolute;
    inset: 0;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("../images/lp/main/main_bg_gray.jpg"); }
  .sec_main .main_bg_color {
    clip-path: inset(0 100% 0 0);
    transition: 1.2s clip-path cubic-bezier(0.75, 0, 0.25, 1) 0s; }
    .sec_main .main_bg_color:before {
      content: "";
      position: absolute;
      inset: 0;
      background-position: top center;
      background-repeat: no-repeat;
      background-size: cover;
      background-image: url("../images/lp/main/main_bg.jpg"); }
    body.s1 .sec_main .main_bg_color {
      clip-path: inset(0 0 0 0); }
    .sec_main .main_bg_color .main_cap {
      opacity: 1; }
  .sec_main .maincopy_wrap {
    position: absolute;
    max-width: 490px;
    width: 30.63%;
    inset: 0;
    bottom: auto;
    margin: auto;
    top: 12.77%; }
    @media screen and (max-width: 820px) {
      .sec_main .maincopy_wrap {
        top: 6%;
        width: 35%; } }
    @media screen and (max-width: 480px) {
      .sec_main .maincopy_wrap {
        top: 5%;
        width: 50%; } }
    .sec_main .maincopy_wrap .site_title path {
      visibility: hidden;
      filter: drop-shadow(0 0 6px rgba(255, 215, 100, 0)); }
    .sec_main .maincopy_wrap .site_title .cls-1 {
      perspective: 1000px;
      transform-style: preserve-3d;
      fill: none;
      stroke: #0d357f;
      stroke-width: 1px; }
      @media screen and (max-width: 480px) {
        .sec_main .maincopy_wrap .site_title .cls-1 {
          stroke-width: 1.3px; } }
    .sec_main .maincopy_wrap .main_copy {
      position: absolute;
      left: 45%;
      top: 34%;
      width: 51.03%;
      clip-path: inset(0 100% 0 0);
      transition: 1s clip-path cubic-bezier(0.75, 0, 0.25, 1) 0s; }
      body.s4 .sec_main .maincopy_wrap .main_copy {
        clip-path: inset(0 0 0 0); }
  .sec_main .main_parse_group {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50%; }
    @media screen and (max-width: 480px) {
      .sec_main .main_parse_group {
        width: 65%; } }
    .sec_main .main_parse_group .main_parse {
      opacity: 0;
      transform: scale(1.1);
      transform-origin: center bottom;
      transition: 1.5s transform ease-in-out 0s,1.5s opacity ease-in-out 0s; }
      body.s2 .sec_main .main_parse_group .main_parse {
        opacity: 1;
        transform: scale(1); }
    .sec_main .main_parse_group .main_cap {
      opacity: 0; }
      body.s2 .sec_main .main_parse_group .main_cap {
        opacity: 1; }
    .sec_main .main_parse_group .twincle {
      position: absolute;
      inset: 0;
      transition-delay: 3s;
      opacity: 0;
      transition: 0.5s opacity ease-in-out 1.5s; }
      body.s2 .sec_main .main_parse_group .twincle {
        opacity: 1; }
      .sec_main .main_parse_group .twincle li {
        position: absolute;
        inset: 0;
        animation-name: hikari;
        animation-timing-function: linear;
        animation-iteration-count: infinite; }
        .sec_main .main_parse_group .twincle li img {
          width: 100%; }
          @media screen and (max-width: 480px) {
            .sec_main .main_parse_group .twincle li img {
              height: 100%;
              object-fit: cover;
              object-position: right bottom; } }
        .sec_main .main_parse_group .twincle li.tw01 {
          animation-delay: -2.5s;
          animation-duration: 4.5s; }
        .sec_main .main_parse_group .twincle li.tw02 {
          animation-delay: -3s;
          animation-duration: 6.5s; }
        .sec_main .main_parse_group .twincle li.tw03 {
          animation-delay: -3.5s;
          animation-duration: 3s; }
        .sec_main .main_parse_group .twincle li.tw04 {
          animation-delay: -4s;
          animation-duration: 4.5s; }
        .sec_main .main_parse_group .twincle li.tw05 {
          animation-delay: -4.5s;
          animation-duration: 6.5s; }
        .sec_main .main_parse_group .twincle li.tw06 {
          animation-delay: -5s;
          animation-duration: 3s; }
        .sec_main .main_parse_group .twincle li.tw07 {
          animation-delay: -3s;
          animation-duration: 3s; }
        .sec_main .main_parse_group .twincle li.tw08 {
          animation-delay: -4s;
          animation-duration: 4s; }
        .sec_main .main_parse_group .twincle li.tw09 {
          animation-delay: -3.5s;
          animation-duration: 5s; }

@keyframes bgL_R {
  0% {
    transform-origin: left;
    transform: scaleX(0); }
  50% {
    transform-origin: left;
    transform: scaleX(1); }
  50.001% {
    transform-origin: right; }
  100% {
    transform-origin: right;
    transform: scaleX(0); } }
@keyframes hikari {
  0% {
    opacity: 0;
    transform: translateY(0%); }
  10% {
    opacity: 1; }
  85% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: translateY(-60%); } }

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