@charset "UTF-8";
/*! Writen  by SCSS */
.breadlist {
  display: none; }

.inner {
  max-width: 1080px; }

.sec01 {
  background: #000;
  color: #fff;
  padding-bottom: 80px; }
  @media screen and (max-width: 480px) {
    .sec01 {
      padding-bottom: 40px; } }
  .sec01 .des {
    max-width: 870px;
    margin-inline: auto;
    background: #333333;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 80px; }
    @media screen and (max-width: 480px) {
      .sec01 .des {
        padding: 15px;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 50px; } }
    .sec01 .des .img {
      width: calc(410% / 8.1);
      display: flex;
      justify-content: space-between; }
      @media screen and (max-width: 480px) {
        .sec01 .des .img {
          width: 100%; } }
      .sec01 .des .img .img1 {
        width: calc(240% / 4.1); }
      .sec01 .des .img .img2 {
        width: calc(150% / 4.1);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 6px 0; }
        .sec01 .des .img .img2 .t1 {
          font-size: clamp(7px, calc(11vw / 8.7), 11px);
          line-height: 1.4;
          letter-spacing: 0.1em; }
          @media screen and (max-width: 480px) {
            .sec01 .des .img .img2 .t1 {
              font-size: calc(8vw / 3.9); } }
        .sec01 .des .img .img2 .t2 {
          font-size: clamp(12px, calc(20vw / 8.7), 20px);
          line-height: 1.6;
          letter-spacing: 0.2em; }
          @media screen and (max-width: 480px) {
            .sec01 .des .img .img2 .t2 {
              font-size: calc(14vw / 3.9); } }
          .sec01 .des .img .img2 .t2 .s {
            font-size: 70%; }
        .sec01 .des .img .img2 .t3 {
          font-size: clamp(7px, calc(11vw / 8.7), 11px);
          line-height: 1;
          letter-spacing: 0.1em; }
          @media screen and (max-width: 480px) {
            .sec01 .des .img .img2 .t3 {
              width: 100%;
              font-size: calc(8vw / 3.9); } }
    .sec01 .des .txt {
      width: calc(350% / 8.1);
      font-size: clamp(10px, calc(14vw / 10.8), 14px);
      line-height: 1.7;
      letter-spacing: 0.05em; }
      @media screen and (max-width: 480px) {
        .sec01 .des .txt {
          width: 100%;
          font-size: calc(12vw / 3.9); } }

.sec02 {
  padding: 80px 0; }
  @media screen and (max-width: 480px) {
    .sec02 {
      padding: 50px 0; } }
  .sec02 .pub {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 35px calc(40% / 10.8); }
    @media screen and (max-width: 480px) {
      .sec02 .pub {
        flex-direction: column;
        gap: 25px; } }
    .sec02 .pub li {
      width: calc(520% / 10.8);
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      row-gap: 18px; }
      @media screen and (max-width: 480px) {
        .sec02 .pub li {
          width: 100%;
          row-gap: 14px; } }
      .sec02 .pub li .ttl {
        width: 100%;
        font-size: clamp(16px, calc(21vw / 10.8), 21px);
        line-height: 1.4;
        letter-spacing: 0.05em;
        padding-left: 0.5em;
        border-left: solid 6px #4f3623; }
        @media screen and (max-width: 480px) {
          .sec02 .pub li .ttl {
            font-size: calc(15vw / 3.9);
            letter-spacing: 0; } }
        .sec02 .pub li .ttl.ex1 {
          position: relative;
          margin-bottom: 0.6em; }
          .sec02 .pub li .ttl.ex1 .sub {
            font-size: 60%;
            position: absolute;
            bottom: -1.4em;
            left: calc(0.5em + 6px); }
      .sec02 .pub li .img {
        width: calc(224% / 5.2); }
      .sec02 .pub li .txt {
        width: calc(270% / 5.2);
        display: flex;
        flex-direction: column;
        justify-content: space-between; }
        @media screen and (max-width: 480px) {
          .sec02 .pub li .txt {
            width: calc(275% / 5.2); } }
        .sec02 .pub li .txt .t1 {
          font-size: clamp(10px, calc(15vw / 10.8), 15px);
          line-height: 1.7;
          letter-spacing: 0.05em; }
          @media screen and (max-width: 480px) {
            .sec02 .pub li .txt .t1 {
              font-size: calc(12vw / 3.9);
              line-height: 1.6;
              letter-spacing: 0.01em; } }
      .sec02 .pub li.ex {
        width: 100%; }
        @media screen and (max-width: 480px) {
          .sec02 .pub li.ex {
            flex-direction: column;
            flex-direction: column-reverse; } }
        .sec02 .pub li.ex .txt {
          display: block;
          width: calc(440% / 10.8); }
          @media screen and (max-width: 768px) {
            .sec02 .pub li.ex .txt {
              width: calc(470% / 10.8); } }
          @media screen and (max-width: 480px) {
            .sec02 .pub li.ex .txt {
              width: 100%; } }
          .sec02 .pub li.ex .txt .ttl {
            font-size: clamp(16px, calc(25vw / 10.8), 25px);
            padding-left: 0.6em;
            margin-bottom: 0.8em; }
            @media screen and (max-width: 480px) {
              .sec02 .pub li.ex .txt .ttl {
                font-size: calc(15vw / 3.9);
                letter-spacing: 0;
                margin-bottom: 0.6em; } }
          .sec02 .pub li.ex .txt .t2 {
            font-size: clamp(12px, calc(18vw / 10.8), 18px);
            line-height: 1.9;
            letter-spacing: 0.05em;
            padding-left: 1.2em; }
            @media screen and (max-width: 480px) {
              .sec02 .pub li.ex .txt .t2 {
                font-size: calc(12vw / 3.9);
                line-height: 1.6;
                letter-spacing: 0.01em; } }
        .sec02 .pub li.ex .img {
          width: calc(595% / 10.8); }
          @media screen and (max-width: 768px) {
            .sec02 .pub li.ex .img {
              width: calc(585% / 10.8); } }
          @media screen and (max-width: 480px) {
            .sec02 .pub li.ex .img {
              width: 100%; } }
  .sec02 .img4 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 10px; }
    .sec02 .img4 li {
      width: calc(265% / 10.8); }
      .sec02 .img4 li .cap {
        font-size: 13px; }
        @media screen and (max-width: 480px) {
          .sec02 .img4 li .cap {
            font-size: 10px;
            padding: 2px 3px; } }

sup {
  font-size: 50%; }

.sec03 {
  padding: 80px 0 45px; }
  @media screen and (max-width: 480px) {
    .sec03 {
      padding: 50px 0 45px; } }
  .sec03 .oel {
    display: flex;
    flex-wrap: wrap;
    gap: 50px calc(40% / 10.8); }
    @media screen and (max-width: 480px) {
      .sec03 .oel {
        flex-direction: column;
        gap: 30px; } }
    .sec03 .oel li {
      width: calc(520% / 10.8);
      display: flex;
      justify-content: space-between; }
      @media screen and (max-width: 480px) {
        .sec03 .oel li {
          width: 100%; } }
      .sec03 .oel li .img {
        width: calc(225% / 5.2); }
        @media screen and (max-width: 768px) {
          .sec03 .oel li .img {
            width: calc(235% / 5.2); } }
        @media screen and (max-width: 480px) {
          .sec03 .oel li .img {
            width: calc(230% / 5.2); } }
      .sec03 .oel li .txt {
        width: calc(265% / 5.2); }
        .sec03 .oel li .txt .t1 {
          font-size: clamp(14px, calc(19vw / 10.8), 19px);
          line-height: 1.3;
          padding: 0.3em 0;
          margin-bottom: 0.6em;
          border-top: solid 1px #000;
          border-bottom: solid 1px #000;
          text-align-last: center; }
          @media screen and (max-width: 480px) {
            .sec03 .oel li .txt .t1 {
              font-size: calc(14vw / 3.9);
              padding: 0.2em 0;
              margin-bottom: 0.4em; } }
        .sec03 .oel li .txt .t2 {
          font-size: clamp(12px, calc(15vw / 10.8), 15px);
          line-height: 1.7; }
          @media screen and (max-width: 480px) {
            .sec03 .oel li .txt .t2 {
              font-size: calc(12vw / 3.9);
              line-height: 1.6; } }

@media screen and (min-width: 800px) {
  .img_cap .cap.cap101 {
    left: -10px; } }
@media screen and (max-width: 480px) {
  .swipe1 img {
    width: 700px;
    max-width: 700px; } }

/*============================
.sakura
============================*/
.s_box {
  position: relative;
  overflow: hidden; }

.s_cont {
  position: relative;
  z-index: 10; }

.sakura {
  position: absolute;
  padding: 0;
  margin: 0;
  width: 40%;
  /* height: 800px; */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1;
  left: 0;
  transform: translateZ(1px);
  /* 回避手段 */ }

.sakura.r {
  position: absolute;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  /* height: 800px; */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  left: auto;
  right: 0;
  transform: translateZ(1px);
  /* 回避手段 */ }

.sakura.c {
  position: absolute;
  padding: 0;
  margin: 0;
  width: 100%;
  /* height: 800px; */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1;
  left: auto;
  right: 0;
  transform: translateZ(1px);
  /* 回避手段 */ }

.sakura.c2 {
  position: absolute;
  padding: 0;
  margin: 0;
  width: 100%;
  /* height: 800px; */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 0;
  left: auto;
  right: 0;
  transform: translateZ(1px);
  /* 回避手段 */ }

.sakura li {
  width: 25px;
  position: absolute;
  list-style: none;
  top: -50px;
  animation: fall 6s linear infinite, rotate1 2s ease-in-out infinite alternate; }

.sakura li.s1 {
  width: 18px;
  position: absolute;
  list-style: none;
  top: -50px;
  animation: fall 6s linear infinite, rotate1 2s ease-in-out infinite alternate; }

.sakura li.s2 {
  width: 13px;
  position: absolute;
  list-style: none;
  top: -50px;
  animation: fall 6s linear infinite, rotate1 2s ease-in-out infinite alternate; }

@media screen and (max-width: 1100px) {
  .sakura {
    width: 100%; }

  .sakura.r {
    width: 100%; } }
@media screen and (max-width: 768px) {
  .sakura {
    height: 500px !important;
    top: 0; }

  .sakura.r {
    height: 500px !important; }

  .sakura.c {
    height: 500px !important; }

  .sakura.c2 {
    height: 500px !important; } }
@keyframes fall {
  to {
    top: 120%; } }
@keyframes rotate1 {
  from {
    transform: translateX(0px) rotate(0deg); }
  to {
    transform: translateX(300px) rotate(-80deg) rotateX(180deg); } }
@keyframes rotate2 {
  from {
    transform: translateX(300px) rotate(-45deg); }
  to {
    transform: translateX(0px) rotate(0deg); } }
.sakura li:nth-child(1) {
  left: 0;
  animation: fall 12s linear infinite, rotate2 6s ease-in-out infinite alternate; }

.sakura li:nth-child(2) {
  left: 60vw;
  animation: fall 14s linear infinite, rotate1 14s ease-in-out infinite alternate; }

.sakura li:nth-child(3) {
  left: 15vw;
  animation: fall 11s linear infinite, rotate2 8.1s ease-in-out infinite alternate; }

.sakura li:nth-child(4) {
  left: 80vw;
  animation: fall 13s linear infinite, rotate2 5.2s ease-in-out infinite alternate; }

.sakura li:nth-child(5) {
  left: 20vw;
  animation: fall 12s linear infinite, rotate1 2.6s ease-in-out infinite alternate; }

.sakura li:nth-child(6) {
  left: 70vw;
  animation: fall 8s linear infinite, rotate2 3s ease-in-out infinite alternate; }

.sakura li:nth-child(7) {
  left: 45vw;
  animation: fall 22s linear infinite, rotate2 4.2s ease-in-out infinite alternate; }

.sakura li:nth-child(8) {
  left: 50vw;
  animation: fall 11s linear infinite, rotate1 2.5s ease-in-out infinite alternate; }

.sakura li:nth-child(9) {
  left: 15vw;
  animation: fall 12s linear infinite, rotate2 4.1s ease-in-out infinite alternate; }

.sakura li:nth-child(10) {
  left: 30vw;
  animation: fall 9s linear infinite, rotate2 3.8s ease-in-out infinite alternate; }

.sakura li:nth-child(11) {
  left: 40vw;
  animation: fall 15s linear infinite, rotate1 3.2s ease-in-out infinite alternate; }

.sakura li:nth-child(12) {
  left: 55vw;
  animation: fall 22s linear infinite, rotate2 5s ease-in-out infinite alternate; }

.sakura li:nth-child(13) {
  left: 5vw;
  animation: fall 17s linear infinite, rotate1 6s ease-in-out infinite alternate; }

.sakura li:nth-child(14) {
  left: 60vw;
  animation: fall 12s linear infinite, rotate1 5.1s ease-in-out infinite alternate; }

.sakura li:nth-child(15) {
  left: 10vw;
  animation: fall 15s linear infinite, rotate2 7.2s ease-in-out infinite alternate; }

.sakura li:nth-child(16) {
  left: 90vw;
  animation: fall 6s linear infinite, rotate1 5.6s ease-in-out infinite alternate; }

.sakura li:nth-child(17) {
  left: 50vw;
  animation: fall 10s linear infinite, rotate1 2.5s ease-in-out infinite alternate; }

.sakura li:nth-child(18) {
  left: 78vw;
  animation: fall 12s linear infinite, rotate2 4.1s ease-in-out infinite alternate; }

.sakura li:nth-child(19) {
  left: 30vw;
  animation: fall 9s linear infinite, rotate2 3.8s ease-in-out infinite alternate; }

.sakura li:nth-child(20) {
  left: 40vw;
  animation: fall 15s linear infinite, rotate1 3.2s ease-in-out infinite alternate; }

.sakura li:nth-child(21) {
  left: 55vw;
  animation: fall 22s linear infinite, rotate2 5s ease-in-out infinite alternate; }

.sakura li:nth-child(22) {
  left: 80vw;
  animation: fall 16s linear infinite, rotate1 6s ease-in-out infinite alternate; }

.sakura li:nth-child(23) {
  left: 60vw;
  animation: fall 12s linear infinite, rotate1 5.1s ease-in-out infinite alternate; }

.sakura li:nth-child(24) {
  left: 78vw;
  animation: fall 15s linear infinite, rotate2 7.2s ease-in-out infinite alternate; }

.sakura li:nth-child(25) {
  left: 40vw;
  animation: fall 6s linear infinite, rotate1 5.6s ease-in-out infinite alternate; }

.sakura.c2 li:nth-child(1) {
  left: 80vw;
  animation: fall 6s linear infinite, rotate1 5.6s ease-in-out infinite alternate; }

@keyframes fall {
  to {
    top: 120%; } }
@keyframes rotate1 {
  from {
    transform: translateX(0px) rotate(0deg); }
  to {
    transform: translateX(200px) rotate(-80deg) rotateX(180deg); } }
@keyframes rotate2 {
  from {
    transform: translateX(200px) rotate(-45deg); }
  to {
    transform: translateX(0px) rotate(0deg); } }

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