/* /become-a-distributor/ and /become-a-distributor/apply/ only
   (enqueued by mu-plugins/utj-distributor.php).

   Layout ported from the Claude Design mock
   SK.INC/usedtirejapan-web-data/SK-Become-a-Distributor-1a.html, rebuilt to
   stack on narrow screens. Every rule is scoped under .utj-dist-page. The
   landing page avoids the theme's .section class entirely, because
   `.page .section h2 { font-size: 3rem }` (0,2,1) would override the headings. */

.utj-dist-page {
	--dest-navy: #16273f;
	--dest-accent: #2f5d8a;
	--dest-border: #dde3ea;
	--dest-radius: 12px;
	--dest-ink: #4a5566;
	--dlp-muted: #7a8594;
	--dlp-tint: #f1f4f8;
}

/* === landing ============================================================= */

/* --- hero ---------------------------------------------------------------- */

/* ロゴと見出しの間を空ける（2026-10-12 指摘）。
   .secondary-mv は transform:translate(0,-60px) で固定ヘッダーの下へ潜るが、
   place-content:center のままだと中身も60px上がり、見出しがロゴに貼り付く。
   上だけ余白を足して中身を下げる（高さは min-height が吸収する）。 */
/* **このヒーローの place-content は center ではなく start。**
   中身は上から積まれるので、見出しの位置は padding-top がそのまま決める
   （実測: 箱の上端 -28px ＋ padding で h1 の位置が決まっていた）。
   ヘッダーのロゴ下端が約68pxなので、その下に余白が残る高さにする。 */
.utj-dist-page .utj-dlp-hero {
	min-height: clamp(400px, 44vw, 540px);
	padding-top: clamp(110px, 12vw, 150px);
	padding-bottom: clamp(24px, 3vw, 40px);
}

/* パンくずはヒーローの下端へ（2026-10-12 指示）。
   grid の place-content:start では最後の要素を下へ押せない（margin-top:auto が効かない）ので、
   絶対配置にする。左位置はヒーローの padding に合わせれば見出しと揃う。
   下端の波（.secondary-mv::before、高さ60px）に重ならない位置に置く。 */
.utj-dist-page .utj-dlp-hero .utj-dest-breadcrumb {
	position: absolute;
	left: 0;
	bottom: clamp(26px, 3.4vw, 42px);
	margin: 0;
	padding-left: inherit;
}

.utj-dist-page .utj-dlp-hero .utj-dlp-hero__cta { position: relative; z-index: 1; margin: .6rem 0 .2rem; }

.utj-dist-page .utj-dlp-btn {
	display: inline-flex;
	align-items: center;
	gap: .9rem;
	padding: 1.05rem 1.8rem;
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.3;
	color: #fff;
	background: var(--dest-navy);
	text-decoration: none;
	transition: background-color .15s;
}
.utj-dist-page .utj-dlp-btn:hover { color: #fff; background: var(--dest-accent); }
.utj-dist-page .utj-dlp-btn span { font-size: 1.2rem; line-height: 1; }
.utj-dist-page .utj-dlp-btn--light { color: var(--dest-navy); background: #fff; }
.utj-dist-page .utj-dlp-btn--light:hover { color: #fff; background: var(--dest-navy); }

/* --- page frame ---------------------------------------------------------- */

/* Same inset as the other lower pages: their content sits in
   .section > .container > .row > .col-12, which adds 24px a side. */
.utj-dist-page .utj-dlp {
	padding: 1rem 24px 0;
	color: var(--dest-navy);
	word-break: normal;
	overflow-wrap: break-word;
}
.utj-dist-page .utj-dlp-sec { margin: 0 0 5.5rem; }

.utj-dist-page .utj-dlp .utj-dlp-eyebrow {
	margin: 0 0 .6rem;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--dest-accent);
	font-size: .92rem;
}
.utj-dist-page .utj-dlp .utj-dlp-h2 {
	margin: 0 0 1rem;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.7rem);
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
	color: var(--dest-navy);
}
.utj-dist-page .utj-dlp .utj-dlp-lead {
	max-width: 46em;
	margin: 0 0 2.2rem;
	font-size: 1.15rem;
	line-height: 1.8;
	color: var(--dest-ink);
}

/* --- 01 network ---------------------------------------------------------- */

.utj-dist-page .utj-dlp-net {
	display: grid;
	grid-template-columns: auto 48px minmax(0, 1fr);
	align-items: center;
}
.utj-dist-page .utj-dlp-skbox {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	padding: 1.6rem 1.3rem;
	color: #fff;
	background: var(--dest-navy);
}
.utj-dist-page .utj-dlp-skbox__k { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.utj-dist-page .utj-dlp-skbox__v { font-family: 'Roboto Condensed', sans-serif; font-size: 2.1rem; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.utj-dist-page .utj-dlp-skbox__d { font-size: .95rem; line-height: 1.5; opacity: .85; }

/* The branch: a stub out of the SK box and a vertical spine; each row draws
   its own stub and arrowhead (::before / ::after). */
.utj-dist-page .utj-dlp-net__branch { position: relative; align-self: stretch; }
.utj-dist-page .utj-dlp-net__branch::before {
	content: "";
	position: absolute;
	left: 0;
	right: 50%;
	top: 50%;
	border-top: 2px solid var(--dest-navy);
}
.utj-dist-page .utj-dlp-net__branch::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 16.6%;
	bottom: 16.6%;
	border-left: 2px solid var(--dest-navy);
}
.utj-dist-page .utj-dlp-net__rows { display: flex; flex-direction: column; gap: .9rem; margin: 0; padding: 0; list-style: none; }
.utj-dist-page .utj-dlp-net__row {
	position: relative;
	display: grid;
	grid-template-columns: auto 30px minmax(0, 1fr);
	align-items: center;
	margin: 0;
	padding-left: 24px;
}
.utj-dist-page .utj-dlp-net__row::before {
	content: "";
	position: absolute;
	left: -24px;
	width: 38px;
	top: 50%;
	border-top: 2px solid var(--dest-navy);
}
.utj-dist-page .utj-dlp-net__row::after {
	content: "";
	position: absolute;
	left: 14px;
	top: calc(50% - 6px);
	border-left: 8px solid var(--dest-navy);
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
}
.utj-dist-page .utj-dlp-dbox {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	padding: .8rem 1rem;
	background: #fff;
	border: 2px solid var(--dest-navy);
}
.utj-dist-page .utj-dlp-dbox__k { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dest-accent); }
.utj-dist-page .utj-dlp-dbox__v { font-family: 'Roboto Condensed', sans-serif; font-size: 1.4rem; font-weight: 700; white-space: nowrap; }
.utj-dist-page .utj-dlp-dbox__d { font-size: .92rem; color: var(--dest-ink); }
.utj-dist-page .utj-dlp-net__dash { border-top: 2px dashed #9aa6b5; }
.utj-dist-page .utj-dlp-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.utj-dist-page .utj-dlp-chip {
	padding: .5rem .75rem;
	font-size: 1rem;
	font-weight: 600;
	background: var(--dlp-tint);
	border: 1px solid var(--dest-border);
}

/* Goods and money, left to right. */
.utj-dist-page .utj-dlp-flow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 130px minmax(0, 1fr) 130px minmax(0, 1fr);
	align-items: center;
	margin: 2rem 0 0;
	padding: 1.4rem 1.5rem;
	background: #f3f5f8;
}
.utj-dist-page .utj-dlp-flow__box { display: flex; flex-direction: column; gap: .1rem; padding: .8rem 1rem; }
.utj-dist-page .utj-dlp-flow__box strong { font-family: 'Roboto Condensed', sans-serif; font-size: 1.45rem; white-space: nowrap; }
.utj-dist-page .utj-dlp-flow__box span { font-size: .95rem; }
.utj-dist-page .utj-dlp-flow__box--sk { color: #fff; background: var(--dest-navy); }
.utj-dist-page .utj-dlp-flow__box--d { background: #fff; border: 2px solid var(--dest-navy); }
.utj-dist-page .utj-dlp-flow__box--d span,
.utj-dist-page .utj-dlp-flow__box--c span { color: var(--dest-ink); }
.utj-dist-page .utj-dlp-flow__box--c { background: #fff; border: 1px solid #c9d1dc; }
.utj-dist-page .utj-dlp-flow__arrows { display: flex; flex-direction: column; gap: .4rem; padding: 0 .5rem; }
.utj-dist-page .utj-dlp-flow__a {
	display: flex;
	align-items: center;
	gap: .35rem;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--dest-navy);
}
.utj-dist-page .utj-dlp-flow__a i { flex: 1; border-top: 2px solid currentColor; }
.utj-dist-page .utj-dlp-flow__a b { font-size: .6rem; font-weight: 400; }
.utj-dist-page .utj-dlp-flow__a--back { color: var(--dest-accent); }
.utj-dist-page .utj-dlp-flow__a--back i { border-top-style: dashed; }
.utj-dist-page .utj-dlp .utj-dlp-flow__note { grid-column: 1 / -1; margin: 1.1rem 0 0; font-size: 1.02rem; line-height: 1.6; color: var(--dest-ink); }
.utj-dist-page .utj-dlp-flow__note strong { color: var(--dest-navy); }

/* --- 02 roles ------------------------------------------------------------ */

.utj-dist-page .utj-dlp-roles {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1fr);
	margin: 1.5rem 0 0;
	border: 1px solid var(--dest-border);
}
.utj-dist-page .utj-dlp-roles__col { padding: 1.6rem; }
.utj-dist-page .utj-dlp-roles__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin: 0 0 1rem;
	padding: 0 0 .6rem;
	border-bottom: 3px solid var(--dest-navy);
}
.utj-dist-page .utj-dlp-roles__col--d .utj-dlp-roles__head { border-bottom-color: var(--dest-accent); }
.utj-dist-page .utj-dlp-roles__t { font-family: 'Roboto Condensed', sans-serif; font-size: 1.75rem; font-weight: 700; }
.utj-dist-page .utj-dlp-roles__where { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dlp-muted); }
.utj-dist-page .utj-dlp-roles__list { margin: 0; padding: 0; list-style: none; }
.utj-dist-page .utj-dlp-roles__list li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .5rem; margin: 0 0 1rem; }
.utj-dist-page .utj-dlp-roles__list li:last-child { margin-bottom: 0; }
.utj-dist-page .utj-dlp-roles__n { font-family: 'Roboto Condensed', sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--dest-accent); }
.utj-dist-page .utj-dlp-roles__list strong { display: block; font-size: 1.12rem; }
.utj-dist-page .utj-dlp-roles__list div span { display: block; font-size: 1rem; line-height: 1.55; color: var(--dest-ink); }
.utj-dist-page .utj-dlp-roles__mid {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	padding: 1.2rem .6rem;
	text-align: center;
	background: var(--dlp-tint);
	border-left: 1px solid var(--dest-border);
	border-right: 1px solid var(--dest-border);
}
.utj-dist-page .utj-dlp-roles__midk { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dlp-muted); }
.utj-dist-page .utj-dlp-container {
	display: block;
	width: 64px;
	height: 40px;
	border: 2px solid var(--dest-navy);
	background: repeating-linear-gradient(90deg, var(--dest-navy) 0 2px, transparent 2px 8px);
}
.utj-dist-page .utj-dlp-roles__mid strong { font-family: 'Roboto Condensed', sans-serif; font-size: 1.25rem; line-height: 1.2; }
.utj-dist-page .utj-dlp-roles__midarrow { font-size: 1.4rem; line-height: 1; }
.utj-dist-page .utj-dlp-roles__midd { font-size: .88rem; line-height: 1.4; color: var(--dest-ink); }

/* --- 03 steps ------------------------------------------------------------ */

.utj-dist-page .utj-dlp-steps { margin: 1.8rem 0 0; }
.utj-dist-page .utj-dlp-steps__row {
	display: grid;
	grid-template-columns: 200px repeat(4, minmax(0, 1fr));
	align-items: center;
	border-bottom: 1px solid var(--dest-border);
}
.utj-dist-page .utj-dlp-steps__row--head { border-bottom: 0; }
.utj-dist-page .utj-dlp-steps__row > span { padding: .85rem .7rem; }
.utj-dist-page .utj-dlp-steps__row--head > span { padding: 0; }
.utj-dist-page .utj-dlp-steps__row--head > .utj-dlp-chev { padding: .9rem 1rem .9rem 1.6rem; }
.utj-dist-page .utj-dlp-steps__label { font-size: .88rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dlp-muted); }

.utj-dist-page .utj-dlp-chev {
	display: flex;
	flex-direction: column;
	margin-right: 4px;
	padding: .9rem 1rem .9rem 1.6rem;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.2;
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
}
.utj-dist-page .utj-dlp-chev small { font-family: 'Noto Sans', sans-serif; font-size: .78rem; font-weight: 700; opacity: .75; }
.utj-dist-page .utj-dlp-chev--1 { color: var(--dest-navy); background: #e8edf3; }
.utj-dist-page .utj-dlp-chev--2 { color: var(--dest-navy); background: #c9d4e2; }
.utj-dist-page .utj-dlp-chev--3 { color: #fff; background: var(--dest-accent); }
.utj-dist-page .utj-dlp-chev--4 { color: #fff; background: var(--dest-navy); }

.utj-dist-page .utj-dlp-cell { display: inline-flex; align-items: center; gap: .45rem; font-size: 1.08rem; font-weight: 600; line-height: 1.4; }
.utj-dist-page .utj-dlp-cell--none { color: #9aa6b5; font-weight: 400; }
.utj-dist-page .utj-dlp-dot { display: inline-block; flex: none; width: .7rem; height: .7rem; border-radius: 50%; background: var(--dest-accent); }

.utj-dist-page .utj-dlp-stepcards { display: none; }

.utj-dist-page .utj-dlp .utj-dlp-legend { margin: .8rem 0 0; font-size: .92rem; color: var(--dlp-muted); }
.utj-dist-page .utj-dlp-legend .utj-dlp-dot { width: .6rem; height: .6rem; background: var(--dlp-muted); vertical-align: middle; }
.utj-dist-page .utj-dlp .utj-dlp-note {
	margin: 1.2rem 0 0;
	padding: 1.1rem 1.4rem;
	font-size: 1.02rem;
	line-height: 1.65;
	color: var(--dest-ink);
	background: var(--dlp-tint);
}
.utj-dist-page .utj-dlp-note strong { color: var(--dest-navy); }

/* --- 04 looking for ------------------------------------------------------ */

.utj-dist-page .utj-dlp-look {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 2.4rem;
	padding: 2.4rem;
	color: #fff;
	background: var(--dest-navy);
}
.utj-dist-page .utj-dlp .utj-dlp-eyebrow--light { color: #9ec0e6; }
.utj-dist-page .utj-dlp .utj-dlp-h2--light { margin: 0; color: #fff; }
.utj-dist-page .utj-dlp-look__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .9rem 1.8rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.utj-dist-page .utj-dlp-look__list li { display: flex; gap: .7rem; margin: 0; font-size: 1.1rem; line-height: 1.55; }
/* Drawn rather than typed: the site fonts have no check glyph, and the
   fallback rendered it as a tiny "v". */
.utj-dist-page .utj-dlp-check {
	position: relative;
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: .15rem;
	font-size: 0;
	background: #fff;
}
.utj-dist-page .utj-dlp-check::after {
	content: "";
	position: absolute;
	left: .42rem;
	top: .18rem;
	width: .36rem;
	height: .66rem;
	border-right: 3px solid var(--dest-navy);
	border-bottom: 3px solid var(--dest-navy);
	transform: rotate(45deg);
}

/* --- 05 faq -------------------------------------------------------------- */

.utj-dist-page .utj-dlp-faq { margin: .8rem 0 0; border-top: 1px solid var(--dest-border); }
.utj-dist-page .utj-dlp-faq details { padding: 1.05rem 0; border-bottom: 1px solid var(--dest-border); }
.utj-dist-page .utj-dlp-faq summary {
	display: flex;
	align-items: center;
	gap: .75rem;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.5;
	cursor: pointer;
	list-style: none;
}
.utj-dist-page .utj-dlp-faq summary::-webkit-details-marker { display: none; }
.utj-dist-page .utj-dlp-faq summary::before { content: "\25B6"; flex: none; font-size: .65rem; transition: transform .2s; }
.utj-dist-page .utj-dlp-faq details[open] summary::before { transform: rotate(90deg); }
.utj-dist-page .utj-dlp .utj-dlp-faq p { max-width: 46em; margin: .6rem 0 0 1.4rem; font-size: 1.05rem; line-height: 1.65; color: var(--dest-ink); }

/* --- closing cta --------------------------------------------------------- */

.utj-dist-page .utj-dlp-end {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem 2rem;
	padding: 2.8rem 0 5rem;
	border-top: 3px solid var(--dest-navy);
}
.utj-dist-page .utj-dlp .utj-dlp-end__t { margin: 0 0 .35rem; font-family: 'Roboto Condensed', sans-serif; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 700; }
.utj-dist-page .utj-dlp .utj-dlp-end__d { margin: 0; font-size: 1.1rem; color: var(--dest-ink); }

/* --- colour ---------------------------------------------------------------
   Brighter than the rest of the site but kept muted (owner's call, 2026-09-29:
   first "brighter", then "a little calmer").
   One colour per role, used the same way in every diagram:
     SK = blue, distributor = teal, local customers / calls to action = orange.
   Headings stay dark navy for legibility. Where a component draws its lines
   with var(--dest-navy), the variable is re-pointed inside that component
   instead of rewriting each rule. */

.utj-dist-page {
	--dlp-blue: #3a6ea8;
	--dlp-blue-deep: #2a5588;
	--dlp-teal: #3f8f86;
	--dlp-teal-deep: #2f7068;
	--dlp-orange: #d9823f;
	--dlp-orange-deep: #bd6a2c;
	--dlp-sky: #f1f5fa;
	--dest-accent: #3a6ea8;
	--dlp-tint: #f1f5fa;
	--dest-border: #dde5ee;
}

/* buttons */
.utj-dist-page .utj-dlp-btn,
.utj-dist-page .utj-dlp-btn--light { color: #fff; background: var(--dlp-orange); box-shadow: 0 6px 16px rgba(217, 130, 63, .18); }
.utj-dist-page .utj-dlp-btn:hover,
.utj-dist-page .utj-dlp-btn--light:hover { color: #fff; background: var(--dlp-orange-deep); }

/* 01 network */
.utj-dist-page .utj-dlp-net { --dest-navy: var(--dlp-blue); }
.utj-dist-page .utj-dlp-skbox {
	background: linear-gradient(135deg, var(--dlp-blue) 0%, var(--dlp-blue-deep) 100%);
	box-shadow: 0 8px 20px rgba(42, 85, 136, .16);
}
.utj-dist-page .utj-dlp-dbox { border-color: var(--dlp-teal); box-shadow: none; }
.utj-dist-page .utj-dlp-dbox__k { color: var(--dlp-teal); }
.utj-dist-page .utj-dlp-dbox__v { color: #10213f; }
.utj-dist-page .utj-dlp-net__dash { border-top-color: #e3b894; }
.utj-dist-page .utj-dlp-chip { color: #9a5a26; background: #faf3ec; border-color: #ecd6c1; }

/* flow */
.utj-dist-page .utj-dlp-flow { background: var(--dlp-sky); }
.utj-dist-page .utj-dlp-flow__box--sk { background: linear-gradient(135deg, var(--dlp-blue) 0%, var(--dlp-blue-deep) 100%); }
.utj-dist-page .utj-dlp-flow__box--d { border-color: var(--dlp-teal); }
.utj-dist-page .utj-dlp-flow__box--d strong { color: var(--dlp-teal-deep); }
.utj-dist-page .utj-dlp-flow__box--c { border: 2px solid #e3b894; }
.utj-dist-page .utj-dlp-flow__box--c strong { color: #a85f27; }
.utj-dist-page .utj-dlp-flow__a { color: var(--dlp-blue); }
.utj-dist-page .utj-dlp-flow__a--back { color: var(--dlp-teal); }

/* 02 roles */
.utj-dist-page .utj-dlp-roles { border-color: var(--dest-border); box-shadow: 0 8px 24px rgba(42, 85, 136, .06); }
.utj-dist-page .utj-dlp-roles__head { border-bottom-color: var(--dlp-blue); }
.utj-dist-page .utj-dlp-roles__col--d .utj-dlp-roles__head { border-bottom-color: var(--dlp-teal); }
.utj-dist-page .utj-dlp-roles__col--d .utj-dlp-roles__n { color: var(--dlp-teal); }
.utj-dist-page .utj-dlp-roles__mid { --dest-navy: var(--dlp-blue); background: var(--dlp-sky); }
.utj-dist-page .utj-dlp-roles__mid strong { color: var(--dlp-blue-deep); }

/* 03 steps: the last step is the one worth earning. */
.utj-dist-page .utj-dlp-chev--1 { color: var(--dlp-blue-deep); background: #e9eff7; }
.utj-dist-page .utj-dlp-chev--2 { color: var(--dlp-blue-deep); background: #cbdaec; }
.utj-dist-page .utj-dlp-chev--3 { color: #fff; background: var(--dlp-blue); }
.utj-dist-page .utj-dlp-chev--4 { color: #fff; background: linear-gradient(135deg, #e0945a 0%, var(--dlp-orange-deep) 100%); }
.utj-dist-page .utj-dlp .utj-dlp-note { background: #faf5ef; border-left: 4px solid var(--dlp-orange); }

/* 04 looking for */
.utj-dist-page .utj-dlp-look {
	--dest-navy: var(--dlp-blue);
	background: linear-gradient(120deg, var(--dlp-blue) 0%, var(--dlp-blue-deep) 100%);
	box-shadow: 0 10px 26px rgba(42, 85, 136, .16);
}
.utj-dist-page .utj-dlp .utj-dlp-eyebrow--light { color: #cddbeb; }

/* 05 faq + closing */
.utj-dist-page .utj-dlp-faq summary::before { color: var(--dlp-blue); }
.utj-dist-page .utj-dlp-end { border-top-color: var(--dlp-blue); }

/* application page */
.utj-dist-page .utj-dist-form input[type="submit"].wpcf7-submit { background: var(--dlp-orange); }
.utj-dist-page .utj-dist-form input[type="submit"].wpcf7-submit:hover { background: var(--dlp-orange-deep); }
.utj-dist-page .utj-dist-received { border-left-color: var(--dlp-teal); }
.utj-dist-page .utj-dist-received__eyebrow { color: var(--dlp-teal-deep); }

/* --- diagrams ------------------------------------------------------------ */
/* Full content width (owner's call, 2026-09-29; an 80% version was tried). */

.utj-dist-page .utj-dlp-flow { margin-top: 2.2rem; }

/* PC: the buyer chips share the rest of the row, so the diagram reaches the
   right edge instead of stopping short. */
@media (min-width: 1200px) {
	.utj-dist-page .utj-dlp-chips { flex-wrap: nowrap; }
	.utj-dist-page .utj-dlp-chip { flex: 1 1 0; text-align: center; white-space: nowrap; }
}

/* --- landing: tablet ----------------------------------------------------- */

@media (max-width: 991px) {
	.utj-dist-page .utj-dlp-net__row { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
	.utj-dist-page .utj-dlp-net__dash { display: none; }
	/* The branch diagram stacks under the SK box from tablet width down. */
	.utj-dist-page .utj-dlp-net { grid-template-columns: minmax(0, 1fr); }
	.utj-dist-page .utj-dlp-net__branch { display: none; }
	/* One spine down the left: each row draws the stretch from the row above
	   (or the SK box) down to its own stub as an L, so the pieces join up. */
	.utj-dist-page .utj-dlp-net__rows { gap: .8rem; margin: 0; padding: 1.2rem 0 0 26px; }
	.utj-dist-page .utj-dlp-net__row { padding-left: 0; }
	.utj-dist-page .utj-dlp-net__row::before {
		left: -18px;
		top: -.8rem;
		bottom: 0;
		width: 0;
		border-top: 0;
		border-left: 2px solid var(--dest-navy);
	}
	.utj-dist-page .utj-dlp-net__row:first-child::before { top: -1.2rem; }
	.utj-dist-page .utj-dlp-net__row:last-child::before { bottom: auto; height: 3rem; }
	.utj-dist-page .utj-dlp-net__row:first-child:last-child::before { height: 3.4rem; }
	.utj-dist-page .utj-dlp-dbox { position: relative; }
	.utj-dist-page .utj-dlp-dbox::before {
		content: "";
		position: absolute;
		left: -20px;
		top: calc(2.2rem - 1px);
		width: 12px;
		border-top: 2px solid var(--dest-navy);
	}
	.utj-dist-page .utj-dlp-net__row::after { left: -9px; top: calc(2.2rem - 6px); }
	.utj-dist-page .utj-dlp-roles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.utj-dist-page .utj-dlp-roles__mid { grid-column: 1 / -1; grid-row: 2; flex-direction: row; flex-wrap: wrap; border: 0; border-top: 1px solid var(--dest-border); }
	.utj-dist-page .utj-dlp-roles__col--d { border-left: 1px solid var(--dest-border); }
	.utj-dist-page .utj-dlp-look { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
}

/* --- landing: phone ------------------------------------------------------ */
/* Everything that runs left to right runs top to bottom instead. */

@media (max-width: 767.98px) {
	.utj-dist-page .utj-dlp-sec { margin-bottom: 4rem; }

	.utj-dist-page .utj-dlp-chip { font-size: .8rem; padding: .35rem .6rem; }

	.utj-dist-page .utj-dlp-flow { grid-template-columns: minmax(0, 1fr); padding: 1.1rem; }
	.utj-dist-page .utj-dlp-flow__arrows { flex-direction: row; justify-content: center; gap: 1.6rem; padding: .55rem 0; }
	.utj-dist-page .utj-dlp-flow__a { flex-direction: column; gap: .15rem; }
	.utj-dist-page .utj-dlp-flow__a i { flex: none; width: 0; height: 22px; border-top: 0; border-left: 2px solid currentColor; }
	.utj-dist-page .utj-dlp-flow__a--back i { border-left-style: dashed; }
	.utj-dist-page .utj-dlp-flow__a b { transform: rotate(90deg); }
	.utj-dist-page .utj-dlp-flow__a--back { flex-direction: column-reverse; }

	.utj-dist-page .utj-dlp-roles { grid-template-columns: minmax(0, 1fr); }
	.utj-dist-page .utj-dlp-roles__col { padding: 1.2rem; }
	.utj-dist-page .utj-dlp-roles__mid { grid-row: auto; border-top: 1px solid var(--dest-border); border-bottom: 1px solid var(--dest-border); }
	.utj-dist-page .utj-dlp-roles__midarrow { transform: rotate(90deg); }
	.utj-dist-page .utj-dlp-roles__col--d { border-left: 0; }

	.utj-dist-page .utj-dlp-steps { display: none; }
	.utj-dist-page .utj-dlp-stepcards { display: flex; flex-direction: column; gap: 1rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
	.utj-dist-page .utj-dlp-stepcard { margin: 0; border: 1px solid var(--dest-border); }
	.utj-dist-page .utj-dlp-stepcard .utj-dlp-chev { margin: 0; clip-path: none; padding: .8rem 1rem; }
	.utj-dist-page .utj-dlp-stepcard dl { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); margin: 0; padding: .4rem 1rem .8rem; }
	.utj-dist-page .utj-dlp-stepcard dt,
	.utj-dist-page .utj-dlp-stepcard dd { margin: 0; padding: .45rem 0; border-bottom: 1px solid var(--dest-border); }
	.utj-dist-page .utj-dlp-stepcard dt { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--dlp-muted); }
	.utj-dist-page .utj-dlp-stepcard dt:last-of-type,
	.utj-dist-page .utj-dlp-stepcard dd:last-of-type { border-bottom: 0; }
	.utj-dist-page .utj-dlp-cell { font-size: .9rem; }

	.utj-dist-page .utj-dlp-look { padding: 1.6rem 1.2rem; }
	.utj-dist-page .utj-dlp-look__list { grid-template-columns: minmax(0, 1fr); }

	.utj-dist-page .utj-dlp-end { padding-bottom: 3.5rem; }
	.utj-dist-page .utj-dlp-end .utj-dlp-btn { width: 100%; justify-content: space-between; }
}

/* === application form ==================================================== */

/* --- application --------------------------------------------------------- */

.utj-dist-page .utj-dist-apply {
	margin: 0 0 4rem;
	padding: 2.2rem 2rem;
	background: #f4f7f9;
	border: 1px solid var(--dest-border);
	border-radius: var(--dest-radius);
	scroll-margin-top: 100px;
}
.utj-dist-page .section .utj-dist-apply__h {
	margin: 0 0 .4rem;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	line-height: 1.25;
	color: var(--dest-navy);
}
.utj-dist-page .utj-dist-apply__lead { margin: 0 0 1.5rem; color: var(--dest-ink); }

/* Something upstream caps .wpcf7 at 600px and centres it; this form is laid
   out in two columns and needs the full panel. */
.utj-dist-page .utj-dist-apply .wpcf7 { max-width: none; margin: 0; }

/* 「先に書類を用意して」の注意書き。フォームの一番上に出す。
   途中まで入力してから添付が3つ要ると気づくと、そこで離脱する。 */
.utj-dist-page .utj-dist-prep {
	margin: 0 0 1.4rem;
	padding: 1.2rem 1.4rem 1.1rem;
	background: #fff8ed;
	border: 1px solid #f0d9bb;
	border-left: 4px solid #d9823f;
	border-radius: 8px;
}
.utj-dist-page .utj-dist-prep p { margin: 0 0 .6rem; font-size: .93rem; line-height: 1.7; color: #6b4a22; }
.utj-dist-page .utj-dist-prep__t {
	font-family: Roboto, sans-serif;
	font-weight: 700;
	font-size: 1rem;
	color: #8a4d12;
}
.utj-dist-page .utj-dist-prep__req {
	margin: 0 0 .7rem;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: .35rem 1.2rem;
}
.utj-dist-page .utj-dist-prep__req li {
	position: relative;
	padding-left: 1.3rem;
	font-size: .92rem;
	line-height: 1.6;
	color: #6b4a22;
}
/* チェック記号はサイトのフォントに字形が無いのでCSSで描く（このページの他の印と同じ） */
.utj-dist-page .utj-dist-prep__req li::before {
	content: "";
	position: absolute;
	left: .15rem;
	top: .42em;
	width: .42rem;
	height: .72rem;
	border: solid #d9823f;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.utj-dist-page .utj-dist-prep__req b { color: #5a3a14; }
.utj-dist-page .utj-dist-prep__opt { margin-bottom: 0; font-size: .86rem; color: #8a7154; }

.utj-dist-page .utj-dist-form__intro p { margin: 0 0 1.4rem; font-size: .93rem; line-height: 1.7; color: var(--dest-ink); }

/* 「ライセンスと通関経験は Yes でないと受け付けない」の断り。section 7 の下 */
.utj-dist-page .utj-dist-note {
	margin: .9rem 0 0;
	padding: .75rem .9rem;
	font-size: .86rem;
	line-height: 1.7;
	color: #6b4a22;
	background: #fff8ed;
	border-radius: 6px;
}
.utj-dist-page .utj-dist-note a { color: #a4551a; text-decoration: underline; }

.utj-dist-page .utj-dist-fs {
	margin: 0 0 1.2rem;
	padding: 1.4rem 1.5rem 1.1rem;
	background: #fff;
	border: 1px solid var(--dest-border);
	border-radius: 10px;
	min-width: 0;
}
/* Bootstrap floats <legend> at full width, which puts it inside the box
   rather than on the border - keep that, and clear it so the checkbox chips
   that follow do not wrap around it. */
.utj-dist-page .utj-dist-fs legend {
	float: left;
	width: 100%;
	margin: 0 0 1rem;
	padding: 0;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--dest-navy);
}
.utj-dist-page .utj-dist-fs > legend + * { clear: both; }
.utj-dist-page .utj-dist-fs legend .utj-dist-hint { font-family: inherit; font-weight: 400; }

.utj-dist-page .utj-dist-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.2rem;
}
.utj-dist-page .utj-dist-f {
	display: block;
	margin: 0 0 .2rem;
	font-size: .9rem;
	font-weight: 600;
	color: var(--dest-navy);
	min-width: 0;
}
.utj-dist-page .utj-dist-f--wide { grid-column: 1 / -1; }
.utj-dist-page .utj-dist-f__label { display: block; margin-bottom: .2rem; }
.utj-dist-page .utj-dist-req { color: #b42318; }
.utj-dist-page .utj-dist-hint { font-size: .8rem; font-weight: 400; color: #6b7885; }
.utj-dist-page .utj-dist-f > .utj-dist-hint { display: block; margin-top: .3rem; }

/* CF7 wraps every control in an inline-block span; width:100% then does nothing. */
.utj-dist-page .utj-dist-form .wpcf7-form-control-wrap { display: block; width: 100%; margin-top: .35rem; }

.utj-dist-page .utj-dist-form input[type="text"],
.utj-dist-page .utj-dist-form input[type="email"],
.utj-dist-page .utj-dist-form input[type="tel"],
.utj-dist-page .utj-dist-form input[type="url"],
.utj-dist-page .utj-dist-form input[type="number"],
.utj-dist-page .utj-dist-form select,
.utj-dist-page .utj-dist-form textarea {
	display: block;
	width: 100%;
	padding: .6rem .75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #1f2933;
	background: #fff;
	border: 1px solid #c5ced8;
	border-radius: 6px;
	box-shadow: none;
}
.utj-dist-page .utj-dist-form textarea { min-height: 7.5rem; resize: vertical; }
.utj-dist-page .utj-dist-form input:focus,
.utj-dist-page .utj-dist-form select:focus,
.utj-dist-page .utj-dist-form textarea:focus {
	outline: 2px solid var(--dest-accent);
	outline-offset: 1px;
	border-color: var(--dest-accent);
}
/* JSが動かなかったとき用の素のファイル欄。distributor.js が自前のUIに
   差し替えたものには .is-utj-file が付き、下で入れ替わる。 */
.utj-dist-page .utj-dist-form input[type="file"] {
	display: block;
	width: 100%;
	padding: .45rem;
	font-size: .88rem;
	font-weight: 400;
	background: #fff;
	border: 1px dashed #c5ced8;
	border-radius: 6px;
}

/* 自前のファイル選択ボタン。
   ブラウザの「ファイルを選択／選択されていません」は**閲覧者の言語**で描かれるので、
   英語ページに日本語が出る（2026-10-12 指摘）。文言を自分で持つために差し替える。
   本物の input は DOM に残したまま見えなくするだけ ― name も required も
   CF7 の検証もそのまま効かせたいので、display:none にはしない。 */
.utj-dist-page .utj-dist-form input[type="file"].is-utj-file {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.utj-dist-page .utj-dist-form .utj-dist-file {
	display: flex;
	align-items: stretch;
	width: 100%;
	background: #fff;
	border: 1px dashed #c5ced8;
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
}
.utj-dist-page .utj-dist-form .utj-dist-file__btn {
	flex: none;
	padding: .5rem .9rem;
	font-size: .85rem;
	font-weight: 600;
	color: var(--dest-navy);
	background: #eef2f6;
	border-right: 1px dashed #c5ced8;
	white-space: nowrap;
}
.utj-dist-page .utj-dist-form .utj-dist-file__name {
	flex: 1 1 auto;
	min-width: 0;
	padding: .5rem .75rem;
	font-size: .85rem;
	color: #8a949f;
	/* 長いファイル名で欄が伸びないように省略する */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.utj-dist-page .utj-dist-form .utj-dist-file:hover .utj-dist-file__btn { background: #e3e9ef; }
.utj-dist-page .utj-dist-form .utj-dist-file.has-file { border-style: solid; border-color: #9fb3c8; }
.utj-dist-page .utj-dist-form .utj-dist-file.has-file .utj-dist-file__name { color: #1f2933; }
/* 本物の input にフォーカスが来たら、見えているほうに枠を出す */
.utj-dist-page .utj-dist-form .utj-dist-file.is-focus {
	outline: 2px solid var(--dest-accent);
	outline-offset: 1px;
	border-color: var(--dest-accent);
}

/* Checkbox groups: a wrapping row of chips. */
.utj-dist-page .utj-dist-form .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem .6rem;
	margin: 0 0 1rem;
}
.utj-dist-page .utj-dist-form .wpcf7-list-item { margin: 0; }
.utj-dist-page .utj-dist-form .wpcf7-checkbox label {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin: 0;
	padding: .45rem .8rem;
	font-size: .92rem;
	font-weight: 400;
	color: #1f2933;
	background: #fff;
	border: 1px solid #c5ced8;
	border-radius: 100px;
	cursor: pointer;
}
.utj-dist-page .utj-dist-form .wpcf7-checkbox label:has(input:checked) {
	border-color: var(--dest-navy);
	background: #eaf0f7;
}

.utj-dist-page .utj-dist-consent {
	margin: 1.4rem 0 .6rem;
	font-size: .93rem;
	line-height: 1.7;
	color: var(--dest-ink);
}
.utj-dist-page .utj-dist-consent .wpcf7-list-item { margin: 0; }
.utj-dist-page .utj-dist-consent label { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer; }
.utj-dist-page .utj-dist-consent input { margin-top: .35rem; flex-shrink: 0; }
.utj-dist-page .utj-dist-disclaimer { margin: 0 0 1.4rem; font-size: .85rem; line-height: 1.7; color: #6b7885; }

/* The theme leaves CF7's submit transparent - it disappears on this background. */
.utj-dist-page .utj-dist-form input[type="submit"].wpcf7-submit {
	display: inline-block;
	width: auto;
	padding: .9rem 2.8rem;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: #fff;
	background: var(--dest-navy);
	border: 0;
	border-radius: 100px;
	cursor: pointer;
	transition: background-color .15s;
}
.utj-dist-page .utj-dist-form input[type="submit"].wpcf7-submit:hover { background: var(--dest-accent); }
.utj-dist-page .utj-dist-form input[type="submit"].wpcf7-submit:disabled { opacity: .55; cursor: not-allowed; }
.utj-dist-page .utj-dist-submit { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.utj-dist-page .utj-dist-form .wpcf7-not-valid { border-color: #b42318; }
/* ファイル欄は本物の input を隠しているので、赤枠が見えない。
   隣の自前UIに付け替える（どの欄が足りないのか分からないと直せない）。 */
.utj-dist-page .utj-dist-form input[type="file"].wpcf7-not-valid + .utj-dist-file {
	border-color: #b42318;
	border-style: solid;
}
.utj-dist-page .utj-dist-form input[type="file"].wpcf7-not-valid + .utj-dist-file .utj-dist-file__btn {
	color: #b42318;
	background: #fdecea;
	border-right-color: #b42318;
}
.utj-dist-page .utj-dist-form .wpcf7-not-valid-tip { margin-top: .3rem; font-size: .82rem; font-weight: 400; color: #b42318; }
.utj-dist-page .utj-dist-form .wpcf7-response-output {
	margin: 1.2rem 0 0;
	padding: .8rem 1rem;
	font-size: .93rem;
	border-radius: 6px;
}

/* --- received ------------------------------------------------------------ */

.utj-dist-page .utj-dist-received {
	padding: 1.8rem 1.9rem;
	background: #fff;
	border: 1px solid var(--dest-border);
	border-left: 6px solid #1f7a4d;
	border-radius: 0 var(--dest-radius) var(--dest-radius) 0;
	outline: none;
}
.utj-dist-page .utj-dist-received[hidden] { display: none; }
.utj-dist-page .utj-dist-received__eyebrow {
	margin: 0 0 .4rem;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: #1f7a4d;
}
.utj-dist-page .utj-dist-received__id { font-size: 1.1rem; color: var(--dest-navy); }
.utj-dist-page .utj-dist-received p { line-height: 1.8; }
.utj-dist-page .utj-dist-received p:last-child { margin-bottom: 0; }


.utj-dist-page .utj-dist-apply__back { margin: 0 0 1.2rem; font-size: .9rem; }
.utj-dist-page .utj-dist-apply__back a { color: var(--dest-accent); }

/* --- form: phone --------------------------------------------------------- */

@media (max-width: 575.98px) {
	.utj-dist-page .utj-dist-grid { grid-template-columns: 1fr; }
	.utj-dist-page .utj-dist-apply { padding: 1.4rem 1rem; }
	.utj-dist-page .utj-dist-fs { padding: 1.1rem 1rem .9rem; }
	.utj-dist-page .utj-dist-form input[type="submit"].wpcf7-submit { width: 100%; }
}

/* === 03 what you get ======================================================
   Benefits for distributors (added 2026-10-12): 1 the Desk, 2 a company page
   on usedtirejapan.com, 3 more support. Each benefit is text + a picture;
   the second one swaps sides. Pictures are real Desk screens from the demo
   account, or drawn in CSS where the feature is shown as an illustration. */

.utj-dist-page .utj-dlp .utj-dlp-h3 {
	margin: 0 0 .9rem;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: clamp(1.45rem, 1.15rem + 1vw, 1.95rem);
	font-weight: 700;
	line-height: 1.25;
	text-align: left;
	color: var(--dest-navy);
}

.utj-dist-page .utj-dlp-feat {
	display: grid;
	grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr);
	gap: 3rem;
	align-items: center;
	margin: 0 0 4.5rem;
}
.utj-dist-page .utj-dlp-feat--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.utj-dist-page .utj-dlp-feat--rev .utj-dlp-feat__txt { order: 2; }
.utj-dist-page .utj-dlp .utj-dlp-feat__txt > p { margin: 0 0 1.2rem; font-size: 1.08rem; line-height: 1.75; color: var(--dest-ink); }
.utj-dist-page .utj-dlp .utj-dlp-feat__k {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0 0 .7rem;
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--dlp-teal-deep);
}
.utj-dist-page .utj-dlp-feat__k span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	font-size: .95rem;
	letter-spacing: 0;
	color: #fff;
	background: var(--dlp-teal);
	border-radius: 50%;
}
.utj-dist-page .utj-dlp-ticks { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.utj-dist-page .utj-dlp-ticks li { display: flex; gap: .65rem; margin: 0; font-size: 1.02rem; line-height: 1.5; color: var(--dest-navy); }
.utj-dist-page .utj-dlp-ticks .utj-dlp-check { background: #e6f2f0; border-radius: 50%; }
.utj-dist-page .utj-dlp-ticks .utj-dlp-check::after { left: .45rem; top: .25rem; width: .3rem; height: .58rem; border-width: 0 2.5px 2.5px 0; border-color: var(--dlp-teal-deep); }
.utj-dist-page .utj-dlp .utj-dlp-feat__cap { margin: .7rem 0 0; font-size: .82rem; color: var(--dlp-muted); }
.utj-dist-page .utj-dlp .utj-dlp-feat__cta { margin-top: 1rem; }

/* --- browser windows ----------------------------------------------------- */

.utj-dist-page .utj-dlp-win {
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--dest-border);
	border-radius: 10px;
	box-shadow: 0 14px 34px rgba(22, 39, 63, .12);
}
.utj-dist-page .utj-dlp-win__bar {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 7px 10px;
	background: #eef2f6;
	border-bottom: 1px solid var(--dest-border);
}
.utj-dist-page .utj-dlp-win__bar i { flex: none; width: 8px; height: 8px; background: #cdd5df; border-radius: 50%; }
.utj-dist-page .utj-dlp-win__bar span {
	min-width: 0;
	margin-left: 8px;
	overflow: hidden;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--dlp-muted);
}
.utj-dist-page .utj-dlp-win__bar .utj-dlp-win__url {
	flex: 1;
	padding: 2px 10px;
	font-weight: 400;
	letter-spacing: 0;
	background: #fff;
	border-radius: 20px;
}
.utj-dist-page .utj-dlp-win img { display: block; width: 100%; height: auto; }

/* --- 1 desk + chat side by side ------------------------------------------ */

.utj-dist-page .utj-dlp-split {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 14px;
	align-items: stretch;
}
.utj-dist-page .utj-dlp-split__paste {
	position: absolute;
	left: 55.5%;
	top: 50%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 6px 8px;
	font-size: .68rem;
	line-height: 1.2;
	color: #fff;
	background: var(--dlp-orange);
	border-radius: 8px;
	box-shadow: 0 6px 14px rgba(189, 106, 44, .3);
	transform: translate(-50%, -50%);
}
.utj-dist-page .utj-dlp-split__paste i { font-style: normal; font-size: .9rem; line-height: 1; }
.utj-dist-page .utj-dlp-win--chat { display: flex; flex-direction: column; }
.utj-dist-page .utj-dlp-chat { display: flex; flex: 1; flex-direction: column; background: #efeae2; }
.utj-dist-page .utj-dlp-chat__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	font-size: .8rem;
	font-weight: 700;
	color: #1f2c33;
	background: #f0f2f5;
	border-bottom: 1px solid #e2e5e8;
}
.utj-dist-page .utj-dlp-chat__av {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	font-size: .7rem;
	color: #fff;
	background: #9aa7b3;
	border-radius: 50%;
}
.utj-dist-page .utj-dlp-chat__body { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; gap: 7px; padding: 10px; }
.utj-dist-page .utj-dlp .utj-dlp-bub {
	max-width: 88%;
	margin: 0;
	padding: 6px 9px;
	font-size: .78rem;
	line-height: 1.4;
	color: #1f2c33;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
}
.utj-dist-page .utj-dlp .utj-dlp-bub--in { align-self: flex-start; }
.utj-dist-page .utj-dlp .utj-dlp-bub--out { align-self: flex-end; background: #d9fdd3; }
.utj-dist-page .utj-dlp .utj-dlp-bub--img { padding: 4px; }
.utj-dist-page .utj-dlp-bub--img img { display: block; width: 100%; height: auto; border-radius: 6px; }
.utj-dist-page .utj-dlp-bub--img span { display: block; padding: 4px 5px 2px; }

.utj-dist-page .utj-dlp-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 14px 0 0; }
.utj-dist-page .utj-dlp-shots figure { margin: 0; }
.utj-dist-page .utj-dlp-shots img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--dest-border);
	border-radius: 8px;
	box-shadow: 0 6px 16px rgba(22, 39, 63, .08);
}
.utj-dist-page .utj-dlp-shots figcaption { margin: .45rem 0 0; font-size: .85rem; font-weight: 700; color: var(--dest-ink); }

/* --- 2 company page illustration ----------------------------------------- */

.utj-dist-page .utj-dlp-site__hero {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px;
	color: #fff;
	background: linear-gradient(120deg, var(--dlp-teal) 0%, var(--dlp-teal-deep) 100%);
}
.utj-dist-page .utj-dlp-site__logo {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	font-weight: 700;
	color: var(--dlp-teal-deep);
	background: #fff;
	border-radius: 12px;
}
.utj-dist-page .utj-dlp-site__hero strong { display: block; font-family: 'Roboto Condensed', sans-serif; font-size: 1.45rem; line-height: 1.2; }
.utj-dist-page .utj-dlp-site__badge {
	display: inline-block;
	margin: 0 0 5px;
	padding: 2px 8px;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--dlp-teal-deep);
	background: #fff;
	border-radius: 20px;
}
.utj-dist-page .utj-dlp-site__sub { display: block; font-size: .8rem; opacity: .9; }
.utj-dist-page .utj-dlp-site__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; padding: 18px 20px 22px; }
.utj-dist-page .utj-dlp-site__h { display: block; margin: 0 0 9px; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dlp-teal-deep); }
.utj-dist-page .utj-dlp-site__about i { display: block; height: 8px; margin: 0 0 7px; background: #e6ebf0; border-radius: 4px; }
.utj-dist-page .utj-dlp-site__about i.is-short { width: 60%; }
.utj-dist-page .utj-dlp-site__btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.utj-dist-page .utj-dlp-site__btns span { padding: 5px 10px; font-size: .72rem; font-weight: 700; color: var(--dest-navy); border: 1px solid var(--dest-border); border-radius: 20px; }
.utj-dist-page .utj-dlp-site__btns .is-wa { color: #fff; background: #25a35a; border-color: #25a35a; }
.utj-dist-page .utj-dlp-site__post { display: flex; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid #eef1f4; }
.utj-dist-page .utj-dlp-site__post:last-child { border-bottom: 0; }
.utj-dist-page .utj-dlp-site__post b { display: block; font-size: .8rem; line-height: 1.3; color: var(--dest-navy); }
.utj-dist-page .utj-dlp-site__post small { display: block; font-size: .7rem; color: var(--dlp-muted); }
.utj-dist-page .utj-dlp-site__thumb {
	flex: none;
	width: 52px;
	height: 38px;
	border-radius: 6px;
	/* tires, drawn: dark rings on a warm background */
	background:
		radial-gradient(circle at 35% 55%, #3b4450 0 7px, #6b7480 7px 9px, transparent 9px),
		radial-gradient(circle at 68% 50%, #3b4450 0 8px, #6b7480 8px 10px, transparent 10px),
		linear-gradient(135deg, #f2d9c2, #e3b894);
}
.utj-dist-page .utj-dlp-site__thumb--2 { background: radial-gradient(circle at 50% 50%, #3b4450 0 10px, #6b7480 10px 12px, transparent 12px), linear-gradient(135deg, #d6e3f1, #a9c2de); }
.utj-dist-page .utj-dlp-site__thumb--3 { background: linear-gradient(0deg, #8a96a3 0 30%, transparent 30%), linear-gradient(135deg, #d9ece9, #a7d1cb); }

/* --- 3 more -------------------------------------------------------------- */

.utj-dist-page .utj-dlp .utj-dlp-more__t { margin-top: .5rem; }
.utj-dist-page .utj-dlp-more {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 1.1rem;
	margin: 1.2rem 0 0;
	padding: 0;
	list-style: none;
}
.utj-dist-page .utj-dlp-more li {
	display: flex;
	flex-direction: column;
	gap: .45rem;
	margin: 0;
	padding: 1.4rem 1.3rem;
	background: var(--dlp-sky);
	border-top: 3px solid var(--dlp-blue);
}
/* 5 cards: 3 on the first row, 2 wider ones on the second */
.utj-dist-page .utj-dlp-more li { grid-column: span 2; }
.utj-dist-page .utj-dlp-more li:nth-child(n+4) { grid-column: span 3; }
.utj-dist-page .utj-dlp-more strong { font-size: 1.08rem; line-height: 1.35; color: var(--dest-navy); }
.utj-dist-page .utj-dlp-more li > span:last-child { font-size: .96rem; line-height: 1.6; color: var(--dest-ink); }
.utj-dist-page .utj-dlp-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0 0 .3rem;
	color: var(--dlp-blue);
	background: #fff;
	border-radius: 12px;
}

@media (max-width: 1199.98px) {
	.utj-dist-page .utj-dlp-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.utj-dist-page .utj-dlp-more li,
	.utj-dist-page .utj-dlp-more li:nth-child(n+4) { grid-column: auto; }
	.utj-dist-page .utj-dlp-more li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 991px) {
	.utj-dist-page .utj-dlp-feat,
	.utj-dist-page .utj-dlp-feat--rev { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
	.utj-dist-page .utj-dlp-feat--rev .utj-dlp-feat__txt { order: 0; }
}
@media (max-width: 575.98px) {
	/* phone: desk screen, then the paste badge, then the chat */
	.utj-dist-page .utj-dlp-split { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.utj-dist-page .utj-dlp-split__paste { position: static; justify-self: center; flex-direction: row; gap: 6px; transform: none; }
	.utj-dist-page .utj-dlp-split__paste i { transform: rotate(90deg); }
	.utj-dist-page .utj-dlp-shots { grid-template-columns: minmax(0, 1fr); }
	.utj-dist-page .utj-dlp-site__body { grid-template-columns: minmax(0, 1fr); }
	.utj-dist-page .utj-dlp-site__hero strong { font-size: 1.2rem; }
	.utj-dist-page .utj-dlp-more { grid-template-columns: minmax(0, 1fr); }
	.utj-dist-page .utj-dlp-more li:last-child:nth-child(odd) { grid-column: auto; }
}

/* 世界地図への導線（02の下）。本文の流れを止めない控えめな置き方にする */
.utj-dist-page .utj-dlp-sec__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .9rem 1.4rem;
	margin: 2.2rem 0 0;
}
.utj-dist-page .utj-dlp-sec__cta span {
	font-size: .95rem;
	line-height: 1.7;
	color: rgba(0,0,0,.62);
}
.utj-dist-page .utj-dlp-btn--map {
	color: var(--dest-navy);
	background: #fff;
	border: 2px solid var(--dest-accent);
}
.utj-dist-page .utj-dlp-btn--map:hover { color: #fff; background: var(--dest-accent); }

/* === ① Sales network のデモ画面（MOCK） ==================================
   ③の1番目は実スクリーンショット。こちらはCSSで描いた略図にして、
   同じ絵を2回見せないようにしている。 */
.utj-dist-page .utj-dlp-demo { margin: 2.4rem 0 0; }
.utj-dist-page .utj-dlp-demo__win { max-width: 860px; }
.utj-dist-page .utj-dlp-demo__body {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}
.utj-dist-page .utj-dlp-demo__col { padding: 18px 20px 20px; }
.utj-dist-page .utj-dlp-demo__col--r { border-left: 1px solid var(--dest-border); background: #fafbfc; }
.utj-dist-page .utj-dlp-demo__h {
	display: block;
	margin: 0 0 .7rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(0,0,0,.45);
}
.utj-dist-page .utj-dlp-demo__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-top: 1px solid var(--dest-border);
}
.utj-dist-page .utj-dlp-demo__row strong { display: block; font-size: .92rem; color: var(--dest-navy); }
.utj-dist-page .utj-dlp-demo__row small { display: block; margin-top: 2px; font-size: .78rem; color: rgba(0,0,0,.55); }
.utj-dist-page .utj-dlp-demo__st {
	flex: none;
	padding: 3px 9px;
	border-radius: 3px;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .08em;
}
.utj-dist-page .utj-dlp-demo__st.is-new    { color: #1d4ed8; background: #e5edff; }
.utj-dist-page .utj-dlp-demo__st.is-quoted { color: #9a5b11; background: #fdeed9; }
.utj-dist-page .utj-dlp-demo__st.is-paid   { color: #15803d; background: #e3f5e8; }

/* 在庫のバー。数字だけより「どのサイズが厚いか」が一目で分かる */
.utj-dist-page .utj-dlp-demo__bar {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr) 32px;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
	font-size: .8rem;
	color: rgba(0,0,0,.65);
}
.utj-dist-page .utj-dlp-demo__bar i { display: block; height: 7px; background: #e6ebf1; border-radius: 4px; }
.utj-dist-page .utj-dlp-demo__bar i b { display: block; height: 100%; background: var(--dest-accent); border-radius: 4px; }
.utj-dist-page .utj-dlp-demo__bar em { font-style: normal; text-align: right; color: var(--dest-navy); font-weight: 600; }
.utj-dist-page .utj-dlp-demo__inc {
	margin-top: 14px;
	padding: 12px 14px;
	border: 1px dashed var(--dest-accent);
	border-radius: 6px;
	background: #fff;
}
.utj-dist-page .utj-dlp-demo__ik {
	display: block;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--dest-accent);
}
.utj-dist-page .utj-dlp-demo__inc strong { display: block; margin-top: 3px; font-size: .95rem; color: var(--dest-navy); }
.utj-dist-page .utj-dlp-demo__inc small { display: block; margin-top: 2px; font-size: .76rem; color: rgba(0,0,0,.55); }
.utj-dist-page .utj-dlp-demo__cap { margin: .7rem 0 0; font-size: .78rem; color: rgba(0,0,0,.5); }

@media (max-width: 680px) {
	.utj-dist-page .utj-dlp-demo__body { grid-template-columns: minmax(0, 1fr); }
	.utj-dist-page .utj-dlp-demo__col--r { border-left: 0; border-top: 1px solid var(--dest-border); }
}

/* デモ専用ページ（distributor-desk-demo.php）。紹介ページより大きく出す */
.utj-dist-page .utj-dlp-demo--full .utj-dlp-demo__win { max-width: none; }
.utj-dist-page .utj-dlp-demo--full .utj-dlp-demo__col { padding: 24px 28px 28px; }
.utj-dist-page .utj-dlp-demo--full .utj-dlp-demo__row strong { font-size: 1rem; }

/* 画面でできること。機能の列挙に見せないよう2列で短く置く */
.utj-dist-page .utj-dlp-demo__pts {
	list-style: none;
	margin: 2.4rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.4rem 2.2rem;
}
.utj-dist-page .utj-dlp-demo__pts li { border-top: 2px solid var(--dest-accent); padding-top: .9rem; }
.utj-dist-page .utj-dlp-demo__pts strong {
	display: block;
	margin-bottom: .35rem;
	font-size: 1.02rem;
	color: var(--dest-navy);
}
.utj-dist-page .utj-dlp-demo__pts span { font-size: .93rem; line-height: 1.75; color: rgba(0,0,0,.66); }

/* ===== デモのタブ（distributor-desk-demo.php） =====
   **JSを使わない。** radio + :checked ~ で切り替える。WPのテンプレートに素のJSを足すと
   テーマのスクリプトと読み込み順で競合する。
   radio は見えないがフォーカス可能なまま（矢印キーで切り替わる）なので、
   display:none にしないこと。 */
.utj-dist-page .utj-dlp-tabs__in {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.utj-dist-page .utj-dlp-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	border-bottom: 1px solid var(--dest-border);
	background: #f4f6f8;
}
.utj-dist-page .utj-dlp-tabs__t {
	margin: 0;
	padding: 13px 22px 12px;
	font-family: Roboto, sans-serif;
	font-weight: 700;
	font-size: .82rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(0,0,0,.5);
	background: transparent;
	border-bottom: 3px solid transparent;
	cursor: pointer;
	transition: color .15s, background .15s;
}
.utj-dist-page .utj-dlp-tabs__t:hover { color: var(--dest-navy); background: #fff; }
/* 既定は全部隠し、checked のものだけ出す */
.utj-dist-page .utj-dlp-tabs__p { display: none; }
.utj-dist-page #utj-demo-home:checked   ~ .utj-dlp-tabs__p--home,
.utj-dist-page #utj-demo-cust:checked   ~ .utj-dlp-tabs__p--cust,
.utj-dist-page #utj-demo-quote:checked  ~ .utj-dlp-tabs__p--quote,
.utj-dist-page #utj-demo-stock:checked  ~ .utj-dlp-tabs__p--stock,
.utj-dist-page #utj-demo-orders:checked ~ .utj-dlp-tabs__p--orders { display: block; }
.utj-dist-page #utj-demo-home:checked   ~ .utj-dlp-tabs__nav .utj-dlp-tabs__t--home,
.utj-dist-page #utj-demo-cust:checked   ~ .utj-dlp-tabs__nav .utj-dlp-tabs__t--cust,
.utj-dist-page #utj-demo-quote:checked  ~ .utj-dlp-tabs__nav .utj-dlp-tabs__t--quote,
.utj-dist-page #utj-demo-stock:checked  ~ .utj-dlp-tabs__nav .utj-dlp-tabs__t--stock,
.utj-dist-page #utj-demo-orders:checked ~ .utj-dlp-tabs__nav .utj-dlp-tabs__t--orders {
	color: var(--dest-navy);
	background: #fff;
	border-bottom-color: var(--dest-accent);
}
/* キーボードで触っているときだけ枠を出す */
.utj-dist-page #utj-demo-home:focus-visible   ~ .utj-dlp-tabs__nav .utj-dlp-tabs__t--home,
.utj-dist-page #utj-demo-cust:focus-visible   ~ .utj-dlp-tabs__nav .utj-dlp-tabs__t--cust,
.utj-dist-page #utj-demo-quote:focus-visible  ~ .utj-dlp-tabs__nav .utj-dlp-tabs__t--quote,
.utj-dist-page #utj-demo-stock:focus-visible  ~ .utj-dlp-tabs__nav .utj-dlp-tabs__t--stock,
.utj-dist-page #utj-demo-orders:focus-visible ~ .utj-dlp-tabs__nav .utj-dlp-tabs__t--orders {
	outline: 2px solid var(--dest-accent);
	outline-offset: -2px;
}
/* タブの中身。高さが変わると押すたびに画面が跳ねるので最低高を揃える */
.utj-dist-page .utj-dlp-tabs__p > .utj-dlp-demo__body,
.utj-dist-page .utj-dlp-tabs__p > .utj-dlp-demo__single { min-height: 330px; }
.utj-dist-page .utj-dlp-demo__single { padding: 24px 28px 28px; }

/* Home: 目標と件数 */
.utj-dist-page .utj-dlp-demo__big {
	margin: .5rem 0 .6rem;
	font-family: Roboto, sans-serif;
	font-weight: 900;
	font-size: 2.1rem;
	line-height: 1;
	color: var(--dest-navy);
}
.utj-dist-page .utj-dlp-demo__big small { font-size: .9rem; font-weight: 500; color: rgba(0,0,0,.5); }
.utj-dist-page .utj-dlp-demo__prog { height: 9px; background: #e6ebf1; border-radius: 5px; overflow: hidden; }
.utj-dist-page .utj-dlp-demo__prog b { display: block; height: 100%; background: var(--dest-accent); }
.utj-dist-page .utj-dlp-demo__note { margin: .6rem 0 0; font-size: .8rem; line-height: 1.7; color: rgba(0,0,0,.55); }
.utj-dist-page .utj-dlp-demo__kpis {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-top: 1.4rem;
}
.utj-dist-page .utj-dlp-demo__kpis div {
	padding: 12px 14px;
	background: #f7f9fb;
	border: 1px solid var(--dest-border);
	border-radius: 4px;
}
.utj-dist-page .utj-dlp-demo__kpis div.is-hot { background: #fdeed9; border-color: #f0d6ae; }
.utj-dist-page .utj-dlp-demo__kpis strong {
	display: block;
	font-family: Roboto, sans-serif;
	font-weight: 900;
	font-size: 1.5rem;
	line-height: 1.1;
	color: var(--dest-navy);
}
.utj-dist-page .utj-dlp-demo__kpis span { font-size: .74rem; letter-spacing: .02em; color: rgba(0,0,0,.55); }

/* Quote: 見積の表 */
.utj-dist-page .utj-dlp-demo__tbl { width: 100%; margin: .8rem 0 0; border-collapse: collapse; font-size: .85rem; }
.utj-dist-page .utj-dlp-demo__tbl th,
.utj-dist-page .utj-dlp-demo__tbl td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--dest-border); }
.utj-dist-page .utj-dlp-demo__tbl thead th {
	font-family: Roboto, sans-serif;
	font-size: .7rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(0,0,0,.5);
	background: #f7f9fb;
}
.utj-dist-page .utj-dlp-demo__tbl td { color: var(--dest-navy); }
.utj-dist-page .utj-dlp-demo__tbl tfoot th { font-weight: 700; color: var(--dest-navy); border-bottom: 0; background: #f7f9fb; }
.utj-dist-page .utj-dlp-demo__tbl tfoot th:last-child { text-align: left; }
.utj-dist-page .utj-dlp-demo__send { display: flex; flex-wrap: wrap; gap: 10px; margin-top: .8rem; }
.utj-dist-page .utj-dlp-demo__btn {
	padding: 11px 18px;
	font-family: Roboto, sans-serif;
	font-weight: 700;
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff;
	background: var(--dest-navy);
	border-radius: 3px;
}
.utj-dist-page .utj-dlp-demo__btn.is-wa { background: #25D366; }
.utj-dist-page .utj-dlp-demo__chat {
	margin-top: 1.2rem;
	padding: 14px;
	background: #e9e3da;
	border-radius: 6px;
}
.utj-dist-page .utj-dlp-demo__bub {
	max-width: 85%;
	margin: 0 0 8px;
	padding: 9px 12px;
	font-size: .84rem;
	line-height: 1.6;
	border-radius: 7px;
	color: var(--dest-navy);
}
.utj-dist-page .utj-dlp-demo__bub.is-in { background: #fff; }
.utj-dist-page .utj-dlp-demo__bub.is-out { margin-left: auto; margin-bottom: 0; background: #d9fdd3; }

@media (max-width: 680px) {
	.utj-dist-page .utj-dlp-tabs__t { flex: 1 1 auto; padding: 11px 12px 10px; font-size: .74rem; text-align: center; }
	.utj-dist-page .utj-dlp-tabs__p > .utj-dlp-demo__body,
	.utj-dist-page .utj-dlp-tabs__p > .utj-dlp-demo__single { min-height: 0; }
	.utj-dist-page .utj-dlp-demo__single { padding: 18px 20px 20px; }
	.utj-dist-page .utj-dlp-demo__kpis { grid-template-columns: minmax(0, 1fr); }
}