@charset "utf-8";

/* CSS Document */
/*Theme Name: origin
  Author: marudou-lanc
  Description: Version: 1.0
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

.header h1 a .ttl {
  font-weight: normal;
}

.page_header01 .wrap .page_ttl {
  font-weight: 300;
}

.page_header01 {
  background-image: url(images/page_bg_hero.png);
  background-position: center 80px;
  background-color: var(--color-bg-light-green);
}

.pc_nav ul li.btn_head01>a {
  background-color: var(--color-prim);
  border-radius: 16px;
  font-weight: normal;
}

#g-nav li.btn_head01 a {
  background-color: var(--color-prim);
  border-radius: 16px;
  font-weight: normal;
  color: #fff;
}

.footer .area .col_logo .ttl {
  font-weight: normal;
}

.page_header01 .wrap .page_ttl_en {
  margin-top: 0;
  font-weight: 500;
  font-size: 1.7rem;
  color: var(--color-prim);
}

.page_header01 .wrap>div {
  background-color: rgba(210, 224, 218, 0.75);
}

@media (max-width: 767px) {
  main.page_main section.bg_white {
    padding: 20px;
  }
}

/*front*/
.wrap_slider02 {
  margin-top: 20rem;
  position: relative;
  @media(max-width: 767px) {
    margin-top: 9rem;
}

  .ttl {
    position: absolute;
    bottom: -2rem;
    left: 7rem;
    z-index: 2;
    @media(max-width: 767px) {
      max-width: 373px;
      font-weight: normal;
      left: 2rem;
    }

    & span {
      display: inline-block;
      background-color: var(--color-sec);
      color: #fff;
      font-size: 3rem;
      padding: 10px 25px;

      &:first-of-type {
        margin-bottom: 1rem;
        @media(max-width: 767px) {
          font-size: 1.8rem;
          line-height: 1.4;
        }
      }
      &:nth-of-type(2) {
        @media(max-width: 767px) {
          font-size: 2.15rem;
          line-height: 1.4;
        }
      }
    }

  }

  &::before {
    background-color: inherit;
  }
}
.customize-support main {
  margin-top: 0px;
}
main.main_front {
  padding-top: 0;
  margin-top: 0;
  
  & section:nth-of-type(n+1){
    padding-top: 150px;
      @media(max-width: 767px) {
      padding-top: 75px;
    }
  }
  & section:nth-of-type(1){
    @media(max-width: 767px) {
      padding-top: 0px;
    }
  }

  .mv02 {
    position: relative;
    width: 100%;
    /*height: 100svh;*/

    padding-top: 215px;

    @media(max-width: 767px) {
      padding-top: 10px;
    }

    .col {
      width: 475px;

      @media(max-width: 1024px) {
        width: 50%;
      }

      @media(max-width: 767px) {
        width: 100%;
        margin-top: 100px;
      }

      .ttl {
        line-height: 1.5;
        font-size: 3.2rem;
        @media(max-width: 767px) {
          font-size: 2.4rem;
        }


      }

      .txt {
        margin-top: 2rem;
        line-height: 1.5;
      }

      .list {
        gap: 50px;
        margin-top: 2rem;
        color: var(--color-prim);

        .stxt {
          font-size: 1.6rem;
          line-height: 1.25;
          display: block;
          font-weight: bold;
        }

        .num {
          font-size: 5rem;
          font-weight: bold;
          line-height: 1;

          & span {
            font-size: .5em;
          }

          & small {
            font-size: .25em;
          }
        }

        & li:nth-of-type(2) .stxt {
          padding-top: 2rem;
        }
      }

      .caption {
        font-size: 14px;
        margin-top: 2rem;

        @media(max-width: 767px) {
          font-size: 12px;
          padding-left: 1em;
          text-indent: -1em;
        }
      }

      .btn01.mail a {
        margin-top: 4rem;
        margin-left: 0;
        margin-right: auto;

        @media(max-width: 767px) {
          margin-left: auto;
        }
      }
    }

    .img {
      width: calc(100% - 475px);
      padding-left: 55px;

      @media(max-width: 1024px) {
        width: 50%;
        position: absolute;
        right: 0;
        bottom: 0;
        top: 100px;
        margin: auto;
        height: fit-content;
      }

      @media(max-width: 767px) {
        width: 100%;
        position: relative;
        margin-bottom: 3rem;
        padding-left: 0;
      }
    }

    @media(max-width: 767px) {
      >.flex.start {
        -ms-flex-direction: column-reverse;
        -webkit-flex-direction: column-reverse;
        flex-direction: column-reverse;
      }

      .list.flex.start {
        -webkit-justify-content: start;
        justify-content: start;
      }
    }
  }
  .mv02{
    .ttl{
      font-weight: 500;
    }
  }
  .sec02 .card03 > li .copy{
    text-align: left;
    font-weight: 500;
  }
  .front_trouble01{
    .ttl_page_content02{
      margin-top: 6rem;
      @media(max-width: 767px) {
        margin-top: 3rem;
      }
    }
    .cards01{
      margin-top: 5rem;
      line-height: 1.25;
      .card{
        border-radius: 0;
      }
    }
  } 
  .front_voice{
    .card04>li>.tag span{
      border-radius: 0;
    }
    .card04>li>.img img{
      border-radius: 0;
    }
  }
}
.ttl_page_content01 {
  .en{
    padding-bottom: 1rem;
  }
  .copy{
    @media(max-width: 767px) {
      line-height: 1.3;
    }
  }
}
.wrap_foot_cta {
  background-image: url(images/bg_cta.jpg);
  @media (max-width: 767px) {
    background-image: url(images/bg_cta_sp.png);
  }
  &::before{
    background: rgba(255, 255, 255, .7);
  }
  .txt_caption01 {
    margin-bottom: 4rem;
    font-size: 2.1rem;
    background: rgba(255, 255, 255, 0.1);
    @media (max-width: 767px) {
      font-size: 1.6rem;
    }
  }
}
@media (max-width: 767px) {
.tbl02 .row li:first-of-type {
  font-size: 1.25rem;
  width: 100px;
  padding: 8px;
  line-height: 1.45;
}
}