/* ===== COMMON.CSS — 富士家 静的サイト共通スタイル ===== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600;700&family=Shippori+Mincho:wght@400;600;700&family=Noto+Sans+JP:wght@300;400;500&display=swap');

:root {
  --navy:       #0d1b3e;
  --navy-mid:   #1a2f5e;
  --navy-light: #2a4080;
  --gold:       #c9a84c;
  --gold-light: #e8c96e;
  --gold-pale:  #f5e8c0;
  --cream:      #faf6ee;
  --white:      #ffffff;
  --text:       #1a1a2e;
  --text-mid:   #3d3d5c;
  --text-light: #6b6b8a;
  --border:     rgba(201,168,76,0.3);
  --shadow:     0 8px 40px rgba(13,27,62,0.12);
  --shadow-lg:  0 20px 60px rgba(13,27,62,0.18);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'Noto Sans JP',sans-serif;
  background:var(--cream);
  color:var(--text);
  line-height:1.7;
  overflow-x:hidden;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; }

/* ── HEADER ── */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(13,27,62,0.97);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  height:60px; padding:0 32px;
  display:flex; align-items:center; justify-content:space-between;
}
.header-logo {
  font-family:'Shippori Mincho',serif;
  color:var(--gold); font-size:13px; letter-spacing:.08em; line-height:1.4;
  text-decoration:none;
}
.header-logo span { font-size:11px; color:rgba(255,255,255,.5); display:block; }
.header-nav { display:flex; gap:4px; align-items:center; }
.header-nav a {
  color:var(--white); text-decoration:none; font-size:12px;
  padding:6px 11px; border-radius:3px; transition:all .2s; white-space:nowrap;
}
.header-nav a:hover { background:rgba(201,168,76,.2); color:var(--gold-light); }
.header-nav a.current { color:var(--gold); }
.nav-cta {
  background:var(--gold) !important; color:var(--navy) !important;
  font-weight:700 !important; border-radius:4px !important;
}
.nav-cta:hover { background:var(--gold-light) !important; }

/* ── PAGE HERO (inner pages) ── */
.page-hero {
  margin-top:60px;
  background:var(--navy);
  position:relative; overflow:hidden;
  padding:72px 40px 64px;
  text-align:center;
}
.page-hero::before {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 100% at 50% 120%, rgba(201,168,76,.12) 0%, transparent 60%),
    linear-gradient(135deg,#0a1528 0%,#1a2f5e 100%);
}
.page-hero-pattern {
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(45deg,transparent,transparent 40px,rgba(201,168,76,.03) 40px,rgba(201,168,76,.03) 41px),
    repeating-linear-gradient(-45deg,transparent,transparent 40px,rgba(201,168,76,.03) 40px,rgba(201,168,76,.03) 41px);
}
.page-hero-inner { position:relative; max-width:900px; margin:0 auto; }
.page-hero-en {
  font-size:11px; letter-spacing:.25em; color:var(--gold);
  text-transform:uppercase; display:block; margin-bottom:16px;
}
.page-hero h1 {
  font-family:'Shippori Mincho',serif;
  font-size:clamp(24px,4vw,44px);
  color:var(--white); line-height:1.4; margin-bottom:20px;
}
.page-hero h1 em { font-style:normal; color:var(--gold); }
.page-hero p { color:rgba(255,255,255,.7); font-size:15px; max-width:600px; margin:0 auto; line-height:1.9; }
.breadcrumb {
  display:flex; gap:8px; align-items:center;
  font-size:12px; color:rgba(255,255,255,.4);
  margin-top:28px; justify-content:center;
}
.breadcrumb a { color:rgba(255,255,255,.5); text-decoration:none; }
.breadcrumb a:hover { color:var(--gold-light); }
.breadcrumb span { color:rgba(255,255,255,.2); }

/* ── SECTION BASE ── */
section { padding:88px 0; }
.container { max-width:1100px; margin:0 auto; padding:0 40px; }
.section-header { text-align:center; margin-bottom:60px; }
.section-en {
  font-size:11px; letter-spacing:.25em; color:var(--gold);
  text-transform:uppercase; display:block; margin-bottom:12px;
}
.section-title {
  font-family:'Shippori Mincho',serif;
  font-size:clamp(24px,3.5vw,38px);
  color:var(--navy); line-height:1.45;
}
.section-title em { font-style:normal; color:var(--gold); }
.section-title.light { color:var(--white); }
.section-desc { margin-top:18px; color:var(--text-mid); font-size:15px; max-width:620px; margin-left:auto; margin-right:auto; }
.section-desc.light { color:rgba(255,255,255,.65); }
.gold-line { width:48px; height:2px; background:var(--gold); margin:20px auto 0; }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; border-radius:4px;
  font-size:15px; font-weight:700; letter-spacing:.05em;
  padding:15px 32px; transition:all .25s; white-space:nowrap;
}
.btn-gold { background:var(--gold); color:var(--navy); }
.btn-gold:hover { background:var(--gold-light); transform:translateY(-2px); box-shadow:0 8px 24px rgba(201,168,76,.4); }
.btn-outline { background:transparent; color:var(--white); border:1px solid rgba(255,255,255,.35); }
.btn-outline:hover { border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
.btn-navy { background:var(--navy); color:var(--white); }
.btn-navy:hover { background:var(--navy-mid); transform:translateY(-2px); }

/* ── GOLD LABEL ── */
.gold-label {
  display:inline-block; font-size:11px;
  background:var(--gold); color:var(--navy);
  padding:3px 10px; border-radius:2px; font-weight:700; letter-spacing:.05em;
}

/* ── PRICE TABLE ── */
.price-table { width:100%; border-collapse:collapse; font-size:14px; }
.price-table thead th {
  background:var(--navy); color:var(--gold-light);
  padding:13px 18px; font-family:'Shippori Mincho',serif;
  font-weight:600; text-align:left; white-space:nowrap;
}
.price-table tbody td {
  padding:13px 18px; border-bottom:1px solid rgba(0,0,0,.06); color:var(--text-mid);
  vertical-align:middle;
}
.price-table tbody tr:last-child td { border-bottom:none; }
.price-table tbody tr:nth-child(even) td { background:var(--cream); }
.price-table td.price-val {
  font-family:'Shippori Mincho',serif; font-size:19px;
  color:var(--navy); font-weight:700; white-space:nowrap; text-align:right;
}
.price-table-wrap {
  background:var(--white); border-radius:8px;
  overflow:hidden; box-shadow:var(--shadow);
}
.price-note {
  margin-top:14px; font-size:12px; color:var(--text-light);
  background:var(--cream); padding:10px 16px;
  border-radius:4px; border-left:3px solid var(--gold); line-height:1.8;
}

/* ── PHOTO GRID ── */
.photo-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.photo-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.photo-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.photo-item { border-radius:6px; overflow:hidden; }
.photo-item img { width:100%; height:220px; object-fit:cover; transition:transform .4s; }
.photo-item:hover img { transform:scale(1.04); }

/* ── FLOW STEPS ── */
.flow-wrap {
  display:flex; position:relative;
}
.flow-wrap::before {
  content:''; position:absolute;
  top:28px; left:28px; right:28px;
  height:1px; background:linear-gradient(90deg,var(--gold),rgba(201,168,76,.2));
}
.flow-step { flex:1; text-align:center; padding:0 12px; position:relative; }
.flow-circle {
  width:56px; height:56px; border-radius:50%;
  background:var(--gold); color:var(--navy);
  font-family:'Shippori Mincho',serif; font-size:20px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 18px; position:relative; z-index:1;
}
.flow-step h4 {
  font-family:'Shippori Mincho',serif;
  color:var(--gold-light); font-size:15px; margin-bottom:8px;
}
.flow-step p { font-size:13px; color:rgba(255,255,255,.6); line-height:1.75; }

/* ── FAQ ── */
.faq-list { display:flex; flex-direction:column; gap:12px; }
.faq-item { border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.faq-q {
  padding:18px 24px; background:var(--cream);
  display:flex; align-items:flex-start; gap:12px;
  cursor:pointer; font-size:14px; font-weight:500; color:var(--navy);
  list-style:none;
}
.faq-q::marker,.faq-q::-webkit-details-marker { display:none; }
.faq-q-mark { font-family:'Shippori Mincho',serif; font-size:18px; color:var(--gold); flex-shrink:0; line-height:1; }
.faq-q-arrow { margin-left:auto; font-size:11px; color:var(--text-light); transition:transform .2s; flex-shrink:0; }
details[open] .faq-q-arrow { transform:rotate(180deg); }
.faq-a {
  padding:16px 24px 18px 52px; font-size:14px; color:var(--text-mid);
  line-height:1.85; border-top:1px solid var(--border); background:var(--white);
}

/* ── CTA BANNER ── */
.cta-banner {
  background:var(--navy); padding:64px 40px; text-align:center;
  position:relative; overflow:hidden;
}
.cta-banner::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 100% at 50% 120%,rgba(201,168,76,.14) 0%,transparent 60%);
}
.cta-banner-inner { position:relative; max-width:800px; margin:0 auto; }
.cta-banner h2 {
  font-family:'Shippori Mincho',serif;
  font-size:clamp(22px,3.5vw,38px);
  color:var(--white); margin-bottom:14px; line-height:1.45;
}
.cta-banner h2 em { font-style:normal; color:var(--gold); }
.cta-banner p { color:rgba(255,255,255,.65); font-size:15px; margin-bottom:40px; line-height:1.85; }
.cta-btn-row { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.cta-tel { color:rgba(255,255,255,.5); font-size:13px; margin-top:22px; }

/* ── FOOTER ── */
.site-footer {
  background:#060e1e; padding:44px 40px; text-align:center;
}
.footer-logo { font-family:'Shippori Mincho',serif; color:var(--gold); font-size:15px; margin-bottom:18px; }
.footer-nav { display:flex; justify-content:center; gap:24px; flex-wrap:wrap; margin-bottom:20px; }
.footer-nav a { color:rgba(255,255,255,.4); text-decoration:none; font-size:13px; transition:color .2s; }
.footer-nav a:hover { color:var(--gold-light); }
.footer-copy { font-size:12px; color:rgba(255,255,255,.2); }

/* ── FLOAT LINE ── */
.float-line {
  position:fixed; bottom:24px; right:24px; z-index:999;
  background:#06c755; color:white; text-decoration:none;
  display:flex; align-items:center; gap:9px;
  padding:13px 22px; border-radius:50px;
  font-size:14px; font-weight:700;
  box-shadow:0 6px 24px rgba(6,199,85,.4); transition:all .25s;
}
.float-line:hover { transform:translateY(-3px); box-shadow:0 10px 32px rgba(6,199,85,.5); }

/* ── SCROLL REVEAL ── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── SECTION BG VARIANTS ── */
.bg-white  { background:var(--white); }
.bg-cream  { background:var(--cream); }
.bg-navy   { background:var(--navy); position:relative; overflow:hidden; }
.bg-navy::before {
  content:''; position:absolute; inset:0;
  background-image:repeating-linear-gradient(90deg,transparent,transparent 80px,rgba(255,255,255,.02) 80px,rgba(255,255,255,.02) 81px);
}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  section { padding:60px 0; }
  .container { padding:0 20px; }
  .header-nav { display:none; }
  .page-hero { padding:56px 20px 48px; }
  .photo-grid-2,.photo-grid-3,.photo-grid-4 { grid-template-columns:1fr 1fr; gap:10px; }
  .photo-grid-4 { grid-template-columns:repeat(2,1fr); }
  .flow-wrap { flex-direction:column; gap:24px; }
  .flow-wrap::before { display:none; }
  .cta-btn-row { flex-direction:column; align-items:center; }
  .float-line { bottom:16px; right:16px; padding:11px 18px; font-size:13px; }
}
@media(max-width:480px){
  .photo-grid-2,.photo-grid-3 { grid-template-columns:1fr; }
}