@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Noto+Serif+JP:wght@200;300;400&family=Noto+Sans+JP:wght@300;400&family=Jost:wght@200;300;400&display=swap");

/* =============================================================
   SAC ACTIVE — STYLESHEET
   Swager & Co. K.K.
   ============================================================= */

/* ===== LANG TOGGLE ===== */
[data-en] { display: none; }
body.lang-en [data-ja] { display: none; }
body.lang-en [data-en] { display: revert; }

:root {
    --bg:     #F5F3F0;
    --bg-alt: #EEECEA;
    --ink:    #1C1C1C;
    --mid:    #3A3A3A;
    --muted:  #7A7A7A;
    --faint:  #ABABAB;
    --accent: #C0392B;
    --line:   rgba(28,28,28,0.1);
    --cream:  #F5F3F0;
  }
  *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { background:var(--bg); color:var(--ink); font-family:'Noto Sans JP',sans-serif; font-weight:300; overflow-x:hidden; line-height:1.8; }

  .lang-bar { position:fixed; top:0; left:0; right:0; z-index:200; display:flex; justify-content:flex-end; align-items:center; padding:0.65rem 3rem; background:var(--bg); border-bottom:1px solid var(--line); }
  .lang-toggle { display:flex; border:1px solid rgba(28,28,28,0.2); }
  .lang-btn { padding:0.28rem 0.9rem; background:none; border:none; cursor:pointer; font-family:'Noto Sans JP',sans-serif; font-size:0.63rem; font-weight:300; letter-spacing:2px; color:var(--faint); transition:all 0.2s; }
  .lang-btn.active { background:var(--accent); color:#F5F3F0; }

  nav { position:fixed; top:35px; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:1.1rem 3rem; background:rgba(245,243,240,0.96); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
  .nav-name { font-family:'Cormorant Garamond',serif; font-size:1.05rem; font-weight:400; letter-spacing:3px; text-transform:uppercase; color:var(--ink); text-decoration:none; }
  .nav-links { display:flex; gap:2.5rem; list-style:none; }
  .nav-links a { font-size:0.78rem; color:var(--faint); text-decoration:none; transition:color 0.2s; letter-spacing:0.05em; }
  .nav-links a:hover { color:var(--ink); }
  .nav-cta { font-size:0.75rem; color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent); padding-bottom:1px; transition:opacity 0.2s; letter-spacing:0.05em; }
  .nav-cta:hover { opacity:0.6; }

  .hero { min-height:60vh; display:flex; flex-direction:column; justify-content:flex-end; padding:0 3rem 5rem; background:var(--bg); position:relative; overflow:hidden; }
  .hero::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 75% 30%, rgba(28,28,28,0.03) 0%, transparent 60%); }
  .hero-vline { position:absolute; top:112px; right:3rem; width:1px; height:140px; background:linear-gradient(to bottom,transparent,rgba(28,28,28,0.15)); }
  .hero-inner { position:relative; z-index:2; display:flex; flex-direction:column; gap:3rem; padding-top:100px; }
  .hero-eyebrow { font-size:0.7rem; letter-spacing:3px; color:var(--accent); margin-bottom:2rem; opacity:0; animation:up 1s ease forwards 0.2s; }
  .hero-h1 { font-family:'Noto Serif JP',serif; font-size:clamp(2rem,3.8vw,4rem); font-weight:200; line-height:1.4; letter-spacing:0.05em; margin-bottom:2.5rem; opacity:0; animation:up 1s ease forwards 0.4s; color:var(--ink); }
  .hero-h1 em { font-style:normal; color:var(--accent); }
  .hero-right { opacity:0; animation:up 1s ease forwards 0.5s; }
  .hero-list-label { font-size:0.68rem; letter-spacing:3px; color:var(--accent); margin-bottom:1.8rem; }
  .hero-list { list-style:none; display:flex; flex-direction:column; border-top:1px solid var(--line); }
  .hero-list li { font-size:0.86rem; line-height:1.85; color:var(--muted); padding:1.4rem 0; border-bottom:1px solid var(--line); }
  @keyframes up { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

  .divider { height:1px; background:var(--line); margin:0 3rem; }
  .sec { padding:6.5rem 3rem; }
  .sec.bg { background:var(--bg-alt); }
  .sec.bg .sec-tag { color:var(--faint); }
  .sec.bg .about-h2 { color:var(--ink); }
  .sec.bg .about-p { color:var(--muted); }
  .sec.bg .svc-list { border-top:1px solid var(--line); }
  .sec.bg .svc-row { border-bottom:1px solid var(--line); }
  .sec.bg .svc-row:hover { background:rgba(28,28,28,0.04); }
  .sec.bg .svc-num { color:var(--faint); }
  .sec.bg .svc-name { color:var(--ink); }
  .sec.bg .svc-sub { color:var(--muted); }
  .sec.bg .svc-desc { color:var(--muted); }
  .sec.bg .svc-tag { color:var(--faint); border-color:var(--line); }
  .sec-tag { font-size:0.65rem; letter-spacing:3px; color:var(--faint); margin-bottom:2.5rem; }

  .about-grid { display:flex; flex-direction:column; gap:3rem; }
  .about-h2 { font-family:'Noto Serif JP',serif; font-size:clamp(1.6rem,2.8vw,2.4rem); font-weight:300; line-height:1.6; margin-bottom:2rem; letter-spacing:0.05em; color:var(--ink); }
  .about-h2 em { font-style:normal; color:var(--muted); }
  .about-p { font-size:0.9rem; line-height:2.3; color:var(--muted); margin-bottom:1.6rem; }
  .about-facts { display:flex; flex-direction:column; gap:1px; }
  .fact { padding:1.5rem 1.8rem; background:#fff; border-left:2px solid var(--accent); }
  .fact-label { font-size:0.6rem; letter-spacing:3px; color:var(--faint); margin-bottom:0.5rem; }
  .fact-val { font-size:0.88rem; line-height:1.7; color:var(--ink); }

  .svc-list { border-top:1px solid var(--line); margin-top:2rem; }
  .svc-row { display:flex; align-items:center; padding:1.8rem 0; border-bottom:1px solid var(--line); transition:background 0.2s; }
  .svc-row:hover { background:rgba(28,28,28,0.03); margin:0 -0.5rem; padding:2.2rem 0.5rem; }
  .svc-num { font-family:'Cormorant Garamond',serif; font-size:0.85rem; color:var(--faint); padding-top:3px; }
  .svc-name { font-size:1.05rem; font-weight:400; color:var(--ink); margin-bottom:0.2rem; letter-spacing:0.05em; }
  .svc-sub { font-size:0.7rem; color:var(--muted); font-family:'Jost',sans-serif; letter-spacing:1px; }
  .svc-desc { font-size:0.8rem; line-height:2.1; color:var(--muted); }
  .svc-tag { font-size:0.62rem; letter-spacing:2px; color:var(--faint); border:1px solid var(--line); padding:0.28rem 0.65rem; display:inline-block; }

  .contact-grid { display:grid; grid-template-columns:1fr 2fr; gap:7rem; align-items:start; }
  .contact-h2 { font-family:'Noto Serif JP',serif; font-size:clamp(1.6rem,2.8vw,2.4rem); font-weight:300; line-height:1.6; margin-bottom:1.8rem; letter-spacing:0.05em; color:var(--ink); }
  .contact-h2 em { font-style:normal; color:var(--muted); }
  .contact-p { font-size:0.9rem; line-height:2.3; color:var(--muted); margin-bottom:2.5rem; }
  .contact-details { display:flex; flex-direction:column; gap:0.9rem; }
  .contact-row { display:flex; gap:1.2rem; font-size:0.82rem; color:var(--muted); }
  .contact-key { font-size:0.6rem; letter-spacing:2px; color:var(--faint); white-space:nowrap; min-width:52px; padding-top:3px; }
  .form { display:flex; flex-direction:column; }
  .f-field { border-bottom:1px solid var(--line); padding:1.3rem 0; }
  .f-label { display:block; font-size:0.6rem; letter-spacing:3px; color:var(--faint); margin-bottom:0.45rem; }
  .f-field input, .f-field select, .f-field textarea { width:100%; background:none; border:none; outline:none; font-family:'Noto Sans JP',sans-serif; font-size:0.88rem; font-weight:300; color:var(--ink); appearance:none; }
  .f-field input::placeholder, .f-field textarea::placeholder { color:var(--faint); }
  .f-field select { cursor:pointer; color:var(--muted); }
  .f-field textarea { resize:none; min-height:80px; }
  .f-foot { margin-top:2.2rem; display:flex; align-items:center; gap:2rem; flex-wrap:wrap; }
  .f-submit { background:var(--ink); color:#F5F3F0; border:none; padding:0.95rem 2.4rem; font-family:'Noto Sans JP',sans-serif; font-size:0.75rem; font-weight:400; letter-spacing:0.1em; cursor:pointer; transition:opacity 0.2s,transform 0.2s; }
  .f-submit:hover { opacity:0.7; transform:translateY(-1px); }
  .btn { display:inline-block; padding:0.9rem 2.4rem; background:var(--ink); color:#F5F3F0; font-family:'Noto Sans JP',sans-serif; font-size:0.75rem; font-weight:400; letter-spacing:0.1em; text-decoration:none; transition:opacity 0.2s,transform 0.2s; }
  .btn:hover { opacity:0.7; transform:translateY(-1px); }
  .f-note { font-size:0.72rem; color:var(--faint); line-height:1.8; }

  footer { padding:2rem 3rem; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); background:var(--bg); }
  .footer-name { font-family:'Cormorant Garamond',serif; font-size:0.9rem; letter-spacing:3px; text-transform:uppercase; color:var(--faint); }
  .footer-links { display:flex; gap:2rem; }
  .footer-links a { font-size:0.68rem; letter-spacing:1px; color:var(--muted); text-decoration:none; transition:color 0.2s; }
  .footer-links a:hover { color:var(--ink); }
  .footer-ig { display: flex; align-items: center; gap: 5px; }
  .footer-copy { font-size:0.62rem; letter-spacing:1px; color:var(--faint); }

  .about-p small { font-size: 0.65rem; color: var(--faint); letter-spacing: 0.05em; line-height: 1.6; }
  .about-photo-wrap { margin-bottom: 20px; }
  .about-photo-placeholder {
    width: 100%;
    aspect-ratio: 3/4;
    background: var(--bg-alt);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--faint);
  }
  .about-badge-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 24px;
  }
  .about-badge-img {
    height: 80px;
    width: auto;
    mix-blend-mode: multiply;
    flex-shrink: 0;
    transition: opacity 0.2s;
  }
  .about-badge-img:hover { opacity: 0.75; }
  .fact-badge { display: flex; flex-direction: column; gap: 10px; }
  .fact-badge-inner { display: flex; align-items: center; gap: 16px; }
  .fact-badge-link { flex-shrink: 0; }

  .pkg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
  .pkg-card { background: #fff; border: 1px solid var(--line); padding: 40px 36px; }
  .pkg-tag { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; }
  .pkg-price { font-family: 'Cormorant Garamond', serif; font-size: 3rem; font-weight: 300; color: var(--ink); line-height: 1; margin-bottom: 6px; }
  .pkg-per { font-size: 0.75rem; color: var(--faint); letter-spacing: 0.08em; margin-bottom: 28px; }
  .pkg-divider { height: 1px; background: var(--line); margin-bottom: 24px; }
  .pkg-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .pkg-list li { font-size: 0.85rem; color: var(--muted); padding-left: 16px; position: relative; line-height: 1.7; }
  .pkg-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 4px; height: 4px; background: var(--accent); border-radius: 50%; }
  .pkg-note { font-size: 0.72rem; color: var(--faint); line-height: 1.8; margin-top: 8px; }

  .reveal.in { opacity:1; transform:translateY(0); }
  .d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s}

  @media(max-width:860px){
    .lang-bar{padding:.6rem 1.5rem} nav{padding:1rem 1.5rem;top:33px} .nav-links{display:none}
    .hero{padding:88px 1.5rem 4rem;min-height:auto}
    .hero-inner{grid-template-columns:1fr;gap:3rem}
    .sec{padding:4.5rem 1.5rem} .divider{margin:0 1.5rem}
    .about-grid,.contact-grid{grid-template-columns:1fr;gap:2.5rem}
    .svc-row{grid-template-columns:40px 1fr;gap:1rem} .svc-desc,.svc-tag{display:none}
    footer{flex-direction:column;gap:.7rem;text-align:center;padding:1.8rem 1.5rem}
  }
/* ===== FORM (PHP版) ===== */
.f-input,
.f-textarea {
  display: block;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  outline: none;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--ink);
  padding: 14px 0;
  appearance: none;
  transition: border-color 0.2s;
}
.f-input:focus,
.f-textarea:focus { border-color: var(--accent); }
.f-input::placeholder { color: var(--faint); }
.f-textarea { resize: none; min-height: 80px; }
.sa-required { color: var(--accent); }

/* ===== SUCCESS / ERROR ===== */
.sa-form-success {
  padding: 40px;
  border: 1px solid var(--line);
  text-align: center;
}
.sa-form-success-icon {
  width: 48px; height: 48px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  color: var(--accent);
  margin: 0 auto 16px;
}
.sa-form-success-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--ink);
  margin-bottom: 8px;
}
.sa-form-success-body {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.8;
}
.sa-form-error {
  padding: 12px 16px;
  background: rgba(192,57,43,0.06);
  border-left: 2px solid var(--accent);
  font-size: 0.85rem;
  color: var(--accent);
  line-height: 1.6;
  margin-bottom: 20px;
}