@charset "utf-8";

@import url(./global/_variable.css);
@import url(./layout/_reset.css);


/* common
  ---- memo ----
  font-feature-settings: 'palt';
  font-size: calc( 16 / var(--r_size) * 1rem );
============================================ */
html {
  scroll-behavior: smooth;
  /*scroll-padding-top: 50px; check the header hight!*/
}

body {
	background: var(--bg_c);
	color: var(--font_c);
  font-family: var(--font_normal);
  font-weight: 400;
  min-height: 100vh;
  overflow-wrap: anywhere;
  line-break: strict;
  &.is-fixed {
    height: 100%;
    overflow: hidden;
  }
}

#wrapper {
  position:relative;
  overflow: hidden;
}

img {
  width: 100%;
  height: auto;
}

#lp_contents {


}

.area_header {
  width: 100%;
  height: 50px;
  background-color: var(--main_c);
  padding-inline: 6vw;
  margin-top: 2.6vw;
  @media (width < 480px) {
    height: 30px;
  }
}

.area_header_logo {
  background-color: #faf8f0;
  padding-inline: 3vw;
  display: inline-block;
  img {
    width: auto;
    height: 50px;
    @media (width < 480px) {
      height: 30px;
    }
  }
}

.w_base {
  margin-inline: auto;
  max-width: 1400px;
  width: calc(100% - 40px);
  container-type: inline-size;
}

.bg_main_c {
  background-color: var(--main_c);
}

.area_ttl {
  padding-top: 7cqw;
  text-align: center;
}

.hd_kantan {
  max-width: 1150px;
  margin-inline: auto;
}

.img_nayami {
  max-width: 940px;
  margin-inline: auto;
  padding-top: 3cqw;
}

.area_ttl_txt {
  font-size: clamp(1.625rem, 2.25vw + 1.097rem, 3.125rem);
  line-height: 1.2em;
  color: var(--main_c);
  font-weight: 700;
  word-break: keep-all;
  font-feature-settings: 'palt';
  padding-top: 5cqw;
}

.mt110 {
  margin-top: 7.85cqw;
  @media (width < 480px) {
    margin-top: 50px;
  }
}

.mt90 {
  margin-top: 5cqw;
  @media (width < 480px) {
    margin-top: 30px;
  }
}
.mt40 {
  margin-top: 4cqw;
  @media (width < 480px) {
    margin-top: 40px;
  }
}
.mt30 {
  margin-top: 3cqw;
  @media (width < 480px) {
    margin-top: 30px;
  }
}
.mt20 {
  margin-top: 2cqw;
  @media (width < 480px) {
    margin-top: 16px;
  }
}

.area_body {
  position: relative;
  border-radius: 10px;
  padding: 3cqw 7.85cqw 7.85cqw;
  box-sizing: border-box;
  @media (width < 896px) {
    padding: 30px 20px 20px;
  }
}

.img_pc {
  position: absolute;
  top: -30px;
  left: 10cqw;
  width: 38cqw;
  @media (width < 896px) {
    top: 30px;
    left: 20px;
    width: 36cqw;
  }
}

.label_ttl {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 24.28cqw;
  min-width: 180px;
  @media (width < 896px) {
    top: -16px;
  }
}

.hd_onayami {
  font-size: clamp(1.25rem, 2.63vw + 0.634rem, 3rem);
  color: #FFF;
  font-weight: 700;
  line-height: 1.5em;
  padding-left: 37.5%;
  font-feature-settings: 'palt';
  @media (width < 896px) {
    padding-left: 40%;
  }
  br {
    @media (width < 480px) {
      display: none;
    }
  }
}

.hd_myharvest {
  font-size: clamp(1.125rem, 1.13vw + 0.861rem, 1.875rem);
  color: #FFF;
  text-align: center;
  line-height: 1.4em;
  font-weight: 700;
  word-break: keep-all;
}

.area_body_txt {
  font-size:clamp(0.875rem, 0.56vw + 0.743rem, 1.25rem);
  color: #FFF;
  text-align: center;
  word-break: keep-all;
  br {
    @media (width < 480px) {
      display: none;
    }
  }
}

.ill_onayami {
  max-width: 14cqw;
  position: absolute;
  right: 20cqw;
  top: 18cqw;
  @media (width < 896px) {
    display: none;
  }
}

.ill_step {
  max-width: 14cqw;
  position: absolute;
  right: 20cqw;
  top: 5cqw;
  @media (width < 896px) {
    max-width: 20cqw;
    right: 2cqw;
    top: 3cqw;
  }
}

.list_step {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 2cqw;
  @media (width < 480px) {
    grid-template-columns: repeat(1,1fr);
    gap: 10px;
  }
}

.item_step {
  background-color: #FFF;
  box-sizing: border-box;
  padding: 2cqw;
  position: relative;
  @media (width < 896px) {
    padding: 16px;
  }
}

.item_step_ttl {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  align-items: center;
  margin-left: -2cqw;
  @media (width < 896px) {
    grid-template-columns: 70px 1fr;
    margin-left: -16px;
  }
}

.hd_kaiketsu {
  font-size: clamp(1rem, 0.94vw + 0.78rem, 1.625rem);
  color: var(--main_c);
  font-weight: 700;
  line-height: 1.3em;
}

.item_step_pict {
  max-width: 20%;
  position: absolute;
  right: 18px;
  bottom: 14px;
}

.item_step_txt {
  font-size: clamp(0.875rem, 0.19vw + 0.831rem, 1rem);
  padding-top: 10px;
  line-height: 1.6em;
  width: 80%;
  @media (width < 896px) {
    width: 75%;
  }
  br {
    @media (width < 896px) {
      display: none;
    }
  }
}

.newline {
  display: inline-block;
}

.box_movie {
  max-width: 1000px;
  margin-inline: auto;
  iframe {
    aspect-ratio: 16 / 9;
  }
}

.btn_link {
  max-width: 296px;
  width: 80%;
  margin-inline: auto;
  @media (width < 480px) {
    max-width: 100%;
  }
  a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    font-size: 16px;
    position: relative;
    transition: all .3s ease-out;
    background-color: var(--point_c);
    color: #FFF;
    border-radius: 8px;
    .btn_link_arrow {
      path {
        stroke:#FFF;
      }
    }
    &:hover {
      color: #000;
      background-color: #FFF;
      &::before {
        width: 100%;
      }
      .btn_link_arrow {
        path {
          stroke:#000;
        }
      }
    }
  }
}

.btn_link_l {
  max-width: 800px;
  width: 100%;
  margin-inline: auto;
  padding-block: 8cqw;
  @media (width < 480px) {
    max-width: 100%;
  }
  a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    font-size: clamp(1.125rem, 1.13vw + 0.861rem, 1.875rem);
    position: relative;
    transition: all .3s ease-out;
    background-color: var(--point_c);
    border: var(--point_c) solid 1px;
    color: #FFF;
    border-radius: 8px;
    .btn_link_arrow {
      path {
        stroke:#FFF;
      }
    }
    &:hover {
      color: #000;
      background-color: #FFF;
      &::before {
        width: 100%;
      }
      .btn_link_arrow {
        path {
          stroke:#000;
        }
      }
    }
  }
}

.hd_step {
  font-size: clamp(1.25rem, 1.88vw + 0.81rem, 2.5rem);
  color: #FFF;
  font-weight: 700;
  line-height: 1.5em;
  text-align: center;
  font-feature-settings: 'palt';
}

.big {
  font-size: 1.3em;
}

.dl_step {
  display: grid;
  grid-template-columns: 9.5cqw 1fr;
  gap: 14px;
  color: #FFF;
  align-items: center;
  @media (width < 480px) {
    grid-template-columns: 1fr;
    gap: 0px;
  }
}

.dt_step {
  @media (width < 480px) {
    width: 70px;
  }
}

.dd_step {
  font-size: clamp(1rem, 0.38vw + 0.912rem, 1.25rem);
  font-weight: 700;
  
}

.column_img_step {
  display: grid;
  grid-template-columns: 1fr 6cqw 1fr;
  gap: 20px;
  align-items: center;
  @media (width < 480px) {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

.box_arrow {
  text-align: center;
  @media (width < 480px) {
    img {
      width: 50px;
      position: relative;
      transform: rotate(90deg);
    }
  }
}

.box_step02_txt {
  color: #FFF;
  font-size: 13px;
  text-align: center;
  word-break: break-all;
}

.box_step03 {
  max-width: 900px;
  margin-inline: auto;
}

.area_link {
  @media (width < 896px) {
    padding-bottom: 60px;
  }
}

.login {
  position: fixed;
  z-index: 500;
  width: 140px;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: 1s;
  @media (width < 896px) {
    width: 100%;
    top: auto;
    transform: translateY(0%);
    bottom: 0px;
    text-align: center;
  }
  a {
    display: block;
    /* grid-template-columns: 18px 1fr;
    align-items: center; */
    background-color: #76294C;
    color: #FFF;
    padding: 20px 15px;
    letter-spacing: 3px;
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.3);
    font-style: normal;
    font-size: 14px;
    font-weight: 700;
    @media (width < 896px) {
      font-size: 16px;
    }
    img {
      vertical-align: middle;
      width: 18px !important;
    }
    span {
      font-size: 16px;
      @media (width < 896px) {
        padding-left: 10px;
      }
    }
    br {
      @media (width < 896px) {
        display: none;
      }
    }
  }
}