:root { --gap: 14px; 
scroll-padding-top: 50px; }
* { box-sizing: border-box; }
body {
  margin: 0; 
	padding: 1em 0em;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  line-height: 1.65; 
	color:#444444; 
	background: #none !important;
}
.container { max-width: 100%; margin: 0 auto; }
h1 { font-size: 1.70rem; margin: 0 0 8px; }
.lead { 
	color: #444; 
	font-size: 1rem !important;
	line-height: 200% !important;
	margin: 0 0 16px; 
	padding: 0 !important;
}

.panel {
  display: grid; grid-template-columns: 1fr auto; gap: 10px;
  margin: 0 0 16px;
}
#name {
  width: 100%; font-size: 1.1rem; padding: 12px 14px;
  border: 1px solid rgba(38,16,91,0.77); border-radius: 4px; background: #fff;
}

/* IDで対象を指定 */
#name::placeholder {
  font-size: 0.8em;
}
#analyzeBtn {
  border: none; background: #26105b; color: #fff; cursor: pointer;
  padding: 12px 16px; border-radius: 4px; font-weight: 700;
	
}
.card {
  background: #fff; border: 1px solid #e5e7eb;
  border-radius: 4px; padding: 16px; margin-bottom: 14px;
}
.list { list-style: none; padding: 0; margin: 8px 0 0; }
.list li {
  display: grid; grid-template-columns: 56px 1fr; gap: 10px;
  padding: 8px 0; border-bottom: 1px dashed #e5e7eb;
}
.list li:last-child { border-bottom: none; }
.kana {
  font-weight: 800; font-size: 1.1rem; text-align: center;
  background: #26105b; color: #fff; border-radius: 4px; padding: 6px 0;
}
.flow { margin-top: 10px; font-weight: 700; color: #374151; }
.reading { color: #333; }
.sr-only {
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

@media (max-width: 560px) {
  #analyzeBtn { padding: 10px 12px; }
  .list li { grid-template-columns: 48px 1fr; }
}