/* ============================================================
   会社案内ページ（page-company.html）専用スタイル
   Figma:
     PC_ABOUT_修正_W1920px（node 565:306）
     SP_会社案内_W375px（node 859:1000）
   PC値はすべて1920px基準からclamp(V*0.4px, (V/19.2)vw, Vpx)で
   768px〜1920pxの間をスケールさせる、front-page.css/main.cssと同じ規約。
   ============================================================ */

.ss-company {
	position: relative;
	/* 点線のにょろにょろ装飾がPC幅によっては画面端からはみ出す件は、
	   main.cssのhtml{overflow-x:hidden}側で吸収している。ここに
	   overflow-x:hiddenを置くと、CSS仕様上overflow-yが自動的にautoへ
	   格上げされ(overflow-y:visibleを明示しても同様)、コンテンツが
	   ボックスよりわずかに高くなった際にこの要素自体が縦スクロールの
	   入れ子コンテナになってしまうため、ここでは指定しない。 */
	background: #fff;
}

/* ============ 点線のにょろにょろ装飾（会社概要の右／アクセスの左） ============
   Figmaの元データは回転・スキュー済みの図形だが、この環境ではCSSの
   hypot()/cqw/cqh(コンテナクエリ単位)が正しく評価されず、回転前の
   サイズが再現できなかった。そのため、SVG自体は元の見た目のまま
   （回転前のオリジナル書き出し済みアセット）を使い、回転はかけずに
   実際のFigmaデザイン画面を見ながら位置とサイズを目視調整している。 */
.ss-company__squiggle {
	display: none;
	position: absolute;
	pointer-events: none;
	z-index: 0;
	/* mainがlayout:constrainedのため、WordPressが直接の子要素に自動で
	   max-width:{contentSize}(1100px)を当てて幅を制限してしまう。
	   このデコレーションはページ全幅基準の絶対配置なので無効化する。 */
	max-width: none;
}

.ss-company__squiggle-viewport,
.ss-company__squiggle-inner {
	display: block;
	width: 100%;
	height: 100%;
}

.ss-company__squiggle-inner img {
	display: block;
	width: 100%;
	height: 100%;
}

@media (min-width: 768px) {
	.ss-company__squiggle {
		display: block;
	}

	.ss-company__squiggle--about {
		left: clamp(638.8px, 83.177vw, 1597px);
		top: clamp(-66px, -3.4375vw, -26.4px);
		width: clamp(129.2px, 16.82vw, 323px);
		height: clamp(693.6px, 90.3125vw, 1734px);
	}

	.ss-company__squiggle--access {
		left: clamp(4px, 0.52vw, 10px);
		top: clamp(605.2px, 78.80vw, 1513px);
		width: clamp(137.2px, 17.8646vw, 343px);
		height: clamp(697.6px, 90.8333vw, 1744px);
	}
}

.ss-company.wp-block-group > * {
	margin-block-start: 0;
}

/* 3セクション（会社概要・アクセス・沿革）で同じコンテナ幅・中央寄せを
   共有することで、各セクションの縦文字ラベル・縦線が必ず同じ横位置に
   そろう。以前はアクセスだけ地図の横幅(823px)に合わせてこのコンテナ
   自体を広げていたが、中央寄せの都合で左端の位置がずれ、会社概要・
   沿革の縦線と横位置がそろわなくなっていた。 */
.ss-company__container {
	max-width: 1185px;
	margin: 0 auto;
	padding: 0 var(--ss-gap);
	box-sizing: border-box;
}

a {
	color: inherit;
}

/* ============ タイトル ============ */
.ss-company__intro {
	position: relative;
	padding: 13px 0 30px;
}

.ss-company__intro-stage {
	position: relative;
}

.ss-company__intro-eyebrow,
.ss-company__intro-title {
	position: relative;
	z-index: 1;
	margin: 0;
	color: #8cba984d;
	line-height: 1.2;
	white-space: nowrap;
}

.ss-company__intro-eyebrow {
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0.15em;
}

.ss-company__intro-title {
	font-size: 40px;
	font-weight: 700;
	letter-spacing: 0.15em;
}

/* 業務内容ページのBUSINESS/丸と同じ方式にする。以前はパズルを.intro-
   stage基準のposition:absoluteで独自に配置しており、COMPANYの文字幅も
   パズルの位置もそれぞれ別のvw基準で変化するため、PC幅を狭めていく
   ほど両者の間隔が不自然に広がっていた。COMPANYの文字を基準にした
   position:absolute(top:50%+transform)にすることで、間隔を固定しつつ
   文字幅にかかわらず位置関係が常に一致するようにする。 */
.ss-company__intro-title-wrap {
	position: relative;
	display: inline-block;
}

.ss-company__intro-puzzle {
	position: absolute;
	top: 50%;
	left: 100%;
	margin-left: 16px;
	transform: translateY(-50%);
	width: 91px;
	height: 114px;
	pointer-events: none;
}

.ss-company__intro-puzzle img {
	display: block;
	width: 100%;
	height: 100%;
}

/* ============ セクション共通: 縦文字ラベル ============ */
.ss-company__section-inner {
	position: relative;
}

.ss-company__label {
	position: relative;
	margin-bottom: 24px;
}

.ss-company__label-text {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 10px;
	row-gap: 8px;
}

/* JP（会社概要）とEN（Company Overview）は常に同じ「列」の中でJPが
   上・ENが下（SPでは横並び）になる一塊で、縦線はその塊の外側（右）に
   来る。JPとENをここでまとめておき、丸は.label-jp-wrap側でJPタイトル
   だけを基準にcenter揃えする（ENや縦線まで丸がはみ出さないように）。 */
.ss-company__label-column {
	order: 1;
	display: flex;
	flex-direction: row;
	align-items: baseline;
	column-gap: 10px;
}

.ss-company__label-jp-wrap {
	position: relative;
}

/* 丸の右下の角をJPタイトルの右下（＝「要」の右下）にぴったり合わせる。
   丸はタイトルよりずっと大きいので、この1点を基準にするだけで丸は
   自然にタイトルの左上側へ大きくはみ出す形になる。 */
/* Figma実データ: 丸は.label-jp-wrap（JPタイトル文字そのもの）を基準に
   left:-47px, top:-37pxで、会社概要・アクセス・沿革の3セクションとも
   同じ相対位置になる。 */
.ss-company__label-circle {
	position: absolute;
	left: -47px;
	top: -37px;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	z-index: 0;
	pointer-events: none;
}

.ss-company__label-circle--green {
	background: rgba(140, 186, 152, 0.2);
}

.ss-company__label-circle--white {
	background: rgba(255, 255, 255, 0.5);
}

.ss-company__label-jp {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	/* Figma実データ: 30pxフォントに対しleading(行送り)50px、つまり
	   文字自体の高さより20px（0.67em）余分に行間を取っている。この
	   縦方向の「行間」をletter-spacingで再現している。
	   line-height:1を明記しないと、縦書き(vertical-rl)ではline-height
	   が「行の太さ」＝横幅に化けるため、継承された既定値(1.6〜2倍)の
	   ぶんだけ文字の実サイズより幅広い当たり判定になり、丸の右下角を
	   ここに合わせても文字との間に余白ができてしまう。 */
	line-height: 1;
	/* Figma実データ: 18pxフォントに対しtracking 4.5px(=0.25em)。 */
	letter-spacing: 0.25em;
}

.ss-company__label-en {
	margin: 0;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.2em;
	color: #8cba98;
}

.ss-company__label-en--on-tint {
	color: #fff;
}

.ss-company__label-line {
	order: 3;
	flex-basis: 100%;
	height: 1px;
	background: #000;
}

.ss-company__label-line--on-tint {
	background: rgba(0, 0, 0, 0.3);
}

/* ============ 会社概要 ============ */
.ss-company__about {
	padding: 0 0 60px;
}

.ss-company__row {
	padding: 16px 0;
	border-bottom: 1px solid var(--ss-gray-outline);
}

.ss-company__row:first-child {
	padding-top: 0;
}

.ss-company__row-label {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.25em;
}

/* Figma実データ: 複数行になる住所・事業内容などの本文だけがline-height:2
   を使っており、商号・設立のような単一行の値はもっと詰まった行送り。
   line-height:2を全項目共通にすると単一行の項目まで無駄に高さを取り、
   結果的に項目間の余白が間延びして見えていたため下げる。 */
.ss-company__row-value {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
}

.ss-company__row-value a {
	color: #0b73ba;
	text-decoration: underline;
}

.ss-company__address-block + .ss-company__address-block {
	margin-top: 12px;
}

.ss-company__address-heading {
	margin: 0 0 4px;
	font-weight: 700;
	font-size: 14px;
}

.ss-company__address-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.8;
}

/* Figma実データ: 2行目「大阪駅前第2ビル3階」は左端に揃えず、1行目の
   「〒530-0001　」のぶんだけ右にずらして「大阪府〜」の開始位置に揃える。 */
.ss-company__address-text-indent {
	display: inline-block;
	padding-left: 88px;
}

.ss-company__partners {
	margin: 0;
	font-size: 14px;
	line-height: 2;
}

.ss-company__partners-note {
	margin: 8px 0 0;
	font-size: 13px;
	text-align: right;
}

/* ============ アクセス ============ */
.ss-company__access {
	/* ラベルの丸が上にはみ出しても白背景(ABOUTセクション側)に
	   かからないよう、この緑タイントの領域を上に十分広く取る。 */
	padding: 70px 0 60px;
	background: rgba(140, 186, 152, 0.4);
}

.ss-company__office + .ss-company__office {
	margin-top: 40px;
}

/* Figma実データ: 黒帯の高さは62px(PC)固定。paddingでなくline-heightで
   高さそのものを指定し、フォントサイズが変わっても崩れないようにする。 */
.ss-company__office-title {
	position: relative;
	/* 丸(.label-circle)はposition:absoluteの静的配置要素より常に
	   手前に描画されるため、黒帯が丸の半透明色を透かして薄く
	   見えていた。z-indexを与えて丸より確実に手前にする。 */
	z-index: 1;
	margin: 0 0 16px;
	padding: 0 20px;
	/* Figma実データ: 黒帯の高さは40px(SP)。 */
	line-height: 40px;
	background: #000;
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.25em;
	text-align: center;
}

.ss-company__office-map {
	border-radius: 10px;
	overflow: hidden;
	aspect-ratio: 340 / 277;
}

.ss-company__office-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.ss-company__transit {
	margin-top: 20px;
}

/* Google Mapの埋め込み(.office-map)と横幅を揃える。
   高さはFigma実データの45px(PC)固定でline-height指定。 */
.ss-company__transit-pill {
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 20px;
	padding: 0 16px;
	/* Figma実データ: 白背景ピルの高さは30px(SP)。 */
	line-height: 30px;
	background: #fff;
	border-radius: 21px;
	text-align: center;
	font-weight: 700;
	font-size: 14px;
	white-space: nowrap;
}

.ss-company__transit-cols {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* アイコン → 見出しテキスト → 白線、の3段積み。 */
.ss-company__transit-heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
}

.ss-company__transit-heading-text {
	margin: 0;
	font-size: 14px;
	white-space: nowrap;
}

.ss-company__transit-heading-line {
	display: block;
	width: 100%;
	height: 2px;
	background: #fff;
}

/* train-1.svg(38.5x50)とtrain-2.svg(50x50)でアスペクト比が違うため、
   width指定+height:autoだと縦の見た目サイズが揃わず、結果としてその下の
   見出しテキスト・白線の位置も左右でズレていた。正方形の枠に揃えて
   object-fit:containで収めることで、どちらも同じ枠サイズになる。 */
/* Figma実データ: アイコンの実寸は本社(JR/私鉄)側が約30x39、地下鉄側が
   約38x38と縦横比が異なるため、正方形の枠に揃えてobject-fit:containで
   収める（枠サイズは大きい方の地下鉄アイコンの実寸に合わせる）。 */
.ss-company__transit-icon {
	width: 38px;
	height: 38px;
	object-fit: contain;
	flex: 0 0 auto;
}

/* Figma実データ: 駅名+所要時間のブロックは列いっぱいに広がる左寄せでは
   なく、内容分の幅だけを取ってカラム内で中央寄せになっている。
   li単位のgridだと行ごとに列幅が独立してしまい駅名/所要時間が縦に
   揃わないため、<ul>自体を1つのgridにしてliはdisplay:contentsで
   グリッドアイテムだけを提供する形にし、列幅を全行で共有する。 */
.ss-company__transit-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	row-gap: 10px;
	align-items: baseline;
	justify-content: center;
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
}

.ss-company__transit-list li {
	display: contents;
}

/* 「〜から徒歩◯分」の開始位置を各駅で揃えるため、右寄せではなく
   駅名列を固定幅にしたグリッドにする（Figma実データ: JR/私鉄列は
   159px、地下鉄列は109px、駅名の最大文字数に合わせた固定オフセット。
   SP側はこのSPフォントサイズ(14px)でも最長の駅名が収まる幅を別途
   確保している）。 */
.ss-company__transit-list--jr {
	grid-template-columns: 110px max-content;
	column-gap: 8px;
}

.ss-company__transit-list--metro {
	grid-template-columns: 75px max-content;
	column-gap: 8px;
}

.ss-company__transit-list li b {
	white-space: nowrap;
}

.ss-company__transit-list li span {
	text-align: left;
}

.ss-company__transit-list em {
	font-style: normal;
	font-size: 18px;
	font-weight: 700;
	margin: 0 2px;
}

.ss-company__transit-note {
	box-sizing: border-box;
	width: 100%;
	margin-top: 20px;
	padding: 12px 16px;
	background: #fff;
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.8;
}

.ss-company__transit-note p {
	margin: 0;
}

.ss-company__transit-simple {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 16px 0 0;
	font-size: 14px;
}

/* Figma実データ(SP): 「阪急電鉄宝塚本線」と「石橋阪大前駅 東口から徒歩2分」は
   1行に流し込まず、駅名+所要時間の行を分けた2行構成になっている。
   Figmaのテキストはleading(行間)を持たない詰まった行送りのため、
   line-height:1にしないと標準の行間ぶん2行の間が離れて見える。 */
.ss-company__transit-simple-text {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ss-company__transit-simple-line {
	margin: 0;
	line-height: 1;
	white-space: nowrap;
}

.ss-company__transit-simple-line em {
	font-style: normal;
	font-size: 18px;
	font-weight: 700;
	margin: 0 2px;
}

/* ============ 沿革 ============ */
/* 「沿革」は2文字（会社概要=4文字・アクセス=4文字より短い）ぶん
   JPタイトル自体の高さが低く、同じ丸のサイズでも上にはみ出す量が
   大きい。そのため他セクションより上の余白を広く取り、アクセスの
   緑タイント背景に丸や本文が被らないようにする。
   （以前はここに大きなpadding-topとmargin-top:-80pxの打ち消しを
   組み合わせていたが、flex-wrapで折り返す横線(.label-line)の位置が
   その打ち消しの影響を受けてタイトルの上にずれてしまうバグがあった。
   丸の位置モデルを直した今はそこまで大きな余白が要らないため、
   打ち消し無しのシンプルなpadding-topだけにしている。） */
.ss-company__history {
	padding: 80px 0 60px;
}

.ss-company__history-intro {
	margin: 0 0 24px;
	font-size: 14px;
	line-height: 2;
}

.ss-company__history-bar {
	margin: 0;
	padding: 0 16px;
	/* Figma実データ: 枠の高さは50px固定。 */
	line-height: 50px;
	font-size: 15px;
	font-weight: 400;
	text-align: center;
}

.ss-company__history-bar b {
	font-weight: 700;
}

.ss-company__history-bar--arts {
	background: #efefef;
	color: #000;
}

.ss-company__history-bar--star {
	background: #1f8b5f;
	color: #fff;
	margin-top: 4px;
}

.ss-company__timeline {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 縦線は下端でぴったり止めず、矢印(::after)のぶん手前で止めて、
   矢印の先端がリストのすぐ下（アーツ年表→次の緑帯、スター年表→
   continue into the future）を指すようにする。 */
/* 縦線はスクロールで表示領域に入ったら上から下へ伸びるアニメーションを
   つける（company.jsがIntersectionObserverで.is-drawnを付与）。
   transform-origin:topでscaleYさせることで「伸びる」動きになる。 */
.ss-company__timeline::before {
	content: "";
	position: absolute;
	/* 丸(.timeline-dot, 10px)は77px+gap10px幅の20px列内でcenter揃えされ、
	   列内での中心位置は列開始(87px)+10px=97px。線の中心をそこに合わせる
	   （線幅2pxなのでleftは97-1=96px）。 */
	left: 96px;
	top: 0;
	bottom: 1px;
	width: 2px;
	background: rgba(140, 186, 152, 0.5);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 1.2s ease;
}

.ss-company__timeline.is-drawn::before {
	transform: scaleY(1);
}

@media (prefers-reduced-motion: reduce) {
	.ss-company__timeline::before {
		transform: none;
		transition: none;
	}
}

/* 非同期メッセージの矢印（シーケンス図でいう「非同期」表記）を表現するため、
   塗りつぶし三角形ではなく線だけで開いたV字（山形）を作る。正方形の
   右辺・下辺だけをボーダーで描き、45度回転させることで下向きの
   開いた矢印になる。縦線と同じ色・同じ半透明度にして、線がそのまま
   矢印に続いているように見せる（控え目で、線と矢印の境目が目立たない）。 */
.ss-company__timeline::after {
	content: "";
	position: absolute;
	/* translateX(-50%)で中心がleftの値になるため、丸の中心(97px)と同じ値。 */
	left: 97px;
	bottom: 2px;
	width: 8px;
	height: 8px;
	transform: translateX(-50%) rotate(45deg);
	border-right: 2px solid rgba(140, 186, 152, 0.5);
	border-bottom: 2px solid rgba(140, 186, 152, 0.5);
	/* 縦線が伸び切るタイミング（transition 1.2s）に合わせて、矢印は
	   その少し前からふわっと現れる。線より先に矢印だけ見えてしまわないように。 */
	opacity: 0;
	transition: opacity 0.4s ease 0.9s;
}

.ss-company__timeline.is-drawn::after {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.ss-company__timeline::after {
		opacity: 1;
		transition: none;
	}
}

/* Figma実データ: 最後の年表（ソリッドスター）だけ末尾の項目と
   「continue into the future」の間に余裕を持たせ、矢印もその分長く伸ばす。
   （最初の年表→次の緑帯の間隔はそのまま。） */
.ss-company__history-content .ss-company__timeline:last-of-type {
	padding-bottom: 44px;
}

.ss-company__timeline li {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 77px 20px 1fr;
	column-gap: 10px;
	align-items: start;
	padding: 10px 0;
	font-size: 14px;
}

/* .timeline-textとline-heightを揃える。行送りの違いで文字の上に
   乗る「余白」の量が変わり、grid-align-items:startで揃えていても
   月と本文の1行目が微妙にズレて見えていた。
   Figma実データ: 「◯年◯月」は改行させず1行で収める。 */
.ss-company__timeline-date {
	line-height: 1.8;
	text-align: right;
	white-space: nowrap;
}

/* Figma実データ: 丸のサイズは10px固定（PCは別途拡大して調整済み）。 */
.ss-company__timeline-dot {
	width: 10px;
	height: 10px;
	margin-top: 4px;
	border-radius: 50%;
	background: #8cba98;
	justify-self: center;
}

.ss-company__timeline-text {
	line-height: 1.8;
}

.ss-company__history-continue {
	margin: 16px 0 0;
	text-align: left;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: rgba(140, 186, 152, 0.6);
}

/* ============================================================
   PC (>=768px)
   ============================================================ */
/* 本文系のfont-sizeは、下限をV*0.4pxではなくV*0.8pxにしている箇所が
   多い（見出し系のintro-eyebrow/intro-titleのみ従来通りV*0.4px）。
   768〜900px幅あたりで文字が小さくなりすぎるという指摘を受けての
   調整で、下限をV*0.8pxにすると1536px(=1920*0.8)幅まではほぼ一定の
   サイズを保ち、そこから1920pxまでの間だけ滑らかに拡大する。 */
@media (min-width: 768px) {

	.ss-company__intro {
		padding: clamp(24px, 3.13vw, 60px) 0 clamp(16px, 2.08vw, 40px);
	}

	.ss-company__intro-eyebrow {
		font-size: clamp(16px, 2.08vw, 40px);
		letter-spacing: 0.25em;
	}

	.ss-company__intro-title {
		font-size: clamp(48px, 6.25vw, 120px);
		letter-spacing: 0.25em;
		margin-top: clamp(4px, 0.5vw, 10px);
	}

	.ss-company__intro-puzzle {
		margin-left: clamp(8px, 1.04vw, 20px);
		width: clamp(99.8px, 12.99vw, 249.6px);
		height: clamp(125.4px, 16.3vw, 313px);
	}

	.ss-company__section-inner {
		display: flex;
		align-items: flex-start;
		gap: clamp(38px, 4.95vw, 95px);
	}

	.ss-company__label {
		flex: 0 0 clamp(74.8px, 9.74vw, 187px);
		margin-bottom: 0;
		align-self: stretch;
	}

	/* 沿革セクションには縦線がなく、JP/ENの縦文字列だけで済むため、
	   ラベル列の幅を線ぶん狭くして、その分を内容側の横幅に回す。 */
	.ss-company__section-inner--no-line .ss-company__label {
		flex-basis: clamp(28px, 3.65vw, 70px);
	}

	/* .label-lineはSPでは「沿革 Company History」の下の横線として使うが、
	   PCでは縦文字列の右の縦線に役割が変わる。沿革はPCでは縦線を出さない
	   デザインのため、PCでだけ非表示にする。 */
	.ss-company__section-inner--no-line .ss-company__label-line {
		display: none;
	}

	.ss-company__label-circle {
		/* SP用のleft/topはPCでは使わず、PC専用のright/bottom基準に戻す。 */
		left: auto;
		top: auto;
		right: clamp(-36px, -1.88vw, -14.4px);
		bottom: clamp(10px, 1.3vw, 25px);
		width: clamp(104.4px, 13.59vw, 261px);
		height: clamp(104.4px, 13.59vw, 261px);
	}

	.ss-company__history .ss-company__label-circle {
		bottom: calc(clamp(10px, 1.3vw, 25px) - 80px);
	}

	/* Figma実データ: 縦線はJP/EN列のすぐ右ではなく、縦文字フレーム自体の
	   右端（＝ラベル列の右端）に来る。space-betweenでJP/EN列を左端に、
	   線を.label列の右端に離して配置する。 */
	.ss-company__label-text {
		flex-wrap: nowrap;
		align-items: flex-start;
		justify-content: space-between;
		align-self: stretch;
		height: 100%;
	}

	/* PCではJP（会社概要）を上・EN（Company Overview）を下に積む1本の
	   列にする（Figma実データ通り）。SPの「横並び」から縦積みへ切替。 */
	.ss-company__label-column {
		flex-direction: column;
		align-items: center;
		column-gap: 0;
		row-gap: clamp(4px, 0.52vw, 10px);
	}

	.ss-company__label-jp {
		writing-mode: vertical-rl;
		text-orientation: upright;
		/* 800〜900px前後で文字が小さくなりすぎないよう下限をV*0.4→0.8に
		   引き上げ、1536px(=1920*0.8)まではほぼ一定サイズを保つ。 */
		font-size: clamp(24px, 1.56vw, 30px);
		/* Figma実データ(PC): 30pxフォントに対しleading(行送り)50px、つまり
		   文字間に20px(=0.67em)の間隔がある。SP用の0.25em(18pxフォント
		   のrow-label用の値)がそのまま継承されてしまっていたのを、PC専用
		   の値に上書きする。 */
		letter-spacing: 0.6667em;
	}

	/* Figmaの実装は「Company Overview」を横書きの1行として組んでから
	   ブロックごと90度回転させる方式（文字1つ1つが正立するのではなく、
	   文字ごと横向きに寝る）。text-orientation:sideways が同じ見た目を
	   ブラウザ標準機能だけで再現する（回転用のラッパー要素が不要）。 */
	.ss-company__label-en {
		writing-mode: vertical-rl;
		text-orientation: sideways;
		font-size: clamp(24px, 1.56vw, 30px);
		letter-spacing: 0.25em;
	}

	.ss-company__label-line {
		order: 3;
		flex-basis: auto;
		width: 1px;
		height: auto;
		align-self: stretch;
	}

	.ss-company__about-content,
	.ss-company__access-content,
	.ss-company__history-content {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* ---- 会社概要 ---- */
	.ss-company__about {
		padding: clamp(22.4px, 2.92vw, 56px) 0 clamp(32px, 4.17vw, 80px);
	}

	.ss-company__row {
		display: flex;
		align-items: baseline;
		padding: clamp(3.6px, 0.47vw, 9px) 0;
		border-bottom: none;
	}

	.ss-company__row-label {
		/* font-sizeの下限を引き上げた分、ラベル列の幅も広げないと
		   「代表電話番号」等の長いラベルが折り返してしまう。 */
		flex: 0 0 clamp(120px, 8.85vw, 170px);
		margin: 0;
		font-size: clamp(14.4px, 0.94vw, 18px);
	}

	.ss-company__row-value {
		flex: 1 1 auto;
		font-size: clamp(16px, 1.04vw, 20px);
	}

	.ss-company__address-block + .ss-company__address-block {
		margin-top: clamp(9.6px, 1.25vw, 24px);
	}

	.ss-company__address-heading,
	.ss-company__address-text {
		font-size: clamp(16px, 1.04vw, 20px);
	}

	/* SP用のインデントはPCでは不要（PCは既存の見た目のまま）。 */
	.ss-company__address-text-indent {
		display: inline;
		padding-left: 0;
	}

	.ss-company__partners {
		font-size: clamp(16px, 1.04vw, 20px);
	}

	.ss-company__partners-note {
		font-size: clamp(12.8px, 0.83vw, 16px);
		text-align: left;
	}

	/* ---- アクセス ---- */
	.ss-company__access {
		padding: clamp(56px, 7.29vw, 140px) 0 clamp(48px, 6.25vw, 120px);
	}

	.ss-company__office + .ss-company__office {
		margin-top: clamp(32px, 4.17vw, 80px);
	}

	.ss-company__office-title {
		margin: 0 0 clamp(12.8px, 1.67vw, 32px);
		padding: 0 clamp(16px, 2.08vw, 40px);
		line-height: clamp(24.8px, 3.23vw, 62px);
		font-size: clamp(24px, 1.56vw, 30px);
	}

	.ss-company__office-map {
		aspect-ratio: 823 / 671;
	}

	.ss-company__transit {
		margin-top: clamp(16px, 2.08vw, 40px);
	}

	.ss-company__transit-pill {
		margin-bottom: clamp(16px, 2.08vw, 40px);
		padding: 0 clamp(12.8px, 1.67vw, 32px);
		line-height: clamp(18px, 2.34vw, 45px);
		font-size: clamp(16px, 1.04vw, 20px);
	}

	.ss-company__transit-heading {
		gap: clamp(6.4px, 0.83vw, 16px);
		margin-bottom: clamp(12.8px, 1.67vw, 32px);
	}

	.ss-company__transit-heading-text {
		font-size: clamp(16px, 1.04vw, 20px);
	}

	.ss-company__transit-heading-line {
		height: clamp(2px, 0.26vw, 5px);
	}

	.ss-company__transit-icon {
		width: clamp(20px, 2.6vw, 50px);
		height: clamp(20px, 2.6vw, 50px);
	}

	/* SPと同じく、駅名+所要時間のブロックは列いっぱいに広がる左寄せでは
	   なく中央寄せ。<ul>自体を1つのgridにしてliはdisplay:contentsにし、
	   列幅を全行で共有することで駅名列・所要時間列が縦に揃うようにする
	   （li単位のgridだと行ごとに列幅が独立し、中央寄せすると縦に揃わない）。 */
	.ss-company__transit-list {
		display: grid;
		row-gap: clamp(10px, 1.3vw, 25px);
		align-items: baseline;
		justify-content: center;
		font-size: clamp(14.4px, 0.94vw, 18px);
	}

	.ss-company__transit-list li {
		display: contents;
	}

	/* 駅名列の幅もfont-sizeの下限引き上げに合わせて広げないと、
	   「阪神 大阪梅田駅」等の長い駅名が折り返してしまう。 */
	.ss-company__transit-list--jr {
		grid-template-columns: clamp(145px, 8.28vw, 159px) max-content;
		column-gap: 8px;
	}

	.ss-company__transit-list--metro {
		grid-template-columns: clamp(75px, 5.68vw, 109px) max-content;
		column-gap: 8px;
	}

	.ss-company__transit-list b {
		font-size: clamp(16px, 1.04vw, 20px);
	}

	.ss-company__transit-list em {
		font-size: clamp(24px, 1.56vw, 30px);
	}

	.ss-company__transit-note {
		margin-top: clamp(16px, 2.08vw, 40px);
		padding: clamp(9.6px, 1.25vw, 24px) clamp(12.8px, 1.67vw, 32px);
		font-size: clamp(14.4px, 0.9375vw, 18px);
	}

	/* Figma同様、各文を1行に収める。PCは横幅に余裕があるため可能。 */
	.ss-company__transit-note p {
		white-space: nowrap;
	}

	.ss-company__transit-simple {
		align-items: center;
		flex-wrap: wrap;
		gap: clamp(6.4px, 0.83vw, 16px);
		margin-top: clamp(12.8px, 1.67vw, 32px);
		font-size: clamp(16px, 1.04vw, 20px);
	}

	/* SPは2行構成に分けているが、PCは元通り1行に流し込む。 */
	.ss-company__transit-simple-text {
		display: contents;
	}

	.ss-company__transit-simple-line {
		display: inline;
		white-space: nowrap;
	}

	/* ---- 沿革 ---- */
	.ss-company__history {
		padding: clamp(92px, 12vw, 230px) 0 clamp(48px, 6.25vw, 120px);
	}

	.ss-company__history-intro {
		margin-bottom: clamp(32px, 4.17vw, 80px);
		font-size: clamp(14.4px, 0.9375vw, 18px);
	}

	.ss-company__history-bar {
		padding: 0 clamp(40px, 5.21vw, 100px);
		line-height: clamp(24.8px, 3.23vw, 62px);
		font-size: clamp(16px, 1.04vw, 20px);
	}

	.ss-company__history-bar b {
		font-size: clamp(19.2px, 1.25vw, 24px);
	}

	.ss-company__history-bar--star {
		margin-top: clamp(1.6px, 0.21vw, 4px);
	}

	.ss-company__timeline {
		padding: clamp(9.6px, 1.25vw, 24px) 0;
	}

	/* 日付列もfont-sizeの下限引き上げに合わせて広げないと
	   「2018年11月」等が折り返してしまう。丸(20px固定)の列は
	   その丸自体より狭くならないよう下限を20pxにする。 */
	.ss-company__timeline li {
		grid-template-columns: clamp(100px, 6.25vw, 120px) clamp(20px, 1.2vw, 23px) 1fr;
		column-gap: clamp(4.4px, 0.57vw, 11px);
		padding: clamp(8px, 1.04vw, 20px) 0;
		font-size: clamp(16px, 1.04vw, 20px);
	}

	/* 線・矢印の中心は「日付列幅 + gap + 丸列幅/2」の位置に来る必要がある。
	   日付列幅・gap・丸列幅はそれぞれ別々のclamp()で個別に伸び縮みする
	   （伸びるタイミングが揃っていない）ため、両端(768px/1920px)だけを
	   見て単純な1本のclampで近似すると、その中間の幅で丸の中心と
	   線・矢印がずれてしまう。.timeline liのgrid-template-columns/
	   column-gapと同じclamp()式をそのままcalc()に埋め込むことで、
	   どの画面幅でも必ず丸の中心と一致するようにする。 */
	.ss-company__timeline::before {
		left: calc(
			clamp(100px, 6.25vw, 120px) + clamp(4.4px, 0.57vw, 11px) +
			clamp(20px, 1.2vw, 23px) / 2 - 1px
		);
	}

	.ss-company__timeline::after {
		left: calc(
			clamp(100px, 6.25vw, 120px) + clamp(4.4px, 0.57vw, 11px) +
			clamp(20px, 1.2vw, 23px) / 2
		);
		width: clamp(6.4px, 0.83vw, 16px);
		height: clamp(6.4px, 0.83vw, 16px);
	}

	/* PCでは月と本文の位置を揃えるため丸を大きくしており(SP用の10pxとは別)、
	   行の高さに対して中央に来るようmargin-topで微調整している。 */
	.ss-company__timeline-dot {
		width: 20px;
		height: 20px;
		margin-top: 6px;
	}

	.ss-company__history-continue {
		margin-top: clamp(1.6px, 0.21vw, 4px);
		font-size: clamp(32px, 2.08vw, 40px);
	}

	/* SP専用の末尾余白調整はPCでは元の詰まった間隔のまま。 */
	.ss-company__history-content .ss-company__timeline:last-of-type {
		padding-bottom: 0;
	}
}

/* JR/私鉄列と大阪メトロ列を横並びにするのは1100px以上のみ。768〜1099px
   幅だと、駅名列を広げた影響で「中央改札口から徒歩10分」のような長い
   所要時間テキストが隣の列に重なって表示されてしまうため、その帯域では
   768px未満と同じ縦積みのまま（各列がフル幅を使えるので重ならない）。 */
@media (min-width: 1100px) {
	.ss-company__transit-cols {
		flex-direction: row;
		gap: clamp(24px, 3.13vw, 60px);
	}

	.ss-company__transit-col {
		flex: 1 1 0;
		min-width: 0;
	}
}