/* 合同会社むすびえむ 共通スタイル */
:root{
  --ink:#161a23; --ink-2:#4a5263; --line:#e2e5ec; --bg:#ffffff; --bg-2:#f6f7fa;
  --brand:#1f4d8f; --brand-2:#2f6fbd; --accent:#b8892b; --max:1080px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  line-height:1.85; -webkit-text-size-adjust:100%; overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:var(--brand-2);}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px;}
.narrow{max-width:820px;}

/* ---- ヘッダー ---- */
header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.93);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:62px;}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:.04em;color:var(--ink);text-decoration:none;white-space:nowrap;}
.logo img{width:34px;height:34px;flex:none;}
.logo .t{display:block;}
.logo small{display:block;font-size:10px;font-weight:600;letter-spacing:.18em;color:var(--ink-2);}
nav{display:flex;gap:20px;font-size:14px;}
nav a{color:var(--ink-2);text-decoration:none;font-weight:600;white-space:nowrap;}
nav a:hover{color:var(--brand);}
@media(max-width:760px){ nav{display:none;} }

/* ---- ヒーロー（トップ） ---- */
.hero{background:linear-gradient(160deg,#16305a 0%,#1f4d8f 55%,#2f6fbd 100%);color:#fff;padding:84px 0 76px;}
.hero h1{margin:0 0 20px;font-size:clamp(25px,5.4vw,40px);line-height:1.45;font-weight:800;letter-spacing:.01em;}
.hero p{margin:0;max-width:620px;font-size:clamp(14px,2.6vw,16px);color:#dbe4f2;}
.eyebrow{display:inline-block;margin:0 0 18px;padding:5px 13px;border:1px solid rgba(255,255,255,.4);
  border-radius:999px;font-size:11px;letter-spacing:.14em;font-weight:700;}

/* ---- 下層ページの見出し帯 ---- */
.pagehead{background:linear-gradient(160deg,#16305a 0%,#1f4d8f 100%);color:#fff;padding:56px 0 52px;}
.pagehead h1{margin:0 0 12px;font-size:clamp(23px,4.8vw,34px);font-weight:800;letter-spacing:.02em;}
.pagehead p{margin:0;max-width:640px;font-size:15px;color:#dbe4f2;}
.crumb{font-size:12px;color:#a9bcd9;margin:0 0 14px;}
.crumb a{color:#cfdcee;text-decoration:none;}
.crumb a:hover{text-decoration:underline;}

/* ---- セクション ---- */
section{padding:72px 0;}
section.alt{background:var(--bg-2);}
.lead{margin:0 0 42px;}
.lead span{display:block;font-size:11px;letter-spacing:.2em;font-weight:700;color:var(--accent);margin-bottom:8px;}
.lead h2{margin:0;font-size:clamp(21px,4vw,28px);font-weight:800;letter-spacing:.02em;}
.note{font-size:13px;color:var(--ink-2);}

/* ---- カード ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:22px;}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 26px;display:flex;flex-direction:column;}
section.alt .card{box-shadow:0 1px 3px rgba(20,30,60,.05);}
.card h3{margin:0 0 6px;font-size:17px;font-weight:800;}
.card .sub{margin:0 0 16px;font-size:11px;letter-spacing:.12em;font-weight:700;color:var(--accent);}
.card p{margin:0 0 16px;font-size:14px;color:var(--ink-2);}
.card ul{margin:0;padding:0;list-style:none;font-size:14px;}
.card li{position:relative;padding:5px 0 5px 17px;border-top:1px solid var(--line);}
.card li:first-child{border-top:none;}
.card li::before{content:"";position:absolute;left:0;top:15px;width:6px;height:6px;border-radius:50%;background:var(--brand-2);}
.card .more{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:14px;font-weight:700;}
.card .more a{text-decoration:none;}
.card .more a::after{content:" →";}

/* ---- 料金つきサービス項目 ---- */
.svc{border-top:1px solid var(--line);}
.svc .item{display:flex;flex-wrap:wrap;gap:6px 24px;align-items:baseline;justify-content:space-between;
  padding:22px 2px;border-bottom:1px solid var(--line);}
.svc .item h3{margin:0;font-size:17px;font-weight:800;flex:1 1 240px;}
.svc .item .price{font-size:15px;font-weight:800;color:var(--brand);white-space:nowrap;}
.svc .item .desc{flex:1 1 100%;margin:4px 0 0;font-size:14px;color:var(--ink-2);}
@media(max-width:560px){
  .svc .item h3{flex:1 1 100%;}
  .svc .item .price{flex:1 1 100%;}
}

/* ---- 実績 ---- */
.works{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:20px;}
.work{border:1px solid var(--line);border-radius:14px;padding:24px;background:#fff;}
.work h3{margin:0 0 4px;font-size:16px;font-weight:800;}
.work .url{margin:0 0 12px;font-size:12px;color:var(--ink-2);word-break:break-all;}
.work p{margin:0;font-size:14px;color:var(--ink-2);}

/* ---- 会社概要 ---- */
.profile{border-top:1px solid var(--line);}
.profile dl{display:grid;grid-template-columns:200px 1fr;margin:0;}
.profile dt,.profile dd{padding:18px 4px;border-bottom:1px solid var(--line);margin:0;font-size:15px;}
.profile dt{font-weight:700;color:var(--ink-2);}
@media(max-width:640px){
  .profile dl{grid-template-columns:1fr;}
  .profile dt{padding:16px 4px 0;border-bottom:none;font-size:12px;letter-spacing:.08em;}
  .profile dd{padding:2px 4px 16px;}
}

/* ---- 問い合わせ ---- */
.contact{text-align:center;}
.tel{display:inline-block;margin:6px 0 4px;font-size:clamp(28px,6.6vw,40px);font-weight:800;letter-spacing:.02em;
  color:var(--brand);text-decoration:none;}
.tel-note{margin:0 0 26px;font-size:13px;color:var(--ink-2);}
.btn{display:inline-block;padding:14px 32px;border-radius:999px;background:var(--brand);color:#fff;
  text-decoration:none;font-weight:700;font-size:15px;border:1px solid var(--brand);}
.btn:hover{background:var(--brand-2);border-color:var(--brand-2);}
.btn.ghost{background:transparent;color:var(--brand);}
.btn.ghost:hover{background:var(--bg-2);color:var(--brand);}
.btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}

/* ---- フッター ---- */
footer{background:#11151d;color:#8b93a6;padding:40px 0 34px;font-size:13px;}
footer .flogo{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
footer .flogo img{width:30px;height:30px;}
footer .frow{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between;}
footer a{color:#b9c1d4;text-decoration:none;}
footer a:hover{text-decoration:underline;}
.copy{font-size:12px;margin-top:22px;}