@charset "UTF-8";
.inner {
  width: calc(100% - 16rem);
  max-width: 100%; }

.local-nav {
  background: #E0DED9;
  background: linear-gradient(90deg, #e0ded9 0%, #f8f6f1 50%, #e0ded9 100%); }
  .local-nav ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 750px;
    width: 90%;
    margin-inline: auto;
    gap: 1rem 3rem;
    padding: 4rem 0; }
    .local-nav ul li {
      text-align: center; }
      .local-nav ul li a {
        display: flex;
        flex-direction: column;
        row-gap: 0.5rem;
        color: #ffffff;
        background: #8F798F;
        background: linear-gradient(90deg, #8f798f 0%, #aea0ae 100%);
        text-decoration: none;
        line-height: 1;
        padding: 1.5rem 1rem;
        transition: filter .2s linear;
        position: relative; }
        .local-nav ul li a::before, .local-nav ul li a::after {
          position: absolute;
          top: 50%;
          translate: 0 -50%;
          content: '';
          border: 1px solid #ffffff; }
        .local-nav ul li a::before {
          display: block;
          border: 1px solid #ffffff;
          border-radius: calc(infinity * 1px);
          width: 2.2rem;
          height: 2.2rem;
          right: 2rem; }
        .local-nav ul li a::after {
          border-width: 1px 1px 0 0;
          width: 0.8rem;
          height: 0.8rem;
          rotate: 45deg;
          right: 2.9rem; }
        .local-nav ul li a .en {
          font-family: "big-caslon-fb", "游明朝", "yu-mincho-pr6n", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
          font-weight: 700;
          font-style: normal;
          font-size: 2.5rem; }
        .local-nav ul li a .ja {
          font-family: "游明朝", "yu-mincho-pr6n", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
          font-weight: 300;
          -webkit-font-smoothing: antialiased;
          font-feature-settings: "palt";
          font-size: 12px; }
        .local-nav ul li a:hover {
          filter: brightness(110%); }
      .local-nav ul li.current a {
        background: #290B29;
        background: linear-gradient(90deg, #290b29 0%, #966496 100%); }

.category-name {
  font-family: "big-caslon-fb", "游明朝", "yu-mincho-pr6n", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 700;
  font-style: normal;
  color: #704c70;
  font-size: 4rem;
  text-align: center;
  margin-bottom: 3rem;
  margin-top: 6rem; }

.midashi + .lead {
  margin-top: 3rem; }

@media screen and (max-width: 1100px) {
  .inner {
    width: 92%; } }
@media screen and (max-width: 1024px) {
  .local-nav ul {
    padding: 3rem 0;
    gap: 1rem 2rem; } }
@media screen and (max-width: 768px) {
  .local-nav ul {
    grid-template-columns: 1fr;
    padding: 2rem 0; } }
/******************************************************

design

******************************************************/
#design .inner {
  padding-top: 0; }
#design .block {
  margin-top: 6rem;
  /**&:first-of-type {
    .img {
      margin-inline: -8rem;
    }
  }**/ }
  #design .block .midashi {
    margin-top: 6rem; }

@media screen and (max-width: 1100px) {
  #design {
    /**.block:first-of-type {
      .img {
        margin-inline: -4%;
      }
    }**/ } }
/******************************************************

landscape

******************************************************/
#landscape .overview {
  display: grid;
  grid-template-columns: 1fr 0.72fr;
  align-items: flex-start;
  margin-top: 6.5rem; }
  #landscape .overview .copy {
    padding: 1rem 7.5rem 0 13rem;
    text-align: left; }
    #landscape .overview .copy .category-name {
      text-align: left;
      margin-top: 0; }
#landscape .layout {
  max-width: 1012px;
  width: 90%;
  margin-inline: auto;
  margin-top: 8.5rem; }
  #landscape .layout .attention {
    font-family: "游明朝", "yu-mincho-pr6n", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "palt";
    background-color: #eeebe3;
    max-width: 600px;
    border-radius: calc(infinity * 1px);
    font-size: 1.5rem;
    display: flex;
    column-gap: 0.5rem;
    align-items: center;
    text-align: center;
    justify-content: center;
    margin-inline: auto; }
    #landscape .layout .attention .circle {
      color: #704c70;
      font-size: 200%; }
  #landscape .layout .prot {
    position: absolute; }
    #landscape .layout .prot a {
      position: relative;
      background-color: #704c70;
      border: 1px solid #ffffff;
      border-radius: calc(infinity * 1px);
      display: block;
      width: 2.3rem;
      height: 2.3rem;
      z-index: 0;
      transition: filter .2s linear, scale .2s ease-out; }
      #landscape .layout .prot a:hover {
        filter: brightness(120%);
        scale: 1.1; }
      #landscape .layout .prot a::before {
        background-color: rgba(112, 76, 112, 0.3);
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        content: '';
        width: 100%;
        height: 100%;
        scale: 3;
        border-radius: calc(infinity * 1px);
        z-index: -1; }
  #landscape .layout .prot01 {
    left: 67.29%;
    top: 32.78%; }
  #landscape .layout .prot02 {
    left: 47.33%;
    top: 58.78%; }
  #landscape .layout .prot03 {
    left: 36.36%;
    top: 70.53%; }
  #landscape .layout .prot04 {
    left: 71.24%;
    top: 73.99%; }
#landscape .planting {
  margin-top: 10rem; }
  #landscape .planting .flower-list {
    margin: auto;
    width: 100%;
    margin-top: 4rem;
    display: flex !important;
    justify-content: space-between !important;
    max-width: 1360px;
    flex-wrap: wrap; }
    #landscape .planting .flower-list .flower {
      width: 15%;
      margin-top: 2rem; }
    @media screen and (max-width: 768px) {
      #landscape .planting .flower-list .flower {
        width: 31%; } }
  #landscape .planting .name {
    font-family: "游明朝", "yu-mincho-pr6n", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "palt";
    letter-spacing: 0.1em;
    font-size: 1.5rem;
    margin-top: 0.5rem;
    text-align: center; }
#landscape .slick-list {
  margin: 0; }
#landscape .slick-slide {
  margin: 0 1.4rem; }
#landscape .sky {
  position: relative;
  z-index: 1; }
  #landscape .sky .lead {
    position: absolute;
    left: 0;
    width: 100%;
    top: 7%;
    line-height: 3;
    font-size: 2rem; }
    @media screen and (max-width: 1200px) {
      #landscape .sky .lead {
        font-size: 1.7rem;
        line-height: 2.5; } }
    @media screen and (max-width: 600px) {
      #landscape .sky .lead {
        font-size: 1.5rem;
        line-height: 3; } }

@media screen and (max-width: 1024px) {
  #landscape .overview .copy {
    padding: 1rem 3.5rem 0 5rem; }
  #landscape .sky .lead {
    top: 6%;
    line-height: 2.2; } }
@media screen and (max-width: 768px) {
  #landscape .overview {
    grid-template-columns: 1fr;
    row-gap: 5rem; }
    #landscape .overview .copy .category-name,
    #landscape .overview .copy .midashi,
    #landscape .overview .copy .lead {
      text-align: center; }
    #landscape .overview .copy .midashi::before {
      margin-inline: auto; }
  #landscape .layout,
  #landscape .planting {
    margin-top: 6rem; }
  #landscape .layout .prot a {
    width: 1.8rem;
    height: 1.8rem; }
  #landscape .slick-slide {
    margin: 0 0.5rem; }
  #landscape .sky .lead {
    position: static;
    background-color: #fff;
    padding: 3rem 0; } }
.block-rouka {
  display: flex;
  align-items: center;
  margin: auto;
  max-width: 100rem;
  margin-top: 8rem; }
  .block-rouka .left {
    width: 50%; }
  .block-rouka .right {
    width: 40%;
    margin-left: 5%;
    margin-right: 5%; }
  @media screen and (max-width: 768px) {
    .block-rouka {
      display: block;
      margin-top: 6rem; }
      .block-rouka .left {
        width: 80%;
        margin-left: 10%;
        margin-right: 10%; }
      .block-rouka .right {
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
        margin-top: 5rem; } }