@charset "utf-8";

body {
	background-color: #fff;
	font-size: 16px;
}

/* kv
------------------------------------------------ */
.kv {
	height: 652px;
	position: relative;
}
.kv__shape,
.kv__bg {
	position: absolute;
}
.kv__shape {
	display: block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	position: absolute;
}
.kv__shape1,
.kv__shape2,
.kv__shape3,
.kv__shape4,
.kv__shape5,
.kv__shape6 {
	aspect-ratio: 96/52;
	background-image: url(/assets/img/shape14.svg);
	animation: cloudFuyo ease-in-out infinite alternate-reverse;
}
.kv__shape1,
.kv__shape2,
.kv__shape5 {
	width: 80px;
	animation-duration: 12s;
}
.kv__shape4,
.kv__shape6 {
	width: 64px;
	animation-duration: 10s;
}
.kv__shape1 {
	top: 48px;
	left: -22px;
}
.kv__shape2 {
	top: 28px;
	left: 38px;
}
.kv__shape3 {
	width: 96px;
	top: 28px;
	right: 568px;
	animation-duration: 14s;
}
.kv__shape4 {
	top: 44px;
	right: 320px;
}
.kv__shape5 {
	top: 302px;
	right: 24px;
}
.kv__shape6 {
	top: 400px;
	right: 154px;
}
.kv__shape7,
.kv__shape8 {
	aspect-ratio: 50/15.55;
	width: 50px;
	background-image: url(/assets/img/shape15.svg);
	animation: birdPata ease-in-out infinite;
}
.kv__shape7 {
	top: 46px;
	left: 198px;
	animation-duration: 8s;
}
.kv__shape8 {
	top: 130px;
	right: 208px;
	animation-duration: 10s;
}
.kv__shape9 {
	aspect-ratio: 140/144;
	width: 140px;
	background-image: url(/assets/img/shape16.svg);
	top: 24px;
	right: 8px;
}
.kv__bg {
	width: 100%;
	height: 140px;
	background: url(/assets/img/index_kv_shape1.png) repeat-x left bottom;
	background-size: 1272px;
	position: absolute;
	left: 0;
	bottom: 28px;
}
.kv__inner {
	max-width: var(--globalContentWidth);
	margin: 0 auto;
	position: relative;
}
.kv__text {
	display: grid;
	grid-template-columns: 100%;
	gap: 32px 0;
	color: #494948;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: bold;
	line-height: 1.4;
	position: absolute;
	top: 140px;
	left: 86px;
}
.kv__text-main {
	font-size: 48px;
	letter-spacing: 0.12em;
}
.kv__text-sub {
	font-size: 28px;
	letter-spacing: 0.12em;
}
/* 雲がふよふよするアニメーション */
@keyframes cloudFuyo {
  0%   { transform: translateY(-12px); }
  20%  { transform: translateY(8px); }
  40%  { transform: translateY(-10px); }
  60%  { transform: translateY(10px); }
  80%  { transform: translateY(-8px); }
  100% { transform: translateY(12px); }
}

/* 鳥がふよふよするアニメーション */
@keyframes birdPata {
	0%   { transform: translateY(0); }
  20%  { transform: translateY(12px); }
  40%, 42%  { transform: translateY(-16px); }
  82%  { transform: translateY(8px); }
  100% { transform: translateY(0); }
}


/* Contents
------------------------------------------------ */
.section {
	line-height: 2;
}
.section:not(:first-of-type) {
	scroll-margin-top: var(--headerHeight);
}
.section:first-of-type {
	scroll-margin-top: 16px;
}
.section__bg {
	width: 1440px;
	margin: 0 auto;
	padding: var(--globalContentPadding) calc(10 * var(--globalContentPadding) / 8);
	position: relative;
}
.container > .section:first-of-type .section__bg {
	padding-top: calc(var(--globalContentPadding) * 2);
}
.container > .section:last-of-type .section__bg {
	padding-bottom: calc(var(--globalContentPadding) * 2);
}
.section__inner {
	padding: var(--globalContentPadding);
	border: 1px solid #494948;
	position: relative;
	z-index: 1;
}

/* セクション背景のシェイプ */
.shape {
	display: block;
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.shape1 {
	aspect-ratio: 100/50;
	width: 100px;
	background-image: url(/assets/img/shape1.svg);
	left: 18px;
	top: 28px;
}
.shape2 {
	aspect-ratio: 122/126;
	width: 122px;
	background-image: url(/assets/img/shape2.svg);
	right: 105px;
	top: 46px;
}
.shape3 {
	aspect-ratio: 142/146;
	width: 142px;
	background-image: url(/assets/img/shape3.svg);
	left: 160px;
	bottom: -10px;
}
.shape4 {
	aspect-ratio: 136/66;
	width: 136px;
	background-image: url(/assets/img/shape4.svg);
	right: 4px;
	top: 60px;
}
.shape5 {
	aspect-ratio: 212/42;
	width: 212px;
	background-image: url(/assets/img/shape6.svg);
	right: 32px;
	bottom: 46px;
}
.shape6 {
	aspect-ratio: 92/94;
	width: 92px;
	background-image: url(/assets/img/shape5.svg);
	top: -28px;
	left: -20px;
}
.shape7 {
	aspect-ratio: 60/58;
	width: 60px;
	background-image: url(/assets/img/shape7.svg);
	right: 40px;
	top: 152px;
}
.shape8 {
	aspect-ratio: 114/116;
	width: 114px;
	background-image: url(/assets/img/shape8.svg);
	top: 1140px;
	right: -8px;
}
.shape9 {
	aspect-ratio: 80/54;
	width: 80px;
	background-image: url(/assets/img/shape9.svg);
	bottom: 634px;
	left: 48px;
}
.shape10 {
	aspect-ratio: 108/94;
	width: 108px;
	background-image: url(/assets/img/shape10.svg);
	top: -24px;
	right: 12px;
}
.shape11 {
	aspect-ratio: 278/50;
	width: 278px;
	background-image: url(/assets/img/shape11.svg);
	left: 10px;
	top: 54px;
}
.shape12 {
	aspect-ratio: 126/76;
	width: 126px;
	background-image: url(/assets/img/shape12.svg);
	right: 40px;
	bottom: 500px;
}
.shape13 {
	aspect-ratio: 108/100;
	width: 108px;
	background-image: url(/assets/img/shape13.svg);
	left: -8px;
	bottom: 0;
}

/* 枠線 */
.corner,
.partition {
	display: block;
	position: absolute;
}
.corner1,
.corner3,
.corner4 {
	aspect-ratio: 16/32;
	width: 16px;
}
.corner1 {
	border-right: 1px solid #494948;
	border-bottom: 1px solid #494948;
	bottom: 100%;
	right: 100%;
}
.corner2 {
	aspect-ratio: 33.37/32;
	width: 33.37px;
	border-left: 1px solid #494948;
	border-bottom: 1px solid #494948;
	bottom: 100%;
	left: 100%;
}
.corner3 {
	border-right: 1px solid #494948;
	border-top: 1px solid #494948;
	top: 100%;
	right: 100%;
}
.corner4 {
	border-left: 1px solid #494948;
	border-top: 1px solid #494948;
	top: 100%;
	left: 100%;
}
.partition {
	background-color: #494948;
}
.partition1,
.partition3 {
	width: 1px;
	height: 32px;
	left: 50%;
}
.partition2,
.partition4 {
	width: 16px;
	height: 1px;
	top: 50%;
}
.partition1 {
	bottom: 100%;
	transform: translateX(-1px);
}
.partition2 {
	left: 100%;
}
.partition3 {
	top: 100%;
}
.partition4 {
	right: 100%;
	transform: translateY(-1px);
}

/* 見出し・テキスト周り */
.section-title {
	display: grid;
	grid-template-columns: 100%;
	justify-items: center;
	gap: 8px;
	background-color: #fff;
}
.section-title + * {
	margin-top: 48px;
}
.section-title__main,
.section-title__sub {
	width: 100%;
	font-weight: bold;
	text-align: center;
}
.section-title__main {
	font-family: "Montserrat", sans-serif;
	font-size: 56px;
	line-height: 1;
	letter-spacing: 3.25px;
}
.section-title__sub {
	display: block;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 20px;
	line-height: 1.6;
}
.block + .block {
	margin-top: 80px;
}
.block-title {
	display: flex;
	gap: 0 32px;
	align-items: center;
	padding: 8px 32px;
	border: 1px solid #DDDDDD;
	border-radius: 300px;
	font-size: 24px;
	font-weight: bold;
	line-height: 1.4;
}
.block-title + * {
	margin-top: 32px;
}
.block-title::before {
	content: '';
	aspect-ratio: 1/1;
	display: block;
	width: 12px;
	border-radius: 50%;
	background-color: #1BB8CE;
	flex-shrink: 0;
}
.block-title span {
}
.lead {
	font-weight: bold;
}
.list-disc {
  margin-left: 1em;
}
.list-disc > li {
  list-style-type: disc;
  padding-left: 8px;
}
.list-disc > li::marker {
  content: '・';
}

/* section-message */
.section-message .lead,
.section-message .officer-name {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}
.officer-name {
	display: flex;
	justify-content: flex-end;
	align-items: baseline;
	gap: 1em;
	margin-top: 32px;
}
.officer-name__name {
	font-size: 32px;
	font-weight: bold;
}

/* section-philosophy */
.section-philosophy .section__inner {
	display: grid;
	grid-template-columns: 100%;
	justify-items: center;
	gap: 48px;
}
.section-philosophy p {
	width: 100%;
	text-align: center;
}
.section-philosophy .lead {
	margin-top: 0;
}
.section-philosophy .figure {
	width: 720px;
}
.section-philosophy .figure + * {
}

/* section-profile */
.section-profile .table-profile {
	width: 100%;
	font-size: 16px;
}
.section-profile .table-profile th {
	width: 256px;
	background-color: #EFF2F5;
	font-weight: normal;
	text-align: left;
	vertical-align: top;
}
.section-profile .table-profile th {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}
.section-profile .table-profile tr:first-of-type th {
	border-top-color: #EFF2F5;
}
.section-profile .table-profile td {
	border-top: 1px solid #EFF2F5;
	border-bottom: 1px solid #EFF2F5;
}
.section-profile .table-profile .table-data {
	display: table;
}
.section-profile .table-profile .table-data .data-group {
	display: table-row;
}
.section-profile .table-profile .table-data dt,
.section-profile .table-profile .table-data dd {
	display: table-cell;
}
.section-profile .table-caption {
	text-align: right;
}
.section-profile .data-shareholder dt {
	width: 12em;
}
.section-profile .data-officer dt {
	width: 10em;
}

/* section-sustainability */
.section-sustainability .section__inner {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	padding: 0;
}
.section-sustainability .section-title {
	justify-items: start;
}
.section-sustainability .section-title .section-title__main,
.section-sustainability .section-title .section-title__sub {
	text-align: left;
}
.section-sustainability .block {
	display: grid;
	grid-template-columns: 100%;
	align-content: center;
	gap: 48px;
	height: 528px;
	margin-top: 0;
	padding: 64px;
	font-weight: bold;
}
.section-sustainability .block1 {
	border-right: 1px solid #494948;
	border-bottom: 1px solid #494948;
}
.section-sustainability .block1 .section-title + p {
	margin-top: 0;
}
.section-sustainability .block2,
.section-sustainability .block3 {
	position: relative;
}
.section-sustainability .block2::before,
.section-sustainability .block3::before {
	content: '';
	aspect-ratio: 56/40;
	display: block;
	width: 560px;
	border-radius: 32px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: absolute;
	left: 40px;
	top: 64px;
}
.section-sustainability .block2::after,
.section-sustainability .block3::after {
	content: '';
	display: block;
	aspect-ratio: 1/1;
	width: 1px;
	background-color: #494948;
	position: absolute;
}
.section-sustainability .block2::before {
	background-image: url(/assets/img/index_sustainability_pic2.jpg);
	box-shadow: 16px 16px 0 0 #E94829;
}
.section-sustainability .block2::after {
	bottom: 0;
	left: 0;
}
.section-sustainability .block3::before {
	background-image: url(/assets/img/index_sustainability_pic1.jpg);
	box-shadow: 16px 16px 0 0 #1BB8CE;
}
.section-sustainability .block3::after {
	top: 0;
	right: 0;
}
.section-sustainability .block4 {
	border-left: 1px solid #494948;
	border-top: 1px solid #494948;
}