@charset "utf-8";
:root {
	--black: #343434;
	--gray-700: #949494;
	--gray-900: #7A7A7A;
	--white: #FFF;
	--blue-50: #F0F8FF;
	--blue-300: #A8D1F7;
	--blue-600: #60A9EE;
	--blue-700: #408CD4;
	--blue-900: #00529F;
	--text-grad: linear-gradient(95deg, #00529F -0.02%, #60A9EE 49.98%, #4296E5 99.98%);
	--hover-grad: linear-gradient(95deg, var(--blue-700) -0.02%, var(--blue-300) 49.98%, var(--blue-600) 99.98%);
	--light-green:#D5FAFF;
}

body {
	font-size: clamp(14px, 3.7vw, 28px);
}

.subpage-top {
	border-top: 1px solid var(--blue-600);
	border-bottom: 1px solid var(--blue-600);
	width: 100vw;
	margin: 0 calc(50% - 50vw);
	padding: clamp(40px, 10.6vw, 80px) clamp(20px, 5.3vw, 40px);
}

.subpage-title {
	display: flex;
	flex-direction: column;
	gap: 0.1em;
	font-size: clamp(36px, 9.6vw, 72px);
	letter-spacing: 0.2em;
	line-height: 1.3;
	font-weight: 700;
	background: var(--text-grad);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-block: calc((1em - 1lh) / 2);
	padding-top: 0.1em;
}

.subpage-title--sub {
	font-size: clamp(16px, 4.2vw, 32px);
	letter-spacing: 0.16em;
}

.subpage-nav {
	display: none;
}

.subpage-column__right {
	display: none;
}

.subpage-column__left {
	padding: clamp(20px, 5.3vw, 40px);
}

.abstract {
	padding-bottom: clamp(40px, 10.6vw, 80px);
}

.subpage-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(40px, 10.6vw, 80px);
	padding-bottom: clamp(80px, 21.2vw, 160px);
}

.subpage-content__title {
	font-size: clamp(20px, 5.3vw, 40px);
	padding: 1em 0 0.9em;
	letter-spacing: 0.2em;
	line-height: 1.3;
	font-weight: 700;
	width: 100%;
	background: var(--text-grad);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	border-top: 1px solid var(--blue-600);
	border-bottom: 1px solid var(--blue-600);
}

.first-paragraph {
	margin-top: calc(clamp(20px, 5.3vw, 40px) * -1);
}

.subpage-note {
	font-size: clamp(10px, 2.7vw, 20px);
	color: var(--gray-900);
	padding-top: 0.5em;
}

.subpage-content__img {
	width: 100%;
}

.feature-img {
	display: block;
	position: relative;
	width: 100%;
}

.konkatsu-ratio-img::after {
	content: "";
	background: url(../img/about/konkatsu-ratio-deco.svg) no-repeat center center;
	background-size: contain;
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ibj-ratio-img::after {
	content: "";
	background: url(../img/about/ibj-ratio-deco.svg) no-repeat center center;
	background-size: contain;
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ibj-future-img::after {
	content: "";
	background: url(../img/about/future-deco.svg) no-repeat center center;
	background-size: contain;
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.network-img::after {
	content: "";
	background: url(../img/about/network-deco.svg) no-repeat center center;
	background-size: contain;
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.app-img::after {
	content: "";
	background: url(../img/about/app-deco.svg) no-repeat center center;
	background-size: contain;
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.event-img::after {
	content: "";
	background: url(../img/about/event-deco.svg) no-repeat center center;
	background-size: contain;
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.soudanjyo-img::after {
	content: "";
	background: url(../img/about/soudanjyo-deco.svg) no-repeat center center;
	background-size: contain;
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.life-design-img::after {
	content: "";
	background: url(../img/about/life-design-deco.svg) no-repeat center center;
	background-size: contain;
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.zoom.active::after {
	animation: poyopoyo 2s ease-out forwards;
  opacity: 1;
}

@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0) translate(-50%, -50%);
  }
  50%, 70% {
    transform: scale(0.95) translate(-50%, -50%);
  }
}

.paragraph {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 4.2vw, 32px);
	width: 100%;
}

.paragraph-title {
	font-size: clamp(16px, 4.2vw, 32px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.08em;
	color: var(--blue-900);
	padding-bottom: 0.5em;
}

.paragraph__enphasis {
	font-weight: 700;
	color: var(--blue-700);
}

.content__sub-link {
	display: flex;
	gap: 8px;
	align-items: center;
	color: var(--blue-900);
	margin-right: auto;
}

.content__sub-link::after {
	content: "";
	background: url(../img/link-arrow_blue.svg) no-repeat center center;
	background-size: contain;
	display: inline-block;
	width: clamp(24px, 6.4vw, 48px);
	height: clamp(24px, 6.4vw, 48px);
	min-width: 24px;
	vertical-align: middle;
}

.pickup--about {
	margin-top: 0;
	padding-top: 0;
	border: none;
	gap: clamp(40px, 10.6vw, 80px);
}

.stepbar {
  margin: 0 auto;
	padding-left: 2em;
}

.stepbar__wrap {
  margin: 1.2em 0;
  position: relative;
}

.step {
  display: inline-flex;
  align-items: flex-start;
	gap: 0.3em;
}

.step__circle {
  display: inline-block;
  min-width: 0.8em;
  min-height: 0.8em;
  content: "";
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid var(--blue-600);
	margin-top: 0.3em;
	position: relative;
}

.step {
	display: flex;
	align-items: flex-start;
	line-height: 1.3;
}

.step__list {
	display: flex;
}

.step__year {
	color: var(--blue-700);
}

.step__text {
  padding-left: 0.8em;
  color: var(--blue-900);
	width: 100%;
}

.step__line {
  width: 1px;
  height: calc(100% + 1em);
  background-color: var(--blue-600);
  position: absolute;
  top: 1em;
  left: 0.4em;
  z-index: -1;
}

.stepbar__wrap:last-of-type .step__line:last-of-type {
  display: none;
}

.stepbar__wrap:first-of-type .step__circle::before {
	content: "";
	width: 1px;
  height: calc(100% + 1em);
  background-color: var(--blue-600);
  position: absolute;
  top: -1em;
	left: 0.34em;
  z-index: -1;
}

/* system-page */
.subpage-content__title--first {
	padding-top: 0;
	border-top: none;
}

.subpage-content--system {
	gap: 2em;
}

.subpage-content--system .first-paragraph {
	margin-top: -0.5em;
}

/* 404 */
.not-found-into {
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 5.3vw, 40px);
	padding: clamp(20px, 5.3vw, 40px) clamp(20px, 5.3vw, 40px) clamp(60px, 16vw, 123px);
}

.content__list--not-found {
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 5.3vw, 40px);
}

@media only screen and (min-width: 768px) {
	@media (hover: hover) {
		.subpage-nav__list a:hover {
			opacity: 0.5;
		}
	}
	body {
		font-size: clamp(10px, 1.25vw, 24px);
	}
	.subpage-top {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: 16px;
		align-items: center;
		padding: 0 clamp(48px, 6.25vw, 120px);
	}
	.subpage-title {
		grid-area: 1 / 1 / 2 / 9; 
		font-size: clamp(43px, 5.625vw, 108px);
	}
	.subpage-title--sub {
		font-size: clamp(19px, 1.875vw, 48px);
	}
	.subpage-nav {
		display: block;
		grid-area: 1 / 9 / 2 / 13;
	}
	.subpage-nav__list {
		display: flex;
		flex-direction: column;
		gap: clamp(7px, 0.9vw, 18px);
		align-items: flex-end;
		grid-area: 1 / 9 / 2 / 13;
		padding: clamp(24px, 3.125vw, 60px) 0;
		font-size: clamp(8.5px, 1.1vw, 21px);
		border-left: 1px solid var(--blue-600);
		text-align: right;
	}
	.subpage-nav__list a {
		font-weight: 700;
		background: var(--text-grad);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		transition: 0.5s;
	}
	.subpage-nav__list .current {
		background: var(--text-grad);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		opacity: 0.3;
	}
	.subpage-column {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: 16px;
		padding-top: clamp(34px, 4.7vw, 87px);
		padding-bottom: clamp(77px, 9.4vw, 190px);
	}
	.subpage-column__left {
		grid-area: 1 / 2 / 2 / 10;
		padding: 0;
	}
	.subpage-column__right {
		display: block;
		grid-area: 1 / 11 / 2 / 13;
		font-size: clamp(7px, 0.9vw, 18px);
		position: relative;
	}
	.subpage-column__nav {
		color: var(--blue-700);
		display: flex;
		flex-direction: column;
		gap: clamp(7px, 0.9vw, 18px);
		text-align: right;
		position: sticky;
		top: clamp(80px, 21.2vw, 160px);
		padding-bottom: clamp(80px, 21.2vw, 160px);
	}
	.subpage-column__nav-title {
		font-size: clamp(8.5px, 1.1vw, 21px);
		font-weight: 700;
	}
	.subpage-column__list {
		display: flex;
		flex-direction: column;
		gap: 0.75em;
	}
	.subpage-column__list a {
		text-decoration: underline;
	}

	.konkatsu-ratio-img::after {
		content: "";
		background: url(../img/about/konkatsu-ratio-deco_pc.svg) no-repeat center center;
		background-size: contain;
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.ibj-ratio-img::after {
		content: "";
		background: url(../img/about/ibj-ratio-deco_pc.svg) no-repeat center center;
		background-size: contain;
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.ibj-future-img::after {
		content: "";
		background: url(../img/about/future-deco_pc.svg) no-repeat center center;
		background-size: contain;
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.konkatsu-ratio-img__adjust {
		width: 75%;
	}

	.subpage-column {
		padding: clamp(36px, 4.7vw, 90px) 0 0;
		max-width: 1920px;
		margin: 0 auto;
	}

	.abstract {
		padding: 0 0 clamp(36px, 4.7vw, 90px);
		font-size: clamp(11px, 1.4vw, 27px);
	}

	.subpage-content {
		gap: clamp(28px, 3.75vw, 72px);
		padding-bottom: clamp(48px, 6.4vw, 120px);
	}

	.subpage-content__title {
		font-size: clamp(16.8px, 2.2vw, 42px);
		padding: clamp(12px, 1.6vw, 30px) 0;
	}

	.subpage-note {
		font-size: clamp(6px, 0.78vw, 15px);
	}

	.paragraph {
		width: 100%;
		gap: 1.25em;
	}

	.paragraph--grid {
		display: grid;
		grid-template-columns: repeat(8, 1fr);
		gap: clamp(16px, 4.2vw, 32px);
	}

	.paragraph__wrap {
		grid-area: 1 / 1 / 2 / 6;
	}

	.feature-img {
		grid-area: 1 / 6 / 2 / 9;
	}

	.first-paragraph {
		margin-top: -1em;
	}

	.paragraph-title {
		font-size: clamp(11px, 1.4vw, 27px);
	}

	.content__sub-link {
		gap: 0.4em;
	}

	.content__sub-link::after {
		content: "";
		background: url(../img/link-arrow_blue.svg) no-repeat center center;
		background-size: contain;
		display: inline-block;
		width: clamp(19px, 2.5vw, 36px);
		height: clamp(19px, 2.5vw, 36px);
		min-width: 19px;
		vertical-align: middle;
		transition: transform .5s ease-in-out;
	}

	.content__sub-link:hover::after {
		transform: translateX(4px);
	}

	.pickup--about {
		margin-top: 0;
		padding: 0;
		border: none;
		display: grid;
		grid-auto-flow: column;
	}

	.stepbar {
		padding-left: 2.4em;
	}

	.step__list {
		font-size: clamp(8.5px, 1.1vw, 21px);
	}

	.step__circle {
		margin-top: 0.2em;
	}

	/* system-page */
	.subpage-content__title--first {
		padding-top: 0;
	}

	.subpage-content--system .first-paragraph {
		margin-top: auto;
	}

	.subpage-content--system {
		gap: 2.5em;
	}

	.paragraph--last {
		padding-bottom: clamp(48px, 6.4vw, 120px);
	}

	.system-img {
		width: 75%;
		margin: 0 auto;
	}

	/* 404 */
	.not-found-title {
		font-size: clamp(31.2px, 4vw, 78px);
	}
	.not-found-into {
		grid-area: 1 / 2 / 2 / 12;
		gap: 2.5em;
		padding: 0 0 clamp(48px, 9.4vw, 180px);
	}

	.content__list--not-found {
		justify-content: flex-start;
		flex-direction: row;
		gap: 2.5em;
	}

	.content__sub-link--not-found {
		margin-right: 0;
	}

}