@charset "UTF-8";
/*------------------------------ assets.scss ------------------------------ */
/*--------------------------------
変数
---------------------------------*/
/* 色 */
/* 色（CSS用） */
:root {
  --c1: #00bfbf;
  --c2: #d9f5f5;
  --c3: #f1b821;
  --c4: #fef8e9;
  --c5: #333333;
  --c6: #333333;
  --c7: #333333;
  --c8: #333333;
  --c9: #333333;
  --c10: #333333;
  --c11: #333333;
  --c12: #333333;
  --c13: #333333;
  --c14: #333333;
  --c15: #333333;
  --c16: #333333;
  --c17: #333333;
  --c18: #333333;
  --c19: #333333;
  --c20: #333333;
  --cb: #333333;
  --cbk: #000000;
  --cc: #cccccc;
  --cr1: #ec1c24;
  --cr2: #e0383e;
  --cr3: #d5383e;
  --cr4: #ec1c24;
  --cr5: #ec1c24;
  --cw: #ffffff;
  --ctp: transparent;
}

/* ブレイクポイント */
/* フォント */
/*--------------------------------
ミクシン
---------------------------------*/
/* hoverメディア特性 */
/* hoverメディア特性 + focus-visible*/
/* メディアクエリ */
/* 余白 */
/* フォントサイズ */
/* 疑似要素 */
/* border-radius */
/* 中央寄せ */
/*--------------------------------
クラス
---------------------------------*/
/* float */
:where(.floatr) {
  float: right;
  margin-left: 1em;
}

:where(.floatl) {
  float: left;
  margin-right: 1em;
}

:where(.floatn) {
  float: none;
}

:where(.clear) {
  clear: both;
}

/* background-color */
.bgc1 {
  background-color: #00bfbf;
}

.bgc2 {
  background-color: #d9f5f5;
}

.bgc3 {
  background-color: #f1b821;
}

.bgc4 {
  background-color: #fef8e9;
}

.bgc5 {
  background-color: #333333;
}

.bgc6 {
  background-color: #333333;
}

.bgc7 {
  background-color: #333333;
}

.bgc8 {
  background-color: #333333;
}

.bgc9 {
  background-color: #333333;
}

.bgc10 {
  background-color: #333333;
}

.bgc11 {
  background-color: #333333;
}

.bgc12 {
  background-color: #333333;
}

.bgc13 {
  background-color: #333333;
}

.bgc14 {
  background-color: #333333;
}

.bgc15 {
  background-color: #333333;
}

.bgc16 {
  background-color: #333333;
}

.bgc17 {
  background-color: #333333;
}

.bgc18 {
  background-color: #333333;
}

.bgc19 {
  background-color: #333333;
}

.bgc20 {
  background-color: #333333;
}

.bgcb {
  background-color: #333333;
}

.bgcbk {
  background-color: #000000;
}

.bgcc {
  background-color: #cccccc;
}

.bgcr1 {
  background-color: #ec1c24;
}

.bgcr2 {
  background-color: #e0383e;
}

.bgcr3 {
  background-color: #d5383e;
}

.bgcr4 {
  background-color: #ec1c24;
}

.bgcr5 {
  background-color: #ec1c24;
}

.bgcw {
  background-color: #ffffff;
}

.bgctp {
  background-color: transparent;
}

/* color */
.c1, .c1 a {
  color: #00bfbf;
}

.c2, .c2 a {
  color: #d9f5f5;
}

.c3, .c3 a {
  color: #f1b821;
}

.c4, .c4 a {
  color: #fef8e9;
}

.c5, .c5 a {
  color: #333333;
}

.c6, .c6 a {
  color: #333333;
}

.c7, .c7 a {
  color: #333333;
}

.c8, .c8 a {
  color: #333333;
}

.c9, .c9 a {
  color: #333333;
}

.c10, .c10 a {
  color: #333333;
}

.c11, .c11 a {
  color: #333333;
}

.c12, .c12 a {
  color: #333333;
}

.c13, .c13 a {
  color: #333333;
}

.c14, .c14 a {
  color: #333333;
}

.c15, .c15 a {
  color: #333333;
}

.c16, .c16 a {
  color: #333333;
}

.c17, .c17 a {
  color: #333333;
}

.c18, .c18 a {
  color: #333333;
}

.c19, .c19 a {
  color: #333333;
}

.c20, .c20 a {
  color: #333333;
}

.cb, .cb a {
  color: #333333;
}

.cbk, .cbk a {
  color: #000000;
}

.cc, .cc a {
  color: #cccccc;
}

.cr1, .cr1 a {
  color: #ec1c24;
}

.cr2, .cr2 a {
  color: #e0383e;
}

.cr3, .cr3 a {
  color: #d5383e;
}

.cr4, .cr4 a {
  color: #ec1c24;
}

.cr5, .cr5 a {
  color: #ec1c24;
}

.cw, .cw a {
  color: #ffffff;
}

.ctp, .ctp a {
  color: transparent;
}

/* font-size */
.fs10 {
  font-size: calc(10rem * 0.1);
}

.fs11 {
  font-size: calc(11rem * 0.1);
}

.fs12 {
  font-size: calc(12rem * 0.1);
}

.fs13 {
  font-size: calc(13rem * 0.1);
}

.fs14 {
  font-size: calc(14rem * 0.1);
}

.fs15 {
  font-size: calc(15rem * 0.1);
}

.fs16 {
  font-size: calc(16rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs16 {
    font-size: calc(16rem * 0.1 * (0.975 - 16 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs16 {
    font-size: calc(16rem * 0.1 * (0.975 - 16 / 10 / 24));
  }
}

.fs17 {
  font-size: calc(17rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs17 {
    font-size: calc(17rem * 0.1 * (0.975 - 17 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs17 {
    font-size: calc(17rem * 0.1 * (0.975 - 17 / 10 / 24));
  }
}

.fs18 {
  font-size: calc(18rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs18 {
    font-size: calc(18rem * 0.1 * (0.975 - 18 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs18 {
    font-size: calc(18rem * 0.1 * (0.975 - 18 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs18 {
    font-size: clamp(1.7rem, 18rem * 0.1 * (0.975 - 18 / 10 / 12), 9999rem);
  }
}

.fs19 {
  font-size: calc(19rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs19 {
    font-size: calc(19rem * 0.1 * (0.975 - 19 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs19 {
    font-size: calc(19rem * 0.1 * (0.975 - 19 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs19 {
    font-size: clamp(1.7rem, 19rem * 0.1 * (0.975 - 19 / 10 / 12), 9999rem);
  }
}

.fs20 {
  font-size: calc(20rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs20 {
    font-size: calc(20rem * 0.1 * (0.975 - 20 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs20 {
    font-size: calc(20rem * 0.1 * (0.975 - 20 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs20 {
    font-size: clamp(1.7rem, 20rem * 0.1 * (0.975 - 20 / 10 / 12), 9999rem);
  }
}

.fs21 {
  font-size: calc(21rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs21 {
    font-size: calc(21rem * 0.1 * (0.975 - 21 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs21 {
    font-size: calc(21rem * 0.1 * (0.975 - 21 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs21 {
    font-size: clamp(1.7rem, 21rem * 0.1 * (0.975 - 21 / 10 / 12), 9999rem);
  }
}

.fs22 {
  font-size: calc(22rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs22 {
    font-size: calc(22rem * 0.1 * (0.975 - 22 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs22 {
    font-size: calc(22rem * 0.1 * (0.975 - 22 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs22 {
    font-size: clamp(1.7rem, 22rem * 0.1 * (0.975 - 22 / 10 / 12), 9999rem);
  }
}

.fs23 {
  font-size: calc(23rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs23 {
    font-size: calc(23rem * 0.1 * (0.975 - 23 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs23 {
    font-size: calc(23rem * 0.1 * (0.975 - 23 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs23 {
    font-size: clamp(1.7rem, 23rem * 0.1 * (0.975 - 23 / 10 / 12), 9999rem);
  }
}

.fs24 {
  font-size: calc(24rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs24 {
    font-size: calc(24rem * 0.1 * (0.975 - 24 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs24 {
    font-size: calc(24rem * 0.1 * (0.975 - 24 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs24 {
    font-size: clamp(1.7rem, 24rem * 0.1 * (0.975 - 24 / 10 / 12), 9999rem);
  }
}

.fs25 {
  font-size: calc(25rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs25 {
    font-size: calc(25rem * 0.1 * (0.975 - 25 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs25 {
    font-size: calc(25rem * 0.1 * (0.975 - 25 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs25 {
    font-size: clamp(1.7rem, 25rem * 0.1 * (0.975 - 25 / 10 / 12), 9999rem);
  }
}

.fs26 {
  font-size: calc(26rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs26 {
    font-size: calc(26rem * 0.1 * (0.975 - 26 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs26 {
    font-size: calc(26rem * 0.1 * (0.975 - 26 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs26 {
    font-size: clamp(1.7rem, 26rem * 0.1 * (0.975 - 26 / 10 / 12), 9999rem);
  }
}

.fs27 {
  font-size: calc(27rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs27 {
    font-size: calc(27rem * 0.1 * (0.975 - 27 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs27 {
    font-size: calc(27rem * 0.1 * (0.975 - 27 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs27 {
    font-size: clamp(1.7rem, 27rem * 0.1 * (0.975 - 27 / 10 / 12), 9999rem);
  }
}

.fs28 {
  font-size: calc(28rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs28 {
    font-size: calc(28rem * 0.1 * (0.975 - 28 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs28 {
    font-size: calc(28rem * 0.1 * (0.975 - 28 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs28 {
    font-size: clamp(1.7rem, 28rem * 0.1 * (0.975 - 28 / 10 / 12), 9999rem);
  }
}

.fs29 {
  font-size: calc(29rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs29 {
    font-size: calc(29rem * 0.1 * (0.975 - 29 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs29 {
    font-size: calc(29rem * 0.1 * (0.975 - 29 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs29 {
    font-size: clamp(1.7rem, 29rem * 0.1 * (0.975 - 29 / 10 / 12), 9999rem);
  }
}

.fs30 {
  font-size: calc(30rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs30 {
    font-size: calc(30rem * 0.1 * (0.975 - 30 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs30 {
    font-size: calc(30rem * 0.1 * (0.975 - 30 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs30 {
    font-size: clamp(1.7rem, 30rem * 0.1 * (0.975 - 30 / 10 / 12), 9999rem);
  }
}

.fs31 {
  font-size: calc(31rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs31 {
    font-size: calc(31rem * 0.1 * (0.975 - 31 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs31 {
    font-size: calc(31rem * 0.1 * (0.975 - 31 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs31 {
    font-size: clamp(1.7rem, 31rem * 0.1 * (0.975 - 31 / 10 / 12), 9999rem);
  }
}

.fs32 {
  font-size: calc(32rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs32 {
    font-size: calc(32rem * 0.1 * (0.975 - 32 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs32 {
    font-size: calc(32rem * 0.1 * (0.975 - 32 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs32 {
    font-size: clamp(1.7rem, 32rem * 0.1 * (0.975 - 32 / 10 / 12), 9999rem);
  }
}

.fs33 {
  font-size: calc(33rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs33 {
    font-size: calc(33rem * 0.1 * (0.975 - 33 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs33 {
    font-size: calc(33rem * 0.1 * (0.975 - 33 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs33 {
    font-size: clamp(1.7rem, 33rem * 0.1 * (0.975 - 33 / 10 / 12), 9999rem);
  }
}

.fs34 {
  font-size: calc(34rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs34 {
    font-size: calc(34rem * 0.1 * (0.975 - 34 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs34 {
    font-size: calc(34rem * 0.1 * (0.975 - 34 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs34 {
    font-size: clamp(1.7rem, 34rem * 0.1 * (0.975 - 34 / 10 / 12), 9999rem);
  }
}

.fs35 {
  font-size: calc(35rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs35 {
    font-size: calc(35rem * 0.1 * (0.975 - 35 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs35 {
    font-size: calc(35rem * 0.1 * (0.975 - 35 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs35 {
    font-size: clamp(1.7rem, 35rem * 0.1 * (0.975 - 35 / 10 / 12), 9999rem);
  }
}

.fs36 {
  font-size: calc(36rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs36 {
    font-size: calc(36rem * 0.1 * (0.975 - 36 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs36 {
    font-size: calc(36rem * 0.1 * (0.975 - 36 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs36 {
    font-size: clamp(1.7rem, 36rem * 0.1 * (0.975 - 36 / 10 / 12), 9999rem);
  }
}

.fs37 {
  font-size: calc(37rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs37 {
    font-size: calc(37rem * 0.1 * (0.975 - 37 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs37 {
    font-size: calc(37rem * 0.1 * (0.975 - 37 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs37 {
    font-size: clamp(1.7rem, 37rem * 0.1 * (0.975 - 37 / 10 / 12), 9999rem);
  }
}

.fs38 {
  font-size: calc(38rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs38 {
    font-size: calc(38rem * 0.1 * (0.975 - 38 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs38 {
    font-size: calc(38rem * 0.1 * (0.975 - 38 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs38 {
    font-size: clamp(1.7rem, 38rem * 0.1 * (0.975 - 38 / 10 / 12), 9999rem);
  }
}

.fs39 {
  font-size: calc(39rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs39 {
    font-size: calc(39rem * 0.1 * (0.975 - 39 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs39 {
    font-size: calc(39rem * 0.1 * (0.975 - 39 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs39 {
    font-size: clamp(1.7rem, 39rem * 0.1 * (0.975 - 39 / 10 / 12), 9999rem);
  }
}

.fs40 {
  font-size: calc(40rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs40 {
    font-size: calc(40rem * 0.1 * (0.975 - 40 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs40 {
    font-size: calc(40rem * 0.1 * (0.975 - 40 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs40 {
    font-size: clamp(1.7rem, 40rem * 0.1 * (0.975 - 40 / 10 / 12), 9999rem);
  }
}

.fs41 {
  font-size: calc(41rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs41 {
    font-size: calc(41rem * 0.1 * (0.975 - 41 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs41 {
    font-size: calc(41rem * 0.1 * (0.975 - 41 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs41 {
    font-size: clamp(1.7rem, 41rem * 0.1 * (0.975 - 41 / 10 / 12), 9999rem);
  }
}

.fs42 {
  font-size: calc(42rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs42 {
    font-size: calc(42rem * 0.1 * (0.975 - 42 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs42 {
    font-size: calc(42rem * 0.1 * (0.975 - 42 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs42 {
    font-size: clamp(1.7rem, 42rem * 0.1 * (0.975 - 42 / 10 / 12), 9999rem);
  }
}

.fs43 {
  font-size: calc(43rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs43 {
    font-size: calc(43rem * 0.1 * (0.975 - 43 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs43 {
    font-size: calc(43rem * 0.1 * (0.975 - 43 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs43 {
    font-size: clamp(1.7rem, 43rem * 0.1 * (0.975 - 43 / 10 / 12), 9999rem);
  }
}

.fs44 {
  font-size: calc(44rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs44 {
    font-size: calc(44rem * 0.1 * (0.975 - 44 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs44 {
    font-size: calc(44rem * 0.1 * (0.975 - 44 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs44 {
    font-size: clamp(1.7rem, 44rem * 0.1 * (0.975 - 44 / 10 / 12), 9999rem);
  }
}

.fs45 {
  font-size: calc(45rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs45 {
    font-size: calc(45rem * 0.1 * (0.975 - 45 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs45 {
    font-size: calc(45rem * 0.1 * (0.975 - 45 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs45 {
    font-size: clamp(1.7rem, 45rem * 0.1 * (0.975 - 45 / 10 / 12), 9999rem);
  }
}

.fs46 {
  font-size: calc(46rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs46 {
    font-size: calc(46rem * 0.1 * (0.975 - 46 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs46 {
    font-size: calc(46rem * 0.1 * (0.975 - 46 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs46 {
    font-size: clamp(1.7rem, 46rem * 0.1 * (0.975 - 46 / 10 / 12), 9999rem);
  }
}

.fs47 {
  font-size: calc(47rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs47 {
    font-size: calc(47rem * 0.1 * (0.975 - 47 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs47 {
    font-size: calc(47rem * 0.1 * (0.975 - 47 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs47 {
    font-size: clamp(1.7rem, 47rem * 0.1 * (0.975 - 47 / 10 / 12), 9999rem);
  }
}

.fs48 {
  font-size: calc(48rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs48 {
    font-size: calc(48rem * 0.1 * (0.975 - 48 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs48 {
    font-size: calc(48rem * 0.1 * (0.975 - 48 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs48 {
    font-size: clamp(1.7rem, 48rem * 0.1 * (0.975 - 48 / 10 / 12), 9999rem);
  }
}

.fs49 {
  font-size: calc(49rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs49 {
    font-size: calc(49rem * 0.1 * (0.975 - 49 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs49 {
    font-size: calc(49rem * 0.1 * (0.975 - 49 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs49 {
    font-size: clamp(1.7rem, 49rem * 0.1 * (0.975 - 49 / 10 / 12), 9999rem);
  }
}

.fs50 {
  font-size: calc(50rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs50 {
    font-size: calc(50rem * 0.1 * (0.975 - 50 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs50 {
    font-size: calc(50rem * 0.1 * (0.975 - 50 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs50 {
    font-size: clamp(1.7rem, 50rem * 0.1 * (0.975 - 50 / 10 / 12), 9999rem);
  }
}

.fs51 {
  font-size: calc(51rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs51 {
    font-size: calc(51rem * 0.1 * (0.975 - 51 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs51 {
    font-size: calc(51rem * 0.1 * (0.975 - 51 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs51 {
    font-size: clamp(1.7rem, 51rem * 0.1 * (0.975 - 51 / 10 / 12), 9999rem);
  }
}

.fs52 {
  font-size: calc(52rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs52 {
    font-size: calc(52rem * 0.1 * (0.975 - 52 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs52 {
    font-size: calc(52rem * 0.1 * (0.975 - 52 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs52 {
    font-size: clamp(1.7rem, 52rem * 0.1 * (0.975 - 52 / 10 / 12), 9999rem);
  }
}

.fs53 {
  font-size: calc(53rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs53 {
    font-size: calc(53rem * 0.1 * (0.975 - 53 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs53 {
    font-size: calc(53rem * 0.1 * (0.975 - 53 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs53 {
    font-size: clamp(1.7rem, 53rem * 0.1 * (0.975 - 53 / 10 / 12), 9999rem);
  }
}

.fs54 {
  font-size: calc(54rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs54 {
    font-size: calc(54rem * 0.1 * (0.975 - 54 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs54 {
    font-size: calc(54rem * 0.1 * (0.975 - 54 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs54 {
    font-size: clamp(1.7rem, 54rem * 0.1 * (0.975 - 54 / 10 / 12), 9999rem);
  }
}

.fs55 {
  font-size: calc(55rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs55 {
    font-size: calc(55rem * 0.1 * (0.975 - 55 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs55 {
    font-size: calc(55rem * 0.1 * (0.975 - 55 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs55 {
    font-size: clamp(1.7rem, 55rem * 0.1 * (0.975 - 55 / 10 / 12), 9999rem);
  }
}

.fs56 {
  font-size: calc(56rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs56 {
    font-size: calc(56rem * 0.1 * (0.975 - 56 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs56 {
    font-size: calc(56rem * 0.1 * (0.975 - 56 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs56 {
    font-size: clamp(1.7rem, 56rem * 0.1 * (0.975 - 56 / 10 / 12), 9999rem);
  }
}

.fs57 {
  font-size: calc(57rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs57 {
    font-size: calc(57rem * 0.1 * (0.975 - 57 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs57 {
    font-size: calc(57rem * 0.1 * (0.975 - 57 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs57 {
    font-size: clamp(1.7rem, 57rem * 0.1 * (0.975 - 57 / 10 / 12), 9999rem);
  }
}

.fs58 {
  font-size: calc(58rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs58 {
    font-size: calc(58rem * 0.1 * (0.975 - 58 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs58 {
    font-size: calc(58rem * 0.1 * (0.975 - 58 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs58 {
    font-size: clamp(1.7rem, 58rem * 0.1 * (0.975 - 58 / 10 / 12), 9999rem);
  }
}

.fs59 {
  font-size: calc(59rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs59 {
    font-size: calc(59rem * 0.1 * (0.975 - 59 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs59 {
    font-size: calc(59rem * 0.1 * (0.975 - 59 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs59 {
    font-size: clamp(1.7rem, 59rem * 0.1 * (0.975 - 59 / 10 / 12), 9999rem);
  }
}

.fs60 {
  font-size: calc(60rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs60 {
    font-size: calc(60rem * 0.1 * (0.975 - 60 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs60 {
    font-size: calc(60rem * 0.1 * (0.975 - 60 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs60 {
    font-size: clamp(1.7rem, 60rem * 0.1 * (0.975 - 60 / 10 / 12), 9999rem);
  }
}

.fs61 {
  font-size: calc(61rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs61 {
    font-size: calc(61rem * 0.1 * (0.975 - 61 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs61 {
    font-size: calc(61rem * 0.1 * (0.975 - 61 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs61 {
    font-size: clamp(1.7rem, 61rem * 0.1 * (0.975 - 61 / 10 / 12), 9999rem);
  }
}

.fs62 {
  font-size: calc(62rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs62 {
    font-size: calc(62rem * 0.1 * (0.975 - 62 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs62 {
    font-size: calc(62rem * 0.1 * (0.975 - 62 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs62 {
    font-size: clamp(1.7rem, 62rem * 0.1 * (0.975 - 62 / 10 / 12), 9999rem);
  }
}

.fs63 {
  font-size: calc(63rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs63 {
    font-size: calc(63rem * 0.1 * (0.975 - 63 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs63 {
    font-size: calc(63rem * 0.1 * (0.975 - 63 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs63 {
    font-size: clamp(1.7rem, 63rem * 0.1 * (0.975 - 63 / 10 / 12), 9999rem);
  }
}

.fs64 {
  font-size: calc(64rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs64 {
    font-size: calc(64rem * 0.1 * (0.975 - 64 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs64 {
    font-size: calc(64rem * 0.1 * (0.975 - 64 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs64 {
    font-size: clamp(1.7rem, 64rem * 0.1 * (0.975 - 64 / 10 / 12), 9999rem);
  }
}

.fs65 {
  font-size: calc(65rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs65 {
    font-size: calc(65rem * 0.1 * (0.975 - 65 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs65 {
    font-size: calc(65rem * 0.1 * (0.975 - 65 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs65 {
    font-size: clamp(1.7rem, 65rem * 0.1 * (0.975 - 65 / 10 / 12), 9999rem);
  }
}

.fs66 {
  font-size: calc(66rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs66 {
    font-size: calc(66rem * 0.1 * (0.975 - 66 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs66 {
    font-size: calc(66rem * 0.1 * (0.975 - 66 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs66 {
    font-size: clamp(1.7rem, 66rem * 0.1 * (0.975 - 66 / 10 / 12), 9999rem);
  }
}

.fs67 {
  font-size: calc(67rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs67 {
    font-size: calc(67rem * 0.1 * (0.975 - 67 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs67 {
    font-size: calc(67rem * 0.1 * (0.975 - 67 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs67 {
    font-size: clamp(1.7rem, 67rem * 0.1 * (0.975 - 67 / 10 / 12), 9999rem);
  }
}

.fs68 {
  font-size: calc(68rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs68 {
    font-size: calc(68rem * 0.1 * (0.975 - 68 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs68 {
    font-size: calc(68rem * 0.1 * (0.975 - 68 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs68 {
    font-size: clamp(1.7rem, 68rem * 0.1 * (0.975 - 68 / 10 / 12), 9999rem);
  }
}

.fs69 {
  font-size: calc(69rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs69 {
    font-size: calc(69rem * 0.1 * (0.975 - 69 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs69 {
    font-size: calc(69rem * 0.1 * (0.975 - 69 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs69 {
    font-size: clamp(1.7rem, 69rem * 0.1 * (0.975 - 69 / 10 / 12), 9999rem);
  }
}

.fs70 {
  font-size: calc(70rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs70 {
    font-size: calc(70rem * 0.1 * (0.975 - 70 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs70 {
    font-size: calc(70rem * 0.1 * (0.975 - 70 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs70 {
    font-size: clamp(1.7rem, 70rem * 0.1 * (0.975 - 70 / 10 / 12), 9999rem);
  }
}

.fs71 {
  font-size: calc(71rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs71 {
    font-size: calc(71rem * 0.1 * (0.975 - 71 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs71 {
    font-size: calc(71rem * 0.1 * (0.975 - 71 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs71 {
    font-size: clamp(1.7rem, 71rem * 0.1 * (0.975 - 71 / 10 / 12), 9999rem);
  }
}

.fs72 {
  font-size: calc(72rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs72 {
    font-size: calc(72rem * 0.1 * (0.975 - 72 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs72 {
    font-size: calc(72rem * 0.1 * (0.975 - 72 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs72 {
    font-size: clamp(1.7rem, 72rem * 0.1 * (0.975 - 72 / 10 / 12), 9999rem);
  }
}

.fs73 {
  font-size: calc(73rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs73 {
    font-size: calc(73rem * 0.1 * (0.975 - 73 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs73 {
    font-size: calc(73rem * 0.1 * (0.975 - 73 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs73 {
    font-size: clamp(1.7rem, 73rem * 0.1 * (0.975 - 73 / 10 / 12), 9999rem);
  }
}

.fs74 {
  font-size: calc(74rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs74 {
    font-size: calc(74rem * 0.1 * (0.975 - 74 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs74 {
    font-size: calc(74rem * 0.1 * (0.975 - 74 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs74 {
    font-size: clamp(1.7rem, 74rem * 0.1 * (0.975 - 74 / 10 / 12), 9999rem);
  }
}

.fs75 {
  font-size: calc(75rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs75 {
    font-size: calc(75rem * 0.1 * (0.975 - 75 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs75 {
    font-size: calc(75rem * 0.1 * (0.975 - 75 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs75 {
    font-size: clamp(1.7rem, 75rem * 0.1 * (0.975 - 75 / 10 / 12), 9999rem);
  }
}

.fs76 {
  font-size: calc(76rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs76 {
    font-size: calc(76rem * 0.1 * (0.975 - 76 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs76 {
    font-size: calc(76rem * 0.1 * (0.975 - 76 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs76 {
    font-size: clamp(1.7rem, 76rem * 0.1 * (0.975 - 76 / 10 / 12), 9999rem);
  }
}

.fs77 {
  font-size: calc(77rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs77 {
    font-size: calc(77rem * 0.1 * (0.975 - 77 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs77 {
    font-size: calc(77rem * 0.1 * (0.975 - 77 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs77 {
    font-size: clamp(1.7rem, 77rem * 0.1 * (0.975 - 77 / 10 / 12), 9999rem);
  }
}

.fs78 {
  font-size: calc(78rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs78 {
    font-size: calc(78rem * 0.1 * (0.975 - 78 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs78 {
    font-size: calc(78rem * 0.1 * (0.975 - 78 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs78 {
    font-size: clamp(1.7rem, 78rem * 0.1 * (0.975 - 78 / 10 / 12), 9999rem);
  }
}

.fs79 {
  font-size: calc(79rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs79 {
    font-size: calc(79rem * 0.1 * (0.975 - 79 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs79 {
    font-size: calc(79rem * 0.1 * (0.975 - 79 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs79 {
    font-size: clamp(1.7rem, 79rem * 0.1 * (0.975 - 79 / 10 / 12), 9999rem);
  }
}

.fs80 {
  font-size: calc(80rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs80 {
    font-size: calc(80rem * 0.1 * (0.975 - 80 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs80 {
    font-size: calc(80rem * 0.1 * (0.975 - 80 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs80 {
    font-size: clamp(1.7rem, 80rem * 0.1 * (0.975 - 80 / 10 / 12), 9999rem);
  }
}

.fs81 {
  font-size: calc(81rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs81 {
    font-size: calc(81rem * 0.1 * (0.975 - 81 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs81 {
    font-size: calc(81rem * 0.1 * (0.975 - 81 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs81 {
    font-size: clamp(1.7rem, 81rem * 0.1 * (0.975 - 81 / 10 / 12), 9999rem);
  }
}

.fs82 {
  font-size: calc(82rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs82 {
    font-size: calc(82rem * 0.1 * (0.975 - 82 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs82 {
    font-size: calc(82rem * 0.1 * (0.975 - 82 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs82 {
    font-size: clamp(1.7rem, 82rem * 0.1 * (0.975 - 82 / 10 / 12), 9999rem);
  }
}

.fs83 {
  font-size: calc(83rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs83 {
    font-size: calc(83rem * 0.1 * (0.975 - 83 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs83 {
    font-size: calc(83rem * 0.1 * (0.975 - 83 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs83 {
    font-size: clamp(1.7rem, 83rem * 0.1 * (0.975 - 83 / 10 / 12), 9999rem);
  }
}

.fs84 {
  font-size: calc(84rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs84 {
    font-size: calc(84rem * 0.1 * (0.975 - 84 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs84 {
    font-size: calc(84rem * 0.1 * (0.975 - 84 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs84 {
    font-size: clamp(1.7rem, 84rem * 0.1 * (0.975 - 84 / 10 / 12), 9999rem);
  }
}

.fs85 {
  font-size: calc(85rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs85 {
    font-size: calc(85rem * 0.1 * (0.975 - 85 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs85 {
    font-size: calc(85rem * 0.1 * (0.975 - 85 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs85 {
    font-size: clamp(1.7rem, 85rem * 0.1 * (0.975 - 85 / 10 / 12), 9999rem);
  }
}

.fs86 {
  font-size: calc(86rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs86 {
    font-size: calc(86rem * 0.1 * (0.975 - 86 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs86 {
    font-size: calc(86rem * 0.1 * (0.975 - 86 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs86 {
    font-size: clamp(1.7rem, 86rem * 0.1 * (0.975 - 86 / 10 / 12), 9999rem);
  }
}

.fs87 {
  font-size: calc(87rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs87 {
    font-size: calc(87rem * 0.1 * (0.975 - 87 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs87 {
    font-size: calc(87rem * 0.1 * (0.975 - 87 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs87 {
    font-size: clamp(1.7rem, 87rem * 0.1 * (0.975 - 87 / 10 / 12), 9999rem);
  }
}

.fs88 {
  font-size: calc(88rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs88 {
    font-size: calc(88rem * 0.1 * (0.975 - 88 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs88 {
    font-size: calc(88rem * 0.1 * (0.975 - 88 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs88 {
    font-size: clamp(1.7rem, 88rem * 0.1 * (0.975 - 88 / 10 / 12), 9999rem);
  }
}

.fs89 {
  font-size: calc(89rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs89 {
    font-size: calc(89rem * 0.1 * (0.975 - 89 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs89 {
    font-size: calc(89rem * 0.1 * (0.975 - 89 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs89 {
    font-size: clamp(1.7rem, 89rem * 0.1 * (0.975 - 89 / 10 / 12), 9999rem);
  }
}

.fs90 {
  font-size: calc(90rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs90 {
    font-size: calc(90rem * 0.1 * (0.975 - 90 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs90 {
    font-size: calc(90rem * 0.1 * (0.975 - 90 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs90 {
    font-size: clamp(1.7rem, 90rem * 0.1 * (0.975 - 90 / 10 / 12), 9999rem);
  }
}

.fs91 {
  font-size: calc(91rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs91 {
    font-size: calc(91rem * 0.1 * (0.975 - 91 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs91 {
    font-size: calc(91rem * 0.1 * (0.975 - 91 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs91 {
    font-size: clamp(1.7rem, 91rem * 0.1 * (0.975 - 91 / 10 / 12), 9999rem);
  }
}

.fs92 {
  font-size: calc(92rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs92 {
    font-size: calc(92rem * 0.1 * (0.975 - 92 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs92 {
    font-size: calc(92rem * 0.1 * (0.975 - 92 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs92 {
    font-size: clamp(1.7rem, 92rem * 0.1 * (0.975 - 92 / 10 / 12), 9999rem);
  }
}

.fs93 {
  font-size: calc(93rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs93 {
    font-size: calc(93rem * 0.1 * (0.975 - 93 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs93 {
    font-size: calc(93rem * 0.1 * (0.975 - 93 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs93 {
    font-size: clamp(1.7rem, 93rem * 0.1 * (0.975 - 93 / 10 / 12), 9999rem);
  }
}

.fs94 {
  font-size: calc(94rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs94 {
    font-size: calc(94rem * 0.1 * (0.975 - 94 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs94 {
    font-size: calc(94rem * 0.1 * (0.975 - 94 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs94 {
    font-size: clamp(1.7rem, 94rem * 0.1 * (0.975 - 94 / 10 / 12), 9999rem);
  }
}

.fs95 {
  font-size: calc(95rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs95 {
    font-size: calc(95rem * 0.1 * (0.975 - 95 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs95 {
    font-size: calc(95rem * 0.1 * (0.975 - 95 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs95 {
    font-size: clamp(1.7rem, 95rem * 0.1 * (0.975 - 95 / 10 / 12), 9999rem);
  }
}

.fs96 {
  font-size: calc(96rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs96 {
    font-size: calc(96rem * 0.1 * (0.975 - 96 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs96 {
    font-size: calc(96rem * 0.1 * (0.975 - 96 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs96 {
    font-size: clamp(1.7rem, 96rem * 0.1 * (0.975 - 96 / 10 / 12), 9999rem);
  }
}

.fs97 {
  font-size: calc(97rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs97 {
    font-size: calc(97rem * 0.1 * (0.975 - 97 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs97 {
    font-size: calc(97rem * 0.1 * (0.975 - 97 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs97 {
    font-size: clamp(1.7rem, 97rem * 0.1 * (0.975 - 97 / 10 / 12), 9999rem);
  }
}

.fs98 {
  font-size: calc(98rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs98 {
    font-size: calc(98rem * 0.1 * (0.975 - 98 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs98 {
    font-size: calc(98rem * 0.1 * (0.975 - 98 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs98 {
    font-size: clamp(1.7rem, 98rem * 0.1 * (0.975 - 98 / 10 / 12), 9999rem);
  }
}

.fs99 {
  font-size: calc(99rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs99 {
    font-size: calc(99rem * 0.1 * (0.975 - 99 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs99 {
    font-size: calc(99rem * 0.1 * (0.975 - 99 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs99 {
    font-size: clamp(1.7rem, 99rem * 0.1 * (0.975 - 99 / 10 / 12), 9999rem);
  }
}

.fs100 {
  font-size: calc(100rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .fs100 {
    font-size: calc(100rem * 0.1 * (0.975 - 100 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .fs100 {
    font-size: calc(100rem * 0.1 * (0.975 - 100 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .fs100 {
    font-size: clamp(1.7rem, 100rem * 0.1 * (0.975 - 100 / 10 / 12), 9999rem);
  }
}

/* font-weight */
.fwth {
  font-weight: 100;
}

.fwel {
  font-weight: 200;
}

.fwl {
  font-weight: 300;
}

.fwr {
  font-weight: 400;
}

.fwm {
  font-weight: 500;
}

.fwsb {
  font-weight: 600;
}

.fwb {
  font-weight: 700;
}

.fweb {
  font-weight: 800;
}

.fwbk {
  font-weight: 900;
}

/* letter-spacing */
.ls0 {
  letter-spacing: calc(1em * 0 * 10 / 1000);
}

.ls10 {
  letter-spacing: calc(1em * 1 * 10 / 1000);
}

.ls20 {
  letter-spacing: calc(1em * 2 * 10 / 1000);
}

.ls30 {
  letter-spacing: calc(1em * 3 * 10 / 1000);
}

.ls40 {
  letter-spacing: calc(1em * 4 * 10 / 1000);
}

.ls50 {
  letter-spacing: calc(1em * 5 * 10 / 1000);
}

.ls60 {
  letter-spacing: calc(1em * 6 * 10 / 1000);
}

.ls70 {
  letter-spacing: calc(1em * 7 * 10 / 1000);
}

.ls80 {
  letter-spacing: calc(1em * 8 * 10 / 1000);
}

.ls90 {
  letter-spacing: calc(1em * 9 * 10 / 1000);
}

.ls100 {
  letter-spacing: calc(1em * 10 * 10 / 1000);
}

.ls110 {
  letter-spacing: calc(1em * 11 * 10 / 1000);
}

.ls120 {
  letter-spacing: calc(1em * 12 * 10 / 1000);
}

.ls130 {
  letter-spacing: calc(1em * 13 * 10 / 1000);
}

.ls140 {
  letter-spacing: calc(1em * 14 * 10 / 1000);
}

.ls150 {
  letter-spacing: calc(1em * 15 * 10 / 1000);
}

.ls160 {
  letter-spacing: calc(1em * 16 * 10 / 1000);
}

.ls170 {
  letter-spacing: calc(1em * 17 * 10 / 1000);
}

.ls180 {
  letter-spacing: calc(1em * 18 * 10 / 1000);
}

.ls190 {
  letter-spacing: calc(1em * 19 * 10 / 1000);
}

.ls200 {
  letter-spacing: calc(1em * 20 * 10 / 1000);
}

.ls210 {
  letter-spacing: calc(1em * 21 * 10 / 1000);
}

.ls220 {
  letter-spacing: calc(1em * 22 * 10 / 1000);
}

.ls230 {
  letter-spacing: calc(1em * 23 * 10 / 1000);
}

.ls240 {
  letter-spacing: calc(1em * 24 * 10 / 1000);
}

.ls250 {
  letter-spacing: calc(1em * 25 * 10 / 1000);
}

.ls260 {
  letter-spacing: calc(1em * 26 * 10 / 1000);
}

.ls270 {
  letter-spacing: calc(1em * 27 * 10 / 1000);
}

.ls280 {
  letter-spacing: calc(1em * 28 * 10 / 1000);
}

.ls290 {
  letter-spacing: calc(1em * 29 * 10 / 1000);
}

.ls300 {
  letter-spacing: calc(1em * 30 * 10 / 1000);
}

/* line-height */
.lh100 {
  line-height: calc(1 + 0 / 20);
}

.lh105 {
  line-height: calc(1 + 1 / 20);
}

.lh110 {
  line-height: calc(1 + 2 / 20);
}

.lh115 {
  line-height: calc(1 + 3 / 20);
}

.lh120 {
  line-height: calc(1 + 4 / 20);
}

.lh125 {
  line-height: calc(1 + 5 / 20);
}

.lh130 {
  line-height: calc(1 + 6 / 20);
}

.lh135 {
  line-height: calc(1 + 7 / 20);
}

.lh140 {
  line-height: calc(1 + 8 / 20);
}

.lh145 {
  line-height: calc(1 + 9 / 20);
}

.lh150 {
  line-height: calc(1 + 10 / 20);
}

.lh155 {
  line-height: calc(1 + 11 / 20);
}

.lh160 {
  line-height: calc(1 + 12 / 20);
}

.lh165 {
  line-height: calc(1 + 13 / 20);
}

.lh170 {
  line-height: calc(1 + 14 / 20);
}

.lh175 {
  line-height: calc(1 + 15 / 20);
}

.lh180 {
  line-height: calc(1 + 16 / 20);
}

.lh185 {
  line-height: calc(1 + 17 / 20);
}

.lh190 {
  line-height: calc(1 + 18 / 20);
}

.lh195 {
  line-height: calc(1 + 19 / 20);
}

.lh200 {
  line-height: calc(1 + 20 / 20);
}

.lh205 {
  line-height: calc(1 + 21 / 20);
}

.lh210 {
  line-height: calc(1 + 22 / 20);
}

.lh215 {
  line-height: calc(1 + 23 / 20);
}

.lh220 {
  line-height: calc(1 + 24 / 20);
}

.lh225 {
  line-height: calc(1 + 25 / 20);
}

.lh230 {
  line-height: calc(1 + 26 / 20);
}

.lh235 {
  line-height: calc(1 + 27 / 20);
}

.lh240 {
  line-height: calc(1 + 28 / 20);
}

.lh245 {
  line-height: calc(1 + 29 / 20);
}

.lh250 {
  line-height: calc(1 + 30 / 20);
}

.lh255 {
  line-height: calc(1 + 31 / 20);
}

.lh260 {
  line-height: calc(1 + 32 / 20);
}

.lh265 {
  line-height: calc(1 + 33 / 20);
}

.lh270 {
  line-height: calc(1 + 34 / 20);
}

.lh275 {
  line-height: calc(1 + 35 / 20);
}

.lh280 {
  line-height: calc(1 + 36 / 20);
}

.lh285 {
  line-height: calc(1 + 37 / 20);
}

.lh290 {
  line-height: calc(1 + 38 / 20);
}

.lh295 {
  line-height: calc(1 + 39 / 20);
}

.lh300 {
  line-height: calc(1 + 40 / 20);
}

/* text-align */
.tac {
  text-align: center;
}

.tac02 {
  text-align: center;
}
@media screen and (max-width: 800px) {
  .tac02 {
    text-align: left;
  }
}

.tac03 {
  text-align: center;
}
@media screen and (max-width: 560px) {
  .tac03 {
    text-align: left;
  }
}

.tal {
  text-align: left;
}

.tar {
  text-align: right;
}

.taj01 {
  -moz-text-align-last: justify;
  text-align-last: justify;
}

.taj02 {
  text-align: justify;
  text-justify: inter-ideograph;
}

/* font-feature-settings */
.ffs_p {
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
}

.ffs_v {
  -webkit-font-feature-settings: "vpal";
          font-feature-settings: "vpal";
}

/* vertical-align */
.vamid {
  vertical-align: middle;
}

.vatop {
  vertical-align: top;
}

.vabot {
  vertical-align: bottom;
}

.vabas {
  vertical-align: baseline;
}

/* text-decoration */
.tdu {
  text-decoration: underline;
}

.tdn {
  text-decoration: none;
}

/* pointer-events */
.poeva {
  pointer-events: auto;
}

.poevn {
  pointer-events: none;
}

/* white-soace */
.wsnw {
  white-space: nowrap;
}

/* text-indent */
.ti {
  padding-left: 1em;
  text-indent: -1em;
}

/* text-transform */
.tt_capi {
  text-transform: capitalize;
}

.tt_upper {
  text-transform: uppercase;
}

.tt_lower {
  text-transform: lowercase;
}

/* overflow */
.ofh {
  overflow: hidden;
}

/* word-break */
.wbno {
  word-break: normal;
}

.wbba {
  word-break: break-all;
}

/* max-width */
.box-100 {
  width: 100%;
  max-width: 10rem;
  margin: 0 auto;
}
@media (max-width: 100px) {
  .box-100 {
    padding-left: 5%;
    padding-right: 5%;
  }
}

.box-200 {
  width: 100%;
  max-width: 20rem;
  margin: 0 auto;
}
@media (max-width: 200px) {
  .box-200 {
    padding-left: 5%;
    padding-right: 5%;
  }
}

.box-300 {
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
}
@media (max-width: 300px) {
  .box-300 {
    padding-left: 5%;
    padding-right: 5%;
  }
}

.box-400 {
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
}
@media (max-width: 400px) {
  .box-400 {
    padding-left: 5%;
    padding-right: 5%;
  }
}

.box-500 {
  width: 100%;
  max-width: 50rem;
  margin: 0 auto;
}
@media (max-width: 500px) {
  .box-500 {
    padding-left: 5%;
    padding-right: 5%;
  }
}

.box-600 {
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
}
@media (max-width: 600px) {
  .box-600 {
    padding-left: 5%;
    padding-right: 5%;
  }
}

.box-700 {
  width: 100%;
  max-width: 70rem;
  margin: 0 auto;
}
@media (max-width: 700px) {
  .box-700 {
    padding-left: 5%;
    padding-right: 5%;
  }
}

.box-800 {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
}
@media (max-width: 800px) {
  .box-800 {
    padding-left: 5%;
    padding-right: 5%;
  }
}

.box-900 {
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .box-900 {
    padding-left: 5%;
    padding-right: 5%;
  }
}

.box-1000 {
  width: 100%;
  max-width: 100rem;
  margin: 0 auto;
}
@media (max-width: 1000px) {
  .box-1000 {
    padding-left: 5%;
    padding-right: 5%;
  }
}

.box-1100 {
  width: 100%;
  max-width: 110rem;
  margin: 0 auto;
}
@media (max-width: 1100px) {
  .box-1100 {
    padding-left: 5%;
    padding-right: 5%;
  }
}

.box-1200 {
  width: 100%;
  max-width: 120rem;
  margin: 0 auto;
}
@media (max-width: 1200px) {
  .box-1200 {
    padding-left: 5%;
    padding-right: 5%;
  }
}

.box-1300 {
  width: 100%;
  max-width: 130rem;
  margin: 0 auto;
}
@media (max-width: 1300px) {
  .box-1300 {
    padding-left: 5%;
    padding-right: 5%;
  }
}

.box-1400 {
  width: 100%;
  max-width: 140rem;
  margin: 0 auto;
}
@media (max-width: 1400px) {
  .box-1400 {
    padding-left: 5%;
    padding-right: 5%;
  }
}

/* 余白 */
.ma {
  margin-left: auto;
  margin-right: auto;
}

.pt5 {
  padding-top: calc(5 * 0.1rem);
}

.pr5 {
  padding-right: calc(5 * 0.1rem);
}

.pb5 {
  padding-bottom: calc(5 * 0.1rem);
}

.pl5 {
  padding-left: calc(5 * 0.1rem);
}

.mt5 {
  margin-top: calc(5 * 0.1rem);
}

.mr5 {
  margin-right: calc(5 * 0.1rem);
}

.mb5 {
  margin-bottom: calc(5 * 0.1rem);
}

.ml5 {
  margin-left: calc(5 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt5:where(:not(.keep)) {
    padding-top: calc(4 * 0.1rem);
  }
  .pr5:where(:not(.keep)) {
    padding-right: calc(4 * 0.1rem);
  }
  .pb5:where(:not(.keep)) {
    padding-bottom: calc(4 * 0.1rem);
  }
  .pl5:where(:not(.keep)) {
    padding-left: calc(4 * 0.1rem);
  }
  .mt5:where(:not(.keep)) {
    margin-top: calc(4 * 0.1rem);
  }
  .mr5:where(:not(.keep)) {
    margin-right: calc(4 * 0.1rem);
  }
  .mb5:where(:not(.keep)) {
    margin-bottom: calc(4 * 0.1rem);
  }
  .ml5:where(:not(.keep)) {
    margin-left: calc(4 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt5:where(:not(.keep)) {
    padding-top: calc(3 * 0.1rem);
  }
  .pr5:where(:not(.keep)) {
    padding-right: calc(3 * 0.1rem);
  }
  .pb5:where(:not(.keep)) {
    padding-bottom: calc(3 * 0.1rem);
  }
  .pl5:where(:not(.keep)) {
    padding-left: calc(3 * 0.1rem);
  }
  .mt5:where(:not(.keep)) {
    margin-top: calc(3 * 0.1rem);
  }
  .mr5:where(:not(.keep)) {
    margin-right: calc(3 * 0.1rem);
  }
  .mb5:where(:not(.keep)) {
    margin-bottom: calc(3 * 0.1rem);
  }
  .ml5:where(:not(.keep)) {
    margin-left: calc(3 * 0.1rem);
  }
}
.pt10 {
  padding-top: calc(10 * 0.1rem);
}

.pr10 {
  padding-right: calc(10 * 0.1rem);
}

.pb10 {
  padding-bottom: calc(10 * 0.1rem);
}

.pl10 {
  padding-left: calc(10 * 0.1rem);
}

.mt10 {
  margin-top: calc(10 * 0.1rem);
}

.mr10 {
  margin-right: calc(10 * 0.1rem);
}

.mb10 {
  margin-bottom: calc(10 * 0.1rem);
}

.ml10 {
  margin-left: calc(10 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt10:where(:not(.keep)) {
    padding-top: calc(8 * 0.1rem);
  }
  .pr10:where(:not(.keep)) {
    padding-right: calc(8 * 0.1rem);
  }
  .pb10:where(:not(.keep)) {
    padding-bottom: calc(8 * 0.1rem);
  }
  .pl10:where(:not(.keep)) {
    padding-left: calc(8 * 0.1rem);
  }
  .mt10:where(:not(.keep)) {
    margin-top: calc(8 * 0.1rem);
  }
  .mr10:where(:not(.keep)) {
    margin-right: calc(8 * 0.1rem);
  }
  .mb10:where(:not(.keep)) {
    margin-bottom: calc(8 * 0.1rem);
  }
  .ml10:where(:not(.keep)) {
    margin-left: calc(8 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt10:where(:not(.keep)) {
    padding-top: calc(6 * 0.1rem);
  }
  .pr10:where(:not(.keep)) {
    padding-right: calc(6 * 0.1rem);
  }
  .pb10:where(:not(.keep)) {
    padding-bottom: calc(6 * 0.1rem);
  }
  .pl10:where(:not(.keep)) {
    padding-left: calc(6 * 0.1rem);
  }
  .mt10:where(:not(.keep)) {
    margin-top: calc(6 * 0.1rem);
  }
  .mr10:where(:not(.keep)) {
    margin-right: calc(6 * 0.1rem);
  }
  .mb10:where(:not(.keep)) {
    margin-bottom: calc(6 * 0.1rem);
  }
  .ml10:where(:not(.keep)) {
    margin-left: calc(6 * 0.1rem);
  }
}
.pt15 {
  padding-top: calc(15 * 0.1rem);
}

.pr15 {
  padding-right: calc(15 * 0.1rem);
}

.pb15 {
  padding-bottom: calc(15 * 0.1rem);
}

.pl15 {
  padding-left: calc(15 * 0.1rem);
}

.mt15 {
  margin-top: calc(15 * 0.1rem);
}

.mr15 {
  margin-right: calc(15 * 0.1rem);
}

.mb15 {
  margin-bottom: calc(15 * 0.1rem);
}

.ml15 {
  margin-left: calc(15 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt15:where(:not(.keep)) {
    padding-top: calc(12 * 0.1rem);
  }
  .pr15:where(:not(.keep)) {
    padding-right: calc(12 * 0.1rem);
  }
  .pb15:where(:not(.keep)) {
    padding-bottom: calc(12 * 0.1rem);
  }
  .pl15:where(:not(.keep)) {
    padding-left: calc(12 * 0.1rem);
  }
  .mt15:where(:not(.keep)) {
    margin-top: calc(12 * 0.1rem);
  }
  .mr15:where(:not(.keep)) {
    margin-right: calc(12 * 0.1rem);
  }
  .mb15:where(:not(.keep)) {
    margin-bottom: calc(12 * 0.1rem);
  }
  .ml15:where(:not(.keep)) {
    margin-left: calc(12 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt15:where(:not(.keep)) {
    padding-top: calc(9 * 0.1rem);
  }
  .pr15:where(:not(.keep)) {
    padding-right: calc(9 * 0.1rem);
  }
  .pb15:where(:not(.keep)) {
    padding-bottom: calc(9 * 0.1rem);
  }
  .pl15:where(:not(.keep)) {
    padding-left: calc(9 * 0.1rem);
  }
  .mt15:where(:not(.keep)) {
    margin-top: calc(9 * 0.1rem);
  }
  .mr15:where(:not(.keep)) {
    margin-right: calc(9 * 0.1rem);
  }
  .mb15:where(:not(.keep)) {
    margin-bottom: calc(9 * 0.1rem);
  }
  .ml15:where(:not(.keep)) {
    margin-left: calc(9 * 0.1rem);
  }
}
.pt20 {
  padding-top: calc(20 * 0.1rem);
}

.pr20 {
  padding-right: calc(20 * 0.1rem);
}

.pb20 {
  padding-bottom: calc(20 * 0.1rem);
}

.pl20 {
  padding-left: calc(20 * 0.1rem);
}

.mt20 {
  margin-top: calc(20 * 0.1rem);
}

.mr20 {
  margin-right: calc(20 * 0.1rem);
}

.mb20 {
  margin-bottom: calc(20 * 0.1rem);
}

.ml20 {
  margin-left: calc(20 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt20:where(:not(.keep)) {
    padding-top: calc(16 * 0.1rem);
  }
  .pr20:where(:not(.keep)) {
    padding-right: calc(16 * 0.1rem);
  }
  .pb20:where(:not(.keep)) {
    padding-bottom: calc(16 * 0.1rem);
  }
  .pl20:where(:not(.keep)) {
    padding-left: calc(16 * 0.1rem);
  }
  .mt20:where(:not(.keep)) {
    margin-top: calc(16 * 0.1rem);
  }
  .mr20:where(:not(.keep)) {
    margin-right: calc(16 * 0.1rem);
  }
  .mb20:where(:not(.keep)) {
    margin-bottom: calc(16 * 0.1rem);
  }
  .ml20:where(:not(.keep)) {
    margin-left: calc(16 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt20:where(:not(.keep)) {
    padding-top: calc(12 * 0.1rem);
  }
  .pr20:where(:not(.keep)) {
    padding-right: calc(12 * 0.1rem);
  }
  .pb20:where(:not(.keep)) {
    padding-bottom: calc(12 * 0.1rem);
  }
  .pl20:where(:not(.keep)) {
    padding-left: calc(12 * 0.1rem);
  }
  .mt20:where(:not(.keep)) {
    margin-top: calc(12 * 0.1rem);
  }
  .mr20:where(:not(.keep)) {
    margin-right: calc(12 * 0.1rem);
  }
  .mb20:where(:not(.keep)) {
    margin-bottom: calc(12 * 0.1rem);
  }
  .ml20:where(:not(.keep)) {
    margin-left: calc(12 * 0.1rem);
  }
}
.pt25 {
  padding-top: calc(25 * 0.1rem);
}

.pr25 {
  padding-right: calc(25 * 0.1rem);
}

.pb25 {
  padding-bottom: calc(25 * 0.1rem);
}

.pl25 {
  padding-left: calc(25 * 0.1rem);
}

.mt25 {
  margin-top: calc(25 * 0.1rem);
}

.mr25 {
  margin-right: calc(25 * 0.1rem);
}

.mb25 {
  margin-bottom: calc(25 * 0.1rem);
}

.ml25 {
  margin-left: calc(25 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt25:where(:not(.keep)) {
    padding-top: calc(20 * 0.1rem);
  }
  .pr25:where(:not(.keep)) {
    padding-right: calc(20 * 0.1rem);
  }
  .pb25:where(:not(.keep)) {
    padding-bottom: calc(20 * 0.1rem);
  }
  .pl25:where(:not(.keep)) {
    padding-left: calc(20 * 0.1rem);
  }
  .mt25:where(:not(.keep)) {
    margin-top: calc(20 * 0.1rem);
  }
  .mr25:where(:not(.keep)) {
    margin-right: calc(20 * 0.1rem);
  }
  .mb25:where(:not(.keep)) {
    margin-bottom: calc(20 * 0.1rem);
  }
  .ml25:where(:not(.keep)) {
    margin-left: calc(20 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt25:where(:not(.keep)) {
    padding-top: calc(15 * 0.1rem);
  }
  .pr25:where(:not(.keep)) {
    padding-right: calc(15 * 0.1rem);
  }
  .pb25:where(:not(.keep)) {
    padding-bottom: calc(15 * 0.1rem);
  }
  .pl25:where(:not(.keep)) {
    padding-left: calc(15 * 0.1rem);
  }
  .mt25:where(:not(.keep)) {
    margin-top: calc(15 * 0.1rem);
  }
  .mr25:where(:not(.keep)) {
    margin-right: calc(15 * 0.1rem);
  }
  .mb25:where(:not(.keep)) {
    margin-bottom: calc(15 * 0.1rem);
  }
  .ml25:where(:not(.keep)) {
    margin-left: calc(15 * 0.1rem);
  }
}
.pt30 {
  padding-top: calc(30 * 0.1rem);
}

.pr30 {
  padding-right: calc(30 * 0.1rem);
}

.pb30 {
  padding-bottom: calc(30 * 0.1rem);
}

.pl30 {
  padding-left: calc(30 * 0.1rem);
}

.mt30 {
  margin-top: calc(30 * 0.1rem);
}

.mr30 {
  margin-right: calc(30 * 0.1rem);
}

.mb30 {
  margin-bottom: calc(30 * 0.1rem);
}

.ml30 {
  margin-left: calc(30 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt30:where(:not(.keep)) {
    padding-top: calc(24 * 0.1rem);
  }
  .pr30:where(:not(.keep)) {
    padding-right: calc(24 * 0.1rem);
  }
  .pb30:where(:not(.keep)) {
    padding-bottom: calc(24 * 0.1rem);
  }
  .pl30:where(:not(.keep)) {
    padding-left: calc(24 * 0.1rem);
  }
  .mt30:where(:not(.keep)) {
    margin-top: calc(24 * 0.1rem);
  }
  .mr30:where(:not(.keep)) {
    margin-right: calc(24 * 0.1rem);
  }
  .mb30:where(:not(.keep)) {
    margin-bottom: calc(24 * 0.1rem);
  }
  .ml30:where(:not(.keep)) {
    margin-left: calc(24 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt30:where(:not(.keep)) {
    padding-top: calc(18 * 0.1rem);
  }
  .pr30:where(:not(.keep)) {
    padding-right: calc(18 * 0.1rem);
  }
  .pb30:where(:not(.keep)) {
    padding-bottom: calc(18 * 0.1rem);
  }
  .pl30:where(:not(.keep)) {
    padding-left: calc(18 * 0.1rem);
  }
  .mt30:where(:not(.keep)) {
    margin-top: calc(18 * 0.1rem);
  }
  .mr30:where(:not(.keep)) {
    margin-right: calc(18 * 0.1rem);
  }
  .mb30:where(:not(.keep)) {
    margin-bottom: calc(18 * 0.1rem);
  }
  .ml30:where(:not(.keep)) {
    margin-left: calc(18 * 0.1rem);
  }
}
.pt35 {
  padding-top: calc(35 * 0.1rem);
}

.pr35 {
  padding-right: calc(35 * 0.1rem);
}

.pb35 {
  padding-bottom: calc(35 * 0.1rem);
}

.pl35 {
  padding-left: calc(35 * 0.1rem);
}

.mt35 {
  margin-top: calc(35 * 0.1rem);
}

.mr35 {
  margin-right: calc(35 * 0.1rem);
}

.mb35 {
  margin-bottom: calc(35 * 0.1rem);
}

.ml35 {
  margin-left: calc(35 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt35:where(:not(.keep)) {
    padding-top: calc(28 * 0.1rem);
  }
  .pr35:where(:not(.keep)) {
    padding-right: calc(28 * 0.1rem);
  }
  .pb35:where(:not(.keep)) {
    padding-bottom: calc(28 * 0.1rem);
  }
  .pl35:where(:not(.keep)) {
    padding-left: calc(28 * 0.1rem);
  }
  .mt35:where(:not(.keep)) {
    margin-top: calc(28 * 0.1rem);
  }
  .mr35:where(:not(.keep)) {
    margin-right: calc(28 * 0.1rem);
  }
  .mb35:where(:not(.keep)) {
    margin-bottom: calc(28 * 0.1rem);
  }
  .ml35:where(:not(.keep)) {
    margin-left: calc(28 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt35:where(:not(.keep)) {
    padding-top: calc(21 * 0.1rem);
  }
  .pr35:where(:not(.keep)) {
    padding-right: calc(21 * 0.1rem);
  }
  .pb35:where(:not(.keep)) {
    padding-bottom: calc(21 * 0.1rem);
  }
  .pl35:where(:not(.keep)) {
    padding-left: calc(21 * 0.1rem);
  }
  .mt35:where(:not(.keep)) {
    margin-top: calc(21 * 0.1rem);
  }
  .mr35:where(:not(.keep)) {
    margin-right: calc(21 * 0.1rem);
  }
  .mb35:where(:not(.keep)) {
    margin-bottom: calc(21 * 0.1rem);
  }
  .ml35:where(:not(.keep)) {
    margin-left: calc(21 * 0.1rem);
  }
}
.pt40 {
  padding-top: calc(40 * 0.1rem);
}

.pr40 {
  padding-right: calc(40 * 0.1rem);
}

.pb40 {
  padding-bottom: calc(40 * 0.1rem);
}

.pl40 {
  padding-left: calc(40 * 0.1rem);
}

.mt40 {
  margin-top: calc(40 * 0.1rem);
}

.mr40 {
  margin-right: calc(40 * 0.1rem);
}

.mb40 {
  margin-bottom: calc(40 * 0.1rem);
}

.ml40 {
  margin-left: calc(40 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt40:where(:not(.keep)) {
    padding-top: calc(32 * 0.1rem);
  }
  .pr40:where(:not(.keep)) {
    padding-right: calc(32 * 0.1rem);
  }
  .pb40:where(:not(.keep)) {
    padding-bottom: calc(32 * 0.1rem);
  }
  .pl40:where(:not(.keep)) {
    padding-left: calc(32 * 0.1rem);
  }
  .mt40:where(:not(.keep)) {
    margin-top: calc(32 * 0.1rem);
  }
  .mr40:where(:not(.keep)) {
    margin-right: calc(32 * 0.1rem);
  }
  .mb40:where(:not(.keep)) {
    margin-bottom: calc(32 * 0.1rem);
  }
  .ml40:where(:not(.keep)) {
    margin-left: calc(32 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt40:where(:not(.keep)) {
    padding-top: calc(24 * 0.1rem);
  }
  .pr40:where(:not(.keep)) {
    padding-right: calc(24 * 0.1rem);
  }
  .pb40:where(:not(.keep)) {
    padding-bottom: calc(24 * 0.1rem);
  }
  .pl40:where(:not(.keep)) {
    padding-left: calc(24 * 0.1rem);
  }
  .mt40:where(:not(.keep)) {
    margin-top: calc(24 * 0.1rem);
  }
  .mr40:where(:not(.keep)) {
    margin-right: calc(24 * 0.1rem);
  }
  .mb40:where(:not(.keep)) {
    margin-bottom: calc(24 * 0.1rem);
  }
  .ml40:where(:not(.keep)) {
    margin-left: calc(24 * 0.1rem);
  }
}
.pt45 {
  padding-top: calc(45 * 0.1rem);
}

.pr45 {
  padding-right: calc(45 * 0.1rem);
}

.pb45 {
  padding-bottom: calc(45 * 0.1rem);
}

.pl45 {
  padding-left: calc(45 * 0.1rem);
}

.mt45 {
  margin-top: calc(45 * 0.1rem);
}

.mr45 {
  margin-right: calc(45 * 0.1rem);
}

.mb45 {
  margin-bottom: calc(45 * 0.1rem);
}

.ml45 {
  margin-left: calc(45 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt45:where(:not(.keep)) {
    padding-top: calc(36 * 0.1rem);
  }
  .pr45:where(:not(.keep)) {
    padding-right: calc(36 * 0.1rem);
  }
  .pb45:where(:not(.keep)) {
    padding-bottom: calc(36 * 0.1rem);
  }
  .pl45:where(:not(.keep)) {
    padding-left: calc(36 * 0.1rem);
  }
  .mt45:where(:not(.keep)) {
    margin-top: calc(36 * 0.1rem);
  }
  .mr45:where(:not(.keep)) {
    margin-right: calc(36 * 0.1rem);
  }
  .mb45:where(:not(.keep)) {
    margin-bottom: calc(36 * 0.1rem);
  }
  .ml45:where(:not(.keep)) {
    margin-left: calc(36 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt45:where(:not(.keep)) {
    padding-top: calc(27 * 0.1rem);
  }
  .pr45:where(:not(.keep)) {
    padding-right: calc(27 * 0.1rem);
  }
  .pb45:where(:not(.keep)) {
    padding-bottom: calc(27 * 0.1rem);
  }
  .pl45:where(:not(.keep)) {
    padding-left: calc(27 * 0.1rem);
  }
  .mt45:where(:not(.keep)) {
    margin-top: calc(27 * 0.1rem);
  }
  .mr45:where(:not(.keep)) {
    margin-right: calc(27 * 0.1rem);
  }
  .mb45:where(:not(.keep)) {
    margin-bottom: calc(27 * 0.1rem);
  }
  .ml45:where(:not(.keep)) {
    margin-left: calc(27 * 0.1rem);
  }
}
.pt50 {
  padding-top: calc(50 * 0.1rem);
}

.pr50 {
  padding-right: calc(50 * 0.1rem);
}

.pb50 {
  padding-bottom: calc(50 * 0.1rem);
}

.pl50 {
  padding-left: calc(50 * 0.1rem);
}

.mt50 {
  margin-top: calc(50 * 0.1rem);
}

.mr50 {
  margin-right: calc(50 * 0.1rem);
}

.mb50 {
  margin-bottom: calc(50 * 0.1rem);
}

.ml50 {
  margin-left: calc(50 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt50:where(:not(.keep)) {
    padding-top: calc(40 * 0.1rem);
  }
  .pr50:where(:not(.keep)) {
    padding-right: calc(40 * 0.1rem);
  }
  .pb50:where(:not(.keep)) {
    padding-bottom: calc(40 * 0.1rem);
  }
  .pl50:where(:not(.keep)) {
    padding-left: calc(40 * 0.1rem);
  }
  .mt50:where(:not(.keep)) {
    margin-top: calc(40 * 0.1rem);
  }
  .mr50:where(:not(.keep)) {
    margin-right: calc(40 * 0.1rem);
  }
  .mb50:where(:not(.keep)) {
    margin-bottom: calc(40 * 0.1rem);
  }
  .ml50:where(:not(.keep)) {
    margin-left: calc(40 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt50:where(:not(.keep)) {
    padding-top: calc(30 * 0.1rem);
  }
  .pr50:where(:not(.keep)) {
    padding-right: calc(30 * 0.1rem);
  }
  .pb50:where(:not(.keep)) {
    padding-bottom: calc(30 * 0.1rem);
  }
  .pl50:where(:not(.keep)) {
    padding-left: calc(30 * 0.1rem);
  }
  .mt50:where(:not(.keep)) {
    margin-top: calc(30 * 0.1rem);
  }
  .mr50:where(:not(.keep)) {
    margin-right: calc(30 * 0.1rem);
  }
  .mb50:where(:not(.keep)) {
    margin-bottom: calc(30 * 0.1rem);
  }
  .ml50:where(:not(.keep)) {
    margin-left: calc(30 * 0.1rem);
  }
}
.pt55 {
  padding-top: calc(55 * 0.1rem);
}

.pr55 {
  padding-right: calc(55 * 0.1rem);
}

.pb55 {
  padding-bottom: calc(55 * 0.1rem);
}

.pl55 {
  padding-left: calc(55 * 0.1rem);
}

.mt55 {
  margin-top: calc(55 * 0.1rem);
}

.mr55 {
  margin-right: calc(55 * 0.1rem);
}

.mb55 {
  margin-bottom: calc(55 * 0.1rem);
}

.ml55 {
  margin-left: calc(55 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt55:where(:not(.keep)) {
    padding-top: calc(44 * 0.1rem);
  }
  .pr55:where(:not(.keep)) {
    padding-right: calc(44 * 0.1rem);
  }
  .pb55:where(:not(.keep)) {
    padding-bottom: calc(44 * 0.1rem);
  }
  .pl55:where(:not(.keep)) {
    padding-left: calc(44 * 0.1rem);
  }
  .mt55:where(:not(.keep)) {
    margin-top: calc(44 * 0.1rem);
  }
  .mr55:where(:not(.keep)) {
    margin-right: calc(44 * 0.1rem);
  }
  .mb55:where(:not(.keep)) {
    margin-bottom: calc(44 * 0.1rem);
  }
  .ml55:where(:not(.keep)) {
    margin-left: calc(44 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt55:where(:not(.keep)) {
    padding-top: calc(33 * 0.1rem);
  }
  .pr55:where(:not(.keep)) {
    padding-right: calc(33 * 0.1rem);
  }
  .pb55:where(:not(.keep)) {
    padding-bottom: calc(33 * 0.1rem);
  }
  .pl55:where(:not(.keep)) {
    padding-left: calc(33 * 0.1rem);
  }
  .mt55:where(:not(.keep)) {
    margin-top: calc(33 * 0.1rem);
  }
  .mr55:where(:not(.keep)) {
    margin-right: calc(33 * 0.1rem);
  }
  .mb55:where(:not(.keep)) {
    margin-bottom: calc(33 * 0.1rem);
  }
  .ml55:where(:not(.keep)) {
    margin-left: calc(33 * 0.1rem);
  }
}
.pt60 {
  padding-top: calc(60 * 0.1rem);
}

.pr60 {
  padding-right: calc(60 * 0.1rem);
}

.pb60 {
  padding-bottom: calc(60 * 0.1rem);
}

.pl60 {
  padding-left: calc(60 * 0.1rem);
}

.mt60 {
  margin-top: calc(60 * 0.1rem);
}

.mr60 {
  margin-right: calc(60 * 0.1rem);
}

.mb60 {
  margin-bottom: calc(60 * 0.1rem);
}

.ml60 {
  margin-left: calc(60 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt60:where(:not(.keep)) {
    padding-top: calc(48 * 0.1rem);
  }
  .pr60:where(:not(.keep)) {
    padding-right: calc(48 * 0.1rem);
  }
  .pb60:where(:not(.keep)) {
    padding-bottom: calc(48 * 0.1rem);
  }
  .pl60:where(:not(.keep)) {
    padding-left: calc(48 * 0.1rem);
  }
  .mt60:where(:not(.keep)) {
    margin-top: calc(48 * 0.1rem);
  }
  .mr60:where(:not(.keep)) {
    margin-right: calc(48 * 0.1rem);
  }
  .mb60:where(:not(.keep)) {
    margin-bottom: calc(48 * 0.1rem);
  }
  .ml60:where(:not(.keep)) {
    margin-left: calc(48 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt60:where(:not(.keep)) {
    padding-top: calc(36 * 0.1rem);
  }
  .pr60:where(:not(.keep)) {
    padding-right: calc(36 * 0.1rem);
  }
  .pb60:where(:not(.keep)) {
    padding-bottom: calc(36 * 0.1rem);
  }
  .pl60:where(:not(.keep)) {
    padding-left: calc(36 * 0.1rem);
  }
  .mt60:where(:not(.keep)) {
    margin-top: calc(36 * 0.1rem);
  }
  .mr60:where(:not(.keep)) {
    margin-right: calc(36 * 0.1rem);
  }
  .mb60:where(:not(.keep)) {
    margin-bottom: calc(36 * 0.1rem);
  }
  .ml60:where(:not(.keep)) {
    margin-left: calc(36 * 0.1rem);
  }
}
.pt65 {
  padding-top: calc(65 * 0.1rem);
}

.pr65 {
  padding-right: calc(65 * 0.1rem);
}

.pb65 {
  padding-bottom: calc(65 * 0.1rem);
}

.pl65 {
  padding-left: calc(65 * 0.1rem);
}

.mt65 {
  margin-top: calc(65 * 0.1rem);
}

.mr65 {
  margin-right: calc(65 * 0.1rem);
}

.mb65 {
  margin-bottom: calc(65 * 0.1rem);
}

.ml65 {
  margin-left: calc(65 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt65:where(:not(.keep)) {
    padding-top: calc(52 * 0.1rem);
  }
  .pr65:where(:not(.keep)) {
    padding-right: calc(52 * 0.1rem);
  }
  .pb65:where(:not(.keep)) {
    padding-bottom: calc(52 * 0.1rem);
  }
  .pl65:where(:not(.keep)) {
    padding-left: calc(52 * 0.1rem);
  }
  .mt65:where(:not(.keep)) {
    margin-top: calc(52 * 0.1rem);
  }
  .mr65:where(:not(.keep)) {
    margin-right: calc(52 * 0.1rem);
  }
  .mb65:where(:not(.keep)) {
    margin-bottom: calc(52 * 0.1rem);
  }
  .ml65:where(:not(.keep)) {
    margin-left: calc(52 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt65:where(:not(.keep)) {
    padding-top: calc(39 * 0.1rem);
  }
  .pr65:where(:not(.keep)) {
    padding-right: calc(39 * 0.1rem);
  }
  .pb65:where(:not(.keep)) {
    padding-bottom: calc(39 * 0.1rem);
  }
  .pl65:where(:not(.keep)) {
    padding-left: calc(39 * 0.1rem);
  }
  .mt65:where(:not(.keep)) {
    margin-top: calc(39 * 0.1rem);
  }
  .mr65:where(:not(.keep)) {
    margin-right: calc(39 * 0.1rem);
  }
  .mb65:where(:not(.keep)) {
    margin-bottom: calc(39 * 0.1rem);
  }
  .ml65:where(:not(.keep)) {
    margin-left: calc(39 * 0.1rem);
  }
}
.pt70 {
  padding-top: calc(70 * 0.1rem);
}

.pr70 {
  padding-right: calc(70 * 0.1rem);
}

.pb70 {
  padding-bottom: calc(70 * 0.1rem);
}

.pl70 {
  padding-left: calc(70 * 0.1rem);
}

.mt70 {
  margin-top: calc(70 * 0.1rem);
}

.mr70 {
  margin-right: calc(70 * 0.1rem);
}

.mb70 {
  margin-bottom: calc(70 * 0.1rem);
}

.ml70 {
  margin-left: calc(70 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt70:where(:not(.keep)) {
    padding-top: calc(56 * 0.1rem);
  }
  .pr70:where(:not(.keep)) {
    padding-right: calc(56 * 0.1rem);
  }
  .pb70:where(:not(.keep)) {
    padding-bottom: calc(56 * 0.1rem);
  }
  .pl70:where(:not(.keep)) {
    padding-left: calc(56 * 0.1rem);
  }
  .mt70:where(:not(.keep)) {
    margin-top: calc(56 * 0.1rem);
  }
  .mr70:where(:not(.keep)) {
    margin-right: calc(56 * 0.1rem);
  }
  .mb70:where(:not(.keep)) {
    margin-bottom: calc(56 * 0.1rem);
  }
  .ml70:where(:not(.keep)) {
    margin-left: calc(56 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt70:where(:not(.keep)) {
    padding-top: calc(42 * 0.1rem);
  }
  .pr70:where(:not(.keep)) {
    padding-right: calc(42 * 0.1rem);
  }
  .pb70:where(:not(.keep)) {
    padding-bottom: calc(42 * 0.1rem);
  }
  .pl70:where(:not(.keep)) {
    padding-left: calc(42 * 0.1rem);
  }
  .mt70:where(:not(.keep)) {
    margin-top: calc(42 * 0.1rem);
  }
  .mr70:where(:not(.keep)) {
    margin-right: calc(42 * 0.1rem);
  }
  .mb70:where(:not(.keep)) {
    margin-bottom: calc(42 * 0.1rem);
  }
  .ml70:where(:not(.keep)) {
    margin-left: calc(42 * 0.1rem);
  }
}
.pt75 {
  padding-top: calc(75 * 0.1rem);
}

.pr75 {
  padding-right: calc(75 * 0.1rem);
}

.pb75 {
  padding-bottom: calc(75 * 0.1rem);
}

.pl75 {
  padding-left: calc(75 * 0.1rem);
}

.mt75 {
  margin-top: calc(75 * 0.1rem);
}

.mr75 {
  margin-right: calc(75 * 0.1rem);
}

.mb75 {
  margin-bottom: calc(75 * 0.1rem);
}

.ml75 {
  margin-left: calc(75 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt75:where(:not(.keep)) {
    padding-top: calc(60 * 0.1rem);
  }
  .pr75:where(:not(.keep)) {
    padding-right: calc(60 * 0.1rem);
  }
  .pb75:where(:not(.keep)) {
    padding-bottom: calc(60 * 0.1rem);
  }
  .pl75:where(:not(.keep)) {
    padding-left: calc(60 * 0.1rem);
  }
  .mt75:where(:not(.keep)) {
    margin-top: calc(60 * 0.1rem);
  }
  .mr75:where(:not(.keep)) {
    margin-right: calc(60 * 0.1rem);
  }
  .mb75:where(:not(.keep)) {
    margin-bottom: calc(60 * 0.1rem);
  }
  .ml75:where(:not(.keep)) {
    margin-left: calc(60 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt75:where(:not(.keep)) {
    padding-top: calc(45 * 0.1rem);
  }
  .pr75:where(:not(.keep)) {
    padding-right: calc(45 * 0.1rem);
  }
  .pb75:where(:not(.keep)) {
    padding-bottom: calc(45 * 0.1rem);
  }
  .pl75:where(:not(.keep)) {
    padding-left: calc(45 * 0.1rem);
  }
  .mt75:where(:not(.keep)) {
    margin-top: calc(45 * 0.1rem);
  }
  .mr75:where(:not(.keep)) {
    margin-right: calc(45 * 0.1rem);
  }
  .mb75:where(:not(.keep)) {
    margin-bottom: calc(45 * 0.1rem);
  }
  .ml75:where(:not(.keep)) {
    margin-left: calc(45 * 0.1rem);
  }
}
.pt80 {
  padding-top: calc(80 * 0.1rem);
}

.pr80 {
  padding-right: calc(80 * 0.1rem);
}

.pb80 {
  padding-bottom: calc(80 * 0.1rem);
}

.pl80 {
  padding-left: calc(80 * 0.1rem);
}

.mt80 {
  margin-top: calc(80 * 0.1rem);
}

.mr80 {
  margin-right: calc(80 * 0.1rem);
}

.mb80 {
  margin-bottom: calc(80 * 0.1rem);
}

.ml80 {
  margin-left: calc(80 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt80:where(:not(.keep)) {
    padding-top: calc(64 * 0.1rem);
  }
  .pr80:where(:not(.keep)) {
    padding-right: calc(64 * 0.1rem);
  }
  .pb80:where(:not(.keep)) {
    padding-bottom: calc(64 * 0.1rem);
  }
  .pl80:where(:not(.keep)) {
    padding-left: calc(64 * 0.1rem);
  }
  .mt80:where(:not(.keep)) {
    margin-top: calc(64 * 0.1rem);
  }
  .mr80:where(:not(.keep)) {
    margin-right: calc(64 * 0.1rem);
  }
  .mb80:where(:not(.keep)) {
    margin-bottom: calc(64 * 0.1rem);
  }
  .ml80:where(:not(.keep)) {
    margin-left: calc(64 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt80:where(:not(.keep)) {
    padding-top: calc(48 * 0.1rem);
  }
  .pr80:where(:not(.keep)) {
    padding-right: calc(48 * 0.1rem);
  }
  .pb80:where(:not(.keep)) {
    padding-bottom: calc(48 * 0.1rem);
  }
  .pl80:where(:not(.keep)) {
    padding-left: calc(48 * 0.1rem);
  }
  .mt80:where(:not(.keep)) {
    margin-top: calc(48 * 0.1rem);
  }
  .mr80:where(:not(.keep)) {
    margin-right: calc(48 * 0.1rem);
  }
  .mb80:where(:not(.keep)) {
    margin-bottom: calc(48 * 0.1rem);
  }
  .ml80:where(:not(.keep)) {
    margin-left: calc(48 * 0.1rem);
  }
}
.pt85 {
  padding-top: calc(85 * 0.1rem);
}

.pr85 {
  padding-right: calc(85 * 0.1rem);
}

.pb85 {
  padding-bottom: calc(85 * 0.1rem);
}

.pl85 {
  padding-left: calc(85 * 0.1rem);
}

.mt85 {
  margin-top: calc(85 * 0.1rem);
}

.mr85 {
  margin-right: calc(85 * 0.1rem);
}

.mb85 {
  margin-bottom: calc(85 * 0.1rem);
}

.ml85 {
  margin-left: calc(85 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt85:where(:not(.keep)) {
    padding-top: calc(68 * 0.1rem);
  }
  .pr85:where(:not(.keep)) {
    padding-right: calc(68 * 0.1rem);
  }
  .pb85:where(:not(.keep)) {
    padding-bottom: calc(68 * 0.1rem);
  }
  .pl85:where(:not(.keep)) {
    padding-left: calc(68 * 0.1rem);
  }
  .mt85:where(:not(.keep)) {
    margin-top: calc(68 * 0.1rem);
  }
  .mr85:where(:not(.keep)) {
    margin-right: calc(68 * 0.1rem);
  }
  .mb85:where(:not(.keep)) {
    margin-bottom: calc(68 * 0.1rem);
  }
  .ml85:where(:not(.keep)) {
    margin-left: calc(68 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt85:where(:not(.keep)) {
    padding-top: calc(51 * 0.1rem);
  }
  .pr85:where(:not(.keep)) {
    padding-right: calc(51 * 0.1rem);
  }
  .pb85:where(:not(.keep)) {
    padding-bottom: calc(51 * 0.1rem);
  }
  .pl85:where(:not(.keep)) {
    padding-left: calc(51 * 0.1rem);
  }
  .mt85:where(:not(.keep)) {
    margin-top: calc(51 * 0.1rem);
  }
  .mr85:where(:not(.keep)) {
    margin-right: calc(51 * 0.1rem);
  }
  .mb85:where(:not(.keep)) {
    margin-bottom: calc(51 * 0.1rem);
  }
  .ml85:where(:not(.keep)) {
    margin-left: calc(51 * 0.1rem);
  }
}
.pt90 {
  padding-top: calc(90 * 0.1rem);
}

.pr90 {
  padding-right: calc(90 * 0.1rem);
}

.pb90 {
  padding-bottom: calc(90 * 0.1rem);
}

.pl90 {
  padding-left: calc(90 * 0.1rem);
}

.mt90 {
  margin-top: calc(90 * 0.1rem);
}

.mr90 {
  margin-right: calc(90 * 0.1rem);
}

.mb90 {
  margin-bottom: calc(90 * 0.1rem);
}

.ml90 {
  margin-left: calc(90 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt90:where(:not(.keep)) {
    padding-top: calc(72 * 0.1rem);
  }
  .pr90:where(:not(.keep)) {
    padding-right: calc(72 * 0.1rem);
  }
  .pb90:where(:not(.keep)) {
    padding-bottom: calc(72 * 0.1rem);
  }
  .pl90:where(:not(.keep)) {
    padding-left: calc(72 * 0.1rem);
  }
  .mt90:where(:not(.keep)) {
    margin-top: calc(72 * 0.1rem);
  }
  .mr90:where(:not(.keep)) {
    margin-right: calc(72 * 0.1rem);
  }
  .mb90:where(:not(.keep)) {
    margin-bottom: calc(72 * 0.1rem);
  }
  .ml90:where(:not(.keep)) {
    margin-left: calc(72 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt90:where(:not(.keep)) {
    padding-top: calc(54 * 0.1rem);
  }
  .pr90:where(:not(.keep)) {
    padding-right: calc(54 * 0.1rem);
  }
  .pb90:where(:not(.keep)) {
    padding-bottom: calc(54 * 0.1rem);
  }
  .pl90:where(:not(.keep)) {
    padding-left: calc(54 * 0.1rem);
  }
  .mt90:where(:not(.keep)) {
    margin-top: calc(54 * 0.1rem);
  }
  .mr90:where(:not(.keep)) {
    margin-right: calc(54 * 0.1rem);
  }
  .mb90:where(:not(.keep)) {
    margin-bottom: calc(54 * 0.1rem);
  }
  .ml90:where(:not(.keep)) {
    margin-left: calc(54 * 0.1rem);
  }
}
.pt95 {
  padding-top: calc(95 * 0.1rem);
}

.pr95 {
  padding-right: calc(95 * 0.1rem);
}

.pb95 {
  padding-bottom: calc(95 * 0.1rem);
}

.pl95 {
  padding-left: calc(95 * 0.1rem);
}

.mt95 {
  margin-top: calc(95 * 0.1rem);
}

.mr95 {
  margin-right: calc(95 * 0.1rem);
}

.mb95 {
  margin-bottom: calc(95 * 0.1rem);
}

.ml95 {
  margin-left: calc(95 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt95:where(:not(.keep)) {
    padding-top: calc(76 * 0.1rem);
  }
  .pr95:where(:not(.keep)) {
    padding-right: calc(76 * 0.1rem);
  }
  .pb95:where(:not(.keep)) {
    padding-bottom: calc(76 * 0.1rem);
  }
  .pl95:where(:not(.keep)) {
    padding-left: calc(76 * 0.1rem);
  }
  .mt95:where(:not(.keep)) {
    margin-top: calc(76 * 0.1rem);
  }
  .mr95:where(:not(.keep)) {
    margin-right: calc(76 * 0.1rem);
  }
  .mb95:where(:not(.keep)) {
    margin-bottom: calc(76 * 0.1rem);
  }
  .ml95:where(:not(.keep)) {
    margin-left: calc(76 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt95:where(:not(.keep)) {
    padding-top: calc(57 * 0.1rem);
  }
  .pr95:where(:not(.keep)) {
    padding-right: calc(57 * 0.1rem);
  }
  .pb95:where(:not(.keep)) {
    padding-bottom: calc(57 * 0.1rem);
  }
  .pl95:where(:not(.keep)) {
    padding-left: calc(57 * 0.1rem);
  }
  .mt95:where(:not(.keep)) {
    margin-top: calc(57 * 0.1rem);
  }
  .mr95:where(:not(.keep)) {
    margin-right: calc(57 * 0.1rem);
  }
  .mb95:where(:not(.keep)) {
    margin-bottom: calc(57 * 0.1rem);
  }
  .ml95:where(:not(.keep)) {
    margin-left: calc(57 * 0.1rem);
  }
}
.pt100 {
  padding-top: calc(100 * 0.1rem);
}

.pr100 {
  padding-right: calc(100 * 0.1rem);
}

.pb100 {
  padding-bottom: calc(100 * 0.1rem);
}

.pl100 {
  padding-left: calc(100 * 0.1rem);
}

.mt100 {
  margin-top: calc(100 * 0.1rem);
}

.mr100 {
  margin-right: calc(100 * 0.1rem);
}

.mb100 {
  margin-bottom: calc(100 * 0.1rem);
}

.ml100 {
  margin-left: calc(100 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt100:where(:not(.keep)) {
    padding-top: calc(80 * 0.1rem);
  }
  .pr100:where(:not(.keep)) {
    padding-right: calc(80 * 0.1rem);
  }
  .pb100:where(:not(.keep)) {
    padding-bottom: calc(80 * 0.1rem);
  }
  .pl100:where(:not(.keep)) {
    padding-left: calc(80 * 0.1rem);
  }
  .mt100:where(:not(.keep)) {
    margin-top: calc(80 * 0.1rem);
  }
  .mr100:where(:not(.keep)) {
    margin-right: calc(80 * 0.1rem);
  }
  .mb100:where(:not(.keep)) {
    margin-bottom: calc(80 * 0.1rem);
  }
  .ml100:where(:not(.keep)) {
    margin-left: calc(80 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt100:where(:not(.keep)) {
    padding-top: calc(60 * 0.1rem);
  }
  .pr100:where(:not(.keep)) {
    padding-right: calc(60 * 0.1rem);
  }
  .pb100:where(:not(.keep)) {
    padding-bottom: calc(60 * 0.1rem);
  }
  .pl100:where(:not(.keep)) {
    padding-left: calc(60 * 0.1rem);
  }
  .mt100:where(:not(.keep)) {
    margin-top: calc(60 * 0.1rem);
  }
  .mr100:where(:not(.keep)) {
    margin-right: calc(60 * 0.1rem);
  }
  .mb100:where(:not(.keep)) {
    margin-bottom: calc(60 * 0.1rem);
  }
  .ml100:where(:not(.keep)) {
    margin-left: calc(60 * 0.1rem);
  }
}
.pt105 {
  padding-top: calc(105 * 0.1rem);
}

.pr105 {
  padding-right: calc(105 * 0.1rem);
}

.pb105 {
  padding-bottom: calc(105 * 0.1rem);
}

.pl105 {
  padding-left: calc(105 * 0.1rem);
}

.mt105 {
  margin-top: calc(105 * 0.1rem);
}

.mr105 {
  margin-right: calc(105 * 0.1rem);
}

.mb105 {
  margin-bottom: calc(105 * 0.1rem);
}

.ml105 {
  margin-left: calc(105 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt105:where(:not(.keep)) {
    padding-top: calc(84 * 0.1rem);
  }
  .pr105:where(:not(.keep)) {
    padding-right: calc(84 * 0.1rem);
  }
  .pb105:where(:not(.keep)) {
    padding-bottom: calc(84 * 0.1rem);
  }
  .pl105:where(:not(.keep)) {
    padding-left: calc(84 * 0.1rem);
  }
  .mt105:where(:not(.keep)) {
    margin-top: calc(84 * 0.1rem);
  }
  .mr105:where(:not(.keep)) {
    margin-right: calc(84 * 0.1rem);
  }
  .mb105:where(:not(.keep)) {
    margin-bottom: calc(84 * 0.1rem);
  }
  .ml105:where(:not(.keep)) {
    margin-left: calc(84 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt105:where(:not(.keep)) {
    padding-top: calc(63 * 0.1rem);
  }
  .pr105:where(:not(.keep)) {
    padding-right: calc(63 * 0.1rem);
  }
  .pb105:where(:not(.keep)) {
    padding-bottom: calc(63 * 0.1rem);
  }
  .pl105:where(:not(.keep)) {
    padding-left: calc(63 * 0.1rem);
  }
  .mt105:where(:not(.keep)) {
    margin-top: calc(63 * 0.1rem);
  }
  .mr105:where(:not(.keep)) {
    margin-right: calc(63 * 0.1rem);
  }
  .mb105:where(:not(.keep)) {
    margin-bottom: calc(63 * 0.1rem);
  }
  .ml105:where(:not(.keep)) {
    margin-left: calc(63 * 0.1rem);
  }
}
.pt110 {
  padding-top: calc(110 * 0.1rem);
}

.pr110 {
  padding-right: calc(110 * 0.1rem);
}

.pb110 {
  padding-bottom: calc(110 * 0.1rem);
}

.pl110 {
  padding-left: calc(110 * 0.1rem);
}

.mt110 {
  margin-top: calc(110 * 0.1rem);
}

.mr110 {
  margin-right: calc(110 * 0.1rem);
}

.mb110 {
  margin-bottom: calc(110 * 0.1rem);
}

.ml110 {
  margin-left: calc(110 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt110:where(:not(.keep)) {
    padding-top: calc(88 * 0.1rem);
  }
  .pr110:where(:not(.keep)) {
    padding-right: calc(88 * 0.1rem);
  }
  .pb110:where(:not(.keep)) {
    padding-bottom: calc(88 * 0.1rem);
  }
  .pl110:where(:not(.keep)) {
    padding-left: calc(88 * 0.1rem);
  }
  .mt110:where(:not(.keep)) {
    margin-top: calc(88 * 0.1rem);
  }
  .mr110:where(:not(.keep)) {
    margin-right: calc(88 * 0.1rem);
  }
  .mb110:where(:not(.keep)) {
    margin-bottom: calc(88 * 0.1rem);
  }
  .ml110:where(:not(.keep)) {
    margin-left: calc(88 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt110:where(:not(.keep)) {
    padding-top: calc(66 * 0.1rem);
  }
  .pr110:where(:not(.keep)) {
    padding-right: calc(66 * 0.1rem);
  }
  .pb110:where(:not(.keep)) {
    padding-bottom: calc(66 * 0.1rem);
  }
  .pl110:where(:not(.keep)) {
    padding-left: calc(66 * 0.1rem);
  }
  .mt110:where(:not(.keep)) {
    margin-top: calc(66 * 0.1rem);
  }
  .mr110:where(:not(.keep)) {
    margin-right: calc(66 * 0.1rem);
  }
  .mb110:where(:not(.keep)) {
    margin-bottom: calc(66 * 0.1rem);
  }
  .ml110:where(:not(.keep)) {
    margin-left: calc(66 * 0.1rem);
  }
}
.pt115 {
  padding-top: calc(115 * 0.1rem);
}

.pr115 {
  padding-right: calc(115 * 0.1rem);
}

.pb115 {
  padding-bottom: calc(115 * 0.1rem);
}

.pl115 {
  padding-left: calc(115 * 0.1rem);
}

.mt115 {
  margin-top: calc(115 * 0.1rem);
}

.mr115 {
  margin-right: calc(115 * 0.1rem);
}

.mb115 {
  margin-bottom: calc(115 * 0.1rem);
}

.ml115 {
  margin-left: calc(115 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt115:where(:not(.keep)) {
    padding-top: calc(92 * 0.1rem);
  }
  .pr115:where(:not(.keep)) {
    padding-right: calc(92 * 0.1rem);
  }
  .pb115:where(:not(.keep)) {
    padding-bottom: calc(92 * 0.1rem);
  }
  .pl115:where(:not(.keep)) {
    padding-left: calc(92 * 0.1rem);
  }
  .mt115:where(:not(.keep)) {
    margin-top: calc(92 * 0.1rem);
  }
  .mr115:where(:not(.keep)) {
    margin-right: calc(92 * 0.1rem);
  }
  .mb115:where(:not(.keep)) {
    margin-bottom: calc(92 * 0.1rem);
  }
  .ml115:where(:not(.keep)) {
    margin-left: calc(92 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt115:where(:not(.keep)) {
    padding-top: calc(69 * 0.1rem);
  }
  .pr115:where(:not(.keep)) {
    padding-right: calc(69 * 0.1rem);
  }
  .pb115:where(:not(.keep)) {
    padding-bottom: calc(69 * 0.1rem);
  }
  .pl115:where(:not(.keep)) {
    padding-left: calc(69 * 0.1rem);
  }
  .mt115:where(:not(.keep)) {
    margin-top: calc(69 * 0.1rem);
  }
  .mr115:where(:not(.keep)) {
    margin-right: calc(69 * 0.1rem);
  }
  .mb115:where(:not(.keep)) {
    margin-bottom: calc(69 * 0.1rem);
  }
  .ml115:where(:not(.keep)) {
    margin-left: calc(69 * 0.1rem);
  }
}
.pt120 {
  padding-top: calc(120 * 0.1rem);
}

.pr120 {
  padding-right: calc(120 * 0.1rem);
}

.pb120 {
  padding-bottom: calc(120 * 0.1rem);
}

.pl120 {
  padding-left: calc(120 * 0.1rem);
}

.mt120 {
  margin-top: calc(120 * 0.1rem);
}

.mr120 {
  margin-right: calc(120 * 0.1rem);
}

.mb120 {
  margin-bottom: calc(120 * 0.1rem);
}

.ml120 {
  margin-left: calc(120 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt120:where(:not(.keep)) {
    padding-top: calc(96 * 0.1rem);
  }
  .pr120:where(:not(.keep)) {
    padding-right: calc(96 * 0.1rem);
  }
  .pb120:where(:not(.keep)) {
    padding-bottom: calc(96 * 0.1rem);
  }
  .pl120:where(:not(.keep)) {
    padding-left: calc(96 * 0.1rem);
  }
  .mt120:where(:not(.keep)) {
    margin-top: calc(96 * 0.1rem);
  }
  .mr120:where(:not(.keep)) {
    margin-right: calc(96 * 0.1rem);
  }
  .mb120:where(:not(.keep)) {
    margin-bottom: calc(96 * 0.1rem);
  }
  .ml120:where(:not(.keep)) {
    margin-left: calc(96 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt120:where(:not(.keep)) {
    padding-top: calc(72 * 0.1rem);
  }
  .pr120:where(:not(.keep)) {
    padding-right: calc(72 * 0.1rem);
  }
  .pb120:where(:not(.keep)) {
    padding-bottom: calc(72 * 0.1rem);
  }
  .pl120:where(:not(.keep)) {
    padding-left: calc(72 * 0.1rem);
  }
  .mt120:where(:not(.keep)) {
    margin-top: calc(72 * 0.1rem);
  }
  .mr120:where(:not(.keep)) {
    margin-right: calc(72 * 0.1rem);
  }
  .mb120:where(:not(.keep)) {
    margin-bottom: calc(72 * 0.1rem);
  }
  .ml120:where(:not(.keep)) {
    margin-left: calc(72 * 0.1rem);
  }
}
.pt125 {
  padding-top: calc(125 * 0.1rem);
}

.pr125 {
  padding-right: calc(125 * 0.1rem);
}

.pb125 {
  padding-bottom: calc(125 * 0.1rem);
}

.pl125 {
  padding-left: calc(125 * 0.1rem);
}

.mt125 {
  margin-top: calc(125 * 0.1rem);
}

.mr125 {
  margin-right: calc(125 * 0.1rem);
}

.mb125 {
  margin-bottom: calc(125 * 0.1rem);
}

.ml125 {
  margin-left: calc(125 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt125:where(:not(.keep)) {
    padding-top: calc(100 * 0.1rem);
  }
  .pr125:where(:not(.keep)) {
    padding-right: calc(100 * 0.1rem);
  }
  .pb125:where(:not(.keep)) {
    padding-bottom: calc(100 * 0.1rem);
  }
  .pl125:where(:not(.keep)) {
    padding-left: calc(100 * 0.1rem);
  }
  .mt125:where(:not(.keep)) {
    margin-top: calc(100 * 0.1rem);
  }
  .mr125:where(:not(.keep)) {
    margin-right: calc(100 * 0.1rem);
  }
  .mb125:where(:not(.keep)) {
    margin-bottom: calc(100 * 0.1rem);
  }
  .ml125:where(:not(.keep)) {
    margin-left: calc(100 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt125:where(:not(.keep)) {
    padding-top: calc(75 * 0.1rem);
  }
  .pr125:where(:not(.keep)) {
    padding-right: calc(75 * 0.1rem);
  }
  .pb125:where(:not(.keep)) {
    padding-bottom: calc(75 * 0.1rem);
  }
  .pl125:where(:not(.keep)) {
    padding-left: calc(75 * 0.1rem);
  }
  .mt125:where(:not(.keep)) {
    margin-top: calc(75 * 0.1rem);
  }
  .mr125:where(:not(.keep)) {
    margin-right: calc(75 * 0.1rem);
  }
  .mb125:where(:not(.keep)) {
    margin-bottom: calc(75 * 0.1rem);
  }
  .ml125:where(:not(.keep)) {
    margin-left: calc(75 * 0.1rem);
  }
}
.pt130 {
  padding-top: calc(130 * 0.1rem);
}

.pr130 {
  padding-right: calc(130 * 0.1rem);
}

.pb130 {
  padding-bottom: calc(130 * 0.1rem);
}

.pl130 {
  padding-left: calc(130 * 0.1rem);
}

.mt130 {
  margin-top: calc(130 * 0.1rem);
}

.mr130 {
  margin-right: calc(130 * 0.1rem);
}

.mb130 {
  margin-bottom: calc(130 * 0.1rem);
}

.ml130 {
  margin-left: calc(130 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt130:where(:not(.keep)) {
    padding-top: calc(104 * 0.1rem);
  }
  .pr130:where(:not(.keep)) {
    padding-right: calc(104 * 0.1rem);
  }
  .pb130:where(:not(.keep)) {
    padding-bottom: calc(104 * 0.1rem);
  }
  .pl130:where(:not(.keep)) {
    padding-left: calc(104 * 0.1rem);
  }
  .mt130:where(:not(.keep)) {
    margin-top: calc(104 * 0.1rem);
  }
  .mr130:where(:not(.keep)) {
    margin-right: calc(104 * 0.1rem);
  }
  .mb130:where(:not(.keep)) {
    margin-bottom: calc(104 * 0.1rem);
  }
  .ml130:where(:not(.keep)) {
    margin-left: calc(104 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt130:where(:not(.keep)) {
    padding-top: calc(78 * 0.1rem);
  }
  .pr130:where(:not(.keep)) {
    padding-right: calc(78 * 0.1rem);
  }
  .pb130:where(:not(.keep)) {
    padding-bottom: calc(78 * 0.1rem);
  }
  .pl130:where(:not(.keep)) {
    padding-left: calc(78 * 0.1rem);
  }
  .mt130:where(:not(.keep)) {
    margin-top: calc(78 * 0.1rem);
  }
  .mr130:where(:not(.keep)) {
    margin-right: calc(78 * 0.1rem);
  }
  .mb130:where(:not(.keep)) {
    margin-bottom: calc(78 * 0.1rem);
  }
  .ml130:where(:not(.keep)) {
    margin-left: calc(78 * 0.1rem);
  }
}
.pt135 {
  padding-top: calc(135 * 0.1rem);
}

.pr135 {
  padding-right: calc(135 * 0.1rem);
}

.pb135 {
  padding-bottom: calc(135 * 0.1rem);
}

.pl135 {
  padding-left: calc(135 * 0.1rem);
}

.mt135 {
  margin-top: calc(135 * 0.1rem);
}

.mr135 {
  margin-right: calc(135 * 0.1rem);
}

.mb135 {
  margin-bottom: calc(135 * 0.1rem);
}

.ml135 {
  margin-left: calc(135 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt135:where(:not(.keep)) {
    padding-top: calc(108 * 0.1rem);
  }
  .pr135:where(:not(.keep)) {
    padding-right: calc(108 * 0.1rem);
  }
  .pb135:where(:not(.keep)) {
    padding-bottom: calc(108 * 0.1rem);
  }
  .pl135:where(:not(.keep)) {
    padding-left: calc(108 * 0.1rem);
  }
  .mt135:where(:not(.keep)) {
    margin-top: calc(108 * 0.1rem);
  }
  .mr135:where(:not(.keep)) {
    margin-right: calc(108 * 0.1rem);
  }
  .mb135:where(:not(.keep)) {
    margin-bottom: calc(108 * 0.1rem);
  }
  .ml135:where(:not(.keep)) {
    margin-left: calc(108 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt135:where(:not(.keep)) {
    padding-top: calc(81 * 0.1rem);
  }
  .pr135:where(:not(.keep)) {
    padding-right: calc(81 * 0.1rem);
  }
  .pb135:where(:not(.keep)) {
    padding-bottom: calc(81 * 0.1rem);
  }
  .pl135:where(:not(.keep)) {
    padding-left: calc(81 * 0.1rem);
  }
  .mt135:where(:not(.keep)) {
    margin-top: calc(81 * 0.1rem);
  }
  .mr135:where(:not(.keep)) {
    margin-right: calc(81 * 0.1rem);
  }
  .mb135:where(:not(.keep)) {
    margin-bottom: calc(81 * 0.1rem);
  }
  .ml135:where(:not(.keep)) {
    margin-left: calc(81 * 0.1rem);
  }
}
.pt140 {
  padding-top: calc(140 * 0.1rem);
}

.pr140 {
  padding-right: calc(140 * 0.1rem);
}

.pb140 {
  padding-bottom: calc(140 * 0.1rem);
}

.pl140 {
  padding-left: calc(140 * 0.1rem);
}

.mt140 {
  margin-top: calc(140 * 0.1rem);
}

.mr140 {
  margin-right: calc(140 * 0.1rem);
}

.mb140 {
  margin-bottom: calc(140 * 0.1rem);
}

.ml140 {
  margin-left: calc(140 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt140:where(:not(.keep)) {
    padding-top: calc(112 * 0.1rem);
  }
  .pr140:where(:not(.keep)) {
    padding-right: calc(112 * 0.1rem);
  }
  .pb140:where(:not(.keep)) {
    padding-bottom: calc(112 * 0.1rem);
  }
  .pl140:where(:not(.keep)) {
    padding-left: calc(112 * 0.1rem);
  }
  .mt140:where(:not(.keep)) {
    margin-top: calc(112 * 0.1rem);
  }
  .mr140:where(:not(.keep)) {
    margin-right: calc(112 * 0.1rem);
  }
  .mb140:where(:not(.keep)) {
    margin-bottom: calc(112 * 0.1rem);
  }
  .ml140:where(:not(.keep)) {
    margin-left: calc(112 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt140:where(:not(.keep)) {
    padding-top: calc(84 * 0.1rem);
  }
  .pr140:where(:not(.keep)) {
    padding-right: calc(84 * 0.1rem);
  }
  .pb140:where(:not(.keep)) {
    padding-bottom: calc(84 * 0.1rem);
  }
  .pl140:where(:not(.keep)) {
    padding-left: calc(84 * 0.1rem);
  }
  .mt140:where(:not(.keep)) {
    margin-top: calc(84 * 0.1rem);
  }
  .mr140:where(:not(.keep)) {
    margin-right: calc(84 * 0.1rem);
  }
  .mb140:where(:not(.keep)) {
    margin-bottom: calc(84 * 0.1rem);
  }
  .ml140:where(:not(.keep)) {
    margin-left: calc(84 * 0.1rem);
  }
}
.pt145 {
  padding-top: calc(145 * 0.1rem);
}

.pr145 {
  padding-right: calc(145 * 0.1rem);
}

.pb145 {
  padding-bottom: calc(145 * 0.1rem);
}

.pl145 {
  padding-left: calc(145 * 0.1rem);
}

.mt145 {
  margin-top: calc(145 * 0.1rem);
}

.mr145 {
  margin-right: calc(145 * 0.1rem);
}

.mb145 {
  margin-bottom: calc(145 * 0.1rem);
}

.ml145 {
  margin-left: calc(145 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt145:where(:not(.keep)) {
    padding-top: calc(116 * 0.1rem);
  }
  .pr145:where(:not(.keep)) {
    padding-right: calc(116 * 0.1rem);
  }
  .pb145:where(:not(.keep)) {
    padding-bottom: calc(116 * 0.1rem);
  }
  .pl145:where(:not(.keep)) {
    padding-left: calc(116 * 0.1rem);
  }
  .mt145:where(:not(.keep)) {
    margin-top: calc(116 * 0.1rem);
  }
  .mr145:where(:not(.keep)) {
    margin-right: calc(116 * 0.1rem);
  }
  .mb145:where(:not(.keep)) {
    margin-bottom: calc(116 * 0.1rem);
  }
  .ml145:where(:not(.keep)) {
    margin-left: calc(116 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt145:where(:not(.keep)) {
    padding-top: calc(87 * 0.1rem);
  }
  .pr145:where(:not(.keep)) {
    padding-right: calc(87 * 0.1rem);
  }
  .pb145:where(:not(.keep)) {
    padding-bottom: calc(87 * 0.1rem);
  }
  .pl145:where(:not(.keep)) {
    padding-left: calc(87 * 0.1rem);
  }
  .mt145:where(:not(.keep)) {
    margin-top: calc(87 * 0.1rem);
  }
  .mr145:where(:not(.keep)) {
    margin-right: calc(87 * 0.1rem);
  }
  .mb145:where(:not(.keep)) {
    margin-bottom: calc(87 * 0.1rem);
  }
  .ml145:where(:not(.keep)) {
    margin-left: calc(87 * 0.1rem);
  }
}
.pt150 {
  padding-top: calc(150 * 0.1rem);
}

.pr150 {
  padding-right: calc(150 * 0.1rem);
}

.pb150 {
  padding-bottom: calc(150 * 0.1rem);
}

.pl150 {
  padding-left: calc(150 * 0.1rem);
}

.mt150 {
  margin-top: calc(150 * 0.1rem);
}

.mr150 {
  margin-right: calc(150 * 0.1rem);
}

.mb150 {
  margin-bottom: calc(150 * 0.1rem);
}

.ml150 {
  margin-left: calc(150 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt150:where(:not(.keep)) {
    padding-top: calc(120 * 0.1rem);
  }
  .pr150:where(:not(.keep)) {
    padding-right: calc(120 * 0.1rem);
  }
  .pb150:where(:not(.keep)) {
    padding-bottom: calc(120 * 0.1rem);
  }
  .pl150:where(:not(.keep)) {
    padding-left: calc(120 * 0.1rem);
  }
  .mt150:where(:not(.keep)) {
    margin-top: calc(120 * 0.1rem);
  }
  .mr150:where(:not(.keep)) {
    margin-right: calc(120 * 0.1rem);
  }
  .mb150:where(:not(.keep)) {
    margin-bottom: calc(120 * 0.1rem);
  }
  .ml150:where(:not(.keep)) {
    margin-left: calc(120 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt150:where(:not(.keep)) {
    padding-top: calc(90 * 0.1rem);
  }
  .pr150:where(:not(.keep)) {
    padding-right: calc(90 * 0.1rem);
  }
  .pb150:where(:not(.keep)) {
    padding-bottom: calc(90 * 0.1rem);
  }
  .pl150:where(:not(.keep)) {
    padding-left: calc(90 * 0.1rem);
  }
  .mt150:where(:not(.keep)) {
    margin-top: calc(90 * 0.1rem);
  }
  .mr150:where(:not(.keep)) {
    margin-right: calc(90 * 0.1rem);
  }
  .mb150:where(:not(.keep)) {
    margin-bottom: calc(90 * 0.1rem);
  }
  .ml150:where(:not(.keep)) {
    margin-left: calc(90 * 0.1rem);
  }
}
.pt155 {
  padding-top: calc(155 * 0.1rem);
}

.pr155 {
  padding-right: calc(155 * 0.1rem);
}

.pb155 {
  padding-bottom: calc(155 * 0.1rem);
}

.pl155 {
  padding-left: calc(155 * 0.1rem);
}

.mt155 {
  margin-top: calc(155 * 0.1rem);
}

.mr155 {
  margin-right: calc(155 * 0.1rem);
}

.mb155 {
  margin-bottom: calc(155 * 0.1rem);
}

.ml155 {
  margin-left: calc(155 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt155:where(:not(.keep)) {
    padding-top: calc(124 * 0.1rem);
  }
  .pr155:where(:not(.keep)) {
    padding-right: calc(124 * 0.1rem);
  }
  .pb155:where(:not(.keep)) {
    padding-bottom: calc(124 * 0.1rem);
  }
  .pl155:where(:not(.keep)) {
    padding-left: calc(124 * 0.1rem);
  }
  .mt155:where(:not(.keep)) {
    margin-top: calc(124 * 0.1rem);
  }
  .mr155:where(:not(.keep)) {
    margin-right: calc(124 * 0.1rem);
  }
  .mb155:where(:not(.keep)) {
    margin-bottom: calc(124 * 0.1rem);
  }
  .ml155:where(:not(.keep)) {
    margin-left: calc(124 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt155:where(:not(.keep)) {
    padding-top: calc(93 * 0.1rem);
  }
  .pr155:where(:not(.keep)) {
    padding-right: calc(93 * 0.1rem);
  }
  .pb155:where(:not(.keep)) {
    padding-bottom: calc(93 * 0.1rem);
  }
  .pl155:where(:not(.keep)) {
    padding-left: calc(93 * 0.1rem);
  }
  .mt155:where(:not(.keep)) {
    margin-top: calc(93 * 0.1rem);
  }
  .mr155:where(:not(.keep)) {
    margin-right: calc(93 * 0.1rem);
  }
  .mb155:where(:not(.keep)) {
    margin-bottom: calc(93 * 0.1rem);
  }
  .ml155:where(:not(.keep)) {
    margin-left: calc(93 * 0.1rem);
  }
}
.pt160 {
  padding-top: calc(160 * 0.1rem);
}

.pr160 {
  padding-right: calc(160 * 0.1rem);
}

.pb160 {
  padding-bottom: calc(160 * 0.1rem);
}

.pl160 {
  padding-left: calc(160 * 0.1rem);
}

.mt160 {
  margin-top: calc(160 * 0.1rem);
}

.mr160 {
  margin-right: calc(160 * 0.1rem);
}

.mb160 {
  margin-bottom: calc(160 * 0.1rem);
}

.ml160 {
  margin-left: calc(160 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt160:where(:not(.keep)) {
    padding-top: calc(128 * 0.1rem);
  }
  .pr160:where(:not(.keep)) {
    padding-right: calc(128 * 0.1rem);
  }
  .pb160:where(:not(.keep)) {
    padding-bottom: calc(128 * 0.1rem);
  }
  .pl160:where(:not(.keep)) {
    padding-left: calc(128 * 0.1rem);
  }
  .mt160:where(:not(.keep)) {
    margin-top: calc(128 * 0.1rem);
  }
  .mr160:where(:not(.keep)) {
    margin-right: calc(128 * 0.1rem);
  }
  .mb160:where(:not(.keep)) {
    margin-bottom: calc(128 * 0.1rem);
  }
  .ml160:where(:not(.keep)) {
    margin-left: calc(128 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt160:where(:not(.keep)) {
    padding-top: calc(96 * 0.1rem);
  }
  .pr160:where(:not(.keep)) {
    padding-right: calc(96 * 0.1rem);
  }
  .pb160:where(:not(.keep)) {
    padding-bottom: calc(96 * 0.1rem);
  }
  .pl160:where(:not(.keep)) {
    padding-left: calc(96 * 0.1rem);
  }
  .mt160:where(:not(.keep)) {
    margin-top: calc(96 * 0.1rem);
  }
  .mr160:where(:not(.keep)) {
    margin-right: calc(96 * 0.1rem);
  }
  .mb160:where(:not(.keep)) {
    margin-bottom: calc(96 * 0.1rem);
  }
  .ml160:where(:not(.keep)) {
    margin-left: calc(96 * 0.1rem);
  }
}
.pt165 {
  padding-top: calc(165 * 0.1rem);
}

.pr165 {
  padding-right: calc(165 * 0.1rem);
}

.pb165 {
  padding-bottom: calc(165 * 0.1rem);
}

.pl165 {
  padding-left: calc(165 * 0.1rem);
}

.mt165 {
  margin-top: calc(165 * 0.1rem);
}

.mr165 {
  margin-right: calc(165 * 0.1rem);
}

.mb165 {
  margin-bottom: calc(165 * 0.1rem);
}

.ml165 {
  margin-left: calc(165 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt165:where(:not(.keep)) {
    padding-top: calc(132 * 0.1rem);
  }
  .pr165:where(:not(.keep)) {
    padding-right: calc(132 * 0.1rem);
  }
  .pb165:where(:not(.keep)) {
    padding-bottom: calc(132 * 0.1rem);
  }
  .pl165:where(:not(.keep)) {
    padding-left: calc(132 * 0.1rem);
  }
  .mt165:where(:not(.keep)) {
    margin-top: calc(132 * 0.1rem);
  }
  .mr165:where(:not(.keep)) {
    margin-right: calc(132 * 0.1rem);
  }
  .mb165:where(:not(.keep)) {
    margin-bottom: calc(132 * 0.1rem);
  }
  .ml165:where(:not(.keep)) {
    margin-left: calc(132 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt165:where(:not(.keep)) {
    padding-top: calc(99 * 0.1rem);
  }
  .pr165:where(:not(.keep)) {
    padding-right: calc(99 * 0.1rem);
  }
  .pb165:where(:not(.keep)) {
    padding-bottom: calc(99 * 0.1rem);
  }
  .pl165:where(:not(.keep)) {
    padding-left: calc(99 * 0.1rem);
  }
  .mt165:where(:not(.keep)) {
    margin-top: calc(99 * 0.1rem);
  }
  .mr165:where(:not(.keep)) {
    margin-right: calc(99 * 0.1rem);
  }
  .mb165:where(:not(.keep)) {
    margin-bottom: calc(99 * 0.1rem);
  }
  .ml165:where(:not(.keep)) {
    margin-left: calc(99 * 0.1rem);
  }
}
.pt170 {
  padding-top: calc(170 * 0.1rem);
}

.pr170 {
  padding-right: calc(170 * 0.1rem);
}

.pb170 {
  padding-bottom: calc(170 * 0.1rem);
}

.pl170 {
  padding-left: calc(170 * 0.1rem);
}

.mt170 {
  margin-top: calc(170 * 0.1rem);
}

.mr170 {
  margin-right: calc(170 * 0.1rem);
}

.mb170 {
  margin-bottom: calc(170 * 0.1rem);
}

.ml170 {
  margin-left: calc(170 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt170:where(:not(.keep)) {
    padding-top: calc(136 * 0.1rem);
  }
  .pr170:where(:not(.keep)) {
    padding-right: calc(136 * 0.1rem);
  }
  .pb170:where(:not(.keep)) {
    padding-bottom: calc(136 * 0.1rem);
  }
  .pl170:where(:not(.keep)) {
    padding-left: calc(136 * 0.1rem);
  }
  .mt170:where(:not(.keep)) {
    margin-top: calc(136 * 0.1rem);
  }
  .mr170:where(:not(.keep)) {
    margin-right: calc(136 * 0.1rem);
  }
  .mb170:where(:not(.keep)) {
    margin-bottom: calc(136 * 0.1rem);
  }
  .ml170:where(:not(.keep)) {
    margin-left: calc(136 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt170:where(:not(.keep)) {
    padding-top: calc(102 * 0.1rem);
  }
  .pr170:where(:not(.keep)) {
    padding-right: calc(102 * 0.1rem);
  }
  .pb170:where(:not(.keep)) {
    padding-bottom: calc(102 * 0.1rem);
  }
  .pl170:where(:not(.keep)) {
    padding-left: calc(102 * 0.1rem);
  }
  .mt170:where(:not(.keep)) {
    margin-top: calc(102 * 0.1rem);
  }
  .mr170:where(:not(.keep)) {
    margin-right: calc(102 * 0.1rem);
  }
  .mb170:where(:not(.keep)) {
    margin-bottom: calc(102 * 0.1rem);
  }
  .ml170:where(:not(.keep)) {
    margin-left: calc(102 * 0.1rem);
  }
}
.pt175 {
  padding-top: calc(175 * 0.1rem);
}

.pr175 {
  padding-right: calc(175 * 0.1rem);
}

.pb175 {
  padding-bottom: calc(175 * 0.1rem);
}

.pl175 {
  padding-left: calc(175 * 0.1rem);
}

.mt175 {
  margin-top: calc(175 * 0.1rem);
}

.mr175 {
  margin-right: calc(175 * 0.1rem);
}

.mb175 {
  margin-bottom: calc(175 * 0.1rem);
}

.ml175 {
  margin-left: calc(175 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt175:where(:not(.keep)) {
    padding-top: calc(140 * 0.1rem);
  }
  .pr175:where(:not(.keep)) {
    padding-right: calc(140 * 0.1rem);
  }
  .pb175:where(:not(.keep)) {
    padding-bottom: calc(140 * 0.1rem);
  }
  .pl175:where(:not(.keep)) {
    padding-left: calc(140 * 0.1rem);
  }
  .mt175:where(:not(.keep)) {
    margin-top: calc(140 * 0.1rem);
  }
  .mr175:where(:not(.keep)) {
    margin-right: calc(140 * 0.1rem);
  }
  .mb175:where(:not(.keep)) {
    margin-bottom: calc(140 * 0.1rem);
  }
  .ml175:where(:not(.keep)) {
    margin-left: calc(140 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt175:where(:not(.keep)) {
    padding-top: calc(105 * 0.1rem);
  }
  .pr175:where(:not(.keep)) {
    padding-right: calc(105 * 0.1rem);
  }
  .pb175:where(:not(.keep)) {
    padding-bottom: calc(105 * 0.1rem);
  }
  .pl175:where(:not(.keep)) {
    padding-left: calc(105 * 0.1rem);
  }
  .mt175:where(:not(.keep)) {
    margin-top: calc(105 * 0.1rem);
  }
  .mr175:where(:not(.keep)) {
    margin-right: calc(105 * 0.1rem);
  }
  .mb175:where(:not(.keep)) {
    margin-bottom: calc(105 * 0.1rem);
  }
  .ml175:where(:not(.keep)) {
    margin-left: calc(105 * 0.1rem);
  }
}
.pt180 {
  padding-top: calc(180 * 0.1rem);
}

.pr180 {
  padding-right: calc(180 * 0.1rem);
}

.pb180 {
  padding-bottom: calc(180 * 0.1rem);
}

.pl180 {
  padding-left: calc(180 * 0.1rem);
}

.mt180 {
  margin-top: calc(180 * 0.1rem);
}

.mr180 {
  margin-right: calc(180 * 0.1rem);
}

.mb180 {
  margin-bottom: calc(180 * 0.1rem);
}

.ml180 {
  margin-left: calc(180 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt180:where(:not(.keep)) {
    padding-top: calc(144 * 0.1rem);
  }
  .pr180:where(:not(.keep)) {
    padding-right: calc(144 * 0.1rem);
  }
  .pb180:where(:not(.keep)) {
    padding-bottom: calc(144 * 0.1rem);
  }
  .pl180:where(:not(.keep)) {
    padding-left: calc(144 * 0.1rem);
  }
  .mt180:where(:not(.keep)) {
    margin-top: calc(144 * 0.1rem);
  }
  .mr180:where(:not(.keep)) {
    margin-right: calc(144 * 0.1rem);
  }
  .mb180:where(:not(.keep)) {
    margin-bottom: calc(144 * 0.1rem);
  }
  .ml180:where(:not(.keep)) {
    margin-left: calc(144 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt180:where(:not(.keep)) {
    padding-top: calc(108 * 0.1rem);
  }
  .pr180:where(:not(.keep)) {
    padding-right: calc(108 * 0.1rem);
  }
  .pb180:where(:not(.keep)) {
    padding-bottom: calc(108 * 0.1rem);
  }
  .pl180:where(:not(.keep)) {
    padding-left: calc(108 * 0.1rem);
  }
  .mt180:where(:not(.keep)) {
    margin-top: calc(108 * 0.1rem);
  }
  .mr180:where(:not(.keep)) {
    margin-right: calc(108 * 0.1rem);
  }
  .mb180:where(:not(.keep)) {
    margin-bottom: calc(108 * 0.1rem);
  }
  .ml180:where(:not(.keep)) {
    margin-left: calc(108 * 0.1rem);
  }
}
.pt185 {
  padding-top: calc(185 * 0.1rem);
}

.pr185 {
  padding-right: calc(185 * 0.1rem);
}

.pb185 {
  padding-bottom: calc(185 * 0.1rem);
}

.pl185 {
  padding-left: calc(185 * 0.1rem);
}

.mt185 {
  margin-top: calc(185 * 0.1rem);
}

.mr185 {
  margin-right: calc(185 * 0.1rem);
}

.mb185 {
  margin-bottom: calc(185 * 0.1rem);
}

.ml185 {
  margin-left: calc(185 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt185:where(:not(.keep)) {
    padding-top: calc(148 * 0.1rem);
  }
  .pr185:where(:not(.keep)) {
    padding-right: calc(148 * 0.1rem);
  }
  .pb185:where(:not(.keep)) {
    padding-bottom: calc(148 * 0.1rem);
  }
  .pl185:where(:not(.keep)) {
    padding-left: calc(148 * 0.1rem);
  }
  .mt185:where(:not(.keep)) {
    margin-top: calc(148 * 0.1rem);
  }
  .mr185:where(:not(.keep)) {
    margin-right: calc(148 * 0.1rem);
  }
  .mb185:where(:not(.keep)) {
    margin-bottom: calc(148 * 0.1rem);
  }
  .ml185:where(:not(.keep)) {
    margin-left: calc(148 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt185:where(:not(.keep)) {
    padding-top: calc(111 * 0.1rem);
  }
  .pr185:where(:not(.keep)) {
    padding-right: calc(111 * 0.1rem);
  }
  .pb185:where(:not(.keep)) {
    padding-bottom: calc(111 * 0.1rem);
  }
  .pl185:where(:not(.keep)) {
    padding-left: calc(111 * 0.1rem);
  }
  .mt185:where(:not(.keep)) {
    margin-top: calc(111 * 0.1rem);
  }
  .mr185:where(:not(.keep)) {
    margin-right: calc(111 * 0.1rem);
  }
  .mb185:where(:not(.keep)) {
    margin-bottom: calc(111 * 0.1rem);
  }
  .ml185:where(:not(.keep)) {
    margin-left: calc(111 * 0.1rem);
  }
}
.pt190 {
  padding-top: calc(190 * 0.1rem);
}

.pr190 {
  padding-right: calc(190 * 0.1rem);
}

.pb190 {
  padding-bottom: calc(190 * 0.1rem);
}

.pl190 {
  padding-left: calc(190 * 0.1rem);
}

.mt190 {
  margin-top: calc(190 * 0.1rem);
}

.mr190 {
  margin-right: calc(190 * 0.1rem);
}

.mb190 {
  margin-bottom: calc(190 * 0.1rem);
}

.ml190 {
  margin-left: calc(190 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt190:where(:not(.keep)) {
    padding-top: calc(152 * 0.1rem);
  }
  .pr190:where(:not(.keep)) {
    padding-right: calc(152 * 0.1rem);
  }
  .pb190:where(:not(.keep)) {
    padding-bottom: calc(152 * 0.1rem);
  }
  .pl190:where(:not(.keep)) {
    padding-left: calc(152 * 0.1rem);
  }
  .mt190:where(:not(.keep)) {
    margin-top: calc(152 * 0.1rem);
  }
  .mr190:where(:not(.keep)) {
    margin-right: calc(152 * 0.1rem);
  }
  .mb190:where(:not(.keep)) {
    margin-bottom: calc(152 * 0.1rem);
  }
  .ml190:where(:not(.keep)) {
    margin-left: calc(152 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt190:where(:not(.keep)) {
    padding-top: calc(114 * 0.1rem);
  }
  .pr190:where(:not(.keep)) {
    padding-right: calc(114 * 0.1rem);
  }
  .pb190:where(:not(.keep)) {
    padding-bottom: calc(114 * 0.1rem);
  }
  .pl190:where(:not(.keep)) {
    padding-left: calc(114 * 0.1rem);
  }
  .mt190:where(:not(.keep)) {
    margin-top: calc(114 * 0.1rem);
  }
  .mr190:where(:not(.keep)) {
    margin-right: calc(114 * 0.1rem);
  }
  .mb190:where(:not(.keep)) {
    margin-bottom: calc(114 * 0.1rem);
  }
  .ml190:where(:not(.keep)) {
    margin-left: calc(114 * 0.1rem);
  }
}
.pt195 {
  padding-top: calc(195 * 0.1rem);
}

.pr195 {
  padding-right: calc(195 * 0.1rem);
}

.pb195 {
  padding-bottom: calc(195 * 0.1rem);
}

.pl195 {
  padding-left: calc(195 * 0.1rem);
}

.mt195 {
  margin-top: calc(195 * 0.1rem);
}

.mr195 {
  margin-right: calc(195 * 0.1rem);
}

.mb195 {
  margin-bottom: calc(195 * 0.1rem);
}

.ml195 {
  margin-left: calc(195 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt195:where(:not(.keep)) {
    padding-top: calc(156 * 0.1rem);
  }
  .pr195:where(:not(.keep)) {
    padding-right: calc(156 * 0.1rem);
  }
  .pb195:where(:not(.keep)) {
    padding-bottom: calc(156 * 0.1rem);
  }
  .pl195:where(:not(.keep)) {
    padding-left: calc(156 * 0.1rem);
  }
  .mt195:where(:not(.keep)) {
    margin-top: calc(156 * 0.1rem);
  }
  .mr195:where(:not(.keep)) {
    margin-right: calc(156 * 0.1rem);
  }
  .mb195:where(:not(.keep)) {
    margin-bottom: calc(156 * 0.1rem);
  }
  .ml195:where(:not(.keep)) {
    margin-left: calc(156 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt195:where(:not(.keep)) {
    padding-top: calc(117 * 0.1rem);
  }
  .pr195:where(:not(.keep)) {
    padding-right: calc(117 * 0.1rem);
  }
  .pb195:where(:not(.keep)) {
    padding-bottom: calc(117 * 0.1rem);
  }
  .pl195:where(:not(.keep)) {
    padding-left: calc(117 * 0.1rem);
  }
  .mt195:where(:not(.keep)) {
    margin-top: calc(117 * 0.1rem);
  }
  .mr195:where(:not(.keep)) {
    margin-right: calc(117 * 0.1rem);
  }
  .mb195:where(:not(.keep)) {
    margin-bottom: calc(117 * 0.1rem);
  }
  .ml195:where(:not(.keep)) {
    margin-left: calc(117 * 0.1rem);
  }
}
.pt200 {
  padding-top: calc(200 * 0.1rem);
}

.pr200 {
  padding-right: calc(200 * 0.1rem);
}

.pb200 {
  padding-bottom: calc(200 * 0.1rem);
}

.pl200 {
  padding-left: calc(200 * 0.1rem);
}

.mt200 {
  margin-top: calc(200 * 0.1rem);
}

.mr200 {
  margin-right: calc(200 * 0.1rem);
}

.mb200 {
  margin-bottom: calc(200 * 0.1rem);
}

.ml200 {
  margin-left: calc(200 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt200:where(:not(.keep)) {
    padding-top: calc(160 * 0.1rem);
  }
  .pr200:where(:not(.keep)) {
    padding-right: calc(160 * 0.1rem);
  }
  .pb200:where(:not(.keep)) {
    padding-bottom: calc(160 * 0.1rem);
  }
  .pl200:where(:not(.keep)) {
    padding-left: calc(160 * 0.1rem);
  }
  .mt200:where(:not(.keep)) {
    margin-top: calc(160 * 0.1rem);
  }
  .mr200:where(:not(.keep)) {
    margin-right: calc(160 * 0.1rem);
  }
  .mb200:where(:not(.keep)) {
    margin-bottom: calc(160 * 0.1rem);
  }
  .ml200:where(:not(.keep)) {
    margin-left: calc(160 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt200:where(:not(.keep)) {
    padding-top: calc(120 * 0.1rem);
  }
  .pr200:where(:not(.keep)) {
    padding-right: calc(120 * 0.1rem);
  }
  .pb200:where(:not(.keep)) {
    padding-bottom: calc(120 * 0.1rem);
  }
  .pl200:where(:not(.keep)) {
    padding-left: calc(120 * 0.1rem);
  }
  .mt200:where(:not(.keep)) {
    margin-top: calc(120 * 0.1rem);
  }
  .mr200:where(:not(.keep)) {
    margin-right: calc(120 * 0.1rem);
  }
  .mb200:where(:not(.keep)) {
    margin-bottom: calc(120 * 0.1rem);
  }
  .ml200:where(:not(.keep)) {
    margin-left: calc(120 * 0.1rem);
  }
}
.pt205 {
  padding-top: calc(205 * 0.1rem);
}

.pr205 {
  padding-right: calc(205 * 0.1rem);
}

.pb205 {
  padding-bottom: calc(205 * 0.1rem);
}

.pl205 {
  padding-left: calc(205 * 0.1rem);
}

.mt205 {
  margin-top: calc(205 * 0.1rem);
}

.mr205 {
  margin-right: calc(205 * 0.1rem);
}

.mb205 {
  margin-bottom: calc(205 * 0.1rem);
}

.ml205 {
  margin-left: calc(205 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt205:where(:not(.keep)) {
    padding-top: calc(164 * 0.1rem);
  }
  .pr205:where(:not(.keep)) {
    padding-right: calc(164 * 0.1rem);
  }
  .pb205:where(:not(.keep)) {
    padding-bottom: calc(164 * 0.1rem);
  }
  .pl205:where(:not(.keep)) {
    padding-left: calc(164 * 0.1rem);
  }
  .mt205:where(:not(.keep)) {
    margin-top: calc(164 * 0.1rem);
  }
  .mr205:where(:not(.keep)) {
    margin-right: calc(164 * 0.1rem);
  }
  .mb205:where(:not(.keep)) {
    margin-bottom: calc(164 * 0.1rem);
  }
  .ml205:where(:not(.keep)) {
    margin-left: calc(164 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt205:where(:not(.keep)) {
    padding-top: calc(123 * 0.1rem);
  }
  .pr205:where(:not(.keep)) {
    padding-right: calc(123 * 0.1rem);
  }
  .pb205:where(:not(.keep)) {
    padding-bottom: calc(123 * 0.1rem);
  }
  .pl205:where(:not(.keep)) {
    padding-left: calc(123 * 0.1rem);
  }
  .mt205:where(:not(.keep)) {
    margin-top: calc(123 * 0.1rem);
  }
  .mr205:where(:not(.keep)) {
    margin-right: calc(123 * 0.1rem);
  }
  .mb205:where(:not(.keep)) {
    margin-bottom: calc(123 * 0.1rem);
  }
  .ml205:where(:not(.keep)) {
    margin-left: calc(123 * 0.1rem);
  }
}
.pt210 {
  padding-top: calc(210 * 0.1rem);
}

.pr210 {
  padding-right: calc(210 * 0.1rem);
}

.pb210 {
  padding-bottom: calc(210 * 0.1rem);
}

.pl210 {
  padding-left: calc(210 * 0.1rem);
}

.mt210 {
  margin-top: calc(210 * 0.1rem);
}

.mr210 {
  margin-right: calc(210 * 0.1rem);
}

.mb210 {
  margin-bottom: calc(210 * 0.1rem);
}

.ml210 {
  margin-left: calc(210 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt210:where(:not(.keep)) {
    padding-top: calc(168 * 0.1rem);
  }
  .pr210:where(:not(.keep)) {
    padding-right: calc(168 * 0.1rem);
  }
  .pb210:where(:not(.keep)) {
    padding-bottom: calc(168 * 0.1rem);
  }
  .pl210:where(:not(.keep)) {
    padding-left: calc(168 * 0.1rem);
  }
  .mt210:where(:not(.keep)) {
    margin-top: calc(168 * 0.1rem);
  }
  .mr210:where(:not(.keep)) {
    margin-right: calc(168 * 0.1rem);
  }
  .mb210:where(:not(.keep)) {
    margin-bottom: calc(168 * 0.1rem);
  }
  .ml210:where(:not(.keep)) {
    margin-left: calc(168 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt210:where(:not(.keep)) {
    padding-top: calc(126 * 0.1rem);
  }
  .pr210:where(:not(.keep)) {
    padding-right: calc(126 * 0.1rem);
  }
  .pb210:where(:not(.keep)) {
    padding-bottom: calc(126 * 0.1rem);
  }
  .pl210:where(:not(.keep)) {
    padding-left: calc(126 * 0.1rem);
  }
  .mt210:where(:not(.keep)) {
    margin-top: calc(126 * 0.1rem);
  }
  .mr210:where(:not(.keep)) {
    margin-right: calc(126 * 0.1rem);
  }
  .mb210:where(:not(.keep)) {
    margin-bottom: calc(126 * 0.1rem);
  }
  .ml210:where(:not(.keep)) {
    margin-left: calc(126 * 0.1rem);
  }
}
.pt215 {
  padding-top: calc(215 * 0.1rem);
}

.pr215 {
  padding-right: calc(215 * 0.1rem);
}

.pb215 {
  padding-bottom: calc(215 * 0.1rem);
}

.pl215 {
  padding-left: calc(215 * 0.1rem);
}

.mt215 {
  margin-top: calc(215 * 0.1rem);
}

.mr215 {
  margin-right: calc(215 * 0.1rem);
}

.mb215 {
  margin-bottom: calc(215 * 0.1rem);
}

.ml215 {
  margin-left: calc(215 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt215:where(:not(.keep)) {
    padding-top: calc(172 * 0.1rem);
  }
  .pr215:where(:not(.keep)) {
    padding-right: calc(172 * 0.1rem);
  }
  .pb215:where(:not(.keep)) {
    padding-bottom: calc(172 * 0.1rem);
  }
  .pl215:where(:not(.keep)) {
    padding-left: calc(172 * 0.1rem);
  }
  .mt215:where(:not(.keep)) {
    margin-top: calc(172 * 0.1rem);
  }
  .mr215:where(:not(.keep)) {
    margin-right: calc(172 * 0.1rem);
  }
  .mb215:where(:not(.keep)) {
    margin-bottom: calc(172 * 0.1rem);
  }
  .ml215:where(:not(.keep)) {
    margin-left: calc(172 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt215:where(:not(.keep)) {
    padding-top: calc(129 * 0.1rem);
  }
  .pr215:where(:not(.keep)) {
    padding-right: calc(129 * 0.1rem);
  }
  .pb215:where(:not(.keep)) {
    padding-bottom: calc(129 * 0.1rem);
  }
  .pl215:where(:not(.keep)) {
    padding-left: calc(129 * 0.1rem);
  }
  .mt215:where(:not(.keep)) {
    margin-top: calc(129 * 0.1rem);
  }
  .mr215:where(:not(.keep)) {
    margin-right: calc(129 * 0.1rem);
  }
  .mb215:where(:not(.keep)) {
    margin-bottom: calc(129 * 0.1rem);
  }
  .ml215:where(:not(.keep)) {
    margin-left: calc(129 * 0.1rem);
  }
}
.pt220 {
  padding-top: calc(220 * 0.1rem);
}

.pr220 {
  padding-right: calc(220 * 0.1rem);
}

.pb220 {
  padding-bottom: calc(220 * 0.1rem);
}

.pl220 {
  padding-left: calc(220 * 0.1rem);
}

.mt220 {
  margin-top: calc(220 * 0.1rem);
}

.mr220 {
  margin-right: calc(220 * 0.1rem);
}

.mb220 {
  margin-bottom: calc(220 * 0.1rem);
}

.ml220 {
  margin-left: calc(220 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt220:where(:not(.keep)) {
    padding-top: calc(176 * 0.1rem);
  }
  .pr220:where(:not(.keep)) {
    padding-right: calc(176 * 0.1rem);
  }
  .pb220:where(:not(.keep)) {
    padding-bottom: calc(176 * 0.1rem);
  }
  .pl220:where(:not(.keep)) {
    padding-left: calc(176 * 0.1rem);
  }
  .mt220:where(:not(.keep)) {
    margin-top: calc(176 * 0.1rem);
  }
  .mr220:where(:not(.keep)) {
    margin-right: calc(176 * 0.1rem);
  }
  .mb220:where(:not(.keep)) {
    margin-bottom: calc(176 * 0.1rem);
  }
  .ml220:where(:not(.keep)) {
    margin-left: calc(176 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt220:where(:not(.keep)) {
    padding-top: calc(132 * 0.1rem);
  }
  .pr220:where(:not(.keep)) {
    padding-right: calc(132 * 0.1rem);
  }
  .pb220:where(:not(.keep)) {
    padding-bottom: calc(132 * 0.1rem);
  }
  .pl220:where(:not(.keep)) {
    padding-left: calc(132 * 0.1rem);
  }
  .mt220:where(:not(.keep)) {
    margin-top: calc(132 * 0.1rem);
  }
  .mr220:where(:not(.keep)) {
    margin-right: calc(132 * 0.1rem);
  }
  .mb220:where(:not(.keep)) {
    margin-bottom: calc(132 * 0.1rem);
  }
  .ml220:where(:not(.keep)) {
    margin-left: calc(132 * 0.1rem);
  }
}
.pt225 {
  padding-top: calc(225 * 0.1rem);
}

.pr225 {
  padding-right: calc(225 * 0.1rem);
}

.pb225 {
  padding-bottom: calc(225 * 0.1rem);
}

.pl225 {
  padding-left: calc(225 * 0.1rem);
}

.mt225 {
  margin-top: calc(225 * 0.1rem);
}

.mr225 {
  margin-right: calc(225 * 0.1rem);
}

.mb225 {
  margin-bottom: calc(225 * 0.1rem);
}

.ml225 {
  margin-left: calc(225 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt225:where(:not(.keep)) {
    padding-top: calc(180 * 0.1rem);
  }
  .pr225:where(:not(.keep)) {
    padding-right: calc(180 * 0.1rem);
  }
  .pb225:where(:not(.keep)) {
    padding-bottom: calc(180 * 0.1rem);
  }
  .pl225:where(:not(.keep)) {
    padding-left: calc(180 * 0.1rem);
  }
  .mt225:where(:not(.keep)) {
    margin-top: calc(180 * 0.1rem);
  }
  .mr225:where(:not(.keep)) {
    margin-right: calc(180 * 0.1rem);
  }
  .mb225:where(:not(.keep)) {
    margin-bottom: calc(180 * 0.1rem);
  }
  .ml225:where(:not(.keep)) {
    margin-left: calc(180 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt225:where(:not(.keep)) {
    padding-top: calc(135 * 0.1rem);
  }
  .pr225:where(:not(.keep)) {
    padding-right: calc(135 * 0.1rem);
  }
  .pb225:where(:not(.keep)) {
    padding-bottom: calc(135 * 0.1rem);
  }
  .pl225:where(:not(.keep)) {
    padding-left: calc(135 * 0.1rem);
  }
  .mt225:where(:not(.keep)) {
    margin-top: calc(135 * 0.1rem);
  }
  .mr225:where(:not(.keep)) {
    margin-right: calc(135 * 0.1rem);
  }
  .mb225:where(:not(.keep)) {
    margin-bottom: calc(135 * 0.1rem);
  }
  .ml225:where(:not(.keep)) {
    margin-left: calc(135 * 0.1rem);
  }
}
.pt230 {
  padding-top: calc(230 * 0.1rem);
}

.pr230 {
  padding-right: calc(230 * 0.1rem);
}

.pb230 {
  padding-bottom: calc(230 * 0.1rem);
}

.pl230 {
  padding-left: calc(230 * 0.1rem);
}

.mt230 {
  margin-top: calc(230 * 0.1rem);
}

.mr230 {
  margin-right: calc(230 * 0.1rem);
}

.mb230 {
  margin-bottom: calc(230 * 0.1rem);
}

.ml230 {
  margin-left: calc(230 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt230:where(:not(.keep)) {
    padding-top: calc(184 * 0.1rem);
  }
  .pr230:where(:not(.keep)) {
    padding-right: calc(184 * 0.1rem);
  }
  .pb230:where(:not(.keep)) {
    padding-bottom: calc(184 * 0.1rem);
  }
  .pl230:where(:not(.keep)) {
    padding-left: calc(184 * 0.1rem);
  }
  .mt230:where(:not(.keep)) {
    margin-top: calc(184 * 0.1rem);
  }
  .mr230:where(:not(.keep)) {
    margin-right: calc(184 * 0.1rem);
  }
  .mb230:where(:not(.keep)) {
    margin-bottom: calc(184 * 0.1rem);
  }
  .ml230:where(:not(.keep)) {
    margin-left: calc(184 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt230:where(:not(.keep)) {
    padding-top: calc(138 * 0.1rem);
  }
  .pr230:where(:not(.keep)) {
    padding-right: calc(138 * 0.1rem);
  }
  .pb230:where(:not(.keep)) {
    padding-bottom: calc(138 * 0.1rem);
  }
  .pl230:where(:not(.keep)) {
    padding-left: calc(138 * 0.1rem);
  }
  .mt230:where(:not(.keep)) {
    margin-top: calc(138 * 0.1rem);
  }
  .mr230:where(:not(.keep)) {
    margin-right: calc(138 * 0.1rem);
  }
  .mb230:where(:not(.keep)) {
    margin-bottom: calc(138 * 0.1rem);
  }
  .ml230:where(:not(.keep)) {
    margin-left: calc(138 * 0.1rem);
  }
}
.pt235 {
  padding-top: calc(235 * 0.1rem);
}

.pr235 {
  padding-right: calc(235 * 0.1rem);
}

.pb235 {
  padding-bottom: calc(235 * 0.1rem);
}

.pl235 {
  padding-left: calc(235 * 0.1rem);
}

.mt235 {
  margin-top: calc(235 * 0.1rem);
}

.mr235 {
  margin-right: calc(235 * 0.1rem);
}

.mb235 {
  margin-bottom: calc(235 * 0.1rem);
}

.ml235 {
  margin-left: calc(235 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt235:where(:not(.keep)) {
    padding-top: calc(188 * 0.1rem);
  }
  .pr235:where(:not(.keep)) {
    padding-right: calc(188 * 0.1rem);
  }
  .pb235:where(:not(.keep)) {
    padding-bottom: calc(188 * 0.1rem);
  }
  .pl235:where(:not(.keep)) {
    padding-left: calc(188 * 0.1rem);
  }
  .mt235:where(:not(.keep)) {
    margin-top: calc(188 * 0.1rem);
  }
  .mr235:where(:not(.keep)) {
    margin-right: calc(188 * 0.1rem);
  }
  .mb235:where(:not(.keep)) {
    margin-bottom: calc(188 * 0.1rem);
  }
  .ml235:where(:not(.keep)) {
    margin-left: calc(188 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt235:where(:not(.keep)) {
    padding-top: calc(141 * 0.1rem);
  }
  .pr235:where(:not(.keep)) {
    padding-right: calc(141 * 0.1rem);
  }
  .pb235:where(:not(.keep)) {
    padding-bottom: calc(141 * 0.1rem);
  }
  .pl235:where(:not(.keep)) {
    padding-left: calc(141 * 0.1rem);
  }
  .mt235:where(:not(.keep)) {
    margin-top: calc(141 * 0.1rem);
  }
  .mr235:where(:not(.keep)) {
    margin-right: calc(141 * 0.1rem);
  }
  .mb235:where(:not(.keep)) {
    margin-bottom: calc(141 * 0.1rem);
  }
  .ml235:where(:not(.keep)) {
    margin-left: calc(141 * 0.1rem);
  }
}
.pt240 {
  padding-top: calc(240 * 0.1rem);
}

.pr240 {
  padding-right: calc(240 * 0.1rem);
}

.pb240 {
  padding-bottom: calc(240 * 0.1rem);
}

.pl240 {
  padding-left: calc(240 * 0.1rem);
}

.mt240 {
  margin-top: calc(240 * 0.1rem);
}

.mr240 {
  margin-right: calc(240 * 0.1rem);
}

.mb240 {
  margin-bottom: calc(240 * 0.1rem);
}

.ml240 {
  margin-left: calc(240 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt240:where(:not(.keep)) {
    padding-top: calc(192 * 0.1rem);
  }
  .pr240:where(:not(.keep)) {
    padding-right: calc(192 * 0.1rem);
  }
  .pb240:where(:not(.keep)) {
    padding-bottom: calc(192 * 0.1rem);
  }
  .pl240:where(:not(.keep)) {
    padding-left: calc(192 * 0.1rem);
  }
  .mt240:where(:not(.keep)) {
    margin-top: calc(192 * 0.1rem);
  }
  .mr240:where(:not(.keep)) {
    margin-right: calc(192 * 0.1rem);
  }
  .mb240:where(:not(.keep)) {
    margin-bottom: calc(192 * 0.1rem);
  }
  .ml240:where(:not(.keep)) {
    margin-left: calc(192 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt240:where(:not(.keep)) {
    padding-top: calc(144 * 0.1rem);
  }
  .pr240:where(:not(.keep)) {
    padding-right: calc(144 * 0.1rem);
  }
  .pb240:where(:not(.keep)) {
    padding-bottom: calc(144 * 0.1rem);
  }
  .pl240:where(:not(.keep)) {
    padding-left: calc(144 * 0.1rem);
  }
  .mt240:where(:not(.keep)) {
    margin-top: calc(144 * 0.1rem);
  }
  .mr240:where(:not(.keep)) {
    margin-right: calc(144 * 0.1rem);
  }
  .mb240:where(:not(.keep)) {
    margin-bottom: calc(144 * 0.1rem);
  }
  .ml240:where(:not(.keep)) {
    margin-left: calc(144 * 0.1rem);
  }
}
.pt245 {
  padding-top: calc(245 * 0.1rem);
}

.pr245 {
  padding-right: calc(245 * 0.1rem);
}

.pb245 {
  padding-bottom: calc(245 * 0.1rem);
}

.pl245 {
  padding-left: calc(245 * 0.1rem);
}

.mt245 {
  margin-top: calc(245 * 0.1rem);
}

.mr245 {
  margin-right: calc(245 * 0.1rem);
}

.mb245 {
  margin-bottom: calc(245 * 0.1rem);
}

.ml245 {
  margin-left: calc(245 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt245:where(:not(.keep)) {
    padding-top: calc(196 * 0.1rem);
  }
  .pr245:where(:not(.keep)) {
    padding-right: calc(196 * 0.1rem);
  }
  .pb245:where(:not(.keep)) {
    padding-bottom: calc(196 * 0.1rem);
  }
  .pl245:where(:not(.keep)) {
    padding-left: calc(196 * 0.1rem);
  }
  .mt245:where(:not(.keep)) {
    margin-top: calc(196 * 0.1rem);
  }
  .mr245:where(:not(.keep)) {
    margin-right: calc(196 * 0.1rem);
  }
  .mb245:where(:not(.keep)) {
    margin-bottom: calc(196 * 0.1rem);
  }
  .ml245:where(:not(.keep)) {
    margin-left: calc(196 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt245:where(:not(.keep)) {
    padding-top: calc(147 * 0.1rem);
  }
  .pr245:where(:not(.keep)) {
    padding-right: calc(147 * 0.1rem);
  }
  .pb245:where(:not(.keep)) {
    padding-bottom: calc(147 * 0.1rem);
  }
  .pl245:where(:not(.keep)) {
    padding-left: calc(147 * 0.1rem);
  }
  .mt245:where(:not(.keep)) {
    margin-top: calc(147 * 0.1rem);
  }
  .mr245:where(:not(.keep)) {
    margin-right: calc(147 * 0.1rem);
  }
  .mb245:where(:not(.keep)) {
    margin-bottom: calc(147 * 0.1rem);
  }
  .ml245:where(:not(.keep)) {
    margin-left: calc(147 * 0.1rem);
  }
}
.pt250 {
  padding-top: calc(250 * 0.1rem);
}

.pr250 {
  padding-right: calc(250 * 0.1rem);
}

.pb250 {
  padding-bottom: calc(250 * 0.1rem);
}

.pl250 {
  padding-left: calc(250 * 0.1rem);
}

.mt250 {
  margin-top: calc(250 * 0.1rem);
}

.mr250 {
  margin-right: calc(250 * 0.1rem);
}

.mb250 {
  margin-bottom: calc(250 * 0.1rem);
}

.ml250 {
  margin-left: calc(250 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt250:where(:not(.keep)) {
    padding-top: calc(200 * 0.1rem);
  }
  .pr250:where(:not(.keep)) {
    padding-right: calc(200 * 0.1rem);
  }
  .pb250:where(:not(.keep)) {
    padding-bottom: calc(200 * 0.1rem);
  }
  .pl250:where(:not(.keep)) {
    padding-left: calc(200 * 0.1rem);
  }
  .mt250:where(:not(.keep)) {
    margin-top: calc(200 * 0.1rem);
  }
  .mr250:where(:not(.keep)) {
    margin-right: calc(200 * 0.1rem);
  }
  .mb250:where(:not(.keep)) {
    margin-bottom: calc(200 * 0.1rem);
  }
  .ml250:where(:not(.keep)) {
    margin-left: calc(200 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt250:where(:not(.keep)) {
    padding-top: calc(150 * 0.1rem);
  }
  .pr250:where(:not(.keep)) {
    padding-right: calc(150 * 0.1rem);
  }
  .pb250:where(:not(.keep)) {
    padding-bottom: calc(150 * 0.1rem);
  }
  .pl250:where(:not(.keep)) {
    padding-left: calc(150 * 0.1rem);
  }
  .mt250:where(:not(.keep)) {
    margin-top: calc(150 * 0.1rem);
  }
  .mr250:where(:not(.keep)) {
    margin-right: calc(150 * 0.1rem);
  }
  .mb250:where(:not(.keep)) {
    margin-bottom: calc(150 * 0.1rem);
  }
  .ml250:where(:not(.keep)) {
    margin-left: calc(150 * 0.1rem);
  }
}
.pt255 {
  padding-top: calc(255 * 0.1rem);
}

.pr255 {
  padding-right: calc(255 * 0.1rem);
}

.pb255 {
  padding-bottom: calc(255 * 0.1rem);
}

.pl255 {
  padding-left: calc(255 * 0.1rem);
}

.mt255 {
  margin-top: calc(255 * 0.1rem);
}

.mr255 {
  margin-right: calc(255 * 0.1rem);
}

.mb255 {
  margin-bottom: calc(255 * 0.1rem);
}

.ml255 {
  margin-left: calc(255 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt255:where(:not(.keep)) {
    padding-top: calc(204 * 0.1rem);
  }
  .pr255:where(:not(.keep)) {
    padding-right: calc(204 * 0.1rem);
  }
  .pb255:where(:not(.keep)) {
    padding-bottom: calc(204 * 0.1rem);
  }
  .pl255:where(:not(.keep)) {
    padding-left: calc(204 * 0.1rem);
  }
  .mt255:where(:not(.keep)) {
    margin-top: calc(204 * 0.1rem);
  }
  .mr255:where(:not(.keep)) {
    margin-right: calc(204 * 0.1rem);
  }
  .mb255:where(:not(.keep)) {
    margin-bottom: calc(204 * 0.1rem);
  }
  .ml255:where(:not(.keep)) {
    margin-left: calc(204 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt255:where(:not(.keep)) {
    padding-top: calc(153 * 0.1rem);
  }
  .pr255:where(:not(.keep)) {
    padding-right: calc(153 * 0.1rem);
  }
  .pb255:where(:not(.keep)) {
    padding-bottom: calc(153 * 0.1rem);
  }
  .pl255:where(:not(.keep)) {
    padding-left: calc(153 * 0.1rem);
  }
  .mt255:where(:not(.keep)) {
    margin-top: calc(153 * 0.1rem);
  }
  .mr255:where(:not(.keep)) {
    margin-right: calc(153 * 0.1rem);
  }
  .mb255:where(:not(.keep)) {
    margin-bottom: calc(153 * 0.1rem);
  }
  .ml255:where(:not(.keep)) {
    margin-left: calc(153 * 0.1rem);
  }
}
.pt260 {
  padding-top: calc(260 * 0.1rem);
}

.pr260 {
  padding-right: calc(260 * 0.1rem);
}

.pb260 {
  padding-bottom: calc(260 * 0.1rem);
}

.pl260 {
  padding-left: calc(260 * 0.1rem);
}

.mt260 {
  margin-top: calc(260 * 0.1rem);
}

.mr260 {
  margin-right: calc(260 * 0.1rem);
}

.mb260 {
  margin-bottom: calc(260 * 0.1rem);
}

.ml260 {
  margin-left: calc(260 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt260:where(:not(.keep)) {
    padding-top: calc(208 * 0.1rem);
  }
  .pr260:where(:not(.keep)) {
    padding-right: calc(208 * 0.1rem);
  }
  .pb260:where(:not(.keep)) {
    padding-bottom: calc(208 * 0.1rem);
  }
  .pl260:where(:not(.keep)) {
    padding-left: calc(208 * 0.1rem);
  }
  .mt260:where(:not(.keep)) {
    margin-top: calc(208 * 0.1rem);
  }
  .mr260:where(:not(.keep)) {
    margin-right: calc(208 * 0.1rem);
  }
  .mb260:where(:not(.keep)) {
    margin-bottom: calc(208 * 0.1rem);
  }
  .ml260:where(:not(.keep)) {
    margin-left: calc(208 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt260:where(:not(.keep)) {
    padding-top: calc(156 * 0.1rem);
  }
  .pr260:where(:not(.keep)) {
    padding-right: calc(156 * 0.1rem);
  }
  .pb260:where(:not(.keep)) {
    padding-bottom: calc(156 * 0.1rem);
  }
  .pl260:where(:not(.keep)) {
    padding-left: calc(156 * 0.1rem);
  }
  .mt260:where(:not(.keep)) {
    margin-top: calc(156 * 0.1rem);
  }
  .mr260:where(:not(.keep)) {
    margin-right: calc(156 * 0.1rem);
  }
  .mb260:where(:not(.keep)) {
    margin-bottom: calc(156 * 0.1rem);
  }
  .ml260:where(:not(.keep)) {
    margin-left: calc(156 * 0.1rem);
  }
}
.pt265 {
  padding-top: calc(265 * 0.1rem);
}

.pr265 {
  padding-right: calc(265 * 0.1rem);
}

.pb265 {
  padding-bottom: calc(265 * 0.1rem);
}

.pl265 {
  padding-left: calc(265 * 0.1rem);
}

.mt265 {
  margin-top: calc(265 * 0.1rem);
}

.mr265 {
  margin-right: calc(265 * 0.1rem);
}

.mb265 {
  margin-bottom: calc(265 * 0.1rem);
}

.ml265 {
  margin-left: calc(265 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt265:where(:not(.keep)) {
    padding-top: calc(212 * 0.1rem);
  }
  .pr265:where(:not(.keep)) {
    padding-right: calc(212 * 0.1rem);
  }
  .pb265:where(:not(.keep)) {
    padding-bottom: calc(212 * 0.1rem);
  }
  .pl265:where(:not(.keep)) {
    padding-left: calc(212 * 0.1rem);
  }
  .mt265:where(:not(.keep)) {
    margin-top: calc(212 * 0.1rem);
  }
  .mr265:where(:not(.keep)) {
    margin-right: calc(212 * 0.1rem);
  }
  .mb265:where(:not(.keep)) {
    margin-bottom: calc(212 * 0.1rem);
  }
  .ml265:where(:not(.keep)) {
    margin-left: calc(212 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt265:where(:not(.keep)) {
    padding-top: calc(159 * 0.1rem);
  }
  .pr265:where(:not(.keep)) {
    padding-right: calc(159 * 0.1rem);
  }
  .pb265:where(:not(.keep)) {
    padding-bottom: calc(159 * 0.1rem);
  }
  .pl265:where(:not(.keep)) {
    padding-left: calc(159 * 0.1rem);
  }
  .mt265:where(:not(.keep)) {
    margin-top: calc(159 * 0.1rem);
  }
  .mr265:where(:not(.keep)) {
    margin-right: calc(159 * 0.1rem);
  }
  .mb265:where(:not(.keep)) {
    margin-bottom: calc(159 * 0.1rem);
  }
  .ml265:where(:not(.keep)) {
    margin-left: calc(159 * 0.1rem);
  }
}
.pt270 {
  padding-top: calc(270 * 0.1rem);
}

.pr270 {
  padding-right: calc(270 * 0.1rem);
}

.pb270 {
  padding-bottom: calc(270 * 0.1rem);
}

.pl270 {
  padding-left: calc(270 * 0.1rem);
}

.mt270 {
  margin-top: calc(270 * 0.1rem);
}

.mr270 {
  margin-right: calc(270 * 0.1rem);
}

.mb270 {
  margin-bottom: calc(270 * 0.1rem);
}

.ml270 {
  margin-left: calc(270 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt270:where(:not(.keep)) {
    padding-top: calc(216 * 0.1rem);
  }
  .pr270:where(:not(.keep)) {
    padding-right: calc(216 * 0.1rem);
  }
  .pb270:where(:not(.keep)) {
    padding-bottom: calc(216 * 0.1rem);
  }
  .pl270:where(:not(.keep)) {
    padding-left: calc(216 * 0.1rem);
  }
  .mt270:where(:not(.keep)) {
    margin-top: calc(216 * 0.1rem);
  }
  .mr270:where(:not(.keep)) {
    margin-right: calc(216 * 0.1rem);
  }
  .mb270:where(:not(.keep)) {
    margin-bottom: calc(216 * 0.1rem);
  }
  .ml270:where(:not(.keep)) {
    margin-left: calc(216 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt270:where(:not(.keep)) {
    padding-top: calc(162 * 0.1rem);
  }
  .pr270:where(:not(.keep)) {
    padding-right: calc(162 * 0.1rem);
  }
  .pb270:where(:not(.keep)) {
    padding-bottom: calc(162 * 0.1rem);
  }
  .pl270:where(:not(.keep)) {
    padding-left: calc(162 * 0.1rem);
  }
  .mt270:where(:not(.keep)) {
    margin-top: calc(162 * 0.1rem);
  }
  .mr270:where(:not(.keep)) {
    margin-right: calc(162 * 0.1rem);
  }
  .mb270:where(:not(.keep)) {
    margin-bottom: calc(162 * 0.1rem);
  }
  .ml270:where(:not(.keep)) {
    margin-left: calc(162 * 0.1rem);
  }
}
.pt275 {
  padding-top: calc(275 * 0.1rem);
}

.pr275 {
  padding-right: calc(275 * 0.1rem);
}

.pb275 {
  padding-bottom: calc(275 * 0.1rem);
}

.pl275 {
  padding-left: calc(275 * 0.1rem);
}

.mt275 {
  margin-top: calc(275 * 0.1rem);
}

.mr275 {
  margin-right: calc(275 * 0.1rem);
}

.mb275 {
  margin-bottom: calc(275 * 0.1rem);
}

.ml275 {
  margin-left: calc(275 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt275:where(:not(.keep)) {
    padding-top: calc(220 * 0.1rem);
  }
  .pr275:where(:not(.keep)) {
    padding-right: calc(220 * 0.1rem);
  }
  .pb275:where(:not(.keep)) {
    padding-bottom: calc(220 * 0.1rem);
  }
  .pl275:where(:not(.keep)) {
    padding-left: calc(220 * 0.1rem);
  }
  .mt275:where(:not(.keep)) {
    margin-top: calc(220 * 0.1rem);
  }
  .mr275:where(:not(.keep)) {
    margin-right: calc(220 * 0.1rem);
  }
  .mb275:where(:not(.keep)) {
    margin-bottom: calc(220 * 0.1rem);
  }
  .ml275:where(:not(.keep)) {
    margin-left: calc(220 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt275:where(:not(.keep)) {
    padding-top: calc(165 * 0.1rem);
  }
  .pr275:where(:not(.keep)) {
    padding-right: calc(165 * 0.1rem);
  }
  .pb275:where(:not(.keep)) {
    padding-bottom: calc(165 * 0.1rem);
  }
  .pl275:where(:not(.keep)) {
    padding-left: calc(165 * 0.1rem);
  }
  .mt275:where(:not(.keep)) {
    margin-top: calc(165 * 0.1rem);
  }
  .mr275:where(:not(.keep)) {
    margin-right: calc(165 * 0.1rem);
  }
  .mb275:where(:not(.keep)) {
    margin-bottom: calc(165 * 0.1rem);
  }
  .ml275:where(:not(.keep)) {
    margin-left: calc(165 * 0.1rem);
  }
}
.pt280 {
  padding-top: calc(280 * 0.1rem);
}

.pr280 {
  padding-right: calc(280 * 0.1rem);
}

.pb280 {
  padding-bottom: calc(280 * 0.1rem);
}

.pl280 {
  padding-left: calc(280 * 0.1rem);
}

.mt280 {
  margin-top: calc(280 * 0.1rem);
}

.mr280 {
  margin-right: calc(280 * 0.1rem);
}

.mb280 {
  margin-bottom: calc(280 * 0.1rem);
}

.ml280 {
  margin-left: calc(280 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt280:where(:not(.keep)) {
    padding-top: calc(224 * 0.1rem);
  }
  .pr280:where(:not(.keep)) {
    padding-right: calc(224 * 0.1rem);
  }
  .pb280:where(:not(.keep)) {
    padding-bottom: calc(224 * 0.1rem);
  }
  .pl280:where(:not(.keep)) {
    padding-left: calc(224 * 0.1rem);
  }
  .mt280:where(:not(.keep)) {
    margin-top: calc(224 * 0.1rem);
  }
  .mr280:where(:not(.keep)) {
    margin-right: calc(224 * 0.1rem);
  }
  .mb280:where(:not(.keep)) {
    margin-bottom: calc(224 * 0.1rem);
  }
  .ml280:where(:not(.keep)) {
    margin-left: calc(224 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt280:where(:not(.keep)) {
    padding-top: calc(168 * 0.1rem);
  }
  .pr280:where(:not(.keep)) {
    padding-right: calc(168 * 0.1rem);
  }
  .pb280:where(:not(.keep)) {
    padding-bottom: calc(168 * 0.1rem);
  }
  .pl280:where(:not(.keep)) {
    padding-left: calc(168 * 0.1rem);
  }
  .mt280:where(:not(.keep)) {
    margin-top: calc(168 * 0.1rem);
  }
  .mr280:where(:not(.keep)) {
    margin-right: calc(168 * 0.1rem);
  }
  .mb280:where(:not(.keep)) {
    margin-bottom: calc(168 * 0.1rem);
  }
  .ml280:where(:not(.keep)) {
    margin-left: calc(168 * 0.1rem);
  }
}
.pt285 {
  padding-top: calc(285 * 0.1rem);
}

.pr285 {
  padding-right: calc(285 * 0.1rem);
}

.pb285 {
  padding-bottom: calc(285 * 0.1rem);
}

.pl285 {
  padding-left: calc(285 * 0.1rem);
}

.mt285 {
  margin-top: calc(285 * 0.1rem);
}

.mr285 {
  margin-right: calc(285 * 0.1rem);
}

.mb285 {
  margin-bottom: calc(285 * 0.1rem);
}

.ml285 {
  margin-left: calc(285 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt285:where(:not(.keep)) {
    padding-top: calc(228 * 0.1rem);
  }
  .pr285:where(:not(.keep)) {
    padding-right: calc(228 * 0.1rem);
  }
  .pb285:where(:not(.keep)) {
    padding-bottom: calc(228 * 0.1rem);
  }
  .pl285:where(:not(.keep)) {
    padding-left: calc(228 * 0.1rem);
  }
  .mt285:where(:not(.keep)) {
    margin-top: calc(228 * 0.1rem);
  }
  .mr285:where(:not(.keep)) {
    margin-right: calc(228 * 0.1rem);
  }
  .mb285:where(:not(.keep)) {
    margin-bottom: calc(228 * 0.1rem);
  }
  .ml285:where(:not(.keep)) {
    margin-left: calc(228 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt285:where(:not(.keep)) {
    padding-top: calc(171 * 0.1rem);
  }
  .pr285:where(:not(.keep)) {
    padding-right: calc(171 * 0.1rem);
  }
  .pb285:where(:not(.keep)) {
    padding-bottom: calc(171 * 0.1rem);
  }
  .pl285:where(:not(.keep)) {
    padding-left: calc(171 * 0.1rem);
  }
  .mt285:where(:not(.keep)) {
    margin-top: calc(171 * 0.1rem);
  }
  .mr285:where(:not(.keep)) {
    margin-right: calc(171 * 0.1rem);
  }
  .mb285:where(:not(.keep)) {
    margin-bottom: calc(171 * 0.1rem);
  }
  .ml285:where(:not(.keep)) {
    margin-left: calc(171 * 0.1rem);
  }
}
.pt290 {
  padding-top: calc(290 * 0.1rem);
}

.pr290 {
  padding-right: calc(290 * 0.1rem);
}

.pb290 {
  padding-bottom: calc(290 * 0.1rem);
}

.pl290 {
  padding-left: calc(290 * 0.1rem);
}

.mt290 {
  margin-top: calc(290 * 0.1rem);
}

.mr290 {
  margin-right: calc(290 * 0.1rem);
}

.mb290 {
  margin-bottom: calc(290 * 0.1rem);
}

.ml290 {
  margin-left: calc(290 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt290:where(:not(.keep)) {
    padding-top: calc(232 * 0.1rem);
  }
  .pr290:where(:not(.keep)) {
    padding-right: calc(232 * 0.1rem);
  }
  .pb290:where(:not(.keep)) {
    padding-bottom: calc(232 * 0.1rem);
  }
  .pl290:where(:not(.keep)) {
    padding-left: calc(232 * 0.1rem);
  }
  .mt290:where(:not(.keep)) {
    margin-top: calc(232 * 0.1rem);
  }
  .mr290:where(:not(.keep)) {
    margin-right: calc(232 * 0.1rem);
  }
  .mb290:where(:not(.keep)) {
    margin-bottom: calc(232 * 0.1rem);
  }
  .ml290:where(:not(.keep)) {
    margin-left: calc(232 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt290:where(:not(.keep)) {
    padding-top: calc(174 * 0.1rem);
  }
  .pr290:where(:not(.keep)) {
    padding-right: calc(174 * 0.1rem);
  }
  .pb290:where(:not(.keep)) {
    padding-bottom: calc(174 * 0.1rem);
  }
  .pl290:where(:not(.keep)) {
    padding-left: calc(174 * 0.1rem);
  }
  .mt290:where(:not(.keep)) {
    margin-top: calc(174 * 0.1rem);
  }
  .mr290:where(:not(.keep)) {
    margin-right: calc(174 * 0.1rem);
  }
  .mb290:where(:not(.keep)) {
    margin-bottom: calc(174 * 0.1rem);
  }
  .ml290:where(:not(.keep)) {
    margin-left: calc(174 * 0.1rem);
  }
}
.pt295 {
  padding-top: calc(295 * 0.1rem);
}

.pr295 {
  padding-right: calc(295 * 0.1rem);
}

.pb295 {
  padding-bottom: calc(295 * 0.1rem);
}

.pl295 {
  padding-left: calc(295 * 0.1rem);
}

.mt295 {
  margin-top: calc(295 * 0.1rem);
}

.mr295 {
  margin-right: calc(295 * 0.1rem);
}

.mb295 {
  margin-bottom: calc(295 * 0.1rem);
}

.ml295 {
  margin-left: calc(295 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt295:where(:not(.keep)) {
    padding-top: calc(236 * 0.1rem);
  }
  .pr295:where(:not(.keep)) {
    padding-right: calc(236 * 0.1rem);
  }
  .pb295:where(:not(.keep)) {
    padding-bottom: calc(236 * 0.1rem);
  }
  .pl295:where(:not(.keep)) {
    padding-left: calc(236 * 0.1rem);
  }
  .mt295:where(:not(.keep)) {
    margin-top: calc(236 * 0.1rem);
  }
  .mr295:where(:not(.keep)) {
    margin-right: calc(236 * 0.1rem);
  }
  .mb295:where(:not(.keep)) {
    margin-bottom: calc(236 * 0.1rem);
  }
  .ml295:where(:not(.keep)) {
    margin-left: calc(236 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt295:where(:not(.keep)) {
    padding-top: calc(177 * 0.1rem);
  }
  .pr295:where(:not(.keep)) {
    padding-right: calc(177 * 0.1rem);
  }
  .pb295:where(:not(.keep)) {
    padding-bottom: calc(177 * 0.1rem);
  }
  .pl295:where(:not(.keep)) {
    padding-left: calc(177 * 0.1rem);
  }
  .mt295:where(:not(.keep)) {
    margin-top: calc(177 * 0.1rem);
  }
  .mr295:where(:not(.keep)) {
    margin-right: calc(177 * 0.1rem);
  }
  .mb295:where(:not(.keep)) {
    margin-bottom: calc(177 * 0.1rem);
  }
  .ml295:where(:not(.keep)) {
    margin-left: calc(177 * 0.1rem);
  }
}
.pt300 {
  padding-top: calc(300 * 0.1rem);
}

.pr300 {
  padding-right: calc(300 * 0.1rem);
}

.pb300 {
  padding-bottom: calc(300 * 0.1rem);
}

.pl300 {
  padding-left: calc(300 * 0.1rem);
}

.mt300 {
  margin-top: calc(300 * 0.1rem);
}

.mr300 {
  margin-right: calc(300 * 0.1rem);
}

.mb300 {
  margin-bottom: calc(300 * 0.1rem);
}

.ml300 {
  margin-left: calc(300 * 0.1rem);
}

@media screen and (max-width: 800px) {
  .pt300:where(:not(.keep)) {
    padding-top: calc(240 * 0.1rem);
  }
  .pr300:where(:not(.keep)) {
    padding-right: calc(240 * 0.1rem);
  }
  .pb300:where(:not(.keep)) {
    padding-bottom: calc(240 * 0.1rem);
  }
  .pl300:where(:not(.keep)) {
    padding-left: calc(240 * 0.1rem);
  }
  .mt300:where(:not(.keep)) {
    margin-top: calc(240 * 0.1rem);
  }
  .mr300:where(:not(.keep)) {
    margin-right: calc(240 * 0.1rem);
  }
  .mb300:where(:not(.keep)) {
    margin-bottom: calc(240 * 0.1rem);
  }
  .ml300:where(:not(.keep)) {
    margin-left: calc(240 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .pt300:where(:not(.keep)) {
    padding-top: calc(180 * 0.1rem);
  }
  .pr300:where(:not(.keep)) {
    padding-right: calc(180 * 0.1rem);
  }
  .pb300:where(:not(.keep)) {
    padding-bottom: calc(180 * 0.1rem);
  }
  .pl300:where(:not(.keep)) {
    padding-left: calc(180 * 0.1rem);
  }
  .mt300:where(:not(.keep)) {
    margin-top: calc(180 * 0.1rem);
  }
  .mr300:where(:not(.keep)) {
    margin-right: calc(180 * 0.1rem);
  }
  .mb300:where(:not(.keep)) {
    margin-bottom: calc(180 * 0.1rem);
  }
  .ml300:where(:not(.keep)) {
    margin-left: calc(180 * 0.1rem);
  }
}
/* 画像サイズ調整 */
.fit img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.fit1to1,
.fit3to2,
.fit16to9,
.fityt {
  width: 100%;
  position: relative;
}

.fit1to1::before,
.fit3to2::before,
.fit16to9::before,
.fityt:before {
  content: "";
  display: block;
}

.fit1to1::before {
  padding-top: 100%;
}

.fit3to2::before {
  padding-top: 66.666667%;
}

.fit16to9::before, .fityt::before {
  padding-top: 56.25%;
}

.fit1to1 img,
.fit3to2 img,
.fit16to9 img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.fityt iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* scrollanime */
:where(.scrollanime):not([data-anime]),
.scrollanime2,
.scrollanime3 {
  opacity: 0;
  pointer-events: none;
}

:where(.scrollanime):not([data-anime]) {
  -webkit-filter: blur(0);
          filter: blur(0);
}

.fadein {
  -webkit-animation: fadein 1s forwards;
          animation: fadein 1s forwards;
  visibility: hidden;
  -webkit-filter: blur(0);
          filter: blur(0);
}

@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0) scale(1);
            transform: translate(0) scale(1);
    visibility: visible;
    pointer-events: auto;
  }
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0) scale(1);
            transform: translate(0) scale(1);
    visibility: visible;
    pointer-events: auto;
  }
}
.toup {
  -webkit-transform: translateY(3rem);
          transform: translateY(3rem);
}

.todown {
  -webkit-transform: translateY(-3rem);
          transform: translateY(-3rem);
}

.toright {
  -webkit-transform: translate(-3rem);
          transform: translate(-3rem);
}

.toleft {
  -webkit-transform: translateX(3rem);
          transform: translateX(3rem);
}

.expansion {
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
}

.shrink {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

/* display */
.allNone, .pcNone, .pcNone_i, .pcNone_ib, .pcNone2, .pcNone2_i, .pcNone2_ib, .pcNone3, .pcNone3_i, .pcNone3_ib {
  display: none;
}

@media screen and (max-width: 1000px) {
  .spNone {
    display: none;
  }
  .pcNone {
    display: block;
  }
  .pcNone_i {
    display: inline;
  }
  .pcNone_ib {
    display: inline-block;
  }
}
@media screen and (max-width: 800px) {
  .spNone2 {
    display: none;
  }
  .pcNone2 {
    display: block;
  }
  .pcNone2_i {
    display: inline;
  }
  .pcNone2_ib {
    display: inline-block;
  }
}
@media screen and (max-width: 560px) {
  .spNone3 {
    display: none;
  }
  .pcNone3 {
    display: block;
  }
  .pcNone3_i {
    display: inline;
  }
  .pcNone3_ib {
    display: inline-block;
  }
}
.db {
  display: block;
}

.di {
  display: inline;
}

.dib {
  display: inline-block;
}

/* hover */
.hov {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

@media (any-hover: hover) {
  .hov:hover {
    opacity: 0.7;
  }
}
/* border-radius */
.brad5 {
  border-radius: calc(5 * 0.1rem);
}
@media screen and (max-width: 800px) {
  .brad5 {
    border-radius: calc(4 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .brad5 {
    border-radius: calc(3 * 0.1rem);
  }
}

.brad10 {
  border-radius: calc(10 * 0.1rem);
}
@media screen and (max-width: 800px) {
  .brad10 {
    border-radius: calc(8 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .brad10 {
    border-radius: calc(6 * 0.1rem);
  }
}

.brad15 {
  border-radius: calc(15 * 0.1rem);
}
@media screen and (max-width: 800px) {
  .brad15 {
    border-radius: calc(12 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .brad15 {
    border-radius: calc(9 * 0.1rem);
  }
}

.brad20 {
  border-radius: calc(20 * 0.1rem);
}
@media screen and (max-width: 800px) {
  .brad20 {
    border-radius: calc(16 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .brad20 {
    border-radius: calc(12 * 0.1rem);
  }
}

.brad25 {
  border-radius: calc(25 * 0.1rem);
}
@media screen and (max-width: 800px) {
  .brad25 {
    border-radius: calc(20 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .brad25 {
    border-radius: calc(15 * 0.1rem);
  }
}

.brad30 {
  border-radius: calc(30 * 0.1rem);
}
@media screen and (max-width: 800px) {
  .brad30 {
    border-radius: calc(24 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .brad30 {
    border-radius: calc(18 * 0.1rem);
  }
}

.brad35 {
  border-radius: calc(35 * 0.1rem);
}
@media screen and (max-width: 800px) {
  .brad35 {
    border-radius: calc(28 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .brad35 {
    border-radius: calc(21 * 0.1rem);
  }
}

.brad40 {
  border-radius: calc(40 * 0.1rem);
}
@media screen and (max-width: 800px) {
  .brad40 {
    border-radius: calc(32 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .brad40 {
    border-radius: calc(24 * 0.1rem);
  }
}

.brad45 {
  border-radius: calc(45 * 0.1rem);
}
@media screen and (max-width: 800px) {
  .brad45 {
    border-radius: calc(36 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .brad45 {
    border-radius: calc(27 * 0.1rem);
  }
}

.brad50 {
  border-radius: calc(50 * 0.1rem);
}
@media screen and (max-width: 800px) {
  .brad50 {
    border-radius: calc(40 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .brad50 {
    border-radius: calc(30 * 0.1rem);
  }
}

.brad55 {
  border-radius: calc(55 * 0.1rem);
}
@media screen and (max-width: 800px) {
  .brad55 {
    border-radius: calc(44 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .brad55 {
    border-radius: calc(33 * 0.1rem);
  }
}

.brad60 {
  border-radius: calc(60 * 0.1rem);
}
@media screen and (max-width: 800px) {
  .brad60 {
    border-radius: calc(48 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .brad60 {
    border-radius: calc(36 * 0.1rem);
  }
}

.brad65 {
  border-radius: calc(65 * 0.1rem);
}
@media screen and (max-width: 800px) {
  .brad65 {
    border-radius: calc(52 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .brad65 {
    border-radius: calc(39 * 0.1rem);
  }
}

.brad70 {
  border-radius: calc(70 * 0.1rem);
}
@media screen and (max-width: 800px) {
  .brad70 {
    border-radius: calc(56 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .brad70 {
    border-radius: calc(42 * 0.1rem);
  }
}

.brad75 {
  border-radius: calc(75 * 0.1rem);
}
@media screen and (max-width: 800px) {
  .brad75 {
    border-radius: calc(60 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .brad75 {
    border-radius: calc(45 * 0.1rem);
  }
}

.brad80 {
  border-radius: calc(80 * 0.1rem);
}
@media screen and (max-width: 800px) {
  .brad80 {
    border-radius: calc(64 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .brad80 {
    border-radius: calc(48 * 0.1rem);
  }
}

.brad85 {
  border-radius: calc(85 * 0.1rem);
}
@media screen and (max-width: 800px) {
  .brad85 {
    border-radius: calc(68 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .brad85 {
    border-radius: calc(51 * 0.1rem);
  }
}

.brad90 {
  border-radius: calc(90 * 0.1rem);
}
@media screen and (max-width: 800px) {
  .brad90 {
    border-radius: calc(72 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .brad90 {
    border-radius: calc(54 * 0.1rem);
  }
}

.brad95 {
  border-radius: calc(95 * 0.1rem);
}
@media screen and (max-width: 800px) {
  .brad95 {
    border-radius: calc(76 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .brad95 {
    border-radius: calc(57 * 0.1rem);
  }
}

.brad100 {
  border-radius: calc(100 * 0.1rem);
}
@media screen and (max-width: 800px) {
  .brad100 {
    border-radius: calc(80 * 0.1rem);
  }
}
@media screen and (max-width: 560px) {
  .brad100 {
    border-radius: calc(60 * 0.1rem);
  }
}

.bradh {
  border-radius: 50%;
}

/* othrs */
.por {
  position: relative;
}

.full {
  width: 100%;
  height: 100%;
}

/* 印刷 */
@media print {
  .scrollanime,
  .scrollanime2,
  .scrollanime3 {
    opacity: 1 !important;
    -webkit-transform: translate(0) !important;
            transform: translate(0) !important;
  }
  .gotop-btn {
    display: none !important;
  }
}
/* --- 基本設定 --- */
:root {
  --main-green: #4a6f56; /* 画像に近い緑色 */
  --text-color: #333;
  --bg-gray: #f9f9f9;
  --border-color: #ddd;
}

*, *::before, *::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 62.5%;
}
@media screen and (min-width: 1920px) {
  html {
    font-size: calc(62.5% + 0.005 * (100vw - 1920px));
  }
}
@media screen and (max-width: 360px) {
  html {
    font-size: 2.5vw;
  }
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  margin: 0;
  color: var(--text-color);
  line-height: 1.8;
  color: #333;
  overflow-x: hidden; /* 横方向のはみ出しを強制的にカット */
  width: 100%;
  font-size: 1.6rem;
}

main {
  position: relative;
  z-index: 0;
}

/* --- レイアウト共通 --- */
.top_container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- ヘッダー --- */
header {
  /* 1. 全体を左右に分ける */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; /* ロゴを左、その他を右端へ */
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; /* 上下中央揃え */
  padding: 1rem 5rem; /* 余白（上下1.0rem, 左右5.0rem） */
  background: #fff;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  z-index: 9999;
}

/* --- ロゴエリア --- */
.header_logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 0.4rem;
}

.header_logo img {
  /* ロゴのサイズ調整（必要に応じて変更OK） */
  width: clamp(28rem, 28rem + 12 * (100vw - 100rem) / 40, 40rem);
  height: auto;
}

/* --- 右側のカタマリ（情報エリア ＋ ボタンエリア） --- */
.header_right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; /* 横並びにする */
  gap: 3rem; /* 情報とボタンの間の隙間 */
}

/* A. 情報エリア（電話番号とリンク） */
.header_info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; /* ★ここが重要：縦並びにする */
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end; /* ★ここが重要：右端に揃える */
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* 電話番号 */
.header_tel {
  font-family: "Oswald", sans-serif;
  font-size: 3.2rem; /* 大きく */
  font-weight: 700;
  /*font-style: italic;*/
  color: #333;
  line-height: 1; /* 行間を詰める */
  margin-bottom: 0.5rem; /* 下のリンクとの隙間 */
  white-space: nowrap; /* 改行させない */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
}

.header_tel_icon img {
  width: 1.3rem; /* アイコンサイズ */
  margin-right: 0.8rem;
  margin-top: 0.3rem; /* 位置微調整 */
}

/* リンク（弊社の特徴 / ...） */
.header_links {
  font-size: 1.6rem;
  font-weight: 600;
  color: #333;
  letter-spacing: 0.05em;
  white-space: nowrap; /* 改行させない */
}

.header_links a {
  text-decoration: none;
  color: #333;
  margin: 0 1rem;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

.header_links a:hover {
  color: var(--main-green);
}

/* B. ボタンエリア（横並び） */
.header_btn_group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0; /* ボタン同士はくっつける（または少し離す） */
}

/* 各ボタン共通 */
.header_btn_group a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-decoration: none;
  color: white;
  height: 6rem; /* 高さ */
  padding: 0 3.5rem; /* 横幅（文字数に合わせて調整） */
  font-weight: bold;
  font-size: 2rem;
  font-weight: 600;
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg); /* 斜めにする */
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.header_btn_group a:hover {
  opacity: 0.9;
}

/* ボタンの中身（文字とアイコン）の傾きを戻す */
.header_btn_group a span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transform: skewX(20deg);
          transform: skewX(20deg); /* 逆回転 */
  width: 100%;
}

.header_btn_group a img {
  width: 2rem;
  margin-right: 0.8rem;
}

/* 色分け */
.header_btn_recruit {
  background-color: #d24146;
} /* 赤 */
.header_btn_contact {
  background-color: #3c6e50;
  -webkit-transform: none !important;
          transform: none !important;
  /* ★魔法のコード：左は斜め、右は真っ直ぐに切り抜く！ */
  /* "2.2rem" という数字が斜めの角度を作っています */
  -webkit-clip-path: polygon(2.2rem 0, 100% 0, 100% 100%, 0 100%);
          clip-path: polygon(2.2rem 0, 100% 0, 100% 100%, 0 100%);
  /* 赤いボタンとの隙間を埋める微調整 */
  margin-left: -1.5rem !important;
  /* もしヘッダーの右端ギリギリまで伸ばしたいなら、この余白を調整 */
  margin-right: -5rem !important; /* ヘッダーのpaddingを相殺 */
} /* 緑 */
.header_btn_contact span {
  -webkit-transform: none !important;
          transform: none !important;
}

/* ===================================================================
   ▼ スマホ対応（1000px以下）
   =================================================================== */
@media (max-width: 1000px) {
  header {
    padding: 0;
    height: 7rem;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  /* スマホではPC用の右側エリア（電話番号・デカいボタン）を消す */
  .header_right {
    display: none;
  }
  /* ロゴ調整 */
  .header_logo {
    padding-left: 1.5rem;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  .header_logo img {
    width: auto;
    height: 4rem; /* スマホでのロゴ高さ */
  }
  /* スマホ用メニューボタン等の表示（HTMLにある前提） */
  .sp_header_items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
  }
  /* ...既存のスマホ用CSSがあればここに続く... */
}
/* --- ヒーローエリア（メイン画像） --- */
.top {
  background-color: #555; /* 画像がない場合の背景色 */
  background-image: url("/img/cmn_header_image.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 20rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: white;
  position: relative;
}

.top::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(51, 51, 51, 0.8);
}

.top_text {
  position: relative;
  z-index: 1;
  text-align: center;
}

.top_text p {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
}

.top h1 {
  font-size: 5.2rem;
  /*font-style: italic;*/
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
  margin: 0;
  font-weight: 900; /* デザインに合わせて「太字」に固定 */
  line-height: 1; /* 行の高さをギュッと縮める */
  letter-spacing: 0.1em; /* 少し文字間を広げるとそれっぽくなります */
  /* 下の英語との距離をここで微調整（0〜.5remくらい） */
  margin-bottom: 1.5rem;
}
@media screen and (max-width: 560px) {
  .top h1 {
    font-size: 4rem;
  }
}

.top_text p {
  font-size: 2.5rem;
  font-family: "Oswald", sans-serif;
  font-weight: 500; /* 太さは500（Medium）くらいが丁度いいです */
  /* ▼▼▼ 追加・修正 ▼▼▼ */
  margin: 0; /* ★重要：勝手な余白を消す！ */
  /*font-style: italic;*/
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
  line-height: 1; /* こちらも高さを縮める */
  font-size: 1.6rem; /* サイズ微調整（お好みで） */
  color: #ffffff; /* 白文字を明示 */
}

/* --- コンテンツエリア --- */
.content-section {
  padding: 6rem 0;
}

/* セクションタイトル (/ タイトル /) */
.section_title {
  text-align: center;
  font-size: 3.2rem;
  color: var(--main-green);
  font-weight: bold;
  margin-bottom: 4rem;
  font-style: italic;
}

.section_title::before {
  content: "/ ";
  margin-right: 1rem;
}

.section_title::after {
  content: " /";
  margin-left: 1rem;
}

/* サブタイトル (/ タイトル) */
.sub_title {
  font-size: 2.4rem;
  color: #333;
  font-weight: bold;
  border-bottom: 0.2rem solid transparent; /* 下線用スペース */
  margin-top: 4rem;
  margin-bottom: 2rem;
  font-style: italic;
}

.sub_title::before {
  content: "/ ";
  color: var(--main-green);
  font-weight: bold;
  margin-right: 0.5rem;
  font-size: 1.2em;
}

/* テキスト */
p {
  margin-bottom: 2rem;
  font-size: 1.4rem;
}

/* テーブル */
.custom_table {
  width: 100%;
  border-collapse: collapse;
  margin: 4rem 0;
}

.custom_table th, .custom_table td {
  padding: 1.6rem;
  border-bottom: 1px solid #999;
  font-size: 1.4rem;
  text-align: left;
  font-weight: 500 !important;
}

/* ▼ 魔法のコード：一番下の行だけ「線なし」にする */
.custom_table tr:last-child th,
.custom_table tr:last-child td {
  border-bottom: none;
}

.custom_table th {
  background-color: #f4f5f5; /* 左側の背景色（薄いグレー） */
  width: 30%;
  font-weight: 500;
}

/* 大きなリンクボタン */
.big_btn_area {
  text-align: center;
  margin: 5rem 0;
}

.skew_btn {
  background-color: var(--main-green);
  color: white;
  padding: 1.5rem 6rem;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg); /* 平行四辺形にする */
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.skew_btn span {
  display: block;
  -webkit-transform: skewX(20deg);
          transform: skewX(20deg); /* 文字の傾きを戻す */
}

.skew_btn:hover {
  opacity: 0.8;
}

.small_link {
  /* ▼ ここが魔法の整列セット！ */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* 横並びにする */
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; /* ★重要：これで縦のド真ん中に揃う！ */
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; /* 横方向も真ん中に寄せる */
  gap: 0.5rem; /* アイコンと文字の間の隙間 */
  margin-top: 1.5rem;
  color: #3c6e50;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: bold;
}

/* --- 左下のScroll追従 --- */
.scroll_guide {
  position: absolute;
  left: -3rem;
  bottom: 0;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row; /* 線が左、文字が右 */
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start; /* 上揃え */
  gap: 0.3rem;
}

/* --- 棒線のアニメーション --- */
.scroll_line {
  width: 0.1rem;
  height: 10rem;
  background-color: #3c6e50;
  position: relative;
  overflow: hidden; /* 中で動く線を見せるため */
  /* 動く白い（または薄い色の）線を擬似要素で作る */
}
.scroll_line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff; /* 背景が緑なら白、白ならグレーなど */
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(#fff), to(transparent));
  background: linear-gradient(to bottom, transparent, #fff, transparent);
  /* アニメーションの実行 */
  -webkit-animation: scrollLineAnim 2s cubic-bezier(0.76, 0, 0.3, 1) infinite;
          animation: scrollLineAnim 2s cubic-bezier(0.76, 0, 0.3, 1) infinite;
}

/* 線が上から下に流れるアニメーションの定義 */
@-webkit-keyframes scrollLineAnim {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@keyframes scrollLineAnim {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
/* スマホでの位置微調整 */
@media (max-width: 1000px) {
  .scroll_guide {
    left: 2rem;
    bottom: 1rem;
  }
  .scroll_line {
    height: 6rem; /* スマホでは少し短く */
  }
}
/* スマホでは表示させる場合、位置を調整 */
@media (max-width: 1000px) {
  .scroll_guide {
    left: 2rem;
    /* display: flex; */
  }
}
.scroll_text {
  font-family: "Oswald", sans-serif; /* 英語フォント */
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 400;
  color: #333; /* 文字の色（濃いグレー） */
  letter-spacing: 0.1em;
  /* 文字を縦向きにする魔法 */
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  /* もし文字の頭を上にしたいならこれを使う */
  /* transform: rotate(180deg); */
}

.scroll_line {
  width: 0.1rem; /* 線の太さ */
  height: 10rem; /* 線の長さ */
  background-color: #3c6e50; /* 線の色 */
}

/* 線が上から下に伸びる動き */
@-webkit-keyframes scrollLine {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
  50% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
  51% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
  }
  100% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
  }
}
@keyframes scrollLine {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
  50% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
  51% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
  }
  100% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: bottom;
            transform-origin: bottom;
  }
}
/* =========================================
   共通設定（変数の定義など）
   ========================================= */
:root {
  --main-green: #3c6e50; /* 画像に基づいた緑色 */
  --text-gray: #333;
  --bg-light-gray: #f2f2f2;
  --footer-border-color: #333; /* フッター下部の濃いグレー */
}

/* =========================================
   お問い合わせセクション (.contact_cta)
   ========================================= */
/* タイトルエリア */
.contact-header {
  margin-bottom: 4rem;
}

.contact-label {
  font-size: 1.8rem;
  color: #999; /* 薄いグレー */
  font-style: italic; /* 斜体 */
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.contact-main-title {
  font-size: 2.8rem;
  color: var(--main-green); /* 緑色 */
  font-weight: bold;
  margin: 0;
}

/* コンテンツエリア（横並び・スマホ縦） */
.contact-contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 3rem; /* 左右の間隔 */
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

/* 左右のメソッドボックス */
.contact-method {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1; /* 均等に分割 */
  width: 100%;
}

/* --- お問い合わせエリア --- */
.contact_cta {
  position: absolute;
  left: 50%;
  top: 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
}

/* 2. 白い箱のデザイン */
.contact_box {
  text-align: center;
  background: rgba(255, 255, 255, 0.8);
  max-width: 100rem;
  width: 100%;
  margin: 0 auto;
  padding: 4rem clamp(1.8rem, 1.8rem + 8.2 * (100vw - 37.5rem) / 62.5, 10rem);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 浮いている影 */
  -webkit-box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.15);
          box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.15);
}

/* --- タイトル周り --- */
.contact_group {
  margin-bottom: 2.8rem;
}

.contact_label {
  display: block;
  font-family: "Oswald", sans-serif;
  font-size: 2.1rem;
  color: #999;
  font-weight: 500;
  /*font-style: italic;*/
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.2;
}

.contact_text {
  display: block;
  font-size: 2.4rem;
  color: #3c6e50;
  font-weight: bold;
  margin: 0;
  font-weight: 900;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 1000px) {
  .contact_text {
    letter-spacing: 0.05em;
  }
}

/* --- 左右のレイアウト（帯を揃える設定） --- */
.contact_flex {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 左右均等 */
  gap: 6rem; /* 間の隙間 */
  width: 100%;
  /* ★★★ ここが修正ポイント！ ★★★ */
  /* 上端（帯の頭）で揃える設定 */
}

/* 左右のエリア */
.contact_tel,
.contact_mail {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

/* --- グレーの帯（位置・文字サイズ） --- */
.contact_tel_text,
.contact_mail_text {
  display: block;
  width: 100%;
  background-color: #edefef; /* グレー背景 */
  color: #333;
  font-weight: 500;
  text-align: center;
  /* ▼▼ 文字サイズと余白の調整場所 ▼▼ */
  font-size: 1.8rem; /* 文字の大きさ */
  padding: 0.3rem 0; /* 帯の太さ（上下の余白） */
  margin-top: 0; /* 上の隙間をゼロにする（重要！） */
  margin-bottom: 1.4rem; /* 下の文字との距離 */
  letter-spacing: 0.1em;
}

/* --- 左側：電話番号のデザイン --- */
.tel_content {
  text-align: center;
}

.phone_number {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  /*font-style: italic;*/
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
  color: var(--main-green); /* 緑色 */
  line-height: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  /* ▼▼ 電話番号のサイズ調整場所 ▼▼ */
  font-size: 5.4rem;
  text-decoration: none;
}

.phone_number img {
  -webkit-transform: skewX(20deg);
          transform: skewX(20deg);
  width: 0.4em;
  margin-top: 0.5rem;
}

.tel_time {
  display: block;
  font-weight: 500;
  margin-top: 0.4rem;
  /* ▼▼ 受付時間の文字サイズ ▼▼ */
  font-size: 1.4rem;
}

/* --- 右側：メールボタンのデザイン --- */
.mail_content {
  width: 100%;
  height: 100%;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.contact_btn {
  display: block;
  background-color: #3c6e50; /* 緑色 */
  color: white;
  text-decoration: none;
  font-weight: bold;
  width: 100%; /* 幅いっぱい */
  margin: 0 auto;
  /* 斜めにする設定 */
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  /* ▼▼ ボタンの大きさ（余白）調整 ▼▼ */
  padding: 2rem 0;
}

.contact_btn:hover {
  opacity: 0.8;
}

.contact_btn span {
  font-size: 1.6rem;
  font-weight: 700;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transform: skewX(20deg);
          transform: skewX(20deg); /* 文字の傾きを戻す */
  /* ▼▼ ボタンの文字サイズ調整 ▼▼ */
  font-size: 1.8rem;
}

.contact_btn img {
  width: 2.5rem;
  margin-right: 1rem;
}

/* --- フッターの余白調整 --- */
.site_footer {
  /* 箱が被さる分、余白を広げる */
}

/* 白い箱（影をつける） */
/* --- スマホ対応（縦並びに戻す） --- */
@media (max-width: 1000px) {
  .contact_cta {
    position: static;
    -webkit-transform: none;
            transform: none;
    width: 100%;
    padding-top: 0.1rem; /* 子要素にマイナスマージンを適用する為に必要 */
    margin-bottom: 6rem;
  }
}
@media screen and (max-width: 1000px) and (max-width: 800px) {
  .contact_cta {
    margin-bottom: 4.8rem;
  }
}
@media screen and (max-width: 1000px) and (max-width: 560px) {
  .contact_cta {
    margin-bottom: 3.6rem;
  }
}
@media (max-width: 1000px) {
  .contact_box {
    width: calc(100% - 5rem);
    margin-top: -5rem;
  }
  .contact_flex {
    grid-template-columns: 1fr; /* 1列にする */
    gap: 4rem;
  }
  .phone_number {
    font-size: 4rem; /* スマホでは少し小さく */
  }
}
/* ボタン */
.contact_btn {
  background-color: var(--main-green);
  color: white;
  padding: 1.5rem 0;
  width: 80%;
  margin: 0 auto; /* ★幅を狭めたので、真ん中に寄せる */
  text-decoration: none;
  font-weight: bold;
  display: block; /* ★ブロック要素！ */
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.contact_btn:hover {
  opacity: 0.8;
}

.contact_btn span {
  font-size: 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transform: skewX(20deg);
          transform: skewX(20deg);
  width: 100%;
  height: 100%;
}

.contact_btn img {
  margin-right: 0.8rem;
  vertical-align: middle;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .contact_flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 3rem;
  }
}
/* 灰色の帯のサブタイトル */
.method-title {
  background-color: #e9ecef;
  color: var(--text-gray);
  font-size: 1.6rem;
  font-weight: bold;
  padding: 1.2rem 0;
  margin-bottom: 2rem;
}

.method-body {
  padding: 0 1rem;
}

/* 電話番号スタイル */
.tel-number {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  font-size: 3.6rem; /* 大きく強調 */
  font-weight: bold;
  font-style: italic; /* 斜体 */
  color: var(--main-green); /* 緑色 */
  line-height: 1;
  margin-bottom: 0.5rem;
}

.reception-time {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--text-gray);
}

/* メールボタン（斜めデザイン） */
.skew-button.mail-btn {
  display: block;
  width: 100%;
  background-color: var(--main-green); /* 緑色背景 */
  color: #fff;
  text-decoration: none;
  padding: 1.5rem 0;
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg); /* 全体を斜めにする */
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.skew-button.mail-btn:hover {
  opacity: 0.85;
}

/* ボタンの中身（傾きを戻す） */
.btn-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  -webkit-transform: skewX(20deg);
          transform: skewX(20deg); /* 逆回転して水平に戻す */
  font-weight: bold;
  font-size: 1.6rem;
}

.btn-inner img {
  width: 2.4rem; /* アイコンサイズ調整 */
  height: auto;
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1); /* アイコンを白くする（必要に応じて） */
}

/* ===================================================================
   ▼ 3. スマホ対応（全ページ共通で縦並びにする）
   =================================================================== */
@media (max-width: 1000px) {
  /* どんなページでもスマホならめり込み解除 */
}
/* =========================================
   フッターセクション (.site_footer)
   ========================================= */
.site_footer {
  background-color: var(--bg-light-gray); /* 薄いグレー背景 */
  padding: 26.4rem 0 2rem 0; /* 上下の余白 */
  color: var(--text-gray);
  /* 最下部の濃いグレーの帯 */
  border-bottom: 2.5rem solid var(--footer-border-color);
  position: relative;
  z-index: 5;
}
@media screen and (max-width: 1000px) {
  .site_footer {
    padding-top: 0;
  }
}

:where(body:not(.page_index_body):has(.contact_cta) .site_footer) {
  margin-top: 25rem;
}
@media screen and (max-width: 1000px) {
  :where(body:not(.page_index_body):has(.contact_cta) .site_footer) {
    margin-top: 14rem;
  }
}

.footer_container {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* 左右並び */
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

/* 左側：会社情報 */
.footer_logo {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: var(--text-gray);
}

.footer_logo img {
  /* 画像の下に勝手にできる隙間を消すおまじない */
  vertical-align: bottom;
  margin-bottom: 0;
}

.footer_logo strong {
  font-size: 3.2rem; /* ロゴを大きく強調 */
  font-style: italic; /* 斜体 */
  font-weight: 900;
  margin-left: 0.8rem;
}

.footer-contact {
  font-weight: 500;
  line-height: 0.5;
}

.footer_tel {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 0.5;
  letter-spacing: -0.5rem;
  /* ▼ ここを修正！上方向の隙間を消します */
  margin-top: 0;
}

.footer-contact {
  margin-top: 0.5rem;
  letter-spacing: 0;
}

.copyright {
  margin-top: 3rem;
  margin-bottom: 0;
  color: #000;
  font-size: 1.2rem;
}

/* 右側：メニューリンクのエリア */
.footer_links {
  display: grid;
  /* ▼▼▼ ここを修正！ ▼▼▼ */
  /* 1fr 1fr (均等に広げる) ではなく... */
  grid-template-columns: auto auto; /* ★「文字の幅に合わせて自動調整」にする！ */
  /* ▼▼▼ これも重要！ ▼▼▼ */
  /* width: 100%;  ← これがあると無駄に広がろうとするので消す！ */
  /* 隙間の調整（4.0remが広すぎたら 3.0rem とかに減らして！） */
  gap: 1.5rem 9rem;
  margin-top: 1rem;
}

/* 各リンクのデザイン */
.footer_links a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* アイコンと文字を横並び */
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; /* 上下中央揃え */
  text-decoration: none; /* 下線を消す */
  color: #3c6e50; /* 緑色 */
  font-weight: 500;
  font-size: 1.8rem;
}

/* アイコン画像 */
.footer_links img {
  margin-right: 0.8rem; /* 文字との隙間 */
  vertical-align: middle;
  width: 1.4rem; /* アイコンの大きさ（画像に合わせて小さめに） */
  height: auto;
}

/* ホバー時の動き */
.footer_links a:hover {
  opacity: 0.7;
}

/* =========================================
   レスポンシブ対応（スマホ向け）
   ========================================= */
@media (max-width: 768px) {
  /* お問い合わせコンテンツを縦並びにする */
  .contact-contents {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 3rem;
  }
  /* フッターコンテンツを縦並びにする */
  .footer_container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  /* フッターリンクの余白調整 */
  .footer_links {
    width: 100%;
    margin-top: 3rem;
  }
}
/* スマホ(100.0rem以下）の時のフッター設定 */
@media (max-width: 1000px) {
  /* フッター全体の箱 */
  .footer_container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* ▼▼▼ これが魔法の1行！「縦並び（逆順）」にする命令 ▼▼▼ */
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    /* リンクとロゴの間の隙間をここで調整 */
    gap: 4rem;
  }
  /* リンクエリア（上に来るやつ） */
  .footer_links {
    width: 100%;
    margin-top: 0; /* 元々あった余白をリセット */
    margin-bottom: 0;
  }
  /* ロゴ・住所エリア（下に来るやつ） */
  .footer_info {
    width: 100%;
    margin-bottom: 2rem; /* 下に少し余白 */
    /* 必要なら中央揃えに */
    /* text-align: center; */
  }
}
/* 2. ロゴ画像のサイズ調整 */
.footer_logo img {
  width: 100%; /* 親枠に合わせて伸縮 */
  max-width: 40rem; /* でもデカすぎないように制限 */
  height: auto;
  margin-bottom: 1.5rem; /* 住所との隙間 */
}

/* 3. 住所と電話番号を「大きく・読みやすく」 */
.footer_address,
.footer_tel {
  font-family: "Noto Sans JP";
  font-size: 1.6rem; /* 文字サイズUP！（元は1.4rem） */
  font-weight: 500; /* 太字でくっきり */
  line-height: 1.8; /* 行間を広げて窮屈さをなくす（元は0.5でした！） */
  margin: 0rem 0; /* 上下の程よい余白 */
  letter-spacing: 0.05em; /* 文字の間を少し広げて上品に */
}

/* 5. コピーライト（一番下の©） */
.copyright {
  font-weight: 500;
  font-size: 1.2rem;
  margin-top: 2.5rem;
  font-size: 1.5rem;
}

.copy-mark {
  font-family: "Arial", sans-serif;
  font-size: 1.2em;
  margin-right: 0.2rem;
}

/* 100.0rem以下のときは、ヘッダーの右側（電話・ボタン）を消す */
@media (max-width: 1000px) {
  .header_right {
    display: none;
  }
}
/* スマホの時だけ、文字を大きく・間隔を広くする */
@media (max-width: 1000px) {
  /* 1. 「メールでのお問い合わせ」の文字 */
  .contact_tel_text, .contact_mail_text {
    font-size: 1.8rem; /* 今より少し大きく（調整してね） */
    color: #333;
    letter-spacing: 0.1em; /* 文字の間隔を少し広げる */
  }
}
/* =========================================
   ページトップボタン
   ========================================= */
#footer_gotop {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* 中身を整列 */
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; /* 縦並び */
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; /* 真ん中に */
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: fixed; /* ★重要：画面に固定して「ずっとついてくる」！ */
  bottom: 0; /* 一番下 */
  right: 0; /* 一番右 */
  z-index: 9000; /* 他の要素より手前に（モーダルよりは奥に） */
  width: 5.5rem; /* ボタンの幅 */
  height: 12rem; /* ボタンの高さ */
  background-color: #3c6e50; /* テーマカラーの緑 */
  color: white;
  text-decoration: none;
  /* ▼ おしゃれポイント：左上を斜めにカットする魔法！ */
  /* 左辺の20%の高さからスタートして、右上の角へ線を引く形 */
  -webkit-clip-path: polygon(0 25%, 100% 0, 100% 100%, 0% 100%);
          clip-path: polygon(0 25%, 100% 0, 100% 100%, 0% 100%);
  padding-top: 1rem; /* 斜めになった分、中身を少し下にずらす */
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

#footer_gotop:hover {
  opacity: 0.8;
}

/* --- 丸い背景（もし画像のように白丸が必要なら） --- */
/*
.top_arrow {
    display: flex; justify-content: center; align-items: center;
    width: 2.4rem; height: 2.4rem;
    background: white; border-radius: 50%;
    margin-bottom: .5rem;
}
.top_arrow::after {
    content: ''; display: block;
    width: .6rem; height: .6rem;
    border-top: .2rem solid #3c6e50;
    border-right: .2rem solid #3c6e50;
    transform: rotate(-45deg);
    margin-top: .2rem;
}
*/
/* --- テキストのデザイン（縦向きに変更！） --- */
.page_top_text {
  font-family: "Oswald";
  font-size: 1.3rem; /* 少し大きめに調整 */
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  color: white;
  font-style: italic;
  /* ▼▼▼ ここが回転の魔法！ ▼▼▼ */
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg); /* 反時計回りに90度回す */
  white-space: nowrap; /* 勝手に折り返さないようにする */
  /* 位置の微調整（回転するとズレて見えるので） */
  margin-top: 1.5rem; /* 矢印との距離 */
  margin-bottom: 1rem; /* 下の余白 */
}

/* =========================================
   スマホ用ヘッダーのデザイン（ここから追加！）
   ========================================= */
/* 1. 基本設定（PCでは隠す） */
@media (min-width: 1001px) {
  .sp_header_items {
    display: none;
  }
}
@media (max-width: 1000px) {
  /* ロゴが入っている箱の設定 */
  .header_logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; /* 中身を整列させるモード */
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; /* ★重要：これで上下のど真ん中に来ます！ */
    height: 100%; /* ヘッダーの高さいっぱいに広げる */
    padding-left: 1.5rem; /* 左端に少し隙間をあける */
  }
  /* ロゴ画像自体のサイズ制限（デカすぎ防止） */
  .header_logo img {
    height: auto;
    max-height: 3rem; /* 高さを4.0remくらいに制限（お好みで調整） */
    width: 21rem;
  }
}
/* 2. スマホ表示（100.0rem以下）の時だけ有効にする */
@media (max-width: 1000px) {
  /* --- ヘッダー全体の調整 --- */
  header {
    /* ヘッダーの高さ（ボタンの高さに合わせる） */
    height: 7rem;
    padding: 0; /* 余白をなくして端までボタンを表示 */
    /* ロゴを左端に寄せる */
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch; /* 高さを揃える */
    background: #fff;
    border-bottom: none; /* 画像のような下の線 */
  }
  /* ロゴエリア（既存のクラス名に合わせて調整してください） */
  .logo, header > h1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-left: 1.5rem; /* 左側の余白 */
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1; /* 残りのスペースを埋める */
  }
  /* ロゴ画像のサイズ調整（必要に応じて） */
  .logo img, header > h1 img {
    height: 4rem; /* 高さを指定してバランス調整 */
    width: auto;
  }
  /* --- スマホ用アイテムの表示コンテナ --- */
  .sp_header_items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; /* 横並びにする */
    height: 100%; /* ヘッダーの高さと揃える */
  }
  /* --- ボタン共通設定 --- */
  .header_btn_sp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; /* アイコンと文字を縦並び */
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 100%; /* 高さいっぱい */
    width: auto; /* 自動計算させる */
    aspect-ratio: 1/1;
    width: 7rem;
    text-decoration: none;
    color: white;
    cursor: pointer;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    text-align: center;
  }
  .header_btn_sp:hover {
    opacity: 0.9;
  }
  /* --- 電話ボタン（赤） --- */
  .btn_tel {
    background-color: #c54e4e; /* 画像に近い赤色 */
    border-left: 1px solid rgba(255, 255, 255, 0.2); /* 区切り線（任意） */
  }
  .btn_tel img {
    width: 1.6rem; /* アイコンサイズ */
    height: auto;
    /* もし白いアイコン画像がない場合は、以下で黒いアイコンを白くできます */
    /* filter: brightness(0) invert(1); */
  }
  /* --- メニューボタン（緑） --- */
  .btn_menu {
    padding-top: 0.8rem;
    background-color: #3c6e50; /* メインの緑色 */
  }
  /* ハンバーガーの3本線をつくる */
  .hamburger_lines {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 4rem; /* 線の幅 */
    height: 2rem; /* 全体の高さ */
    margin-bottom: 0.8rem; /* MENU文字との隙間 */
  }
  .hamburger_lines span {
    display: block;
    width: 100%;
    height: 0.1rem; /* 線の太さ */
    background-color: white;
    border-radius: 0.2rem;
  }
  /* MENUテキスト */
  .menu_text {
    padding-right: 0.3em;
    font-size: 1.3rem;
    font-weight: bold;
    font-family: "Oswald";
    line-height: 1;
    font-style: italic; /* 斜体にする */
    letter-spacing: 0.05em;
  }
}
/* =============================================
   ▼ モーダルメニューシステム（合体用・加工済み）
   ============================================= */
/* 1. スイッチ（チェックボックス）は隠す */
#header_modalmenu_check {
  display: none;
}

/* 2. 背景の黒いカバー */
#header_modalmenu_close_bg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(51, 51, 51, 0.8);
  opacity: 0;
  pointer-events: none;
  z-index: 79999; /* メニューより下、他より上 */
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

/* スイッチが入ったら黒背景を出す */
#header_modalmenu_check:checked ~ #header_modalmenu_close_bg {
  opacity: 1;
  pointer-events: auto;
}

/* 3. メニューが出てくるエリア（本体） */
#header_modalmenu_area {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  z-index: 80000; /* 一番手前 */
  color: #ffffff;
  background-color: #3c6e50; /* メニューの背景色 */
}

/* スイッチが入ったらメニューを出す */
#header_modalmenu_check:checked ~ #header_modalmenu_area {
  opacity: 1;
  pointer-events: auto;
}

/* 4. メニューの中身のアニメーション */
.header_modalmenu_areainner {
  padding: 5rem 3rem 4.6rem;
  -webkit-transform: translateY(-3rem);
          transform: translateY(-3rem);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

#header_modalmenu_check:checked ~ #header_modalmenu_area .header_modalmenu_areainner {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/* --- ここから下はメニュー内のデザイン（そのまま） --- */
.header_modalmenu_nav01 {
  display: block !important;
  margin-top: 8rem;
  padding: 0; /* ★ここを0にするのがポイント！これで端まで届きます */
}

@media screen and (max-width: 640px) {
  .header_modalmenu_nav01 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-top: 0.4rem;
  }
}
/* 3. リンク（文字）のデザイン */
.header_modalmenu_nav01 a {
  display: block;
  color: #ffffff;
  text-decoration: none;
  /* 線は端まで引く設定 */
  border-bottom: 1px solid #ffffff;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* レイアウト崩れ防止 */
  /* ★文字が画面の端にくっつかないように、ここで内側に隙間を作る */
  padding: 3rem 7rem; /* 上下2.0rem、左右2.0rem */
  font-weight: normal; /* 文字を細く */
  font-size: 2.5rem;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 800px) {
  .header_modalmenu_nav01 a {
    padding: 2rem 4rem;
    font-size: 2.2rem;
  }
}

/* 4. 一番上の項目だけに「上の線」を追加 */
.header_modalmenu_nav01 a:first-child {
  border-top: 1px solid #ffffff;
}

/* 5. ホバーした時に少し色を変える（おまけ） */
.header_modalmenu_nav01 a:hover {
  opacity: 0.7;
  background-color: rgba(255, 255, 255, 0.1); /* うっすら白く光る */
}

.header_modalmenu_nav01 > div {
  width: 100%;
  display: block;
}

.header_modalmenu_nav01 > div > a {
  display: block;
  color: #ffffff;
  text-decoration: none;
}

.header_modalmenu_nav01 > div > div > a {
  display: block;
  color: #ffffff;
  font-size: 78%;
  padding: 0.4em 0 0.4em 1.2em;
  text-decoration: none;
  /* アイコン画像がないと崩れるので一旦コメントアウトか、パスを確認 */
  /* background-image: url(../img/cmn_icon_rightarrowsingleline.svg); */
}

.header_modalmenu_org {
  padding-top: 7rem;
  border-top: 1px solid #ffffff;
  margin-top: 5rem;
  text-align: center;
}

.header_modalmenu_org > a {
  display: block;
  color: white;
  width: 90%;
  margin: auto;
}

/* =============================================
   ▼ モーダルメニューの「閉じるボタン」デザイン
   ============================================= */
/* 1. ボタン全体の箱（緑の四角） */
.header_modalclose_btn {
  position: absolute;
  top: 0; /* 右上にピタッと配置 */
  right: 0;
  width: 7rem; /* ボタンの幅（ヘッダーの高さと合わせると綺麗） */
  height: 7rem; /* ボタンの高さ */
  background-color: #3c6e50; /* メインの緑色 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; /* 縦並びにする */
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; /* 上下の真ん中 */
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; /* 左右の真ん中 */
  cursor: pointer;
  z-index: 10; /* 他の要素より手前に */
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.header_modalclose_btn:hover {
  opacity: 0.8;
}

/* 2. 「×」マークをCSSで描く */
.header_modalmenu_closeicon {
  position: relative;
  width: 2.4rem; /* ×のサイズ */
  height: 2.4rem;
  margin-bottom: 0.5rem; /* 文字との隙間 */
}

/* 2本の線を擬似要素で作る */
.header_modalmenu_closeicon::before,
.header_modalmenu_closeicon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%; /* 中心を基準に */
  width: 3rem; /* 線の長さ */
  height: 0.2rem; /* 線の太さ */
  background-color: white;
  border-radius: 0.2rem;
}

/* 片方を45度、もう片方を-45度回転させてクロスさせる */
.header_modalmenu_closeicon::before {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}

.header_modalmenu_closeicon::after {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}

/* 3. 「CLOSE」テキストのデザイン */
.header_modalmenu_closetext {
  color: white;
  font-family: "Oswald", sans-serif; /* ★Oswaldフォントを指定！ */
  font-weight: bold;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0.05em;
  /* ↓これで「MENU」と同じ角度に斜めにする！ */
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
}

/* =============================================
   ▼▼▼ 復旧用：モーダルメニューの必須設定 ▼▼▼
   ============================================= */
/* 1. スイッチ（チェックボックス）を隠す */
#header_modalmenu_check {
  display: none !important;
}

/* 2. 背景の黒いカバー */
#header_modalmenu_close_bg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(51, 51, 51, 0.8);
  opacity: 0;
  pointer-events: none;
  z-index: 79999;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

/* スイッチが入ったら黒背景を出す */
#header_modalmenu_check:checked ~ #header_modalmenu_close_bg {
  opacity: 1;
  pointer-events: auto;
}

/* 3. メニューが出てくるエリア（本体） */
#header_modalmenu_area {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  /* ▼ここが重要！普段は隠しておく命令▼ */
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  z-index: 80000;
  color: #ffffff;
  background-color: #3c6e50; /* 緑色の背景 */
}

/* スイッチが入ったらメニューを出す */
#header_modalmenu_check:checked ~ #header_modalmenu_area {
  opacity: 1;
  pointer-events: auto;
}

/* 4. メニューの中身のアニメーション */
.header_modalmenu_areainner {
  padding: 7rem 0rem 4.6rem;
  -webkit-transform: translateY(-3rem);
          transform: translateY(-3rem);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

#header_modalmenu_check:checked ~ #header_modalmenu_area .header_modalmenu_areainner {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/* index */
/* --- 1. ヒーロースライダー --- */
.hero-slider {
  position: relative;
  width: 100%;
  height: 80vh; /* 画面の高さの80% */
  min-height: 50rem;
  overflow: hidden;
  z-index: 30;
}

.swiper, .swiper-wrapper, .swiper-slide {
  width: 100%;
  height: 100%;
}

.slide-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  /* ズームアウトするアニメーション */
  -webkit-animation: zoomUp 10s linear infinite;
          animation: zoomUp 10s linear infinite;
}

@-webkit-keyframes zoomUp {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}

@keyframes zoomUp {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}
.hero-slider,
.hero-slider .swiper,
.hero-slider .swiper-wrapper,
.hero-slider .swiper-slide {
  height: auto !important; /* 80vhとかの固定をやめる */
  min-height: 0 !important; /* 最低の高さ制限も解除 */
  padding-bottom: 0 !important;
}

/* 2. 画像自体の高さも「なりゆき」にする */
.slide-img-box,
.slide-img {
  height: auto !important; /* 枠に合わせるのではなく、画像本来の比率で表示 */
  width: 100%; /* 横幅はいっぱいに */
  display: block; /* 隙間対策 */
}

/* 3. ページネーションを「画像の底」に張り付ける */
.hero-slider .swiper-pagination {
  position: absolute !important;
  inset: auto !important; /* 余計な位置指定をリセット */
  /* ▼ 調整ポイント：ここで位置を決めます！ ▼ */
  bottom: 2rem !important; /* 画像の下端から2.0rem上に配置 */
  /* もし画像の外（下）に出したいなら、ここを「-3.0rem」とかにしてください */
  right: 2rem !important; /* 右端から2.0rem */
  width: auto !important;
  z-index: 100 !important;
  text-align: right;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

@media (max-width: 1000px) {
  .slide-img {
    width: 100%;
    height: 100%;
    /* ▼▼▼ ここを書き換え！ ▼▼▼ */
    /* background-size: cover; ← これはimgタグには効きません！消してOK */
    -o-object-fit: cover;
       object-fit: cover; /* ★枠いっぱいに広げて、はみ出た分は自動カット */
    -o-object-position: center;
       object-position: center; /* ★画像の真ん中を中心に表示 */
    /* アニメーション（そのまま） */
    -webkit-animation: zoomUp 10s linear infinite;
            animation: zoomUp 10s linear infinite;
  }
  /* 念のため、画像を包む箱も高さいっぱいに */
  .slide-img-box {
    height: 100%;
    width: 100%;
  }
}
@media (max-width: 1000px) {
  /* 画像自体の高さを制限する */
  .slide-img {
    /* ▼ ここで「最大の高さ」を決めます！ */
    max-height: 50rem !important; /* 50.0rem〜60.0remくらいがオススメ */
    /* 指定した高さからはみ出た分は、綺麗にトリミングする */
    -o-object-fit: cover !important;
       object-fit: cover !important;
    width: 100% !important;
  }
}
/* =========================================
   ▼ スライダー画像のチラつき防止
   ========================================= */
/* 1. 画像を包んでいる箱をガチガチに固める */
.slide-img-box {
  overflow: hidden; /* はみ出し絶対禁止 */
  -webkit-transform: translateZ(0);
          transform: translateZ(0); /* ブラウザに「本気で描画しろ」と命令（ハードウェアアクセラレーション） */
  background-color: #fff; /* 万が一隙間ができても白で埋める */
}

/* 2. 画像自体の微調整 */
.slide-img {
  vertical-align: bottom; /* 「文字用の隙間」を強制削除 */
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; /* アニメーションの裏写り防止 */
  will-change: transform; /* 「これから動くよ！」と宣言して準備運動させる */
  /* ※これまでの width, height, object-fit などの設定はそのまま維持されます */
}

/* =========================================
   ▼ ヒーローテキスト（合体版）
   ========================================= */
/* 1. 全体の位置（送ってくれたコードをベースに調整） */
.hero-text {
  position: absolute;
  top: 0%;
  left: 10%; /* ※PCレイアウト用CSS(media query)がある場合、そっちが優先されるのでそのままでOK！ */
  z-index: 30;
  text-align: left; /* 左揃えを明示 */
  /* text-shadow: 0 0 1.0rem ...; ← 緑背景の中の文字がボヤけるので一旦消します！ */
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* 2. 日本語キャッチコピー（緑の斜め帯）*/
.hero-sub-text {
  /* ▼▼▼ ここを修正（縦並び用） ▼▼▼ */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* 横並び禁止！ */
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content; /* 文字の長さにフィットさせる */
  background-color: #3c6e50;
  color: white;
  padding: 1.5rem 4rem;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
  -webkit-box-shadow: 0.3rem 0.3rem 1rem rgba(0, 0, 0, 0.3);
          box-shadow: 0.3rem 0.3rem 1rem rgba(0, 0, 0, 0.3);
}

/* 2行目を少し右にずらす（デザイン再現） */
.hero-sub-text.line-2 {
  margin-left: 4rem;
}

/* 傾いた文字を元に戻す設定 */
.hero-sub-text span {
  display: block;
  -webkit-transform: skewX(20deg);
          transform: skewX(20deg);
  font-size: clamp(0rem, 2.7142857143vw, 9999rem);
  font-weight: 900;
  transform: skewX(20deg);
  line-height: 1.2;
  letter-spacing: 0.05em;
  margin-top: -0.2rem !important;
}
@media screen and (max-width: 1000px) {
  .hero-sub-text span {
    font-size: clamp(2.1rem, 2.1rem + 2.2 * (100vw - 37.5rem) / 62.5, 4.3rem);
  }
}

/* 3. 英語部分（送ってくれたコードを維持） */
.hero-eng {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.05em;
  font-size: 1.8rem;
  color: #666;
  margin-top: 1.5rem;
  /*font-style: italic;*/
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
  padding-top: 1rem;
}
@media screen and (max-width: 1000px) {
  .hero-eng {
    margin-top: 1rem;
  }
}
@media screen and (max-width: 1000px) and (max-width: 800px) {
  .hero-eng {
    margin-top: 0.8rem;
  }
}
@media screen and (max-width: 1000px) and (max-width: 560px) {
  .hero-eng {
    margin-top: 0.6rem;
  }
}

/* 1. 共通設定（ブロックにして縦に並べる） */
.hero-eng span {
  display: block; /* 1行ずつ改行させる */
  line-height: 2; /* 行間を少し広げて読みやすく */
  font-size: clamp(0rem, 1.3571428571vw, 9999rem);
}
@media screen and (max-width: 1000px) {
  .hero-eng span {
    font-size: 1.8rem;
  }
}

.eng-line-1 {
  color: #999;
  font-family: "Oswald";
  font-weight: 400;
}

/* 2. 2行目だけ右にずらす！ */
.eng-line-2 {
  color: #999;
  font-family: "Oswald";
  font-weight: 400;
  margin-left: 4rem; /* ★この数字で「ズレ幅」を調整！ */
}

/* --- スマホ対応（文字サイズ調整） --- */
@media (max-width: 1000px) {
  .hero-sub-text {
    padding: 0.8rem 2rem;
    margin-bottom: 0.8rem;
  }
  .hero-sub-text.line-2 {
    margin-left: 0;
  } /* スマホはずらさない */
}
@media (max-width: 1000px) {
  .hero-text {
    position: static;
    margin-top: 10rem;
    padding-left: calc(6% + 3rem);
    padding-right: 3%;
  }
}
@media screen and (max-width: 1000px) and (max-width: 800px) {
  .hero-text {
    margin-top: 8rem;
  }
}
@media screen and (max-width: 1000px) and (max-width: 560px) {
  .hero-text {
    margin-top: 6rem;
  }
}
@media (max-width: 1000px) {
  /* 1. スライダー（写真の箱）のフタを開ける！ */
  .hero-slider {
    /* ★ここが一番重要！はみ出しを許可する */
    overflow: visible !important;
    height: 60vh; /* 写真エリアの高さ */
    width: 100%;
    margin-left: 0;
  }
}
/* =========================================
   ▼ PC版：地図をスライダーにめり込ませる設定
   ========================================= */
@media (min-width: 1001px) {
  /* 1. 特徴セクション自体の余白を調整 */
  .section-features {
    padding-top: 0; /* 上の余白をなくしてスライダーに近づける */
    position: relative;
    z-index: 5; /* スライダーより手前に来るように順序指定 */
  }
  /* 2. 地図画像を上に引っ張り上げる！ */
  .features-img {
    /* ★これが魔法の数字！マイナスにすると上にズレます */
    margin-top: -15rem;
    /* もし地図がスライダーの下に潜り込んじゃう場合はこれが必要 */
    position: relative;
    z-index: 10;
    /* 念のため、クリックの邪魔にならないように */
    pointer-events: none;
  }
  /* ※地図の大きさ調整（必要なら） */
  .features-img img {
    width: 100%;
    max-width: 80rem; /* 巨大になりすぎないように制限 */
    height: auto;
    pointer-events: none;
  }
}
@media (min-width: 1400px) {
  .section-features {
    position: relative;
    /* 背景色は白に戻しておきます */
    background-color: #fff;
  }
  .section-features::after {
    display: none;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* ▼ グラデーションの高さ（ここで広さを調整！） */
    height: 50%;
    /* ▼ 下（濃いグレー）から 上（透明）へのグラデーション */
    background: -webkit-gradient(linear, left bottom, left top, from(#333), color-stop(60%, rgba(255, 255, 255, 0)));
    background: linear-gradient(to top, #333 0%, rgba(255, 255, 255, 0) 60%);
    /* ★重要：地図(20)より手前、文字(30)より奥に配置する！ */
    z-index: 25;
    /* クリックの邪魔をしないようにする */
    pointer-events: none;
    /* 馴染ませるための合成モード（お好みで外してもOK） */
    mix-blend-mode: multiply;
  }
  /* 2. 地図画像の「白背景」を消す魔法 */
  .features-img img {
    /* ★重要！画像の「白い部分」を透明にして、背景のグラデーションと馴染ませます */
    mix-blend-mode: multiply;
  }
}
/* --- 2. 特徴セクション --- */
/* =========================================
   ▼ 特徴セクション（ベースのスタイル）
   ※ 今持っているコードはここに残します！
   ========================================= */
.section-features {
  padding-top: 8rem; /* 上は今のままでOK（PCで0にしているならそのままで） */
  padding-bottom: 2rem; /* ★ここを「0」にすると、下のセクションとくっつきます！ */
  background-color: white;
  position: relative;
  /* z-indexの設定はPC版で上書きするので、ここはなくてOK */
}

.features-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0rem;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

/* =========================================
   ▼ スライダーのページネーション（棒状のナビ）設定
   ========================================= */
.hero-slider .swiper {
  position: relative !important;
  width: 100%;
  height: 100%;
  /* はみ出し許可（スマホで下にずらす時用） */
  overflow: visible !important;
}

/* 1. 全体の位置（右下に配置） */
.hero-slider .swiper-pagination {
  position: absolute;
  bottom: -2rem !important; /* 下からの距離 */
  right: 2rem !important; /* 右からの距離（ここを0にすれば端っこ） */
  left: auto !important; /* デフォルトの「左基準」を打ち消す */
  top: auto;
  width: auto !important; /* 幅を自動にして右寄せを効かせる */
  text-align: right;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  z-index: 100 !important;
}

/* 2. バーの形（共通設定：薄い緑） */
.hero-slider .swiper-pagination-bullet {
  width: 5rem; /* 横幅（ここを増やせばもっと長くなる） */
  height: 0.6rem; /* 太さ */
  background-color: #cde6db; /* 非アクティブ時の薄い緑色 */
  opacity: 1; /* 透明度をなくす */
  border-radius: 0; /* 角丸をなくして四角にする */
  margin: 0 0.6rem !important; /* バー同士の隙間 */
  display: inline-block;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}

/* 3. アクティブなバー（現在表示中のスライド：濃い緑） */
.hero-slider .swiper-pagination-bullet-active {
  background-color: #3c6e50; /* テーマカラーの濃い緑 */
}

/* --- スマホ対応（少し小さくする） --- */
@media (max-width: 1000px) {
  .hero-slider .swiper-pagination-bullet {
    width: 3rem;
    height: 0.6rem;
  }
}
/* =========================================
   ▼ PC版（100.1rem以上）専用：地図めり込みカスタマイズ
   ※ さっきのコードをここに追加します！
   ========================================= */
@media (min-width: 1001px) {
  /* 1. スライダーとの距離を詰める */
  .section-features {
    padding-top: 0; /* 上の余白を消してスライダーに近づける */
    z-index: 10; /* スライダーより手前に表示する */
  }
  /* 2. 地図を上にズラして重ねる */
  .features-img {
    margin-top: clamp(-28.8rem, 4.2rem + -33 * (100vw - 100rem) / 40, 4.2rem); /* ★ここがめり込み具合！数字をいじって調整してね */
    position: relative; /* 重なり順を有効にするため */
    z-index: 20; /* 確実に一番手前に持ってくる */
    width: 50%; /* 左半分 */
    position: relative; /* 基準点 */
  }
  /* 3. 地図画像がデカくなりすぎないように制限（お好みで！） */
  .features-img img {
    /* ▼▼▼ ここを書き換え！ ▼▼▼ */
    /* 1. 無理やり拡大をやめる */
    /* transform: scale(2); */ /* ← これを消す（またはコメントアウト） */
    /* 2. 親の幅に対して「常に1.6倍」の大きさで表示する */
    width: 230%; /* 画面が広がれば、この画像も一緒に広がります！ */
    max-width: none; /* 上限なし */
    height: auto; /* 縦横比を維持 */
    /* 3. 位置の調整（大きくした分、左に引っ張って真ん中に合わせる） */
    margin-left: -50%; /* widthが160%なら、ハミ出た60%の半分の30%を戻すと真ん中に来ます */
    /* 4. 上へのめり込み維持 */
    margin-top: -35rem;
  }
  /* 4. 【★ここが修正ポイント】文章エリアの位置調整 */
  .features-text {
    width: 45%; /* 右半分（少し小さめ） */
    /* ▼▼▼ この数字で「右すぎ！」を直せます！ ▼▼▼ */
    padding-left: 0; /* もし右に寄りすぎなら「0」 */
    margin-left: -5rem; /* ★マイナスにすると、地図の方（左）に寄ってきます！ */
    /* ※地図が文字の下に潜り込むように */
    position: relative;
    z-index: 30; /* 地図(20)より強くする */
    margin-left: auto;
    margin-right: auto;
  }
}
.eng-title {
  font-family: "Oswald";
  font-size: 2.4rem;
  color: #999999;
  font-weight: 500;
  display: block;
  letter-spacing: 0.05em;
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
}

.jp-title {
  font-size: 4.2rem; /* 「から」「の」などのサイズ（小さくする） */
  font-family: "Noto Sans JP";
  font-weight: 900;
  color: #333; /* 黒文字 */
  line-height: 1.5; /* 行間 */
  margin-top: 0;
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
  letter-spacing: 0.05em;
}

/* 2. 「奥伊勢」「三重」をデカく、緑にする！ */
.section-features .jp-title .text-big_green {
  font-weight: 900;
  font-size: 5.2rem; /* ガツンと大きく！ */
  color: #3c6e50; /* 緑色 */
  margin: 0 0.5rem; /* 前後に少し隙間をあける */
  position: relative;
  top: 0.2rem; /* 大きい文字は上に浮きがちなので、少し下げる微調整 */
  letter-spacing: 0.05em;
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
}

.section-features .jp-title .text-big {
  font-weight: 900;
  font-size: 5.2rem; /* ガツンと大きく！ */
  position: relative;
  top: 0.2rem; /* 大きい文字は上に浮きがちなので、少し下げる微調整 */
  letter-spacing: 0.05em;
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
}

.indent-text {
  margin-left: 3rem; /* ★ここで好きなだけずらしてください！ */
}

/* 3. 「食」もデカくする！（赤色はすでにあるのでサイズだけ） */
.section-features .jp-title .text-red {
  font-weight: 900;
  font-size: 5.2rem; /* 緑の文字と同じ大きさに合わせる */
  color: #d24146;
  letter-spacing: 0.05em;
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
}

.features_details {
  font-family: "Noto Sans JP";
  font-weight: 500;
  font-size: 1.6rem;
  padding-bottom: 1rem;
  letter-spacing: 0.05em;
}

.link-arrow {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex; /* アイコンと文字を横並び */
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; /* 上下の真ん中に揃える */
  font-size: 1.6rem; /* ★ここを指定すれば、どこで使っても同じサイズになります！ */
  font-weight: bold; /* 太字 */
  color: #3c6e50; /* 緑色 */
  text-decoration: none; /* 下線なし */
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s; /* ホバー時のふわっとする動き */
}

/* 中にある矢印アイコン画像 */
.link-arrow img {
  margin-right: 0.6rem; /* 文字との隙間 */
  width: 1.4rem; /* ★矢印のサイズもここで統一しておくと安心 */
  height: auto;
}

/* =========================================
   ▼ スマホ版（1000px以下）の微調整
   ========================================= */
@media (max-width: 1000px) {
  /* 1. セクション全体の箱 */
  .section-features {
    position: relative;
    padding-top: 5rem; /* スライダーとの距離を少しあける */
    padding-bottom: 5rem;
  }
  .features-container {
    display: block; /* 縦並びのブロック要素にする */
    position: relative;
  }
  /* 2. 地図画像（背景っぽく配置） */
  /* 2. 地図画像（背景っぽく配置） */
  .features-img {
    width: 180%; /* 画面より少し広くして端を隠す */
    max-width: 110rem;
    margin-left: -20%; /* 左右均等にはみ出させる */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%); /* 自身の幅の半分だけ左に戻す（最強のセンター寄せ） */
    margin-top: clamp(-43.4rem, -20.2rem + -23.2 * (100vw - 37.5rem) / 42.5, -20.2rem);
    position: relative;
    z-index: 1; /* 文字より奥に */
  }
  .features-img img {
    width: 100%;
    height: auto;
    /* PC版の巨大化設定をリセット */
    -webkit-transform: none;
            transform: none;
    max-width: none;
    margin: 0;
  }
  /* 3. テキストエリア（地図の上に重ねる） */
  .features-text {
    position: relative;
    z-index: 2;
    width: 100%;
    /* 1. 画像と同じ「最大幅」にする（一心同体！） */
    max-width: 65rem;
    /* 2. 箱自体をど真ん中に置く */
    margin-left: auto;
    margin-right: auto;
    /* 3. 重なり位置（上に引き上げる量） */
    /* スマホのときは「画面の55%」、でも「-35.0rem」以上は引き上げない！という命令 */
    /* max(A, B) は「AとBのうち、大きい方（0に近い方）を使う」という意味です */
    margin-top: max(-75vw, -35rem);
    /* ▼▼▼ ここが崩れを直す魔法！ ▼▼▼ */
    /* 「基本は55%だけど、36.0rem以上は広げないで！」という命令 */
    /* min(A, B) は「AとBのうち、小さい方を使う」という意味です */
    padding-left: min(55%, 36rem);
    padding-right: 2rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    text-align: left;
  }
  /* 4. タイトルなどの微調整 */
  .eng-title {
    display: block;
    color: #999;
    font-family: "Oswald", sans-serif;
    font-weight: 500;
    font-style: italic;
    /* "Features"の位置調整 */
  }
  .jp-title {
    font-size: 3rem !important; /* スマホ用に少し小さく */
    line-height: 1.4;
  }
  .jp-title span {
    /* 文字サイズのバランス調整 */
    font-size: 4rem !important;
  }
  .features_details {
    font-size: 1.3rem;
    margin-top: 2rem;
    background: rgba(255, 255, 255, 0.6); /* 読みづらければ薄い白背景を足す */
    padding: 1rem;
    border-radius: 0.5rem;
  }
}
@media (max-width: 1000px) {
  .features-text {
    /* 1. 幅の設定：画面の90%を使って、左に10%の隙間を作る */
    width: 60%;
    max-width: 60%;
    /* 2. 右寄せの魔法：左側のマージンを「自動(auto)」にして押し出す！ */
    margin-left: auto;
    margin-right: 0; /* 右端にピタッとくっつける */
    /* 3. 内側の余白：右側はギリギリまで文字を入れるため狭くする */
    padding-left: 2rem;
    padding-right: 0.5rem; /* 右端の余白を減らして文字スペース確保！ */
    /* 4. 左揃え（PCと同じ雰囲気） */
    text-align: left;
    /* 念のためボックス計算を固定 */
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    /* もし読みづらかったら、薄い白背景を足してもOK */
    /* background-color: rgba(255, 255, 255, 0.8); */
  }
  /* クラスをまとめて指定して、一気に小さくします */
  .jp-title .text-big_green,
  .jp-title .text-big,
  .jp-title .text-red {
    font-size: 2.8rem; /* PCは4.0rem → スマホは2.8remくらいがおすすめ */
    /* ついでに、PCで設定した「文字の横の隙間」も少し狭くするとバランスが良いです */
    margin: 0 0.2rem;
  }
  /* もしベースの文字（「の」とか「を」）も小さくしたいならここ */
  .jp-title {
    font-size: 3rem !important; /* 全体のバランスを見て調整してください */
    line-height: 1.5; /* 行間も少し詰めると読みやすいかも */
  }
}
/* =========================================
   ▼ PC表示（100.1rem以上）の時のスライダー調整
   ========================================= */
@media (min-width: 1001px) {
  /* 1. スライダー本体の幅を3/4にして右寄せ */
  .hero-slider {
    width: 75%; /* ★幅を画面の75%（3/4）にします */
    margin-left: auto; /* ★これで自動的に右寄せになります */
    /* height: 80vh; の高さ設定はそのまま維持されます */
    overflow: visible;
  }
  /* 2. キャッチコピー（白い文字）の位置調整 */
  /* スライダーの幅が狭くなったので、左側の位置を調整してスライダーから少しはみ出させます */
  .hero-text {
    /* 元は left: 10%; でした */
    /* スライダーの左端を基準に、マイナスの値を指定して左側へ出します */
    left: -25%; /* ←この数字を調整して、良い感じの位置に合わせてください！ */
    /* 必要に応じてテキストのスタイルも微調整 */
    /* 例: text-align: right; を追加すると、スライダー側に文字が寄ります */
  }
  /* 3. 地図の背景装飾（もしあれば）の位置も調整 */
  /* 現状のHTMLには .hero-overlay がありますが、もしこれが地図用なら調整が必要です */
  /*
  .hero-overlay {
      left: -30%; // 例
  }
  */
}
/* =========================================
   ▼ 3. 会社概要・事業案内（全画面背景切り替え版）
   ========================================= */
.section-big-links {
  position: relative; /* 基準点 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 40rem;
  overflow: hidden; /* はみ出し禁止 */
  background-color: #333; /* 背景ロードまでの色 */
}

/* --- 1. リンクアイテム（枠）の基本設定 --- */
.big-link-item {
  position: relative;
  width: 50%;
  height: 100%;
  text-decoration: none;
  color: white;
  z-index: 10; /* 背景より手前 */
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s; /* 薄くなる動き */
}

/* --- 2. 平時の個別背景画像 (.normal-bg) --- */
.normal-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 1;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

/* ★追加：画像の上に「下から黒くなる」グラデーションを重ねる */
.normal-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 下(0%)が真っ黒(0.8)で、上の方(60%)に向かって透明になるグラデーション */
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.8)), color-stop(60%, transparent));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 60%);
  z-index: 1; /* 画像のすぐ上に重ねる */
}
@media screen and (max-width: 800px) {
  .normal-bg::after {
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.8)), color-stop(80%, transparent));
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 80%);
  }
}

/* ★重要★ どちらかにホバーしたら、平時の個別背景は消す！ */
.section-big-links.is-left-hover .normal-bg,
.section-big-links.is-right-hover .normal-bg {
  opacity: 0;
}

/* --- 3. ホバー用の全画面画像 (.hover-big-bg) --- */
.hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5; /* 平時背景(1)より手前、リンク文字(20)より奥 */
  pointer-events: none; /* マウスの邪魔をしない */
}

.hover-big-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  /* ▼▼▼ ここを修正します！ ▼▼▼ */
  /* 1. 「transform 6s linear」を消して、opacity（透明度）だけにします */
  -webkit-transition: opacity 0.6s ease-in-out;
  transition: opacity 0.6s ease-in-out;
  /* 2. 「scale(1.05)」を消して「1（等倍）」にします */
  -webkit-transform: scale(1);
          transform: scale(1);
  z-index: 1;
}

/* 左（会社概要）にホバーした時 → 左用画像を出す */
.section-big-links.is-left-hover .bg-for-company {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  z-index: 2;
}

/* 右（事業案内）にホバーした時 → 右用画像を出す */
.section-big-links.is-right-hover .bg-for-business {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  z-index: 2;
}

/* ▼▼▼ 追加：ホバー用画像の上に、半透明の黒い幕を張る ▼▼▼ */
.hover-big-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 黒の濃さはここの数字（0.5）で調整！ */
  /* 0.3(薄い) 〜 0.7(真っ暗) くらいがオススメ */
  background-color: rgba(0, 0, 0, 0);
  z-index: 1; /* 画像の上に重ねる */
}

/* --- 4. テキストコンテンツの切り替え設定 --- */
.link-content {
  position: relative;
  z-index: 20; /* 画像より絶対手前 */
  padding: 4rem;
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@media screen and (max-width: 800px) {
  .link-content {
    padding-left: 2.8rem;
    padding-right: 2.8rem;
  }
}

/* ① 平時用テキスト */
.normal-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  /* ★追加：一番下だとギリギリすぎるので、少し余白を持たせる */
  padding-bottom: 1rem;
}

/* ★追加：文字をより読みやすくするための影（念のため） */
.normal-content .jp-title,
.normal-content .eng-title {
  color: #fff;
}

/* ② ホバー用テキスト（初期状態：隠す） */
.hover-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  opacity: 0;
  -webkit-transform: translateY(3rem);
          transform: translateY(3rem);
  text-align: left;
}

.hover-content .jp-title {
  margin-bottom: -0.5rem;
}

/* ホバー時の文字色調整（背景に負けないように） */
.hover-content .jp-title,
.hover-content .eng-title {
  color: #fff;
  text-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.8);
}

.hover-content .desc-text {
  font-family: "Noto Sans JP";
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.8);
  font-size: 1.5rem;
  line-height: 1.8;
  margin-bottom: 1rem;
}

/* 英語タイトル（Company / Business） */
.section-big-links .eng-title {
  font-size: 2.4rem; /* ここを2.4remに */
}

/* 日本語タイトル（会社概要 / 事業案内） */
.section-big-links .jp-title {
  font-size: calc(52rem * 0.1);
  /* ※もし文字が大きすぎて行間が詰まって見える場合は、ここも調整してください */
  /* line-height: 1.2; */
}
@media screen and (max-width: 1000px) {
  .section-big-links .jp-title {
    font-size: calc(52rem * 0.1 * (0.975 - 52 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .section-big-links .jp-title {
    font-size: calc(52rem * 0.1 * (0.975 - 52 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .section-big-links .jp-title {
    font-size: clamp(1.6rem, 52rem * 0.1 * (0.975 - 52 / 10 / 12), 9999rem);
  }
}

/* =========================================
   ▼ 5. 動きの連動設定（ここを全部書き換え！）
   ========================================= */
/* ------ ケースA：左（Company）にホバーした時 ------ */
/* 1. 自分（左）の元の小さな背景画像は「完全に消す」 */
/* ★これが今回の「透けて見える」を直すカギです */
.section-big-links.is-left-hover .link-company .normal-bg {
  opacity: 0;
}

/* 2. 相手（右）の背景画像は「薄暗く残す」 */
.section-big-links.is-left-hover .link-business .normal-bg {
  opacity: 0;
}

/* 3. テキストの動き（そのまま） */
.section-big-links.is-left-hover .link-company .normal-content {
  opacity: 0;
  -webkit-transform: translateY(-3rem);
          transform: translateY(-3rem);
}

.section-big-links.is-left-hover .link-company .hover-content {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/* ------ ケースB：右（Business）にホバーした時 ------ */
/* 1. 自分（右）の元の小さな背景画像は「完全に消す」 */
.section-big-links.is-right-hover .link-business .normal-bg {
  opacity: 0;
}

/* 2. 相手（左）の背景画像は「薄暗く残す」 */
.section-big-links.is-right-hover .link-company .normal-bg {
  opacity: 0;
}

/* 3. テキストの動き（そのまま） */
.section-big-links.is-right-hover .link-business .normal-content {
  opacity: 0;
  -webkit-transform: translateY(-3rem);
          transform: translateY(-3rem);
}

.section-big-links.is-right-hover .link-business .hover-content {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/* =========================================
   ▼ ホバーした側の背景を黒くする演出
   ========================================= */
/* 1. まず「黒い幕」を左右のリンクに仕込んでおく（最初は見えない） */
.big-link-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 黒色の濃さ調整（0.5 = 50%の黒） */
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0; /* 最初は透明にして隠しておく */
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s; /* ふわっと出す */
  z-index: 5; /* 背景画像より手前、文字より奥 */
  pointer-events: none; /* マウスの邪魔をしない */
}

/* 2. 左（会社概要）にホバーした時 → 左の幕を出す */
.section-big-links.is-left-hover .link-company::before {
  opacity: 1;
}

/* 3. 右（事業案内）にホバーした時 → 右の幕を出す */
.section-big-links.is-right-hover .link-business::before {
  opacity: 1;
}

/* --- ボタンデザイン --- */
.btn-text img {
  margin-right: 0.6rem;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
  .section-big-links {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: auto;
  }
  .big-link-item {
    width: 100%;
    height: 30rem;
  }
  .hover-overlay {
    display: none;
  } /* スマホでは全画面演出を切る（重いので） */
  .normal-bg {
    opacity: 1 !important;
  } /* スマホでは常に個別画像を表示 */
  .hover-content {
    position: relative;
    opacity: 1;
    -webkit-transform: none;
            transform: none;
    background: rgba(0, 0, 0, 0);
  }
  .normal-content {
    display: none;
  }
}
/* =========================================
   ▼ トップページ専用：採用情報＆お問い合わせ
   （前のコードを消して、これを貼ってください！）
   ========================================= */
/* 1. 採用情報エリアの大枠 */
.top-recruit {
  position: relative;
  width: 100%;
  /* 画像をしっかり見せたい高さをここで指定！ */
  height: 60rem;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

/* 画像を画面の端から端まで100%表示にする */
.recruit-bg-img {
  position: absolute;
  top: 0;
  right: 0;
  width: 64%; /* これで幅が戻ります！ */
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 100% 50%;
     object-position: 100% 50%;
  z-index: 1;
}

.white-overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 64%;
  height: 100%;
  z-index: 2;
}
.white-overlay::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  display: block;
  width: 100%;
  max-width: 30rem;
  height: 100%;
  background: #FFFFFF;
  background: -webkit-gradient(linear, left top, right top, from(rgb(255, 255, 255)), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
}

/* =========================================
   ▼ 採用情報セクションのデザイン装飾
   ========================================= */
.recruit-container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
}

/* --- 1. 左上の白い箱のデザイン --- */
.recruit-content {
  /* ★背景色を消す！（または transparent にする） */
  background-color: transparent;
  /* ★影も消す！ */
  -webkit-box-shadow: none;
          box-shadow: none;
  /* ★左の緑の線も、もし不要なら消す！ */
  border: none;
  /* ▼▼▼ paddingは残す！！ ▼▼▼ */
  /* これで「文字の周りの空間」だけを確保します */
  padding: 0rem; /* 横のpadding(6.0rem)は取っちゃってもいいかも？位置によります！ */
  /* 横幅の制限はそのまま（改行位置のため） */
  max-width: 60rem;
  position: relative;
  z-index: 5;
  margin-top: 11.8rem;
}

.recruit-label {
  color: #999999;
  font-family: "Oswald";
  font-size: 2.4rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.05em;
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
}

/* --- 3. メインタイトル「食と人をつなぐ仕事」 --- */
.recruit-content h2 {
  font-size: 4.2rem; /* 助詞（と・をつなぐ）の基本サイズ */
  font-weight: 900;
  line-height: 1.4;
  color: #333;
  margin-top: 0;
  margin-bottom: 3rem;
  letter-spacing: 0.05em;
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
}

/* ★ここがポイント！特定の文字だけデカくする設定 */
.recruit-content h2 span {
  font-size: 5.2rem; /* 「食・人・仕事」をガツンと大きく！ */
  font-weight: 900; /* 極太にする */
  margin: 0; /* 前後の余白 */
  position: relative;
  top: 0.3rem; /* 大きい文字の位置微調整 */
  letter-spacing: 0.05em;
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
}

.recruit-content h2 .text-normal {
  font-size: 4.2rem; /* 元のサイズに戻す */
  /* または font-size: 80%; とかでもOK */
}

/* 「食」「人」を緑色にする */
.recruit-content h2 .text-big_green {
  color: #3c6e50; /* メインの緑色 */
}

/* 「仕事」を赤色にする */
.recruit-content h2 .text-red {
  color: #d24146; /* 赤色 */
}

/* 色の指定（HTMLのクラスに対応） */
.recruit-content h2 .text-green {
  color: #3c6e50;
}

.recruit-content h2 .text-red {
  color: #d24146;
}

/* --- 4. 本文テキスト --- */
.recruit-content p {
  font-size: 1.6rem;
  line-height: 2; /* 行間を広めに */
  color: #333;
  font-weight: 500;
  margin-bottom: 3.5rem;
  font-family: "Noto Sans JP";
  padding-bottom: 1rem;
  letter-spacing: 0.05em;
}

/* --- スマホ対応（文字サイズ調整） --- */
@media (max-width: 1000px) {
  .recruit-content {
    padding: 3rem;
  }
  .recruit-content h2 span {
    font-size: 3.6rem;
  } /* スマホでは少し控えめに */
}
/* =========================================
   ▼ スマホ（100.0rem以下）：採用情報＆お問い合わせ修正
   ========================================= */
@media (max-width: 1000px) {
  /* 1. 採用セクション全体の余白調整 */
  .top-recruit {
    /* 下に画像を置くためのスペースを確保 */
    padding-top: 3rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    aspect-ratio: auto;
    gap: 2rem 4rem;
    height: auto;
  }
  /* 2. 背景画像（トラック運転手）の位置修正 */
  /* 3. テキストエリアの余白修正 */
  /* タイトル文字サイズの微調整（必要であれば） */
}
@media screen and (max-width: 1000px) and (max-width: 800px) {
  .top-recruit {
    padding-top: 2.4rem;
  }
}
@media screen and (max-width: 1000px) and (max-width: 560px) {
  .top-recruit {
    padding-top: 1.8rem;
  }
}
@media (max-width: 1000px) {
  .recruit-bg-img {
    position: static;
    display: block;
    width: 100%;
  }
  .white-overlay {
    display: none;
  }
  .recruit-content {
    padding: 0;
    max-width: 100%;
    /* 画像と重なっても文字が手前に来るように */
    position: relative;
    z-index: 2;
    margin-top: 5rem;
    margin-bottom: 5rem;
  }
}
@media screen and (max-width: 1000px) and (max-width: 800px) {
  .recruit-content {
    margin-top: 4rem;
  }
}
@media screen and (max-width: 1000px) and (max-width: 560px) {
  .recruit-content {
    margin-top: 3rem;
  }
}
@media screen and (max-width: 1000px) and (max-width: 800px) {
  .recruit-content {
    margin-bottom: 4rem;
  }
}
@media screen and (max-width: 1000px) and (max-width: 560px) {
  .recruit-content {
    margin-bottom: 3rem;
  }
}
@media (max-width: 1000px) {
  .recruit-content h2 {
    font-size: clamp(3.3rem, 3.3rem + 2.5 * (100vw - 37.5rem) / 62.5, 5.8rem);
  }
  .recruit-content h2 span {
    font-size: 100%;
  }
  .recruit-content h2 .text-normal {
    font-size: 80%;
  }
  .recruit-content p {
    margin-bottom: 2.5rem; /* PC版(3.5rem)を上書きして狭くする */
    padding-bottom: 0;
  }
}
/* point */
.feature_lead_area {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; /* 上下中央揃え */
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 8rem 0; /* 上下の余白 */
  background-color: #fff; /* 必要なら背景色 */
  overflow: hidden; /* 横スクロール防止 */
}

/* --- 左側：画像エリア --- */
.lead_visual {
  width: 55%; /* 画像の幅 */
  -ms-flex-negative: 0;
      flex-shrink: 0; /* 縮まないように */
}

.lead_img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0 0.4rem 0.4rem 0; /* お好みで角丸 */
}

/* --- 右側：文章グループエリア --- */
.lead_content_group {
  width: 45%; /* 残りの幅 */
  padding-right: 0; /* 右端の余白 */
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 10; /* 画像より手前に表示 */
}

/* --- 緑の帯（タイトル） --- */
.lead_title_band {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1.5rem; /* 帯同士の隙間 */
  /* ★ここがポイント！画像に重ねる設定 */
  margin-top: 15rem;
  margin-left: -30rem; /* 左に5.0rem引っ張って画像に被せる */
  margin-bottom: 4rem; /* 下の文字との隙間 */
}

.title-line {
  font-weight: 900;
  background-color: #3c6e50; /* 緑色 */
  color: #fff;
  font-size: clamp(3.2rem, 3.2rem + 1.6 * (100vw - 56rem) / 64, 4.8rem);
  padding: 1.8rem 4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1.2;
  height: auto;
  /* 斜めにする */
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
  -webkit-box-shadow: 0.5rem 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
          box-shadow: 0.5rem 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
  /* 箱の幅を「中の文字」に合わせる */
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  /* ★ここが重要！強制的に1行にする魔法 */
  white-space: nowrap;
}

/* 2行目を少し右にずらす */
.title-line:nth-child(2) {
  margin-left: 4rem;
}

.box-1200_2 {
  width: 100%;
  max-width: 120rem; /* ★ここが重要！最大でも120.0remにする */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* 中身（画像と文章）を横並びにする */
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; /* ほどよく離す */
  /* スマホで横にはみ出さないように */
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 2rem; /* 画面端との隙間も少し確保 */
  gap: 10rem;
}

/* =========================================
   ▼ PC版のみ：画像を左端にくっつける設定
   ========================================= */
@media (min-width: 1001px) {
  .box-1200_2 {
    /* 1. 枠の制限を解除して、画面いっぱいに広げる */
    max-width: 100%;
    margin: 0;
    /* 2. 左の余白を「0」にする（これで画像が左端にくっつく！） */
    padding-left: 0;
    /* 3. 右の余白を「計算」で作る（これで文章の位置は120.0remレイアウトと揃う） */
    /* 計算式： (画面幅 - 120.0rem) ÷ 2 + 元々の余白2.0rem */
    padding-right: calc((100vw - 120rem) / 2 + 2rem);
    /* 画像と文字の隙間（さっきの設定を維持） */
    gap: 10rem;
  }
  /* 画像エリアのサイズ調整（お好みで調整OK） */
  .lead_visual {
    width: 55%; /* 画面の半分ちょいを使う */
  }
  .lead_content_group {
    /* 文章エリアは残りの幅を使う */
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}
/* --- 黒い説明文 --- */
.lead_description {
  /* 帯の下に自然に配置されます */
}

.lead_description p {
  margin-top: 0;
  font-size: 2rem;
  line-height: 2; /* 行間広め */
  color: #333;
  font-weight: 500; /* 太字 */
  letter-spacing: 0.05em;
}

/* --- 2. 4つの特徴グリッド --- */
.feature_grid_area {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2列 */
  gap: 10rem;
  margin-bottom: 0rem;
}

.feature_item {
  width: 100%;
}

.item_img img {
  width: 100%;
  height: auto;
  margin-bottom: 2rem;
}

/* Feature番号とタイトル */
.item_header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; /* 文字の上下中央を揃える */
  gap: 0; /* 隙間はスラッシュの方で調整するので0にする */
  margin-bottom: 2rem;
  /* ▼以前の「左の線」の設定を打ち消して消します */
  border-left: none;
  padding-left: 0;
}

.feat_num {
  font-family: "Oswald";
  /*font-style: italic;*/
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
  font-size: 1.8rem; /* 少し大きく */
  color: #999; /* グレー */
  font-weight: 500;
  /* 縦位置の調整 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* ▼ここが「斜め線」を作る魔法のコードです */
.feat_num::after {
  content: ""; /* 空箱を作る */
  display: block;
  width: 0.5rem; /* 線の太さ */
  height: 6rem; /* 線の長さ（高さ） */
  background-color: var(--main-green); /* 緑色 */
  /* 斜めにする */
  -webkit-transform: skewX(-1.5deg);
          transform: skewX(-1.5deg);
  /* 文字との距離（左の余白、右の余白） */
  margin-left: 2rem;
  margin-right: 2rem;
}

.num_big {
  font-family: "Oswald";
  font-size: 3.6rem; /* ★数字をガツンと大きく！ */
  line-height: 1; /* 行間を詰める */
  margin-left: 0.5rem; /* Featureとの隙間 */
}

.feat_title {
  font-weight: 900;
  font-size: 3.2rem;
  margin: 0;
  line-height: 1.2;
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
  /* お好みで文字色を濃くする */
  color: #333;
}

.item_desc {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #333;
}

@media screen and (max-width: 1000px) {
  br.sp-br-none {
    display: none;
  }
}
/* --- スマホ対応 (グリッド) --- */
@media (max-width: 1000px) {
  .feature_grid_area {
    grid-template-columns: 1fr; /* 1列にする */
    gap: 5rem;
  }
}
/* --- 3. 下部メッセージエリア --- */
.feature_bottom_message {
  padding-top: 10rem; /* 上の隙間 */
  padding-bottom: 0rem; /* 下の隙間 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 1000px) {
  .feature_bottom_message {
    padding-top: 5rem; /* 上の隙間 */
  }
}

/* 斜めの背景箱 */
.message_skew_box {
  background-color: #f4f5f5; /* 薄い緑グレー */
  width: 100%;
  max-width: 80rem;
  padding: 2rem 4rem;
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg); /* 緩やかに斜め */
  text-align: center;
}

@media (min-width: 1001px) {
  .feature_bottom_message .message_skew_box {
    max-width: 100rem;
  }
}
/* 中身の傾きを戻す */
.message_inner {
  -webkit-transform: skewX(20deg);
          transform: skewX(20deg);
}

.message_inner h3 {
  font-size: calc(38rem * 0.1);
  color: #3c6e50;
  font-weight: 700;
  /*font-style: italic;*/
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
  margin-bottom: 2.5rem;
}
@media screen and (max-width: 1000px) {
  .message_inner h3 {
    font-size: calc(38rem * 0.1 * (0.975 - 38 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .message_inner h3 {
    font-size: calc(38rem * 0.1 * (0.975 - 38 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .message_inner h3 {
    font-size: clamp(1.6rem, 38rem * 0.1 * (0.975 - 38 / 10 / 12), 9999rem);
  }
}

.message_inner p {
  /*transform: skewX(10deg);*/
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 2;
}
@media screen and (max-width: 1000px) {
  .message_inner p {
    -webkit-transform: none;
            transform: none;
  }
}

/* --- スマホ対応 (メッセージ) --- */
@media (max-width: 1000px) {
  .message_skew_box {
    -webkit-transform: none;
            transform: none; /* スマホでは斜めを解除（見やすさ優先） */
    padding: 2rem 2rem;
  }
  .message_inner {
    -webkit-transform: none;
            transform: none;
  }
}
/* --- 100.0rem以下のときだけ適用される設定 --- */
@media (max-width: 1000px) {
  /* 1. 全体の枠：横並びをやめて「縦並び」にする */
  .feature_lead_area {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; /* 縦積み */
    padding-bottom: 6rem; /* 下に少し余白 */
    height: auto; /* 高さをなりゆきに */
  }
  /* 2. 画像エリア：幅を画面いっぱいに */
  .lead_visual {
    width: 100%;
  }
  /* 3. 文章グループ（右側だったやつ）：幅を100%にして下に持ってくる */
  .lead_content_group {
    width: 100%;
    padding: 0 2rem; /* 左右に少し余白を入れる */
    margin-top: 2rem; /* ★画像を少しだけ踏ませるとカッコいい（嫌なら.0remに） */
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    /* PC用の配置設定をリセット */
    display: block;
  }
  /* 4. 緑の帯：真ん中に寄せるか、左のままにするか */
  .lead_title_band {
    /* PCで設定したマイナス余白などをリセット */
    margin-left: 0;
    margin-bottom: 3rem;
  }
  .box-1200_2 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; /* 縦並びにする */
    gap: 4rem; /* 隙間をスマホ用に狭くする */
  }
  .lead_visual {
    width: 100%; /* 画像を幅いっぱいに */
  }
  /* スマホで文字がはみ出すのを防ぐため、ここだけ折り返しを許可する */
  .title-line {
    white-space: normal;
    padding: 1.5rem 2rem;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content; /* 幅いっぱい */
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .title-line:nth-child(2) {
    margin-left: 1em;
  }
  /* 5. 黒い説明文：変な余白を消して素直に置く */
  .lead_description {
    /* PCで設定した「左に引っ張る設定」を解除 */
    margin-left: 0 !important;
    margin-top: 0;
    padding-left: 0;
    /* 見やすく調整 */
    text-align: left; /* 左揃え */
  }
  .lead_description p {
    font-size: 1.5rem; /* スマホ向けの文字サイズ */
    line-height: 1.8;
  }
}
@media (max-width: 1000px) {
  /* ...（他の設定はそのまま）... */
  /* 1. 緑の帯：PC用の「上7.0rem」の余白を消す！ */
  .lead_title_band {
    margin-top: 0; /* ★ここが空白の犯人です！0にします */
    margin-left: 0;
    margin-bottom: 2rem; /* 下の文字との隙間は少し残す */
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  /* 2. 文章グループ：ここにも余白があるので調整 */
  .lead_content_group {
    width: 100%;
    padding: 0 2rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    /* 画像との距離は親のgapで決めるので、ここは0でOK */
    margin-top: 0;
  }
  /* 3. 全体の枠：画像と文章の隙間（gap）を調整 */
  .box-1200_2 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    /* ★ここで「画像」と「下の文字」の距離を決めます！ */
    gap: 3rem; /* 4.0remだと広い場合は3.0remくらいに */
  }
}
/* info */
/* =========================================
   1. 共通設定 & PCベース (まずはPCのデザインを作る)
   ========================================= */
/* --- 共通見出し --- */
.section_title_green {
  text-align: center;
  font-size: calc(48rem * 0.1);
  color: #3c6e50;
  font-weight: 900;
  margin-bottom: 5rem;
  /*font-style: italic;*/
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
  letter-spacing: 0.1em;
}
@media screen and (max-width: 1000px) {
  .section_title_green {
    font-size: calc(48rem * 0.1 * (0.975 - 48 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .section_title_green {
    font-size: calc(48rem * 0.1 * (0.975 - 48 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .section_title_green {
    font-size: clamp(1.6rem, 48rem * 0.1 * (0.975 - 48 / 10 / 12), 9999rem);
  }
}

.section_title_green span {
  text-align: center;
  color: #3c6e50;
  /*font-style: italic;*/
  display: inline-block;
  letter-spacing: 0.1em;
}

/* --- 代表挨拶エリア（PC設定） --- */
.greeting_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* 横並び */
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 5rem 10rem;
}

.greeting_text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1; /* PC: 残りの幅を全部使う */
  width: auto;
}

.greeting_text_body p {
  font-weight: 500;
  line-height: 2;
  font-size: 1.6rem;
  margin-top: 0;
  margin-bottom: 1rem;
  text-align: justify;
}

.greeting_signature {
  text-align: right;
  margin-top: 3rem;
}

.job_title {
  font-size: 1.8rem; /* 文字サイズ（お好みで調整） */
  font-weight: 500;
  margin-right: 1.5rem; /* 名前との間の隙間 */
}

/* --- 名前（大きく） --- */
.rep_name {
  font-size: 2.4rem; /* ★ここを大きく！ */
  font-weight: 500; /* 太字で強調 */
}

/* スマホ対応（少し小さくする） */
@media (max-width: 1000px) {
  .job_title {
    font-size: 1.4rem;
  }
  .rep_name {
    font-size: 2.4rem;
  }
}
.greeting_image {
  /* ★ここが原因！箱のサイズを直接小さくします */
  width: 33rem; /* 例: 50.0rem → 35.0rem に変更 */
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.greeting_image img {
  /* ★ここも変更！箱いっぱいになるようにします */
  width: 100%; /* 85% → 100% に変更 */
  height: auto;
  -webkit-box-shadow: 0.5rem 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
          box-shadow: 0.5rem 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
}

/* --- 会社概要テーブル（PC設定） --- */
.outline_section {
  background-color: #f4f5f5;
  color: #333;
  /* 画面幅いっぱいに広げる設定 */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.company_table {
  width: 100%;
  max-width: 120rem;
  margin: 0 auto;
  border-collapse: collapse;
  font-family: "Noto Sans JP", sans-serif;
}

.company_table th,
.company_table td {
  font-family: "Noto Sans JP";
  font-size: 1.6rem;
  font-weight: 500;
  border-bottom: 1px solid #333;
  padding: 1.8rem 2.4rem;
  text-align: left;
  vertical-align: top;
}

/* テーブル見出し（PC設定） */
.company_table th {
  background-color: #ffffff;
  width: 20rem; /* PCは固定幅 */
  white-space: nowrap; /* 改行しない */
  font-weight: bold;
  vertical-align: middle;
}

.company_table td {
  line-height: 1.8;
}

/* --- アクセス（PC設定） --- */
.access_subtitle {
  font-size: 3.6rem;
  color: #333;
  font-weight: 900;
  font-style: italic; /* 文字自体も少し斜めにする */
  margin-bottom: 1.5rem;
  line-height: 1.2;
  /* ▼▼ ここを変更・追加します ▼▼ */
  /* border-left: .8rem solid #2f5d50;  ← これは削除します */
  position: relative; /* 斜線を配置するための基準点にします */
  padding-left: 2rem; /* 斜線の分だけ、文字の左側に余白を多めに取ります */
}

/* ▼▼ 新しく追加する部分（斜線のデザイン） ▼▼ */
.access_subtitle::before {
  content: ""; /*空の要素を作ります*/
  position: absolute; /*自由な位置に配置できるようにします*/
  left: 0; /*親要素の左端に配置*/
  top: 0; /*親要素の上端に配置*/
  width: 0.4rem; /*斜線の太さ（お好みで調整してください）*/
  height: 100%; /*高さを文字の要素に合わせます*/
  background-color: #3c6e50; /*斜線の色*/
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg); /*【重要】長方形を斜めに歪ませます*/
}

.access_block {
  margin-bottom: 5rem;
}

.access_map {
  width: 100%;
  background-color: #eee;
}

.access_map iframe {
  width: 100%;
  height: 50rem;
  border: none;
}

@media (max-width: 1000px) {
  .access_map iframe {
    height: 60rem;
  }
}
/* =========================================
   2. スマホ・タブレット対応 (100.0rem以下の場合に適用)
   ========================================= */
@media (max-width: 1000px) {
  /* --- 代表挨拶：縦並びにする --- */
  .greeting_box {
    padding-left: 0;
    padding-right: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse; /* 縦積み */
  }
  .greeting_text {
    width: 100%;
  }
  .greeting_image {
    display: block;
    width: 80%; /* スマホでは幅いっぱい */
    max-width: min(40rem, 100%);
    margin-left: auto;
    margin-right: auto;
  }
  /* --- 会社概要：テーブル調整 --- */
  .company_table th {
    width: 30%; /* 固定幅をやめて％にする */
    min-width: 10rem;
    white-space: normal; /* 必要なら改行させる */
  }
  .company_table td {
    /* スマホで文字が窮屈ならここを調整 */
    padding: 1.5rem;
  }
  /* --- アクセス：地図を少し小さく --- */
  .access_map iframe {
    height: 25rem; /* スマホでの地図の高さ */
  }
}
@media (max-width: 1000px) {
  .greeting_section,
  .outline_section,
  .access_section {
    /* ▼ テンプレートの「box-●●●」の考え方をここで採用！ ▼ */
    padding-left: 5%; /* 左に5%の余白 */
    padding-right: 5%; /* 右に5%の余白 */
    /* 余白を含めて幅計算する（崩れ防止の必須呪文） */
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    /* 念のため幅を100%にしておく */
    width: 100%;
  }
  /* 中にあるテーブルがはみ出さないように念押し */
  .company_table {
    width: 100%;
  }
}
/* service */
/* =========================================
   事業案内ページ（Business Guide）専用スタイル
   ========================================= */
/* --- 1. 導入メッセージ --- */
.biz_intro_section {
  text-align: center;
  padding: 4rem 2rem 6rem;
  margin: 0 auto;
}

.biz_catch_copy {
  color: #3c6e50; /* 既存の変数を使用 */
  font-size: calc(38rem * 0.1);
  font-weight: 700;
  margin-bottom: 3rem;
  /*font-style: italic;*/
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
}
@media screen and (max-width: 1000px) {
  .biz_catch_copy {
    font-size: calc(38rem * 0.1 * (0.975 - 38 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .biz_catch_copy {
    font-size: calc(38rem * 0.1 * (0.975 - 38 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .biz_catch_copy {
    font-size: clamp(1.6rem, 38rem * 0.1 * (0.975 - 38 / 10 / 12), 9999rem);
  }
}

.biz_lead_text {
  font-size: 1.8rem;
  line-height: 2;
  font-weight: 500;
}

/* --- 2. エリア＆貨物ラッパー（背景グレー） --- */
.biz_area_cargo_wrapper {
  /*background-color: #f4f5f5; /* 薄いグレー背景 */
  background: -webkit-gradient(linear, left top, right top, color-stop(75%, #f4f5f5), color-stop(75%, transparent));
  background: linear-gradient(to right, #f4f5f5 75%, transparent 75%);
  padding: 10rem 0 8rem;
  /* 画面幅いっぱいに広げるおまじない */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 10rem;
}
@media screen and (max-width: 1000px) {
  .biz_area_cargo_wrapper {
    padding-top: 5rem;
  }
}
@media screen and (max-width: 1000px) and (max-width: 800px) {
  .biz_area_cargo_wrapper {
    padding-top: 4rem;
  }
}
@media screen and (max-width: 1000px) and (max-width: 560px) {
  .biz_area_cargo_wrapper {
    padding-top: 3rem;
  }
}

.biz_flex_container {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start; /* 上揃え */
  position: relative;
  gap: 5rem 10rem;
}

/* 左側コンテンツ */
.biz_left_content {
  width: 45%;
  z-index: 2; /* 地図より手前に */
}

/* タイトルスタイル（緑・斜体） */
.biz_script_title {
  color: #3c6e50;
  font-size: calc(48rem * 0.1);
  font-weight: 900;
  /*font-style: italic;*/
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
  font-family: "Noto Sans JP", sans-serif;
  margin-bottom: 2rem;
  letter-spacing: 0.05em;
  margin-top: 0;
}
@media screen and (max-width: 1000px) {
  .biz_script_title {
    font-size: calc(48rem * 0.1 * (0.975 - 48 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .biz_script_title {
    font-size: calc(48rem * 0.1 * (0.975 - 48 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .biz_script_title {
    font-size: clamp(1.6rem, 48rem * 0.1 * (0.975 - 48 / 10 / 12), 9999rem);
  }
}

/* 通常テキスト */
.biz_desc_text {
  font-size: 1.6rem;
  line-height: 1.8;
  margin-bottom: 2rem;
  font-weight: 500;
}

/* 白い箱（主な取扱貨物） */
.biz_cargo_box {
  background: #fff;
  padding: 4rem;
  -webkit-box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.05);
          box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.05);
  margin-top: 5rem; /* 上との隙間 */
}
.biz_cargo_box .biz_script_title {
  font-size: calc(36rem * 0.1);
}
@media screen and (max-width: 1000px) {
  .biz_cargo_box .biz_script_title {
    font-size: calc(36rem * 0.1 * (0.975 - 36 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .biz_cargo_box .biz_script_title {
    font-size: calc(36rem * 0.1 * (0.975 - 36 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .biz_cargo_box .biz_script_title {
    font-size: clamp(1.6rem, 36rem * 0.1 * (0.975 - 36 / 10 / 12), 9999rem);
  }
}

/* 貨物リスト（緑の丸ポチ） */
.biz_cargo_list {
  list-style: none;
  padding: 0;
  margin-top: 2rem;
}

.biz_cargo_list li {
  font-weight: 500;
  font-size: 1.8 rem;
  margin-bottom: 1rem;
  padding-left: 2rem;
  position: relative;
  color: #333;
}

.biz_cargo_list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05rem; /* 丸の位置調整 */
  width: 1rem;
  height: 1rem;
  background-color: #28a078; /* 明るめのエメラルドグリーン */
  border-radius: 50%;
}

/* 右側：地図エリア */
.biz_right_map {
  width: 50%;
  position: relative;
}
@media screen and (max-width: 1000px) {
  .biz_right_map {
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
  }
}

.biz_right_map img {
  width: 100%;
  height: auto;
  /* 画像に影をつける場合 */
  /* box-shadow: 1.0rem 1.0rem .0rem rgba(60, 110, 80, 0.2); 緑の影風 */
}

/* --- 3. トラック集合写真エリア --- */
.biz_truck_hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: 40rem; /* 高さは画像に合わせて調整 */
  overflow: hidden;
  margin-bottom: 8rem;
}

.biz_truck_hero img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover; /* 画像を枠いっぱいにトリミング表示 */
}

/* --- 4. 保有車両エリア --- */
.biz_fleet_section {
  max-width: 120rem;
  padding: 0 2rem;
  margin: 0 auto -2rem;
}

.center_title {
  text-align: center;
  margin-bottom: 1rem;
}

.center_desc {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 5rem;
}

/* テーブルスタイル */
.biz_table_scroll {
  margin-bottom: 6rem;
}

.biz_fleet_table {
  width: 100%;
  border-collapse: collapse;
}

.biz_fleet_table th,
.biz_fleet_table td {
  padding: 1.5rem;
  text-align: center; /* 中央揃え */
  border-bottom: 1px solid #333;
  font-size: 1.6rem;
  font-weight: 500intro_text;
}

.biz_fleet_table th {
  height: 4rem; /* 高さを4.0remに固定 */
  padding: 0 1rem; /* 上下の余白を0にして、高さ指定を優先させる */
  background-color: #f4f5f5;
  font-weight: 500;
  color: #333;
}

.biz_fleet_table td {
  height: 4.7rem;
  font-weight: 500;
}

/* 最後の行の下線も表示するなら特になし */
/* ギャラリー（4列グリッド） */
.biz_fleet_gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列 */
  gap: 2rem;
}

.fleet_img_item img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #eee;
}

/* =========================================
   スマホ対応（100.0rem以下）
   ========================================= */
@media (max-width: 1000px) {
  /* コンテナを縦並びに */
  .biz_flex_container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .biz_left_content,
  .biz_right_map {
    width: 100%;
  }
  .biz_right_map {
    margin-top: 4rem; /* 地図の上に余白 */
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1; /* 地図をテキストより上に持っていきたい場合はこれを有効化 */
    /* 今回の画像デザインだと地図は右（PC）なので、スマホならテキストの下でOKなら orderは削除 */
  }
  .biz_truck_hero {
    height: 25rem; /* スマホなら高さを減らす */
  }
  /* テーブル横スクロール対応（はみ出さないように） */
  .biz_table_scroll {
    overflow-x: auto;
    white-space: nowrap;
  }
  .biz_fleet_table th,
  .biz_fleet_table td {
    min-width: 10rem; /* 最低幅 */
  }
  /* ギャラリーを2列に */
  .biz_fleet_gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}
/* recruit */
/* =========================================
   ▼ 採用情報ページ (Sub Page: Recruit)
   ========================================= */
/* 1. エリア全体を強制的に画面幅(100vw)まで広げる */
.recruit_intro_area {
  /* 親の箱（100.0rem幅など）を無視して、画面の端から端まで広げる計算式 */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0; /* 余白をゼロにする */
  overflow: hidden; /* 横スクロールバーが出ないようにする */
  background-color: #fff; /* 背景白 */
  margin-bottom: 10rem;
}

/* タイトル位置の調整（広がった分、少し調整が必要かも） */
.recruit_intro_area .section_title_green {
  margin-top: 6rem;
  margin-bottom: 4rem;
  text-align: center;
}

/* 2. 画像とテキストを横並びにする箱 */
.recruit_intro_flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* 横並び */
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch; /* 高さを揃える */
  width: 100%;
}

/* 3. 左側の画像エリア（ここが重要！） */
.intro_img {
  width: 50%; /* 画面のちょうど半分 */
  margin: 0; /* 余白なし */
  -ms-flex-negative: 0;
      flex-shrink: 0; /* 縮まないように固定 */
  position: relative; /* 位置調整の基準 */
}

.intro_img img {
  width: 100%;
  height: 100%; /* 高さをエリアいっぱいに */
  -o-object-fit: cover;
     object-fit: cover; /* 縦横比を崩さずに枠を埋める */
  vertical-align: bottom; /* 画像下の隙間消し */
  /* ※もし画像の右側（人）が見切れる場合は、位置を調整できます */
  -o-object-position: center;
     object-position: center;
}

/* 4. 右側のテキストエリア */
.intro_text {
  width: 50%; /* 残りの半分 */
  max-width: 70rem;
  padding: 0 10rem 8rem; /* 文字が端に寄らないよう、たっぷりと余白を取る */
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 上下の真ん中に文字を持ってくる */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-weight: 500;
}

.intro_text p {
  margin-top: 0;
  font-size: 1.6rem; /* ←ここを変える！(今は1.6remにしてます) */
  font-weight: 500;
  line-height: 2; /* 行間も読みやすく広めに */
  letter-spacing: 0.05em; /* 文字の横の間隔 */
}

/* --- スマホ対応（スマホの時は縦並びに戻す） --- */
@media (max-width: 1000px) {
  .recruit_intro_flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .intro_img {
    width: 100%;
  }
  .intro_text {
    width: 100%;
    max-width: none;
    padding: 4rem 3rem;
  }
}
/* --- 2. スケジュール (3カラム) --- */
/* --- 見出しのデザイン（緑の斜め線付き） --- */
.timeline_header {
  font-size: 3.6rem; /* 大きめの文字 */
  font-weight: 900; /* 極太 */
  /*font-style: italic; */
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
  color: #333; /* 黒文字 */
  margin: 0 0 3rem 0; /* 下に余白 */
  line-height: 1.2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* 線と文字を横並びに */
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}

/* 緑の斜め線を作る */
.timeline_header::before {
  content: "";
  display: block;
  width: 0.6rem; /* 線の太さ */
  height: 3.5rem; /* 線の高さ */
  background-color: var(--main-green); /* 緑色 */
  margin-right: 1.5rem; /* 文字との距離 */
  -webkit-transform: translateY(0.1em) skewX(-1deg);
          transform: translateY(0.1em) skewX(-1deg); /* グイッと斜めにする */
}

/* 括弧内の文字（給食・冷凍食品など）を小さくする */
.timeline_header small {
  font-size: 2rem; /* メイン文字の6割くらいの大きさ */
  margin-left: 1rem; /* 少し隙間をあける */
  font-weight: 900; /* 太さは維持 */
  /*font-style: italic;*/
  -webkit-transform: -20deg;
          transform: -20deg;
}

/* スマホの時は少し文字を小さく */
@media (max-width: 900px) {
  .timeline_header {
    font-size: 2.2rem;
    margin-bottom: 2rem;
  }
  .timeline_header::before {
    height: 3rem;
  }
}
.schedule_area {
  margin-bottom: 10rem;
  /* もしエリア全体を中央寄せにしたい場合 */
  max-width: 120rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0 2rem;
}

.center_heading {
  text-align: center;
  margin-bottom: 6rem;
}

/* 3カラムのグリッド設定 */
.timeline_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3等分 */
  gap: 4rem; /* カラム間の隙間 */
  margin-bottom: 6rem;
}

/* --- 線（ボーダー）の設定 --- */
.timeline_border_wrapper {
  /* 左側に濃いグレーの線を引く */
  border-left: 0.3rem solid #555;
  /* 中身との余白（線の右側） */
  padding-left: 2.5rem;
  /* 位置調整の基準点 */
  position: relative;
  /* 下に少し線を伸ばす */
  padding-bottom: 2rem;
}

/* --- 各項目の箱 --- */
.timeline_item {
  position: relative; /* ドットを置く基準 */
  padding-top: 0.6rem;
  margin-bottom: 4rem; /* 次の項目までの距離 */
}
.timeline_item:nth-last-of-type(1) {
  margin-bottom: 0;
}

/* --- 緑の丸（ドット）を作る魔法 --- */
.timeline_item::before {
  content: "";
  position: absolute;
  /* 位置調整：線の真上に重ねる */
  left: -3.6rem; /* (線の太さ.3rem ÷ 2) + padding-left 2.5rem + (丸の半径) で微調整 */
  top: 1rem; /* 文字の高さに合わせて調整 */
  /* 丸の見た目 */
  width: 2rem;
  height: 2rem;
  background-color: #28a078; /* 緑色 (#3c6e50) */
  border-radius: 50%; /* 完全な円にする */
  /* お好みで白いフチをつける場合（線と分離して見せる） */
  /* border: .2rem solid #fff; */
}

/* --- 時間とタイトルの行 --- */
.time, .action {
  font-weight: 700;
}

.time_row {
  font-family: "Noto Sans JP", sans-serif;
  color: #333; /* 文字色：濃いグレー */
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 0.8rem;
  line-height: 1.4;
  /* フレックスボックスで揃える */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; /* スマホで崩れないように */
  gap: 1.5rem; /* 時間とタイトルの隙間 */
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.time_row .time {
  min-width: 8rem;
  font-size: 2rem;
  letter-spacing: 0.05em;
  font-weight: 500;
  color: #3c6e50;
}

.time_row .action {
  font-size: 2rem;
  font-weight: 700;
  color: #3c6e50; /* タイトルを緑にする場合 */
  /* 黒がいいなら color: #333; に変更 */
}

/* --- 説明文 --- */
.desc {
  font-size: 1.4rem;
  line-height: 1.8;
  color: #333;
  font-weight: 500; /* 画像に合わせて太字に */
  margin: 0;
}

/* --- スマホ対応（縦1列にする） --- */
@media (max-width: 900px) {
  .timeline_grid {
    grid-template-columns: 1fr; /* 1列 */
    gap: 6rem; /* 縦の隙間を広めに */
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
  }
  /* スマホで見やすいようにドット位置微調整 */
  .timeline_border_wrapper {
    padding-left: 2rem;
  }
  .timeline_item::before {
    left: -3.05rem;
  }
}
/* =========================================
   ▼ 自動スライダー：画面いっぱいに広げる（強力版）
   ========================================= */
.flow_slider_section {
  /* 親の幅制限を無視して、画面の端から端まで広げる */
  width: 100vw;
  /* 左端に持っていく */
  margin-left: calc(50% - 50vw);
  /* 右端にも広げる（ここが重要！） */
  margin-right: calc(50% - 50vw);
  /* ★追加：親の「最大幅制限」を強制解除する */
  max-width: 100vw !important;
  padding: 3rem 0 10rem;
  overflow: hidden; /* 横スクロールバー防止 */
}

/* スライダーの高さ調整 */
.flow-swiper {
  width: 100%;
  /* 画像の高さ + 上下の余白分くらい確保 */
}

/* ★ここが変更ポイント！ */
.flow-swiper .swiper-slide {
  /* 画像1枚の幅をここで強制的に決めます！ */
  /* 画像同士の隙間はお好みで（JSのspaceBetweenでも設定できますが） */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #fff;
}

.flow-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover; /* 枠に合わせてトリミング */
}

.flow-swiper .swiper-wrapper {
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
}

/* --- 3. 先輩の声 --- */
.voice_area {
  margin-bottom: 10rem;
  background: #f4f5f5;
  padding: 7rem 2rem;
  /* 全幅にするためのテクニック */
  margin-left: calc(50% - 50vw);
  width: 100vw;
}

.center_heading_text {
  text-align: center;
  margin-bottom: 3rem;
}

.center_heading p {
  font-size: 1.6rem; /* ←ここを好きなサイズに */
}

.voice_grid {
  max-width: 120rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.voice_item {
  padding: 0 3rem; /* 左右に程よい余白を持たせる */
  padding-bottom: 2rem;
}

.voice_item h4 {
  font-size: 2.4rem;
  font-weight: 500;
  margin-bottom: 2.5rem; /* 本文との間隔 */
  color: #333;
  /* ★以前の「緑の下線」の設定をここで打ち消します */
  border-bottom: none;
  display: block;
  padding-bottom: 0;
}
@media screen and (max-width: 800px) {
  .voice_item h4 {
    margin-top: 1.5rem;
  }
}

/* 本文 */
.voice_item p {
  font-size: 1.6rem;
  line-height: 2; /* 行間をゆったりと */
  color: #333;
  font-weight: 500;
  /* ★以前の「白いカード風」の設定を全て打ち消します！ */
  background: transparent; /* 背景を透明に */
  -webkit-box-shadow: none;
          box-shadow: none; /* 影を消す */
  border-radius: 0; /* 角丸を戻す */
  padding: 0; /* 内側の余白をなくす */
}

/* まず、線を引くための準備 */
.voice_item {
  position: relative; /* 線を配置する基準点にする */
}

/* 2つ目以降のアイテムに「線」を作る */
.voice_item + .voice_item::before {
  content: ""; /* 空っぽの箱を作る */
  position: absolute; /* 絶対配置モード */
  left: 0; /* 左端に置く */
  width: 0.1rem; /* 線の太さ */
  background-color: #333; /* 線の色 */
  /* ▼▼▼ ここで長さを決めます！ ▼▼▼ */
  height: 80%; /* 線の長さ（箱全体の60%の長さにする） */
  /* ▼▼▼ ここで位置（高さ）を決めます！ ▼▼▼ */
  top: 50%; /* 上から50%の位置に置いて... */
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%); /* 自身の半分だけ上にズラす＝「ど真ん中」に来る */
  /* ※もし「上から少し空けたい」だけなら、上2行を消して top: 2.0rem; とかでもOK */
}

/* ★以前の border-left の記述は消します（上のコードで代用するため） */
.voice_item + .voice_item {
  border-left: none;
}

/* --- スマホ対応（スマホでは線を消す） --- */
@media (max-width: 800px) {
  .voice_grid {
    grid-template-columns: 1fr;
  }
  .voice_item {
    padding: 0;
  }
  /* スマホの時は擬似要素の線を消す */
  .voice_item + .voice_item::before {
    display: none;
  }
}
/* --- スマホ対応（縦並びの時は線を消す） --- */
@media (max-width: 800px) {
  .voice_grid {
    grid-template-columns: 1fr; /* 1列にする */
  }
  .voice_item {
    padding: 0; /* スマホでは左右の余白をリセット */
  }
  /* スマホでは縦線は不要なので消す */
  .voice_item + .voice_item {
    border-left: none;
    /* 代わりに、区切り線として「上に横線」を引くのもアリです */
    /* border-top: 1px solid #eee; */
    /* padding-top: 5.0rem; */
  }
}
/* --- 4. 募集要項 (テーブル) --- */
.requirements_area {
  margin-bottom: 8rem;
  /* 幅を「先輩の声」と同じ100.0remまでに制限する */
  max-width: 120rem;
  /* 左右を自動にして真ん中に寄せる */
  margin-left: auto;
  margin-right: auto;
  /* スマホなどで画面端にくっつきすぎないように隙間をあける */
  padding: 0 2rem;
  /* 余白を含めて幅を計算させる（崩れ防止） */
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.recruit_table {
  width: 100%;
  border-collapse: collapse;
}

.recruit_table th,
.recruit_table td {
  padding: 2rem;
  border-bottom: 1px solid #333;
  text-align: left;
  font-size: 1.6rem;
  line-height: 1.8;
  font-weight: 500;
}

/* テーブルの一番下の行だけ、線を消す設定 */
.recruit_table tr:last-child th,
.recruit_table tr:last-child td {
  border-bottom: none;
}

.recruit_table th {
  background: #f4f5f5;
  width: 25%;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
}

@media (max-width: 1000px) {
  .recruit_table th, .recruit_table td {
    display: block;
    width: 100%;
    border-bottom: none;
  }
  .recruit_table th {
    background: #f4f5f5;
    border-bottom: none;
  }
}
/* スライダー画像のサイズ制限
.flow-swiper .swiper-slide {
    width: 30.0rem;
    height: auto;
}

.flow-swiper .swiper-slide img {
    width: 100%;
    height: 20.0rem;
    object-fit: cover;
    border-radius: 1.0rem;
}
*/
/* contact */
/* コンテナ調整 */
.form_page_container {
  /*padding-top: 6.0rem;*/
  padding-bottom: 10rem;
}

.form_page_container + .contact_cta {
  padding-top: 0 !important;
}

/* --- 上部インフォメーションエリア --- */
.form_top_info {
  background-color: #f4f5f5; /* 薄いグレー背景 */
  padding: 5rem 2rem;
  text-align: center;
  margin-bottom: 8rem;
}

.form_top_title {
  color: var(--main-green); /* 緑色 */
  font-size: calc(48rem * 0.1);
  font-weight: 900;
  font-style: italic;
  margin-bottom: 3rem;
}
@media screen and (max-width: 1000px) {
  .form_top_title {
    font-size: calc(48rem * 0.1 * (0.975 - 48 / 10 / 50));
  }
}
@media screen and (max-width: 800px) {
  .form_top_title {
    font-size: calc(48rem * 0.1 * (0.975 - 48 / 10 / 24));
  }
}
@media screen and (max-width: 560px) {
  .form_top_title {
    font-size: clamp(1.6rem, 48rem * 0.1 * (0.975 - 48 / 10 / 12), 9999rem);
  }
}

.form_info_box {
  color: #333;
}

.form_info_box p {
  margin-top: 0;
  margin-bottom: 0.5rem; /* 行の間を.5remだけ空ける */
  line-height: 1.6;
}

.company_name {
  font-size: 3.1rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.tel_number {
  font-family: "Oswald";
  font-size: 5.4rem;
  font-weight: 700;
  color: #3c6e50;
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  line-height: 1;
  margin-bottom: 1rem;
}

.tel_number a {
  text-decoration: none; /* 下線を消す */
  color: inherit; /* 親（.tel_number）の緑色を引き継ぐ */
  font-weight: inherit; /* 太さも引き継ぐ */
  font-style: inherit; /* 斜体も引き継ぐ */
  /* 念のため、クリックできる感（指マーク）を出す */
  cursor: pointer;
}

/* ホバーした時に少し薄くする（アクション感を出す） */
.tel_number a:hover {
  opacity: 0.7;
}

.tel_number img {
  /* ▼▼▼ これを追加！ ▼▼▼ */
  -webkit-transform: translateY(1px);
          transform: translateY(1px); /* この数字を増やすともっと下がります */
  -webkit-transform: skewX(20deg);
          transform: skewX(20deg);
  margin-right: 1rem;
  /* ※もし元々 margin-top などがあれば、それと一緒に調整してください */
}

.form_info_box .info_meta {
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 2.5rem;
}

.address_meta {
  margin-top: 1.5rem;
  font-size: 2rem;
  font-weight: 500;
}

/* --- フォームメインエリア --- */
.form_main_area {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 2rem;
}

.form_intro {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.8;
  margin-bottom: 5rem;
}

/* セクション区切り */
.privacy_box {
  max-width: 100rem; /* 親の100.0remに合わせて広がる */
  margin-left: auto;
  margin-right: auto;
}

/* サブタイトル (/ お客様について) */
.form_sub_title {
  font-size: 3.6rem;
  color: #333;
  font-weight: 900;
  -webkit-transform: skewX(-20deg);
          transform: skewX(-20deg);
  border-bottom: 0.2rem solid transparent;
  margin-bottom: 3rem;
  position: relative;
  padding-left: 1.5rem;
}

/* 斜めのスラッシュ装飾 */
.form_sub_title::before {
  content: "";
  display: inline-block;
  width: 0.6rem; /* 線の太さ */
  height: 3.5rem; /* 線の高さ */
  background-color: var(--main-green); /* 緑色 */
  margin-right: 1.5rem; /* 文字との距離 */
  -webkit-transform: translateY(0.1em) skewX(-1deg);
          transform: translateY(0.1em) skewX(-1deg); /* グイッと斜めにする */
}

/* --- フォームテーブル --- */
.form_table {
  width: 100%;
  border-collapse: collapse;
}

.form_table th,
.form_table td {
  padding: 2rem;
  border-bottom: 1px solid #333; /* 下の線 */
  font-size: 1.6rem;
  font-weight: 500;
  vertical-align: middle;
}

.form_table td {
  /* ▼▼▼ ここで「線と入力欄の距離」が決まります ▼▼▼ */
  padding: 1rem 3rem; /* 上下2.5rem、左右2.0rem の隙間 */
}

/* テーブルの一番下の行（tr）にあるセル（thとtd）の線を消す */
.form_table tr:last-child th,
.form_table tr:last-child td {
  border-bottom: none;
}

.form_table th {
  background-color: #f4f5f5; /* 左側の背景色 */
  width: 30%;
  text-align: left;
  font-weight: 500;
  color: #333;
  position: relative;
}

.form_table th .badge {
  position: absolute; /* 自由に動けるモードにする */
  right: 2rem; /* 右端から1.5remの位置に置く */
  top: 50%; /* 上から50%の位置に置く */
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%); /* 自身の半分だけ上にズラして、ど真ん中にする */
  margin-left: 0; /* 余計な余白をリセット */
}

/* 必須・任意バッジ */
.badge {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  font-size: 1.2rem;
  border-radius: 0.4rem;
  color: white;
  font-weight: normal;
  margin-left: 1rem;
  vertical-align: middle;
  font-style: normal;
}

.badge.required {
  background-color: #d24146; /* 赤 */
}

.badge.any {
  background-color: #666666;
}

.badge.required_small {
  background-color: #d24146;
  font-size: 1rem;
  padding: 0.1rem 0.5rem;
  margin-left: 0.5rem;
}

/* 入力フィールド共通 */
input[type=text],
input[type=email],
input[type=tel],
textarea,
select {
  width: 100%;
  height: 4rem;
  padding: 0.5em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* ▼ ここが「ツルッとした」デザインのポイント！ ▼ */
  background-color: #f4f5f5; /* ご希望の色 */
  border: none; /* 枠線を消す */
  font-family: inherit;
  font-size: 1.6rem;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s; /* 色が変わる時にふわっとさせる */
  -webkit-box-shadow: none;
          box-shadow: none;
}

/* 電話番号とFAX番号だけ幅を制限する */
#mailformpro input[name=お電話番号],
#mailformpro input[name=ファックス番号] {
  /* 幅100%になろうとする力を、「最大30remまで！」と強制ストップさせる */
  max-width: 30rem !important;
  /* 念のため幅指定も上書き */
  width: 100%;
  /* 確実に効かせるためのおまじない */
  display: block !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--main-green);
  outline: none;
}

/* 住所欄のレイアウト */
.address_group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 1rem;
}

.zip_mark {
  margin-right: 1rem;
  font-weight: bold;
}

.input_zip {
  width: 15rem !important; /* 郵便番号は短く */
}

/* セレクトボックスの矢印など */
.select_wrap {
  position: relative;
  width: 40rem;
}
@media screen and (max-width: 1000px) {
  .select_wrap {
    width: 100%;
  }
}

.select_wrap select {
  /* 1. ブラウザ標準の矢印を消す呪文 */
  appearance: none;
  -webkit-appearance: none; /* Safari用 */
  -moz-appearance: none; /* Firefox用 */
  /* 2. デザイナーさんの画像を背景として置く */
  background-image: url("/img/contact_arrow_greendown.svg");
  background-repeat: no-repeat; /* 繰り返し禁止 */
  background-position: right 1.5rem center; /* 右から1.5rem、上下中央に配置 */
  background-size: 1.4rem auto; /* アイコンの幅（お好みで調整！） */
  /* 3. 文字がアイコンに被らないように右に余白を作る */
  padding-right: 4rem;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: 0;
}

/* 1. 未選択（必須エラー状態）の時は文字色を薄くする */
select:required:invalid {
  color: #b3b3b3;
}

/* 2. ただし、選択肢（option）自体は黒色で表示する */
select option {
  color: #333;
}

#message {
  width: 100% !important;
  height: 30rem !important;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: 0;
}

/* --- プライバシーポリシーエリア --- */
.privacy_intro {
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 2rem;
}

.privacy_box {
  background-color: #f4f5f5;
  padding: 3rem;
  height: 25rem;
  overflow-y: scroll; /* スクロール */
  border: 1px solid #ddd;
  margin-bottom: 3rem;
  font-size: 1.3rem;
  line-height: 1.8;
}

.privacy_box h4 {
  font-weight: 700;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}

/* 同意チェックボックス周り */
.privacy_check_area {
  text-align: center;
  margin-bottom: 4rem;
}

/* 実際のチェックボックスは隠す */
#privacy_agree {
  display: none;
}

/* カスタムラベル（緑のボタン風） */
.privacy_label_btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #3c6e50; /* 緑 */
  color: white;
  font-size: 1.6rem;
  padding: 2.6rem 5rem;
  font-weight: bold;
  cursor: pointer;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  position: relative;
}
@media screen and (max-width: 560px) {
  .privacy_label_btn {
    padding-left: 0;
    padding-right: 0;
  }
}

.privacy_label_btn:hover {
  opacity: 0.8;
}

/* チェックボックスアイコン */
.check_box_icon {
  width: 1.8rem;
  height: 1.8rem;
  background: white;
  margin-right: 1rem;
  position: relative;
  border-radius: 0.2rem;
}

.agree_text {
  font-family: "IBM Plex Sans JP";
  font-size: 1.6rem;
  margin-right: 0.5rem;
}

/* チェックされた時の挙動 */
#privacy_agree:checked ~ .privacy_label_btn .check_box_icon {
  background-color: #3c6e50; /* サイトのメインカラー（緑） */
  border-color: #3c6e50;
  position: relative;
}

/* チェックマーク（レ点）を表示する */
#privacy_agree:checked ~ .privacy_label_btn .check_box_icon::after {
  content: "";
  display: block;
  position: absolute;
  top: 45%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
  width: 0.5rem;
  height: 1rem;
  border-bottom: 0.2rem solid #fff;
  border-right: 0.2rem solid #fff;
}

#errormsg_個人情報保護方針への同意,
#errormsg_個人情報保護方針 {
  margin: 10px auto;
  max-width: 37rem;
}

/* --- 送信ボタン --- */
.submit_area {
  text-align: center;
}

.submit_btn {
  background-color: #d24146; /* 赤色 */
  width: 30rem;
  padding: 2rem 0;
  font-size: 1.6rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  color: white;
}

/* --- スマホ対応 (100.0rem以下) --- */
@media (max-width: 1000px) {
  .form_table,
  .form_table tbody,
  .form_table tr,
  .form_table th,
  .form_table td {
    display: block;
    width: 100%;
  }
  .form_table th {
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    background-color: #f4f5f5;
    border-bottom: none; /* 見出しの下線は消す */
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .form_table td {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 2rem;
    padding-bottom: 3rem;
  }
  .inquiry_note {
    text-align: left;
    margin-bottom: 2rem;
    top: 0;
  }
  .privacy_label_btn {
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    font-size: 1.3rem;
  }
}
/*
.form_table th {
        background-color: #f4f5f5;
        border-bottom: none;
        padding-bottom: .5rem;
    }

    .form_table td {
        padding-top: 0;
        border-bottom: 1px solid #ddd;
    }
*//*# sourceMappingURL=style.css.map */