/* ==========================================================================
   K9 Harmony — Base / Reset / Utilities (from v5 mockup)
   ========================================================================== */

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font-sans-jp);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--c-base-washi);
  color: var(--c-text-sumi);
  -webkit-font-smoothing: antialiased;
}

/* タイポスケール基準（design-spec.md §17.8.4） */
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 500; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 500; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 500; }
.caption { font-size: var(--fs-caption); line-height: var(--lh-caption); }

img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
ul, ol { list-style:none; }
/* 法務ページ（.legal-section）だけ条文の記号を復活。項＝番号(条文が「第○条第○項」で相互参照)／小項目＝中黒(・)＝正本の使い分けを踏襲(特商法セルのリテラル「・」に合わせる)。2026-07-06 */
.legal-section ol { list-style: decimal inside; }
.legal-section ul { list-style: none; }
.legal-section ul > li::before { content: "・"; }

/* Placeholder */
.ph {
  width:100%; height:100%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(135deg,#dde8e8,#c8dcdc);
  color:var(--c-sub-deep-ocean);
  border-radius:inherit;
  overflow:hidden;
  position:relative;
}
.ph img {
  width:100%; height:100%;
  object-fit:cover;
  position:absolute;
  inset:0;
}
.ph i { font-size:40px; opacity:0.3; font-style:normal; }
.ph span { font-size:11px; letter-spacing:0.08em; opacity:0.4; font-family:var(--font-sans-en); }
.ph.warm { background:linear-gradient(135deg,#f0e4d8,#e8d0c0); color:var(--c-accent-copper); }
.ph.dark { background:linear-gradient(160deg,#4a8a8a,#2F5D62,#1d3d42); color:rgba(255,255,255,0.4); }

/* Section base */
.sec { padding:64px 80px; }
.sec.compact { padding:48px 80px; }

/* Premium section base */
.sec-premium {
  padding: var(--sec-pad-desktop, 120px) 80px;
  position: relative;
  overflow: hidden;
}
/* Eyebrow label */
.eyebrow {
  font-family:var(--font-sans-en); font-size:11px;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--c-accent-copper);
  display:block; position:relative;
  padding-top:3px;
  margin:3px 0 12px;
}
.eyebrow::before {
  content:''; position:absolute; top:0; left:0;
  width:20px; height:1px;
  background:var(--c-accent-copper); display:block;
}
.eyebrow.lt { color:rgba(200,122,86,0.7); }
.eyebrow.lt::before { background:rgba(200,122,86,0.7); }

/* Section heading */
.sec-h {
  font-family:var(--font-serif-jp);
  font-size:clamp(22px,3vw,36px); font-weight:500;
  line-height:1.6; color:var(--c-sub-deep-ocean);
  margin-bottom:40px;
}
.sec-h.wh { color:white; }
.sec-h em  { font-style:normal; color:var(--c-main-turquoise); }
.sec-h .cu { color:var(--c-accent-copper); }

/* Buttons */
.btn-primary {
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--c-main-turquoise); color:white;
  padding:17px 32px; border-radius:var(--radius-md);
  font-size:15px; font-weight:500; text-decoration:none;
  margin-bottom:10px;
  box-shadow:0 8px 28px rgba(87,195,194,0.35);
  transition:background var(--t),transform var(--t),box-shadow var(--t);
}
.btn-primary:hover {
  background:var(--c-sub-deep-ocean);
  transform:translateY(-2px);
  box-shadow:0 14px 36px rgba(47,93,98,0.3);
}
.btn-primary .bdg {
  background:rgba(255,255,255,0.25);
  font-size:10px; padding:2px 8px; border-radius:4px;
}

.btn-ghost {
  display:block; text-align:center;
  color:var(--c-sub-deep-ocean); font-size:13px;
  text-decoration:none; padding:11px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(47,93,98,0.2);
  transition:background var(--t),border-color var(--t);
}
.btn-ghost:hover {
  background:var(--c-bg-mint);
  border-color:var(--c-main-turquoise);
}

/* Animations */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Responsive base */
@media (max-width:1023px) {
  .sec { padding:48px 40px; }
  .sec.compact { padding:36px 40px; }
  .sec-premium { padding: var(--sec-pad-tablet, 80px) 40px; }
}
@media (max-width:767px) {
  .sec { padding:40px 20px; }
  .sec.compact { padding:32px 20px; }
  .sec-premium { padding: var(--sec-pad-mobile, 56px) 20px; }
}