@charset "UTF-8";
/**** lity **********************/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
body .lity {
  background: rgba(255, 255, 255, 0.8);
}

.lity-content {
  padding: 4% 3%;
  background-color: #ffffff;
}

.lity-image img {
  height: 85vh;
  -o-object-fit: contain;
  object-fit: contain;
}

@media (max-width: 769px) {
  .lity-image img {
    height: auto;
  }
}
.lity {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* ///////////////////////////// */
/* ///// variable ///////////////////////////////// */
:root {
  --f-font-base:"Noto Sans JP", serif;
  --f-font-lineseed:"LINE SEED", serif;
  /* bg */
  --bg:#dcedd7;
  --bg-main:#fefefe;
  --bg-cont:#ffffff00;
  /* color */
  --c-txt-base:#333333;
  --c-01:#2b8a3b;
  --c-02:#559760;
  --c-03:#62a663;
  --c-04:#666666;
  --c-05:#fcfbdf;
  --c-06:#173484;
  --c-07:#e9e9e9;
  --c-08:#121281;
  --c-09:#e22d00;
  --c-10:#fff440;
}

@font-face {
  font-style: normal;
  font-weight: 400;
  font-family: "LINE SEED";
  src: url("../font/LINESeedJP_OTF_Rg.woff") format("woff"), url("../font/LINESeedJP_OTF_Rg.woff2") format("woff2");
}
@font-face {
  font-style: normal;
  font-weight: 700;
  font-family: "LINE SEED";
  src: url("../font/LINESeedJP_OTF_Bd.woff") format("woff"), url("../font/LINESeedJP_OTF_Bd.woff2") format("woff2");
}
@font-face {
  font-style: normal;
  font-weight: 900;
  font-family: "LINE SEED";
  src: url("../font/LINESeedJP_OTF_Eb.woff") format("woff"), url("../font/LINESeedJP_OTF_Eb.woff2") format("woff2");
}
/* ///// founfation /////////////////////////////////  ****/
body {
  font-weight: 500;
  font-size: clamp(12px, 1.4vw, 14px);
  line-height: 1.8;
  font-family: var(--f-font-base);
}

main * {
  box-sizing: border-box;
  color: var(--c-txt-base);
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  letter-spacing: 0;
  font-feature-settings: "palt";
}

/* ///// layout /////////////////////////////////  ****/
body {
  width: 100%;
  background-color: var(--bg);
  counter-reset: number 0;
}

.l_main {
  background-color: var(--bg-main);
}

.l_main,
.l_width-main {
  position: relative;
  width: min(100%, 1200px);
  margin: 0 auto;
}

.l_width-wide {
  width: min(100vw, 1200px);
}

.l_main_inner {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  gap: 5.71em;
}

/**** content **********************/
.l_section {
  margin: 0 auto;
}

.l_container {
  background-color: var(--bg-cont);
}

[class*=l_container_inner] {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 89.3%;
  margin: 0 auto;
}

@media (max-width: 769px) {
  [class*=l_container_inner] {
    width: 87.7%;
  }
}
.l_container_inner-l {
  width: 100%;
}

.l_lead {
  width: 100%;
  margin-top: 2.29em;
  padding: 1.71em;
  background-color: var(--c-05);
}

.l_lead > p {
  color: var(--c-02);
  font-weight: 800;
}

.l_lead .c_lead_attention p {
  color: var(--c-04);
}

.l_content {
  width: 100%;
  margin-top: 2.29em;
}

/* ///// component ///////////////////////////////// */
/**** txt_size ****/
.c_txts-s {
  font-size: clamp(12px, 1vw, 12px);
}

.c_txts-l {
  font-size: clamp(16px, 2vw, 16px);
}

.c_txts-xl {
  font-size: clamp(18px, 2vw, 18px);
}

.c_txts-xxl {
  font-size: clamp(20px, 2vw, 20px);
}

.c_txts-xxxl {
  font-size: clamp(26px, 3vw, 26px);
}

/**** ttl **********************/
.c_ttl_chapter {
  width: 100%;
  padding-bottom: 1.04em;
  border-bottom: solid 1px var(--c-03);
  color: var(--c-01);
  font-weight: 800;
  line-height: 1;
  text-align: left;
}

.c_ttl_chapter::before {
  content: counter(number) ".";
  counter-increment: number 1;
}

.c_ttl_cash {
  display: flex;
  align-items: center;
  margin-bottom: 1.6em;
  color: var(--c-01);
  font-weight: 800;
  gap: 0.5em;
}

.c_ttl_cash::before {
  display: block;
  width: 1em;
  height: auto;
  background-image: url(../images/icon/icon_flow.webp);
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
  aspect-ratio: 20/18;
}

/* ///// attention ///////////////////////////////// */
.b-attention {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  gap: 0.4em 0;
}

.e-attention__text {
  margin-top: 0.1em;
  margin-left: 1em;
  font-weight: 400;
  font-size: 0.81rem;
  line-height: 1.2;
  text-align: left;
  text-indent: -1em;
  word-break: break-all;
}

.e-attention__text::before {
  content: "※";
}

.e-attention__text--dot::before {
  content: "・";
}

.e-attention__text--center {
  text-align: center;
}

/**** box **********************/
.c_layout_a_wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 2.29em 4em;
}

.c_layout_a_card {
  display: grid;
  width: calc(50% - 2em);
  grid-template-areas: "icon ttl" "icon text";
  grid-template-columns: 32.3% 1fr;
  grid-template-rows: max-content 1fr;
  gap: 1.21em 1.43em;
}

.c_layout_a_card .c_layout_a_card-icon {
  grid-area: icon;
}

.c_layout_a_card h4 {
  color: var(--c-02);
  font-weight: 800;
  line-height: 1;
  grid-area: ttl;
}

.c_layout_a_card-text > div:not(:is(:first-child, .c_layout_a_card-payment)) {
  margin-top: 1.29em;
}

.c_layout_a_card-text p {
  line-height: 1.8;
}

.c_layout_a_card-text h5 {
  margin-bottom: 0.71em;
  color: var(--c-06);
  font-weight: 800;
  line-height: 1;
}

.c_layout_a_card-payment {
  margin-top: 2.43em;
}

.c_layout_a_card-payment h5 {
  color: var(--c-02);
}

.c_layout_a_card-payment > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.86em;
}

.c_layout_a_card-payment > div span {
  width: 6.1%;
}

@media (max-width: 769px) {
  .c_layout_a_card-payment > div span {
    width: calc(33.3333333333% - 0.5733333333em);
  }
}
.c_layout_a_wrap-full {
  display: flex;
  flex-direction: column;
  gap: 4em;
}

.c_layout_a_wrap-full .c_layout_a_card {
  width: 100%;
  grid-template-columns: 15.3% 1fr;
}

@media (max-width: 769px) {
  .c_layout_a_wrap,
  .c_layout_a_wrap-full {
    gap: 4.57em;
  }
  .c_layout_a_wrap .c_layout_a_card,
  .c_layout_a_wrap-full .c_layout_a_card {
    position: relative;
    width: 100%;
    grid-template-columns: 29.2% 1fr;
  }
  .c_layout_a_wrap .c_layout_a_card:not(:first-child)::before,
  .c_layout_a_wrap-full .c_layout_a_card:not(:first-child)::before {
    position: absolute;
    top: -2.29em;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--c-07);
    content: "";
  }
}
/* ///// project ///////////////////////////////// */
.p_toplead {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: var(--c-10);
  gap: 1.5rem;
  padding-block: 2.5rem;
}

.p_toplead * {
  font-family: var(--f-font-lineseed);
  text-align: center;
}

.p_toplead_heading {
  color: var(--c-08);
  font-weight: 800;
  font-size: clamp(20px, 2.6vw, 20px);
  line-height: 1.3;
}

.p_toplead_offer {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  background-color: var(--bg-main);
  padding-inline: 1.5rem;
  padding-block: 1.13rem;
}

.p_toplead_badge {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -1.56rem;
  left: -2.5rem;
  transform: rotate(-13deg);
  width: 5rem;
  height: 5rem;
  margin: 0;
  border-radius: 50%;
  background-color: var(--c-08);
  color: white;
  font-weight: 800;
  font-size: clamp(12px, 1.6vw, 16px);
  line-height: 1.2;
  text-align: center;
}
@media (min-width: 769px) {
  .p_toplead_badge {
    top: -3.13rem;
    left: -1.88rem;
    width: 5.63rem;
    height: 5.63rem;
  }
}

.p_toplead_offerText {
  color: var(--c-08);
  font-weight: 900;
  font-size: clamp(18px, 2.3vw, 24px);
  line-height: 1.4;
  text-align: center;
}

.p_toplead_offerText--red {
  color: var(--c-09);
}

.p_toplead_offerText--small {
  color: var(--c-08);
  font-weight: 900;
  font-size: clamp(14px, 1.8vw, 18px);
}

.p_toplead__text {
  color: var(--c-08);
  font-weight: 700;
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1.4;
}

.p_toplead_coupon {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.p_toplead_coupon_code {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  border: solid 2px;
  background: #f8f9fa;
  line-height: 1;
  cursor: pointer;
  gap: 1.5rem;
}

.p_toplead_coupon_code p {
  color: var(--c-08);
  font-weight: 700;
  font-size: clamp(16px, 2.1vw, 16px);
  line-height: 1;
}

.p_toplead_coupon_copy {
  width: 1.13rem;
  border: none;
  background: none;
}

.p_toplead_coupon_note {
  color: var(--c-08);
  font-weight: 700;
  font-size: clamp(10px, 1.3vw, 12px);
}

.p_toplead_expiry {
  display: flex;
  flex-direction: column;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  color: var(--c-08);
  font-weight: 900;
  font-size: clamp(16px, 2.1vw, 16px);
  line-height: 1;
  gap: 0.1rem;
}
.p_toplead_expiry::after {
  width: 100%;
  height: 3px;
  background-color: var(--c-09);
  content: "";
}

.b-attention--toplead p {
  color: var(--c-08);
  font-weight: 700;
  font-size: clamp(10px, 1.3vw, 12px);
}

/* ///// c106 ///////////////////////////////// */
.p_c106 {
  padding-bottom: 5rem;
}

.p_c106_heading {
  display: flex;
  flex-direction: column;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 1rem;
  border-radius: 50px;
  background-color: var(--c-10);
  color: var(--c-08);
  font-weight: 900;
  font-size: clamp(20px, 2.6vw, 20px);
  line-height: 1;
  padding-block: 1rem;
  padding-inline: 1.5rem;
}
.p_c106_heading::after {
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1rem;
  height: 0.5rem;
  background-color: var(--c-10);
  content: "";
}

/* ///// トースト ///////////////////////////////// */
.toast-message {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 10%;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  padding: 16px;
  border-radius: 5px;
  background-color: #122dc9;
  color: #ffffff;
  font-size: 1rem;
  text-align: center;
}

.toast-message.show {
  visibility: visible;
  opacity: 1;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* トーストの表示/非表示アニメーション */
@keyframes fadein {
  from {
    opacity: 0;
    top: 0;
  }
  to {
    opacity: 1;
    top: 10%;
  }
}
@keyframes fadeout {
  from {
    opacity: 1;
    top: 10%;
  }
  to {
    opacity: 0;
    top: 0;
  }
}
/* ///// responsive ///////////////////////////////// */
.sp {
  display: none;
}

.pc {
  display: block;
}

.br_pc {
  display: block;
}

@media (max-width: 769px) {
  .sp {
    display: block;
  }
  .pc {
    display: none;
  }
  .br {
    display: block;
  }
  .br_pc {
    display: none;
  }
}
/* /////////////////////////////////////////////////// */