@charset "UTF-8";
/* ==========================================================================
   service/webupdate（ホームページ・Webサイト更新・修正代行）専用スタイル
   2026-09-03 全面改修（構成案：20260903_WebUpdate_Page_Brief_v1.0.docx）

   前提：このページは global.css / business.css（sub_mv背景）/ newtop.css
   （ヘッダー・フッター・.nt-inner・.nt-sec-ttl・.nt-btn）/ db-related.css を
   読み込んでいる。ここには本ページ固有のセクションだけを書く。
   色は原則 newtop.css の --nt-* 変数を参照する。CTAコンポーネント
   （.db-cta-*）の正本は blog.css の【C】ブロック（2026-08-29）。同じ意匠を
   サービスページでも使うためここに複製した。CTAの意匠を変えるときは
   blog.css と本ファイルの両方を更新すること。
   ========================================================================== */

:root{
	/* 最終CTA（.wu-cta-wrap）は .sub_webupdate の外にあるため、変数は :root に置く。
	   .sub_webupdate に置いた結果、CTAの背景色が var() 未解決で消えた（2026-09-03実測） */
	--wu-cta-orange:#BF5700;   /* ブログCTAと同じ。対白コントラスト4.5:1以上 */
	--wu-cta-line:#B8A88A;
	--wu-cta-beige:#FBF5ED;
	--wu-text:#1A1A1A;
	--wu-text-sub:#4A4A4A;
	--wu-navy:#16283F;
}
.sub_webupdate{
	color:var(--wu-text);
}

/* MVの見出しが従来（Webサイト更新・修正）より長くなったため縮める。
   背景画像の白い吹き出しは実測 約370px幅。1行目「ホームページ・Webサイト」
   （12文字）を収めるには 26px＋letter-spacing 1px が上限
   （32pxでは「ト」が吹き出し右の濃紺地に溢れて読めない＝2026-09-03実測） */
.sub_webupdate .sub_mv .inner,
.sub_webupdate .sub_mv .inner h1{ font-size:26px; letter-spacing:1px; }
@media (max-width:767px){
	.sub_webupdate .sub_mv .inner,
	.sub_webupdate .sub_mv .inner h1{ font-size:17px; letter-spacing:1px; }
}

/* ---- セクション共通 ---- */
.wu-sec{ padding:72px 0; background:#fff; }
/* 見出しの折返し制御：文節単位の .wu-nobr（inline-block）でしか折れないようにし、
   「〜できま／す」「更／新」のような単語途中の改行を防ぐ。balance は行長の均等化用 */
.sub_webupdate .nt-sec-ttl{ text-wrap:balance; }
.wu-nobr{ display:inline-block; }
.wu-sec--alt{ background:#f5f7fc; } /* 既存 .content1〜3 と同じ淡地 */
.wu-sec .nt-sec-ttl{ margin-bottom:12px; }
.wu-lead-txt{
	max-width:760px; margin:0 auto 40px; text-align:center;
	font-size:15px; line-height:2; color:var(--wu-text);
}
@media (max-width:767px){
	.wu-sec{ padding:48px 0; }
	.wu-lead-txt{ text-align:left; margin-bottom:28px; }
}

/* ---- FV直下リード＋主CTA ---- */
.wu-fv{ padding:48px 0 56px; background:#fff; }
.wu-fv-lead{
	max-width:820px; margin:0 auto 28px; text-align:center;
	font-size:16px; line-height:2; color:var(--wu-text);
}
@media (max-width:767px){
	.wu-fv{ padding:32px 0 40px; }
	.wu-fv-lead{ text-align:left; font-size:15px; }
}

/* ---- 悩みカード（4枚） ---- */
.wu-worry-grid{
	display:grid; grid-template-columns:1fr 1fr; gap:20px;
	max-width:880px; margin:0 auto;
}
.wu-worry{
	background:#fff; border:1px solid var(--nt-border,#d9e3ee); border-radius:8px;
	padding:24px 26px; box-shadow:0 2px 8px rgba(0,40,90,.06);
}
/* 悩みカードのアイコン（2026-09-03 天野FB②：文字の印象が強い→視覚要素を追加） */
.wu-worry-ico{display:block;margin-bottom:12px;color:var(--nt-blue,#004CA0);}
.wu-worry-ico svg{width:40px;height:40px;}
.wu-worry h3{
	font-size:17px; font-weight:bold; color:var(--wu-navy);
	margin:0 0 10px; line-height:1.5;
}
.wu-worry p{ margin:0; font-size:14px; line-height:1.9; color:var(--wu-text-sub); }
@media (max-width:767px){
	.wu-worry-grid{ grid-template-columns:1fr; gap:14px; }
	.wu-worry{ padding:20px 18px; }
}

/* ---- 対応範囲カード（4枚） ---- */
.wu-scope-grid{
	display:grid; grid-template-columns:1fr 1fr; gap:20px;
	max-width:880px; margin:0 auto;
}
.wu-scope{
	background:#fff; border:1px solid var(--nt-border,#d9e3ee); border-radius:8px;
	overflow:hidden;
}
.wu-scope h3{
	margin:0; padding:14px 22px; background:var(--nt-blue,#004CA0); color:#fff;
	font-size:16px; font-weight:bold; line-height:1.5;
	display:flex; align-items:center; gap:10px;
}
.wu-scope h3 svg{width:20px;height:20px;flex-shrink:0;}
.wu-scope p{ margin:0; padding:18px 22px 22px; font-size:14px; line-height:1.9; color:var(--wu-text); }
@media (max-width:767px){
	.wu-scope-grid{ grid-template-columns:1fr; gap:14px; }
}

/* ---- メリット（番号付き4点） ---- */
.wu-merit-list{
	list-style:none; margin:0 auto; padding:0; max-width:820px;
	counter-reset:wu-merit; display:grid; gap:18px;
}
.wu-merit-list li{
	counter-increment:wu-merit;
	background:#fff; border:1px solid var(--nt-border,#d9e3ee); border-radius:8px;
	padding:22px 26px 22px 74px; position:relative;
}
.wu-merit-list li::before{
	content:counter(wu-merit,decimal-leading-zero);
	position:absolute; left:24px; top:22px;
	font-size:24px; font-weight:700; line-height:1;
	color:var(--nt-blue,#004CA0); font-variant-numeric:tabular-nums;
}
.wu-merit-list h3{
	margin:0 0 8px; font-size:17px; font-weight:bold; color:var(--wu-navy); line-height:1.5;
}
.wu-merit-list p{ margin:0; font-size:14px; line-height:1.9; color:var(--wu-text-sub); }
@media (max-width:767px){
	.wu-merit-list li{ padding:18px 18px 18px 58px; }
	.wu-merit-list li::before{ left:16px; top:20px; font-size:20px; }
}

/* ---- 中間導線（制作実績） ---- */
.wu-works{ text-align:center; margin-top:36px; }
.wu-works a{
	display:inline-flex; align-items:center; gap:8px; padding:15px 32px;
	border:2px solid var(--nt-blue,#004CA0); border-radius:4px;
	color:var(--nt-blue,#004CA0); font-weight:bold; font-size:15px;
	text-decoration:none;
}
.wu-works a:hover{ background:var(--nt-blue,#004CA0); color:#fff; }
@media (max-width:767px){
	.wu-works a{ width:100%; justify-content:center; }
}

/* ---- ご依頼の流れ（4ステップ） ---- */
.wu-flow{
	display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
	max-width:960px; margin:0 auto;
}
.wu-step{
	background:#fff; border:1px solid var(--nt-border,#d9e3ee); border-radius:8px;
	padding:22px 18px;
}
.wu-step-num{
	display:flex; align-items:center; justify-content:center;
	width:40px; height:40px; margin:0 auto 12px;
	border-radius:50%; background:var(--nt-blue,#004CA0); color:#fff;
	font-weight:700; font-size:18px;
}
.wu-step h3{
	margin:0 0 8px; font-size:16px; font-weight:bold; color:var(--wu-navy);
	text-align:center; line-height:1.5;
}
.wu-step p{ margin:0; font-size:13px; line-height:1.8; color:var(--wu-text-sub); }
@media (max-width:1023px){
	.wu-flow{ grid-template-columns:1fr 1fr; }
}
@media (max-width:767px){
	.wu-flow{ grid-template-columns:1fr; gap:12px; }
	.wu-step{ display:grid; grid-template-columns:40px 1fr; column-gap:14px; padding:18px; }
	.wu-step-num{ margin:0; grid-row:1 / span 2; }
	.wu-step h3{ text-align:left; margin:0 0 6px; align-self:center; }
	.wu-step p{ grid-column:2; }
}

/* ---- 料金 ---- */
.wu-price-grid{
	display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
	max-width:880px; margin:0 auto 18px;
}
.wu-plan{
	background:#fff; border:1px solid var(--nt-border,#d9e3ee); border-radius:8px;
	overflow:hidden; text-align:center;
}
.wu-plan-head{
	background:var(--nt-blue,#004CA0); color:#fff; font-weight:bold;
	font-size:16px; padding:10px 0;
}
.wu-plan-body{ padding:18px 14px 20px; }
.wu-plan-term{ display:block; font-size:12px; color:var(--wu-text-sub); margin-bottom:4px; }
.wu-plan-price{
	margin:0 0 10px; font-size:34px; font-weight:700; line-height:1.2;
	color:var(--wu-navy);
}
.wu-plan-price small{ font-size:15px; font-weight:700; }
.wu-plan-hours{
	display:inline-block; padding:4px 14px; border-radius:999px;
	background:var(--nt-blue-light,#BBDFF7); color:var(--wu-navy);
	font-size:13px; font-weight:bold;
}
.wu-price-carry{
	max-width:880px; margin:0 auto 8px; text-align:center;
	background:var(--nt-blue-light,#BBDFF7); color:var(--wu-navy);
	border-radius:6px; padding:12px 16px; font-size:14px; font-weight:bold;
}
.wu-price-note{
	max-width:880px; margin:0 auto 28px; font-size:12px; color:var(--wu-text-sub);
	line-height:1.9; text-align:center;
}
/* 更新代行のみの契約（正式プラン外のため、プランカードにせず補足枠で示す） */
.wu-price-extra{
	max-width:880px; margin:0 auto;
	background:#fff; border:1px solid var(--nt-border,#d9e3ee); border-radius:8px;
	padding:22px 26px;
}
.wu-price-extra h3{
	margin:0 0 8px; font-size:16px; font-weight:bold; color:var(--wu-navy); line-height:1.5;
}
.wu-price-extra p{ margin:0; font-size:14px; line-height:1.9; color:var(--wu-text); }
@media (max-width:767px){
	.wu-price-grid{ grid-template-columns:1fr; gap:12px; }
	.wu-price-extra{ padding:18px; }
	.wu-price-note{ text-align:left; }
}

/* ---- FAQ（details/summary） ---- */
.wu-faq{ max-width:820px; margin:0 auto; display:grid; gap:14px; }
.wu-faq details{
	background:#fff; border:1px solid var(--nt-border,#d9e3ee); border-radius:8px;
}
.wu-faq summary{
	list-style:none; cursor:pointer; position:relative;
	padding:18px 52px 18px 22px; font-size:15px; font-weight:bold;
	color:var(--wu-navy); line-height:1.6;
}
.wu-faq summary::-webkit-details-marker{ display:none; }
/* 質問文はアウトライン用にh3で持つ。見た目はsummaryの文字設定を継承させる */
.wu-faq summary h3{ display:inline; margin:0; font-size:inherit; font-weight:inherit; color:inherit; line-height:inherit; }
.wu-faq summary::after{
	content:""; position:absolute; right:22px; top:50%;
	width:10px; height:10px; margin-top:-8px;
	border-right:2px solid var(--nt-blue,#004CA0);
	border-bottom:2px solid var(--nt-blue,#004CA0);
	transform:rotate(45deg); transition:transform .2s;
}
.wu-faq details[open] summary::after{ transform:rotate(225deg); margin-top:-2px; }
/* キーボード操作時の現在地を消さない（outline単独削除の禁止） */
.wu-faq summary:focus-visible{ outline:2px solid var(--nt-blue,#004CA0); outline-offset:2px; }
.wu-faq-a{
	margin:0; padding:0 22px 20px; font-size:14px; line-height:1.9; color:var(--wu-text);
}
@media (prefers-reduced-motion:reduce){
	.wu-faq summary::after{ transition:none; }
}

/* ==========================================================================
   最終CTA（ブログCTAと同型）
   正本＝blog.css【C】ブロックの .db-cta-final 一式（2026-08-29）。
   本ページは blog.css を読まないため必要分のみ複製。変更時は両方更新。
   ブログ17記事と違い、サービスページは検討度が高いため電話番号を表示する
   （構成案「共通表示」の指定どおり）。
   ========================================================================== */
.wu-cta-wrap{ padding:72px 0; background:#f5f7fc; }
.wu-cta-wrap .nt-inner > .db-cta-final{ max-width:850px; margin:0 auto; }
.wu-cta-wrap .db-cta-final{
	border:1px solid var(--wu-cta-line); border-radius:8px;
	overflow:hidden; background:#fff;
}
.wu-cta-wrap .db-cta-head{
	background:var(--wu-cta-beige); padding:24px 28px 20px; border-bottom:1px solid #E4DCCC;
}
.wu-cta-wrap .db-cta-ttl{
	display:flex; gap:12px; align-items:flex-start; margin:0 0 8px;
	font-size:19px; color:var(--wu-navy); font-weight:bold; line-height:1.55;
}
.wu-cta-wrap .db-cta-ttl svg{ flex-shrink:0; margin-top:2px; }
.wu-cta-wrap .db-cta-lead{ font-size:15px; color:var(--wu-text-sub); margin:0; line-height:1.8; }
.wu-cta-wrap .db-cta-body{ padding:22px 28px 26px; }
.wu-cta-wrap .db-cta-listttl{
	font-size:13px; font-weight:bold; color:#8A7A5C;
	letter-spacing:.06em; margin:0 0 10px;
}
.wu-cta-wrap .db-cta-list{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:9px; }
.wu-cta-wrap .db-cta-list li{
	display:flex; gap:10px; align-items:flex-start;
	font-size:15px; line-height:1.7; color:var(--wu-text);
}
.wu-cta-wrap .db-cta-list svg{ flex-shrink:0; margin-top:4.7px; }
.wu-cta-wrap .db-cta-btns{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.wu-cta-wrap .db-cta-main{
	display:inline-flex; align-items:center; gap:10px; padding:16px 36px;
	background:var(--wu-cta-orange); color:#fff; text-decoration:none;
	font-weight:bold; border-radius:4px; font-size:16px;
}
.wu-cta-wrap .db-cta-main:hover{ opacity:.88; }
.wu-cta-wrap .db-cta-sub{
	display:inline-flex; align-items:center; gap:8px; padding:15px 26px;
	border:2px solid var(--nt-blue,#004CA0); color:var(--nt-blue,#004CA0);
	text-decoration:none; font-weight:bold; border-radius:4px; font-size:15px;
}
.wu-cta-wrap .db-cta-sub:hover{ background:var(--nt-blue,#004CA0); color:#fff; }
.wu-cta-wrap .db-cta-sub:hover svg path{ fill:#fff; }
.wu-cta-wrap .db-cta-foot{ margin:16px 0 0; font-size:13px; color:#4F4F4F; line-height:1.75; }
.wu-cta-wrap .db-cta-foot a{ color:inherit; }
@media (max-width:767px){
	.wu-cta-wrap{ padding:48px 0; }
	.wu-cta-wrap .db-cta-head,
	.wu-cta-wrap .db-cta-body{ padding-left:18px; padding-right:18px; }
	.wu-cta-wrap .db-cta-main,
	.wu-cta-wrap .db-cta-sub{ width:100%; justify-content:center; }
}