@charset "utf-8";

/* post-parts.css
   ブログ記事（.post-content）内で使う装飾パーツ集
--------------------------------------- */

/* 見出し
ーーーーーーーーーーーーーーーーーーーーーーーーーー */

.post-content h2 {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.5;
  background: #F2F8F4;
  border-left: solid 5px #007A46;
  padding: .7em 1em;
  margin-top: 2.5em;
  margin-bottom: 1.2em;
}

.post-content h3 {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5;
  border-bottom: solid 2px #007A46;
  padding-bottom: .4em;
  margin-top: 2em;
  margin-bottom: 1em;
}

.post-content h4 {
  font-size: 17px;
  font-weight: bold;
  line-height: 1.5;
  color: #007A46;
  margin-top: 1.5em;
  margin-bottom: .8em;
}

.post-content h4::before {
  content: "■";
  margin-right: .4em;
}

@media screen and (max-width: 768px) {
  .post-content h2 {
    font-size: 20px;
  }

  .post-content h3 {
    font-size: 18px;
  }

  .post-content h4 {
    font-size: 16px;
  }
}


/* マーカー
ーーーーーーーーーーーーーーーーーーーーーーーーーー */

.post-content .marker {
  background: linear-gradient(transparent 60%, #FFF3A0 60%);
  font-weight: bold;
}

.post-content .marker-green {
  background: linear-gradient(transparent 60%, #C9E7D6 60%);
  font-weight: bold;
}

.post-content .marker-red {
  background: linear-gradient(transparent 60%, #FFD6D6 60%);
  font-weight: bold;
}

.post-content .text-red {
  color: #CD3636;
  font-weight: bold;
}

.post-content .text-green {
  color: #007A46;
  font-weight: bold;
}

.post-content .text-big {
  font-size: 1.3em;
  font-weight: bold;
}


/* ポイントボックス
ーーーーーーーーーーーーーーーーーーーーーーーーーー */

.post-content .box-point {
  position: relative;
  border: solid 2px #007A46;
  border-radius: 8px;
  padding: 1.5em 1.2em 1.2em;
  margin: 2.5em 0 2em;
}

.post-content .box-point::before {
  content: "\f058"" POINT";
  font-family: "Font Awesome 6 Free", 'Noto Serif JP', serif;
  font-weight: 900;
  position: absolute;
  top: -0.9em;
  left: 1em;
  background: #007A46;
  color: #fff;
  font-size: 14px;
  letter-spacing: .1em;
  padding: .2em 1em;
  border-radius: 50px;
  line-height: 1.5;
}

.post-content .box-point p:last-child {
  margin-bottom: 0;
}


/* 注意ボックス
ーーーーーーーーーーーーーーーーーーーーーーーーーー */

.post-content .box-attention {
  position: relative;
  border: solid 2px #CD3636;
  border-radius: 8px;
  background: #FFF7F7;
  padding: 1.5em 1.2em 1.2em;
  margin: 2.5em 0 2em;
}

.post-content .box-attention::before {
  content: "\f071"" 注意";
  font-family: "Font Awesome 6 Free", 'Noto Serif JP', serif;
  font-weight: 900;
  position: absolute;
  top: -0.9em;
  left: 1em;
  background: #CD3636;
  color: #fff;
  font-size: 14px;
  letter-spacing: .1em;
  padding: .2em 1em;
  border-radius: 50px;
  line-height: 1.5;
}

.post-content .box-attention p:last-child {
  margin-bottom: 0;
}


/* メモボックス
ーーーーーーーーーーーーーーーーーーーーーーーーーー */

.post-content .box-memo {
  position: relative;
  border: solid 2px #E78503;
  border-radius: 8px;
  background: #FFFBF3;
  padding: 1.5em 1.2em 1.2em;
  margin: 2.5em 0 2em;
}

.post-content .box-memo::before {
  content: "\f303"" メモ";
  font-family: "Font Awesome 6 Free", 'Noto Serif JP', serif;
  font-weight: 900;
  position: absolute;
  top: -0.9em;
  left: 1em;
  background: #E78503;
  color: #fff;
  font-size: 14px;
  letter-spacing: .1em;
  padding: .2em 1em;
  border-radius: 50px;
  line-height: 1.5;
}

.post-content .box-memo p:last-child {
  margin-bottom: 0;
}


/* シンプルボックス・背景ボックス
ーーーーーーーーーーーーーーーーーーーーーーーーーー */

.post-content .box-simple {
  border: solid 1px #ccc;
  border-radius: 8px;
  padding: 1.2em;
  margin: 2em 0;
}

.post-content .box-simple p:last-child {
  margin-bottom: 0;
}

.post-content .box-bg {
  background: #F2F8F4;
  border-radius: 8px;
  padding: 1.2em;
  margin: 2em 0;
}

.post-content .box-bg p:last-child {
  margin-bottom: 0;
}


/* タイトル付きボックス
ーーーーーーーーーーーーーーーーーーーーーーーーーー */

.post-content .box-title {
  border: solid 2px #007A46;
  border-radius: 8px;
  overflow: hidden;
  margin: 2em 0;
}

.post-content .box-title-label {
  background: #007A46;
  color: #fff;
  font-weight: bold;
  padding: .4em 1.2em;
  margin-bottom: 0;
}

.post-content .box-title-body {
  padding: 1.2em;
}

.post-content .box-title-body p:last-child {
  margin-bottom: 0;
}


/* Q&A ボックス
ーーーーーーーーーーーーーーーーーーーーーーーーーー */

.post-content .qa-box {
  border: solid 1px #ccc;
  border-radius: 8px;
  overflow: hidden;
  margin: 2em 0;
}

.post-content .qa-q,
.post-content .qa-a {
  position: relative;
  padding: 1em 1.2em 1em 3.2em;
  margin-bottom: 0;
}

.post-content .qa-q {
  background: #F2F8F4;
  font-weight: bold;
  border-bottom: solid 1px #ccc;
}

.post-content .qa-q::before,
.post-content .qa-a::before {
  position: absolute;
  left: 1em;
  top: .85em;
  font-weight: bold;
  font-size: 18px;
}

.post-content .qa-q::before {
  content: "Q.";
  color: #007A46;
}

.post-content .qa-a::before {
  content: "A.";
  color: #CD3636;
}


/* チェックリスト・番号リスト
ーーーーーーーーーーーーーーーーーーーーーーーーーー */

.post-content .list-check {
  border: solid 1px #ccc;
  border-radius: 8px;
  padding: 1.2em 1.2em 1.2em 1em;
  margin: 2em 0;
}

.post-content .list-check li {
  position: relative;
  padding-left: 1.8em;
  margin-bottom: .5em;
}

.post-content .list-check li:last-child {
  margin-bottom: 0;
}

.post-content .list-check li::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #007A46;
  position: absolute;
  left: 0;
}

.post-content .list-num {
  counter-reset: num;
  margin: 2em 0;
}

.post-content .list-num li {
  counter-increment: num;
  position: relative;
  padding-left: 2.4em;
  margin-bottom: .8em;
}

.post-content .list-num li::before {
  content: counter(num);
  position: absolute;
  left: 0;
  top: .15em;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.6em;
  height: 1.6em;
  background: #007A46;
  color: #fff;
  font-size: .9em;
  font-weight: bold;
  border-radius: 50%;
  line-height: 1;
}


/* ステップ（手順）
ーーーーーーーーーーーーーーーーーーーーーーーーーー */

.post-content .step-list {
  counter-reset: step;
  margin: 2em 0;
}

.post-content .step-list > li {
  counter-increment: step;
  position: relative;
  padding-left: 3.6em;
  padding-bottom: 1.8em;
}

.post-content .step-list > li::before {
  content: "STEP\A" counter(step);
  white-space: pre;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 3.4em;
  height: 3.4em;
  background: #007A46;
  color: #fff;
  font-size: .7em;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  border-radius: 50%;
}

.post-content .step-list > li::after {
  content: "";
  position: absolute;
  left: 1.05em;
  top: 2.4em;
  bottom: .2em;
  border-left: dashed 2px #007A46;
}

.post-content .step-list > li:last-child {
  padding-bottom: 0;
}

.post-content .step-list > li:last-child::after {
  display: none;
}

.post-content .step-ttl {
  font-weight: bold;
  font-size: 17px;
  margin-bottom: .3em;
}

.post-content .step-list p {
  margin-bottom: 0;
}


/* テーブル
ーーーーーーーーーーーーーーーーーーーーーーーーーー */

.post-content .table-scroll {
  overflow-x: auto;
  margin: 2em 0;
  -webkit-overflow-scrolling: touch;
}

.post-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  font-size: 15px;
}

.post-content .table-scroll table {
  margin: 0;
  min-width: 500px;
}

.post-content table th,
.post-content table td {
  border: solid 1px #ccc;
  padding: .8em 1em;
  text-align: left;
  vertical-align: top;
}

.post-content table thead th {
  background: #007A46;
  color: #fff;
  text-align: center;
}

.post-content table tbody th {
  background: #F2F8F4;
  width: 30%;
}

.post-content table tbody tr:nth-child(even) td {
  background: #FAFAFA;
}

@media screen and (max-width: 768px) {
  .post-content table {
    font-size: 14px;
  }

  .post-content table th,
  .post-content table td {
    padding: .6em .8em;
  }
}


/* 引用
ーーーーーーーーーーーーーーーーーーーーーーーーーー */

.post-content blockquote {
  position: relative;
  background: #FAFAFA;
  border-left: solid 4px #ccc;
  border-radius: 0 8px 8px 0;
  padding: 1.2em 1.2em 1.2em 3em;
  margin: 2em 0;
  color: #555;
}

.post-content blockquote::before {
  content: "\f10d";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: .8em;
  top: .8em;
  color: #ccc;
  font-size: 18px;
}

.post-content blockquote p:last-child {
  margin-bottom: 0;
}

.post-content blockquote cite {
  display: block;
  font-size: 13px;
  font-style: normal;
  text-align: right;
  margin-top: .5em;
}


/* 吹き出し
ーーーーーーーーーーーーーーーーーーーーーーーーーー */

.post-content .speech {
  display: flex;
  align-items: flex-start;
  margin: 2em 0;
}

.post-content .speech.-right {
  flex-direction: row-reverse;
}

.post-content .speech-icon {
  width: 60px;
  flex-shrink: 0;
  text-align: center;
}

.post-content .speech-icon img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0;
}

.post-content .speech-icon .speech-name {
  font-size: 11px;
  margin-top: .3em;
  margin-bottom: 0;
}

.post-content .speech-text {
  position: relative;
  background: #F2F8F4;
  border-radius: 8px;
  padding: 1em 1.2em;
  margin-left: 1.2em;
  margin-bottom: 0;
}

.post-content .speech.-right .speech-text {
  background: #FFF9E8;
  margin-left: 0;
  margin-right: 1.2em;
}

.post-content .speech-text::before {
  content: "";
  position: absolute;
  top: 1.2em;
  left: -8px;
  border-style: solid;
  border-width: 6px 10px 6px 0;
  border-color: transparent #F2F8F4 transparent transparent;
}

.post-content .speech.-right .speech-text::before {
  left: auto;
  right: -8px;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #FFF9E8;
}


/* ボタン・リンクボックス
ーーーーーーーーーーーーーーーーーーーーーーーーーー */

.post-content .btn-post-wrap {
  text-align: center;
  margin: 2em 0;
}

.post-content .btn-post {
  display: inline-block;
  background: #259D57;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  border-radius: 50px;
  padding: 1em 3.5em 1em 2.5em;
  position: relative;
  min-width: 280px;
  transition: opacity .3s;
}

.post-content .btn-post:hover {
  opacity: .8;
}

.post-content .btn-post::before {
  position: absolute;
  content: "";
  right: 20px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
}

.post-content .btn-post.-orange {
  background: #E78503;
}

.post-content .link-box {
  display: block;
  border: solid 1px #ccc;
  border-radius: 8px;
  padding: 1em 3em 1em 1.2em;
  margin: 2em 0;
  text-decoration: none;
  color: #333;
  position: relative;
  transition: background .3s;
}

.post-content .link-box:hover {
  background: #F2F8F4;
}

.post-content .link-box::before {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid #007A46;
  border-right: 2px solid #007A46;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
}

.post-content .link-box-label {
  display: block;
  font-size: 12px;
  color: #007A46;
  font-weight: bold;
  margin-bottom: .2em;
}

.post-content .link-box-ttl {
  font-weight: bold;
  margin-bottom: 0;
}


/* 区切り線
ーーーーーーーーーーーーーーーーーーーーーーーーーー */

.post-content hr {
  border: none;
  border-top: dashed 2px #ccc;
  margin: 3em 0;
}