/* BANK OF VERIFY — コーポレートサイト 共通の見た目（v0.70）
   下書き v0.68 の配色・書体・部品を引き継ぎ、ページを分けた形に合わせた */
:root{
  --bg:#ffffff; --tint:#f6f5f1; --panel:#ffffff; --ink:#1f2328; --muted:#6b7280;
  --line:#e3e1da; --accent:#2f6f4f; --accent-d:#255c41; --accent-soft:#e8f1ec;
  --note:#b4451f; --brand:#1a1a1a;
  --wrap:1100px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:96px}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,"Noto Sans JP",system-ui,sans-serif;
  font-size:16px; line-height:1.9; -webkit-text-size-adjust:100%}
a{color:var(--accent)}
.wrap{max-width:var(--wrap); margin:0 auto; padding-left:24px; padding-right:24px}

/* header */
header.top{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.topin{display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; padding-top:14px; padding-bottom:14px}
.lockup{display:flex; align-items:center; gap:.8em; font-weight:600; letter-spacing:.1em;
  font-size:16.9px; color:var(--brand); white-space:nowrap; text-decoration:none}
.lockup .mark{width:3.3em; height:3.3em; flex:none; display:block}
nav.tabs{display:flex; gap:4px; flex-wrap:wrap; align-items:center}
nav.tabs a{font-size:13.5px; padding:6px 12px; border-radius:999px; color:#4a5158;
  text-decoration:none; white-space:nowrap}
nav.tabs a:hover{background:#f0efe9}
nav.tabs a[aria-current="page"]{background:var(--accent-soft); color:var(--accent); font-weight:700}
nav.tabs a.btn-sm{background:var(--accent); color:#fff; font-weight:700; padding:8px 18px}
nav.tabs a.btn-sm:hover{background:var(--accent-d)}

/* breadcrumb */
.crumbs{background:var(--tint); border-bottom:1px solid var(--line)}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:14px 24px;
  max-width:var(--wrap); margin:0 auto; font-size:13px; color:var(--muted)}
.crumbs li::after{content:"／"; margin-left:8px; color:#c9c6bd}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* page title */
.pagehead{padding-top:58px; padding-bottom:0}
.pagehead h1{font-size:36px; margin:0; letter-spacing:.02em; line-height:1.4}
.pagehead .en{display:block; font-size:12.5px; letter-spacing:.32em; color:var(--muted);
  font-weight:600; margin-top:6px}

/* sections */
section{padding-top:72px; padding-bottom:72px}
h2.sec{display:flex; align-items:center; gap:12px; font-size:25px; margin:0 0 26px;
  letter-spacing:.01em; line-height:1.5}
h2.sec .ico{width:30px; height:30px; flex:none}
h3{font-size:19.5px; margin:34px 0 8px; letter-spacing:.01em}
p{margin:14px 0}
.lead{font-size:17px}
.band{background:var(--tint); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}

/* hero (top page) */
.hero{padding-top:92px; padding-bottom:88px}
.mission{font-size:33px; line-height:1.68; font-weight:700; letter-spacing:.02em;
  margin:0 0 26px; padding-left:22px; border-left:5px solid var(--accent)}
.hero .sub{font-size:17.5px; color:#3d4348; margin:0; max-width:44em}

/* cards (top page) */
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin:8px 0 0}
.card{display:block; border:1px solid var(--line); border-radius:12px; padding:24px 24px 26px;
  background:var(--panel); text-decoration:none; color:var(--ink)}
.card:hover{border-color:#cfe3d8; box-shadow:0 2px 10px rgba(47,111,79,.08)}
.card .en{display:block; font-size:11.5px; letter-spacing:.28em; color:var(--muted); font-weight:600}
.card b{display:block; font-size:19px; margin:4px 0 6px}
.card p{font-size:14.5px; margin:8px 0 0; color:#4a5158}
.card .more{display:inline-block; margin-top:12px; font-size:14px; font-weight:700; color:var(--accent)}

/* MVV */
.mvv{display:grid; grid-template-columns:9em 1fr; gap:0; border-top:1px solid var(--line)}
.mvv > div{padding:28px 0; border-bottom:1px solid var(--line)}
.mvv .k{font-size:13px; letter-spacing:.28em; color:var(--accent); font-weight:700; padding-top:34px}
.mvv .k small{display:block; letter-spacing:.04em; color:var(--muted); font-weight:400; font-size:12.5px}
.mvv .v .big{font-size:24px; font-weight:700; line-height:1.6; margin:0}
ol.values{list-style:none; counter-reset:v; margin:0; padding:0}
ol.values li{counter-increment:v; position:relative; padding:0 0 18px 44px}
ol.values li:last-child{padding-bottom:0}
ol.values li::before{content:counter(v); position:absolute; left:0; top:2px; width:28px; height:28px;
  line-height:28px; text-align:center; border-radius:50%; background:var(--accent); color:#fff;
  font-size:13.5px; font-weight:700}
ol.values b{display:block; font-size:18px}
ol.values span{font-size:15.5px; color:#4a5158}

/* two columns + figure */
.two{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.fig{margin:0}
.fig svg{width:100%; height:auto; display:block; background:#fff; border:1px solid var(--line); border-radius:14px}
.figcap{font-size:12.5px; color:var(--muted); margin:8px 2px 0; line-height:1.7}

/* product card */
.line{background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:26px 30px 28px; margin:22px 0}
.line h3{margin:0 0 4px; font-size:21px}
.line h3 .alias{font-size:14px; font-weight:400; color:var(--muted); margin-left:.7em; white-space:nowrap}
.line .state{display:inline-block; font-size:11.5px; letter-spacing:.11em; font-weight:700;
  padding:3px 11px; border-radius:999px; background:var(--accent-soft); color:var(--accent);
  margin:0 0 12px; vertical-align:2px}
.line p{margin:11px 0; font-size:15.5px}
.btn{display:inline-block; background:var(--accent); color:#fff; text-decoration:none;
  font-size:16px; font-weight:700; letter-spacing:.03em; padding:14px 34px; border-radius:8px; margin-top:10px}
.btn:hover{background:var(--accent-d)}
.btn.soon{background:#e3e1da; color:#6b7280; cursor:default}
.btn.soon:hover{background:#e3e1da}

/* steps */
ol.steps{list-style:none; counter-reset:s; margin:24px 0 0; padding:0}
ol.steps li{counter-increment:s; position:relative; padding:0 0 30px 56px;
  border-left:2px solid var(--line); margin-left:15px}
ol.steps li:last-child{border-left-color:transparent; padding-bottom:0}
ol.steps li::before{content:counter(s); position:absolute; left:-15px; top:0; width:30px; height:30px;
  line-height:30px; text-align:center; font-size:14px; font-weight:700; border-radius:50%;
  background:#d9d5ca; color:#fff}
ol.steps li.now::before{background:var(--accent)}
ol.steps b{display:block; font-size:17.5px; margin-bottom:2px}
ol.steps li.now b{color:var(--accent)}
ol.steps span{font-size:15.5px; color:#4a5158}

/* table */
table{border-collapse:collapse; width:100%; max-width:716px; margin:20px auto; font-size:15.5px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden}
th,td{border-bottom:1px solid var(--line); padding:15px 20px; text-align:left; vertical-align:top; line-height:1.75}
th{width:9.5em; font-weight:700; color:#4a5158; background:#fbfaf7; white-space:nowrap}
tr:last-child th,tr:last-child td{border-bottom:0}

/* guarantee page */
table.plain{max-width:none}
table.plain th{width:19em; white-space:normal; line-height:1.7}
.judge{display:flex; gap:14px; flex-wrap:wrap; margin:6px 0 0}
.chip{flex:1 1 calc(50% - 8px); min-width:260px; border-radius:12px; padding:16px 20px; font-size:15px; border:1px solid var(--line); background:#fff}
.chip b{display:block; font-size:16.5px; margin-bottom:2px}
.chip.ok{background:var(--accent-soft); border-color:#cfe3d8}
.chip.ok b{color:var(--accent)}
.chip.ng{background:#fbeceb; border-color:#f0d5d1}
.chip.ng b{color:#b03a2e}
.chip.hold{background:#fdf6e3; border-color:#efe1b8}
.chip.hold b{color:#9a6b00}
.chip.prac{background:#f3f4f6; border-color:#dfe2e6}
.chip.prac b{color:#555}
@media (max-width:880px){ table.plain th{width:auto} }

table.news th{width:9.5em; white-space:nowrap; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-weight:600; color:var(--muted)}

/* callout */
.frank{background:#fbfaf6; border:1px solid var(--line); border-left:4px solid #d8d4c7;
  border-radius:0 12px 12px 0; padding:24px 28px; margin:30px 0 0}
.band .frank{background:#fff}
.frank h3{margin:0 0 6px; font-size:17.5px}
.frank p{font-size:15.5px; margin:10px 0}

/* contact */
.mail{font-size:21px; font-weight:700; letter-spacing:.02em; margin:6px 0 4px}
.small{font-size:14px; color:var(--muted)}

footer{background:var(--tint); border-top:1px solid var(--line)}
footer .inner{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; align-items:center;
  padding:28px 24px; max-width:var(--wrap); margin:0 auto; font-size:13px; color:var(--muted)}
footer nav{display:flex; gap:16px; flex-wrap:wrap}
footer nav a{color:var(--muted); text-decoration:none}
footer nav a:hover{text-decoration:underline}
footer .ver{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px}


/* v0.72 追加 ── トップのカードの状態札・リンクの矢印 */
.card .state{display:inline-block; font-size:11.5px; letter-spacing:.11em; font-weight:700;
  padding:3px 11px; border-radius:999px; background:var(--accent-soft); color:var(--accent); margin:0 0 10px}
a.more{font-size:14.5px; font-weight:700; text-decoration:none}
a.more:hover{text-decoration:underline}
.pagehead + section{padding-top:36px}

/* 編集メモ（URL 末尾に #memo を付けると出る・JavaScript 不使用）
   ※HTML のソースには残るため、見られて困ることは書かない */
.editnote{font-size:13.5px; color:var(--note); background:#fdeee7; border-radius:8px;
  padding:9px 14px; margin:12px 0; line-height:1.7}
.editnote::before{content:"要確認 — "; font-weight:700}
.draftbar{background:var(--note); color:#fff; text-align:center; font-size:13px; padding:7px 16px; letter-spacing:.04em}
.draftbar,.editnote{display:none}
#memo:target ~ .draftbar{display:block}
#memo:target ~ main .editnote{display:block}
#memo:target ~ main .ph{background:#fdeee7; color:var(--note); border-bottom:1px dashed var(--note); padding:0 3px; font-weight:700}

@media (max-width:880px){
  .two{grid-template-columns:1fr; gap:26px}
  .cards{grid-template-columns:1fr}
  .hero{padding-top:52px; padding-bottom:56px}
  .mission{font-size:22px; padding-left:15px; border-left-width:4px}
  .hero .sub{font-size:16px}
  .pagehead h1{font-size:28px}
  h2.sec{font-size:21px}
  section{padding-top:48px; padding-bottom:48px}
  .mvv{grid-template-columns:1fr}
  .mvv .k{padding:24px 0 0; border-bottom:0 !important}
  .mvv .v{padding-top:8px}
  .mvv .v .big{font-size:20px}
  .line{padding:22px 20px 24px}
  .line h3 .alias{display:block; margin:4px 0 0}
  th,td{display:block; width:auto}
  th{border-bottom:0; padding-bottom:0; background:none}
  td{padding-top:2px}
  ol.steps li{padding-left:46px}
  .topin{flex-wrap:wrap; row-gap:6px}
  nav.tabs{width:100%; justify-content:flex-start; gap:0; flex-wrap:nowrap}
  nav.tabs a{font-size:12.5px; padding:5px 7px}
  nav.tabs a.btn-sm{margin-left:auto; padding:6px 12px; font-size:12.5px}
  .lockup{font-size:15px; letter-spacing:.06em; gap:.6em}
  .lockup .mark{width:2.8em; height:2.8em}
  nav.tabs a.btn-sm{padding:7px 14px; font-size:13px}
}