@charset "UTF-8";
/* ==========================================================================
   service/webupdate（ホームページ・Webサイト更新・修正代行）のスタイル
   2026-09-03 全面改修（構成案：20260903_WebUpdate_Page_Brief_v1.0.docx）
   2026-09-21 service/coding・service/website も本ファイルを共用（構成案 Brief v1.0 /
   2026-09-12 が「Webサイト更新・修正ページと同じUI」を指定）。2ページ専用の指定は
   .sub_coding / .sub_website / .wu-page と、末尾が --3 / --odd の修飾クラスに限る。

   前提：このページは 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,
.wu-page{
	color:var(--wu-text);
}

/* coding / website のMV背景。webupdate・lp と同じ既存アセットを流用（専用イラストは未入稿）。
   H1は1行のため、位置・文字サイズは business.css の既定（.sub_mv .inner）のまま使う */
.sub_coding .sub_mv,
.sub_website .sub_mv{ background-image:url(../img/lp_bg.png); }

/* 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,
.wu-page .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);
}
/* カード群の後ろに置くまとめ文（website：お悩みの結論） */
.wu-lead-txt--after{ margin:36px auto 0; }
@media (max-width:767px){
	.wu-sec{ padding:48px 0; }
	.wu-lead-txt{ text-align:left; margin-bottom:28px; }
	.wu-lead-txt--after{ margin:24px auto 0; }
}

/* ---- FV直下リード＋主CTA ---- */
.wu-fv{ padding:48px 0 56px; background:#fff; }
/* パンくず（coding / website。現行ページに表示があったため引き継ぐ） */
/* global.css が素の nav 要素へ旧ヘッダー用の指定（PC: table-cell＋padding 0 10px 0 30px／
   1300px以下: display:none＋position:fixed＋紺背景）を当てているため、パンくずの nav では打ち消す。
   打ち消さないと1300px以下でパンくずが消える（2026-09-21 実測） */
.wu-crumb-nav{ display:block; width:auto; padding:0; margin:0; position:static; float:none; background:none; }
/* align-items:center＝リンク（padding付きで背が高い）と現在地テキストの縦位置を揃える。
   既定の stretch だと現在地だけ上に寄って見える（2026-09-21 五月女指摘） */
.wu-crumb{
	list-style:none; margin:0 auto 28px; padding:0; max-width:820px;
	display:flex; flex-wrap:wrap; align-items:center; font-size:13px; line-height:1.8; color:var(--wu-text-sub);
}
.wu-crumb li + li::before{ content:"／"; margin:0 6px; color:var(--wu-cta-line); }
/* WCAG 2.5.8：タップ領域の高さ24px以上を確保（13px×行高1.8＝23.4pxでは不足） */
.wu-crumb a{ display:inline-block; padding:3px 0; color:var(--nt-blue,#004CA0); text-decoration:none; }
.wu-crumb a:hover,
.wu-crumb a:focus-visible{ text-decoration:underline; }
.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); }
/* 悩みカード3枚（coding）。2列だと1枚余るため3列にする */
.wu-worry-grid--3{ grid-template-columns:repeat(3,1fr); max-width:1000px; }
@media (max-width:1023px){
	.wu-worry-grid--3{ grid-template-columns:1fr; max-width:560px; }
}
@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); }
/* 対応範囲が奇数枚（coding：5枚）のとき、最後の1枚を全幅にして半端な空きを作らない */
@media (min-width:768px){
	.wu-scope-grid--odd .wu-scope:last-child{ grid-column:1 / -1; }
}
@media (max-width:767px){
	.wu-scope-grid{ grid-template-columns:1fr; gap:14px; }
}

/* ---- 対応範囲セクション末尾の関連サービス導線（案内文＋テキストリンク） ---- */
.wu-xlink{
	list-style:none; margin:32px auto 0; padding:0; max-width:880px;
	display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.wu-xlink li{
	background:#f5f7fc; border-radius:8px; padding:20px 24px;
	display:flex; flex-direction:column; gap:10px;
}
.wu-xlink p{ margin:0; font-size:14px; line-height:1.9; color:var(--wu-text); }
/* newtop.css の .nt a{color:inherit} に負けないよう .nt を含めて詳細度を上げる */
.nt .wu-xlink a{
	margin-top:auto; align-self:flex-start;
	color:var(--nt-blue,#004CA0); font-weight:bold; font-size:15px; line-height:1.6;
	text-decoration:underline; text-underline-offset:3px;
}
.nt .wu-xlink a::after{ content:"\2192"; margin-left:6px; text-decoration:none; display:inline-block; }
.nt .wu-xlink a:hover{ text-decoration:none; }
.wu-sec--alt .wu-xlink li{ background:#fff; border:1px solid var(--nt-border,#d9e3ee); }
/* サンド系のページ（db-service.css の .dbs-sec 内）に置くときは地色を合わせる */
.dbs-sec .wu-xlink{ max-width:none; }
.dbs-sec .wu-xlink li{ background:var(--dbs-sand,#FBF7F0); border:1px solid var(--dbs-border,#E2D9C8); }
.dbs-sec--sand .wu-xlink li{ background:#fff; }
.dbs-sec .wu-works{ text-align:left; margin-top:28px; }
/* .dbs-sec は左揃え・版面いっぱいの系統なので、中央寄せ用の max-width を外して左端を揃える */
.dbs-sec .wu-merit-list,
.dbs-sec .wu-merit-note,
.dbs-sec .wu-price-grid,
.dbs-sec .wu-price-carry,
.dbs-sec .wu-price-note,
.dbs-sec .wu-price-extra{ max-width:none; margin-left:0; margin-right:0; }
.dbs-sec .wu-price-note{ text-align:left; }
/* .dbs-sec p{margin:0 0 1em} に詳細度で負けて上余白が0になるため、.dbs-sec 付きで指定し直す */
.dbs-sec .wu-merit-note{ margin-top:18px; margin-bottom:0; }
@media (max-width:767px){
	.wu-xlink{ grid-template-columns:1fr; gap:14px; margin-top:24px; }
	.wu-xlink li{ padding:18px; }
}

/* ---- メリット（番号付き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; }
}

/* メリットの補足（website：元データ納品） */
.wu-merit-note{
	max-width:820px; margin:18px auto 0; font-size:14px; line-height:1.9; color:var(--wu-text-sub);
}

/* ---- 中間導線（制作実績） ---- */
.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); }
/* 3ステップ（coding） */
.wu-flow--3{ grid-template-columns:repeat(3,1fr); max-width:880px; }
@media (max-width:1023px){
	.wu-flow{ grid-template-columns:1fr 1fr; }
	.wu-flow--3{ grid-template-columns:1fr; max-width:560px; }
}
@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); }
.wu-price-extra p + p{ margin-top:10px; }
.wu-price-list{ margin:0; padding-left:1.3em; font-size:14px; line-height:1.9; color:var(--wu-text); }
/* global.css / normalize.css のリセットが li{list-style:none} で行頭記号を消すため、li 側で明示する
   （ul に指定しても li の指定が勝つ。2026-09-21 目視で検出） */
.wu-price-list li{ list-style:disc; }
.wu-price-list li + li{ margin-top:4px; }
@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);
}
.nt .wu-faq-a a{ color:var(--nt-blue,#004CA0); text-decoration:underline; text-underline-offset:3px; }
@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; }
}