@charset "UTF-8";

/* ==========================================================================
   consentFlow Top Page — AI Native LP additions (top_ai.css)  v1.0  2026-09-10
   Loaded on the front page only, AFTER base.css / top.css.
   top.css is kept byte-identical; every new section and the hero demo live here.
   Design tokens mirror base.css "Design System v2.0" (scoped, not :root).
   ========================================================================== */

#mainimg, #main {
  --cf-primary: #0B2B50;
  --cf-primary-l: #1A4A7A;
  --cf-accent: #2E8BC0;
  --cf-accent-l: #50B5E6;
  --cf-cta: #E8553D;
  --cf-text: #252A2F;
  --cf-text-l: #6B7A8D;
  --cf-bg: #F5F7FA;
  --cf-border: #E2E8F0;
  --cf-ok: #1E9E6A;
  --cf-radius: 12px;
  --cf-shadow: 0 8px 30px rgba(0,0,0,.1);
  --cf-mono: "SFMono-Regular", Consolas, Menlo, "Courier New", monospace;
}

/* ---------- shared bits ---------- */
.cf_label {
  font-family: "Poppins", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--cf-accent);
  margin: 0 0 1.2rem;
}
.cf_lead { font-size: 1.6rem; line-height: 1.9; color: var(--cf-text); }
@media screen and (max-width: 767px) { .cf_lead { font-size: 1.45rem; } }
.cf_head { max-width: 860px; }
.cf_head--center { margin-left: auto; margin-right: auto; text-align: center; }
.cf_cta_row { text-align: center; margin-top: 3.6rem; }

/* =============================================
   HERO — copy column (shared by anim / video)
   ============================================= */
#mainimg .cf_hero_label {
  font-family: "Poppins", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--cf-accent-l);
  margin: 0 0 1.6rem;
}
#mainimg .mainimg_cont div h2 br { display: inline; }
#mainimg .cf_hero_cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  margin-top: 3rem;
}
#mainimg .cf_hero_cta .btn1 { font-size: 1.5rem; padding: 1.1em 2em; white-space: nowrap; }
#mainimg .cf_btn_ghost {
  display: inline-block;
  border: 2px solid rgba(255,255,255,.6);
  color: #fff;
  border-radius: 50px;
  padding: calc(1.1em - 2px) 2.2em;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: .05em;
  transition: all .3s cubic-bezier(.4,0,0,1);
}
#mainimg .cf_btn_ghost:hover {
  background: #fff;
  color: var(--cf-primary);
  border-color: #fff;
  transform: translateY(-2px);
}
@media screen and (max-width: 767px) {
  #mainimg .cf_hero_label { text-align: center; }
  #mainimg .cf_hero_cta { display: block; margin-top: 2rem; }
  #mainimg .cf_hero_cta .btn1,
  #mainimg .cf_btn_ghost { display: block; text-align: center; }
  #mainimg .cf_btn_ghost { margin-top: 1rem; }
}
/* the video variant keeps top.css .mainimg_video as-is; only preload differs */

/* =============================================
   HERO — AI demo (anim variant)
   ============================================= */
#mainimg .mainimg_cont .cf-demo {
  flex: 1 1 50%;
  min-width: 0;
  margin-left: 3em;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 380px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  overflow: hidden;
  color: var(--cf-text);
  font-size: 1.2rem;
  line-height: 1.5;
  text-align: left;
}
@media screen and (max-width: 767px) {
  #mainimg .mainimg_cont .cf-demo { margin: 2em 0 0; min-height: 0; }
}
/* neutralise top.css hero list styles inside the demo */
#mainimg .cf-demo ul, #mainimg .cf-demo ol {
  max-width: none; margin: 0; padding: 0; display: block; list-style: none; gap: 0;
}
#mainimg .cf-demo li {
  margin: 0; padding: 0; font-size: inherit; color: inherit; font-weight: inherit; position: static;
}
#mainimg .cf-demo li:before { display: none; }
#mainimg .cf-demo p { margin: 0; }

/* animated atoms */
#mainimg .cf-demo .cf-a {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}
#mainimg .cf-demo .cf-a.is-on,
#mainimg .cf-demo:not([data-phase]) .cf-a { opacity: 1; transform: none; }

/* window bar */
#mainimg .cf-demo .cf-demo__bar {
  display: flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px;
  background: var(--cf-bg);
  border-bottom: 1px solid var(--cf-border);
  font-family: "Poppins", sans-serif; font-size: 1.05rem; color: var(--cf-text-l);
}
#mainimg .cf-demo .cf-demo__bar i { width: 9px; height: 9px; border-radius: 50%; background: #D6DEE8; }
#mainimg .cf-demo .cf-demo__bar i:nth-child(1) { background: #F26D5B; }
#mainimg .cf-demo .cf-demo__bar i:nth-child(2) { background: #F7C948; }
#mainimg .cf-demo .cf-demo__bar i:nth-child(3) { background: #5AC46A; }
#mainimg .cf-demo .cf-demo__bar span { margin-left: 8px; letter-spacing: .06em; }

/* body: chat | stage */
#mainimg .cf-demo .cf-demo__body { display: flex; flex: 1; min-height: 0; }
#mainimg .cf-demo .cf-demo__chat {
  width: 42%; flex: none;
  padding: 14px 12px;
  border-right: 1px solid var(--cf-border);
  display: flex; flex-direction: column; gap: 10px;
  background: #fff;
}
#mainimg .cf-demo .cf-demo__stage {
  flex: 1; min-width: 0;
  position: relative;
  padding: 12px;
  background: #F8FAFC;
}
@media screen and (max-width: 767px) {
  #mainimg .cf-demo .cf-demo__body { flex-direction: column; }
  #mainimg .cf-demo .cf-demo__chat { width: 100%; border-right: 0; border-bottom: 1px solid var(--cf-border); }
}

/* chat: user prompt */
#mainimg .cf-demo .cf-demo__prompt {
  align-self: flex-end;
  max-width: 100%;
  min-height: 3.8em;
  background: linear-gradient(135deg, #0B2B50, #1A4A7A);
  color: #fff;
  border-radius: 12px 12px 2px 12px;
  padding: 8px 10px;
  word-break: break-all;
}
#mainimg .cf-demo .cf-demo__prompt { transition: opacity .3s; }
#mainimg .cf-demo[data-phase="idle"] .cf-demo__prompt { opacity: 0; }
#mainimg .cf-demo .cf-demo__caret {
  display: inline-block; width: 2px; height: 1em;
  background: #fff; margin-left: 2px; vertical-align: -2px; opacity: 0;
}
#mainimg .cf-demo[data-phase="typing"] .cf-demo__caret { animation: cfCaret 1s steps(1) infinite; }
@keyframes cfCaret { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }

/* chat: AI bubble (thinking text and summary text share one cell) */
#mainimg .cf-demo .cf-demo__ai {
  background: var(--cf-bg);
  border: 1px solid var(--cf-border);
  border-radius: 12px 12px 12px 2px;
  padding: 8px 10px;
}
#mainimg .cf-demo .cf-demo__ai b {
  display: block;
  font-family: "Poppins", sans-serif; font-size: .95rem; font-weight: 600;
  color: var(--cf-accent); letter-spacing: .12em; margin-bottom: 3px;
}
#mainimg .cf-demo .cf-demo__ai .cf-demo__aitxt { display: grid; }
#mainimg .cf-demo .cf-demo__ai .cf-demo__aitxt > span { grid-area: 1 / 1; transition: opacity .3s; }
#mainimg .cf-demo .cf-demo__ai .t-sum { opacity: 0; }
#mainimg .cf-demo[data-phase="summary"] .t-think,
#mainimg .cf-demo[data-phase="route"] .t-think,
#mainimg .cf-demo[data-phase="mobile"] .t-think,
#mainimg .cf-demo[data-phase="done"] .t-think,
#mainimg .cf-demo:not([data-phase]) .t-think { opacity: 0; }
#mainimg .cf-demo[data-phase="summary"] .t-sum,
#mainimg .cf-demo[data-phase="route"] .t-sum,
#mainimg .cf-demo[data-phase="mobile"] .t-sum,
#mainimg .cf-demo[data-phase="done"] .t-sum,
#mainimg .cf-demo:not([data-phase]) .t-sum { opacity: 1; }
#mainimg .cf-demo .t-sum em { font-style: normal; color: var(--cf-ok); font-weight: 700; margin-right: 2px; }

/* chat: progress steps */
#mainimg .cf-demo .cf-demo__steps { padding-left: 4px; }
#mainimg .cf-demo .cf-demo__steps li {
  position: relative;
  padding-left: 1.7em;
  margin-top: 4px;
  font-size: 1.1rem;
  color: var(--cf-text-l);
}
#mainimg .cf-demo .cf-demo__steps li:before {
  content: ""; display: block;
  position: absolute; left: 0; top: .4em;
  width: .95em; height: .95em; border-radius: 50%;
  border: 2px solid var(--cf-ok); background: #fff;
  transition: background .3s;
}
#mainimg .cf-demo .cf-demo__steps li.is-on:before,
#mainimg .cf-demo:not([data-phase]) .cf-demo__steps li:before {
  background: var(--cf-ok); box-shadow: inset 0 0 0 2px #fff;
}

/* stage: tabs */
#mainimg .cf-demo .cf-demo__tabs { display: flex; gap: 6px; margin-bottom: 10px; }
#mainimg .cf-demo .cf-demo__tabs span {
  font-size: 1.05rem; padding: 3px 10px; border-radius: 50px;
  border: 1px solid var(--cf-border); color: var(--cf-text-l); background: #fff;
  transition: all .3s;
}
#mainimg .cf-demo .cf-demo__tabs .is-form,
#mainimg .cf-demo[data-phase="route"] .cf-demo__tabs .is-route {
  background: var(--cf-primary); color: #fff; border-color: var(--cf-primary);
}
#mainimg .cf-demo[data-phase="route"] .cf-demo__tabs .is-form {
  background: #fff; color: var(--cf-text-l); border-color: var(--cf-border);
}

/* stage: form card */
#mainimg .cf-demo .cf-demo__pc {
  position: relative;
  background: #fff;
  border: 1px solid var(--cf-border);
  border-radius: 10px;
  padding: 10px 12px;
  min-height: 214px;
  transition: padding-right .4s ease;
}
/* make room for the phone preview so no field is hidden behind it */
#mainimg .cf-demo[data-phase="mobile"] .cf-demo__pc,
#mainimg .cf-demo[data-phase="done"] .cf-demo__pc,
#mainimg .cf-demo:not([data-phase]) .cf-demo__pc { padding-right: 116px; }
#mainimg .cf-demo .cf-demo__empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #A3AFBF; font-size: 1.15rem;
  transition: opacity .3s;
}
#mainimg .cf-demo[data-phase="fields"] .cf-demo__empty,
#mainimg .cf-demo[data-phase="summary"] .cf-demo__empty,
#mainimg .cf-demo[data-phase="route"] .cf-demo__empty,
#mainimg .cf-demo[data-phase="mobile"] .cf-demo__empty,
#mainimg .cf-demo[data-phase="done"] .cf-demo__empty,
#mainimg .cf-demo:not([data-phase]) .cf-demo__empty { opacity: 0; }

#mainimg .cf-demo .cf-demo__fields li {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
}
#mainimg .cf-demo .cf-demo__fields .lbl {
  width: 62px; flex: none;
  font-size: 1.05rem; color: var(--cf-text-l);
}
#mainimg .cf-demo .cf-demo__fields .lbl small {
  display: inline-block; font-size: .85rem; color: var(--cf-cta); margin-left: 3px; vertical-align: top;
}
#mainimg .cf-demo .cf-demo__fields .inp {
  flex: 1; min-width: 0;
  height: 22px;
  border: 1px solid var(--cf-border); border-radius: 6px; background: #fff;
  font-size: 1rem; color: #94A3B8;
  padding: 0 8px;
  display: flex; align-items: center;
  overflow: hidden; white-space: nowrap;
}
#mainimg .cf-demo .cf-demo__fields .inp.cur { color: var(--cf-text); font-family: "Poppins", sans-serif; }
#mainimg .cf-demo .cf-demo__fields .inp.sel:after { content: "\25BE"; margin-left: auto; color: var(--cf-text-l); }
#mainimg .cf-demo .cf-demo__fields .inp.file { border-style: dashed; justify-content: center; }
#mainimg .cf-demo .cf-demo__fields .inp.area { height: 30px; align-items: flex-start; padding-top: 3px; }

/* stage: approval route overlay */
#mainimg .cf-demo .cf-demo__route {
  position: absolute; inset: 10px 12px;
  background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .35s;
}
#mainimg .cf-demo[data-phase="route"] .cf-demo__route { opacity: 1; }
#mainimg .cf-demo .cf-demo__route .nodes { display: flex; align-items: center; width: 100%; }
#mainimg .cf-demo .cf-demo__route .node {
  border: 2px solid var(--cf-primary); color: var(--cf-primary);
  font-weight: 700; font-size: 1.1rem;
  border-radius: 50px; padding: 4px 12px; background: #fff; white-space: nowrap;
}
#mainimg .cf-demo .cf-demo__route .node.is-start { border-color: var(--cf-accent); color: var(--cf-accent); }
#mainimg .cf-demo .cf-demo__route i {
  flex: 1; height: 2px; background: var(--cf-accent); position: relative; margin: 0 4px;
}
#mainimg .cf-demo .cf-demo__route i:after {
  content: ""; position: absolute; right: -1px; top: -4px;
  border: 5px solid transparent; border-left-color: var(--cf-accent); border-right: 0;
}
#mainimg .cf-demo .cf-demo__route .cap { margin-top: 14px; font-size: 1.05rem; color: var(--cf-text-l); text-align: center; }
#mainimg .cf-demo .cf-demo__route .badge {
  position: absolute; top: 6px; right: 8px;
  font-size: .95rem; color: var(--cf-text-l);
  background: var(--cf-bg); border: 1px solid var(--cf-border); border-radius: 50px; padding: 2px 8px;
}

/* stage: phone preview */
#mainimg .cf-demo .cf-demo__phone {
  position: absolute; right: 14px; bottom: 14px;
  width: 88px; height: 150px;
  border: 3px solid var(--cf-primary); border-radius: 14px; background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  padding: 16px 8px 8px;
  opacity: 0; transform: translateY(12px) scale(.96);
  transition: opacity .4s, transform .4s;
}
#mainimg .cf-demo .cf-demo__phone:before {
  content: ""; position: absolute; top: 5px; left: 50%;
  width: 26px; height: 3px; margin-left: -13px; border-radius: 2px; background: #CBD5E1;
}
#mainimg .cf-demo .cf-demo__phone span {
  display: block; height: 9px; border-radius: 3px;
  background: var(--cf-bg); border: 1px solid var(--cf-border); margin-top: 6px;
}
#mainimg .cf-demo .cf-demo__phone span:first-of-type { margin-top: 0; }
#mainimg .cf-demo .cf-demo__phone span.ok { background: var(--cf-cta); border-color: var(--cf-cta); height: 12px; border-radius: 6px; margin-top: 10px; }
#mainimg .cf-demo .cf-demo__phone .badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--cf-ok); color: #fff;
  font-size: .9rem; font-weight: 700; padding: 2px 8px; border-radius: 50px;
  white-space: nowrap; height: auto; border: 0; margin: 0;
}
#mainimg .cf-demo[data-phase="mobile"] .cf-demo__phone,
#mainimg .cf-demo[data-phase="done"] .cf-demo__phone,
#mainimg .cf-demo:not([data-phase]) .cf-demo__phone { opacity: 1; transform: none; }

/* stage: developer JSON chip */
#mainimg .cf-demo .cf-demo__json {
  position: absolute; left: 14px; bottom: 14px;
  font-family: var(--cf-mono); font-size: 1rem;
  background: var(--cf-primary); color: #9FD3F5;
  padding: 5px 9px; border-radius: 6px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s, transform .4s;
}
#mainimg .cf-demo[data-phase="done"] .cf-demo__json,
#mainimg .cf-demo:not([data-phase]) .cf-demo__json { opacity: 1; transform: none; }

@media screen and (max-width: 767px) {
  #mainimg .cf-demo .cf-demo__phone,
  #mainimg .cf-demo .cf-demo__json { display: none; }
  #mainimg .cf-demo .cf-demo__fields li:nth-child(n+5) { display: none; }
  #mainimg .cf-demo .cf-demo__pc { min-height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  #mainimg .cf-demo * { transition: none !important; animation: none !important; }
}

/* =============================================
   1. PAIN POINTS  (.cont_worry.cf_pain — restyled cards)
   ============================================= */
#main .cont_worry.cf_pain ul { align-items: stretch; }
#main .cont_worry.cf_pain ul li {
  background: #fff;
  border: 1px solid var(--cf-border);
  border-radius: 12px;
  padding: 2.6rem 1.6rem 2.4rem;
  text-align: center;
  transition: all .3s ease;
}
#main .cont_worry.cf_pain ul li:hover {
  border-color: var(--cf-accent);
  box-shadow: 0 8px 25px rgba(46,139,192,.1);
  transform: translateY(-2px);
}
#main .cont_worry.cf_pain ul li figure { order: -1; margin: 0 0 1.4rem; }
#main .cont_worry.cf_pain ul li figure i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--cf-bg); color: var(--cf-accent); font-size: 2.8rem;
}
#main .cont_worry.cf_pain ul li p {
  background: none; color: var(--cf-primary);
  padding: 0; margin: 0; border-radius: 0; flex: none;
  font-size: 1.7rem; font-weight: 700; line-height: 1.4;
}
#main .cont_worry.cf_pain ul li .desc {
  display: block; margin-top: 1rem;
  font-size: 1.35rem; line-height: 1.7; color: var(--cf-text-l); text-align: left;
}
#main .cont_worry.cf_pain > div p { text-align: center; font-size: 1.7rem; line-height: 1.8; }
#main .cont_worry.cf_pain > div p strong { font-size: 2.2rem; }
@media screen and (max-width: 767px) {
  #main .cont_worry.cf_pain ul li { flex-direction: row; flex-wrap: wrap; text-align: left; padding: 1.6rem; }
  #main .cont_worry.cf_pain ul li figure { order: 0; margin: 0 1.2rem 0 0; flex: none; display: block; }
  #main .cont_worry.cf_pain ul li figure i { width: 46px; height: 46px; font-size: 2rem; }
  #main .cont_worry.cf_pain ul li p { width: auto; flex: 1; font-size: 1.5rem; margin: 0; }
  #main .cont_worry.cf_pain ul li .desc { width: 100%; margin-top: .8rem; font-size: 1.3rem; }
  #main .cont_worry.cf_pain > div p { font-size: 1.45rem; text-align: left; }
  #main .cont_worry.cf_pain > div p strong { font-size: 1.8rem; }
}

/* =============================================
   2. CONCEPT  (.cont_concept)
   ============================================= */
#main .cont_concept { background: var(--cf-bg); }
#main .cont_concept .cf_concept_head { display: flex; align-items: center; gap: 4rem; }
#main .cont_concept .cf_concept_text { flex: 1; min-width: 0; }
#main .cont_concept .cf_concept_text .ttl1 { font-size: 2.8rem; }
#main .cont_concept .cf_concept_text .cf_lead strong { color: var(--cf-cta); }
#main .cont_concept .cf_concept_screen { width: 42%; flex: none; margin: 0; }
#main .cont_concept .cf_concept_screen img {
  width: 100%; height: auto; border-radius: 12px; box-shadow: var(--cf-shadow);
}
@media screen and (max-width: 767px) {
  #main .cont_concept .cf_concept_head { display: block; }
  #main .cont_concept .cf_concept_text .ttl1 { font-size: 2.2rem; }
  #main .cont_concept .cf_concept_screen { width: 100%; margin-top: 2rem; }
}
#main .cf_pillars { display: flex; gap: 2rem; margin-top: 5rem; }
#main .cf_pillars li {
  flex: 1; position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--cf-border); border-radius: 12px;
  padding: 3rem 2.6rem;
}
#main .cf_pillars li:before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--cf-accent), var(--cf-accent-l));
}
#main .cf_pillars li.is-ai:before { background: linear-gradient(90deg, var(--cf-cta), var(--cf-accent)); }
#main .cf_pillars li i { display: block; font-size: 2.6rem; color: var(--cf-accent); margin-bottom: 1.4rem; }
#main .cf_pillars li.is-ai i { color: var(--cf-cta); }
#main .cf_pillars li h4 { font-size: 2rem; font-weight: 700; color: var(--cf-primary); margin: 0 0 .8rem; }
#main .cf_pillars li p { font-size: 1.4rem; color: var(--cf-text-l); line-height: 1.8; }
@media screen and (max-width: 767px) {
  #main .cf_pillars { display: block; margin-top: 3rem; }
  #main .cf_pillars li + li { margin-top: 1.2rem; }
  #main .cf_pillars li { padding: 2.2rem 2rem; }
}

/* =============================================
   3. AI-NATIVE BUILDER  (.cont_ai_builder — dark)
   ============================================= */
#main .cont_ai_builder {
  background: linear-gradient(135deg, #0B2B50 0%, #1A4A7A 100%);
  color: #fff;
  position: relative; overflow: hidden;
}
#main .cont_ai_builder::before {
  content: ""; position: absolute; top: -30%; right: -10%;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(46,139,192,.18) 0%, transparent 70%);
  pointer-events: none;
}
#main .cont_ai_builder .inner { position: relative; z-index: 1; }
#main .cont_ai_builder .cf_label { color: var(--cf-accent-l); }
#main .cont_ai_builder .ttl1 { color: #fff; font-size: 3.6rem; }
#main .cont_ai_builder .cf_lead { color: rgba(255,255,255,.82); }
@media screen and (max-width: 767px) { #main .cont_ai_builder .ttl1 { font-size: 2.6rem; } }

#main .cf_builder_grid { display: flex; gap: 4rem; align-items: flex-start; margin-top: 4rem; }
#main .cf_builder_mock {
  flex: 1 1 55%; min-width: 0;
  background: #fff; color: var(--cf-text);
  border-radius: 12px; padding: 2.4rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  font-size: 1.4rem;
  display: flex; flex-direction: column; gap: 1.4rem;
}
#main .cf_builder_mock .who {
  display: block;
  font-family: "Poppins", sans-serif; font-size: 1rem; font-weight: 600; letter-spacing: .14em;
  margin-bottom: .3em; opacity: .8;
}
#main .cf_builder_mock .mock_prompt {
  align-self: flex-end; max-width: 92%;
  background: linear-gradient(135deg, #0B2B50, #1A4A7A); color: #fff;
  border-radius: 14px 14px 2px 14px; padding: 1.2rem 1.6rem;
}
#main .cf_builder_mock .mock_result {
  background: var(--cf-bg); border: 1px solid var(--cf-border);
  border-radius: 14px 14px 14px 2px; padding: 1.2rem 1.6rem;
}
#main .cf_builder_mock .mock_result .who { color: var(--cf-accent); opacity: 1; }
#main .cf_builder_mock .mock_result ul li {
  display: flex; align-items: flex-start; gap: .6em;
  margin-top: .35em; font-weight: 500;
}
#main .cf_builder_mock .mock_result ul li i { color: var(--cf-ok); margin-top: .25em; }
#main .cf_builder_mock .mock_route {
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px dashed var(--cf-border);
  color: var(--cf-text-l); font-size: 1.3rem;
}
#main .cf_builder_mock .mock_route i { color: var(--cf-accent); margin-right: .5em; }
#main .cf_builder_mock .mock_json {
  display: flex; align-items: center; gap: 1.2rem;
  font-size: 1.2rem; color: var(--cf-text-l); line-height: 1.6;
}
#main .cf_builder_mock .mock_json code {
  font-family: var(--cf-mono); font-size: 1.15rem;
  background: var(--cf-primary); color: #9FD3F5;
  padding: .45em .8em; border-radius: 6px; white-space: nowrap;
}
#main .cf_phases { flex: 1 1 45%; min-width: 0; display: flex; flex-direction: column; gap: 1.2rem; counter-reset: cfphase; list-style: none; padding: 0; margin: 0; }
#main .cf_phases li {
  margin: 0; position: relative; list-style: none;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px; padding: 1.8rem 2rem 1.8rem 6.6rem;
  backdrop-filter: blur(6px);
}
#main .cf_phases li:before {
  counter-increment: cfphase; content: counter(cfphase, decimal-leading-zero);
  position: absolute; left: 1.6rem; top: 1.7rem;
  width: 3.4rem; height: 3.4rem; border-radius: 10px;
  background: linear-gradient(135deg, var(--cf-accent), var(--cf-accent-l)); color: #fff;
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
}
#main .cf_phases li.is-ai { border-color: rgba(80,181,230,.7); background: rgba(80,181,230,.14); }
#main .cf_phases li.is-ai:before { background: linear-gradient(135deg, var(--cf-cta), #F08A6C); }
#main .cf_phases li .ph { font-family: "Poppins", sans-serif; font-size: 1rem; letter-spacing: .18em; color: var(--cf-accent-l); }
#main .cf_phases li h4 { font-size: 1.8rem; font-weight: 700; margin: .2rem 0 .3rem; color: #fff; }
#main .cf_phases li h4 small {
  font-size: 1.1rem; font-weight: 500; color: rgba(255,255,255,.7);
  margin-left: .6em; border: 1px solid rgba(255,255,255,.35); border-radius: 50px; padding: .05em .7em; vertical-align: middle;
}
#main .cf_phases li p { font-size: 1.35rem; color: rgba(255,255,255,.78); line-height: 1.7; }
#main .cf_builder_key { margin-top: 5rem; text-align: center; }
#main .cf_builder_key .key1 { font-size: 3.2rem; font-weight: 900; letter-spacing: .02em; line-height: 1.3; }
#main .cf_builder_key .key2 { margin-top: 1rem; font-size: 1.7rem; color: rgba(255,255,255,.85); line-height: 1.8; }
#main .cf_builder_key .btn1 { margin-top: 2.8rem; }
@media screen and (max-width: 767px) {
  #main .cf_builder_grid { display: block; margin-top: 2.4rem; }
  #main .cf_builder_mock { padding: 1.8rem; font-size: 1.3rem; }
  #main .cf_builder_mock .mock_json { display: block; }
  #main .cf_builder_mock .mock_json code { display: inline-block; margin-bottom: .5em; white-space: normal; }
  #main .cf_phases { margin-top: 2rem; }
  #main .cf_builder_key .key1 { font-size: 2.4rem; }
  #main .cf_builder_key .key2 { font-size: 1.45rem; }
}

/* =============================================
   4. AI ASSISTANT  (.cont_ai_assist)
   ============================================= */
#main .cont_ai_assist { background: var(--cf-bg); }
#main .cf_assist_grid { display: flex; gap: 4rem; align-items: stretch; margin-top: 3rem; }
#main .cf_timeline { flex: 1 1 45%; min-width: 0; position: relative; padding-left: 2.6rem; list-style: none; margin: 0; }
#main .cf_timeline li { list-style: none; }
#main .cf_timeline:before {
  content: ""; position: absolute; left: calc(.7rem - 1px); top: 1.2rem; bottom: 1.2rem; width: 2px;
  background: linear-gradient(180deg, var(--cf-accent), var(--cf-accent-l));
}
#main .cf_timeline li {
  margin: 0 0 1.6rem; position: relative;
  background: #fff; border: 1px solid var(--cf-border); border-radius: 12px;
  padding: 1.8rem 2rem;
}
#main .cf_timeline li:last-child { margin-bottom: 0; }
#main .cf_timeline li:before {
  content: ""; position: absolute; left: -2.6rem; top: 2.2rem;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: #fff; border: 3px solid var(--cf-accent);
}
#main .cf_timeline li time {
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.5rem;
  color: var(--cf-accent); letter-spacing: .05em;
}
#main .cf_timeline li h4 {
  display: inline-block; margin: 0 0 .4rem 1rem;
  font-size: 1.8rem; font-weight: 700; color: var(--cf-primary);
}
#main .cf_timeline li .ai_tag {
  display: inline-block; vertical-align: middle; margin-left: .6em;
  font-size: 1rem; font-weight: 600; letter-spacing: .05em;
  background: rgba(46,139,192,.1); color: var(--cf-accent);
  border-radius: 50px; padding: .1em .8em;
}
#main .cf_timeline li p { font-size: 1.4rem; color: var(--cf-text-l); line-height: 1.8; }
#main .cf_chat {
  flex: 1 1 55%; min-width: 0; position: relative;
  background: #fff; border: 1px solid var(--cf-border); border-radius: 12px;
  padding: 2.6rem 2.4rem 2rem; box-shadow: var(--cf-shadow);
  display: flex; flex-direction: column; gap: 1.2rem;
  font-size: 1.4rem;
}
#main .cf_chat .chat_label {
  position: absolute; top: -1.2rem; right: 2rem;
  background: var(--cf-text-l); color: #fff;
  font-size: 1.05rem; letter-spacing: .1em; padding: .2em 1em; border-radius: 50px;
}
#main .cf_chat .msg { display: flex; gap: .8rem; align-items: flex-start; max-width: 92%; }
#main .cf_chat .msg.ai b {
  flex: none; width: 3.2rem; height: 3.2rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--cf-accent), var(--cf-accent-l)); color: #fff;
  font-family: "Poppins", sans-serif; font-size: 1rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
#main .cf_chat .msg.ai span {
  background: var(--cf-bg); border: 1px solid var(--cf-border);
  border-radius: 14px 14px 14px 2px; padding: 1rem 1.4rem; line-height: 1.7;
}
#main .cf_chat .msg.user { align-self: flex-end; }
#main .cf_chat .msg.user span {
  background: linear-gradient(135deg, #0B2B50, #1A4A7A); color: #fff;
  border-radius: 14px 14px 2px 14px; padding: 1rem 1.4rem;
}
#main .cf_chat .chat_foot {
  margin-top: auto; padding-top: 1.2rem;
  border-top: 1px dashed var(--cf-border);
  color: var(--cf-text-l); font-size: 1.25rem;
}
#main .cf_chat .chat_foot i { color: var(--cf-accent); margin-right: .5em; }
#main .cf_providers {
  margin-top: 4rem;
  background: #fff; border: 1px solid var(--cf-border); border-radius: 12px;
  padding: 2.4rem 2.8rem;
}
#main .cf_providers .pl { display: flex; gap: 1.6rem; }
#main .cf_providers .pl li { flex: 1; border-left: 4px solid var(--cf-accent); padding: .4rem 0 .4rem 1.4rem; }
#main .cf_providers .pl li.claude { border-color: #D4A373; }
#main .cf_providers .pl li.azure { border-color: #0078D4; }
#main .cf_providers .pl li.gemini { border-color: #4285F4; }
#main .cf_providers .pl li b { display: block; font-size: 1.6rem; color: var(--cf-primary); }
#main .cf_providers .pl li span { font-size: 1.3rem; color: var(--cf-text-l); }
#main .cf_providers .pn {
  margin-top: 1.8rem; padding-top: 1.6rem;
  border-top: 1px solid var(--cf-border);
  display: flex; flex-wrap: wrap; gap: .6rem 2.4rem;
}
#main .cf_providers .pn li { position: relative; padding-left: 1.4em; font-size: 1.3rem; color: var(--cf-text-l); }
#main .cf_providers .pn li:before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .6em; height: .6em; border-radius: 50%; border: 2px solid var(--cf-accent-l);
}
#main .cf_providers .pn li.warn { color: var(--cf-cta); font-weight: 500; }
#main .cf_providers .pn li.warn:before { border-color: var(--cf-cta); }
@media screen and (max-width: 767px) {
  #main .cf_assist_grid { display: block; margin-top: 2rem; }
  #main .cf_chat { margin-top: 2.4rem; padding: 2.2rem 1.6rem 1.6rem; font-size: 1.3rem; }
  #main .cf_chat .msg { max-width: 100%; }
  #main .cf_providers { padding: 2rem 1.6rem; }
  #main .cf_providers .pl { display: block; }
  #main .cf_providers .pl li + li { margin-top: 1.2rem; }
  #main .cf_providers .pn { display: block; }
  #main .cf_providers .pn li + li { margin-top: .5rem; }
}

/* =============================================
   5. FOR DEVELOPERS  (.cont_dev)
   ============================================= */
#main .cont_dev { background: #fff; }
#main .cf_dev_grid { display: flex; gap: 4rem; align-items: center; margin-top: 3rem; }
#main .cf_terminal {
  flex: 1 1 55%; min-width: 0; position: relative;
  background: #0F2340; color: #DCE7F5;
  border-radius: 12px; padding: 1.8rem 2.4rem 2.4rem;
  font-family: var(--cf-mono); font-size: 1.3rem; line-height: 1.9;
  box-shadow: 0 20px 50px rgba(11,43,80,.25);
}
#main .cf_terminal .tbar { display: flex; align-items: center; gap: 6px; margin-bottom: 1.4rem; }
#main .cf_terminal .tbar i { width: 9px; height: 9px; border-radius: 50%; background: #2E4A6E; }
#main .cf_terminal .tbar span {
  margin-left: 8px; font-family: "Poppins", sans-serif; font-size: 1.05rem; letter-spacing: .1em; color: #8FA3BF;
}
#main .cf_terminal p { margin: 0; word-break: break-all; }
#main .cf_terminal .cmd { color: #fff; font-weight: 700; }
#main .cf_terminal .cmd:before { content: "> "; color: var(--cf-accent-l); }
#main .cf_terminal .ok { color: #BFE3F8; }
#main .cf_terminal .ok:before { content: "\2713 "; color: #4ADE80; }
#main .cf_terminal .dim { color: #8FA3BF; }
#main .cf_terminal .cur:after {
  content: ""; display: inline-block; width: .55em; height: 1em; background: #9FD3F5;
  vertical-align: -2px; margin-left: 2px; animation: cfCaret 1s steps(1) infinite;
}
#main .cf_shift { flex: 1 1 45%; min-width: 0; }
#main .cf_shift li {
  display: flex; align-items: center; gap: 1.2rem;
  background: var(--cf-bg); border: 1px solid var(--cf-border); border-radius: 12px;
  padding: 1.4rem 1.8rem; margin: 0;
}
#main .cf_shift li + li { margin-top: 1.2rem; }
#main .cf_shift .before {
  flex: 1; font-size: 1.4rem; color: var(--cf-text-l);
  text-decoration: line-through; text-decoration-color: rgba(107,122,141,.6);
}
#main .cf_shift li i { color: var(--cf-accent); font-size: 1.6rem; }
#main .cf_shift .after { flex: 1; text-align: right; font-size: 1.7rem; font-weight: 700; color: var(--cf-primary); }
#main .cf_dev_cards { display: flex; gap: 2rem; margin-top: 4rem; }
#main .cf_dev_cards li {
  flex: 1; background: #fff; border: 1px solid var(--cf-border); border-radius: 12px;
  padding: 2.8rem 2.4rem; transition: all .3s ease;
}
#main .cf_dev_cards li:hover {
  border-color: var(--cf-accent); box-shadow: 0 8px 25px rgba(46,139,192,.1); transform: translateY(-2px);
}
#main .cf_dev_cards li i { display: block; font-size: 2.4rem; color: var(--cf-accent); margin-bottom: 1.4rem; }
#main .cf_dev_cards li h4 { font-size: 1.9rem; font-weight: 700; color: var(--cf-primary); margin: 0 0 .8rem; }
#main .cf_dev_cards li h4 small { display: block; font-size: 1.2rem; font-weight: 500; color: var(--cf-text-l); margin-top: .2rem; }
#main .cf_dev_cards li p { font-size: 1.4rem; color: var(--cf-text-l); line-height: 1.8; }
#main .cf_dev_cards li p small { display: block; margin-top: .6rem; font-size: 1.2rem; color: #94A3B8; }
@media screen and (max-width: 767px) {
  #main .cf_dev_grid { display: block; margin-top: 2rem; }
  #main .cf_terminal { font-size: 1.2rem; padding: 1.4rem 1.6rem 1.8rem; }
  #main .cf_shift { margin-top: 2rem; }
  #main .cf_shift .after { font-size: 1.5rem; }
  #main .cf_dev_cards { display: block; margin-top: 2.4rem; }
  #main .cf_dev_cards li + li { margin-top: 1.2rem; }
  #main .cf_dev_cards li { padding: 2.2rem 2rem; }
}

/* =============================================
   6. WORKFLOW ENGINE  (.cont_function — feature chips)
   ============================================= */
#main .cont_function .cf_tags { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
#main .cont_function .cf_tags li {
  font-size: 1.3rem; color: #fff;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3);
  border-radius: 50px; padding: .35em 1.1em;
}
@media screen and (max-width: 767px) {
  #main .cont_function .cf_tags li { font-size: 1.15rem; padding: .3em .9em; }
}

/* =============================================
   7. INTEGRATION  (.cont_connect)
   ============================================= */
#main .cont_connect { background: #fff; }
#main .cf_connect { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 3rem; }
#main .cf_connect li {
  width: calc(33.333% - 1.34rem);
  display: flex; gap: 1.6rem; align-items: flex-start;
  background: var(--cf-bg); border: 1px solid var(--cf-border); border-radius: 12px;
  padding: 2.2rem 2.4rem;
}
#main .cf_connect li i {
  flex: none; width: 4.8rem; height: 4.8rem; border-radius: 12px;
  background: #fff; border: 1px solid var(--cf-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: var(--cf-accent);
}
#main .cf_connect li h4 { font-size: 1.7rem; font-weight: 700; color: var(--cf-primary); margin: 0 0 .4rem; }
#main .cf_connect li p { font-size: 1.35rem; color: var(--cf-text-l); line-height: 1.7; }
#main .cf_connect_band {
  margin-top: 4rem; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #0B2B50 0%, #1A4A7A 100%); color: #fff;
  border-radius: 16px; padding: 3.6rem 4rem;
  display: flex; align-items: center; gap: 3rem;
}
#main .cf_connect_band::after {
  content: ""; position: absolute; right: -10%; bottom: -60%;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(80,181,230,.18) 0%, transparent 70%);
  pointer-events: none;
}
#main .cf_connect_band > div { flex: 1; min-width: 0; position: relative; z-index: 1; }
#main .cf_connect_band h4 { font-size: 2.2rem; font-weight: 700; margin: 0 0 .8rem; color: #fff; }
#main .cf_connect_band p { font-size: 1.45rem; color: rgba(255,255,255,.82); line-height: 1.8; }
#main .cf_connect_band .btn1 { flex: none; white-space: nowrap; position: relative; z-index: 1; }
@media screen and (max-width: 767px) {
  #main .cf_connect { display: block; margin-top: 2rem; }
  #main .cf_connect li { width: 100%; }
  #main .cf_connect li + li { margin-top: 1.2rem; }
  #main .cf_connect_band { display: block; padding: 2.4rem 2rem; margin-top: 2.4rem; }
  #main .cf_connect_band h4 { font-size: 1.8rem; }
  #main .cf_connect_band .btn1 { margin-top: 1.6rem; white-space: normal; }
}

/* =============================================
   10. OPERATIONS + SUPPORT BAND  (.cont_customize)
   ============================================= */
#main .cont_customize { display: block; }
#main .cont_customize .cf_cols { display: flex; }
#main .cont_customize .left .ttl1 { font-size: 2.8rem; }
#main .cf_support_band {
  background: linear-gradient(135deg, #2E8BC0 0%, #1A4A7A 100%); color: #fff;
  padding: 4rem 5rem;
}
#main .cf_support_band .sb_inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; flex-wrap: wrap; gap: 3rem;
}
#main .cf_support_band .sb_head { flex: 0 0 26%; min-width: 220px; }
#main .cf_support_band .sb_head h4 { font-size: 2.2rem; font-weight: 700; margin: 0 0 .4rem; color: #fff; }
#main .cf_support_band .sb_head p { font-size: 1.3rem; color: rgba(255,255,255,.78); line-height: 1.7; }
#main .cf_support_band ul { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; }
#main .cf_support_band ul li { position: relative; padding-left: 1.7em; font-size: 1.5rem; line-height: 1.6; }
#main .cf_support_band ul li i { position: absolute; left: 0; top: .32em; color: #fff; }
#main .cf_support_band .btn1 { flex: none; }
@media screen and (max-width: 767px) {
  #main .cont_customize .cf_cols { display: block; }
  #main .cont_customize .left .ttl1 { font-size: 2.2rem; }
  #main .cf_support_band { padding: 2.4rem 20px; }
  #main .cf_support_band .sb_inner { display: block; }
  #main .cf_support_band ul { display: block; margin-top: 1.2rem; }
  #main .cf_support_band ul li + li { margin-top: .6rem; }
  #main .cf_support_band ul li { font-size: 1.4rem; }
  #main .cf_support_band .btn1 { margin-top: 1.6rem; }
}

/* =============================================
   11. FLOW + OFFERS  (.cont_flow)
   ============================================= */
#main .cf_offers { display: flex; gap: 2rem; max-width: 1200px; margin: 0 auto 4rem; }
#main .cf_offers li {
  flex: 1; margin: 0; position: relative;
  background: #fff; border: 2px solid var(--cf-border); border-radius: 12px;
  padding: 2.8rem 2.4rem 2.4rem; text-align: center;
  transition: all .3s ease;
}
#main .cf_offers li:hover { box-shadow: 0 8px 25px rgba(46,139,192,.1); transform: translateY(-2px); }
#main .cf_offers li.primary { border-color: var(--cf-cta); }
#main .cf_offers li .of_badge {
  position: absolute; top: -1.2rem; left: 50%; transform: translateX(-50%);
  background: var(--cf-cta); color: #fff;
  font-size: 1.1rem; font-weight: 700; letter-spacing: .1em;
  border-radius: 50px; padding: .2em 1.2em; white-space: nowrap;
}
#main .cf_offers li i.ic { display: block; font-size: 2.6rem; color: var(--cf-accent); margin-bottom: 1.2rem; }
#main .cf_offers li h4 { font-size: 1.9rem; font-weight: 700; color: var(--cf-primary); margin: 0 0 .6rem; }
#main .cf_offers li p { font-size: 1.35rem; color: var(--cf-text-l); line-height: 1.7; margin-bottom: 1.6rem; }
#main .cf_offers li a.btn1 { font-size: 1.35rem; padding: .9em 2em; }
#main .cf_offers li a.btn_line {
  display: inline-block; font-size: 1.4rem; font-weight: 700; color: var(--cf-accent);
  border-bottom: 2px solid currentColor; line-height: 1.4;
}
#main .cf_offers li a.btn_line i { margin-left: .4em; }
#main .cont_flow .cf_flow_cost { text-align: center; margin-top: 3rem; font-size: 1.45rem; color: var(--cf-text-l); }
#main .cont_flow .cf_flow_cost a { color: var(--cf-accent); font-weight: 700; border-bottom: 1px solid currentColor; }
@media screen and (max-width: 767px) {
  #main .cf_offers { display: block; margin-bottom: 2.4rem; }
  #main .cf_offers li + li { margin-top: 1.6rem; }
  #main .cf_offers li { padding: 2.4rem 1.8rem 2rem; }
  #main .cf_offers li a.btn1 { display: inline-block; width: auto; padding: .9em 2em; }
}

/* =============================================
   LAYOUT UNIFICATION — one 1200px content grid for every section (2026-09-10)
   top.css / base.css leave several blocks either full-bleed (.blog_list, .faq_list,
   .text_list2, .cont_customize columns, #cont_profile .cont) or inset (hero, .function_list)
   or narrower (.jirei_inner 1000px). Everything below aligns them with .inner (1200px).
   Pattern: max-width = 1200px + side padding, so narrow viewports keep their 5rem/20px gutters.
   ============================================= */

/* hero copy + chips (top.css pads .mainimg_cont / ul by 5rem inside a 1200 box) */
#mainimg .mainimg_cont { max-width: calc(1200px + 10rem); }
#mainimg ul { max-width: calc(1200px + 10rem); }

/* workflow feature cards: same edges as the gradient header card above them */
#main .cont_function > div.function_list { max-width: calc(1200px + 10rem); }

/* use cases: heading block and card row on the grid */
#main .cont_use { padding-left: 5rem; padding-right: 5rem; }
#main .cont_use .ttl_wrap {
  max-width: 1200px; margin: 0 auto;
  padding: 8rem calc(455px + 3rem) 4rem 0;
}
#main .cont_use .text_list2.text_list2_side { max-width: 1200px; margin: 0 auto 6rem; }

/* case studies: 1000 -> 1200 */
#main .jirei_inner { max-width: 1200px; }

/* operations split: keep the full-bleed backgrounds, align the inner edges with the grid */
#main .cont_customize .cf_cols .left  { padding-left: 5rem; padding-left: max(5rem, calc(50vw - 600px)); padding-right: 5rem; }
#main .cont_customize .cf_cols .right { padding-right: 5rem; padding-right: max(5rem, calc(50vw - 600px)); padding-left: 5rem; }

/* blog list + FAQ list */
#main .cont_blog .blog_list { max-width: 1200px; margin-left: auto; margin-right: auto; }
#main .cont_faq .faq_list { max-width: 1200px; margin-left: auto; margin-right: auto; }

/* profile body (shared part; the photo band above stays full-bleed by design) */
#main #cont_profile .cont { max-width: calc(1200px + 10rem); margin-left: auto; margin-right: auto; }

@media screen and (max-width: 767px) {
  #main .cont_use { padding-left: 0; padding-right: 0; }
  #main .cont_use .ttl_wrap { max-width: none; padding: 10% 20px 5%; }
  #main .cont_use .text_list2.text_list2_side { margin: 0 20px 10%; }
  #main .cont_customize .cf_cols .left,
  #main .cont_customize .cf_cols .right { padding: 10% 20px; }
  #main #cont_profile .cont { max-width: none; }
}

/* --- overrides for WordPress inline CSS (Customizer "追加CSS") -------------------------------
   The live <head> injects `.text_list2 > section { width:400px !important; margin:0 1rem 3rem 0 !important }`
   which freezes the use-case cards at 400px and wraps the 3rd card. Restore the fluid 3-column grid. */
#main .cont_use .text_list2 > section {
  width: calc(33.333% - 1.4rem) !important;
  margin: 0 !important;
}
@media screen and (max-width: 767px) {
  #main .cont_use .text_list2 > section { width: 48% !important; }
}

/* --- workflow section gutters: header card and card list share the 1200 grid at every width --- */
@media print, screen and (min-width: 768px) {
  #main .cont_function { padding-left: 5rem; padding-right: 5rem; }
  #main .cont_function .ttl_wrap { max-width: 1200px; margin-left: auto; margin-right: auto; }
  #main .cont_function > div.function_list { max-width: 1200px; padding-left: 0; padding-right: 0; }
}