@charset "UTF-8";

/*** main visual ***/
@media all {
  .main-visual {
    position: relative;
    overflow: hidden;
  }

  .main-copy {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    z-index: 2;
    font-weight: 600;
    color: var(--green);
    line-height: 1.2;
    writing-mode: vertical-rl;
  }
  .main-copy > span {
    display: inline-block;
    background-color: #fff;
    padding: .2em 0;
  }
  .tate-narrow {
    display: inline-block;
    margin: -.25em auto;
  }


  .visual-item {
    overflow: hidden;
  }

  .visual-item img {
    object-fit: cover;
    object-position: bottom center;
    width: 100%;
    height: 100%;
  }
  

  /* main visual - sp */
  @media only screen and (max-width: 767px) {
    .main-visual,
    .visual-item {
      height: 100vh;
      transition: height .3s;
    }
    .visual-list {height: 100%;}
    
    .main-copy {
      bottom: calc(100vh - 100dvh + 20rem);
      bottom: 80rem;
      right: 30rem;
      width: 128rem;
      height: 376rem;
      font-size: 25rem;
      /* transition: bottom .5s, opacity 1s, filter 1s; */
    }
    .main-copy > span {
      padding: .2em 0 .5em;
    }
  }


  /* main visual - sp横向き */
  @media (orientation: landscape) and (max-width: 767px) {
    .main-visual {
      height: 100vw;
    }
  }


  /* main visual - pc & tab */
  @media print,
  (min-width: 768px) {
  
    .main-visual,
    .visual-item {
      height: 660rem;
    }
  
    .main-copy {
      top: 150rem;
      left: max(calc(50% - 550rem), 40px);
      left: 60rem;
      width: 160rem;
      font-size: 32rem;
    }
    .main-copy > span {
      padding: .2em 0;
    }
  }
  

  /* main visual - tab */
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    .main-visual,
    .visual-item {
      height: 550px;
    }
    .main-copy {
      top: 110rem;
      font-size: 28px;
    }
  }
}



/* top-info */
@media all {
  .top-info {
    position: relative;
  }
  .top-info-content {
    display: flex;
    border: max(1px, 1rem) solid var(--green);
    border-radius: 50rem;
    background-color: #fff;
  }
  .top-info-news {
    display: flex;
    align-items: center;
  }
  .top-info-news dt {text-align: center;}
  .top-info-news dd a {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .top-info-contact {height: 100%;}
  .top-info-contact a {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 12rem;
    color: var(--green);
  }
  .top-info-contact a::before,
  .top-info-contact a::after {
    content: '';
    position: absolute;
    display: block;
  }
  .top-info-contact a::before {
    width: max(1px, 1rem);
    background-color: var(--green);
  }
  .top-info-contact a::after {
    background: center / contain no-repeat url(../img/common/arrow-g.svg);
  }

	/* sp */
	@media only screen and (max-width: 767px) {
    .top-info {
      margin-top: 20rem;
      padding: 0 10rem;
    }
    .top-info-content {
      height: 65rem;
    }
    .top-info-news {
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      padding: 0 10rem 0 20rem;
      line-height: 1.5;
    }
    .top-info-news dt {
      font-size: 12rem;
    }
    .top-info-contact {
      flex-shrink: 0;
      padding-right: 1em;
    }
    .top-info-contact a {
      padding-left: 1em;
    }
    .top-info-contact a::before {
      top: calc(50% - 20rem);
      left: 0;
      height: 40rem;
    }
    .top-info-contact a::after {
      position: relative;
      width: 12rem;
      height: 12rem;
    }
  }

	/* pc & tab */
	@media print,
	(min-width: 768px) {
    .top-info-content {
      position: absolute;
      top: -22rem;
      /* left: calc(50% - 100rem); */
      right: max(20rem, calc(50% - 600rem));
      width: 663rem;
      height: 45rem;
    }
    .top-info-news {
      width: calc(100% - 135rem);
    }
    .top-info-news dt {
      width: calc(100% - 416rem);
      font-size: 12rem;
    }
    .top-info-news dd {
      padding-right: 1em;
      width: 416rem;
    }
    .top-info-contact a {
      padding-left: 16rem;
      width: 135rem;
    }
    .top-info-contact a::before {
      top: calc(50% - 15rem);
      left: 0;
      height: 30rem;
    }
    .top-info-contact a::after {
      top: calc(50% - 6rem);
      right: 20rem;
      width: 17rem;
      height: 12rem;
    }
  }
}

/* lead-section */
@media all {

	/* sp */
	@media only screen and (max-width: 767px) {
    .lead-section {
      margin-top: 50rem;
    }
    .lead-section-ttl {
      padding: 0 24rem;
      text-align: center;
    }
    .lead-section-text {
      margin-top: 40rem;
      padding: 0 1em;
      font-feature-settings: "palt";
      line-height: 2;
    }
  }

	/* pc & tab */
	@media print,
	(min-width: 768px) {
    .lead-section {
      margin-top: 100rem;
    }
    .lead-section-ttl {
      margin: 0 auto;
      padding: 0 20rem;
      max-width: 880rem;
      text-align: center;
    }
    .lead-section-text {
      margin: 50rem auto 0;
      width: 600rem;
      font-size: 18rem;
      text-align: center;
      line-height: 2.22;
    }
  }
}

/* bg-parallax */
@media all {
  .bg-parallax {
    background: center / cover no-repeat url(../img/home/bg-parallax.jpg);
  }

	/* sp */
	@media only screen and (max-width: 767px) {
    .bg-parallax {
      margin-top: 80rem;
      width: 100%;
      height: 194rem;
      background-size: 170%;
    }
  }

	/* pc & tab */
	@media print,
	(min-width: 768px) {
    .bg-parallax {
      margin-top: 120rem;
      width: 100%;
      height: 320rem;
    }
  }
}

/* vegetable & contact */
@media all {
  .bg-vegetable {
    position: relative;
    background: top center / cover no-repeat url(../img/home/bg-vegetable_sp.jpg);
  }


  .contact-tel {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 100%;
    font-size: 15rem;
    font-weight: 500;
  }
  .contact-tel a {
    padding-left: 44rem;
    width: 320rem;
    font-size: 40rem;
    font-weight: bold;
  }
  .contact-tel a::before {
    width: 28rem;
    background-position-y: 52%;
  }
  .contact-tel-notice-item {display: inline-block;}

  .contact-tel a {
    position: relative;
    display: flex;
    align-items: center;
    line-height: 1;
  }
  .contact-tel a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
    background: center left / contain no-repeat url(../img/common/phone-g.svg);
  }

  .contact-form {
    position: relative;
    padding-left: 44rem;
  }
  .contact-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: -4rem;
    display: block;
    height: 100%;
    background: center right / contain no-repeat url(../img/common/mail-g.svg);
    width: 36rem;
  }
  .contact-form a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--green);
    font-weight: bold;
    color: #fff;
    border-radius: 3rem;
    font-size: 26rem;
  }
  .contact-form a::after {
    content: '';
    position: absolute;
    display: block;
    background: center right / contain no-repeat url(../img/common/arrow-w.svg);
    width: 17rem;
  }

	/* sp */
	@media only screen and (max-width: 767px) {
    .bg-vegetable {
      padding: 0 20rem;
      height: 1273rem;
    }
    .vegetable-section {padding-top: 40rem;}
    .vegetable-section-text,
    .contact-section-content {margin-top: 24rem;}
    .contact-section {margin-top: 60rem;}

    .contact-section .contact-links {margin-top: 40rem;}
    .contact-tel {
      flex-wrap: wrap;
    }
    .contact-tel a::before {top: 10rem;}
    .contact-tel-notice {padding-left: 44rem;}

    .contact-form {
      margin-top: 20rem;
    }
    .contact-form a {
      padding: 8rem 14rem;
      line-height: 1.25;
      text-align: justify;
    }
    .contact-form a::after {
      top: 1.25em;
      left: 3.75em;
      height: 2em;
    }
  }

	/* pc & tab */
	@media print,
	(min-width: 768px) {
    .bg-vegetable {
      height: 1115rem;
      background-image: url(../img/home/bg-vegetable_pc.jpg);
    }

    .vegetable-section,
    .contact-section {
      position: absolute;
      width: 500rem;
    }
    .vegetable-section-text,
    .contact-section-content {margin-top: 40rem;}

    .contact-links {margin-top: 40rem;}

    .contact-form {
      margin-top: 10rem;
      width: 450rem;
    }
    .contact-form a {
      padding-right: 16rem;
    }
    .contact-form a::after {
      top: 0;
      right: 8rem;
      height: 100%;
    }

    /* pc */
    @media (min-width: 1025px) {
      .vegetable-section {
        top: 110rem;
        left: calc(50% - 500rem);
      }
      .contact-section {
        bottom: 150rem;
        right: calc(50% - 500rem);
      }
    }


    /* tab */
    @media (max-width: 1024px) {
      /* .bg-vegetable {
        height: 800rem;
      } */
      .vegetable-section {
        top: 110rem;
        left: 20rem;
      }
      .contact-section {
        bottom: 150rem;
        right: 20rem;
      }
    }
  }
}

/* flow-section */
@media all {
  .flow-section {background-color: var(--lightgreen);}
  .flow-section-ttl {text-align: center;}
  .flow-item {background-color: #fff;}
  .flow-dl {
    position: relative;
    display: flex;
  }
  .flow-dt {
    position: relative;
    background-color: var(--green);
    text-align: center;
    color: #fff;
  }
  .flow-dt::before {
    content: '';
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    background: center / contain no-repeat url(../img/home/01.png);
  }
  .flow-item:nth-child(2) .flow-dt::before {
    background-image: url(../img/home/02.png);
  }
  .flow-item:nth-child(3) .flow-dt::before {
    background-image: url(../img/home/03.png);
  }
  .flow-item:nth-child(4) .flow-dt::before {
    background-image: url(../img/home/04.png);
  }
  .flow-item-ttl {font-weight: bold;}
  .flow-content {
    display: flex;
  }

	/* sp */
	@media only screen and (max-width: 767px) {
    .flow-section {
      padding: 60rem 0;
    }
    .flow-section-lead {
      margin-top: 45rem;
      padding: 0 16rem;
      text-align: justify;
    }
    .flow-list {
      margin-top: 50rem;
      padding: 0 8rem;
    }
    .flow-item {
      position: relative;
      padding: 15rem;
      border-radius: 70rem 10rem 10rem;
    }
    .flow-item + .flow-item {margin-top: 40rem;}
    .flow-dt {
      position: absolute;
      top: 0;
      left: 0;
      padding-top: 65rem;
      width: 110rem;
      height: 110rem;
      border-radius: 60rem;
      font-size: 14rem;
    }
    .flow-dt::before {
      top: 32rem;
      height: 30rem;
    }
    .flow-item-ttl {
      display: flex;
      align-items: center;
      padding-left: 130rem;
      height: 110rem;
      font-feature-settings: "palt";
    }
    .contact-links {margin-top: 10rem;}
    .flow-dd .contact-form {margin-top: 16rem;}
    .flow-dd .contact-form a {font-size: 24rem;}

    /* .flow-content {
      flex-direction: row-reverse;
      display: block;
    } */
    .flow-content img {
      /* float: right;
      margin-top: -50rem; */
      width: 70rem;
    }
    .flow-content p {
      margin-top: 10rem;
      padding-left: 20rem;
      width: calc(100% - 70rem);
      font-feature-settings: "palt";
      line-height: 1.5;
    }
  }

	/* pc & tab */
	@media print,
	(min-width: 768px) {
    .flow-section {
      padding: 100rem 0;
    }
    .flow-section-lead {
      margin: 45rem auto 0;
      width: 610rem;
    }
    .flow-list {
      margin: 50rem auto 0;
      padding: 0 20rem;
      width: 100%;
      max-width: 840rem;
    }
    .flow-item {
      padding: 15rem;
      height: 160rem;
      border-radius: 40rem;
    }
    .flow-item + .flow-item {margin-top: 40rem;}
    .flow-dl {align-items: center;}
    .flow-dt {
      padding-top: 70rem;
      width: 130rem;
      height: 130rem;
      border-radius: 65rem;
    }
    .flow-dt::before {
      top: 32rem;
      height: 36rem;
    }
    .flow-dd {
      padding-left: 45rem;
      width: calc(100% - 130rem);
    }
    .flow-item .contact-links {margin-top: 6rem;}
    .flow-content {
      margin-top: 12rem;
    }
    .flow-content p {
      padding-left: 20rem;
    }
  }
}

/* news-section */
@media all {
  .news-section-ttl {text-align: center;}
  .news-list {
    border: max(2px, 2rem) solid var(--green);
  }
  .news-item + .news-item {
    border-top: max(1rem, 1px) solid var(--green);
  }
  .news-item a {display: block;}
  .news-date {display: block;}
  .news-ttl {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .news-list-link a {color: var(--green);}
  .news-list-link a::after {
    content: '';
    display: inline-block;
    width: 1.5em;
    height: .75em;
    background: center right / contain no-repeat url(../img/common/arrow-g.svg);
  }


	/* sp */
	@media only screen and (max-width: 767px) {
    .news-section {
      margin-top: 60rem;
      padding: 0 20rem;
    }
    .news-list {
      margin-top: 30rem;
      padding: 10rem 20rem;
      border-radius: 16rem;
      font-size: 15rem;
    }
    .news-item + .news-item {
      margin-top: .75em;
      padding-top: .75em;
    }
    .news-date {font-size: 11rem;}
    .news-list-link {
      margin-top: 6rem;
      font-size: 13rem;
      text-align: right;
    }
  }

	/* pc & tab */
	@media print,
	(min-width: 768px) {
    .news-section {
      margin-top: 100rem;
    }
    .news-list {
      margin: 50rem auto 0;
      padding: 30rem 43rem;
      width: 700rem;
      border-radius: 23rem;
    }
    .news-item + .news-item {
      margin-top: .75em;
      padding-top: .75em;
    }
    .news-date {font-size: 12rem;}
    .news-list-link {
      margin: 12rem auto 0;
      width: 700rem;
      font-size: 14rem;
      text-align: right;
    }
  }
}

/* overview-section */
@media all {
  .overview-section {background-color: var(--lightgreen);}
  .overview-section-ttl {text-align: center;}
  .overview-list {
    display: flex;
    flex-wrap: wrap;
  }
  .overview-list dt, .overview-list dd {
    margin-top: min(-1px, -1rem);
    padding: 1em 0;
    border: max(1px, 1rem) solid var(--green);
    border-left: none;
    border-right: none;
  }

	/* sp */
	@media only screen and (max-width: 767px) {
    .overview-section {
      margin-top: 60rem;
      padding: 50rem 20rem 60rem;
    }
    .overview-list {
      margin-top: 40rem;
      font-size: 15rem;
    }
    .overview-list dt {width: 6.5em;}
    .overview-list dd {width: calc(100% - 6.5em);}
  }

	/* pc & tab */
	@media print,
	(min-width: 768px) {
    .overview-section {
      margin-top: 60rem;
      padding: 100rem 0;
    }
    .overview-list {
      margin: 50rem auto 0;
      width: 610rem;
    }
    .overview-list dt {width: 192rem;}
    .overview-list dd {width: calc(100% - 194rem);}
  }
}

/* deco */
@media all {
  .deco {position: absolute;z-index: 10;}
  .body-wrapper {overflow-x: hidden;}
	/* sp */
	@media only screen and (max-width: 767px) {
    .deco {display: none!important;}
  }

	/* pc & tab */
	@media print,
	(min-width: 768px) {
    .deco1 {
      top: -50rem;
      left: calc(50% + 400rem);
      width: 375rem;
    }
    .deco2 {
      top: 200rem;
      right: calc(50% + 400rem);
      width: 189rem;
    }
    .deco3 {
      top: 300rem;
      right: calc(50% + 500rem);
      width: 345rem;
    }
    .deco4 {
      top: -100rem;
      right: calc(50% + 450rem);
      width: 275rem;
    }
    .deco5 {
      top: 100rem;
      left: calc(50% + 400rem);
      width: 146rem;
    }
    .deco6 {
      top: 150rem;
      left: calc(50% + 480rem);
      width: 283rem;
    }
    .deco7 {
      top: -350rem;
      left: calc(50% + 400rem);
      width: 385rem;
    }
  }
}