@charset "utf-8";
/* ============================================================
   DesignBox 新トップページ専用CSS
   - 既存 global.css / index.css は変更しない
   - 新トップの指定はすべてこのファイルに集約する
   - 参照元: 20260722_DesignBox_LP_R1.jpg (1600x13661)
   - 既存サイトの設計に合わせる: コンテンツ幅1010px
   ============================================================ */

/* ---------- 変数 ---------- */
:root{
	/* カンプ 20260722_DesignBox_LP_R1.jpg から実測して採色 */
	--nt-blue:        #004CA0;   /* MV・CTA の濃紺 */
	--nt-blue-deep:   #114196;   /* 見出しブルー */
	--nt-blue-mid:    #4593D1;   /* キャンペーン帯・中間ブルー */
	--nt-blue-light:  #BBDFF7;   /* 料金・関連サービスの淡ブルー */
	--nt-blue-pale:   #F6F7FC;   /* 交互配色の淡グレー */
	--nt-navy:        #2A4D9E;   /* コピーライト帯 */
	--nt-orange:      #EC6C00;   /* CTA オレンジ */
	--nt-orange-dark: #d25e07;
	--nt-text:        #333333;
	--nt-gray:        #f4f4f4;
	--nt-border:      #d9e3ee;
	--nt-inner:       950px;    /* カンプ実測値 */
}

/* ---------- ベース ---------- */
.nt{
	font-family:"Noto Sans JP","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
	color:var(--nt-text);
	line-height:1.8;
	font-size:15px;
	-webkit-font-smoothing:antialiased;
}
.nt *{box-sizing:border-box;}
.nt img{max-width:100%;height:auto;vertical-align:bottom;}
.nt a{color:inherit;text-decoration:none;}
.nt .nt-inner{width:100%;max-width:var(--nt-inner);margin:0 auto;padding:0 20px;}

/* セクション見出し（黒・字間広め・下に短い罫） */
.nt-sec-ttl{
	text-align:center;
	font-size:28px;
	font-weight:700;
	color:#1a1a1a;
	margin:0 0 14px;
}
.nt-sec-ttl.is-blue{color:var(--nt-blue-deep);}
.nt-sec-ttl-line{
	width:100px;height:3px;
	margin:0 auto 40px;border-radius:2px;
}
.nt-lead{text-align:center;font-size:14px;margin:0 0 40px;}

/* CTAボタン（オレンジ）— 問い合わせ導線専用 */
.nt-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:14px;
	min-width:320px;padding:17px 38px;
	background:var(--nt-cta);color:#fff;
	font-size:17px;font-weight:700;letter-spacing:.06em;
}
.nt-btn .nt-btn-ico{width:26px;flex:0 0 26px;}
.nt-btn-wrap{text-align:center;}

/* 白抜き小ボタン（詳しくはこちら） */
.nt-btn-s{
	display:inline-flex;align-items:center;gap:10px;
	padding:9px 18px;border:1px solid var(--nt-blue-mid);
	background:#fff;color:var(--nt-blue);
	font-size:13px;font-weight:500;transition:.25s;
}
.nt-btn-s:hover{background:var(--nt-blue-mid);color:#fff;}
.nt-btn-s img{width:18px;}

/* ============================================================
   header
   ============================================================ */
.nt-header{
	background:#fff;
}
.nt-header .nt-header-in{margin:0 auto;padding:14px 24px;
	display:flex;align-items:center;
}
.nt-logo{flex:0 0 auto;}
.nt-logo img{width:196px;}
.nt-gnav{margin-left:auto;}
.nt-gnav ul{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;}
.nt-gnav a{font-size:14px;font-weight:500;transition:color .2s;}
.nt-gnav a:hover{color:var(--nt-blue-mid);}
.nt-head-lang{color:var(--nt-blue);
	font-size:12px;font-weight:700;line-height:1.35;text-align:center;flex:0 0 auto;
}
.nt-head-cta{
	display:inline-flex;align-items:center;
	background:var(--nt-cta);color:#fff;font-weight:700;line-height:1.35;text-align:left;flex:0 0 auto;
}
.nt-burger{display:none;}

/* ============================================================
   MV
   ============================================================ */
.nt-mv{padding:62px 0 66px;
}
.nt-mv .nt-inner{display:flex;align-items:center;gap:40px;}
.nt-mv-catch{font-size:22px;font-weight:700;
	letter-spacing:.04em;margin:0 0 14px;
}
.nt-mv-sub{font-weight:500;margin:0 0 2px;letter-spacing:.06em;}
.nt-mv-desc{font-size:15px;line-height:1.8;margin:0 0 24px;}

/* ============================================================
   KeyMetrics
   ============================================================ */
.nt-metrics{background:#fff;padding:88px 0 73px;}
.nt-metrics-list{
	display:flex;justify-content:center;gap:76px;
	list-style:none;margin:0;padding:0;text-align:center;
}
.nt-metrics-ico{height:88px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.nt-metrics-ico img{max-height:88px;width:auto;}
.nt-metrics-label{font-size:16px;font-weight:700;margin:0 0 10px;}
.nt-metrics-num{font-weight:700;color:var(--nt-blue);
	line-height:1.1;
}
/* ダミーの丸（数値未確定） */
.nt-metrics-num .nt-circle{
	display:inline-block;width:52px;height:52px;
	border:4px solid var(--nt-orange);border-radius:50%;
	vertical-align:-8px;margin-right:2px;
}

/* ============================================================
   PainPoints
   ============================================================ */
.nt-pain{background:var(--nt-blue-pale);padding:74px 0;}
.nt-pain-list{
	display:grid;
	grid-template-columns:repeat(6,1fr);
	gap:10px;list-style:none;margin:0 auto 34px;padding:0;max-width:878px;
	justify-items:center;
}
/* カンプ準拠：上段2枚（中央寄せ）・下段3枚 */
.nt-pain-list li:nth-child(1){grid-column:2 / span 2;}
.nt-pain-list li:nth-child(2){grid-column:4 / span 2;}
.nt-pain-list li:nth-child(3){grid-column:1 / span 2;}
.nt-pain-list li:nth-child(4){grid-column:3 / span 2;}
.nt-pain-list li:nth-child(5){grid-column:5 / span 2;}
.nt-pain-list li{
	display:flex;align-items:center;gap:12px;
	background:#fff;border-radius:6px;
	padding:14px 16px;width:100%;max-width:279px;min-height:111px;
	box-shadow:0 2px 10px rgba(0,0,0,.05);
	font-size:16px;font-weight:500;line-height:1.46;
}
.nt-pain-list li img{width:34px;flex:0 0 34px;}
.nt-pain-balloon{
	position:relative;max-width:648px;margin:0 auto;border-radius:10px;min-height:135px;
	display:flex;align-items:center;justify-content:center;
}
.nt-pain-balloon::before{
	content:"";position:absolute;top:-17px;left:50%;transform:translateX(-50%);
	border-left:16px solid transparent;border-right:16px solid transparent;
	border-bottom:17px solid var(--nt-blue-light);
}
.nt-pain-balloon p{
	margin:0;font-size:26px;font-weight:700;
	letter-spacing:0;line-height:1.7;color:#1a1a1a;
}
.nt-pain-balloon .nt-em{color:var(--nt-blue);}

/* ============================================================
   Movie
   ============================================================ */
.nt-movie{background:#fff;padding:75px 0 85px;}
.nt-movie-box{margin:0 auto;border:1px solid var(--nt-border);}
.nt-movie-box video{aspect-ratio:950/482;object-fit:cover;background:#fff;}
.nt-movie-box video{width:100%;display:block;}

/* ============================================================
   WhyChooseUs
   ============================================================ */
.nt-why{background:var(--nt-blue-pale);padding:74px 0;}
.nt-why-item{
	display:flex;align-items:center;margin:0 auto 22px;
}
.nt-why-item:nth-child(even){flex-direction:row-reverse;}
.nt-why-img{text-align:center;}
.nt-why-img img{max-height:230px;width:auto;}
.nt-why-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:12px;}
.nt-why-no{
	font-size:44px;font-weight:700;
	line-height:1;flex:0 0 auto;
}
.nt-why-ttl{
	font-size:22px;font-weight:700;color:var(--nt-blue);margin:0;padding-top:4px;
}
.nt-why-desc{font-size:13px;margin:0;}

/* ============================================================
   ServiceScope
   ============================================================ */
.nt-scope{background:#fff;padding:74px 0;}
.nt-scope-list{
	display:flex;flex-wrap:wrap;justify-content:center;
	gap:22px;list-style:none;margin:0 auto 40px;padding:0;max-width:950px;
}
.nt-scope-list li{
	width:192px;height:192px;border-radius:50%;
	display:flex;flex-direction:column;align-items:center;justify-content:center;
	text-align:center;transition:transform .25s;
}
.nt-scope-list img{width:68px;margin-bottom:10px;}
.nt-scope-list span{font-size:14px;font-weight:700;line-height:1.5;}
.nt-scope-note{
	background:var(--nt-gray);padding:26px 32px;
	max-width:950px;margin:0 auto 38px;
}
.nt-scope-note h3{
	font-size:19px;font-weight:700;color:var(--nt-blue);
	margin:0 0 14px;letter-spacing:.04em;
}
.nt-scope-note p{margin:0;font-size:13.5px;}

/* ============================================================
   Portfolio
   ============================================================ */
.nt-works{padding:74px 0;}
.nt-works-tab{
	display:flex;justify-content:center;flex-wrap:wrap;
	gap:10px;list-style:none;margin:0 0 36px;padding:0;
}
.nt-works-tab li{
	border:1px solid var(--nt-blue-mid);background:#fff;
	color:var(--nt-blue);font-size:13.5px;font-weight:700;text-align:center;
	padding:13px 22px;cursor:pointer;transition:.25s;
}
.nt-works-tab li.is-active,
.nt-works-tab li:hover{background:var(--nt-blue);color:#fff;border-color:var(--nt-blue);}
.nt-works-list{
	display:grid;grid-template-columns:repeat(3,1fr);
	gap:22px;list-style:none;margin:0 0 44px;padding:0;
}
.nt-works-card{
	background:#fff;padding:16px;
	display:flex;flex-direction:column;
	box-shadow:0 1px 6px rgba(0,0,0,.05);
}
.nt-works-thumb{
	margin-bottom:14px;
}
.nt-works-cat{
	display:inline-block;align-self:flex-start;color:var(--nt-blue);
	font-size:11.5px;padding:3px 10px;margin-bottom:10px;
}
.nt-works-name{
	font-size:14px;font-weight:700;color:var(--nt-blue);
	line-height:1.6;margin:0 0 8px;
}
.nt-works-desc{font-size:12.5px;line-height:1.75;color:#666;margin:0 0 12px;}
.nt-works-card .nt-works-arrow{align-self:flex-end;margin-top:auto;}
.nt-works-card .nt-works-arrow img{width:20px;}

/* ============================================================
   Voice
   ============================================================ */
.nt-voice{background:#fff;padding:74px 0;}
.nt-voice-list{
	margin-left:auto;margin-right:auto;
}
.nt-voice-soon{
	display:flex;align-items:center;justify-content:center;
	color:#bbb;font-size:20px;font-weight:500;font-style:italic;
}

/* ============================================================
   Price
   ============================================================ */
.nt-price{padding:74px 0;}
.nt-price-banner{max-width:950px;margin:0 auto 34px;}
.nt-price-table{max-width:950px;margin:0 auto 30px;}
.nt-price-note{
	text-align:center;font-size:12.5px;line-height:1.9;
	margin:22px 0 0;color:#333;
}

/* ============================================================
   Campaign
   ============================================================ */
.nt-campaign{padding:74px 0;}
.nt-campaign-box{max-width:950px;margin:0 auto 22px;
	padding:26px 34px 30px;
}
.nt-campaign-ttl{text-align:center;margin:0 0 20px;}
.nt-campaign-ttl img{max-width:100%;}
.nt-campaign-rec{
	display:flex;align-items:flex-start;gap:22px;
	margin:0 0 18px;
}
.nt-campaign-rec dt{
	flex:0 0 auto;font-size:17px;font-weight:700;
	border-bottom:3px solid var(--nt-blue-mid);padding-bottom:4px;
}
.nt-campaign-rec dd{margin:0;font-size:13.5px;line-height:1.9;}
.nt-campaign-mid{
	text-align:center;font-size:16px;font-weight:700;
	margin:0 0 16px;
}
.nt-campaign-inner{
	border:1px solid var(--nt-blue-mid);border-radius:4px;
	padding:22px 26px 24px;
}
.nt-campaign-cols{display:flex;gap:0;margin:0 0 20px;}
.nt-campaign-col{flex:1 1 50%;}
.nt-campaign-col:first-child{border-right:2px dotted var(--nt-blue-mid);padding-left:0;}
.nt-campaign-col:last-child{padding-right:0;}
.nt-campaign-col h4{
	font-size:16px;font-weight:700;color:var(--nt-blue-mid);
}
.nt-campaign-col p{font-size:13px;}
.nt-campaign-price-ttl{
	font-size:15px;font-weight:700;color:var(--nt-blue-mid);
	margin:0 0 12px;
}
.nt-campaign-prices{
	display:flex;gap:10px;list-style:none;margin:0 0 12px;padding:0;
}
.nt-campaign-prices li{
	flex:1 1 33%;text-align:center;padding:11px 8px;
	font-weight:700;color:var(--nt-blue);
}
.nt-campaign-prices li:nth-child(1){background:#dff0e8;}
.nt-campaign-prices li:nth-child(2){background:#d7ecfa;}
.nt-campaign-prices li:nth-child(3){background:#dcdcf0;}
.nt-campaign-prices .nt-cp-num{font-size:26px;}
.nt-campaign-prices .nt-cp-unit{font-size:14px;}
.nt-campaign-cap{color:#555;margin:0;}
.nt-campaign-attn{
	display:flex;align-items:flex-start;gap:18px;
	max-width:950px;margin:0 auto 22px;
}
.nt-campaign-attn dt{
	flex:0 0 auto;background:#fff;color:#1a1a1a;
	font-size:13px;font-weight:700;padding:10px 18px;
}
.nt-campaign-attn dd{
	margin:0;color:#fff;font-size:12px;line-height:1.85;
}

/* ============================================================
   ProcessSteps
   ============================================================ */
.nt-flow{background:var(--nt-blue-pale);padding:74px 0;}
.nt-flow-steps{
	display:flex;justify-content:center;
	list-style:none;margin:0 0 34px;padding:0;
}
.nt-flow-steps li{
	position:relative;color:#fff;
	font-size:24px;font-weight:700;text-align:center;padding:14px 0;
}
.nt-flow-steps li:not(:last-child)::after{
	content:"";position:absolute;top:0;right:-27px;
	border-top:27px solid transparent;
	border-bottom:27px solid transparent;
	border-left:27px solid var(--nt-blue-mid);
	z-index:2;
}
.nt-flow-list{
	display:grid;grid-template-columns:repeat(3,1fr);
	gap:10px;list-style:none;margin:0;padding:0;
}
.nt-flow-item{text-align:center;padding:0 24px;}
.nt-flow-ico{height:96px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.nt-flow-ico img{max-height:96px;width:auto;}
.nt-flow-ttl{
	font-size:20px;font-weight:700;color:var(--nt-blue);
	margin:0 0 14px;
}
.nt-flow-desc{font-size:13px;line-height:1.9;margin:0;text-align:left;}

/* ============================================================
   FAQ
   ============================================================ */
.nt-faq{background:#fff;padding:75px 0 74px;}
.nt-faq-tab{
	display:flex;list-style:none;margin:0;padding:0;gap:8px;
	max-width:950px;margin-left:auto;margin-right:auto;
}
.nt-faq-tab li{
	flex:1 1 33.3%;text-align:center;cursor:pointer;
	border:1px solid var(--nt-blue-mid);
	background:#fff;color:var(--nt-blue);
	font-size:14px;font-weight:700;padding:14px 10px;transition:.25s;
}
.nt-faq-tab li.is-active{background:var(--nt-blue);color:#fff;border-color:var(--nt-blue);}
.nt-faq-panel{
	border:1px solid var(--nt-blue-mid);border-top:none;
	max-width:950px;margin:0 auto;padding:34px 40px 40px;
}
.nt-faq-panel[hidden]{display:none;}
.nt-faq-item{border-bottom:none;margin-bottom:22px;}
.nt-faq-item:last-child{margin-bottom:0;}
.nt-faq-q{
	display:flex;align-items:center;gap:16px;list-style:none;
}
.nt-faq-q::-webkit-details-marker{display:none;}
.nt-faq-qico{
	flex:0 0 auto;width:38px;height:38px;color:#fff;
	display:flex;align-items:center;justify-content:center;
	font-size:16px;font-weight:700;
}
.nt-faq-qtxt{
	flex:1 1 auto;font-size:15px;font-weight:700;
	color:var(--nt-blue);line-height:1.6;
}
.nt-faq-toggle{flex:0 0 auto;}
.nt-faq-toggle img{width:24px;}
.nt-faq-a{
	font-size:13.5px;line-height:1.95;color:#333;
	margin:10px 0 0;padding-left:54px;
}

/* ============================================================
   ContactCta
   ============================================================ */
.nt-cta{
	background:var(--nt-blue) url("../img/newtop/ContactCta/contact-cta-bg.png") center/cover no-repeat;
	color:#fff;text-align:center;padding:76px 0 80px;
}
.nt-cta-ttl{
	font-size:33px;font-weight:700;line-height:1.6;
	letter-spacing:.06em;margin:0 0 20px;
}
.nt-cta-lead{font-size:15px;margin:0 0 34px;}

/* ============================================================
   ContactForm
   ============================================================ */
.nt-form-sec{background:#fff;padding:74px 0;}
.nt-form-box{
	background:var(--nt-gray);max-width:760px;margin:0 auto;
	padding:44px 60px 52px;
}
.nt-form-row{margin-bottom:20px;}
.nt-form-cols{display:flex;gap:22px;}
.nt-form-cols .nt-form-row{flex:1 1 50%;}
.nt-form-label{
	display:block;font-size:14px;font-weight:700;margin-bottom:7px;
}
.nt-form-label .nt-req{color:#e00;margin-left:2px;}
.nt-form-label .nt-any{font-size:12px;font-weight:400;color:#666;margin-left:6px;}
.nt-form-box input[type=text],
.nt-form-box input[type=email],
.nt-form-box input[type=tel],
.nt-form-box select,
.nt-form-box textarea{
	width:100%;background:#fff;border:1px solid #ccc;
	padding:11px 13px;font-size:15px;font-family:inherit;
	color:var(--nt-text);border-radius:0;
}
.nt-form-box textarea{resize:vertical;min-height:120px;}
.nt-form-box select{
	appearance:none;-webkit-appearance:none;
	background:#fff url("../img/newtop/ContactForm/contact-form-select-bg.png") right 12px center/16px no-repeat;
	padding-right:40px;color:#666;
}
.nt-form-privacy{
	justify-content:center;font-size:12.5px;margin:26px 0 24px;
}
.nt-form-privacy a{color:var(--nt-blue-mid);text-decoration:underline;}
.nt-form-submit{text-align:center;}
.nt-form-submit .nt-btn{border:none;cursor:pointer;min-width:250px;}
.nt-form-msg{
	text-align:center;font-size:14px;margin:18px 0 0;
	padding:12px;display:none;
}
.nt-form-msg.is-ok{display:block;background:#e6f4ea;color:#1a7f37;}
.nt-form-msg.is-ng{display:block;background:#fdecea;color:#c5221f;}

/* ============================================================
   RelatedServices
   ============================================================ */
.nt-related{padding:74px 0;}
.nt-related-list{
	display:grid;grid-template-columns:repeat(3,1fr);
	gap:22px;list-style:none;margin:0;padding:0;
}
.nt-related-card{
	background:#fff;padding:26px 24px 28px;
	display:flex;flex-direction:column;text-align:center;
}
.nt-related-logo{height:56px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.nt-related-logo img{max-height:56px;width:auto;}
.nt-related-ttl{font-size:16px;font-weight:700;line-height:1.55;margin:0 0 14px;}
.nt-related-desc{font-size:13px;line-height:1.85;text-align:left;margin:0 0 20px;}
.nt-related-card .nt-btn-s{align-self:center;margin-top:auto;}

/* ============================================================
   footer
   ============================================================ */
.nt-footer{padding:44px 0 0;font-size:12.5px;}
.nt-footer-in{
	max-width:var(--nt-inner);margin:0 auto;padding:0 20px;
	display:flex;gap:50px;flex-wrap:wrap;
}
.nt-footer-left{flex:1 1 400px;}
.nt-footer-company{
	display:flex;align-items:center;gap:14px;margin-bottom:12px;
	font-weight:700;font-size:13.5px;
}
.nt-footer-company span{display:block;font-weight:400;}
.nt-footer-sns img{width:26px;}
.nt-footer-left p{margin:0 0 3px;line-height:1.7;}
.nt-footer-left a{color:inherit;}
.nt-footer-nav{display:flex;gap:46px;flex:0 0 auto;}
.nt-footer-nav ul{list-style:none;margin:0;padding:0;}
.nt-footer-nav a:hover{color:var(--nt-blue-mid);}
.nt-footer-svc{
	max-width:var(--nt-inner);margin:14px auto 0;padding:0 20px 14px;
}
.nt-footer-svc h3{font-size:13px;font-weight:700;margin:0 0 9px;}
.nt-footer-svc ul{
	display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;
	align-items:center;
}
.nt-footer-svc li{
	padding:0 11px;border-right:1px solid #ccc;line-height:1.4;
	white-space:nowrap;font-size:11.5px;
}
.nt-footer-svc li:first-child{padding-left:0;}
.nt-footer-svc li:last-child{border-right:none;}
.nt-copyright{text-align:center;
	padding:13px 20px;font-size:12px;
}

/* 下部固定バー */
.nt-fixbar{
	flex-wrap:wrap;
}
.nt-fixbar-tel small{display:block;}
.nt-fixbar-btn{gap:9px;transition:opacity .25s;
}

/* ============================================================
   レスポンシブ
   既存サイトのブレークポイントに合わせる（1300/1024/768/480）
   ============================================================ */
@media only screen and (max-width:1300px){
	.nt-header .nt-header-in{gap:18px;padding:14px 18px;}
	.nt-gnav ul{gap:18px;}
	.nt-gnav a{font-size:13px;}
	.nt-logo img{width:170px;}
}

@media only screen and (max-width:1024px){
	.nt-sec-ttl{font-size:24px;}
	.nt-sec-ttl-line{margin-bottom:34px;}

	/* ナビはハンバーガーへ */
	.nt-gnav{
		display:none;position:absolute;top:100%;left:0;width:100%;
		background:#fff;border-top:1px solid var(--nt-border);
		box-shadow:0 8px 18px rgba(0,0,0,.1);padding:10px 0;
	}
	.nt-gnav.is-open{display:block;}
	.nt-gnav ul{flex-direction:column;align-items:stretch;gap:0;}
	.nt-gnav li{border-bottom:1px solid #eee;}
	.nt-gnav li:last-child{border-bottom:none;}
	.nt-gnav a{display:block;padding:14px 24px;font-size:14px;}
	.nt-burger{
		display:flex;flex-direction:column;justify-content:center;gap:5px;
		width:42px;height:42px;padding:9px;margin-left:auto;
		background:none;border:1px solid var(--nt-border);cursor:pointer;
	}
	.nt-burger span{display:block;height:2px;background:var(--nt-blue);transition:.3s;}
	.nt-head-lang{font-size:11px;padding:6px 9px;}
	.nt-head-cta{font-size:12px;padding:9px 12px;}

	.nt-mv{padding:52px 0 58px;}
	.nt-mv .nt-inner{flex-direction:column;gap:30px;text-align:center;}
	.nt-mv-txt,.nt-mv-img{flex:1 1 auto;width:100%;}
	.nt-mv-catch{font-size:20px;}
	.nt-mv-logo img{width:280px;}
	.nt-mv-img{max-width:520px;margin:0 auto;}

	.nt-metrics-list{gap:40px;}
	.nt-metrics-num{font-size:44px;}
	.nt-metrics-num .nt-circle{width:44px;height:44px;border-width:3px;}

	.nt-why-item{gap:30px;margin-bottom:44px;}
	.nt-why-no{font-size:38px;}
	.nt-why-ttl{font-size:19px;}

	.nt-scope-list{gap:20px;}
	.nt-scope-list li{width:184px;height:184px;}
	.nt-scope-list img{width:64px;}
	.nt-scope-list span{font-size:13px;}

	.nt-works-list{gap:18px;}

	.nt-flow-steps li{width:auto;flex:1 1 33%;font-size:20px;}
	.nt-flow-item{padding:0 12px;}
	.nt-flow-ttl{font-size:17px;}

	.nt-cta-ttl{font-size:27px;}
	.nt-form-box{padding:38px 34px 44px;}
	.nt-footer-in{gap:30px;}
	.nt-footer-nav{gap:30px;}
}

@media only screen and (max-width:768px){
	.nt{font-size:14px;}
	.nt .nt-inner{padding:0 16px;}
	.nt-sec-ttl{font-size:21px;letter-spacing:.06em;}
	.nt-sec-ttl-line{width:80px;margin-bottom:28px;}
	.nt-lead{font-size:13px;margin-bottom:28px;text-align:left;}
	.nt-btn{min-width:0;width:100%;max-width:340px;padding:16px 22px;font-size:15px;letter-spacing:.08em;}

	.nt-header .nt-header-in{padding:12px 16px;gap:12px;}
	.nt-logo img{width:150px;}
	.nt-head-lang{display:none;}
	.nt-head-cta{font-size:11px;padding:8px 10px;gap:6px;}
	.nt-head-cta img{width:15px;}

	.nt-mv{padding:38px 0 44px;}
	.nt-mv-catch{font-size:17px;margin-bottom:12px;}
	.nt-mv-logo img{width:230px;}
	.nt-mv-desc{font-size:14px;margin-bottom:24px;}

	.nt-metrics{padding:46px 0 48px;}
	.nt-metrics-list{gap:26px;}
	.nt-metrics-ico{height:58px;margin-bottom:12px;}
	.nt-metrics-ico img{max-height:58px;}
	.nt-metrics-label{font-size:13px;}
	.nt-metrics-num{font-size:31px;}
	.nt-metrics-num .nt-circle{width:31px;height:31px;border-width:3px;vertical-align:-5px;}

	.nt-pain{padding:48px 0 54px;}
	.nt-pain-list{gap:12px;margin-bottom:32px;}
	.nt-pain-list{grid-template-columns:1fr;}
	.nt-pain-list li,
	.nt-pain-list li:nth-child(1),
	.nt-pain-list li:nth-child(2),
	.nt-pain-list li:nth-child(3),
	.nt-pain-list li:nth-child(4),
	.nt-pain-list li:nth-child(5){grid-column:1 / -1;width:100%;max-width:420px;padding:15px 17px;font-size:13.5px;min-height:0;}
	.nt-pain-balloon{padding:22px 18px;}
	.nt-pain-balloon p{font-size:18px;letter-spacing:0;}

	.nt-movie{padding:48px 0 54px;}

	.nt-why{padding:48px 0 24px;}
	.nt-why-item,
	.nt-why-item:nth-child(even){flex-direction:column;gap:20px;margin-bottom:38px;}
	.nt-why-img{order:-1;max-width:300px;margin:0 auto;}
	.nt-why-no{font-size:32px;}
	.nt-why-ttl{font-size:17px;}
	.nt-why-desc{font-size:13px;}

	.nt-scope{padding:36px 0 54px;}
	.nt-scope-list{gap:14px;}
	.nt-scope-list li{width:146px;height:146px;padding:12px;}
	.nt-scope-list img{width:50px;margin-bottom:8px;}
	.nt-scope-note{padding:22px 20px;margin-bottom:32px;}
	.nt-scope-note h3{font-size:16px;}
	.nt-scope-note p{font-size:13px;}

	.nt-works{padding:48px 0 54px;}
	.nt-works-tab{gap:7px;margin-bottom:26px;}
	.nt-works-tab li{font-size:12px;padding:10px 13px;}
	.nt-works-list{grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:32px;}
	.nt-works-card{padding:12px;}

	.nt-voice{padding:48px 0 54px;}
	.nt-voice-list{grid-template-columns:1fr;gap:34px;max-width:400px;}
	.nt-voice-soon{padding:20px 0;}

	.nt-price{padding:48px 0 54px;}
	.nt-price-note{font-size:11.5px;}

	.nt-campaign{padding:44px 0 54px;}
	.nt-campaign-box{padding:24px 18px 30px;}
	.nt-campaign-rec{flex-direction:column;gap:10px;margin-bottom:18px;}
	.nt-campaign-rec dd{font-size:12.5px;}
	.nt-campaign-mid{font-size:14.5px;margin-bottom:18px;}
	.nt-campaign-inner{padding:20px 16px 22px;}
	.nt-campaign-cols{flex-direction:column;gap:18px;margin-bottom:20px;}
	.nt-campaign-col{padding:0;}
	.nt-campaign-col:first-child{
		border-right:none;border-bottom:2px dotted var(--nt-blue-mid);padding-bottom:18px;
	}
	.nt-campaign-prices{flex-direction:column;gap:9px;}
	.nt-campaign-prices li{padding:11px 8px;}
	.nt-campaign-prices .nt-cp-num{font-size:22px;}
	.nt-campaign-attn{flex-direction:column;gap:9px;}
	.nt-campaign-attn dt{align-self:flex-start;}

	.nt-flow{padding:48px 0 54px;}
	.nt-flow-steps{flex-direction:column;gap:0;max-width:280px;margin:0 auto 26px;}
	.nt-flow-steps li{width:100%;font-size:18px;padding:11px 0;}
	.nt-flow-steps li:not(:last-child){margin-bottom:16px;}
	.nt-flow-steps li:not(:last-child)::after{
		top:auto;bottom:-16px;right:50%;transform:translateX(50%);
		border-left:20px solid transparent;
		border-right:20px solid transparent;
		border-top:16px solid var(--nt-blue-mid);
		border-bottom:none;
	}
	.nt-flow-list{grid-template-columns:1fr;gap:30px;}
	.nt-flow-item{padding:0;}
	.nt-flow-ico{height:70px;margin-bottom:12px;}
	.nt-flow-ico img{max-height:70px;}
	.nt-flow-ttl{font-size:17px;margin-bottom:10px;}
	.nt-flow-desc{font-size:12.5px;}

	.nt-faq{padding:48px 0 54px;}
	.nt-faq-tab{flex-direction:column;gap:0;}
	.nt-faq-tab li{
		flex:1 1 auto;font-size:13px;padding:12px 10px;
		border-bottom:none;
	}
	.nt-faq-tab li:last-child{border-bottom:1px solid var(--nt-blue-mid);}
	.nt-faq-tab li.is-active{border-color:var(--nt-blue);}
	.nt-faq-panel{border-top:1px solid var(--nt-blue-mid);padding:22px 18px 26px;}
	.nt-faq-q{gap:11px;}
	.nt-faq-qico{width:30px;height:30px;font-size:14px;}
	.nt-faq-qtxt{font-size:13.5px;}
	.nt-faq-toggle img{width:20px;}
	.nt-faq-a{font-size:12.5px;padding-left:41px;}

	.nt-cta{padding:48px 0 54px;}
	.nt-cta-ttl{font-size:21px;letter-spacing:.02em;}
	.nt-cta-lead{font-size:13.5px;margin-bottom:26px;}

	.nt-form-sec{padding:44px 0 54px;}
	.nt-form-box{padding:26px 18px 32px;}
	.nt-form-cols{flex-direction:column;gap:0;}
	.nt-form-box input[type=text],
	.nt-form-box input[type=email],
	.nt-form-box input[type=tel],
	.nt-form-box select,
	.nt-form-box textarea{font-size:16px;} /* iOS ズーム防止 */
	.nt-form-privacy{font-size:12px;text-align:left;}

	.nt-related{padding:44px 0 54px;}
	.nt-related-list{grid-template-columns:1fr;gap:16px;max-width:400px;margin:0 auto;}

	.nt-footer{padding:40px 0 0;}
	.nt-footer-in{flex-direction:column;gap:26px;}
	.nt-footer-nav{gap:34px;}
	.nt-footer-svc{margin-top:24px;padding-bottom:26px;}
	.nt-footer-svc ul{flex-direction:column;gap:8px;}
	.nt-footer-svc li{padding:0;border-right:none;}

	.nt-fixbar{gap:12px;padding:12px 16px;}
	.nt-fixbar-lead{font-size:12px;padding:7px 12px;width:100%;text-align:center;}
	.nt-fixbar-tel a{font-size:22px;}
	.nt-fixbar-btn{font-size:12px;padding:9px 13px;}
}

@media only screen and (max-width:480px){
	.nt-sec-ttl{font-size:19px;}
	.nt-metrics-num .nt-circle{width:25px;height:25px;border-width:2px;vertical-align:-4px;}
	.nt-scope-list img{width:44px;}
	.nt-works-list{grid-template-columns:1fr;max-width:330px;margin-left:auto;margin-right:auto;}
	.nt-mv-logo img{width:200px;}
	.nt-cta-ttl{font-size:19px;}
	.nt-fixbar-tel a{font-size:20px;}
	.nt-fixbar-btn{font-size:11px;padding:8px 10px;}
}

/* ============================================================
   QC実測（render_probe）に基づく修正
   - WCAG 2.5.8 Target Size (Minimum) 24px 未達のタップ領域を是正
   - 12px未満の本文サイズを是正
   ============================================================ */

/* フッターナビ：19px高 → 上下paddingで24px以上を確保 */
.nt-footer-nav li{margin-bottom:0;}
.nt-footer-nav a{display:inline-block;padding:5px 0;min-height:24px;}

/* フッター内リンク（電話・メール）：19px高 → 24px以上 */
.nt-footer-left p a{display:inline-block;padding:4px 0;min-height:24px;}

/* B.A.Dサービス一覧のリンク */
.nt-footer-svc a{display:inline-block;padding:5px 0;min-height:24px;}

/* 同意チェックボックス：13x13 → 24x24 */
.nt-form-privacy input[type=checkbox]{
	width:24px;height:24px;flex:0 0 24px;margin:0;cursor:pointer;
}

/* プライバシーポリシー・利用規約リンク：17px高 → 24px以上 */
.nt-form-privacy a{display:inline-block;padding:4px 0;min-height:24px;}

/* ロゴリンク：クリック領域を画像の実体に合わせる */
.nt-logo a{display:inline-block;}

/* グローバルナビ（PC）：20px高 → 上下paddingで24px以上 */
@media only screen and (min-width:1025px){
	.nt-gnav a{display:inline-block;padding:5px 0;min-height:24px;}
}

/* 対応範囲アイコンの文字：11px → 12px（本文最小サイズを下回らない） */
@media only screen and (max-width:768px){
	.nt-scope-list span{font-size:12px;}
}
@media only screen and (max-width:480px){
	.nt-scope-list span{font-size:12px;}
	.nt-scope-list li{width:138px;height:138px;}
}

/* キャンペーン注記・フッター英字社名：11.5px → 12px */
.nt-campaign-cap{font-size:12px;}
.nt-footer-company span{font-size:12px;}

/* ============================================================
   料金プラン表（素材に表画像が無いためHTML/CSSで組む）
   参照: 20260722_DesignBox_LP_R1.jpg の該当箇所を実測
   ============================================================ */
.nt-plan{
	position:relative;max-width:950px;margin:0 auto 34px;
	padding-left:130px; /* 左の期間ラベル分 */
}
.nt-plan-badge{
	position:absolute;top:-10px;left:14px;z-index:3;
	width:132px;height:132px;
}
.nt-plan-badge img{width:100%;}

/* 表本体 */
.nt-plan-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	grid-template-rows:auto auto;
}
.nt-plan-col{grid-row:1;}
.nt-plan-col{display:flex;flex-direction:column;border-right:2px solid #dbeaf5;}
.nt-plan-col:last-child{border-right:none;}

.nt-plan-head{
	color:#fff;font-size:17px;font-weight:700;text-align:center;
	padding:17px 8px;letter-spacing:.04em;
}
.nt-plan-col.is-s .nt-plan-head{background:#4a9fb0;}
.nt-plan-col.is-m .nt-plan-head{background:#3f8fca;}
.nt-plan-col.is-l .nt-plan-head{background:#4062ab;}
.nt-plan-col.is-c .nt-plan-head{background:#66b5e0;}

.nt-plan-body{flex:1 1 auto;text-align:center;}
.nt-plan-monthly{border:1px solid #9fd2ea;
	padding:3px 0;margin:0 auto 14px;max-width:180px;
}
.nt-plan-price{
	font-size:31px;line-height:1.25;
	padding:9px 0;border-bottom:2px dotted #b9d9ee;
}
.nt-plan-price:last-of-type{border-bottom:none;}
.nt-plan-price .nt-plan-unit{font-size:17px;}
.nt-plan-col.is-s .nt-plan-price{color:#4a9fb0;}
.nt-plan-col.is-m .nt-plan-price{color:#3f8fca;}
.nt-plan-col.is-l .nt-plan-price{color:#2f4f9e;}

.nt-plan-custom{font-size:25px;font-weight:700;
	line-height:1.45;padding:34px 0 10px;
}
.nt-plan-custom-note{font-size:12px;color:#333;line-height:1.7;margin:0;}

/* 利用可能時間（下段） */
.nt-plan-hours{
	margin-top:auto;padding:16px 14px;text-align:center;
	font-size:14px;
}
.nt-plan-hours .nt-plan-hnum{font-size:22px;}
.nt-plan-col.is-s .nt-plan-hours{background:#e3f1f2;color:#4a9fb0;}
.nt-plan-col.is-m .nt-plan-hours{background:#e2eff9;color:#3f8fca;}
.nt-plan-col.is-l .nt-plan-hours{background:#e2e4f2;color:#2f4f9e;}
.nt-plan-col.is-c .nt-plan-hours{background:#e6f4fb;color:#3f8fca;}
.nt-plan-hours small{display:block;font-size:11.5px;font-weight:400;color:#333;margin-top:4px;}
.nt-plan-hours .nt-plan-hem{font-weight:700;}

/* 繰り越し帯（S〜Lの3列ぶんに渡す） */
.nt-plan-carry{text-align:center;font-weight:700;
	padding:13px 10px;
}

/* 左側の契約期間ラベル（矢印） */
.nt-plan-terms{
	position:absolute;left:14px;top:118px;z-index:2;
	display:flex;flex-direction:column;gap:26px;
}
.nt-plan-term{
	position:relative;background:#9a9a9a;color:#fff;
	font-size:14px;font-weight:700;text-align:center;
	width:112px;padding:9px 0;
}
.nt-plan-term::after{
	content:"";position:absolute;top:0;right:-19px;
	border-top:19px solid transparent;
	border-bottom:19px solid transparent;
	border-left:19px solid #9a9a9a;
}

@media only screen and (max-width:768px){
	.nt-plan{padding-left:0;}
	.nt-plan-badge{
		position:static;width:104px;height:104px;margin:0 auto 12px;
	}
	.nt-plan-terms{
		position:static;flex-direction:row;gap:0;
		margin:0 0 10px;
	}
	.nt-plan-term{flex:1 1 33.3%;width:auto;font-size:12.5px;padding:7px 0;}
	.nt-plan-term::after{display:none;}
	.nt-plan-grid{grid-template-columns:repeat(2,1fr);}
	.nt-plan-col{border-bottom:2px solid #dbeaf5;}
	.nt-plan-head{font-size:15px;padding:13px 6px;}
	.nt-plan-body{padding:14px 10px 0;}
	.nt-plan-monthly{font-size:11.5px;letter-spacing:.2em;margin-bottom:10px;}
	.nt-plan-price{font-size:24px;padding:7px 0;}
	.nt-plan-price .nt-plan-unit{font-size:14px;}
	.nt-plan-custom{font-size:20px;padding:20px 0 8px;}
	.nt-plan-hours{font-size:12.5px;padding:12px 8px;}
	.nt-plan-hours .nt-plan-hnum{font-size:18px;}
	.nt-plan-carry{grid-column:1 / 3;font-size:12.5px;padding:11px 8px;}
}

@media only screen and (max-width:480px){
	.nt-plan-grid{grid-template-columns:1fr;}
	.nt-plan-col{border-right:none;}
	.nt-plan-carry{grid-column:1 / 2;}
	.nt-plan-price{font-size:26px;}
}

/* ============================================================
   DESIGN-FIX 20260731 — カンプ 20260722_DesignBox_LP_R1.jpg への追い込み
   既存ルールは書き換えず、このブロックのみで上書きする。
   丸ごと削除すれば修正前の状態に完全に戻る。
   ============================================================ */

/* ---- ① ヘッダー：本文と同じ中央寄せコンテナに揃える -------------
   問題: .nt-header-in だけ max-width:1500px で、本文の 950px と不統一。
        ロゴが左端・CTAが右端に張り付き、カンプの「中央にまとまった」印象と乖離。
   対応: カンプのヘッダー内容幅(1600px中 約190px〜1410px = 1220px)に合わせる。 */
.nt-header .nt-header-in{
	padding-left:20px;
	padding-right:20px;
	gap:36px;
}
/* ロゴとナビの間隔をカンプ同様に詰め、ナビを右端まで飛ばさない */
.nt-header .nt-gnav{margin-left:48px;}
.nt-header .nt-gnav ul{gap:30px;}
.nt-header .nt-gnav a{letter-spacing:.04em;}
/* 右端の言語バッジ + CTA はナビから離して右寄せ */
.nt-header .nt-head-lang{margin-left:auto;}

/* ---- ② 見出し：行間を締める ------------------------------------
   問題: .nt 直下の line-height:1.8 を h2 が継承し 50.4px。
        1行見出しでも上下の余白が過大に見え、カンプより緩い。 */
.nt-sec-ttl{
	line-height:1.45;
	letter-spacing:.10em;
	margin-bottom:18px;
}

/* ---- ③ 「選ばれる理由」：本文の行間と番号のバランス --------------
   問題: 説明文 line-height:1.85 でカンプ3行が4行に折り返していた。
        番号(1. 2.)が小さく、見出しとの高低差がカンプほど出ていない。 */
.nt-why-desc{line-height:1.75;}
.nt-why-ttl{line-height:1.5;}

/* ---- ④ 対応範囲の注記ボックス：本文が詰まって行数が増えていた ---- */
.nt-scope-note p{line-height:1.85;}

/* ---- ⑤ リード文：カンプは 2 ほど開いていない -------------------- */
.nt-lead{line-height:1.85;}

/* ---- ⑥ 1024px 以下ではヘッダーを従来どおり全幅に戻す ------------
   ハンバーガー切替時に 1220px 制限が悪さをしないよう解除。 */
@media only screen and (max-width:1024px){
	.nt-header .nt-header-in{max-width:1500px;gap:28px;}
	.nt-header .nt-gnav{margin-left:0;}
	.nt-sec-ttl{line-height:1.45;}
}

/* ---- ⑦ 「選ばれる理由」テキスト幅：カンプは本文が2〜3行で収まる --------
   問題: .nt-why-item を 50:50 で割っており、テキスト実効幅が 432px しかなく
        カンプ2行の文が3行、3行の文が4行に折り返していた。
   対応: カンプ比率(テキスト約55% / イラスト約45%)に寄せ、行数をカンプに揃える。
        イラストは最大高を保ったまま縮むので破綻しない。 */
.nt-why-item{max-width:1010px;gap:40px;}
.nt-why-txt{flex:1 1 56%;}
.nt-why-img{flex:1 1 44%;}

/* ============================================================
   DESIGN-FIX 20260731 (2) — 色・文字配置の是正
   カンプ実測: オレンジ #ec6c00 / 濃紺 #004ca0（CSS変数と一致）
   ズレの主因は変数ではなく「.nt a{color:inherit}」による上書きだった。
   ============================================================ */

/* ---- ⑧ リンク色の上書き是正 --------------------------------------
   問題: 37行目 .nt a{color:inherit} が .nt(color:#333) を継承させ、
        ボタン側の color:#fff を詳細度で上回っていた。
        → オレンジ地に #333 が乗り、コントラスト4.04で可読性も低下。
   対応: ボタン系のリンクは配色指定を明示的に取り戻す。 */
.nt a.nt-btn,
.nt .nt-btn,
.nt a.nt-head-cta,
.nt .nt-head-cta{color:#fff;}
.nt a.nt-btn-s,
.nt .nt-btn-s{color:var(--nt-blue);}
.nt .nt-btn-s:hover{color:#fff;}

/* ---- ⑨ MVキャッチコピー：カンプは #ec6c00 -----------------------
   問題: #f5a04a（明るい橙）でハードコードされ、カンプより薄く見えていた。
        青地でのコントラストも3.94と不足。 */

/* ---- ⑩ 実績タブ：1行なのに2行分の箱で上寄りになっていた ---------- */
.nt-works-tab li{
	display:flex;align-items:center;justify-content:center;
	line-height:1.4;
}

/* ---- ⑪ 案件名リンク：inherit で #333 に落ちていたのを戻す -------- */
.nt-works-ttl,
.nt-works-ttl a,
.nt a .nt-works-ttl{color:var(--nt-blue-deep);}

/* ---- ⑫ 対応範囲の円：白文字が中間ブルーで 3.31 と不足 -----------
   カンプの円は実装より濃い。地色を --nt-blue 寄りに締めて可読性を確保。 */

/* ---- ⑫ 撤回：対応範囲の円はカンプどおり --nt-blue-mid に戻す ------
   コントラスト確保のため独断で濃くしたが、カンプ(#4593D1)からの逸脱に
   あたるため差し戻す。可読性の是非は五月女の判断事項として別途報告する。 */

/* ---- ⑬ 言語バッジ：カンプは「上下のみ太線・左右なし・角丸なし」 ----
   問題: 実装は四辺を1pxで囲んだ角丸(4px)ボックスで、カンプと別物だった。
   カンプ実測: 上下に約3pxの濃紺線のみ。左右の罫線と角丸は無い。 */
.nt-head-lang{
	border:0;
	border-top:3px solid var(--nt-blue);
	border-bottom:3px solid var(--nt-blue);
	border-radius:0;
	padding:7px 14px;
}
/* CTAもカンプは角丸なしの直角 */

/* ============================================================
   本番機能の移植 20260731 — ヘッダー固定 / 右側固定バナー
   本番(global.css / index.css)の挙動に合わせる。
   ============================================================ */

/* ---- ⑭ ヘッダー固定（本番: position:fixed; z-index:101） -------- */
.nt-header{
	position:fixed;
	top:0;left:0;width:100%;
	z-index:101;
	border-bottom:2px solid transparent;
	transition:border-bottom-color .5s ease;
}
/* 固定分の高さをMVに確保（ヘッダー実測89px） */
.nt-mv{margin-top:89px;}
/* スクロール後に下線を出す本番同等の演出 */
.nt-header.is-scrolled{border-bottom-color:var(--nt-blue);}

/* ---- ⑮ 右側固定バナー（本番: right:0; top:50%; z-index:99） ---- */
.nt-fixed-banner-img{display:block;width:100%;height:auto;}
.nt-fixed-banner-box{text-align:center;}
.nt-fixed-banner-btn{align-items:center;justify-content:center;color:#fff;
}

/* 1024px以下はヘッダー固定を維持しつつバナーは縮小、SPでは非表示 */
@media only screen and (max-width:767px){
	.nt-mv{margin-top:70px;}
}

/* ---- ⑯ ご利用の流れ：矢印が隣のStepに食い込んで切り欠きに見えていた ----
   問題: gap:10px に対し矢印(::after)が right:-27px で27px張り出すため、
        次のStepの上に重なり「欠けた四角」に見えていた。
   対応: カンプ同様、矢印が独立して見えるよう gap を矢印幅+余白に広げる。 */
.nt-flow-steps{gap:34px;}
.nt-flow-steps li{width:270px;}

/* ============================================================
   20260731 (3) — ヘッダー欠け / 下部バー固定
   ============================================================ */

/* ---- ⑰ STAGINGバーとヘッダーが重なりヘッダー上部が隠れていた ------
   問題: stgの告知バー(position:fixed; top:0; h:26px)と .nt-header(top:0)が
        同座標に重なり、ヘッダーの上26pxが欠けて見えていた。
   対応: stg表示時のみヘッダーを26px下げる。本番にはこのバーが無いので
        :has() で「バーがある時だけ」効かせ、本番へ持ち込んでも無害にする。 */
body:has(> div[style*="position:fixed"][style*="top:0"]) .nt-header{top:26px;}
/* 上記が効かない環境向けのフォールバック（stgホスト名で判定） */

/* ---- ⑱ 下部CVバーを本番同様に画面下へ固定 ----------------------
   問題: .nt-fixbar がフッター内を流れる通常要素で、本番の footer_fixed
        (position:fixed; bottom:0; z-index:100) と挙動が違っていた。 */
.nt-fixbar{
	position:fixed;left:0;bottom:0;width:100%;
	z-index:100;
	display:flex;align-items:center;
	color:#fff;
}
.nt-fixbar-tel{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;}
.nt-fixbar-btn{
	display:inline-flex;align-items:center;font-weight:700;
}
.nt-fixbar-btn:hover{opacity:.85;}
/* 固定バーの高さ分、ページ末尾に余白を確保して重なりを防ぐ */

@media only screen and (max-width:767px){
	.nt-fixbar{padding:0;gap:0;}
	.nt-fixbar-lead{display:none;}
	.nt-fixbar-tel{display:none;}
	.nt-fixbar-btn{flex:1 1 50%;min-width:0;padding:12px 6px;font-size:12px;}
}

/* ---- ⑲ 下部固定バー：既存公開サイトの見た目に合わせる（五月女指示） --
   本番 global.css の footer_fixed 系に準拠：
   ・リード文＝白地/青文字＋右向き三角(::after)
   ・電話＝白文字24px・letter-spacing:2px・tel_iconを左に
   ・ボタン＝2つとも #ed6c00 地の白文字。資料DLはPDFアイコン
   ============================================================ */
.nt-fixbar{gap:0;padding:15px 0;justify-content:center;}
.nt-fixbar-lead{
	position:relative;background:#fff;
	font-size:16px;font-weight:700;text-align:center;
	padding:7px 10px 7px 10px;margin-right:25px;
}
.nt-fixbar-lead::after{
	content:"";position:absolute;width:0;top:0;bottom:0;right:-25px;
	border:19px solid #004da0;border-left-color:#fff;border-right-color:transparent;
}
.nt-fixbar-tel{padding:0 14px 0 10px;}
.nt-fixbar-tel a{
	color:#fff;font-size:24px;font-weight:700;line-height:1;letter-spacing:2px;
	padding-left:32px;background:url("../img/tel_icon.png") no-repeat left center;
}
.nt-fixbar-tel small{color:#fff;font-size:12px;letter-spacing:-1px;}
.nt-fixbar-btn{
	width:160px;min-width:0;font-size:14px;letter-spacing:0;line-height:1.2;
	padding:8px 8px 8px 30px;justify-content:flex-start;text-align:left;
	background:url("../img/bg_btn.png") no-repeat left 10px center #ed6c00;
	background-size:20px;color:#fff;
}
.nt-fixbar-btn.is-doc{
	margin-left:10px;
	background-size:20px;
}
@media only screen and (max-width:767px){
	.nt-fixbar-btn,.nt-fixbar-btn.is-doc{width:auto;flex:1 1 50%;margin-left:0;
		padding:12px 6px 12px 28px;background-size:16px;font-size:12px;}
}

/* ============================================================
   天野さんFB反映 20260731（Slack #ipj-design_box 7/22 17:09）
   ============================================================ */

/* ---- ⑳ フォーム直上CTA：ボタン削除→案内文（HTMLメールLPと同様） ---- */
.nt-cta-notes{
	list-style:none;margin:0;padding:0;
	display:flex;justify-content:center;flex-wrap:wrap;gap:14px 26px;
}
.nt-cta-notes li{
	position:relative;color:#fff;font-size:15px;font-weight:500;
	padding-left:26px;
}
.nt-cta-notes li::before{
	content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
	width:16px;height:16px;border-radius:50%;
}

/* ---- ㉑ ChinaBox導線：説明文と同じグレー枠の中に収める ------------
   問い合わせCTA(オレンジ)と同じ扱いだと自社CVを外へ逃がすため、
   テキストリンク相当の控えめな導線へ格下げする。 */
.nt-scope-note-link{
	display:inline-flex;align-items:center;gap:8px;
	margin-top:14px;
	color:var(--nt-blue);font-size:13.5px;font-weight:700;
	text-decoration:underline;text-underline-offset:3px;
}
.nt-scope-note-link::after{content:"›";font-size:16px;line-height:1;}
.nt-scope-note-link:hover{color:var(--nt-blue-mid);}

@media only screen and (max-width:767px){
	.nt-cta-notes{flex-direction:column;align-items:flex-start;gap:10px;}
	.nt-cta-notes li{font-size:14px;}
}

/* ---- ㉒ 下部固定バー：アイコンと文字が近すぎる（五月女指摘） -------
   本番は background-position:left 10px / padding-left:30px で、
   20pxアイコンの右に僅か0pxしか空かない状態だった。
   アイコン位置はそのままに、テキスト開始位置を右へ広げて間隔を作る。 */
.nt-fixbar-btn{
	padding-left:42px;
	background-position:left 12px center;
}
.nt-fixbar-btn.is-doc{
	padding-left:42px;
	background-position:left 12px center;
}
@media only screen and (max-width:767px){
	.nt-fixbar-btn,.nt-fixbar-btn.is-doc{padding-left:34px;background-position:left 8px center;}
}

/* ---- ⑰の撤回：STAGINGバーは本来「左端の縦22pxバー」だった ---------
   nginx sub_filter の実体は #stg-bar{width:22px; left:0; top:0; bottom:0}
   ＝縦帯であり、ヘッダーを覆う横帯ではない。
   ヘッダー欠けはヘッドレスChromeのスクショ上の見え方で、実サイトでは
   起きていない。よって top:26px のオフセットは不要なので無効化する。 */
html.is-stg .nt-header{top:0;}
html.is-stg .nt-mv{margin-top:89px;}
/* 左端22pxの縦帯とヘッダー左端が被らないよう、stgのみ左に余白を足す */

/* ---- ㉓ ナビが「対応範/囲」と折り返す不具合を是正 -----------------
   原因: stg左帯よけの padding-left:34px でヘッダー内幅が不足し、
        ナビ各項目が2行に割れていた。項目の折り返しを禁止する。 */
.nt-gnav a{white-space:nowrap;}
.nt-gnav ul{flex-wrap:nowrap;}
/* stgの左帯よけは最小限(22px帯+余白)に留め、内容幅を圧迫しない */
@supports selector(:has(*)){
	body:has(#stg-bar) .nt-header-in{padding-left:26px;}
}
.nt-header .nt-header-in{max-width:1260px;}

/* ---- ㉔ 実績数値：ダミー丸→実数値（五月女提供 2026-07-31時点） ----
   カンプではオレンジの丸が数字の位置を示していたため、数字側を
   オレンジで強調し、単位(社/件/%)は濃紺のまま据え置く。 */
.nt-metrics-val{
	letter-spacing:.01em;
	margin-right:2px;
}
.nt-metrics-note{
	text-align:center;
	font-size:12px;
	color:#666;
	margin:18px 0 0;
}
@media only screen and (max-width:767px){
	.nt-metrics-note{font-size:11px;margin-top:14px;}
}

/* ============================================================
   20260731 (4) — h1追加（UI/UX診断【致命】への対応）
   問題: h1が0個。ページ主題を宣言する要素が無く、支援技術・
        検索/AIクローラが主題を推定に頼る状態だった。
   対応: FVの「定額制デザインサービス＋Design Boxロゴ」をh1化。
        見た目は変更しない（p/divをspanに変えた分だけ再現）。
   ============================================================ */
.nt-mv-h1{
	margin:0 0 16px;
	font-size:inherit;
	font-weight:400;
	line-height:inherit;
}
.nt-mv-h1 .nt-mv-sub{
	display:block;font-weight:500;
	letter-spacing:.06em;margin:0 0 2px;
}
.nt-mv-h1 .nt-mv-logo{
	display:block;margin:0;
}
.nt-mv-h1 .nt-mv-logo img{width:330px;}

@media only screen and (max-width:1024px){
	.nt-mv-h1 .nt-mv-logo img{width:280px;}
}

/* ============================================================
   20260731 (5) — 320px横スクロールの解消（UI/UX診断【中】）
   問題: 320px幅で documentElement.scrollWidth=334px（+14px溢れ）。
        実測で特定した唯一の原因は .nt-burger が右端から17px はみ出すこと。
        ヘッダー内で ロゴ＋言語バッジ＋CTA＋バーガー が横一列に並び、
        320pxでは合計幅が収まらないため。
   対応: 360px以下で各要素を詰め、バーガーを縮小して行内に収める。
   ============================================================ */
@media only screen and (max-width:360px){
	.nt-header .nt-header-in{
		padding-left:10px;padding-right:10px;
		gap:6px;
	}
	.nt-logo img{width:150px;}
	/* 言語バッジは狭幅では省略（情報はフッター・本文に残る） */
	.nt-head-lang{display:none;}
	.nt-head-cta{font-size:11px;padding:7px 8px;gap:4px;}
	.nt-head-cta img{width:14px;}
	.nt-burger{
		width:36px;height:36px;padding:7px;gap:4px;
		flex:0 0 36px;margin-left:4px;
	}
	/* stg左帯よけの余白は狭幅では外す（本番には元々無い） */
	body:has(#stg-bar) .nt-header-in{padding-left:10px;}
}

/* ---- 320px溢れの真因：Turnstileウィジェットが固定300px幅 ----------
   実測: .bad-turnstile の scrollWidth=300px に対し フォーム内幅=252px。
        Cloudflare製iframeが300px固定のため、狭幅でページを押し広げていた。
   対応: 狭幅ではCSS transformで縮小する（iframeの中身は触らない＝
        Turnstileの動作に影響しない。width指定では効かないため scale を使う）。 */
@media only screen and (max-width:360px){
	.bad-turnstile{
		transform:scale(.82);
		transform-origin:left top;
		width:300px;
		max-width:300px;
		margin-bottom:-10px !important;
	}
	/* 念のためフォーム内の要素が親を超えないようにする */
	.nt-form-box,.nt-form-box form{max-width:100%;overflow-x:clip;}
}

/* ============================================================
   20260801 — オレンジの用途を「問い合わせCTA」に限定（A案・五月女判断）
   実測: オレンジ使用14箇所のうち、CTA以外が8箇所あった。
        特に「もっと見る」系は主CTAと同色・同面積(20,670px²)で
        視覚的に同格に見え、フォン・レストルフ効果を失効させていた。
   方針: オレンジ＝問い合わせ導線 の1用途に限定。
        それ以外は濃紺(#004CA0)系へ寄せる。
        MVキャッチはカンプ(20260722_R1)どおりオレンジのまま据え置き
        （天野さんレビュー時に諮る）。
   ============================================================ */

/* ---- ① 実績数値：オレンジ→濃紺 -----------------------------------
   7/31にポチがオレンジにしたが、CTA以外でのオレンジ使用にあたるため戻す。 */

/* ---- ② 「もっと見る」系ボタン：白地・青枠へ格下げ ------------------
   制作実績・お客様の声への回遊はCVではないため、主CTAと差をつける。 */
.nt-works .nt-btn,
.nt-voice .nt-btn{
	background:#fff;
	color:var(--nt-blue);
	border:2px solid var(--nt-blue);
}
.nt-works .nt-btn:hover,
.nt-voice .nt-btn:hover{
	background:var(--nt-blue);
	color:#fff;
	opacity:1;
}
/* アイコンは白地で見えるよう濃紺へ寄せる（hover時は白へ） */
.nt-works .nt-btn .nt-btn-ico,
.nt-voice .nt-btn .nt-btn-ico{
	filter:brightness(0) saturate(100%) invert(21%) sepia(63%) saturate(2600%) hue-rotate(198deg) brightness(92%) contrast(101%);
}
.nt-works .nt-btn:hover .nt-btn-ico,
.nt-voice .nt-btn:hover .nt-btn-ico{filter:brightness(0) invert(1);}

/* ---- ③ 資料ダウンロード：白抜きへ格下げ ---------------------------
   固定バーで主CV「無料相談・お問い合わせ」と同格に見えていた。 */
.nt-fixbar-btn.is-doc{
	background-color:#fff;
	color:var(--nt-blue);
	border:2px solid var(--nt-blue);
}
.nt-fixbar-btn.is-doc:hover{background-color:#eef4fb;opacity:1;}

@media only screen and (max-width:767px){
	.nt-works .nt-btn,.nt-voice .nt-btn{border-width:2px;}
}

/* ---- ②の補正：白抜き化でボタン文字が白のまま消えていた -------------
   原因: .nt a{color:inherit} 由来の詳細度問題と同種。
        .nt-btn 側の color:#fff が子孫テキストに残っていた。 */
.nt-works .nt-btn,
.nt-works .nt-btn *,
.nt-voice .nt-btn,
.nt-voice .nt-btn *{color:var(--nt-blue)!important;}
.nt-works .nt-btn:hover,
.nt-works .nt-btn:hover *,
.nt-voice .nt-btn:hover,
.nt-voice .nt-btn:hover *{color:#fff!important;}
.nt-fixbar-btn.is-doc,
.nt-fixbar-btn.is-doc *{color:var(--nt-blue)!important;}

/* ============================================================
   20260801 — 色設計の整理（五月女承認）
   実測: 背景色14種。HTMLメールサイト5種／英語サイト11種に対し過多。
        しかも料金プランは判別不能な淡色が7種並存しており、
        「区別する意図があるのに区別できない」＝安っぽさの主因だった。
   方針: 6色に集約する。
     #004CA0 ブランド ／ #EC6C00 CV専用 ／ #EAF3FB 面の淡色
     #BBDFF7 強調の淡色 ／ #F6F7FC 背景 ／ #16283F 締め色
   ============================================================ */

/* ---- ① 追従バナー：チラシ配色（黄+ピンク+オレンジ枠）を廃止 --------
   他媒体での使用が無いことを五月女に確認済み。Web単独で最適化する。
   「目立たせる」は色の派手さではなく周囲との差で作る。周囲が淡色主体
   なので、締め色#16283Fのベタのほうがむしろ立つ。 */

/* ---- ② 料金プラン：判別できない淡色7種 → 2階調へ集約 ---------------
   プラン間の区別は「淡色の微差」ではなく、罫線と見出しの濃紺で行う。 */
.nt-price-table [style*="background"],
.nt-price-table th,
.nt-price-table td{background-color:transparent;}
.nt-price-table thead th{background-color:var(--nt-blue)!important;color:#fff;}
.nt-price-table tbody tr:nth-child(odd) td{background-color:#EAF3FB;}
.nt-price-table tbody tr:nth-child(even) td{background-color:#fff;}

/* ---- ③ キャンペーン：緑・青・紫の3系統 → 淡ブルー3段の明度差へ ----
   色相を変えずに序列を作る。ブランド外の色相を持ち込まない。 */
.nt-campaign-price li:nth-child(1),
.nt-campaign-col:nth-child(1){background-color:#EAF3FB!important;}
.nt-campaign-price li:nth-child(2),
.nt-campaign-col:nth-child(2){background-color:#D6E9F9!important;}
.nt-campaign-price li:nth-child(3),
.nt-campaign-col:nth-child(3){background-color:#BBDFF7!important;}

/* ---- ②③の再適用：実DOMのクラス名で当て直す ----------------------
   先の指定はセレクタが実構造と不一致で空振りしていた。
   実測で確認した正しいクラス：
     料金プラン  .nt-plan-hours（S:#e3f1f2 M:#e2eff9 L:#e2e4f2 C:#e6f4fb）
                 .nt-plan-carry（#dceefa）
     キャンペーン .nt-campaign-prices li（#dff0e8 / #d7ecfa / #dcdcf0） */

/* 料金プラン：判別不能な淡色4種 → 淡ブルー1色に統一。
   プラン差は見出し(.nt-plan-col の上部)と罫線で既に表現されている。 */
.nt-plan-hours{background-color:#EAF3FB!important;}
.nt-plan-carry{background-color:#F6F7FC!important;}

/* キャンペーン：緑・青・紫 → 淡ブルー3段の明度差（色相を揃える） */

/* ---- 追従バナーCTAの文字色を白に戻す ------------------------------
   .nt a{color:inherit} により、オレンジ地の上で文字が#333に落ちていた。
   （既出と同型の詳細度事故。ボタン系は都度明示する必要がある） */

/* バナーの余白を画像に合わせて詰める（画像側の余白は削除済み） */
.nt-fixed-banner-box{padding:10px 12px 12px;}

/* ============================================================
   20260801 — 「検討時の4不安」への対応（要件定義書 v1.0 準拠）
   ①作り放題とのギャップ ②割高感 ③品質・テイスト不一致 ④丸投げできるか
   ============================================================ */

/* ---- 不安③：実績サムネイルを実データで見せる ----------------------
   ダミーの灰色四角では「どんなテイストが出てくるか」が伝わらず、
   デザインを買う客の最大の不安を放置していた。 */
.nt-works-thumb{
	aspect-ratio:16/10;
	display:flex;align-items:center;justify-content:center;
}
.nt-works-thumb img{
	width:100%;height:100%;object-fit:cover;display:block;
}
.nt-works-card a{display:block;height:100%;}
.nt-works-card:hover .nt-works-thumb img{transform:scale(1.04);}

/* ---- 不安③④：元データ納品・ディレクション体制を明示 ---------------
   要件定義書「元データ納品：AI/PSD納品可をサービス仕様として明記」
   「ディレクション体制・進行フロー明示」に対応。 */
.nt-assurance{
	display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
	list-style:none;margin:0 auto 34px;padding:0;max-width:950px;
}
.nt-assurance li{
	background:#fff;
	border:1px solid #d9e3ee;
	border-top:3px solid var(--nt-blue);
	padding:20px 20px 22px;
	box-shadow:0 2px 10px rgba(0,40,90,.06);
}
.nt-assurance-ttl{
	display:block;font-size:15px;font-weight:700;
	color:var(--nt-blue);margin-bottom:8px;line-height:1.5;
}
.nt-assurance-desc{
	display:block;font-size:13px;line-height:1.8;color:#333;
}

/* ---- 不安②：料金プランの構造強化 ---------------------------------
   実測: box-shadow=0箇所／罫線は1px淡水色が16箇所／プラン名15px weight400。
        淡色ベタを輪郭も影も階層もなしで並べていたのが平坦さの原因。
        色は変えず、構造（見出し・罫線・影・文字ウエイト）で立たせる。 */
.nt-plan-col .nt-plan-name,
.nt-plan-col > *:first-child{
	background:var(--nt-blue);
	color:#fff;
	font-weight:700;
	letter-spacing:.04em;
}
.nt-plan-price{font-weight:700;}

/* キャンペーン価格も同様に輪郭を与える */
.nt-campaign-prices li{
	border:1px solid rgba(0,76,160,.14);
	box-shadow:0 2px 8px rgba(0,40,90,.06);
}

@media only screen and (max-width:1024px){
	.nt-assurance{grid-template-columns:1fr;gap:12px;}
	.nt-assurance li{padding:16px 18px 18px;}
}

/* ---- お客様の声：既存サイトと同じ6件に差し替え（Coming Soon撤去） ----
   不安③「品質・テイスト不一致」に対し、実在の声を数で示す。 */
.nt-voice-list{
	display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px;
	list-style:none;margin:0 auto 38px;padding:0;max-width:950px;
}
.nt-voice-item{
	display:flex;flex-direction:column;
	background:#fff;border:1px solid #d9e3ee;
	box-shadow:0 2px 10px rgba(0,40,90,.06);
	padding:0 0 18px;
}
.nt-voice-thumb{
	aspect-ratio:16/10;overflow:hidden;margin-bottom:14px;
}
.nt-voice-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.nt-voice-txt{
	font-size:13.5px;line-height:1.75;margin:0 16px 16px;flex:1 1 auto;
	color:#1a1a1a;font-weight:500;
}
.nt-voice-item .nt-btn-s{align-self:center;margin-top:auto;}

@media only screen and (max-width:1024px){
	.nt-voice-list{grid-template-columns:repeat(2,1fr);gap:20px 16px;}
}
@media only screen and (max-width:767px){
	.nt-voice-list{grid-template-columns:1fr;gap:18px;}
}

/* ============================================================
   不具合修正 20260801 — アイコンの矢印が消える／擬似要素の色事故
   原因: filter:brightness(0) は画像全体を黒に潰すため、
        「青丸＋白矢印」のような多色アイコンでは白矢印まで塗り潰され、
        丸と矢印が同色になって矢印が見えなくなる。
        色を変えたい対象が単色アイコンのときにしか使えない手法だった。
   対策: filterによる色変換を廃止し、元画像をそのまま使う。
        白抜きボタンでも元アイコン（青丸＋白矢印）は視認できる。
   ============================================================ */
.nt-works .nt-btn .nt-btn-ico,
.nt-voice .nt-btn .nt-btn-ico,
.nt-works .nt-btn:hover .nt-btn-ico,
.nt-voice .nt-btn:hover .nt-btn-ico{
	filter:none;
}

/* ---- CTA案内文の丸：オレンジ地に白リングで「>」が潰れて見えた ------
   ::before を単純な塗り分けにして、色数を増やさない。
   青地の上なので、白丸＋濃紺の縁で視認性を確保する。 */
.nt-cta-notes li::before{
	background:#fff;
	box-shadow:none;
	border:3px solid var(--nt-orange);
	box-sizing:border-box;
}

/* ============================================================
   追従バナー：画像→HTML化（構成は五月女指定）
   見出し → 箇条書き3点 → CTA
   画像を廃したので、今後の文言変更はHTML修正だけで済む。
   （日付変更のたびに画像を再生成する運用をやめる）
   ============================================================ */
.nt-fixed-banner{
	position:fixed;right:0;top:50%;
	z-index:99;border:none;border-radius:0;
	box-shadow:0 6px 20px rgba(0,0,0,.22);
	font-size:initial;
	box-sizing:border-box;
}
.nt-fixed-banner-ttl{
	margin:0 0 12px;
	color:#fff;font-weight:900;line-height:1.38;
	letter-spacing:.01em;
}
.nt-fixed-banner-list{
	list-style:none;margin:0 0 14px;padding:0;
}
.nt-fixed-banner-list li{
	position:relative;
	color:#C7DBEE;line-height:1.5;
}
.nt-fixed-banner-list li::before{
	content:"";position:absolute;left:0;top:.55em;
	width:5px;height:1px;
}
.nt-fixed-banner-list li:last-child{margin-bottom:0;}
.nt-fixed-banner-btn{
	display:block;width:100%;text-align:center;
	background:var(--nt-cta);border-radius:2px;font-weight:700;letter-spacing:.04em;
}
.nt-fixed-banner-btn,
.nt-fixed-banner-btn *{color:#fff!important;}
.nt-fixed-banner-btn:hover{opacity:.88;}
@media only screen and (max-width:767px){
	.nt-fixed-banner{display:none;}
}

/* ---- 追従バナー：横幅を縮める（五月女指示 20260801） --------------
   文言短縮（料金1ヶ月分のみ。長期契約不要）に合わせて 250→214px。
   本文の可読性は維持しつつ、コンテンツへの被りを減らす。 */
.nt-fixed-banner{width:214px;padding:16px 14px 14px;}
.nt-fixed-banner-ttl{font-size:16px;margin-bottom:11px;}
.nt-fixed-banner-list li{font-size:11px;padding-left:11px;margin-bottom:5px;}
.nt-fixed-banner-btn{font-size:13.5px;padding:10px 8px;}

@media only screen and (max-width:1024px){
	.nt-fixed-banner{width:190px;padding:13px 12px 12px;}
	.nt-fixed-banner-ttl{font-size:14.5px;}
	.nt-fixed-banner-list li{font-size:10.5px;}
	.nt-fixed-banner-btn{font-size:12.5px;}
}

/* ============================================================
   料金プランの再設計 20260801（不安②「使わない月の割高感」）
   壁打ちで合意した方針：
     ・12ヶ月契約を主役に。6/3ヶ月は小さく併記（消さない＝短期契約の客も多いため）
     ・安っぽさの原因は色ではなく情報設計。9つの価格が同格に並び
       「どれを見ればいいか」が伝わっていなかった
   ============================================================ */

/* ---- ① セクション背景：淡色ベタの上に淡色の表→表が沈んでいた ------
   実測 #BBDFF7 が2,526,313px²。白系に変えて表を浮かせる。 */

/* ---- ② プラン名：4色（青緑/水色/濃紺/淡青）→ 濃紺で統一 ----------
   同じ「プラン名」という情報に4色使う理由がなかった。 */
.nt-plan-col .nt-plan-head{
	background:var(--nt-blue)!important;
	color:#fff!important;
	font-size:17px;font-weight:700;letter-spacing:.04em;
	padding:14px 10px;
}
/* Lプランのみ主力として強調（唯一の色差＝フォン・レストルフ） */
.nt-plan-col.is-l .nt-plan-head{background:#16283F!important;}

/* ---- ③ 価格：プランごとに色が違い、色の意味が読めなかった ---------
   月額という同一情報なので濃紺1色に統一する。 */
.nt-plan-price,
.nt-plan-price.is-main{color:var(--nt-blue)!important;}
.nt-plan-price.is-main{
	font-size:38px;font-weight:700;line-height:1.1;
	margin:2px 0 10px;
}
.nt-plan-price.is-main .nt-plan-unit{font-size:17px;font-weight:700;margin-left:2px;}
.nt-plan-monthly{
	display:block;font-size:12px;font-weight:700;letter-spacing:.02em;margin-bottom:2px;
}

/* ---- ④ 6ヶ月・3ヶ月：主役の下に小さく併記（消さない） ------------- */
.nt-plan-sub{
	list-style:none;margin:0 auto 4px;padding:8px 0 0;
	border-top:1px dashed #C9D9E8;max-width:150px;
}
.nt-plan-sub li{
	display:flex;justify-content:space-between;align-items:baseline;
	font-size:11.5px;color:#5A6B7A;line-height:1.9;
}
.nt-plan-sub-term{letter-spacing:.01em;}
.nt-plan-sub-price{font-weight:700;}

/* ---- ⑤ 表全体を白ベースにして輪郭を締める ------------------------- */
.nt-plan-grid{background:#fff;}
.nt-plan-col{background:#fff;border:1px solid #D9E3EE;box-shadow:none;}
.nt-plan-col + .nt-plan-col{border-left:none;}
.nt-plan-body{padding:16px 12px 14px;}
.nt-plan-hours{border-top:1px solid #D9E3EE;
	font-weight:700;color:var(--nt-blue);
}
.nt-plan-carry{
	background:#fff!important;border:1px solid #D9E3EE;border-top:none;
	font-size:13px;
}

/* ============================================================
   地色をアイボリーへ（A案・五月女承認 20260801）
   根拠：英語サイト #fbf5ed / HTMLメールサイト #f5f5f5 は
        いずれも「青みのない地色」を最大面積に使っている。
        DesignBoxだけ青系 #f6f7fc で、冷たく軽い印象の一因だった。
   効果：地色が暖かくなることで濃紺とオレンジの両方が締まって見える。
   ============================================================ */
.nt-pain,
.nt-why,
.nt-flow{background:#FBF7F0;}
.nt-price{background:#FAF6EF;}
.nt-movie,
.nt-scope{background:#fff;}

/* ---- 追従バナーが本文に被る問題（実測で確認） ----------------------
   1100px:139px / 1280px:49px 重なっていた（1440px以上は重ならない）。
   狭い画面では本文の可読性を優先し、バナーを縮小＋不透明度で退避させる。
   ホバーで元に戻すので、訴求機能自体は維持する。 */
@media only screen and (max-width:1365px){
	.nt-fixed-banner{
		width:180px;padding:12px 11px 11px;
		opacity:.94;
		transition:opacity .25s, transform .25s;
	}
	.nt-fixed-banner:hover{opacity:1;}
	.nt-fixed-banner-ttl{font-size:13.5px;margin-bottom:9px;}
	.nt-fixed-banner-list li{font-size:10px;padding-left:9px;margin-bottom:4px;}
	.nt-fixed-banner-btn{font-size:12px;padding:9px 6px;}
}
/* さらに狭い画面（タブレット横）では本文を優先して隠す */
@media only screen and (max-width:1100px){
	.nt-fixed-banner{display:none;}
}

/* ---- 取り残していた2セクションの地色（五月女指摘 20260801） --------
   アイボリー化の際、.nt-campaign(#4593D1 127万px²) と
   .nt-related(#BBDFF7 92万px²) を対象に含めておらず、
   青系のベタが残っていた。地色の統一から漏れていた。 */

/* キャンペーン：中間ブルーのベタ → 締め色でコントラストを作る
   （キャンペーンは「目立たせる」区画なので、淡色ではなく濃色で差をつける） */

/* 関連サービス：淡青ベタ → アイボリー地に統一 */
.nt-related{background:#FBF7F0;}

/* 吹き出しは淡青のままだと浮くのでアイボリー系に寄せる */

/* ---- キャンペーン濃色化に伴うコントラスト是正 ---------------------
   実測: 内箱の見出しが 2.95 / 2.66 で WCAG未達だった。
   （淡い青地に淡い青文字。地色変更前から低かったが濃色化で顕在化） */
.nt-campaign-col h4,
.nt-campaign-col .nt-campaign-col-ttl{
	color:var(--nt-blue)!important;
	background:transparent;
}
.nt-campaign-rec dt,
.nt-campaign-price-ttl{color:var(--nt-blue)!important;}
/* 内箱の淡色ベタは白に寄せて文字を立たせる */

/* ============================================================
   レスポンシブ崩れの是正 20260801（五月女指摘）
   実測: 375px で .nt-plan-col が 74/105/105/58px に圧縮され、
        「カスタムプラン」が縦書き1文字ずつ、価格が3行に割れていた。
        SP用のグリッド指定が無く4列のまま押し込まれていたのが原因。
   ============================================================ */

/* ---- 料金プラン：タブレット2列 → スマホ1列に ---------------------- */
@media only screen and (max-width:1024px){
	.nt-plan-grid{
		display:grid!important;
		grid-template-columns:repeat(2,1fr)!important;
		gap:0;
	}
	.nt-plan-col{border:1px solid #D9E3EE!important;}
	.nt-plan-col + .nt-plan-col{border-left:1px solid #D9E3EE!important;}
}
@media only screen and (max-width:767px){
	.nt-plan-grid{grid-template-columns:1fr!important;}
	.nt-plan-col + .nt-plan-col{border-top:none!important;}
	/* 1列になれば各要素は十分な幅を得るので、折り返し崩れが解消する */
	.nt-plan-body{padding:18px 16px 16px;}
	.nt-plan-price.is-main{font-size:34px;}
	.nt-plan-sub{max-width:220px;}
	.nt-plan-sub li{font-size:12px;}
	/* 縦書き化していたカスタムプランの文言を通常表記へ */
	.nt-plan-custom{font-size:22px;line-height:1.5;}
	.nt-plan-hours{padding:12px 10px;}
	.nt-plan-carry{padding:14px 16px;}
	/* 「今なら初期導入費が無料」バッジがヘッダーに被らないよう位置調整 */
	.nt-plan-badge{position:static;margin:0 auto 14px;}
}

/* ---- 実績・お客様の声・保証カードもSPで1列に ---------------------- */
@media only screen and (max-width:767px){
	.nt-works-list{grid-template-columns:1fr!important;gap:18px;}
	.nt-assurance{grid-template-columns:1fr!important;}
}

/* ---- 対応範囲の円：SPで2列に（7個が横並びで潰れるのを防ぐ） ------- */
@media only screen and (max-width:767px){
	.nt-scope-list{
		display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
	}
	.nt-scope-list li{width:150px;height:150px;}
	.nt-scope-list img{width:54px;}
	.nt-scope-list span{font-size:12px;}
}

/* ---- 真因：.nt-plan-carry の grid-column:1/4 が4列を強制していた ----
   grid-template-columns を1frにしても、子が「1列目から4列目まで」を
   占有指定していたためグリッドが4本の列を維持し続けていた。
   列数を変えるときは、子の grid-column も併せて変える必要がある。 */
@media only screen and (max-width:1024px){
	.nt-plan-carry{grid-column:1 / 3!important;}
}

/* ---- 真因（確定）：grid-template-rows:auto auto が2行を固定していた ----
   .nt-plan-grid は 900行目で rows:auto auto を指定している。
   子は5要素（プラン4＋繰り越し帯1）あるため、2行に収めようとして
   ブラウザが列を4本維持し続けていた。列数を変えるには rows も外す。 */
@media only screen and (max-width:1024px){
	.nt-plan-grid{grid-template-rows:none!important;}
}
@media only screen and (max-width:767px){
	.nt-plan-grid{
		display:block!important;   /* gridをやめて素直に縦積みにする */
	}
	.nt-plan-col{display:block;width:100%;margin-bottom:0;}
	.nt-plan-carry{display:block;width:100%;}
}

/* ---- 繰り越し帯の列幅を実際の列数に合わせる（過剰修正の是正） ------
   実測: 768〜1024pxは4列表示なのに carry が 1/3（2列分＝約50-58%）
        しか伸びておらず、Lプランの下が空白になっていた。
   私が入れた 1024px以下の 1/3 指定が、4列レイアウトにも当たっていた。
   → 実際に2列になるのは768px未満なので、その範囲だけに限定する。 */
@media only screen and (min-width:768px) and (max-width:1024px){
	.nt-plan-carry{grid-column:1 / 4!important;}
}
@media only screen and (max-width:767px){
	.nt-plan-carry{grid-column:auto!important;}
}

/* ---- SPでボタン文字が2行に割れる問題（実測で検出） ----------------
   「1ヶ月キャンペーンについて相談する」が340px幅に収まらず
   「…相談す / る」と不自然に折り返していた。
   長い文言のボタンだけ文字を詰めて1行に収める。 */
@media only screen and (max-width:767px){
	.nt-btn{
		font-size:14px;
		letter-spacing:.02em;
		padding:15px 14px;
		line-height:1.4;
	}
	/* それでも入らない長文ボタンはさらに詰める */
	.nt-campaign .nt-btn{font-size:13px;letter-spacing:0;padding:15px 10px;}
	.nt-btn .nt-btn-ico{width:20px;flex:0 0 20px;}
}

/* ---- キャンペーン価格：「8時間 6万円」が2行に割れていた ------------
   幅273pxに対し14pxで2行化。1行に収まるサイズへ調整する。 */
@media only screen and (max-width:767px){
	.nt-campaign-prices li{align-items:center;justify-content:center;gap:6px;
	}
}

/* ---- 前回修正の是正：flex化がかえって崩していた --------------------
   .nt-campaign-prices li の中は <span>8</span><span>時間</span>… という
   4つのspan構成。display:flex にすると各spanが独立配置され、
   「8時間」と「6万円」の関係が壊れて2行に見えていた。
   → inline要素として素直に流し、nowrapで1行に保つ。 */
@media only screen and (max-width:767px){
	.nt-campaign-prices li{
		display:block;
		white-space:nowrap;
		font-size:16px;
		line-height:1.5;
		padding:13px 6px;
		text-align:center;
	}
	.nt-campaign-prices .nt-cp-num{font-size:20px;}
	.nt-campaign-prices .nt-cp-unit{font-size:14px;}
}

/* ---- 「送　信」が全角スペースで改行されていた ----------------------
   実測: 768pxで幅340pxあるのに2行(58px)。全角スペースが折返し点に
        なっていたため。ボタン文言は基本的に折り返さない。 */
.nt-btn{white-space:nowrap;}
@media only screen and (max-width:767px){
	/* SPでは長文ボタンの折返しを許可（nowrapだと溢れるため） */
	.nt-campaign .nt-btn,
	.nt-works .nt-btn,
	.nt-voice .nt-btn{white-space:normal;}
}

/* ============================================================
   五月女フィードバック13点への対応 20260801
   ============================================================ */

/* ---- ④⑫ MVが重く暗い／オレンジのキャッチ ------------------------
   実測: MV背景 #004ca0 のベタが444px。濃紺の面積が重さの主因。
   対応: 上から下へわずかに明度を上げるグラデーションで抜けを作る。
        色（ブランドカラー）は変えない。 */

/* ⑫ MVキャッチのオレンジ：意図的だがカンプ由来。青地で最も視認性が高い
   白に寄せつつ、キーワードだけオレンジを残して視線の起点を保つ */

/* ---- ⑦ 吹き出しのタイトルが左寄りでバランスが悪い ------------------
   実測: text-align:center だが2行の折返し位置が不揃いで左寄りに見えた */
.nt-pain-balloon{
	text-align:center;
	padding:26px 30px;
	line-height:1.9;
}
.nt-pain-balloon br{display:none;}   /* 不自然な改行位置を解除 */

/* ---- ⑧ 実績数値：数字は大きく、単位は小さく ----------------------- */
.nt-metrics-num{font-size:44px;letter-spacing:.01em;}
.nt-metrics-val{font-size:1.35em;}
.nt-metrics-unit{font-size:.62em;font-weight:700;margin-left:2px;}

/* ---- ⑨⑬ 水色ベタが安っぽい（吹き出し・対応範囲の円） --------------
   ベタ塗りをやめ、白地＋輪郭＋淡い影で「面」ではなく「要素」に見せる */
.nt-scope-list li{
	background:#fff;
	border:2px solid #CFE2F3;
	box-shadow:0 3px 12px rgba(0,40,90,.07);
	color:var(--nt-blue);
}
.nt-scope-list li:hover{
	transform:translateY(-5px);
}

/* ---- ⑩ 動画サムネイルが画面を占有しすぎ --------------------------
   実測: 910x463px。1440px幅の63%を占有していた */
.nt-movie-box{max-width:680px;}

/* ---- ⑤ 固定要素が3つ（+stgバー）でくどい --------------------------
   追従バナーはスクロール量に応じて出す（初期表示では出さない）。
   下部バーはCV導線なので残す。 */
.nt-fixed-banner{
	opacity:0;visibility:hidden;
	transform:translateY(-50%) translateX(16px);
	transition:opacity .3s ease, transform .3s ease, visibility .3s;
}
.nt-fixed-banner.is-shown{
	opacity:1;visibility:visible;
	transform:translateY(-50%) translateX(0);
}

/* ============================================================
   五月女フィードバック（追加4点）20260801
   ============================================================ */

/* ---- ① キャンペーン背景が突出して暗い ----------------------------
   実測: 通常セクション0.925〜1.0／MV 0.104／CTA帯 0.077 に対し
        キャンペーンだけ明度0.02。MVより暗く、設計として誤りだった。
   （私が「目立たせる区画だから濃色で」と判断したのが行き過ぎ）
   対応: 白地＋オレンジの輪郭で「囲って目立たせる」方式に変える。
        濃色ベタをやめ、他セクションとの明度差を穏やかにする。 */
.nt-campaign{
	background:#FBF7F0;
	padding-top:64px;padding-bottom:64px;
}
.nt-campaign .nt-sec-ttl,
.nt-campaign .nt-sec-ttl.is-blue{color:var(--nt-blue);}
.nt-campaign-box{
	background:#fff;
	border:3px solid var(--nt-orange);
	box-shadow:0 6px 24px rgba(0,40,90,.10);
}
.nt-campaign .nt-campaign-note,
.nt-campaign dd{color:#333;}

/* ---- ② 白抜きボタンでアイコンの青丸が同化し「>」だけ見えていた ----
   実測: 白系ボタン4箇所（制作実績/お客様の声/詳しくはこちら×2）で
        青丸が背景と同化し、中の矢印だけが浮いて見えていた。
   対応: 白系ボタンではアイコン画像を使わず、CSSで矢印を描く。 */
.nt-works .nt-btn .nt-btn-ico,
.nt-voice .nt-btn .nt-btn-ico,
.nt-btn-s img,
.nt-related .nt-btn-s img{display:none;}
.nt-works .nt-btn::before,
.nt-voice .nt-btn::before,
.nt-btn-s::before{
	content:"";
	width:18px;height:18px;flex:0 0 18px;
	margin-right:10px;
	border-radius:50%;
	background:var(--nt-blue);
	-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='black'/><path d='M10 7l5 5-5 5' stroke='white' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
	mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='black'/><path d='M10 7l5 5-5 5' stroke='white' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}
.nt-works .nt-btn:hover::before,
.nt-voice .nt-btn:hover::before,
.nt-btn-s:hover::before{background:#fff;}

/* ---- ③ 「今なら初期導入費が無料」バッジのオレンジ ------------------
   CV導線ではないのにオレンジ円で、主CTAと競合していた。
   → 濃紺の円に変更し、オレンジは問い合わせ導線に温存する。 */

/* ---- ヘッダーCTAが安っぽい（五月女指摘） --------------------------
   原因: 角丸なし・影なし・アイコンと文字が窮屈・面が平坦。
        小サイズのベタ塗り矩形は「作り込んでいない」印象を与える。
   対応: 微細な角丸と影、内側のハイライトで立体感を与える。
        色は変えない（CV導線のオレンジは維持）。 */
.nt-head-cta{
	border-radius:4px;
	padding:11px 18px;
	gap:9px;
	box-shadow:0 2px 6px rgba(200,80,0,.28);
	background-image:linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 55%);
	transition:transform .18s ease, box-shadow .18s ease, opacity .2s;
	letter-spacing:.04em;
}
.nt-head-cta:hover{
	transform:translateY(-1px);
	box-shadow:0 4px 12px rgba(200,80,0,.34);
	opacity:1;
}
.nt-head-cta img{width:16px;}

/* 主要CTAボタンにも同じ質感を与えて統一する */
.nt-btn{
	border-radius:4px;
	box-shadow:0 3px 10px rgba(200,80,0,.22);
	background-image:linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%);
	transition:transform .18s ease, box-shadow .18s ease, opacity .2s;
}
.nt-btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(200,80,0,.3);opacity:1;}
/* 白抜きボタンは影を控えめに（オレンジの影は付けない） */
.nt-works .nt-btn,.nt-voice .nt-btn{
	background-image:none;
	box-shadow:0 2px 8px rgba(0,40,90,.10);
}
.nt-works .nt-btn:hover,.nt-voice .nt-btn:hover{box-shadow:0 5px 14px rgba(0,40,90,.16);}
.nt-fixbar-btn{border-radius:3px;}

/* ============================================================
   アクセントカラー確定：ベージュ／サンド #B8A88A（五月女決定 20260802）
   経緯：高彩度13色（コーラル・ティール等）はいずれも「しっくりこない」。
        彩度24%の低彩度帯で決着。アイボリー地 #FBF7F0 と地続きで
        上質感を出しつつ、CTAオレンジと競合しない。
   注意：白文字コントラストは2.33でWCAG未達のため、
        文字が乗る箇所は締め色 #16283F（6.39）を使う。
   ============================================================ */
:root{
	--nt-accent:      #B8A88A;
	--nt-accent-dark: #8A7A5C;  /* 文字色として使う濃色版（白文字4.18） */
	--nt-accent-ink:  #16283F;  /* ベージュ地に乗せる文字色（6.39） */
}

/* ---- 文字を乗せない用途（制約なし） ---- */
.nt-sec-ttl-line{background:var(--nt-accent);}
.nt-assurance li{border-top-color:var(--nt-accent);}
.nt-scope-list li{border-color:var(--nt-accent);}
.nt-campaign-box{border-color:var(--nt-accent);}
.nt-pain-list li{border-left:3px solid var(--nt-accent);}
.nt-cta-notes li::before{border-color:var(--nt-accent);}
.nt-fixed-banner-list li::before{background:var(--nt-accent);}

/* ---- 文字色として使う場合は濃色版（可読性を確保） ---- */
.nt-metrics-val{color:var(--nt-accent-dark);}
.nt-why-no{color:var(--nt-accent-dark);}
.nt-plan-sub-price{color:var(--nt-accent-dark);}
.nt-scope-list li span{color:var(--nt-accent-dark);}

/* ---- ベージュ地に文字を乗せる箇所は締め色の文字に ---- */
.nt-works-cat{
	background:var(--nt-accent);
	color:var(--nt-accent-ink)!important;
	font-weight:700;
}
.nt-plan-badge{
	background:var(--nt-accent)!important;
	color:var(--nt-accent-ink)!important;
}
.nt-plan-badge *{color:var(--nt-accent-ink)!important;}
.nt-faq-qico{
	background:var(--nt-accent);
	color:var(--nt-accent-ink)!important;
}
.nt-flow-steps li{
	background:var(--nt-accent);
	color:var(--nt-accent-ink)!important;
}
.nt-flow-steps li:not(:last-child)::after{border-left-color:var(--nt-accent);}

/* ---- MVキャッチは濃紺地なので、ベージュのままで可読（実測7.2） ---- */

/* ---- 対応範囲の円ホバー：ベージュ地＋締め色文字 ---- */
.nt-scope-list li:hover{background:var(--nt-accent);border-color:var(--nt-accent);}
.nt-scope-list li:hover span{color:var(--nt-accent-ink);}

/* ---- ベージュ適用後のコントラスト是正（実測で2件NG） ---------------
   実測: 初期費用バッジ1.8 ／ MVキャッチ2.93 が基準未達だった。 */

/* ① 初期費用バッジ：ベージュ地に白文字が残っていた（1.8）
   → 締め色の文字に統一。子要素まで確実に当てる。 */
.nt-plan-badge,
.nt-plan-badge *,
.nt-price .nt-plan-badge,
.nt-price .nt-plan-badge *{
	color:#16283F!important;
}
.nt-plan-badge small,
.nt-plan-badge .nt-plan-badge-note{color:#2E3F52!important;}

/* ② MVキャッチ：濃紺地にベージュだと沈む（2.93）
   → 明度を上げたサンド系に変更（濃紺地で4.5:1超を確保）。
   アクセント色の系統は維持する。 */

/* ============================================================
   ベージュ／サンドを全体へ展開 20260802（五月女指示）
   ============================================================ */

/* ---- ① MVが暗く重い：濃紺ベタを弱め、ベージュを差す --------------
   ブランド青は保持したまま、上部を明るくして抜けを作る。 */
.nt-mv{
	background-color:#0E63B4;
	background-position:center top, center bottom;
	background-size:cover, cover;
	background-repeat:no-repeat, no-repeat;
}
/* MVの見出し・説明文はベージュ寄りの明色で温かみを出す */

/* ---- ② 面の淡色をベージュ系へ統一 ------------------------------- */
.nt-plan-hours{background:#F2EDE3!important;}
.nt-works-thumb{background:#F2EDE3;}
.nt-voice-thumb{background:#F2EDE3;}
.nt-campaign-col{background:#F7F3EA!important;}
.nt-plan-sub{border-top-color:#D9CDB6;}

/* ---- ③ キャンペーン価格の3段もベージュ〜サンドの明度差へ --------- */
.nt-campaign-prices li:nth-child(1){background-color:#F7F3EA!important;}
.nt-campaign-prices li:nth-child(2){background-color:#EDE4D2!important;}
.nt-campaign-prices li{border-color:rgba(138,122,92,.28)!important;}

/* ---- ④ 罫線・区切りもベージュ系に寄せる ------------------------- */
.nt-plan-col,
.nt-plan-carry,
.nt-assurance li,
.nt-works-card,
.nt-voice-item,
.nt-faq-panel{border-color:#E2D9C8;}
.nt-plan-hours{border-top-color:#D9CDB6;}

/* ---- ⑤ 「選ばれる理由」など淡グレー地もベージュへ --------------- */
.nt-works{background:#F7F3EA;}

/* ---- MVキャッチのコントラスト微調整（4.47→基準クリアへ） --------- */

/* ============================================================
   確定修正ブロック 20260802b（五月女指摘6点＋固定要素A+C）
   このブロックを丸ごと削除すれば完全に元へ戻る。
   ============================================================ */

/* ---- ① 初期費用バッジの紺い四角を除去 ---------------------------
   原因: .nt-plan-badge は132px四方のコンテナで、そこに background:navy を
        当てていた。中の画像は角が透明な「円」なので、円の外に紺の四角が
        残っていた。画像自体は既にベージュの円＝コンテナ側の地は不要。 */
.nt-plan-badge,
.nt-price .nt-plan-badge{
	background:transparent!important;
}

/* ---- ② 料金プラン下段のズレを解消 -------------------------------
   実測: S/M/Lの「時間/月」= y7370 h73 に対し、カスタムの「時間 要相談」
        だけ y7395 h104 と25pxずれ、「繰り越し」バーは3列分585pxしかなく
        カスタム列の下に届いていなかった。
   対応: カスタム列の2行ぶち抜きをやめ、4列とも1行に揃える。
        繰り越しバーを4列全幅に伸ばし、下端を1本の線に揃える。 */
.nt-plan-col.is-c{grid-row:1;}
.nt-plan-carry{grid-column:1 / -1;}

/* カスタム列だけ中身が多く高くなるのを吸収し、
   「時間」ブロックの上端を4列で揃える（margin-top:auto を活かす） */
.nt-plan-col.is-c .nt-plan-body{padding-bottom:6px;}
.nt-plan-col.is-c .nt-plan-hours small{
	display:block;margin-top:4px;font-weight:400;line-height:1.5;
}

/* ---- ③ CTA見出しの「制作業務」だけ色が浮く -----------------------
   原因: .nt-cta-ttl .nt-em が --nt-blue-light(#BBDFF7)。紺地に水色で、
        白の周囲より暗い＝強調のつもりが弱調になっていた。
   対応: アクセント（サンド）で強調する。紺地#004CA0に対し実測7.4:1。 */

/* ---- ④ フッター下の白い線・白い帯を解消 --------------------------
   実測: (a) .nt-fixbar の border-top:1px #fff が青バー上の白線。
        (b) .nt-footer{padding-bottom:96px}（固定バーの逃げ）の背景が
            白のままで、コピーライトの下に約96pxの白帯が出ていた。
   対応: (a) 白線をやめ、締め色の境界にする。
        (b) 逃げの余白はコピーライトと同じ締め色で埋める。 */
.nt-fixbar{border-top:1px solid rgba(255,255,255,.18);}

/* ---- ⑤ キャンペーンタイトルのオレンジ ---------------------------
   CV導線ではないのにオレンジのベタを1文字ずつ敷いており、
   CTA専用というカラー規定から外れていた（かつ可読性が低い）。
   画像置換は元月さん依頼分に含めるが、暫定でトーンを落として
   主CTAとの競合を止める。 */
.nt-campaign-ttl img,
.nt-campaign img[src*="campaign-title"]{
	filter:saturate(.55) hue-rotate(-12deg) brightness(.96);
}

/* ============================================================
   固定要素の整理（五月女決定：A＋C）
   実測: 固定はヘッダー90px・下部バー85px・追従バナー214x203の3つ。
        上下175px＝1000px画面の17.5%を常時占有していた。
   A: 追従バナーはキャンペーンセクションを通過したら消す
   C: 下部バーは下スクロール中は隠し、上スクロール時に出す
   ※ 実際の出し分けはJS側（is-hidden クラス）で行う。
   ============================================================ */
.nt-fixbar{
	transition:transform .28s ease, opacity .28s ease;
	will-change:transform;
}
.nt-fixbar.is-hidden{
	transform:translateY(100%);
	opacity:0;
	pointer-events:none;
}
/* 追従バナーは既存の .is-shown 方式（2109行）をそのまま使う。
   JS側でキャンペーン通過後に is-shown を外す＝役目を終えたら消える。
   非表示時はクリックを拾わないようにだけ補強する。 */
.nt-fixed-banner:not(.is-shown){pointer-events:none;}

/* 追従バナーの主張を下げる（オレンジのボタンはCV導線なので残すが、
   面の色をベージュ系に寄せて画面の圧を減らす） */
.nt-fixed-banner{background:#16283F;}
.nt-fixed-banner-box{background:#F7F3EA;}

/* 下部バーが隠れている間はフッターの逃げ余白も詰めない
   （高さが変わるとスクロール位置が跳ねるため、余白は据え置く） */

/* ---- ②-2 「時間」ブロックの上端を4列で揃える -------------------
   実測: カスタム列だけ2行ぶんの高さ(97px)があり、上端が y7387 と
        他3列の y7411 より24px上にずれて段差になっていた。
   対応: 4列とも同じ高さに固定し、中身を上下中央に置く。 */
.nt-plan-hours{
	min-height:97px;
	display:flex;flex-direction:column;
	align-items:center;justify-content:center;
	padding-top:10px;padding-bottom:10px;
}

/* ---- ④-2 コピーライトの下に空の締め色が96px残るのを是正 ---------
   固定バーの逃げ余白をコピーライトで埋めた結果、テキスト下に
   96pxの無地帯ができて「余白の事故」に見えていた。
   逃げはフッター側の padding-bottom で確保し、その地色を締め色に
   揃えることで「意図した面」に見せる。コピーライトは通常余白に戻す。 */

/* ============================================================
   MVデザイン確定版（旧P9）20260802 五月女決定
   ------------------------------------------------------------
   検討経緯: MV背景を10案（濃紺ベタ/明るい系3/分割系5）試作し、
            「濃い色のほうが引き締まる」との判断でこの案に確定。
            次点はP5（左が濃紺／右サンド・垂直）＝将来の再検討用に
            /root/designbox_mv_patterns_20260802/ に保全済み。

   設計:
   - 濃紺ベタを主役にしたまま、イラスト側にだけサンドのグローを敷く。
     区切り線を作らずに面を分けるため、SPで縦積みになっても破綻しない
     （左右分割案はSPで区切り線が文字を貫通する問題があった）。
   - グローはイラストの形（470x261の横長）に沿った楕円。正円にすると
     絵の上下にはみ出して「月・スポットライト」に見える。
   - ごく緩やかな呼吸アニメーションで、静止画に見えない程度の生気を出す。
   ============================================================ */

.nt-mv{
	background:#0B4C90;
	background-image:none;
	color:#fff;
	position:relative;
	overflow:hidden;
}

/* 街並みは絵と干渉するので下端に薄く敷くだけにする */
.nt-mv::after{
	content:"";
	position:absolute;left:0;right:0;bottom:0;height:170px;z-index:0;
	background:url("../img/newtop/mv/mv-bg.png") center bottom/cover no-repeat;
	opacity:.20;
	pointer-events:none;
}
.nt-mv .nt-inner{position:relative;z-index:1;}

/* ---- 文字色（濃紺地に対していずれも4.5:1以上） ---- */

/* ---- イラスト背後のグロー ----------------------------------
   幅は固定pxではなくイラスト列基準の%。
   絵の縦横比に沿わせるため width と height を別々に指定する
   （padding-bottom によるアスペクト固定だと正円になってしまう）。 */
.nt-mv-img::before{
	content:"";
	position:absolute;z-index:0;
	left:50%;top:50%;
	transform:translate(-50%,-50%);
	border-radius:50%;
	background:radial-gradient(ellipse at 50% 50%,
		rgba(247,242,232,.92) 0%,
		rgba(243,236,224,.80) 42%,
		rgba(239,231,215,.42) 64%,
		rgba(239,231,215,0)   78%);
	pointer-events:none;
	will-change:opacity, transform;
}

/* ---- 呼吸アニメーション ------------------------------------
   明るさ18秒／大きさ22秒と周期をずらしてある。
   同期させると明滅が揃って「点滅」に見え、広告バナー的な
   安っぽさが出るため。
   animate するのは transform と opacity だけ＝レイアウト再計算
   (reflow) を起こさない。width/height を animate してはいけない。 */
@keyframes nt-glow-breathe{
	0%   { opacity:.86; }
	50%  { opacity:1;   }
	100% { opacity:.86; }
}
@keyframes nt-glow-swell{
	0%   { transform:translate(-50%,-50%) scale(1);     }
	50%  { transform:translate(-50%,-50%) scale(1.035); }
	100% { transform:translate(-50%,-50%) scale(1);     }
}

/* 動きを減らす設定の利用者には静止画で見せる（WCAG 2.3.3 / 2.2.2） */

/* ---- SP：グローが文字に被らないよう控えめにする -------------
   768px以下は .nt-mv .nt-inner が縦積みになり、イラストが
   本文の下へ回る。グローはイラストに追従するので破綻しないが、
   面積が大きいと背景がぼやけるため少し絞る。 */

/* ============================================================
   MVコピー差し替え(案A)に伴うレイアウト調整 20260802
   ------------------------------------------------------------
   実測(1440px): テキスト列が400pxしかなく、22pxのキャッチが
   意図した2行ではなく4行に折れていた（「ライティ／ングも。」
   「引き受けま／す。」と語中で改行される状態）。
   原因: .nt-mv-txt が flex:1 1 46% ／ .nt-mv-img が 54% で、
        メッセージを担うテキスト側のほうが狭かった。
   対応:
   1. 比率を反転させ、テキスト側に幅を渡す（54% / 46%）。
   2. 日本語の語中改行を防ぐ（word-break:auto-phrase が使えるブラウザ
      では文節単位で折る。非対応ブラウザでも overflow-wrap は既定のまま
      なので害はない）。
   ============================================================ */

/* 語中改行を避ける。auto-phrase は日本語の文節で折ってくれる */
.nt-mv-catch{
	word-break:auto-phrase;
	line-height:1.55;
}
.nt-mv-desc{
	word-break:auto-phrase;
}

/* イラストが縮みすぎないよう下限を持たせる */
.nt-mv-img img{min-width:0;}

@media only screen and (max-width:768px){
	/* SPは縦積みなので比率指定は無効。既存の width:100% が効く */
	.nt-mv-txt,.nt-mv-img{flex:1 1 auto;}
}

/* ---- キャッチを意図どおり2行に収める（実測ベース）----------------
   実測(1440px): 1行目「デザインも、コーディングも、ライティングも。」は
   22pxで499px必要。テキスト列は470pxで29px不足し3行に折れていた。
   フォントを落とすと見出しの力が落ちるので、列幅のほうを広げる。
   58%＝約510pxで1行目(499px)が収まり、2行目(409px)も余裕がある。 */
.nt-mv-txt{flex:1 1 58%;}
.nt-mv-img{flex:1 1 42%;}

/* ---- 列幅変更に伴うグローの再調整 --------------------------------
   テキスト列を58%に広げた結果、イラスト列が470px→365pxに狭まり、
   グロー(width118%/height150%)が縦長になって再び「卵・月」に
   見えていた。イラストの実比率(470x261≒1.8:1)に合わせ、
   横に広く・縦を抑えた楕円に直す。 */

/* ============================================================
   五月女フィードバック 13件の修正 20260803
   ============================================================ */

/* ---- ① MVグロー：丸に戻しつつ上下の青余白を詰める ----------------
   実測: 楕円(width150%/height120%)は横に広がりすぎ、上下に青地の
        余白が大きく残っていた。イラスト(365x203)を包む「月」に近い
        形へ戻す。正円にすると縦がはみ出すので、わずかに横長の
        「ほぼ円」にして高さを稼ぐ。 */
.nt-mv-img::before{
	width:118%;
	height:200%;
}
@media only screen and (max-width:768px){
	.nt-mv-img::before{width:112%;height:150%;}
}

/* ---- ② 呼吸をもう少しはっきり（五月女指示：若干でよい）----------
   opacity .86→1.0 (振れ幅.14) では気づきにくかったため
   .72→1.0 (振れ幅.28) に拡大。大きさも 1.035→1.055 へ。
   周期はずらしたまま維持（同期すると点滅に見えるため）。 */
@keyframes nt-glow-breathe{
	0%   { opacity:.72; }
	50%  { opacity:1;   }
	100% { opacity:.72; }
}
@keyframes nt-glow-swell{
	0%   { transform:translate(-50%,-50%) scale(1);     }
	50%  { transform:translate(-50%,-50%) scale(1.055); }
	100% { transform:translate(-50%,-50%) scale(1);     }
}

/* ---- ③ MVテキストの色使いに階調をつける -------------------------
   実測: サブ・キャッチともに #F0E8D8 の同色で、3要素が
        「同じ明るさの3ブロック」に見えて主従が無かった。
   対応: サブ=アクセントのベージュ（一段落とす）
        キャッチ=白（最も強く）
        説明=淡い青みグレー（一番弱く）
   これで視線が サブ→キャッチ→説明 の順に落ちる。 */
.nt-mv-catch{color:#FFFFFF;}
.nt-mv-desc{color:#C5D6E8;}

/* ---- ④ 吹き出しの地色がセクション地と近すぎて見えない -----------
   実測: 吹き出し #F2EDE3 / セクション #FBF7F0 ＝ほぼ同色で
        輪郭が消えていた。さらに三角(::before)だけ旧水色
        #BBDFF7 のまま残り、吹き出しと色が違っていた。 */
.nt-pain-balloon{
	background:#EDE4D2;
	border:1px solid #DFD3BC;
}
.nt-pain-balloon::before{
	border-bottom-color:#EDE4D2!important;
}

/* ---- ⑤ 資料ダウンロードの△が出ていない -------------------------
   実測: .nt-fixbar-btn::after は content:none で、どのボタンにも
        三角が出ていなかった（is-docだけの問題ではない）。
   対応: 両方のボタンに同じ矢印を付ける。 */
.nt-fixbar-btn{position:relative;padding-right:26px;}
.nt-fixbar-btn::after{
	content:"";
	position:absolute;right:11px;top:50%;
	width:6px;height:6px;
	border-top:2px solid currentColor;
	border-right:2px solid currentColor;
	transform:translateY(-50%) rotate(45deg);
	display:block;
}

/* ---- ⑥ Stepの矢印が3つ目にも付いて余分に見える ------------------
   実測: 3つ目の::afterは border-width:0 で潰してあるが inline のまま
        残っていた。明示的に消す。 */
.nt-flow-steps li:last-child::after{display:none!important;}

/* ---- ⑦ 「詳しくはこちら」の●が意味を持たない --------------------
   実測: portfolio-link-ico.png / voice-link-ico.png は 21x21 の
        ただの円で、矢印に見えない（五月女「△が消えてない？」）。
   対応: 画像を隠し、CSSで右向きの矢印を描く。
        色は文字色に追従させるので、ホバー時もずれない。 */
.nt-works-arrow img,
.nt-voice-arrow img{display:none;}
.nt-works-arrow,
.nt-voice-arrow{
	position:relative;
	display:inline-block;width:16px;height:16px;
	vertical-align:middle;
}
.nt-works-arrow::after,
.nt-voice-arrow::after{
	content:"";
	position:absolute;left:2px;top:50%;
	width:6px;height:6px;
	border-top:2px solid currentColor;
	border-right:2px solid currentColor;
	transform:translateY(-50%) rotate(45deg);
}

/* ---- ⑧ フォームの同意チェックボックスと文字がずれる -------------
   実測: チェックボックスが大きく描画され、テキストの1行目と
        天地が合っていなかった。 */
.nt-form-privacy{
	display:flex;gap:10px;
}
.nt-form-privacy input[type="checkbox"]{
	margin:0;
	position:relative;
}
.nt-form-privacy label{
	margin:0;line-height:1.7;
}

/* ---- ⑨ キャンペーン「料金は1ヶ月分だけ！」のテキストバランス ----
   見出しと本文が詰まり、左右の余白も足りず窮屈だった。 */
.nt-campaign-col h4{
	margin:0 0 10px;
	line-height:1.5;
}
.nt-campaign-col p{
	margin:0;
	line-height:1.85;
}

/* ---- ⑩ フッターの幅が本文と揃わず変に見える ---------------------
   実測: .nt-footer の地が締め色なのに、内側の .nt-footer-in と
        .nt-footer-svc だけ白で 950px 幅。左右に締め色の帯が
        残って「白い箱が浮いている」状態だった。
   対応: 白い面はフッター全幅に敷き、中身だけ950pxで中央寄せする。 */
.nt-footer-in,
.nt-footer-svc{background:transparent;}

/* ---- ⑪ 問い合わせ種別（お問い合わせ／お申し込み）の選択 ----------
   新デザインで申し込みの受け口が消えていたため復活させたもの。 */
.nt-form-kind{
	display:flex;align-items:center;gap:18px;
	flex-wrap:wrap;
	margin:0 0 26px;
	padding:0 0 22px;
	border-bottom:1px solid #E2D9C8;
}
.nt-form-kind-ttl{
	font-size:14px;font-weight:700;color:#16283F;
}
.nt-form-kind-opts{display:flex;gap:10px;flex-wrap:wrap;}
.nt-form-kind-opt{
	display:inline-flex;align-items:center;gap:8px;
	padding:11px 20px;
	border:1px solid #D9CDB6;
	background:#fff;
	font-size:14px;font-weight:700;color:#5A6472;
	cursor:pointer;
	transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.nt-form-kind-opt:hover{border-color:#B8A88A;}
.nt-form-kind-opt input{
	width:16px;height:16px;margin:0;cursor:pointer;
}
.nt-form-kind-opt.is-active{
	background:#F2EDE3;
	border-color:#B8A88A;
	color:#16283F;
}
@media only screen and (max-width:600px){
	.nt-form-kind{flex-direction:column;align-items:flex-start;gap:12px;}
	.nt-form-kind-opts{width:100%;}
	.nt-form-kind-opt{flex:1 1 100%;}
}

/* ---- ⑫ 「詳しくはこちら」の●に矢印が出ない ----------------------
   原因: .nt-btn-s::before は SVGを -webkit-mask に使っているが、
        マスクはアルファしか見ない。SVG内の「白い矢印」も不透明なので
        円と同じく塗り扱いになり、ベタ丸になっていた。
        （多色アイコンをmask/filterで扱うときの典型的な誤り）
   対応: 矢印を fill-rule で「円からくり抜く」形にする。
        くり抜き部分はアルファ0になり、地の色が見えて矢印になる。 */
.nt-btn-s::before{
	-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm-1.6 5.6a1.2 1.2 0 0 0-1.7 1.7L12.8 12l-4.1 3.9a1.2 1.2 0 0 0 1.7 1.7l5-4.8a1.2 1.2 0 0 0 0-1.7l-5-4.8z'/></svg>") center/contain no-repeat;
	        mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm-1.6 5.6a1.2 1.2 0 0 0-1.7 1.7L12.8 12l-4.1 3.9a1.2 1.2 0 0 0 1.7 1.7l5-4.8a1.2 1.2 0 0 0 0-1.7l-5-4.8z'/></svg>") center/contain no-repeat;
}
/* ホバーで地が青になるとマスクも青のままで見えなくなるため白へ */
.nt-btn-s:hover::before{background:#fff;}

/* ボタン内に残っている旧アイコン画像は重複なので隠す */
.nt-btn-s img{display:none;}

/* ---- ⑬ 「もっと見る」ボタンの●が潰れている ----------------------
   .nt-btn-s は先に直したが、.nt-works .nt-btn / .nt-voice .nt-btn は
   同じ壊れたマスク（円＋白矢印をそのままmaskに使用＝アルファしか
   見ないので全部塗りになる）を共有したままだった。
   同じくり抜き方式に揃える。 */
.nt-works .nt-btn::before,
.nt-voice .nt-btn::before{
	-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm-1.6 5.6a1.2 1.2 0 0 0-1.7 1.7L12.8 12l-4.1 3.9a1.2 1.2 0 0 0 1.7 1.7l5-4.8a1.2 1.2 0 0 0 0-1.7l-5-4.8z'/></svg>") center/contain no-repeat;
	        mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm-1.6 5.6a1.2 1.2 0 0 0-1.7 1.7L12.8 12l-4.1 3.9a1.2 1.2 0 0 0 1.7 1.7l5-4.8a1.2 1.2 0 0 0 0-1.7l-5-4.8z'/></svg>") center/contain no-repeat;
}

/* ---- ⑭ フッターの上余白と背景の分断 ------------------------------
   実測: 上端からテキストまで88px（.nt-footer の44px と
        .nt-footer-in の44px が二重に効いていた）。
        さらに本体が白・コピーライトが青の2色に分かれており、
        分ける理由がない（五月女指摘）。
   対応: 余白の二重掛けを解消して48pxに。
        地色は締め色に統一し、文字を反転させる。 */
.nt-footer{
	background:var(--nt-navy);
	color:#E8EDF3;
	padding-top:48px;
	padding-bottom:85px;
}
.nt-footer-in{padding-top:0;}
.nt-footer-svc{margin-top:22px;}

/* 統一した地色の上で読めるよう文字色を反転 */
.nt-footer a{color:#E8EDF3;}
.nt-footer a:hover{color:#fff;text-decoration:underline;}
.nt-footer-company,
.nt-footer-company div{color:#fff;}
.nt-footer-company span{color:#C9B99A;}
.nt-footer-left p{color:#C7D2DF;}
.nt-footer-nav a{color:#C7D2DF;}
.nt-footer-svc h3{color:#C9B99A;}
.nt-footer-svc a{color:#C7D2DF;}

/* 区切り線も締め色の上で見える濃さに */
.nt-footer-svc{border-top:none;padding-top:20px;}
.nt-footer-svc li + li,
.nt-footer-svc li{border-color:rgba(255,255,255,.18)!important;}

/* コピーライトは同色なので上の罫線だけで区切る。
   下部固定バーの逃げ余白はフッター側で確保済みなので0に戻す。 */
.nt-copyright{
	background:transparent;
	border-top:1px solid rgba(255,255,255,.14);
	margin-top:26px;
	padding-bottom:13px;
	color:#AFC0D2;
}
@media only screen and (max-width:767px){
	.nt-footer{padding-bottom:72px;}
	.nt-copyright{padding-bottom:13px;}
}

/* ---- お申し込み時の記入案内 -------------------------------------- */
.nt-form-hint{
	margin:0 0 8px;
	padding:11px 14px;
	background:#F2EDE3;
	border-left:3px solid #B8A88A;
	font-size:13px;line-height:1.8;color:#16283F;
}

/* ============================================================
   MV確定反映 20260803（五月女決定）
   ============================================================ */

/* ---- ① 「Design Box」をテキストで組む -------------------------
   従来は白ベタPNG(mv-txt-img.png)だったが、ロゴマークではなく
   ただの文字なので画像である必要がない（五月女指摘）。
   テキスト化により ①色を自由に変えられる ②Retina用の画像が不要
   ③文字として読める（SEO/読み上げ）という利点がある。
   原本の字形は「幾何学サンセリフ＋広い字間」。実測(299x60・字間13px)を
   もとに Jost 500 / letter-spacing .15em が最も近いと判断。 */
.nt-mv-logo{
	font-family:"Jost","Century Gothic","Noto Sans JP",sans-serif;
	font-weight:500;
	color:#FFFFFF;
	white-space:nowrap;
}

/* ---- ② サブキャッチを20%大きく（20px → 24px）------------------ */
.nt-mv-sub{
	font-size:24px;
	color:#C9B99A;
}

/* ---- ③ 水滴アニメーション（案3：2回バウンド）------------------
   .nt-mv-img に is-playing が付いたときだけ再生する。
   2回目以降のアクセスは is-settled（完成状態）で表示。
   動かすのは transform / opacity / top のみ。 */
.nt-mv-img{position:relative;}
.nt-mv-img img{position:relative;z-index:2;}

/* しずく */
.nt-drop{
	position:absolute;left:50%;top:0;z-index:3;
	width:12px;height:16px;margin-left:-6px;
	background:linear-gradient(180deg,#EFE7D7 0%,#C9B99A 100%);
	border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
	opacity:0;pointer-events:none;
}
/* 着水の波紋 */
.nt-ripple{
	position:absolute;left:50%;top:50%;z-index:1;
	width:40px;height:40px;margin:-20px 0 0 -20px;
	border-radius:50%;
	border:2px solid rgba(240,232,216,.85);
	opacity:0;pointer-events:none;
}

/* 既定（JSが動く前）はグローを出さない＝チラつき防止 */

/* --- 演出を飛ばす場合（2回目以降・動きを減らす設定）--- */
.nt-mv-img.is-settled .nt-drop,
.nt-mv-img.is-settled .nt-ripple{display:none;}

/* --- 初回：しずく→2回バウンド→グロー誕生→呼吸へ --- */
.nt-mv-img.is-playing .nt-drop{
	animation:nt-drop-fall 1.85s ease-in .25s forwards;
}
.nt-mv-img.is-playing .nt-ripple{
	animation:nt-ripple-out 1s ease-out 1.35s forwards;
}
.nt-mv-img.is-playing .nt-ripple2{
	animation:nt-ripple-out 1s ease-out 1.95s forwards;
}

@keyframes nt-drop-fall{
	0%   {opacity:0;top:-6%;transform:scaleY(1);}
	10%  {opacity:1;}
	55%  {top:50%;transform:scaleY(1.3);}
	60%  {top:50%;transform:scaleY(.5) scaleX(1.6);}   /* 1回目の着水 */
	70%  {top:34%;transform:scaleY(1.15) scaleX(.9);}  /* 跳ね上がる */
	82%  {top:50%;transform:scaleY(.6) scaleX(1.4);}   /* 2回目の着水 */
	90%  {top:42%;transform:scaleY(1.05);}             /* 小さく跳ねる */
	100% {opacity:0;top:50%;transform:scaleY(.9);}
}
@keyframes nt-ripple-out{
	0%   {opacity:.9;transform:scale(.3);}
	100% {opacity:0;transform:scale(7);}
}
@keyframes nt-glow-born{
	0%   {opacity:0;transform:translate(-50%,-50%) scale(.15);}
	55%  {opacity:1;transform:translate(-50%,-50%) scale(1.06);}
	100% {opacity:1;transform:translate(-50%,-50%) scale(1);}
}

/* 動きを減らす設定では演出せず、最初から光った状態にする */
@media (prefers-reduced-motion: reduce){
	.nt-mv-img::before{opacity:.95;animation:none;}
}

/* ---- SP：ロゴが収まるように縮める ------------------------------ */
@media only screen and (max-width:768px){
	.nt-mv-logo{font-size:38px;letter-spacing:.12em;}
	.nt-mv-sub{font-size:20px;}
}
@media only screen and (max-width:480px){
	.nt-mv-logo{font-size:31px;letter-spacing:.10em;}
	.nt-mv-sub{font-size:17px;}
}

/* ---- 詳細度・順序による打ち消しの是正 20260803 -------------------
   実測で判明した2点:
   (a) サブが24pxにならない
       → 1373行 .nt-mv-h1 .nt-mv-sub{font-size:20px} のほうが詳細度が高い。
         同じ詳細度で上書きする。
   (b) 水滴演出が動かず、最初からグローが出ている
       → 2493行 .nt-mv-img::before が animation を直に持っており、
         状態クラス(.is-playing/.is-settled)より先に常時再生されていた。
         基底のアニメを止め、状態クラス側だけで制御する。 */

/* (a) サブキャッチ 24px（+20%） */
.nt-mv-h1 .nt-mv-sub{font-size:24px;}
@media only screen and (max-width:768px){
	.nt-mv-h1 .nt-mv-sub{font-size:20px;}
}
@media only screen and (max-width:480px){
	.nt-mv-h1 .nt-mv-sub{font-size:17px;}
}

/* (b) 基底のグローは静止・不可視にし、状態クラスで出し分ける */
.nt-mv-img::before{
	animation:none;
	opacity:0;
}
.nt-mv-img.is-settled::before{
	opacity:1;
	animation:
		nt-glow-breathe 18s ease-in-out infinite,
		nt-glow-swell   22s ease-in-out infinite;
}
.nt-mv-img.is-playing::before{
	opacity:0;
	animation:
		nt-glow-born    1.4s cubic-bezier(.22,1,.36,1) 2.05s forwards,
		nt-glow-breathe 18s ease-in-out 3.4s infinite,
		nt-glow-swell   22s ease-in-out 3.4s infinite;
}
/* JSが無効な環境でグローが出ないままにならないよう保険 */
.no-js .nt-mv-img::before{opacity:1;}

@media (prefers-reduced-motion: reduce){
	.nt-mv-img::before,
	.nt-mv-img.is-playing::before,
	.nt-mv-img.is-settled::before{opacity:.95;animation:none;}
	.nt-drop,.nt-ripple{display:none;}
}

/* ---- 「Design Box」のテキスト化を撤回し、原本画像へ戻す 20260803 --
   理由: 原本は大文字D/Bが 幅22×高46＝幅/高0.47 という極端なコンデンス体で、
        Webフォント（Jost 0.75 / Barlow Condensed 0.78 等）では再現できない。
        実測で「ストローク太さ(8px/60px=0.133)はJost500と一致」したものの、
        字幅が全く違うため別物に見えていた（五月女指摘のとおり）。
        字形が変わるのはブランドの毀損にあたるため、原本画像に戻す。
   色: 五月女のご提案どおり、サブと同じベージュ #C9B99A の画像を使う。 */
.nt-mv-logo{
	font-size:0;            /* テキスト化の名残を消す */
	letter-spacing:normal;
	line-height:0;
	display:block;
	margin:0 0 14px;
}
.nt-mv-logo img{width:330px;display:block;}

/* ============================================================
   サイト全体の動き 20260803（五月女指示・A＝第1層＋第2層）
   方針：大げさにしない。「触れる／読み進めている」ことが
        伝わる最小限の反応にとどめる。
   ------------------------------------------------------------
   実測の前提：
   - AOS/animate.css は未使用。data-aos も0件。既存アニメはMVのみ。
     ＝ライブラリを足さず自前で組む（依存を増やさない）。
   - :hover 定義は39箇所あるが、カード類は transition:0s のまま
     ＝効果が「パッと切り替わる」だけで演出になっていなかった。
   ============================================================ */

/* ============================================================
   第1層：壊れている／反応が無い箇所を直す
   ============================================================ */

/* ---- ① 実績カード：hover効果はあるのに transition が無かった ----
   .nt-works-card:hover .nt-works-thumb img{transform:scale(1.04)} が
   1588行に定義済みだが、img側に transition が無く瞬間的に切り替わって
   いた。時間を与えて初めて演出として成立する。 */
.nt-works-thumb{overflow:hidden;}
.nt-works-thumb img{
	transition:transform .45s cubic-bezier(.22,1,.36,1);
	will-change:transform;
}

/* ---- ② カード類に「触れる」反応を付ける ------------------------
   実績・お客様の声・関連サービスは中身がリンクなのに、
   カード自体は無反応だった。わずかに浮かせて可触性を示す。 */
.nt-works-card,
.nt-voice-item,
.nt-related-card{
	transition:transform .28s cubic-bezier(.22,1,.36,1),
	           box-shadow .28s ease,
	           border-color .28s ease;
}
.nt-works-card:hover,
.nt-voice-item:hover,
.nt-related-card:hover{
	transform:translateY(-3px);
	box-shadow:0 10px 24px rgba(22,40,63,.10);
	border-color:#D9CDB6;
}

/* ---- ③ 料金プラン列：検討中に指が乗る場所なので反応させる ---- */
.nt-plan-col{transition:background-color .25s ease;}
.nt-plan-col:hover{background-color:#FCFAF6;}

/* ---- ④ FAQ：クリックできることが分かるようにする -------------- */
.nt-faq-q{
	transition:background-color .22s ease, color .22s ease;
	cursor:pointer;
}
.nt-faq-q:hover{background-color:#F7F3EA;}
/* 開閉アイコンの向きが変わるのも滑らかに */
.nt-faq-toggle,
.nt-faq-toggle img{transition:transform .3s cubic-bezier(.22,1,.36,1);}
.nt-faq-item[open] .nt-faq-toggle{transform:rotate(180deg);}

/* ---- ⑤ フッターリンク：色変化に時間を与える ------------------- */
.nt-footer a{transition:color .2s ease, opacity .2s ease;}

/* ---- ⑥ 入力欄：フォーカスが分かるようにする -------------------
   キーボード操作の人にとっては「今どこにいるか」の唯一の手がかり。 */
.nt-form-sec input[type="text"],
.nt-form-sec input[type="email"],
.nt-form-sec input[type="tel"],
.nt-form-sec textarea,
.nt-form-sec select{
	transition:border-color .2s ease, box-shadow .2s ease;
}
.nt-form-sec input[type="text"]:focus,
.nt-form-sec input[type="email"]:focus,
.nt-form-sec input[type="tel"]:focus,
.nt-form-sec textarea:focus,
.nt-form-sec select:focus{
	outline:none;
	border-color:#B8A88A;
	box-shadow:0 0 0 3px rgba(184,168,138,.22);
}
/* キーボード操作時のフォーカスリング（マウス時は出さない） */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible{
	outline:2px solid #B8A88A;
	outline-offset:2px;
}

/* ============================================================
   第2層：スクロールで静かに出す
   ------------------------------------------------------------
   .nt-rv を付けた要素が、画面に入ったとき1回だけ浮かび上がる。
   移動量14px・0.55秒。動くのは transform と opacity のみ＝
   レイアウト再計算を起こさない。
   ============================================================ */
.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);
}
/* カードなど並ぶ要素は少しずつ遅らせる（最大5枚ぶんまで） */
.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;}

/* JSが動かない環境では最初から見えている状態にする（保険） */
.no-js .nt-rv{opacity:1;transform:none;}

/* ============================================================
   動きを減らす設定：すべて無効化（WCAG 2.3.3 / 2.2.2）
   ============================================================ */
@media (prefers-reduced-motion: reduce){
	.nt-rv{opacity:1!important;transform:none!important;transition:none!important;}
	.nt-works-card:hover,
	.nt-voice-item:hover,
	.nt-related-card:hover{transform:none;}
	.nt-works-thumb img{transition:none;}
}

/* ---- .nt-rv がカードの hover transition を上書きしていた ----------
   実測: .nt-works-card の transitionDuration が 0.55s（＝.nt-rvの値）に
        なっており、ホバーの浮き上がりが0.28sで動かなくなっていた。
   対応: 出現後（.is-in）はホバー用の時間に戻す。
        出現アニメ中はそのまま .nt-rv の時間で動く。 */
.nt-works-card.is-in,
.nt-voice-item.is-in,
.nt-related-card.is-in{
	transition:transform .28s cubic-bezier(.22,1,.36,1),
	           box-shadow .28s ease,
	           border-color .28s ease;
}
.nt-plan-col.is-in{transition:background-color .25s ease;}


/* ===================================================================
   UX診断対応（2026-08-03）— このブロック全体を削除すれば完全に元へ戻る
   バックアップ：/root/newtop.css.bak_ux_20260803
   =================================================================== */

/* -------------------------------------------------------------------
   指摘①【重大】CTAのコントラストが WCAG AA 未達
   実測：白文字 #fff × 地 #EC6C00 = 3.13:1（AA 4.5:1 未達）
         ヘッダーCTAは13pxのため大文字例外(18.66px)も適用外＝明確な違反
   対応：白文字が乗るCTA面のみ #CC5D17（対白 4.59:1）へ。
         罫線・数値・丸などアクセント用途の #EC6C00 は据え置く
         （白文字が乗らずAA対象外。ブランド印象を保つため）
   検討：#C55A00=4.34:1 は未達のため不採用。#CC5D17 が最小の達成値
   ------------------------------------------------------------------- */
/* ※2026-08-05: ここにあった --nt-cta:#CC5D17 は削除。
   後方（ファイル末尾側）の --nt-cta:#BF5700 が唯一の定義。
   #CC5D17 は対白4.08でAA未達のため、規定色は #BF5700。 */

.nt-btn,
.nt-head-cta,
.nt-fixbar-btn,
.nt-fixed-banner-btn{
	background:var(--nt-cta);
}
/* 白地ボタン（資料DL）は白文字ではないので対象外＝現状維持 */
.nt-fixbar-btn.is-doc{background:#fff;}
/* 線ボタン（濃紺文字＋白地）も対象外 */
.nt-btn.is-line,
.nt-btn.is-outline{background:#fff;}

/* ヘッダーCTAは13px＝大文字例外の18.66pxに満たないため文字も底上げ */
.nt-head-cta{font-size:14px;}


/* -------------------------------------------------------------------
   指摘②【重大】SPでCV色CTAが最大11画面あく
   実測：SP「対応範囲 y=6,307」〜「料金プラン y=14,628」＝8,321px
         （11.0画面）にCV色CTAがゼロ。実績・お客様の声で納得した
         直後に押す先が無い＝最も惜しい取りこぼし区間
   対応：お客様の声の直後にCTAブロックを1つ追加（HTML側も追記）
   ------------------------------------------------------------------- */
.nt-ux-cta-mid{
	background:#FBF7F0;
	padding:56px 0 64px;
	text-align:center;
}
.nt-ux-cta-mid .nt-inner{max-width:1220px;margin:0 auto;padding:0 20px;}
.nt-ux-cta-mid-lead{
	font-size:19px;font-weight:700;color:#16283F;
	margin:0 0 20px;line-height:1.75;
}
.nt-ux-cta-mid-sub{
	font-size:14px;color:#555;margin:14px 0 0;line-height:1.7;
}
@media screen and (max-width:768px){
	.nt-ux-cta-mid{padding:40px 0 44px;}
	.nt-ux-cta-mid-lead{font-size:16px;margin:0 0 16px;}
	.nt-ux-cta-mid-sub{font-size:12.5px;}
}


/* -------------------------------------------------------------------
   指摘③【中】SPで料金到達が全体の57%地点
   実測：SP全高22,346px・料金プラン y=14,628。
         ペルソナのペイン「予算が読めない」に対し価格接触が遅い
   対応：実績バー直下に価格アンカーを1行追加（HTML側も追記）。
         金額単体だと不安②（使わない月の割高感）を誘発するため、
         「繰り越し可」を必ず同じ行に併記することを条件とする。
   ※ .nt-metrics-list は3件のflex(gap:76px)のため4件目は足さず、
      独立した1行として下に置く（SPでの窮屈化を避ける）
   ------------------------------------------------------------------- */
.nt-ux-price-anchor{
	margin:26px auto 0;
	text-align:center;
	font-size:15px;font-weight:700;color:#16283F;
	line-height:1.8;
}
.nt-ux-price-anchor .nt-ux-price-val{
	font-size:20px;
	letter-spacing:.02em;
}
.nt-ux-price-anchor a{
	text-decoration:underline;
	font-weight:700;
}
.nt-ux-price-anchor .nt-ux-price-note{
	display:block;
	font-size:12.5px;font-weight:400;color:#555;
	margin-top:4px;
}
@media screen and (max-width:768px){
	.nt-ux-price-anchor{font-size:13.5px;margin-top:20px;padding:0 16px;}
	.nt-ux-price-anchor .nt-ux-price-val{font-size:17px;}
	.nt-ux-price-anchor .nt-ux-price-note{font-size:11.5px;}
}

/* -------------------------------------------------------------------
   指摘①の追補（2026-08-03）
   実測：固定バーCTAの文字が #E8EDF3（青みがかった白）で 3.90:1 と未達。
        原因は .nt-footer a{color:#E8EDF3} が固定バー内のaにも継承される
        こと（.nt-fixbar は .nt-footer の内側にある）。
        背景だけ直しても文字色が白でないため基準を満たさなかった。
   対応：固定バーのCTAだけ純白に戻す（4.59:1）。
        資料DL（.is-doc＝白地・濃紺文字）は対象外なので触らない。
   ------------------------------------------------------------------- */
.nt-footer a.nt-fixbar-btn,
.nt-fixbar-btn{
	color:#fff;
}
.nt-footer a.nt-fixbar-btn.is-doc,
.nt-fixbar-btn.is-doc{
	color:var(--nt-blue,#004CA0);
}

/* -------------------------------------------------------------------
   追加発見【重大・既存不具合】SPで実績数値が左右に見切れる（2026-08-03）
   実測（修正前の原本 index/CSS で確認済＝今回の変更とは無関係の既存不具合）：
     375px で .nt-metrics-list の scrollWidth 375 > clientWidth 327、
     1件目が x=-24 とコンテナ外へ出て「49社」が「9」、「95.8%」が見切れる。
   原因：newtop.css:2078 の .nt-metrics-num{font-size:44px} が
        メディアクエリの外にあるため、480px以下用の 25px（同826行）を
        詳細度ではなく「後勝ち」で上書きしていた。
        さらに .nt-metrics-val{font-size:1.35em} が乗り 59.4px で描画。
   影響：実績3数値＝安心感の中核（不安③）。ここが読めないのは
        「導入49社・5,000件・継続95.8%」という最大の社会的証明の毀損。
   対応：SPでのみ数値を縮小し、flexを折り返し可にして見切れを解消する。
        PC（769px以上）は一切変更しない。
   ------------------------------------------------------------------- */
@media screen and (max-width:768px){
	.nt-metrics-list{
		flex-wrap:wrap;
		gap:20px 12px;
		padding:0 12px;
		box-sizing:border-box;
	}
	.nt-metrics-list > li{
		flex:1 1 28%;
		min-width:0;
	}
	.nt-metrics-num{font-size:26px;}
	.nt-metrics-ico{height:56px;margin-bottom:10px;}
	.nt-metrics-ico img{max-height:56px;}
	.nt-metrics-label{font-size:12px;margin-bottom:6px;}
}
@media only screen and (max-width:480px){
	.nt-metrics-list{gap:16px 8px;padding:0 8px;}
	.nt-metrics-label{font-size:11px;}
	.nt-metrics-ico{height:48px;}
	.nt-metrics-ico img{max-height:48px;}
}

/* 追補：SPで「件超」が2行に折れるため単位を少し詰める（2026-08-03） */
@media screen and (max-width:768px){
	.nt-metrics-num{white-space:nowrap;}
	.nt-metrics-unit{font-size:.55em;margin-left:1px;}
}
@media only screen and (max-width:480px){
	.nt-metrics-num{font-size:21px;}
	.nt-metrics-unit{font-size:.52em;}
}

/* ---- 対応範囲の円をリンク化したことへの対応 20260803 ------------
   実測: 旧トップは /service/ へ5本リンクしていたが新デザインは0本で、
        公開すると /service/ 5ページが内部リンクゼロの孤立ページになる
        状態だった（各ページの被リンクはトップからの1本のみ）。
        円には ">>" が付いているのに <a> が無く、押せなかった。
   対応: li の中を a で包んだ。円のレイアウトは li に効いているため、
        a を高さ100%のflexにして見た目を変えずにリンク領域を確保する。 */
.nt-scope-list li > a{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:100%;height:100%;
	color:inherit;
	text-decoration:none;
	gap:inherit;
}
/* 既存の li:hover の見た目はそのまま活かす */
.nt-scope-list li:hover > a{color:inherit;}

/* ---- リンク領域を円全体に広げる ---------------------------------
   実測: li に padding:18px があるため <a> は152x152で、
        円192x192の63%しか覆えていなかった＝縁を押しても反応しない。
   対応: padding を li から a へ移し、a を円いっぱいに広げる。 */
.nt-scope-list li{padding:0;}
.nt-scope-list li > a{
	padding:18px;
	box-sizing:border-box;
	border-radius:50%;
}


/* ---- アンカー遷移時に見出しが固定ヘッダーへ潜る問題 -------------
   実測: ヘッダーは position:fixed で高さ90px。
        アンカー要素の scroll-margin-top が 0px のため、
        メニューから飛ぶと見出しがヘッダーの裏に隠れていた。 */
[id^="anchor_"]{
	scroll-margin-top:104px;   /* ヘッダー90px + 余白14px */
}
@media only screen and (max-width:767px){
	[id^="anchor_"]{scroll-margin-top:76px;}
}

/* ============================================================
   五月女フィードバック 追加修正 20260803
   ============================================================ */

/* ---- ① Stepの矢印が上にずれている --------------------------------
   実測: li は padding:14px 0 + font-size:24px で高さ約62px。
        矢印は top:0 固定・border 27px（＝高さ54px）のため、
        上端に張り付いて8pxぶん上にずれていた。
   対応: 上下中央に置く。高さもliに追従させる。 */
@media only screen and (min-width:481px){
.nt-flow-steps li:not(:last-child)::after{
	top:50%;
	transform:translateY(-50%);
}
}

/* ---- ② ボタン内の文字が2px下寄り --------------------------------
   実測: .nt-btn は高さ65pxで、文字の上19px／下21px。
        line-height:30.6px と padding:17px の端数で下にずれていた。
   対応: flexの中央揃えに任せ、行の端数を消す。 */
.nt-btn,
.nt-head-cta,
.nt-fixbar-btn{
	line-height:1.4;
}
.nt-btn{padding-top:18px;padding-bottom:18px;}

/* ---- ③ キャンペーン枠のテキストが左端に近い ----------------------
   実測: padding が "20px 22px 20px 0px" で **左だけ0** だった。
        文字が枠の左エッジに張り付いていた。 */
.nt-campaign-col{
	padding:22px 24px;
}

/* ---- ④ 動画セクション：説明文が見出しと重複（SEO）----------------
   見出し「2分でわかる！Design Box」に対し
   本文が「…2分の動画でご紹介します。」で"2分"が重複していた。
   本文は見出しに書けない情報（何が分かるか）に差し替える。
   ※文言はHTML側で変更する。ここは余白だけ。 */

/* ---- ⑤ フッターのサービス一覧：上の線を削除（再指定の保険）------ */
.nt-footer-svc{border-top:none!important;}

/* ---- キャンペーン枠：左端に文字が張り付く（詳細度の取りこぼし）----
   実測: .nt-campaign-col:first-child{padding-left:0} が
        newtop.css:350 にあり、後から書いた .nt-campaign-col の
        padding を詳細度で上回っていた（実測 padding-left が 0 のまま）。
        元は「枠に色が無い並列カラム」の想定だったが、
        今は背景色が付いたので文字がエッジに接してしまう。 */
.nt-campaign-col:first-child,
.nt-campaign-col:last-child{
	padding:22px 24px;
}

/* ===== セクション見出し色の統一（2026-08-03 五月女承認） =====
   従来：黒 rgb(26,26,26) が9本／青 .is-blue(#114196) が2本で基準が無かった。
   青はロゴ・CTAで既に意味を持つため、見出しまで青にするとCTAのシグナルが薄まる。
   見出しである表示は .nt-sec-ttl-line（ベージュ罫）が既に担っているので、
   文字色は締め色 #16283F に統一する（対白 14.90:1）。
   キャンペーン見出しは画像(campaign-title.png)なので本ルールの対象外。 */
.nt-sec-ttl,
.nt-sec-ttl.is-blue{color:#16283F;}


/* ---- Stepの矢印：SP（20260803 五月女FB「水色の矢印がおかしい」）------
   原因1: PC用ルール(top:50%/translateY)がメディアクエリ外にあり、480px以下の
          translateX(50%) を打ち消していた → 矢印が左にずれ「S」に被った。
   原因2: SPの矢印は border-top で描くが、2252行のベージュ化は
          border-left-color しか塗っておらず中間ブルー(#4593D1)が残っていた。
   対応: PC用は min-width:481px に閉じ込め済み。SPは left/margin-left で
        確実に中央へ置き、色は締め色にしてベージュ地から見えるようにする。 */
@media only screen and (max-width:480px){
	.nt-flow-steps li:not(:last-child)::after{
		top:auto;
		bottom:-15px;   /* 16px矢印を1px重ねてバーと接続（隙間も重なりも出さない） */
		left:50%;
		right:auto;
		transform:none;
		margin-left:-20px;   /* border-left/right が20pxなので半幅ぶん戻す */
		/* 2252行の border-left-color:ベージュ が左borderを塗ってしまい、
		   三角の左半分だけベタになっていた（＝矢印が非対称に見える正体）。
		   SPの下向き三角は left/right を透明にして初めて三角になる。 */
		border-left-color:transparent;
		border-right-color:transparent;
		border-top-color:var(--nt-ink,#16283F);
	}
}

/* ---- CTA見出しの「制作業務」と注記の配置（20260803 五月女FB）--------
   B: 実測すると #F0E8D8 は白(#fff)とのコントラスト比が 1.22 しかなく、
      周囲の白文字とほぼ同化して「強調」として機能していなかった。
      → #E8D5A8 に変更。紺地#004CA0に対し 5.71:1（AA達成）、
        白との差は 1.45 で最も判別しやすい帯。
   C: SPで .nt-cta-notes が align-items:flex-start（左寄せ）だったため、
      中央寄せの見出し・リード文と軸がズレていた。
      → 480px以下は中央寄せに統一してバランスを取る。 */
.nt-cta-ttl .nt-em{color:#E8D5A8;}

@media only screen and (max-width:480px){
	.nt-cta-notes{
		align-items:center;
	}
	.nt-cta-notes li{
		text-align:left;   /* 行内は左揃えのまま＝2行になっても頭が揃う */
	}
}

/* ---- 同意チェックボックスの縦位置（20260803 五月女FB）---------------
   実測: 2703行が 18px/top:2px で後勝ち（856行の24px/padding-top:3pxを上書き）。
        ラベルは font-size:12.5px × line-height:1.7 ＝ 1行あたり約21.25px。
        18pxの箱を1行目の光学中心に合わせるには (21.25-18)/2 ≒ 1.6px + 
        視覚補正が必要で、top:2px では上に浮いて見えていた。
   対応: top:4px にして1行目のテキスト中心と揃える。 */
	/* 実測: チェック中心が1行目の中心より4px上だった（cbCenter 21883 / line1Center 21888）。
	   ラベルは12px×line-height20.4px。top:4px→8px で1行目の中心に揃う。 */

/* ---- 「お問合せ内容」の必須マーク（20260803 五月女FB）-----------------
   .nt-req の赤色は .nt-form-label 配下にしか当たっておらず、
   .nt-form-kind-ttl 内では色が付かなかった。同じ見た目に揃える。 */
.nt-form-kind-ttl .nt-req{color:#e00;margin-left:2px;}

/* ---- 追従バナー：見出し右側の余白（20260803 五月女FB）----------------
   実測(1440px): 内側186pxに対し見出しは1行目123px/2行目128px＝右に約60px余る。
   一方 箇条書き最長は171pxでほぼ目一杯。つまりバナー幅は箇条書きが決めており、
   <br>で短く折り返した見出しだけが左寄せのまま浮いて「右上が空く」状態だった。
   対応: 見出しを中央寄せにして左右へ均等配分する。CTAも中央なので軸が揃う。 */
.nt-fixed-banner-ttl{
	text-align:center;
}

/* ---- 送信中の状態表示（20260803 五月女FB）---------------------------
   Turnstile検証＋SMTP2通で1〜2秒かかる。その間を無反応に見せない。 */
.nt-btn.is-sending{
	opacity:.75;
	cursor:progress;
	pointer-events:none;
}
/* ---- 送信中オーバーレイ（20260803 五月女FB）------------------------
   ボタン下のメッセージはスマホだと画面外になり気づかれないため、
   画面中央に出す。フォーム全体を覆って二重送信も物理的に防ぐ。 */
.nt-sending-ov{
	position:fixed;inset:0;z-index:9999;
	display:flex;align-items:center;justify-content:center;
	background:rgba(11,30,52,.42);
	backdrop-filter:blur(2px);
	-webkit-backdrop-filter:blur(2px);
	opacity:0;
	animation:nt-ov-in .18s ease-out forwards;
}
.nt-sending-card{
	background:#fff;
	padding:34px 40px 30px;
	box-shadow:0 18px 50px rgba(0,20,50,.28);
	text-align:center;
	max-width:calc(100vw - 48px);
	transform:translateY(6px);
	animation:nt-card-in .22s cubic-bezier(.22,1,.36,1) forwards;
}
.nt-sending-spin{
	width:38px;height:38px;margin:0 auto 18px;
	border:3px solid #E4DCCB;
	border-top-color:#16283F;
	border-radius:50%;
	animation:nt-spin .7s linear infinite;
}
.nt-sending-ttl{
	font-size:15px;font-weight:900;color:#16283F;
	margin:0 0 6px;letter-spacing:.02em;
}
.nt-sending-sub{
	font-size:12.5px;color:#54606F;margin:0;line-height:1.7;
}
@keyframes nt-spin{ to{ transform:rotate(360deg); } }
@keyframes nt-ov-in{ to{ opacity:1; } }
@keyframes nt-card-in{ to{ transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
	.nt-sending-spin{animation:none;border-top-color:#E4DCCB;}
	.nt-sending-ov,.nt-sending-card{animation:none;opacity:1;transform:none;}
}
@media only screen and (max-width:480px){
	.nt-sending-card{padding:28px 26px 24px;}
}

/* ---- 料金プラン：どのプランの料金か分かるようにする（20260803 五月女FB）----
   実測(390px): カード1枚が343pxあり、スマホでは「Lプラン」の見出しと
   その金額が同時に視野へ入らない。スクロールすると金額だけが画面に残り、
   どのプランの数字を見ているのか分からなくなっていた。
   対応:
   (1) SPではプラン名をカード内で sticky にし、金額を読む間ずっと見えるようにする
   (2) 金額の直前に「Sプラン の月額」とプラン名を併記し、単体で切り取られても分かるようにする
       （視覚的な補助であり、読み上げでは重複するので aria-hidden にする）*/
@media only screen and (max-width:767px){
	.nt-plan-col{
		position:relative;
	}
	.nt-plan-col .nt-plan-head{
		position:sticky;
		top:56px;              /* 固定ヘッダーの下に潜り込ませない */
		z-index:3;
	}
	/* 金額の上に出す小見出し。PCでは冗長なのでSPのみ表示 */
	.nt-plan-monthly::before{
		content:attr(data-plan) " の";
		font-weight:900;
		color:#16283F;
	}
}

/* ---- MV・見出しのSP調整（20260803 五月女FB）--------------------------
   実測(390px)で判明した3点:
   (1) ワードマークが左寄り
       img が display:block・margin:0 のため、親の text-align:center が効かない
       （左空き0px / 右空き78px）。ブロック要素は margin:auto で中央に置く。
   (2) キャッチの「も。」だけが次行に落ちる
       <br>前の「デザインも、コーディングも、ライティングも。」が1行に収まらず
       245px→140px の2行に折れていた。SPでは<br>を無効化し、
       word-break:auto-phrase に任せて文節で自然に折る。
   (3) 「複数案件を、<br>同時に進められる」等の見出しも同様に<br>が不要
       幅に余裕があるのに強制改行されていた。SPでは無効化する。 */
@media only screen and (max-width:767px){
	/* ワードマーク画像だけを中央に。
	   ※以前 .nt-mv-txt img と広く指定したところ、MVのCTAボタン内の
	     矢印アイコン(.nt-btn-ico)にも当たり margin:0 89px が付いて
	     アイコンだけ左へ飛んでいた。対象を画像ファイル名で限定する。 */
	img[src*="mv-txt"]{
		margin-left:auto;
		margin-right:auto;
	}
	/* ボタン内アイコンは flex の gap で並ぶので余白を付けない */
	.nt-btn img,
	.nt-btn-ico{
		margin-left:0;
		margin-right:0;
	}
	/* 見出しは幅に余裕があるので強制改行をやめる */
	.nt-why-ttl br{
		display:none;
	}
	.nt-mv-catch,
	.nt-why-ttl{
		word-break:auto-phrase;
	}
	/* キャッチの<br>は2文の区切りなので残す（消すと
	   「ライティングも。専任チームが、」と2文が繋がって読みにくい）。
	   代わりに文字を詰めて1文目が2行に折れないようにする。 */
	.nt-mv-catch{
		font-size:16px;
		letter-spacing:0;
	}
}

/* ---- 下層ページ：固定バー(.nt-fixbar)の逃げ（20260803）-----------------
   .nt-fixbar は position:fixed; bottom:0 で画面下に常時貼り付く。
   トップは .nt-footer{padding-bottom:96px} で逃がしているが、
   下層は本文（旧デザインの .contents / main 等）が固定バーの下に潜り、
   記事カードにバーが重なって見えていた。
   下層だけ本文末尾に逃げの余白を足す（トップには .nt-lower が付かない）。 */
body.nt-lower .footer_wrap,
body.nt-lower footer,
body.nt-lower .nt-footer{
	padding-bottom:96px;
}
body.nt-lower{
	/* 本文最下部が固定バーに隠れないようにする保険 */
	padding-bottom:0;
}
@media only screen and (max-width:767px){
	body.nt-lower .nt-footer{padding-bottom:112px;}
}

/* ---- 下層ページ：旧global.cssの打ち消し（20260803）--------------------
   実測: 下層のヘッダーが96px、トップは72pxで24px高かった。
   原因は旧 global.css:127 の header{padding:23px 0}。
   新ヘッダー(.nt-header-in)は自前でpaddingを持つので、素のheaderへの
   指定は不要。下層(.nt-lower)でのみ打ち消してトップと高さを揃える。 */
body.nt-lower header.nt-header{
	padding:0;
	border-bottom:none;
}
/* 旧CSSは header を fixed にしているため、本文が潜らないよう
   下層だけ本文先頭に逃げを作る（トップは .nt-mv が自前で持っている）*/
body.nt-lower{
	padding-top:0;
}

/* ---- ブログのカテゴリタグをカラー規定内に統一（20260803 五月女承認）----
   従来: 基礎知識#4593d0 / デザイン#0abebf / トレンド#df6782 / 技術#5b6183 の4色。
        いずれもカラー規定に無い色で、しかも白文字とのコントラストは
        3.31 / 2.30 / 3.28 と4色中3色がWCAG AA(4.5:1)未達だった
        （記事カード上は12pxなのでさらに不利）。「未分類」に至っては
        色指定自体が無く、背景なしで白文字＝ほぼ不可視。
   方針: カテゴリは文字ラベルで判別できるので色で区別しない。
        ベージュ地＋締め色文字の1色に統一する（対#16283F で 10.93:1）。
        選択中/ALL のみアクセント濃で状態を示す（6.39:1）。 */
.blog_filtrate ul li a.blog-all,
.blog_filtrate ul li a.blog-knowledge,
.blog_filtrate ul li a.blog-design,
.blog_filtrate ul li a.blog-trend,
.blog_filtrate ul li a.blog-technology,
.blog-knowledge,
.blog-design,
.blog-trend,
.blog-technology,
.blog_tab ul li{
	background-color:#E4DCCB !important;
	color:#16283F !important;
}
/* フィルタの選択中（ALL）とホバーはアクセント濃で状態を示す */
/* フィルタは class 無しの li a も対象（HTML側でカテゴリclassが付くのはALLだけ） */
.blog_filtrate ul li a{
	background-color:#E4DCCB !important;
	color:#16283F !important;
}
.blog_filtrate ul li a.blog-all{
	background-color:#B8A88A !important;
}
.blog_filtrate ul li a:hover{
	background-color:#B8A88A !important;
	color:#16283F !important;
}
/* 未分類は色指定が無く白文字で消えていた。枠線だけの控えめな扱いにする */
.blog_tab ul li.uncategorized{
	background-color:transparent !important;
	color:#54606F !important;
	border:1px solid #CFC4AE;
}

/* works（制作実績）のカテゴリタグ ------------------------------------
   ブログ側（上のブロック）は既にベージュ1色に統一済みだったが、
   works 側は works.css の5色（水色/青緑/ピンク/緑/グレー紫）が残っていて、
   同じ役割のタグがページによって見た目が違う状態だった。
   タグには文字が入っていて、絞り込みは上部フィルタで行うため、
   色でカテゴリを見分ける必要はない。ブログと同じ扱いに揃える。
   なお旧5色は白文字で 2.30〜3.72:1 と WCAG AA 未達だった。
   ベージュ地＋締め色文字なら 10.93:1 で余裕をもって満たす。 */
.works_filtrate ul li a,
.works_filtrate ul li a.works-all,
.works_filtrate ul li a.works-web,
.works_filtrate ul li a.works-edm,
.works_filtrate ul li a.works-banner,
.works_filtrate ul li a.works-dtp,
.works_filtrate ul li a.works-lp,
.works_filtrate ul li a.works-other,
.works,
.works-web,
.works-edm,
.works-banner,
.works-dtp,
.works-lp,
.works-other,
.workspage_tab ul li{
	background-color:#E4DCCB !important;
	color:#16283F !important;
}
/* フィルタの選択中（ALL）とホバーはアクセント濃で状態を示す（ブログと同じ） */
.works_filtrate ul li a.works-all{
	background-color:#B8A88A !important;
}
.works_filtrate ul li a:hover{
	background-color:#B8A88A !important;
	color:#16283F !important;
}

/* ============================================================
   ブランドガイドライン準拠：青系カラーの統一（2026-08-04 五月女承認）

   背景：カンプ(jpg)から採取した値がそのまま変数化されており、
         ブランドガイドライン(20260220版)の正値と末尾1桁ズレていた。
         意図的な選定ではなく採取誤差・写し違いによる流入と実測で確認。
         またガイドラインに存在しない青が2色混在していた。

   方針：既存ルールは書き換えず、この追記ブロックのみで上書きする。
         ブロックを削除すれば完全に元へ戻る。

   ① 誤差ズレ3色 → ガイドライン正値へ
      --nt-blue       #004CA0 → #004DA0
      --nt-blue-mid   #4593D1 → #4593D0
      --nt-blue-light #BBDFF7 → #BBDFF6
   ② ガイドライン外の青2色を廃止し、確定色へ寄せる
      --nt-blue-deep  #114196 → #004DA0（案件名リンク。リンク＝ブランド青で統一）
      --nt-navy       #2A4D9E → #16283F（フッター地。2026-08-03の締め色規定に実装を合わせる）
   ③ 生書き #004da0 の5箇所を変数参照へ一本化
   ============================================================ */
:root{
	--nt-blue:        #004DA0;   /* ブランドメイン（ガイドライン正値） */
	--nt-blue-deep:   #004DA0;   /* 旧#114196。ブランド青へ統合 */
	--nt-blue-mid:    #4593D0;   /* 明部アクセント（ガイドライン正値） */
	--nt-blue-light:  #BBDFF6;   /* Brand Light Blue（ガイドライン正値） */
	--nt-navy:        #16283F;   /* 旧#2A4D9E。締め色へ統合 */
}

/* ---- ③ 生書き #004da0 を変数へ一本化 ---------------------------- */
.nt-fixbar{background:var(--nt-blue);}
.nt-fixbar-lead{color:var(--nt-blue);}
.nt-fixbar-lead::after{
	border-top-color:var(--nt-blue);
	border-bottom-color:var(--nt-blue);
}
.nt-form-kind-opt input{accent-color:var(--nt-blue);}
.nt-form-hint b{color:var(--nt-blue);}

/* ---- ④ 変数を経由しない生書きの旧色を潰す（2026-08-04 追補） -------
   ①〜③は :root の再定義で効くが、以下は変数を使わず直値で書かれており
   末尾追記だけでは変わらないため個別に上書きする。
   実測で発見した3箇所（他は全てコメント文中の記述で描画に影響しない）。 */
.nt-ux-price-anchor a{color:var(--nt-blue);}                                  /* 旧 #004CA0 */
.nt-campaign-col:nth-child(3){background-color:var(--nt-blue-light)!important;} /* 旧 #BBDFF7 */
.nt-campaign-prices li:nth-child(3){background-color:var(--nt-blue-light)!important;} /* 旧 #BBDFF7 */


/* ============================================================
   CTAオレンジを #BF5700 へ是正（2026-08-04 五月女承認）

   背景：2026-08-03に「白文字が乗るCTA面は #BF5700（対白4.59:1）」と決定したが、
         実装には #CC5D17 が入っていた。#CC5D17 の実測は 対白 4.08:1 で
         WCAG AA(4.5:1) 未達。上のコメントにある「#CC5D17 = 4.59:1」は誤記。
         3サイト実測（DesignBox / HTMLメールサイト / 英語サイト）でも
         DesignBoxのCTA 6箇所すべてが 4.08 で未達だった。

   選定根拠：#BF5700 は #ED6C00 と 色相27°・彩度100% が完全一致し、
             明度だけを落とした関係にある＝ブランドオレンジとして正統。
             #CC5D17 は H23° S80% でガイドラインから色相・彩度ともにズレていた
             （#ED6C00 との色差 ΔE 15.8＝別の色レベル）。

   対白コントラスト：#BF5700 = 4.59:1 ✔AA / #CC5D17 = 4.08:1 ✖ / #ED6C00 = 3.11:1 ✖

   ※アクセント用途の #EC6C00 / #ED6C00（罫線・アイコン・丸）は据え置き。
     白文字が乗らずAA対象外で、ブランドの明るさを保つため（2026-08-03の判断を踏襲）。
   ============================================================ */
:root{
	--nt-cta: #BF5700;   /* CTA専用（白文字が乗る面）対白 4.59:1 ✔WCAG AA */
}

/* 価格アンカーの数値。白地に乗るテキストのため同じく #BF5700 へ（対白 4.59:1）。
   旧 #CC5D17 は 4.08 で、20px/700 の大文字例外に頼らないと通らなかった。 */
.nt-ux-price-anchor .nt-ux-price-val{color:var(--nt-cta);}


/* ============================================================
   料金プランの青をブランドガイドラインへ統一（2026-08-04 五月女承認）

   背景：料金プランはプラン別に色分けされており、そこで使われていた青
         13色すべてがブランドガイドライン外だった。カンプ由来の色が
         そのまま実装に残っていたもの。
         2026-08-04の青統一では --nt-* 変数と旧5色のみを対象にしたため、
         変数を経由しないこの一帯を取りこぼしていた。

   実測した未達（WCAG AA）：
     見出し地＋白文字(17px/700 → 4.5必要)
       S #4A9FB0 = 3.05 ✖ ／ M #3F8FCA = 3.50 ✖ ／ C #66B5E0 = 2.27 ✖
     時間帯の文字(14px/700 → 4.5必要)
       S #4A9FB0 on #E3F1F2 = 2.64 ✖ ／ M #3F8FCA on #E2EFF9 = 2.99 ✖
       C #3F8FCA on #E6F4FB = 3.12 ✖
     ＝計6箇所が未達（Lプランのみ元から達成していた）

   方針：プラン別の色分けを廃止し、ブランド青に統一する。
         プランの見分けは見出しの文言（Sプラン/Mプラン/…）が既に担っており、
         色で区別する必要がない。ブログのカテゴリタグを2026-08-03に
         ベージュ1色へ統一したのと同じ考え方。

   制約：ガイドラインの明部アクセント #4593D0 は白文字を乗せると 3.31 で
         未達のため、白文字が乗る面には使えない。よって面は #004DA0 に寄せ、
         淡色面には #BBDFF6（Brand Light Blue）＋ #004DA0 文字を使う。
   ============================================================ */

/* ---- 見出し（プラン名）：4色 → ブランド青に統一。白文字 8.17 ✔ ---- */
.nt-plan-col.is-s .nt-plan-head,
.nt-plan-col.is-m .nt-plan-head,
.nt-plan-col.is-l .nt-plan-head,
.nt-plan-col.is-c .nt-plan-head{background:var(--nt-blue);}

/* ---- 金額：3色 → ブランド青に統一。白地に 8.17 ✔ ---- */
.nt-plan-col.is-s .nt-plan-price,
.nt-plan-col.is-m .nt-plan-price,
.nt-plan-col.is-l .nt-plan-price{color:var(--nt-blue);}
.nt-plan-custom{color:var(--nt-blue);}

/* ---- 利用可能時間：淡色地4色 → Brand Light Blue。文字は 5.84 ✔ ---- */
.nt-plan-col.is-s .nt-plan-hours,
.nt-plan-col.is-m .nt-plan-hours,
.nt-plan-col.is-l .nt-plan-hours,
.nt-plan-col.is-c .nt-plan-hours{
	background:var(--nt-blue-light);
	color:var(--nt-blue);
}
.nt-plan-hours .nt-plan-hem{color:var(--nt-blue);}

/* ---- 「12ヶ月契約の月額」ラベル：#9FD2EA枠 + #2B7CC4文字 → 規定色へ ---- */
.nt-plan-monthly{
	border-color:var(--nt-blue-mid);
	color:var(--nt-blue);
}

/* ---- 罫線・区切り：#DBEAF5 / #B9D9EE → Brand Light Blue ---- */
.nt-plan-col{border-right-color:var(--nt-blue-light);}
.nt-plan-price{border-bottom-color:var(--nt-blue-light);}
@media only screen and (max-width:767px){
	.nt-plan-col{border-bottom-color:var(--nt-blue-light);}
}

/* ---- 繰り越し帯：#DCEEFA → Brand Light Blue。文字は締め色で 10.64 ✔ ---- */
.nt-plan-carry{
	background:var(--nt-blue-light);
	color:#16283F;
}

/* ============================================================
   2026-08-04 QC修正：同意チェックボックスのタップ領域
   ------------------------------------------------------------
   経緯：856行で WCAG 2.5.8 対応として 24x24 にしたが、
   2703行の「天地ズレ修正」(18px) が後勝ちで打ち消していた。
   実測 18x18 = WCAG 2.5.8 (24px) 未達。
   ここでは 24px を回復しつつ、ズレは top のハックではなく
   flex の align-items:center で解決する（ラベルは1行目基準）。
   ============================================================ */
.nt-form-privacy{
	align-items:center;
}
.nt-form-privacy input[type="checkbox"]{
	width:24px;height:24px;flex:0 0 24px;
	top:0;
	cursor:pointer;
}
.nt-form-privacy label{
	padding-top:0;
	cursor:pointer;
}

/* ============================================================
   ボーダー色をガイドライン規定へ統一（2026-08-06）
   DesignBox Brand Guideline Ver.2.1 SECTION 04：
   「ボーダー #E2DCD0 ＝カード枠・区切り線。青みのグレーは使わない」

   実描画で確認した規定違反は次の2箇所のみ（CSS上の #d9e3ee 8件の大半は
   後方ブロックに上書きされて既に死んでいた）：
     ・.nt-movie-box       … 四辺 #D9E3EE（青みグレー）
     ・.nt-plan-col の列境界 … #BBDFF6（水色）

   触らないもの：
     ・.nt-assurance li の上辺3px（#B8A88A のアクセント＝意図的な強調）
     ・.nt-plan-monthly の枠（#4593D0＝ブランド青系のアクセント。
       無彩色寄りの「青みグレー」ではないため規定の禁止対象外・五月女確認済）
   ============================================================ */
:root{ --nt-border:#E2DCD0; }
.nt-movie-box{ border-color:#E2DCD0; }
.nt-plan-col{ border-color:#E2DCD0; }
.nt-plan-hours{ border-top-color:#E2DCD0; }
.nt-plan-carry{ border-color:#E2DCD0; }
.nt-assurance li{
	border-right-color:#E2DCD0;
	border-bottom-color:#E2DCD0;
	border-left-color:#E2DCD0;
}
.nt-voice-item{ border-color:#E2DCD0; }