html, body {
  margin: 0;
  padding: 0;
  background-color: #fff;
}

/* すべての画像を横幅100% */
img {
  width: 100%;
  height: auto;
  display: block;
}

header {
	padding: 20px 12px;
}
/* セクション共通 */
section {
  padding: 20px 12px;
  box-sizing: border-box;
  text-align: center;
}

.full-height {
  /*min-height: 100vh;*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* ▼臭いマスター */
.nioi-master #howto   { background-color: #ddece2; } /* 薄いグリーン */
.nioi-master #solution{ background-color: #399052; } /* グリーン */
.nioi-master #try     { background-color: #24abc9; } /* ブルー */
.nioi-master #comment { background-color: #ddece2; }
.nioi-master #badge   { background-color: #ddece2; }
.nioi-master #footer  { background-color: #ddece2; }

/* ▼トイレマスター */
.toilet-master #howto   { background-color: #def2f7; } /* 薄いブルー */
.toilet-master #solution{ background-color: #24abc9; } /* ブルー */
.toilet-master #try     { background-color: #399052; } /* グリーン */
.toilet-master #comment { background-color: #def2f7; }
.toilet-master #badge   { background-color: #def2f7; }
.toilet-master #footer  { background-color: #def2f7; }

/* ▼湯せんマスター */
.yusen-master #howto   { background-color: #fffbca; } /* 薄いイエロー */
.yusen-master #solution{ background-color: #ffd800; } /* イエロー */
.yusen-master #try     { background-color: #ec6d81; } /* ピンク */
.yusen-master #comment { background-color: #fffbca; }
.yusen-master #badge   { background-color: #fffbca; }
.yusen-master #footer  { background-color: #fffbca; }


/* 余白　指定 */
#howto {
}
#solution {
}
#try {
}
#comment {
  padding: 20px;
}
#badge {
  padding: 20px;
}
#secret-link{
  padding: 30px 20px;
}
#footer {
  padding: 20px;
}

/* ボタン */
.btn-solution {
  margin-top: 20px;
  margin-bottom: 30px;
  border: none;
  background: transparent;
  cursor: pointer;
}

/* フェードインアニメーション */
.hidden {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.visible {
  opacity: 1;
  transform: translateY(0);
}

/* solution以降のロック */
#locked-area {
  pointer-events: none;
  max-height: 0;           /* ← height ではなく max-height にすると安全 */
  overflow: hidden;
  transition: max-height 0.6s ease;
}
#locked-area.open {
  max-height: 5000px;      /* 大きめの値にしておく */
  pointer-events: auto;
}

/* ▼臭いマスターバッジ */
.badgewaku{
	border: 10px solid #399052;
	border-radius: 30px;
	padding: 20px 0;
	background-color: #ffd800;
}
/* ▼トイレマスターバッジ　枠色 */
.toilet-master .badgewaku{
	border: 10px solid #24abc9;
}
/* ▼湯せんマスターバッジ　枠色 */
.yusen-master .badgewaku{
	border: 10px solid #ec6d81;
}

/* フッターナビ（縦並びに変更） */
#footernav ul {
  display: flex;
  flex-direction: column; /* 縦並び */
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 20px;
  gap: 10px;
}
#footernav a {
  text-decoration: none;
  display: block;
  width: 100%;
  margin-bottom: 20px;
}
.copyright{
	text-align: center;
	font-size: small;
	display: block;
	font-weight: bold;
	color:#003553;
}

/* 最初は非表示にしたい場合 */
#footer {
  display: none;
}
#footer.is-visible {
  display: block;
}