body {
  background-color: var(--main-bg-color);
  position: relative;
  margin: 0;
  padding: 0;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 20%;
  height: 100%;
  background-color: #333;
  z-index: -1;
}

main {
  padding: 0;
  padding-top: 80px;
  display: flex;
  flex-direction: column;
}

section {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  margin: 0;
  padding: 0;
}

p{
  margin-top: 0;
}

.main-title-wrapper{
  text-align: left;
}

.main-title{
  left: 10%;
  transform: translateX(-50%) translateY(-50%);
  color: gray;
}

.title-wrapper {
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-color: transparent; 
}

.title-wrapper h2 {
  font-size: 30px;
  font-weight: 1000;
  text-align: center;
  position: sticky;
  color: #fafafa;
  top: 80px;
}

section h2{
  margin-bottom: 0;
  padding:0.25em 0.5em; /*上下 左右の余白*/
}

@media (max-width: 950px) {
  section .title-wrapper h2{
    writing-mode: vertical-rl;
    text-orientation: mixed;
    background-color: #333;
  }
}

section p{
  padding-left: 20px;
}

section .contents-wrapper {
  padding-left: 8px;;
  width: 80%;
}

.list-wrapper {
  padding-left: 20px;
  padding-bottom: 20px;
}

.list-wrapper h3{
  margin-bottom: 0;
}

.list-wrapper ul {
  padding-left: 8px;
  margin: 0;
  position: relative;
}

.list-wrapper ul li {
  line-height: 1.2;
  padding: 0.5em 0;
  list-style-type: none;
}

.list-wrapper ul li:before {
  display: inline-block;
  content: "＊";
  font-weight: 900;
  color: green;
}
/*============ 応募ボタンのデザイン ============*/
#apply-btn{
    text-decoration:none;
    color:var(--main-font-color);
    font-weight:bold;
    display:block;
    width:135px;
    padding: 0;
    margin:50px;
    border:solid 4px var(--button-color);
    line-height:56px;
    text-align:center;
    transition:0.5s;
  }
  #apply-btn:hover{
    color:var(--sub-font-color);
    background:linear-gradient(var(--button-color), black);
  }