/* ==========================================================================
   Company
   会社概要（page-company.php）
   デザイン幅: 1920px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Company Philosophy（企業理念）
   -------------------------------------------------------------------------- */
.p-company-philosophy {
	--bg-decoration-top: -507px; /* 背景の装飾（c-bg-decoration）の位置 */
	--bg-decoration-left: 1629px;
	position: relative;
	z-index: 0;
	padding-top: 40px;
	padding-bottom: 40px;
	overflow: hidden;
	background-color: var(--color-white);
}

.p-company-philosophy__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 30px;
	padding: 30px; /* 箱は c-frame-box */
}

.p-company-philosophy__item {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	text-align: center;
}

.p-company-philosophy__title {
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-items: center;
}

.p-company-philosophy__ja {
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.44;
	letter-spacing: 0.15em;
	color: var(--color-text);
}

/* 英字（下にオレンジの太線） */
.p-company-philosophy__en {
	padding-bottom: 10px;
	font-family: var(--font-en);
	font-size: 2.375rem;
	line-height: 1.21;
	color: var(--color-text);
	background: linear-gradient(var(--color-orange-a70), var(--color-orange-a70)) left bottom / 100% 10px no-repeat;
}

.p-company-philosophy__text {
	font-size: 1.125rem;
	line-height: 1.67;
	letter-spacing: 0.15em;
	color: var(--color-black);
}

@media (max-width: 767px) {
	.p-company-philosophy {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	.p-company-philosophy__list {
		padding: 24px 20px;
	}

	.p-company-philosophy__en {
		font-size: 1.875rem;
	}

	.p-company-philosophy__text {
		font-size: 1rem;
		letter-spacing: 0.08em;
	}
}

/* --------------------------------------------------------------------------
   Information（会社概要）
   -------------------------------------------------------------------------- */
.p-company-info {
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: var(--color-pale-orange);
}

.p-company-info__list {
	margin-top: 30px;
}

/* 区切り線: 紺 → 赤のグラデーション（不透明度 60%） */
.p-company-info__item {
	display: flex;
	align-items: flex-start;
	padding-top: 20px;
	padding-bottom: 20px;
	background: linear-gradient(90deg, rgb(23 25 69 / 0.6) 15%, rgb(211 47 55 / 0.6) 30%, rgb(255 51 51 / 0.6) 50%) left bottom / 100% 2px no-repeat;
}

.p-company-info__item:last-child {
	background: none;
}

.p-company-info__term {
	flex-shrink: 0;
	width: 260px;
	padding-left: 30px;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.39;
	letter-spacing: 0.15em;
	color: var(--color-navy);
}

.p-company-info__desc {
	font-weight: 350;
	line-height: 1.5625;
	letter-spacing: 0.15em;
	color: var(--color-black);
}

@media (max-width: 767px) {
	.p-company-info {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	.p-company-info__item {
		flex-direction: column;
		gap: 6px;
		padding-top: 16px;
		padding-bottom: 16px;
	}

	.p-company-info__term {
		width: auto;
		padding-left: 0;
		font-size: 1rem;
	}

	.p-company-info__desc {
		letter-spacing: 0.08em;
	}
}

/* --------------------------------------------------------------------------
   Access（アクセス）
   -------------------------------------------------------------------------- */
.p-company-access {
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: var(--color-pale-orange);
}

.p-company-access__body {
	display: flex;
	gap: 30px;
	margin-top: 30px;
}

.p-company-access__map {
	flex-shrink: 0;
	width: 500px;
	height: 294px;
	border: 0;
}

.p-company-access__info {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
}

/* 見出しは c-square-heading */
.p-company-access__text {
	margin-top: 18px;
	padding-left: 15px;
	font-weight: 350;
	line-height: 1.875;
	letter-spacing: 0.1em;
	color: var(--color-black);
}

.p-company-access__button {
	align-self: flex-end;
	margin-top: auto;
}

@media (max-width: 1023px) {
	.p-company-access__body {
		flex-direction: column;
	}

	.p-company-access__map {
		width: 100%;
		height: auto;
		aspect-ratio: 500 / 294;
	}

	/* iOS 15 より前の Safari は aspect-ratio が効かないため、幅から高さを計算して指定する */
	@supports not (aspect-ratio: 1 / 1) {
		.p-company-access__map {
			height: calc((100vw - var(--container-gutter) * 2) * 294 / 500);
		}
	}

	.p-company-access__button {
		align-self: center;
		margin-top: 24px;
	}
}

@media (max-width: 767px) {
	.p-company-access {
		padding-top: 24px;
		padding-bottom: 24px;
	}
}

/* --------------------------------------------------------------------------
   Download（会社資料のダウンロード）
   -------------------------------------------------------------------------- */
.p-company-download {
	position: relative;
	z-index: 0;
	padding-top: 40px;
	padding-bottom: 40px;
	overflow: hidden;
	background-color: var(--color-navy);
}

.p-company-download::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("../../img/company/bg-download.webp") center / cover no-repeat;
	opacity: 0.2;
	mix-blend-mode: screen;
}

/* 左: ラベル + 説明文、右: PDF のプレビュー */
.p-company-download__box {
	display: flex;
	gap: 40px;
	justify-content: space-between;
	margin-top: 30px;
	padding: 30px 30px 30px 0;
	background-color: rgb(255 255 255 / 0.9);
	border: 1px solid var(--color-white);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* 「会社案内 PDF資料」のラベル（c-band-label） */
.p-company-download__label {
	align-self: flex-start;
}

.p-company-download__main {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.p-company-download__body {
	display: flex;
	height: 320px;
	padding-left: 30px;
}

.p-company-download__desc {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 498px;
}

.p-company-download__text {
	max-width: 468px;
	font-weight: 350;
	line-height: 1.6875;
	letter-spacing: 0.1em;
	color: var(--color-black);
}

/* ダウンロードボタン */
.p-company-download__button {
	display: flex;
	gap: 20px;
	align-items: center;
	justify-content: center;
	width: 340px;
	height: 50px;
	padding-left: 25px;
	padding-right: 25px;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.15em;
	color: var(--color-white);
	background-color: var(--color-navy);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	transition: background-color var(--duration);
}

@media (any-hover: hover) {
	.p-company-download__button:hover {
		opacity: 1;
		background-color: var(--color-navy-a60);
	}
}

.p-company-download__button:focus-visible {
	background-color: var(--color-navy-a60);
}

/* 文字は途中で折り返さない（狭い画面は SP の指定で文字を詰めて 1 行に収める） */
.p-company-download__button-label,
.p-company-download__button-note {
	white-space: nowrap;
}

.p-company-download__button-note {
	margin-left: -12px;
	font-size: 1rem;
	font-weight: 350;
	letter-spacing: 0.08em;
}

/* ダウンロードのアイコン（受け皿は固定、矢印はホバーで下に下がる） */
.p-company-download__icon {
	position: relative;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	background: url("../../img/common/icon-download-tray.svg") center / contain no-repeat;
}

.p-company-download__icon::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../../img/common/icon-download-arrow.svg") center / contain no-repeat;
	transition: translate var(--duration);
}

@media (any-hover: hover) {
	.p-company-download__button:hover .p-company-download__icon::before {
		translate: 0 3px;
	}
}

.p-company-download__button:focus-visible .p-company-download__icon::before {
	translate: 0 3px;
}

/* PDF のプレビュー（右寄せ）
   高さは左の列（ラベル 50px + 間 20px + 説明文 320px = 390px）に合わせ、
   枠の内側を PDF のページと同じ縦横比（780:540）にする */
.p-company-download__preview {
	--pdf-h: 390px;
	--pdf-ratio: 780 / 540;
	display: flex;
	flex-shrink: 0;
	gap: 10px;
	height: var(--pdf-h);
}

.p-company-download__frame {
	position: relative;
	flex-shrink: 0;
	width: calc((var(--pdf-h) - 8px) * var(--pdf-ratio) + 8px); /* 8px は上下・左右の枠線（4px x 2） */
	border: 4px solid var(--color-navy);
}

.p-company-download__pages {
	display: flex;
	flex-direction: column;
	gap: 9px; /* ページとページの間（背景の紺が線に見える） */
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	background-color: var(--color-navy);
	scrollbar-width: none;
}

.p-company-download__pages::-webkit-scrollbar {
	display: none;
}

.p-company-download__pages:focus-visible {
	outline: 2px solid var(--color-red);
	outline-offset: 2px;
}

.p-company-download__page {
	display: block;
	flex-shrink: 0;
	width: 100%;
	height: auto;
	aspect-ratio: var(--page-ratio); /* company.js がページの縦横比を入れる */
	background-color: var(--color-white);
}

.p-company-download__preview.is-error .p-company-download__pages {
	padding: 20px;
	color: var(--color-white);
}

/* 虫眼鏡（PDF を新しいタブで開く） */
.p-company-download__zoom {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: grid;
	place-items: center;
	width: 70px;
	height: 70px;
	background-color: var(--color-red-dark);
}

.p-company-download__zoom-icon {
	width: 38px;
}

/* SP 用の表紙（PC・TB では表示しない） */
.p-company-download__cover {
	display: none;
}

/* SP は PDF.js の枠とスクロールバーを出さず、表紙の画像を表示する（タップで PDF を別タブで開く）。
   右下の虫眼鏡は PC の枠の虫眼鏡を一回り小さくしたもの */
@media (max-width: 767px) {
	.p-company-download__frame,
	.p-company-download__scrollbar {
		display: none;
	}

	.p-company-download__cover {
		position: relative;
		display: block;
		flex: 1 1 auto;
		border: 4px solid var(--color-navy);
	}

	.p-company-download__cover-image {
		display: block;
		width: 100%;
		height: auto;
	}

	.p-company-download__cover-icon {
		position: absolute;
		right: 8px;
		bottom: 8px;
		display: grid;
		place-items: center;
		width: 50px;
		height: 50px;
		background-color: var(--color-red-dark);
	}

	.p-company-download__cover-icon img {
		width: 27px;
	}
}

/* 独自のスクロールバー */
.p-company-download__scrollbar {
	position: relative;
	flex-shrink: 0;
	width: 8px;
	background-color: var(--color-white);
}

.p-company-download__thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 8px;
	height: var(--thumb-h, 80px); /* 高さと位置は company.js がスクロール量から入れる */
	translate: 0 var(--thumb-y, 0);
	background-color: var(--color-pink-red);
	border-radius: 10px;
	cursor: grab;
	touch-action: none;
}

@media (max-width: 1279px) {
	/* 説明文と PDF は横に並べたまま、幅に合わせて両方を縮める。
	   2 つが並ばなくなる幅（説明文 340px + PDF 420px が入らない、およそ 880px 以下）では自動で縦に折り返し、
	   PDF は説明文と同じく箱の左右 30px の内側いっぱいに広げる */
	.p-company-download__box {
		flex-wrap: wrap;
		gap: 30px 10px; /* 横並びのときは PDF の左の余白 30px と合わせて 40px */
	}

	.p-company-download__main {
		flex: 1 1 340px;
		min-width: 0;
	}

	.p-company-download__body {
		height: auto;
	}

	.p-company-download__desc {
		gap: 24px;
		width: auto;
	}

	.p-company-download__preview {
		flex: 1 1 420px;
		align-self: flex-start;
		width: auto;
		height: auto;
		margin-left: 30px;
	}

	.p-company-download__frame {
		flex: 1 1 auto;
		width: auto;
	}

	/* 幅に合わせて高さを決め、PDF と同じ縦横比を保つ */
	.p-company-download__pages {
		height: auto;
		aspect-ratio: var(--pdf-ratio);
	}

	/* iOS 15 より前の Safari は aspect-ratio が効かないため、高さを指定する
	   （PDF の幅は折り返しの有無で変わり CSS では計算できないため、おおよその高さ） */
	@supports not (aspect-ratio: 1 / 1) {
		.p-company-download__pages {
			height: 400px;
		}
	}
}

@media (max-width: 767px) {
	.p-company-download {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	/* 帯のラベルを左端まで伸ばすため、箱の左右の余白は 0 にし、説明文と PDF にそれぞれ左右 20px の余白を付ける */
	.p-company-download__box {
		padding: 20px 0;
	}

	.p-company-download__body {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* PDF のプレビューは左右の余白をそろえて中央に置き、幅いっぱいに広げる */
	.p-company-download__preview {
		flex: 0 0 auto;
		width: calc(100% - 40px);
		max-width: none;
		margin-left: 20px;
	}

	/* 幅が狭くても「ダウンロード (PDF 15枚)」とアイコンが 1 行に収まるよう、文字を小さくして字間と間隔を詰める */
	.p-company-download__button {
		gap: 10px;
		width: 100%;
		padding-left: 12px;
		padding-right: 12px;
		font-size: 1rem;
		letter-spacing: 0.06em;
	}

	.p-company-download__button-note {
		margin-left: -6px;
		font-size: 0.875rem;
		letter-spacing: 0.04em;
	}

}