#contents-container {
  background-color: #fff;
  margin: 170px 130px;
}

#mission h1 {
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 45px;
  text-align: left;
  border-bottom: none;
  font-weight: ".secondary";
  display: inline-block;
}

#mission h2 {
  font-size: 24px;
  text-align: left;
  color: #fff;
  background-color: var(--color-brown);
  padding: 10px;;
  margin-top: 20px;
  margin-bottom: 20px;
}

#mission h3 {
  display: inline-block;
  position: relative;
  font-size: 22px;
  text-align: left;
  margin-top: 20px;
  margin-bottom: 20px;
}

#mission h3:before {
  content: "";
  position: absolute;
  left: 50px;
  bottom: -10px; /*下線の上下位置調整*/
  display: inline-block;
  width: 100px; /*下線の幅*/
  height: 3px; /*下線の太さ*/
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translate(-50%); /*位置調整*/
  background-color: var(--color-red);
}

#mission h4 {
  font-size: 14px;
  text-align: left;
}

#mission h5 {
  font-size: 12px;
  text-align: left;
}

p {
  font-size: 14px;
  font-weight: 400;
  /* line-height: 2em; */
}

.mission-contents a {
  color: var(--color-pale-green);
  text-decoration: underline;
}

.mission-contents a:hover {
  text-decoration: none;
}

.bold {
  font-weight: bold;
}

.top-image {
  background-position: center;
  object-fit: cover;
  width: 100%;
  height: 900px;
  margin-bottom: 30px;
}

@media (max-width: 1800px) {
  .top-image {
    height: 770px;
  }
}
@media (max-width: 1500px) {
  .top-image {
    height: 620px;
  }
}
@media (max-width: 1300px) {
  .top-image {
    height: 520px;
  }
}
@media (max-width: 950px) {
  .top-image {
    height: 450px;
  }
}
@media (max-width: 800px) {
  .top-image {
    height: 380px;
  }
}
@media (max-width: 700px) {
  .top-image {
    height: 330px;
  }
}
@media (max-width: 500px) {
  .top-image {
    height: 230px;
    margin-bottom: 0px;
  }
}
@media (max-width: 400px) {
  .top-image {
    height: 180px;
  }
}

.contents-inner {
  margin: 30px 100px;
}

.list-title.red {
  color: var(--color-red);
}

.list-title.green {
  color: var(--color-pale-green);
}

.addtoany_shortcode {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}

.separater {
  height: 1px;
  border-bottom: 1px solid rgb(219, 219, 219);
  margin-top: 30px;
  margin-bottom: 50px;
}

.separater.red {
  border-bottom: 1px solid var(--color-red);
  margin-top: 0px;
}

.separater.green {
  border-bottom: 1px solid var(--color-pale-green);
  margin-top: 0px;
}

img.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

img.alignright {
  padding: 4px;
  margin: 0 0 2px 10px;
  display: inline;
}

img.alignleft {
  padding: 4px;
  margin: 0 10px 2px 0;
  display: inline;
}

.alignright {
  float: right;
}

.alignleft {
  float: left;
}

/* カテゴリ */

#mission li.top-category a {
  color: var(--color-black);
  text-decoration: none;
}

#mission li.top-category a:hover {
  text-decoration: underline;
}

/* 注釈 */
.cmt {
  font-size: 14px;
  background: #f5f5f5;
  padding: 40px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.cmt p {
  margin: 0;
  font-weight: 400;
}
.cmt p::before {
  content: "※";
}

/* 画像左右文字 */
.message-container {
  display: flex;
  flex-direction: row;
  margin-top: 50px;
  margin-bottom: 50px;
}
.message-container.left {
  flex-direction: row-reverse;
}
.message-image {
  width: 50%;
}
.message-image img {
  width: 100%;
  height: auto;
}
.message_contents {
  width: 50%;
  padding-left: 50px;
  padding-right: 50px;
}
.message_contents.left {
  text-align: right;
}

/* 目次 */
.index {
  background-color: #f4f5f0;
}

.index-container {
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 90%;
}

p.index-title {
  font-size: 14px;
  color: #443315;
  font-weight: bold;
}

.index .separater {
  margin-bottom: 10px;
}

.index ul {
  list-style: none;
  font-size: 13px;
  margin: 0 0 0 1em;
  padding: 0;
}

.index li.H2:before {
  content: ""; /* 空の要素作成 */
  width: 5px; /* 幅指定 */
  height: 5px; /* 高さ指定 */
  display: inline-block; /* インラインブロックにする */
  background-color: var(--color-brown);
  border-radius: 50%; /* 要素を丸くする */
  position: relative; /* 位置調整 */
  top: -1px; /* 位置調整 */
  margin-right: 5px; /* 余白指定 */
}

.index li.H3:before,
.index li.H4:before,
.index li.H5:before {
  content: ""; /* 空の要素作成 */
  width: 5px; /* 幅指定 */
  height: 5px; /* 高さ指定 */
  display: inline-block; /* インラインブロックにする */
  border: solid 1px var(--color-brown);
  border-radius: 50%; /* 要素を丸くする */
  position: relative; /* 位置調整 */
  top: -1px; /* 位置調整 */
  margin-right: 5px; /* 余白指定 */
}

.index a {
  color: var(--color-brown);
}

.index a.tocLink.H3,
.index a.tocLink.H4,
.index a.tocLink.H5 {
  font-weight: normal;
}

.index li + li {
  margin-top: 13px;
}

/* リスト */

.list {
  margin-top: 50px;
  margin-bottom: 50px;
}

.circle ul {
  list-style: none; /* デフォルトのアイコンを消す */
  font-size: 14px;
  margin: 0 0 0 1em;
  padding: 0;
}

.circle li:before {
  content: ""; /* 空の要素作成 */
  width: 5px; /* 幅指定 */
  height: 5px; /* 高さ指定 */
  display: inline-block; /* インラインブロックにする */
  background-color: var(--color-pale-green);
  border-radius: 50%; /* 要素を丸くする */
  position: relative; /* 位置調整 */
  top: -1px; /* 位置調整 */
  margin-right: 5px; /* 余白指定 */
}

.circle li p {
  margin-top: 0px;
  margin-left: 10px;
}

.count ol {
  margin: 0 0 0 1em;
  padding: 0;
  list-style: none;
  font-size: 14px;
  counter-reset: ol_li; /* ol_li カウンタをセットする(値もリセット) */
}

.count ol li:before {
  margin-right: 0.25em;
  counter-increment: ol_li; /* ol_li カウンタの値に1加える */
  content: counters(ol_li, "-") ".";
  color: var(--color-pale-green);
}

/* プロフィール */
.profile {
  border: 1px solid;
  border-color: rgb(219, 219, 219);
  box-shadow: 2px 2px rgb(219, 219, 219);
  margin-top: 20px;
  margin-bottom: 20px;
}
.profile .detail {
  font-weight: 350;
}

.profile .container {
  padding: 40px;
}
.profile .title-container {
  display: flex;
  flex-direction: row;
}

.profile .separater {
  margin-top: 15px;
  margin-bottom: 15px;
}

/* テーブル */

/*テーブルヘッダーの背景色*/

.white th {
  background-color: #f0efeb;
  color: black;
}

.brown th {
  background-color: var(--color-brown);
  color: white;
}

table {
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 50px;
  margin-bottom: 50px;
}

table td,
table th {
  border: #c3c3c3 solid 1px;
  padding: 10px;
}

.wp-block-button__link {
  color: #fff;
}

/* ボタン */
#mission .contents-btn {
  margin-top: 30px;
  margin-bottom: 30px;
}

.contents-btn a {
  color: #fff;
  box-shadow: none;
  max-width: 400px;
  text-decoration: none;
}

.contents-btn a::after {
  background-image: none;
}

.white a {
  color: #443315;
  box-shadow: none;
}
.white a::after {
  background-image: none;
}

.contents-btn a:hover {
  background-image: none;
  color: #443315c4;
}

.white a:hover {
  color: #4433157e;
  background-color: #fff;
  border: solid 1px #4433157e;
}

.contents-btn a:hover:after {
  background-image: none;
}

.white a:hover:after {
  background-image: none;
}

/* カード */

#mission .list-container {
  padding-left: 100px;
  padding-right: 100px;
}

.post-list-container {
  display: flex;
  flex-direction: column;
}

#mission .post-list-container .cards {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
}

.cards a:hover {
  text-decoration: none;
}
.post-list-container .explanation p.title {
  font-size: 15px;
  font-weight: 500;
}

#mission .post-list-container .cards .card p {
  font-size: 14px;
  margin-top: 0px;
  margin-bottom: 0px;
}

#mission .post-list-container .explanation .title {
  height: 23px;
}

#mission .post-list-container .cards .card {
  background-color: rgb(243, 243, 243);
  box-shadow: none;
  border: none;
  width: 318px;
  margin: 20px 0px;
}

.post-list-container .card .detail {
  height: 110px;
}

#mission .post-list-container .card p.detail {
  font-size: 12px;
}

/* 汎用 */
.mgl10 {
  margin-left: 10px;
}
.mgr15 {
  margin-right: 15px;
}
.mgb10 {
  margin-bottom: 10px;
}
.w45 {
  width: 45%;
}
.fl_r {
  float: right;
}

.fl_l {
  float: left;
}

.fl_cl_r {
  clear: right;
}

.fl_cl_l {
  clear: left;
}

.fl_cl_all {
  clear: both;
}

@media (max-width: 1200px) {
  #contents-container {
    margin: 100px 100px;
  }
}
@media (max-width: 950px) {
  #contents-container {
    margin: 100px 20px;
  }
}
@media (max-width: 750px) {
  #mission .list-container {
    padding-left: 10px;
    padding-right: 10px;
  }
  #contents-container {
    margin-top: 50px;
  }
  .message_contents {
    padding-left: 5px;
    padding-right: 5px;
  }
  .contents-inner {
    margin: 30px 10px;
  }
  .message-container {
    flex-direction: column;
  }
  .message-container.left {
    flex-direction: column;
  }
  .message_contents.left {
    text-align: left;
  }
  .message_contents {
    width: 100%;
  }
  .message-image {
    width: 100%;
  }
}

@media (max-width: 450px) {
  #mission h1 {
    font-size: 28px;
  }
  #mission h2 {
    font-size: 20px;
  }
  #mission h3 {
    font-size: 22px;
  }
  #mission h4 {
    font-size: 14px;
  }
  #mission h5 {
    font-size: 12px;
  }

  #mission li.tag a {
    font-size: 10px;
  }

  #mission .cards .card {
    margin: 10px 0px;
  }
}

@media (max-width: 350px) {
  .profile .container {
    padding: 10px;
  }
  #mission .post-list-container .cards .card {
    width: 300px;
  }
}
@media only screen and (max-width: 413px) {
  img.alignright {
    padding: 0 0 10px 0;
    margin: 0 auto;
    display: block;
  }

  img.alignleft {
    padding: 0 0 10px 0;
    margin: 0 auto;
    display: block;
  }
  .alignright {
    float: none;
  }

  .alignleft {
    float: none;
  }
}