@charset "UTF-8";
/*==========================================================
 Nobol ブログ装飾パーツ (blog decoration parts)
 - post_type=post の本文でのみ使用
 - 本番(.post-content)と編集画面(.editor-styles-wrapper)の
   両方で同一表示になるよう、クラス基準で記述している
 - デザイン定義: reference/ブログ装飾パーツ一覧.html
 - Sassソース: sass/page/post/parts.scss (手動で並行管理)
   ※本ファイルが実際に読み込まれる。編集時は両方を更新すること
==========================================================*/

/*----------------------------------------------------------
 02 マーカー・強調 (インラインフォーマット / エディタツールバー)
----------------------------------------------------------*/
.nbl-marker {
  background: linear-gradient(transparent 62%, rgba(78, 185, 195, 0.35) 62%);
  font-weight: 700;
  padding: 0 2px;
}
.nbl-marker-y {
  background: linear-gradient(transparent 62%, rgba(242, 212, 120, 0.55) 62%);
  font-weight: 700;
  padding: 0 2px;
}
.nbl-uline {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-color: #4EB9C3;
}
.nbl-em {
  color: #2A8C94;
  font-weight: 700;
}
.nbl-boten {
  font-weight: 700;
  -webkit-text-emphasis: dot #333333;
  text-emphasis: dot #333333;
  text-emphasis-position: under left;
}

/*----------------------------------------------------------
 03 チェックリスト
----------------------------------------------------------*/
ul.nbl-checklist {
  list-style: none;
  margin: 24px 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
ul.nbl-checklist > li {
  position: relative;
  margin: 0;
  padding: 0 0 0 30px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.02em;
}
ul.nbl-checklist > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='9' fill='%23E8F6F7'/%3E%3Cpath d='M6 10.2 L9 13 L14.2 7.2' stroke='%234EB9C3' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center center / contain;
}

/*----------------------------------------------------------
 04 数字付きリスト
----------------------------------------------------------*/
ol.nbl-numlist {
  list-style: none;
  margin: 24px 0;
  padding: 0;
  display: grid;
  gap: 16px;
  counter-reset: nbl-num;
}
ol.nbl-numlist > li {
  position: relative;
  margin: 0;
  padding: 2px 0 0 40px;
  min-height: 26px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.02em;
  counter-increment: nbl-num;
}
ol.nbl-numlist > li::before {
  content: counter(nbl-num);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #4EB9C3;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*----------------------------------------------------------
 06 ボックス (POINT / 注意 / 補足)
----------------------------------------------------------*/
.nbl-box {
  position: relative;
  border-radius: 8px;
  padding: 28px 28px 22px;
  margin: 28px 0;
}
.nbl-box::before {
  position: absolute;
  top: -12px;
  left: 20px;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 4px 14px;
  border-radius: 999px;
}
.nbl-box .nbl-box__text {
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
.nbl-box--point {
  background: #F0FAFB;
}
.nbl-box--point::before {
  content: "POINT";
  background: #4EB9C3;
}
.nbl-box--notice {
  background: #FBF7EC;
}
.nbl-box--notice::before {
  content: "注意";
  background: #E2A93B;
}
/* 補足 (グレー枠・左ラベル) */
.nbl-note {
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  padding: 22px 28px;
  margin: 28px 0;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.nbl-note::before {
  content: "補足";
  flex-shrink: 0;
  margin-top: 2px;
  color: #888888;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  padding: 3px 10px;
}
.nbl-note .nbl-note__text {
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: #555555;
}

/*----------------------------------------------------------
 05 表 (ティールヘッダー / 比較表)
----------------------------------------------------------*/
.wp-block-table.nbl-table th,
.wp-block-table.nbl-table td {
  padding: 12px 16px;
  border: 1px solid #E5E5E5;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.02em;
}
/* ティールヘッダー表 */
.wp-block-table.nbl-table--teal thead th {
  background: #4EB9C3;
  color: #FFFFFF;
  font-weight: 700;
  text-align: left;
  border-color: #4EB9C3;
}
.wp-block-table.nbl-table--teal tbody th {
  background: #F6F6F6;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}
/* 比較表 (推奨列を強調) */
.wp-block-table.nbl-table--compare thead th {
  background: #F6F6F6;
  font-weight: 700;
  text-align: center;
}
.wp-block-table.nbl-table--compare thead th:first-child {
  text-align: left;
}
.wp-block-table.nbl-table--compare tbody th,
.wp-block-table.nbl-table--compare tbody td:first-child {
  font-weight: 700;
  text-align: left;
  color: #333333;
}
.wp-block-table.nbl-table--compare tbody td {
  text-align: center;
  color: #888888;
}
/* 推奨列 = 最終列を強調（セルにクラスが付かなくても効くよう last-child で指定） */
.wp-block-table.nbl-table--compare thead th:last-child,
.wp-block-table.nbl-table--compare thead th.nbl-col-reco {
  background: #E8F6F7;
  color: #2A8C94;
}
.wp-block-table.nbl-table--compare tbody td:last-child,
.wp-block-table.nbl-table--compare td.nbl-col-reco {
  background: #FBFEFE;
  color: #2A8C94;
  font-weight: 700;
}

/*----------------------------------------------------------
 08 あわせて読みたい (サイト内関連リンク)
----------------------------------------------------------*/
.nbl-related {
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  padding: 20px 24px;
  margin: 24px 0;
}
.nbl-related .nbl-related__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.nbl-related .nbl-related__head::before {
  content: "";
  width: 20px;
  height: 2px;
  background: #4EB9C3;
  flex-shrink: 0;
}
.nbl-related ul.nbl-related__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.nbl-related ul.nbl-related__list > li {
  position: relative;
  margin: 0;
  padding: 0 0 0 18px;
  font-weight: 400;
}
.nbl-related ul.nbl-related__list > li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 0;
  color: #4EB9C3;
  font-weight: 700;
  line-height: 1.7;
  font-size: 14px;
}
.nbl-related ul.nbl-related__list > li a {
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: #2A8C94;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(78, 185, 195, 0.5);
}
.nbl-related ul.nbl-related__list > li a:hover {
  color: #4EB9C3;
}

/*----------------------------------------------------------
 10 ステップ (手順)
----------------------------------------------------------*/
.nbl-steps {
  margin: 24px 0;
  counter-reset: nbl-step;
}
.nbl-step {
  position: relative;
  padding: 2px 0 28px 60px;
}
.nbl-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 44px;
  bottom: 0;
  width: 2px;
  background: #E8F6F7;
}
.nbl-step::before {
  counter-increment: nbl-step;
  content: "STEP\A"counter(nbl-step, decimal-leading-zero);
  white-space: pre;
  text-align: center;
  line-height: 1.15;
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 2px solid #4EB9C3;
  background: #FFFFFF;
  color: #2A8C94;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.nbl-step .nbl-step__title {
  margin: 0 0 6px;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.nbl-step .nbl-step__body {
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: #555555;
}

/*----------------------------------------------------------
 11 FAQ
----------------------------------------------------------*/
.nbl-faq {
  display: grid;
  gap: 20px;
  margin: 24px 0;
}
.nbl-faq__item {
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  overflow: hidden;
}
.nbl-faq .nbl-faq__q {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0;
  padding: 18px 22px;
  background: #F0FAFB;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.02em;
}
.nbl-faq .nbl-faq__q::before {
  content: "Q";
  flex-shrink: 0;
  color: #4EB9C3;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}
.nbl-faq .nbl-faq__a {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0;
  padding: 18px 22px;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: #555555;
}
.nbl-faq .nbl-faq__a::before {
  content: "A";
  flex-shrink: 0;
  color: #888888;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

/*----------------------------------------------------------
 12 この記事を書いた人
----------------------------------------------------------*/
.nbl-author {
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  overflow: hidden;
  margin: 24px 0;
}
.nbl-author .nbl-author__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  padding: 12px 24px;
  background: #F6F6F6;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.nbl-author .nbl-author__head::after {
  content: "Author";
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: #4EB9C3;
}
.nbl-author__body {
  display: flex;
  gap: 24px;
  padding: 24px;
  align-items: flex-start;
}
.nbl-author__avatar {
  width: 80px;
  height: 80px;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  background: #F0FAFB;
  border: 1px solid #E5E5E5;
}
.nbl-author__avatar img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}
.nbl-author__main {
  min-width: 0;
  flex: 1;
}
.nbl-author .nbl-author__name {
  margin: 0 0 8px;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.nbl-author .nbl-author__desc {
  margin: 0 0 16px;
  padding: 0;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: #555555;
}

/*----------------------------------------------------------
 13 CTA (ボタン / お問い合わせボックス)
----------------------------------------------------------*/
/* ボタン共通 (コアボタンブロックに付与) */
.wp-block-button.nbl-cta-primary .wp-block-button__link {
  background: #14BDBC;
  color: #FFFFFF;
  border-radius: 999px;
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.wp-block-button.nbl-cta-primary .wp-block-button__link:hover {
  background: #2A8C94;
}
.wp-block-button.nbl-cta-ghost .wp-block-button__link {
  background: transparent;
  color: #333333;
  border: 1px solid #333333;
  border-radius: 4px;
  padding: 13px 32px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.wp-block-button.nbl-cta-ghost .wp-block-button__link:hover {
  border-color: #4EB9C3;
  color: #2A8C94;
}
/* お問い合わせCTAボックス */
.nbl-ctabox {
  background: #F0FAFB;
  border-radius: 8px;
  padding: 32px;
  text-align: center;
  margin: 24px 0;
}
.nbl-ctabox .nbl-ctabox__eyebrow {
  margin: 0 0 6px;
  padding: 0;
  font-size: 13px;
  letter-spacing: 0.15em;
  color: #4EB9C3;
}
.nbl-ctabox .nbl-ctabox__title {
  margin: 0 0 8px;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.nbl-ctabox .nbl-ctabox__text {
  margin: 0 0 20px;
  padding: 0;
  font-size: 14px;
  line-height: 1.7;
  color: #555555;
}
/* ボタンブロックの並び（コアCSSに依存せず崩れないよう保険で指定） */
.nbl-author .wp-block-buttons,
.nbl-ctabox .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.nbl-ctabox .wp-block-buttons {
  justify-content: center;
}

/*----------------------------------------------------------
 コアGroupブロックの inner-container 差異吸収
 （WordPressのバージョンによりGroupが .wp-block-group__inner-container
 でネストする場合があるため、grid/flexの直下子を維持する）
----------------------------------------------------------*/
.nbl-box > .wp-block-group__inner-container,
.nbl-note > .wp-block-group__inner-container,
.nbl-faq > .wp-block-group__inner-container,
.nbl-faq__item > .wp-block-group__inner-container,
.nbl-steps > .wp-block-group__inner-container,
.nbl-step > .wp-block-group__inner-container,
.nbl-author > .wp-block-group__inner-container,
.nbl-author__body > .wp-block-group__inner-container,
.nbl-author__main > .wp-block-group__inner-container,
.nbl-related > .wp-block-group__inner-container,
.nbl-ctabox > .wp-block-group__inner-container {
  display: contents;
}

/*----------------------------------------------------------
 レスポンシブ
----------------------------------------------------------*/
@media screen and (max-width: 768px) {
  .nbl-author__body {
    flex-direction: column;
    gap: 16px;
    align-items: center;
    text-align: center;
  }
  .nbl-author__main {
    text-align: left;
  }
  .nbl-ctabox {
    padding: 24px 20px;
  }
}