@charset "UTF-8";
/* ベンダーの色指定（!important）も対象を絞って上書きする。 */
#__ul_comment-widget #__ul_comments .long-comment-text,
#__ul_comment-widget #__ul_comments .reply,
#__ul_comment-widget #__ul_comments .reply-count,
#__ul_comment-widget #__ul_comments .like {
  color: var(--ulc-brand) !important;
}
#__ul_comment-widget #__ul_comments .like-parent svg .background {
  fill: var(--ulc-brand) !important;
}
#__ul_comment-widget .comment-layout .report {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#__ul_comment-widget .id,
#__ul_comment-widget .time,
#__ul_comment-widget .report,
#__ul_comment-widget .share,
#__ul_comment-widget .dislike,
#__ul_comment-widget .agreement,
#__ul_comment-widget .body-count,
#__ul_comment-widget .body-count span,
#__ul_comment-widget .ul-comment-guideline,
#__ul_comment-widget .ul-name-note,
#__ul_comment-widget .powered-by {
  color: var(--ulc-text) !important;
}
#__ul_comment-widget textarea,
#__ul_comment-widget input[type="text"] {
  color: var(--ulc-text) !important;
  border-color: var(--ulc-text) !important;
}
#__ul_comment-widget textarea::placeholder,
#__ul_comment-widget input[type="text"]::placeholder {
  color: #b3afaa;
  opacity: 1;
}
#__ul_comment-widget #__ul_form_text,
#__ul_comment-widget .__ul_reply_text {
  line-height: 1.555 !important;
  min-height: calc(8 * 1.555em + 18px) !important;
}
#__ul_comment-widget #__ul_form .ul-comment-guideline,
#__ul_comment-widget .reply-form-box .ul-comment-guideline {
  margin: 4px 0 12px;
}
#__ul_comment-widget .ul-name-note {
  font-size: 13px;
  white-space: nowrap;
}
/* 受付メッセージのみ。閉じる・通知・共有の既存イベントは変更しない。 */
#ulModalContent.ul-accepted-modal {
  box-sizing: border-box;
  max-width: calc(100% - 32px);
  margin-left: 0 !important;
  left: 50% !important;
  transform: translateX(-50%);
  color: var(--ulc-text);
}
#ulModalContent.ul-accepted-modal #ulModalDetail {
  white-space: pre-line;
  overflow-wrap: anywhere;
  line-height: 1.7;
}
/**
 * ai-comment.css
 * ユーザーローカル AIコメントシステム（ウィジェット）用オーバーライドCSS（スタンドアロン）
 *
 * 目的: ウィジェット素の見た目を、ママ広場の従前（本番）コメント表示に寄せる。
 *       本番の実測値（背景 #f2f1ef / 文字 #3b2e15 / メタ #b3afaa / ブランド #e28d96 /
 *       もっと見る=塗りピンクのピル / 送信=白地ピンク文字のピル）を再現する。
 * 方針: ユーザーローカルはカスタマイズ非推奨。ここへ隔離し、以下2系統で解除できる。
 *   - 親側(.ul-comment-guideline): header.php の <link ai-comment.css> をコメントアウト
 *   - iframe内側(#__ul_comment-widget 配下): js/ai-comment.js が本CSSを iframe へ注入。読込を外せば止まる。
 *
 * ⚠ ウィジェットは「同一オリジンの iframe」で描画される。iframe内はサイトの rem 基準が効かないため px/em/% 指定。
 */

/* ママ広場デザイントークン（本番実測） */
:root {
  --ulc-brand: #e28d96;   /* ブランドピンク */
  --ulc-item-bg: #f2f1ef; /* コメント1件の背景 */
  --ulc-meta: #3b2e15;    /* 日付・補足文も濃茶 */
  --ulc-hairline: #3b2e15;/* 入力欄の枠線 */
  --ulc-text: #3b2e15;    /* 本文（濃茶） */
  /* サイト共通フォント（style.css の body と同一。iframe 内は継承できないため再掲） */
  --ulc-font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Helvetica Neue", Arial, Meiryo, sans-serif;
  /* SP時のコンテンツ左右余白。本番 .inner の width: calc(680 / 750 * 100vw) から逆算した片側の余白
     （(100 - 680/750*100) / 2 = 4.6667vw）。ウィジェットは全幅表示なので、
     文章系・フォーム系だけこの値を戻して本文カラムと左右を揃える。 */
  --ulc-sp-gutter: 4.6667vw;
}

/* =========================================================
 * A) コミュニティガイドライン注記（page-comments.php の親DOM）
 * ========================================================= */
.ul-comment-guideline {
  margin: 2rem 0 0;
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--ulc-meta);
  letter-spacing: 0.02em;
}
.ul-comment-guideline a {
  color: var(--ulc-brand);
  text-decoration: underline;
  text-decoration-color: var(--ulc-brand);
}
.ul-comment-guideline a:hover { opacity: 0.8; }
.ul-comment-guideline p { margin: 0; }
.ul-comment-guideline p + p { margin-top: 0.4em; }
@media screen and (min-width: 768px) {
  .ul-comment-guideline { font-size: 1.3rem; }
}

/* A-2) 描画リトライも失敗した場合のエラーメッセージ（js/ai-comment.js が #ulCommentWidget へ差し込む） */
.ul-comment-error {
  margin: 0;
  padding: 3rem 2rem;
  font-size: 1.4rem;
  line-height: 1.7;
  text-align: center;
  color: var(--ulc-text);
  background-color: var(--ulc-item-bg);
}
@media screen and (min-width: 768px) {
  .ul-comment-error { font-size: 1.6rem; }
}

/* =========================================================
 * B) ウィジェット本体（iframe 内 / js による注入で適用）
 *    ルート: #__ul_comment-widget
 * ========================================================= */

/* B-0) 記事詳細ページ: 入力欄・並び替えを非表示（JSが .ul-hide-form を付与） */
#__ul_comment-widget.ul-hide-form #__ul_form,
#__ul_comment-widget.ul-hide-form .select-wrap { display: none !important; }

/* B-0'') ウィジェット素の「コメント」タブ見出し(#__ul_categories)を非表示にする。
   親DOM側の「コメント一覧」「コメントを投稿する」見出しと二重になるため。本番にも存在しない。 */
#__ul_comment-widget #__ul_categories { display: none !important; }

/* B-0') 本文まわりの基準（本番: line-height 1.555 / letter-spacing 0.075em）
   font-size は js/ai-comment.js の syncBodyFontSize() が親ページ body の算出値でインライン上書きする。
   本番の body は PC で max(1.8rem, 14px)（rem = calc(10/1600*100vw)）＝ viewport 依存のため、
   iframe 内に px を固定すると画面幅ごとに本番とズレる。ここの値は JS が動かない時のフォールバック。 */
#__ul_comment-widget {
  color: var(--ulc-text);
  font-family: var(--ulc-font);
  font-size: 16px;
  line-height: 1.555;
  letter-spacing: 0.075em;
}
#__ul_comment-widget input,
#__ul_comment-widget textarea,
#__ul_comment-widget select,
#__ul_comment-widget button {
  font-family: var(--ulc-font);
  letter-spacing: 0.075em;
}
/* ウィジェット素の inner.css が本文を小さめに指定しているため、ルートの文字サイズを継承させ直す */
#__ul_comment-widget .comment-layout,
#__ul_comment-widget .comment-layout .comment { font-size: 1em; }

/* B-1) コメント1件（本番: 背景 #f2f1ef / 角丸なし）
   本番は padding/余白も rem(=vw基準) で文字サイズと一緒に伸縮するため、em 指定にして
   B-0' の文字サイズへ追随させる（倍率は本番の rem 比と同値）。
   SP: padding 3.5rem ≒ 1.1em ／ PC: padding 2rem 4rem ≒ 1.11em 2.22em */
#__ul_comment-widget .comment-layout {
  padding: 1.1em !important;
  margin-bottom: 0.6em;
  background-color: var(--ulc-item-bg);
  border-radius: 0;
}
@media screen and (min-width: 768px) {
  #__ul_comment-widget .comment-layout {
    padding: 1.11em 2.22em !important;
  }
}

/* B-2) 投稿者名 / ID / 日付 / 通報 */
#__ul_comment-widget .comment-layout .name {
  font-weight: 700;
  font-size: 1.14em;
  color: var(--ulc-text);
  /* 名前欄は「任意30文字以内」まで入力できる。英数字だけの長い名前は1単語扱いで折り返されず、
     コメント欄の幅を超えて横スクロールを発生させるため、途中でも折り返させる。
     日本語名は元から折り返されるので、実質的に英数字の長い名前への対策。 */
  overflow-wrap: anywhere;
}
#__ul_comment-widget .comment-layout .id,
#__ul_comment-widget .comment-layout .time,
#__ul_comment-widget .comment-layout .report {
  color: var(--ulc-meta);
  font-size: 0.92em;
}

/* B-3) 本文（本番: .comment-list-content margin-top 1rem / .comment-list-content p line-height 1.555） */
#__ul_comment-widget .comment-layout .comment {
  margin-top: 0.55em; /* 本番 1rem 相当（文字サイズに追随させるため em 指定） */
  color: var(--ulc-text);
  line-height: 1.555;
  font-weight: 500;
  letter-spacing: 0.075em;
  word-wrap: break-word;
}

/* B-4) 返信・シェア（本番: 濃茶） */
#__ul_comment-widget .comment-layout .reply,
#__ul_comment-widget .comment-layout .share { color: var(--ulc-text); }

/* B-5) 記事詳細ページ(teaser): 「コメントをもっと見る」= 本番の塗りピンク・ピル型ボタン。押下で一覧へ遷移(JS) */
#__ul_comment-widget.ul-hide-form .next-comment {
  display: block;
  margin: 24px auto 0;
  max-width: 440px;
  padding: 14px 28px;
  color: #ffffff;
  background-color: var(--ulc-brand);
  border-radius: 999px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}
#__ul_comment-widget.ul-hide-form .next-comment:hover { opacity: 0.9; }

/* NOTE: 一覧ページのページネーション（.next-comment の一覧側 / .pagination-comment）は
   指摘対象外のためCSS装飾なし。ウィジェット既定の見た目のまま。 */

/* B-6) 入力欄（本番: 白地・枠 #d9d4ce・角丸小）
   .input-text-area / #__ul_form_name = コメント入力欄、
   .__ul_reply_text / .__ul_reply_name = 「返信する」押下で非同期に挿入される返信欄。見た目を揃える。 */
#__ul_comment-widget .input-text-area,
#__ul_comment-widget #__ul_form_name,
#__ul_comment-widget .__ul_reply_text,
#__ul_comment-widget .__ul_reply_name {
  border: 1px solid var(--ulc-hairline);
  border-radius: 5px;
  padding: 8px;
  background-color: #ffffff;
  font-size: 16px;
  box-sizing: border-box;
}

/* B-7) 送信ボタン（本番: 白地・ピンク文字・ピンク枠・ピル型） */
#__ul_comment-widget .form_submit_btn input[type="submit"],
#__ul_comment-widget #__ul_form_submit {
  color: var(--ulc-brand) !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 2px var(--ulc-brand) inset;
  border: 0 !important;
  border-radius: 999px;
  padding: 10px 34px;
  font-weight: 700;
  cursor: pointer;
}
#__ul_comment-widget .form_submit_btn input[type="submit"]:hover,
#__ul_comment-widget #__ul_form_submit:hover { opacity: 0.85; }

/* B-8) 同意文・文字数カウンタ */
#__ul_comment-widget .agreement,
#__ul_comment-widget .body-count { color: var(--ulc-meta); font-size: 0.86em; }

/* B-8') 通報ボックス
   ウィジェット(getReportBody)は .comment-layout の実測幅から width / margin-left を px でインラインに焼き込む。
   その実測幅は padding 込み(border-box)なので、B-1 で padding を広げた分だけ右へはみ出し、閉じるボタンが領域外に出る。
   .report-box の親要素が position: absolute のため right が効く（PC/SP両方で目視確認済み）。
   左側に開くとコメント本文が隠れ、何を通報したいのか分からなくなるため、常に右寄せにする。 */
#__ul_comment-widget .report-box { width: 60% !important; right: 20px; }

/* B-9) 並び替えセレクト（コメント本文と同等まで拡大） */
#__ul_comment-widget .select-wrap {
  font-size: 16px;
  line-height: 1.555;
}
#__ul_comment-widget .select-wrap select {
  padding: 8px 12px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ulc-text);
  background-color: #ffffff;
  border: 1px solid var(--ulc-hairline);
  border-radius: 4px;
}

/* =========================================================
 * C) 一覧ページのみ（js/ai-comment.js が並び替え・要素差し込みを行った後の見た目）
 * ========================================================= */

/* C-1) 投稿フォームの見出し「コメントを投稿する」（親テーマ .ttl03 の再現） */
#__ul_comment-widget .ul-form-heading {
  display: flex;
  align-items: center;
  margin: 40px 0 24px;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 0.24em;
  color: var(--ulc-text);
}
#__ul_comment-widget .ul-form-heading::before,
#__ul_comment-widget .ul-form-heading::after {
  content: "";
  display: block;
  flex-grow: 1;
  border-top: 0.05em solid currentColor;
}
#__ul_comment-widget .ul-form-heading::before { margin-right: 1em; }
#__ul_comment-widget .ul-form-heading::after { margin-left: 1em; }
@media screen and (min-width: 768px) {
  #__ul_comment-widget .ul-form-heading { font-size: 18px; }
}

/* C-2) 文字数カウント・名前欄・送信ボタンを1行にまとめ、右寄せ・上下中央揃えにする。
   名前欄の横幅・表示位置はウィジェット既定のまま変更しない（align-itemsによる中央揃えのみ）。
   .submit-area は返信欄にも同じクラスで存在するため、返信フォームにも同じ並びが適用される。
   （コメント入力欄側は入力前 .hidden で隠れているため :not(.hidden) を必須にする） */
#__ul_comment-widget .submit-area:not(.hidden) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
#__ul_comment-widget .submit-area .body-count {
  margin: 0;
}
#__ul_comment-widget .form_submit_btn {
  margin: 0;
}

/* C-3) コミュニティガイドライン（親DOMから iframe 内 .agreement 直後へ複製したもの）
   投稿フォーム(#__ul_form)と各返信フォーム(.reply-form-box)の両方に入るが、
   セレクタをウィジェットルート配下にしているのでどちらも同じ見た目になる。 */
#__ul_comment-widget .ul-comment-guideline {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--ulc-meta);
}
#__ul_comment-widget .ul-comment-guideline p { margin: 0; }
#__ul_comment-widget .ul-comment-guideline p + p { margin-top: 4px; }
#__ul_comment-widget .ul-comment-guideline a {
  color: var(--ulc-brand);
  text-decoration: underline;
}

/* =========================================================
 * D) SP専用: 全幅表示の中で、フォーム系だけ本文カラム幅に戻す
 *
 * ウィジェットを包む .comment-list が SP で全幅になる（margin: 0 calc(50% - 50vw)）ため、
 * iframe の中身は画面端から端まで広がる。
 * 本番はコメント1件だけが全幅で、投稿フォーム・返信フォーム・見出し・ボタンは
 * 本文カラム幅に収まっているので、それらにだけ左右余白を戻す。
 * （コメント1件 .comment-layout は全幅のままにする＝本番と同じ）
 *
 * iframe は全幅なので iframe 内の 1vw = 親ページの 1vw となり、--ulc-sp-gutter がそのまま使える。
 * PC は .comment-list の全幅化が効かず元からカラム内に収まっているため、SPのみ適用する。
 * ========================================================= */
@media screen and (max-width: 767px) {
  /* 投稿フォーム・投稿見出しは左右とも余白を戻す */
  #__ul_comment-widget #__ul_form,
  #__ul_comment-widget .ul-form-heading {
    margin-left: var(--ulc-sp-gutter);
    margin-right: var(--ulc-sp-gutter);
  }
  /* 投稿フォームは素のCSSが display:inline-block + width:100%(=親の全幅) を持つため、
     margin を足しただけでは幅が縮まらず右へはみ出す。block+auto で残り幅に収める。 */
  #__ul_comment-widget #__ul_form {
    display: block;
    width: auto;
  }
  /* 「コメントをもっと見る(N)」ボタン。既存の margin: 24px auto 0 の auto を打ち消して余白を戻す。
     コメントが4件以上ある記事ではウィジェット自身がこのボタンを #__ul_comments の中に生成し、
     素のCSS(inner.css)側が width を当ててくるため、margin を足すと padding 分が加算されて
     右へはみ出す（#__ul_form と同じ罠）。width:auto + border-box で必ず残り幅に収める。
     3件以下で js/ai-comment.js が自前生成する場合はルート直下に置かれ inner.css の指定を受けないが、
     どちらの経路でも同じ見た目になるよう同一ルールで扱う。 */
  #__ul_comment-widget.ul-hide-form .next-comment {
    margin-left: var(--ulc-sp-gutter) !important;
    margin-right: var(--ulc-sp-gutter) !important;
    width: auto !important;
    box-sizing: border-box !important;
  }
  /* 返信フォーム。親の .reply-box が左インデント（margin 8px + border 2px + padding 8px = 18px）を
     持ち、その内容領域は右端＝iframe右端まで伸びているので、右に余白を戻す。
     左は margin を 0 に倒して、投稿フォームと同じ位置（＝本文カラム左端）に揃える。
     素のCSS(inner.css)は同一要素へ display:inline-block / width:100% / margin を
     こちらより強い詳細度で当ててくるため、4プロパティとも !important で確実に上書きする
     （inner.css はクロスオリジンで内容を読めず、詳細度を事前に確認できないため）。 */
  #__ul_comment-widget .reply-form-box {
    display: block !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: var(--ulc-sp-gutter) !important;
  }
  /* NOTE: 0件時のメッセージ(.ul-comment-empty)は余白を付けない。
     一覧ページ側は .comment-layout を流用しておりコメント1件と同じ全幅が正。
     記事詳細ページ側は親DOM(iframeの外)に入るため、そちらのCSSが適用される。 */
}