@charset "UTF-8";
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  color: #4d3800;
  font-weight: 400;
}

.title {
  font-weight: 500;
}

.container {
  width: 100%;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  .container {
    width: 430px;
  }
}

.sm-container {
  width: 86.05%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .sm-container {
    width: 370px;
  }
}

picture {
  display: block;
}

img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.section-title {
  font-size: 1.125rem;
  line-height: 2;
  text-align: center;
}
.section-title .subtitle {
  display: block;
  font-size: 0.75rem;
}

.btn {
  display: block;
  position: relative;
  width: 90%;
  margin-top: 20px;
  padding: 5px 14px;
  background-color: #287e53;
  border-radius: 5px;
  color: #fff;
  font-style: 1.125rem;
  line-height: 2;
  font-weight: 500;
  transition: all 0.3s;
}
@media only screen and (min-width: 430px) {
  .btn {
    width: 322px;
  }
}

.btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-left: 14px solid #fff;
}

.btn:hover {
  opacity: 0.7;
}

.btn02 {
  display: block;
  position: relative;
  width: 100%;
  margin-top: 10px;
  padding: 3px 0 4px 14px;
  background-color: #287e53;
  border-radius: 5px;
  color: #fff;
  font-size: clamp(1rem, 0.6364rem + 1.8182vw, 1.125rem);
  line-height: 2;
  font-weight: 500;
  transition: all 0.3s;
}
@media only screen and (min-width: 430px) {
  .btn02 {
    width: 322px;
  }
}

.btn02::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-left: 14px solid #fff;
}

.btn02:hover {
  opacity: 0.7;
}

header {
  display: none;
  width: 150px;
  height: 168px;
  position: fixed;
  top: 30px;
  left: 43px;
}
@media only screen and (min-width: 960px) {
  header {
    display: block;
  }
}

aside {
  display: none;
}
@media only screen and (min-width: 960px) {
  aside {
    display: block;
    width: 150px;
    position: fixed;
    bottom: 17px;
    right: 6%;
  }
}
@media only screen and (min-width: 1200px) {
  aside {
    right: 111px;
  }
}
aside .navlist {
  display: flex;
  flex-direction: column;
  padding-left: 4px;
}
aside .navlist .navitem {
  font-size: 1.125rem;
  line-height: 2;
}
aside .qr {
  margin-top: 53px;
}
aside .qr .qr-text {
  font-size: 0.9375rem;
  line-height: 1.4;
}
aside .qr .qr-image {
  width: 100px;
  height: 100px;
  margin: 16px 30px 0 20px;
}

.background {
  width: 100%;
  height: 100vh;
  position: fixed;
  display: none;
  z-index: -10;
}
@media only screen and (min-width: 768px) {
  .background {
    display: block;
  }
}
.background .background-image {
  width: 100%;
  height: 100%;
}

.top-visual {
  height: 100vh;
  height: 100svh;
  position: relative;
}
@media only screen and (min-width: 960px) {
  .top-visual {
    padding-top: 30px;
    height: 769px;
  }
}
.top-visual figure {
  width: 100%;
  height: 100%;
}
.top-visual figure .hero-image {
  width: 100%;
  height: 100%;
}
@media only screen and (min-width: 960px) {
  .top-visual figure .hero-image img {
    border-radius: 40px 40px 0 0;
  }
}
.top-visual .hero-contents {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.67);
  border-radius: 21px;
  padding: 50px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28.5px;
}
.top-visual .hero-contents .hero-logo {
  width: 180px;
  height: 195px;
}
.top-visual .hero-contents hr {
  display: block;
  width: 83.333333%;
  border: none;
  border-top: dotted 3px #4d3800;
}
.top-visual .hero-contents .hero-title {
  width: 216px;
  font-size: 1.125rem;
  line-height: 2;
  text-align: center;
}
.top-visual .scroll-image {
  width: 40px;
  height: 54px;
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%);
}

.about {
  padding-top: 8px;
  background-color: #f3faf0;
}
.about .about-title {
  width: 92.558%;
  margin: 0 auto;
}
.about .main-character {
  margin-top: 8px;
}
.about .about-sub-title {
  margin-top: 12px;
  text-align: center;
  font-size: 1.125rem;
  line-height: 2;
}
.about .about-text {
  margin-top: 21px;
  font-size: 0.9375rem;
  line-height: 2;
}
.about .character-exit {
  margin-top: 21px;
}
.about .building-image {
  width: 100%;
  margin-top: 20px;
}

.present {
  background-color: #f3faf0;
  padding-top: 20px;
  padding-bottom: 50px;
}
.present .present-title {
  width: 100%;
}
.present .term {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.present .term .term-span {
  font-size: clamp(1.125rem, 0.3977rem + 3.6364vw, 1.375rem);
  line-height: 2;
}
.present .term .term-text {
  font-size: 0.9375rem;
  line-height: 2;
}
.present .present-content {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.present .present-content .stamp20-image {
  width: 85px;
  position: absolute;
  top: -15px;
  left: 25px;
  z-index: 10;
}
.present .present-content .present-image {
  width: 200px;
  position: relative;
}
.present .present-content .present-image img {
  border-radius: 7px;
}
.present .present-content .present-text {
  margin-top: 10px;
}

.overview {
  padding-top: 30px;
  padding-bottom: 75px;
  background-color: #fff;
}
.overview .circles {
  margin-top: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.overview .circles .circle {
  width: 15px;
  height: 15px;
  background-color: #e7f8f8;
  border-radius: 100%;
}
.overview .business-hours {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.overview .business-hours .open {
  font-size: 1.375rem;
  line-height: 2;
}
.overview .business-hours .closed {
  margin-top: 10px;
  font-size: clamp(1rem, 0.6364rem + 1.8182vw, 1.125rem);
  line-height: 2;
  text-align: center;
}
.overview .business-hours span {
  display: block;
  margin-top: 10px;
  font-size: 0.75rem;
  line-height: 2;
}
.overview .area-image {
  width: 100%;
  margin-top: 15px;
}
.overview .triangle {
  margin-top: 9px;
  content: "";
  position: relative;
  border: 10px solid transparent;
  border-top: 18px solid #287e53;
}
.overview .triangle::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-top: 18px solid #287e53;
}
.overview .triangle::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-top: 18px solid #287e53;
}
.overview .kyabechi-park {
  width: 100%;
  margin-top: 21px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.overview .kyabechi-park .slider-title {
  font-size: 1.125rem;
  line-height: 2;
  -webkit-text-decoration: underline 5px #b9d7a0;
          text-decoration: underline 5px #b9d7a0;
}
.overview .kyabechi-park .slider-text {
  margin-top: 10px;
  font-size: 0.975rem;
  line-height: 1.9;
  letter-spacing: -0.03em;
}
.overview .kyabechi-park .swiper-area {
  width: 100%;
  margin-top: 14px;
  position: relative;
}
.overview .kyabechi-park .swiper-area .swiper01 {
  margin: 0 auto;
  width: 86.4864864865%;
  aspect-ratio: 32/25;
  overflow: hidden;
}
.overview .kyabechi-park .swiper-area .swiper01 .swiper-wrapper {
  transition-timing-function: linear;
}
.overview .kyabechi-park .swiper-area .swiper01 .swiper-wrapper .swiper-slide {
  overflow: hidden;
}
.overview .kyabechi-park .swiper-area .swiper-button-prev01,
.overview .kyabechi-park .swiper-area .swiper-button-next01 {
  position: absolute;
  cursor: pointer;
  top: 45%;
}
.overview .kyabechi-park .swiper-area .swiper-button-prev01 {
  left: 0;
  border-top: solid 12px transparent;
  border-bottom: solid 12px transparent;
  border-right: solid 12px #4d3800;
}
.overview .kyabechi-park .swiper-area .swiper-button-next01 {
  right: 0;
  border-top: solid 12px transparent;
  border-bottom: solid 12px transparent;
  border-left: solid 12px #4d3800;
}
.overview .kyabechi-park .swiper-area .swiper-pagination {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.overview .kyabechi-park .swiper-area .swiper-pagination .swiper-pagination-bullet {
  display: block;
  margin: 0;
  width: 10px;
  height: 10px;
  background-color: #4d3800;
}
.overview .smile-zone {
  width: 100%;
  margin-top: 57px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.overview .smile-zone .slider-title {
  font-size: 1.125rem;
  line-height: 1.9;
  -webkit-text-decoration: underline 5px #f0a0a3;
          text-decoration: underline 5px #f0a0a3;
}
.overview .smile-zone .slider-text {
  margin-top: 8px;
  font-size: 0.975rem;
  line-height: 2;
  letter-spacing: -0.03em;
}
.overview .smile-zone .swiper-area {
  width: 100%;
  position: relative;
}
.overview .smile-zone .swiper-area .swiper02 {
  margin: 14px auto 0;
  width: 86.4864864865%;
  aspect-ratio: 32/25;
  overflow: hidden;
}
.overview .smile-zone .swiper-area .swiper02 .swiper-wrapper {
  transition-timing-function: linear;
}
.overview .smile-zone .swiper-area .swiper02 .swiper-wrapper .swiper-slide {
  overflow: hidden;
}
.overview .smile-zone .swiper-area .swiper-button-prev02,
.overview .smile-zone .swiper-area .swiper-button-next02 {
  margin: auto;
  position: absolute;
  top: 45%;
}
.overview .smile-zone .swiper-area .swiper-button-prev02 {
  left: 0;
  border-top: solid 12px transparent;
  border-bottom: solid 12px transparent;
  border-right: solid 12px #4d3800;
}
.overview .smile-zone .swiper-area .swiper-button-next02 {
  right: 0;
  border-top: solid 12px transparent;
  border-bottom: solid 12px transparent;
  border-left: solid 12px #4d3800;
}
.overview .smile-zone .swiper-area .swiper-button-prev02:hover,
.overview .smile-zone .swiper-area .swiper-button-next02:hover {
  cursor: pointer;
}
.overview .smile-zone .swiper-area .swiper-pagination02 {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.overview .smile-zone .swiper-area .swiper-pagination02 .swiper-pagination-bullet {
  display: block;
  margin: 0;
  width: 10px;
  height: 10px;
  background-color: #4d3800;
}

.price {
  padding-top: 30px;
  padding-bottom: 18px;
  background-color: #fdfdef;
}
.price .circles02 {
  margin-top: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.price .circles02 .circle02 {
  width: 15px;
  height: 15px;
  background-color: #c1eacf;
  border-radius: 100%;
}
.price .price-text {
  margin-top: 19px;
  margin-bottom: 5px;
  font-size: 1.125rem;
  line-height: 2;
}
.price .local {
  width: 100%;
  margin-top: 20px;
  padding: 10px 15px 17.5px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media only screen and (min-width: 430px) {
  .price .local {
    padding: 10px 14px 17.5px 25px;
  }
}
.price .local .local-title {
  font-size: 1.375rem;
  line-height: 2;
  color: #287e53;
}
.price .local .divisions {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.price .local .divisions .division {
  font-size: clamp(1.25rem, 0.8864rem + 1.8182vw, 1.375rem);
  line-height: 2;
  display: flex;
  justify-content: space-between;
}
.price .notes {
  width: 90%;
  margin-top: 16px;
  margin-right: auto;
  font-size: 1.125rem;
  line-height: 2;
  padding-left: 1em;
  text-indent: -1em;
}
.price .notes .note::before {
  content: "※";
}

.link {
  padding-top: 21px;
  background-color: #fff;
}
.link .cta {
  width: 100%;
}
.link .cta:hover {
  opacity: 0.7;
}

.about-nanporo {
  padding-top: 40px;
  padding-bottom: 50px;
  background-color: #fff;
}
.about-nanporo .circles03 {
  margin-top: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.about-nanporo .circles03 .circle03 {
  width: 15px;
  height: 15px;
  background-color: #f4d7ef;
  border-radius: 100%;
}
.about-nanporo .about-nanporo-text {
  margin-top: 25px;
  font-size: clamp(1rem, 0.6364rem + 1.8182vw, 1.125rem);
  line-height: 2;
  text-align: center;
}
.about-nanporo .map {
  width: 100%;
  margin-top: 22px;
}
.about-nanporo .points {
  margin-top: 38px;
  display: flex;
  flex-direction: column;
  gap: 31px;
}
.about-nanporo .points .point {
  position: relative;
}
.about-nanporo .points .point .point-number {
  position: absolute;
  top: 10px;
  left: 15px;
}
.about-nanporo .points .point .number02,
.about-nanporo .points .point .number03 {
  top: 0;
  left: 13px;
}
.about-nanporo .points .point .point-image {
  width: 100%;
}
.about-nanporo .points .point .point-image img {
  border-radius: 29px;
}
.about-nanporo .points .point .point-title {
  margin-top: 10px;
  font-size: 1.125rem;
  line-height: 2;
}
.about-nanporo .points .point .point-title .pink {
  color: #d92e8a;
}
.about-nanporo .points .point .point-text {
  margin-top: 11px;
  font-size: 0.975rem;
  line-height: 1.9;
  letter-spacing: -0.03em;
}
.about-nanporo .link-list {
  margin-top: 28px;
  padding: 20px 21px 27px 27px;
  background-color: #f4fdfd;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.about-nanporo .link-list .link-item {
  font-size: clamp(1rem, 0.6364rem + 1.8182vw, 1.125rem);
  line-height: 2;
}

.access {
  padding: 50px 0;
  background-color: #fff8fc;
}
.access .circles04 {
  margin-top: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.access .circles04 .circle04 {
  width: 15px;
  height: 15px;
  background-color: #caeaea;
  border-radius: 100%;
}
.access .address {
  margin-top: 30px;
}
.access .address .address-text {
  font-size: 1.125rem;
  line-height: 2;
}
.access .address .googlemap {
  max-width: 100%;
  margin-top: 10px;
}
.access .parking {
  margin-top: 30px;
}
.access .parking .parking-text {
  text-align: center;
}
.access .parking .parking-text span {
  display: block;
}
.access .parking .parking-text .parking-title {
  font-size: 1.125rem;
  line-height: 2;
}
.access .parking .parking-text .parking-detail {
  font-size: 0.975rem;
  line-height: 2;
}
.access .parking .parking-image {
  width: 100%;
  margin-top: 10px;
}

.contact {
  padding-top: 30px;
  background-color: #fff;
}
.contact .contact-info {
  font-size: 0.975rem;
  line-height: 1.9;
  letter-spacing: -0.04em;
}
.contact .contact-notes {
  margin-top: 32px;
  font-size: 0.975rem;
  line-height: 1.95;
  letter-spacing: -0.04em;
}

.footer .container {
  background-color: #fff;
  padding-top: 34px;
  padding-bottom: 89px;
}
.footer .container .footer-contact {
  margin-top: 18px;
  text-align: center;
  font-size: 0.975rem;
  line-height: 1.9;
  letter-spacing: -0.03em;
}
.footer .container hr {
  width: 100%;
  margin-top: 12px;
  color: #707070;
}
.footer .container .company {
  margin-top: 10px;
  text-align: center;
  font-size: 0.975rem;
  line-height: 1.9;
  letter-spacing: -0.03em;
}
.footer .container .footer-note {
  margin-top: 6px;
  font-size: 0.75rem;
  line-height: 2;
}

*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}

body {
  margin: 0;
}

main {
  display: block;
}

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

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

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

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

address {
  font-style: inherit;
}

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

button,
optgroup,
select,
textarea {
  -webkit-appearance: none; /* 1 */
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit; /* 2 */
}

button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
}

button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
  cursor: default;
}

:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

option {
  padding: 0;
}

fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  outline-offset: -2px; /* 1 */
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

[type=number] {
  -moz-appearance: textfield;
}

label[for] {
  cursor: pointer;
}

details {
  display: block;
}

summary {
  display: list-item;
}

[contenteditable]:focus {
  outline: auto;
}

table {
  border-color: inherit; /* 1 */
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}/*# sourceMappingURL=style.css.map */