@charset "UTF-8";
/* ==================================================================
 * 子テーマ独自ブロック用CSS（フロント・ブロックエディタ共通）
 *
 * enqueue_block_assets で読み込むため、フロントとエディタの両方に効きます。
 * ブロックの見た目はここに書き、style.css には書かないでください（二重管理を防ぐため）。
 * ================================================================== */

/*--------------------------------------
 * 装飾付き見出し用
 * -------------------------------------*/

/* ==========================================
 * 全体共通設定（余白の引き締め）
 * ========================================== */
.swell-icon-heading-wrapper {
    position: relative;
    text-align: center;
    /* ▼ 特製ブロック自体の上の余白をキュッと縮めました */
    margin-top: 1.0rem !important; 
    margin-bottom: 2.5rem;
}

/* ▼ 中の見出しが持つ「元々の上マージン」を封じ込めます */
.swell-icon-heading-wrapper :is(h2, h3, h4).wp-block-heading {
    margin-top: 0 !important; 
}


/* ==========================================
 * パターンA：FontAwesome（サイズをガッツリ大きく！）
 * ========================================== */
.swell-icon-heading-wrapper.theme-wm-icon .heading-icon-font-wrap {
    display: block;
    text-align: center;
    margin-bottom: 1.2rem; /* アイコンと見出しの間の空気感 */
    line-height: 1;
}

.swell-icon-heading-wrapper.theme-wm-icon .heading-icon-font-wrap i {
    display: inline-block;
    color: var(--wm-color, var(--color_main));
}

/* 【サイズ連動】前より二回りほど大きく存在感を出しました */
.swell-icon-heading-wrapper.theme-wm-icon:has(h2) .heading-icon-font-wrap i { font-size: 4.2rem; }
.swell-icon-heading-wrapper.theme-wm-icon:has(h3) .heading-icon-font-wrap i { font-size: 3.2rem; }
.swell-icon-heading-wrapper.theme-wm-icon:has(h4) .heading-icon-font-wrap i { font-size: 2.4rem; }


/* ==========================================
 * パターンB：共通ロゴ（サイズを大きく＆余白を最適化）
 * ========================================== */
.swell-icon-heading-wrapper.theme-wm-global::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-image: var(--wm-url);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 【サイズ連動】画像を「80px」まで大きくし、文字と被らないようにトス用余白（padding）も広げています */
/*.swell-icon-heading-wrapper.theme-wm-global:has(h2) { padding-top: 95px; }*/
.swell-icon-heading-wrapper.theme-wm-global:has(h3),
.swell-icon-heading-wrapper.theme-wm-global:has(h2) { padding-top: 85px; }
.swell-icon-heading-wrapper.theme-wm-global:has(h3)::before,
.swell-icon-heading-wrapper.theme-wm-global:has(h2)::before { width: 80px; height: 80px; }

/* .swell-icon-heading-wrapper.theme-wm-global:has(h3) { padding-top: 75px; } */
.swell-icon-heading-wrapper.theme-wm-global:has(h4) { padding-top: 65px; }
.swell-icon-heading-wrapper.theme-wm-global:has(h4)::before { width: 60px; height: 60px; }

/*.swell-icon-heading-wrapper.theme-wm-global:has(h4) { padding-top: 55px; }
.swell-icon-heading-wrapper.theme-wm-global:has(h4)::before { width: 50px; height: 50px; }*/
/* ==========================================
 * 配置：見出しの左（.pos-left）
 * 既存ブロック（.pos-top / クラスなし）には影響しません
 * ========================================== */
.swell-icon-heading-wrapper.pos-left {
    text-align: left;
}
.swell-icon-heading-wrapper.pos-left .icon-heading-content {
    display: flex;
    align-items: center;
    gap: .5em;
}
/* 見出しは左寄せに固定し、残り幅いっぱいに広げる（中央寄せで作った見出しにも適用） */
.swell-icon-heading-wrapper.pos-left :is(h2, h3, h4).wp-block-heading {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0 !important;
    text-align: left;
}

/* パターンA：Font Awesome を左に */
.swell-icon-heading-wrapper.theme-wm-icon.pos-left .heading-icon-font-wrap {
    flex-shrink: 0;
    margin-bottom: 0;
}
.swell-icon-heading-wrapper.theme-wm-icon.pos-left:has(h2) .heading-icon-font-wrap i { font-size: 2.6rem; }
.swell-icon-heading-wrapper.theme-wm-icon.pos-left:has(h3) .heading-icon-font-wrap i { font-size: 2.1rem; }
.swell-icon-heading-wrapper.theme-wm-icon.pos-left:has(h4) .heading-icon-font-wrap i { font-size: 1.7rem; }

/* パターンB：共通ロゴを左に（上配置用の余白を打ち消し、左に余白を取る） */
.swell-icon-heading-wrapper.theme-wm-global.pos-left::before {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.swell-icon-heading-wrapper.theme-wm-global.pos-left:has(h2),
.swell-icon-heading-wrapper.theme-wm-global.pos-left:has(h3) { padding-top: 0; padding-left: 64px; }
.swell-icon-heading-wrapper.theme-wm-global.pos-left:has(h2)::before,
.swell-icon-heading-wrapper.theme-wm-global.pos-left:has(h3)::before { width: 52px; height: 52px; }
.swell-icon-heading-wrapper.theme-wm-global.pos-left:has(h4) { padding-top: 0; padding-left: 50px; }
.swell-icon-heading-wrapper.theme-wm-global.pos-left:has(h4)::before { width: 40px; height: 40px; }

/* スマホではアイコンを一回り小さく */
@media screen and (max-width: 600px) {
    .swell-icon-heading-wrapper.theme-wm-icon.pos-left:has(h2) .heading-icon-font-wrap i { font-size: 2.1rem; }
    .swell-icon-heading-wrapper.theme-wm-icon.pos-left:has(h3) .heading-icon-font-wrap i { font-size: 1.8rem; }
    .swell-icon-heading-wrapper.theme-wm-global.pos-left:has(h2),
    .swell-icon-heading-wrapper.theme-wm-global.pos-left:has(h3) { padding-left: 52px; }
    .swell-icon-heading-wrapper.theme-wm-global.pos-left:has(h2)::before,
    .swell-icon-heading-wrapper.theme-wm-global.pos-left:has(h3)::before { width: 42px; height: 42px; }
}

/* ｰｰｰ--------ｰｰｰｰ装飾見出し設定　ここまで↑↑ｰｰｰ-------ｰｰｰ---ｰ */

/* ==================================================================================================================================
  *透かし付きリッチカラム
================================================================================================================================== */
/* ----------------------------------------------------------------------
  ▼ PC
---------------------------------------------------------------------- */
.rich-column-block {
  position: relative;
  /* 疑似要素の基準 */
  padding: 0px;
  /* 枠内の余白（お好みで調整） */
  overflow: hidden;
  /* ロゴがはみ出ないようにする */
  isolation: isolate;
}

.rich-column-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.1;
  /* 透かしの濃さ */
}

/* ------------------------------------------------
パターンA：色を指定した場合（インクとスタンプ）
------------------------------------------------ */
.rich-column-block.has-custom-color::before {
  background-color: var(--wm-color);

  -webkit-mask-image: var(--wm-url);
  mask-image: var(--wm-url);

  -webkit-mask-position: var(--wm-x) var(--wm-y);
  mask-position: var(--wm-x) var(--wm-y);

  -webkit-mask-size: clamp(100px, 35%, 500px) auto;
  mask-size: clamp(100px, 35%, 500px) auto;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ------------------------------------------------
パターンB：色をクリア（空）にした場合（元の画像そのまま）
------------------------------------------------ */
.rich-column-block.is-original-color::before {
  background-image: var(--wm-url);
  background-position: var(--wm-x) var(--wm-y);
  background-size: clamp(100px, 35%, 500px) auto;
  background-repeat: no-repeat;
}

/* 中身のコンテンツ */
.rich-column-content {
  position: relative;
  z-index: 1;
}


/* ==================================================================
 * ブロックエディタ専用の補正
 * ACF ブロックのプレビューでは InnerBlocks が .acf-innerblocks-container で包まれるため、
 * フロントと同じ並びになるよう調整する（フロントにはこのクラスは存在しません）
 * ================================================================== */
.swell-icon-heading-wrapper.pos-left .icon-heading-content > .acf-innerblocks-container {
    flex: 1 1 auto;
    min-width: 0;
}
.swell-icon-heading-wrapper .acf-innerblocks-container > .wp-block-heading,
.swell-icon-heading-wrapper .acf-innerblocks-container > .block-editor-block-list__block {
    margin-top: 0 !important;
}
.rich-column-block .acf-innerblocks-container {
    position: relative;
    z-index: 1;
}

/* ==================================================================
 * 埋め込みコード（許可済みサービス）ブロック
 * ================================================================== */
.tpal-embed-code {
    margin-bottom: 2em;
}
.tpal-embed-code iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
}
.tpal-embed-code__notice {
    padding: 1em;
    border: 1px dashed #c3c4c7;
    color: #757575;
    font-size: 13px;
}