SANGOカスタマイズまとめ

<div class="nukadoko-section-heading-center">
  <span class="nukadoko-center-line" aria-hidden="true"></span>

  <span class="nukadoko-center-content">
    <svg xmlns="http://www.w3.org/2000/svg"
         width="24" height="24"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
         stroke-width="1.7"
         stroke-linecap="round"
         stroke-linejoin="round"
         aria-hidden="true">
      <path d="M12 21v-9"></path>
      <path d="M12 15C7 15 4 12 4 7c5 0 8 3 8 8Z"></path>
      <path d="M12 12c0-5 3-8 8-8 0 5-3 8-8 8Z"></path>
    </svg>
    <h2>ここに見出しを入力</h2>
  </span>

  <span class="nukadoko-center-line" aria-hidden="true"></span>
</div>

/* 中央寄せのセクション見出し */
.nukadoko-section-heading-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
}

/* 左右のライン */
.nukadoko-center-line {
  width: 48px;
  height: 1px;
  flex-shrink: 0;
  background-color: #カラーコード;
}

/* アイコン＋見出し */
.nukadoko-center-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.nukadoko-center-content svg {
  flex-shrink: 0;
  color: #カラーコード;
}

.nukadoko-center-content h2 {
  margin: 0;
  padding: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: #カラーコード;
}

/* スマートフォン */
@media (max-width: 767px) {
  .nukadoko-section-heading-center {
    gap: 10px;
  }

  .nukadoko-center-line {
    width: 20px;
  }

  .nukadoko-center-content {
    gap: 7px;
  }

  .nukadoko-center-content h2 {
    font-size: 18px;
  }

  .nukadoko-center-content svg {
    width: 20px;
    height: 20px;
  }
}

<div class="blut-sango-section-heading">
  <span class="blut-sango-section-icon" aria-hidden="true">
    <svg xmlns="http://www.w3.org/2000/svg"
         width="24" height="24"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
         stroke-width="1.7"
         stroke-linecap="round"
         stroke-linejoin="round">
      <rect x="3" y="4" width="18" height="16" rx="2"></rect>
      <path d="M3 9h18M9 9v11"></path>
    </svg>
  </span>
  <h2>ここに見出しを入力</h2>
</div>

/* 左揃えセクション見出し */
.blut-sango-section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 32px 0 24px;
}

.blut-sango-section-heading h2 {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  font-size: 20px !important;
  line-height: 1.5;
  font-weight: 700;
  color: #カラーコード;
}

.blut-sango-section-heading::after {
  content: "";
  flex: 1;
  min-width: 20px;
  height: 1px;
  background: #カラーコード;
}

.blut-sango-section-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  color: #カラーコード;
}

.blut-sango-section-icon svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 600px) {
  .blut-sango-section-heading h2 {
    font-size: 18px !important;
  }

  .blut-sango-section-icon svg {
    width: 21px;
    height: 21px;
  }
}

<style>
/* タイトル付きチェックリスト */
.blut-disposal-checklist {
  background: #カラーコード;
  border: 1px solid #カラーコード;
  border-radius: 10px;
  padding: 18px 20px;
  margin: 1.5em 0;
  box-sizing: border-box;
}

.blut-disposal-checklist ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.blut-disposal-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  list-style: none !important;
  margin: 0 0 12px;
  padding: 0;
  color: #カラーコード;
  line-height: 1.8;
}

.blut-disposal-checklist li:last-child {
  margin-bottom: 0;
}

.blut-disposal-checklist .check-icon {
  display: flex;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 0.35em;
  border: 2px solid #カラーコード;
  border-radius: 50%;
  color: #カラーコード;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .blut-disposal-checklist {
    padding: 14px 15px;
  }

  .blut-disposal-checklist li {
    gap: 8px;
    margin-bottom: 10px;
  }
}
</style>

<div class="blut-disposal-checklist">

  <div style="
    display: flex;
    align-items: center;
    gap: 9px;
    color: #カラーコード;
    font-weight: 700;
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #カラーコード;
  ">
    <svg xmlns="http://www.w3.org/2000/svg"
         width="20" height="20"
         viewBox="0 0 24 24"
         fill="none"
         stroke="#カラーコード"
         stroke-width="2"
         stroke-linecap="round"
         stroke-linejoin="round"
         style="flex-shrink: 0;"
         aria-hidden="true">
      <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
      <line x1="12" y1="9" x2="12" y2="13"></line>
      <line x1="12" y1="17" x2="12.01" y2="17"></line>
    </svg>
    <span>ここにチェックリストのタイトルを入力</span>
  </div>

  <ul>
    <li>
      <span class="check-icon" aria-hidden="true">✓</span>
      <span>ここにチェック項目1を入力</span>
    </li>
    <li>
      <span class="check-icon" aria-hidden="true">✓</span>
      <span>ここにチェック項目2を入力</span>
    </li>
    <li>
      <span class="check-icon" aria-hidden="true">✓</span>
      <span>ここにチェック項目3を入力</span>
    </li>
  </ul>

</div>