@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
*/

body #header {
  height: 900px !important;
  background-position: center 35% !important;
}

@media screen and (max-width: 480px){
  body #header {
    height: 220px !important;
    background-position: center center !important;
  }
  p br { display: none; }
}

/* ==================================================
   スマホ表示修正（768px以下のみ）
   ================================================== */
@media screen and (max-width: 768px) {

  /* 親コンテナ幅リセット */
  .wrap,
  .content-in,
  #container,
  #content,
  .main,
  .article,
  .entry-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
  }

  .content-in {
    display: block !important;
  }

  /* .main の左右padding を8pxに（二重padding防止） */
  main.main, .main {
    padding: 8px !important;
    margin: 0 !important;
  }

  .article, .entry-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* テキスト */
  .entry-content p, p {
    font-size: 16px !important;
    line-height: 1.8 !important;
  }
  .entry-content h2 { font-size: 20px !important; }
  .entry-content h3 { font-size: 18px !important; }
  img { max-width: 100% !important; height: auto !important; }

  /* ====================================
     テーブル
     min-width は触らない。ラッパーの
     div[overflow-x:auto] を100%幅に収める
     ==================================== */
  .entry-content div[style*="overflow-x:auto"] {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .entry-content table {
    font-size: 13px !important;
  }

  /* ====================================
     プロフィールボックス
     HTML: style="...padding:16px 20px;...display:flex;gap:16px;..."
     側面padding 20px → 8px に縮小して幅を確保
     ==================================== */
  .entry-content div[style*="display:flex;gap:16px;align-items:flex-start"],
  .entry-content div[style*="display:flex"][style*="padding:16px 20px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
  }

  /* ====================================
     吹き出しブロック（縦並び化）
     HTML左: style="display:flex;align-items:flex-start;gap:12px;..."
     HTML右: style="display:flex;align-items:flex-start;gap:12px;...flex-direction:row-reverse;"
     ==================================== */
  .entry-content div[style*="display:flex;align-items:flex-start;gap:12px"] {
    flex-direction: column !important;
    align-items: center !important;
  }

  /* 吹き出しテキスト
     ・max-width:85% を100%に
     ・側面padding(16px/18px) → 10px に縮小
     ・box-sizing:border-box で幅を保証 */
  .entry-content div[style*="max-width:85%"] {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  /* ====================================
     比較カード（縦並び）
     HTML親: style="display:flex;gap:16px;...flex-wrap:wrap;"
     HTML子: style="flex:1;min-width:240px;...padding:14px 18px;"
     ==================================== */
  .entry-content div[style*="min-width:240px"] {
    min-width: 0 !important;
    width: 100% !important;
    flex-basis: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  /* ブロックエディタカラム */
  .wp-block-columns { display: block !important; }
  .wp-block-column  { width: 100% !important; flex-basis: 100% !important; }

  /* コード */
  pre, code {
    white-space: pre-wrap;
    word-break: break-all;
    overflow-x: auto;
  }

}