/* sustainability-fv */
.sustainability-fv {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100vh;
	height: 100svh;
	min-height: 800px;
	padding: 80px 0 0;
}
.fv-copy {
	position: relative;
	z-index: 2;
	display: grid;
	gap: min(32px,3.5vw);
	margin: 0 0 64px;
}
.fv-copy__line {
	position: relative;
	z-index: 0;
	width: fit-content;
	padding: 0 8vw 0 8vw;
	overflow: hidden;
}
.fv-copy__line::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 0 1000px 0 0;
	height: 85%;
	z-index: -1;
	background: var(--color-yellow-primary);
}
.fv-copy__line img {
	height: min(104px,10vw);
	width: auto;
	animation: fv-copy__line-show .75s 0s 1 both normal cubic-bezier(.14,.77,.42,.98);
}
.fv-copy__line:nth-of-type(2) img {
	animation-delay: 0.125s;
}
.fv-copy__line:nth-of-type(3) img {
	animation-delay: 0.25s;
}
@keyframes fv-copy__line-show {
	0% {
		transform: translate(0,100%);
	}
	100% {
		transform: translate(0,0);
	}
}

.fv-introduction {
	position: relative;
	z-index: 2;
	padding: 0 0 0 40px;
	width: calc(var(--content-width-narrow) * .45);
	margin: 0 0 0 calc((100vw - var(--content-width-narrow)) / 2);
}
.fv-introduction::before {
	content: "";
	position: absolute;
	left: 0;
	top: -24px;
	z-index: -1;
	width: 90px;
	height: 90px;
	background: var(--color-yellow-primary);
	border-radius: 1000px;
}
.fv-introduction__inner {
	animation: fv-introduction-show 1s .75s 1 both normal cubic-bezier(.14,.77,.42,.98);
}
@keyframes fv-introduction-show {
	0% {
		opacity: 0;
		transform: translate(0,4px);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}
.fv-introduction__lead {
	position: relative;
	z-index: 0;
	margin: 0 0 12px;
	line-height: 1.375;
	font-size: 2.8rem;
	font-weight: 700;
}
.fv-introduction__body-text {
	line-height: 2;
}
.fv-scroll-button {
	position: absolute;
	margin: 0 0 0 calc((100vw - var(--content-width)) / 2);
	left: 0;
	bottom: 0;
	height: 140px;
	padding: 0 8px 0 0;
	color: var(--color-navy-primary);
	overflow: hidden;
}
.fv-scroll-button__label {
	line-height: 1;
	font-weight: 700;
	writing-mode: vertical-lr;
	transform: rotate(180deg);
}
.fv-scroll-button::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 1px;
	height: 200%;
	background: var(--color-navy-primary);
	animation: fv-scroll-button-line 3s 0s infinite both normal ease-in-out;
}
@keyframes fv-scroll-button-line {
	0% {
		transform: translate(0,-100%);
	}
	100% {
		transform: translate(0,100%);
	}
}
.fv-picture {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: -2;
	width: 50vw;
	border-radius: 0 0 0 40px;
	overflow: hidden;
}
.fv-picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	animation: fv-picture-show 1s .75s 1 both normal cubic-bezier(.14,.77,.42,.98);
}
@keyframes fv-picture-show {
	0% {
		opacity: 0;
		transform: scale(1.05);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}
@media screen and (max-width:640px) {
	.sustainability-fv {
		padding: 64px 0 16px;
		justify-content: space-between;
		max-height: 220vw;
		min-height: 600px;
	}
	.fv-copy__line {
		padding-left: var(--content-padding);
	}
	.fv-picture {
		position: static;
		align-self: flex-end;
		margin: -32% 0 24px;
		width: fit-content;
		max-width: calc(100% - var(--content-padding));
		border-radius: 0 40px 0 40px;
	}
	.fv-picture img{
		height: 100%;
		max-width: 100%;
		aspect-ratio: 1;
	}
	.fv-scroll-button {
		bottom: 0;
	}
	.fv-introduction {
		width: var(--content-width);
		margin: 0 auto;
	}
	.fv-introduction__lead {
		font-size: 2.0rem;
	}
	.fv-introduction__lead::before {
		width: 64px;
		height: 64px;
	}
	.fv-introduction__body-text {
		font-size: 1.4rem;
	}
}

/* #introduction */
.sustainability-introduction {
	display: flex;
	justify-content: space-between;
	width: var(--content-width);
	margin: 0 auto;
}
.sustainability-introduction__figure {
	width: 60%;
}
.sustainability-introduction__textcontent {
	width: 35%;
	padding: 96px 80px 0 0;
}
.sustainability-introduction__body-text {
	line-height: 2;
}
@media screen and (max-width:1200px) {
	.sustainability-introduction__textcontent {
		padding-right: 0;
	}
}
@media screen and (max-width:960px) {
	.sustainability-introduction {
		flex-direction: column;
	}
	.sustainability-introduction__figure {
		width: 100%;
		max-width: 600px;
		margin: 0 auto 24px;
	}
	.sustainability-introduction__textcontent {
		width: 100%;
		padding: 0 24px;
	}
}

/* #commitment */
.sustainebility-commitment {
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
	width: var(--content-width-narrow);
	margin: 0 auto;
}
.sustainebility-commitment__picture {
	position: relative;
	z-index: 0;
	width: 55%;
	box-shadow:var(--shadow-primary);
	border-radius:0 20px 0 20px;
}
.sustainebility-commitment__picture img {
	border-radius: 0 20px 0 20px;
}
.sustainebility-commitment__picture::before {
	content: "";
	position: absolute;
	top: 10px;
	left: -10px;
	z-index: -1;
	width: 100%;
	height: 100%;
	background: var(--color-navy-primary);
	border-radius: 0 30px 0 30px;
}
.commitment-list {
	display: grid;
	gap: 16px;
	width: 45%;
}
.commitment-list-item {
	position: relative;
	padding: 72px 0 0 40px;
}
.commitment-list-item__icon {
	position: absolute;
	top: 0;
	left: -16px;
	width: 118px;
}
.commitment-list-item__title {
	position: relative;
	z-index: 0;
	margin: 0 0 12px;
	padding: 8px 32px 8px 32px;
	font-weight: 700;
	color: var(--color-white-primary);
}
.commitment-list-item__title::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--color-navy-primary);
	border-radius: 1000px 0 0 0;
}
.commitment-list-item__description {
	padding: 0 32px;
	font-size: 1.2rem;
	line-height: 1.75;
}
@media screen and (max-width:960px) {
	.sustainebility-commitment {
		flex-direction: column;
	}
	.sustainebility-commitment__picture {
		width: 100%;
		margin: 0 0 24px;
	}
	.sustainebility-commitment__picture::before {
		top: 6px;
		left: -6px;
		border-radius: 0 26px 0 26px;
	}
	.commitment-list {
		width: 100%;
		gap: 8px 0;
	}
	.commitment-list-item {
		padding: 32px 0 0 32px;
	}
	.commitment-list-item__title::before {
		right: calc(-1 * var(--content-padding));
	}
	.commitment-list-item__icon {
		left: 0;
		width: 64px;
		height: 64px;
	}


}

/* #action */
.article-list-action {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 64px 48px;
	width: var(--content-width-narrow);
	margin: 0 auto;
}
.article-action-item {
	position: relative;
	border-radius: 0 20px 0 20px;
	overflow: hidden;
	background: var(--color-white-primary);
	box-shadow: var(--inner-shadow-primary);
}
.article-action-item::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 18px;
	height: 18px;
	background: url("../images/corner-triangle-yellow.svg") center/contain no-repeat;
}
.article-action-item__picture {
	border-radius: 0 20px 0 20px;
	overflow: hidden;
	margin: 0 0 12px;
	box-shadow: var(--shadow-primary);
	aspect-ratio: 600 / 450;
}
.article-action-item__picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.article-action-item__sdgs {
	display: grid;
	gap: 4px;
	grid-template-columns: repeat(9,1fr);
	padding: 0 8px 12px 8px;
	border-bottom: 2px dotted var(--color-navy-primary);
}
.article-action-item__content {
	padding: 16px 8px;
}
.article-action-item__info {
	margin: 0 0 8px;
	color: var(--color-navy-primary);
}
.article-action-item__category {
	display: inline-block;
	vertical-align: baseline;
	margin: 0 10px 0 0;
	font-size: 1.4rem;
}
.article-action-item__post-date {
	display: inline-block;
	vertical-align: baseline;
	font-size: 1.2rem;
	color: rgba(0,0,0,0.6);
}
.article-action-item__body-text {
	font-size: 1.2rem;
	line-height: 1.5;
	color: var(--color-black-primary);
}
@media screen and (max-width:960px) {
	.article-list-action {
		grid-template-columns: repeat(2,1fr);
		gap: 32px 12px;
	}
}

/* #player */
.player-list {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 32px 64px;
	margin: 0 auto;
	width: var(--content-width-narrow);
}
.player-item {
	display: flex;
	align-items: flex-start;
}
.player-item__picture {
	position: relative;
	z-index: 0;
}
.player-item__picture img {
	border-radius: 0 20px 0 20px;
}
.player-item__picture::before {
	content: "";
	position: absolute;
	top: -10px;
	right: -10px;
	width: 100%;
	height: 100%;
	z-index: -1;
	border-radius: 0 30px 0 30px;
	background: var(--color-yellow-primary);
}
.player-item__textcontent {
	position: relative;
	padding: 24px 0 0 40px;
}
.player-item__position {
	position: relative;
	padding: 2px 24px 2px 0;
	width: fit-content;
	margin: 0 0 24px;
	color: var(--color-white-primary);
	z-index: 0;
}
.player-item__position::before {
	content: "";
	position: absolute;
	top: 0;
	left: -40px;
	z-index: -1;
	right: 0;
	height: 100%;
	background: var(--color-yellow-primary);
	border-radius: 0 1000px 0 0;
}
.player-item__name {
	line-height: 1;
	font-size: 3.2rem;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--color-navy-primary);
}
.player-item__post {
	font-weight: 700;
	color: var(--color-navy-primary);
}
@media screen and (max-width:960px) {
	.player-list {
		grid-template-columns: 1fr;
	}
}
@media screen and (max-width:640px) {
	.player-item__picture::before {
		top: -8px;
		right: -8px;
		border-radius: 0 28px 0 28px;
	}
	.player-item__textcontent {
		padding: 16px 0 0 24px;
	}
	.player-item__position::before {
		left: -24px;
	}
	.player-item__name {
		font-size: 1.8rem;
	}
	.player-item__post {
		font-size: 1.0rem;
	}
}

.sustainability-lecture-info {
	position: relative;
	z-index: 0;
	display: flex;
	align-items: center;
	background: var(--color-yellow-primary);
	box-shadow: var(--inner-shadow-secondary);
	width: var(--content-width);
	max-width: 760px;
	margin: 0 auto;
	padding: 24px;
	border-radius: 0 48px 0 48px;
}
.sustainability-lecture-info__picture {
	width: 32%;
	flex-shrink: 0;
	border-radius: 32px;
	overflow: hidden;
}
.sustainability-lecture-info::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 16px;
	background: var(--color-white-primary);
	border-radius: 0 32px 0 32px;
	box-shadow: var(--shadow-secondary);
}
.sustainability-lecture-info__left-content {
	flex-grow: 1;
	text-align: center;
	width: 64%;
}
.sustainability-lecture-info__title {
	height: 38px;
	max-width: 100%;
}
.sustainability-lecture-info__title img {
	margin: 0 auto 12px;
	width: auto;
	max-width: 100%;
	height: 100%;
	object-fit: contain;
}
.sustainability-lecture-info__description {
	margin: 0 0 16px;
	font-weight: 1.8rem;
	font-weight: 700;
}
@media screen and (max-width:960px) {
	.sustainability-lecture-info {
		flex-wrap: wrap;
		padding: 24px 16px;
		max-width: 480px;
	}
	.sustainability-lecture-info::before {
		inset: 8px;
		border-radius: 0 40px 0 40px;
	}
	.sustainability-lecture-info__left-content {
		display: contents;
	}
	.sustainability-lecture-info__text-content {
		justify-self: start;
		width: 64%;
	}
	.sustainability-lecture-info__title {
		height: 18px;
		margin-bottom: 8px;
	}
	.sustainability-lecture-info__description {
		font-size: 10px;
	}
	.sustainability-lecture-info .secondary-button {
		grid-column: span 2;
	}
}
/* #news */

/* ニュースリスト全体のスタイル */
.news-list-action {
  list-style: none;
  padding: 0;
  margin: 0;

}

/* 各ニュースアイテムのスタイル */
#news-list-area {
  padding: 40px 0;
  border-top: 1px solid #ddd;
  display: flex;
  justify-content: center; /* セクション全体を中央揃え */
}
.news-action-item {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
  max-width: 800px; /* コンテンツの最大幅を指定 */
  width: 100%; /* 幅を100%に設定 */
}

/* ニュースアイテムの内容 */
.news-action-item__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ニュースアイテムのスタイル */
.news-action-item {
  display: flex;
  flex-direction: column; /* 縦並びに変更 */
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
}

/* ニュースアイテムの内容 */
.news-action-item__content {
  display: flex;
  flex-direction: column; /* コンテンツを縦方向に並べる */
}

/* 日付のスタイル */
.news-action-item__date {
  font-size: 16px;
  color: #555;
  font-weight: bold;
  margin-bottom: 5px; /* 日付とタイトルの間に余白を追加 */
}

/* タイトルのスタイル */
.news-action-item__title {
  font-size: 18px;
  color: #000;
  font-weight: normal;
  white-space: normal; /* テキストの省略を解除 */
  overflow: visible; /* オーバーフローも解除 */
  text-overflow: clip; /* テキストを完全表示 */
}


/* メディアクエリでレスポンシブ対応 */
@media (max-width: 768px) {
  .news-action-item__content {
    flex-direction: column;
    align-items: flex-start;
  }

  .news-action-item__date {
    margin-bottom: 5px;
  }

  .view-more {
    width: 100%;
  }
}


/* #partner */
.sustainability-partner {
	position: relative;
	z-index: 0;
	width: var(--content-width-narrow);
	margin: 0 auto;
	padding: 80px;
	border-radius: 0 86px 0 86px;
	background: var(--color-yellow-primary);
	box-shadow: var(--inner-shadow-secondary);
}
.sustainability-partner::before {
	content: "";
	position: absolute;
	inset: 16px;
	z-index: -1;
	background: var(--color-white-primary);
	border-radius: 0 70px 0 70px;
	box-shadow: var(--shadow-secondary);
}
@media screen and (max-width:960px) {
	.sustainability-partner {
		padding: 24px;
		border-radius: 0 48px 0 48px;
	}
	.sustainability-partner::before {
		inset: 8px;
		border-radius: 0 40px 0 40px;
	}
}