@font-face {
  font-family: Mazzardh;
  src: url('../fonts/MazzardH-Regular.otf') format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Mazzardh;
  src: url('../fonts/MazzardH-Medium.otf') format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Mazzardh;
  src: url('../fonts/MazzardH-SemiBold.otf') format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Mazzardh;
  src: url('../fonts/MazzardH-Bold.otf') format("opentype"), url('../fonts/MazzardH-ExtraBold.otf') format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Mazzardh;
  src: url('../fonts/MazzardH-Black.otf') format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Mazzardh;
  src: url('../fonts/MazzardH-BlackItalic.otf') format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Mazzardh;
  src: url('../fonts/MazzardH-ExtraBoldItalic.otf') format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Mazzardh;
  src: url('../fonts/MazzardH-Light.otf') format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Mazzardh;
  src: url('../fonts/MazzardH-MediumItalic.otf') format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Mazzardh;
  src: url('../fonts/MazzardH-SemiBoldItalic.otf') format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

.top_sec {
  overflow: hidden;
}

.body {
  color: #000;
  background-color: #ececec;
  font-family: Mazzardh, Arial, sans-serif;
  font-size: 16px;
  line-height: 150%;
}

.top_box {
  background-image: linear-gradient(#00000036, #00000036), url('../images/cell.webp');
  background-position: 0 0, 50%;
  background-size: auto, cover;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
  position: relative;
}

.logo {
  z-index: 10;
  position: static;
  inset: 2% 5% auto auto;
}

.up_logo {
  text-align: right;
}

.up_link_box {
  width: 100px;
}

.life_logo {
  text-align: right;
}

.life_link_box {
  width: 116px;
}

.center {
  background-color: #c80000ab;
  border-radius: 640px;
  justify-content: center;
  align-items: center;
  width: 640px;
  height: 640px;
  display: flex;
}

.incircle {
  background-color: #ffffff57;
  border-radius: 620px;
  justify-content: center;
  align-items: center;
  width: 620px;
  height: 620px;
  display: flex;
}

.in_in_circle {
  background-color: #c80100;
  border-radius: 600px;
  justify-content: center;
  align-items: center;
  width: 600px;
  height: 600px;
  padding: 100px;
  display: flex;
}

.main_title {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.h1 {
  color: #fff;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 200px;
  font-weight: 300;
  line-height: 100%;
}

.ti_one {
  justify-content: center;
  align-items: center;
  display: flex;
}

.subtitle_text {
  color: #fff;
  text-align: left;
  text-transform: uppercase;
  padding-left: 10px;
  font-size: 40px;
  font-weight: 500;
  line-height: 135%;
}

.subtitle_text02 {
  color: #fff;
  text-align: center;
  margin-top: -20px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 24px;
  line-height: 150%;
}

.arrow {
  width: 80px;
  margin-top: 20px;
}

.pream_sec {
  background-color: #fff;
  border-radius: 16px;
  margin: 40px;
  padding-bottom: 0;
}

.cont {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

.pream_box {
  padding-top: 40px;
  padding-bottom: 40px;
}

.sp_date_box {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-bottom: 40px;
  display: grid;
}

.sp_text {
  color: #c80100;
  font-weight: 500;
}

.date_text {
  text-align: right;
}

.pream_text {
  margin-bottom: 20px;
}

.link {
  color: #c80100;
  font-weight: 600;
}

.story_sec {
  background-color: #fff;
  border-radius: 16px;
  margin: 40px;
  padding-bottom: 0;
}

.story_box {
  padding-top: 40px;
  padding-bottom: 40px;
}

.quset {
  background-color: #c80100;
  border: 1px solid #c80100;
  border-radius: 16px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  margin-top: 20px;
  margin-bottom: 40px;
  padding: 40px;
  display: flex;
  position: relative;
}

.quest_pream_text {
  color: #fff;
  text-align: left;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 100%;
  display: block;
}

.quest_crcl_numb {
  background-color: #c80100;
  border: 1px solid #fff;
  border-radius: 56px;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  display: flex;
  position: absolute;
  inset: -20% auto auto;
  transform: translate(50%);
}

.quest_crcl_numb.two {
  top: -16%;
  left: 50%;
  transform: translate(50%);
}

.num_quest_text {
  color: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 100%;
}

.h2 {
  color: #fff;
  text-align: left;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 135%;
}

.regular_text {
  margin-bottom: 20px;
}

.quot_box {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  border: 2px solid #c80100;
  border-radius: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 3.75fr;
  grid-auto-columns: 1fr;
  margin-top: 40px;
  margin-bottom: 40px;
  padding: 40px;
  display: grid;
}

.quot_box.norisee {
  display: none;
}

.quot_span_text {
  font-weight: 500;
}

.inqq {
  justify-content: center;
  align-items: center;
  display: block;
}

.link-2, .link-3 {
  color: #c80100;
  font-weight: 600;
}

.fin_sec {
  background-color: #1a1a1a;
}

.fin_box {
  padding-top: 40px;
  padding-bottom: 40px;
}

.fin_text {
  color: #fff;
  font-size: 12px;
}

.link-4 {
  color: #ff1f1d;
  font-weight: 600;
}

.especial_sec {
  background-color: #eaeaea00;
  background-image: none;
  background-size: auto;
  padding-bottom: 0;
  overflow: hidden;
}

.especial_box {
  padding-top: 0;
  padding-bottom: 0;
}

.sp_opt_box {
  position: static;
  inset: 2% auto auto 5%;
}

.sp_opt_link_box {
  border: 1px solid #fff;
  border-radius: 120px;
  padding: 10px 20px;
  text-decoration: none;
  transition: all .555s cubic-bezier(.645, .045, .355, 1);
}

.sp_opt_link_box:hover {
  background-color: #c80100;
  border-style: none;
  transform: scale(.9);
}

.sp_opt_text {
  color: #fff;
  font-weight: 600;
}

.topi_opt {
  z-index: 20;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 2% 5% auto;
}

@media screen and (max-width: 991px) {
  .cont {
    max-width: 680px;
  }

  .h2 {
    text-align: left;
  }
}

@media screen and (max-width: 767px) {
  .pream_sec {
    margin: 20px;
  }

  .cont {
    max-width: none;
    margin-left: 5%;
    margin-right: 5%;
  }

  .story_sec {
    margin: 20px;
  }

  .quot_box {
    padding: 20px;
  }
}

@media screen and (max-width: 479px) {
  .up_link_box {
    width: 88px;
  }

  .life_link_box {
    width: 100px;
    margin-right: -1px;
    padding-right: 0;
  }

  .center {
    border-radius: 340px;
    width: 340px;
    height: 340px;
  }

  .incircle {
    border-radius: 320px;
    width: 320px;
    height: 320px;
  }

  .in_in_circle {
    border-radius: 300px;
    width: 300px;
    height: 300px;
    padding: 40px;
  }

  .main_title {
    margin-bottom: -20px;
  }

  .h1 {
    text-align: center;
    font-size: 64px;
    line-height: 100%;
  }

  .ti_one {
    flex-flow: row;
  }

  .subtitle_text {
    text-align: left;
    padding-left: 10px;
    font-size: 24px;
  }

  .subtitle_text02 {
    margin-top: 0;
    font-size: 16px;
  }

  .arrow {
    width: 40px;
  }

  .pream_sec {
    margin: 20px 10px 10px;
  }

  .pream_box {
    padding-bottom: 20px;
  }

  .story_sec {
    margin-left: 10px;
    margin-right: 10px;
  }

  .quset {
    margin-top: 0;
    margin-bottom: 20px;
    padding: 20px;
  }

  .quest_pream_text {
    margin-top: 10px;
  }

  .quest_crcl_numb {
    border-radius: 40px;
    width: 40px;
    height: 40px;
    top: -14%;
    left: 44%;
  }

  .quest_crcl_numb.two {
    top: -13%;
  }

  .h2 {
    font-size: 20px;
  }

  .quot_box {
    border-width: 1px;
    grid-template-columns: 1fr;
  }

  .sp_photo {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .rotating-icon {
    max-width: 50%;
  }

  .olas {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .image {
    max-width: 80%;
  }

  .sp_opt_link_box {
    justify-content: center;
    align-items: center;
    margin-right: 25%;
    padding: 6px 20px;
    display: flex;
  }

  .sp_opt_text {
    text-align: center;
    font-size: 14px;
    line-height: 135%;
  }
}

#w-node-_7d3c7c1b-cfb0-1202-af5b-bf2a6cec798e-1663271f, #w-node-_30b44001-c6c1-0478-dc90-a378e8faa29d-1663271f, #w-node-bc43db14-4775-7fa4-24cb-dc32d28f15f2-1663271f, #w-node-e2336819-ebf8-fbef-57b2-3c0916301ee0-1663271f, #w-node-be6a83ae-260c-dc6e-7cd5-28c7cf91e9b3-1663271f, #w-node-_0cc050ba-b5cc-c6cb-b50e-caa1cf4f3930-1663271f, #w-node-c7369c1b-41eb-4355-54b2-7a474d3fcdd3-1663271f, #w-node-c1382e27-705f-8bd9-17a0-2038360be2fa-1663271f, #w-node-a6f81177-bcff-383c-1e26-5dabc9eb4128-1663271f {
  place-self: center;
}

@media screen and (max-width: 479px) {
  #w-node-_2f0c58c9-f8a3-1906-56b2-32ba88894f0f-1663271f, #w-node-_30b44001-c6c1-0478-dc90-a378e8faa29b-1663271f, #w-node-bc43db14-4775-7fa4-24cb-dc32d28f15f0-1663271f, #w-node-e2336819-ebf8-fbef-57b2-3c0916301ede-1663271f, #w-node-be6a83ae-260c-dc6e-7cd5-28c7cf91e9b1-1663271f, #w-node-_0cc050ba-b5cc-c6cb-b50e-caa1cf4f392e-1663271f, #w-node-c7369c1b-41eb-4355-54b2-7a474d3fcdd1-1663271f, #w-node-c1382e27-705f-8bd9-17a0-2038360be2f8-1663271f, #w-node-a6f81177-bcff-383c-1e26-5dabc9eb4126-1663271f {
    place-self: center;
  }
}


@font-face {
  font-family: 'Mazzardh';
  src: url('../fonts/MazzardH-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mazzardh';
  src: url('../fonts/MazzardH-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mazzardh';
  src: url('../fonts/MazzardH-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mazzardh';
  src: url('../fonts/MazzardH-Bold.otf') format('opentype'), url('../fonts/MazzardH-ExtraBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mazzardh';
  src: url('../fonts/MazzardH-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mazzardh';
  src: url('../fonts/MazzardH-BlackItalic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Mazzardh';
  src: url('../fonts/MazzardH-ExtraBoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Mazzardh';
  src: url('../fonts/MazzardH-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mazzardh';
  src: url('../fonts/MazzardH-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Mazzardh';
  src: url('../fonts/MazzardH-SemiBoldItalic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}