@charset "UTF-8";

	.hero__visual img {
		object-position: left top;
	}
@media (max-width: 900px) {
	.hero__visual img {
		object-position: left 40%;
	}
}


/* ============================================================
   column-layout__nav h2  会社情報ページ固有スタイル
   business.cssと同構造だがアクセントカラーを使用
   ============================================================ */
	.column-layout__nav h2 {
		position: relative;
		display: flex;
		line-height: 1.4;
		justify-content: center;
		align-items: center;
		text-align: center;
		width: 100%;
		aspect-ratio: 1 / 1;
		background: var(--color-accent);
		padding: 0 0.3em;
	}
	.column-layout__nav h2::before {
		content: "";
		display: block;
		position: absolute;
		z-index: 0;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: url("../images/company/pttl.jpg") left center;
		background-size: cover;
		opacity: .15;
	}
	.column-layout__nav h2 > * {
		display: block;
		position: relative;
		z-index: 10;
		color: #FFF;
		font-size: 1.2em;
	}
	.column-layout__nav ul {
		margin-top: 50px;
	}
	.column-layout__nav ul li {
		text-indent: -0.5em;
		margin-bottom: 0.8em;
		padding-left: 1em;
	}
	.column-layout__nav ul li::before {
		content: "―";
		display: inline-block;
		margin-right: 0.2em;
	}

/* ============================================================
   vision-wrap  代表メッセージ
   ============================================================ */
	.vision-wrap {
		border: 0px solid var(--color-accent);
		border-width: 0 0 2.4em;
	}
	.vision {
		display: grid;
		gap: 60px;
		align-items: center;
		grid-template-columns: 1fr max(20%, 200px);
		max-width: 1260px;
		margin: 0 auto 3em;
		padding: 0 5%;
	}
	.vision__img {
		order: 2;
	}
	.vision__img img {
		width: 100%;
		height: auto;
		display: block;
	}
	.vision__text {
		order: 1;
		font-size: 1.2em;
		line-height: 2;
	}
	.vision__text p + p {
		margin-top: 0.6em;
	}
	.vision__sign {
		text-align: right;
		margin-top: 1.5em;
	}
	.vision__sign img {
		display: inline-block;
		width: auto;
		height: 2em;
		margin-top: 0.8em;
	}

/* ============================================================
   co-table  会社情報テーブル（th左列・td右列）
   ============================================================ */
	.co-table {
		width: 100%;
		line-height: 1.6;
		margin: 0 auto;
		border-collapse: collapse;
		border: 0px solid #a7a7a7;
		border-width: 1px 0 0 1px;
	}
	.co-table caption {
		color: var(--color-accent);
		text-align: left;
		font-weight: bold;
		font-size: 1.2em;
		margin-bottom: 1em;
	}
	.co-table th {
		text-align: left;
		white-space: nowrap;
		background: #dedede;
		padding: 0.8em 1em;
		border: 0px solid #a7a7a7;
		border-width: 0px 1px 1px 0px;
		width: 10em;
	}
	.co-table td {
		padding: 0.8em 1em;
		border: 0px solid #a7a7a7;
		border-width: 0px 1px 1px 0px;
	}
	.co-table td ul {
		list-style: none;
	}
	.co-table td ul li + li {
		margin-top: 0.3em;
	}
	.co-table td ul li::before {
		content: "・";
	}
	.co-table td a {
		color: var(--color-accent);
		text-decoration: underline;
	}

/* ============================================================
   logo-col  ロゴ由来
   ============================================================ */
	.logo-col {
		display: grid;
		grid-template-columns: 200px 1fr;
		gap: 50px;
		align-items: center;
	}
	.logo-col__img img {
		width: 100%;
		height: auto;
	}

/* ============================================================
   sdg-grid  SDGsアイコングリッド
   ============================================================ */
	.sdg-grid {
		display: grid;
		gap: 1em;
		grid-template-columns: repeat(6, 1fr);
		margin-top: 1.5em;
		padding: 1em;
		border: 1px solid #CCC;
		list-style: none;
	}
	.sdg-grid.sdg-grid--ours {
		grid-template-columns: repeat(4, 1fr);
	}
	.sdg-grid li {
		background: #FFF;
		padding: 0.4em 0.2em;
	}
	.sdg-grid li img {
		width: 100%;
		height: auto;
		display: block;
	}

/* ============================================================
   RESPONSIVE — 900px以下
   ============================================================ */
@media (max-width: 900px) {
	/* column-layout カラム解除（common.cssと同様） */
	.column-layout {
		display: block;
	}
	.column-layout .column-layout__nav {
		width: 100%;
		max-width: 100%;
		padding-top: 40px;
	}
	.column-layout .column-layout__nav h2 {
		aspect-ratio: unset;
		padding: 1.5em;
	}
	:not(#nav03) .column-layout .column-layout__nav {
		position: static;
	}
	.column-layout .column-layout__content {
		width: 100%;
		max-width: 100%;
		padding-top: 40px;
	}

	/* vision */
	.vision {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	.vision__img {
		max-width: 200px;
		margin: 0 auto;
		order: 0; /* スマホでは元の順序（テキスト→画像）に戻す */
	}
	.vision__text {
		font-size: 1.0em;
	}
	.vision__text br.SP_none{
		display: none;
	}

	/* co-table */
	.co-table th {
		white-space: normal;
		width: 7em;
	}

	/* logo-col */
	.logo-col {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.logo-col__img {
		max-width: 270px;
		margin: 0 auto;
	}

	/* sdg-grid */
	.sdg-grid {
		gap: 0.6em;
		grid-template-columns: repeat(4, 1fr);
	}
	.sdg-grid.sdg-grid--ours {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 560px) {
	.sdg-grid {
		gap: 0.4em;
		grid-template-columns: repeat(3, 1fr);
		padding: 0.4em;
	}
	.co-table,
	.co-table tbody,
	.co-table tr {
		display: block;
	}
	.co-table th,
	.co-table td {
		display: block;
		width: 100%;
		border-width: 0 1px 0 0;
	}
	.co-table th {
		border-bottom: none;
		background: #ebebeb;
		padding-bottom: 0.4em;
	}
	.co-table td {
		border-bottom: 1px solid #a7a7a7;
	}
}