@charset "UTF-8";

/*
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

body {
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Noto Sans JP','Noto Sans Japanese','メイリオ','Meiryo',sans-serif;
}
*/

#mainbody {
	top: 0;
	background: #fff;
}
#gl-nav .about-txt {
	display: none;
}

/*
#mainbody * {
    font-family:'SST W55 Bold','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Noto Sans Japanese','メイリオ','Meiryo',sans-serif;
}
*/

.link-button a {
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 120px;
	height: 36px;
	font-size: 1.3rem;
	font-weight: bold;
	color: #000;
	text-decoration: none;
	border: 2px solid #000;
	transition: all 300ms ease-out;
}
.link-button.white a {
	color: #fff;
	border: 2px solid #fff;
}
/*
.link-button a:hover {
	background: rgba(0,0,0,0.2);
}
.link-button.white a:hover {
	background: rgba(255,255,255,0.2);
}
*/
.link-button.en a {
	font-size: 1.4rem;
}


#kv {
	position: relative;
	display: flex;
	align-items: center;
	height: 300px;
}
#kv .inner {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: 0 auto;
	padding: 0 20px;
	z-index: 10;
}

#kv h1 {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 15px 20px;
	font-size: 2rem;
	font-weight: bold;
	background: rgba(255,255,255,0.7);
}
#kv .image {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	bottom: 0;
	z-index: 1;
}
#kv .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}


#inner-links {
	margin: 0 0 25px;
	padding: 15px 0;
	background: #f4f4f4;
}
#inner-links ul {
	display: flex;
	justify-content: center;
}
#inner-links li {
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 0 15px;
	border-left: 1px solid #1a1a1a;
}
#inner-links li:last-child {
	border-right: 1px solid #1a1a1a;
}
#inner-links ul a {
	font-size: 1.5rem;
	font-weight: bold;
	text-decoration: none;
	color: #0071aa;
}
#inner-links ul a:hover {
	text-decoration: underline;
}





.technology-column {
	position: relative;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 0 0 50px;
	z-index: 10;
}

.technology-column .header {
	position: relative;
	height: 150px;
	margin: 0 0 20px;
}

/* Scroll fix */
#inner-links {
	margin-bottom: 55px;
}
.technology-column .header {
	top: -30px;
	margin-bottom: 0;
}
.technology-column {
	padding: 0 0 80px;
}
/* */




.technology-column .header .inner {
	position: relative;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 150px;
	z-index: 10;
}
.technology-column .header .image {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 1;
}
.technology-column .header .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.technology-column .header h2 {
	position: relative;
	z-index: 10;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1.6;
	color: #fff;
	text-align: center;
}

.technology-column .header .image::after {
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 1;
	background: rgba(0,0,0,0.4);
}


.technology-column .list {
	padding: 0 20px;
}
.technology-column .list ul {
}
.technology-column .list li {
}
.technology-column .list li:nth-child(n + 2) {
	margin-top: 30px;
}



.technology-column .image {
	position: relative;
	margin: 0 0 15px;
	overflow: hidden;
}
.technology-column .image video {
	width: 101%;
	height: auto;
}

.technology-column dt {
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.4;
}
.technology-column dd div,
.technology-column dd p {
	margin: 12px 0 0;
	font-size: 1.4rem;
	line-height: 1.7;
}

.technology-column dd p {
	text-align: center;
}
.technology-column dd a {
	color: #000;
}

.technology-column dd p.link {
	margin: 15px 15px 0;
	/*
	font-weight: bold;
	*/
}
.technology-column dd p.link a {
	color: #0b71aa;
	/*
	font-weight: bold;
	*/
}


.technology-column dd {
	position: relative;
	height: 80px;
	overflow: hidden;
	transition: all 300ms ease-out;
}
.technology-column dd::after {
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 60px;
	left: 0;
	bottom: -20px;
	background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
	background: transparent url(../images/mask.png) 0 100% repeat-x;
	background-size: auto 59px;
	pointer-events: none;
	transition: all 300ms ease-out;
}
.technology-column dd[aria-hidden="false"]::after {
	opacity: 0;
}

.technology-column .note {
	display: block;
	padding: 10px 0 2px;
	font-size: 12px;
}

.technology-column .nav {
	margin: 22px 0 0;
	text-align: center;
}
.technology-column .nav button {
	position: relative;
	display: inline-block;
	width: 120px;
	height: 36px;
	font-size: 1.4rem;
	font-weight: bold;
	border: 2px solid #414141;
	background: #fff;
	cursor: pointer;
	transition: all 300ms ease-out;
}
/*
.technology-column .nav button:hover {
	background: rgba(0,0,0,0.1);
}
*/
.technology-column .nav button strong {
	position: relative;
	left: -15px;
	color: #414141;
	font-weight: normal;
}
.technology-column .nav button span {
	position: absolute;
	display: block;
	width: 12px;
	height: 12px;
	right: 12px;
	top: calc(50% - 6px);
}
.technology-column .nav button span::before {
	position: absolute;
	content: "";
	display: block;
	width: 12px;
	height: 2px;
	left: 0;
	top: calc(50% - 1px);
	background: #4a4a4a;
}
.technology-column .nav button span::after {
	position: absolute;
	content: "";
	display: block;
	width: 2px;
	height: 12px;
	left: calc(50% - 1px);
	top: 0;
	background: #4a4a4a;
}
.technology-column .nav button[aria-expanded="true"] span::after {
	visibility: hidden;
}






.video-player-ui {
	position: absolute;
	left: 10px;
	bottom: 14px;
	z-index: 100;
	transform-origin: left bottom;
}
.video-player-ui::after {
	position: absolute;
	content: "";
	display: block;
	width: 32px;
	height: 32px;
	left: 0;
	top: 0;
	z-index: 1;
	background: rgba(0,0,0,0.5);
	border-radius: 25px;
}
.video-player-ui button {
	position: relative;
	display: block;
	width: 32px;
	height: 32px;
	z-index: 20;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
}
.video-player-ui button canvas {
	position: absolute;
	left: 0;
	top: 0;
	transform-origin: left top;
	transform: scale(0.5);
	z-index: 10;
	display: none;
}
.video-player-ui button span {
	position: absolute;
	width: 16px;
	height: 16px;
	left: 50%;
	top: 50%;
	z-index: 1;
	margin: -8px 0 0 -8px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}





.page-nav {
	padding: 0 0 50px;
}
.page-nav .inner {
	position: relative;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 30px;
	z-index: 10;
}

.page-nav a {
	display: inline-flex;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 91px;
    padding: 6px 10px;
    text-decoration: none !important;
    font-size: 123%;
	font-weight: bold;
    color: #0071aa !important;
    border: 3px solid #0071aa;
}
.page-nav a:hover {
    text-decoration: none !important;
    color: #fff !important;
    background: #0071aa;
}