@charset "UTF-8";
/* ============================================================
   喜納行政書士事務所 — style.css
   COLOR  ai(藍) #16273F / brass(金茶) #927434 / seal(朱) #A5372B
          washi #ECE5D5 / surface #F6F1E6 / line #C9BFA6
   FONT   明朝 Noto Serif JP ／ 本文 BIZ UDPGothic
   ============================================================ */

:root{
  --ai:#16273F;
  --brass:#927434;
  --brass-d:#7a5f28;
  --seal:#A5372B;
  --washi:#ECE5D5;
  --surface:#F6F1E6;
  --line:#C9BFA6;
  --line-d:#B4A886;
  --ink:#23303F;
  --sub:#5A5346;
  --serif:'Noto Serif JP', serif;
  --sans:'BIZ UDPGothic', 'Noto Sans JP', sans-serif;
  --wrap:1160px;
  --pad:clamp(18px, 4vw, 44px);
  --sec-y:clamp(48px, 6vw, 88px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:96px; }

body{
  margin:0;
  background:var(--washi);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.95;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:inherit; text-decoration:none; transition:color .2s ease, background-color .2s ease, border-color .2s ease; }
a:hover{ color:var(--brass); }
button{ font:inherit; transition:background-color .2s ease, color .2s ease, border-color .2s ease; }
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3{ margin:0; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

/* ---------- 共通パーツ ---------- */
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:var(--sec-y); border-bottom:2px solid var(--ai); }
.section--tint{ background:var(--surface); }
.rule-top{ height:6px; background:var(--ai); border-bottom:2px solid var(--brass); }

.eyebrow{
  font-family:var(--serif); font-size:13px; font-weight:600;
  letter-spacing:.24em; color:var(--brass);
}
.sec-head{ text-align:center; }
.sec-title{
  font-family:var(--serif); font-weight:700; color:var(--ai);
  font-size:clamp(28px, 3.6vw, 40px); letter-spacing:.1em; margin-top:8px;
}
.sec-mark{ width:44px; height:2px; background:var(--brass); margin:16px auto 0; }
.sec-lead{ font-size:16px; color:var(--sub); margin:16px auto 0; max-width:33em; line-height:1.95; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--serif); font-weight:600; letter-spacing:.06em;
  white-space:nowrap; border:none; cursor:pointer;
}
.btn--brass{ background:var(--brass); color:#fff; font-size:17px; padding:15px 30px; }
.btn--brass:hover{ background:var(--brass-d); color:#fff; }
.btn--outline{ background:transparent; border:1.5px solid var(--ai); color:var(--ai); font-size:17px; padding:15px 28px; }
.btn--outline:hover{ background:var(--ai); color:#fff; }
.btn--ai{ background:var(--ai); color:#fff; font-size:16px; padding:14px; width:100%; }
.btn--ai:hover{ background:#0f1d33; color:#fff; }
.btn--sm{ font-size:15px; padding:12px 22px; }

.vtext{ writing-mode:vertical-rl; text-orientation:upright; }

/* ---------- 連絡先バー ---------- */
.topbar{ background:var(--ai); color:#d3d9e4; }
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-block:8px; font-size:13px; letter-spacing:.08em;
}
.topbar__label{ font-family:var(--serif); }
.topbar__meta{ display:flex; align-items:center; gap:20px; }
.topbar__tel{ display:inline-flex; align-items:center; gap:7px; }

/* ---------- ヘッダー ---------- */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(236,229,213,.95);
  backdrop-filter:blur(8px);
  border-bottom:2px solid var(--ai);
}
.header__inner{ display:flex; align-items:center; gap:22px; padding-block:12px; }
.logo{ display:flex; align-items:center; gap:14px; white-space:nowrap; }
.logo__seal{
  flex:none; width:46px; height:46px;
  border:2px solid var(--seal); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-weight:700; font-size:20px; color:var(--seal); line-height:1;
}
.logo__text{ display:flex; flex-direction:column; line-height:1.3; }
.logo__en{ font-size:10px; letter-spacing:.34em; color:var(--brass); font-weight:700; }
.logo__ja{ font-family:var(--serif); font-weight:700; font-size:21px; color:var(--ai); letter-spacing:.1em; }

.nav{
  display:flex; gap:26px; margin-left:auto; white-space:nowrap;
  font-family:var(--serif); font-weight:600; font-size:15px; letter-spacing:.06em; color:var(--ai);
}
.burger{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--line-d); color:var(--ai); cursor:pointer; padding:0;
}
.mnav{
  display:none; flex-direction:column;
  position:absolute; top:100%; left:0; right:0;
  background:var(--surface); border-bottom:2px solid var(--ai);
  padding:0 var(--pad); box-shadow:0 12px 24px rgba(22,39,63,.16);
  max-height:0; overflow:hidden; opacity:0; visibility:hidden;
  transition:max-height .32s cubic-bezier(.4,0,.2,1),
             padding-block .32s cubic-bezier(.4,0,.2,1),
             opacity .22s ease, visibility .32s;
}
.mnav.is-open{
  max-height:76vh; overflow-y:auto;
  padding-block:6px 14px; opacity:1; visibility:visible;
}
.mnav a{ padding:14px 4px; font-family:var(--serif); font-weight:600; border-bottom:1px solid var(--line); }
.mnav a:last-child{ border-bottom:none; color:var(--brass); }

/* ---------- ヒーロー ---------- */
.hero{ border-bottom:2px solid var(--ai); }
.hero__inner{
  display:flex; flex-wrap:wrap; gap:clamp(34px, 5vw, 60px);
  align-items:stretch; padding-block:clamp(46px, 6vw, 88px);
}
.hero__vertical{ flex:none; display:flex; gap:26px; padding-right:8px; }
.hero__vtitle{
  font-family:var(--serif); font-weight:700; color:var(--ai);
  font-size:clamp(40px, 5vw, 60px); line-height:1.5; letter-spacing:.12em;
}
.hero__vsub{
  font-family:var(--serif); font-weight:500; color:var(--sub);
  font-size:16px; line-height:1.9; letter-spacing:.34em; align-self:flex-end;
}
.hero__body{ flex:1 1 420px; min-width:280px; display:flex; flex-direction:column; }
.hero__kicker{ display:flex; align-items:center; gap:12px; }
.hero__kicker span:first-child{ width:34px; height:1px; background:var(--brass); }
.hero__kicker span:last-child{ font-family:var(--serif); font-size:13px; font-weight:600; letter-spacing:.18em; color:var(--brass); }
.hero__title{
  font-family:var(--serif); font-weight:700; color:var(--ai);
  font-size:clamp(30px, 4.4vw, 46px); line-height:1.5; letter-spacing:.04em; margin-top:22px;
}
.hero__title span{ white-space:nowrap; }
.hero__text{ font-size:clamp(16.5px, 1.3vw, 18px); line-height:2.05; color:var(--sub); max-width:34em; margin-top:22px; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }

/* 相談窓口カード */
.deskcard{ flex:0 1 300px; min-width:260px; border:2px solid var(--ai); background:var(--surface); display:flex; flex-direction:column; }
.deskcard__head{
  padding:14px 22px; background:var(--ai); color:#e7ddc8;
  font-family:var(--serif); font-weight:600; font-size:15px; letter-spacing:.14em;
  display:flex; align-items:center; justify-content:space-between;
}
.deskcard__head span:last-child{ font-size:11px; letter-spacing:.2em; color:#b9c2d3; }
.deskcard__body{ padding:24px; flex:1; display:flex; flex-direction:column; }
.deskcard__label{ font-size:13px; color:var(--sub); }
.deskcard__tel{ font-family:var(--serif); font-weight:700; color:var(--ai); font-size:27px; letter-spacing:.02em; margin-top:4px; }
.deskcard__mail{ font-family:var(--serif); font-weight:600; color:var(--ai); font-size:16px; word-break:break-all; }
.deskcard__btn{ margin-top:auto; }
.deskcard__note{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:13px; line-height:1.85; color:var(--sub); }

/* ---------- ごあいさつ ---------- */
.greet{ border-bottom:1px solid var(--line); background:var(--surface); }
.greet__inner{
  display:flex; flex-wrap:wrap; gap:clamp(30px, 5vw, 64px);
  align-items:center; padding-block:clamp(44px, 5vw, 72px);
}
.greet__head{ flex:0 1 260px; min-width:220px; }
.greet__title{ font-family:var(--serif); font-weight:700; color:var(--ai); font-size:clamp(24px, 3vw, 32px); letter-spacing:.06em; margin-top:8px; }
.greet__sign{ font-family:var(--serif); color:var(--sub); font-size:15px; letter-spacing:.08em; margin-top:14px; }
.greet__text{
  flex:1 1 420px; min-width:280px; font-family:var(--serif);
  font-size:clamp(17px, 1.4vw, 20px); line-height:2.15; letter-spacing:.02em; color:var(--ink);
}

/* ---------- 業務案内 ---------- */
.services{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr));
  gap:1px; background:var(--line); border:2px solid var(--ai); margin-top:40px;
}
.service{ background:var(--surface); padding:24px 26px; display:flex; gap:18px; align-items:baseline; }
.service__no{ flex:none; font-family:var(--serif); font-weight:600; color:var(--seal); font-size:22px; line-height:1.2; width:34px; text-align:center; }
.service__title{
  flex:1; border-left:1px solid var(--line-d); padding-left:18px;
  font-family:var(--serif); font-weight:600; color:var(--ai);
  font-size:17.5px; line-height:1.6; letter-spacing:.03em;
}
.services__note{ font-size:15px; color:var(--sub); margin-top:20px; text-align:center; }

/* ---------- 相談の流れ ---------- */
.flow{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  margin-top:44px; border-top:2px solid var(--ai); border-bottom:2px solid var(--ai);
}
.flow__item{ padding:26px 24px; border-right:1px solid var(--line); }
.flow__item:last-child{ border-right:none; }
.flow__num{ display:flex; align-items:baseline; gap:10px; }
.flow__ord{ font-family:var(--serif); font-size:15px; font-weight:600; color:var(--brass); letter-spacing:.1em; }
.flow__kanji{ font-family:var(--serif); font-size:40px; font-weight:600; color:var(--ai); line-height:1; }
.flow__title{ font-family:var(--serif); font-weight:600; color:var(--ai); font-size:19px; margin:14px 0 8px; letter-spacing:.04em; }
.flow__text{ font-size:14.5px; line-height:1.9; color:var(--sub); }

/* ---------- ブログ ---------- */
.blog__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.blog__lead{ font-size:15px; color:var(--sub); margin-top:10px; }
.blog__more{ font-family:var(--serif); font-weight:600; font-size:15px; color:var(--ai); display:inline-flex; align-items:center; gap:8px; letter-spacing:.06em; }
.blogcard{
  margin-top:28px; border:2px solid var(--ai); background:var(--surface);
  padding:clamp(24px, 3vw, 34px); display:flex; flex-wrap:wrap; gap:24px;
  align-items:center; justify-content:space-between; color:inherit;
}
.blogcard:hover{ background:var(--washi); color:inherit; }
.blogcard__main{ display:flex; align-items:center; gap:20px; min-width:260px; flex:1; }
.blogcard__icon{ flex:none; color:var(--brass); }
.blogcard__title{ font-family:var(--serif); font-weight:700; color:var(--ai); font-size:clamp(19px, 2vw, 23px); letter-spacing:.05em; }
.blogcard__url{ font-size:14px; color:var(--sub); margin-top:4px; word-break:break-all; }

/* ---------- 取得資格 ---------- */
.licenses{
  border:2px solid var(--ai); background:var(--washi); margin-top:40px;
  padding:clamp(24px, 3vw, 40px); column-width:300px; column-gap:48px;
}
.license{ break-inside:avoid; padding:12px 0; border-bottom:1px solid var(--line); }
.license__name{ display:flex; align-items:baseline; gap:12px; }
.license__mark{ flex:none; color:var(--seal); font-size:14px; line-height:1.6; }
.license__label{ font-family:var(--serif); font-weight:600; color:var(--ai); font-size:17px; letter-spacing:.03em; }
.license__subs{ margin:8px 0 2px; padding-left:27px; display:flex; flex-direction:column; gap:5px; }
.license__subs li{ font-size:14.5px; color:var(--sub); letter-spacing:.02em; display:flex; gap:9px; }
.license__subs li::before{ content:'―'; color:var(--brass); }

/* ---------- 事務所概要 ---------- */
.profile__inner{ display:flex; flex-wrap:wrap; gap:clamp(30px, 5vw, 56px); }
.profile__head{ flex:1 1 280px; min-width:250px; }
.profile__mark{ width:44px; height:2px; background:var(--brass); margin-top:16px; }
.profile__lead{ font-family:var(--serif); font-size:16px; line-height:2.05; color:var(--sub); margin-top:20px; max-width:24em; }
.profile__list{ flex:1 1 440px; min-width:300px; margin:0; border-top:2px solid var(--ai); }
.profile__row{ display:flex; gap:20px; padding:15px 0; border-bottom:1px solid var(--line); }
.profile__row dt{ flex:none; width:120px; font-family:var(--serif); font-weight:600; color:var(--ai); letter-spacing:.06em; }
.profile__row dd{ margin:0; color:var(--ink); }
.profile__row dd.is-break{ word-break:break-all; }

/* ---------- お問い合わせ ---------- */
.contact{ background:var(--ai); color:#e6dcc7; }
.contact__inner{
  display:flex; flex-wrap:wrap; gap:36px; align-items:center; justify-content:space-between;
  padding-block:clamp(52px, 6vw, 88px);
}
.contact__body{ flex:1 1 440px; min-width:280px; }
.contact__eyebrow{ font-family:var(--serif); font-size:13px; font-weight:600; letter-spacing:.24em; color:#c8a86a; }
.contact__title{ font-family:var(--serif); font-weight:700; color:#fff; font-size:clamp(26px, 3.6vw, 40px); line-height:1.55; letter-spacing:.06em; margin-top:14px; }
.contact__text{ font-size:17px; line-height:2; color:#c7cfdd; margin-top:18px; max-width:34em; }
.contact__card{ flex:0 1 330px; min-width:260px; }
.contact__box{ border:2px solid #35486b; background:#1d3050; padding:26px; }
.contact__label{ font-size:13px; color:#aeb9cf; }
.contact__tel{ font-family:var(--serif); font-weight:700; font-size:28px; letter-spacing:.02em; margin-top:4px; color:#fff; }
.contact__mail{ font-family:var(--serif); font-weight:600; font-size:16px; color:#fff; word-break:break-all; }
.contact__mail:hover{ color:#e5c483; }
.contact__btn{ margin-top:18px; width:100%; font-size:17px; padding:15px; }

/* ---------- フッター ---------- */
.footer{ background:var(--washi); border-top:6px solid var(--ai); }
.footer__inner{
  display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between;
  padding-block:clamp(44px, 5vw, 64px);
}
.footer__brand{ flex:1 1 320px; min-width:250px; }
.footer__logo{ display:flex; align-items:center; gap:13px; }
.footer__seal{
  flex:none; width:42px; height:42px; border:2px solid var(--seal); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-weight:700; font-size:18px; color:var(--seal);
}
.footer__en{ font-size:10px; letter-spacing:.32em; color:var(--brass); font-weight:700; }
.footer__ja{ font-family:var(--serif); font-weight:700; font-size:20px; color:var(--ai); letter-spacing:.08em; }
.footer__address{ font-family:var(--serif); font-size:14px; line-height:1.95; color:var(--sub); margin-top:16px; max-width:26em; }
.footer__cols{ display:flex; flex-wrap:wrap; gap:44px; }
.footer__coltitle{ font-family:var(--serif); font-size:12px; font-weight:600; letter-spacing:.16em; color:var(--brass); margin-bottom:14px; }
.footer__list{ display:flex; flex-direction:column; gap:11px; font-size:15px; }
.footer__copy{ border-top:1px solid var(--line-d); }
.footer__copy p{ padding-block:18px; font-family:var(--serif); font-size:12.5px; color:var(--sub); letter-spacing:.06em; }

/* ---------- レスポンシブ（SP） ---------- */
/* グローバルナビ＋CTAが1行に収まらなくなる幅でハンバーガーへ切り替える */
@media (max-width:1000px){
  .nav{ display:none; }
  /* お問い合わせはハンバーガーメニュー内に集約する */
  .header__inner > .btn{ display:none; }
  .burger{ display:inline-flex; margin-left:auto; }
  .mnav{ display:flex; }
  .deskcard,
  .contact__card{ flex:1 1 100%; min-width:0; }
}

/* 縦書き＋本文＋カードの3列は約1160px必要。収まらない幅では縦書きを畳んで
   カードだけが折り返し、中途半端な幅で浮くのを防ぐ */
@media (max-width:1140px){
  .hero__vertical{ display:none; }
}

/* ハンバーガー切替の直上は各要素を詰めて収める */
@media (max-width:1180px){
  .header__inner{ gap:16px; }
  .nav{ gap:18px; font-size:14.5px; }
  .header__inner > .btn--sm{ font-size:14px; padding:11px 18px; }
}

@media (max-width:880px){
  .topbar{ display:none; }
  .logo__ja{ font-size:18px; }
  .flow__item{ border-right:none; border-bottom:1px solid var(--line); }
  .flow__item:last-child{ border-bottom:none; }
  .profile__row{ flex-direction:column; gap:4px; }
  .profile__row dt{ width:auto; }
}

@media (max-width:520px){
  .header__inner{ gap:12px; }
  .services{ grid-template-columns:1fr; }
  .logo__seal{ width:40px; height:40px; font-size:18px; }
  .logo__ja{ font-size:16px; letter-spacing:.06em; }
  .hero__actions .btn{ width:100%; }
  .blogcard .btn,
  .blogcard__badge{ width:100%; }
}

@media (max-width:360px){
  /* 見出しは nowrap のため、狭幅では字面を詰めて画面内に収める */
  .hero__title{ font-size:26px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .mnav{ transition:none; }
}

/* ---------- 印刷 ---------- */
@media print{
  .header, .topbar, .burger, .mnav{ display:none !important; }
  body{ background:#fff; }
  .section{ break-inside:avoid; }
}