@charset "UTF-8";

/* ==========================================================================
   site_grid.css  v1.0  2026-09-10
   下層ページ (アーカイブ / 詳細) の内容幅を TOP と同じ 1200px グリッドに揃える。
   - 背景は全幅のまま、.sidePad (padding 5rem) / .sideMar (margin 5rem) の余白を
     max(gutter, 50% - 600px) に置き換える → 1300px 以上で内容が 1200px 中央、未満は従来どおり 5rem/20px
   - front page では読み込まない (header.php の archive / singular 分岐でのみ link)
   - base.css / top.css / 各 *_list.css は不変。管理画面「追加CSS」(#wp-custom-css) は wp_head で
     この後に出力されるため、競合する箇所は詳細度 (+!important) で上書きする
   ========================================================================== */

main, #main, #mainimg {
  --cf-gutter: 5rem;
  --cf-edge: max(var(--cf-gutter), calc(50% - 600px));
}
@media screen and (max-width: 767px) {
  main, #main, #mainimg { --cf-gutter: 20px; }
}

/* ---------- 1. 下層ヒーロー: 本文左端とイラスト右端をグリッドに ---------- */
#mainimg .mainimg_in { padding-left: var(--cf-edge); }
/* イラストは base.css で max-width 42% (2000px 幅の画面では 870px) → 本文側が潰れるので 540px で頭打ち */
#mainimg > figure { margin-right: var(--cf-edge); max-width: min(42%, 540px); }
@media screen and (max-width: 767px) {
  #mainimg .mainimg_in { padding-left: 0; }
  #mainimg > figure { margin-right: auto; max-width: 100%; }
}

/* ---------- 2. #main 直下の全幅ブロック: padding 系 (.sidePad) ---------- */
#main > .sidePad:not(.faq_list),
#main > section.sidePad:not(.faq_list),
#main > div.sidePad:not(.faq_list),
#main > .function_list.sidePad,
#main > #cont_mokuji {
  padding-left: var(--cf-edge);
  padding-right: var(--cf-edge);
}

/* ---------- 3. #main / main 直下の全幅ブロック: margin 系 (.sideMar) ---------- */
#main > .sideMar:not(.l-mainContent),
#main > section.sideMar:not(.l-mainContent),
#main > div.sideMar:not(.l-mainContent),
#main > ul.sideMar,
#main > p.sideMar,
main > .sideMar,
main > .cont_footer {
  margin-left: var(--cf-edge);
  margin-right: var(--cf-edge);
}
/* ブログ詳細の本文 (.l-mainContent) は追加CSS の max-width:990px 中央寄せを維持 (可読性) */

/* ブログ詳細 (#main.l-content は flex コンテナ) : 本文以外の子要素は 1 行を占有させる
   — 従来は .cont_footer が内容幅 (約 600px) に縮んで左寄せになっていた */
#main.l-content > .entry-group,
#main.l-content > section.sidePad,
#main.l-content > .function_list.sidePad {
  flex: 0 0 auto;
  width: 100%;
}
#main.l-content > .cont_footer,
#main.l-content > section.sideMar:not(.l-mainContent) {
  flex: 0 0 auto;
  width: calc(100% - 2 * var(--cf-edge));
}

/* ---------- 3b. 固定ページ (page.php) : the_content() 直下に置かれた要素 (base.css は margin 5rem) ---------- */
#main > h2, #main > h3, #main > h4, #main > h5, #main > h6,
#main > p, #main > ul:not([class]), #main > ol, #main > table, #main > blockquote,
#main > figure, #main > div:not([class]):not([id]) {
  margin-left: var(--cf-edge);
  margin-right: var(--cf-edge);
}
/* クラス無しの <section> 直下ラッパー (導入の流れの .step_flow など) */
#main > section:not([class]) {
  padding-left: var(--cf-edge);
  padding-right: var(--cf-edge);
}
@media screen and (max-width: 767px) {
  #main > section:not([class]) { padding-left: 0; padding-right: 0; }
}

/* ---------- 4. 活用イメージ一覧: カード列を 1200px に、カード幅を 3 列流動に ---------- */
#main > .text_list2.text_list2_side {
  margin-left: var(--cf-edge);
  margin-right: var(--cf-edge);
}
/* 追加CSS の `.text_list2 > section { width:400px !important }` を上書き */
#main .text_list2 > section {
  width: calc(33.333% - 1.4rem) !important;
  margin: 0 !important;
}
@media screen and (max-width: 767px) {
  #main .text_list2 > section { width: 48% !important; }
}

/* ---------- 5. FAQ 一覧 (faq_list.css は 1000px 中央) を 1200px に ---------- */
#main > .cont_faq.faq_list {
  max-width: calc(1200px + 2 * var(--cf-gutter));
  padding-left: var(--cf-gutter);
  padding-right: var(--cf-gutter);
}

/* ---------- 6. 開発者紹介 (共有パーツ) の本文 ---------- */
#cont_profile .cont {
  max-width: calc(1200px + 10rem);
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 767px) {
  #cont_profile .cont { max-width: none; }
}

/* ==========================================================================
   RICH CONTENT COMPONENTS (.cfr-*)  2026-09-10
   WP 本文 (ACF WYSIWYG = .free_box1) 用の部品。機能紹介「AI機能」「AI開発」の自由エリアで使用。
   本文はエディタの「テキスト」タブで HTML を直接記述する前提。FA アイコンの <i> には &#8203; を入れて
   TinyMCE の空タグ除去を回避する。
   ========================================================================== */
.free_box1 p.cfr-lead { font-size: 1.7rem; line-height: 1.9; color: #252A2F; max-width: 900px; margin: 0; }
.free_box1 p.cfr-h { font-size: 2rem; font-weight: 700; color: #0B2B50; margin: 4rem 0 0; }
.free_box1 .cfr-h + * { margin-top: 1.6rem !important; }

/* card grid */
.free_box1 .cfr-grid { display: grid; gap: 2rem; margin: 2.8rem 0 0; padding: 0; list-style: none; }
.free_box1 .cfr-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.free_box1 .cfr-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.free_box1 .cfr-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.free_box1 .cfr-grid > li { list-style: none; margin: 0; }
.free_box1 .cfr-card { background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; padding: 2.4rem 2.2rem; }
.free_box1 .cfr-card .cfr-ico { display: inline-flex; width: 4.4rem; height: 4.4rem; border-radius: 12px; background: #F5F7FA; color: #2E8BC0; align-items: center; justify-content: center; font-size: 2rem; margin: 0 0 1.4rem; }
.free_box1 .cfr-card h4 { font-size: 1.8rem; font-weight: 700; color: #0B2B50; margin: 0 0 .6rem; line-height: 1.4; }
.free_box1 .cfr-card p { font-size: 1.4rem; line-height: 1.8; color: #6B7A8D; margin: 0; }
.free_box1 .cfr-card--dark { background: linear-gradient(135deg, #0B2B50, #1A4A7A); border: 0; }
.free_box1 .cfr-card--dark h4 { color: #fff; }
.free_box1 .cfr-card--dark p { color: rgba(255,255,255,.82); }
.free_box1 .cfr-card--dark .cfr-ico { background: rgba(255,255,255,.12); color: #fff; }

/* text | figure */
.free_box1 .cfr-split { display: flex; gap: 4rem; align-items: center; margin: 3.6rem 0 0; }
.free_box1 .cfr-split > div { flex: 1; min-width: 0; }
.free_box1 .cfr-split > figure { flex: 0 0 52%; margin: 0; }
.free_box1 .cfr-split.reverse { flex-direction: row-reverse; }
.free_box1 .cfr-split h4 { font-size: 2.2rem; font-weight: 700; color: #0B2B50; margin: 0 0 1.2rem; line-height: 1.4; }
.free_box1 .cfr-split p { margin: 0; font-size: 1.5rem; line-height: 1.9; }
.free_box1 .cfr-split p + p { margin-top: 1em; }
.free_box1 .cfr-figure { margin: 3.6rem 0 0; }
.free_box1 .cfr-figure img, .free_box1 .cfr-split figure img { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid #E2E8F0; box-shadow: 0 12px 40px rgba(11,43,80,.14); }
.free_box1 .cfr-figure figcaption, .free_box1 .cfr-split figcaption { font-size: 1.3rem; color: #6B7A8D; margin-top: 1rem; text-align: center; line-height: 1.6; }

/* numbered steps */
.free_box1 .cfr-steps { display: flex; gap: 1.6rem; counter-reset: cfr; margin: 2.8rem 0 0; padding: 0; list-style: none; }
.free_box1 .cfr-steps li { flex: 1; list-style: none; margin: 0; position: relative; background: #F5F7FA; border: 1px solid #E2E8F0; border-radius: 12px; padding: 5rem 2rem 2rem; }
.free_box1 .cfr-steps li:before { counter-increment: cfr; content: "0" counter(cfr); position: absolute; top: 1.4rem; left: 2rem; font-family: "Poppins", sans-serif; font-weight: 700; font-size: 2rem; line-height: 1; color: #2E8BC0; }
.free_box1 .cfr-steps h4 { font-size: 1.7rem; font-weight: 700; color: #0B2B50; margin: 0 0 .5rem; }
.free_box1 .cfr-steps p { font-size: 1.35rem; color: #6B7A8D; line-height: 1.7; margin: 0; }
.free_box1 .cfr-steps li.is-ai { background: linear-gradient(135deg, #0B2B50, #1A4A7A); border: 0; }
.free_box1 .cfr-steps li.is-ai:before { color: #50B5E6; }
.free_box1 .cfr-steps li.is-ai h4 { color: #fff; }
.free_box1 .cfr-steps li.is-ai p { color: rgba(255,255,255,.82); }

/* chat / prompt mock */
.free_box1 .cfr-mock { background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; padding: 2.4rem; box-shadow: 0 12px 40px rgba(11,43,80,.1); font-size: 1.4rem; display: flex; flex-direction: column; gap: 1.2rem; margin: 3rem 0 0; }
.free_box1 .cfr-mock .who { display: block; font-family: "Poppins", sans-serif; font-size: 1rem; letter-spacing: .14em; font-weight: 600; margin: 0 0 .3em; opacity: .8; }
.free_box1 .cfr-mock .u { align-self: flex-end; max-width: 88%; background: linear-gradient(135deg, #0B2B50, #1A4A7A); color: #fff; border-radius: 14px 14px 2px 14px; padding: 1.2rem 1.6rem; margin: 0; line-height: 1.7; }
.free_box1 .cfr-mock .a { align-self: flex-start; max-width: 88%; background: #F5F7FA; border: 1px solid #E2E8F0; border-radius: 14px 14px 14px 2px; padding: 1.2rem 1.6rem; margin: 0; line-height: 1.7; }
.free_box1 .cfr-mock .a .who { color: #2E8BC0; opacity: 1; }
.free_box1 .cfr-mock ul { list-style: none; padding: 0; margin: .6rem 0 0; }
.free_box1 .cfr-mock ul li { list-style: none; margin: .3em 0 0; padding-left: 1.6em; position: relative; font-weight: 500; }
.free_box1 .cfr-mock ul li:before { content: "\2713"; position: absolute; left: 0; color: #1E9E6A; font-weight: 700; }
.free_box1 .cfr-mock code { font-family: Consolas, Menlo, monospace; background: #0B2B50; color: #9FD3F5; padding: .3em .7em; border-radius: 6px; font-size: 1.2rem; }

/* terminal */
.free_box1 .cfr-term { background: #0F2340; color: #DCE7F5; border-radius: 12px; padding: 1.8rem 2.2rem 2.2rem; font-family: Consolas, Menlo, "Courier New", monospace; font-size: 1.3rem; line-height: 1.9; margin: 3rem 0 0; box-shadow: 0 16px 40px rgba(11,43,80,.25); }
.free_box1 .cfr-term p { margin: 0; word-break: break-all; }
.free_box1 .cfr-term .bar { display: flex; align-items: center; gap: 6px; margin: 0 0 1.2rem; }
.free_box1 .cfr-term .bar i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #2E4A6E; font-size: 0; }
.free_box1 .cfr-term .bar span { margin-left: 8px; font-family: "Poppins", sans-serif; font-size: 1.05rem; letter-spacing: .1em; color: #8FA3BF; }
.free_box1 .cfr-term .cmd { color: #fff; font-weight: 700; }
.free_box1 .cfr-term .cmd:before { content: "> "; color: #50B5E6; }
.free_box1 .cfr-term .ok { color: #BFE3F8; }
.free_box1 .cfr-term .ok:before { content: "\2713 "; color: #4ADE80; }
.free_box1 .cfr-term .dim { color: #8FA3BF; }

/* before -> after */
.free_box1 .cfr-shift { list-style: none; padding: 0; margin: 2.8rem 0 0; }
.free_box1 .cfr-shift li { list-style: none; display: flex; align-items: center; gap: 1.2rem; background: #F5F7FA; border: 1px solid #E2E8F0; border-radius: 12px; padding: 1.4rem 1.8rem; margin: 0; }
.free_box1 .cfr-shift li + li { margin-top: 1rem; }
.free_box1 .cfr-shift .b { flex: 1; color: #6B7A8D; text-decoration: line-through; font-size: 1.4rem; }
.free_box1 .cfr-shift .ar { color: #2E8BC0; font-size: 1.6rem; }
.free_box1 .cfr-shift .a { flex: 1; text-align: right; font-weight: 700; color: #0B2B50; font-size: 1.7rem; }

/* day timeline */
.free_box1 .cfr-timeline { list-style: none; padding: 0 0 0 2.6rem; margin: 2rem 0 0; position: relative; }
.free_box1 .cfr-timeline:before { content: ""; position: absolute; left: .6rem; top: 1.2rem; bottom: 1.2rem; width: 2px; background: linear-gradient(180deg, #2E8BC0, #50B5E6); }
.free_box1 .cfr-timeline li { list-style: none; position: relative; background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; padding: 1.6rem 2rem; margin: 0 0 1.4rem; }
.free_box1 .cfr-timeline li:before { content: ""; position: absolute; left: -2.6rem; top: 2rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #fff; border: 3px solid #2E8BC0; }
.free_box1 .cfr-timeline .t { font-family: "Poppins", sans-serif; font-weight: 700; color: #2E8BC0; font-size: 1.5rem; margin-right: 1rem; }
.free_box1 .cfr-timeline b { font-size: 1.7rem; color: #0B2B50; }
.free_box1 .cfr-timeline p { margin: .4rem 0 0; font-size: 1.4rem; color: #6B7A8D; line-height: 1.7; }

/* AI providers */
.free_box1 .cfr-providers { list-style: none; padding: 0; margin: 2.8rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.free_box1 .cfr-providers li { list-style: none; margin: 0; background: #fff; border: 1px solid #E2E8F0; border-left: 5px solid #2E8BC0; border-radius: 12px; padding: 1.8rem 2rem; }
.free_box1 .cfr-providers li.claude { border-left-color: #D4A373; }
.free_box1 .cfr-providers li.azure { border-left-color: #0078D4; }
.free_box1 .cfr-providers li.gemini { border-left-color: #4285F4; }
.free_box1 .cfr-providers b { display: block; font-size: 1.7rem; color: #0B2B50; }
.free_box1 .cfr-providers span { display: block; font-size: 1.35rem; color: #6B7A8D; margin-top: .4rem; }

/* two-level control diagram */
.free_box1 .cfr-levels { display: flex; align-items: center; gap: 1.6rem; margin: 2.8rem 0 0; flex-wrap: wrap; }
.free_box1 .cfr-levels .lv { flex: 1; min-width: 200px; background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; padding: 1.8rem 2rem; text-align: center; }
.free_box1 .cfr-levels .lv p { margin: .6rem 0 0; font-size: 1.3rem; color: #6B7A8D; line-height: 1.6; }
.free_box1 .cfr-levels .lv p.k { margin: 0 0 .4rem; font-family: "Poppins", sans-serif; letter-spacing: .14em; font-size: 1rem; color: #2E8BC0; line-height: 1.4; }
.free_box1 .cfr-levels .lv p.n { margin: 0; font-size: 1.7rem; font-weight: 700; color: #0B2B50; line-height: 1.4; }
.free_box1 .cfr-levels .ar { flex: 0 0 auto; color: #2E8BC0; font-size: 2.4rem; line-height: 1; }

/* pills / note / band */
.free_box1 .cfr-pills { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: .8rem; }
.free_box1 .cfr-pills li { list-style: none; margin: 0; font-size: 1.3rem; background: #F5F7FA; border: 1px solid #E2E8F0; border-radius: 50px; padding: .4em 1.1em; color: #0B2B50; font-weight: 500; }
.free_box1 p.cfr-note { background: #F5F7FA; border-left: 4px solid #2E8BC0; border-radius: 8px; padding: 1.4rem 1.8rem; font-size: 1.4rem; color: #252A2F; margin: 2.4rem 0 0; line-height: 1.8; }
.free_box1 .cfr-band { background: linear-gradient(135deg, #0B2B50 0%, #1A4A7A 100%); color: #fff; border-radius: 16px; padding: 3.2rem 3.6rem; display: flex; align-items: center; gap: 3rem; margin: 3.6rem 0 0; }
.free_box1 .cfr-band > div { flex: 1; min-width: 0; }
.free_box1 .cfr-band > .cfr-cta { flex: 0 0 auto; }
.free_box1 .cfr-band h4 { font-size: 2.1rem; font-weight: 700; color: #fff; margin: 0 0 .6rem; }
.free_box1 .cfr-band p { color: rgba(255,255,255,.82); font-size: 1.45rem; margin: 0; line-height: 1.8; }
.free_box1 .cfr-band a.cfr-btn { display: inline-block; background: #E8553D; color: #fff; padding: 1.1em 2.4em; border-radius: 50px; font-weight: 700; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 15px rgba(232,85,61,.25); transition: all .3s; }
.free_box1 .cfr-band a.cfr-btn:hover { background: #d4432c; text-decoration: none; transform: translateY(-2px); }

/* wpautop 対策: 部品の直下はブロック要素だけで書く (span/i/a を直接置くと <p> 包みや <br> が入る)。万一入っても非表示にする */
.free_box1 p:empty,
.free_box1 .cfr-card > br, .free_box1 .cfr-levels > br, .free_box1 .cfr-band > br, .free_box1 .cfr-split > br { display: none; }

@media screen and (max-width: 767px) {
  .free_box1 .cfr-grid.cols-2, .free_box1 .cfr-grid.cols-3, .free_box1 .cfr-grid.cols-4 { grid-template-columns: 1fr; }
  .free_box1 .cfr-split, .free_box1 .cfr-split.reverse { display: block; }
  .free_box1 .cfr-split > figure { margin-top: 2rem; }
  .free_box1 .cfr-steps { display: block; }
  .free_box1 .cfr-steps li + li { margin-top: 1.2rem; }
  .free_box1 .cfr-providers { grid-template-columns: 1fr; }
  .free_box1 .cfr-band { display: block; padding: 2.4rem 2rem; }
  .free_box1 .cfr-band > .cfr-cta { margin-top: 1.6rem; }
  .free_box1 .cfr-band a.cfr-btn { white-space: normal; }
  .free_box1 .cfr-levels { display: block; }
  .free_box1 .cfr-levels .ar { display: none; }
  .free_box1 .cfr-levels .lv + .lv { margin-top: 1rem; }
  .free_box1 .cfr-mock .u, .free_box1 .cfr-mock .a { max-width: 100%; }
  .free_box1 .cfr-shift .a { font-size: 1.5rem; }
}