@charset "UTF-8";
.area_firstview {
  width: 87.5%;
  max-width: 1680px;
  margin: 0 auto;
  padding: min(80 / 1320 * 100vw, 80px) 0 0;
}

#firstview {
  background: #fff;
  width: 100vw;
  height: 100vh;
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 10001;
}
#firstview .alpFV {
  height: min(8.3854166667vw, 161px);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  opacity: 0;
}
#firstview .alpFV.blue {
  width: min(7.7604166667vw, 149px);
}
#firstview .alpFV.red {
  width: min(6.875vw, 132px);
}
#firstview .alpFV.yellow {
  width: min(6.875vw, 132px);
}
@media screen and (max-width: 768px) {
  #firstview .alpFV {
    height: min(96 / 375 * 100vw, 96px);
  }
  #firstview .alpFV.blue {
    width: min(96 / 375 * 100vw, 96px);
  }
  #firstview .alpFV.red {
    width: min(94 / 375 * 100vw, 94px);
  }
  #firstview .alpFV.yellow {
    width: min(96 / 375 * 100vw, 96px);
  }
  #firstview.active {
    background: green;
  }
}

#catch {
  width: min(39.7916666667vw, 764px);
  height: min(12.7604166667vw, 245px);
  margin-top: min(1.40625vw, 27px);
  text-align: right;
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0;
  z-index: 10005;
}
#catch.active {
  opacity: 1;
  z-index: 10;
}
#catch .wrap_catch {
  width: min(39.7916666667vw, 764px);
  position: relative;
  z-index: 10005;
}
#catch .alp {
  position: absolute;
}
#catch .alp.blue {
  width: min(3.90625vw, 75px);
  top: min(1.0416666667vw, 20px);
  left: calc(min(0.1041666667vw, 2px) * -1);
}
#catch .alp.red {
  width: min(3.4375vw, 66px);
  top: min(0.7291666667vw, 14px);
  left: min(19.1666666667vw, 368px);
}
#catch .alp.yellow {
  width: min(3.6979166667vw, 71px);
  bottom: min(0.3125vw, 6px);
  left: min(13.5416666667vw, 260px);
}

@media screen and (min-width: 769px) {
  .area_catch {
    width: min(39.7916666667vw, 764px);
    height: min(12.7604166667vw, 245px);
    margin-top: min(1.40625vw, 27px);
    text-align: right;
    position: absolute;
    right: 0;
    top: 0;
  }
  .area_catch .text {
    margin-top: min(0.15625vw, 3px);
    font-family: "ZenKakuGothicNew-Bold", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: 700;
    font-size: min(1.0416666667vw, 20px);
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

@media screen and (max-width: 768px) {
  #catch {
    width: min(331 / 375 * 100vw, 331px);
    height: initial;
    aspect-ratio: 331/85;
    margin-top: 0;
    text-align: right;
    position: relative;
    right: 0;
    top: 0;
    margin: auto;
    z-index: 10005;
  }
  #catch .wrap_catch {
    width: 100%;
    position: relative;
    z-index: 10005;
  }
  #catch .alp {
    position: absolute;
  }
  #catch .alp.blue {
    width: min(32 / 375 * 100vw, 32px);
    top: min(10 / 375 * 100vw, 10px);
    left: 0;
  }
  #catch .alp.red {
    width: min(29 / 375 * 100vw, 29px);
    top: min(8 / 375 * 100vw, 8px);
    left: min(156 / 375 * 100vw, 156px);
  }
  #catch .alp.yellow {
    width: min(29 / 375 * 100vw, 29px);
    bottom: min(2 / 375 * 100vw, 2px);
    left: min(115 / 375 * 100vw, 115px);
  }
  .area_catch {
    width: 100%;
    height: auto;
    position: relative;
    right: 0;
    top: auto;
    bottom: 0;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .area_catch .text {
    margin-top: 0;
    padding-top: min(115 / 375 * 100vw, 115px);
    font-size: min(14 / 375 * 100vw, 14px);
    font-family: "ZenKakuGothicNew-Bold", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-weight: 700;
    position: relative;
    text-align: center;
  }
}
#mainvisual {
  width: min(87.5vw, 1680px);
  height: min(35.8854166667vw, 689px);
  margin: min(4.1666666667vw, 80px) auto 0;
  margin-inline: auto;
  position: relative;
  z-index: 9999;
}
#mainvisual .box_upper {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
#mainvisual .box_upper .maintitle {
  width: min(41.25vw, 792px);
  position: relative;
}
#mainvisual .box_upper .maintitle .wrap_puzzle {
  width: 100%;
  position: relative;
  aspect-ratio: 792/264;
}
#mainvisual .box_upper .maintitle .wrap_puzzle .puzzle {
  width: min(4.5833333333vw, 88px);
  position: absolute;
}
#mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzle01 {
  top: 0;
  left: 0;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
#mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzle02 {
  top: 0;
  left: min(18.3333333333vw, 352px);
  -webkit-transform: rotate(0);
          transform: rotate(0);
}
#mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzle03 {
  bottom: 0;
  left: min(9.1666666667vw, 176px);
  -webkit-transform: rotate(0);
          transform: rotate(0);
}
#mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzle04 {
  bottom: 0;
  left: min(13.75vw, 264px);
}
#mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzle05 {
  top: min(4.5833333333vw, 88px);
  right: min(4.5833333333vw, 88px);
}
#mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzle06 {
  bottom: 0;
  right: 0;
}
#mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzleFV01 {
  top: 0;
  left: min(9.1666666667vw, 176px);
}
#mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzleFV02 {
  top: 0;
  left: min(13.75vw, 264px);
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
#mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzleFV03 {
  top: 0;
  left: min(18.3333333333vw, 352px);
}
#mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzleFV04 {
  width: min(9.1666666667vw, 176px);
  top: min(4.5833333333vw, 88px);
  left: 0;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
#mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzleFV05 {
  top: min(4.5833333333vw, 88px);
  left: min(9.1666666667vw, 176px);
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
#mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzleFV06 {
  top: min(4.5833333333vw, 88px);
  left: min(13.75vw, 264px);
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
#mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzleFV07 {
  top: min(4.5833333333vw, 88px);
  right: min(13.75vw, 264px);
}
#mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzleFV08 {
  top: min(4.5833333333vw, 88px);
  right: min(9.1666666667vw, 176px);
}
#mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzleFV09 {
  top: min(4.5833333333vw, 88px);
  right: 0;
}
#mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzleFV10 {
  bottom: 0;
  left: 0;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
#mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzleFV11 {
  bottom: 0;
  left: min(4.5833333333vw, 88px);
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
#mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzleFV12 {
  bottom: 0;
  left: min(18.3333333333vw, 352px);
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
#mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzleFV13 {
  bottom: 0;
  right: min(13.75vw, 264px);
}
#mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzleFV14 {
  bottom: 0;
  right: min(9.1666666667vw, 176px);
}
#mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzleFV15 {
  bottom: 0;
  right: min(4.5833333333vw, 88px);
}
#mainvisual .box_upper .maintitle .text {
  width: min(39.7916666667vw, 764px);
  height: calc(min(4.8958333333vw, 94px) * 2);
  position: absolute;
  top: min(1.9791666667vw, 38px);
  left: min(0.7291666667vw, 14px);
}
#mainvisual .box_upper .maintitle .text .horiz_line {
  width: 100%;
  height: 1px;
  position: absolute;
  top: min(4.8958333333vw, 94px);
  left: 0;
  background: #332F2D;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  z-index: 5;
}
#mainvisual .box_upper .maintitle .text span {
  width: min(4.8958333333vw, 94px);
  height: min(4.8958333333vw, 94px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #fff;
  font-size: min(3.3333333333vw, 64px);
  font-family: "ZenKakuGothicNew-Bold", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 700;
  line-height: 1;
}
#mainvisual .box_upper .maintitle .text .up,
#mainvisual .box_upper .maintitle .text .low {
  width: calc(min(4.8958333333vw, 94px) * 5);
  height: min(4.8958333333vw, 94px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: absolute;
}
#mainvisual .box_upper .maintitle .text .up .line,
#mainvisual .box_upper .maintitle .text .low .line {
  height: min(5.625vw, 108px);
  background: #332F2D;
  position: absolute;
  z-index: 5;
}
#mainvisual .box_upper .maintitle .text .up .horiz,
#mainvisual .box_upper .maintitle .text .low .horiz {
  width: calc(100% + min(0.7291666667vw, 14px));
  height: 1px;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}
#mainvisual .box_upper .maintitle .text .up .verti,
#mainvisual .box_upper .maintitle .text .low .verti {
  width: 1px;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}
#mainvisual .box_upper .maintitle .text .up {
  left: min(0.3125vw, 6px);
  top: 0;
}
#mainvisual .box_upper .maintitle .text .up .line {
  top: calc(min(0.3125vw, 6px) * -1);
}
#mainvisual .box_upper .maintitle .text .up .line.horiz01 {
  top: 0;
  left: calc(min(0.3125vw, 6px) * -1);
}
#mainvisual .box_upper .maintitle .text .up .line.line02 {
  left: min(4.8958333333vw, 94px);
}
#mainvisual .box_upper .maintitle .text .up .line.line03 {
  left: calc(min(4.8958333333vw, 94px) * 2);
}
#mainvisual .box_upper .maintitle .text .up .line.line04, #mainvisual .box_upper .maintitle .text .up .line.line05, #mainvisual .box_upper .maintitle .text .up .line.line06 {
  height: min(10.5208333333vw, 202px);
}
#mainvisual .box_upper .maintitle .text .up .line.line04 {
  left: calc(min(4.8958333333vw, 94px) * 3 - 1px);
}
#mainvisual .box_upper .maintitle .text .up .line.line05 {
  left: calc(min(4.8958333333vw, 94px) * 4);
}
#mainvisual .box_upper .maintitle .text .up .line.line06 {
  right: calc(min(0.0520833333vw, 1px) * -1);
}
#mainvisual .box_upper .maintitle .text .low {
  right: min(0.3645833333vw, 7px);
  bottom: 0;
}
#mainvisual .box_upper .maintitle .text .low .line {
  bottom: calc(min(0.3645833333vw, 7px) * -1);
}
#mainvisual .box_upper .maintitle .text .low .line.horiz03 {
  height: 1px;
  bottom: 0;
  right: calc(min(0.3645833333vw, 7px) * -1);
}
#mainvisual .box_upper .maintitle .text .low .line.line07 {
  left: calc(min(4.8958333333vw, 94px) * 3);
}
#mainvisual .box_upper .maintitle .text .low .line.line08 {
  left: calc(min(4.8958333333vw, 94px) * 4);
}
#mainvisual .box_upper .maintitle .text .low .line.line09 {
  right: 0;
}
#mainvisual .box_lower {
  margin-top: min(3.8541666667vw, 74px);
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
#mainvisual .box_lower .change {
  width: min(26.0416666667vw, 500px);
  position: relative;
}
@media screen and (min-width: 769px) {
  #mainvisual .box_lower .change {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
}
#mainvisual .box_lower .change .img {
  position: absolute;
}
@media screen and (min-width: 769px) {
  #mainvisual .box_lower .change .img.before {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
}
#mainvisual .box_lower .change .img.after {
  opacity: 0;
}
#mainvisual .box_lower .change.blue .before,
#mainvisual .box_lower .change.blue .after {
  width: min(26.0416666667vw, 500px);
  height: min(15.9895833333vw, 307px);
  left: min(0.1041666667vw, 2px);
  top: min(1.0416666667vw, 20px);
}
#mainvisual .box_lower .change.blue .text {
  width: min(8.5416666667vw, 164px);
  height: min(1.6666666667vw, 32px);
  right: min(1.6666666667vw, 32px);
  bottom: min(3.9583333333vw, 76px);
}
#mainvisual .box_lower .change.yellow .before,
#mainvisual .box_lower .change.yellow .after {
  width: min(26.0416666667vw, 500px);
  height: min(15.3645833333vw, 295px);
  left: 0;
  top: min(1.3541666667vw, 26px);
}
#mainvisual .box_lower .change.yellow .text {
  width: min(10.15625vw, 195px);
  height: min(4.4791666667vw, 86px);
  right: min(2.2395833333vw, 43px);
  top: min(1.6666666667vw, 32px);
}
#mainvisual .box_lower .change.red .before,
#mainvisual .box_lower .change.red .after {
  width: min(22.9166666667vw, 440px);
  height: min(17.96875vw, 345px);
  left: min(1.5625vw, 30px);
  top: min(0vw, 0px);
}
#mainvisual .box_lower .change.red .text {
  width: min(7.1875vw, 138px);
  height: min(3.125vw, 60px);
  right: min(4.4791666667vw, 86px);
  bottom: min(0.5208333333vw, 10px);
}
#mainvisual.active .box_upper .catch {
  width: min(39.7916666667vw, 764px);
  margin-top: min(0.6770833333vw, 13px);
  text-align: right;
  position: relative;
  z-index: 100010;
}
#mainvisual.active .box_upper .catch .wrap_catch {
  position: relative;
}
#mainvisual.active .box_upper .catch .alp {
  position: absolute;
}
#mainvisual.active .box_upper .catch .alp.blue {
  width: min(3.90625vw, 75px);
  top: min(1.0416666667vw, 20px);
  left: calc(min(0.1041666667vw, 2px) * -1);
}
#mainvisual.active .box_upper .catch .alp.red {
  width: min(3.4375vw, 66px);
  top: min(0.7291666667vw, 14px);
  left: min(19.1666666667vw, 368px);
}
#mainvisual.active .box_upper .catch .alp.yellow {
  width: min(3.6979166667vw, 71px);
  bottom: min(0.3125vw, 6px);
  left: min(13.5416666667vw, 260px);
}
#mainvisual.active .box_upper .catch .text {
  margin-top: min(0.15625vw, 3px);
  font-family: "ZenKakuGothicNew-Bold", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 700;
  font-size: min(1.0416666667vw, 20px);
}
@media screen and (max-width: 768px) {
  #mainvisual {
    width: 100%;
    height: min(489 / 375 * 100vw, 489px);
    margin: min(80 / 375 * 100vw, 80px) auto 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  #mainvisual .box_upper {
    width: 100%;
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
  }
  #mainvisual .box_upper .maintitle {
    width: 100%;
  }
  #mainvisual .box_upper .maintitle .wrap_puzzle {
    width: min(335 / 375 * 100vw, 335px);
    margin-inline: auto;
  }
  #mainvisual .box_upper .maintitle .wrap_puzzle .puzzle {
    width: min(37 / 375 * 100vw, 37px);
  }
  #mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzle02 {
    left: calc(min(37 / 375 * 100vw, 37px) * 4);
  }
  #mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzle03 {
    left: calc(min(37 / 375 * 100vw, 37px) * 2);
  }
  #mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzle04 {
    left: calc(min(37 / 375 * 100vw, 37px) * 3);
  }
  #mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzle05 {
    top: min(37 / 375 * 100vw, 37px);
    right: min(37 / 375 * 100vw, 37px);
  }
  #mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzleFV01 {
    left: calc(min(37 / 375 * 100vw, 37px) * 2);
  }
  #mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzleFV02 {
    left: calc(min(37 / 375 * 100vw, 37px) * 3);
  }
  #mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzleFV03 {
    left: calc(min(37 / 375 * 100vw, 37px) * 4);
  }
  #mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzleFV04 {
    width: min(74 / 375 * 100vw, 74px);
    top: min(37 / 375 * 100vw, 37px);
  }
  #mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzleFV05 {
    top: min(37 / 375 * 100vw, 37px);
    left: calc(min(37 / 375 * 100vw, 37px) * 2);
  }
  #mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzleFV06 {
    top: min(37 / 375 * 100vw, 37px);
    left: calc(min(37 / 375 * 100vw, 37px) * 3);
  }
  #mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzleFV07 {
    top: min(37 / 375 * 100vw, 37px);
    right: calc(min(37 / 375 * 100vw, 37px) * 3);
  }
  #mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzleFV08 {
    top: min(37 / 375 * 100vw, 37px);
    right: calc(min(37 / 375 * 100vw, 37px) * 2);
  }
  #mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzleFV09 {
    top: min(37 / 375 * 100vw, 37px);
  }
  #mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzleFV11 {
    left: min(37 / 375 * 100vw, 37px);
  }
  #mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzleFV12 {
    left: calc(min(37 / 375 * 100vw, 37px) * 4);
  }
  #mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzleFV13 {
    right: calc(min(37 / 375 * 100vw, 37px) * 3);
  }
  #mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzleFV14 {
    right: calc(min(37 / 375 * 100vw, 37px) * 2);
  }
  #mainvisual .box_upper .maintitle .wrap_puzzle .puzzle.puzzleFV15 {
    right: min(37 / 375 * 100vw, 37px);
  }
  #mainvisual .box_upper .maintitle .text {
    width: min(324 / 375 * 100vw, 324px);
    height: calc(min(40 / 375 * 100vw, 40px) * 2);
    top: min(8 / 375 * 100vw, 8px);
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  #mainvisual .box_upper .maintitle .text .horiz_line {
    width: 100%;
    height: 1px;
    top: min(40 / 375 * 100vw, 40px);
  }
  #mainvisual .box_upper .maintitle .text span {
    width: min(40 / 375 * 100vw, 40px);
    height: min(40 / 375 * 100vw, 40px);
    font-size: min(28 / 375 * 100vw, 28px);
  }
  #mainvisual .box_upper .maintitle .text .up,
  #mainvisual .box_upper .maintitle .text .low {
    width: calc(min(40 / 375 * 100vw, 40px) * 5);
    height: min(40 / 375 * 100vw, 40px);
  }
  #mainvisual .box_upper .maintitle .text .up .horiz,
  #mainvisual .box_upper .maintitle .text .low .horiz {
    width: calc(100% + min(6 / 375 * 100vw, 6px));
    height: 1px;
  }
  #mainvisual .box_upper .maintitle .text .up .verti,
  #mainvisual .box_upper .maintitle .text .low .verti {
    width: 1px;
    height: calc(100% + min(6 / 375 * 100vw, 6px));
  }
  #mainvisual .box_upper .maintitle .text .up {
    left: min(3 / 375 * 100vw, 3px);
    top: 0;
  }
  #mainvisual .box_upper .maintitle .text .up .line {
    top: calc(min(3 / 375 * 100vw, 3px) * -1);
  }
  #mainvisual .box_upper .maintitle .text .up .line.horiz01 {
    left: calc(min(3 / 375 * 100vw, 3px) * -1);
  }
  #mainvisual .box_upper .maintitle .text .up .line.line02 {
    left: min(40 / 375 * 100vw, 40px);
  }
  #mainvisual .box_upper .maintitle .text .up .line.line03 {
    left: calc(min(40 / 375 * 100vw, 40px) * 2);
  }
  #mainvisual .box_upper .maintitle .text .up .line.line04, #mainvisual .box_upper .maintitle .text .up .line.line05, #mainvisual .box_upper .maintitle .text .up .line.line06 {
    height: min(86 / 375 * 100vw, 86px);
  }
  #mainvisual .box_upper .maintitle .text .up .line.line04 {
    left: calc(min(40 / 375 * 100vw, 40px) * 3 - 1px);
  }
  #mainvisual .box_upper .maintitle .text .up .line.line05 {
    left: calc(min(40 / 375 * 100vw, 40px) * 4);
  }
  #mainvisual .box_upper .maintitle .text .up .line.line06 {
    right: calc(min(1 / 375 * 100vw, 1px) * -1);
  }
  #mainvisual .box_upper .maintitle .text .low {
    right: min(1 / 375 * 100vw, 1px);
    bottom: 0;
  }
  #mainvisual .box_upper .maintitle .text .low .line {
    bottom: calc(min(3 / 375 * 100vw, 3px) * -1);
  }
  #mainvisual .box_upper .maintitle .text .low .line.horiz03 {
    width: calc(100% + min(6 / 375 * 100vw, 6px));
    right: calc(min(3 / 375 * 100vw, 3px) * -1);
  }
  #mainvisual .box_upper .maintitle .text .low .line.line07 {
    left: calc(min(40 / 375 * 100vw, 40px) * 3);
  }
  #mainvisual .box_upper .maintitle .text .low .line.line08 {
    left: calc(min(40 / 375 * 100vw, 40px) * 4);
  }
  #mainvisual .box_upper .maintitle .text .low .line.line09 {
    right: 0;
  }
  #mainvisual .box_lower {
    width: min(295 / 375 * 100vw, 295px);
    margin: min(42 / 375 * 100vw, 42px) auto 0;
    aspect-ratio: 295/204;
    position: relative;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    display: block;
  }
  #mainvisual .box_lower .line {
    width: min(295 / 375 * 100vw, 295px);
    aspect-ratio: 294/203;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-inline: auto;
  }
  #mainvisual .box_lower .line.blue {
    z-index: 2;
  }
  #mainvisual .box_lower .change {
    width: min(295 / 375 * 100vw, 295px);
    aspect-ratio: 294/203;
    margin: min(10 / 375 * 100vw, 10px) auto 0;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
  }
  #mainvisual .box_lower .change.blue .before,
  #mainvisual .box_lower .change.blue .after {
    width: 100%;
    height: auto;
    left: min(1 / 375 * 100vw, 1px);
    top: min(7 / 375 * 100vw, 7px);
  }
  #mainvisual .box_lower .change.blue .text {
    width: min(96 / 375 * 100vw, 96px);
    height: auto;
    right: min(18 / 375 * 100vw, 18px);
    bottom: min(42 / 375 * 100vw, 42px);
  }
  #mainvisual .box_lower .change.yellow {
    opacity: 0;
  }
  #mainvisual .box_lower .change.yellow .before,
  #mainvisual .box_lower .change.yellow .after {
    width: 100%;
    height: auto;
    left: 0;
    top: min(16 / 375 * 100vw, 16px);
  }
  #mainvisual .box_lower .change.yellow .text {
    width: min(115 / 375 * 100vw, 115px);
    height: auto;
    right: min(26 / 375 * 100vw, 26px);
    top: min(20 / 375 * 100vw, 20px);
  }
  #mainvisual .box_lower .change.red {
    opacity: 0;
  }
  #mainvisual .box_lower .change.red .before,
  #mainvisual .box_lower .change.red .after {
    width: 87%;
    height: auto;
    left: min(20 / 375 * 100vw, 20px);
    top: min(1 / 375 * 100vw, 1px);
  }
  #mainvisual .box_lower .change.red .text {
    width: min(85 / 375 * 100vw, 85px);
    height: auto;
    right: min(50 / 375 * 100vw, 50px);
    bottom: min(15 / 375 * 100vw, 15px);
  }
}

.box_btn {
  width: min(280 / 1320 * 100vw, 280px);
  height: min(60 / 1320 * 100vw, 60px);
}
@media screen and (max-width: 768px) {
  .box_btn {
    width: min(220 / 375 * 100vw, 220px);
    height: min(48 / 375 * 100vw, 48px);
  }
}

.box_title .tit_walking,
.box_title .tit_sub {
  line-height: 1;
}
.box_title .tit_walking {
  text-align: center;
  font-family: "Inter", "ZenKakuGothicNew-Medium", sans-serif;
  font-weight: 900;
  font-size: min(64 / 1320 * 100vw, 64px);
  letter-spacing: 0.05em;
}
.box_title .tit_sub {
  margin-top: 1em;
  font-size: min(20 / 1320 * 100vw, 20px);
  font-family: "ZenKakuGothicNew-Bold", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 700;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .box_title.left .tit_walking,
  .box_title.left .tit_sub {
    text-align: left;
  }
  .box_title.left .tit_walking {
    letter-spacing: 0.05em;
  }
  .box_title.left .tit_sub {
    margin-top: 1.2em;
  }
}
@media screen and (max-width: 768px) {
  .box_title .tit_walking {
    font-size: min(42 / 375 * 100vw, 42px);
  }
  .box_title .tit_sub {
    margin-top: 1em;
    font-size: min(16 / 375 * 100vw, 16px);
  }
}

#about {
  margin-top: calc(min(130 / 1320 * 100vw, 130px) * -1);
  padding: min(440 / 1320 * 100vw, 440px) 0 min(125 / 1320 * 100vw, 125px);
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), color-stop(53%, #fff), to(#fff)), url(../img/top/about_background.png) no-repeat center top;
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, #fff 53%, #fff 100%), url(../img/top/about_background.png) no-repeat center top;
  background-size: 100%;
  position: relative;
}
@media screen and (max-width: 768px) {
  #about {
    margin-top: -7em;
    padding: 15.2em 0 12.9em;
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), color-stop(53%, #fff), to(#fff)), url(../img/top/about_background_sp.png) no-repeat center top;
    background: linear-gradient(to bottom, transparent 0%, transparent 50%, #fff 53%, #fff 100%), url(../img/top/about_background_sp.png) no-repeat center top;
    background-size: 100%;
  }
  #about.first {
    margin-top: -1em;
  }
}
#about .box_title.about {
  position: relative;
  text-align: center;
}
#about .box_title.about .tit_anime_wrap {
  width: min(275 / 1320 * 100vw, 275px);
  margin-inline: auto;
  position: relative;
}
#about .box_title.about .tit_anime_wrap .bird {
  width: min(64 / 1320 * 100vw, 64px);
  position: absolute;
  left: min(126 / 1320 * 100vw, 126px);
  bottom: min(8 / 1320 * 100vw, 8px);
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
#about .box_title.about .copy {
  width: min(82 / 1320 * 100vw, 82px);
  position: absolute;
  top: -2em;
  right: 7em;
  z-index: 5;
}
#about .about_text {
  margin-top: min(60 / 1320 * 100vw, 60px);
}
#about .about_text p {
  text-align: center;
  font-size: min(20 / 1320 * 100vw, 20px);
  line-height: 2.2;
}
#about .about_text .box_btn {
  margin: 2.9em auto 0;
}
#about .foodtruck,
#about .book {
  position: absolute;
}
@media screen and (max-width: 768px) {
  #about .box_title.about .tit_anime_wrap {
    width: min(170 / 375 * 100vw, 170px);
  }
  #about .box_title.about .tit_anime_wrap .bird {
    width: min(45 / 375 * 100vw, 45px);
    left: min(76 / 375 * 100vw, 76px);
    bottom: min(6 / 375 * 100vw, 6px);
  }
  #about .box_title.about .copy {
    width: min(54 / 375 * 100vw, 54px);
    top: 5.5em;
    right: 5.5%;
  }
  #about .about_text {
    width: 90%;
    margin: 2.2em auto 0;
  }
  #about .about_text p {
    text-align: left;
    font-size: min(16 / 375 * 100vw, 16px);
    line-height: 2;
  }
  #about .about_text .box_btn {
    margin: 2.2em auto 0;
  }
}
#about .about_loop {
  position: relative;
}
#about .about_loop .loop_img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 min(80 / 1320 * 100vw, 80px);
}
#about .about_loop .ul_img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-animation: loop-slide 85s infinite linear 1s both;
          animation: loop-slide 85s infinite linear 1s both;
  gap: 0 min(80 / 1320 * 100vw, 80px);
  position: relative;
}
#about .about_loop .ul_img li {
  width: min(674 / 1320 * 100vw, 674px);
  line-height: 1;
  white-space: nowrap;
  position: relative;
}
#about .about_loop .ul_img li .img {
  -webkit-box-shadow: 3px 3px 20px 0px rgba(0, 0, 0, 0.1);
          box-shadow: 3px 3px 20px 0px rgba(0, 0, 0, 0.1);
  position: relative;
}
#about .about_loop .ul_img li .deco {
  position: absolute;
}
#about .about_loop .ul_img li.loop01 {
  width: min(580 / 1320 * 100vw, 580px);
}
#about .about_loop .ul_img li.loop01 .img {
  margin-top: min(70 / 1320 * 100vw, 70px);
}
#about .about_loop .ul_img li.loop01 .deco {
  width: min(66 / 1320 * 100vw, 66px);
  left: 1.2em;
  bottom: -2em;
  animation: jump 6s ease-in-out infinite reverse;
}
#about .about_loop .ul_img li.loop02 {
  width: min(480 / 1320 * 100vw, 480px);
}
#about .about_loop .ul_img li.loop02 .img {
  margin-top: min(40 / 1320 * 100vw, 40px);
}
#about .about_loop .ul_img li.loop02 .deco {
  width: min(56 / 1320 * 100vw, 56px);
  left: 1em;
  bottom: -0.5em;
  -webkit-animation: kurun 7s ease-in-out infinite;
          animation: kurun 7s ease-in-out infinite;
}
#about .about_loop .ul_img li.loop03 {
  width: min(372 / 1320 * 100vw, 372px);
}
#about .about_loop .ul_img li.loop03 .img {
  margin-top: min(94 / 1320 * 100vw, 94px);
}
#about .about_loop .ul_img li.loop03 .deco {
  width: min(64 / 1320 * 100vw, 64px);
  right: 0.75em;
  bottom: -0.8em;
  animation: kakukaku 6s steps(1, end) infinite reverse;
}
#about .about_loop .ul_img li.loop04 {
  width: min(494 / 1320 * 100vw, 494px);
}
#about .about_loop .ul_img li.loop04 .img {
  margin-top: min(40 / 1320 * 100vw, 40px);
}
#about .about_loop .ul_img li.loop04 .deco {
  width: min(48 / 1320 * 100vw, 48px);
  left: -0.4em;
  bottom: -1.8em;
  animation: jump 6s ease-in-out infinite reverse;
}
#about .about_loop .ul_img li.loop05 {
  width: min(580 / 1320 * 100vw, 580px);
}
#about .about_loop .ul_img li.loop05 .img {
  margin-top: min(70 / 1320 * 100vw, 70px);
}
#about .about_loop .ul_img li.loop05 .deco {
  width: min(62 / 1320 * 100vw, 62px);
  right: 0.9em;
  top: -2.1em;
  -webkit-animation: kurun 6s ease-in-out infinite;
          animation: kurun 6s ease-in-out infinite;
}
#about .about_loop .ul_img li.loop06 {
  width: min(480 / 1320 * 100vw, 480px);
}
#about .about_loop .ul_img li.loop06 .img {
  margin-top: min(40 / 1320 * 100vw, 40px);
}
#about .about_loop .ul_img li.loop06 .deco {
  width: min(62 / 1320 * 100vw, 62px);
  right: 0.7em;
  bottom: -1em;
  -webkit-animation: kakukaku 5s steps(1, end) infinite;
          animation: kakukaku 5s steps(1, end) infinite;
}
#about .about_loop .ul_img li.loop07 {
  width: min(494 / 1320 * 100vw, 494px);
}
#about .about_loop .ul_img li.loop07 .img {
  margin-top: min(80 / 1320 * 100vw, 80px);
}
#about .about_loop .ul_img li.loop07 .deco {
  width: min(48 / 1320 * 100vw, 48px);
  right: 0.6em;
  top: -1.6em;
  -webkit-animation: kakukaku 7s steps(1, end) infinite;
          animation: kakukaku 7s steps(1, end) infinite;
}
#about .about_loop .deco_text {
  font-size: min(156 / 1320 * 100vw, 156px);
  font-family: "Inter", "ZenKakuGothicNew-Medium", sans-serif;
  font-weight: 900;
  position: absolute;
  left: 50%;
  bottom: -0.15em;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0.045em;
  mix-blend-mode: multiply;
  opacity: 0.045;
}
#about .about_loop .deco_text span {
  display: inline-block;
}
@media screen and (max-width: 768px) {
  #about .about_loop {
    margin-top: 1.8em;
  }
  #about .about_loop .loop_img {
    gap: 0 min(40 / 375 * 100vw, 40px);
  }
  #about .about_loop .ul_img {
    gap: 0 min(40 / 375 * 100vw, 40px);
  }
  #about .about_loop .ul_img li.loop01 {
    width: min(290 / 375 * 100vw, 290px);
  }
  #about .about_loop .ul_img li.loop01 .img {
    margin-top: min(35 / 375 * 100vw, 35px);
  }
  #about .about_loop .ul_img li.loop01 .deco {
    width: min(33 / 375 * 100vw, 33px);
    left: 1.2em;
    bottom: -1.4em;
    animation: jump 6s ease-in-out infinite reverse;
  }
  #about .about_loop .ul_img li.loop02 {
    width: min(240 / 375 * 100vw, 240px);
  }
  #about .about_loop .ul_img li.loop02 .img {
    margin-top: min(20 / 375 * 100vw, 20px);
  }
  #about .about_loop .ul_img li.loop02 .deco {
    width: min(28 / 375 * 100vw, 28px);
    left: 1em;
    bottom: -0.5em;
    -webkit-animation: kurun 7s ease-in-out infinite;
            animation: kurun 7s ease-in-out infinite;
  }
  #about .about_loop .ul_img li.loop03 {
    width: min(186 / 375 * 100vw, 186px);
  }
  #about .about_loop .ul_img li.loop03 .img {
    margin-top: min(47 / 375 * 100vw, 47px);
  }
  #about .about_loop .ul_img li.loop03 .deco {
    width: min(32 / 375 * 100vw, 32px);
    right: 0.75em;
    bottom: -0.8em;
    animation: kakukaku 6s steps(1, end) infinite reverse;
  }
  #about .about_loop .ul_img li.loop04 {
    width: min(247 / 375 * 100vw, 247px);
  }
  #about .about_loop .ul_img li.loop04 .deco {
    width: min(32 / 375 * 100vw, 32px);
    left: -0.4em;
    bottom: -1.2em;
    animation: jump 6s ease-in-out infinite reverse;
  }
  #about .about_loop .ul_img li.loop05 {
    width: min(290 / 375 * 100vw, 290px);
  }
  #about .about_loop .ul_img li.loop05 .img {
    margin-top: min(35 / 375 * 100vw, 35px);
  }
  #about .about_loop .ul_img li.loop05 .deco {
    width: min(31 / 375 * 100vw, 31px);
    right: 0.9em;
    top: -1.6em;
    -webkit-animation: kurun 6s ease-in-out infinite;
            animation: kurun 6s ease-in-out infinite;
  }
  #about .about_loop .ul_img li.loop06 {
    width: min(240 / 375 * 100vw, 240px);
  }
  #about .about_loop .ul_img li.loop06 .img {
    margin-top: min(20 / 375 * 100vw, 20px);
  }
  #about .about_loop .ul_img li.loop06 .deco {
    width: min(31 / 375 * 100vw, 31px);
    right: 0.7em;
    bottom: -1em;
    -webkit-animation: kakukaku 5s steps(1, end) infinite;
            animation: kakukaku 5s steps(1, end) infinite;
  }
  #about .about_loop .ul_img li.loop07 {
    width: min(247 / 375 * 100vw, 247px);
  }
  #about .about_loop .ul_img li.loop07 .img {
    margin-top: min(40 / 375 * 100vw, 40px);
  }
  #about .about_loop .ul_img li.loop07 .deco {
    width: min(28 / 375 * 100vw, 28px);
    right: 0.6em;
    top: -1.4em;
    -webkit-animation: kakukaku 7s steps(1, end) infinite;
            animation: kakukaku 7s steps(1, end) infinite;
  }
  #about .about_loop .deco_text {
    font-size: min(44 / 375 * 100vw, 44px);
    bottom: -0.45em;
  }
}
#about .foodtruck {
  width: min(415 / 1320 * 100vw, 415px);
  left: calc(min(86 / 1320 * 100vw, 86px) * -1);
  bottom: min(45 / 1320 * 100vw, 45px);
  -webkit-animation: shake 1.6s steps(1, end) infinite;
          animation: shake 1.6s steps(1, end) infinite;
}
#about .book {
  width: min(357 / 1320 * 100vw, 357px);
  right: calc(min(60 / 1320 * 100vw, 60px) * -1);
  bottom: min(30 / 1320 * 100vw, 30px);
  animation: shake 1.6s steps(1, end) infinite reverse;
}
@media screen and (max-width: 768px) {
  #about .foodtruck {
    width: min(171 / 375 * 100vw, 171px);
    left: -1.4em;
    bottom: min(0 / 375 * 100vw, 0px);
  }
  #about .book {
    width: min(134 / 375 * 100vw, 134px);
    right: 1.18em;
    bottom: 1.25em;
  }
}

@-webkit-keyframes loop-slide {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

@keyframes loop-slide {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@-webkit-keyframes kakukaku {
  0%, 2% {
    -webkit-transform: rotateZ(10deg);
            transform: rotateZ(10deg);
  }
  3%, 5% {
    -webkit-transform: rotateZ(-10deg);
            transform: rotateZ(-10deg);
  }
  6%, 100% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
}
@keyframes kakukaku {
  0%, 2% {
    -webkit-transform: rotateZ(10deg);
            transform: rotateZ(10deg);
  }
  3%, 5% {
    -webkit-transform: rotateZ(-10deg);
            transform: rotateZ(-10deg);
  }
  6%, 100% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
}
@-webkit-keyframes kurun {
  0%, 70% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  71% {
    -webkit-transform: rotateZ(90deg);
            transform: rotateZ(90deg);
  }
  72% {
    -webkit-transform: rotateZ(180deg);
            transform: rotateZ(180deg);
  }
  73% {
    -webkit-transform: rotateZ(270deg);
            transform: rotateZ(270deg);
  }
  74%, 100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}
@keyframes kurun {
  0%, 70% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg);
  }
  71% {
    -webkit-transform: rotateZ(90deg);
            transform: rotateZ(90deg);
  }
  72% {
    -webkit-transform: rotateZ(180deg);
            transform: rotateZ(180deg);
  }
  73% {
    -webkit-transform: rotateZ(270deg);
            transform: rotateZ(270deg);
  }
  74%, 100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}
@-webkit-keyframes jump {
  0%, 70% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  73% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
  76% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  79% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
  82%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes jump {
  0%, 70% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  73% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
  76% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  79% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
  82%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
#service {
  position: relative;
}
#service .owl,
#service .woodpecker {
  position: absolute;
}
#service .owl {
  width: min(16.25vw, 312px);
  left: calc(min(1.0416666667vw, 20px) * -1);
  top: min(8.3333333333vw, 160px);
  animation: shake 1.6s steps(1, end) infinite reverse;
}
#service .woodpecker {
  width: min(5.3645833333vw, 103px);
  right: min(1.0416666667vw, 20px);
  bottom: min(6.25vw, 120px);
  -webkit-animation: shake 1.6s steps(1, end) infinite;
          animation: shake 1.6s steps(1, end) infinite;
}
@media screen and (max-width: 768px) {
  #service .owl {
    width: min(127 / 375 * 100vw, 127px);
    left: 1%;
    top: 6.6em;
  }
  #service .woodpecker {
    width: min(42 / 375 * 100vw, 42px);
    right: 4.2%;
    top: 8.8em;
    bottom: initial;
  }
}
#service .box_title.service {
  height: min(29.1666666667vw, 560px);
  padding: min(6.5104166667vw, 125px) 0 0;
  position: relative;
  background: url(../img/top/service_background.png) no-repeat center top;
  background-size: 100%;
}
@media screen and (max-width: 1700px) {
  #service .box_title.service {
    max-height: 490px;
  }
}
#service .box_title.service::before {
  content: "";
  display: block;
  position: absolute;
  width: 100vw;
  height: auto;
  aspect-ratio: 1920/152;
  background: url(../img/top/service_cloud_pc.png) no-repeat center top;
  background-size: 100%;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 5;
}
#service .box_title.service .inner {
  position: relative;
}
#service .box_title.service .txt_lead {
  margin-top: min(2.0833333333vw, 40px);
  text-align: center;
}
#service .box_title.service .copy {
  width: min(82 / 1320 * 100vw, 82px);
  position: absolute;
  top: -1.4em;
  right: 6.8em;
}
@media screen and (max-width: 768px) {
  #service .box_title.service {
    height: min(485 / 375 * 100vw, 485px);
    padding: 3.7em 0 2em;
    background: url(../img/top/service_background_sp.png) no-repeat center top;
    background-size: 100%;
  }
  #service .box_title.service::before {
    width: 100vw;
    height: auto;
    aspect-ratio: 75/8;
    background: url(../img/top/service_cloud_sp.png) no-repeat center top;
    background-size: 100%;
  }
  #service .box_title.service .copy {
    width: 100%;
    position: relative;
    top: 0;
    right: 0;
    text-align: center;
  }
  #service .box_title.service .copy img {
    width: min(55 / 375 * 100vw, 55px);
  }
  #service .box_title.service .txt_lead {
    margin-top: 1.8em;
    text-align: left;
  }
  #service .box_title.service .tit_walking {
    margin-top: 0.5em;
  }
}
#service .service_content {
  padding-bottom: min(190 / 1320 * 100vw, 190px);
  background: #fff;
  position: relative;
}
#service .flex_wrap {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
#service .flex_wrap .boxin,
#service .flex_wrap .box_service {
  width: 47.1666666667%;
}
#service .flex_wrap.upper {
  padding-top: min(6.6666666667vw, 128px);
}
@media screen and (max-width: 768px) {
  #service .service_content {
    padding-bottom: 6.5em;
  }
  #service .flex_wrap .boxin,
  #service .flex_wrap .box_service {
    width: 100%;
    position: relative;
    z-index: 5;
  }
  #service .flex_wrap.upper {
    padding-top: 3em;
  }
}
@-webkit-keyframes korokoro {
  0% {
    -webkit-transform: rotateZ(15deg);
            transform: rotateZ(15deg);
  }
  50% {
    -webkit-transform: rotateZ(-15deg);
            transform: rotateZ(-15deg);
  }
  100% {
    -webkit-transform: rotateZ(15deg);
            transform: rotateZ(15deg);
  }
}
@keyframes korokoro {
  0% {
    -webkit-transform: rotateZ(15deg);
            transform: rotateZ(15deg);
  }
  50% {
    -webkit-transform: rotateZ(-15deg);
            transform: rotateZ(-15deg);
  }
  100% {
    -webkit-transform: rotateZ(15deg);
            transform: rotateZ(15deg);
  }
}
#service .box_service {
  padding: min(60 / 1320 * 100vw, 60px);
  position: relative;
}
#service .box_service .title {
  position: absolute;
}
#service .box_service .title span {
  display: inline-block;
}
#service .box_service .title .alp {
  position: absolute;
}
#service .box_service .title .alp.active {
  -webkit-animation: korokoro 0.5s steps(1, end) 2;
          animation: korokoro 0.5s steps(1, end) 2;
}
#service .box_service .label {
  margin: 0.3em 0 0 0.1em;
  padding: 0.2em 0.1em;
  display: inline-block;
  font-size: min(24 / 1320 * 100vw, 24px);
  background: #332F2D;
  color: #fff;
  line-height: 1;
}
#service .box_service .label small {
  margin: 0.3em 0 0 0.3em;
  font-size: min(18 / 1320 * 100vw, 18px);
}
#service .box_service .text {
  margin-top: 0.8em;
}
#service .box_service .link {
  margin-top: 1em;
  text-align: right;
}
#service .box_service .link a {
  width: min(138 / 1320 * 100vw, 138px);
  display: inline-block;
  position: relative;
  line-height: min(32 / 1320 * 100vw, 32px);
  text-align: left;
}
#service .box_service .link a::before {
  content: "";
  display: block;
  position: absolute;
  width: min(32 / 1320 * 100vw, 32px);
  height: min(32 / 1320 * 100vw, 32px);
  background: url(../img/top/icon_arrow.png) no-repeat center top #332F2D;
  background-size: 100%;
  border-radius: 50%;
  right: 0;
  bottom: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
@media (hover: hover) {
  #service .box_service .link a:hover::before {
    right: -0.3em;
  }
}
#service .box_service::before, #service .box_service::after,
#service .box_service .box_text::before,
#service .box_service .box_text::after {
  content: "";
  display: block;
  position: absolute;
  width: min(14 / 1320 * 100vw, 14px);
  height: min(14 / 1320 * 100vw, 14px);
}
#service .box_service::before,
#service .box_service .box_text::before {
  border-left: 5px solid #0075B3;
  left: 0;
}
#service .box_service::after,
#service .box_service .box_text::after {
  border-right: 5px solid #0075B3;
  right: 0;
}
#service .box_service::before, #service .box_service::after {
  border-top: 5px solid #0075B3;
  top: 0;
}
#service .box_service .box_text::before, #service .box_service .box_text::after {
  border-bottom: 5px solid #0075B3;
  bottom: 0;
}
#service .box_service.design {
  background: rgba(0, 117, 179, 0.1);
}
#service .box_service.design .title {
  padding-left: min(74 / 1320 * 100vw, 74px);
  top: -1.8em;
}
#service .box_service.design .alp {
  width: min(74 / 1320 * 100vw, 74px);
  top: -1.2em;
  left: 0;
}
#service .box_service.design .txt {
  width: min(184 / 1320 * 100vw, 184px);
}
#service .box_service.design .num {
  width: min(68 / 1320 * 100vw, 68px);
  margin-top: -2.4em;
}
#service .box_service.printing {
  margin-top: min(56 / 1320 * 100vw, 56px);
  background: rgba(238, 68, 43, 0.1);
}
#service .box_service.printing .title {
  padding-top: min(90 / 1320 * 100vw, 90px);
  top: 3em;
  right: -1.7em;
}
#service .box_service.printing .alp {
  width: min(68 / 1320 * 100vw, 68px);
  top: 0.2em;
  left: 0em;
}
#service .box_service.printing .txt {
  width: min(60 / 1320 * 100vw, 60px);
}
#service .box_service.printing::before, #service .box_service.printing::after,
#service .box_service.printing .box_text::before,
#service .box_service.printing .box_text::after {
  border-color: #EE442B;
}
#service .box_service.printing .num {
  width: min(76 / 1320 * 100vw, 76px);
  margin-top: -2.7rem;
}
#service .box_service.creation {
  margin-top: min(96 / 1320 * 100vw, 96px);
  padding: min(60 / 1320 * 100vw, 60px) min(78 / 1320 * 100vw, 78px);
  background: rgba(243, 172, 49, 0.1);
}
#service .box_service.creation .title {
  width: min(430 / 1320 * 100vw, 430px);
  left: 0;
  right: 0;
  top: -1.8em;
  margin-inline: auto;
}
#service .box_service.creation .alp {
  width: min(74 / 1320 * 100vw, 74px);
  top: -1em;
  left: min(50 / 1320 * 100vw, 50px);
}
#service .box_service.creation .txt {
  width: min(430 / 1320 * 100vw, 430px);
}
#service .box_service.creation::before, #service .box_service.creation::after,
#service .box_service.creation .box_text::before,
#service .box_service.creation .box_text::after {
  border-color: #F3AC31;
}
#service .box_service.creation .boxin {
  width: min(446 / 1320 * 100vw, 446px);
}
#service .box_service.creation .boxin.seccond {
  position: relative;
}
#service .box_service.creation .boxin.seccond::before, #service .box_service.creation .boxin.seccond::after,
#service .box_service.creation .boxin.seccond .box_text::before,
#service .box_service.creation .boxin.seccond .box_text::after {
  content: none;
}
#service .box_service.creation .boxin.seccond::before {
  content: "";
  display: block;
  position: absolute;
  width: 7px;
  height: 100%;
  background: url(../img/top/service_dotts.png);
  background-size: 7px;
  left: calc(min(78 / 1320 * 100vw, 78px) * -1);
}
#service .box_service.creation .num {
  width: min(80 / 1320 * 100vw, 80px);
  margin-top: -2.4em;
}
@media screen and (max-width: 768px) {
  #service .box_service {
    padding: 2.5em 6% 2.1em;
  }
  #service .box_service .label {
    margin: 0.15em 0 0;
    padding: 0.3em 0.4em 0.2em 0.2em;
    font-size: min(20 / 375 * 100vw, 20px);
  }
  #service .box_service .label small {
    margin: 0.3em 0 0 0.3em;
    font-size: min(16 / 375 * 100vw, 16px);
  }
  #service .box_service .text {
    margin-top: 0.65em;
  }
  #service .box_service .link {
    margin-top: 1em;
  }
  #service .box_service .link a {
    width: 7em;
    line-height: min(20 / 375 * 100vw, 20px);
  }
  #service .box_service .link a::before {
    width: min(20 / 375 * 100vw, 20px);
    height: min(20 / 375 * 100vw, 20px);
  }
  #service .box_service::before, #service .box_service::after,
  #service .box_service .box_text::before,
  #service .box_service .box_text::after {
    width: min(8 / 375 * 100vw, 8px);
    height: min(8 / 375 * 100vw, 8px);
  }
  #service .box_service::before,
  #service .box_service .box_text::before {
    border-left-width: min(2.5 / 375 * 100vw, 2.5px);
  }
  #service .box_service::after,
  #service .box_service .box_text::after {
    border-right-width: min(2.5 / 375 * 100vw, 2.5px);
  }
  #service .box_service::before, #service .box_service::after {
    border-top-width: min(2.5 / 375 * 100vw, 2.5px);
  }
  #service .box_service .box_text::before, #service .box_service .box_text::after {
    border-bottom-width: min(2.5 / 375 * 100vw, 2.5px);
  }
  #service .box_service.design .title {
    padding-left: min(46 / 375 * 100vw, 46px);
    top: -1.1em;
  }
  #service .box_service.design .alp {
    width: min(44 / 375 * 100vw, 44px);
    top: -0.8em;
    left: 0;
  }
  #service .box_service.design .txt {
    width: min(110 / 375 * 100vw, 110px);
  }
  #service .box_service.design .num {
    width: min(54 / 375 * 100vw, 54px);
    margin-top: -1.6em;
  }
  #service .box_service.printing {
    margin-top: 3.8em;
  }
  #service .box_service.printing .title {
    padding-top: 0;
    padding-left: min(48 / 375 * 100vw, 48px);
    top: -1em;
    right: 1.2em;
  }
  #service .box_service.printing .alp {
    width: min(44 / 375 * 100vw, 44px);
    top: -1.1em;
    left: 0;
  }
  #service .box_service.printing .txt {
    width: min(133 / 375 * 100vw, 133px);
  }
  #service .box_service.printing .num {
    width: min(62 / 375 * 100vw, 62px);
    margin-top: -1.5em;
  }
  #service .box_service.creation {
    margin-top: 3.8em;
    padding: 2.5em 6% 2.2em;
  }
  #service .box_service.creation .title {
    width: min(300 / 375 * 100vw, 300px);
    left: 0.5em;
    right: 0;
    top: -1.5em;
  }
  #service .box_service.creation .title .alp {
    width: min(45 / 375 * 100vw, 45px);
    top: -0.3em;
    left: 1.8em;
  }
  #service .box_service.creation .title .txt {
    width: min(254 / 375 * 100vw, 254px);
  }
  #service .box_service.creation .boxin {
    width: 100%;
    position: static;
  }
  #service .box_service.creation .boxin.seccond {
    padding-top: 4.6em;
    position: relative;
  }
  #service .box_service.creation .boxin.seccond::before {
    width: 102%;
    height: min(7 / 375 * 100vw, 7px);
    background-size: min(7 / 375 * 100vw, 7px);
    left: 0;
    top: 2.3em;
  }
  #service .box_service.creation .num {
    width: min(64 / 375 * 100vw, 64px);
    margin-top: -1.6em;
  }
}
#service .box_btn {
  margin: min(58 / 1320 * 100vw, 58px) auto 0;
}
@media screen and (max-width: 768px) {
  #service .box_btn {
    margin-top: 2.5em;
  }
}

#works {
  margin-top: 0;
  padding: min(100 / 1320 * 100vw, 100px) 0 min(30 / 1320 * 100vw, 30px);
  position: relative;
  padding-bottom: min(60 / 1320 * 100vw, 60px);
  position: relative;
}
#works::before {
  content: "";
  display: block;
  width: 1920px;
  height: 66px;
  background: url(../img/top/curve_beige.png) no-repeat center top;
  background-size: 100%;
  position: absolute;
  top: -66px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media screen and (max-width: 1380px) {
  #works::before {
    width: min(1920 / 1320 * 100vw, 1920px);
    height: min(66 / 1320 * 100vw, 66px);
    top: calc(min(65 / 1320 * 100vw, 65px) * -1);
  }
}
@media screen and (max-width: 768px) {
  #works {
    padding: 2.1em 0 4.75em;
  }
  #works::before {
    width: 100vw;
    height: auto;
    aspect-ratio: 750/56;
    background: url(../img/top/curve_beige_sp.png) no-repeat center top;
    background-size: 100%;
    top: -7.4666666667vw;
  }
}
#works::after {
  content: "";
  display: block;
  width: 1920px;
  height: 66px;
  background: url(../img/top/curve_beige.png) no-repeat center top;
  background-size: 100%;
  position: absolute;
  bottom: -66px;
  left: 50%;
  -webkit-transform: scale(1, -1) translateX(-50%);
          transform: scale(1, -1) translateX(-50%);
}
@media screen and (max-width: 1380px) {
  #works::after {
    width: min(1920 / 1320 * 100vw, 1920px);
    height: min(66 / 1320 * 100vw, 66px);
    bottom: calc(min(65 / 1320 * 100vw, 65px) * -1);
  }
}
@media screen and (max-width: 768px) {
  #works {
    padding: 0 0 2.8em;
  }
  #works::after {
    width: 100vw;
    height: auto;
    aspect-ratio: 750/56;
    background: url(../img/top/curve_beige_sp.png) no-repeat center top;
    background-size: 100%;
    bottom: -7.4666666667vw;
  }
}
#works .flex_wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
#works .box_title.works {
  width: min(18.2291666667vw, 350px);
  min-width: min(280 / 1320 * 100vw, 280px);
}
#works .box_lead {
  max-width: calc(100% - min(280 / 1320 * 100vw, 280px));
  width: calc(100% - min(18.2291666667vw, 350px));
  margin-top: 0.6em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
#works .box_lead .copy {
  width: 29.1936978684%;
}
#works .box_lead .txt {
  max-width: 680px;
  width: 63.0213160334%;
  margin-left: 7%;
}
@media screen and (max-width: 768px) {
  #works .flex_wrap.title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  #works .box_title.works {
    width: 100%;
    margin-top: 1.3em;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  #works .box_lead {
    width: 100%;
    margin-top: 0;
    display: contents;
  }
  #works .box_lead .copy {
    width: 100%;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    text-align: center;
  }
  #works .box_lead .copy img {
    width: min(86 / 375 * 100vw, 86px);
  }
  #works .box_lead .txt {
    max-width: 100%;
    width: 100%;
    margin: 1.8em auto 0;
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
}
#works .flex_wrap.works {
  margin-top: min(52 / 1320 * 100vw, 52px);
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
#works .flex_wrap.works .box_category {
  width: min(18.2291666667vw, 350px);
  min-width: min(280 / 1320 * 100vw, 280px);
}
#works .flex_wrap.works .box_category .tit_category {
  color: #0075B3;
  font-size: min(20 / 1320 * 100vw, 20px);
  font-family: "Inter", "ZenKakuGothicNew-Medium", sans-serif;
  font-weight: 900;
  letter-spacing: 0.04em;
}
#works .flex_wrap.works .box_category .ul_category {
  width: 80%;
  margin-top: 1.2em;
}
#works .flex_wrap.works .box_category .ul_category li + li {
  margin-top: 1.2em;
}
#works .flex_wrap.works .box_category .ul_category li a::before {
  background: #fff;
}
#works .flex_wrap.works .box_category .box_btn {
  width: min(200 / 1320 * 100vw, 200px);
  margin-top: 3.3em;
}
#works .flex_wrap.works .box_works {
  max-width: calc(100% - min(280 / 1320 * 100vw, 280px));
  width: calc(100% - min(18.2291666667vw, 350px));
  margin-top: 0.6em;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
@media screen and (max-width: 768px) {
  #works .flex_wrap.works {
    margin-top: 2.2em;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    position: relative;
  }
  #works .flex_wrap.works::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 1px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAHElEQVR4AWJatGjRfwYoYIqLi2OEshmYYAwQDQAAAP//JeF1QgAAAAZJREFUAwCEZAQHYY95WQAAAABJRU5ErkJggg==) repeat;
  }
  #works .flex_wrap.works .box_category {
    width: 100%;
    padding-top: 2.1em;
  }
  #works .flex_wrap.works .box_category .tit_category {
    font-size: min(16 / 375 * 100vw, 16px);
  }
  #works .flex_wrap.works .box_category .ul_category {
    margin-top: 0.5em;
    padding-right: 0;
  }
  #works .flex_wrap.works .box_category .ul_category li {
    display: inline-block;
    margin-right: 1em;
  }
  #works .flex_wrap.works .box_category .ul_category li + li {
    margin-top: 0;
    margin-bottom: 0.8em;
  }
  #works .flex_wrap.works .box_works {
    width: 100%;
    max-width: 100%;
    margin-top: 1.2em;
  }
  #works .flex_wrap.works .box_works .ul_workslist > li .area_title .category {
    font-size: min(10 / 375 * 100vw, 10px);
  }
  #works .flex_wrap.works .box_btn {
    margin: 2.5em auto 0;
  }
}

#recruit {
  padding: min(50 / 1320 * 100vw, 50px) 0 min(54 / 1320 * 100vw, 54px);
  position: relative;
}
#recruit::before {
  content: "";
  display: block;
  width: 1920px;
  height: 66px;
  background: url(../img/top/curve_beige.png) no-repeat center top;
  background-size: 100%;
  position: absolute;
  bottom: -66px;
  left: 50%;
  -webkit-transform: scale(1, -1) translateX(-50%);
          transform: scale(1, -1) translateX(-50%);
}
@media screen and (max-width: 1380px) {
  #recruit::before {
    width: min(1920 / 1320 * 100vw, 1920px);
    height: min(66 / 1320 * 100vw, 66px);
    bottom: calc(min(65 / 1320 * 100vw, 65px) * -1);
  }
}
@media screen and (max-width: 768px) {
  #recruit {
    padding: 0 0 2.8em;
  }
  #recruit::before {
    width: 100vw;
    height: auto;
    aspect-ratio: 750/56;
    background: url(../img/top/curve_beige_sp.png) no-repeat center top;
    background-size: 100%;
    bottom: -7.4666666667vw;
  }
}
#recruit .inner {
  position: relative;
}
#recruit .image {
  height: min(680 / 1320 * 100vw, 680px);
  overflow: hidden;
  position: relative;
}
#recruit .image img {
  width: min(1920 / 1320 * 100vw, 1920px);
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}
@media screen and (max-width: 768px) {
  #recruit .image {
    height: min(236 / 375 * 100vw, 236px);
  }
  #recruit .image img {
    width: 100%;
  }
}
#recruit .box_deco {
  width: min(441 / 1320 * 100vw, 441px);
  height: min(359 / 1320 * 100vw, 359px);
  position: absolute;
  top: calc(min(390 / 1320 * 100vw, 390px) * -1);
  right: calc(min(20 / 1320 * 100vw, 20px) * -1);
}
@media screen and (max-width: 1370px) {
  #recruit .box_deco {
    right: min(20 / 1320 * 100vw, 20px);
  }
}
#recruit .box_deco .bg,
#recruit .box_deco .blue,
#recruit .box_deco .yellow,
#recruit .box_deco .red {
  position: absolute;
}
#recruit .box_deco .bg {
  width: min(400 / 1320 * 100vw, 400px);
  top: min(38 / 1320 * 100vw, 38px);
  right: min(30 / 1320 * 100vw, 30px);
  -webkit-transform: rotate(-10deg);
          transform: rotate(-10deg);
}
#recruit .box_deco .blue {
  width: min(120 / 1320 * 100vw, 120px);
}
#recruit .box_deco .yellow {
  width: min(103 / 1320 * 100vw, 103px);
}
#recruit .box_deco .red {
  width: min(112 / 1320 * 100vw, 112px);
}
#recruit .box_deco .copy {
  width: min(132 / 1320 * 100vw, 132px);
  position: absolute;
  bottom: 0;
  right: min(84 / 1320 * 100vw, 84px);
}
@media screen and (max-width: 768px) {
  #recruit .box_deco {
    width: min(335 / 375 * 100vw, 335px);
    height: min(227 / 375 * 100vw, 227px);
    position: absolute;
    top: calc(min(245 / 375 * 100vw, 245px) * -1);
    right: 5%;
  }
  #recruit .box_deco .bg {
    width: min(304 / 375 * 100vw, 304px);
    top: 1.8em;
    right: 1.25em;
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  #recruit .box_deco .blue {
    width: min(91 / 375 * 100vw, 91px);
  }
  #recruit .box_deco .yellow {
    width: min(91 / 375 * 100vw, 91px);
  }
  #recruit .box_deco .red {
    width: min(91 / 375 * 100vw, 91px);
  }
  #recruit .box_deco .copy {
    width: min(86 / 375 * 100vw, 86px);
    bottom: 0;
    right: min(84 / 375 * 100vw, 84px);
  }
}
#recruit .flex_wrap.recruit {
  margin-top: min(76 / 1320 * 100vw, 76px);
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
#recruit .flex_wrap.recruit .box_title.recruit {
  margin-top: 0.5em;
}
#recruit .flex_wrap.recruit .box_recruit {
  width: min(680 / 1320 * 100vw, 680px);
}
@media screen and (max-width: 768px) {
  #recruit .flex_wrap.recruit {
    margin-top: 1.3em;
    margin-top: min(167 / 375 * 100vw, 167px);
  }
  #recruit .flex_wrap.recruit .box_title.recruit {
    margin-top: 0.5em;
  }
  #recruit .flex_wrap.recruit .box_recruit {
    width: 100%;
  }
  #recruit .flex_wrap.recruit .box_recruit p {
    margin-top: 1.8em;
  }
}
#recruit .flex_wrap.link {
  margin-top: min(55 / 1320 * 100vw, 55px);
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
#recruit .flex_wrap.link .link {
  width: min(320 / 1320 * 100vw, 320px);
}
#recruit .flex_wrap.link .link a {
  padding-bottom: 0.6em;
  display: block;
  position: relative;
  border-bottom: 1px solid #d9d9d9;
}
#recruit .flex_wrap.link .link a::before {
  content: "";
  display: block;
  position: absolute;
  width: min(32 / 1320 * 100vw, 32px);
  height: min(32 / 1320 * 100vw, 32px);
  background: url(../img/top/icon_arrow.png) no-repeat center top #332F2D;
  background-size: 100%;
  border-radius: 50%;
  right: 0;
  bottom: 0.5em;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
@media (hover: hover) {
  #recruit .flex_wrap.link .link a:hover::before {
    right: -0.8em;
  }
}
@media screen and (max-width: 768px) {
  #recruit .flex_wrap.link {
    margin-top: 2em;
  }
  #recruit .flex_wrap.link .link {
    width: 100%;
  }
  #recruit .flex_wrap.link .link + .link {
    margin-top: 1.1em;
  }
  #recruit .flex_wrap.link .link a {
    padding-bottom: 0.4em;
  }
  #recruit .flex_wrap.link .link a::before {
    width: min(20 / 375 * 100vw, 20px);
    height: min(20 / 375 * 100vw, 20px);
    bottom: 0.8em;
  }
}

#news {
  padding-top: min(185 / 1320 * 100vw, 185px);
  background: #fff;
}
#news .flex_wrap {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
#news .box_title.news {
  margin-top: 0.4em;
}
#news .box_title.news .box_btn {
  width: min(200 / 1320 * 100vw, 200px);
  margin-top: 3.3em;
}
#news .box_news {
  width: min(680 / 1320 * 100vw, 680px);
}
#news .box_news .box_status {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
#news .box_news .box_status .time {
  padding-top: 0.05em;
  font-size: min(16 / 1320 * 100vw, 16px);
  font-weight: 900;
  color: #0075B3;
  letter-spacing: 0.05em;
  font-family: "Inter", "ZenKakuGothicNew-Medium", sans-serif;
}
#news .box_news .box_status .category {
  margin: 0.4em 0 0 1.5em;
  padding: 0.35em 0.5em;
  background: #0075B3;
  font-size: min(14 / 1320 * 100vw, 14px);
  color: #fff;
  line-height: 1;
  display: inline-block;
}
#news .box_news .box_status.important .time {
  color: #EE442B;
}
#news .box_news .box_status.important .category {
  background: #EE442B;
}
#news .box_news .ul_news {
  position: relative;
}
#news .box_news .ul_news::before,
#news .box_news .ul_news li::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAHElEQVR4AWJatGjRfwYoYIqLi2OEshmYYAwQDQAAAP//JeF1QgAAAAZJREFUAwCEZAQHYY95WQAAAABJRU5ErkJggg==) repeat;
}
#news .box_news .ul_news::before {
  top: 0;
}
#news .box_news .ul_news li {
  position: relative;
}
#news .box_news .ul_news li::after {
  bottom: 0;
}
#news .box_news .ul_news li a {
  padding: 1.2em 0;
  display: block;
}
#news .box_news .ul_news li a .box_status {
  margin-bottom: 0.35em;
}
#news .box_news .ul_news li a .box_status .category {
  margin: 0.5em 0 0 1.5em;
}
#news .box_news .ul_news li a .title {
  padding-left: 1em;
  font-size: min(18 / 1320 * 100vw, 18px);
  position: relative;
}
#news .box_news .ul_news li a .title::before {
  content: "";
  width: min(12 / 1320 * 100vw, 12px);
  height: min(12 / 1320 * 100vw, 12px);
  margin-right: 0.4em;
  display: inline-block;
  -webkit-mask: url(../img/common/icon_right.svg);
          mask: url(../img/common/icon_right.svg);
  background-color: #0075B3;
  -webkit-mask-size: 100%;
          mask-size: 100%;
  vertical-align: middle;
  position: absolute;
  top: min(13 / 1320 * 100vw, 13px);
  left: 0;
}
#news .box_news .ul_news li a .title span {
  display: inline;
  position: relative;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -webkit-box-shadow: 0 0 0 #0075B3;
          box-shadow: 0 0 0 #0075B3;
}
#news .box_news .ul_news li a.important .title::before {
  background-color: #EE442B;
}
@media (hover: hover) {
  #news .box_news .ul_news li a:hover .title span {
    color: #0075B3;
    -webkit-box-shadow: 0 1px 0 #0075B3;
            box-shadow: 0 1px 0 #0075B3;
  }
  #news .box_news .ul_news li a:hover.important .title::before {
    background-color: #EE442B;
  }
  #news .box_news .ul_news li a:hover.important .title span {
    color: #EE442B;
    -webkit-box-shadow: 0 1px 0 #EE442B;
            box-shadow: 0 1px 0 #EE442B;
  }
}
@media screen and (max-width: 768px) {
  #news {
    padding-top: 6.5em;
  }
  #news .box_title.news {
    margin-top: 0;
  }
  #news .box_news {
    width: 100%;
    margin-top: 2em;
  }
  #news .box_news .box_status .time {
    font-size: min(14 / 375 * 100vw, 14px);
  }
  #news .box_news .box_status .category {
    margin-left: 0.8em;
    font-size: min(12 / 375 * 100vw, 12px);
  }
  #news .box_news .ul_news li a {
    padding: 1em 0;
  }
  #news .box_news .ul_news li a .box_status {
    margin-bottom: 0.35em;
  }
  #news .box_news .ul_news li a .box_status .category {
    margin: 0.4em 0 0 0.7em;
  }
  #news .box_news .ul_news li a .title {
    margin-top: 0.4em;
    padding-left: min(18 / 375 * 100vw, 18px);
  }
  #news .box_news .ul_news li a .title::before {
    width: min(12 / 375 * 100vw, 12px);
    height: min(12 / 375 * 100vw, 12px);
    top: min(11 / 375 * 100vw, 11px);
  }
  #news .box_news .ul_news li a .title span {
    font-size: min(16 / 375 * 100vw, 16px);
  }
  #news .box_btn {
    margin: 1.7em auto 0;
  }
}

.area_banner {
  padding-top: min(96 / 1320 * 100vw, 96px);
  background: #fff;
}
.area_banner .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: min(64 / 1320 * 100vw, 64px) 5.3333333333%;
}
.area_banner .banner {
  width: 47.3333333333%;
  -webkit-box-shadow: 6px 6px 0px 0px #d9d9d9;
          box-shadow: 6px 6px 0px 0px #d9d9d9;
}
.area_banner .banner a {
  display: block;
  position: relative;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  top: 0;
  left: 0;
}
@media (hover: hover) {
  .area_banner .banner a:hover {
    top: 6px;
    left: 6px;
  }
}
.area_banner .banner a::before {
  content: "";
  display: block;
  position: absolute;
  width: min(32 / 1320 * 100vw, 32px);
  height: min(32 / 1320 * 100vw, 32px);
  background: url(../img/top/icon_arrow.png) no-repeat center top #332F2D;
  background-size: 100%;
  border-radius: 50%;
  right: 0.7em;
  bottom: 0.7em;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .area_banner {
    padding-top: 4em;
    padding-bottom: 1.2em;
  }
  .area_banner .inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1.5em;
  }
  .area_banner .banner {
    width: 100%;
    -webkit-box-shadow: 3px 3px 0px 0px #d9d9d9;
            box-shadow: 3px 3px 0px 0px #d9d9d9;
  }
  .area_banner .banner a::before {
    width: min(20 / 375 * 100vw, 20px);
    height: min(20 / 375 * 100vw, 20px);
    right: 0.5em;
    bottom: 0.5em;
  }
}

.box_piece {
  width: min(264 / 1320 * 100vw, 264px);
  height: min(264 / 1320 * 100vw, 264px);
  position: relative;
  pointer-events: none;
  z-index: 5;
}
.box_piece .piece {
  width: min(88 / 1320 * 100vw, 88px);
  height: min(88 / 1320 * 100vw, 88px);
  position: absolute;
}
.box_piece .piece.center {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
@media screen and (max-width: 768px) {
  .box_piece {
    width: min(96 / 375 * 100vw, 96px);
    height: min(96 / 375 * 100vw, 96px);
  }
  .box_piece .piece {
    width: min(32 / 375 * 100vw, 32px);
    height: min(32 / 375 * 100vw, 32px);
  }
}

#about .box_piece {
  position: absolute;
  top: min(300 / 1320 * 100vw, 300px);
  left: 0;
}
#about .box_piece .piece.piece01 {
  left: min(88 / 1320 * 100vw, 88px);
  top: 0;
}
#about .box_piece .piece.piece02 {
  right: 0;
  top: 0;
}
#about .box_piece .piece.piece03 {
  right: 0;
  top: min(88 / 1320 * 100vw, 88px);
}
#about .box_piece .piece.piece04 {
  right: min(88 / 1320 * 100vw, 88px);
  bottom: 0;
}
#about .box_piece .piece.piece05 {
  left: 0;
  bottom: 0;
}
@media screen and (max-width: 768px) {
  #about .box_piece {
    top: min(284 / 375 * 100vw, 284px);
  }
  #about .box_piece .piece.piece01 {
    left: min(32 / 375 * 100vw, 32px);
  }
  #about .box_piece .piece.piece03 {
    top: min(32 / 375 * 100vw, 32px);
  }
  #about .box_piece .piece.piece04 {
    right: min(32 / 375 * 100vw, 32px);
  }
}

#works #works_piece {
  position: absolute;
  top: calc(min(190 / 1320 * 100vw, 190px) * -1);
  right: 0;
}
#works #works_piece .piece.piece01 {
  left: min(88 / 1320 * 100vw, 88px);
  top: 0;
}
#works #works_piece .piece.piece02 {
  right: 0;
  top: 0;
}
#works #works_piece .piece.piece03 {
  right: 0;
  bottom: 0;
}
#works #works_piece .piece.piece04 {
  right: min(88 / 1320 * 100vw, 88px);
  bottom: 0;
}
#works #works_piece .piece.piece05 {
  left: 0;
  bottom: min(88 / 1320 * 100vw, 88px);
}
#works #works_piece .piece.piece06 {
  left: 0;
  top: 0;
}
@media screen and (max-width: 768px) {
  #works #works_piece {
    top: calc(min(75 / 375 * 100vw, 75px) * -1);
  }
  #works #works_piece .piece.piece01 {
    left: min(32 / 375 * 100vw, 32px);
  }
  #works #works_piece .piece.piece04 {
    right: min(32 / 375 * 100vw, 32px);
  }
  #works #works_piece .piece.piece05 {
    bottom: min(32 / 375 * 100vw, 32px);
  }
}