@charset "utf-8";

*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  font-family: "Shippori Mincho", serif;
  /* 改行 */
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
  position: relative;
}

img {
  max-width: 100%;
  width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
}

a {
  text-decoration: none;
  color: black;
}

ul {
  list-style-type: none;
}

h1,
h2,
h3,
h4,
p,
a,
figure,
img,
ul,
ol,
li,
dl,
dt,
dd {
  padding: 0;
  margin: 0;
}

/* 改行したいspanタグに適用 */
.inlineBlockSpan {
  display: inline-block;
}

h1 {
  font-size: 18px;
}

/* -------------------- ヘッダー ---------------------- */

/* ---------------------- メイン -------------------------------- */
main {
  display: grid;
  row-gap: 64px;
}

section {
  h3 {
    font-size: clamp(16px, 2.5vw, 48px);
    letter-spacing: 12px;
    text-align: center;
  }
}

.heroSection {
  > .heroBgImage {
    width: 100%;
    height: 100dvh;
    background: no-repeat 30% 0 / cover url(./image/topimage.webp);
    position: relative;
    > .heroSectionText {
      color: white;
      /* 右から左へ縦書き */
      writing-mode: vertical-rl;
      text-orientation: upright;
      letter-spacing: 8px;
      position: absolute;
      top: 17%;
      left: 55%;
      text-shadow: 0 4px 50px black;
      > p {
        &:nth-of-type(1) {
          font-size: clamp(24px, 3.95vw, 76px);
        }
        &:nth-of-type(2) {
          margin-top: 24px;
          font-size: clamp(22px, 3.33vw, 64px);
        }
      }
      > .pageTitle {
        font-size: clamp(32px, 5vw, 96px);
        font-weight: 500;
      }
    }
  }
}
.pageDescription {
  width: 66.66%;
  display: grid;
  justify-content: center;
  margin-inline: auto;
  row-gap: 36px;
  > .pageDescriptionImage {
    width: 100%;
  }
  > div {
    > p {
      font-size: clamp(12px, 1.875vw, 36px);
      text-align: center;
    }
  }
}

.asparaDesignSection {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  > .asparaDesignBox {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 160px 0;
    margin-inline: auto;
    > .asparaDesignContent {
      color: white;
      display: flex;
      flex-direction: column;
      gap: 32px 0;
      text-align: center;
      > .asparaDesignContentBg {
        position: relative;
        > h4 {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: clamp(16px, 3.125vw, 60px);
          font-weight: normal;
          text-shadow: 0 0 10px #333;
          z-index: 3; /*--------------------------*/
        }
        > img {
          width: 100%;
        }
      }
      > .asparaDesignContentText {
        width: 80%;
        display: grid;
        row-gap: 24px;
        margin-inline: auto;
        > h4 {
          font-size: clamp(0.75rem, 0.45rem + 1.5vw, 2.25rem);
          letter-spacing: 6px;
        }
        > p {
          font-size: clamp(0.625rem, 0.45rem + 0.88vw, 1.5rem);
        }
      }
    }
  }
  .asparaDesignBox.farmInfoBox {
    justify-content: center;
    > .farmInfo {
      width: 60%;
      padding-top: 600px;
      > .asparaDesignContentFigure {
        display: grid;
        grid-template-columns: 40% 1fr;
        gap: 0 32px;
        > .asparaDesignContentText {
          display: grid;
          align-content: space-between;
          > div {
            display: grid;
            gap: 16px 0;
            > p {
              font-size: clamp(0.625rem, 0.45rem + 0.88vw, 1.5rem);
              text-align: left;
            }
          }
          > p {
            font-size: clamp(0.75rem, 0.45rem + 1.5vw, 2.25rem);
            text-align: right;
          }
        }
      }
    }
  }
}

.purchase {
  width: 66.66%;
  display: grid;
  row-gap: 32px;
  margin-inline: auto;
  > .purchaseBox {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: space-between;
    gap: 40px;
    > .purchaseCard {
      display: grid;
      row-gap: 10px;
      background-color: #d0d267;
      width: 100%;
      padding: 10px;
      overflow: hidden;
      > div {
        overflow: hidden;
        > img {
          transition: transform 0.3s ease-in-out;
        }
      }
      &:hover {
        box-shadow: 1px 1px 5px #333;
        > div {
          overflow: hidden;
          > img {
            transform: scale(1.1);
            transition: transform 0.3s ease-in-out;
          }
        }
      }
      > .purchaseCardPrice {
        color: white;
        background-color: rgb(93, 122, 69);
        padding: 16px 32px;
        text-align: center;
        > h4 {
          font-weight: normal;
        }
      }
    }
  }
}

/* .asparaDesignSection:has(.lineSkewDegReverse) {
  > .lineSkewDegReverse {
    transform: skew(0deg, -15deg);
    top: 65%;
  }
  > .asparaDesignBox {
    height: 1200px;
    > .asparaDesignContent {
      gap: 32px;
      > .asparaDesignContentBg {
        -webkit-mask-image: revert;
        mask-image: revert;
        width: 78.125%;
        margin-inline: auto;
        clip-path: polygon(0 15%, 50% 0, 100% 0, 100% 100%, 0 100%);
      }
      > .asparaDesignContentText {
        > h4 {
          font-size: clamp(16px, 1.666vw, 32px);
          > span {
            font-size: clamp(24px, 2.083vw, 40px);
          }
        }
      }
      > .asparaDesignContentFigure {
        display: grid;
        grid-template-columns: 45% 1fr;
        justify-content: space-between;
        gap: 0 16px;
        width: 78.125%;
        margin-inline: auto;
        > .asparaDesignContentText {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          > div {
            > p {
              font-size: clamp(12px, 1.25vw, 24px);
              letter-spacing: 4px;
              text-align: start;
            }
          }
          > p {
            text-align: end;
            letter-spacing: 8px;
            font-size: clamp(12px, 0.833vw, 16px);
            > span {
              font-size: clamp(14px, 1.25vw, 24px);
            }
          }
        }
      }
    }
  }
} */

.underlineList {
  color: #5e9162;
  display: grid;
  row-gap: 32px;
  > dl {
    width: 66.66%;
    display: grid;
    grid-template-columns: 30% 1fr;
    margin-inline: auto;
    padding: 0 36px;
    > dt,
    > dd {
      display: grid;
      padding: 16px;
      border-bottom: 2px solid #5e9162;
      font-size: clamp(11px, 0.833vw, 16px);
    }
    > dt {
      place-items: center;
    }
  }
}

/* -------------------------- フッター ----------------------------- */

.returnTop {
  width: fit-content;
  display: grid;
  place-items: center;
  margin: 32px auto;
  text-align: center;
  color: #5e9162;
  > p:first-child {
    font-size: clamp(32px, 5vw, 96px);
  }
  > p:nth-of-type(2) {
    font-size: clamp(18px, 2.083vw, 40px);
  }
}

.notations {
  display: grid;
  justify-content: center;
  padding: 12px;
  font-size: 12px;
}

/* //////////// スマホ用メディアクエリ ///////////// */
@media (width <= 520px) {
  section {
    h3 {
      letter-spacing: 6px;
    }
  }
  .heroSection {
    > .heroBgImage {
      background: no-repeat 30% 0 / cover url(./image/topimage01.webp);
      > .heroSectionText {
        text-shadow: 0 4px 10px black;
      }
    }
  }
  .pageDescription {
    width: 90%;
    > .pageDescriptionImage {
      height: revert;
      aspect-ratio: 16/9;
    }
  }
  /* .asparaDesignSection {
    > .asparaDesignBox {
      width: 90%;
      height: 1000px;
      > .asparaDesignContent {
        padding: 32px 0;
        > .asparaDesignContentText {
          width: 90%;
          > h4 {
            letter-spacing: 4px;
          }
        }
      }
    }
  } */

  .asparaDesignSection {
    > .asparaDesignBox {
      > .asparaDesignContent {
        gap: 10px 0;
        > .asparaDesignContentBg {
          > img {
            width: 70%;
          }
        }
        > .asparaDesignContentText {
          row-gap: 4px;
          > h4 {
            letter-spacing: 2px;
          }
        }
      }
    }
    .asparaDesignBox.farmInfoBox {
      > .farmInfo {
        width: 80%;
        padding-top: 180px;
        > .asparaDesignContentFigure {
          grid-template-columns: 1fr;
          gap: 12px 0;
          > img {
            width: 60%;
            aspect-ratio: 3/2;
            object-fit: cover;
            margin-inline: auto;
          }
          > .asparaDesignContentText {
            gap: 8px 0;
            > div {
              gap: 2px 0;
            }
          }
        }
      }
    }
  }

  .purchase {
    width: 90%;
    > .purchaseBox {
      grid-template-columns: 100%;
    }
  }

  /* .asparaDesignSection:has(.lineSkewDegReverse) {
    > .asparaDesignBox {
      height: 1000px;
      > .asparaDesignContent {
        > .asparaDesignContentFigure {
          grid-template-columns: 1fr;
          gap: 12px 0;
          > .asparaDesignContentText {
            gap: 12px 0;
            > div {
              > p {
                letter-spacing: 2px;
              }
            }
          }
        }
      }
    }
  } */
  .underlineList {
    > dl {
      width: 90%;
      padding: 0 18px;
      grid-template-columns: 40% 1fr;
    }
  }
}