/* ==========================================================================
   法律事務所LPテーマ メインスタイル
   ========================================================================== */

:root{
  --accent: #55642e;
  --accent-dark: #414d22;
  --bg: #faf8f2;
  --text: #2b2a25;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Noto Sans JP',sans-serif;
  -webkit-font-smoothing:antialiased;
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.8;
}
a{text-decoration:none;color:inherit;}
img{max-width:100%;height:auto;display:block;}
input,textarea,button{font-family:inherit;}
::placeholder{color:#b6b2a4;}
.wrap{min-height:100vh;background:var(--bg);color:var(--text);}

@keyframes scrollPulse{
  0%{transform:translateY(0);opacity:.3}
  50%{transform:translateY(8px);opacity:1}
  100%{transform:translateY(0);opacity:.3}
}

.section-head{text-align:center;margin-bottom:58px;}
.section-head h2{
  font-family:'Noto Serif JP',serif;font-weight:600;font-size:32px;letter-spacing:.16em;margin:0;
}
.section-head .en{
  font-family:'Cormorant Garamond',serif;font-size:13px;letter-spacing:.42em;color:#9a9580;margin:10px 0 0;
}
.section-head .line{width:46px;height:1px;background:#bcb6a1;margin:24px auto 0;}

/* ============ HEADER ============ */
.site-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:stretch;justify-content:space-between;
  background:rgba(250,248,242,.96);backdrop-filter:blur(6px);
  border-bottom:1px solid #e7e2d5;min-height:78px;
}
.site-header .logo{display:flex;align-items:center;padding:0 36px;}
.site-header .logo .logo-img{height:42px;width:auto;display:block;}

.main-nav{display:flex;align-items:center;gap:34px;font-size:14px;letter-spacing:.04em;}
.main-nav a{padding:6px 0;border-bottom:1px solid transparent;}
.main-nav a:hover{border-bottom:1px solid var(--accent);}

.header-cta{
  display:flex;align-items:center;gap:10px;background:var(--accent);color:#fff;
  padding:0 38px;font-size:14px;letter-spacing:.06em;
}
.header-cta:hover{background:var(--accent-dark);}

.nav-toggle{display:none;background:none;border:none;padding:0 24px;cursor:pointer;}
.nav-toggle span{display:block;width:26px;height:2px;background:var(--text);margin:5px 0;}

/* ============ HERO ============ */
.hero{display:flex;align-items:center;min-height:620px;position:relative;overflow:hidden;}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
}
.hero-gradient{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,
    #faf8f2 0%,
    #faf8f2 32%,
    rgba(250,248,242,.82) 48%,
    rgba(250,248,242,.35) 68%,
    rgba(250,248,242,0) 88%
  );
}
.hero-content{
  width:52%;display:flex;flex-direction:column;justify-content:center;
  padding:0 64px;position:relative;z-index:2;
}
.hero-title-row{display:flex;gap:22px;}
.hero-bar{width:3px;background:var(--accent);margin-top:6px;}
.hero h1{
  font-family:'Noto Serif JP',serif;font-weight:600;font-size:clamp(30px,3.4vw,52px);
  line-height:1.5;margin:0;letter-spacing:.04em;
}
.hero-lead{margin:34px 0 0 25px;font-size:15px;line-height:2.1;color:#55534b;font-weight:300;}
.hero-cta{
  margin:46px 0 0 25px;display:flex;align-items:center;justify-content:space-between;
  width:330px;max-width:100%;background:var(--accent);color:#fff;padding:21px 32px;
  font-size:15px;letter-spacing:.05em;
}
.hero-cta:hover{background:var(--accent-dark);}
.hero-scroll{
  position:absolute;right:30px;bottom:24px;display:flex;flex-direction:column;
  align-items:center;gap:14px;z-index:3;
}
.hero-scroll span{
  writing-mode:vertical-rl;font-family:'Cormorant Garamond',serif;font-size:12px;
  letter-spacing:.34em;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.hero-scroll .bar{width:1px;height:64px;background:rgba(255,255,255,.7);animation:scrollPulse 2s ease-in-out infinite;}

/* ============ MESSAGE ============ */
.message{
  scroll-margin-top:90px;position:relative;
  background:linear-gradient(135deg,#efe9db 0%,#f4efe3 55%,#efe9db 100%);
  padding:96px 24px 104px;overflow:hidden;
}
.message::before{
  content:"";position:absolute;right:-120px;top:50%;transform:translateY(-50%);
  width:520px;height:520px;border-radius:50%;
  background:repeating-radial-gradient(circle,transparent 0 16px,rgba(120,110,80,.07) 16px 17px);
  pointer-events:none;
}
.message-inner{max-width:760px;margin:0 auto;text-align:center;position:relative;z-index:2;}
.message-inner .lead{
  font-family:'Noto Serif JP',serif;font-weight:500;font-size:clamp(20px,2.4vw,30px);
  line-height:1.9;margin:0;letter-spacing:.05em;color:var(--text);
}
.message-inner .body{
  margin:42px auto 0;max-width:560px;font-size:15px;line-height:2.3;color:#56534a;font-weight:300;
}

/* ============ ATTORNEYS ============ */
.attorneys{scroll-margin-top:90px;padding:96px 24px 104px;}
.attorneys-grid{
  max-width:1080px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:40px;
}
.attorney-card{
  display:flex;gap:28px;background:#fff;border:1px solid #ece7da;padding:26px;
  box-shadow:0 8px 30px rgba(70,65,40,.05);
}
.attorney-photo{
  width:170px;flex-shrink:0;align-self:stretch;background-size:cover;
  background-position:top center;min-height:230px;
}
.attorney-photo.no-img{background:#e2dccd url('') ;}
.attorney-body{flex:1;}
.attorney-name{font-family:'Noto Serif JP',serif;font-weight:600;font-size:25px;margin:0 0 16px;letter-spacing:.06em;}
.attorney-meta{border-top:1px solid #ece7da;padding-top:14px;}
.attorney-meta .label-en{font-family:'Cormorant Garamond',serif;font-size:11px;color:var(--accent);letter-spacing:.18em;margin:0 0 4px;}
.attorney-meta .value{font-size:14px;line-height:1.9;margin:0 0 16px;color:#3f3d36;}
.attorney-meta .value:last-child{margin-bottom:0;}

/* ============ PRACTICE AREAS ============ */
.practice{
  scroll-margin-top:90px;background:linear-gradient(180deg,#f3eee2 0%,#f0ebde 100%);
  padding:96px 24px 104px;
}
.practice-grid{
  max-width:1140px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px;
}
.practice-card{
  background:rgba(255,255,255,.55);border:1px solid #e2dccd;padding:34px 18px 30px;
  text-align:center;display:flex;flex-direction:column;align-items:center;
  transition:background .2s,border-color .2s;
}
.practice-card:hover{background:#fff;border-color:var(--accent);}
.practice-card .icon{color:var(--accent);margin-bottom:18px;display:flex;}
.practice-card .icon svg{width:40px;height:40px;}
.practice-card h3{
  font-family:'Noto Serif JP',serif;font-weight:600;font-size:17px;margin:0 0 12px;letter-spacing:.05em;
}
.practice-card p{font-size:12.5px;line-height:1.9;color:#6a675d;margin:0;font-weight:300;}

/* ============ ACCESS + CONTACT ============ */
.access-section{scroll-margin-top:90px;padding:92px 40px 96px;}
.access-grid{
  max-width:1160px;margin:0 auto;display:grid;
  grid-template-columns:1.05fr 1fr;gap:64px;align-items:start;
}
.access-grid h2,
.contact-block h2{font-family:'Noto Serif JP',serif;font-weight:600;font-size:30px;letter-spacing:.1em;margin:0;}
.access-grid .en,
.contact-block .en{font-family:'Cormorant Garamond',serif;font-size:13px;letter-spacing:.4em;color:#9a9580;margin:8px 0 0;}
.access-grid .line{width:46px;height:1px;background:#bcb6a1;margin:24px 0 32px;}

.access-detail{display:grid;grid-template-columns:1fr 280px;gap:34px;align-items:start;}
.access-detail .office-name{font-family:'Noto Serif JP',serif;font-weight:600;font-size:21px;margin:0 0 20px;letter-spacing:.06em;}
.access-detail .address{font-size:14px;line-height:1.9;margin:0 0 20px;color:#3f3d36;}
.access-info-row{display:flex;gap:18px;font-size:14px;line-height:2.1;color:#3f3d36;}
.access-info-row .label{color:var(--accent);width:34px;flex-shrink:0;}
.access-info-row .note{font-size:12px;color:#7d7a6f;}
.map-link{
  display:inline-flex;align-items:center;gap:10px;margin-top:28px;border:1px solid var(--accent);
  color:var(--accent);padding:13px 24px;font-size:13.5px;letter-spacing:.04em;
}
.map-link:hover{background:var(--accent);color:#fff;}
.access-photo{
  position:relative;align-self:stretch;min-height:340px;background-size:cover;background-position:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.access-photo::before{
  content:"";position:absolute;inset:0;background:rgba(30,28,22,.32);
}
.access-photo span{position:relative;z-index:1;}
.access-photo .ja{font-family:'Noto Serif JP',serif;font-weight:600;font-size:18px;letter-spacing:.18em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.4);}
.access-photo .en2{font-family:'Cormorant Garamond',serif;font-size:10px;letter-spacing:.34em;color:rgba(255,255,255,.85);margin-top:6px;}

.contact-block{scroll-margin-top:90px;}
.contact-block .desc{font-size:13.5px;line-height:2;color:#56534a;margin:26px 0 28px;font-weight:300;}

.contact-success{background:#fff;border:1px solid #d6e0c2;padding:40px 30px;text-align:center;}
.contact-success p:first-child{font-family:'Noto Serif JP',serif;font-size:19px;color:var(--accent);margin:0 0 10px;}
.contact-success p:last-child{font-size:13.5px;color:#56534a;margin:0;line-height:2;}
.contact-error{background:#fff5f3;border:1px solid #e3b6ab;color:#9b3a26;padding:18px 20px;font-size:13.5px;margin-bottom:24px;}

.contact-form .form-row{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:0 18px;margin-bottom:14px;}
.contact-form .form-row.textarea-row{align-items:start;}
.contact-form label{font-size:13.5px;color:#3f3d36;}
.contact-form .form-row.textarea-row label{padding-top:12px;}
.contact-form input,
.contact-form textarea{
  border:1px solid #d8d3c4;background:#fff;padding:12px 14px;font-size:14px;outline:none;width:100%;
}
.contact-form textarea{resize:vertical;line-height:1.7;}
.contact-form input:focus,
.contact-form textarea:focus{border-color:var(--accent);}
.contact-form button{
  width:100%;background:var(--accent);color:#fff;border:none;padding:18px;font-size:15px;
  letter-spacing:.08em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;
  margin-top:10px;
}
.contact-form button:hover{background:var(--accent-dark);}

/* ============ FOOTER ============ */
.site-footer{background:var(--accent);color:#eef0e6;padding:54px 40px 34px;}
.footer-top{
  max-width:1160px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:24px;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.18);
}
.footer-logo{display:flex;align-items:center;background:#faf8f2;padding:8px 16px;border-radius:4px;}
.footer-logo .footer-logo-img{height:36px;width:auto;display:block;}
.footer-nav{display:flex;flex-wrap:wrap;gap:28px;font-size:13.5px;}
.footer-nav a{color:#eef0e6;}
.footer-nav a:hover{color:#fff;}
.site-footer .copyright{
  text-align:center;font-family:'Cormorant Garamond',serif;font-size:12px;letter-spacing:.18em;
  color:rgba(255,255,255,.7);margin:24px 0 0;
}
.site-footer .credit{
  text-align:center;font-family:'Cormorant Garamond',serif;font-size:11px;letter-spacing:.14em;
  color:rgba(255,255,255,.5);margin:8px 0 0;
}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .access-grid{grid-template-columns:1fr;gap:48px;}
}
@media (max-width:880px){
  .main-nav{display:none;}
  .header-cta{display:none;}
  .nav-toggle{display:block;}
  .site-header.nav-open .main-nav{
    display:flex;flex-direction:column;position:absolute;top:78px;left:0;right:0;
    background:#faf8f2;border-bottom:1px solid #e7e2d5;padding:20px 36px;gap:18px;z-index:60;
  }
  .hero{min-height:min(88vw,540px);align-items:flex-end;}
  .hero-content{width:100%;padding:0 28px 40px;}
  .hero-bar{background:#fff;}
  .hero h1{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.3);}
  .hero-lead{color:rgba(255,255,255,.9);margin-top:24px;}
  .hero-gradient{
    background:linear-gradient(180deg,
      rgba(18,17,12,0) 0%,
      rgba(18,17,12,.05) 40%,
      rgba(18,17,12,.58) 70%,
      rgba(18,17,12,.9) 100%
    );
  }
  .hero-cta{width:100%;margin-top:32px;margin-left:0;box-shadow:0 10px 28px rgba(0,0,0,.28);}
  .hero-scroll{display:none;}
  .attorneys-grid{grid-template-columns:1fr;}
  .access-detail{grid-template-columns:1fr;}
  .practice-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:520px){
  .hero{min-height:min(122vw,460px);}
  .hero-content{padding:0 20px 32px;}
  .hero h1{font-size:clamp(22px,7vw,34px);letter-spacing:.02em;}
  .hero-title-row{gap:14px;}
  .hero-gradient{
    background:linear-gradient(180deg,
      rgba(18,17,12,0) 0%,
      rgba(18,17,12,.08) 42%,
      rgba(18,17,12,.65) 72%,
      rgba(18,17,12,.92) 100%
    );
  }
  .site-header .logo{padding:0 18px;}
  .attorney-card{flex-direction:column;}
  .attorney-photo{width:100%;min-height:200px;}
  .access-section{padding:72px 20px 76px;}
  .contact-form .form-row{grid-template-columns:1fr;gap:6px;margin-bottom:18px;}
  .contact-form .form-row.textarea-row label{padding-top:0;}
}