@charset "UTF-8";
@font-face {
  font-family: boku2b;
  font-display: swap;
  src: url("../fonts/Boku2-Bold.otf") format("opentype"); }
@font-face {
  font-family: boku2r;
  font-display: swap;
  src: url("../fonts/Boku2-Regular.otf") format("opentype"); }
@font-face {
  font-family: hiraginokaku-w4;
  font-display: swap;
  src: url("../fonts/ヒラギノ角ゴシック W4.ttc") format("TrueType"); }
@font-face {
  font-family: hiraginokaku-w6;
  font-display: swap;
  src: url("../fonts/ヒラギノ角ゴシック W6.ttc") format("TrueType"); }
@font-face {
  font-family: hiraginokaku-w7;
  font-display: swap;
  src: url("../fonts/ヒラギノ角ゴシック W7.ttc") format("TrueType"); }
@font-face {
  font-family: SegoeScript;
  font-display: swap;
  src: url("../fonts/segoe-script-2.ttf") format("TrueType"); }
html {
  scroll-behavior: smooth;
  font-size: clamp(12px, 1.2vw, 14px); }

body {
  font-family: "NotoSans", sans-serif; }

a:active {
  color: unset; }

a:visited {
  color: unset; }

a:focus {
  outline: none; }

a {
  text-decoration: none; }

p {
  line-height: 1.8rem; }

/* js-scroll-up
------------------------------*/
.js-scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0; }

.js-scroll_up.on {
  transform: translateY(0);
  opacity: 1; }

.fadeUp {
  opacity: 1; }

.break-sp {
  display: none; }

#js-page-top {
  display: inline-block;
  position: fixed;
  bottom: 40px;
  right: 0;
  padding: 0.6em;
  border-radius: 5px;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 10000;
  max-width: 70px; }

#js-page-top img {
  display: inline-block; }

#js-page-top.is-show {
  opacity: 1; }

/* ポップアップのcss
------------------------------*/
.popup-overlay {
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease; }

.popup-overlay.fade-in {
  opacity: 1; }

.popup-content {
  visibility: hidden;
  overflow-y: scroll;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 800px;
  max-height: 750px;
  background: #fff;
  border: solid 3px #ababab;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1001;
  opacity: 0;
  transition: opacity 0.3s ease; }
  .popup-content h3 {
    font-family: boku2b;
    color: #534741;
    font-size: 2rem;
    text-align: center;
    margin: 20px 0; }
  .popup-content .top-contents {
    display: flex;
    column-gap: 30px;
    margin-bottom: 50px;
    font-size: 20px; }
    .popup-content .top-contents .text-contents {
      width: 50%; }
      .popup-content .top-contents .text-contents dl dt {
        font-family: hiraginokaku-w6;
        font-weight: 700;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        margin-bottom: 10px; }
      .popup-content .top-contents .text-contents dl dt.garden {
        color: #6b9a40; }
      .popup-content .top-contents .text-contents dl dt.flower {
        color: #d55c83; }
      .popup-content .top-contents .text-contents dl dt.garden::before {
        content: "";
        display: inline-block;
        background-image: url(../images/popup-garden-effect.png);
        background-repeat: no-repeat;
        background-size: contain;
        height: 30px;
        width: 30px; }
      .popup-content .top-contents .text-contents dl dt.flower::before {
        content: "";
        display: inline-block;
        background-image: url(../images/block-1-flower-title.png);
        background-repeat: no-repeat;
        background-size: contain;
        height: 25px;
        width: 30px; }
      .popup-content .top-contents .text-contents dl dd {
        font-family: hiraginokaku-w4;
        font-size: 1.2rem;
        color: #4d4d4d; }
    .popup-content .top-contents .img-wrapper {
      width: 50%; }
  .popup-content .bottom-contents {
    padding: 20px 5%;
    border-radius: 10px;
    border: 2px dashed #63514b; }
    .popup-content .bottom-contents h3 {
      background-color: #fff;
      position: relative;
      top: -35px;
      display: flex;
      justify-content: center;
      width: fit-content;
      margin: 0 auto;
      color: #6b9a40; }
    .popup-content .bottom-contents h3.flower {
      color: #d55c83; }
    .popup-content .bottom-contents h3:before,
    .popup-content .bottom-contents h3:after {
      position: relative;
      display: inline-block;
      content: "";
      background: #534741;
      width: 2px;
      height: 3rem;
      margin: 0 1rem;
      margin-top: -.2rem;
      vertical-align: middle; }
    .popup-content .bottom-contents h3:before {
      transform: rotate(-35deg); }
    .popup-content .bottom-contents h3:after {
      transform: rotate(35deg); }
    .popup-content .bottom-contents .bottom-contents-inner {
      display: flex;
      column-gap: 30px;
      align-items: center; }
      .popup-content .bottom-contents .bottom-contents-inner .left {
        width: 35%;
        color: #534741; }
        .popup-content .bottom-contents .bottom-contents-inner .left .img-wrapper {
          margin: 10px 0; }
        .popup-content .bottom-contents .bottom-contents-inner .left .occupation {
          color: #6b9a40;
          font-family: hiraginokaku-w6;
          font-size: 1.2rem; }
        .popup-content .bottom-contents .bottom-contents-inner .left .occupation.flower {
          color: #d55c83; }
        .popup-content .bottom-contents .bottom-contents-inner .left .worker-name {
          font-size: 1.4rem;
          font-family: hiraginokaku-w4; }
          .popup-content .bottom-contents .bottom-contents-inner .left .worker-name span {
            font-size: 0.8rem; }
        .popup-content .bottom-contents .bottom-contents-inner .left .other {
          line-height: 1.2rem; }
      .popup-content .bottom-contents .bottom-contents-inner .right {
        width: 65%;
        font-size: 16px;
        line-height: 24px;
        color: #534741; }

.popup-content.fade-in {
  opacity: 1; }

.close-popup {
  position: absolute;
  right: 10px;
  top: 0px;
  cursor: pointer;
  font-size: 30px;
  line-height: 30px;
  color: #808080; }

/*************************************/
header {
  position: relative; }
  header .sp {
    display: none; }
  header .logo-wrapper {
    background-color: #ffffff88;
    position: absolute;
    width: 100%;
    height: fit-content;
    top: 0;
    padding: 10px 0 10px 10px; }
    header .logo-wrapper .logo {
      max-width: 300px; }
  header .main-image {
    width: 100%; }
  header .top-title {
    width: 90%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #534741;
    text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff; }
    header .top-title h1 {
      font-family: boku2b;
      margin-bottom: 10px;
      font-size: 2.5rem;
      letter-spacing: 1.5rem; }
    header .top-title h2 {
      font-family: boku2r;
      font-size: 1.5rem; }
      header .top-title h2 br.sp {
        display: none; }

main {
  overflow: hidden; }
  main .sp {
    display: none; }
  main .block-1 h3.block-title {
    font-size: 2.5rem;
    letter-spacing: 3px;
    font-family: boku2b, sans-serif;
    white-space: nowrap;
    text-align: center;
    color: #534741;
    margin: 50px 0;
    margin-bottom: 80px; }
    main .block-1 h3.block-title span.garden {
      color: #6da83f; }
    main .block-1 h3.block-title span.flower {
      color: #d55c83; }
  main .block-1 .garden-work {
    margin-bottom: 80px; }
  main .block-1 .garden-work,
  main .block-1 .flower-work {
    position: relative;
    /* 円のスタイル */
    /* 左端の装飾 */
    /* 右端の装飾 */
    /* 上下にゆっくり動くアニメーション */ }
    main .block-1 .garden-work h3.bottom-title,
    main .block-1 .flower-work h3.bottom-title {
      text-align: center;
      font-family: boku2r;
      margin: 10px 30px;
      font-size: 2.5rem;
      color: #534741; }
      main .block-1 .garden-work h3.bottom-title span.garden,
      main .block-1 .flower-work h3.bottom-title span.garden {
        color: #6da83f; }
      main .block-1 .garden-work h3.bottom-title span.flower,
      main .block-1 .flower-work h3.bottom-title span.flower {
        color: #d55c83; }
    main .block-1 .garden-work .work-title,
    main .block-1 .flower-work .work-title {
      position: relative;
      width: 90%;
      max-width: fit-content;
      margin: 0 auto;
      margin-bottom: 50px; }
      main .block-1 .garden-work .work-title .work-title-top,
      main .block-1 .flower-work .work-title .work-title-top {
        display: flex;
        justify-content: center;
        column-gap: 5px;
        align-items: center; }
        main .block-1 .garden-work .work-title .work-title-top img,
        main .block-1 .flower-work .work-title .work-title-top img {
          width: 100%;
          max-width: 50px; }
        main .block-1 .garden-work .work-title .work-title-top h3,
        main .block-1 .flower-work .work-title .work-title-top h3 {
          font-family: SegoeScript, sans-serif;
          font-size: 2rem;
          color: #534741; }
    main .block-1 .garden-work .circle,
    main .block-1 .flower-work .circle {
      position: absolute;
      z-index: -1;
      border-radius: 50%;
      max-width: 33vw;
      max-height: 33vw;
      animation: floatUpDown 5s ease-in-out infinite; }
    main .block-1 .garden-work .work-title::before,
    main .block-1 .flower-work .work-title::before {
      content: '';
      position: absolute;
      background-image: url(../images/work-title-frame.png);
      background-size: contain;
      background-repeat: no-repeat;
      top: 50%;
      left: 0;
      transform: translate(-50%, -50%);
      width: 30px;
      height: 130px; }
    main .block-1 .garden-work .work-title::after,
    main .block-1 .flower-work .work-title::after {
      content: '';
      position: absolute;
      background-image: url(../images/work-title-frame.png);
      background-size: contain;
      background-repeat: no-repeat;
      top: 50%;
      right: 0;
      transform: translate(50%, -50%) scaleX(-1);
      /* 水平方向に反転 */
      width: 30px;
      height: 130px; }
    main .block-1 .garden-work .works,
    main .block-1 .flower-work .works {
      display: flex;
      width: 90%;
      max-width: 1200px;
      margin: 0 auto;
      justify-content: center;
      column-gap: 30px; }
      main .block-1 .garden-work .works .work,
      main .block-1 .flower-work .works .work {
        position: relative;
        width: 25%; }
        main .block-1 .garden-work .works .work img,
        main .block-1 .flower-work .works .work img {
          width: 100%;
          margin-bottom: 10px; }
        main .block-1 .garden-work .works .work button,
        main .block-1 .flower-work .works .work button {
          padding: 10px 20px;
          border: none;
          border-radius: 999px;
          position: relative;
          z-index: 1;
          cursor: pointer;
          width: 100%;
          color: #fff;
          font-family: boku2b;
          transition: .2s; }
          main .block-1 .garden-work .works .work button::after,
          main .block-1 .flower-work .works .work button::after {
            content: '+';
            font-weight: bold;
            position: absolute;
            top: 50%;
            left: 90%;
            transform: translate(-50%, -50%);
            color: #fff;
            border-radius: 50%;
            width: 25px;
            height: 25px;
            display: flex;
            align-items: center;
            justify-content: center; }
        main .block-1 .garden-work .works .work button:hover,
        main .block-1 .flower-work .works .work button:hover {
          opacity: 0.6; }
        main .block-1 .garden-work .works .work .button-1,
        main .block-1 .flower-work .works .work .button-1 {
          background-color: #9dd03b; }
          main .block-1 .garden-work .works .work .button-1::after,
          main .block-1 .flower-work .works .work .button-1::after {
            background-color: #7aa942; }
        main .block-1 .garden-work .works .work .button-2,
        main .block-1 .flower-work .works .work .button-2 {
          background-color: #91ceac; }
          main .block-1 .garden-work .works .work .button-2::after,
          main .block-1 .flower-work .works .work .button-2::after {
            background-color: #77aeac; }
        main .block-1 .garden-work .works .work .button-3,
        main .block-1 .flower-work .works .work .button-3 {
          background-color: #e2a900; }
          main .block-1 .garden-work .works .work .button-3::after,
          main .block-1 .flower-work .works .work .button-3::after {
            background-color: #ce9800; }
        main .block-1 .garden-work .works .work .button-4,
        main .block-1 .flower-work .works .work .button-4 {
          background-color: #c0a052; }
          main .block-1 .garden-work .works .work .button-4::after,
          main .block-1 .flower-work .works .work .button-4::after {
            background-color: #a78c52; }
        main .block-1 .garden-work .works .work .button-5,
        main .block-1 .flower-work .works .work .button-5 {
          background-color: #e29fb1; }
          main .block-1 .garden-work .works .work .button-5::after,
          main .block-1 .flower-work .works .work .button-5::after {
            background-color: #d18db1; }
        main .block-1 .garden-work .works .work .button-6,
        main .block-1 .flower-work .works .work .button-6 {
          background-color: #cba7cf; }
          main .block-1 .garden-work .works .work .button-6::after,
          main .block-1 .flower-work .works .work .button-6::after {
            background-color: #bb9bcf; }
        main .block-1 .garden-work .works .work .button-7,
        main .block-1 .flower-work .works .work .button-7 {
          background-color: #93cd93; }
          main .block-1 .garden-work .works .work .button-7::after,
          main .block-1 .flower-work .works .work .button-7::after {
            background-color: #84b593; }
@keyframes floatUpDown {
  0%,
        100% {
    transform: translateY(0); }
  50% {
    transform: translateY(-20px); } }
  main .connect-background {
    position: relative;
    z-index: -1; }
  main .block-2 {
    background-color: #f7f7f0;
    background-image: url(../images/block-2-background.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    min-height: 100vw;
    padding-bottom: 150px; }
    main .block-2 .contents .block2-title-top {
      position: relative;
      text-align: center;
      width: 90%;
      max-width: 1200px;
      margin: 0 auto;
      margin-bottom: 120px; }
      main .block-2 .contents .block2-title-top .top-title {
        font-family: SegoeScript, sans-serif;
        font-size: 2rem;
        color: #534741;
        margin-bottom: 10px; }
      main .block-2 .contents .block2-title-top .bottom-title {
        font-family: boku2b;
        font-size: 2.5rem;
        margin-bottom: 30px;
        color: #534741; }
        main .block-2 .contents .block2-title-top .bottom-title span.garden {
          color: #6b9a40; }
      main .block-2 .contents .block2-title-top .img-wrapper {
        position: absolute;
        width: 100%;
        bottom: -10px;
        right: 50%;
        transform: translate(50%, 20%); }
    main .block-2 .contents .points .point {
      width: 90%;
      max-width: 800px;
      margin: 100px auto;
      position: relative; }
      main .block-2 .contents .points .point .point-title {
        display: flex;
        align-items: center;
        column-gap: 1rem;
        border-bottom: 2px dashed #6b9a40;
        width: fit-content;
        padding-right: 20%;
        padding-bottom: 3%; }
        main .block-2 .contents .points .point .point-title .img-wrapper {
          max-width: 120px; }
      main .block-2 .contents .points .point h4 {
        font-family: boku2b;
        font-size: 2rem;
        color: #534741;
        letter-spacing: 1px;
        line-height: 2.5rem;
        flex-grow: 1; }
        main .block-2 .contents .points .point h4 span.garden {
          color: #6b9a40; }
        main .block-2 .contents .points .point h4 span.flower {
          color: #d55c83; }
        main .block-2 .contents .points .point h4 span.orange {
          color: #ff671d; }
      main .block-2 .contents .points .point h4.indent {
        text-indent: -0.5em; }
      main .block-2 .contents .points .point h4.indent2 {
        text-indent: 0.5em;
        margin-left: -0.5em; }
      main .block-2 .contents .points .point .point-description {
        color: #534741;
        padding: 30px 0 0 10%;
        font-size: 1rem;
        width: 47%; }
        main .block-2 .contents .points .point .point-description small {
          display: inline-block;
          text-indent: -1em;
          padding-left: 1em; }
      main .block-2 .contents .points .point dl {
        background-color: #eef5f6;
        padding: 5%;
        margin-top: 10px; }
        main .block-2 .contents .points .point dl dt {
          color: #009da5;
          font-family: hiraginokaku-w6;
          font-size: 1.1rem;
          margin-bottom: 5px; }
        main .block-2 .contents .points .point dl dd {
          font-size: 0.8rem;
          line-height: 1.2rem;
          color: #63514b; }
      main .block-2 .contents .points .point .point-1-image {
        position: absolute;
        width: 50%;
        right: 0%;
        top: -25%; }
      main .block-2 .contents .points .point .point-slider-wrapper {
        position: absolute;
        width: 50%;
        max-width: 300px;
        right: 0;
        top: 0%; }
        main .block-2 .contents .points .point .point-slider-wrapper .plate-wrapper {
          position: relative;
          max-width: 60%;
          left: -10%; }
        main .block-2 .contents .points .point .point-slider-wrapper .point-slider p {
          color: #63514b;
          margin-top: 10px;
          margin-left: 10%;
          font-size: 0.8rem;
          line-height: 1.2rem; }
        main .block-2 .contents .points .point .point-slider-wrapper .point-slider .slick-next,
        main .block-2 .contents .points .point .point-slider-wrapper .point-slider .slick-prev {
          background-color: #6b9a40;
          opacity: 0.8;
          height: 30px;
          width: 30px;
          border-radius: 50%;
          z-index: 1;
          top: 45%; }
          main .block-2 .contents .points .point .point-slider-wrapper .point-slider .slick-next::before,
          main .block-2 .contents .points .point .point-slider-wrapper .point-slider .slick-prev::before {
            content: "";
            display: inline-block;
            height: 15px;
            width: 15px;
            border-top: solid 2px #fff;
            border-right: solid 2px #fff; }
        main .block-2 .contents .points .point .point-slider-wrapper .point-slider .slick-prev {
          left: -15px; }
        main .block-2 .contents .points .point .point-slider-wrapper .point-slider .slick-next {
          right: -15px; }
        main .block-2 .contents .points .point .point-slider-wrapper .point-slider .slick-next::before {
          rotate: 45deg;
          margin-right: 5px; }
        main .block-2 .contents .points .point .point-slider-wrapper .point-slider .slick-prev::before {
          rotate: -135deg;
          margin-left: 5px; }
      main .block-2 .contents .points .point .point-3-table {
        position: absolute;
        right: 0;
        top: 0;
        width: 50%; }
        main .block-2 .contents .points .point .point-3-table .balloon-001 {
          font-family: hiraginokaku-w6;
          font-size: 1.2rem;
          position: relative;
          margin-bottom: 20px;
          padding: 5px;
          border: 2px solid #009da5;
          background-color: #ffffff;
          text-align: left;
          color: #009da5; }
          main .block-2 .contents .points .point .point-3-table .balloon-001 span {
            color: #db7b17; }
        main .block-2 .contents .points .point .point-3-table .balloon-001::before {
          content: "";
          position: absolute;
          bottom: 0;
          left: 50%;
          border-style: solid;
          border-width: 20px 10px 0 10px;
          border-color: #009da5 transparent transparent;
          translate: -50% 100%; }
        main .block-2 .contents .points .point .point-3-table .balloon-001::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 50%;
          border-style: solid;
          border-width: 15.5px 7.8px 0 7.8px;
          border-color: #ffffff transparent transparent;
          translate: -50% 100%; }
        main .block-2 .contents .points .point .point-3-table table,
        main .block-2 .contents .points .point .point-3-table td,
        main .block-2 .contents .points .point .point-3-table th {
          border-collapse: collapse;
          text-align: center;
          color: #4d4d4d;
          border: solid 2px #009da5; }
        main .block-2 .contents .points .point .point-3-table td,
        main .block-2 .contents .points .point .point-3-table th {
          padding: 3px;
          width: 50px;
          height: 25px;
          background-color: #fff; }
        main .block-2 .contents .points .point .point-3-table td.center {
          width: 20px; }
        main .block-2 .contents .points .point .point-3-table table {
          width: 100%;
          font-family: 'hiraginokaku-w6'; }
          main .block-2 .contents .points .point .point-3-table table .title td {
            background-color: #54bdc3;
            color: #fff; }
          main .block-2 .contents .points .point .point-3-table table tr .license {
            background-color: #d9f0f1;
            color: #12959d; }
    main .block-2 .contents .buttons {
      display: flex;
      margin: 50px 0;
      justify-content: center;
      color: #fff;
      font-size: 1.2rem;
      font-family: hiraginokaku-w6;
      column-gap: 20px; }
      main .block-2 .contents .buttons .button {
        width: 50%;
        max-width: 300px;
        text-align: center; }
        main .block-2 .contents .buttons .button a {
          display: flex;
          justify-content: center;
          position: relative;
          align-items: center;
          padding: 10px 0px;
          width: 100%;
          border: solid 5px #fff;
          border-radius: 999px;
          box-shadow: 3px 3px 5px #888;
          transition: .2s; }
          main .block-2 .contents .buttons .button a::after {
            position: absolute;
            right: 10px;
            background-color: #fff;
            content: "▲";
            text-align: center;
            font-size: 1.5rem;
            line-height: 30px;
            display: inline-block;
            height: 30px;
            width: 30px;
            border-radius: 50%;
            rotate: 90deg; }
          main .block-2 .contents .buttons .button a:hover {
            scale: 0.9;
            box-shadow: 0px 0px 0px #fff;
            opacity: 0.9; }
      main .block-2 .contents .buttons .button.oc a {
        background-color: #ea8427; }
        main .block-2 .contents .buttons .button.oc a::after {
          color: #ea8427; }
      main .block-2 .contents .buttons .button.document a {
        background-color: #4da656; }
        main .block-2 .contents .buttons .button.document a::after {
          color: #4da656; }
  main .block-3 .contents {
    max-width: 1200px;
    margin: 0 auto; }
    main .block-3 .contents .block3-title-top {
      position: relative;
      text-align: center;
      width: 90%;
      max-width: 1200px;
      margin: 0 auto; }
      main .block-3 .contents .block3-title-top .top-title {
        font-family: SegoeScript, sans-serif;
        font-size: 2rem;
        color: #534741;
        margin-bottom: 10px; }
      main .block-3 .contents .block3-title-top .bottom-title {
        font-family: boku2b;
        font-size: 2.5rem;
        margin-bottom: 30px;
        color: #534741; }
      main .block-3 .contents .block3-title-top .img-wrapper {
        position: absolute;
        width: 90%;
        max-width: 380px;
        bottom: 0;
        right: 50%;
        transform: translate(50%, 20%); }
    main .block-3 .contents .read {
      width: 90%;
      margin: 0 auto;
      text-align: center;
      font-family: boku2b;
      font-size: 2rem;
      color: #534741;
      margin-bottom: 100px; }
    main .block-3 .contents .block-3-top-content-wrapper {
      width: 80%;
      margin: 0 auto;
      margin-bottom: 130px;
      border: 2px dashed #63514b;
      border-radius: 20px; }
      main .block-3 .contents .block-3-top-content-wrapper .block-3-top-content-title {
        padding: 0 10%;
        background-color: #fff;
        position: relative;
        top: -20px;
        display: flex;
        width: fit-content;
        margin: 0 auto;
        justify-content: center;
        column-gap: 20px;
        align-items: center; }
        main .block-3 .contents .block-3-top-content-wrapper .block-3-top-content-title p {
          line-height: 1.2rem;
          color: #63514b;
          font-family: hiraginokaku-w6;
          font-weight: bold; }
        main .block-3 .contents .block-3-top-content-wrapper .block-3-top-content-title .ribbon {
          position: relative;
          display: inline-block;
          height: 40px;
          line-height: 50px;
          padding: 0 1.5rem;
          background-color: #593e28;
          color: #fff;
          font-size: 1.5rem;
          line-height: 40px;
          text-align: center;
          font-family: hiraginokaku-w6;
          letter-spacing: 3px; }
        main .block-3 .contents .block-3-top-content-wrapper .block-3-top-content-title .ribbon::before,
        main .block-3 .contents .block-3-top-content-wrapper .block-3-top-content-title .ribbon::after {
          position: absolute;
          top: 0;
          width: 0px;
          height: 0px;
          border-color: #593e28 transparent;
          border-style: solid;
          content: ''; }
        main .block-3 .contents .block-3-top-content-wrapper .block-3-top-content-title .ribbon::before {
          left: -15px;
          border-width: 20px 0px 20px 15px; }
        main .block-3 .contents .block-3-top-content-wrapper .block-3-top-content-title .ribbon::after {
          right: -15px;
          border-width: 20px 15px 20px 0px; }
    main .block-3 .contents .year-1 {
      display: flex; }
      main .block-3 .contents .year-1 .circle {
        height: 80px;
        width: 80px;
        border-radius: 50%;
        color: #534741;
        background-color: #eae755;
        border: solid 2px #534741;
        text-align: center;
        align-content: center;
        font-family: hiraginokaku-w6;
        font-size: 18px; }
        main .block-3 .contents .year-1 .circle span {
          font-size: 30px; }
    main .block-3 .contents .years {
      display: flex;
      column-gap: 5%;
      justify-content: center;
      margin: 30px 0; }
      main .block-3 .contents .years .year-1,
      main .block-3 .contents .years .year-2 {
        display: flex;
        align-items: center; }
        main .block-3 .contents .years .year-1 .circle,
        main .block-3 .contents .years .year-2 .circle {
          height: 80px;
          width: 80px;
          border-radius: 50%;
          color: #534741;
          background-color: #eae755;
          border: solid 2px #534741;
          text-align: center;
          align-content: center;
          font-family: hiraginokaku-w6;
          font-size: 1rem;
          display: flex;
          justify-content: center;
          align-items: center; }
          main .block-3 .contents .years .year-1 .circle span,
          main .block-3 .contents .years .year-2 .circle span {
            font-size: 2rem; }
        main .block-3 .contents .years .year-1 .border,
        main .block-3 .contents .years .year-2 .border {
          display: flex;
          justify-content: center;
          align-items: center; }
          main .block-3 .contents .years .year-1 .border .border-1,
          main .block-3 .contents .years .year-2 .border .border-1 {
            height: 2px;
            width: 20px;
            border-top: solid 2px #84be3f; }
          main .block-3 .contents .years .year-1 .border .border-2,
          main .block-3 .contents .years .year-2 .border .border-2 {
            height: 50px;
            width: 20px;
            border-top: solid 2px #84be3f;
            border-bottom: solid 2px #84be3f;
            border-left: solid 2px #84be3f;
            border-radius: 10px 0 0 10px; }
        main .block-3 .contents .years .year-1 .course a.garden,
        main .block-3 .contents .years .year-2 .course a.garden {
          margin-bottom: 10px; }
        main .block-3 .contents .years .year-1 .course a.garden-design,
        main .block-3 .contents .years .year-2 .course a.garden-design {
          cursor: default; }
          main .block-3 .contents .years .year-1 .course a.garden-design:hover,
          main .block-3 .contents .years .year-2 .course a.garden-design:hover {
            opacity: 1; }
        main .block-3 .contents .years .year-1 .course a,
        main .block-3 .contents .years .year-2 .course a {
          display: flex;
          align-items: center;
          background-color: #fff; }
          main .block-3 .contents .years .year-1 .course a .course-circle,
          main .block-3 .contents .years .year-2 .course a .course-circle {
            position: relative;
            z-index: 1;
            height: 40px;
            width: 40px;
            border-radius: 50%;
            background-color: #fff;
            border: solid 5px #d2e284;
            display: flex;
            justify-content: center;
            align-items: center; }
            main .block-3 .contents .years .year-1 .course a .course-circle img,
            main .block-3 .contents .years .year-2 .course a .course-circle img {
              width: 80%;
              margin: 0 auto; }
          main .block-3 .contents .years .year-1 .course a .course-circle.flower,
          main .block-3 .contents .years .year-2 .course a .course-circle.flower {
            border: solid 5px #f2ddd0; }
          main .block-3 .contents .years .year-1 .course a p,
          main .block-3 .contents .years .year-2 .course a p {
            position: relative;
            display: flex;
            align-items: center;
            left: -20px;
            background-color: #d2e284;
            color: #6b9a40;
            font-family: hiraginokaku-w6;
            border-radius: 0 999px 999px 0;
            font-size: 1rem;
            padding: 5px 20px;
            padding-right: 30px;
            height: 30px;
            flex-grow: 1;
            display: flex;
            align-items: center; }
            main .block-3 .contents .years .year-1 .course a p::after,
            main .block-3 .contents .years .year-2 .course a p::after {
              font-size: 10px;
              position: absolute;
              content: "▲";
              display: inline-block;
              rotate: 180deg;
              color: #fff;
              right: 5px; }
          main .block-3 .contents .years .year-1 .course a p.garden-design,
          main .block-3 .contents .years .year-2 .course a p.garden-design {
            left: 0px;
            background-color: #97be3f;
            color: #fff;
            border-radius: 999px; }
            main .block-3 .contents .years .year-1 .course a p.garden-design:hover,
            main .block-3 .contents .years .year-2 .course a p.garden-design:hover {
              opacity: 1; }
            main .block-3 .contents .years .year-1 .course a p.garden-design::after,
            main .block-3 .contents .years .year-2 .course a p.garden-design::after {
              font-size: 0px;
              position: absolute;
              content: "";
              display: inline-block;
              rotate: 180deg;
              color: #fff;
              right: 5px; }
          main .block-3 .contents .years .year-1 .course a p.flower,
          main .block-3 .contents .years .year-2 .course a p.flower {
            background-color: #f2ddd0;
            color: #c9597c; }
          main .block-3 .contents .years .year-1 .course a:hover,
          main .block-3 .contents .years .year-2 .course a:hover {
            opacity: 0.6; }
    main .block-3 .contents .course-info-wrapper.garden {
      position: relative;
      border: 2px dashed #63514b;
      border-left: none;
      width: 90%;
      border-radius: 0 20px 20px 0;
      padding: 3% 5% 10% 0%;
      margin-bottom: 130px; }
      main .block-3 .contents .course-info-wrapper.garden .img-wrapper-1 {
        position: absolute;
        top: -5%;
        margin-left: 5%;
        width: 40%;
        max-width: 400px; }
      main .block-3 .contents .course-info-wrapper.garden .imgs-wrapper {
        display: flex;
        width: 50%;
        column-gap: 30px;
        position: absolute;
        right: 5%;
        bottom: -70px; }
      main .block-3 .contents .course-info-wrapper.garden .course-title {
        width: 50%;
        margin-left: auto; }
        main .block-3 .contents .course-info-wrapper.garden .course-title .course-title-top {
          position: relative;
          display: flex;
          column-gap: 5px;
          align-items: center;
          width: fit-content; }
          main .block-3 .contents .course-info-wrapper.garden .course-title .course-title-top img {
            width: 25%;
            max-width: 100px; }
          main .block-3 .contents .course-info-wrapper.garden .course-title .course-title-top h3 {
            font-family: boku2b;
            color: #534741;
            font-size: 1.2rem;
            line-height: 2.2rem; }
            main .block-3 .contents .course-info-wrapper.garden .course-title .course-title-top h3 span {
              color: #88ae66;
              font-size: 2.4rem; }
          main .block-3 .contents .course-info-wrapper.garden .course-title .course-title-top::after {
            content: '';
            position: absolute;
            bottom: 2px;
            right: 0;
            width: 90%;
            border-bottom: 1px solid #63514b; }
        main .block-3 .contents .course-info-wrapper.garden .course-title .course-info-inner {
          position: relative; }
          main .block-3 .contents .course-info-wrapper.garden .course-title .course-info-inner .course-info-text p {
            font-size: 1.2rem;
            margin: 10px 0;
            font-family: boku2b;
            color: #534741; }
          main .block-3 .contents .course-info-wrapper.garden .course-title .course-info-inner .course-info-text h4 {
            text-align: center;
            font-size: 1.2rem;
            font-family: hiraginokaku-w6;
            background-color: #65aa44;
            color: #fff;
            border-radius: 999px;
            display: inline-block;
            padding: 5px 20px; }
          main .block-3 .contents .course-info-wrapper.garden .course-title .course-info-inner .course-info-text ul {
            padding: 0;
            width: 60%; }
            main .block-3 .contents .course-info-wrapper.garden .course-title .course-info-inner .course-info-text ul li {
              display: inline-block;
              margin-right: 2%;
              font-family: hiraginokaku-w6;
              color: #534741; }
              main .block-3 .contents .course-info-wrapper.garden .course-title .course-info-inner .course-info-text ul li::before {
                content: "・"; }
          main .block-3 .contents .course-info-wrapper.garden .course-title .course-info-inner .img-wrapper {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 45%;
            max-height: 100%;
            max-width: 250px; }
      main .block-3 .contents .course-info-wrapper.garden .course-title-text {
        position: absolute;
        right: -10%;
        writing-mode: vertical-rl;
        font-size: 3rem;
        color: #afa9a6;
        font-family: SegoeScript;
        top: 50%;
        transform: translate(0%, -50%);
        white-space: nowrap;
        text-align: center; }
    main .block-3 .contents .course-info-wrapper.flower {
      position: relative;
      border: 2px dashed #63514b;
      border-right: none;
      width: 90%;
      margin-left: auto;
      border-radius: 20px 0 0 20px;
      padding: 3% 0% 10% 5%;
      margin-bottom: 100px; }
      main .block-3 .contents .course-info-wrapper.flower .img-wrapper-1 {
        position: absolute;
        top: -5%;
        right: 5%;
        width: 40%;
        max-width: 400px; }
      main .block-3 .contents .course-info-wrapper.flower .imgs-wrapper {
        display: flex;
        position: absolute;
        width: 50%;
        column-gap: 30px;
        left: 5%;
        bottom: -70px; }
      main .block-3 .contents .course-info-wrapper.flower .course-title {
        width: 50%;
        margin-right: auto; }
        main .block-3 .contents .course-info-wrapper.flower .course-title .course-title-top {
          position: relative;
          display: flex;
          column-gap: 5px;
          align-items: center;
          width: fit-content; }
          main .block-3 .contents .course-info-wrapper.flower .course-title .course-title-top img {
            width: 30%;
            max-width: 200px; }
          main .block-3 .contents .course-info-wrapper.flower .course-title .course-title-top h3 {
            font-family: boku2b;
            color: #534741;
            font-size: 1.2rem;
            line-height: 2.2rem; }
            main .block-3 .contents .course-info-wrapper.flower .course-title .course-title-top h3 span {
              color: #d55c83;
              font-size: 2.5rem; }
          main .block-3 .contents .course-info-wrapper.flower .course-title .course-title-top::after {
            content: '';
            position: absolute;
            bottom: 10px;
            right: 0;
            width: 80%;
            border-bottom: 1px solid #63514b; }
        main .block-3 .contents .course-info-wrapper.flower .course-title .course-info-inner {
          position: relative; }
          main .block-3 .contents .course-info-wrapper.flower .course-title .course-info-inner .course-info-text p {
            font-size: 1.2rem;
            margin: 10px 0;
            font-family: boku2b;
            color: #534741; }
          main .block-3 .contents .course-info-wrapper.flower .course-title .course-info-inner .course-info-text h4 {
            text-align: center;
            font-size: 1.2rem;
            font-family: hiraginokaku-w6;
            background-color: #d55c83;
            color: #fff;
            border-radius: 999px;
            display: inline-block;
            padding: 5px 20px; }
          main .block-3 .contents .course-info-wrapper.flower .course-title .course-info-inner .course-info-text ul {
            padding: 0;
            width: 60%; }
            main .block-3 .contents .course-info-wrapper.flower .course-title .course-info-inner .course-info-text ul li {
              display: inline-block;
              margin-right: 2%;
              font-family: hiraginokaku-w6;
              color: #534741; }
              main .block-3 .contents .course-info-wrapper.flower .course-title .course-info-inner .course-info-text ul li::before {
                content: "・"; }
          main .block-3 .contents .course-info-wrapper.flower .course-title .course-info-inner .img-wrapper {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 45%;
            max-height: 100%;
            max-width: 250px; }
      main .block-3 .contents .course-info-wrapper.flower .course-title-text {
        position: absolute;
        left: -10%;
        writing-mode: vertical-rl;
        font-size: 3rem;
        color: #afa9a6;
        font-family: SegoeScript;
        top: 50%;
        transform: translate(0%, -50%);
        white-space: nowrap;
        text-align: center; }
    main .block-3 .contents .buttons {
      display: flex;
      margin: 50px 0;
      justify-content: center;
      color: #fff;
      font-size: 1.2rem;
      font-family: hiraginokaku-w6;
      column-gap: 20px; }
      main .block-3 .contents .buttons .button {
        width: 50%;
        max-width: 300px;
        text-align: center; }
        main .block-3 .contents .buttons .button a {
          display: flex;
          justify-content: center;
          position: relative;
          align-items: center;
          padding: 10px 0px;
          width: 100%;
          border: solid 5px #fff;
          border-radius: 999px;
          box-shadow: 3px 3px 5px #888;
          transition: .2s; }
          main .block-3 .contents .buttons .button a::after {
            position: absolute;
            right: 10px;
            background-color: #fff;
            content: "▲";
            text-align: center;
            font-size: 1.5rem;
            line-height: 30px;
            display: inline-block;
            height: 30px;
            width: 30px;
            border-radius: 50%;
            rotate: 90deg; }
          main .block-3 .contents .buttons .button a:hover {
            scale: 0.9;
            box-shadow: 0px 0px 0px #fff;
            opacity: 0.9; }
      main .block-3 .contents .buttons .button.oc a {
        background-color: #ea8427; }
        main .block-3 .contents .buttons .button.oc a::after {
          color: #ea8427; }
      main .block-3 .contents .buttons .button.document a {
        background-color: #4da656; }
        main .block-3 .contents .buttons .button.document a::after {
          color: #4da656; }
  main .block-4 .contents .block4-title-top {
    position: relative;
    text-align: center;
    width: 90%;
    max-width: 1200px;
    margin: 100px auto;
    margin-bottom: 50px; }
    main .block-4 .contents .block4-title-top .top-title {
      font-family: SegoeScript, sans-serif;
      font-size: 2rem;
      color: #534741;
      margin-bottom: 10px; }
    main .block-4 .contents .block4-title-top .bottom-title {
      font-family: boku2b;
      font-size: 2.5rem;
      margin-bottom: 30px;
      color: #534741; }
      main .block-4 .contents .block4-title-top .bottom-title span.garden {
        color: #6b9a40; }
    main .block-4 .contents .block4-title-top .img-wrapper {
      position: absolute;
      width: 100%;
      bottom: -10px;
      right: 50%;
      transform: translate(50%, 20%); }
  main .block-4 .contents .voice-slider-wrapper {
    width: 80%;
    max-width: 1200px;
    margin: 80px auto; }
    main .block-4 .contents .voice-slider-wrapper .voice-slider .slide-inner {
      padding: 5px;
      position: relative; }
      main .block-4 .contents .voice-slider-wrapper .voice-slider .slide-inner .slide-img {
        position: relative; }
        main .block-4 .contents .voice-slider-wrapper .voice-slider .slide-inner .slide-img .name {
          width: 100%;
          font-family: hiraginokaku-w6;
          background-color: #00000055;
          position: absolute;
          bottom: 0;
          color: #fff;
          border-radius: 0 0 10px 10px; }
          main .block-4 .contents .voice-slider-wrapper .voice-slider .slide-inner .slide-img .name p {
            line-height: 1.2rem;
            text-align: right;
            padding: 10px 0;
            padding-right: 10px; }
      main .block-4 .contents .voice-slider-wrapper .voice-slider .slide-inner .voice-text {
        margin-top: 10px; }
        main .block-4 .contents .voice-slider-wrapper .voice-slider .slide-inner .voice-text summary {
          text-indent: -1em;
          padding-left: 1em;
          font-family: hiraginokaku-w6;
          color: #4da656;
          transition: .2s; }
          main .block-4 .contents .voice-slider-wrapper .voice-slider .slide-inner .voice-text summary:hover {
            opacity: 0.6; }
        main .block-4 .contents .voice-slider-wrapper .voice-slider .slide-inner .voice-text p {
          padding-left: 1em;
          color: #534741; }
        main .block-4 .contents .voice-slider-wrapper .voice-slider .slide-inner .voice-text summary.flower-summary {
          color: #d55c83; }
      main .block-4 .contents .voice-slider-wrapper .voice-slider .slide-inner .circle {
        position: absolute;
        z-index: 1;
        font-family: hiraginokaku-w6;
        top: 0;
        right: 1%;
        height: 80px;
        width: 80px;
        border-radius: 50%;
        background-color: #4dae57;
        color: #fff;
        text-align: center;
        font-size: 1.2rem;
        line-height: 1.4rem;
        display: flex;
        justify-content: center;
        align-items: center; }
      main .block-4 .contents .voice-slider-wrapper .voice-slider .slide-inner .flower {
        background-color: #da5ea5; }
      main .block-4 .contents .voice-slider-wrapper .voice-slider .slide-inner img {
        width: 100%;
        object-fit: cover; }
    main .block-4 .contents .voice-slider-wrapper .voice-slider .slick-next,
    main .block-4 .contents .voice-slider-wrapper .voice-slider .slick-prev {
      background-color: #6b9a40;
      opacity: 0.8;
      height: 30px;
      width: 30px;
      border-radius: 50%;
      z-index: 1;
      top: 40%; }
      main .block-4 .contents .voice-slider-wrapper .voice-slider .slick-next::before,
      main .block-4 .contents .voice-slider-wrapper .voice-slider .slick-prev::before {
        content: "";
        display: inline-block;
        height: 15px;
        width: 15px;
        border-top: solid 2px #fff;
        border-right: solid 2px #fff; }
    main .block-4 .contents .voice-slider-wrapper .voice-slider .slick-prev {
      left: -15px; }
    main .block-4 .contents .voice-slider-wrapper .voice-slider .slick-next {
      right: -15px; }
    main .block-4 .contents .voice-slider-wrapper .voice-slider .slick-next::before {
      rotate: 45deg;
      margin-right: 5px; }
    main .block-4 .contents .voice-slider-wrapper .voice-slider .slick-prev::before {
      rotate: -135deg;
      margin-left: 5px; }
  main .block-5 {
    background-image: url("../images/block-5-background.png");
    background-repeat: no-repeat;
    background-size: cover; }
    main .block-5 .contents {
      padding: 50px 0; }
      main .block-5 .contents .main-images {
        display: flex;
        max-width: 1200px;
        margin: 0 auto;
        justify-content: center; }
        main .block-5 .contents .main-images .people {
          position: relative;
          left: 5%;
          z-index: 2; }
          main .block-5 .contents .main-images .people .block-5-images {
            position: absolute;
            bottom: 0;
            z-index: -1;
            left: -10%;
            display: flex;
            width: 100vw;
            overflow: hidden;
            margin: 0 auto;
            max-width: 1200px;
            max-height: 280px;
            height: 60%; }
            main .block-5 .contents .main-images .people .block-5-images ul {
              padding: 0;
              width: 200vw;
              display: flex;
              flex-shrink: 0;
              min-width: 600px; }
              main .block-5 .contents .main-images .people .block-5-images ul:first-child {
                animation: slide1 120s -60s linear infinite; }
              main .block-5 .contents .main-images .people .block-5-images ul:last-child {
                animation: slide2 120s linear infinite; }
              main .block-5 .contents .main-images .people .block-5-images ul li {
                display: inline-block;
                width: 100%;
                min-width: 150px;
                list-style: none;
                text-align: center; }
                main .block-5 .contents .main-images .people .block-5-images ul li img {
                  display: block;
                  width: 100%;
                  height: auto;
                  aspect-ratio: 4/3;
                  object-fit: cover; }
        main .block-5 .contents .main-images .texts {
          position: relative;
          z-index: 3;
          right: 5%; }
          main .block-5 .contents .main-images .texts h4 {
            font-size: 1.5rem;
            margin-top: 10px;
            color: #534741;
            font-family: boku2b; }
      main .block-5 .contents .text {
        width: 90%;
        margin: 0 auto;
        text-align: center;
        font-family: boku2b;
        font-size: 1.2rem;
        color: #534741;
        margin-top: 30px; }
      main .block-5 .contents .button {
        max-width: 300px;
        text-align: center;
        margin: 0 auto;
        margin-top: 30px; }
        main .block-5 .contents .button a {
          color: #fff;
          font-size: 1.2rem;
          font-family: hiraginokaku-w6;
          display: flex;
          justify-content: center;
          position: relative;
          align-items: center;
          padding: 10px 0px;
          width: 100%;
          border: solid 5px #fff;
          border-radius: 999px;
          box-shadow: 3px 3px 5px #888;
          transition: .2s;
          background-color: #ea8427; }
          main .block-5 .contents .button a::after {
            position: absolute;
            right: 10px;
            background-color: #fff;
            content: "▲";
            text-align: center;
            font-size: 1.5rem;
            line-height: 30px;
            display: inline-block;
            height: 30px;
            width: 30px;
            border-radius: 50%;
            rotate: 90deg;
            color: #ea8427; }
          main .block-5 .contents .button a:hover {
            scale: 0.9;
            box-shadow: 0px 0px 0px #fff;
            opacity: 0.9; }

.side-buttons {
  position: fixed;
  z-index: 9999;
  right: 0;
  top: 50%;
  transform: translate(0%, -50%); }
  .side-buttons .buttons {
    display: flex;
    flex-direction: column;
    row-gap: 5px; }
    .side-buttons .buttons .button {
      min-height: 100px;
      text-align: center;
      width: 50px; }
      .side-buttons .buttons .button a {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 16px;
        line-height: 20px;
        padding: 0 10px;
        font-family: hiraginokaku-w6;
        writing-mode: vertical-rl;
        width: 100%;
        min-height: 180px;
        transition: .2s; }
    .side-buttons .buttons .button.oc a {
      background-color: #e98f04; }
      .side-buttons .buttons .button.oc a:hover {
        opacity: 0.6; }
    .side-buttons .buttons .button.document a {
      background-color: #009ea7; }
      .side-buttons .buttons .button.document a:hover {
        opacity: 0.6; }
    .side-buttons .buttons .button.consul a {
      background-color: #483600; }
      .side-buttons .buttons .button.consul a:hover {
        opacity: 0.6; }

footer .contents {
  padding-top: 50px;
  width: 80%;
  max-width: 800px;
  margin: 0 auto; }
  footer .contents .map {
    text-align: center;
    margin-bottom: 50px; }
    footer .contents .map iframe {
      width: 100%; }
  footer .contents .access {
    display: flex;
    column-gap: 5%; }
    footer .contents .access .texts {
      width: 50%;
      align-content: center;
      border-top: dotted 5px #534741;
      border-bottom: dotted 5px #534741;
      padding: 10px; }
      footer .contents .access .texts h4 {
        font-size: 1.5rem;
        color: #534741;
        font-family: hiraginokaku-w6;
        text-align: center;
        margin-bottom: 10px; }
      footer .contents .access .texts dl {
        font-family: hiraginokaku-w6; }
        footer .contents .access .texts dl dt {
          font-size: 1.2rem;
          color: #6b9a40; }
        footer .contents .access .texts dl dd {
          color: #534741;
          font-size: 0.9rem; }
        footer .contents .access .texts dl:last-child {
          margin-top: 20px; }
    footer .contents .access .img-wrap {
      width: 50%; }
footer .contact {
  background-image: url("../images/footer-background.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: bottom;
  margin-top: 50px; }
  footer .contact .logo {
    width: 90%;
    max-width: 300px;
    margin: 30px auto; }
  footer .contact .copy {
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.2rem;
    background-color: #bed671;
    padding: 10px 0;
    color: #534741; }
  footer .contact .address {
    font-family: hiraginokaku-w6;
    text-align: center;
    margin: 30px 0;
    color: #736357; }

/*アニメーション*/
@keyframes slide1 {
  0% {
    transform: translateX(100%); }
  to {
    transform: translateX(-100%); } }
@keyframes slide2 {
  0% {
    transform: translateX(0); }
  to {
    transform: translateX(-200%); } }
@media screen and (max-width: 800px) {
  #js-page-top {
    bottom: 85px; }

  .popup-content {
    max-height: 70vh;
    top: 40%;
    padding: 10px; }
    .popup-content .top-contents {
      flex-direction: column; }
      .popup-content .top-contents .text-contents {
        order: 2;
        width: 100%; }
      .popup-content .top-contents .img-wrapper {
        width: 100%;
        margin-bottom: 20px; }
        .popup-content .top-contents .img-wrapper img {
          width: 100%; }
    .popup-content .bottom-contents h3 {
      top: 0;
      font-size: 1.5rem; }
    .popup-content .bottom-contents .bottom-contents-inner {
      flex-direction: column; }
      .popup-content .bottom-contents .bottom-contents-inner .left {
        width: 100%;
        margin-bottom: 20px; }
      .popup-content .bottom-contents .bottom-contents-inner .right {
        width: 100%; }

  header {
    position: relative; }
    header .pc {
      display: none; }
    header .sp {
      display: block; }
    header .main-image.sp {
      min-height: 60vh;
      width: 100%;
      object-fit: cover; }
    header .logo-wrapper {
      position: inherit; }
      header .logo-wrapper .logo {
        max-width: 300px;
        width: 90%; }
    header .top-title {
      top: 52%; }
      header .top-title h1 {
        font-family: boku2b;
        margin-bottom: 10px;
        font-size: 2rem;
        letter-spacing: 0; }
      header .top-title h2 {
        font-size: 1.2rem; }

  main {
    overflow: hidden; }
    main .pc {
      display: none; }
    main .sp {
      display: block; }
    main .block-1 h3.block-title {
      font-size: 2rem;
      letter-spacing: 1px;
      white-space: wrap;
      margin: 50px 0; }
      main .block-1 h3.block-title span.garden {
        color: #6da83f; }
      main .block-1 h3.block-title span.flower {
        color: #d55c83; }
    main .block-1 .adjusted {
      letter-spacing: -0.5em;
      /* 鉤括弧部分の文字間隔を詰める */ }
    main .block-1 .garden-work {
      margin-bottom: 80px; }
    main .block-1 .garden-work,
    main .block-1 .flower-work {
      /* 左端の装飾 */
      /* 右端の装飾 */ }
      main .block-1 .garden-work h3.bottom-title,
      main .block-1 .flower-work h3.bottom-title {
        font-size: 2rem;
        margin: 5px 10px; }
      main .block-1 .garden-work .work-title,
      main .block-1 .flower-work .work-title {
        position: relative;
        width: 90%;
        max-width: fit-content;
        margin: 0 auto;
        margin-bottom: 50px; }
        main .block-1 .garden-work .work-title .work-title-top,
        main .block-1 .flower-work .work-title .work-title-top {
          display: flex;
          justify-content: center;
          column-gap: 5px;
          align-items: center; }
          main .block-1 .garden-work .work-title .work-title-top img,
          main .block-1 .flower-work .work-title .work-title-top img {
            width: 100%;
            max-width: 50px; }
          main .block-1 .garden-work .work-title .work-title-top h3,
          main .block-1 .flower-work .work-title .work-title-top h3 {
            font-family: SegoeScript, sans-serif;
            font-size: 1.5rem;
            color: #534741; }
      main .block-1 .garden-work .work-title::before,
      main .block-1 .flower-work .work-title::before {
        height: 90px; }
      main .block-1 .garden-work .work-title::after,
      main .block-1 .flower-work .work-title::after {
        height: 90px; }
      main .block-1 .garden-work .works,
      main .block-1 .flower-work .works {
        justify-content: unset;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 30px; }
        main .block-1 .garden-work .works .work,
        main .block-1 .flower-work .works .work {
          position: relative;
          width: calc(50% - 15px); }
    main .connect-background {
      position: relative;
      z-index: -1; }
    main .block-2 .contents .block2-title-top {
      margin-bottom: 50px;
      padding-top: 50px; }
      main .block-2 .contents .block2-title-top .bottom-title {
        font-size: 2rem;
        margin-bottom: 30px; }
      main .block-2 .contents .block2-title-top .img-wrapper {
        width: 100vw;
        bottom: -10px; }
    main .block-2 .contents .points .point {
      margin: 50px auto; }
      main .block-2 .contents .points .point .point-title {
        width: 100%;
        padding-right: 0%; }
      main .block-2 .contents .points .point h4 {
        font-size: 1.8rem;
        letter-spacing: 1px;
        line-height: 2.5rem; }
      main .block-2 .contents .points .point .point-description {
        padding: 10px;
        width: 100%; }
        main .block-2 .contents .points .point .point-description small {
          display: inline-block;
          text-indent: -1em;
          padding-left: 1em; }
      main .block-2 .contents .points .point dl {
        background-color: #eef5f6;
        padding: 5%;
        margin-top: 10px; }
        main .block-2 .contents .points .point dl dt {
          color: #009da5;
          font-family: hiraginokaku-w6;
          font-size: 1.1rem;
          margin-bottom: 5px; }
        main .block-2 .contents .points .point dl dd {
          font-size: 0.8rem;
          line-height: 1.2rem;
          color: #63514b; }
      main .block-2 .contents .points .point .point-1-image {
        position: unset;
        width: 100%;
        max-width: 500px;
        margin: 0 auto; }
      main .block-2 .contents .points .point .point-slider-wrapper {
        position: unset;
        width: 100%;
        max-width: 500px;
        margin: 0 auto; }
        main .block-2 .contents .points .point .point-slider-wrapper .plate-wrapper {
          position: relative;
          max-width: 60%;
          left: -10%; }
        main .block-2 .contents .points .point .point-slider-wrapper .point-slider .slick-slide img {
          width: 100%; }
      main .block-2 .contents .points .point .point-3-table {
        position: unset;
        width: 100%; }
    main .block-2 .contents .buttons {
      flex-direction: column;
      margin: 50px 0;
      color: #fff;
      column-gap: 0;
      row-gap: 20px; }
      main .block-2 .contents .buttons .button {
        width: 100%;
        max-width: 300px;
        margin: 0 auto; }
        main .block-2 .contents .buttons .button a {
          display: flex;
          justify-content: center;
          position: relative;
          align-items: center;
          padding: 10px 0px;
          width: 100%;
          border: solid 5px #fff;
          border-radius: 999px;
          box-shadow: 3px 3px 5px #888;
          transition: .2s; }
          main .block-2 .contents .buttons .button a::after {
            position: absolute;
            right: 10px;
            background-color: #fff;
            content: "▲";
            text-align: center;
            font-size: 1.5rem;
            line-height: 30px;
            display: inline-block;
            height: 30px;
            width: 30px;
            border-radius: 50%;
            rotate: 90deg; }
          main .block-2 .contents .buttons .button a:hover {
            scale: 0.9;
            box-shadow: 0px 0px 0px #fff;
            opacity: 0.9; }
      main .block-2 .contents .buttons .button.oc a {
        background-color: #ea8427; }
        main .block-2 .contents .buttons .button.oc a::after {
          color: #ea8427; }
      main .block-2 .contents .buttons .button.document a {
        background-color: #4da656; }
        main .block-2 .contents .buttons .button.document a::after {
          color: #4da656; }
    main .block-3 .contents .block3-title-top .top-title {
      font-size: 1.8rem; }
    main .block-3 .contents .block3-title-top .bottom-title {
      font-size: 2rem; }
    main .block-3 .contents .read {
      width: 90%;
      margin: 0 auto;
      font-size: 2rem;
      line-height: 2.5rem;
      margin-bottom: 50px; }
    main .block-3 .contents .block-3-top-content-wrapper {
      width: 90%;
      margin-bottom: 80px;
      padding: 0 1%; }
      main .block-3 .contents .block-3-top-content-wrapper .block-3-top-content-title {
        padding: 0 3%;
        flex-direction: column;
        row-gap: 10px; }
        main .block-3 .contents .block-3-top-content-wrapper .block-3-top-content-title .ribbon {
          width: 100%; }
        main .block-3 .contents .block-3-top-content-wrapper .block-3-top-content-title .ribbon::before {
          left: -15px;
          border-width: 20px 0px 20px 15px; }
        main .block-3 .contents .block-3-top-content-wrapper .block-3-top-content-title .ribbon::after {
          right: -15px;
          border-width: 20px 15px 20px 0px; }
        main .block-3 .contents .block-3-top-content-wrapper .block-3-top-content-title p {
          margin: 5px 0; }
    main .block-3 .contents .years {
      display: flex;
      flex-direction: column;
      column-gap: 0;
      margin: 10px auto; }
      main .block-3 .contents .years .year-1,
      main .block-3 .contents .years .year-2 {
        display: flex;
        align-items: center;
        justify-content: start;
        margin-left: 20px; }
        main .block-3 .contents .years .year-1 .circle,
        main .block-3 .contents .years .year-2 .circle {
          height: 60px;
          width: 60px;
          border-radius: 50%;
          color: #534741;
          background-color: #eae755;
          border: solid 2px #534741;
          text-align: center;
          align-content: center;
          font-family: hiraginokaku-w6;
          font-size: 1rem;
          display: flex;
          justify-content: center;
          align-items: center; }
          main .block-3 .contents .years .year-1 .circle span,
          main .block-3 .contents .years .year-2 .circle span {
            font-size: 2rem; }
        main .block-3 .contents .years .year-1 .border,
        main .block-3 .contents .years .year-2 .border {
          display: flex;
          justify-content: center;
          align-items: center; }
          main .block-3 .contents .years .year-1 .border .border-1,
          main .block-3 .contents .years .year-2 .border .border-1 {
            height: 2px;
            width: 10px;
            border-top: solid 2px #84be3f; }
          main .block-3 .contents .years .year-1 .border .border-2,
          main .block-3 .contents .years .year-2 .border .border-2 {
            height: 50px;
            width: 10px;
            border-top: solid 2px #84be3f;
            border-bottom: solid 2px #84be3f;
            border-left: solid 2px #84be3f;
            border-radius: 10px 0 0 10px; }
        main .block-3 .contents .years .year-1 .courses,
        main .block-3 .contents .years .year-2 .courses {
          flex-grow: 1; }
        main .block-3 .contents .years .year-1 .course a.garden-design,
        main .block-3 .contents .years .year-2 .course a.garden-design {
          width: calc(100% - 20px); }
        main .block-3 .contents .years .year-1 .course a.garden,
        main .block-3 .contents .years .year-2 .course a.garden {
          margin-bottom: 10px; }
        main .block-3 .contents .years .year-1 .course a.flower,
        main .block-3 .contents .years .year-2 .course a.flower {
          margin-bottom: 10px; }
        main .block-3 .contents .years .year-1 .course a,
        main .block-3 .contents .years .year-2 .course a {
          display: flex;
          align-items: center;
          background-color: #fff; }
          main .block-3 .contents .years .year-1 .course a .course-circle,
          main .block-3 .contents .years .year-2 .course a .course-circle {
            position: relative;
            z-index: 1;
            height: 40px;
            width: 40px;
            border-radius: 50%;
            background-color: #fff;
            border: solid 5px #d2e284;
            display: flex;
            justify-content: center;
            align-items: center; }
            main .block-3 .contents .years .year-1 .course a .course-circle img,
            main .block-3 .contents .years .year-2 .course a .course-circle img {
              width: 80%;
              margin: 0 auto; }
          main .block-3 .contents .years .year-1 .course a .course-circle.flower,
          main .block-3 .contents .years .year-2 .course a .course-circle.flower {
            border: solid 5px #f2ddd0; }
          main .block-3 .contents .years .year-1 .course a p,
          main .block-3 .contents .years .year-2 .course a p {
            flex-grow: 1;
            white-space: nowrap;
            overflow: hidden; }
    main .block-3 .contents .course-info-wrapper.garden {
      position: relative;
      border: 2px dashed #63514b;
      border-left: none;
      width: 95%;
      border-radius: 0 20px 20px 0;
      padding: 3% 5% 5% 5%;
      margin-bottom: 80px; }
      main .block-3 .contents .course-info-wrapper.garden .img-wrapper-1 {
        position: unset;
        width: 100%;
        max-width: 400px;
        margin: 0;
        margin-bottom: 10px; }
      main .block-3 .contents .course-info-wrapper.garden .imgs-wrapper {
        width: 100%;
        column-gap: 30px;
        position: unset;
        right: 5%;
        bottom: -70px; }
      main .block-3 .contents .course-info-wrapper.garden .course-title {
        width: 100%;
        margin-left: auto; }
        main .block-3 .contents .course-info-wrapper.garden .course-title .course-title-top {
          position: relative;
          display: flex;
          column-gap: 5px;
          align-items: center;
          width: 100%; }
          main .block-3 .contents .course-info-wrapper.garden .course-title .course-title-top img {
            width: 25%;
            max-width: 100px; }
          main .block-3 .contents .course-info-wrapper.garden .course-title .course-title-top h3 {
            font-family: boku2b;
            color: #534741;
            font-size: 1.2rem;
            line-height: 2.2rem; }
            main .block-3 .contents .course-info-wrapper.garden .course-title .course-title-top h3 span {
              color: #88ae66;
              font-size: 2.4rem; }
          main .block-3 .contents .course-info-wrapper.garden .course-title .course-title-top::after {
            content: '';
            position: absolute;
            bottom: 2px;
            left: 45px;
            width: 75%;
            border-bottom: 1px solid #63514b; }
        main .block-3 .contents .course-info-wrapper.garden .course-title .course-info-inner {
          position: relative; }
          main .block-3 .contents .course-info-wrapper.garden .course-title .course-info-inner .course-info-text p {
            font-size: 1.2rem;
            margin: 10px 0;
            font-family: boku2b;
            color: #534741; }
          main .block-3 .contents .course-info-wrapper.garden .course-title .course-info-inner .course-info-text h4 {
            text-align: center;
            font-size: 1.2rem;
            font-family: hiraginokaku-w6;
            background-color: #65aa44;
            color: #fff;
            border-radius: 999px;
            display: inline-block;
            padding: 5px 20px; }
          main .block-3 .contents .course-info-wrapper.garden .course-title .course-info-inner .course-info-text ul {
            padding: 0;
            width: 60%; }
            main .block-3 .contents .course-info-wrapper.garden .course-title .course-info-inner .course-info-text ul li {
              display: inline-block;
              margin-right: 2%;
              font-family: hiraginokaku-w6;
              color: #534741; }
              main .block-3 .contents .course-info-wrapper.garden .course-title .course-info-inner .course-info-text ul li::before {
                content: "・"; }
          main .block-3 .contents .course-info-wrapper.garden .course-title .course-info-inner .img-wrapper {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 45%;
            max-height: unset;
            max-width: 250px; }
      main .block-3 .contents .course-info-wrapper.garden .course-title-text {
        position: absolute;
        right: 0%;
        writing-mode: vertical-rl;
        font-size: 3rem;
        color: #afa9a6;
        font-family: SegoeScript;
        top: 50%;
        transform: translate(0%, -50%);
        white-space: nowrap;
        text-align: center;
        z-index: -1;
        opacity: 0.3; }
    main .block-3 .contents .course-info-wrapper.flower {
      position: relative;
      border: 2px dashed #63514b;
      border-right: none;
      width: 95%;
      margin-left: auto;
      border-radius: 20px 0 0 20px;
      padding: 3% 5% 5% 5%;
      margin-bottom: 80px; }
      main .block-3 .contents .course-info-wrapper.flower .img-wrapper-1 {
        position: unset;
        top: -5%;
        right: 5%;
        width: 100%;
        max-width: 400px; }
      main .block-3 .contents .course-info-wrapper.flower .imgs-wrapper {
        display: flex;
        position: unset;
        width: 100%; }
      main .block-3 .contents .course-info-wrapper.flower .course-title {
        width: 100%;
        margin-right: auto; }
        main .block-3 .contents .course-info-wrapper.flower .course-title .course-title-top {
          position: relative;
          display: flex;
          column-gap: 5px;
          align-items: center;
          width: fit-content; }
          main .block-3 .contents .course-info-wrapper.flower .course-title .course-title-top img {
            width: 30%;
            max-width: 200px; }
          main .block-3 .contents .course-info-wrapper.flower .course-title .course-title-top h3 {
            font-family: boku2b;
            color: #534741;
            font-size: 1.2rem;
            line-height: 2.2rem; }
            main .block-3 .contents .course-info-wrapper.flower .course-title .course-title-top h3 span {
              color: #d55c83;
              font-size: 2.5rem; }
          main .block-3 .contents .course-info-wrapper.flower .course-title .course-title-top::after {
            content: '';
            position: absolute;
            bottom: 0px;
            right: 0;
            width: 80%;
            border-bottom: 1px solid #63514b; }
        main .block-3 .contents .course-info-wrapper.flower .course-title .course-info-inner {
          position: relative; }
          main .block-3 .contents .course-info-wrapper.flower .course-title .course-info-inner .course-info-text p {
            font-size: 1.2rem;
            margin: 10px 0;
            font-family: boku2b;
            color: #534741; }
          main .block-3 .contents .course-info-wrapper.flower .course-title .course-info-inner .course-info-text h4 {
            text-align: center;
            font-size: 1.2rem;
            font-family: hiraginokaku-w6;
            background-color: #d55c83;
            color: #fff;
            border-radius: 999px;
            display: inline-block;
            padding: 5px 20px; }
          main .block-3 .contents .course-info-wrapper.flower .course-title .course-info-inner .course-info-text ul {
            padding: 0;
            width: 60%; }
            main .block-3 .contents .course-info-wrapper.flower .course-title .course-info-inner .course-info-text ul li {
              display: inline-block;
              margin-right: 2%;
              font-family: hiraginokaku-w6;
              color: #534741; }
              main .block-3 .contents .course-info-wrapper.flower .course-title .course-info-inner .course-info-text ul li::before {
                content: "・"; }
          main .block-3 .contents .course-info-wrapper.flower .course-title .course-info-inner .img-wrapper {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 45%;
            max-height: unset;
            max-width: 250px; }
      main .block-3 .contents .course-info-wrapper.flower .course-title-text {
        position: absolute;
        left: 0%;
        writing-mode: vertical-rl;
        font-size: 3rem;
        color: #afa9a6;
        font-family: SegoeScript;
        top: 50%;
        transform: translate(0%, -50%);
        white-space: nowrap;
        text-align: center;
        z-index: -1;
        opacity: 0.3; }
    main .block-3 .contents .buttons {
      flex-direction: column;
      margin: 50px 0;
      color: #fff;
      column-gap: 0;
      row-gap: 20px; }
      main .block-3 .contents .buttons .button {
        width: 100%;
        max-width: 300px;
        margin: 0 auto; }
        main .block-3 .contents .buttons .button a {
          display: flex;
          justify-content: center;
          position: relative;
          align-items: center;
          padding: 10px 0px;
          width: 100%;
          border: solid 5px #fff;
          border-radius: 999px;
          box-shadow: 3px 3px 5px #888;
          transition: .2s; }
          main .block-3 .contents .buttons .button a::after {
            position: absolute;
            right: 10px;
            background-color: #fff;
            content: "▲";
            text-align: center;
            font-size: 1.5rem;
            line-height: 30px;
            display: inline-block;
            height: 30px;
            width: 30px;
            border-radius: 50%;
            rotate: 90deg; }
          main .block-3 .contents .buttons .button a:hover {
            scale: 0.9;
            box-shadow: 0px 0px 0px #fff;
            opacity: 0.9; }
      main .block-3 .contents .buttons .button.oc a {
        background-color: #ea8427; }
        main .block-3 .contents .buttons .button.oc a::after {
          color: #ea8427; }
      main .block-3 .contents .buttons .button.document a {
        background-color: #4da656; }
        main .block-3 .contents .buttons .button.document a::after {
          color: #4da656; }
    main .block-5 {
      background-image: url("../images/block-5-background.png");
      background-repeat: no-repeat;
      background-size: cover; }
      main .block-5 .contents .main-images .texts h4 {
        font-size: 1.5rem;
        line-height: 2rem;
        margin-top: 10px;
        color: #534741;
        font-family: boku2b;
        text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff; }
      main .block-5 .contents .text {
        width: 90%;
        margin: 0 auto;
        margin-top: 30px;
        text-align: center;
        font-family: boku2b;
        font-size: 1.2rem;
        color: #534741; }

  .side-buttons {
    position: sticky;
    right: unset;
    top: unset;
    transform: unset;
    bottom: 0; }
    .side-buttons .buttons {
      display: flex;
      align-items: end;
      flex-direction: row;
      flex-wrap: wrap;
      row-gap: 0px; }
      .side-buttons .buttons .button {
        min-height: unset;
        text-align: center; }
        .side-buttons .buttons .button a {
          display: block;
          font-size: 16px;
          padding: 5px 0;
          writing-mode: unset;
          width: 100%;
          min-height: unset; }
      .side-buttons .buttons .button.oc {
        width: 100%; }
        .side-buttons .buttons .button.oc a {
          padding: 10px 0; }
        .side-buttons .buttons .button.oc a:hover {
          opacity: 0.9; }
      .side-buttons .buttons .button.document {
        width: 50%; }
        .side-buttons .buttons .button.document a:hover {
          opacity: 0.9; }
      .side-buttons .buttons .button.consul {
        width: 50%; }
        .side-buttons .buttons .button.consul a:hover {
          opacity: 0.9; }

  footer .contents {
    padding-top: 50px;
    width: 90%; }
    footer .contents .map {
      text-align: center;
      margin-bottom: 50px; }
      footer .contents .map iframe {
        width: 100%; }
    footer .contents .access {
      display: flex;
      flex-direction: column;
      row-gap: 30px; }
      footer .contents .access .img-wrap {
        width: 100%; }
      footer .contents .access .texts {
        width: 100%; } }
@media (max-width: 550px) {
  main .block-3 .contents .course-info-wrapper.garden .course-title .course-title-top h3 span {
    font-size: 1.5rem; }

  main .block-3 .contents .course-info-wrapper.flower .course-title .course-title-top h3 span {
    font-size: 1.5rem; }

  main .block-3 .contents .course-info-wrapper.garden .course-title .course-title-top img {
    width: 15%; }

  main .block-3 .contents .course-info-wrapper.flower .course-title .course-title-top h3 {
    font-size: 1rem;
    line-height: 2rem; } }
@media (max-width: 400px) {
  main .block-1 .contents .works {
    row-gap: 30px;
    flex-direction: column;
    flex-wrap: unset; }
    main .block-1 .contents .works .work {
      position: relative;
      width: 100%; } }
@media (max-width: 380px) {
  header .top-title h1 {
    font-size: 1.5rem; }
  header .top-title h2 {
    font-size: 1rem; }

  main .block-2 .contents .points .point .point-title .img-wrapper {
    max-width: 85px; }
  main .block-2 .contents .points .point h4 {
    font-size: 1.5rem;
    line-height: 2rem; } }
@media (max-width: 320px) {
  main .block-3 .contents .years {
    scale: 0.9; } }

/*# sourceMappingURL=style.css.map */