@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template: cocoon-master
Version: 1.1.3
*/

/*──────────────────────────────────
  子テーマ用スタイル
──────────────────────────────────*/

/* Gutenberg のショートコードラッパー余白ゼロ */
.wp-block-shortcode{margin:0!important;padding:0!important;}
/* 空段落を削除 */
p:empty,
.wp-block-shortcode+p:empty{display:none!important;margin:0!important;}

/*──────────────────────────────────
  スピーチバルーン共通
──────────────────────────────────*/
.yswpsb-container{
  display:flex;
  align-items:flex-start;
  margin:0 0 1px!important;     /* 上0・下1px */
}
.yswpsb-container+.yswpsb-container{margin-top:4px!important;}

.yswpsb-icon{
  flex:0 0 80px;
  max-width:80px;
  margin:0 8px;
}
.yswpsb-image{margin:0;border-radius:50%;overflow:hidden;}
.yswpsb-image img{vertical-align:middle;width:100%;height:auto;}

.yswpsb-name{
  margin:4px 0 0;
  font-size:.65em;
  text-align:center;
  white-space:nowrap;
  word-break:keep-all;
}

.yswpsb-balloon{
  position:relative;
  margin:0;
  padding:.5em 1em;
  line-height:1.6;
  background:#fff;
  border:1px solid #ccc;
  border-radius:4px;
}

/* 向き */
.yswpsb-type-l{flex-direction:row;}          /* 左：アイコン→吹き出し */
.yswpsb-type-r{flex-direction:row-reverse;}  /* 右：吹き出し→アイコン */

/* 矢印（三角） */
.yswpsb-balloon::before,
.yswpsb-balloon::after{
  content:"";
  position:absolute;
  top:15px;
  width:0;height:0;
  border:solid transparent;
  pointer-events:none;
}

/* 右向き矢印（カクトくん） */
.yswpsb-type-l .yswpsb-balloon::after{
  right:-12px;border-width:6px 0 6px 12px;border-left-color:#e8fbe8;
}
.yswpsb-type-l .yswpsb-balloon::before{
  right:-13px;border-width:7px 0 7px 13px;border-left-color:#8fd48f;
}

/* 左向き矢印（博士） */
.yswpsb-type-r .yswpsb-balloon::after{
  left:-12px;border-width:6px 12px 6px 0;border-right-color:#fff;
}
.yswpsb-type-r .yswpsb-balloon::before{
  left:-13px;border-width:7px 13px 7px 0;border-right-color:#ccc;
}

/* カクトくん専用デザイン（緑） */
.yswpsb-type-l .yswpsb-balloon{
  background:#e8fbe8;border-color:#8fd48f;
}
/* カクトくんが右側に出た場合も緑に */
.yswpsb-type-r .yswpsb-balloon{
  background:#e8fbe8;border-color:#8fd48f;
}
.yswpsb-type-r .yswpsb-balloon::after{
  left:auto;right:-12px;border-width:6px 0 6px 12px;border-left-color:#e8fbe8;
}
.yswpsb-type-r .yswpsb-balloon::before{
  left:auto;right:-13px;border-width:7px 0 7px 13px;border-left-color:#8fd48f;
}

/* 博士が左側に出た場合は白に戻す */
.yswpsb-type-l .yswpsb-balloon{
  background:#fff;border-color:#ccc;
}
.yswpsb-type-l .yswpsb-balloon::after{
  right:auto;left:-12px;border-width:6px 12px 6px 0;border-right-color:#fff;
}
.yswpsb-type-l .yswpsb-balloon::before{
  right:auto;left:-13px;border-width:7px 13px 7px 0;border-right-color:#ccc;
}

/* 吹き出しテキスト幅調整（アイコン分を差し引く）*/
.yswpsb-content{max-width:calc(100% - 104px);} /* 80+8+8+8 */

/* 連続 <br> の２本目以降を削除し高さも詰める */
.yswpsb-container+br{display:none;}
.yswpsb-balloon br{display:block;line-height:1em;margin:0;}
.yswpsb-balloon br+br{display:none;}

/*──────────────────────────────────
  スマホ幅（〜480px）：本文余白16px＋吹き出し全幅
──────────────────────────────────*/
/* ================================================================
   ここから ーーー  スマホ（〜480px）の吹き出しだけフル幅
================================================================ */
@media (max-width:480px){

  /* ▼ 本文：読みやすい左右 16px 余白（お好みで 14〜18 に） */
  .entry-content{
    padding-left:0px!important;
    padding-right:0px!important;
  }

  /* ▼ スピーチバルーン 1 行全体を “画面幅いっぱい” にする */
  .yswpsb-container{
    position:relative;                 /* translateX 用 */
    left:50%;transform:translateX(-50%);
   width:calc(100vw - 20px)!important;   /* 10px×2 を引く */
  max-width:calc(100vw - 20px)!important;
  margin:4px 10px!important;            /* 横 10px の余白を維持 */
    box-sizing:border-box;
    overflow:hidden;                   /* はみ出しスクロール防止 */
  }

  /* ▼ テキスト枠：アイコン分 (96px) だけ差し引く */
  .yswpsb-content{
    max-width:calc(100vw - 96px)!important;
  }

  /* ▼ 吹き出し本体：横幅オーバー防止 */
  .yswpsb-balloon{
    width:auto!important;
    max-width:100%!important;
    box-sizing:border-box;
  }

  /* ▼ サイト全体で横スクロールが出ないよう保険 */
  body{overflow-x:hidden;}
}
/* ================================================================
   ここまで
================================================================ */
@media (max-width:480px){
  .yswpsb-type-l .yswpsb-icon{        /* アイコンごと */
    margin-left:-14px;                 /* ← 右へ寄り過ぎなら -2〜-6px で微調整 */
  }
	/* ヨミノ博士の吹き出し本体も同じだけ左へ */
  .yswpsb-type-l .yswpsb-balloon{margin-left:-14px;}

}