/* 153（2026-10-08）サービス資料（Canva）の雰囲気：紺・ロイヤルブルー・虹色の淡いグラデーション
   文言＋シェイプ（番号の丸・色面カード・チップ）で整理。セクションは白／淡いグラデーションを交互に。影なし・本文16px以上 */
:root{--m-navy:#102650;--m-blue:#2448d8;--m-blue2:#2448d8;--m-lav:#f4f7fc;--m-line:#dfe6f2;--m-pink:#f4f7fc;--m-red:#e8344a;
  --m-iris:linear-gradient(120deg,#eaf4ff 0%,#f4f7fc 48%,#f4f7fc 100%);--m-iris-bar:linear-gradient(90deg,#7fd3ff,#a8c0ed 50%,#dfe6f2)}
html body[data-ui128]{color:var(--m-navy)}
html body[data-ui128] :is(h1,h2,h3){color:var(--m-navy)}

/* ---- セクションの切れ目 ---- */
html body[data-ui128] main>section.section{position:relative;background:#fff!important}
html body[data-ui128] main>section.section.pale,html body[data-ui128] main>section#grow{background:var(--m-iris)!important}
html body[data-ui128] main>section.section+section.section::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--m-iris-bar);opacity:.55}
html body[data-ui128] .section-head[data-chapter111]::before{display:inline-grid!important;place-items:center;width:44px;height:44px;margin:0 auto 14px!important;border-radius:50%;background:var(--m-blue)!important;color:#fff!important;font:700 16px/1 Arial,sans-serif!important;letter-spacing:0!important}
html body[data-ui128] .section-head .eyebrow{color:var(--m-blue)!important}
html body[data-ui128] .section-head h2{position:relative;padding-bottom:18px}
html body[data-ui128] .section-head h2::after{content:'';position:absolute;left:50%;bottom:0;width:64px;height:4px;margin-left:-32px;border-radius:8px;background:var(--m-iris-bar)}

/* ---- FV：虹色の面と、輪・泡のシェイプ ---- */
html body[data-ui128] section.hero{position:relative;overflow:hidden;background:var(--m-iris)!important}
html body[data-ui128] section.hero::before,html body[data-ui128] section.hero::after{content:'';position:absolute;border-radius:50%;pointer-events:none;z-index:0}
html body[data-ui128] section.hero::before{width:520px;height:520px;right:-160px;top:-180px;border:28px solid rgba(168,192,237,.16)}
html body[data-ui128] section.hero::after{width:260px;height:260px;left:-90px;bottom:-110px;border:18px solid rgba(127,211,255,.22)}
html body[data-ui128] section.hero .wrap{position:relative;z-index:1}
html body[data-ui128] section.hero h1 span,html body[data-ui128] section.hero h1 em{color:var(--m-blue)!important}

/* ---- ボタン：ロイヤルブルー ---- */
html body[data-ui128] a.primary128,html body[data-ui128] .nav-consult{background:var(--m-blue2)!important;border-color:var(--m-blue2)!important;color:#fff!important}
@media(hover:hover){html body[data-ui128] a.primary128:hover,html body[data-ui128] .nav-consult:hover{background:#1736b8!important}}

/* ---- MIEKATAとは：3つの考え方を番号の丸つきカードに ---- */
html body[data-ui128] #about .rules{counter-reset:rule153;gap:20px!important;border:0!important}
html body[data-ui128] #about .rule{counter-increment:rule153;position:relative;padding:62px 26px 26px!important;background:#fff!important;border:1px solid var(--m-line)!important;border-radius:20px!important;text-align:center}
html body[data-ui128] #about .rule+.rule{border-left:1px solid var(--m-line)!important}
html body[data-ui128] #about .rule::before{content:counter(rule153,decimal-leading-zero);position:absolute;top:-22px;left:50%;margin-left:-22px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--m-blue);color:#fff;font:700 16px/1 Arial,sans-serif}
html body[data-ui128] #about .rule h3{font-size:22px;color:var(--m-navy)}
html body[data-ui128] #about .rule::after{content:'';display:block;width:40px;height:3px;margin:16px auto 0;border-radius:8px;background:var(--m-iris-bar)}

/* ---- ベースパッケージ：含まれる内容をチップに ---- */
html body[data-ui128] #base .package-copy{padding:28px!important;background:#fff;border:1px solid var(--m-line);border-radius:20px}
html body[data-ui128] #base .package-copy h3{display:inline-block;padding:6px 16px;border-radius:999px;background:var(--m-navy);color:#fff!important;font-size:16px!important}
html body[data-ui128] #base ul.included{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important;margin-top:18px!important;border:0!important}
html body[data-ui128] #base ul.included li{position:relative;padding:12px 14px 12px 46px!important;border:1px solid var(--m-line)!important;border-radius:12px;background:var(--m-lav);font-size:16px;font-weight:700;color:var(--m-navy)}
html body[data-ui128] #base ul.included li::before{content:'✓'!important;position:absolute;left:12px;top:50%;margin-top:-12px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--m-blue);color:#fff;font-size:14px;font-weight:700}
html body[data-ui128] #base .package-summary122{padding:16px 20px;border-left:4px solid var(--m-blue);background:#fff;border-radius:0 12px 12px 0}

/* ---- 制作内容：3つの役割を色でグルーピング（紺＝基本／青＝追加／ラベンダー＝保守） ---- */
html body[data-ui128] #services .service-copy124{display:grid;gap:16px}
html body[data-ui128] #services .service-row{border:1px solid var(--m-line)!important;border-radius:20px;padding:28px 30px!important;background:#fff}
html body[data-ui128] #services .service-row:nth-of-type(1){background:var(--m-navy)!important;border-color:var(--m-navy)!important}
html body[data-ui128] #services .service-row:nth-of-type(1) :is(h3,p,a){color:#fff!important}
html body[data-ui128] #services .service-row:nth-of-type(2){background:#eef3ff!important;border-color:#dfe6f2!important}
html body[data-ui128] #services .service-row:nth-of-type(3){background:var(--m-pink)!important;border-color:#dfe6f2!important}
html body[data-ui128] #services .service-row:last-of-type{border-bottom-width:1px!important}
html body[data-ui128] #services .detail107{border:1px solid var(--m-line)!important;border-radius:20px;background:#fff;padding:0 18px}

/* ---- 料金：初期（紺の面）と月額（ラベンダーの面） ---- */
html body[data-ui128] #pricing .price-structure{gap:20px!important;border:0!important;background:none!important}
html body[data-ui128] #pricing .price-panel{border-radius:20px!important;border:1px solid var(--m-line)!important}
html body[data-ui128] #pricing .price-panel:first-child{background:var(--m-navy)!important;border-color:var(--m-navy)!important}
html body[data-ui128] #pricing .price-panel:first-child :is(h3,p,.tag,.value,.value small){color:#fff!important}
html body[data-ui128] #pricing .price-panel:last-child{background:#fff!important}
html body[data-ui128] #pricing .price-panel:last-child .value{color:var(--m-blue)!important}
html body[data-ui128] #pricing .price-panel .tag{display:inline-block;padding:5px 14px;border-radius:999px;background:rgba(255,255,255,.14);font-weight:700}
html body[data-ui128] #pricing .price-panel:last-child .tag{background:var(--m-lav);color:var(--m-navy)!important}

/* ---- 記事で育てる：資料の色に ---- */
html body[data-ui128] .grow152-bar{background:linear-gradient(180deg,#7f95ff,var(--m-blue))!important}
html body[data-ui128] .grow152-col:nth-child(4) .grow152-bar{background:linear-gradient(180deg,#dfe6f2,#2448d8)!important}
html body[data-ui128] .grow152-num{color:var(--m-blue)!important}
html body[data-ui128] .grow152-col:nth-child(4) .grow152-num{color:#2448d8!important}
html body[data-ui128] .grow152-tag{background:var(--m-blue)!important}
html body[data-ui128] .grow152-steps li:last-child .grow152-tag{background:#a8c0ed!important}
html body[data-ui128] .grow152-steps li:last-child{border-color:#dfe6f2!important}
html body[data-ui128] :is(.grow152-chart,.grow152-steps li){border-color:var(--m-line)!important}

/* ---- 制作の流れ：番号を青い丸に ---- */
html body[data-ui128] #flow .steps li{border-top:0!important;padding-top:0!important}
html body[data-ui128] #flow .steps li::before{display:grid!important;place-items:center;width:52px;height:52px;margin-bottom:16px;border-radius:50%;background:var(--m-blue);color:#fff!important;font:700 18px/1 Arial,sans-serif!important}
html body[data-ui128] #flow .steps li:last-child::before{background:#a8c0ed}

/* ---- 途中の相談・最後のCTA：紺→青→紫の面 ---- */
html body[data-ui128] section.mid-cta125,html body[data-ui128] section.cta{background:linear-gradient(120deg,#102650 0%,#2448d8 60%,#2448d8 100%)!important}
html body[data-ui128] :is(section.mid-cta125,section.cta) :is(h2,p,.eyebrow){color:#fff!important}
html body[data-ui128] :is(section.mid-cta125,section.cta) a.primary128{background:#fff!important;border-color:#fff!important;color:var(--m-navy)!important}
html body[data-ui128] :is(section.mid-cta125,section.cta) a.primary128 :is(.cta-label128,.cta-icon128){color:var(--m-navy)!important;border-color:var(--m-navy)!important}

/* ---- よくある質問 ---- */
html body[data-ui128] .faq139-list details{border:1px solid var(--m-line)!important;border-radius:20px!important;background:#fff}
html body[data-ui128] .faq139-q{background:var(--m-blue)!important;color:#fff!important}
html body[data-ui128] .faq139-qa{background:var(--m-pink)!important;color:var(--m-navy)!important}

@media(max-width:800px){
  html body[data-ui128] #base ul.included{grid-template-columns:1fr}
  html body[data-ui128] #about .rules{display:grid!important;grid-template-columns:1fr!important;gap:36px!important}
  html body[data-ui128] #services .service-row{padding:22px 20px!important}
  html body[data-ui128] section.hero::before{width:320px;height:320px;right:-140px;top:-120px;border-width:18px}
}

/* 153b：紺の帯のボタンは白／流れの番号は青い丸（既存CSSより強く） */
html body[data-ui128] :is(section.mid-cta125,section.cta) .actions a.button.action128.primary128{background:#fff!important;border-color:#fff!important;color:#102650!important}
html body[data-ui128] :is(section.mid-cta125,section.cta) .actions a.button.action128.primary128 .cta-label128{color:#102650!important}
html body[data-ui128] :is(section.mid-cta125,section.cta) .actions a.button.action128.primary128 .cta-icon128{color:#102650!important;border-color:rgba(20,28,76,.45)!important}
html body[data-ui128] :is(section.mid-cta125,section.cta) .actions a.button.action128.primary128 .cta-icon128::before{border-top-color:#2448d8!important;border-right-color:#2448d8!important}
@media(hover:hover){html body[data-ui128] :is(section.mid-cta125,section.cta) .actions a.button.action128.primary128:hover{background:#eef1ff!important}}
html body[data-ui128][data-story126] #flow .steps li::before{display:grid!important;place-items:center!important;width:52px!important;height:52px!important;border-radius:50%!important;background:#2448d8!important;color:#fff!important;font:700 18px/1 Arial,sans-serif!important;margin:0 0 16px!important}
html body[data-ui128][data-story126] #flow .steps li:last-child::before{background:#a8c0ed!important}
html body[data-ui128][data-story126] #flow .steps li:not(:last-child)::after{top:14px!important;background:transparent!important}
/* 159（2026-10-08）表示崩れの修正（全ページ） */
/* 下層ページ見出し：右上の斜め帯が文字にかぶる → 外し、資料と同じ輪のシェイプを右下に */
html body[data-stack123] .page-hero{overflow:hidden}
html body[data-stack123] .page-hero::after{display:none!important}
html body[data-stack123] .page-hero::before{left:auto!important;right:-90px;bottom:-110px!important;border-color:rgba(168,192,237,.22)!important}
/* 内容と対応していない3つの色ブロックの飾りを外す */
html body .motif124{display:none!important}
/* 制作実績：リンクと注記の間をあける */
html body .work>a{display:inline-block;margin:6px 0 14px}
html body .work>small{display:block;line-height:1.7}