/* 共栄衡器 新サイト 共通CSS（案B「老舗の信頼」） */

/* 案B「老舗の信頼」：藍と生成り、明朝の大きな字。千住で六十年あまり続く店の重みを、写真と年表で見せる */
:root { --ai: #1c2e4a; --ai2: #2c4468; --kinari: #f6f1e7; --paper: #fffdf8; --gold: #b08a3e; --ink: #14120f; --sub: #4f4a42; --line: #e2d9c6; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--kinari); color: var(--ink); font-family: "Zen Kaku Gothic New", sans-serif; line-height: 1.9; font-weight: 500; }
.min { font-family: "Shippori Mincho", serif; }
a { color: inherit; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

header { background: var(--paper); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 24px; max-width: 1120px; margin: 0 auto; }
.logo { display: flex; align-items: flex-start; gap: 14px; text-decoration: none; }
.mon { width: 58px; height: 58px; flex: none; margin-top: calc((2.1rem * 1.2 - 58px) / 2); }
.logo b { display: block; font-family: "Shippori Mincho"; font-size: 2.1rem; line-height: 1.2; font-weight: 800; letter-spacing: .06em; white-space: nowrap; }
@media (max-width: 520px) { .logo { gap: 10px; } .logo b { font-size: 1.7rem; letter-spacing: .02em; } .mon { width: 46px; height: 46px; margin-top: calc((1.7rem * 1.2 - 46px) / 2); } .logo small { letter-spacing: .06em; } }
.logo small { display: block; font-size: .7rem; color: var(--sub); letter-spacing: .14em; }
nav { display: flex; gap: 28px; font-size: .92rem; }
nav a { text-decoration: none; }
nav a:hover { color: var(--gold); }
.tel { text-align: right; text-decoration: none; }
.tel b { font-family: "Shippori Mincho"; font-size: 1.35rem; color: var(--ai); letter-spacing: .04em; }
.tel small { display: block; font-size: .68rem; color: var(--sub); }
@media (max-width: 900px) { nav { display: none; } }

/* 最初の画面：大きな写真の上に縦書きの言葉 */
.hero { position: relative; min-height: 560px; background: linear-gradient(90deg, rgba(28,46,74,.92) 0 38%, rgba(28,46,74,.35) 70%, rgba(28,46,74,.15)), repeating-linear-gradient(45deg, #5b6b82 0 14px, #66768c 14px 28px); color: #fff; display: flex; align-items: center; }
.hero .ph { position: absolute; right: 24px; bottom: 18px; font-size: .78rem; color: rgba(255,255,255,.85); background: rgba(0,0,0,.25); padding: 2px 10px; }
.hero .wrap { width: 100%; display: flex; gap: 48px; align-items: center; }
.tate { writing-mode: vertical-rl; font-family: "Shippori Mincho"; font-weight: 800; font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.5; letter-spacing: .14em; height: 420px; }
.tate span { color: #e9cf8f; }
.hero p { max-width: 24em; font-size: 1rem; color: #e6ebf2; }
.hero .since { font-family: "Shippori Mincho"; font-size: .95rem; letter-spacing: .3em; color: #e9cf8f; border-top: 1px solid rgba(233,207,143,.6); border-bottom: 1px solid rgba(233,207,143,.6); padding: 6px 0; display: inline-block; margin-bottom: 18px; }
.hero .btn { display: inline-block; margin-top: 22px; padding: 12px 30px; background: #e9cf8f; color: var(--ai); text-decoration: none; font-weight: 700; letter-spacing: .1em; }
@media (max-width: 760px) { .hero .wrap { flex-direction: column; align-items: flex-start; padding: 40px 24px; } .tate { height: auto; writing-mode: horizontal-tb; } }

/* 表彰の帯 */
.award { background: var(--ai); color: #fff; }
.award .wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; padding: 16px 24px; font-size: .9rem; }
.award b { color: #e9cf8f; font-family: "Shippori Mincho"; font-weight: 700; margin-right: 8px; }

section { padding: 88px 0 0; }
.ttl { text-align: center; margin-bottom: 40px; }
.ttl .en { font-size: .72rem; letter-spacing: .4em; color: var(--gold); }
.ttl h2 { margin: 6px 0 0; font-family: "Shippori Mincho"; font-weight: 800; font-size: 2rem; letter-spacing: .12em; }
.ttl h2::after { content: ""; display: block; width: 40px; height: 2px; background: var(--gold); margin: 14px auto 0; }

/* ごあいさつ */
.greet { display: grid; grid-template-columns: 2.5fr 9.5fr; gap: 56px; align-items: center; }
.portrait { aspect-ratio: 3/4; background: repeating-linear-gradient(45deg, #e9e1cf 0 12px, #efe8d8 12px 24px); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--sub); font-size: .85rem; text-align: center; }
.greet h3 { font-family: "Shippori Mincho"; font-size: 1.6rem; line-height: 1.6; margin: 0 0 20px; }
.greet .sign { margin-top: 24px; text-align: right; font-family: "Shippori Mincho"; }
.greet .sign small { display: block; font-family: "Zen Kaku Gothic New"; font-size: .78rem; color: var(--sub); }
@media (max-width: 860px) { .greet { grid-template-columns: 1fr; } .portrait { max-width: 320px; } .portrait-img { width: 50%; } }

/* 仕事：四つの札 */
.works { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.work { background: var(--paper); border: 1px solid var(--line); padding: 30px 24px; text-align: center; }
.work .k { font-family: "Shippori Mincho"; font-size: 2.6rem; font-weight: 800; color: var(--ai); line-height: 1; }
.work h3 { margin: 14px 0 8px; font-size: 1.05rem; }
.work p { margin: 0; font-size: .86rem; color: var(--sub); text-align: left; }
@media (max-width: 900px) { .works { grid-template-columns: 1fr 1fr; } }

/* 歩み：年表 */
.history { position: relative; max-width: 760px; margin: 0 auto; }
.history::before { content: ""; position: absolute; left: calc(7em + 18px); top: 6px; bottom: 6px; width: 1px; background: var(--gold); }
.h-item { display: grid; grid-template-columns: 7em 1fr; gap: 36px; padding: 14px 0; }
.h-item .y { font-family: "Shippori Mincho"; font-weight: 700; color: var(--ai); text-align: right; }
.h-item .y small { display: block; font-size: .72rem; color: var(--sub); font-weight: 500; }
.h-item p { margin: 0; position: relative; }
.h-item p::before { content: ""; position: absolute; left: -24.5px; top: .7em; width: 9px; height: 9px; border-radius: 50%; background: var(--kinari); border: 2px solid var(--gold); }

/* 取引のある業界とメーカー */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.box { background: var(--paper); border: 1px solid var(--line); padding: 30px 32px; }
.box h3 { margin: 0 0 14px; font-family: "Shippori Mincho"; font-size: 1.25rem; color: var(--ai); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags span { border: 1px solid var(--line); background: var(--kinari); padding: 2px 12px; font-size: .86rem; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }

/* 会社 */
.company { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--paper); border: 1px solid var(--line); }
.company dl { margin: 0; padding: 30px 36px; display: grid; grid-template-columns: 6.5em 1fr; }
.company dt, .company dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.company dt { color: var(--sub); }
.map { background: repeating-linear-gradient(45deg, #e9e1cf 0 12px, #efe8d8 12px 24px); display: flex; align-items: center; justify-content: center; color: var(--sub); font-size: .85rem; min-height: 320px; }
@media (max-width: 860px) { .company { grid-template-columns: 1fr; } }

.contact { margin-top: 96px; background: var(--ai); color: #fff; text-align: center; padding: 64px 24px; }
.contact h2 { font-family: "Shippori Mincho"; font-weight: 800; font-size: 1.8rem; margin: 0 0 8px; letter-spacing: .1em; }
.contact p { color: #cfd8e4; margin: 0 0 26px; }
.contact .tel2 { font-family: "Shippori Mincho"; font-size: 2.6rem; font-weight: 800; color: #e9cf8f; text-decoration: none; letter-spacing: .06em; }
.contact .fax { display: block; margin-top: 6px; color: #cfd8e4; font-size: .9rem; }
footer { text-align: center; padding: 24px; font-size: .75rem; color: var(--sub); }

/* 下層ページ共通 */
.pagehead { background: var(--ai); color: #fff; padding: 56px 0 48px; text-align: center; }
.pagehead .en { font-size: .72rem; letter-spacing: .4em; color: #e9cf8f; }
.pagehead h1 { margin: 8px 0 0; font-family: "Shippori Mincho"; font-weight: 800; font-size: 2.2rem; letter-spacing: .14em; }
.crumb { font-size: .8rem; color: var(--sub); padding: 14px 0 0; }
.crumb a { color: var(--sub); }
.page section:first-of-type { padding-top: 56px; }
.page h2.min { font-family: "Shippori Mincho"; font-size: 1.5rem; color: var(--ai); margin: 0 0 18px; padding-left: 14px; border-left: 4px solid var(--gold); }
.lead { max-width: 46em; margin: 0 auto; }
.profile-top { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: start; }
.profile-top img { width: 100%; height: auto; border: 1px solid var(--line); background: var(--paper); }
.president { text-align: right; font-family: "Shippori Mincho"; margin-top: 22px; }
.president small { display: block; font-family: "Zen Kaku Gothic New"; font-size: .78rem; color: var(--sub); }
.award-note { display: inline-block; margin-top: 14px; padding: 6px 16px; background: var(--ai); color: #e9cf8f; font-family: "Shippori Mincho"; font-weight: 700; letter-spacing: .08em; }
@media (max-width: 860px) { .profile-top { grid-template-columns: 1fr; } }
.data { background: var(--paper); border: 1px solid var(--line); padding: 10px 36px 24px; display: grid; grid-template-columns: 9em 1fr; }
.data dt, .data dd { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: .94rem; }
.data dt { color: var(--sub); }
.data dd small { color: var(--sub); }
@media (max-width: 640px) { .data { grid-template-columns: 1fr; padding: 6px 20px 20px; } .data dt { border-bottom: 0; padding-bottom: 0; } }
.clients h3 { margin: 18px 0 6px; font-family: "Shippori Mincho"; font-size: 1.05rem; color: var(--ai); }
.clients p { margin: 0; font-size: .9rem; color: var(--sub); }
.access { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: center; }
.access img { width: 100%; height: auto; border: 1px solid var(--line); }
@media (max-width: 860px) { .access { grid-template-columns: 1fr; } }
.btn2 { display: inline-block; margin-top: 12px; padding: 10px 26px; border: 1px solid var(--ai); color: var(--ai); text-decoration: none; letter-spacing: .08em; }
.btn2:hover { background: var(--ai); color: #fff; }
nav a.on { color: var(--gold); border-bottom: 2px solid var(--gold); }

/* トップページ */
.hero .photo { width: 300px; flex: none; margin: 0; align-self: center; }
.hero .photo img { width: 100%; height: auto; display: block; border: 6px solid rgba(255,253,248,.92); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.hero .photo figcaption { font-size: .74rem; color: rgba(255,255,255,.85); margin-top: 8px; text-align: center; }
@media (max-width: 1000px) { .hero .photo { display: none; } }
.portrait-img { width: 100%; height: auto; border: 1px solid var(--line); background: var(--paper); display: block; }
.news { max-width: 760px; margin: 0 auto; background: var(--paper); border: 1px solid var(--line); padding: 10px 32px; }
.news .n { display: grid; grid-template-columns: 8em 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.news .n:last-child { border-bottom: 0; }
.news .d { font-family: "Shippori Mincho"; color: var(--ai); font-weight: 700; }
.more { text-align: center; margin-top: 18px; }
.info { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.info h3 { margin: 0 0 12px; font-family: "Shippori Mincho"; font-size: 1.15rem; color: var(--ai); }
.info p { margin: 0 0 10px; font-size: .92rem; }
.info small { color: var(--sub); }
.sale { background: var(--ai); color: #fff; padding: 22px 28px; text-align: center; margin-bottom: 28px; }
.sale b { color: #e9cf8f; font-family: "Shippori Mincho"; font-size: 1.25rem; }
@media (max-width: 860px) { .info { grid-template-columns: 1fr; } .news .n { grid-template-columns: 1fr; gap: 2px; } }

/* 元のページから移した本文 */
.doc { max-width: 880px; margin: 0 auto; }
.doc p { margin: 0 0 1em; }
.doc h3 { font-family: "Shippori Mincho"; font-size: 1.25rem; color: var(--ai); margin: 2em 0 .6em; padding-left: 12px; border-left: 4px solid var(--gold); line-height: 1.6; }
.doc h4.date { margin: 1.8em 0 .3em; font-family: "Shippori Mincho"; color: var(--ai); font-size: 1.05rem; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 1.6em 0; }
.doc img { max-width: 100%; height: auto; }
.doc a { color: var(--ai2); }
.doc a:hover { color: var(--gold); }
.doc table { border-collapse: collapse; margin: 0 0 1.2em; max-width: 100%; }
.doc td, .doc th { vertical-align: top; }
.doc:not(.flat) td, .doc:not(.flat) th { border: 1px solid var(--line); padding: 6px 12px; background: var(--paper); }
.doc.flat .tbl, .doc.flat table, .doc.flat tbody, .doc.flat tr, .doc.flat td { display: block; width: auto; border: 0; padding: 0; background: none; }
.klist { display: grid; gap: 14px; }
.klist a { display: block; background: var(--paper); border: 1px solid var(--line); padding: 20px 26px; text-decoration: none; }
.klist a:hover { border-color: var(--gold); }
.klist b { display: block; font-family: "Shippori Mincho"; font-size: 1.15rem; color: var(--ai); margin-bottom: 4px; }
.klist span { font-size: .88rem; color: var(--sub); }
.sidelink { text-align: center; margin: 40px 0 0; }

/* お問い合わせフォーム */
.formnote { font-size: .85rem; color: var(--sub); border-left: 3px solid var(--gold); padding-left: 12px; }
.inq { max-width: 760px; margin: 28px auto 0; background: var(--paper); border: 1px solid var(--line); padding: 28px 36px 34px; position: relative; }
.inq dl { margin: 0; display: grid; grid-template-columns: 11em 1fr; }
.inq dt, .inq dd { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); }
.inq dt label { font-weight: 700; }
.inq em { font-style: normal; font-size: .7rem; background: #a2322b; color: #fff; padding: 1px 7px; margin-left: 8px; letter-spacing: .1em; vertical-align: 1px; }
.inq input[type=text], .inq input[type=tel], .inq input[type=email], .inq select, .inq textarea { width: 100%; max-width: 100%; font: inherit; padding: 9px 12px; border: 1px solid #cfc6b2; background: #fff; }
.inq input:focus, .inq select:focus, .inq textarea:focus { outline: 2px solid var(--gold); outline-offset: 0; }
.inq .act { text-align: center; margin: 28px 0 0; }
.inq button { font: inherit; font-weight: 700; letter-spacing: .12em; padding: 12px 34px; border: 0; background: var(--ai); color: #fff; cursor: pointer; }
.inq button:hover { background: var(--ai2); }
.inq button.sub { background: transparent; color: var(--sub); border: 1px solid #cfc6b2; font-weight: 500; }
@media (max-width: 700px) { .inq { padding: 16px 18px 24px; } .inq dl { grid-template-columns: 1fr; } .inq dt { border-bottom: 0; padding-bottom: 0; } }

/* スマホ・タブレット：メニューを折り返して表示し、広い表は横にスクロール */
@media (max-width: 900px) {
  .bar { flex-wrap: wrap; gap: 10px 16px; padding: 12px 16px; }
  nav { display: flex; flex-wrap: wrap; gap: 4px 18px; order: 3; width: 100%; font-size: .88rem; border-top: 1px solid var(--line); padding-top: 8px; }
  .tel { margin-left: auto; }
}
.doc .tbl { overflow-x: auto; }
.doc:not(.flat) table { display: block; overflow-x: auto; max-width: 100%; }
.doc * { max-width: 100%; }
.doc td, .doc th { overflow-wrap: anywhere; }

/* 日本語の折り返し：文節の途中で切らない・長いアドレスは折る・見出しは行の長さをそろえる */
body { line-break: strict; word-break: auto-phrase; overflow-wrap: anywhere; }
h1, h2, h3, h4, .tate, .work h3, .klist b { text-wrap: balance; }
p, dd, li, .klist span { text-wrap: pretty; }
.doc a, .data dd, .data dt { overflow-wrap: anywhere; }
.tags span, nav a, .tel b, .tel2, .btn, .btn2 { white-space: nowrap; }
nav { flex-wrap: wrap; }

/* スマホは基準の文字を少し大きくする（rem 指定のものが一緒に大きくなる） */
@media (max-width: 700px) { html { font-size: 112.5%; } .logo b { font-size: 1.5rem; } .contact .tel2 { font-size: 2.2rem; } }

nav a, .logo small, .tel small, .crumb { font-weight: 500; }
@media (max-width: 700px) { body { font-weight: 500; } nav a { font-weight: 700; } }