@charset 'UTF-8';
/**
* common
**/
:root{
  --black: #000;
  --gray: #333;
  --gray2: #a5a5a5;
  --white: #fff;
  --red: #ff0000;
  --red2: #ffadad;
}
* {
  box-sizing: border-box;
  margin: 0;
}
html {
  block-size: 100%;
}
body {
  font-size: 62.5%;
}
h2 {
  border: 0px solid var(--black);
  border-top-width: 1px;
  border-bottom-width: 1px;
  padding: 5px 0;
  margin: 0 0 10px;
}
a {
  color: var(--gray);
}
/**
* component
**/
[class*='modan']{
  margin: 10px 10px 20px;
}
/**
* modan1
**/
.btn {
  margin-left: auto;
  width: max-content;
  display: block;
  padding: 10px 20px;
  background: var(--black);
  color: var(--white);
}
/**
* modan2
**/
.btn2 {
  display: grid;
  place-items: center;
}
/**
* modan3
**/
.btn-area {
  color: var(--gray);
  background-color: var(--gray2);
  padding: 10px 20px;
  width: 100px;
  display: inline-flex;
  justify-content: center;
}
.btn-area.danger {
  color: var(--red);
  background-color: var(--red2);
}
.btn-area a {
  color: currentColor;
}
/**
* modan4
**/
.ul-list {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  column-gap: 10px;
}
.list {
  width: 50px;
  height:  50px;
  color: var(--white);
  background-color: var(--gray);
  font-size: 1.4rem;
  text-align: center;
  line-height: 50px;
}