/* ==========================================================================
   Platalea Cycles — site stylesheet
   Base rules + a small reusable design system for patterns repeated across
   pages (buttons, section labels, page-title bands, etc). Page-specific,
   one-off layout rules live in their own commented sections below, grouped
   to mirror the <!-- SECTION --> markers in each page's markup.
   ========================================================================== */

/* ---- base ---- */
body { margin: 0; background: #F7F3EC; }
* { box-sizing: border-box; font-family: 'Montserrat', 'Zen Kaku Gothic New', sans-serif; }
a { color: #3E7C82; text-decoration: none; }
a:hover { color: #E0734B; }
image-slot::part(ring) { display: none; }
/* image-slot sets touch-action:none on its <img> (for its editor's drag-to-reframe),
   which blocks page scrolling on touch devices wherever an image fills the screen (e.g. the MV). */
image-slot::part(image) { touch-action: auto; }
.heading { font-family: 'Zen Maru Gothic', 'Barlow Condensed', sans-serif; }
.eyebrow { font-family: 'Barlow Condensed', sans-serif; }
input, textarea { font-family: 'Barlow Condensed', 'Zen Kaku Gothic New', sans-serif; }

/* ---- opening loader (home page only) ----
   Hidden by JS (adds .is-hidden) once window 'load' fires — see the
   inline script next to the loader markup in includes/header.php. A
   plain opacity transition here, driven by an actual ready event, rather
   than a blind CSS animation-delay guess that could fail to fire and
   strand the loader (or a blank frame) on screen. */
.site-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.site-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.site-loader__logo {
  width: 160px; height: auto;
  animation: site-loader-logo 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes site-loader-logo {
  0% { transform: scale(0.5); opacity: 0; }
  55% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---- scroll reveal (site-wide, per <section>) ---- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- layout utilities ---- */
.section { padding: 100px 56px; }
.container { max-width: 1300px; margin: 0 auto; }
.container-narrow { max-width: 900px; margin: 0 auto; }

/* ---- section label / heading / body-text components ---- */
.eyebrow-lg {
  color: #3E7C82; font-size: 50px; font-weight: 700;
  font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.01em;
}
.eyebrow-lg--center { text-align: center; }
.eyebrow-lg--white { color: #FFFFFF; }

.section-title {
  color: #14343F; font-size: 22px; font-weight: 700; margin: 14px 0 18px;
}
.section-title--center { text-align: center; }
.section-title--white { color: #FFFFFF; }
.section-title--tight { margin: 14px 0 0; }
.section-title--wide { margin: 14px 0 40px; }
.section-title--wide32 { margin: 14px 0 32px; }

.body-text {
  color: #425256; font-size: 16px; line-height: 1.9; margin: 0 0 28px;
}
.body-text p { margin: 0; }
.body-text--tight { margin: 0; }
.body-text--white { color: #FFF3EC; }

.small-label {
  color: #3E7C82; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 8px;
}

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 14px 32px 14px 14px; border-radius: 999px;
  font-size: 16px; font-weight: 500;
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
.btn--teal { background: #3E7C82; color: #FFFFFF; }
.btn--dark { background: #14343F; color: #FFFFFF; }
.btn--outline { background: transparent; border: 1px solid #FFFFFF; color: #FFFFFF; }
.btn:hover { background: #E0734B; color: #FFFFFF; border-color: #E0734B; }

.btn-icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  transition: background-color 0.4s ease;
}
.btn-icon i { font-size: 14px; }
.btn-icon--dark { background: #14343F; }
.btn-icon--dark i { color: #FFFFFF; }
.btn:hover .btn-icon--dark { background: #B85A35; }
.btn-icon--light { background: #FFFFFF; }
.btn-icon--light i { color: #14343F; }

/* ---- page-title band (owner / services / shop-info / contact / blog / article) ---- */
.page-title-band {
  position: relative; background: #e7dfd0;
  display: flex; flex-wrap: wrap; align-items: stretch; overflow: hidden;
}
.page-title-band__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: bottom left;
  mix-blend-mode: multiply; opacity: 0.05; pointer-events: none; z-index: 0;
}
.page-title-band__content {
  flex: 1 1 460px; min-width: 320px;
  padding: 210px 40px 40px max(56px, calc((100vw - 1300px) / 2));
  display: flex; flex-direction: column; justify-content: center;
  position: relative; z-index: 1;
}
.page-title-band__photo {
  position: relative; flex: 1 1 300px; min-width: 280px; height: 460px;
}
.breadcrumb {
  display: flex; align-items: center; gap: 10px;
  color: #7A7264; font-size: 13px; margin-bottom: 18px;
}
.breadcrumb i { font-size: 12px; }
.breadcrumb a { color: #7A7264; }
.page-title-band__heading {
  color: #14343F; font-size: 44px; font-weight: 900;
  letter-spacing: -0.02em; margin: 0 0 20px;
}
.page-title-band__lede {
  color: #425256; font-size: 16px; line-height: 1.9; margin: 0; max-width: 520px;
}
.page-title-band__lede p { margin: 0; }

/* ---- CONTACT CTA box (repeated near-identically on every page) ---- */
.contact-cta {
  background: #E0734B; border-radius: 24px; padding: 64px 56px;
  text-align: center; position: relative;
}
.contact-cta__illust {
  position: absolute; right: 24px; top: -40px; width: 220px; height: auto;
  z-index: 1; pointer-events: none;
}
.contact-cta__lede {
  color: #FFF3EC; font-size: 16px; line-height: 1.9;
  max-width: 680px; margin: 0 auto 36px;
}
.contact-cta__lede p { margin: 0; }
.contact-cta__actions {
  display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;
}

/* ---- page shell / global nav ---- */
.page-wrap {
  width: 100%; background: #F7F3EC; color: #1F2E30;
  position: relative; overflow-x: hidden;
}
.logo-badge {
  position: fixed; top: 0; left: 0; background: #FFFFFF; padding: 0;
  z-index: 200; border-radius: 0 0 24px 0; line-height: 0; overflow: hidden;
}
.logo-badge img { height: 190px; display: block; }

.site-header {
  position: fixed; top: 30px; right: 40px; background: #FFFFFF;
  border-radius: 999px; padding: 12px 12px 12px 28px;
  display: flex; align-items: center; gap: 32px; z-index: 100;
}
.site-nav { display: flex; align-items: center; gap: 28px; }
.nav-link {
  color: #425256; font-size: 14px; font-weight: 500;
  border-bottom: 2px solid transparent; padding-bottom: 4px;
}
.nav-link.is-active { color: #14343F; font-weight: 700; border-bottom-color: #3E7C82; }
.nav-cta {
  background: #E0734B; color: #FFFFFF; padding: 12px 24px;
  border-radius: 999px; font-size: 14px; font-weight: 700;
}
.nav-cta.is-active { background: #14343F; }
.nav-toggle-checkbox { display: none; }
.nav-toggle-btn {
  display: none; cursor: pointer; width: 40px; height: 40px; border-radius: 50%;
  background: #14343F; color: #FFFFFF; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ==========================================================================
   HOME page (index.php)
   ========================================================================== */
.svg-defs { position: absolute; overflow: hidden; }

.home-hero { position: relative; width: 100%; height: 100vh; box-sizing: border-box; padding: 50px 30px; background: #F7F3EC; }
.home-hero__stage { position: relative; width: 100%; height: 100%; clip-path: url(#mvMask); }
.home-hero__caption {
  position: absolute; left: 0; right: 0; bottom: 5%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 20px; padding: 0 40px; pointer-events: none;
}
.home-hero__title { color: #FFFFFF; font-size: 52px; font-weight: 900; line-height: 1.35; margin: 0; text-shadow: 0 2px 16px rgba(0,0,0,0.25); }
.home-hero__lede { color: #F7F3EC; font-size: 17px; line-height: 1.9; max-width: 640px; margin: 0; }
.home-hero__lede p { margin: 0; }

.home-about { padding: 100px 56px; background: #F7F3EC; position: relative; }
.home-about__decor-1 { position: absolute; left: 0; top: -80px; width: 280px; height: auto; opacity: 1; pointer-events: none; z-index: 5; }
.home-about__decor-2 { position: absolute; right: 40px; top: 20px; width: 170px; height: auto; opacity: 0.55; pointer-events: none; z-index: 0; }
.home-about__photo-1-wrap { position: absolute; left: 24px; bottom: 0px; width: 210px; height: 302px; z-index: 3; }
.home-about__photo-2-wrap { position: absolute; right: 20px; top: 0px; width: 220px; height: 316px; }
.home-about__inner { position: relative; }
.home-about__row { display: flex; gap: 72px; align-items: flex-start; justify-content: center; }
.home-about__label-col { display: flex; flex-direction: column; gap: 20px; flex-shrink: 0; }
.home-about__eyebrow { color: #3E7C82; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; }
.home-about__heading-img { width: 130px; height: 375px; }
.home-about__heading-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.home-about__text-col { flex: 0 1 560px; max-width: 560px; margin-top: 40px; position: relative; }
.home-about__text { color: #425256; font-size: 16px; line-height: 2; margin: 0 0 32px; }
.home-about__text--last { margin: 0; }
.home-about__flourish { position: absolute; right: -20px; bottom: -75px; width: 440px; height: auto; pointer-events: none; transform: rotate(-5deg); }

.home-events { padding: 100px 56px 150px; background: #E8DFCE; position: relative; }
.home-events__wave { position: absolute; left: 0; width: 100%; height: 80px; display: block; }
.home-events__wave--top { top: -79px; }
.home-events__wave--bottom { bottom: -79px; }
.home-events__lede { color: #425256; font-size: 16px; line-height: 1.9; max-width: 820px; margin: 0 auto 40px; text-align: center; }
.home-events__lede p { margin: 0; }
.home-events__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 28px; margin-bottom: 36px; }
.home-events__cta-wrap { text-align: center; }

.event-card { background: #FFFFFF; border-radius: 25px; overflow: hidden; display: flex; align-items: center; gap: 24px; padding: 32px; text-decoration: none; }
.event-card__body { flex: 1; min-width: 0; }
.event-card__meta { display: flex; align-items: center; gap: 12px; }
.event-card__title {
  color: #14343F; font-size: 16px; font-weight: 500; margin-top: 10px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-date { color: #8A8378; font-size: 13px; letter-spacing: 0.04em; }

.home-courses { padding: 0 0 100px; background: #F7F3EC; }
.home-courses__banner { position: relative; width: 100%; height: 640px; margin-top: -80px; background: #E8DFCE; }
.home-courses__banner-photo { position: absolute; inset: -1px; clip-path: url(#archMask); }
.home-courses__banner-caption { position: absolute; left: 56px; bottom: 44px; pointer-events: none; }
.home-courses__banner-eyebrow { color: #FFFFFF; text-shadow: 0 2px 16px rgba(0,0,0,0.25); }
.home-courses__banner-title { color: #F7F3EC; font-size: 22px; font-weight: 700; margin-top: 8px; text-shadow: 0 2px 16px rgba(0,0,0,0.25); }
.home-courses__row { padding: 48px 56px 0; display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.home-courses__text { flex: 1; min-width: 320px; position: relative; }
.home-courses__cta { flex-shrink: 0; }
.home-courses__flourish { display: block; width: 610px; height: auto; margin-top: 24px; transform: rotate(-3deg); pointer-events: none; }
.home-courses__photos { position: relative; width: 600px; height: 320px; flex-shrink: 0; }
.home-courses__photos-bg { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 340px; height: auto; z-index: 0; pointer-events: none; }
.home-courses__photo-2-wrap { position: absolute; left: 0; top: 30px; width: 395.59px; height: 305.2px; z-index: 1; }
.home-courses__photo-3-wrap { position: absolute; right: 0; top: 0; width: 216.19px; height: 287.73px; z-index: 1; }

.home-owner { padding: 100px 56px; position: relative; }
.home-owner__bg { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 760px; height: auto; z-index: 0; pointer-events: none; }
.home-owner__decor { position: absolute; right: 40px; top: 20px; width: 170px; height: auto; opacity: 0.55; pointer-events: none; z-index: 0; }
.home-owner__intro { text-align: center; position: relative; z-index: 1; }
.home-owner__photo-wrap { position: relative; width: 440px; height: 260px; margin: 56px auto 40px; }
.home-owner__name-mark { position: absolute; right: 24px; top: -18px; width: 22px; height: auto; z-index: 2; pointer-events: none; }
.home-owner__body { text-align: center; position: relative; z-index: 1; }

.home-news { padding: 100px 56px; background: #F7F3EC; }
.home-news__heading { color: #14343F; font-size: 22px; font-weight: 700; margin: 14px 0 36px; text-align: center; }
.home-news__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; }

.news-card { background: #FFFFFF; border: 1px solid #D8CEBB; border-radius: 20px; overflow: hidden; min-width: 0; display: block; text-decoration: none; }
.news-card__photo-wrap { position: relative; width: 100%; height: 180px; }
.news-card__overlay {
  position: absolute; inset: 0; background: rgba(20,52,63,0.72);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; opacity: 0; transition: opacity 0.25s ease;
}
.news-card__overlay:hover { opacity: 1; }
.news-card__overlay-label { color: #FFFFFF; font-size: 16px; font-weight: 700; }
.news-card__overlay-icon {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #FFFFFF;
  display: flex; align-items: center; justify-content: center;
}
.news-card__body { padding: 18px 20px 22px; }
.news-card__title { color: #14343F; font-size: 16px; font-weight: 400; margin-top: 8px; }

.home-services { padding: 88px 0 88px 56px; display: flex; align-items: center; gap: 64px; }
.home-services__text { max-width: 760px; flex-shrink: 0; }

.home-sns { padding: 100px 56px; background: #F7F3EC; }
.home-sns__row { display: flex; align-items: center; gap: 64px; flex-wrap: wrap; }
.home-sns__gallery { flex: 1; min-width: 340px; display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.home-sns__text { flex: 1; min-width: 300px; }

.home-community { padding: 0 56px 100px; position: relative; }
.home-community__decor { position: absolute; right: 80px; top: 0; width: 130px; height: auto; opacity: 0.9; pointer-events: none; z-index: 1; }
.home-community__card { background: #FFFFFF; border-radius: 24px; padding: 56px; display: flex; flex-wrap: wrap; gap: 64px; align-items: center; }
.home-community__photo-wrap { position: relative; width: 360px; height: 360px; flex-shrink: 0; }
.home-community__text { flex: 1; min-width: 300px; }

.home-shop { padding: 100px 56px; background: #F7F3EC; position: relative; overflow: hidden; }
.home-shop__bg { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 460px; height: auto; z-index: 0; pointer-events: none; }
.home-shop__row {
  max-width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 32px; align-items: center; position: relative; z-index: 1;
}
.home-shop__text { flex: 0 1 380px; min-width: 240px; }
.home-shop__photo-wrap { position: relative; width: 360px; height: 360px; flex-shrink: 0; }

.home-contact__bg-wrap { position: absolute; inset: 0; border-radius: 24px; overflow: hidden; pointer-events: none; }
.home-contact__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; opacity: 0.1; }

/* ==========================================================================
   BLOG page (blog.php)
   ========================================================================== */
.blog-intro { padding: 80px 56px 40px; text-align: center; }
.blog-intro__inner { max-width: 780px; margin: 0 auto; }
.blog-intro__heading { color: #14343F; font-size: 28px; font-weight: 900; letter-spacing: -0.02em; margin: 0 0 20px; }
.blog-intro__yt-link {
  display: inline-flex; align-items: center; gap: 14px;
  border: 1px solid #14343F; color: #14343F; padding: 12px 28px;
  border-radius: 999px; font-size: 14px; font-weight: 700;
}
.blog-intro__yt-link i { font-size: 11px; }

.blog-categories { padding: 0 56px 40px; }
.blog-categories__row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cat-tab {
  background: #FFFFFF; border: 1px solid #D8CEBB; color: #425256;
  padding: 10px 22px; border-radius: 999px; font-size: 14px; font-weight: 500; cursor: pointer;
}
.cat-tab.is-active { background: #14343F; color: #FFFFFF; font-weight: 700; border-color: #14343F; }

.blog-articles { padding: 0 56px 100px; }
.blog-articles__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }

.article-card { background: #FFFFFF; border: 1px solid #D8CEBB; border-radius: 20px; overflow: hidden; min-width: 0; display: block; }
.article-card__photo-wrap { position: relative; width: 100%; height: 200px; }
.article-card__body { padding: 20px 22px 24px; }
.article-card__tag {
  display: inline-block; background: #E8DFCE; color: #14343F;
  font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 999px;
}
.article-card__date { margin-top: 12px; }
.article-card__title { color: #14343F; font-size: 16px; font-weight: 400; line-height: 1.6; margin-top: 8px; }

.blog-pagination { padding: 0 56px 120px; }
.blog-pagination__row { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 40px; }
.page-link {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #425256;
}
.page-link--num { font-size: 14px; font-weight: 700; }
.page-link.is-active { background: #14343F; color: #FFFFFF; }
.blog-pagination__row .prev-page, .blog-pagination__row .next-page {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #425256; background: #FFFFFF; border: 1px solid #D8CEBB; cursor: pointer;
}
.blog-pagination__row .prev-page::before, .blog-pagination__row .next-page::before {
  font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 14px;
}
.blog-pagination__row .prev-page::before { content: "\f104"; }
.blog-pagination__row .next-page::before { content: "\f105"; }

/* ==========================================================================
   OWNER page (owner.php)
   ========================================================================== */
.owner-message { padding: 100px 56px; }
.owner-message__row { max-width: 1300px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.owner-message__photo-col { position: relative; flex: 0 0 400px; width: 400px; height: 440px; min-width: 0; }
.owner-message__photo-bg { position: absolute; right: -60px; bottom: -60px; width: 260px; height: auto; z-index: 0; pointer-events: none; }
.owner-message__text-col { flex: 1 1 480px; min-width: 280px; position: relative; z-index: 2; }
.owner-message__decor { position: absolute; right: -20px; top: -40px; width: 130px; height: auto; transform: rotate(8deg); pointer-events: none; opacity: 0.9; z-index: -1; }
.owner-message__heading { color: #14343F; font-size: 22px; font-weight: 700; margin: 14px 0 24px; }
.owner-message__label { color: #8A8378; font-size: 13px; letter-spacing: 0.1em; margin-bottom: 8px; }
.owner-message__name { color: #14343F; font-size: 24px; font-weight: 700; margin: 0 0 24px; }
.owner-message__name-kana { font-size: 16px; }
.owner-message__text { color: #425256; font-size: 16px; line-height: 1.9; margin: 0 0 24px; }
.owner-message__text--last { margin: 0; }

.owner-activities { padding: 0 56px 0px; }
.owner-activities__heading { color: #14343F; font-size: 22px; font-weight: 700; margin: 14px 0 40px; text-align: center; }
.owner-activities__grid {
  max-width: 1000px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; margin-bottom: 64px;
}
@media (max-width: 640px) {
  .owner-activities__grid { grid-template-columns: minmax(0,1fr); }
  /* Each card's image-slot mask is an absolute-pixel SVG path authored
     for the desktop column width (~312px); at 1-column mobile the card
     can render wider than that and cut the mask off partway, so cap it
     at (roughly) its native size instead of stretching to fill. */
  .activity-card image-slot { width: 100% !important; max-width: 312px !important; margin: 0 auto 24px !important; display: block; }
}
.owner-activities__cta-wrap { text-align: center; position: relative; }

.activity-card { min-width: 0; }
.activity-card__title { color: #3E7C82; font-size: 20px; font-weight: 700; text-align: center; margin: 0 0 16px; }
.activity-card__desc { color: #425256; font-size: 16px; line-height: 1.9; text-align: center; margin: 0; }

/* ==========================================================================
   SERVICES page (services.php)
   ========================================================================== */
.services-list { padding: 100px 56px; position: relative; }
.services-list__decor { position: absolute; right: 40px; top: 60px; width: 110px; height: auto; transform: rotate(6deg); pointer-events: none; opacity: 0.9; }
.services-list__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; counter-reset: service-num; }

.service-card { min-width: 0; counter-increment: service-num; }
.service-card__photo-wrap { position: relative; width: 100%; height: 300px; margin-bottom: 20px; }
.service-card__badges { position: absolute; top: -16px; left: 16px; display: flex; flex-direction: column; gap: 6px; z-index: 2; pointer-events: none; }
.service-card__badge {
  background: #c9d3d1; color: #4d7b81; font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px; font-weight: 500; letter-spacing: 0.03em; padding: 6px 18px;
  border-radius: 999px; width: fit-content;
}
.service-card__badge:last-child::after { content: " #" counter(service-num); }
.service-card__title { color: #14343F; font-size: 20px; font-weight: 700; margin: 0 0 14px; }
.service-card__desc { color: #425256; font-size: 16px; line-height: 1.9; margin: 0; }

.brands { padding: 0 56px 100px; position: relative; overflow: hidden; }
.brands__bg { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 460px; height: auto; z-index: 0; pointer-events: none; }
.brands__inner { position: relative; z-index: 1; }
.brands__decor { position: absolute; left: 20px; bottom: 20px; width: 120px; height: auto; transform: rotate(-4deg); pointer-events: none; opacity: 0.9; z-index: 2; }
.brands__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; align-items: flex-start; }
.brands__text { flex: 0 1 400px; min-width: 240px; }
.brands__label { color: #8A8378; font-size: 13px; letter-spacing: 0.1em; margin-bottom: 8px; }
.brands__title { color: #14343F; font-size: 24px; font-weight: 700; margin: 0 0 20px; }
.brands__text-p { color: #425256; font-size: 16px; line-height: 1.9; margin: 0 0 20px; }
.brands__text-p--last { margin: 0; }
.brands__text-body { color: #425256; font-size: 16px; line-height: 1.9; }
.brands__text-body p { margin: 0; }

.beginners { padding: 0 56px; text-align: center; position: relative; }
.beginners__inner { max-width: 96%; margin: 0 auto; background: #E8DFCE; border-radius: 32px; padding: 80px 56px; position: relative; }
.beginners__decor { position: absolute; right: 40px; top: -40px; width: 120px; height: auto; transform: rotate(-8deg); pointer-events: none; z-index: 0; opacity: 0.9; }
.beginners__heading { color: #14343F; font-size: 22px; font-weight: 700; margin: 14px 0 24px; }
.beginners__lede { color: #425256; font-size: 16px; line-height: 1.9; max-width: 760px; margin: 0 auto 36px; }
.beginners__lede p { margin: 0; }

/* ==========================================================================
   SHOP INFO page (shop-info.php)
   ========================================================================== */
.shop-info-list { padding: 100px 56px 60px; }
.shop-info-list__box { max-width: 640px; margin: 0 auto; background: #FFFFFF; border-radius: 20px; padding: 32px 40px; }
.shop-info-row { display: flex; flex-wrap: nowrap; gap: 24px; padding: 22px 0; }
.shop-info-row__label { flex: 0 0 140px; color: #8A8378; font-size: 14px; font-weight: 700; letter-spacing: 0.05em; white-space: nowrap; }
.shop-info-row__value { flex: 1 1 auto; color: #14343F; font-size: 16px; line-height: 1.8; }

.map-access { padding: 60px 56px; }
.map-access__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: stretch; }
.map-access__map { width: 100%; height: 420px; border-radius: 24px; overflow: hidden; }
.map-access__iframe { border: 0; display: block; }
.map-access__cards { display: flex; flex-direction: column; gap: 24px; }
.access-card { background: #FFFFFF; border-radius: 20px; padding: 32px; flex: 1; }
.access-card__title { color: #14343F; font-size: 20px; font-weight: 700; margin: 0 0 14px; }
.access-card__desc { color: #425256; font-size: 16px; line-height: 1.9; margin: 0; }

.shop-gallery { padding: 60px 56px 0px; }
.shop-gallery__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }

/* ==========================================================================
   CONTACT page (contact.php)
   ========================================================================== */
.contact-form-section { padding: 100px 56px 60px; }
.contact-form__inner { max-width: 720px; margin: 0 auto; }
.contact-form { display: flex; flex-direction: column; gap: 28px; }
.contact-form__field { display: flex; flex-direction: column; gap: 10px; }
.contact-form__label-text { color: #14343F; font-size: 15px; font-weight: 700; }
.contact-form__input {
  width: 100%; padding: 14px 18px; border: 1px solid #DCD3C2; border-radius: 10px;
  background: #FFFFFF; font-size: 15px; color: #1F2E30;
}
.contact-form__input--textarea { resize: vertical; }
.contact-form__pills { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-form__pill {
  padding: 10px 22px; border: 1px solid #3E7C82; border-radius: 999px;
  color: #3E7C82; font-size: 14px; font-weight: 500;
}
.contact-form__submit { align-self: center; border: none; cursor: pointer; }

/* ApolloCMS contact-form embed (FORM section, contact.php) — the plugin
   loads its own https://cdn.a-pollo.jp/css/cms/mail-form.css, whose
   selectors (e.g. ".form-contents form dl dt:not(.pattern-exclusion)")
   out-specificity plain class rules and, since that stylesheet's <link>
   sits inside the AJAX-injected markup (later in the DOM than our own
   <head> stylesheet), also wins same-specificity ties by source order.
   So every override here needs !important to reliably win. */
.form-contents { max-width: 720px; margin: 0 auto !important; border-radius: 24px; }
.form-contents form dl { display: flex; flex-direction: column; gap: 28px; margin: 0 !important; }
.form-contents form dl dt:not(.pattern-exclusion) {
  float: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important;
  color: #14343F; font-size: 15px; font-weight: 700;
}
.form-contents form dl dd:not(.pattern-exclusion) {
  padding: 0 !important; margin: 0 !important; border-bottom: none !important;
}
.form-contents dd:not(.pattern-exclusion) input.textarea,
.form-contents dd:not(.pattern-exclusion) textarea.textarea,
.form-contents dd:not(.pattern-exclusion) .textarea-select {
  height: auto !important; width: 100% !important; padding: 14px 18px !important;
  border: 1px solid #DCD3C2 !important; border-radius: 10px !important;
  background: #FFFFFF; font-size: 15px; color: #1F2E30; font-family: inherit;
  box-sizing: border-box;
}
.form-contents dd:not(.pattern-exclusion) textarea.textarea { resize: vertical; }
.form-design-pattern-1 dl dt:not(.pattern-exclusion) span.required::before,
.form-design-pattern-1 dl dt:not(.pattern-exclusion) span.optional::before {
  background: #E0734B !important;
}
.form-contents .auth-descript { font-size: 13px; color: #8A8378; }
.form-contents input[name="winnie_the_pooh"] { position: absolute !important; left: -9999px !important; }
.form-contents .submit-btn,
.form-contents :not(.pattern-exclusion) button {
  width: auto !important; padding: 16px 48px !important; border: none !important;
  border-radius: 999px !important; background: #14343F !important; color: #FFFFFF !important;
  font-size: 15px; font-weight: 700; transition: background-color 0.4s ease;
}
.form-contents .submit-btn:hover,
.form-design-pattern-1 :not(.pattern-exclusion) button:hover {
  background: #E0734B !important;
}
.form-contents .form-err-msg {
  color: #B3261E !important; background: #FDEDEA !important; border: none !important;
  border-radius: 10px !important; padding: 16px 20px !important; margin: 0 0 20px !important;
}
.form-contents .form-err-msg ul { margin: 0; padding-left: 20px; }
.form-design-pattern-1 .form-thanks-msg {
  border-color: #DCD3C2 !important; border-radius: 16px !important;
}
.form-contents .thanks-msg-area { color: #14343F; font-size: 16px; line-height: 1.9; }
.form-design-pattern-1 .form-thanks-msg .back-home-btn a {
  background: #14343F !important; border-color: #14343F !important; border-radius: 999px !important;
}
.form-design-pattern-1 .form-thanks-msg .back-home-btn a:hover { background: #E0734B !important; }

.line-section { padding: 80px 56px; text-align: center; }
.line-section__inner { max-width: 96%; margin: 0 auto; background: #E8DFCE; border-radius: 32px; padding: 70px 56px; }
.line-section__heading { color: #14343F; font-size: 22px; font-weight: 700; margin: 14px 0 24px; }
.line-section__lede { color: #425256; font-size: 16px; line-height: 1.9; max-width: 640px; margin: 0 auto 36px; }

.other-contact { padding: 60px 56px 100px; }
.other-contact__label { color: #8A8378; font-size: 13px; letter-spacing: 0.1em; margin-bottom: 8px; }
.other-contact__heading { color: #14343F; font-size: 24px; font-weight: 700; margin: 0 0 20px; }
.other-contact__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
.other-contact-card { background: #FFFFFF; border-radius: 20px; padding: 32px; text-align: center; }
.other-contact-card__title { color: #14343F; font-size: 20px; font-weight: 700; margin: 0 0 14px; }
.other-contact-card__desc { color: #425256; font-size: 16px; line-height: 1.9; margin: 0; }
.other-contact-card__link {
  display: inline-block; background: #3E7C82; color: #FFFFFF;
  padding: 10px 24px; border-radius: 999px; font-size: 14px; font-weight: 700;
}

/* ==========================================================================
   ARTICLE page (article.php)
   ========================================================================== */
.article-header-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.article-header-meta__tag { background: #3E7C82; color: #FFFFFF; font-size: 13px; font-weight: 700; padding: 6px 16px; border-radius: 999px; }
.article-header-meta__date { color: #7A7264; font-size: 14px; }
.article-header__title {
  font-family: 'Zen Maru Gothic', sans-serif; color: #14343F; font-size: 36px;
  font-weight: 700; letter-spacing: -0.01em; line-height: 1.5; margin: 0;
}

.article-body { padding: 80px 56px 100px; }
.article-body__inner { max-width: 760px; margin: 0 auto; }
.article-body__heading { color: #14343F; font-size: 22px; font-weight: 700; margin: 48px 0 18px; }
.article-body__paragraph { color: #425256; font-size: 16px; line-height: 2; margin: 0 0 24px; }
/* The CMS body field ({$body$}) is free-form rich text, not our own
   block markup, so style it via descendant selectors on plain tags. */
.article-body__content { color: #425256; font-size: 16px; line-height: 2; }
.article-body__content h2 { color: #14343F; font-size: 22px; font-weight: 700; margin: 48px 0 18px; }
.article-body__content h3 { color: #14343F; font-size: 19px; font-weight: 700; margin: 40px 0 16px; }
.article-body__content p { margin: 0 0 24px; }
.article-body__content p:last-child { margin-bottom: 0; }
.article-body__content img { max-width: 100%; height: auto; border-radius: 20px; display: block; margin: 8px 0 32px; }
.article-body__content a { color: #3E7C82; text-decoration: underline; }
.article-body__content ul, .article-body__content ol { margin: 0 0 24px; padding-left: 1.5em; }
.article-body__content strong { font-weight: 700; color: #14343F; }
.article-body__tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 40px 0 0; }
.article-body__tag { background: #E8DFCE; color: #425256; font-size: 13px; padding: 8px 18px; border-radius: 999px; }

.article-back { padding: 0 56px 100px; text-align: center; }

/* ---- footer ---- */
.site-footer {
  padding: 48px 56px;
  background: linear-gradient(rgba(14,38,46,0.85),rgba(14,38,46,0.85)), url('../img/footer-bg-photo.jpg') center/cover;
}
.footer-top {
  display: flex; gap: 56px; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; padding-bottom: 36px;
  border-bottom: 1px solid rgba(247,243,236,0.15); margin-bottom: 24px;
}
.footer-logo { flex: 0 0 auto; }
.footer-logo img { height: 140px; border-radius: 8px; background: #FFFFFF; padding: 4px; }
.footer-shop-info { color: #C7D3D1; font-size: 14px; line-height: 1.9; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
}
.footer-copyright { color: #7A8B8E; font-size: 13px; }

.footer-col-label {
  color: #7A8B8E; font-size: 13px; font-weight: 700; letter-spacing: 0.05em;
}
.footer-col {
  display: flex; flex-direction: column; gap: 14px;
}
.footer-col-links,
.footer-nav {
  display: flex; flex-direction: column; gap: 10px;
}
.footer-col-links a,
.footer-nav a {
  color: #C7D3D1; font-size: 14px;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  /* -- nav: collapse to a hamburger-toggled dropdown (checkbox hack, no JS) -- */
  .logo-badge img { height: 110px; }
  .site-header { top: 16px; right: 16px; padding: 8px; gap: 0; }
  .nav-toggle-btn { display: flex; }
  .site-nav {
    display: none; position: fixed; top: 74px; right: 16px; left: 16px;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: #FFFFFF; border-radius: 20px; padding: 16px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.15); z-index: 150;
  }
  .nav-toggle-checkbox:checked ~ .site-nav { display: flex; }
  .nav-link { border-bottom: none; padding: 12px 10px; text-align: center; border-radius: 10px; }
  .nav-link.is-active { background: #E8DFCE; }
  .nav-cta { text-align: center; }

  /* -- shared paddings -- */
  .section,
  .home-about, .home-events, .home-owner, .home-news, .home-sns, .home-shop,
  .owner-message, .owner-activities, .services-list, .article-body,
  .page-title-band__content, .blog-intro, .blog-categories, .blog-articles,
  .blog-pagination, .shop-info-list, .map-access, .shop-gallery,
  .contact-form-section, .line-section, .other-contact, .brands, .site-footer {
    padding-left: 24px; padding-right: 24px;
  }
  .home-community, .beginners, .article-back { padding-left: 24px; padding-right: 24px; }

  /* -- hero -- */
  .home-hero { padding: 30px 16px; }
  .home-hero__title { font-size: 34px; }
  .home-hero__lede { font-size: 15px; }
  .home-hero__caption { padding: 0 16px; }

  /* -- about: drop the absolutely-positioned side photos, stack the rest -- */
  .home-about__row { flex-direction: column; align-items: center; gap: 32px; }
  .home-about__photo-1-wrap, .home-about__photo-2-wrap { display: none; }
  .home-about__text-col { margin-top: 0; max-width: 100%; }
  .home-about__flourish { display: none; }
  .home-about__decor-1, .home-about__decor-2 { display: none; }

  /* -- events / news grids -- */
  .home-events__grid { grid-template-columns: minmax(0,1fr); }
  .home-news__grid { grid-template-columns: repeat(2,1fr); }
  .event-card { flex-direction: column; align-items: stretch; }
  .event-card image-slot { width: 100% !important; height: 180px !important; }

  /* -- recommended courses -- */
  .home-courses__banner { height: 420px; }
  .home-courses__banner-caption { left: 24px; right: 24px; }
  .home-courses__row { padding: 32px 24px 0; }
  .home-courses__flourish { width: 100%; max-width: 400px; }
  .home-courses__photos { width: 100%; max-width: 360px; height: 278px; }
  .home-courses__photos-bg { display: none; }
  .home-courses__photo-3-wrap { display: none; }
  /* Keep photo-2's box at its authored native size (395.59x305.2) so its
     clip-path mask — an absolute-pixel SVG path, not scaled to the box —
     still traces its full shape, then shrink the whole thing uniformly
     with transform so the mask isn't cut off partway. */
  .home-courses__photo-2-wrap { left: 0; top: 0; transform: scale(0.91); transform-origin: top left; }

  /* -- owner (home section) -- */
  .home-owner__photo-wrap { width: 280px; height: 165px; }
  /* #owner-photo's clip-path mask is an absolute-pixel SVG path authored
     for the desktop 440x260 box; force it back to that native size (out
     of normal flow so it doesn't affect the wrap's smaller footprint)
     and shrink the whole thing uniformly so the mask isn't cut off. */
  #owner-photo {
    position: absolute !important;
    left: 0; top: 0;
    width: 440px !important; height: 260px !important;
    transform: scale(0.636);
    transform-origin: top left;
  }

  /* -- services (home) -- */
  .home-services { flex-direction: column; padding: 56px 24px; gap: 32px; }
  .home-services__text { max-width: 100%; }
  #services-photo { min-width: 0 !important; width: 100% !important; height: 280px !important; }

  /* -- sns -- */
  .home-sns__row { flex-direction: column; }
  .home-sns__gallery { grid-template-columns: repeat(2,1fr); width: 100%; }
  .home-sns__gallery image-slot { width: 100% !important; height: auto !important; aspect-ratio: 6 / 5; }

  /* -- community / shop (home) -- */
  .home-community__card { padding: 0; background: none; flex-direction: column; }
  .home-shop__row { flex-direction: column; padding-left: 0; padding-right: 0; }
  .home-shop__text { flex: 0 1 0; }
  /* Fixed square, centered on its own line — the previous fluid
     width:100%/max-width:320px combo could render narrower than the
     fixed height, skewing the box off-square and off-center. */
  .home-community__photo-wrap, .home-shop__photo-wrap { width: 280px; height: 280px; margin: 0 auto; }
  /* #community-photo / #shop-photo keep their native inline 360x360 box
     (their clip-path mask is an absolute-pixel SVG path sized for that),
     just scaled down uniformly to fit the smaller wrap without cutting
     the mask off partway. */
  #community-photo, #shop-photo { transform: scale(0.778); transform-origin: top left; }
  .home-community__decor { display: none; }

  /* -- page title band -- */
  /* Photo first, then breadcrumb/heading/lede — the 160px top padding on
     __content was clearance for the fixed logo badge while it was the
     first (topmost) element; now the photo takes that spot instead. */
  .page-title-band__photo { order: -1; min-width: 100%; height: 260px; }
  .page-title-band__content { padding: 32px 24px; }
  .page-title-band__heading { font-size: 32px; }

  /* -- blog -- */
  .blog-articles__grid { grid-template-columns: repeat(2,1fr); }

  /* -- owner message -- */
  .owner-message__row { flex-direction: column; }
  .owner-message__photo-col { width: 280px; height: 308px; margin: 0 auto; }
  /* #owner-store-photo's clip-path mask is an absolute-pixel SVG path
     authored for the desktop 400x440 box; force it back to that native
     size (out of normal flow so it doesn't affect the column's smaller
     footprint) and shrink the whole thing uniformly so the mask isn't
     cut off. */
  #owner-store-photo {
    position: absolute !important;
    left: 0; top: 0;
    width: 400px !important; height: 440px !important;
    transform: scale(0.7);
    transform-origin: top left;
  }
  .owner-message__decor { display: none; }

  /* -- services page -- */
  .services-list__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .brands__row { flex-direction: column; align-items: center; text-align: center; }
  .beginners__inner { padding: 48px 24px; }

  /* -- shop info -- */
  .shop-info-row { flex-direction: column; gap: 6px; }
  .shop-info-row__label { flex: 0 0 auto; }
  .map-access__grid { grid-template-columns: minmax(0,1fr); }
  .shop-gallery__grid { grid-template-columns: repeat(3,1fr); }

  /* -- contact -- */
  .contact-cta { padding: 64px 26px; }
  .other-contact__grid { grid-template-columns: minmax(0,1fr); }
  .line-section__inner { padding: 48px 24px; }

  /* -- article -- */
  .article-header__title { font-size: 26px; }

  /* -- footer -- */
  .footer-top { gap: 32px; }
  .footer-logo img { height: 100px; }
  .footer-col--sitenav { display: none; }
}

@media (max-width: 560px) {
  .services-list__grid { grid-template-columns: minmax(0,1fr); }
  /* .service-card__photo-wrap's image-slot mask is an absolute-pixel SVG
     path authored for a 413x300 box (confirmed by rendering the path
     directly — not a 312x312 square as first assumed). At 1-column width
     the wrap is narrower than that, so the mask's own right-side curve
     falls outside the box and gets cut off; keep the image-slot at its
     native size (out of flow) and shrink the whole thing uniformly. */
  .service-card__photo-wrap { width: 320px; height: 233px; margin: 0 auto 20px; }
  .service-card__photo-wrap image-slot {
    position: absolute !important;
    left: 0; top: 0;
    width: 413px !important; height: 300px !important;
    transform: scale(0.775);
    transform-origin: top left;
  }
  .shop-gallery__grid {
    grid-template-columns: repeat(2,1fr);
  }
  .home-news__grid,
  .blog-articles__grid { grid-template-columns: minmax(0,1fr); }
  .home-hero__title { font-size: 28px; }
  .page-title-band__heading { font-size: 26px; }
  .eyebrow-lg { font-size: 34px; }
}