@keyframes cut1_hand_l {
  0% {
    top: -148px;
    left: -6px;
    opacity: 0; }
  100% {
    top: -58px;
    left: -26px;
    opacity: 1; } }
@keyframes cut1_hand_r {
  0% {
    top: 28px;
    left: -65px;
    opacity: 0; }
  100% {
    top: -28px;
    left: -90px;
    opacity: 1; } }
@keyframes cut1_hand_pon {
  0% {
    top: -88px;
    left: -110px;
    opacity: 0; }
  100% {
    top: -98px;
    left: -120px;
    opacity: 1; } }
@keyframes cut1_out {
  0% {
    transform: scale(1);
    opacity: 1; }
  100% {
    transform: scale(1.2);
    opacity: 0; } }
@keyframes cut2_in {
  0% {
    transform: scale(1.8);
    opacity: 0; }
  100% {
    transform: scale(1);
    opacity: 1; } }
@keyframes cut2_pon {
  0% {
    background-position: calc(50% + 10px) calc(50% + 10px);
    opacity: 0; }
  100% {
    background-position: calc(50% + 0px) calc(50% + 0px);
    opacity: 1; } }
@keyframes cut2_out {
  0% {
    transform: scale(1);
    opacity: 1; }
  100% {
    transform: scale(1.2);
    opacity: 0; } }
@keyframes cut3_in {
  0% {
    transform: scale(1.2);
    opacity: 0; }
  100% {
    transform: scale(1);
    opacity: 1; } }
@keyframes cut3_bg {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes cut3_txt {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    letter-spacing: 0.1em;
    opacity: 0; }
  60% {
    opacity: 1; }
  100% {
    transform: translate(-50%, -50%) scale(1);
    letter-spacing: 0.4em;
    opacity: 0; } }
@keyframes cut3_logo {
  0% {
    transform: translate(-50%, -50%) scale(1.6);
    opacity: 0; }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1; } }
@keyframes cut3_logo_sp {
  0% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0; }
  100% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 1; } }
@keyframes cut3_logo_line {
  0% {
    width: 1px;
    height: 1px; }
  50% {
    width: 297px;
    height: 1px; }
  100% {
    width: 297px;
    height: 460px; } }
@keyframes obj_in {
  0% {
    transform: scale(0.9); }
  100% {
    transform: scale(1); } }
@keyframes floatA {
  0% {
    transform: translateY(0); }
  25% {
    transform: translateY(-10px); }
  50% {
    transform: translateY(5px); }
  75% {
    transform: translateY(-7px); }
  100% {
    transform: translateY(0); } }
@keyframes RotateA {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
@keyframes boundA {
  0% {
    transform: scale(1); }
  2% {
    transform: scale(0.7); }
  5% {
    transform: scale(1.3); }
  7% {
    transform: scale(0.85); }
  10% {
    transform: scale(1.15); }
  12% {
    transform: scale(0.95); }
  15% {
    transform: scale(1.05); }
  17% {
    transform: scale(1); }
  100% {
    transform: scale(1); } }
@keyframes obj_1 {
  0% {
    width: 10px;
    opacity: 0;
    left: 0px;
    top: 0px; }
  100% {
    width: 393px;
    opacity: 1;
    left: -815px;
    top: -510px; } }
@keyframes obj_2 {
  0% {
    width: 10px;
    opacity: 0;
    left: 0px;
    top: 0px;
    transform: rotate(90deg); }
  100% {
    width: 163px;
    opacity: 1;
    left: 314px;
    top: -280px;
    transform: rotate(0deg); } }
@keyframes obj_3 {
  0% {
    width: 10px;
    opacity: 0;
    left: 0px;
    top: 0px;
    transform: rotate(90deg); }
  100% {
    width: 363px;
    opacity: 1;
    left: -556px;
    top: 26px;
    transform: rotate(0deg); } }
@keyframes obj_4 {
  0% {
    width: 10px;
    opacity: 0;
    left: 0px;
    top: 0px;
    transform: rotate(-90deg); }
  100% {
    width: 517px;
    opacity: 1;
    left: 332px;
    top: -102px;
    transform: rotate(0deg); } }
@keyframes obj_1_sp {
  0% {
    width: 10px;
    opacity: 0;
    left: 0px;
    top: 0px; }
  100% {
    width: 210px;
    opacity: 1;
    left: -285px;
    top: calc(-50vh - 70px); } }
@keyframes obj_2_sp {
  0% {
    width: 10px;
    opacity: 0;
    left: 0px;
    top: 0px;
    transform: rotate(90deg); }
  100% {
    width: 80px;
    opacity: 1;
    left: 50px;
    top: calc(-50vh + 60px);
    transform: rotate(0deg); } }
@keyframes obj_3_sp {
  0% {
    width: 10px;
    opacity: 0;
    left: 0px;
    top: 0px;
    transform: rotate(90deg); }
  100% {
    width: 140px;
    opacity: 1;
    left: -130px;
    top: calc(50vh - 170px);
    transform: rotate(0deg); } }
@keyframes obj_4_sp {
  0% {
    width: 10px;
    opacity: 0;
    left: 0px;
    top: 0px;
    transform: rotate(-90deg); }
  100% {
    width: 250px;
    opacity: 1;
    left: 50px;
    top: calc(50vh - 260px);
    transform: rotate(0deg); } }
@keyframes ianime {
  0% {
    background-position: 0 0; }
  50% {
    background-position: 100% 0; }
  100% {
    background-position: 0 0; } }
@keyframes item_1 {
  0% {
    transform: scale(0.1);
    opacity: 0; }
  70% {
    transform: scale(1.4);
    opacity: 1; }
  100% {
    transform: scale(1);
    opacity: 1; } }
.home .sec_1 {
  width: 100%;
  height: 100vh;
  position: relative; }
  .home .sec_1 .sec_of {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden; }
  .home .sec_1 .cut_1 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_1 .cut_1 {
        transform: translate(-50%, -50%) scale(0.7); } }
    .home .sec_1 .cut_1 .hand_l {
      width: 120px;
      position: absolute;
      top: -148px;
      left: -6px;
      opacity: 0; }
    .home .sec_1 .cut_1 .hand_r {
      width: 176px;
      position: absolute;
      top: 28px;
      left: -65px;
      opacity: 0; }
    .home .sec_1 .cut_1 .hand_pon {
      width: 73px;
      position: absolute;
      top: -98px;
      left: -120px;
      opacity: 0; }
    .home .sec_1 .cut_1.active .hand_l {
      animation: .3s forwards cut1_hand_l ease-out; }
    .home .sec_1 .cut_1.active .hand_r {
      animation: .3s forwards cut1_hand_r ease-out; }
    .home .sec_1 .cut_1.active .hand_pon {
      animation: .3s .2s forwards cut1_hand_pon ease-out; }
    .home .sec_1 .cut_1.comp {
      animation: .3s forwards cut1_out ease-out; }
  .home .sec_1 .cut_2 {
    background: #fff url("../img/bg_hirameki_1.webp") repeat center/1449px auto;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_1 .cut_2 {
        background-size: 680px auto; } }
    .home .sec_1 .cut_2 .pon {
      background: url("../img/bg_hirameki_2.webp") repeat center/1449px auto;
      width: 100%;
      height: 100%;
      position: absolute;
      opacity: 0; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_1 .cut_2 .pon {
          background-size: 680px auto; } }
    .home .sec_1 .cut_2.active {
      animation: .3s forwards cut2_in ease-out; }
      .home .sec_1 .cut_2.active .pon {
        animation: .2s .4s forwards cut2_pon ease-out; }
    .home .sec_1 .cut_2.comp {
      animation: .3s forwards cut2_out ease-out; }
  .home .sec_1 .cut_3 {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0; }
    .home .sec_1 .cut_3 .bg {
      background: url("../img/bg_main.webp") no-repeat center/cover;
      width: 100%;
      height: 100%;
      position: absolute;
      opacity: 0;
      z-index: -2; }
    .home .sec_1 .cut_3 .obj {
      position: absolute;
      left: 50%;
      top: 50%; }
      .home .sec_1 .cut_3 .obj_1 {
        width: 393px;
        position: absolute;
        opacity: 0; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .home .sec_1 .cut_3 .obj_1 {
            width: 200px; } }
      .home .sec_1 .cut_3 .obj_2 {
        width: 163px;
        position: absolute;
        opacity: 0; }
        .home .sec_1 .cut_3 .obj_2 img {
          animation: RotateA 150s linear infinite reverse; }
      .home .sec_1 .cut_3 .obj_3 {
        width: 363px;
        position: absolute;
        opacity: 0; }
        .home .sec_1 .cut_3 .obj_3 img {
          animation: boundA 4s 1.6s ease-out infinite; }
      .home .sec_1 .cut_3 .obj_4 {
        width: 517px;
        position: absolute;
        opacity: 0; }
        .home .sec_1 .cut_3 .obj_4 img {
          animation: RotateA 200s linear infinite; }
    .home .sec_1 .cut_3 .item {
      position: absolute;
      left: 50%;
      top: 50%; }
      .home .sec_1 .cut_3 .item_1 {
        position: absolute;
        width: 498px;
        left: -912px;
        top: -400px;
        opacity: 0; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .home .sec_1 .cut_3 .item_1 {
            width: 230px;
            left: -300px;
            top: calc(-50vh - 10px); } }
        .home .sec_1 .cut_3 .item_1 img {
          animation: floatA 7s ease-in-out infinite;
          animation-delay: .1s; }
      .home .sec_1 .cut_3 .item_2 {
        position: absolute;
        width: 416px;
        left: 278px;
        top: -452px;
        opacity: 0;
        z-index: 10; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .home .sec_1 .cut_3 .item_2 {
            width: 190px;
            left: 40px;
            top: calc(-50vh - 10px); } }
        .home .sec_1 .cut_3 .item_2 img {
          animation: floatA 7s ease-in-out infinite;
          animation-delay: .4s; }
      .home .sec_1 .cut_3 .item_3 {
        position: absolute;
        width: 385px;
        left: -680px;
        top: 100px;
        opacity: 0; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .home .sec_1 .cut_3 .item_3 {
            width: 180px;
            left: -210px;
            top: calc(50vh - 150px); } }
      .home .sec_1 .cut_3 .item_4 {
        position: absolute;
        width: 358px;
        left: 475px;
        top: 70px;
        opacity: 0; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .home .sec_1 .cut_3 .item_4 {
            width: 170px;
            left: 85px;
            top: calc(50vh - 160px); } }
        .home .sec_1 .cut_3 .item_4 img {
          animation: floatA 6s ease-in-out infinite;
          animation-delay: .8s; }
      .home .sec_1 .cut_3 .item_5 {
        position: absolute;
        width: 80px;
        left: -420px;
        top: -326px;
        opacity: 0; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .home .sec_1 .cut_3 .item_5 {
            width: 36px;
            left: -80px;
            top: calc(-50vh + 30px); } }
        .home .sec_1 .cut_3 .item_5 img {
          animation: floatA 6s ease-in-out infinite;
          animation-delay: 1.2s; }
      .home .sec_1 .cut_3 .item_6 {
        position: absolute;
        width: 100px;
        left: 357px;
        top: 148px;
        opacity: 0; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .home .sec_1 .cut_3 .item_6 {
            width: 50px;
            left: 30px;
            top: calc(50vh - 100px); } }
        .home .sec_1 .cut_3 .item_6 img {
          animation: floatA 7s ease-in-out infinite;
          animation-delay: 1.6s; }
      .home .sec_1 .cut_3 .item_7 {
        position: absolute;
        width: 422px;
        left: calc(50vw - 422px);
        top: -50vh;
        opacity: 0;
        z-index: -1; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .home .sec_1 .cut_3 .item_7 {
            width: 190px;
            left: calc(50vw - 190px); } }
    .home .sec_1 .cut_3 .txt {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
      font-size: 3.6rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      white-space: nowrap;
      line-height: 1.5; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_1 .cut_3 .txt {
          font-size: 3rem; } }
    .home .sec_1 .cut_3 .logo {
      width: 337px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      opacity: 0; }
      .home .sec_1 .cut_3 .logo::before {
        content: "";
        width: 0px;
        height: 0px;
        border-top: solid 1px #000;
        border-right: solid 1px #000;
        position: absolute;
        right: -15px;
        top: -15px; }
      .home .sec_1 .cut_3 .logo::after {
        content: "";
        width: 0px;
        height: 0px;
        border-bottom: solid 1px #000;
        border-left: solid 1px #000;
        position: absolute;
        left: -15px;
        bottom: -15px; }
    .home .sec_1 .cut_3.active {
      animation: .3s forwards cut3_in ease-out; }
      .home .sec_1 .cut_3.active .bg {
        animation: 3s 4s forwards cut3_bg; }
      .home .sec_1 .cut_3.active .obj {
        animation: 3s forwards obj_in ease-out; }
        .home .sec_1 .cut_3.active .obj_1 {
          animation: 0.8s .1s forwards obj_1 ease-out; }
          @media only screen and (max-width: 768px), print and (min-width: 2cm) {
            .home .sec_1 .cut_3.active .obj_1 {
              animation: 0.8s .1s forwards obj_1_sp ease-out; } }
        .home .sec_1 .cut_3.active .obj_2 {
          animation: 0.7s .2s forwards obj_2 ease-out; }
          @media only screen and (max-width: 768px), print and (min-width: 2cm) {
            .home .sec_1 .cut_3.active .obj_2 {
              animation: 0.7s .2s forwards obj_2_sp ease-out; } }
        .home .sec_1 .cut_3.active .obj_3 {
          animation: 0.9s  forwards obj_3 ease-out; }
          @media only screen and (max-width: 768px), print and (min-width: 2cm) {
            .home .sec_1 .cut_3.active .obj_3 {
              animation: 0.9s  forwards obj_3_sp ease-out; } }
        .home .sec_1 .cut_3.active .obj_4 {
          animation: 0.6s .3s forwards obj_4 ease-out; }
          @media only screen and (max-width: 768px), print and (min-width: 2cm) {
            .home .sec_1 .cut_3.active .obj_4 {
              animation: 0.6s .3s forwards obj_4_sp ease-out; } }
      .home .sec_1 .cut_3.active .item_1 {
        animation: .6s 2.2s forwards item_1 ease-out; }
      .home .sec_1 .cut_3.active .item_2 {
        animation: .6s 2.3s forwards item_1 ease-out; }
      .home .sec_1 .cut_3.active .item_3 {
        animation: .6s 2.4s forwards item_1 ease-out; }
      .home .sec_1 .cut_3.active .item_4 {
        animation: .7s 2.5s forwards item_1 ease-out; }
      .home .sec_1 .cut_3.active .item_5 {
        animation: .6s 2.4s forwards item_1 ease-out; }
      .home .sec_1 .cut_3.active .item_6 {
        animation: .7s 2.3s forwards item_1 ease-out; }
      .home .sec_1 .cut_3.active .item_7 {
        animation: 2s 2.3s forwards cut3_bg ease-out; }
      .home .sec_1 .cut_3.active .txt {
        animation: 2.2s 0.4s forwards cut3_txt ease-out; }
      .home .sec_1 .cut_3.active .logo {
        animation: 1s 3s forwards cut3_logo; }
        .home .sec_1 .cut_3.active .logo::before {
          animation: 1s 3.8s forwards cut3_logo_line; }
        .home .sec_1 .cut_3.active .logo::after {
          animation: 1s 3.8s forwards cut3_logo_line; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .home .sec_1 .cut_3.active .logo {
            animation: 1s 3s forwards cut3_logo_sp; } }
.home .sec_ttl {
  font-size: 4.8rem;
  letter-spacing: 1em;
  line-height: 1;
  text-align: center;
  font-weight: 500;
  margin: 1em 0;
  opacity: 0;
  transition: 1s; }
  @media only screen and (max-width: 768px), print and (min-width: 2cm) {
    .home .sec_ttl {
      font-size: 3.2rem; } }
  .home .sec_ttl span {
    position: relative; }
    .home .sec_ttl span::before {
      content: "";
      width: 34px;
      height: 27px;
      background: url("../img/ttl_pon.svg") no-repeat center/contain;
      position: absolute;
      left: -0.9em;
      top: -0.2em;
      opacity: 0;
      transition: .6s .6s; }
  .home .sec_ttl.active {
    letter-spacing: 0.1em;
    opacity: 1; }
    .home .sec_ttl.active span::before {
      opacity: 1;
      left: -1.2em;
      top: -0.5em; }
.home .sec_2 {
  position: relative;
  width: 100%;
  z-index: 1;
  padding: 100px 0; }
  @media only screen and (max-width: 768px), print and (min-width: 2cm) {
    .home .sec_2 {
      padding: 50px 0 0; } }
  .home .sec_2 .obj_5 {
    position: absolute;
    left: calc(50% - 690px);
    top: 270px;
    width: 166px;
    position: absolute; }
    .home .sec_2 .obj_5 img {
      animation: RotateA 60s linear infinite; }
  .home .sec_2 .obj_6 {
    position: absolute;
    left: calc(50% + 520px);
    bottom: 0px;
    width: 134px;
    position: absolute; }
    .home .sec_2 .obj_6 img {
      animation: floatA 6s ease-in-out infinite; }
  .home .sec_2 h1 {
    font-size: 3.8rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.06em;
    line-height: 1.6; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_2 h1 {
        font-size: 2.4rem; } }
    .home .sec_2 h1 span {
      font-size: 4.6rem;
      display: inline-block;
      margin: 0 0.08em; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_2 h1 span {
          font-size: 3.2rem; } }
  .home .sec_2 p {
    text-align: center;
    margin-top: 2em;
    font-size: 2rem; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_2 p {
        font-size: 1.7rem;
        text-align: left; } }
.home .sec_3 {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 140px 0 80px; }
  @media only screen and (max-width: 768px), print and (min-width: 2cm) {
    .home .sec_3 {
      padding: 60px 0 50px; } }
  .home .sec_3 .obj_7 {
    position: absolute;
    left: calc(50% - 810px);
    bottom: 460px;
    width: 200px;
    position: absolute; }
    .home .sec_3 .obj_7 img {
      animation: RotateA 150s linear infinite reverse; }
  .home .sec_3 .bg {
    position: absolute;
    top: 10px;
    left: calc(50% - 2100px);
    z-index: -1;
    padding-top: 120px; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_3 .bg {
        left: calc(50% - 1050px);
        padding-top: 120px; } }
    .home .sec_3 .bg .ianime_01 {
      width: 320px;
      height: 120px;
      background: url("../img/ianime_01.webp") no-repeat 0 0/640px 120px;
      position: absolute;
      top: 92px;
      left: calc(50% - 780px);
      transform: rotate(-16deg);
      z-index: -2;
      animation: ianime 1.5s steps(1, jump-start) infinite; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_3 .bg .ianime_01 {
          background-size: 320px 60px;
          width: 160px;
          height: 60px;
          left: calc(50% - 300px);
          top: 86px; } }
    .home .sec_3 .bg .ianime_02 {
      width: 130px;
      height: 120px;
      background: url("../img/ianime_02.webp") no-repeat 0 0/260px 120px;
      position: absolute;
      top: 34px;
      left: calc(50% - 400px);
      transform: rotate(-10deg);
      z-index: -2;
      animation: ianime 1.5s steps(1, jump-start) infinite; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_3 .bg .ianime_02 {
          background-size: 130px 60px;
          width: 65px;
          height: 60px;
          top: 70px;
          left: calc(50% - 140px); } }
    .home .sec_3 .bg .ianime_03 {
      width: 240px;
      height: 120px;
      background: url("../img/ianime_03.webp") no-repeat 0 0/480px 120px;
      position: absolute;
      top: 10px;
      left: calc(50% - 180px);
      z-index: -2;
      animation: ianime 1.5s steps(1, jump-start) infinite; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_3 .bg .ianime_03 {
          background-size: 240px 60px;
          width: 120px;
          height: 60px;
          top: 62px;
          left: calc(50% - 65px); } }
    .home .sec_3 .bg .ianime_04 {
      width: 240px;
      height: 120px;
      background: url("../img/ianime_04.webp") no-repeat 0 0/480px 120px;
      position: absolute;
      top: 27px;
      left: calc(50% + 160px);
      transform: rotate(10deg);
      z-index: -2;
      animation: ianime 1.5s steps(1, jump-start) infinite; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_3 .bg .ianime_04 {
          background-size: 240px 60px;
          width: 120px;
          height: 74px;
          top: 74px;
          left: calc(50% + 60px); } }
    .home .sec_3 .bg .ianime_05 {
      width: 310px;
      height: 120px;
      background: url("../img/ianime_05.webp") no-repeat 0 0/620px 120px;
      position: absolute;
      top: 102px;
      left: calc(50% + 460px);
      transform: rotate(16deg);
      z-index: -2;
      animation: ianime 1.5s steps(1, jump-start) infinite; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_3 .bg .ianime_05 {
          background-size: 310px 60px;
          width: 155px;
          height: 60px;
          top: 100px;
          left: calc(50% + 185px); } }
    .home .sec_3 .bg .circle {
      width: 4200px;
      height: 4200px;
      border-radius: 50%;
      background-color: #F7F5F2; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_3 .bg .circle {
          width: 2100px;
          height: 2100px; } }
  .home .sec_3 .sec_ttl {
    margin-top: 160px; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_3 .sec_ttl {
        margin-top: 160px; } }
  .home .sec_3 .txt_1 {
    margin-top: 2em;
    font-size: 1.8rem; }
  .home .sec_3 .pic {
    width: 900px;
    margin: 40px auto 70px; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_3 .pic {
        width: 100%;
        margin: 40px auto 70px; } }
  .home .sec_3 .level {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background-color: #333; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_3 .level {
        flex-direction: column; } }
    .home .sec_3 .level_item {
      padding: 25px 20px;
      width: 460px; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_3 .level_item {
          width: 100%; } }
      .home .sec_3 .level_item:first-child {
        color: #fff; }
        .home .sec_3 .level_item:first-child figure {
          width: 269px;
          margin: -85px auto 20px; }
          @media only screen and (max-width: 768px), print and (min-width: 2cm) {
            .home .sec_3 .level_item:first-child figure {
              margin: -85px auto 6px; } }
      .home .sec_3 .level_item:last-child {
        background-color: #fff;
        margin-top: 20px; }
        .home .sec_3 .level_item:last-child figure {
          width: 58px;
          margin: -65px auto 6px; }
      .home .sec_3 .level_item h3 {
        font-size: 2.6rem;
        font-weight: 600;
        text-align: center; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .home .sec_3 .level_item h3 {
            font-size: 2.4rem;
            margin-bottom: 0.2em; } }
      .home .sec_3 .level_item p {
        font-weight: 500; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .home .sec_3 .level_item p {
            font-size: 1.4rem; } }
  .home .sec_3 .txt_2 {
    margin-top: 2em;
    font-size: 2.4rem;
    font-weight: 600;
    text-align: center; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_3 .txt_2 {
        font-size: 1.8rem; } }
.home .sec_4 {
  padding: 0 0 6.6em;
  position: relative;
  z-index: 1; }
  @media only screen and (max-width: 768px), print and (min-width: 2cm) {
    .home .sec_4 {
      padding: 0 0 5em; } }
  .home .sec_4 .obj_8 {
    position: absolute;
    left: calc(50% + 580px);
    top: -200px;
    width: 242px;
    position: absolute; }
    .home .sec_4 .obj_8 img {
      animation: boundA 4s 1.6s ease-out infinite; }
  .home .sec_4 .box_action {
    display: flex;
    margin-top: 110px; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_4 .box_action {
        flex-direction: column;
        margin-top: 80px; } }
    .home .sec_4 .box_action__ttl {
      width: 50%;
      position: relative;
      padding-top: 400px; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_4 .box_action__ttl {
          width: 100%;
          padding-top: 200px; } }
      .home .sec_4 .box_action__ttl figure {
        position: absolute;
        top: 0;
        width: calc(100% + 300px);
        z-index: 1; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .home .sec_4 .box_action__ttl figure {
            width: calc(100% - 15px); } }
        .home .sec_4 .box_action__ttl figure img {
          overflow: hidden;
          object-fit: cover;
          width: 100%;
          height: 400px; }
          @media only screen and (max-width: 768px), print and (min-width: 2cm) {
            .home .sec_4 .box_action__ttl figure img {
              height: 200px; } }
        .home .sec_4 .box_action__ttl figure::before {
          content: "";
          width: calc(100% + 20px);
          height: 100%;
          position: absolute;
          top: 0px;
          z-index: -1; }
          @media only screen and (max-width: 768px), print and (min-width: 2cm) {
            .home .sec_4 .box_action__ttl figure::before {
              width: calc(100% + 10px); } }
      .home .sec_4 .box_action__ttl p {
        text-align: center;
        font-size: 12rem;
        line-height: 1;
        white-space: nowrap;
        font-family: "Roboto Condensed", sans-serif;
        letter-spacing: 0.04em; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .home .sec_4 .box_action__ttl p {
            font-size: 18vw; } }
      .home .sec_4 .box_action__ttl h2 {
        text-align: center;
        font-size: 3.6rem;
        letter-spacing: 0.1em;
        line-height: 1.5;
        margin-top: -1.4em; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .home .sec_4 .box_action__ttl h2 {
            font-size: 2.2rem; } }
    .home .sec_4 .box_action__txt {
      width: 50%;
      background-color: #333;
      color: #fff;
      position: relative;
      z-index: 1;
      margin-top: 330px;
      padding: 30px 40px;
      max-width: 700px; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_4 .box_action__txt {
          width: 100%;
          margin-top: 90px;
          padding: 20px 20px 30px; } }
      .home .sec_4 .box_action__txt h3 {
        font-size: 2.4rem;
        font-weight: 500;
        margin-bottom: 0.4em; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .home .sec_4 .box_action__txt h3 {
            font-size: 2.2rem;
            text-align: center; } }
      .home .sec_4 .box_action__txt i {
        position: absolute;
        width: 300px;
        height: 220px;
        top: -220px;
        z-index: 1; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .home .sec_4 .box_action__txt i {
            width: 150px;
            height: 110px;
            top: -110px; } }
        .home .sec_4 .box_action__txt i::before {
          content: "";
          width: 40px;
          height: 67px;
          background: url("../img/img_denkyu.webp") no-repeat center/contain;
          position: absolute;
          left: 130px;
          top: 80px;
          transition: .6s .6s;
          opacity: 0;
          z-index: -1; }
          @media only screen and (max-width: 768px), print and (min-width: 2cm) {
            .home .sec_4 .box_action__txt i::before {
              width: 20px;
              height: 33px;
              left: 65px;
              top: 50px; } }
      .home .sec_4 .box_action__txt.active i::before {
        top: 50px;
        opacity: 1; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .home .sec_4 .box_action__txt.active i::before {
            top: 30px; } }
    .home .sec_4 .box_action.fw .box_action__ttl figure {
      left: 0; }
      .home .sec_4 .box_action.fw .box_action__ttl figure img {
        border-top-right-radius: 200px;
        border-bottom-right-radius: 200px; }
      .home .sec_4 .box_action.fw .box_action__ttl figure::before {
        border-top-right-radius: 200px;
        border-bottom-right-radius: 200px;
        left: -20px;
        transition: 1s;
        background-color: #fedc5e; }
    .home .sec_4 .box_action.fw .box_action__ttl p {
      color: rgba(254, 220, 94, 0.25); }
    .home .sec_4 .box_action.fw .box_action__txt i {
      background: url("../img/pic_fw.webp") no-repeat 0 0/600px 220px;
      animation: ianime 1.5s steps(1, jump-start) infinite;
      z-index: -2;
      left: 350px; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_4 .box_action.fw .box_action__txt i {
          left: calc(50% - 75px);
          background-size: 300px 110px; } }
    .home .sec_4 .box_action.ws {
      flex-direction: row-reverse; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_4 .box_action.ws {
          flex-direction: column; } }
      .home .sec_4 .box_action.ws .box_action__ttl figure {
        right: 0; }
        .home .sec_4 .box_action.ws .box_action__ttl figure img {
          border-top-left-radius: 200px;
          border-bottom-left-radius: 200px; }
        .home .sec_4 .box_action.ws .box_action__ttl figure::before {
          border-top-left-radius: 200px;
          border-bottom-left-radius: 200px;
          right: -20px;
          transition: 1s;
          background-color: #62c0b4; }
      .home .sec_4 .box_action.ws .box_action__ttl p {
        color: rgba(98, 192, 180, 0.25); }
      .home .sec_4 .box_action.ws .box_action__txt i {
        background: url("../img/pic_ws.webp") no-repeat 0 0/600px 220px;
        animation: ianime 1.5s steps(1, jump-start) infinite;
        z-index: -2;
        right: 350px; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .home .sec_4 .box_action.ws .box_action__txt i {
            right: calc(50% - 75px);
            background-size: 300px 110px; } }
    .home .sec_4 .box_action.pt .box_action__ttl figure {
      left: 0; }
      .home .sec_4 .box_action.pt .box_action__ttl figure img {
        border-top-right-radius: 200px;
        border-bottom-right-radius: 200px; }
      .home .sec_4 .box_action.pt .box_action__ttl figure::before {
        border-top-right-radius: 200px;
        border-bottom-right-radius: 200px;
        left: -20px;
        transition: 1s;
        background-color: #ed7980; }
    .home .sec_4 .box_action.pt .box_action__ttl p {
      color: rgba(237, 121, 128, 0.25); }
    .home .sec_4 .box_action.pt .box_action__txt i {
      background: url("../img/pic_pt.webp") no-repeat 0 0/600px 220px;
      animation: ianime 1.5s steps(1, jump-start) infinite;
      z-index: -2;
      left: 350px; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_4 .box_action.pt .box_action__txt i {
          left: calc(50% - 75px);
          background-size: 300px 110px; } }
    .home .sec_4 .box_action.active.fw .box_action__ttl figure::before {
      left: 0;
      top: -20px; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_4 .box_action.active.fw .box_action__ttl figure::before {
          top: -10px; } }
    .home .sec_4 .box_action.active.ws .box_action__ttl figure::before {
      right: 0;
      top: -20px; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_4 .box_action.active.ws .box_action__ttl figure::before {
          top: -10px; } }
    .home .sec_4 .box_action.active.pt .box_action__ttl figure::before {
      left: 0;
      top: -20px; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_4 .box_action.active.pt .box_action__ttl figure::before {
          top: -10px; } }
.home .sec_5 {
  background-color: #F7F5F2;
  margin-top: 180px;
  padding-top: 1px;
  padding-bottom: 100px; }
  @media only screen and (max-width: 768px), print and (min-width: 2cm) {
    .home .sec_5 {
      margin-top: 130px;
      padding-bottom: 100px; } }
  .home .sec_5 .pic {
    margin-top: -170px; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_5 .pic {
        width: calc(100vw + 30px);
        margin-left: -15px; } }
  .home .sec_5 h1 {
    text-align: center;
    margin-top: -70px; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_5 h1 {
        margin-top: -40px; } }
    .home .sec_5 h1 span {
      text-align: center;
      font-size: 3rem;
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
      letter-spacing: 0.1em;
      color: #fff;
      background-color: #000;
      display: inline-block;
      padding: 0.4em 0.8em 0.5em; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_5 h1 span {
          font-size: 2.0rem;
          line-height: 1.5; } }
  .home .sec_5 .course {
    display: flex;
    justify-content: space-between;
    margin-top: 40px; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_5 .course {
        flex-direction: column;
        gap: 40px; } }
    .home .sec_5 .course_box {
      width: 320px; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_5 .course_box {
          width: 100%; } }
      .home .sec_5 .course_box h2 {
        text-align: center;
        font-size: 2.4rem;
        font-weight: 400;
        line-height: 1;
        white-space: nowrap;
        font-family: "Roboto Condensed", sans-serif;
        letter-spacing: 0.1em; }
        .home .sec_5 .course_box h2 span {
          font-size: 5.4rem;
          display: inline-block;
          position: relative;
          margin-left: 0.1em;
          top: 0.1em; }
      .home .sec_5 .course_box__inner {
        background-color: #fff;
        margin-top: 40px;
        padding: 1px 25px 40px;
        box-shadow: 10px 10px 0px rgba(0, 0, 0, 0.1); }
        .home .sec_5 .course_box__inner figure {
          width: 120px;
          margin: -30px auto 10px; }
        .home .sec_5 .course_box__inner h3 {
          text-align: center;
          font-size: 2rem;
          line-height: 1.5;
          letter-spacing: 0.08em;
          margin-bottom: 0.4em;
          margin-top: 0.7em; }
.home .sec_6 {
  padding: 120px 0;
  position: relative; }
  @media only screen and (max-width: 768px), print and (min-width: 2cm) {
    .home .sec_6 {
      padding: 120px 0 60px; } }
  .home .sec_6 .ttl {
    position: absolute;
    top: -0.05em;
    right: 0px;
    font-size: 12rem;
    font-weight: 400;
    line-height: 1;
    font-family: "Roboto Condensed", sans-serif;
    letter-spacing: 0.05em;
    color: rgba(81, 167, 221, 0.15); }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_6 .ttl {
        font-size: 20vw; } }
  .home .sec_6 .profile {
    display: flex;
    gap: 60px;
    width: 100%; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_6 .profile {
        flex-direction: column; } }
    .home .sec_6 .profile figure {
      width: 300px; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_6 .profile figure {
          margin: 0 auto;
          width: 260px; } }
    .home .sec_6 .profile .txt {
      flex: 1; }
      .home .sec_6 .profile .txt p:nth-child(1) {
        line-height: 1.6;
        margin-bottom: 0.8em; }
      .home .sec_6 .profile .txt p:nth-child(2) {
        font-size: 2.8rem;
        font-weight: 500;
        letter-spacing: 0.2em;
        line-height: 1.4; }
      .home .sec_6 .profile .txt p:nth-child(3) {
        font-size: 1.4rem;
        font-family: "Roboto Condensed", sans-serif;
        letter-spacing: 0.2em;
        margin-bottom: 1.6em; }
.home .sec_7 {
  padding: 60px 0;
  background-color: #F7F5F2; }
  @media only screen and (max-width: 768px), print and (min-width: 2cm) {
    .home .sec_7 {
      padding: 40px 0 40px; } }
  .home .sec_7 hr {
    width: 100%;
    height: 1px;
    background-color: #ccc;
    margin: 50px 0;
    display: block; }
  .home .sec_7 .box_work {
    width: 100%; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      .home .sec_7 .box_work {
        margin-top: 60px; } }
    .home .sec_7 .box_work dl {
      display: flex;
      align-items: center;
      width: 100%; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_7 .box_work dl {
          flex-direction: column; } }
      .home .sec_7 .box_work dl dt {
        font-size: 6.4rem;
        line-height: 1;
        white-space: nowrap;
        font-family: "Roboto Condensed", sans-serif;
        letter-spacing: 0.1em;
        font-weight: 400;
        border-right: solid 1px #ccc;
        padding-right: 0.4em;
        margin-right: 0.6em; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .home .sec_7 .box_work dl dt {
            font-size: 2.6rem;
            border-right: none;
            border-bottom: solid 1px #000;
            padding: 0 0 5px;
            margin-right: 0; } }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_7 .box_work dl dd {
          margin-top: 10px; } }
      .home .sec_7 .box_work dl dd p {
        font-size: 2.4rem;
        font-weight: 600;
        letter-spacing: 0.05em; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .home .sec_7 .box_work dl dd p {
            font-size: 2.0rem; } }
      .home .sec_7 .box_work dl dd h2 {
        font-size: 1.8rem;
        font-weight: 400;
        letter-spacing: 0.05em; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .home .sec_7 .box_work dl dd h2 {
            font-size: 1.5rem; } }
    .home .sec_7 .box_work__cont {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin: 30px 0; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_7 .box_work__cont {
          flex-direction: column; } }
      .home .sec_7 .box_work__cont figure {
        width: 450px; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .home .sec_7 .box_work__cont figure {
            width: 100%; } }
      .home .sec_7 .box_work__cont p {
        width: 500px; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .home .sec_7 .box_work__cont p {
            width: 100%;
            margin-top: 20px; } }
    .home .sec_7 .box_work__voice {
      background-color: #fff;
      padding: 25px 30px;
      position: relative;
      margin-bottom: 60px; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        .home .sec_7 .box_work__voice {
          padding: 20px 20px;
          margin-bottom: 30px; } }
      .home .sec_7 .box_work__voice::before {
        content: "";
        width: 40px;
        aspect-ratio: 1;
        clip-path: polygon(0 0, 100% 0, 100% 100%);
        background-color: #fff;
        position: absolute;
        right: 0;
        bottom: -32px; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .home .sec_7 .box_work__voice::before {
            width: 20px;
            bottom: -16px; } }
      .home .sec_7 .box_work__voice h3 {
        font-size: 2.4rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        margin-bottom: 5px; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          .home .sec_7 .box_work__voice h3 {
            font-size: 2.2rem; } }
.home .sec_8 {
  padding: 60px 0 100px; }
  @media only screen and (max-width: 768px), print and (min-width: 2cm) {
    .home .sec_8 {
      padding: 40px 0 60px; } }
.home .sec_9 {
  padding: 60px 0 100px;
  background-color: #F7F5F2; }
  @media only screen and (max-width: 768px), print and (min-width: 2cm) {
    .home .sec_9 {
      padding: 40px 0 60px; } }
  .home .sec_9 .form_01 {
    margin-top: 40px; }

.form_header {
  background-color: #F7F5F2;
  margin-bottom: 50px; }
  .form_header img {
    width: 140px;
    margin: -40px auto 0;
    display: block;
    position: relative;
    top: 20px; }

@media only screen and (max-width: 768px), print and (min-width: 2cm) {
  .sec_conf .form_01 {
    padding-bottom: 3em; } }
.sec_conf .form_01 dl dt {
  padding-top: 0.8em; }
.sec_conf .form_01 dl dd:not(:empty) {
  background-color: #f3f3f3;
  padding: 0.6em 1em 0.8em;
  border-radius: 6px; }

@keyframes showTextFromBottom {
  0% {
    opacity: 0;
    transform: translateY(100%); }
  100% {
    opacity: 1;
    transform: translateY(0px); } }
.textanimation span {
  display: inline-block; }

.textanimation > span {
  overflow: hidden; }

.textanimation > span > span {
  animation: showTextFromBottom 0.3s backwards; }

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