/* =========================================================
   飛騨高山 木工務店 ヤマモト — ウッド × キャメル
   main.css
   ========================================================= */

:root {
  --cp-primary: #826340; /* WCAG AA: #F8F2E8 との対比 4.95:1（旧 #8C6B45 は 4.38 で不足）。色相維持で僅かに暗色化 */
  --cp-accent: #C19660;
  --cp-accent-ink: #8A6428; /* 明色背景上のテキスト用（accent はコントラスト不足のため） */
  --cp-text: #3D2A14;
  --cp-muted: #79654B;
  --cp-bg: #F8F2E8;
  --cp-white: #FFFFFF;
  --cp-line: #E4D8C6;
  --cp-card: #FCF8F1;
  --cp-dark: #2B2014;

  --cp-radius: 6px;
  --cp-radius-lg: 12px;
  --cp-shadow: 0 4px 12px rgba(80, 60, 30, 0.08);
  --cp-shadow-lg: 0 16px 40px rgba(80, 60, 30, 0.14);
  --cp-maxw: 1200px;
  --cp-pad: clamp(1rem, 3vw, 3rem);
  --cp-section: clamp(4rem, 8vw, 8rem);

  --cp-serif: "Lora", "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --cp-display: "Bitter", "Lora", "Noto Serif JP", serif;
  --cp-mono: "Courier Prime", "SFMono-Regular", monospace;
  --cp-sign: "Caveat", cursive;

  /* 木目テクスチャ (subtle SVG) */
  --cp-wood-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='200' viewBox='0 0 600 200'%3E%3Cg fill='none' stroke='%238C6B45' stroke-opacity='0.05' stroke-width='1'%3E%3Cpath d='M0 20 C150 8 450 32 600 20'/%3E%3Cpath d='M0 50 C150 40 450 62 600 50'/%3E%3Cpath d='M0 82 C160 70 440 96 600 82'/%3E%3Cpath d='M0 116 C150 104 450 130 600 116'/%3E%3Cpath d='M0 150 C160 140 440 162 600 150'/%3E%3Cpath d='M0 184 C150 174 450 196 600 184'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--cp-serif);
  font-size: 1.05rem;
  line-height: 1.85;
  letter-spacing: 0.01em;
  color: var(--cp-text);
  background-color: var(--cp-bg);
  background-image: var(--cp-wood-grain);
  background-size: 600px auto;
  font-feature-settings: 'palt', 'liga';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-family: var(--cp-display); line-height: 1.25; font-weight: 600; letter-spacing: 0; }
button { font-family: inherit; cursor: pointer; }

/* ---------- skip link ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--cp-primary); color: var(--cp-bg);
  padding: 0.75rem 1.25rem; border-radius: 0 0 var(--cp-radius) 0;
  font-family: var(--cp-mono); font-size: 0.85rem;
}
.skip-link:focus { left: 0; }

/* ---------- layout helpers ---------- */
.cp-container { max-width: var(--cp-maxw); margin: 0 auto; padding-left: var(--cp-pad); padding-right: var(--cp-pad); }
.cp-section { padding-top: var(--cp-section); padding-bottom: var(--cp-section); }
.cp-section--tight { padding-top: clamp(3rem, 5vw, 5rem); padding-bottom: clamp(3rem, 5vw, 5rem); }

/* ---------- eyebrow / heading ---------- */
.cp-eyebrow {
  font-family: var(--cp-mono);
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cp-primary);
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-bottom: 1.1rem;
}
.cp-eyebrow::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--cp-accent), #9c7338);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4), 0 1px 2px rgba(80,60,30,0.3);
  flex: 0 0 auto;
}
.cp-h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--cp-text); }
.cp-h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); color: var(--cp-text); }
.cp-lead { font-size: 1.08rem; color: var(--cp-text); max-width: 60ch; }
.cp-muted { color: var(--cp-muted); }

/* 手書き signature underline */
.cp-sign-underline { display: block; margin-top: 0.6rem; color: var(--cp-accent); }
.cp-sign-underline path { stroke-dasharray: 320; stroke-dashoffset: 320; }
html.js-enabled .cp-sign-underline.is-in path { animation: drawSign 1100ms ease-out forwards; }
@keyframes drawSign { to { stroke-dashoffset: 0; } }

/* ---------- buttons ---------- */
.cp-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.6rem; border-radius: var(--cp-radius);
  font-family: var(--cp-display); font-weight: 600; font-size: 1rem;
  border: 1.5px solid transparent; transition: all 280ms ease;
  position: relative; overflow: hidden;
}
.cp-btn--primary { background: var(--cp-primary); color: var(--cp-bg); box-shadow: var(--cp-shadow); }
.cp-btn--primary::after {
  content: ""; position: absolute; inset: 0; background-image: var(--cp-wood-grain);
  background-size: 300px auto; opacity: 0; transition: opacity 280ms ease; mix-blend-mode: overlay;
}
.cp-btn--primary:hover { background: #7a5c39; transform: translateY(-2px); box-shadow: var(--cp-shadow-lg); }
.cp-btn--primary:hover::after { opacity: 0.5; }
.cp-btn--outline { background: transparent; color: var(--cp-primary); border-color: var(--cp-primary); }
.cp-btn--outline:hover { background: var(--cp-primary); color: var(--cp-bg); }

/* text link with underline (thumbnail style) */
.cp-link-arrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--cp-mono); font-size: 0.82rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cp-text);
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--cp-text);
  transition: gap 240ms ease, color 240ms ease, border-color 240ms ease;
}
.cp-link-arrow:hover { gap: 1rem; color: var(--cp-primary); border-color: var(--cp-primary); }

/* ---------- header ---------- */
.cp-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(248, 242, 232, 0.92);
  backdrop-filter: saturate(120%) blur(8px);
  border-bottom: 1px solid var(--cp-line);
  background-image: var(--cp-wood-grain);
  background-size: 600px auto;
}
.cp-header__inner {
  max-width: var(--cp-maxw); margin: 0 auto; padding: 0.85rem var(--cp-pad);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.cp-brand { display: flex; align-items: center; gap: 0.7rem; }
.cp-brand__logo {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid var(--cp-primary); padding: 4px;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.cp-brand__logo img { width: 100%; height: 100%; object-fit: contain; }
.cp-brand__name { font-family: var(--cp-display); font-weight: 600; font-size: 1.05rem; color: var(--cp-text); letter-spacing: 0.02em; line-height: 1.2; }
.cp-brand__name small { display: block; font-family: var(--cp-mono); font-size: 0.6rem; letter-spacing: 0.16em; color: var(--cp-muted); font-weight: 400; }

.cp-nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.4rem); }
.cp-nav__link { font-size: 0.95rem; color: var(--cp-text); position: relative; padding: 0.3rem 0; transition: color 220ms ease; }
.cp-nav__link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1.5px; background: var(--cp-accent); transition: width 240ms ease; }
.cp-nav__link:hover { color: var(--cp-primary); }
.cp-nav__link:hover::after { width: 100%; }
.cp-header__cta { margin-left: 0.6rem; }
.cp-btn--sm { padding: 0.55rem 1.1rem; font-size: 0.9rem; }

.cp-burger {
  display: none; flex-direction: column; gap: 5px;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--cp-line); border-radius: var(--cp-radius);
}
.cp-burger span { width: 22px; height: 2px; background: var(--cp-text); transition: transform 280ms ease, opacity 200ms ease; }

/* drawer */
.cp-drawer { position: fixed; inset: 0; z-index: 150; visibility: hidden; }
.cp-drawer__overlay { position: absolute; inset: 0; background: rgba(43, 32, 20, 0.5); opacity: 0; transition: opacity 300ms ease; }
.cp-drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(82vw, 340px);
  background: var(--cp-bg); background-image: var(--cp-wood-grain); background-size: 500px auto;
  box-shadow: var(--cp-shadow-lg); padding: 1.5rem; transform: translateX(100%); transition: transform 320ms ease;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.cp-drawer.is-open { visibility: visible; }
.cp-drawer.is-open .cp-drawer__overlay { opacity: 1; }
.cp-drawer.is-open .cp-drawer__panel { transform: translateX(0); }
.cp-drawer__close { align-self: flex-end; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--cp-line); background: var(--cp-card); color: var(--cp-text); display: flex; align-items: center; justify-content: center; }
.cp-drawer__link { padding: 0.9rem 0.4rem; border-bottom: 1px solid var(--cp-line); font-family: var(--cp-display); font-size: 1.1rem; color: var(--cp-text); }
.cp-drawer__cta { margin-top: 1rem; }

/* ---------- hero (top) ---------- */
.cp-hero { position: relative; isolation: isolate; min-height: clamp(540px, 82vh, 760px); display: flex; align-items: flex-end; overflow: hidden; }
.cp-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.cp-hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cp-hero__overlay {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(43,32,20,0.82) 0%, rgba(60,42,20,0.55) 42%, rgba(60,42,20,0.18) 70%, rgba(60,42,20,0.10) 100%),
    linear-gradient(to top, rgba(43,32,20,0.55) 0%, rgba(43,32,20,0) 42%);
}
.cp-hero__inner { max-width: var(--cp-maxw); margin: 0 auto; padding: clamp(3rem, 8vw, 7rem) var(--cp-pad) clamp(3rem, 6vw, 5rem); width: 100%; }
.cp-hero__eyebrow { font-family: var(--cp-mono); font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase; color: #EBDDC6; display: inline-flex; align-items: center; gap: 0.9rem; margin-bottom: 1.6rem; }
.cp-hero__eyebrow::after { content: ""; width: clamp(28px, 6vw, 64px); height: 1px; background: rgba(235,221,198,0.6); }
.cp-hero h1 { font-size: clamp(2.4rem, 5.4vw, 4.1rem); color: #FBF6EC; max-width: 16ch; text-shadow: 0 2px 18px rgba(20,12,4,0.4); }
.cp-hero h1 .accent { color: var(--cp-accent); }
.cp-hero__sub { margin-top: 1.6rem; color: #EFE6D6; font-size: clamp(1rem, 1.6vw, 1.18rem); max-width: 40ch; line-height: 1.9; text-shadow: 0 1px 10px rgba(20,12,4,0.4); }
.cp-hero__cta { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.cp-hero .cp-link-arrow { color: #FBF6EC; border-color: rgba(251,246,236,0.7); }
.cp-hero .cp-link-arrow:hover { color: var(--cp-accent); border-color: var(--cp-accent); }

/* ---------- two-column intro (thumbnail signature) ---------- */
.cp-duo { background: var(--cp-bg); border-bottom: 1px solid var(--cp-line); }
.cp-duo__grid { display: grid; grid-template-columns: 1fr 1fr; }
.cp-duo__col { padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 3rem); position: relative; }
.cp-duo__col:first-child::after { content: ""; position: absolute; right: 0; top: 12%; bottom: 12%; width: 1px; background: var(--cp-line); }
.cp-duo__col .cp-eyebrow { color: var(--cp-accent-ink); }
.cp-duo__col h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 1rem; }
.cp-duo__col p { color: var(--cp-text); margin-bottom: 1.3rem; }

/* ---------- generic section heading ---------- */
.cp-sec-head { max-width: 64ch; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.cp-sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.cp-sec-head--center .cp-eyebrow { justify-content: center; }
.cp-sec-head p { margin-top: 1rem; color: var(--cp-muted); }

/* ---------- feature cards (3 strengths) ---------- */
.cp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.cp-card {
  background: var(--cp-card); border: 1px solid var(--cp-line); border-radius: var(--cp-radius);
  padding: clamp(1.6rem, 2.4vw, 2.1rem); box-shadow: var(--cp-shadow);
  position: relative; transition: transform 320ms ease, box-shadow 320ms ease;
  background-image: var(--cp-wood-grain); background-size: 460px auto;
}
.cp-card:hover { transform: translateY(-3px); box-shadow: var(--cp-shadow-lg); }
/* 真鍮鋲 装飾 (card 角) */
.cp-card::before, .cp-card::after {
  content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--cp-accent), #8a6427);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}
.cp-card::before { top: 12px; left: 12px; }
.cp-card::after { top: 12px; right: 12px; }
.cp-card__icon { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(193,150,96,0.14); color: var(--cp-primary); margin-bottom: 1.2rem; }
.cp-card h3 { margin-bottom: 0.7rem; }
.cp-card p { color: var(--cp-text); font-size: 1rem; }
.cp-card__num { font-family: var(--cp-mono); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--cp-accent-ink); margin-bottom: 0.8rem; }

/* ---------- stats ---------- */
.cp-stats { background: var(--cp-dark); color: #F3E9D8; position: relative; isolation: isolate; overflow: hidden; }
.cp-stats__bg { position: absolute; inset: 0; z-index: -2; }
.cp-stats__bg img { width: 100%; height: 100%; object-fit: cover; }
.cp-stats__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(30,22,12,0.88), rgba(43,32,20,0.92)); }
.cp-stats .cp-eyebrow { color: var(--cp-accent); }
.cp-stats h2 { color: #FBF6EC; }
.cp-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; margin-top: 2.6rem; }
.cp-stat { text-align: center; padding: 1.2rem 0.6rem; border: 1px solid rgba(235,221,198,0.16); border-radius: var(--cp-radius); }
.cp-stat__num { font-family: var(--cp-display); font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 700; color: var(--cp-accent); line-height: 1; }
.cp-stat__unit { font-family: var(--cp-mono); font-size: 0.9rem; margin-left: 0.2rem; color: #E7D8BF; }
.cp-stat__label { margin-top: 0.7rem; font-size: 0.92rem; color: #D9CBB3; }

/* ---------- services ---------- */
.cp-services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.4rem, 2.6vw, 2rem); }
.cp-service {
  background: var(--cp-card); border: 1px solid var(--cp-line); border-radius: var(--cp-radius);
  overflow: hidden; box-shadow: var(--cp-shadow); display: flex; flex-direction: column;
  transition: transform 320ms ease, box-shadow 320ms ease;
}
.cp-service:hover { transform: translateY(-3px); box-shadow: var(--cp-shadow-lg); }
.cp-service__media { aspect-ratio: 16/10; overflow: hidden; }
.cp-service__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms ease; }
.cp-service:hover .cp-service__media img { transform: scale(1.05); }
.cp-service__body { padding: clamp(1.4rem, 2.4vw, 2rem); display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.cp-service__body h3 { display: flex; align-items: center; gap: 0.6rem; }
.cp-service__tag { font-family: var(--cp-mono); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--cp-accent-ink); text-transform: uppercase; }
.cp-service__body p { color: var(--cp-text); font-size: 1rem; }

/* ---------- representative message ---------- */
.cp-message { background: var(--cp-bg); position: relative; isolation: isolate; overflow: hidden; }
.cp-message__bg { position: absolute; inset: 0; z-index: -1; }
.cp-message__bg img { width: 100%; height: 100%; object-fit: cover; }
.cp-message__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(248,242,232,0.97) 0%, rgba(248,242,232,0.9) 50%, rgba(248,242,232,0.7) 100%); }
.cp-message__grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.cp-message__photo { border-radius: var(--cp-radius-lg); overflow: hidden; box-shadow: var(--cp-shadow-lg); border: 1px solid var(--cp-line); aspect-ratio: 4/5; }
.cp-message__photo img { width: 100%; height: 100%; object-fit: cover; }
.cp-message__body h2 { margin-bottom: 1.3rem; }
.cp-message__body p { margin-bottom: 1.2rem; }
.cp-message__sign { margin-top: 1.6rem; display: flex; align-items: baseline; gap: 0.9rem; }
.cp-message__sign .role { font-family: var(--cp-mono); font-size: 0.78rem; letter-spacing: 0.16em; color: var(--cp-muted); }
.cp-message__sign .name { font-family: var(--cp-sign); font-size: 2rem; color: var(--cp-primary); line-height: 1; }

/* ---------- testimonial ---------- */
.cp-voice { background: var(--cp-card); position: relative; isolation: isolate; overflow: hidden; border-top: 1px solid var(--cp-line); border-bottom: 1px solid var(--cp-line); }
.cp-voice__bg { position: absolute; inset: 0; z-index: -1; }
.cp-voice__bg img { width: 100%; height: 100%; object-fit: cover; }
.cp-voice__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(252,248,241,0.93), rgba(248,242,232,0.95)); }
.cp-voice__quote { max-width: 60ch; margin: 0 auto; text-align: center; }
.cp-voice__mark { font-family: var(--cp-display); font-size: 4rem; color: var(--cp-accent); line-height: 0.6; opacity: 0.5; }
.cp-voice__quote blockquote { font-family: var(--cp-display); font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.65; color: var(--cp-text); margin: 1rem 0 1.4rem; }
.cp-voice__cite { font-family: var(--cp-mono); font-size: 0.82rem; letter-spacing: 0.12em; color: var(--cp-muted); }

/* ---------- news / details ---------- */
.cp-news-list { display: flex; flex-direction: column; gap: 0.9rem; max-width: 860px; margin: 0 auto; }
.cp-news {
  background: var(--cp-card); border: 1px solid var(--cp-line); border-radius: var(--cp-radius);
  overflow: hidden; transition: box-shadow 280ms ease;
}
.cp-news[open] { box-shadow: var(--cp-shadow); }
.cp-news summary { list-style: none; cursor: pointer; padding: 1.1rem 1.4rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cp-news summary::-webkit-details-marker { display: none; }
.cp-news__date { font-family: var(--cp-mono); font-size: 0.8rem; color: var(--cp-muted); letter-spacing: 0.08em; flex: 0 0 auto; }
.cp-news__cat { font-family: var(--cp-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cp-bg); background: var(--cp-primary); padding: 0.2rem 0.6rem; border-radius: 999px; }
.cp-news__title { font-family: var(--cp-display); font-weight: 600; font-size: 1.02rem; color: var(--cp-text); flex: 1 1 240px; }
.cp-news__chev { margin-left: auto; color: var(--cp-muted); transition: transform 280ms ease; flex: 0 0 auto; }
.cp-news[open] .cp-news__chev { transform: rotate(180deg); }
.cp-news__body { padding: 0 1.4rem 1.3rem; color: var(--cp-text); border-top: 1px solid var(--cp-line); margin-top: 0.2rem; padding-top: 1rem; }

/* ---------- final CTA ---------- */
.cp-cta { position: relative; isolation: isolate; overflow: hidden; color: #FBF6EC; text-align: center; }
.cp-cta__bg { position: absolute; inset: 0; z-index: -2; }
.cp-cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.cp-cta__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, rgba(43,32,20,0.9), rgba(108,78,42,0.82)); }
.cp-cta h2 { color: #FBF6EC; font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
.cp-cta p { margin: 1.1rem auto 2rem; max-width: 52ch; color: #EFE6D6; }
.cp-cta__btns { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.cp-cta .cp-btn--outline { color: #FBF6EC; border-color: rgba(251,246,236,0.8); }
.cp-cta .cp-btn--outline:hover { background: #FBF6EC; color: var(--cp-text); }

/* ---------- contact ---------- */
.cp-contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.cp-form { background: var(--cp-card); border: 1px solid var(--cp-line); border-radius: var(--cp-radius-lg); padding: clamp(1.6rem, 3vw, 2.6rem); box-shadow: var(--cp-shadow); }
.cp-field { margin-bottom: 1.3rem; }
.cp-field label { display: block; font-family: var(--cp-mono); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--cp-text); margin-bottom: 0.45rem; }
.cp-field .req { color: #B4541F; margin-left: 0.3rem; }
.cp-field input, .cp-field textarea, .cp-field select {
  width: 100%; padding: 0.8rem 0.9rem; border: 1px solid var(--cp-line); border-radius: var(--cp-radius);
  background: var(--cp-white); font-family: var(--cp-serif); font-size: 1rem; color: var(--cp-text);
  transition: border-color 220ms ease, box-shadow 220ms ease;
}
.cp-field input:focus, .cp-field textarea:focus, .cp-field select:focus {
  outline: none; border-color: var(--cp-primary); box-shadow: 0 0 0 3px rgba(193,150,96,0.18);
}
.cp-field textarea { resize: vertical; min-height: 140px; }
.cp-field--check { display: flex; align-items: flex-start; gap: 0.6rem; }
.cp-field--check input { width: auto; margin-top: 0.45rem; }
.cp-field--check label { font-family: var(--cp-serif); letter-spacing: 0; font-size: 0.95rem; margin: 0; }
.cp-field--check a { color: var(--cp-primary); text-decoration: underline; }
.cf-turnstile { margin: 1.2rem 0; }
.cp-form__status { font-family: var(--cp-serif); font-size: 0.95rem; margin-top: 1rem; }

.cp-info-card { background: var(--cp-card); border: 1px solid var(--cp-line); border-radius: var(--cp-radius-lg); padding: clamp(1.4rem, 2.6vw, 2rem); box-shadow: var(--cp-shadow); margin-bottom: 1.4rem; }
.cp-info-card h3 { margin-bottom: 1.1rem; }
.cp-info-row { display: flex; gap: 0.9rem; padding: 0.75rem 0; border-bottom: 1px dashed var(--cp-line); align-items: flex-start; }
.cp-info-row:last-child { border-bottom: none; }
.cp-info-row svg { flex: 0 0 auto; color: var(--cp-primary); margin-top: 3px; }
.cp-info-row .k { font-family: var(--cp-mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--cp-muted); text-transform: uppercase; display: block; }
.cp-info-row .v { color: var(--cp-text); }
.cp-info-row a.v:hover { color: var(--cp-primary); }

.cp-map { position: relative; border-radius: var(--cp-radius-lg); overflow: hidden; border: 1px solid var(--cp-line); box-shadow: var(--cp-shadow); background: var(--cp-card); background-image: var(--cp-wood-grain); background-size: 600px auto; min-height: 420px; }
.cp-map iframe { display: block; width: 100%; height: 420px; border: 0; position: relative; z-index: 1; opacity: 0; pointer-events: none; transition: opacity 400ms ease; }
.cp-map.is-map-loaded iframe { opacity: 1; pointer-events: auto; }
/* 地図が読み込めない / 未表示のときのフォールバック（所在地リンク） */
.cp-map__fallback {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.9rem; text-align: center; padding: 1.5rem;
  color: var(--cp-text); background: linear-gradient(160deg, rgba(252,248,241,0.6), rgba(228,216,198,0.35));
}
.cp-map__fallback svg { color: var(--cp-primary); }
.cp-map__fallback-addr { font-family: var(--cp-serif); font-size: 0.98rem; }
.cp-map__fallback-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--cp-mono); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cp-bg); background: var(--cp-primary); padding: 0.6rem 1.2rem; border-radius: var(--cp-radius);
  box-shadow: var(--cp-shadow);
}
.cp-map__fallback:hover .cp-map__fallback-btn { background: #7a5c39; }

/* ---------- page hero (middle pages) ---------- */
.cp-page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(4rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
  background: var(--cp-dark); color: #FBF6EC;
}
.cp-page-hero.aihp-subpage-hero--with-image {
  background-image: var(--aihp-subpage-hero-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.cp-page-hero.aihp-subpage-hero--with-image::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, rgba(43,32,20,0.86) 0%, rgba(60,42,20,0.6) 55%, rgba(60,42,20,0.35) 100%);
}
.cp-page-hero__inner { max-width: var(--cp-maxw); margin: 0 auto; padding: 0 var(--cp-pad); position: relative; z-index: 1; }
.cp-page-hero .cp-eyebrow { color: var(--cp-accent); }
.cp-page-hero h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); color: #FBF6EC; }
.cp-page-hero p { margin-top: 1rem; color: #EFE6D6; max-width: 52ch; }
.cp-breadcrumb { font-family: var(--cp-mono); font-size: 0.74rem; letter-spacing: 0.1em; color: #D9CBB3; margin-bottom: 1.2rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cp-breadcrumb a:hover { color: var(--cp-accent); }

/* ---------- prose / generic content ---------- */
.cp-prose { max-width: 72ch; }
.cp-prose p { margin-bottom: 1.3rem; }
.cp-prose h3 { margin: 2rem 0 0.9rem; }
.cp-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.cp-split__media { border-radius: var(--cp-radius-lg); overflow: hidden; box-shadow: var(--cp-shadow); border: 1px solid var(--cp-line); }
.cp-split__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }

/* timeline (history) */
.cp-timeline { max-width: 760px; margin: 0 auto; position: relative; padding-left: 2rem; }
.cp-timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--cp-line); }
.cp-tl-item { position: relative; padding-bottom: 2rem; }
.cp-tl-item::before { content: ""; position: absolute; left: -1.65rem; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--cp-accent); box-shadow: 0 0 0 4px var(--cp-bg); }
.cp-tl-year { font-family: var(--cp-mono); font-size: 0.9rem; letter-spacing: 0.1em; color: var(--cp-primary); font-weight: 700; }
.cp-tl-item h3 { margin: 0.3rem 0 0.5rem; }

/* price table */
.cp-price-table { width: 100%; border-collapse: collapse; background: var(--cp-card); border: 1px solid var(--cp-line); border-radius: var(--cp-radius); overflow: hidden; }
.cp-price-table th, .cp-price-table td { text-align: left; padding: 1rem 1.2rem; border-bottom: 1px solid var(--cp-line); }
.cp-price-table th { font-family: var(--cp-mono); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--cp-muted); text-transform: uppercase; background: rgba(193,150,96,0.08); }
.cp-price-table td.price { font-family: var(--cp-display); font-weight: 600; color: var(--cp-primary); white-space: nowrap; }
.cp-price-table tr:last-child td { border-bottom: none; }
.cp-note { font-size: 0.9rem; color: var(--cp-muted); margin-top: 0.9rem; }

/* ---------- footer ---------- */
.cp-footer { position: relative; isolation: isolate; background: var(--cp-dark); color: #E7D8BF; overflow: hidden; }
.cp-footer__particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cp-footer__bg { position: absolute; inset: 0; z-index: -1; }
.cp-footer__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.18; }
.cp-footer__inner { position: relative; z-index: 1; max-width: var(--cp-maxw); margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) var(--cp-pad) 2rem; }
.cp-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.4rem; }
.cp-footer__brand { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.1rem; }
.cp-footer__brand img { width: 52px; height: 52px; object-fit: contain; }
.cp-footer__brand .name { font-family: var(--cp-display); font-weight: 600; font-size: 1.15rem; color: #FBF6EC; }
.cp-footer__about { color: #CDBC9F; font-size: 0.95rem; max-width: 38ch; }
.cp-footer__col h3 { font-family: var(--cp-mono); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cp-accent); margin-bottom: 1rem; font-weight: 400; }
.cp-footer__col a, .cp-footer__col p { display: block; color: #D9CBB3; font-size: 0.95rem; padding: 0.32rem 0; transition: color 200ms ease; }
.cp-footer__col a:hover { color: #FBF6EC; }
.cp-footer__bottom { border-top: 1px solid rgba(235,221,198,0.14); margin-top: 2.6rem; padding-top: 1.5rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.cp-footer__bottom small { color: #B7A684; font-size: 0.82rem; }
.cp-footer__legal { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.cp-footer__legal a { color: #B7A684; font-size: 0.82rem; }
.cp-footer__legal a:hover { color: #FBF6EC; }

/* ---------- back to top ---------- */
.back-to-top {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 90;
  width: 48px; height: 48px; border-radius: 50%; border: none;
  background: var(--cp-primary); color: var(--cp-bg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--cp-shadow-lg), inset 0 0 0 2px rgba(193,150,96,0.4);
  opacity: 0; transform: translateY(10px); transition: opacity 320ms ease, transform 320ms ease, background 220ms ease;
}
.back-to-top.is-visible { opacity: 1; transform: translateY(0); }
.back-to-top:hover { background: #7a5c39; }
.back-to-top[hidden] { display: none; }

/* ---------- fade-in (opacity 1 維持) ---------- */
.fade-in { opacity: 1; transform: none; transition: transform 650ms ease-out; }
html.js-enabled .fade-in:not(.is-in) { transform: translateY(8px); }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .cp-footer__grid { grid-template-columns: 1fr 1fr; }
  .cp-footer__brand-col { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .cp-grid-3 { grid-template-columns: 1fr; }
  .cp-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .cp-message__grid { grid-template-columns: 1fr; }
  .cp-message__photo { max-width: 360px; aspect-ratio: 4/5; }
  .cp-contact-grid { grid-template-columns: 1fr; }
  .cp-split { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .cp-header__cta { display: none; }
  .cp-services-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cp-nav { display: none; }
  .cp-burger { display: flex; }
  .cp-duo__grid { grid-template-columns: 1fr; }
  .cp-duo__col:first-child::after { display: none; }
  .cp-duo__col:first-child { border-bottom: 1px solid var(--cp-line); }
  .cp-stats__grid { grid-template-columns: 1fr 1fr; }
  .cp-footer__grid { grid-template-columns: 1fr; }
  .cp-brand__logo { width: 38px; height: 38px; }
  .cp-brand__name { font-size: 0.85rem; }
  .cp-section, .cp-hero__inner { }
  .cp-map { min-height: 280px; }
  .cp-map iframe { height: 280px; }
  .cp-hero { min-height: 78vh; }
  .cp-hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ai-hp enforced subpage hero backgrounds */
.aihp-subpage-hero--with-image {
  position: relative;
  background-image:
    linear-gradient(135deg, rgba(72, 55, 35, 0.9), rgba(72, 55, 35, 0.72)),
    var(--aihp-subpage-hero-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
  isolation: isolate;
}
.aihp-subpage-hero--with-image > * {
  position: relative;
  z-index: 1;
}