@charset "UTF-8";
#main {
  --padding-ratio: 0.8;
  --margin-ratio: 0.8;
}
#main {
  .pt100 { padding-top: 100px; }
  .pt70 { padding-top: 70px; }
  .pt60 { padding-top: 60px; }
  .pt50 { padding-top: 50px; }
  .pt40 { padding-top: 40px; }
  .pt30 { padding-top: 30px; }
  .pt20 { padding-top: 20px; }

  .pb100 { padding-bottom: 100px; }
  .pb70 { padding-bottom: 70px; }
  .pb60 { padding-bottom: 60px; }
  .pb50 { padding-bottom: 50px; }
  .pb40 { padding-bottom: 40px; }
  .pb30 { padding-bottom: 30px; }
@media (max-width: 1440px) {
  .pt100 { padding-top: calc(60px + 40 * ((100vw - 375px) / (1440 - 375))); }
  .pt70 { padding-top: calc(42px + 28 * ((100vw - 375px) / (1440 - 375))); }
  .pt60 { padding-top: calc(36px + 24 * ((100vw - 375px) / (1440 - 375))); }
  .pt50 { padding-top: calc(30px + 20 * ((100vw - 375px) / (1440 - 375))); }
  .pt40 { padding-top: calc(24px + 16 * ((100vw - 375px) / (1440 - 375))); }
  .pt30 { padding-top: calc(18px + 12 * ((100vw - 375px) / (1440 - 375))); }
  .pt20 { padding-top: calc(12px + 8 * ((100vw - 375px) / (1440 - 375))); }

  .pb100 { padding-bottom: calc(60px + 40 * ((100vw - 375px) / (1440 - 375))); }
  .pb70 { padding-bottom: calc(42px + 28 * ((100vw - 375px) / (1440 - 375))); }
  .pb60 { padding-bottom: calc(36px + 24 * ((100vw - 375px) / (1440 - 375))); }
  .pb50 { padding-bottom: calc(30px + 20 * ((100vw - 375px) / (1440 - 375))); }
  .pb40 { padding-bottom: calc(24px + 16 * ((100vw - 375px) / (1440 - 375))); }
  .pb30 { padding-bottom: calc(18px + 12 * ((100vw - 375px) / (1440 - 375))); }
}
@media (max-width: 428px) {

.pt100 { padding-top: calc(100px * var(--padding-ratio)); }
.pt70 { padding-top: calc(70px * var(--padding-ratio)); }
.pt60 { padding-top: calc(60px * var(--padding-ratio)); }
.pt50 { padding-top: calc(50px * var(--padding-ratio)); }
.pt40 { padding-top: calc(40px * var(--padding-ratio)); }
.pt30 { padding-top: calc(30px * var(--padding-ratio)); }
.pt20 { padding-top: calc(20px * var(--padding-ratio)); }

.pb100 { padding-bottom: calc(100px * var(--padding-ratio)); }
.pb70 { padding-bottom: calc(70px * var(--padding-ratio)); }
.pb60 { padding-bottom: calc(60px * var(--padding-ratio)); }
.pb50 { padding-bottom: calc(50px * var(--padding-ratio)); }
.pb40 { padding-bottom: calc(40px * var(--padding-ratio)); }
.pb30 { padding-bottom: calc(30px * var(--padding-ratio)); }

}
  .mt100 { margin-top: 100px; }
  .mt70 { margin-top: 70px; }
  .mt60 { margin-top: 60px; }
  .mt50 { margin-top: 50px; }
  .mt40 { margin-top: 40px; }
  .mt30 { margin-top: 30px; }
  .mt20 { margin-top: 20px; }

  .mb100 { margin-bottom: 100px; }
  .mb70 { margin-bottom: 70px; }
  .mb60 { margin-bottom: 60px; }
  .mb50 { margin-bottom: 50px; }
  .mb40 { margin-bottom: 40px; }

@media (max-width: 1440px) {
  .mt100 { margin-top: calc(60px + 40 * ((100vw - 375px) / (1440 - 375))); }
  .mt70 { margin-top: calc(42px + 28 * ((100vw - 375px) / (1440 - 375))); }
  .mt60 { margin-top: calc(36px + 24 * ((100vw - 375px) / (1440 - 375))); }
  .mt50 { margin-top: calc(30px + 20 * ((100vw - 375px) / (1440 - 375))); }
  .mt40 { margin-top: calc(24px + 16 * ((100vw - 375px) / (1440 - 375))); }
.mt30 {
  margin-top: calc(18px + 12 * ((100vw - 375px) / (1440 - 375)));
}
.mt20 {
  margin-top: calc(12px + 8 * ((100vw - 375px) / (1440 - 375)));
}
/* マージンボトムの動的調整 */
.mb100 {
  margin-bottom: calc(60px + 40 * ((100vw - 375px) / (1440 - 375)));
}
.mb70 {
  margin-bottom: calc(42px + 28 * ((100vw - 375px) / (1440 - 375)));
}
.mb60 {
  margin-bottom: calc(36px + 24 * ((100vw - 375px) / (1440 - 375)));
}
.mb50 {
  margin-bottom: calc(30px + 20 * ((100vw - 375px) / (1440 - 375)));
}
.mb40 {
  margin-bottom: calc(24px + 16 * ((100vw - 375px) / (1440 - 375)));
}
.mb30 {
  margin-bottom: calc(18px + 12 * ((100vw - 375px) / (1440 - 375)));
}
.mb20 {
  margin-bottom: calc(12px + 8 * ((100vw - 375px) / (1440 - 375)));
}

}
@media (max-width: 375px) {
/* マージントップの設定 */
.mt100 { margin-top: calc(100px * var(--margin-ratio)); }
.mt70 { margin-top: calc(70px * var(--margin-ratio)); }
.mt60 { margin-top: calc(60px * var(--margin-ratio)); }
.mt50 { margin-top: calc(50px * var(--margin-ratio)); }
.mt40 { margin-top: calc(40px * var(--margin-ratio)); }
.mt30 { margin-top: calc(30px * var(--margin-ratio)); }
.mt20 { margin-top: calc(20px * var(--margin-ratio)); }

/* マージンボトムの設定 */
.mb100 { margin-bottom: calc(100px * var(--margin-ratio)); }
.mb70 { margin-bottom: calc(70px * var(--margin-ratio)); }
.mb60 { margin-bottom: calc(60px * var(--margin-ratio)); }
.mb50 { margin-bottom: calc(50px * var(--margin-ratio)); }
.mb40 { margin-bottom: calc(40px * var(--margin-ratio)); }
}
}