@charset "UTF-8";
/* ブランディング（印刷）ページ 用。クラス名は branding- で始める
   寸法はデザインの px をそのまま --u 倍で書く（PC は 1920px 幅、スマホは 375px 幅のデザイン） */

/* 指定はすべて本文の外側の要素 .branding--root の中だけに効かせる（ヘッダー・パンくず・CTA・フッター・#contents・body・html には当てない）。
   header.php は #contents にページのスラッグ（branding）を class として付けるので、それと重ならない名前にする。
   WordPress のスラッグは連続したハイフンを1つにまとめるため、"--" を含む名前はスラッグになりようがない。
   .branding--root を付けていなかった指定は :where(.branding--root) で囲み、詳細度を変えない */
.branding--root {
	container-type: inline-size;
	--branding-main: #7da2b3;
	--branding-blue: #6790af;
	--branding-gray: #727072;
	--branding-text: #080002;
	position: relative;
	overflow: hidden;
	color: var(--branding-text);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 400;
	line-height: 1;
}
/* --u は「.branding--root の幅」と「見えている画面の幅（JS で測る --branding-vw）」の小さいほうを基準にする。
   100vw だと縦のスクロールバーの分だけ広くなり、右が欠ける。
   また今のサイトは 541〜1199px で本文の外枠が最小幅 1200px になるので、画面の幅で頭打ちにする */
.branding--root > * {
	--u: calc(min(100cqw, var(--branding-vw, 100cqw)) / 1920);
}
.branding--root p,
.branding--root h2,
.branding--root h3 {
	font-family: inherit;
	font-weight: inherit;
	letter-spacing: 0;
}
.branding--root ol,
.branding--root ul {
	list-style: none;
}
.branding--root svg {
	display: block;
}
/* 外部ファイルの SVG 画像。layout.css の img { max-width: 100% } で親より幅の広い形が縮まないようにする */
:where(.branding--root) img[src$=".svg"] {
	max-width: none;
}
.branding--root .branding-sp {
	display: none;
}
:where(.branding--root) .branding-s {
	font-size: 0.8em;
}
.branding--root section {
	position: relative;
}

/* ---------- 区分1 タイトル ---------- */
:where(.branding--root) .branding-kv {
	width: calc(1920 * var(--u));
	height: calc(1100 * var(--u));
	margin-top: 31px;
	overflow: hidden;
	background-color: #7a98a6;
}
:where(.branding--root) .branding-kv-bg {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-size: 130.2% auto;
	background-position: 50% 47.5%;
}
/* 下：くっきりした写真 */
:where(.branding--root) .branding-kv-bg-clear {
	background-image: url(../images/branding/kv_clear.jpg);
}
/* 上：ぼかした写真（ガラス風）。マウスの位置だけ丸く抜いて、下のくっきりした写真を見せる */
:where(.branding--root) .branding-kv-bg-blur {
	--branding-hole: 0px;
	--branding-mx: 50%;
	--branding-my: 50%;
	background-image: url(../images/branding/kv_blur.jpg);
	-webkit-mask-image: radial-gradient(circle at var(--branding-mx) var(--branding-my), transparent calc(var(--branding-hole) - 2px), #000 var(--branding-hole));
	mask-image: radial-gradient(circle at var(--branding-mx) var(--branding-my), transparent calc(var(--branding-hole) - 2px), #000 var(--branding-hole));
}
/* 試作 ?kv=b：乗せ色を外した写真に差し替え、乗せ色を写真側とガラス側に半分ずつかける
   （乗せ色は 01top.psd「レイヤー 1」の #8cb1c1・乗算・不透明度100%）
   半分の色は各チャンネルを平方根にした #bdd4de（255×sqrt(c/255)）。2回の乗算で #8cb1c1 になる
   写真側の半分はキービジュアル全体にかかるので、くっきり・ぼかしの両方の層の中で乗算する
   （乗算は層ごとに掛けても全体に掛けても同じ色になるため、全体を覆う層は別に足さない）
   くっきりの層（穴の中）：写真側の半分だけ。ぼかしの層：写真側の半分 × ガラス側の半分 */
:where(.branding--root) .branding-kv-b .branding-kv-bg-clear {
	background-image: linear-gradient(#bdd4de, #bdd4de), url(../images/branding/kv_clear_raw.jpg);
	background-size: 100% 100%, 130.2% auto;
	background-position: 0 0, 50% 47.5%;
	background-blend-mode: multiply;
}
:where(.branding--root) .branding-kv-b .branding-kv-bg-blur {
	background-image: linear-gradient(#bdd4de, #bdd4de), linear-gradient(#bdd4de, #bdd4de), url(../images/branding/kv_blur_raw.jpg);
	background-size: 100% 100%, 100% 100%, 130.2% auto;
	background-position: 0 0, 0 0, 50% 47.5%;
	background-blend-mode: multiply;
}
/* 白抜き線の BRANDING（デザインで y 363〜674 / 1100）。縦横比は保つ */
:where(.branding--root) .branding-kv-en {
	position: absolute;
	left: 0;
	top: calc(363 * var(--u));
	width: 100%;
	pointer-events: none;
}
:where(.branding--root) .branding-kv-title {
	position: absolute;
	left: 0;
	top: 48%;
	width: 100%;
	color: #fff;
	font-size: calc(64.5 * var(--u));
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	transform: translateY(-50%);
	pointer-events: none;
}
:where(.branding--root) .branding-kv-title span {
	display: block;
}
/* PC：2つの文字を同じ位置に重ね、スクロールで入れ替える */
:where(.branding--root) .branding-kv-title-2 {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	opacity: 0;
}

/* ---------- 区分2 「伝わる」をデザインする ---------- */
:where(.branding--root) .branding-intro {
	height: calc(800 * var(--u));
	z-index: 1;
}
:where(.branding--root) .branding-intro-bg {
	position: absolute;
	left: 0;
	top: calc(35 * var(--u));
	width: calc(1885 * var(--u));
	height: calc(730 * var(--u));
	border-radius: 0 calc(40 * var(--u)) calc(40 * var(--u)) 0;
	background-color: #f7f7f7;
}
/* 丸から縦に伸びて長四角になる箱 */
:where(.branding--root) .branding-intro-box {
	position: absolute;
	left: calc(239 * var(--u));
	top: calc(70 * var(--u));
	width: calc(250 * var(--u));
	height: calc(660 * var(--u));
	border-radius: calc(40 * var(--u));
	background-color: #fff;
}
:where(.branding--root) .branding-intro-title {
	position: absolute;
	left: calc(388 * var(--u));
	/* 白い箱（70〜730）の中で、文字の上下の余白が等しくなる位置（実測で各 56） */
	top: calc(92 * var(--u));
	color: var(--branding-main);
	font-size: calc(49.7 * var(--u));
	line-height: 1;
	/* デザインの縦の長さ（129〜715）に合わせた字間 */
	letter-spacing: calc(1.8 * var(--u)) !important;
	writing-mode: vertical-rl;
}
:where(.branding--root) .branding-intro-sub {
	position: absolute;
	left: calc(292 * var(--u));
	/* 1列目の最後の字の字面の下端を、見出しの字面の下端にそろえる位置（実測） */
	top: calc(312.5 * var(--u));
	color: var(--branding-gray);
	font-size: calc(19.1 * var(--u));
	line-height: 1.78;
	writing-mode: vertical-rl;
}
:where(.branding--root) .branding-intro-pin {
	position: absolute;
	left: calc(1164 * var(--u));
	top: calc(108 * var(--u));
	width: calc(92.65 * var(--u));
	z-index: 2;
}
:where(.branding--root) .branding-intro-text {
	position: absolute;
	left: calc(555 * var(--u));
	top: calc(484 * var(--u));
	color: #221815;
	font-size: calc(21.3 * var(--u));
	line-height: 2.394;
}
/* ポタポタ：y 100 から区分3 のひょうたん形の首（区分3 の y 394 ＝ここから 1194）までを覆う。
   しずくはピンの先（y 264）から垂れる。ピンより手前に置く */
:where(.branding--root) .branding-drip {
	position: absolute;
	left: calc(1150 * var(--u));
	top: calc(100 * var(--u));
	width: calc(120 * var(--u));
	height: calc(1120 * var(--u));
	fill: var(--branding-main);
	overflow: visible;
	pointer-events: none;
	z-index: 3;
}
/* 落ちる距離：しずくの真下で最初に当たる、ひょうたん形のくびれの上の縁（区分3 の y 432.39 ＝ viewBox の y 1132.39）に
   しずくの下端（中心 + ry 14.4）が触れるまで。1132.39 − 14.4 − 164 ＝ 953.99（viewBox の単位で、デザインの px と同じ）
   落ちる時間：担当者の指示で 3.9 秒（参考の Liquid Loader の .drop2 の 1.3 秒の3倍）
   イージング：位置が時間の2乗に比例する（等加速度）cubic-bezier(1/3, 0, 2/3, 1/3)
   3粒の時間差：3粒を等間隔で次々に落とす。開始のタイミングだけを、1回り（3.9 秒）の3等分（1.3 秒）ずつずらす。
   最初の 0.5 秒の遅れ（参考の .5s）は1粒目に残す。周期が同じなので、同じ間隔がずっと繰り返される */
:where(.branding--root) .branding-drip-drop {
	--branding-drip-fall: 953.99px;
	--branding-drip-time: 3.9s;
	animation: branding-drip var(--branding-drip-time) cubic-bezier(0.3333, 0, 0.6667, 0.3333) 0.5s infinite;
}
:where(.branding--root) .branding-drip-drop:nth-of-type(2) {
	animation-delay: calc(0.5s + var(--branding-drip-time) / 3);
}
:where(.branding--root) .branding-drip-drop:nth-of-type(3) {
	animation-delay: calc(0.5s + var(--branding-drip-time) * 2 / 3);
}
@keyframes branding-drip {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(var(--branding-drip-fall));
	}
}

/* ---------- 区分3 価値を深掘り／きちんと伝える ---------- */
:where(.branding--root) .branding-value {
	height: calc(1200 * var(--u));
	z-index: 2;
}
:where(.branding--root) .branding-value-shape {
	position: absolute;
	left: calc(643 * var(--u));
	top: calc(330 * var(--u));
	width: calc(1134.46 * var(--u));
}
:where(.branding--root) .branding-value-item {
	position: absolute;
	top: calc(442 * var(--u));
	color: #fff;
	font-weight: 500;
}
:where(.branding--root) .branding-value-item-1 {
	left: calc(780 * var(--u));
	width: calc(320 * var(--u));
}
:where(.branding--root) .branding-value-item-2 {
	left: calc(1322 * var(--u));
	width: calc(340 * var(--u));
}
:where(.branding--root) .branding-value-head,
:where(.branding--root) .branding-value-text p {
	color: #fff;
}
:where(.branding--root) .branding-value-head {
	margin-left: calc(-60 * var(--u));
	margin-right: calc(-60 * var(--u));
	font-size: calc(41.6 * var(--u));
	font-weight: 500 !important;
	line-height: 1;
	text-align: center;
}
:where(.branding--root) .branding-value-item-1 .branding-value-head {
	transform: translateX(calc(-6 * var(--u)));
}
:where(.branding--root) .branding-value-text {
	white-space: nowrap;
	margin-top: calc(76 * var(--u));
	font-size: calc(24.1 * var(--u));
	line-height: 2.158;
}
:where(.branding--root) .branding-value-text p {
	font-size: inherit;
	font-weight: 500 !important;
	line-height: inherit;
}
:where(.branding--root) .branding-value-text p + p {
	margin-top: calc(13 * var(--u));
}

/* ---------- 区分4 APPROACH ---------- */
:where(.branding--root) .branding-approach {
	height: calc(1160 * var(--u));
}
:where(.branding--root) .branding-approach-bg {
	position: absolute;
	inset: 0;
	border-radius: calc(32 * var(--u));
	background: #b9c4ce url(../images/branding/approach_bg.jpg) no-repeat;
	background-size: calc(2606 * var(--u)) auto;
	background-position: calc(-325 * var(--u)) calc(-456 * var(--u));
}
:where(.branding--root) .branding-approach-en {
	position: absolute;
	left: calc(9 * var(--u));
	top: calc(-7.55 * var(--u));
	width: calc(1889.25 * var(--u));
}
:where(.branding--root) .branding-grow-line path {
	vector-effect: non-scaling-stroke;
}
:where(.branding--root) .branding-approach-list {
	position: absolute;
	left: calc(414 * var(--u));
	top: calc(290 * var(--u));
	width: calc(1139 * var(--u));
	height: calc(870 * var(--u));
	padding: 0 calc(142 * var(--u));
	border-radius: calc(8 * var(--u)) calc(8 * var(--u)) 0 0;
	background-color: #fff;
	box-sizing: border-box;
}
:where(.branding--root) .branding-approach-item + .branding-approach-item {
	border-top: 1px solid #d3dde2;
}
:where(.branding--root) .branding-approach-head {
	height: calc(118 * var(--u));
	padding: calc(46 * var(--u)) 0 0 calc(69 * var(--u));
	box-sizing: border-box;
	color: #818181;
	font-size: calc(33.3 * var(--u));
	font-weight: 500 !important;
	line-height: 1;
	letter-spacing: 0.05em !important;
}
:where(.branding--root) .branding-approach-num {
	display: inline-block;
	width: calc(106 * var(--u));
	letter-spacing: 0;
}
/* 開いている項目だけ本文を出す（PC は JS で高さを動かす） */
:where(.branding--root) .branding-approach-body {
	overflow: hidden;
	height: 0;
	opacity: 0;
}
:where(.branding--root) .branding-approach-body p {
	padding: 0 0 calc(30 * var(--u)) calc(175 * var(--u));
	font-size: calc(18.4 * var(--u));
	line-height: 2.2;
}

/* ---------- 区分5 本来の魅力が伝わる ---------- */
:where(.branding--root) .branding-grow {
	height: calc(800 * var(--u));
	z-index: 2;
}
:where(.branding--root) .branding-grow-line {
	position: absolute;
	left: calc(396.67 * var(--u));
	top: calc(218.34 * var(--u));
	width: calc(1126.66 * var(--u));
	fill: none;
	stroke: var(--branding-main);
	stroke-width: 1.2;
	overflow: visible;
}
:where(.branding--root) .branding-grow-title {
	position: absolute;
	left: calc(515 * var(--u));
	top: calc(373 * var(--u));
	color: var(--branding-blue);
	font-size: calc(37.4 * var(--u));
	font-weight: 500 !important;
	line-height: 2.005;
}
:where(.branding--root) .branding-grow-text {
	position: absolute;
	left: calc(1093 * var(--u));
	top: calc(414.5 * var(--u));
	font-size: calc(20.8 * var(--u));
	font-weight: 300 !important;
	line-height: 2.005;
	letter-spacing: calc(2 * var(--u)) !important;
}

/* ---------- 区分6 Cross-Media ---------- */
:where(.branding--root) .branding-cross {
	height: calc(1753 * var(--u));
	z-index: 1;
}
:where(.branding--root) .branding-cross-bg {
	position: absolute;
	left: calc(-356.79 * var(--u));
	top: 0;
	width: calc(2500.61 * var(--u));
}
:where(.branding--root) .branding-cross-pin {
	position: absolute;
	left: calc(1389.23 * var(--u));
	top: calc(675.73 * var(--u));
	width: calc(446.83 * var(--u));
}
:where(.branding--root) .branding-cross-head {
	position: absolute;
	left: calc(316.27 * var(--u));
	top: calc(468.72 * var(--u));
	display: flex;
	align-items: flex-end;
}
:where(.branding--root) .branding-cross-en {
	width: calc(541.75 * var(--u));
}
:where(.branding--root) .branding-cross-title {
	position: absolute;
	left: calc(610 * var(--u));
	top: calc(49 * var(--u));
	color: var(--branding-blue);
	font-size: calc(36.1 * var(--u));
	font-weight: 500 !important;
	line-height: 1;
	white-space: nowrap;
}
:where(.branding--root) .branding-cross-text {
	position: absolute;
	left: calc(359 * var(--u));
	top: calc(760.6 * var(--u));
	font-size: calc(21.3 * var(--u));
	line-height: 2.16;
}
/* 丸の並び：右から左へ流れ続けるカルーセル（PC） */
:where(.branding--root) .branding-cross-media {
	position: absolute;
	left: 0;
	top: calc(1149 * var(--u));
	width: 100%;
	height: calc(260 * var(--u));
	overflow: hidden;
}
:where(.branding--root) .branding-cross-list {
	display: flex;
	width: max-content;
}
:where(.branding--root) .branding-cross-list li {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	width: calc(186 * var(--u));
	height: calc(186 * var(--u));
	margin-right: calc(6 * var(--u));
	border: 1px solid var(--branding-main);
	border-radius: 50%;
	box-sizing: border-box;
	color: var(--branding-main);
	font-size: calc(25.9 * var(--u));
	font-weight: 300;
	line-height: 1.3;
	text-align: center;
	white-space: nowrap;
}
/* デザインどおり上下に少しずつずらす */
:where(.branding--root) .branding-cross-list li:nth-child(10n + 1) { margin-top: calc(3 * var(--u)); }
:where(.branding--root) .branding-cross-list li:nth-child(10n + 2) { margin-top: calc(54 * var(--u)); }
:where(.branding--root) .branding-cross-list li:nth-child(10n + 3) { margin-top: calc(48 * var(--u)); }
:where(.branding--root) .branding-cross-list li:nth-child(10n + 4) { margin-top: calc(8 * var(--u)); }
:where(.branding--root) .branding-cross-list li:nth-child(10n + 5) { margin-top: calc(42 * var(--u)); }
:where(.branding--root) .branding-cross-list li:nth-child(10n + 6) { margin-top: calc(71 * var(--u)); }
:where(.branding--root) .branding-cross-list li:nth-child(10n + 7) { margin-top: calc(33 * var(--u)); }
:where(.branding--root) .branding-cross-list li:nth-child(10n + 8) { margin-top: 0; }
:where(.branding--root) .branding-cross-list li:nth-child(10n + 9) { margin-top: calc(47 * var(--u)); }
:where(.branding--root) .branding-cross-list li:nth-child(10n + 10) { margin-top: calc(28 * var(--u)); }

/* ---------- 区分7 Portfolio の前置き ---------- */
:where(.branding--root) .branding-works-intro {
	height: calc(650 * var(--u));
}
:where(.branding--root) .branding-works-intro-title {
	position: absolute;
	left: calc(491 * var(--u));
	top: calc(198 * var(--u));
	color: var(--branding-blue);
	font-size: calc(36.1 * var(--u));
	font-weight: 500 !important;
	line-height: 1;
	letter-spacing: 0.08em !important;
}
:where(.branding--root) .branding-works-intro-text {
	position: absolute;
	left: calc(491 * var(--u));
	top: calc(345.6 * var(--u));
	font-size: calc(21.3 * var(--u));
	line-height: 2.16;
}

/* ---------- 区分7 Portfolio ／ 区分8 Contact ---------- */
/* 背景（〜2153）の下に、今のサイトの CTA までの白い余白を含める（デザインの CTA は 2375.8 から） */
:where(.branding--root) .branding-works {
	height: calc(2375.8 * var(--u));
}
:where(.branding--root) .branding-works-en {
	position: absolute;
	left: calc(1407.75 * var(--u));
	top: calc(13.73 * var(--u));
	width: calc(332.28 * var(--u));
	/* 流れるカード（.branding-works-track）より手前にする */
	z-index: 3;
}
:where(.branding--root) .branding-works-bg {
	position: absolute;
	left: 0;
	top: calc(103 * var(--u));
	width: 100%;
	height: calc(2050 * var(--u));
	border-radius: calc(40 * var(--u));
	background-color: #ebf1f3;
}
:where(.branding--root) .branding-works-pin {
	position: absolute;
	left: calc(1403.13 * var(--u));
	top: calc(928.36 * var(--u));
	width: calc(446.83 * var(--u));
}
/* カードが流れる窓：グレーの背景（.branding-works-bg）と同じ位置・大きさ・角丸で切り取る。
   グレーの下端から現れ、上の縁で消える（Will Style の #flowtrack と同じ overflow: hidden）。
   Contact の箱は DOM で後ろにあるので、カードより手前に重なる */
:where(.branding--root) .branding-works-track {
	position: absolute;
	left: 0;
	top: calc(103 * var(--u));
	width: 100%;
	height: calc(2050 * var(--u));
	border-radius: calc(40 * var(--u));
	overflow: hidden;
}
/* 流れる並び全体。JS が transform で上へ動かす（Will Style の .top-hero__flow と同じ will-change）。
   カードの座標は Portfolio 区分の上端基準なので、窓の上端（103）の分だけ上へずらす */
:where(.branding--root) .branding-works-flow {
	margin-top: calc(-103 * var(--u));
	will-change: transform;
}
/* 1周分の高さ。行の間隔（ルミナ 134 → 春日井 1146 の 2 行で約 506）の 3 行分＝ 1518 */
:where(.branding--root) .branding-works-list {
	position: relative;
	height: calc(1518 * var(--u));
}
:where(.branding--root) .branding-works-item {
	position: absolute;
	width: calc(372 * var(--u));
	height: calc(372 * var(--u));
}
:where(.branding--root) .branding-works-item a {
	display: block;
	position: relative;
	height: 100%;
	border-radius: calc(24 * var(--u));
	background-color: #fff;
	color: #000;
	text-decoration: none;
	transition: transform 0.4s ease;
}
:where(.branding--root) .branding-works-item a:hover {
	transform: scale(1.06);
}
/* 画像の枠 */
:where(.branding--root) .branding-works-figure {
	position: absolute;
	left: calc(89 * var(--u));
	top: calc(17 * var(--u));
	width: calc(266 * var(--u));
	height: calc(266 * var(--u));
	border-radius: calc(12 * var(--u));
	overflow: hidden;
}
/* 枠いっぱいに敷く */
:where(.branding--root) .branding-works-figure img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
:where(.branding--root) .branding-works-name,
:where(.branding--root) .branding-works-cat {
	color: #000;
}
:where(.branding--root) .branding-works-name {
	position: absolute;
	left: calc(24 * var(--u));
	top: calc(316 * var(--u));
	font-size: calc(16.2 * var(--u));
	line-height: 1;
}
:where(.branding--root) .branding-works-cat {
	position: absolute;
	left: calc(24 * var(--u));
	top: calc(340 * var(--u));
	font-size: calc(12.9 * var(--u));
	font-weight: 300 !important;
	line-height: 1;
}
/* カードの置き場所（デザインの座標） */
:where(.branding--root) .branding-works-item-lumina { left: calc(92 * var(--u)); top: calc(134 * var(--u)); }
:where(.branding--root) .branding-works-item-homare { left: calc(510 * var(--u)); top: calc(242 * var(--u)); }
:where(.branding--root) .branding-works-item-eito { left: calc(1007 * var(--u)); top: calc(139 * var(--u)); }
:where(.branding--root) .branding-works-item-net { left: calc(1478 * var(--u)); top: calc(271 * var(--u)); }
:where(.branding--root) .branding-works-item-togepachi { left: calc(68 * var(--u)); top: calc(846 * var(--u)); }
:where(.branding--root) .branding-works-item-m8i { left: calc(552 * var(--u)); top: calc(702 * var(--u)); }
:where(.branding--root) .branding-works-item-parque_blue { left: calc(1040 * var(--u)); top: calc(635 * var(--u)); }
:where(.branding--root) .branding-works-item-parque_green { left: calc(1478 * var(--u)); top: calc(835 * var(--u)); }
:where(.branding--root) .branding-works-item-kasugai { left: calc(869 * var(--u)); top: calc(1146 * var(--u)); }

:where(.branding--root) .branding-contact {
	position: absolute;
	left: calc(201 * var(--u));
	top: calc(1654 * var(--u));
	width: calc(1190 * var(--u));
	/* 白い箱は背景の下端より 103 下まで続く（デザインの箱は 1653.8〜2256.7） */
	height: calc(603 * var(--u));
	border-radius: calc(72 * var(--u)) calc(72 * var(--u)) 0 0;
	background-color: #fff;
}
:where(.branding--root) .branding-contact-en {
	position: absolute;
	left: calc(63 * var(--u));
	top: calc(223 * var(--u));
	width: calc(262.78 * var(--u));
}
:where(.branding--root) .branding-contact-text {
	position: absolute;
	left: calc(557 * var(--u));
	top: calc(75.6 * var(--u));
	color: #221815;
	font-size: calc(19.8 * var(--u));
	line-height: 1.944;
	letter-spacing: 0.04em !important;
	white-space: nowrap;
}
:where(.branding--root) .branding-contact-button {
	position: absolute;
	left: calc(524 * var(--u));
	top: calc(301 * var(--u));
	width: calc(584 * var(--u));
	height: calc(194 * var(--u));
	border-radius: calc(32 * var(--u));
	background-color: var(--branding-main);
	box-shadow: inset 0 0 0 2px var(--branding-main);
	color: #fff;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.3s ease, color 0.3s ease;
}
/* 今のサイトの a:link・a:visited（#333）に負けないよう、状態付きで白を指定する */
:where(.branding--root) .branding-contact-button:link,
:where(.branding--root) .branding-contact-button:visited {
	color: #fff;
}
/* マウスを乗せると白くなる（上の白より後に置いて優先させる） */
:where(.branding--root) .branding-contact-button:hover {
	background-color: #fff;
	color: var(--branding-main);
}
:where(.branding--root) .branding-contact-button-main {
	position: absolute;
	left: calc(33 * var(--u));
	top: calc(33 * var(--u));
	font-size: calc(22.7 * var(--u));
	line-height: 1;
	letter-spacing: 0.06em;
}
:where(.branding--root) .branding-contact-button-sub {
	position: absolute;
	left: calc(386 * var(--u));
	top: calc(126 * var(--u));
	font-size: calc(17.7 * var(--u));
	line-height: 1.36;
	letter-spacing: 0.04em;
}
/* 案E ここから
   タッチ端末で縮小表示されるとき（769px 以上・hover:none）、右に空白が出ないようにする。
   E-1：中身を見えている幅ではなく本文の外枠の幅（最小 1200px）で描く。
   E-2：区分4 の背景・区分6 の丸の窓・区分7 のグレーの面と窓の幅を中身の幅（1920 * --u）にそろえる（PC のみ）。
   元の指定より後ろ・スマホ（768px 以下）の指定より前に置き、同じ詳細度の上書きで効かせる。
   このまとまり（「案E ここから」〜「案E ここまで」）を丸ごと消せば元に戻る */
@media (min-width: 769px) and (hover: none) {
	.branding--root > * {
		--u: calc(100cqw / 1920);
	}
}
@media (min-width: 769px) {
	:where(.branding--root) .branding-approach-bg,
	:where(.branding--root) .branding-cross-media,
	:where(.branding--root) .branding-works-bg,
	:where(.branding--root) .branding-works-track {
		width: calc(1920 * var(--u));
	}
}
/* 案E ここまで */

/* ============================================================
   スマホ（768px 以下）：375px 幅のデザインに従う
   ============================================================ */
@media (max-width: 768px) {
	/* 見えている幅が 375px より広いときは 375px のデザインの大きさで止め（こばクリニック式）、
	   中身（375px 幅）を見えている幅の中央に置く。--branding-sp-side は左右の余り（片側） */
	.branding--root > * {
		--branding-sp-w: min(100cqw, var(--branding-vw, 100cqw));
		--u: calc(min(var(--branding-sp-w), 375px) / 375);
		--branding-sp-side: calc((var(--branding-sp-w) - 375 * var(--u)) / 2);
		width: calc(375 * var(--u));
		margin-left: var(--branding-sp-side);
	}
	.branding--root .branding-pc {
		display: none;
	}
	.branding--root .branding-sp {
		display: block;
	}
	.branding--root br.branding-sp {
		display: inline;
	}

	/* 区分1：キービジュアルは 375×215、文字は2行を左寄せで並べる */
	:where(.branding--root) .branding-kv {
		width: calc(375 * var(--u));
		height: calc(215 * var(--u));
		margin-top: 20px;
	}
	/* スマホ用デザインの線（x 10.35、y 68.05、幅 357.55）。
	   kv_en_sp.svg は線が端で切れないよう上下左右に 2 ずつ広げてあるので、その分ずらして広げる */
	:where(.branding--root) .branding-kv-en {
		left: calc(8.35 * var(--u));
		top: calc(66.05 * var(--u));
		width: calc(361.55 * var(--u));
	}
	:where(.branding--root) .branding-kv-title {
		left: calc(69 * var(--u));
		top: calc(134 * var(--u));
		width: auto;
		font-size: calc(14.2 * var(--u));
		line-height: 1.34;
		text-align: left;
		transform: none;
	}
	:where(.branding--root) .branding-kv-title-2 {
		position: static;
		opacity: 1;
	}

	/* 区分2 */
	:where(.branding--root) .branding-intro {
		height: calc(425 * var(--u));
	}
	:where(.branding--root) .branding-intro-bg {
		left: calc(12 * var(--u));
		top: calc(11 * var(--u));
		width: calc(351 * var(--u));
		height: calc(400 * var(--u));
		border-radius: calc(20 * var(--u));
	}
	:where(.branding--root) .branding-intro-box {
		left: calc(27 * var(--u));
		top: calc(46 * var(--u));
		width: calc(125 * var(--u));
		height: calc(330 * var(--u));
		border-radius: calc(20 * var(--u));
	}
	:where(.branding--root) .branding-intro-title {
		left: calc(96 * var(--u));
		/* 白い箱（46〜376）の中で、文字の上下の余白が等しくなる位置 */
		top: calc(59.5 * var(--u));
		font-size: calc(26.8 * var(--u));
		/* デザインの縦の長さ（294〜582）に合わせた字間 */
		letter-spacing: calc(-1.6 * var(--u)) !important;
	}
	:where(.branding--root) .branding-intro-sub {
		left: calc(51 * var(--u));
		/* 1列目の最後の字の字面の下端を、見出しの字面の下端にそろえる位置（実測） */
		top: calc(144.5 * var(--u));
		font-size: calc(10.6 * var(--u));
		line-height: 1.79;
	}
	:where(.branding--root) .branding-intro-pin {
		left: calc(207.63 * var(--u));
		top: calc(65 * var(--u));
		width: calc(46.32 * var(--u));
	}
	:where(.branding--root) .branding-intro-text {
		left: calc(165 * var(--u));
		top: calc(253.5 * var(--u));
		font-size: calc(10.6 * var(--u));
		line-height: 2.4;
	}

	/* 区分3：ひょうたん形は縦 */
	:where(.branding--root) .branding-value {
		height: calc(490 * var(--u));
	}
	:where(.branding--root) .branding-value-shape {
		left: calc(74.05 * var(--u));
		top: calc(20.55 * var(--u));
		width: calc(226.89 * var(--u));
	}
	:where(.branding--root) .branding-value-item-1,
	:where(.branding--root) .branding-value-item-2 {
		left: calc(108 * var(--u));
		width: calc(172 * var(--u));
	}
	:where(.branding--root) .branding-value-item-1 {
		top: calc(60 * var(--u));
	}
	:where(.branding--root) .branding-value-item-2 {
		top: calc(286 * var(--u));
		left: calc(106 * var(--u));
	}
	:where(.branding--root) .branding-value-head {
		margin-left: calc(-40 * var(--u));
		margin-right: calc(-40 * var(--u));
		font-size: calc(20 * var(--u));
	}
	:where(.branding--root) .branding-value-item-1 .branding-value-head {
		transform: none;
	}
	:where(.branding--root) .branding-value-text {
		margin-top: calc(37.5 * var(--u));
		font-size: calc(11.6 * var(--u));
		line-height: 2.155;
	}
	:where(.branding--root) .branding-value-text p + p {
		margin-top: calc(6 * var(--u));
	}

	/* 区分4：固定せず、4項目を本文付きで縦に並べる */
	/* 項目の高さは中身に合わせ、背景は一覧の下 21px まで */
	:where(.branding--root) .branding-approach {
		height: auto;
		padding: calc(78 * var(--u)) 0 calc(21 * var(--u));
	}
	/* 背景は見えている画面の左右の端まで広げる。写真の位置は中身に合わせたまま */
	:where(.branding--root) .branding-approach-bg {
		top: calc(59 * var(--u));
		left: calc(-1 * var(--branding-sp-side));
		right: calc(-1 * var(--branding-sp-side));
		border-radius: calc(12 * var(--u));
		background-size: calc(1378 * var(--u)) calc(431 * var(--u));
		background-position: calc(-440 * var(--u) + var(--branding-sp-side)) calc(-55 * var(--u));
		background-repeat: repeat-y;
	}
	:where(.branding--root) .branding-approach-en {
		left: calc(11.32 * var(--u));
		top: calc(21.58 * var(--u));
		width: calc(349.86 * var(--u));
		z-index: 1;
	}
	:where(.branding--root) .branding-approach-list {
		position: relative;
		left: calc(19 * var(--u));
		top: 0;
		width: calc(333 * var(--u));
		height: auto;
		padding: 0;
		border-radius: 0;
		background: none;
	}
	:where(.branding--root) .branding-approach-item {
		padding: calc(10 * var(--u)) calc(25 * var(--u)) calc(12 * var(--u));
		background-color: #fff;
	}
	:where(.branding--root) .branding-approach-item + .branding-approach-item {
		margin-top: calc(3.5 * var(--u));
		border-top: none;
	}
	:where(.branding--root) .branding-approach-head {
		height: auto;
		padding: 0;
		font-size: calc(26.6 * var(--u));
		line-height: 1.3;
		letter-spacing: 0 !important;
		white-space: nowrap;
	}
	:where(.branding--root) .branding-approach-num {
		width: calc(81 * var(--u));
	}
	:where(.branding--root) .branding-approach-body {
		height: auto !important;
		opacity: 1 !important;
	}
	:where(.branding--root) .branding-approach-body p {
		padding: calc(3 * var(--u)) 0 0;
		font-size: calc(14.7 * var(--u));
		line-height: 2.21;
	}

	/* 区分5：ひょうたん形の線は縦 */
	:where(.branding--root) .branding-grow {
		height: calc(485 * var(--u));
	}
	:where(.branding--root) .branding-grow-line {
		left: calc(66.77 * var(--u));
		top: calc(32.46 * var(--u));
		width: calc(241.46 * var(--u));
	}
	:where(.branding--root) .branding-grow-title {
		left: 0;
		top: calc(90 * var(--u));
		width: calc(380 * var(--u));
		font-size: calc(19.2 * var(--u));
		line-height: 1.875;
		text-align: center;
	}
	:where(.branding--root) .branding-grow-text {
		left: calc(89 * var(--u));
		top: calc(340.6 * var(--u));
		font-size: calc(12.8 * var(--u));
		line-height: 2;
		letter-spacing: calc(1.27 * var(--u)) !important;
	}

	/* 区分6：丸の並びは 5×2 の角丸の箱 */
	:where(.branding--root) .branding-cross {
		height: calc(608 * var(--u));
	}
	:where(.branding--root) .branding-cross-bg {
		left: calc(-110.32 * var(--u));
		width: calc(677.57 * var(--u));
	}
	:where(.branding--root) .branding-cross-pin {
		left: calc(207.19 * var(--u));
		top: calc(289 * var(--u));
		width: calc(155.42 * var(--u));
	}
	:where(.branding--root) .branding-cross-head {
		left: calc(28.95 * var(--u));
		top: calc(71 * var(--u));
		display: block;
	}
	:where(.branding--root) .branding-cross-en {
		width: calc(325.05 * var(--u));
	}
	:where(.branding--root) .branding-cross-title {
		left: calc(3 * var(--u));
		top: calc(74 * var(--u));
		font-size: calc(15.6 * var(--u));
		letter-spacing: 0.02em !important;
	}
	:where(.branding--root) .branding-cross-text {
		left: calc(88 * var(--u));
		top: calc(194.5 * var(--u));
		font-size: calc(12.8 * var(--u));
		font-weight: 300 !important;
		line-height: 2.15;
	}
	:where(.branding--root) .branding-cross-media {
		left: calc(9 * var(--u));
		top: calc(372 * var(--u));
		width: calc(360 * var(--u));
		height: auto;
		overflow: visible;
	}
	:where(.branding--root) .branding-cross-list {
		flex-wrap: wrap;
		width: auto;
		transform: none !important;
	}
	:where(.branding--root) .branding-cross-list li {
		width: calc(69 * var(--u));
		height: calc(69 * var(--u));
		margin: 0 calc(3 * var(--u)) calc(3.5 * var(--u)) 0 !important;
		border-radius: calc(11 * var(--u));
		font-size: calc(10.2 * var(--u));
		font-weight: 400;
		letter-spacing: 0.08em;
	}
	/* スマホは複製した2周目を出さない */
	:where(.branding--root) .branding-cross-list li:nth-child(n + 11) {
		display: none;
	}

	/* 区分7 前置き */
	:where(.branding--root) .branding-works-intro {
		height: calc(282 * var(--u));
	}
	:where(.branding--root) .branding-works-intro-title {
		left: 0;
		top: calc(30 * var(--u));
		width: 100%;
		font-size: calc(15.6 * var(--u));
		letter-spacing: 0.08em !important;
		text-align: center;
	}
	:where(.branding--root) .branding-works-intro-text {
		left: calc(46 * var(--u));
		top: calc(77 * var(--u));
		width: calc(168 * var(--u));
		font-size: calc(12.8 * var(--u));
		font-weight: 300 !important;
		line-height: 2.15;
	}

	/* 区分7 Portfolio ／ 区分8 Contact */
	:where(.branding--root) .branding-works {
		height: calc(1145 * var(--u));
	}
	:where(.branding--root) .branding-works-en {
		left: calc(23.93 * var(--u));
		top: calc(-89.5 * var(--u));
		width: calc(332.28 * var(--u));
	}
	/* グレーの背景は左端が画面に付くので、見えている画面の左端まで広げる */
	:where(.branding--root) .branding-works-bg {
		top: 0;
		left: calc(-1 * var(--branding-sp-side));
		width: calc(362.76 * var(--u) + var(--branding-sp-side));
		height: calc(852.73 * var(--u));
		border-radius: 0 calc(12 * var(--u)) calc(12 * var(--u)) 0;
	}
	:where(.branding--root) .branding-works-pin {
		left: calc(221.16 * var(--u));
		top: calc(764 * var(--u));
		width: calc(126.69 * var(--u));
	}
	/* 窓：グレーの背景と同じ位置・大きさ・角丸 */
	:where(.branding--root) .branding-works-track {
		top: 0;
		left: calc(-1 * var(--branding-sp-side));
		width: calc(362.76 * var(--u) + var(--branding-sp-side));
		height: calc(852.73 * var(--u));
		border-radius: 0 calc(12 * var(--u)) calc(12 * var(--u)) 0;
	}
	:where(.branding--root) .branding-works-flow {
		margin-top: 0;
		padding-top: calc(11 * var(--u));
		/* 窓を左へ広げた分だけ、カードを右へ戻す */
		padding-left: calc(16 * var(--u) + var(--branding-sp-side));
	}
	/* 1周分は 5 行＋次の並びとの行間 6 */
	:where(.branding--root) .branding-works-list {
		height: auto;
		padding-bottom: calc(6 * var(--u));
		display: grid;
		grid-template-columns: repeat(2, calc(160 * var(--u)));
		column-gap: calc(12 * var(--u));
		row-gap: calc(6 * var(--u));
	}
	:where(.branding--root) .branding-works-item {
		position: relative;
		left: auto !important;
		top: auto !important;
		width: calc(160 * var(--u));
		height: calc(161 * var(--u));
	}
	:where(.branding--root) .branding-works-item a {
		border-radius: calc(12 * var(--u));
	}
	:where(.branding--root) .branding-works-figure {
		left: calc(39 * var(--u));
		top: calc(8 * var(--u));
		width: calc(114.4 * var(--u));
		height: calc(114.4 * var(--u));
		border-radius: calc(5 * var(--u));
	}
	:where(.branding--root) .branding-works-name {
		left: calc(10 * var(--u));
		top: calc(133 * var(--u));
		font-size: calc(9.1 * var(--u));
	}
	:where(.branding--root) .branding-works-cat {
		left: calc(10 * var(--u));
		top: calc(145.5 * var(--u));
		font-size: calc(7.3 * var(--u));
	}
	:where(.branding--root) .branding-contact {
		left: 0;
		top: calc(852.73 * var(--u));
		width: 100%;
		height: calc(292 * var(--u));
		border-radius: 0;
		background: none;
	}
	:where(.branding--root) .branding-contact-en {
		left: calc(39.87 * var(--u));
		top: calc(183.5 * var(--u));
		width: calc(111.39 * var(--u));
	}
	:where(.branding--root) .branding-contact-text {
		left: calc(112 * var(--u));
		top: calc(26.4 * var(--u));
		width: calc(223 * var(--u));
		font-size: calc(11.1 * var(--u));
		font-weight: 300 !important;
		line-height: 1.93;
		letter-spacing: 0 !important;
		white-space: normal;
	}
	:where(.branding--root) .branding-contact-button {
		left: calc(35 * var(--u));
		top: calc(210.3 * var(--u));
		width: calc(204 * var(--u));
		height: calc(68 * var(--u));
		border-radius: calc(10 * var(--u));
	}
	:where(.branding--root) .branding-contact-button-main {
		left: calc(12 * var(--u));
		top: calc(11 * var(--u));
		font-size: calc(11.3 * var(--u));
	}
	:where(.branding--root) .branding-contact-button-sub {
		left: calc(116 * var(--u));
		top: calc(39.5 * var(--u));
		font-size: calc(8.5 * var(--u));
		line-height: 1.2;
	}
}
/* 案E2 ここから
   タッチ端末で 768px 以下のとき（hover:none）、右端が余らないようにする。
   541〜768px は #contents の最小幅 1200px によりページが 1200px 幅で縮小表示されるため、
   見えている幅（JS が書く --branding-vw）ではなく本文の外枠の幅（100cqw）を基準にし、読み込み直後の状態のまま止める。
   --u と --branding-sp-side は --branding-sp-w から計算されるので追従する。
   元の指定（スマホ（768px 以下）の .branding--root > *）より後ろに置き、同じ詳細度の上書きで効かせる。
   このまとまり（「案E2 ここから」〜「案E2 ここまで」）を丸ごと消せば元に戻る */
@media (max-width: 768px) and (hover: none) {
	.branding--root > * {
		--branding-sp-w: 100cqw;
	}
}
/* 案E2 ここまで */