:root {
  --color-01: #0f3773;
  --color-02: #ff0096;
  --color-03: #000;
  --accent-01: #3cad85;
  --accent-02: #fabe00;
  --txt-lh: 1.7;
  --fs-custom1: 30px;
  --fs-custom2: 20px;
  --fs-custom3: 36px;
  --window-py: 80px;
  --window-px: 25px;
  --gap-pb: 80px;
  --gap-pt: 80px;
  --inner-box: 70vw;
  /* oringal fonts are not available */
  --f1: hiragino-kaku-gothic-pron, sans-serif;
  --f2: montserrat, sans-serif;
  --f3: "BIZ UDGothic", sans-serif;
}

.pd-px {
  padding-left: var(--window-px);
  padding-right: var(--window-px);
  padding-top: var(--window-px);
  padding-bottom: var(--window-px);
}

.pd-py {
  padding-top: var(--window-py);
  padding-bottom: var(--window-py);
}

.pd-pb {
  padding-bottom: var(--gap-pb);
}

.pd-pt {
  padding-top: var(--gap-pt);
}

.pd-pl {
  padding-left: var(--window-px);
}

.pd-pr {
  /* padding-right: var(--window-px); */
}

.mini-py {
  padding-top: 40px;
  padding-bottom: 40px;
}

.inner {
  max-width: var(--inner-box);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.inner-fw {
  max-width: 100%;
  width: 100%;
}

.mb10 {
  margin-bottom: 10px;
}

.mb20 {
  margin-bottom: 20px;
}

.mb30 {
  margin-bottom: 30px;
}

.mb40 {
  margin-bottom: 40px;
}

.mb50 {
  margin-bottom: 50px;
}

.mb60 {
  margin-bottom: 60px;
}

.mb70 {
  margin-bottom: 70px;
}

.mb80 {
  margin-bottom: 80px;
}

.mb90 {
  margin-bottom: 90px;
}

.mb100 {
  margin-bottom: 100px;
}

.f1 {
  font-family: var(--f1);
}

.f2b {
  font-family: var(--f2);
  font-weight: 800;
}

.f2 {
  font-family: var(--f2);
  font-weight: bold !important;
}

.f3 {
  font-family: var(--f3);
}

.fs16 {
  font-size: 16px;
}

.fs18 {
  font-size: 18px;
}

.fscustom1 {
  font-size: var(--fs-custom1);
}

.fscustom2 {
  font-size: var(--fs-custom2);
}

.fscustom3 {
  font-size: var(--fs-custom3);
}

.fscustom4 {
  font-size: 22px;
}

.def-lh {
  line-height: var(--txt-lh);
}

.c1 {
  color: var(--color-01);
}

.c2 {
  color: var(--color-02);
}

.c3 {
  color: var(--color-03);
}

.c4 {
  color: var(--accent-02);
}

.cbg1 {
  background-color: var(--color-01);
}

.cbg2 {
  background-color: var(--color-02);
}

.cbg3 {
  background-color: var(--color-03);
}

.cbg4 {
  background-color: var(--accent-01);
}

.cbg6 {
  background-color: var(--accent-02);
}

.cbg5 {
  background-color: #fff;
}

.ten {
  width: 10%;
}

.twenty {
  width: 20%;
}

.thirty {
  width: 30%;
}

.fourty {
  width: 40%;
}

.fifty {
  /* width: 80%; */
}

.sixty {
  width: 60%;
}

.seventy {
  width: 70%;
}

.eighty {
  width: 80%;
}

.ninety {
  width: 90%;
}

.full-w {
  width: 100%;
  /* height: 450px; */
}

.full-h {
  height: 100%;
}

.full-vh {
  height: 100vh;
}

.fit-w {
  max-width: fit-content;
  width: 100%;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.start-x {
  justify-content: flex-start;
}

.center-x {
  justify-content: center;
}

.between-x {
  justify-content: space-between;
}

.even-x {
  justify-content: space-evenly;
}

.end-x {
  justify-content: flex-end;
}

.start-y {
  align-items: flex-start;
}

.center-y {
  align-items: center;
}

.end-y {
  align-items: flex-end;
}

.f-wrap {
  flex-wrap: wrap;
}

.f-nwrap {
  flex-wrap: nowrap;
}

.gpx10 {
  column-gap: 10px;
}

.gpx20 {
  column-gap: 20px;
}

.gpx30 {
  column-gap: 30px;
}

.gpx40 {
  column-gap: 40px;
}

.gpx50 {
  column-gap: 50px;
}

.gpy10 {
  row-gap: 10px;
}

.gpy20 {
  row-gap: 20px;
}

.gpy30 {
  row-gap: 30px;
}

.gpy40 {
  row-gap: 40px;
}

.gpy50 {
  row-gap: 50px;
}

.gpxy10 {
  gap: 10px;
}

.gpxy20 {
  gap: 20px;
}

.gpxy30 {
  gap: 30px;
}

.gpxy40 {
  gap: 40px;
}

.gpxy50 {
  gap: 50px;
}

.btn_01,
.news_btn {
  border: 1px solid #000;
  height: 60px;
  max-width: 200px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  color: #000;
  gap: 10px;
  padding: 10px 15px;
  margin-top: 40px;
}

.btn_01 img,
.news_btn img {
  max-width: 25px;
}

.hvbtn {
  transition: 0.5s ease;
  width: 100%;
}

.hvbtn:hover {
  opacity: 0.8;
}

.hvbtn:focus {
  outline: none;
}

.hvbtn:active {
  transform: scale(0.9);
}

.hv2 {
  transition: 0.5s ease;
}

.hv2:hover {
  opacity: 0.7;
  transform: scale(0.97);
}

.hv2:active {
  transform: scale(0.95);
}

@media screen and (max-width: 1000px) {
  .md.flex-row {
    flex-direction: column;
  }

  .md.ten,
  .md.twenty,
  .md.thirty,
  .md.fourty,
  .md.fifty,
  .md.sixty,
  .md.seventy,
  .md.eighty,
  .md.ninety {
    width: 100%;
  }

  .md.od1 {
    order: 1;
  }

  .md.od2 {
    order: 2;
  }

  .md.od3 {
    order: 3;
  }

  .md.od4 {
    order: 4;
  }

  .md.od5 {
    order: 5;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --txt-lh: 1.7;
    --fs-custom1: 25px;
    --fs-custom2: 16px;
    --window-py: 50px;
    --window-px: 25px;
    --gap-pb: 50px;
    --gap-pt: 50px;
    --inner-box: 100%;
  }

  .sm.flex-row {
    flex-direction: column;
  }

  .sm.ten,
  .sm.twenty,
  .sm.thirty,
  .sm.fourty,
  .sm.fifty,
  .sm.sixty,
  .sm.seventy,
  .sm.eighty,
  .sm.ninety {
    width: 100%;
  }

  .sm.od1 {
    order: 1;
  }

  .sm.od2 {
    order: 2;
  }

  .sm.od3 {
    order: 3;
  }

  .sm.od4 {
    order: 4;
  }

  .sm.od5 {
    order: 5;
  }

  .fs18 {
    font-size: 16px;
  }
}

.img-box.sm.seventy img.full-w {
  height: 550px;
  object-fit: cover;
  object-position: left;
  object-position: center !important;
}

img.full-w.right {
  object-position: right !important;
}