@charset "UTF-8";

/* 水彩デザインの別案。施設の文章・機能は元の app.js と content.js を引き継ぎます。 */
@font-face {
  font-family: "Kotoba Rounded";
  src: url("../assets/fonts/MPLUSRounded1c-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kotoba Rounded";
  src: url("../assets/fonts/MPLUSRounded1c-Medium.ttf") format("truetype");
  font-weight: 500 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --green: #4d7140;
  --deep: #36582e;
  --sage: #eaf1df;
  --mint: #f1f6e9;
  --lime: #b2c77f;
  --ink: #3c5136;
  --text: #4c5846;
  --line: #d9e4ce;
  --cream: #fbfaf5;
  --radius: 32px;
  font-size: 18px;
}
body {
  background: var(--cream);
  font-family: "Kotoba Rounded", "Hiragino Maru Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  line-height: 2;
  letter-spacing: .045em;
}
h1, h2, h3, .hero h1, .about-lead, .quote p {
  font-family: inherit;
  font-weight: 500;
  letter-spacing: .055em;
}
h2 { font-size: clamp(1.5rem, 2.5vw, 2.05rem); line-height: 1.8; }
h3 { line-height: 1.85; }
.container { width: min(1160px, calc(100% - 96px)); }
.section { padding-block: 92px; }
.prototype { background: #eaf1e4; color: #53664a; padding-block: 7px; }
.page-top { display: block; height: 0; }
.site-header { background: #fffefbf5; border-bottom: 0; box-shadow: 0 3px 20px #526b3b06; }
.header-main { min-height: 96px; }
.brand img { border-radius: 14px; }
.header-tel { font-size: 1.35rem; font-weight: 500; }
.header-note { font-size: .69rem; }
.main-nav { border-top: 1px solid #e8edde; min-height: 56px; }
.main-nav a { font-size: .84rem; font-weight: 500; padding: 15px 6px; }
.main-nav a[aria-current=page]:after { width: 6px; height: 6px; left: calc(50% - 3px); bottom: 5px; border-radius: 50%; background: #88a962; }
.btn, .header-contact { border-radius: 999px; background: var(--green); border-color: var(--green); font-weight: 500; box-shadow: 0 5px 16px #38582c09; }
.btn { padding: 13px 28px; min-height: 57px; }
.btn:hover { transform: translateY(-1px); }
.btn.light { background: #fffefa; }
.text-size { border-radius: 999px; padding: 6px 12px; background: #f5f8ef; }
.menu-toggle { border-radius: 50%; background: #f4f8ed; border-color: #dce7d0; }
.eyebrow { color: #64804e; font-weight: 500; letter-spacing: .16em; }
.eyebrow:before { width: 10px; height: 17px; border-radius: 100% 0 100% 0; background: #a0b77a; transform: rotate(-16deg); }
.text-link { border-bottom-style: dashed; font-weight: 500; }
.arrow { background: #fffefa85; border-color: #ccd9bc; }
.btn .arrow { background: transparent; }
.hero {
  margin: 0;
  min-height: 615px;
  border-radius: 0 0 70px 70px;
  background: #fafaf2;
  isolation: isolate;
}
.hero-image {
  inset: 0 0 0 auto;
  width: 76%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
  mix-blend-mode: multiply;
}
.hero:after {
  background: linear-gradient(90deg, #fbfaf5 0%, #fbfaf5f5 28%, #fbfaf5b0 42%, #fbfaf500 64%);
  z-index: 0;
}
.hero-copy { max-width: 610px; padding-block: 57px 86px; z-index: 1; }
.hero-copy .eyebrow { font-size: .75rem; margin-bottom: 18px; }
.hero h1 { font-size: clamp(2.25rem, 3.6vw, 3rem); line-height: 1.8; font-weight: 500; color: #3d5b31; }
.hero-description { margin-block: 24px 29px; font-size: 1rem; line-height: 2.1; }
.hero-caption { background: #fffef9e6; border-radius: 999px; bottom: 22px; right: 36px; padding: 4px 15px; max-width: calc(100% - 72px); font-size: .63rem; }
.hero-marker { color: #7e8c6b; font-size: .63rem; left: max(48px, calc((100% - 1160px) / 2)); bottom: 26px; letter-spacing: .2em; }
.watercolor-design-label { position: absolute; right: 28px; top: 22px; z-index: 2; color: #627651; background: #fffef6cf; border: 1px solid #dde7ce; padding: 5px 15px; border-radius: 999px; font-size: .68rem; }
.welcome-strip { position: relative; margin-top: -17px; z-index: 2; padding-block: 0 14px; border: 0; gap: 18px; }
.welcome-strip a { border: 1px solid #e2e9d6; border-radius: 40px; padding: 20px 24px; background: #fffefb; font-size: .85rem; box-shadow: 0 8px 24px #72835d06; }
.welcome-strip a:last-child { border: 1px solid #e2e9d6; }
.welcome-strip small { color: #6d825a; }
.intro { gap: 78px; }
.intro-art { padding: 25px 22px 25px 0; }
.intro-art img { border-radius: 47% 44% 43% 40%; filter: saturate(.75); }
.intro-art:before { inset: 0 0 30px 32px; border-radius: 43% 49% 46% 42%; background: #e4edda; }
.image-label { border-radius: 999px; left: 25px; bottom: 45px; font-size: .65rem; }
.intro-copy p { line-height: 2.15; }
.soft { background: #eef4e7; border-radius: 65px 65px 65px 65px / 36px 36px 36px 36px; }
.cream { background: #f5f2e8; border-radius: 65px 65px 65px 65px / 36px 36px 36px 36px; }
.features { gap: 26px; }
.feature { border: 0; padding: 30px 28px 34px; background: #fffef9; border-radius: 40px 48px 40px 46px; }
.feature-number, .step-number { font-family: "Kotoba Rounded", sans-serif; font-weight: 400; }
.feature-number { font-size: 1.6rem; width: 58px; height: 58px; display: grid; place-items: center; background: #f0f4e5; border-radius: 55% 43% 52% 46%; margin-bottom: 20px; color: #6b874f; }
.feature h3 { font-size: 1.07rem; }
.feature p { font-size: .91rem; line-height: 2.05; }
.service-grid { gap: 28px; }
.service-card { border-color: #e4e9da; border-radius: 36px 36px 32px 32px; background: #fffefb; }
.service-card img { filter: saturate(.7); }
.service-card-body { padding: 27px; }
.service-no { color: #6a8155; letter-spacing: .12em; }
.flow-preview { border-radius: 38px; background: #edf2e2; padding: 34px 40px; }
.photo-button { border-radius: 32px 38px 32px 36px; background: #eaf1df; }
.photo-button img { filter: saturate(.75); }
.photo-badge { border-radius: 999px; padding-inline: 12px; }
.gallery-card figcaption { padding-left: 9px; }
.news-row { border-color: #dbe4ce; border-top-style: dashed; padding-block: 25px; }
.news-row:last-child { border-bottom-style: dashed; }
.news-row summary { font-weight: 500; }
.news-meta time { font-family: inherit; }
.pill { background: #f9fbf3; border-color: #dbe6ce; }
.contact-band { margin-top: 12px; background: linear-gradient(110deg, #e8f0de, #f0f5e7 55%, #e7efdb); border-radius: 80px 80px 0 0 / 40px 40px 0 0; padding-block: 70px; }
.contact-phone { font-weight: 500; }
.contact-actions { border-color: #ccd9bd; }
.site-footer { background: #fffefb; }
.footer-brand img { border-radius: 12px; height: auto; }
.footer-links a { padding-block: 3px; }
.footer-bottom { border-top-style: dashed; }
.page-heading { padding-block: 38px 45px; padding-right: 230px; background: url("../assets/images/watercolor-tree.png") no-repeat right 58%; background-size: 225px auto; border-bottom-style: dashed; }
.page-heading h1 { font-size: clamp(1.85rem, 3.7vw, 2.55rem); }
.notice { background: #f0f5e7; border: 1px solid #dce6cd; border-radius: 25px; padding: 20px 25px; }
.support-list { border-radius: 36px; border-color: #dde6cf; }
.support-item { background: #fffefb; }
.quote { border-radius: 40px 35px 42px 35px; background: #edf3e3; }
.timeline li:not(:last-child):before { background: none; border-left: 2px dotted #c6d5b5; }
.step-number { background: #e9f0dd; }
.timeline img { border-radius: 30px; filter: saturate(.75); }
.filter { border-radius: 999px; background: #fffefb; padding: 11px 25px; }
.filter[aria-pressed=true] { background: #557646; }
.info-table>div { border-bottom-style: dashed; }
.guide-steps article { border-radius: 35px; background: #fffefb; }
.faq details { border-bottom-style: dashed; }
.faq summary { font-weight: 500; }
.contact-box { border-radius: 35px; padding: 35px; background: #f0f5e7; }
.map-panel { border-radius: 35px; background: #eef3e5; border-style: dashed; }
.map-panel.loaded { border-style: solid; }
.dialog { border-radius: 32px; }
.dialog-close { background: #fffef8; }
.empty { border-radius: 28px; }
.source-review { margin-top: 24px; font-size: .93rem; }
.source-review>strong { display: block; font-size: 1rem; font-weight: 500; }
.source-review p { margin-top: 10px; }
.source-references { font-size: .82rem; line-height: 1.9; margin-top: 18px; }
.source-references a { text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.related-links { padding: 0; margin: 28px 0 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; }
.related-links a { display: block; padding: 15px 20px; background: #f0f5e7; border-radius: 22px; font-size: .93rem; }
.legacy-news { margin-top: 25px; padding: 22px 25px; background: #f0f5e7; border-radius: 27px; font-size: .88rem; }
.legacy-news summary { cursor: pointer; font-size: .94rem; color: var(--ink); }
.legacy-news p { margin-top: 15px; }
.day-period { display: inline-block; padding: 3px 14px; border-radius: 999px; background: #edf3e2; font-size: .86rem; margin-bottom: 13px; color: var(--green); }
.day-activities { margin: 12px 0 0; padding-left: 1.3em; }
.timeline .day-activities li { display: list-item; padding: 0; position: static; font-size: .95rem; }
.timeline .day-activities li:before { display: none; }
.source-conflict { padding: 16px 20px; background: #f8f1df; color: #6b502c; border-radius: 23px; font-size: .9rem; }
.hours-list { padding-left: 1.3em; margin: 0; }
.historical-fees { margin-top: 28px; background: #fffefb; border: 1px solid #dce6ce; border-radius: 30px; }
.historical-fees>summary { cursor: pointer; padding: 24px 28px; font-size: 1rem; color: var(--ink); }
.fee-details { padding: 0 28px 32px; }
.fee-details>p { font-size: .93rem; }
.fee-group { margin-top: 30px; }
.fee-group>p { font-size: .88rem; margin: 9px 0 20px; }
.fee-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .91rem; }
.fee-table th, .fee-table td { padding: 14px 16px; text-align: left; border-bottom: 1px dashed var(--line); overflow-wrap: anywhere; }
.fee-table th { font-weight: 500; width: 65%; }
.fee-table thead { background: #edf3e4; }
.fee-table thead th { vertical-align: top; }
.fee-table tbody th { font-weight: 400; }
.floor-reference { margin-top: 50px; padding: 30px; background: #f0f5e7; border-radius: 30px; }
.floor-reference h2 { font-size: 1.45rem; }
.floor-reference p { margin-top: 15px; }
:focus-visible { outline-color: #57783d; }

@media (min-width: 1600px) {
  .hero { min-height: 650px; }
  .hero-image { object-position: 60% 50%; }
}
@media (max-width: 1080px) {
  .container { width: calc(100% - 56px); }
  .header-right { gap: 14px; }
  .main-nav a { font-size: .78rem; }
  .hero { min-height: 580px; }
  .hero h1 { font-size: 2.5rem; }
  .hero-copy { max-width: 560px; }
  .welcome-strip { gap: 12px; }
  .welcome-strip a { padding: 18px 17px; font-size: .78rem; }
  .intro { gap: 42px; }
  .feature { padding: 27px 23px; }
}
@media (max-width: 980px) {
  .container { width: calc(100% - 44px); }
  .section { padding-block: 65px; }
  .header-main { min-height: 84px; }
  .header-contact { display: none; }
  .main-nav.is-open { border-radius: 0 0 30px 30px; }
  .main-nav a { font-size: .95rem; padding: 13px 10px; }
  .main-nav a[aria-current=page] { border-radius: 20px; }
  .hero { min-height: 590px; display: flex; border-radius: 0 0 45px 45px; }
  .hero-image { inset: 0; width: 100%; height: 100%; object-position: 65% 50%; }
  .hero:after { background: linear-gradient(90deg,#fbfaf5f5 0%,#fbfaf5d9 40%,#fbfaf550 70%,#fbfaf500 100%); }
  .hero-copy { max-width: 550px; padding: 55px 0 90px; }
  .hero-caption { right: 22px; bottom: 25px; font-size: .61rem; }
  .hero-marker { display: none; }
  .watercolor-design-label { right: 17px; top: 15px; font-size: .6rem; }
  .welcome-strip { gap: 10px; }
  .welcome-strip a { padding: 17px 14px; font-size: .78rem; }
  .intro-art { max-width: 560px; width: 100%; }
  .intro-art img { aspect-ratio: 1.8; }
  .image-label { bottom: 19px; }
  .features { gap: 18px; }
  .feature { padding: 25px 20px; border-radius: 30px; }
  .feature h3 { font-size: 1.05rem; }
  .contact-actions { border-left: 0; }
  .page-heading { padding-right: 180px; background-size: 165px; }
  .contact-box { padding: 27px; }
  .soft, .cream { border-radius: 36px; }
}
@media (max-width: 600px) {
  .container { width: calc(100% - 38px); }
  .hero { min-height: 770px; align-items: flex-start; border-radius: 0 0 38px 38px; }
  .hero-copy { padding: 43px 0 340px; max-width: none; }
  .hero h1 { font-size: clamp(1.85rem, 7.5vw, 2.4rem); line-height: 1.8; letter-spacing: .045em; }
  .hero-copy .eyebrow { font-size: .7rem; }
  .hero-description { font-size: .96rem; margin-block: 18px 22px; }
  .hero-image { top: auto; bottom: 0; height: 415px; width: 100%; object-fit: cover; object-position: 70% 54%; }
  .hero:after { background: linear-gradient(180deg,#fbfaf5 0%,#fbfaf5 46%,#fbfaf5ce 54%,#fbfaf500 70%); }
  .hero-caption { left: 19px; right: auto; bottom: 34px; padding: 5px 12px; border-radius: 17px; font-size: .6rem; max-width: calc(100% - 38px); line-height: 1.6; }
  .watercolor-design-label { right: 12px; top: 11px; padding: 2px 9px; font-size: .56rem; }
  .welcome-strip { grid-template-columns: 1fr; gap: 9px; margin-top: -13px; padding: 0; }
  .welcome-strip a, .welcome-strip a:last-child { border: 1px solid #e2e9d6; border-radius: 26px; padding: 14px 20px; font-size: .88rem; }
  .welcome-strip span { display: flex; align-items: center; gap: 16px; }
  .welcome-strip span small { min-width: 64px; font-size: .64rem; }
  .welcome-strip .arrow { width: 29px; height: 29px; }
  .features { grid-template-columns: 1fr; gap: 18px; }
  .feature { display: grid; grid-template-columns: 48px 1fr; padding: 28px 23px; gap: 0 17px; border-radius: 34px; }
  .feature-number { width: 46px; height: 46px; grid-row: 1 / 3; font-size: 1.25rem; }
  .feature h3 { font-size: 1.12rem; }
  .feature p { font-size: .94rem; margin-top: 9px; }
  .service-card { border-radius: 30px; }
  .service-card-body { padding: 25px; }
  .flow-preview { border-radius: 32px; padding: 28px; }
  .photo-button { border-radius: 24px; }
  .gallery-card figcaption { padding-left: 3px; }
  .section-top .text-link { margin-top: 15px; }
  .news-meta { gap: 10px; }
  .news-row summary { font-size: .95rem; }
  .contact-band { border-radius: 45px 45px 0 0 / 27px 27px 0 0; padding-block: 48px; }
  .contact-inner h2 { font-size: 1.6rem; }
  .page-heading { padding-right: 0; padding-block: 30px 40px; background: none; }
  .page-heading h1 { font-size: 1.8rem; }
  .notice { padding: 19px 20px; border-radius: 25px; }
  .support-list { border-radius: 30px; }
  .guide-steps article, .contact-box { border-radius: 30px; }
  .contact-email { font-size: .93rem; }
  .map-panel { border-radius: 28px; }
  .related-links { grid-template-columns: 1fr; }
  .historical-fees>summary { padding: 22px; }
  .fee-details { padding: 0 18px 25px; }
  .fee-table { font-size: .87rem; }
  .fee-table th, .fee-table td { padding: 12px 10px; }
  .fee-table th { width: 60%; }
  .floor-reference { padding: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { transition: none !important; animation: none !important; }
}
@media print {
  .watercolor-design-label { display: none; }
  .hero { min-height: 350px; }
}