@charset "UTF-8";
/*--------------------------------------------------------------
TOPページ共通
--------------------------------------------------------------*/
.section_title {
  display: flex;
  font-size: var(--fs-block-title);
  font-weight: 400;
  align-items: center;
  gap: 0 0.5em;

  &::before {
    display: block;
    content:"";
    width: 1.2em;
    height: 0.7rem;
    background: var(--accent-green);
  }
  &::after {
    display: block;
    content:"";
    position: absolute;
    left: 1.6rem;
  }
}
.page_top .btn_i {
  margin: 0 auto;
}
/*--------------------------------------------------------------
メインビジュアル
--------------------------------------------------------------*/
.main_visual {
  display: flex;
  flex-direction: column;
  justify-content: center;
  aspect-ratio: 1 / 0.7;
  margin-top: 6rem;
  padding: 0 2rem;
  background: url(/assets/img/home/main_visual_bg.png) no-repeat right bottom / 50%, var(--yellow);
  @media (min-width:768px) {
    flex-direction: row;
    align-items: center;
    width: 100%;
    aspect-ratio: auto;
    height: min(50vw,60rem);
    gap: 5%;
    background: url(/assets/img/home/main_visual_bg.png) no-repeat right top / auto 80%,
                linear-gradient(134deg, rgba(270, 241, 195, 1), var(--yellow));
    @media (min-width:992px) {
      margin-top: 10rem;
    }
  }
  .catch_copy {
    font-size: clamp( 1.8rem, calc( 1.1076923076923077rem + 1.9230769230769231vw ), 4.8rem );
    align-self: center;
    letter-spacing: 0.15em;

    .green {
      font-size: 110%;
    }
  }
  .text {
    color: #545454;
    font-size: clamp( 1.2rem, calc( 1.0285714285714285rem + 0.4761904761904762vw ), 1.6rem );
    font-weight: 700;
    @media (min-width:768px) {
      letter-spacing: 0.1em;
    }
  }
  .img_wrap {
    width: min(45vw,65.8rem);
    margin-left: 20%;
    @media (min-width:768px) {
      width: min(34vw,65.8rem);
      margin-left: 0;
    }
  }
}
/*--------------------------------------------------------------
イントロ
--------------------------------------------------------------*/
#home_intro {
  padding-bottom: 12rem;
  background: url(/assets/img/common/border_sprout.png) repeat-x bottom 3rem left / auto 4rem;
  @media (min-width:768px) {
    padding-bottom: 16rem;
  }
}
#home_intro .text {
  line-height: 2.3;
  @media (min-width:768px) {
    text-align: center;
  }
}
/*--------------------------------------------------------------
お悩み
--------------------------------------------------------------*/
#home_worry {
  padding-bottom: 2rem;
  background: var(--grey);
}
#home_worry .title {
  color: #847B6E;
  font-size: clamp( 1.8rem, calc( 1.476923076923077rem + 0.8974358974358974vw ), 3.2rem );
  width: fit-content;
  margin: 0 auto 4rem;
  padding: 0.5em 1em 0.8em;
  background: url(/assets/img/home/worry_title.png) no-repeat center / 100% 100%;
}
#home_worry .worry_list {
  list-style: none;
  @media (min-width:768px) {
    display: flex;
    flex-wrap: wrap;
    gap: 4.4rem 4%;
  }
  & li {
    display: flex;
    font-size: var(--fs-large);
    font-weight: 700;
    align-items: center;
    line-height: 1.7;
    height: 5em;
    padding: 0 0.5em 0 1em;
    gap: 0 1em;
    background: #E4E4E4;
    @media (min-width:768px) {
      width: 48%;
    }
    &::before {
      display: block;
      content: "";
      flex-shrink: 0;
      width: 1.5em;
      height: 1.5em;
      background: url(/assets/img/common/icon_check.svg) no-repeat center / 75% ,#FFF;
      border-radius: 50%;
    }
    + li {
      margin-top: 1em;
      @media (min-width:768px) {
        margin-top: 0;
      }
    }
  }
}
#home_worry .text {
  color: #847B6E;
  font-size: clamp( 1.8rem, calc( 1.476923076923077rem + 0.8974358974358974vw ), 3.2rem );
  font-weight: 700;
  text-align: center;
  margin-top: 5rem;
  
  &::after {
    display: block;
    content: "";
    width: 3rem;
    height: 4rem;
    margin: 2.3rem auto 0;
    background: linear-gradient(to bottom left,var(--accent-green) 50%, transparent 50%) top left/ 50% 1.6rem no-repeat,
                linear-gradient(to bottom left,var(--accent-green) 50%, transparent 50%) top 2rem left 0/ 50% 1.6rem no-repeat,
                linear-gradient(to bottom right,var(--accent-green) 50%, transparent 50%) top right / 50% 1.6rem no-repeat,
                linear-gradient(to bottom right,var(--accent-green) 50%, transparent 50%) top 2rem right 0/ 50% 1.6rem no-repeat;
  }
}
/*--------------------------------------------------------------
サービス
--------------------------------------------------------------*/
#home_service {
  padding-bottom: 8rem;
  background-image: radial-gradient(circle 430px at 92% 12%,rgba(240, 249, 230, 0.7) 41%, transparent 57%),
                    radial-gradient(circle 430px at 12% 35%, rgba(242, 248, 254, 0.7) 41%, transparent 57%),
                    radial-gradient(circle 430px at 7% 27%,rgba(240, 249, 230, 0.7) 41%, transparent 57%),
                    radial-gradient(circle 430px at 85% 74%, rgba(240, 249, 230, 0.7) 41%, transparent 57%),
                    radial-gradient(circle 430px at 91% 70%, rgba(242, 248, 254, 0.7) 41%, transparent 57%),
                    radial-gradient(circle 430px at 7% 84%, rgba(242, 248, 254, 0.7) 41%, transparent 57%);
  @media (min-width:768px) {
    padding-bottom: 13rem;
  }
}
#home_service .inner {
  counter-reset: count 0;
}
#home_service .title {
  font-size: clamp(2rem, calc(1.1428571428571429rem + 2.380952380952381vw), 4rem);
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.08em;
  margin-bottom: 3em;
}
#home_service .content_block {
  position: relative;
  
  + .content_block {
    margin-top: 7rem;
    @media (min-width:768px) {
      margin-top: 12.8rem;
    }
  }
}
#home_service .block_title {
  display: flex;
  counter-increment: count 1;
  line-height: 1.6;
  margin-bottom: 1em;
  gap: 0 0.7em;
  @media (min-width:768px) {
    width: 47.8%;
  }

  &::before {
    content: counter(count,decimal-leading-zero);
    color: var(--accent-green);
    font-size: 160%;
    font-weight: 400;
    line-height: 1.2;
    flex-shrink: 0;
  }
}

#home_service .point_list {
  list-style: none;
  @media (min-width:768px) {
    width: 47.8%;
  }
  & li {
    display: flex;
    margin-top: 0.5em;
    gap: 0.5em;
    &::before {
      display: block;
      content: "";
      flex-shrink: 0;
      width: 1.5em;
      height: 1.5em;
      padding: 0 0.3em;
      background: url(/assets/img/common/icon_check.svg) no-repeat center / 75% ,#FFF;
      border-radius: 50%;
      position: relative;
      top: 0.2em;
    }
  }
}
#home_service .btn_wrap {
  margin-top: 3rem;
  @media (min-width:768px) {
    width: 47.8%;
    margin-top: 5rem;
  }
  .btn_i {
    margin: 0 auto 0 0;
  }
}
@media (min-width:768px) {
  #home_service .img_wrap {
    width: 47.8%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    
    & img {
      height: 100%;
      object-fit: contain;
      object-position: top;
    }
  }
  #home_service .reverse .block_title,
  #home_service .reverse .point_list {
    margin: 0 0 0 auto;
  }
  #home_service .reverse .img_wrap {
    @media (min-width:768px) {
      width: 47.8%;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  #home_service .reverse .btn_wrap {
    width: 47.8%;
    margin-left: auto;
    margin-right: 0;

    .btn_i {
      margin: 0 auto 0 0;
    }
  }
}

/*--------------------------------------------------------------
制作事例
--------------------------------------------------------------*/
#home_works {
  background: var(--bg-green);
}
#home_works .container {
  position: relative;
}
#home_works .section_title::after {
  width: min(42vw,41.5rem);
  aspect-ratio: 415 / 82;
  background: url(/assets/img/home/title_works.svg) no-repeat center / contain;
  top: -7.3rem;
  @media (min-width:768px) {
    top: -14rem;
  }
}
#home_works .content_block {
  margin: 5rem 0 7rem;
  grid-template-columns: repeat(auto-fit, minmax(25rem, 40rem));
}
#home_works .item {
  border-radius: 0.2rem;
  box-shadow: 0 0.2rem 0.7rem rgba(0,0,0,0.4);
  transition: 0.4s all ease;

  &:hover {
    box-shadow: 0 0 0.3rem rgba(0,0,0,0.3);
    transform: translate(0.1rem,0.1rem);
  }
  & a {
    display: block;
    color: var(--fc-base);

    .img_wrap {
      width: 100%;
      aspect-ratio: 400 / 227;
      overflow: hidden;
      & img {
        width: 100%;
      }
    }
    .no_image{
      display: flex;
      color: #847B6E;
      justify-content: center;
      align-items: center;
      width: 100%;
      aspect-ratio: 400 / 227;
      background: var(--grey);
    }
    .text_wrap {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0 1em 1.5em;
    }
    .archive_date {
      font-size: var(--fs-normal);
      width: fit-content;
    }
    .archive_title {
      font-size: clamp( 1.4rem, calc( 1.2285714285714285rem + 0.4761904761904762vw ), 1.8rem );
      font-weight: 700;
      width: 100%;
      margin: 0;
    }
  }
}
#home_works .btn_i {
  margin: 0 auto 0 0;
}
/*--------------------------------------------------------------
お客様の声
--------------------------------------------------------------*/
#home_voice {
  padding: 10rem 0;
  @media (min-width:768px) {
    padding: 15rem 0 13rem;
  }
}
#home_voice .container {
  position: relative;
}
#home_voice .section_title::after {
  width: min(35vw,32.4rem);
  aspect-ratio: 324 / 82;
  background: url(/assets/img/home/title_voice.svg) no-repeat center / contain;
  top: -7rem;
  @media (min-width:768px) {
    top: -12rem;
  }
}
#home_voice .content_block {
  margin: 5rem 0 7rem;
  grid-template-columns: repeat(auto-fit, minmax(25rem, 40rem));
}
#home_voice .item {
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: baseline;
  padding: 1em;
  background: #F9F8F2;
  border-radius: 2rem;
}
#home_voice .title_wrap {
  width: 47%;
}
#home_voice .name {
  font-size: var(--fs-large);
  font-weight: 700;
  margin: 0;
}
#home_voice .date {
  display: inline-block;
}
#home_voice .text {
  width: 100%;
}
#home_voice .btn_i {
  margin: 0 auto 0 0;
}
/*--------------------------------------------------------------
サポート体制
--------------------------------------------------------------*/
#home_support {
  background: url(/assets/img/home/support_bg_bird.png) no-repeat top 3% center / min(80vw,73.5rem),var(--bg-green);
}
#home_support .container {
  position: relative;
}
#home_support .section_title::after {
  width: min(48vw,49rem);
  aspect-ratio: 490 / 82;
  background: url(/assets/img/home/title_support.svg) no-repeat center / contain;
  top: -7.3rem;
  @media (min-width:768px) {
    top: -14rem;
  }
}
#home_support .catch {
  font-size: var(--fs-block-title);
  line-height: 2.2;
  text-align: center;
  margin: 2em 0;
}
#home_support .lead_text {
  max-width: 52em;
  margin: 0 auto;
}
#home_support .content_block {
  margin-top: 10rem;
  @media (min-width:768px) {
    margin-top: 14rem;
  }
}
#home_support .support_list {
  list-style: none;
  counter-reset: count 0;
  max-width: 105rem;
  margin: 0 auto;
  @media (min-width:768px) {
    padding-left: 8rem;
  }
  & li {
    counter-increment: count 1;
    padding: 3em 2em 1em;
    background: #FFF;
    position: relative;
    @media (min-width:768px) {
      padding: 1em 1em 1em 6em;
    }
    &::before {
      display: flex;
      content: counter(count,decimal-leading-zero);
      color: #FFF;
      font-size: clamp( 2rem, calc( 1.4857142857142858rem + 1.4285714285714286vw ), 3.2rem );
      text-align: center;
      justify-content: center;
      align-items: center;
      line-height: 1.2;
      width: 10rem;
      aspect-ratio: 1 / 1;
      padding-top: 1em;
      background: var(--orange);
      border-radius: 50%;
      position: absolute;
      top: -6.5rem;
      left: 50%;
      transform: translate(-50%,0);
      @media (min-width:768px) {
        width: 13.8rem;
        top: 50%;
        left: -7rem;
        transform: translate(0,-50%);
      }
    }
    &::after {
      content: "POINT";
      color: #FFF;
      font-size: var(--fs-large);
      text-align: center;
      line-height: 1.2;
      width: 10rem;
      position: absolute;
      top: -4rem;
      left: 50%;
      transform: translateX(-50%);
      @media (min-width:768px) {
        width: 13.8rem;
        top: calc(50% - 0.7em);
        left: -6.9rem;
        transform: translate(0,-50%);
      }
    }
    .title {
      font-size: var(--fs-large);
      margin-bottom: 0.5em;
    }
    .text {
      font-weight: 700;
      @media (min-width:768px) {
        line-height: 2.2;
      }
    }
    + li {
      margin-top: 8rem;
      @media (min-width:768px) {
        margin-top: 2.5rem;
      }
    }
  }
}
/*--------------------------------------------------------------
よくある質問
--------------------------------------------------------------*/
#home_faq {
  padding: 10rem 0;
  background: var(--grey);
  @media (min-width:768px) {
    padding: 10rem 0 13rem;
  }
}
#home_faq .section_title {
  position: relative;
}
#home_faq .section_title::after {
  width: min(29vw,22.6rem);
  aspect-ratio: 252 / 82;
  background: url(/assets/img/home/title_faq.svg) no-repeat center / contain;
  bottom: calc(100% + 4rem);
  left: -1.6rem;
  @media (min-width:768px) {
    bottom: 150%;
  }
}
#home_faq details {
  margin-top: 2.4rem;
  padding: 2em 1em;
  background: #FFF;
  border-radius: 1rem;
  box-shadow: 0.1rem 0.2rem 1rem rgba(0,0,0,0.3);
  cursor: pointer;
  @media (min-width:768px) {
    padding: 2em;
  }

  & summary {
    display: flex;
    list-style-type: none;
    font-weight: 700;
    font-size: clamp( 1.6rem, calc( 1.5142857142857142rem + 0.2380952380952381vw ), 1.8rem );
    align-items: center;

    &::before {
      content: "Q．";
      color: var(--key-color);
      font-size: clamp( 1.9rem, calc( 1.7714285714285715rem + 0.35714285714285715vw ), 2.2rem );
    }
    &::after {
      display: inline-block;
      content: "＋";
      color: #847B6E;
      margin: 0 0 0 auto;
    }
  }
  .answer_wrap {
    display: flex;
    align-items: baseline;

    &::before {
      content: "A．";
      color: var(--key-color);
      font-size: clamp( 1.9rem, calc( 1.7714285714285715rem + 0.35714285714285715vw ), 2.2rem );
      font-weight: 700;
      margin-top: 2.4rem;
    }
    .text_wrap {
      margin-top: 2.4rem;
      & p:nth-child(1) {
        margin: 0;
      }
    }
    .btn_wrap {
      margin-top: 2.4rem;
      .btn {
        min-width: auto;
        width: min(100%,30rem);
        padding: 0.5em;
      } 
    }
  }
  &[open] summary::after {
    content: "－";
  }
}

@media (min-width:768px) {
  #home_faq .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #home_faq .section_title {
    flex-shrink: 0;
  }
  #home_faq .content_block {
    width: 65%;
  }
  #home_faq .content_block > .btn_wrap {
    width: fit-content;
    margin: 5rem auto 0;
  }
}
/*--------------------------------------------------------------
お知らせ
--------------------------------------------------------------*/
#home_news {
  background: var(--bg-green);
    @media (min-width:768px) {
  }
}
#home_news .section_title {
  position: relative;
}
#home_news .section_title::after {
  width: min(29vw,25.2rem);
  aspect-ratio: 252 / 82;
  background: url(/assets/img/home/title_news.svg) no-repeat center / contain;
  bottom: calc(100% + 4rem);
  left: -0.8rem;
  @media (min-width:768px) {
    bottom: 150%;
    left: -1.6rem;
  }
}
#home_news .news_list {
  list-style: none;
  max-width: 100rem;
  min-height: 20rem;
  margin: 3rem auto 7rem;
  @media (min-width: 768px) {
      padding: 0 3rem;
  }

  & li {
    border-bottom: 1px solid #BCBCBC;

    & a {
      display: block;
      color: var(--fc-base);
      padding: 1.5em 0.5em;
      @media (min-width:768px) {
        display: flex;
        gap: 0 2.5em;
      }

      &:hover {
        background: rgba(0,0,0,0.1);
      }
      .news_date {
        font-size: var(--fs-large);
        flex-shrink: 0;
      }
      .news_title {
        font-size: var(--fs-large);
        font-weight: 400;
        margin: 0;
      }
    }
  }
}
@media (min-width:768px) {
  #home_news .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #home_news .section_title {
    flex-shrink: 0;
  }
  #home_news .content_block {
    width: 65%;
  }
}
/*--------------------------------------------------------------
お問い合わせ
--------------------------------------------------------------*/
#home_contact {
  padding: 10rem 0 12rem;
  background: url(/assets/img/common/border_sprout.png) repeat-x bottom left / auto 4rem;
  @media (min-width:768px) {
    padding: 20rem 0 17rem;
  }
}
#home_contact .container {
  position: relative;
}
#home_contact .section_title {
  display: block;
  text-align: center;
  width: fit-content;
  margin: 0 auto 2em;
  position: relative;

  &::before {
    position: absolute;
    top: 118%;
    left: 50%;
    transform: translateX(-50%);
  }
  &::after {
    left: 50%;
    transform: translateX(-50%);
  }
}
#home_contact .section_title::after {
  width: min(50vw,50.7rem);
  aspect-ratio: 507 / 82;
  background: url(/assets/img/home/title_contact.svg) no-repeat center / contain;
  top: -5rem;
  @media (min-width:768px) {
    top: -11rem;
  }
}
@media (min-width:768px) {
  #home_contact .text {
    text-align: center;
    line-height: 2.7;
  }
}