@charset "UTF-8";

html {
	scrollbar-gutter: stable;
}

h1 {
	font-size: 44px;
	font-family: "Lato", sans-serif;
	color: white;
	font-weight: 700;
	letter-spacing: 2.56px;
	padding: 107px 0 116px;
	background: url(../images/common/lower_h1.png) repeat-x center / auto 100%;
}
h1 span {
	display: block;
	font-size: 16px;
	font-family: "Share Tech", sans-serif;
	font-weight: 400;
	margin-bottom: 10px;
}

.wrap {
	margin: 0 auto;
	width: 960px;
	max-width: calc(100% - 40px);
}

#search {
	padding: 124px 0 86px;
}
#search h2 {
	font-family: "Lato", sans-serif;
	font-size: 30px;
	color: white;
	font-weight: 700;
	letter-spacing: 1.8px;
}
#search .input {
	margin-top: 34px;
	width: 480px;
	position: relative;
}
#search .input input {
	border: solid 1px white;
	width: 100%;
	height: 48px;
	border-radius: 5px;
	font-size: 17px;
	padding: 0 50px 0 20px;
	letter-spacing: 1.7px;
	color: white;
}
#search .input button {
	background: url(../images/common/search.png) no-repeat center / auto 30px;
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	aspect-ratio: 1;
}
#search .result {
	margin-top: 22px;
}
#search .result article {
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.10);
	padding: 38px 90px 28px 30px;
	margin-bottom: 10px;
	position: relative;
	cursor: pointer;
	transition: 0.2s;
}
#search .result article h3 {
	color: white;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 1.8px;
	text-decoration: underline;
}
#search .result article p {
	color: white;
	font-size: 17px;
	line-height: 26px;
	margin-top: 23px;
}
#search .result article::after {
	content: '';
	position: absolute;
	top: calc(50%);
	right: 54px;
	width: 35px;
	aspect-ratio: 1;
	background: url(../images/common/arrow.png) no-repeat center / auto 20px white;
	transform: translate(50%, -50%);
	border-radius: 50%;
	transition: 0.2s;
}
#search .result article:hover {
	background: rgba(255, 255, 255, 0.03);
}
#search .result article:hover::after {
	width: 45px;
}
#search .result article[data-detail="none"] {
	pointer-events: none;
}
#search .result article[data-detail="none"]::after {
	display: none;
}
#search .result article[data-detail="none"] h3 {
	text-decoration: none;
}
#search .result article[data-detail="none"] p {
	margin-top: 11px;
	font-size: 0;
	line-height: 0;
}

#history {
	position: relative;
	z-index: 2;
	padding: 120px 0 0;
	overflow: hidden;
}
#history .type {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	background: linear-gradient(to right, #678096cf 0%, #678096cf 50%, #2c5588d6 50%, #2c5588d6 100%);
	text-align: center;
}
#history .type.fixed {
	position: fixed;
	top: 90px;
}
#history .type span {
	display: inline-block;
	width: 50%;
	max-width: 480px;
	color: white;
	font-family: "Lato", sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 60px;
	letter-spacing: 1.32px;
}
#years {
	display: block !important;
	position: fixed;
	top: 204px;
	right: 0;
	z-index: 3;
	width: 120px;
}
#years li {
	display: block;
	color: white;
	text-align: center;
	font-family: "Share Tech";
	font-size: 20px;
	font-weight: 400;
	line-height: 49px;
	border-bottom: solid 1px white;
	cursor: pointer;
	transition: 0.2s;
}
#years li:first-of-type {
	border-top: solid 1px white;
}
#years li:hover {
	background: #ffffff2e;
}
#years li::before {
	content: attr(data-year)' -';
}
#explain {
	color: #FFF;
	font-size: 17px;
	line-height: 32px;
	letter-spacing: 1.7px;
	margin-bottom: 50px;
}
#tag {}
#tag dt {
	color: white;
	font-family: "Lato", sans-serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 40px;
	letter-spacing: 1.8px;
	position: relative;
	width: fit-content;
	padding-right: 60px;
	cursor: pointer;
}
#tag dt::before,
#tag dt::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	aspect-ratio: 1;
}
#tag dt::before {
	background: white;
	border-radius: 50%;
	z-index: 1;
}
#tag dt::after {
	background: url(../images/common/chevron.png) no-repeat center / 18px;
	z-index: 2;
	transition: 0.2s;
	transform: rotateX(180deg);
}
#tag.active dt::after {
	transform: rotateX(0deg);
}
#tag dd {
	padding: 32px 0 0;
}
#tag dd span {
	display: inline-block;
	color: white;
	font-size: 15px;
	line-height: 30px;
	border: solid 1px white;
	padding: 4px 24px;
	border-radius: 20px;
	margin: 0 12px 12px 0;
	cursor: pointer;
	transition: 0.2s;
}
#tag dd span::before {
	content: '#';
}
#tag dd span.active {
	background: white;
	color: #042b4f;
}
#tag dd span:first-of-type::before {
	display: none;
}
#tag dd span:hover {
	opacity: 0.5;
}
#tree {
	padding: 94px 0 0;
}
#tree .yearWrap {
	position: relative;
	padding: 116px 68px 55px;
}
#tree .yearWrap::before {
	content: attr(data-year);
	position: absolute;
	top: 0;
	left: 0;
	color: white;
	font-family: "Share Tech";
	font-size: 80px;
	font-weight: 400;
	line-height: 0.8;
	padding: 0 0 13px;
	background: linear-gradient(to right, white 0, white 100%) no-repeat left bottom / 32px 2px;
}
#tree .yearWrap::after {
	content: '';
	position: absolute;
	/* to@: 0; */
	top: 30px;
	left: 230px;
	z-index: -1;
	height: 785px;
	aspect-ratio: 217 / 157;
	transform: translate(-50%, -50%);
	background: url(../images/common/highlight.png) no-repeat center / contain;
	background-color: #032b4f;
	background-blend-mode: overlay;
	mix-blend-mode: lighten;
}
#tree article {
	border: solid 1px white;
	padding: 25px 76px 20px 20px;
	border-radius: 8px;
	width: 50%;
	margin: 10px 0;
	position: relative;
	cursor: pointer;
}
#tree article::before {
	content: '';
	position: absolute;
	top: -10px;
	width: 12px;
	height: calc(100% + 20px);
	border-left: solid 4px white;
	border-right: solid 4px #557EC0;
}
#tree .yearWrap article:first-of-type::before {
	top: -30px;
	height: calc(100% + 40px);
}
#tree .yearWrap:last-of-type article:last-of-type::before {
	-webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: cover;
	mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
	mask-repeat: no-repeat;
	mask-size: cover;
	height: calc(100% + 30px);
}
#tree article::after {
	content: '';
	position: absolute;
	top: 50%;
	height: 4px;
}
#tree article[data-type="company"] {
}
#tree article[data-type="product"] {
	margin-left: auto;
	border-color: #557EC0;
	background: rgba(85, 126, 192, 0.40);
}
#tree article[data-type="company"]::before {
	left: -59px;
}
#tree article[data-type="product"]::before {
	left: calc(-100% - 61px);
}
#tree article[data-type="company"]::after {
	left: -59px;
	width: 58px;
	background: white;
}
#tree article[data-type="product"]::after {
	left: calc(-100% - 49px);
	width: calc(100% + 49px);
	background: #557EC0;
}
#tree article span {
	position: relative;
	color: white;
	font-size: 14px;
	letter-spacing: 1.4px;
	padding-left: 16px;
}
#tree article span::before {
	content: '';
	background: #557EC0;
	position: absolute;
	top: 50%;
	left: 0;
	width: 6px;
	aspect-ratio: 1;
	border-radius: 50%;
	margin-top: -3px;
}
#tree article p {
	color: white;
	font-size: 17px;
	line-height: 26px;
	letter-spacing: 1.02px;
	margin-top: 9px;
}
#tree article p br {
	display: none;
}
#tree article i {
	position: absolute;
	top: 50%;
	right: 40px;
	width: 31px;
	aspect-ratio: 1;
	background: url(../images/common/plus.png) no-repeat center / auto 14px white;
	transform: translate(50%, -50%);
	border-radius: 50%;
	transition: 0.2s;
}
#tree article:hover i {
	width: 39px;
}
#tree article[data-detail="none"] {
	pointer-events: none;
}
#tree article[data-detail="none"] i {
	display: none;
}

#data {
	margin: 52px 0 0;
}
#data h2 {
	color: white;
	font-family: "Lato", sans-serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 40px;
	letter-spacing: 1.8px;
	padding: 0 0 28px;
	background: linear-gradient(to right, white 0, white 100%) no-repeat left bottom / 50px 2px;
}
#data .link {
	margin: 40px 0 0;
}
#data .link a {
	display: inline-block;
	color: white;
	font-size: 15px;
	line-height: 30px;
	letter-spacing: 0;
	border: solid 1px white;
	padding: 4px 50px 4px 22px;
	border-radius: 20px;
	margin: 0 8px 8px 0;
	background: url(../images/common/link.png) no-repeat right 16px center / 19px;
}
#data .link a:hover {
	opacity: 0.5;
}


@media print, screen and (max-width: 768px) {
h1 {
	padding: 16vw 0 0;
	font-size: 6.7vw;
	height: 46vw;
	background-position: left center;
	background-size: auto 120%;
}
h1 span {
	font-size: 3vw;
	margin-bottom: 2vw;
}
.wrap {
	max-width: 92vw;
}
#search {
	padding: 16vw 0 11vw;
}
#search h2 {
	font-size: 5vw;
	padding: 0 0 6vw;
	background: linear-gradient(to right, white 0, white 100%) no-repeat left bottom /  10vw 2px;
	margin-bottom: 8vw;
}
#search .input {
	width: 100%;
}
#search .input input {
	height: 12vw;
	font-size: 3.6vw;
	padding: 0 18vw 0 5vw;
}
#search .input button {
	aspect-ratio: 1.5 / 1;
	background-size: auto 7vw;
}
#search .result {
	margin-top: 6vw;
}
#search .result article {
	padding: 5.8vw 5vw 3.4vw 5vw;
	margin-bottom: 3.6vw;
}
#search .result article h3 {
	font-size: 4.1vw;
	line-height: 1.5;
}
#search .result article p {
	font-size: 3.6vw;
	line-height: 1.6;
	margin-top: 3.3vw;
	padding-right: 14vw;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3; /* 3行で省略 */
	overflow: hidden;
}
#search .result article::after {
	top: calc(50% + 6vw);
	right: 9.6vw;
	width: 8.6vw;
	background-size: auto 5.2vw;
}
#search .result article:hover {}
#search .result article:hover::after {}
#search .result article[data-detail="none"] {}
#search .result article[data-detail="none"]::after {}
#search .result article[data-detail="none"] h3 {}
#search .result article[data-detail="none"] p {}
#history {
	padding: 27vw 0 0;
}
#history .type {
	background: linear-gradient(to bottom, #678096cf 0%, #678096cf 50%, #2c5588d6 50%, #2c5588d6 100%);
}
#history .type.fixed {
	top: 16vw;
}
#history .type span {
	max-width: none;
	width: 100%;
	font-size: 4vw;
	line-height: 2.1;
}
#years {
	top: 40vw;
	width: 20vw;
	right: -20vw !important;
	transition: 0.5s;
}
#years::before,
#years::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 100%;
	width: 8vw;
	height: 20vw;
	transform: translate(0, -50%);
	border-radius: 4px 0 0 4px;
}
#years::before {
	background: #00000052;
}
#years::after {
	background: url(../images/common/chevron_white.png) no-repeat center / 2.5vw;
	transition: 0.5s;
}
#years.open {
	right: 0 !important;
}
#years.open::after {
	transform: translate(0, -50%) rotateY(180deg);
}
#years li {
	font-size: 4vw;
	line-height: 1;
	background: #00000052;
	padding: 4vw 0;
	border-bottom-color: #ffffff54;
}
#years li:first-of-type {
	border-top-color: #ffffff54;
}
#years li:hover {
	background: #00000052;
}
#years li::before {}
#explain {
		font-size: 3.5vw;
		line-height: 1.9;
		letter-spacing: 1.3px;
		margin-bottom: 10vw;
}
#tag {}
#tag dt {
	font-size: 5vw;
	line-height: 2;
	padding-right: 14.6vw;
}
#tag dt::before,
#tag dt::after {
	width: 9.8vw;
}
#tag dt::before {}
#tag dt::after {
	background-size: 3.4vw;
}
#tag.active dt::after {}
#tag dd {
	padding: 8vw 0 0;
}
#tag dd span {
	font-size: 3vw;
	line-height: 1.8;
	padding: 0.9vw 3.7vw;
	margin: 0 1.7vw 2.7vw 0;
}
#tag dd span::before {}
#tag dd span.active {}
#tag dd span:first-of-type::before {}
#tag dd span:hover {}
#tree {
	padding: 16.5vw 0 0;
}
#tree .yearWrap {
	padding: 21vw 0 13vw 13.3vw;
}
#tree .yearWrap::before {
	font-size: 11.2vw;
	line-height: 0.9;
	padding: 0 0 4.2vw;
}
#tree .yearWrap::after {}
#tree article {
	width: 100%;
	padding: 4.2vw 16vw 4vw 5vw;
	margin: 3vw 0;
}
#tree article::before {
	top: -3.1vw;
	width: 3vw;
	height: calc(100% + 6.2vw);
	border-left-width: 1vw;
	border-right-width: 1vw;
}
#tree .yearWrap article:first-of-type::before {
	top: -5vw;
	height: calc(100% + 8.2vw);
}
#tree .yearWrap:last-of-type article:last-of-type::before {}
#tree article::after {
	height: 1vw;
}
#tree article[data-type="company"] {}
#tree article[data-type="product"] {}
#tree article[data-type="company"]::before {
	left: -11vw;
}
#tree article[data-type="product"]::before {
	left: -11vw;
}
#tree article[data-type="company"]::after {
	left: -10vw;
	width: 10vw;
}
#tree article[data-type="product"]::after {
	left: -8vw;
	width: 8vw;
}
#tree article span {
	font-size: 3.2vw;
	padding-left: 4.3vw;
}
#tree article span::before {
	width: 1.8vw;
	margin-top: -0.9vw;
}
#tree article p {
	font-size: 3.5vw;
	line-height: 1.6;
	margin-top: 2vw;
}
#tree article p br {}
#tree article i {
	right: 8vw;
	width: 6vw;
	background-size: auto 3vw;
}
#tree article:hover i {}
#tree article[data-detail="none"] {}
#tree article[data-detail="none"] i {}
#data {
	margin: 11vw 0 17vw;
}
#data h2 {
	font-size: 5vw;
	line-height: 1;
	padding: 0 0 7vw;
	background-size: 10vw 2px;
}
#data .link {
	margin: 8vw 0 0;
}
#data .link a {
	font-size: 3vw;
	line-height: 1.8;
	padding: 1.7vw 13.7vw 1.7vw 7.1vw;
	margin: 0 1.7vw 2.7vw 0;
	background-position: right 5.8vw center;
	background-size: 4.4vw;
}
#data .link a:hover {}
}