@charset "UTF-8";
/* A Modern CSS Reset */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700&display=swap");
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
  margin: 0;
}

ul[role=list],
ol[role=list] {
  list-style: none;
}

li {
  margin: 0;
}

html {
  scroll-behavior: auto;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

img,
picture {
  max-width: 100%;
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
:root {
  --color-bg: #FBFBEF;
  --color-text: #4E2A02;
  --color-brown: #4E2A02;
  --color-orange: #F4AB71;
  --color-blue: #A2A9D5;
  --color-green: #87C78A;
  --color-yellow: #FDD772;
  --color-pink: #F4B1BA;
  --color-text-orange: #F3964B;
  --color-text-blue: #808CDA;
  --color-text-green: #65C169;
  --color-number-1: url("../img_houmon/paper_orange.jpg");
  --color-number-2: url("../img_houmon/paper_blue.jpg");
  --color-number-3: url("../img_houmon/paper_green.jpg");
  --color-number-4: url("../img_houmon/paper_yellow.jpg");
  --color-number-5: url("../img_houmon/paper_pink.jpg");
  --color-bg-white: rgb(255 255 255 / 0.8);
  --weight-bold: 700;
  --container-width: 960px;
  --leading-trim: calc((1em - 1lh) / 2);
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 980px) {
  body {
    font-size: 1.6326530612vw;
  }
}
@media screen and (max-width: 599px) {
  body {
    font-size: 3.5897435897vw;
  }
}

p {
  line-height: 1.7;
}

@media (min-width: 599px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}
/** common **/
@media screen and (max-width: 980px) {
  .pc-only {
    display: none;
  }
}

.l-container {
  max-width: var(--container-width);
  padding-inline: 20px;
  margin: auto;
}
@media screen and (max-width: 980px) {
  .l-container {
    padding-inline: 2.0408163265vw;
  }
}
@media screen and (max-width: 599px) {
  .l-container {
    padding-inline: 5.1282051282vw;
  }
}

.l-section {
  padding-block: 50px;
}
@media screen and (max-width: 980px) {
  .l-section {
    padding-block: 5.1020408163vw;
  }
}
@media screen and (max-width: 599px) {
  .l-section {
    padding-block: 7.6923076923vw;
  }
}

.l-section_body {
  padding-inline: 60px;
}
@media screen and (max-width: 980px) {
  .l-section_body {
    padding-inline: 6.1224489796vw;
  }
}
@media screen and (max-width: 599px) {
  .l-section_body {
    padding-inline: 0;
  }
}

.u-text--bold {
  font-weight: bold;
}

.u-text--brown {
  color: var(--color-brown);
}

.page-sub-heading {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
  gap: 0.8em;
  margin-block-end: 30px;
}
@media screen and (max-width: 980px) {
  .page-sub-heading {
    margin-block-end: 3.0612244898vw;
  }
}
@media screen and (max-width: 599px) {
  .page-sub-heading {
    margin-block-end: 5.1282051282vw;
  }
}

.page-sub-heading::before {
  content: "";
  background-image: url("../img_houmon/heading_icon.png");
  background-size: 100%;
  background-repeat: no-repeat;
  width: 37px;
  aspect-ratio: 37/54;
}
@media screen and (max-width: 980px) {
  .page-sub-heading::before {
    width: 3.7755102041vw;
  }
}
@media screen and (max-width: 599px) {
  .page-sub-heading::before {
    width: 9.2307692308vw;
  }
}

.page-sub-heading_text {
  color: var(--color-brown);
  font-weight: var(--weight-bold);
  font-size: 24px;
  border-bottom: 2px dashed;
  display: inline-block;
}
@media screen and (max-width: 980px) {
  .page-sub-heading_text {
    font-size: 2.4489795918vw;
  }
}
@media screen and (max-width: 599px) {
  .page-sub-heading_text {
    font-size: 4.6153846154vw;
  }
}

/* header */
.header-container {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  padding-block: 20px;
}
@media screen and (max-width: 980px) {
  .header-container {
    padding-block: 2.0408163265vw;
  }
}
@media screen and (max-width: 599px) {
  .header-container {
    padding-block: 5.1282051282vw;
    grid-auto-flow: row;
    gap: 1em;
  }
}

.header-logo {
  max-width: 443px;
  width: 100%;
  padding: 0;
}
.header-logo img {
  width: 100%;
}
@media screen and (max-width: 980px) {
  .header-logo {
    max-width: 45.2040816327vw;
  }
}
@media screen and (max-width: 599px) {
  .header-logo {
    max-width: 100%;
  }
}

.header-access_list {
  padding: 0;
  display: grid;
}
@media screen and (max-width: 599px) {
  .header-access_list {
    grid-template-columns: repeat(2, 50%);
    row-gap: 0.4em;
  }
}

.header-access-tel {
  color: var(--color-brown);
  font-weight: var(--weight-bold);
  text-align: right;
}
.header-access-tel_number {
  font-size: 1.5em;
}
@media screen and (max-width: 599px) {
  .header-access-tel_number {
    font-size: 1em;
  }
}
.header-access-tel_link {
  text-decoration: none;
  color: inherit;
  margin-inline-start: 1em;
}
.header-access-tel_link:hover {
  color: inherit;
}

/* fv */
.top-fv {
  margin-block-start: 50px;
}
@media screen and (max-width: 980px) {
  .top-fv {
    margin-block-start: 5.1020408163vw;
  }
}
@media screen and (max-width: 599px) {
  .top-fv {
    margin-block-start: 5.1282051282vw;
  }
}

/* about */
.about_section {
  padding-block-start: 0;
  text-align: center;
  margin-block-start: -75px;
}
@media screen and (max-width: 980px) {
  .about_section {
    margin-block-start: -7.6530612245vw;
  }
}
@media screen and (max-width: 599px) {
  .about_section {
    margin-block-start: 2.5641025641vw;
  }
}

.page-main-heading {
  background-image: url("../img_houmon/paper_orange.jpg");
  border-radius: 100vh;
  display: inline-block;
  padding: 1em 2em;
  margin-block-end: 34px;
}
@media screen and (max-width: 980px) {
  .page-main-heading {
    margin-block-end: 3.4693877551vw;
  }
}

.page-main-heading_text {
  color: #fff;
  font-size: 24px;
}
@media screen and (max-width: 980px) {
  .page-main-heading_text {
    font-size: 2.4489795918vw;
  }
}
@media screen and (max-width: 599px) {
  .page-main-heading_text {
    font-size: 4.6153846154vw;
  }
}

.about_text {
  color: var(--color-brown);
  font-weight: var(--weight-bold);
  font-size: 20px;
  line-height: 2;
}
@media screen and (max-width: 980px) {
  .about_text {
    font-size: 2.0408163265vw;
  }
}
@media screen and (max-width: 599px) {
  .about_text {
    font-size: 4.1025641026vw;
  }
}

/* place */
.place_list {
  padding: 0;
  margin-block-start: 2em;
  display: grid;
  gap: 1em;
}

.place_item {
  color: var(--color-brown);
  font-weight: var(--weight-bold);
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
  gap: 0.4em;
}

.place_item::before {
  content: "";
  background-image: url("../img_houmon/place_list_icon.png");
  background-size: 100%;
  background-repeat: no-repeat;
  width: 20px;
  aspect-ratio: 1/1;
}
@media screen and (max-width: 980px) {
  .place_item::before {
    width: 2.0408163265vw;
  }
}
@media screen and (max-width: 599px) {
  .place_item::before {
    width: 5.1282051282vw;
  }
}

/* support */
.support_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  --gap: 50px;
  gap: var(--gap);
  padding: 0;
}
@media screen and (max-width: 980px) {
  .support_list {
    --gap: 5.1020408163vw;
  }
}

.support_item:nth-of-type(1) {
  --color-border: var(--color-orange);
  --color-text: var(--color-text-orange);
}

.support_item:nth-of-type(2) {
  --color-border: var(--color-blue);
  --color-text: var(--color-text-blue);
}

.support_item:nth-of-type(3) {
  --color-border: var(--color-green);
  --color-text: var(--color-text-green);
}

.support_item {
  padding: 24px 30px;
  display: grid;
  justify-content: center;
  align-items: center;
  justify-items: center;
  border: 4px solid var(--color-border);
  border-radius: 15px;
  gap: 24px 30px;
  --num: 2;
  flex-basis: calc((100% - var(--gap) * (var(--num) - 1)) / var(--num));
  background-color: var(--color-bg-white);
}
@media screen and (max-width: 980px) {
  .support_item {
    padding: 2.4489795918vw 3.0612244898vw;
    gap: 2.4489795918vw 3.0612244898vw;
    border-width: 0.4081632653vw;
  }
}
@media screen and (max-width: 599px) {
  .support_item {
    padding: 2em;
    gap: 1em;
    border-width: 3px;
    --num: 1;
  }
}

.support-item_heading {
  font-size: 22px;
  font-weight: var(--weight-bold);
  color: var(--color-text);
}
@media screen and (max-width: 980px) {
  .support-item_heading {
    font-size: 2.2448979592vw;
  }
}
@media screen and (max-width: 599px) {
  .support-item_heading {
    font-size: 4.6153846154vw;
  }
}

.support-item_img {
  max-width: 180px;
}

/* merit */
.merit_list {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  --gap: 30px;
  gap: var(--gap);
  counter-reset: number 0;
  margin-block-start: 40px;
}
@media screen and (max-width: 980px) {
  .merit_list {
    --gap: 3.0612244898vw;
    margin-block-start: 4.0816326531vw;
  }
}
@media screen and (max-width: 599px) {
  .merit_list {
    --gap: 5.1282051282vw;
  }
}

.merit_item:nth-of-type(1) {
  --color-border: var(--color-orange);
  --color-number: var(--color-number-1);
}
.merit_item:nth-of-type(1)::after {
  --image: url("../img_houmon/merit_tori.png");
  --imgw: 62px;
  --aspect: 31 / 33;
  --top: 122px;
  --right: 12px;
}
@media screen and (max-width: 980px) {
  .merit_item:nth-of-type(1)::after {
    --imgw: 6.3265306122vw;
    --top: 12.4489795918vw;
    --right: 1.2244897959vw;
  }
}
@media screen and (max-width: 599px) {
  .merit_item:nth-of-type(1)::after {
    --imgw: 9.7435897436vw;
    --top: -5.1282051282vw;
    --right: 2.5641025641vw;
  }
}

.merit_item:nth-of-type(2) {
  --color-border: var(--color-blue);
  --color-number: var(--color-number-2);
}

.merit_item:nth-of-type(3) {
  --color-border: var(--color-green);
  --color-number: var(--color-number-3);
}
.merit_item:nth-of-type(3)::after {
  --image: url("../img_houmon/merit_hana.png");
  --imgw: 59px;
  --aspect: 59 / 55;
  --top: -25px;
  --right: 10px;
}
@media screen and (max-width: 980px) {
  .merit_item:nth-of-type(3)::after {
    --imgw: 6.0204081633vw;
    --top: -2.5510204082vw;
    --right: 1.0204081633vw;
  }
}
@media screen and (max-width: 599px) {
  .merit_item:nth-of-type(3)::after {
    --imgw: 9.7435897436vw;
    --top: 28.9743589744vw;
    --right: 2.5641025641vw;
  }
}

.merit_item:nth-of-type(4) {
  --color-border: var(--color-yellow);
  --color-number: var(--color-number-4);
}

.merit_item:nth-of-type(5) {
  --color-border: var(--color-pink);
  --color-number: var(--color-number-5);
}
.merit_item:nth-of-type(5)::after {
  --image: url("../img_houmon/merit_kusa.png");
  --imgw: 67px;
  --aspect: 67 / 106;
  --top: 100px;
  --right: -10px;
}
@media screen and (max-width: 980px) {
  .merit_item:nth-of-type(5)::after {
    --imgw: 6.8367346939vw;
    --top: 10.2040816327vw;
    --right: -1.0204081633vw;
  }
}
@media screen and (max-width: 599px) {
  .merit_item:nth-of-type(5)::after {
    --imgw: 9.7435897436vw;
    --top: 17.4358974359vw;
    --right: -3.0769230769vw;
  }
}

.merit_item {
  counter-increment: number 1;
  position: relative;
  border: 4px solid var(--color-border);
  border-radius: 15px;
  padding: 42px 34px;
  background-color: var(--color-bg-white);
  --num: 3;
  flex-basis: calc((100% - var(--gap) * (var(--num) - 1)) / var(--num));
  position: relative;
}
@media screen and (max-width: 980px) {
  .merit_item {
    border-width: 0.4081632653vw;
    border-radius: 1.5306122449vw;
    padding: 4.2857142857vw 3.4693877551vw;
  }
}
@media screen and (max-width: 599px) {
  .merit_item {
    padding: 2em 0.9em 1em;
    border-width: 3px;
    border-radius: 10px;
    --num: 2;
  }
}
.merit_item::after {
  content: "";
  background-image: var(--image);
  background-size: contain;
  background-repeat: no-repeat;
  width: var(--imgw);
  aspect-ratio: var(--aspect);
  position: absolute;
  top: var(--top);
  right: var(--right);
}

.merit_item::before {
  content: counter(number);
  position: absolute;
  left: -20px;
  top: -20px;
  background-image: var(--color-number);
  border-radius: 100vh;
  width: 50px;
  aspect-ratio: 1/1;
  display: grid;
  place-content: center;
  color: #fff;
  font-size: 24px;
  font-weight: var(--weight-bold);
}
@media screen and (max-width: 980px) {
  .merit_item::before {
    left: -2.0408163265vw;
    top: -2.0408163265vw;
    width: 5.1020408163vw;
    font-size: 2.4489795918vw;
  }
}
@media screen and (max-width: 599px) {
  .merit_item::before {
    top: -3.5897435897vw;
    left: -3.0769230769vw;
    width: 10.2564102564vw;
    font-size: 4.6153846154vw;
  }
}

/* frequency */
/* room */
.room_body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 60px;
}
@media screen and (max-width: 980px) {
  .room_body {
    gap: 6.1224489796vw;
  }
}
@media screen and (max-width: 599px) {
  .room_body {
    grid-template-columns: none;
  }
}

.room_name {
  font-weight: var(--weight-bold);
  color: var(--color-brown);
  margin-block-end: 1em;
  font-size: 1.2em;
}

.room-tel_link {
  text-decoration: none;
  color: inherit;
  font-size: 1.5em;
}
.room-tel_link:hover {
  color: inherit;
}

.room_map {
  height: 300px;
}
@media screen and (max-width: 980px) {
  .room_map {
    height: 30.612244898vw;
  }
}
@media screen and (max-width: 599px) {
  .room_map {
    height: 76.9230769231vw;
  }
}

/* method */
.method-flow {
  padding: 0;
  counter-reset: number 0;
  display: grid;
  gap: 0.6em;
}
.method-flow_item {
  counter-increment: number 1;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 1em;
  grid-template-columns: auto 1fr;
}
@media screen and (max-width: 599px) {
  .method-flow_item {
    gap: 0.6em;
  }
}
.method-flow_item:nth-of-type(1) {
  --color: var(--color-number-1);
}
.method-flow_item:nth-of-type(2) {
  --color: var(--color-number-2);
}
.method-flow_item::before {
  content: counter(number);
  background-image: var(--color);
  border-radius: 100vh;
  width: 36px;
  aspect-ratio: 1/1;
  display: grid;
  place-content: center;
  color: #fff;
  font-weight: var(--weight-bold);
  font-size: 20px;
}
@media screen and (max-width: 980px) {
  .method-flow_item::before {
    width: 3.6734693878vw;
    font-size: 2.0408163265vw;
  }
}
@media screen and (max-width: 599px) {
  .method-flow_item::before {
    width: 7.6923076923vw;
    font-size: 3.5897435897vw;
  }
}

/* faq */
.faq_list {
  display: grid;
  align-items: center;
  gap: 24px;
}
@media screen and (max-width: 980px) {
  .faq_list {
    gap: 2.4489795918vw;
  }
}

.faq_list summary {
  padding: 1em 2em;
  list-style-type: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--color-brown);
  color: #fff;
  display: block grid;
  grid-template: "icon . plus"/auto 1fr auto;
  column-gap: 0.5em;
  align-items: center;
  cursor: pointer;
  font-weight: var(--weight-bold);
}
@media screen and (max-width: 599px) {
  .faq_list summary {
    padding: 1em;
  }
}

.faq_list summary::-webkit-details-marker {
  display: none;
}

.faq_list summary:before,
.faq_list details > p::before {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100vh;
}

.faq_list summary:before {
  content: "Q.";
  grid-area: icon;
}

.faq_list details > p {
  display: block grid;
  grid-template: "icon ."/auto 1fr;
  column-gap: 0.5em;
  align-items: start;
  background-color: rgba(255, 42, 2, 0.06);
  padding: 1em 2em;
}
@media screen and (max-width: 599px) {
  .faq_list details > p {
    padding: 1em;
  }
}

.faq_list details > p::before {
  content: "A.";
}

.faq_list summary::after {
  content: "＋";
  grid-area: plus;
}

.faq_list details[open] summary::after {
  content: "－";
}

/* footer */
.l-footer {
  margin-block-start: 50px;
  padding-block: 90px;
}
@media screen and (max-width: 980px) {
  .l-footer {
    margin-block-start: 5.1020408163vw;
    padding-block: 9.1836734694vw;
  }
}
@media screen and (max-width: 599px) {
  .l-footer {
    margin-block-start: 12.8205128205vw;
    padding-block: 0;
  }
}

.footer-container {
  position: relative;
}

.footer-container::after {
  content: "";
  background-image: url("../img_houmon/footer_tree.png");
  background-repeat: no-repeat;
  background-size: 100%;
  width: 199px;
  aspect-ratio: 199/91;
  position: absolute;
  right: 0;
  bottom: -90px;
}
@media screen and (max-width: 980px) {
  .footer-container::after {
    width: 20.306122449vw;
    bottom: -9.1836734694vw;
  }
}
@media screen and (max-width: 599px) {
  .footer-container::after {
    width: min(199px, 38.4615384615vw);
    bottom: -23.0769230769vw;
    right: 0;
    left: 0;
    margin: auto;
  }
}

.footer-logo {
  max-width: 443px;
  width: 100%;
  padding: 0;
}
.footer-logo img {
  width: 100%;
}
@media screen and (max-width: 980px) {
  .footer-logo {
    max-width: 45.2040816327vw;
  }
}
@media screen and (max-width: 599px) {
  .footer-logo {
    max-width: 100%;
  }
}

.footer-room_list {
  display: grid;
  gap: 0.5em;
  margin-block-start: 30px;
}
@media screen and (max-width: 980px) {
  .footer-room_list {
    margin-block-start: 3.0612244898vw;
  }
}