@charset "utf-8";
/* ============================================================
   DesignBox 下層ページ 新デザイン適用 20260803
   ------------------------------------------------------------
   方針（五月女判断）：
     「66ページは費用対効果が悪くてもトップとデザイン・トンマナを
       きちんと合わせてしっかり作る」
   ------------------------------------------------------------
   実装方式：
     62ページすべてが global.css を共有しているため、その後ろに
     この1本を読ませて上書きする。各ページのHTMLは
     <link> を1行足すだけ＝66ファイルを個別に書き換えない。
     この1行を外せば完全に元へ戻せる。
   ------------------------------------------------------------
   確定カラー規定（トップと共通）：
     ブランド青   #004DA0  見出し・ロゴ
     アクセント   #B8A88A  罫線・タグ・アイコン地
     アクセント濃 #8A7A5C  アクセント色を文字に使う場合
     CTA         #BF5700  問い合わせ導線のみ（対白4.59:1でAA達成）
     締め色      #16283F  フッター・ベージュ地の文字
     地色        #FBF7F0  セクション交互の背景
   ============================================================ */

:root{
	--nt-blue:#004DA0;
	--nt-blue-mid:#0E63B4;
	--nt-navy:#0B4C90;
	--nt-accent:#B8A88A;
	--nt-accent-dark:#8A7A5C;
	--nt-cta:#BF5700;
	--nt-ink:#16283F;
	--nt-ivory:#FBF7F0;
	--nt-sand:#F2EDE3;
	--nt-line:#E2DCD0;
}

/* ============================================================
   1. 基本トーン
   ============================================================ */
body{
	color:#333;
	background:#fff;
	-webkit-font-smoothing:antialiased;
}

/* 本文の地色をトップと揃える（白ベタ一色を避ける） */
.sub_contents,
.sub_wrap{background:#fff;}

/* ============================================================
   2. ヘッダー：トップと同じ見え方に揃える
   ------------------------------------------------------------
   トップは .nt-header（高さ90px・下線がスクロールで出る）。
   下層は header + .inner(950px) の別構造なので、
   数値を合わせて見た目を一致させる。
   ============================================================ */
header{
	padding:18px 0;
	border-bottom:1px solid #E2DCD0;
	box-shadow:0 1px 0 rgba(22,40,63,.03);
}
header .inner{
	width:auto;
	max-width:1220px;
	padding:0 24px;
	display:flex;
	align-items:center;
	gap:22px;
}
.logo{float:none;margin:0;flex:0 0 auto;}
.logo img{width:196px;height:auto;display:block;}

nav{float:none;margin:0 0 0 auto;}
.head_list{display:flex;align-items:center;gap:20px;margin:0;padding:0;list-style:none;}
.head_list li{float:none;margin:0;}
.head_list li a{
	font-size:14px;
	font-weight:500;
	color:#16283F;
	letter-spacing:.02em;
	transition:color .2s ease;
}
.head_list li a:hover{color:var(--nt-blue);}

/* 言語バッジ：トップは上下のみ太線・角丸なし */
.language{float:none;margin:0;}
.language_txt{
	font-size:12px;
	line-height:1.35;
	font-weight:700;
	color:var(--nt-blue);
	text-align:center;
	padding:5px 10px;
	border-top:2px solid var(--nt-blue);
	border-bottom:2px solid var(--nt-blue);
	border-left:none;border-right:none;border-radius:0;
	background:transparent;
}

/* ヘッダーCTA（あれば）はトップと同じオレンジに */
.head_list li.head_li a{
	background:var(--nt-cta);
	color:#fff;
	border-radius:4px;
	padding:11px 18px;
	font-weight:700;
	box-shadow:0 2px 6px rgba(0,0,0,.14);
	transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.head_list li.head_li a:hover{
	transform:translateY(-1px);
	box-shadow:0 4px 10px rgba(0,0,0,.18);
	opacity:.95;
	color:#fff;
}

/* ============================================================
   3. サブMV：一切上書きしない（既存設計をそのまま使う）
   ------------------------------------------------------------
   実測で判明: サブMVの見出しは、背景PNGに描かれた「白い吹き出し」の
   中に収まるよう、works.css/blog.css 等で
   transform:translate(-56%,-100%) のように微調整されている。
   ここに position:relative や背景色を足すと包含ブロックが変わり、
   見出しが横に245pxずれて（x188→x433）イラストの裏に隠れた。
   → サブMVには触れない。イラスト流用というA案の方針とも一致する。
   ============================================================ */

/* ============================================================
   4. 見出し・区切り
   ============================================================ */
.ttl_h2{
	color:var(--nt-ink);
	font-weight:700;
	letter-spacing:.04em;
}
.ttl_h2::after{
	background:var(--nt-accent);
}
.c_blue{color:var(--nt-blue);}

/* ============================================================
   5. リンクとボタン
   ============================================================ */
a{transition:color .2s ease, opacity .2s ease;}

/* 汎用ボタンらしき要素をトップのCTAに寄せる */
.btn a,
.more a,
a.btn,
a.more{
	background:var(--nt-cta);
	color:#fff;
	border-radius:4px;
	font-weight:700;
	box-shadow:0 3px 10px rgba(0,0,0,.16);
	transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.btn a:hover,
.more a:hover,
a.btn:hover,
a.more:hover{
	transform:translateY(-1px);
	box-shadow:0 5px 14px rgba(0,0,0,.2);
	opacity:.95;
	color:#fff;
}

/* ============================================================
   6. カード類：触れることが分かる反応（トップと同じ）
   ============================================================ */
.works_list li,
.voice_list li,
.blog_list li,
.interview_list li{
	transition:transform .28s cubic-bezier(.22,1,.36,1),
	           box-shadow .28s ease,
	           border-color .28s ease;
}
.works_list li:hover,
.voice_list li:hover,
.blog_list li:hover,
.interview_list li:hover{
	transform:translateY(-3px);
	box-shadow:0 10px 24px rgba(22,40,63,.10);
}
/* サムネイルの拡大もトップと揃える */
.works_list li img,
.voice_list li img,
.blog_list li img{
	transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.works_list li:hover img,
.voice_list li:hover img,
.blog_list li:hover img{transform:scale(1.04);}

/* ============================================================
   7. フッター：トップと同じ締め色の一枚面にする
   ------------------------------------------------------------
   トップは背景 #2A4D9E の単色で、白い箱が浮かない作り。
   ============================================================ */
footer{
	background:#2A4D9E;
	color:#E8EDF3;
	padding-bottom:0;
}
footer .inner{
	padding:48px 0 26px;
	max-width:1220px;
	width:auto;
	padding-left:24px;padding-right:24px;
}
footer a{color:#E8EDF3;transition:color .2s ease;}
footer a:hover{color:#fff;text-decoration:underline;}
.footer_txt{color:#C7D2DF;}
.footer_left,
.footer_right{color:#C7D2DF;}
footer h3,
.footer_ttl{color:#C9B99A;}
/* コピーライトも同色にして罫線だけで区切る */
.copyright{
	background:transparent;
	border-top:1px solid rgba(255,255,255,.14);
	color:#AFC0D2;
	padding:14px 0;
	text-align:center;
	font-size:12px;
}

/* ============================================================
   8. フォーカス表示（キーボード操作対応）
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
	outline:2px solid var(--nt-accent);
	outline-offset:2px;
}

/* ============================================================
   9. スクロールで静かに出す（トップと同じ .nt-rv 方式）
   ============================================================ */
.nt-rv{
	opacity:0;
	transform:translateY(14px);
	transition:opacity .55s cubic-bezier(.22,1,.36,1),
	           transform .55s cubic-bezier(.22,1,.36,1);
	will-change:opacity, transform;
}
.nt-rv.is-in{opacity:1;transform:translateY(0);}
.nt-rv[data-rv="1"]{transition-delay:.07s;}
.nt-rv[data-rv="2"]{transition-delay:.14s;}
.nt-rv[data-rv="3"]{transition-delay:.21s;}
.nt-rv[data-rv="4"]{transition-delay:.28s;}
.nt-rv[data-rv="5"]{transition-delay:.35s;}

/* ============================================================
   10. 下部固定CTAバー：既存 .footer_fixed をトップの見た目に揃える
   ------------------------------------------------------------
   当初「下層にCV導線が無い」と判断して .nt-subbar を新規生成したが、
   実測すると 62ページ全てに .footer_fixed が既にあった（誤認）。
   重複を作らず、既存バーの見た目だけ整える。
   body への padding-bottom も不要（既存CSSで確保済み）＝
   足したことでフッター下に86pxの白い空白が出ていた。
   ============================================================ */
.footer_fixed{
	background:var(--nt-blue);
	border-top:1px solid rgba(255,255,255,.18);
	transition:transform .28s ease, opacity .28s ease;
}
.footer_fixed.is-hidden{
	transform:translateY(100%);
	opacity:0;
	pointer-events:none;
}
/* 問い合わせボタンはCTA色。
   ※background の一括指定は禁止。global.css が
     url(bg_btn.png)/url(ico_pdf.png) を background に持っており、
     一括指定すると **ボタン内のアイコンが消える**（実際に消していた）。
     background-color だけを上書きすること。 */
.fixed_mail .btn_contact{
	background-color:var(--nt-cta);
	transition:opacity .2s ease;
}
.fixed_mail .btn_contact:hover{opacity:.9;}
.fixed_pdf .btn_contact{transition:opacity .2s ease;}
.fixed_pdf .btn_contact:hover{opacity:.9;}

/* ============================================================
   11. SP調整
   ============================================================ */
@media only screen and (max-width:767px){
	header{padding:12px 0;}
	header .inner{padding:0 14px;gap:12px;}
	.logo img{width:150px;}
	footer .inner{padding:34px 14px 20px;}
}

/* ============================================================
   12. 動きを減らす設定（WCAG 2.3.3 / 2.2.2）
   ============================================================ */
@media (prefers-reduced-motion: reduce){
	.nt-rv{opacity:1!important;transform:none!important;transition:none!important;}
	.works_list li:hover,
	.voice_list li:hover,
	.blog_list li:hover,
	.interview_list li:hover{transform:none;}
	.works_list li img,
	.voice_list li img,
	.blog_list li img{transition:none;}
	.footer_fixed{transition:none;}
}

/* ============================================================
   サブMVの是正 20260803
   ------------------------------------------------------------
   実測で判明: 既存のサブMVは
     ・背景PNG(bg_submv01.png 等)に「白い吹き出し」が描かれており
     ・h1 は色 #004DA0（紺）で、その吹き出しの中に載る設計
     ・位置はページごとの transform(-56%,-100% 等)で吹き出しに合わせている
   ここに濃紺の背景色を敷いたため、紺文字が紺地に沈んで読めなくなった。
   （works=「制作実績」/ service/lp=「ランディングページ(LP)」が判読不能）

   対応: 背景色の上書きをやめ、元の設計に戻す。
        見出しの色・位置には触れない。
        新デザインとの接続は「下端の締め」だけで表現する。
   ============================================================ */

/* 見出しは元のまま（色も位置も既存CSSに任せる） */

/* 追加していたアクセント線は吹き出しからはみ出すため撤去 */


/* サブMVと本文の境目だけ、トップと同じ考え方で軽く作る */


/* ============================================================
   .inner の幅変更がサブMVの見出し位置を壊していた 20260803
   ------------------------------------------------------------
   原因: ヘッダー用に `header .inner{width:auto;max-width:1220px}` を
        当てたが、footer .inner にも同じ指定を入れたため
        「.inner は950px」という前提が崩れた。
        サブMVの h1 は works.css / blog.css 等で
        transform:translate(-56%,-100%) のように **950px基準**で
        吹き出しの中に置かれており、幅が変わると位置がずれる。
        実測: 本番は見出しが吹き出し中央。改修後は右へずれて
        イラストの裏に隠れ「制作実績」が判読不能になっていた。
   対応: .inner の既定(950px)は絶対に触らない。
        幅を広げるのは header と footer の**直下の要素だけ**に限定する。
   ============================================================ */
/* .inner は再宣言しない。
   global.css に @media(max-width:1300px){.inner{width:95%}} があり、
   ここで width:950px を宣言し直すとタブレット幅でその指定を打ち消して
   768pxで182pxの横溢れを起こしていた（本番は0px）。 */

/* ヘッダー/フッターだけ広げる（サブMV等の .inner には影響させない） */
header > .inner{width:auto;max-width:1220px;padding:0 24px;}
footer > .inner{width:auto;max-width:1220px;padding:48px 24px 26px;}

/* サブMVの .inner は元の挙動に完全に戻す */


/* ============================================================
   追記 2026-08-06：旧オレンジ #ED6C00 の残存を CTA 規定色へ
   ------------------------------------------------------------
   実測（Setup/cta_audit.js）で、白文字が乗る面に旧オレンジが
   残っていた箇所。#ED6C00 は対白 3.11:1 で WCAG AA(4.5:1) 未達。
   #BF5700 は 4.59:1 で AA 達成。

   ・.btn_contact … 本文中の「お問い合わせ」ボタン（325x76・白文字22px）
     global.css:390 で background に画像＋#ed6c00 を一括指定しているため、
     background-color だけを上書きする（矢印画像は残す）。
     ※ sublayer は .fixed_mail .btn_contact（固定バー内）しか
       扱っておらず、本文中の単独 .btn_contact を拾えていなかった。

   ・.sub_lp .content3-2 h3 … LPページの見出し帯。
     :after の三角も同色なので併せて揃える（business.css:1137,1142）。
   ============================================================ */
.btn_contact{ background-color:#BF5700; }
.sub_lp .content3 .content3-2 h3,
.sub_lp .content3 .content3-2 h3:after{ background-color:#BF5700; }

/* ------------------------------------------------------------
   .btn_contact の文字が白でなく #333 になっていた（本番既存の不具合）
   原因: newtop.css:37 の「.nt a{color:inherit}」が global.css:386 の
   color:#fff を後読み・同詳細度で上書きし、.nt(color:#333) を継承させていた。
   トップで同じ原因の色ズレを 8/3 に修正済み。下層で再発していた形。
   実測: 橙地 #BF5700 に #333 は 2.4:1 で WCAG AA 未達。白なら 4.59:1。
   sublayer.css は newtop.css より先に読まれるため、同詳細度では後勝ちで負ける。
   .nt を前置して詳細度(0,2,1)にし、.nt a(0,1,1) を確実に上回らせる。
   ------------------------------------------------------------ */
.nt a.btn_contact,
.nt a.btn_contact:hover,
.nt a.btn_contact:visited,
.nt a.btn_contact:focus{ color:#fff; }