@charset "utf-8";
:root {
  --color-key: #9DBE47;
  --color-key-dk: #5E732A;
  --color-key-lt: #EAF0DD;
  --body-bg: #F7F8F5;
  --body-color: #3F4D1C;
  --gray: #BABFAC;
  --gray-lt: #EDEFEA;
  --border-color: #E5E7DF;
  --blue: #479DBF;
  --orange: #BFA547;
  --yellow: #DFD238;
  --yellow-lt: #F8F8DC;
  --teal: #47BFA5;
  --font-sans-serif: 'Zen Maru Gothic', sans-serif;
  --font-size-base: 2.4rem;
  --font-size-xl: 4rem;
  --font-size-lg: 3.2rem;
  --font-size-sm: 2.2rem;
  --font-size-xs: 1.8rem;
  --font-weight-base: 500;
  --font-weight-bold: 700;
  --line-height-base: 2;
  --border-radius-md: 2.083vw;
  --border-radius-lg: 6.25vw;
}

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

ol,
ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
p {
  font-size: inherit;
  margin: 0;
}

img {
  height: auto;
  vertical-align: bottom;
  width: 100%;
}

input,
button,
textarea,
select {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  line-height: initial;
  outline: none;
  font-size: inherit;
  font-family: inherit;
  width: 100%;
}

form,
label {
  margin-bottom: 0;
}

b,
strong {
  font-weight: var(--font-weight-bold);
}

dd {
  margin-bottom: 1rem;
}

a,
button {
  color: var(--color-key);
  cursor: pointer;
  text-decoration: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  line-height: 1.6;
}

th {
  font-weight: var(--font-weight-base);
  text-align: left;
}

th,
td {
  padding: .3em 0;
}

html {
  font-size: .52083vw;
  -webkit-text-size-adjust: 100%;
}

body {
  animation: fadeIn 1s ease 0s 1 normal;
  background-color: var(--body-bg);
  margin: 0;
  font-family: var(--font-sans-serif);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
  line-height: var(--line-height-base);
  color: var(--body-color);
  word-break: break-all;
  overflow-wrap: break-word;
}

body.is-open {
  padding-top: var(--height-header);
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

/* --------------------------------
  共通コンテナ
-------------------------------- */
.container {
  padding-left: 9.375vw;
  padding-right: 9.375vw;
}

.container-sm {
  padding-left: 18.75vw;
  padding-right: 18.75vw;
}

/* --------------------------------
  ファーストビュー
-------------------------------- */
.hero {
  background-color: var(--color-key);
  height: 50vw;
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.hero:after {
  background: url(../img/wave.svg) left bottom / 100% no-repeat;
  bottom: -0.521vw;
  content: "";
  height: 6.667vw;
  left: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 2;
}

.logo {
  background: url(../img/logo-bg.svg) left top / 100% no-repeat;
  color: #fff;
  font-size: 4.4rem;
  height: 11.458vw;
  left: 0;
  letter-spacing: .04em;
  line-height: 1.14;
  padding: 2.083vw 0 0 2.604vw;
  position: absolute;
  top: 0;
  width: 18.75vw;
  z-index: 2;
}

.logo__sm {
  display: block;
  font-size: 55%;
}

.hero__title {
  background-color: #fff;
  border-radius: var(--border-radius-lg) var(--border-radius-lg) var(--border-radius-lg) 0;
  font-size: 4.8rem;
  left: 9.375vw;
  letter-spacing: .04em;
  line-height: 1.4;
  padding: 2.083vw 3.125vw;
  position: absolute;
  top: 18.229vw;
  z-index: 2;
}

.hero__title-lg {
  font-size: 6rem;
}

.hero__bg,
.hero__bubble {
  position: absolute;
  pointer-events: none;
}

.hero__bubble {
  z-index: 1;
}

.hero__bubble-01 {
  height: 13.542vw;
  width: 14.583vw;
  left: 20.833vw;
  top: -4.427vw;
}

.hero__bubble-02 {
  height: 13.542vw;
  width: 15.625vw;
  left: 67.448vw;
  top: 34.375vw;
}

.hero__bubble-03 {
  height: 8.333vw;
  width: 8.333vw;
  left: -1.042vw;
  top: 31.25vw;
}

.hero__bg-01 {
  height: 48.958vw;
  width: 69.792vw;
  right: 0;
  top: 0;
}

.hero__bg-02 {
  height: 22.396vw;
  width: 29.167vw;
  left: 30.729vw;
  top: 29.167vw;
}

.hero__bg-03 {
  height: 15.104vw;
  width: 16.667vw;
  left: 9.375vw;
  top: 36.979vw;
}

.hero__bg-04 {
  height: 21.354vw;
  width: 22.917vw;
  left: -4.167vw;
  top: 14.844vw;
}

/* --------------------------------
  コンテンツ
-------------------------------- */
.content {
  margin-top: 8.333vw;
}

.content__title {
  font-size: var(--font-size-xl);
  letter-spacing: .04em;
  line-height: 1.6;
  margin-bottom: 3.125vw;
}

.content__title-lg {
  font-size: 130%;
}

.content__text {
  line-height: 1.6;
}

.content-about {
  padding: 0 4.688vw;
}

.content-about__inner {
  padding: 4.167vw 4.688vw 0;
  position: relative;
}

.content-about__inner::before {
  border-radius: var(--border-radius-lg) var(--border-radius-lg) var(--border-radius-lg) 0;
  content: "";
  height: calc(100% - 4.167vw);
  left: 0;
  top: 0;
  z-index: -1;
  display: block;
  width: 100%;
  position: absolute;
}

.content-about-meet .content-about__inner::before {
  background-color: var(--yellow-lt);
}

.content-about-facility .content-about__inner::before {
  background-color: var(--color-key-lt);
}

.content-about-rental .content-about__inner::before {
  background-color: var(--gray-lt);
}

.about {
  background-color: #fff;
  border-radius: var(--border-radius-md) var(--border-radius-md) var(--border-radius-md) 0;
  overflow: hidden;
  position: relative;
}

.about:after {
  background-color: var(--color-key);
  bottom: 0;
  content: "";
  height: 0.208vw;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 5.208vw;
}

.about__title {
  font-size: var(--font-size-lg);
  letter-spacing: .04em;
  line-height: 1.4;
  padding: 1.3em 0 1.6em;
  text-align: center;
}

.appl {
  background-color: var(--color-key-lt);
  border-radius: var(--border-radius-md) var(--border-radius-md) var(--border-radius-md) 0;
  margin-top: 4.167vw;
}

.appl__body {
  padding: 2.083vw 3.125vw 3.125vw;
}

.appl__title {
  background-color: var(--color-key);
  border-radius: var(--border-radius-md) 0 var(--border-radius-md) 0;
  color: #fff;
  display: inline-block;
  font-size: var(--font-size-xl);
  line-height: 1;
  padding: .8em 3.125vw 1em;
}

.infos,
.info__text {
  margin: 0;
}

.info__title,
.info__text {
  padding: 1.5em 0;
}

.info__title {
  border-top: 2px solid var(--color-key);
}

/* --------------------------------
  フッター
-------------------------------- */
.footer {
  background-color: var(--body-color);
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
  color: #fff;
  line-height: 1.8;
  padding-top: 4.167vw;
}

.footer__body {
  padding-bottom: 4.167vw;
}

.footer__logo {
  letter-spacing: .04em;
  margin-bottom: .5em;
}

.footer__copy {
  background-color: var(--color-key);
  font-size: 2rem;
  line-height: 1;
  padding: 1em 0;
  text-align: center;
}

/* --------------------------------
  サムネイル
-------------------------------- */
.thumb {
  aspect-ratio: 4/3;
  border-bottom-right-radius: var(--border-radius-md);
  height: 100%;
  margin: 0;
  object-fit: cover;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

/* --------------------------------
  ボタン
-------------------------------- */
.button {
  border-radius: 3em;
  border: .1em solid;
  display: inline-block;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  padding: .8em 2em 1em;
}

.button-key {
  background-color: #fff;
  color: var(--color-key);
}

.button-white {
  color: #fff;
}

/* --------------------------------
  aリンク
-------------------------------- */
.link {
  text-decoration: underline;
}

/* --------------------------------
  ユーティリティー
-------------------------------- */
.text-key {
  color: var(--color-key);
}

.text-orange {
  color: var(--orange);
}

.text-blue {
  color: var(--blue);
}

.text-teal {
  color: var(--teal);
}

.text-white {
  color: #fff;
}

.fw-bold {
  font-weight: var(--font-weight-bold);
}

.text-dashed {
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-thickness: 0.208vw;
  -webkit-text-decoration-style: dashed;
  text-decoration-style: dashed;
}

.text-dashed-gray {
  text-decoration-color: var(--gray);
}

.text-dashed-yellow {
  text-decoration-color: var(--yellow);
}

.text-center {
  text-align: center;
}

.list-disc li {
  line-height: 1.5;
  padding-left: 1em;
  text-indent: -1em;
}

.list-disc li:not(:last-child) {
  margin-bottom: .5em;
}

.text-xl {
  font-size: var(--font-size-xl);
}

.text-lg {
  font-size: var(--font-size-lg);
}

.text-sm {
  font-size: var(--font-size-sm);
}

.text-xs {
  font-size: var(--font-size-xs);
}


/* --------------------------------
  スクロールアニメーションプラグイン aos
-------------------------------- */
html:not(.no-js) [data-aos=zoom-in] {
  transform: scale(.9);
}

html:not(.no-js) [data-aos=fade-up] {
  -webkit-transform: translate3d(0,2.60416vw,0);
  transform: translate3d(0,2.60416vw,0);
}

/* ================================================================
  hoverアニメーション
================================================================ */
@media (hover: hover) and (pointer: fine) {

  .button {
    transition: 1s cubic-bezier(.16,1.48,.64,1);
  }

  .button:hover {
    transform: translateY(-5%);
  }

  .button-key:hover {
    background-color: var(--color-key);
    border-color: var(--color-key);
    color: #fff;
  }

  .button-white:hover {
    background-color: #fff;
    border-color: #fff;
    color: var(--color-key);
  }

  .link:hover {
    text-decoration: none;
  }

}

/* ================================================================
  PC版のみレイアウト
================================================================ */
@media screen and (min-width: 768px) {
  
  /* --------------------------------
    コンテンツ
  -------------------------------- */
  .content-comorebi {
    margin: 3.125vw 0 -1.042vw;
  }

  .comorebi {
    align-items: center;
    display: flex;
  }

  .comorebi__text {
    padding: 0 4.688vw;
  }

  .comorebi__img {
    height: 34.375vw;
    margin-right: -1.562vw;
    width: 42.188vw;
  }

  .about-lists {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1.562vw;
  }

  .about-list {
    margin-top: 4.167vw;
    padding: 0 1.563vw;
    width: calc(100% / 3);
  }

  .appl__body {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
  }

  .info {
    display: flex;
  }

  .info__title {
    width: 15.625vw;
  }

  .info__text {
    border-top: 2px solid var(--border-color);
    flex: 1;
  }

  .info:last-child .info__title {
    border-bottom: 2px solid var(--color-key);
  }

  .info:last-child .info__text {
    border-bottom: 2px solid var(--border-color);
  }
  

  /* --------------------------------
    フッター
  -------------------------------- */
  .footer__body {
    align-items: center;
    display: flex;
    margin: 0 -1.562vw;
  }

  .gmap {
    height: 21.875vw;
    padding: 0 1.563vw;
    width: 50%;
  }

  .footer__body-text {
    order: 1;
    padding: 0 1.563vw;
    width: 50%;
  }

  /* --------------------------------
    ユーティリティー
  -------------------------------- */
  .pc-none {
    display: none;
  }

}

/* ================================================================
  スマホ版レイアウト
================================================================ */
@media screen and (max-width: 767px) {
  :root {
    --font-size-base: 1.4rem;
    --font-size-xl: 2rem;
    --font-size-lg: 1.8rem;
    --font-size-sm: 1.4rem;
    --font-size-xs: 1.2rem;
    --border-radius-md: 8vw;
    --border-radius-lg: 13.333vw;
  }

  html {
    font-size: 2.66667vw;
  }
  
  .sp-none {
    display: none!important;
  }

  /* --------------------------------
    共通コンテナ
  -------------------------------- */
  .container {
    padding-left: 5.333vw;
    padding-right: 5.333vw;
  }

  .container-sm {
    padding-left: 10.667vw;
    padding-right: 10.667vw;
  }

  /* --------------------------------
    ファーストビュー
  -------------------------------- */
  .hero {
    height: 128vw;
  }

  .hero:after {
    bottom: -1.333vw;
  }

  .hero__title {
    font-size: 2rem;
    left: 9.333vw;
    padding: 3.467vw 8vw 5.067vw 5.333vw;
    text-align: center;
    top: 52vw;
  }

  .hero__title-lg {
    font-size: 2.4rem;
  }

  .logo {
    font-size: 1.9rem;
    height: 23.467vw;
    padding: 4vw 0 0 4vw;
    width: 38.4vw;
  }

  .hero__bubble-01,
  .hero__bubble-02 {
    height: 21.333vw;
    width: auto;
  }

  .hero__bubble-01 {
    left: 62.667vw;
    top: 22.667vw;
  }

  .hero__bubble-02 {
    left: 52vw;
    top: 105.333vw;
  }

  .hero__bubble-03 {
    height: 18.667vw;
    width: 18.667vw;
    left: -2.667vw;
    top: 74.667vw;
  }

  .hero__bg-01 {
    height: 50.133vw;
    width: 71.467vw;
    right: -13.333vw;
  }

  .hero__bg-02 {
    height: 45.867vw;
    width: 59.733vw;
    left: 50.667vw;
    top: 72vw;
  }

  .hero__bg-03 {
    height: 30.933vw;
    width: 34.133vw;
    left: 5.333vw;
    top: 85.333vw;
  }

  .hero__bg-04 {
    height: 43.733vw;
    width: 46.933vw;
    left: -2.667vw;
    top: 25.333vw;
  }

  /* --------------------------------
    コンテンツ
  -------------------------------- */
  .content {
    margin-top: 13.333vw;
  }

  .content__title {
    margin-bottom: 6.667vw;
    text-align: center;
  }

  .content__title-lg {
    font-size: 120%;
  }

  .comorebi {
    padding: 0 5.333vw;
  }

  .comorebi__img {
    margin-top: 8vw;
  }

  .content-about__inner {
    padding: 13.333vw 5.333vw 0;
  }

  .content-about__inner::before {
    height: calc(100% - 13.333vw);
  }

  .about-lists {
    padding: 0 5.333vw;
  }

  .about-list {
    margin-top: 8vw;
  }

  .about:after {
    height: 0.533vw;
    width: 16vw;
  }

  .about__title {
    padding: 1.1em 0 1.3em;
  }

  .appl {
    margin-top: 8vw;
  }

  .appl__title {
    display: block;
    text-align: center;
  }

  .appl__body {
    padding: 5.333vw;
  }

  .appl__text {
    margin-bottom: 5.333vw;
  }

  .appl .button {
    font-size: var(--font-size-base);
  }

  .info__title {
    border-width: 0.267vw;
    padding: 1em 0 0;
  }

  .info__text {
    padding: .8em 0 1.2em;
  }

  .info:last-child {
    border-bottom: 1px solid var(--color-key);
  }

  /* --------------------------------
    フッター
  -------------------------------- */
  .footer {
    padding-top: 13.333vw;
  }
  
  .footer__body {
    padding-bottom: 13.333vw;
  }

  .footer__logo {
    font-size: var(--font-size-xl);
    text-align: center;
  }

  .gmap {
    margin-top: 8vw;
    height: 58.667vw;
    width: 100%;
  }
  
  .footer__copy {
    font-size: var(--font-size-xs);
  }

  /* --------------------------------
    ボタン
  -------------------------------- */
  .button {
    border-width: .2em;
    display: block;
    text-align: center;
  }

  .button.text-sm {
    border-width: .1em;
  }

  /* --------------------------------
    ユーティリティー
  -------------------------------- */
  .text-dashed {
    text-decoration-thickness: 0.533vw;
  }

  /* --------------------------------
    スクロールアニメーションプラグイン aos
  -------------------------------- */
  /*スマホ時は無くす*/
  .sp-aos-none {
    opacity: 1!important;
    transform: translateZ(0) scale(1)!important;
  }

}