:root{
  --bg: #ffffff;
  --box-border: #05303b; /* ボックス枠の色（濃い青緑） */
  --box-bg: #ffffff;
  --text-color: #05303b;
  --arrow-color: #05303b;
  --box-padding: 16px 26px;
  --box-radius: 10px;
  --box-width: min(420px, 86%);
  --gutter: 22px;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--text-color);
}

.flowchart-page{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 10px;
}

.flowchart{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--gutter);
  width:100%;
}

.step{
  width:var(--box-width);
  border:3px solid var(--box-border);
  background:var(--box-bg);
  color:var(--text-color);
  padding:var(--box-padding);
  border-radius:var(--box-radius);
  text-align:center;
  font-weight:600;
  font-size:1.5rem;
  line-height:1.4;
  box-shadow: 0 2px 0 rgba(5,48,59,0.03);
}

/* 矢印部分 */
.arrow{
  width:48px;
  height:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--arrow-color);
}

.arrow svg{
  width:36px;
  height:36px;
  display:block;
}

/* 小さな画面で見やすくする */
@media (max-width:420px){
  :root{
    --box-padding: 12px 16px;
    --gutter:16px;
  }
  .arrow{ width:36px; height:36px; }
  .arrow svg{ width:28px; height:28px; }
  .step{ font-size:0.95rem; }
}

/* アクセシビリティ用：非表示の見出し */
.visually-hidden{
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}