@charset "utf-8";

/* ガーデン */
.section-garden-plan {
  display: none;
  font-family: var(--ff-serif);
  padding-block: 2rem;
  /* max-width: 66rem; */
  padding: 1rem;
  background-color: #FFF;
  background-image: url("../garden/bg.webp");
  background-repeat: no-repeat;
  background-size: 75% auto;
  background-position: right 0 top 4rem;
  background-color: #ddeac982;
  margin-top: 1rem;
}

.section-garden-plan__header {
  /* margin-top: 2rem; */
}

.section-garden-plan__header--ja {
  font-size: 1.6rem;
  text-wrap: balance;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
  line-break: strict;
  display: block;
}

.section-garden-plan__header--en {
  display: block;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: normal;
  font-style: italic;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  color: #6e951f;
  margin-top: 0.5rem
}

.section-garden-plan__wrapper {
  margin-top: 2rem;
  gap: 2rem;
  display: grid;
}

.section-garden-plan__l1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "l1p1 l1body"
    "l1p1 l1p2";
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
}

.section-garden-plan__l1--p1 {
  grid-area: l1p1
}

.section-garden-plan__l1--p2 {
  grid-area: l1p2;
  width: 93%;
}

.section-garden-plan__l1--p2 img {
  padding: 0.3rem;
  background-color: #fff;
  box-shadow: 0em 0em 1em 0em hsl(81.18deg 42.58% 70.49%);
  transform: rotatez(358deg);
  border-radius: 2px;
}

.section-garden-plan__l1--body {
  grid-area: l1body
}

.section-garden-plan__l1--title {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: normal;
  letter-spacing: 0.05em;
  color: #6e951f;
  font-size: 1.4rem;
  font-style: italic;
}

.section-garden-plan__l1--text {
  margin-top: 1rem
}

.section-garden-plan__l2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "l2p1 l2p1"
    "l2p2 l2p3"
    "l2body l2body";
  gap: 1rem;
}

.section-garden-plan__l2--p1 {
  grid-area: l2p1
}

.section-garden-plan__l2--p2 {
  grid-area: l2p2
}

.section-garden-plan__l2--p3 {
  grid-area: l2p3
}

.section-garden-plan__l2--p2 img,
.section-garden-plan__l2--p3 img {
  padding: 0.3rem;
  background-color: #fff;
  box-shadow: 0em 0em 1em 0em hsla(0, 0%, 0%, 0.1);
  transform: rotatez(357deg);
  border-radius: 2px;
}

.section-garden-plan__l2--body {
  grid-area: l2body
}

.section-garden-plan__l2--title {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: normal;
  letter-spacing: 0.05em;
  color: #6e951f;
  font-size: 1.4rem;
  font-style: italic;
}

.section-garden-plan__l2--text {
  margin-top: 1rem
}

@media (min-width: 768px) {
  .section-garden-plan {
    padding: 3rem;
    /* grid-template-columns: 1fr 1fr; */
    /* background-color: #ddeac982; */
    background-image: url("../garden/bg.webp");
    background-repeat: no-repeat;
    background-size: 19rem auto;
    padding: 3rem 6rem;
    background-position: right 2rem top 4rem;
    margin-block: 2rem;
  }

  .section-garden-plan__header {
    display: flex;
    align-items: baseline;
    gap: 2rem;
  }

  .section-garden-plan__header--ja {
    font-size: 2em;
  }

  .section-garden-plan__header--en {
    font-size: 1.8rem;
  }

  .section-garden-plan__wrapper {
    grid-template-columns: 1fr 1fr;
    gap: 3rem 4rem;
    margin-top: 3rem;
  }

  .section-garden-plan__l1 {}

  .section-garden-plan__l1--p1 {}

  .section-garden-plan__l1--p2 {}

  .section-garden-plan__l1--body {}

  .section-garden-plan__l1--title {
    font-size: 1.7rem;
  }

  .section-garden-plan__l1--text {
    font-size: 1.2rem;
  }

  .section-garden-plan__l2 {
    grid-column: span 2;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
      "l2p1 l2p1 l2body l2body"
      "l2p1 l2p1 l2p2 ."
      "l2p1 l2p1 . l2p3"
  }

  .section-garden-plan__l2--p1 {}

  .section-garden-plan__l2--p2 {}

  .section-garden-plan__l2--p3 {}

  .section-garden-plan__l2--body {}

  .section-garden-plan__l2--title {
    font-size: 1.7rem;
  }

  .section-garden-plan__l2--text {
    font-size: 1.4rem;
  }
}