@charset "utf-8";
/**
 * 移行記事の互換CSS（投稿本文専用）
 *
 * **なぜ必要か。** 旧サイトの投稿本文には、旧環境のプラグインと旧テーマが出力した
 * マークアップがそのまま残っている。だがそれらのCSSは現テーマに1行も無いため、
 * 素のHTMLとして描画されて崩れる（SVGアイコンが本文幅いっぱいに伸びる等）。
 * 本文だけ直せば済むので、全ページ共通CSSには入れず `.sg-article__body` に閉じる。
 *
 * 対象と由来:
 *   .uagb-*                    … Spectra (Ultimate Addons for Gutenberg) ／未導入
 *   .liquid-speech-balloon-*   … LIQUID SPEECH BALLOON ／未導入
 *   .ep-* .es-* .bgc-* .ftc-* .brc-* .marker-* … 旧テーマのユーティリティ ／消失
 *   .column .column__item .btn .btn__link       … 旧テーマのレイアウト部品 ／消失
 *   .instagram-media / .wp-embedded-content     … 埋め込みの幅がはみ出す
 *
 * 旧CSSは残っていないため、色・余白は現デザイン（金 #9a7b3f ／濃紺 #242a3a）に
 * 寄せた**近似**。ピクセル再現ではなく「意図どおりに読める」ことを目的にしている。
 */

/* ===========================================================
   Spectra（uagb）: マーケティングボタン
   `wp-block-button__link` を併せ持つので配色はテーマのボタンが効く。
   矢印SVGだけが寸法指定を失って巨大化するので、文字サイズに揃える。
   =========================================================== */
.sg-article__body .wp-block-uagb-marketing-button{margin:1.4em 0;}
.sg-article__body .uagb-marketing-btn__align-center{text-align:center;}
.sg-article__body .uagb-marketing-btn__align-left{text-align:left;}
.sg-article__body .uagb-marketing-btn__align-right{text-align:right;}
.sg-article__body .uagb-marketing-btn__link{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  max-width:100%; text-align:center;
}
.sg-article__body .uagb-marketing-btn__link svg{
  width:1em; height:1em; flex:0 0 auto; fill:currentColor;
}
.sg-article__body .uagb-marketing-btn__icon-before .uagb-marketing-btn__link{flex-direction:row-reverse;}
.sg-article__body .uagb-marketing-btn__title{display:inline;}
.sg-article__body .uagb-marketing-btn__prefix{opacity:.85;}

/* ===========================================================
   Spectra（uagb）: SNSシェア
   本文から取り除いたが、再度貼られても崩れないよう保険として残す。
   plugin無しでは data-href が展開されず動作しないため、見た目のみ。
   =========================================================== */
.sg-article__body .uagb-social-share__outer-wrap{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:1.9em 0;
}
.sg-article__body .uagb-social-share__layout-vertical{flex-direction:column; align-items:flex-start;}
.sg-article__body .uagb-ss__wrapper{margin:0;}
.sg-article__body .uagb-ss__link{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(154,123,63,.4); background:rgba(154,123,63,.07);
}
.sg-article__body .uagb-ss__source-wrap,
.sg-article__body .uagb-ss__source-icon{display:inline-flex; line-height:0;}
.sg-article__body .uagb-ss__source-icon svg{width:18px; height:18px; fill:#9a7b3f;}

/* ===========================================================
   LIQUID SPEECH BALLOON: 吹き出し
   アバター画像はプラグインの設定側（wp_options）にあり移行できていない。
   空の `-avatar` を出すと隙間だけ残るので隠し、吹き出し本体で会話を表す。
   末尾の `-00 / -01 / -02` はアバター番号、`-right` が話者の左右。
   =========================================================== */
.sg-article__body .liquid-speech-balloon-wrap{
  display:flex; justify-content:flex-start; margin:1.3em 0;
}
.sg-article__body .liquid-speech-balloon-right{justify-content:flex-end;}
.sg-article__body .liquid-speech-balloon-avatar{display:none;}
.sg-article__body .liquid-speech-balloon-arrow{display:none;}
.sg-article__body .liquid-speech-balloon-text{
  position:relative; max-width:88%; padding:14px 22px; border-radius:16px;
  border:1px solid rgba(154,123,63,.32); background:rgba(154,123,63,.07);
  font-size:.96em; line-height:1.85;
}
.sg-article__body .liquid-speech-balloon-right .liquid-speech-balloon-text{
  border-color:rgba(36,42,58,.2); background:rgba(36,42,58,.05);
}
.sg-article__body .liquid-speech-balloon-text > *{margin:0;}
.sg-article__body .liquid-speech-balloon-text > * + *{margin-top:.7em;}

/* ===========================================================
   旧テーマ: カラム
   `column-2 / -2pc / -3pc` の数字が列数。スマホでは1列に落とす。
   移行時に空になった `.column__item` が残っているので畳む。
   =========================================================== */
.sg-article__body .column{display:grid; gap:22px; align-items:start; margin:1.9em 0;}
.sg-article__body .column-2,
.sg-article__body .column-2pc{grid-template-columns:repeat(2,minmax(0,1fr));}
.sg-article__body .column-3,
.sg-article__body .column-3pc{grid-template-columns:repeat(3,minmax(0,1fr));}
.sg-article__body .column-4,
.sg-article__body .column-4pc{grid-template-columns:repeat(4,minmax(0,1fr));}
.sg-article__body .column > *{min-width:0;}
.sg-article__body .column__item:empty{display:none;}
.sg-article__body .column > figure,
.sg-article__body .column .wp-block-image{margin:0;}
.sg-article__body .column__item > *:first-child{margin-top:0;}
.sg-article__body .column__item > *:last-child{margin-bottom:0;}
.sg-article__body .column__item img{width:100%;}
@media (max-width:767px){
  .sg-article__body .column{grid-template-columns:1fr !important; gap:18px;}
}

/* ===========================================================
   旧テーマ: ボタン
   `.btn` は配置（中央/左）、`.btn__link` がボタン本体。
   移行で `.btn` が入れ子になっている箇所があるので余白を二重に付けない。
   =========================================================== */
.sg-article__body .btn{margin:1.6em 0;}
.sg-article__body .btn .btn{margin:0;}
.sg-article__body .btn:empty{display:none;}
.sg-article__body .btn-center{text-align:center;}
.sg-article__body .btn-left{text-align:left;}
.sg-article__body .btn-right{text-align:right;}
.sg-article__body .btn__link{
  display:inline-block; max-width:100%; padding:13px 32px;
  font-size:14px; letter-spacing:.08em; line-height:1.6; font-weight:500;
  background:#9a7b3f; color:#fff; border:1px solid #9a7b3f; border-radius:3px;
  text-decoration:none; transition:background .25s,border-color .25s;
}
.sg-article__body a.btn__link{color:#fff;}
.sg-article__body a.btn__link:hover{background:#866a36; border-color:#866a36; opacity:1;}
.sg-article__body .btn__link-normal{background:transparent; border-color:#9a7b3f;}
.sg-article__body a.btn__link-normal{color:#9a7b3f;}
.sg-article__body a.btn__link-normal:hover{background:#9a7b3f; color:#fff;}

/* ===========================================================
   旧テーマ: 囲みボックス・ラベル・擬似ボタン
   `.ep-btn` は href の無い `<a>` で使われている箇所もある（見出し風の囲み）。
   =========================================================== */
.sg-article__body .ep-box{
  margin:1.6em 0; padding:18px 22px; border-radius:3px;
  border:1px solid rgba(154,123,63,.35); background:rgba(154,123,63,.06);
}
.sg-article__body .ep-box > *:first-child{margin-top:0;}
.sg-article__body .ep-box > *:last-child{margin-bottom:0;}
.sg-article__body .ep-btn{
  display:inline-block; box-sizing:border-box; max-width:100%;
  margin:.4em 0; padding:.7em 1.4em; border-radius:3px;
  line-height:1.8; text-decoration:none;
}
.sg-article__body a.ep-btn[href]:hover{opacity:.82;}
.sg-article__body .ep-label{
  display:inline-block; box-sizing:border-box; max-width:100%;
  padding:.35em 1.1em; border-radius:999px; line-height:1.8;
  background:rgba(154,123,63,.12);
}
/* アイコンフォントは移行できていない。空の疑似要素で隙間を作らない。 */
.sg-article__body [class*="icon-"]::before,
.sg-article__body [class*="icon-"]::after{content:none;}

/* ===========================================================
   旧テーマ: 余白・装飾ユーティリティ（es-*）
   接頭辞は T/B/L/R=上下左右、末尾 SS<S<M<L が量。
   =========================================================== */
.sg-article__body .es-TpaddingS{padding-top:.5em;}
.sg-article__body .es-BpaddingS{padding-bottom:.5em;}
.sg-article__body .es-LpaddingSS{padding-left:.4em;}
.sg-article__body .es-RpaddingSS{padding-right:.4em;}
.sg-article__body .es-LpaddingM{padding-left:1.2em;}
.sg-article__body .es-RpaddingM{padding-right:1.2em;}
.sg-article__body .es-bold{font-weight:600;}
.sg-article__body .es-borderSolidS{border:1px solid currentColor;}
.sg-article__body .es-radius,
.sg-article__body .es-LroundL{border-radius:999px;}
.sg-article__body .es-size100{width:100%;}
.sg-article__body .es-per{display:inline-block;}

/* ===========================================================
   旧テーマ: 色ユーティリティ
   V=Vivid / VP=Very Pale / L=Light / B=Bright / D=Deep / VL=Very Light。
   旧CSSが残っていないため**近似色**。文言の意図（強調・注意）は保てる。
   =========================================================== */
.sg-article__body .bgc-white{background-color:#fff;}
.sg-article__body .bgc-VPlime{background-color:#f1f7e3;}
.sg-article__body .bgc-VPmagenta{background-color:#fbeef5;}
.sg-article__body .bgc-VPorange{background-color:#fdf2e4;}
.sg-article__body .bgc-Vorange{background-color:#ef8200;}
.sg-article__body .bgc-DPred{background-color:#f7e4e4;}
.sg-article__body .ftc-white,
.sg-article__body a.ftc-white{color:#fff;}
.sg-article__body .ftc-Borange,
.sg-article__body a.ftc-Borange{color:#d2701a;}
.sg-article__body .ftc-Lmagenta,
.sg-article__body a.ftc-Lmagenta{color:#b03a7a;}
.sg-article__body .brc-white{border-color:#fff;}
.sg-article__body .brc-VLgray{border-color:#dcd8d1;}
.sg-article__body .brc-Lmagenta{border-color:#d493b6;}
.sg-article__body .marker-thickRed{background:linear-gradient(transparent 58%,rgba(214,74,74,.32) 58%);}
.sg-article__body .marker-thickPink{background:linear-gradient(transparent 58%,rgba(224,120,170,.32) 58%);}

/* ===========================================================
   埋め込みのはみ出し（スマホで横スクロールが出る原因）
   - Instagram: blockquote に inline で min-width:326px が付いている
   - WP内部埋め込み: plugin/JS 前提の絶対配置が枠外に出る
   どちらもインラインstyleを上書きするため !important が要る。
   =========================================================== */
.sg-article__body .instagram-media{
  min-width:0 !important; max-width:100% !important; width:100% !important;
  margin:1.9em auto !important;
}
.sg-article__body iframe.wp-embedded-content{
  position:static !important; clip:auto !important;
  display:block; width:100% !important; max-width:100% !important; margin:1.6em auto;
}
.sg-article__body .wp-block-embed__wrapper{max-width:100%; overflow:hidden;}

/* ===========================================================
   直書き pt 指定の上限（狭い画面のみ）
   旧本文は文字サイズを `font-size: 18pt` のように **pt で直書き**している。
   pt は絶対値なので画面幅に追従せず、スマホでは1行が記事カードをはみ出す
   （18pt = 24px、12文字で288px。本文幅は390px端末で279px）。
   折り返し指定（word-break 等）では解決しないため、狭い画面でだけ上限を掛ける。
   16pt以下は収まるので触らない。
   =========================================================== */
@media (max-width:600px){
  .sg-article__body [style*="font-size: 18pt"],
  .sg-article__body [style*="font-size:18pt"],
  .sg-article__body [style*="font-size: 20pt"],
  .sg-article__body [style*="font-size:20pt"],
  .sg-article__body [style*="font-size: 24pt"],
  .sg-article__body [style*="font-size:24pt"],
  .sg-article__body [style*="font-size: 36pt"],
  .sg-article__body [style*="font-size:36pt"]{font-size:1.4em !important;}
}

/* ===========================================================
   スマホで本文がはみ出す埋め込み・段組み（2026-09-28 全ページ点検で発見）
   ・段組み（wp-block-columns）: 列が flex の既定 min-width:auto で中の写真（1800px）より縮まず、
     本文ごと横に広がっていた（主に英中韓の翻訳記事）。スマホでは縦に積み、列を縮められるようにする。
   ・動画（[video]）: 旧環境の width:640px がインラインで付いている。
   ・Instagram 埋め込み: 公式の min-width:326px ＋余白で 375px 幅からはみ出す。
   ・本文内のフォーム入力欄・写真・iframe: 画面幅を上限にする。
   =========================================================== */
.sg-article__body img,
.sg-article__body video,
.sg-article__body iframe,
.sg-article__body embed,
.sg-article__body object,
.sg-article__body input,
.sg-article__body select,
.sg-article__body textarea{max-width:100%;}
.sg-article__body img,
.sg-article__body video{height:auto;}
.sg-article__body figure{max-width:100%;}
.sg-article__body .wp-block-column,
.sg-article__body .wp-block-group{min-width:0;}
.sg-article__body .wp-video{width:100% !important;max-width:100%;}
.sg-article__body video.wp-video-shortcode{width:100% !important;height:auto !important;}
.sg-article__body .instagram-media{min-width:0 !important;width:100% !important;max-width:100% !important;}
.sg-article__body p,
.sg-article__body h2,
.sg-article__body h3,
.sg-article__body h4{overflow-wrap:anywhere;}
@media (max-width:781px){
  .sg-article__body .wp-block-columns:not(.is-not-stacked-on-mobile){flex-wrap:wrap !important;}
  .sg-article__body .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column{flex-basis:100% !important;}
}
/* 中央寄せの写真: WordPress 標準の .aligncenter は display:table で、写真の実寸（557px 等）まで広がる。
   本文内では通常のブロックにして、写真を本文幅に収める。 */
.sg-article__body .wp-block-image .aligncenter,
.sg-article__body figure.aligncenter{display:block;max-width:100%;margin-left:auto;margin-right:auto;text-align:center;}
/* 写真をリンクで囲んだもの: <a> が inline-block で中身（写真の実寸）に合わせて広がるので上限を付ける */
.sg-article__body figure > a,
.sg-article__body a:has(> img){max-width:100%;}