@charset "utf-8";

/* 背景画像 */
.bg-img {
	background-image: url("https://omuomu.net/imgs/back.png");
}

/* Button */
.btn {
  display: inline-block;
  margin: 0 0 1rem 1rem;
  padding: 1em 2em 1em 2em;
  color: rgb(15, 14, 88);
  text-decoration: none;
  background-color: rgb(251, 255, 218);
  border: 3px solid rgba(18, 14, 71, 0.658);
  border-radius: 15px;
  box-shadow: inset 0px 0px 4px 0 rgba(210, 210, 240, 0.6);
  transition-property: border-color, box-shadow;
  transition-duration: 0.3s;
  transition-delay: 0s;
  transition-timing-function: ease-out;
}

.btn:hover {
  border-color: rgb(73, 90, 187)
}

.btn:active {
  border-color: rgb(15, 11, 71);
  box-shadow: inset 0px 0px 12px 0 rgba(83, 76, 79, 0.6);
}

/* Tab */
.tab-base {
	display: inline-block;
	margin: 0;
	padding: 10px 30px;
	border: 1px solid rgba(30, 33, 71, 0.815);
	border-radius: 10px 10px 0 0;
	font-size: 1.8rem;
}

.sc-bg {
	background: rgba(193, 194, 133, 0.6);

}

.sl-bg {
	background: rgba(134, 133, 194, 0.6);
}

.so-bg {
	background: rgba(194, 133, 159, 0.6);		
}

/* Lists */
.lists-base {
	display: flex;
	padding: 2rem 1rem 1rem 1rem;
	font-size: 1.8rem;
}

.sl-lists {
	border: 1px solid rgba(30, 34, 71, 0.747);
	background: rgba(133, 137, 194, 0.6);
}

.sc-lists {
	border: 1px solid rgba(64, 68, 27, 0.815);
	background: rgba(137, 133, 194, 0.6);
}

.so-lists {
	border: 1px solid rgba(68, 27, 41, 0.815);
	background: rgba(194, 133, 159, 0.6);	
}