@charset "utf-8";

/* ブログ記事のレイアウト 2026.02.13以降適用分 */
/* ==========================================
     段落（pタグ）下の余白調整
   ========================================== */
article .post-content p {
    margin-top: 0;
    margin-bottom: 1.25rem;
    line-height: 1.8;       /* 行間を少し広げて読みやすく */
}

/* スマホ表示の調整 */
@media screen and (max-width: 767px) {
article .post-content p {
        margin-bottom: 1.0rem; /* スマホ：1文字分程度の隙間（約16px） */
    }
}

/* ==========================================
     画像下の余白の調整・ スマホ表示（画面幅766px以下）の調整
   ========================================== */
/*   2カラム・3カラムの画像下余白の調整  */
@media (min-width: 767px) {
.post-content .wp-block-column p {
    margin-bottom: 0;
}
}

.post-content img {
    margin-bottom:  30px;
}

.post-content figure{
    margin-bottom: 0;
}

.post-content .wp-block-columns{
    margin-bottom: 20px;
}

.post-content .wp-block-column .wp-block-image img{
    margin-bottom: 20px;
}

@media (max-width: 766px) {
.post-content .wp-block-column .wp-block-image img{
    margin-bottom: 10px;
}
}

@media (max-width: 766px) {
    /* カラム内の画像下の不要な余白を消す */
    .post-content .wp-block-column img {
        margin-bottom: 0 ;
    }

    /* カラム同士の隙間をスマホ用に調整 */
    .post-content .wp-block-columns {
        gap: 0 ;
    }

    /* 文字の位置を自然にするための調整 */
    .post-content .wp-block-column {
        text-align: center; /* 枠の中で中央に寄せる */
        padding: 0 15px;    /* 左右に余白を作り端に寄るのを防ぐ */
    }

    /* 文章自体は左揃えにしつつ、中央に配置されるようにする */
    .post-content .wp-block-column p {
        display: inline-block;
        text-align: left;
        max-width: 100%;
    }

  /*pタグ下のmarginを調整*/
    .post-content p.column-space{
        margin-bottom: 2rem;
}
}

/* ==========================================
     見出しの設定
   ========================================== */
.post-content h2 {
    margin: 4rem 0 2rem !important;
    padding: 1.5em;
    line-height: 1.25 !important;
}

.post-content h3 {
    line-height: 1.5;
    border-left: solid 8px;
    padding: 0.4rem 1rem;
    margin: 3rem 0 1.5rem !important;
    font-size: 1.3rem !important;
}

.post-content h4 {
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
    border-left: double 4px #103256;
    padding-left: 1rem;
    margin: 2rem 0 1rem !important;
    font-size: 1.125rem !important;
}

.post-content .step-label {
    margin: 0 0 1rem 0.2rem !important;
    font-weight: bold;
    line-height: 1.2;
 display: table;
    width: 100%;
    table-layout: fixed;   /* カラム内で幅を安定させる */
}

@media (max-width: 766px) {
.post-content .step-label{
    margin: 0 0 0.2rem 0.5rem !important;
}
}

.post-content .step-number{
    display: table-cell;
    width: 20px;
}

.post-content .step-text{
    display: table-cell;
    width: auto;
}

@media (max-width: 766px) {
.post-content .step-text{
    max-width: 450px;
}
}

/* ==========================================
     見出しのカラー設定（カテゴリごとに色を分ける）
   ========================================== */
/*  青色（blue）の見出し設定 */
.post-content h2.color-blue{
    background-color: #2a71c3;
    color: #ffffff;
}

.post-content h3.color-blue{
    border-left-color: #2a71c3;
}

.post-content h4.color-blue{
    border-left-color: #2a71c3;
}

.post-content .step-label.color-blue {
        color: #2a71c3;
}

/*  紺色（navy）の見出し設定 */
.post-content h2.color-navy{
    background-color: #103256;
    color: #ffffff;
}

.post-content h3.color-navy{
    border-left-color: #103256;
}

.post-content h4.color-navy{
    border-left-color: #103256;
}

.post-content .step-label.color-navy {
        color: #103256;
}

/*  ネムリエカラーの緑色（green）の見出し設定 */
.post-content h2.color-green{
    background-color: #35b4b9;
    color: #ffffff;
}

.post-content h3.color-green{
    border-left-color: #35b4b9;
}

.post-content h4.color-green{
    border-left-color: #35b4b9;
}

.post-content .step-label.color-green {
        color: #35b4b9;
}

@media (max-width: 766px) {
.post-content .res-space{
        height: 30px;
}
}

/* ==========================================
     レスポンシブスペーサーの基本設定 
   ========================================== */
/* レスポンシブスペーサー共通 */
.custom-spacer {
    display: block;
    width: 100%;
}

/* サイズ別：PCの高さ */
.spacer-l { height: 80px; }
.spacer-m { height: 50px; }
.spacer-s { height: 20px; }

/* スマホ表示（767px以下）の高さ */
@media screen and (max-width: 767px) {
    .spacer-l { height: 40px !important; }
    .spacer-m { height: 25px !important; }
    .spacer-s { height: 15px !important; }
}

/*見本表示のため、上部のpタグのmarginを消す*/
.post-content p.no-space{
    margin-bottom: 0;
}

/* ==========================================
     自作目次の基本設定 
   ========================================== */
.simple-toc {
    background-color: #f5f5f5; /* 薄いグレー背景 */
    padding: 30px 40px;
    margin: 30px 0;
}

.simple-toc-title {
    text-align: center;
    font-weight: bold;
    font-size: 1.25rem;
    color: #333;
    margin-bottom: 20px;
}

/* 標準のol（数字）のスタイル */
.simple-toc ol {
    margin: 0;
    padding-left: 1.5em; /* 数字が表示されるスペース */
    list-style-type: decimal; /* 標準の 1. 2. 3. を表示 */
}

.simple-toc li {
    margin-bottom: 12px;
    line-height: 1.6;
}

.simple-toc a {
    color: #333;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.simple-toc a:hover {
    color: #666;
}

/*グロナビの高さ分、リンク先の位置を調整*/
@media screen and (min-width:768px){
.post-content h2.color-navy, 
.post-content h2.color-green,
.post-content h2.color-blue,
.post-content h3.color-navy, 
.post-content h3.color-green,
.post-content h3.color-blue{
   scroll-margin-top: 140px; 
}
}

/* ブログ記事のレイアウト 2026.03.09以降適用分 */
/* ==========================================
     画像下の余白の調整・ スマホ表示（画面幅766px以下）の調整
   ========================================== */
/*   横並び（画像＋テキスト）下余白の調整  */
@media screen and (min-width:768px){
.post-content .wp-block-column .no-margin img{
   margin-bottom: 0 !important;
}
}

@media screen and (max-width:767px){
.post-content .column-inarow {
       flex-direction: column-reverse;
}
}