@charset "utf-8";

:root {
  --home-ivory: #fbf8f1;
  --home-beige: #f2eadf;
  --home-border: #e4d9ca;
  --home-brown: #3f332b;
  --home-brown-soft: #75675d;
  --home-text: #55483f;
  --home-green: #9ba991;
  --home-green-dark: #72806b;
  --home-white: #fff;
}

.home-renewal {
  color: var(--home-text);
  background: var(--home-ivory);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 16px;
  line-height: 1.9;
  overflow-x: hidden;
}

.home-renewal *, .home-renewal *::before, .home-renewal *::after { box-sizing: border-box; }
.home-renewal #container { width: 100%; max-width: none; background: var(--home-white); }
.home-renewal .inner { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.home-renewal .narrow { max-width: 900px; }
.home-renewal img { max-width: 100%; border: 0; }
.home-renewal a { color: var(--home-green-dark); transition: color .2s ease, background-color .2s ease, transform .2s ease; }
.home-renewal p { margin: 0 0 1.3em; text-align: left; }
.home-renewal .center { text-align: center; }

.site-header { background: var(--home-white); border: 0; }
.header-bar { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.home-renewal header #logo { position: static; display: block; width: auto; margin: 0; }
.home-renewal #logo a { display: block; text-decoration: none; }
.home-renewal #logo img { display: block; width: 300px; max-width: 100%; height: auto; }
.header-contact { display: flex; align-items: center; gap: 18px; font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; }
.header-contact span { color: var(--home-brown-soft); font-size: 13px; letter-spacing: .08em; }
.header-contact a { color: var(--home-brown); font-family: Georgia, serif; font-size: 22px; letter-spacing: .04em; text-decoration: none; }
.home-renewal #mainimg { aspect-ratio: 12 / 5; overflow: hidden; background: var(--home-beige); }
.home-renewal #mainimg img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.home-renewal #mainimg .slide0 { z-index: 0; }
.home-renewal #mainimg .slide0-mobile { display: none; }

.home-renewal #menubar { height: 76px; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--home-border); box-shadow: none; }
.home-renewal #menubar ul { height: 100%; display: flex; align-items: stretch; justify-content: center; }
.home-renewal #menubar li { width: auto; min-width: 122px; border: 0; }
.home-renewal #menubar li a { height: 100%; padding: 17px 20px 11px; color: var(--home-brown); font-size: 15px; letter-spacing: .08em; line-height: 1.35; text-decoration: none; }
.home-renewal #menubar li a:hover { background: var(--home-ivory); color: var(--home-green-dark); }
.home-renewal #menubar li span { display: block; margin: 3px 0 0; color: #aa9c8d; font-size: 9px; letter-spacing: .16em; }
.home-renewal #menubar .nav-reserve a { color: var(--home-white); background: var(--home-green); }
.home-renewal #menubar .nav-reserve a:hover { background: var(--home-green-dark); color: var(--home-white); }
.home-renewal #menubar .nav-reserve span { color: rgba(255,255,255,.78); }
.home-renewal #menubar-s { display: none; }

.home-renewal #contents { padding: 0; opacity: 1 !important; animation: none !important; }
.home-renewal .section-shell { padding: 88px 0; margin: 0; }
.hero-intro { padding-top: 76px; background: linear-gradient(180deg, #fff 0%, var(--home-ivory) 100%); text-align: center; }
.eyebrow, .section-heading > span { display: block; margin: 0 0 12px; color: var(--home-green-dark); font: 600 12px/1.4 "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; letter-spacing: .24em; text-align: center; }
.home-renewal #contents h1 { margin: 0; padding: 0; color: var(--home-brown); background: none; border: 0; font-size: clamp(25px, 3.1vw, 42px); font-weight: 500; line-height: 1.5; letter-spacing: .04em; }
.home-renewal #contents h1 .shop-name { white-space: nowrap; }
.home-renewal #contents h1 .mobile-break { display: none; }
.home-renewal #contents h1 .h1-area { display: block; margin-top: 20px; color: var(--home-text); font-size: clamp(14px, 1.4vw, 17px); font-weight: 400; line-height: 1.9; letter-spacing: .02em; }
.hero-intro .lead { max-width: 780px; margin: 30px auto 0; color: var(--home-brown-soft); text-align: center; }

.business-info { display: grid; grid-template-columns: .8fr .65fr 1.55fr; margin-top: 38px; background: var(--home-beige); border: 1px solid var(--home-border); border-top: 3px solid var(--home-green); }
.business-info > div { min-height: 108px; padding: 21px 25px; display: grid; align-content: center; border-right: 1px solid var(--home-border); text-align: left; }
.business-info > div:last-child { border-right: 0; }
.business-info span { color: var(--home-green-dark); font: 600 10px/1.4 "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; letter-spacing: .18em; }
.business-info strong { margin-top: 4px; color: var(--home-brown); font-size: 14px; font-weight: 500; }
.business-info b { color: var(--home-brown); font-size: 20px; font-weight: 500; }
.business-info .business-news p { margin: 4px 0 0; color: var(--home-text); font-size: 14px; line-height: 1.7; }

.booking-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
.booking-card { min-height: 156px; padding: 25px 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--home-border); text-decoration: none; }
.booking-card:hover { transform: translateY(-2px); }
.booking-card strong { margin: 6px 0 3px; color: inherit; font-size: 22px; font-weight: 500; letter-spacing: .04em; }
.booking-card small { color: inherit; opacity: .76; font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 12px; }
.booking-label { font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 13px; letter-spacing: .18em; }
.booking-phone { color: var(--home-white) !important; background: var(--home-brown); }
.booking-phone:hover { background: #5b4a3f; }
.booking-web { color: var(--home-brown) !important; background: var(--home-beige); }
.booking-web:hover { background: #e9ddcd; }
.booking-price { color: var(--home-white) !important; background: var(--home-green); }
.booking-price:hover { background: var(--home-green-dark); }

.section-heading { margin-bottom: 44px; text-align: center; }
.section-heading h2, .home-renewal #contents .section-heading h2 { margin: 0; padding: 0 0 18px; color: var(--home-brown); background: none; border: 0; font-size: clamp(25px, 3vw, 36px); font-weight: 500; line-height: 1.45; letter-spacing: .05em; }
.section-heading h2::after { content: ""; display: block; width: 44px; height: 1px; margin: 18px auto 0; background: var(--home-green); }
.section-heading.align-left, .section-heading.align-left > span { text-align: left; }
.section-heading.align-left h2::after { margin-left: 0; }
.section-lead { max-width: 720px; margin: -18px auto 38px !important; color: var(--home-brown-soft); text-align: center !important; }
.home-renewal #contents h3 { margin: 0 0 16px; padding: 0; color: var(--home-brown); background: none; border: 0; font-size: 21px; font-weight: 500; line-height: 1.55; }

.about-section { background: var(--home-white); }
.about-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px; align-items: start; }
.about-copy p { color: var(--home-text); }
.notice { padding-left: 15px; border-left: 2px solid var(--home-green); color: var(--home-brown-soft) !important; font-size: 13px; }
.about-points { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--home-border); }
.about-points li { display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--home-border); }
.about-points b { color: var(--home-green); font: 400 20px Georgia, serif; }
.about-points span { color: var(--home-brown-soft); font-size: 14px; }
.about-points strong { display: block; margin-bottom: 4px; color: var(--home-brown); font-size: 17px; }
.hygiene-note { margin: 38px 0 0 !important; padding: 15px 20px; background: var(--home-ivory); color: var(--home-brown-soft); font-size: 14px; text-align: center !important; }

.course-section { background: var(--home-ivory); }
.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.course-card { padding: 34px 30px; background: var(--home-white); border: 1px solid var(--home-border); }
.course-card.featured { border-top: 4px solid var(--home-green); padding-top: 31px; }
.course-card > span { color: var(--home-green-dark); font: 600 10px "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; letter-spacing: .18em; }
.course-card p { min-height: 64px; color: var(--home-brown-soft); font-size: 14px; }
.course-price { display: flex; justify-content: space-between; align-items: baseline; padding: 13px 0; border-top: 1px solid var(--home-border); }
.course-price b { font-weight: 500; }
.course-price strong { font-size: 21px; font-weight: 500; }
.fee-note { margin: 28px auto 25px !important; color: var(--home-brown-soft); font-size: 13px; text-align: center !important; }

.button { min-height: 54px; padding: 13px 30px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 0; font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 14px; letter-spacing: .08em; line-height: 1.5; text-decoration: none; }
.button-outline { color: var(--home-brown) !important; background: transparent; border-color: #baa998; }
.button-outline:hover { background: var(--home-beige); }
.button-green { color: var(--home-white) !important; background: var(--home-green-dark); }
.button-green:hover { background: #63715d; }
.button-brown { color: var(--home-white) !important; background: var(--home-brown); }
.button-brown:hover { background: #5b4a3f; }
.text-link { color: var(--home-brown) !important; text-underline-offset: 5px; }

.reasons-section { background: var(--home-white); }
.reason-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--home-border); border: 1px solid var(--home-border); }
.reason-grid article { min-height: 280px; padding: 34px 25px; background: var(--home-white); text-align: center; }
.reason-grid .line-icon { width: 52px; height: 52px; margin: 0 auto 22px; display: grid; place-items: center; border: 1px solid var(--home-green); border-radius: 50%; color: var(--home-green-dark); font: 26px Georgia, serif; }
.reason-grid p { color: var(--home-brown-soft); font-size: 14px; text-align: center; }

.area-section { background: var(--home-beige); }
.two-column { display: grid; grid-template-columns: 1.1fr .9fr; gap: 75px; align-items: center; }
.two-column p { color: var(--home-text); }
.area-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.area-tags li { padding: 10px 17px; background: rgba(255,255,255,.75); border: 1px solid #ddd0bf; color: var(--home-brown); font-size: 14px; }

.hotel-section { background: var(--home-white); }
.hotel-layout { max-width: 900px; }
.hotel-layout p { color: var(--home-text); }

.flow-section { background: var(--home-ivory); }
.flow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin: 0 0 34px; padding: 0; list-style: none; counter-reset: none; }
.flow-grid li { position: relative; padding: 28px 23px; background: var(--home-white); border-top: 2px solid var(--home-green); }
.flow-grid li:not(:last-child)::after { content: ""; position: absolute; top: 45px; right: -18px; width: 9px; height: 9px; border-top: 1px solid var(--home-green-dark); border-right: 1px solid var(--home-green-dark); transform: rotate(45deg); }
.flow-grid b { display: block; margin-bottom: 18px; color: var(--home-green); font: 400 25px Georgia, serif; }
.flow-grid p { color: var(--home-brown-soft); font-size: 14px; }

.payment-section { background: var(--home-white); }
.payment-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 65px; align-items: center; }
.payment-copy { padding: 35px; background: var(--home-ivory); border: 1px solid var(--home-border); }
.payment-copy p { color: var(--home-brown-soft); }
.payment-images > img { display: block; max-height: 105px; margin: 0 auto 18px; object-fit: contain; }
.payment-images > div { display: flex; justify-content: center; align-items: center; gap: 25px; }
.payment-images > div img { width: 40%; max-height: 80px; object-fit: contain; }

.faq-section { background: var(--home-ivory); }
.faq-section details { margin-bottom: 12px; background: var(--home-white); border: 1px solid var(--home-border); }
.faq-section summary { position: relative; padding: 20px 60px 20px 25px; cursor: pointer; color: var(--home-brown); font-weight: 600; list-style: none; }
.faq-section summary::-webkit-details-marker { display: none; }
.faq-section summary::after { content: "+"; position: absolute; top: 50%; right: 24px; color: var(--home-green-dark); font-size: 24px; font-weight: 300; transform: translateY(-50%); }
.faq-section details[open] summary::after { content: "−"; }
.faq-section details p { margin: 0; padding: 0 25px 22px; color: var(--home-brown-soft); }
.faq-section .center { margin-top: 32px; }

.final-cta { padding: 80px 0; background: var(--home-beige); text-align: center; }
.final-cta h2 { margin: 0 0 20px; color: var(--home-brown); font-size: clamp(25px, 3vw, 36px); font-weight: 500; letter-spacing: .05em; }
.final-cta > .inner > p:not(.eyebrow) { text-align: center; }
.final-actions { display: flex; justify-content: center; gap: 18px; margin-top: 35px; }
.final-actions .button { width: min(360px, 100%); min-height: 92px; flex-direction: column; font-family: Georgia, "Yu Mincho", serif; font-size: 22px; }
.final-actions .button span, .final-actions .button small { font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 11px; letter-spacing: .14em; }

.home-renewal footer { margin: 0; padding-top: 55px; color: #f8f5f0; background: var(--home-brown); }
.home-renewal #footermenu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 55px; padding: 0 0 45px; }
.home-renewal #footermenu ul { width: auto; margin: 0; }
.home-renewal #footermenu li { margin: 7px 0; font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 13px; }
.home-renewal #footermenu .title { margin-bottom: 16px; color: #d8cbbb; font-family: "Yu Mincho", serif; font-size: 16px; letter-spacing: .08em; }
.home-renewal #footermenu a { color: #fff; }
.home-renewal #copyright { padding: 28px 20px; border-top: 1px solid rgba(255,255,255,.15); background: transparent; text-align: center; }
.home-renewal #copyright a { color: #fff; }
.home-renewal #copyright .icon { justify-content: center; margin-bottom: 12px; }
.home-renewal #copyright .icon img { width: 25px; }
.home-renewal #copyright .pr { display: block; margin-top: 8px; opacity: .55; }
.home-renewal .nav-fix-pos-pagetop a { border-radius: 50%; color: #fff; background: var(--home-green-dark); }

@media screen and (max-width: 900px) {
  .home-renewal .section-shell { padding: 72px 0; }
  .home-renewal #menubar li { min-width: 100px; }
  .home-renewal #menubar li a { padding-inline: 12px; }
  .about-layout, .two-column { gap: 45px; }
  .reason-grid, .flow-grid { grid-template-columns: repeat(2, 1fr); }
  .flow-grid li::after { display: none; }
}

@media screen and (max-width: 800px) {
  .home-renewal { font-size: 15px; }
  .home-renewal .inner { width: min(100% - 36px, 720px); }
  .header-bar { min-height: 74px; }
  .header-contact { display: none; }
  .home-renewal #logo { width: auto; }
  .home-renewal #mainimg { aspect-ratio: 12 / 5; }
  .home-renewal #mainimg img { object-fit: contain; object-position: center; }
  .home-renewal #menubar { display: none; }
  .home-renewal #menubar-s { height: 100%; padding: 78px 18px 25px; overflow-y: auto; background: rgba(73,59,50,.97); border: 0; }
  .home-renewal #menubar-s ul { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid rgba(255,255,255,.22); }
  .home-renewal #menubar-s ul li a { padding: 18px 12px; border: 0; color: #fff; background: rgba(255,255,255,.04); text-align: center; }
  .home-renewal #menubar_hdr { position: fixed; top: 12px; right: 14px; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; box-shadow: 0 2px 15px rgba(73,59,50,.16); }
  .home-renewal #menubar_hdr.close, .home-renewal #menubar_hdr.open { width: 48px; height: 48px; background-color: var(--home-brown); background-size: 48px; }
  .home-renewal #contents { padding: 0; }
  .hero-intro { padding-top: 62px; }
  .booking-grid { gap: 12px; }
  .booking-card { min-height: 145px; padding-inline: 15px; }
  .booking-card strong { font-size: 19px; }
  .about-layout, .two-column, .payment-layout { grid-template-columns: 1fr; gap: 38px; }
  .course-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .course-card p { min-height: 0; }
  .area-tags { order: -1; }
  .business-info { grid-template-columns: 1fr 1fr; }
  .business-info .business-news { grid-column: 1 / -1; border-top: 1px solid var(--home-border); }
  .business-info > div:nth-child(2) { border-right: 0; }
}

@media screen and (max-width: 768px) {
  .home-renewal #mainimg .slide0 { display: none; }
  .home-renewal #mainimg .slide0-mobile { position: relative; z-index: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
}

@media screen and (max-width: 600px) {
  .home-renewal .inner { width: calc(100% - 34px); }
  .home-renewal .section-shell { padding: 64px 0; }
  .home-renewal #mainimg { aspect-ratio: 12 / 5; }
  .home-renewal #mainimg img { object-fit: contain; object-position: center; }
  .hero-intro { padding-top: 42px; }
  .hero-intro .eyebrow { margin-bottom: 10px; }
  .home-renewal #contents h1 { font-size: 24px; line-height: 1.55; letter-spacing: .02em; }
  .home-renewal #contents h1 .mobile-break { display: inline; }
  .home-renewal #contents h1 .h1-area { margin-top: 13px; font-size: 15px; line-height: 1.8; }
  .hero-intro .lead { margin-top: 19px; color: var(--home-text); font-size: 15px; line-height: 1.8; }
  .business-info { margin-top: 27px; }
  .business-info > div { min-height: 96px; padding: 17px 16px; }
  .business-info b { font-size: 18px; }
  .business-info .business-news p { font-size: 15px; }
  .booking-grid { grid-template-columns: 1fr; margin-top: 28px; }
  .booking-card { min-height: 122px; }
  .section-heading { margin-bottom: 35px; }
  .section-heading.align-left, .section-heading.align-left > span { text-align: center; }
  .section-heading.align-left h2::after { margin-left: auto; }
  .about-layout { gap: 25px; }
  .reason-grid, .flow-grid { grid-template-columns: 1fr 1fr; gap: 10px; background: transparent; border: 0; }
  .reason-grid article { min-height: 0; padding: 25px 14px; border: 1px solid var(--home-border); }
  .reason-grid h3 { font-size: 17px !important; }
  .reason-grid p { font-size: 13px; }
  .flow-grid { gap: 12px; }
  .flow-grid li { padding: 23px 16px; }
  .flow-grid h3 { font-size: 17px !important; }
  .area-tags { justify-content: center; gap: 8px; }
  .area-tags li { padding: 8px 12px; font-size: 13px; }
  .hotel-layout { text-align: center; }
  .hotel-layout p { text-align: left; }
  .payment-copy { padding: 25px 20px; }
  .faq-section summary { padding: 18px 50px 18px 18px; }
  .faq-section details p { padding: 0 18px 18px; }
  .final-cta { padding: 65px 0; }
  .final-actions { flex-direction: column; align-items: center; }
  .home-renewal #footermenu { grid-template-columns: 1fr 1fr; gap: 32px 25px; }
}

@media screen and (max-width: 390px) {
  .home-renewal #logo strong { font-size: 19px; }
  .reason-grid, .flow-grid { grid-template-columns: 1fr; }
  .home-renewal #menubar-s ul { grid-template-columns: 1fr; }
}