@charset "UTF-8";

/**
 * custom.css
 *
 * style.css はビルド済み(1行にminify)のため直接編集しない。
 * 追加・上書きのスタイルはこのファイルにまとめる。
 * header.php で style.css の後に読み込んでいるので、
 * 同じ詳細度なら後勝ちで上書きされる。
 */

/**
 * Recruit をヘッダー右エリア(.b--gn__sb)へ移動し外部リンクアイコンを追加したため、
 * style.css の width:2.625rem では収まらず改行してしまう。
 */
.b--gn__one._enhide._recruit {
	width: 3.5rem;
}

/*
 * ヘッダー右エリア(Recruit / Contact / Online Store)の外部リンクアイコンが
 * ラベルに対して下にずれている。
 *
 * style.css は margin-top:.25rem。ラベルは font-size:.75rem / line-height:1.2
 * なので、実測すると大文字の天地中央よりアイコンの中心が約1.15px下にくる。
 * その分だけ margin-top を詰めて（.25rem → .1875rem）中心を揃える。
 * 他の値は style.css のまま。
 */
.b--gn__one__icon {
	margin-top: 0.1875rem;
}


/* =============================================================================
 * /ir/store/ 事業一覧アコーディオン 段3（会社）
 *
 * TABAYAグループを最上段に据えたことで階層が4段になり、
 * 段2(.ci--acc__trg)と段4(.ci--acc__sub-trg)の間に一段増えた。
 * style.css に該当スタイルがないためここで定義する。
 * 開閉のJSは既存の subtoggle を流用しているので is-open が付く。
 * ========================================================================== */

.ci--acc__mid-i:nth-of-type(n + 2) .ci--acc__tar-inner {
	margin-top: 1.875rem;
}

.ci--acc__mid-trg {
	align-items: center;
	border-bottom: 1px solid #d0d0d0;
	display: flex;
	justify-content: space-between;
	padding: 0.4375rem 9.0909090909% 0.4375rem 0;
	position: relative;
	width: 100%;
}

.ci--acc__mid-trg-txt {
	font-size: 1.0625rem;
	letter-spacing: 0.02em;
	line-height: 1.75rem;
	transition: color 0.5s cubic-bezier(0.13, 0.08999, 0.1, 1);
}

.pc .ci--acc__mid-trg:hover .ci--acc__mid-trg-txt,
.pc .ci--acc__mid-trg:focus-visible .ci--acc__mid-trg-txt {
	color: #20239F;
}

.ci--acc__mid-ico {
	height: 1rem;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1rem;
}

.ci--acc__mid-ico:before,
.ci--acc__mid-ico:after {
	background: #20239F;
	content: "";
	height: 1rem;
	left: 50%;
	position: absolute;
	top: 50%;
	transition: transform 0.5s cubic-bezier(0.4, 0.1, 0.2, 1);
	width: 0.0625rem;
}

.ci--acc__mid-ico:before {
	transform: translate(-50%, -50%);
}

.ci--acc__mid-ico:after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.ci--acc__mid-i.is-open .ci--acc__mid-ico:before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.ci--acc__mid-i.is-open .ci--acc__mid-ico:after {
	transform: translate(-50%, -50%) rotate(135deg);
}

.ci--acc__mid-win {
	height: 0;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.ci--acc__mid-tar {
	padding-top: 2.0625rem;
}

/* 段4は段3の中に入るので、一段深くインデントする */
.ci--acc__mid-tar .ci--acc__tar-inner {
	padding-left: 12.3076923077%;
}

@media screen and (min-width: 62.5em) {
	.ci--acc__mid-ico {
		right: 1.75rem;
	}

	.ci--acc__mid-trg {
		padding-right: 7.1428571429%;
	}

	.ci--acc__mid-trg-txt {
		font-size: 1.1875rem;
		line-height: 2.125rem;
	}

	.ci--acc__mid-tar .ci--acc__tar-inner {
		padding-left: 20%;
	}
}


/* =============================================================================
 * /corporate-profile/ メインビジュアル未設定時
 *
 * .ai--ct は .ai--visu へ食い込ませる前提で負のマージン（SP -29.49% / PC -15%）を
 * 持ち、食い込んだ分を padding-top（SP calc(5.1875rem + 29.48718%) /
 * PC calc(7rem + 15%)）で押し戻している。
 * 画像を入稿していないと .ai--visu が出力されず、負のマージンが
 * ページヘッダー(.m--phd)に被って背景グラデーションがタイトルに重なる。
 *
 * 画像がないときは食い込みが不要なので、padding-top から%分を落として
 * 基本値だけにし、代わりに .ai--visu が持っていた上マージンを
 * .ai--ct 側に持たせてヘッダーとの間隔を保つ。
 * ========================================================================== */

.ai--ct._novisu {
	margin-top: 0.75rem;
	padding-top: 5.1875rem;
}

@media screen and (min-width: 62.5em) {
	.ai--ct._novisu {
		margin-top: 1.0625rem;
		padding-top: 7rem;
	}
}


/* =============================================================================
 * /corporate-profile/ 本文中のリンク（入稿HTMLの ._a）
 *
 * style.css では青（#192eca）の下線になっている。
 * 本文と同じ黒＋下線にし、ホバーは他のリンクと同じ .h--op に揃えて
 * opacity を下げる。
 * ========================================================================== */

.ai--one__dd ._a {
	color: inherit;
	text-decoration: underline !important;
}

.pc .ai--one__dd ._a {
	transition: opacity 0.3s cubic-bezier(0.13, 0.08999, 0.1, 1);
}

.pc .ai--one__dd ._a:hover,
.pc .ai--one__dd ._a:focus-visible {
	opacity: 0.25;
}


/* ==========================================================================
 * TABAYAロゴ（ロゴタイプ）のサイズ調整
 *
 * 旧ロゴは縦2段（約3.3:1）と横1行（約7.3:1）だったが、
 * 新しいロゴタイプは 557.93 : 34（約16.4:1）と大きく横長になる。
 * 枠の縦横比が合わないとロゴが枠内で縮んで表示されるため、
 * 差し替えた箇所の幅・高さをロゴの比率に合わせ直す。
 *
 * 対象:
 *   .b--ft__lg      … フッター（pagefooter.php）
 *   .b--lg          … 追従ヘッダー（header.php）
 *   .b--nv__hd__lg  … ナビを開いた時の上部（footer.php）
 * ========================================================================== */

.b--ft__lg {
	width: 12rem;
	height: 0.75rem;
}

.b--lg {
	width: 10rem;
	height: 0.625rem;
}

/*
 * PCはロゴが小さいので拡大する。幅によって2段階。
 *   62.5em(1000px)〜 … 1.3倍（10rem → 13rem）
 *   75em(1200px)〜   … 1.5倍（10rem → 15rem）
 * 1000px付近でナビとの間隔が詰まるため、1.5倍は1200px以上に限る。
 *
 * あわせてロゴ下端をヘッダーリンクの文字の下端（ベースライン）に合わせる。
 *   ナビ .b--gn        … top:2rem
 *   リンク .b--gn__one__a … padding-top .5em（font-size .75rem なので .375rem）
 *   ラベル             … font-size .75rem / line-height 1.2（行ボックス .9rem）
 *   → ベースラインは 2 + .375 + (.9-.75)/2 + .75*0.8 = 3.05rem
 *   ロゴ高さを引いた値を top にする（13rem時 2.2375rem / 15rem時 2.1125rem）。
 * SPは指示どおり据え置き。
 */
@media screen and (min-width: 62.5em) {
	.b--lg {
		height: 0.8125rem;
		top: 2.2375rem;
		width: 13rem;
	}
}

@media screen and (min-width: 75em) {
	.b--lg {
		height: 0.9375rem;
		top: 2.1125rem;
		width: 15rem;
	}
}

/*
 * style.css は `.is-siteloaded.is-home .b--lg{opacity:0}` でTOPページの
 * ヘッダーロゴを常時非表示にしているが、FVでもロゴを見せるため表示に戻す。
 *
 * ただしスクロール後の挙動は他ページと同じにする。
 * app.js は1画面ぶん(vh-100)スクロールすると html に is-scrolled を、
 * 上方向スクロールで is-scrollup を付ける。style.css 側は
 *   .is-siteloaded.is-scrolled .b--lg          → 隠す
 *   .is-scrolled.is-scrollup .b--lg            → 戻す
 * としているが、上の .is-home の上書き（詳細度 0,3,1）が
 * それらより強いためTOPだけロゴが残り続けていた。
 * 同じ2状態をTOP用の詳細度で書き直して追従させる。
 */
html.is-siteloaded.is-home .b--lg {
	opacity: 1;
	pointer-events: auto;
}

/* FVを抜けたら隠す */
html.is-siteloaded.is-home.is-scrolled .b--lg {
	opacity: 0;
	pointer-events: none;
}

/* 上スクロールで戻す */
html.is-siteloaded.is-home.is-scrolled.is-scrollup .b--lg {
	opacity: 1;
	pointer-events: auto;
}

/*
 * ナビ内ロゴは枠の比率(8.75rem : 0.546875rem = 16.0)がロゴの実比率
 * (557.93 : 34 = 16.41)より縦に詰まっており、幅140pxで描画される
 * ロゴの高さ8.53pxに対して枠が8.75px＝余裕が0.22pxしかなかった。
 * svg は overflow:hidden なのでサブピクセルの丸めで上下が欠ける。
 * preserveAspectRatio は既定の meet＝幅に合わせて縮小され上下は中央に
 * 余白として残るだけなので、枠だけ高くしてもロゴの見た目の大きさと
 * 位置(.b--nv__hd__bd の align-items:center)は変わらない。
 */
.b--nv__hd__lg {
	width: 8.75rem;
	height: 0.625rem;
}

@media screen and (min-width: 62.5em) {
	/* 幅10rem時のロゴ実高は0.6094rem。上と同じ理由で枠に余裕を持たせる */
	.b--nv__hd__lg {
		width: 10rem;
		height: 0.6875rem;
	}

	/* PCでは大きく見えるため、旧ロゴ基準から30%縮める */
	.b--ft__lg {
		width: 9.8rem;
		height: 0.6125rem;
	}
}


/* =============================================================================
 * トップページ FV（KV）カルーセル
 *
 * 従来は top-kv の1〜3のうちPHP側でランダムに1枚選んで表示していたが、
 * 登録されている枚数ぶんをカルーセルとして自動再生するように変更。
 * 色は --spread/--pcread/--kvshadow を .tp--hd（header）
 * に持たせ、子要素はそれを継承する形にしている。スライド切替時は
 * custom.js がこの header 側のカスタムプロパティを書き換えるだけでよい。
 * ========================================================================== */

.tp--hd__kv {
	height: 100%;
	position: relative;
	width: 100%;
}

.tp--hd__kv__i {
	height: 100%;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	transition: opacity 1.2s ease;
	width: 100%;
	z-index: 0;
}

.tp--hd__kv__i.is-active {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}

/*
 * SPは SEE SITE を出さない代わりに、スライド画像全体をリンクにする（URL設定時のみ出力）。
 * 非アクティブのスライドは親の pointer-events: none で押せないため、表示中のスライドのURLに飛ぶ。
 */
.tp--hd__kv__lnk {
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
}

@media screen and (min-width: 56.1875em) {
	.tp--hd__kv__lnk {
		display: none;
	}
}

/*
 * SEE SITE は PC のみ表示。
 * SPでは右下だとハンバーガーメニューと重なるため非表示にし、下矢印（.tp--hd__btn）を残す。
 * （SPの外部サイト遷移は .tp--hd__kv__lnk でスライド画像全体をリンクにして代替）
 */
.tp--hd__see {
	align-items: center;
	bottom: .9375rem;
	display: none;
	height: 1rem;
	left: 7.6923076923%;
	position: absolute;
	transform: translateZ(0);
	z-index: 5;
}

.tp--hd__see__lnk {
	align-items: center;
	color: var(--spread, #fff);
	display: flex;
	gap: .375rem;
}

.tp--hd__see__tx {
	font-size: .625rem;
	letter-spacing: .05em;
	line-height: 1;
}

.tp--hd__see__ico {
	display: block;
	height: .4583333333rem;
	position: relative;
	width: .625rem;
}

.tp--hd__see__ico .c--sg {
	display: block;
	width: 100%;
}

.tp--hd__see__ico ._bg {
	fill: currentColor;
}

/*
 * インジケーターは下部中央。停止ボタン・枚数表示・進捗バーは廃止し、
 * スライド数ぶんのドットだけで現在地を示す。
 */
.tp--hd__kvctl {
	align-items: center;
	bottom: .9375rem;
	color: var(--spread, #fff);
	display: flex;
	height: 1rem;
	justify-content: center;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	z-index: 5;
}

.tp--hd__kvctl__ticks {
	align-items: center;
	display: flex;
}

.tp--hd__kvctl__tick {
	align-items: center;
	display: flex;
	height: 1rem;
	justify-content: center;
	padding: 0 .3125rem;
	position: relative;
}

/*
 * ドットの直径は整数pxに丸める。
 * ルートの font-size が画面幅連動（vw）のため .375rem は 6.29px のような
 * 小数になり、1px の枠線が縦横で別々にピクセルへ丸められて楕円に見える。
 * round() 非対応ブラウザは従来どおりの rem 指定で表示する。
 */
.tp--hd__kvctl__tick::before {
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 50%;
	content: "";
	display: block;
	flex-shrink: 0;
	height: .375rem;
	height: round(.375rem, 1px);
	transition: background-color .3s cubic-bezier(.13, .08999, .1, 1);
	width: .375rem;
	width: round(.375rem, 1px);
}

.tp--hd__kvctl__tick.is-active::before {
	background: currentColor;
}

@media screen and (min-width: 56.1875em) {
	.tp--hd__see {
		bottom: 1.875rem;
		display: flex;
		left: auto;
		right: 5%;
	}

	.tp--hd__see__lnk {
		color: var(--pcread, #fff);
	}

	.tp--hd__kvctl {
		bottom: 1.875rem;
		color: var(--pcread, #fff);
	}
}


/* =============================================================================
 * TOP フッター前バナーエリア 4件目以降の折り返し
 *
 * style.css は3件を1行に収める前提で組まれている。
 *   .m--fb__one            → width:32.2916666667%
 *   .m--fb__one:nth-of-type(n+2) → margin-left:1.5625%
 *   32.2916666667% * 3 + 1.5625% * 2 = 100%（3件でちょうど1行）
 *
 * .m--fb__bd は flex-wrap:wrap / justify-content:flex-start のため折り返し自体はするが、
 * 4件目にも nth-of-type(n+2) の左マージンが乗って行頭がずれ、行間も詰まる。
 * 3列グリッドとして成立するよう、行頭の左マージンを外して行間を足す。
 *
 * SPは .m--fb__one が width:100% の縦積みなので件数が増えても崩れない。
 * ========================================================================== */

@media screen and (min-width: 48em) {
	/* 各行の先頭（1, 4, 7件目…）は左揃えにする */
	.m--fb__one:nth-of-type(3n + 1) {
		margin-left: 0;
	}

	/* 2行目以降の行間。列間(1.5625%)と同じ値で、%は親の幅基準なので見た目も揃う */
	.m--fb__one:nth-of-type(n + 4) {
		margin-top: 1.5625%;
	}
}


/* =============================================================================
 * 会社概要ページ 本文内リンクの下線・ホバー
 *
 * style.css の `a{text-decoration:none}` が効いているため、本文に <a> を書いても
 * 下線が出ない。この画面の本文リンクにだけ下線を戻す。
 *
 * スコープは二重に絞っている。
 *   [data-pj-dir="aboutInfo"] … company-info.php の <main> にしか付いていない
 *   .ai--one__dd p.c--readstrong … 定義リストの本文段落
 * Map / More Info ボタン(.m--btn)は p の外にあるため当たらない。他ページも同様。
 *
 * ホバーの opacity と transition はテーマ共通の .h--op と同じ値に揃えている。
 * ========================================================================== */

[data-pj-dir="aboutInfo"] .ai--one__dd p.c--readstrong a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
	-webkit-transition: opacity 0.3s cubic-bezier(0.13, 0.08999, 0.1, 1);
	-o-transition: opacity 0.3s cubic-bezier(0.13, 0.08999, 0.1, 1);
	transition: opacity 0.3s cubic-bezier(0.13, 0.08999, 0.1, 1);
}

[data-pj-dir="aboutInfo"] .ai--one__dd p.c--readstrong a:hover,
[data-pj-dir="aboutInfo"] .ai--one__dd p.c--readstrong a:focus-visible {
	opacity: 0.25;
}

/* =============================================================================
 * 見出しの頭文字だけ色を変える装飾を廃止し、本文と同じ色に揃える
 *
 * style.css は英字見出しの1文字目にだけブランドカラーを当てている。
 *   .tp--ns__hd ._line:first-child ._i:first-child … TOP News の「N」(#192eca)
 *   .tp--ob__hd / .tp--oa__hd の同指定          … 現在は該当セクションが無い
 *   .sm--ttl__o / __n (#20239F) / __b (#479ce1) / __r (#192eca)
 *                                                … サイトマップの見出し1文字目
 * いずれも inherit で見出し全体の色（黒）に戻す。
 * ========================================================================== */

.tp--ns__hd ._line:first-child ._i:first-child,
.tp--ob__hd ._line:first-child ._i:first-child,
.tp--oa__hd ._line:first-child ._i:first-child,
.sm--ttl__o,
.sm--ttl__n,
.sm--ttl__b,
.sm--ttl__r {
	color: inherit;
}

/* =============================================================================
 * EN時、ヘッダー右エリアの縦線とContactの間に余分な隙間ができる
 *
 * .b--gn__sb は先頭に縦線(:before)を置き、padding-left で1件目との間隔を取る。
 * 中の項目は .b--gn__one:nth-of-type(n+2) で margin-left:1.25rem。
 *
 * ENでは1件目のRecruitが html[lang=en-US] .b--gn__one._enhide で
 * width:0 / margin:0 に畳まれるが、2件目のContactの margin-left は残るため、
 * 縦線からの間隔が padding + 1.25rem になってしまう。
 * 畳まれた項目が先頭にあるときだけ、次の項目の左マージンを外す。
 * ========================================================================== */

html[lang="en-US"] .b--gn__sb .b--gn__one._enhide:first-child + .b--gn__one {
	margin-left: 0;
}

/*
 * さらに、縦線とContactの間隔（コンテナの padding-left）をEN時だけ 0.25rem 詰める。
 * 元値は 1.3125rem(62.5em〜) / 1.9375rem(75em〜)。JAは従来どおり。
 */
@media screen and (min-width: 62.5em) {
	html[lang="en-US"] .b--gn__sb {
		padding-left: 1.0625rem;
	}
}

@media screen and (min-width: 75em) {
	html[lang="en-US"] .b--gn__sb {
		padding-left: 1.6875rem;
	}
}

/* =============================================================================
 * 面グラデーションの濃い側を #e6e6e6 → #F7F7F7 に置き換える
 *
 * style.css は各ページの下地に「濃い側 #e6e6e6 → 透明」の帯を敷いている。
 * 透明側は hsla(0,7%,95%,0)（= #F2F1F0 のアルファ0）なので見た目には出ず、
 * 実際に見えている色は #e6e6e6 のみ。ここを #F7F7F7 に上げる。
 *
 * background の一括指定ではなく background-image だけを上書きして、
 * .tp--ns__one._ipt が持つ position / repeat / padding-box を壊さないようにする。
 * 角度・カラーストップ位置は元指定のまま。
 *
 * 対象:
 *   .ai--ct           … 会社概要
 *   .am--ct           … 社長メッセージ
 *   .ah--list:before  … 沿革
 *   .tp--ns__one._ipt … TOP Newsのピックアップ（縦方向）
 *   .av--vd__sl__win  … 動画ページ（縦方向）
 * ========================================================================== */

.ai--ct,
.am--ct,
.ah--list:before {
	background-image: linear-gradient(90deg, #f7f7f7 0, hsla(0, 7%, 95%, 0));
}

.av--vd__sl__win {
	background-image: linear-gradient(180deg, hsla(0, 7%, 95%, 0) 0, #f7f7f7);
}

.tp--ns__one._ipt {
	background-image: linear-gradient(180deg, hsla(0, 0%, 90%, 0), #f7f7f7);
}

@media screen and (min-width: 62.5em) {
	.ai--ct,
	.am--ct {
		background-image: linear-gradient(90deg, #f7f7f7 0, hsla(0, 7%, 95%, 0) 59.75%);
	}
}

/* =============================================================================
 * 経営理念・行動規範に残っていた旧ブランドカラーをブランドカラーに統一
 *
 * .ap--rail__ci の丸だけは指定色 #17216b のまま（HTML側の data-color-from /
 * data-color-to と揃える）。他はサイト共通の #20239F。
 *
 * philosophy … .ap--rail__ci     … スクロールレール上の丸（#dec1b5 ベージュ）
 * our-values … ._tip             … m--ctsc のスクロールバーつまみ（#ea8840 オレンジ）
 *                                  .av--md__one__rd と .av--sbm__flm__tx の2種
 *              .av--sbm__flm__sub__li … 補足リストの文字（#432006 焦げ茶）
 * ========================================================================== */

.ap--rail__ci {
	background-color: #17216b;
}

.av--md__one__rd ._tip,
.av--sbm__flm__tx ._tip {
	background-color: #20239F;
}

.av--sbm__flm__sub__li {
	color: #20239F;
}

/*
 * 丸(.ap--rail__ci)が紺になったことで、真上に重なる見出しの黒文字が読めなくなる。
 * 重なっている見出しだけ白にする。クラスの付け外しは custom.js が行う。
 */

.ap--one__ttl {
	transition: color 0.35s cubic-bezier(0.13, 0.08999, 0.1, 1);
}

.ap--one__ttl.is-oncircle {
	color: #ffffff;
}


/* =============================================================================
 * ブランドカラーの青を #20239F に統一した際の除外
 *
 * サイト全体の紺 #17216b は #20239F に置き換えたが、
 * 下記のマウスカーソル（青丸＋白矢印）は従来の色を維持する指定。
 *   .b--cur__in … カーソルの丸。style.css の値を元の #17216b に戻す。
 * JS側（app.js）は data-fc 属性、無ければ既定値 #17216B を使うので、
 * HTMLの data-fc="#17216B"（our-values / brands / governance）と合わせて
 * 丸は一貫して #17216b になる。
 *
 * ニュース等のホバー色 #192eca、philosophy のレール上の丸 #17216b も
 * 変更対象外（それぞれ style.css / 上の .ap--rail__ci のまま）。
 *
 * スプラッシュのロゴマーク（header.php の #___tabayaSymbol）もロゴ規定色
 * #17216b（PANTONE 2748C）のまま。VIガイドライン指定のため置き換えないこと。
 * ========================================================================== */

.pc .b--cur__in {
	background-color: #17216b;
}


/* =============================================================================
 * SNS 未設定時にフッターロゴが右に寄る問題
 *
 * SP〜タブレット(〜999px)の .b--ft__gs は
 * flex-direction:row-reverse + justify-content:space-between。
 * SNS(.b--ft__sns)と ロゴ(.b--ft__lg)の2要素がある前提の指定のため、
 * 管理画面「TOP」のSNS欄が空で .b--ft__sns 自体が出力されないと
 * 残ったロゴ1つが main-start(= row-reverse なので右端)に寄ってしまう。
 *
 * ロゴが .b--ft__gs の最初の子＝SNSが無い時だけ margin-right:auto で
 * 余白を右側に吸わせ、左寄せを維持する。
 * PC(62.5em〜)は .b--ft__gs が display:block でロゴは margin-left:auto の
 * 右寄せが正しいレイアウトなので、この指定を打ち消す。
 * ========================================================================== */

.b--ft__gs > .b--ft__lg:first-child {
	margin-right: auto;
}

@media screen and (min-width: 62.5em) {
	.b--ft__gs > .b--ft__lg:first-child {
		margin-right: 0;
	}
}


/* =============================================================================
 * SP フッターロゴのサイズをヘッダーロゴに揃える
 *
 * 上の「TABAYAロゴのサイズ調整」でフッターは 12rem / 0.75rem、
 * 追従ヘッダー .b--lg は 10rem / 0.625rem にしてあるので、
 * SP だけフッターをヘッダーと同じ 10rem / 0.625rem に合わせる。
 * PC(62.5em〜)のフッターは 9.8rem / 0.6125rem のままが正なので、
 * max-width で SP に限定する(指定なしだとPC側も上書きしてしまう)。
 * ========================================================================== */

@media screen and (max-width: 62.4375em) {
	.b--ft__lg {
		width: 10rem;
		height: 0.625rem;
	}
}


/* =============================================================================
 * SP ヘッダーロゴの位置を行間半分ほど上げる
 *
 * .b--lg は position:fixed の top 指定。SP(〜999px)の 1.875rem を
 * 0.375rem(≒行間の半分)詰めて 1.5rem にする。
 * PC(62.5em〜)は style.css の top:2.125rem / .is-faqsite の 2.3125rem が
 * 正なので、max-width で SP だけに限定する。
 * ========================================================================== */

@media screen and (max-width: 62.4375em) {
	.b--lg {
		top: 1.5rem;
	}
}


/* =============================================================================
 * サステナビリティのみ従来の欧文フォントを維持する
 *
 * サイト全体の欧文は Manrope / classico-urw から tt-commons-pro へ切り替えたが、
 * サステナビリティは従来の見た目を保つ。和文（MFW-MidashiGoPr6-MB31 /
 * MFW-GothicBBBPr6-Medium）は変わっていないのでそのまま。
 *
 *   .f--mono / __el / __lg / __med / __sb … Manrope
 *   .f--clul・.f--en                      … classico-urw（和文フォールバックあり）
 *   .f--num                               … classico-urw（KPIの数値。和文なし）
 *
 * 対象範囲
 *   [data-pj-dir^="sustainability"] … サステナビリティ配下の各ページ
 *                                     （Home / Detail / management / news）
 *   .tp--sb                         … TOPのサステナビリティセクション
 *   .ss-- / .sn-- / .snd-- 接頭辞   … サステナビリティ専用パーツ
 *
 * フォントの読み込み（Google Fonts の Manrope、Adobe Fonts キット dne4hbc の
 * classico-urw）は header.php 側で対象ページだけ行っている。
 * ヘッダー・フッターは全ページ共通のパーツなのでサイト共通のフォントのまま。
 * 例外として矢印付きリンク（View More / Back to List など）は tt-commons-pro に
 * している（末尾の「ボタン・リンクの欧文ラベルを Light に下げる」を参照）。
 * ========================================================================== */

[data-pj-dir^="sustainability"] .f--mono,
[data-pj-dir^="sustainability"] .f--monoel,
[data-pj-dir^="sustainability"] .f--monolg,
[data-pj-dir^="sustainability"] .f--monomed,
[data-pj-dir^="sustainability"] .f--monosb,
.tp--sb .f--mono,
.tp--sb .f--monoel,
.tp--sb .f--monolg,
.tp--sb .f--monomed,
.tp--sb .f--monosb,
.ss--pager__li-i,
.ss--srh__acc-trg-txt,
.ss--card__date,
.snd--sec__ft-sns-txt,
.sn--card__date {
	font-family: Manrope, sans-serif;
}

[data-pj-dir^="sustainability"] .f--clul,
[data-pj-dir^="sustainability"] .f--en,
.tp--sb .f--clul,
.tp--sb .f--en,
.ss--srh__link-txt,
.snd--head__li-txt,
.snd--ns__ttl {
	font-family: classico-urw, YakuHanJP, "MFW-GothicBBBPr6-Medium", sans-serif;
}

/* KPIのカウントアップ数値。従来は和文をフォールバックに挟まない指定 */
[data-pj-dir^="sustainability"] .f--num,
.tp--sb .f--num {
	font-family: classico-urw, sans-serif;
}


/* =============================================================================
 * tt-commons-pro の標準ウェイトを Light に下げる
 *
 * style.css は tt-commons-pro の基本ウェイトを Regular(400) にしている。
 * これを Light(300) に、Windows だけ Ultra Light(200) にする。
 * Windowsは同じウェイトでも太く見えるため一段軽くする。判定は app.js が
 * html に付ける windows クラス（vndr.js のUA判定）を使う。
 *
 * 対象は「400で組まれている」ものだけ。ウェイト違いのバリエーション
 *   .f--monoel(200) / .f--monolg(300) / .f--monomed(500) / .f--monosb(600)
 * は意図的な指定なのでそのまま。
 *
 * サステナビリティは欧文が classico-urw / Manrope（tt-commons-proではない）
 * なので、従来どおり400を維持する。末尾の打ち消し指定がそれ。
 * ========================================================================== */

.f--clul,
.f--en,
.f--num,
.f--mono,
.ci--pager__li-i,
.sm--ttl,
.irover--li__num,
.irst--dividend-blc__num {
	font-weight: 300;
}

html.windows .f--clul,
html.windows .f--en,
html.windows .f--num,
html.windows .f--mono,
html.windows .ci--pager__li-i,
html.windows .sm--ttl,
html.windows .irover--li__num,
html.windows .irst--dividend-blc__num {
	font-weight: 200;
}

/*
 * サステナビリティは対象外（従来のまま400）。
 * 上の html.windows 指定と詳細度を揃えるため html から書き、後ろに置いて勝たせる。
 */
html [data-pj-dir^="sustainability"] .f--clul,
html [data-pj-dir^="sustainability"] .f--en,
html [data-pj-dir^="sustainability"] .f--num,
html [data-pj-dir^="sustainability"] .f--mono,
html .tp--sb .f--clul,
html .tp--sb .f--en,
html .tp--sb .f--num,
html .tp--sb .f--mono,
html .ss--pager__li-i,
html .ss--srh__link-txt,
html .ss--card__date,
html .snd--head__li-txt,
html .snd--ns__ttl,
html .sn--card__date {
	font-weight: 400;
}


/* =============================================================================
 * ボタン・リンクの欧文ラベルを Light に下げる
 *
 * View More / All News / Back to Top / Read more など、ボタンやリンクの中の
 * 欧文ラベル。style.css は 1語目 SemiBold(600) + 2語目 Regular(400) の2トーンで
 * 組んでいるが、ラベル全体を Light(300)、Windows だけ Ultra Light(200) に揃える。
 *
 * 上の「tt-commons-pro の標準ウェイトを Light に下げる」はウェイト違いの指定
 * （.f--monosb など）を意図的に除外しているため、ラベル側はここで別に指定する。
 * サステナビリティ（Manrope / classico-urw）のラベルも同じ扱いにする。
 * サステナ側の打ち消し指定（html .tp--sb .f--mono = 0,2,1）と詳細度を揃えたうえで、
 * ファイル末尾に置いて後勝ちさせている。
 *
 * IRメニューの Back to IR Top、サステナの Back to Sustainability / Back to List
 * （矢印付きリンク）は 1語目 SemiBold(600) + 残り Medium(500) で組まれているが、
 * これも同じく全体を Light に揃える。
 *
 * モーダルの Close / 絞り込みの Filter は機能ボタンなので対象外（従来のまま）。
 * ========================================================================== */

html .m--btn__label .m--btn__t,
html .m--bktopb__label .m--bktopb__t,
html .m--btb .m--btb__label,
html .snd--btn__tl .snd--btn__lab,
html .tp--abu__ctrl__label .tp--abu__ctrl__t,
html .av--md__one__btn__lab .av--md__one__btn__dir,
html .mi--footnav__head-link-txt,
html .mi--footnav__head-link-txt span,
html .ss--arrow-link-txt,
html .ss--arrow-link-txt span {
	font-weight: 300;
}

html.windows .m--btn__label .m--btn__t,
html.windows .m--bktopb__label .m--bktopb__t,
html.windows .m--btb .m--btb__label,
html.windows .snd--btn__tl .snd--btn__lab,
html.windows .tp--abu__ctrl__label .tp--abu__ctrl__t,
html.windows .av--md__one__btn__lab .av--md__one__btn__dir,
html.windows .mi--footnav__head-link-txt,
html.windows .mi--footnav__head-link-txt span,
html.windows .ss--arrow-link-txt,
html.windows .ss--arrow-link-txt span {
	font-weight: 200;
}

/*
 * サステナの矢印付きリンクは欧文を tt-commons-pro にする（サイト共通と同じ）。
 * 冒頭の「サステナビリティのみ従来の欧文フォントを維持する」で Manrope に
 * なっていたもの。詳細度（0,2,0）を上回るよう html から書く。
 */
html [data-pj-dir^="sustainability"] .m--btn__t,
html .tp--sb .m--btn__t,
html .ss--arrow-link .ss--arrow-link-txt,
html .ss--arrow-link .ss--arrow-link-txt span {
	font-family: tt-commons-pro, sans-serif;
}


/* =============================================================================
 * フッターのサブリンクを1行に収める（PCのみ）
 *
 * style.css の PC レイアウトは、リンク群 .b--ft__gn を calc(100% - 11.25rem)、
 * 右側 11.25rem をロゴの .b--ft__gs に割り当てた2カラム。
 * 「取引先様コンプライアンス相談窓口」を足したことでリンクの必要幅が
 * カラム幅を超え、最後の項目が2行目に落ちるようになった。
 *
 * そこでリンク群を横幅いっぱいに広げ、ロゴを次の行へ送る。
 *
 * 間隔の出し方は2段構え。1行に収まる幅では space-between で余った幅を
 * 均等配分し、横幅いっぱいに使う。収まらない幅では space-between だと
 * 折り返した行の項目が左右に散るため、左詰め（flex-start）に戻して
 * 元の間隔（1.75rem）で並べる。
 *
 * 切り替えの幅は「1行に必要な幅 ÷ 0.8」（フッターの左右 padding が各10%
 * のため内側は画面幅の80%）。日本語は必要幅 1006px → 80em、英語はラベルが
 * 長く 1048px → 83em。
 * SP（62.5em 未満）はリンクが縦積みのため対象外。
 * ========================================================================== */

@media screen and (min-width: 62.5em) {
	html .b--ft__gn {
		width: 100%;
	}

	html .b--ft__gs {
		margin: 2.75rem 0 0;
		width: 100%;
	}

	html .b--ft__lg {
		margin: 0 0 0 auto;
	}

	html .b--ft__sv {
		gap: 1.75rem;
		justify-content: flex-start;
	}

	html .b--ft__sone {
		margin-right: 0;
	}
}

/* 1行に収まる幅のときだけ両端揃えにして、横幅いっぱいに使う */

@media screen and (min-width: 80em) {
	html[lang="ja"] .b--ft__sv {
		gap: 0.75rem;
		justify-content: space-between;
	}
}

@media screen and (min-width: 83em) {
	html[lang^="en"] .b--ft__sv {
		gap: 0.75rem;
		justify-content: space-between;
	}
}